介紹
本教學將引導您完成使用ToolJet （一種低程式碼視覺化應用程式產生器）和 Gemini API（一種強大的自然語言處理 API）建立 AI 驅動的 SQL 自訂報告產生器的過程。由此產生的應用程式將使用戶能夠以簡單的英語輸入請求，然後將其翻譯成自訂報告。我們將使用 ToolJet 的視覺化應用程式建構器來建立使用者友善的 UI，並使用 ToolJet 的低程式碼查詢建構器將其連接到 Gemini API 端點和我們的資料來源。最終產品將使用戶能夠預覽生成的報告並以 PDF、Excel 或 CSV 格式下載。
先決條件：
ToolJet (https://github.com/ToolJet/ToolJet)：一個開源、低程式碼的商業應用程式建構器。註冊免費的 ToolJet 雲端帳號或使用 Docker在本機上執行 ToolJet 。
Gemini API 金鑰：使用您現有的 Google 憑證登入Google AI Studio 。在 AI Studio 介面中，您可以找到並複製您的 API 金鑰。
以下是我們最終應用程式的快速預覽：
登入您的ToolJet 帳號。導覽至 ToolJet 儀表板，然後按一下左上角的「建立新應用程式」按鈕。 ToolJet 隨附 45 多個內建元件。這將讓我們立即設定我們的用戶界面。
建立我們的使用者介面
將右側元件庫中的Container元件拖曳到畫布上。適當調整Container元件的高度和寬度。
同樣，將圖示和三個文字元件拖曳到容器內。我們將使用這些文字元件作為標題和標籤文字。
對於「圖示」元件，導航到右側的屬性面板，然後在「圖示」屬性下選擇適當的圖示。
根據您的喜好變更圖示和文字元件的顏色。
適當地變更文字元件的字體大小和內容。
將Textarea元件拖曳到容器內。我們將使用此元件作為文字查詢的輸入。
將Textarea元件重新命名為textPrompt 。
接下來，將表格元件拖曳到容器上。我們將使用此元件來顯示報告的預覽。表元件內建了下載顯示資料的功能。這將使我們能夠下載產生的 PDF、Excel 或 CSV 格式的報告。
現在讓我們新增一個啟動報告產生過程的Button元件。適當改變顏色、大小和內容。
設定查詢
除了內建的資料庫和資料來源之外，ToolJet 還允許您連接到各種外部資料來源，包括資料庫、外部 API 和服務。在本教程中，我們將使用 ToolJet 的內建 PostgreSQL 範例資料來源。我們將設定的查詢也適用於外部 PostgreSQL 資料來源。
我們也將使用 REST API 查詢功能來連接Gemini API 端點。
在查詢面板中，按一下 + 新增按鈕並選擇範例資料來源選項。
將查詢重新命名為 getDatabaseSchema。
在下拉清單中，選擇 SQL 模式並輸入以下程式碼。這將獲取資料庫中的所有表名及其列名。
SELECT table_name, string_agg(column_name, ', ') AS columns
FROM information_schema.columns
WHERE table_schema = 'public'
GROUP BY table_name
- 若要確保每次載入應用程式時都執行查詢，請啟用“在應用程式載入時執行此查詢？”切換。
現在，讓我們建立另一個查詢，該查詢將連接到 Gemini AI API 並產生自訂 SQL 報表查詢。
使用 ToolJet 的工作空間常數功能，使用您的 Gemini API 金鑰建立一個名為GEMINI_API_KEY 的新常數。
在查詢面板中，按一下+ 新增按鈕並選擇REST API選項。
將查詢重新命名為getSqlQuery 。
在請求參數中，從下拉清單中選擇 POST 作為方法，然後貼上以下 URL。
https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}
- 導航到getSqlQuery的 Body 部分。切換到原始 JSON 並輸入以下程式碼：
{{
`{
"contents": [{
"parts": [{
"text": "Data Schema: ${JSON.stringify(queries.getTablesWithColumns.data.map(item => ({ ...item, table_name: "public." + item.table_name }))).replace(/"([^"]+)":/g, '$1:').replace(/"/g, '\\"')}, Text Prompt: Write a standard SQL query for a custom SQL report that will ${components.textPrompt.value.replaceAll("\n"," ")}. Return without formatting and without any code highlighting and any backticks"
},],
},],
}`
}}
讓我們新增最終查詢，該查詢將從自訂報表所需的範例資料來源中檢索資料。
- 同樣，建立另一個Sample 資料來源查詢，將其重新命名為getReportData並輸入以下程式碼：
{{queries.getSqlQuery.data.candidates[0].content.parts[0].text}}
將查詢綁定到 UI 元件
現在我們已經成功建立了 UI 和查詢，下一步就是整合它們。
選擇Button元件並導航到右側的屬性面板。點選“+ 新事件處理程序”按鈕。將操作變更為執行查詢並選擇getSqlQuery查詢。
接下來，導覽至getSqlQuery查詢並點擊+ New event handler按鈕。將操作變更為執行查詢並選擇getReportData查詢。
接下來，選擇表格元件。在右側的屬性面板中，在資料欄位中輸入以下程式碼。
{{queries.getReportData.data}}
我們已經成功地將查詢整合到我們的 UI 中。現在讓我們使用以下提示來測試應用程式：
列出客戶姓名以及他們訂購的產品，包括訂購日期和每種產品的訂購總數。
您可以點選表格頁腳上的+按鈕下載 PDF、Excel 或 CSV 格式的報表。
結論
恭喜您使用 ToolJet 和 Gemini API 成功建置了人工智慧驅動的 SQL 報表產生器。現在您可以用簡單的英文輸入提示並跨 PostgreSQL 實例中的多個表產生報表。
要了解和探索有關 ToolJet 的更多訊息，請查看ToolJet 文件或聯絡我們並在Slack上發布您的問題。
原文出處：https://dev.to/tooljet/building-a-sql-report-generator-using-gemini-ai-tooljet-424p
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式