DÉVELOPPEMENT MOBILE

Pr. Anas EL ANSARI

[Link]@[Link]

2023/2024
 Plan
Chapitre 1. Introduction au développement mobile

Chapitre 2. Développement mobile Natif sous Android

Chapitre 3. Développement mobile Hybride / Cross-Platform

2
 Plan
Chapitre 1. Introduction au développement mobile

❑ Introduction

❑ Processus de développement mobile

❑ Les plateformes mobiles

❑ Méthodes de développement Mobile

❑ Outils de développement mobile

3
Introduction

➢ Développement mobile ?

• C’est le processus de création des applications mobiles.

• Une application mobile est un programme informatique conçue pour s'exécuter sur un
appareil mobile tel qu'un téléphone, une tablette, une montre, etc.

• Ces applications sont de divers types : Application de communication, divertissement,

commerce électronique, jeux, etc.

4
Processus de développement mobile

➢ Les étapes clés du développement mobile

Idée et
Objectifs Analyse Conception

Réalisation Test Déploiement

5
Processus de développement mobile

➢ Les étapes clés du développement mobile

Idée et
Objectifs

Dans cette étape on essaie de définir des objectifs stratégiques

pour transformer une idée en une application réussie.

6
Processus de développement mobile

➢ Les étapes clés du développement mobile

Analyse

Identification des besoins, analyse de faisabilité et

préparation de la feuille de route de l’application mobile.

7
Processus de développement mobile

➢ Les étapes clés du développement mobile

Conception

Conception intuitive et conviviale de l’application et

son interface utilisateur avec un design soigné.

8
Processus de développement mobile

➢ Les étapes clés du développement mobile

Réalisation

Développer l’application Frontend/Backend en utilisant des outils

adaptés aux besoins.

9
Processus de développement mobile

➢ Les étapes clés du développement mobile

Test

Validation soigneuse de la qualité de l’application avec une série

de test (Test de l’interface utilisateur, Performances, Sécurité…).

10
Processus de développement mobile

➢ Les étapes clés du développement mobile

Déploiement

Lancement de l'application sur les magasins d'applications (Play Store,

App Store, etc.) avec prise en charge des futures révisions.

11
Les plateformes mobiles

➢ Deux plates-formes dominantes :

• La plate-forme iOS d'Apple : C’est le système d'exploitation qui alimente la gamme populaire
de smartphones iPhone d'Apple.

• La plate-forme Android de Google : Le système d'exploitation Android est utilisé non

seulement par les appareils Google, mais également par d’autres constructeurs pour créer
leurs propres smartphones et autres appareils intelligents.

12
Les plateformes mobiles

➢ Android vs iOS :

• Famille du système d’exploitation :

o Android appartient à la famille OS de Linux.

o iOS appartient à OS X et UNIX.

• Code source :

o Android est une plate-forme open source.

o iOS n'est pas une plateforme open source.

13
Les plateformes mobiles

➢ Android vs iOS :

• Complexité du développement d'applications :

o Android est utilisé par une gamme de différents types d’appareils avec différents besoins
de construction et de développement.

o iOS est utilisé uniquement par les appareils Apple.

o Le développement d'applications iOS est moins complexe que celui des applications
Android.

14
Les plateformes mobiles

➢ Android vs iOS :

• Coût de développement de l'application :

o Les applications Android prennent plus de temps de développement mais peuvent être
créées à l'aide de l'application Android Studio qui peut être facilement installée sur
n'importe quel PC Windows standard.

o Les applications iOS peuvent être conçues en un temps plus court; cependant, les
développeurs doivent utiliser XCode, qui ne fonctionne que sur Mac, ce qui augmente le
coût de développement.

15
Les plateformes mobiles

➢ Android vs iOS :

• Langages de codage pris en charge :

o Les développeurs Android utilisent Java ou Kotlin.

o Les développeurs iOS utilisent Objective C ou Swift.

• Publication d'applications :

o Les applications Android peuvent être publiées plus rapidement et plus facilement sur
Play Store en payant juste des frais d'inscription uniques de 25 $.

o Les applications iOS nécessitent un long processus d'approbation pour être publiées sur
App Store. Les frais sont plus élevés, un abonnement annuel de 99 $ / an.
16
Méthodes de développement Mobile

➢ Les 04 alternatives :

• Il existe quatre principales approches de développement d'applications mobiles:

o Développement des Applications Natives.

o Développement des Applications Cross-Platform.

o Développement des Applications Hybrides.

o Développement des Applications Web Progressives.

17
Méthodes de développement Mobile

➢ Application Native :

• Développée spécialement pour un système d’exploitation (OS).

• Cela permet de bénéficier de toutes les fonctionnalités liées au système d’exploitation visé, telles
que : GPS, microphone, appareil photo, etc.

