building mobile apps: a phonegap enterprise introduction for developers

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

Upload: arumsey

Post on 16-Jul-2015

184 views

Category:

Technology


0 download

TRANSCRIPT

© 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

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

Agenda

1 | Welcome and Overview

2 | AEM and PhoneGap Introduction

3 | App Development & Authoring

4 | Reviewing App Content

5 | Adobe Mobile Services Analytics

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

Anthony RumseyComputer Scientist, Adobe

@planetrumsey

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

John FaitSoftware Development Lead, Adobe

@Johnk2j

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

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?

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

Centralize app management and testing

10

Manage all apps from one interface in Experience Manager

Distribute apps directly to stakeholders to test & monitor

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

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

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

Goals

Develop a

PhoneGap

Enterprise Project

1Mange and Review

App Content

2Add usage tracking

to an App

3

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

Module 1

Adobe Experience Manager &

PhoneGap Enterprise Introduction

Sites Assets Communities Forms Apps

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

Objectives

Start a local AEM author instance

Explore the AEM interface

Explore the AEM Apps dashboard

Edit an application’s details

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

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

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

Module 2

PhoneGap Introduction

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

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

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

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

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

Module 3

App Development

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

Objectives

Explore an AEM app’s project structure

Create a new component using device APIs

Install an app to AEM

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

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

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

Module 4

Managing App Content

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

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

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

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

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

Module 5

Reviewing App Content

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

Objectives

Download an app as a PhoneGap app payload

Build and run your app via PhoneGap CLI

Deploy an app to PhoneGap Enterprise viewer

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

PhoneGap Enterprise Viewer

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

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

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

Module 6

Adobe Mobile Services Analytics

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

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

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

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

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

Apps Made Easy

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

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

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

Q&AAnthony RumseyTwitter: @planetrumsey

John FaitTwitter: @Johnk2j

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

Every Session Tuesday Wednesday Thursday

$100Gift Card

$10Gift Card

$100Gift Card

SKISwag

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

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