In a continuing series of articles sharing what I've learned about Oracle JET, I'd like to extend upon the previous article talking about installing Oracle JET for web application development, and this time look at installing Oracle JET for hybrid mobile application development.
Oracle JET is capable of not just building client-side web applications, but thanks to the underlying power of Apache Cordova it can build & deploy hybrid mobile applications too, for Android, iOS and Windows UWP.
Installing the base tooling for Oracle JET is relatively easy, and extending it with Cordova is easy too. However installing the tooling for each mobile platform for the uninitiated can be challenging and why I thought I'd attack this "beast" in a separate article to help others.
Installing the Oracle JET Prerequisites
In the previous article for web application development, I covered what you needed to install for Oracle JET. This included installing Git and NPM first, then via NPM installing Yeoman, Grunt, Bower and the Oracle JET generator.
It just so happens this set of packages is the prerequisite for installing the additional hybrid mobile tooling. So, for all intents and purposes, Oracle JET hybrid mobile development is just an extension of Oracle JET web development. While there are certainly some tasks that are mobile specific (such as integrating the camera or GPS), it's useful to understand from a learning perspective that an Oracle JET mobile app is pretty much the same as an Oracle JET web app, just deployed to a mobile device.
This means that when things don't work in your JET mobile app because of a bug in your code, but say the Android Emulator is being its usual painful self during debugging, you can often run and test apps in your development machine's browser to get around this sort of development grind. There are a few mobile specific tasks we can't test in the browser, but thanks to the mock plugins provided by Cordova you can actually do a lot.
Installing Apache Cordova
Having installed the Oracle JET tooling from the previous article, using NPM we can install Apache Cordova for mobile development as follows:
npm install -g cordova
To check which Cordova version was installed run the following:
npm list -g --depth=0
An example result from my Mac:
/usr/local/lib ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org └── email@example.com
From here we need to make a choice of which mobile platform we're going to support.
Apache Cordova itself supports (at last count) eight different platforms, but Oracle has made the decision upon extending itself on top of Cordova to only support Android, iOS, and Universal Windows Platform (UWP) apps (deployable to Windows 10 devices). Which we choose is up to us and our needs, each of us will need to pick our own poison (as the saying goes, which nicely sidesteps me from any Android-vs-iOS-vs-Windows debates I hope ;-).
From a development perspective, it's worth noting of the 3 mobile development platforms we're about to talk about, that is the Android SDK for Android development, Apple Xcode for iOS, and MS-Visual Studio for Windows UWP, only the Android SDK is capable of being installed on Windows, MacOS, and Linux development machines. Xcode is tied to MacOS only, and Visual Studio to Windows only.
In Oracle's mobile team when writing tutorials for developers to use, as the Android SDK covers virtually all the PC operating systems that developers can bring to a classroom, we tend to focus on the Android SDK first as a pseudo-universal development platform, as we know (hope?) all students can install this. So I'll cover Android first, but, skip to your favorite mobile platform if you're interested in iOS or Windows instead.
Android, the Android SDK and Android Emulator
For hybrid mobile development on Android, we require the Android SDK. The Android SDK is either bundled with Android Studio or a separate download from the following page. The SDK is now somewhat obscured as "command line tools" at the bottom of the page, where we find the downloads for Windows, MacOS, and Linux. For this article, we'll assume you download & installed the SDK rather than Android Studio.
The SDK zip does not come with any specific version of Android installed, known as an Android API, so you must run the SDK Manager to download these in turn. Once the SDK is installed we start the SDK Manager via <install-dir>/sdk/tools/android(.exe).
On opening it for the first time the SDK Manager at the bottom will report it is loading from an external repository to determine what is available for download. If you are behind a corporate firewall you will need to open the SDK Manager preferences and set the proxy settings for this to work correctly, remembering to restart the SDK Manager if the process is stuck.
By default the SDK Manager will suggest some required packages it will automatically download, but from there we need to pick a specific Android API. In doing so we need to be mindful that the version of Cordova we download has its own dependencies of what Android API level it supports, so you should check this yourself. For Apache Cordova 6.3.1 at the time of writing, according to the Cordova documentation that is Android 6.0 (API 23).
In expanding a specific API, it includes a whole bunch of system images for different Android platforms including ARM and mobile devices, as well as specialized TV and Wear platforms. We'll drop the later two to save some unnecessary downloads.
From the Extras top level option, it's also useful to select the Intel x86 Emulator Accelerator (HAXM Installer). I'll talk about this more in a moment.
Once we've selected the options, we then select the Install Packages button, accept the relevant licenses then wait for everything to download. Be patient. It can take a while on slow connections.
Like downloading the APIs as an extra step, assuming we don't have an Android device to run with, Android makes our job harder as we also need to setup the Android Emulator before we can start developing and testing our app. In turn, the Android Emulator is notoriously slow making it painful to develop with. This is where the Intel HAXM installer from above comes in.
While there are some other options to the slow Android Emulator such as Genymotion, the Intel HAXM driver if installed on an Intel-based PC including Intel-based Windows, MacOS & Linux will significantly increase the speed of the Android Emulator. It does this by allowing the emulator to access the Intel CPU virtualization optimizations. There are some prerequisites such as your Intel CPU supports Intel's Virtualization Technology and VT-X, and if running on Windows Hyper-V must be disabled, which you can read about here.
By default the Intel HAXM drivers are not installed when downloaded via the SDK Manager, you need to execute the file downloaded to the <android-home>/extra/intel/Hardware_Accelerated_Execution_Manager directory, typically called something like intelhaxm.exe or IntelHAXM_X.X.X.dmg. The install instructions are fairly self-explanatory. My tip is to make sure you reboot your PC once installed, at least on MacOS I've had some problems with the drivers not properly applying post install unless I reboot.
Now that we have the HAXM drivers installed we can setup the Android Emulator. The Android Emulator requires that we configure an Android Virtual Device (AVD), which is a configuration set of the Android device we want to emulate. Luckily it has a number of predefined templates that make this easier.
With the SDK Manager running select the Manage AVDs menu option. In the resulting AVD Manager window, select the Device Definitions tab where it will list a number of preconfigured AVDs for known devices like the Nexus 5. On selecting this, then Create AVD, we will be presented with the remaining options we need to configure.
From experience, first-time users tend to try to max out the AVD settings. But as the emulator can be so slothful, I recommend trying to keep this to a minimum.
The target represents the Android API level we downloaded earlier. Remember to select something relevant to your Cordova release.
For the CPU/ABI, for the Intel HAXM driver to work, we must select a System Image built by Intel, typically "Intel Atom (x86)" or "Intel Atom (x86_64)" (the difference being the 64 image emulates 64bit Intel Atom devices).
For the Skin select "Skin with dynamic hardware controls," and then the rest of the options are left as default.
Finally, note the default AVD Name at the top. Change this to something simple like "MyAVD" with no spaces, then press Ok.
Next, for building Android apps, Apache Cordova requires that the Java Standard Edition SDK be installed (v7 or the latest v8).
Having installed the Android SDK and Java SDK, Cordova then requires environment variables ANDROID_HOME and JAVA_HOME to point at these. The Cordova documentation gives instructions for how to set the environment variables on different operating systems.
Phew. Android certainly requires the most steps to setup. At this point, we've set up the Android SDK & Android Emulator and we're ready to return to working with Oracle JET. Skip right down to the last section before the conclusion to see what to do next.
iOS, Apple Xcode, and the iOS Simulator
If we instead choose to go the iOS route we can take some satisfaction that getting up and running is much easier than with the Android SDK.
As a reminder, though, Apple's Xcode is only available on MacOS, there are no Windows or Linux versions. As such you will need a Mac to develop iOS applications via Xcode with Oracle JET.
To install Xcode, we need to check what versions of iOS and Xcode are supported by Cordova before continuing. At the time of writing, Cordova supports Xcode 7, by the time you read this Xcode 8 may be supported. Cordova does great work in supporting the latest and greatest, but, if the latest version just came out a few days before you sometimes need to show some patience and download an older version.
Once installed we need to run Xcode at least once to accept the terms and conditions. Also, in the past, from experiences, it's been important to run iTunes at least once to do the same as can block iOS app builds & deployments. We've found in running a number of workshops corporate users of MacOS/OSX have never run iTunes unlike regular Mac users and this has caught them out.
Having done all this, by installing Xcode we get a full set of device simulators at the most recent O/S version supported by that version of Xcode. If we want older simulators we can download them via the Preferences -> Components -> Simulator window. Otherwise, we're ready to kick on with JET. Skip right down to the last section to see what to do next.
Windows 10 UWP and MS-Visual Studio 2015 and the Emulator
Setting up the development environment for Universal Windows Platform (UWP) apps is also straight forward.
In this case, we need to download and install MS-Visual Studio 2015 to our Windows 10 PC. The free Community Edition of Visual Studio 2015 is a good option. On installing Visual Studio we need to ensure during the install process to also select "Universal Windows App Development Tools" and the associated children. If you miss the option during the install, try the Tools menu -> Extensions and Updates and Tools section.
Once installed we need to run Visual Studio once to accept the terms and conditions.
Note here how I'm not telling you to check the Cordova documentation. At the time of writing while Cordova does support Windows 8 & MS-Visual Studio 2013 development, for Oracle JET, Oracle has decided to only support Windows 10 UWP apps via MS-Visual Studio 2015 going forward. So you need to be cognizant of Oracle's support for Windows, not Cordova's in this case.
Once complete this is a fairly rudimentary install compared to Android. Having finished the install we not only get some Windows device simulators, but we can also deploy our app directly to our development machine (unlike iOS & Android).
Continue to the next section to find out what to do next with Oracle JET.
Creating, Building and Running Oracle JET Hybrid Mobile Apps
Once we have the respective mobile development platform installed on our development PC, we're ready to return to Oracle JET and create a hybrid mobile app.
Like the previous article we use Yeoman on the command line to generate an Oracle JET scaffold, with a slightly different syntax from just creating a web application:
yo oraclejet:hybrid MyMobileProject --template=navbar --platform=<android|ios|windows>
Note for the "platform" (singular) option we must specify our mobile platform of choice without the brackets, such as the following:
yo oraclejet:hybrid MyMobileProject --template=navbar --platform=android
We can also use the "platforms" (plural) option to specify multiple platforms to support. Wait patiently for the components to download and install.
Next, we can build and serve our app:
cd MyMobileProject grunt build grunt serve
By default, the last two options will build the app for our selected mobile platform via Cordova, then start the associated emulator or simulator for our platform, deploy the app to the emulator or simulator and finally start the app for us.
For platforms like Android where we may already have a number of emulator AVDs configured, or on iOS where we might want to pick out a specific simulator, we might like to use the extra option "destination" to specify the AVD name we set up earlier:
grunt serve --destination=MyAVD
...and the result:
Another option as explained earlier is to bypass the mobile emulator or simulators using the development machine's browser, instead, with the browser option. The browser can be a much faster route to development particular when fixing layouts for example.
grunt serve --browser
..,which will look like:
At this point we're now up and running with the hybrid mobile development platforms for Oracle JET mobile development, and we're ready to continue learning about Oracle JET.
As previously recommend if you're new to Oracle's JET I highly recommend hitting the Oracle JET homepage which includes links to the documentation, tutorials, videos, demo applications and a detailed cookbook.