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

构建服务器端应用程序-第3部分:访问外部api

在上一篇教程中，您构建了一个小型web应用程序，该应用程序在Zendesk Support的iframe中显示服务器端内容。亚博在本教程中，您将更新web应用程序以从外部API获取数据并将其显示在iframe中。

本教程包括以下任务:

本教程是构建服务器端Zendesk应用程序系列的第三部分:亚博

计划更新

在你开始制作应用之前，你应该清楚你的应用在更新后的外观和工作方式。假设你有一个<一个href=”https://asana.com/product">体式列出技术说明供支持团队编写的项目。

您希望在Zendesk支持代理界面中显示技术说明想法。亚博如果一个代理有时间写一份技术说明，代理可以点击其中一份来查看Asana的详细信息。

更新后的应用程序看起来像这样，没有任何格式化的细节:

建立Asana项目

web应用程序将从<一个href=”https://asana.com/product">体式，一个流行的任务管理应用程序。本节描述如何在本教程中设置Asana。

创建Asana项目并添加一些任务

首先，创建一个Asana项目，并添加一些模拟任务加载到应用程序中。

  1. 登录Asana。在您的Asana主页上，通过单击按钮旁边的加号(+)图标创建一个项目我的工作区标签在左侧，并创建一个空白项目。

  2. 将项目命名为“Tech notes”。将项目的隐私标记为公开到我的工作空间并将默认视图设置为列表。然后单击继续。

  3. 在提示符下，选择开始添加任务并点击进入项目。

  4. 在“Tech Notes”项目页面上，单击添加任务并在项目中添加一些任务。例如:“澄清序列号位置”。

获取个人访问令牌

你需要一个来自Asana的个人访问令牌来从你的web应用程序进行API调用。

  1. 登录到Asana，然后进入<一个href=”https://app.asana.com/-/developer_console">Asana开发者控制台。

  2. 下个人访问令牌,点击创建新令牌。

  3. 将令牌命名为“ZAF教程”，同意条款，然后单击创建令牌。

    安全地保存生成的令牌。您将在本教程后面使用它，它不会再次显示。

    如果您丢失了令牌，请返回此页重置它。

在应用程序中显示起始页

当应用程序在Zendesk支持中启动时，web应用程序应该显示一个开始页面。亚博

  1. 在app_remote文件夹，创建一个名为的观点。

  2. 在的观点文件夹，创建一个名为start.tpl。

  3. 打开start.tpl模板，并添加以下HTML:

                   
    
                
    <头><链接href=”https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css”rel=”样式表”/>头><身体><一个类=”BTN -default BTN -block”href=”列表”角色=”按钮”>列出技术笔记的想法一个>身体>

  4. 在app.py的return语句send_iframe_html ()函数与返回模板(“开始”)。

                   
    
                
    @route（“/栏”）defsend_iframe_html（）：返回模板（“开始”）

  5. 因为你介绍了酒瓶模板()方法,添加模板的第一行导入的方法列表app.py：

                   
    
                
    从瓶进口路线，运行，模板。。。

  6. 在运行Bottle开发服务器的终端会话中，通过使用Ctrl + C，然后用python3 app.py。每次修改Python代码时都必须重新启动服务器。

    请注意:你不需要重新启动它时，做化妆品的改变，如CSS或模板编辑。

  7. 在浏览器中，重新加载Agent Workspace页面。应用程序应该显示开始页面。

    引导btn-block类将链接按钮拉伸到应用程序iframe的宽度。代理界面侧栏按钮调整:

    在下一节中，您将为该链接构建一条路由。

    提示按钮链接让你可以灵活地在应用中添加更多功能。例如，如果您希望支持创建任务，则可以添加添加技术注释的想法按钮转到起始页，然后为它构建一条路由:

显示列表页面

当座席点击列出技术笔记的想法链接的起始页上，web应用程序应该显示来自Asana项目的任务列表。

  1. 在的观点文件夹，创建一个名为list_tasks.tpl。

  2. 打开list_tasks.tpl模板，并添加以下HTML:

                   
    
                
    <头><链接href=”https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css”rel=”样式表”/>头><身体>任务列表在这里身体>

  3. 在app.py，在“/start”路由后面添加如下路由:

                   
    
                
    。。。@route（' /列表'）defshow_tasks（）：#验证请求#提出请求#处理响应返回模板（“list_tasks”）。。。

  4. 保存list_tasks.tpl和app.py。

  5. 重新启动Bottle开发服务器。

  6. 在浏览器中，重新加载Agent Workspace页面。在Zendes亚博k应用程序中，单击列出技术笔记的想法。应用程序应该显示以下内容:

列出任务

根据Asana API文档<一个href=”https://developers.asana.com/docs/get-tasks-from-a-project">从项目中获取任务端点返回“给定项目中所有任务的紧凑任务记录，按其在项目中的优先级排序”:

             

              
得到/项目/{project_gid}/任务

的{project_gid}参数是包含任务的项目的全局id (gid)。例子:13579。

文档提供了一个curl示例:

             

              
curl -X GET https://app.asana.com/api/1.0/projects/{project_gid}/tasks \-H 'Accept: application/json' \-H 'Authorization: Bearer {access-token}'

