Making a Smart TV application using JavaScript

Nov 21, 2015 Nov 23, 2014 Sofia var title =
“Making a Smart TV application using JavaScript”; var info = { name: “Trifon Statkov”, company: “Strypes” };

Nov 21, 2015 • Quick opportunity for me to feed
my ego • Detailed introduction into Metrological Application Framework (MAF) (this is what we are going to be using to build TV apps!) • Showing you how to set it up yourself ☺ • Making a simple TV app and looking at some more complex examples • Questions Trifon Statkov Making a Smart TV application using JavaScript

Nov 21, 2015 • My name is Trifon Statkov •
I work @ • Web developer since 2003 • Owned a small IT company for a while • Currently making TV apps for various customers • Always passionate about making cool stuff with the latest technologies Trifon Statkov Making a Smart TV application using JavaScript

Nov 21, 2015 Trifon Statkov Making a Smart TV application
using JavaScript

Nov 21, 2015 Why make TV apps?

using JavaScript

using JavaScript • RC === “Remote Control”

using JavaScript

using JavaScript • STB === “Set-Top Box”

Nov 21, 2015 How do we make TV apps with
JavaScript?

using JavaScript

Nov 21, 2015 Application Framework (or simply "MAF")

using JavaScript • framework for making TV apps • (kind of) open source • written in JavaScript • created by

using JavaScript • !== • apps run on the STB ( ), NOT on the TV itself! • there is a WebKit-based browser on the STB • a MAF app is basically a JS component running in a web page running on that browser! (more on that later) • => easy to test at your own laptop’s browser

using JavaScript • MAF software is installed on the STBs of cable operators such as:

using JavaScript

using JavaScript • The AppStore o Every Cable operator has their own app store o Different cable operator === Different app store === different apps o AppStore Demo

using JavaScript • Out-of-the-box WebSockets (Room API) • Localization • Access/Change current TV state • Facebook/Twitter login • FontAwesome integration • MomentJS integration • Over 50 components to build your apps upon (and you can always make your own)

using JavaScript • HTTP Request API • Views • Profiles • Video streaming API (including YouTube video streaming)

Nov 21, 2015 How it works?

using JavaScript • It’s basically just a page loaded into the STB browser • your app will run as a component on the page • This page is NEVER refreshed during normal circumstances • You closed your app? The page will not refresh. Then DevTools Profiling becomes your best friend.

using JavaScript

Nov 21, 2015 MAF workflow

using JavaScript

using JavaScript • You can not import libraries like jQuery/Angular/ Backbone/etc. • It’s not really CSS that you write (we will see that later) • It’s mostly vanilla JS • It’s possible to have a memory leak MORE THAN EVER • Limited access to DOM (which is sometimes good)

Nov 21, 2015 Setting up for our first MAF app
ever

using JavaScript • Just your laptop • Your laptop + TV + Raspberry Pi

using JavaScript • Demo • sudo git clone https://github.com/Metrological/ maf3-sdk.git • sudo npm install • NODE_PORT=3434 node sdk.js

using JavaScript

using JavaScript • Put your app into MAF-SDK-FOLDER/apps/ folder. • Open http://localhost:PORT_NUMBER in your browser

using JavaScript • You are going to need one of those: • RPi == STB in that case • Control Rpi via HDMI-CEC interface

Nov 21, 2015 Goodies

using JavaScript • MAF repo https://github.com/Metrological/maf3-sdk • MAF documentation https://sdk.metrological.com/getting-started • SublimeText 2 MAF snippets https://github.com/Tricho340/maf_snippets

Nov 21, 2015 Questions?

Nov 21, 2015 General Sponsor: Gold Sponsors: Media Partners: Technological
Partners: Hosting Partner:

Making a Smart TV application using JavaScript

Making a Smart TV application using JavaScript

More Decks by Trifon Statkov

Other Decks in Programming

Featured

Transcript