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

1. Alexandre PEREIRA

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. 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. I - Généralités
C’est quoi PhoneGap ?
?

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. 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. I - Généralités
PhoneGap & Cordova

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. 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. II - Les Bases
Pré-requis et logiciels

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. 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. 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. 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. 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. II - Les Bases
Installer son environnement de dev

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. 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. 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. 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. 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. 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. 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. II - Installer son environnement de dev
Cela semble bon. Nous voilà prêts et armés jusqu’aux dents !

25. III - Les mains dans le cambouis
Architecture de base

26. III - Architecture de base
Comme nous l’avons aperçu, les applications PhoneGap ont la structure suivante :

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. III - Architecture de base
Et des dossiers de build par plateforme.
Par exemple ici : un pour iOS, un pour Android

29. III - Les mains dans le cambouis
Hello World

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. 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. 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. 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. 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. III - Hello World
Et voila, ce semble bien fonctionner.
Notre code HTML/JS tourne dans une app «native» iOS !

36. III - Hello World
On fait de même pour Android
$ cordova platform add android

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. 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. III - Les mains dans le cambouis
Etudions tout ça...

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. 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. III - Les mains dans le cambouis
Géolocalisation

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. 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. 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. 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. 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. III - Les mains dans le cambouis
Notifications

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. 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. III - Les mains dans le cambouis
Camera

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