Alexandre PEREIRA

Alexandre PEREIRAHead 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.comalex@foxhype.com

http://www.linkedin.com/in/pereiraalexandre

@alxndr_pereira

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

Sommaire

C’est quoi PhoneGap ?

?

I - Généralités

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.

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.

I - C’est quoi PhoneGap ?

PhoneGap & Cordova I - Généralités

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.

Lequel utiliser ?

Pour le moment nous allons partir d’un socle Cordova, car il est plus récent : Version 3.3En 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.

I - PhoneGap & Cordova

Pré-requis et logicielsII - Les Bases

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.

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

II - Pré-requis et logicielsProblè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... :(

+

+

+

=

=

=

II - Pré-requis et logicielsMa 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.

II - Pré-requis et logicielsCompte 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.

Installer son environnement de devII - Les Bases

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... quenous allons utiliser avec Cordova.

II - Installer son environnement de devPetite 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

II - Installer son environnement de dev

$ defaults write com.apple.finder AppleShowAllFiles 1

Pour voir les fichiers cachés sur votre Mac, lancer le terminal et taper cette petite ligne de commande et redémarrez Finder :

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 unsecond temps avec le compte developpeur.

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.

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 !!

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.

II - Installer son environnement de dev

Cela semble bon. Nous voilà prêts et armés jusqu’aux dents !

Architecture de baseIII - Les mains dans le cambouis

III - Architecture de baseComme 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 que se situe votre application (avant passage à PhoneGap/Cordova).On y déposera nos fichiers HTML/CSS/JS.

III - Architecture de baseEt des dossiers de build par plateforme.Par exemple ici : un pour iOS, un pour Android

Hello WorldIII - Les mains dans le cambouis

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.

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

III - Hello World

$ cordova build ios

Pour cela 2 solutions,

La commande : (que je ne recommande pas)

ouxCode, via le fichier Hello World.xcodeproj :

Note : «cordova prepare»

$ cordova prepare ios$ cordova prepare android

$ 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.

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 buildCMD + B = Build sans RunCMD + R = Build si l’app n’est pas encore buildée et Run sur le device sélectionné

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

$ cordova build android

Même motif, même punition: 2 solutions pour compiler Android

La commande : (que je ne recommande toujours pas)

ouEclipse :

III - Hello WorldEt pour lancer l’application :

Clique droit sur le Projet > Run As > Android ApplicationCela va vous lancer l’app sur l’émulateur intégré, ou si un appareil est connecté, il vous donnera le choix.

Etudions tout ça...III - Les mains dans le cambouis

III - Etudions tout ça

cordova/CordovaLib/

Projet/Projet.xcodeprojplatform_www/

www/

commandes terminal librairie Cordova iOSlibrairie Projetfichier projet Xcodesource js cordova pour iOSdossier de l’application html/js

Architecture PhoneGap/CordovaiOS (iPhone/iPad, ...)

III - Etudions tout ça

src/gen/

Android 4.2.2/Android Private Libraries

assets

bincordova

libsres

AndroidManifest.xml

librairie java Projetfichiers compiléslibrairie Androidlibrairie Cordova/Androiddossier de l’application html/jslibrairie Projet customisable

ressources projets

Architecture PhoneGap/CordovaAndroid

GéolocalisationIII - Les mains dans le cambouis

Premiers tests, voyons la géolocalisation.L’idée est d’interroger le smartphone et ses composants pour avoir la position de l’utilisateur.

III - Géolocalisation

navigator.geolocation.getCurrentPosition(geolocationSuccess,                                         geolocationError,                                         geolocationOptions);

III - Géolocalisation

On va ajouter le plugin cordova nécessaire au fonctionnementde 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.

Note : Plugins

Certaines fonctionnalités vous demanderont l’installation deplugins via le terminal, n’hésitez pas à vérifier la référenceavant d’essayer votre build.

http://cordova.apache.org/docs/en/3.3.0/guide_cli_index.md.html#The%20Command-Line%20Interface_advanced_plugin_options

$ cordova plugin add org.apache.cordova.{plugin}$ cordova plugin rm org.apache.cordova.{plugin}

III - Géolocalisation

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" />

Sur Android il faut vérifier que les permissions de l’application sontsuffisantes pour exécuter la fonctionnalité, cela se passe dansAndroidManifest.

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.

III - Géolocalisation

var onSuccess = function(position) {    alert('Latitude: '          + position.coords.latitude          + '\n' +          'Longitude: '         + position.coords.longitude         + '\n' +          'Altitude: '          + position.coords.altitude          + '\n' +          'Accuracy: '          + position.coords.accuracy          + '\n' +          'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +          'Heading: '           + position.coords.heading           + '\n' +          'Speed: '             + position.coords.speed             + '\n' +          'Timestamp: '         + position.timestamp                + '\n');};

function onError(error) {    alert('code: '    + error.code    + '\n' +          'message: ' + error.message + '\n');}

navigator.geolocation.getCurrentPosition(onSuccess, onError);

javascript

NotificationsIII - Les mains dans le cambouis

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

III - Notifications

terminal

function alertDismissed() {    // do something}

navigator.notification.alert(    'You are the winner!',  // message    alertDismissed,         // callback    'Game Over',            // title    'Done'                  // buttonName);

javascript

$ cordova plugin add org.apache.cordova.dialogs$ cordova plugin add org.apache.cordova.vibration

CameraIII - Les mains dans le cambouis

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 ]

);

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);}

javascript

III - Camera

terminal

$ cordova plugin add org.apache.cordova.camera

http://cordova.apache.org/docs/en/3.3.0/

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