Tutoriel Vidéo Cordova Installer et configurer Cordova

Télécharger la vidéo

Je vous propose de découvrir ensemble comment utiliser Apache Cordova (anciennement PhoneGap). Cette technologie va vous permettre de créer des applications mobiles en utilisant les technologies web que vous avez l'habitude d'utiliser tous les jours.

Le principe est relativement simple : créer une application qui ouvre une Webview contenant vos fichiers HTML. Cette Webview permet tout de même d'accéder à certaines API du téléphone comme l'accéléromètre, la boussole…

Installation de Cordova

Cordova utilise nodejs donc l'installation est très simple et rapide

  1. Installer NodeJS si vous ne l'avez pas déjà
  2. Depuis le terminal (ou cmd pour windows) lancez la commande

npm install -g cordova

Et voila Cordova est installé, mais il vous faut maintenant installer les SDK spécifiques aux plateformes que vous comptez utiliser.

SDK iOS

Pour faire du développement destiné au iphone et ipad il vous faudra un Mac et le logiciel XCode (ne cherchez pas de solution, si vous avez un PC windows vous êtes foutu :D). Il n'y a rien d'autre à installer, XCode installe toutes les librairies dont vous aurez besoin pour la suite

SDK Android

L'installation des SDK Android est, quand à elle, beaucoup plus complexe.

Dans un premier temps vous devez installer Java Development Kit et ajouter ensuite le dossier bin du jdk dans le PATH de votre environnement. Pour éviter les problèmes par la suite vous pouvez aussi créer une nouvelle variable d'environnement JAVA_HOME pointant vers la racine du dossier jdk.

Ensuite il vous faut installer le SDK Android et ajouter les dossiers tools et platform-tools dans le PATH. Si vous êtes sur mac vous pouvez le faire en éditant ~/.bash_profile et en ajoutant la ligne

export PATH=${PATH}:/DOSSIER/adt-bundle/sdk/platform-tools:/DOSSIER/adt-bundle/sdk/tools

Enfin, vous devez installer Apache Ant et l'ajouter au PATH de votre système.

Pour tester que tout fonctionne bien tenter de taper les commandes java, ant et android, si vous avez un commande inconnue c'est que vous avez loupé une étape.

Créer et compiler sa première application

Maintenant que tout est installé, on est prêt pour créer notre première application (ça se passe en ligne de commande).

cordova create DOSSIER fr.domaine.app "Le nom de mon application"

Cette commande va créer votre nouveau dossier avec un sous dossier www contenant vos fichiers HTML, CSS et Javascript. Ce sont ces fichiers que vous pourrez modifier pour créer votre application. Ensuite il faut ajouter une plateforme (depuis le dossier qui vient d'être créée)

cordova platforms add ios cordova platforms add android

Maintenant on peut compiler notre application, cette commande doit être relancée à chaque fois que vous modifiez un fichier HTML.

cordova build // Ou cordova build ios cordova build android

Enfin si lus souhaitez tester votre application

cordova run android cordova run iOS cordova emulate android

Attention, si vous souhaitez tester depuis l'émulateur android il vous faudra dans un premier tant lancer l'émulateur manuellement. Pour cela vous pouvez taper la commande android et créer un nouvel AVD (Android Virtual Device) et lancer l'émulateur depuis cette interface.