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
[email protected]@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