Mobile App Dev and Content Management with Adobe Experience Manager

29-30 April, 2015 | ICC, ExCel, London

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

ANALYTICSEXPERIENCEMANAGER

CAMPAIGNMEDIAOPTIMIZER

SOCIAL TARGET

ACTIVATION

ASSETS

COLLABORATION

EXCHANGE

MOBILE

PROFILES &

AUDIENCES

USER MANAGEMENT

& ADMINISTRATI

Data & Content

PRIMETIME AUDIENCE MANAGER

Apps Made Easy

Problem: Mobile Platforms in 2015

Objective-C/Swift

C#, C++

Vendor lock-in

Problem: Content Reuse

Siloed teams create inconsistent branding across channels Reusing content from other mediums is tedious, error prone, and expensive

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 Open standards, open platforms Delivering content to many form factors Build apps with technology you know and

“If a browser doesn’t do something it’s 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

Adobe PhoneG

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> ");%>

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

• Leverage your existing investment in AEM with workflows, permissions, machine translations, etc.

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> ");%>

AEM Apps Starter Kit: 4 easy steps

1. Download the AEM Apps starter kit from github

$ git clone 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 install

4. Author in AEM

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

Could it really be that easy?

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> ");%>

"Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live."

- Martin Golding

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

Development

Staging Production

Internal Stakeholders Users

Testing Demo

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> ");%>

Mobile Maturity

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 back

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 love

1Simplify your app management pain

points

2 3Flexible platform to deliver next generation of

mobile experiences

Apps Made Easy

Q&AIf this session supports questions sent in via the app just go to

Summit Interact Your question, or one similar, may already be in the queue

Bruce Lefebvre@brucelefebvre

Go HERE, do THIS, and you could WIN!

Log in for a personalisedexperience.

Use the app to interact with Summit

Download the App

Complete at least 9 surveys

to enter the prize draw

Win an Apple Watch Sport

Survey available as the sessions

Give us feedbackIt takes less than a minute

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

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

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

Silo image: http://commons.wikimedia.org/wiki/File:Ralls_Texas_Grain_Silos_2010.jpg 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/

Mobile App Dev and Content Management with Adobe Experience Manager

Mobile

Asterisk as App Dev Platform

Cross platform facebook app dev

web app dev full

Android App Dev 2

Tungsten Fabric OpenStack Powered by · App = Finance, Deployment = Dev Web App App = Finance, Deployment = Prod Web App App = Finance, Deployment = Dev Web App App = Finance, Deployment

App Grid Dev With Coherence

o8i plsql app dev twp

App Dev CIO HandBook Final

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

Windows 8 app dev

CIS 260: App Dev I

How to install...Adobe Contribute CS4 Adobe Dev. entral CS4 Adobe Illustrator CS4 Adobe Illu. CS4 Library Adobe Illustrator CS5 Adobe Illu. CS5 Library Adobe lnDesign CS4 Adobe lnDesign

App Dev Guide

Productive & easy mobile app dev

E news adobe app

Workflow in app dev companies

Rational App Dev 7.5

Facebook App Dev 201 App Launch Distrib

App Dev Platforms & Frameworks

App Dev Ado