• Utilisent les outils de développement de leur système d’exploitation (Android Studio ou XCode).

• Si vous faites le choix du natif et que vous souhaitez que votre application soit disponible sur
Android et sur iOS, il sera donc nécessaire de développer l’application deux fois.

18
Méthodes de développement Mobile

➢ Application Hybride :

• Le code source permet de générer deux applications : pour Android et pour iOS.

• Elle s’appuie pour cela sur des technologies Web telles que le Javascript, HTML et CSS.

• Son contenu s’exécute dans un Conteneur natif, une WebView, pour pouvoir être utilisée
comme une app native.

19
Méthodes de développement Mobile

➢ Application Cross-Platform :

• Elle ressemblent beaucoup aux appli hybrides.

• Cependant, contrairement aux applications hybrides dont le code s’exécute dans une
WebView native, les applications cross-platform produisent un même code source qui produit
deux applications natives.

• Cela induit une meilleure performance et une expérience utilisateur plus proche du natif.

20
Méthodes de développement Mobile

➢ Application Web Progressives :

• Elle Il ne s’agit pas d’une technologie mobile mais d’une version mobile d’un site web.

• Ces applications sont accessible via un navigateur web.

• L’AWP n’est pas disponible sur les stores (App Store ou Play Store) et elle n’a pas besoin d’être
installée.

• L’inconvénient, c’est qu’elle nécessite une connexion internet pour fonctionner.

• Elle ne peut pas non plus utiliser toutes les fonctionnalités de bas niveau de l’appareil mobile.

21
 Méthodes de développement Mobile

Applications Natives Applications Cross-platform Applications Hybrides Applications Web Progressives

La même application est

Meilleures performances Base de code unique pour Base de code partagée entre les
disponible à la fois pour le Web
Avantages

d'exécution plusieurs plates-formes applications Web et mobiles

et le mobile

Utilisation des compétences en

Aucune installation requise,
Accès direct aux API de l'appareil Facile à créer et à maintenir développement Web pour créer
accessible via un navigateur
des applications mobiles

Coûts plus élevés lors de la Dépend des bibliothèques pour Performances inférieures par Prise en charge limitée des
Inconvénients

création et de la maintenance de les fonctionnalités natives de rapport aux applications fonctionnalités natives de
l’application l'appareil natives et Cross-Platform l'appareil

Prise en charge limitée des

Plusieurs bases de code pour Limitations de performances dues Les capacités de l'application
fonctionnalités natives de
chaque plate-forme au bridging dépendent du navigateur utilisé
l'appareil

22
Outils de développement Mobile

➢ Android studio :

• Android Studio est un environnement de développement des applications mobiles pour Android.

• Il est basé sur IntelliJ IDEA et utilise le moteur de production Gradle.

• Il peut être installé sous les systèmes d'exploitation Windows, MacOS, ChromeOS, et Linux.

• Les langages de programmation utilisés : Java ou Kotlin.

23
Outils de développement Mobile

➢ XCode :

• XCode est un environnement de développement pour Mac OS, ainsi que pour iOS, et watchOS.

• Il permet de programmer des applications avec les langages suivants : Objective C ou Swift.

• XCode n'est disponible que pour le système d’exploitation Mac OS.

24
Outils de développement Mobile

➢ Flutter :

• Flutter est un Framework conçu par Google dont la première version date de 2015. Cette
solution s’appuie sur le Langage Dart.

• Permet de créer une application Cross-platform (pour iOS ou Android) à partir d’un même code.

• À l’inverse de ses concurrents tel que React native, Flutter va donc générer un code natif pour
chaque plateforme, ce qui permet d’optimiser son fonctionnement selon chaque OS.

• Flutter permet de développer rapidement grâce à une forte gamme de widgets personnalisables.

25
Outils de développement Mobile

➢ React Native :

• React Native, développé par Facebook, est un framework open-source basé sur le JavaScript.

• C’est un framework de développement hybride avec un code unique qui permet aussi bien un
développement sur iOS que sur Android.

26
Outils de développement Mobile

➢ Ionic :

• Développé en 2013, Ionic est un framework open-source qui utilise des technos web comme
HTML, CSS et Javascript pour développer des applications mobiles hybrides.

• La caractéristique principale de Ionic réside dans ses composants par défaut de l’interface
utilisateur comme les formulaires, les filtres, ou le menu de navigation.

27
Outils de développement Mobile

➢ Xamarin :

• Créé en 2011, Xamarin est une technologie permettant aux développeurs d’applications
mobiles, d’avoir une approche native et multiplateforme.

• Xamarin offre un contexte de développement unique pour partager les composants entre les
différentes plateforme mobile : IOS ([Link]) et Android ([Link]).

• La programmation est en langage C# avec l’infrastructure de programmation .NET

