How Start Building Mobile App Using HTML, Javascript and CSS via Cordova

cordova
Cordova mobile app framework

Nowadays developing a mobile app can be created using so many frameworks and language, of course the native approach is much more recommended as it will produce native apps with look and performance very fast and adapt to its mobile OS, in this case material design for Android and Human Interface Guidelines on IOS.

The drawback of using native code like Java in android or swift on IOS is that they are not compatible with each other, so if you want to create a native code for two IOS and android, you must have two different code bases.

There’s google flutter or react native for creating native apps with just one single codebase, but again it's a new learning curve. What if we just want to use the language and UI templating that we already knew, Javascript, HTML and CSS.

Yes, you can create cross platform mobile apps by using Javascript, HTML and CSS technology, there's a framework for doing that, one which is my favorite is Apache Cordova.

This how you can start developing cordova app and creating mobile app hello world, follow the instructions below:

1. Download and Install NodeJS

We will be using nodejs and npm for running, testing and managing packages and tools.

2. Install cordova command lines tool

npm install -g cordova

This cordova command lines will be helpful for adding or removing platform, running development, tests and even for compiling or packaging our app so we can deliver and install our app to our phone.

3. Create project using cordova CLI tool

cordova create YourAppName

4. Code structure

Basically your working directory is inside folder www, and it is pure HTML, CSS and Javascript, so it is easier if you have web development experiences before.

5. Adding platforms

cd YourAppName
cordova platform add browser
cordova platform add android

So there we add two platforms, for the testing purpose, we are gonna use browser because it’s much quicker. Of course when you want to test your app on a real device, you can use the android platform we just created. 

6. Run app on browser

For development it is much more convenient to run our app interface using our browser, let’s say google chrome, to run app use this command:

cordova run

Everytime you want to preview, CTRL+C to close the running cordova and re execute cordova run again.

7. Running on emulator or even real device

IOS is a bit complicated, so we are just gonna use android instead, for example sakes.

So you need to have Android studio installed first, accept the SDK TOC, have an emulator. If you done those things let's doing another important stuff.

- JAVA_HOME must already be on your environment variable
- And also ANDROID_SDK_ROOT
- And Gradle
- And emulator to your path so that emulator.exe is accesible via CMD

8. Now compile app into APK

If your android SDK, Java and Gradle setup correctly, building APK is as simple as using this command

cordova build android

So now you can begin developing your mobile app by using web based technology, i believe it’s much more straightforward and easy for a beginner.

Comments

Popular posts from this blog

Spring Kafka - how to use ReplyingKafkaTemplate send and reply synchronously

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

Step by Step How To Use cURL Library Using C From VS Code Windows