Drupal 8 on your Apple TV

Transcript

1. #DrupalCampSP
2. PRESENTED BY Rafael Silva - Senior Drupal Developer Myplanet Nov 25, 2017 A prototype on how to take Drupal into Apple TV Drupal 8 on your Apple TV
3. WHAT’S INSIDE Intro to Myplanet 3 Why did we do this? 7 Building a live prototype 24
4. WHO WE ARE Cara Tsang User Researcher
 & Interaction Designer 
 PhD, Cognitive Psych Rafael Silva Senior 
 Drupal Developer
5. About us Senior Drupal Developer. I have more than 13 years of experience with web development. I’m the creator of Drupal Brasil and a passionate contributor of both open source and Drupal. 5 WHO WE ARE Rafael Silva Senior 
 Drupal Developer @rfsbsb
6. WE’RE HIRING! If you are interested in work for a young and vibrant company with many talented software developers, come and talk to me! Digital first, from consumers to employees. We’re a software studio. We make smarter interfaces to empower your employees and engage your customers. 6 WHAT WE DO
7. Key Stats: • 90 designers, product managers & engineers globally • Expertise in open source custom applications, Drupal, mobile applications & browser-based, video solutions, chatbot, and personalization • Strategic partnerships with IBM & Acquia Our Team
8. A little background on our experiment. Why did we do this?
9. In recent years we’ve seen a plethora of new interfaces emerging. Nowadays Alexa, Google Home, Apple TV, Chromecast, Roku are taking over the market. Drupal site owners and managers will need to have their content delivered to those devices. The world is changing More and more we see new interfaces taking over. 9 WHY DID WE DO THIS?
10. Why should we care about TV? WHY TELEVISION TV is a huge part of our lives • Avg Canadian watches 3h 45mins TV per day • 70% of Canadians watch TV when they eat • Quality time? (UK survey) • 62% think watching TV s a way to relax as a family • ~50% of moms think TV brings the family together • A more social, interactive digital experience
11. But why the Apple TV? APPLE TV Over The Top streaming + Apple TV’s accessibility • OTT streaming services are now in over 64% of US households with TVs • Apple TV offers: • Relatively consistent layout and design • A lot of built-in accessibility features • New Siri commands offer great value for accessibility
12. Making it intuitive,
 making it accessible. Designing 
 the App
13. How do we design good 10-ft UI experiences? Think about scale. Bigger screen, but the user is also sitting further back. Amp up text and image sizing, make sure focus indicators are obvious enough. Think about context. Users are more likely to be in “relaxation” mode, maybe with lots of distractions. Keep things simple and clear, with low information density. Think about navigation. No mouse + keyboard, so less precision and flexibility. Arrange elements in a grid that’s logical for D-PAD usage. 13 DESIGNING THE APP
14. RESEARCH We looked at… • Apple’s tvOS Human Interface guidelines • Apple TV’s accessibility features, best practices • Other Apple TV apps
15. DESIGN PROCESS Next… • Design studio - lots of ideas, rough sketches • High fidelity mockups • Test it out at scale: project it on TVs
16. Making it work, 
 checking it twice. Building a 
 Live Prototype
17. Some modules we used Video. In this prototype it was used to store the video uploads. Image Raw Formatter. Return the image as URL, instead of formatted data. 17 SECTION Views. Used to select the data we want to export to the user. RESTful web services. Supports exporting the data as a web service. Serialization. Combined with RESTful web services it helps format your data to be served. + Custom module
18. Spoiler alert: NO! Now we are going to create an App that consumes REST right? REST amiright?
19. Apple TV makes it pretty easy. TVML Traditional apps are divided into 2 parts: client- and server- side. On Apple TV, part of the client is also processed on server, so you must have both the screens and logic on the same server. Client app then fetches the 2 and renders the application. Quick learning curve Analogy for web development: app is the “browser” and TVML files (Javascript & XML) is the “web”. Javascript and XML are well known, devs can more easily pick up developing for Apple TV. Accessible templates Apple offers a full set of templates and accessibility is natively implemented on those templates. Stick to the templates and you get accessibility features without much additional effort. Website integration Integrating app to existing website using TVML is quick and easy, since Javascript is ubiquitous. 19 DEVELOPING FOR APPLE TV
20. You gotta go live. 20 LIVE PROTOTYPE Building & testing out accessibility features • Apple also provides thorough documentation for tvOS developers • 2 options: use Swift or use TV Markup Language (TVML; recommended) • Many visual and functional templates from Apple • TVML apps will run on your server, can change functionality and visuals without redeploying to the Apple Store • Easy to implement designs
22. DEMO TIME 22 DEMO TIME
23. Try it out! Getting from concept to prototype only took a couple of weeks, and was fairly painless, especially if relevant content is already on a website. Demonstrate to stakeholders that ease and value of developing accessible TV apps! Thank you! @rfsbsb @TwittyCara @myplanet @myplanethq @myplanet Psst: we’re hiring! Find Myplanet on Glassdoor or LinkedIn!