文档<一个一个ria-current="false" class="desktop__NavLink-sc-agcvml-3 jKMhqV" href="//www.ying8.net/developer/api-reference/">API参考

构建第一个Support应用程序——第2部分:设计用户界面

在本系列的前一篇教程中，您安装了ZCLI并为名为Requester X-ray的应用程序创建了启动文件。在本教程中，你将处理用户界面，使其满足应用程序的设计要求。本教程涵盖以下任务:

  1. 查看主HTML文件
  2. 测试应用程序
  3. 清除默认代码
  4. 添加页脚
  5. 添加样式
  6. 改变logo

本教程是构建Zendesk应用程序系列的第二部分:亚博

查看主HTML文件

Ze亚博ndesk应用程序位于产品的iframe中。与任何iframe应用程序一样，开发Zendesk应用程序包括将HT亚博ML文件中的静态和动态元素组合在iframe中显示。

ZCLI创建了一个名为iframe.html在你的资产文件夹(xr_app /资产/ iframe.html)．HTML文件定义了应用程序的可视元素(如头)，当应用程序改变状态时，这些元素不会改变。打开iframe.html在您最喜欢的文本编辑器中文件。

为了与app框架交互，HTML文件必须在脚本标记中导入ZAF SDK库:

             

              
<脚本src＝＂https://static.zdassets.com/亚博zendesk_app_framework_sdk/2.0/zaf_sdk.min.js＂>脚本>

导入SDK后，您可以使用ZAFClient.init ()方法来创建Zendesk JavaSc亚博ript API客户端:

             

              
var客户端＝ZAFClient．初始化（）；

客户端提供了应用程序和主机应用程序(如Zendesk Support)之间的接口。亚博客户端为您提供了许多与Apps框架交互的方法。使用get ()而且设置()方法来读取和写入框架api中的数据。使用invoke ()方法来运行框架api中的方法。使用请求()方法向任何REST API发出HTTP请求。使用在()收听方法<一个href＝＂//www.ying8.net/documentation/apps/app-developer-guide/using-the-apps-framework/">事件．starter文件给出了一个例子:

             

              
客户端．调用（“调整”，｛宽度：“100%”，高度：“200 px”｝）；

测试应用程序

您的应用程序还没有做很多事情，但您已经可以使用ZCLI运行它。经常运行应用程序来测试最新的更改。

亚博Zendesk强烈建议在测试和开发应用时使用浏览器中的私密浏览或隐身模式。您的浏览器可能会缓存应用程序使用的某些文件。如果应用程序中的更改不起作用，则浏览器可能正在使用该文件的旧缓存版本。使用私人浏览，文件不会被缓存。

在Chrome浏览器中，单击浏览器窗口右上角的菜单按钮，选择开启私浏览功能新的隐身窗口．在Firefox浏览器中，单击右上角的菜单按钮，选择新建私有窗口．

测试你的应用

  1. 在命令行界面中，导航到xr_app文件夹中。例如，如果你在项目文件夹:

                   
    
                
    cd xr_app

  2. 以如下命令启动ZCLI中包含的本地HTTP服务器:

                   
    
                
    zcli应用:服务器

    过了一会儿，会出现一条状态消息，通知您本地web服务器已启动。

  3. 在您的浏览器的私人或隐身窗口，导航到任何票在Zendesk支持。亚博您需要以代理或管理员的身份登录。URL应该是这样的:

    https://{子域名}.zendes亚博k.com/agent/tickets/ {ticket_id}

  4. 附加? zcli_apps = true到票据URL，并重新加载页面。

    URL应该是这样的:

    https://{子域名}.zendes亚博k.com/agent/tickets/ {ticket_id} ? zcli_apps = true

    提示:将修改后的网址收藏起来，方便日后查阅。你可能还想为应用程序测试创建一个虚拟票证。

  5. 如果你使用的是Chrome浏览器，应用程序的内容可能会被屏蔽。单击地址栏左侧的“锁定”图标，选择网站设置．在“设置”页面，滚动到“不安全内容”部分并选择允许．

    点击地址栏上的锁图标:

    在“设置”页面，允许不安全内容:

    注意:Firefox不会屏蔽应用程序内容，但Safari会，而且没有禁用屏蔽的选项。必须使用Chrome或Firefox才能使用本地ZCLI服务器。

  6. 如果应用程序没有出现在票务界面右侧的侧栏中，请单击应用程序按钮，以显示侧边栏。

    请求者x射线应用程序应该出现在侧边栏:

    即使应用程序出现在Zendesk支持页面中，它实际上是在你亚博的机器上本地运行的。

    请注意:如果什么都没有发生，检查地址栏中是否有屏蔽或锁定图标。参见步骤5。如果仍然没有情况发生，请确保您的帐户属于Zendesk Suite增长计划或以上计划，或支持专业人员计划或以上。亚博应用程序只支持这些计划。

