• Aucun résultat trouvé

Il n’y a pas de programmation mobile sans prise en main de l’IDE

N/A
N/A
Protected

Academic year: 2022

Partager "Il n’y a pas de programmation mobile sans prise en main de l’IDE"

Copied!
22
0
0

Texte intégral

(1)

Téléchargement IDE Android

https://developer.android.com/studio/index.html Dév Mobile Natif :

Plateforme Propriétaire Langage(s) IDE

Android Google Java (et Kotlin depuis 2017) Android Studio

iOS Apple Swift XCode (que sur Apple)

Windows10 Microsoft C# Visual Studio (pas sous linux)

IDE

• Les IDE sont puissants.

• Il n’y a pas de programmation mobile sans prise en main de l’IDE.

IDE multiplateforme

• Un IDE de développement multiplateforme est un IDE qui permet d’écrire un seul code qui produira une application par plateforme. L’IDE propose un langage unique pour produire les 3 applications.

(2)

IDE Android

Android studio :https://developer.android.com/studio/index.html

(3)

Autres langages de dév mobile 1) Javascript

2) C++

3) Pascal

IDE multiplateforme WEB : HTML-CSS-Javascript 1) Apache Cordova (open source) :

2) Adobe Phonegap (basé sur cordova)

IDE multiplateforme Natif

1) Xamarin : C# (pas sous linux) 2) QT : C++

3) Delphi : Pascal (que sous Windows) 4) Windev mobile : W-Langage

Tester son code

• Emulateur

• Téléphone

(4)

Type de programmation en programmation mobile

• Programmation XML (type HTML) o Pour l’interface utilisateur

o On code un écran en XML un peu comme on code un page en HTML.

o Des balises permettent de réaliser l’interface : texte, zone de saisie, bouton, listes, etc.

• Programmation événementielle (type Javascript).

o Pour que l’interface utilisateur réagisse

o On crée des événement sur les actions de l’utilisateur ou du système.

o Il faudra faire le lien entre l’interface utilisateur XML et le code qui gère les événement (du Java).

Exemple : http://bliaudet.free.fr/IMG/zip/TopQuiz_JavaScript_Etape1.zip

• Programmation objet, Java si Android.

o Pour la logique métier : l’événementielle et les calculs associés.

o En fonction des demande de l’utilisateur ou des événements système, il faut coder les tâches à réaliser : ça se fait en Java.

Exemple de code Java : http://bliaudet.free.fr/IMG/zip/Android-POO-Java.zip

(5)

L’IDE Android

(6)

Notion d’écran = activity - Java

Principes

o Une application contient au moins 1 écran.

o On peut passer d’un écran à un autre.

o Les contrôles se positionnent sur l’écran.

o Un écran est associé à une classe Java avec le code lié à l’écran.

Activity Android = écran

o Un écran Androïd s’appelle « activity »

o Une activity est une partie autonome de l’application.

o Une activity est un objet java qui hérite de la classe Activity.

o Une activity contient une vue qui est un fichier XML.

Cycle de vie d’une activity :

o onCreate : permet d’initialiser l’activité.

o onStart, onRestart : pour démarrer ou redémarrer après un arrêt o onStop : pour arrêter l’activité

o onDestroy : pour un arrêt complet.

o onPause : pour la mise en pause (quand on passe en arrière-plan) o onResume : pour la reprise après la pause.

(7)

La vue d’un écran : un fichier XML pour l’interface utilisateur (l’IHM)

L’IHM sert à :

o Afficher : informer l’utilisateur de certains changements d’état de

l’application qui peuvent venir de l’utilisateur, de l’application elle-même ou d’autres applications.

o Contrôler : informer l’application des souhaits de l’utilisateur à travers des éléments de contrôle (bouton, menu, case à cocher, mouvement du

téléphone).

Éléments XML de l’écran pour le contrôle et l’affichage : o TextView : pour éditer un texte

o EditView : pour saisir un texte o CheckBox : une case à cocher o Spinner : liste de choix o Button : bouton à cliquer o Etc.

Position des éléments dans un écran :

o Linéaire : les éléments sont les uns à la suite des autres, horizontalement ou verticalement : <LinearLayout android :orientation=« vertical »>

o Absolue : chaque éléments est positionné avec ses coordonnées.

o Relative : les éléments sont disposées les uns par rapport aux autres.

o En bordure : les éléments sont disposées par rapport aux bordures de l’écran, comme s’ils étaient aimantés.

o En grille : l’écran est découpé par une grille et les éléments sont positionnés dans la grille.

Taille des éléments :

o Largeur : android:layout_width : pour la largeur d’un élément.

« wrap_content » : espace minimum. « match_content » : largeur du parent.

« 10 dp » : taille fixe.

