阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

小編精選 - 技術文章翻譯 · 06月17日

使用 Gemini API 和 ToolJet 在 10 分鐘內建立人工智慧商業提案編寫器 🚀

在本教學中，我們將引導您完成使用 ToolJet 和 Gemini API 建立 AI 商業提案編寫器的流程。我們將利用 ToolJet 的預先建置元件和簡單的整合流程來快速建立一個可以與 Gemini API 互動的應用程式。該應用程式將允許用戶輸入業務詳細資訊並產生專業的業務提案。

以下是最終應用程式的預覽：

圖片描述

先決條件

Gemini API 金鑰：Gemini API 是Google AI Studio提供的進階 AI 服務。它使開發人員能夠將強大的內容生成功能整合到他們的應用程式中。

ToolJet (https://github.com/ToolJet/ToolJet)：一個開源、低程式碼的商業應用程式建構器。[註冊](https://www.tooljet.com/signup)免費的 ToolJet 雲端帳號或使用 Docker在本機上執行 ToolJet 。

首先建立一個名為Business Proposal Writer 的應用程式。

建立一個新應用程式

打開 ToolJet 並點擊“建立新應用程式” 。
將您的應用程式命名為Business Proposal Writer 。

圖片描述

建立新應用程式後，您將看到一個空白畫布，右側有一個元件庫，底部有一個查詢面板。

設計使用者介面

將以下元件拖曳到畫布上：

容器：組織標題、輸入欄位和輸出部分。
文字和文字輸入：用於公司名稱、服務描述、預算、截止日期和公司專業知識。
按鈕：產生提案。
文字：以 HTML 格式顯示產生的提案。
圖示：用於徽標並使 UI 更具吸引力。

為了清楚起見，重新命名輸入欄位：

companyNameInput
serviceDescriptionInput
budgetInput
deadlineInput
companyExpertiseInput

將按鈕命名為createButton 。

命名將把產生的提案顯示為output的文字元件。

圖片描述

ToolJet 的預先建置元件在功能和樣式自訂方面提供了完全的靈活性。

透過查詢與Gemini API集成

建立一個工作區常數來保存您的 Gemini API 金鑰。將其命名為GEMINI_API_KEY 。
展開查詢面板，建立一個新查詢，並命名為generateProposal 。
將請求方法變更為POST並將以下 URL 貼到 URL 輸入下：

`https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI\_API\_KEY}}

導航到getContent查詢的正文部分。切換到原始 JSON 並輸入以下程式碼：

{
  "contents": [
    {
      "parts": [
        {
          "text": "
1. **Client/Company Name:** {{components.companyNameInput.value}}
2. **Project/Service Description:** {{components.serviceDescriptionInput.value}}
3. **Budget Range (if applicable):** {{components.budgetInput.value}}
4. **Deadline:** {{components.deadlineInput.value}}
5. **Company Expertise:** {{components.companyExpertiseInput.value}}

Based on these inputs, generate a well-structured and comprehensive business proposal document in HTML format. The generated proposal should include the following sections, each with ample padding and spacing:

1. **Executive Summary**
2. **Company Overview and Qualifications**
3. **Project Understanding and Approach**
4. **Proposed Solution and Methodology**
5. **Timeline and Deliverables**
6. **Team Structure and Bios**
7. **Cost Breakdown and Budget** (Include charts as needed)
8. **Terms and Conditions**
9. **Conclusion and Call to Action**

Ensure that the HTML output is properly formatted and visually appealing."
        }
      ]
    }
  ]
}

圖片描述