框架显示了一个“请求者x射线”标题，该标题在iframe.html文件。标题定义在manifest.json文件在你的应用程序的根文件夹。

打开manifest.json在文本编辑器中文件。该文件已经包含创建应用程序文件时提供的值。

标题定义在的名字属性(“请求者x射线”)。

控件中的所有HTML标记都可以更改或删除iframe.html文件。检查你的模型，以确定你需要做的更改:

回顾会给你第一个待办事项清单:

  • 清理默认代码，包括删除“Hello, World!”标题并将JavaScript移到另一个文件
  • 添加一个页脚，显示“报告错误”，并链接到用户可以报告错误的网站。
  • 添加样式来格式化页脚
  • 替换标题中的默认logo

注意:您现在可以忽略主要内容。您将在本系列的下一篇教程中使用模板插入它。

清除默认代码

  1. 首先删除< h2 >朝着iframe.html．

  2. 创建一个名为main.js在资产文件夹中。

  3. 在main.js，添加以下函数，其中包含JavaScript代码iframe.html：

                   
    
                
    （函数（）｛var客户端＝ZAFClient．初始化（）；客户端．调用（“调整”，｛宽度：“100%”，高度：“200 px”｝）；｝）（）；

    代码定义了一个自调用的匿名函数，该函数在浏览器中加载文档之后运行——换句话说，在DOM准备就绪时运行。

  4. 当代码在您面前打开时，通过更改高度的resize方法中的属性200 px来120 px．

  5. 早在iframe.html，删除以下内容<脚本>标签，你不再需要它了:

                   
    
                
    <脚本>//初始化app框架客户端。参见:/ / https://developer亚博.zendesk.com/documentation/apps/app-developer-guide/getting_startedvar客户端＝ZAFClient．初始化（）客户端．调用（“调整”，｛宽度：“100%”，高度：“120 px”｝）脚本>

  6. 将其替换为以下内容<脚本>标签导入你的新脚本:

                   
    
                
    <脚本src＝＂main.js＂>脚本>

    插入标签后的<脚本>标记引用ZAF SDK，以确保在脚本运行之前将SDK加载到内存中。你的身体iframe.html文件应该如下所示:

                   
    
                
    <身体><脚本src＝＂https://static.zdassets.com/亚博zendesk_app_framework_sdk/2.0/zaf_sdk.min.js＂>脚本><脚本src＝＂main.js＂>脚本>身体>

  7. 保存两个文件。

根据模型，页脚应该显示一个“报告bug”链接。规范规定链接应该允许用户到你的网站报告错误。

添加一个页脚链接

  1. 在身体的iframe.html文件，在脚本标记之前添加以下页脚块:

                   
    
                
    <页脚><一个href＝＂https://mysite.github.io/support＂目标＝＂平等自愿＂>报告错误一个>页脚>

  2. 保存文件。

  3. 在代理界面中的测试票据上，单击刷新应用程序面板中的图标。

    在模型中，页脚中的链接文本较小，并使用了不同的字体。在下一步中，您将添加一些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="92f1e1e1bff0f7f6e0fdf1f9d2a5bca2bca0a3">(电子邮件保护)，npm亚博/ @zendeskgarden /<一个href＝＂//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a697979277f7e6366637e636f794a3e2439243a">(电子邮件保护)＂>

