Skip to main content

How to build, package and debug a Hybrid Oracle JET app

JET-CLI provides a very easy way to build and package Android, iOS or Windows hybrid apps. JET-CLI is a wrapper over Cordova-CLI to build and package hybrid apps. Things that we will explain this section are:

  • How to create a Self-Signed Certificate 
  • Build configuration file
  • How to build and package an Android app

Self-Signed Certificate

An SSL certificate serves two essential purposes: distributing the public key and verifying the identity of the server. It can only properly verify the identity of the server when it is signed by a trusted third party. A self-signed certificate is a certificate that is signed by itself rather than a trusted authority.

Java Keytool tool provides a very easy was to generate your self-signed certificates. To use it, you just need to use the below command:

keytool -genkey -keyalg RSA -alias hybridAirport -keystore keystore.jks -storepass hybridapp -validity 360 -keysize 2048


This will create a keystore.jks file containing a private key and a self-signed certificate. Later this can be use to build and package our Android app.

Build configuration file

Since now we have the self-signed certificate, we can create a build configuration file which will be used to build and package our hybrid JET app.  

We will create a buildConfig.json with the details of the self-signed certificate we created in the previous step. The content of it will be:


The above details contain the JKS file location, keystore password, alias and the password of the file. The “keystoreType” is by default JKS if left blank.

How to build and package an Android app

To build and package we will be using ojet-cli. It is the easiest way via command-line to generate an APK file.

In the application root directory, we can run “ojet build” with platform and build config parameters to build the app.

ojet build android --release --build-config=./buildConfig.json

In the above command:

  • android: To define for which platform we are executing the build.
  • --release: To define we are generating the APK for publishing it to a Google play or to install it directly on an Android device.
  • --build-config: Defines where to find the self-signed certificate details.

After successful finish of the above command, you should be able to see an .APK file get generated inside “hybrid/platforms/android”.

There are other few useful parameters you can use with “ojet build” command:
  • device: To define you are executing this to generate an APK for device.
  • emulator: To define you are executing this to generate an APK for device.
  • theme: To specify a theme to use to build the app, by default it uses Alta theme.

Debugging

JET-CLI gives you an option to test and debug your hybrid app locally in a browser. Normally, running an emulator or deploying to a device is memory intensive and most of all time consuming. You do need to test your app in a device but at the early stage of the development lifecycle you need to test your viewModels and it is quite helpful if it can be done easily.

ojet serve android –browser

The above command runs the hybrid Android version in your default browser.


This command will do a compile and load the application on by default on 8001 port and run the application as a web application.


This command will load the application with default “live-reload” as true, so any change you make it will be directly reflected on the browser.

Alternatively, you can also choose to test or debug your app, in an Emulator, for that you need use:

ojet serve android --emulator=emulator-name

To debug and test your app on a device, you can use:

ojet serve android --device

Comments

Popular posts from this blog

Rich Text Editor - Oracle JET

Oracle JET has a lot of excellent UI components, but according to Murphy's law, client always comes up with something which you don't have at your disposal. So, driven by one of my client's requirements, I created a Rich Text Editor or WYSIWYG editor for Oracle JET. This is based on Quill JS and fully customizable. Github project download: https://github.com/sohamda/JET-Web-Components/tree/master/rich-text-editor I will explain in this blog, on how to integrate it in your own Oracle JET project. 1. Create and initialize your JET application and then put the downloaded web component inside "src\js\jet-composites" folder. 2. Once copied update your viewModel first. Add a snippet for passing the default content to be displayed by the editor after load. 3. Update view to load this editor Above you can see the "toolbar-options" property, that controls which options you should display to user on the editor. Those are basically the forma...

Exception Handling in ADF

This blog will give you an overview on how you can successfully deal with unhandled Runtime exceptions in an ADF application. This will give you an idea of: How to catch the unhandled exceptions. Write a separate log file with stacktrace and thread dumps. Redirect the user to an static error page #1. Catch unhandled exceptions :  Create a class "MyExceptionHandler" which extends : oracle.adf.view.rich.context.ExceptionHandler. Override handleException() method.     public void handleException(FacesContext facesContext, Throwable throwable, PhaseId phaseId) throws Throwable {         // this method is going to create a separate file with stacktrace and thread dumps         writeException(throwable);         // redirect to error page         redirectToErrorPage(facesContext);     }  Create a fo...

Layout Management & CSS Classes with Oracle JET

Oracle JET provides automatic responsive layout using CSS classes. So that, from large screens to small screens the application fits itself the best possible way. JET’s layout management are based on 2 types of CSS classes “Responsive Grid” and “Flex”. Responsive grid classes which deals with size, number of columns and functions of a particular <div>. Naming convention of these classes are oj- size - function - columns sizes can be: sm, md, lg, xl functions can be: hide, only-hide columns can be: any number between 1 to 12.   Just like Bootstrap, JET also divides the width of the available space into 12 columns, so for example, if you want a section of your page should take up atleast 5 columns if you divide the available screen into 12 columns, you need use : oj- size -5. Now comes the size part, you need to define that for each size of the screen, from hand-held mobile devices to large or extra large desktop screens. With combination with theses gr...