28
Outils de développement Mobile

➢ App Inventor :

• App Inventor est une application développée par Google.

• Elle est actuellement entretenue par le Massachusetts Institute of Technology (MIT).

• C’est un outil de développement en ligne gratuit pour les téléphones et les tablettes sous Android.

• La plateforme de développement est offerte à tous les utilisateurs possédant un compte Gmail.

• Elle simplifie le développement des applications mobiles et le rend accessible même pour les
novices et ceux qui ne sont pas familiers avec les langages de programmation.

29
 Plan
Chapitre 2. Développement mobile Natif sous Android

❑ La plateforme Android

❑ Développement Natif avec App Inventor

❑ Développement Natif avec Android Studio

31
La plateforme Android

➢ Android :

• Android est un système d’exploitation OPEN SOURCE pour terminaux mobiles

(smartphones, Tablette, …)

• C’est aujourd’hui le système d’exploitation mobile le plus utilisé à travers le monde.

• Conçu à la base par une startup (Android) rachetée par Google en 2005.

• Pour la promotion de ce système Google a fédéré autour de lui un groupe de partenaires

réunis au sein de l’Open Handset Alliance (OHA).

32
La plateforme Android

➢ OHA :

• Regroupement de plus de 50 entreprises

(fabricants de matériel, opérateurs mobiles,
développeurs d’applications,…).

• L'OHA a été créée en 2007, sous la direction

de Google.

• Objectif : développer des normes pour des

application de téléphonie mobile.

33
La plateforme Android

➢ T-Mobile G1 :

• Le 1er téléphone mobile sous Android : T-Mobile G1 (aka HTC Dream).

• C’est un smartphone développé par HTC.

• Sorti pour la première fois en septembre 2008.

34
La plateforme Android

➢ Dispositifs utilisant Android :

• Smartphone

• Tablette

• Netbook

• Télévision et Frigo

• Tableau de bord (Voiture)

• Google Glass

• Smartwatch

• Etc.
35
La plateforme Android

➢ Les versions d’Android :

• On développant des applications pour Android, il faut

tenir compte des différences entre les versions
d’Android pour éviter les problèmes de compatibilité.

• Comparaison des versions Android :

[Link]

36
La plateforme Android
U t ilisate u r U se r
➢ Architecture d’Android :

M até rie l H a rd wa re
37
La plateforme Android

➢ Architecture d’Android :

• Le système d’exploitation Android est basé sur Linux.

• Dans la 1ère couche, le noyau Linux est destiné à la gestion du matériel :

▪ La gestion des processeurs, de mémoire, d’alimentation, etc.

▪ Les pilotes des composants matériels (Caméra, Ecran, Bluetooth, etc.),

38
La plateforme Android

➢ Architecture d’Android :

• La 2ème couche comporte :

▪ Des bibliothèques (Libraries) : nécessaires pour utiliser les formats multimédia (images, audio
et vidéo), les dessins 2D/3D, les base de données (SQLite), les services Web (Webkit), etc.

▪ L’environnement d’exécution : pour compiler et exécuter le code des applications, il comporte

des bibliothèque java pour Android, et une machine virtuelle appelée Dalvik pour exécuter les
applications.

39
La plateforme Android

➢ Architecture d’Android :

• La 3ème couche fournit des API permettant aux développeurs de créer des applications riches
sans avoir besoin de tout programmer à zéro. Elle comporte des composants pour gérer :

▪ Les fenêtres des applications et les activités (pages d’une application).

▪ L’accès au données (fichiers, images, vidéo, …)

▪ L’accès aux ressources et capteurs (GPS, accéléromètre, ...).

▪ Les notifications.

▪ Etc.

40
La plateforme Android

➢ Architecture d’Android :

• Dans la 4èmre couche, on trouve l’ensemble des applications installées dans le dispositif.

• Ces applications peuvent être :

▪ Des applications native installées par défaut avec le système Android (Play Store,
calculatrice, etc).

▪ Des applications tierces (Third party), installées par l’utilisateur.

41
Développement Natif avec App Inventor

42
Développement Natif avec App Inventor

➢ App Inventor :

• C’est un outil de programmation visuelle et de développement d’applications pour Android.

• Développé en langage Java, par Google et MIT.

• L’outil offre des composants graphique pour créer l’interface de l’application dans la page
« Designer ».

• Pour la programmation, App Inventor est basé sur un langage de programmation visuelle appelé
« Blockly » disponible dans la page « Blocks ».

43
Développement Natif avec App Inventor

➢ App Inventor : Avantages

• Conçu à des fins pédagogiques, donc facile à utiliser (Prise en main rapide).

• Bien documenté avec la possibilité d’échanger entre développeurs.

• Fonctionne en mode en ligne (Cloud) ou hors ligne.

