Summit 2015: Mobile App Dev and Content Management with Adobe Experience Manager

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

Mobile App Development and Content Management with Adobe Experience

ManagerBruce Lefebvre - #AdobeSummit


Bruce LefebvreComputer Scientist Lead at Adobe

@brucelefebvre


Picture this…


There must be a better way

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

agenda.jsp

6

<%

out.println("<h1> AGENDA </h1>" +

"<ul> " +

" <li> Problem? </li>" +

" <li> Solution: AEM Apps " +

" <ul> " +

" <li> Creation </li>" +

" <li> Validation </li>" +

" <li> Management </li>" +

" <li> Updating </li>" +

" </ul> " +

" </li> " +

"</ul> ");

%>


SOLUTIONS

CORE SERVICES

Adobe Marketing Cloud

PLATFORM

ANALYTICSEXPERIENCE

MANAGER

CAMPAIGNMEDIA

OPTIMIZER

SOCIAL TARGET

ACTIVATION

ASSETS

COLLABORATION

EXCHANGE

MOBILE

PROFILES &

AUDIENCES

USER MANAGEMENT

& ADMINISTRATI

ON

Data & Content

PRIMETIME AUDIENCE

MANAGER


AEM Apps: 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


Apps Made Easy


Adobe 2014 Mobile Consumer Survey Results

10

0

10

20

30

40

50

60

70

Android iPhone Windows Blackberry

Primary Mobile Device Platform (avg. UK, US, FR, DE)

Primary mobile…

Pushed to app…

Yet, 71% of companies use third-party

developers for at least some of their mobile

apps


Problem: Mobile Platforms in 2015

11

Objective-

C/Swift

C#, C++

Java

Java


Vendor lock-in



Problem: Content Reuse

14

Silo’d teams create inconsistent branding across channels

Reusing content from other mediums is tedious, error prone, and expensive

Marketing team Desktop teamAnalytics team Mobile team


Problem: The Last Millisecond

15

Your website can change & adapt in an instant

How about your app?


Problem: Stale Content Gets Uninstalled

16

Apps which don’t continue to offer value

will be removed

Store driven updates are easy to ignore


1. Multiple devices.

2. Multiple platforms.

4. Rising costs.

3. App updates workflow.

Problem: State of App Development in 2015


THE END


Solution: Vendor lock-in

19

Web tech

Write once, run everywhere

Build apps with technology you know and love

HTML

CSS

Topcoat

JavaScript

AngularJS

jQuery

etc…“If a browser doesn’t do something its

not because it can’t; it’s just because

we haven’t gotten around to

implementing that part yet.”

-Brian

LeRoux


Things you can do on Mobile

Nothing ALL the things

Mobile website Native app(2015)

Gap!


Solution: Vendor lock-in

21

PhoneGa

p


Solution: Mobile Platforms

22

PhoneGap

A cross-platform app framework

Initially PhoneGap, created by Nitobi

Donated to ASF in 2011 as Cordova

Supported platforms

iOS

Android

BB10

WP7, WP8, Windows 8

Amazon Fire OS

Tizen

and more…


agenda.jsp

23

<%


"<ul> " +


" <li> ⇛ Solution: AEM Apps " +

" <ul> " +





" </ul> " +

" </li> " +

"</ul> ");

%>


AEM Apps


AEM Apps: Highlights

25

Central Control of Apps

Direct Distribution to Stakeholders



26

“Drag and drop” Editor

Leverage existing content from DAM

Quickly and easily create new app screens

App Updates



27

Mobile Analytics

Push Notifications


Solution: Stale content

28

Update app content over-the-air with Content Sync

Delta updates only include files that have changed

Changes can include:

Page updates/additions/deletions

CSS styling changes

JavaScript changes


Solution: Content re-use

29

Consolidate content in AEM

Content reuse made easy via existing AEM mechanisms

Business users need only one set of tools and skills for managing both sites and app


agenda.jsp

30

<%


"<ul> " +



" <ul> " +

" <li> ⇛ Creation </li>" +




" </ul> " +

" </li> " +

"</ul> ");

%>


In the Beginning: AEM Apps Starter Kit

31

AEM Apps projects live in a SCM system

Required:

Ability to use Maven to build and install into AEM

Ability to initially customize app branding, title, and source paths

Use the AEM Apps starter kit to bootstrap your apps project:

https://github.com/Adobe-Marketing-Cloud-Apps/aem-phonegap-starter-kit

https://github.com/Adobe-Marketing-Cloud-Apps/aem-phonegap-starter-kit


AEM Apps Starter Kit: 4 easy steps

32

1. Clone the AEM Apps starter kit from github

$ [email protected]:Adobe-Marketing-Cloud-Apps/aem-phonegap-starter-kit.git

2. Customize with your brand & app name

$ ./customize-app.sh bruceInc SummitApp

3. Install to your AEM author instance

$ mvn -PautoInstallPackage clean install

4. Author in AEM

http://localhost:4502/aem/apps.html

http://localhost:4502/aem/apps.html


Could it really be that easy?


agenda.jsp

34

<%


"<ul> " +



" <ul> " +


" <li> ⇛ Validation </li>" +



" </ul> " +

" </li> " +

