显示导航

用365bet地区构建TVML应用

使用365bet地区杠杆标记为Apple TV构建应用程序,以查看365bet地区的资产管道和国际化功能以简化TVML开发

s塞尔吉奥·德尔阿莫

365bet地区版本 4.0.1

365bet地区培训

365bet地区培训由创建并积极维护365bet地区框架的人们开发和交付

入门

在本指南中,您将编写一个TVML应用.

TVML应用程序为您提供了一种使用TVMLKit JavaScript TVMLKit JS Apple TV标记语言TVML和TVMLKit框架为Apple TV创建应用程序的方法每个模板都有遵循Apple风格准则的特定设计,可让您快速创建外观精美的应用程序

本指南中构建的TVML应用显示苹果TVML堆栈模板365bet地区 Quickcast的摘要365bet地区 Quickcast是纯365bet地区编码的简短视频,当用户选择一个Apple TVML产品模板显示Quickcast详细信息用户可以通过选择播放按钮来再现视频

建筑

本指南以客户端服务器体系结构为特色客户端是tvOS应用程序服务器是365bet地区应用程序客户端连接到服务器并以TVMLKit JS和TVML文档作为响应

建筑

我们已经将365bet地区应用程序与数据mp文件,Png文件视频和缩略图分开了,我们使用曼普在指向文件夹数据的端口上运行本地apache服务器在本指南中,您将看到对mp文件的引用,例如

                英雄形象: 'HTTP本地主机快速广播拦截器png',

在生产环境中,您可能希望将这些文件托管在服务中,例如亚马逊简单商店服务AWS S

您将需要什么

要完成本指南,您将需要以下内容

  • 花些时间在你手上

  • 体面的文本编辑器或IDE

  • 安装了JDK或更高版本JAVA首页适当配置

  • 的最新稳定版本XCode我们用Xcode编写了本指南

如何完成指南

要完成本指南中开发的365bet地区应用程序,您需要从Github中签出源代码并按照指南中介绍的步骤进行操作

要开始,请执行以下操作

您可以直接转到完成的示例光盘进入grails指南grails tvmlapp完成

编写TVML客户端

要创建TVML应用程序并将其连接到365bet地区服务器,我们需要修改变量tvBaseURLtvBootURL.

使用TVML应用程序模板创建TvOS项目

tvOSProjectTemplateTvml

选择Swift作为语言

projectOptions

添加新值应用程序传输安全设置区分大小写,并添加其子元素允许任意负荷并将该值设置为YES

应用程序传输安全
将此密钥添加到“信息” plist是必要的,因为从iOS版本开始,您的应用将阻止链接到非HTTPS服务器以鼓励最佳实践。在本教程中,您将针对未启用HTTPS的本地服务器进行测试,因此将禁用默认行为

修改AppDelegate迅捷并设置静态变量tvBaseURLtvBootURL.

静态让tvBaseURL http本地主机静态让tvBootURL AppDelegate tvBaseURL资产应用程序js
tvBaseUrl

编写TVML 365bet地区应用程序

您可以在初始文件夹是使用命令创建的

grails创建应用程序配置文件rest api功能休眠标记视图资产管道

您知道您可以下载完整的365bet地区项目而无需安装任何其他工具吗?开始grails org并使用365bet地区应用伪造生成365bet地区项目您可以选择项目类型“应用程序”或“插件”,选择一个365bet地区版本并选择一个Profile,然后单击“ Generate Project”下载一个ZIP文件,无需安装365bet地区

您甚至可以使用HTTP工具从命令行下载项目,例如卷曲看到开始grails org用于API文档

curl O start grails org myapp zip d版本

TVMLKit JS实用工具

TVMLKit JS是专门设计用于Apple TV和TVML的JavaScript API框架TVMLKit JS结合了JavaScript中的基本功能以及专为Apple TV设计的专用API。使用TVMLKit JS,您可以加载和显示TVML模板,播放自定义的媒体流内容并控制您的应用程序流有关更多信息,请参见TVJS Framework Reference

将JavaScript文件添加到我们的项目中。它定义了一系列方法,这些方法几乎与“播放媒体的部分”中所述的方法相同。TVML编程指南.

这些方法允许将页面推入导航堆栈中以获取文档并播放媒体

