circuit 2015 - hybrid app development with aem apps

CIRCUIT – An Adobe Developer EventPresented by ICF Interactive

Hybrid App Development with

AEM Apps

Pat McLoughlin & Paul Michelotti

Crushin’ It 2012 - Present


Application Goals● Content reuse from the CIRCUIT website● Native application interactions (Twitter, Maps)● Use of Push Notifications● Location Awareness (Geofencing, iBeacons)● Engagement via Gameification ● Cross platform deployment (iOS and Android)


Technical Overview● AEM Apps● Cordova● Ionic Framework● Angular● AWS Elastic Beanstalk● AWS Lambda● AWS SNS● AWS DynamoDB


Introduction toAEM Apps


Why Did we Use AEM Apps?● Application Authorability● Content reuse across AEM - Canonical Content● Over the air app updates - Update your app without

resubmission to the app store● Business friendly application dashboard● Integration with PhoneGap Build● Integration with Analytics


A Word on Cordova● Mobile application framework for building apps using web

technologies● Exposes native functionality via a Javascript API● Typically encapsulates single page web applications


A Moment on Angular● A Single Page web application framework


A Hot Minute on Ionic● Ionic has done the heavy lifting of making your web app feel

like a native app● CSS and Javascript to assist with the general look and feel of

your application, visually taking into account the user’s platform

● A number of directives to build up application views, states, navigation, lists, etc…

● A robust state history framework allowing for the caching of views during app navigation


More Love for Ionic● Provides tooling around Cordova and is continuously adding

more tools to their proverbial belt such as icon and splash screen generation, push notification services, and testing frameworks

● ngCordova - an Angular wrapper around a number of the most commonly used Cordova plugins is produced by the fine folks at Ionic


-


Authoring a Single Page Application


Authoring an Entire Application on a Single Page Would be Worse than Fitting an Entire Presentation onto a Single Slide

● Each state in the application lives as a page inside of AEM● Application authors are able to author using a paradigm with

which they are familiar. ● Authors working in AEM have an expectation of inline

editability. That is to say, they expect that the environment they author in projects a reasonable facsimile of the finished product

● Authors also have an expectation of the ability to preview their work prior to activation. This is especially important in a production environment

● Accomplishing this is non trivial when the final product will be a single page application.

● Enter the Ionic AEM Apps Library


AEM Author Expectations● Page Based component editing - authors expect to author by

pulling components onto pages and modifying the content and configuration of those components via edit dialogs

● Inline Editability - What an author is editing should be a reasonable facsimile of the final product

● Preview - authors expect to be able to preview their updates prior to publishing


Enter the Ionic AEM Apps Library

AKA - A Maven project full of our opinions on how to do

stuff more better


Pages as Application States● Each page is an Application State● The parent / child relationship between pages is mirrored in

the parent / child relationship between their states● The Main Menu state and its child states in the CIRCUIT

application is an example of this relationship


Root Page as Application Root● Application root is the entry point of the application● Houses the logic to dynamically generate the Application

module / bootstrapping mechanisms● Determines the Angular Application’s required modules

based on the components used in the app● Allows for a preview view of the functional application to the

extent that the application can function in a browser


Content Reuse


Goals of Content Reuse● Make use of the existing Speakers and Sessions content

from the CIRCUIT website within the app without reauthoring ● Session and Speaker lists act as data within the application

to enable viewing of individual Session and Speaker details● Packaging of Session and Speaker data within the

downloadable app


How a Single Page Web Application

Becomes a Cordova Application


Structure of a Cordova Application● hooks

○ Houses Javascript code which will run at various points in the app build lifecycle

● www○ config.xml

■ Defines a number of application properties such as the url the webview should be directed to initially

○ Your application assets such as html, css, js, images, etc...


From AEM to Cordova● Content Sync mechanisms are used to produce a .zip whose

contents follow the standard Cordova app structure● A number of Content Sync configurations leveraging

numerous Content Handlers work in concert to put together the application archive from your application’s content, other used content, static files, and configuration

● Unzipping the result you will find a folder structure which exactly matches what is expected of a Cordova application


Over the Air Updates● Content Sync also enables Over the Air application updates● A check for new application content is performed at application

startup● The last updated timestamp is checked against the content

sync endpoint on publish● Content Sync creates a new .zip of changes● Current content on the device is copied to a new location and

new content is written over the current● Finally the application points the webview to the new location


Wrapping Up


Final Thoughts in the form of Links● Ionic AEM Apps Library - https://github.com/Citytechinc/ionic-

aem-apps ● Ionic Framework - http://ionicframework.com/ ● AEM Apps Starter Kit - https://github.com/blefebvre/aem-

phonegap-starter-kit

Paul [email protected]@PaulMichelotti on Twitter

Pat [email protected]@CityPat on Twitter

https://github.com/Citytechinc/ionic-aem-apps



http://ionicframework.com/

https://github.com/blefebvre/aem-phonegap-starter-kit



mailto:[email protected]




circuit 2015 - hybrid app development with aem apps

Technology

adobe developer event

icf interactive authoring

icf interactive introduction

aem application authors

single page application

entire application

application views

application lives