Content management
for mobile apps

Erik Erskine

@erikerskine

DrupalCamp London, March 2015

App or website?


offline support

improved user interface

access to device hardware and software

easier to launch regularly


expensive to develop

users need to download the app

harder to link to content

approval by Apple

App or website?


Don't recreate your website as an app

They are different

Approaches


Build it natively

Use a cross platform framework


Something in between?

Things that might influence
your approach


  1. App design patterns

  2. Headless Drupal

  3. Rich content

1 – App design patterns

Navigation


Road sign with directions
www.flickr.com/photos/dougtone/15349046902

Navigation


  1. Where am I?

  2. Where can I go next?

  3. What will I find there?


From "Designing Inutuitive User Experiences"
https://developer.apple.com/videos/wwdc/2014/?id=211

Platform differences


iPhone and Android phone side by side
www.flickr.com/photos/janitors/14380499695

Work offline


Train entering a tunnel
www.flickr.com/photos/shadowfoot/3033030063

Less is more

2 – Headless Drupal


building an API

REST API – Resources


http://api.example.com/v1/locations
http://api.example.com/v1/locations/50
http://api.example.com/v1/locations/50/events
http://api.example.com/v1/locations/50/events/4

http://api.example.com/v1/getEventForLocation?ev_id=50&loc_id=4
http://api.example.com/v1/events/50/4

REST API – Methods


GET http://api.example.com/v1/locations
GET http://api.example.com/v1/locations/50

POST http://api.example.com/v1/locations/50/events
PUT http://api.example.com/v1/locations/50/events/4
PATCH http://api.example.com/v1/locations/50/events/4
DELETE http://api.example.com/v1/locations/50/events/4

POST http://api.example.com/v1/createNewEvent?location=50

REST API


http://www.example.com/node/1

Accept: application/json

REST API


http://www.example.com/v1/locations/50/events

REST API – More Information


What's available to help us?


D7 contrib

Services

Views Datasource
D8 core

RESTful Web Services

Serialization

HTTP Basic Authentication

HAL
D8 contrib

REST UI

3 – Rich content

HTML & CSS for rendering


  • mature and familiar

  • quick to develop

  • browser support is good

  • responsive

  • handle links natively

  • don't use Javascript

HTML & CSS for rendering



{
  type: "slideshow",
  slides: [
    {
      type: "slide",
      content: "..."
    },
    {
      type: "slide",
      content: "..."
    }
  ]
}

HTML & CSS for rendering



{
  type: "slideshow",
  slides: [
    {
      type: "slide",
      content: "<!doctype html><html>...<body>...</body></html>"
    },
    {
      type: "slide",
      content: "<!doctype html><html>...<body>...</body></html>"
    }
  ]
}
App with rich content
App with wifi login page instead of content

More reading on this
hybrid approach


Thanks for listening!

Erik Erskine

@erikerskine

DrupalCamp London, March 2015

Questions?