Using Cordova to package an OpenFL HTML5 application for Android – Part 1: Installation

Folks, this is a rather complex topic, so I’ll split it into separate parts.
This part merely serves as an introduction as well as installing the required tools.

Prerequisites:

• A PC running Windows 7 or above – for this blog post I’ve used a virtual machine running Windows 7 32bit

What is this all about?

Well let’s start with a little background. In the past I’ve used Adobe Flash to deliver content for the browser and Adobe Air for creating mobile applications targeting Android and iOs. In early 2018 Adobe anounced their plans to phase out the browsers flashplayer plugin at the end of 2020. Time to move on!  While there are literally tons of options available we could use to bring content to the web as html5 and native mobile applications, the ideal choice is OpenFL. It has a familar API, Haxe is very similar to AS3 and the community support is great.
So for the past years I’ve used OpenFL for developing HTML5 applications and games. Alright so far – but what about those native mobile applications? Theoretically we could use OpenFL itself to deploy to iOs or Android – but what should I say – for me this didn’t really work out. So I was seeking for other options and stumbled over Cordova. Simply speaking, this tool wraps an HTML5 application into a mobile application and displays it’s content using a WebView. This is kind of a browser window inside the application. While this is surely not the best option for everything, it’s great for applications and casual games. Awesome!
Unfortunately Cordova is a tool, that’s completely command-line driven – that’s the reason for this blog post.

Installation

As difficult as it’s usage is the installation itself because you need to install a lot of other tools.

1. Java Development Kit

Head over to: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html and download jdk-8u202-windows-i586.exe.
Installation is pretty simple – just use all the defaults. Please note it will also install the Java Runtime Environment. After finishing the installer open a administative command prompt. To do this, click start -> type: cmd into the search field -> right-click cmd in the results -> choose Run as administrator

Leave this window open – we will use it for a lot of things!
Java itself is command-line driven too. In order for our other tools to find Java we need to set a path to it’s installation.

Java itself sets a path we need to remove, because it points to a directory which interferres with a tool we’ll install later. Remove this path with:

There’s still something to do. A tool we’ll install later needs to allocate more heap (memory) than Java’s defaults are offering. We can increase it by:

2. Android SDK

This one is a bit  tricky. For several years, Google included a GUI for it’s avdManager and the sdkManager. With the avdManager you can create Android Virtual Devices and the sdkManager is used to download Android images and tools. Unfortunately they removed it with the latest revisions of the SDK because they want you to use their own Android Studio – which we don’t need.
For our purposes we need an older version of the SDK, which you can get here: https://dl.google.com/android/android-sdk_r24.4.1-windows.zip
Head to the command prompt again and enter:

Now extract the android-sdk-windows folder from within the zip file to c:\CordovaTools
Time to set some system paths again! Enter:

Open Windows Explorer, head to c:\CordovaTools\android-sdk-windows and start SDK Manager.exe
In the Tools section select the following:

Scroll down to Android 5.1.1 (API 22) and select:

Sadly we’re not done here. A tool we’ll look into later – Gradle – utilizes the Android SDK and downloads things that are missing automatically, which it just can do if you agree to Google’s terms of use. To do this it looks into your Android SDK for a folder called licenses. Generally the sdkManager is used to agree to the terms and puts some files into the aforementioned folder. Unfortunately this tool isn’t part of our old SDK, so we must get the latest Android SDK too!
Navigate to https://developer.android.com/studio/ and download sdk-tools-windows-4333796.zip Unzip it’s content to c:\sdkTemp – we can delete it afterwards.
In the console window enter:

and accept all licenses using ‘y‘. Now you’ll have a licenses folder at c:\sdkTemp – move it to c:\CordovaTools\android-sdk-windows and if you want, you can delete the entire sdkTemp folder.

3. Gradle

From https://gradle.org/releases/ get v5.1.1 and unzip it to c:\CordovaTools and execute the following command:

4. ANT

Grab https://www-eu.apache.org/dist//ant/binaries/apache-ant-1.9.13-bin.zip
Inside you’ll find a folder called apache-ant-1.10.5 – it’s content should go to c:\CordovaTools\ant

Time to visit the console again!

This might take a while since Ant downloads some library dependencies.

5. Node

At https://nodejs.org/en/ get version 10.15.0 for windows and simply install using the installer.

6. GIT

Download the installer – not the portable edition – at https://git-scm.com/download/win and install it with all the defaults!

7. Cordova

Finally we come to the point where we can install Cordova itself! Woohoo! Though that is rather simple, there is one problem: Node sets a system path which our console doesn’t know about yet, so we need to close it and open a new instance. Unfortunately all our previous settings will be lost. To get them back copy & paste the following lines and save it as c:\CordovaTools\setEnv.bat

Afterwards open a new administrative command prompt and enter this:

Using Windows Explorer go to C:\CordovaTools\android-sdk-windows and start AVD Manager.exe
Inside click on the ‘Create…’ button and use these settings:

Afterwards select the freshly created virtual device and click on ‘Start…’.

Fellas, this was a whole lot of work! I bet you finally want some kind of reward – yeah, we want to see a Cordova powered application on our virtual device!
So let’s go back to the console.

This will simply create a folder we store our project in. Now we utilize Cordova to create a sample and run it inside the virtual device.

If everything went well your Android virtual device should show the following screen: