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.