• Ne demande pas de ressources matérielles importantes (Cas d’Android Studio).

• Permet de tester rapidement (en temps réel) l’application sur les appareils Android.

• Un outil de plus en plus utilisé et continue à évoluer grâce aux extensions.

44
Développement Natif avec App Inventor

➢ App Inventor : Limites

• Limites concernant l’interface utilisateur (police du texte, positionnement des objets, etc.).

• Limites concernant certaines fonctionnalités du système.

• Quelques problèmes de compatibilité selon les versions d’Android.

• N’offre pas le choix des versions d’Android à cibler.

45
 Développement Natif avec App Inventor

➢ App Inventor : Eléments de base.

Designer : Interface Blocks : Comportement

Composants visibles Composants invisibles Evénements Actions

Boutons, champs de texte, Accéléromètre, SMS, Evénements préprogrammés Des opérations associées à
images, … géolocalisation, … auxquels on peut associer un événement ( changer un
des actions (quand on clique texte, envoyer un SMS, jouer
Chaque composant possède des propriétés qu’on peut sur un bouton, SMS reçu, …) un son, …)
manipuler en mode Designer / Blocks
46
Développement Natif avec App Inventor

➢ App Inventor : Utilisation

• Mode Hors ligne :

Télécharger et installer le logiciel (Lien : [Link]

• Mode En ligne (Cloud) :

▪ Consulter le lien : [Link]

▪ Se connecter avec un compte GMAIL.

47
Développement Natif avec App Inventor

➢ App Inventor : Test d’application

• Dans votre smartphone, Installer l’application : MIT AI2 Companion (Disponible en Play Store)

• Dans App Inventor, accéder au menu : Connect / AI Companion.

• Dans votre smartphone, lancer l’application « MIT AI2 Companion » et scanner le code QR.

48
Développement Natif avec App Inventor

➢ Exercice 1 : Hello World !

• Tâche N°1: Créer une application qui affiche le texte « Hello World! » au centre de la page.

• Tâche N°2: Changer la couleur du texte et celle de la page aussi.

• Tâche N°3: Utiliser une image comme arrière plan.

49
Développement Natif avec App Inventor

➢ Exercice 2 : Text 2 Speech

• Tâche N°1: Créer l’interface de l’application suivante.

• Tâche N°2: Programmer le bouton « Read it » pour lire le texte entré.

• Tâche N°3: Optimiser le design de l’application.

50
Développement Natif avec App Inventor

➢ Exercice 3 : Text Translator

• Tâche : à partir de l’application précédente, créer une version qui permet

de traduire et lire le texte entré en Français.

• Installer cette application dans votre smartphone.

51
Développement Natif avec App Inventor

➢ L’environnement App Inventor :

• La barre des menus :

52
Développement Natif avec App Inventor

➢ L’environnement App Inventor :

• La barre des menus :

▪ Menu « Projects » : gère l'ensemble de vos projets existants ou à créer.

▪ Menu « Connect » : pour visualiser le résultat du projet sur smartphone/tablette.
▪ Menu « Build » : pour télécharger l’application (.apk ou .aab) une fois terminée.
▪ Menu « Settings » : pour modifier les paramètres de l’environnement App Inventor.
▪ Menu « Help » : comme son nom l'indique il est là pour vous aider.

53
Développement Natif avec App Inventor

➢ L’environnement App Inventor :

• La barre des menus :

▪ My Projects : pour consulter vos projets.

▪ View Trash : pour consulter le répertoire des projets supprimés.
▪ Guide : pour consulter le guide en ligne.
▪ Report an Issue : permet de poster des questions/problèmes dans le forum de la communauté.
▪ Langue (English) : pour changer la langue de l’environnement App Inventor
▪ Email ([Link]@[Link]) : pour se déconnecter ou supprimer le compte.

54
Développement Natif avec App Inventor

➢ L’environnement App Inventor :

• La barre de titre du projet :

55
Développement Natif avec App Inventor

➢ L’environnement App Inventor :

• La barre de titre du projet :

▪ Projet1 : représente le titre du projet (de l’application).

▪ Menu « Screen1 » : affiche la liste des écrans (pages) de l’application.
▪ Add Screen : pour ajouter un écran (une nouvelle page).
▪ Remove Screen : pour supprimer un écran (la suppression de « Screen1 » n’est pas possible).
▪ Publish to Gallery : pour publier l’application dans la galerie du site de MIT App Inventor.
▪ Designer : pour accéder à la page du design et conception de l’interface de l’application.
▪ Blocks : pour programmer le comportement des composants de l’application.

56
Développement Natif avec App Inventor

➢ L’environnement App Inventor :

• La page « Designer » : 5 sections.

1 2 3 4

5
57
Développement Natif avec App Inventor

➢ L’environnement App Inventor :

• La page « Designer » : 5 sections.

1. Palette : une liste (par catégories) des composants qu’on peut ajouter à l’application.
2. Viewer : un aperçu de l’interface de l’application.
3. Components : la liste des composants qu’on a ajouté à l’application.
4. Properties : la liste des propriétés du composant sélectionné.
5. Media : la liste des fichiers (image, audio, vidéo, etc.) ajoutés à l’application.

58
Développement Natif avec App Inventor

➢ L’environnement App Inventor :

• La page « Blocks » : 3 sections.

1 2

3
59
Développement Natif avec App Inventor

➢ L’environnement App Inventor :

• La page « Blocks » : 3 sections.

1. Blocks : une liste (par catégories) des blocks de code qu’on peut utiliser pour la programmation.
2. Viewer : un espace de construction des blocks de code.
3. Media : la liste des fichiers (image, audio, vidéo, etc.) ajoutés à l’application.

60
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants de l’interface utilisateur :

▪ Bouton cliquable : utilisable pour lancer une action.
▪ Case à cocher : permet de répondre à un choix donné en cochant une case.
▪ Sélectionneur de date : permet de spécifier une date
▪ Image : permet d’inclure une image en définissant sa largeur et hauteur.
▪ Label : permet d’afficher un texte.
▪ Sélectionneur de liste : crée une liste d’options.
▪ Vue liste : pour afficher les éléments d’une liste.
▪ Notificateur, permet d’afficher des notifications / messages d’alerte.

61
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants de l’interface utilisateur :

▪ Zone texte mot de passe : pour la saisie masquée des mots de passe.
▪ Ascenseur (Slider) : pour régler la valeur en faisant glisser son doigt.
▪ Curseur animé (Spinner) : affiche une pop-up avec une liste d’éléments.
▪ Switch : déclenche un événement lorsque l'utilisateur clique dessus.
▪ Zone de texte, permet à l’utilisateur de saisir du texte.
▪ TimePicker : permet à l'utilisateur de sélectionner une heure.
▪ WebViewer : composant de visualisation de pages Web.

62
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants de disposition (Layout) :

▪ Utilisés pour placer des éléments dans une zone prédéfinie.

▪ Les élément à l’intérieur s’aligneront : horizontalement, verticalement, ou

dans les cellules d’un tableau.

63
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants Media :
▪ Camcorder/Camera : utiliser la caméra de l’appareil.
▪ ImagePicker : pour sélectionner une image de la galerie du téléphone.
▪ Player/Sound : permet de jouer un fichier audio.
▪ SoundRecorder : permet d’enregistrer le son via le microphone.
▪ SpeechRecognizer : permet de convertir la voix de l’utilisateur en texte.
▪ TextToSpeech : permet de transformer un texte en voix.
▪ Translator : traduire des mots et des phrases entre différentes langues.
▪ VideoPlayer : pour l’affichage et la lécture des vidéos.

64
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants de dessin et animation :

▪ Ball : permet de placer une balle dans le canevas.

▪ Canvas : défini une zone pour placer des balles et des images déplaçables.

▪ ImageSprite : permet de placer un élément se comportant comme la balle mais dont

on peut choisir l’apparence en remplacent l’image.

65
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants Maps :

▪ Map : un conteneur avec une carte en arrière-plan.

▪ Marker : pour placer un marqueur de position dans la carte.

▪ Navigation : pour naviguer entre deux points.

▪ FeatureCollection : permet d’importer une collection de caractéristiques (Fichier JSON).

▪ Circle/Rectangle/Polygon/LineString : pour tracer sur la carte des formes géométriques.

66
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants Charts :

▪ Chart : composant graphique pour tracer les données provenant de ses composants attachés.

▪ ChartData2D : représente une série de données bidimensionnelle dans le composant Chart.

67
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants Sensors (Capteurs) :

▪ AccelerometerSensor : détecter les secousses et mesurer l'accélération.
▪ BarcodeScanner : pour lire un code-barres.
▪ Barometer : mesurer la pression de l'air ambiant.
▪ Clock : fournir le temps à l’instant à partir de l'horloge interne du téléphone
▪ GyroscopeSensor : mesurer la vitesse angulaire en degrés/seconde.
▪ Hygrometer : peut mesurer l'humidité relative de l'air ambiant.
▪ LightSensor : mesurer le niveau de luminosité.

68
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants Sensors (Capteurs) :

▪ LocationSensor : fournir des informations de localisation.
▪ ManeticFieldSensor : mesurer le champ géomagnétique ambiant.
▪ NearField : fournir des capacités NFC (Near Field Communication).
▪ OrientationSensor : capturer l'orientation physique de l'appareil.
▪ Pedometer : détecter le mouvement via l'accéléromètre et compter les pas.
▪ ProximitySensor : mesurer la proximité d'un objet par rapport à l'écran.
▪ Thermometer : mesurer la température ambiante (externe).

69
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants Social :
▪ ContactPicker/PhoneNumberPicker : choisir un contact dans la liste.
▪ EmailPicker : champ texte avec ‘autocomplete’ pour sélectionner un email.
▪ PhoneCall : passer un appel téléphonique au numéro spécifié.
▪ Sharing : partager des fichiers avec les autres applications installées.
▪ Texting : envoyer/recevoir des messages.
▪ Twitter : se connecter à un compte twitter.

70
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants Storage (Stockage des données) :

▪ CloudDB : stocker des données sur un serveur de base de données connecté.
▪ DataFile : lire des fichiers de données (CSV ou JSON).
▪ File : écrire ou lire des fichiers sur l’appareil.
▪ Spreadsheet : stocker et recevoir des données à partir d’une feuille de calcul (Google Sheets).
▪ TinyDB : créer un magasin de données persistant pour l'application.
▪ TinyWebDB : communiquer avec un service Web pour stocker et récupérer des informations.

71
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants Connectivity :
▪ ActivityStarter : lancer une page d’une autre application Android.
▪ BluetoothClient/Server : connexion bluetooth avec un autre appareil.
▪ Serial : pour se connecter à des appareils comme Arduino.
▪ Web : fournir des fonctions pour les requêtes HTTP GET, POST, PUT et DELETE.

72
Développement Natif avec App Inventor

➢ La palette des composants :

• Composants LEGO MINDSTORMS :

▪ Cette catégorie fournit des composants pour la programmation des robots

LEGO MINDSTORMS NXT.

73
Développement Natif avec App Inventor

➢ La palette des composants :

• Autres composants :

▪ Dans la catégorie « Experimental », on a un composant qui communique avec Firebase pour

stocker et récupérer des informations.

▪ Dans la catégorie « Extension », on peut ajouter des extensions pour plus de fonctionnalités :
o Chiffrement des données,
o Publicité (Admob),
o Intelligence artificielle,
o Etc.

74
Développement Natif avec App Inventor

➢ Les blocs de programmation :

• Les blocs sont réparties en trois rubriques :

▪ Built-in : regroupe les blocs incorporés divisés en 9 catégories.
▪ Screen1 : comporte des blocs spécifique pour chaque composant de l’écran.
▪ Any component : des blocs pour n'importe quel composant d’un type donné.

76
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Contrôle :

77
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Contrôle : pour exécuter des actions selon une (des) condition(s).

78
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Contrôle : pour exécuter des actions plusieurs fois (répétition).

79
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Contrôle : pour contrôler les écrans ou fermer l’application.

80
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Contrôle : autres blocs de contrôle.

81
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Logique : pour exprimer des conditions (expressions logiques).

82
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Math :

83
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Math : pour faire des opérations arithmétiques.

84
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Math : pour utiliser des fonctions mathématiques.

85
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Math : pour la comparaison ou la conversion des données numériques.

86
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Math : pour donner une valeur numérique exacte ou aléatoire (random).

87
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Text :

88
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Text : pour vérifier ou comparer des textes.

89
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Text : pour modifier ou remplacer des textes.

90
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Text : pour rechercher, séparer, ou concaténer des textes.

91
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Lists :

92
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Lists : pour créer et vérifier des listes.

93
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Lists : pour chercher et récupérer des éléments dans une liste.

94
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Lists : pour ajouter, modifier, ou supprimer des éléments dans une liste.

95
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Lists : pour copier, ou transformer des listes.

96
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Dictionaries :

97
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Dictionaries : les dictionnaires sont des structures de données comportant une liste de clé-valeur.

• Exemple :
{
"id": 123,
"name": “Mohamed Ali",
"school": "EST Nador",
“subscribed": true,
"skills": ["Web Dev", "Mobile Dev"]
}

98
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Dictionaries : pour créer des dictionnaires.

99
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Dictionaries : pour modifier ou lire des valeurs dans un dictionnaire.

100
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Dictionaries : pour copier ou transformer des dictionnaires.

101
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Dictionaries : pour parcourir ou chercher des données dans un dictionnaire.

102
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Colors :

103
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Variables :

104
Développement Natif avec App Inventor

➢ Les blocs de programmation: Built-in blocks

• Procedures :

105
Développement Natif avec App Inventor

➢ Les blocs de programmation: Screen/Component blocks

• Screen blocks :

106
Développement Natif avec App Inventor

➢ Les blocs de programmation: Screen/Component blocks

• Screen blocks : pour gérer les évènements possibles.

107
Développement Natif avec App Inventor

➢ Les blocs de programmation: Screen/Component blocks

• Screen blocks : pour modifier (setters) ou lire (getters) la valeur d’une propriété de l’écran.

108
Développement Natif avec App Inventor

➢ Les blocs de programmation: Screen/Component blocks

• Screen blocks : autres appels et demandes de permissions.

109
Développement Natif avec App Inventor

➢ Les blocs de programmation: Screen/Component blocks

• Component blocks : pour gérer les événements, les appels, et les propriétés du composant.

110
Développement Natif avec App Inventor

➢ Les blocs de programmation: Any Component blocks

111
Développement Natif avec App Inventor

➢ Exercice 4 : Calculatrice simple

• Tâche N°1: Créer une app permettant de calculer la somme de 2 nombres entrés par l’utilisateur.

• Tâche N°2: Ajouter à l’application la possibilité de calculer (selon le choix de l’utilisateur) :

l’addition (+), la soustraction (-), la multiplication (x), et la division (/).

• Tâche N°3: Optimiser le design de l’application.

113
Développement Natif avec App Inventor

➢ Exercice 5 : Login Page

• Tâche N°1: Créer une application permettant connecter l’utilisateur. Il doit entrer le login et le
mot de passe. Si le login et le mdp sont correctes, l’application affichera « Connexion réussie » en
vert. Sinon, on affiche le message « Login ou mot de passe erroné! » en rouge. Exemple : Login
(root) et Mot de passe (toor).

• Tâche N°2: Ajouter un deuxième écran (page) qui affiche le message « Bienvenu Login! » si la
connexion est réussie. Et améliorer le design de l’application.

114
Développement Natif avec App Inventor

➢ Exercice 6 : Mélangeur de couleurs

• Tâche N°1: Créer une application permettant de mélanger des valeurs des couleurs principales
(RGB) pour obtenir des nouvelles couleurs.

▪ Utiliser 3 composants « Slider » pour spécifier les valeurs RGB et un composant « Label » pour
afficher le code de la couleur.

▪ La couleur choisi est utilisée comme couleur d’arrière plan de l’écran.

115
Développement Natif avec App Inventor

➢ Exercice 7 : Login/Signup Page

• Modifier l’application de l’exercice N°5 en ajoutant une 3ème page « Signup ». Dans cette page
l’utilisateur peut entrer le nom, la date de naissance, l’email et le mot de passe (2 fois).

• L’application doit stocker les informations de l’utilisateur dans un fichier

• Pour la connexion, on remplace les valeurs de Login (root) et Mot de passe (toor) par l’email et le
mot de passe de l’utilisateur.

• La page de bienvenu affichera les informations de l’utilisateur.

116
Développement Natif avec App Inventor

➢ Exercice 8 : Simple Browser

• Tâche N°1: Créer une application permettant de simuler le comportement de base d’un navigateur

▪ Utiliser 3 composants :

▪ TextBox : pour entrer l’adresse du site web (URL).

▪ Button : pour lancer le chargement de la page web demandée.

▪ WebViewer : pour charger et afficher le contenu des pages web.

• Tâche N°2: Le contenu du Textbox doit changer en fonction de l’adresse (URL) de la page affichée.

• Tâche N°3: Modifier l’application pour afficher des pages html locales.

117
Développement Natif avec App Inventor

➢ Exercice 9 : Fake Voices

• Tache N°1 : Créer une application de voix étranges!

• Composants :

2 Buttons, 1TextBox, 2 Sliders, SpeechRecognizer, Text-To-Speech.

• Tâche N°2: Ajouter le choix de la langue et du pays.

118
Développement Natif avec App Inventor

➢ Exercice 10 : Chat App

• Tache N°1 : Utiliser l’application de l’exercice N°7 comme base pour

créer une application de chat en utilisant les composants suivants :

▪ Pour envoyer des messages : TextBox et Button.

▪ Pour stocker les messages : CloudDB.

▪ Pour afficher la liste des messages : ListView.

119
Développement Natif avec App Inventor

➢ Exercice 11 : Base converter

• Tâche N°1: Créer une application permettant de convertir un nombre décimal en un nombre
binaire ou hexadécimal.

120
Développement Natif avec App Inventor

➢ Exercice 12 : White Bord App

• Tache N°1 : Créer une app de dessin en utilisant les composants suivants.

▪ Buttons : Clear, Save, et 7 couleurs.

▪ Slider : Pour spécifier l’épaisseur de la ligne.

▪ Canvas : Zone de dessin.

• Tache N°2 : Modifier l’application en ajoutant la possibilité de prendre

une photo avec le composant Camera et dessiner dessus.

121
Développement Natif avec App Inventor

➢ Exercice 13 : Object Recognition App

• Tache N°1 : Créer une app de détection des objets utilisant les composants.

▪ LookExtension : [Link]

▪ Bouton : Classify.

▪ Labels : Result + ObjectName.

▪ WebViewer : pour exécuter LookExtension.

122
Développement Natif avec Android Studio

➢ Android Studio :

• Android Studio est l’environnement de développement intégré (IDE) officiel pour développer
des applications Android.

• Décembre 2014, Google lance la 1ère version stable d’Android Studio (Avant : Eclipse + ADT).

• Il est basé sur l’IDE de Java IntelliJ IDEA, qui est développé par JetBrains.

• Il intègre le moteur Gradle, qui automatise les tâches et permet un développement simplifié.

• Android studio nécessite aussi d’autres outils : JDK, Android SDK, Emulateurs, etc.

124
Développement Natif avec Android Studio

➢ Outils nécessaires :

• Java Development Kit (JDK) : [Link]

• Android Studio : [Link]

• Android SDK (Software Development Kit) : inclus dans Android Studio (SDK Manager).

• Emulateurs (pour tester l’application) : inclus dans Android Studio (AVD, ADB)

125
Développement Natif avec Android Studio

➢ SDK Manager :

• Les applications Android seront développées en Java, mais un appareil sous Android ne
comprend pas Java tel qu’il est, il comprend une variante de Java adaptée pour Android.

• Un kit de développement appelé Android SDK, est un SDK spécifique incluant les outils
nécessaires permettant de développer des applications sous android.

• Il inclut un débogueur, des bibliothèques logicielles, un émulateur, de la documentation, etc.

SDK Manager

126
Développement Natif avec Android Studio

➢ SDK Manager :

127
Développement Natif avec Android Studio

➢ SDK Manager : API

• Une API (Application Programming Interface) est un ensemble de bibliothèques de classes

pour programmer des applications. Sa version donne un indice de ses possibilités.

• La version d’Android (…, 12, 13) est le numéro pour le grand public, et les versions d’API (…, 32,
33, 34, …) sont pour les développeurs.

• Chaque API apporte des fonctionnalités supplémentaires. Il y a une compatibilité ascendante.

• On souhaite programmer avec la dernière API (fonctions plus complètes et modernes), mais
les utilisateurs ont souvent des smartphones plus anciens, qui n’ont pas cette API.

• On doit donc choisir une API qui correspond à la majorité des smartphones.

128
Développement Natif avec Android Studio
Device Manager

➢ Device Manager :

• C’est le composant qui gère les émulateurs utilisés pour tester les applications.

• Il utilise deux composants : AVD (Android Virtual Device) et ADB (Android Debug Bridge)

▪ AVD : créer et gérer des émulateurs virtuels intégrés dans Android Studio.

▪ ADB : communiquer avec des dispositifs externes réels (tel, etc.) ou virtuels (Nox Player, etc.).

129
Développement Natif avec Android Studio

➢ Gradle :

• Gradle est un outil de construction de projets comme Make (C++) et Ant (Java).

• Gradle se sert de fichiers nommés [Link] pour construire le projet.

• Android Studio fait une distinction entre le projet global et l’application :

▪ un script [Link] dans le dossier racine du projet indiquant les dépendances générales

▪ un script [Link] dans le dossier app pour compiler l’application.

130
Développement Natif avec Android Studio

➢ Structure d’un projet dans Android Studio :

• Un projet Android Studio est constitué ainsi :

▪ Manifests : comporte essentiellement [Link] qui décrit

la configuration de l'application (titre, logo, ...) et ses classes.

▪ Java : regroupe les sources Java de l’application organisées dans des

packages (classes, interfaces, activités, …).

▪ Res : contient toutes les ressources que l'on utilise dans l’application
(vues, images, couleurs, textes, etc.)

131
Développement Natif avec Android Studio

➢ Exercice 1 : Hello World!

• Tache N°1 : Créez une application qui affiche « Hello WM! » et testez-la sous différents émulateurs.

• Tache N°2 : Modifiez les propriétés du texte affiché et vérifiez si les changements s’appliquent en
temps réel.

132
Développement Natif avec Android Studio

➢ Exercice 1 : Hello World!

• Tache N°3 : Ajouter un TextView (0) et un Button (+) comme suit.

• Tache N°4 : Programmer l’application pour incrémenter la valeur à chaque

clique sur le Button.

133
Développement Natif avec Android Studio

➢ Exercice 1 :

134
Développement Natif avec Android Studio

➢ Exercice 2 : Login

• Tache N°1 : Créer une application Comportant une page (activity) « Login ».

• Tâche N°2 : Programmer l’application pour afficher le message :

• « Connexion réussie » si UserName=admin et Password=admin.

• « Connexion échouée » si UserName/ Password incorrecte.

135
Développement Natif avec Android Studio

➢ Exercice 2 : Login

136