Oracle JET: Hybrid android app using NetBeans

This blog is continuation of my previous blog http://sanjeev-technology.blogspot.in/2017/05/oracle-jet-first-hybrid-android-mobile.html

In that blog I showed how we can use npm, yo and grunt commands to develop a new web/mobile application in JET.
In this blog my idea is simply open the project in NetBeans and start development in NetBeans. NetBeans provide auto-completion + templates for new project etc for Oracle JET. As we have already created project using commands so we will not be creating a new project but directly open it in NetBeans and start using it.

1. Open project: To open project in NetBeans you can navigate as File > Open Project
      Good News: NetBeans automatically identifies our project created using yoman (yo) as a project.
     

We get various source directories (src, src-hybrid, src-web). We also have a separate web directory.

2. Make changes: Let us make some changes in source and see its

Few things to notice:

• We can directly run index.html present in web directory.

• Once its running Chrome browser shows a bar " NetBeans Connector" is debugging this browser. Don't cancel it. It enables browser log to appear in NetBeans console. 

• Any changes done in web directory (Site Root) are picked immediately (without restart). 
• Any changes done in src directories are also picked immediately (without restart). Actually these changes are pushed automatically to web directory immediately and application picks from web after that.
• Ideally we should be changing src directory and should not code in web directory in this kind of setup. web directory is kind of classes directory and NetBeans will use it to run application. 

  

3. Run and Quick test: For this demo I just make changes in index.html inside src directory. I will change quickly change <h2 class="demo-profile-name">James</h2> to <h2 class="demo-profile-name">Sanjeev</h2>. I just need to save it. I find that changes are automatically pushed to web directory and even my browser is refreshed automatically to show new changes.

4. Release using Grunt from NetBeans

To run grunt commands for project, I can right click on project and select Grunt Tasks. There are few tasks already listed. To release I need to use serve:release task, which is not listed, so I can go to advance and create my own task.

Under grunt tab log you will see location of apk file.

Thats all. Now you can move and install this apk in android phone.

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