Haddi Abderrahim Février 2019

1. Développement d’applications mobiles
Environnement de programmation Visuelle

2. Quelques Statistiques..
Nombre d’applications (en
juillet 2018, selon Statista)
2.1 millions au Google Play Store
2 millions à l’Apple App Store
669K au Windows Store
2
https://www.statista.com/topics/779/mobile-internet/

3. Quelques Statistiques..
3
https://mindsea.com/wp-content/uploads/2018/09/Screen-Shot-2018-09-13-at-1.18.18-PM.png
Domaines
d’usage
(selon Apple App Store)

4. Plan
Technologies de développement des applications mobiles
Environnement de Programmation visuelle
Mini-projet
4

5. Technologies de développement
des applications mobiles
Plateformes
iOS
Android
Windows Phone
5
5 .. 16

6. Technologies de développement
des applications mobiles
Langages
natif
web
hybride
6
5 .. 16

7. Technologies de développement
des applications mobiles
Langages Web
HTML, JavaScript, CSS
7
5 .. 16

8. Technologies de développement
des applications mobiles
Langages natifs
iOS: Xcode, ObjectiveC, Swift
Android: Java
Windows Phone: .Net, C#
8
5 .. 16

9. Technologies de développement
des applications mobiles
Langages hybrides
HTML, Javascript, CSS
+
Bridge : ponts d’accès entre le Webview et le
langage natif
9
5 .. 16

10. Technologies de développement
des applications mobiles
Natif
Bonne exploitation des
performances
Développement sur 3
plateformes (coût)
Hybride
Regroupe le natif et le
web
Native feeling faible
Problème de
performance
Web
Utilise le standard du
développement
Pas d’exploitation des
API
10
5 .. 16

11. Technologies de développement
des applications mobiles
Natif
Bonne exploitation des
performances
Développement sur 3
plateformes (coût)
Hybride
Regroupe le natif et le
web
Native feeling faible
Problème de
performance
Web
Utilise le standard du
développement
Pas d’exploitation des
API
11
5 .. 16

12. Technologies de développement
des applications mobiles
Natif
Bonne exploitation des
performances
Développement sur 3
plateformes (coût)
Hybride
Regroupe le natif et le
web
Native feeling faible
Problème de
performance
Web
Utilise le standard du
développement
Pas d’exploitation des
API
12
5 .. 16

13. Technologies de développement
des applications mobiles
13
« Le développement natif est le plus
performant, le mieux maintenu mais aussi
le plus cher »
https://blog.axopen.com/2017/10/application-mobile-2017-technologie/
5 .. 16

14. Technologies de développement
des applications mobiles
Le futur pour les Applications Web
Progressives (PWA)
- Accessibles depuis le Web sans passer par les
Stores
- Utilisable en mode déconnecté
- Une seule technologie pour l’intégrité des
plateformes
14
https://blog.axopen.com/2017/10/application-mobile-2017-technologie/
5 .. 16

15. Technologies de développement
des applications mobiles
15
GUI (Graphic User Interface)
UE (User Experience)
CPS (Cahier des Prescriptions Spéciales)
5 .. 16

16. Technologies de développement
des applications mobiles
16
1. Besoins & objectifs
2. Contenu
3. Structure : architecture d’information & design
d’interaction
4. Squelette : interface claire et lisible
5. Aspect visuel : interface attractive et désirable
Jesse James Garret dans son livre “The elements of user experience”, http://www.jjg.net/elements/pdf/elements.pdf
5 .. 16

17. Environnement
de Programmation visuelle
17
L’action de
l’utilisateur (ou
du système)
Déclenche un
événement
exécution d’un
code
Résultat
Attente d’une
autre action
Basé sur
la programmation
événementielle17 .. 30

18. Environnement
de Programmation visuelle
18
Nouveau Logo
17 .. 30

19. Environnement
de Programmation visuelle
19
In T E CHNO LOGI E 1 9 1 AV R I L 2 014, page 16
MIT AI 2
Un outil Drag & Drop du
type Puzzle
Identique à
MIT Scratch
17 .. 30

