Release Oracle JET application on Google Play Store

Intro

After doing some basic implementation this weekend I wanted to publish version 0.0.1 of Tekki Duell at the Google Play Store and was struggling with the first problem I think it is worth blogging.

What steps have to be done to to publish your app on Google Play Store

Create Google Play Account

Go to this URL and create an account
https://play.google.com/apps/publish

Now what you have to do first has nothing to do with Oracle JET. It has basically to do with Google. You have to create your application in the Google Play Store and enter tons of information. I don't want to get too detailled into this.

Create apk release of your app

Next you have to build an apk of your Oracle JET application. The trick is here, that you have to create a signed apk. So the normal "grunt build" command won't do it. You have to do a little more.

1. Create a keystore
$ keytool -genkey -v -keystore /c/Workspace/Coding/keys/android/tekkiduell.keystore -alias tekkiduell -keyalg RSA -keysize 2048 -validity 10000


2. Create a build.json file, which contains information where the keystore is located. I did place the build.json file in the same directory of the keystore.

Create this file: c/Workspace/Coding/keys/android/build.json

put the following lines of code into the file. It is up to you, if you want to enter the password or not.
{
  "android": {
    "debug": {
      "keystore": "tekkiduell.keystore",
      "storePassword": "",
      "alias": "tekkiduell",
      "password" : "",
      "keystoreType": ""
    },
  "release": {
      "keystore": "tekkiduell.keystore",
      "storePassword": "",
      "alias": "tekkiduell",
      "password" : "",
      "keystoreType": ""
    }
  }
}


3. Build the application by changing to the root directory of your Oracle JET application. Next you have to call the following command. Keep in mind to set the correct buildConfig target to the build.json file

$ grunt build:release --platform=android --buildConfig=/c/Workspace/Coding/keys/android/build.json


4. You can find the created apk file in the following directory
/c/Workspace/Coding/Intern/tekkiduell/hybrid/platforms/android/build/outputs/apk/

Upload the file "android-release.apk" to the Google Play store. Now it takes another one or two hours before your app can be downloaded from the app store.

Conclusion

My app isn't doing too much yet. I am starting a new game, picking a skill and asking dummy questions, but it is in the Google Play store :-)

Check it out here: https://play.google.com/store/apps/details?id=org.oraclejet.tekkiduell

Digging deeper into Oracle JET

Intro

After having my first experience with Oracle JET by creating a default app and deploying it to my smartphone, my plan was to understand why my app is behaving the way it is currently behaving.

To find out about that my plan was to take a look at the used Frameworks and also read something about Javascript Design Patterns and MVVM.

RequireJS

I would recommend taking a look at this framework the first, because it is keeping the whole application together, by defining the load order of the different Javascript libraries and telling which module needs which Javascript libraries. RequireJS is not necessarily needed, but it makes your application more robust. Take the time to learn the way it works and you will love it.

The most accurate question for me was, when should I use define() and when should I use require(). Checkout this stackoverflow, which has a great answer to the question.
http://stackoverflow.com/questions/9507606/when-should-i-use-require-and-when-to-use-define

Answer copied from the Stackoverflow link
The define() function accepts two optional parameters (a string that represent a module ID and an array of required modules) and one required parameter (a factory method).
The return of the factory method MUST return the implementation for your module (in the same way that the Module Pattern does).
The require() function doesn't have to return the implementation of a new module.
Using define() you are asking something like "run the function that I am passing as a parameter and assign whatever returns to the ID that I am passing but, before, check that these dependencies are loaded".
Using require() you are saying something like "the function that I pass has the following dependencies, check that these dependencies are loaded before running it".
The require() function is where you use your defined modules, in order to be sure that the modules are defined, but you are not defining new modules there.

Knockout

This was the next framework I was mostly interested in, because it allows me to do some great data-binding between the view and the viewmodel. Compared to RequireJS, the basic functionality of knockout is very easy to understand.

