Open Source @ Brightcove

Visit the Brightcove website

# Beantown Coffee "Beantown Coffee" is a sample App Cloud template designed for a phone. It demonstrates how to structure code and interact with App Cloud Studio in a fully-formed App Cloud app, as well as how to create a template for use across multiple applications. It pulls content from the Beantown Coffee web site as well as from YouTube, Twitter, Google, and Brightcove Video Cloud. You are free to copy code from this template, but sample images and videos cannot be copied or otherwise distributed. If you make heavy use of the Google Places APIs, please replace the API key in manifest.json with your own. ## Libraries This template uses a JavaScript "templating" system for generating dynamic HTML content. Template files are located in the `txt` directory. See full documentation at https://github.com/adammark/Markup.js This template also uses a custom JavaScript library for transitions and scrolling instead of bc.ui functions. For demonstrations of `bc.ui` functionality, see the sample templates in the App Cloud SDK. (You are free to use any UI libraries on top of the App Cloud SDK.) ## Directions ### Running Locally 1. Download the Workshop app from the iTunes App Store or Android Market onto your phone. 2. Copy the "template" directory into your local web server and rename it if you want. On a Mac, the web directory root is usually located at /Users/[username]/Sites 3. Open scan.html in your desktop web browser (Chrome or Safari) via the local network, not via "localhost" or "127.0.0.1". You can find your IP address in _System Preferences > Network_ (on Mac) or _Control Panel > Network Connections_ (on Windows). The URL might look like this: `http://192.168.1.100/~adam/beantown/scan.html` 4. Connect your phone to the same network. 5. Open the Workshop app on your phone, click "Template Preview," then click the camera icon. Scan the QR code. 6. The template will appear on your device! You can now edit any file and see the changes take effect on the device. To refresh a view, simply drag and release the "Menu" tab. If you make changes to the manifest file, you must click "Restart." Note: The device method `bc.device.fetchContentsOfURL()` will not work in your web browser due to cross-domain security restrictions. To enable this functionality, start up Chrome from the command line with web security disabled. On Mac: ``` /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security ``` ### Running in App Cloud Studio If you intend to upload this template to App Cloud Studio, you will need to create your own content feeds: #### Content feeds for Beantown Coffee app: * Blog feed for "News" view: * Name: "Coffee News" * URL: http://coffee.brightcove.com/?feed=rss2 * Fields: title, link, pubDate, guid, content\_encoded, enclosure\_url * Coupon feed for "Coupons" view: * Name: "Coffee Coupons" * URL: http://coffee.brightcove.com/coupons/coupons.json * Uncheck "Enable element awareness" * Menu feed for "Fare" view: * Name: "Coffee Menu" * URL: http://coffee.brightcove.com/menu/menu.json * Uncheck "Enable element awareness" * Photo feed for "Gallery" view: * Name: "Coffee Gallery" * URL: http://coffee.brightcove.com/gallery/gallery.json * Video Cloud connector for "Learn" view: * Name: "Coffee Videos from Video Cloud" * Video Cloud Read API Token: `SAMmT0d4gY-o3QN2rkGxNGlViIUrDKUY_a_FbrQqXXFq1HFyv44owg..` #### Content feeds for Boston Brewin' app: * Blog feed for "News" view: * Name: "Beer News" * URL: http://beer.brightcove.com/?feed=rss2 * Select: title, link, pubDate, guid, content\_encoded, enclosure\_url * Coupon feed for "Coupons" view: * Name: "Beer Coupons" * URL: http://beer.brightcove.com/coupons/coupons.json * Uncheck "Enable element awareness" * Menu feed for "Fare" view: * Name: "Beer Menu" * URL: http://beer.brightcove.com/menu/menu.json * Uncheck "Enable element awareness" * Photo feed for "Gallery" view: * Name: "Beer Gallery" * URL: http://beer.brightcove.com/gallery/gallery.json * Video Cloud connector for "Learn" view: * Name: "Beer Videos from Video Cloud" * Video Cloud Read API Token: `SAMmT0d4gY-o3QN2rkGxNGlViIUrDKUY_a_FbrQqXXFq1HFyv44owg..` #### Shared (parameterized) feed * YouTube playlist * Name: "YouTube Playlist" * URL: https://gdata.youtube.com/feeds/api/playlists/{"playlistId":"02ACC75C731FA9EA"}?v=2 * Limit to 20 * Deselect all fields EXCEPT: * id * updated * title * media_group_media_description * media_group_media_thumbnail * media_group_yt_duration_seconds * media_group_yt_videoid * yt_statistics_viewCount * Settings * Playlist ID for coffee: `02ACC75C731FA9EA` (default) * Playlist ID for beer: `92E2F27744E3DC5F` #### Uploading to App Cloud Studio 1. Zip up the `template` directory. The manifest file must be located at the root of the directory. 2. Log in to App Cloud Studio and click "Upload a New Template." Upload the ZIP file. 3. View the template, then click "Create an App." 4. For each view, select and configure the content feeds you created above. You can also change the settings to match either the coffee theme or beer theme. For example, in the News view, change "Buzz" to "On Tap." ## Help For documentation and community support, please refer to: * App Cloud documentation * App Cloud API * App Cloud mailing list

App Cloud Beantown


Beantown Coffee

"Beantown Coffee" is a sample App Cloud template designed for a phone. It demonstrates how to structure code and interact with App Cloud Studio in a fully-formed App Cloud app, as well as how to create a template for use across multiple applications.

