Build Android and IOS Mobile App Using Javascript With Cordova

Cordova Build Android and IOS Mobile App Using Javascript, JQuery 

This guide is for you to create mobile app using Cordova, which means it will use Javascript, Html and CSS, not Java or Swift. Your codes will be one single code base for both Android and IOS, that's the other advantage. I know that to create a mobile app if your background is coming from web front end developer  it will be really challenging writing mobile app using native codes, but luckily, with Cordova we can create mobile apps by just using HTML, Javascript and CSS.

1. Install Nodejs

You are going to write Javascript based application, so you need Nodejs to be on your computer. If you don't know how to install Nodejs on your machine, you can read here (how to install Nodejs)

2. Install Cordova CLI

Cordova CLI is a command line tool for working with Cordova application development, from initiating the project structure to build the binary APK file ready to distribute to Play Store. To Install Cordova CLI simply:

npm install -g cordova

3. Create the project skeleton

After you have Cordova installed, now we can start by creating our project directory structure, we don't need to do it manually, by using one line Cordova CLI command, you can create it automatically.

cordova create YourAppName

Now you have YourAppName directory created, you can start writing code under YourAppName/www, it is a standard web application folder with index.html as its main entry point.

4. Test it on browser

Yes it is mobile app, but you can test on web browser to get the standard browser tools like inspections tools, you can monitor the HTML tree, classes, CSS styles, and network processes. To run your app in browser, add a browser platform to your project.

cd YourAppName
cordova platform add browser

And then run it on browser, it will automatically open the browser on localhost:8080

cordova run browser

5. Add android platform

We can test our application using real Android device, firstable add the android cordova platform to your project.

cordova platform add android

To add IOS platform is the same, just by replace android with ios

If you want to remove the platform, this example how to remove android platform (to remove browser, just replace it with browser). You can then adding it again if you want to.

cordova platform remove android

6. Using Phonegap to test in real device

Now using real device download Phonegap app, install the app on your mobile device. Download Phonegap here, Phonegap Developer

We need to install Phonegap CLI first, simply using npm install:

npm install -g phonegap@latest

Now you have Phonegap CLI, we can use it to run our mobile app project so that our Phonegap app we installed can access it.

phonegap serve

Open Phonegap mobile app you've installed it previously, type in the address that appears after you run phonegap serve,  something like listening on 192.168.43.111:3000.

That's what your app looks like in real mobile device.

7. Build APK

Whenever you want to build an android APK installer, you can just using commands cordova build android, and then when it finishes, it will tell you where the location of the APK is being saved.

With Cordova you can build mobile app using Javascript, this is really helpful if you want to build a mobile but you don't know other technology than Javascript. It is gonna make you develop your mobile app faster than if you learn Java or Swift (if you don't already know that languages). So you don't need to worry to learn a new language or technology because you can do it using Javascript. You can add JQuery to your codes or whatever Javascript library you like to make your mobile app development easier.

Comments

Popular posts from this blog

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

How To Create Spring Boot Project Using Netbeans

How To Connect SSH Using PEM Certificate On Windows

Flutter Button With Left Align Text and Icon

How To Use React Ckeditor Upload File Image With Demo and Example Codes