Skip to content
This repository has been archived by the owner. It is now read-only.

PhoneGap android app and Adobe Mobile Services

Alexis Cazes edited this page Oct 13, 2016 · 3 revisions
Clone this wiki locally

October 2016 MR : Xamarin, Unity, and PhoneGap plugins are updated to work with iOS and Android SDKs version 4.14.

There is another method to add Adobe Mobile Services but it is not documented here for the moment, maybe in near future


#Requirements

##Install PhoneGap

You can find the steps to install PhoneGap here

###Prerequisites

You will have to install the following prior installing PhoneGap:

Once you installed both of them make sure to run in command prompt:

git

You should obtain the following output if it installed successfully:

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation.  All rights reserved.

C:\Users\acazes>git
usage: git [--version] [--help] [-C <path>] [-c name=value]
           [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
           [-p|--paginate|--no-pager] [--no-replace-objects] [--bare]
           [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
           <command> [<args>]

The most commonly used git commands are:
   add        Add file contents to the index
   bisect     Find by binary search the change that introduced a bug
   branch     List, create, or delete branches
   checkout   Checkout a branch or paths to the working tree
   clone      Clone a repository into a new directory
   commit     Record changes to the repository
   diff       Show changes between commits, commit and working tree, etc
   fetch      Download objects and refs from another repository
   grep       Print lines matching a pattern
   init       Create an empty Git repository or reinitialize an existing one
   log        Show commit logs
   merge      Join two or more development histories together
   mv         Move or rename a file, a directory, or a symlink
   pull       Fetch from and integrate with another repository or a local branch

   push       Update remote refs along with associated objects
   rebase     Forward-port local commits to the updated upstream head
   reset      Reset current HEAD to the specified state
   rm         Remove files from the working tree and from the index
   show       Show various types of objects
   status     Show the working tree status
   tag        Create, list, delete or verify a tag object signed with GPG

'git help -a' and 'git help -g' lists available subcommands and some
concept guides. See 'git help <command>' or 'git help <concept>'
to read about a specific subcommand or concept.

###Install the PhoneGap CLI via npm with the following command from the Command Prompt (Win).

npm install -g phonegap@latest

###Test to ensure the PhoneGap CLI is properly installed by typing phonegap on the command line. You should see the following help text output displayed:

Microsoft Windows [Version 6.1.7601]
Copyright (c) 2009 Microsoft Corporation.  All rights reserved.

C:\Users\acazes>phonegap
(node:4932) fs: re-evaluating native module sources is not supported. If you are
 using the graceful-fs module, please update it to a more recent version.

Usage: phonegap [options] [commands]

Description:

  PhoneGap command-line tool.

Commands:

  help [command]       output usage information
  create <path>        create a phonegap project
  build <platforms>    build the project for a specific platform
  install <platforms>  install the project on for a specific platform
  run <platforms>      build and install the project for a specific platform
  platform [command]   update a platform version
  plugin [command]     add, remove, and list plugins
  template [command]   list available app templates
  info                 display information about the project
  serve                serve a phonegap project
  version              output version number
  push                 send test push notification
  analytics            turn analytics on or off, or view current status

Additional Commands:

  local [command]      development on local system
  remote [command]     development in cloud with phonegap/build
  prepare <platforms>  copies www/ into platform project before compiling
  compile <platforms>  compiles platform project without preparing it
  emulate <platforms>  runs the project with the flag --emulator
  cordova              execute of any cordova command

Options:

  -d, --verbose        allow verbose output
  -v, --version        output version number
  -h, --help           output usage information
  --no-update-notifier disable update notifier, to opt-out of update-notifier
                       change the 'optOut' property to 'true' in
                       ~/.config/configstore/update-notifier-phonegap.yml

Examples:

  $ phonegap help create
  $ phonegap create path/to/my-app
  $ cd my-app/
  $ phonegap run ios
  $ phonegap analytics on

##Install Android Studio

You can find Android Studio installer here

Download and install Android 4.4.2 (API 19) or above from Android SDK Manager

PhoneGap Minimum requirement is Android 4.4.2 (API 19). Go to Anroid SDK Manager from Android Studio and download and install it or the version above.

Download and Install Java JDK

Make sure to download the Java JDK Once downloaded, install it.

Make sure System Variables are in proper setting

###Create System Variable ANDROID_HOME

  1. Click on Window Start button
  2. Right Click on Computer and select properties
  3. The select "Advanced System Settings"
  4. Under Advanced tab select "Environment Variables"
  5. Under System Variables click on new
  6. Enter the following details:
  • Name: ANDROID_HOME
  • Variable Value: C:\Users[Your Username]\AppData\Local\Android\sdk
    • Make sure to change [Your Username] to your username

###Create System Variables JAVA_HOME

  1. Follow steps 1 to 6 from "Create System Variable ANDROID_HOME"
  2. Details for JAVA_HOME
  • Name: JAVA_HOME
  • Variable Value: C:\Program Files\Java\jdk1.8.0_92
    • Note that your version of JDK install might be different so change version as needed

###Edit path System Variables

  1. Follow Steps 1 to 4 under "Create System Variable ANDROID_HOME"
  2. Find Path under System Variables and click on edit
  3. Add to path ";%ANDROID_HOME%\platform-tools"
  4. Add to path ";%ANDROID_HOME%\tools"
  5. Add to path ";%JAVA_HOME%\bin"
  6. Save

Download files from Adobe Mobile Services

1.] Connect to Adobe Mobile Services using same credentials as for Adobe Analytics or Accessing it via Adobe Marketing Cloud

2.] If you have not created an app, create one

