Interlochen Media - tvOS NPR and LiveStream Integrations Code Challenge

Note - The spec is also attached in PDF format in the challenge forums as some of the formatting (indentation/ bullets) didn't get reflected correctly. 

Introduction

Welcome to "Interlochen Media - iOS Prototype Challenge". In this challenge we are creating a prototype iOS app that runs on iPad & iPhone from designs from provided designs.

 

The nonprofit Interlochen Center for the Arts is a recipient of the National Medal of Arts and the only organization in the world that brings together: a 2,500-student summer camp program; a 500-student fine arts boarding high school; opportunities for hundreds of adults to engage in fulfilling artistic and creative programs; two 24-hour listener-supported public radio stations (classical music and news); more than 600 arts presentations annually by students, faculty and world-renowned guest artists; a global alumni base spanning eight decades, including leaders in the arts and all other endeavors. For information, visit Interlochen online at www.interlochen.org.

 

This tvOS app, although with an iOS counterpart, will be used by Interlochen as a central location to showcase the quality and diversity of their programs. In addition, the app will help promote the arts by allowing users to view videos of live performances and listen to recordings of concerts. We are looking forward to  your participation in this challenge!

 

Challenge Overview

This is the 3rd challenge for the Interlochen Apple TV application and the 5th for this Interlochen Media project. Interlochen is creating a tvOS and iOS application that delivers their media content to the public. Reference links - first and second challenge.

 

In the challenge, we are looking for further integrations to tvOS application along with the ability to update dynamic data via a JSON file located on a hosted TVML server. We have already developed integrations to Vimeo, which is the base for content on the application. In this challenge we will be building integrations for NPR content, along with LiveStream and HDRelay. For LiveStream and HDRelay, all content will be provided to you, for NPR we will need a model to communicate with their api and cache data. Below are the technical specifications for completing this challenge:

 

Development Environment

Please ask for access to our github repos via Forums. There are two repos, one for the client server (interlochen-heroku) and one for the tvOS project (interlochen-appletv). Use only the development branch on each. you will be asked to submit a pull request if you submission wins and we will be required to merge code if there are any conflicts. Please commit often so we can follow the progress made when reviewing.

 

See the following for an introduction to TVML application:

• Apple’s tvOS development guide

• Apple’s tvOS Tech Talk videos

  • Specifically this on on TVMLKit

• Ray Wenderlich’s TVML tutorial

 

To Run

1. Start the client server by running harp server --port 9001

   1. Requires Node and Node package Harp to be installed globally

2. Open the tvOS XCode workspace (has to be the workspace for CocoaPods) and run on a Apple TV or Simulator.

   1. The configuration files are already setup to point to http://localhost:9001 with basic authentication.  

 

Replace data/content-meta.json with content-meta_new.json

The tvOS application uses a file called content-meta.json for dynamically populating data. For this challenge It is required to replace the current content-meta.json file with content-meta_new.json located in the data folder on the client server. This new file has a format the matches the designs of the iOS application and will be used to update dynamic content within both applications. This file contains 4 sections:

 

• Featured

  • Featured is a list of content that should be listed on a carousel on the homepage of the tvOS application (see UI updates). It can contain Vimeo Videos, NPR stories & LiveStream feeds. The featured JSON object separates these integrations by album (a Vimeo album that can have multiple archived videos to list in featured, all videos of the album should appear in the carousel), audio (NPR stories to list in featured) and livestreamCasts (live stream feeds).

• Radio

  • This corresponds to the radio section of the application. This includes two Radio stations which are already in the application. Please update the application to list from this file. This also includes a set of NPR Query Params to search for other stories (See NPR Integration Section). Stories should be listed in the current Podcasts Section and support Pagination.

• Performances

  • Performances are categories of either LiveStream, Vimeo or NPR content.  They are separated by category. The Vimeo integration is already there, but will need update to read from this format of content-meta.json. If the category is NPR the content should just be the result of a NPR query with the passed query params (see NPR integration section). If Livestream, should just list the details given for the content.

• Extras

  • Extras are separate categories similar to performances, but have the ability to appear on the tvOS home screen. They match up with either Vimeo, Livestream or NPR content. If isOnTVOSHomepage is set to true, the category should appear on the home screen of tvOS under featured (see current categories with News/Features, Mini Lessons & Campus Views). Search should always remain the last category on the home screen.

• More

  • More will be used for the iOS application, but not for the tvOS application at this time.

 

On submission of this challenge the current content-meta.json file should no longer exist and should be replaced with the contents of content-meta_new.json.

 

Integrations

