Building Mobile Apps: A PhoneGap Enterprise Introduction for Developers

© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 1

© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Lab 712: Building Mobile Apps: A PhoneGap Enterprise Introduction for

DevelopersAnthony Rumsey | Computer Scientist

#AdobeSummit


Agenda

1 | Welcome and Overview

2 | AEM and PhoneGap Introduction

3 | App Development & Authoring

4 | Reviewing App Content

5 | Adobe Mobile Services Analytics


Anthony RumseyComputer Scientist, Adobe

@planetrumsey


John FaitSoftware Development Lead, Adobe

@Johnk2j


Current app development and management practices are unsustainable

1. Multiple devices.

2. Multiple platforms.

4. Rising costs.

3. App updates workflow.

© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

What is PhoneGap Enterprise?


Centralize app management and testing

10

Manage all apps from one interface in Experience Manager

Distribute apps directly to stakeholders to test & monitor


Continuously improve the app experience without taxing developer resources

11

Business teams can update app screens using “drag and drop” interface

Leverage existing content from DAM

Quickly and easily create new app screens

Publish app updates directly to all platforms


Goals

Develop a

PhoneGap

Enterprise Project

1Mange and Review

App Content

2Add usage tracking

to an App

3


Module 1

Adobe Experience Manager &

PhoneGap Enterprise Introduction

Sites Assets Communities Forms Apps


Objectives

Start a local AEM author instance

Explore the AEM interface

Explore the AEM Apps dashboard

Edit an application’s details


Module 1: Lessons

17

AEM Basics

On the desktop, open up the “AEM-Apps-Lab/author” directory

Double-click the aem-author-4502.jar file

Starting the publish server can be skipped

Navigate to http://localhost:4502 with Chrome browser

AEM Apps Basics

Navigate to the Apps console of the AEM interface

Explore the Geometrixx App dashboard

Edit the application’s name and description

http://localhost:4502


Module 2

PhoneGap Introduction


Objectives

Understand what PhoneGap offers to mobile application developers

Become familiar with the structure of a PhoneGap app

Understand the PhoneGap CLI environment

Create an app from scratch with PhoneGap CLI

Test the application in the simulator


Module 2: Lessons

23

These exercises will be instructor led

Review PhoneGap documentation

http://docs.phonegap.com/

Explore the structure of a typical PhoneGap application

https://github.com/phonegap/phonegap-start

Create a new PhoneGap app on command line

> phonegap create my-lab-app

> cd my-lab-app

> phonegap run ios

http://docs.phonegap.com/

https://github.com/phonegap/phonegap-start


Module 3

App Development


Objectives

Explore an AEM app’s project structure

Create a new component using device APIs

Install an app to AEM


Module 3: Lessons

27

All app content committed to repository in GitHub

https://github.com/Adobe-Marketing-Cloud-Apps/summit-

developer-lab

Explore project structure

~/Desktop/AEM-Apps-Lab/712/summit-developer-lab

Develop a new camera component by using device APIs

Install complete project to AEM using maven build commands

https://github.com/Adobe-Marketing-Cloud-Apps/summit-developer-lab


Module 4

Managing App Content


Objectives

Create a page using templates

Edit a page using components and assets

Preview a page

Learn the key parts of the easy-to-use AEM authoring interface


Module 4: Lessons

30

Create a new mobile app page

Use PhoneGap Page template

Edit a mobile app page

Add components to a page

Text Component

Image Component

Camera Component

Preview a page


Module 5

Reviewing App Content


Objectives

Download an app as a PhoneGap app payload

Build and run your app via PhoneGap CLI

Deploy an app to PhoneGap Enterprise viewer


PhoneGap Enterprise Viewer


Module 5: Lessons

34

PhoneGap CLI

Download Source from build tile

Unzip assets

> phonegap build ios

> phonegap emulate ios

PhoneGap Enterprise Viewer

Launch the App locally

Execute launch-sim.command

Select PhoneGap Enterprise icon

Select “Adobe Experience Manager” option

Server Address -> localhost:4502

Username: admin

Password: admin


Module 6

Adobe Mobile Services Analytics


Objectives

Add Adobe Mobile Services to your PhoneGap application

Add some analytic tracking to a PhoneGap component

Add AMS analytics reporting to your app

Test your app’s lifecycle tracking


Module 6: Lessons

37

Add Tracking capability to your app

Instrument the camera component to track analytics data

Add Analytics Reporting

Add AMS cloud config

Upload AMS SDK config to app from Dashboard

Test Analytics Reporting

Use Bloodhound


Apps Made Easy


PhoneGap Enterprise: Key Takeaways

Leverage tools your

marketers know and

love

1Simplify your app

management pain

points

2 3Flexible platform to

deliver next

generation of mobile

experiences


Q&AAnthony RumseyTwitter: @planetrumsey

John FaitTwitter: @Johnk2j


Every Session Tuesday Wednesday Thursday

$100Gift Card

$10Gift Card

$100Gift Card

SKISwag

Take the Survey to WIN!(“surveys” section of mobile app)


Building Mobile Apps: A PhoneGap Enterprise Introduction for Developers

Technology

adobe confidential

adobe primetime

adobe campaignplan

adobe targettest

adobe systems incorporated

adobe media optimizermanage

marketing suites

marketing clouds