Logo

菜单

发布于 2026-01-06 1 阅读
0

Building an Intelligent Reimbursement Tracking App using OCR with Gemini API + ToolJet 🚀 DEV's Worldwide Show and Tell Challenge Presented by Mux: Pitch Your Projects!

使用 Gemini API 和 ToolJet 的 OCR 技术构建智能报销跟踪应用🚀

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

介绍

本教程将指导您使用ToolJet和 Gemini API 构建一个智能报销跟踪应用程序，该应用程序集成了 OCR 功能。用户可以上传收据图片，使用 OCR 从图片中提取文本，并将提取的信息存储在数据库中。我们还将添加 AWS S3 集成来存储收据图片。

先决条件：

以下是我们最终申请文件的简要预览：

构建我们的用户界面

  • 登录您的ToolJet 帐户。导航至 ToolJet 控制面板，然后点击左上角的“创建新应用”按钮。ToolJet 内置 45 多个组件，这将帮助我们快速搭建用户界面。
  • 从右侧组件库中将容器组件拖放到画布上。根据需要调整容器组件的高度和宽度。
  • 同样地，将图标和两个文本组件拖放到容器内。我们将使用这两个文本组件分别作为标题和说明文字。
  • 选择图标组件，导航到右侧的属性面板，然后在图标属性下选择ZoomMoney图标。
  • 适当地更改文本组件的字体大小和内容。
  • 将文件选择器和按钮组件拖放到容器内。我们将使用文件选择器组件允许用户上传收据图片。按钮组件将用于触发OCR过程。
  • 将文件选择器组件重命名为fileUploader。
  • 根据个人喜好调整文件选择器组件的宽度。
  • 根据个人喜好更改按钮组件的颜色和文本。

我们已经实现了上传收据的用户界面。下一步是创建管理员审批或拒绝费用提交的用户界面。

  • 点击屏幕左侧的“页面”图标。在“页面”面板的标题栏中，点击“+”按钮创建新页面。
  • 将容器组件拖放到画布上。适当调整容器组件的高度和宽度。
  • 将图标组件和文本组件拖放到容器内。我们将使用这两个组件分别作为徽标和标题文本。
  • 将表格组件拖放到容器内。我们将使用表格组件来显示费用提交列表。稍后，我们还会添加操作按钮，用于批准、拒绝以及查看每项提交的收据图片。
  • 将模态框组件拖放到容器内。打开模态框组件，然后将HTML组件拖放到模态框内。我们将使用HTML组件来显示收据图片。

创建查询

ToolJet允许使用其 REST API 查询功能连接到第三方 API。我们将使用此功能连接到Gemini API，以从上传的收据图像中提取文本。ToolJet 内置了与AWS S3的集成，我们将使用 AWS S3 来存储收据图像。

  • 使用 ToolJet 的工作区常量功能，创建一个名为 GEMINI_API_KEY的新常量，并填入您的 Gemini API 密钥。
  • 在查询面板中，单击 “+ 添加” 按钮，然后选择 REST API选项。
  • 将查询重命名为 extractTextFromImage。在请求参数中，  从下拉菜单中选择POST作为方法，并粘贴以下 URL。
