Introduction
Cordova originally called Phonegap is a powerful framework for developing cross-platform hybrid mobile applications (Android, IOS, Windows Phone …). In Novazen, we often use it both for our offshore developments and for local companies.
This tutorial is the first in a series where we will see how to create an effective and efficient mobile application with PhoneGap. In this first step we will see how to create a Phonegap project under windows.
Installing NodeJS on Windows
NodeJs is a very popular platform for developing server and console applications with Javascript. It was built on top of Google’s Javascript V8 engine. To know more about NodeJs, you can consult this article from openclassrooms.com.
The Cordova development team chose NodeJs to manage project creation and dependency management between plugins. So she created a console-based interface for creating apps. It is this interface that we will use in this tutorial and in those that will follow.
To install NodeJs, go to http://nodejs.org/ and click on the installed link (see figure below) to download the setup. At the end of the download, double click on the setup and let yourself be guided.
Creating the project
Once NodeJs is available on our system, we have to install all the Cordova utilities needed to create our project. To do it just run the windows command prompt and type the following command
& gt; npm install -g cordova
npm (NodeJs packet manager) being the package manager for NodeJS.
Among the utilities provided we have the commands below
> cordova create // permet de créer un nouveau projet > cordova platform add // add a platform (android, ios ...) > cordova build // Allows to compile the project > cordova emulate // allows us to launch our project in an emulator
Creating the project becomes child’s play. Simply position yourself from the console in the folder that will contain our project and enter the command below
> cordova create net.novazen.monprojet MonProjet
After creating this folder the tree of our project will look like below:
|-- 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 “, contains the template for a standard PhoneGap project.
- “ plugins ” will contain the different plugins that we can install.
- “ platforms ” will receive the elements for each platform that we want to add later.
- “ merges ” contains the code specific to each platform that will be exploited according to the target platform during compilation.
Conclusion
You have just created your first Cordova project. We will see later how to use the following commands to add a platform and compile your project.
An off-shore or local mobile development project? So contact us!