Application Deployment with Android Devices

Application Deployment with Android Devices

The following steps assume you have already created a WebClient Mobile application.

The process describes the steps to perform the installation of Cordova/PhoneGap, adding the necessary plugins, configure the application launch, create and setup the Android project, selection of the execution device, and executing the application.

  1. Installing PhoneGap:
    1. This can only be done after Node.js is installed, ensure it has been installed properly.
    2. Open the command line on the machine.
    3. Execute the following Command:

      npm install cordova

  2. Create the Project via the following command where the project name is specified:

    cordova create TestRosedor com.cmfirstgroup.TestRosedor TestRosedor

  3. Add the Android Platform via the following command: 

    cordova platform add android

  4. Add the necessary Plugins via the following command:

    Cordova plugin add org.apache.cordova.pluginname

    This is only the structure of all the plugins and you can add all the plugins that you need for your application.

    NOTE: The selection of the plugins to include depends on your application needs. Determine the type of plugins, such as the CAMERA, based on your application requirements.

  5. Configure the application. In the directory you have created there is a folder called www:

    This is where all work will be done.

    The index.html file is loaded up upon the application launch. The default index.html file should have everything else you need.

    A sample index.html file will look something like this:
    [textbox]
  6. Prepare the App for the required platform via the command:

    cordova prepare android

  7. Go to the app in the output folder of the workspace in Windows explorer.

  8. Then open the command prompt with Shift + Right Click, and Open Command Prompt Here:

  9. Change directory to gen:

    Cd gen

  10. Then enter the command to build the application’s production release:

    sencha app build production

  11. Go to Eclipse and refresh the Java Project, rosedorJava in this example.

  12. Note that in the Output folder in App/gen/build there is a new folder for production.

    Open Production and locate the HSync Folder. Copy all contents in HSync.

  13. Then import the Android project if you don´t already have in the workspace. If is already imported go to step 14.
  14. Right click on the Android Project, select properties, resource and resource filter. Remove the files that appears, if they do.

    In this example there was nothing to remove. The list should be empty as exemplified:

  15. Refresh the Android project, go to assets, and open the www folder. 
    Create a new folder that will be named HSync and paste all that we copied before in from the Output folder.
  16. Then in www > js folder search for the file index.js:

  17. Open index.js and paste the following at the location specified:

    window.location = './HSync/index.html' ;

  18. Then in the folder www search for the file index.html:
  19. Open index.html and include the following at the specified location:

    window.open(“./HSync/index.html”, “_self”)

  20. Go to www and search for index.html again:
  21. Open index.html and include the following at the specified location:

    window.open(“./HSync/index.html”, “_self”)

    NOTE: The two index.html files are modified this way to avoid going to the command line and enter the commandcordova prepare android.

    IMPORTANT: Remember that one file is located in the asset folder and the other one in the www folder.
  22. Go to run, run configuration, go to android application, go to target tab, and select Always Prompt to Pick Device.Close.

  23. Go to your cellphone in Developer Option
  24. In Developer Option select USB debugging.
  25. Go to Android project, right click, and select run as Android application:

  26. See Eclipse will ask you to choose a device, so choose your cellphone.

  27. After you choose, eclipse will install the application in your cellphone and we are going to see the application running in the cellphone.

    • Related Articles

    • Deployment Configurations (Runtime)

      Configuration settings between Components CM evolveIT installation and configuration process set up all required components automatically but all in one in single server. From scalability and performance reasons, multi-Server Deployment is ...
    • Dashboard Metrics Application View

      This document will cover the basics of the CM evolveIT Dashboard Metrix. There will be a discussion of the different views available in the dashboard metrics.   After completing this document, you should have a basic understanding of the CM evolveIT ...
    • Calling WebClient from an External Application

      This section demonstrates how to pass a parameter to WebClient function. The following example is based on wxpcourse60 model calling the function WXwF, which prompts the user to insert an item record. The first step is to create a URL which calls the ...
    • Add Capability to Define the Entry Point of the Application

      The entry point can be specified in the obclient.properties file. Eclipse In Eclipse look for obclient.properties and specify the entry point as the main page, althout it can be the login page too. Add Generation.Custom.EntryView=view.Main In this ...
    • CA 2E application to Web/API Migration POC

      The Purpose of this Article is to Provide the Steps to Gather Data Needed for a 2E to Web POC Please share item #1 and #2 first, if #3 and #4 require significant additional time. 1. Create a save file of the 2E model library. Model Library (use ...