构建您的第一个聊天应用程序-第2部分:设计用户界面
在本系列的上一篇教程中，您安装了ZCLI并为名为Learn More的应用程序创建了启动器文件。在本教程中，您将在用户界面上工作，使其符合应用程序的设计要求。本教程涵盖以下任务:
本教程是构建Zendesk应用程序系列的第二部分:亚博
- 第1部分-奠定基础
- 第2部分-设计用户界面-你在这里
- 第3部分-创建和插入模板
- 第4部分-获取数据
- 第5部分-在Zendesk聊天中安装应用程序亚博
在聊天中设置应用的位置
您可以在Zendesk聊天和亚博Zendesk支持用户界面的不同位置运行Zendesk应用程序。在本教程中，您将应用程序的位置设置为聊天窗口的侧边栏，该窗口在代理响应或发起与访问者聊天后打开:
在聊天中设置应用位置
在文本编辑器中，打开名为manifest.json在你的app文件夹(/ learn_more manifest.json）.
的manifest.jsonFile用于配置应用程序。
将location属性的默认值替换为以下值:
“位置”：｛“聊天”：｛“chat_sidebar”：“资产/ iframe.html”}}，保存文件。
亚博Zendesk Chat目前只有一个应用位置，chat_sidebar。
查看主HTML文件
您的Zen亚博desk应用程序将驻留在chat_sidebar您在上一节中指定的位置。像任何iframe应用程序一样，开发Zendesk应用程序包括将HT亚博ML文件中的静态和动态元素组合在一起，以显示在iframe中。
ZCLI创建了一个默认的HTML文件iframe.html在你的资产文件夹(learn_more /资产/ iframe.html）.打开iframe.html文件在您最喜欢的文本编辑器。
为了与Apps框架交互，HTML文件在script标签中导入了ZAF SDK库:
<脚本src=＂https://static.zdassets.com/亚博zendesk_app_framework_sdk/2.0/zaf_sdk.min.js＂>脚本>
导入SDK后，可以使用ZAFClient.init ()方法创建app的API客户端:
var客户端=ZAFClient。初始化（）；
客户端提供了应用程序和主机应用程序(如Zendesk Chat)之间的接口。亚博客户端为您提供了许多与Apps框架交互的方法。使用get ()和设置()在框架api中读写数据的方法。使用invoke ()方法来运行框架api中的方法。使用请求()方法向任何REST API发出HTTP请求。使用在()收听方法<一个href=＂//www.ying8.net/documentation/apps/app-developer-guide/using-the-apps-framework/">事件。启动器文件给出了一个示例:
客户端。调用（“调整”，｛宽度：“100%”，高度：“200 px”}）；
测试应用程序
你的应用程序还没有做很多事情，但你已经可以使用ZCLI运行它了。经常运行你的应用来测试你的最新修改。
测试你的应用
在命令行界面中，导航到learn_more文件夹中。例子:
cd / learn_more项目运行以下命令启动ZCLI中包含的本地web服务器:
zcli应用:服务器过了一会儿，会出现一条状态消息，告诉您本地web服务器已经启动。
在Ze亚博ndesk聊天中，进入游客并通过响应或发起一个测试聊天来打开一个聊天窗口。
如果没有访问者列表，单击模拟游客在访问者页面上。在出现的浏览器窗口中打开聊天小部件，并给自己发送一条消息。回到游客在聊天页面中，接受聊天打开聊天窗口。
聊天窗口的URL应该是这样的:
https://{子域名}.zendes亚博k.com/chat/agent #游客/ visitor_list /状态# !1320285——fwgieuak2fufzc如果您有主机映射的域，请将聊天窗口的URL更改为默认的Zendesk域(亚博
https://{子域名}.zendes亚博k.com/..。)并重新加载。插入? zcli_apps = true在聊天窗口URL后直接/代理在任何之前＃，按“Enter”。确认要离开该页面并打开一个新页面。
更新后的聊天窗口URL应该是这样的:
https://{子域名}.zendes亚博k.com/chat/agent ? zcli_apps = true #家# !1320285——fwgieuak2fufzc向下滚动聊天窗口的右边栏，寻找一个宣布“Hello world!”的面板。如果没有，则浏览器可能阻止了本地ZCLI服务器的HTTP内容加载到HTTPS页面。这就是所谓的混合内容。您必须禁用浏览器阻止，如下一步所述。
如果你使用的是Chrome浏览器，你的应用内容可能会被屏蔽。单击地址栏左侧的锁定图标，选择网站设置。在“设置”页面上，滚动到“不安全内容”部分并选择允许。
点击地址栏中的锁定图标:
在“设置”页面，允许不安全的内容:
请注意Firefox不会屏蔽应用程序内容，但Safari会，而且没有禁用屏蔽的选项。必须使用Chrome或Firefox才能与本地ZCLI服务器一起工作。
应用程序的“Hello, World!”标题在iframe.html文件。中的所有HTML标记都可以自由更改或删除iframe.html文件。
请注意:如果你没有看到“Hello, World!”，确保你已经更新了manifest.json文件。看到<一个href=＂＃setting-the-apps-location-in-chat">在聊天中设置应用的位置。如果仍然没有发生，请确保您的聊天帐户是在Zendesk套件增长计划或以上，并链接到Zendesk支持帐户。亚博聊天应用程序只支持这些计划。
回顾你的模型，找出你需要做的改变:
回顾给了你第一个待办事项清单:
- 改变标题
- 添加一个显示“报告错误”的页脚，并提供一个用户可以报告错误的网站链接
- 添加CSS对用户界面进行格式化
- 将CSS和JavaScript移动到不同的文件中
请注意您现在可以忽略UI的其余部分。您将在本系列的下一个教程中使用模板插入它。
清理默认代码
打开iframe.html将“Hello, World!”头字符串替换为“LEARN MORE”。
删除h2的“u-gamma”类:
<h2>了解更多h2>创建一个名为main.js在资产文件夹中。
亚博电脑端JavaScript、CSS和图像文件等资源必须位于资产文件夹中。
添加以下函数到main.js：
（函数（）｛var客户端=ZAFClient。初始化（）；客户端。调用（“调整”，｛宽度：“100%”，高度：“180 px”}）；}）（）；代码定义了一个自调用的匿名函数，该函数在文档加载到浏览器后运行。函数的两个语句与脚本标签中包含的语句相同iframe.html。
早在iframe.html，删除以下内容
< >脚本标签，不再需要;<脚本>//初始化Apps的框架客户端。参见:/ / https://developer亚博.zendesk.com/documentation/apps/app-developer-guide/getting_startedvar客户端=ZAFClient。初始化（）客户端。调用（“调整”，｛宽度：“100%”，高度：“200 px”}）脚本>将其替换为以下内容
< >脚本标签导入新脚本:<脚本src=＂main.js＂>脚本>插入标签后的
< >脚本标记，引用ZAF SDK，以确保在脚本运行之前将SDK加载到内存中。你的身体iframe.html文件应该如下所示:<身体><h2>了解更多h2><脚本src=＂https://static.zdassets.com/亚博zendesk_app_framework_sdk/2.0/zaf_sdk.min.js＂>脚本><脚本src=＂main.js＂>脚本>身体>保存这两个文件。
添加页脚
根据模型，页脚应该显示一个“报告bug”链接。规范规定，该链接应该允许用户到你的网站报告错误。
添加页脚链接
在iframe.html文件中，在脚本标签前添加以下footer标签:
<页脚><一个href=＂https://mysite.github.io/support＂目标=＂平等自愿＂>报告错误一个>页脚>保存文件并单击浏览器上的重新加载页面按钮。
在模型中，页脚中的链接文本更小，并且使用了不同的字体。在下一步中，您将添加一些CSS来开始对应用程序进行样式化。
添加样式
默认情况下，ZCLI在iframe文件中导入Zendesk亚博 Garden样式表:
<链接rel=＂样式表＂href=＂https://cdn.jsdelivr.net/combine/npm/@亚博zendeskgarden/<一个href=＂//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98a9a9ac48b8c8d9b868a82a9dec7d9c7dbd8">(电子邮件保护)，npm亚博/ @zendeskgarden /<一个href=＂//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7d6d6d336b6a7772776a777b6d5e2a302d302e">(电子邮件保护)＂>
您不必在未来的项目中使用Zendesk Ga亚博rden。选择权在你。例如，您可以导入流行的<一个href=＂http://getbootstrap.com/css/">引导CSS。
在本教程中，您将继续使用Zendesk Garden样式，并在名为亚博main.css。
在iframe.html，添加Buttons组件;
npm @亚博zendeskgarden /<一个href=＂//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781b0b0b551a0d0c0c17160b384f564856494b">(电子邮件保护)，到Zendesk亚博 Garden样式表链接:<链接rel=＂样式表＂href=＂https://cdn.jsdelivr.net/combine/npm/@亚博zendeskgarden/<一个href=＂//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0c1c1c420d0a0b1d000c042f58415f415d5e">(电子邮件保护)，npm亚博/ @zendeskgarden /<一个href=＂//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d1b2a2a2fcb3a4a5a5bebfa291e6ffe1ffe0e2">(电子邮件保护)，npm亚博/ @zendeskgarden /<一个href=＂//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e4f4f4aaf2f3eeebeef3eee2f4c7b3a9b4a9b7">(电子邮件保护)＂>注意不要省略分隔组件的逗号。参见Garden文档获取<一个href=＂https://zendeskgarden.github.io/css-components/?path=/story/components-buttons--types">按钮组件。
添加以下内容
<链接>在Zendesk花园后面亚博<链接>标签:<链接rel=＂样式表＂href=＂main.css＂>创建一个名为main.css在资产文件夹中。
将以下规则添加到main.css：
页脚｛字体大小：10px；margin-top：4px；}保存文件并单击浏览器上的重新加载页面按钮。
如果您要转到下一个教程，可以让ZCLI服务器继续运行。如果完成了此会话，可以通过切换到命令行界面并按Control+C关闭服务器。
在本教程中，您清理了iframe.html文件，将JavaScript移动到一个单独的文件中，添加一个页脚，并添加一些样式。
在下一个教程中，您将创建一个模板来显示一个表单，用于搜索Wikipedia上的文章。继续<一个href=＂//www.ying8.net/documentation/apps/build-an-app/build-your-first-chat-app/part-3-creating-and-inserting-templates/">第3部分-创建和插入模板。