By Cewak Arakeljan
Special to YNOT

There are several ways to create apps with HTML5: Phonegap Build, Tutanium, Secha, etc. Personally, I prefer Cordova. Cordova creates apps that include WebView. Put differently, Apache Cordova creates an app for a browser to actuate a web app developed with HTML5.

With Cordova, you’ll have no trouble accessing features (APIs) of the operating system (Android, iOS, WP), as Cordova also contains a collection of plug-ins you can access via JavaScript.

What programs do you need to develop apps with HTML5?
First of all, you need the appropriate development environment for the operating system you are gunning for. So, if you want to go for Android, you need Android Studio. Installing the software is pretty simple: Just download the package and follow the instructions.

Next, you need Apache Cordova. Installing Cordova requires node.js. The installation of node.js is also very uncomplicated. Download it, follow the instructions, and you’re done.

Now that you have installed Android Studio and node.js, access the console by pressing the following keys: Windows +R. Enter the command “C:\>npm install -g cordova” and wait for Cordova to install.

A little example with Android Studio
Once Android Studio and Cordova are installed, open the console again using the keyshortcut Windows + R and enter “cd Desktop.” This will take you to the desktop in the console. Next, enter “cordova create HelloWorld com.example.com HelloWorld” in the console.

In case you are wondering what exactly it is you are doing, here’s an explanation for the individual steps:

By entering “cordova,” you activate the Cordova program. “Create” tells Cordova to create something. “HelloWorld” tells the program what the created folder should be named. The folder is added to the desktop, by the way, since you entered “cd Desktop” at the beginning of the command line. The next command, “com.example.com” is the domain style identifier, and the “HelloWorld” at the end marks the name of the app.

Once you have created the project HelloWorld, you need to access the HelloWorld folder through the console. To do so, bring up the console and enter “cd HelloWorld.” After that, enter “cordova platform add android” to tell Cordova the platform for which the app is to be designed. To complete the project, enter “cordova build.”

When the console reads “BUILD SUCCESSFUL,” you have created a Cordova project for Android.

Now, open Android Studio and import the Cordova project. To do that, click “Import Existing Android Project,” and go to the HelloWorld folder you created earlier. From here, it’s HelloWorld -> platforms -> android. Now select that and import it. The “www” folder will be in your HelloWorld folder under HelloWorld -> platforms -> android. This is the folder where you put the HTML5 files, and they are displayed as apps.

The Android emulator
Android Studio also includes an extensive Android emulator. Before you can use this emulator, you need to configure it. To do that, enter Android Studio, click “Tools” in the menu bar at the top, go to “Android” and then select “AVD Manager.” Once AVD Manager has opened, click “Create Virtual Device.” Now, you can choose whether to use a prefab device profile or configure one yourself.

Finally, it’s time to test the HTML app in the Android emulator. Click “Run” in the Android Studio menu bar, then select “Run ‘HelloWorld’” or use the key combination Shift + F10.

Testing the app on the terminal device
You can also test your HTML5 app on your Android smartphone or tablet. If the version is Android 4.1 or older, enter the settings menu, navigate to the very bottom and find the menu item for developer mode. Activate it. From Android 4.2 onwards, the developer mode is hidden. To enable it, enter the options menu and click the menu item “Info” or “Device info.” Here you can see the build number. Click the number seven times to activate developer mode.

Exporting a project as APK
To export your app as an APK, click “Build” in the Android Studio menu bar at the top. Next, select “Generate Signed APK,” pick the project you want to export, and then click “Next.”

Now, you have to create a KeyStore, which is done by clicking “Create new,” entering a name for the KeyStore, choosing a safe password, and then entering your developer data. To complete this part of the process, click OK, then Next.

All that is left to do now is to tell the system where you want the APK. You have exported an installable APK for Android and you can now offer it for download on your website, etc.

Cewak Arakeljan, a native of Jerewan, Armenia, moved to Germany in 1992 to train as a web developer. He specializes in website and app development using HTML5. Currently, he serves as webmaster for Surf Media GmbH, part of the iVenture Group.