"</ul> ");

%>


"Always code as if the guy who ends up maintaining your

code will be a violent psychopath who knows where you

live."

- Martin Golding


Testing Your App

36

Your developers are already testing

(I hope!)

Prove code correctness

Avoid regressions

Facilitate refactoring

Encourage better design


Validation Toolkit

37

Server side

Unit testing with JUnit

Client side

Unit testing with Jasmine

Invoked by the Karma test runner

AEM integration testing

Hobbes

Acceptance testing

PGE App


Acceptance: PGE App

38

Developmen

t

Staging Production

Internal Stakeholders Users


Testing Demo


agenda.jsp

40

<%


"<ul> " +



" <ul> " +



" <li> ⇛ Management </li>" +

" <li> ⇛ Updating </li>" +

" </ul> " +

" </li> " +

"</ul> ");

%>



App Management

42

Marketers, developers, and creatives

are your mobile engagement trifecta

Yet tools are often built with only the

developers in mind

Results are in:

60% of marketers are including

analytics as part of their strategy

66% are using push notifications

Why isn’t everyone?


App Updates

43

“Don’t update the app to this version! New version

with fix coming soon. Found severe usability issue.”

Keep app content relevant to keep users coming

back

When done wrong: can be costly, time consuming,

and a nuisance for users


AEM Apps Dashboard

44


App Management Demo


AEM Apps: 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


Apps Made Easy


But wait… There’s More!

48

S813 - What’s new in Adobe Experience Manager Apps: Top 5 hottest features

Tuesday (TODAY), Mar 10, 4:00 PM - 5:00 PM

L712 - Building mobile apps: Introduction to Adobe PhoneGap Enterprise for developers

Tuesday (TODAY), Mar 10, 4:30 PM - 6:30 PM

L718 - Managing mobile apps: Introduction to Adobe PhoneGap Enterprise for marketers

Wednesday, Mar 11, 2:00 PM - 4:00 PM

Thursday, Mar 12, 9:30 AM - 11:30 AM

S814 - Learn first-hand how Coca-Cola used AEM Apps to build and manage their mobile

app

Wednesday, Mar 11, 2:00 PM - 3:00 PM


Q&ABruce LefebvreTwitter: @brucelefebvre


Every Session Tuesday Wednesday Thursday

$100Gift Card

$10Gift Card

$100Gift Card

SKISwag

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


adobe.com/go/summit2014portal


References

52

Adobe 2014 Mobile Consumer Survey Results:

https://solutionpartners.adobe.com/content/dam/collateral/APEXAssets_Public/54458_amc_mobile

_survey_report_ue_v3.pdf

Siegel, Ezra. 2013. Automatic app updates on iOS 7 will hurt app retention. Apptentive blog,

August 1. http://www.apptentive.com/blog/automatic-app-updates-on-ios7-app-retention

Jína, Vojtěch. 2013. JavaScript Test Runner Master’s Thesis. https://github.com/karma-

runner/karma/raw/master/thesis.pdf

https://solutionpartners.adobe.com/content/dam/collateral/APEXAssets_Public/54458_amc_mobile_survey_report_ue_v3.pdf

http://www.apptentive.com/blog/automatic-app-updates-on-ios7-app-retention

https://github.com/karma-runner/karma/raw/master/thesis.pdf


Creative References

53

Black Friday store image: Kim Bhasin / Business Insider http://www.businessinsider.com.au/photos-macys-black-friday-midnight-opening-2012-11

Egg cracking gif: http://www.buzzfeed.com/julianbrand/40-gifs-of-stupid-infomercial-people-6eof

Devices image: http://www.anchormobile.net/category/mobile-marketing/

Jail image: ©iStock.com/wsmahar - http://www.istockphoto.com/photo/hands-on-cell-bars-9019693

Stopwatch image: shutterstock/doomu - http://www.shutterstock.com/pic-111520028/stock-photo-silver-modern-stopwatch-on-a-white-background.html

Unixstickers ‘all the things’: http://www.unixstickers.com/stickers/meme-stickers/misc-all-the-things-meme-shaped-sticker

Bug image: http://en.wikipedia.org/wiki/Reduviidae

JUnit logo: http://junit.org/

Karma logo: http://karma-runner.github.io/0.12/index.html

Jasmine logo: http://jasmine.github.io/

http://www.businessinsider.com.au/photos-macys-black-friday-midnight-opening-2012-11

http://www.buzzfeed.com/julianbrand/40-gifs-of-stupid-infomercial-people-6eof

http://www.anchormobile.net/category/mobile-marketing/

http://www.istockphoto.com/profile/wsmahar

http://www.istockphoto.com/photo/hands-on-cell-bars-9019693

http://www.shutterstock.com/gallery-241948p1.html

http://www.shutterstock.com/pic-111520028/stock-photo-silver-modern-stopwatch-on-a-white-background.html

http://www.unixstickers.com/stickers/meme-stickers/misc-all-the-things-meme-shaped-sticker

http://en.wikipedia.org/wiki/Reduviidae

http://junit.org/

http://karma-runner.github.io/0.12/index.html

http://jasmine.github.io/

Technology

Summit 2015: Mobile App Dev and Content Management with Adobe Experience Manager