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.
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
- «www», contient le modèle d’un projet standard de PhoneGap.
- « plugins» contiendra les différents plugins que nous pourrons installer.
- « platforms» recevra les éléments relatifs à chaque plateforme que nous voudrons ajouter par la suite.
- « 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!