Panorama des solutions de

développement mobile
Stéphane Huet
1er février 2021
Qu’est-ce qu’un smartphone ?

• Un baladeur numérique
• Un téléphone
• Un navigateur Internet
• Une boussole
• Une télé
• Un dictaphone
• Un ordinateur...

Panorama des solutions de développement mobile S. Huet 2/40

Qu’est-ce qu’un smartphone ?

• Un baladeur numérique
• Un téléphone
• Un navigateur Internet
• Une boussole
• Une télé
• Un dictaphone
• Un ordinateur...

Panorama des solutions de développement mobile S. Huet 2/40

Une myriade de technologies

Panorama des solutions de développement mobile S. Huet 3/40

API 28 d’Android : la classe Activity (1/15)
1 public class Activity
2 extends ContextThemeWrapper implements LayoutInflater.Factory2,
Window.Callback, KeyEvent.Callback, View.OnCreateContextMenuListener,
ComponentCallbacks2

Public methods
void addContentView(View view, ViewGroup.LayoutParams params)
Add an additional content view to the activity.
void closeContextMenu()
Programmatically closes the most recently opened context menu, if showing.
void closeOptionsMenu()
Progammatically closes the options menu.
PendingIntent createPendingResult(int requestCode, Intent data, int flags)
Create a new PendingIntent object which you can hand to others for them to use to send result data back to your onActivi-
tyResult(int, int, Intent) callback.
final void dismissDialog(int id)
This method was deprecated in API level 13. Use the new DialogFragment class with FragmentManager instead ; this is also
available on older platforms through the Android compatibility package.
final void dismissKeyboardShortcutsHelper()
Dismiss the Keyboard Shortcuts screen.
boolean dispatchGenericMotionEvent(MotionEvent ev)
Called to process generic motion events.
boolean dispatchKeyEvent(KeyEvent event)
Called to process key events.
boolean dispatchKeyShortcutEvent(KeyEvent event)
Called to process a key shortcut event.
boolean dispatchPopulateAccessibilityEvent(AccessibilityEvent event)
Called to process population of AccessibilityEvents.
boolean dispatchTouchEvent(MotionEvent ev)
Called to process touch screen events.
boolean dispatchTrackballEvent(MotionEvent ev)
Called to process trackball events.
Panorama des solutions de développement mobile S. Huet 4/40
Plan du cours

1 Panorama des solutions de développement d’applications

mobiles
2 Fondements de la programmation sous Android
3 Android Jetpack
4 Interrogation de services web
5 Compléments sur Android

Panorama des solutions de développement mobile S. Huet 5/40

Volume horaire de l’UE

CM TD TP
9h 24 h
Enseignants :
• Stéphane HUET (CM et TP)
• Nejat ARINIK (TP)
• Teva MERLIN (TP)

Panorama des solutions de développement mobile S. Huet 6/40

Évaluation de l’UE

Épreuves Coefficients
Examen écrit (1h) 40 %
Épreuves pratiques
– Rendus de TP (4 séances) 20 %
– Projet (4 séances) 40 %

Dépôt du code (répertoires src et res) sur https://gitlab.com

Panorama des solutions de développement mobile S. Huet 7/40

Plan

1 Défis et contraintes des projets mobiles

2 Applications natives

3 Applications web

4 Applications hybrides

5 Applications multiplateformes (quasi-)natives

Panorama des solutions de développement mobile S. Huet 8/40

Les défis du design pour cellulaires

• Petite taille d’écran

• Tailles d’écran variables
• Écrans tactiles
• Difficulté pour saisir du texte
• Environnements physiques difficiles : luminosité, mouvement...
• Interactions sociales et attention limitée
• Look and feel (Aspect et comportement) variable suivant les
OS et leur version

Panorama des solutions de développement mobile S. Huet 9/40

Critères à prendre en compte

• Quels sont les besoins en performance pour l’application ?

• Qui utilisera l’application, sur quels types d’appareils ?
• De quelles fonctionnalités a-t-on besoin ?
• Quel est le budget pour le développement ?
• Quelles sont les compétences en interne des développeurs ?

Panorama des solutions de développement mobile S. Huet 10/40

Applications natives

Arrêt du développement de
Plus que 2 dominants
• Symbian (Nokia) en 2014
• Bada (Samsung) en 2014
• BlackBerry 10 en 2015 (support
jusqu’en décembre 2019)
• Windows 10 Mobile (Microsoft) en
2017 (support jusqu’en janvier 2020)