亚博Zendesk花园设计为所有Zendesk产品之间的样式和组件的公共基线。亚博上面的默认链接不包括所有Zendesk Garden资产，只包括Garden组件CSS亚博和CSS实用程序。您可以从jsDelivr CDN中获得可以导入的资产的完整列表。看到<一个href＝＂https://www.jsdelivr.com/?query=亚博zendeskgarden＂>https://www.jsdelivr.com/?query=亚博zendeskgarden．jsDelivr文件是npm包，也可以从<一个href＝＂https://www.npmjs.com/">npm．看到<一个href＝＂https://www.npmjs.com/search?q=亚博zendeskgarden＂>https://www.npmjs.com/search?q=亚博zendeskgarden．如果您希望您的应亚博用程序与Zendesk产品的外观和感觉相匹配，请使用Zendesk Garden资产。

您不必在项目中使用Zendesk Garde亚博n。选择权在你。在本教程中，您决定使用流行的<一个href＝＂http://getbootstrap.com/css/">引导CSS作为应用程序的基本样式表。你将在一个名为main.css．

  1. 在iframe.html，取代Zendesk花园亚博<链接>标签与以下引导<链接>标签:

                   
    
                
    <链接rel＝＂样式表＂href＝＂https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css＂crossorigin＝＂匿名＂>

  2. 添加到样式表的链接main.css引导之后<链接>标签:

                   
    
                
    <链接href＝＂main.css＂rel＝＂样式表＂>

  3. 创建一个名为main.css在资产文件夹中。

  4. 添加以下规则到main.css为页脚设置样式:

                   
    
                
    页脚｛字体大小：10px；padding-top：20.px；｝

  5. 保存文件。

  6. 在代理界面中的测试票据上，单击刷新应用程序面板中的图标。

接下来的任务是更改标识。

默认情况下，框架显示命名为logo-small.png在你的资产文件夹中。要更改应用程序的标志，只需替换logo-small.png在资产文件夹与您自己的图像。

你的替换logo-small.png文件应符合以下规格:

  • 大小: 128x128像素。CSS将缩放图像以适应标题。同样的图像也将在Zendesk Support用户界面中使用，并相应地缩放。亚博
  • 文件格式:透明的PNG-24。
  • 边境:没有，因为角会被CSS圆角化。

的资产文件夹还包括logo.png的形象。将此图像替换为320x320版本的logo。320x320版本将显示在Zendesk市场，支持管理员可以在那里浏览要安装的公共和私有应亚博用程序。

更换logo

  1. 右键单击以下每个图像链接，并将它们下载到资产文件夹在你的应用程序文件夹。如果出现提示，则同意覆盖文件的现有版本。

    • ［<一个href＝＂https://zen-marketing-documentation.s3.amazonaws.com/docs/en/logo-small.png">logo-small.png］
    • ［<一个href＝＂https://zen-marketing-documentation.s3.amazonaws.com/docs/en/logo.png">logo.png］

  2. 在代理界面中的测试票据上，单击刷新应用程序面板中的图标。

    如果更新后的图片没有出现，你需要在Zendesk Support中对页面进行硬刷新。亚博参见<一个href＝＂https://support.mozilla.org/en-US/kb/how-clear-firefox-cache">火狐或<一个href＝＂https://productforums.google.com/forum/?hl=en">铬在他们各自的网站上。您还可以清除浏览器缓存或将URL粘贴到另一个浏览器。

  3. 如果要转到下一个教程，可以让ZCLI服务器继续运行。如果完成了这个会话，可以切换到命令行界面并按Control+C来关闭服务器。

在本教程中，您清理了iframe.html通过ZCLI创建的文件，将JavaScript移动到一个单独的文件中，添加了页脚，添加了一些样式，并替换了徽标，以满足应用程序的设计要求。

在下一篇教程中，您将创建一个模板来显示关于请求者的相关信息。继续<一个href＝＂//www.ying8.net/documentation/apps/build-an-app/build-your-first-support-app/part-3-creating-and-inserting-templates/">第3部分-创建和插入模板．