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

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

agenda.jsp

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

Data & Content

PRIMETIME AUDIENCE

MANAGER

AEM Apps: Key Takeaways

Leverage tools your

marketers know and

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

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

Problem: Mobile Platforms in 2015

Objective-

C/Swift

C#, C++

Vendor lock-in

Problem: Content Reuse

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

Your website can change & adapt in an instant

How about your app?

Problem: Stale Content Gets Uninstalled

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

Web tech

Write once, run everywhere

Build apps with technology you know and love

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)

Solution: Vendor lock-in

PhoneGa

Solution: Mobile Platforms

PhoneGap

A cross-platform app framework

Initially PhoneGap, created by Nitobi

Donated to ASF in 2011 as Cordova

Supported platforms

Android

WP7, WP8, Windows 8

Amazon Fire OS

and more…

agenda.jsp

"<ul> " +

" <li> ⇛ Solution: AEM Apps " +

" <ul> " +

" </ul> " +

" </li> " +

"</ul> ");

AEM Apps

AEM Apps: Highlights

Central Control of Apps

Direct Distribution to Stakeholders

“Drag and drop” Editor

Leverage existing content from DAM

Quickly and easily create new app screens

App Updates

Mobile Analytics

Push Notifications

Solution: Stale content

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

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

"<ul> " +

" <ul> " +

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

" </ul> " +

" </li> " +

"</ul> ");

In the Beginning: AEM Apps Starter Kit

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

AEM Apps Starter Kit: 4 easy steps

1. Clone the AEM Apps starter kit from github

$ git@github.com: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

Could it really be that easy?

agenda.jsp

"<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

Your developers are already testing

(I hope!)

Prove code correctness

Avoid regressions

Facilitate refactoring

Encourage better design

Validation Toolkit

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

Developmen

Staging Production

Internal Stakeholders Users

Testing Demo

agenda.jsp

"<ul> " +

" <ul> " +

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

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

" </ul> " +

" </li> " +

"</ul> ");

App Management

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

“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

When done wrong: can be costly, time consuming,

and a nuisance for users

AEM Apps Dashboard

App Management Demo

AEM Apps: Key Takeaways

Leverage tools your

marketers know and

1Simplify your app

management pain

points

2 3Flexible platform to

deliver next

generation of mobile

experiences

Apps Made Easy

But wait… There’s More!

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

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

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

Creative References

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/

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/

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

Technology

Jefferson Andrade - Esri Dev Summit 2016 #01

Adobe Digital Marketing Summit: Creating sustainable value for ubs with adobe experience manager

Medical Education and the Lambda Grid Parvati Dev, PhD Stanford University SUMMIT Lab Parvati Dev, PhD Stanford University SUMMIT Lab

Adobe Ace Study Gui Dev 24158

Adobe Summit - Data Storytelling

Chrome Dev Summit Highlights (NYC GDG Dec 2013)

Mobile App Dev and Content Management with Adobe Experience Manager

Adobe Summit 2012 - Lunch n' Learn

Adobe Summit 2017 - Takeaways

Spark Summit East 2015 - Adv Dev Ops - Student Slides

Mobile Dev Summit 2010 - Sridhar Ranganathan

2012 Co Dev Asia Summit

Unflitered: SXSW & Adobe Summit

Jefferson Andrade - Esri Dev Summit 2016 #02 - Dev Tools

Apps for Local Government - Esri Dev Summit

Dev Tools Keynote Summit 2014

Adobe Digital Marketing Summit EMEA 2012

Adobe Summit - Data-Driven Marketing Attribution

Adobe Experience Manager Dev/Ops Engineer · PDF fileAdobe Experience Manager Dev/Ops Engineer . Adobe Certified Expert Exam Guide . ... • Can manage experienced developers who may

Dev Summit Sf Flash Search V5