summit 2015: mobile app dev and content management with adobe experience manager
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.
Mobile App Development and Content Management with Adobe Experience
ManagerBruce Lefebvre - #AdobeSummit
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3
Bruce LefebvreComputer Scientist Lead at Adobe
@brucelefebvre
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 4
Picture this…
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5
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> ");
%>
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 8
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 9
Apps Made Easy
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Problem: Mobile Platforms in 2015
11
Objective-
C/Swift
C#, C++
Java
Java
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12
Vendor lock-in
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Problem: The Last Millisecond
15
Your website can change & adapt in an instant
How about your app?
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Problem: Stale Content Gets Uninstalled
16
Apps which don’t continue to offer value
will be removed
Store driven updates are easy to ignore
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 17
1. Multiple devices.
2. Multiple platforms.
4. Rising costs.
3. App updates workflow.
Problem: State of App Development in 2015
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 18
THE END
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 20
Things you can do on Mobile
Nothing ALL the things
Mobile website Native app(2015)
Gap!
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Solution: Vendor lock-in
21
PhoneGa
p
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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…
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
agenda.jsp
23
<%
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> ");
%>
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 24
AEM Apps
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
AEM Apps: Highlights
25
Central Control of Apps
Direct Distribution to Stakeholders
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
AEM Apps: Highlights
26
“Drag and drop” Editor
Leverage existing content from DAM
Quickly and easily create new app screens
App Updates
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
AEM Apps: Highlights
27
Mobile Analytics
Push Notifications
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
agenda.jsp
30
<%
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> ");
%>
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 33
Could it really be that easy?
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
agenda.jsp
34
<%
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> ");
%>
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 35
"Always code as if the guy who ends up maintaining your
code will be a violent psychopath who knows where you
live."
- Martin Golding
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Testing Your App
36
Your developers are already testing
(I hope!)
Prove code correctness
Avoid regressions
Facilitate refactoring
Encourage better design
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Acceptance: PGE App
38
Developmen
t
Staging Production
Internal Stakeholders Users
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 39
Testing Demo
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
agenda.jsp
40
<%
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> ");
%>
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 41
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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?
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
AEM Apps Dashboard
44
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45
App Management Demo
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 47
Apps Made Easy
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 49
Q&ABruce LefebvreTwitter: @brucelefebvre
© 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.
adobe.com/go/summit2014portal
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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/