Généralités

Gé é lité sur lel

développement
pp d'applications
pp
mobiles
 PLAN

 Introduction

 Types d’applications

 FrameWork hybrides

 Écosystème Ionic et outils

 Conclusion
 3
Introduction
 Intégration du mobile dans sa stratégie digitale est une nécessité pour toute entreprise.

 Pour intégrer le mobile,

mobile il existe 3 solutions:
 développer une application web Mobile,
 développer une application native,
 développer une application hybride.
4

Types d’applications
5
Application Web Mobile
 Une application mobile exécutable via le navigateur internet de votre
smartphone, appelée aussi WebApp

 L’application est développée avec les technologies web classiques,

(HTML5, CSS3 ou Javascript) en utilisant la technique de responsive
design qui assure l'organisation des éléments en fonction de la taille de
l'écran

La webMobile est accessible via tous les smartphones: toute marque
et système d'exploitation confondus
6
Application Web Mobile

Limites
 Absence de visibilité des webApp au sein des magasins de
téléchargement

 Absence de certaines fonctionnalités quand l’application est

fermée comme les notifications

 Pas d’accès à l’application si on est hors-ligne

 Pas d’accès aux applications natives du mobile (GPS, appareil

photo ) ;
photo…)
7
Application native

 Un logiciel développé spécifiquement pour un système d’exploitation

mobile (iOS, Android, Blackberry, Windows Phone, etc.)

 Une application téléchargée depuis un magasin d d’applications

applications
mobiles (store) puis installée sur le périphérique

 Une application qui peut fonctionner hors-ligne

 Une application qui se base sur les fonctionnalités natives du

terminal (appareil photo, géolocalisation, etc.)
8
Application native

Système Langage de
Société IDE Store
d'exploitation développement

Apple iOS Objective-C, swift Xcode AppStore

MarketPlace ou
Microsoft Windows Phone C# Visual Studio
windows store

Android Studio ou
Google Android Java GooglePlay
Eclipse
9
Application native

Limites:
 Développement d’une version appropriée pour chaque
plateforme

 Le temps et le coût de développement sont donc multipliés par

le nombre de plateformes

 Chaque plateforme possède son langage et nécessite un

apprentissage important
10
Application hybride

Une application développée à partir de langages web (HTML5,

JavaScript, CSS…)

 Une application qui s’appuie sur des technologies natives mobiles pour
utiliser certaines fonctionnalités du smartphone (caméra, GPS, etc.)

 Une application téléchargée depuis les magasins d’applications et

i t llé sur le
installée l mobile
bil
11
Application hybride

 Une application hybride est une application native qui utilise WebView
comme l'un des composants d'interface utilisateur

 Le webView est une instance du navigateur qui exécute des contenus

Web et les représente à l’intérieur de l’application sans adresse URL

 La communication entre les WebView et les plateformes natives se

fait via des outils dont le plus connu est Apache Cordova
12
Application hybride, Cordova?

Cordova = une surcouche, un wrapper, qui permet

d'accéder aux différentes fonctionnalités du mobile à travers
des API(Application Programming Interface)

 L'affichage de l'application se fera à travers

l WebView
la W bVi quii sertt a afficher
ffi h dud contenu
t HTML
HTML.

 L'utilisation ou l'accès à la caméra, la géolocalisation, des

contacts... se fera depuis les API cordova
13
Application hybride, Cordova ?
14
Application hybride

Limites
 LL’exploitation
exploitation limitée des fonctionnalités du système

 La compatibilité peut ne pas être optimale sur un grand nombre de

smartphone
15
Récapitulatif
Type d’application Application Application Application
Fonctionnalité Web native hybride

Accès aux fonctionnalités natives (GPS, etc.) Non (Accès limité) Oui Oui

g
Téléchargement depuis
p les Mobile stores Non Oui Oui

Codage 1 seule fois et exécution sur plusieurs Oui Non Oui

plateformes

Accès hors ligne Non Oui Oui

Portabilité du code Oui Non Oui

Coût de développement et de maintenance Réduit Élevé Moyen

16
Quel type d’application?
17
Quel type d’application?
18

Framework hybrides
y
19
Panoramas Framework hybrides
20
Ionic, un Framework qui monte
 Version 1.0 créée en 12/05/2015
 > 15 000 stars sur github
> 400 000 applications ionic
> 2 300 download / jour en moyenne
 D
