Les ateliers android_1_vers2015

ISET Nabeul

Version : janvier 2014

Manuel des ateliers Développement mobile 1

Saber LAJILI Enseignant Technologue

LM

D S

EM

2 e

t D

SI3

: M

od

ule

dé

ve

lop

pe

me

nt

mo

bil

e 1

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

LM

D S

EM

2 e

t D

SI3

: M

od

ule

dé

ve

lop

pe

me

nt

mo

bil

e 1

ATELIER 1 ANDROID 1er janvier

2014


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

LM

D S

EM

2 e

t D

SI3

: M

od

ule

dé

ve

lop

pe

me

nt

mo

bil

e 1


2014


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 »

LM

D S

EM

2 e

t D

SI3

: M

od

ule

dé

ve

lop

pe

me

nt

mo

bil

e 1


2014


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

LM

D S

EM

2 e

t D

SI3

: M

od

ule

dé

ve

lop

pe

me

nt

mo

bil

e 1


2014


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.

LM

D S

EM

2 e

t D

SI3

: M

od

ule

Dé

ve

lop

pe

me

nt

po

ur

Mo

bil

e 1


2014


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…


LM

D S

EM

2 e

t D

SI3

: M

od

ule

Dé

ve

lop

pe

me

nt

po

ur

Mo

bil

e 1


2014


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");

LM

D S

EM

2 e

t D

SI3

: M

od

ule

Dé

ve

lop

pe

me

nt

po

ur

Mo

bil

e 1


2014


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); } }

LM

D S

EM

2 e

t D

SI3

: M

od

ule

Dé

ve

lop

pe

me

nt

po

ur

Mo

bil

e 1


2014



(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, …)

LM

D S

EM

2 e

t D

SI3

: M

od

ule

Dé

ve

lop

pe

me

nt

po

ur

Mo

bil

e 1


2014


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.

LM

D S

EM

2 e

t D

SI3

: M

od

ule

Dé

ve

lop

pe

me

nt

po

ur

Mo

bil

e 1


2014



(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"

LM

D S

EM

2 e

t D

SI3

: M

od

ule

Dé

ve

lop

pe

me

nt

po

ur

Mo

bil

e 1


2014


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)

LM

D S

EM

2 e

t D

SI3

: M

od

ule

Dé

ve

lop

pe

me

nt

po

ur

Mo

bil

e 1


2014


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);

}

});

ATELIER 5 ANDROID 1er janvier 2014

Figure 1:les écrans de l'application

LM

D S

EM

2 e

t D

SI3

: M

od

ule

Dé

ve

lop

pe

me

nt

po

ur

Mo

bil

e 1


2014


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

http://www.google.com/

LM

D S

EM

2 e

t D

SI3

: M

od

ule

Dé

ve

lop

pe

me

nt

po

ur

Mo

bil

e 1


2014


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

LM

D S

EM

2 e

t D

SI3

: M

od

ule

Dé

ve

lop

pe

me

nt

po

ur

Mo

bil

e 1


2014


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

LM

D S

EM

2 e

t D

SI3

: M

od

ule

dé

ve

lop

pe

me

nt

mo

bil

e 1

ATELIER 9 ANDROID 1er janvier 2014


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


LM

D S

EM

2 e

t D

SI3

: M

od

ule

dé

ve

lop

pe

me

nt

mo

bil

e 1

ATELIER 10: ANDROID 2 1er janvier 2014


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


LM

D S

EM

2 e

t D

SI3

: M

od

ule

dé

ve

lop

pe

me

nt

mo

bil

e 1

ATELIER 7: ANDROID 2 1er janvier 2014


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


Les ateliers android_1_vers2015

Mobile

Transcript of Les ateliers android_1_vers2015