MAROC NEW TECHNOLOGIES: Tutoriel : PhoneGAP

Ce tutoriel est destiné aux Développeurs qui veulent créer des applications mobile sans s’investir dans les différents langages de programmation pour les différentes plateformes Mobiles (Android, iOS, Windows phone, ...), et qui sont déjà familiarisés avec les technologies HTML, CSS et JavaScript.

On a besoin d’une moulinette qui fait l’affaire, Le Framework CORDOVA.

Pour ceux qui ne savent pas ce que c’est que :

Apache Cordova ou plus anciennement Apache Callback ou PhoneGap, est un Framework open-source développé par la Fondation Apache.

Il permet de créer des applications mobiles pour différentes plates-formes (Android, iOS, Windows 8...) en HTML, CSS et JavaScript.

Ce tutoriel va vous montrer les étapes d’installation de l’environnement de travail qui permet la création de votre première application mobile sur la PlateForme Android.

Pour les autres plateformes, ça va venir bientôt (inchallah).

Préparation de l’environnement :

INSTALLATION DE JAVA

- JRE : http://www.java.com/fr/download/

- JDK : http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

Il faut alimenter la variable d’environnement PATH par les chemins d’installation de JRE et JDK :

Dans notre cas : C:\Program Files\Java\jre7\bin ; C:\Program Files\Java\jdk1.7.0\bin;

Vous devez aussi créer une variable d’environnement : JAVA_HOME

INSTALLATION DE SDK ANDROID et le plugin ADT

- Le développement des Applications Android à besoin d’un Kit de développement SDK ANDROID.

Pour Le télécharger : http://developer.android.com/sdk/index.html

Vous devez l’installer et choisir la version des API, aujourd’hui nous sommes en version 24.

- Le plugin ADT à partir du lien : http://developer.android.com/sdk/eclipse-adt.html#installing

Modification du PATH environment variable on Windows :

- Ajouter les chemins suivants dans la variable environnement PATH :

C:\android-sdk-windows\platform-tools;C:\android-sdk-windows\tools

(C:\android-sdk-windows est le chemin windows du dossier d’installation de SDK)

INSTALLATION : PHONEGAP - CORDOVA

PhoneGap : Installation Offline :

- Décompresser l'archive téléchargé : http://phonegap.com/install/

Il contient tous les packages des différents PlateFormes (ios,Android, windows

phone, Blackberry)

Cordova : Installation Online via Command CLI : npm –g cordova

N.B : On va travailler par la suite avec CORDOVA :

Création Application Cordova :

- Se positionner dans votre espace de travail : Ex: D:\My_Android_App\

Commande : > cordova create <project_folder_path> <package_name> <project_name>

<project_folder_path> : Chemin pour votre projet Cordova Android

<package_name> : nom du Package, ex : com.Mon_Entreprise.Nom_Mon_App

<project_name> : Nom du Projet, ex : MonApp (pas d’espaces)

Ex : cordova create hello com.kitane.hello AhlaneWaSahlane

Vérifier la création du dossier : D:\My_Android_App\workspace\hello

Depuis le dossier crée exécuter la commande : cordova platform add android

Résultat : Le dossier \platforms\android va être crée dans le dossier de l’application.

Normalement vous devez avoir :

Pour Les IDE de travail, On a le choix entre : ECLIPSE, APTANA Studio, Ou Android Studio

D’abords on commence par :

Apache ANT :

Ant est un logiciel créé par la fondation Apache qui vise à automatiser les opérations répétitives du développement de logiciel telles que la compilation, la génération de documents (Javadoc) ou l'archivage au format JAR, à l'instar des logiciels Make.

- Décompresser l'archive : http://ant.apache.org/bindownload.cgi

Il faut alimenter de la même façon qu’avant la variable PATH par : D:\DEV\JAVA\apache-ant-1.8.2\bin;

Utilisation Eclipse :

Téléchargement : http://www.eclipse.org/downloads/ et installation (Installation Standard).

- Installer le plugin ADT (Android Development Tools)

Téléchargement à partir du lien : http://developer.android.com/sdk/eclipse-adt.html#installing

Utilisation Aptana :
Aptana Studio est un environnement de développement intégré orienté web, multiplate-forme et open-source.

Il facilite l'écriture du code en fournissant des aides à la saisie pour le JavaScript, l'HTML, les CSS, PHP et Python.

On peut résumer pour notre cas et dire : Aptana studio (Eclipse + plugin web) :

- Téléchargement Aptana : http://www.aptana.com/products/studio3/download.html

- (Installation Standard)

Si Réception d’erreur d’installation due principalement à une connexion internet inexistante, possibilité de l’installer offline (il faut installer d'abords git for windows)

Utilisation Aptana :

Aptana studio (eclipse + plugin web) :

- installer Aptana

- si erreur connexion internet (installer d'abords git for windows : https://msysgit.github.io/)

Ajout du Projet dans ECLIPSE : Hello

Dans Eclipse :

New > Project. Ensuite, choisissez dans le dossier « Android » la ligne « Android Project from Existing Code » et cliquez sur « Next »

- Choisissez alors le/les dossiers de vos projets, puis sélectionnez l’application récemment créée (notre exemple : Hello).

Reste à Exécuter l’application :

Bouton droit sur l’application et RUN AS « Android Application »

Il faut Préparer d’abord votre mobile, il s’agit de créer un virtuel via l’outil « AVD Manager »