Panorama des solutions de développement mobile S. Huet 11/40

Applications web

http://www.bestpsdtohtml.com/wp-content/uploads/2013/03/new-flexibility.png

Sites web adaptatifs (suivant le design du responsive web) avec

une interactivité similaire à celle d’une application mobile

Panorama des solutions de développement mobile S. Huet 12/40

Applications hybrides

https://11m5ki43y82budjol1gjvv5s-wpengine.netdna-ssl.com/wp-content/uploads/2015/05/hybrid-app.jpg

Applications web encapsulées dans une application mobile native

Panorama des solutions de développement mobile S. Huet 13/40

Applications multiplateformes (quasi-)natives

http://ventureaviator.com/wp-content/uploads/2017/12/Cross-platform-development.jpg

Applications pouvant être utilisées sur plusieurs OS

• Utilisant des technologies web comme les applications
hybrides
• Mettant à disposition du développeur des bibliothèques
natives et des composants graphiques natifs

Panorama des solutions de développement mobile S. Huet 14/40

Plan

1 Défis et contraintes des projets mobiles

2 Applications natives

3 Applications web

4 Applications hybrides

5 Applications multiplateformes (quasi-)natives

Panorama des solutions de développement mobile S. Huet 15/40

Caractéristiques des applications natives

• Construites pour une plateforme spécifique

• Écrites dans les langages que la plateforme accepte
• Java et Kotlin pour Android
• Objective-C et Swift pour les applications iOS
• Développées avec les IDE spécifiques à l’OS
• Propres outils de développements et SDK
• Éléments d’interface spécifiques

Panorama des solutions de développement mobile S. Huet 16/40

Avantages

• Très rapides et adaptatives

• Meilleures performances
• Distribuées sur les magasins d’applications (app stores)
• Souvent + interactives, intuitives et fluides au niveau des
entrées/sorties
• Accès à tous les composants de la plateforme et à toutes les
ressources matérielles de l’appareil
• Connexion à Internet non indispensables
• En général meilleure expérience utilisateur (UX) en respectant
les standards de l’IU de la plateforme
• Fiabilité et protection des données + facile à assurer que des
applications web

Panorama des solutions de développement mobile S. Huet 17/40

Inconvénients

• Langages spécifiques nécessitant des développeurs qualifiés

• + coûteuses à développer
• Option à éviter pour des applications très simples
• Opérations nécessaires de la part de l’utilisateur pour
télécharger et mettre à jour les applications

Panorama des solutions de développement mobile S. Huet 18/40

Développement pour iOS

• Kit de développement : iOS SDK

• Téléchargeable gratuitement mais
installable uniquement sur Mac
• Inscription obligatoire à l’Apple
Developer Program
• Environnement de développement :
Xcode
• Développement possible pour iOS
mais aussi macOS, watchOS et
tvOS
• Langages de programmation
• Objective-C (inspiré de Smalltalk
pour la partie objet et de C pour
le reste)
• Swift (langage créé par Apple en
2014)

Panorama des solutions de développement mobile S. Huet 19/40

Objective-C vs Swift

• Objective-C
• Bonne compatiblité avec C et C++
• Fichiers header
• Instructions toutes terminées par des ;
• Manipulation explicite des pointeurs
• Utilisation d’un ramasse-miette seulement depuis Objective-C
2.0
• Swift
• Inférence de type
• Support des tuples
• Manipulation + facile des chaines de caractères, support de
l’unicode
• Programmation fonctionnelle (ex : map, filter)
• Fonction définie comme un objet

Panorama des solutions de développement mobile S. Huet 20/40

Google Fuchsia

• Nouveau système d’exploitation

développé par Google pour les systèmes
embarqués et mobiles
• Basé sur un nouveau noyau, appelé
Zircon, et non plus sur celui de Linux !

• 1re apparition publique en 2016, mais encore mystérieux

• 1er juillet 2019 : lancement du site https://fuchsia.dev/
• Interface utilisateur développéee avec le SDK Flutter
• Supporte le développement dans des langages divers : C++,
Web, Rust, Go, Dart
• Noyau Zircon (micro-noyau ?)
• Représentation des ressources en tant qu’objets et non comme
fichiers
• Remplace les signaux Unix par la programmation
événementielle et le patron observateur
Panorama des solutions de développement mobile S. Huet 21/40
Plan

