{"id":35914,"date":"2016-06-20T15:55:08","date_gmt":"2016-06-20T10:25:08","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=35914"},"modified":"2016-06-23T11:42:50","modified_gmt":"2016-06-23T06:12:50","slug":"introduction-of-client-server-based-tvos-application-using-tvml-tvjs","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/introduction-of-client-server-based-tvos-application-using-tvml-tvjs\/","title":{"rendered":"Introduction of Client-Server based tvOS Application using TVML &amp; TVJS"},"content":{"rendered":"<p>In September 2015 at WWDC event, Apple introduced the most powerful and advanced updates to the Apple TV set-up box. It provides simple, most effective and handy user interfaces to the users for navigating and viewing video content. It also supports other third-party applications and games named as tvOS applications. Apple&#8217;s 4<sup>th<\/sup> generation TV hardware includes:<\/p>\n<ul>\n<li>64-bit A8 processor<\/li>\n<li>Siri enabled remote<\/li>\n<li>HDMI<\/li>\n<li>1080p resolution<\/li>\n<li>32GB or 64GB of storage<\/li>\n<li>2GB RAM<\/li>\n<\/ul>\n<p>Apple has provided two ways to develop tvOS app:<\/p>\n<ul>\n<li><strong>TVML Apps:<\/strong> Apple introduced new TVML framework which is a client-server based app that includes TVML, TVJS, and TVML kit.<\/li>\n<li><strong>Custom Apps<\/strong>: These custom apps are developed in the same manner as for iOS. Examples are Storyboard, UIKit, Outlets, Actions, etc.<\/li>\n<\/ul>\n<p>It&#8217;s totally up to you while choosing the platform for your app.\u00a0<strong>TVML Apps <\/strong>are client-server apps\u00a0i.e., you have data on a server which you want to show to the users whereas <a title=\"smart tv apps development\" href=\"http:\/\/www.tothenew.com\/mobile-smart-tv-application-development\">Custom TV Apps<\/a>\u00a0are customizable as other iOS apps with impressive and sophisticated user interface, animations, auto layouts, navigations, etc.<br \/>\nIn this blog, we are focusing on TVML framework. With the new TVML framework, the native tvOS app will access the main Javascript file(<strong>TVJS<\/strong>) on our server and display the pages in Television Markup Language (<strong>TVML<\/strong>). The architecture is shown below.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35923\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/06\/Server.png\" alt=\"Server\" width=\"865\" height=\"375\" \/><\/p>\n<p>As mentioned, we can develop client-server based apps via TVML, TVJS, and TVMLKit.<br \/>\n<strong>TVML(Television Markup Language)<\/strong>: As the name suggest, it&#8217;s a markup language, i.e.,\u00a0a form of XML. Apple provides various kind of <a href=\"https:\/\/developer.apple.com\/library\/prerelease\/tvos\/documentation\/LanguagesUtilities\/Conceptual\/ATV_Template_Guide\/TextboxTemplate.html\">premade templates<\/a>\u00a0which you can easily find on Apple\u2019s developer website.<br \/>\n<strong>TVJS (Television Javascript): <\/strong>Its a set of javascript file which is responsible for fetching data from the server with various API\u2019s and display content(created with TVML) on TV.<br \/>\n<strong>TVMLKit:<\/strong> It\u2019s a framework that communicates between TVML, JavaScript, and your native tvOS application.<\/p>\n<p><strong>\u00a0<\/strong>We hope that now you would have gained enough idea to create your first app on tvOS but remember to always have Xcode 7.1 or later before starting the development work.<br \/>\nTo do that, open your Xcode and select \u201c<strong>Create a new Xcode project<\/strong>\u201d or go to Xcode\u2019s \u201c<strong>File\\New\\Project<\/strong>\u201d and select the \u201c<strong>tvOS\\Application\\TVML Application<\/strong>\u201d and click <strong>\u201cNext\u201d<\/strong> button.<br \/>\nFor the Product Name, enter FirstTVDemo (anything you want to) and select Language &#8216;Swift&#8217; and uncheck both boxes and click Next and choose any directory to save your project. After saving that project open AppDelegate file, you will find some additional code in didFinishLaunchingWithOptions method.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35919\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/06\/AppDel.png\" alt=\"AppDel\" width=\"863\" height=\"542\" \/><\/p>\n<p>You will also find \u201c<strong>application.js<\/strong>\u201d file in your supporting file group. Just open this file, here you will find javascript methods hierarchy same as AppDelegate method hierarchy, i.e., App.onLaunch, App.onWillResignActive, App.onDidEnterBackground etc . It also contains a <strong>createAlert<\/strong> function in it which is an Apple predefined <strong>alertTemplate.<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35922\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/06\/Screen-Shot-2016-06-20-at-12.45.50-PM.png\" alt=\"Screen Shot 2016-06-20 at 12.45.50 PM\" width=\"741\" height=\"277\" \/><\/p>\n<p>After viewing this, the questions which should arise in your mind are:<\/p>\n<ul>\n<li>If it is a client \u2013 server based app where we need to set up Server?<\/li>\n<li>Where do we need to store TVML templates?<\/li>\n<li>How can we access it using TVJS?<\/li>\n<\/ul>\n<p>So, here are the answers, Open your AppDelegate file, you will find appController, tvBaseURL, and tvBootURL.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35926\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/06\/AppDel1.png\" alt=\"AppDel\" width=\"863\" height=\"413\" \/><\/p>\n<p><strong>TVApplicationController<\/strong> is a class in <strong>TVMLKit framework<\/strong> that helps in your app in communicating with the server. <strong>TVBaseURL<\/strong> contains the base URL of our server and <strong>TVBootURL<\/strong> includes the path of our JavaScript file (in this case application.js on your local host server).<\/p>\n<p>In didFinishLaunchingWithOptions method, It has <strong>TVApplicationControllerContext<\/strong>, which it will use to initialize your <strong>TVApplicationController<\/strong> i.e., you will need to set two paths: path of your server and path of your javascript files.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35919\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/06\/AppDel.png\" alt=\"AppDel\" width=\"863\" height=\"542\" \/><\/p>\n<p>As you can see, its calling application.js javascript file to fetch data. It includes App.onLaunch method i.e., launch point of the javascript file. The <strong>TVApplicationController<\/strong> that was initialized in <strong>AppDelegate<\/strong> will pass on its <strong>TVApplicationControllerContext<\/strong>.<\/p>\n<p>Here it is simply calling the createAlert method for showing simple alert to display on the screen.<\/p>\n<p><strong>createAlert<\/strong> is a function that returns a TVML document. It includes alertString TVML string (in this case we are using <strong>alertTemplate<\/strong> from premade templates provided by Apple) its same as UIAlertView.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35920\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/06\/AppleTVErrorView.png\" alt=\"AppleTVErrorView\" width=\"865\" height=\"486\" \/><\/p>\n<p>Now, when I run application I got an error :<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35929\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/06\/Log.png\" alt=\"Log\" width=\"869\" height=\"153\" \/><\/p>\n<p>Now, If you read this error message carefully, you will find that its failed to load launch URL i.e., it\u2019s a client-server based app, so we need a web server to host our javascript files and TVML files. So, a simple local server in Node.js or Python is also enough for this example. So, just open the <strong>Terminal<\/strong> app and enter the following:<\/p>\n<p><strong>cd<\/strong> ~<strong>\/<\/strong>Desktop<strong>\/<\/strong>FirstTVDemo\/FirstTVDemo<\/p>\n<p>python -m SimpleHTTPServer 9001<\/p>\n<p>Just need to drag <strong>application.js parent folder path<\/strong> to the terminal and then start our SimpleHTTPServer server because it is a good option that is started by command and replace port with the real value you want. And now just run your app and you will find:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-35921\" src=\"\/blog\/wp-ttn-blog\/uploads\/2016\/06\/AppleTVSuccessView.png\" alt=\"AppleTVSuccessView\" width=\"865\" height=\"486\" \/><\/p>\n<p>Cheers! You have made your first TV app. Its simply an alertTemplate template from 18 different kinds of templates provided by Apple. However, you can try different templates as well.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In September 2015 at WWDC event, Apple introduced the most powerful and advanced updates to the Apple TV set-up box. It provides simple, most effective and handy user interfaces to the users for navigating and viewing video content. It also supports other third-party applications and games named as tvOS applications. Apple&#8217;s 4th generation TV hardware [&hellip;]<\/p>\n","protected":false},"author":759,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":17},"categories":[3479,1400,3477,1994],"tags":[3535,3540,3539,3538,3534,3533,3532,3536,3537,3531],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/35914"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/759"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=35914"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/35914\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=35914"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=35914"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=35914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}