Upload
circuit
View
271
Download
3
Tags:
Embed Size (px)
Citation preview
CIRCUIT – An Adobe Developer EventPresented by ICF Interactive
Hybrid App Development with
AEM Apps
Pat McLoughlin & Paul Michelotti
Crushin’ It 2012 - Present
CIRCUIT – An Adobe Developer EventPresented 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)
CIRCUIT – An Adobe Developer EventPresented by ICF Interactive
Technical Overview● AEM Apps● Cordova● Ionic Framework● Angular● AWS Elastic Beanstalk● AWS Lambda● AWS SNS● AWS DynamoDB
CIRCUIT – An Adobe Developer EventPresented by ICF Interactive
Introduction toAEM Apps
CIRCUIT – An Adobe Developer EventPresented 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
CIRCUIT – An Adobe Developer EventPresented 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
CIRCUIT – An Adobe Developer EventPresented by ICF Interactive
CIRCUIT – An Adobe Developer EventPresented by ICF Interactive
A Moment on Angular● A Single Page web application framework
CIRCUIT – An Adobe Developer EventPresented 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
CIRCUIT – An Adobe Developer EventPresented 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
CIRCUIT – An Adobe Developer EventPresented by ICF Interactive
-
CIRCUIT – An Adobe Developer EventPresented by ICF Interactive
Authoring a Single Page Application
CIRCUIT – An Adobe Developer EventPresented 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.
● Enter the Ionic AEM Apps Library
CIRCUIT – An Adobe Developer EventPresented 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
CIRCUIT – An Adobe Developer EventPresented by ICF Interactive
Enter the Ionic AEM Apps Library
AKA - A Maven project full of our opinions on how to do
stuff more better
CIRCUIT – An Adobe Developer EventPresented 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
CIRCUIT – An Adobe Developer EventPresented 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
CIRCUIT – An Adobe Developer EventPresented by ICF Interactive
Content Reuse
CIRCUIT – An Adobe Developer EventPresented 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
CIRCUIT – An Adobe Developer EventPresented by ICF Interactive
How a Single Page Web Application
Becomes a Cordova Application
CIRCUIT – An Adobe Developer EventPresented 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...
CIRCUIT – An Adobe Developer EventPresented 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
CIRCUIT – An Adobe Developer EventPresented 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
CIRCUIT – An Adobe Developer EventPresented by ICF Interactive
Wrapping Up
CIRCUIT – An Adobe Developer EventPresented 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 [email protected]@PaulMichelotti on Twitter
Pat [email protected]@CityPat on Twitter