This application has 4 Integrations for pulling in content, Vimeo, NPR, LiveStream & HDRelay. This challenges focuses on LiveStream, HDRelay and NPR. NPR being the only one that requires some custom code to pull in content.

   - General Requirements

        - All Integrations should be dynamically populated using the content-meta.json file and/or information pulled from NPR/Vimeo Apis

        - All API calls should be made from with Swift using JavaScipt to swift bridging as we would like the most code be reused for our iOS application.

                       - The iOS application will also be using the content-meta.json file and the existing VimeoWarpper along with the NPR Wrapper that should be build with this challenge.

                        - See ApplicationDelegate.swift line 82. This is the method that currently handles JavaScript to Swift bridging. There is also a brief overview of this in the TVML introduction video from Apple.

                        - Sort Order should be applied from content-meta.json. Assume Vimeo & NPR content is returned in the correct order.

 - Vimeo

���     - Vimeo has already been integrated with a swift Vimeo Api Wrapper. The only updates needed is the functionality to correctly read the new content-meta.json file

  - HDRelay

      - HDRelay integration is very simple. All data is listed in the content-meta.json file and should be cached in VimeoTvOSUtil class.

       - Requirements

                - Clicking on a HDRelay Item in campus views should directly open the media player and play the HLS url. Should skip the content detail view.

                - Pass the title and description to the player.

                - Thumbnail image should be retrieved every time the campus view screen is opened. It refreshed with a live image.

• LiveStream

  • LiveStream is very similar to HDRelay except, like other content, it should push to a detail screen displaying the event detail.

  • Requirements

    • Clicking on a LiveStream Item should push into the stand content detail view displaying all information located in items json object in content-meta.json.

      • Start Time & End Time should replace duration & date.

      • Title and description should be the same.

      • “Live Stream” should be shown above start and end time.

    • If the current time is before the start time, the play button should be disabled.

    • The LiveStream should be shown if the start time is in the future

    • If the end time is in the part the LiveStream should be hidden

    • Clicking Play will play the HLS url.

    • Thumbnail image should be cached.

    • Title and description should be passed into the player.

• NPR Integration

  • Interlochen has two radio stations (News and Classical). They also post radio shows through an NPR content management system. We need to have the ability in the application to pull these shows and display them in the Apple TV app. To do this we use one call to NPR’s api, which is a endpoint to query stories. Here is an example of the call:

    • GET http://api.npr.org/query/query?apiKey={apiKey}&orgid={orgid}&output=JSON&numResults=50&fields=summary,byline,text,audio,image&startNum=0

  • The apiKey is located in the configuration.plist file in the XCode project, do not share this key. The rest of the url parameters are located in the content-meta.json file on the client server. The above the query will get 25 results. We will need pagination calls which are the same just incrementing the startNum integer. Use infinite scrolling that is already implemented in the application.

  • NPR stories can also be appended to other sections of the application (featured, performances), in that case a query call needs to be made for a specific set of stories by adding the following params to the above endpoint:

    • ids=123456,123457

    • This will only return stories of those ids.

    • This is listed in the NPRQueryParams JSON object in content-meta.json

  • Requirements

    • Build a NPR API wrapper that is written in Swift and is similar to the Vimeo Wapper.

    • This should only be in iOS code and use the already existing VimeoTvOSUtil class to bridge from javascript to Swift. This wrapper will also be used for the iOS application so keep it as self contained as possible.

      • you can only save to Cache folder for tvOS. see VimeoCoreDataHepler.swift line 53.

    • The wrapper should cache stories similar to VimeoWrapper.

    • The wrapper should dynamically make calls to the NPR query Api given the NPR query params in the new content-meta.json file.

    • Fields to save from each story from NPR response:

      • id

      • link type HTML $text

      • title.$text

      • teaser.$text

      • storyDate.$text

        • convert to NSDate

      • audio.format type mp3 type m3u $text

        • This is the streaming url

      • byline.$text

        • Save as one string “[author 1] & [author 2] & [author 3] ... ”

      • text

        • Save as one string, concatenate all the paragraphs with double end lines (one line separation)

        • This will be the description

 

UI Updates

1. Featured section should horizontally scroll through media items, not display a link to an album.

   1. It should be a carousel like in the showcase template or the standard Apple TV home screen.

2. Some Play buttons do not work on content detail screen, you cannot scroll over. This issue should be fixed.

3. Change “Podcasts” to “Stories” in the radio section.

 

Uses Cases

These should all pass for a valid submission.

• An Admin should be able to update the content-meta.json file to dynamically change content in the tvOS application, examples:

  • Add a livestream video to featured and see it populated on the tvOS application

  • Add a NPR story to featured and see it populated on the tvOS application

  • Add a video to 2016 Webcast Vimeo Album and see it populated on the tvOS application (on restart).

  • Add a new Vimeo Album to Performances

  • Add a new LiveStream to the Live Performances category in Performances.

  • Add a new HDRelay Camera to the Campus View category in Extras.

• A User should be able to listen or watch all content listed in the application and it should match up with data in the content-meta.json file.

 

UI Reference

You may refer to the iOS designs to solve any unanswered UI questions. We are primarily looking for functionality and the updates listed in section UI Changes. We plan on running a challenge once the iOS application is complete to better match up the UI across the two applications.

Final Submission Guidelines