Alexandre PEREIRA
Alexandre PEREIRA
Head of Front-End, Social & Mobile Development

- L’OCCITANE en Provence
- foxhype
- Spécialiste Front-E...
Sommaire
I - Généralités
- C’est quoi PhoneGap ?
- PhoneGap & Cordova.
II - Les bases
- Pré-requis & logiciels
- Installer...
I - Généralités
C’est quoi PhoneGap ?

?
I - C’est quoi PhoneGap ?
PhoneGap (Cordova) est un pont de développement, nous permettant
d’encapsuler du code client Web...
I - C’est quoi PhoneGap ?
PhoneGap (Cordova) va
également nous permettre de
communiquer avec la machine
(le smartphone, la...
I - Généralités
PhoneGap & Cordova
I - PhoneGap & Cordova
La majorité des gens ne voient pas la différence entre ces deux noms, de par
leur intime relation. ...
I - PhoneGap & Cordova
Lequel utiliser ?

Pour le moment nous allons partir d’un socle Cordova, car il est plus récent : V...
II - Les Bases
Pré-requis et logiciels
II - Pré-requis et logiciels
PhoneGap / Cordova se basent sur des connaissances clients pour permettre
aux développeurs la...
II - Pré-requis et logiciels
La pluralité des plateformes nous oblige à utiliser un panel d’IDE pour nos
développements à ...
II - Pré-requis et logiciels
Problème,
Ils ne fonctionnent pas tous sur le même OS. A vous de choisir
l’environnement que ...
II - Pré-requis et logiciels
Ma recommandation :
Essayons de couvrir la majorité du parc pour notre cours avec les iPhone ...
II - Pré-requis et logiciels
Compte développeur :
Ne pas oublier également le compte développeur. Leurs prix varient et le...
II - Les Bases
Installer son environnement de dev
II - Installer son environnement de dev
Sur Android, rien de plus simple :
Téléchargez l’Android Developer Tool, disponibl...
II - Installer son environnement de dev
Petite subtilité,
On va aller ajouter une ligne au fichier .bash_profile de la machi...
II - Installer son environnement de dev
Pour voir les fichiers cachés sur votre Mac, lancer le terminal et taper cette peti...
II - Installer son environnement de dev
Pour iOS rien de bien complexe dans
un premier temps :
Téléchargez Xcode, gratuit ...
II - Installer son environnement de dev
Et PhoneGap/Cordova,
C’est la qu’on va commencer à s’amuser un peu.
Les nouvelles ...
II - Installer son environnement de dev
Une fois NodeJS et la commande «npm» installée, nous allons pouvoir récupérer
Cord...
II - Installer son environnement de dev

Une fois le chargement terminé, on test la réactivité de Cordova

$ cordova
Par l...
II - Installer son environnement de dev
Cela semble bon. Nous voilà prêts et armés jusqu’aux dents !
III - Les mains dans le cambouis
Architecture de base
III - Architecture de base
Comme nous l’avons aperçu, les applications PhoneGap ont la structure suivante :
III - Architecture de base
Cela se traduit par un dossier «client» WWW où vous allez mettre votre code de base.

C’est ici...
III - Architecture de base
Et des dossiers de build par plateforme.
Par exemple ici : un pour iOS, un pour Android
III - Les mains dans le cambouis
Hello World
III - Hello World
Maintenant, au boulot !
Créons notre première app.
Utilisons pour cela la commande «create» de Cordova a...
III - Hello World
Créons donc la déclinaison iOS.

$ cd HelloWorld //Je vais dans le dossier HelloWorld
$ cordova platform...
III - Hello World
Pour cela 2 solutions,
La commande : (que je ne recommande pas)
$ cordova build ios

ou
xCode, via le fic...
Note : «cordova prepare»
Si vous modifiez le dossier www de votre projet (vos fichiers html/js/css) il vous faudra
mettre à ...
III - Hello World
Voyons si il tourne, au moins sur le simulateur iPhone d’Xcode,
Pour cela, sélectionnons le simulateur v...
III - Hello World
Et voila, ce semble bien fonctionner.
Notre code HTML/JS tourne dans une app «native» iOS !
III - Hello World
On fait de même pour Android

$ cordova platform add android
III - Hello World
Même motif, même punition: 2 solutions pour compiler Android
La commande : (que je ne recommande toujour...
III - Hello World
Et pour lancer l’application :
Clique droit sur le Projet > Run As > Android Application
Cela va vous la...
III - Les mains dans le cambouis
Etudions tout ça...
III - Etudions tout ça
cordova/
CordovaLib/
Projet/
Projet.xcodeproj
platform_www/
www/

commandes terminal
librairie Cord...
III - Etudions tout ça
src/
gen/
Android 4.2.2/
Android Private Libraries
assets
bin
cordova
libs
res
AndroidManifest.xml
...
III - Les mains dans le cambouis
Géolocalisation
III - Géolocalisation
Premiers tests, voyons la géolocalisation.
L’idée est d’interroger le smartphone et ses
composants p...
III - Géolocalisation

On va ajouter le plugin cordova nécessaire au fonctionnement
de la géolocation :

$ cordova plugin ...
Note : Plugins
Certaines fonctionnalités vous demanderont l’installation de
plugins via le terminal, n’hésitez pas à vérifi...
III - Géolocalisation

Sur Android il faut vérifier que les permissions de l’application sont
suffisantes pour exécuter la f...
III - Géolocalisation
javascript

var
   
   
   
   
   
   
   
   
};

onSuccess = function(position) {
alert('Latitude...
III - Les mains dans le cambouis
Notifications
III - Notifications
Il est possible via PhoneGap / Cordova de lancer en javascript un panel de notifications
machine.
On peu...
III - Notifications
terminal
$ cordova plugin add org.apache.cordova.dialogs
$ cordova plugin add org.apache.cordova.vibrat...
III - Les mains dans le cambouis
Camera
III - Camera
Manipulons à présent la caméra.
Le but étant de prendre une photo et de pouvoir
manipuler les données de l’im...
III - Camera
terminal
$ cordova plugin add org.apache.cordova.camera

javascript
navigator.camera.getPicture(onSuccess, on...
La suite ?
Allons faire un tour sur la documentation de PhoneGap/Cordova et voyons les
possibilités :

Acceleromètre, Came...
Prochain SlideShare
Chargement dans…5
×

Apache Cordova 3.3 de zéro

10 168 vues

Publié le

Apprendre les fondamentaux de Apache Cordova (3.3) pour faire tourner son environnement de test et commencer à développer sur son mac OS.

Publié dans : Formation
0 commentaire
13 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
10 168
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11
Actions
Partages
0
Téléchargements
667
Commentaires
0
J’aime
13
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Apache Cordova 3.3 de zéro

  1. 1. Alexandre PEREIRA
  2. 2. Alexandre PEREIRA Head of Front-End, Social & Mobile Development - L’OCCITANE en Provence - foxhype - Spécialiste Front-End / Mobile - Développeur Sencha / PhoneGap - Google Wildfire Contributor - spacefox coder apereira@loccitane.com alex@foxhype.com http://www.linkedin.com/in/pereiraalexandre @alxndr_pereira
  3. 3. Sommaire I - Généralités - C’est quoi PhoneGap ? - PhoneGap & Cordova. II - Les bases - Pré-requis & logiciels - Installer son environnement de dev III - Les mains dans le cambouis - Architecture de base - Hello World - Etudions le... - Géolocalisation - Notifications - Camera
  4. 4. I - Généralités C’est quoi PhoneGap ? ?
  5. 5. I - C’est quoi PhoneGap ? PhoneGap (Cordova) est un pont de développement, nous permettant d’encapsuler du code client Web dans une application native (iOS, Android, Windows Phone etc...). C’est en gros une grosse webview html/css/js dans une app.
  6. 6. I - C’est quoi PhoneGap ? PhoneGap (Cordova) va également nous permettre de communiquer avec la machine (le smartphone, la tablette), via des connecteurs Javascript internes à leur développement ou via des connecteurs indépendants : les plugins.
  7. 7. I - Généralités PhoneGap & Cordova
  8. 8. I - PhoneGap & Cordova La majorité des gens ne voient pas la différence entre ces deux noms, de par leur intime relation. Vous allez rencontrer ces noms souvent dans votre carrière de développeur mobile. Voyons que signifient-ils. Pour faire simple PhoneGap est une distribution gratuite de Cordova (qui l’est aussi pour le moment...). Elles sont basées sur le même moteur et les mêmes technologies.
  9. 9. I - PhoneGap & Cordova Lequel utiliser ? Pour le moment nous allons partir d’un socle Cordova, car il est plus récent : Version 3.3 En effet PhoneGap profite des update de Cordova, mais parfois avec un petit décalage. Par la suite libre à vous d’utiliser le framework qui vous convient le mieux.
  10. 10. II - Les Bases Pré-requis et logiciels
  11. 11. II - Pré-requis et logiciels PhoneGap / Cordova se basent sur des connaissances clients pour permettre aux développeurs la construction d’applications mobile sans avoir de connaissances approfondies en langages natif. Avec les langages suivants, le développeur peut très bien développer un projet mobile à destination d’iOS ou d’Android Javascript HTML (HTML5) CSS (CSS3) Le JS est une brique très importante pour le développement d’applications via PhoneGap / Cordova, car l’intégralité des manipulations des connecteurs clients -> machine vont se faire dans ce langage.
  12. 12. II - Pré-requis et logiciels La pluralité des plateformes nous oblige à utiliser un panel d’IDE pour nos développements à destination des machines. Voici le topo: xCode Eclipse Visual Studio
  13. 13. II - Pré-requis et logiciels Problème, Ils ne fonctionnent pas tous sur le même OS. A vous de choisir l’environnement que vous utiliserez en fonction de vos besoins. Il faudrait peut-être même parfois émuler un OS... :( + = + = + =
  14. 14. II - Pré-requis et logiciels Ma recommandation : Essayons de couvrir la majorité du parc pour notre cours avec les iPhone et Android, cela nous permettra de rester sur un seul OS et de minimiser le nombre de nos IDEs. + Nous allons donc utiliser Xcode et la version modifiée d’Eclipse comprise dans l’Android Developer Tool de Google. Xcode va gérer la partie build iOS. Eclipse quant à lui va gérer la partie Android.
  15. 15. II - Pré-requis et logiciels Compte développeur : Ne pas oublier également le compte développeur. Leurs prix varient et leurs droits également. Par exemple, ils vous faut le compte sur Android juste pour publier, alors que sur iOS il est utile beaucoup plus tôt.
  16. 16. II - Les Bases Installer son environnement de dev
  17. 17. II - Installer son environnement de dev Sur Android, rien de plus simple : Téléchargez l’Android Developer Tool, disponible sur le site dédié de Google http://developer.android.com/sdk/index.html Cet ADT contient tout ce qui vous est nécessaire pour faire vos «packages» Android : - Un IDE modifié prêt à l’emploi (Eclipse) - Le SDK, contenant les librairies Android, l’émulateur etc... que nous allons utiliser avec Cordova.
  18. 18. II - Installer son environnement de dev Petite subtilité, On va aller ajouter une ligne au fichier .bash_profile de la machine. # PATH ANDROID # export PATH=${PATH}:/Users/VOTREUSER/android-sdks/platform-tools:/ Users/VOTREUSER/android-sdks/tools Ce fichier gère en partie les alias de commande sur votre Mac, il permet l’accès au SDK Android fraichement téléchargé à nos commandes Cordova
  19. 19. II - Installer son environnement de dev Pour voir les fichiers cachés sur votre Mac, lancer le terminal et taper cette petite ligne de commande et redémarrez Finder : $ defaults write com.apple.finder AppleShowAllFiles 1
  20. 20. II - Installer son environnement de dev Pour iOS rien de bien complexe dans un premier temps : Téléchargez Xcode, gratuit sur le Mac AppStore. Nous verrons la suite de la configuration dans un second temps avec le compte developpeur.
  21. 21. II - Installer son environnement de dev Et PhoneGap/Cordova, C’est la qu’on va commencer à s’amuser un peu. Les nouvelles version de PhoneGap (3.xx) /Cordova (3.xx) sont en effet simplifiée par l’utilisation de commandes qui nous permettent d’optimiser et de grouper nos dossiers / actions / builds. Ils faut donc installer ces commandes. 1) Avoir au préalable NodeJS installé. Pour pouvoir lancer les commandes de récupération de package NPM. http://nodejs.org/ Pourquoi ? C’est un standard que les grands noms du JS sont en train de mettre en place en hébergeant sur la même plateforme leurs logiciels et outils, pour rendre leur récupération plus simple mais également leurs updates/correctifs plus faciles d’accès.
  22. 22. II - Installer son environnement de dev Une fois NodeJS et la commande «npm» installée, nous allons pouvoir récupérer Cordova simplement, via la commande suivante sur notre Terminal : $ sudo npm install -g cordova Rappel et décryptage de cette commande : sudo : cela indique au terminal que vous voulez lancer la commande en tant qu’administrateur de la machine. Il peut vous être demandé un mot de passe juste après pour valider votre identité. npm : c’est notre fameux NodeJS install : c’est une sous-commande de npm, qui indique que vous voulez installer le logiciel qui va suivre. -g : et la globalité des dépendances requises cordova : le nom du logiciel à installer avec npm. Voici notre cordova !!
  23. 23. II - Installer son environnement de dev Une fois le chargement terminé, on test la réactivité de Cordova $ cordova Par la suite, c’est avec cette commande que nous allons créer, modifier nos applications natives.
  24. 24. II - Installer son environnement de dev Cela semble bon. Nous voilà prêts et armés jusqu’aux dents !
  25. 25. III - Les mains dans le cambouis Architecture de base
  26. 26. III - Architecture de base Comme nous l’avons aperçu, les applications PhoneGap ont la structure suivante :
  27. 27. III - Architecture de base Cela se traduit par un dossier «client» WWW où vous allez mettre votre code de base. C’est ici que se situe votre application (avant passage à PhoneGap/Cordova). On y déposera nos fichiers HTML/CSS/JS.
  28. 28. III - Architecture de base Et des dossiers de build par plateforme. Par exemple ici : un pour iOS, un pour Android
  29. 29. III - Les mains dans le cambouis Hello World
  30. 30. III - Hello World Maintenant, au boulot ! Créons notre première app. Utilisons pour cela la commande «create» de Cordova au sein de notre dossier de travail, elle fera tout le sale boulot pour nous... $ cordova create HelloWorld com.example.hello "Hello World" Et hop, le projet est là. Mais sans les déclinaisons plateformes pour le moment.
  31. 31. III - Hello World Créons donc la déclinaison iOS. $ cd HelloWorld //Je vais dans le dossier HelloWorld $ cordova platform add ios // Je crée la version iOS Et voilà ! Mon dossier d’application existe, je n’ai plus qu’à le compiler
  32. 32. III - Hello World Pour cela 2 solutions, La commande : (que je ne recommande pas) $ cordova build ios ou xCode, via le fichier Hello World.xcodeproj :
  33. 33. Note : «cordova prepare» Si vous modifiez le dossier www de votre projet (vos fichiers html/js/css) il vous faudra mettre à jour les versions de l’application (-> ios, ->android), pour cela il faut tout simplement lancer la commande prepare dans le projet. $ cordova prepare ios $ cordova prepare android $ cordova prepare
  34. 34. III - Hello World Voyons si il tourne, au moins sur le simulateur iPhone d’Xcode, Pour cela, sélectionnons le simulateur voulu (à droite) et cliquons sur «Run», cela va lancer un build si l’appli n’est pas déjà compilée et la lancer sur le device demandé. Petit rappel des raccourcis clavier de Xcode : CMD + MAJ + K = Clean du build CMD + B = Build sans Run CMD + R = Build si l’app n’est pas encore buildée et Run sur le device sélectionné
  35. 35. III - Hello World Et voila, ce semble bien fonctionner. Notre code HTML/JS tourne dans une app «native» iOS !
  36. 36. III - Hello World On fait de même pour Android $ cordova platform add android
  37. 37. III - Hello World Même motif, même punition: 2 solutions pour compiler Android La commande : (que je ne recommande toujours pas) $ cordova build android ou Eclipse :
  38. 38. III - Hello World Et pour lancer l’application : Clique droit sur le Projet > Run As > Android Application Cela va vous lancer l’app sur l’émulateur intégré, ou si un appareil est connecté, il vous donnera le choix.
  39. 39. III - Les mains dans le cambouis Etudions tout ça...
  40. 40. III - Etudions tout ça cordova/ CordovaLib/ Projet/ Projet.xcodeproj platform_www/ www/ commandes terminal librairie Cordova iOS librairie Projet fichier projet Xcode source js cordova pour iOS dossier de l’application html/js Architecture PhoneGap/Cordova iOS (iPhone/iPad, ...)
  41. 41. III - Etudions tout ça src/ gen/ Android 4.2.2/ Android Private Libraries assets bin cordova libs res AndroidManifest.xml librairie java Projet fichiers compilés librairie Android librairie Cordova/Android dossier de l’application html/js librairie Projet customisable ressources projets Architecture PhoneGap/Cordova Android
  42. 42. III - Les mains dans le cambouis Géolocalisation
  43. 43. III - Géolocalisation Premiers tests, voyons la géolocalisation. L’idée est d’interroger le smartphone et ses composants pour avoir la position de l’utilisateur. navigator.geolocation.getCurrentPosition(geolocationSuccess,                                          geolocationError,                                          geolocationOptions);
  44. 44. III - Géolocalisation On va ajouter le plugin cordova nécessaire au fonctionnement de la géolocation : $ cordova plugin add org.apache.cordova.geolocation Si vous avez créé toutes les plateformes (ios/android) cela s’appliquera sur l’ensemble des versions de votre application. Sinon il faudra relancer cette commande.
  45. 45. Note : Plugins Certaines fonctionnalités vous demanderont l’installation de plugins via le terminal, n’hésitez pas à vérifier la référence avant d’essayer votre build. http://cordova.apache.org/docs/en/3.3.0/guide_cli_index.md.html#The%20CommandLine%20Interface_advanced_plugin_options $ cordova plugin add org.apache.cordova.{plugin} $ cordova plugin rm org.apache.cordova.{plugin}
  46. 46. III - Géolocalisation Sur Android il faut vérifier que les permissions de l’application sont suffisantes pour exécuter la fonctionnalité, cela se passe dans AndroidManifest. AndroidManifest.xml <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> NB : le système des permissions Android est très important dans toute application, il vous sera utile de nombreuses fois de les modifier. Un élément vital d’Android.
  47. 47. III - Géolocalisation javascript var                                 }; onSuccess = function(position) { alert('Latitude: '          + position.coords.latitude          +       'Longitude: '         + position.coords.longitude         +       'Altitude: '          + position.coords.altitude          +       'Accuracy: '          + position.coords.accuracy          +       'Altitude Accuracy: ' + position.coords.altitudeAccuracy  +       'Heading: '           + position.coords.heading           +       'Speed: '             + position.coords.speed             +       'Timestamp: '         + position.timestamp                + function onError(error) {     alert('code: '    + error.code    + 'n' +           'message: ' + error.message + 'n'); } navigator.geolocation.getCurrentPosition(onSuccess, onError); 'n' + 'n' + 'n' + 'n' + 'n' + 'n' + 'n' + 'n');
  48. 48. III - Les mains dans le cambouis Notifications
  49. 49. III - Notifications Il est possible via PhoneGap / Cordova de lancer en javascript un panel de notifications machine. On peut de cette manière alerter l’utilisateur d’un choix avec une popup, un beep, une vibration etc... • • • • • notification.alert notification.confirm notification.prompt notification.beep notification.vibrate
  50. 50. III - Notifications terminal $ cordova plugin add org.apache.cordova.dialogs $ cordova plugin add org.apache.cordova.vibration javascript function alertDismissed() {     // do something } navigator.notification.alert(     'You are the winner!',  //     alertDismissed,         //     'Game Over',            //     'Done'                  // ); message callback title buttonName
  51. 51. III - Les mains dans le cambouis Camera
  52. 52. III - Camera Manipulons à présent la caméra. Le but étant de prendre une photo et de pouvoir manipuler les données de l’image. navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
  53. 53. III - Camera terminal $ cordova plugin add org.apache.cordova.camera javascript navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI }); function onSuccess(imageURI) {     var image = document.getElementById('myImage');     image.src = imageURI; } function onFail(message) {     alert('Failed because: ' + message); }
  54. 54. La suite ? Allons faire un tour sur la documentation de PhoneGap/Cordova et voyons les possibilités : Acceleromètre, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Globalization, InAppBrowser, Media, Notification, SplashScreen, Storage http://cordova.apache.org/docs/en/3.3.0/

×