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.

Popular posts from this blog

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

-
Image
MySQL and MariaDB password As already mentioned in the title of this blog, this error message sometimes occurred when we are trying to update our root password database, either MySQL or MariaDB, The error says: ERROR 1348 (HY000): Column 'Password' is not updatable This is because if we use this SQL command to update our database root password, and it turn out to be Restricted by MySQL to use update on mysql database. UPDATE mysql.user SET Password=PASSWORD('1234') WHERE User='root'; The solutions for MySQL Error1348 So you can not update a user password using Update commands, to update the password, use ALTER commands instead. like the following. ALTER USER 'root'@'localhost' IDENTIFIED BY '1234'; And then you need to do the flush privileges to commit previous queries (that alter command above) into the system, simply do like this. flush privileges; So now you have your root with password 1234. Although it is recommended to...
Read more

How To Create Spring Boot Project Using Netbeans

-
Image
Spring Boot is a handy tool that simplifies the development of Spring Framework applications by reducing the need for cumbersome configuration. In this tutorial, I'll guide you through creating a Spring Boot application using the Netbeans IDE. While you can certainly create a Spring Boot application in Netbeans manually, it's much easier with a plugin designed for Spring development. Here's a step-by-step guide to get you started: 1. Install the Spring Boot Plugin: Open Netbeans and navigate to the Tools menu. Click on "Plugins." Once the Plugins window opens, select the "Available Plugins" tab. Look for the "Nb SpringBoot" plugin, then install and activate it. 2. Create a New Spring Boot Project: After restarting Netbeans IDE, you can create a new project with Spring Boot. Go to File > New Project. Under Categories, select Maven, then choose "Spring Boot Basic." 3. Add Dependencies: With your new project created, open the po...
Read more

Spring Kafka - How to use ReplyingKafkaTemplate send and reply synchronously

-
Image
Microservice Spring with Apache Kafka Today, I want to share how to use Kafka. It's quite interesting once you get the hang of it, and I hope my explanation will make it a bit easier for you. So, Kafka is primarily known as an asynchronous messaging queuing system. This means it allows different parts of your application to communicate with each other without waiting for immediate responses. However, there are times when you might need a more immediate reply from another service in your project. Luckily, Kafka can handle this too. Here’s how it works: The client side sends a message to the server side via Kafka. This message includes a special identifier in the Kafka header request, known as KafkaHeaders.CORRELATION_ID, along with a topic where the server should respond. The server, after processing the request, sends a message back to the same topic with the same correlation ID. This way, the client knows that the message is a response to its initial request and can act accordingl...
Read more