ArchivetempGuide Des Cours Et TPs - Module 12 - Développement D - Applications Mobiles - Fevrier 2018 [PDF]

Zitiervorschau

OFPPT Direction Régionale Centre Nord ISTA Route Imouzzer Fès

Technicien en Techniques de Développement Informatique

Guide des travaux pratiques Module 12 : Développement d'applications mobiles Android Studio et Java

Hamid Mask Formateur en TDI

1 / 98

Créez des applications pour Android I - Installation et configuration des outils 1 – Le matériel : Il faut vérifier que votre machine de développement possède :  

RAM 4 Go (fonctionnement lourd). 8 Go recommandé. Disque 6 Go.

2 – Système d’exploitation :  

Pour Windows : Windows Vista ou plus récent. Pour Mac OS : Mac OS 10.8.5 ou plus récent.

3 – Le Java Development Kit (JDK) Pour développer en Java, nous devons installer le JDK (pour «Java Development Kit»).

Il existe deux plateformes en Java :  

Le JRE (Java Runtime Environment), qui contient la JVM (Java Virtual Machine. En gros, c'est l'ensemble des outils qui vous permettra d’exécuter des applications Java. Le JDK (Java Development Kit), qui contient le JRE (afin d’exécuter les applications Java), mais aussi un ensemble d'outils pour compiler et déboguer votre code.

4 – Téléchargement et installation du JDK : Voici le lien de téléchargement : http://www.oracle.com/technetwork/java/javase/downloads/index.html

Cliquez sur Download en dessous de JDK :

2 / 98

Cliquez sur (Accept License Agreement) avant de continuer.

Choisissez ensuite la version adaptée à votre configuration. Une fois le téléchargement terminé, vous pouvez l’installer. 5 – Téléchargement et installation d’Android Studio et le SDK Android : On va maintenant télécharger un pack (fichier) qui contient Android Studio et un outil pour gérer l'installation du SDK Android sur votre système. Android Studio est un environnement de développement (EDI) spécialisé dans le développement d'applications Android. C’est l'IDE privilégié par Google pour le développement Android. Voici le lien de téléchargement : https://developer.android.com/sdk/installing/studio.html

Cliquez sur Download Android Studio pour démarrer le téléchargement :

3 / 98

C'est quoi un SDK ? Les applications Android sont développées en Java, mais un appareil sous Android ne comprend pas le Java tel quel, il comprend une variante du Java adaptée pour Android. Un SDK, un kit de développement, est un ensemble d'outils permettant de développer pour un type d’appareil particulier. Par exemple pour développer pour une console de jeu vidéo, on utilise un SDK spécifique pour développer des applications pour cette console. Une fois le téléchargement terminé, lancez l'installation. Pendant l'installation, vous devrez répondre à certaines questions :

Sélectionnez les options en fonction de votre matériel puis cliquez sur "Next". (Conservez les options Android SDK et Android Virtual Device).

4 / 98

Indiquez où vous souhaitez que Android Studio et le SDK soient installés, puis cliquez sur Next:

5 / 98

Une fois l'installation terminée, lancez Android Studio. 5 – Création de votre premier projet : Dans la fenêtre Android Studio cliquez sur Start a new Android Studio Project pour ouvrir l'assistant de création de projet. Cliquez sur Start a new Android Studio Project

Une nouvelle fenêtre s'ouvrira. Elle contient trois champs :

C’est la première étape de création d'un projet

6 / 98



Application Name : c’est le nom qui apparaîtra sur l'appareil et sur Google Play.



Company Domain : c’est le nom de domaine de votre entreprise (Exemple : tdi2.com).



Project Location : indiquez ici l'emplacement où les fichiers de votre projet seront créés.

Cliquez sur Next pour passer à l'écran suivant.

Cet écran vous permet de sélectionner le matériel de destination de votre application, ainsi que la version d'Android minimum que doit utiliser ce matériel. Sélectionnez la version la plus récente. Une fois votre sélection faites, cliquez sur Next.

7 / 98

Création de la première activité. Sélectionnez Empty Activity et cliquez sur Next.

Ce sont des informations sur la première activité de notre application. Cliquez juste sur Finish . Vous pouvez constater qu’un projet avec une activité de type Empty Activity contient un label au milieu qui affiche le message "Hello World !". Pour exécuter ce programme il faudra relier votre mobile Android via un câble USB à votre PC, ou bien installer un émulateur (un téléphone sur l’écran de votre PC). C’est le sujet des deux paragraphes suivants.

II – Configuration du téléphone (Appareil réel). Votre téléphone doit être configuré de façon à ce qu’il puisse exécuter des applications que vous avez développé. Pour cela, allez dans les paramètres du téléphone : 

Choisissez l'option : Options de développement



Activer l'option Débogage USB

Si Options de développement n’apparait pas allez dans : Paramètres  A propos de l’appareil et appuyer sur Numéro de version sept fois. Retournez ensuite à l’écran Paramètres, vous verrez apparaitre Options de développement.

III – Création d’une machine virtuelle. Une machine virtuelle est un logiciel qui va simuler une machine physique avec ses caractéristiques propres. Par exemple, nous avons l’habitude d’utiliser parfois des machines 8 / 98

virtuelles Linux sur un ordinateur Windows pour faire du développement sous ces environnements. Nous allons donc apprendre comment créer une machine virtuelle qui simulera une machine qui exécute Android afin que nous puissions exécuter nos applications directement sur notre ordinateur. Nous allons faire cela dans le paragraphe suivant.

IV – Notions de base. On va tout d'abord voir ce qu'on appelle des activités et comment les manipuler. Sachant que la majorité de vos applications contiendront plusieurs activités. Nous verrons aussi ce que sont les vues et nous créerons enfin notre premier projet.

1 - Qu'est-ce qu'une activité ? Si vous observez l’architecture de la majorité des applications Android, vous remarquerez qu’elles sont structurées à peu près de la même façon. Une application est un assemblage de fenêtres entre lesquelles il est possible de naviguer. Ces différentes fenêtres sont appelées des activités. Une activité est une interface graphique et elle remplit tout l'écran. Par conséquent, une application ne peut afficher qu'une seule activité à la fois. La figure suivante illustre ce phénomène.

En cliquant sur un élément de la liste à gauche, on ouvre une nouvelle activité. De plus, une activité contient des informations sur l'état actuel de l'application : ces informations s'appellent le context. Ce context constitue un lien avec le système Android ainsi que les autres activités de l'application, comme le montre la figure suivante.

9 / 98

Context = l’ensemble des ressources utilisées. Une activité est constituée du contexte de l'application et d'une seule et unique interface graphique. 2 - États d'une activité Si un utilisateur reçoit un appel, il devient plus important qu'il puisse y répondre que de faire autre chose. La règle est la suivante : À tout moment votre application peut laisser place à une autre application, qui a une priorité plus élevée. Une activité existera dans plusieurs états au cours de sa vie, par exemple un état actif pendant lequel l'utilisateur l'exploite, et un état de pause quand l'utilisateur reçoit un appel. Plus clairement, quand une application se lance, elle se met tout en haut de ce qu'on appelle la pile d'activités. Une pile est une structure de données de type « LIFO » (Last In First Out = Dernier Entré Premier Sortie), c'est-à-dire qu'il n'est possible de n'avoir accès qu'à un seul élément de la pile, le tout premier élément, aussi appelé sommet. Quand on ajoute un élément à cette pile, le nouvel élément prendra la première place et deviendra le nouveau sommet. Quand on veut récupérer un élément, ce sera le sommet qui sera récupéré, sorti de la liste et l'objet en deuxième place deviendra le nouveau sommet, comme illustré à la figure suivante :

10 / 98

Fonctionnement de la pile d'activités L'activité que voit l'utilisateur est celle qui se trouve au-dessus de la pile. Ainsi, lorsqu'un appel (ou un message) arrive, il se place au sommet de la pile et c'est lui qui s'affiche à la place de votre application, qui n'est plus qu'à la deuxième place. Votre activité ne reviendra qu'à partir du moment où toutes les activités qui se trouvent au-dessus d'elle seront arrêtées et sorties de la pile. On retrouve ainsi le principe expliqué précédemment, on ne peut avoir qu'une application visible en même temps sur le terminal, et ce qui est visible est l'interface graphique de l'activité qui se trouve au sommet de la pile. Une activité peut se trouver dans les trois états suivants :  Actif (Active) : L'activité est visible en totalité. C'est ce que l'utilisateur consulte en ce

moment même.  Suspendu (Paused) : L'activité est partiellement visible à l'écran. C'est le cas quand vous recevez un SMS. L'utilisateur devra se débarrasser de l'application partiellement au-dessus pour qu’il puisse à nouveau interagir avec notre activité.  Arrêté (Stopped) : L'activité est tout simplement invisible pour l'utilisateur, car une

autre activité prend toute la place sur l'écran. Le système peut redémarrer l’application ou la détruire pour libérer de la mémoire. 3 - Cycle de vie d'une activité Une activité n'a pas de contrôle direct sur son propre état (et par conséquent vous non plus en tant que programmeur), il s'agit plutôt d'un cycle rythmé par les interactions avec le système et d'autres applications. Voici un schéma qui présente ce que l'on appelle le cycle de vie d'une activité, c'est-à-dire qu'il indique les étapes que va traverser notre activité pendant sa vie, de sa naissance à sa mort. Vous verrez que chaque étape du cycle est représentée par une méthode. Nous verrons comment utiliser ces méthodes en temps voulu.

11 / 98

Cycle de vie d'une activité Qui peut être représenté aussi de la manière suivante :



Created : l’activité a été créée et prête à être affiché.



Started : l’activité est visible, mais l’utilisateur ne peut l’utiliser. Cet état est immédiatement suivi par l’état Resumed.



Resumed : l’activité est en exécution en avant plan et peut être utilisé par l’utilisateur. (démarrer ou redémarrer).

12 / 98



Paused : l’activité est interrompue par un appel téléphonique ou un message. Elle se trouve dans un état stoppé. L’activité est toujours visible, mais derrière une boite de dialogue et l’utilisateur ne peut l’utiliser.



Stopped : l’activité est déplacée en arrière-plan et devient donc invisible, mais l’instance existe toujours en mémoire. Une activité peut être relancée à partir de cet état sans la recréer.



Destroyed : l’activité est détruite par le système et n’existe plus.

Les activités héritent de la classe Activity. On les trouve dans le package android.app.Activity. Un package = un espace de nom. 4 - Création d’une machine virtuelle (ou émulateur). 

Aller au menu :



Ou bien Cliquez sur l’icône :

Tools  Android  AVD Manager

Cliquez sur le bouton Create Virtual Device en bas de l'écran :

13 / 98

Écran de sélection du matériel à émuler On a choisi de créer un équipement qui correspondra à un Nexus 5, on le sélectionne donc dans le menu central et on clique sur Next.

Nous pouvons sélectionner ici une version d'Android à installer sur notre AVD

14 / 98

Les derniers paramètres pour notre AVD Enfin, nous allons pouvoir sélectionner les derniers paramètres pour notre AVD. Nous gardons toutes les valeurs proposées.  Cliquer sur Finish directement. Notre machine virtuelle a été créée avec succès.

15 / 98

V – Exemples d’applications simples. 1 – Hello World !  Choisisser New Project : Application name : PremiereApplication Campany domain : tdi2.ma Le Manifeste : AndroidManifest.xml (ensemble d’informations sur l’application).

MainActivity (Class Java)

Le Layout :

16 / 98

Après exécution sur notre émulateur :

L’application est bien installée dans l’émulateur :

17 / 98

Notre application devient une application parmi les nombreuses applications sur notre téléphone.

18 / 98

2 – Copier un Texte : TextView – Button - EditView  Choisisser New Project : Application name : Application-01 Campany domain : tdi2.ma Le Layout :

MainActivity contient les Views (Widgets) suivants :   

Un TextBox : editText1 Un Bouton : buttonCopier Un label : textView1

19 / 98

20 / 98

3 – Compter les clics : TextView – 2 Buttons  Choisisser New Project : Application name : Application-02 Campany domain : tdi2.ma

Le Layout : nous avons utilisé un RelativeLayout pour placer les Views les unes après les

autres.

MainActivity contient les Views (Widgets) suivants : Un label : textView Deux Boutons : buttonClick et buttonReset

 

MainActivity.java package introduction.application_02; import import import import import

android.support.v7.app.AppCompatActivity; android.os.Bundle; android.view.View; android.widget.TextView; android.widget.Button;

public class MainActivity extends AppCompatActivity { Button btnClick; Button btnReset; TextView txt; 21 / 98

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); btnClick = (Button) findViewById(R.id.buttonClick); btnReset = (Button) findViewById(R.id.buttonReset); txt = (TextView) findViewById(R.id.textView); btnClick.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int Cpt = Integer.parseInt(txt.getText().toString()); Cpt++; txt.setText(String.valueOf(Cpt)); } }); btnReset.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { txt.setText(String.valueOf(0)); } }); } }

