Apache Cordova 3.3 de zéro

75 %
25 %
Information about Apache Cordova 3.3 de zéro
Education

Published on February 18, 2014

Author: alexandre0pereira

Source: slideshare.net

Description

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

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/

Add a comment

Related presentations

Related pages

Apache Cordova 3.3.0 - Apache Cordova

Apache Cordova 3.3.0. By: ... Cordova 3.3 went live on npm. Woohoo! This release brings with it initial support for Ubuntu Touch as well as Amazon Fire OS!
Read more

Apache Cordova 3.5.0 - Apache Cordova

We are happy to announce that Apache Cordova 3.5 has been released ... for Kindle Fire HDX tablet using Cordova 3.3.0; ... Apache Software ...
Read more

Download Apache Cordova 3.3.0 Open Source Software Package

Open Source Apache Cordova: Downloads, ... http://cordova.apache.org: Language: JavaScript, ... 3.3.0 3.2.0 3.1.0 3.0.0
Read more

Apache Cordova 3.5.0 ohne iOS 5, mit 64-Bit-ARM | jaxenter.de

Apache Cordova 3.5.0 ohne iOS 5, mit 64-Bit-ARM. 28. Mai 2014 Diana Kupfer Version 3.5 des Mobile-API-Frameworks Apache Cordova wurde ...
Read more

Apache Cordova 3.3.0 (16 décembre 2013) — Bookmarks pv

Apache Cordova 3.3.0 (16 décembre 2013) What’s new ? What’s new ? ...
Read more

Das erwartet uns in Apache Cordova 3.0 - JAXenter

Das Mobile-API-Framework Apache Cordova steht kurz vor dem 3.0-Release. Core-Entwickler Brian LeRoux hat es sich nicht nehmen lassen, ...
Read more

vulnia.com - 11 vulnerabilities found for cpe:a:apache ...

11 vulnerabilities found for "cpe:a:apache:cordova:3.3.0" Click here if you want to receive cpe:a:apache:cordova:3.3.0 security email alerts.
Read more

移动开发框架,Apache Cordova 3.3.0 发布 - OPEN资讯

Apache Cordova是一套设备API,允许移动应用的开发者使用JavaScript ... 移动开发框架,Apache Cordova 3.3.0 ...
Read more

Apache Cordova 5.0.0 | PhoneGap Spain

También tenéis ya disponible toda la documentación sobre la api en: http://cordova.apache.org/docs/en/5.0.0/ Saludos! Una Respuesta. Ivan Garcia dice:
Read more