SlideShare une entreprise Scribd logo
1  sur  54
Télécharger pour lire hors ligne
Alexandre PEREIRA
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
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
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 dans une application native (iOS, Android,
Windows Phone etc...). C’est en gros une grosse webview html/css/js dans
une app.
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.
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. 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.
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.
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 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 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... :(

+

=

+

=

+

=
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.
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.
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, 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.
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
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
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.
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 !
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 que se situe votre application (avant passage à PhoneGap/Cordova).
On y déposera nos fichiers HTML/CSS/JS.
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 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
Pour cela 2 solutions,
La commande : (que je ne recommande pas)
$ cordova build ios

ou
xCode, via le fichier Hello World.xcodeproj :
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
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é
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 toujours pas)
$ cordova build android

ou
Eclipse :
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.
III - Les mains dans le cambouis
Etudions tout ça...
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, ...)
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
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 pour avoir la position de l’utilisateur.

navigator.geolocation.getCurrentPosition(geolocationSuccess,
                                         geolocationError,
                                         geolocationOptions);
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.
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}
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.
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');
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 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
$ 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
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’image.

navigator.camera.getPicture(
cameraSuccess,
cameraError,
[ cameraOptions ]
);
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);
}
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/

Contenu connexe

Tendances

Devoxx 2015, ionic chat
Devoxx 2015, ionic chatDevoxx 2015, ionic chat
Devoxx 2015, ionic chat
Loïc Knuchel
 

Tendances (20)

jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobile
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
 
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
 
Développer des applications mobiles avec phonegap
Développer des applications mobiles avec phonegapDévelopper des applications mobiles avec phonegap
Développer des applications mobiles avec phonegap
 
Paug aosp ice-creamsandwich_20120119
Paug aosp ice-creamsandwich_20120119Paug aosp ice-creamsandwich_20120119
Paug aosp ice-creamsandwich_20120119
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
 
Devoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic frameworkDevoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic framework
 
Kinect pour les développeurs Web
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Web
 
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
 
Panorama des Technologies mobiles
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobiles
 
Java Fx
Java FxJava Fx
Java Fx
 
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
 
Devoxx 2015, ionic chat
Devoxx 2015, ionic chatDevoxx 2015, ionic chat
Devoxx 2015, ionic chat
 
Java Fx Rapport
Java Fx RapportJava Fx Rapport
Java Fx Rapport
 
Développement Cross-Platform avec Titanium Mobile
Développement Cross-Platform avec Titanium MobileDéveloppement Cross-Platform avec Titanium Mobile
Développement Cross-Platform avec Titanium Mobile
 
Breizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic FrameworkBreizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic Framework
 
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
 
Booster votre application Windows Phone 8
Booster votre application Windows Phone 8Booster votre application Windows Phone 8
Booster votre application Windows Phone 8
 
MobileDay - Parcours 1 Hybride (Cordova)
MobileDay - Parcours 1 Hybride  (Cordova)MobileDay - Parcours 1 Hybride  (Cordova)
MobileDay - Parcours 1 Hybride (Cordova)
 

En vedette

symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
Fabien Potencier
 
Cross Platform Mobile Application Architecture
Cross Platform Mobile Application ArchitectureCross Platform Mobile Application Architecture
Cross Platform Mobile Application Architecture
Derrick Bowen
 

En vedette (20)

Applications multi plateformes avec Cordova, HTML5 et Javascript
Applications multi plateformes avec Cordova, HTML5 et JavascriptApplications multi plateformes avec Cordova, HTML5 et Javascript
Applications multi plateformes avec Cordova, HTML5 et Javascript
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)
 
Android - Open Source Bridge 2011
Android - Open Source Bridge 2011Android - Open Source Bridge 2011
Android - Open Source Bridge 2011
 
Phonegap
PhonegapPhonegap
Phonegap
 
Hybrid App Development with PhoneGap
Hybrid App Development with PhoneGapHybrid App Development with PhoneGap
Hybrid App Development with PhoneGap
 
Django by mrjmad
Django by mrjmadDjango by mrjmad
Django by mrjmad
 
Building a MongoDB App with Perl
Building a MongoDB App with PerlBuilding a MongoDB App with Perl
Building a MongoDB App with Perl
 
Cordova: APIs and instruments
Cordova: APIs and instrumentsCordova: APIs and instruments
Cordova: APIs and instruments
 
A python web service
A python web serviceA python web service
A python web service
 
Building an API with Django and Django REST Framework
Building an API with Django and Django REST FrameworkBuilding an API with Django and Django REST Framework
Building an API with Django and Django REST Framework
 
Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native Application
 
All About Phonegap
All About Phonegap All About Phonegap
All About Phonegap
 
Devoxx 2015, Atelier Ionic - 09/04/2015
Devoxx 2015, Atelier Ionic - 09/04/2015Devoxx 2015, Atelier Ionic - 09/04/2015
Devoxx 2015, Atelier Ionic - 09/04/2015
 
