Enable Debug and LiveReload functionality in OracleJet Android application

Introduction

OracleJet YeoMan Generator: version 1.1
OracleJet: version 2.1.0

Debug and LiveReload (aka HotDeployment) are two very powerful functions. You should always try to make this possible in your development environment, no matter what framework you are using. Debug saves you a lot of time in finding bugs and LiveReload allows you to see your changes to the sourcecode after seconds instead of waiting for another redeployment, which can take minutes.

What is going on behind the scenes

To make this happen, there is a lot going on. But don't worry, all of this is already setup. The only thing you have to do is setup an Google Android Virtual Device, start the Virtual Device and run the following scripts.

To find out the name of your Virtual Device
$ adb devices

To start the process, that is pointed out in the picture above
$ grunt serve:dev --platform=android --destination=<NAME_OF_YOUR_AVD_DEVICE>

Here comes an explanation of the steps, shown in the picture

1. Your source code is being build and moved to the hybrid folder, which contains the informatione needed to make cordova work
2. A server is being started on your local machine with port 8000. It is important, that this server is running on port 8000. You can also check that this step has been working fine, by entering localhost:8000 in your browser. You should see something similar to the following picture.
3. This server is probably pointing to the hybrid folder. But I didn't make research on that. The important thing is, that server is always synchrone with your source code.
4. Next your app is being deployed to the Virtual Device. Again, you don't have to trigger any separate command to make this happen. All this is being done by using the "grunt serve" command.
5. Here comes the interesting part.Your Virtual Android Device is always listening to http://10.0.2.2/8000 for changes. 

Known Issues

Failed to establish connection to ADB server

When starting the Google Android Virtual Device you get this error in the log.

Solution

1. Go to AVD Manager
2. Edit your AVD
3. Uncheck 'Use Host GPU'option.
4. Click Finish (Save).
5. Then Start AVD again

ERR_EMPTY_RESPONSE

In my case, my local Google Cloud Endpoint server's Debug Port has been listening on port 8000. Check on your computer, if there are any other actions going on on this port.

Conclusion

It took me quite some hair to find out why this is working the way it is. Why is 10.0.2.2 pointing directly to the localhost of my development environmen although I never setup my development environment or anything else to make 10.0.2.2 my localhost.

The reason why this is working is because Google did setup their Android Virtual Device in a way, that 10.0.2.2 is always forwarding the request to the localhost of your development environment.

Here comes the big problem with this. If you want to use your own Android device or some other Virtual Machine, than this is not working, because they don't forward 10.0.2.2 to your localhost development environment. Genymotion, which is another famous Android Virtual Device software is using 10.0.3.2 as IP to forward to your localhost development environment. And if you would want to make this work from your real device, than you would have to take the IP of your development environment and point to that from device, instead of pointing to 10.0.2.2.

I did make some research and found out, that currently the 10.0.2.2 can't be changed and is a hardcoded value. This means, that currently you can only use the debug and liveReload functionality with the original Google Android Virtual Devices

OracleJet with Google Cloud Endpoints and Google Cloud SQL

Introduction

After I did implement some basic parts of my Android application with Oracle Jet, I had the issue, that my Android application was keeping all the needed information locally on the Smartphone. So my next goal was to implement a REST services which have functions to create and read existing information.

Part 1: SignIn with Google

Since I didn't want unauthorized access to my future REST services I have been first thinking about how to make this access happen. I didn't want my users to remember another password, so I decided to pick the Google Login, which should secure my future REST services.

Let me explain the steps real fast

1. The webapplication is asking for the users request token, which can be later used to authenticate the user. Remember that you need a client_id for your webapplication/smartphone app and have to send that with your request.
2. Google is showing a popup to the user, which is asking him to identify himself by using his username and his password.
3. After successful identification of the user, authorization code is being sent to the webapplication
4. This authorization code is being sent by the webapplication to Google again.
5. In exchange the webapplication is receiving the token, which contains basic information (email, name, pictureurl, ...) about the user and how long the token is valid.
6. The token is being used by the webapplication to make all future REST service requests to the Google Cloud Endpoint. The Google Cloud Endpoint is validating the token, which ensures, that only authenticated users have access to my REST services. Currently I don't have an authorization. Everybody is allowed to user all REST services.

Part 2 - Oracle Jet with Google Cloud Endpoints and Google Cloud SQL

It was important for me to use some standards like JPA or MySQL on Google Cloud Endpoint side, cause this will make it easier for me to migrate to another Cloud service, in case I should ever choose to leave the Google Cloud.

Conclusion

I had to do some reading to get into all the Google Cloud stuff. Now that I got my architecture running, it shouldn't be too hard to add extra functionality, or build other web applications, based on this architecture.

OracleJet - What should be committed to the Version Control

Introduction

OracleJet YeoMan Generator: version 1.1
OracleJet: version 2.1.0

I did create my hybrid android application with the following command and it created tons of files, that I didn't want to commit to my version control system. Although the YeoMan Generator is also producing a .gitignore file, I didn't really like that one, because it still asked me to commit files, that also can be generated.

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

My adjustments to .gitignore

Here is my .gitignore containing the adjustments I did do to the original .gitignore from Oracle.

bower_components
!hybrid
hybrid/*
!hybrid/config.xml
!hybrid/res
nbproject/private
node_modules
src/js/libs
themes

What did I add to the ignore list

• hybrid/plugins/fetch.json - doesn't has to be checked in. Is being generated.
• nbproject/private - doesn't has to be checked in. It contains only personal NetBeans settings. Anyways, don't forget to commit the nbproject folder.

What has to be done after checking out

After you are done with the adjustments to .gitignore, please commit the files to your repository and checkout the complete repository to another directory to check, if everything is working as expected.

After checking out call the following three commands in the root folder of your project. Now you should have all the needed libs and modules again.

$ npm install
$ bower install
$ grunt bowercopy
$ grunt build --platform=android

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.

Die ersten Wireframes erstellen

Los gehts.

Tekki Duell ist ein Frage-/Antwortspiel bei dem man gegen andere Mitspieler sein technisches Wissen unter Beweis stellen kann.

Die Anwendung wird mit Oracle JET entwickelt und vorerst für Android Smartphones zur Verfügung stehen.

Gemäß dem Motto Bilder sagen mehr als 1.000 Worte habe ich mir heute die Zeit genommen meine Gedanken in ersten Wireframes festzuhalten.



Die Entwicklungsarbeit kann somit beginnen. Eine einfache Oracle JET Template App konnte ich ja bereits sehr einfach auf meinem Android installieren.

Bis bald ...