S
é
a
n
c
e
5
Informatique mobile
NADIA BEL HADJ AISSA
2
Développement
d’applications
mobiles
CONTEXTE
Une multitude de plateformes…
3
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Windows
7
Fragmentation
4
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Concrètement…
Différences physiques
Taille de l’écran
Saisie
Scrolling
Différences de styles
Boutons “Back” et “Cancel”
Placement de la barre de navigation
Couleurs
Une multitude d’équipes de
dev/produits…
Windows
7
Plusieurs
Equipes/Produits
N
.
B
e
l
H
a
d
j
A
i
s
s
a
5
Uniform User Experience
Windows
7
Uniform User Experience
N
.
B
e
l
H
a
d
j
A
i
s
s
a
6
Chaque plateforme a ses
spécificités…
N
.
B
e
l
H
a
d
j
A
i
s
s
a
7
Différentes
fonctionnalités
Nouveaux navigateurs internet
Les nouveaux smartphones sont équipés avec des navigateurs internes modernes avec
un meilleur support des spécifications HTML5/CSS3.
8
N
.
B
e
l
H
a
d
j
A
i
s
s
a
OS
Android
iPhone
BlackBerry 6.0 +
Window Phone 7
WebOS
Nokia
Navigateur
Webkit based
Webkit based
Webkit based
IE 7 based *
Webkit based
Webkit based
3 types d’applications mobiles
9
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Applications natives
Applications Web
Applications hybrides
10
Applications
natives
Applications natives (1)
L’exécutable (fichier binaire) est stocké sur le smartphone;
Peut accéder à tous les APIs rendus disponibles par le vendeur de l’OS;
Les SDK sont spécifiques à la plateforme;
Chaque OS mobile offre ses propres outils et toolkits pour la conception
de l’IHM.
11
N
.
B
e
l
H
a
d
j
A
i
s
s
a
- IBM, Native, web or hybrid mobile app development, 2012. IBM Software Thought Leadership White Paper
Applications natives
12
N
.
B
e
l
H
a
d
j
A
i
s
s
a
File System
(on Mobile
Device)
Native App
(Java/Obj-C/C#)
Mobile OS
13
N
.
B
e
l
H
a
d
j
A
i
Publicité
s
s
a
Applications natives (2)
Développées pour un OS spécifique (seulement sur celui-ci);
Doivent être installés en accédant à un store (Google Play, App Store) ou
à travers un installeur externe;
Ont un accès total aux ressources matérielles (Géolocalisation, Système
de Fichiers, Accéléromètre, etc);
L’utilisateur doit confirmer l’accès aux APIs du smartphone (au moment
de l’installation de l’application)
Sont développés sur une plateforme et sont difficilement portables sur
d’autres plateformes;
Doivent être utilisées:
• Des jeux (utilisation du GPU)
• Des applications avec des calculs complexes
• Des applications à haute performance (ne tolérant pas 10ms de latence)
Exemples
14
N
.
B
e
l
H
a
d
j
A
i
s
s
a
VoIP
Access Camera
Audio Processing
Video Processing
App-Store Presence
16
Applications
Web
17
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Applications Web
Web Server
Mobile Browser
Web App
(HTML, CSS, JS)
Mobile OS
Questions que se pose un
développeur d’applications natives…
18
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Quelle plateforme choisir ?
Combien de temps ca va prendre de récrire
l’application pour N plateformes?
Qu’est ce qui arrivera si
je prend une mauvaise
décision concernant le choix de la plateforme?
19
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Avantages
Multiplateforme
Pas besoin d’installation
Pas de mise à jour à gérer
Sauvegarde centralisée sur le serveur
Partage d’information plus simple et plus rapide…
Conclusion
20
N
.
B
e
l
H
a
d
j
A
i
s
s
a
21
Applications
hybrides
Applications hybrides
22
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Native Container
HTML, CSS, JS
File System
(on Mobile
Device)
Mobile OS
Un ensemble de framework
23
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Différences…
24
N
.
B
e
l
H
a
d
j
A
i
s
s
a
25
N
.
B
e
l
H
a
d
j
A
i
s
s
a
2 stratégies…
Common Source
Cross Platform Source Code
Common Platform
Mapping to Native
WEB APPLICATION
UI
Platform APIs
JavaScript – Java Bridge
OS – Android / iPhone
PhoneGap/ Apache
Cordova
Bridge - JavaScript – Java – Objective C
OS – Android / iPhone
Mapping to Native
Titanium Mobile
26
PhoneGap
/Apache
Cordova
27
N
.
B
e
l
H
a
d
j
A
i
Publicité
s
s
a
PhoneGap
PhoneGap est un framework open source qui permet de créer des
applications mobiles en utilisant des APIs Web standardisés pour plusieurs
plateformes mobiles (actuellement 11);
Un outil qui permet de développer des applications mobiles cross-
platform avec HTML5, CSS et Javasript;
A l’origine créé par Nitobi Software puis acheté par Adobe Systems, Il
s’appelait alors PhoneGap;
En 2011, Adobe donne le projet à la Fondation Apache, qui le renomme
Apache Callback puis Apache Cordova qui en est actuellement à sa
version 4.0.0.
PhoneGap
28
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Une application PhoneGap
29
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Votre code
Vue Web Native
APIs Natives
App Native- ,apk, .xap, etc
30
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Pre-requis
• Avoir des connaissances de base des plateformes Android, IOS, BlackBerry, WebOS
•
Etre un expert de HTML/Javascript ou de frameworks comme GWT
• Avoir des connaissances de base des bibliothèques JavaScript comme
•
•
Jquery
script.aculo.us
• Prototype
•
Etc
• Ou de framework Ajax comme GWT
•
•
Un projet différent pour chaque platform, puis injection de code PhoneGap dans
chaque projet
PhoneGap n’a pas d’IDE, utiliser Eclipse pour Android et Xcode pour IPhone
32
Appcelerator
Titanium
Généralités
Un framework open source pour
le développement d’applications
mobiles natives (ou desktop) utilisant les technologies ouvertes du Web
(JavaScript - HTML et CSS)
Une application Titanium est un programme JavaScript interprété au
moment de son exécution par le smartphone
33
N
.
B
e
l
H
a
d
j
A
i
s
s
a
34
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Appcelerator Titanium
Un SDK open source avec plus de 5,000 smartphone
et OS mobile pris en charge
Une IDE Eclipse
Un MVC framework Alloy
Des Services Cloud pour tester les applications.
Titanium
35
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Titanium Demo
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Titanium Demo
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Titanium Demo
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Titanium Demo
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Titanium Demo
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Titanium Demo
N
.
B
e
l
Publicité
H
a
d
j
A
i
s
s
a
Titanium Demo
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Titanium Demo
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Titanium Demo
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Titanium Demo
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Architecture
46
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Compare Screens (IPhone)
PhoneGap
Titanium Mobile
N
.
B
e
l
H
a
d
j
A
i
s
s
a
47
Compare Screens (Android)
PhoneGap
Titanium Mobile
N
.
B
e
l
H
a
d
j
A
i
s
s
a
48
49
Synthèse
50
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Comparaison
Accès
au
matériel
Vitesse
Cout de dév
App Store
Processus
d’approbation
Native
Total
Très rapide
Cher
Disponible
Obligatoire
Hybrid
Total
Aussi rapide
que natif si
nécessaire
Raisonnable
Disponible
Surcout
limité
Web
Partiel
Rapide
Raisonnable
Pas
disponible
Aucun
51
N
.
B
e
l
H
a
d
j
A
i
s
s
a
Comparaison
Native
Native
rapide
Graphique
performance
UI
Look and feel
Native
Web
HTML, Canvas,
SVG
lent
Emulé
Swipe, pinch
Yes
Not pinch
Connectivité
Peut s’exécuter
offline
Doit être online
Required skills
Specific to OS
Web technologies
Comparaison
52
N
.
B
e
l
H
a
d
j
A
i
s
s
a