o Hauteur : android:layout_height :pour la hauteur d’un élément.

o Gravity : android:layout_gravity : positionnement par rapport à son parent.

« center_horizontal », « center_vertical » : centré par rapport au parent.

« left », « right », « top », « end » : calé à gauche, à droite, en haut, en bas.

« start » : au début, top ou left selon les cas.

(8)

La programmation événementielle

Principes : on code les réactions à des événements.

• Lien entre une page d’affichage et une page de calcul. Par exemple : HTML et Javascript. Sous Android : XML et Java.

Exemples d’événement : clic bouton, glissement d’un doigt, pincement de 2 doigts, passage en arrière-plan, écoulement du temps, etc.

• On associe un « écouteur d’événement » (listener) à un élément de l’écran. Par exemple à un bouton, à une zone de saisie, mais aussi au mouvement du téléphone par exemple.

On code des actions correspondant à l’arrivée de l’événement.

o Design pattern de la programmation événementielle : le design pattern

« observateur ». Principe : un sujet gère une liste d’observateurs. Quand le sujet change d’état (c’est un événement), les observateurs sont prévenus et réagissent en conséquence.

o Un listener Java est donc un observateur rattaché à un élément de l’écran.

Chaque observateur observe un événement particulier et réagit en conséquence.

• On va « setter » des listerner ou « ajouter » (add) des listener à des éléments de contrôle et d’affichage de l’écran : button. setOnClickListener() ou

editText.addTextChangedListener().

Ensuite on code ce qu’il faut faire dans la méthode associée en fonction de l’événement.: onClick() ou onTextChanged().

(9)

Déclaration de la classe d’un écran

Une activity est déclarée comme une Classe

o Créer un écran, c’est créer une classe qui hérite de AppCompatActivity qui hérite de Activity.

o Cette classe est déclarée dans le Manifest (fichier AndroidManifest.xml).

o Une activity contient des attributs.

o Une activity contient une méthode : onCreate, qui sert à déclarer tout ce dont l’activité aura besoin.

Attributs d’une activité Android :

o Une activité Android contient comme attributs : tous les objets qui correspondent aux éléments de l’écran (contrôle et affichage).

o Et aussi toutes les données qui serviront pour faire les calculs (toutes les données du modèle au sens MVC utile à ce niveau).

On peut ajouter :

o Des méthodes private qui factorisent le code dans onCreate()

o Des attributs et des méthodes « static » (globaux) qui permettent de manipuler des informations dans d’autres écrans.

(10)

méthode onCreate

2 premières lignes du onCreate :

o Ligne 1 : super.onCreate(savedInstanceState); // appel du onCreate() de la classe parente (celle dont on hérite).

o Ligne 2 : setContentView(R.layout.activity_game); // lien avec le fichier XML.

La classe « R » contient l'ensemble des identifiants de toutes les ressources du projet.

« layout » est le dossier des fichiers XML (donc les vues).

Lignes suivantes du onCreate :

o 1 : Initialisation des attributs correspondant aux éléments de l’écran avec la méthode : findViewById(). On crée les objets à partir des identifiants des éléments de l’écran (attribut id="@+id/…) dans le XML.

o 2 : Initialisation des attributs du modèle (au sens MVC) o 3 : Mise à jour de l’état de l’écran.

o 4 : Création des événements sur certains éléments de l’écran et écriture des méthodes correspondantes : onClick(), onTextChanged(), etc. C’est la partie programmation événementielle.

(11)

4 : Changement d’écran

• Pour changer d’écran, on se situe dans une méthode d’un listener, onClick() par exemple.

• On crée d’abord un objet de la classe Intent : o Intent intent = new Intent(this, Ecran2.class)

o Le this, c’est l’écran (l’activité) en cours, Ecran2, c’est la nouvelle activité.

• On peut ajouter une information à l’intent créé : la valeur saisie dans un EditText par exemple :

o Intent.putExtra(« nom », editText.getText()) o On passe un couple clé – valeur au putExtra

• Enfin, on peut démarrrer le 2ème écran : o startActivity(intent)

• Le 2ème écran peut récupérer l’information transmise, le « nom », et le setter dans un TextView par exemple :

o textView.setText( getIntent().getExtras().getString(« nom ») ) o On fournit la clé au getExtras() via le getString()

(12)

Programmation objet

objet : état et comportement

o Un objet est une variable contenant plusieurs informations de type différents et accédant à des fonctions appelées méthodes qui permettent de faire des traitements à partir de cet objet.

o Les valeurs des informations de l’objet s’appellent l’état de l’objet.

o Les méthodes auxquelles peuvent accéder un objet s’appelle le comportement de l’objet.

Classe

o Quand on écrit : « int a ; » ou « String ch » on déclare une variable « a » de type « int » et une variable « ch » de type « String ».

o Un type définit les valeurs possibles pour une variables et les opérations qu’on pourra faire avec par exemple : avec un « int », on peut faire des « + »,

« * », « / », etc. Avec une « String », on peut faire des « + » qui n’ont pas le même sens qu’avec un int.

o Une classe est un type correspondant à un objet exactement dans le même sens qu’un int ou qu’une String est un type pour une variable.

o Déclarer une classe, c’est :

1) déclarer les informations qui seront associées aux objets : on les appelle « attribut »

