📜  使用 Typeform 和 Probot 构建表单的 GitHub 应用程序(1)

📅  最后修改于: 2023-12-03 15:06:51.615000             🧑  作者: Mango

使用 Typeform 和 Probot 构建表单的 GitHub 应用程序

GitHub 应用程序是一种令人兴奋的方式来扩展和定制 GitHub 工作流程,特别是在开发流程中。在这个教程中,我们将讨论如何使用 Typeform 和 Probot 构建一个表单的 GitHub 应用程序。

什么是 Typeform?

Typeform 是一种在线表单构建器,它允许您轻松创建各种类型的表单,包括反馈表单、调查表单、订阅表单等。Typeform 提供了丰富的模板和可定制的主题,以确保您的表单看起来与您的品牌一致,并满足您的需求。

什么是 Probot?

Probot 是一种 GitHub 应用程序框架,它让开发者可以轻松地为 GitHub 上的项目构建自己的应用程序和机器人。Probot 使用 Node.js 和 GitHub API 来与 GitHub 进行交互,并提供了很多工具和库来帮助您构建和部署自己的 GitHub 应用程序。

构建一个 Typeform 和 Probot 的 GitHub 应用程序

接下来,我们将讨论如何构建一个表单的 GitHub 应用程序,该应用程序可自动将用户填写的表单数据导入到 GitHub Issue 中。

首先,您需要在 Typeform 上创建一个表单,确保您选中了“开放式回答”选项。这意味着您的用户可以自由填写他们认为合适的答案。如果您需要更多的控制,可以选择其他选项,例如多选框、单选框、文本框等。

接下来,您需要创建一个 Probot 应用程序。您可以使用 Probot 的脚手架工具快速创建一个 Probot 应用程序。要创建一个新的 Probot 应用程序,请打开终端并运行以下命令:

npx probot init

接下来,您需要在 app.js 文件中添加用于处理 Typeform 回答的代码。首先,您需要在 app.js 文件的开头添加 Typeform API 的引用:

const axios = require('axios');

接下来,您需要定义一个处理 Typeform 回答的路由。在路由函数中,您需要使用 Axios 库来向 Typeform API 发送 POST 请求,以获取用户填写的表单数据。接下来,您需要将这些数据导入到 GitHub Issue 中。这可以通过使用 GitHub API 和 Node.js 的 octokit/rest.js 库来实现。

这是 app.js 文件中处理 Typeform 回答的代码:

app.post('/typeform', async (req, res) => {
  try {
    const { token, formId, issueTitle, repoName } = req.body;
    const response = await axios.get(`https://api.typeform.com/forms/${formId}/responses?token=${token}&completed=true`);
    const responseData = response.data.items.map(item => item.answers.reduce((acc, curr) => {
      const { type, text, email, choice } = curr;
      if (type === 'choice') {
        acc.push(choice.label);
      } else if (type === 'email') {
        acc.push(email);
      } else {
        acc.push(text);
      }
      return acc;
    }, []));
    const octokit = new Octokit({ auth: 'YOUR-GITHUB-TOKEN' });
    const { data: { number } } = await octokit.issues.create({
      repo: repoName,
      owner: 'YOUR-GITHUB-USERNAME',
      title: issueTitle,
      body: JSON.stringify(responseData),
    });
    res.status(200).send({ message: `GitHub issue ${number} has been created.` });
  } catch (error) {
    console.error(error);
    res.status(500).send({ message: 'Something went wrong.' });
  }
});

接下来,您需要为 Probot 应用程序创建一个 GitHub 应用程序,并将其安装到您的 GitHub 存储库中。要创建 GitHub 应用程序,请访问 GitHub Developer 并按照说明进行操作。一旦您创建了应用程序,您就需要将它安装到您的 GitHub 存储库中。要安装应用程序,请访问存储库的 Settings 选项卡,然后单击 Install App

现在,您可以在您的 Typeform 表单中添加一个 webhook,以便当用户提交表单时,Typeform 可以向您的 Probot 应用程序发送一个 POST 请求。在 Typeform 中打开您的表单,然后单击 Settings 选项卡。滚动到底部,然后单击 Webhooks,然后单击 ADD WEBHOOK。在 Webhook URL 字段中输入您的 Probot 应用程序的 URL 地址,例如 https://my-probot-app.herokuapp.com/typeform。确保您使用的是您的 Probot 应用程序的实际 URL 地址。

到此,您已经成功地创建了一个基于 Typeform 和 Probot 的 GitHub 应用程序,该应用程序可自动将用户填写的表单数据导入到 GitHub Issue 中。

结论

GitHub 应用程序是扩展和定制 GitHub 工作流程的强大工具,可以让您更好地管理开发流程。使用 Typeform 和 Probot 构建一个表单的 GitHub 应用程序是一种令人兴奋的方式,用于自动化从用户那里收集数据并导入到您的 GitHub 存储库中。我希望这篇教程能够帮助您了解如何构建此类应用程序,并帮助您在您的 GitHub 工作流程中更好地管理数据。