这是发出API请求所需的所有信息。

  1. 登录到Asana，然后转到<一个href=”https://app.asana.com/api/1.0/projects/”>https://app.asana.com/api/1.0/projects/。

    一个包含项目及其id的JSON对象应该出现在浏览器窗口中。复制Tech notes项目的gid。您将在本教程后面使用gid。

  2. 在app_remote文件夹，创建一个.env文件。将以下内容粘贴到文件中:

                   
    
                
    ASANA_ACCESS_TOKEN = " {ASANA_ACCESS_TOKEN} "ASANA_PROJECT_ID = " {asana_project_gid} "

    取代{asana_access_token}创建的个人访问令牌<一个href=”#getting-a-personal-access-token">获取个人访问令牌。取代{asana_project_gid}使用在步骤1中复制的gid。

    的.env文件包含项目的环境变量。当你把你的web应用上传到Glitch时，存储在.env不会公开露面。

  3. 在空终端会话中运行:

                   
    
                
    安装python-dotenv

    该命令安装<一个href=”https://pypi.org/project/python-dotenv/">Python-dotenv包中。这个包装可以让你阅读.env变量使用标准Python函数，例如os.environ.get ()。

  4. 在app.py，将以下突出显示的语句添加到文件的顶部:

                   
    
                
    进口操作系统从dotenv进口load_dotenv进口请求从瓶进口路线，运行，模板load_dotenv（）。。。

    语句导入相关的包并加载.env文件。

  5. 在show_tasks ()的函数app.py，替换以下注释:

                   
    
                
    #验证请求

    代码如下:

                   
    
                
    access_token=操作系统。环境。得到（“ASANA_ACCESS_TOKEN”）头={“授权”：“不记名{}”。格式（access_token）}

    这将为请求创建一个Authorization头。的format ()字符串函数在字符串的花括号处插入记号值。结果如下所示:

                   
    
                
    头={“授权”：“不记名0/861ed62fdd7ad63143c8bb90a90bg6fa”}

  6. 通过替换以下注释提出请求:

                   
    
                
    #提出请求

    代码如下:

                   
    
                
    proj_id=操作系统。环境。得到（“ASANA_PROJECT_ID”）url=“https://app.asana.com/api/1.0/projects/{} /任务”。格式（proj_id）r=请求。得到（url，头=头）

    web应用程序使用requests.get ()方法从请求库中获取。将端点URL和授权头作为方法参数传递。

  7. 通过替换以下两行来处理响应:

                   
    
                
    #处理响应返回模板（“list_tasks”）

    用下面的代码块:

                   
    
                
    如果r。status_code= =200：任务=r。json（）返回模板（“list_tasks”，列表=任务［“数据”]，proj_id=proj_id）其他的：味精=“请求有问题:{}{}”。格式（r。status_code，r。原因）返回味精

    当您在步骤6中发出请求时，您将响应分配给一个名为r。如果请求成功(如果R.status_code == 200)， web应用将任务列表传递给模板。如果响应不成功，应用程序将显示从响应派生的纯文本错误消息。

    块使用请求库的json ()方法将JSON响应转换为Python字典，并将其分配给任务变量:

                   
    
                
    任务=r。json（）。。。

    通过检查任务变量，你可以知道它包含一个如下所示的值:

                   
    
                
    {“数据”：［{“名字”：“描述打印机关闭的解决方法”，“id”：145581874072676}，{“名字”：“显示序列号位置”，“id”：145581874072678}]}

    你只对任务列表感兴趣。你用任务(“数据”)然后把它传给list_tasks.tpl模板:

                   
    
                
    。。。返回模板（“list_tasks”，列表=任务［“数据”]）

    完成的路线应该如下所示:

                   
    
                
    。。。@route（' /列表'）defshow_tasks（）：access_token=操作系统。环境。得到（“ASANA_ACCESS_TOKEN”）头={“授权”：“不记名{}”。格式（access_token）}proj_id=操作系统。环境。得到（“ASANA_PROJECT_ID”）url=“https://app.asana.com/api/1.0/projects/{} /任务”。格式（proj_id）r=请求。得到（url，头=头）如果r。status_code= =200：任务=r。json（）返回模板（“list_tasks”，列表=任务［“数据”]，proj_id=proj_id）其他的：味精=“请求有问题:{}{}”。格式（r。status_code，r。原因）返回味精。。。

  8. 切换到list_tasks.tpl模板并替换以下文本:

                   
    
                
    任务列表在这里

    使用以下无序列表:

                   
    
                
    <ul>列表中任务的%:<李><一个href=”https://app.asana.com/0/ {{proj_id}} /{{任务(＇gid＇]}}”目标=”平等自愿”>{{任务['名字']}}一个>李>%结束ul>

    模板代码设置一个循环来打印传递给模板的任务列表参数。要了解更多关于模板语言的信息，请参见<一个href=”http://bottlepy.org/docs/dev/stpl.html">SimpleTemplate引擎在Bottle文档中。

要在Zendesk Support中测试更新后的web应用程序亚博:

  1. 重新启动Bottle开发服务器。

  2. 在浏览器中，重新加载Agent Workspace页面。在Zendes亚博k应用程序中，单击列出技术笔记的想法。应用程序应该显示以下内容:

    点击链接应该会将您带到Asana中的任务。

在本教程中，您更新了web应用程序以从Asana API获取任务，然后在Zendesk应用程序中显示它们。在下一个教程中，您将学习如何访问Zendesk框架API。亚博看到<一个href=”https://developer.zendesk.com/documentation/apps/build-an-app/building-a-server-side-app/part-4-access-framework-apis/">第4部分-访问框架api。