Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Les ateliers android_1_vers2015

Android

  • Login to see the comments

Les ateliers android_1_vers2015

  1. 1. ISET Nabeul Version : janvier 2014 Manuel des ateliers Développement mobile 1 Saber LAJILI Enseignant Technologue
  2. 2. LMDSEM2etDSI3:Moduledéveloppementmobile1 PROF : SABER LAJILI 1 Sommaire Atelier n°1 : Prise en Main................................................................................................................................. 2 1. Démarche de création du projet Android.......................................................................................... 2 2. Création et utilisation d'émulateur ................................................................................................... 3 3. Compilation et exécution de l’application......................................................................................... 4 4. Configuration du lanceur de notre application ................................................................................. 5 5. Débogage sur Android....................................................................................................................... 5 Atelier n°2 : Création des interfaces.................................................................................................................. 6 (Les composants d’une activité)........................................................................................................................ 6 Atelier n°3 : Création des interfaces.................................................................................................................. 9 (Layout et évènements)..................................................................................................................................... 9 Atelier n°4 : Création des interfaces................................................................................................................ 11 (Layout et évènements)................................................................................................................................... 11 Atelier n°5 : Interaction des activités .............................................................................................................. 12 (les Intents)...................................................................................................................................................... 12 Atelier n°6 : Les Intents implicites ................................................................................................................... 15 Atelier n°7 : La technique des préférences...................................................................................................... 16 Atelier n°8 : La technique des préférences...................................................................................................... 17 Atelier n°9 : Manipulation d’une BD SQLite .................................................................................................... 18 Atelier n°10 : service local ............................................................................................................................... 19 (géo localisation).............................................................................................................................................. 19 Atelier n°7 : Connexion à une base de données distante................................................................................ 20 (Web service)................................................................................................................................................... 20
  3. 3. LMDSEM2etDSI3:Moduledéveloppementmobile1 ATELIER 1 ANDROID 1er janvier 2014 PROF : SABER LAJILI 2 Atelier n°1 : Prise en Main 1. Démarche de création du projet Android 1. Ouvrir Eclipse et cliquer le menu « File » et l’option « New Project » 2. Sélectionner le type de projet à créer, dans notre cas : « Android Project » 3. Configurer le projet  Nom du projet : le nom du répertoire qui va contenir les fichiers de projet.  Nom de l'application : le nom qui apparaîtra sur l'appareil Android.  Nom du package : C'est l'espace de nom du package (suivant les mêmes règles que pour les packages dans le langage Java)  Créer une activité : créer un premier composant. Ce sera une sous-classe de la classe Activity.  Version SDK Min : Cette valeur spécifie la version minimale de l‟API Android requise pour notre application. 4. Cliquer sur le bouton « finish » Nous aurons la structure du projet suivante Objectifs - Comprendre la structure d’une application Android. - Configuration de lanceur de l’application. - Réaliser ma première application mobile Android analyser le système de débogage d’Android
  4. 4. LMDSEM2etDSI3:Moduledéveloppementmobile1 ATELIER 1 ANDROID 1er janvier 2014 PROF : SABER LAJILI 3 2. Création et utilisation d'émulateur 1. Menu « Windows », « AVD Manager » 2. Créer un nouveau émulateur, Cliquer sur « new », ensuite remplir les champs « Name », plateforme cible « Target », … Enfin cliquer sur « Create AVD » 3. Finalement, choisir et lancer l’AVD créé en cliquant sur le bouton « Start »
  5. 5. LMDSEM2etDSI3:Moduledéveloppementmobile1 ATELIER 1 ANDROID 1er janvier 2014 PROF : SABER LAJILI 4 On attend quelques seconds, enfin le terminal virtuel s’affiche 3. Compilation et exécution de l’application 1. Dans ce projet, ouvrir le fichier mainActivity.xml du répertoire res/layout. Par la suite, dessiner avec l’assistant l’interface ci-dessous 2. Sélectionner le projet en cours « projet0 », choisir menu « Run », « Run As », « Android Application » 3. l’application passe au premier plan et son interface s’affiche dans le terminal, comme on peut retrouver l’icône du lancement de l’application sur le terminal
  6. 6. LMDSEM2etDSI3:Moduledéveloppementmobile1 ATELIER 1 ANDROID 1er janvier 2014 PROF : SABER LAJILI 5 4. Configuration du lanceur de notre application 1.Clic droit sur le dossier de notre projet «projet0», choisir l’option « Run As », ensuite « Run Configuration » 2.Faire double clic sur l’option «Android Application » 3.Écrire le nom de la nouvelle configuration « projet0» 4.Cliquer le bouton « Browser» pour sélectionner le projet à exécuter, dans notre cas, nous allons choisir le projet «projet0» 5.Sélectionner le projet « projet0» puis sélectionner l’onglet « Target » et choisir le device que nous avons créé. 6.Cliquer le bouton « Apply» 7.Finalement cliquer le bouton « run » 5. Débogage sur Android Le débogage sur Android ne se fait pas avec System.out.println(…) parce qu’Android ne tourne pas sur une JVM normale mais sur DalvikVM. Le LogCat Le LogCat est une partie de DDMS (DalvikDebug Monitor Service), il fournit un mécanisme pour collecter et voir le system de débogage. Utiliser le LogCat Les tags dans le système de log sont des chaines de caractères courtes qui indique l’origine du message (exemple, View,TextView….) La priorité est symbolisé par un parmi les caractères suivants, trié de la plus faible priorité à la plusgrande : V — Verbose (lowest priority) D — Debug I — Info W — Warning E — Error (highestpriority) Comme nous utilisonseclipse, nous pouvons les filtré par priorité on cliquant sur les icones V-D-I-W-Esitué dans la perspective LogCat.
  7. 7. LMDSEM2etDSI3:ModuleDéveloppementpourMobile1 ATELIER 2 ANDROID 1er janvier 2014 PROF : SABER LAJILI 6 Atelier n°2 : Création des interfaces (Les composants d’une activité) Exercice n°1 : On se propose de réaliser une application permettant d’afficher l’heure. Pour ce faire, on vous propose trois solutions différentes. Une première solution consiste à n’utiliser que du code java. Par la suite, on vous demande d’utiliser un fichier XML dans le répertoire « res/layout » pour décrire le composant graphique (widget en anglais) AnalogClock. Enfin, une troisième solution utilisant un bouton. Onclick, ce bouton affiche la date sur ce bouton ou bien dans un TextView. I. Solution 1 : 1.Compléter le fichier MainActivity.java, ensuite compiler et exécuter votre application. 2.Donner le titre « HORLOGE1 » à votre application. (modifier la chaine ap_name dans le fichier string.xml), changer l’icône de bureau de l’application par une image de votre choix (la télécharger de l’internet et la mettre dans le répertoire res/drawable-ldpi). Mettre à jour le fichier AndroidManifest.xml et modifier cette ligne comme suit : android :icon= ‘’@drawable/clock3 ‘’ II. Solution 2 : Donner une deuxième solution en utilisant une description du widget « AnalogClock » dans le fichier «activity_ main.xml ». Ensuite, appeler cette ressource par l’instruction : setContentView(R.layout.activity_main); <?xml version ="1.0" encoding ="utf-8"?> <AnalogClock xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00BB00" /> package com.example.horloge; import android.os.Bundle; import android.app.Activity; import android.graphics.Color; import android.widget.AnalogClock; public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); AnalogClock horloge= new AnalogClock(this); horloge.setBackgroundColor(Color.rgb(0, -1, 1)); setContentView(horloge); } Objectifs - Comprendre le rôle des fichiers ressources (fichier .xml, .png, …), manifest.xml et fichier java. - Manipuler les éléments graphiques de base : bouton, texteView, EditText, ImageView… analyser le système de débogage d’Android
  8. 8. LMDSEM2etDSI3:ModuleDéveloppementpourMobile1 ATELIER 2 ANDROID 1er janvier 2014 PROF : SABER LAJILI 7 III. Solution 3 : Créer un bouton et afficher l’heure sous une forme textuelle, utiliser le fichier de description de ressource main2.xml. Exercice n°2 : Soit l’interface suivante : 1.On vous demande de réaliser cette interface en utilisant uniquement la technique XML 2.Réaliser un petit code Java permettant d’afficher dans un objet Toast l’horoscope de la date de naissance saisie Exercice n°3 1. Dessiner sur papier l’interface correspondante à ce code java. 2. Executer le code et interpreter le résultat 3. Générer le fichier “main.xml” correspondant . Public class MainActivity extends Activity { private LinearLayout profile; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); profile = new LinearLayout (this); profile.setOrientation(1); //disposition vertical ImageView image1 = new ImageView(this); image.setImageResource(R.drawable.photo); TextView login= new TextView (this); login.setText("LOGIN");
  9. 9. LMDSEM2etDSI3:ModuleDéveloppementpourMobile1 ATELIER 2 ANDROID 1er janvier 2014 PROF : SABER LAJILI 8 EditTextView editlogin =new EditTextView; editlogin.setHint("taper votre login"); TextView MP= new TextView (this); MP.setText("MOT DE PASSE"); EditTextView editmp =new EditTextView; editmp.setHint("*******"); profile.addView(image1); profile.addView(login); profile.addView(edilogin); profile.addView(MP); profile.addView(editmp); setContentView(profile); } }
  10. 10. LMDSEM2etDSI3:ModuleDéveloppementpourMobile1 ATELIER 3 ANDROID 1er janvier 2014 PROF : SABER LAJILI 9 Atelier n°3 : Création des interfaces (Layout et évènements) Exercice n°1 : On se propose de réaliser une application de conversion de degrés de température de Fahrenheit-Celsius comme indiqué dans la figure suivante . Pour ce faire on suit les étapes suivantes : 1.Dans le fichier main.xml, créer deux vues de type EditText « edit1 » et « edit2 » et une vue de type button (bouton conversion) dans le fichier main.xml. Choisir la disposition des vue « LinearLayout » avec une orientation « vertical ». 2.Dans un premier temps, on se limite à l’opération de conversion. Par la suite, on ajoutera les autres composants (TexteView, button, …). Soit la formule de conversion des degrés suivantes : Celsius=5/9*(Fahrenheit-32). En réalisant l’évènement « OnClick » sur le bouton « Conversion », le résultat de conversion doit s’afficher dans la zone texte edit2. Pour cela, dans le fichier source java du projet, réaliser le traitement suivant : a.définir les objets : private Button buttconversion; private Button buttquitter; private EditText editTempCelsius ; private EditText editTempFah ; private double res; b.charger les éléments d’interface définis dans main.xml comme suit : Objectifs - Manipuler les dispositions graphiques (Layout en anglais) - Réaliser des évènements (onClick()) pour afficher des objets (String, Toast, …)
  11. 11. LMDSEM2etDSI3:ModuleDéveloppementpourMobile1 ATELIER 3 ANDROID 1er janvier 2014 PROF : SABER LAJILI 10 setContentView(R.layout.activity_main); c. Affecter à ces objets les identificateurs des éléments d’interface déjà définis dans le fichier statique main.xml (utiliser la fonction prédéfinies findViewById()) Exemple : editTempFah = (EditText) findViewById(R.id.edit1); d.Définir les fonctions suivantes :  fconvert : permettant la conversion du degré Celsius en degré Fahrenheit  fquitter : permettant de quitter l’application. Appeler la fonction prédéfinie « finish »  freset : elle a pour rôle de réinitialiser à vide les valeurs des deux zones texte « editTempCelsius » et « editTempFah ». La fonction « fconvert » est appelée lorsqu’il se produit un évènement clic sur le bouton « buttconversion ». Ainsi, on doit définir un listener (écouteur) de type onClick pour le bouton « buttconversion » comme indiqué ci- dessous : Lors du calcul, faites la conversion forcée entre type, la fonction de conversion « fconvert » pourra avoir cette forme : Exercice n°2 : Compléter l’atelier n°1 :  Solution III de l’exercice n°1  question 2 de l’exercice n°2 buttconversion.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { fconvert(); } }); public void fconvert() { res= Double.valueOf(Double.valueOf( 5*(Double.valueOf (editTempFah.getText().toString()).doubleValue()-32))/9) ; editTempCelsius.setText(String.valueOf(res)); } NB :  editTempFah.getText().toString() : pour récupérer le contenu du zone texte  editTempCelsius.setText(String.valueOf(res) : pour affecter le contenu du paramètre « res » au zone texte.
  12. 12. LMDSEM2etDSI3:ModuleDéveloppementpourMobile1 ATELIER 4 ANDROID 1er janvier 2014 PROF : SABER LAJILI 11 Atelier n°4 : Création des interfaces (Layout et évènements) On se propose de réaliser une application « calculatrice » comme l’indique la figure (fig1). Pour ce faire on va suivre la démarche suivante : 1.On commence par définir la vue EdiTtext, ensuite les trois boutons (1, 2, 3, +), enfin le bouton (=) dans le fichier main.xml. Le code des vues peut être : 2.Choisir une disposition « linearLayout » du layout principal avec une orientation « verticale » 3.Pour disposer les quatre boutons (1, 2, 3 et +) horizontalement, insérer un nouveau layout de type « linearLAyout » avec une disposition « horizontal ». 4.Dans le fichier de l’activité principale .java, définir les éléments suivants : a.Des objets butt1, butt2, butt3, buttres, buttplus, edittxt1 b.Charger les vues et les affecter à ces objets (utiliser la méthode findViewById()) comme suit : (exemple : Butt1 = (Button) findViewById(R.id.button1);) c.attribuer un écouteur d'évènement à tous les boutons, pour cela définir les méthodes suivantes : i. public void chiffreClick(String str) ii. public void plusClick() : renvoie la somme des des chiffres tapés iii. public void egalClick() : afficher le résultat de l’opération iv. void resetClick() : réinitialiser la zone de texte à la valeur zéro v. private void calcul() <Button android:id="@+id/button1" android:text="1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" <EditText android:id="@+id/edittext1" android:layout_width="fill_parent" android:layout_height="wrap_content"
  13. 13. LMDSEM2etDSI3:ModuleDéveloppementpourMobile1 ATELIER 5 ANDROID 1er janvier 2014 PROF : SABER LAJILI 12 Atelier n°5 : Interaction des activités (les Intents) On se propose de réaliser une application d’envoi des SMS et de composition des appels téléphoniques. Cette application comporte quatre activités. Vos écrans vont rassembler à ceux décrits dans la Figure 1:les écrans de l'application Pour ce faire, on suit les étapes suivantes : 1. Réaliser la première activité d’authentification « Accueil». C’est la première interface d’interaction avec l’utilisateur. Ce dernier est demandé de fournir son login et son mot de passe. Cette activité comporte deux zones EditText et les boutons « Connexion » et « Quitter » décrits dans le fichier « login.xml ». 2. Définir une deuxième activité de menu contenant les trois boutons « Envoisms » , « Appel téléphonique » et « Déconnexion » décrits dans le fichier « menu.xml ». Lors d’une connexion réussie, la deuxième activité se lance. Pour cela définir une Intent entre les deux activités. Pour définir une Intent, utiliser la primitive suivante : On crée l'objet et on passe la classe de l'activité ciblée par l'Intent: cela revient à passer la main à une autre activité de l'application. Exemple : lancement de l’activité sms.class depuis l’activité menu.class Au sein d'une application, une activité peut vouloir récupérer un code de retour de l'activité "enfant". On utilise pour cela la méthode startActivityForResult qui envoie un code de retour à l'activité enfant. Lorsque l'activité buttenvoisms.setOnClickListener(new OnClickListener(){ @Override public void onClick(View v){ Intent intent1= new Intent(menu.this , sms.class); startActivity(intent1); } }); Intent login = new Intent(this, activite2.class); startActivity(login); Objectifs - Comprendre la composition d’une application Android - Comprendre la notion des « Intent » - Faire communiquer des activités NB : dans la suite des TP, on vous demande de respecter les règles suivantes : 1. Tous les éléments d’interface doivent être déclarés dans des fichiers XML. 2. Chaque activité doit être définie dans une classe «nomActivity. java » (définir des classes java)
  14. 14. LMDSEM2etDSI3:ModuleDéveloppementpourMobile1 ATELIER 5 ANDROID 1er janvier 2014 PROF : SABER LAJILI 13 parent reprend la main, il devient possible de filtrer le code de retour dans la méthode onActivityResult pour savoir si l'on revient ou pas de l'activité enfant. Exemple : 3. Compiler, ensuite exécuter votre application 4. ajouter une troisième activité qui décrit l’envoi d’un sms. Cette actvité doit contenir les éléments d’interface suivants décrit dans le fichier « sms.xml »: deux objets EditText, deux objets TextView et deux boutons « Envoisms » et « Retour ». Grâce à l'objet de gestion de SMS (SmsManager) que l'on récupère via la méthode static getDefault() on envoie le SMS à l'aide de la méthode sendTextMessage. On vous donne l’instruction d’envoi des sms : SmsManager.getDefault().sendTextMessage(num, null, msg, null, null); Pour qu’il fonctionne correctement, demander la permission d'envoyer des messages. Pour cela, ouvrez le fichier androidManifest.xml et ajoutez cette ligne : <uses-permission android:name="android.permission.SEND_SMS"></uses-permission> Pour tester l’opération d’envoi, créer deux émulateurs, lancer l’application dans un premier émulateur ensuite envoyer le sms au second émulateur. Chaque émulateur porte un numéro d’appel. 5. ajouter une dernière activité pour composer des numéros téléphoniques. Cette activité doit contenir les éléments d’interface suivants décrits dans le fichier « telephone.xml » : un EditText et deux boutons « Composer » et « Retour ». Pour ce faire utiliser L'appel d'une Itent devient donc: public void onCreate(Bundle savedInstanceState) { Intent login = new Intent(this, activite3.class); startActivityForResult(login,48); ... } Le filtrage dans la classe parente permet de savoir qui avait appelé cette activité enfant: protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == 48) Toast.makeText(this, "Code de requête récupéré (je sais d'ou je viens)", Toast.LENGTH_LONG).show(); } //lancement de l'interface de composition téléphonique buttcomposer.setOnClickListener(new OnClickListener(){ @Override public void onClick(View v){ Uri telnumber = Uri.parse("tel:5554"); Intent intent2= new Intent(Intent.ACTION_DIAL ,telnumber ); startActivity(intent2); } });
  15. 15. ATELIER 5 ANDROID 1er janvier 2014 Figure 1:les écrans de l'application
  16. 16. LMDSEM2etDSI3:ModuleDéveloppementpourMobile1 ATELIER 6 ANDROID 1er janvier 2014 PROF : SABER LAJILI 15 Atelier n°6 : Les Intents implicites On se propose de réaliser deux activités « ActivityOne » et « ActivityTwo ». La première activité consiste à réaliser une page d’indentification contenant les champs nom, sex et age et le bouton « Entrer ». Lors de l’activation de ce bouton , les données nom et sex seront envoyées à ActivityTwo et le message suivant sera affiché : "Mr/Mme « nom » vous êtes la bienvenue". Pour ce faire, réaliser ce traitement en utilisant : 1. les intents explicites sans retour de données 2. les intents explicites avec retour de données de la deuxième activité (les mêmes données nom et sex) avec affichage du message "Merci pour votre visite Mr/Mme « nom »". 3. Ajouter un deuxième bouton pour afficher de la page web : www.google.com, n’oubliez pas d’ajouter la permission pour accéder à internet dans la section permission du fichier manifest.xml. Objectifs - Comprendre les Intents explicites et implicites - Comprendre les filtres d’intent - Communication et envoi des données entre activités
  17. 17. LMDSEM2etDSI3:ModuleDéveloppementpourMobile1 ATELIER 7 ANDROID 1er janvier 2014 PROF : SABER LAJILI 16 Atelier n°7 : La technique des préférences On vous demande de réaliser l’interface suivante : Cette interface d’authentification peut se rappeler de l’utilisateur une fois que la case du check box était cochée. Pour ce faire, utiliser la technique des préférences pour sauvegarder le login de l’utilisateur qui vient de se connecter. Objectifs - Manipuler des objets Preference - Sauvegarder des données dans des fichiers XML
  18. 18. LMDSEM2etDSI3:ModuleDéveloppementpourMobile1 ATELIER 8 ANDROID 1er janvier 2014 PROF : SABER LAJILI 17 Atelier n°8 : La technique des préférences On reprend l’énoncé de l’atelier n°6 et refaire le travail avec sauvegarde des données dans un fichier xml en utilisant la techniques des préférences. Ainsi on vous demande d’ajouter les contrôles suivants :  En cas d’ajout d’un nouveau visiteur, une boite de dialogue s’affiche. Cette boite contient deux boutons « Annuler » et « Confirmer ».  Si le visiteur existe une boite de dialogue vous avertis que ce dernier existe déjà. On vous aide par ce bout de programme permettant d’afficher une boite de dialogue Objectifs - Maîtriser la manipulation des objets Preference - Tester sur smartphone et accéder au fichier XML
  19. 19. LMDSEM2etDSI3:Moduledéveloppementmobile1 ATELIER 9 ANDROID 1er janvier 2014 PROF : SABER LAJILI 18 Atelier n°9 : Manipulation d’une BD SQLite On se propose de réaliser une application mobile intitulée « guide touristique » permettant d’assister l’utilisateur de l’application mobile à découvrir les hôtels de la ville. En plus, on veut aider le touriste à déterminer les hôtels selon ses exigences ou/et ses préférences. Ainsi, on va créer une BD de type SQLite comportant les tables suivantes : a.User (iduser entier positif, nomuser, sexuser, age, nationalité) b.Hotel (id_hotel, descriptionhotel, type_hotel, vue_de_mer, ville, Rue). Travail à faire : 1.Créer les tables décrites ci-dessus. 2.Remplir cette base par quelques données valides 3.Réaliser une première interface d’authentification qui fournit la possibilité d’inscription pour une première utilisation de l’application 4.Après connexion, un message de la forme suivante : « Mr ou bien Mme, « nom » « prenom » vous êtes la bienvenue … 5.Dans une deuxième interface, créer les éléments graphiques nécessaires pour a.afficher tous les hôtels de la ville de « Nabeul » b.Afficher les hôtels selon les préférences de touriste (comme paramètre : type d’hotel, vue_de_mere, ville) Objectifs - Définir une base de données SQLite - Manipuler la base de données SQLite - Assurer les contraintes d’intégrité et les contraintes référentielles analyser le système de débogage d’Android
  20. 20. LMDSEM2etDSI3:Moduledéveloppementmobile1 ATELIER 10: ANDROID 2 1er janvier 2014 PROF : SABER LAJILI 19 Atelier n°10 : service local (géo localisation) Après avoir créé la base SQLite, dans cet atelier n °10, vous êtes demandé de réaliser les fonctionnalités suivantes : 1.Créer un service local permettant de connecter le téléphone de trouriste au satellite GPS afin de déterminer sa localité n’importe où dans la ville. Par la suite, pour ce faire vous devez suivre les étapes suivantes : a.Fournir des autorisations dans le fichier manifest pour recevoir l’actualisation de localisation b.Créer une instance de LocationManager comme référence pour demander le service de localisation c.Demande de localisation à partir de LocationManager d.Recevez les mises à jour de localisation à partir LocationListener en cas de changement de lieu 2.Le touriste doit être capable d’afficher tous les hotels de la ville 3.l’utilisateur mobile pourra avoir la possibilité d’afficher les hôtels les plus proches. Objectifs - Définir un service local - Savoir invoquer un service - réaliser le service de géolocalisation analyser le système de débogage d’Android
  21. 21. LMDSEM2etDSI3:Moduledéveloppementmobile1 ATELIER 7: ANDROID 2 1er janvier 2014 PROF : SABER LAJILI 20 Atelier n°7 : Connexion à une base de données distante (Web service) On reprend l’atelier du cours et on vous demande de réaliser une interface Android permettant la gestion des élèves (ajout, suppression et consultation). Ainsi, vous devez impl émenter les fonctionnalités suivantes : - Ajout des élèves - Suppression des élèves - Affichage des élèves triés par ncin Objectifs - Définir des services web REST - Implémenter une interface mobile Android - Connexion à une base de données distante - Invoquer des services web par une interface mobile analyser le système de débogage d’Android

×