介紹
本教學將引導您完成使用ToolJet （一種低程式碼視覺化應用程式建構器）和 Gemini API（一種強大的自然語言處理 API）來建立 AI 驅動的 SQL 查詢產生器的過程。由此產生的應用程式將使用戶能夠以簡單的英語輸入提示，然後將其轉換為可執行的 SQL 查詢。我們將使用 ToolJet 的視覺化應用程式建構器來建立使用者友善的 UI，並使用 ToolJet 的低程式碼查詢建構器將其連接到 Gemini API 端點。
先決條件：
ToolJet：一個開源、低程式碼的商業應用程式建構器。註冊免費的 ToolJet 雲端帳號或使用 Docker在本機上執行 ToolJet 。
Gemini API 金鑰：使用您現有的 Google 憑證登入Google AI Studio 。在 AI Studio 介面中，您將能夠找到並複製您的 API 金鑰。
以下是我們最終應用程式的快速預覽：
製作我們的使用者介面
登入您的ToolJet 帳號。導覽至 ToolJet 儀表板，然後按一下左上角的「建立新應用程式」按鈕。 ToolJet 隨附 45 多個內建元件。這將讓我們立即設定我們的用戶界面。
將右側元件庫中的Container元件拖曳到畫布上。適當調整Container元件的高度和寬度。
同樣，將圖示和兩個文字元件拖曳到容器內。我們將使用這兩個文字元件作為標題和署名文字。
選擇Icon元件，導覽至右側的屬性面板，然後選擇其Icon屬性下的資料庫圖示。
根據您的喜好變更圖示和文字元件的顏色。在這裡，我們將使用藍色陰影（十六進位程式碼：#4A7EE2）。
適當地變更文字元件的字體大小和內容。
將Dropdown元件拖曳到容器中。我們將使用此元件在Gemini API 提供的模型之間進行選擇。
將此元件重新命名為modelDropdown 。重新命名元件將有助於在開發過程中快速存取其資料。
同樣，將三個Textarea元件拖曳到容器中。我們將使用這些元件作為資料模式輸入、文字查詢輸入以及第三個元件來顯示產生的 SQL 查詢。
將三個Textarea元件分別重新命名為databaseSchemaInput 、 textPrompt和generatedQuery 。
適當調整Textarea元件的高度和寬度。
在「屬性」部分下，清除預設值輸入並輸入適當的佔位符文字。
拖放另一個文字元件。我們將使用它作為產生的查詢Textarea元件的標籤。適當變更顏色、字體大小和內容。
讓我們加入最後一個元件，拖放一個Button元件。我們將使用它來觸發 SQL 查詢產生。適當改變顏色、大小和內容。
建立查詢
ToolJet 允許使用其 REST API 查詢功能連接到第三方 API。我們將使用它來將我們的 UI 與 Gemini API 端點整合。我們將建立兩個單獨的 REST API 查詢：
第一個查詢將取得Gemini API 提供的所有 AI 模型的清單。
第二個查詢是將使用者輸入傳送到Gemini API 端點的 POST 請求。它將傳回基於這些輸入產生的 SQL 查詢。
我們也將利用 ToolJet 的工作空間常數來安全地儲存我們的Gemini API 金鑰。工作區常數在伺服器端解析。這確保了常數的實際值不會與網路有效負載一起發送；相反，伺服器解析這些值，從而確保它們免受客戶端暴露。
若要建立工作空間常數，請點選左上角的 ToolJet 標誌。從下拉清單中，選擇工作空間常數。
點選建立新常數按鈕。將名稱設為GEMINI_API_KEY並在值輸入中輸入您的Gemini API 金鑰。
點選新增常數按鈕。現在，該常數將在我們的工作區中可用，並且可以使用
{{constants.GEMINI_API_KEY}}進行存取。導航回您的應用程式並開啟查詢管理器。
點擊+ 新增按鈕並選擇REST API選項。
將查詢重新命名為getModels 。
將請求方法保留為GET並將以下 URL 貼到 URL 輸入中。這是 Gemini API 端點，它將傳回我們可用的模型。
https://generativelanguage.googleapis.com/v1beta/models?key={{constants.GEMINI_API_KEY}}
若要確保每次載入應用程式時都執行查詢，請啟用“在應用程式載入時執行此查詢？”切換。
同樣，建立另一個查詢並將其命名為getSqlQuery 。
在請求參數中，從下拉清單中選擇POST作為方法，然後貼上以下 URL。
https://generativelanguage.googleapis.com/v1beta/{{components.modelDropdown.value}}:generateContent?key={{constants.GEMINI_API_KEY}}
- 導航到getSqlQuery的 Body 部分。切換到原始 JSON並輸入以下程式碼：
{{
`{
"contents": [{
"parts": [{
"text": "Data Schema: ${components.databaseSchemaInput.value.replaceAll("\n"," ")}, Text Prompt: Write a standard SQL query that will ${components.textPrompt.value.replaceAll("\n"," ")}. Return with correct formatting but without any code highlighting and any backticks"
},],
},],
}`
}}
將 UI 與查詢集成
現在我們已經成功建立了 UI 和查詢，下一步就是整合它們。
選擇“屬性”部分下的“按鈕”元件，然後按一下“新事件處理程序”按鈕以建立新事件。
選擇On click作為事件，執行查詢作為操作，然後選擇getSqlQuery作為查詢。
選擇「屬性」部分下的下拉元件，然後為選項值和標籤輸入以下程式碼。
選項值：
{{queries.getModels.data.models.map(item => item.name)}}
選項標籤：
{{queries.getModels.data.models.map(item => item.displayName)}}
- 選擇Properties部分下的generatedQuery Textarea元件，然後為預設值輸入輸入以下程式碼。
預設值:
{{queries.getSqlQuery.data.candidates[0].content.parts[0].text}}
我們的人工智慧驅動的 SQL 查詢產生器已經完成。讓我們提供一些範例資料來測試一下。
資料庫結構定義:
Orders (id, product_id, address, customer_name, is_paid)
Products (id, quantity, moq)
Customers (id, name, email, phone, addresses)
文字提示/查詢：
find all the prepaid orders from a customer named Alex JR
預期輸出：
結論
恭喜您使用 ToolJet 和 Gemini API 成功建置了人工智慧驅動的 SQL 查詢產生器。現在您可以用簡單的英文輸入提示，然後將其準確地轉換為可執行的 SQL 語句。
要了解和探索有關 ToolJet 的更多訊息，請查看ToolJet 文件或聯絡我們並在Slack上發布您的問題。
原文出處：https://dev.to/tooljet/building-a-sql-query-generator-using-tooljet-gemini-api-4lo9
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式