Développement mobile «...
Transcript of Développement mobile «...
![Page 1: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/1.jpg)
11.11.13 1 / 24
Développement mobile
« cross-platform »
Polytech’Nice
Vendredi 9 novembre 2012
![Page 2: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/2.jpg)
11.11.13 2 / 24
Au programme …
1. A chaque projet sa techno
2. 1 code Plusieurs plateformes
3. La puissance de jQuery sur mobile
![Page 3: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/3.jpg)
11.11.13 3 / 24
Avant de commencer …
Faisons les présentations
![Page 4: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/4.jpg)
11.11.13 4 / 24
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/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/5.jpg)
11.11.13 5 / 24
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/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/6.jpg)
11.11.13 6 / 24
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/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/7.jpg)
11.11.13 7 / 24
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/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/8.jpg)
11.11.13 8 / 24
Bien choisir sa techno
Application ou site mobile,
Que choisir ?
![Page 9: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/9.jpg)
11.11.13 9 / 24
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)
– Tirer parti du mobile à 100% (jeux en 3D, streaming audio et
vidéo)
![Page 10: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/10.jpg)
11.11.13 10 / 24
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/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/11.jpg)
11.11.13 11 / 24
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/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/12.jpg)
11.11.13 12 / 24
Phonegap / Apache Cordova
Des applis mobiles en Javascript ?
C’est possible …
![Page 13: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/13.jpg)
11.11.13 13 / 24
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
• N’évite pas les tests sur les différentes plateformes !
• Impossible à déboguer finement car ça reste du JS …
![Page 14: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/14.jpg)
11.11.13 14 / 24
Ce qui est supporté
![Page 15: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/15.jpg)
11.11.13 15 / 24
Ce que ça donne
![Page 16: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/16.jpg)
11.11.13 16 / 24
Installer Phonegap
• Prérequis :
– Node JS
– SDK cible (Android, iOS …)
![Page 17: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/17.jpg)
11.11.13 17 / 24
Avec Cordova
![Page 18: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/18.jpg)
11.11.13 18 / 24
Exemple de projet
![Page 19: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/19.jpg)
11.11.13 19 / 24
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 20: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/20.jpg)
11.11.13 20 / 24
Quelques composants …
• Accéléromètre
• Caméra
• Boussole
• Contacts
• Géolocalisation
• Lecteur multimédia
• Stockage
• Notifications
• …
![Page 21: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/21.jpg)
11.11.13 21 / 24
Utilisation de la géolocalisation
Avec l’outil en ligne de commande :
Sous Android :
![Page 22: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/22.jpg)
11.11.13 22 / 24
Utilisation de la géolocalisation
Sous iOS :
Sous Windows :
![Page 23: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/23.jpg)
11.11.13 23 / 24
Utilisation de la géolocalisation
![Page 24: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/24.jpg)
11.11.13 24 / 24
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 25: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/25.jpg)
11.11.13 25 / 24
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 26: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/26.jpg)
11.11.13 26 / 24
Anatomie d’un plugin Android
![Page 27: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/27.jpg)
11.11.13 27 / 24
Anatomie d’un plugin iOS
![Page 28: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/28.jpg)
11.11.13 28 / 24
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
Une démo s’impose …
![Page 29: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/29.jpg)
11.11.13 29 / 24
jQuery Mobile
Sites mobiles cross platform
![Page 30: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/30.jpg)
11.11.13 30 / 24
Petites questions …
Qu’est-ce que jQuery ?
A quoi cela sert-il ?
Pourquoi l’utiliser ?
![Page 31: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/31.jpg)
11.11.13 31 / 24
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 32: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/32.jpg)
11.11.13 32 / 24
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 33: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/33.jpg)
11.11.13 33 / 24
Conclusion
All good things must come to an end
![Page 34: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/34.jpg)
11.11.13 34 / 24
En bref …
• Bien utilisé, Phonegap pourra vous faire gagner du temps en développement pour plusieurs cibles
• jQuery Mobile vous permettra de faire de beaux sites cross-platform
• N’évite pas les tests sur les différentes plateformes
Que doit-on faire avec notre appli ?
![Page 35: Développement mobile « cross-platformatelierihm.unice.fr/.../3/2013/08/formation-mobile-cross-platform.pdf · 11.11.13 5 / 24 i2N : Notre métier Conception de sites Internet sur](https://reader033.fdocuments.net/reader033/viewer/2022053009/5f0d0ec17e708231d4387800/html5/thumbnails/35.jpg)
11.11.13 35 / 24
Questions
Et réponses …