Sélectionner une page

Comment installer Cordova, Android SDK, PhoneGap sur Mac Os pour créer une application mobile sur Android

Tout est dans le titre! Je vais vous expliquer comment installer Cordova, le SDK de Android, PhoneGap sur Mac Os pour créer une application mobile sur Android.

Tout d’abord pour ceux qui découvrent, Cordova est le nom du framework open-source donné par Apache permettant de créer des applications mobiles sur multiple Os (Android, iOs, Windows, Firefox Os, Ubuntu…)
Le tout en utilisant le language du Web HTML, CSS, JavaScript et en incluant des fonctions permettant d’utiliser des fonctions du téléphone mobile (position GPS, Albums photos, Contacts, Vibreur…)

Le Android SDK, permettrai de compiler et donc je construire le fichier final à installer sur votre téléphone mobile ou à envoyer en validation sur le store.

PhoneGap est l’ancien nom donné au projet Cordova. La différence au jour d’aujourd’hui est qu’il est utilisé pour faire de la compilation en ligne et donc sans avoir besoin d’installer les SDK des Os. Il met aussi à disposition un logiciel permettant la création de projet d’application mobile et de le tester directement sur votre téléphone en utilisant une application intermediaire.

Aller, c’est parti!

Installation de Cordova

1. Cordova fonctionne avec la plateforme Node.js. Vous devez donc en premier installer Node.js en allant sur ce lien : http://nodejs.org

Une fois téléchargé et installé, vérifier que Node.js est bien en place, pour cela ouvrer une fenêtre du Terminal et taper la commande suivante :

node --version

Si un numéro de version apparait, c’est bon!

2. Installer Git. Il s’agit d’un contrôleur de version utilisée par Cordova. Télécharger et installer à partir de cette adresse : http://git-scm.com

3. Installer Cordova. Nous allons installer Cordova en utilisant le Node Package Manager (npm).
Taper la commande suivante sur votre Terminal :

sudo npm install -g cordova

Tester la bonne installation en tapant la commande suivante :

cordova --version

Si vous voyez le numéro de version, c’est fait! vous avez installé Cordova sur votre ordinateur.

Installation du SDK Android

Pour développer et compiler des applications Android, vous devez installer Java, Ant build tool et le SDK Android.

1. Installer Java. Vous devez avoir au moins la version 1.6 de Java.
En général Java devrait être déjà présent dans votre ordinateur. Vérifier en tapant la commande suivante :

javac -version

Si un numéro de version supérieur ou égale à 1.6 apparait, c’est bon!

Sinon, télécharger et installer à partir de ce lien : https://java.com/fr/download/mac_download.jsp

Vérifier l’installation en tapant à nouveau la commande précedente.

2. Installer AntApache Ant est un compilateur pour Java, qui est utilisé pour Cordova et le Android SDK. Nous allons utiliser Homebrew pour installer Ant.

Tout d’abord, vérifions s’il n’est pas déjà installé en tapant la commande suivante :

ant -version

Si un numéro de version apparait, c’est bien vous pouvez passer à l’étape suivante.

Sinon, continuons en vérifiant si Homebrew est déjà installé pour pouvoir installer Ant facilement. Taper la commande suivante :

brew --version

Si vous n’avez pas de numéro de version, taper la commande suivante pour installer Homebrew :

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew update

Maintenant, on installe Ant avec la commande suivante :

brew install ant

On vérifie la bonne installation en tapant la commande suivante :

ant -version

3. Installer Android SDK. Nous allons maintenant installer le Android SDK Tools only, en le téléchargeant via le lien suivant : http://developer.android.com/sdk/index.html#Other

Décompresser l’archive téléchargée et placer le dans un dossier (exemple: /Users/johan/android-sdk-macosx/)

Il faut maintenant ajouter les chemins d’environnement des dossiers tools et platform-tools.
Pour cela vous devez aller avec le Terminal dans votre dossier « home », et ouvrir le fichier contenant les chemins d’environnement pour ajouter les 2 chemins. Ce fichier est un fichier caché (précédé donc d’un point .) sur mon ordinateur il s’agit de .profile. Nous allons l’éditer en tapant les commandes suivantes :

cd ~
open -e .profile

Vous devriez avoir une ligne commençant par cela :

export PATH=$PATH:/opt/local/bin

A la fin de cette ligne vous allez ajouter les 2 chemins vers les dossiers tools et platform-tools (chaque chemin étant séparé par deux points « : » )

:/Users/johan/android-sdk-macosx/tools:/Users/johan/android-sdk-macosx/platform-tools

Sauvegarder le fichier et fermez le.

Retourner sur le Terminal et taper la commande :

cd ~
. .profile

Pour vérifier que tout est bon, taper la commande suivante :

adb version

Le numéro de version doit apparaitre.

Maintenant vous pouvez installer les différents package de Android SDK en tapant sur le Terminal :

android

Le SDK Manager s’ouvre, assurez vous que « Android 4.4.2 (API 19) » est coché et installez les packages.

Voila c’est tout bon! Si vous êtes coincés ou qu’une étape n’est pas clair, jeté un oeil sur la documentation Cordova ici : http://cordova.apache.org/docs/en/5.0.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide

Installation PhoneGap Desktop App

On a de la chance, aujourd’hui on nous met à disposition un logiciel permettant de créer en quelques cliques un projet d’application et de pouvoir le tester rapidement sur notre telephone mobile. Pour cela il faut télécharger et installe le programme PhoneGap Desktop App : http://phonegap.com/blog/2015/03/02/phonegap-app-desktop-0-1-2/

Créer ou choisissez un projet existant et lancer le. En bas de la fenêtre on vous indique que le server est en ligne avec une adresse IP et un port. C’est bien entendu accessible via le navigateur de votre navigateur mais les fonctionnalisées mobiles n’y sont pas.

Avec votre téléphone android, installer l’application phonegap developerhttps://play.google.com/store/apps/details?id=com.adobe.phonegap.app&hl=fr

Lancer le et indiquer l’IP et le port donné pour votre projet. Voilà! votre application s’affiche sur votre mobile et vous pouvez le tester!

0 commentaires

Soumettre un commentaire

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