2) écrire les fonctions qui permettront de faire les traitements sur les objets. On les appelle « méthode ».

(13)

Programmation objet (suite – 1)

Classification des méthodes : getter, setter, constructeur, responsabilité o Il y a 4 sortes de méthodes. 3 sortes « génériques » : les méthodes qu’on

retrouvent pour toutes les classes. Et 1 sorte spécifique : les méthodes spécifiques à chaque classe.

o La subtilité de la programmation objet consiste à trouver et écrire les bonnes méthodes spécifiques.

o Les méthodes génériques sont : les getter, les setter et le constructeur.

Un getter (ou accesseur) permet de récupérer la valeur d’un attribut. Il s’appelle getAttribut1(), getNom() ou parfois directement attribut1(), nom().

Un setter (ou mutateur) permet de donner la valeur d’un attribut. Il s’appelle setAttribut1(attribut1) ou setNom(nom).

Un constructeur permet de créer un objet en lui fournissant des valeurs initiales. Il a toujours le nom de sa classe, en commençant par une majuscule.

o Les méthodes spécifiques ont le nom qu’on veut. Ce sont les responsabilités de la classe.

Principe d’encapsulation : private, public, protected

o L’encapsulation consiste à empêcher les utilisateurs d’une classe (les développeurs) de pouvoir accéder directement aux attributs de la classe et donc de pouvoir les modifier sans contrôle. Les attributs ne seront accessibles qu’à travers les méthodes.

o Pour contrôler ces accès, les attributs et les méthodes auront une propriété de visibilité : « private », « public », ou « protected ». « private » veut dire qu’un utilisateur ne peut pas y accéder. « public » veut dire le contraire.

« protected » veut dire que seul les objets enfants de la classe pourront y accéder. Quand on ne met rien, c’est quasiment équivalent à un « public » (c’est un « public » pour tous les objets du même package).

(14)

Programmation objet (suite – 2)

UML

(15)

Programmation objet (suite – 3)

Code Java

(16)

Programmation objet (suite – 4)

Association entre classes

Exemples de code : 20-Collection-Repertoire et 20-Collection-Repertoire-List

Héritage

Exemple de code : 30-Heritage-Point

Polymorphisme

Exemple de code : 40-polyplorphisme-Animal

Interface

Exemple de code : 51-DP-Strategie-Les canards : interfaces ComportementCancan et ComportementVol

(17)

MVC : modèle – vue – contrôleur

Structure de base d’un programme Lire les données -> le modèle Traiter les données -> le contrôleur Afficher les données -> la vue

La logique du MVC :

Le contrôleur est le « main » :

-> Il va utiliser le modèle, c’est-à-dire l’organisation des données.

-> Il fait les traitements sur les données en fonction des demandes de l’utilisateur. C’est le cœur du contrôleur.

-> il affiche les résultats : c’est l’utilisation de la vue.

Le MVC dans Androïd :

(18)

• Le diagramme des classes du TP 2 : o Contrôleurs :

MainActivity GameActivity

o Modèles utilisées par les contrôleurs : User

LesQuestions Questions

(19)

Les ressources Présentation

• Les ressources sont des données utilisées par l’application et stockées dans des fichiers.

• Les ressources sont incluses dans les packages de l’application, livrées avec elle et facilement accessibles.

• Elles concernent essentiellement : o La langue

o La taille de l’écran

o La résolution de l’écran (ou densité) o L’orientation de l’écran

o La présence de périphériques (capteurs) o La version du système d’exploitation

• Les ressources permettent de factoriser certaines parties du code : on définit certaines choses dans les ressources puis l’application les utilise.

• Elles permettent aussi définir une organisation et une syntaxe commune pour prendre en charge ces différents points.

• Réf : https://openclassrooms.com/fr/courses/2023346-creez-des-applications-pour- android/2024279-les-ressources

Organisation des ressources : par dossier

• Les ressources sont organisées dans des dossiers dont le nom est prédéfinies.

• Ce nom variera suivant certaines caractéristiques des téléphones.

(20)

Les ressources (suite – 1)

4 types de dossier de ressources de base

layout : fichiers XML des activités (des écrans)

values : constantes diverses (chaînes, couleurs, styles, …)

