Creating Dual Screen Apps with App Cloud

Since we announced support for dual screen applications in App Cloud this week, we have had a tremendous response and many people have asked for more details about how to build their own dual screen applications in App Cloud Core. I wanted to provide some more details as well as give some insight into our roadmap around this set of features.

During the PLAY 2012 keynote, we demonstrated two types of dual screen applications. The Vido app demonstrates how you could use our dual screen APIs to play an HD video on the TV while allowing you to navigate around the application to explore related content or other videos to put in your queue. In contrast, the Hangframe app demonstrates a multi-view app. It displays two UIs from the same app simultaneously on different screens -- one on the handheld device, the other on the big TV screen. Both of them take advantage of Apple’s AirPlay technology, which we believe will be an important part of the evolving dual screen ecosystem.

You can see the demos in the keynote recording (scrub to 1:27).

You’ll be able to build both of these kinds of apps using the new free version of App Cloud, called App Cloud Core. You can sign up for a free account here. If you want more details about how these apps were built, read on.

APIs for Dual Screen Video Apps - Vido

The Vido demo uses a set of APIs that are available today. These APIs enable a developer to detect whether the device is connected to an Apple TV, to send a video to the Apple TV using AirPlay and then listen to events related to that video (e.g., progress) and respond appropriately.  All of these methods are documented online and are available in App Cloud Core as well as the Pro and Enterprise editions. Like all of the native device APIs in App Cloud, they take advantage of existing capabilities of iOS but make them available in a way that’s easy to use from within your JavaScript application.

In the coming weeks, we plan to release a sample application that illustrates how to use these APIs to create a dual screen video application like Vido. It will be available as part of the open source App Cloud Demos project

We’re excited to be making this technology available and are eager to see what developers can create with it, especially now that App Cloud Core is free. If you have any questions or suggestions, be sure to share your comments on the Google group we’ve created.

APIs for Multi-View Apps - Hangframe

The other app we demonstrated was an interactive game called Hangframe. This app is different in that there are actually two application views, one on the handheld device and a second on the large-screen TV. This multi-view demo application was built using an alpha version of a new set of dual-screen APIs that we plan to release this summer.

In the App Cloud application model, UIs are rendered within the application via HTML/CSS and the data that populates those views can come either from user input, from REST APIs like Twitter, or from one of our Smart Content Sources. 

Hangframe is different from other App Cloud apps because one of the views in the app is displayed on the Apple TV using AirPlay Mirroring while a different view is displayed on the device. Both views run simultaneously and can communicate via JavaScript. For example, in the Hangframe app, when a user selects a letter, the view on the TV screen either reveals the letter in the word or adds a piece to the bicycle. 

Similar to the dual-screen video app, we plan to make a sample available on the App Cloud Demos project soon after we release the APIs in the open source App Cloud SDK.

The team is very excited to be making both of these API sets available as part of App Cloud Core. We believe that App Cloud has the potential to unlock a whole new wave of mobile and tablet applications -- not only by exposing dual-screen capabilities but also by enabling web application developers to participate in mobile development without having to learn new languages or a new toolset. 

If you haven’t already done so, sign up for a free account. We’re looking forward to seeing what you create.