Développement mobile «...
Transcript of Développement mobile «...
![Page 1: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/1.jpg)
20.10.14 1
Développement mobile
« cross-platform »
Polytech’Nice
vendredi 17 octobre 2014
![Page 2: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/2.jpg)
20.10.14 2
Au programme …
1. A chaque projet sa techno
2. 1 code Plusieurs plateformes
3. La puissance de jQuery sur mobile
4. Quelques librairies mobiles intéressantes
![Page 3: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/3.jpg)
20.10.14 3
Avant de commencer …
Faisons les présentations
![Page 4: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/4.jpg)
20.10.14 4
Qui suis-je ?
• Ingénieur Polytech’Nice – Promotion 2006
• Fondateur & Gérant d’i2N depuis 2007
• Consultant auprès des entreprises pour
les accompagner dans leur gestion des
technologies de l’information (web, mise
en place de solutions logicielles &
matérielle)
![Page 5: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/5.jpg)
20.10.14 5
i2N : Notre métier
Conception de sites Internet sur mesure (institutionnel, e-commerce, mobile)
Suivi et développement (référencement, stratégie social media)
Développement de logiciels sur mesure
Gestion de parcs informatiques & Maintenance
![Page 6: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/6.jpg)
20.10.14 6
i2N : Nos références
Mairie de Monaco, Sûreté Publique de Monaco, SBM, Education
Nationale, Grimaldi Forum, Radio Vitamine, Radio Riviera …
Tous secteurs : Immobilier, BTP, Institutionnels, Juridique, Services …
www.i2n.mc
![Page 7: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/7.jpg)
20.10.14 7
Et vous ?
Quelques questions pour vous …
Quelles sont vos connaissances en Javascript ?
Avez-vous déjà développé nativement pour mobile ?
Avez-vous déjà développé un site adapté aux mobiles ?
![Page 8: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/8.jpg)
20.10.14 8
Bien choisir sa techno
Application ou site mobile,
Que choisir ?
![Page 9: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/9.jpg)
20.10.14 9
Se poser les bonnes questions
• Que voulons nous faire avec notre mobile ?
– Consultation de pages Internet
– Consultation de données disponibles hors ligne
– Consultation de données remises à jour
– Interaction avec une application ou un site web
– Utiliser les fonctionnalités du mobile (boussole,
géolocalisation, accéléromètre)
– Jeux en 3D
– Streaming audio et vidéo
![Page 10: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/10.jpg)
20.10.14 10
Avoir les bonnes réponses
• Que voulons nous faire avec notre mobile ?– Consultation de pages Internet Site mobile
– Consultation de données disponibles hors ligne
Site mobile / application
– Consultation de données remises à jour
Site mobile / application
– Interaction avec une application ou un site web
Site mobile / application
– Utiliser les fonctionnalités du mobile (boussole, géolocalisation, accéléromètre)
Application Phonegap / native
– Tirer parti du mobile à 100% (jeux en 3D, streaming audio et vidéo)
Application native
![Page 11: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/11.jpg)
20.10.14 11
Le cross platform c’est bien
• Mais on n’a pas accès à toutes les fonctionnalités du
mobile
• Mais on n’a pas une gestion aussi fine des performances
• Mais on n’est pas aussi rétro compatible qu’on le
souhaiterait (quoi que)
Par contre, on gagne du temps
si le choix est fait à bon escient
![Page 12: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/12.jpg)
20.10.14 12
Phonegap / Apache Cordova
Des applis mobiles en Javascript ?
C’est possible …
![Page 13: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/13.jpg)
20.10.14 13
Vous avez dit Phonegap ?
• Le principe général :
– 1 code unique
– Plusieurs plateformes cibles
• Les avantages:
– Temps de développement réduit
– Maintenabilité sur différentes plateformes
– 1 seul langage pour différentes plateformes
![Page 14: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/14.jpg)
20.10.14 14
Phonegap ou Cordova ?
• Phonegap est une distribution de Cordova
– Cordova est le moteur qui fait tourner Phonegap
– Phonegap peut proposer quelques plugins complémentaires<
(notamment propriétaires)
• Cependant …
– Ils restent tous les 2 gratuits
– Ils restent tous les 2 open source
![Page 15: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/15.jpg)
20.10.14 15
Vous avez dit Phonegap ?
• Cherche à réduire l’écart entre les téléphones
• Concrètement :
– Outil de création d’un projet type pour chaque OS
– 1 répertoire pour le code
– Code HTML + Javascript
– Librairie Javascript à inclure
– Fichier de préférences à éditer suivant les besoins
• En pratique, Phonegap crée une WebView
qui exécute du code Web
![Page 16: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/16.jpg)
20.10.14 16
Vous avez dit Phonegap ?
• Cependant :
– Quelques petits inconvénients liés à une WebView
– N’évite pas les tests sur les différentes plateformes !
– Difficile à déboguer finement car ça reste du JS …
• Mais ces inconvénients sont à mettre en perspective par
rapport au gain de temps et aux avantages !
![Page 17: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/17.jpg)
20.10.14 17
Ce qui est supporté
![Page 18: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/18.jpg)
20.10.14 18
Ce qui est supporté
![Page 19: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/19.jpg)
20.10.14 19
Ce que ça donne
![Page 20: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/20.jpg)
20.10.14 20
Ce que ça donne
![Page 21: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/21.jpg)
20.10.14 21
Phonegap / Apache Cordova
Oui mais techniquement ça donne quoi ?
![Page 22: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/22.jpg)
20.10.14 22
Installer Phonegap
• Prérequis :
– Node JS
– SDK cible (Android, iOS …)
![Page 23: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/23.jpg)
20.10.14 23
Avec Cordova
![Page 24: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/24.jpg)
20.10.14 24
Exemple de projet
![Page 25: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/25.jpg)
20.10.14 25
Exemple de projet
![Page 26: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/26.jpg)
20.10.14 26
Le fichier config.xml
• Définition – des composants disponibles
– du nom de l’application
– du splashscreen
– de paramètres globaux
– …
Différent suivant les cibles
![Page 27: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/27.jpg)
20.10.14 27
Le fichier config.xml (Android)
![Page 28: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/28.jpg)
20.10.14 28
Le fichier config.xml (iOS)
![Page 29: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/29.jpg)
20.10.14 29
Le fichier config.xml
• <widget> : domaine de l’application
• <name> : nom de l’application
• <description> & <author> : métadonnées
• <content> : page de démarrage (défaut : index.html)
• <access> : domaines extérieurs auxquels l’application peut accéder
![Page 30: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/30.jpg)
20.10.14 30
Quelques composants …
• Accéléromètre
• Caméra
• Boussole
• Contacts
• Géolocalisation
• Lecteur multimédia
• Stockage
• Notifications
• …
![Page 31: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/31.jpg)
20.10.14 31
Utilisation de la géolocalisation
Avec l’outil en ligne de commande :
Sous Android :
![Page 32: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/32.jpg)
20.10.14 32
Utilisation de la géolocalisation
Sous iOS :
Sous Windows :
![Page 33: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/33.jpg)
20.10.14 33
Utilisation de la géolocalisation
![Page 34: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/34.jpg)
20.10.14 34
Ajoutez votre code natif …
• Possibilité de développer des plugins natifs
• Appels depuis le code Javascript :
• winParam : Fonction appelée en cas de réussite
• Error : Fonction appelée en cas d’erreur
• Service : classe de la méthode appelée
• Action : méthode appelée
![Page 35: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/35.jpg)
20.10.14 35
Utilisation d’un plugin
• Déclarer le plugin dans le fichier config.xml
On définit la fonction echo sur l’objet window qui appelle
la méthode echo de la classe Echo
![Page 36: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/36.jpg)
20.10.14 36
Anatomie d’un plugin Android
![Page 37: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/37.jpg)
20.10.14 37
Anatomie d’un plugin iOS
![Page 38: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/38.jpg)
20.10.14 38
Pour aller plus loin …
• Possibilité d’inclure des librairies Javascript spécifiques
• Possibilité d’écrire des plugins natifs
– Si cela ne vaut pas un développement spécifique …
• L’API en ligne : http://docs.phonegap.com
• Le Wiki : https://github.com/phonegap/phonegap/wiki
![Page 39: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/39.jpg)
20.10.14 39
Le look d’une application native ?
• Malgré tous ces avantages
• Malgré tous ces composants
• Cela garde le look d’un site mobile
et non d’une application :/
Des librairies peuvent vous y aider …
![Page 40: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/40.jpg)
20.10.14 40
jQuery Mobile
Sites mobiles cross platform
![Page 41: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/41.jpg)
20.10.14 41
Petites questions …
Qu’est-ce que jQuery ?
A quoi cela sert-il ?
Pourquoi l’utiliser ?
![Page 42: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/42.jpg)
20.10.14 42
jQuery mais en mobile
• jQuery est utilisable sur Mobile
• jQueryMobile apporte des fonctionnalités cross platform
=> Layout, Dialog, Transitions, Multipage
• Différents thèmes
• Outil WYSIWYG de mise en forme
• Possibilité de décliner un site en
3 versions : classique, tablette et mobile
![Page 43: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/43.jpg)
20.10.14 43
Avec Phonegap ?
• Intégration possible avec Phonegap
• Inclusion simple du code JS et HTML dans
l’application et le tour est joué
• Quelques variables à régler
![Page 44: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/44.jpg)
20.10.14 44
Petit tour des fonctionnalités
http://demos.jquerymobile.com/1.4.4/
![Page 45: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/45.jpg)
20.10.14 45
Onsen UI
Fait pour Phonegap
![Page 46: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/46.jpg)
20.10.14 46
Construit pour Phonegap
• Librairie JS
• Définit un lot de balises HTML et d’attributs sémantiques
• Fonctionnalités cross platform et widgets
=> Layout, Dialog, Transitions, Multipage
• Différents thèmes
• Thèmes et gabarits disponibles
http://onsen.io/
![Page 47: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/47.jpg)
20.10.14 47
Construit pour Phonegap
![Page 48: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/48.jpg)
20.10.14 48
Avec Phonegap ?
• Une fois cordova installé
• Téléchargez un « thème »
• Et démarrez!
![Page 49: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/49.jpg)
20.10.14 49
Structure d’un fichier
![Page 51: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/51.jpg)
20.10.14 51
Conclusion
All good things must come to an end
![Page 52: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/52.jpg)
20.10.14 52
En bref …
• Bien utilisé, Phonegap pourra vous faire gagner du temps en développement pour plusieurs cibles
• jQuery Mobile / OnsenUI vous permettra de faire de beaux sites / applicationscross-platform
• N’évite pas les tests sur les différentes plateformes
Que doit-on faire avec notre appli ?
![Page 53: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/53.jpg)
20.10.14 53
Questions
Et réponses …
![Page 54: Développement mobile « cross-platformatelierihm.unice.fr/.../2014/10/formation-mobile-cross-platform.pdf · 20.10.14 2 Au programme … 1. A chaque projet sa techno 2. 1 code Plusieurs](https://reader033.fdocument.pub/reader033/viewer/2022060320/5f0d0ec37e708231d438780d/html5/thumbnails/54.jpg)
20.10.14 54
Coordonnées
Christophe BONNET
+377 97 98 36 98
http://www.i2n.mc