20. Environnement
de Programmation visuelle
20
Développé par :
MIT (Massachusetts Institute of Technology)
Center for Mobile Learning @ TheMedia Lab
Direction : Hal Abelson
In T E CHNO LOGI E 1 9 1 AV R I L 2 014, page 16
17 .. 30

21. Environnement
de Programmation visuelle
21
relation forte
des élèves à
leur
smartphone
création
d’applications
mobiles
formation
aux concepts
informatiques
Développement de App Inventor à la base du constat :
17 .. 30

22. Environnement
de Programmation visuelle
22
usage réfléchi
des TIC en
Enseignement
secondaire
Acquérir les
concepts
algorithmiques
Favoriser la
créativité
Vision de conception
de App Inventor 2
17 .. 30

23. Environnement
de Programmation visuelle
23
 APP INVENTOR 2, travail en ligne :
http://ai2.appinventor.mit.edu
Se connecter au terminal via : MIT AI2 Companion
 Possibilité de travailler en Local (lien de téléchargement) :
https://sourceforge.net/projects/ai2u/files/ai2u 4.0/Portable/
Se connecter au terminal via USB
Exige un compte Gmail
17 .. 30

24. Palette
(des composants)
Interface
de design
Composants
(liste
des composants
déposés)
Propriétés
(des composants
sélectionnés)
Environnement
de Programmation visuelle
24
Interface de Design
17 .. 30

25. Environnement
de Programmation visuelle
25
Interface de blocs
17 .. 30

26. Environnement
de Programmation visuelle
26
Architecture interne d’une application APP INVENTOR
http://www.appinventor.org/bookChapters/chapter14.pdf
17 .. 30
App
Composants
Visibles Invisibles
Comportements
Événements
Appel de
fonctions

27. Environnement
de Programmation visuelle
27
Interface de test : Emulateur ou Terminal réel (via wifi ou câble USB)
17 .. 30

28. Environnement
de Programmation visuelle
28
17 .. 30
Découverte pratique
Composants de l’application : Screen1 , Button1
Blocks :

29. Environnement
de Programmation visuelle
29
17 .. 30

30. Environnement
de Programmation visuelle
30
17 .. 30
Parmi les solutions :
Sur PC :
Télécharger et dézipper : https://github.com/Genymobile/scrcpy
Lancer scrcpy, accéder à http://ai2.appinventor.mit.edu
Sur SmartPhone :
Installez MIT AI Companion (Play Store)
Utilisez la 4G à partager avec votre PC (point d’accès mobile)
câble USB pour relier le Terminal au PC
permettre le débogage USB (Paramètres>Options de développement..)

31. Mini-projet
31
31 .. 38
Produire un APK, qui génère 10 questions
directes en boucle jusqu’à sortie de
l’application, avec la possibilité de vérifier la
réponse avant de poursuivre..

32. Mini-projet
32
31 .. 38
L’exemple traité concerne les règles de base en
algèbre de BOOLE,
genre : a + 1 = 1; 1 + 1 = 1 …

33. Mini-projet
33
31 .. 38
Nom
Go
Question :
Suivant
Screen 1 Screen 2
Réponse :
Vérifier
Correct / Incorrect
Composants visibles
Button1
Textbox1
Bonjour « Nom »
Label1
Button1
Button2
Label8
Textbox1
Label3

34. Mini-projet
34
31 .. 38
Composants invisibles
(dans les deux screens)
TinyDB1

35. Mini-projet
35
31 .. 38
Variables globales
Screen 1 Screen 2
Index_question : entier
Questions : liste
Reponses : liste

36. Mini-projet
36
31 .. 38
Blocks - Screen1
Titre application

37. Mini-projet
37
31 .. 38
Blocks - Screen2

38. 38
31 ..

39. 39
31 ..

40. 40
31 ..

41. 41
31 ..

42. 42
Bonne découverte

43. Ressources
 Site officiel : http://appinventor.mit.edu/
 Tutoriel : http://ai2.appinventor.mit.edu/reference/blocks/
 Revue TECHNOLOGI E n° 191 AVRIL 2014, http://eduscol.education.fr/sti/revue-technologie
 Articles :
https://connect.adfab.fr/mobile/hybride-vs-natif-vs-native
 Exemple application :
http://appinventor.mit.edu/explore/ai2/quizme.html
43