Documentation
t ti complète
lèt ett tutoriaux
t t i disponibles
di ibl
 Une large communauté
 Beaucoup de ressources disponibles
21

Écosystème
y d’Ionic et outils
22
Écosystème d’Ionic

 Conception des interfaces(frontend)

C f (f )
 HTML5, CSS3, Sass, Javascript
 Ionic framework

 Logique métier(backend)
 Angular
g JS

 Accès plates-formes natives

 Cordova
23
Écosystème d’Ionic
Application Backend

 Application d'arrière-plan qui interagit directement

avec la frontale
 Manipulation des éléments d’un projet web qui sont
invisibles
 Éléments se chargent de la mise en place, de la
configuration, du développement et de la maintenance
du serveur,
serveur de la base de données et de ll’application
application
web
24
Écosystème d’Ionic
25
Angular JS

 Le développement Backend

 Le développement
L dé l t de
d toute
t t la
l logique
l i métier:
éti l structure
la t t d
de
l’application

 Le modèle-vue-contrôleur
modèle e contrôle r (MVC) qui q i favorise
fa orise le couplage
co plage
faible entre la présentation, les données et les composants métier
26
Angular JS
 Un modèle contient les données à afficher
 Une vue contient la présentation de l'interface graphique
 Un contrôleur contient la logique concernant les actions effectuées
par l'utilisateur et fait le lien entre la vue et le modèle
27
SAAS

 Technologie Sass = Syntactically Awesome Style Sheets

 CSS avancés assurant la gestion de thème

 Les projets de démarrage sont rattachés au fichier CSS

précompilé d'Ionic et qui se trouve dans le répertoire du projet et
est lié à l'application dans le fichier racine

 «Superpuissance» donnée aux développeurs et aux concepteurs

en termes de création et de maintenance de CSS
28
Gulp

 Technologie Gulp = automatisation des compilations

 Un task runner: Il permet de minifier (réduire la taille du code,

compacter, optimiser) les fichiers automatiquement

 Conversion de fichier SASS en CSS, et de regrouper tous les fichiers

Angular JS dans un seul fichier global appelé fichier index
29
Outils Ionic

Une Interface
U I t f d lignes
de li d commandes:
de d permett
Ionic CLI de démarrer un projet rapidement, de lancer un
serveur local de développement, de compiler une
application, etc.

Ionic View Une application permettant de visualiser

ll’application
application sur un smartphone

Un Éditeur qui rafraichit automatiquement la page

Ionic Playground après chaque modification au niveau de
l’application
30
Outils Ionic

Un assistant à la création d'applications Ionic disponible

sur navigateur, permettant de créer un prototype rapide
Ionic Creator d’application via de simples "drag and drop" de
composants
p et une exportation
p de code.

Création des notifications push ciblées à travers un

Ionic Push tableau de bord simple qui enverra automatiquement
vos notifications
31
Outils Ionic

Une collection d'extension pour AngularJS

g
permettant d'intégrer les plugins Apache Cordova et
ngCordova d'avoir ainsi accès aux fonctionnalités du
périphérique, telles que l'appareil photo, ou encore
ll'accéléromètre
accéléromètre, depuis un service Angular

Optimisation de ll’application
application, en suivant les
Ionic Analytics événements, interactions, et le comportement des
utilisateurs sur l’application.
32
Arborescence d’un projet Ionic
33
Arborescence d’un projet Ionic
Dossier contenant toutes les feuilles de styles

Dossier contenant toutes vos ressources de type image

Dossier contenant les scripts

p : routines de démarrage
g de l'application
pp

Dossier contenant toutes les librairies JS ou CSS (ajoutées

automatiquement si on ajoute un plugin avec Cordova

Dossier contenant toutes les templates HTML (différentes vues de

votre application)

le fichier "index.html" qui sera le point de départ de votre application.

34
Conclusion

Rappel

 T
Types d’applications:
d’ li i W bA
WebApp, native
i et h
hybride
b id

 Frameworks hybrides

 Ionic en tant que FrameWork hybride: son point fort est AngularJs

 L’écosystème
L écosystème d’Ionic
d Ionic et outils
35
Conclusion

Ateliers
 Mise en place de l’environnement de développement
 Création d'un
d un projet d'application
d application mobile hybride via Ionic Creator
 Accès à une base de données distante MySQL
 Utilisation des plugins Cordova
 Utilisation des plugins Ionic
Merci et Bon travail