GridTips: Building Your Own Mobile App With Cordova

segunda-feira, 7 de julho de 2014

Building Your Own Mobile App With Cordova

Using Cordova competence be a fastest approach for many web developers to start building a mobile application. With Cordova, we don’t need to learn a new set of programming languages, we can simply use HTML, CSS, and JavaScript.

You can compile your codes into countless mobile platforms including iOS, Android, Windows Phone and BlackBerry regulating a Phonegap build tool. The doubt now is “where to start?”

To start with, we need to emanate a “Cordova Project”. If we are a web developer who is meddlesome in building your possess mobile application, follow this post. We will uncover we a quickest approach to start a plan for building mobile focus with Cordova. Let’s only get started.

Recommended Reading: 10 Frameworks To Build Mobile Application With HTML, CSS JavaScript

Cordova CLI

Cordova comes with Command-line Interface (CLI) that includes a authority to emanate a project, obey and build a app. The Cordova CLI is accessible as a Node.js Package. So we have to implement Node.js to be means to implement it.

Assuming we have it commissioned in your computer, we can form this authority line in Terminal or Command Prompt to implement Cordova CLI.


npm implement -g cordova

This will implement a cordova authority globally; we can strech a authority anywhere in your mechanism directories. Type cordova -v to get a commissioned version.

Creating a Project

Once we have commissioned a Cordova CLI, starting a Cordova plan will be a breeze. Even but being informed with authority lines, this should be easy to follow. We can emanate a plan with a create authority followed by a plan folder name, for example:


cordova emanate hongkiatcom

This authority will download all a required files as good as some instance files to assistance us get started with a development.

Once a plan has been created, enter a plan office regulating cd name-of-the-project-directory. This folder should enclose a series of folders as follows.

The hooks folder competence enclose scripts that customize a local Cordova commands.

The merges folder competence enclose HTML, CSS, and JavaScript files for specific platforms and will overrule with those in a www folder on a focus deployment.

The platforms folder will enclose local app files when we aim to build for specific platform.

The plugins folder will enclose plugins that extend Cordova.

The www folder contains ubiquitous web files that are common opposite platforms.

Platform IDE

Before move further, we will need to have an IDE such as Xcode for develeping iOS app, Android Studio for building Android, and Visual Studio for Windows Phone. Since I’m regulating OS X and have Xcode commissioned already, we will be regulating them to supplement a iOS height in my project.

Type a following command:


cordova height supplement ios

As mentioned, this authority will supplement local files to build apps for a specified height in a authority line. After regulating a above command, we should find a folder named ios containing .xcodeproj files and a garland of other files, as follows.

If we have combined a Android platform, we shold find a folder named android instead.

Add a Project in IDE (Xcode)

Now we supplement a plan office to a IDE, that in this box is Xcode. Launch Xcode. Go to File Open menu and navigate to a height office – for instance /platforms/ios. Click Open to open a folder in Xcode.

You can cgange anything – HTML, CSS, Image, and JS – within a www folder. When it is done, click a play symbol on a tip left of Xcode to accumulate a app and benefaction it in iPhone Simulator.

Final Thought

Cordova has done formulating a mobile app easy to follow. We can build a mobile app like we build a website. In this post, we have shown we how to emanate a Cordova plan and benefaction a app in iOS simulator. There are indeed so most some-more to try in Cordova. Alas we wish that this post can assistance we get started on regulating Phonegap for building mobile app.

<!–