This page gave me a good documentation on the basics of Knockout. I am sure there is more to know for advanced developers, but for me this was all I needed to understand the generated Oracle JET application.
http://knockoutjs.com/documentation/observables.html

Other frameworks

I didn't take a closer look at the other frameworks used by Oracle JET, which are jQuery, jQueryUI and Hammer. The reason for this is, because I already had experience with jQuery and I didn't need Hammer, because I didn't plan to allow any gestures in the first version of my application.

Javascript Design Patterns

Since I had the feeling, that the Javscript development has been enhancing in the last couple years I wanted to catch up a little bit here. There is a lot of interesting literature out there. I can recommend the following link.
https://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript

Conclusion

I have to say, that I have been doing a lot of research and I start feeling more comfortable with Oracle JET. I didn't expect this when I was taking a look at the generated Oracle JET application the first time, but I start understanding, what most of the files are doing.

It's time to start the development of Tekki Duell with Oracle JET.

My first steps with Oracle JET

Intro

After I created the wireframes a couple months ago, I first started looking into Oracle JET. I did have some experience with Javascript but this looked a little bit different than the Javascript I have benn working with the last couple years.

So what I did first was creating a Oracle JET application using the basic template. Everything is well explained on the Oracle JET webpage for starters like me.

Setting up my development environment

This is a very important part of the Oracle JET documentation, because it describes the structure of the application. Stuff like that is always important.
http://docs.oracle.com/middleware/jet201/jet/developer/GUID-C75CD8DC-5084-4831-BE1A-FFEE4EA8600C.htm#JETDG-GUID-C75CD8DC-5084-4831-BE1A-FFEE4EA8600C

I did the following steps in this order

• Install the Prerequisite Packages
• Install GIT
• Install Node.js
• Install the Tooling Packages
• Install the Oracle Yeoman Generator
• Install Cordova
• Install Android Tools (I am currently only developing for Android)

Create app and deploy to smartphone

After you are done with the installation use the following commands to quickly create your first application

$ yo oraclejet:hybrid tekkiduell --appName="Tekki Duell 4.0" --template=navDrawer --platforms=android

As next step you can deploy this application to your smartphone without doing any changes to the generated application. Just do the following:

Build application

grunt build --platform=android

Find out the id of your smartphone by connecting it to your computer and calling the following command

adb devices

Deploying the app to your smartphone

grunt serve --platform=android --destination=[ID OF YOUR SMARTPHONE] --disableLiveReload=true

Sadly I had to set disableLiveReload to true. Netbeans seemed to have problems with doing a live update to my smartphone.

Important files and folders

After inspecting the generated application for the first time. I made out the following files and folders to be important, because these are the files that should be modified by the developer.

hybrid:
Used for cordova plugins

hybrid/config.xml: (Specification from Oracle documentation)
Contains the Cordova global configuration settings. You can edit config.xml to specify core Cordova API features, plugins, and platform-specific settings.
For example, the following settings set the log level to VERBOSE on Android applications and the application’s orientation to landscape only on all platforms.

src: (Specification from Oracle documentation)
Site root for your application. Contains the application files that you can modify as needed for your own application.
The content will vary, depending upon your choice of template. Each template, even the blank one, will contain an index.html file and a main.js RequireJS bootstrap file.
Other templates may contain view templates and viewModel scripts pre-populated with content. For example, if you specified the navBar template during creation, the js/views and js/viewModels folders will contain the templates and scripts for a hybrid mobile application that uses a navBar for navigation.

Known Issues

I had to fight with the problem, that I had to add the alta-ui.css manually. It wasn't added when I created the application using the yeoman generator

My first impression

I was quite impressed how fast and easy it was to create a first smartphone application and deploy it to my smartphone. After looking at the code of the generated application I got a little scared, because I didn't understand how all of this is working together. Why is the application behaving the way it is behaving. I guess I have to do some catching up here.