grails应用程序资产javascripts tvmlkit js
功能 loadingTemplate() {
    模板'载入中';
    templateParserDOMParserparsedTemplate templateParser parseFromString模板"应用程序XML"navigationDocument pushDocument parsedTemplate功能 getDocument延期templateXHRXMLHttpRequestURL扩展基本URL loadingTemplate templateXHR的responseType"文献"templateXHR addEventListener"加载", 功能pushPage templateXHR响应XMLtemplateXHR打开"得到"网址真正templateXHR发送功能 推入文献currentDoc getActiveDocument如果currentDoc getElementsByTagName"loadingTemplate"项目0) == 空值navigationDocument pushDocument文件其他navigationDocument replaceDocument文档currentDoc功能 playMedia视频网址媒体singleVideoMediaItem mediaType视频资源VideoList播放列表视频列表推送单视频myPlayer播放器myPlayer播放列表视频列表myPlayer播放

电视启动网址

本指南使用资产管道插入

Asset Pipeline是一个插件,主要用于通过Gradle在JVM应用程序中管理和处理静态资产,但是非强制性Asset Pipeline功能包括CSS和JavaScript文件的处理和最小化

创建一个javascript文件,它将成为我们的TVML 365bet地区应用程序的入口

grails应用程序资产javascripts应用程序js
这是一个清单文件,将被编译成应用程序js
//
可以使用相对路径在此引用此目录中的任何JavaScript文件
//
您可以随意向该文件添加应用程序范围的JavaScript,但通常情况下更好
根据需要创建单独的JavaScript文件
//
需要tvmlkit js
需要自我
应用基本URLonLaunch = 功能选择基本URL选项的baseUrl延期"快播"getDocument扩展

请注意,下一个清单中显示的行如何包含上一节中讨论的TVMLKit JS文件

grails应用程序资产javascripts应用程序js
需要tvmlkit js

最初的TVML文档是在以下位置呈现的XMLhttp本地主机quickcast.

下一行指定初始文档

grails应用程序资产javascripts应用程序js
getDocument扩展

域类

创建用于存储Quickcast的持久性实体在365bet地区中处理持久性的最常见方法是使用365bet地区域类:

域类满足Model View Controller MVC模式中的M,并且表示映射到基础数据库表上的持久实体。在365bet地区中,域是位于grails应用程序域目录中的类。

grailsw创建域类Quickcast

快速播报域类是我们的数据模型。我们定义了不同的属性来存储快速播报特点

grails应用程序域com oci web quickcasts Quickcast groovy
与ociweb quickcastsQuickcast字符串标题字符串字幕字符串描述整型durationMinutes整型持续时间整型releaseYear字符串heroImg字符串videoUrl静态的hasMany作者String静态的约束描述可为空真正
    }

    静态的映射描述类型'文本'
    }
}

单元测试我们测试属性主体是否可选

src测试groovy com ociweb Quickcasts QuickcastSpec groovy
与ociweb quickcasts进口 spock lang规格
进口 免费测试gorm DomainUnitTest

有关用法说明,请参阅API以了解链接grails测试混合域DomainClassUnitTestMixin
 QuickcastSpec 延伸规格实施DomainUnitTest {

    虚空 "测试说明是可选的"() {
        期望:
            快速播报描述: 空值验证'描述'])
    }
}

创建GORM数据服务

grails应用程序服务com ociweb quickcasts QuickcastService groovy
与ociweb quickcasts进口grails gorm services服务@服务快播接口QuickcastService清单findAll Quickcast findById长id Quickcast保存Quickcast quickcast

然后,我们将一些测试数据加载到BootStrap常规.

