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

phonegap-logo

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

phone_gap_dev

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.

Captura de pantalla 2018-08-04 a las 18.53.44

Select a “Blank” template

Captura de pantalla 2018-08-04 a las 18.55.06

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

Captura de pantalla 2018-08-04 a las 18.55.50

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

Captura de pantalla 2018-08-04 a las 18.59.57

The www folder will be like this example:

Captura de pantalla 2018-08-04 a las 19.00.54

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).

Captura de pantalla 2018-08-04 a las 19.04.02

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.

Captura de pantalla 2018-08-04 a las 19.07.24

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

Captura de pantalla 2018-08-04 a las 19.09.21

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.

Captura de pantalla 2018-08-04 a las 19.14.16

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

Captura de pantalla 2018-08-04 a las 19.16.43

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

Captura de pantalla 2018-08-04 a las 19.18.27

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:

By MrAddon

 

 

Advertisements
Posted by:.

2 replies on “How to develop a PhoneGap App for Iphone and Android

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s