使用OAuth 2.0构建一个Sell应用程序-第2部分:在Zendesk Sell中安装应用程序亚博
在上一篇教程中,您阅读了应用程序设计要求,安装了Zendesk CLI,并下载了带有启动器文件的应用程序模板来构建Sell应用程序。亚博
在本教程中,您将在Zendesk Sell界面中指定应用程序的位置,私下安装应用程序,并学习如何在本地开发应用程序。亚博本教程涵盖以下任务:
本教程是构建Zendesk应用程序系列的第二部分:亚博
- 第1部分:打基础
- 第二部分:在Zendesk销售中安装应用程序-你在这里亚博
- 第3部分:OAuth 2.0设置
- 第4部分:在Mailchimp中创建受众
- 第5部分:从Mailchimp API获取数据
在Sell中设置应用程序的位置
你可以在里面运行Zendes亚博k应用不同的位置在Zendes亚博k销售用户界面。在本教程中,您将应用程序的位置设置为Person页面的右侧侧边栏:
在Sell中设置应用程序位置
在代码编辑器中,打开manifest.json文件在您的应用程序项目文件夹(/ dist / manifest.json).的manifest.json文件用于配置应用程序。
将location属性的默认值替换为以下值:
“位置”:{
“卖出”:{
“person_card”:“资产/ index . html”
}
},
保存文件。
检查模板文件
您的Zen亚博desk应用程序将位于iframe中person_card
您在前一节中指定的位置。与任何iframe应用程序一样,开发Zendesk应用程序包括将HT亚博ML文件中的静态和动态元素组合在iframe中显示。
HTML主文件index . html位于您的根应用程序项目文件夹中。打开index . html文件在你的代码编辑器和重命名标题为“出售OAuth Mailchimp教程应用程序”。保存文件。
<!文档类型超文本标记语言>
<超文本标记语言>
<头>
<元字符集="utf - 8"/>
<标题>出售OAuthMailchimp的教程应用程序标题>
<脚本src="https://assets.亚博zendesk.com/apps/sdk/2.0/zaf_sdk.js">脚本>
<链接
rel="样式表"
href="https://assets.亚博zendesk.com/apps/sdk-assets/css/0/zendesk_garden.css"
类型="文本/ css"
/>
头>
<身体>
<divid="应用程序">div>
身体>
超文本标记语言>
为了与app框架交互,HTML文件在一个脚本标记中导入ZAF SDK库:
<脚本src="https://static.zdassets.com/亚博zendesk_app_framework_sdk/2.0/zaf_sdk.min.js">脚本>
SDK提供了一个ZAFClient全局对象,允许应用程序和主机Zendesk产品之间的跨帧通信。亚博导入SDK后,您可以使用ZAFClient.init ()
方法来创建一个应用程序API客户端:
const客户端= ZAFClient.init()
客户端提供了应用程序和主机应用程序(如Zendesk Sell)之间的接口。亚博客户端为您提供了许多与Apps框架交互的方法。使用get ()
而且设置()
方法来读取和写入框架api中的数据。使用invoke ()
方法来运行框架api中的方法。使用请求()
方法向任何REST API发出HTTP请求。使用在()
收听方法事件.详细信息请参见ZAF客户端API文档.由于跨帧通信的特性,iframe和框架之间的每个交互都是异步发生的。
初始化客户端src / index.tsx根目录中的文件< App / >
组件。为了只初始化客户端一次,使用ReactuseMemo使用钩子。
声明varZAFClient:{
初始化:()= >客户端,
}
常量应用程序=()= >{
常量客户端=useMemo(()= >ZAFClient.初始化(),[])
返回(
<ZAFClientContextProvider价值={客户端}>
<ThemeProvider>
<EntryView/>
ThemeProvider>
ZAFClientContextProvider>
)
}
的< App / >
组件将呈现在带有id的div容器中“应用程序”
.
ReactDOM.渲染(<应用程序/>,文档.getElementById(“应用程序”))
div定义在index . html文件之间的身体< >
标签。
的的反应环境是用来做的客户端
组件树的可访问性,而无需在每一层手工传递它。
<ZAFClientContextProvider价值={客户端}>
< ZAFClientContextProvider >
是一部分的@亚博zendesk / sell-zaf-app-toolbox包中。这个包包含了方法、钩子和组件,可以帮助你更快、更省力地构建和集成React应用程序与Zendesk Sell。亚博
对于这个应用程序,亚博Zendesk花园用作UI框架。亚博Zendesk Garden被设计为所有Zendesk产品之间的样式和组件的公共基线。例如,它提供可定制的React组件例如旋转器和按钮,可以包括在项目中。Zend亚博esk花园资产样式你的应用程序,以匹配Zendesk产品的外观和感觉。
的< EntryView / >
组件被包装在< ThemeProvider >
由@亚博zendeskgarden / react-theming包为嵌套组件提供默认的全局主题。
<ThemeProvider>
<EntryView/>
ThemeProvider>
亚博Zendesk Sell暴露了应用程序出售API这可能在不同的位置有所不同。这个API定义了你可以用来在Zendesk Sell中构建应用程序的事件和对象。亚博
由于应用程序将显示在右侧的Person Card位置,其中一个可用对象是联系对象。在这个对象中,您将使用电子邮件地址财产。
的EntryView.tsx文件(src / EntryView.tsx)是一个应用程序组件,它发出两个HTTP请求,然后显示数据。
出口常量EntryView=()= >{
useClientHeight(230)
常量contactEmailResponse=useSellContactEmail()
常量todayDate=useFormattedDate(新日期())
返回(
<网格排水沟={假}类名称={css.应用程序}>
<行>
<ResponseHandler
响应={contactEmailResponse}
loadingView={<加载程序/>}
errorView={<div>某物哪里出了错!div>}
emptyView={<div>在那里还没有什么好看的.div>}
>
{([sellContact]:[字符串])= >(
<上校textAlign="中心">
<头contactEmail={sellContact}/>
<div类名称={css.dateContainer}>日期:{todayDate}div>
<ContentView/>
上校>
)}
ResponseHandler>
行>
网格>
)
}
- 的第一个请求useSellContactEmail钩使用
client.get(“contact.email”)
获取基于当前位置的销售联系电子邮件地址。 - 的第二个请求useFormattedDate钩子根据Sell帐户设置格式化给定的日期。
- useClientHeight是另一个用于设置应用程序高度的钩子。它接受一个高度值并调用
客户端。调用(“调整”,{高度})
. - 的
< ResponseHandler / >
组件负责处理异步请求。根据请求状态,它可以显示加载器、错误状态或空状态。当发出请求时,将显示带有响应数据的子组件。
接下来,您将在Zendesk Sell实例中安装应用程序,并检查其工作方式亚博。
在Sell中安装应用程序
请注意:您只能上传和安装销售增长计划或以上的私人销售应用程序。销售帐户还必须链接到Zendesk支持帐户。亚博
在安装之前,应用程序需要进行验证,然后打包成zip文件进行上传。在命令行中,运行npm脚本:
运行构建
您应该确认生成了一个新的zip文件。该文件可以在dist / tmp /文件夹中。请按照在Zendesk Sell中上传并安装一个私人应用程序亚博在Zendesk Sell中安装私有应用程序。亚博
测试应用程序
一旦你安装了你的应用程序,你会检查应用程序的工作,并显示在正确的位置。首先,将创建一个联系人,然后查看卡片,查看应用程序是否可见。
创建联系人
点击添加按钮在顶部栏上并选择联系人:人下拉选择。
在表格中填写第一个名字,姓而且电子邮件地址.
点击保存并查看联系人.
电子邮件地址将获取与特定的人有联系的观众。
您应该在Person侧栏中看到该应用程序。
本地测试应用程序
Zend亚博esk CLI (ZCLI)包括一个本地web服务器,这样你就可以在开发应用程序时在本地运行和测试应用程序。
请注意:在测试和开发应用程序时,建议在浏览器中使用私密浏览或隐身模式。您的浏览器可能会缓存应用程序使用的某些文件。如果应用程序中的更改不起作用,则浏览器可能正在使用该文件的旧缓存版本。使用私人浏览,文件不会被缓存。
在本地测试应用
在你的项目中dist /目录,创建一个名为zcli.apps.config.json内容如下:
{
“计划”:“银”,
“app_id”:”YOUR_APP_ID”,
“installation_id”:”YOUR_INSTALLATION_ID”,
“参数”:{}
}
要找到您的应用程序详细信息,以管理员身份登录到Zendesk Sell实例,并在同一亚博浏览器中打开以下页面,替换YOUR_SUBDOMAIN用你自己的:
https://YOUR_SUBDOMAIN.亚博.com/api/出售/应用程序/安装.js
定位您安装的应用程序,找到id而且app_id的“your_app_id”和“YOUR_INSTALLATION_ID”zcli.apps.config.json文件。
保存文件。
在你的命令行工具中,导航到应用程序的根文件夹并启动本地ZCLI服务器:
运行服务器
命令执行
Zcli应用:server ./dist
在下面。过了一会儿,会出现一条状态消息,通知您本地web服务器已启动。在命令行工具中打开一个新选项卡并启动应用程序:
运行start
登录到Sell并导航到Person页面。
附加
? zcli_apps = true
直接到人卡URL并按下输入.URL应该是这样的:https://应用程序.futuresimple.com/crm/联系人/1234?zcli_apps=真正的
提示:将修改后的网址收藏起来,方便日后查阅。
如果你使用的是Chrome浏览器,应用程序的内容可能会被屏蔽。
单击地址栏左侧的“锁定”图标,选择网站设置.在“设置”页面,滚动到不安全的内容部分,并选择允许.点击地址栏上的锁图标:
在“设置”页面,允许不安全内容:
请注意: Firefox不会屏蔽应用程序内容,但Safari会,而且没有禁用屏蔽的选项。必须使用Chrome或Firefox才能使用本地ZCLI服务器。
在代码中进行任何更新,并检查是否看到应用程序中反映的更改。
在本教程中,您建立了应用程序位置,并在Zendesk Sell实例中安装了应用程序。亚博现在,您可以切换到命令行界面并按下按钮来关闭服务器控制+C.
在下一篇教程中,您将实现OAuth授权流。继续第3部分:OAuth 2.0设置.