构建第一个聊天应用程序-第4部分:获取数据
在本系列前面的教程中,您为一个名为Learn More的应用程序设计了用户界面。在本教程中,您将更新应用程序以搜索维基百科中关于特定主题的文章,然后将文章的链接粘贴到代理的聊天窗口中,以便发送给访问者。
让我们来分析一下应用逻辑:
- 该应用程序向MediaWiki API端点发出请求,以搜索有关选定主题的文章。
- 如果请求成功,应用程序将结果数据转换为消息,并将消息粘贴到聊天的消息区域。该应用程序使用Apps框架API来粘贴消息。代理只需按Enter键将链接发送给访问者。
- 如果请求失败,应用程序应该显示一个错误消息。
本教程涵盖了构建应用程序逻辑的步骤:
本教程是构建Zendesk应用程序系列的一部分:亚博
- 第一部分-奠定基础一个>
- 第2部分-设计用户界面一个>
- 第3部分-创建和插入模板一个>
- 第四部分-获取数据-你在这里
- 第5部分-在Zendesk Chat中安装应用程序亚博一个>
添加事件监听器
类的事件监听器是第一步<强大的>获取文章链接强大的>按钮。代理输入主题并点击按钮后,应用程序应执行以下任务:
- 检索代理在表单中输入的主题字符串
- 发出一个API请求以搜索关于该主题的文章
添加事件监听器强大的>
在<强大的>main.js强大的>文件,在文件顶部的自动执行函数中插入以下代码片段(高亮显示):
(函数(){
var客户端=ZAFClient.初始化();
客户端.调用(“调整”,{宽度:“100%”,高度:“180 px”});
showSearchForm();
文档.getElementById(“get-btn”).addEventListener(“点击”,函数(事件){
事件.preventDefault();
varsearch_str=文档.getElementById(“主题字段”).价值;
getArticles(search_str,客户端);
});
})();
突出显示的代码片段向id为的元素添加了一个“click”事件侦听器<强大的>get-btn强大的>,这是您用于您的<强大的>获取文章链接强大的>按钮。当用户单击按钮时,脚本将运行指定为参数的函数,该函数由3条语句组成:
第一个选项阻止按钮提交表单
第二个检索表单输入字段的值。你用<强大的>主题字段强大的>作为输入字段的id。
第三个调用名为<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">getArticles ()代码>,您将在下一节中定义它。函数接受<强大的>search_str强大的>变量和ZAF<强大的>客户端强大的>对象作为参数。您将需要这两者来发出API请求,这将在下一节中进行描述
发出API请求
您可以使用<一个href="//www.ying8.net/api-reference/apps/apps-core-api/client_api/">client.request ()一个>方法向外部api发送HTTP请求。的<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">请求()代码>方法使您可以通过代理服务器而不是直接通过浏览器路由请求,从而绕过浏览器请求的跨域限制。
定义API请求
的<一个href="//www.ying8.net/api-reference/apps/apps-core-api/client_api/">client.request ()一个>方法将定义请求设置的对象作为参数。例子:
var设置={
url:“https://www.example.com/api/resource.json”,
数据:{帧:“杰克”,lname:“小人物”},
数据类型:json的
};
客户端.请求(设置).然后(
//处理响应
);
“了解更多”应用程序的请求设置是什么?的<一个href="https://www.mediawiki.org/wiki/API:Search">搜索API一个>MediaWiki网站上的页面列出了相关信息。该应用程序将使用以下API端点搜索文章:
https://en.wikipedia.org/w/api.php代码>
一个端点是一个URL,可以在其中获取或设置有关资源的信息。要执行文章搜索,端点接受以下参数:
行动代码>-要执行的操作。看到<一个href="https://www.mediawiki.org/wiki/API:Query">API:查询一个>开发人员文档中的操作
srsearch代码>-检索词
srlimit代码>-要退回的文章总数
列表代码>-要返回的数据
格式代码>-要返回的数据格式
您将指定以下参数值:
{
行动:“查询”,
srsearch:{search_term},
srlimit:3.,
列表:“搜索”,
格式:json的
}
下面是信息如何映射到请求设置:
- 的<强大的>url强大的>是“https
://en.wikipedia.org/w/api.php”,API端点 - 的<强大的>数据强大的>端点参数是否在上面定义
- 的<强大的>数据类型强大的>是json(应用程序在响应中期望的内容)
MediaWiki API还要求在请求的头中指定一个自定义的“API - user - agent”头。看到<一个href="https://www.mediawiki.org/wiki/API:Main_page">识别客户一个>在MediaWiki网站。在请求设置中可以这样设置头:
头:{“Api-User-Agent”:“MyChatApp / 1.0 (<一个href="//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7218161d1732170a131f021e175c1c1706">(电子邮件保护)一个>)”}
报头应该标识您的脚本或服务,并提供一些联系您的方式,例如电子邮件地址。
搜索维基百科文章
在前一节中,您了解了Wikipedia API搜索的参数以及发出API请求的设置。将此信息插入<一个href="//www.ying8.net/api-reference/apps/apps-core-api/client_api/">client.request ()一个>方法使应用程序能够发出请求。
搜寻维基百科的文章强大的>
控件中插入以下函数<强大的>main.js强大的>文件:
函数getArticles(search_str,客户端){
var参数={
行动:“查询”,
列表:“搜索”,
srsearch:search_str,
srlimit:3.,
格式:“json”,
};
var设置={
url:“https://en.wikipedia.org/w/api.php”,
数据:参数,
头:{“Api-User-Agent”:“MyChatApp / 1.0 (<一个href="//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb5bbb0ba9fbaa7beb2afb3baf1b1baab">(电子邮件保护)一个>)"},
数据类型:“json”,
};
客户端.请求(设置).然后(函数(响应){
控制台.日志(响应);
});
}
如果请求成功,应用程序将在浏览器的控制台中显示响应数据<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">console.log(响应)代码>.
请求异步.换句话说,应用程序不会等待响应。它在处理请求时继续正常工作。当收到响应时,应用程序得到一个回调。的<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">那就是()代码>方法用于等待回调。方法返回一个<一个href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">承诺一个>并且有两个参数:成功时运行的函数和失败时运行的函数。这句话的基本意思是,“提出请求,然后在知道结果后做这两件事中的一件。”
客户端.得到(“ticket.requester.id”).然后(
inline_fn_on_success,
inline_fn_on_failure
);
但是,MediaWiki API的特性之一是即使遇到错误,它也会返回一个成功响应(状态200)。200响应体包含一个名为<强大的>错误强大的>.您可以使用此信息管理错误,如下一步所述。
将以下代码片段(高亮显示)添加到成功运行的函数中:
客户端.请求(设置).然后(
函数(响应){
如果(响应.错误){
showError(响应.错误);
}
控制台.日志(响应);
}
);
你定义了<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">showError ()代码>本教程前面部分中的函数。接下来将更新它以显示错误数据。
对。进行以下更改(突出显示)<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">showError ()代码>函数<强大的>main.js强大的>处理响应错误数据:
函数showError(错误){
varerror_data={
代码:错误.代码,
信息:错误.信息,
};
...
}
接收到错误数据后,返回<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">showError ()代码>函数提取<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">error.code代码>而且<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">error.info代码>值,以便在错误模板中显示它们。
在浏览器控制台中检查请求的结果。保存文件,重新加载聊天窗口,在“爱因斯坦”上运行搜索,并在浏览器控制台中查找结果。
请注意强大的>:如果什么都没有发生,并且您有一个主机映射域,则将聊天窗口的URL更改为默认的Zendesk域(亚博<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">https://yoursubdomain.亚博zendesk.com/..。代码>)并重新加载。
您应该获得一个名为<强大的>查询强大的>.对象应该包含一个名为<强大的>搜索强大的>它列出了3个文章及其属性:
<我mg src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/pt4_results_console-chat.png" width="400" class="screenshot">通过在其中一个请求参数中引入输入错误(例如,<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">行动:“查询”代码>).保存文件,重新加载聊天窗口,并运行搜索。应用程序应该显示关于错误的动态信息的错误模板。
<我mg src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/pt4_error_example-chat.png" width="250" class="screenshot">记住,在您确信错误处理按预期工作之后,要修复请求参数中的拼写错误。
你的<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">getArticles ()代码>函数应该如下所示:
函数getArticles(search_str,客户端){
var参数={
行动:“查询”,
列表:“搜索”,
srsearch:search_str,
srlimit:3.,
格式:“json”,
};
var设置={
url:“https://en.wikipedia.org/w/api.php”,
数据:参数,
头:{“Api-User-Agent”:“MyChatApp / 1.0 (<一个href="//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="365c52595376534e575b465a5318585342">(电子邮件保护)一个>)"},
数据类型:“json”,
};
客户端.请求(设置).然后(函数(响应){
如果(响应.错误){
showError(响应.错误);
}
控制台.日志(响应);
});
}
在聊天文本区张贴文章链接
Zend亚博esk Apps框架让你可以访问几个聊天动作。框架的<一个href="//www.ying8.net/api-reference/apps/apps-chat-api/chat_sidebar/">聊天的对象一个>有一个<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">chat.postToChatTextArea代码>在聊天的文本区域中发布预定义消息的操作。直到代理按下Enter键,消息才被发送。您将使用此操作在消息区域中发布文章链接。
第一项业务是将API返回的文章数据转换为聊天文本区域的消息。消息应该由3行组成,每行包含一篇文章的标题和URL。
API返回的数据有以下结构:
{
查询:{
搜索:[
{
ns:0,
大小:143771,
片段:“< span class = "searchmatch">Albert searchmatch“爱因斯坦> < / span >…”,
时间戳:“2017 - 07 - 17 t09:13:47z”,
标题:“爱因斯坦”,
wordcount:15112
},
...
]
}
}
数据包括标题,但不包括URL。但是,您可以通过将文章标题附加到Wikipedia基本URL来创建URL。例子:
varurl=“https://en.wikipedia.org/wiki/”+“爱因斯坦”;
请注意强大的>:维基百科url在标题中使用下划线作为空格。但是,您不必在标题字符串中用下划线替换空格。任何标题中带有空格的维基百科URL都会自动重定向到带有下划线的页面。示例:“https
提示强大的>:如果访问者使用其他语言,您可以将url中的“en”区域设置更改为所需的区域设置。例子:<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">“https://fr.wikipedia.org/wiki/”代码>.
在文本区张贴文章链接强大的>
在<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">getArticles ()代码>函数,替换<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">console.log(响应)代码>请求回调中的3条语句(突出显示):
...
客户端.请求(设置).然后(
函数(响应){
如果(响应.错误){
showError(响应.错误);
}
var文章=响应.查询.搜索;
var味精=buildMessage(文章);
客户端.调用(“chat.postToChatTextArea”,味精);
}
);
基于响应数据的已知结构,您可以使用以下表达式访问文章数组:<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">response.query.search代码>.将数组传递给一个名为<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">buildMessage ()代码>你接下来会写的。
最后,运行应用程序框架的<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">chat.postToChatTextArea代码>操作将返回的消息张贴在文本区域,准备发送给访问者。
添加<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">buildMessage ()代码>函数定义到<强大的>main.js强大的>文件:
函数buildMessage(文章){
var消息=”;
varurl=“https://en.wikipedia.org/wiki/”;
为(我=0;我<文章.长度;我++){
消息+ =“””+文章[我].标题+“-”+url+encodeURI(文章[我].标题)+' \ n ';
}
返回消息;
}
该函数遍历文章数组,为每篇文章创建一行,其中包含标题(<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">[我].title文章代码>)和网址(<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">(文章[i].title)代码>),以连字符分隔。
函数返回已完成的消息,然后在<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">chat.postToChatTextArea代码>行动:
var味精=buildMessage(文章);
客户端.调用(“chat.postToChatTextArea”,味精);
保存文件,重新加载聊天窗口,并运行搜索。
应用程序应该在文本区域发布结果:
<我mg src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/pt4_agent_chat_w_articles.png" width="650" class="screenshot">请注意强大的>:如果什么都没有发生,在聊天区域输入几个字,确保聊天已经开始。的<代码数据-garden-id="typography.code" data-garden-version="8.39.0" class="sc-eKYRIR sc-bTDOke bpSbjj iFHZBF">postToChatTextArea代码>该操作仅在聊天区域处于活动状态时生效。
当代理按下Enter键时,消息被发送给访问者。这些链接可以在访问者的聊天窗口中点击:
<我mg src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/pt4_visitor_chat_w_articles.png" width="550" class="screenshot">
代码完成!
恭喜你!你开发了第一个可用的聊天应用程序<强大的>main.js强大的>文件应该是这样的:
(函数(){
var客户端=ZAFClient.初始化();
客户端.调用(“调整”,{宽度:“100%”,高度:“180 px”});
showSearchForm();
文档.getElementById(“get-btn”).addEventListener(“点击”,函数(事件){
事件.preventDefault();
varsearch_str=文档.getElementById(“主题字段”).价值;
getArticles(search_str,客户端);
});
})();
函数getArticles(search_str,客户端){
var参数={
行动:“查询”,
列表:“搜索”,
srsearch:search_str,
srlimit:3.,
格式:“json”,
};
var设置={
url:“https://en.wikipedia.org/w/api.php”,
数据:参数,
头:{“Api-User-Agent”:“MyChatApp / 1.0 (<一个href="//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3359575c5673564b525e435f561d5d5647">(电子邮件保护)一个>)"},
数据类型:“json”,
};
客户端.请求(设置).然后(函数(响应){
如果(响应.错误){
showError(响应.错误);
}
var文章=响应.查询.搜索;
var味精=buildMessage(文章);
客户端.调用(“chat.postToChatTextArea”,味精);
});
}
函数buildMessage(文章){
var消息=”;
varurl=“https://en.wikipedia.org/wiki/”;
为(我=0;我<文章.长度;我++){
消息+ =“””+文章[我].标题+“-”+url+encodeURI(文章[我].标题)+' \ n ';
}
返回消息;
}
函数showSearchForm(){
var源=文档.getElementById(“搜索模版”).innerHTML;
var模板=车把.编译(源);
文档.getElementById(“内容”).innerHTML=模板();
}
函数showError(错误){
varerror_data={
代码:错误.代码,
信息:错误.信息,
};
var源=文档.getElementById(“错误模板”).innerHTML;
var模板=车把.编译(源);
var超文本标记语言=模板(error_data);
文档.getElementById(“内容”).innerHTML=超文本标记语言;
}
你的<强大的>我frame.html强大的>文件应该是这样的:
<!文档类型超文本标记语言>
<超文本标记语言>
<头>
<元字符集="utf - 8">
<链接rel="样式表"
href="https://cdn.jsdelivr.net/combine/npm/@亚博zendeskgarden/<一个href="//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1f0f0f511e19180e131f173c4b524c524e4d">(电子邮件保护)一个>,npm 亚博/ @zendeskgarden /<一个href="//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="accfdfdf81ced9d8d8c3c2dfec9b829c829d9f">(电子邮件保护)一个>,npm 亚博/ @zendeskgarden /<一个href="//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7849494ca92938e8b8e938e8294a7d3c9d4c9d7">(电子邮件保护)一个>">
<链接rel="样式表"href="main.css">
头>
<身体>
<h2>了解更多h2>
<divid="内容">div>
<页脚>
<一个href="https://mysite.github.io/support"目标="平等自愿">报告错误一个>
页脚>
<脚本id="搜索模版"类型="文本/ x-handlebars-template">
<表单的id=“检索表单”>
<p>
<标签为=“名称”>主题</标签><br>
<输入
类型=“文本”
名字=“主题字段”
id=“主题字段”
>
</p>
<p>
<按钮id=“get-btn”类=“c-btn”>得到文章的链接</按钮>
</p>
</形式>
脚本>
<脚本id="错误模板"类型="文本/ x-handlebars-template">
<div>
<p风格=“颜色:红色;><强大的>某物哪里出了错.</强大的></p>
<p><强大的>错误代码</强大的>:{{代码}}</p>
<p><强大的>信息</强大的>:{{信息}}</p>
<p>请报告一个错误在下面的链接或
<一个身份证=“reset-link”href="">重置</一个>
表单.</p>
</div>
脚本>
<脚本src="https://static.zdassets.com/亚博zendesk_app_framework_sdk/2.0/zaf_sdk.min.js">脚本>
<脚本src="https://cdn.jsdelivr.net/npm/<一个href="//www.ying8.net/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690108070d050c0b081b1a295d475a475a">(电子邮件保护)一个>/dist / handlebars.min.js">脚本>
<脚本src="main.js">脚本>
身体>
超文本标记语言>
如果你愿意,继续调整你的应用程序。
最后一步是在Zendesk Chat实例中验证、打包和安装应用程序。亚博继续<一个href="//www.ying8.net/documentation/apps/build-an-app/build-your-first-chat-app/part-5-installing-the-app-in-zendesk-chat/">第5部分-在Zendesk Chat中安装应用程序亚博一个>.