How to develop a PhoneGap App for Iphone and Android

Is very easy to develop an App that can be used with Iphone or Android devices, using Adobe PhoneGap and the Cordova technology!

It’s easy because we can use standard languages to develop the App! Like HTML5 and Javascript.

For this example, we will use a Website ( www.CoinMarketRank.io ) and we will convert into a PhoneGap App. For the content of the App we will use the /mobile part only.

The source code of the website can be obtained from GitHub (repository CoinMarketRank_WebSite).

PhoneGap can be downloaded from here.

Once installed in our System (Mac or Windows), we need to create a new PhoneGap project, just click on the “+” button of the PhoneGap Software.

Select a “Blank” template

And then identify the “unique ID of your app”, for example com.miexample.coinmarketrank.io . And write the Name of your app.

Now we can place the entire content of the WebSite in the “www” folder.

The www folder will be like this example:

Now we must edit the config.xml file to set some params like the name, permissions, modules to add…, images, logos, version of the App, etc.

The index page will be retrieved from the src content tag attribute. Now linked to mobile/index.html URL (inside the www folder).

Remember to activate the cordova-plugin-whitelist and the cordova-plugin-inappbrowser to enable permissions to show iframes from other websites domains, in http or https.

The logos and images are in www/images folder, you can change this pics for others with the same dimensions/pixels.

And remember to config the permissions to allow iframes from other domains

The entire source code can be downloaded or get forked from GitHub ( repo CoinMarketRank_PhoneGap)

Now we can turn on our “PhoneGap” Server. Just click on “Play” button.

The content will be displayed by default on http://localhost:3000

Now at this point we can try to “test” our web in some devices.

Just enter on http://emulate.phonegap.com/, (need to install the Chrome plugin of the Emulator to work). One installed the Chrome plugin, enter again in the address and write http://localhost:3000

Now you can try the CoinMarketRank.io platform in a testing mobile device! Very easy!

If you agree with your customizations to the Website code, we are ready to build and launch to the Marketplaces Apple Store and Google Play Store!

We will explain in the second part of this post!

Here the continuation:

• Build and test a PhoneGap App

By MrAddon