Mobile apps

Made and managed in AEM

Hello

@brucelefebvre

Takeaways

Agenda

  `-- <root>
      |-- Problem?
      |-- Architecture
      |   |-- PhoneGap
      |   |   |-- CLI
      |   |   `-- Plugins
      |   |-- Content Sync
      |   `-- AngularJS
      |-- Dev Workflow
      `-- Author Workflow

“Don’t download, its not worth your time just go on the website or your phone browser or computer”

“Sticking to paper as it is a reliable source of getting what I need”

Mobile apps are hard

Content re-use across mediums

Constraints

• Performance
• Battery
• Connectivity

Opportunities

• Touch
• Sensors
• Notifications

AEM Apps

Now

• Modify app content w/o writing code
• Re-use author & business workflows
• Deliver 'Over the air' content updates

Analytics

Agenda

  `-- <root>
      |-- Problem?
      |-- Architecture
      |   |-- PhoneGap
      |   |   |-- CLI
      |   |   `-- Plugins
      |   |-- Content Sync
      |   `-- AngularJS
      |-- Dev Workflow
      `-- Author Workflow

Proven tech

PhoneGap

Apps built with web tech

you know and love

Platforms

• iOS
• Android
• WP7, WP8, Windows 8
• BB10
• Amazon Fire OS
• Tizen
• and more...

PhoneGap CLI

as of 3.0

CLI commands

  create <path>
  build <platform>
  install <platform>
  run <platform>
  local [command]
  remote [command]
  platform [command]
  plugin [command]
  help [command]
  version

PhoneGap Build

Hooks

Phases

• build
• compile
• docs
• emulate
• plugin_ls
• plugin_rm
• plugin_add
• platform_ls
• platform_rm
• platform_add
• prepare
• run

Plugins

Device-level APIs

• Camera
• Accelerometer
• File system
• Contacts
• Events
• Connection
• Notification
• <your plugin here>

Demo time

AngularJS

Why Angular?

Why Angular?

AngularJS

• Opinionated
• Two-way data binding
• Components (aka Directives)
• Single page apps
• Dependency injection
• Community

AngularJS Projects

• Ionic Framework
• Angular Snap.js
• angular-phonegap-ready

Angular + AEM Challenges

• Bring SPA paradigm to CMS
• Author mode VS. client side templating
  • Access control
  • Model & view separation
  • Reusability of author’s skills
• Performance

Angular + AEM

Routing

$routeProvider
    .when('/content/phonegap/geometrixx/apps/ng-geometrixx-outdoors/en/home', {
        templateUrl: 'home.template.html' + cacheKiller,
        controller: 'geometrixxoutdoorsenhome'
    })

Angular + AEM

Controllers

// Controller for page 'home'
.controller('geometrixxoutdoorsenhome', 
    ['$scope', '$http',
        function($scope, $http) {
            var data = $http.get('home.angular.json' + cacheKiller);

            /* swipe_carousel component controller */
            data.then(function(response) {
                $scope.playSpeed = 
                    response.data["content-par/swipe_carousel"].playSpeed;
                $scope.contentparngswipecarousel = 
                    response.data["content-par/swipe_carousel"].items;
            });
            
        }
    ])

Content Sync

Handlers – new in 6.0

• mobileapprootpage
• mobileapppages
• mobilepageassets
• mobilecontentlisting

Agenda

  `-- <root>
      |-- Problem?
      |-- Architecture
      |   |-- PhoneGap
      |   |   |-- CLI
      |   |   `-- Plugins
      |   |-- Content Sync
      |   `-- AngularJS
      |-- Dev Workflow
      `-- Author Workflow

Demo time

Agenda

  `-- <root>
      |-- Problem?
      |-- Architecture
      |   |-- PhoneGap
      |   |   |-- CLI
      |   |   `-- Plugins
      |   |-- Content Sync
      |   `-- AngularJS
      |-- Dev Workflow
      `-- Author Workflow

Demo time

Takeaways

Q & A

bit.ly/aem-pg

Thank you

             _, . '__ . 
          '_(_0o),(__)o().
        ,o(__),_)o(_)O,(__)o
      o(_,-o(_ )(),(__(_)oO)_
      .O(__)o,__).(_ )o(_)Oo_)
  .----|   |   |   |   |   |_)0
 /  .--|   |   |   |   |   |,_)
|  /   |   |   |   |   |   |o(_)
|  |   |   |   |   |   |   |_/`)
|  |   |   |   |   |   |   |O_) 
|  |   |   |   |   |   |   |
|  \   |   |   |   |   |   |
 \  '--|   |   |   |   |   |
  '----|   |   |   |   |   |
       |   |   |   |   |   |
  jgs  \   \   \   /   /   /
        `"""""""""""""""""`

@brucelefebvre

References

• PhoneGap, Cordova, and what’s in a name? - Brian LeRoux
• PhoneGap CLI on Github
• Three hooks your Cordova/PhoneGap project needs - Dan Moore
• AngularJS
• Ionic Framework
• Angular Snap.js
• angular-phonegap-ready
• Content Sync docs
• Debugging in PhoneGap
• Package designed by Hakan Yalcin from The Noun Project
• Mug of beer by Joan G. Stark
• Reveal.js theme by Brian LeRoux