REST Easy with Django-Rest-Framework
REST Easy with Django-Rest-FrameworkREST Easy with Django-Rest-Framework
REST Easy with Django-Rest-Framework
 
Ionic bbl le 19 février 2015
Ionic bbl le 19 février 2015Ionic bbl le 19 février 2015
Ionic bbl le 19 février 2015
 
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
symfony: Un Framework Open-Source pour les Entreprises (Solutions Linux 2008)
 
Python et les bases de données non sql
Python et les bases de données non sqlPython et les bases de données non sql
Python et les bases de données non sql
 
Cross Platform Mobile Application Architecture
Cross Platform Mobile Application ArchitectureCross Platform Mobile Application Architecture
Cross Platform Mobile Application Architecture
 
Apps with Apache Cordova and Phonegap
Apps with Apache Cordova and PhonegapApps with Apache Cordova and Phonegap
Apps with Apache Cordova and Phonegap
 

Similaire à Apache Cordova 3.3 de zéro

Similaire à Apache Cordova 3.3 de zéro (20)

Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !Coder sans coder : Delphi en mode no code !
Coder sans coder : Delphi en mode no code !
 
Hello droid
Hello droidHello droid
Hello droid
 
Meetup sencha
Meetup senchaMeetup sencha
Meetup sencha
 
Chap android
Chap androidChap android
Chap android
 
Xamarin notes- en français
Xamarin notes- en françaisXamarin notes- en français
Xamarin notes- en français
 
1-android.pdf
1-android.pdf1-android.pdf
1-android.pdf
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphi
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google android
 
.NET DotNet CF - 1
.NET DotNet CF - 1.NET DotNet CF - 1
.NET DotNet CF - 1
 
Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4Support developpement applications mobiles avec ionic v3 et v4
Support developpement applications mobiles avec ionic v3 et v4
 
Ionic
IonicIonic
Ionic
 
Développer une application pour Android TV avec Delphi
Développer une application pour Android TV avec DelphiDévelopper une application pour Android TV avec Delphi
Développer une application pour Android TV avec Delphi
 
Diffuser nos logiciels et leurs mises à jour
Diffuser nos logiciels et leurs mises à jourDiffuser nos logiciels et leurs mises à jour
Diffuser nos logiciels et leurs mises à jour
 
Hady bah l3
Hady bah l3Hady bah l3
Hady bah l3
 
Les ateliers android_1_vers2015
Les ateliers android_1_vers2015Les ateliers android_1_vers2015
Les ateliers android_1_vers2015
 
Les ateliers android_1_vers2015
Les ateliers android_1_vers2015Les ateliers android_1_vers2015
Les ateliers android_1_vers2015
 
Les ateliers android_1_vers2015
Les ateliers android_1_vers2015Les ateliers android_1_vers2015
Les ateliers android_1_vers2015
 
CodeBuilder_DevOpsCenter.pptx
CodeBuilder_DevOpsCenter.pptxCodeBuilder_DevOpsCenter.pptx
CodeBuilder_DevOpsCenter.pptx
 
1 tours horizon
1 tours horizon1 tours horizon
1 tours horizon
 

Dernier

Dernier (15)

rapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdfrapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdf
 
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptxGHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
 
Exemple de grille d'audit 5S, check liste Audit
Exemple de grille d'audit 5S, check liste AuditExemple de grille d'audit 5S, check liste Audit
Exemple de grille d'audit 5S, check liste Audit
 
Quitter la nuit. pptx
Quitter          la        nuit.    pptxQuitter          la        nuit.    pptx
Quitter la nuit. pptx
 
Quitter la nuit. pptx
Quitter        la             nuit.   pptxQuitter        la             nuit.   pptx
Quitter la nuit. pptx
 
Nathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre françaiseNathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre française
 
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptxGHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
 
Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"
 
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
PLANNING HEBDO ET CR LYCEE COUDON 21 MAI2024
 
Fiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciationFiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciation
 
Texte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigéesTexte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigées
 
Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024
 
PowerPoint-de-Soutenance-de-TFE-infirmier.pdf
PowerPoint-de-Soutenance-de-TFE-infirmier.pdfPowerPoint-de-Soutenance-de-TFE-infirmier.pdf
PowerPoint-de-Soutenance-de-TFE-infirmier.pdf
 
Un petit coin etwinning- Au fil des cultures urbaines
Un petit coin  etwinning- Au fil des cultures urbainesUn petit coin  etwinning- Au fil des cultures urbaines
Un petit coin etwinning- Au fil des cultures urbaines
 
Àma Gloria.pptx Un film tourné au Cap Vert et en France
Àma Gloria.pptx   Un film tourné au Cap Vert et en FranceÀma Gloria.pptx   Un film tourné au Cap Vert et en France
Àma Gloria.pptx Un film tourné au Cap Vert et en France
 

Apache Cordova 3.3 de zéro

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