**長話短說** -------- 在本文中，您將了解如何建立由 AI 驅動的前端 UI 元件產生器，該產生器使您能夠透過實作教學產生 Next.js Tailwind CSS UI 元件。 我們將介紹如何： - 使用 Next.js、TypeScript 和 Tailwind CSS 建立 UI 元件產生器 Web 應用程式。 - 使用 CopilotKit 將 AI 功能整合到 UI 元件產生器中。 - 整合嵌入式程式碼編輯器以變更產生的程式碼。 先決條件 ---- 要完全理解本教程，您需要對 React 或 Next.js 有基本的了解。 以下是建立 AI 支援的 UI 元件產生器所需的工具： - [Ace 程式碼編輯器](https://ace.c9.io/)- 用 JvaScript 編寫的嵌入式程式碼編輯器，與本機編輯器的功能和效能相符。 - [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 aiuigenerator ``` 選擇您首選的配置設定。在本教學中，我們將使用 TypeScript 和 Next.js App Router。  接下來，安裝 Ace 程式碼編輯器和 Langchain 軟體套件及其相依性。 ``` npm install react-ace @langchain/langgraph ``` 最後，安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend ``` 恭喜！您現在已準備好建立由人工智慧驅動的部落格。 **建構 UI 元件產生器前端** ----------------- 在本節中，我將引導您完成使用靜態內容建立 UI 元件產生器前端的過程，以定義生成器的使用者介面。 首先，請在程式碼編輯器中前往`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中，建立兩個名為`Header.tsx`和`CodeTutorial.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="w-full flex-none text-xl text-white font-semibold p-6" href="/" aria-label="Brand"> AI-UI-Components-Generator </Link> </div> </nav> </header> </> ); } ``` 在`CodeTutorial.tsx`檔案中，加入以下程式碼，定義一個名為`CodeTutorial`的功能元件，該元件呈現 UI 元件產生器主頁，該首頁將顯示產生的 UI 元件、嵌入式程式碼編輯器和產生的實作教學。 ``` "use client"; import Markdown from "react-markdown"; import { useState } from "react"; import AceEditor from "react-ace"; import React from "react"; export default function CodeTutorial() { const [code, setCode] = useState<string[]>([ `<h1 class="text-red-500">Hello World</h1>`, ]); const [codeToDisplay, setCodeToDisplay] = useState<string>(code[0] || ""); const [codeTutorial, setCodeTutorial] = useState(``); function onChange(newCode: any) { setCodeToDisplay(newCode); } return ( <> <main className=" min-h-screen px-4"> <div className="w-full h-full min-h-[70vh] flex justify-between gap-x-1 "> <div className="w-2/3 min-h-[60vh] rounded-lg bg-white shadow-lg p-2 border mt-8 overflow-auto"> <div className="w-full min-h-[60vh] rounded-lg" dangerouslySetInnerHTML={{ __html: codeToDisplay }} /> </div> <AceEditor placeholder="Placeholder Text" mode="html" theme="monokai" name="blah2" className="w-[50%] min-h-[60vh] p-2 mt-8 rounded-lg" onChange={onChange} fontSize={14} lineHeight={19} showPrintMargin={true} showGutter={true} highlightActiveLine={true} value={codeToDisplay} setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: false, showLineNumbers: true, tabSize: 2, }} /> </div> <div className="w-10/12 mx-auto"> <div className="mt-8"> <h1 className="text-white text-center text-xl font-semibold p-6"> Code Tutorial </h1> {codeTutorial ? ( <Markdown className="text-white">{codeTutorial}</Markdown> ) : ( <div className="text-white"> The Code Tutorial Will Appear Here </div> )} </div> </div> </main> </> ); } ``` 接下來，前往`/[root]/src/page.tsx`文件，新增以下程式碼，導入`CodeTutorial`和`Header`元件，並定義名為`Home`的功能元件。 ``` import React from "react"; import Header from "./components/Header"; import CodeTutorial from "./components/CodeTutorial"; export default function Home() { return ( <> <Header /> <CodeTutorial /> </> ); } ``` 接下來，刪除 globals.css 檔案中的 CSS 程式碼並新增以下 CSS 程式碼。 ``` @tailwind base; @tailwind components; @tailwind utilities; @tailwind base; @tailwind components; @tailwind utilities; body { height: 100vh; background-color: rgb(16, 23, 42); } pre { margin: 1rem; padding: 1rem; border-radius: 10px; background-color: black; overflow: auto; } h2, p { padding-bottom: 1rem; padding-top: 1rem; } code { margin-bottom: 2rem; } ``` 最後，在命令列上執行命令`npm run dev` ，然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看 UI 元件產生器前端，如下所示。  **使用 CopilotKit 將 AI 功能整合到元件產生器** --------------------------------- 在本節中，您將學習如何為 UI 元件產生器新增 AI 副駕駛以產生 UI 元件程式碼以及使用 CopilotKit 的實作教學。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先，我們將 CopilotKit React 元件加入到部落格前端。 ### **將 CopilotKit 新增至部落格前端** 在這裡，我將引導您完成將 UI 元件產生器與 CopilotKit 前端整合的過程，以方便產生 UI 元件程式碼和實作教學。 首先，使用下面的程式碼片段導入`/[root]/src/app/components/CodeTutorial.tsx`檔案頂部的自訂掛鉤`useMakeCopilotReadable`和`useCopilotAction` 。 ``` import { useCopilotAction, useMakeCopilotReadable, } from "@copilotkit/react-core"; ``` 在`CodeTutorial`函數內的狀態變數下方，加入以下程式碼，該程式碼使用`useMakeCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的程式碼。該鉤子使副駕駛可以讀取程式碼。 ``` useMakeCopilotReadable(codeToDisplay); ``` 在上面的程式碼下方，新增以下程式碼，該程式碼使用`useCopilotAction`掛鉤來設定名為`generateCodeAndImplementationTutorial`的操作，該操作將啟用 UI 元件程式碼和實作教學課程的產生。 這個操作接受兩個參數，稱為`code`和`tutorial` ，這兩個參數可以產生 UI 元件程式碼和實作教程。 該操作包含一個處理函數，該函數根據給定的提示產生 UI 元件程式碼和實作教程。 在處理函數內部， `codeToDisplay`狀態會使用新產生的程式碼進行更新，而`codeTutorial`狀態會使用新產生的教學課程進行更新，如下所示。 ``` useCopilotAction( { name: "generateCodeAndImplementationTutorial", description: "Create Code Snippet with React.js(Next.js), tailwindcss and an implementation tutorial of the code generated.", parameters: [ { name: "code", type: "string", description: "Code to be generated", required: true, }, { name: "tutorial", type: "string", description: "Markdown of step by step guide tutorial on how to use the generated code accompanied with the code. Include introduction, prerequisites and what happens at every step accompanied with code generated earlier. Don't forget to add how to render the code on browser.", required: true, }, ], handler: async ({ code, tutorial }) => { setCode((prev) => [...prev, code]); setCodeToDisplay(code); setCodeTutorial(tutorial); }, }, [codeToDisplay, codeTutorial] ); ``` 之後，請前往`/[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`和`CodeTutorial`元件，如下所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/` ) 的 URL，而`CopilotSidebar`呈現應用程式內聊天機器人，您可以提示產生 UI 元件程式碼和實作教學。 ``` export default function Home() { return ( <> <Header /> <CopilotKit url="/api/copilotkit"> <CopilotSidebar instructions="Help the user generate code. Ask the user if to generate its tutorial." defaultOpen={true} labels={{ title: "Code & Tutorial Generator", initial: "Hi! 👋 I can help you generate code and its tutorial.", }}> <CodeTutorial /> </CopilotSidebar> </CopilotKit> </> ); } ``` 之後，執行開發伺服器並導航到 http://localhost:3000。您應該會看到應用程式內聊天機器人已整合到 UI 元件產生器中。  ### **將 CopilotKit 後端加入博客** 在這裡，我將引導您完成將 UI 元件產生器與 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。  若要取得 Tavilly Search API 金鑰，請導覽至 https://app.tavily.com/home  之後，轉到`/[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()); } ``` 如何產生 UI 元件 ---------- 現在轉到您之前整合的應用程式內聊天機器人，並給它一個提示，例如「產生聯絡表單」。 生成完成後，您應該會看到生成的聯絡表單元件及其實作教程，如下所示。您也可以使用嵌入式程式碼編輯器修改產生的程式碼。   恭喜！您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具，可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣，還是對複雜任務的自動化感興趣，CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中，您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼： <https://github.com/TheGreatBonnie/AIPoweredUIComponentsGenerator> --- 原文出處：https://dev.to/the_greatbonnie/ai-powered-frontend-ui-components-generator-nextjs-gpt4-langchain-copilotkit-1hac
我們聽到開發人員一次又一次地表達同樣的痛點：很難將應用程式的前端與後端集成，您需要在日常工作負載中解決不斷擴大的技術範圍，並且很難駕馭廣泛的雲端產品。雖然後端即服務產品提供了一個簡單的入口，但它們通常要求開發人員隨著公司規模的擴大而遷移。這就是我們從頭開始重建[AWS Amplify 的](https://aws.amazon.com/amplify/?trk=60cc8d4a-110e-474c-ac1a-69b65329c4ff&sc_channel=el)原因，以直接解決前端開發人員每天在工作中面臨的這些挑戰。 我們非常高興地宣布推出全新的 Amplify 體驗，旨在讓前端開發人員僅使用 TypeScript 即可建立全端、雲端驅動的應用程式。讓我們更深入地了解第二代 Amplify 的樣子！ https://www.youtube.com/watch?v=BCXdLx6xHmc 只需幾分鐘即可將您的前端運送到全球 ----------------- 您可以使用 Amplify Hosting 透過幾個快速簡單的步驟部署您的應用程式前端。首先前往 AWS 控制台，選擇您的 Git 供應商，選擇您的儲存庫和分支，更新您想要自訂的任何建置設置，然後「儲存並部署」。幾分鐘後，您的應用程式將在全球部署！您可以使用下列步驟託管使用 Next.js、Nuxt、Astro 和 Vite 等框架建立的靜態或伺服器端渲染應用程式。  快速從前端到全端 -------- 當您建立新的 Amplify 應用程式時，您將獲得一些為您建立的文件，您可以在其中保存後端程式碼。 ``` ├── amplify/ │ ├── auth/ │ │ └── resource.ts │ ├── data/ │ │ └── resource.ts ``` 在這些檔案中，您可以編寫 TypeScript 程式碼來建立應用程式後端。您可以使用以下程式碼建立資料模型，該程式碼還為您的資料設定授權規則。 ``` // amplify/data/resource.ts import { a, defineData, type ClientSchema } from '@aws-amplify/backend'; // Create a data model with two fields, `content` and `done`. The default authorization mode is apiKey -- meaning anyone authenticated using an API key can create, read, update, and delete todos. const schema = a.schema({ Todo: a.model({ content: a.string(), isDone: a.boolean() }) .authorization(allow => [allow.publicApiKey()]) }); // Used for code completion / highlighting when making requests from frontend export type Schema = ClientSchema<typeof schema>; // defines the data resource to be deployed export const data = defineData({ schema, authorizationModes: { defaultAuthorizationMode: 'apiKey', apiKeyAuthorizationMode: { expiresInDays: 30 } } }); ``` 然後，您可以使用 Amplify 用戶端庫與應用程式前端的資料模型進行交互，例如要列出所有待辦事項，您可以編寫如下程式碼： ``` import type { Schema } from "../amplify/data/resource"; import { generateClient } from "aws-amplify/data"; const client = generateClient<Schema>(); const fetchTodos = async () => { const { data: items, errors } = await client.models.Todo.list(); }; ``` Amplify 擁有為許多不同框架和語言編寫的程式庫 - 從適用於行動開發人員的 Swift、Android 和 Flutter 到適用於 Next.js 應用程式的 SSR 功能。 您可以執行類似的身份驗證操作！下面的程式碼定義並配置了一個身分驗證資源，向新使用者發送一封主題行為「Welcome to Amplify 🚀」的驗證電子郵件。 ``` import { defineAuth } from "@aws-amplify/backend" export const auth = defineAuth({ loginWith: { email: { verificationEmailSubject: "Welcome to Amplify 🚀" }, }, }) ``` 然後，您可以使用`withAuthenticator`高階 React 元件建立完整的使用者驗證流程，包括登入和註冊！ ``` import { Authenticator } from '@aws-amplify/ui-react' function App() { return ( <Authenticator> <h1>You can't see this until you log in!</h1> </Authenticator> ) } export default App ``` 您可以執行類似的操作來在應用程式中建立無伺服器函數和檔案儲存資源。部署所需要做的就是`git push`您的程式碼！ ### 與您的團隊合作，而不是對抗 在本機開發 Amplify 應用程式時，您可以執行沙箱，每次變更後端程式碼時，該沙箱都會自動快速重新部署雲端資源。您團隊中的每個開發人員都將擁有自己的沙箱，因此您在迭代時不會相互覆蓋。 ``` npx ampx sandbox ``` 您也可以為專案中的每個 Git 分支設定部署環境 - 例如`dev` 、 `prod`和`my-new-feature` 。您可以在交付生產之前在隔離環境中測試變更！ Amplify 現在建立在 AWS 雲端開發套件 (AWS CDK) 之上，因此您可以連接到 Amplify 本身不支援的服務 - 例如用於 AI/ML 的 Amazon Bedrock！ 試試看！ ---- 要了解有關 Amplify 的更多訊息，請嘗試我們的[快速入門教程](https://docs.amplify.aws/react/start/quickstart/?trk=c33e0637-74b4-466d-8750-a7d201b6c7a5&sc_channel=el)之一，該教程將指導您完成建立全端 Amplify 應用程式的步驟。 --- 原文出處：https://dev.to/aws/introducing-a-new-fullstack-typescript-dx-for-aws-1ap9
介紹 -- 在當今資料驅動的世界中，有效儲存和管理資訊對於各種規模的企業和組織都至關重要。關聯式資料庫已成為以結構化和可擴展的方式組織和操作資料的強大解決方案。在這篇文章中，我們將探討關聯式資料庫的基礎知識、它們的管理系統以及支援有效資料庫設計的原則。 --- 什麼是資料庫？ ------- 資料庫是資料的結構化集合，其組織和儲存方式有利於高效檢索、操作和管理。將其視為數位文件櫃，其中不是實體資料夾和文件，而是整齊排列的表格和記錄，以便於存取。 什麼是關係資料庫？ --------- 關聯式資料庫是一種將資料組織成具有行（記錄）和列（欄位）的表（關係）的資料庫。這些表透過關係互連，允許以各種方式存取和組合資料。想像一下電子表格的集合，每個電子表格代表資料的不同方面，但能夠無縫連結和組合它們之間的資訊。 關係型資料庫管理系統 ---------- 關聯式資料庫管理系統 (RDBMS) 是一種軟體應用程式，旨在建立、管理關聯式資料庫並與之互動。它提供了一個用於在資料庫中儲存、檢索和操作資料的結構化框架。 RDBMS 的一些熱門範例包括 MySQL、PostgreSQL、Oracle 和 Microsoft SQL Server。 --- SQL簡介 ----- SQL（結構化查詢語言）是用於與關聯式資料庫互動的標準程式語言。它允許您建立、讀取、更新和刪除資料庫中的資料，以及定義和修改資料庫結構本身。 SQL 就像一種通用語言，可讓您與不同的 RDBMS 平台進行通訊。 命名約定 ---- 在 SQL 中，遵循一致的命名約定對於清晰度和可維護性至關重要。這是一個例子： ``` -- Good naming conventions CREATE TABLE customers ( customer_id INT PRIMARY KEY, first_name VARCHAR(100), last_name VARCHAR(100), email VARCHAR(100) ); ``` 什麼是資料庫設計？ --------- 資料庫設計是建立用於儲存和管理資料庫中的資料的高效且有組織的結構的過程。它涉及定義表、列、關係和約束，以確保資料完整性、最小化冗餘並優化效能。正確的資料庫設計是建立健全且可擴展的應用程式的基礎。  資料的完整性 ------ 資料完整性是指資料庫中儲存的資料的準確性、一致性和可靠性。它確保資料遵循特定的規則和約束，防止錯誤和不一致。資料完整性分為三種： 1. **實體完整性**：確保表中的每一行都可以透過主鍵唯一標識，且主鍵不能有空值。 2. **參照完整性**：透過確保一個表中的外鍵值與另一表中的主鍵值相符來維護表之間的關係。 3. **域完整性**：透過限制可儲存的資料類型、格式和值範圍，強制給定列輸入有效的條目。 ``` -- Example: Enforcing data integrity CREATE TABLE orders ( order_id INT PRIMARY KEY, -- Entity integrity customer_id INT FOREIGN KEY REFERENCES customers(customer_id), -- Referential integrity order_date DATE NOT NULL, -- Domain integrity total_amount DECIMAL(10, 2) CHECK (total_amount >= 0) -- Domain integrity ); ``` 資料庫術語 ----- - **表**：按行和列組織的相關資料的集合。 - **行**：表中的單一實例或條目（也稱為記錄或元組）。 - **列**：表中資料的特定特徵或屬性（也稱為欄位或屬性）。 - **主鍵**：唯一標識表中每一行的列或列組合。 - **外鍵**：引用另一個表的主鍵的列或列的組合，在兩個表之間建立關係。 - **連接**：根據相關列組合兩個或多個表中的行的操作。 - **索引**：一種資料結構，透過建立表格中資料的排序表示來提高資料檢索操作的效能。 - **視圖**：從一個或多個基礎表動態產生的虛擬表。 - **預存程序**：預先編譯的 SQL 語句集合，可以作為單一單元執行。 - **觸發器**：特殊類型的預存程序，當表中發生特定事件（例如 INSERT、UPDATE 或 DELETE 語句）時會自動執行。 原子值 --- 在資料庫設計中，儲存原子值非常重要，這意味著儲存無法進一步劃分的最小資訊片段。這項原則有助於保持資料完整性並避免冗餘。 例如，與其將客戶的全名儲存在單一欄位中，不如將其分成名字和姓氏欄位。這樣，您可以輕鬆地獨立搜尋、排序或操作名稱的每個部分。 ``` -- Example: Storing atomic values CREATE TABLE customers ( customer_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), email VARCHAR(100) ); ``` --- 按鍵簡介 ---- 鍵是資料庫設計中的重要組成部分，有助於確保資料完整性並建立表之間的關係。它們充當記錄的唯一標識符，並實現高效的資料檢索和操作。 主鍵索引 ---- 主鍵是唯一標識表中每筆記錄的列或列的組合。它確保每個記錄都是唯一的並且可以輕鬆找到。通常會對主鍵建立索引以提高查詢效能。 ``` CREATE TABLE customers ( customer_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), email VARCHAR(100) ); ``` 查找表 --- 查找表也稱為參考表或程式碼表，是包含預定義值集的表，這些值可用於填入其他表中的列。查找表透過確保一致性和減少冗餘來幫助維護資料完整性。 ``` -- Lookup table for product categories CREATE TABLE product_categories ( category_id INT PRIMARY KEY, category_name VARCHAR(100) ); -- Products table referencing the lookup table CREATE TABLE products ( product_id INT PRIMARY KEY, product_name VARCHAR(100), category_id INT, FOREIGN KEY (category_id) REFERENCES product_categories(category_id) ); ``` 超級密鑰和候選密鑰 --------- 超級鍵是表中唯一標識每筆記錄的一組或多列。候選鍵是最小超鍵，這意味著它不包含不必要的列。換句話說，候選鍵是一個超級鍵，具有唯一標識每個記錄所需的最少列數。 主鍵和備用鍵 ------ 主鍵是選擇作為表的主要唯一辨識符的候選鍵。備用鍵也稱為唯一鍵，是任何其他本來可以被選為主鍵但沒有被選為主鍵的候選鍵。 ``` CREATE TABLE employees ( employee_id INT PRIMARY KEY, email VARCHAR(100) UNIQUE, -- Alternate key first_name VARCHAR(50), last_name VARCHAR(50) ); ``` 代理鍵和自然鍵 ------- 代理鍵是用作表中主鍵的人工鍵（通常是序號或 GUID）。它與資料本身沒有固有的意義或關係。另一方面，自然金鑰是從資料本身衍生的金鑰，例如員工 ID 或產品程式碼。 ``` -- Surrogate key CREATE TABLE orders ( order_id INT PRIMARY KEY IDENTITY(1,1), -- Surrogate key customer_name VARCHAR(100), order_date DATE ); -- Natural key CREATE TABLE products ( product_code VARCHAR(10) PRIMARY KEY, -- Natural key product_name VARCHAR(100), price DECIMAL(10,2) ); ``` 我應該使用代理鍵還是自然鍵？ -------------- 代理鍵和自然鍵之間的選擇取決於多個因素，包括資料的性質、資料變更的可能性以及重複或衝突的可能性。 代理鍵通常是首選，因為它們是： - 不可變：即使資料發生變化，它們也不會隨著時間而改變。 - 保證唯一性：由資料庫系統生成，保證唯一性。 - 不透明：它們不會洩露有關資料本身的任何訊息，這對於安全和隱私來說是有益的。 另一方面，自然鍵在以下情況下可能會很有優勢： - 資料具有固有的唯一性，例如產品程式碼或員工 ID。 - 資料不太可能隨著時間的推移而改變，從而降低了衝突或重複的風險。 - 需要人類可讀且有意義的辨識符。 外鍵 -- 外鍵是一個表中引用另一個表的主鍵的列或列的組合。它在兩個表之間建立連結並強制引用完整性，確保子表中的資料有效且與父表中的資料一致。 ``` CREATE TABLE orders ( order_id INT PRIMARY KEY, customer_id INT, order_date DATE, FOREIGN KEY (customer_id) REFERENCES customers(customer_id) ); ``` NOT NULL 外鍵 ----------- 在某些情況下，可能需要對外鍵列設定 NOT NULL 約束，這表示該列不能有空值。此約束可確保子表中的每筆記錄都與父表中的有效記錄相關聯。 ``` CREATE TABLE orders ( order_id INT PRIMARY KEY, customer_id INT NOT NULL, order_date DATE, FOREIGN KEY (customer_id) REFERENCES customers(customer_id) ); ``` 外鍵約束 ---- 外鍵約束定義表之間引用完整性的規則。這些約束可以包括更新或刪除父表中引用的記錄時要採取的操作，例如： - `CASCADE` ：當父表中的記錄被更新或刪除時，子表中對應的記錄也會被更新或刪除。 - `SET NULL` ：當父表中的記錄被更新或刪除時，子表中對應的外鍵值被設定為NULL。 - `NO ACTION` ：當父表中的記錄被更新或刪除時，子表中對應的外鍵值保持不變，如果違反引用完整性則回滾操作。 ``` CREATE TABLE orders ( order_id INT PRIMARY KEY, customer_id INT, order_date DATE, FOREIGN KEY (customer_id) REFERENCES customers(customer_id) ON UPDATE CASCADE ON DELETE SET NULL ); ``` 簡單鍵、複合鍵、複合鍵 ----------- - 簡單鍵是用作主鍵或外鍵的單一欄位。 - 複合鍵是用作主鍵或外鍵的兩個或多個列的組合。 - 複合鍵是用作外鍵的兩個或多個簡單鍵的組合。 ``` -- Simple key CREATE TABLE orders ( order_id INT PRIMARY KEY, ... ); -- Composite key CREATE TABLE order_items ( order_id INT, product_id INT, quantity INT, PRIMARY KEY (order_id, product_id) ); -- Compound key CREATE TABLE shipments ( shipment_id INT PRIMARY KEY, order_id INT, product_id INT, FOREIGN KEY (order_id, product_id) REFERENCES order_items(order_id, product_id) ); ``` --- 關係 ---- 關係是關聯式資料庫的基石，可讓您連接和組合來自不同表的資料。關係主要分為三種：  一對一的關係 ------ 在一對一關係中，一個表中的每筆記錄都與另一個表中的一筆記錄相關聯，反之亦然。例如，考慮一個資料庫，其中每位員工都有一名且僅有一名經理，且每位經理管理一名且僅有一名員工。這種關係在實務上比較少見。  一對多關係 ----- 在一對多關係中，一個表格（「一」側）中的每筆記錄都可以與另一個表（「多」側）中的多個記錄關聯。例如，在學校的資料庫中，一位老師可以教授多個班級，但每個班級只有一位老師授課。  多對多關係 ----- 在多對多關係中，一個表中的每筆記錄可以與另一表中的多筆記錄關聯，反之亦然。例如，在大學的資料庫中，一個學生可以註冊多個課程，每個課程可以有多個學生註冊。  ### 關係摘要 - 一對一：表A中的一筆記錄與表B中的一筆且只有一筆記錄相關，反之亦然。 - 一對多：A表中的一筆記錄可以與B表中的多筆記錄相關，但B表中的一筆記錄只能與A表中的一筆記錄相關。 - 多對多：表A中的多筆記錄可以與表B中的多筆記錄相關，反之亦然。 設計關係（SQL 實作） ------------ **1 - 設計一對一關係** 要設計一對一關係，您可以將兩個表中的所有列包含在一個表中，也可以建立兩個單獨的表並使用外鍵約束來連結它們。 ``` -- Option 1: Single table CREATE TABLE employees ( employee_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), manager_first_name VARCHAR(50), manager_last_name VARCHAR(50) ); -- Option 2: Two tables with foreign key CREATE TABLE employees ( employee_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), manager_id INT UNIQUE, FOREIGN KEY (manager_id) REFERENCES employees(employee_id) ); ``` 2 -**設計一對多關係** 要設計一對多關係，通常會建立兩個表：父表（“一”側）和子表（“多”側）。子表包含引用父表主鍵的外鍵列。 ``` -- Parent table CREATE TABLE teachers ( teacher_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50) ); -- Child table CREATE TABLE classes ( class_id INT PRIMARY KEY, class_name VARCHAR(100), teacher_id INT, FOREIGN KEY (teacher_id) REFERENCES teachers(teacher_id) ); ``` **3 - 設計多對多關係** 要設計多對多關係，通常會建立第三個表（稱為聯結表或關聯表），將兩個主表連結在一起。此聯結表包括引用主表的外鍵列 ``` -- Table 1 CREATE TABLE students ( student_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50) ); -- Table 2 CREATE TABLE courses ( course_id INT PRIMARY KEY, course_name VARCHAR(100), description TEXT ); -- Junction or Intemediary table CREATE TABLE enrollments ( enrollment_id INT PRIMARY KEY, student_id INT, course_id INT, FOREIGN KEY (student_id) REFERENCES students(student_id), FOREIGN KEY (course_id) REFERENCES courses(course_id) ); ``` 父表和子表 ----- 在一對多或多對多關係中， **“一”**側的表通常稱為父表，而**“多”**側的表稱為子表。子表包含引用父表主鍵的外鍵。 例如，在教師-班級關係中， `teachers`表是父表， `classes`表是子表。同樣，在學生-課程關係中， `students`和`courses`表是父表，而`enrollm`是父表。 實體關係建模簡介 -------- 實體關係建模（ER Modeling）是資料庫設計中使用的一種技術，用於直觀地表示資料庫的邏輯結構。它有助於辨識實體（表）、屬性（列）以及它們之間的關係，從而更容易理解和傳達資料庫設計。 ER 圖由以下部分組成： - **實體**：以矩形表示，實體是資料庫中的表或物件。 - **屬性**：在實體矩形內列出，屬性是描述實體的列或欄位。 - **關係**：以連接實體的線表示，關係描述了實體之間的關聯。 基數 -- 基數定義了兩個實體之間的數值關係。它指定一個實體可以與另一個實體的單一實例關聯的最大實例數。最常見的基數是： - 一對一（1:1）：實體 A 的一個實例最多可以與實體 B 的一個實例關聯，反之亦然。 - 一對多（1:N）：實體 A 的一個實例可以與實體 B 的多個實例關聯，但實體 B 的一個實例只能與實體 A 的一個實例關聯。 - 多對多 (M:N)：實體 A 的多個實例可以與實體 B 的多個實例關聯，反之亦然。 在 ER 圖中，基數以特定的符號表示，例如單線表示一對一，帶箭頭的線表示一對多，兩端帶箭頭的線表示多對多關係。  模態 -- 模態是指一個實體實例的存在是否依賴它與另一個實體的關係。有兩種類型的模態： - 部分模態：實例的存在不依賴它與另一個實體的關係。例如，客戶可以在沒有任何訂單的情況下存在。 - 總模態：實例的存在取決於它與另一個實體的關係。例如，沒有訂單，訂單項就不可能存在。 在 ER 圖中，模態使用特定的符號表示，例如單一條表示部分模態，雙條表示總模態。 --- 資料庫規範化簡介 -------- 資料庫規範化是組織資料庫中的資料以減少冗餘、最大限度地減少資料異常（插入、更新和刪除異常）並提高資料完整性的過程。它涉及將資料庫分解為較小的表，並根據特定規則或範式定義它們之間的關係。 資料庫規範化的主要目標是： - 消除冗餘資料 - 確保資料完整性 - 促進資料操作和維護 資料庫規範化有多種範式，每種都建立在前一種範式的基礎上。最常用的範式是： 1. 第一範式 (1NF) 2. 第二範式 (2NF) 3. 第三範式 (3NF) 1NF（資料庫規範化第一範式） --------------- 第一範式（1NF）是最基本的規範化形式。它規定表中的屬性（列）必須具有原子值，這意味著表中的每個單元格應包含單一值，而不是一組值。 例如，假設一個表格具有名為「PhoneNumbers」的資料列，該資料列儲存客戶的多個電話號碼。這違反了 1NF，因為該列包含一組值而不是單一值。為了符合 1NF，您需要將電話號碼分成單獨的列或為電話號碼建立單獨的表。 ``` -- Violates 1NF CREATE TABLE customers ( customer_id INT PRIMARY KEY, name VARCHAR(100), phone_numbers VARCHAR(200) -- Stores multiple phone numbers, violating 1NF ); -- Conforms to 1NF CREATE TABLE customers ( customer_id INT PRIMARY KEY, name VARCHAR(100), phone1 VARCHAR(20), phone2 VARCHAR(20), phone3 VARCHAR(20) ); ``` 2NF（資料庫規範化的第二範式） ---------------- 第二範式 (2NF) 建立在 1NF 的基礎上，解決了部分依賴問題。如果表屬於 1NF，且每個非主屬性（列）完全依賴整個主鍵，則該表屬於 2NF。 換句話說，如果一個表有一個複合主鍵（由多個列組成），那麼所有非鍵列必須依賴整個主鍵，而不僅僅是它的一部分。 例如，考慮一個具有複合主鍵`(student_id, course_id)`和列`grade`的表。如果`grade`欄位僅取決於`course_id` ，而不取決於`student_id`和`course_id`的組合，則該表違反了 2NF。 ``` -- Violates 2NF CREATE TABLE student_courses ( student_id INT, course_id INT, course_name VARCHAR(100), grade CHAR(2), -- Depends only on course_id, not the entire primary key PRIMARY KEY (student_id, course_id) ); -- Conforms to 2NF CREATE TABLE student_courses ( student_id INT, course_id INT, grade CHAR(2), PRIMARY KEY (student_id, course_id) ); CREATE TABLE courses ( course_id INT PRIMARY KEY, course_name VARCHAR(100) ); ``` 3NF（資料庫規範化的第三範式） ---------------- 第三範式 (3NF) 建立在 2NF 的基礎上，解決了傳遞依賴問題。如果表屬於 2NF，且每個非主屬性都非傳遞依賴於主鍵，則該表屬於 3NF。 換句話說，如果一個非鍵列依賴另一個非鍵列，那麼該表就違反了 3NF，並且非鍵列應該分離到它們自己的表中。 例如，考慮一個包含`student_id` 、 `student_name` 、 `class_id`和`class_name`欄位的表。 `student_name`欄位取決於`student_id` ，而`class_name`欄位取決於`class_id` 。但是， `class_name`欄位也透過`class_id`欄位傳遞依賴`student_id` 。這違反了 3NF。 ``` -- Violates 3NF CREATE TABLE student_classes ( student_id INT, student_name VARCHAR(100), class_id INT, class_name VARCHAR(100), PRIMARY KEY (student_id, class_id) ); -- Conforms to 3NF CREATE TABLE students ( student_id INT PRIMARY KEY, student_name VARCHAR(100) ); CREATE TABLE classes ( class_id INT PRIMARY KEY, class_name VARCHAR(100) ); CREATE TABLE student_classes ( student_id INT, class_id INT, PRIMARY KEY (student_id, class_id), FOREIGN KEY (student_id) REFERENCES students(student_id), FOREIGN KEY (class_id) REFERENCES classes(class_id) ); ``` 透過遵循資料庫規範化的原則，您可以建立結構良好且高效的資料庫，從而最大限度地減少冗餘、保持資料完整性並促進資料操作和維護。 --- 索引（聚集索引、非聚集索引、複合索引） ------------------- 索引是提高資料庫中資料檢索操作效能的資料結構。它們在表中建立資料的排序表示，從而允許更快的搜尋和查詢。索引有幾種類型： - **聚集索引**：聚集索引根據索引鍵值對表中的行進行實體重新排序。每個表只能有一個聚集索引。 - **非聚集索引**：非聚集索引是一個單獨的物件，其中包含索引鍵值和指向表中相應行的指標。一個表可以有多個非聚集索引。 - **複合索引**：複合索引是索引鍵中包含多個欄位的索引。它可以是集群的，也可以是非集群的。 ``` -- Clustered index CREATE CLUSTERED INDEX idx_customers_name ON customers (last_name, first_name); -- Nonclustered index CREATE NONCLUSTERED INDEX idx_orders_date ON orders (order_date); -- Composite index CREATE INDEX idx_products_category_price ON products (category_id, price); ``` 資料類型 ---- 在資料庫領域，資料類型就像是保存特定類型資訊的不同形狀的容器。就像您不會將液體儲存在籃子中或將固體物體儲存在罐子中一樣，資料庫需要強制執行特定的資料類型以確保資料的完整性和一致性。 SQL 中的一些常見資料類型包括： - `INT`或`INTEGER` ：儲存整數，例如`42`或`17` 。 - `FLOAT`或`DOUBLE` ：儲存十進制數，例如`3.14159`或`0.00005` 。 - `VARCHAR`或`TEXT` ：儲存文字資料，例如名稱或描述。 - `DATE`或`DATETIME` ：儲存日期和時間值，例如`'2023-05-06'`或`'2024-01-01 12:34:56'` 。 - `BOOLEAN` ：儲存真/假值，例如`1` （真）或`0` （假）。 選擇正確的資料類型至關重要，因為它會影響資料的儲存、查詢和操作方式。例如，嘗試在`INT`列中儲存大字串會導致錯誤或資料截斷。 ``` CREATE TABLE users ( id INT PRIMARY KEY, name VARCHAR(50) NOT NULL, age INT, is_active BOOLEAN DEFAULT 1 ); ``` 在此範例中，我們建立一個`users`表，其中包含`id` （整數）、 `name` （最多 50 個字元的字串）、 `age` （整數）和`is_active` （布林值，預設值為`1`或 true）欄位。 --- 連接簡介 ---- 連接就像連接資料庫中不同表的橋樑，允許您組合和檢索來自多個來源的相關資料。它們是關係資料庫中的基本概念，對於有效查詢和操作資料至關重要。  內部聯接 ---- 內部聯結就像兩個表之間的友好握手，其中只有在兩個表中具有匹配值的行才會包含在結果集中。這是一種基於公共列或列集組合多個表中的資料的方法。 ``` SELECT users.name, orders.order_date FROM users INNER JOIN orders ON users.id = orders.user_id; ``` 在這個範例中，我們從`users`表中檢索`name`列，從`orders`表中檢索`order_date`列，但僅限於`users`表中的`id`與`orders`表中的`user_id`相符的行。 3 個表上的內連接（範例） ------------- 假設我們有三個表： `users` 、 `orders`和`products` 。我們想要檢索每個訂單的使用者名稱、訂單日期和產品名稱。我們可以透過在所有三個表之間執行內部聯結來實現這一點： ``` SELECT users.name, orders.order_date, products.product_name FROM users INNER JOIN orders ON users.id = orders.user_id INNER JOIN products ON orders.product_id = products.id; ``` 在這裡，我們首先在`id`和`user_id`列上連接`users`和`orders`表。然後，我們將該連接的結果與`products`表的`product_id`和`id`列連接起來。這樣，我們可以在單一查詢中從所有三個表中檢索資料，但僅限於滿足連接條件的行。 外連接簡介 ----- 內部連接就像友好的握手，而外部連接更像是歡迎的擁抱。它們不僅包括兩個表中的匹配行，還包括一個或兩個表中的不匹配行，具體取決於外連接的類型。 右外連接 ---- 右外連接就像從右表到左表的溫暖擁抱。它包括右表中的所有行以及左表中的匹配行。如果左表中沒有符合的行，則結果將包含左表列的`NULL`值。 ``` SELECT users.name, orders.order_date FROM users RIGHT OUTER JOIN orders ON users.id = orders.user_id; ``` 在此範例中，我們從`orders`表（右表）中檢索所有行，以及`users`表（左表）中的符合`name`值。如果訂單沒有符合的用戶，則`name`列將包含`NULL` 。 JOIN 與 NOT NULL 列 ----------------- 有時，您可能只想對不為空的列執行聯接。當您想要從結果集中排除缺少資料的行時，這會很有用。 ``` SELECT users.name, orders.order_date FROM users INNER JOIN orders ON users.id = orders.user_id AND users.name IS NOT NULL; ``` 在此範例中，我們在`users`和`orders`表之間執行內部聯接，但我們新增了一個附加條件`users.name IS NOT NULL`以確保結果集中僅包含具有非空`name`值的行。 跨 3 個表的外連接 ---------- 與內連接範例類似，我們可以跨多個表執行外連接。假設我們想要檢索所有訂單以及使用者名稱和產品名稱，即使`users`或`products`表中缺少值。 ``` SELECT users.name, orders.order_date, products.product_name FROM orders LEFT OUTER JOIN users ON orders.user_id = users.id LEFT OUTER JOIN products ON orders.product_id = products.id; ``` 在這裡，我們從`orders`表開始，並對`users`和`products`表執行左外連接。這可確保所有訂單以及符合的使用者名稱和產品名稱（如果可用）都包含在結果集中。如果`users`或`products`表中沒有符合的行，則對應的列將包含`NULL`值。 別名 -- 別名就像 SQL 查詢中表格或欄位的暱稱。它們可以使查詢更具可讀性和更容易理解，特別是在處理長表或列名時，或在查詢中多次引用同一個表時。 ``` SELECT u.name, o.order_date, p.product_name FROM users u INNER JOIN orders o ON u.id = o.user_id INNER JOIN products p ON o.product_id = p.id; ``` 在此範例中，我們對`users`表使用別名`u` ，對`orders`表使用別名`o` ，對`products`表使用`p` 。這使得查詢更加簡潔且更易於閱讀，而不必多次重複完整的表名稱。 自加入 --- 自連結就像一張表在與自己對話。這是一種根據同一個表中的特定條件或關係將表與其自身連接的方法。這在處理分層或遞歸資料結構（例如員工-經理關係或巢狀類別）時非常有用。 ``` SELECT e.name AS employee, m.name AS manager FROM employees e LEFT OUTER JOIN employees m ON e.manager_id = m.id; ``` 在此範例中，我們對`employees`表執行自聯接以檢索每位員工的姓名及其對應經理的姓名。我們使用左外連接來確保所有員工都包含在結果集中，即使他們沒有指派經理。 --- 資料庫標記語言 (DBML) -------------- 資料庫建模語言（DBML）是一種簡單直觀的標記語言，用於描述關係型資料庫的結構。它提供了一種人類可讀的方式來定義表、列、關係和約束，從而使資料庫設計方面的溝通和協作變得輕鬆。 **DBML 入門** 要開始使用 DBML，您需要一個文字編輯器並對資料庫概念有基本的了解。讓我們建立第一個 DBML 檔案： ``` // my_database.dbml Table users { id int [pk, increment] username varchar email varchar [unique] created_at datetime [default: `now()`] } ``` 在這個範例中，我們定義了一個`users`表，其中包含`id` 、 `username` 、 `email`和`created_at`列。 `[pk]`標記指定`id`為主鍵， `[increment]`表示自動遞增， `[unique]`確保`email`的唯一性， `[default:` now() `]`將`created_at`的預設值設為目前時間戳記。 **建立表** DBML 可讓您在單一檔案中定義多個表格及其列。讓我們為資料庫新增更多表： ``` // my_database.dbml Table users { id int [pk, increment] username varchar email varchar [unique] created_at datetime [default: `now()`] } Table posts { id int [pk, increment] title varchar content text user_id int [ref: > users.id] created_at datetime [default: `now()`] } ``` 在這個範例中，我們新增了一個`posts`表，其中包含`id` 、 `title` 、 `content` 、 `user_id`和`created_at`欄位。 `[ref: > users.id]`標籤在`posts`表中的`user_id`欄位和`users`表中的`id`列之間建立外鍵關係。 **定義關係** DBML 支援表之間各種類型的關係，包括一對一、一對多和多對多。讓我們在資料庫中定義一些關係： ``` // my_database.dbml Table users { id int [pk, increment] username varchar email varchar [unique] created_at datetime [default: `now()`] } Table posts { id int [pk, increment] title varchar content text user_id int [ref: > users.id] created_at datetime [default: `now()`] } Ref: users.id < posts.user_id ``` 在此範例中，我們定義了`users`和`posts`表之間的一對多關係。 `Ref: users.id < posts.user_id`行指定`users`表中的`user_id`欄位引用`posts`表中的`id`列。 **新增約束** 約束確保資料完整性並在資料庫上強制執行規則。 DBML 支援各種約束，例如主鍵、外鍵、唯一約束和預設值。讓我們在表格中加入一些約束： ``` // my_database.dbml Table users { id int [pk, increment] username varchar [unique] email varchar [unique] created_at datetime [default: `now()`] } Table posts { id int [pk, increment] title varchar content text user_id int [ref: > users.id] created_at datetime [default: `now()`] } Ref: users.id < posts.user_id ``` 在此更新的範例中，我們為`users`表中的`username`名列新增了`[unique]`約束，以確保每個使用者名稱都是唯一的。 **記錄您的資料庫** DBML 可讓您為資料庫模式新增註解和註釋，使其更易於理解和維護。讓我們用註釋來記錄我們的表格： ``` // my_database.dbml Table users { id int [pk, increment] // Unique identifier for users username varchar [unique] // User's username email varchar [unique] // User's email address created_at datetime [default: `now()`] // Date and time when the user was created } Table posts { id int [pk, increment] // Unique identifier for posts title varchar // Title of the post content text // Content of the post user_id int [ref: > users.id] // ID of the user who created the post created_at datetime [default: `now()`] // Date and time when the post was created } Ref: users.id < posts.user_id // Relationship between users and posts ``` **DBML 的好處** - 簡單且人類可讀的語法 - 與資料庫無關的方法 - [dbdiagram.io](dbdiagram.io)上的免費視覺化工具 - 一致的可讀性和可維護性約定 - 豐富的文件和範例 --- 結論 -- 總而言之，關聯式資料庫設計構成了現代應用程式中高效能資料組織的支柱。了解其原理使您能夠建立強大且可擴展的資料庫。接下來，我們將深入研究 SQL 語法，釋放與資料庫有效互動的能力。請繼續關注我們對 SQL 世界的探索！ --- 原文出處：https://dev.to/louaiboumediene/mastering-relational-database-design-a-comprehensive-guide-3jh8
今天，我們將介紹 30 個或更多可以使用 AI 建置的專案。 所有專案都是開源的，因此您可以做出貢獻以使其變得更好。 有些專案可能擁有龐大的程式碼庫，但您可以從中獲得靈感並建立一個很酷的副專案。 相信我，如果這個清單沒有讓你感到驚訝，那麼沒有什麼會讓你感到驚訝:) 讓我們開始吧！  --- 1. [CopilotKit](https://go.copilotkit.ai/Anmol) - 在數小時內為您的產品提供 AI Copilot。 -------------------------------------------------------------------------- [](https://github.com/CopilotKit/CopilotKit) 將 AI 功能整合到 React 中是很困難的，這就是 Copilot 的用武之地。一個簡單快速的解決方案，可將可投入生產的 Copilot 整合到任何產品中！ 您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui ``` Copilot Portal 是 CopilotKit 提供的元件之一，CopilotKit 是一個應用程式內人工智慧聊天機器人，可查看目前應用狀態並在應用程式內採取操作。它透過插件與應用程式前端和後端以及第三方服務進行通訊。 這就是整合聊天機器人的方法。 `CopilotKit`必須包裝與 CopilotKit 互動的所有元件。建議您也開始使用`CopilotSidebar` （您可以稍後切換到不同的 UI 提供者）。 ``` "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; export default function RootLayout({children}) { return ( <CopilotKit url="/path_to_copilotkit_endpoint/see_below"> <CopilotSidebar> {children} </CopilotSidebar> </CopilotKit> ); } ``` 您可以使用此[快速入門指南](https://docs.copilotkit.ai/getting-started/quickstart-backend)設定 Copilot 後端端點。 之後，您可以讓 Copilot 採取行動。您可以閱讀如何提供[外部上下文](https://docs.copilotkit.ai/getting-started/quickstart-chatbot#provide-context)。您可以使用`useMakeCopilotReadable`和`useMakeCopilotDocumentReadable`反應掛鉤來執行此操作。 ``` "use client"; import { useMakeCopilotActionable } from '@copilotkit/react-core'; // Let the copilot take action on behalf of the user. useMakeCopilotActionable( { name: "setEmployeesAsSelected", // no spaces allowed in the function name description: "Set the given employees as 'selected'", argumentAnnotations: [ { name: "employeeIds", type: "array", items: { type: "string" } description: "The IDs of employees to set as selected", required: true } ], implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds), }, [] ); ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)並查看[演示影片](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file#demo)。 您可以輕鬆整合 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 供應商。您可以按照本[指南](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)將聊天機器人整合到您的應用程式中。 基本概念是在幾分鐘內建立可用於基於 LLM 的應用程式的 AI 聊天機器人。 用例是巨大的，作為開發人員，我們絕對應該在下一個專案中嘗試使用 CopilotKit。 CopilotKit 在 GitHub 上擁有超過 5700 顆星，發布了 200 多個版本，這意味著它們不斷改進。 https://go.copilotkit.ai/Anmol Star CopilotKit ⭐️ --- 2. [AgentGPT](https://github.com/reworkd/AgentGPT) - 組裝、配置和部署自主 AI 代理程式。 ------------------------------------------------------------------------  AgentGPT 可讓您設定和部署自主 AI 代理程式。 它將嘗試透過思考要完成的任務、執行任務並從結果中學習來實現目標:) 它是使用以下方式建構的： - 引導：create-t3-app + FastAPI-模板。 - 框架：Nextjs 13 + Typescript + FastAPI - 驗證：Next-Auth.js - ORM：Prisma 和 SQLModel。 - 資料庫：Planetscale。 - 樣式：TailwindCSS + HeadlessUI。 - 架構驗證：Zod + Pydantic。 - 法學碩士工具：Langchain。 開始使用本[指南](https://github.com/reworkd/AgentGPT?tab=readme-ov-file#getting-started-rocket)在本地安裝它。 您可以查看該應用程式的[演示](https://github.com/reworkd/AgentGPT?tab=readme-ov-file#-demo)並查看[即時網站](https://agentgpt.reworkd.ai/)。  他們在 GitHub 上擁有 29k+ 顆星，並且正在發布`v1`版本。 https://github.com/reworkd/AgentGPT 明星 AgentGPT ⭐️ --- 3.[私人 GPT](https://github.com/zylon-ai/private-gpt) - 無需網路即可詢問有關您文件的問題。 ------------------------------------------------------------------------  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 ⭐️ --- 4. [Instrukt](https://github.com/blob42/Instrukt) - 終端機中整合人工智慧。 ---------------------------------------------------------------  Instrukt是一個基於終端的AI整合環境。它提供了一個平台，用戶可以： - 建立並指導模組化人工智慧代理。 - 產生問答的文件索引。 - 建立工具並將其附加到任何代理程式。 用自然語言指導它們，並且為了安全起見，在安全容器（目前使用 Docker 實作）中執行它們，以在其專用的沙盒空間中執行任務。 使用`Langchain` 、 `Textual`和`Chroma`建構。 開始使用以下命令。 ``` pip install instrukt[all] ```  有許多令人興奮的功能，例如： - 基於終端的介面，讓強力鍵盤使用者無需離開鍵盤即可指示 AI 代理。 - 對您的資料建立索引並讓代理程式檢索它以進行問答。您可以使用簡單的 UI 建立和組織索引。 - 索引建立將自動偵測程式語言並相應地優化拆分/分塊策略。 - 在安全的 Docker 容器內執行代理程式以確保安全和隱私。 - 整合的 REPL-Prompt 可實現與代理程式的快速交互，以及用於開發和測試的快速回饋循環。 - 您可以使用自訂命令自動執行重複任務。它還具有內建的提示/聊天歷史記錄。 您可以閱讀有關所有[功能的](https://github.com/blob42/Instrukt?tab=readme-ov-file#features)資訊。 您可以閱讀[安裝指南](https://blob42.github.io/Instrukt/install.html)。 您還可以使用內建的 IPython 控制台來除錯和內省代理，這是一個簡潔的小功能。  Instrukt 已獲得 AGPL 許可證，這意味著任何人都可以將其用於任何目的。 可以肯定地說，Instrukt 是您觸手可及的終端人工智慧指揮官。 這是一個新專案，因此他們在 GitHub 上有大約 200 多顆星，但用例非常好。 https://github.com/blob42/Instrukt 舊指令 ⭐️ --- 5. [Mac 上的語音助理](https://github.com/chidiwilliams/GPT-Automator)- 您的語音控制 Mac 助理。 -------------------------------------------------------------------------------  您的語音控制 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 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 您可以在[Chidi 的部落格](https://chidiwilliams.com/posts/gpt-automator)上閱讀更多內容。 它更像是一個業餘專案，因此他們在 GitHub 上有大約 200 個 star，但它非常酷。 https://github.com/chidiwilliams/GPT-Automator 明星 GPT Automator ⭐️ --- 6. [Flowise](https://github.com/FlowiseAI/Flowise) - 拖放 UI 來建立您的客製化 LLM 流程。 ---------------------------------------------------------------------------  Flowise 是一款開源 UI 視覺化工具，用於建立客製化的 LLM 編排流程和 AI 代理程式。 開始使用以下 npm 指令。 ``` npm install -g flowise npx flowise start OR npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234 ``` 這就是整合 API 的方式。 ``` import requests url = "/api/v1/prediction/:id" def query(payload): response = requests.post( url, json = payload ) return response.json() output = query({ question: "hello!" )} ```  您可以閱讀[文件](https://docs.flowiseai.com/)。  雲端主機不可用，因此您必須使用這些[說明](https://github.com/FlowiseAI/Flowise?tab=readme-ov-file#-self-host)自行託管。 讓我們探討一些用例： - 假設您有一個網站（可以是商店、電子商務網站或部落格），並且您希望廢棄該網站的所有相關連結，並讓法學碩士回答您網站上的任何問題。您可以按照此[逐步教學](https://docs.flowiseai.com/use-cases/web-scrape-qna)來了解如何實現相同的目標。  - 您還可以建立一個自訂工具，該工具將能夠呼叫 Webhook 端點並將必要的參數傳遞到 Webhook 主體中。請依照本[指南](https://docs.flowiseai.com/use-cases/webhook-tool)使用 Make.com 建立 Webhook 工作流程。  還有許多其他用例，例如建立 SQL QnA 或與 API 互動。 FlowiseAI 在 GitHub 上擁有超過 27,500 個 Star，並擁有超過 10,000 個分叉，因此具有良好的整體比率。 https://github.com/FlowiseAI/Flowise 明星 Flowise ⭐️ --- 7. [Twitter Agent](https://github.com/ahmedbesbes/media-agent) - 從社群媒體抓取資料並使用 Langchain 與其聊天。 ---------------------------------------------------------------------------------------------  Media Agent 抓取 Twitter 和 Reddit 提交的內容，對其進行總結，並在互動式終端中與它們聊天。這麼酷的概念！ 您可以閱讀[說明](https://github.com/ahmedbesbes/media-agent?tab=readme-ov-file#run-the-app-locally)以在本地安裝它。 它是使用以下方式建構的： - Langchain 🦜 用於建構和撰寫法學碩士。 - ChromaDB 用於儲存向量（也稱為嵌入）並查詢它們以建立對話機器人。 - Tweepy 連接到您的 Twitter API 並提取推文和元資料。 - Praw 連接到 Reddit API。 - Rich 建造了一個很酷的終端 UX/UI。 - 管理依賴關係的詩。 一些很棒的功能： - 代表您從使用者帳戶清單或關鍵字清單中抓取推文/提交內容。 - 使用 OpenAI 嵌入推文/提交內容。 - 建立推文/提交內容的摘要並提供需要回答的潛在問題。 - 在推文之上打開聊天會話。 - 儲存對話及其元資料。 - 豐富的終端使用者介面和日誌記錄功能。 您可以觀看演示！ https://www.loom.com/share/f4954e7d34ef4b7b8491e2bf910e8521 它在 GitHub 上有近 100 顆星，並且不再維護。您可以用它來建造更好的東西。 https://github.com/ahmedbesbes/media-agent 明星 Twitter 代理商 ⭐️ --- 8. [GPT 遷移](https://github.com/joshpxyne/gpt-migrate)- 輕鬆將程式碼庫從一種框架或語言遷移到另一種框架或語言。 ----------------------------------------------------------------------------------  如果您曾經面臨將程式碼庫遷移到新框架或語言的痛苦，那麼這個專案適合您。 我想我們都同意我們在某個時候需要這個。您也可以使用工作流程來完成此操作，據我所知，Stripe 曾經將其整個 JS 程式碼庫轉換為 TS。 遷移是一個成本高、乏味且重要的問題。 不要盲目相信當前版本，請負責任地使用它。另請注意，成本可能會迅速增加，因為 GPT-Migrate 旨在編寫（並可能重寫）整個程式碼庫。 您可以使用 Poetry[安裝](https://github.com/joshpxyne/gpt-migrate?tab=readme-ov-file#-installation-using-poetry)它並了解[它的工作原理](https://github.com/joshpxyne/gpt-migrate?tab=readme-ov-file#-how-it-works)。 > 請注意。 GPT-Migrate 目前處於開發 alpha 階段，尚未準備好投入生產使用。例如，在相對簡單的基準測試中，它在約 50% 的時間內順利通過 Python 或 JavaScript 等「簡單」語言，並且在沒有人工幫助的情況下無法通過 C++ 或 Rust 等更複雜的語言。 您可以在這裡觀看演示！  他們在 GitHub 上有 6500+ 顆星，最後一次提交是 6 個月前，所以我認為它不再被維護了！ https://github.com/joshpxyne/gpt-migrate 明星 GPT 遷移 ⭐️ --- 9. [Plandex](https://github.com/plandex-ai/plandex) - 用於使用法學碩士建置複雜的真實世界軟體的人工智慧編碼引擎。 -----------------------------------------------------------------------------------  Plandex 使用長時間執行的代理程式來完成跨多個檔案且需要多個步驟的任務。它將大任務分解為更小的子任務，然後實現每個子任務，一直持續到完成工作為止。 它可以幫助您處理積壓的工作，使用不熟悉的技術，擺脫困境，並花更少的時間在無聊的事情上。 您可以在這裡查看演示！ https://vimeo.com/926634577 變更會累積在受保護的沙箱中，以便您可以在自動將它們套用到專案文件之前查看它們。內建版本控制可讓您輕鬆返回並嘗試不同的方法。分支允許您嘗試多種方法並比較結果。 您可以在終端機中有效地管理上下文。輕鬆將檔案或整個目錄新增至上下文中，並在工作時自動更新它們，以便模型始終具有專案的最新狀態。 Plandex 依賴 OpenAI API，並且需要`OPENAI_API_KEY`環境變數。 Plandex 支援 Mac、Linux、FreeBSD 和 Windows。它從沒有依賴關係的單一二進位檔案執行。 您甚至可以嘗試不同的模型和模型設置，然後比較結果。 您可以閱讀[安裝說明](https://github.com/plandex-ai/plandex?tab=readme-ov-file#install)。 Plandex Cloud 是使用 Plandex 最簡單、最可靠的方式。當您使用 plandex new 建立第一個計劃時，系統會提示您開始匿名試用（無需電子郵件）。試用帳戶僅限 10 個計劃，每個計劃有 10 個 AI 模型回复。 Plandex Cloud 帳戶目前是免費的，這是一件好事。 Plandex 在 GitHub 上擁有 8k+ 顆星，並使用 Go 建造。 https://github.com/plandex-ai/plandex 明星PLandex ⭐️ --- 10. [SQL Translator](https://github.com/whoiskatrin/sql-translator) - 使用人工智慧將自然語言查詢轉換為 SQL 程式碼的工具。 --------------------------------------------------------------------------------------------------  我試圖建立一個類似的專案，發現它已經存在。 該工具旨在讓任何人都可以輕鬆地將 SQL（結構化查詢語言）命令轉換為自然語言，反之亦然。 SQL 是一種用於管理和操作關聯式資料庫中的資料的程式語言，雖然它是一個強大的工具，但它也可能非常複雜且難以理解。 另一方面，自然語言是我們在日常生活中說和寫的語言，對於不熟悉技術術語的人來說，它通常是首選的溝通方式。 透過 SQL 和自然語言翻譯器，您無需成為 SQL 專家即可了解資料庫中發生的情況或編寫 SQL 查詢。您只需用自然語言輸入查詢即可取得對應的 SQL 程式碼，反之亦然。 其中一些功能是： - 深色模式。 - 小寫/大寫切換。 - 複製到剪貼簿。 - SQL 語法高亮。 - 模式意識（測試版）。 - 查詢歷史記錄。 你可以閱讀 [安裝說明](https://github.com/whoiskatrin/sql-translator?tab=readme-ov-file#%EF%B8%8F-installation)，它非常簡單，因為它使用 Nextjs。 此查詢適合您。哈哈！  SQL Translator 在 GitHub 上有 4k star，是使用 TypeScript 建構的。 https://github.com/whoiskatrin/sql-translator 明星 SQL 翻譯機 ⭐️ --- 11. [WingmanAI](https://github.com/e-johnstonn/wingmanAI) - 音訊即時轉錄，與 ChatGPT 整合。 --------------------------------------------------------------------------------  WingmanAI 是一款功能強大的工具，可與系統和麥克風音訊的即時轉錄進行互動。該工具由 ChatGPT 提供支援，可讓您與腳本即時交互，作為機器人的廣泛記憶體基礎，提供獨特的通訊平台。 當您載入指定人員的記錄時，機器人可以回答有關過去對話的問題。 您可以閱讀[安裝說明](https://github.com/e-johnstonn/wingmanAI?tab=readme-ov-file#installation)。 您可以在這裡觀看演示！  一些簡潔的功能是： - WingmanAI 可以轉錄系統輸出和麥克風輸入音頻，讓您以易於閱讀的格式查看即時轉錄。 - 您可以與 ChatGPT 支援的機器人聊天，該機器人會即時讀取您的文字記錄。 - 機器人以令牌有效的方式維護對話記錄，因為只有當前的文字區塊會傳遞給機器人。 - WingmanAI 讓您可以保存成績單以供將來使用。您可以稍後隨時加載它們，並且對機器人進行的任何查詢都將與保存的轉錄本的向量資料庫交叉引用，從而為機器人提供更豐富的上下文。 - 您可以繼續附加到已儲存的記錄中，隨著時間的推移建立一個龐大的資料庫供機器人從中提取。 它在 GitHub 上有 420 個星，並且不再維護。 https://github.com/e-johnstonn/wingmanAI 明星 WingmanAI ⭐️ --- 12. [Lively](https://github.com/rocksdanister/lively) - 允許使用者設定動畫桌面桌布和螢幕保護程式。 -----------------------------------------------------------------------------  這只是為了好玩，我們可以使用程式碼學到很多關於它是如何完成的。 你可以看看這個[影片](https://www.pexels.com/video/blue-texture-abstract-leaves-7710243/)，看看它看起來有多瘋狂。  他們提供[三種類型的壁紙，](https://github.com/rocksdanister/lively?tab=readme-ov-file#types-of-wallpapers)包括影片/GIF、網頁和應用程式/遊戲。 它基於 C# 和 live 支援的一些很酷的功能建置： 1. Lively 可以透過終端機的[命令列參數](https://github.com/rocksdanister/lively/wiki/Command-Line-Controls)進行控制。您可以將其與其他語言（例如 Python 或腳本軟體 AutoHotKey）整合。 2. 一組強大的[API](https://github.com/rocksdanister/lively/wiki/API) ，供開發人員建立互動式壁紙。取得硬體讀數、音訊圖表、音樂資訊等。 3. 當電腦上執行全螢幕應用程式/遊戲時（~0% CPU、GPU 使用率），桌布播放會暫停。 4. 您還可以利用[機器學習推理](https://github.com/rocksdanister/lively/wiki/Machine-Learning)來建立動態壁紙。您可以預測任何 2D 影像與相機的距離並產生類似 3D 的視差效果。酷：D 我見過很多人使用它，其中許多人甚至不知道它是開源的。 您可以使用[安裝程式](https://github.com/rocksdanister/lively/releases/download/v2.0.7.4/lively_setup_x86_full_v2074.exe)或透過[Microsoft Store](https://www.microsoft.com/store/productId/9NTM2QC6QWS7?ocid=pdpshare)下載它。 它是 2023 年 Microsoft Store 的獲勝者。 它在 GitHub 上擁有 13k+ Stars，有 60 個版本。 https://github.com/rocksdanister/lively 明星活潑 ⭐️ --- 13. [RestGPT](https://github.com/Yifan-Song793/RestGPT) - 基於 LM 的自主代理透過 RESTful API 控制應用程式。 -------------------------------------------------------------------------------------------  這項工作旨在建立一個基於大型語言模型的自主代理 RestGPT，以控制現實世界的應用程式，例如電影資料庫和音樂播放器。為了實現這一目標，我們將法學碩士與 RESTful API 連接起來，並解決規劃、API 呼叫和回應解析的實際挑戰。為了全面評估 RestGPT 的效能，我們提出了 RestBench，這是一個高品質的基準測試，由兩個真實場景和具有黃金解決方案路徑的人工註釋指示組成。 RestGPT採用迭代式從粗到精的線上規劃框架，並使用執行器呼叫RESTful API。以下是 RestGPT 的概述。  您可以閱讀[文件](https://github.com/Yifan-Song793/RestGPT?tab=readme-ov-file#data)以使用 RestBench 評估 RestGPT 的效能。 使用 TMDB 電影資料庫搜尋 Sofia Coppola 執導的電影數量的範例。  您可以閱讀康乃爾大學發表的程式碼研究論文： [RestGPT - Connecting Large Language Models with Real-World RESTful APIs](https://arxiv.org/abs/2306.06624) 。 他們在 GitHub 上有 1.2k Stars，雖然不是很大，但涵蓋了一個很好的用例。 https://github.com/Yifan-Song793/RestGPT 明星 RestGPT ⭐️ --- 14. [ChatFiles](https://github.com/guangzhengli/ChatFiles) - 上傳您的檔案並與其對話。 -------------------------------------------------------------------------  文件聊天機器人 — 多個文件，由 GPT / Embedding 提供支援。你可以上傳任何文件並與之對話，考慮到他們使用了另一個著名的開源專案，UI 非常好。 它在底層使用 Langchain 和[Chatbot-ui](https://github.com/mckaywrigley/chatbot-ui) 。使用 Nextjs、TypeScript、Tailwind 和 Supabase（向量 DB）建構。 如果您想了解該方法和技術架構，那麼就在這裡！  此環境僅用於試用，支援最大檔案大小為 10 MB，這是一個缺點，如果您想要更大的大小，則可以[在本機安裝](https://github.com/guangzhengli/ChatFiles?tab=readme-ov-file#how-to-run-locally)。 他們提供了您可以使用的[入門問題](https://github.com/guangzhengli/ChatFiles/blob/main/doc/Example.md)。您可以查看[現場演示](https://chatfile.vectorhub.org/)。 他們在 GitHub 上有 3k star，並且發布了`v0.3`版本。 https://github.com/guangzhengli/ChatFiles 明星 ChatFiles ⭐️ --- 15. [MindsDB](https://github.com/mindsdb/mindsdb) - 從企業資料客製化人工智慧的平台。 --------------------------------------------------------------------  MindsDB 是一個利用企業資料客製化人工智慧的平台。 透過 MindsDB，您可以利用資料庫、向量儲存或應用程式中的資料即時部署、服務和微調模型，以建立人工智慧驅動的應用程式 - 使用開發人員已知的通用工具。 借助 MindsDB 及其與資料來源和 AI/ML 框架的近[200 個集成](https://docs.mindsdb.com/integrations/data-overview)，任何開發人員都可以使用其企業資料更快、更安全地自訂符合其目的的 AI。  您可以閱讀[文件](https://docs.mindsdb.com/)和[快速入門指南](https://docs.mindsdb.com/quickstart-tutorial)來開始使用。 目前，他們總共支援[3 個使用 Mongo-QL、Python 和 JavaScript 的 SDK](https://docs.mindsdb.com/sdks/overview) 。 MindsDB 有多種應用程式，例如與眾多資料來源和 AI 框架集成，因此您可以輕鬆地將資料和 AI 結合在一起以建立和自動化自訂工作流程。 其他常見用例包括微調模型、聊天機器人、警報系統、內容生成、自然語言處理、分類、回歸和預測。閱讀有關[用例的](https://docs.mindsdb.com/use-cases/)更多訊息，每個用例都有一個包含一些資訊的架構圖。  例如，MindsDB 的聊天機器人架構圖。您可以閱讀提供的所有[解決方案](https://github.com/mindsdb/mindsdb?tab=readme-ov-file#-get-started)及其 SQL 查詢範例。 ``` // SQL Query Example for Chatbot CREATE CHATBOT slack_bot USING database='slack',agent='customer_support'; ```  只是為了告訴您總體的可能性，您可以查看[如何使用 AI + IoT 感測器資料預測氣溫](https://mindsdb.com/blog/how-to-forecast-air-temperatures-with-ai-iot-sensor-data)。令人興奮的權利:)  他們在 GitHub 上擁有超過 21k 個 star，並且在`v24.4.3.0`上有超過 200 個版本。順便說一句，這是我第一次在任何版本中看到 4 個部分，因為我一直遵循語義版本。 https://github.com/mindsdb/mindsdb 明星 MindsDB ⭐️ --- 16. [Quivr](https://github.com/QuivrHQ/quivr) - 你的 GenAI 第二腦。 -------------------------------------------------------------  Quivr，您的第二個大腦，利用 GenerativeAI 的力量成為您的私人助理！可以將其視為黑曜石，但增強了人工智慧功能。  您可以閱讀[安裝指南](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#getting-started-)。 您可以閱讀[文件](https://docs.quivr.app/home/intro)並觀看[示範影片](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#demo-highlights-)。 他們可以提供更好的免費套餐，但這足以在您端進行測試。 它在 GitHub 上擁有超過 30k 顆星，發布了 220 多個版本，這意味著它們正在不斷改進。 https://github.com/QuivrHQ/quivr 明星 Quivr ⭐️ --- 17.[動畫繪畫](https://github.com/facebookresearch/AnimatedDrawings)- 一種將兒童人物繪畫動畫化的方法。 ---------------------------------------------------------------------------------  我的意思是哇！這麼酷的概念。我不知道你怎麼想，但我真的很興奮。 這是 Facebook 的一個開源專案，主要用於研究目的，包含論文《 [A Method for Animating Children's Drawings of the Human Figure》](https://dl.acm.org/doi/10.1145/3592788)中描述的演算法的實作。 該專案已在 macOS Ventura 13.2.1 和 Ubuntu 18.04 上進行了測試。如果您在其他作業系統上安裝，則可能會遇到問題。 他們強烈建議在安裝 Animated Drawings 之前啟動 Python 虛擬環境。 閱讀有關[安裝說明](https://github.com/facebookresearch/AnimatedDrawings?tab=readme-ov-file#installation)以及如何快速入門的更多資訊。 您可以按照這個完整的指南來為[您的繪圖製作動畫](https://github.com/facebookresearch/AnimatedDrawings?tab=readme-ov-file#animating-your-own-drawing)，包括如何在場景中加入多個角色、加入背景圖像以及更多令人興奮的事情。 他們在 GitHub 上擁有超過 10k 顆星，並且僅用於具有 MIT 許可的研究目的。 https://github.com/facebookresearch/AnimatedDrawings 明星動畫繪圖 ⭐️ --- 18.[背景移除器](https://github.com/nadermx/backgroundremover)- 讓您可以透過簡單的 CLI 使用 AI 從影像和影片中移除背景。 ------------------------------------------------------------------------------------------  這是一個使用 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/)。 > 輸入與輸出。  他們在 GitHub 上有 6k star，我們絕對可以用它來學習一些重要的概念。 https://github.com/nadermx/backgroundremover 明星背景去除器 ⭐️ --- 19. [Lobe Chat](https://github.com/lobehub/lobe-chat) - 現代設計的法學碩士/人工智慧聊天框架。 ---------------------------------------------------------------------------  一個開源、現代設計的 ChatGPT/LLM UI/框架。 支援語音合成、多模式和可擴展（函數呼叫）插件系統。您可以一鍵部署您的私有 OpenAI。  讓我們來看看 LobeChat 的一些令人興奮的功能： ✅ 多模式服務提供者支援。  他們將我們的支援擴展到多個模型服務提供者，而不是局限於單一服務提供者，為用戶提供更多樣化和豐富的對話選擇。 尋找他們支援的[10 多個模型服務提供者](https://lobehub.com/docs/usage/features/multi-ai-providers)的完整清單。 ✅ 市場助理。  在LobeChat的[助手市場](https://lobehub.com/assistants)中，創作者可以發現一個充滿活力和創新的社區，匯集了許多精心設計的助手。這些助手不僅在工作場景中發揮著至關重要的作用，而且在學習過程中也提供了極大的便利。在這裡，每個人都可以貢獻自己的智慧，分享自己開發的助手。  那裡有很多很棒的應用程式。哇！ ✅ 模型視覺辨識。  LobeChat現在支援OpenAI的gpt-4-vision、Google Gemini Pro Vision、Zhipu GLM-4 Vision等具有視覺辨識能力的大型語言模型，使LobeChat具備多模態互動能力。用戶可以輕鬆地將圖片上傳或拖放到聊天框中，助理將能夠辨識圖片內容並據此進行智慧對話，打造更聰明、更多樣化的聊天場景。 ✅ 文字到圖像生成。  LobeChat 支援最新的文字到圖像生成技術，現在允許使用者在與助手對話時直接使用文字到圖像工具。透過利用 DALL-E 3、MidJourney 和 Pollinations 等 AI 工具的功能，助手現在可以將您的想法轉化為圖像。 ✅ 本地大語言模型 (LLM) 支援。  借助 Ollama AI 強大的基礎設施和社區的協作努力，現在您可以在 LobeChat 中與本地 LLM（大型語言模型）進行對話！ 透過執行以下 Docker 指令，您可以在 LobeChat 中體驗與本機 LLM 的對話。 ``` docker run -d -p 3210:3210 -e OLLAMA_PROXY_URL=http://host.docker.internal:11434/v1 lobehub/lobe-chat ``` ✅ 漸進式網頁應用程式 (PWA)。  他們採用了漸進式 Web 應用程式 PWA 技術，這是一種現代 Web 技術，可將 Web 應用程式提升到接近本機應用程式的體驗。透過 PWA，LobeChat 可以在桌面和行動裝置上提供高度優化的使用者體驗，同時保持輕量級和高效能的功能。 ✅ 自訂主題。  LobeChat在介面設計上非常注重個人化的使用者體驗，因此引入了靈活多樣的主題模式，包括白天的淺色模式和夜間的深色模式。 除了主題模式切換之外，我們還提供了一系列顏色自訂選項，讓使用者可以根據自己的喜好調整應用程式的主題顏色。 了解所有[功能和用例](https://lobehub.com/docs/usage/start)。 您可以自行託管或使用 docker 部署它。 lobe chat 的[生態系統](https://github.com/lobehub/lobe-chat/tree/main?tab=readme-ov-file#-ecosystem)提供了 4 個軟體包： `lobehub/ui` 、 `lobehub/icons` 、 `lobehub/tts`和`lobehub/lint` 。 他們還提供[插件市場](https://lobehub.com/plugins)，您可以在其中找到許多有用的插件，這些插件可用於引入新的函數呼叫，甚至是呈現訊息結果的新方法。如果你想開發自己的插件，請參考 wiki 中的[📘插件開髮指南](https://lobehub.com/docs/usage/plugins/development)。  您可以閱讀[文件](https://lobehub.com/docs/usage/start)。 您可以查看[現場演示](https://chat-preview.lobehub.com/chat)。它太酷了！  他們在 GitHub 上擁有超過 28k 顆星，發布了 500 多個版本。 https://github.com/lobehub/lobe-chat 星瓣聊天 ⭐️ --- 20.[微代理](https://github.com/aymenfurter/microagents)- 能夠自我編輯提示的代理。 ------------------------------------------------------------------  它是一個實驗框架，用於動態建立自我改進的代理來回應任務。 微代理代表了一種建立自我改進代理的新方法。小型的微服務大小（因此稱為微代理）代理是根據用戶分配給助手的任務動態生成的，評估其功能，並在成功驗證後存儲以供將來重用。 這使得跨聊天會話的學習成為可能，使系統能夠獨立推斷任務執行的方法。 這是使用`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://github.com/aymenfurter/microagents?tab=readme-ov-file#demo)。 他們在 GitHub 上有大約 700 顆星，值得一看。 https://github.com/aymenfurter/microagents 明星微代理 ⭐️ --- 21. [GPT-4 & LangChain](https://github.com/mayooear/gpt4-pdf-chatbot-langchain) - 用於大型 PDF 文件的 GPT4 和 LangChain 聊天機器人。 --------------------------------------------------------------------------------------------------------------------------  這可用於新的 GPT-4 API 來為多個大型 PDF 檔案建立 chatGPT 聊天機器人。 該系統是使用 LangChain、Pinecone、Typescript、OpenAI 和 Next.js 建構的。 LangChain 是一個簡化可擴展 AI/LLM 應用程式和聊天機器人開發的框架。 Pinecone 用作向量存儲，用於以文字格式儲存嵌入和 PDF，以便以後檢索類似文件。 您可以閱讀涉及複製、安裝依賴項和設定環境 API 金鑰的[開發指南](https://github.com/mayooear/gpt4-pdf-chatbot-langchain?tab=readme-ov-file#development)。 您可以觀看[YouTube 影片](https://www.youtube.com/watch?v=ih9PBGVVOO4)，了解如何遵循和使用它。 他們在 GitHub 上擁有 14k+ Stars，僅提交了 34 次。在您的下一個人工智慧應用程式中嘗試！ https://github.com/mayooear/gpt4-pdf-chatbot-langchain 明星 GPT-4 和 Langchain ⭐️ --- 22. [Buzz](https://github.com/chidiwilliams/buzz) - 在您的個人電腦上離線轉錄和翻譯音訊。 ----------------------------------------------------------------------  使用 OpenAI 的 Whisper 的強大功能在您的個人電腦上離線轉錄和翻譯音訊。 Buzz 甚至出現在[App Store](https://apps.apple.com/us/app/buzz-captions/id6446018936?mt=12&itsct=apps_box_badge&itscg=30200) 。取得 Buzz 的 Mac 原生版本，具有更簡潔的外觀、音訊播放、拖放匯入、文字記錄編輯、搜尋等功能。 您可以閱讀[安裝說明](https://chidiwilliams.github.io/buzz/docs/installation)。 令人興奮的功能： - 匯入音訊和視訊檔案並將文字記錄匯出為 TXT、SRT 和 VTT（演示）。 - 從電腦麥克風轉錄和翻譯為文字（資源密集且可能不是即時的。 - 它可在 Mac、Windows 和 Linux 上使用。 - 還有一個[CLI](https://chidiwilliams.github.io/buzz/docs/cli)選項。 在這裡查看演示！ https://www.loom.com/share/564b753eb4d44b55b985b8abd26b55f7 您可以閱讀[文件](https://chidiwilliams.github.io/buzz/docs)。 它們在 GitHub 上擁有近 10k star，並且自兩週前上次提交以來仍在維護中。 https://github.com/chidiwilliams/buzz 明星嗡嗡聲 ⭐️ --- 23. [Deepgram](https://github.com/deepgram) - 將語音 AI 建置到您的應用程式中。 ----------------------------------------------------------------  從新創公司到 NASA，Deepgram API 每天都用於轉錄和理解數百萬分鐘的音訊。快速、準確、可擴展且經濟高效。 它為開發人員提供語音到文字和音訊智慧模型。  儘管他們有免費增值模式，但免費套餐的限制足以讓您入門。 可視化效果更上一層樓。您可以檢查即時串流媒體回應或音訊檔案並比較音訊的智慧程度。   您可以閱讀[文件](https://developers.deepgram.com/docs/introduction)。 您也可以閱讀 Deepgram 撰寫的關於[如何將語音辨識新增至您的 React 和 Node.js 專案的範例部落格](https://deepgram.com/learn/how-to-add-speech-recognition-to-your-react-project)。 如果您想嘗試 API 來親自了解模型的靈活性，請查看他們的[API Playground](https://playground.deepgram.com/?smart_format=true&language=en&model=nova-2) 。 https://github.com/deepgram 明星 Deepgram ⭐️ --- 24. [OpenDevin](https://github.com/OpenDevin/OpenDevin) - 更少的程式碼，更多的內容。 -----------------------------------------------------------------------   這是一個開源專案，旨在複製 Devin，一名自主人工智慧軟體工程師，能夠執行複雜的工程任務並在軟體開發專案上與用戶積極協作。該計畫致力於透過開源社群的力量複製、增強和創新 Devin。 只是想讓你知道，這是在德文被介紹之前。 您可以閱讀帶有要求的[安裝說明](https://github.com/OpenDevin/OpenDevin?tab=readme-ov-file#installation)。 他們使用 LiteLLM，因此您可以使用任何基礎模型來執行 OpenDevin，包括 OpenAI、Claude 和 Gemini。 如果您想為 OpenDevin 做出貢獻，您可以查看 [演示](https://github.com/OpenDevin/OpenDevin/blob/main/README.md#opendevin-code-less-make-more)和[貢獻指南](https://github.com/OpenDevin/OpenDevin/blob/main/CONTRIBUTING.md)。 它在 GitHub 上擁有超過 10,700 個 Star，並且正在快速成長。 https://github.com/OpenDevin/OpenDevin 明星 OpenDevin ⭐️ --- 25. [NPM Copilot](https://github.com/whoiskatrin/npm-copilot) - Next.js 的 CLI 工具，可以即時分析日誌。 ------------------------------------------------------------------------------------------  npm/yarn/pnpm copilot 是一個命令列工具，它使用 OpenAI 的 GPT-3 語言模型來提供修復程式碼中錯誤的建議。 CLI 工具可偵測目前目錄中正在使用的專案類型和套件管理器。 然後，它執行適當的開發伺服器命令（例如，npm run dev、yarn run dev、pnpm run dev）並偵聽正在執行的應用程式產生的日誌。 當遇到錯誤時，CLI 工具會即時提供錯誤修復建議。 首先使用以下 npm 指令安裝 npm-copilot 套件。 ``` npm install -g npm-copilot ``` CLI 工具將開始監視 Next.js 應用程式產生的日誌，並即時提供錯誤修復建議。 您可以透過該命令在專案中使用它。 ``` npm-copilot ``` 他們在 GitHub 上有 338 顆星，支援`Next,js` 、 `React` 、 `Angular`和`Vue.js` https://github.com/whoiskatrin/npm-copilot 明星 NPM Copilot ⭐️ --- 26. [Mentat](https://github.com/AbanteAI/mentat) - 人工智慧編碼助理。 ------------------------------------------------------------  Mentat 是一款人工智慧工具，可直接從命令列幫助您完成任何編碼任務。 與 Copilot 不同，Mentat 協調多個位置和文件的編輯。與 ChatGPT 不同的是，Mentat 已經擁有您專案的上下文 - 無需複製和貼上！ 您可以觀看此演示以了解基本概述。 https://www.youtube.com/watch?v=lODjaWclwpY 如果需要協助，您可以閱讀[安裝說明](https://github.com/AbanteAI/mentat?tab=readme-ov-file#install)或觀看安裝[教學](https://www.youtube.com/watch?v=bVJP8hY8uRM)。 您可以閱讀[文件](https://github.com/AbanteAI/mentat?tab=readme-ov-file#-usage)。 他們在 GitHub 上有 2.3k 顆星，並且正在發布`v1`版本。 https://github.com/AbanteAI/mentat Star Mentat ⭐️ --- 27. [FlowGPT](https://github.com/nilooy/flowgpt) - 使用 AI 產生流程圖。 ---------------------------------------------------------------  FlowGPT是一個用ai（gpt-3.5）產生流程圖的工具。 它是使用 Next.js、Langchain、Mermaid 和 DaisyUI 建構的。 您可以閱讀[安裝說明](https://github.com/nilooy/flowgpt?tab=readme-ov-file#installation)。 你可以查看[gif 示範](https://github.com/nilooy/flowgpt?tab=readme-ov-file#flowgpt-is-a-tool-to-generate-flowchart-with-ai-gpt-35)。 它只有 11 次提交，但在 GitHub 上有 238 顆星，並且是使用 TypeScript 建置的。作為一個小專案值得一試。 https://github.com/nilooy/flowgpt Star FlowGPT ⭐️ --- 28. [reor](https://github.com/reorproject/reor) - 自組織人工智慧筆記應用程式。 ----------------------------------------------------------------  迄今為止我見過的最令人興奮的專案之一，特別是因為它在本地執行模型。 Reor 是一款基於人工智慧的桌面筆記應用程式：它會自動連結相關筆記、回答筆記上的問題並提供語義搜尋。 所有內容都儲存在本地，您可以使用類似黑曜石的 Markdown 編輯器來編輯筆記。該專案假設人工智慧思維工具預設應該在本地執行模型。 Reor 站在 Ollama、Transformers.js 和 LanceDB 等巨頭的肩膀上，使 LLM 和嵌入模型都可以在本地執行。也支援連接到 OpenAI 或 OpenAI 相容 API（例如 Oobabooga）。 > 我知道你想知道它怎麼可能是`self-organizing` ？ A。您寫的每個筆記都會被分塊並嵌入到內部向量資料庫中。 b.相關筆記透過向量相似度自動連接。 C。 LLM 支援的問答對筆記語料庫進行 RAG。 d.一切都可以進行語義搜尋。 您可以在這裡觀看演示！  將 Reor 視為一個帶有兩個生成器的 RAG 應用程式：LLM 和人類。在問答模式下，法學碩士會從語料庫中取得檢索到的上下文來幫助回答查詢。 類似地，在編輯器模式下，人們可以切換側邊欄以顯示從語料庫「檢索」的相關註釋。這是透過將當前筆記中的想法與語料庫中的相關想法交叉引用來「增強」您的想法的一種非常有效的方法。 您可以閱讀[文件](https://www.reorproject.org/docs)並從網站[下載](https://www.reorproject.org/)。 Mac、Linux 和 Windows 皆支援。 他們還提供了入門指南，以便幫助您入門。  它們在 GitHub 上有 4.2k 顆星，並使用 TypeScript 建置。 https://github.com/reorproject/reor 星標 reor ⭐️ --- 29. [Amica](https://github.com/semperai/amica) - 讓您在瀏覽器中輕鬆地與 3D 角色聊天。 ---------------------------------------------------------------------  Amica 是一個開源接口，用於透過語音合成和語音辨識與 3D 角色進行互動式通訊。 您可以匯入 VRM 文件，調整聲音以適合角色，並產生包含情緒表達的回應文字。 他們使用 Three.js、OpenAI、Whisper、Bakllava 等進行視覺處理。您可以閱讀[Amica 的工作原理](https://docs.heyamica.com/overview/how-amica-works)及其所涉及的[核心概念](https://docs.heyamica.com/overview/core-concepts)。 您可以克隆該存儲庫並使用它來[開始](https://docs.heyamica.com/getting-started/installation)。 ``` npm i npm run dev ``` 您可以閱讀[文件](https://docs.heyamica.com/)並查看[演示](https://amica.arbius.ai/)，這真是太棒了：D  您可以觀看這段簡短的影片，了解它的功能。 https://www.youtube.com/watch?v=hUxAEnFiXH8 Amica 使用 Tauri 建立桌面應用程式。 他們在 GitHub 上有 400+ Stars，而且看起來非常容易使用。 https://github.com/semperai/amica Star Amica ⭐️ --- 30.[繼續](https://github.com/continuedev/continue)- 使您能夠建立人工智慧軟體開發系統。 -------------------------------------------------------------------  繼續讓開發人員保持流動。我們的開源 VS Code 和 JetBrains 擴充功能可讓您輕鬆建立自己的模組化 AI 軟體開發系統並進行改進。 它們有很多很棒的功能，讓我們看看其中的一些： > 輕鬆理解程式碼部分。  > 選項卡可自動完成程式碼建議。  > 詢問有關您的程式碼庫的問題。  > 快速使用文件作為上下文。  > 立即了解終端錯誤。  > 使用斜槓指令開始操作。  > 重構您正在編碼的函數。  了解所有[功能](https://docs.continue.dev/how-to-use-continue)。 您必須從市場安裝[VSCode 擴展](https://marketplace.visualstudio.com/items?itemName=Continue.continue)，然後閱讀[快速入門指南](https://docs.continue.dev/quickstart)。 您可以閱讀[文件](https://docs.continue.dev/intro)。 它們在 GitHub 上擁有超過 10k 顆星，並使用 TypeScript 建置。 https://github.com/continuedev/continue 星繼續 ⭐️ --- 我從來沒有如此詳細地介紹過這麼多專案！ 我希望這能幫助您創造一些鼓舞人心的東西。 請分享更多專案或任何您想要其他人可以學習的內容！ 請關注 Copilotkit 以獲取更多此類內容。 https://dev.to/copilotkit --- 原文出處：https://dev.to/copilotkit/30-ai-libraries-you-can-use-for-your-next-project-ideas-5ded
開發者生態系統已經發展了很多，並且有許多開發者不知道的框架。 我們「作為開發人員」有很多關於如何建立我們的應用程式的框架選項。這些選擇非常重要。 讓我們介紹 15 個框架，供您製作下一個專案。我將提供詳細的資源，以便您可以學習其中的每一個。 相信我！這份清單就是您所需要的。 讓我們開始吧。  --- ### 庫與框架 在開始之前，讓我們先來了解一下框架與函式庫有何不同。開發人員可以互換使用它！ 函式庫和框架都是由其他人編寫的可重複使用程式碼。 > 簡單來說： 將圖書館想像成IKEA之旅。您家裡有自己的空間，但您需要一些家具幫助。您不想從頭開始，所以您可以前往宜家，在那裡您可以挑選您需要的東西。你是做出決定的人。 現在，框架更像是建造一個樣品房。您已經有了一套計劃以及一些佈局和設計的選擇。但最終，藍圖和建造者處於控制之中。他們會讓你知道在哪裡可以加入你的意見，但他們正在掌控一切。 > 從技術角度來說。 透過庫，您可以指導應用程式的流程。您決定何時何地使用庫的功能。但有了框架，框架就控制了流程。它為您提供了一些插入程式碼的位置，但它是程式碼執行時發號施令的地方。 我使用了 Freecodecamp 的這篇文章“ [框架和庫之間的區別](https://www.freecodecamp.org/news/the-difference-between-a-framework-and-a-library-bd133054023f/)”，特別是因為它的解釋很簡單。完整閱讀一下！ --- 1. [Wing](https://git.new/winlang-repo) - 一種雲端程式語言。 ---------------------------------------------------  Wing是一個旨在開發雲端應用程式的框架。 它允許您在雲端中建立應用程式，並且具有相當簡單的語法。 核心概念是您可以直接在應用程式中指定資源。 您可以執行本機模擬並使用 Winglang 控制台視覺化每個步驟中發生的情況。  你**程式碼**。**本地測試**。**編譯**。**部署到雲端提供者**。 Wing 需要 Node `v20 or higher` 。 建立一個父目錄（我們使用的是`shared-counter` ）並使用 Vite 使用新的 React 應用程式設定前端。您可以使用這個 npm 指令。 ``` npm create -y vite frontend --template react-ts // once installed, you can check if it's running properly. cd frontend npm install npm run dev ``` 您可以使用此 npm 命令安裝 Wing。 ``` npm install -g winglang ``` 您可以使用`wing -V`驗證安裝。 Wing 還提供官方[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=Monada.vscode-wing)和[IntelliJ](https://plugins.jetbrains.com/plugin/22353-wing) ，後者提供語法突出顯示、補全、轉到定義和嵌入式 Wing 控制台支援。您可以在建立應用程式之前安裝它！ 您可以使用 Wing 作為雲端後端來建立任何全端應用程式。 建立後端目錄。 ``` mkdir ~/shared-counter/backend cd ~/shared-counter/backend ``` 建立一個新的空 Wing 專案。 ``` wing new empty // This will generate three files: package.json, package-lock.json and main.w file with a simple "hello world" program wing it // to run it in the Wing simulator // The Wing Simulator will be opened in your browser and will show a map of your app with a single function. //You can invoke the function from the interaction panel and check out the result. ``` 使用指令`wing new empty`後的結構如下。 ``` bring cloud; // define a queue, a bucket, and a counter let bucket = new cloud.Bucket(); let counter = new cloud.Counter(initial: 1); let queue = new cloud.Queue(); // When a message is received in the queue -> it should be consumed // by the following closure queue.setConsumer(inflight (message: str) => { // Increment the distributed counter, the index variable will // store the value before the increment let index = counter.inc(); // Once two messages are pushed to the queue, e.g. "Wing" and "Queue". // Two files will be created: // - wing-1.txt with "Hello Wing" // - wing-2.txt with "Hello Queue" bucket.put("wing-{index}.txt", "Hello, {message}"); log("file wing-{index}.txt created"); }); ``` 您可以安裝`@winglibs/vite`來啟動開發伺服器，而不是使用`npm run dev`來啟動本機 Web 伺服器。 ``` // in the backend directory npm i @winglibs/vite ``` 您可以使用`backend/main.w`中提供的 publicEnv 將資料傳送到前端。 讓我們來看一個小例子。 ``` // backend/main.w bring vite; new vite.Vite( root: "../frontend", publicEnv: { TITLE: "Wing + Vite + React" } ); // import it in frontend // frontend/src/App.tsx import "../.winglibs/wing-env.d.ts" //You can access that value like this. <h1>{window.wing.env.TITLE}</h1> ``` 你還可以做更多： - 讀取/更新 API 路線並使用 Wing Simulator 檢查它。 - 使用後端獲取值。 - 使用`@winglibs/websockets`來同步瀏覽器，在後端部署一個 WebSocket 伺服器，你可以連接這個 WebSocket 來接收即時通知。 可以節省大量時間的一些功能包括熱重載，以獲得即時回饋並順利產生必要的安全策略。 無需學習每個雲端提供者的語法。 您的程式碼可以編譯到 AWS、GCP、Azure 或任何自訂平台。太棒了：D 您可以閱讀完整的逐步指南，以了解[如何使用 React 作為前端和 Wing 作為後端建立簡單的 Web 應用程式](https://www.winglang.io/docs/guides/react-vite-websockets)。測試是使用 Wing Simulator 完成的，並使用 Terraform 部署到 AWS。 部署後的AWS架構是這樣的。  為了提供開發者選擇和更好的體驗，Wing 推出了對[TypeScript (Wing)](https://www.winglang.io/docs/typescript/)等其他語言的全面支援。唯一強制的事情是您必須安裝 Wing SDK。 這也將使控制台完全可用於本地偵錯和測試，而無需學習 Wing 語言。 該翼目前支援以下輸出： - AWS CDK 平台 - Terraform/AWS 平台 - Terraform/GCP 平台 - Terraform/Azure 平台 - 模擬器平台 - 客製化平台 Wing 甚至還有其他[指南](https://www.winglang.io/docs/category/guides)，因此更容易遵循。  您可以閱讀[文件](https://www.winglang.io/docs)並查看[範例](https://www.winglang.io/docs/category/examples)。 您也可以在[Playground](https://www.winglang.io/play/)中使用 Wing 查看結構和範例。 如果你比較像輔導員。看這個！ {% 嵌入 https://www.youtube.com/watch?v=wzqCXrsKWbo %}  Wing 在 GitHub 上有 4500+ 顆星，1600+ 個版本，但仍未進入 v1 版本，這意味著意義重大。 {% cta https://git.new/winlang-repo %} 星翼 ⭐️ {% endcta %} --- 2. [Nest](https://github.com/nestjs/nest) - 高效且可擴展的伺服器端應用程式。 ------------------------------------------------------------  一個先進的 Node.js 框架，用於使用 TypeScript/JavaScript 建立高效且可擴展的伺服器端應用程式。 它使用現代 JavaScript，使用 TypeScript 建構（保留與純 JavaScript 的兼容性），並結合了 OOP（物件導向程式設計）、FP（函數式程式設計）和 FRP（函數式反應式程式設計）的元素。 在底層，Nest 使用 Express，但也提供與 Fastify 等各種其他庫的兼容性，從而可以輕鬆使用無數可用的第三方外掛程式。 Nest 提供了高於這些常見 Node.js 框架（Express/Fastify）的抽象級別，但也直接向開發人員公開其 API。這為開發人員提供了一定程度的自由。 在我們了解更多之前，請觀看 100 秒內的 Nestjs！ {% 嵌入 https://www.youtube.com/watch?v=0M8AYU\_hPas&pp=ygUXZW1iZXIganMgaW4gMTAwIHNlY29uZHM%3D %} 考慮到它們提供的靈活性，您當然不必重新發明輪子。  這是使用 Nest CLI 設定新專案的方法。 ``` npm i -g @nestjs/cli nest new project-name ``` 這將引導該應用程式。 ``` import { NestFactory } from '@nestjs/core'; import { AppModule } from './app.module'; async function bootstrap() { const app = await NestFactory.create(AppModule); await app.listen(3000); } bootstrap(); ``` 您可以閱讀[文件](docs.nestjs.com)。 他們還提供一套付費課程（我想知道為什麼）。如果您需要完整的路線圖並想成為 Nest 的使用專家，請隨時查看它們。 但我建議使用 Freecodecamp 提供的這些免費教學來學習。 - [NestJs 初學者課程 - 建立 REST API](https://www.youtube.com/watch?v=GHTA143_b-s) - 大約 3.42 小時，涵蓋許多[主題](https://www.freecodecamp.org/news/learn-nestjs-by-building-a-crud-api/)。 - [綜合 NestJS 課程](https://www.youtube.com/watch?v=sFnAHC9lLaw&t=1s)- 涵蓋 20 個模組，時長 14 小時。 {% 嵌入 https://www.youtube.com/watch?v=sFnAHC9lLaw&t=1s %} 如果您正在尋找入門專案，請學習[如何在 NestJS 中使用 Nodemailer 發送電子郵件](https://www.freecodecamp.org/news/how-to-use-nodemailer-in-nestjs/)。您可以使用它來獲得紮實的基礎知識。 Nest.js 擁有龐大的開發人員社區，並被許多公司使用。尋找已使用 Nest[的專案和公司的完整清單](https://docs.nestjs.com/discover/companies)。  順便說一句，作為初學者，我最常擔心的是相似的名稱：Nextjs、Nuxtjs 和 Nestjs。我涵蓋了所有內容，這樣您就不必感到困惑。哈哈！ Nest 在 GitHub 上擁有超過 64k 個 star，提交次數超過 15k，並且已發布`v10`版本。 {% cta https://github.com/nestjs/nest %} 星巢 ⭐️ {% endcta %} --- 3. [Gatsby](https://github.com/gatsbyjs/gatsby) - 最好的基於 React 的框架，具有內建的效能、可擴展性和安全性。 -----------------------------------------------------------------------------------  Gatsby 是一個基於 React 的免費開源框架，可協助開發人員建立速度極快的網站和應用程式。 它將動態呈現網站的控制和可擴展性與靜態網站生成的速度結合起來，創造了一個全新的可能性網絡。 Gatsby 從任何資料來源提取資料，無論是 Markdown 檔案、Contentful 或 WordPress 等無頭 CMS，還是 REST 或 GraphQL API。使用來源插件載入資料，然後使用 Gatsby 的統一 GraphQL 介面進行開發。 與 Next.js 不同，Gatsby 不執行伺服器端渲染。相反，它會在建置期間在客戶端產生 HTML 內容。 我見過一些使用 Gatsby 建立的優秀作品集。 開始使用以下 npm 指令。 ``` npm init gatsby ``` 它會要求提供網站標題和專案目錄的名稱。繼續按照提示選擇您的首選語言（JavaScript 或 TypeScript）、CMS、樣式工具和其他功能。 您可以這樣使用它。 ``` cd my-gatsby-site // to start the local dev server npm run develop ``` 您可以閱讀[文件](https://www.gatsbyjs.com/docs)。我個人很喜歡文件的流程。 您也可以按照[教學](https://www.gatsbyjs.com/docs/tutorial/getting-started/)開始，[操作指南](https://www.gatsbyjs.com/docs/how-to/)和[概念指南](https://www.gatsbyjs.com/docs/conceptual/)深入了解 Gatsby 概念以及網站架構。 Gatsby 提供了開箱即用的 PWA 和大量主題。使用 Gatsby 主題，您的所有預設配置（共享功能、資料來源、設計）都會從您的網站中抽象化出來，並放入可安裝的套件中。您可以閱讀有關[主題的](https://www.gatsbyjs.com/docs/themes/)更多資訊。 例如， `gatsby-theme-blog`是用於建立部落格的官方 Gatsby 主題。可能有可以透過`gatsby-config.js`配置的主題選項。 ``` npm install gatsby-theme-blog ``` 對於電子商務商店或廣泛的媒體網站等內容密集的企業級網站來說，Gatsby 並不是理想的解決方案。隨著內容大小的增加，建置時間將急劇增加。 尋找使用 Gatsby 建立的[606 個網站](https://www.gatsbyjs.com/showcase/)的清單。其中，53 個網站是開源的，因此這可以提供靈感，也是一個起點。  他們還提供了[大量按類別劃分的插件](https://www.gatsbyjs.com/plugins)以及每個插件中清晰的文件。其中一個範例是將 Google Analytics 新增至您的應用程式的插件。 ``` npm install gatsby-plugin-google-analytics ```  您也可以使用 Gatsby 的[Starter 庫](https://www.gatsbyjs.com/starters/)。使用 Gatsby 建立下一個應用程式還需要什麼？  使用這些[參考指南](https://www.gatsbyjs.com/docs/reference/)來獲取有關 Gatsby API 的詳細資訊。 如果您喜歡完整的課程，我建議您觀看[Gatsby 靜態網站產生器教學](https://www.youtube.com/watch?v=RaTpreA0v7Q)- Freecodecamp 提供的 9 小時教學。 Gatsby 在 GitHub 上有 55,000 顆星，目前處於 v5 版本，並有超過 245,000 名開發人員使用。 {% cta https://github.com/gatsbyjs/gatsby %} 明星蓋茲比 ⭐️ {% endcta %} --- 4. [Nextjs](https://github.com/vercel/next.js) - Web 的 React 框架。 ----------------------------------------------------------------  由於它提供的優化級別，它是我最喜歡的框架之一。 Next.js 使您能夠透過擴展最新的 React 功能並整合強大的基於 Rust 的 JavaScript 工具來建立全端 Web 應用程式，以實現最快的建置。 Next.js 由荷蘭公司 Vercel（以前稱為 ZEIT）於 2017 年建立。 Next.js 也像 Gatsby 一樣提供靜態產生器。 Next.js 的建置遵循`Build once, runs everywhere`的原則，因此您可以使用 Next.js 製作 Web 應用程式、行動應用程式、桌面應用程式和漸進式 Web 應用程式。  Nextjs 提供了許多功能，例如檔案路由、渲染技術（例如 ISR）以及深層的圖像和字體最佳化。你可以檢查任何 nextjs 網站的 SEO 統計資料，在大多數情況下它都是一流的。   開始使用以下 npm 指令。 ``` npx create-next-app@latest ``` 您可以閱讀[文件](https://nextjs.org/docs)並按照[本指南](https://nextjs.org/docs/getting-started/installation)開始使用。 其中涉及很多概念，閱讀完整的文件需要幾個月的時間。我前段時間寫過一篇文章，你可以看看。它並沒有出名，但它是我憑藉多年的 Nextjs 經驗編寫的最好的文章之一。我還提到了 Nextjs 團隊提供的[官方課程](https://nextjs.org/learn/dashboard-app/getting-started)。 {% 嵌入 https://dev.to/anmolbaranwal/12-things-you-didnt-know-you-could-do-with-nextjs-386b %} 如果您想透過 YouTube 教學進行學習，我建議您觀看這些最近的教程，因為文件更新得非常頻繁，因此最好觀看最近的內容，而不是幾年前的內容。 - \[帶有 TypeScript 的 Nextjs 13（應用程式路由器）\](https://www.youtube.com/watch?v=ZVnjOPwW4ZA&pp=ygUTbmV4dGpzIGNyYXNoIGNvdXJzZQ%3D%3D ) - 1 小時教程。 - [Next.js 14 完整課程 2024](https://www.youtube.com/watch?v=wm5gMKuwSYk) - 3 小時教學。 您也可以觀看 Nextjs 100 秒。他們加入了一個基本教程，使其長達 11 分鐘。 {% 嵌入 https://www.youtube.com/watch?v=Sklc\_fQBmcs&t=4s&pp=ygUObmV4dGpzIGluIDEwMHM%3D %} 我自己使用文件學習了它，並使用它建置了超過 6 個專案，甚至是一個超過 20k 程式碼庫的 SAAS 應用程式。這就是為什麼我說，它是您可以選擇的最佳框架之一。 使用 Next.js 建立的一些熱門網站包括 Auth0、Coinbase、Docker、GitHub、Hulu、Netflix、Sesame、Starbucks、Trulia、Twitch 和 Uber。你可以看到所有使用Nextjs的[網站](https://nextjs.org/showcase)。  他們還提供了各種可以直接使用的[入門模板](https://vercel.com/templates/next.js)。   Next 在 GitHub 上有 12 萬顆星，發布`v14.2`版本，在 NPM 上每週下載量超過 600 萬次。如其儲存庫所示，有 260 萬開發人員使用。 {% cta https://github.com/vercel/next.js %} 明星 Nextjs ⭐️ {% endcta %} --- 5. [Preact](https://github.com/preactjs/preact) - 具有相同現代 API 的快速 3kB React 替代品。 -------------------------------------------------------------------------------  Preact 是一個輕量級、快速、高效能的函式庫，是 React 的替代品。 Preact 的大小僅為 3kb（經過壓縮和壓縮），但卻為您提供了 React 所需的所有功能，使其成為最好的 JavaScript 框架之一。 Preact 的建立者 Jason Miller 是 Google 的高級開發者計畫工程師。 Preact 基本上具有 Virtual DOM 元件的所有功能，而沒有諸如以下的開銷： - 熟悉 React API 和 ES6 類別、鉤子和功能元件模式。 - 透過簡單的 preact/compat 別名實現廣泛的 React 相容性。 - 您需要的一切，例如 JSX、VDOM、DevTools、HMR、SSR。 在生產過程中，您可以輕鬆地從現有專案中的 React 切換到 Preact，因為它們支援相同的 API。 程式碼範例結構如下所示。您也可以查看此範例[程式碼筆](https://codepen.io/developit/pen/LpNOdm)，您可以查看它以了解 Preact 中程式碼庫的結構。  開始使用以下 npm 指令。 ``` npm init preact ``` 這是執行開發伺服器的方式。 ``` # Go into the generated project folder cd my-preact-app # Start a development server npm run dev ``` 您將必須配置一些東西，尤其是別名。請遵循[本指南](https://preactjs.com/guide/v10/getting-started)。 您可以閱讀[文件](https://preactjs.com/guide/v10/getting-started/)並查看詳細的[演示和範例](https://preactjs.com/about/demos-examples)清單。 他們還提供了基於 Web 的[教程](https://preactjs.com/tutorial/)，您可以按照該教程來學習 Preact。 如果您需要範例應用程式、樣板檔案、元件、工具包等，請使用[Awesome Preact](https://github.com/preactjs/awesome-preact) 。 Preact 在 GitHub 上有 36,000 顆星，目前已發布`v10`版本。 {% cta https://github.com/preactjs/preact %} Star Preact ⭐️ {% endcta %} --- 6. [tRPC](https://github.com/trpc/trpc) - 端到端類型安全性 API 變得簡單。 ------------------------------------------------------------  tRPC 可讓您輕鬆建立和使用完全類型安全的 API，而無需模式或程式碼產生。  上面的客戶端沒有從伺服器導入任何程式碼，僅導入其類型聲明 如果我們要深入了解，那麼您絕對應該閱讀一些歷史。 {% 嵌入 https://dev.to/zenstack/a-brief-history-of-api-rpc-rest-graphql-trpc-fme %} 目前，GraphQL 是在 TypeScript 中實作型別安全 API 的主要方式（這太棒了！）。由於 GraphQL 被設計為用於實現 API 的與語言無關的規範，因此它沒有充分利用 TypeScript 這樣的語言的強大功能。 如果您的專案是使用全端 TypeScript 建置的，您可以直接在客戶端和伺服器之間共用類型，而無需依賴程式碼生成。 tRPC 適用於全端 TypeScript 開發人員。它使您可以輕鬆編寫可以在應用程式的前端和後端安全使用的端點。 API 合約的類型錯誤將在建置時被捕獲，從而減少應用程式在執行時出現錯誤的可能性。 這是為 Mono 儲存庫設計的，因為您需要從伺服器匯出/匯入類型定義。  開始使用以下 npm 指令。 ``` npm install @trpc/server@next @trpc/client@next ``` 您必須使用實例定義後端路由器。閱讀[快速入門指南](https://trpc.io/docs/quickstart)以了解更多詳細資訊。 了解[trpc 中涉及的概念](https://trpc.io/docs/concepts)（例如 rpc 和使用的術語）非常重要。 您可以閱讀[文件](https://trpc.io/docs)。 如果您已經在一個混合語言的團隊中工作，或者擁有您無法控制的第三方消費者，那麼您應該建立一個與語言無關的 GraphQL-API。 如果您想測試一下，我建議使用此[模板](https://github.com/new?template_name=examples-minimal&template_owner=trpc)，其中包含一個最小的範例。 您還可以觀看這個[45 分鐘的 YouTube 教學](https://www.youtube.com/watch?v=UfUbBWIFdJs&pp=ygUMd2hhdCBpcyB0cnBj)來了解有關 trpc 的更多資訊。 {% 嵌入 https://www.youtube.com/watch?v=UfUbBWIFdJs&pp=ygUMd2hhdCBpcyB0cnBj %} 它們在 GitHub 上擁有超過 32,000 顆星，目前處於`v11` beta 版本，並被 51,000 名開發人員使用。 {% cta https://github.com/trpc/trpc %} 啟動 tRPC ⭐️ {% endcta %} --- [7.Nuxtjs](https://github.com/nuxt/nuxt) - 直覺的 Vue 框架。 ------------------------------------------------------  Nuxt 是一個基於 Vue.js 生態系統的漸進式開源框架，用於建立高效能 Web 應用程式，尤其是伺服器端渲染應用程式。 但請記住，Nuxt 並不是 Vue.js 的替代品，因為它無法單獨運作。而且它也不能被視為像 Express 這樣成熟的後端框架。 100 秒觀看 Nuxtjs，掌握整體概念。 {% 嵌入 https://www.youtube.com/watch?v=dCxSsr5xuL8 %} Nuxt 是建立這三種 Web 應用程式的最佳 JavaScript 框架之一 - 預先渲染靜態頁面、單頁 Web 應用程式 (SPA)、伺服器端渲染 Web 應用程式 (SSR) 甚至通用應用程式。 開發人員特別喜歡 Nuxt，因為它有豐富的函式庫和模組。  開始使用以下 npm 指令。 ``` npx nuxi@latest init <my-project> ``` 您可以閱讀[文件](https://nuxt.com/docs/getting-started/introduction)並檢查[codesandbox範例](https://codesandbox.io/s/github/nuxt/starter/tree/v3/)。 您可以按照本[指南](https://nuxt.com/docs/guide/concepts/auto-imports)了解更多關鍵概念。 有許多整合選項，因此您可以更輕鬆地繼續使用您喜歡的工具和服務。  您可以查看[免費課程清單](https://nuxt.com/video-courses)來了解 Nuxt 生態系統。 如果您想要推薦的課程，請學習[Nuxt 3 — 初學者課程](https://www.youtube.com/watch?v=fTPCKnZZ2dk)— Freecodecamp 提供的 3 小時教學。 使用 Nuxt 建立的一些流行網站包括 Aircall、Amplitude、Backmarket、Bitpay、Bootstrap Vue、Fox News、Gitlab、Icons8、Instrument、MyScript、Nespresso、Note.com、Ozon.ru、Roland Garros、System76、Todoist、加油，Wappalyzer 。尋找不同類別下[展示網站的完整清單](https://nuxt.com/showcase)。 如果您想快速測試和建置，那麼我建議您查看[入門模板](https://nuxt.com/templates)。  Nuxt 在 GitHub 上擁有超過 51,000 顆星，並被超過 318,000 名開發者使用。 {% cta https://github.com/nuxt/nuxt %} Star Nuxt ⭐️ {% endcta %} --- 8. [Ember.js](https://github.com/emberjs/ember.js) - 用於建立雄心勃勃的 Web 應用程式的 JavaScript 框架。 ---------------------------------------------------------------------------------------  Ember.js 是一個 JavaScript 框架，用於為企業建立可擴展的單頁 Web 應用程式。與其他框架不同，模型-視圖-視圖模型 (MVVW) 架構是 Ember 的基礎。 Ember.js 最初是一個 SproutCore 2.0 框架，由其建立者 Yehuda Katz 更名為 Ember.js，Yehuda Katz 是一位出色的開發人員，被譽為 jQuery 的主要建立者之一。 他們還提供命令列介面工具。 Ember CLI 是建立、建置、測試和提供構成 Ember 應用程式或外掛程式的檔案的官方方式。 ``` npm install -g ember-cli ``` 儘管與 React、Vue 和 Svelte 相比，Ember.js 是一個較舊的前端 JavaScript 框架，但它仍然具有強大的功能，並且在 Microsoft、LinkedIn、Netflix 和 Twitch 等大公司中擁有龐大的用戶群。查看[完整清單](https://emberjs.com/ember-users/)。  借助強大的預設設置，您可能永遠不需要在應用程式中配置任何內容，但如果您需要的話，選項就在那裡！ 這意味著 Ember.js 遵循「CoC – 約定優於配置」方法，這可確保在大多數情況下不需要任何配置，以便您可以直接跳到編碼和建立 Web 應用程式。 它們還支援類似於 AngularJS 的 2 路資料綁定。 當我們深入研究時，了解 ember.js 是如何誕生的、其建立背後的先驅者以及製作開源軟體時做出的改變生活的決定非常重要。看這個！ {% 嵌入 https://www.youtube.com/watch?v=Cvz-9ccflKQ %} 安裝 Ember CLI 後。 ``` npm install -g ember-cli ``` 您可以建立一個新應用程式，如圖所示。 ``` ember new ember-quickstart --lang en cd ember-quickstart npm start ``` 您可以閱讀[詳細的快速入門文件](https://guides.emberjs.com/release/getting-started/quick-start/)和[官方指南](https://guides.emberjs.com/release/)。 要學習 ember.js，您可以按照他們的官方團隊建立的[逐步教程](https://guides.emberjs.com/release/tutorial/part-1/)進行操作。您可以在[Ember API 文件](https://api.emberjs.com/ember/release)上閱讀有關 API 的更多資訊。 有數以千計的 JavaScript 庫可以在 Ember 中很好地工作。當 npm 套件提供一些 Ember 特定的功能時，他們稱之為`addon` 。外掛程式提供了一種編寫可重複使用程式碼、共用元件和樣式、擴充建置工具等的方法，所有這些都只需最少的配置。尋找[插件的完整清單](https://emberobserver.com/)。  如果您正在尋找更多文章來學習 Ember.js，我推薦這些： - [Ember JS Essentials：Startech 提供的安裝及其功能的初學者指南](https://www.startechup.com/blog/ember-js/)。 - Toptal [建立您的第一個 Ember.js 應用程式的指南](https://www.toptal.com/javascript/a-step-by-step-guide-to-building-your-first-ember-js-app)。 這足以理解結構並決定 Ember 何時適合您的專案。 他們在 GitHub 上有 22k+ 顆星，而`v5.8`版本有 500 多個版本。 {% cta https://github.com/emberjs/ember.js %} 明星 Ember.js ⭐️ {% endcta %} --- 9. [Backbone.js](https://github.com/jashkenas/backbone) - 為您的 JS 應用程式提供一些帶有模型、視圖、集合和事件的 Backbone。 -------------------------------------------------------------------------------------------------  Backbone.js 是一個基於 JavaScript 的框架，透過 RESTful JSON 介面連接到 API。 Jeremy Ashkenas 因建立一些最好的 JavaScript 框架（例如 CoffeeScript 和 Underscore.js）而聞名，他於 2010 年 10 月推出了 Backbone.js。 它旨在建立單頁 Web 應用程式並維護不同 Web 應用程式元件（例如眾多客戶端和伺服器）之間的同步。 Backbone.js 以小而輕而聞名，因為它只需要 jQuery 和一個 JavaScript 函式庫 Underscore.js 即可使用整個函式庫。 Backbone.js 透過提供具有鍵值綁定和自訂事件的模型、具有豐富的可枚舉函數API 的集合、具有聲明性事件處理的視圖，為JavaScript 密集型應用程式提供結構，並透過RESTful JSON 接口將其全部連接到您現有的應用程式。 這是一個簡單的主幹視圖。 ``` var AppView = Backbone.View.extend({ // el - stands for element. Every view has an element associated with HTML // content will be rendered. el: '#container', // It's the first function called when this view is instantiated. initialize: function(){ this.render(); }, // $el - it's a cached jQuery object (el), in which you can use jQuery functions // to push content. Like the Hello World in this case. render: function(){ this.$el.html("Hello World"); } }); ``` 您可以閱讀[文件](https://backbonejs.org/)。 Backbone.js 被許多值得信賴的公司使用，例如 Walmart、Pinterest、SoundCloud 等。 您可以參考他們的[wiki](https://github.com/jashkenas/backbone/wiki/Tutorials%2C-blog-posts-and-example-sites) ，其中記錄了教程、部落格文章和範例網站。 您可以參考幾篇很棒的文章來了解更多： - [BackboneJS：入門](https://auth0.com/blog/backbonejs-getting-started/)- 推薦。 - [適合絕對初學者的 Backbone.js](https://adrianmejia.com/backbone-dot-js-for-absolute-beginners-getting-started/) - [BackboneJS 教學](https://www.tutorialspoint.com/backbonejs/index.htm)- 教學點。 根據儲存庫統計，它們在 GitHub 上擁有超過 28,000 顆星，並被超過 66,000 名開發人員使用。 {% cta https://github.com/jashkenas/backbone %} 明星 Backbone.js ⭐️ {% endcta %} --- 10. [Svelte](https://github.com/sveltejs/svelte) - 控制論增強的網路應用程式。 ----------------------------------------------------------------  Svelte 是一種建立 Web 應用程式的新方法。 它是由 Rich Harris（著名前端開發人員）建立的。 Svelte 於 2016 年首次推出，人氣暴漲。 許多開發人員認為 Svelte 是一個真正改變遊戲規則的革命性想法，它從根本上改變了我們編碼 Web 應用程式的方式。 與 React 或 Vue.js 等其他 JavaScript 框架不同，Svelte 沒有虛擬 DOM。相反，您可以使用簡單的 HTML、CSS 和 JavaScript 程式碼來建立無樣板的元件。 然後，Svelte Compiler 在建置期間將此程式碼編譯成小型的無框架的普通 JavaScript 模組，並在狀態變更時精確地更新 DOM。 因此，與 React 或 Vue.js 等其他傳統框架不同，Svelte 不需要很高的瀏覽器處理能力。 Svelte 依靠反應式程式來徹底更新 DOM。因此，與幾乎任何其他框架相比，它可以實現最快的渲染，並且在大多數效能基準測試中名列前茅。 開始使用以下 npm 指令。 ``` npm create svelte@latest my-app ``` 您可以這樣使用它。 ``` cd my-app npm install npm run dev -- --open ``` 您可以閱讀[文件](https://svelte.dev/docs/introduction)。該團隊還提供了[官方的 VSCode 擴展](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode)，它也可以與各種其他編輯器和工具整合。  他們還提供了[詳細的基於網路的教程](https://svelte.dev/tutorial/basics)來學習 Svelte。 您可以查看所有[範例](https://svelte.dev/examples/nested-components)來了解關鍵概念和結構，包括 DOM 事件、生命週期、運動、過渡和處理 SVG。  您可以觀看這些教學來了解有關 Svelte 的所有知識。 - [Learn Svelte – 初學者完整課程](https://www.youtube.com/watch?v=UGBJHYpHPvA)– Freecodecamp 的 23 小時教學。 - [Sveltekit & Tailwind](https://www.youtube.com/watch?v=vb7CgDcA_6U&t=2s) - Freecodecamp 的 2 小時教學。 非常感謝老師們免費提供如此詳細的教學！ Svelte 在 GitHub 上擁有超過 76k 顆星，目前處於`v4.2`版本，有 282k 開發人員使用。 {% cta https://github.com/sveltejs/svelte %} Star Svelte ⭐️ {% endcta %} --- 11. [Remix](https://github.com/remix-run/remix) - 建立更好的網站。 ----------------------------------------------------------  Remix 是一個全端Web 框架，可讓您專注於使用者介面並透過Web 基礎知識進行工作，以提供快速、流暢且有彈性的使用者體驗，可部署到任何Node.js 伺服器，甚至非Node. js 環境像 Cloudflare Workers 這樣的邊緣。 Remix 建構在 React Router 之上，有四個特點： - 一個編譯器 - 伺服器端 HTTP 處理程序 - 一個伺服器框架 - 一個瀏覽器框架 您可以觀看此內容以了解有關 Remix by Fireship 的更多資訊。 {% 嵌入 https://www.youtube.com/watch?v=r4B69HAOXnA&pp=ygUUcmVtaXggaW4gMTAwIHNlY29uZHM%3D %} 透過嵌套路由，Remix 可以消除幾乎所有載入狀態，如圖所示。  開始使用以下 npm 指令。 ``` npx create-remix@latest ``` 您可以這樣使用它。 ``` mkdir my-remix-app cd my-remix-app npm init -y # install runtime dependencies npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom # install dev dependencies npm i -D @remix-run/dev vite ``` 如果您想包含您的伺服器，請閱讀此[快速入門指南](https://remix.run/docs/en/main/start/quickstart)，並了解更多有關如何透過 Remix Vite 插件提供 Vite 配置的訊息，因為 Remix 使用 Vite。 您可以閱讀[文件](https://remix.run/docs/en/main)。他們根據你想做的事情來分發它，順便說一句，我很喜歡。  尋找使用 Remix 建立的[網站的完整清單](https://remix.run/showcase)。  您還應該查看社區製作的[Remix 資源](https://remix.run/resources?category=all)。其中一些是有幫助的，可以改善整個生態系統。  如果您是第一次接觸 Remix，我建議您閱讀官方團隊建立的[Remix 教學 -30min](https://remix.run/docs/en/main/start/tutorial) 。 他們在 GitHub 上擁有超過 27k 個 star，並且發布了`v2.8`版本。 {% cta https://github.com/remix-run/remix %} 明星混音 ⭐️ {% endcta %} --- 12. [AdonisJS](https://github.com/adonisjs/core) - TypeScript 優先的 Web 框架，用於建立 Web 應用程式和 API 伺服器。 ------------------------------------------------------------------------------------------------  AdonisJS 是一個功能齊全的 Node.js 後端框架。該框架是從頭開始建立的，非常重視開發人員的人體工學和易用性。 AdonisJS 專注於後端，讓您選擇您選擇的前端堆疊，這意味著前端不可知。 它是 Node.js 社群中最稀有的框架之一，附帶一套第一方包，可幫助您建立和發布產品，而無需浪費數百小時組裝不同的 npm 包。 在基礎層面上，AdonisJS 為您的應用程式提供架構，配置無縫的 TypeScript 開發環境，為您的後端程式碼配置 HMR，並提供大量維護良好且記錄廣泛的軟體包。 他們強調了一點測試，這是非常好的。  開始使用以下 npm 指令。 ``` npm init adonisjs@latest hello-world ``` AdonisJS 採用經典的 MVC 設計模式。首先，使用函數式 JavaScript API 定義路由，將控制器綁定到它們，並編寫邏輯來處理控制器內的 HTTP 請求。 ``` import router from '@adonisjs/core/services/router' import PostsController from '#controllers/posts_controller' router.get('posts', [PostsController, 'index']) ``` 控制器可以使用模型從資料庫中獲取資料並呈現視圖（也稱為模板）作為回應。 ``` import { HttpContext } from '@adonisjs/core/http' import Post from '#models/post' export default class PostsController { async index({ view }: HttpContext) { const posts = await Post.all() return view.render('pages/posts/list', { posts }) } } ``` 如果您正在建立 API 伺服器，則可以用 JSON 回應取代視圖層。但是，處理和回應 HTTP 請求的流程保持不變。 您可以閱讀[文件](https://docs.adonisjs.com/guides/introduction)。 您也可以參考[入門套件](https://docs.adonisjs.com/guides/installation#starter-kits)。 他們還提供了[VSCode 擴展，](https://marketplace.visualstudio.com/items?itemName=jripouteau.adonis-vscode-extension)如果您開始使用 Adonisjs，則應該使用該擴展。 您必須查看[Awesome Adonisjs](https://github.com/adonisjs-community/awesome-adonisjs) ，它提供了一系列很棒的書籤、軟體包、教程、影片、課程、擁有使用此內容的網站的公司以及來自 AdonisJS 生態系統的其他很酷的資源。 大多數時候，開始接觸一些非常新的東西是很困難的，因此團隊提供了[10 多個課程](https://adonismastery.com/)來了解 Adonisjs 生態系統。   他們在 GitHub 上擁有超過 15k 個 star，並且發布了`v6.8`版本。 {% cta https://github.com/adonisjs/core %} 明星 AdonisJS ⭐️ {% endcta %} --- 13. [Astro](https://github.com/withastro/astro) - 內容驅動網站的網頁框架。 --------------------------------------------------------------  Astro 是一個開源、伺服器優先的 Web 框架，它結合了靜態網站產生 (SSG) 和伺服器端渲染 (SSR) 的優點，可建立快速、SEO 友善的網站。 Astro 專門為部落格和電子商務等內容豐富的網站提供支持，並擁有良好的開發生態系統。 開始使用以下 npm 指令。 ``` npm create astro@latest ``` 您可以閱讀使用 Astro 建立的[文件](https://docs.astro.build/en/getting-started/)和[展示的網站](https://astro.build/showcase/)。其中一些真的很棒並且視覺上令人驚嘆！ Astro 支援 React、Preact、Svelte、Vue、Solid、Lit、HTMX、Web 元件等。閱讀所有[記錄的功能](https://docs.astro.build/en/concepts/why-astro/#features)。 您可以按照本教學[使用 Astro 建立您的第一個部落格](https://docs.astro.build/en/tutorial/0-introduction/)。或使用主題來快速啟動您的下一個專案。其中一些是免費的，而另一些則是付費的！  您可以看到如圖所示的加載性能，甚至我對此感到驚訝。  性能至關重要，尤其是在您從事商業活動時，因為高效的演算法將節省更多資金並減少麻煩。  無論是在可存取性、圖標還是使用不同的庫方面，[整合選項](https://astro.build/integrations/)都是巨大的。  您可以觀看 Freecodecamp 提供的一小時[Astro Web 框架速成課程](https://www.youtube.com/watch?v=e-hTm5VmofI)。 {% 嵌入 https://www.youtube.com/watch?v=e-hTm5VmofI %} Astro 在 GitHub 上擁有超過 42k 顆星，處於`v4.6` （1800 多個版本），並由超過 112k 開發人員使用。 {% cta https://github.com/withastro/astro %} Star Astro ⭐️ {% endcta %} --- 14. [Fresh](https://github.com/denoland/fresh) - 下一代網路框架。 ---------------------------------------------------------  Fresh 是下一代 Web 框架，專為速度、可靠性和簡單性而建置。 一些突出的特點： - 島上的客戶水合作用可達到最大程度的互動。 - 零執行時開銷意味著預設不會將 JS 傳送到客戶端。 - 無需配置。 - 開箱即用的 TypeScript 支援。 該框架使用 Preact 和 JSX 進行渲染和模板化，處理伺服器和客戶端上的任務。 此外，Fresh 消除了建造步驟的需要。您編寫的程式碼直接在伺服器端和客戶端執行。 TypeScript 或 JSX 到純 JavaScript 的轉換是在需要時動態發生的。這有助於實現極其快速的迭代周期和快速部署。 從這個開始吧。 ``` deno run -A -r https://fresh.deno.dev ``` Fresh 採用的最重要的架構決策是其對[島嶼架構模式](https://www.patterns.dev/vanilla/islands-architecture)的使用。 這意味著 Fresh 應用程式預設將純 HTML 發送到客戶端。然後，伺服器渲染頁面的某些部分可以透過互動式小工具（島嶼）獨立重新水化。 客戶端只負責渲染頁面中互動性足以保證額外工作的部分。任何純靜態內容都沒有相關的客戶端 JavaScript，因此非常輕量級。 您可以閱讀[文件](https://fresh.deno.dev/docs/introduction)。 您可以找到所有使用此建立的[網站](https://fresh.deno.dev/showcase)，例如[Max Schmidt](https://mooxl.dev/)的投資組合網站。  他們在 GitHub 上擁有超過 11k 個 star，並且發布了`v1.6`版本。 {% cta https://github.com/denoland/fresh %} 明星新鮮 ⭐️ {% endcta %} --- 15. [Vue.js](https://github.com/vuejs/core) - 用於在網路上建立 UI 的漸進式 JavaScript 框架。 -----------------------------------------------------------------------------  Vue.js 是一個漸進式框架，因為它能夠透過雙整合模式促進高階單頁 Web 應用程式的設計。閱讀[使用 Vue 的所有方法](https://vuejs.org/guide/extras/ways-of-using-vue.html)，包括從嵌入 Web 元件到獨立腳本，甚至使用伺服器端渲染或靜態網站生成來建立複雜的應用程式。  使用 MVVM（模型-視圖-視圖模型）架構，Vue.js 讓事情變得簡單、靈活且適合初學者。 Vue.js 於 2014 年由 Google 的開發人員 Evan You 首次推出，他從 AngularJS 中汲取靈感，提供了一種簡單、輕量級且高效的替代方案。 Vue.js 借用了 ReactJS 和 AngularJS 的一些功能，並對其進行了增強，以提供更流暢、更用戶友好的體驗。例如，Vue.js 將 AngularJS 的 2 路資料綁定與 React 的高效虛擬 DOM 結合。 與 React 不同，Vue 有一個內建的 MVC，可以快速輕鬆地進行設定。此外，Vue.js 的壓縮版本只有 18-20 kb，比其臃腫笨重的競爭對手（如 React 或 AngularJS）輕得多。 Vue.js 還包含一個方便的內建 CSS 過渡和動畫元件。 100 秒觀看 Vue.js 了解更多！ {% 嵌入 https://www.youtube.com/watch?v=nhBVL41-\_Cw&pp=ygUXZW1iZXIganMgaW4gMTAwIHNlY29uZHM%3D %} 開始使用以下 npm 指令。 ``` npm create vue@latest ``` 該命令將安裝並執行 create-vue，官方的 Vue 專案腳手架工具。您將收到有關多個可選功能的提示，例如 TypeScript 和測試支援。 這是啟動開發伺服器的方法。 ``` cd <your-project-name> npm install npm run dev ``` 一個簡單的應用程式。 ``` import { createApp } from 'vue' createApp({ data() { return { count: 0 } } }).mount('#app') <div id="app"> <button @click="count++"> Count is: {{ count }} </button> </div> ``` 上面的例子展示了Vue的兩個核心特性： 1. **聲明式渲染**：Vue 使用模板語法擴充了標準 HTML，該模板語法基於 JavaScript 狀態以聲明方式描述 HTML 輸出。 2. **反應性**：Vue 會自動追蹤 JavaScript 狀態變化，並在變化發生時有效地更新 DOM。 您也可以使用 CDN 來使用它，CDN 將使用全域建置。閱讀[快速入門指南](https://vuejs.org/guide/quick-start)以了解更多資訊。 您可以閱讀[文件](https://vuejs.org/guide/introduction)並查看不同主題的[程式碼編輯器範例](https://vuejs.org/examples/#hello-world)，甚至可以了解如何建立 Markdown 編輯器。 要體驗 Vue.js，您也可以直接在他們的[現場 Playground](https://play.vuejs.org/#eNp9kVFLwzAQx7/KeS9TmBuiT6MOVAbqg4oKvuSltLeuM01CcpmF0u/utaXVhzEISe7/vyS/yzV459ziEAlXmITMl47XylDtrGfIaZtGzdAoA5CnnJ5fDHsATxy9GSOAKhQrmD2S1ha+rNf52Wyw2m6RSUaynB6QgKlyOmWSCCDZXa2bprsF2jZZStSrpXGR4XBZ2Zz0rULxFYqVLKfTOEcOmTXbsljsgzVSRw+lMLOVKzX5V8elNUHhasRVmArnz3OvsY80H/VsR9n3EX0f6k5T+OYpkD+Qwsnj1BfEg735eKFa9pMp5FFL9gnznYLVsWMc0u6jyQX7X15P+1R1PSlN8Rk2NZMJY1EdaP/Jfb5CaebDidL/cK8XN2NzsP0F+HSp8w==)中嘗試。 我非常喜歡的一篇關於 Vue 的文章是 Michael 在 DEV 上發表的。必讀！ {% 嵌入 https://dev.to/michaelthiessen/25-vue-tips-you-need-to-know-2h70 %} 如果您剛開始，您可以按照他們的團隊建立的[官方教程](https://vuejs.org/tutorial/#step-1)進行操作。  與 Astro 類似，他們也有[課程部分](https://www.vuemastery.com/courses/)和[Vue School](https://vueschool.io/) ，您可以在其中找到各種主題。  Vue.js 為許多知名網站提供支持，包括 Font Awesome、Upwork 和 Namecheap 等。 Freecodecamp 有一個[針對初學者的 3 小時 Vue](https://www.youtube.com/watch?v=4deVCNJq3qc)教程，但我不推薦它，因為它是 2019 年的，而且我們知道這些框架中的概念變化有多快。 他們在 GitHub 上擁有超過 44k 個 star，並且發布了`v3.4`版本。它是有史以來最受開發人員喜愛的框架之一。 {% cta https://github.com/vuejs/core %} Star Vuejs ⭐️ {% endcta %} --- 還有很多其他框架，您可以查看其中一些： [Aurelia.js](https://github.com/aurelia/framework) 、 [Mithril.js](https://github.com/MithrilJS/mithril.js) 、 [Stimulus.js](https://github.com/hotwired/stimulus) 、 [Meteor.js](https://github.com/meteor/meteor) 、 [Angular.js](https://github.com/angular/angular) 、 [React.js](https://github.com/facebook/react) 、 [Knockout.js](https://github.com/knockout/knockout)和[Alpine.js](https://github.com/alpinejs/alpine) 。 是的，我知道，我同時感到 😵 和興奮。哈哈！ 我有一些影片推薦，可以讓本文更加深入。 {% 嵌入 https://www.youtube.com/watch?v=cuHDQhDhvPE&pp=ygUXZW1iZXIganMgaW4gMTAwIHNlY29uZHM%3D %} {% 嵌入 https://www.youtube.com/watch?v=WJRf7dh5Zws&pp=ygURZW1iZXIganMgdHV0b3JpYWw%3D %} --- 我特意製作了這一系列教程，以幫助您在一個地方找到所有內容。我希望你喜歡這個！ 雖然我是 Next.js 的忠實粉絲，但探索 Wing 等其他出色的框架可能非常適合您的下一個專案。 讓我們知道您計劃使用哪些框架，或者您認為其他人是否應該了解其他內容。 祝你有美好的一天！直到下一次。 我建立技術內容是為了幫助其他人每天成長 1%，這樣您就可以在 Twitter 和 LinkedIn 上關注我以獲得每日見解。 |如果你喜歡這類東西， 請關注我以了解更多:) | [](https://twitter.com/Anmol_Codes) [](https://github.com/Anmol-Baranwal) [](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 關注Winglang以獲取更多此類內容。 {% 嵌入 https://dev.to/winglang %} --- 原文出處：https://dev.to/winglang/15-javascript-frameworks-for-your-next-project-1o7n
介紹 == 對於初學者來說，尋找專案想法並實施它們一直是一個困難的過程。每天，我都會遇到成百上千的人在 Reddit、Facebook、Twitter 等頁面以及 Devto 和 Medium 等技術部落格上詢問他們可以使用備受好評和誇張的程式語言做什麼。為此，我想開一個話題。僅包含專案想法的線程。我建立一篇評論文章只是為了激勵那些想要學習新語言並測試其能力的人。我會在文章下面的評論中加入新的想法。透過這種方式，我的目標是盡可能避免初學者可以用這樣或那樣的程式做什麼的問題。 首先我要跟大家提幾個想法： 1. 盡可能嘗試使用心智圖技術。將主題標題寫為關鍵字，並使用您記下的筆記中的標籤將正確的專案放在正確的標題下。 2. 移植 - 將另一種語言給出的專案想法整合到您的新語言中 3. 老派 - 重寫您的第一個專案，同時透過命令列以最簡單的形式學習另一種語言（不使用人工智慧） 4. 程式碼共享 - 出於非商業目的，請毫不猶豫地共享您的程式碼。一邊喝咖啡，一邊看著你的錯誤被無情地批評。 5. 鳥在手，勝鳥在林。一個行之有效的專案比行不通的瘋狂想法要好。這樣做直到你成功為止。 > PS：此清單包含 53 個想法。不是50。句號:) 從初級到高級的專案想法 ----------- 1. 網路爬蟲#scraper 2. 文件加密器#filetool 3. URL 縮短器 #urltool 4. CLI 聊天應用程式#chat 5. REST完整 API #api 6. 影像辨識 #ml #dl 7. 股市分析#stock #market 8. Markdown 到 HTML 轉換器 #converter 9. PDF 產生器 #generator 10. 社群媒體分析#analytics 11. 視訊串流伺服器#server 12. 區塊鏈實作#blockchain 13. 內容管理系統 (CMS) #website #cms 14. 電子郵件客戶端#email 15. 任務管理系統#task 16. 線上市集#ecommerce 17. 即時聊天應用程式#chat 18. URL監控工具#url 19. 代理伺服器#proxy 20. 網路爬蟲#crawler 21. 部落格平台#blog 22. 密碼管理器#password 23. 任務調度#task 24. 圖片庫#gallery 25. Markdown 編輯器#markdown 26. 費用追蹤#finance 27. 預算追蹤器#finance 28. URL 驗證器 #url 29. 食譜共享平台#recipe 30. 文字轉語音轉換器#tts 31. 論壇或討論區#forum #discussion 32. 聊天機器人人工智慧#ai #chat 33. 日誌分析器#log #analytics 34. 天氣應用#app #weather #api 35. 程式碼審查工具#code 36. 音樂串流服務#stream #service #music 37. Markdown 部落格產生器 #markdown #blog #generator 38. 拍賣平台#platform #auction 39. URL 縮短器 #url 40. TODO 應用 #todo #task 41. 抽認卡應用程式#flashcard 42. 新聞聚合器 #news #api #rss 43. 社群媒體調度程式#social #schedule 44. 資料視覺化（圖表等）#data 45. URL 過濾代理伺服器 #url #proxy 46. URL 解析器#url 47. 密碼強度檢查器#password #cybersecurity 48. RSS 提要閱讀器 #rss #reader 49. 測驗應用程式#quiz #app 50. 視訊會議工具#video 51. 員工管理系統#business 52. Encrpyt - 解密工具#filetool 53. 程式碼片段管理器#snippet #code --- 原文出處：https://dev.to/gokayburuc/53-project-ideas-for-beginner-to-advanced-2j5
算法是計算的命脈。它們是電腦解決問題、分析資料和做出決策所遵循的逐步指令。就像食譜一樣，它們將複雜的任務分解為易於管理的程式。理解這些基本演算法是掌握電腦科學和程式設計的基石。 > [什麼是演算法](https://github.com/m-mdy-m/algorithms-data-structures/tree/main/1.IntroductionToAlgorithmsAndProblemSolving) 1. 搜尋演算法： --------- ### 什麼是搜尋？ 搜尋是在資料集合中定位特定元素或專案的基本過程。此資料集合可以採用各種形式，例如陣列、列表、樹或其他結構化表示。搜尋的主要目標是確定資料中是否存在所需元素，如果存在，則辨識其精確位置或檢索它。它在各種計算任務和現實應用中發揮重要作用，包括資訊檢索、資料分析、決策過程等。 ### 介紹搜尋演算法 所有搜尋演算法都使用搜尋關鍵字來繼續執行該過程。搜尋演算法預計會返回成功或失敗狀態，通常以布林 true/false 表示。可以使用不同的搜尋演算法，其效能和效率取決於資料及其使用方式。 線性搜尋演算法被認為是所有搜尋演算法中最基本的。最好的也許是二分搜尋。還有其他搜尋演算法，例如深度優先搜尋演算法、廣度優先演算法等。搜尋演算法中使用的符號是 O(n)，其中 n 是完成的比較次數。它給出了演算法在給定條件下所需執行時間的漸近上限的概念。 搜尋演算法中的搜尋案例可以分為最佳情況、平均情況和最壞情況。在某些演算法中，所有三種情況可能漸近相同，而在其他一些演算法中可能存在很大差異。搜尋演算法的平均行為有助於確定演算法的有用性。 > 摘要： 搜尋演算法是用於在資料集合中定位特定資料的逐步過程。它被認為是計算中的基本過程。在電腦科學中，搜尋資料時，快速應用程式和較慢應用程式之間的差異通常在於使用正確的搜尋演算法。 ### 術語： - **目標元素：**這就是你要尋找的寶藏！這是您想要在集合中尋找的特定資料。想像搜尋電話簿 - 目標元素是特定人的電話號碼。 - **搜尋空間：**將其視為可能隱藏針的大海撈針。它代表您正在搜尋的整個資料集合。這可以是數字陣列、名稱列表或更複雜的資料結構。 - **複雜度：**這是指搜尋演算法所需的工作量。這就像衡量圖書館員需要做多少工作才能找到你的書。複雜性通常以時間（找到目標需要多長時間）和空間（演算法需要多少額外記憶體）來衡量。 - **確定性與非確定性：**搜尋演算法可以像遵循食譜（確定性）或進行有根據的猜測（非確定性）。確定性演算法始終遵循相同的清晰步驟，例如二分搜尋，它將搜尋空間一分為二。非確定性演算法（例如線性搜尋）可能需要在最壞的情況下檢查整個集合。 ### 實際應用 - **資訊檢索：**想像在網路上搜尋特定的食譜。像Google這樣的搜尋引擎利用複雜的搜尋演算法來篩選大量資料集，為網站和內容建立索引。當您輸入查詢時，這些演算法會辨識與您的搜尋字詞最相關的網頁，並在幾分之一秒內提供您要尋找的資訊。 - **資料庫系統：**資料庫儲存大量訊息，從客戶記錄到金融交易。搜尋演算法是高效資料檢索的支柱。當您在資料庫管理系統中提交查詢時，搜尋演算法會快速找到符合您條件的特定記錄，從而節省您的時間和精力。 - **電子商務：**線上購物因高效搜尋而蓬勃發展。電子商務平台使用搜尋演算法來幫助您找到完美的產品。它們允許您根據價格、品牌或顏色等各種標準進行過濾和搜尋。在幕後，搜尋演算法為這些過濾器提供支持，精確定位滿足您偏好的產品，使您的購物體驗順暢高效。 - **網路：**網路是一個由互連設備組成的複雜網路。搜尋演算法在有效路由資料包方面發揮著至關重要的作用。它們可協助確定訊息在網路上傳輸的最佳路徑，確保您的視訊通話或線上遊戲順利運作。 - **人工智慧（AI）：**人工智慧正在為許多領域帶來革命性的變化。搜尋演算法是人工智慧應用的基本工具。它們使人工智慧系統能夠解決問題、做出決策，甚至玩國際象棋等遊戲。透過有效地搜尋大量資料並辨識模式，搜尋演算法有助於人工智慧背後的智慧。 - **模式辨識：**模式辨識允許電腦辨識和理解資料中的模式，例如圖像、語音或手寫。搜尋演算法對於模式辨識很有幫助。它們可協助電腦將新資料與現有模式進行匹配，從而實現照片中的臉部辨識或虛擬助理的語音辨識等應用。 ### 演算法類型：  **1. `Linear Search` ：** 想像一下，在一個雜亂無章的書架中尋找一本特定的書。線性搜尋模仿了這種方法。這是一種簡單的方法，可以**逐項**檢查集合中的每個專案，直到找到目標元素（您想要的書）。 **它的工作原理如下：** 1. 搜尋從集合中的第一項開始。 2. 此演算法將目標元素與目前專案進行比較。 ``` * If they match, the search is successful, and the algorithm returns the location (index) of the target element. ``` ``` * If they don't match, the algorithm moves on to the next item in the collection. ``` 3. 這種比較和移動的過程將持續下去，直到找到目標元素或耗盡整個集合。 **例子：** 讓我們在未排序清單中搜尋值「25」：\[10, 4, 12, 25, 18, 7\]。 - 搜尋從第一個元素 (10) 開始。由於 10 不是 25，我們繼續。 - 我們將目標 (25) 與下一個元素 (4) 進行比較。沒有匹配項，所以我們繼續。 - 重複此過程，直到到達索引 3 處的元素「25」。 **優勢：** - 易於理解和實施，使其成為初學者的好選擇。 - 適用於未排序的資料，在各種情況下提供靈活性。 **弱點：** - 對於大型資料集來說速度很慢。隨著集合大小的增加，搜尋時間也會成比例增加，導致海量資料集效率低。 > 怎麼運作的 ：  **2. `Binary Search` ：** 二分搜尋在**排序資料**上蓬勃發展。想像一下在一本精心組織的字典中搜尋特定單字。在這種情況下，二分搜尋比線性搜尋快得多。它透過重複地將已排序的集合分成兩半來進行操作。策略如下： 1. 此演算法首先將目標元素與集合的中間元素進行比較。 2. 如果目標元素等於中間元素，則搜尋成功，演算法會傳回中間元素的索引。 3. 如果目標元素**小於**中間元素，則在剩餘集合的**左半部**（不包括中間元素）繼續搜尋。 4. 如果目標元素**大於**中間元素，則在剩餘集合的**右半部**繼續搜尋。 5. 在集合的縮小範圍的一半上重複步驟 1-4，直到找到目標元素或搜尋空間減少到單一元素（與目標不符）。 **例子：** 讓我們在排序清單中搜尋值「18」：\[4, 7, 10, 12, 18, 25\]。 - 中間的元素是 12。 - 現在，右半部的中間元素是18。目標元素位於索引 4 處。 **優勢：** - 對於大型排序資料集，比線性搜尋快得多。透過在每次比較時消除一半的剩餘元素，二分搜尋可以快速縮小搜尋空間。 **弱點：** - 要求預先對資料進行排序，如果資料尚未組織，則加入額外的步驟。 - 不適合未排序的資料。二分搜尋策略依賴資料的排序性質，以在每次迭代期間有效地消除一半的可能性。 > 怎麼運作的 ：  --- 2. 排序演算法： --------- ### 什麼是排序？ 排序是指根據元素上的比較運算子對給定陣列或元素列表進行重新排列。比較運算子用於決定對應資料結構中元素的新順序。排序意味著將所有元素按升序或降序重新排序。 ### 介紹 在計算機科學中，排序演算法是將列表中的元素依序排列的演算法。最常用的順序是數字順序和字典順序，以及升序或降序。高效排序對於優化需要輸入資料位於排序清單中的其他演算法（例如搜尋和合併演算法）的效率非常重要。排序對於規範化資料和產生人類可讀的輸出通常也很有用。 形式上，任何排序演算法的輸出必須滿足兩個條件： 輸出是單調順序的（根據所需的順序，每個元素不小於/大於前一個元素）。 1. 輸出是輸入的排列（重新排序，但保留所有原始元素）。 2. 為了獲得最佳效率，輸入資料應儲存在允許隨機存取的資料結構中，而不是僅允許順序存取的資料結構中。 > 摘要：排序演算法是一組指令，它將陣列或列表作為輸入並將專案排列成特定的順序。排序最常見的是數字或字母（或字典）順序，並且可以按升序（AZ，0-9）或降序（ZA，9-0）。 ### 術語： - **就地分類：**想像一下重新整理抽屜裡的衣服而不把所有東西都拿出來。就地排序的工作原理類似。這些演算法透過修改現有清單本身內元素的順序來對資料進行排序，從而需要最少的額外空間。例如選擇排序、冒泡排序和插入排序。 - **內部排序：**這是指完全在電腦主記憶體 (RAM) 內執行的排序演算法。整個資料集可以一次載入到記憶體中，使其適合中小型資料集。堆排序、冒泡排序和合併排序等內部排序演算法通常用於記憶體資料操作。 - **外部排序：**當處理超出主存容量的海量資料集時，外部排序就發揮作用。這些演算法將大型資料集分解為較小的區塊，在磁碟（輔助儲存）上對它們進行排序，然後按特定順序將排序後的區塊合併在一起。合併排序是外部排序演算法的一個流行範例。 - **穩定排序：**想像一下按標題對書籍清單進行排序，但您也希望保留具有相同標題的書籍最初列出的順序。穩定的排序演算法在排序過程中保持具有相等鍵（值）的元素的相對順序。歸併排序和插入排序是穩定排序演算法的範例。 - **不穩定排序：**並非所有排序演算法都優先考慮順序保留。不穩定的排序演算法僅專注於實現所需的排序順序（例如，升序或降序），並且可能會打亂具有相同鍵的元素的相對位置。快速排序和堆排序是不穩定排序演算法的例子。 ### 排序演算法的特徵： - **時間複雜度：**這是指排序演算法完成其工作所需的時間（以步驟或比較而言）。我們通常在三種情況下分析時間複雜度： ``` * **Worst-case:** This represents the maximum amount of time the algorithm could take for a particular data size, considering the worst possible input scenario. ``` ``` * **Average-case:** This reflects the average time the algorithm takes across various random inputs of the same size. ``` ``` * **Best-case:** This represents the minimum amount of time the algorithm could take for a specific data size, considering the most favorable input scenario (e.g., data already partially sorted). ``` - **空間複雜度：**這是指排序演算法在原始資料所佔用的空間之外執行其操作所需的額外記憶體量。就地排序演算法透過在現有記憶體分配中操作資料來使用最少的額外空間，而某些演算法在排序過程中可能需要額外的臨時儲存。 - **穩定性：**此屬性決定排序演算法是否保留排序輸出中具有相等值的元素的原始順序。穩定的排序演算法維護這些元素的相對位置，這在特定應用中可能很重要。例如，如果您按姓名對客戶記錄清單進行排序，並且兩個客戶具有相同的姓名，您可能需要穩定的排序來維護它們最初列出的順序（例如，按帳戶建立日期）。 - **就地排序：**如前所述，就地排序演算法非常節省內存，因為它們透過修改原始列表本身來對資料進行排序，從而需要最少的額外空間。當處理大型資料集或記憶體有限時，這可能是有利的。 - **適應性：**一些排序演算法可以適應它們正在排序的資料的特徵。自適應排序演算法可以利用資料中預先存在的順序來提高其效能。例如，如果資料已經部分排序，自適應演算法可能會調整其方法以利用該部分順序並實現更快的排序。 ### 排序演算法的應用： - **搜尋演算法：**想像在電話簿中搜尋特定聯絡人。排序演算法是二分搜尋等高效搜尋演算法的無聲夥伴。透過確保電話簿條目按字母順序組織（排序），二分搜尋可以比透過未排序清單的線性搜尋更快找到您的聯絡人。 - **資料管理：**資料是現代計算的命脈，但有效管理資料需要組織。排序演算法在資料管理中起著至關重要的作用。當您按名稱、日期或大小對文件清單進行排序時，您可以更輕鬆地找到所需的特定文件。此外，排序的資料有助於更快地檢索和分析，從而節省您的時間和精力。 - **資料庫最佳化：**資料庫儲存大量訊息，從客戶記錄到金融交易。排序演算法顯著提高了資料庫查詢的效能。當您在電子商務資料庫中搜尋特定產品時，資料庫可能會根據您的搜尋條件（例如價格）對產品清單進行排序，以快速提供最相關的結果。 - **機器學習：**機器學習演算法從資料中學習以進行預測或分類。然而，需要準備好資料才能進行有效的學習。排序演算法通常用於資料預處理步驟，以在將資料輸入機器學習模型之前組織和建構資料。這可以顯著提高學習過程的準確性和效率。 - **資料分析：**資料分析就是從資訊中提取見解。排序演算法在這個過程中起著至關重要的作用。透過按各種屬性（例如日期、位置、客戶人口統計）對資料進行排序，您可以辨識在未排序的資料集中可能不易明顯的模式、趨勢和異常值。這使得資料分析師能夠更深入地了解資料，為金融、行銷和科學研究等各個領域的更好決策提供資訊。 - **作業系統：**作業系統管理電腦的資源。排序演算法適用於各種作業系統任務。例如，排序演算法可用於確定 CPU 任務的優先權、有效管理記憶體分配或以目錄結構組織文件，從而確保電腦系統的平穩運作。 > 這些只是排序演算法如何滲透到我們日常生活中的幾個例子。 ### 簡單解釋： 想像一下，你有一個雜亂的書架，裡面擺滿了各種主題的書。您想要按類型來組織它們（對它們進行排序）。以下是應用於此場景的排序演算法背後的主要概念和邏輯： 1. **比較：**您一次拿兩本書，並根據它們的類型進行比較（就像比較清單中的兩個元素）。 2. **交換：**如果類型不符合所需的順序（例如，歷史書放在小說之前），則交換它們在書架上的位置（就像重新排列清單中的元素一樣）。 3. **重複：**您繼續一次比較和交換兩本書，直到所有書籍按類型按所需順序排列（清單中的所有元素都根據所選標準排序）。 ### 排序演算法:: **1. 冒泡排序** **概念：**冒泡排序是一種簡單的排序演算法，它迭代列表，反覆比較相鄰元素，如果順序錯誤則交換它們。想像氣泡上升到液體表面 - 具有較大值的元素每次通過都會「冒泡」到清單中。這個過程一直持續到不需要交換為止，這表示清單已排序。 **解釋：** 想像一下將一堆亂七八糟的玩具進行分類。冒泡排序的工作原理如下： 1. **進行多次遍歷：**您多次瀏覽玩具清單。 2. **比較鄰居：**在每一遍中，您將每個玩具與其鄰居進行比較。如果第一個玩具更大（或排序術語中的“更高”），則交換它們的位置。 3. **泡泡上升：**每次交換時，較大的玩具（如泡泡）往往會移向清單的末端。 4. **繼續直到沒有交換：**您在整個清單中重複這些比較和交換，直到完成一次完整的傳遞而無需交換。這表示列表已排序。 **時間複雜度：**不幸的是，在最壞情況和平均情況下，冒泡排序的時間複雜度都是 O(n^2)。這意味著排序時間隨著元素數量 (n) 的二次方增加。對於大型資料集，冒泡排序變得非常低效。 **2.選擇排序** **概念：**選擇排序也遍歷列表，但它不是直接比較相鄰元素，而是專注於尋找未排序部分中的最小（或降序最大）元素。然後，該元素與未排序部分中的第一個元素交換，有效地將其放置在正確的排序位置。重複此過程，在每次通過時逐漸將未排序部分減少一個位置。 **解釋：** 想像一下根據身高安排學生拍照。選擇排序的工作原理如下： 1. **尋找最矮的（或最高的）：**在每次遍歷中，您搜尋該行的整個未排序部分以尋找最矮的學生（或按降序排列最高的學生）。 2. **與第一個學生交換：**一旦找到最矮的學生，就可以與未排序部分中的第一個學生交換他們的位置，有效地將他們放在行開頭的正確排序位置（最矮的在前面） 。 3. **重複並減少未排序部分：**繼續此過程，將交換的元素視為已排序部分的開頭，並在剩餘的未排序部分中搜尋最小元素。 **時間複雜度：**與冒泡排序類似，選擇排序在平均情況和最壞情況下的時間複雜度均為 O(n^2)。這意味著排序時間隨元素數量呈二次方增長，從而導致大型資料集效率低下。 **3.插入排序** **概念：**插入排序的工作原理是維護一個已排序的子列表，並迭代地將未排序部分中的元素插入到子列表中的正確位置。想像一下用塊建造一座塔，但您只能將它們一一加入，並且希望保持塔按高度排序。插入排序就像策略性地將每個新區塊放置在不斷增長的排序塔中的正確位置。 **解釋：** 想像一下按高度對書架上的書籍進行排序。插入排序的工作原理如下： 1. **從單一排序元素開始：**從一個空的排序子清單開始（就像書架上只有一本書）。 2. **從未排序的部分中取出一個元素：**您從未排序的堆中挑選一本書。 3. **移動與插入：**您可以將新書與已排序子清單中的每本書進行比較，從右端開始。如果新書較短（或按降序排列較高），則可以移動現有書籍以騰出空間，並將新書插入到正確的位置以保持排序順序。 4. **重複並增長已排序的子清單：**繼續此過程，從未排序的堆中獲取元素，將它們與已排序的子列表進行比較，並將它們插入到正確的已排序位置。這會逐漸增長排序的子列表，直到合併所有元素。 **時間複雜度：**插入排序適用於部分排序的資料。在一般情況下，對於已經排序的資料，它的時間複雜度為 O(n)，因此非常有效率。然而，對於完全隨機的資料（最壞情況），它可以回落到 O(n^2)，類似於冒泡排序和選擇排序。 **4. 歸併排序** **概念：**合併排序採用巧妙的「分而治之」策略來有效地對清單進行排序。它將問題分解為更小、更易於管理的子問題，然後按排序順序將解決方案重新組合在一起。 **解釋：** 想像一下，你有一支龐大的軍隊，需要按照身高來組織。歸併排序的工作原理如下： 1. **劃分：**將軍隊（列表）分成越來越小的組（子列表），直到每組只有一名士兵（元素）。這就像將一個大問題分解成更小、更容易解決的部分。 2. **征服：**由於現在每個子清單只有一名士兵（元素），因此它已被視為「已排序」。這是分而治之方法的基本情況。 3. **合併：**現在到了合併部分。您可以策略性地將已排序的子清單重新組合在一起，但以特定的方式。您比較每個子清單中的第一個士兵（元素），並將較短的士兵（較小的元素）放入最終的排序清單中。您不斷重複這種比較和放置，直到兩個子清單中的所有士兵（元素）都合併到最終的排序清單中。 4. **重複：**您繼續遞歸地應用這種分而治之的策略，直到整個原始軍隊（列表）從最短到最高（最小到最大）排序。 **時間複雜度：**合併排序的美妙之處在於它的時間複雜度。在平均情況和最壞情況下，其複雜度為 O(n log n)。這意味著對清單進行排序所需的時間隨著元素數量(n) 呈對數增長，這比冒泡排序、選擇排序或插入排序（其複雜度為O(n^2)）要快得多。 **5. 快速排序** **概念：**快速排序是另一種分而治之的排序演算法，但採用不同的方法。它依賴一個被稱為“樞軸”的策略性選擇元素來對列表進行分區並解決排序問題。 **解釋：** 想像一下，你的書架上堆滿了雜亂的書。快速排序的工作原理如下： 1. **選擇樞軸：**您從書架中選擇一本書（樞軸）。可以透過不同的方式選擇該主元，但通常它是清單中的第一個或最後一個元素。 2. **分區：**依樞軸重新排列書架上的書。類型按字母順序排列在樞軸類型之前的書籍位於一側，類型按字母順序排列在樞軸類型之後的書籍位於另一側。樞軸本身尚未放置。這種劃分有效地將較大的排序問題劃分為兩個較小的子問題。 3. **遞歸地征服：**現在，您將兩個子清單（成堆的書）中的每一個都視為單獨的排序問題。您可以遞歸地將快速排序策略套用到這些子列表，為每個子列表選擇一個新的主元並相應地對它們進行分割。 4. **合併：**兩個子清單排序後，將原始樞軸元素放置在兩個子清單之間正確的排序位置。現在，整個書架（清單）按字母順序排序。 **時間複雜度：**平均而言，快速排序的時間複雜度為 O(n log n)，這使得它對大型資料集非常有效率。然而，其性能可能會根據所選樞軸元件的不同而有所不同。選擇不當的主元（例如，總是排序或部分排序清單中的第一個或最後一個元素）可能會導致O(n^2) 的最壞情況，類似於冒泡排序、選擇排序和插入排序。 --- 3.樹的遍歷演算法： ---------- ### 什麼是樹遍歷？ 樹遍歷是指探索樹資料結構的系統方法。這就像有一個路線圖可以精確地存取鄰裡（樹）中的每個房屋（節點）一次，確保您不會迷路或重新存取同一棟房屋。與可以直接按位置存取元素的簡單資料結構不同，樹需要特定的演算法來導航節點之間的連接。這些遍歷演算法定義了存取每個節點的順序，可讓您對它們包含的資料執行操作，例如搜尋特定值、新增節點或刪除現有節點。遍歷技術有多種，每種技術都有其優點和應用，這使得樹遍歷成為電腦科學中的基本概念。 ### 介紹 樹遍歷，也稱為樹搜尋，是在僅包含樹邊的圖上執行的演算法，該演算法僅存取每個節點一次。此類別中的演算法僅在存取每個節點的順序上有所不同。遍歷樹的兩種經典方法是廣度優先搜尋（bfs），即在進入下一層之前存取同一級別或距根部距離的節點；深度優先搜尋，其中分支中的所有節點或從根到葉的一組路徑在傳遞到下一個分支之前都會被存取。還有其他方法，它們使用啟發式或隨機採樣在樹中移動來加速該過程。 #### 概括： - **目的：**系統探索樹資料結構，確保每個節點僅被存取一次。 - **優點：**支援搜尋特定資料、插入新節點或刪除現有節點等操作。 - **主要區別：**演算法分為兩種主要方法： ``` * **Breadth-First Search (BFS):** Visits nodes level by level, starting from the root and progressing outward. ``` ``` * **Depth-First Search (DFS):** Explores one branch (path) as far as possible before backtracking and exploring another branch. Further variations of DFS exist for specific applications. ``` - **其他技術：**其他方法利用啟發式或隨機取樣來加快遍歷速度。 ### 術語： **1. 樹：**一種分層資料結構，模擬顛倒的樹，其節點（資料點）透過邊（連結）連接。節點可以有零個或多個子節點，形成分支，並最終導致底部的葉節點（沒有子節點的節點）。 **2. 節點：**樹的基本建構塊，包含資料和對其子節點的潛在引用。想像一下附近的一棟房子——它保存資訊（資料）並透過道路（邊緣）連接到其他房子（子節點）。 **3.根節點：**樹中最頂層的節點，作為遍歷演算法的起點。將其視為附近的主屋，從這裡開始探索。 **4.葉子節點：**沒有子節點的節點，代表樹中分支的「末端」。想像位於社區邊緣的房屋，沒有進一步的聯繫。 **5.邊：**樹中兩個節點之間的連接，描述它們之間的關係。想想連接附近房屋的道路。 **6. 遍歷：**僅存取樹中每個節點一次的系統過程。這就像探索整個社區，確保您參觀每棟房屋而不會錯過任何一棟或重新參觀同一棟房屋。 **7.廣度優先搜尋（BFS）：**一種從根開始向外逐階存取節點的遍歷方法。想像一下，透過造訪第一條街道（層）上的所有房屋，然後再前往下一條街道（層）上的房屋來探索社區。 **8.深度優先搜尋（DFS）：**一種遍歷方法，在回溯和探索另一個分支之前，先沿著一個分支（路徑）探索盡可能遠的地方。想像一下，沿著一條路（分支）探索附近區域，直到到達死胡同（葉節點），然後回溯並嘗試另一條路。 DFS 的常見變體包括前序、中序和後序，每種形式都有存取分支內節點的特定順序。 ### 樹遍歷演算法的特點： **1. 只存取每個節點一次：** - 樹遍歷的核心原則是保證樹中的每個節點都被恰好存取一次。這可以防止冗餘處理並確保對樹結構的完整探索。 **2. 探訪順序：** - 雖然每個節點僅被存取一次，但樹遍歷演算法的定義特徵在於它們存取節點的順序。不同的演算法會優先考慮以特定順序探索節點，從而產生不同的遍歷模式。 **3. 遞歸與迭代實作：** - 樹遍歷演算法可以遞歸或迭代地實現。遞歸方法涉及定義在子樹上呼叫自身的函數，模仿樹的層次結構性質。迭代方法利用迴圈和堆疊來管理遍歷過程。 **4.時間與空間複雜度：** - 與任何演算法一樣，樹遍歷方法具有相關的時間和空間複雜度。時間複雜度是指基於樹中節點數 (n) 執行演算法所需的時間量。常見的複雜度包括 O(n)（線性）和 O(n log n)（對數），BFS 和 DFS 變體根據實現的不同具有不同的複雜度。空間複雜度反映了演算法執行所需的額外記憶體量，通常取決於用於遍歷的資料結構（例如堆疊）。 **5.特定於應用的選擇：** - 樹遍歷演算法的選擇在很大程度上取決於手頭上的具體任務。例如，BFS 可能更適合尋找樹中兩個節點之間的最短路徑，而具有變體的 DFS 可用於搜尋特定資料或探索所有可能的路徑。 **6. 不可修改：** - 一般來說，樹遍歷演算法旨在探索現有的樹結構，而不修改樹本身。它們存取節點，對它們包含的資料執行操作，但通常不會更改樹中的連接或資料。 ### 樹遍歷演算法的應用： **1. 檔案系統導航：** - 作業系統使用樹遍歷演算法來導航電腦上的目錄結構。將您的檔案系統想像成一棵樹，其中資料夾作為節點，子資料夾和檔案作為子節點。廣度優先搜尋 (BFS) 可用於列出目錄及其子目錄中的所有文件，而深度優先搜尋 (DFS) 可用於在層次結構中定位特定文件。 **2. 網頁抓取：** - 像 Google 這樣的搜尋引擎利用 BFS 或 DFS 變體來抓取網路。他們從種子 URL（根節點）開始，有系統地探索連結的網頁（子節點）。 BFS 確保在進入更深層次之前探索特定層級（網站）的所有頁面，而 DFS 可能會在回溯和探索其他網站之前更深入地研究特定網站。 **3.人工智慧（AI）：** - 人工智慧中的遊戲演算法通常使用樹遍歷來探索可能的動作及其結果。將西洋棋遊戲想像成一棵樹，當前棋盤狀態作為根節點，潛在的移動作為通往新棋盤狀態（子節點）的分支。具有修剪技術的深度優先搜尋可用於評估潛在的移動並確定最有希望的策略。 **4.社會網絡分析：** - 社群媒體平台利用樹遍歷來推薦聯繫或探索朋友網路。將您的個人資料想像為一個節點，將朋友作為子節點。遍歷演算法可用於建議基於共同朋友（樹中的共同祖先）的連接或探索網路以了解資訊流或影響力。 **5.電腦圖形學：** - 光線追蹤是一種用於在 3D 圖形中實現逼真光照效果的技術，通常採用樹遍歷演算法。虛擬場景可以表示為一棵樹，其中物件作為節點，它們的空間關係作為邊緣。遍歷有助於確定光線與哪些物件交互，從而建立逼真的陰影和反射。 **6. 網路路由：** - 電腦網路中的路由協定使用樹遍歷的變體來找到資料包到達目的地的最佳路徑。將網路想像成一棵樹，路由器作為節點，連接作為邊緣。遍歷演算法有助於確定資料在網路中不同點之間傳輸的最有效路徑。 ### 簡單解釋： 想像一下，您是一名送貨員，您有一堆包裹要在附近送貨。附近的房屋透過道路連接起來，形成樹狀結構。 - **房屋是節點：**每個房屋代表樹中的一個節點，包含地址（資料）等資訊以及可能由道路（邊）連接的相鄰房屋（子節點）的地址。 - **您的遞送路線就是遍歷：**樹遍歷演算法定義您存取每個房屋（節點）以遞送包裹（對資料執行操作）的順序。 **您可以透過兩種主要方式進行交付，這對應於兩種常見的樹遍歷方法：** **1. 廣度優先搜尋（BFS）：像一個不斷擴大的圓圈一樣提供：** - 您從清單中的第一個房子（根節點）開始。 - 您將包裹運送到該房屋，然後**存取同一條街道（層）上與其直接相連的所有房屋（鄰居/子節點），**然後繼續前進。 - 一旦您運送到第一條街道（層）上的所有房屋，您就會移動到下一條街道（層）並重複該過程，在前往下一層之前存取該層上的所有房屋。 這就像一個不斷擴大的圓圈——您從中心（根部）開始，逐漸向外工作，確保在移動到下一個之前，您可以運送到街道（層）上的所有房屋。如果您想先優先考慮向附近區域的所有房屋送貨，這種方法很有用，也許是因為它們都在同一個街區，並且最大限度地減少行程時間很重要。 **2. 深度優先搜尋（DFS）：深入研究一條街道：** - 您從清單中的第一棟房子（根節點）開始。 - 您將包裹運送到該房屋，然後**選擇一條從該房屋引出的相連道路（分支），並沿著它一直走到終點（葉節點）** ，在原路返回之前運送到該路徑（分支）上的所有房屋。 - 一旦到達該路的盡頭（分支），您就回溯到最後一個路口（父節點）並選擇另一條路（分支）進行探索，將物品運送到該新路徑上的所有房屋，直到到達另一個死胡同（葉節點） 。 這就像探索迷宮一樣——你選擇一條路徑（分支）並沿著它一路走下去，運送到沿途的房屋，直到你到達死胡同（葉節點）。然後你原路返回並嘗試另一條路徑（分支），直到你到達所有房屋。如果您正在快速查找特定地址並希望在前往另一條街道（分支）之前探索整條街道（分支），則此方法可能會很有用。 ### 演算法類型： **1.廣度優先搜尋（BFS）：** - **概念：** BFS逐級存取節點，從根節點開始，逐層向外進行。想像一下探索一個家譜； BFS 將在向下移動到其子節點（下一層）之前存取所有兄弟節點（同一層級的節點）。 - **怎麼運作的：** ``` 1. Start at the root node and add it to a queue (a data structure that follows a "first-in, first-out" principle). ``` ``` 2. Remove the first node from the queue and visit it (process its data). ``` ``` 3. Add all the unvisited child nodes of the removed node to the back of the queue. ``` ``` 4. Repeat steps 2 and 3 until the queue is empty. ``` - **例子：** 考慮一棵簡單的樹： ``` A / \ B C / \ / \ D E F G ``` BFS 遍歷將依下列順序存取節點：A、B、C、D、E、F、G。 **2.深度優先搜尋（DFS）：** - **概念：** DFS 沿著一個分支（路徑）探索盡可能遠的距離，然後回溯並探索另一個分支。 DFS 還有更多變體，但這裡我們將重點放在基本方法上。 - **怎麼運作的：** ``` 1. Start at the root node. ``` ``` 2. Visit the node (process its data). ``` ``` 3. If there are any unvisited child nodes, choose one and repeat steps 2 and 3, essentially following that branch (path) until you reach a leaf node (a node with no children). ``` ``` 4. Once you reach a leaf node, backtrack to the parent node and repeat step 3, exploring another unvisited child node (if any) of the parent. ``` ``` 5. Continue backtracking and exploring until all nodes have been visited. ``` - **例子：** 使用與之前相同的樹： ``` A / \ B C / \ / \ D E F G ``` DFS 遍歷可以以各種順序存取節點，具體取決於每一步選擇的子節點。可能的順序是：A、B、D、E、C、F、G。 **主要區別：** - BFS強調逐級存取節點，確保在深入之前先進行更廣泛的探索。 - DFS 優先考慮完全探索一個分支（路徑），然後再轉向另一個分支（路徑），可能會更快到達特定節點，但不能保證逐級存取。 結論 ： ---- 總而言之，這個基本演算法之旅為您理解基本的搜尋、排序和樹遍歷技術奠定了堅實的基礎。這些解釋使用了清晰的語言和相關的類比，使這些抽象概念更加平易近人、直觀。無論您是經驗豐富的程式設計師還是剛開始涉足電腦科學，這種理解都為建立高效且有效的程式奠定了基石。 隨著您對知識的渴望與日俱增，請更深入研究！我的儲存庫充滿了各種演算法和資料結構，等待您的探索（[演算法-資料-結構](https://github.com/m-mdy-m/algorithms-data-structures)）。這是一個寶庫，您可以在這裡進行實驗、練習並鞏固您對這些基本建置模組的掌握。 **雖然某些部分仍在建設中，**反映了我自己正在進行的學習旅程（這個旅程可能需要 2-3 年才能完成！），但儲存庫正在不斷發展。 冒險不止於探索！我非常重視您的反饋。在文章中遇到障礙？有建設性的批評要分享嗎？還是只是想引發一場關於演算法的對話？我的門（或者更確切地說，我的收件匣）總是開著的。在 Twitter 上聯絡： [@m\_\_mdy\_\_m](https://twitter.com/m__mdy__m)或 Telegram：@m\_mdy\_m。此外，我的 GitHub 帳戶[m-mdy-m](https://github.com/m-mdy-m)歡迎討論和貢獻。讓我們共同建立一個充滿活力的學習社區，在這裡我們分享知識並突破我們的理解界限。 --- 原文出處：https://dev.to/m__mdy__m/basic-algorithms-5bep
*揭露：這篇文章包含附屬連結；如果您透過本文中提供的不同連結購買產品或服務，我可能會獲得補償。* [](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 朋友們大家好，如果您正在準備技術面試，那麼您必須準備系統設計問題，因為這是大多數人都遇到困難的地方。 即使經驗豐富的程式設計師也很難解決常見問題，例如如何設計 WhatsApp 或 YouTube，或回答[API 閘道與負載平衡器](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)、[水平與垂直擴充](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5)之間的差異。 在當今日益分散的世界中，建立強大且可擴展的系統的能力是頂級科技公司所追求的基本技能。 系統設計面試已成為評估候選人解決現實挑戰、評估權衡以及設計能夠處理複雜需求的系統的能力的關鍵組成部分。 之前也分享過[資料庫分片](https://medium.com/javarevisited/what-is-database-sharding-scaling-your-data-horizontally-1dc12b33193f)、[系統設計主題](https://dev.to/somadevtoo/10-must-know-system-design-concepts-for-interviews-2fii)、 [微服務架構](https://medium.com/javarevisited/10-microservices-design-principles-every-developer-should-know-44f2f69e960f)、 [系統設計演算法](https://dev.to/somadevtoo/10-distributed-data-structures-and-system-design-algorithms-for-interviews-a4j)，今天就分享一下系統設計面試題。 在本文中，我精心設計了*50 多個系統設計面試問題，*以指導應徵者從基本概念到複雜的設計場景。 無論您是旨在掌握要點的初學者，還是尋求提高技能的經驗豐富的工程師，這些問題不僅可以幫助您為面試做好準備，還可以提高您對系統設計和軟體架構的了解。 順便說一句，如果您正在準備系統設計面試並想深入學習系統設計，那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站，它們有許多很棒的系統設計課程 [](https://bit.ly/3pMiO8g) PS 繼續閱讀直到最後。我有一份免費獎金給你。 --- 2024 年 50 道系統設計面試題 ------------------ 這裡列出了針對初學者和經驗豐富的開發人員的 50 個流行的系統設計面試問題，您可以解決這些問題來開始準備。 在此列表中，我不僅分享了簡單、中等和困難的系統設計問題，還分享了基於概念的問題，例如 API 閘道與負載平衡器或微服務與整體式設計。您可以練習這些系統設計問題和麵試問題。 ### 基於系統設計概念的問題 1\. API網關和負載平衡器有什麼差別？ \[ [解決方案](https://javarevisited.substack.com/p/difference-between-api-gateway-and?utm_source=profile&utm_medium=reader2)\] 2\. 反向代理和正向代理有什麼不同？ [（回答）](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5) 3\. 水平縮放和垂直縮放有什麼不同？ [（回答）](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09) 4\. 微服務和單體架構有什麼差別？ [（回答）](https://dev.to/somadevtoo/difference-between-microservices-vs-monolithic-applications-for-system-design-interview-2lb5) 5\. 垂直分區和水平分區有什麼差別？ 6.什麼是速率限制器？它是如何運作的？ [（回答）](https://javarevisited.substack.com/p/what-is-rate-limiter-how-does-it?utm_source=profile&utm_medium=reader2) 7\. 單一登入 (SSO) 的工作原理是什麼？ [（回答）](https://javarevisited.substack.com/p/how-does-sso-single-sign-on-authentication?utm_source=profile&utm_medium=reader2) 8\. Apache Kafka 是如何運作的？為什麼這麼快？ [（回答）](https://javarevisited.substack.com/p/how-does-apache-kafka-works?utm_source=profile&utm_medium=reader2) 9\. Kafka、ActiveMQ 和 RabbitMQ 之間的差異？ [（回答）](https://javarevisited.substack.com/p/difference-between-kafka-rabbitmq?utm_source=profile&utm_medium=reader2) 10\. JWT、OAuth 和 SAML 之間的差異？ [（回答）](https://javarevisited.substack.com/p/difference-between-jwt-oauth-and?utm_source=profile&utm_medium=reader2) 這是來自 DesignGuru.io 的一個很好的圖表，它解釋了垂直和水平資料庫分區之間的區別 [](https://bit.ly/3pMiO8g) --- ### 𝐄𝐚𝐬𝐲 系統設計問題 現在，讓我們開始討論簡單的系統設計問題。這些是常見問題，您需要設計隨處使用的小型實用程序，例如 URL 縮短器： 1\. 如何設計像TinyURL這樣的URL縮短器 \[[解決方案](https://bit.ly/3dZoQ2G)\] 2\. 如何設計像Pastebin這樣的文字儲存服務？ \[[解決方案](https://www.youtube.com/watch?v=9wAj-5IMdyU)\] 3\. 設計內容傳遞網路（CDN）？ \[[解決方案](https://bit.ly/3dZoQ2G)\] 4\. 設計停車庫【[解決方案](https://bit.ly/3eMUosX)】 5.設計自動販賣機【[解決方案](https://javarevisited.blogspot.com/2016/06/design-vending-machine-in-java.html)】 6\. 如何設計分散式鍵值存儲 7.設計分散式緩存 8.設計分散式作業調度器 9\. 如何設計認證系統 10\. 如何設計統一支付介面（UPI） 並且，以下是來自 Educative.io 的 YouTube 高級設計供您參考： [ ](https://bit.ly/3Mnh6UR) --- ### 𝐌𝐞𝐝𝐢𝐮𝐦 系統設計問題 現在，是時候看看中等難度的系統設計問題了。這些問題既不簡單也不太困難，但您需要對各種軟體架構元件和系統設計概念有深入的了解才能回答這些問題。 11.設計Instagram【[解決方案](https://bit.ly/3BqamCL)】 12\. 如何設計 Tinder 13.設計WhatsApp（[解決方案](https://bit.ly/3SbA9Eu)） 14\. 如何設計 Facebook 15.設計推特 16.設計Reddit 17.設計Netflix【[解決方案](https://bit.ly/3bbNnAN)】 18.設計Youtube【[解決方案](https://bit.ly/3bbNnAN)】 19\. 設計谷歌搜尋 20.設計像亞馬遜這樣的電子商務商店 21.設計Spotify 22.設計TikTok 23\. 設計 Shopify 24\. 設計愛彼迎 25\. 為搜尋引擎設計自動完成功能 26.設計速率限制器 27.像Kafka一樣設計分散式訊息佇列 28.設計航班預訂系統 29.設計線上程式碼編輯器 30.設計證券交易所繫統 31.設計一個分析平台（指標和日誌記錄） 32.設計通知服務 33.設計支付系統 而且，這是來自 DesignGuru 的 Netflix 高級系統設計，這是我最喜歡的學習系統設計的地方之一 [](https://bit.ly/3pMiO8g) --- ### 𝐇𝐚𝐫𝐝 系統設計問題 現在，讓我們來看看一些需要你付出更多努力的難題。解決這些問題你可能會感到不舒服，但透過這樣做你會變得更好。 34\. 如何設計像 Yelp 這樣的基於位置的服務 35\. 設計優步 36.設計像 Doordash 這樣的送餐應用程式 37.設計Google文件 38\. 如何設計Google地圖 39\. 設計縮放 40\. 如何設計像 Dropbox 這樣的檔案共用系統 41\. 如何設計像BookMyShow這樣的訂票系統 42.設計分散式網路爬蟲 43.如何設計程式碼部署系統 44.設計像S3這樣的分散式雲端存儲 45\. 如何設計分散式鎖定服務 這是 Educative.io 的 Google 地圖的高級設計 [](https://bit.ly/3Mnh6UR) 而且，如果您需要解決方案，則可以在 @ Ashish Pratap Singh 的 GitHub 儲存庫中找到它們：https://github.com/ashishps1/awesome-system-design-resources/blob/main/README.md#system-design-interview-problems 而且，現在可以看到更多有關係統設計面試準備的資源 --- ### 系統設計訪談資源： 而且，這裡列出了最佳系統設計書籍、線上課程和練習網站，您可以查看這些內容，以便更好地為系統設計面試做好準備。這些課程中的大多數也回答了我在這裡分享的問題。 1. [**DesignGuru 的 Grokking 系統設計課程**](https://bit.ly/3pMiO8g)：一個互動式學習平台，提供實作練習和真實場景，以增強您的系統設計技能。 2. [**《系統設計面試》作者：Alex Xu**](https://amzn.to/3nU2Mbp) ：這本書深入探討了系統設計概念、策略和麵試準備技巧。 3. Martin Kleppmann 的[**「設計資料密集型應用程式」**](https://amzn.to/3nXKaas) ：綜合指南，涵蓋了設計可擴展且可靠的系統的原則和實踐。 4. [LeetCode 系統設計 標籤](https://leetcode.com/explore/learn/card/system-design)：LeetCode 是一個受歡迎的技術面試準備平台。 LeetCode 上的系統設計標籤包含各種練習問題。 5. GitHub 上的[**「系統設計入門」**](https://bit.ly/3bSaBfC) ：精選的資源列表，包括文章、書籍和影片，可幫助您準備系統設計面試。 6. [**Educative 的系統設計課程**](https://bit.ly/3Mnh6UR)：一個互動式學習平台，提供實作練習和真實場景，以增強您的系統設計技能。 7. **高可擴展性部落格**：該部落格包含有關高流量網站和可擴展系統架構的文章和案例研究。 8. **[YouTube 頻道](https://medium.com/javarevisited/top-8-youtube-channels-for-system-design-interview-preparation-970d103ea18d)**：請參閱「Gaurav Sen」和「Tech Dummies」等頻道，以取得有關係統設計概念和麵試準備的富有洞察力的影片。 9. [**ByteByteGo**](https://bit.ly/3P3eqMN) ：Alex Xu 的一本現場書籍和課程，用於系統設計面試準備。它包含《系統設計訪談》第一捲和第二卷的所有內容，並將隨即將推出的第三卷進行更新。 10. [**Exponent**](https://bit.ly/3cNF0vw) ：一個專為面試準備的網站，特別是針對亞馬遜和谷歌等 FAANG 公司，他們還有很棒的系統設計課程和許多其他材料，可以幫助您破解 FAAN 面試。 [](https://bit.ly/3P3eqMN) image\_credit - [ByteByteGo](https://bit.ly/3P3eqMN) 請記住透過參與實際專案和參加模擬面試將理論知識與實際應用結合。不斷的練習和學習無疑會提高你在系統設計面試中的熟練程度。 這就是2024 年50 個系統設計面試問題。有線上課程以及我分享過的書籍。 無論您是準備技術面試的候選人，還是希望提高技能的經驗豐富的專業人士，掌握系統設計都是在不斷發展的科技行業中推進職業生涯的關鍵一步，這些問題將對您有所幫助。 。 ### 獎金 正如承諾的，這是給你的獎金，一本免費的書。我剛剛找到一本新的免費書籍來學習分散式系統設計，您也可以在 Microsoft 上閱讀它 --- [https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT -eBook-設計分散式系統.pdf](https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf)  謝謝 --- 原文出處：https://dev.to/somadevtoo/top-50-system-design-interview-questions-for-2024-5dbk
身為開發人員，我們一直在尋找不僅能簡化我們的工作流程，還能提升專案視覺美感的工具。不起眼的圖標是實現流暢、專業的數位介面的無名英雄之一。圖示可能很小，但它們對使用者體驗和設計的影響卻很大。這就是為什麼選擇正確的圖標庫不僅僅是一個美觀問題；更是一個問題。它是高效前端開發的重要組成部分。 到 2024 年，圖標庫的格局變得既龐大又複雜，提供的功能可以滿足從互動式網路、應用程式到商業平台的廣泛需求。無論您是追求高品質的向量圖示、SVG 精靈還是無縫融入 React 應用程式的可自訂選項，總有一個專為您量身定制的圖示庫。 今天，我將深入探討每個開發人員都應該考慮的 5 個最佳圖示庫。這些函式庫不僅種類豐富、風格豐富，而且還提供全面的實現支持，尤其是在基於 React 的專案中。無論您是經驗豐富的開發人員還是剛起步的開發人員，這些工具都將幫助您建立更具吸引力、響應更快且更具視覺吸引力的數位體驗。讓我們探索這些標誌性的寶藏以及如何將它們整合到您的下一個專案中。敬請關注！ 1.Hugeicons 專業版 --------------- **網址：https://hugeicons.com/**  當談到為現代網路和行動應用程式量身定制的圖標庫時，Hugeicons Pro 脫穎而出，成為頂級競爭者。此圖標庫擁有大量高品質向量圖標，旨在滿足專業設計專案和商業用途的需求。 ### 為開發人員提供的主要功能： **廣泛的集合：** Hugeicons Pro 提供了無限的圖標集合，適用於各種主題和應用程式，非常適合希望找到符合任何專案美學的圖標的開發人員。尋找圖標很容易，因為他們使用 Algolia。 **SVG 格式：** Hugeicons Pro 中的每個圖示都有多種格式，包括 SVG，確保它們可擴展並在任何螢幕尺寸或解析度下保持其品質。 **可自訂：** Hugeicons Pro 圖示是完全可自訂的，可讓開發人員調整顏色和尺寸以滿足其特定的設計要求，從而在不影響視覺吸引力的情況下增強使用者體驗。 **與 Web 專案輕鬆整合：**此程式庫支援 CSS 和 SVG sprite 系統，可輕鬆整合到現有 Web 專案或新開發專案中。 ### 如何在 React 專案中安裝 Hugeicons Pro： 將 Hugeicons Pro 整合到您的 React 專案中非常簡單，可以輕鬆增強您的開發工作流程。以下是有關如何執行此操作的簡單指南： 新增圖示庫：首先，您需要安裝 Hugeicons Pro 軟體包。 Hugeicons Pro提供了一個NPM包，您可以使用npm或yarn將其加入到您的專案中。 ``` npm install hugeicons-react ``` 或者 ``` yarn add hugeicons-react ``` **匯入圖示：**安裝後，您可以將圖示匯入到 React 元件中。例如，要使用特定圖標，您可以像這樣匯入它： ``` import { Home01Icon } from "hugeicons-react"; <Home01Icon size={32} /> ``` **根據需要自訂：**使用內聯樣式或 CSS 自訂圖標，以更好地適應您的應用程式的設計。此步驟增強了圖標與現有設計風格的適應性和視覺整合。 **自訂圖示顏色** 透過傳遞 color 屬性來變更圖示的顏色： ``` import { MarketingIcon } from "hugeicons-react"; <MarketingIcon color="#00FF00" /> // Green color ``` **旋轉圖示** ``` import { ListSettingIcon } from "hugeicons-react"; <ListSettingIcon rotate={90} /> // Rotate 90 degrees ``` **動畫圖示** ``` import { MarketingIcon } from "hugeicons-react"; <MarketingIcon animate={true} /> // Enable animation ``` Hugeicons Pro 不僅僅是一個圖標集；它是一個強大的工具，使開發人員能夠透過視覺吸引力、功能強大且易於整合的圖標來增強他們的專案。無論您是建立網站、行動應用程式還是桌面應用程式，Hugeicons Pro 都能提供現代開發人員成功所需的功能和風格。 #### 3,800 多個免費 SVG 圖示：https://hugeicons.com/icons #### Hugeicons 免費 React 圖示：https://github.com/hugeicons/hugeicons-react --- 2. 盒子圖標 ------- **網址：https://boxicons.com/**  Boxicons 以其適應性和易用性而聞名，使其成為從事 Web 和商業專案的開發人員的最愛。該圖標庫提供了廣泛的圖標，非常適合增強任何專案的視覺吸引力和用戶體驗，因為圖標發揮著重要作用。 **為開發人員提供的主要功能：** **綜合庫：** Boxicons 提供了廣泛的圖標，涵蓋各種類別和風格，從基本圖標到更精緻的設計，確保您擁有滿足每種需求的完美圖標。 **完全開源：**開發人員欣賞 Boxicons 的開源性質，它允許廣泛的客製化並整合到個人和商業專案中，而無需任何授權費用。 **SVG 和 Web 字體支援：** Boxicons 包括 SVG 和 Web 字體格式的圖示。它提供可擴展性和易於自訂性，而網頁字體非常適合跨大型應用程式一致實施。 **定期更新和加入：** Boxicons 庫定期更新新的圖標和功能，使其與現代開發專案保持相關性和有用性。 **如何在 React 專案中安裝 Boxicons：** 將 Boxicons 合併到您的 React 專案中是一個順利且簡單的過程，非常適合希望透過高品質圖示快速增強其應用程式的開發人員。 **新增圖示庫：**要開始在 React 應用程式中使用 Boxicons，首先需要從 npm 安裝它。您可以使用以下命令來執行此操作： ``` npm install boxicons ``` 或者如果您使用紗線，您可以執行： ``` yarn add boxicons ``` **匯入圖示：**安裝後，您可以將所需的圖示直接匯入到 React 元件中。 Boxicons 可以作為 SVG 或 Web 字體包含在內，但導入 SVG 圖示的方法如下： ``` import { bxAlarm } from 'boxicons'; ``` 在元件中使用圖示：在 React 元件中使用圖示非常簡單。只需將導入的圖示放入 JSX 中需要的地方即可。以下是如何執行此操作的範例： ``` function App() { return ( <div> <h1>Don't Forget Your Meeting!</h1> <bxAlarm style={{ color: 'red', fontSize: '48px' }} /> </div> ); } ``` **根據需要設定樣式：**使用 CSS 或內聯樣式自訂圖標，以符合應用程式的美感。這種靈活性可確保 Boxicons 無縫整合到您的專案中，從而增強功能和風格。 Boxicons 旨在滿足需要為其 Web 和行動應用程式提供可靠、多功能且易於整合的圖標的開發人員的需求。憑藉其強大的功能和易用性，Boxicons 使開發人員能夠有效地建立更具吸引力和視覺吸引力的專案。無論您是建立小型個人網站還是大型商業平台，Boxicons 都能提供您所需的工具，將漂亮的圖示無縫融入您的設計中。您也可以考慮引導圖示。 3. 表格圖標 ------- **網址：https://tabler.io/icons**  Tabler Icons 是開源圖標庫領域的佼佼者，提供了一組乾淨簡約的圖標，非常適合現代 Web 和行動應用程式。這個免費的圖標庫為開發人員提供了設計精美、易於整合的圖標，可增強任何專案的功能和美感。 **為開發人員提供的主要功能：** **純 SVG 圖示：** Tabler 圖示庫中的每個圖示均以可擴展的 SVG 形式提供，確保它們在任何尺寸下都顯得清晰明快。這種 SVG 格式非常適合在各種應用程式中實現高品質的視覺吸引力。 **開源：**作為一個完全開源的圖標庫，Tabler Icons 允許開發人員完全自由地在個人和商業專案中使用、修改和分發圖標，沒有任何限制。 **廣泛的集合：** Tabler Icons 擁有超過 1250 個可用圖標，可確保您擁有幾乎所有場景（從一般操作到特定資料表示）的完美圖標。 **圖示字體和 CSS 整合：**除了 SVG 之外，Tabler Icons 還支援圖示字體，使其能夠靈活地整合到各種 Web 專案中，包括那些使用 Bootstrap 等框架的專案。 **如何在 React 專案中安裝 Tabler 圖示：** 由於 Tabler Icons 對現代開發實踐的支持，將 Tabler Icons 合併到 React 專案中非常簡單。您可以透過以下方式開始： 新增圖示庫：首先，使用npm或yarn安裝Tabler圖示。此步驟簡單快捷，可以立即存取圖示： ``` npm install @tabler/icons ``` 或者 ``` yarn add @tabler/icons ``` 匯入圖示：安裝後，您可以將所需的圖示直接匯入到 React 元件中。例如： ``` import { IconAlertCircle } from '@tabler/icons'; ``` 在元件中使用圖示：在 React 元件中實作圖示很容易。以下是如何將圖示整合到 JSX 中的範例： ``` function App() { return ( <div> <h1>Attention Needed!</h1> <IconAlertCircle style={{ color: 'red', fontSize: '24px' }} /> </div> ); } ``` **自訂選項：** Tabler 圖示是可自訂的，可讓開發人員直接透過 props 或 CSS 調整大小、顏色、描邊寬度，自訂圖示以完美適應任何專案的設計和品牌。 對於尋求無縫融入任何專案的高品質開源圖示庫的開發人員來說，Tabler Icons 是一個絕佳的選擇。該程式庫的易用性以及與 React 和其他現代 Web 技術的整合使其成為開發人員的首選資源，旨在以最小的麻煩增強應用程式的視覺吸引力和功能。 4.字體真棒 ------ **網址：https://fontawesome.com/**  Font Awesome 是開發社群中最知名、最廣泛使用的圖示庫之一。該工具包以其多功能性和廣泛的收藏而聞名，提供適合任何專案（從 Web 應用程式到行動介面）的免費和高級圖示。 Font Awesome 的受歡迎程度得益於它與包括 Bootstrap 在內的眾多框架的兼容性，這使其成為開發人員資源中的主要內容。 **為開發人員提供的主要功能：** **全面的圖標集：** Font Awesome 提供了數千個圖標，被稱為“完美圖標”，這些圖標經過精心設計，清晰度和視覺吸引力。這個廣泛的集合確保開發人員能夠存取適合每種可能用途的正確圖標，從常見的介面操作到專用符號。 **Bootstrap 相容性：** Font Awesome 圖示可輕鬆與 Bootstrap 集成，透過與現有設計模式和樣式保持一致來增強使用者介面，使其成為利用 Bootstrap 進行專案的開發人員的最愛選擇。 **材質符號及更多：**除了傳統圖示之外，Font Awesome 還包括各種非常適合現代 Web 和行動應用程式的材質符號，提供遵循 UI/UX 最新趨勢的設計。 **開源和進階版本：** Font Awesome 提供的開源圖示使從事個人專案或商業活動的開發人員可以使用它。此外，優質圖標提供更專業和多樣化的設計，滿足更廣泛的需求。 **如何在 React 專案中安裝 Font Awesome：** Font Awesome 可以無縫整合到 React 應用程式中，為開發人員提供了觸手可及的強大圖標工具包。以下是如何在 React 專案中包含 Font Awesome 的方法： 新增圖示庫：透過npm 或yarn 將Font Awesome 加入到您的專案中來安裝Font Awesome。如果您使用免費版本，可以使用以下命令安裝： ``` npm install @fortawesome/fontawesome-free ``` 或者 ``` yarn add @fortawesome/fontawesome-free ``` **匯入圖示：**安裝後，將您需要的特定圖示匯入到 React 元件中。 Font Awesome 使用庫系統來加入圖標，因此您首先導入打算使用的圖標，然後將它們加入到庫中： ``` import { library } from '@fortawesome/fontawesome-svg-core'; import { faCoffee } from '@fortawesome/free-solid-svg-icons'; library.add(faCoffee); ``` **在元件中使用圖示：**您可以輕鬆地在元件中使用匯入的圖示。以下是使用 FontAwesomeIcon 元件的範例： ``` import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; function App() { return ( <div> <h1>Enjoy Your Coffee!</h1> <FontAwesomeIcon icon="coffee" style={{ color: 'brown', fontSize: '24px' }} /> </div> ); } ``` **自訂和設計您的圖標：** Font Awesome 允許輕鬆自訂圖標，例如更改大小、顏色和其他 CSS 屬性，確保圖標完美匹配您的應用程式的風格。 Font Awesome 與 React 的整合不僅簡化了開發過程，還透過其多樣化的圖示增強了整體使用者體驗，這些圖示在介面設計中發揮著至關重要的作用。無論您是在開發 Web 專案、行動應用程式或商業軟體，Font Awesome 都能為您提供建立具有視覺吸引力和功能強大的數位產品所需的工具。 5. 螢光粉圖標 -------- **網址：https://phosphoricons.com/**  Phosphor Icons 是一個多功能、免費的圖標庫，專門針對為其專案尋求輕量級、有凝聚力的圖標集的設計師和開發人員。 Phosphor 的設計讓人想起羽毛圖標，提供了一種微妙的、基於線條的風格，與從簡約的 Web 介面到豐富的行動應用程式等各種設計美學無縫整合。 **為開發人員提供的主要功能：** **廣泛的圖標：** Phosphor Icons 提供了多種風格的免費圖標，包括常規、粗體和填充，使設計人員能夠保持一致性，同時根據需要靈活地強調不同的 UI 元素。 **多功能格式：** Phosphor Icons 提供 SVG 和 PNG 格式，可供下載並整合到任何專案中，確保設計人員和開發人員幾乎可以在從 Web 到印刷的任何環境中使用它們。 **專為 Bootstrap 設計：**這些圖標經過精心設計，可與 Bootstrap 等流行框架無縫協作，使其成為希望透過高品質、可擴展的圖標增強專案的開發人員的理想選擇。 **完全開源：**作為一個免費的圖示庫，Phosphor Icons 鼓勵修改和重新分發，支援開源愛好者社群和商業專案。 **如何在 React 專案中安裝 Phosphor 圖示：** 在 React 應用程式中實現 Phosphor Icons 非常簡單，提供了一種有效的方法來透過漂亮的圖示來增強專案的視覺化介面。 **新增圖示庫：**要開始在 React 專案中使用 Phosphor Icons，請先透過 npm 或 YARN 安裝圖示套件： ``` npm install phosphor-react ``` 或者 ``` yarn add phosphor-react ``` **導入圖示：**磷光體圖示可以單獨匯入，使您可以保持較小的套件大小並提高應用程式的效率。將您需要的圖示直接匯入到您的 React 元件中： ``` import { Camera, Heart } from 'phosphor-react'; ``` 在元件中使用圖示：您可以輕鬆地將磷光體圖示整合到元件中。以下是您可以如何使用它們： ``` function App() { return ( <div> <h1>Capture Your Best Moments</h1> <Camera size={32} color="#333" /> <h2>Don’t forget to share the love!</h2> <Heart size={32} color="red" /> </div> ); } ``` **客製化：**螢光粉圖示是高度可自訂的。您可以直接在元件中調整大小、顏色和其他屬性，從而輕鬆自訂圖標以適應應用程式的設計和感覺。 Phosphor Icons 是需要強大、免費的圖標集（可以下載並無縫整合到各種設計專案中）的設計師和開發人員的首選。憑藉其廣泛的圖標和易於自訂的特點，Phosphor Icons 確保您的專案不僅看起來很棒，而且與最新的設計趨勢和最佳實踐保持一致。無論您是建立新應用程式、更新網站還是為商業軟體製作使用者介面，Phosphor Icons 都能為您提供成功所需的視覺化工具。 常見問題 (FAQ) ---------- #### Q：在哪裡可以找到我的專案的免費圖示？ 答：有幾個信譽良好的開源圖示庫提供適合各種專案的免費圖示。 Hugeicons Pro、Font Awesome、Phosphor Icons 和 Tabler Icons 等庫提供了大量圖標，可免費供個人和商業用途使用。 #### Q：使用開源圖示庫有什麼好處？ 答：開源圖示庫具有許多優勢，包括靈活性、免費和社群支援。它們允許開發人員和設計人員使用、修改甚至重新分發圖標，而無需支付任何許可費用。這種靈活性非常適合自訂圖示以滿足專案的特定需求，同時也有助於其他社群成員的改進並從中受益。 #### Q：圖標字體會影響我網站的效能嗎？ 答：圖標字體對於效能來說非常高效，因為它們本質上是字體，因此只需要單個 HTTP 請求即可加載，這與 PNG 等單獨的圖像檔案不同，後者需要對每個檔案進行單獨的請求。然而，明智地使用它們很重要，因為過度使用或實施不當可能會導致檔案大小膨脹和載入時間增加。將圖標字體與其他 SVG 和靜態文件優化整合可以幫助維護平衡且高效能的網站。 --- 原文出處：https://dev.to/masumparvej/best-icon-libraries-for-a-dev-412d
介紹 -- 在 Web 開發領域，開發人員會遇到許多技術和術語，其中兩個是**Webhooks**和**WebSockets** 。兩者都用於透過網路進行通信，但它們具有不同的目的並以不同的方式工作。本文旨在深入了解這兩種技術、它們的差異以及何時使用每種技術。 網路鉤子 ---- > ### 什麼是 Webhook？ Webhook 本質上是「事件觸發的 HTTP 請求」。它們是伺服器到伺服器的通訊方式。 Webhook 由伺服器中的事件觸發，並透過預先配置的 URL 將資料傳送到另一台伺服器。 > ### Webhooks 如何運作？ 當伺服器上發生特定事件時，伺服器會向為 Webhook 配置的 URL 發送 HTTP 請求（常見的是 POST）。該請求將包含有關接收伺服器可以使用的事件的資訊。 > ### 何時使用 Webhook？ Webhook 可以有效率地接收即時更新，並且可以根據特定事件和需求進行自訂。它們通常用於以下場景：新用戶註冊時更新客戶資料庫、註冊後通知郵件伺服器發送歡迎電子郵件，甚至在將變更推送到客戶時觸發持續整合管道中的新建置。 > ### Webhooks：Pub-Sub 方法 想像一下您在一家餐廳等待點餐。服務生四處走動，宣布訂單已完成。這種「喊出」系統類似於 Webhook 的運作方式。 Webhook 是一種輕量級方法，可讓一個應用程式（發布者）通知另一個應用程式（訂閱者）有關特定事件的資訊。 詳細情況如下： 1. **設定：**訂閱者向發布者提供一個 URL，即他們的「收聽位址」。 2. **事件觸發器：**當發布者的應用程式中發生預定義事件（例如，新使用者註冊）時，它會觸發 Webhook 通知。 3. **傳遞：**發布者向訂閱者的 URL 發送 HTTP 請求（通常是 POST），在請求正文中攜帶事件的相關資訊。 4. **處理：**訂閱者接收通知並相應地處理訊息，可能會觸發其自己的應用程式內的操作。 將 Webhooks 視為推播通知系統 - 當發生值得注意的事情時，發布者將更新推送給訂閱者。這種單向通訊使 Webhooks 變得簡單且可擴展，非常適合訂閱者只需對事件做出反應且不需要持續來回通訊的情況。 WebSockets ---------- > ### 什麼是 WebSocket？ WebSocket 透過在從客戶端（瀏覽器）到伺服器的兩個 TCP 連接埠之間建立的單一連線建立雙向、持久、雙向通訊通道。 > ### WebSocket 是如何運作的？ 與預設 HTTP 不同，WebSocket 連線在事務之間保持開啟狀態，允許資料在雙方之間無縫流動。 WebSocket 連線的任一端都可以向另一端發送資料，這使其成為即時資料傳輸的理想選擇。 > ### 何時使用 WebSocket？ WebSocket 在處理低延遲伺服器-客戶端資料流應用程式時非常有用。它們提供了巨大的速度優勢，尤其是當資料從伺服器發送到客戶端時。它們通常用於即時應用程式，例如即時聊天、即時分析、多人遊戲和協作編輯環境（例如 Google Docs）。 > ### WebSockets：開放通道 另一方面，WebSocket 在用戶端（如 Web 瀏覽器）和伺服器之間建立持久的雙向通訊通道。只要雙方需要，這種連線就會保持開放狀態，從而實現雙向即時資料交換——更像是用於連續對話的專用電話線。 以下簡要介紹了 WebSocket 的工作原理： 1. **握手：**客戶端透過向伺服器發送特殊的握手請求來發起連線。 2. **升級：**伺服器確認請求並將連線從 HTTP 升級為 WebSocket 連線。這將建立一個持久的雙向通道。 3. **資料流：**一旦連接，客戶端和伺服器都可以隨時發送和接收資料訊息。訊息通常以 JSON 等格式傳送，以便於解析。 4. **關閉：**當不再需要通訊時，任何一方都可以發起關閉握手，以優雅地終止連線。 WebSocket 提供即時通訊流，使其非常適合需要連續資料交換的應用程式。例如，聊天應用程式利用 WebSockets 確保訊息在發送後幾乎立即出現在收件人的螢幕上。 Webhook 和 WebSocket 之間的區別 ------------------------- 雖然 Webhooks 和 WebSocket 都用於透過 Web 進行通信，但它們具有不同的用途並以不同的方式運作。以下是一些主要區別： - **通訊**：Webhooks 是一種單向通訊方法（從伺服器到客戶端），而 WebSocket 是一種雙向通訊方法。 - **連線**：Webhook 對每個訊息使用一個新的 HTTP 請求，而 WebSocket 對多個訊息使用單一持久性連線。 - **使用案例**：Webhook 是事件通知的理想選擇，而 WebSocket 是即時應用程式的理想選擇。 > ### 使用案例：Webhook 與 WebSocket 現在您已經了解了 webhooks 和 WebSockets，了解何時使用它們至關重要： - **在以下情況下使用 Webhook：** ``` * You need a simple, scalable solution for one-way notifications. ``` ``` * The subscriber only needs to react to events and doesn't require constant updates. ``` ``` * Brief bursts of data exchange are sufficient. ``` - **在以下情況下使用 WebSocket：** ``` * You require real-time, two-way communication between client and server. ``` ``` * Constant data exchange is necessary for the application to function (e.g., chat, collaborative editing). ``` ``` * Low latency (minimal delay) is critical. ``` 結論 -- 總之，雖然**Webhook**非常適合單向、事件驅動的通信，但**WebSocket**擅長提供即時、雙向通訊。兩者之間的選擇取決於您應用程式的特定需求。現代應用程式同時使用這兩種技術並發揮各自的優勢並不罕見。 追蹤我**@ricardogesteves** [X（推特）](https://twitter.com/ricardogesteves) https://github.com/RicardoGEsteves --- 原文出處：https://dev.to/ricardogesteves/webhooks-and-websockets-3p53
長話短說 ---- 在本文中，您將了解如何建立基於 AI 的行銷活動管理應用程式，該應用程式可讓您建立和分析廣告活動，從而使您能夠為您的業務做出正確的決策。 我們將介紹如何： - 使用 Next.js 建立 Web 應用程式， - 使用 CopilotKit 將 AI 助理整合到軟體應用程式中，以及 - 建立特定於操作的人工智慧副駕駛來處理應用程式中的各種任務。 - 建立一名競選經理  --- CopilotKit：建構應用內人工智慧副駕駛的框架 -------------------------- CopilotKit是一個[開源的AI副駕駛平台](https://github.com/CopilotKit/CopilotKit)。我們可以輕鬆地將強大的人工智慧整合到您的 React 應用程式中。 建造： - ChatBot：上下文感知的應用內聊天機器人，可以在應用程式內執行操作 💬 - CopilotTextArea：人工智慧驅動的文字字段，具有上下文感知自動完成和插入功能📝 - 聯合代理：應用程式內人工智慧代理，可以與您的應用程式和使用者互動🤖  {% cta https://git.new/devtoarticle1 %} Star CopilotKit ⭐️ {% endcta %} --- 先決條件 ---- 要完全理解本教程，您需要對 React 或 Next.js 有基本的了解。 我們還將利用以下內容： - [Radix UI](https://www.radix-ui.com/) - 用於為應用程式建立可存取的 UI 元件。 - [OpenAI API 金鑰](https://platform.openai.com/api-keys)- 使我們能夠使用 GPT 模型執行各種任務。 - [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 一個開源副駕駛框架，用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 --- 專案設定和套件安裝 --------- 首先，透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式： ``` npx create-next-app campaign-manager ``` 選擇您首選的配置設定。在本教學中，我們將使用 TypeScript 和 Next.js App Router。  接下來，將[Heroicons](https://www.npmjs.com/package/@heroicons/react) 、 [Radix UI](https://www.radix-ui.com/)及其原始元件安裝到專案中。 ``` npm install @heroicons/react @radix-ui/react-avatar @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-icons @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-slot @radix-ui/react-tabs ``` 另外，安裝[Recharts 程式庫](https://recharts.org/en-US)（一個用於建立互動式圖表的 React 程式庫）以及以下實用程式套件： ``` npm install recharts class-variance-authority clsx cmdk date-fns lodash react-day-picker tailwind-merge tailwindcss-animate ``` 最後，安裝[CopilotKit 軟體套件](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)。這些套件使 AI copilot 能夠從 React 狀態檢索資料並在應用程式中做出決策。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend ``` 恭喜！您現在已準備好建立應用程式。 --- 使用 Next.js 建立 Campaign Manager 應用程式 ----------------------------------- 在本節中，我將引導您建立活動管理器應用程式的使用者介面。 首先，讓我們進行一些初始設定。 在`src`資料夾中建立一個`components`和`lib`資料夾。 ``` cd src mkdir components lib ``` 在**`lib`**資料夾中，我們將聲明應用程式的靜態類型和預設活動。因此，在**`lib`**資料夾中建立**`data.ts`**和**`types.ts`**檔案。 ``` cd lib touch data.ts type.ts ``` 將下面的程式碼片段複製到`type.ts`檔中。它聲明了活動屬性及其資料類型。 ``` export interface Campaign { id: string; objective?: | "brand-awareness" | "lead-generation" | "sales-conversion" | "website-traffic" | "engagement"; title: string; keywords: string; url: string; headline: string; description: string; budget: number; bidStrategy?: "manual-cpc" | "cpa" | "cpm"; bidAmount?: number; segment?: string; } ``` 為應用程式建立預設的行銷活動清單並將其複製到`data.ts`檔案中。 ``` import { Campaign } from "./types"; export let DEFAULT_CAMPAIGNS: Campaign[] = [ { id: "1", title: "CopilotKit", url: "https://www.copilotkit.ai", headline: "Copilot Kit - The Open-Source Copilot Framework", description: "Build, deploy, and operate fully custom AI Copilots. In-app AI chatbots, AI agents, AI Textareas and more.", budget: 10000, keywords: "AI, chatbot, open-source, copilot, framework", }, { id: "2", title: "EcoHome Essentials", url: "https://www.ecohomeessentials.com", headline: "Sustainable Living Made Easy", description: "Discover our eco-friendly products that make sustainable living effortless. Shop now for green alternatives!", budget: 7500, keywords: "eco-friendly, sustainable, green products, home essentials", }, { id: "3", title: "TechGear Solutions", url: "https://www.techgearsolutions.com", headline: "Innovative Tech for the Modern World", description: "Find the latest gadgets and tech solutions. Upgrade your life with smart technology today!", budget: 12000, keywords: "tech, gadgets, innovative, modern, electronics", }, { id: "4", title: "Global Travels", url: "https://www.globaltravels.com", headline: "Travel the World with Confidence", description: "Experience bespoke travel packages tailored to your dreams. Luxury, adventure, relaxation—your journey starts here.", budget: 20000, keywords: "travel, luxury, adventure, tours, global", }, { id: "5", title: "FreshFit Meals", url: "https://www.freshfitmeals.com", headline: "Healthy Eating, Simplified", description: "Nutritious, delicious meals delivered to your door. Eating well has never been easier or tastier.", budget: 5000, keywords: "healthy, meals, nutrition, delivery, fit", }, ]; ``` 由於我們使用 Radix UI 建立可以使用 TailwindCSS 輕鬆自訂的基本 UI 元件，因此請在**`lib`**資料夾中建立一個**`utils.ts`**文件，並將以下程式碼片段複製到該文件中。 ``` //👉🏻 The lib folder now contains 3 files - data.ts, type.ts, util.ts //👇🏻 Copy the code below into the "lib/util.ts" file. import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export function randomId() { return Math.random().toString(36).substring(2, 15); } ``` 導航到`components`資料夾並在其中建立其他三個資料夾。 ``` cd components mkdir app dashboard ui ``` `components/app`資料夾將包含應用程式中使用的各種元件，而儀表板資料夾包含某些元素的 UI 元件。 `ui`資料夾包含使用 Radix UI 建立的多個 UI 元素。將[專案儲存庫中的這些元素](https://github.com/CopilotKit/campaign-manager-demo/tree/main/src/components/ui)複製到該資料夾中。 恭喜！ `ui`資料夾應包含必要的 UI 元素。現在，我們可以使用它們來建立應用程式中所需的各種元件。 ### 建立應用程式 UI 元件 在這裡，我將引導您完成為應用程式建立使用者介面的過程。  首先，導航至**`app/page.tsx`**檔案並將以下程式碼片段貼到其中。該文件呈現在**`components/app`**資料夾中聲明的 App 元件。 ``` "use client"; import { App } from "@/components/app/App"; export default function DashboardPage() { return <App />; } ``` 在`components/app`資料夾中建立`App.tsx` 、 `CampaignForm.tsx` 、 `MainNav.tsx`和`UserNav.tsx`檔案。 ``` cd components/app touch App.tsx CampaignForm.tsx MainNav.tsx UserNav.tsx ``` 將下面的程式碼片段複製到`App.tsx`檔案中。 ``` "use client"; import { DEFAULT_CAMPAIGNS } from "@/lib/data"; import { Campaign } from "@/lib/types"; import { randomId } from "@/lib/utils"; import { Dashboard } from "../dashboard/Dashboard"; import { CampaignForm } from "./CampaignForm"; import { useState } from "react"; import _ from "lodash"; export function App() { //👇🏻 default segments const [segments, setSegments] = useState<string[]>([ "Millennials/Female/Urban", "Parents/30s/Suburbs", "Seniors/Female/Rural", "Professionals/40s/Midwest", "Gamers/Male", ]); const [campaigns, setCampaigns] = useState<Campaign[]>( _.cloneDeep(DEFAULT_CAMPAIGNS) ); //👇🏻 updates campaign list function saveCampaign(campaign: Campaign) { //👇🏻 newly created campaign if (campaign.id === "") { campaign.id = randomId(); setCampaigns([campaign, ...campaigns]); } else { //👇🏻 existing campaign - search for the campaign and updates the campaign list const index = campaigns.findIndex((c) => c.id === campaign.id); if (index === -1) { setCampaigns([...campaigns, campaign]); } else { campaigns[index] = campaign; setCampaigns([...campaigns]); } } } const [currentCampaign, setCurrentCampaign] = useState<Campaign | undefined>( undefined ); return ( <div className='relative'> <CampaignForm segments={segments} currentCampaign={currentCampaign} setCurrentCampaign={setCurrentCampaign} saveCampaign={(campaign) => { if (campaign) { saveCampaign(campaign); } setCurrentCampaign(undefined); }} /> <Dashboard campaigns={campaigns} setCurrentCampaign={setCurrentCampaign} segments={segments} setSegments={setSegments} /> </div> ); } ``` - 從上面的程式碼片段來看， - 我為行銷活動建立了預設細分列表，並對已定義的行銷活動列表進行了深層複製。 - `saveCampaign`函數接受行銷活動作為參數。如果行銷活動沒有 ID，則表示它是新建立的，因此會將其新增至行銷活動清單。否則，它會找到該活動並更新其屬性。 - `Dashboard`和`CampaignForm`元件接受細分和行銷活動作為 props。 [Dashboard 元件](https://github.com/CopilotKit/campaign-manager-demo/blob/main/src/components/dashboard/Dashboard.tsx)在儀表板上顯示各種 UI 元素，而[CampaignForm 元件](https://github.com/CopilotKit/campaign-manager-demo/blob/main/src/components/app/CampaignForm.tsx)使用戶能夠在應用程式中建立和保存新的行銷活動。 您也可以使用[GitHub 儲存庫](https://github.com/CopilotKit/campaign-manager-demo/tree/main/src/components)中的程式碼片段來更新儀表板和應用程式元件。 恭喜！您應該有一個有效的 Web 應用程式，可讓使用者查看和建立新的行銷活動。 在接下來的部分中，您將了解如何將 CopilotKit 加入到應用程式中，以根據每個行銷活動的目標和預算進行分析和決策。  --- 使用 CopilotKit 透過 AI 分析廣告活動 -------------------------- 在這裡，您將學習如何將人工智慧加入到應用程式中，以幫助您分析行銷活動並做出最佳決策。 在繼續之前，請造訪[OpenAI 開發者平台](https://platform.openai.com/api-keys)並建立一個新的金鑰。  建立一個`.env.local`檔案並將新建立的金鑰複製到該檔案中。 ``` OPENAI_API_KEY=<YOUR_OPENAI_SECRET_KEY> OPENAI_MODEL=gpt-4-1106-preview ``` 接下來，您需要為 CopilotKit 建立 API 端點。在 Next.js 應用程式資料夾中，建立一個包含`route.ts`檔案的`api/copilotkit`資料夾。 ``` cd app mkdir api && cd api mkdir copilotkit && cd copilotkit touch route.ts ``` 將下面的程式碼片段複製到`route.ts`檔中。 [CopilotKit 後端](https://docs.copilotkit.ai/reference/CopilotBackend)接受使用者的請求並使用 OpenAI 模型做出決策。 ``` import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; export const runtime = "edge"; export async function POST(req: Request): Promise<Response> { const copilotKit = new CopilotBackend({}); const openaiModel = process.env["OPENAI_MODEL"]; return copilotKit.response(req, new OpenAIAdapter({ model: openaiModel })); } ``` 若要將您的應用程式連接到此 API 端點，請更新`app/page.tsx`文件，如下所示： ``` "use client"; import { App } from "@/components/app/App"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; export default function DashboardPage() { return ( <CopilotKit url='/api/copilotkit/'> <CopilotSidebar instructions='Help the user create and manage ad campaigns.' defaultOpen={true} labels={{ title: "Campaign Manager Copilot", initial: "Hello there! I can help you manage your ad campaigns. What campaign would you like to work on?", }} clickOutsideToClose={false} > <App /> </CopilotSidebar> </CopilotKit> ); } ``` `CopilotKit`元件包裝整個應用程式並接受包含 API 端點連結的`url`屬性。 `CopilotSidebar`元件為應用程式加入了一個聊天機器人側邊欄面板，使我們能夠向 CopilotKit 提供各種指令。  ### 如何讓AI副駕駛執行各種動作 CopilotKit 提供了兩個鉤子，使我們能夠處理使用者的請求並插入應用程式狀態： [useCopilotAction](https://docs.copilotkit.ai/reference/useCopilotAction)和[useMakeCopilotReadable](https://docs.copilotkit.ai/reference/useMakeCopilotReadable) 。 `useCopilotAction`掛鉤可讓您定義 CopilotKit 執行的動作。它接受包含以下參數的物件： - name - 操作的名稱。 - 描述 - 操作的描述。 - 參數 - 包含所需參數清單的陣列。 - render - 預設的自訂函數或字串。 - handler - 由操作觸發的可執行函數。 ``` useCopilotAction({ name: "sayHello", description: "Say hello to someone.", parameters: [ { name: "name", type: "string", description: "name of the person to say greet", }, ], render: "Process greeting message...", handler: async ({ name }) => { alert(`Hello, ${name}!`); }, }); ``` `useMakeCopilotReadable`掛鉤向 CopilotKit 提供應用程式狀態。 ``` import { useMakeCopilotReadable } from "@copilotkit/react-core"; const appState = ...; useMakeCopilotReadable(JSON.stringify(appState)); ``` CopilotKit 還允許您為使用者提示提供上下文，使其能夠做出充分且準確的決策。 將`guidance.ts`和`script.ts`加入到專案內的`lib`資料夾中，並將此[指導](https://github.com/CopilotKit/campaign-manager-demo/blob/main/src/lib/guideline.ts)和[腳本建議](https://github.com/CopilotKit/campaign-manager-demo/blob/main/src/lib/script.ts)複製到檔案中，以便 CopilotKit 做出決策。 在應用程式元件中，將當前日期、腳本建議和指導傳遞到 CopilotKit。 ``` import { GUIDELINE } from "@/lib/guideline"; import { SCRIPT_SUGGESTION } from "@/lib/script"; import { useCopilotAction, useMakeCopilotReadable, } from "@copilotkit/react-core"; export function App() { //-- 👉🏻 ...other component functions //👇🏻 Ground the Copilot with domain-specific knowledge for this use-case: marketing campaigns. useMakeCopilotReadable(GUIDELINE); useMakeCopilotReadable(SCRIPT_SUGGESTION); //👇🏻 Provide the Copilot with the current date. useMakeCopilotReadable("Today's date is " + new Date().toDateString()); return ( <div className='relative'> <CampaignForm segments={segments} currentCampaign={currentCampaign} setCurrentCampaign={setCurrentCampaign} saveCampaign={(campaign) => { if (campaign) { saveCampaign(campaign); } setCurrentCampaign(undefined); }} /> <Dashboard campaigns={campaigns} setCurrentCampaign={setCurrentCampaign} segments={segments} setSegments={setSegments} /> </div> ); } ``` 在`App`元件中建立一個 CopilotKit 操作，該操作可在使用者提供此類指令時建立新的活動或編輯現有的活動。 ``` useCopilotAction({ name: "updateCurrentCampaign", description: "Edit an existing campaign or create a new one. To update only a part of a campaign, provide the id of the campaign to edit and the new values only.", parameters: [ { name: "id", description: "The id of the campaign to edit. If empty, a new campaign will be created", type: "string", }, { name: "title", description: "The title of the campaign", type: "string", required: false, }, { name: "keywords", description: "Search keywords for the campaign", type: "string", required: false, }, { name: "url", description: "The URL to link the ad to. Most of the time, the user will provide this value, leave it empty unless asked by the user.", type: "string", required: false, }, { name: "headline", description: "The headline displayed in the ad. This should be a 5-10 words", type: "string", required: false, }, { name: "description", description: "The description displayed in the ad. This should be a short text", type: "string", required: false, }, { name: "budget", description: "The budget of the campaign", type: "number", required: false, }, { name: "objective", description: "The objective of the campaign", type: "string", enum: [ "brand-awareness", "lead-generation", "sales-conversion", "website-traffic", "engagement", ], }, { name: "bidStrategy", description: "The bid strategy of the campaign", type: "string", enum: ["manual-cpc", "cpa", "cpm"], required: false, }, { name: "bidAmount", description: "The bid amount of the campaign", type: "number", required: false, }, { name: "segment", description: "The segment of the campaign", type: "string", required: false, enum: segments, }, ], handler: (campaign) => { const newValue = _.assign( _.cloneDeep(currentCampaign), _.omitBy(campaign, _.isUndefined) ) as Campaign; setCurrentCampaign(newValue); }, render: (props) => { if (props.status === "complete") { return "Campaign updated successfully"; } else { return "Updating campaign"; } }, }); ``` {% 嵌入 https://www.youtube.com/watch?v=gCJpH6Tnj5g %} 新增另一個模擬 API 呼叫的操作，以允許 CopilotKit 從先前建立的活動中檢索歷史資料。 ``` // Provide this component's Copilot with the ability to retrieve historical cost data for certain keywords. // Will be called automatically when needed by the Copilot. useCopilotAction({ name: "retrieveHistoricalData", description: "Retrieve historical data for certain keywords", parameters: [ { name: "keywords", description: "The keywords to retrieve data for", type: "string", }, { name: "type", description: "The type of data to retrieve for the keywords.", type: "string", enum: ["CPM", "CPA", "CPC"], }, ], handler: async ({ type }) => { // fake an API call that retrieves historical data for cost for certain keywords based on campaign type (CPM, CPA, CPC) await new Promise((resolve) => setTimeout(resolve, 2000)); function getRandomValue(min: number, max: number) { return (Math.random() * (max - min) + min).toFixed(2); } if (type == "CPM") { return getRandomValue(0.5, 10); } else if (type == "CPA") { return getRandomValue(5, 100); } else if (type == "CPC") { return getRandomValue(0.2, 2); } }, render: (props) => { // Custom in-chat component rendering. Different components can be rendered based on the status of the action. let label = "Retrieving historical data ..."; if (props.args.type) { label = `Retrieving ${props.args.type} for keywords ...`; } if (props.status === "complete") { label = `Done retrieving ${props.args.type} for keywords.`; } const done = props.status === "complete"; return ( <div className=''> <div className=' w-full relative max-w-xs'> <div className='absolute inset-0 h-full w-full bg-gradient-to-r from-blue-500 to-teal-500 transform scale-[0.80] bg-red-500 rounded-full blur-3xl' /> <div className='relative shadow-xl bg-gray-900 border border-gray-800 px-4 py-8 h-full overflow-hidden rounded-2xl flex flex-col justify-end items-start'> <h1 className='font-bold text-sm text-white mb-4 relative z-50'> {label} </h1> <p className='font-normal text-base text-teal-200 mb-2 relative z-50 whitespace-pre'> {props.args.type && `Historical ${props.args.type}: ${props.result || "..."}`} </p> </div> </div> </div> ); }, }); ```  恭喜！您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具，可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣，還是對複雜任務的自動化感興趣，CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中，您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼： <https://github.com/CopilotKit/campaign-manager-demo> 感謝您的閱讀！ --- 原文出處：https://dev.to/copilotkit/build-an-ai-powered-campaign-manager-nextjs-openai-copilotkit-59ii
我使用 OpenAI ChatGPT-4 一段時間了。 對此我沒什麼好說的。 但有時，這還不夠。 在[Winglang](https://github.com/winglang/wing)中，我們希望使用 OpenAI 和 ChatGPT-4 根據我們的文件回答人們的問題。 您的選擇是： - 使用[OpenAI 助理](https://platform.openai.com/docs/assistants/overview?context=with-streaming)或任何其他基於向量的資料庫 (RAG)。由於 Wing 看起來像 JS，所以效果很好，但仍然有很多錯誤。 - 將整個文件傳遞到上下文視窗的成本非常高。 很快，我們意識到這是行不通的。 是時候舉辦我們自己的法學碩士課程了。  --- 您的 LLM 資料集 ========== 在訓練模型之前，我們需要建立用於訓練模型的資料。在我們的例子中，是 Winglang 文件。我會做一些非常簡單的事情。 1. 從網站地圖中提取所有 URL，設定 GET 請求並收集內容。 2. 解析它；我們希望將所有 HTML 轉換為可讀內容。 3. 使用 ChatGPT 4 執行它，將內容轉換為 CSV 作為資料集。 它應該是這樣的：  完成後，儲存包含一列名為`text`的 CSV 並新增問題和答案。我們稍後會用到它。它應該看起來像這樣： ``` text <s>[INST]How to define a variable in Winglang[/INST] let a = 'Hello';</s> <s>[INST]How to create a new lambda[/INST] bring cloud; let func = new cloud.Function(inflight () => { log('Hello from the cloud!'); });</s> ``` 將其保存在電腦上名為`data`新資料夾中。 --- Autotrain，您的模型 ============== 我的電腦很弱，所以我決定使用更小的模型 - 7b 參數： `mistralai/Mistral-7B-v0.1` 訓練模型的方法有數百萬種。我們將使用 Huggingface Autotrain。我們將使用他們的 CLI，而不執行任何 Python 程式碼🚀 當您使用 Huggingface 的 Autotrain 時，您可以在電腦上訓練它（這裡是我的方法）或在他們的伺服器上訓練它（付費）並訓練更大的模型。 我的舊 Macbook Pro M1 2021 沒有 GPU。 讓我們安裝自動訓練。 ``` pip install -U autotrain-advanced autotrain setup > setup_logs.txt ``` 然後，我們需要做的就是執行 autotrain 指令： ``` autotrain llm \ --train \ --model "mistralai/Mistral-7B-Instruct-v0.2" \ --project-name "autotrain-wing" \ --data-path data/ \ --text-column text \ --lr "0.0002" \ --batch-size "1" \ --epochs "3" \ --block-size "1024" \ --warmup-ratio "0.1" \ --lora-r "16" \ --lora-alpha "32" \ --lora-dropout "0.05" \ --weight-decay "0.01" \ --gradient-accumulation "4" \ --quantization "int4" \ --mixed-precision "fp16" \ --peft ``` 完成後，您將擁有一個名為“autotrain-wing”的新目錄，其中包含新的微調模型🚀 --- 玩模型 --- 要使用模型，請先執行： ``` pip install transformers torch ``` 完成後，使用以下程式碼建立一個名為 invoke.py 的新 Python 檔案： ``` from transformers import pipeline # Path to your local model directory model_path = "./autotrain-wing" # Load the model and tokenizer from the local directory classifier = pipeline("text-classification", model=model_path, tokenizer=model_path) # Example text to classify text = "Example text to classify" result = classifier(text) print(result) ``` 然後您可以透過執行 CLI 命令來執行它： ``` python invoke.py ``` 你就完成了🚀 --- 繼續攻讀法學碩士 -------- 我仍在學習法學碩士。 我意識到的一件事是追蹤模型的變化並不容易。 你不能真正將它與 Git 一起使用，因為模型可以達到非常大的大小 > 100 GB；這沒有多大意義——git 不能很好地處理它。 更好的方法是使用名為[KitOps 的](https://github.com/jozu-ai/kitops/)工具。 我認為它很快就會成為法學碩士世界的標準，所以請確保你給這個庫加註星標，以便以後可以使用它。 1. 下載最新的[KitOps 版本](https://github.com/jozu-ai/kitops/releases/tag/v0.1.3)並[安裝它](https://kitops.ml/docs/cli/installation.html)。 2. 轉到模型資料夾並執行命令來打包您的 LLM： ``` kit pack . ``` 3. 您也可以透過執行將其推送到 Docker hub ``` kit pack . -t [your registry address]/[your repository name]/mymodelkit:latest ``` > 💡 要了解如何使用 DockerHub，[請檢查此](https://kitops.ml/docs/quick-start.html) {% cta https://github.com/jozu-ai/kitops %}⭐️ Star KitOps，以便您稍後可以再次找到它⭐️{% endcta %} [](https://github.com/jozu-ai/kitops) --- 我建立了一個新的 YouTube 頻道，主要是關於開源行銷:) （例如如何獲得星星、叉子和客戶端） 如果您對此感興趣，請隨時在這裡訂閱： https://www.youtube.com/@nevo-david?sub\_confirmation=1 --- 原文出處：https://dev.to/github20k/i-fine-tuned-my-model-on-a-new-programming-language-you-can-do-it-too-449
我見過數百種人工智慧工具，其中許多正在改變世界。 作為開發人員，總是有很多事情需要學習，因此專注於節省時間來處理重要的事情非常重要。 我將介紹 21 個供開發人員使用的工具，它們可以讓您的生活更輕鬆，特別是在開發人員體驗方面。 相信我，這份清單會讓你大吃一驚！ 我們開始做吧。 --- 1. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ----------------------------------------------------------------------------  Taipy 是一個開源 Python 庫，可用於輕鬆的端到端應用程式開發，具有假設分析、智慧管道執行、內建調度和部署工具。 我相信你們大多數人都不明白 Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能，而 Taipy 是最佳選擇。 雖然 Streamlit 是一種流行的工具，但在處理大型資料集時，其效能可能會顯著下降，這使得它在生產級使用上不切實際。 另一方面，Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 Taipy，您將親身體驗其用戶友好的介面和高效的資料處理。  Taipy 有許多整合選項，可以輕鬆地與領先的資料平台連接。  開始使用以下命令。 ``` pip install taipy ``` 我們來談談最新的[Taipy v3.1 版本](https://docs.taipy.io/en/latest/relnotes/)。 最新版本使得在 Taipy 的多功能零件物件中可視化任何 HTML 或 Python 物件成為可能。 這意味著[Folium](https://python-visualization.github.io/folium/latest/) 、 [Bokeh](https://bokeh.org/) 、 [Vega-Altair](https://altair-viz.github.io/)和[Matplotlib](https://matplotlib.org/)等程式庫現在可用於視覺化。 這也帶來了對[Plotly python](https://plotly.com/python/)的原生支持，使繪製圖表變得更加容易。 他們還使用分散式運算提高了效能，但最好的部分是 Taipy，它的所有依賴項現在都與 Python 3.12 完全相容，因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。  另一個有用的事情是，Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。  您也可以使用 Taipy 雲端部署應用程式。 如果您想閱讀部落格來了解程式碼庫結構，您可以閱讀 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://docs.taipy.io/en/release-3.0/knowledge_base/demos/pollution_sensors/) 使用工廠周圍的感測器測量空氣品質的用例，展示 Taipy 儀表板流資料的能力。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-realtime-pollution)。 - [詐欺辨識](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/fraud_detection/) Taipy 應用程式可分析信用卡交易以偵測詐欺行為。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-fraud-detection)。 - [新冠儀表板](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/covid_dashboard/) 這使用 2020 年的 Covid 資料集。還有一個預測頁面來預測傷亡人數。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-covid-dashboard)。 - [建立 LLM 聊天機器人](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/chatbot/) 該演示展示了 Taipy 使最終用戶能夠使用 LLM 執行推理的能力。在這裡，我們使用 GPT-3 建立一個聊天機器人，並將對話顯示在互動式聊天介面中。您可以輕鬆更改程式碼以使用任何其他 API 或模型。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-chatbot)。 - [即時人臉辨識](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/face_recognition/) 該演示將人臉辨識無縫整合到我們的平台中，使用網路攝影機提供使用者友好的即時人臉偵測體驗。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-face-recognition)。 這些用例非常驚人，所以一定要檢查一下。 Taipy 在 GitHub 上有 8.2k+ Stars，並且處於`v3.1`版本，因此它們正在不斷改進。 {% cta https://github.com/Avaiga/taipy %} Star Taipy ⭐️ {% endcta %} --- 2. [DevToys](https://github.com/DevToys-app/DevToys) - 開發者的瑞士軍刀。 ----------------------------------------------------------------  DevToys 協助完成日常開發任務，例如格式化 JSON、比較文字和測試 RegExp。 這樣，就無需使用不可信的網站來處理您的資料執行簡單的任務。透過智慧型偵測，DevToys 可以偵測用於複製到 Windows 剪貼簿的資料的最佳工具。 緊湊的覆蓋範圍讓您可以保持應用程式較小並位於其他視窗之上。最好的部分是可以同時使用應用程式的多個實例。 我可以肯定地說，開發人員甚至不知道這個很棒的專案。 最後是一款專為 Windows 生態系統設計的軟體。哈哈！  他們提供的一些工具是： > 轉換器 - JSON <> YAML - 時間戳 - 數基數 - 規劃任務解析器  > 編碼器/解碼器 - 超文本標記語言 - 網址 - Base64 文字與圖片 - 壓縮包 - 智威湯遜解碼器  > 格式化程式 - JSON - SQL - XML  > 發電機 - 哈希（MD5、SHA1、SHA256、SHA512） - UUID 1 和 4 - 洛雷姆·伊普蘇姆 - 校驗和  > 文字 - 逃脫/逃脫 - 檢驗員和箱子轉換器 - 正規表示式測試器 - 文字比較 - XML驗證器 - 降價預覽   > 形象的 - 色盲模擬器 - 顏色選擇器和對比度 - PNG / JPEG 壓縮器 - 影像轉換器  我不了解你，但我不會錯過這個！ 您可以閱讀[如何執行 DevToys](https://github.com/DevToys-app/DevToys?tab=readme-ov-file#how-to-run-devtoys) 。 關於許可證的註解。 DevToys 使用的授權允許將應用程式作為試用軟體或共享軟體重新分發而無需進行任何更改。然而，作者 Etienne BAUDOUX 和 BenjaminT 不希望你這樣做。如果您認為自己有充分的理由這樣做，請先與我們聯絡討論。 他們在 GitHub 上有 23k Stars，並且使用 C#。 {% cta https://github.com/DevToys-app/DevToys %} 明星 DevToys ⭐️ {% endcta %} --- 3. [Pieces](https://github.com/pieces-app) - 您的工作流程副駕駛。 -------------------------------------------------------  Pieces 是一款支援人工智慧的生產力工具，旨在透過智慧程式碼片段管理、情境化副駕駛互動和主動呈現有用材料來幫助開發人員管理混亂的工作流程。 它最大限度地減少了上下文切換、簡化了工作流程並提升了整體開發體驗，同時透過完全離線的 AI 方法維護了工作的隱私和安全性。太棒了：D  它與您最喜歡的工具無縫集成，以簡化、理解和提升您的編碼流程。 它具有比表面上看到的更令人興奮的功能。 - 它可以透過閃電般快速的搜尋體驗找到您需要的材料，讓您根據您的喜好透過自然語言、程式碼、標籤和其他語義進行查詢。可以放心地說“您的個人離線谷歌”。 - Pieces 使用 OCR 和 Edge-ML 升級螢幕截圖，以提取程式碼並修復無效字元。因此，您可以獲得極其準確的程式碼提取和深度元資料豐富。 您可以查看 Pieces 可用[功能的完整清單](https://pieces.app/features)。 您可以閱讀[文件](https://docs.pieces.app/)並存取[網站](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 %} --- 4. [Infisical－](https://github.com/Infisical/infisical)秘密管理平台。 --------------------------------------------------------------  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 }); ```  Infisical 還提供了一組工具來自動防止 git 歷史記錄的秘密洩露。可以使用預提交掛鉤或透過與 GitHub 等平台直接整合在 Infisical CLI 層級上設定此功能。 您可以閱讀[文件](https://infisical.com/docs/documentation/getting-started/introduction)並檢查如何[安裝 CLI](https://infisical.com/docs/cli/overview) ，這是使用它的最佳方式。 Infisical 還可用於將機密注入 Kubernetes 叢集和自動部署，以便應用程式使用最新的機密。有很多整合選項可用。  在使用整個原始程式碼之前一定要檢查他們的[許可證](https://github.com/Infisical/infisical/blob/main/LICENSE)，因為他們有一些受 MIT Expat 保護的企業級程式碼，但不用擔心，大部分程式碼都是免費使用的。 他們在 GitHub 上擁有超過 11k 顆星星，並且發布了超過 125 個版本，因此他們正在不斷發展。另外，Infiscial CLI 的安裝次數超過 540 萬次，因此非常值得信賴。 {% cta https://github.com/Infisical/infisical %} 明星 Infisical ⭐️ {% endcta %} --- 5. [Mintlify](https://github.com/mintlify/writer) - 在建置時出現的文件。 --------------------------------------------------------------  Mintlify 是一款由人工智慧驅動的文件編寫器，您只需 1 秒鐘即可編寫程式碼文件 :D 幾個月前我發現了 Mintlify，從那時起我就一直是它的粉絲。我見過很多公司使用它，甚至我使用我的商務電子郵件產生了完整的文件，結果證明這是非常簡單和體面的。如果您需要詳細的文件，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 %} --- 6. [Replexica](https://github.com/replexica/replexica) - 用於 React 的 AI 支援的 i18n 工具包。 ------------------------------------------------------------------------------------  在地化方面的困難是真實存在的，因此人工智慧的幫助絕對是一個很酷的概念。 Replexica 是 React 的 i18n 工具包，可快速發布多語言應用程式。它不需要將文字提取到 JSON 檔案中，並使用 AI 支援的 API 進行內容處理。 它有以下兩個部分： 1. Replexica Compiler - React 的開源編譯器插件。 2. Replexica API - 雲端中的 i18n API，使用 LLM 執行翻譯。 （基於使用情況，它有免費套餐） 支援的一些 i18n 格式包括： 1. 無 JSON 的 Replexica 編譯器格式。 2. Markdown 內容的 .md 檔案。 3. 基於舊版 JSON 和 YAML 的格式。 當他們達到 500 星時，他們也在 DEV 上發布了官方公告。我是第一批讀者之一（少於 3 個反應）。 它們涵蓋了很多內容，因此您應該閱讀 Max 的[《We Got 500 Stars What Next》](https://dev.to/maxprilutskiy/we-got-500-github-stars-whats-next-2njc) 。 為了給出 Replexica 背後的總體思路，這是基本 Next.js 應用程式所需的唯一更改，以使其支援多語言。 開始使用以下 npm 指令。 ``` // install pnpm add replexica @replexica/react @replexica/compiler // login to Replexica API. pnpm replexica auth --login ``` 您可以這樣使用它。 ``` // next.config.mjs // Import Replexica Compiler import replexica from '@replexica/compiler'; /** @type {import('next').NextConfig} */ const nextConfig = {}; // Define Replexica configuration /** @type {import('@replexica/compiler').ReplexicaConfig} */ const replexicaConfig = { locale: { source: 'en', targets: ['es'], }, }; // Wrap Next.js config with Replexica Compiler export default replexica.next( replexicaConfig, nextConfig, ); ``` 您可以閱讀如何[開始使用](https://github.com/replexica/replexica/blob/main/getting-started.md)以及清楚記錄的有關[幕後使用內容的](https://github.com/replexica/replexica?tab=readme-ov-file#whats-under-the-hood)內容。 Replexica 編譯器支援 Next.js App Router，Replexica API 支援英文🇺🇸和西班牙文🇪🇸。他們計劃接下來發布 Next.js Pages Router + 法語🇫🇷語言支援！ 他們在 GitHub 上擁有 740 多個 Star，並且基於 TypeScript 建置。您應該密切關注該專案以獲得進一步進展！ {% cta https://github.com/replexica/replexica %} Star Replexica ⭐️ {% endcta %} --- 7. [Flowise](https://github.com/FlowiseAI/Flowise) - 拖放 UI 來建立您的客製化 LLM 流程。 ---------------------------------------------------------------------------  Flowise 是一款開源 UI 視覺化工具，用於建立客製化的 LLM 編排流程和 AI 代理程式。 開始使用以下 npm 指令。 ``` npm install -g flowise npx flowise start OR npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234 ``` 這就是整合 API 的方式。 ``` import requests url = "/api/v1/prediction/:id" def query(payload): response = requests.post( url, json = payload ) return response.json() output = query({ question: "hello!" )} ```  您可以閱讀[文件](https://docs.flowiseai.com/)。  雲端主機不可用，因此您必須使用這些[說明](https://github.com/FlowiseAI/Flowise?tab=readme-ov-file#-self-host)自行託管。 讓我們探討一些用例： - 假設您有一個網站（可以是商店、電子商務網站或部落格），並且您希望廢棄該網站的所有相關連結，並讓法學碩士回答您網站上的任何問題。您可以按照此[逐步教學](https://docs.flowiseai.com/use-cases/web-scrape-qna)來了解如何實現相同的目標。  - 您還可以建立一個自訂工具，該工具將能夠呼叫 Webhook 端點並將必要的參數傳遞到 Webhook 主體中。請依照本[指南](https://docs.flowiseai.com/use-cases/webhook-tool)使用 Make.com 建立 Webhook 工作流程。  還有許多其他用例，例如建立 SQL QnA 或與 API 互動。 FlowiseAI 在 GitHub 上擁有超過 27,500 個 Star，並擁有超過 10,000 個分叉，因此具有良好的整體比率。 {% cta https://github.com/FlowiseAI/Flowise %} 明星 Flowise ⭐️ {% endcta %} --- 8. [Hexo](https://github.com/hexojs/hexo) - 一個快速、簡單且功能強大的部落格框架。 ---------------------------------------------------------------  大多數開發人員更喜歡自己的博客，如果您也是如此。 Hexo 可能是你不知道的工具。 Hexo 支援許多功能，例如超快的生成速度，支援 GitHub Flavored Markdown 和大多數 Octopress 插件，提供對 GitHub Pages、Heroku 等的一命令部署，以及可實現無限擴展性的強大 API 和數百個主題和插件。 這意味著您可以用 Markdown（或其他標記語言）編寫帖子，Hexo 在幾秒鐘內生成具有漂亮主題的靜態檔案。 開始使用以下 npm 指令。 ``` npm install hexo-cli -g ``` 您可以這樣使用它。 ``` // Setup your blog hexo init blog // Start the server hexo server // Create a new post hexo new "Hello Hexo" ``` 您可以閱讀[文件](https://hexo.io/docs/)，查看 Hexo 提供的所有[400 多個外掛程式](https://hexo.io/plugins/)和[主題集](https://hexo.io/themes/)。據我所知，這些外掛程式支援廣泛的用例，例如 Hexo 的 Ansible 部署器外掛程式。 您可以查看有關在[Hexo 上編寫和組織內容的](https://www.youtube.com/watch?v=AIqBubK6ZLc&t=6s)YouTube 教學。 Hexo 在 GitHub 上擁有超過 38,000 顆星，並被 GitHub 上超過 125,000 名開發者使用。它們位於`v7`版本中，解壓縮後大小為`629 kB` 。 {% cta https://github.com/hexojs/hexo %} Star Hexo ⭐️ {% endcta %} --- 9.[螢幕截圖到程式碼](https://github.com/abi/screenshot-to-code)- 放入螢幕截圖並將其轉換為乾淨的程式碼。 ---------------------------------------------------------------------------  這個開源專案廣泛流行，但許多開發人員仍然不了解它。它可以幫助您以 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 上擁有超過 47k 顆星星，並支援許多技術堆疊，例如 React 和 Vue，以及不錯的 AI 模型，例如 GPT-4 Vision、Claude 3 Sonnet 和 DALL-E 3。 {% cta https://github.com/abi/screenshot-to-code %} 將螢幕截圖轉為程式碼 ⭐️ {% endcta %} --- 10. [Appsmith](https://github.com/appsmithorg/appsmith) - 建立管理面板、內部工具和儀表板的平台。 -----------------------------------------------------------------------------  管理面板和儀表板是任何軟體創意（在大多數情況下）的一些常見部分，我嘗試從頭開始建立它，這會帶來很多痛苦和不必要的辛苦工作。 您可能已經看到組織建立了內部應用程式，例如儀表板、資料庫 GUI、管理面板、批准應用程式、客戶支援儀表板等，以幫助其團隊執行日常操作。正如我所說，Appsmith 是一個開源工具，可以實現這些內部應用程式的快速開發。 首先，請觀看這個[YouTube 影片](https://www.youtube.com/watch?v=NnaJdA1A11s)，該影片在 100 秒內解釋了 Appsmith。 {% 嵌入 https://www.youtube.com/watch?v=NnaJdA1A11s %} 他們提供拖放小部件來建立 UI。 您可以使用 45 多個可自訂的小工具在幾分鐘內建立漂亮的響應式 UI，而無需編寫一行 HTML/CSS。尋找[小部件的完整清單](https://www.appsmith.com/widgets)。   Appsmith 幾乎可以在 GUI 上的小部件屬性、事件偵聽器、查詢和其他設定內的任何位置編寫 JavaScript 程式碼。 Appsmith 支援在`{{ }}`內編寫單行程式碼，並將括號之間編寫的任何內容解釋為 JavaScript 表達式。 ``` /*Filter the data array received from a query*/ {{ QueryName.data.filter((row) => row.id > 5 ) }} or {{ storeValue("userID", 42); console.log(appsmith.store.userID); showAlert("userID saved"); }} ``` 您需要使用立即呼叫函數表達式（IIFE）來編寫多行。 例如，無效程式碼和有效程式碼。 ``` // invalid code /*Call a query to fetch the results and filter the data*/ {{ const array = QueryName.data; const filterArray = array.filter((row) => row.id > 5); return filterArray; }} /* Check the selected option and return the value*/ {{ if (Dropdown.selectedOptionValue === "1") { return "Option 1"; } else { return "Option 2"; } }} // valid code /* Call a query and then manipulate its result */ {{ (function() { const array = QueryName.data; const filterArray = array.filter((row) => row.id > 5); return filterArray; })() }} /* Verify the selected option and return the value*/ {{ (function() { if (Dropdown.selectedOptionValue === "1") { return "Option 1"; } else { return "Option 2"; } })() }} ``` 您可以透過幾個簡單的步驟建立從簡單的 CRUD 應用程式到複雜的多步驟工作流程的任何內容： 1. 與資料庫或 API 整合。 Appsmith 支援最受歡迎的資料庫和 REST API。 2. 使用內建小工具建立您的應用程式佈局。 3. 在編輯器中的任何位置使用查詢和 JavaScript 來表達您的業務邏輯。 4. Appsmith 支援使用 Git 進行版本控制，以使用分支來協作建立應用程式來追蹤和回滾變更。部署應用程式並分享:)  您可以閱讀[文件](https://docs.appsmith.com/)和[操作指南](https://docs.appsmith.com/connect-data/how-to-guides)，例如如何將其連接到本機資料來源或\[如何與第三方工具整合\]（與第三方工具整合）。 您可以自行託管或使用雲端。他們還提供[20 多個模板](https://www.appsmith.com/templates)，以便您可以快速入門。一些有用的是： - [維修訂單管理](https://www.appsmith.com/template/Maintenance-Order-Management) - [加密即時追蹤器](https://www.appsmith.com/template/crypto-live-tracker) - [內容管理系統](https://www.appsmith.com/template/content-management-system) - [WhatsApp 信使](https://www.appsmith.com/template/whatsapp-messenger) Appsmith 在 GitHub 上擁有超過 31,000 顆星，發布了 200 多個版本。 {% cta https://github.com/appsmithorg/appsmith %} Star Appsmith ⭐️ {% endcta %} --- 11. [BlockNote](https://github.com/TypeCellOS/BlockNote) - 基於區塊（Notion 樣式）且可擴充的富文本編輯器。 --------------------------------------------------------------------------------------  人們常說，除非您正在學習新東西，否則不要重新發明輪子。 Blocknote 是開源的 Block 為基礎的 React 富文本編輯器。您可以輕鬆地將現代文字編輯體驗加入到您的應用程式中。 Blocknote 建構在 Prosemirror 和 Tiptap 之上。 它們有很多功能，如下所示。   您可以輕鬆自訂內建 UI 元件，或建立自訂區塊、內聯內容和樣式。如果您想更進一步，您可以使用額外的 Prosemirror 或 TipTap 外掛程式來擴充核心編輯器。 其他庫雖然功能強大，但通常具有相當陡峭的學習曲線，並且要求您自訂編輯器的每個細節。這可能需要數月的專門工作。 相反，BlockNote 只需最少的設定即可提供出色的體驗，包括現成的動畫 UI。 開始使用以下 npm 指令。 ``` npm install @blocknote/core @blocknote/react ``` 您可以這樣使用它。透過`useCreateBlockNote`鉤子，我們可以建立一個新的編輯器實例，然後使用`theBlockNoteView`元件來渲染它。 `@blocknote/react/style.css`也被匯入來新增編輯器的預設樣式和 BlockNote 匯出的 Inter 字體（可選）。 ``` import "@blocknote/core/fonts/inter.css"; import { BlockNoteView, useCreateBlockNote } from "@blocknote/react"; import "@blocknote/react/style.css"; export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote(); // Renders the editor instance using a React component. return <BlockNoteView editor={editor} />; } ``` 您可以閱讀可用的[文件](https://www.blocknotejs.org/docs)和[ui 元件](https://www.blocknotejs.org/docs/ui-components)。 您應該嘗試一下，特別是因為它包含廣泛的功能，例如「斜線」選單、流暢的動畫以及建立即時協作應用程式的潛力。  斜線選單  即時協作  格式選單 他們還提供了[20 多個範例](https://www.blocknotejs.org/examples)以及預覽和程式碼，您可以使用它們來快速跟進。  Blocknote 在 GitHub 上擁有超過 5,000 顆星，並有超過 1,500 名開發者在使用。 {% cta https://github.com/TypeCellOS/BlockNote %} 星 BlockNote ⭐️ {% endcta %} --- 12. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 -------------------------------------------------------------------------------------  將 AI 功能整合到 React 中是很困難的，這就是 Copilot 的用武之地。一個簡單快速的解決方案，可將可投入生產的 Copilot 整合到任何產品中！ 您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui ``` Copilot Portal 是 CopilotKit 提供的元件之一，CopilotKit 是一個應用程式內人工智慧聊天機器人，可查看目前應用狀態並在應用程式內採取操作。它透過插件與應用程式前端和後端以及第三方服務進行通訊。 這就是整合聊天機器人的方法。 `CopilotKit`必須包裝與 CopilotKit 互動的所有元件。建議您也開始使用`CopilotSidebar` （您可以稍後切換到不同的 UI 提供者）。 ``` "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; export default function RootLayout({children}) { return ( <CopilotKit url="/path_to_copilotkit_endpoint/see_below"> <CopilotSidebar> {children} </CopilotSidebar> </CopilotKit> ); } ``` 您可以使用此[快速入門指南](https://docs.copilotkit.ai/getting-started/quickstart-backend)設定 Copilot 後端端點。 之後，您可以讓 Copilot 採取行動。您可以閱讀如何提供[外部上下文](https://docs.copilotkit.ai/getting-started/quickstart-chatbot#provide-context)。您可以使用`useMakeCopilotReadable`和`useMakeCopilotDocumentReadable`反應掛鉤來執行此操作。 ``` "use client"; import { useMakeCopilotActionable } from '@copilotkit/react-core'; // Let the copilot take action on behalf of the user. useMakeCopilotActionable( { name: "setEmployeesAsSelected", // no spaces allowed in the function name description: "Set the given employees as 'selected'", argumentAnnotations: [ { name: "employeeIds", type: "array", items: { type: "string" } description: "The IDs of employees to set as selected", required: true } ], implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds), }, [] ); ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)並查看[演示影片](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file#demo)。 您可以輕鬆整合 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 供應商。您可以按照本[指南](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)將聊天機器人整合到您的應用程式中。 基本概念是在幾分鐘內建立可用於基於 LLM 的應用程式的 AI 聊天機器人。 用例是巨大的，作為開發人員，我們絕對應該在下一個專案中嘗試使用 CopilotKit。 CopilotKit 在 GitHub 上擁有超過 4,200 個星星，發布了 200 多個版本，這意味著它們正在不斷改進。 {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} --- 13.[自動完成](https://github.com/withfig/autocomplete)- IDE 風格的自動完成功能適用於您現有的終端和 shell。 ----------------------------------------------------------------------------------  [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)了解如何開始。 他們在 GitHub 上有 24k+ Stars，這對於經常使用 shell 或終端機的開發人員來說非常有用。 {% cta https://github.com/withfig/autocomplete %} 星狀自動完成 ⭐️ {% endcta %} --- 14. [Tooljet](https://github.com/ToolJet/ToolJet) - 用於建立業務應用程式的低程式碼平台。 ----------------------------------------------------------------------  我們都建立前端，但它通常非常複雜並且涉及很多因素。這樣可以省去很多麻煩。 ToolJet 是一個開源低程式碼框架，可以用最少的工程工作來建置和部署內部工具。 ToolJet 的拖放式前端建構器可讓您在幾分鐘內建立複雜的響應式前端。 您可以整合各種資料來源，包括PostgreSQL、MongoDB、Elasticsearch等資料庫；具有 OpenAPI 規範和 OAuth2 支援的 API 端點； SaaS 工具，例如 Stripe、Slack、Google Sheets、Airtable 和 Notion；以及 S3、GCS 和 Minio 等物件儲存服務來取得和寫入資料。一切 ：） 這就是 Tooljet 的工作原理。  您可以在 ToolJet 中開發多步驟工作流程以自動化業務流程。除了建置和自動化工作流程之外，ToolJet 還可以在您的應用程式中輕鬆整合這些工作流程。  您可以閱讀此[快速入門指南](https://docs.tooljet.com/docs/getting-started/quickstart-guide)，該指南向您展示如何使用 ToolJet 在幾分鐘內建立員工目錄應用程式。該應用程式將讓您透過漂亮的用戶介面追蹤和更新員工資訊。 查看可用[功能列表](https://github.com/ToolJet/ToolJet?tab=readme-ov-file#all-features)，包括 45 多個內建響應式元件、50 多個資料來源等等。 您可以閱讀[文件](https://docs.tooljet.com/docs/)並查看[操作指南](https://docs.tooljet.com/docs/how-to/use-url-params-on-load)。 它們在 GitHub 上有 26k+ Stars，並且基於 JavaScript 建置。他們也獲得了 GitHub 的資助，從而建立了巨大的信任。 {% cta https://github.com/ToolJet/ToolJet %} Star ToolJet ⭐️ {% endcta %} --- 15. [Apitable](https://github.com/apitable/apitable) - 用於建立協作應用程式的 API 導向的低程式碼平台。 ---------------------------------------------------------------------------------  APITable 是一個面向 API 的低程式碼平台，用於建立協作應用程式，並表示它比所有其他 Airtable 開源替代品都要好。 有很多很酷的功能，例如： - 即時協作。  - 您可以產生自動表單。  - 無限的跨錶連結。  - API 第一個面板。  - 強大的行/列功能。  您可以閱讀完整的[功能清單](https://github.com/apitable/apitable?tab=readme-ov-file#-features)。 您可以嘗試[apitable](https://aitable.ai/)並在 apitable 的[live Gitpod demo](https://gitpod.io/#https://github.com/apitable/apitable)中查看該專案的演示。 您也可以閱讀[安裝指南](https://github.com/apitable/apitable?tab=readme-ov-file#installation)，在本機或雲端運算環境中安裝 APITable。 {% cta https://github.com/apitable/apitable %} Star Apitable ⭐️ {% endcta %} --- 16. [n8n](https://github.com/n8n-io/n8n) - 工作流程自動化工具。 -----------------------------------------------------  n8n 是一個可擴展的工作流程自動化工具。透過公平程式碼分發模型，n8n 將始終擁有可見的原始程式碼，可用於自託管，並允許您加入自訂函數、邏輯和應用程式。 每個開發人員都想使用的工具。自動化是生產力和簡單性的關鍵。  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 上有 39k+ Stars，並提供兩個包供整體使用。 {% cta https://github.com/n8n-io/n8n %} 明星 n8n ⭐️ {% endcta %} --- 17. [DOMPurify](https://github.com/cure53/DOMPurify) - 一個僅限 DOM、超快、超級容忍 XSS 的 HTML 清理程式。 ----------------------------------------------------------------------------------------  DOMPurify 是一款僅限 DOM、超快、超級容忍 XSS 的 HTML、MathML 和 SVG 清理工具。作為開發人員，我們的應用程式需要它來確保它們足夠安全。 DOMPurify 可以淨化 HTML 並防止 XSS 攻擊。 您可以向 DOMPurify 提供一個充滿髒 HTML 的字串，它將傳回一個包含乾淨 HTML 的字串（除非另有配置）。 DOMPurify 將刪除所有包含危險 HTML 的內容，從而防止 XSS 攻擊和其他惡意行為。這也太快了。 他們使用瀏覽器提供的技術並將其轉變為 XSS 過濾器。您的瀏覽器速度越快，DOMPurify 的速度就越快。 DOMPurify 使用 JavaScript 編寫，適用於所有現代瀏覽器（Safari (10+)、Opera (15+)、Edge、Firefox 和 Chrome - 以及幾乎所有使用 Blink、Gecko 或 WebKit 的其他瀏覽器）。它不會在 MSIE 或其他舊版瀏覽器上中斷。它根本什麼都不做。 開始使用以下 npm 指令。 ``` npm install dompurify npm install jsdom // or use the unminified development version <script type="text/javascript" src="src/purify.js"></script> ``` 您可以這樣使用它。 ``` const createDOMPurify = require('dompurify'); const { JSDOM } = require('jsdom'); const window = new JSDOM('').window; const DOMPurify = createDOMPurify(window); const clean = DOMPurify.sanitize('<b>hello there</b>'); ``` 如果您遇到問題，請參閱[文件](https://github.com/cure53/DOMPurify?tab=readme-ov-file#how-do-i-use-it)。他們已經記錄了使用腳本或在伺服器端執行它。 您可以看到一些 [純化樣品](https://github.com/cure53/DOMPurify?tab=readme-ov-file#some-purification-samples-please)並觀看[現場演示](https://cure53.de/purify)。 使用起來也非常簡單。 DOMPurify 於 2014 年 2 月啟動，同時版本已達 v3.1.0。 其中涉及到很多概念，我渴望探索它們。如果您有任何與此相關的令人興奮的事情，請告訴我。 我發現的另一個有用的替代方案是[validator.js](https://github.com/validatorjs/validator.js) 。 他們在 GitHub 上擁有超過 12,000 顆星，被超過 30 萬開發者使用，每週下載量超過 5,475,000 次，這使得他們非常可信。 {% cta https://github.com/cure53/DOMPurify %} 明星 DOMPurify ⭐️ {% endcta %} --- 18. [OpenDevin](https://github.com/OpenDevin/OpenDevin) - 更少的程式碼，更多的內容。 -----------------------------------------------------------------------   這是一個開源專案，旨在複製 Devin，一名自主人工智慧軟體工程師，能夠執行複雜的工程任務並在軟體開發專案上與用戶積極協作。該計畫致力於透過開源社群的力量複製、增強和創新 Devin。 只是想讓你知道，這是在德文被介紹之前。 您可以閱讀帶有要求的[安裝說明](https://github.com/OpenDevin/OpenDevin?tab=readme-ov-file#installation)。 他們使用 LiteLLM，因此您可以使用任何基礎模型來執行 OpenDevin，包括 OpenAI、Claude 和 Gemini。 如果您想為 OpenDevin 做出貢獻，您可以查看 [演示](https://github.com/OpenDevin/OpenDevin/blob/main/README.md#opendevin-code-less-make-more)和[貢獻指南](https://github.com/OpenDevin/OpenDevin/blob/main/CONTRIBUTING.md)。 它在 GitHub 上擁有超過 10,700 個 Star，並且正在快速成長。 {% cta https://github.com/OpenDevin/OpenDevin %} 明星 OpenDevin ⭐️ {% endcta %} --- 19. [Amplification－](https://github.com/amplication/amplication)後端開發平台。 -----------------------------------------------------------------------  我想我們都同意，如果我們要達到標準，設定後端並從頭開始是很困難的。 我知道 Appwrite 和 Supabase 在功能方面要好得多，但每種情況都是獨特的，這可能會點擊而不是那些。  Amplication 旨在徹底改變可擴展且安全的 Node.js 應用程式的建立。 他們消除了重複的編碼任務，並提供可立即投入生產的基礎設施程式碼，這些程式碼根據您的規範精心定制，並遵循行業最佳實踐。 其用戶友好的介面促進了 API、資料模型、資料庫、身份驗證和授權的無縫整合。 Amplication 建立在靈活的、基於插件的架構之上，允許輕鬆定製程式碼並提供大量整合選項。   您可以閱讀[文件](https://docs.amplication.com/)並查看可用的[社群插件](https://docs.amplication.com/plugins-list/)清單。 他們還提供了[逐步教程](https://docs.amplication.com/tutorials/#step-by-step-tutorials)，以幫助您使用 Angular 或 React 建立應用程式。 Amplification 在 GitHub 上擁有超過 13k 顆星，發布了 170 多個版本，因此它們不斷發展。 {% cta https://github.com/amplication/amplication %} 星狀放大 ⭐️ {% endcta %} --- 20. [Embla 旋轉木馬](https://github.com/davidjerleke/embla-carousel)-。 ------------------------------------------------------------------  我們都在應用程式中使用輪播，有時會切換到網格佈局，因為輪播並不總是好看，但這會改變您對輪播的看法。 我之所以了解 Embla Carousel，是因為 Shadcn/ui 在他們的 UI 系統中使用了它。 Embla Carousel 是一個簡單的輪播庫，具有出色的流暢運動和出色的滑動精度。它與庫無關、無依賴性且 100% 開源。 如果您不確定，我建議您查看[基本的實例](https://www.embla-carousel.com/examples/predefined/)。     我最喜歡的是視差，它可以提供非常酷且平滑的過渡。 它們支援 CDN、react、Vue、Svelte 和 Solid。 開始使用以下 npm 指令 (react)。 ``` npm install embla-carousel-react --save ``` 您可以這樣使用它。 Embla Carousel 提供了方便的 useEmblaCarousel 鉤子，用於與 React 無縫整合。最小的設定需要一個溢出包裝器和一個滾動容器。 `useEmblaCarousel`掛鉤將 Embla Carousel 選項作為第一個參數。您還需要使用 useEffect 存取 API ``` import React, { useEffect } from 'react' import useEmblaCarousel from 'embla-carousel-react' export function EmblaCarousel() { const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }) useEffect(() => { if (emblaApi) { console.log(emblaApi.slideNodes()) // Access API } }, [emblaApi]) return ( <div className="embla" ref={emblaRef}> <div className="embla__container"> <div className="embla__slide">Slide 1</div> <div className="embla__slide">Slide 2</div> <div className="embla__slide">Slide 3</div> </div> </div> ) } ``` 他們還提供了一組插件，您可以加入它們以實現自動播放等額外功能。 ``` npm install embla-carousel-autoplay --save ``` ``` import React, { useEffect } from 'react' import useEmblaCarousel from 'embla-carousel-react' import Autoplay from 'embla-carousel-autoplay' export function EmblaCarousel() { const [emblaRef] = useEmblaCarousel({ loop: false }, [Autoplay()]) return ( <div className="embla" ref={emblaRef}> <div className="embla__container"> <div className="embla__slide">Slide 1</div> <div className="embla__slide">Slide 2</div> <div className="embla__slide">Slide 3</div> </div> </div> ) } ``` 尋找[插件的完整列表](https://www.embla-carousel.com/plugins/)，包括自動滾動和滾輪手勢。 您可以閱讀有關如何實現不同部分（例如斷點或上一個/下一個按鈕）的[文件](https://www.embla-carousel.com/get-started/)和[指南](https://www.embla-carousel.com/guides/)。 最讓我驚訝的部分是，您可以使用他們的[生成器](https://www.embla-carousel.com/examples/generator/)使用您自己的一組選項來產生自訂輪播。   它們在 GitHub 上擁有 4.9K 顆星，並被超過 26000 名開發人員使用。如果我必須使用一個，我肯定會使用這個。 {% cta repo %} 明星名稱 ⭐️ {% endcta %} --- [21.Documenso](https://github.com/documenso/documenso) - 開源 DocuSign 替代方案。 --------------------------------------------------------------------------  如果您從事自由職業並需要簽署協議，這是最佳選擇。我們不應該浪費時間，而應該專注於重要的事情。 以數位方式簽署文件應該既快速又簡單，並且應該成為全球簽署的每個文件的最佳實踐。 如今，這在技術上相當簡單，但它也為每個簽名引入了一個新方：簽名工具提供者。 此專案的技術堆疊包括 TypeScript、Next.js、Prisma、Tailwind CSS、shadcn/ui、NextAuth.js、react-email、tRPC、@documenso/pdf-sign、React-PDF、PDF-Lib、Stripe 和韋爾塞爾。   免費套餐可讓您每月簽署 10 份文件，這已經足夠了。 您可以閱讀本文以了解如何[設定專案](https://github.com/documenso/documenso?tab=readme-ov-file#developer-setup)。 您可以閱讀[文件](https://github.com/documenso/documenso?tab=readme-ov-file#developer-quickstart)。 我知道這不是一個非常廣泛的用例，但您仍然可以從程式碼中學習，因此這始終是一個優點。 他們在 GitHub 上擁有超過 5800 顆星，並且發布了`v1.5`版本。 不是很流行但非常有用。 {% cta https://github.com/documenso/documenso %} 明星 documenso ⭐️ {% endcta %} --- 哇！ 這花了我很長很長的時間來寫。我希望你喜歡它。 我知道人工智慧工具有時太多了，但我們應該使用它們來讓我們的工作更輕鬆。我的意思是，這就是我們所做的正確的事情，讓生活變得更輕鬆。 我嘗試涵蓋廣泛的工具。 不管怎樣，請讓我們知道您的想法以及您計劃在您的工作流程中使用這些工具嗎？ 祝你有美好的一天！直到下一次。 我建立了很多技術內容，因此如果您能在 Twitter 上關注我來支持我，我將不勝感激。 |如果你喜歡這類東西， 請關注我以了解更多:) | [](https://twitter.com/Anmol_Codes) [](https://github.com/Anmol-Baranwal) [](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 關注 Taipy 以了解更多此類內容。 {% 嵌入 https://dev.to/taipy %} --- 原文出處：https://dev.to/taipy/21-tools-to-take-your-dev-skills-to-the-moon-53mf
視覺化獎品 ===== 想像一下，您正在開發全端應用程式，並且想要實作一項新功能。這是一個複雜的過程，因此您拿出筆和紙，或轉到[tldraw](https://www.tldraw.com/) ，並開始繪製應用程式目前的樣子的圖表，從資料庫到伺服器，再到客戶端。 但是，如果您有一個**工具可以為您可視化整個全端應用程式，**那該有多酷？如果該工具有潛力做更偉大的事情，例如立即為您在整個堆疊中加入有用的功能，或者與人工智慧和大型語言模型配合用於程式碼生成，會怎麼樣？ 嗯，這個想法已經成為現實，它被稱為`wasp studio` 。在這裡查看： {% 嵌入 https://youtu.be/SIAhAvDEoMw %} 黃蜂工作室是這個名字 ========== 首先， [Wasp 是一個具有超能力的全端 React、NodeJS 和 Prisma 框架](https://github.com/wasp-lang/wasp)。它[在 GitHub 上的星數剛剛突破 10,000 個](https://github.com/wasp-lang/wasp)，並已被用來建立超過 50,000 個專案。 為什麼它很特別？它使用設定檔和自己的編譯器來為您管理一系列功能，例如身份驗證、cron 作業、路由和電子郵件發送，為您節省大量時間並讓您專注於有趣的事情。  [Wasp 的中央設定檔](https://wasp-lang.dev/docs)（充當應用程式的一組指令）和編譯器的組合還允許 Wasp 透過單行命令為您執行一系列複雜且有趣的任務，例如： - 全端部署 → `wasp deploy` - 使用 Docker 啟動開發資料庫 → `wasp start db` - 建立整個範例應用程式，例如 SaaS 入門 → `wasp new` - 為您提供整個全端應用程式的視覺示意圖 → `wasp studio` 如果你想親自嘗試一下，你所要做的就是： 1. 使用`curl -sSL https://get.wasp-lang.dev/installer.sh | sh`[安裝Wasp](https://wasp-lang.dev/docs/quick-start) https://get.wasp-lang.dev/installer.sh | `curl -sSL https://get.wasp-lang.dev/installer.sh | sh` 2. 使用`wasp new -t todo-ts`在 TypeScript 中建立一個新的待辦事項應用程式 3. 然後要獲得下面螢幕截圖中的視覺化工具，請執行`wasp studio`  讓我們快速分解一下我們在這裡看到的內容： - 中間藍色的主應用程式元件顯示了應用程式的名稱、我們正在使用的資料庫及其身份驗證方法 - 左邊的黃色實體向我們展示了我們定義的資料庫模型 - 最左邊的紅色和綠色的操作和查詢向我們展示了作用於資料庫實體的伺服器操作 - 右側的路由和頁面向我們展示了 React 元件所在的位置以及它們是否需要授權（以 🔒 表示） 如果您想知道更複雜的應用程式會是什麼樣子，以下是在[Open SaaS（我們的免費開源 SaaS 樣板啟動器）](https://OpenSaaS.sh)上執行時的樣子。  這樣做的好處是，我們可以概覽所有資料庫實體以及它們所依賴的伺服器功能（也稱為「操作」）。在上圖的左上角，您甚至會看到一個 cron 作業`dailyStatsJob` ，它每小時執行一次 ( `0 * * * *` )。 例如，這使得開發後端邏輯變得輕而易舉，特別是如果您不是經驗豐富的後端開發人員。考慮一下讓您到達那裡的程式碼就像這樣簡單： ``` job dailyStatsJob { executor: PgBoss, perform: { fn: import { calculateDailyStats } from "@src/calculateDailyStats" }, schedule: { cron: "0 * * * *" }, entities: [User, DailyStats, Logs, PageViewSource] } ``` 是的，這就是您在伺服器上取得非同步作業所需的全部內容。現在你的`calculateDailyStats`函數將每小時執行一次——不需要第三方服務🙂 這是派對把戲嗎！ ======== 好的。您可能會想，視覺化工具很酷，但它真的有用途嗎，還是只是一個不錯的「派對把戲」？老實說，*目前*這只是派對上的把戲。 但這是一個具有**很大潛力的**派對技巧。讓我解釋。  當然，您可以以當前形式使用它來更好地了解您的應用程式，或者計劃一些新功能，但將來您將能夠使用它做更多事情，例如： - 只需點擊幾下即可新增新的身份驗證方法 - 透過伺服器操作快速搭建功能性客戶端元件 - 立即為您的整個應用程式新增新的全端功能，例如 Stripe 支付 - 與大型語言模型 (LLM) 輕鬆協作，即時產生功能！ 同樣，這一切都是可能的，因為中央設定檔充當了應用程式的一組「指令」。透過這個文件，Wasp 確實知道您的應用程式是如何建置的，因此它可以輕鬆地以視覺形式向您顯示您的應用程式。它還使您可以更輕鬆地以令人興奮的新方式建立應用程式的新部分。 看看下面 Wasp 設定檔中的另一個片段。這就是為您的網頁應用程式獲得全端身份驗證所需的一切！這是因為 Wasp 編譯器正在為您管理樣板程式碼。 ``` app todoVisualize { title: "todo-visualize", auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, }, } } entity User {=psl id Int @id @default(autoincrement()) tasks Task[] psl=} ``` 一張圖值一千枚代幣 ========= 現在我們已經了解了 Wasp 的工作原理，接下來讓我們更深入地探討 Wasp 和`wasp studio`與 LLM 結合作為未來用例的潛力。 目前，人工智慧輔助程式碼產生的最大限制之一是上下文。現在，我們都知道LLM喜歡產生幻覺，[但他們的「記憶力」也很差](https://glazkov.com/2023/05/18/ai-developer-experience-asymptotes/)。因此，如果您試圖讓他們為您的應用程式建立功能，以確保新功能適用於您的應用程式，您必須不斷「提醒」他們應用程式的工作方式、結構和依賴項。 但是，透過 Wasp 的設定檔（本質上只是全端應用程式及其功能的更高層次抽象），我們為法學碩士提供了成功為手頭上的應用程式建立新功能所需的上下文。  這非常有效，因為我們不僅為 LLM 提供了所需的上下文，而且 Wasp 的編譯器還承擔了為我們編寫大部分樣板文件的責任（謝謝，朋友），為 LLM 提供了更簡單的任務的寫作，例如： - 修改Wasp設定檔 - 在伺服器上執行的函數 - 使用 Wasp 程式碼的 React 元件 從這個意義上說，法學碩士必須掌握的上下文要少得多，並且其糟糕的記憶力是可以原諒的，因為黃蜂是確保一切都很好地粘在一起的人！ 為了進一步說明這一點，讓我們再看看上面介紹的授權碼： ``` auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, }, ``` 請考慮此程式碼在整個堆疊中提供身份驗證。因此，您不僅可以在伺服器上獲得為您產生和管理的所有身份驗證邏輯，還[可以在客戶端上獲得可供您使用的 UI 元件和身份驗證掛鉤](https://wasp-lang.dev/docs/auth/ui)！  另一方面，如果沒有 Wasp 給我們的抽象，我們最終只能依靠 LLM，它的記憶力很差，容易產生幻覺，一遍又一遍地為我們編寫一堆樣板文件，如下圖所示的 JWT 中間件：  法學碩士非常擅長單獨編寫樣板程式碼、重複性任務。但期望他們將其作為有凝聚力的全端應用程式的一部分來完成，這意味著我們有更多的表面積來暴露可能的錯誤。 另一方面，對於 Wasp，**只需幾行程式碼**。如果人類寫起來很容易，那麼法學碩士也很容易寫。 順便說一句，這不僅為我們省去了很多麻煩，還可以為我們節省很多錢，因為[AI 生成的 Wasp 應用程式使用的令牌（即輸入和輸出文字）比同類工具少約 10-40 倍](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)，因此他們以一小部分的價格產生程式碼。 幫助計算機幫助我們 ========= 隨著技術的不斷改進，專業知識較少的用戶將更容易進行編程，因為更多的專業知識將嵌入我們的工具中。 但這意味著我們需要抽象，使我們人類能夠輕鬆地使用這些工具。 就像上面的 LLM 範例一樣，我們可以建立工具，讓人工智慧一遍又一遍地為我們編寫所有樣板文件，但問題是，當他們*可以*做其他更有用的事情時，我們*是否應該*讓他們這樣做？法學碩士擅長快速產生大量新想法。為什麼不建構讓人工智慧在這方面幫助我們的工具呢？ 這正是我們對`wasp studio`未來的規劃。一個視覺化介面，讓您在有或沒有法學碩士的幫助下拼湊應用程式的新功能，然後快速對這些不同的想法進行 A/B 測試。 {% 嵌入 https://www.youtube.com/watch?v=ERwtJtNQL28 %} 不僅如此，我們還可以使用一個抽象來與不太懂科技的使用者輕鬆協作。在這些工具的幫助下，甚至您的產品經理也可以從中獲得樂趣並開始建立新功能以供開發人員簽署。 Wasp 及其功能集的強大之處在於，我們獲得的程式碼對於人和機器來說都**更容易閱讀、除錯和維護**。與視覺化介面相結合，我們將能夠快速迭代整個堆疊中的新功能，將其用作我們自己的規劃和編排工具，或者作為更輕鬆地除錯和監督法學碩士可能為我們所做的工作的一種方式。 這是對 Web 開發未來的令人興奮的展望，這些新工具將帶來許多利用它們的新方法。 您認為像`wasp studio`這樣的工具有哪些使用方法？您能想像人工智慧與人類協作領域即將出現哪些其他發展嗎？請在下面的評論中告訴我們，感謝您的閱讀！ --- 原文出處：https://dev.to/wasp/the-first-framework-that-lets-you-visualize-your-reactnodejs-app-1d63
開發者朋友您好！ 我知道不斷學習和進步是多麼困難。跳過一些被低估的知識是多麼容易，但成為偉大的開發人員所必需的。 在我的旅程中，我發現了一些非常寶貴的資源，我真的不敢相信它們是免費的。以下是其中兩個： ### 1.[重構大師](https://refactoring.guru)  這個網站有大量的知識，充滿了美麗的插圖和清晰的解釋，我還沒有找到更好的。 它詳細涵蓋了兩個主要主題：重構的藝術和設計模式。 您將了解如何準確確定程式碼髒的原因以及清理程式碼並使程式碼可讀且更易於維護的正確方法。 此外，您還可以閱讀所有 22 種經典設計模式。 哦，它有多種語言的程式碼範例！ ### 2.[鍛煉](https://exercism.org/)  如果您正在學習或正在考慮學習新的程式語言，那麼這裡就是正確的地方。 Exercism 是一個透過實踐學習的平台，透過練習從簡單的世界到高級和困難的挑戰。 有 70 多種語言可供學習，其中一些語言有特殊的學習路線圖。所有練習都按主題分組，您需要學習一個主題才能解鎖在此基礎上建立的其他主題。這對於快速學習非常有用，而且不會浪費時間從一篇文章跳到另一篇文章，來回。 有些語言和技術有很棒的文件並且教得很好，而其他語言和技術則不然。因此，運動總是可以增加你的學習經驗。 ### 結論 這就是本文的全部內容。感謝您的閱讀，並且不要忘記在評論中貢獻並失望您不相信的資源是免費的或如此便宜的資源。 💻👋🏻 再見... --- 原文出處：https://dev.to/kochiyama/2-sites-to-become-a-better-developer-2f9j
我正式擁有三年經驗和中級職稱。自從兩年前我寫下了[我作為專業開發人員第一年學到的 12 件事](https://dev.to/abbeyperini/12-things-i-learned-during-my-first-year-as-a-professional-developer-i0f)以來，我的最佳建議已經發生了很大的變化。 1. 水平不重要，結果才重要 -------------- 如果你正在解決他們的問題，沒有人會問你已經開發了多久。不要僅僅因為某個主題被稱為高級而推遲學習您感興趣的主題。你永遠不知道你會被要求建造什麼，所以它可能會比你想像的更快派上用場。 2.不要死記硬背 --------  了解如何找到您需要的資訊。我不是說 StackOverflow 和 GenAI。對於您使用的工具和語言，請了解規範或文件所在的位置。找出誰寫了最好的指南。 如果您不記得了，也沒關係`?`當您要使用 JavaScript 條件運算子時，or `:`首先出現。重要的是您知道何時使用條件運算符以及在哪裡可以找到確切的語法。 工具不斷更新。請務必檢查您正在閱讀的文件的版本。找到一種方式來了解最新情況，無論是新聞通訊還是真正喜歡 CSS 的朋友。 3. 深入基礎知識 --------- 聽聽在 3 年內使用過 3 個 JavaScript 框架的人的話——如果你很好地了解基礎知識，那麼在生態系統中學習新工具就會容易得多。您最終可能會編寫出更簡單、更強大的軟體。您不會嘗試編寫已經存在的功能，因為您不知道它們存在。您將更了解所遇到的錯誤，並在導致錯誤之前預見錯誤。 4.系統思考會讓你走得更遠 ------------- 解決任何錯誤都需要係統思考。如果您不考慮牆上的插頭，當烤麵包機無法打開時您就不會想到檢查它。能夠將系統作為一個整體來思考，可以更輕鬆地預測邊緣情況並設計新功能。在[新程式碼庫入門中](https://dev.to/abbeyperini/getting-started-in-a-new-codebase-e7b#6-mental-models)閱讀有關如何為程式碼庫建立心理模型的更多訊息 5.先嘗試再問，確保問題永遠不會是個愚蠢的問題 ----------------------- 開發人員通常以解決問題為導向。如果你能證明你嘗試了一些方法但沒有奏效，那麼他們可能會想深入挖掘自己，找出為什麼明顯的解決方案不起作用。 6.每一行程式碼都是一種責任 --------------  編寫程式碼就像其他人必須修復它一樣。 （即使 6 個月後那個人就是你。）安裝軟體包，就像你必須經常更新它們一樣。記錄原因，這樣以後就不會意外破壞某些東西。在將某個固執己見的工具整合到您的系統之前，先了解它的意見，並找出它的意見與您所需的功能相衝突。 7.練習閱讀別人的程式碼 ------------ 通常教授軟體開發的方式可能會讓您相信您經常會建立新鮮的、全新的應用程式。您更有可能修復現有程式碼庫並為其加入功能。您甚至可能花更多的時間閱讀程式碼而不是編寫程式碼。練習閱讀程式碼和重構程式碼而不引入新的錯誤。 8. 測試、測試、再測試 ------------ 正如[Chocho](https://www.linkedin.com/in/enriquezamudiolopez)在 DevNexus 2024 演講中所說，“程式碼就是理論。軟體就是實踐。”在請求審查之前，請始終執行您的程式碼並對其進行測試。盡可能多練習編寫測驗。您會發現，預測使用者如何破壞您的程式碼並考慮更多的事情，而不只是快樂的道路，將使您成為更好的開發人員。 9. 練習將需求轉化為軟體 ------------- 票#387 - 在頁面上新增一個按鈕，用於開啟模式並允許使用者編輯此資料。 預計您可以將這樣的需求轉換為步驟清單或偽程式碼。如果票證太模糊，您就有責任獲得所需的答案。 解決這些步驟後，您將需要將它們轉換為程式碼並（希望）對該程式碼進行測試。然後，您將負責透過公司的版本控制、（希望）審查、（希望）品質保證和部署流程來取得該程式碼。 開源是實踐這一點的好地方。 10. 社區極為重要 ---------- 你不會在社群媒體貼文中獲得最細緻、最公正的觀點。當您需要這種觀點時，您需要一個支持網絡來打電話。 指導是其中的一部分。參加當地的聚會和會議是建立人際網絡和擴展發展世界觀的好方法。加入網路小組將使您能夠了解資深開發人員的觀點。 不要試圖獨自完成這項工作。那裡有很多訊息，很容易讓人不知所措或視野狹隘。 11.找到你喜歡程式設計的地方 ---------------  我並不是說熱愛你的工作或成為難以捉摸的熱情程式設計師。然而，不斷的學習會讓你自己陷入反覆的不適。如果你不知道為什麼要繼續醒來並對自己做這些事，你就會精疲力盡。這完全可能是個自私的原因，但你必須知道為什麼。 12.每個人都在自己的旅程上 -------------- 您不會與他人的職業和內容競爭。別人的成功之路可能根本不適合你。專注於您獨特的視角和優勢。尋找並分享您的聲音。外面有人想聽聽看。 結論 -- 查看我（或其他任何人）的個人資料可能會讓您相信我通往中級開發人員的道路是筆直而順利的。事實恰恰相反。我跌倒過，哭過，刺破過，精疲力竭過，還被困過很多兔子洞。 因此，我必須衷心感謝我的丈夫、家人、朋友和科技社群幫助我站穩腳步。我還必須感謝許多同事給予我發揮潛能的機會。沒有你們，我不可能走到這一步。我很感激我有這樣的經驗。 --- 原文出處：https://dev.to/abbeyperini/12-tips-from-a-mid-level-developer-29bk
上週我發現了一些很棒的圖書館！ 檢查它們、使用它們、幫助它們加星⭐️ > 「我永遠不會停止學習。 我不會只做分配給我的事情。 我知道不存在所謂的現狀。 我將透過充滿熱情和忠誠的客戶來永續地發展我們的業務。 我永遠不會放棄幫助同事的機會，我會記得我知道一切之前的日子。 影響力比金錢更能激勵我，而且我知道**開源是我們這一代最強大的想法之一**。 我會盡可能多溝通，因為這是分散式公司的氧氣。我參加的是一場馬拉松，而不是短跑，無論目標有多遠，到達目標的唯一方法就是每天把一隻腳放在另一隻腳前面。只要有時間，沒有什麼問題是解決不了的。 馬特·穆倫韋格 Automattic 首席執行官   --- Coolify -- 隆重介紹 Coolify，它是[Heroku](https://www.heroku.com/) 、 [Netlify](https://www.netlify.com/)和[Vercel](https://vercel.com/)的開源和自架替代品 這個創新平台由[Andras Bacsai](https://twitter.com/heyandras)開發，使用戶能夠輕鬆部署和管理其 Web 應用程式，同時保持對其基礎設施的完全控制。  ### 主要特徵： - **自託管**：借助 Coolify，您可以自由地將 Web 應用程式託管在自己的伺服器上，從而完全控制您的部署環境。 - **輕鬆部署**：該平台簡化了部署過程，讓您只需單擊幾下或命令即可部署應用程式。 - **可擴展性**：Coolify 旨在輕鬆擴展，在不影響效能的情況下滿足不斷增長的流量和工作負載需求。 - **客製化**：您可以自訂和配置部署環境以滿足您的特定要求，確保最佳效能和安全性。 - **整合**：Coolify 與流行的開發工具和工作流程無縫集成，使其可以輕鬆合併到您現有的專案中。 - **社區支持**：受益於充滿活力的開發者和貢獻者社區，他們提供支援、共享資源並協作改進平台。  在 GitHub 上查看 Coolify 並給它一顆星： [Coolify Repository](https://github.com/coollabsio/coolify) --- Glasskube ----- [Glasskube](https://glasskube.dev/)是一個開源 Kubernetes 套件管理器，可簡化 Kubernetes 部署的套件管理。它提供了一個用戶友好的介面，降低了管理您最喜歡的 Kubernetes 套件的複雜性並提高了透明度。  ### 主要特徵： - **使用者友善的 UI** ：Glasskube 提供直覺的使用者介面，使 Kubernetes 套件管理對於使用者來說更容易存取和理解。 - **Brew-Inspired CLI** ：對於熟悉命令列介面的高級用戶，Glasskube 提供了 Brew-inspired CLI，允許高效的套件管理操作。 - **依賴感知**：Glasskube 套件具有依賴關係感知能力，確保 Kubernetes 套件的順利管理和安裝並考慮依賴關係。 - **雲端原生應用程式**：Glasskube 設計為雲端原生應用程式，符合 GitOps 原則，有助於無縫整合到 Kubernetes 環境和工作流程中。 Glasskube 作為簡化 Kubernetes 套件管理的寶貴工具而脫穎而出。無論您是 Kubernetes 新手還是經驗豐富的 DevOps 工程師，Glasskube 都能提供使用者友善的解決方案，幫助您輕鬆有效地管理 Kubernetes 套件。 [看看 GitHub 上的 Glasskube 並給它一顆星](https://github.com/glasskube/glasskube) --- AgentCloud --- [AgentCloud](https://www.agentcloud.dev)是您建立自己的 AI 應用程式遊樂場的首選平台！想像一下，它就像擁有您自己的個人 GPT（生成式預訓練變壓器）建構器平台，但具有一些很棒的額外功能。  借助 Agent Cloud，公司可以靈活地為其員工建立和部署兩種不同類型的應用程式： 1. **對話式聊天應用程式**：這些應用程式的運作方式與 OpenAI 的 GPT 類似，允許使用者開發單代理聊天應用程式。然而，它們還具有利用任何大型語言模型 (LLM)、存取豐富的工具庫以及利用來自眾多資料來源的龐大知識庫的額外優勢。 2. **流程應用程式**：向自動化天堂問好！這些應用程式透過為代理設定要處理的目標和任務來幫助您簡化流程。這一切都是為了讓工作變得更輕鬆、更快捷、更有協作性。 因此，無論您是希望透過漂亮的聊天機器人來提高工作效率，還是像專業人士一樣自動執行任務，Agent Cloud 都能滿足您的需求。這一切都是為了為您的團隊提供他們需要的工具，讓他們更聰明地工作，而不是更辛苦地工作！ 最好的部分是什麼？它是開源的！如果您喜歡使用 Agent Cloud，為什麼不在 GitHub 上表達一些喜愛並給它一顆星呢？您的支持對開源社群來說意味著世界。 🌟 看看 GitHub 上的 Agent Cloud 並給它一顆星： [Agent Cloud Repository](https://github.com/rnadigital/agentcloud)  我還發現了一個很酷的演示，可以讓您先睹為快了解 Agent Cloud 的全部內容。請觀看此處的介紹影片，以及創始人本人在 YouTube 上對[RAG Google Bigquery](https://youtu.be/POLdnrjsy9c?si=y5MFXNSs-o5TJMMH)的一些精彩見解。  --- CrewAI ------ [CrewAI](https://www.crewai.com/)是一個突破性的框架，旨在協調角色扮演和自主人工智慧代理。這個開源專案由 João Moura 開發，使代理商能夠智慧協作，使他們能夠無縫地協作完成複雜的任務。  ### 主要特徵： - **協作智能**：CrewAI 促進人工智慧代理之間的協作智能，使他們能夠匯集資源和專業知識，更有效地完成任務。 - **自主代理**：此框架支援自主人工智慧代理的開發，能夠根據其環境和目標做出獨立決策並採取行動。 - **任務編排**：CrewAI 提供用於編排任務和協調多個代理程式的操作的工具，確保順暢的協作和同步。 - **可擴展性**：借助 CrewAI，開發人員可以擴展其 AI 系統以容納大量代理，使其適用於從小規模模擬到大規模環境的應用程式。 - **靈活性**：該框架在設計代理行為和互動方面提供了靈活性，允許開發人員自訂系統以適應特定的用例和場景。 - **社群支援**：CrewAI 受益於充滿活力的開發人員和研究人員社區，促進自主代理和人工智慧領域的協作和創新。 在 GitHub 上查看 CrewAI 並給它一顆星： [CrewAI Repository](https://github.com/joaomdmoura/crewAI) > 了解[Agent Cloud 和 CrewAI](https://www.agentcloud.dev/blog/agent-cloud-vs-crewai-a-comparison)之間的差異。 --- SuperAGI ----- [SuperAGI](https://superagi.com/)是一個尖端平台，旨在突破對話式 AI 的界限，整合通用人工智慧 (AGI) 原理，建立高度智慧且適應性強的聊天機器人。  ### 主要特徵： - **通用人工智慧（AGI）** ：SuperAGI 利用 AGI 原理開發具有類人理解和推理能力的聊天機器人。 - **深度學習模型**：該平台利用最先進的深度學習模型（例如變壓器和神經網路）來處理和產生自然語言響應。 - **知識圖**：SuperAGI 結合知識圖來表示和組織訊息，使聊天機器人能夠存取龐大的結構化知識儲存庫。 - **元學習**：SuperAGI 採用元學習技術，使聊天機器人能夠根據過去的互動和回饋不斷改進和調整其行為。 - **多輪對話**：SuperAGI 支援多輪對話，允許聊天機器人維護上下文並與用戶進行更自然、更流暢的互動。 - **可擴展性**：該平台具有高度可擴展性，使開發人員能夠整合自訂模組並根據需要擴展聊天機器人功能。 在 GitHub 上探索 SuperAGI： [SuperAGI 儲存庫](https://github.com/TransformerOptimus/SuperAGI) --- Gitroom ---- [Gitroom](https://gitroom.com/)提供工具並協助您擴展開源儲存庫。獲得更多知名度、明星、貢獻和客戶。  ### 主要特徵： - **統一協作**：Gitroom 將團隊協作直接引入到您的 Git 儲存庫中，從而實現無縫溝通和協調。 - **即時更新**：隨時了解儲存庫活動的即時更新，讓團隊能夠輕鬆追蹤變更和進度。 - **互動式討論**：直接在 Git 儲存庫中參與互動式討論，從而輕鬆分享想法並提供回饋。 - **任務管理**：使用內建任務管理功能追蹤任務和問題，簡化專案工作流程並提高生產力。 - **整合**：Gitroom 與 GitHub 順利集成，為已經習慣該平台的使用者提供熟悉且直覺的介面。 - **客製化**：透過可自訂的設定和首選項自訂 Gitroom，以滿足您團隊的特定需求。 在 GitHub 上探索 Gitroom：[Gitroom 儲存庫](https://github.com/gitroomhq/gitroom) 總之，這些儲存庫 - AgentCloud、Gitroom、Glasskube CrewAI、Coolify 和 SuperAGI - 都包含用於建立更聰明應用程式的令人驚嘆的工具。無論您喜歡聊天機器人、人工智慧代理還是 Web 部署，每個人都能找到適合自己的東西。 如果您喜歡所看到的內容，請在 GitHub 上給他們一顆星 ⭐️，為什麼不使用他們的工具來創造一些很棒的東西呢？ 很快會在另一篇部落格文章中見到您。  感謝您閱讀，如果您喜歡這個部落格並且想更深入地了解開發人員工具、React 等，請查看我[網站](https://theankurtyagi.com/)上的其他文章。 - [如何使用 React 和 Appwrite 建立安全的任務管理應用程式](https://theankurtyagi.com/appwrite/) - [如何使用 Hygraph 和 React 建立評論應用程式](https://theankurtyagi.com/build-review-app-hygraph-react/) - [如何使用 React 和 Supabase 建立全端 Notes 應用程式](https://theankurtyagi.com/notes-app-react-supabase/) --- 原文出處：https://dev.to/tyaga001/6-open-source-libraries-you-must-know-in-2024-5dgb
https://www.youtube.com/watch?v=qrl0h-gbafA 介紹 -- 在網路開發領域，響應式設計的概念通常會為初學者帶來陡峭的學習曲線。即使在轉向更高級的主題之後，許多人仍然難以完全掌握響應式設計的本質，而這一缺陷在他們的專案中變得明顯。 對許多工程師來說，響應式設計是一個難以實現的目標，主要是因為截止日期的緊迫感常常會將他們的注意力轉移到功能以及專案在個人裝置上的外觀上。這種狹隘的關注可能會導致對網站或應用程式在不同裝置上的執行情況的監督。 即使是成熟的網站也會在響應能力方面出現問題。就我個人而言，當我縮小筆記型電腦上的瀏覽器時，我發現眾所周知的 amazon.com 失去了美感。  也就是說，我認為現在要達到相當熟練的響應式設計水平並不是太難。我只是認為教育界缺乏對這個主題的關注，也缺乏以清晰、全面的方式呈現它。這就是我打算在這篇文章/影片中做的事情。 我已經確定了為了實現幾乎所有響應式設計而必須了解的 7 個 CSS 屬性/概念。雖然可能還有其他技術可以增強反應能力，但這七種技術足夠全面，可以解決大多數情況。除非您的應用程式非常複雜，否則您應該能夠在合理的時間內理解並應用這些概念。 當然，要真正理解這些概念，實踐是不可或缺的。這就是為什麼我製作了一個影片教學來補充本指南，提供所討論原則的實際演示。請記住，隨著每次練習，這些概念都會變得更加直觀。 以下是我認為至關重要的主要主題： - 尺寸單位 - 相對於螢幕 - `vw` , `vh` - 相對於其他元素 - `%` - `max-width`和`min-width`屬性 - 彈性盒 - CSS 網格 - 媒體查詢 - 響應式影像屬性 - JavaScript 用於更複雜的回應行為 尺寸單位 ---- 大多數初學者專注於建立一個適合他們螢幕的設計。因此，他們沒有意識到以精確的方式（通常使用像素（px））指定元素的大小、填充、邊距等的缺點。問題是這些元素永遠不會隨著螢幕尺寸的變化而改變尺寸。過渡到使用較少的絕對單位，如百分比和視口單位 (vw/vh) 是靈活設計的關鍵。 ### 百分比 初學者必須小心百分比。理解父子關係的概念需要時間，當給子物件一個百分比時，它是其父/容器（可互換術語）大小的百分比，而不是整個螢幕的大小的百分比。 這裡的另一點是，所有看似「沒有父級」的外部元素實際上都有 - `<body>`元素。身體尺寸如下： - 寬度 - 螢幕的寬度 - Height - 其內部內容的高度（如果正文中沒有任何內容，則為 0） ### 視口寬度/高度 ( `vw` / `vh` ) 當您想要相對於*螢幕*調整元素的大小，從而與其*直接容器*的大小無關時，您需要使用`vw`和`vh` 。 下面是一個例子。假設您的網站應該有一個`<header>`然後是一個`<main>`部分，並且您想要專門調整標題的高度，並讓主要部分佔據螢幕的其餘高度。 實現此目的的一種方法如下： ``` header { height: 300px; } main { height: calc(100vh - 300px); } ``` 一個`vh`單位基本上是視口高度（螢幕高度）的 1%。因此， `100vh`表示螢幕高度的 100%，因此`calc(100vh - 300px)`表示「螢幕高度的 100% 減去 300px」。 這確保了主要部分將佔據標題之後螢幕的剩餘高度。 您也可以使用 flex 來實現此結果，但我稍後會討論這一點。在這種具體情況下，我認為兩者都可以。隨著專案複雜性的增加，也許一種方法會更好。 ### 何時使用 px 擁有這些其他選項以及我將在下面詳細介紹的選項絕對並不意味著 px 單位如今在 CSS 中沒有一席之地。在很多情況下，您希望某些東西具有不隨螢幕變化的特定尺寸。 UI 設計中的許多元素可能更喜歡永遠不會改變的特定尺寸。例如，按鈕的大小通常是這樣的。 `max-width`和`min-width`屬性 ------------------------- 當您希望元素的大小增大或縮小但僅限於某個點時，這些屬性會變得非常有用。 常見的情況是使用者介面頂部的搜尋欄。搜尋欄可能會佔據行動裝置上的大部分螢幕寬度。儘管筆記型電腦的搜尋欄比手機更大，但一旦裝置變大，您就不會希望搜尋欄幾乎保持全螢幕寬度。 看看 Airbnb 的輸入列如何隨著螢幕的增加而變化（我的意思是它的寬度）。 移動的：  藥片：  大平板電腦/小筆記型電腦：  筆記型電腦:  這些影像有點難以判斷，但在行動裝置上，搜尋欄佔據了螢幕的大部分寬度，但就像素而言仍然很小。然後它擴展到平板電腦和小型筆記型電腦。但在某個時刻，隨著螢幕尺寸的進一步增大，它會停止增長。 彈性盒 --- 我覺得自己很幸運，在 Flexbox 發明之前不必學習 CSS。簡而言之，「Flex」是一種在位置和大小方面將元素相互關聯的驚人方法。 使用flex，你可以寫`display: flex;`在父元素上，那麼它就成為“彈性容器”，並且其所有直接子元素都成為“彈性專案”。您可以在 Flex 容器上設定幾個直覺的 Flex 相關屬性來描述 Flex 專案的行為。您也可以在 Flex 專案本身上設定一些屬性，以將其樣式與 Flex 專案的其餘部分區分開來。 初學者通常不理解彈性關係是嚴格在父子之間的。不是父母和孫子，等等。您可以擁有本身也是 Flex 容器的 Flex 專案。這意味著一個元素具有`display: flex;`它的子元素之一也有`display: flex;` 。 以下是 flex 可以派上用場的兩個最常見的場景： - Flex 可讓您在彼此相鄰或彼此之上的元素之間建立位置/空間關係。因此，例如，如果您在一行中有幾個專案，則只需使用一兩個簡單的 CSS 屬性即可在該行中將它們均勻地間隔開。 - 使用 flex，您可以輕鬆更改同級元素的定位方向。就方向而言，我的意思是從水平（行）到垂直（列），反之亦然。例如，考慮螢幕頂部導航中的連結，這些連結在移動設備的漢堡菜單下垂直組織。 CSS 網格 ------ Flex 有一個缺點，那就是當您嘗試同時控制兩個方向（x 軸和 y 軸）上的元素時。 Flex 的核心是為沿著同一個軸（x 軸或 y 軸）對齊的元素定義屬性。想要執行此操作的最常見場景是製作專案網格時。 當試圖確保它們的尺寸相同時，您可能會遇到麻煩。有關此範例，請參見下圖。  使用網格，您只需應用一兩個簡單的 CSS 屬性即可，然後問題就解決了。見下文。 ``` #card-container { padding: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; justify-content: center; } ``` 注意 - 有些人實際上選擇在其網站的整個佈局中使用網格。說實話，我從來沒有花足夠的時間來探索這個選項，因為我先學了flex（網格後來出來了），而flex可以滿足我95%以上的需求。我確實只需要用於實際網格佈局的網格，如果我需要的話，它們通常是我網站的一部分。 在 UI 的不同部分使用 flex 和 grid 並沒有什麼問題！ 媒體查詢 ---- 幾乎在任何設計中，當螢幕達到一定尺寸時，您都需要做出更大的改變。小螢幕更喜歡垂直滾動。使用更大的電腦螢幕，您可以水平放置更多元素。 透過媒體查詢，您可以定義所謂的“斷點”，即某些樣式將被覆蓋的點，以適應其他裝置的調整設計。 您可以選擇先建立行動用戶介面還是桌面使用者介面，然後建立一個斷點，在該斷點處定義新樣式以覆蓋最初並非針對的平台的現有樣式。 讓我們使用以下範例：對於行動設備，某些元素應組織在列中，但在較大的設備上，它們應組織在行中。 假設我們選擇了“行動優先設計”，這意味著首先設計行動用戶介面，然後確定實現更大設備設計的響應能力。這種選擇，而不是首先為筆記型電腦/桌上型電腦設計，在今天被認為更好，因為人們在手機上花費的時間比在大型電腦上花費的時間更多，而且公司更願意讓更多的用戶滿意。 好吧，告訴你的應用程式在平板電腦寬度和更大的情況下更改其外觀的方法基本上是- 使用媒體查詢斷點- 說，“在這個像素寬度和更高的像素寬度下，現在將這些專案的組織更改為一行。 此變更可能表示僅將 Flex 容器的 flex-direction 屬性從列變更為行，如下所示： ``` #flex-container { display: flex; flex-direction: column; } screen and (min-width: 768px) { #flex-container { flex-direction: row; } } ``` 此程式碼片段意味著 ID 為「flex-container」的元素將具有`flex-direction: column` ；對於寬度小於 768px 的螢幕，但對於寬度為 768px 及以上的螢幕，該元素將具有`flex-direction: row;` 。 附註 - 每個裝置都有相對標準的像素寬度，因此您可以尋找設定斷點的像素寬度，以指示從行動裝置到平板電腦、平板電腦到筆記型電腦等的轉換。 響應式圖像屬性 ------- 通常，上述屬性的組合將用於指定網站中圖像的大小，並且不需要進一步的 CSS。 然而，有時圖像不隨螢幕縮放。我想提供一些在這種情況發生時您可以探索的屬性。 其中一項屬性是`aspect-ratio` 。此屬性可讓您定義影像的首選縱橫比，以便它在不同的螢幕尺寸上始終保持相同的高寬比。 另一個屬性是`object-fit` ，它可以採用`fill` 、 `contain` 、 `cover` 、 `none`和`scale-down`等值，允許靈活控制圖像如何適應不同的螢幕尺寸。 JavaScript 用於更複雜的回應行為 --------------------- 最後，JS 在響應式設計中發揮著至關重要的作用，可以實現 CSS 單獨無法處理的更動態和複雜的調整，從而允許基於使用者互動或裝置規範的自訂行為。 使用 JS，您可以對更多事件類型做出反應，而不僅僅是螢幕尺寸更改，例如按鈕點擊、捲動、拖放等。 使用 JS，您可以編寫邏輯來根據您想要的任何條件動態調整元素的大小。例如，您可以根據使用者的裝置、行為、偏好和/或位置來調整內容。 JS 將佔 UI 程式碼的大部分，因此如果使用 HTML 和 CSS 無法輕鬆實現某些功能，則解決方案通常需要 JS。 結論 -- 實現響應式設計是一種平衡行為，需要將 CSS 技巧和策略性 JavaScript 結合起來。透過理解和應用上述七個關鍵概念，開發人員可以建立不僅具有視覺吸引力而且可適應所有必要設備的網站。 掌握響應式設計的旅程是不斷學習與實踐的過程。要了解這些概念的實際應用，請不要忘記查看隨附的影片教學。 請記住，響應式設計是觸手可及的，並且隨著每個專案的進行，該過程變得更加直觀。 希望我能夠透過這篇文章和影片使響應式設計成為一個不那麼模糊和令人畏懼的概念。 祝您未來的專案一切順利，感謝您的閱讀。 直到下一次， 賈里德 --- 原文出處：https://dev.to/jaredcodes/finally-understand-responsive-design-3con
Supabase Auth 現在支援[匿名登錄](https://supabase.com/docs/guides/auth/auth-anonymous)，這是社群[最需要的功能](https://github.com/supabase/auth/issues/68)之一。 {% cta https://supabase.com/ga-week %} ⚡️ 了解有關 GA 週的更多資訊 {% endcta %} 匿名登入可用於建立尚未註冊您的應用程式的**臨時使用者**。這降低了新用戶試用您的產品的阻力，因為他們不必提供任何註冊憑證。 {% 嵌入 https://youtu.be/WNN7Pp5Ftk4 %} 啟用匿名登入 ------ 您今天可以從儀表板為您的專案[啟用匿名登入](https://supabase.com/dashboard/project/_/settings/auth)：  對於本機開發，請升級 Supabase CLI 並將設定新增至`config.toml`檔案： ``` [auth] enable_anonymous_sign_ins = true ``` 現在您可以透過[Javascript](https://supabase.com/docs/reference/javascript/auth-signinanonymously) 、 [Flutter](https://supabase.com/docs/reference/dart/auth-signinanonymously)或[Swift](https://supabase.com/docs/reference/swift/auth-signinanonymously) SDK 建立匿名使用者。以下是如何使用`supabase-js`建立匿名用戶。 ``` const { data, error } = await supabase .auth .signInAnonymously() ``` 術語 -- 使用匿名登入建立的個人資料也會經過`authenticated` ！ 呼叫`.signInAnonymously()`後，您已將使用者移至驗證流程，我們將他們視為登入使用者：  限制匿名用戶的存取 --------- 與永久使用者一樣，匿名使用者也保留在`auth.users`表中： |編號 |角色 |電子郵件 |是\_匿名 | | ------------------------------------------------ | ------------- | ----------------- | ------------ | | e053e470-afa1-4625-8963-37adb862fd11 |已驗證 |空|真實 | | 5563108e-ac81-4063-9288-4f3db068efa1 |已驗證 | [email protected] |假 | 匿名用戶可以透過用戶 JWT 中傳回的`is_anonymous`聲明來辨識，該聲明可從行級安全策略 (RLS) 存取。如果您想限制對應用程式中某些功能的存取，這會很有幫助。 例如，假設我們有一個線上論壇，用戶可以在其中建立和閱讀貼文。 給定這個表來儲存帖子： ``` create table public.posts ( id serial primary key, name text not null, description text ); ``` 如果我們只想允許永久用戶建立帖子，我們可以透過檢查 JWT `select auth.jwt() ->> 'is_anonymous'`來檢查使用者是否是匿名的。 在 RLS 策略中使用此函數： ``` create policy "Only permanent users can create posts" on public.posts for insert to authenticated -- Note: user is still authenticated with check ( (select auth.jwt() ->> 'is_anonymous')::boolean is false ); ``` RLS 為我們提供了建立各種規則的充分靈活性。 例如，允許永久用戶對所有帖子進行讀取存取，並限制匿名用戶只能存取今天建立的帖子： ``` create policy "Limit access to anonymous users" on public.posts for select to authenticated -- Note: user is still authenticated using ( case when (select (auth.jwt() ->> 'is_anonymous'))::boolean is true then (created_at >= current_date) else true end ); ``` 將匿名用戶轉換為永久用戶 ------------ 在某些時候，匿名用戶可能決定他們想要建立一個貼文。我們在這裡提示他們註冊一個帳戶，將他們轉換為永久用戶。 > 當匿名使用者俱有與其關聯的身份時，他們被視為永久使用者。 轉換後，使用者 ID 保持不變，這表示與使用者 ID 關聯的任何資料都將被保留。 Supabase Auth 提供了 2 種方法來實現此目的： 1-連結電子郵件或電話身份 2-連結 OAuth 身份 連結電子郵件或電話身份 ----------- 若要連結電子郵件或電話身分： ``` const { data, error } = await supabase .auth .updateUser({ email }) ``` 連結 OAuth 身份 ----------- 要將 OAuth 身分連結到匿名用戶，您需要為專案[啟用手動連結](https://supabase.com/dashboard/project/_/settings/auth)。了解[身分連結](https://supabase.com/docs/guides/auth/auth-identity-linking)如何與 Supabase Auth 配合使用。  啟用後，您可以呼叫`linkIdentity()`方法： ``` const { data, error } = await supabase .auth .linkIdentity({ provider: 'google' }) ``` 冒充匿名用戶 ------ 在建立 RLS 策略來區分匿名使用者的存取權時，您可以利用 SQL 編輯器中的[使用者模擬功能](https://supabase.com/blog/studio-introducing-assistant)來測試您的策略：  *SQL 編輯器中的資料庫角色設定。您可以從下拉清單中選擇使用者來模擬匿名使用者。* [使用者管理畫面](https://supabase.com/dashboard/project/_/auth/users)提供了匿名使用者過濾的選項，這可以幫助了解已建立了多少匿名使用者。  下一步是什麼 ------ 管理匿名用戶可能很棘手，尤其是當您的網站有大量訪客時。我們正在開發「自動清理」選項，以刪除超過 30 天不活動的匿名用戶。同時，由於匿名使用者儲存在資料庫的 auth 模式中，因此您可以透過執行下列查詢來清理孤立的匿名使用者： ``` -- deletes anonymous users created more than 30 days ago delete from auth.users where is_anonymous is true and created_at < now() - interval '30 days'; ``` 我們也正在開發[linter，](https://github.com/supabase/splinter/pull/28)以檢查您的 RLS 策略並突出顯示那些允許匿名用戶存取的策略 - 請繼續關注本月稍後的更新！ 入門 -- - 文件：[匿名登入](https://supabase.com/docs/guides/auth/auth-anonymous) - API方法參考： [Javascript](https://supabase.com/docs/reference/javascript/auth-signinanonymously) 、 [Flutter](https://supabase.com/docs/reference/dart/auth-signinanonymously) 、 [Swift](https://supabase.com/docs/reference/swift/auth-signinanonymously) **更多關於 GA 週的訊息** - [斯帕巴斯威夫特](https://supabase.com/blog/supabase-swift) - [AWS Marketplace 上的 Supabase](https://supabase.com/blog/supabase-aws-marketplace) - [Supabase 開源黑客馬拉松 2024](https://supabase.com/blog/supabase-oss-hackathon) - [Supabase引導程式](https://supabase.com/blog/supabase-bootstrap) - \[分支現已公開 \](https://supabase.com/blog/branching-publicly-available) --- 原文出處：https://dev.to/supabase/supabase-auth-now-supports-anonymous-sign-ins-1j00
**長話短說** -------- 在本文中，您將學習如何建立人工智慧驅動的電子表格應用程式，該應用程式允許您使用簡單的英語命令執行各種會計功能並輕鬆與資料互動。 我們將介紹如何： - 使用 Next.js 建立 Web 應用程式， - 使用 React Spreadsheet 建立電子表格應用程式，以及 - 使用 CopilotKit 將 AI 整合到軟體應用程式中。 - 讓電子表格更容易使用、更有趣  --- CopilotKit：建構應用內人工智慧副駕駛的框架 ========================== CopilotKit是一個[開源的AI副駕駛平台](https://github.com/CopilotKit/CopilotKit)。我們可以輕鬆地將強大的人工智慧整合到您的 React 應用程式中。 建造： - ChatBot：上下文感知的應用內聊天機器人，可以在應用程式內執行操作 💬 - CopilotTextArea：人工智慧驅動的文字字段，具有上下文感知自動完成和插入功能📝 - 聯合代理：應用程式內人工智慧代理，可以與您的應用程式和使用者互動🤖  {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} （請原諒 AI 的拼字錯誤並給 CopilotKit 加上星號：） 現在回到文章！ --- 先決條件 ---- 要完全理解本教程，您需要對 React 或 Next.js 有基本的了解。 以下是建立人工智慧驅動的電子表格應用程式所需的工具： - [React Spreadsheet](https://github.com/iddan/react-spreadsheet) - 一個簡單的包，使我們能夠在 React 應用程式中加入電子表格。 - [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 spreadsheet-app ``` 選擇您首選的配置設定。在本教學中，我們將使用 TypeScript 和 Next.js App Router。  接下來，安裝[OpenAI 函式庫](https://platform.openai.com/docs/introduction)、 [Heroicons](https://www.npmjs.com/package/@heroicons/react)和[React Spreadsheet](https://github.com/iddan/react-spreadsheet)套件及其相依性： ``` npm install openai react-spreadsheet scheduler @heroicons/react ``` 最後，安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend ``` 恭喜！您現在已準備好建立應用程式。 --- 建立電子表格應用程式 ---------- 在本節中，我將引導您使用 React Spreadsheet 建立電子表格應用程式。 該應用程式分為兩個元件： `Sidebar`和`SingleSpreadsheet` 。 要設定這些元件，請導航至 Next.js 應用程式資料夾並建立一個包含以下檔案的`components`資料夾： ``` cd app mkdir components && cd components touch Sidebar.tsx SingleSpreadsheet.tsx ```  將新建立的元件匯入到**`app/page.tsx`**檔案中。 ``` "use client"; import React, { useState } from "react"; //👇🏻 import the components import { SpreadsheetData } from "./types"; import Sidebar from "./components/Sidebar"; import SingleSpreadsheet from "./components/SingleSpreadsheet"; const Main = () => { return ( <div className='flex'> <p>Hello world</p> </div> ); }; export default Main; ``` 接下來，建立將包含電子表格資料的 React 狀態，並將它們作為 props 傳遞到元件中。 ``` const Main = () => { //👇🏻 holds the title and data within a spreadsheet const [spreadsheets, setSpreadsheets] = React.useState<SpreadsheetData[]>([ { title: "Spreadsheet 1", data: [ [{ value: "" }, { value: "" }, { value: "" }], [{ value: "" }, { value: "" }, { value: "" }], [{ value: "" }, { value: "" }, { value: "" }], ], }, ]); //👇🏻 represents the index of a spreadsheet const [selectedSpreadsheetIndex, setSelectedSpreadsheetIndex] = useState(0); return ( <div className='flex'> <Sidebar spreadsheets={spreadsheets} selectedSpreadsheetIndex={selectedSpreadsheetIndex} setSelectedSpreadsheetIndex={setSelectedSpreadsheetIndex} /> <SingleSpreadsheet spreadsheet={spreadsheets[selectedSpreadsheetIndex]} setSpreadsheet={(spreadsheet) => { setSpreadsheets((prev) => { console.log("setSpreadsheet", spreadsheet); const newSpreadsheets = [...prev]; newSpreadsheets[selectedSpreadsheetIndex] = spreadsheet; return newSpreadsheets; }); }} /> </div> ); }; ``` 此程式碼片段建立了 React 狀態，用於保存電子表格資料及其索引，並將它們作為 props 傳遞到元件中。 `Sidebar`元件接受所有可用的電子表格， `SingleSpreadsheet`元件接收所有電子表格，包括更新電子表格資料的`setSpreadsheet`函數。 將下面的程式碼片段複製到`Sidebar.tsx`檔案中。它顯示應用程式中的所有電子表格，並允許使用者在它們之間進行切換。 ``` import React from "react"; import { SpreadsheetData } from "../types"; interface SidebarProps { spreadsheets: SpreadsheetData[]; selectedSpreadsheetIndex: number; setSelectedSpreadsheetIndex: (index: number) => void; } const Sidebar = ({ spreadsheets, selectedSpreadsheetIndex, setSelectedSpreadsheetIndex, }: SidebarProps) => { return ( <div className='w-64 h-screen bg-gray-800 text-white overflow-auto p-5'> <ul> {spreadsheets.map((spreadsheet, index) => ( <li key={index} className={`mb-4 cursor-pointer ${ index === selectedSpreadsheetIndex ? "ring-2 ring-blue-500 ring-inset p-3 rounded-lg" : "p-3" }`} onClick={() => setSelectedSpreadsheetIndex(index)} > {spreadsheet.title} </li> ))} </ul> </div> ); }; export default Sidebar; ```  更新`SingleSpreadsheet.tsx`文件，如下所示： ``` import React from "react"; import Spreadsheet from "react-spreadsheet"; import { SpreadsheetData, SpreadsheetRow } from "../types"; interface MainAreaProps { spreadsheet: SpreadsheetData; setSpreadsheet: (spreadsheet: SpreadsheetData) => void; } //👇🏻 adds a new row to the spreadsheet const addRow = () => { const numberOfColumns = spreadsheet.rows[0].length; const newRow: SpreadsheetRow = []; for (let i = 0; i < numberOfColumns; i++) { newRow.push({ value: "" }); } setSpreadsheet({ ...spreadsheet, rows: [...spreadsheet.rows, newRow], }); }; //👇🏻 adds a new column to the spreadsheet const addColumn = () => { const spreadsheetData = [...spreadsheet.data]; for (let i = 0; i < spreadsheet.data.length; i++) { spreadsheet.data[i].push({ value: "" }); } setSpreadsheet({ ...spreadsheet, data: spreadsheetData, }); }; const SingleSpreadsheet = ({ spreadsheet, setSpreadsheet }: MainAreaProps) => { return ( <div className='flex-1 overflow-auto p-5'> {/** -- Spreadsheet title ---*/} <div className='flex items-start'> {/** -- Spreadsheet rows and columns---*/} {/** -- Add column button ---*/} </div> {/** -- Add row button ---*/} </div> ); }; export default SingleSpreadsheet; ``` - 從上面的程式碼片段來看， ``` - The `SingleSpreadsheet.tsx` file includes the addRow and addColumn functions. ``` ``` - The `addRow` function calculates the current number of rows, adds a new row, and updates the spreadsheet accordingly. ``` ``` - Similarly, the `addColumn` function adds a new column to the spreadsheet. ``` ``` - The `SingleSpreadsheet` component renders placeholders for the user interface elements. ``` 更新`SingleSpreadsheet`元件以呈現電子表格標題、其資料以及新增行和列按鈕。 ``` return ( <div className='flex-1 overflow-auto p-5'> {/** -- Spreadsheet title ---*/} <input type='text' value={spreadsheet.title} className='w-full p-2 mb-5 text-center text-2xl font-bold outline-none bg-transparent' onChange={(e) => setSpreadsheet({ ...spreadsheet, title: e.target.value }) } /> {/** -- Spreadsheet rows and columns---*/} <div className='flex items-start'> <Spreadsheet data={spreadsheet.data} onChange={(data) => { console.log("data", data); setSpreadsheet({ ...spreadsheet, data: data as any }); }} /> {/** -- Add column button ---*/} <button className='bg-blue-500 text-white rounded-lg ml-6 w-8 h-8 mt-0.5' onClick={addColumn} > + </button> </div> {/** -- Add row button ---*/} <button className='bg-blue-500 text-white rounded-lg w-8 h-8 mt-5 ' onClick={addRow} > + </button> </div> ); ``` 為了確保一切按預期工作，請在`app`資料夾中建立一個`types.ts`文件，其中包含應用程式中聲明的所有靜態類型。 ``` export interface Cell { value: string; } export type SpreadsheetRow = Cell[]; export interface SpreadsheetData { title: string; rows: SpreadsheetRow[]; } ``` 恭喜！ 🎉 您的電子表格應用程式應該可以完美執行。在接下來的部分中，您將了解如何新增 AI 副駕駛，以使用 CopilotKit 自動執行各種任務。 --- 使用 CopilotKit 改進應用程式功能 ---------------------- 在這裡，您將學習如何將 AI 副駕駛加入到電子表格應用程式，以使用 CopilotKit 自動執行複雜的操作。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先，我們將 CopilotKit React 元件新增到應用程式前端。 ### 將 CopilotKit 加入前端 在`app/page.tsx`中，將以下程式碼片段加入`Main`元件的頂部。 ``` import "@copilotkit/react-ui/styles.css"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import { INSTRUCTIONS } from "./instructions"; const HomePage = () => { return ( <CopilotKit url='/api/copilotkit'> <CopilotSidebar instructions={INSTRUCTIONS} labels={{ initial: "Welcome to the spreadsheet app! How can I help you?", }} defaultOpen={true} clickOutsideToClose={false} > <Main /> </CopilotSidebar> </CopilotKit> ); }; const Main = () => { //--- Main component // }; export default HomePage; ``` - 從上面的程式碼片段來看， ``` - I imported the CopilotKit, its sidebar component, and CSS file to use its frontend components within the application. ``` ``` - The [CopilotKit component](https://docs.copilotkit.ai/reference/CopilotKit) accepts a `url` prop that represents the API server route where CopilotKit will be configured. ``` ``` - The Copilot component also renders the [CopilotSidebar component](https://docs.copilotkit.ai/reference/CopilotSidebar) , allowing users to provide custom instructions to the AI copilot within the application. ``` ``` - Lastly, you can export the `HomePage` component containing the `CopilotSidebar` and the `Main` components. ``` 從上面的程式碼片段中，您會注意到`CopilotSidebar`元件有一個`instructions`屬性。此屬性使您能夠為 CopilotKit 提供額外的上下文或指導。 因此，在`app`資料夾中建立`instructions.ts`檔案並將這些[命令](https://github.com/CopilotKit/spreadsheet-demo/blob/main/src/app/instructions.ts)複製到該檔案中。  接下來，您需要將 CopilotKit 插入應用程式的狀態以存取應用程式的資料。為了實現這一點，CopilotKit 提供了兩個鉤子： [useCopilotAction](https://docs.copilotkit.ai/reference/useCopilotAction)和[useMakeCopilotReadable](https://docs.copilotkit.ai/reference/useMakeCopilotReadable) 。 [useCopilotAction](https://docs.copilotkit.ai/reference/useCopilotAction)掛鉤可讓您定義 CopilotKit 執行的動作。它接受包含以下參數的物件： - `name` - 操作的名稱。 - `description` - 操作的描述。 - `parameters` - 包含所需參數清單的陣列。 - `render` - 預設的自訂函數或字串。 - `handler` - 由操作觸發的可執行函數。 ``` useCopilotAction({ name: "sayHello", description: "Say hello to someone.", parameters: [ { name: "name", type: "string", description: "name of the person to say greet", }, ], render: "Process greeting message...", handler: async ({ name }) => { alert(`Hello, ${name}!`); }, }); ``` [useMakeCopilotReadable](https://docs.copilotkit.ai/reference/useMakeCopilotReadable)掛鉤向 CopilotKit 提供應用程式狀態。 ``` import { useMakeCopilotReadable } from "@copilotkit/react-core"; const appState = ...; useMakeCopilotReadable(JSON.stringify(appState)); ``` 現在，讓我們回到電子表格應用程式。在`SingleSpreadsheet`元件中，將應用程式狀態傳遞到 CopilotKit 中，如下所示。 ``` import { useCopilotAction, useMakeCopilotReadable, } from "@copilotkit/react-core"; const SingleSpreadsheet = ({ spreadsheet, setSpreadsheet }: MainAreaProps) => { //👇🏻 hook for providing the application state useMakeCopilotReadable( "This is the current spreadsheet: " + JSON.stringify(spreadsheet) ); // --- other lines of code }; ``` 接下來，您需要在`SingleSpreadsheet`元件中新增兩個操作，該元件在使用者更新電子表格資料並使用 CopilotKit 新增資料行時執行。 在繼續之前，請在`app`資料夾中建立一個包含`canonicalSpreadsheetData.ts`檔案的`utils`資料夾。 ``` cd app mkdir utils && cd utils touch canonicalSpreadsheetData.ts ``` 將下面的程式碼片段複製到檔案中。它接受對電子表格所做的更新，並將其轉換為電子表格中資料行所需的格式。 ``` import { SpreadsheetRow } from "../types" export interface RowLike { cells: CellLike[] | undefined; } export interface CellLike { value: string; } export function canonicalSpreadsheetData( rows: RowLike[] | undefined ): SpreadsheetRow[] { const canonicalRows: SpreadsheetRow[] = []; for (const row of rows || []) { const canonicalRow: SpreadsheetRow = []; for (const cell of row.cells || []) { canonicalRow.push({value: cell.value}); } canonicalRows.push(canonicalRow); } return canonicalRows; } ``` 現在，讓我們使用`SingleSpreadsheet`元件中的`useCopilotAction`掛鉤建立操作。複製下面的第一個操作： ``` import { canonicalSpreadsheetData } from "../utils/canonicalSpreadsheetData"; import { PreviewSpreadsheetChanges } from "./PreviewSpreadsheetChanges"; import { SpreadsheetData, SpreadsheetRow } from "../types"; import { useCopilotAction } from "@copilotkit/react-core"; useCopilotAction({ name: "suggestSpreadsheetOverride", description: "Suggest an override of the current spreadsheet", parameters: [ { name: "rows", type: "object[]", description: "The rows of the spreadsheet", attributes: [ { name: "cells", type: "object[]", description: "The cells of the row", attributes: [ { name: "value", type: "string", description: "The value of the cell", }, ], }, ], }, { name: "title", type: "string", description: "The title of the spreadsheet", required: false, }, ], render: (props) => { const { rows } = props.args const newRows = canonicalSpreadsheetData(rows); return ( <PreviewSpreadsheetChanges preCommitTitle="Replace contents" postCommitTitle="Changes committed" newRows={newRows} commit={(rows) => { const updatedSpreadsheet: SpreadsheetData = { title: spreadsheet.title, rows: rows, }; setSpreadsheet(updatedSpreadsheet); }} /> ) }, handler: ({ rows, title }) => { // Do nothing. // The preview component will optionally handle committing the changes. }, }); ``` 上面的程式碼片段執行使用者的任務並使用 CopilotKit 產生 UI 功能顯示結果預覽。 `suggestSpreadsheetOverride`操作傳回一個自訂元件 ( `PreviewSpreadsheetChanges` )，該元件接受以下內容為 props： - 要新增到電子表格的新資料行， - 一些文字 - `preCommitTitle`和`postCommitTitle` ，以及 - 更新電子表格的`commit`函數。 您很快就會學會如何使用它們。 在元件資料夾中建立`PreviewSpreadsheetChanges`元件，並將下列程式碼片段複製到檔案中： ``` import { CheckCircleIcon } from '@heroicons/react/20/solid' import { SpreadsheetRow } from '../types'; import { useState } from 'react'; import Spreadsheet from 'react-spreadsheet'; export interface PreviewSpreadsheetChanges { preCommitTitle: string; postCommitTitle: string; newRows: SpreadsheetRow[]; commit: (rows: SpreadsheetRow[]) => void; } export function PreviewSpreadsheetChanges(props: PreviewSpreadsheetChanges) { const [changesCommitted, setChangesCommitted] = useState(false); const commitChangesButton = () => { return ( <button className="inline-flex items-center gap-x-2 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" onClick={() => { props.commit(props.newRows); setChangesCommitted(true); }} > {props.preCommitTitle} </button> ); } const changesCommittedButtonPlaceholder = () => { return ( <button className=" inline-flex items-center gap-x-2 rounded-md bg-gray-100 px-3.5 py-2.5 text-sm font-semibold text-green-600 shadow-sm cursor-not-allowed" disabled > {props.postCommitTitle} <CheckCircleIcon className="-mr-0.5 h-5 w-5" aria-hidden="true" /> </button> ); } return ( <div className="flex flex-col"> <Spreadsheet data={props.newRows} /> <div className="mt-5"> {changesCommitted ? changesCommittedButtonPlaceholder() : commitChangesButton() } </div> </div> ); } ``` `PreviewSpreadsheetChanges`元件傳回一個電子表格，其中包含從請求產生的資料和一個按鈕（帶有`preCommitTitle`文字），該按鈕允許您將這些變更提交到主電子表格表（透過觸發`commit`函數）。這可確保您在將結果新增至電子表格之前對結果感到滿意。 將下面的第二個操作加入到`SingleSpreadsheet`元件。 ``` useCopilotAction({ name: "appendToSpreadsheet", description: "Append rows to the current spreadsheet", parameters: [ { name: "rows", type: "object[]", description: "The new rows of the spreadsheet", attributes: [ { name: "cells", type: "object[]", description: "The cells of the row", attributes: [ { name: "value", type: "string", description: "The value of the cell", }, ], }, ], }, ], render: (props) => { const status = props.status; const { rows } = props.args const newRows = canonicalSpreadsheetData(rows); return ( <div> <p>Status: {status}</p> <Spreadsheet data={newRows} /> </div> ) }, handler: ({ rows }) => { const canonicalRows = canonicalSpreadsheetData(rows); const updatedSpreadsheet: SpreadsheetData = { title: spreadsheet.title, rows: [...spreadsheet.rows, ...canonicalRows], }; setSpreadsheet(updatedSpreadsheet); }, }); ``` `appendToSpreadsheet`操作透過在電子表格中新增資料行來更新電子表格。 以下是操作的簡短示範： \[https://www.youtube.com/watch?v=kGQ9xl5mSoQ\] 最後，在`Main`元件中新增一個操作，以便在使用者提供指令時建立一個新的電子表格。 ``` useCopilotAction({ name: "createSpreadsheet", description: "Create a new spreadsheet", parameters: [ { name: "rows", type: "object[]", description: "The rows of the spreadsheet", attributes: [ { name: "cells", type: "object[]", description: "The cells of the row", attributes: [ { name: "value", type: "string", description: "The value of the cell", }, ], }, ], }, { name: "title", type: "string", description: "The title of the spreadsheet", }, ], render: (props) => { const { rows, title } = props.args; const newRows = canonicalSpreadsheetData(rows); return ( <PreviewSpreadsheetChanges preCommitTitle="Create spreadsheet" postCommitTitle="Spreadsheet created" newRows={newRows} commit={ (rows) => { const newSpreadsheet: SpreadsheetData = { title: title || "Untitled Spreadsheet", rows: rows, }; setSpreadsheets((prev) => [...prev, newSpreadsheet]); setSelectedSpreadsheetIndex(spreadsheets.length); }} /> ); }, handler: ({ rows, title }) => { // Do nothing. // The preview component will optionally handle committing the changes. }, }); ``` 恭喜！您已成功為此應用程式建立所需的操作。現在，讓我們將應用程式連接到 Copilotkit 後端。 ### 將 Tavily AI 和 OpenAI 加入到 CopilotKit 在本教程的開頭，我向您介紹了[Tavily AI](https://tavily.com/) （一個為 AI 代理提供知識的搜尋引擎）和 OpenAI（一個使我們能夠存取[GPT-4 AI 模型的](https://openai.com/gpt-4)庫）。 在本部分中，您將了解如何取得 Tavily 和 OpenAI API 金鑰並將它們整合到 CopilotKit 中以建立高級智慧應用程式。 造訪[Tavily AI 網站](https://app.tavily.com/sign-in)，建立一個帳戶，然後將您的 API 金鑰複製到您專案的`.env.local`檔案中。  接下來，導覽至[OpenAI 開發者平台](https://platform.openai.com/api-keys)，建立 API 金鑰，並將其複製到`.env.local`檔案中。  以下是`.env.local`檔案的預覽，其中包括 API 金鑰並指定要使用的 OpenAI 模型。請注意，存取 GPT-4 模型需要[訂閱 ChatGPT Plus](https://openai.com/chatgpt/pricing) 。 ``` TAVILY_API_KEY=<your_API_key> OPENAI_MODEL=gpt-4-1106-preview OPENAI_API_KEY=<your_API_key> ``` 回到我們的應用程式，您需要為 Copilot 建立 API 路由。因此，建立一個包含`route.ts`的`api/copilotkit`資料夾並新增一個`tavily.ts`檔案。 ``` cd app mkdir api && cd api mkdir copilotkit && cd copilotkit touch route.ts tavily.ts ``` 在`tavily.ts`檔案中建立一個函數，該函數接受使用者的查詢，使用 Tavily Search API 對查詢進行研究，並使用[OpenAI GPT-4 模型](https://openai.com/gpt-4)總結結果。 ``` import OpenAI from "openai"; export async function research(query: string) { //👇🏻 sends the request to the Tavily Search API const response = await fetch("https://api.tavily.com/search", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ api_key: process.env.TAVILY_API_KEY, query, search_depth: "basic", include_answer: true, include_images: false, include_raw_content: false, max_results: 20, }), }); //👇🏻 the response const responseJson = await response.json(); const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY! }); //👇🏻 passes the response into the OpenAI GPT-4 model const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: `Summarize the following JSON to answer the research query \`"${query}"\`: ${JSON.stringify( responseJson )} in plain English.`, }, ], model: process.env.OPENAI_MODEL, }); //👇🏻 returns the result return completion.choices[0].message.content; } ``` 最後，您可以透過將使用者的查詢傳遞到函數中並向 CopilotKit 提供其回應來執行`route.ts`檔案中的`research`函數。 ``` import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; import { Action } from "@copilotkit/shared"; import { research } from "./tavily"; //👇🏻 carries out a research on the user's query const researchAction: Action<any> = { name: "research", description: "Call this function to conduct research on a certain query.", parameters: [ { name: "query", type: "string", description: "The query for doing research. 5 characters or longer. Might be multiple words", }, ], handler: async ({ query }) => { console.log("Research query: ", query); const result = await research(query); console.log("Research result: ", result); return result; }, }; export async function POST(req: Request): Promise<Response> { const actions: Action<any>[] = []; if (process.env.TAVILY_API_KEY!) { actions.push(researchAction); } const copilotKit = new CopilotBackend({ actions: actions, }); const openaiModel = process.env.OPENAI_MODEL; return copilotKit.response(req, new OpenAIAdapter({ model: openaiModel })); } ``` 恭喜！您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具，可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣，還是對複雜任務的自動化感興趣，CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中，您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼： https://github.com/CopilotKit/spreadsheet-demo 感謝您的閱讀！ --- 原文出處：https://dev.to/copilotkit/build-an-ai-powered-spreadsheet-app-nextjs-langchain-copilotkit-109d
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
