896+ Capstone Project is Available: Whatsapp: +91-7011258995, Email: sharecodepoint@gmail.com

Make Android Apps Using HTML, CSS and JavaScript

This tutorial shows how to create a JS/HTML android application using the command-line interface (CLI).

So many people ask this question "Is it possible to create an Android app using HTML, CSS and JavaScript?"  Yes, you can develop apps using HTML / CSS / Javascript.

The great thing about Cordova is that you can create a core app in HTML5/CSS3/JS and have it compile to all the platforms at once.

How To Develop Android App

Web APP: This is the part where your application code resides. The application itself is implemented as a web page, by default a local file named index.html, that references CSS, JavaScript, images, media files, or other resources are necessary for it to run. The app executes in a WebView within the native application wrapper, which you distribute to app stores.

Plugins: Plugins are an integral part of the cordova ecosystem. They provide an interface for Cordova and native components to communicate with each other and bindings to standard device APIs. This enables you to invoke native code from JavaScript.  Download Plugins

Mobile OS: Android, Window and IOS

Create your first Android App :

Step 1:

Step 2:
  • Open Command Prompt 
  • Install the cordova module using npm utility of Node.js 
C: \> npm install -g cordova
  • The cordova module will automatically be downloaded by the npm utility. 

Step 3:
  • Create the App
  • Go to the directory where you maintain your source code, and run a command.
cordova create myapp  com.se.my  HelloWorld

myapp:- Specifies a directory to be generated for your project.
com.se.my:- Java package names.
HelloWorld:- Provides the application's display title.

Step 4: 
  • The project's directory 
C: \> cd myapp

Step 5:
  • Command to add the platform 
C: \myapp> cordova platform add android
  • Command to remove the platform 
C: \myapp> cordova platform rm android

Step 6:
  • Build the App
C: \myapp> cordova build
  • Test the App on an Emulator or Device
C: \myapp> cordova emulate android

How to Upload or Publish the .APK file on Google Play Store
You used the CLI for almost all tasks and this will help you sign your APK for publishing to Google Play.

Step 1 – Build the release APK
You’ll need to get cordova to build an APK file for release.

cordova build –release android

Step 2 – Create a Keystore
You’ll need to install Java in order to access the binary called keytool. This binary will produce the keystore files you’ll need for signing the APK.

keytool -genkey -v -keystore <KEYSTORE FILENAME> -alias <KEYSTORE ALIAS> -keyalg RSA -keysize 2048 -validity 10000

The KEYSTORE FILENAME is the output file the keystore data will be saved to. The KEYSTORE ALIAS is a simple alias we’ll use later in the process to identify which key to use within the keystore.

Step 3 – Sign the JAR file
Here we’ll use jarsigner to create an preliminary APK file.

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore <PATH TO KEYSTORE FILE> <PATH TO CORDOVA BUILT APK> <KEYSTORE ALIAS>

The jarsigner will take the keystore, the cordova built APK and the keystore alias and create an APK that needs to be zipaligned.

Step 4 – ZIPAlign the file
Now we simply call zipalign to finish the job.

zipalign -v 4 <PATH TO CORDOVA BUILT APK> <FINISHED APK FILENAME>

The FINISHED APK FILENAME can be anything you wish. This file can then be uploaded to Google Play.

Download the Android App UI Design:
Example Android App : Download Now

Tutorial Video:
Android app for web designer. This is a very basic process to make and build an android application using a simple html. This is a very simple application that you can install to your android phone - Watch Video Tutorial

If you have any doubt regarding creation of the android app then leave your doubts in comment box.

Sharecodepoint

Sharecodepoint is the junction where every essential thing is shared for college students in the well-defined packets of codes. We are focused on providing you the best material package like Question papers, MCQ'S, and one NIGHT STUDY MATERIAL. facebook twitter youtube instagram

2 Comments

Previous Post Next Post

Contact Form