© 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. 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)