Pat McLoughlin & Paul Michelotti - ICF Interactive
A technical deep dive into the waters of hybrid app development on the AEM apps platform and an introduction to the open source Ionic development framework for AEM Apps.
Automating Google Workspace (GWS) & more with Apps Script
CIRCUIT 2015 - Hybrid App Development with AEM Apps
1. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Hybrid App
Development with
AEM Apps
Pat McLoughlin &
Paul Michelotti
Crushin’ It 2012 - Present
2. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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)
4. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Introduction to
AEM Apps
5. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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
6. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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
7. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
8. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
A Moment on Angular
● A Single Page web application framework
9. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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
10. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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
11. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
-
12. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Authoring a Single
Page Application
13. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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.
14. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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
15. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Enter the Ionic AEM
Apps Library
AKA - A Maven project full of
our opinions on how to do
stuff more better
16. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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
17. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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
18. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Content Reuse
19. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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
20. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
How a Single Page
Web Application
Becomes a Cordova
Application
21. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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...
22. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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
23. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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
24. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
Wrapping Up
25. CIRCUIT – An Adobe Developer Event
Presented by ICF Interactive
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 Michelotti
paul.michelotti@icfi.com
@PaulMichelotti on Twitter
Pat McLoughlin
pat.mcloughlin@icfi.com
@CityPat on Twitter