3.] Select your app and go to "Manage App Settings"

4.] Configure the app correctly

5.] Go at the bottom and download the following and extract the files to a folder to reuse later on Adobe Mobile Services files

Create PhoneGap App

1.] Open a command prompt

2.] Navigate to the folder in which you want to create your phonegap app navigate folder1

3.] Use the following command

phonegap create ProjectPath PackageName ProjectName

For example:

phonegap create myandroid2 com.my.android2 My_Android_Apps2

4.] Now go to the location where you created your PhoneGap App and you should see your folder name that will correspond to ProjectPath: i.e "myandroid2" create phonegap app

5.] In the command prompt navigate into your phonegap app folder

cd myandroid2

6.] in the command prompt enter

phonegap build android

7.] You should see additional files and folders under plugins and platform folder in your phonegap folder androidFiles

#Add PhoneGap to Android Studio project

1.] In Android Studio on the "Welcome to Android Studio"screen click on "Import Project (Eclipse ADT,Gradle,etc.)" import phonegap project

2.] In the new screen locate where you have create your phonegap android app folder and select [YOUR PHONEGAP APP FOLDER]/platform/android folder and press OK

Android phonegap folder

  • If a popup is displayed to upgrade the version of Gradle, do so. gradle version
  • If this error displayed, click on link in red rectangle fixGradle

3.] Wait that gradle build is completed

4.] Put the files downloaded earlier in the correct location

  • ADB_Helper.js: place it under android/android/assets/www
  • ADBMobileConfig.json: place it under android/android/assets
  • ADBMobile_PhoneGap.java: place it under android/android/src/[PackageName]
  • adobeMobileLibrary-4.x.x.jar: place it under android/android/src

filestree

5.] Add adobeMobileLibrary-4.x.x.jar as lib

  • Click right on adobeMobileLibrary-4.x.x.jar and select "Add as Library" add as library

6.] Update config.xml

  • Go to android/android/res/xml/config.xml
  • Add the following to the file:
<feature name="ADBMobile_PhoneGap">
	<param name="android-package" onload="true" value="[Packagename].ADBMobile_PhoneGap" />
	<param name="onload" value="true" />
</feature>

Example:

<feature name="ADBMobile_PhoneGap">
	<param name="android-package" onload="true" value="com.my.androidapp1.ADBMobile_PhoneGap" />
	<param name="onload" value="true" />
</feature>

7.] Update MainActivity.java with the following to enable lifecycle tracking

  • Update onCreate
@Override
public void onCreate(Bundle savedInstanceState)
{
	super.onCreate(savedInstanceState);
	//Enable Adobe Mobile Services debugging
	com.adobe.mobile.Config.setDebugLogging(true);
	//Enable Adobe mobile Services lifecycle tracking
	com.adobe.mobile.Config.setContext(this.getApplicationContext());
	// Set by <content src="index.html" /> in config.xml
	loadUrl(launchUrl);
}
  • Update onResume
@Override
public void onResume(){
	super.onResume();
	//Adobe Mobile Services lifecycle tracking
	com.adobe.mobile.Config.collectLifecycleData();
}
  • Update onPause
@Override
public void onPause(){
	super.onPause();
	//Adobe Mobile Services lifecycle tracking
	com.adobe.mobile.Config.pauseCollectingLifecycleData();
}

8.] Update index.html with the reference of ADB_Helper.js

  • Go to android/android/assets/www/index.html
  • Add the following reference:
<script type="text/javascript" charset="utf-8" src="ADB_Helper.js"></script>

helper reference

9.] You can now call ADB Helper functions to send data to Adobe Analytics

Example: Calls can be made by making calls to the ADB Helper in the javascript files. For example, add the following line of code to the onDeviceReady function in the index.js file:

  • Go to android/android/assets/www/js/index.js
  • Add ADB.trackState("PhoneGap App ready 1",null); to onDeviceReady
 onDeviceReady: function() {
        app.receivedEvent('deviceready');
        ADB.trackState("PhoneGap App ready 1",null);
    },

10.] Now simply test on a Devices and you should see ADB data being sent logs