探索与第三方服务集成的要点，并通过使用Nodejs + Express来调用简单后端调用REST API所需的基础架构来将您的Web应用程序提升到一个新级别。
REST APIS AREN仅用于后端开发人员或完整的堆栈大师。实际上，将第三方API纳入您的前端应用程序是扩展应用程序功能并将几乎指数级外部服务的功能扩展到您的产品中的好方法。
但是，为了充分利用REST API，您需要了解有关如何有效调用它们的基础知识，以及您需要从您自己的应用程序中提出请求的基础架构。幸运的是，这并不是太复杂了，我们将其归为您的必需品！
让我们开始！
- 了解REST API在前端开发中的作用
- 设置后端 /服务器< / li>
- 掌握nodejs中的端到端示例
有时甚至有前端也可以从后端受益！
那么，利用REST API在前端开发中的价值到底是什么？我们为什么要打扰后端？好吧，REST API非常通用，并打开了大量用例。
REST API可以用作复杂软件中的连接，或者它们甚至可以独自一人作为自己的产品。有许多成功的公司采用了API-first方法，其开放API是其业务模型背后的主要价值驱动力。可以在我们所有人可能听说过的公司中看到一些成功的例子，例如eBay，Twilio，Stripe等。
。
eBay的前开发人员生态系统主管Tanya Vlahovic非常好：
“ ...我们允许...开发人员使用所有这些构建块，并唯一将它们组合起来，以形成] ...优质的体验。”
这只是另一个提醒，成为具有自信的REST API的工程师，可以为您打开许多门。
好吧，但是我们如何开始？好吧，首先，我们需要设置一个简单的后端和服务器。
使用Express Server创建Nodejs项目
尤其是在前端开发中，设置制作API请求（并设置服务器）所需的基础架构可能会有些恐吓。也许它甚至阻止您到目前为止利用这些功能。 ð
当然，需要后端和服务器（例如NextJs之类的框架中的无服务器功能）当然有例外，但我们现在会坚持基础知识。我们沸腾了要启动和运行nodejs脚本的必需品，以便在 中调用REST API 中的四个简单步骤：
- 设置nodejs项目
- 安装Express
- 创建一个
index.js文件并导入Express - 实例化并发送测试请求
让我们从步骤1开始。
1.设置一个Nodejs项目
我们将通过nodejs中的一个示例运行。如果您熟悉节点和NPM，则可以找到有关此here的更多详细信息。
要设置一个新的nodejs项目，我们需要首先创建一个新目录来容纳一个package.json文件。在此新目录中，我们可以在终端中运行以下命令：
npm init -y
这将为我们生成一个package.json文件，这实际上是我们的nodejs脚本的简单清单，默认情况下将在index.js中进行。 （如果愿意，可以使用另一个文件名，请确保更新您的软件包。JSON！）
2.安装Express
现在，我们已经创建了节点项目，我们将在项目目录中运行以下命令，该命令将生成node_modules文件夹和一个package-lock.json文件。应用：
npm install --save express
3.创建一个index.js文件并导入express
接下来，我们可以创建我们的主脚本index.js，并导入我们的Express Server实例。
首先，在同一主目录中创建一个index.js文件。在此文件的顶部，我们可以使用以下语句导入Express：
const express = require(“express”);
4.实例化服务器并发送请求
最后，我们现在可以实例化我们的Express服务器并将测试请求发送给我们的应用程序中的简单获取端点。
首先，我们使用此命令实例化表示：
const app = express();
接下来，我们创建一个get端点，我们从中向浏览器发送一个简单的响应：
app.get(‘/’, (req, res) => {
res.send(‘hello world’);
});
最后，我们需要为服务器指定一个端口，以收听让我们使用3000：
app.listen(3000, () => console.log(`Listening on port ${port}!`))
现在我们可以运行我们的脚本
node index.js
- 在我们的浏览器中导航到Localhost：3000。关于成功，我们的终端应显示我们的应用程序正在侦听的控制台日志。如果我们在Localhost：3000中浏览浏览器，我们应该看到我们端点中包含的“ Hello World”文本。
当然，这是一个简化的演练，讲述了如何在nodejs中设置服务器（使用Express），因此您可能需要添加或调整自己的几行，但这是必需的主要步骤。 /p>
但是，仅设置服务器本身并不有用，对吗？
因此，我们可以在我们的app.get（）函数中简单地向浏览器发送一些“ Hello World”文本，而是可以在此函数中向REST提出请求，并在我们的另一部分中使用响应应用程序。或者，我们可以将此请求的响应发送给我们的浏览器，类似于上面示例中的Hello World文本。
让我们继续进行示例脚本。
从nodejs脚本做出API请求
在Miro，我们有几个示例脚本来演示此流程。让我们仔细研究一下使用我们的node-oauth repo调用nodejs调用REST API的末端示例，您可以在此处克隆：
Miro node-oauth repository
首先，我们将遵循与以前设置index.js文件相似的步骤，我们还将使用另外两个包裹dotenv用于使用敏感变量，而axios进行HTTP请求：
// Require sensitive environment variables (Client ID, Client Secret, Miro Board ID)
require("dotenv/config");
// Require Axios for handling HTTP requests to Miro /oauth and Miro API endpoints
const axios = require("axios");
// Require ExpressJS for local server
const express = require("express");
const app = express();
// Call Express server
app.get("/", (req, res) => {...]
在我们的app.get（）端点中，我们将调用miro rest api，但首先让我们继续设置脚本的其余部分，确保我们的服务器在指定的端口上侦听。我们将其放在脚本的结尾处：
app.listen(3000, () => console.log(`Listening on localhost, port 3000`));
现在，返回到app.get()函数。在这里，我们会做两件事：
- 通过致电Miro’s OAuth2.0 endpoint检索Miro Rest API的
access_token - 致电Miro REST API endpoint使用我们的
access_token检索Miro板，然后将响应发送到浏览器
在line 36 of index.js中，我们调用了Oauth端点。
和在line 63 of index.js中，我们称Miro的获取董事会端点，使用access_token我们在第36行中检索。
最后，我们在line 68 of index.js中向我们的浏览器发送了回复。
与米罗大师休息
想更详细地浏览此脚本并查看浏览器中的输出吗？查看我们的按需教育培训系列，上面链接的前端的REST API必需品！
！继续与REST API一起进行，利用Miro Developer Platform’s sample apps！
您甚至可以create a developer team，并开始直接从我们的文档中迅速调用Miro的REST API。您可以找到完整的Getting Started flow here。
让我们知道您的建造！我们总是很乐意与其他开发人员交谈。 ð
您是否喜欢了解有关REST API的更多信息以及如何利用Miro Developer平台？有关更多灵感或问题，请与我们的Developer Community一起在YouTube，GitHub和Discord上关注。