Skip to main content

Enable Windows for Android App development with Oracle JET

Even though Cordova makes it easy for developers to code mobile apps for different platforms with the same code base, but still to debug, package and release we do need specific app development environments.
We will explain in this chapter about developing, debugging and packaging an Android app in a Windows platform.
There 3 simple steps to prepare Windows for Android developments:
1.      Install Cordova
2.      Install Android SDK
3.      Install Gradle

Install Cordova

To install Cordova, you need to first install npm and NodeJS, you can download the latest version from www.npmjs.com and follow the instructions as applicable to your own operating system.
npm install -g cordova
Above command will update or install the latest version of the Cordova command-line interface.
Once installed you can check the version using
cordova --version

Install Android SDK

Android SDK provides tools that build and package JET applications into an .APK file (the file type that installs applications on Android devices), an emulator to create Android Virtual Devices (AVD) where we can test hybrid JET applications without having access to a physical Android device.
Install Android Studio, and the Android SDK that it includes, by downloading the installation file from https://developer.android.com/studio/index.html. The Android Developer’s website provides installation instructions for Windows.
After installation, open Android SDK manager and install the SDK tools and Emulator accelerator.






Then you need to set some Windows environment variables
·        JAVA_HOME to the location of your JDK installation.
·        ANDROID_HOME to the location of your Android SDK installation.
·        Add the Android SDK's tools, tools/bin, and platform-tools directories to the PATH environment variable.


Install Gradle

Gradle is the tool that the Android SDK invokes to build the apps that you deploy to your AVD or Android device. You can download and install Gradle from https://gradle.org/install/.
After installation you can verify the installation by checking its version
gradle --version


You need to also update the PATH variable with “/bin” directory from gradle’s installation path.

How to build JET Hybrid Apps

With Oracle JET’s command line tool, ojet-cli, you can create, build, run, and customize hybrid mobile applications for Android, iOS, and Windows mobile devices.
JET comes with 3 pre-build templates, which can be extended to create mobile apps.
 
You can ojet create --hybrid with optional arguments to create the Oracle JET application and to extend one of pre-built templates.
The command has a few options:
ojet create [directory] --hybrid
                    [--appid=application-id] [--appname=application-name]
                    [--template={template-name:[web|hybrid]|template-url|template-file}]
                    [--platforms=android,ios,windows|--platform=android|ios|windows]
To create our Airport app we have used the following command
ojet create NavbarHybridAirport --hybrid --appid=org.oracle.mobile.airport --appname="NavBarHybridAirport" --template=navbar --platform=android
Which will invoke Cordova command line to initialize and create an Android app and install default plugins and then it will invoke npm to install the related NodeJS libraries.




Comments

Post a Comment

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
3 comments
Read more

Create Micro CRUD services for Oracle Database Cloud using NodeJS

I will try to explain, how you can use NodeJS to create mirco services for the tables in your Oracle Database Cloud or on-premise Database. Complete Github project : https://github.com/sohamda/LeasifyAPIs You need to do "npm install" to download the node_modules. Step by Step guide : 1. NodeJS : either 32 or 64 bit. If you already have NodeJS installed, please check whether it is 64 or 32. Use below command to figure that out : C:\>node > require('os').arch() If you get : 'ia32' , then it is 32 bit installation. 2. Install oracle-db node module .  This was a lengthy and time consuming installation for me, because for Windows, it has a lot of pre-requisites. If you are a Mac user, you are lucky. :) I followed : https://community.oracle.com/docs/DOC-931127 There is also a detailed one in github : https://github.com/oracle/node-oracledb/blob/master/INSTALL.md 3. Config your DB Cloud Create a user and couple of tables on which we'
24 comments
Read more

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 grid c
1 comment
Read more