grails应用程序init com ociweb quickcasts BootStrap groovy
与ociweb quickcasts进口常规转换CompileStatic@静态编译BootStrap QuickcastService quickcastService定义初始化servletContext quickcastService保存快播标题'拦截弹',
                字幕: '365bet地区OCI的365bet地区 Quickcast',
                durationMinutes: 17,
                持续时间: 01,
                发布年份: 2016,
                标记dataServerLink
                英雄形象: 'HTTP本地主机快速广播拦截器png',
                结束数据服务器链接
                视频网址: 'http本地主机grails quickcast拦截器mp',
                作家: ['杰夫·斯科特·布朗'按设置,
                描述: '365bet地区本快速入门仅假定基本熟悉Groovy(无论如何还是非常有表现力的)和您已经知道的MVC概念,也可以很好地介绍任何语言的拦截器模式,因为365bet地区\'幕后花样让您专注于图案的逻辑'quickcastService保存快播标题'JSON视图365bet地区',
                字幕: '365bet地区OCI的365bet地区 Quickcast',
                视频网址: 'http本地主机grails quickcast jsonviews mp',
                英雄形象: 'http本地主机quickcast jsonviews png',
                durationMinutes: 15,
                持续时间: 40,
                发布年份: 2016,
                描述: '''令人愉悦且内容丰富的会议记录布朗探究JSON视图从使用标准Web配置文件创建的365bet地区应用程序开始布朗添加了一些自定义域类艺术家类具有与之相关的专辑并带有grails rest注释资源最终目的是发布REST API在艺术家下管理艺术家类的实例并支持JSON和XML格式布朗使用音乐示例,包括David Bowie RIP的Space Oddity和Yes的“ Close to the Edge”。向艺术家发送请求会列出所有拥有专辑的艺术家与它们相关联当应用程序在开发模式下运行时,可以更改JSON文件,并且可以在应用程序中实时查看这些更改的效果。例如,将ArtistName Riverside切换为ArtistName Riverside此​​快速广播假定具备365bet地区 JSON和REST API的基本知识查看Brown的JSON视图整洁介绍''',
                作家: ['杰夫·斯科特·布朗'按设置quickcastService保存快播标题'多项目构建365bet地区',
                字幕: '365bet地区OCI的365bet地区 Quickcast',
                英雄形象: 'http本地主机quickcast multiprojectbuilds png',
                视频网址: 'http本地主机grails quickcast jsonviews mp',
                durationMinutes: 14,
                持续时间: 28,
                发布年份: 2016,
                描述: '''365bet地区在此Quickcast中,OCI 365bet地区开发负责人Graeme Rocher带领您完成365bet地区中的多个项目构建365bet地区对多个项目构建和插件做了一些方便的事情,其中​​最重要的一点是365bet地区首先编译了您的插件,并放置了类和资源。这些插件直接在类路径中,这使您可以对插件进行更改,并立即在构建中查看这些更改''',
                作家: ['格雷姆·罗彻(Graeme Rocher)'按设置quickcastService保存快播标题'角形脚手架',
                字幕: '365bet地区OCI的365bet地区 Quickcast',
                英雄形象: 'http本地主机quickcast angularscaffolding png',
                视频网址: 'http本地主机grails quickcast jsonviews mp',
                durationMinutes: 9,
                持续时间: 27,
                发布年份: 2016,
                描述: '''365bet地区在本快速广播OCI工程师中,James Kleeh指导您使用365bet地区的Angular脚手架,通过简单的博客格式进行演示,以构建功能全面的Web应用程序。本教程介绍了如何让365bet地区设置REST端点以及获取所需的所有Angular模块。网络应用程序正在运行''',
                作家: ['詹姆斯·克莱'按设置quickcastService保存快播标题'365bet地区检索运行时配置值365bet地区',
                字幕: 'OCI的365bet地区 Quickcast',
                英雄形象: 'http本地主机quickcast检索runtimeconfigvalues png',
                视频网址: 'http本地主机grails quickcast jsonviews mp',
                durationMinutes: 17,
                持续时间: 51,
                发布年份: 2016,
                描述: '''365bet地区在第五篇365bet地区 QuickCast中,365bet地区联合创始人Jeff Scott Brown强调了365bet地区框架的一些重要功能。在不到几分钟的时间里,Jeff描述了几种在运行时检索配置值的技术,并讨论了这些不同技术的利弊。仅需要对365bet地区有基本的了解即可从OCI和DZone获得365bet地区 Quickcast系列,365bet地区利用Convention over Configuration设计范例来减少使用该框架的开发人员在不丧失灵活性的情况下做出的决策数量。这是365bet地区显着提高开发人员生产率的主要原因之一,而365bet地区应用程序所涉及的配置通常比使用其他框架构建的类似应用程序少得多的配置。在这段短视频中,Jeff共享了许多使365bet地区易于使用的机制开发人员定义配置值并在运行时访问这些配置值''',
                作家: ['杰夫·斯科特·布朗'按设置quickcastService保存快播标题'使用IntelliJ IDEA 365bet地区开发365bet地区应用程序',
                字幕: 'OCI的365bet地区 Quickcast',
                英雄形象: 'http本地主机quickcast developmentgrailsappswithintellij png',
                视频网址: 'http本地主机grails quickcast jsonviews mp',
                durationMinutes: 22,
                持续时间: 42,
                发布年份: 2016,
                描述: '''365bet地区在第六篇365bet地区 QuickCast中,365bet地区联合创始人Jeff Scott Brown介绍了与在IDEA中构建365bet地区应用程序相关的一些技巧和窍门。365bet地区 Quickcast系列是由OCI和DZone提供的。365bet地区是一个高效的框架,用于为JVM IntelliJ IDEA构建Web应用程序。是一个高生产率的集成开发环境IDE,用于构建各种类型的应用程序IDEA一直对构建365bet地区应用程序一直有非常强的支持,尤其是在任何使用365bet地区进行开发的IDE中都提供了最好的支持''',
                作家: ['杰夫·斯科特·布朗'按设置def破坏

堆栈模板

我们首先展示苹果TVML堆栈模板与365bet地区 Quickcasts

stackTemplate

创建一个365bet地区365bet地区控制器处理请求

365bet地区控制器在Model View Controller MVC模式中实现C,并负责处理Web请求。在365bet地区中,控制器是一个类,其名称以约定Controller结尾并位于grails应用程序controllers目录中

grailsw创建控制器com ociweb快速广播快速广播

要求http本地主机quickcast执行指数的行动QuickcastController

365bet地区应用程序控制器com ociweb quickcasts QuickcastController groovy
与ociweb quickcasts进口 常规转换CompileStatic

静态编译
 QuickcastControllerQuickcastService quickcastService静态的responseFormats'XML文件'RelatedQuickcastsService相关QuickcastsService定义 指数() {
        [快速广播quickcastService findAll定义 节目(longid快速广播quickcast quickcastService findById id快播快播相关的快速广播relatedQuickcastsService findAllRelatedQuickcasts quickcast

QuickcastController索引方法呈现每个快速播报使用下一个标记视图

标记视图允许使用渲染XML响应Groovy的MarkupTemplateEngine

grails应用程序视图quickcast index gml
进口 com ociweb quickcasts快速广播模型可迭代的quickcasts文档stackTemplate横幅标题这个g消息: '速播标题'collectionList架子部分快速广播每个快速广播锁定取消选择: "getDocument快速广播${快播ID}')"imgsrc快播英雄宽度: 150, 高度: 226标题快速广播标题

标记视图以Groovy结尾,文件扩展名是GML并居住在grails应用程序视图目录

写一个功能测试测试生成的XML是我们期望的

添加Micronaut HTTP客户端依赖性

建立gradle
测试编译"io micronaut micronaut http客户端"
src集成测试groovy com oci Web Quickcasts QuickcastControllerIndexSpec groovy
与ociweb quickcasts进口 grails测试mixin集成集成
进口 grails gorm交易
进口 365bet地区测试Spock一次
进口 groovy xml XmlUtil
进口 io micronaut http客户端HttpClient
进口 org custommonkey xmlunit XMLUnit
进口 spock lang共享
进口 spock lang规格
进口 org springframework bean工厂注释值

回滚
积分
 QuickcastControllerIndexSpec 延伸规格共享HttpClient客户端之前
    虚空在里面的baseUrl"HTTP本地主机$服务器端口"
        这个HttpClient的客户创造的baseUrl的toURL定义 "测试堆栈模板正确呈现"() {

        给定:
        定义预期'''
    
        
            365bet地区Grails Quickcasts
        
        
            
                
拦截弹 JSON视图Grails 多项目构建Grails 角形脚手架 检索运行时配置值Grails 使用IntelliJ IDEA Grails开发Grails应用程序
'''
什么时候: xml客户端toBlocking检索'快播'XMLUnit setIgnoreWhitespace真正XMLUnit setNormalizeWhitespace真正) 然后XMLUnit compareXML XmlUtil序列化xml预期相同

为了促进测试中的XML比较,我们包括XMLUnit测试作为依赖

建立gradle
测试编译"xmlunit xmlunit"

产品模板

当我们选择第一个Quickcast时,驻留在其中的文档http本地主机quickast被推入导航堆栈

要呈现Quickcast,我们使用Apple TVML产品模板.

productTemplate

要求http本地主机quickcast执行节目的行动QuickcastController.

365bet地区应用程序控制器com ociweb quickcasts QuickcastController groovy
与ociweb quickcasts进口 常规转换CompileStatic

静态编译
 QuickcastControllerQuickcastService quickcastService静态的responseFormats'XML文件'RelatedQuickcastsService相关QuickcastsService定义 指数() {
        [快速广播quickcastService findAll定义 节目(longid快速广播quickcast quickcastService findById id快播快播相关的快速广播relatedQuickcastsService findAllRelatedQuickcasts quickcast

传递给我们视图的模型是所需的Quickcast和一系列相关视频

yml应用程序我们配置要显示多少个相关的Quickcast

grails应用配置会议应用yml
ociweb:
    快速广播:
        numberOfRelatedQuickcasts: 3

获取相关的快速广播封装在服务中

grails应用程序服务com oci web快速广播RelatedQuickcastsService groovy
与ociweb quickcasts进口 grails config配置
进口 grails核心支持365bet地区ConfigurationAware
进口 grails gorm交易ReadOnly

 相关Quickcasts服务 实施365bet地区ConfigurationAware整型numberOfRelatedQuickcasts覆写
    虚空setConfiguration Config co numberOfRelatedQuickcasts co getRequiredProperty'ociweb quickcasts numberOfRelatedQuickcasts', 整数)
    }

    只读
    清单findAllRelatedQuickcasts Quickcast Quickcast定义条件Quickcast createCriteria条件列表ne'ID'quickcast id maxResults numberOfRelatedQuickcasts 清单
    }
}

QuickcastController索引方法呈现快速播报使用下一个标记视图

grails应用程序意见quickcast show gml
进口 com ociweb quickcasts快速广播型号Quickcast Quickcast可迭代的relatedQuickcasts文档productTemplate横幅信息列表信息标题标题这个g消息: '快速广播作者标头'快速广播作者每位作者文字"$作者"堆栈标题快速广播标题字幕快速广播字幕行文本"${快速广播持续时间}${快速广播持续时间}"文字快播发布年份说明allowZooming: "真正", 更多标签: "更多", "${速播说明}"行按钮锁定取消选择: "playMedia${quickcast videoUrl}视频"徽章src: "资源按钮播放"标题""英雄形象srcquickcast heroImg架子标题标题这个g消息: 'quickcast交叉销售标头'本节relatedQuickcasts每个相关的Quickcast锁定取消选择: "getDocument快速广播${快播ID}')"imgsrc相关速播英雄宽度: 150, 高度: 226与标题相关的快速广播标题

通过功能测试,我们测试了呈现的XML是否符合我们的预期

src集成测试groovy com ociweb quickcasts QuickcastControllerShowSpec groovy
与ociweb quickcasts进口 grails测试mixin集成集成
进口 grails gorm交易
进口 365bet地区测试Spock一次
进口 groovy xml XmlUtil
进口 io micronaut http客户端HttpClient
进口 org custommonkey xmlunit XMLUnit
进口 spock lang共享
进口 spock lang规格

回滚
积分
 QuickcastControllerShowSpec 延伸规格共享HttpClient客户端之前
    虚空在里面的baseUrl"HTTP本地主机$服务器端口"
        这个HttpClient的客户创造的baseUrl的toURL定义 "测试产品模板正确呈现"() {
        给定:
        定义预期'''
    
        
            
                
                    
s
杰夫·斯科特·布朗
拦截弹 OCI的365bet地区 Quickcast 分钟秒 2016 365bet地区本快速入门仅假定基本熟悉Groovy(无论如何还是非常有表现力的)和您已经知道的MVC概念,还可以用任何语言很好地介绍拦截器模式,因为365bet地区在幕后的工作方式使您可以专注于模式的逻辑
观众也看了
JSON视图Grails 多项目构建Grails 角形脚手架
'''
什么时候: xml客户端toBlocking检索'快播'XMLUnit setIgnoreWhitespace真正XMLUnit setNormalizeWhitespace真正) 然后XMLUnit compareXML XmlUtil序列化xml预期相同

国际化

国际化365bet地区是365bet地区的头等公民

365bet地区365bet地区通过利用底层的Spring MVC国际化支持立即支持国际化。借助365bet地区,您可以基于用户的Locale自定义视图中显示的文本。

渲染这样的片段

给定:
定义预期'''

我们使用此代码

标头标题这个g消息: '快速广播作者标头')
}

在中定义消息代码和默认值消息属性

365bet地区应用程序在消息属性中
365bet地区重新播放按钮按钮播放快速广播作者标题作者快速广播交叉销售标题查看器,也观看了快速广播标题365bet地区快速广播

包括西班牙文本地化很容易将本地化的消息代码包括在消息es属性.

365bet地区应用程序i消息es属性
365bet地区重新播放按钮播放再现性快速广播作者标题Autores快速广播交叉销售标题Otros usuariostambiénvieron快速广播标题365bet地区快速广播

运行应用程序

365bet地区要运行365bet地区应用程序,请使用gradlew bootRun命令将在端口上启动应用程序

365bet地区运行Xcode项目,您的Apple TvOS应用程序将连接到您的365bet地区后端

您需要365bet地区帮助吗

OCI赞助了本指南的创建OCI提供了几种365bet地区服务:

免费咨询

OCI 365bet地区团队包括365bet地区联合创始人Jeff Scott Brown和Graeme Rocher检查我们的365bet地区课程并向发展和维护365bet地区的工程师学习

Grails OCI团队