Mobile apps

Made and managed in AEM




Hello


@brucelefebvre

Takeaways

| | | | | |
AEM + proven open source tech Developers apply existing web + AEM skills Authors leverage tools they use everyday

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”
a shitty review
“Sticking to paper as it is a reliable source of getting what I need”
a shitty review

Mobile apps are hard

Objective-C
Java
C#, C++
Java

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

| | | | | |
AEM + proven open source tech Developers apply existing web + AEM skills Authors leverage tools they use everyday

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