CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章  👉 上自學課程  👉 討論區交流
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式

🔍 搜尋結果：LLM

🔍 搜尋結果：LLM

比披薩更吸引開發者的 12 個開源工具👋🍕

現在是開源工具時間！ 除了大家都知道的前 3 個之外，開源工具還有更多內容。 哎呀，你實際上可能已經知道這個清單中的所有 12 個（在這種情況下：「慢拍」），但我們大多數人都不知道。 ![開發者開源慢拍手](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87r8u8xpfavjuc4xp96v.gif) 當談到幫助開發人員完成工作的工具時，開源是一個令人信服的論點！ 這就是為什麼我們也推出了自己的[開源工具來提高開發人員的生產力。](https://github.com/middlewarehq/middleware) 因此，這裡列出了 12 個開源工具，它們可能成為您的工具包中不可或缺的一部分。 我們走吧！ > 注意：我們發現專案中存在一些不一致之處，根據社區的建議重新表述並加入了新專案。 1.Theia ----- 當您正在尋找 VSCode 的[真正開源替代品](https://eclipse-foundation.blog/2020/05/05/eclipse-theia-and-vs-code-differences-explained/)時，請考慮 Theia。 它是一個靈活的 IDE，可在雲端和桌面上執行。它是用 TypeScript 建構的，並附帶許多可供您使用的附加元件。 - **主要特徵**： - 雲端和桌面 IDE 功能 - 可擴展的插件系統：接受 VSCode 插件/擴展 - 多語言支援 - [忒亞網站](https://theia-ide.org/) - [忒亞 Github](https://github.com/eclipse-theia/theia) 2.Postman ---- 我們很多人都知道 Postman。 不不，不是給你的亞馬遜包裹送貨的人。 ![郵差開源](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2pslqrzp72ztaf3myck.gif) 此 Postman 讓您可以將請求連結在一起、自動執行任務以及與其他人協作，從而更輕鬆地使用 API。 因此，如果您不喜歡 cURL，Postman 可以拯救您。 - **主要特徵**： - API測試和自動化 - 複雜工作流程的請求鏈 - 團隊協作工具 - [郵差網站](https://www.postman.com/) - [郵差Github](https://github.com/postmanlabs/postman-app-support) 3. Hoppscotch ------ Hoppscotch 是一個免費、輕量級、快速且漂亮的 API 請求建立器工具，可以相對快速地建立和測試您的 API。 - **主要特徵**： - HTTP 請求方法（GET、POST、PUT、DELETE、PATCH 等） - 對 GraphQL 的內建支持 - 集合管理與環境變數 - **網站**：[跳房子](https://hoppscotch.io/) - **GitHub** :[跳房子 GitHub](https://github.com/hoppscotch/hoppscotch) 4. Pocketbase ------- Pocketbase 是一個檔案中的開源即時後端，可在 Flutter、Vue、React 和 Angular 應用程式中使用。 想像一下用 Go 編寫的為開發人員提供的簡單的 SQL 資料庫。 - **主要特徵**： - 具有即時訂閱功能的嵌入式資料庫 (SQLite) - 內建文件和使用者管理 - 以及簡單的 REST-ish API - [Pocketbase網站](https://pocketbase.io/) - [Pocketbase Github](https://github.com/pocketbase/pocketbase) 5. cURL ----- 我想沒有一個開發人員不知道 cURL。 cURL 是一個簡單的命令列工具，用於呼叫 API。事實上，大多數作業系統發行版（例如 Linux 和 MacOS）中都預設包含 cURL。 - **主要特徵**： - 支援多種協定（HTTP、FTP等） - 可編寫腳本的命令列工具 - [捲曲網站](https://curl.se/) - [捲曲Github](https://github.com/curl/curl) 6. Waveterm ----- Waveterm 是一款開源 AI 原生終端機。 Waveterm 將命令列與開放網路連結起來，幫助開發人員提高工作效率。 - **主要特徵**： - 跨網路斷開和重新啟動的持久會話 - 可搜尋的上下文命令歷史記錄 - CodeEdit，使用類似 VSCode 的內聯編輯器編輯本機和遠端文件 - AI 與 ChatGPT（或 ChatGPT 相容 API）集成，幫助編寫命令並獲得內聯答案 - [Waveterm 網站](https://www.waveterm.dev/) - [Waveterm Github](https://github.com/wavetermdev/waveterm) 7. Ollama ----- AI 風靡一時，到 2024 年，不與當地 LLM 打交道的開發人員根本就不是開發人員，對嗎？ Ollama 致力於在本地試驗大型語言模式。 它就像法學碩士的 Docker Desktop。 ![奧拉馬開源](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l3mt8lhulrm4iftjjtz.gif) - **主要特徵**： - 法學碩士的本地實驗 - 大語言模型的開發環境 - OpenAI 相容 API - [奧拉馬網站](https://ollama.com/) - [奧拉馬 Github](https://github.com/ollama/ollama) 8.LM-Studio ------- LM-Studio 也類似 Docker Desktop，是 Ollama 的競爭對手。 - **主要特徵**： - 法學碩士的本地實驗 - OpenAI 相容 API - 支援 Windows 電腦 - [LM-Studio 網站](https://lmstudio.ai/) - [LM-Studio Github](https://github.com/lmstudio-ai) 9.VS Code ------ 告訴我您知道 VS Code 是開源的。請告訴我。 VS Code 或多或少是當今大多數開發人員開始使用的第一個程式碼編輯器。除非你在 Linux 上使用 Vim。順便說一句，我使用 Arch。 VSCode 的擴展數量之多難以想。 - **主要特徵**： - 可擴展的程式碼編輯器 - 除錯支援 - 豐富的擴展生態系統 - [VS 程式碼網站](https://code.visualstudio.com/) - [VS 程式碼 Github](https://github.com/microsoft/vscode) 10.Docker Compose ------------ 現在每個人都使用 Docker，對嗎？ Docker Compose 可以透過使用簡單的`compose.yaml`檔案更輕鬆地設定多個連接的 Docker 應用程式。 - **主要特徵**： - Docker容器的編排 - 使用 YAML 定義服務 - 多容器應用程式管理 - [Docker 撰寫網站](https://docs.docker.com/compose/) - [Docker 組合 Github](https://github.com/docker/compose) 11.ESLint --------- ESLint 是一款適用於 JavaScript 和 TypeScript 的出色工具，它透過可自訂的 linting 規則和外掛程式強制執行編碼標準並提高程式碼品質。 ESLint 與 Prettier 和其他此類工具結合可以幫助廣大 JavaScript 開發人員。 - **主要特徵**： - 程式碼品質分析 - 可設定的 linting 規則 - JavaScript 和 TypeScript 支持 - [ESLint 網站](https://eslint.org/) - [ESLint Github](https://github.com/eslint/eslint) 12. Oh My Zsh --------- Oh My Zsh 就像您的 Zsh shell 設定的超級升級，它有酷炫的主題和插件，可以讓您的終端體驗更上一層樓。 當然，對於某些人來說，取得合適的 Zsh 資源檔案往往有點困難。 - **主要特徵**： - Zsh設定管理 - 可自訂的主題和插件 - 社區驅動的發展 - [哦我的 Zsh 網站](https://ohmyz.sh/) - [哦我的 Zsh Github](https://github.com/ohmyzsh/ohmyzsh) --- 我錯過了一些重要的事情嗎？ 你怎麼認為？ https://github.com/middlewarehq/middleware --- 原文出處：https://dev.to/middleware/13-foss-tools-that-developers-would-give-up-pizza-for-4a6g

0個讚   0留言 30瀏覽

建立人工智慧驅動的簡歷和求職信產生器（CopilotKit、LangChain、Tavily 和 Next.js）

**長話短說** -------- 對於有抱負的開發人員來說，建立一個偉大的專案是最好的履歷。 好，今天我們就一舉兩得；我將教您如何建立一個由人工智慧驅動的尖端應用程式，該應用程式將根據您的 LinkedIn、GitHub 和 X 生成您的簡歷和求職信。 這個專案和你隨後的簡歷會讓任何雇主驚嘆不已。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bty1rqdcu4wknb2ws0w4.gif) 我們將介紹如何： - 使用 Next.js、TypeScript 和 Tailwind CSS 建立履歷和求職信產生器 Web 應用。 - 使用 CopilotKit 將 AI 功能整合到履歷和求職信產生器中。 - 使用 Langchain 和 Tavily 抓取您的 LinkedIn、GitHub 或 X 個人檔案內容。 --- CopilotKit：用於建立應用內人工智慧副駕駛的開源框架 ============================== CopilotKit是一個[開源的AI副駕駛平台](https://github.com/CopilotKit/CopilotKit)。我們可以輕鬆地將強大的人工智慧整合到您的 React 應用程式中。 建造： - ChatBot：上下文感知的應用內聊天機器人，可以在應用程式內執行操作 💬 - CopilotTextArea：人工智慧驅動的文字字段，具有上下文感知自動完成和插入功能📝 - 聯合代理：應用程式內人工智慧代理，可以與您的應用程式和使用者互動🤖 ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fx3us3vc140aun0dvrdof.gif](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx3us3vc140aun0dvrdof.gif) {% cta https://git.new/devtoarticle1 %} Star CopilotKit ⭐️ {% endcta %} --- 先決條件 ---- 要完全理解本教程，您需要對 React 或 Next.js 有基本的了解。 以下是建立人工智慧驅動的履歷和求職信產生器所需的工具： - [React Markdown](https://github.com/remarkjs/react-markdown) - 一個**React**元件，可以給予一串 Markdown 來安全地渲染到 React 元素。 - [Langchain](https://www.langchain.com/) - 提供了一個框架，使人工智慧代理能夠搜尋網路、研究和抓取任何主題或連結。 - [OpenAI API](https://platform.openai.com/api-keys) - 提供 API 金鑰，讓您能夠使用 ChatGPT 模型執行各種任務。 - [Tavily AI](https://tavily.com/) - 一種搜尋引擎，使人工智慧代理能夠在應用程式中進行研究或抓取資料並存取即時知識。 - [CopilotKit](https://github.com/CopilotKit) - 一個開源副駕駛框架，用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 專案設定和套件安裝 --------- 首先，透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式： ``` npx create-next-app@latest airesumecoverlettergenerator ``` 選擇您首選的配置設定。在本教學中，我們將使用 TypeScript 和 Next.js App Router。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhgnfrg24f5v54vons0d.png) 接下來，安裝 React Markdown 和 OpenAI 套件及其相依性。 ``` npm i react-markdown openai ``` 最後，安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-core @copilotkit/backend ``` 恭喜！您現在已準備好建立人工智慧驅動的履歷和求職信產生器。 **建立履歷和求職信產生器前端** ----------------- 在本節中，我將引導您完成使用靜態內容建立履歷和求職信產生器前端的過程，以定義生成器的使用者介面。 首先，請在程式碼編輯器中前往`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中，建立一個名為`Resume.tsx`的文件 在`Resume.tsx`檔案中，加入以下程式碼來定義名為**`Resume`**的 React 功能元件。 ``` "use client"; // Import React and necessary hooks from the react library import React from "react"; import { useState } from "react"; // Import the ReactMarkdown component to render markdown content import ReactMarkdown from "react-markdown"; // Import the Link component from Next.js for navigation import Link from "next/link"; function Resume() { // State variables to store the resume and cover letter content const [coverLetter, setCoverLetter] = useState(""); const [resume, setResume] = useState(""); return ( // Main container with flex layout, full width, and minimum height of screen <div className="flex flex-col w-full min-h-screen bg-gray-100 dark:bg-gray-800"> {/* Header section with a fixed height, padding, and border at the bottom */} <header className="flex items-center h-16 px-4 border-b shrink-0 md:px-6 bg-white dark:bg-gray-900"> {/* Link component for navigation with custom styles */} <Link href="#" className="flex items-center gap-2 text-lg font-semibold md:text-base" prefetch={false}> <span className="sr-only text-gray-500">Resume Dashboard</span> <h1>Resume & Cover Letter Generator</h1> </Link> </header> {/* Main content area with padding */} <main className="flex-1 p-4 md:p-8 lg:p-10"> {/* Container for the content with maximum width and centered alignment */} <div className="max-w-4xl mx-auto grid gap-8"> {/* Section for displaying the resume */} <section> <div className="bg-white dark:bg-gray-900 rounded-lg shadow-sm"> <div className="p-6 md:p-8"> <h2 className="text-lg font-bold">Resume</h2> <div className="my-6" /> <div className="grid gap-6"> {/* Conditional rendering of the resume content */} {resume ? ( <ReactMarkdown>{resume}</ReactMarkdown> ) : ( <div>No Resume To Display</div> )} </div> </div> </div> </section> {/* Section for displaying the cover letter */} <section> <div className="bg-white dark:bg-gray-900 rounded-lg shadow-sm"> <div className="p-6 md:p-8"> <h2 className="text-lg font-bold">Cover Letter</h2> <div className="my-6" /> <div className="grid gap-4"> {/* Conditional rendering of the cover letter content */} {coverLetter ? ( <ReactMarkdown>{coverLetter}</ReactMarkdown> ) : ( <div>No Cover Letter To Display</div> )} </div> </div> </div> </section> </div> </main> </div> ); } export default Resume; ``` 接下來，前往`/[root]/src/page.tsx`文件，並新增以下程式碼來導入`Resume`元件並定義名為`Home`的功能元件。 ``` import Resume from "./components/Resume"; export default function Home() { return <Resume />; } ``` 最後，在命令列上執行命令`npm run dev` ，然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看履歷和求職信產生器前端，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7twcr2xhw15s9x9zz88k.png) 恭喜！現在您已準備好將 AI 功能新增至 AI 支援的履歷和求職信產生器。 **使用 CopilotKit 將 AI 功能整合到履歷和求職信產生器** ------------------------------------- 在本節中，您將學習如何將 AI 副駕駛員加入到履歷和求職信產生器，以使用 CopilotKit 產生履歷和求職信。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先，我們將 CopilotKit React 元件加入履歷和求職信產生器前端。 ### **將 CopilotKit 新增至待辦事項清單產生器前端** 在這裡，我將引導您完成將履歷和求職信產生器與 CopilotKit 前端整合的過程，以促進履歷和求職信的產生。 首先，使用下面的程式碼片段導入`/src/app/components/Resume.tsx`檔案頂部的自訂掛鉤`useCopilotReadable`和`useCopilotAction` 。 ``` import { useCopilotAction, useCopilotReadable } from "@copilotkit/react-core"; ``` 在`Resume`函數內的狀態變數下方，加入以下程式碼，該程式碼使用`useCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的履歷和求職信。該掛鉤使副駕駛可以閱讀簡歷和求職信。 ``` useCopilotReadable({ description: "The user's cover letter.", value: coverLetter, }); useCopilotReadable({ description: "The user's resume.", value: resume, }); ``` 在上面的程式碼下方，新增以下程式碼，程式碼使用`useCopilotAction`掛鉤來設定名為`createCoverLetterAndResume`的操作，該操作將啟用簡歷和求職信的產生。 操作採用兩個參數，稱為`coverLetterMarkdown`和`resumeMarkdown` ，用於產生履歷和求職信。它包含一個處理程序函數，可根據給定的提示產生履歷和求職信。 在處理函數內部， `coverLetter`和`resume`狀態會使用新產生的履歷和求職信 markdown 進行更新，如下所示。 ``` useCopilotAction( { // Define the name of the action name: "createCoverLetterAndResume", // Provide a description for the action description: "Create a cover letter and resume for a job application.", // Define the parameters required for the action parameters: [ { // Name of the first parameter name: "coverLetterMarkdown", // Type of the first parameter type: "string", // Description of the first parameter description: "Markdown text for a cover letter to introduce yourself and briefly summarize your professional background.", // Mark the first parameter as required required: true, }, { // Name of the second parameter name: "resumeMarkdown", // Type of the second parameter type: "string", // Description of the second parameter description: "Markdown text for a resume that displays your professional background and relevant skills.", // Mark the second parameter as required required: true, }, ], // Define the handler function to be executed when the action is called handler: async ({ coverLetterMarkdown, resumeMarkdown }) => { // Update the state with the provided cover letter markdown text setCoverLetter(coverLetterMarkdown); // Update the state with the provided resume markdown text setResume(resumeMarkdown); }, }, // Empty dependency array, indicating this effect does not depend on any props or state [], ); ``` 之後，請前往`/[root]/src/app/page.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件和樣式。 ``` import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; ``` 然後使用`CopilotKit`包裝`CopilotSidebar`和`Resume`元件，如下所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/` ) 的 URL，而`CopilotSidebar`則呈現應用程式內聊天機器人，您可以提示您產生履歷和求職信。 ``` export default function Home() { return ( <CopilotKit runtimeUrl="/api/copilotkit"> <CopilotSidebar instructions={"Help the user create a cover letter and resume"} labels={{ initial: "Welcome to the cover letter app! Add your LinkedIn, X, or GitHub profile link below.", }} defaultOpen={true} clickOutsideToClose={false}> <Resume /> </CopilotSidebar> </CopilotKit> ); } ``` 之後，執行開發伺服器並導航至[http://localhost:3000](http://localhost:3000/) 。您應該會看到應用程式內聊天機器人已整合到履歷和求職信產生器中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3dbqyfqzhjj0dw8imv7.png) ### **將 CopilotKit 後端加入博客** 在這裡，我將引導您完成將履歷和求職信產生器與 CopilotKit 後端整合的過程，該後端處理來自前端的請求，並提供函數呼叫和各種 LLM 後端（例如 GPT）。 此外，我們將整合一個名為 Tavily 的人工智慧代理，它可以抓取網路上任何給定連結上的內容。 首先，在根目錄中建立一個名為`.env.local`的檔案。然後在保存`ChatGPT`和`Tavily` Search API 金鑰的檔案中加入下面的環境變數。 ``` OPENAI_API_KEY="Your ChatGPT API key" TAVILY_API_KEY="Your Tavily Search API key" OPENAI_MODEL=gpt-4-1106-preview ``` 若要取得 ChatGPT API 金鑰，請導覽至 https://platform.openai.com/api-keys。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tblh9suj8dsp6tab3ej0.jpg) 若要取得 Tavilly Search API 金鑰，請導覽至 https://app.tavily.com/home ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9comyk1kt8mibhvhtpq3.jpg) 之後，轉到`/[root]/src/app`並建立一個名為`api`的資料夾。在`api`資料夾中，建立一個名為`copilotkit`的資料夾。 在`copilotkit`資料夾中，建立一個名為`tavily.ts`的檔案並加入以下程式碼。程式碼定義了一個非同步函數**`scrape`** ，它將連結作為輸入，將此連結傳送到 Tavily API，處理 JSON 回應，然後使用 OpenAI 的語言模型以簡單的英文產生回應摘要。 ``` // Import the OpenAI library import OpenAI from "openai"; // Define an asynchronous function named `scrape` that takes a search query string as an argument export async function scrape(query: string) { // Send a POST request to the specified API endpoint with the search query and other parameters const response = await fetch("https://api.tavily.com/search", { method: "POST", // HTTP method headers: { "Content-Type": "application/json", // Specify the request content type as JSON }, body: JSON.stringify({ api_key: process.env.TAVILY_API_KEY, // API key from environment variables query, // The search query passed to the function search_depth: "basic", // Search depth parameter include_answer: true, // Include the answer in the response include_images: false, // Do not include images in the response include_raw_content: false, // Do not include raw content in the response max_results: 20, // Limit the number of results to 20 }), }); // Parse the JSON response from the API const responseJson = await response.json(); // Instantiate the OpenAI class const openai = new OpenAI(); // Use the OpenAI API to create a completion based on the JSON response const completion = await openai.chat.completions.create({ messages: [ { role: "system", // Set the role of the message to system content: `Summarize the following JSON to answer the research query \`"${query}"\`: ${JSON.stringify( responseJson )} in plain English.`, // Provide the JSON response to be summarized }, ], model: process.env.OPENAI_MODEL || "gpt-4", // Specify the OpenAI model, defaulting to GPT-4 if not set in environment variables }); // Return the content of the first message choice from the completion response return completion.choices[0].message.content; } ``` 接下來，在`copilotkit`資料夾中建立一個名為`route.ts`的文件，並加入以下程式碼。程式碼使用 CopilotKit 框架設定抓取操作，以根據給定連結取得和匯總內容。 然後它定義一個呼叫 scrape 函數並傳回結果的操作。如果所需的 API 金鑰可用，它會將此操作新增至 CopilotKit 執行時間，並使用環境變數中指定的 OpenAI 模型回應 POST 請求。 ``` // Import necessary modules and functions import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/backend"; import { Action } from "@copilotkit/shared"; import { scrape } from "./tavily"; // Import the previously defined scrape function // Define a scraping action with its name, description, parameters, and handler function const scrapingAction: Action<any> = { name: "scrapeContent", // Name of the action description: "Call this function to scrape content from a url in a query.", // Description of the action parameters: [ { name: "query", // Name of the parameter type: "string", // Type of the parameter description: "The query for scraping content. 5 characters or longer. Might be multiple words", // Description of the parameter }, ], // Handler function to execute when the action is called handler: async ({ query }) => { console.log("Scraping query: ", query); // Log the query to the console const result = await scrape(query); // Call the scrape function with the query and await the result console.log("Scraping result: ", result); // Log the result to the console return result; // Return the result }, }; // Define an asynchronous POST function to handle POST requests export async function POST(req: Request): Promise<Response> { const actions: Action<any>[] = []; // Initialize an empty array to store actions // Check if the TAVILY_API_KEY environment variable is set if (process.env["TAVILY_API_KEY"]) { actions.push(scrapingAction); // Add the scraping action to the actions array } // Create a new instance of CopilotRuntime with the defined actions const copilotKit = new CopilotRuntime({ actions: actions, }); const openaiModel = process.env["OPENAI_MODEL"]; // Get the OpenAI model from environment variables // Return the response from CopilotKit, using the OpenAIAdapter with the specified model return copilotKit.response(req, new OpenAIAdapter({ model: openaiModel })); } ``` 如何產生履歷和求職信 ---------- 現在轉到您之前整合的應用程式內聊天機器人，加入 LinkedIn、GitHub 或 X 個人資料連結，然後按 Enter 鍵。 在新增連結後，聊天機器人將使用 LangChain 和 Tavily 從連結設定檔中抓取內容。然後它將使用該內容產生履歷和求職信。 產生的簡歷應如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ey6p8xsgxf3poigz2rko.png) 產生的求職信應如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39h4te778e6fuahqfv2k.png) 恭喜！您已完成本教學的專案。 結論 -- 現在您可以建立一個出色的人工智慧驅動的簡歷產生器，以磨練您的人工智慧建立技能並簡化您的求職過程！ 如果您喜歡這篇文章，請記得按讚並保存它，並讓我知道您接下來希望看到哪些主題。 --- 原文出處：https://dev.to/copilotkit/build-an-ai-powered-resume-cover-letter-generator-copilotkit-langchain-tavily-nextjs-1nkc

0個讚   0留言 20瀏覽

使用 WebSockets、React 和 TypeScript 建立即時投票應用程式 🔌⚡️

長話短說 ---- WebSocket 允許您的應用程式具有「即時」功能，其中更新是即時的，因為它們是在開放的雙向通道上傳遞的。 這與 CRUD 應用程式不同，CRUD 應用程式通常使用 HTTP 請求，必須建立連線、傳送請求、接收回應，然後關閉連線。 ![即時的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/805xrpyehxllmtp6x0ez.png) 要在 React 應用程式中使用 WebSockets，您需要一個專用伺服器，例如帶有 NodeJS 的 ExpressJS 應用程式，以維持持久連接。 不幸的是，無伺服器解決方案（例如 NextJS、AWS lambda）本身並不支援 WebSocket。真糟糕。 😞 為什麼不？嗯，無伺服器服務的開啟和關閉取決於請求是否傳入。 幸運的是，我們將討論兩種實作 WebSocket 的好方法： 1. **進階**：使用 React、NodeJS 和 Socket.IO 自行實作和配置 2. **簡單**：透過使用[Wasp](https://wasp-lang.dev)這個全端 React-NodeJS 框架，為您配置 Socket.IO 並將其整合到您的應用程式中。 這些方法允許您建立有趣的東西，例如我們在這裡建立的立即更新的「與朋友投票」應用程式： {% 嵌入 https://www.youtube.com/watch?v=Twy-2P0Co6M %} 您可以[在此處嘗試即時演示應用程式](https://websockets-voting-client.fly.dev/) 如果您只想要應用程式程式碼，可以[在 GitHub 上找到](https://github.com/vincanger/websockets-wasp) 在我們開始之前 ------- 我們正在努力幫助您盡可能輕鬆地建立高效能的網路應用程式 - 包括建立這樣的內容，每週發布一次！ 如果您能在 GitHub 上為我們的儲存庫加註星標以支持我們，我們將不勝感激：https://www.github.com/wasp-lang/wasp 🙏 僅供參考， [Wasp = }](https://wasp-lang.dev)是唯一一個開源、完全伺服器化的全端 React/Node 框架，具有內建編譯器和 AI 輔助功能，可讓您超快速地建立應用程式。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hk4emh8rr8q4j35sxud.gif) {% cta https://www.github.com/wasp-lang/wasp %} 連 Ron 也會在 GitHub 上為 Wasp 加註星標 🤩 {% endcta %} 為什麼選擇 WebSocket？ ---------------- 因此，想像一下您在一個聚會上向朋友發送短信，告訴他們要帶什麼食物。 現在，如果您打電話給您的朋友，這樣您就可以不斷地交談，而不是偶爾發送訊息，不是更容易嗎？這幾乎就是 Web 應用程式世界中的 WebSocket。 例如，傳統的 HTTP 請求（例如 CRUD/RESTful）就像那些短信 - 您的應用程式每次需要新資訊時都必須**詢問伺服器**，就像您每次想到食物時都必須向朋友發送簡訊一樣為您的聚會。 但使用 WebSockets，一旦建立連接，它**就會保持開放狀態**以進行持續的雙向通信，因此伺服器可以在新資訊可用時立即向您的應用程式發送新訊息，即使客戶端沒有請求。 這非常適合聊天應用程式、遊戲伺服器等即時應用程式，或當您追蹤股票價格時。例如，Google Docs、Slack、WhatsApp、Uber、Zoom 和 Robinhood 等應用程式都使用 WebSocket 來支援其實時通訊功能。 ![https://media3.giphy.com/media/26u4hHj87jMePiO3u/giphy.gif?cid=7941fdc6hxgjnub1rcs80udcj652956fwmm4qhxsmk6ldxg7&ep=v1_](https://media3.giphy.com/media/26u4hHj87jMePiO3u/giphy.gif?cid=7941fdc6hxgjnub1rcs80udcj652956fwmm4qhxsmk6ldxg7&ep=v1_gifs_search&rid=giphy.gif&ct=g) 因此請記住，當您的應用程式和伺服器有很多主題要討論時，請使用 WebSockets，讓對話自由進行！ WebSocket 的工作原理 --------------- 如果您希望應用程式具有即時功能，則並非總是需要 WebSocket。您可以透過使用資源密集型進程來實現類似的功能，例如： 1. 長輪詢，例如執行`setInterval`定期存取伺服器並檢查更新。 2. 單向“伺服器發送事件”，例如保持單向伺服器到客戶端連接開啟以僅接收來自伺服器的新更新。 另一方面，WebSockets 在用戶端和伺服器之間提供雙向（也稱為「全雙工」）通訊通道。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/76wuptbq21qzppy4dtp0.png) 如上圖所示，一旦透過 HTTP「握手」建立連接，伺服器和客戶端就可以在連接最終被任何一方關閉之前立即自由地交換資訊。 儘管引入 WebSocket 確實會因為非同步和事件驅動的元件而增加複雜性，但選擇正確的程式庫和框架可以使事情變得簡單。 在下面的部分中，我們將向您展示在 React-NodeJS 應用程式中實作 WebSocket 的兩種方法： 1. 與您自己的獨立 Node/ExpressJS 伺服器一起自行配置 2. 讓Wasp這個擁有超強能力的全端框架為您輕鬆配置 在 React-NodeJS 應用程式中新增 WebSockets 支持 ------------------------------------ ### 你不應該使用什麼：無伺服器架構 但首先，請注意：儘管無伺服器解決方案對於某些用例來說是一個很好的解決方案，但它**並不是**完成這項工作的正確工具。 這意味著，流行的框架和基礎設施（例如 NextJS 和 AWS Lambda）不支援開箱即用的 WebSocket 整合。 {% 嵌入 https://www.youtube.com/watch?v=e5Cye4pIFeA %} 此類解決方案不是在專用的傳統伺服器上執行，而是利用無伺服器函數（也稱為 lambda 函數），這些函數旨在在收到請求時立即執行並完成任務。關閉」。 這種無伺服器架構對於保持 WebSocket 連線處於活動狀態並不理想，因為我們需要持久的、「始終在線」的連線。 這就是為什麼如果您想建立即時應用程式，您需要一個「伺服器化」架構。儘管有一種解決方法可以在無伺服器架構上取得 WebSocket，[例如使用第三方服務](https://vercel.com/guides/do-vercel-serverless-functions-support-websocket-connections)，但這有許多缺點： - **成本：**這些服務以訂閱形式存在，並且隨著應用程式的擴展而變得昂貴 - **有限的客製化：**您使用的是預先建置的解決方案，因此您的控制權較少 - **除錯：**修復錯誤變得更加困難，因為您的應用程式沒有在本地執行 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldjj1szn6gkk1daj2dqy.png) 💪 ### 將 ExpressJS 與 Socket.IO 結合使用 — 複雜/可自訂的方法 好吧，讓我們從第一個更傳統的方法開始：為您的客戶端建立一個專用伺服器，以與之建立雙向通訊通道。 這種方法更先進，複雜一些，但允許更精細的客製化。**如果您正在尋找一種簡單、更簡單的方法將 WebSockets 引入您的 React/NodeJS 應用程式，我們將在[下面的部分](#implementing-websockets-with-wasp-easierless-config-method)中介紹該方法** &gt; > 👨‍💻**提示**：如果您想一起編碼，可以按照以下說明進行操作。或者，如果您只想查看這個特定的已完成的 React-NodeJS 全端應用程式，請查看[此處的 github 存儲庫](https://github.com/vincanger/websockets-react) &gt; 在此範例中，我們將使用[ExpressJS](https://expressjs.com/)和[Socket.IO](http://Socket.io)庫。儘管還有其他函式庫，Socket.IO 是一個很棒的函式庫，它使得在 NodeJS 中使用 WebSockets 變得[更加容易](https://socket.io/docs/v4/)。 如果您想一起編碼，請先克隆`start`分支： ``` git clone --branch start https://github.com/vincanger/websockets-react.git ``` 您會注意到裡面有兩個資料夾： - 📁 我們的 React 應用程式的`ws-client` - 📁 `ws-server`用於我們的 ExpressJS/NodeJS 伺服器 讓我們進入伺服器資料`cd`並安裝依賴項： ``` cd ws-server && npm install ``` 我們還需要安裝使用打字稿的類型： ``` npm i --save-dev @types/cors ``` 現在，在終端機中使用`npm start`命令執行伺服器。 您應該會看到在控制台上列印出`listening on *:8000` ！ 目前，我們的`index.ts`文件如下所示： ``` import cors from 'cors'; import express from 'express'; const app = express(); app.use(cors({ origin: '*' })); const server = require('http').createServer(app); app.get('/', (req, res) => { res.send(`<h1>Hello World</h1>`); }); server.listen(8000, () => { console.log('listening on *:8000'); }); ``` 這裡沒有太多內容，所以讓我們安裝[Socket.IO](http://Socket.IO)套件並開始將 WebSocket 加入到我們的伺服器！ 首先，讓我們使用`ctrl + c`終止伺服器，然後執行： ``` npm install socket.io ``` 讓我們繼續用以下程式碼替換`index.ts`檔。我知道程式碼很多，所以我留下了一堆註解來解釋發生了什麼;)： ``` import cors from 'cors'; import express from 'express'; import { Server, Socket } from 'socket.io'; type PollState = { question: string; options: { id: number; text: string; description: string; votes: string[]; }[]; }; interface ClientToServerEvents { vote: (optionId: number) => void; askForStateUpdate: () => void; } interface ServerToClientEvents { updateState: (state: PollState) => void; } interface InterServerEvents { } interface SocketData { user: string; } const app = express(); app.use(cors({ origin: 'http://localhost:5173' })); // this is the default port that Vite runs your React app on const server = require('http').createServer(app); // passing these generic type parameters to the `Server` class // ensures data flowing through the server are correctly typed. const io = new Server< ClientToServerEvents, ServerToClientEvents, InterServerEvents, SocketData >(server, { cors: { origin: 'http://localhost:5173', methods: ['GET', 'POST'], }, }); // this is middleware that Socket.IO uses on initiliazation to add // the authenticated user to the socket instance. Note: we are not // actually adding real auth as this is beyond the scope of the tutorial io.use(addUserToSocketDataIfAuthenticated); // the client will pass an auth "token" (in this simple case, just the username) // to the server on initialize of the Socket.IO client in our React App async function addUserToSocketDataIfAuthenticated(socket: Socket, next: (err?: Error) => void) { const user = socket.handshake.auth.token; if (user) { try { socket.data = { ...socket.data, user: user }; } catch (err) {} } next(); } // the server determines the PollState object, i.e. what users will vote on // this will be sent to the client and displayed on the front-end const poll: PollState = { question: "What are eating for lunch ✨ Let's order", options: [ { id: 1, text: 'Party Pizza Place', description: 'Best pizza in town', votes: [], }, { id: 2, text: 'Best Burger Joint', description: 'Best burger in town', votes: [], }, { id: 3, text: 'Sus Sushi Place', description: 'Best sushi in town', votes: [], }, ], }; io.on('connection', (socket) => { console.log('a user connected', socket.data.user); // the client will send an 'askForStateUpdate' request on mount // to get the initial state of the poll socket.on('askForStateUpdate', () => { console.log('client asked For State Update'); socket.emit('updateState', poll); }); socket.on('vote', (optionId: number) => { // If user has already voted, remove their vote. poll.options.forEach((option) => { option.votes = option.votes.filter((user) => user !== socket.data.user); }); // And then add their vote to the new option. const option = poll.options.find((o) => o.id === optionId); if (!option) { return; } option.votes.push(socket.data.user); // Send the updated PollState back to all clients io.emit('updateState', poll); }); socket.on('disconnect', () => { console.log('user disconnected'); }); }); server.listen(8000, () => { console.log('listening on *:8000'); }); ``` 太好了，使用`npm start`再次啟動伺服器，然後將[Socket.IO](http://Socket.IO)客戶端加入到前端。 `cd`進入`ws-client`目錄並執行 ``` cd ../ws-client && npm install ``` 接下來，使用`npm run dev`啟動開發伺服器，您應該在瀏覽器中看到硬編碼的啟動應用程式： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnfi9vt819a0w1qfa7p9.png) 您可能已經注意到 poll 與我們伺服器的`PollState`不符。我們需要安裝[Socket.IO](http://Socket.IO)客戶端並進行所有設置，以便開始即時通訊並從伺服器獲取正確的輪詢。 繼續使用`ctrl + c`終止開發伺服器並執行： ``` npm install socket.io-client ``` 現在讓我們建立一個鉤子，在建立連線後初始化並返回 WebSocket 用戶端。為此，請在`./ws-client/src`中建立一個名為`useSocket.ts`新檔案： ``` import { useState, useEffect } from 'react'; import socketIOClient, { Socket } from 'socket.io-client'; export type PollState = { question: string; options: { id: number; text: string; description: string; votes: string[]; }[]; }; interface ServerToClientEvents { updateState: (state: PollState) => void; } interface ClientToServerEvents { vote: (optionId: number) => void; askForStateUpdate: () => void; } export function useSocket({endpoint, token } : { endpoint: string, token: string }) { // initialize the client using the server endpoint, e.g. localhost:8000 // and set the auth "token" (in our case we're simply passing the username // for simplicity -- you would not do this in production!) // also make sure to use the Socket generic types in the reverse order of the server! const socket: Socket<ServerToClientEvents, ClientToServerEvents> = socketIOClient(endpoint, { auth: { token: token } }) const [isConnected, setIsConnected] = useState(false); useEffect(() => { console.log('useSocket useEffect', endpoint, socket) function onConnect() { setIsConnected(true) } function onDisconnect() { setIsConnected(false) } socket.on('connect', onConnect) socket.on('disconnect', onDisconnect) return () => { socket.off('connect', onConnect) socket.off('disconnect', onDisconnect) } }, [token]); // we return the socket client instance and the connection state return { isConnected, socket, }; } ``` 現在讓我們回到`App.tsx`主頁並將其替換為以下程式碼（我再次留下註解來解釋）： ``` import { useState, useMemo, useEffect } from 'react'; import { Layout } from './Layout'; import { Button, Card } from 'flowbite-react'; import { useSocket } from './useSocket'; import type { PollState } from './useSocket'; const App = () => { // set the PollState after receiving it from the server const [poll, setPoll] = useState<PollState | null>(null); // since we're not implementing Auth, let's fake it by // creating some random user names when the App mounts const randomUser = useMemo(() => { const randomName = Math.random().toString(36).substring(7); return `User-${randomName}`; }, []); // 🔌⚡️ get the connected socket client from our useSocket hook! const { socket, isConnected } = useSocket({ endpoint: `http://localhost:8000`, token: randomUser }); const totalVotes = useMemo(() => { return poll?.options.reduce((acc, option) => acc + option.votes.length, 0) ?? 0; }, [poll]); // every time we receive an 'updateState' event from the server // e.g. when a user makes a new vote, we set the React's state // with the results of the new PollState socket.on('updateState', (newState: PollState) => { setPoll(newState); }); useEffect(() => { socket.emit('askForStateUpdate'); }, []); function handleVote(optionId: number) { socket.emit('vote', optionId); } return ( <Layout user={randomUser}> <div className='w-full max-w-2xl mx-auto p-8'> <h1 className='text-2xl font-bold'>{poll?.question ?? 'Loading...'}</h1> <h2 className='text-lg italic'>{isConnected ? 'Connected ✅' : 'Disconnected 🛑'}</h2> {poll && <p className='leading-relaxed text-gray-500'>Cast your vote for one of the options.</p>} {poll && ( <div className='mt-4 flex flex-col gap-4'> {poll.options.map((option) => ( <Card key={option.id} className='relative transition-all duration-300 min-h-[130px]'> <div className='z-10'> <div className='mb-2'> <h2 className='text-xl font-semibold'>{option.text}</h2> <p className='text-gray-700'>{option.description}</p> </div> <div className='absolute bottom-5 right-5'> {randomUser && !option.votes.includes(randomUser) ? ( <Button onClick={() => handleVote(option.id)}>Vote</Button> ) : ( <Button disabled>Voted</Button> )} </div> {option.votes.length > 0 && ( <div className='mt-2 flex gap-2 flex-wrap max-w-[75%]'> {option.votes.map((vote) => ( <div key={vote} className='py-1 px-3 bg-gray-100 rounded-lg flex items-center justify-center shadow text-sm' > <div className='w-2 h-2 bg-green-500 rounded-full mr-2'></div> <div className='text-gray-700'>{vote}</div> </div> ))} </div> )} </div> <div className='absolute top-5 right-5 p-2 text-sm font-semibold bg-gray-100 rounded-lg z-10'> {option.votes.length} / {totalVotes} </div> <div className='absolute inset-0 bg-gradient-to-r from-yellow-400 to-orange-500 opacity-75 rounded-lg transition-all duration-300' style={{ width: `${totalVotes > 0 ? (option.votes.length / totalVotes) * 100 : 0}%`, }} ></div> </Card> ))} </div> )} </div> </Layout> ); }; export default App; ``` 現在繼續並使用`npm run dev`啟動客戶端。開啟另一個終端機視窗/選項卡， `cd`進入`ws-server`目錄並執行`npm start` 。 如果我們做得正確，我們應該會看到我們完成的、工作的、即時的應用程式！ 🙂 如果您在兩個或三個瀏覽器標籤中打開它，它看起來和工作起來都很棒。一探究竟： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37wbxygyrxaomyhmueic.gif) 好的！ 我們已經在這裡獲得了核心功能，但由於這只是一個演示，因此缺少一些非常重要的部分，導致該應用程式在生產中無法使用。 主要是，每次安裝應用程式時，我們都會建立一個隨機的假用戶。您可以透過重新整理頁面並再次投票來檢查這一點。您會看到投票不斷增加，因為我們每次都會建立一個新的隨機用戶。我們不要這樣！ 我們應該為在我們的資料庫中註冊的用戶驗證並保留會話。但另一個問題：我們在這個應用程式中根本沒有資料庫！ 您可以開始看到即使只是一個簡單的投票功能，複雜性也是如何增加的 幸運的是，我們的下一個解決方案 Wasp 整合了身份驗證和資料庫管理。更不用說，它還為我們處理了很多 WebSockets 配置。 那麼就讓我們繼續嘗試吧！ ### 使用 Wasp 實作 WebSocket — 更簡單/更少的設定方法 由於 Wasp 是一個創新的全端框架，因此它使得建立 React-NodeJS 應用程式變得快速且對開發人員友好。 Wasp 具有許多節省時間的功能，包括透過[Socket.IO](http://socket.io/)提供的 WebSocket 支援、身份驗證、資料庫管理和開箱即用的全端類型安全性。 {% 嵌入 https://twitter.com/WaspLang/status/1673742264873500673?s=20 %} Wasp 可以為您處理所有這些繁重的工作，因為它使用配置文件，您可以將其視為 Wasp 編譯器用來幫助將您的應用程式粘合在一起的一組指令。最後，Wasp 會為您處理一堆樣板程式碼，為您節省大量時間和精力。 要查看它的實際效果，讓我們按照以下步驟使用 Wasp 實作 WebSocket 通訊： &gt; > 😎**提示**如果您想查看完成的應用程式程式碼，您可以[在此處查看 GitHub 儲存庫](https://github.com/vincanger/websockets-wasp) &gt; 1. 透過在終端機中執行以下命令來全域安裝 Wasp： ``` curl -sSL https://get.wasp-lang.dev/installer.sh | sh ``` 如果您想一起編碼，請先克隆範例應用程式的`start`分支： ``` git clone --branch start https://github.com/vincanger/websockets-wasp.git ``` 您會注意到 Wasp 應用程式的結構是分裂的： - 🐝 根目錄下有一個`main.wasp`設定檔 - 📁 `src/client`是 React 檔案的目錄 - 📁 `src/server`是 ExpressJS/NodeJS 函式的目錄 讓我們先快速瀏覽一下`main.wasp`檔案。 ``` app whereDoWeEat { wasp: { version: "^0.13.2" }, title: "where-do-we-eat", client: { rootComponent: import { Layout } from "@src/client/Layout", }, // 🔐 This is how we get Auth in our app. Easy! auth: { userEntity: User, onAuthFailedRedirectTo: "/login", methods: { usernameAndPassword: {} } }, } // 👱 this is the data model for our registered users in our database entity User {=psl id Int @id @default(autoincrement()) psl=} // ... ``` 這樣，Wasp 編譯器就會知道要做什麼並為我們配置這些功能。 讓我們告訴它我們也需要 WebSockets。將`webSocket`定義加入到`main.wasp`檔案中，位於`auth`和`dependencies`之間： ``` app whereDoWeEat { // ... webSocket: { fn: import { webSocketFn } from "@src/server/ws-server", }, // ... } ``` 現在我們必須定義`webSocketFn` 。在`./src/server`目錄中建立一個新檔案`ws-server.ts`並複製以下程式碼： ``` import { getUsername } from 'wasp/auth'; import { type WebSocketDefinition } from 'wasp/server/webSocket'; type PollState = { question: string; options: { id: number; text: string; description: string; votes: string[]; }[]; }; interface ServerToClientEvents { updateState: (state: PollState) => void; } interface ClientToServerEvents { vote: (optionId: number) => void; askForStateUpdate: () => void; } interface InterServerEvents {} export const webSocketFn: WebSocketDefinition<ClientToServerEvents, ServerToClientEvents, InterServerEvents> = ( io, _context ) => { const poll: PollState = { question: "What are eating for lunch ✨ Let's order", options: [ { id: 1, text: 'Party Pizza Place', description: 'Best pizza in town', votes: [], }, { id: 2, text: 'Best Burger Joint', description: 'Best burger in town', votes: [], }, { id: 3, text: 'Sus Sushi Place', description: 'Best sushi in town', votes: [], }, ], }; io.on('connection', (socket) => { if (!socket.data.user) { console.log('Socket connected without user'); return; } const connectionUsername = getUsername(socket.data.user); console.log('Socket connected: ', connectionUsername); socket.on('askForStateUpdate', () => { socket.emit('updateState', poll); }); socket.on('vote', (optionId) => { if (!connectionUsername) { return; } // If user has already voted, remove their vote. poll.options.forEach((option) => { option.votes = option.votes.filter((username) => username !== connectionUsername); }); // And then add their vote to the new option. const option = poll.options.find((o) => o.id === optionId); if (!option) { return; } option.votes.push(connectionUsername); io.emit('updateState', poll); }); socket.on('disconnect', () => { console.log('Socket disconnected: ', connectionUsername); }); }); }; ``` 您可能已經注意到，與傳統的 React/NodeJS 方法相比，Wasp 實作中所需的配置和樣板要少得多。那是因為： - 端點， - 驗證， - 以及 Express 和[Socket.IO](http://Socket.IO)中間件 一切都由 Wasp 為您處理。通知！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nvqwcd62j7coe938zxc.png) 現在讓我們繼續執行該應用程式來看看我們現在有什麼。 首先，我們需要初始化資料庫，以便我們的身份驗證正常運作。由於複雜性很高，我們在前面的範例中沒有這樣做，但使用 Wasp 很容易做到： ``` wasp db migrate-dev ``` 完成後，執行應用程式（第一次執行需要一段時間才能安裝所有依賴項）： ``` wasp start ``` 這次您應該會看到登入畫面。先註冊一個用戶，然後登入： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b5rub505uat10z45qmv.png) 登入後，您將看到與上一個範例相同的硬編碼輪詢資料，因為我們還沒有在前端設定[Socket.IO](http://Socket.IO)客戶端。但這一次應該容易多了。 為什麼？嗯，除了更少的配置之外，將[TypeScript 與 Wasp](https://wasp-lang.dev/docs/typescript#websocket-full-stack-type-support)一起使用的另一個好處是，您只需在伺服器上定義具有匹配事件名稱的有效負載類型，這些類型將自動在客戶端上公開！ 現在讓我們看看它是如何工作的。 在`.src/client/MainPage.tsx`中，將內容替換為以下程式碼： ``` // Wasp provides us with pre-configured hooks and types based on // our server code. No need to set it up ourselves! import { type ServerToClientPayload, useSocket, useSocketListener } from 'wasp/client/webSocket'; import { useAuth } from 'wasp/client/auth'; import { useState, useMemo, useEffect } from 'react'; import { Button, Card } from 'flowbite-react'; import { getUsername } from 'wasp/auth'; const MainPage = () => { // Wasp provides a bunch of pre-built hooks for us :) const { data: user } = useAuth(); const [poll, setPoll] = useState<ServerToClientPayload<'updateState'> | null>(null); const totalVotes = useMemo(() => { return poll?.options.reduce((acc, option) => acc + option.votes.length, 0) ?? 0; }, [poll]); const { socket } = useSocket(); const username = user ? getUsername(user) : null; useSocketListener('updateState', (newState) => { setPoll(newState); }); useEffect(() => { socket.emit('askForStateUpdate'); }, []); function handleVote(optionId: number) { socket.emit('vote', optionId); } return ( <div className='w-full max-w-2xl mx-auto p-8'> <h1 className='text-2xl font-bold'>{poll?.question ?? 'Loading...'}</h1> {poll && <p className='leading-relaxed text-gray-500'>Cast your vote for one of the options.</p>} {poll && ( <div className='mt-4 flex flex-col gap-4'> {poll.options.map((option) => ( <Card key={option.id} className='relative transition-all duration-300 min-h-[130px]'> <div className='z-10'> <div className='mb-2'> <h2 className='text-xl font-semibold'>{option.text}</h2> <p className='text-gray-700'>{option.description}</p> </div> <div className='absolute bottom-5 right-5'> {username && !option.votes.includes(username) ? ( <Button onClick={() => handleVote(option.id)}>Vote</Button> ) : ( <Button disabled>Voted</Button> )} {!user} </div> {option.votes.length > 0 && ( <div className='mt-2 flex gap-2 flex-wrap max-w-[75%]'> {option.votes.map((username, idx) => { return ( <div key={username} className='py-1 px-3 bg-gray-100 rounded-lg flex items-center justify-center shadow text-sm' > <div className='w-2 h-2 bg-green-500 rounded-full mr-2'></div> <div className='text-gray-700'>{username}</div> </div> ); })} </div> )} </div> <div className='absolute top-5 right-5 p-2 text-sm font-semibold bg-gray-100 rounded-lg z-10'> {option.votes.length} / {totalVotes} </div> <div className='absolute inset-0 bg-gradient-to-r from-yellow-400 to-orange-500 opacity-75 rounded-lg transition-all duration-300' style={{ width: `${totalVotes > 0 ? (option.votes.length / totalVotes) * 100 : 0}%`, }} ></div> </Card> ))} </div> )} </div> ); }; export default MainPage; ``` 與先前的實作相比，Wasp 使我們不必配置[Socket.IO](http://Socket.IO)客戶端以及建置我們自己的鉤子。 另外，將滑鼠懸停在客戶端程式碼中的變數上，您將看到系統會自動為您推斷類型！ 這只是一個例子，但它應該適用於所有人： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mi1rlergrj6wqht8uu0v.png) 現在，如果您打開一個新的私人/隱身選項卡，註冊一個新用戶並登錄，您將看到一個完全執行的即時投票應用程式。最好的部分是，與以前的方法相比，我們可以註銷並重新登錄，並且我們的投票資料仍然存在，這正是我們對生產級應用程式的期望。 🎩 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0gkcdes6ntn48upqqeg.gif) 太棒了…😏 比較兩種方法 ------ 現在，僅僅因為一種方法看起來更容易，並不總是意味著它總是更好。讓我們快速總結一下上述兩種實現的優點和缺點。 | |沒有黃蜂|與黃蜂| | --- | --- | --- | | 😎 目標用戶 |資深開發人員，Web 開發團隊 |全端開發人員、「Indiehackers」、初級開發人員 | | 📈 程式碼的複雜性 |中到高 |低| | 🚤 速度 |更慢、更有條理 |更快、更整合 | | 🧑‍💻 圖書館 |任何| Socket.IO | | ⛑ 類型安全 |在伺服器和客戶端上實作 |在伺服器上實作一次，由客戶端上的 Wasp 推斷 | | 🎮 控制量 |高，由你決定實施|各抒己見，黃蜂決定基本實現| | 🐛 學習曲線 |複雜：全面了解前端和後端技術，包括 WebSockets |中級：需要了解全端基礎知識。 | ### 使用 React、Express.js（不使用 Wasp）實作 WebSocket 優點： 1. 控制和**靈活性**：您可以按照最適合您的專案需求的方式來實現 WebSocket，也可以在[許多不同的 WebSocket 庫](https://www.atatus.com/blog/websocket-libraries-for-nodejs/)（而不僅僅是 Socket.IO）之間進行選擇。 缺點： 1. **更多程式碼和複雜性**：如果沒有像 Wasp 這樣的框架提供的抽象，您可能需要編寫更多程式碼並建立自己的抽象來處理常見任務。更不用說 NodeJS/ExpressJS 伺服器的正確配置（範例中提供的配置非常基本） 2. 手動**類型安全性：如果您使用 TypeScript，則必須更小心地輸入傳入和傳出伺服器的事件處理程序和有效負載類型，或自行實作更類型安全的方法。** ### 使用 Wasp 實作 WebSocket（在底層使用 React、ExpressJS 和[Socket.IO](http://Socket.IO) ） 優點： 1. 完全整合**/更少的程式碼**：Wasp 提供了有用的抽象，例如用於 React 元件的`useSocket`和`useSocketListener`掛鉤（除了其他功能，例如身份驗證、非同步作業、電子郵件發送、資料庫管理和部署），簡化了客戶端程式碼，並允許以更少的配置進行完全整合。 2. **類型安全**：Wasp 促進 WebSocket 事件和有效負載的全端類型安全。這降低了由於資料類型不匹配而導致執行時錯誤的可能性，並且使您無需編寫更多樣板檔案。 缺點： 1. **學習曲線**：不熟悉 Wasp 的開發人員需要學習該框架才能有效地使用它。 2. **控制較少**：雖然 Wasp 提供了很多便利，但它抽象化了一些細節，使開發人員對套接字管理的某些方面的控制稍微減少。 --- **幫我幫你**🌟 如果您還沒有，請[在 GitHub 上為我們加註星標](https://www.github.com/wasp-lang/wasp)，特別是如果您發現這很有用的話！如果您這樣做，它將有助於支持我們建立更多此類內容。如果你不……好吧，我想我們會處理它。 ![https://media.giphy.com/media/3oEjHEmvj6yScz914s/giphy.gif](https://media.giphy.com/media/3oEjHEmvj6yScz914s/giphy.gif) {% cta https://www.github.com/wasp-lang/wasp %} ⭐️ 感謝您的支持🙏 {% endcta %} --- 結論 -- 一般來說，如何將 WebSocket 加入到 React 應用程式取決於專案的具體情況、您對可用工具的熟悉程度以及您願意在易用性、控制和複雜性之間進行權衡。 不要忘記，如果您想查看我們的“午餐投票”示例全棧應用程式的完整完成程式碼，請轉到此處： <https://github.com/vincanger/websockets-wasp> 如果您使用 WebSockets 建立了一些很酷的東西，請在下面的評論中與我們分享 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c22za38ojlgv2xw6jfii.png) --- 原文出處：https://dev.to/wasp/build-a-real-time-voting-app-with-websockets-react-typescript-3oof

0個讚   0留言 16瀏覽

您可以在開源中貢獻這 25 個專案

受資助計畫的聲譽非常好，因為它們獲得了大量資金並得到了風險投資的支持。 有很多開源專案，你絕對應該為這些專案做出貢獻，特別是因為它們的可信度要高得多。 也許你有機會獲得直接的工作機會，畢竟你真的不知道誰在開源中關注你！ 我只保留了活躍的專案（最後一次提交不到 2 個月），所以它會很有用。讓我們保持簡短和直接。 --- 1. [Taipy](https://github.com/Avaiga/taipy) - 資料和人工智慧演算法融入生產級網路應用程式。 -------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd10iiofzmt4or4db6ej.png) Taipy 是用於輕鬆、端到端應用程式開發的完美 Python 程式庫，具有假設分析、智慧型管道執行、內建調度和部署工具。 它用於為基於 Python 的資料和人工智慧應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能，而 Taipy 是完美的選擇，尤其是與 Streamlit 相比。您可以閱讀 Marktechpost 發表的[Taipy 與 Streamlit](https://www.marktechpost.com/2024/03/15/taipy-vs-streamlit-navigating-the-best-path-to-build-python-data-ai-web-applications-with-multi-user-capability-large-data-support-and-ui-design-flexibility/)的詳細比較。 - 💰 獲得總資金 500 萬美元。 - 🚀 使用的主要語言是Python。 Taipy 在 GitHub 上有近 10k 顆星，並且正在發布`v3.1`版本。 https://github.com/Avaiga/taipy Star Taipy ⭐️ --- 2. [Hoppscotch](https://github.com/hoppscotch/hoppscotch) - API 開發生態系統。 ----------------------------------------------------------------------- ![跳房子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75cjol6454uvrnth524y.png) Hoppscotch 是一個輕量級、基於 Web 的 API 開發套件。它是從頭開始建置的，考慮到了易用性和可存取性。 Hoppscotch 與 Postman 非常相似，但提供了一些不同的功能。這就是儀表板的樣子，您可以在[hoppscotch.io](https://hoppscotch.io/)上進行即時測試。 ![跳房子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2f6ck92qdpd99in6wav.png) 即使測試本機 API，Postman 也要求您保持線上狀態。使用 Hoppscotch，您可以在沒有網路連線的情況下使用 API。 甚至 Web 應用程式也可以透過本機快取離線執行並充當 PWA，讓您可以隨時隨地測試 API！ Hoppscotch 也提供私人工作空間。請參閱[完整功能清單](https://github.com/hoppscotch/hoppscotch?tab=readme-ov-file#features)。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d36kmr72z11h71nnvhf5.png) 最好的部分也是必要的部分是他們提供完整的[文件](https://docs.hoppscotch.io/)，其中包括指南、文章、支援和變更日誌，以便您可以在這裡看到所有內容。 ![2023年已結束](https://hoppscotch.com/images/blog-hoppscotch-wrapped-2023.png) - 💰 獲得總資金 300 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Hoppscotch 在 GitHub 上擁有超過 60k 顆星，有 300 多個活躍問題和 200 多個貢獻者。 https://github.com/hoppscotch/hoppscotch 明星跳房子 ⭐️ --- 3. [Daily](https://github.com/dailydotdev/daily) - 每個開發者都值得擁有的首頁。 ----------------------------------------------------------------- ![日常的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvzd1auk8wet7vv5ev37.png) 這是一個專業網絡，您可以在其中閱讀與開發者生態系統相關的文章和個人化動態訊息。 他們匯總了來自許多組織（例如 Hacker News、Dev、Hashnode 等）的各種主題的有價值的帖子。您可以投票、加書籤，甚至建立自己的小隊。 ![小隊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqqkl42pja53ssywltyl.png) 我是其中一些功能的粉絲，如果我解釋所有內容，我會花費幾個小時，所以最好檢查一下。 這是我個人最喜歡的開源專案之一。你可以查看我的[每日個人資料](https://app.daily.dev/anmolbaranwal)。 - 💰 獲得總資金 1100 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Dailydotdev 在 GitHub 上擁有 17k+ 顆星。 https://github.com/dailydotdev/daily 明星日報 ⭐️ --- 4. [Requestly](https://github.com/requestly/requestly) - 瀏覽器的 HTTP 攔截器。 ----------------------------------------------------------------------- ![請求地](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jnfzpqe827qxm11a1tm.png) Requestly 的建置是為了透過攔截和修改 HTTP 請求來節省開發人員的時間。 Requestly 為前端開發人員提供必要的工具和整合協助，幫助他們以 10 倍的速度編寫、測試和偵錯程式碼。 Requestly 減少了對後端開發人員和開發和測試需求環境的依賴。 使用 Requestly，開發人員可以建立模擬、測試、驗證和覆蓋 API 回應，修改請求和回應標頭，設定重定向（映射本機、映射遠端），並使用 Requestly 會話進行更快的偵錯。 您可以看到[完整功能](https://github.com/requestly/requestly?tab=readme-ov-file#-features)的清單。 - 💰 獲得 50 萬美元的種子資金。 - 🚀 使用的主要語言是 TypeScript。 Requestly 在 GitHub 上擁有超過 1,800 顆星，並且正在快速成長。 https://github.com/requestly/requestly 為請求加星號 ⭐️ --- 5.[重新發送](https://github.com/resend)- 給開發人員的電子郵件。 ------------------------------------------------ ![重發](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7diqqs4n4yrshxf22l3.png) 電子郵件可能是人們溝通的最重要的媒介。然而，我們需要停止像 2010 年那樣開發電子郵件，並重新思考 2022 年及以後如何開發電子郵件。它應該針對我們今天建立網頁應用程式的方式進行現代化。 他們提供了許多與我們正在使用的技術堆疊相對應的不同儲存庫。請隨意探索其中每一個。 ![重新發送集成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jmx7q5i4wrsnwgcuvwk.png) - 💰 獲得 350 萬美元種子資金。 - 🚀 使用的主要語言是 TypeScript（React 電子郵件）。 Resend（React email）在 GitHub 上擁有超過 12,500 顆星，並被超過 7,500 名開發者使用。 https://github.com/resend 星標重新發送 ⭐️ --- 6. [Buildship](https://github.com/rowyio/buildship/) - 由人工智慧驅動的低程式碼視覺後端建構器。 --------------------------------------------------------------------------- ![建造船](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzlrynz5xephv4t9layd.png) 對於您正在使用無程式碼應用程式建構器（FlutterFlow、Webflow、Framer、Adalo、Bubble、BravoStudio...）或前端框架（Next.js、React、Vue...）建立的應用程式，您需要一個後端來支援可擴展的 API、安全工作流程、自動化等。 BuildShip 為您提供了一種完全視覺化的方式，可以在易於使用的完全託管體驗中可擴展地建立這些後端任務。 這意味著您無需在雲端平台上爭論或部署事物或執行 DevOps。只需立即建造和發貨 🚀 他們甚至與 TypeSense 合作並且發展得非常快！ ![建造船](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6oc3rc713mjg9cwqj7d4.png) 我嘗試過Buildship，它很強大。 - 💰 私人資金（由 Google、Vercel、Figma 等支持）。 - 🚀 使用的主要語言是 TypeScript。 它在 GitHub 上有 260 多顆星，使用 Rowy 完成，有 5800 顆星。 https://github.com/rowyio/buildship/ 明星 BuildShip ⭐️ --- 7. [Cal](https://github.com/calcom/cal.com) - 為所有人安排基礎設施。 --------------------------------------------------------- ![卡爾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ccagnexb805xzpewfy5.png) 這是有史以來最活躍的專案之一。我也透過 Cal 的 Algora 看過很多付費演出。 早些時候，我使用 Calendly，但我將其切換到 Cal，特別是因為它們在您可以建立的連結方面提供了更大的靈活性。 例如，我有一個協作連結，人們可以在其中選擇會議的持續時間並修復其他連結中的時間安排。您可以將其附加到幾乎所有應用程式，例如 GMeet、Zoom，如果您想參加付費會議，甚至可以同步付款。應用程式整合的[總選項](https://cal.com/apps)幾乎令人難以置信:) ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anesuu0ux6ejz886irnt.png) 您可以做很多事情，包括自動化工作流程，所以只需檢查一下即可。 ![工作流程儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc0x5vq54joov98wwq9h.png) - 💰 獲得總資金（A 輪）3240 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Cal 在 GitHub 上擁有超過 29,000 顆星，並擁有超過 600 名貢獻者。 https://github.com/calcom/cal.com Star Cal ⭐️ --- 8. [Penpot](https://github.com/penpot/penpot) - 完美協作的設計工具。 ---------------------------------------------------------- ![筆筒](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mooryn8zodod2mkpzefn.png) Penpot 是第一個用於設計和程式碼協作的開源設計工具。設計師可以大規模建立令人驚嘆的設計、互動式原型和設計系統，而開發人員則可以享受現成的程式碼，並使他們的工作流程變得簡單、快速。所有這一切都沒有任何切換戲劇性的情況。 完全免費並符合開放標準（SVG、CSS 和 HTML）。 一次性查看[庫、模板](https://penpot.app/libraries-templates)和[功能](https://penpot.app/features)的清單。 觀看以下影片體驗`Penpot 2.0` 。 - 💰 獲得總資金 800 萬美元。 - 🚀 使用的主要語言是 Clojure。 Penpot 在 GitHub 上擁有超過 28,500 顆星，目前已發布`v2.0`版本。 https://github.com/penpot/penpot 星星筆罐 ⭐️ --- 9. [Appsmith](https://github.com/appsmithorg/appsmith) - 建立管理面板、內部工具和儀表板的平台。 ---------------------------------------------------------------------------- ![應用史密斯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rt7s0r3wz2leec83cl17.png) 管理面板和儀表板是任何軟體創意（在大多數情況下）的一些常見部分，我嘗試從頭開始建立它，這會帶來很多痛苦和不必要的辛苦工作。 您可能已經看到組織建立了內部應用程式，例如儀表板、資料庫 GUI、管理面板、批准應用程式、客戶支援儀表板等，以幫助其團隊執行日常操作。正如我所說，Appsmith 是一個開源工具，可以實現這些內部應用程式的快速開發。 首先，請觀看這個 YouTube 影片，該影片在 100 秒內解釋了 Appsmith。 嵌入 https://www.youtube.com/watch?v=NnaJdA1A11s 他們提供拖放小部件來建立 UI。 您可以使用 45 多個可自訂的小工具在幾分鐘內建立漂亮的響應式 UI，而無需編寫一行 HTML/CSS。尋找[小部件的完整清單](https://www.appsmith.com/widgets)。 ![按鈕點擊小工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqpnnslvsvjl4gifseon.png) ![驗證](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/489fly7tvknz2uv2mgei.png) 您可以閱讀[文件](https://docs.appsmith.com/)並使用這[20 多個範本](https://www.appsmith.com/templates)中的任何一個，以便您可以快速入門。 - 💰 獲得 500 萬美元種子資金。 - 🚀 使用的主要語言是 TypeScript。 Appsmith 在 GitHub 上擁有超過 32k 顆星，發布了 200 多個版本。 https://github.com/appsmithorg/appsmith Star Appsmith ⭐️ --- 10.[二十](https://github.com/twentyhq/twenty)- Salesforce 的現代替代品。 --------------------------------------------------------------- ![二十](https://framerusercontent.com/images/oclg8rdRgBnzeLnSJOfettLFjI.webp) 我們花了數千個小時來研究Pipedrive 和Salesforce 等傳統CRM，以使它們與我們的業務需求保持一致，但最終卻感到沮喪——定制非常複雜，而且這些平台的封閉生態系統可能會讓人感到受到限制。 Twenty 是一個現代化、功能強大、價格實惠的平台，用於管理您的客戶關係。您可以閱讀[使用者指南](https://twenty.com/user-guide)。 ![二十](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tucrt5pk9piyswnt9q77.png) - 💰 獲得 75.9 萬美元的種子資金。 - 🚀 使用的主要語言是 TypeScript。 Twenty 在 GitHub 上擁有超過 14,500 顆星，擁有 200 多名貢獻者。 https://github.com/twentyhq/twenty 二十星 ⭐️ --- 11.[繼續](https://github.com/continuedev/continue)-AI程式碼助手。 -------------------------------------------------------- ![繼續 gif](https://github.com/continuedev/continue/raw/main/docs/static/img/understand.gif) Continue 是領先的開源 AI 程式碼助理。您可以連接任何模型和任何上下文，以在[VS Code](https://marketplace.visualstudio.com/items?itemName=Continue.continue)和[JetBrains](https://plugins.jetbrains.com/plugin/22707-continue-extension)內建立自訂自動完成和聊天體驗。 > 選項卡可自動完成程式碼建議。 ![自動完成 gif](https://github.com/continuedev/continue/raw/main/docs/static/img/autocomplete.gif) > 重構您正在編碼的函數。 ![重構影像](https://github.com/continuedev/continue/raw/main/docs/static/img/inline.gif) > 詢問有關您的程式碼庫的問題。 ![程式碼庫](https://github.com/continuedev/continue/raw/main/docs/static/img/codebase.gif) > 快速使用文件作為上下文 ![文件上下文 gif](https://github.com/continuedev/continue/raw/main/docs/static/img/docs.gif) 閱讀[快速入門指南](https://docs.continue.dev/quickstart)。 - 💰 獲得 210 萬美元種子資金。 - 🚀 使用的主要語言是 TypeScript。 Continue 在 GitHub 上有 12k+ 顆星，並且發布了`v0.8`版本。 https://github.com/continuedev/continue 星繼續 ⭐️ --- [12.Refine](https://github.com/refinedev/refine) - 面向企業的開源 Retool。 ------------------------------------------------------------------ ![精煉](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wsti2yfikrhc9nggov5.png) Refine 是一個元 React 框架，可以快速開發各種 Web 應用程式。 從內部工具到管理面板、B2B 應用程式和儀表板，它可作為建立任何類型的 CRUD 應用程式（例如 DevOps 儀表板、電子商務平台或 CRM 解決方案）的全面解決方案。 ![電子商務](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xry9381y4s36emgb9psr.png) 您可以在一分鐘內使用單一 CLI 命令進行設定。 它具有適用於 15 多個後端服務的連接器，包括 Hasura、Appwrite 等。 但最好的部分是，Refine `headless by design` ，從而提供無限的樣式和自訂選項。 你可以看到[模板](https://refine.dev/templates/)。 ![範本](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87vbx5tqyicb9gmgirka.png) - 💰 獲得總資金 380 萬美元。 - 🚀 使用的主要語言是 TypeScript。 它們在 GitHub 上擁有大約 25,000 顆星，並被超過 3,000 名開發人員使用。 https://github.com/refinedev/refine 星際精煉 ⭐️ --- 13. [Revideo](https://github.com/redotvideo/revideo) - 使用程式碼建立影片。 ----------------------------------------------------------------- ![審查](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttwzahj6kfgllj0aknt1.png) Revideo 是一個用於程式化影片編輯的開源框架。它是從令人驚嘆的 Motion Canvas 編輯器分叉出來的，將其從獨立的應用程式轉變為開發人員可以用來建立整個影片編輯應用程式的庫。 Revideo 可讓您在 Typescript 中建立視訊範本並部署 API 端點以使用動態輸入呈現它們。它還提供了一個React播放器元件來即時預覽瀏覽器中的變化。 - 💰 獲得總資金 500 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Revideo 在 GitHub 上有 1.2k 顆星，活躍問題非常少。簡而言之，這是一個完美的、不那麼擁擠的貢獻專案。 https://github.com/redotvideo/revideo 明星重錄 ⭐️ --- 14.[百萬](https://github.com/aidenybai/million)- 讓你的 React 速度提高 70%。 ------------------------------------------------------------------ ![百萬](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afs9dm1eujmajxn0rng9.png) Million.js 是一個極其快速且輕量級的最佳化編譯器，可將元件速度提高 70%。自己探索吧！ ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vozcs5gd57rwlp3jjmr4.png) - 💰 獲得總計 50 萬美元的資金。 - 🚀 使用的主要語言是 TypeScript。 Million 在 GitHub 上擁有超過 15,500 顆星，並被超過 3000 名開發者使用。 https://github.com/aidenybai/million 明星百萬⭐️ --- 15. [FlowiseAI](https://github.com/FlowiseAI/Flowise) - 拖放 UI 來建立您的客製化 LLM 流程。 ------------------------------------------------------------------------------ ![弗洛伊薩伊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5bp43nil764fhe4a05z.png) Flowise 是一款開源 UI 視覺化工具，用於建立客製化的 LLM 編排流程和 AI 代理程式。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahk2ovjrpq1qk3r5pfot.png) 您可以閱讀[文件](https://docs.flowiseai.com/)。 ![流程化人工智慧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trkltpn5lk1y1pte0smd.png) - 💰 從 YCombinator 獲得資金（不知道多少）。 - 🚀 使用的主要語言是 TypeScript。 FlowiseAI 在 GitHub 上擁有超過 26,500 個 Star，並擁有超過 13,000 個分叉，因此具有良好的整體比率。 https://github.com/FlowiseAI/Flowise 明星 FlowiseAI ⭐️ --- 16.[觸發器](https://github.com/triggerdotdev/trigger.dev)——後台作業平台。 --------------------------------------------------------------- ![扳機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iaoox3qwmc397x9ckmw4.png) Trigger.dev v3 可以輕鬆編寫可靠的長時間執行任務而不會逾時。 在它們所屬的地方建立作業：在您的程式碼庫中。像您已經習慣的那樣進行版本控制、本地主機、測試、審查和部署。 您可以選擇在自己的基礎架構上使用觸發器雲端或自架觸發器。 閱讀文件中的[快速入門指南](https://trigger.dev/docs/v3/quick-start)。 - 💰 獲得總資金 300 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Trigger 在 GitHub 上有 7,500 顆星，目前已發布`v3.1`版本。 https://github.com/triggerdotdev/trigger.dev 星觸發器 ⭐️ --- 17. [Tiptap](https://github.com/ueberdosis/tiptap) - 無頭富文本編輯器框架。 ---------------------------------------------------------------- ![尖擊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdtmi7do65ks6f2mpsjd.png) Tiptap 編輯器是一個無頭、與框架無關的富文本編輯器，可以透過擴充功能進行自訂和擴充。它的無頭性質意味著它沒有固定的使用者介面，提供完全的設計自由（要快速入門，請參閱下面連結的 UI 模板）。 Tiptap 是基於高度可靠的 ProseMirror 庫。 Tiptap Editor 得到協作開源後端 Hocuspocus 的補充。 Editor 和 Hocuspocus 構成了 Tiptap Suite 的基礎。 我建議閱讀包含[範例](https://tiptap.dev/docs/editor/examples/default)和詳細程式碼的[文件](https://tiptap.dev/docs/editor/introduction)。 - 💰 獲得總資金 260 萬美元。 - 🚀 使用的主要語言是 TypeScript。 ![尖擊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20c83ios6ugr1q6blqfq.png) Tiptap 在 GitHub 上擁有超過 24k 顆星，擁有 300 多名貢獻者。 https://github.com/ueberdosis/tiptap 明星 Tiptap ⭐️ --- 18. [Infisical](https://github.com/Infisical/infisical) - 秘密管理平台。 ----------------------------------------------------------------- ![內部的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrolzjdnkky1r694h9av.png) Infisical 是一個開源秘密管理平台，團隊可以用它來集中 API 金鑰、資料庫憑證和設定等秘密。 他們讓每個人（而不僅僅是安全團隊）都可以更輕鬆地進行秘密管理，這意味著從頭開始重新設計整個開發人員體驗。 ![內部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3eu288l470du91b66pd.png) Infisical 還提供了一組工具來自動防止 git 歷史記錄的秘密洩露。可以使用預提交掛鉤或透過與 GitHub 等平台直接整合在 Infisical CLI 層級上設定此功能。 您可以閱讀[文件](https://infisical.com/docs/documentation/getting-started/introduction)並檢查如何[安裝 CLI](https://infisical.com/docs/cli/overview) ，這是使用它的最佳方式。 在使用整個原始程式碼之前一定要檢查他們的[許可證](https://github.com/Infisical/infisical/blob/main/LICENSE)，因為他們有一些受 MIT Expat 保護的企業級程式碼，但不用擔心，大部分程式碼都是免費使用的。 - 💰 獲得總資金 290 萬美元。 - 🚀 使用的主要語言是 TypeScript。 他們在 GitHub 上擁有超過 12,500 顆星，發布了 130 多個版本。另外，Infiscial CLI 的安裝次數超過 540 萬次，因此非常值得信賴。 https://github.com/Infisical/infisical 明星 Infisical ⭐️ --- 19. [HyperDX](https://github.com/hyperdxio/hyperdx) - 統一會話重播、日誌、指標、追蹤和錯誤的可觀察平台。 ------------------------------------------------------------------------------- ![超DX](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6r38lckflg0wmwlq6i4.png) HyperDX 透過將日誌、指標、追蹤、異常和會話重播集中並關聯到一處，幫助工程師快速找出生產中斷的原因。 Datadog 和 New Relic 的開源且開發人員友善的替代方案。閱讀[文件](https://www.hyperdx.io/docs)。 ![超DX](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g83r7408vr2oawc8s8p.png) - 💰 獲得總計 50 萬美元的資金。 - 🚀 使用的主要語言是 TypeScript。 HyperDX 在 GitHub 上擁有超過 6k 顆星。 https://github.com/hyperdxio/hyperdx 明星 HyperDX ⭐️ --- 20.[亮點](https://github.com/highlight/highlight)－全端監控平台。 ------------------------------------------------------- ![強調](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p2ecjnrwbtskuqrkjv7.png) highlight.io 是為下一代開發人員（像您一樣！）提供的監控工具。與現有的古老、過時的工具不同，它們的目標是建立一個有凝聚力的、現代的、功能齊全的監控解決方案。 ![支援框架](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afaoao8954hobs7d2igw.png) - 💰 獲得總資金 850 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Highlight 在 GitHub 上有超過 7k 顆星。 https://github.com/highlight/highlight 星標亮點 ⭐️ --- 21. [Panora](https://github.com/panoratech/Panora) - 在幾分鐘內將整合目錄新增至您的 SaaS 產品。 ----------------------------------------------------------------------------- ![全景](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzhhyl8t0xy2ueln8d4t.png) Panora 協助您將產品置於客戶日常工作流程的核心。 您的客戶希望他們的所有工具都能很好地協同工作。 Panora 避免您的團隊花費數百小時來建立和維護集成，而不是核心產品。 查看[快速入門指南](https://docs.panora.dev/quick-start)。 - 💰 獲得了 50 萬美元的總資金（可能更多）。 - 🚀 使用的主要語言是 TypeScript。 Panora 在 GitHub 上擁有 300 多個 star，並且處於非常早期的階段。 https://github.com/panoratech/Panora 明星 Panora ⭐️ --- 22. [Fleet](https://github.com/fleetdm/fleet) - IT、安全和基礎設施團隊的平台。 ---------------------------------------------------------------- ![艦隊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d47vi9uyn2hq3kx6s2h6.png) 針對擁有數千台電腦的 IT 和安全團隊的開源平台。專為 API、GitOps、webhooks、YAML 和人類而設計。 Fastly 和 Gusto 等組織使用 Fleet 進行漏洞報告、偵測工程、裝置管理 (MDM)、裝置運作狀況監控、基於狀態的存取控制、管理未使用的軟體授權等。 ![艦隊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfn75mjk5rfhb4bfjwp8.png) - 💰 獲得總資金 2500 萬美元。 - 🚀 使用的主要語言是 Go。 Fleet 在 GitHub 上擁有 2,500 顆星。 https://github.com/fleetdm/fleet 星際艦隊 ⭐️ --- 23. [Ballerine](https://github.com/ballerine-io/ballerine) - 用於風險決策的基礎設施和資料編排平台。 -------------------------------------------------------------------------------- ![舞者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnnrhyf6oj3dexdeyyuf.png) Ballerine 是一種開源風險管理基礎設施，可協助全球支付公司、市場和金融科技公司在整個客戶生命週期中自動為商家、賣家和使用者做出決策。 從開戶（KYC、KYB）、承銷和交易監控，使用靈活的規則和工作流程引擎、第 3 方插件系統、手動審核後台以及文件和資訊收集前端流程。 - 💰 獲得總資金 550 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Ballerine 在 GitHub 上擁有 2000 顆星，發布了 700 多個版本。 https://github.com/ballerine-io/ballerine 明星芭蕾舞者 ⭐️ --- 24. [Tooljet](https://github.com/ToolJet/ToolJet) - 用於建立業務應用程式的低程式碼平台。 ---------------------------------------------------------------------- ![工具噴射器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhipvjl2wnthjccgrpij.png) 我們都建立前端，但它通常非常複雜，並且涉及許多因素。這樣可以省去很多麻煩。 ToolJet 是一個開源低程式碼框架，可以用最少的工程工作來建置和部署內部工具。 ToolJet 的拖放式前端建構器可讓您在幾分鐘內建立複雜的響應式前端。 您可以整合各種資料來源，包括PostgreSQL、MongoDB、Elasticsearch等資料庫；具有 OpenAPI 規範和 OAuth2 支援的 API 端點； SaaS 工具，例如 Stripe、Slack、Google Sheets、Airtable 和 Notion；以及 S3、GCS 和 Minio 等物件儲存服務來取得和寫入資料。一切 ：） 這就是 Tooljet 的工作原理。 ![工具噴射器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6vv09z7ioma1ce2ttei.png) 您可以在 ToolJet 中開發多步驟工作流程以自動化業務流程。除了建置和自動化工作流程之外，ToolJet 還可以在您的應用程式中輕鬆整合這些工作流程。 ![工作流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eh2vk3kih9fhck6okf67.png) 您可以閱讀[文件](https://docs.tooljet.com/docs/)並查看[操作指南](https://docs.tooljet.com/docs/how-to/use-url-params-on-load)。 - 💰 獲得總融資 620 萬美元（GitHub 是其中一名投資者）。 - 🚀 使用的主要語言是 JavaScript。 Tooljet 在 GitHub 上擁有超過 27,800 顆星和 500 多名貢獻者。 https://github.com/ToolJet/ToolJet Star Tooljet ⭐️ --- 25. [Mattermost－](https://github.com/mattermost/mattermost)整個軟體開發生命週期的安全協作。 --------------------------------------------------------------------------- ![最重要的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43p8f052h71ryhavrkms.png) Mattermost 是一個開源平台，用於在整個軟體開發生命週期中進行安全協作。 該儲存庫是 Mattermost 平台上核心開發的主要來源；它是用 Go 和 React 編寫的，並作為單一 Linux 二進位與 MySQL 或 PostgreSQL 一起執行。每個月 16 日都會在 MIT 許可下發布新的編譯版本。 - 💰 獲得總資金 7350 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Mattermost 在 GitHub 上擁有超過 28,400 顆星，有 600 多個活躍問題和 900 多個貢獻者。 https://github.com/mattermost/mattermost Star Mattermost ⭐️ --- 我很驚訝這麼多受資助的專案使用 TypeScript 而不是 JavaScript。你是？ 如果您知道任何其他資助專案或希望我製作第二部分。 請在評論中告訴我您最喜歡的清單。 祝你有美好的一天！直到下一次。 您可以加入我的開發者和技術作家社區，網址為[dub.sh/opensouls](https://dub.sh/opensouls) 。 關注 Taipy 以了解更多此類內容。 嵌入 https://dev.to/taipy --- 原文出處：https://dev.to/taipy/25-funded-projects-you-can-contribute-in-open-source-40lh

0個讚   0留言 58瀏覽

🙅 為什麼我不使用 AI 作為我的副駕駛 🤖

\*\*耶穌，掌管方向盤。 🚗 還有 Github Copilot，使用 IDE。 💻\*\* **[Github 表示](https://github.blog/2023-06-13-survey-reveals-ais-impact-on-the-developer-experience/)**，92% 的美國開發者都在使用 Copilot。 什麼。嚴重地？ 什麼時候聽過 92% 的人口使用單一事物？ 當然，除非…你說全世界**100%**的人都消耗過一氧化二氫。 *（這條線只有一種變黑的方式。不要去那裡。👀）* 和我一起快速旅行，我將談論： - [我真正擔心的是什麼。](#what-im-actually-worried-about) - [其他經驗豐富的開發人員對此有何看法？](#from-the-experienced-devs-point-of-view) - [也許我什麼都不擔心？](#lets-take-a-step-back-for-a-moment) - [以及我們如何對我們如何使用LLMs負責！](#where-the-heck-does-llmai-fit-in) ### 🔥 當機器在 2024 年佔領世界時 經過谷歌快速搜尋後，似乎大多數開發人員都在使用人工智慧輔助來編寫程式碼。如果我說我根本沒有使用人工智慧來編寫程式碼，**那我就是在撒謊**。當然，我有。我並不住在岩石下。 我發現開發人員對與第三方雲端服務共享程式碼相關資料的想法感到奇怪，這些第三方雲端服務通常沒有 SOC2（或類似的東西）認證，並且充其量只能做出模糊且無法證明的隱私聲明。 Github Copilot（和 Copilot 聊天）、Bito.ai 以及 VS Code 市場上的其他幾個 AI 程式碼擴充的安裝量已超過 3000 萬。瘋狂的！ 🤯 然後是我。**我還沒有將人工智慧輔助**納入我的常規程式碼工作流程中。當然，我有幾次在 GPT 的幫助下編寫了一些樣板檔案。但那些時候是個例外。像 Github Copilot 這樣的東西，或任何類型的程式碼審查、程式碼產生工具、PR 建立或提交協助，都不屬於我的 IDE 或 CLI 流程的一部分。 也許它會隨著時間而改變。我們拭目以待。 > ## “但為什麼？” ![但為什麼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpc1fc4t5a10j0i5r3wj.gif) ### 😟我真正擔心的是 答案很簡單。 👇 #### 1.我擔心我的程式設計技能會生疏 我擔心如果我太習慣人工智慧的幫助，我編寫和閱讀程式碼的方式將會受到影響。 - 我擔心我會開始**忽略**程式碼中的缺陷，否則我可以發現這些缺陷。 - 我將開始認為人工智慧產生的程式碼是**理所當然的**。 - 尋找 API、內建方法或其他文件將開始變得像一件**苦差事**。 我擔心……我會開始滑倒。 #### 2. 我不願意與第三方服務分享我的所有程式碼 公司可以非常聰明地從你提供的資料中推斷出一些事情。有時他們會知道[你的家人不知道的](https://www.forbes.com/sites/kashmirhill/2012/02/16/how-target-figured-out-a-teen-girl-was-pregnant-before-her-father-did/)事。 敏感的業務邏輯可能會洩漏給第三方服務，最終可能會被用來做出我不滿意的推論，或者只是…直接洩漏？我的意思是，軟體總是被駭客攻擊。 我認為我很合理地認為我不想以不受限制的方式向第三方公司公開像程式碼這樣敏感的東西。即使那家公司是微軟，[因為即使他們也搞砸了](https://www.wired.com/story/total-recall-windows-recall-ai/)。 ### 👀 從經驗豐富的開發人員的角度來看 這也不是我獨有的想法！ #### 1. 經驗豐富的開發人員往往**不想依賴**「拐杖」來寫程式碼。 我甚至很高興與不想在 IDE 上使用彩色主題的高級開發人員合作，因為他們認為這會損害他們掃描、閱讀或偵錯程式碼的能力！ （這對我來說也有點太多了） 畢竟，「程式設計技能」**不僅僅是編寫程式碼**。 #### 2. 老開發者看過各種**軟體被駭**、資料外洩等。 我的意思是，十多年來， [haveibeenpwned.com](https://haveibeenpwned.com/)每年都會向您發送有關您的憑證、電子郵件和其他資料外洩的電子郵件…很多時候來自[價值數十億](https://en.wikipedia.org/wiki/2017_Equifax_data_breach)[美元的](https://www.news18.com/india/indias-biggest-data-leak-so-far-covid-19-test-info-of-81-5cr-citizens-with-icmr-up-for-sale-exclusive-8637743.html)[公司](https://www.nytimes.com/2017/10/03/technology/yahoo-hack-3-billion-users.html)… 當你無數次聽到**「當你不為產品付費時，你就是產品」** ，然後又得到另一家將資料出售給第三方的公司的支持... 是啊……會很累。 只需斷開盡可能多的電線即可輕鬆回到石器時代。 > ![老馬特達蒙](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03pmbpqix6e199ewey5t.gif) > “老開發人員”？我是……我變老了嗎？ > 不，我才 22 歲，現在已經是 2016 年了……對吧？正確的？ **順便說一句，標題中問題的答案是👆這個。**恭喜！貼文結束了！轉到下一個… Buuuuut…如果你想繼續閱讀… ![喬伊還有更多](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk0ywd7yjqukeokd0t2d.gif) ### 🚶 讓我們退後一步...... #### 我認為我的擔心可能被誇大了。 > *現在讓我們把整個資料隱私的角度放在一邊，因為這本身就是一個我非常熱衷的另一個主題。* 我個人沒有足夠的資料來經驗說使用人工智慧輔助會帶來我擔心的厄運……它會將我從今天的樣子降級為[SDE1](https://dev.to/middleware/going-from-sde1-to-sde2-and-beyond-what-it-actually-takes-1cld) 。 但我已經看到了模式。 - 我見過人工智慧生成的低於標準品質的程式碼經過程式碼審查並最終出現在`main`分支上。 - 我見過一些函式庫函數在沒有正確理解存在什麼或存在什麼替代方案的情況下被使用，只是因為LLMs產生了它。 - 我什至見過為解決某個問題而生成的程式碼，對於該問題，程式碼庫中已經存在一個實用程式函數，但沒有使用它，因為知道這個實用程式的存在比要求GPT 為您生成它要多得多的工作。 ### 💎 ~~鑽石是~~ 糟糕的程式碼是永遠的 **“等一下……我以前看過這部電影！”** ![似曾相識](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvun4635neb2dflv5yto.gif) - LLM 是一個相當新的事物…但是💩程式碼是**永恆的！** - 每一個。單身的。開發。曾經。在沒有完全**理解**或尋找替代方案的情況下使用了函式庫函數。你和我都對此有罪。 （什麼？您認為`Array.prototype.sort`是對任何內容進行排序的最佳方式？在大多數情況下它就足夠了！） - 一段邏輯總是被重新發明（重新複製貼上）！只是之前它來自**StackOverflow** ，現在它來自 ChatGPT 。 ### 🤷 那麼，有什麼好大驚小怪的呢？ > “使用 ChatGPT 會讓我成為一個糟糕的程式設計師嗎？” 我想不是。 重點是您只需要關心您建立的內容。 為您所**建造的**東西感到**自豪**。 ### 🤖 LLM/AI 到底適合什麼？ **LLM 本身並不是邪惡的。** 事實上，如果負責任地使用它們，它們會非常有用： - **品質程式碼：**LLMs可能會處理不太勤奮的開發人員不會考慮的邊緣情況。 - **綜合測試：**LLMs可能會編寫比某些開發人員編寫的測試更全面的測試。 - **綜合類型：**它甚至可能比普通開發人員自己編寫的類型或可能具有編寫技能的類型更「完整」地編寫類型。 然而，開發人員有責任確保程式碼輸出受到保護和良好監控。一個不在乎的人在歷史上的任何時候都會做得很糟糕。LLMs的存在並沒有改變這一點。 ### 😎 真正給予 a\*ck 的藝術 有很多開發者對此並不關心。 但你不是這樣的開發者。**你確實關心。** 否則你就不會在這裡開發並學習人們的經驗。 我最近寫了一篇關於新開發人員在職涯中應該關心什麼成長的文章。它不僅僅是程式碼。 https://dev.to/middleware/going-from-sde1-to-sde2-and-beyond-what-it-actually-takes-1cld **也許我會在 VSCode 中引入一些 AI。** 我認為這只是時間問題，而不是**是否有問題**。 更重要的是……只要我關心確保我的程式輸出**可讀、高效能、高品質且易於審查**，我想我會沒事的，你也一樣。 --- ### 👇 PS 如果您想要一個我非常關心的範例，並且具有出色的程式碼 💪 和…不太出色的程式碼 🤣，請查看我們的**開源**儲存庫！ 它可以讓您了解交付程式碼需要多長時間、PR 陷入審查循環的次數以及您的團隊交付程式碼的整體情況。 https://github.com/middlewarehq/middleware --- 原文出處：https://dev.to/middleware/why-i-dont-use-ai-as-my-copilot-47k3

0個讚   0留言 39瀏覽

如何使用 Ollama 和打開 WebUI 在本地執行 Llama 3

https://youtu.be/GT-Fwg124-I 我是 Llama 的忠實粉絲。 Meta 發布其 LLM 開源程式碼對整個科技界來說是一項淨收益，其寬鬆的許可證允許大多數中小型企業在幾乎沒有任何限制的情況下使用其 LLM（當然，在法律範圍內）。他們的最新版本是備受期待的 Llama 3。 Llama 3 有兩種大小：80 億和 700 億參數。這種模型經過大量文字資料的訓練，可用於各種任務，包括生成文字、翻譯語言、編寫不同類型的創意內容以及以資訊豐富的方式回答您的問題。 Meta 宣稱 Llama 3 是最好的開放模型之一，但它仍在開發中。這是與 Mistral 和 Gemma 相比的 8B 模型基準（根據 Meta）。 ![基準測試](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax9r9z2w2zghv81grbh7.png) 這就引出了一個問題：作為一個普通人，我如何在我的電腦上本地執行這些模型？ 開始使用 Ollama ----------- 這就是[奧拉瑪](https://ollama.com/)登場的地方！ Ollama 是一款免費的開源應用程式，可讓您在自己的電腦上執行各種大型語言模型，包括 Llama 3，即使資源有限。 Ollama 利用了 llama.cpp 的效能提升，llama.cpp 是一個開源程式庫，旨在允許您以相對較低的硬體要求在本地執行 LLM。它還包括一種套件管理器，使您只需一個命令即可快速有效地下載和使用 LLM。 第一步是[安裝 Ollama](https://ollama.com/download) 。它支援所有 3 個主要作業系統，其中[Windows 是「預覽版」](https://ollama.com/blog/windows-preview) （更好的說法是「測試版」）。 安裝完成後，打開您的終端。在所有平台上，命令都是相同的。 ``` ollama run llama3 ``` 等待幾分鐘，它會下載並載入模型，然後開始聊天！它應該會帶您進入與此類似的聊天提示。 ``` ollama run llama3 >>> Who was the second president of the united states? The second President of the United States was John Adams. He served from 1797 to 1801, succeeding George Washington and being succeeded by Thomas Jefferson. >>> Who was the 30th? The 30th President of the United States was Calvin Coolidge! He served from August 2, 1923, to March 4, 1929. >>> /bye ``` 您可以在這個終端聊天中整天聊天，但是如果您想要更像 ChatGPT 的東西怎麼辦？ 打開網頁介面 ------ Open WebUI 是一個可擴充的、自架的 UI，完全在[Docker](https://docs.docker.com/desktop/)內部運作。它可以與 Ollama 或其他 OpenAI 相容的 LLM 一起使用，例如 LiteLLM 或我自己的[Cloudflare Workers OpenAI API](https://github.com/chand1012/openai-cf-workers-ai) 。 假設您的電腦上已經執行了[Docker](https://docs.docker.com/desktop/)和 Ollama，[安裝](https://docs.openwebui.com/getting-started/#quick-start-with-docker-)非常簡單。 ``` docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main ``` 只要造訪 http://localhost:3000，建立帳戶，然後開始聊天！ ![OpenWebUI 範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdi1d35zh09s78o8vqvb.png) 如果您之前沒有執行過 Llama 3，則必須先關閉一些模型才能開始聊天。最簡單的方法是點擊左下角您的名字後點擊設定圖示。 ![設定](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqyetksyn0y4a0p12ylu.png) 然後點擊模式左側的“模型”，然後貼上[Ollama 註冊表](https://ollama.com/models)中的模型名稱。以下是我推薦用於一般用途的一些模型。 - `llama3` - `mistral` - `llama2` ![機型設定頁面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txc581jf4w3xszymjfbg.png) 奧拉馬 API ------- 如果您想將 Ollama 整合到您自己的專案中，Ollama 提供自己的 API 以及 OpenAI 相容 API。 API 會自動將本機儲存的 LLM 載入到記憶體中，執行推理，然後在一定的逾時後卸載。您必須先拉取您想要使用的任何模型，然後才能透過 API 執行模型，這可以透過命令列輕鬆完成。 ``` ollama pull mistral ``` ### 奧拉馬 API Ollama 有自己的 API，其中還有[一些用於 Javascript 和 Python 的 SDK](https://github.com/ollama/ollama?tab=readme-ov-file#libraries) 。 以下是如何使用 API 進行簡單的文字產生推理。 ``` curl http://localhost:11434/api/generate -d '{ "model": "mistral", "prompt":"Why is the sky blue?" }' ``` 以下是如何使用 API 進行聊天產生推論。 ``` curl http://localhost:11434/api/chat -d '{ "model": "mistral", "messages": [ { "role": "user", "content": "why is the sky blue?" } ] }' ``` 將`model`參數替換為您要使用的任何模型。請參閱[官方 API 文件](https://github.com/ollama/ollama/blob/main/docs/api.md)以取得更多資訊。 ### OpenAI 相容 API 您也可以使用 Ollama 作為 OpenAI 庫的替代品（取決於用例）。這是[他們文件](https://github.com/ollama/ollama/blob/main/docs/openai.md)中的一個範例。 ``` # Python from openai import OpenAI client = OpenAI( base_url='http://localhost:11434/v1/', # required but ignored api_key='ollama', ) chat_completion = client.chat.completions.create( messages=[ { 'role': 'user', 'content': 'Say this is a test', } ], model='mistral', ) ``` 這也適用於 JavaScript。 ``` // Javascript import OpenAI from 'openai' const openai = new OpenAI({ baseURL: 'http://localhost:11434/v1/', // required but ignored apiKey: 'ollama', }) const chatCompletion = await openai.chat.completions.create({ messages: [{ role: 'user', content: 'Say this is a test' }], model: 'llama2', }) ``` 結論 -- Meta 的 Llama 3 的發布及其大型語言模型 (LLM) 技術的開源標誌著技術社群的一個重要里程碑。現在，透過 Ollama 和 Open WebUI 等本地工具可以存取這些先進的模型，普通個人可以挖掘其巨大潛力來生成文字、翻譯語言、創作創意寫作等。此外，API 的可用性使開發人員能夠將 LLM 無縫整合到新專案或增強現有專案。最終，LLM 技術透過 Llama 3 等開源專案實現民主化，釋放了廣泛的創新可能性，並激發了科技業的創造力。 --- 原文出處：https://dev.to/timesurgelabs/how-to-run-llama-3-locally-with-ollama-and-open-webui-297d

0個讚   0留言 227瀏覽

我發現的很酷的 VSCode 擴展

最近，我重新審視了去年放棄的 React 副專案。在此過程中，我發現了一些重要的 VSCode 擴展，這些擴展顯著提高了我作為 React 開發人員的工作效率。此清單的唯一規則是所有這些擴充都是**React 特定的**。雖然它們可能對其他目的有用，但它們的主要焦點是 React。 那麼，讓我們深入了解一下。 ![我們走吧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/opxot6h4u0sxgm9zp3yq.gif) --- 這些擴充功能將透過為您提供片段來提供幫助。***程式碼片段***是預先定義的程式碼片段，只需一次按鍵（*大多數情況下按 Tab 鍵*）即可擴充為完整的程式碼區塊。這些片段的範圍可以從單行到整個文件。透過使用片段，您可以將整個檔案壓縮為簡短的縮寫，使您的編碼體驗更加順暢。 ### **1.ES7 React/Redux/GraphQL/React-Native 片段** ![ES7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqxpf64yy8a7zpfcpgcg.png) 此擴充功能提供了 React、Redux、GraphQL 和 React Native 的全面片段集合。這些片段可讓您快速產生常用的程式碼結構，從而顯著加快您的開發流程。例如： - `rcc`建立一個 React 類別元件骨架。 - `rfc`產生一個 React 功能元件。 - `rnfce`片段可協助您快速設定具有預設匯出的 React Native 元件。 - *這個清單是無窮無盡的*。[在這裡](https://github.com/r5n-dev/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md)探索 這些片段是高度可自訂的，涵蓋廣泛的用例，使您的開發更加高效。 ### **2.React Hooks 片段** ![鉤子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ulwbak9qamtc3846llm.png) React Hooks 程式碼片段擴充功能透過提供特定的縮寫來簡化在 React 中加入鉤子： - `ush` for `useState`初始化一個狀態變數。 - `ueh` for `useEffect`設定副作用。 - `uch` for `useContext`存取上下文。 這個擴充特別有用，因為它專注於 React 的 hooks API，這是功能元件的核心功能。它可以幫助您快速實現鉤子，而不必每次都記住確切的語法。 ### **3.VSCode React 重構** ![重構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tucj03fncc4btoltsxm4.png) VSCode React Refactor 可讓您透過將部分程式碼提取到單獨的元件中來重構程式碼。當您的元件變得太大並且您希望將其分解為更小、更易於管理的部分時，這尤其有用。例如： - 選擇一段 JSX 程式碼。 - 右鍵單擊並選擇“重構”。 - 將其提取到新元件中。 此擴充功能支援 TypeScript 並確保正確導入和使用提取的元件，從而簡化您的重構過程。 ### **4. 將 JSON 貼為程式碼** ![json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cflc9kcid3tvfitmlzg8.png) 將 JSON 貼上為程式碼可讓您將 JSON 物件轉換為程式碼。這在處理傳回 JSON 回應的 API 時特別有用。例如： - 複製 JSON 物件。 - 使用命令選項板選擇“將 JSON 貼上為程式碼”。 - 將 JSON 轉換為具有類型定義的 JavaScript 或 TypeScript 程式碼。 此擴充功能有助於快速將 JSON 資料轉換為可用的程式碼結構，從而節省時間並減少錯誤。 ### **5.SVG圖庫** ![svg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ioelbe4mk13mk7y2ld0.png) SVG Gallery 是用於管理專案中的 SVG 檔案的絕佳工具。它允許您直接在 VSCode 中預覽 SVG 文件，這在處理多個 SVG 資源時特別方便。特點包括： - 在編輯器中預覽 SVG。 - 將 SVG 內容複製為 React 元件。 - 有效地組織和管理您的 SVG 資源。 此擴充簡化了使用 SVG 檔案的流程，讓您更輕鬆地在 React 專案中整合和管理向量圖形。 --- 雖然上述建議來自我的主觀觀點和個人對這些擴充功能的體驗，但我強烈建議您親自安裝和體驗它們。每個開發人員都有獨特的需求和工作流程，這些擴充功能可能會以不同的方式適合您的專案。 我鼓勵您分享一些可以提高您的工作效率的很酷的擴充功能。請記住，這些並不是唯一的擴展，我一直在尋找新工具來改善我的工作流程。 *這給我們帶來了一個發人深省的問題：**我們是否透過嚴重依賴這些擴充功能而創造了懶惰的程式設計師，或者我們是否真正提高了生產力和效率？**分享您的想法和經驗。讓我們討論一下這些工具是更好發展的拐杖還是催化劑。* 直到下次！ ![乾杯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruau6ij81iaqqoyjlzm1.jpeg) --- 原文出處：https://dev.to/mitchiemt11/cool-vscode-extensions-that-that-ive-discovered-12mg

0個讚   0留言 64瀏覽

使用 NextJS 建立電子商務商店

在本教程中，您將學習如何建立電子商務商店，客戶可以在其中透過 Stripe 購買產品並付款。成功付款後，將向客戶發送電子郵件通知，並向管理員用戶發送應用程式內通知。管理員用戶也可以在應用程式中建立和刪除產品。 為了建立這個應用程式，我們將使用以下工具： - [Appwrite](https://appwrite.io/) - 用於驗證使用者身份，以及保存和檢索產品詳細資訊。 - [Next.js](https://nextjs.org/) - 用於建立應用程式的使用者介面和後端。 - [Novu](https://docs.novu.co/getting-started/introduction) - 用於發送電子郵件和應用程式內通知。 - [React Email](https://react.email/docs/introduction) - 用於建立電子郵件範本。 - [Stripe](https://docs.stripe.com/) - 用於將付款結帳整合到應用程式中。 ![應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t02iyysrqjfqw8imuqxn.png) --- 使用 Next.js 建立應用程式介面 ------------------- 應用程式頁面根據指派給使用者的角色分為兩部分。客戶可以在付款前存取主頁並登入應用程式。管理員使用者可以存取所有頁面，包括登入頁面和儀表板頁面，他們可以在其中新增和刪除產品。 現在，讓我們建立應用程式。 ![https://media1.giphy.com/media/iopxsZtW2QVRs4poEC/giphy.gif?cid=7941fdc6aot3qt7vvq4voh5c1iagyusdpuga713m8ljqcqmd&ep=v1_gifs_searchiagyusdpuga713m8ljqcqmd&ep=v1_gifs_searchiagyusdpugagif&ct](https://media1.giphy.com/media/iopxsZtW2QVRs4poEC/giphy.gif?cid=7941fdc6aot3qt7vvq4voh5c1iagyusdpuga713m8ljqcqmd&ep=v1_gifs_search&rid=giphy.gif&ct=g) 透過執行以下程式碼片段來建立一個新的 Next.js Typescript 專案： ``` npx create-next-app novu-store ``` 接下來，安裝[React Icons](https://react-icons.github.io/react-icons)和[Headless UI](https://headlessui.com/)包。 React Icons 允許我們在應用程式中使用各種圖標，而 Headless UI 則提供易於使用的現代 UI 元件。 ``` npm install react-icons @headlessui/react ``` 將此程式碼片段從[GitHub 儲存庫](https://github.com/dha-stix/ecom-store-with-nextjs-appwrite-novu-and-stripe/blob/main/src/app/page.tsx)複製到`app/page.tsx`檔案中。它在螢幕上呈現產品列表，並允許用戶選擇購物車中的商品，類似於下圖。 ![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dj69givzhqfapgsg12rk.gif) 建立登入路由，使用戶能夠使用其 GitHub 帳戶進行簽署。將下面的程式碼片段複製到`app/login/page.tsx`檔案中。 ``` //👉🏻 create a login folder containing a page.tsx file export default function Home() { const handleGoogleSignIn = async () => {}; return ( <main className='w-full min-h-screen flex flex-col items-center justify-center'> <h2 className='font-semibold text-3xl mb-2'>Customer Sign in</h2> <p className='mb-4 text-sm text-red-500'> You need to sign in before you can make a purchase </p> <button className='p-4 border-[2px] border-gray-500 rounded-md hover:bg-black hover:text-white w-2/3' onClick={() => handleGoogleSignIn()} > Sign in with GitHub </button> </main> ); } ``` ![客戶登入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nh2rowpfg4hgksj5diy.png) 當使用者點擊「登入」按鈕時，會將他們重新導向到 GitHub 驗證頁面並提示他們登入應用程式。您很快就會了解如何使用[Appwrite](https://appwrite.io/)執行此操作。 接下來，讓我們建立管理頁面。在`app`資料夾中新增包含`login`和`dashboard`路由的`admin`資料夾。 ``` cd app mkdir admin && cd admin mkdir dashboard login ``` 在`dashboard`和`login`資料夾中新增`page.tsx`文件，並將下面的程式碼片段複製到`login/page.tsx`檔案中。 ``` "use client"; import Link from "next/link"; import { useState } from "react"; export default function Login() { const [email, setEmail] = useState<string>(""); const [password, setPassword] = useState<string>(""); const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); console.log({ email, password }); }; return ( <main className='w-full min-h-screen flex flex-col items-center justify-center'> <h2 className='font-semibold text-3xl mb-4'> Admin Sign in</h2> <form className='w-2/3' onSubmit={handleLogin}> <label htmlFor='email' className='block'> Email </label> <input type='email' id='email' className='w-full px-4 py-3 border border-gray-400 rounded-sm mb-4' required value={email} placeholder='[email protected]' onChange={(e) => setEmail(e.target.value)} /> <label htmlFor='password' className='block'> Password </label> <input type='password' id='password' className='w-full px-4 py-3 border border-gray-400 rounded-sm mb-4' required value={password} placeholder='admin123' onChange={(e) => setPassword(e.target.value)} /> <button className='p-4 text-lg mb-3 bg-blue-600 text-white w-full rounded-md'> Sign in </button> <p className='text-sm text-center'> Not an Admin?{" "} <Link href='/login' className='text-blue-500'> Sign in as a Customer </Link> </p> </form> </main> ); } ``` 上面的程式碼片段呈現一個表單，該表單接受管理員的電子郵件和密碼，驗證憑證，然後將使用者登入應用程式中。 ![管理員登入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjd9wsi63t96d5cls9om.png) 管理儀表板頁面呈現可用的產品，並允許管理員使用者在應用程式中新增和刪除產品。將此[程式碼片段複製](https://github.com/dha-stix/ecom-store-with-nextjs-appwrite-novu-and-stripe/blob/main/src/app/admin/dashboard/page.tsx)到`dashboard/page.tsx`檔案中以建立使用者介面。 ![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1gd1uq1eq6n76fesjxu.gif) 恭喜！您已經建立了應用程式介面。在接下來的部分中，您將了解如何將應用程式連接到 Appwrite 後端並在客戶端和伺服器之間發送資料。 --- 如何將 Appwrite 新增到 Next.js 應用程式 ----------------------------- Appwrite 是一項開源後端服務，可讓您建立安全且可擴展的軟體應用程式。它提供多種身份驗證方法、安全性資料庫、文件儲存、雲端訊息傳遞等功能，這些對於建立全端應用程式至關重要。 在本部分中，您將了解如何設定 Appwrite 專案，包括身份驗證、資料庫和檔案儲存等功能。 首先，請造訪[Appwrite Cloud](https://cloud.appwrite.io/register) ，並為您的專案建立一個帳戶和組織。 接下來，建立一個新專案並選擇您的首選區域來託管該專案。 ![應用程式寫入1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/as6302olk60oklfo70x5.png) 選擇`Web`作為應用程式的平台 SDK。 ![應用程式編寫2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bb5ae82i9fyoyrowsy96.png) 請依照螢幕上顯示的步驟進行操作。由於您目前正在開發模式下建置，因此您可以使用通配符 ( `*` ) 作為主機名，並在部署應用程式後將其變更為您的網域名稱。 ![應用程式寫入3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5ccs0hzgs9ujf5lzh83.png) 在 Next.js 專案中安裝 Appwrite 用戶端 SDK。 ``` npm install appwrite ``` 最後，在 Next.js 應用程式資料夾中建立一個`appwrite.ts`文件，並將下面的程式碼片段複製到該文件中以初始化 Appwrite。 ``` import { Client, Account, Databases, Storage } from "appwrite"; const client = new Client(); client .setEndpoint("https://cloud.appwrite.io/v1") .setProject(<YOUR_PROJECT_ID>); export const account = new Account(client); export const db = new Databases(client); export const storage = new Storage(client); ``` ### 使用 Appwrite 設定 GitHub 身份驗證 在這裡，您將了解如何使用 Appwrite 設定 GitHub 和電子郵件/密碼驗證。預設已配置電子郵件/密碼身份驗證，因此我們專注於設定 GitHub 身份驗證。 在繼續之前，您需要使用您的 GitHub 帳戶建立[GitHub OAuth 應用程式](https://github.com/settings/developers)。 Appwrite 將需要客戶端 ID 和金鑰來設定 GitHub 身份驗證。 ![GitHub 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9znk1yr7tffus7soitq2.png) 透過從側邊欄選單中選擇`Auth`並導覽至`Settings`選項卡，啟用 Appwrite 的 GitHub 驗證方法。 ![應用程式編寫4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43uo6nho1bz9su14zsno.png) 將您的 GitHub 用戶端 ID 和金鑰複製到 Appwrite 的 GitHub OAuth 設定中。 最後，確保將 Appwrite 產生的 URI 複製到 GitHub 應用程式設定中。 ![GitHub 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g75q5r5hc6l5pi09k88m.png) ### 設定 Appwrite 資料庫 從側邊欄選單中選擇資料庫並建立新資料庫。您可以將其命名為`novu store` 。 ![應用程式寫入5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7kn1llmu7olqirfcrpa.png) 接下來，建立`products`集合。它將包含應用程式中的產品清單。 ![應用程式寫入 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7p8laty6z37x0q1g6az4.png) 將名稱、價格和圖像屬性新增至集合。 ![應用程式寫入 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzom3ptlz8t1rh9dtt1k.png) 在「設定」標籤下，更新權限以允許每個使用者執行 CRUD 操作。但是，您可以在部署應用程式後變更此設置，以確保只有經過身份驗證的使用者才能執行各種操作。 ![應用程式寫入 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37cqr8s0crtcttocjagk.png) 最後，將專案、資料庫和集合 ID 複製到**`.env.local`**檔案中。這可以確保您的憑證安全，並允許您引用其環境變數中的每個值。 ``` NEXT_PUBLIC_PROJECT_ID=<YOUR_PROJECT_ID> NEXT_PUBLIC_DB_ID=<YOUR_DATABASE_ID> NEXT_PUBLIC_PRODUCTS_COLLECTION_ID=<YOUR_DB_COLLECTION_ID> ``` ### 設定應用程式寫入存儲 從側邊欄選單中選擇`Storage` ，然後建立新儲存桶來儲存所有產品影像。 ![應用程式編寫 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b84t9mk3k0wrkgiy4uca.png) 在`Settings`標籤下，更新「權限」以暫時允許任何使用者。 ![應用程式寫入 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zi3iozkaera7fohkwanm.png) 設定可接受的文件格式。由於我們上傳的是圖像，因此您可以選擇**`.jpg`**和**`.png`**檔案格式。 ![應用寫入 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzxqpoq5dcpokkvdcsce.png) 最後，將您的儲存桶 ID 複製到`.env.local`檔案中。 ``` NEXT_PUBLIC_BUCKET_ID=<YOUR_BUCKET_ID> ``` 恭喜！您已成功配置 Appwrite。我們現在可以開始與其各種功能進行互動。 --- 如何使用Appwrite執行CRUD操作 -------------------- 在本部分中，您將了解如何從 Appwrite 建立、檢索和刪除產品。用戶需要能夠在購買前查看現有產品，而管理員用戶應有權在應用程式中新增和刪除產品。 首先，在 Next.js **`app`**資料夾中建立一個**`utils.ts`**檔案。該文件將包含所有 Appwrite 資料庫交互，然後您可以將其導入到必要的頁面中。 ``` cd app touch utils.ts ``` ### 將產品儲存到 Appwrite 回想一下， `products`集合有三個屬性：名稱、圖像和價格。因此，在將產品新增至資料庫時，您需要先上傳產品的圖像，從回應中檢索其 URL 和 ID，然後將 URL 作為產品的圖像屬性上傳，使用圖像的儲存 ID 作為產品資料。 這是解釋這一點的程式碼片段： ``` import { db, storage } from "@/app/appwrite"; import { ID } from "appwrite"; export const createProduct = async ( productTitle: string, productPrice: number, productImage: any ) => { try { //👇🏻 upload the image const response = await storage.createFile( process.env.NEXT_PUBLIC_BUCKET_ID!, ID.unique(), productImage ); //👇🏻 get the image's URL const file_url = `https://cloud.appwrite.io/v1/storage/buckets/${process.env.NEXT_PUBLIC_BUCKET_ID}/files/${response.$id}/view?project=${process.env.NEXT_PUBLIC_PROJECT_ID}&mode=admin`; //👇🏻 add the product to the database await db.createDocument( process.env.NEXT_PUBLIC_DB_ID!, process.env.NEXT_PUBLIC_PRODUCTS_COLLECTION_ID!, response.$id, //👉🏻 use the image's ID { name: productTitle, price: productPrice, image: file_url, } ); alert("Product created successfully"); } catch (err) { console.error(err); } }; ``` 上面的程式碼片段將圖像上傳到 Appwrite 的雲端存儲，並使用儲存桶 ID、圖像 ID 和專案 ID 檢索準確的圖像 URL。圖片成功上傳後，其 ID 將用於產品資料中，以便輕鬆檢索和參考。 ### 從 Appwrite 檢索產品 若要從 Appwrite 取得產品，您可以在頁面載入時在 React **`useEffect`**掛鉤中執行下列函數。 ``` export const fetchProducts = async () => { try { const products = await db.listDocuments( process.env.NEXT_PUBLIC_DB_ID!, process.env.NEXT_PUBLIC_PRODUCTS_COLLECTION_ID! ); if (products.documents) { return products.documents; } } catch (err) { console.error(err); } }; ``` `fetchProducts`函數傳回`products`集合中的所有資料。 ### 從 Appwrite 中刪除產品 管理員使用者也可以透過產品 ID 刪除產品。 **`deleteProduct`**函數接受產品的 ID 作為參數，並從資料庫中刪除所選產品（包括其圖像），因為它們使用相同的 ID 屬性。 ``` export const deleteProduct = async (id: string) => { try { await db.deleteDocument( process.env.NEXT_PUBLIC_DB_ID!, process.env.NEXT_PUBLIC_PRODUCTS_COLLECTION_ID!, id ); await storage.deleteFile(process.env.NEXT_PUBLIC_BUCKET_ID!, id); alert("Product deleted successfully"); } catch (err) { console.error(err); } }; ``` --- 如何使用 Appwrite 驗證使用者身份 --------------------- 在前面的部分中，我們已經設定了 GitHub 身份驗證方法。在這裡，您將了解如何處理使用者登入應用程式。 若要使客戶能夠使用其 GitHub 帳戶登入應用程式，請在按一下`Sign in`按鈕時執行以下功能。該函數將使用者重定向到 GitHub，在那裡他們可以向應用程式授權或授予權限，然後登入應用程式： ``` import { account } from "../appwrite"; import { OAuthProvider } from "appwrite"; const handleGoogleSignIn = async () => { try { account.createOAuth2Session( OAuthProvider.Github, "http://localhost:3000", "http://localhost:3000/login" ); } catch (err) { console.error(err); } }; ``` 管理員使用者可以使用電子郵件和密碼登入應用程式。 Appwrite 在授予對應用程式儀表板的存取權之前會驗證憑證。 ``` import { account } from "@/app/appwrite"; const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); try { await account.createEmailPasswordSession(email, password); alert(`Welcome back 🎉`); router.push("/admin/dashboard"); } catch (err) { console.error(err); alert("Invalid credentials ❌"); } }; ``` Appwrite 還允許您取得目前使用者的資料。例如，如果只有經過身份驗證的使用者才能付款，您可以透過執行下面的程式碼片段來完成此操作。它會檢索目前使用者的資料，如果使用者未登錄，則傳回 null。 ``` import { account } from "@/app/appwrite"; useEffect(() => { const checkAuthStatus = async () => { try { const request = await account.get(); setUser(request); } catch (err) { console.log(err); } }; checkAuthStatus(); }, []); ``` --- 如何將 Stripe 付款結帳新增至 Next.js -------------------------- 在本節中，您將了解如何在應用程式中實現 Stripe 付款結帳。 Stripe 是一種流行的線上支付處理平台，可讓您建立產品並將一次性和定期支付方式整合到您的應用程式中。 首先，您需要[建立一個 Stripe 帳戶](https://dashboard.stripe.com/login)。您可以在本教學中使用測試模式帳戶。 ![條紋1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nibs7bxb09i167mxm918.png) 點擊頂部選單中的`Developers` ，然後從 API 金鑰選單中複製您的金鑰。 ![條紋2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up8757knbquc3k0577ps.png) 將您的 Stripe 金鑰貼到`.env.local`檔案中。 ``` STRIPE_SECRET_KEY=<your_secret_key> ``` 安裝[Stripe Node.js SDK](https://docs.stripe.com/libraries) 。 ``` npm install stripe ``` 接下來，在 Next.js `app`資料夾中建立一個`api`資料夾。 `api`資料夾將包含應用程式的所有 API 路由和端點。 ``` cd app mkdir api ``` 透過在`api`資料夾中新增`checkout`資料夾來建立`checkout`端點。 ``` cd api mkdir checkout && cd checkout touch route.ts ``` 將下面的程式碼片段複製到`route.ts`檔中。 ``` import { NextRequest, NextResponse } from "next/server"; import Stripe from "stripe"; const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!); export async function POST(req: NextRequest) { //👇🏻 accepts the customer's cart const cart = await req.json(); try { //👇🏻 creates a checkout session const session = await stripe.checkout.sessions.create({ payment_method_types: ["card"], line_items: cart.map((product: Product) => ({ price_data: { currency: "usd", product_data: { name: product.name, }, unit_amount: product.price * 100, }, quantity: 1, })), mode: "payment", cancel_url: `http://localhost:3000/?canceled=true`, success_url: `http://localhost:3000?success=true&session_id={CHECKOUT_SESSION_ID}`, }); //👇🏻 return the session URL return NextResponse.json({ session: session.url }, { status: 200 }); } catch (err) { return NextResponse.json({ err }, { status: 500 }); } } ``` 上面的程式碼片段建立了一個接受 POST 請求的結帳端點。它為客戶建立結帳會話並傳回會話 URL。 **`cancel_url`**和**`success_url`**確定完成或取消付款後將用戶重新導向到何處。 最後，當用戶決定為產品付款時，您可以透過執行以下程式碼片段將客戶的購物車發送到`/checkout`端點： ``` const processPayment = async (cart: Product[]) => { try { if (user !== null) { //👇🏻 saves cart to local storage localStorage.setItem("cart", JSON.stringify(cart)); //👇🏻 sends cart to /checkout route const request = await fetch("/api/checkout", { method: "POST", body: JSON.stringify(cart), headers: { "Content-Type": "application/json" }, }); //👇🏻 retrieves the session URL const { session } = await request.json(); //👇🏻 redirects the user to the checkout page window.location.assign(session); } else { //👇🏻 redirects unauthenticated users router.push("/login"); } } catch (err) { console.error(err); } }; ``` 上面的程式碼片段將購物車儲存到瀏覽器的本機儲存體並將其傳送到 API 端點，然後從後端伺服器檢索回應（會話 URL）並將使用者重新導向至 Stripe 結帳頁面。 ![條紋3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5hokf2qyqyey3kwsg9x.gif) --- 使用 Novu 發送應用程式內通知和電子郵件通知 ------------------------ [Novu](https://github.com/novuhq/novu)是第一個提供統一 API 的通知基礎架構，用於透過多種管道（包括應用程式內、推播、電子郵件、簡訊和聊天）發送通知。 在本部分中，您將了解如何將 Novu 加入到您的應用程式，以便您能夠發送電子郵件和應用程式內訊息。 首先，安裝所需的 Novu 軟體包： ``` npm install @novu/node @novu/echo @novu/notification-center ``` 當用戶進行購買時，他們將收到一封付款確認電子郵件，管理員用戶也會收到一條應用程式內通知。 為此，您需要[在 Novu 上建立帳戶](https://web.novu.co/auth/login)並設定主要電子郵件提供者。在本教程中，我們將使用[“重新發送”](https://resend.com/docs/introduction) 。 在 Novu 上建立帳戶後，建立一個[重新傳送帳戶](https://resend.com/docs/introduction)，然後從儀表板上的側邊欄選單中選擇`API Keys`來建立帳戶。 ![重新發送 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhehx7s45x180zpir1ti.png) 接下來，回到 Novu 儀表板，從側邊欄選單中選擇`Integrations Store` ，然後新增 Resend 作為電子郵件提供者。您需要將重新傳送 API 金鑰和電子郵件地址貼到必填欄位中。 ![新 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f03vb6nftyi8g790vg7m.png) 從側邊欄選單中選擇**「設定」** ，然後將您的`Novu API`金鑰和`App ID`複製到**`.env.local`**檔案中，如下所示。另外，將您的`subscriber ID`複製到其欄位中 - 您可以從`Subscribers`部分獲取此資訊。 ``` NOVU_API_KEY=<YOUR_API_FOR_NEXT_SERVER> NEXT_PUBLIC_NOVU_API_KEY=<YOUR_API_FOR_NEXT_CLIENT> NEXT_PUBLIC_NOVU_APP_ID=<YOUR_API_ID> NOVU_SUBSCRIBER_ID=<YOUR_API_FOR_NEXT_SERVER> NEXT_PUBLIC_NOVU_SUBSCRIBER_ID=<YOUR_API_FOR_CLIENT> ``` ![新2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voeofvvtv88pex9rpr1s.png) 最後，將 Novu 通知鈴新增至管理儀表板，以使管理員使用者能夠在應用程式內接收通知。 ``` import { NovuProvider, PopoverNotificationCenter, NotificationBell, } from "@novu/notification-center"; export default function AdminNav() { return ( <NovuProvider subscriberId={process.env.NEXT_PUBLIC_NOVU_SUBSCRIBER_ID!} applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_ID!} > <PopoverNotificationCenter colorScheme='light'> {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />} </PopoverNotificationCenter> </NovuProvider> ); } ``` ![儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m62ft87ue9orse2yww9z.png) --- 如何使用 Novu Echo 建立通知工作流程 ----------------------- [Novu](https://docs.novu.co/echo/quickstart)提供程式碼優先的工作流程引擎，讓您能夠在程式碼庫中建立通知工作流程。它允許您將電子郵件、簡訊、聊天範本和內容產生器（例如[React Email](https://react.email/docs/introduction)和[MJML](https://mjml.io/) ）整合到 Novu 中，以建立高級且強大的通知。 在本部分中，您將了解如何在應用程式中建立通知工作流程、如何使用 Novu 的電子郵件通知範本以及如何使用 Novu 發送應用程式內通知和電子郵件通知。 透過執行以下命令安裝[React Email](https://react.email/docs/introduction) ： ``` npm install react-email @react-email/components -E ``` 將以下腳本包含在您的 package.json 檔案中。 `--dir`標誌使 React Email 能夠存取位於專案內的電子郵件範本。在本例中，電子郵件範本位於`src/emails`資料夾中。 ``` { "scripts": { "email": "email dev --dir src/emails" } } ``` 接下來，在 Next.js `app`資料夾中建立一個包含`email.tsx`的`emails`資料夾，並將以下程式碼片段複製到該檔案中： ``` import { Body, Column, Container, Head, Heading, Hr, Html, Link, Preview, Section, Text, Row, render, } from "@react-email/components"; import * as React from "react"; const EmailTemplate = ({ message, subject, name, }: { message: string; subject: string; name: string; }) => ( <Html> <Head /> <Preview>{subject}</Preview> <Body style={main}> <Container style={container}> <Section style={header}> <Row> <Column style={headerContent}> <Heading style={headerContentTitle}>{subject}</Heading> </Column> </Row> </Section> <Section style={content}> <Text style={paragraph}>Hey {name},</Text> <Text style={paragraph}>{message}</Text> </Section> </Container> <Section style={footer}> <Text style={footerText}> You&apos;re receiving this email because your subscribed to Newsletter App </Text> <Hr style={footerDivider} /> <Text style={footerAddress}> <strong>Novu Store</strong>, &copy;{" "} <Link href='https://novu.co'>Novu</Link> </Text> </Section> </Body> </Html> ); export function renderEmail(inputs: { message: string; subject: string; name: string; }) { return render(<EmailTemplate {...inputs} />); } const main = { backgroundColor: "#f3f3f5", fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", }; const headerContent = { padding: "20px 30px 15px" }; const headerContentTitle = { color: "#fff", fontSize: "27px", fontWeight: "bold", lineHeight: "27px", }; const paragraph = { fontSize: "15px", lineHeight: "21px", color: "#3c3f44", }; const divider = { margin: "30px 0", }; const container = { width: "680px", maxWidth: "100%", margin: "0 auto", backgroundColor: "#ffffff", }; const footer = { width: "680px", maxWidth: "100%", margin: "32px auto 0 auto", padding: "0 30px", }; const content = { padding: "30px 30px 40px 30px", }; const header = { borderRadius: "5px 5px 0 0", display: "flex", flexDireciont: "column", backgroundColor: "#2b2d6e", }; const footerDivider = { ...divider, borderColor: "#d6d8db", }; const footerText = { fontSize: "12px", lineHeight: "15px", color: "#9199a1", margin: "0", }; const footerLink = { display: "inline-block", color: "#9199a1", textDecoration: "underline", fontSize: "12px", marginRight: "10px", marginBottom: "0", marginTop: "8px", }; const footerAddress = { margin: "4px 0", fontSize: "12px", lineHeight: "15px", color: "#9199a1", }; ``` 上面的程式碼片段使用 React Email 建立了一個可自訂的電子郵件範本。您可以找到更多[易於編輯的靈感或模板](https://demo.react.email/preview/notifications/vercel-invite-user)。該元件還接受訊息、主題和名稱作為屬性，並將它們填入元素中。 最後，您可以在終端機中執行`npm run email`來預覽範本。 接下來，讓我們將電子郵件範本整合到 Novu Echo 中。首先，關閉 React Email 伺服器，然後執行下面的程式碼片段。它會在瀏覽器中開啟[Novu Dev Studio](https://docs.novu.co/echo/concepts/studio) 。 ``` npx novu-labs@latest echo ``` 在 Next.js 應用程式資料夾中建立一個包含`client.ts`檔案的`echo`資料夾，並將此程式碼片段複製到該檔案中。 ``` import { Echo } from "@novu/echo"; import { renderEmail } from "@/app/emails/email"; interface EchoProps { step: any; payload: { subject: string; message: string; name: string; totalAmount: string; }; } export const echo = new Echo({ apiKey: process.env.NEXT_PUBLIC_NOVU_API_KEY!, devModeBypassAuthentication: process.env.NODE_ENV === "development", }); echo.workflow( "novu-store", async ({ step, payload }: EchoProps) => { //👇🏻 in-app notification step await step.inApp("notify-admin", async () => { return { body: `${payload.name} just made a new purchase of ${payload.totalAmount} 🎉`, }; }); //👇🏻 email notification step await step.email( "email-customer", async () => { return { subject: `${payload ? payload?.subject : "No Subject"}`, body: renderEmail(payload), }; }, { inputSchema: { type: "object", properties: {}, }, } ); }, { payloadSchema: { type: "object", properties: { message: { type: "string", default: "Congratulations! Your purchase was successful! 🎉", }, subject: { type: "string", default: "Message from Novu Store" }, name: { type: "string", default: "User" }, totalAmount: { type: "string", default: "0" }, }, required: ["message", "subject", "name", "totalAmount"], additionalProperties: false, }, } ); ``` 此程式碼片段定義了一個名為`novu-store` Novu 通知工作流程，該工作流程接受包含電子郵件主題、訊息、客戶姓名和總金額的有效負載。 此工作流程有兩個步驟：應用程式內通知和電子郵件通知。應用程式內通知使用通知鈴聲向管理員發送訊息，而電子郵件則向客戶的電子郵件發送訊息。 接下來，您需要為 Novu Echo 建立 API 路由。在`api`資料夾中，建立一個包含`route.ts`檔案的`email`資料夾，並將下面提供的程式碼片段複製到該檔案中。 ``` import { serve } from "@novu/echo/next"; import { echo } from "@/app/echo/client"; export const { GET, POST, PUT } = serve({ client: echo }); ``` 在終端機中執行`npx novu-labs@latest echo` 。它將自動開啟 Novu Dev Studio，您可以在其中預覽工作流程並將其與雲端同步。 ![新3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ed2sl38m7zrlgjoj4a6y.gif) `Sync to Cloud`按鈕會觸發一個彈出窗口，其中提供有關如何將工作流程推送到 Novu 雲端的說明。 ![新4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ch8ba7y9klyudmmv9jz.png) 若要繼續，請在終端機中執行以下程式碼片段。這將產生一個唯一的 URL，表示您的開發環境和雲端環境之間的本機隧道。 ``` npx localtunnel --port 3000 ``` 將產生的連結與 Echo API 端點一起複製到 Echo Endpoint 欄位中，按一下`Create Diff`按鈕，然後部署變更。 ``` https://<LOCAL_TUNNEL_URL>/<ECHO_API_ENDPOINT (/api/email)> ``` 恭喜！您剛剛從程式碼庫建立了 Novu 工作流程。 ![新5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bdugs6g15y1e7xeixux.png) 最後，讓我們建立在用戶付款時發送電子郵件和應用程式內通知的端點。建立一個`api/send`路由並將下面的程式碼片段複製到檔案中： ``` import { NextRequest, NextResponse } from "next/server"; import { Novu } from "@novu/node"; const novu = new Novu(process.env.NOVU_API_KEY!); export async function POST(req: NextRequest) { const { email, name, totalAmount } = await req.json(); const { data } = await novu.trigger("novu-store", { to: { subscriberId: process.env.NOVU_SUBSCRIBER_ID!, email, firstName: name, }, payload: { name, totalAmount, subject: `Purchase Notification from Novu Store`, message: `Your purchase of ${totalAmount} was successful! 🎉`, }, }); console.log(data.data); return NextResponse.json( { message: "Purchase Completed!", data: { novu: data.data }, success: true, }, { status: 200 } ); } ``` 端點接受客戶的電子郵件、姓名和支付總額，並在付款成功後觸發 Novu 通知工作流程發送所需的通知。 --- 結論 -- 到目前為止，您已經學會如何執行以下操作： - 實施多種身份驗證方法，從 Appwrite 儲存和檢索資料和檔案。 - 使用 React Email 建立電子郵件模板，並使用 Novu 發送應用程式內和電子郵件通知。 如果您希望在應用程式中發送通知，Novu 是您的最佳選擇。使用 Novu，您可以為應用程式加入多個通知管道，包括聊天、簡訊、電子郵件、推播和應用程式內通知。 本教學的源程式碼可在此處取得： <https://github.com/novuhq/ecom-store-with-nextjs-appwrite-novu-and-stripe> 感謝您的閱讀！ --- 原文出處：https://dev.to/novu/building-an-e-commerce-store-with-nextjs-49m

0個讚   0留言 69瀏覽

使用 Langchain 為您的文件建立 QA 機器人 😻

--- 標題：使用 Langchain 為您的文件建立 QA 機器人 😻 描述：使用 Wing Framework、NextJS 和 Langchain 建立的 ChatGPT 用戶端應用程式 canonical\_url：https://www.winglang.io/blog/2024/05/29/qa-bot-for-your-docs-with-langchain 發表：真實 --- 長話短說 ---- 在本教學中，我們將為您的網站文件建立一個人工智慧驅動的問答機器人。 - 🌐 建立一個用戶友好的 Next.js 應用程式來接受問題和 URL - 🔧 設定一個 Wing 後端來處理所有請求 - 💡 透過使用 RAG 抓取和分析文件，將 @langchain 納入 AI 驅動的答案 - 🔄 前端輸入和人工智慧處理的回應之間的完整連接。 ![問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykw5f2sos4fdhj8akowt.gif) 什麼是翼？ ----- [Wing](https://wing.cloud/redirect?utm_source=qa-bot-reddit&redirect=https%3A%2F%2Fwww.winglang.io%2Fblog%2F2024%2F05%2F29%2Fqa-bot-for-your-docs-with-langchain)是一個雲端開源框架。 它允許您將應用程式的基礎架構和程式碼組合為一個單元，並將它們安全地部署到您首選的雲端提供者。 Wing 讓您可以完全控制應用程式基礎架構的配置方式。除了其易於學習的[程式語言](https://www.winglang.io/docs/language-reference)之外，Wing 還支援 Typescript。 在本教學中，我們將使用 TypeScript。所以，別擔心，您的 JavaScript 和 React 知識足以理解本教學。 ![翼登陸頁面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u366v255drbwqmcoagrz.png) {% cta https://wingla.ng/github %} 看 Wing ⭐️ {% endcta %} --- 使用 Next.js 建立前端 --------------- 在這裡，您將建立一個簡單的表單，它接受文件 URL 和使用者的問題，然後根據網站的資料回傳回應。 首先，建立一個包含兩個子資料夾的資料夾 - `frontend`和`backend` 。 `frontend`資料夾包含 Next.js 應用程式， `backend`資料夾用於 Wing。 ``` mkdir qa-bot && cd qa-bot mkdir frontend backend ``` 在**`frontend`**資料夾中，透過執行以下程式碼片段來建立 Next.js 專案： ``` cd frontend npx create-next-app ./ ``` ![下一個應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyq8dnmmmplvzl7g41ir.png) 將下面的程式碼片段複製到`app/page.tsx`檔案中，以建立接受使用者問題和文件 URL 的表單： ``` "use client"; import { useState } from "react"; export default function Home() { const [documentationURL, setDocumentationURL] = useState<string>(""); const [question, setQuestion] = useState<string>(""); const [disable, setDisable] = useState<boolean>(false); const [response, setResponse] = useState<string | null>(null); const handleUserQuery = async (e: React.FormEvent) => { e.preventDefault(); setDisable(true); console.log({ question, documentationURL }); }; return ( <main className='w-full md:px-8 px-3 py-8'> <h2 className='font-bold text-2xl mb-8 text-center text-blue-600'> Documentation Bot with Wing & LangChain </h2> <form onSubmit={handleUserQuery} className='mb-8'> <label className='block mb-2 text-sm text-gray-500'>Webpage URL</label> <input type='url' className='w-full mb-4 p-4 rounded-md border text-sm border-gray-300' placeholder='https://www.winglang.io/docs/concepts/why-wing' required value={documentationURL} onChange={(e) => setDocumentationURL(e.target.value)} /> <label className='block mb-2 text-sm text-gray-500'> Ask any questions related to the page URL above </label> <textarea rows={5} className='w-full mb-4 p-4 text-sm rounded-md border border-gray-300' placeholder='What is Winglang? OR Why should I use Winglang? OR How does Winglang work?' required value={question} onChange={(e) => setQuestion(e.target.value)} /> <button type='submit' disabled={disable} className='bg-blue-500 text-white px-8 py-3 rounded' > {disable ? "Loading..." : "Ask Question"} </button> </form> {response && ( <div className='bg-gray-100 w-full p-8 rounded-sm shadow-md'> <p className='text-gray-600'>{response}</p> </div> )} </main> ); } ``` 上面的程式碼片段顯示了一個表單，該表單接受使用者的問題和文件 URL 並將它們暫時記錄到控制台。 ![QA 機器人表單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b4w3tq0srua93gnk73n.png) 完美的！ 🎉您已經完成了應用程式的使用者介面。接下來，讓我們設定 Wing 後端。 --- 如何在電腦上設定 Wing ------------- Wing 提供了一個 CLI，使您能夠在專案中執行各種 Wing 操作。 它還提供[VSCode](https://marketplace.visualstudio.com/items?itemName=Monada.vscode-wing)和[IntelliJ](https://plugins.jetbrains.com/plugin/22353-wing)擴展，透過語法突出顯示、編譯器診斷、程式碼完成和片段等功能增強開發人員體驗。 在繼續之前，請停止 Next.js 開發伺服器並透過在終端機中執行下面的程式碼片段來安裝 Wing CLI。 ``` npm install -g winglang@latest ``` 執行以下程式碼片段以確保 Winglang CLI 已安裝並按預期工作： ``` wing -V ``` 接下來，導航到`backend`資料夾並建立一個空的 Wing Typescript 專案。確保選擇`empty`模板並選擇 Typescript 作為語言。 ``` wing new ``` ![永新](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezy04zqvz9lura0d25dj.png) 將下面的程式碼片段複製到`backend/main.ts`檔案中。 ``` import { cloud, inflight, lift, main } from "@wingcloud/framework"; main((root, test) => { const fn = new cloud.Function( root, "Function", inflight(async () => { return "hello, world"; }) ); }); ``` **`main()`**函數充當 Wing 的入口點。 它建立一個雲端函數並在編譯時執行。另一方面， **`inflight`**函數在執行時執行並返回`Hello, world!`文字. 透過執行下面的程式碼片段啟動 Wing 開發伺服器。它會自動在瀏覽器中開啟 Wing 控制台，網址為`http://localhost:3000` 。 ``` wing it ``` ![Wing TS 最小控制台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1ejobkm0dq5akhut732.png) 您已在電腦上成功安裝 Wing。 --- 如何將 Wing 連接到 Next.js 應用程式 ------------------------- 在前面的部分中，您已在`frontend`資料夾中建立了 Next.js 前端應用程式，並在`backend`資料夾中建立了 Wing 後端。 在本部分中，您將了解如何在 Next.js 應用程式和 Wing 後端之間通訊和發送資料。 首先，透過執行以下程式碼在後端資料夾中安裝[Wing React](https://github.com/winglang/winglibs/tree/main/react)函式庫： ``` npm install @winglibs/react ``` 接下來，更新`main.ts`文件，如下所示： ``` import { main, cloud, inflight, lift } from "@wingcloud/framework"; import React from "@winglibs/react"; main((root, test) => { const api = new cloud.Api(root, "api", { cors: true }) ; //👇🏻 create an API route api.get( "/test", inflight(async () => { return { status: 200, body: "Hello world", }; }) ); //👉🏻 placeholder for the POST request endpoint //👇🏻 connects to the Next.js project const react = new React.App(root, "react", { projectPath: "../frontend" }); //👇🏻 an environment variable react.addEnvironment("api_url", api.url); }); ``` 上面的程式碼片段建立了一個 API 端點 ( `/test` )，它接受 GET 請求並傳回`Hello world`文字。 `main`函數也連接到 Next.js 專案並將`api_url`新增為環境變數。 環境變數中包含的 API URL 使我們能夠將請求傳送到 Wing API 路由。我們如何在 Next.js 應用程式中檢索 API URL 並發出這些請求？ 更新 Next.js `app/layout.tsx`檔案中的`RootLayout`元件，如下所示： ``` export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang='en'> <head> {/** ---👇🏻 Adds this script tag 👇🏻 ---*/} <script src='./wing.js' defer /> </head> <body className={inter.className}>{children}</body> </html> ); } ``` 透過執行`npm run build`重新建置 Next.js 專案。 最後，啟動Wing開發伺服器。它會自動啟動 Next.js 伺服器，可以在瀏覽器中透過**`http://localhost:3001`**存取該伺服器。 ![控制台到 URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7rkxw9bds97a0qzg5vh.gif) 您已成功將 Next.js 連接到 Wing。您也可以使用`window.wingEnv.<attribute_name>`存取環境變數中的資料。 ![視窗.wingEnv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0up5430jmxufmyeb9e4h.gif) 使用LangChain和Wing處理用戶請求 ---------------------- 在本節中，您將學習如何向 Wing 發送請求，使用[LangChain 和 OpenA](https://js.langchain.com/docs/get_started/quickstart#llm-chain) I 處理這些請求，並在 Next.js 前端顯示結果。 首先，我們更新 Next.js **`app/page.tsx`**檔案以檢索 API URL 並將使用者資料傳送到 Wing API 端點。 為此，請透過在**`page.tsx`**檔案頂部新增以下程式碼片段來擴充 JavaScript **`window`**物件。 ``` "use client"; import { useState } from "react"; interface WingEnv { api_url: string; } declare global { interface Window { wingEnv: WingEnv; } } ``` 接下來，更新`handleUserQuery`函數以將包含使用者問題和網站URL 的POST 請求傳送到Wing API 端點。 ``` //👇🏻 sends data to the api url const [response, setResponse] = useState<string | null>(null); const handleUserQuery = async (e: React.FormEvent) => { e.preventDefault(); setDisable(true); try { const request = await fetch(`${window.wingEnv.api_url}/api`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ question, pageURL: documentationURL }), }); const response = await request.text(); setResponse(response); setDisable(false); } catch (err) { console.error(err); setDisable(false); } }; ``` 在建立接受 POST 請求的 Wing 端點之前，請在`backend`資料夾中安裝下列套件： ``` npm install @langchain/community @langchain/openai langchain cheerio ``` [Cheerio](https://js.langchain.com/v0.2/docs/integrations/document_loaders/web_loaders/web_cheerio/)使我們能夠抓取軟體文件網頁，而[LangChain 軟體包](https://js.langchain.com/v0.1/docs/get_started/quickstart/)使我們能夠存取其各種功能。 LangChain OpenAI整合包使用OpenAI語言模型；因此，您需要一個有效的 API 金鑰。您可以從[OpenAI 開發者平台](https://platform.openai.com/api-keys)取得。 ![朗查恩](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omg4o524oklrssso5rqc.png) 接下來，讓我們建立處理傳入請求的`/api`端點。 端點將： - 接受來自 Next.js 應用程式的問題和文件 URL， - 使用[LangChain 文件載入器](https://js.langchain.com/v0.1/docs/modules/data_connection/document_loaders/)載入文件頁面， - 將檢索到的文件分成區塊， - 轉換分塊文件並將它們保存在[LangChain 向量儲存](https://js.langchain.com/v0.1/docs/modules/data_connection/vectorstores/)中， - 並建立一個[檢索器函數](https://js.langchain.com/v0.1/docs/modules/data_connection/)，從向量儲存中檢索文件。 首先，將以下內容匯入`main.ts`檔案： ``` import { main, cloud, inflight, lift } from "@wingcloud/framework"; import { ChatOpenAI, OpenAIEmbeddings } from "@langchain/openai"; import { ChatPromptTemplate } from "@langchain/core/prompts"; import { createStuffDocumentsChain } from "langchain/chains/combine_documents"; import { CheerioWebBaseLoader } from "@langchain/community/document_loaders/web/cheerio"; import { RecursiveCharacterTextSplitter } from "langchain/text_splitter"; import { MemoryVectorStore } from "langchain/vectorstores/memory"; import { createRetrievalChain } from "langchain/chains/retrieval"; import React from "@winglibs/react"; ``` 在`main()`函數中加入以下程式碼片段以建立`/api`端點： ``` api.post( "/api", inflight(async (ctx, request) => { //👇🏻 accept user inputs from Next.js const { question, pageURL } = JSON.parse(request.body!); //👇🏻 initialize OpenAI Chat for LLM interactions const chatModel = new ChatOpenAI({ apiKey: "<YOUR_OPENAI_API_KEY>", model: "gpt-3.5-turbo-1106", }); //👇🏻 initialize OpenAI Embeddings for Vector Store data transformation const embeddings = new OpenAIEmbeddings({ apiKey: "<YOUR_OPENAI_API_KEY>", }); //👇🏻 creates a text splitter function that splits the OpenAI result chunk size const splitter = new RecursiveCharacterTextSplitter({ chunkSize: 200, //👉🏻 characters per chunk chunkOverlap: 20, }); //👇🏻 creates a document loader, loads, and scraps the page const loader = new CheerioWebBaseLoader(pageURL); const docs = await loader.load(); //👇🏻 splits the document into chunks const splitDocs = await splitter.splitDocuments(docs); //👇🏻 creates a Vector store containing the split documents const vectorStore = await MemoryVectorStore.fromDocuments( splitDocs, embeddings //👉🏻 transforms the data to the Vector Store format ); //👇🏻 creates a document retriever that retrieves results that answers the user's questions const retriever = vectorStore.asRetriever({ k: 1, //👉🏻 number of documents to retrieve (default is 2) }); //👇🏻 creates a prompt template for the request const prompt = ChatPromptTemplate.fromTemplate(` Answer this question. Context: {context} Question: {input} `); //👇🏻 creates a chain containing the OpenAI chatModel and prompt const chain = await createStuffDocumentsChain({ llm: chatModel, prompt: prompt, }); //👇🏻 creates a retrieval chain that combines the documents and the retriever function const retrievalChain = await createRetrievalChain({ combineDocsChain: chain, retriever, }); //👇🏻 invokes the retrieval Chain and returns the user's answer const response = await retrievalChain.invoke({ input: `${question}`, }); if (response) { return { status: 200, body: response.answer, }; } return undefined; }) ); ``` API 端點接受使用者的問題和來自 Next.js 應用程式的頁面 URL，初始化[`ChatOpenAI`](https://js.langchain.com/v0.2/docs/integrations/chat/openai/)和[`OpenAIEmbeddings`](https://js.langchain.com/v0.2/docs/integrations/text_embedding/openai/) ，載入文件頁面，並以文件的形式檢索使用者查詢的答案。 然後，將文件分割成區塊，將區塊保存在`MemoryVectorStore`中，並使我們能夠使用[LangChain 檢索器](https://js.langchain.com/v0.1/docs/modules/data_connection/)來取得問題的答案。 從上面的程式碼片段來看，OpenAI API金鑰直接輸入到程式碼中；這可能會導致安全漏洞，使 API 金鑰可供攻擊者存取。為了防止這種資料洩露，Wing 允許您將私鑰和憑證保存在名為`secrets`的變數中。 當您建立機密時，Wing 會將此資料保存在`.env`檔案中，確保其安全且可存取。 更新`main()`函數以從 Wing Secret 取得 OpenAI API 金鑰。 ``` main((root, test) => { const api = new cloud.Api(root, "api", { cors: true }); //👇🏻 creates the secret variable const secret = new cloud.Secret(root, "OpenAPISecret", { name: "open-ai-key", }); api.post( "/api", lift({ secret }) .grant({ secret: ["value"] }) .inflight(async (ctx, request) => { const apiKey = await ctx.secret.value(); const chatModel = new ChatOpenAI({ apiKey, model: "gpt-3.5-turbo-1106", }); const embeddings = new OpenAIEmbeddings({ apiKey, }); //👉🏻 other code snippets & configurations ); const react = new React.App(root, "react", { projectPath: "../frontend" }); react.addEnvironment("api_url", api.url); }); ``` - 從上面的程式碼片段來看， ``` - The `secret` variable declares a name for the secret (OpenAI API key). ``` ``` - The [`lift().grant()`](https://www.winglang.io/docs/typescript/inflights#permissions) grants the API endpoint access to the secret value stored in the Wing Secret. ``` ``` - The [`inflight()`](https://www.winglang.io/docs/typescript/inflights) function accepts the context and request object as parameters, makes a request to LangChain, and returns the result. ``` ``` - Then, you can access the `apiKey` using the `ctx.secret.value()` function. ``` 最後，透過在終端機中執行此命令將 OpenAI API 金鑰儲存為機密。 ![翅膀的秘密](https://www.winglang.io/assets/images/qa-bot-wing-secrets-883db5e81515894ae280d77b7f72bb25.gif) 恭喜！您已成功完成本教學的專案。 以下是該應用程式的簡短演示： ![QA 機器人演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ropklqge2xzpibl29vye.gif) --- 讓我們更深入地研究 Wing 文件，看看我們的 AI 機器人可以提取哪些資料。 ![QA 機器人演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnmf6n6mszc6go0uiw1v.gif) --- 總結一下 ---- 到目前為止，我們已經討論了以下內容： - 什麼是翼？ - 如何使用Wing並使用Langchain查詢資料， - 如何將 Wing 連接到 Next.js 應用程式， - 如何在 Next.js 前端和 Wing 後端之間發送資料。 > [Wing](https://github.com/winglang/wing)旨在恢復您的創意流並縮小想像力與創造之間的差距。 Wing 的另一個巨大優勢是它是開源的。因此，如果您希望建立利用雲端服務的分散式系統或為雲端開發的未來做出貢獻， [Wing](https://github.com/winglang/wing)是您的最佳選擇。 請隨意為[GitHub 儲存庫做出貢獻，](https://github.com/winglang/wing)並與團隊和大型開發人員社群[分享您的想法](https://t.winglang.io/discord)。 本教學的源程式碼可[在此處](https://github.com/NathanTarbert/wing-langchain-nextjs)取得。 感謝您的閱讀！ 🎉 --- 原文出處：https://dev.to/winglang/build-a-qa-bot-for-your-documentation-with-langchain-27i4

0個讚   0留言 34瀏覽

17 個讓我保持高效率的開發者工具

許多開發人員喜歡從頭開始建立東西，但有時工作量太大，使用這些工具可以讓工作變得更容易。 這裡包含一系列工具，因此我相信您會找到適合您需求的工具。 我無法涵蓋所有內容，但如果您知道其他很棒的工具，請隨時在評論中告訴我！ 我們開始做吧。 --- 1. [Taipy](https://github.com/Avaiga/taipy) - 資料和人工智慧演算法融入生產級網路應用程式。 -------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd10iiofzmt4or4db6ej.png) 通常，當我需要 Python 介面時，我會使用 Streamlit。然而，它的效率不是很高，並且存在許多基於效能的問題。 另一方面，Taipy（開源）是用於輕鬆、端到端應用程式開發的完美 Python 程式庫，具有假設分析、智慧管道執行、內建調度和部署工具。 需要明確的是，Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能，而 Taipy 是最佳選擇。 雖然 Streamlit 是一種流行的工具，但正如我之前告訴您的那樣，它的性能可能會顯著下降，尤其是在處理大型資料集時，這使得它對於生產級使用來說不切實際。 另一方面，Taipy 在不犧牲性能的情況下提供了簡單性和易用性。 ![大資料支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnvk0tozn0lgj083rzcb.gif) Taipy 有許多整合選項，可以輕鬆地與領先的資料平台連接。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yv31uir3erina587zp8.png) 開始使用以下命令。 ``` pip install taipy ``` 最好的部分是 Taipy，它的所有依賴項現在都與 Python 3.12 完全相容，因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 ![用例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdvnbejf9aivxmqsd3hx.png) 另一個有用的事情是，Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。 ![太皮工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc1umm5hcxes0ydbuspb.png) 如果您想閱讀部落格來了解程式碼庫結構，您可以閱讀 HuggingFace[的使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。 嘗試新技術通常很困難，但 Taipy 提供了[10 多個演示教程，](https://docs.taipy.io/en/release-3.1/gallery/)其中包含程式碼和適當的文件供您遵循。我將詳細討論其中一些專案！ ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wigid2aokt6spkkoivr.png) 這些用例令人驚嘆，因此請務必查看一些演示應用程式。 Taipy 還在其企業版中提供了 Designer 應用程式（拖放低程式碼編輯器）。它非常有用，您可以觀看下面的演示來了解它是如何工作的！ {% 嵌入 https://www.youtube.com/watch?v=y3VPT6IPvC4 %} Taipy 在 GitHub 上有 9.2k+ 顆星，並且處於`v3.1`版本，因此它們正在不斷改進。 {% cta https://github.com/Avaiga/taipy %} 明星 Taipy ⭐️ {% endcta %} --- 2. [Jam](https://jam.dev/) - 一鍵錯誤報告。 ------------------------------------ ![果醬](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn2c6djsj5hej0gj07xs.png) 幾個月前我發現了 Jam，並且用過它好幾次。 Jam 是一款免費的 Chrome 擴充功能（非開源），您可以使用它來有效地報告錯誤。當然，您還可以做更多的事情。 報告錯誤是一個漫長的過程，您最終可能會錯過解決該錯誤所需的基本資料。這就是開發人員更喜歡使用 Jam 的原因。 觀看此影片，了解 Jam 的工作原理！ {% 嵌入 https://www.youtube.com/watch?v=iXjmUwZLzVs&amp;embeds\_referring\_euri=https%3A%2F%2Fchromewebstore.google.com%2F&amp;source\_ve\_path=OTY3MTQ&amp;feature=emb\_imp\_woyt %} 正如您所看到的，最好的部分是它捕獲控制台和網頁日誌訊息，這使得其他開發人員可以方便地查看它。 您還將獲得人工智慧除錯器、後端追蹤、重現步驟和瀏覽器資訊。您還需要什麼？ ![即興開發](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2tpffk9h60skslw8i0b.png) 我已經使用 Jam 很長時間了，因此您還將獲得一個儀表板來查看您迄今為止建立的所有 Jam。它非常高效並且效果非常好。 ![儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t01buvno1r7pfrolfu6k.png) 它還可以與許多流行的工具一起使用，因此您根本不必改變您的環境。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr566uwdcmors2yvkfcb.png) 不要使用傳統的方式，您可以簡單地對 Jam 進行評論並改進整個流程來輕鬆處理它。 --- 3. [DevGPT](https://www.getdevkit.com/devgpt) - 開發者的人工智慧助理。 ----------------------------------------------------------- ![開發組](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8k8a8jyeo9qkj2hqmc4n.png) 我已經使用 DevGPT 很久了，尤其是當 ChatGPT 還很新的時候。我曾經反覆核對訊息，看看它是否正確。我不相信 ChatGPT 和用於它的訓練資料。 您會驚訝地發現，在某些情況下 DevGPT 比 ChatGPT 更好。但這並不是 DevGPT 的唯一用例。 他們提供了一系列可以直接使用的提示。您可以修改它們的結構並使用斜線命令來使用它。 ![提示結構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fc74vge21d65nbpauig.png) ![提示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yhl7o1grjvcg9q1fee5.png) 範例提示 ![提示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0y51yi3t4s0a54tw0jrs.png) 範例提示 DevGPT 與其他人工智慧助理的獨特之處在於它提供了許多有用的迷你工具。 ![迷你工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il3qcaykt4k9x612251n.png) 我使用最多的是響應式設計，它有助於同時在所有螢幕上查看任何網站預覽。 ![響應式設計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nodp7fbhagwqavd5ud5h.png) 響應式設計 每個工具本身都是完整的，因此您不會得到任何不完整的東西。我相信這實際上可以改善您的工作流程條件。 ![日期檢查員](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1q5bau21dd8dqaqbu4c.png) 日期檢查員 --- 4. [DevToys](https://github.com/DevToys-app/DevToys) - 開發者的瑞士軍刀。 ---------------------------------------------------------------- ![開發玩具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zfl1wjr01fdvca6wxbi.png) DevToys 協助完成日常開發任務，例如格式化 JSON、比較文字和測試 RegExp。 用例是相同的，但 DevToys 提供了更多選項，而且它是一個離線工具，這是一個優點。 這樣，就無需使用不可信的網站來處理您的資料執行簡單的任務。透過智慧型偵測，DevToys 可以偵測用於複製到 Windows 剪貼簿的資料的最佳工具。 緊湊的覆蓋範圍讓您可以保持應用程式較小並位於其他視窗之上。最好的部分是可以同時使用該應用程式的多個實例。 我可以肯定地說，很多開發人員從來不知道這件事。 我很高興地說它是專為 Windows 生態系統設計的軟體。哈哈！ ![工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7wd60jsgdb5tx2t2adi.png) 他們提供的一些工具是： > 轉換器 - JSON &lt;&gt; YAML - 時間戳 - 數基數 - 規劃任務解析器 ![轉換器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8x784fx53x6ia02zal0.png) > 編碼器/解碼器 - 超文本標記語言 - 網址 - Base64 文字與圖片 - 壓縮包 - 智威湯遜解碼器 ![編碼器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73ts4x1vtcy4yswsmytw.png) > 格式化程式 - JSON - SQL - XML ![XML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5dc8ko2baywta82ymq5.png) > 發電機 - 哈希（MD5、SHA1、SHA256、SHA512） - UUID 1 和 4 - 洛雷姆·伊普蘇姆 - 校驗和 ![發電機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwsq8xig6jf69wr99iuv.png) > 文字 - 逃脫/逃脫 - 檢驗員和箱子轉換器 - 正規表示式測試器 - 文字比較 - XML驗證器 - 降價預覽 ![MD預覽](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcbkse1i5324qg3xu1yd.png) ![文字差異](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlqqib4fcjimc03pdrwr.png) > 形象的 - 色盲模擬器 - 顏色選擇器和對比度 - PNG / JPEG 壓縮器 - 影像轉換器 ![圖形工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/631upekcqzh62xyrdjwt.png) 我不了解你，但我不會錯過這個！ 您可以閱讀[如何執行 DevToys](https://github.com/DevToys-app/DevToys?tab=readme-ov-file#how-to-run-devtoys) 。 > 關於許可證的註解。 DevToys 使用的授權允許將應用程式作為試用軟體或共享軟體重新分發而無需進行任何更改。然而，作者 Etienne BAUDOUX 和 BenjaminT 不希望你這樣做。如果您認為自己有充分的理由這樣做，請先與我們聯絡討論。 他們在 GitHub 上擁有超過 23,500 顆星，並使用 C#。 {% cta https://github.com/DevToys-app/DevToys %} 明星 DevToys ⭐️ {% endcta %} --- 5. [Linear－](https://github.com/linear)任務管理工具。 ---------------------------------------------- ![線性](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zlvr12b9untwos846i2.png) 我之前嘗試過使用 Trello 或 Jira 等工具，我想說線性絕對值得。 Jira 似乎有點複雜，適合大型團隊。 Linear 是開源的，是簡化問題、專案和產品路線圖的最佳方法之一。它是一種管理工具，我們都需要它來了解正在發生的事情以及未來的計劃。 ![工作管理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbno2672e69ofqonsob3.png) 您還可以獲得一個全域命令選單，可以幫助您更快地完成操作。作為開發人員，我們都喜歡這一點！ 它們提供了一系列很酷的功能，例如自動跟踪，這可確保將啟動的問題加入到當前週期中。您還將收到有關有風險週期的警告，這可以幫助預測延誤。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3bi4fgk4vp0nfc75jlc.png) ![線性](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfl0onb6rmiepiu1ibns.png) ![循環](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eb7tpqvlbxyhkwzkroyj.png) 您可以看到[25+ 個完整功能](https://linear.app/features)的清單。您還可以了解[他們的整個旅程](https://linear.app/readme)。 如果您喜歡觀看影片，可以觀看此影片，其中涵蓋了有關線性的大部分基本內容。 {% 嵌入 https://youtu.be/oh2AfSFe0H0 %} 它有一個針對 2 個團隊的免費套餐計劃，這足以讓您嘗試一下並看看它們是否合適。 Linear 在主儲存庫上有 650 顆星，是使用 TypeScript 建構的。 {% cta https://github.com/linear %} 星線性 ⭐️ {% endcta %} --- 6. [Pieces](https://github.com/pieces-app) - 您的工作流程副駕駛。 ------------------------------------------------------- ![件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf2qgqtpv78fxw5guqm5.png) Pieces 是一款 AI 生產力工具，旨在透過智慧程式碼片段管理、情境化副駕駛互動和主動呈現有用材料來幫助開發人員管理混亂的工作流程。 它改善了您的工作流程和整體開發體驗，同時透過完全離線的 AI 方法保持工作的隱私和安全。 實時上下文的最新概念使其更上一層樓。您可以觀看引起熱議的演示！ {% 嵌入 https://www.youtube.com/watch?v=aP8u95RTCGE %} 有了這個，Pieces Copilot+ 現在可以提供高度感知的幫助，引導您回到上次離開的地方。 - 問它， `What was I working on an hour ago?`並讓它幫助你重新進入心流狀態。 - 問一下， `How can I resolve the issue I got with Cocoa Pods in the terminal in IntelliJ?` - 或者`What did Mack say I should test in the latest release?` 。 Copilot 可以顯示您知道自己擁有但不記得在哪裡的資訊。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2ro3rcwnqp4qrmv5e8s.png) 它與您最喜歡的工具無縫集成，以簡化、理解和提升您的編碼流程。 它具有比表面上看到的更令人興奮的功能。 ✅ 它可以透過閃電般的搜尋體驗找到您需要的資料，讓您可以根據您的喜好透過自然語言、程式碼、標籤和其他語義進行查詢。可以放心地說“您的個人離線谷歌”。 ✅ Pieces 使用 OCR 和 Edge-ML 升級螢幕截圖，以提取程式碼並修復無效字元。因此，您可以獲得極其準確的程式碼提取和深度元資料豐富。 您可以查看 Pieces 可用[功能的完整清單](https://pieces.app/features/?utm_source=anmol&utm_medium=cpc&utm_campaign=anmol-article)。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysluzx8qtyaqrtnp4fld.png) ![分享程式碼片段](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wz4xtesz5empxatxju1l.png) 您可以閱讀[文件](https://docs.pieces.app/?utm_source=anmol&utm_medium=cpc&utm_campaign=anmol-article)並存取[網站](https://pieces.app/)。 它還允許您捕獲程式碼片段，您可以在編輯現有程式碼或處理新專案時將其用作參考。這對於開源開發人員來說非常方便。 ✅ 在應用程式中保存部分程式碼。 ✅ 輕鬆存取已儲存的程式碼片段。 ✅ 從網路貼上程式碼。 ✅ 與您的團隊分享您的程式碼。 他們為 Pieces OS 用戶端提供了一系列 SDK 選項，包括[TypeScript](https://github.com/pieces-app/pieces-os-client-sdk-for-typescript) 、 [Kotlin](https://github.com/pieces-app/pieces-os-client-sdk-for-kotlin) 、 [Python](https://github.com/pieces-app/pieces-os-client-sdk-for-python)和[Dart](https://github.com/pieces-app/pieces-os-client-sdk-for-dart) 。 就開源流行度而言，他們仍然是新的，但他們的社群是迄今為止我見過的最好的社群之一。加入他們，成為 Pieces 的一部分！ {% cta https://github.com/pieces-app/ %} 星星碎片 ⭐️ {% endcta %} --- 7.[螢幕截圖到程式碼](https://github.com/abi/screenshot-to-code)- 放入螢幕截圖並將其轉換為乾淨的程式碼。 --------------------------------------------------------------------------- ![截圖到程式碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5akiyz5telxqqsj32ftu.png) 這個開源專案廣泛流行，但許多開發人員仍然不了解它。這可以幫助您以 10 倍的速度建立使用者介面。 這是一個簡單的工具，可以使用 AI 將螢幕截圖、模型和 Figma 設計轉換為乾淨、實用的程式碼。 該應用程式有一個 React/Vite 前端和一個 FastAPI 後端。如果您想使用 Claude Sonnet 或獲得實驗視訊支持，您將需要一個能夠存取 GPT-4 Vision API 的 OpenAI API 金鑰或一個 Anthropic 金鑰。您可以閱讀[指南](https://github.com/abi/screenshot-to-code?tab=readme-ov-file#-getting-started)來開始。 您可以在託管版本上[即時試用](https://screenshottocode.com/)，並觀看 wiki 上提供的[一系列演示影片](https://github.com/abi/screenshot-to-code/wiki/Screen-Recording-to-Code)。 他們在 GitHub 上擁有超過 52k 顆星，並支援許多技術堆疊，例如 React 和 Vue，以及不錯的 AI 模型，例如 GPT-4 Vision、Claude 3 Sonnet 和 DALL-E 3。 {% cta https://github.com/abi/screenshot-to-code %} 將螢幕截圖轉為程式碼 ⭐️ {% endcta %} --- 8. [Silver Searcher](https://github.com/ggreer/the_silver_searcher) - 超快速的程式碼庫搜尋工具。 ----------------------------------------------------------------------------------- ![銀色搜尋者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41z8goks4ag2opm0ynvp.png) 許多開源專案都有開發人員多年來建立的大型程式碼庫。顯然，有人無法一次理解所有內容，這就是這個工具的用武之地。 Silver Searcher（開源），通常縮寫為 Ag，是一種快速且有效率的程式碼搜尋工具，專為使用大型程式碼庫的開發人員而設計。 Ag 是作為傳統 grep 命令的替代品而建置的，它利用平行性和智慧過濾來提供超快速的搜尋結果。 它最初是[Ack](https://github.com/beyondgrep/ack3)的克隆，但速度快了 5 到 10 倍。您可以閱讀[為什麼它這麼快](https://github.com/ggreer/the_silver_searcher?tab=readme-ov-file#how-is-it-so-fast)。 它有很多很酷的功能，例如： ✅ 多執行緒可加快程式碼錯誤搜尋速度。 ✅ 忽略 .gitignore、.ignore 和 .hgignore 中的檔案模式以避免不必要的搜尋。 ✅ 可透過命令列選項和可下載的設定檔進行自訂。 好處是它可以與文字編輯器和 IDE 集成，以在您首選的工作流程中增強搜尋功能。 它可以根據您的開發環境在 Windows、macOS 和 Linux 上無縫執行。 您可以閱讀[安裝指南](https://github.com/ggreer/the_silver_searcher?tab=readme-ov-file#installing)。 它在 GitHub 上擁有超過 25,500 顆星，擁有 200 多名貢獻者。 唯一的問題是它不再被維護，因為最後一次提交是 4 年前的事情，並且有 400 多個活躍問題。 {% cta https://github.com/ggreer/the\_silver\_searcher %} 星銀搜尋者 ⭐️ {% endcta %} --- 9. [Obsidian](https://github.com/obsidianmd) - 根據您的風格編寫應用程式。 ------------------------------------------------------------ ![黑曜石](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26r33zlctwpny1f7hf96.png) Obsidian 是一款私密且靈活的寫作應用程式，可適應您的思維方式。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz0eig3tzezhm32i314m.png) ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z983u116nummmo8n16b7.png) 您也可以查看插件清單\](https://obsidian.md/plugins)，它們可以幫助您塑造 Obsidian 以適應您的思維方式。我已經檢查了那裡存在的瘋狂數量的選項！ ![外掛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voyny8k3zbh6a92u3qy4.png) 您甚至可以協作並輕鬆追蹤修訂之間的更改，每個註釋都有一年的版本歷史記錄。 ![版本歷史](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqj3sxbwh1y5t9rbwb4l.png) 您可以發布這些（我從未嘗試過）並透過主題、自訂網域、密碼保護等控制網站的外觀和風格。這是一項付費功能，但您可以閱讀有關[使用 Obsidian 發布的](https://obsidian.md/publish)所有內容。 您可以閱讀詳細[文件](https://docs.obsidian.md/Home)並查看[即時網站](https://obsidian.md/)。您也可以使用本[指南](https://docs.obsidian.md/Plugins/Getting+started/Build+a+plugin)建立自訂插件，並使用 React 或 Svelte。 根據您使用的平台下載[Obsidian](https://obsidian.md/download) 。 他們提供永久免費的套餐，並且不根據功能或使用情況收費。只有當您將 Obsidian 用於商業用途時才需要付費。 您可以嘗試的最佳替代方案之一是[Capacities](https://capacities.io/) 。在某些方面它甚至可能比黑曜石更好。我將在以後的一篇文章中介紹它。 主儲存庫在 GitHub 上有 8k+ 顆星，有 1400 多名貢獻者。開源社群的另一個很棒的專案。 {% cta https://github.com/obsidianmd/obsidian-releases %} 星黑曜石 ⭐️ {% endcta %} --- 10.[自動完成](https://github.com/withfig/autocomplete)- IDE 風格的自動完成功能適用於您現有的終端和 shell。 ---------------------------------------------------------------------------------- ![自動完成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i8vcidsa023jf8r9382.png) [Fig](https://fig.io/?ref=github_autocomplete)讓命令列對個人來說更容易，對團隊來說更具協作性。 他們最受歡迎的產品是自動完成。當您鍵入時，Fig 會在現有終端機中彈出子命令、選項和上下文相關的參數。 作為開發人員，我們確實需要它來最大限度地提高我們的日常生產力。 最好的部分是您也可以將 Fig 的自動完成功能用於您自己的工具。以下是建立私人完成的方法： ``` import { ai } from "@fig/autocomplete-generators" ... generators: [ ai({ // the prompt prompt: "Generate a git commit message", // Send any relevant local context. message: async ({ executeShellCommand }) => { return executeShellCommand("git diff") }, //Turn each newline into a suggestion (can specify instead a `postProcess1 function if more flexibility is required) splitOn: "\n", }) ] ``` 您可以閱讀[Fig.io/docs](https://fig.io/docs/getting-started)了解如何開始。 您可以觀看下面的演示來了解它是如何工作的！ ![影像](https://camo.githubusercontent.com/c477525cab041ce8177323e8140aa872341e3b8130d61454b89ccae87d00d87b/68747470733a2f2f646f63732e6177732e616d617a6f6e2e636f6d2f696d616765732f616d617a6f6e712f6c61746573742f71646576656c6f7065722d75672f696d616765732f636f6d6d616e642d6c696e652d636f6d706c6574696f6e732e676966) 它們在 GitHub 上有 24k+ 顆星，對於經常使用 shell 或終端機的開發人員很有用。 {% cta https://github.com/withfig/autocomplete %} 星狀自動完成 ⭐️ {% endcta %} --- 11. [Excalidraw](https://github.com/excalidraw/excalidraw) - 線上白板，讓您的想法得以實現。 ---------------------------------------------------------------------------- ![外畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u691s86xjinjvehmun51.png) 向遠距工作的過渡讓我懷念使用記號筆和白板進行腦力激盪的簡單性。 我們知道，當語言無法表達時，視覺效果可以彌補理解複雜想法的差距。 Excalidraw（開源）以數位方式重新建立白板體驗，對於補充無聊文字的快速圖表或插圖來說具有無價的價值。您可以建立漂亮的手繪圖表、線框圖或任何您喜歡的內容。 ![外畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki8wave2sgy3mikv4nec.png) 作為開發人員，對我來說最好的部分是您可以安裝 Excalidraw npm 套件以將 Excalidraw 整合到我自己的應用程式中。哇！ ``` npm install react react-dom @excalidraw/excalidraw ``` 一些很棒的功能是： ✅ 本地化 (i18n) 支援。 ✅ 匯出到 PNG、SVG 和剪貼簿。 ✅ 多種工具 - 長方形、圓形、菱形、箭頭、線條、自由繪製、橡皮擦... ✅ 撤銷/重做。 ✅ PWA 支援（離線工作）。 ✅ 即時協作。 ✅ 本機優先支援（自動儲存至瀏覽器）。 ✅ 可分享連結（匯出至可與他人分享的唯讀連結）。 ![exalidraw 具有大螢幕功能](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ru356oc83ll9mo4dhjd5.png) Google Cloud、Meta、CodeSandbox、Notion 和 Replit 等產品整合了 Excalidraw，賦予其巨大的可信度。 您可以閱讀[文件](https://docs.excalidraw.com/docs/introduction/development)並檢查[excalidraw 編輯器](https://excalidraw.com/)。 他們甚至有一套迷你的人工智慧功能，並支援從美人魚轉換，這非常有幫助。 ![人工智慧特點](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihl90jf222ahtymec8ui.png) 團隊提供了一個[即時編輯器](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/customizing-styles)，如果您不想在本地執行，您可以直接檢查任何類型的變更。讓我著迷的是，有些團隊工作非常努力，因此開發人員的體驗是一流的。 ![即時編輯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ob848loog24milg0h2uv.png) 儘管它是免費使用的，但他們提供了增強版本，因此您可以檢查[付費計劃和免費計劃之間的差異](https://plus.excalidraw.com/excalidraw-plus-vs-excalidraw/)。 說實話，我從來沒有真正想過這會是開源的。但它非常受歡迎，GitHub 上有超過 74,000 顆星，有 1,300 多個活躍問題。 {% cta https://github.com/excalidraw/excalidraw %} 明星 Excalidraw ⭐️ {% endcta %} --- 12. [Mintlify](https://github.com/mintlify/writer) - 在建置時出現的文件。 --------------------------------------------------------------- ![精簡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvk07kmn8p48cpssogov.png) 我們都知道在程式碼中建立文件非常重要，這樣我們就可以了解稍後發生的情況。但這是一個漫長的過程，而且大多數時候我們都懶得這麼做。 這就是 Mintlify 作為人工智慧文件編寫者可以幫助您在短短 1 秒內記錄程式碼的地方。哇！ 幾個月前我發現了 Mintlify，從那時起我就一直是它的粉絲。 正如我們在該公司的大多數網站上看到的那樣，他們還為任何專案提供完整的文件。我見過很多公司使用它，甚至我使用我的商務電子郵件產生了完整的文件，結果證明這是非常簡單和體面的。如果您想要這些文件，Mintlify 就是解決方案。 ![副駕駛套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7obg1a3hilqx47h6nw3o.png) copilotkit 文件也由 Mintlify 提供支持 我們在這裡要討論的主要用例是根據程式碼產生文件。當您編寫程式碼時，它會自動記錄程式碼，以便其他人更容易跟上。 您可以安裝[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=mintlify.document)或將其安裝在[IntelliJ](https://plugins.jetbrains.com/plugin/18606-mintlify-doc-writer)上。 您只需突出顯示程式碼或將遊標放在要記錄的行上。然後點選「編寫文件」按鈕（或按 ⌘ + 。） 您可以閱讀[文件](https://github.com/mintlify/writer?tab=readme-ov-file#%EF%B8%8F-mintlify-writer)和[安全指南](https://writer.mintlify.com/security)。 如果您更喜歡教程，那麼您可以觀看[Mintlify 的工作原理](https://www.loom.com/embed/3dbfcd7e0e1b47519d957746e05bf0f4)。它支援 10 多種程式語言，並支援許多文件字串格式，例如 JSDoc、reST、NumPy 等。 順便說一句，他們的網站連結是[writer.mintlify.com](https://writer.mintlify.com/) ；回購協議中目前的似乎是錯誤的。 Mintlify 是一個方便的工具，用於記錄程式碼，這是每個開發人員都應該做的事情。它使其他人更容易有效地理解您的程式碼。 它在 GitHub 上有大約 2.5k 顆星，基於 TypeScript 建置，受到許多開發人員的喜愛。 {% cta https://github.com/mintlify/writer %} Star Mintlify ⭐️ {% endcta %} --- 13. [Focusmate](https://www.focusmate.com/) - 虛擬協同辦公，可以完成任何事情。 -------------------------------------------------------------- ![焦點伴侶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwxmwxio6jq7bw2mw10j.png) 儘管我們盡量不拖延，但在編碼期間我們總是擔心拖延。對於這些情況，Focusmate 是完美的解決方案！ 這是一個共同工作的虛擬社區，您會在其中分配一位合作夥伴，確保您專注於自己的任務。 您需要與其他 Focusmate 用戶預訂會議。確定何時預訂課程後，您可以存取 Focusmate 儀表板。在那裡，您將看到一個日曆，其中包含其他使用者的可用會話時間。 ![怎麼運作的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bqjf66nrzrdjyccc6gl.png) 要與其他人預訂會議，您只需點擊日曆中的個人資料圖片，然後選擇與他們預訂會議。 ![儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21pudw9jdj90uup92k4j.png) 一旦您這樣做，Focusmate 就會推薦幾個可用使用者供您選擇。 重點是它允許[安靜模式](https://support.focusmate.com/en/articles/8060080-session-settings-my-task-quiet-mode-and-partner)，在這種模式下，人們沒有麥克風或無法說話（想想圖書館和共享空間）。 ![靜音模式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vav48ckhnn2dhikx19ju.png) 就我個人而言，我沒有嘗試過很多次，但它有一個很大的社區，所以值得一試。 --- 14. [Spark Mail](https://sparkmailapp.com/) - 優化您的電子郵件管理。 --------------------------------------------------------- ![火花郵件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/824r33nf4lc8p28fkoyp.png) Spark（非開源）不僅僅是一個電子郵件用戶端。這是關於人們應該如何溝通和組織工作的哲學。 Spark 的目標是幫助您專注於重要的事情並實現收件匣之外的目標。 他們首先使電子郵件變得智能，然後改進了團隊協作，現在他們已經解決了資訊過載問題，使電子郵件變得聚焦。 觀看快速演示，了解 Spark 的工作原理！ {% 嵌入 https://www.youtube.com/watch?v=l2QpqNw3zXU&amp;t=3s %} 我喜歡 Spark 的一些很酷的功能： ✅ 您可以設定電子郵件稍後返回收件匣的時間。 ✅ 您可以新增提醒來提示您跟進。 ✅ 您可以安排電子郵件的發送時間。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czr3jmfmkhmqj7yd264k.png) ✅ 您也可以與您的團隊合作： - 在同一地址下管理電子郵件和團隊角色。 - 即時一起撰寫電子郵件草稿。 - 將任務分配給同事並追蹤他們的狀態。 ✅ 您甚至可以將電子郵件變成帶有私人評論的聊天。 ![合作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7p0vdhd7vh5s72qjgub.png) 我知道你想知道人工智慧，所以它有很多功能，你可以讓人工智慧為你起草電子郵件或獲得一堆回覆選項。 ![你有回覆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyux9mn1wc0h5bde3w9l.png) 更好的是，您可以校對、調整語氣、改寫、擴展或縮短文本，等等。 ![已編輯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yxs7vejau2h96ell5dr.png) 但我最喜歡的是建立電子郵件簽名的選項，因為簡單的選項並不那麼有效。 ![電子郵件簽名](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhq44742us4lity50jig.png) 您可以查看[定價計劃](https://sparkmailapp.com/plans-comparison)，其中包括足夠好的免費套餐，然後下載[Spark for Windows](https://sparkmailapp.com/windows) 。也請查看他們的[部落格](https://sparkmailapp.com/blog)和[電子郵件指南](https://sparkmailapp.com/how-to)以了解更多資訊。 儘管我喜歡人工智慧，但我不喜歡人工智慧為我建立電子郵件草稿。我比較喜歡自己做，哈哈！ 不管怎樣，Spark 絕對是一種有趣的電子郵件管理方式。嘗試一下並讓我知道效果如何。 如果您正在尋找替代方案，我推薦[Inbox Zero](https://github.com/elie222/inbox-zero) ，它是開源的，我已經在我的一篇文章中介紹過，以及 SaneBox (https://www.sanebox.com/)，我沒有介紹它因為它沒有免費套餐。 --- 15. [n8n](https://github.com/n8n-io/n8n) - 工作流程自動化工具。 ----------------------------------------------------- ![n8n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pqsc84nhgj0b9dhfaxo.png) n8n 是一個可擴展的工作流程自動化工具。透過公平程式碼分發模型，n8n 將始終擁有可見的原始程式碼，可用於自託管，並允許您加入自訂函數、邏輯和應用程式。 每個開發人員都想使用的工具。畢竟，自動化是生產力和簡單性的關鍵。 ![n8n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxnp57kw5szbpj6mfs1p.png) n8n 基於節點的方法使其具有高度通用性，使您能夠將任何事物連接到任何事物。 有[400 多個集成選項](https://n8n.io/integrations)，這幾乎是瘋狂的！ 您可以看到所有[安裝](https://docs.n8n.io/choose-n8n/)選項，包括 Docker、npm 和自架。 開始使用以下命令。 ``` npx n8n ``` 此命令將下載啟動 n8n 所需的所有內容。然後，您可以透過開啟`http://localhost:5678`來存取 n8n 並開始建置工作流程。 在 YouTube 上觀看此[快速入門影片](https://www.youtube.com/watch?v=1MwSoB0gnM4)！ {% 嵌入 https://www.youtube.com/watch?v=1MwSoB0gnM4 %} 您可以閱讀[文件](https://docs.n8n.io/)並閱讀本[指南](https://docs.n8n.io/try-it-out/)，根據您的需求快速開始。 他們還提供初學者和中級[課程，](https://docs.n8n.io/courses/)以便輕鬆學習。 他們在 GitHub 上有 41k+ 顆星，並提供兩個包供整體使用。 {% cta https://github.com/n8n-io/n8n %} 明星 n8n ⭐️ {% endcta %} --- 16. [Infisical](https://github.com/Infisical/infisical) - 秘密管理平台。 ----------------------------------------------------------------- ![內部的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrolzjdnkky1r694h9av.png) Infisical 是一個開源秘密管理平台，團隊可以用它來集中 API 金鑰、資料庫憑證和設定等秘密。 他們讓每個人（而不僅僅是安全團隊）都可以更輕鬆地進行秘密管理，這意味著從頭開始重新設計整個開發人員體驗。 就我個人而言，我不介意使用 .env 文件，因為我並不特別謹慎。不過，您可以閱讀[立即停止使用 .env 檔案！](https://dev.to/gregorygaines/stop-using-env-files-now-kp0)由格雷戈里來理解。 他們提供了四種 SDK，分別用於<a href="">Node.js</a> 、 <a href="">Python</a> 、 <a href="">Java</a>和<a href="">.Net</a> 。您可以自行託管或使用他們的雲端。 開始使用以下 npm 指令。 ``` npm install @infisical/sdk ``` 這是使用入門 (Node.js SDK) 的方法。 ``` import { InfisicalClient, LogLevel } from "@infisical/sdk"; const client = new InfisicalClient({ clientId: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET", logLevel: LogLevel.Error }); const secrets = await client.listSecrets({ environment: "dev", projectId: "PROJECT_ID", path: "/foo/bar/", includeImports: false }); ``` ![內部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3eu288l470du91b66pd.png) Infisical 還提供了一組工具來自動防止 git 歷史記錄的秘密洩露。可以使用預提交掛鉤或透過與 GitHub 等平台直接整合在 Infisical CLI 層級上設定此功能。 您可以閱讀[文件](https://infisical.com/docs/documentation/getting-started/introduction)並檢查如何[安裝 CLI](https://infisical.com/docs/cli/overview) ，這是使用它的最佳方式。 Infisical 還可用於將機密注入 Kubernetes 叢集和自動部署，以便應用程式使用最新的機密。有很多整合選項可用。 ![內部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5x0tvt5ycaiqhggv6wml.png) 在使用整個原始程式碼之前一定要檢查他們的[許可證](https://github.com/Infisical/infisical/blob/main/LICENSE)，因為他們有一些受 MIT Expat 保護的企業級程式碼，但不用擔心，大部分程式碼都是免費使用的。 他們在 GitHub 上擁有超過 11k 顆星，並發布了超過 125 個版本，因此他們正在不斷發展。另外，Infiscial CLI 的安裝次數超過 540 萬次，因此非常值得信賴。 {% cta https://github.com/Infisical/infisical %} 明星 Infisical ⭐️ {% endcta %} --- 17. [Gitinfluence](https://github.com/geovanesantana/gitfluence) - 尋找正確 git 指令的 AI 工具。 -------------------------------------------------------------------------------------- ![影響力](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mr459i8l2lwa892nkae.png) 如您所知，學習每一個 git 指令是很困難的。如果用例很複雜，它就會變得複雜。 這就是為什麼 Gitinfluence 是人工智慧驅動的解決方案，可以幫助您快速找到正確的命令。借助這個出色的工具，您可以節省大量時間。 例如，這是我輸入我需要的內容後得到的回應。 ![回覆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqylmd1mim7smgc78cby.png) 它就像聽起來一樣簡單而且非常有效率。 ![怎麼運作的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfmsm5cazm7sdnbvbmqe.png) 這是一個非常早期的開源專案 (next.js)，擁有 55 顆星，但我確信它有很大的發展潛力。 {% cta https://github.com/geovanesantana/gitfluence %} 明星 Gitinfluence ⭐️ {% endcta %} --- 其中許多工具可以幫助您提高日常工作效率。 不管怎樣，如果您知道其他很棒的工具，請在評論中告訴我們。 祝你有美好的一天！直到下一次。 |如果你喜歡這類東西， 請關注我以了解更多:) | [![用戶名 Anmol_Codes 的 Twitter 個人資料](https://img.shields.io/badge/Twitter-d5d5d5?style=for-the-badge&logo=x&logoColor=0A0209)](https://twitter.com/Anmol_Codes) [![用戶名 Anmol-Baranwal 的 GitHub 個人資料](https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/Anmol-Baranwal) [![用戶名 Anmol-Baranwal 的 LinkedIn 個人資料](https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 關注 Taipy 以了解更多此類內容。 {% 嵌入 https://dev.to/taipy %} --- 原文出處：https://dev.to/taipy/17-developer-tools-that-keep-me-productive-37e2

0個讚   0留言 41瀏覽

身為優秀的初級工程師：放慢工作速度才能更快成長

我最近讀完了一本我認為今年會讀的最重要的書。[生產力低下：卡爾紐波特（Cal Newport）撰寫的《失去的成就而不倦怠的藝術》](https://www.amazon.com/Slow-Productivity-Accomplishment-Without-Burnout/dp/0593544854)是一本簡短但有價值的讀物，它揭示了在知識工作經濟中如何保持生產力。這本書圍繞著三個主要指令，以在不倦怠的情況下解鎖高品質的工作。 作者透過**“少做事”** 、 **“以更自然的節奏工作”**和**“過分注重品質”，**認為我們最好的工作尚未完成。書中探討的另一個關鍵概念是紐波特先生所說的**「偽生產力」** ，這是一種錯誤的啟發式方法，用於衡量知識工作者的生產力以及生產真正重要的工作實際上有多麼有害。 ![封面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itleydmvknx6m4erckmb.jpeg) 身為電腦科學家本人和一般主題書籍的作者，以[《數位極簡主義》](https://www.amazon.com/Digital-Minimalism-Choosing-Focused-Noisy/dp/0525536515)和《紐約時報》暢銷書[《深度工作》](https://www.amazon.com/Deep-Work-Focused-Success-Distracted/dp/1455586692)等書籍而聞名，作者面向廣大讀者、任何行業和資歷的知識工作者。在這篇文章中，我想做的是應用本書中的一些主要思想，並將它們專門應用於剛開始職業生涯的工程師。 作為Kubernetes 和雲端工程領域的一個相對較新的人，我發現在應用Cal 的許多關於生產力的想法方面取得了很大的成功，如果其他初級工程師錯過了我認為真正有幫助的想法，那將是一種恥辱。以下我將解釋一些適用於初級開發人員的最重要的想法，並在最後加入可操作提示的完整清單。 ⚠️免責聲明 > \_1- 儘管我在寫這篇文章時考慮的是初級工程師，但我將提供的大多數想法和一般技巧都適用於大多數角色和資歷。 2- 我遠距工作，並且了解如果您在辦公室環境中工作，其中一些想法可能不適用。在適用的情況下，我會盡力調整適合辦公室設定的建議。 --- 在我忘記之前，讓我感謝[Glasskube](https://github.com/glasskube/glasskube)讓我花時間建立這樣的內容。如果這是您第一次聽說我們，我們正在努力`Package Manager for Kubernetes` 。 如果您願意支持我們完成這項任務，我們將不勝感激 [⭐️ GitHub 上的 Star Glasskube 🙏](https://github.com/glasskube/glasskube) [![感謝您的支持](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExOHZxc3Nxbjdyem9kY24xd3k5M3EwY2Q1dmQ3OTA0aTh4c3cycmpkdyZlcD12MV9naWZzX3NlYXJjaCZjdD1n/l3q2wJsC23ikJg9xe/200.webp)](https://github.com/glasskube/glasskube) --- 高品質工作和偽生產力 ---------- 你如何判斷你無法衡量的東西？身為工程師，你如何知道自己的工作做得好不好？您如何知道您是否是一名高效的團隊成員，或者您的工作是否對整體業務產生真正的影響？如果您是農民或工廠工人，衡量您的生產力會容易得多。然而，在知識工作中，定義**「生產力」要困難得多。** 現在，由於每個人都只需一條 DM 或 Slack 訊息即可到達，因此衡量我們影響力的啟發式方法是偽生產力。這涵蓋了圍繞我們要做的實際工作的所有工作。當我們回覆電子郵件、回覆私訊、花時間參加會議和檢查指標時，我們會顯得富有成效。我們經常感到有必要執行這些任務，尤其是當我們花費大量時間處理尚未產生明顯輸出的事情時。 ![忙碌的](https://media2.giphy.com/media/Oj5w7lOaR5ieNpuBhn/200.webp?cid=ecf05e472m5o323f4o1bhlr55xhxt84mjffehbdlopyw6ouq&ep=v1_gifs_search&rid=200.webp&ct=g) > *偽生產力是表演性的，會妨礙「真正的工作」。* 到底什麼是**「真正的工作」** ？當然，這對每個工程師來說都會改變，但如果您需要適用於您的定義，這個問題可能會對您有所幫助。 試想一下，未來的自己，**最讓自己感到驕傲的作品是**什麼？您會記住您回覆的所有電子郵件和您參加的所有會議嗎？可能不會，對您來說重要的是您在不執行所有其他任務的情況下能夠完成的高品質工作。 書中的三個想法之一是**「關注品質」** 。如果您是初級工程師，我會先嘗試將這一點內化，因為這是您可以依靠的職業生涯進步的工作，也是您退休後唯一關心的工作。有兩件事可能會妨礙高品質的工作。第一個是你必須完成的所有偽生產力任務，第二個是你專注的能力。 分心是無聲殺手 ------- 每個人都有自己的優點和缺點。不幸的是，無論你獨特的品質和技能如何讓你脫穎而出，除非你**能夠持續一段時間的認知努力，否則這一切都沒關係。**由於智慧型手機和演算法增強的應用程式和服務的興起，我們的注意力被巧妙地設計來吸引我們的注意力。 ![分心](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExdTVibzBoMmxnemRxMmF1amF0bmxkdnBmdnZ6b3E0dHFsN200bG9xeiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/DPXZpkETwO02ew82bQ/giphy.gif) > *您最後一次能夠坐下來閱讀超過 15 分鐘而不拿起手機是什麼時候？如果你不介意我問的話，你最後一次孤單地去洗手間，看不到手機是什麼時候？* 時不時尋求娛樂或擺脫無聊的問題是不好的，原因有很多，很多人已經比我闡述得更好了。所以我只關注其中之一。 > *作為一名嶄露頭角的知識工作者，您的價值在於您能夠**專注**於花大量時間來製定解決方案、服務、專案等。**這一點。*** 在許多遠端和工程環境中，幹擾可能來自任何地方。在專業方面，您必須考慮有多少工具和平台以您的方式發送通知。你們的會議開多久？您是否打開了相機並只有您可以看到第二個螢幕？ 就個人而言，**了解您的觸發因素**很重要。 Reddit 對您有特別大的吸引力嗎？危險在於，大多數幹擾源都可以被認為對你的工作有幫助。您可能會聽到諸如“如果沒有 YouTube 大學我會怎麼樣？”之類的理由。或“我如何在不使用 Reddit 或 X 的情況下了解最新動態？” 我想傳達的最重要的訊息之一是**，如果你分心，你根本無法完成高品質的工作。**避免分心說起來容易做起來難，尤其是當偽生產力（及其所有分散注意力的脈衝和通知鈴聲）成為衡量產出的方式時。 知識型員工的薪水是多少？ ------------ 慢生產力的第二個想法是**「以更自然的節奏工作」** 。為了得出這個結論，紐波特先生在書中回顧了過去，試圖了解過去的知識工作者（作家、科學家、哲學家）如何實現生產力。他發現，我們現在認為瑪麗·居里和簡·奧斯汀等人是非常有生產力的個人，貢獻了巨大影響力和有價值的工作。但如果我們觀察這些重要人物生活中的任何特定年份，我們會發現他們並不是特別忙碌。 眾所周知，瑪麗·居禮會休長假，中斷重要的實驗，而這些實驗最終將獲得諾貝爾獎，因為她就是這樣安排自己和家人的生活的。 我想讓你考慮的是，將生產力的概念應用到你的生活中，你的職業生涯將會很長，並且會有起起落落。緊張工作的時刻和相對無所事事的其他時刻。你必須同樣接受它們，因為工程生產力要求你真正理解你正在做的事情、周圍的環境，以及採用某種特定方法而不是另一種方法的原因。 這是卡爾紐波特在他的播客中提到的軼事，我覺得很合適。在碩士和博士生的論文會議上，卡爾注意到演講者強調“投入你的寫作時間”，並使用諸如“你今天的寫作投入了嗎？”之類的短語。輪到他時，他問： **「忘了寫作吧，你有時間思考嗎？」。**我們經常將忙碌的工作與我們的真實工作混淆：用我們的大腦創造價值 > *思考和理解是在職業生涯中增加價值和成長的**不可妥協的先決條件**，並且它們需要時間。* ![程式設計師思維](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utuui505m5rrr6vedcnx.png) 就拿下面的例子來說， > *想像一下，您作為新成立的雲端工程師加入團隊，並學習如何使用 ArgoCD 和 GitOps 方法來部署應用程式。團隊負責人向您展示 ArgoCD 監控目標 Git 分支，確保 Kubernetes 叢集的狀態與其相符。您將成為管理此設定的專家，透過指向先前的分支狀態輕鬆回滾部署。但是，當您加入另一個使用 Git 標籤而不是分支，或者 Flux 而不是 ArgoCD，或者使用完全不同的持續交付方法的團隊時，會發生什麼？**如果你不了解高層概念、機制及其背後的原因，你就不會成為一個有效的團隊成員。*** 不要誤認為您只是為了維護其他人建立的系統。你的報酬是為了理解、思考、適應、學習和改進。如果你保護你的專注能力，你的學習能力就會完好無損。繼續學習，你將永遠有價值。真正享受你正在學習的東西嗎？**那你就勢不可擋了**。 ### 重新思考你的一周 為了完全掌控你的職業生涯，了解你想要如何成長，並更接近生產出讓你在幾十年後感到自豪的高品質工作，你需要優先考慮你投入時間的專案或「目標」。 通常，**我們會不知不覺地同時關注太多專案**。我們可能會在開始一個新的副專案、到處寫一篇部落格文章的同時學習一種新的編碼語言，同時處理本週工作看板上出現的任務。這種做法需要停止。您必須退後一步，確定您想要優先考慮的專案，並一次處理一個或最多兩個專案。 ![一週計劃](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExOTk4emQ1NnNyNm9tZnF1Y3VjZTRmeWc3N2lleGF0b3Q1c2sxa2FobiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/RN6Y85cTp5XJli6JIN/giphy.gif) 並不是每份工作都足夠靈活，可以讓您在您想做的時候做您想做的事。但是，如果您清楚地了解自己的職業優先事項，則可以將您的任務與這些優先事項結合起來，並在出現時提出要求。作為初級人員，甚至更高級別的人員，您將不得不執行您可能不喜歡的任務。但您至少可以嘗試減少花在這些任務上的時間，以專注於您想要擅長的工作。 **使用案例：** > *假設您必須平衡兩種類型的任務：**內部開發人員支援**（您不喜歡）和**使用 Terraform 的 Account Factory 實現新的基礎設施配置平台**（這讓您感到興奮）。您可以規劃不間斷的時間段來完成所需的任務，並將與支援相關的任務捆綁到其他時間段。多工處理以及在兩項任務之間共享心理頻寬會降低每項任務的品質。* 紐波特先生談到的一個有用的策略是有一個視覺和有序的任務板，由**“暫存池”隔開，“暫存池”**是按順序組織的計劃工作，但尚未進行工作， **“活動」**泳道，這是您實際正在做的事情以及**「完成」**欄，您可能已經在使用了。除了使用看板來包含您擁有的任務之外，請確保任務即時代表您將執行任務的順序以及您目前正在處理的任務。 確保本週內向您提出新的臨時任務的任何人都必須傳達任務在任務池中的位置以及完成該任務需要多長時間。如果必須將傳入任務推到線路的前面，請確保與任何潛在的利害關係人溝通這可能會導致清單中其他任務的延遲。 ![Trello 板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66no4q6xmtfd4w1h6g8l.png) 你的經理是你的盟友 --------- 您可能會因為以「自私」的任務偏好來接近您的經理而感到內疚，但您不應該這樣做。將自己置於經理、團隊領導或老闆的立場上是很有幫助的。如果你是他們團隊的一員，老闆幾乎總是希望你做一件事。 > ***經理只是希望你減輕他們自己所承受的壓力。**經理只是想讓你有信心，如果你被指派去做某件事，你將能夠處理好它。* 優秀的管理者會非常欣賞團隊成員齊心協力，以系統化的、溝通的方式工作，重視品質而不是偽生產力。如果您能夠有效地向經理傳達您手上的任務以及交付任務的順序，他們現在就可以放心，任務一定會完成。然後由你來安排你的一天，以確保你交付並保持經理對你的信心。 ![老闆](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExcTExdjIxYjM1NTBybGN3NWc2YmQxNnVuZWZ6bXR1ajdnYWphZXdzcyZlcD12MV9naWZzX3NlYXJjaCZjdD1n/26wkRxKJ9yUZzlorK/200.webp) **向你的經理提出一些想法：** > - 在一對一會議中溝通目標和專案。 - 將這些目標與公司的年度職業發展評估保持一致。 - 在分診會議之前查看分診任務頻道，以了解您將自願執行哪些任務。 - 請求更多資源來幫助您創造高品質的作品。 - 如果遠距工作，請協調溝通和回覆時間。 可行的提示 ----- ### 使用時間限制，而不是待辦事項列表 待辦事項清單對我來說並不完全有效，這取決於我的感受或我認為一項任務可能需要多長時間，我經常最終會挑选和選擇任務，這導致我拖掉那些我不那麼興奮的任務日復一日地無止盡地完成和推動任務。 **另一方面，時間阻塞增加了待辦事項清單中所缺少的結構**。透過準確規劃何時進行深度工作、與他人交流和休息，您會驚訝地發現自己每天擁有如此多的優質時間。時間劃分可以讓你一次規劃你的一周或一天，決定你的行動計劃，並以更有目的的方式度過你的一天。 > *一個好的經驗法則是**預訂比您認為完成任務所需的時間更多的時間**。我們往往會低估任務所需的時間。如果任務執行時間比預期長，請劃掉即將到來的任務並相應地修改時間表。* 如果你有一系列小任務，請將它們捆綁起來並在指定的時間段內執行。如果您知道需要與其他人就某個主題進行協作，請劃出專門用於溝通的時間，並盡力在指定時間內完成所有工作。這樣，您就可以在處理需要高度專注的專案時關閉通知並減少干擾。 紐波特先生是時間劃分的大力支持者，甚至有一個[時間劃分規劃器，您可以購買](https://www.timeblockplanner.com/)來追蹤四個月的工作量。當然，你不需要它來開始限制自己的時間，但是為此目的準備一本專門的日記可能會很方便。該雜誌還提供了關於如何充分利用這種組織工作方法的更深入的指南。 ![時間阻礙者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h33bqu5qvvgnc42u6pa2.png) 我喜歡在我的時間規劃器中加入一個附加層，將其與線上[番茄計時器](https://pomofocus.io/)配對。我將每個時間段與相同持續時間的番茄鐘相匹配。在番茄工作期間，不允許有任何干擾。在此期間只能完成在計劃表中指定的任務。 ### 減少會議 對我們大多數人來說，我們在開會時沒有選擇的自由。但是，我們可以建議每周至少一次無會議日。如果我們發現會議經常超出規定的時間，我們可以提倡更加註意每個人的時間。推動會議準備工作是影響我們參加的會議長度的另一種方式。 大多數人同樣對會議感到不知所措，並且會欣賞會議的減少，只要工作和協作的品質不受影響。 ### 狀態更新、通知阻止和電話限制 大多數 IM 平台（例如 Slack、Discord）甚至桌面和行動裝置都具有狀態模式。**使用這些狀態模式與其他人溝通，無論您是否可以進行同步交互，或者是否正在進行深度工作會話。** 額外的好處是，這些狀態模式還可以阻止或修改通知設置，減少甚至完全消除 ping 噪音和彈出視窗。打破深度專注時間的成本很高，因此不要因為無法始終 100% 進行即時互動而感到難過。 ![不和諧截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf7ap1x23czmb5hy1m86.png) 如果您仍然不確定是否要應用如此嚴格的限制，請考慮發表在《自然》雜誌上的這項研究的結果，該研究發現行動裝置的簡單存在會降低基礎注意力表現。 ### 追蹤個人指標 除非您追蹤一些個人關鍵指標，否則很難知道您是否發揮了自己的潛力，或者是否在您關心的方面取得了進展。 **我認為追蹤有用的指標包括：** - 鍛鍊身體（我那天沒有運動嗎）。 - 工作時間很深。 - 健康飲食。 - 我是否執行了關機程序？ ![個人指標](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvt4ukbopre2fjf4bhxj.png) ### 有一個關機儀式 認知能力是一種有限的資源。就像我們的身體一樣，它需要時間來恢復和補充能量，尤其是在高度專注的富有成效的工作日之後。由於通知或出於習慣，您可能會想查看電子郵件、檢查某些 KPI，或跟進未完成的話題或無法完全完成的煩人任務。 透過關閉例程，您可以執行一些任務來評估白天完成的工作。如果有任何未完成的執行緒或任務需要延續到第二天，關閉例程就是解決它們的時間。一些可能的關閉例行任務可能是： - 檢查電子郵件。 - 檢查通知。 - 更新門票。 - 與隊友溝通。 - 檢查並記錄任何未完成的任務。 - 加入明天要考慮的任務或想法。 - 最後一次檢查 KPI 和指標。 - 更新個人指標。 ### 安排專心思考的時間 這可能是我個人最難應用的技巧之一，因為我經常以「了解情況」或只是「好奇」為幌子，證明不斷消費播客和有聲讀物是合理的。事實是，有這麼多有趣且相關的內容，我們面臨著不斷消費資訊的風險。這種做法可能會適得其反，無法保持高度的專注力。如果您不斷地消費內容，那麼實際處理您所接受的內容的時間就會減少。 **對我來說，安排不分心的思考時間意味著改變這些行為：** - 不聽任何聲音就做飯 - 每週幾次不戴耳機去雜貨店購物 - 淋浴時揚聲器不會發出轟鳴聲 - 浴室裡沒有電話，就此而言 不要誤會我的意思，消費優質內容是有時間和地點的。我永遠不會停止聽播客或有聲讀物，但我會更加註意讓我的大腦不間斷地思考。 ### ChatGPT 真的很擅長解釋事情 我們都知道周遭的人對我們的影響有多大。希望您在職業生涯中能夠擁有與才華橫溢、經驗豐富的高級工程師一起工作的經驗，並向他們學習。 ChatGPT 是一位資深工程師，他總是坐在您旁邊，隨時準備幫助您了解手邊的問題。 **請注意，我建議將 ChatGPT 視為高級隊友，而不是私人助理。**您不會要求高階團隊成員為您做這項工作，相反，如果您對某些主題缺乏理解，您會要求解釋。 當然，請注意，目前 LLMs 的最新技術仍然容易產生幻覺，因此您不應該將其輸出帶到銀行。然而，使用 LLMs 作為工具來解決複雜的概念並獲得更深入的理解是老一輩只能夢想的作弊程式碼。 ### 結論 如果我是一名年輕的初級工程師，現在開始我的職業生涯，我可能會對外界的許多相互矛盾的訊號感到不安。**人工智慧會搶走我的工作嗎？怎麼樣才能在眾多才華洋溢的後起之秀中脫穎而出？我怎樣才能保持我的技能敏銳和相關？**如果你有這些充滿焦慮的想法，沒關係。感到不確定是完全合理的，相信我，你並不是唯一一個事後對自己的職業決定進行猜測的人。 沒有人知道十年後、五年後、甚至一年後科技領域會是什麼樣子。既然我們無法控制未來，那就專注於你能控制的事情。受加州紐波特原則的啟發，應對不確定性最接近的解藥就是自我投資。 **你就是你最大的資產。**您完成高品質工作的能力將使您在工作場所保持相關性。高品質的工作需要理解認知努力是有限的。這不是一蹴可幾的事情，分心會削弱你集中註意力的能力。不良的認知習慣會讓你完全失去前進的動力。 退後一步，深吸一口氣，想像一個長期、不斷發展的職業生涯。請記住，沒有哪一天是特別重要的。工作節奏應優先考慮理解和建設性思維，而不是簡單地完成任務。**您建立的系統和您選擇保護的優先事項將為您將來自豪的職業生涯奠定基礎。** --- 幫助我們製作更多這樣的內容！ -------------- 在[Glasskube，](https://github.com/glasskube/glasskube)我們在此類內容上投入了大量精力，並`next generation package manager for Kubernetes` 。 如果您從我們所做的工作中獲得價值，我們將不勝感激 [⭐️ GitHub 上的 Star Glasskube 🙏](https://github.com/glasskube/glasskube) [![github 上的明星](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExdnhibjU3MnRqeDVydm83ZXNiMHF1YXQ3NW9iMTEwcjFuZmhqcG8ydSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XaFhFM2lVRoVa/giphy.gif)](https://github.com/glasskube/glasskube) --- 原文出處：https://dev.to/glasskube/standout-as-a-junior-engineer-work-slower-to-grow-faster-4ac3

0個讚   0留言 79瀏覽

如何建立基本的 RAG 應用程式

生成式人工智慧的出現使我們建構的應用程式具有新的功能成為可能。法學碩士可以以令人難以置信的技巧回答使用者的問題。那麼，為什麼不將它們用作我們系統的一部分呢？如果用戶需要協助使用該應用程式，我們可以加入聊天功能，法學碩士將回答用戶的所有問題。如果我們的應用程式有解釋重要概念的部落格文章，而不是讓用戶閱讀所有內容來獲取所需的知識，它可以只詢問並立即得到回應。 為什麼是拉格？ ------- 我們決定將法學碩士整合到我們的應用程式中，為我們的用戶帶來這些功能。然而，我們很快就發現該模型無法回答使用者的問題。它沒有任何關於我們的應用程式的資訊！如果需要回答的資訊不在LLM的訓練資料中，則無法回答。更糟的是，如果它不知道答案，它可能會產生一個完全錯誤的事實的幻覺！這很糟糕，那麼我們該如何解決這個問題呢？採用 Transformer 架構的法學碩士已展現出優異的情境學習能力。因此，我們只需在提示中傳遞它所需的所有事實以及問題即可！呃哦，每次提示都塞滿所有資料肯定會很貴。那麼，我們該怎麼做呢？ 什麼是RAG？ ------- RAG 代表**檢索增強產生**。 RAG與變形金剛一起誕生。最初，它被用來用額外的事實來增強法學碩士的預訓練資料。一旦 Transformers 的情境學習能力變得明顯，在推理過程中增強提示也成為一種常見做法。 基本的 RAG 管道由三個步驟組成：索引、檢索和產生。法學碩士需要回答的所有資訊都在向量資料庫中建立了索引。當使用者提出問題時，我們可以從該向量資料庫中檢索資訊的相關部分。最後，結合相關資訊和使用者的問題，我們可以提示法學碩士根據我們作為上下文提供的資訊給出答案。讓我們更詳細地看看如何實現這一目標。 ### 索引 首先，我們從任何地方提取模型所需的資訊。生成模型使用純文字（某些模型也可以使用圖像或其他格式，這些格式也可以被索引，但這是另一個主題）。如果訊息已經是純文字形式，那麼我們很幸運。但它也可能存在於 PDF 文件、Word 文件、Excel、Markdown 等。 ![索引過程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rbz60uizoiswi8lng0k.png) 一旦資訊採用文字格式，我們就可以將其儲存在向量資料庫中。向量資料庫將儲存該文字的嵌入表示。這將使我們能夠搜尋與另一個文本具有相似嵌入表示的文本部分，因此它們涉及相似的概念。我們將整個文字分成更小的部分或區塊，計算每個部分的嵌入表示，最後將它們儲存在向量資料庫中。 ### 恢復 當使用者問我們一個問題時，我們可以使用我們用於索引資料的相同嵌入模型將該問題轉換為向量表示。利用該向量表示，我們將計算問題與向量資料庫中儲存的每個區塊之間的相似度因子。我們將選擇與查詢最相似的前 K 個區塊，因此它們的內容與問題的概念相同（因此它們可能包含答案）。 ![檢索流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isms443c1ytjcazo5t17.png) ### 世代 系統會建立一個提示，將使用者的問題和相關上下文放在一起，以幫助 LLM 回答。我們也可能包含用戶和人工智慧助理之間對話的先前訊息。 LLM 根據上下文而不是之前學習的預訓練資料為使用者產生答案。 ![檢索流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ih4417ubpht7kyskav.png) 例子 -- 對於這個例子，我們將收錄一篇名為「蘭格語言模型的檢索增強生成：調查」的論文。我們將使用本文中包含的資訊查詢LLM，以便它可以回答使用者對其內容的疑問。您可以在[本文提供的 Google Colab 筆記本](https://colab.research.google.com/drive/1mFmPN0GBHpS-kMDMuU8EDrWu1KENy69e?usp=sharing)中遵循此範例。 首先，我們將載入 PDF 文件並使用 LangChain 的 PyPDF 連接器對其進行解析。 ![使用 pypdf 載入文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mggsh8vxc1i6aknze50x.png) 一旦我們從文件中獲得文本，我們就必須將其分割成更小的區塊。我們可以使用 LangChain 的可用分割器，例如本例中的 RecursiveCharacterSplitter： ![將文件分割成區塊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92h7gf78bv699oup9xfc.png) 我們將使用 BGE-small，一種開源嵌入模型。我們將從 HuggingFace Hub 下載它並在所有區塊上執行它以計算它們的向量表示。 ![計算嵌入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9qoe5p4b0t37gooh4ix.png) 一旦我們有了所有區塊的向量表示，我們就可以建立一個記憶體向量資料庫並將所有向量儲存在其中。對於此範例，我們將使用 FAISS 資料庫。 ![將嵌入載入到向量資料庫中](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvw8o3f9hwtafr3olord.png) 資料庫現已建立。現在，我們將接受用戶對此資訊的查詢。在這種情況下，用戶詢問 Naive RAG 的缺點是什麼。我們使用與先前相同的嵌入模型對該查詢進行編碼。然後，我們檢索與該查詢最相似的前 5 個區塊。 ![從向量資料庫中檢索與查詢類似的文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3euuftp1j1edlvj8oau.png) 檢索相關上下文後，我們使用此資訊和使用者的原始查詢來建立提示。在這個例子中，我們將使用克勞德的俳句作為法學碩士： ![使用上下文和查詢來產生答案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdl7s7gownp37psg9084.png) 常見問題和陷阱 ------- 正如標題所暗示的，該解決方案是一個基本的或簡單的 RAG 實作。它將幫助您的申請充分利用其所使用的法學碩士和您的資料。但它並不適用於所有情況。這些只是 RAG 最常見的問題： - **檢索不相關的資訊。**如果檢索器從向量資料庫中獲取與問題無關的資料，它將混淆試圖回答問題的模型。這可能會導致不使用上下文來回答問題，或回答與所問內容不同的問題。 - **錯過重要資訊。**也許回答問題所需的資訊不在資料庫中。也許檢索機制無法找到相關的區塊。我們必須找到方法來幫助檢索器輕鬆、更可靠地找到所需的資訊。 - **產生上下文不支援的回應。**如果上下文有模型需要的訊息，但它不使用它而是依賴自己的預訓練資料，那麼這一切都是徒勞的。預訓練資料中的資訊可能已過時或錯誤。我們必須支持模型始終使用上下文來回答，或者如果它無法從上下文中回答，則回答「我不知道」。 - **對查詢的回應不相關。** LLM 可能會使用您提供的所有資訊來產生回應，但這並不意味著它回答了使用者的問題。重要的是，模型必須堅持使用者的原始問題，而不是迷失在大量資訊中。 - **相似上下文導致的冗餘響應。**當我們攝取具有相似資訊的多個文件時，檢索器有可能會獲得多個幾乎相同的資訊區塊。這可能會導致法學碩士在其回復中多次重複相同的訊息。 如何避免這些問題呢？ ---------- 為了避免這些問題，簡單的 RAG 管道可能還不夠。我們需要建立一個更先進、更複雜的RAG系統。存在經過測試的技術來解決我們提出的問題。我們可以將它們合併到 RAG 管道中，以提高 RAG 應用程式的效能。 另一個需要解決的重要問題是，為了改進您的 RAG 應用程式，您需要能夠測量和評估整個過程。你無法改進你無法衡量的東西。另外，當您進行評估時，您可能會發現基本的 RAG 設定足以滿足您的用例，並且不需要使其過於複雜。畢竟，即使是非常基本的 RAG 實施也可以極大地改進您的 LLM 支援的應用程式。 在以後的文章中，我將更詳細地解釋先進的 RAG 技術，這將幫助我們避免常見問題並將我們的 RAG 應用程式提升到新的水平。 --- 原文出處：https://dev.to/rogiia/how-to-build-a-basic-rag-app-h9p

0個讚   0留言 33瀏覽

每個開發人員都需要了解的 300 多個免費 API

目錄 == 1. [天氣 API ⛅️🌦️🌩️](#weather-apis) 2. [匯率 API 💱💲💹](#exchange-rates-apis) 3. [加密貨幣 API ₿💰🔗](#cryptocurrency-apis) 4. [佔位符圖像 API 📸🖼️🎨](#placeholder-image-apis) 5. [隨機產生器 API 🎲🔀🎰](#random-generators-apis) 6. [新聞 API 📰📢🗞️](#news-apis) 7. [地圖與地理定位 API 🗺️📍🌍](#maps-and-geolocation-apis) 8. [搜尋 API 🔍📑🕵️](#search-apis) 9. [機器學習 API 🤖🧠🔮](#machine-learning-apis) 10. [截圖與圖片 API 📷🌐🖼️](#screenshot-and-picture-apis) 11. [SEO API 🔍📈💡](#seo-apis) 12. [購物 API 🛍️🛒📦](#shopping-apis) 13. [開發者 API 💻🔧🛠️](#developer-apis) 14. [旅行和交流 API 🛫🚗🚉](#travel-and-transportation-apis) 15. [通訊 API 📞💬📧](#communication-apis) 16. [支付和金融 API 💳💸🏦](#payment-and-financial-apis) 17. [分析與監控 API 📊📈📉](#analytics-and-monitoring-apis) 18. [自然語言處理 (NLP) API 🗣️🔍💬](#natural-language-processing-nlp-apis) 19. [實用程式和工具 API 🛠️🔧⚙️](#utilities-and-tools-apis) 20. [政府和開放資料 API 🏛️📜📊](#government-and-open-data-apis) [Qit.tools](https://qit.tools/) - ⚡ 互動式線上網路 🛠️ 工具 --- 天氣 API ⛅️🌦️🌩️ ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |打開天氣地圖 |全球天氣資料，包括預報和當前天氣 | 60 次通話/分鐘 | API 金鑰 |[連結](https://openweathermap.org/api)| |天氣堆疊 |即時與歷史天氣資料 |每月 1000 通電話 | API 金鑰 |[連結](https://weatherstack.com/documentation)| |天氣比特 |天氣預報資料，包括預報和當前天氣 |每天 500 通電話 | API 金鑰 |[連結](https://www.weatherbit.io/api)| |克利馬塞爾|超本地天氣資料與見解 |每天 100 通電話 | API 金鑰 |[連結](https://docs.climacell.co/)| |準確天氣 |天氣預報|每天 50 通電話 | API 金鑰 |[連結](https://developer.accuweather.com/apis)| |視覺穿越|歷史和當前天氣資料|每天 1000 通電話 | API 金鑰 |[連結](https://www.visualcrossing.com/weather-api)| | 2020 年天氣 |天氣預報 |每天 100 通電話 | API 金鑰 |[連結](https://www.weather2020.com/weather-api/)| |風暴玻璃|海洋氣象資料|每天 50 通電話 | API 金鑰 |[連結](https://stormglass.io/docs/)| |天氣 API |天氣預報資料，包括預報和當前天氣 |每月 1000 通電話 | API 金鑰 |[連結](https://www.weatherapi.com/docs/)| | Aeris 天氣 |天氣資料和影像|每月 1000 通電話 | API 金鑰 |[連結](https://www.aerisweather.com/support/docs/api/)| |這裡 天氣 |天氣預報資料，包括預報和當前天氣 |每月 25 萬通電話 | API 金鑰 |[連結](https://developer.here.com/documentation/weather/dev_guide/index.html)| |世界天氣在線|全球天氣資料，包括預報和歷史天氣|每天 500 通電話 | API 金鑰 |[連結](https://www.worldweatheronline.com/developer/)| |明天.io |超本地天氣資料與見解 |每天 100 通電話 | API 金鑰 |[連結](https://docs.tomorrow.io/)| |黑暗的天空|天氣預報資料，包括預報和當前天氣 |每天 1000 通電話 | API 金鑰 |[連結](https://darksky.net/dev)| |國家氣象局|美國政府天氣資料|無限 |無 |[連結](https://www.weather.gov/documentation/services-web-api)| --- 匯率 API 💱💲💹 ---------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |匯率-API | 160 種貨幣的準確匯率 |每月 1500 通電話 | API 金鑰 |[連結](https://www.exchangerate-api.com/docs)| |開放匯率|即時與歷史匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://docs.openexchangerates.org/)| |貨幣層 | 168 種世界貨幣即時匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://currencylayer.com/documentation)| |固定器|即時匯率與貨幣換算|每月 1000 通電話 | API 金鑰 |[連結](https://fixer.io/documentation)| | XE 貨幣資料 |即時與歷史匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://xecdapi.xe.com/)| |外匯匯率 API |即時與歷史外匯匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://www.forexrateapi.com/documentation)| |費率API |免費外匯匯率和貨幣兌換|無限|無 |[連結](https://ratesapi.io/documentation/)| |匯率API | 160 種貨幣的準確匯率 |每月 1500 通電話 | API 金鑰 |[連結](https://www.exchangerate-api.com/docs)| | OANDA 匯率 |即時與歷史匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://www.oanda.com/fx-for-business/fx-data-services)| |貨幣轉換器 API |即時匯率與貨幣換算 |每月 1000 通電話 | API 金鑰 |[連結](https://www.currencyconverterapi.com/docs)| |匯率API |匯率與貨幣換算|每月 1000 通電話 | API 金鑰 |[連結](https://www.exchangeratesapi.io/documentation)| |阿爾法優勢|即時與歷史匯率 |每天 500 通電話 | API 金鑰 |[連結](https://www.alphavantage.co/documentation/)| |西點燃|外匯匯率API |每月 1000 通電話 | API 金鑰 |[連結](https://www.xignite.com/xforex-rates)| | Everbase 貨幣 |匯率與貨幣換算|每月 1000 通電話 | API 金鑰 |[連結](https://currency-api.everbase.com/documentation)| |匯率主機 |外匯匯率API |無限|無 |[連結](https://exchangerate.host/#/#docs)| --- 加密貨幣 API ₿💰🔗 ------------ |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| | CoinGecko | 幣虎超過 6000 種貨幣的加密貨幣資料 |無限|無 |[連結](https://www.coingecko.com/en/api/documentation)| | CoinMarketCap |加密貨幣市值排名、圖表等 |每天 333 通電話 | API 金鑰 |[連結](https://coinmarketcap.com/api/documentation/)| |加密貨幣比較 |加密貨幣資料與價格比較 |每月 25 萬通電話 | API 金鑰 |[連結](https://min-api.cryptocompare.com/documentation)| |辣椒粉 |加密貨幣市場資料|每月 25,000 通電話 | API 金鑰 |[連結](https://api.coinpaprika.com)| |經濟學 |加密貨幣市值和定價資料|每月 125,000 通電話 | API 金鑰 |[連結](https://nomics.com/docs/)| |幣API |即時與歷史加密貨幣資料 |每月 100,000 通電話 | API 金鑰 |[連結](https://docs.coinapi.io/)| |梅薩裡 |加密貨幣資料與研究 |每天 1000 通電話 | API 金鑰 |[連結](https://messari.io/api)| |硬幣傳說 |加密貨幣市場資料 |無限|無 |[連結](https://www.coinlore.com/cryptocurrency-data-api)| |幣庫 |加密貨幣資料，包括價格和市值 |每天 100 個請求 | API 金鑰 |[連結](https://coinlib.io/apidocs)| | Bitfinex |加密貨幣交易平台API |無限|無 |[連結](https://docs.bitfinex.com/docs)| |比特雷克斯 |加密貨幣交易平台API |無限|無 |[連結](https://bittrex.github.io/api/v3)| |幣安 |加密貨幣交易平台API |無限|無 |[連結](https://binance-docs.github.io/apidocs/spot/en/)| |庫幣 |加密貨幣交易平台API |無限|無 |[連結](https://docs.kucoin.com/)| |克拉肯 |加密貨幣交易平台API |無限|無 |[連結](https://www.kraken.com/features/api)| |波蘭 |加密貨幣交易平台API |無限|無 |[連結](https://docs.poloniex.com/)| --- 佔位符圖像 API 📸🖼️🎨 -------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |洛雷姆·皮克蘇姆 |隨機佔位符圖像 |無限|無 |[連結](https://picsum.photos/)| |佔位符.com |自訂佔位符影像 |無限|無 |[連結](https://placeholder.com/)| | Unsplash 來源 |高品質佔位符影像 |無限|無 |[連結](https://source.unsplash.com/)| |放置小貓 |小貓的佔位圖像 |無限|無 |[連結](https://placekitten.com/)| |地點狗 |狗的佔位符圖像 |無限|無 |[連結](https://place.dog/)| |占星者 |熊的佔位符影像 |無限|無 |[連結](https://placebear.com/)| |填充穆雷 |比爾·莫瑞 (Bill Murray) 的佔位符圖像 |無限|無 |[連結](http://www.fillmurray.com/)| | FakerAPI |虛假資料和占位符圖像 |無限|無 |[連結](https://fakerapi.it/en)| |虛擬圖像.com |自訂佔位符影像 |無限|無 |[連結](https://dummyimage.com/)| | ImagePlaceholder.com |自訂佔位符影像 |無限|無 |[連結](https://imageplaceholder.com/)| |佔位符影像 |帶有自訂文字的佔位符圖像 |無限|無 |[連結](https://placeholderimage.dev/)| | Picsum.照片 |來自 Unsplash 的隨機圖像 |無限|無 |[連結](https://picsum.photos/)| |隨機影像API |隨機佔位符圖像 |無限|無 |[連結](https://random.imagecdn.app/)| |普拉霍爾德.it |自訂佔位符影像 |無限|無 |[連結](https://placehold.it/)| | LoremFlickr |隨機佔位符圖像 |無限|無 |[連結](https://loremflickr.com/)| --- 隨機產生器 API 🎲🔀🎰 ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |隨機.org |真隨機數生成| 1,000,000 位/天 | API 金鑰 |[連結](https://www.random.org/)| |隨機用戶 |產生隨機用戶資料 |無限|無 |[連結](https://randomuser.me/)| | FakerAPI |虛假資料生成 |無限|無 |[連結](https://fakerapi.it/en)| | UUID 產生器 |產生隨機 UUID |無限|無 |[連結](https://www.uuidgenerator.net/)| |骰子熊頭像 |產生隨機頭像 |無限|無 |[連結](https://avatars.dicebear.com/)| |密碼產生器 |產生隨機密碼 |無限|無 |[連結](https://passwordwolf.com/api/)| |貓的事實|隨機貓的事實|無限|無 |[連結](https://catfact.ninja/)| |有趣的翻譯 |生成有趣的翻譯 |每天 5 個請求 |無 |[連結](https://funtranslations.com/api)| |行情.休息 |產生隨機報價 | 10 個請求/小時 |無 |[連結](https://quotes.rest/)| |通知單|隨機建議生成器 |無限|無 |[連結](https://api.adviceslip.com/)| |無聊API |活動建議 |無限|無 |[連結](https://www.boredapi.com/)| |非常感謝產生隨機佔位符文字 |無限|無 |[連結](https://loripsum.net/)| |烏納梅斯 |產生隨機名稱 |無限|無 |[連結](https://uinames.com/)| |皮普|產生隨機人物檔案 |無限|無 |[連結](https://pipl.ir/)| |隨機資料API |產生隨機資料進行測試 |無限|無 |[連結](https://random-data-api.com/)| --- 新聞 API 📰📢🗞️ ----------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |新聞API |聚合各種來源的新聞文章 |每天 500 通電話 | API 金鑰 |[連結](https://newsapi.org/docs)| |當前 API |即時新聞資料 |每月 1000 通電話 | API 金鑰 |[連結](https://currentsapi.services/en/docs/)| |上下文網路新聞 |即時新聞搜尋與發現|每月 10,000 通電話 | API 金鑰 |[連結](https://rapidapi.com/contextualwebsearch/api/web-search)| |必應新聞搜尋 |微軟Bing的新聞搜尋結果|每月 3000 通電話 | API 金鑰 |[連結](https://docs.microsoft.com/en-us/azure/cognitive-services/bing-news-search/)| |媒體堆疊 |即時新聞資料 |每月 500 通電話 | API 金鑰 |[連結](https://mediastack.com/documentation)| |紐約時報 API |造訪《紐約時報》文章與檔案 |無限| API 金鑰 |[連結](https://developer.nytimes.com/apis)| |守護者API |造訪《衛報》文章與檔案 |無限| API 金鑰 |[連結](https://open-platform.theguardian.com/documentation/)| |活動登記|即時新聞與事件資料 |每月 500 通電話 | API 金鑰 |[連結](https://eventregistry.org/documentation)| | GDELT 專案 |即時事件資料與新聞 |每月 10,000 通電話 | API 金鑰 |[連結](https://blog.gdeltproject.org/gdelt-2-0-our-global-world-in-realtime/)| |新聞資料.io |來自各種來源的即時新聞文章 |每天 200 通電話 | API 金鑰 |[連結](https://newsdata.io/docs)| |上下文網路|根據上下文搜尋新聞文章 |每月 1000 通電話 | API 金鑰 |[連結](https://contextualwebsearch.com/news-api)| |我的新聞 API |存取各種新聞來源|每月 500 通電話 | API 金鑰 |[連結](https://mynewsapi.com/documentation)| | Webz.io |即時新聞與部落格資料 |每月 1000 通電話 | API 金鑰 |[連結](https://webz.io/documentation)| | AYLIEN 新聞 API |各種來源的新聞文章及分析 |每天 200 通電話 | API 金鑰 |[連結](https://newsapi.aylien.com/docs)| |駭客新聞 |存取黑客新聞文章 |無限|無 |[連結](https://github.com/HackerNews/API)| --- 地圖和地理定位 API 🗺️📍🌍 ---------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌地圖 API |全面的地圖和地理定位資料|每月 200 美元免費使用| API 金鑰 |[連結](https://developers.google.com/maps/documentation)| |地圖盒 |客製化地圖和地理定位服務|每月 50,000 次瀏覽 | API 金鑰 |[連結](https://docs.mapbox.com/)| | OpenCage 地理編碼 |正向和反向地理編碼 |每天 2,500 通電話 | API 金鑰 |[連結](https://opencagedata.com/api)| |這裡 地圖 |地圖和位置資料服務|每月 25 萬通電話 | API 金鑰 |[連結](https://developer.here.com/documentation)| |打開街道地圖 |免費可編輯的世界地圖|無限|無 |[連結](https://operations.osmfoundation.org/policies/nominatim/)| |位置堆疊 |用於正向和反向地理編碼的地理編碼 API |每月 25,000 通電話 | API 金鑰 |[連結](https://positionstack.com/documentation)| |湯姆湯姆 |地圖和地理定位資料服務|每天 2,500 通電話 | API 金鑰 |[連結](https://developer.tomtom.com/)| |地圖探索 |地圖和地理定位資料服務|每月 15,000 通電話 | API 金鑰 |[連結](https://developer.mapquest.com/documentation/)| | ipstack| IP地理定位API |每月 10,000 通電話 | API 金鑰 |[連結](https://ipstack.com/documentation)| |地理資訊 |地理編碼和反向地理編碼|每天 2,500 通電話 | API 金鑰 |[連結](https://www.geocod.io/)| |位置智商 |地理編碼和反向地理編碼|每天 5,000 通電話 | API 金鑰 |[連結](https://locationiq.com/docs)| |地圖繪製器 |地圖、地理編碼與地理定位服務 |每月 100,000 個切片請求 | API 金鑰 |[連結](https://www.maptiler.com/cloud/)| |什麼三字 |使用三字位址的定位服務 |每月 1000 通電話 | API 金鑰 |[連結](https://what3words.com/products)| |聰明街道 |地址驗證與地理編碼 |每月 250 個請求 | API 金鑰 |[連結](https://smartystreets.com/docs)| |地理化|地理編碼、路由和其他定位服務 |每月 30,000 個請求| API 金鑰 |[連結](https://apidocs.geoapify.com/)| --- 搜尋 API 🔍📑🕵️ ----------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌自訂搜尋|搜尋網路或特定網站 |每天 100 次查詢 | API 金鑰 |[連結](https://developers.google.com/custom-search/v1/overview)| |阿爾戈利亞 |快速、可靠的搜尋即服務 | 10,000 筆記錄 | API 金鑰 |[連結](https://www.algolia.com/doc/)| |必應搜尋 API |微軟Bing的搜尋結果|每月 3,000 通電話 | API 金鑰 |[連結](https://docs.microsoft.com/en-us/azure/cognitive-services/bing-web-search/)| |彈性搜尋|基於Lucene的搜尋引擎|免費套餐可用 | API 金鑰 |[連結](https://www.elastic.co/guide/en/elasticsearch/reference/current/search.html)| |斯威夫類型 |為您的網站客製化搜尋引擎 |每月 1000 個請求 | API 金鑰 |[連結](https://swiftype.com/documentation)| |美麗搜尋 |快速、開源搜尋引擎 |無限|無 |[連結](https://docs.meilisearch.com/)| |新增搜尋 |為您的網站客製化搜尋 |每天 50 次搜尋 | API 金鑰 |[連結](https://www.addsearch.com/docs/)| | Yandex 搜尋 API |使用 Yandex 搜尋網路 |每天 10,000 個請求 | API 金鑰 |[連結](https://yandex.com/dev/search/)| |雅虎搜尋 |使用 Yahoo | 搜尋網絡每天 5,000 次查詢 | API 金鑰 |[連結](https://developer.yahoo.com/boss/search/)| |沃爾夫拉姆·阿爾法 |計算知識引擎|每月 2,000 次查詢 | API 金鑰 |[連結](https://products.wolframalpha.com/api/documentation/)| |上下文網路搜尋|具有上下文過濾功能的網路搜尋 |每月 10,000 通電話 | API 金鑰 |[連結](https://rapidapi.com/contextualwebsearch/api/web-search)| |網站搜尋 360 |搜尋您的網站或應用程式 |每月 1,500 個請求 | API 金鑰 |[連結](https://www.sitesearch360.com/docs/)| | DuckDuckGo API |匿名搜尋網路 |無限|無 |[連結](https://duckduckgo.com/api)| |搜尋.io |搜尋即服務 | 1000 次操作/月| API 金鑰 |[連結](https://search.io/docs)| |阿帕奇·索爾 |高度可靠、可擴展的搜尋平台 |開源|無 |[連結](https://solr.apache.org/guide/)| --- 機器學習 API 🤖🧠🔮 ------------ |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌雲端機器學習 |機器學習服務與 API | $300 免費贈金 | API 金鑰 |[連結](https://cloud.google.com/products/ai)| |亞馬遜 SageMaker |建置、訓練與部署機器學習模型 |免費套餐可用 | API 金鑰 |[連結](https://aws.amazon.com/sagemaker/)| | IBM 沃森 |人工智慧和機器學習服務 |免費套餐可用 | API 金鑰 |[連結](https://www.ibm.com/watson/products-services/)| |微軟 Azure 機器學習 |機器學習服務與 API | $200 免費贈金 | API 金鑰 |[連結](https://azure.microsoft.com/en-us/services/machine-learning/)| |擁抱臉|最先進的 NLP 模型和 API |免費套餐可用 | API 金鑰 |[連結](https://huggingface.co/docs)| |開放人工智慧 |包括 GPT-3 在內的 AI 模型 |免費套餐可用 | API 金鑰 |[連結](https://beta.openai.com/docs/)| | BigML |機器學習平台與 API |免費套餐可用 | API 金鑰 |[連結](https://bigml.com/)| |克拉里法伊 |影像影片辨識服務|免費套餐可用 | API 金鑰 |[連結](https://docs.clarifai.com/)| |資料機器人|機器學習模型部署與管理 |免費套餐可用 | API 金鑰 |[連結](https://www.datarobot.com/)| |猴子學習 |文字分析與機器學習 |每月 300 次查詢 | API 金鑰 |[連結](https://monkeylearn.com/api/)| |艾琳|自然語言處理與機器學習 |免費套餐可用 | API 金鑰 |[連結](https://aylien.com/text-api/)| |演算法|演算法市場與機器學習 API |每月 10,000 次查詢 | API 金鑰 |[連結](https://algorithmia.com/developers)| |法術|機器學習基礎設施和工具|免費套餐可用 | API 金鑰 |[連結](https://spell.run/docs)| |海王星.ai |機器學習模型管理與監控 |免費套餐可用 | API 金鑰 |[連結](https://neptune.ai/)| |維茲.ai |自訂機器學習模型建立 |免費套餐可用 | API 金鑰 |[連結](https://vize.ai/)| --- 截圖與圖片 API 📷🌐🖼️ -------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |截圖API |抓取網站截圖 | 100 個螢幕截圖/月| API 金鑰 |[連結](https://screenshotapi.net/documentation)| |網址框 |擷取螢幕截圖並將網頁轉換為 PDF |每月 100 次捕獲 | API 金鑰 |[連結](https://urlbox.io/docs)| |第2頁圖片 |網頁截圖| 1000 個螢幕截圖/月| API 金鑰 |[連結](https://www.page2images.com/)| |縮網 |擷取網頁的螢幕截圖和縮圖 |每月 1000 次捕獲 | API 金鑰 |[連結](https://www.shrinktheweb.com/)| |瀏覽 |抓取網站截圖 | 1000 點/月 | API 金鑰 |[連結](https://browshot.com/api/documentation)| |縮圖.ws |抓取網站截圖 |每月 500 個螢幕截圖| API 金鑰 |[連結](https://thumbnail.ws/)| |網址框 |抓取網站截圖 |每月 1000 次捕獲 | API 金鑰 |[連結](https://www.urlbox.io/)| |截圖圖層 |抓取網站截圖 |每月 100 次捕獲 | API 金鑰 |[連結](https://screenshotlayer.com/documentation)| | APIFlash |抓取網站截圖 | 100 個螢幕截圖/月| API 金鑰 |[連結](https://apiflash.com/documentation)| | AbstractAPI 截圖 |抓取網站截圖 | 100 個螢幕截圖/月| API 金鑰 |[連結](https://www.abstractapi.com/website-screenshot-api)| |斯內皮托 |抓取網站截圖 |每月 100 次捕獲 | API 金鑰 |[連結](https://snapito.com/)| |網站2PDF |將網頁轉換為 PDF |每月 100 次捕獲 | API 金鑰 |[連結](https://website2pdf.io/)| |截圖機 |抓取網站截圖 | 1000 個螢幕截圖/月| API 金鑰 |[連結](https://www.screenshotmachine.com/)| |斯蒂利奧 |自動網站截圖|每月 1000 次捕獲 | API 金鑰 |[連結](https://stillio.com/)| |寶石像素 |抓取網站截圖 |每月 100 次捕獲 | API 金鑰 |[連結](https://www.gempixel.com/)| --- SEO API 🔍📈💡 ----------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |莫茲 | SEO 指標與資料 |每月 100 個請求 | API 金鑰 |[連結](https://moz.com/products/api)| |阿雷夫斯 | SEO 指標與資料 | 500 行/月 | API 金鑰 |[連結](https://ahrefs.com/api)| | SEMrush | SEO 指標與資料 |每月 100 個請求 | API 金鑰 |[連結](https://www.semrush.com/api/)| | Serpstat | SEO 指標與資料 |每天 1000 次查詢 | API 金鑰 |[連結](https://serpstat.com/api/)| |間諜福| SEO 指標與競爭對手分析 |每月 500 個請求 | API 金鑰 |[連結](https://www.spyfu.com/api)| | SEO 資料 |關鍵字、SERP 等的 SEO 資料 |每月 100 個請求 | API 金鑰 |[連結](https://docs.dataforseo.com/)| |認知SEO | SEO 指標與資料 |每月 1000 個請求 | API 金鑰 |[連結](https://cognitiveseo.com/api/)| |雄偉| SEO 指標與資料 |每月 100 個請求 | API 金鑰 |[連結](https://developer.majestic.com/)| |搜尋引擎結果頁面 API |即時搜尋引擎結果 |每月 1000 個請求 | API 金鑰 |[連結](https://serpapi.com/)| | RankRanger | SEO 指標與排名追蹤 |每月 1000 個請求 | API 金鑰 |[連結](https://www.rankranger.com/api)| |流動性| SEO 指標與資料 |每月 1000 個請求 | API 金鑰 |[連結](https://seobility.net/en/api/)| |光明本地|本地 SEO 資料和指標 |每月 1000 個請求 | API 金鑰 |[連結](https://www.brightlocal.com/api/)| |搜尋指標 | SEO 指標與資料 |每月 1000 個請求 | API 金鑰 |[連結](https://www.searchmetrics.com/api/)| |統計 |即時搜尋引擎結果 |每月 1000 個請求 | API 金鑰 |[連結](https://getstat.com/api/)| |林迪|反向連結檢查器和 SEO 指標 |每月 1000 個請求 | API 金鑰 |[連結](https://www.linkody.com/api)| --- 購物 API 🛍️🛒📦 ----------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |亞馬遜產品廣告API |存取亞馬遜產品資料 |每月 1,000 個請求 | API 金鑰 |[連結](https://webservices.amazon.com/paapi5/documentation)| |易趣 API |存取 eBay 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://developer.ebay.com/api-docs/static/apis.html)| |沃爾瑪API |存取沃爾瑪產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://developer.walmart.com/)| |百思買 API |存取百思買產品資料 |每天 5,000 個請求 | API 金鑰 |[連結](https://developer.bestbuy.com/)| | Etsy API |存取 Etsy 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://www.etsy.com/developers/documentation)| |樂天 API |存取樂天產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://webservice.rakuten.co.jp/documentation/)| | Shopify API |存取 Shopify 商店資料和市場 |無限| API 金鑰 |[連結](https://shopify.dev/api)| | WooCommerce API |存取 WooCommerce 商店資料和市場 |無限| API 金鑰 |[連結](https://woocommerce.github.io/woocommerce-rest-api-docs/)| | BigCommerce API |存取 BigCommerce 商店資料和市場 |無限| API 金鑰 |[連結](https://developer.bigcommerce.com/api-reference)| |速賣通 API |存取 AliExpress 產品資料和市場 |每天 1,000 個請求 | API 金鑰 |[連結](https://developers.aliexpress.com/en/doc.htm)| |扎蘭多 API |存取 Zalando 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://developers.zalando.com/)| |目標API |存取 Target 產品資料和市場 |每天 1,000 個請求 | API 金鑰 |[連結](https://developer.target.com/)| | Flipkart API |存取 Flipkart 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://affiliate.flipkart.com/api-docs)| |好市多 API |存取 Costco 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://costco.com/)| |家得寶 API |存取家得寶產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://developer.homedepot.com/)| --- 開發者 API 💻🔧🛠️ ------------ |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| | GitHub API |存取 GitHub 資料 |無限| OAuth |[連結](https://docs.github.com/en/rest)| |亞搏體育appGitLab API |存取 GitLab 資料 |無限| OAuth |[連結](https://docs.gitlab.com/ee/api/)| | Bitbucket API |存取 Bitbucket 資料 |無限| OAuth |[連結](https://developer.atlassian.com/bitbucket/api/2/reference/)| |特拉維斯 CI API |存取 Travis CI 資料 |無限| API 金鑰 |[連結](https://developer.travis-ci.com/)| |詹金斯 API |存取 Jenkins 資料 |無限| API 金鑰 |[連結](https://www.jenkins.io/doc/book/using/remote-access-api/)| | CircleCI API |存取 CircleCI 資料 |無限| API 金鑰 |[連結](https://circleci.com/docs/api/v2/)| | GitKraken API |存取 GitKraken 資料 |無限| API 金鑰 |[連結](https://support.gitkraken.com/developers/)| | Heroku API |存取 Heroku 資料和服務 |無限| OAuth |[連結](https://devcenter.heroku.com/articles/platform-api-reference)| |維塞爾 API |存取 Vercel 資料和服務 |無限| API 金鑰 |[連結](https://vercel.com/docs/api)| | Netlify API |存取 Netlify 資料和服務 |無限| OAuth |[連結](https://docs.netlify.com/api/get-started/)| | Firebase API |存取 Firebase 資料和服務 |無限| API 金鑰 |[連結](https://firebase.google.com/docs/reference/rest)| |數位海洋 API |存取 DigitalOcean 資料與服務 |無限| OAuth |[連結](https://developers.digitalocean.com/documentation/v2/)| |亞馬遜AWS官方博客存取AWS資料和服務|免費套餐可用 | API 金鑰 |[連結](https://docs.aws.amazon.com/)| | Azure API |存取 Azure 資料和服務 |免費套餐可用 | API 金鑰 |[連結](https://docs.microsoft.com/en-us/azure/azure-api-management/)| | Google雲端API |存取 Google Cloud 資料與服務 | $300 免費贈金 | API 金鑰 |[連結](https://cloud.google.com/apis)| --- 旅行和交流 API 🛫🚗🚉 ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |天巡 API |存取航班搜尋和預訂資料 |每天 500 個請求 | API 金鑰 |[連結](https://developers.skyscanner.net/docs)| |艾瑪迪斯 API |存取旅行預訂和搜尋資料 |每天 500 通電話 | API 金鑰 |[連結](https://developers.amadeus.com/)| |谷歌航班 API |存取航班搜尋和預訂資料 |每天 1000 個請求 | API 金鑰 |[連結](https://developers.google.com/flights)| | Rome2Rio API |取得多式聯運旅行搜尋資料 |每天 1000 個請求 | API 金鑰 |[連結](https://www.rome2rio.com/documentation/search)| |軍刀 API |存取旅遊預訂和搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer.sabre.com/docs/read/rest_apis)| |皮划艇 API |存取航班和酒店搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer.kayak.com/)| | Expedia API |存取旅行預訂和搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developers.expediagroup.com/docs/apis)| | Priceline API |存取旅行預訂和搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer.priceline.com/docs/apis)| | TripAdvisor API |存取旅遊評論和搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer-tripadvisor.com/home/docs)| |愛彼迎 API |取得短期租賃資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer.airbnb.com/docs)| | Lyft API |取得共乘資料 |每天 1000 個請求 | API 金鑰 |[連結](https://developer.lyft.com/docs)| |優步 API |取得共乘資料 |每天 1000 個請求 | API 金鑰 |[連結](https://developer.uber.com/docs)| | BlaBlaCar API |取得共乘資料 |每天 500 個請求 | API 金鑰 |[連結](https://dev.blablacar.com/docs)| | Yelp API |存取業務和評論資料 |每天 5000 個請求 | API 金鑰 |[連結](https://www.yelp.com/developers/documentation/v3)| |運輸API |取得公共交通資料 |每天 1000 個請求 | API 金鑰 |[連結](https://developer.transportapi.com/docs)| --- 通訊 API 📞💬📧 ---------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| | Twilio API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://www.twilio.com/docs/usage/api)| |發送網格 API |存取電子郵件發送服務 |每天 100 封電子郵件 | API 金鑰 |[連結](https://docs.sendgrid.com/)| |郵件槍 API |存取電子郵件發送服務 |每月 5,000 封電子郵件 | API 金鑰 |[連結](https://documentation.mailgun.com/en/latest/)| | Nexmo API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.nexmo.com/api)| |普利沃 API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://www.plivo.com/docs/)| |推送 API |即時通訊服務|免費套餐可用 | API 金鑰 |[連結](https://pusher.com/docs)| |郵戳API |存取電子郵件發送服務 |每月 100 封電子郵件 | API 金鑰 |[連結](https://postmarkapp.com/developer)| |訊號線 API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://signalwire.com/resources/docs)| |山魈API |存取電子郵件發送服務 |每月 2,000 封電子郵件 | API 金鑰 |[連結](https://mandrillapp.com/api/docs/)| |點擊發送 API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://developers.clicksend.com/docs/rest/v3/)| | Tropo API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://www.tropo.com/docs)| |鬆弛 API |存取 Slack 訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://api.slack.com/)| |不和諧 API |造訪 Discord 訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://discord.com/developers/docs/intro)| |縮放 API |存取 Zoom 視訊會議服務 |免費套餐可用 | API 金鑰 |[連結](https://marketplace.zoom.us/docs/api-reference/zoom-api)| |對講API |造訪 Intercom 訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://developers.intercom.com/intercom-api-reference)| --- 支付和金融 API 💳💸🏦 ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |條紋 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://stripe.com/docs/api)| |貝寶 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.paypal.com/docs/api/overview/)| |廣場 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.squareup.com/reference/square)| |布倫特里 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.paypal.com/braintree/docs/guides/overview)| | Authorize.net API | 授權.net API獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.authorize.net/api/reference/index.html)| |格子 API |取得金融資料和服務|免費套餐可用 | API 金鑰 |[連結](https://plaid.com/docs/)| |德沃拉 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developers.dwolla.com/guides/)| |明智的API |獲得國際匯款服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.transferwise.com/)| |世界支付 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.worldpay.com/docs)| | WePay API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.wepay.com/)| |革命 API |取得金融資料和服務|免費套餐可用 | API 金鑰 |[連結](https://developer.revolut.com/docs)| | Xero API |取得會計和財務資料|免費套餐可用 | API 金鑰 |[連結](https://developer.xero.com/documentation/api)| | QuickBooks API |取得會計和財務資料|免費套餐可用 | API 金鑰 |[連結](https://developer.intuit.com/app/developer/qbo/docs/get-started)| |約德利 API |取得金融資料和服務|免費套餐可用 | API 金鑰 |[連結](https://developer.yodlee.com/apidocs)| |直覺 API |取得會計和財務資料|免費套餐可用 | API 金鑰 |[連結](https://developer.intuit.com/)| --- 分析與監控 API 📊📈📉 ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌分析 API |存取 Google Analytics 資料 |免費套餐可用 | API 金鑰 |[連結](https://developers.google.com/analytics/devguides/reporting/core/v4)| |混合面板 API |存取 Mixpanel 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://developer.mixpanel.com/docs)| |振幅 API |存取 Amplitude 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.amplitude.com/developers/apis)| |熱罐 API |存取 Hotjar 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://developer.hotjar.com/docs)| |堆API |存取堆分析資料 |免費套餐可用 | API 金鑰 |[連結](https://docs.heap.io/docs)| | Piwik 專業版 API |存取 Piwik PRO 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://piwikpro.dev/documentation)| |段 API |存取細分分析資料 |免費套餐可用 | API 金鑰 |[連結](https://segment.com/docs/)| |瘋狂蛋API |存取 Crazy Egg 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.crazyegg.com/api)| |烏普拉 API |存取 Woopra 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.woopra.com/docs/api)| | Kissmetrics API |存取 Kissmetrics 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.kissmetrics.io/api)| |點擊 API |存取 Clicky 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://clicky.com/help/api)| |開放網路分析 API |存取開放網路分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.openwebanalytics.com/api/)| | Yandex Metrica API |存取 Yandex Metrica 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://yandex.com/support/metrica/quick-start.html)| |統計計數器 API |存取 StatCounter 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://statcounter.com/docs/)| | Chartbeat API |存取 Chartbeat 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://chartbeat.com/docs/api/)| --- 自然語言處理 (NLP) API 🗣️🔍💬 --------------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌雲端自然語言處理 |自然語言處理服務| $300 免費贈金 | API 金鑰 |[連結](https://cloud.google.com/natural-language/docs)| | IBM 沃森 NLP |自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://www.ibm.com/watson/services/natural-language-understanding/)| |微軟Azure NLP|自然語言處理服務| $200 免費贈金 | API 金鑰 |[連結](https://azure.microsoft.com/en-us/services/cognitive-services/text-analytics/)| |亞馬遜理解|自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://aws.amazon.com/comprehend/)| |文字剃刀 |自然語言處理服務|每月 5000 個請求 | API 金鑰 |[連結](https://www.textrazor.com/docs)| |艾琳 NLP |自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://aylien.com/text-api/)| |猴子學習 |文本分析與自然語言處理 |每月 300 次查詢 | API 金鑰 |[連結](https://monkeylearn.com/api/)| |意義雲 |文本分析與自然語言處理 |每月 20,000 個請求| API 金鑰 |[連結](https://www.meaningcloud.com/developer/apis)| | NLP 演算法 |自然語言處理演算法 |每月 10,000 次查詢 | API 金鑰 |[連結](https://algorithmia.com/developers)| |維特人工智慧 |自然語言處理與聊天機器人整合 |免費套餐可用 | API 金鑰 |[連結](https://wit.ai/docs)| |詞法解析 |文本分析與自然語言處理 |免費套餐可用 | API 金鑰 |[連結](https://www.lexalytics.com/developers)| | SapienAPI |自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://www.sapien.com/api)| |聊天機器人 |自然語言處理與聊天機器人整合 |免費套餐可用 |無 |[連結](https://chatterbot.readthedocs.io/en/stable/)| |蒂薩尼API |文本分析與自然語言處理 |每月 30,000 個請求| API 金鑰 |[連結](https://tisane.ai/documentation)| | DeepAI 文字 API |自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://deepai.org/machine-learning-model/text-tagging)| --- 實用程式和工具 API 🛠️🔧⚙️ ----------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| | IP資訊| IP 位址資訊與地理位置 |每月 50,000 個請求| API 金鑰 |[連結](https://ipinfo.io/developers)| |打開天氣地圖 |天氣預報資料，包括預報和當前天氣 | 60 次通話/分鐘 | API 金鑰 |[連結](https://openweathermap.org/api)| | Twilio API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://www.twilio.com/docs/usage/api)| |發送網格 API |存取電子郵件發送服務 |每天 100 封電子郵件 | API 金鑰 |[連結](https://docs.sendgrid.com/)| | Clearbit API |商業智慧資料|每月 50,000 個請求| API 金鑰 |[連結](https://clearbit.com/docs)| | IPStack | IP 地理定位與資訊 |每月 10,000 個請求| API 金鑰 |[連結](https://ipstack.com/documentation)| |抽象API |各種實用 API，如 IP 地理定位、電子郵件驗證 |每月 500 個請求 | API 金鑰 |[連結](https://www.abstractapi.com/)| | API 介面 |網頁抓取與自動化 |每月 10,000 個請求| API 金鑰 |[連結](https://docs.apify.com/api/v2)| |刮刀 API |網頁抓取工具|每月 5000 個請求 | API 金鑰 |[連結](https://www.scraperapi.com/documentation/)| |郵差 API | API開發與測試工具|無限| API 金鑰 |[連結](https://www.postman.com/api-documentation/)| |哨兵 API |應用程式監控與錯誤追蹤 |每月 5000 場活動 | API 金鑰 |[連結](https://docs.sentry.io/api/)| |條紋 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://stripe.com/docs/api)| | PDF.co API | PDF 產生與資料擷取 |每月 1000 個請求 | API 金鑰 |[連結](https://apidocs.pdf.co/)| |比特利API | URL 縮短與連結管理 |每月 1000 個請求 | API 金鑰 |[連結](https://dev.bitly.com/docs/)| | OpenCage 地理編碼 |正向和反向地理編碼 |每天 2,500 通電話 | API 金鑰 |[連結](https://opencagedata.com/api)| --- 政府和開放資料 API 🏛️📜📊 ---------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |資料.gov API |美國政府公開資料|無限|無 |[連結](https://www.data.gov/developers/apis)| |英國政府 API |英國政府公開資料|無限|無 |[連結](https://www.gov.uk/guidance/using-the-api)| |歐盟開放資料入口網站API |歐盟開放資料|無限|無 |[連結](https://data.europa.eu/euodp/en/developers-corner)| |世界銀行 API |全球發展資料|無限|無 |[連結](https://datahelpdesk.worldbank.org/knowledgebase/topics/125589)| |聯合國資料API |聯合國開放資料|無限|無 |[連結](https://data.un.org/Host.aspx?Content=API)| |經合組織資料 API |經合組織的經濟和社會資料|無限|無 |[連結](https://data.oecd.org/api/)| |人口普查 API |美國人口普查局資料|無限| API 金鑰 |[連結](https://www.census.gov/data/developers/data-sets.html)| |開放資料軟體 |不同來源的各種開放資料|無限| API 金鑰 |[連結](https://www.opendatasoft.com/)| |紐約市 API |紐約市開放資料 |無限|無 |[連結](https://opendata.cityofnewyork.us/)| |美國地質調查局API |美國地質調查局資料|無限| API 金鑰 |[連結](https://www.usgs.gov/products/data-and-tools/apis)| |美國宇航局API |存取 NASA 資料和圖像 |無限| API 金鑰 |[連結](https://api.nasa.gov/)| |開放狀態 API |美國各州立法資料|無限| API 金鑰 |[連結](https://openstates.org/data/)| |美國政府 API |美國政府資訊與服務|無限|無 |[連結](https://www.usa.gov/developer)| | Data.gov.au API |澳洲政府公開資料|無限|無 |[連結](https://data.gov.au/)| | HealthData.gov API |美國健康相關開放資料|無限|無 |[連結](https://healthdata.gov/)| --- \*\*如果您發現此內容有幫助， 請[買杯咖啡](https://buymeacoffee.com/deyurii)🌟✨\*\* --- 原文出處：https://dev.to/falselight/300-free-apis-every-developer-needs-to-know-3j76

0個讚   0留言 157瀏覽

如何建置：具有嵌入式 AI copilot 的待辦事項清單應用程式（Next.js、GPT4 和 CopilotKit）

**長話短說** -------- 待辦事項清單是每個開發人員的經典專案。在當今世界，學習如何使用人工智慧進行建構並在你的投資組合中加入一些人工智慧專案是很棒的。 今天，我將逐步介紹如何使用嵌入式 AI 副駕駛來建立待辦事項列表，以實現一些 AI 魔法🪄。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw0jituk3y5tosz6f34u.gif) 我們將介紹如何： - 使用 Next.js、TypeScript 和 Tailwind CSS 建立待辦事項清單產生器 Web 應用。 - 使用 CopilotKit 將 AI 功能整合到待辦事項清單產生器中。 - 使用 AI 聊天機器人新增清單、將清單分配給某人、將清單標記為已完成以及刪除清單。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guf0l2fiq1g1jv86o7bg.png) --- CopilotKit：建構應用內人工智慧副駕駛的框架 -------------------------- CopilotKit是一個[開源的AI副駕駛框架](https://github.com/CopilotKit/CopilotKit)。我們可以輕鬆地將強大的人工智慧整合到您的 React 應用程式中。 建造： - ChatBot：上下文感知的應用內聊天機器人，可以在應用程式內執行操作 💬 - CopilotTextArea：人工智慧驅動的文字字段，具有上下文感知自動完成和插入功能📝 - 聯合代理：應用程式內人工智慧代理，可以與您的應用程式和使用者互動🤖 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myp7zashy99m33ya8kaf.gif) {% cta https://go.copilotkit.ai/bonnie %} 明星 CopilotKit ⭐️ {% endcta %} --- 先決條件 ---- 要完全理解本教程，您需要對 React 或 Next.js 有基本的了解。 以下是建立人工智慧驅動的待辦事項清單產生器所需的工具： - [Nanoid](https://github.com/ai/nanoid) - 一個小型、安全、URL 友善、唯一的 JavaScript 字串 ID 產生器。 - [OpenAI API](https://platform.openai.com/api-keys) - 提供 API 金鑰，讓您能夠使用 ChatGPT 模型執行各種任務。 - [CopilotKit](https://github.com/CopilotKit) - 一個開源副駕駛框架，用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 專案設定和套件安裝 --------- 首先，透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式： ``` npx create-next-app@latest todolistgenerator ``` 選擇您首選的配置設定。在本教學中，我們將使用 TypeScript 和 Next.js App Router。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tc6he9eivkt3hhxnj3p.png) 接下來，安裝 Nanoid 套件及其相依性。 ``` npm i nanoid ``` 最後，安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend @copilotkit/shared ``` 恭喜！您現在已準備好建立由人工智慧驅動的待辦事項清單產生器。 **建立待辦事項清單產生器前端** ----------------- 在本節中，我將引導您完成使用靜態內容建立待辦事項清單產生器前端的過程，以定義生成器的使用者介面。 首先，請在程式碼編輯器中前往`/[root]/src/app`並建立一個名為`types`資料夾。在 types 資料夾中，建立一個名為`todo.ts`的文件，並新增以下程式碼來定義名為**`Todo`的 TypeScript 介面。** **`Todo`**介面定義了一個物件結構，其中每個待辦事項都必須具有**`id`** 、 **`text`**和**`isCompleted`**狀態，同時也可以選擇具有**`assignedTo`**屬性。 ``` export interface Todo { id: string; text: string; isCompleted: boolean; assignedTo?: string; } ``` 然後轉到程式碼編輯器中的`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中，建立三個名為`Header.tsx` 、 `TodoList.tsx`和`TodoItem.tsx`的檔案。 在`Header.tsx`檔案中，新增以下程式碼，定義一個名為`Header`的功能元件，該元件將呈現生成器的導覽列。 ``` import Link from "next/link"; export default function Header() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 "> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global"> <div className="flex items-center justify-between"> <Link className="w-full flex-none text-xl text-white font-semibold p-6" href="/" aria-label="Brand"> To-Do List Generator </Link> </div> </nav> </header> </> ); } ``` 在`TodoItem.tsx`檔案中，新增以下程式碼來定義名為**`TodoItem`**的 React 功能元件。它使用 TypeScript 來確保類型安全性並定義元件接受的 props。 ``` import { Todo } from "../types/todo"; // Importing the Todo type from a types file // Defining the interface for the props that the TodoItem component will receive interface TodoItemProps { todo: Todo; // A single todo item toggleComplete: (id: string) => void; // Function to toggle the completion status of a todo deleteTodo: (id: string) => void; // Function to delete a todo assignPerson: (id: string, person: string | null) => void; // Function to assign a person to a todo hasBorder?: boolean; // Optional prop to determine if the item should have a border } // Defining the TodoItem component as a functional component with the specified props export const TodoItem: React.FC<TodoItemProps> = ({ todo, toggleComplete, deleteTodo, assignPerson, hasBorder, }) => { return ( <div className={ "flex items-center justify-between px-4 py-2 group" + (hasBorder ? " border-b" : "") // Conditionally adding a border class if hasBorder is true }> <div className="flex items-center"> <input className="h-5 w-5 text-blue-500" type="checkbox" checked={todo.isCompleted} // Checkbox is checked if the todo is completed onChange={() => toggleComplete(todo.id)} // Toggle completion status on change /> <span className={`ml-2 text-sm text-white ${ todo.isCompleted ? "text-gray-500 line-through" : "text-gray-900" // Apply different styles if the todo is completed }`}> {todo.assignedTo && ( <span className="border rounded-md text-xs py-[2px] px-1 mr-2 border-purple-700 uppercase bg-purple-400 text-black font-medium"> {todo.assignedTo} {/* Display the assigned person's name if available */} </span> )} {todo.text} {/* Display the todo text */} </span> </div> <div> <button onClick={() => deleteTodo(todo.id)} // Delete the todo on button click className="text-red-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5"> <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /> </svg> </button> <button onClick={() => { const name = prompt("Assign person to this task:"); assignPerson(todo.id, name); }} className="ml-2 text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5"> <path strokeLinecap="round" strokeLinejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" /> </svg> </button> </div> </div> ); }; ``` 在`TodoList.tsx`檔案中，加入以下程式碼來定義名為**`TodoList`**的 React 功能元件。此元件用於管理和顯示待辦事項清單。 ``` "use client"; import { TodoItem } from "./TodoItem"; // Importing the TodoItem component import { nanoid } from "nanoid"; // Importing the nanoid library for generating unique IDs import { useState } from "react"; // Importing the useState hook from React import { Todo } from "../types/todo"; // Importing the Todo type // Defining the TodoList component as a functional component export const TodoList: React.FC = () => { // State to hold the list of todos const [todos, setTodos] = useState<Todo[]>([]); // State to hold the current input value const [input, setInput] = useState(""); // Function to add a new todo const addTodo = () => { if (input.trim() !== "") { // Check if the input is not empty const newTodo: Todo = { id: nanoid(), // Generate a unique ID for the new todo text: input.trim(), // Trim the input text isCompleted: false, // Set the initial completion status to false }; setTodos([...todos, newTodo]); // Add the new todo to the list setInput(""); // Clear the input field } }; // Function to handle key press events const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter") { // Check if the Enter key was pressed addTodo(); // Add the todo } }; // Function to toggle the completion status of a todo const toggleComplete = (id: string) => { setTodos( todos.map((todo) => todo.id === id ? { ...todo, isCompleted: !todo.isCompleted } : todo ) ); }; // Function to delete a todo const deleteTodo = (id: string) => { setTodos(todos.filter((todo) => todo.id !== id)); }; // Function to assign a person to a todo const assignPerson = (id: string, person: string | null) => { setTodos( todos.map((todo) => todo.id === id ? { ...todo, assignedTo: person ? person : undefined } : todo ) ); }; return ( <div> <div className="flex mb-4"> <input className="border rounded-md p-2 flex-1 mr-2" value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={handleKeyPress} // Add this to handle the Enter key press /> <button className="bg-blue-500 rounded-md p-2 text-white" onClick={addTodo}> Add Todo </button> </div> {todos.length > 0 && ( // Check if there are any todos <div className="border rounded-lg"> {todos.map((todo, index) => ( <TodoItem key={todo.id} // Unique key for each todo item todo={todo} // Pass the todo object as a prop toggleComplete={toggleComplete} // Pass the toggleComplete function as a prop deleteTodo={deleteTodo} // Pass the deleteTodo function as a prop assignPerson={assignPerson} // Pass the assignPerson function as a prop hasBorder={index !== todos.length - 1} // Conditionally add a border to all but the last item /> ))} </div> )} </div> ); }; ``` 接下來，前往`/[root]/src/page.tsx`文件，新增以下程式碼，匯入`TodoList`和`Header`元件並定義名為`Home`的功能元件。 ``` import Header from "./components/Header"; import { TodoList } from "./components/TodoList"; export default function Home() { return ( <> <Header /> <div className="border rounded-md max-w-2xl mx-auto p-4 mt-4"> <h1 className="text-2xl text-white font-bold mb-4"> Create a to-do list </h1> <TodoList /> </div> </> ); } ``` 接下來，刪除`globals.css`檔案中的 CSS 程式碼並新增以下 CSS 程式碼。 ``` @tailwind base; @tailwind components; @tailwind utilities; body { height: 100vh; background-color: rgb(16, 23, 42); } ``` 最後，在命令列上執行命令`npm run dev` ，然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看待辦事項清單產生器前端，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmd8j3brrtiqackalul1.png) **使用 CopilotKit 將 AI 功能整合到待辦事項清單產生器** ------------------------------------- 在本節中，您將學習如何將 AI 副駕駛新增至待辦事項清單產生器，以使用 CopilotKit 產生清單。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先，我們將 CopilotKit React 元件新增至待辦事項清單產生器前端。 ### **將 CopilotKit 新增至待辦事項清單產生器前端** 在這裡，我將引導您完成將待辦事項清單產生器與 CopilotKit 前端整合以促進清單產生的過程。 首先，使用下面的程式碼片段匯入`/[root]/src/app/components/TodoList.tsx`檔案頂部的`useCopilotReadable`和`useCopilotAction`自訂掛鉤。 ``` import { useCopilotAction, useCopilotReadable } from "@copilotkit/react-core"; ``` 在`TodoList`函數內的狀態變數下方，新增以下程式碼，該程式碼使用`useCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的待辦事項清單。該鉤子使副駕駛可以讀取待辦事項清單。 ``` useCopilotReadable({ description: "The user's todo list.", value: todos, }); ``` 在上面的程式碼下方，新增以下程式碼，該程式碼使用`useCopilotAction`掛鉤來設定名為`updateTodoList`的操作，該操作將啟用待辦事項清單的產生。 此操作採用一個名為 items 的參數，該參數可以產生待辦事項列表，並包含一個根據給定提示產生待辦事項列表的處理程序函數。 在處理函數內部， `todos`狀態會使用新產生的 todo 清單進行更新，如下所示。 ``` // Define the "updateTodoList" action using the useCopilotAction function useCopilotAction({ // Name of the action name: "updateTodoList", // Description of what the action does description: "Update the users todo list", // Define the parameters that the action accepts parameters: [ { // The name of the parameter name: "items", // The type of the parameter, an array of objects type: "object[]", // Description of the parameter description: "The new and updated todo list items.", // Define the attributes of each object in the items array attributes: [ { // The id of the todo item name: "id", type: "string", description: "The id of the todo item. When creating a new todo item, just make up a new id.", }, { // The text of the todo item name: "text", type: "string", description: "The text of the todo item.", }, { // The completion status of the todo item name: "isCompleted", type: "boolean", description: "The completion status of the todo item.", }, { // The person assigned to the todo item name: "assignedTo", type: "string", description: "The person assigned to the todo item. If you don't know, assign it to 'YOU'.", // This attribute is required required: true, }, ], }, ], // Define the handler function that executes when the action is invoked handler: ({ items }) => { // Log the items to the console for debugging purposes console.log(items); // Create a copy of the existing todos array const newTodos = [...todos]; // Iterate over each item in the items array for (const item of items) { // Find the index of the existing todo item with the same id const existingItemIndex = newTodos.findIndex( (todo) => todo.id === item.id ); // If an existing item is found, update it if (existingItemIndex !== -1) { newTodos[existingItemIndex] = item; } // If no existing item is found, add the new item to the newTodos array else { newTodos.push(item); } } // Update the state with the new todos array setTodos(newTodos); }, // Provide feedback or a message while the action is processing render: "Updating the todo list...", }); ``` 在上面的程式碼下方，新增以下程式碼，程式碼使用`useCopilotAction`掛鉤來設定名為`deleteTodo`的操作，該操作使您能夠刪除待辦事項。 該操作採用名為id 的參數，該參數可讓您透過id 刪除待辦事項，並包含一個處理函數，該函數透過過濾掉具有給定id 的已刪除待辦事項來更新待辦事項狀態。 ``` // Define the "deleteTodo" action using the useCopilotAction function useCopilotAction({ // Name of the action name: "deleteTodo", // Description of what the action does description: "Delete a todo item", // Define the parameters that the action accepts parameters: [ { // The name of the parameter name: "id", // The type of the parameter, a string type: "string", // Description of the parameter description: "The id of the todo item to delete.", }, ], // Define the handler function that executes when the action is invoked handler: ({ id }) => { // Update the state by filtering out the todo item with the given id setTodos(todos.filter((todo) => todo.id !== id)); }, // Provide feedback or a message while the action is processing render: "Deleting a todo item...", }); ``` 之後，請前往`/[root]/src/app/page.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件和樣式。 ``` import { CopilotKit } from "@copilotkit/react-core"; import { CopilotPopup } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; ``` 然後使用`CopilotKit`包裝`CopilotPopup`和`TodoList`元件，如下所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/` ) 的 URL，而`CopilotPopup`則呈現應用程式內聊天機器人，您可以提示產生待辦事項清單。 ``` export default function Home() { return ( <> <Header /> <div className="border rounded-md max-w-2xl mx-auto p-4 mt-4"> <h1 className="text-2xl text-white font-bold mb-4"> Create a to-do list </h1> <CopilotKit runtimeUrl="/api/copilotkit"> <TodoList /> <CopilotPopup instructions={ "Help the user manage a todo list. If the user provides a high level goal, " + "break it down into a few specific tasks and add them to the list" } defaultOpen={true} labels={{ title: "Todo List Copilot", initial: "Hi you! 👋 I can help you manage your todo list.", }} clickOutsideToClose={false} /> </CopilotKit> </div> </> ); } ``` 之後，執行開發伺服器並導航至[http://localhost:3000](http://localhost:3000/) 。您應該會看到應用程式內聊天機器人已整合到待辦事項清單產生器中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryeqnymp5lm397thpn5f.png) ### **將 CopilotKit 後端加入博客** 在這裡，我將引導您完成將待辦事項清單產生器與 CopilotKit 後端整合的過程，該後端處理來自前端的請求，並提供函數呼叫和各種 LLM 後端（例如 GPT）。 首先，在根目錄中建立一個名為`.env.local`的檔案。然後將下面的環境變數加入到儲存`ChatGPT` API 金鑰的檔案中。 ``` OPENAI_API_KEY="Your ChatGPT API key” ``` 若要取得 ChatGPT API 金鑰，請導覽至 https://platform.openai.com/api-keys。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0bibiuouk5wvrxcuy2g.jpeg) 之後，轉到`/[root]/src/app`並建立一個名為`api`的資料夾。在`api`資料夾中，建立一個名為`copilotkit`的資料夾。 在`copilotkit`資料夾中，建立一個名為`route.ts`的文件，其中包含設定後端功能以處理POST 請求的程式碼。 ``` // Import the necessary modules from the "@copilotkit/backend" package import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/backend"; // Define an asynchronous function to handle POST requests export async function POST(req: Request): Promise<Response> { // Create a new instance of CopilotRuntime const copilotKit = new CopilotRuntime({}); // Use the copilotKit to generate a response using the OpenAIAdapter // Pass the incoming request (req) and a new instance of OpenAIAdapter to the response method return copilotKit.response(req, new OpenAIAdapter()); } ``` 如何產生待辦事項列表 ---------- 現在轉到您之前整合的應用程式內聊天機器人，並給它一個提示，例如「我想去健身房做全身運動。加入到我應該遵循的鍛煉程序列表” 生成完成後，您應該會看到應遵循的全身運動程序列表，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48n9ssymxhm5i2yv0pdf.png) 您可以透過向聊天機器人發出「將待辦事項清單指派給 Doe」之類的提示來將待辦事項清單指派給某人。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r1f816c1o8da5z0t1kk.png) 您可以透過向聊天機器人提供「將待辦事項清單標記為已完成」等提示來將待辦事項清單標記為已完成。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx2wpg6ee7hswjl68t4q.png) 您可以透過向聊天機器人發出「刪除待辦事項清單」之類的提示來刪除待辦事項清單。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksoj6mtlxt8ag8opsocs.png) 恭喜！您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具，可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣，還是對複雜任務的自動化感興趣，CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中，您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼：https://github.com/TheGreatBonnie/AIpoweredToDoListGenerator --- 原文出處：https://dev.to/copilotkit/how-to-build-an-ai-powered-to-do-list-nextjs-gpt4-copilotkit-20i4

0個讚   0留言 53瀏覽

可以使用 Python 和 AI 建構的 25 個專案

今天，我們將介紹 25 個可以使用 Python 和 AI 模型建構的副專案。 大多數專案都會有生產級程式碼，因此您可以學到很多東西。 我們開始做吧！ --- [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ------------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd10iiofzmt4or4db6ej.png) 大多數初始專案都會使用 Taipy，所以讓我們討論一下這個概念的用例。 Taipy 是一個開源 Python 庫，可用於輕鬆的端到端應用程式開發，具有假設分析、智慧管道執行、內建調度和部署工具。 需要明確的是，Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能，而 Taipy 是最佳選擇。 雖然 Streamlit 是一種流行的工具，但在處理大型資料集時，其效能可能會顯著下降，這使得它在生產級使用上不切實際。 另一方面，Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 Taipy，您將親身體驗其用戶友好的介面和高效的資料處理。 ![大資料支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnvk0tozn0lgj083rzcb.gif) Taipy 有許多整合選項，可以輕鬆地與領先的資料平台連接。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yv31uir3erina587zp8.png) 開始使用以下命令。 ``` pip install taipy ``` 他們還使用分散式運算提高了效能，但最好的部分是 Taipy，它的所有依賴項現在都與 Python 3.12 完全相容，因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 ![用例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdvnbejf9aivxmqsd3hx.png) 另一個有用的事情是，Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。 ![太皮工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc1umm5hcxes0ydbuspb.png) 如果您想閱讀部落格來了解程式碼庫結構，您可以閱讀 HuggingFace[的使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。 嘗試新技術通常很困難，但 Taipy 提供了 10 多個演示教程，其中包含程式碼和適當的文件供您遵循。我將詳細討論其中一些專案！ ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wigid2aokt6spkkoivr.png) 這些用例非常驚人，所以一定要檢查一下。 Taipy 在 GitHub 上有超過 8,500 個 Star，並且處於`v3.1`版本，因此它們正在不斷改進。 https://github.com/Avaiga/taipy Star Taipy ⭐️ --- 1.[實時污染儀表板](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/pollution_sensors/) ----------------------------------------------------------------------------------------- 使用工廠周圍的感測器測量空氣品質的用例，展示 Taipy 儀表板流資料的能力。 資料在另一台伺服器上產生並透過 WebSocket 發送到此 Taipy 應用程式。 然後 Taipy 處理資料並將其顯示在儀表板上。 當收到新資料時，儀表板會即時更新。 ![即時污染儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0i6pm0ggx6yb655uvd1.png) 如果您想要有關可視化資料流的教程，請查看[有關多線程的文件](https://docs.taipy.io/en/release-3.0/knowledge_base/tips/multithreading/)。 它討論瞭如何建立發送者腳本和接收者腳本，包括套接字參數等。 它涉及到前端和後端的概念。 查看[現場演示](https://realtime-pollution.taipy.cloud/)。 https://github.com/Avaiga/demo-realtime-pollution Star 即時污染儀表板 ⭐️ --- 2.[詐欺檢測](https://github.com/Avaiga/demo-fraud-detection) -------------------------------------------------------- Taipy 應用程式可分析信用卡交易以偵測詐欺行為。 ![詐欺檢測演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v90fuimlplxuj4llp1zb.png) 它顯示信用卡交易清單。 用戶可以選擇一個日期範圍來預測詐欺。 然後，該應用程式將使用 XGB 模型將潛在的詐欺交易標記為紅色或黃色。 用戶可以選擇一個交易來查看模型預測的解釋，以及客戶的其他交易。 ![詐欺檢測演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8odxbhc9h3z3vzm4i4yk.png) 使用者還可以選擇模型的閾值。閾值是模型輸出，高於該閾值的交易將被視為詐欺。使用者可以根據顯示的混淆矩陣並透過查看誤報和漏報交易來選擇模型。 ![詐欺檢測演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8ri5h0ky5zie53g2wk7.png) 查看[現場演示](https://fraud-detection.taipy.cloud/Transactions)。 https://github.com/Avaiga/demo-fraud-detection 明星詐欺偵測 ⭐️ --- 3.[新冠儀表板](https://github.com/Avaiga/demo-covid-dashboard) --------------------------------------------------------- 這裡使用 2020 年的 Covid 資料集。 頁面顯示有關 COVID-19 的不同圖表和資訊。還有一個預測頁面來預測傷亡人數。 該應用程式包括四個部分，如下所示： > ✅ 國。 - 特定國家/地區的 COVID-19 統計資料。 - 在累積資料視圖和密度資料視圖之間輕鬆切換。 - 用於動態資料探索的互動式長條圖。 - 餅圖顯示病例分佈（確診、復健、死亡）。 ![國家](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j22qqjmpd39qwwb4it4o.png) > ✅ 地圖。 透過動態可縮放顏色編碼地圖直觀地展示 COVID-19 的影響。 ![地圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ngdy1pkmujgdel1rz81.png) > ✅ 預測。 透過為不同的預測日期和不同的國家建立場景來產生 COVID-19 預測。 這會分別使用 ARIMA 模型和線性迴歸模型產生 2 個不同的預測（橘色的預測\_x 和綠色的預測\_y）。 透過指定名稱、指定預測日期、選擇國家/地區並點擊「提交」按鈕繼續來啟動新場景。 您可以在“結果”部分的“場景”選項卡中存取它。 ![預測](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8idl5ys0zhkztexujcmh.png) > ✅ 世界。 全球 COVID-19 統計資料透過折線圖和圓餅圖進行匯總。透過更改`Absolute`和`Relative`之間的切換可以看到 Covid 國家/地區影響的比較。 ![世界](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9kd3rjxa7qjqne798ua.png) 總的來說，對於您的業餘專案和建立非常酷的專案來說，這是一個非常有用的應用程式:) 您可以查看[現場演示](https://covid-dashboard.taipy.cloud/Country)。 https://github.com/Avaiga/demo-covid-dashboard Star Covid 儀表板 ⭐️ --- 4.[建立 LLM 聊天機器人](https://github.com/Avaiga/demo-chatbot) -------------------------------------------------------- 該演示展示了 Taipy 使最終用戶能夠使用 LLM 執行推理的能力。在這裡，我們使用 GPT-3 建立一個聊天機器人，並將對話顯示在互動式聊天介面中。 ![法學碩士聊天機器人](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olaw6u8w3fj2wrg0au2r.png) 下面給出了主要函數，該函數將字串提示（即用戶訊息）作為輸入，並從 LLM 傳回回應字串。 ``` def request(state: State, prompt: str) -> str: """ Send a prompt to the GPT-3 API and return the response. Args: - state: The current state. - prompt: The prompt to send to the API. Returns: The response from the API. """ response = state.client.chat.completions.create( messages=[ { "role": "user", "content": f"{prompt}", } ], model="gpt-3.5-turbo", ) return response.choices[0].message.content ``` 您可以閱讀有關如何建立此 LLM 聊天機器人的[完整文件](https://docs.taipy.io/en/release-3.0/knowledge_base/tutorials/chatbot/)。 最好的部分是，您可以根據您的使用情況輕鬆更改程式碼以使用任何其他 API 或模型。 您可以查看[現場演示](https://demo-llm-chat.taipy.cloud/)。 https://github.com/Avaiga/demo-chatbot 明星聊天機器人 ⭐️ --- 5.[即時人臉辨識](https://github.com/Avaiga/demo-face-recognition) ----------------------------------------------------------- 該演示將人臉辨識無縫整合到我們的平台中，借助 OpenCV 庫，使用網路攝影機提供即時人臉偵測體驗。 ![即時人臉辨識](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs9kpit8byxsqq67mhql.png) 您可以非常輕鬆地使用它： A。打開應用程式時，您會透過網路攝影機看到自己。你的臉周圍有一個紅色方塊，上面寫著別人的名字。 b.透過點擊`Capture`按鈕並多次輸入您的名字來訓練模型辨識您。 C。現在點選`Re-train`按鈕。現在應該會出現您的名字。模型現在認出了您。 查看[現場演示](https://face-recognition.taipy.cloud/)。 確保在瀏覽器中啟用相機設置，這是首要條件！ 進行人臉偵測和人臉辨識的程式碼位於`src/demo/faces.py`下。自述文件中提供了完整的目錄結構。 https://github.com/Avaiga/demo-face-recognition 明星人臉辨識 ⭐️ --- 6.[庫存可視化](https://github.com/Avaiga/demo-stock-visualization) ------------------------------------------------------------- 在金融市場領域，資料為王。快速、輕鬆地視覺化歷史股票資料並做出預測的能力對於投資者和金融分析師來說至關重要。 這是一個股票資料儀表板，具有互動式視覺元素，可以視覺化歷史股票資料並對 1 至 5 年內的股票進行預測。 ![庫存視覺化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz5jagdfvcnup1jq7qgx.png) 由 Facebook 使用 Taipy 和[Prophet Library](https://facebook.github.io/prophet/docs/quick_start.html)建構。此示範適用於高於 3.8 的 Python 版本。 您可以這樣使用它： A。選擇您想要預測的股票程式碼。 b.打開歷史資料面板。 C。選擇預測週期（從 1 到 5）。 d.點選`PREDICT`按鈕。 e.在預測資料面板中查看您的預測。 F。使用不同的程式碼重複嘗試以比較結果。 您也可以透過點擊底部的`More info`按鈕以表格形式取得預測範圍。 您可以在[src 目錄](https://github.com/Avaiga/demo-stock-visualization/tree/develop/src)下找到負責的主要原始碼。 這個完全互動的 Web 應用程式只需不到 120 行 Python 程式碼即可建立。 查看[現場演示](https://stock-visualization.taipy.cloud/)。 https://github.com/Avaiga/demo-stock-visualization 明星股票視覺化 ⭐️ --- 7.[情感分析](https://github.com/Avaiga/demo-sentiment-analysis)。 ------------------------------------------------------------ 情感分析就像一個機器人，可以從人們的言語中讀出他們的感受。 它會根據快樂、悲傷或憤怒等字眼來判斷它們的感覺是好是壞。然後，它告訴我們大多數人在說話時是高興還是悲傷。 因此，只需看看人們所說的內容，它就可以幫助我們了解人們對事物（例如電影或遊戲）的感受！ 簡而言之，它是自然語言處理（NLP）中的一種技術，用於確定文本中傳達的情緒基調。它可以幫助企業和個人更好地掌握書面內容所表達的情感和語氣。 結果是一個兩頁的應用程式，它使用情感分析模型來分析輸入和整個文本。 第一頁分析使用者輸入，而第二頁讓使用者選擇要上傳的檔案（文字）。該文本將被分析並顯示背後的情感。 > ✅ 第 1 頁：Line - 分析使用者輸入 我們的情緒分析應用程式的初始頁面名為“Line”，用於即時分析使用者輸入。無論是簡短的句子還是較長的段落，只需將文字輸入或貼到輸入框中，Taipy 就會快速評估文本中傳達的情感。 ![第1頁情緒分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/826k2if80arn6y3uz3dz.png) > ✅ 文字 - 上傳和分析文字文件 第二個頁面名為“文字”，允許使用者上傳整個文字檔案 (.txt) 以進行全面的情感分析。 用戶可以從他們的設備中選擇一個文字文件，該應用程式將提供對整個文件所表達的情緒的洞察。 此功能對於處理較長的文字（例如文章、報告或廣泛的客戶回饋）非常有用。 ![第2頁情緒分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nb3xmtfi7fz6vm8807ph.png) 您可以查看[現場演示](https://sentiment-analysis.taipy.cloud/line)。 https://github.com/Avaiga/demo-sentiment-analysis 明星情感分析 ⭐️ --- 8.[漂移檢測](https://github.com/Avaiga/demo-drift-detection)- 檢測糖尿病資料集中的漂移。 ----------------------------------------------------------------------- ![漂移檢測](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ey1f4ygskvkk6dwqc2c8.png) 資料漂移是主要在機器學習中使用的概念，其中推理資料的分佈偏離訓練資料的分佈。 各種因素，例如底層資料來源的變化、資料收集過程的變化或資料儲存過程的變化，都可能導致資料漂移。 這通常會導致稱為訓練服務偏差的效能問題，其中用於推理的模型不用於推理資料的分佈並且無法泛化。 存在統計測試來檢測資料集中的漂移。這些檢定計算兩個系列來自同一分佈的機率。如果機率低於閾值，我們認為存在漂移。 如何使用該應用程式？ ✅ 選擇比較資料集。 在這裡，我們選擇 data\_big，這是一個與參考資料集類似的資料集，但其中的行具有較高的血壓值。我們在血壓分佈圖上看到，與綠色參考資料集相比，紅色比較資料集的分佈向右移動。 ![資料集](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1752b8elnpwalycyex4.png) ✅ 按一下此處執行場景。 ![執行應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cel6qa0xxiplxgghwhyi.png) ✅ 在頁面底部可視化結果。 在這裡，我們看到血壓列的柯爾莫哥洛夫檢定的 p 值低於 0.05，這意味著兩個血壓資料集來自同一分佈的機率低於 5%。我們可以拒絕兩個資料集來自相同分佈的假設，並得出血壓列存在漂移的結論。 ![視覺化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mh8lftfjiypr27p10ec.png) 您可以按照下面所附的即時示範中的步驟操作，並在 GitHub 上查看原始程式碼。 這使用資料管道來比較資料集並檢測漂移。 ![資料管道](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7s7v5hpicjyoe2eojwx8.png) 查看[現場演示](https://drift-detection.taipy.cloud/)。 https://github.com/Avaiga/demo-drift-detection 星漂移偵測 ⭐️ --- 9.[錢包明智](https://github.com/Ujj1225/from_Taipy-walletWISE) ---------------------------------------------------------- ![錢包明智](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vva4tu9dxrz9fgaiavlb.png) WalletWise 就像是我們財務的友善幫手，幫助我們追蹤收入和支出。它使用 Gemini 進行交易，使用 Taipy 來了解支出。 一些不錯的功能是： ✅ 使用者可以輸入他們的收入和支出以及部門作為標題。這使他們能夠了解和探索他們從哪個部門賺了多少錢以及在哪個部門花了多少錢。 ✅ 對使用者的收入和支出進行分析，以數學方式顯示，並顯示 7 個做出更好、更明智的財務決策的提示。 ✅ 實現了一個視覺化工具，您可以在其中看到您賺錢的不同標題和您花錢的不同標題。 這是一個非常優秀的用例，並且在創造力方面非常好。 您可以閱讀[安裝說明](https://github.com/Ujj1225/from_Taipy-walletWISE?tab=readme-ov-file#installation)並查看[專案演示](https://github.com/Ujj1225/from_Taipy-walletWISE?tab=readme-ov-file#demo)。 https://github.com/Ujj1225/from\_Taipy-walletWISE Star WalletWise ⭐️ --- 10.[太皮象棋](https://github.com/KorieDrakeChaney/taipy-chess) ---------------------------------------------------------- ![棋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xasxqldf7z1q5ie3r4nn.png) 所有應用程式中我最喜歡的一個，因為我喜歡國際象棋。哈哈！ 這是一個基於20,000盤棋的國際象棋視覺化工具。您可以查看所有比賽、他們參加的開局、對手、表現最好的開局以及最成功的開局。 您可以查看資料的熱圖和圖表。 ![總移動熱圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jh1llp4vx24xtxjji042.png) 總移動熱圖 ![棋子的第一個動作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s9do6lop5immbmjtqwa.png) 棋子的第一個動作 您可以觀看 Korie 的[示範](https://github.com/KorieDrakeChaney/taipy-chess?tab=readme-ov-file#demo)。我愛它 ：） 這清楚地表明我們使用 Taipy 的可能性沒有限制。 https://github.com/KorieDrakeChaney/taipy-chess Star Taipy Chess ⭐️ --- 11.[奧運獎牌](https://github.com/enarroied/Olympic-Medals-Taipy-App) ---------------------------------------------------------------- ![奧運獎牌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkl0llaopepdb1s2jxy2.png) 這是一個 Taipy 儀表板，顯示從現代奧運會開始到 2024 年初頒發的奧運獎牌資訊（即不包括 2024 年巴黎奧運會）。 ✅ 儀表板有兩個選項卡： - 一個選項卡顯示所有奧運獎牌的總結資料 - 第二個選項卡重點關注奧林匹克委員會（國家，但也包括特別委員會，例如難民委員會等）獲得的獎牌。 它還具有多種類型的圖表，例如長條圖、旭日圖、折線圖、分區統計圖和網格圖。 另外，儀表板會根據所選年份和區域類型動態更新資料。 您可以在這裡觀看演示！ https://www.youtube.com/watch?v=\_1X7etBFTk0 其中涉及到許多概念，而 Eric 實現了一個非常優秀的用例！ https://github.com/enarroied/Olympic-Medals-Taipy-App 奧運明星獎牌 ⭐️ --- 12. [GPT Researcher](https://github.com/assafelovic/gpt-researcher) - 基於 GPT 的線上研究自主代理。 --------------------------------------------------------------------------------------- ![GPT研究員](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vbqw84mrere5bcfalhk.png) GPT Researcher 是領先的自主代理，負責處理從準確的來源收集到研究結果組織的一切事務。 好的一點是它也引用了研究結果的來源，從而提高了可信度。我喜歡整個概念:) 一些瘋狂的功能是： ✅ 可以產生長而詳細的研究報告（超過2K字）。 ✅ 每項研究總結 20 多個網路資源，以形成客觀和事實的結論。 ✅ 包括易於使用的網路介面（HTML/CSS/JS）。 ✅ 透過 JavaScript 支援抓取網路資源。 ✅ 追蹤存取和使用的網路資源的追蹤和上下文。 ✅ 將研究報告匯出為 PDF、Word 等。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0o49xyzfmzuvmlotgal.png) 開始使用以下命令。 ``` pip install gpt-researcher ``` 您可以這樣使用它。 ``` from gpt_researcher import GPTResearcher query = "why is Nvidia stock going up?" researcher = GPTResearcher(query=query, report_type="research_report") # Conduct research on the given query await researcher.conduct_research() # Write the report report = await researcher.write_report() ``` 請閱讀下面隨附的[安裝說明](https://github.com/assafelovic/gpt-researcher?tab=readme-ov-file#%EF%B8%8F-getting-started)和快速入門指南。 如果您想了解架構的細節，代理商會利用 gpt3.5-turbo 和 gpt-4-turbo（128K 上下文）來完成研究任務。我們僅在必要時才使用每種方法來優化成本。研究任務平均需要大約 3 分鐘才能完成，成本約為 0.1 美元。 ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ls54ua4d3nhn473ek04.png) 您可以閱讀官方部落格了解[GPT Researcher 的工作原理](https://docs.tavily.com/blog/building-gpt-researcher)。 您可以閱讀[常見問題](https://docs.tavily.com/docs/faq)以了解有關準確性等的更多資訊。 您可以閱讀[文件](https://docs.tavily.com/docs/gpt-researcher/getting-started)並存取他們的[官方網站](https://gptr.dev/)。 在這裡觀看演示！ ![GPT 研究員演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xfgnes109mqfyk0r3uq.gif) 它在 GitHub 上有 8700 顆星，並且正在不斷改進。 https://github.com/assafelovic/gpt-researcher GPT 明星研究員 ⭐️ --- 13.[私人 GPT](https://github.com/zylon-ai/private-gpt) - 在沒有網路的情況下詢問有關您的文件的問題。 ---------------------------------------------------------------------------- ![私有GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nshjqmm5xq6kgqkgfdc.png) PrivateGPT 是一個可立即投入生產的 AI 專案，即使在沒有網路連線的情況下，您也可以使用大型語言模型 (LLM) 的功能來詢問有關文件的問題。 100% 私有意味著任何時候都沒有資料離開您的執行環境。 API 分為兩個邏輯區塊： A。高級 API，抽象化了 RAG（檢索增強生成）管道實現的所有複雜性： - 文件攝取：內部管理文件解析、分割、元資料擷取、嵌入產生和儲存。 - 使用所攝取文件中的上下文進行聊天和完成：抽像上下文檢索、提示工程和回應產生。 b.低階 API，允許高階用戶實現複雜的管道： - 嵌入生成：基於一段文字。 - 上下文區塊檢索：給定查詢，從攝取的文件中傳回最相關的文字區塊。 您可以閱讀[安裝指南](https://docs.privategpt.dev/installation/getting-started/installation)來開始。 您可以閱讀[文件](https://docs.privategpt.dev/overview/welcome/introduction)以及所涉及的[詳細架構](https://github.com/zylon-ai/private-gpt?tab=readme-ov-file#-architecture)。 PrivateGPT 現在正在發展成為產生 AI 模型和原語的網關，包括補全、文件攝取、RAG 管道和其他低階建置塊。 他們在 GitHub 上擁有超過 51,000 顆星，並且發展迅速。 https://github.com/zylon-ai/private-gpt 明星私人 GPT ⭐️ --- [14.facefusion](https://github.com/facefusion/facefusion) - 下一代臉部交換器和增強器。 ------------------------------------------------------------------------- ![臉部融合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea0w92sm51da799632vr.png) 這是下一代臉部交換器和增強器。有多種用途，您可以輕鬆做到。 他們還提供了一個[研討會部分](https://docs.facefusion.io/workshop)，您可以在其中了解如何建立 UI 元件和定義框架處理器。 例如，這就是建立 UI 元件的方式。 ``` // create a new file facefusion/uis/components/example.py // Implement the essential methods of the UI component from typing import Optional import gradio from facefusion.uis.typing import Update EXAMPLE_IMAGE : Optional[gradio.Image] = None def render() -> None: global EXAMPLE_IMAGE EXAMPLE_IMAGE = gradio.Image() def listen() -> None: EXAMPLE_IMAGE.change(update, inputs = EXAMPLE_IMAGE, outputs = EXAMPLE_IMAGE) def update() -> Update: return gradio.update() ``` 您只需加入該元件即可。 ``` from facefusion.uis.components import example ``` ![作坊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxznqz8rg23q4tb2brne.png) 安裝可能有點複雜，所以我建議根據您使用的特定環境閱讀[安裝指南](https://docs.facefusion.io/installation)。 您可以使用此命令檢查基準測試。 ``` python run.py --ui-layouts benchmark ``` ![基準](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdc3s7xwjxoukee784ds.png) 您可以閱讀[文件](https://docs.facefusion.io/)並了解有關[技術術語的](https://docs.facefusion.io/knowledgebase/technical-terms)更多資訊。 他們在 GitHub 上擁有超過 14k 個 star，並且發布了`v2.5`版本。 https://github.com/facefusion/facefusion 明星facefusion ⭐️ --- 15. [H2O LLMStudio](https://github.com/h2oai/h2o-llmstudio) - 用於微調 LLM 的無程式碼 GUI。 --------------------------------------------------------------------------------- ![H2O法學碩士工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a03nefeobwwf9bkhcgwg.png) H2O LLM Studio 是一個開源、無程式碼的 LLM 圖形使用者介面 (GUI)，專為微調最先進的大型語言模型而設計。 微調預訓練的語言模型需要編碼專業知識以及有關模型及其超參數的廣泛知識，但是，H2O LLM Studio 使 NLP 從業者能夠輕鬆微調他們的 LLM，無需編碼，並且比定制具有更好的靈活性。 H2O LLM Studio 還可讓您與微調模型聊天並接收有關模型效能的即時回饋。 NLP 從業者和資料科學家尤其可能會發現輕鬆有效地建立和微調大型語言模型很有用。您可以閱讀[詳細的效能統計資料](https://h2oai.github.io/h2o-llmstudio/get-started/llm-studio-performance)及其雲端[架構](https://docs.h2o.ai/haic-documentation/overview/architecture)。 如果您正在開始，我建議您觀看此內容！ https://www.youtube.com/watch?v=u48QaIAIFw4 您可以閱讀有關[核心功能的](https://h2oai.github.io/h2o-llmstudio/get-started/core-features)訊息，例如： ✅ 無程式碼微調 ✅ 高度可自訂 ✅ 關於模型性能的即時回饋 您可以使用以下命令啟動 H2O LLM Studio。 ``` make llmstudio ``` 如果你不知道這些概念，他們也有[清晰的概念指南，](https://h2oai.github.io/h2o-llmstudio/concepts)包括 Generative AI、LoRA、Quantization、LLM Backbone 等等。 您可以閱讀[文件](https://docs.h2o.ai/haic-documentation/)。 您可以使用它非常輕鬆且符合標準地製作一個副專案。 他們在 GitHub 上有 3,600 顆星，並且發布了`v1.5`版本。 https://github.com/h2oai/h2o-llmstudio 明星 H2O LLMStudio ⭐️ --- 16. [Mac 上的語音助理](https://github.com/chidiwilliams/GPT-Automator)- 您的語音控制 Mac 助理。 -------------------------------------------------------------------------------- ![GPT自動機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdzv06jnr3z33s7qll5k.png) 您的語音控制 Mac 助理。 GPT Automator 可讓您使用語音在 Mac 上執行任務。例如，打開應用程式、尋找餐廳、綜合資訊。太棒了：D 它是在倫敦黑客馬拉松期間建構的。 它有兩個主要部分： A。語音命令：它使用本地執行的 Whisper（Buzz 的一個分支）來產生命令。 b.命令到行動：您向配備了我們編寫的自訂工具的 LangChain 代理程式發出命令。這些工具包括使用 AppleScript 控制電腦的作業系統以及使用 JavaScript 控制活動瀏覽器。最後，就像任何優秀的人工智慧一樣，我們讓代理商使用 AppleScript 說出最終結果「{Result}」（如果您以前沒有使用過，請嘗試在 Mac 終端機中輸入「Hello World！」）。 我們製作了一個自訂工具，讓法學碩士使用 AppleScript 控制電腦。提示符是文件字串： ``` @tool def computer_applescript_action(apple_script): """ Use this when you want to execute a command on the computer. The command should be in AppleScript. Here are some examples of good AppleScript commands: Command: Create a new page in Notion AppleScript: tell application "Notion" activate delay 0.5 tell application "System Events" to keystroke "n" using {{command down}} end tell ... Write the AppleScript for the Command: Command: """ p = subprocess.Popen(['osascript', '-'], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE) stdout, stderr = p.communicate(applescript.encode('utf-8')) if p.returncode != 0: raise Exception(stderr) decoded_text = stdout.decode("utf-8") return decoded_text ``` 如果您想知道它是如何運作的，GPT Automator 使用 OpenAI 的 Whisper 將您的音訊輸入轉換為文字。然後，它使用LangChain Agent 選擇一組操作，包括使用OpenAI 的GPT-3（“text-davinci-003”）從提示符號產生AppleScript（用於桌面自動化）和JavaScript（用於瀏覽器自動化）命令，然後執行產生的腳本。 請記住，這不適用於生產用途。該專案執行從自然語言產生的程式碼，可能容易受到提示注入和類似的攻擊。這項工作是作為概念驗證而進行的。 您可以閱讀[安裝指南](https://github.com/chidiwilliams/GPT-Automator?tab=readme-ov-file#instructions)。 讓我們看看一些提示及其作用： ✅ 求計算結果。 > 提示：“2 + 2 是什麼？” 它將編寫 AppleScript 開啟計算器並輸入 5 \* 5。 ✅ 尋找附近的餐廳。 > 提示：“查找我附近的餐廳” 它將打開 Chrome，谷歌搜尋附近的餐廳，解析頁面，然後返回最上面的結果。有時它很厚顏無恥，反而會打開谷歌地圖結果並說「最好的餐廳是谷歌地圖頁面頂部的餐廳」。其他時候，它會打開 Google 上的頂部連結 - 並卡在 Google 可存取性頁面上... 以下是執行時列印到終端的內容： ``` Command: Find a great restaurant near Manchester. > Entering new AgentExecutor chain... I need to search for a restaurant near Manchester. Action: chrome_open_url Action Input: https://www.google.com/search?q=restaurant+near+Manchester Observation: Thought: I need to read the page Action: chrome_read_the_page Action Input: Observation: Accessibility links Skip to the main content ... # Shortned for brevity Dishoom Manchester 4.7 (3.3K) · £££ · Indian 32 Bridge St · Near John Rylands Library Closes soon ⋅ 11 pm Stylish eatery for modern Indian fare San Carlo 4.2 (2.8K) · £££ · Italian 42 King St W · Near John Rylands Library Closes soon ⋅ 11 pm Posh, sceney Italian restaurant Turtle Bay Manchester Northern Quarter 4.7 Thought: I now know the final answer Final Answer: The 15 best restaurants in Manchester include El Gato Negro, Albert's Schloss, The Refuge, Hawksmoor, On The Hush, Dishoom, Banyan, Zouk Tea Room & Grill, Edison Bar, MyLahore Manchester, Turtle Bay Manchester Northern Quarter, San Carlo, The Black Friar, Mana, and Tast Cuina Catalana. ``` 我不能保證這些餐廳值得，請自行承擔風險。哈哈！ ✅ 如果您要求 GPT Automator 擦除您的計算機，它會的。 是的，如果您要求的話，它會擦除您的電腦！ 我內心的自我尖叫著要這麼做:) 您可以在這裡查看完整的演示！ https://www.loom.com/share/7bfa82c604f3412fbbb04191ce2ae12f --- 17. [RepoChat](https://github.com/pnkvalavala/repochat) - 支援 GitHub 儲存庫互動的聊天機器人助理。 ---------------------------------------------------------------------------------- ![重新聊天](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gf9bjn2a47f1t43aiju.png) Repochat 是一個互動式聊天機器人專案，旨在使用大型語言模型 (LLM) 參與有關 GitHub 儲存庫的對話。 它允許用戶進行有意義的討論、提出問題並從 GitHub 儲存庫檢索相關資訊。本自述文件提供了在本機電腦上設定和使用 Repochat 的逐步說明。 他們建立了兩個具有不同功能的分支，這對我來說有點新鮮。 ✅ Repochat 的主要分支被設計為完全在您的本機電腦上執行。此版本的 Repochat 不依賴外部 API 呼叫，並且可以更好地控制您的資料和處理。如果您正在尋找獨立的解決方案，那麼主分支就是您的最佳選擇。 ✅ Repochat 的雲端分支主要依賴對外部服務的 API 呼叫來進行模型推理和儲存。它非常適合那些喜歡基於雲端的解決方案並且不想設定本地環境的人。 您可以閱讀[安裝說明](https://github.com/pnkvalavala/repochat?tab=readme-ov-file#installation)。 Repochat 讓您與聊天機器人進行對話。您可以提出問題或提供輸入，聊天機器人將從向量資料庫中檢索相關文件。 然後，它將您的輸入以及檢索到的文件傳送到語言模型以產生回應。 預設情況下，我已將模型設為`codellama-7b-instruct` ，但您可以根據計算機的速度更改它，甚至可以嘗試 13b 量化模型進行回應。 聊天機器人在對話過程中保留記憶以提供上下文相關的回應。 您可以查看[即時網站](https://repochat.streamlit.app/)，您可以使用 API 金鑰進行檢查。 你可以觀看這個演示！ ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7ndxqpwkkww4f5qudiq.gif) 如果您想查看的話，我找到了另一種[選擇](https://github.com/peterw/Chat-with-Github-Repo)。 Repochat 擁有 200 多顆星，並部署在 Streamlit 上。 https://github.com/pnkvalavala/repochat 明星 RepoChat ⭐️ --- 18. [myGPTReader](https://github.com/madawei2699/myGPTReader) - 閱讀並與 AI 機器人聊天。 ------------------------------------------------------------------------------ ![我的GPT閱讀器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58doii8daomf54te5eca.png) myGPTReader 是 Slack 上的機器人，可以閱讀和總結任何網頁、文件（包括電子書），甚至來自 YouTube 的影片。它可以透過語音與您交流。 一些有價值的功能是： ✅ 使用 myGPTReader 透過對話快速閱讀和理解任何網頁內容，甚至是影片（目前僅支援帶有字幕的 YouTube 影片）。 ![讀者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x626mtnvqr5vw43938iw.gif) ✅ 使用 myGPTReader 快速閱讀任何文件的內容，支援電子書、PDF、DOCX、TXT 和 Markdown。 ![文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5am7njxco7vhronuirgu.gif) ✅ 透過與 myGPTReader 語音對話來練習外語，它可以成為您的私人導師，支援中文、英語、德語和日語。 ![嗓音](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40pzlgtuhcyxgwa1z2gs.gif) ✅ 內建大量提示模板，使用它們可以更好地與chatGPT對話。 ![問](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehgn218hwewzeft98xkp.gif) ✅ myGPTReader 每天都會發出最新的熱門新聞，並自動產生摘要，讓您快速了解今日熱點。 您可以造訪[官方網站](https://www.myreader.io/)。 您可以加入擁有超過 5000 名會員的儲存庫上的 Slack 頻道，免費體驗所有這些功能。 它們在 GitHub 上有 4.4k 顆星，並且像此列表中的其他專案一樣使用 Python 建置。 https://github.com/madawei2699/myGPTReader 星 myGPTReader ⭐️ --- 19. [Marker](https://github.com/VikParuchuri/marker) - 將 PDF 快速且高精度地轉換為 Markdown。 --------------------------------------------------------------------------------- ![標記](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kpdu6jh9qmax5cikbah.png) Marker 將 PDF、EPUB 和 MOBI 轉換為 Markdown。它比牛軋糖快 10 倍，在大多數文件上更準確，並且產生幻覺的風險較低。 我們都知道這有多大幫助，尤其是對於研究論文來說。 ✅ 支援一系列 PDF 文件（針對書籍和科學論文進行了最佳化）。 ✅ 刪除頁首/頁尾/其他工件。 ✅ 將大多數方程式轉換為乳膠。 ✅ 設定程式碼區塊和表格的格式。 ✅ 支援多種語言（儘管大多數測驗是用英語完成的）。請參閱 settings.py 以取得語言列表，或新增您自己的語言列表。 ✅ 適用於 GPU、CPU 或 MPS。 他們也清楚地記錄了[範例](https://github.com/VikParuchuri/marker?tab=readme-ov-file#examples)以及 Marker 和 Nougat 的結果。 ![基準](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqtl447c9h0taisbj8hl.png) 性能結果採用標記和牛軋糖設置，因此它們在 A6000 上均佔用約 3GB 的 VRAM。 閱讀速度和準確性[基準測試](https://github.com/VikParuchuri/marker?tab=readme-ov-file#benchmarks)以及有關如何執行您自己的基準測試的說明。 例如，請參閱此 PDF： [Think Python](https://greenteapress.com/thinkpython/thinkpython.pdf)和[Marker](https://github.com/VikParuchuri/marker/blob/master/data/examples/marker/thinkpython.md) vs [Nougat](https://github.com/VikParuchuri/marker/blob/master/data/examples/nougat/thinkpython.md)的 markdown 檔案。 閱讀[安裝說明](https://github.com/VikParuchuri/marker?tab=readme-ov-file#installation)。 他們也記錄瞭如何正確使用它： - [轉換單一文件](https://github.com/VikParuchuri/marker?tab=readme-ov-file#convert-a-single-file) - [轉換多個文件](https://github.com/VikParuchuri/marker?tab=readme-ov-file#convert-multiple-files) - [在多個 GPU 上轉換多個文件](https://github.com/VikParuchuri/marker?tab=readme-ov-file#convert-multiple-files-on-multiple-gpus) 他們在 GitHub 上有 8k+ 星，我認為它不再被維護了。 https://github.com/VikParuchuri/marker 星標 ⭐️ --- 20. [Instrukt](https://github.com/blob42/Instrukt) - 終端機中整合人工智慧。 ---------------------------------------------------------------- ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsk64pf5yuosui91tmz9.png) Instrukt是一個基於終端的AI整合環境。它提供了一個平台，用戶可以： - 建立並指導模組化人工智慧代理。 - 產生問答的文件索引。 - 建立工具並將其附加到任何代理程式。 用自然語言指導它們，並且為了安全起見，在安全容器（目前使用 Docker 實作）中執行它們，以在其專用的沙盒空間中執行任務。 使用`Langchain` 、 `Textual`和`Chroma`建構。 開始使用以下命令。 ``` pip install instrukt[all] ``` ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3aza7hnlji7hbi2o0js.gif) 有許多令人興奮的功能，例如： - 基於終端的介面，讓強力鍵盤使用者無需離開鍵盤即可指示 AI 代理。 - 對您的資料建立索引並讓代理程式檢索它以進行問答。您可以使用簡單的 UI 建立和組織索引。 - 索引建立將自動偵測程式語言並相應地優化拆分/分塊策略。 - 在安全的 Docker 容器內執行代理程式以確保安全和隱私。 - 整合的 REPL-Prompt 可實現與代理程式的快速交互，以及用於開發和測試的快速回饋循環。 - 您可以使用自訂命令自動執行重複任務。它還具有內建的提示/聊天歷史記錄。 您可以閱讀有關所有[功能的](https://github.com/blob42/Instrukt?tab=readme-ov-file#features)資訊。 您可以閱讀[安裝指南](https://blob42.github.io/Instrukt/install.html)。 您還可以使用內建的 IPython 控制台來除錯和內省代理，這是一個簡潔的小功能。 ![控制台除錯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaan8np68e3fk1yueexm.png) Instrukt 已獲得 AGPL 許可證，這意味著任何人都可以將其用於任何目的。 可以肯定地說，Instrukt 是您觸手可及的終端人工智慧指揮官。 這是一個新專案，因此他們在 GitHub 上有大約 200 多顆星，但用例非常好。 https://github.com/blob42/Instrukt 舊指令 ⭐️ --- 21.[微代理](https://github.com/aymenfurter/microagents)- 能夠自我編輯提示的代理。 ------------------------------------------------------------------ ![微代理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuxv03dgb03s04dkmkm9.png) 它是一個實驗框架，用於動態建立自我改進的代理來回應任務。 微代理代表了一種建立自我改進代理的新方法。小型微服務大小（因此稱為微代理）代理是根據用戶分配給助手的任務動態生成的，評估其功能，並在成功驗證後存儲以供將來重用。 這使得跨聊天會話的學習成為可能，使系統能夠獨立推斷任務執行的方法。 這是使用`Python` 、 `OpenAI's GPT-4 Turbo`和`Text-Embedding-Ada-002`建構的。 您可以閱讀[安裝說明](https://github.com/aymenfurter/microagents?tab=readme-ov-file#installation)。他們提到您應該擁有一個可以存取 gpt-4-turbo 和 text-embedding-ada-002 的 OpenAI 帳戶。 讓我們看一個獲取天氣預報代理的範例。 ``` You are an adept weather informant. Fetch the weather forecast by accessing public API data using this Python code snippet: ``python import requests import json def fetch_weather_forecast(location, date): response = requests.get(f"https://api.met.no/weatherapi/locationforecast/2.0/compact?lat={location[0]}&lon={location[1]}") weather_data = response.json() for day_data in weather_data['properties']['timeseries']: if date in day_data['time']: print(day_data['data']['instant']['details']) break `` # Example usage: fetch_weather_forecast((47.3769, 8.5417), '2024-01-22T12:00:00Z') Note: Replace the (47.3769, 8.5417) with the actual latitude and longitude of the location and the date string accordingly. ``` 如果您想知道如何建立代理，那麼此架構圖將對此進行解釋。 ![圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oi4fbt6e5qauqo293qt.png) 您可以看到[工作演示](https://github.com/aymenfurter/microagents?tab=readme-ov-file#demo)。 他們在 GitHub 上有大約 700 顆星，值得一看。 https://github.com/aymenfurter/microagents 明星微代理 ⭐️ --- 22. [Resume Matcher](https://github.com/srbhr/Resume-Matcher) - 一個改進你的履歷的免費工具。 ------------------------------------------------------------------------------ ![履歷表匹配器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av3u7dd3d3rm7k108w7i.png) Resume Matcher 是一款開源免費工具，可用於完善您的履歷。根據職位描述自訂您的履歷。找到匹配的關鍵字，提高可讀性，並深入了解您的履歷。 它是如何運作的？ 履歷表匹配器使用 Python 讀取您的履歷和職位描述，就像 ATS 一樣。 它建議透過以下方式進行更改，使您的履歷適合 ATS： ✅ 解析：它使用 Python 分解你的履歷和工作描述。 ✅ 關鍵字提取：該工具從職位描述中尋找重要關鍵字，例如技能和資格。 ✅ 關鍵術語提取：辨識職位描述中的主題以了解其上下文。 ✅ 向量相似度：使用 FastEmbedd，它將您的履歷與職位描述進行比較，看看它們的匹配程度。配對得越好，通過 ATS 篩選的機會就越高。 ![使命](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kintryj2685slbya98zr.png) 您可以閱讀[安裝說明](https://github.com/srbhr/Resume-Matcher?tab=readme-ov-file#how-to-install)。 您可以查看[現場演示](https://resume-matcher.streamlit.app/)或自述文件中附帶的演示。 Resume Matcher 是由 Saurabh Rai 建立的一個令人驚嘆的專案，他還在 DEV 上寫了很棒的帖子！ 它在 GitHub 上有 4.5k 顆星，並且仍然維護良好。 https://github.com/srbhr/Resume-Matcher 明星簡歷匹配器 ⭐️ --- 23.[背景移除器](https://github.com/nadermx/backgroundremover)- 讓您可以透過簡單的 CLI 使用 AI 從影像和影片中移除背景。 ------------------------------------------------------------------------------------------ ![背景去除劑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8bppslk45ci383wpman.png) 這是一個使用 AI 從圖像和影片中刪除背景的命令列工具。 首先從 pypi 安裝 backgroundremover。 ``` pip install --upgrade pip pip install backgroundremover ``` 也可以在不透過 pip 安裝的情況下執行它，只需克隆 git 以在本地啟動虛擬環境安裝要求並執行。 您可以使用的一些命令： - 從本機檔案圖像中刪除背景 ``` backgroundremover -i "/path/to/image.jpeg" -o "output.png" ``` - 從本地影片中刪除背景並將其覆蓋在圖像上 ``` backgroundremover -i "/path/to/video.mp4" -toi "/path/to/videtobeoverlayed.mp4" -o "output.mov" ``` 您可以檢查可以透過 CLI 使用的所有[命令](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#usage-as-a-cli)。 您甚至可以將它用作圖書館。 ``` from backgroundremover.bg import remove def remove_bg(src_img_path, out_img_path): model_choices = ["u2net", "u2net_human_seg", "u2netp"] f = open(src_img_path, "rb") data = f.read() img = remove(data, model_name=model_choices[0], alpha_matting=True, alpha_matting_foreground_threshold=240, alpha_matting_background_threshold=10, alpha_matting_erode_structure_size=10, alpha_matting_base_size=1000) f.close() f = open(out_img_path, "wb") f.write(img) f.close() ``` 您可以閱讀[安裝說明](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#installation)並觀看[現場演示](https://www.backgroundremoverai.com/)。 > 輸入與輸出。 ![輸入影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0rwjaxxw460lugle5z2.png) 他們在 GitHub 上有 6k star，我們絕對可以用它來學習一些重要的概念。 https://github.com/nadermx/backgroundremover 明星背景去除器 ⭐️ --- 24. [Tkinter Designer](https://github.com/ParthJadhav/Tkinter-Designer) - 建立 Python GUI 的簡單快速的方法。 ------------------------------------------------------------------------------------------------- ![Tkinter 設計師](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dt5ij4fu948yz4fwnqc.png) Tkinter Designer 的建立是為了加快 Python 中的 GUI 開發過程。它使用著名的設計軟體Figma，讓用Python建立漂亮的Tkinter GUI變得輕而易舉。 Tkinter Designer 使用 Figma API 來分析設計檔案並建立 GUI 所需的對應程式碼和檔案。 如果您想知道它是如何工作的？ 使用者唯一需要做的就是使用 Figma 設計一個介面，然後將 Figma 檔案 URL 和 API 令牌貼到 Tkinter Designer 中。 Tkinter Designer 將自動產生在 Tkinter 中建立 GUI 所需的所有程式碼和映像。 ![怎麼運作的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb2pjsige0b9w5rynipm.png) 您可以閱讀逐步指南\](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/instructions.md)，了解如何正確使用它，該指南有多種語言版本。 您可以在這裡觀看演示！ https://www.youtube.com/watch?v=Qd-jJjduWeQ 他們還展示了您可以使用它輕鬆複製的[網站範例](https://github.com/ParthJadhav/Tkinter-Designer?tab=readme-ov-file#-examples)。 ![網站範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdiyhj08bwatasonpekm.png) 它們在 GitHub 上有 8,300 顆星，並被大約 100 名開發人員使用。 https://github.com/ParthJadhav/Tkinter-Designer Tkinter 明星設計師 ⭐️ --- 25. [Open Interpreter](https://github.com/OpenInterpreter/open-interpreter) - 電腦自然語言介面。 --------------------------------------------------------------------------------------- ![打開解釋器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av7udc5fibj1wz88w0u8.png) Open Interpreter 允許法學碩士在本地執行程式碼（Python、Javascript、Shell 等）。您可以在安裝後執行 $terpreter，透過終端機中類似 ChatGPT 的介面與 Open Interpreter 聊天。 這為電腦的通用功能提供了自然語言介面： ✅ 建立和編輯照片、影片、PDF 等。 ✅ 控制 Chrome 瀏覽器執行研究、繪製、清理和分析大型資料集。 我不了解你，但他們的[網站](https://www.openinterpreter.com/)讓我驚嘆不已！ 使用此命令快速啟動。 ``` pip install open-interpreter // After installation, simply run: interpreter ``` 您可以閱讀[快速入門指南](https://docs.openinterpreter.com/getting-started/introduction)。 您應該閱讀[與 ChatGPT 程式碼解釋器的比較](https://github.com/OpenInterpreter/open-interpreter?tab=readme-ov-file#comparison-to-chatgpts-code-interpreter)以及可以使用的[命令](https://github.com/OpenInterpreter/open-interpreter?tab=readme-ov-file#commands)。 您可以閱讀[文件](https://docs.openinterpreter.com/getting-started/introduction)。 Open Interpreter 可與託管語言模型和本機語言模型搭配使用。託管模型速度更快、功能更強大，但需要付費。本地模型是私有且免費的，但能力往往較差。 它們在 GitHub 上擁有超過 48k 顆星，並被 300 多名開發人員使用。 https://github.com/OpenInterpreter/open-interpreter Star 開放式解釋器 ⭐️ --- 獲得經驗並提高編碼水平的最佳方法是建立業餘專案。 我希望您能夠建立其中一些專案，或至少獲得靈感。 評論下來告訴其他人任何其他很酷的 Python 專案:) 祝你有美好的一天！ 關注 Taipy 以了解更多此類內容。 https://dev.to/taipy --- 原文出處：https://dev.to/taipy/25-projects-that-you-can-build-with-python-and-ai-12i9

1個讚   0留言 114瀏覽

搜尋將是 LLMs 和人工智慧應用的未來。

在查看 LinkedIn 時，我的動態中出現了一篇[有趣的文章](https://www.linkedin.com/pulse/every-llm-company-search-hard-future-retrieval-systems-7zigc/?trackingId=MuIYNy7CyPMG2IMgoJv9tg%3D%3D)。其標題是「每個 LLMs 公司都是一家搜尋公司，而搜尋很困難： LLMs 檢索系統的未來」。 這很有趣，因為我們在過去幾年中建立了 SWIRL，以幫助擴展公司的搜尋和人工智慧基礎設施。正如我們所提到的，搜尋無處不在。 DEVTO現在正在使用Algolia（也許更早，他們的程式碼用於執行搜尋）來實現智慧搜尋。任何嘗試過建立支援搜尋的應用程式的人都知道，搜尋很複雜，涉及許多因素，例如相關性排名和個人化。 這使得建築物搜尋變得困難。這適用於嘗試建立支援搜尋的應用程式的人。搜尋很難管理，需要考慮很多因素。以搜尋引擎人工智慧領域的領導者谷歌為例，該公司在搜尋結果方面面臨批評。人們開始[抱怨]()其搜尋結果。但我們不僅僅談論谷歌。這裡有很多東西要理解。 您組織內部的資料怎麼樣？你工作的地方？ ------------------- 企業擁有大量分散在各個部門和管道的資料——從客戶互動和銷售記錄到操作日誌和員工回饋。 他們認識到利用這些資料建立人工智慧驅動的應用程式的巨大潛力，這些應用程式可以簡化營運、增強客戶體驗並推動創新。然而，挑戰在於統一這種分散的資料格局。 ![組織內部的資料](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mohvy22urvxf3pn0mbpt.jpg) 資料中充滿了許多資訊： - 會議記錄 - 孤立的應用程式 - 電子郵件檔案 - 內部文件 - 客戶支援票 - 專案管理工具 挑戰在於檢索該資訊。我們目前的做法是將所有資料傳輸到向量資料庫。然後用它來檢索資訊。這既簡單又困難。很簡單，因為您知道在哪裡搜尋。這很困難，因為它管理這些向量資料庫（或任何搜尋索引）。你必須： - 不斷尋找資料。 - 比較索引資料和更新資料。 - 如有必要，請更新。 最重要的是，如果您使用向量資料庫，您將處理嵌入。但這是另一個部落格的故事。 那為什麼搜尋是 LLMs 申請的未來呢？ ------------------ 我們產生的大量資料變得越來越難以管理。傳統方法成本高、耗時長，且有一定的[安全風險](https://swirlaiconnect.com/blog/the-risks-of-relying-on-a-single-data-repository-for-retrieval-augmented-generation-rag)。 當您的 LLMs 可以搜尋資料儲存庫內的資訊。他們可以提供您和您的團隊所需的訊息，而無需在訓練記憶中進行搜尋，或在訓練記憶不存在時產生幻覺。透過提供你所要求的背景，它就變成了尋找一本書然後回答。 ### 我們的重點該放在哪裡？ 為了開發能夠在內部資料上表現良好的人工智慧應用程式，我們需要一種高效的檢索增強生成（RAG）方法。在這種情況下，檢索器是一個搜尋平台。 屬性應該是： - 它應該連接到內部資料來源。 - 確保安全、尊重並遵循當前和現有的安全解決方案。 - 理解人類語言的上下文。 - 提供優秀且相關的結果。 這就是我們建立[SWIRL 的](https://swirlaiconnect.com)方式：一個高效的檢索器，可以提供良好的答案，與多個資料提供者連接，並允許在企業中使用人工智慧。 這樣，一項工作就完成了。你有資料。您所要做的就是配置一個資料提供者。建立查詢並取得答案。一旦您即時獲得了所需的資料，機會就無窮無盡： - 取得人工智慧摘要。 - 在人工智慧的幫助下，使用這些資料來製作報告。 - 建立一個可以幫助您完成任務的副駕駛。 一旦解決了檢索部分，您就可以做很多事情。 SWIRL 在自架平台上運作，因此您的資料仍然安全。 看看我們能用 SWIRL 做什麼？ ----------------- 我可以搜尋來源並為您提供資料。其餘的只是安排事情的一種方式。從廣義上講，它既簡單又安全。 我想給你一個關於架構的想法。檢查這個圖。它展示了我們如何利用人工智慧基礎設施平台來做到這一點。 ![SWIRL AI Connect 架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kqhvqagk32y9oln2kj1.png) 這就是最好的事情：即時搜尋您的資料。 這裡的遊戲規則改變者是我們應該選擇一個框架，該框架允許我們從多個應用程式獲取資料而不限制最終用戶。然後，讓 LLMs 協助您執行任務。 還有一點：最好的資料並不總是在 SQL 資料庫中。它可以位於您團隊的房間、會議記錄或您保存的其他一些文件中。上述架構使您能夠找到並獲得良好的結果，讓您感覺自己是編寫它們的人。 搜尋，不僅僅是語義搜尋，而是通用搜尋架構，需要縮小我們想要從人工智慧獲得的資訊差距。 與我們一起建立人工智慧基礎設施軟體 SWIRL ----------------------- [![加入 SWIRL 社區](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqk0xqbjxlj1xdcomn9m.jpg)](https://github.com/swirlai/swirl-search) SWIRL 是開源的並用 Python 建構。我們正在開發許多好東西，從搜尋到聊天介面。如果您是 UI 專業人士，請幫助我們！ https://join.slack.com/t/swirlmetasearch/shared\_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw 加入我們的 Slack。 觀看[有關如何設定 SWIRL 的影片](https://www.youtube.com/watch?v=OogRYkfSki8)。然後，加入我們的[Slack 社群](https://join.slack.com/t/swirlmetasearch/shared_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw)並聯繫我。讓我們一起建立一個令人驚嘆的開源人工智慧平台。**可能會有一些驚人的獎勵給你。** 💐🎁 https://github.com/swirlai/swirl-search 在 GitHub 上給我們一個 🌟。 --- 原文出處：https://dev.to/srbhr/search-will-be-the-future-of-llm-and-ai-applications-26fl

0個讚   0留言 71瀏覽

2024 年開發人員的副業想法

您是一名軟體工程師，渴望將自己的技能轉化為有利可圖的副業嗎？ 網上賺錢的可能性是無限的，我有一些令人興奮的想法，可以讓 2024 年成為您迄今為止最偉大的一年。無論您是在尋找額外收入還是夢想創辦自己的企業，這些副業都旨在讓您充滿動力並提高技能，從而有可能增加您的收入。讓我們深入了解一下吧！ 銷售數位產品和插件 --------- 根據 Statista 預測，到 2024 年，數位商務市場的交易額預計將達到 7.63 兆美元。這是您透過建立 Shopify 或 WordPress 外掛程式等數位資產來分得一杯羹的機會。 為什麼不使用您最喜歡的技術堆疊建立可重複使用的網站模板並在[Gumroad](https://gumroad.com/)或[Envato](https://themeforest.net/)等平台上出售它們？我將從在 Gumroad 上銷售網站範本開始，我讀過並發現它可以是一項高利潤的企業。 ![在線銷售數位產品](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zxf601pjbuq7i93ndab.jpg) App Store / Play 商店應用程式開發 ------------------------- 行動應用程式開發仍然蓬勃發展。截至 2023 年，Google Play 商店擁有約 371.8 萬個行動應用程式，Apple App Store 提供約 180.3 萬個 iPhone 應用程式。使用 React Native、Flutter 或 Ionic 等跨平台工具和框架，您無需學習 Java/Kotlin 或 Swift 等原生語言即可開發應用程式。 透過廣告、應用程式內購買或提供具有額外功能的高級無廣告版本，透過您的應用程式獲利。行動應用市場是一座金礦，等待著您的創新想法。 ![行動應用程式開發](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4up3n87qtm39m6txjyjd.png) SaaS 或微型 SaaS 產品 ---------------- 建立專門的、利基的 SaaS（軟體即服務）產品可以獲得令人難以置信的利潤。微型 SaaS 產品通常由獨立開發人員或小型團隊開發，專注於非常特定的市場或功能。 從 Raycast 中汲取靈感，Raycast 是一款生產力工具，可透過快速存取和自訂腳本簡化日常任務和工作流程。這個小團隊的基於訂閱的模式取得了巨大的成功。您獨特的 Micro-SaaS 產品可能會成為下一件大事！ ![SaaS 或微型 SaaS 產品](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8u7h6b1ab9htrl6a5is1.png) 開源專案貢獻 ------ 為開源專案做出貢獻是展示您的技能、與其他開發人員合作以及建立聲譽的絕佳方式。這些貢獻可以帶來工作機會、諮詢工作或銷售自己的工具和服務的機會。 如果您啟動了一個獲得關注的開源專案，您可以透過贊助、捐贈或雙重許可來貨幣化它，提供免費社區版本和帶有附加功能或支援的付費商業版本。 ![開源](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7lf8j3udkqvo2ovhlkq.png) 7. 科技博客 ------- 技術部落格是分享專業知識、回顧新技術和提供教學的有效方式。透過廣告、聯盟行銷、贊助內容或銷售電子書或課程等數位產品，最初的愛好可以成為一項利潤豐厚的職業。 建立一個利基市場，無論是網頁開發、人工智慧趨勢或小工具評論。透過提供有價值、準確且引人入勝的內容來擴大受眾群體。作為部落客，強大的個人品牌可以帶來演講、書籍交易和諮詢工作。 準備好將您的技能轉化為更多東西了嗎？這些副業想法是您通往美好 2024 年的門票。 ![科技部落格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbmsmhgnh5qe8ph8urfg.png) 客製化人工智慧解決方案 ----------- 人工智慧不僅僅是一個流行詞；這是一個蓬勃發展的市場。 2023 年，人工智慧的估值將超過 1,536 億美元，而且規模只會越來越大。每週都有新的人工智慧工具上市，為開發人員提供了無限的機會。 想像一下，使用[GPT](https://openai.com/index/gpt-4/) 、 [Llama](https://llama.meta.com/)或[PaLM 2](https://ai.google/discover/palm2/)等大型語言模型 (LLM) 來建立一個像 AgentGPT 這樣的人工智慧工具。這些工具將使用者定義的目標分解為可操作的任務並按順序執行它們。設計一個使用者友善的介面，讓使用者與人工智慧互動、定義目標、監控進度和接收輸出。透過訂閱模式將您的創作貨幣化，並隨著企業和個人為您節省時間的解決方案付費而利潤滾滾而來。 ![人工智慧驅動的解決方案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjlj7r1hmxdwh8dqfue3.png) 透過探索這些副業想法和其他想法，您可以發現有效利用您的技能並賺取可獲利收入的新方法。 請隨意點擊下面的連結來查看我的開源專案等。 \*\* [travislord.xyz](https://travislord.xyz/) [github.com/lilxyzz](https://github.com/lilxyzz) \*\* --- 原文出處：https://dev.to/lilxyzz/side-hustle-ideas-for-developers-in-2024-jh5

0個讚   0留言 51瀏覽

我正在建立一個人工智慧驅動的部落格：具體方法如下...

人工智慧時代已經來臨。身為開發者，要想取得成功，在你的投資組合中加入一些人工智慧驅動的專案是很棒的。 今天，我們將建立一個由人工智慧驅動的部落格平台，該平台具有一些很棒的功能，例如研究、自動完成和 Copilot。 我[在這裡](https://dev.to/copilotkit/how-to-build-an-ai-powered-blogging-platform-nextjs-langchain-supabase-1hdp)建立了該專案的初始版本。一位評論者提出了一些非常酷的建議，可以將其提升到一個新的水平。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2pbxvo6rff8xz8a0h3b.png) 所以我們決定建造它！ **長話短說** -------- 我們正在建立一個由人工智慧驅動的部落格平台 Pt。二 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi1j9iq1jkll1r21f1e8.gif) --- CopilotKit：建構應用內人工智慧副駕駛的框架 ========================== CopilotKit是一個[開源的AI副駕駛平台](https://github.com/CopilotKit/CopilotKit)。我們可以輕鬆地將強大的人工智慧整合到您的 React 應用程式中。 建造： - ChatBot：上下文感知的應用內聊天機器人，可以在應用程式內執行操作 💬 - CopilotTextArea：人工智慧驅動的文字字段，具有上下文感知自動完成和插入功能📝 - 聯合代理：應用程式內人工智慧代理，可以與您的應用程式和使用者互動🤖 ![上傳圖片](...) {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} 現在回到文章！ --- 先決條件 ---- 要完全理解本教程，您需要對 React 或 Next.js 有基本的了解。 以下是建立人工智慧部落格所需的工具： - [Quill 富文本編輯器](https://quilljs.com/)- 一個文字編輯器，可讓您輕鬆設定文字格式、新增圖片、新增程式碼以及在 Web 應用程式中建立自訂互動式內容。 - [Supabase](https://supabase.com/) - 一項 PostgreSQL 託管服務，為您提供專案所需的所有後端功能。 - [Langchain](https://www.langchain.com/) - 提供了一個框架，使人工智慧代理能夠搜尋網路並研究任何主題。 - [OpenAI API](https://platform.openai.com/api-keys) - 提供 API 金鑰，讓您能夠使用 ChatGPT 模型執行各種任務。 - [Tavily AI](https://tavily.com/) - 一個搜尋引擎，使人工智慧代理能夠在應用程式中進行研究並存取即時知識。 - [CopilotKit](https://github.com/CopilotKit) - 一個開源副駕駛框架，用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 專案設定和套件安裝 --------- 首先，透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式： ``` npx create-next-app@latest aiblogapp ``` 選擇您首選的配置設定。在本教學中，我們將使用 TypeScript 和 Next.js App Router。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pae912scgh9tjfa75l8t.png) 接下來，安裝 Quill 富文本編輯器、Supabase 和 Langchain 軟體包及其相依性。 ``` npm install quill react-quill @supabase/supabase-js @supabase/ssr @supabase/auth-helpers-nextjs @langchain/langgraph ``` 最後，安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend ``` 恭喜！您現在已準備好建立由人工智慧驅動的部落格。 **建構部落格前端** ----------- 在本節中，我將引導您完成使用靜態內容建立部落格前端以定義部落格使用者介面的過程。 部落格的前端將由四個頁面組成：主頁、貼文頁面、建立貼文頁面和登入/註冊頁面。 首先，請在程式碼編輯器中前往`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中，建立五個名為`Header.tsx` 、 `Posts.tsx` 、 `Post.tsx` 、 `Comment.tsx`和`QuillEditor.tsx`的文件 在`Header.tsx`檔案中，新增以下程式碼，定義一個名為`Header`的功能元件，該元件將呈現部落格的導覽列。 ``` "use client"; import Link from "next/link"; export default function Header() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 "> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global"> <div className="flex items-center justify-between"> <Link className="flex-none text-xl text-white font-semibold " href="/" aria-label="Brand"> AIBlog </Link> </div> <div id="navbar-collapse-with-animation" className=""> <div className="flex flex-col gap-y-4 gap-x-0 mt-5 sm:flex-row sm:items-center sm:justify-end sm:gap-y-0 sm:gap-x-7 sm:mt-0 sm:ps-7"> <Link className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " href="/createpost"> Create Post </Link> <form action={""}> <button className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " type="submit"> Logout </button> </form> <Link className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " href="/login"> Login </Link> </div> </div> </nav> </header> </> ); } ``` 在`Posts.tsx`檔案中，新增以下程式碼，定義一個名為`Posts`的功能元件，該元件呈現部落格平台主頁，該首頁將顯示已發佈文章的清單。 ``` "use client"; import React, { useEffect, useState } from "react"; import Image from "next/image"; import Link from "next/link"; export default function Posts() { const [articles, setArticles] = useState<any[]>([]); return ( <div className="max-w-[85rem] h-full px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto"> <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"> <Link key={""} className="group flex flex-col h-full bg-gray-800 border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 " href=""> <div className="aspect-w-16 aspect-h-11"> <Image className="object-cover h-48 w-96 rounded-xl" src={`https://source.unsplash.com/featured/?${encodeURIComponent( "Hello World" )}`} width={500} height={500} alt="Image Description" /> </div> <div className="my-6"> <h3 className="text-xl font-semibold text-white ">Hello World</h3> </div> </Link> </div> </div> ); } ``` 在`QuillEditor.tsx`檔案中，新增以下程式碼，用於動態匯入 QuillEditor 元件、定義 Quill 編輯器工具列的模組配置以及定義 Quill 編輯器的文字格式。 ``` // Import the dynamic function from the "next/dynamic" package import dynamic from "next/dynamic"; // Import the CSS styles for the Quill editor's "snow" theme import "react-quill/dist/quill.snow.css"; // Export a dynamically imported QuillEditor component export const QuillEditor = dynamic(() => import("react-quill"), { ssr: false }); // Define modules configuration for the Quill editor toolbar export const quillModules = { toolbar: [ // Specify headers with different levels [{ header: [1, 2, 3, false] }], // Specify formatting options like bold, italic, etc. ["bold", "italic", "underline", "strike", "blockquote"], // Specify list options: ordered and bullet [{ list: "ordered" }, { list: "bullet" }], // Specify options for links and images ["link", "image"], // Specify alignment options [{ align: [] }], // Specify color options [{ color: [] }], // Specify code block option ["code-block"], // Specify clean option for removing formatting ["clean"], ], }; // Define supported formats for the Quill editor export const quillFormats = [ "header", "bold", "italic", "underline", "strike", "blockquote", "list", "bullet", "link", "image", "align", "color", "code-block", ]; ``` 在`Post.tsx`檔案中，新增以下程式碼，定義一個名為`CreatePost`功能元件，該元件將用於呈現文章建立表單。 ``` "use client"; // Importing React hooks and components import { useRef, useState } from "react"; import { QuillEditor } from "./QuillEditor"; import { quillModules } from "./QuillEditor"; import { quillFormats } from "./QuillEditor"; import "react-quill/dist/quill.snow.css"; // Define the CreatePost component export default function CreatePost() { // Initialize state variables for article outline, copilot text, and article title const [articleOutline, setArticleOutline] = useState(""); const [copilotText, setCopilotText] = useState(""); const [articleTitle, setArticleTitle] = useState(""); // State variable to track if research task is running const [publishTaskRunning, setPublishTaskRunning] = useState(false); // Handle changes to the editor content const handleEditorChange = (newContent: any) => { setCopilotText(newContent); }; return ( <> {/* Main */} <div className="p-3 max-w-3xl mx-auto min-h-screen"> <h1 className="text-center text-white text-3xl my-7 font-semibold"> Create a post </h1> {/* Form for creating a post */} <form action={""} className="flex flex-col gap-4 mb-2 mt-2"> <div className="flex flex-col gap-4 sm:flex-row justify-between mb-2"> {/* Input field for article title */} <input type="text" id="title" name="title" placeholder="Title" value={articleTitle} onChange={(event) => setArticleTitle(event.target.value)} className="flex-1 block w-full rounded-lg border text-sm border-gray-600 bg-gray-700 text-white placeholder-gray-400 focus:border-cyan-500 focus:ring-cyan-500" /> </div> {/* Hidden textarea for article content */} <textarea className="p-4 w-full aspect-square font-bold text-xl bg-slate-800 text-white rounded-lg resize-none hidden" id="content" name="content" value={copilotText} placeholder="Write your article content here" onChange={(event) => setCopilotText(event.target.value)} /> {/* Quill editor component */} <QuillEditor onChange={handleEditorChange} modules={quillModules} formats={quillFormats} className="h-80 mb-12 text-white" /> {/* Submit button for publishing the post */} <button type="submit" disabled={publishTaskRunning} className={`bg-blue-500 text-white font-bold py-2 px-4 rounded ${ publishTaskRunning ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700" }`} onClick={async () => { try { setPublishTaskRunning(true); } finally { setPublishTaskRunning(false); } }}> {publishTaskRunning ? "Publishing..." : "Publish"} </button> </form> </div> </> ); } ``` 在`Comment.tsx`檔案中，新增以下程式碼，定義一個名為 Comment 的功能元件，該元件呈現貼文評論表單和貼文評論。 ``` // Client-side rendering "use client"; // Importing React and Next.js components import React, { useEffect, useRef, useState } from "react"; import Image from "next/image"; // Define the Comment component export default function Comment() { // State variables for comment, comments, and article content const [comment, setComment] = useState(""); const [comments, setComments] = useState<any[]>([]); const [articleContent, setArticleContent] = useState(""); return ( <div className="max-w-2xl mx-auto w-full p-3"> {/* Form for submitting a comment */} <form action={""} className="border border-teal-500 rounded-md p-3 mb-4"> {/* Textarea for entering a comment */} <textarea id="content" name="content" placeholder="Add a comment..." rows={3} onChange={(e) => setComment(e.target.value)} value={comment} className="hidden" /> {/* Submit button */} <div className="flex justify-between items-center mt-5"> <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded"> Submit </button> </div> </form> {/* Comments section */} <p className="text-white mb-2">Comments:</p> {/* Comment item (currently hardcoded) */} <div key={""} className="flex p-4 border-b dark:border-gray-600 text-sm"> <div className="flex-shrink-0 mr-3"> {/* Profile picture */} <Image className="w-10 h-10 rounded-full bg-gray-200" src={`(link unavailable){encodeURIComponent( "Silhouette" )}`} width={500} height={500} alt="Profile Picture" /> </div> <div className="flex-1"> <div className="flex items-center mb-1"> {/* Username (currently hardcoded as "Anonymous") */} <span className="font-bold text-white mr-1 text-xs truncate"> Anonymous </span> </div> {/* Comment text (currently hardcoded as "No Comments") */} <p className="text-gray-500 pb-2">No Comments</p> </div> </div> </div> ); } ``` 接下來，前往`/[root]/src/app`並建立一個名為`[slug]`的資料夾。在 \[slug\] 資料夾中，建立一個`page.tsx`檔案。 然後將以下程式碼新增至匯入`Comment`和`Header`元件的檔案中，並定義一個名為`Post`功能元件，該元件將呈現導覽列、貼文內容、評論表單和貼文評論。 ``` import Header from "../components/Header"; import Comment from "../components/Comment"; export default async function Post() { return ( <> <Header /> <main className="p-3 flex flex-col max-w-6xl mx-auto min-h-screen"> <h1 className="text-3xl text-white mt-10 p-3 text-center font-serif max-w-2xl mx-auto lg:text-4xl"> Hello World </h1> <div className="flex justify-between text-white p-3 border-b border-slate-500 mx-auto w-full max-w-2xl text-xs"> <span></span> <span className="italic">0 mins read</span> </div> <div className="p-3 max-w-2xl text-white mx-auto w-full post-content border-b border-slate-500 mb-2"> No Post Content </div> <Comment /> </main> </> ); } ``` 之後，轉到`/[root]/src/app`並建立一個名為`createpost`的資料夾。在`createpost`資料夾中，建立一個名為`page.tsx`檔案。 然後將以下程式碼新增至匯入`CreatePost`和`Header`元件的檔案中，並定義一個名為`WriteArticle`的功能元件，該元件將呈現導覽列和貼文建立表單。 ``` import CreatePost from "../components/Post"; import Header from "../components/Header"; import { redirect } from "next/navigation"; export default async function WriteArticle() { return ( <> <Header /> <CreatePost /> </> ); } ``` 接下來，前往`/[root]/src/page.tsx`文件，新增以下程式碼，導入`Posts`和`Header`元件並定義名為`Home`功能元件。 ``` import Header from "./components/Header"; import Posts from "./components/Posts"; export default async function Home() { return ( <> <Header /> <Posts /> </> ); } ``` 之後，請轉到`next.config.mjs`檔案並將其重新命名為`next.config.js` 。然後加入以下程式碼，允許您使用 Unsplash 中的圖像作為已發布文章的封面圖像。 ``` module.exports = { images: { remotePatterns: [ { protocol: "https", hostname: "source.unsplash.com", }, ], }, }; ``` 接下來，刪除 globals.css 檔案中的 CSS 程式碼並新增以下 CSS 程式碼。 ``` @tailwind base; @tailwind components; @tailwind utilities; body { height: 100vh; background-color: rgb(16, 23, 42); } .ql-editor { font-size: 1.25rem; } .post-content p { margin-bottom: 0.5rem; } .post-content h1 { font-size: 1.5rem; font-weight: 600; font-family: sans-serif; margin: 1.5rem 0; } .post-content h2 { font-size: 1.4rem; font-family: sans-serif; margin: 1.5rem 0; } .post-content a { color: rgb(73, 149, 199); text-decoration: none; } .post-content a:hover { text-decoration: underline; } ``` 最後，在命令列上執行命令`npm run dev` ，然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看部落格平台前端，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz1qewlt9gkf2vbp5jqq.png) **使用 CopilotKit 將 AI 功能整合到部落格中** -------------------------------- 在本節中，您將學習如何為部落格加入 AI 副駕駛，以使用 CopilotKit 執行部落格主題研究和內容自動建議。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先，讓我們將 CopilotKit React 元件加入到部落格前端。 ### **將 CopilotKit 新增至部落格前端** 在這裡，我將引導您完成將部落格與 CopilotKit 前端整合的過程，以方便部落格文章研究和文章大綱生成。 首先，使用下面的程式碼片段在`/[root]/src/app/components/Post.tsx`檔案頂部匯入`useMakeCopilotReadable` 、 `useCopilotAction` 、 `CopilotTextarea`和`HTMLCopilotTextAreaElement`自訂掛鉤。 ``` import { useMakeCopilotReadable, useCopilotAction, } from "@copilotkit/react-core"; import { CopilotTextarea, HTMLCopilotTextAreaElement, } from "@copilotkit/react-textarea"; ``` 在 CreatePost 函數內的狀態變數下方，加入以下程式碼，該程式碼使用`useMakeCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的文章大綱。鉤子使副駕駛可以閱讀文章大綱。 ``` useMakeCopilotReadable( "Blog article outline: " + JSON.stringify(articleOutline) ); ``` 在`useMakeCopilotReadable`掛鉤下方，使用以下程式碼建立一個名為`copilotTextareaRef`的引用，該引用指向名為`HTMLCopilotTextAreaElement`的文字區域元素。 ``` const copilotTextareaRef = useRef<HTMLCopilotTextAreaElement>(null); ``` 在上面的程式碼下方，加入以下程式碼，該程式碼使用`useCopilotAction`掛鉤來設定名為`researchBlogArticleTopic`的操作，該操作將啟用對部落格文章的給定主題的研究。 此操作採用兩個參數，稱為`articleTitle`和`articleOutline` ，這兩個參數可以產生文章標題和大綱。 該操作包含一個處理程序函數，該函數根據給定主題生成文章標題和大綱。 在處理函數內部， `articleOutline`狀態會使用新產生的大綱進行更新，而`articleTitle`狀態會使用新產生的標題進行更新，如下所示。 ``` // Define a Copilot action useCopilotAction( { // Action name and description name: "researchBlogArticleTopic", description: "Research a given topic for a blog article.", // Parameters for the action parameters: [ { // Parameter 1: articleTitle name: "articleTitle", type: "string", description: "Title for a blog article.", required: true, // This parameter is required }, { // Parameter 2: articleOutline name: "articleOutline", type: "string", description: "Outline for a blog article that shows what the article covers.", required: true, // This parameter is required }, ], // Handler function for the action handler: async ({ articleOutline, articleTitle }) => { // Set the article outline and title using state setters setArticleOutline(articleOutline); setArticleTitle(articleTitle); }, }, [] // Dependencies (empty array means no dependencies) ); ``` 在上面的程式碼下方，前往表單元件並新增以下`CopilotTextarea`元件，該元件可讓您為文章內容新增文字完成、插入和編輯。 ``` <CopilotTextarea className="p-4 h-72 w-full rounded-lg mb-2 border text-sm border-gray-600 bg-gray-700 text-white placeholder-gray-400 focus:border-cyan-500 focus:ring-cyan-500 resize-none" ref={copilotTextareaRef} placeholder="Start typing for content autosuggestion." value={articleOutline} rows={5} autosuggestionsConfig={{ textareaPurpose: articleTitle, chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { max_tokens: 5, stop: ["\n", ".", ","], }, }, insertionApiConfig: {}, }, debounceTime: 250, }} /> ``` 之後，請前往`/[root]/src/app/createpost/page.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件和樣式。 ``` import { CopilotKit } from "@copilotkit/react-core"; import { CopilotPopup } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; ``` 然後使用`CopilotKit`包裝`CopilPopup`和`CreatePost`元件，如下圖所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/` ) 的 URL，而`CopilotPopup`則呈現應用程式內聊天機器人，您可以提示您研究文章的任何主題。 ``` export default async function WriteArticle() { return ( <> <Header /> <CopilotKit url="/api/copilotkit"> <CopilotPopup instructions="Help the user research a blog article topic." defaultOpen={true} labels={{ title: "Blog Article Research AI Assistant", initial: "Hi! 👋 I can help you research any topic for a blog article.", }} /> <CreatePost /> </CopilotKit> </> ); } ``` 之後，使用下面的程式碼片段在`/[root]/src/app/components/Comment.tsx`檔案頂部導入`useMakeCopilotReadable` 、 `CopilotKit` 、 `CopilotTextarea`和`HTMLCopilotTextAreaElement`自訂掛鉤。 ``` import { useMakeCopilotReadable, CopilotKit } from "@copilotkit/react-core"; import { CopilotTextarea, HTMLCopilotTextAreaElement, } from "@copilotkit/react-textarea"; ``` 在 Comment 函數內的狀態變數下方，新增以下程式碼，程式碼使用`useMakeCopilotReadable`掛鉤將貼文內容新增為評論內容自動建議的上下文。 ``` useMakeCopilotReadable( "Blog article content: " + JSON.stringify(articleContent) ); const copilotTextareaRef = useRef<HTMLCopilotTextAreaElement>(null); ``` 然後將CopilotTextarea元件加入評論表單中，並使用`CopilotKit`包裹表單，如下所示。 ``` <CopilotKit url="/api/copilotkit"> <form action={""} className="border border-teal-500 rounded-md p-3 mb-4"> <textarea id="content" name="content" placeholder="Add a comment..." rows={3} onChange={(e) => setComment(e.target.value)} value={comment} className="hidden" /> <CopilotTextarea className="p-4 w-full rounded-lg mb-2 border text-sm border-gray-600 bg-gray-700 text-white placeholder-gray-400 focus:border-cyan-500 focus:ring-cyan-500 resize-none" ref={copilotTextareaRef} placeholder="Start typing for content autosuggestion." onChange={(event) => setComment(event.target.value)} rows={5} autosuggestionsConfig={{ textareaPurpose: articleContent, chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { max_tokens: 5, stop: ["\n", ".", ","], }, }, insertionApiConfig: {}, }, debounceTime: 250, }} /> <div className="flex justify-between items-center mt-5"> <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded"> Submit </button> </div> </form> </CopilotKit> ``` 之後，執行開發伺服器並導航到 http://localhost:3000/createpost。您應該會看到彈出的應用程式內聊天機器人和 CopilotTextarea 已整合到部落格中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0j5ly5l5cf0ldaf3hwgx.png) 恭喜！您已成功將 CopilotKit 新增至部落格前端**。** ### **將 CopilotKit 後端加入博客** 在這裡，我將引導您完成部落格與 CopilotKit 後端的整合過程，CopilotKit 後端處理來自前端的請求，並提供函數呼叫和各種 LLM 後端（例如 GPT）。 此外，我們將整合一個名為 Tavily 的人工智慧代理，它可以研究網路上的任何主題。 首先，在根目錄中建立一個名為`.env.local`的檔案。然後在保存`ChatGPT`和`Tavily` Search API 金鑰的檔案中加入下面的環境變數。 ``` OPENAI_API_KEY="Your ChatGPT API key" TAVILY_API_KEY="Your Tavily Search API key" ``` 若要取得 ChatGPT API 金鑰，請導覽至 https://platform.openai.com/api-keys。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ei04w6fadsmalbjaocun.png) 若要取得 Tavilly Search API 金鑰，請導覽至 https://app.tavily.com/home ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqbqb5wvrnkv1vc8z7hf.png) 之後，轉到`/[root]/src/app`並建立一個名為`api`的資料夾。在`api`資料夾中，建立一個名為`copilotkit`的資料夾。 在`copilotkit`資料夾中，建立一個名為`research.ts`的檔案。然後導航到[該 Research.ts gist 文件](https://gist.github.com/TheGreatBonnie/58dc21ebbeeb8cbb08df665db762738c)，複製程式碼，並將其新增至**`research.ts`**檔案中 接下來，在`/[root]/src/app/api/copilotkit`資料夾中建立一個名為`route.ts`的檔案。該文件將包含設定後端功能來處理 POST 請求的程式碼。它有條件地包括對給定主題進行研究的“研究”操作。 現在在文件頂部導入以下模組。 ``` import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; // For backend functionality with CopilotKit. import { researchWithLangGraph } from "./research"; // Import a custom function for conducting research. import { AnnotatedFunction } from "@copilotkit/shared"; // For annotating functions with metadata. ``` 在上面的程式碼下面，定義一個執行時間環境變數和一個名為`researchAction`的函數，該函數使用下面的程式碼研究某個主題。 ``` // Define a runtime environment variable, indicating the environment where the code is expected to run. export const runtime = "edge"; // Define an annotated function for research. This object includes metadata and an implementation for the function. const researchAction: AnnotatedFunction<any> = { name: "research", // Function name. description: "Call this function to conduct research on a certain topic. Respect other notes about when to call this function", // Function description. argumentAnnotations: [ // Annotations for arguments that the function accepts. { name: "topic", // Argument name. type: "string", // Argument type. description: "The topic to research. 5 characters or longer.", // Argument description. required: true, // Indicates that the argument is required. }, ], implementation: async (topic) => { // The actual function implementation. console.log("Researching topic: ", topic); // Log the research topic. return await researchWithLangGraph(topic); // Call the research function and return its result. }, }; ``` 然後在上面的程式碼下加入下面的程式碼來定義處理POST請求的非同步函數。 ``` // Define an asynchronous function that handles POST requests. export async function POST(req: Request): Promise<Response> { const actions: AnnotatedFunction<any>[] = []; // Initialize an array to hold actions. // Check if a specific environment variable is set, indicating access to certain functionality. if (process.env["TAVILY_API_KEY"]) { actions.push(researchAction); // Add the research action to the actions array if the condition is true. } // Instantiate CopilotBackend with the actions defined above. const copilotKit = new CopilotBackend({ actions: actions, }); // Use the CopilotBackend instance to generate a response for the incoming request using an OpenAIAdapter. return copilotKit.response(req, new OpenAIAdapter()); } ``` 恭喜！您已成功將 CopilotKit 後端新增至 Blog **。** **使用 Supabase 將資料庫整合到博客** ------------------------- 在本節中，我將引導您完成將部落格與 Supabase 資料庫整合以插入和獲取部落格文章和評論資料的過程。 首先，導覽至[supabase.com](http://supabase.com/)並點擊主頁上的「啟動您的專案」按鈕。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qu4h1xuhvkbtttqvry1o.png) 然後新建一個專案，名為AiBloggingPlatform，如下圖所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01uq8s2l9yoa6cvpmocl.png) 建立專案後，將 Supabase URL 和 API 金鑰新增至`env.local`檔案中的環境變數中，如下所示。 ``` NEXT_PUBLIC_SUPABASE_URL=”Your Supabase URL” NEXT_PUBLIC_SUPABASE_ANON_KEY=”Your Supabase API Key” ``` ### **為部落格設定 Supabase 身份驗證** 在這裡，我將引導您完成為部落格設定身份驗證的過程，使用戶能夠註冊、登入或登出。 首先，前往`/[root]/src/`並建立一個名為`utils`資料夾。在`utils`資料夾中，建立一個名為`supabase`的資料夾。 然後在`supabase`資料夾中建立兩個名為`client.ts`和`server.ts`檔案。 之後，導航到此[supabase 文件連結](https://supabase.com/docs/guides/auth/server-side/nextjs#:~:text=Write%20utility%20functions%20to%20create%20Supabase%20clients)，複製此處提供的程式碼，並將其貼上到您在`supabase`資料夾中建立的相應文件中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d99g065wf471fag7rbjs.png) 接下來，在專案根目錄中建立一個名為`middleware.ts`的文件，並在`/[root]/src/utils/supabase`資料夾中建立另一個同名文件。 之後，導航到此[supabase 文件連結](https://supabase.com/docs/guides/auth/server-side/nextjs#:~:text=4-,Hook%20up%20middleware,-Create%20a%20middleware)，複製此處提供的程式碼，並將其貼上到相應的`middleware.ts`文件中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo21y007yjpw6w50xb9l.png) 接下來，前往`/[root]/src/app/login`資料夾並建立一個名為`actions.ts`的檔案。之後，導航到此[supabase 文件連結](https://supabase.com/docs/guides/auth/server-side/nextjs#:~:text=5-,Create%20a%20login%20page,-Create%20a%20login)，複製此處提供的程式碼，並將其貼上到`actions.ts` 。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1ql5mf0dhqyyli9dipm.png) 之後，更改電子郵件範本以支援身份驗證流程。為此，請前往 Supabase 儀表板中的[驗證範本](https://supabase.com/dashboard/project/_/auth/templates)頁面。 在`Confirm signup`模板中，將`{{ .ConfirmationURL }}`更改為`{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=signup`如下所示，然後按一下儲存按鈕。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9n8n4wdycoqnx3l41rn.png) 之後，建立路由處理程序以使用電子郵件進行身份驗證確認**。**為此\*\*，請前往\*\* `/[root]/src/app/`並建立一個名為`auth`的資料夾。然後在`auth`資料夾中建立一個名為`confirm`資料夾。 在`confirm`資料夾中，建立一個名為`route.ts`檔案並導航到此[supabase文件連結](https://supabase.com/docs/guides/auth/server-side/nextjs#:~:text=Create%20a%20route%20handler%20for%20Auth%20confirmation)，複製那裡提供的程式碼，並將其貼到`route.ts`檔案中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mws1datksq4dml3a8z8n.png) 之後，請前往`/[root]/src/app/login/page.tsx`檔案並使用下面的程式碼片段匯入 Supabase `signup`和`login`功能。 ``` import { login, signup } from "./actions"; ``` 在註冊/登入表單中，按一下登入和註冊按鈕時，使用 formAction 呼叫 Supabase `signup`和`login`函數，如下所示。 ``` <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded" formAction={login}> Log in </button> <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded" formAction={signup}> Sign up </button> ``` 之後，執行開發伺服器並導航至[http://localhost:3000/login](http://localhost:3000/createpost) 。如下所示新增電子郵件和密碼，然後按一下「註冊」按鈕。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37ee0ii966uhhpi8lqz8.png) 然後轉到您用於註冊的電子郵件的收件匣，然後按一下確認您的電子郵件按鈕，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekukm36uhh833uuhg1k3.png) 之後，請前往 Supabase 儀表板中的[「身份驗證用戶」](https://supabase.com/dashboard/project/_/auth/users)頁面，您應該會看到新建立的用戶，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmv02jptpsn9k06ytkri.png) 接下來，設定註銷功能。為此，請前往`/[root]/src/app`並建立一個名為`logout`的資料夾。然後建立一個名為`route.ts`的檔案並將以下程式碼加入該檔案。 ``` // Server-side code "use server"; // Importing Next.js functions import { revalidatePath } from "next/cache"; import { redirect } from "next/navigation"; // Importing Supabase client creation function from utils import { createClient } from "@/utils/supabase/server"; // Exporting the logout function export async function logout() { // Creating a Supabase client instance const supabase = createClient(); // Signing out of Supabase auth const { error } = await supabase.auth.signOut(); // If there's an error, redirect to the error page if (error) { redirect("/error"); } // Revalidate the "/" path for the "layout" cache revalidatePath("/", "layout"); // Redirect to the homepage redirect("/"); } ``` 之後，請前往`/[root]/src/app/components/Header.tsx`檔案並使用下面的程式碼片段匯入 Supabase 登出功能。 ``` import { logout } from "../logout/actions"; ``` 然後在action參數中加入註銷功能，如下所示。 ``` <form action={logout}> <button className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " type="submit"> Logout </button> </form> ``` 如果按一下「登出」按鈕，已登入的使用者將被登出。 ### **設定部落格的使用者角色和權限** 在這裡，我將引導您完成設定使用者角色和權限的過程，以控制不同使用者可以在部落格上執行的操作。 首先，前往`/[root]/src/app/components/Header.tsx`檔案並導入 Supabase createClient 函數。 ``` import { createClient } from "@/utils/supabase/client"; ``` 然後導入`useState`和`useEffect`掛鉤，並使用下面的程式碼片段定義一個名為 user 的類型。 ``` import { useEffect, useState } from "react"; type User = {}; ``` 在 Header 功能元件內，新增以下程式碼，程式碼使用`useState`掛鉤來儲存`user`和`admin`資料，並使用`useEffect`掛鉤在元件安裝時從 Supabase auth 取得使用者資料。 `getUser`函數檢查錯誤並相應地設定使用者和管理員狀態。 ``` // State variables for user and admin const [user, setUser] = useState<User | null>(null); const [admin, setAdmin] = useState<User | null>(null); // useEffect hook to fetch user data on mount useEffect(() => { // Define an async function to get the user async function getUser() { // Create a Supabase client instance const supabase = createClient(); // Get the user data from Supabase auth const { data, error } = await supabase.auth.getUser(); // If there's an error or no user data, log a message if (error || !data?.user) { console.log("No User"); } // If user data is available, set the user state else { setUser(data.user); } // Define the email of the signed-up user const userEmail = "email of signed-up user"; // Check if the user is an admin (email matches) if (!data?.user || data.user?.email !== userEmail) { console.log("No Admin"); } // If the user is an admin, set the admin state else { setAdmin(data.user); } } // Call the getUser function getUser(); }, []); // Dependency array is empty, so the effect runs only once on mount ``` 之後，更新導覽列程式碼，如下所示。更新後的程式碼會根據是否有登入使用者或登入使用者是管理員來控制將呈現哪些按鈕。 ``` <div id="navbar-collapse-with-animation" className=""> {/* Navbar content container */} <div className="flex flex-col gap-y-4 gap-x-0 mt-5 sm:flex-row sm:items-center sm:justify-end sm:gap-y-0 sm:gap-x-7 sm:mt-0 sm:ps-7"> {/* Conditional rendering for admin link */} {admin ? ( // If admin is true, show the "Create Post" link <Link className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " href="/createpost"> Create Post </Link> ) : ( // If admin is false, render an empty div <div></div> )} {/* Conditional rendering for user link/logout button */} {user ? ( // If user is true, show the logout button <form action={logout}> <button className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " type="submit"> Logout </button> </form> ) : ( // If user is false, show the "Login" link <Link className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " href="/login"> Login </Link> )} </div> </div> ``` 如果導航到[http://localhost:3000，](http://localhost:3000/)您應該會看到僅呈現「建立貼文」和「登出」按鈕，因為使用者已登入並設定為管理員。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdhh0x1ln8xl9y1tq7ua.png) 之後，請前往`/[root]/src/app/createpost/page.tsx`檔案並匯入 Supabase createClient 函數。 ``` import { createClient } from "@/utils/supabase/client"; ``` 在 WriteArticle 功能元件中，新增以下程式碼，使用 Supabase createClient 函數取得登入用戶，並驗證用戶的電子郵件是否與設定為管理員的用戶的電子郵件相同。 ``` // Define the email of the user you want to make admin const userEmail = "email of admin user"; // Create a Supabase client instance const supabase = createClient(); // Get the user data from Supabase auth const { data, error } = await supabase.auth.getUser(); // Check for errors or if the user data doesn't match the expected email if (error || !data?.user || data?.user.email !== userEmail) { // If any of the conditions are true, redirect to the homepage redirect("/"); } ``` 現在只有設定為admin的使用者才能存取http://localhost:3000/createpost頁面，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vrnvib7ikzsgt8webrz.png) ### **使用 Supabase 功能設定插入和取得發布資料** 在這裡，我將引導您完成使用 Supabase 資料庫向部落格設定插入和取得資料功能的過程。 首先，請前往 Supabase 儀表板中的[SQL 編輯器](https://supabase.com/dashboard/project/_/sql/new)頁面。然後將下列 SQL 程式碼新增至編輯器中，然後按一下 CTRL + Enter 鍵建立一個名為articles 的表。 articles 表包含 id、title、slug、content 和created\_at 欄位。 ``` create table if not exists articles ( id bigint primary key generated always as identity, title text, slug text, content text, created_at timestamp ); ``` 建立表格後，您應該會收到一條成功訊息，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd3xgg0o8ygztkab3cir.png) 之後，請前往`/[root]/src/utils/supabase`資料夾並建立一個名為`AddArticle.ts`的檔案。然後將以下程式碼新增至該檔案中，將部落格文章資料插入 Supabase 資料庫。 ``` // Server-side code "use server"; // Importing Supabase auth helpers and Next.js functions import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"; import { cookies } from "next/headers"; import { redirect } from "next/navigation"; // Exporting the addArticle function export async function addArticle(formData: any) { // Extracting form data const title = formData.get("title"); const content = formData.get("content"); const slug = formData .get("title") .split(" ") .join("-") .toLowerCase() .replace(/[^a-zA-Z0-9-]/g, ""); // Generating a slug from the title const created_at = formData.get(new Date().toDateString()); // Getting the current date // Creating a cookie store const cookieStore = cookies(); // Creating a Supabase client instance with cookie store const supabase = createServerComponentClient({ cookies: () => cookieStore }); // Inserting data into the "articles" table const { data, error } = await supabase.from("articles").insert([ { title, content, slug, created_at, }, ]); // Handling errors if (error) { console.error("Error inserting data", error); return; } // Redirecting to the homepage redirect("/"); // Returning a success message return { message: "Success" }; } ``` 接下來，前往`/[root]/src/app/components/Post.tsx`檔案並導入 addArticle 函數。 ``` import { addArticle } from "@/utils/supabase/AddArticle"; ``` 然後加入`addArticle`函數作為表單動作參數，如下所示。 ``` <form action={addArticle} className="w-full h-full gap-10 flex flex-col items-center p-10"> </form> ``` 之後，導覽至 http://localhost:3000/createpost 並向右側的聊天機器人提供類似「研究有關 JavaScript 框架的部落格文章主題」的提示。 聊天機器人將開始研究該主題，然後產生部落格標題和大綱，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3i5ndwct44094iczrpo.png) 當您開始在 CopilotKitTextarea 上書寫時，您應該會看到內容自動建議，如下所示。 {% 嵌入 https://youtu.be/2oMNV1acKIs %} 如果內容符合您的喜好，請將其複製並貼上到 Quill 富文本編輯器。然後開始編輯它，如下所示。 {% 嵌入 https://youtu.be/-r3woCeq4vs %} 然後點擊底部的發布按鈕即可發布文章。前往 Supabase 上專案的儀表板並導航至「表格編輯器」部分。點擊文章表，您應該會看到您的文章資料已插入到 Supabase 資料庫中，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4umd2qijpdt9z3evfkj.png) 接下來，前往`/[root]/src/app/components/Posts.tsx`檔案並導入 createClient 函數。 ``` import { createClient } from "@/utils/supabase/client"; ``` 在 Posts 功能元件內，加入以下程式碼，該程式碼使用 useState 掛鉤來儲存文章資料，並使用 useEffect 掛鉤在元件安裝時從 Supabase 取得文章。 fetchArticles 函數建立一個 Supabase 用戶端實例，取得文章，並在資料可用時更新狀態。 ``` // State variable for articles const [articles, setArticles] = useState<any[]>([]); // useEffect hook to fetch articles on mount useEffect(() => { // Define an async function to fetch articles const fetchArticles = async () => { // Create a Supabase client instance const supabase = createClient(); // Fetch articles from the "articles" table const { data, error } = await supabase.from("articles").select("*"); // If data is available, update the articles state if (data) { setArticles(data); } }; // Call the fetchArticles function fetchArticles(); }, []); // Dependency array is empty, so the effect runs only once on mount ``` 之後，如下所示更新元素程式碼，以在部落格主頁上呈現已發佈的文章。 ``` // Return a div element with a max width, full height, padding, and horizontal margin return ( <div className="max-w-[85rem] h-full px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto"> // Create a grid container with dynamic number of columns based on screen size <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"> // Map over the articles array and render a Link component for each item {articles?.map((post) => ( <Link // Assign a unique key prop to each Link component key={post.id} // Apply styles for the Link component className="group flex flex-col h-full bg-gray-800 border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 " // Set the href prop to the post slug href={`/${post.slug}`}> // Create a container for the image <div className="aspect-w-16 aspect-h-11"> // Render an Image component with a dynamic src based on the post title <Image className="object-cover h-48 w-96 rounded-xl" src={`(link unavailable){encodeURIComponent( post.title )}`} // Set the width and height props for the Image component width={500} height={500} // Set the alt prop for accessibility alt="Image Description" /> </div> // Create a container for the post title <div className="my-6"> // Render an h3 element with the post title <h3 className="text-xl font-semibold text-white "> {post.title} </h3> </div> </Link> ))} </div> </div> ); ``` 然後導航到<http://localhost:3000> ，您應該會看到您發布的文章，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpwvh0b3cm7dfrgwixtv.png) 接下來，前往`/[root]/src/app/[slug]/page.tsx`檔案並匯入 createClient 函數。 ``` import { createClient } from "@/utils/supabase/client"; ``` 在導入下方，定義一個名為「getArticleContent」的非同步函數，該函數根據 slug 參數從 supabase 資料庫檢索文章資料，如下所示。 ``` // Define an asynchronous function to retrieve article content async function getArticleContent(params: any) { // Extract the slug parameter from the input params object const { slug } = params; // Create a Supabase client instance const supabase = createClient(); // Query the "articles" table in Supabase // Select all columns (*) // Filter by the slug column matching the input slug // Retrieve a single record (not an array) const { data, error } = await supabase .from("articles") .select("*") .eq("slug", slug) .single(); // Return the retrieved article data return data; } ``` 之後，如下所示更新功能元件Post，以渲染文章內容。 ``` export default async function Post({ params }: { params: any }) { // Fetch the post content using the getArticleContent function const post = await getArticleContent(params); // Return the post component return ( // Fragment component to wrap multiple elements <> // Header component <Header /> // Main container with max width and height <main className="p-3 flex flex-col max-w-6xl mx-auto min-h-screen"> // Post title <h1 className="text-3xl text-white mt-10 p-3 text-center font-serif max-w-2xl mx-auto lg:text-4xl"> {post && post.title} // Display post title if available </h1> // Post metadata (author, date, etc.) <div className="flex justify-between text-white p-3 border-b border-slate-500 mx-auto w-full max-w-2xl text-xs"> <span></span> // Estimated reading time <span className="italic"> {post && (post.content.length / 1000).toFixed(0)} mins read </span> </div> // Post content <div className="p-3 max-w-2xl text-white mx-auto w-full post-content border-b border-slate-500 mb-2" // Use dangerouslySetInnerHTML to render HTML content dangerouslySetInnerHTML={{ __html: post && post.content }}></div> // Comment component <Comment /> </main> </> ); } ``` 導覽至<http://localhost:3000>並點擊部落格主頁上顯示的文章。然後您應該被重定向到文章的內容，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byfdvwr7anceq09gto1g.png) ### **使用 Supabase 功能設定插入和取得評論資料** 在這裡，我將引導您完成使用 Supabase 資料庫為部落格內容評論設定插入和獲取資料功能的過程。 首先，請前往 Supabase 儀表板中的[SQL 編輯器](https://supabase.com/dashboard/project/_/sql/new)頁面。然後將以下 SQL 程式碼新增至編輯器中，然後按一下 CTRL + Enter 鍵建立一個名為 comments 的表。評論表有 id、content 和 postId 欄位。 ``` create table if not exists comments ( id bigint primary key generated always as identity, postId text, content text, ); ``` 建立表格後，您應該會收到一條成功訊息，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h05jkk1g33ewtupsb5a.png) 之後，請前往`/[root]/src/utils/supabase`資料夾並建立一個名為`AddComment.ts`的檔案。然後將以下程式碼新增至該檔案中，將部落格文章評論資料插入 Supabase 資料庫。 ``` // Importing necessary functions and modules for server-side operations "use server"; import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"; import { cookies } from "next/headers"; import { redirect } from "next/navigation"; // Define an asynchronous function named 'addComment' that takes form data as input export async function addComment(formData: any) { // Extract postId and content from the provided form data const postId = formData.get("postId"); const content = formData.get("content"); // Retrieve cookies from the HTTP headers const cookieStore = cookies(); // Create a Supabase client configured with the provided cookies const supabase = createServerComponentClient({ cookies: () => cookieStore }); // Insert the article data into the 'comments' table on Supabase const { data, error } = await supabase.from("comments").insert([ { postId, content, }, ]); // Check for errors during the insertion process if (error) { console.error("Error inserting data", error); return; } // Redirect the user to the home page after successfully adding the article redirect("/"); // Return a success message return { message: "Success" }; } ``` 接下來，到`/[root]/src/app/components/Comment.tsx`文件，導入 addArticle createClient 函數。 ``` import { addComment } from "@/utils/supabase/AddComment"; import { createClient } from "@/utils/supabase/client"; ``` 然後將postId作為prop參數加入Comment功能元件中。 ``` export default function Comment({ postId }: { postId: any }) {} ``` 在函數內部，新增以下程式碼，程式碼使用`useEffect`掛鉤在元件安裝或`postId`更改時從 Supabase 取得評論和文章內容。 `fetchComments`函數取得所有評論，而`fetchArticleContent`函數則取得具有目前`postId`的文章內容。 ``` useEffect(() => { // Define an async function to fetch comments const fetchComments = async () => { // Create a Supabase client instance const supabase = createClient(); // Fetch comments from the "comments" table const { data, error } = await supabase.from("comments").select("*"); // If data is available, update the comments state if (data) { setComments(data); } }; // Define an async function to fetch article content const fetchArticleContent = async () => { // Create a Supabase client instance const supabase = createClient(); // Fetch article content from the "articles" table // Filter by the current postId const { data, error } = await supabase .from("articles") .select("*") .eq("id", postId) .single(); // If the fetched article ID matches the current postId if (data?.id == postId) { // Update the article content state setArticleContent(data.content); } }; // Call the fetch functions fetchArticleContent(); fetchComments(); }, [postId]); // Dependency array includes postId, so the effect runs when postId changes ``` 然後新增`addComment`函數作為表單操作參數，如下所示。 ``` <form action={addComment} className="border border-teal-500 rounded-md p-3 mb-4"> <textarea id="content" name="content" placeholder="Add a comment..." rows={3} onChange={(e) => setComment(e.target.value)} value={comment} className="hidden" /> <CopilotTextarea className="p-4 w-full rounded-lg mb-2 border text-sm border-gray-600 bg-gray-700 text-white placeholder-gray-400 focus:border-cyan-500 focus:ring-cyan-500 resize-none" ref={copilotTextareaRef} placeholder="Start typing for content autosuggestion." onChange={(event) => setComment(event.target.value)} rows={5} autosuggestionsConfig={{ textareaPurpose: articleContent, chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { max_tokens: 5, stop: ["\n", ".", ","], }, }, insertionApiConfig: {}, }, debounceTime: 250, }} /> <input type="text" id="postId" name="postId" value={postId} className="hidden" /> <div className="flex justify-between items-center mt-5"> <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded"> Submit </button> </div> </form> ``` 在表單元素下方，新增以下用於呈現貼文評論的程式碼。 ``` {comments?.map( (postComment: any) => postComment.postId == postId && ( <div key={postComment.id} className="flex p-4 border-b dark:border-gray-600 text-sm"> <div className="flex-shrink-0 mr-3"> <Image className="w-10 h-10 rounded-full bg-gray-200" src={`https://source.unsplash.com/featured/?${encodeURIComponent( "Silhouette" )}`} width={500} height={500} alt="Profile Picture" /> </div> <div className="flex-1"> <div className="flex items-center mb-1"> <span className="font-bold text-white mr-1 text-xs truncate"> Anonymous </span> </div> <p className="text-gray-500 pb-2">{postComment.content}</p> </div> </div> ) )} ``` 接下來，前往`/[root]/src/app/[slug]/page.tsx`檔案並將 postId 作為 prop 新增至 Comment 元件。 ``` <Comment postId={post && [post.id](http://post.id/)} /> ``` 前往已發佈的文章內容頁面並開始在文字區域中輸入評論。您應該在鍵入時獲得內容自動建議。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2m6br70wf3mhxzovgfet.png) 然後點擊提交按鈕以加入您的評論。前往 Supabase 上專案的儀表板並導航到表格編輯器部分。點擊評論表，您應該會看到您的評論資料已插入到 Supabase 資料庫中，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j9c6cy82cw9fcao2pe9.png) 返回您發表評論的文章內容頁面，您應該會看到您的評論，如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n98o9kxqnyzm90tzvw40.png) 恭喜！您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具，可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣，還是對複雜任務的自動化感興趣，CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中，您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼：https://github.com/TheGreatBonnie/aiblogapp --- 原文出處：https://dev.to/copilotkit/im-building-an-ai-powered-blog-nextjs-langchain-supabase-5145

0個讚   0留言 66瀏覽

17 個值得嘗試的最佳開發人員生產力工具

效率和生產力不僅是開發人員的目標，也是必需品。我們製作了大量的工具並編寫了日常任務的腳本，所有這些都是為了騰出時間來處理真正重要的事情。在當今龐大的開發者生態系中，一系列[生產力工具](https://www.devzero.io/blog/ai-tools-for-software-developers-in-2023-to-boost-dev-productivity)隨時可以簡化我們的工作流程。 生產力工具的作用不僅僅是減少重複性任務的[時間](https://www.devzero.io/blog/time-management-tools-and-tips-boosting-productivity-for-software-developers)。它們在管理程式碼和促進團隊協作方面至關重要。借助正確的工具包，開發人員可以將注意力從平凡轉向創新，以新的自由度來應對創意挑戰。讓我們深入了解頂級開發者生產力工具，以在 2024 年提升您的遊戲水平。 衡量開發人員的生產力 ---------- 首先，讓我們解決一個基本問題：我們如何衡量開發人員的生產力？開發人員的日常生活不僅包括編寫程式碼，因此衡量生產力需要廣泛審視整個軟體開發過程的效率和有效性。 我們可以追蹤熟悉的指標，例如程式碼行數、開發的功能、修復的錯誤和交付時間表。然而，真正理解生產力需要一種整體方法，一種權衡軟體開發的有形和無形方面的方法。因此，考慮品質、影響和協作也很重要。 了解生產力工具 ------- 接下來，我們來詳細分析開發人員可以使用的不同類型的生產力工具： - IDE、程式碼編輯器和助手是任何開發人員武器庫的基石，為編碼、編輯、測試和除錯提供整合平台。 - 開發環境確保開發人員可以專注於編寫程式碼，而不是管理基礎架構。 - 專案管理和協作工具對於組織任務、追蹤進度和確保團隊溝通順暢至關重要。 - 設計和原型工具使開發人員能夠製作引人注目的視覺設計並改進其應用程式的 UI/UX。 - 偵錯工具對於快速辨識和修復錯誤和其他程式碼問題至關重要。 - 框架和抽象可以幫助開發人員透過重複使用通用元件更快地交付程式碼。 - 部署應用程式是最後一步，但確保效能和穩定性是關鍵。 從編碼的基礎工作到使用者介面和團隊協作的微調，每個類別在提高生產力方面都發揮著至關重要的作用。 IDE、程式碼編輯器和助手 ------------- 讓我們來看看 2024 年一些流行的 IDE 和程式碼編輯器。 1. IntelliJ IDEA --------- [IntelliJ IDEA](https://www.jetbrains.com/idea/)是 Java 和 Kotlin 開發人員的首選 IDE，提供的綜合[開發環境](https://www.devzero.io/blog/why-software-development-environments-are-important-and-how-to-manage-them-effectively)遠遠超出 Atom 等簡單程式碼編輯器所提供的功能。此 IDE 具有出色的高級功能，例如深入程式碼理解以實現卓越的導航和重構。與基本編輯器不同，IntelliJ 整合了資料庫和版本控制的基本工具，透過讓您所需的一切觸手可及來簡化您的工作流程。 IntelliJ 社群版免費提供，並提供對其功能的廣泛探索，但存取權限僅限於學生、BootCamp 成員和特定焦點小組。對於其他人來說，專業版的價格約為每月 20 美元，並且可以完全存取 IntelliJ 強大的工具套件。 2. Visual Studio Code -------------------- Microsoft 的[Visual Studio Code](https://code.visualstudio.com/)是跨所有框架、語言和程式庫的開發人員的首選程式碼編輯器。其突出的特點是一個龐大的擴展庫，旨在提高生產力。想像一下，利用 TabNine 進行 AI 驅動的程式碼補全，或整合 GitHub Copilot，利用其 AI 輔助功能將編碼速度提高十倍。除此之外，Visual Studio Code 還提供內建的 Git 控制、用於 shell 命令的整合終端以及用於無縫程式碼分析的專用偵錯器。 最重要的是，它完全免費，並且與 Windows、Mac 和 Linux 平台普遍相容。 3. AppMap ------- [AppMap](https://www.appmap.io/)是一種視覺化工具，可提供應用程式程式碼庫內互動的詳細概述。它為開發人員提供了整個應用程式中資料流和控制的圖形表示，幫助他們更直觀地理解複雜的系統。透過 AppMap，開發人員可以輕鬆瀏覽不同的元件，了解模組之間的依賴關係，並確定潛在的最佳化或重構領域。透過直觀地繪製應用程式的內部工作原理，AppMap 增強了開發團隊之間的協作，並有助於在開發過程中做出更好的決策。 Appmap 最近推出了 Navie。 Navie 是一種生成編碼 AI，具有 API 和資料庫感知能力，因此它可以為整個程式碼庫中的複雜變更提供程式碼建議。 Navies 回答並建議針對開發人員問題進行程式碼更改，例如「我的資料庫查詢效能很慢。我如何解決它？或“我需要更改令牌系統以提高身份驗證安全性，我該如何進行？” ‍ 海軍的建議針對每位開發人員及其正在開發的軟體進行高度個人化，同時確保您的 IP 安全。 4.Copilot ----- 向無可爭議的版本控制統治者屈服：GitHub。憑藉其一系列強大的功能，包括透過 GitHub 工作流程進行自動化部署、 [GitHub Copilot](https://github.com/features/copilot)的人工智慧驅動協助以及 Dependabot 的主動安全修補，GitHub 處於開發創新的前沿。就像 Visual Studio Code 是編碼的首選一樣，GitHub 是開發人員進行版本控制的首選平台。 GitHub 的免費套餐包含豐富的產品，非常適合小型團隊、獨立開發人員、自由工作者和新創公司。但對於大型組織和企業來說，Teams 計劃（每位使用者每月3.67 美元）和Enterprise 計劃（每位使用者每月19.25 美元）解鎖了一系列高級功能，例如GitHub Codespaces，這是與GitHub 無縫整合的虛擬IDE，可直接在平台內進行編碼。此外，付費方案還提供增強的協作功能，例如能夠任命多個拉取請求審閱者和指定程式碼擁有者，從而簡化開發流程並確保程式碼品質。 ‍ 此類別中出現的另外兩個工具是[SuperMaven](https://supermaven.com/)和[TabbyML](https://github.com/TabbyML/tabby) ，兩者都使用快速且安全的 LLM 來完成程式碼完成和建議。 開發環境 ---- 在當今的微服務和複雜的基於雲端的服務和第三方庫的世界中，本地主機無法提供所需的適當環境。這會導致整個 SLDC 不斷重構並減慢部署週期。 5.DevZero --------- [DevZero](https://www.devzero.io/)是一個為開發人員在雲端提供一致的、類似生產的開發環境的平台。開發人員可以在他或她的本機電腦上工作，但仍然體驗生產環境的所有細微差別，例如資料庫、雲端原生服務等。到生產都是一致的。新開發人員只需幾分鐘即可入職，而不是幾天。這使工程組織具有一致性和易於管理。不再除錯本機。 DevZero 的一個顯著優勢是縮短了 CI 時間。開發人員可以節省重構和編譯基礎架構處理所花費的寶貴時間，因為現在他們可以立即在生產環境中執行本機程式碼。這也提高了整體發布頻率並消除了在不同環境中進行測試的障礙。 協作和專案管理 ------- 開發人員經常處理無數的選項卡，並且可能會跨多個顯示器進行操作，但切換平台以進行協作和任務管理的想法可能是一個真正的痛點。讓我們深入研究一些旨在提高開發人員生產力和促進無縫團隊協作的關鍵工具。 6. Slack ----- Slack 徹底改變了遠端協作，使公司能夠即時通訊和共享文件。對於開發人員來說，它是協作的動力源泉，可與 GitHub 等工具無縫集成，以即時更新程式碼推送或部署。這種整合確保每個人都能及時了解專案狀態，而無需不斷地來回訊息。您可以透過 Slack 的整合使用任何專案管理工具，例如 Trello、JIRA 等。 Slack 透過可自訂的工作流程和應用程式進一步發展，讓平台內任務和問題管理。雖然免費計劃支援基本通訊和最多十個集成，但要擴展到自訂自動化及其他功能，需要升級到專業計劃（每人每月 8.25 歐元）或商業計劃（每人每月 14.10 歐元）。這種靈活性使 Slack 成為追求效率和簡化工作流程的開發團隊不可或缺的工具。 7. Height ----- 在管理專案和維持組織性方面，擁有可靠的工作追蹤工具至關重要。 [Height](http://height.app/)是一款功能強大的專案管理工具，提供廣泛的功能，旨在簡化協作並最大限度地提高效率。借助 Height，開發人員可以輕鬆分配任務、設定截止日期、追蹤進度並監控團隊績效。其直覺的收件匣式介面和強大的分析功能使其成為希望掌控工作量並按時交付專案的團隊的首選。 8. Linear ----- [Linear.app](https://linear.app/)是一個專案管理和問題追蹤工具，旨在幫助團隊更有效地協作和管理工作。 Linear 提供了一個用於組織任務、追蹤進度和促進團隊成員之間溝通的平台。該工具以其時尚且用戶友好的介面而聞名。 9. Pullflow ----- 審查 PR 很多時候是工程組織的瓶頸。它不像編寫程式碼那樣有回報，並且需要上下文切換。 [Pullflow](https://pullflow.com/)旨在透過其人工智慧增強的程式碼審查協作功能來減少上下文切換並改善溝通和公關管理。 Pullflow 整合了 VSCode、Github 和 Slack 之間的 PR 通信，因此開發人員無需進行上下文切換。 設計和原型製作工具 --------- 開發人員從頭開始精心設計設計並仔細考慮每個佈局、顏色和字體選擇的時代已經演變。今天的 UI/UX 開發人員享受 Figma 等工具的重大飛躍，其中設計與程式碼相結合。讓我們詳細探討一下。 10. Figma ------- [Figma](https://www.figma.com/)透過提供可無縫整合到專案中的現成程式碼片段，徹底改變了設計到開發流程。在過去的一年裡，Figma 推出了許多插件，為 React、Vue 甚至 HTML 等流行框架提供樣板元件，並支援 Figma 設計直接轉換為 Webflow。 FigJam 是一項出色的功能，事實證明，它對於規劃和確定建造和發布的範圍、衝刺規劃和製作架構圖非常有價值。它在協作和策略規劃階段的效用怎麼強調都不為過。 由於其基於網路的特性，Figma 提供了無與倫比的易用性，並輔以適用於 Windows 和 macOS 的專用桌面應用程式。您需要加入其中一項付費方案才能使用開發模式並存取所有設計元素的程式碼。如果您使用組織計劃，您甚至可以使用私人插件。 11.Whimsical和Excalidraw ------------------ 在解釋複雜概念或設計系統架構時，圖表和視覺化通常是必不可少的。 [Excalidraw](https://excalidraw.com/)和[Whimsical](https://whimsical.com/)是兩種流行的快速繪圖工具，可讓開發人員輕鬆建立圖表。憑藉其簡單而強大的介面，開發人員可以立即建立線框、流程圖和其他視覺表示。這些工具非常適合集思廣益並向利害關係人展示概念，使它們成為開發人員工具包的寶貴補充。 偵錯工具 ---- 除錯是軟體開發生命週期中最具挑戰性和最耗時的部分之一。然而，正確的警報和監控系統可以節省無數時間。讓我們深入研究可以顯著簡化除錯過程、提高效率並減少開發工作流程中的停機時間的基本工具。 12.Postman ----- [Postman](https://www.postman.com/)已成為測試和記錄 API 的基礎 API 開發工具，因其在除錯生產和本地 API 方面的強大能力而贏得了開發人員的廣泛認可。它使用戶能夠發送和模擬 HTTP 請求，這項功能對於等待後端 API 準備就緒的前端開發人員特別有利，可確保持續進展。 除了在測試中的實用性之外，Postman 還充當 API 文件的集中儲存庫，促進團隊內的無縫共享和協作。其基本計劃（每個用戶每月 14 美元）對於大多數開發人員來說應該足夠了。 13.Sentry ----- [Sentry](https://sentry.io/)是效能監控和錯誤追蹤領域的強大工具，擅長自動辨識程式碼庫中的錯誤和錯誤。 Sentry 的 SDK 適用於幾乎所有廣泛使用的框架和技術（包括 JavaScript、PHP、Python 和 Ruby），可無縫整合到您的專案中。 檢測到錯誤後，Sentry 會提供全面的見解，例如堆疊追蹤、來源頁面和使用者訊息，這些對於有效診斷和解決問題非常寶貴。此外，程式碼覆蓋率和會話重播等功能被證明是不可或缺的，尤其是在面臨重現難以捉摸的錯誤的艱鉅任務時。 Sentry 的功能確保開發人員可以花更少的時間進行故障排除，而將更多的時間用於開發，從而提高整體生產力和程式碼品質。 您可以嘗試 Sentry 及其免費的單獨開發者計畫。然而，為了充分利用它，我建議嘗試團隊計劃（每月 26 美元），您可以將隊友加入到 Sentry 工作區。您還需要每月支付 29 美元購買程式碼覆蓋率。 框架和抽象 ----- 當今的許多元件在應用程式中都很常見：身份驗證、授權、資料庫存取、UI 元件等。寫內容從頭開始。 14.Vercel ------ 建置和部署 Web 應用程式可能是一項複雜的任務，尤其是當專案規模不斷擴大時。 Web 應用程式部署框架（例如 Vercel）為開發人員提供了簡化且可擴展的解決方案來部署其 Web 應用程式。 [Vercel](https://www.vercel.com/)是一個雲端平台，旨在簡化 Web 應用程式的部署和託管。它以專注於透過提供自動部署、無伺服器功能和全球內容交付等功能為開發人員提供無縫體驗而聞名。 15. Neurelo ------ [Neurelo](https://www.neurelo.com)為您的資料 API 提供了一個與資料庫無關的程式設計介面。 Neurelo 無需學習 MongoDB 或 PostgreSQL 的查詢語言並為它們建立 API，而是在幾分鐘內為您提供優化的自動生成的 API，包括模式建置器，以及使用 Git 管理開發、登台和生產環境的界面類似版本控制來管理追蹤更改。最後，它使用人工智慧提供自動生成的文件以及透過點擊生成和測試複雜查詢的能力。 許多公司最終會產生自己的抽象層來管理開發人員的資料庫存取或使用 SQLAlchemy 或 Hibernate 等物件關係映射器 (ORM)。 Neurelo 建立了一個通用的強大且與資料庫無關的替代方案。 部署應用程式 ------ 16. Fly.io --------- 部署應用程式可能是一個複雜且耗時的過程。應用程式部署工具（例如[Fly.io](http://fly.io/) ）旨在透過提供一個用於輕鬆部署和管理應用程式的平台來簡化此流程。 ‍ Fly.io是一個提供全球應用部署網路的平台。它允許開發人員在跨越全球多個地點的分散式基礎設施上部署和執行他們的應用程式。 Fly.io 專注於透過將應用程式執行個體分佈在更靠近最終用戶的位置來優化應用程式效能，減少延遲並改善整體用戶體驗。 ‍ 該平台支援各種程式語言和框架，使開發人員能夠部署各種應用程式，包括Web應用程式、API和微服務。 Fly.io 使用邊緣運算和全球選播網路的組合來最佳化路由並確保使用者要求定向到最近的可用應用程式實例。 17. Tigris ----------- [Tigris](https://www.tigrisdata.com/)是一種與 S3 相容的全球分散式物件儲存服務，它將資料儲存為物件儲存桶中。物件是一個文件和描述該文件的任何元資料。桶子是存放物件的容器。 ‍ 哪個才是最好的開發工具？ ------------ 只要您的武器庫中擁有每個類別中的任何一種工具，您就可以開始使用了。但如果我必須為您選擇一種工具，我會選擇 Visual Studio Code。它因其多功能性、對語言和框架的廣泛支援以及強大的擴展生態系統而脫穎而出，使其成為首選。 工程生產力工具 ------- 工程生產力工具支援軟體開發的特定工程方面。這可能包括分析、自動化測試、部署、容器化或靜態程式碼分析。使用這些工具，您可以確保程式碼品質和效能，並在開發週期的早期發現潛在問題。一些常見的工程生產力工具包括Docker、Jenkins、Confluence、JIRA等。 結論 我很想知道 2024 年您會從這個[清單](https://www.devzero.io/blog/how-to-calculate-developer-productivity-metrics-using-mergestat-and-devzero)中選擇哪種工具。從本質上講，GitHub 和 Visual Studio Code 是 2024 年的必備工具。我仍在研究它們，誰知道呢，它們可能會出現在 2025 年的清單中。 本文原刊於 https://www.devzero.io/blog/best-developer-productivity-in-2024 --- 原文出處：https://dev.to/shohams/17-best-developer-productivity-tools-to-try-1a2a

1個讚   0留言 143瀏覽

使用 NextJS 和 Wing 建立您自己的 ChatGPT 圖形客戶端 🤯

--- 標題：使用 NextJS 和 Wing 建立您自己的 ChatGPT 圖形客戶端 🤯 描述：使用 Winglang 和 NextJS 建立的 ChatGPT 客戶端應用程式 canonical\_url：https://www.winglang.io/blog/2024/05/16/chatgpt-client-with-nextjs-and-wing 發表：真實 --- 長話短說 ---- 在本文結束時，您將使用 Wing 和 Next.js 建置並部署 ChatGPT 用戶端。 該應用程式可以在本地執行（在本地雲端模擬器中）或將其部署到您自己的雲端提供者。 ![舞蹈](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1sm2cj4sbcm4skp0ho23.gif) --- 介紹 -- 建置 ChatGPT 用戶端並將其部署到您自己的雲端基礎架構是確保對資料進行控制的好方法。 將 LLM 部署到您自己的雲端基礎架構可為您的專案提供隱私和安全性。 有時，在使用 OpenAI 的 ChatGPT 等專有 LLM 平台時，您可能會擔心資料在遠端伺服器上儲存或處理，這可能是由於輸入平台的資料的敏感度或其他隱私原因。 在這種情況下，將 LLM 自託管到您的雲端基礎架構或在您的電腦上本地執行可以讓您更好地控制資料的隱私和安全性。 > [Wing](https://git.new/wing-repo)是一種面向雲端的程式語言，可讓您建置和部署基於雲端的應用程式，而無需擔心底層基礎架構。 它允許您使用相同的語言定義和管理雲端基礎架構和應用程式程式碼，從而簡化了您在雲端上建置的方式。 Wing 與雲端無關——用它建置的應用程式可以編譯並部署到各種雲端平台。 > {% cta https://git.new/wing-repo %} 看 ⭐ Wing {% endcta %} [![給我們一顆星星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rg63klimgm7s0aw72rn2.png)](https://git.new/wing-repo) --- 讓我們開始吧！ ------- 要繼續操作，您需要： - 對 Next.js 有一定了解 - 在您的機器上[安裝 Wing](https://www.winglang.io/docs/) 。如果您不知道如何操作，請不要擔心。我們將在這個專案中一起討論它。 - 取得您的 OpenAI API 金鑰。 建立您的專案 ------ 首先，您需要在電腦上安裝 Wing。執行以下命令： ``` npm install -g winglang ``` 透過檢查版本確認安裝： ``` wing -V ``` ### 建立您的 Next.js 和 Wing 應用程式。 ``` mkdir assistant cd assistant npx create-next-app@latest frontend mkdir backend && cd backend wing new empty ``` 我們已在 Assistant 目錄中成功建立了 Wing 和 Next.js 專案。我們的 ChatGPT 用戶端的名稱是 Assistant。聽起來很酷，對吧？ 前端和後端目錄分別包含我們的 Next 和 Wing 應用程式。 `wing new empty`建立三個檔案： `package.json` 、 `package-lock.json`和`main.w` 。後者是應用程式的入口點。 ### 在 Wing 模擬器中本地執行您的應用程式 Wing 模擬器可讓您在本機電腦內執行程式碼、編寫單元測試和偵錯程式碼，而無需部署到實際的雲端供應商，從而幫助您更快地進行迭代。 使用以下命令在本機上執行您的 Wing 應用程式： ``` wing it ``` 您的 Wing 應用程式將在`localhost:3000`上執行。 ![安慰](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5ytrntrz7lc5225w8w8.png) 設定您的後端 ------ - 讓我們安裝 Wing 的 OpenAI 和 React 函式庫。 OpenAI 庫提供了與 LLM 互動的標準介面。 React 程式庫可讓您將 Wing 後端連接到 Next 應用程式。 ``` npm i @winglibs/openai @winglibs/react ``` - 將這些套件匯入到`main.w`檔案中。我們還導入需要的所有其他庫。 ``` bring openai bring react bring cloud bring ex bring http ``` `bring`是 Wing 中的導入語句。這樣想，Wing 使用`bring`來實現與 JavaScript 中`import`相同的功能。 `cloud`是 Wing 的雲端庫。它公開了雲端 API、儲存桶、計數器、網域、端點、函數和更多雲端資源的標準介面。 `ex`是用於與表格和雲端 Redis 資料庫介面的標準庫， `http`用於呼叫不同的 HTTP 方法 - 從遠端資源發送和檢索資訊。 取得您的 OpenAI API 金鑰 ------------------ 我們將在我們的應用程式中使用`gpt-4-turbo`但您可以使用任何 OpenAI 模型。 - 如果您還沒有[OpenAI](https://platform.openai.com/signup)帳戶，請建立一個。若要建立新的 API 金鑰，請前往[platform.openai.com/api-keys](http://platform.openai.com/api-keys)並選擇**建立新金鑰。** ![OpenAI 金鑰](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9645jxsf1fj8902iwnr7.png) - 設定**名稱**、**專案**和**權限，**然後按一下**建立金鑰。** ![OpenAI Key2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yng28wns7esezf94t3uq.png) 初始化 OpenAI ---------- 建立一個`Class`來初始化您的 OpenAI API。我們希望它可以重複使用。 我們將向`Assistant`類別加入`personality` ，以便在向 AI 助手傳遞提示時可以指定 AI 助手的個性。 ``` let apiKeySecret = new cloud.Secret(name: "OAIAPIKey") as "OpenAI Secret"; class Assistant { personality: str; openai: openai.OpenAI; new(personality: str) { this.openai = new openai.OpenAI(apiKeySecret: apiKeySecret); this.personality = personality; } pub inflight ask(question: str): str { let prompt = `you are an assistant with the following personality: ${this.personality}. ${question}`; let response = this.openai.createCompletion(prompt, model: "gpt-4-turbo"); return response.trim(); } } ``` Wing 分別使用`preflight`和`inflight`概念來統一基礎設施定義和應用程式邏輯。 **預檢**程式碼（通常是基礎設施定義）在編譯時執行一次，而執行**中**程式碼將在執行時執行以實現應用程式的行為。 雲端儲存桶、佇列和 API 端點是預檢的一些範例。定義預檢時不需要新增預檢關鍵字，Wing 預設知道這一點。但對於飛行塊，您需要在其中加入“飛行”一詞。 > 上面的程式碼中有一個飛行中的區塊。 Inflight 區塊是您編寫非同步執行時間程式碼的地方，這些程式碼可以透過其 inflight API 直接與資源互動。 > 測試和儲存雲端秘密 --------- 讓我們來看看如何保護我們的 API 金鑰，因為我們肯定要[考慮安全性](https://techhq.com/2022/09/hardcoded-api-keys-jeopardize-data-in-the-cloud/)。 讓我們在後端的根目錄中建立一個`.env`檔案並傳入我們的 API 金鑰： ``` OAIAPIKey = Your_OpenAI_API_key ``` 我們可以在本地引用 .env 檔案來測試 OpenAI API 金鑰，然後由於我們計劃部署到 AWS，因此我們將逐步設定[AWS Secrets Manager](https://docs.aws.amazon.com/secretsmanager/latest/userguide/intro.html) 。 ![AWS 主控台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2a1nbh0egmjkckxnaov.png) 首先，我們前往 AWS 並登入控制台。如果您沒有帳戶，可以免費建立一個。 ![AWS平台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n937801fzs0lajf2knaq.png) 導覽至 Secrets Manager，讓我們儲存 API 金鑰值。 ![AWS 秘密管理器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scbb1snyzjdoip2nvdpl.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lf79xzn6vfhqylao8iuo.png) 我們已將 API 金鑰儲存在名為`OAIAPIKey`的雲端機密中。複製您的金鑰，我們將跳到終端並連接到現在儲存在 AWS 平台中的金鑰。 ``` wing secrets ``` 現在將您的 API 金鑰貼上為終端中的值。您的密鑰現已正確存儲，我們可以開始與我們的應用程式互動。 --- 將人工智慧的回應儲存在雲端。 -------------- 將人工智慧的回應儲存在雲端可以讓您控制資料。它駐留在您自己的基礎設施上，與 ChatGPT 等專有平台不同，您的資料位於您無法控制的第三方伺服器上。您也可以在需要時檢索這些回應。 讓我們建立另一個類，使用 Assistant 類來傳遞 AI 的個性和提示。我們還將每個模型的回應作為`txt`檔案儲存在雲端儲存桶中。 ``` let counter = new cloud.Counter(); class RespondToQuestions { id: cloud.Counter; gpt: Assistant; store: cloud.Bucket; new(store: cloud.Bucket) { this.gpt = new Assistant("Respondent"); this.id = new cloud.Counter() as "NextID"; this.store = store; } pub inflight sendPrompt(question: str): str { let reply = this.gpt.ask("{question}"); let n = this.id.inc(); this.store.put("message-{n}.original.txt", reply); return reply; } } ``` --- 我們為我們的助理設定了「受訪者」的個性。我們希望它能夠回答問題。您也可以讓前端使用者在發送提示時指定此個性。 每次產生回應時，計數器都會遞增，並且計數器的值會傳遞到用於在雲端中儲存模型回應的`n`變數中。然而，我們真正想要的是建立一個資料庫來儲存來自前端的使用者提示和模型的回應。 讓我們定義我們的資料庫。 定義我們的資料庫 -------- Wing 內建了`ex.Table` - 一個用於儲存和查詢資料的 NoSQL 資料庫。 ``` let db = new ex.Table({ name: "assistant", primaryKey: "id", columns: { question: ex.ColumnType.STRING, answer: ex.ColumnType.STRING } }); ``` --- 我們在資料庫定義中新增了兩列 - 第一列用於儲存使用者提示，第二列用於儲存模型的回應。 建立 API 路由和邏輯 ------------ 我們希望能夠在後端發送和接收資料。讓我們建立 POST 和 GET 路由。 ``` let api = new cloud.Api({ cors: true }); api.post("/assistant", inflight((request) => { // POST request logic goes here })); api.get("/assistant", inflight(() => { // GET request logic goes here })); ``` --- ``` let myAssistant = new RespondToQuestions(store) as "Helpful Assistant"; api.post("/assistant", inflight((request) => { let prompt = request.body; let response = myAssistant.sendPrompt(JSON.stringify(prompt)); let id = counter.inc(); // Insert prompt and response in the database db.insert(id, { question: prompt, answer: response }); return cloud.ApiResponse({ status: 200 }); })); ``` 在 POST 路由中，我們希望將從前端收到的使用者提示傳遞到模型中並獲得回應。提示和回應都將儲存在資料庫中。 `cloud.ApiResponse`可讓您傳送對使用者要求的回應。 新增前端發出 GET 請求時檢索資料庫專案的邏輯。 --- 新增前端發出 GET 請求時檢索資料庫專案的邏輯。 ``` api.get("/assistant", inflight(() => { let questionsAndAnswers = db.list(); return cloud.ApiResponse({ body: JSON.stringify(questionsAndAnswers), status: 200 }); })); ``` 我們的後端已經準備好了。我們在本地雲端模擬器中測試一下。 跑`wing it` 。 讓我們轉到`localhost:3000`並向我們的助理詢問一個問題。 ![助理回應](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ox67623b9vye7o6quqe.png) 我們的問題和助理的回答都已儲存到資料庫中。看一看。 ![表資料](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ajd94ywkhjw04yb21e2.png) 向前端公開您的 API URL --------------- 我們需要將後端的 API URL 公開給 Next 前端。這就是之前安裝的 React 函式庫派上用場的地方。 ``` let website = new react.App({ projectPath: "../frontend", localPort: 4000 }); website.addEnvironment("API_URL", api.url); ``` 將以下內容加入 Next 應用程式的`layout.js`中。 ``` import { Inter } from "next/font/google"; import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children }) { return ( <html lang="en"> <head> <script src="./wing.js" defer></script> </head> <body className={inter.className}>{children}</body> </html> ); } ``` 我們現在可以在 Next 應用程式中存取`API_URL` 。 實作前端邏輯 ------ 讓我們實作前端邏輯來呼叫後端。 ``` import { useEffect, useState, useCallback } from 'react'; import axios from 'axios'; function App() { const [isThinking, setIsThinking] = useState(false); const [input, setInput] = useState(""); const [allInteractions, setAllInteractions] = useState([]); const retrieveAllInteractions = useCallback(async (api_url) => { await axios ({ method: "GET", url: `${api_url}/assistant`, }).then(res => { setAllInteractions(res.data) }) }, []) const handleSubmit = useCallback(async (e)=> { e.preventDefault() setIsThinking(!isThinking) if(input.trim() === ""){ alert("Chat cannot be empty") setIsThinking(true) } await axios({ method: "POST", url: `${window.wingEnv.API_URL}/assistant`, headers: { "Content-Type": "application/json" }, data: input }) setInput(""); setIsThinking(false); await retrieveAllInteractions(window.wingEnv.API_URL); }) useEffect(() => { if (typeof window !== "undefined") { retrieveAllInteractions(window.wingEnv.API_URL); } }, []); // Here you would return your component's JSX return ( // JSX content goes here ); } export default App; ``` `retrieveAllInteractions`函數取得後端資料庫中的所有問題和答案。 `handSubmit`函數將使用者的提示傳送到後端。 讓我們加入 JSX 實作。 ``` import { useEffect, useState } from 'react'; import axios from 'axios'; import './App.css'; function App() { // ... return ( <div className="container"> <div className="header"> <h1>My Assistant</h1> <p>Ask anything...</p> </div> <div className="chat-area"> <div className="chat-area-content"> {allInteractions.map((chat) => ( <div key={chat.id} className="user-bot-chat"> <p className='user-question'>{chat.question}</p> <p className='response'>{chat.answer}</p> </div> ))} <p className={isThinking ? "thinking" : "notThinking"}>Generating response...</p> </div> <div className="type-area"> <input type="text" placeholder="Ask me any question" value={input} onChange={(e) => setInput(e.target.value)} /> <button onClick={handleSubmit}>Send</button> </div> </div> </div> ); } export default App; ``` 在本地執行您的專案 --------- 導航到您的後端目錄並使用以下命令在本地執行您的 Wing 應用程式 ``` cd ~assistant/backend wing it ``` 也執行您的 Next.js 前端： ``` cd ~assistant/frontend npm run dev ``` 讓我們看一下我們的應用程式。 ![聊天應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97g8kikxfwwb7ephfdni.png) 讓我們透過 Next 應用程式向 AI 助理詢問幾個開發人員問題。 ![聊天應用程式2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uoz1y9czt0nwwtsesrz.png) 將您的應用程式部署到 AWS -------------- 我們已經了解了我們的應用程式如何在本地執行。 Wing 也允許您部署到包括 AWS 在內的任何雲端提供者。要部署到 AWS，您需要使用您的憑證來設定[Terraform](https://terraform.io/downloads)和[AWS CLI](https://docs.aws.amazon.com/cli/) 。 - 使用`tf-aws`編譯到 Terraform/AWS 。此指令指示編譯器使用 Terraform 作為配置引擎，將所有資源綁定到預設的 AWS 資源集。 ``` cd ~/assistant/backend wing compile --platform tf-aws main.w ``` --- - 執行 Terraform 初始化並應用 ``` cd ./target/main.tfaws terraform init terraform apply ``` --- 注意： `terraform apply`需要一些時間才能完成。 您可以[在此處](https://github.com/NathanTarbert/chatgpt-client-wing-nextjs)找到本教程的完整程式碼。 總結一下 ---- 正如我之前提到的，我們都應該關心我們的應用程式的安全性，建立您自己的 ChatGPT 用戶端並將其部署到您的雲端基礎設施可以為您的應用程式提供一些非常好的[保障](https://docs.aws.amazon.com/whitepapers/latest/aws-overview/security-and-compliance.html#:~:text=Keep%20Your%20data%20safe%20%E2%80%94%20The,compliance%20programs%20in%20its%20infrastructure.)。 我們在本教程中演示了[Wing](https://git.new/wing-repo)如何提供一種簡單的方法來建置可擴展的雲端應用程式，而無需擔心底層基礎設施。 如果您有興趣建立更酷的東西，Wing 擁有一個活躍的開發人員社區，他們可以合作建立雲端願景。我們很高興在那裡見到你。 只需前往我們的[Discord](https://t.winglang.io/discord)打個招呼即可！ --- 原文出處：https://dev.to/winglang/building-your-own-chatgpt-graphical-client-with-nextjs-and-wing-29jj

0個讚   0留言 49瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 工作上遇到CSS權重的問題
🔥 Svelte 程式範例：動手寫一個「蕃茄鐘工作法」小專案
🔥 自學網頁の嬰兒教材：JavaScript（五）作業分享
🔥 🚀 VSCode 中的 Emmet 強大外掛 ✨
🔥 您應該了解的 7 個開源專案 - C# 版 ✔️
  近期留言
熱門搜尋： 使用 題 component' 工作 c 1 專案 2 開發 前 技術 網頁 作為 第一 聊天 4 ＣＳＳ 學習 主題 20 語言 作業 C 測試 . COM 研究 研 套件 javasc Java ui % 網站 分享 19 前端 js github 50 10 git javascript py 系列 jav 架構 AWS Html 後端 Line 工程師 編輯 bi 結構 html ul Ai API 開源 api for 入門 JavaScript HTML app console go json ? ` with python JS id 謝謝 create node 查詢 非同步 ci 資料庫 react 新創 user 搜尋 AI ' 遊戲 Git REACT class import React JAVA GIT %' 2023 local cn
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。