Création d’un projet Cordova / Phonegap 3.x sous windows

Introduction Cordova originellement appelé Phonegap est un framework puissant qui permet de développer des applications mobiles hybrides multiplateformes (Android, IOS, Windows Phone…). A Novazen, nous l’utilisons souvent tant pour nos développements offshore que pour des entreprises locales. Ce tutoriel est le premier d’une série ou l’on verra ensemble comment créer une application mobile efficace et performante […]
NOVAZEN > Blog > Création d’un projet Cordova / Phonegap 3.x sous windows

Introduction

Cordova originellement appelé Phonegap est un framework puissant qui permet de développer des applications mobiles hybrides multiplateformes (Android, IOS, Windows Phone…). A Novazen, nous l’utilisons souvent tant pour nos développements offshore que pour des entreprises locales.

Ce tutoriel est le premier d’une série ou l’on verra ensemble comment créer une application mobile efficace et performante avec PhoneGap. Dans cette première étape nous verrons ensemble comment créer un projet Phonegap sous windows.

Installation de NodeJS sous windows

NodeJs est une plateforme très populaire permettant de développer des applications serveur et console avec du Javascript. Il a été construit au-dessus du moteur Javascript V8 de Google. Pour en savoir plus sur NodeJs, vous pouvez consulter cet article du site openclassrooms.com.

L’équipe de développement de Cordova a choisi NodeJs pour gérer la création de projet et la gestion des dépendances entre les plugins. Elle a donc créé une interface en mode console pour la création d’application. C’est cette interface que nous utiliserons dans ce tutoriel et dans ceux qui suivront.

Pour installer NodeJs, se rendre sur site à l’adresse http://nodejs.org/ et cliquer sur le lien installé (voir la figure ci-dessous) pour télécharger le setup. A la fin du téléchargement, double cliquez sur le setup et laissez-vous guider.

nodeJS

Création du projet

Une fois NodeJs disponible sur notre système, nous devons installer tous les utilitaires Cordova nécessaires à la création de notre projet. Pour le faire il suffit de lancer l’invite de commande windows et taper la commande suivante

> npm install -g cordova

npm (NodeJs packet manager) étant le gestionnaire des paquets pour NodeJS.

Parmi les utilitaires fournis nous avons les commandes ci-dessous

> cordova create // permet de créer un nouveau projet
> cordova platform add // permet d’ajouter une plateforme (android, ios …
> cordova build // Permet compiler le projet
> cordova emulate // permet de lancer notre projet dans un émulateur

La création du projet devient ensuite un jeu d’enfant. Il faut tout simplement se positionner à partir de la console dans le dossier qui contiendra notre projet et de saisir la commande ci-dessous

> cordova create net.novazen.monprojet MonProjet

Après avoir créé ce dossier l’arborescence de notre projet se présentera comme ci-dessous :

|-- merges
|-- package.json
|-- platforms
|-- plugins
`-- www
    |-- config.xml
    |-- css
    |   `-- index.css
    |-- img
    |   `-- cordova.png
    |-- index.html
    |-- js
    |   `-- index.js
    |-- res
    |   |-- icon
    |   |   |-- cordova_128.png
    |   |   |-- cordova_16.png
    |   |   |-- cordova_24.png
    |   |   |-- cordova_256.png
    |   |   |-- cordova_32.png
    |   |   |-- cordova_48.png
    |   |   |-- cordova_512.png
    |   |   |-- cordova_64.png
    |   |   |-- cordova_android_36.png
    |   |   |-- cordova_android_48.png
    |   |   |-- cordova_android_72.png
    |   |   |-- cordova_android_96.png
    |   |   |-- cordova_bb_80.png
    |   |   |-- cordova_ios_114.png
    |   |   |-- cordova_ios_144.png
    |   |   |-- cordova_ios_57.png
    |   |   `-- cordova_ios_72.png
    |   `-- screen
    |       |-- android_hdpi_landscape.png
    |       |-- android_hdpi_portrait.png
    |       |-- android_ldpi_landscape.png
    |       |-- android_ldpi_portrait.png
    |       |-- android_mdpi_landscape.png
    |       |-- android_mdpi_portrait.png
    |       |-- android_xhdpi_landscape.png
    |       |-- android_xhdpi_portrait.png
    |       |-- blackberry_transparent_300.png
    |       |-- blackberry_transparent_400.png
    |       |-- ipad_landscape.png
    |       |-- ipad_portrait.png
    |       |-- ipad_retina_landscape.png
    |       |-- ipad_retina_portrait.png
    |       |-- iphone_landscape.png
    |       |-- iphone_portrait.png
    |       |-- iphone_retina_landscape.png
    |       |-- iphone_retina_portrait.png
    |       `-- windows_phone_portrait.jpg
    |-- spec
    |   |-- helper.js
    |   |-- index.js
    |   `-- lib
    |       `-- jasmine-1.2.0
    |           |-- MIT.LICENSE
    |           |-- jasmine-html.js
    |           |-- jasmine.css
    |           `-- jasmine.js
    `-- spec.html

  1. «www», contient le modèle d’un projet standard de PhoneGap.
  2. « plugins» contiendra les différents plugins que nous pourrons installer.
  3. « platforms» recevra les éléments relatifs à chaque plateforme que nous voudrons ajouter par la suite.
  4. « merges» contient le code spécifique à chaque plateforme qui sera exploité en fonction de la plateforme cible lors de la compilation.

Conclusion

Vous venez de créer votre premier projet Cordova. Nous verrons dans la suite comment utiliser les commandes suivantes pour ajouter une plateforme et compiler votre projet.

Un projet de développement mobile offhsore ou locale? Alors contactez nous!

Laisser un commentaire