Oracle JET: First Hybrid android Mobile App

Problem Description: In this blog I am just putting all steps those I followed to create a mobile app using Oracle JET



Solution: Here are the steps that I followed to create my first application. As there are multiple ways to start JET development so I would not say this is best way but this is what works for me.

1.     
Install Node.js: https://nodejs.org/en/download. Once
node is installed you should be able to run npm commands.

2.     
Run command prompt in Admin mode and then run below
commands to install various npm modules

a.      
npm install -g cordova

b.     
npm install -g yo

c.      
npm install -g grunt-cli

d.     
npm install -g bower

e.      
npm install -g generator-oraclejet

f.      
npm install -g cordova

3.     
Install android sdk: I have installed android studio,
which comes with android sdk as well.
https://developer.android.com/studio/index.html

4.     
Use SDK Manager and install api required api: To launch
SDK manager from android studio you need not to create any project. You can
simply start android studio and select configure option

      

                 Below image shows how my SDK manager looks like

5.   Create web project and run it.

a.      
Navigate to directory where you want to create project
(say: D:\practice-jet)

b.     
Before creating porject verify that you have all npm
modules installed:  

npm list -g --depth=0

        

       

  

                 c.    Run command: I prefer creating a web project first and
then add hybrid mobile

                        application feature to it.

 yo
oraclejet MyFirstApp --template=navdrawer:hybrid

 

  

                  d.     cd MyFirstApp

                  e.      grunt build

                    f.     grunt serve

                  grunt serve command will start a process at port 8000 port. Your page will be visible on

                  browser at http://localhost:8000

                    we can kill process using ctrl+c.  Now our application is running fine on browser. We

                    have following directory structure till now.

 6.     Let us add android feature to our project

         yo oraclejet:add-hybrid --platforms=android

           If we see directory structure, it has got two additional directory src-web and src-hybrid. We already have one src directory. Main (or common code ) will reside in src folder. Code which is only applicable to web application will go in src-web project. Code which is only applicable to hybrid application will be in src-hybrid folder.



   7.      Build project

          grunt build --platform=android

            This step has created an android-debug.apk file in D:\practice-jet\MyFirstApp\hybri\platforms\android\build\outputs\apk folder. 

8. Create release ready apk file

Keystore with key creation: Now we want to create a release ready apk file. For that we need to first use keytool to create keystore and alias. We can run below command for that 

keytool -genkey -v -keystore MyFirstApp.keystore -alias MyFirstApp -keyalg RSA -keysize 2048 -validity 10000

Command should ask for password for keystore and key. It will also ask for additional details like lastname, first name etc. You can hit enter if you don't want to provide. 

We can keep keystore file outside project so that you can use same keystore with multiple application. My KeyStore name is MyFirstApp, password is 'manager' and Key name is agains MyFirstApp. Keystore and key passwords are same. Definitely you will have different keystore/key/passwords.

    

Now we will create a buildconfig file, which has entry of keystore. I placed file in d:\practice-jet folder. Content of file looks like

Finally run below command to generate release ready apk file

grunt serve:release --platform=android --buildConfig=D:\practice-jet\buildConfig.json

                       

  

   I have moved file to my android phone and installed apk. Here is the image of running application

9. Edit something in code and verify changes.

     To edit code you should make changes in src folder and then use grunt serve command to run it.

     NOTE: to edit web specific code use src-web and to edit hybrid specific code use src-hybrid.

    NOTE: As we have multiple platform now grunt serve will not be enough, we need to specify  which platform. Use command grunt serve --platform=web to run its web version in browser.



To sum up, we have run following important commands

1.     
One time setup

a.      
Node install

b.     
Node module install

                                                             
i.     
npm install -g cordova

                                                           
ii.     
npm install -g yo

                                                         
iii.     
npm install -g grunt-cli

                                                         
iv.     
npm install -g bower

                                                           
v.     
npm install -g generator-oraclejet

                                                         
vi.     
npm install -g cordova

c.      
Android SDK installation

2.     
Project Specific setup

a.      
Create project: yo oraclejet MyFirstApp
--template=navdrawer:hybrid

b.     
cd MyFirstApp

c.      
grunt build

d.     
grunt serve

e.      
Add hybrid features: yo oraclejet:add-hybrid
--platforms=android

f.      
grunt build --platform=android

g.     
Create keystore: keytool -genkey -v -keystore
MyFirstApp.keystore -alias MyFirstApp -keyalg RSA -keysize 2048 -validity 10000

h.     
Create buildConfig file

i.       
Create release ready apk file: grunt serve:release
--platform=android --buildConfig=D:\practice-jet\buildConfig.json



From here you can use NetBeans for development: To do so, you can follow

http://sanjeev-technology.blogspot.in/2017/05/oracle-jet-hybrid-android-app-using.html

Share this post