1 Défis et contraintes des projets mobiles

2 Applications natives

3 Applications web

4 Applications hybrides

5 Applications multiplateformes (quasi-)natives

Panorama des solutions de développement mobile S. Huet 22/40

Caractéristiques des applications Web

• Construites avec JavaScript, CSS et HTML5

• Exécutées dans un navigateur
• Pas de SDK spécifique mais il existe des templates
• Avantages
• Facile et rapide à mettre en œuvre
• Plus besoin de faire des développements spécifiques à chaque
plate-forme
• Inconvénients
• Solution qui ne permet pas d’offrir accès aux mêmes
fonctionnalités que les applications natives

Panorama des solutions de développement mobile S. Huet 23/40

Applications web progressives

• Consistent en des pages Web consultées depuis une URL

• Offrent des capacités propres aux applications natives
• Fonctionnement hors-ligne
• Consultation de pages précédemment chargées pendant un
accès en-ligne depuis le cache du navigateur
• Envoi de notifications push
• Transmissions initiées par le serveur possibles
• Accès à des fonctionnalités matérielles
• Commandes tactiles
• Accéléromètre
• Vibration...
• Doivent en principe assurer une bonne expérience utilisateur
• Fiable : chargement instantané et garanti même dans des
conditions incertaines de connexion réseau
• Rapide : réactivité au niveau des interactions et des animations
• Engageante : apparence d’une application native à la
plateforme

Panorama des solutions de développement mobile S. Huet 24/40

Mise en œuvre des applications web progressives

• Utilisation de HTTPS pour assurer un niveau de sécurité et

l’intégrité des données
• Présence d’un manifest basé sur JSON avec les métadonnées
sur l’application (nom, liens vers les icones, déclaration de
l’orientation de l’écran par défaut...)
• Exécution de Service workers (proxy sous la forme de scripts)
en arrière-plan sans accès au DOM ou aux interactions avec
les utilisateurs mais utilisant des caches
• Lighthouse : outil open-source développé
par Google et permettant de tester la
conformité avec la technologie des
applications web progressives

Panorama des solutions de développement mobile S. Huet 25/40

Plan

1 Défis et contraintes des projets mobiles

2 Applications natives

3 Applications web

4 Applications hybrides

5 Applications multiplateformes (quasi-)natives

Panorama des solutions de développement mobile S. Huet 26/40

Caractéristiques des applications hybrides

• Installation sur l’appareil comme une applicaton native

• Développement avec JavaScript, HTML et CSS
• Exécution dans une webview
• Déploiement d’une couche d’encapsulation (wrapper)
permettant d’accéder à des fonctionnalités natives de
l’appareil
• 2 parties
• Code effectué avec des langages web
• Shell natif téléchargeable et chargeant le code précédent dans
une webview

Panorama des solutions de développement mobile S. Huet 27/40

Avantages

• Développement + facile en utilisant des technologies web

HTML/CSS/JavaScript
• - coûteuses que les applications natives
• Une seule application pour toutes les plateformes
• Pas besoin de navigateur contrairement aux applications web
• Accès à des API internes de l’appareil, au stockage, à la
caméra...

Panorama des solutions de développement mobile S. Huet 28/40

Inconvénients

• + lentes que les applications natives (exécution + lente du

code JavaScript que le code source natif)
• + gourmandes que les applications web car elles nécessitent
une couche d’encapsulation (elles dépendent d’une autre
plateforme)
• - interactives que les applications natives
• Adaptation à des besoins spécifiques - naturelle qu’avec des
applications natives

Panorama des solutions de développement mobile S. Huet 29/40

Apache Cordova

• Anciennement PhoneGap
• Un outil en ligne de commande pour créer des
projets et compiler du code HTML/CSS/JavaScript
vers des plateformes mobiles
• Un accès au matériel (état de la batterie, caméra,
contacts, nom de l’appareil et de l’OS, vibrations,
orientation de l’écran, géolocaisation, état de la
connexion réseau...)
• L’intégration possible de plugins pour intégrer du
code source exploitant de nouvelles possibiltés de
la plateforme et couplée avec une bibliothèque
JavaScript
• Développement de l’IU avec des frameworks Web
(ex : Bootstrap) mais pas de frameworks spécifiques

Panorama des solutions de développement mobile S. Huet 30/40

Fonctionnement d’une application avec Cordova

Source : Apache Cordova in Action, R.K. Camden, p. 4, 2015