It pulls content from the Beantown Coffee web site as well as from YouTube, Twitter, Google, and Brightcove Video Cloud.

You are free to copy code from this template, but sample images and videos cannot be copied or otherwise distributed.

If you make heavy use of the Google Places APIs, please replace the API key in manifest.json with your own.

Libraries

This template uses a JavaScript "templating" system for generating dynamic HTML content. Template files are located in the txt directory. See full documentation at https://github.com/adammark/Markup.js

This template also uses a custom JavaScript library for transitions and scrolling instead of bc.ui functions. For demonstrations of bc.ui functionality, see the sample templates in the App Cloud SDK. (You are free to use any UI libraries on top of the App Cloud SDK.)

Directions

Running Locally

  1. Download the Workshop app from the iTunes App Store or Android Market onto your phone.

  2. Copy the "template" directory into your local web server and rename it if you want. On a Mac, the web directory root is usually located at /Users/[username]/Sites

  3. Open scan.html in your desktop web browser (Chrome or Safari) via the local network, not via "localhost" or "127.0.0.1". You can find your IP address in System Preferences > Network (on Mac) or Control Panel > Network Connections (on Windows). The URL might look like this: http://192.168.1.100/~adam/beantown/scan.html

  4. Connect your phone to the same network.

  5. Open the Workshop app on your phone, click "Template Preview," then click the camera icon. Scan the QR code.

  6. The template will appear on your device! You can now edit any file and see the changes take effect on the device. To refresh a view, simply drag and release the "Menu" tab. If you make changes to the manifest file, you must click "Restart."

Note: The device method bc.device.fetchContentsOfURL() will not work in your web browser due to cross-domain security restrictions. To enable this functionality, start up Chrome from the command line with web security disabled. On Mac:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security

Running in App Cloud Studio

If you intend to upload this template to App Cloud Studio, you will need to create your own content feeds:

Content feeds for Beantown Coffee app:

  • Blog feed for "News" view:

    • Name: "Coffee News"
    • URL: http://coffee.brightcove.com/?feed=rss2
    • Fields: title, link, pubDate, guid, content_encoded, enclosure_url

  • Coupon feed for "Coupons" view:

    • Name: "Coffee Coupons"
    • URL: http://coffee.brightcove.com/coupons/coupons.json
    • Uncheck "Enable element awareness"

  • Menu feed for "Fare" view:

    • Name: "Coffee Menu"
    • URL: http://coffee.brightcove.com/menu/menu.json
    • Uncheck "Enable element awareness"

  • Photo feed for "Gallery" view:

    • Name: "Coffee Gallery"
    • URL: http://coffee.brightcove.com/gallery/gallery.json

  • Video Cloud connector for "Learn" view:

    • Name: "Coffee Videos from Video Cloud"
    • Video Cloud Read API Token: SAMmT0d4gY-o3QN2rkGxNGlViIUrDKUY_a_FbrQqXXFq1HFyv44owg..

Content feeds for Boston Brewin' app:

  • Blog feed for "News" view:

    • Name: "Beer News"
    • URL: http://beer.brightcove.com/?feed=rss2
    • Select: title, link, pubDate, guid, content_encoded, enclosure_url

  • Coupon feed for "Coupons" view:

    • Name: "Beer Coupons"
    • URL: http://beer.brightcove.com/coupons/coupons.json
    • Uncheck "Enable element awareness"

  • Menu feed for "Fare" view:

    • Name: "Beer Menu"
    • URL: http://beer.brightcove.com/menu/menu.json
    • Uncheck "Enable element awareness"

  • Photo feed for "Gallery" view:

    • Name: "Beer Gallery"
    • URL: http://beer.brightcove.com/gallery/gallery.json

  • Video Cloud connector for "Learn" view:

    • Name: "Beer Videos from Video Cloud"
    • Video Cloud Read API Token: SAMmT0d4gY-o3QN2rkGxNGlViIUrDKUY_a_FbrQqXXFq1HFyv44owg..

Shared (parameterized) feed

  • YouTube playlist

    • Name: "YouTube Playlist"
    • URL: https://gdata.youtube.com/feeds/api/playlists/{"playlistId":"02ACC75C731FA9EA"}?v=2
    • Limit to 20
    • Deselect all fields EXCEPT:
      • id
      • updated
      • title
      • mediagroupmedia_description
      • mediagroupmedia_thumbnail
      • mediagroupytdurationseconds
      • mediagroupyt_videoid
      • ytstatisticsviewCount

  • Settings

    • Playlist ID for coffee: 02ACC75C731FA9EA (default)
    • Playlist ID for beer: 92E2F27744E3DC5F

Uploading to App Cloud Studio

  1. Zip up the template directory. The manifest file must be located at the root of the directory.

  2. Log in to App Cloud Studio and click "Upload a New Template." Upload the ZIP file.

  3. View the template, then click "Create an App."

  4. For each view, select and configure the content feeds you created above. You can also change the settings to match either the coffee theme or beer theme. For example, in the News view, change "Buzz" to "On Tap."

Help

For documentation and community support, please refer to:

Download

Download Package (.ZIP)
Download Tarball (.tar.gz)

Latest Source

Visit GitHub for the latest source code.

Support

File Issues: GitHub Issue Tracker
Request Support: Support Forums


© 2012 Brightcove Inc.     Terms & Conditions     Privacy
Open Source @ Brightcove is not officially supported by Brightcove.