https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}
Enter fullscreen mode Exit fullscreen mode
  • 导航至 extractTextFromImage 函数的 Body 部分。启用 Raw JSON 并输入以下代码：
{
  "contents": [
    {
      "parts": [
        {
          "text": "In this image of a receipt, analyze the receipt image and return the following information in JSON format without any formatting or syntax highlighting: total_amount, date."
        },
        {
          "inline_data": {
            "mime_type":"image/jpeg",
              "data": "{{components.fileUploader.file[0].base64Data}}"
          }
        }
      ]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

  • 接下来，我们将创建一个查询，将提取的文本保存到 ToolJet 数据库中。

  • 点击左上角的ToolJet标志，然后选择数据库选项。

  • 点击“创建新表”按钮，并将表命名为 reimbursement_requests。向表中添加以下列：  id、name、email、total_amount、status和receipt_date。

  • 返回查询面板，点击 “+ 添加” 按钮。选择 ToolJet 数据库 选项。

  • 将查询重命名为addReceiptData。

  •  从下拉列表中选择 reimbursement_requests表名。

  • 在“操作”下拉菜单中，选择 “创建行”，并为各列输入以下数据。

列名 钥匙
电子邮件 {{globals.currentUser.email}}
姓名 {{globals.currentUser.name}}
总金额 {{JSON.parse(queries.extractTextFromImage.data.candidates[0].content.parts[0].text).total_amount}}
收据日期 {{JSON.parse(queries.extractTextFromImage.data.candidates[0].content.parts[0].text).date}}

  • 接下来，我们将创建一个查询，将收据图像存储在 AWS S3 存储桶中。

  • 使用 ToolJet 内置的 AWS S3 集成创建新的数据源以连接到 AWS S3 。

  • 点击  查询面板中的“+ 添加”按钮，然后选择新创建的 AWS S3 数据源。

  • 将查询重命名为 addToS3，并将操作选择为 上传对象。

  • 为各列添加以下数据：

列名 钥匙
桶 存储桶名称（应该已经存在）
钥匙 {{"reimbursement_id" + "_" + queries.addReceiptData.data[0].id}}
内容类型 {{components.fileUploader.file[0].type}}
上传数据 {{JSON.parse(queries.extractTextFromImage.data.candidates[0].content.parts[0].text).date}}
编码 base64

接下来，我们将创建查询，从 ToolJet 数据库中获取费用提交列表。

  • 单击查询面板中的“+ 添加”按钮，选择 ToolJet 数据库选项，并将查询重命名为getReimbursementRequests。

  • 从下拉菜单中选择reimbursement_requests表。

  • 在“操作”下拉菜单中，选择“列出行”。

  • 为确保每次应用程序加载时都运行查询，请启用“ 在应用程序加载时运行此查询？”开关。

  • 接下来，创建另外两个 ToolJet 数据库查询来批准和拒绝费用提交，分别命名为 approveRequest和 rejectRequest。

  • 对于这两个查询，选择 reimbursement_requests 表，选择 更新行操作，并使用筛选字段来匹配要更新的行的 id（使用 {{components.reimbursementRequestsTable.selectedRow.id}} 变量）。

  • 在列字段中，将 approveRequest查询的 Status 列更新为 approved，将rejectRequest查询的 Status 列更新 为 rejected   。

让我们添加最后一个查询，从 AWS S3 存储桶中获取收据图像。

  • 点击 查询面板中的“+ 添加” 按钮，选择 AWS S3 数据源，并将查询重命名为 getReceiptImage，然后输入以下数据。
列名 钥匙
手术 已签名的下载链接
桶 存储桶名称
钥匙 {{"reimbursement_id" + "_" + components.table1.selectedRow.id}}
到期日 3600

将查询绑定到 UI 组件

现在我们已经成功构建了用户界面和查询，下一步就是将它们集成起来。

  • 选择按钮组件，然后导航到右侧的属性面板。单击“+ 新建事件处理程序”按钮。将操作更改为 “运行查询”，然后选择 extractTextFromImage 查询。

  • 接下来，导航至 extractTextFromImage 查询，然后单击“+ 新建事件处理程序”按钮。将操作更改为 “运行查询”，然后选择 addReceiptData 查询。

  • 导航至 addReceiptData 查询，然后单击“+ 新建事件处理程序”按钮。将操作更改为 “运行查询”，然后选择 addToS3 查询。

  • 我们的收据上传功能现已完成。您可以上传收据图片进行测试，并在 ToolJet 数据库中验证提取的数据。

接下来，我们将实现管理员审批功能。

  • 导航至管理页面并选择表格组件。在右侧的属性面板中， {{queries.getReimbursementRequests.data}} 在数据字段中输入内容。

  • 在属性面板中 点击“+ 新建操作”按钮，创建三个新的操作按钮：批准、 拒绝和 查看收据。 使用事件处理程序将approveRequest和 rejectRequest绑定到相应的操作按钮。

  • 根据个人喜好更改操作按钮的背景颜色和文字。

  • 点击 “查看收据” 操作按钮，添加一个新的事件处理程序。将操作更改为“打开模态框”，并选择 displayReceiptImage 模态框。

  • 导航至 displayReceiptImage 模态框，然后在右侧的属性面板中，取消选中“使用默认触发按钮”切换开关。

  • 在模态框内，点击HTML组件，然后<img src={{queries.getReceiptFromS3.data.url}}>在“原始 HTML”字段中输入内容。

  • 我们的管理员审批功能现已完成。您可以上传收据图片并在表格组件中验证提取的数据，以此进行测试。您可以点击“批准”或“拒绝”按钮来批准或拒绝费用提交。您还可以点击“查看收据”按钮查看收据图片。

结论

恭喜！您已成功使用 ToolJet 和 Gemini API 构建了一个功能强大的报销跟踪应用，并具备 OCR 功能。现在，您可以轻松地跟踪和管理费用提交。您可以根据需要添加更多功能，进一步自定义应用。
要了解更多关于 ToolJet 的信息，请查看 ToolJet 文档，或在Slack 上联系我们并提出您的问题 。

文章来源：https://dev.to/tooljet/building-an-intelligent-reimbursement-tracking-app-using-ocr-with-tooljet-gemini-api-9kb
如何使用 useReducer 和...
使用 HTML 和 CSS 构建的...