Panorama des solutions de développement mobile S. Huet 31/40

Ionic

• SDK open-source développé par Drifty

• Initialement basé sur AngularJS et
Apache Cordova
• Depuis Ionic 3, basée sur Angular

Panorama des solutions de développement mobile S. Huet 32/40

Plan

1 Défis et contraintes des projets mobiles

2 Applications natives

3 Applications web

4 Applications hybrides

5 Applications multiplateformes (quasi-)natives

Panorama des solutions de développement mobile S. Huet 33/40

Caractéristiques des applications multiplateformes
natives

• Contraintes des applications natives

• Développer une application différente pour chaque plateforme
(Android, iOS)
• Maitriser des technologies différentes
• Utilisation de technologies pour pouvoir développer en même
temps l’application pour plusieurs plateformes
• Conception et développement d’IU natives
• Partage de code entre différentes plateformes
• Création d’applications natives pour chaque plateforme

Panorama des solutions de développement mobile S. Huet 34/40

Xamarin

• Plateforme de Microsoft permettant de

développer des applications sous iOS et
Android
• Couche d’encapsulation (wrapper) autour des API natives
basées sur Mono, l’implémentation multiplateforme de .NET
• Développement en C#
• Environnement de développement : Visual Studio
• Compilateur fourni pour chaque plateforme pour produire du
code natif
• Développement de l’interface utilisateur suivant 2 versions
• Applications Xamarin natives : utilisation des composants IU
natifs avec des API en C# spécifiques à la plateforme
• Xmarins.Forms : utilisation de classes communes aux
plateformes pour l’IU (abstraction pour réutiliser 98 % du code)

Panorama des solutions de développement mobile S. Huet 35/40

Comparaison de Xamarin avec d’autres plateformes

Source : Xamarin in Action, J. Bennett, p. 4, 2018

Panorama des solutions de développement mobile S. Huet 36/40

React Native

• Bibliothèque JavaScript développée par

Facebook

• Développement en JavaScript et dans un format balisé JSX

ressemblant au XML
• Pas de compilation nécessaire de l’application pour voir les
changements, rafraichissement comme pour n’importe quelle
page Web
• Invocation des API natives pour l’IU pour avoir des
composants graphiques natifs et non des webviews
• Accès à des interfaces JavaScript permettant d’accéder aux
fonctionnalités de la plateforme comme la caméra ou la
géolocalisation
• NB : Caractéristiques du développement hybride et natif

Panorama des solutions de développement mobile S. Huet 37/40

Flutter

• Kit de développement de Google

permettant de développer des
applications sous iOS et Android
• Langage de programmation Dart
• 1re version stable en décembre 2018
• Environnement de développement : Android Studio ou IntelliJ
• Deux ensembles de composants graphiques (widgets) recréés
par Google
• Material Design pour le design d’Android
• Cupertino pour le design d’iOS

Panorama des solutions de développement mobile S. Huet 38/40

Flutter : exemple
• Widget : bloc de base de l’IU
• Un objet unifié (le widget) pour la vue, l’agencement, le
contrôleur

1 import 'package:flutter/material.dart';
2
3 void main() => runApp(MyApp());
4
5 class MyApp extends StatelessWidget {
6 @override
7 Widget build(BuildContext context) {
8 return MaterialApp(
9 title: 'Welcome to Flutter',
10 home: Scaffold(
11 appBar: AppBar(
12 title: const Text('Welcome to Flutter'),
13 ),
14 body: const Center(
15 child: const Text('Hello World'),
16 ),
17 ),
18 );
19 }
20 }
Panorama des solutions de développement mobile S. Huet 39/40
Flutter : avantages et inconvénients

• Avantages
• Compilation rapide grâce au Hot reload : injection de mise à
jour du code source dans la Dart Virtual Machine pour voir
rapidement les effets
• Multiplateforme : rapide de faire un prototype puis de
développer et maintenir sur Android et IoS
• Documentation et communauté disponibles grâce à la
puissance de Google
• Inconvénients
• Bibliothèques limitées : SDK récent avec quelques fonctionnalités
manquantes, peu de widgets développées par des tiers
• Intégration : pas de plateforme d’intégration continue aussi
développée qu’en Android/iOS (comme Travis Jenkins), scripts
nécessaires pour automatiser la compilation, le test, le
déploiement

Panorama des solutions de développement mobile S. Huet 40/40