drawable : fichiers image (png, jpg ou gif)

minmap : fichiers image pour les icônes du lanceur Autres types de dossier de ressources

• animator et anim : fichiers XML contenant les animations

• menu : fichiers XML contenant les menus

• raw : données quelconques

• xml : données quelconques au format xml

• font : polices de caractères

Organisation des dossiers de ressources suivant les téléphones : suffixage = ajout d’un qualificateur

• On peut préparer des ressources pour s’adapter automatiquement à différents téléphones.

• Pour ça, on va suffixer le nom du dossier de ressources avec un « qualificateur ».

• Par exemple : on peut ajouter au dossier « values » un dossier « values-fr » pour du texte en français. On peut ajouter au dossier « drawable » un dossier « drawable- land » pour des images en mode paysage.

• On peut suffixer plusieurs qualificateurs en même temps : drawable-land-hdpi.

(21)

Les ressources (suite – 2)

Il existe plusieurs types de qualificateur :

Qualificateur de langue : values-fr, values-es, values-fr-rCa pour du français canadien.

Qualificateur de sens de lecture : values-ldltr (de gauche à droite), values-ldrtl (de droite à gauche).

Qualificateur de taille d’écran : drawable-small (petit écran type montre), -normal (type téléphone), -large (type tablette), -xlarge (type téléviseur)

Qualificateur d’orientation : drawable-land (mode paysage), -port (mode portrait).

Qualificateur de densité : drawable-ldpi, -mdpi, -hdpi, -xhdpi, -xxhdpi, -xxxhdpi : densité croissante. Un téléphone moyen est hdpi.

• On peut suffixer plusieurs qualificateurs en même temps : drawable-land-hdpi.

Exemple : plusieurs langues : res/values/strings.xml

• Les textes par défaut sont dans res/values/strings.xml (anglais)

• Pour le français : res/values-fr/strings.xml. Etc pour les autres langues.

Dans le fichier strings.xml on écrit : o <string name= ”id” >value</string>

• Pour accéder à la valeur dans un layout : o <TextView android:text=”@string/id”/>

• Pour accéder à la valeur dans un fichier java (dans une activité) : o String s = getRessources().getString(R.string.id) ;

Exemple : ressources image : res/drawable

• Les images par défaut sont dans res/drawable

• Pour distinguer entre un affichage « portrait » et un affichage « paysage », on crée : drawable-land et drawable-port.

• Dans drawable-land et drawable-port :

o Mettre 1 image différente dans chaque dossier, mais de même nom, par exemple pour une image de fond : fond.png

• Pour accéder à la valeur dans un layout :

o <ImageView android:src=”@drawable/fond”/>

• L’image va changer selon l’orientation

(22)

Conclusion

• On a abordé les bases de la programmation android.

• C’est un framework : il faut apprendre à utiliser android studio.

Alternatives :

• Comme pour la programmation de site web, on peut créer des sites ou des

applications « from scratch » : à partir de rien, ou de framework de programmation.

• Ou utiliser des outils de réalisation quand on veut réaliser des petits sites ou petites applications :

o Wix, pour les sites : https://fr.wix.com o D’autres pour les applications :

o https://www.codeur.com/blog/creer-application-mobile-en-ligne/

Références

Documents relatifs

B et D sont les points optimaux respectivement pour la première et la deuxième fonction économique; F réalise simultanément le maximum pour les deux fonctions économiques mais n'est

Bien plus, nous sommes en mesure de déterminer tous les éléments maximaux de F(C).. Cela suggère la variante suivante pour traiter le cas général. Pour chaque famille de solutions

• Touche prgm à l’aide des flèches, choisir EXEC. • Sélectionner le programme D5 dans la liste puis taper sur entrer ou taper directement le numéro du programme. • Taper

Pour ne pas perdre de temps, vous pouvez copier-coller les commandes qui sont donn´ ees dans les ´ enonc´ es de TP dans votre script.. — la fenˆ etre Files/Plots/Packages/Help (en bas

Pour ne pas perdre de temps, vous pouvez copier-coller les commandes qui sont donn´ ees dans les ´ enonc´ es de TP dans votre script.. — la fenˆ etre Files/Plots/Packages/Help (en bas

i) tester les commandes d’´ edition de ligne de bash: faire afficher le calendrier de l’ann´ ee courante, puis utiliser l’historique (fl` eches haut et bas) et l’´ edition de

Des  logiciels  de  comparaison  explorent  les  bases  de  données  (séquences,  structures)  de  gènes  et  de  protéines  déjà  identifiés  et  annotés 

Il est question, dans ce compte-rendu de la journée technique « Prise en main des outils de petite mécanisation pour une gestion de l’enherbement sans herbicide », de :