Exécution de l’application :

22 / 98

23 / 98

4 – Nombres aléatoires : Générer des nombres aléatoires à l’aide de la fonction Random(). Etape 1 : Générer des nombres aléatoires (Entre 0 et 100).  New Project : Application name : ApplicationAleatoire Campany domain : tdi2.ma Le Layout : nous avons utilisé un RelativeLayout pour placer les Views les unes après les autres.

MainActivity contient les Views (Widgets) suivants :  

Un label : textView1 Un Bouton : buttonOK

MainActivity.java package ma.tdi2.applicationaleatoire; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.TextView; public class MainActivity extends AppCompatActivity { TextView txtResultat; Button btnOK; 24 / 98

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); txtResultat = (TextView) findViewById(R.id.textView1); btnOK = (Button) findViewById(R.id.buttonOK); btnOK.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int valeur = (int) (Math.random()*100); txtResultat.setText(Integer.toString(valeur)); } }); } }

Exécution de l’application : l’application génère bien des nombres aléatoires.

25 / 98

26 / 98

Faire des Tests

27 / 98

Etape 2 : deviner le nombre aléatoire généré. MainActivity contient les Views (Widgets) suivants :   

Un label : textView1 Un bouton : buttonOK Un textBox : EditView1

28 / 98

MainActivity.java package ma.tdi2.applicationaleatoire; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; public class MainActivity extends AppCompatActivity { TextView txtResultat; Button btnOK; EditText edTSaisie; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); txtResultat = (TextView) findViewById(R.id.textView1); btnOK = (Button) findViewById(R.id.buttonOK); edTSaisie = (EditText) findViewById(R.id.editTextSaisie); btnOK.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int valeur = (int) (Math.random()*100); int valeurSaisie = Integer.parseInt(edTSaisie.getText().toString()); if ( valeur == valeurSaisie) { // Cas : L'utilisateur gagne txtResultat.setText("Bravo, vous avez gagné !"); } else { // Cas : L'utilisateur a perdu txtResultat.setText("Perdu !"); } } }); } }

Exécution de l’application :

29 / 98

Etape 3 : deviner le nombre aléatoire généré qui sera ensuite affiché. Remplaçons le message "Perdu !" par "Perdu ! Il fallait entrer : " + valeur Voici le résultat :

30 / 98

Les tests if-else imbriqués Etape 4 : deviner et comparer la valeurSaisie à la valeur aléatoire. Ici, nous voulons, dans le cas valeur != valeurSaisie, tester si la valeurSaisie est plus petite ou plus grande que valeur. Le code devient : int valeur = (int) (Math.random()*100); int valeurSaisie = Integer.parseInt(edTSaisie.getText().toString()); if ( valeur == valeurSaisie) { // Cas : L'utilisateur gagne txtResultat.setText("Bravo, vous avez gagné !"); } else { // Cas : L'utilisateur a perdu if ( valeurSaisie > valeur){ txtResultat.setText("Perdu Valeur trop grande ! Il fallait entrer : " + valeur); } else { txtResultat.setText("Perdu Valeur trop petite ! Il fallait entrer : " + valeur); } }

Voici le résultat :

31 / 98

Etape 5 : deviner un nombre aléatoire fixe et le comparer la valeurSaisie. Le jeu précédent ne nous donne pas l’occasion de gagner. Il faudra que le nombre aléatoire reste fixe pour pouvoir le deviner. Il faudra aussi ne pas afficher sa valeur. Le code devient : package ma.tdi2.applicationaleatoire; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; public class MainActivity extends AppCompatActivity { TextView txtResultat; Button btnOK; EditText edTSaisie; int valeur; // Variable de classe (Globale) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); txtResultat = (TextView) findViewById(R.id.textView1); btnOK = (Button) findViewById(R.id.buttonOK); edTSaisie = (EditText) findViewById(R.id.editTextSaisie); valeur = (int) (Math.random()*100); // Valeur aléatoire fixe btnOK.setOnClickListener(new View.OnClickListener() { 32 / 98

@Override public void onClick(View v) { int valeurSaisie = Integer.parseInt(edTSaisie.getText().toString()); if ( valeur == valeurSaisie) { // Cas : L'utilisateur gagne txtResultat.setText("Bravo, vous avez gagné !"); } else { // Cas : L'utilisateur a perdu if ( valeurSaisie > valeur){ txtResultat.setText("Perdu Valeur trop grande !"); } else { txtResultat.setText("Perdu Valeur trop petite !"); } } } }); } }

Voici le résultat :

33 / 98

34 / 98

5 – Deux activités : une activité qui appelle une autre en cliquant sur une image. Etape 1 : Ajouter un ImageView pour afficher une image. 

New Project : Application name : AppDeuxActivites Campany domain : tdi2.ma

Le Layout : nous allons utiliser un RelativeLayout pour placer les Views les unes après les autres.



Ajouter les Views suivants :  Deux TextView(s) : textView1 et textView2  Un ImageView : Jeu

Avant d’ajouter l’ImageView, il faudra mettre l’image terre.jpg dans le dossier drawable. L’imageView sera utilisé pour passer de cette activité à la deuxième activité, par simple clic dessus. Une fois l’ImageView glissé au milieu de l’activité, une fenêtre s’ouvrira pour la sélection de l’image terre.jpg.  Ouvrer le fichier string.xml (app  res  values) et ajouter les 2 strings suivants : Bienvenue sur mon application Hello World! 35 / 98

 Modifier le Texte des deux textViews dans le fichier activity_main.xml :