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

👉 讀技術文章 👉 上自學課程 👉 討論區交流

最新出爐作業包

⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理

⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面

⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念

⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格

⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式

🔍 搜尋結果：old

🔍 搜尋結果：old

1
2
3
4
5
6
›

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

開發 Web 專案的公共 API

當涉及到 Web 開發時，API（應用程式介面）是不可或缺的工具。它們允許開發人員與外部服務和資料來源交互，透過動態內容和功能豐富他們的應用程式。在本部落格中，我們將探討一些可用於各種 Web 開發專案的熱門公共 API。這些 API 可以免費使用，並且提供廣泛的功能，從獲取天氣資料到檢索有關太空任務的資訊。 1.JSON佔位符 --------- **JSONPlaceholder**是一個虛假的線上 REST API，非常適合測試應用程式和建立應用程式原型。它為典型的 CRUD（建立、讀取、更新、刪除）操作提供端點。 **端點範例：** ``` https://jsonplaceholder.typicode.com/posts ``` 您可以使用此端點來模擬取得貼文清單、建立新貼文、更新現有貼文和刪除貼文。 2. Dog API -------- **Dog API**提供了一系列令人愉悅的狗圖片。這是一種將隨機狗圖像整合到您的專案中的有趣方式，無論是用於佔位符、背景還是只是為了讓用戶微笑。 **端點範例：** ``` https://api.thedogapi.com/v1/images/search ``` 此端點傳回隨機的狗圖像，非常適合為您的 Web 應用程式加入一點狗的魅力。 3. REST Countries ------- **REST 國家/地區**API 提供有關國家/地區的詳細訊息，例如名稱、人口和面積。這對於涉及地理、旅行或教育的專案特別有用。 **端點範例：** ``` https://restcountries.com/v3.1/all ``` 您可以使用此端點獲取有關所有國家/地區的資料，從而輕鬆顯示國家/地區名稱、首都和人口統計等資訊。 4.SpaceX API ------------ **SpaceX API**提供有關 SpaceX 發射、火箭和任務的資料。該 API 非常適合太空愛好者和與太空探索相關的教育計畫。 **端點範例：** ``` https://api.spacexdata.com/v4/launches/latest ``` 此端點提供有關 SpaceX 最新發射的詳細訊息，包括任務名稱、發射日期和火箭規格。 5.OpenWeatherMap -------- **OpenWeatherMap**提供全面的天氣資料，包括當前狀況、預報和歷史天氣資料。它非常適合任何需要顯示天氣資訊的專案。 **端點範例：** ``` https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY ``` 將`YOUR_API_KEY`替換為您的實際 API 金鑰。此端點取得倫敦目前的天氣，包括溫度、濕度和天氣狀況。 6.CoinGecko API --------------- **CoinGecko API**提供加密貨幣資料，包括價格和市值。這對於需要顯示加密貨幣資訊的金融應用程式和儀表板非常有用。 **端點範例：** ``` https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd ``` 該端點檢索當前的比特幣美元價格。 7. JokeAPI -------- **JokeAPI**提供隨機笑話，包括程式設計笑話。它非常適合為您的應用程式加入幽默感。 **端點範例：** ``` https://v2.jokeapi.dev/joke/Any?type=single ``` 此端點會傳回一個隨機笑話，非常適合讓您的網頁變得輕鬆。 8. BoredAPI --------- **BoredAPI**會建議您在無聊時進行隨機活動。這對於旨在娛樂或提高生產力的應用程式來說是一個有趣的補充。 **端點範例：** ``` https://www.boredapi.com/api/activity ``` 這個端點傳回隨機活動建議，幫助用戶找到有趣的事情。 9.NewsAPI ------- **NewsAPI**提供對各種來源新聞文章的大型資料庫的存取。它非常適合新聞聚合應用程式或任何需要顯示當前事件的專案。 **端點範例：** ``` https://newsapi.org/v2/top-headlines?country=us&apiKey=YOUR_API_KEY ``` 將`YOUR_API_KEY`替換為您的實際 API 金鑰。該端點獲取來自美國的頭條新聞。結論 -- 公共 API 是強大的工具，可顯著增強您的 Web 開發專案。它們允許您整合不同的功能和資料來源，使您的應用程式更加動態和有吸引力。上面列出的 API 只是可用的 API 的幾個範例。探索這些 API，將它們合併到您的專案中，並了解它們如何改變您的開發體驗。 --- 原文出處：https://dev.to/vyan/public-apis-for-web-development-projects-lhk

0個讚 0留言 36瀏覽

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

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

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

0個讚 0留言 18瀏覽

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

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

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

0個讚 0留言 14瀏覽

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

Javascript Proxy 的 7 個實際用例🧙

JavaScript 的`Proxy`物件是一個有用的工具，它開啟了一個充滿可能性的世界，讓您在應用程式中建立一些真正有用的行為。當與 TypeScript 結合使用時，Proxy 可以增強您以您可能認為不可能的方式管理和操作物件和函數的能力。在本文中，我們將透過實際範例探索代理的令人難以置信的實用性。什麼是代理？ ------ [Javascript 中的代理程式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)是另一個物件（目標）的包裝器，它允許您攔截並重新定義該物件的基本操作，例如屬性查找、賦值、枚舉和函數呼叫。這意味著您可以在取得或設定屬性時新增自訂邏輯。這對於處理驗證、通知甚至自動資料綁定非常有用。建立一個簡單的代理 --------- 讓我們開始看看如何建立代理。我們將從一個非常基本的範例開始，以防您以前從未見過代理。 ``` type MessageObject = { message: string; }; let target: MessageObject = { message: "Hello, world!" }; let handler: ProxyHandler<MessageObject> = { get: (obj, prop) => { return `Property ${String(prop)} is: ${obj[prop]}`; } }; let proxy: MessageObject = new Proxy(target, handler); console.log(proxy.message); // Output: Property message is: Hello, world! ``` 在此範例中，每當存取代理程式上的屬性時，都會呼叫處理程序的 get 方法，從而允許我們修改簡單存取屬性的行為。我相信您可以想像這帶來的所有不同的可能性。現在讓我們來看看 7 個更有用的例子！ ### 1. 自動填充屬性代理程式可以在存取時動態填充物件屬性，這對於複雜物件的按需處理或初始化非常有用。 ``` type LazyProfile = { firstName: string; lastName: string; fullName?: string; }; let lazyProfileHandler = { get: (target: LazyProfile, property: keyof LazyProfile) => { if (property === "fullName" && !target[property]) { target[property] = `${target.firstName} ${target.lastName}`; } return target[property]; } }; let profile: LazyProfile = new Proxy({ firstName: "John", lastName: "Doe" }, lazyProfileHandler); console.log(profile.fullName); // Output: John Doe ``` ### 2. 運算計數使用代理來計算對物件執行某些操作的次數。這對於除錯、監視或分析應用程式效能特別有用。 ``` type Counter = { [key: string]: any; _getCount: number; }; let countHandler = { get: (target: Counter, property: keyof Counter) => { if (property === "_getCount") { return target[property]; } target._getCount++; return target[property]; } }; let counter: Counter = new Proxy({ a: 1, b: 2, _getCount: 0 }, countHandler); counter.a; counter.b; console.log(counter._getCount); // Output: 2 ``` ### 3. 不可變物件透過攔截並防止物件建立後對其進行任何更改，使用代理程式建立真正不可變的物件。 ``` function createImmutable<T extends object>(obj: T): T { return new Proxy(obj, { set: () => { throw new Error("This object is immutable"); } }); } const immutableObject = createImmutable({ name: "Jane", age: 25 }); // immutableObject.age = 26; // Throws error ``` ### 4. 方法鍊和流暢的接口透過使用代理建立流暢的介面來增強方法鏈，其中每個方法呼叫都會傳回一個代理程式以啟用進一步的呼叫。 ``` type FluentPerson = { setName(name: string): FluentPerson; setAge(age: number): FluentPerson; save(): void; }; function FluentPerson(): FluentPerson { let person: any = {}; return new Proxy({}, { get: (target, property) => { if (property === "save") { return () => { console.log(person); }; } return (value: any) => { person[property] = value; return target; }; } }) as FluentPerson; } const person = FluentPerson(); person.setName("Alice").setAge(30).save(); // Output: { setName: 'Alice', setAge: 30 } ``` ### 5. 智慧緩存這是我最喜歡的用例之一。實施智慧型快取機制，按需獲取或計算資料，然後儲存以供快速後續存取。 ``` function smartCache<T extends object>(obj: T, fetcher: (key: keyof T) => any): T { const cache: Partial<T> = {}; return new Proxy(obj, { get: (target, property: keyof T) => { if (!cache[property]) { cache[property] = fetcher(property); } return cache[property]; } }); } const userData = smartCache({ userId: 1 }, (prop) => { console.log(`Fetching data for ${String(prop)}`); return { name: "Bob" }; // Simulated fetch }); console.log(userData.userId); // Output: Fetching data for userId, then returns { name: "Bob" } ``` ### 6. 動態屬性驗證代理可以動態地強制執行屬性分配規則。以下是如何確保在更改屬性之前滿足某些條件： ``` let user = { age: 25 }; let validator = { set: (obj, prop, value) => { if (prop === 'age' && (typeof value !== 'number' || value < 18)) { throw new Error("User must be at least 18 years old."); } obj[prop] = value; return true; // Indicate success } }; let userProxy = new Proxy(user, validator); userProxy.age = 30; // Works fine console.log(userProxy.age); // Output: 30 // userProxy.age = 'thirty'; // Throws error // userProxy.age = 17; // Throws error ``` ### 7. 觀察變化代理程式的常見用例是建立可監視物件，以便在發生變更時通知您。 ``` function onChange(obj, onChange) { const handler = { set: (target, property, value, receiver) => { onChange(`Property ${String(property)} changed to ${value}`); return Reflect.set(target, property, value, receiver); } }; return new Proxy(obj, handler); } const person = { name: "John", age: 30 }; const watchedPerson = onChange(person, console.log); watchedPerson.age = 31; // Console: Property age changed to 31 ``` 使用代理的缺點 ------- 雖然代理非常有用，但它們有一些注意事項： 1. **效能**：代理程式會帶來效能開銷，尤其是在高頻操作中，因為代理程式上的每個操作都必須經過處理程序。 2. **複雜性**：能力越大，複雜度越高。代理的不正確使用可能會導致難以除錯的問題和可維護性問題。 3. **相容性**：代理程式無法為不支援 ES6 功能的舊版瀏覽器進行多填充，這限制了它們在需要廣泛相容性的環境中的使用。結束 -- JavaScript 中的代理，尤其是與 TypeScript 一起使用時，提供了一種與物件互動的靈活方式。它們支援驗證、觀察和綁定等功能。無論您是建立複雜的使用者介面、開發遊戲還是處理伺服器端邏輯，理解和利用代理程式都可以為您提供更深層的控制和程式碼的複雜性。感謝您的閱讀，希望您學到新東西！ 🎓 還有無恥的插頭🔌。如果您在敏捷開發團隊中工作並使用線上會議工具（例如規劃撲克或回顧），請查看我的免費工具[Kollabe](https://kollabe.com/) ！ --- 原文出處：https://dev.to/mattlewandowski93/7-use-cases-for-javascript-proxies-3b29

0個讚 0留言 56瀏覽

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

Angular 18 的新增功能

介紹 -- 2024 年 5 月 22 日星期三，Angular 核心團隊發布了 Angular 新版本：版本 18。該版本不僅穩定了最新的API，還引入了許多旨在簡化框架的使用並改善開發人員體驗的新功能。這些新功能是什麼？請仔細閱讀，找出答案。新的控制流程語法現已穩定 ------------ 當最新版本的 Angular 發佈時，引入了一種管理視圖流的新方法。提醒一下，這個新的控制流程直接整合到 Angular 模板編譯器中，使以下結構指令成為可選： - 動圖 - ngFor - ngSwitch / ngSwitchCase ```  <div *ngIf="user">{{ user.name }}</div>  @if(user) { <div>{{ user.name }}</div> } ``` 這個新的 API 現已穩定，我們建議使用這個新語法。如果您想將應用程式遷移到這個新的控制流，可以使用原理圖。 ``` ng g @angular/core:control-flow ``` 此外，新的 @for 語法取代了 ngFor 指令，迫使我們使用 track 選項來優化清單的渲染，並避免在變更期間完全重新建立清單。開發模式中新增了兩個新警告： - 如果追蹤鍵重複，則會發出警告。如果所選鍵值在您的集合中不唯一，則會引發此警告。 - 如果追蹤鍵是整個專案並且選擇此鍵會導致整個清單的破壞和重新建立，則會發出警告。如果認為該操作成本太高（但門檻較低），則會出現此警告。 Defer 語法現已穩定 ------------ @defer 語法也在最新版本的 Angular 中引入，讓您定義一個在滿足條件時延遲載入的區塊。當然，此區塊中使用的任何第三方指令、管道或庫也將被延遲載入。這是它的使用範例 ``` @defer(when user.name === 'Angular') { <app-angular-details /> }@placeholder { <div>displayed until user.name is not equal to Angular</div> }@loading(after: 100ms; minimum 1s) { <app-loader /> }@error { <app-error /> } ``` 提醒一句， - 只要不滿足@defer區塊條件，就會顯示@Placeholder區塊 - 當瀏覽器下載@defer區塊的內容時，將顯示@loading區塊；在我們的例子中，如果下載時間超過 100 毫秒，就會顯示區塊加載，並且顯示的最短持續時間為 1 秒。 - 如果下載@defer區塊時發生錯誤，將顯示@error區塊 Zone js 會發生什麼 ------------- Angular 18 引進了一種觸發偵測變更的新方法。此前，毫不奇怪，檢測更改完全由 Zone Js 處理。現在，偵測變化由框架本身直接觸發。為了實現這一點，框架中加入了一個新的變更檢測調度程序 ( *ChangeDetectionScheduler* )，並且該調度程序將在內部使用來引發變更檢測。這個新的調度程序不再基於 Zone Js，並且預設與 Angular 版本 18 一起使用。這個新的調度程序將引發檢測更改，如果 - 觸發範本或主機偵聽器事件 - 附加或刪除視圖 - 非同步管道接收新值 - 呼叫 markForCheck 函數 - 訊號的值發生變化等。小文化時刻：此偵測變更是由於內部呼叫*ApplicationRef.tick*函數所致。正如我上面提到的，由於Angular 18 版本一直基於這個新的調度程序，因此當您遷移應用程式時，不會出現任何問題，因為Angular 可能會收到Zone Js 和/或這個新調度程序的檢測更改通知。但是，要回到 Angular 18 之前的行為，您可以使用provideZoneChangeDetection 函數，並將*ignoreChangesOutsideZone* setter 選項設為true。 ``` bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ ignoreChangesOutsideZone: true }) ] }); ``` 另外，如果您希望僅依賴新的排程器而不依賴 Zone Js，則可以使用*ProvideExperimentalZonelessChangeDetection*函數。 ``` bootstrapApplication(AppComponent, { providers: [ provideExperimentalZonelessChangeDetection() ] }); ``` 透過實現*provideExperimentalZonelessChangeDetection*函數，Angular不再依賴Zone Js，這使得 - 如果專案的其他依賴項均不依賴它，則刪除 Zone js 依賴項 - 從 angular.json 檔案中的 polifills 中刪除區域 js 棄用 HttpClientModule ------------------- 自從 Angular 14 版本和獨立元件的到來以來，模組在 Angular 中已成為可選的，現在是時候看到第一個模組已棄用：我將其命名為 HttpClientModule 此模組負責為整個應用程式註冊 HttpClient 單例，以及註冊攔截器。該模組可以輕鬆地替換為*ProvideHttpClient*函數，並提供支援 XSRF 和 JSONP 的選項。這個函數有一個用於測試的孿生姊妹： *provideHttpClientTesting* ``` bootstrapApplication(AppComponent, { providers: [ provideHttpClient() ] }); ``` 像往常一樣，Angular 團隊提供了原理圖來幫助您遷移應用程式。當發出*ng update @Angular/core @Angular /cli*命令時，如果在應用程式中使用，將發出遷移 HttpClientModule 的請求內容後備 ---- ng-content 是 Angular 中的一個重要功能，尤其是在設計通用元件時。此標籤可讓您投影自己的內容。然而，這項功能有一個重大缺陷。您無法為其指定預設內容。從版本 18 開始，情況就不再如此。您可以在其中包含內容如果開發者沒有提供任何內容，將顯示的標籤。我們以按鈕元件為例 ``` <button> <ng-content select=".icon"> <i aria-hidden="true" class="material-icons">send</i> </ng-content> <ng-content></ng-content> </button> ``` 使用按鈕元件時，如果沒有提供圖示類別的元素，則會顯示圖示傳送表單事件：一種對表單事件進行分組的方法 ------------------- 這是社群很久以前提出的請求：有一個 api 將表單中可能發生的事件組合在一起；當我說事件時，我指的是以下事件 - 原始的 - 感動 - 狀態改變 - 重置 - 提交 Angular 18 版本公開了 AbstractControl 類別中的一個新事件屬性（允許 FormControl、FormGroup 和 FormArray 繼承該屬性），該屬性傳回一個 observable ``` @Component() export class AppComponent { login = new FormControl<string | null>(null); constructor() { this.login.events.subscribe(event => { if (event instanceof TouchedChangeEvent) { console.log(event.touched); } else if (event instanceof PristineChangeEvent) { console.log(event.pristine); } else if (event instanceof StatusChangeEvent) { console.log(event.status); } else if (event instanceof ValueChangeEvent) { console.log(event.value); } else if (event instanceof FormResetEvent) { console.log('Reset'); } else if (event instanceof FormSubmitEvent) { console.log('Submit'); } }) } } ``` 路由：重定向作為函數 ---------- 在最新版本的 Angular 之前，當您想要重新導向到另一個路徑時，可以使用*redirectTo*屬性。該屬性僅將一個字串作為其值 ``` const routes: Routes = [ { path: '', redirectTo: 'home', pathMath: 'full' }, { path: 'home', component: HomeComponent } ]; ``` 現在可以傳遞具有此屬性的函數。該函數將*ActivatedRouteSnapshot*作為參數，讓您可以從url中檢索queryParams或params。另一個有趣的點是，這個函數是在註入上下文中呼叫的，使得注入服務成為可能。 ``` const routes: Routes = [ { path: '', redirectTo: (data: ActivatedRouteSnapshot) => { const queryParams = data.queryParams if(querParams.get('mode') === 'legacy') { const urlTree = router.parseUrl('/home-legacy'); urlTree.queryParams = queryParams; return urlTree; } return '/home'; }, pathMath: 'full' }, { path: 'home', component: HomeComponent }, { path: 'home-legacy', component: HomeLegacyComponent } ]; ``` 伺服器端渲染：兩個很棒的新功能 --------------- Angular 18 引進了兩個重要且期待已久的新伺服器端渲染功能 - 事件回放 - 國際化 ### 重播事件當我們建立伺服器端渲染應用程式時，該應用程式會以 html 格式傳送回瀏覽器，顯示一個靜態頁面，然後由於水化現象而變得動態。在此水合階段期間，無法傳送對互動的回應，因此使用者互動會遺失，直到水合完成為止。 Angular 能夠記錄此水合作用階段的用戶交互，並在應用程式完全加載並交互後重播它們。若要解鎖此功能，仍處於開發者預覽版，您可以使用 ServerSideFeature *withReplayEvents*函數。 ``` providers: [ provideClientHydration(withReplayEvents()) ] ``` ### 國際化隨著 Angular 16 的發布，Angular 改變了頁面水合的方式。破壞性水合作用已被漸進性水合作用所取代。然而，當時缺乏一個重要的功能：國際化支持。 Angular 跳過了標記為 i18n 的元素。有了這個新版本，這種情況就不再是這樣了。請注意，此功能仍處於開發預覽階段，可以使用*withI18nSupport*函數啟動。 ``` providers: [ provideClientHydration(withI18nSupport()) ] ``` 國際化 --- Angular 建議使用 INTL 原生 javascript API 來處理與 Angular 應用程式國際化相關的所有事務。根據此建議， **@angular/common**套件公開的函數助手已被棄用。因此，不再建議使用 getLocaleDateFormat 等函數。新的建構器包和棄用 --------- 到目前為止，自從 Angular 中出現 vite 以來，用於建立 Angular 應用程式的建構器位於以下套件中： **@angular-devkit/build-angular** 該套件包含 Vite、Webpack 和 Esbuild。對於將來僅使用 Vite 和 Esbuild 的應用程式來說，這個套件太重了。考慮到這一潛在的未來，一個僅包含 Vite 和 Esbuild 的新包被建立，名稱為**@angular/build** 遷移到 Angular 18 時，如果應用程式不依賴 webpack（例如，沒有基於 Karma 的單元測試），則可以執行可選原理圖。此原理圖將修改 angular.json 檔案以使用新套件，並透過新增套件和刪除舊套件來更新 package.json。重要的是，舊包可以繼續使用，因為它為新包提供了別名。透過在專案的 node\_modules 中加入必要的依賴項，Angular 開箱即用地支援 Less Sass Css 和 PostCss。然而，隨著新的**@angular/build**套件的到來，Less 和 PostCss 成為可選的，並且必須在 package.json 中明確作為開發依賴項。當您遷移到 Angular 18 時，如果您希望使用新包，這些依賴項將自動新增。不再需要降級非同步/等待 ------------ Zone js 不支援 Javascript 功能*async/await* 。為了不限制開發人員使用此功能，Angular 的 CLI 將使用*async/await 的*程式碼轉換為「常規」Promise。這種轉換稱為降級，就像它將 Es2017 程式碼轉換為 Es2015 程式碼一樣。隨著應用程式不再基於 Zone Js，即使目前仍處於實驗階段，如果不再在 polyfill 中聲明 ZoneJs，Angular 將不再降級。因此，應用程式的建置將更快、更輕。新別名：by dev ---------- 從現在開始，當執行*ng dev*命令時，應用程式將以開發模式啟動。實際上，ng dev 指令是*ngserve*指令的別名。建立此別名是為了與 Vite 生態系統保持一致，特別是 npm run dev 指令。未來 -- Angular 團隊再次交付了一個充滿新功能的版本，無疑將大大增強開發人員的體驗，並向我們展示 Angular 的未來一片光明。未來我們可以期待什麼？毫無疑問，性能和開發人員體驗持續改進。我們還將看到基於訊號的表單、基於訊號的元件的引入，以及很快使用 @let 區塊聲明模板變數的能力。 --- 原文出處：https://dev.to/this-is-angular/whatnew-in-angular-18-60j

0個讚 0留言 49瀏覽

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

探索 JavaScript 中的解構

什麼是解構？ ------ **解構**是 JavaScript 中一個非常酷的特殊語法功能，它允許我們從*陣列*、*物件*或其他可迭代結構中提取值並將它們指派給變數。這是一種存取資料結構的屬性或元素的簡寫方式，而無需使用點表示法或陣列索引。它對我們（用 JavaScript 寫程式的人）有什麼好處？ ------------------------------ 解構有幾個好處，可以讓我們的程式碼更加簡潔、可讀和可維護！ - ***提高可讀性***：解構透過減少複雜變數賦值和點符號的需要來簡化程式碼。 - ***更少的樣板程式碼***：您可以直接從資料結構中提取值，而無需建立中間變數。 - ***更簡潔的程式碼***：解構可以減少實現相同結果所需的程式碼行數。 - ***靈活性***：您可以解構任何類型的資料結構（物件、陣列、迭代），使其成為 JavaScript 工具包中的多功能工具。有效的解構🚀使我們能夠編寫更具***表現力***、***可維護性***和***高效性的***程式碼，並且更容易理解和除錯。基本範例 ---- ``` const person = { name: 'John', age: 30 }; const { name, age } = person; console.log(name); // "John" console.log(age); // 30 ``` 在這裡，我們解構了一個具有兩個屬性的物件`person` ： `name`和`age` 。解構 JavaScript 物件時，我們提取的值必須與物件中的鍵完全相同。您不能將`userName`取代該行中的`name` `const { name, age } = person;` 。這只是意味著 - `const { userName, age } = person;`行不通的。但是，是的！我們可以在解構物件時套用別名。 EG- ``` const person = { name: 'John', age: 30 }; const { name:userName, age:userAge } = person; console.log(userName); // "John" console.log(userAge); // 30 ``` 您很可能在導入模組時第一次看到物件的解構。例如，當導入 exec 函數時 - ``` import { exec } from "node:child_process"; // ES Module syntax ``` ``` const { exec } = require("child_process"); // commonJS syntax ``` **同樣，我們也可以解構陣列**- ``` const numbers = [4, 5, 6]; const [x, y, z] = numbers; console.log(x); // 4 console.log(y); // 5 console.log(z); // 6 ``` 在這裡，當解構陣列時，您不需要使用別名將任何元素指派給自訂變數名稱。因為陣列元素只是值，所以它們不與某些鍵綁定。預設值 --- 如果物件中不存在屬性，則解構允許您為變數指派預設值。 ``` const person = { name: 'John' }; const { name = 'Anonymous', age } = person; // age will be undefined console.log(name); // "John" console.log(age); // undefined ``` 這裡，字串值`'John'`沒有被變數`name`中的值`'Anonymous'`替換，因為它已經存在於物件中。然而 - ``` const person = { name: 'John' }; const { name, age = 30 } = person; // age defaults to 30 if not present console.log(name); // "John" console.log(age); // 30 ``` 傳播文法 ---- **擴展**語法或**運算子**`(...)`可以與解構一起使用，以將陣列的剩餘元素或物件的屬性捕獲到新變數中。 - 使用陣列的擴充語法 - ``` const numbers = [1, 2, 3, 4, 5]; const [first, second, ...rest] = numbers; console.log(first); // 1 console.log(second); // 2 console.log(rest); // [3, 4, 5] (remaining elements) ``` - 物件的擴展語法 - ``` const person = { name: 'John', age: 30, city: 'New York' }; const { name, ...info } = person; console.log(name); // "John" console.log(info); // { age: 30, city: "New York"} (remaining properties) ``` 嵌套解構 ---- 解構可以嵌套以從深度嵌套的物件或陣列中提取值。 ``` const data = { user: { name: 'Alicia', origin: 'Romania', eyes: 'blue', address: { city: 'London', } } }; const { user: { name, address: { city } } } = data; console.log(name); // "Alicia" console.log(city); // "London" ``` 函數參數列表中的解構 ---------- 假設我們有一個名為`credentials`的JavaScript物件 - ``` const credentials = { name: 'Debajyati', age: 20, address: { city: 'Kolkata', state: 'West Bengal', country: 'India' }, phone: '', email: '', hobbies: ['reading', 'listening to music', 'coding', 'watching Anime'], skills: { programming: true, blogging: true, singing: false } } ``` 名為`showCredentials`的函數只接受 1 個參數值，該參數值是一個物件，而 Standard 會根據某些物件屬性輸出一個字串。好吧，我們可以這樣寫函數定義 - ``` function showCredential(obj) { const hasSkill = (skill) => obj.skills[skill]; console.log( `${obj.name} is ${obj.age} years old.\n Lives in ${obj.address.city}, ${obj.address.country}.\n`, `He has the following hobbies: ${obj.hobbies.join(", ")}`, ); if (hasSkill("programming")) { console.log(`He is a programmer.`); } if (hasSkill("singing")) { console.log(`He is a singer.`); } if (hasSkill("blogging")) { console.log(`He is also a tech blogger.`); } } ``` 用 - 來呼叫它 ``` showCredential(credentials); ``` 得到這個輸出 - ``` Debajyati is 20 years old. Lives in Kolkata, India. He has the following hobbies: reading, listening to music, coding, watch ing Anime He is a programmer. He is also a tech blogger. ``` 相反，我們可以在定義函數時解構參數清單中的物件參數。像這樣 - ``` function showCredential({ name, age, address: { city, country}, hobbies, skills }) { const hasSkill = (skill) => skills[skill]; console.log( `${name} is ${age} years old.\n Lives in ${city}, ${country}.\n`, `He has the following hobbies: ${hobbies.join(", ")}`, ); if (hasSkill("programming")) { console.log(`He is a programmer.`); } if (hasSkill("singing")) { console.log(`He is a singer.`); } if (hasSkill("blogging")) { console.log(`He is also a tech blogger.`); } } ``` 給出相同的輸出。 > | :資訊來源: 注意| |----------------------------------------| 函數仍然只接受一個參數。解構不會增加函數參數清單中的參數數量。此外，呼叫該函數也沒有改變。依然是—— ``` showCredential(credentials); ``` ### 那麼，為什麼要解構函數參數列表中的物件呢？雖然函數參數清單中的解構一開始可能看起來很麻煩或乏味，但它有非常重要的好處。 #### 需要考慮的要點 - ***更安全的程式碼：*** 解構可以清楚地表明函數需要哪些屬性，有助於防止錯誤。如果傳遞的物件中缺少屬性，解構將導致函數執行期間出現錯誤，有助於及早發現潛在問題。 - ***減少冗長：*** 透過直接將屬性提取到參數清單中的變數中，可以避免使用點表示法重複存取物件屬性。這導致函數定義更清晰、更簡潔。 - ***注重功能：*** 透過在參數清單中進行解構，您可以將資料存取邏輯與函數的核心功能分開。這改進了程式碼組織並使函數的目的更加清晰。解構字串 ---- 就像我們如何解構陣列一樣，我們也可以將字串解包為陣列元素。巧妙地運用我們的智慧。 ``` const fruit = 'grape'; const [first, second, ...rest] = fruit; const animal = rest.join(''); console.log(animal); // ape ``` > | ：警告：記住！ |------------------------| 當您使用展開運算子`(...)`捕獲字串中的剩餘字元時，您不會得到字串。您將會得到這些字元的陣列。解構的一些方便的應用範例 ------------ - ***沒有第三個變數的交換解構***： JavaScript 傳統上需要一個臨時變數來交換兩個變數的值。解構提供了一種更簡潔、更易讀的方式來實現這一目標。 ``` - Before Destructuring: ``` ``` let a = 10; let b = 20; let temp = a; a = b; b = temp; console.log(a, b); // Output: 20 10 ``` ``` - After Destructuring: ``` ``` let a = 10; let b = 20; [a, b] = [b, a]; console.log(a, b); // Output: 20 10 ``` ``` So nifty & elegant✨! Isn't it? ``` - ***解構函數傳回值***：函數可以以陣列或物件的形式傳回多個值。解構允許您將這些返回值解包到單獨的變數中，從而提高程式碼清晰度。假設您有一個從 API 取得資料並傳回回應物件的函數： ``` function getUserUpdates(id) { // Simulating some API call with a GET request return { data: { player: response.group.names[id], brain: "rotting", powerLevel: Number(response.group.power[id]), useAsDecoy: true, }, statusCode: Number(response.status), }; } ``` 在建立 API 或處理伺服器回應的上下文中，它提供了增強程式碼品質和可維護性的獨特優勢。存取各個屬性將變得輕而易舉，因為您可以在函數呼叫本身期間直接將所需的屬性從函數的返回值提取到單獨的變數中。 ``` const { data: {player, useAsDecoy, powerLevel}, statusCode, } = getUserUpdates(1); ``` 每當函數傳回物件並且您對特定屬性值感興趣時，請始終立即套用解構。如果您仍然認為返回值的解構不是一個好主意，那麼這另外兩個優點可能會說服您 - (A)***簡化的心智模型：***解構簡化了將使用您的函數的開發人員理解資料流所需的思考過程。開發人員可以專注於解構模式中使用的變數名稱所傳達的含義，而不是記住複雜的屬性存取鏈。這減少了認知負擔並促進更好的程式碼理解。 (B)***簡化複雜回傳物件的樣板程式碼：*** 當函數傳回具有大量或嵌套屬性的物件時，解構會顯著減少單獨存取它們所需的樣板程式碼。這使得程式碼庫更加簡潔、更簡潔，從而提高了整體程式碼品質。 - ***帶條件的解構***：解構可以與條件語句結合起來，根據物件的結構來處理不同的場景。如果您有一個接收具有可選屬性的物件的函數： ``` function greetUser(user) { const { name = "Anonymous" } = user || {}; // Destructuring with default value console.log(`Hello, ${name}!`); } greetUser({ name: "Bob" }); // Output: "Hello, Bob!" greetUser({}); // Output: "Hello, Anonymous!" (no name property) greetUser(undefined); // Output: "Hello, Anonymous!" (function receives no argument) ``` 結論 -- 在整篇文章中，我們了解到**「解構」**是 JavaScript 中一個強大且多功能的功能，可以顯著提高程式碼的可讀性、可維護性和效率。透過有效地使用解構技術，您可以編寫更乾淨、更簡潔且不易出錯的程式碼。因此，擁抱解構並將您的 JavaScript 技能提升到一個新的水平！如果您發現這篇文章有幫助，如果這個部落格為您的時間和精力增加了一些價值，請透過給這篇文章點讚來表達一些愛，並與您的朋友分享。請隨時透過[Twitter](https://twitter.com/ddebajyati) 、 [LinkedIn](https://www.linkedin.com/in/debajyati-dey)或[GitHub](https://github.com/Debajyati)與我聯繫:) 快樂編碼🧑🏽‍💻👩🏽‍💻！祝你有個美好的一天！ 🚀 --- 原文出處：https://dev.to/ddebajyati/exploring-destructuring-in-javascript-5a24

0個讚 0留言 17瀏覽

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

同步引擎是 Web 應用程式的未來嗎？

請看下面的 GIF — 它顯示了一個即時[Todo-MVC 演示](https://todo-replicache-sveltekit.onrender.com/)，跨視窗同步並平滑地進出離線模式。雖然它只是一個簡單的演示應用程式，但它展示了每個 Web 開發人員都應該了解的重要的前沿概念。這是一個[Replicache](https://replicache.dev/)演示應用程式，我將其從 Express 後端和 Web 元件前端移植到 SvelteKit，以了解背後的技術和概念。我想與您分享我的學習成果。原始碼可[在 Github 上](https://github.com/isaacHagoel/todo-replicache-sveltekit)取得。 ![sveltekit-replicache-演示](https://github.com/isaacHagoel/todo-replicache-sveltekit/assets/20507787/11b5ae10-049d-4cc7-82bf-45d8287701f0) 背景和動機 ----- Web 應用程式面臨一些根本性的難題，而大多數 Web 框架似乎都忽略了這些問題。這些問題非常困難，以至於只有很少的應用程式能夠真正很好地解決它們，並且這些應用程式在各自的領域中遙遙領先於其他應用程式。以下是我在實際開發的商業應用程式中必須處理的一些此類問題： 1. 讓應用程式感覺敏捷，即使它與伺服器通信，即使在緩慢或不穩定的網路上。這不僅適用於初始載入時間，也適用於應用程式載入後的互動。 [SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)是解決這個問題的早期嘗試，但最終還不夠。 2. 為使用者產生的內容（例如網站建立、電子商務、線上課程建構器）實施撤銷/重做和版本歷史記錄。 3. 當同一用戶在多個分頁/裝置上同時開啟應用程式時，請讓應用程式正常運作。 4. 處理執行舊版本前端的長期會話，使用者可能不想刷新以避免丟失工作。 5. 使協作功能/多人遊戲功能正確且近乎即時地工作，包括解決衝突。我在開發完全正常的 Web 應用程式時遇到了這些問題，沒有什麼太瘋狂的，而且我相信大多數 Web 應用程式在獲得吸引力時都會遇到部分或全部問題。我在開始開發新產品的開發團隊中註意到的一個模式是完全忽略這些問題，即使團隊已經意識到這些問題。推理通常是這樣的：“當我們真正開始遇到這些問題時，我們會處理它。”然後，團隊將繼續選擇一些完善的框架（選擇您最喜歡的），認為這些工具肯定能為可能出現的任何常見問題提供解決方案。幾個月後，當應用程式達到一萬名活躍用戶時，現實就浮出水面：團隊必須引入部分的、不完整的解決方案，這些解決方案會增加複雜性，使系統更加緩慢和錯誤，或者重寫核心部分（之後沒有人立即這樣做）發射）。哎喲。我感受到了這種痛苦。痛苦是真實的。輸入“同步引擎”。同步引擎到底是什麼？ ---------- 還記得我說過有些應用程式比其他應用程式更好地解決這些問題嗎？最近著名的例子是[Linear](https://linear.app/isaach)和[Figma](https://www.figma.com/) 。兩者都透過技術優勢擾亂了競爭異常激烈的市場。其他例子有[Super human](https://superhuman.com/)和十年前的[Trello](https://trello.com/) 。當您研究他們所做的事情時，您會發現它們都集中在非常相似的模式上，並且它們都在內部開發了各自的實現。您可以在以下連結中了解他們是如何做到的（強烈推薦）： [Figma](https://www.figma.com/blog/how-figmas-multiplayer-technology-works/) 、 [Linear](https://www.youtube.com/live/WxK11RsLqp4?feature=share&t=2175) 、 [Super human](https://blog.superhuman.com/superhuman-is-built-for-speed/) 、 [Trello（系列）](https://www.atlassian.com/engineering/sync-architecture) 。在系統的核心，始終有一個同步引擎，可作為前端和後端之間的持久緩衝區。從高層次來看，它是這樣運作的： - 客戶端始終讀取和寫入引擎提供的本地儲存。就應用程式程式碼而言，它在記憶體中本地執行。 - 該儲存負責樂觀地更新狀態，將資料本地保存在瀏覽器的儲存中，並與後端來回同步，包括處理潛在的複雜情況和邊緣情況。 - 後端實作引擎的另一半，以允許拉取和推播資料、在資料變更時通知客戶端、將資料保存在資料庫中等。同步引擎的不同實作會做出不同的權衡，但基本概念始終是相同的。這不是一個新想法，但... ------------- If you've been following trends in the web-dev world, you'd know that sync engines have been a centrepiece in several of them, namely: [progressive web apps](https://web.dev/articles/what-are-pwas) , [offline-first apps](https://offlinefirst.org/) , and the lately trending term: [local-first軟體](https://www.inkandswitch.com/local-first/).您甚至可能研究過一些提供內建同步引擎的資料庫，例如[PouchDb](https://pouchdb.com/)或具有相同功能的線上服務（例如[Firestore](https://firebase.google.com/docs/firestore) ）。我也有，但過去幾年我的整體感覺是，這些都不是切中要害的。漸進式網頁應用程式是關於用戶在主螢幕上「安裝」網站的快捷方式，就好像它們是本機應用程式一樣，儘管不需要安裝可能是網路的「好處」。「離線優先」聽起來離線模式比線上模式更重要，但對於 99% 的網路應用程式來說，情況並非如此。「本地優先」無疑是迄今為止最好的名字，但官方的[本地優先宣言](https://www.inkandswitch.com/local-first/)談論了點對點通信和[CRDT](https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type) （一個超級酷的想法，但除了協作文本編輯之外很少用於任何其他用途）。客戶端-伺服器Web 應用程式的世界正在嘗試解決像我上面描述的那樣的實際問題。諷刺的是，許多屬於當前「本地優先」浪潮一部分的工具都採用了這個名稱，但沒有採用所有原則。最引起我注意和興趣的是「Replicache」。具體來說，我對它很感興趣，因為它不是一個自我複製的資料庫，也不是一個你必須圍繞它來建立整個應用程式的黑盒 SaaS 服務。相反，與我在這個領域遇到的任何現成解決方案相比，它提供了更多的控制、靈活性和關注點分離。什麼是複製快取？ -------- Replicache 是一個函式庫。在前端，它只需要很少的佈線，並且可以有效地充當普通的全局商店（想想 Zustand 或 Svelte 商店）。它有一個狀態區塊（在我們的範例中，每個清單都有自己的儲存）。它可以使用一組稱為“mutators”（認為是reducers）的用戶定義函數進行變異，例如“addItem”、“deleteItem”或任何您想要的東西，並公開一個訂閱函數（我[在這裡](https://doc.replicache.dev/api/classes/Replicache)簡化了完整的API）。在這個熟悉的介面背後是一個強大且高效能的客戶端同步引擎，它可以處理： 1. 初步將相關資料完整下載到客戶端。 2. 從後端拉動和推送“突變”。突變是一個事件，指定應用哪個突變器以及哪些參數（加上一些元資料）。 ``` - When pushing, these changes are applied optimistically on the client, and rolled back if they fail on the server. Any other pending changes would be applied on top (rebase). ``` ``` - The sync mechanism also includes queuing changes if the connection is lost, retry mechanisms, applying changes in the right order, and de-duping. ``` 3. 將所有內容快取在記憶體中（效能）並將其保存到瀏覽器儲存（特別是 IndexedDB）以進行備份。 4. 由於可以從同一應用程式的所有選項卡存取相同的存儲，因此引擎會處理其中的所有含義，例如當架構發生更改但某些選項卡已刷新而某些選項卡尚未刷新且仍在使用時該怎麼辦舊模式。 5. 使用廣播通道立即保持所有選項卡同步（因為依賴共用儲存不夠快）。 6. 處理瀏覽器決定清除本地儲存的情況。您可能已經注意到，這裡解決了我在本文頂部列出的大部分問題。基於突變也適合撤銷/重做等功能。為了讓所有這些都能發揮作用，後端的工作就是實作 Replicache 定義的協定。具體來說： 1. 您需要實作[推送](https://doc.replicache.dev/reference/server-push)和[拉取](https://doc.replicache.dev/reference/server-pull)API。這些端點需要能夠像前端一樣啟動變異器（儘管它們不必執行相同的邏輯）。後端是權威的，衝突解決是由您的 mutator 實作中的程式碼完成的。 2. 您的資料庫需要支援快照隔離並在事務內執行操作。 3. Replicache 用戶端定期輪詢伺服器以檢查更改，但如果您希望用戶端之間接近即時同步，則需要實作「poke」機制，即通知客戶端某些內容已更改並且需要進行更改的方法。拉。這可以透過[伺服器發送的事件](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events)或[websockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket)來完成。這是一個有趣的 API 設計選擇——更改永遠不會推送到客戶端；客戶總是拉他們。我相信這樣做是為了簡單且易於對系統進行推理。有一點可以肯定：他們沒有強制使用Websocket，這是件好事，因為這會使協議與HTTP（伺服器透過正常HTTP 連接發送的事件流）不相容，這將需要額外的基礎設施並帶來額外的集成挑戰。 4. 根據[版本控制策略](https://doc.replicache.dev/strategies/overview)，您可能需要實作其他操作（例如，createSpace）。如果這對您來說並不平凡，那麼您是對的。我認為我還沒有完全理解它如何與資料庫一起操作的所有細節。我需要做一個後續專案，在其中完全重構資料庫結構和/或向範例加入有意義的功能（例如版本歷史記錄），以便更接近完全理解它。問題是，我知道在建立和維護實際生產應用程式時這種控制層級有多麼有價值。在我的書中，花一兩週的時間深入思考和設定應用程式的核心部分，如果它為建立和擴展奠定了堅實的基礎，那麼它就是一筆巨大的投資。移植一個重要的範例 --------- 學習新事物的最好（也可以說是唯一）方法就是親自動手，親自體驗一些會影響真正應用程式的權衡和影響。當我查看[Replicache 網站上的範例](https://doc.replicache.dev/examples/todo)時，我注意到沒有 Sveltekit 的範例。自從 Svelte 3 發布以來，我一直是 Svelte 的忠實粉絲，但最近才開始使用 Sveltekit。我認為這將是一個透過實踐學習並同時建立有用的參考來實現的絕佳機會。將現有程式碼庫移植到不同的技術具有教育意義，因為在翻譯程式碼時，您被迫理解並質疑它。在整個過程中，我經歷了多次靈光一現的時刻，因為一些起初看起來很奇怪的事情都發生了。學習內容 ---- #### 斯維爾特基特 1. Sveltekit[本身並不支援 WebSockets](https://github.com/sveltejs/kit/issues/1491) ，即使它確實支援伺服器發送事件，但它的[方式也很笨拙](https://stackoverflow.com/questions/74879852/how-can-i-implement-server-sent-events-sse-in-sveltekit)。 Express 很好地支援兩者。因此，我使用[svelte-sse](https://github.com/razshare/sveltekit-sse)來處理伺服器發送的事件。我遇到的一個有點煩人的怪癖是，由於 svelte-sse 返回一個 Svelte 商店，而我的應用程式沒有訂閱該商店（應用程式不需要讀取該值，只需觸發如上所述的拉取），整件事情只是被編譯器優化掉了。起初我很困惑為什麼訊息沒有通過。我最終不得不針對這種行為實施解決方法。我不怪圖書館的作者；我只是怪罪圖書館的作者。他們假設一個有意義的值將發送給客戶端，但「poke」的情況並非如此。 2. 與原始 Express 後端相比，SvelteKit 基於檔案系統的路由、載入函數、佈局和其他功能可以實現更好組織的程式碼庫和更少的樣板程式碼。不用說，在前端，Svelte 遠遠領先於 Web 元件，導致前端程式碼庫更小、更易讀，儘管它具有更多功能（原始示例 TodoMVC 缺少諸如“將所有內容標記為完成”等功能） “刪除完成”）。 3. 總的來說，我喜歡 Sveltekit 並計劃在未來繼續使用它。如果您還沒有嘗試過，[官方教學](https://learn.svelte.dev/tutorial/introducing-sveltekit)是一個很棒的介紹。 ### 複製快取總的來說，Replicache 給我留下了非常深刻的印象，並建議嘗試一下。在基本層面上（這是我目前要做的所有嘗試），它運作良好並兌現了所有承諾。話雖如此，以下是我的一些普遍擔憂（與待辦事項應用程式無關）以及與之相關的想法： - **性能相關：** ``` - **Initial load time** (first time, before any data was ever pulled to the client) might be long when there is a lot of data to download (think tens of MBs). Productivity apps in which the user spends a lot of time after the initial load are less sensitive to this, but it is still something to watch for. Potential mitigation: partial sync (e.g., Linear only sends open issues or ones that were closed over the last week instead of sending all issues). ``` ``` - **Chatty network (?)** - Initially, it seemed to me that there was a lot of chatter going back and forth between the client and the server with all the push, pull, and poke calls flying around. On deeper inspection, I realized my intuition was wrong. There is frequent communication, yes, but since the mutations are very compact and the poke calls are tiny (no payload), it amounts to much less than your normal REST/GraphQL app. Also, a browser full reload (refresh button or opening the page again in a new tab/window after it was closed) loads most of the data from the browser's storage and only needs to pull the diffs from the server, which leads me to the next point. ``` ``` - **Coming back after a long period of time offline**: I haven't tested this one, but it seems like a real concern. What happens if I was working offline for a few days making updates while my team was online and also making changes? When I come back online, I could have a huge amount of diffs to push and pull. Additionally, conflict resolution could become super difficult to get right. This is a problem for every collaborative app that has an offline mode and is not unique to Replicache. The Replicache docs [warn about this situation](https://doc.replicache.dev/concepts/offline) and propose implementing "the concept of history" as a potential mitigation. ``` ``` - What about **bundle size**? Replicache is [34kb gzipped](https://bundlephobia.com/package/[email protected]), and for what you get in return, it's easily worth it. ``` ``` - [This page](https://doc.replicache.dev/concepts/performance) on the Replicache website makes me think that, in the general case, performance should be very good. ``` - **功能相關：** ``` - Unlike native mobile or desktop apps, it is possible for users to **lose the local copy of their work** because the browser's storage doesn't provide the same guarantees as the device's file system. Browsers can just decide to delete all the app's data under certain conditions. If the user has been online and has work that didn't have a chance to get pushed to the server, that work would be lost in such a case. Again, this problem is not unique to Replicache and affects all web apps that support offline mode, and based on what I read, it is unlikely to affect most users. It's just something to keep in mind. ``` ``` - I was surprised to see that the **schema in the backend database** in the Todo example I ported doesn't have the "proper" relational definitions I would expect from a SQL database. There is no "items" table with fields for "id", "text", or "completed". The reason I would want that to exist is the same reason I want a relational database in the first place—to be able to easily slice and dice the data in my system (which I always missed down the line when I didn't have). I don't think it is a major concern since Replicache is supposed to be backend-agnostic as long as the protocol is implemented according to spec. I might try to refactor the database as a follow-up exercise to see what that means in terms of complexity and ergonomics. ``` ``` - I find **version history and undo/redo** super useful and desirable in apps with user-editable content. With regards to undo/redo there is an [official package](https://github.com/rocicorp/undo) but it seems to [lack support for the multiplayer usecase](https://github.com/rocicorp/replicache/issues/1008) (which is where the problems come from). As for version-history, the Replicache documentation mentions "the concept of history" but [suggests talking to them](https://doc.replicache.dev/concepts/offline) if the need arises. That makes me think it might not be straightforward to achieve. Another idea for a follow-up task. ``` ``` - **Collaborative text editing** - the existing conflict resolution approach won't work well for collaborative text editing, which requires [CRDTs](https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type) or [OT](https://en.wikipedia.org/wiki/Operational_transformation). I wonder how easy it would be to integrate Replicache with something like [Yjs](https://yjs.dev/). There is an [official example repo](https://github.com/rocicorp/replicache-yjs), but I haven't looked into it yet. ``` - **縮放相關：** ``` - Since the server is stateful (holds open HTTP connections for server-sent events), I wonder how well it would scale. I've worked on production systems with >100k users that used WebSockets before, so I know it is not that big of a deal, but still something to think about. ``` - **其他：** ``` - - In theory, Replicache can be **added into existing apps** without rewriting the frontend (as long as the app already uses a similar store). The backend might be trickier. If your database doesn't support snapshot isolation, you are out of luck, and even if it does, the existing schema and your existing endpoints might need some serious rework. If you're going to use it, do it from day one (if you can). ``` ``` - Replicache is **not open source** (yet! see the point below) and is [free only as long as you're small or non-commercial](https://replicache.dev/#pricing). Given the amount of work (>2 years) that went into developing it and the quality of engineering on display, it seems fair. With that said, it makes adopting Replicache more of a commitment compared to picking up a free, open library. If you are a tier 2 and up paying customer, you get a [source license](https://doc.replicache.dev/howto/source-access) so that if Replicache shuts down for some reason, your app is safe. Another option is to roll out your own sync engine, like the big boys (Linear, Figma) have done, but getting to the quality and performance that Replicache offers would be anything but easy or quick. ``` ``` - **Crazy plot twist** (last minute edit): As I was about to publish this post I discovered that Replicache is going to be opened sourced in the near future and that its parent company is planning to launch a new sync-engine called "Zero". [Here is the official announcement](https://zerosync.dev/). It reads: "We will be open sourcing [Replicache](https://replicache.dev/) and [Reflect](https://reflect.net/). Once Zero is ready, we will encourage users to move." ``` ``` Ironically, Zero seems to be yet another solution that automagically syncs the backend database with the frontend database, which at least for me personally seems less attractive (because I want separation of concerns and control). With that said, these guys are experts in this domain and I am just a dude on the internet so we'll have to wait and see. In the meanwhile, I plan on playing with Replicache some more. ``` 同步引擎應該用於所有事情嗎？ -------------- 不，同步引擎不應該用於所有事情。好訊息是，您可以讓應用程式的某些部分使用它，而其他部分仍然以傳統方式提交表單並等待伺服器的回應。 SvelteKit 和其他全端框架使這種整合變得容易。使用同步引擎的明顯情況是一個壞主意： 1. 只有當客戶端更改很可能成功（回滾很少）並且客戶端擁有足夠的資訊來預測結果時，樂觀更新才有意義。例如，在線上測驗中，學生的答案必須傳送到伺服器進行評分，樂觀更新（因此同步引擎）是不可行的。這同樣適用於下訂單或交易股票等關鍵操作。一個好的經驗法則是，任何依賴伺服器且無法離線運作的操作都不應該依賴同步引擎。 2. 任何處理無法安裝在使用者電腦上的龐大資料集的應用程式。例如，建立本地優先版本的 Google 或處理千兆位元組資料以產生結果的分析工具是不切實際的。然而，在部分同步就足夠的情況下，同步引擎仍然是有益的。例如，Google地圖可以在客戶端裝置上下載和快取地圖以進行離線操作，而無需始終提供全球每個位置的高解析度地圖。關於開發人員生產力和 DX 的一句話 ------------------ 我的印像是，擁有同步引擎可以讓 DX（開發人員體驗）變得更好。前端工程師只需與普通商店合作即可訂閱更新，並且 UI 始終保持最新狀態。無需考慮為同步引擎控制的應用程式部分取得任何內容、呼叫 API 或伺服器操作。至於後端，我還不能說太多。看起來它不會比傳統後端難，但我不能肯定。 ### 結束語令人興奮的是，將網路應用程式的未來想像為全球範圍內的即時多人協作工具，無論網路條件如何，都可以可靠地工作，同時解決這些令人討厭的問題，我以過去的事情開始這篇文章。我強烈建議網頁開發人員熟悉這些新概念，嘗試它們，甚至做出貢獻。謝謝閱讀。如果您有任何問題或想法，請發表評論。和平。。 **聚苯乙烯** 建立 Replicache 公司的創辦人 Aaron Boodman 的[訪談](https://youtu.be/cgTIsTWoNkM?si=Sssrbj09Z936QxEf)非常棒。觀看並稍後感謝我。 --- 原文出處：https://dev.to/isaachagoel/are-sync-engines-the-future-of-web-applications-1bbi

0個讚 0留言 15瀏覽

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

少寫，永不修復：高度可靠程式碼的藝術

![被燒壞的工程師](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aygtgwad96xzq2pr944q.gif) 如果您是開發人員，不知疲倦地推出新的更改，卻被過去工作中的錯誤拖了回來，那麼這篇文章對您來說非常重要。在過去的十年裡，在軟體開發中，我犯過並且看到其他人反覆犯過的關鍵錯誤之一是專注於做更多的工作，而不是確保完成的工作（無論多小）是穩健的並且將繼續正常工作。這些重複出現的錯誤會嚴重影響生產力和積極性。從我自己的錯誤中，我學到了寶貴的教訓。在這裡，我想分享一些策略，它們不僅可以幫助您**交付強大的軟體**，還可以**讓您擺脫過去工作的束縛**。 ![告訴我更多](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a85h4md8p9xwd1ooq7zc.gif) 我們將討論對我最有效的 5 個策略： 1. [計劃 10 倍](#1-plan-for-10x) 2. [附註：您的舊工作出現錯誤，正在召回您](#2-psst-your-old-work-got-a-bug-and-is-calling-you-back) 3. [讓系統為您服務，而不是相反](#3-make-the-systems-work-for-you-not-the-other-way-around) 4. [始終用連結回答](#4-always-answer-with-a-link) 5. [了解軟體建置是一項團隊運動](#5-understand-software-building-is-a-team-sport)。 1. 10 次計劃 --------- 恕我直言，工程師有兩種：為今天而奮鬥的工程師和為遙遠的未來而設計的工程師。這兩種方法本身都不可持續。您的程式碼應該能夠應對您的業務即將經歷的成長。然而，針對未來挑戰的過度設計可能會導致不必要的複雜性。有一個專門的術語 -[自行車脫落](https://thedecisionlab.com/biases/bikeshedding) ![擴大](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edi9uv0o8bxjg58qr0wm.gif) 這是我的實用經驗法則：規劃目前規模的 10 倍，或考慮您的業務在未來 2-3 年內預計會成長多少。確保您的計劃與您的業務目標保持一致。例如，如果您是一家設計預訂模組的計程車公司，現在您的公司每天處理 10,000 次乘車，並預計在 2 年內達到每天 100,000 次乘車，請以此作為基準。當您只進行 10,000 次騎行時，設計一個每天可進行 1000 萬次騎行的系統可能會導致解決方案過於複雜和昂貴。 2. 噓：您的舊工作出現了錯誤，正在召回您 --------------------- ![系統損壞](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csf7rulcx55smffdqyyi.gif) 「幾天甚至幾週的除錯可以節省你編寫測試的幾個小時」——明智的人。在不測試所有邊緣情況的情況下發布程式碼就像噴霧和祈禱策略。確保程式碼按預期工作的最簡單方法是新增單元測試。這聽起來似乎是顯而易見的，但徹底測試的重要性怎麼強調也不為過。單元測試不僅充當針對明顯錯誤的第一道防線，而且還可以作為程式碼的保險，防止可能違反業務需求的意外更改。因此，減少每個衝刺分配給您的臨時錯誤 😉 **懶人（像我）的一個技巧**：在寫程式之前： - 編寫涵蓋您能想到的每個極端情況的測試。 - 假裝你正試圖破壞別人的系統。 - 在所有測試中編寫斷言 False 並執行它們。 - 當然，所有測試都會失敗。現在，只需努力讓每個測試通過即可。這種方法總體上花費的時間較少，每次都會產生健壯的程式碼！ 3. 讓系統為你服務，而不是相反 ---------------- ![監控系統](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8teb74yr1dgfq2tpolxf.gif) 我的一位經理曾經給了我最有影響力的建議：“採取行動，不要做出反應。”當我不斷在不同的 Slack 頻道上因問題、客戶投訴和付款失敗而被標記時，我提出了這個建議。我只是對每個請求做出反應，不知道接下來會發生什麼。從那時起，我開始對我建造的每個功能提出三個問題： - 我怎麼知道它正在工作？ - 我怎麼知道它失敗了？ - 我怎麼知道它成功了？然後，我透過將指標傳送到我們的 APM 工具（例如 Datadog 或 NewRelic）來回答各個層級（功能、螢幕、應用程式）的這些問題。 ![APM樣本](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8werj18bl8p6zhwc61d.png) 設定完畢後，我配置了警報，以便在出現任何問題時通知我。透過這樣做，我在錯誤升級為重大問題之前就意識到了它們，從而防止了反應性措施、糟糕的客戶體驗以及我自己對接下來可能發生的事情的不確定性。每次建造一些東西時，就開始回答這三個基本問題，以確保您始終採取行動而不是做出反應。 4. 總是用連結來回答 ----------- ![回覆文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8utxvlj2pt1ojjq7kk8.gif) 就像糟糕的工作會讓你在各種 Slack 頻道上進行修復一樣，出色的工作會讓你在你所從事的領域中被貼上上下文標籤。這可能會在你最意想不到的時候耗盡你的精力，或者更糟的是，它可能會讓你成為執行相同任務的首選人選，因為你了解完整的情況。 **請保留這個秘密技巧：** 記錄一切。包括您在建立功能時所做的上下文、架構和特定於業務的決策。當有人詢問某個區域的上下文（功能、螢幕、應用程式）時，只需向他們發送更新文件的連結即可。這每次都會為您節省幾個小時。此外，完整的文件使新團隊成員的入職變得更加容易，並確保您的工作隨著時間的推移仍然可以存取和理解。 5. 了解軟體建置是一項團隊運動。 ----------------- ![特德·拉索欣賞](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/witndxix4fs05xy3fjie.gif) 軟體工程通常強調個人貢獻者路徑。然而，單獨實現最終目標是不可能的——你只能與你的團隊一起實現它（反之亦然）。理解並採用流程卓越的思維方式可以幫助您充分利用團隊的集體生產力。 ![使困惑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwk1ubf1tcuq8wio2v7x.gif) 對於這樣的措詞表示抱歉😄 簡而言之，確保審查、部署和任何涉及程式碼的協作活動不會有很長的等待時間，這可以大大提高您的工作效率！辨識團隊中長時間等待或阻塞時間的最佳方法是衡量 DORA 指標。您可以使用像[Middleware](https://github.com/middlewarehq/middleware)這樣的開源工具，它提供開箱即用的[DORA 指標](https://www.middlewarehq.com/blog/what-are-dora-metrics-how-they-can-help-your-software-delivery-process)。 {% 嵌入 https://github.com/middlewarehq/middleware %} PS：我也是[Middleware](https://middlewarehq.com)的共同創辦人，我們的使命是讓工程師的工程變得順暢。如果您喜歡我們所建造的內容，請考慮給我們一顆星星！像老闆一樣發布程式碼！ ----------- ![老闆人](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2qrf8s8gmb9cx5f8b6f.gif) 透過採用這些建議，您可以大幅減少重新審視和修復過去工作所花費的時間。這不僅可以提高您的工作效率，還可以確保您始終專注於創新和提供新功能。保持高效，而不是忙碌！祝一切順利😊 --- 原文出處：https://dev.to/middleware/write-less-fix-never-the-art-of-highly-reliable-code-5a0i

0個讚 0留言 19瀏覽

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

JavaScript 去抖動綜合指南：提高程式碼效率

透過實際範例和技巧了解如何在 JavaScript 中實現去抖動。掌握去抖功能並提升您的網路效能。在這份綜合指南中，我們將探索 JavaScript 中的去抖動，了解其重要性，並學習如何有效地實現它。無論您是初學者還是經驗豐富的開發人員，掌握去抖動都可以顯著提高您的網路效能。去抖動是一種程式設計實踐，用於確保耗時的任務不會頻繁觸發，從而提高效能和使用者體驗。它在視窗大小調整、按鈕單擊或表單輸入事件等需要控制多個快速事件的場景中特別有用。請訂閱我的 [YouTube 頻道](https://www.youtube.com/@DevDivewithDipak?sub\_confirmation=1)來支援我的頻道並獲取更多 Web 開發教學。 ### 什麼是去抖動？去抖是一種限制函數執行速率的技術。當多個事件快速連續觸發時，去抖動功能將確保只有係列中的最後一個事件在指定的延遲後觸發函數執行。 ### 為什麼要使用去抖動？ - **效能最佳化**：透過減少呼叫函數的次數來防止效能問題。 - **增強的使用者體驗**：避免重複操作的混亂，提供更流暢的體驗。 - **網路效率**：與即時搜尋輸入欄位等事件處理程序一起使用時，減少不必要的網路請求。 ### 去抖動如何運作想像一下，使用者在搜尋框中輸入內容，每次按鍵都會觸發 API 呼叫。如果沒有去抖，每次擊鍵都會導致新的 API 呼叫，從而使網路充滿請求。透過去抖動，只有使用者停止輸入指定持續時間後的最終輸入才會觸發 API 呼叫。 ### 在 JavaScript 中實作去抖動這是去抖函數的簡單實作： ``` function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } ``` ### 使用範例讓我們看看如何在現實場景中使用`debounce`函數： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Debouncing Example</title> </head> <body> <input type="text" id="searchBox" placeholder="Type to search..."> <script> const searchBox = document.getElementById('searchBox'); function fetchSuggestions(query) { console.log('Fetching suggestions for:', query); // Simulate an API call } const debouncedFetchSuggestions = debounce(fetchSuggestions, 300); searchBox.addEventListener('input', (event) => { debouncedFetchSuggestions(event.target.value); }); function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } </script> </body> </html> ``` 在這個例子中： - 輸入欄位捕獲使用者的輸入。 - `fetchSuggestions`函數的去抖延遲為 300 毫秒。 - 當使用者鍵入時，將呼叫`debouncedFetchSuggestions`函數，確保僅在使用者停止鍵入 300 毫秒後才執行`fetchSuggestions` 。 ### 結論去抖動是一種簡單但強大的技術，可優化 Web 應用程式的效能。透過控制函數執行的速率，它有助於減少不必要的計算並改善整體用戶體驗。無論您是處理搜尋輸入、調整視窗大小還是處理其他快速事件，去抖動都是 JavaScript 武器庫中的一個有價值的工具。 *追蹤我，以獲得更多有關 Web 開發的教學課程和技巧。歡迎在下面留下評論或問題！* ### 關注並訂閱： - **網址**：\[Dipak Ahirav\] (https://www.dipakahirav.com) - **電子郵件**：[email protected] - **Instagram** : [devdivewithdipak](https://www.instagram.com/devdivewithdipak) - **YouTube** ：\[devDive 與 Dipak\](https://www.youtube.com/@DevDivewithDipak?sub\_confirmation=1) - **領英**：[迪帕克·阿希拉夫](https://www.linkedin.com/in/dipak-ahirav-606bba128) --- 原文出處：https://dev.to/dipakahirav/understanding-debouncing-in-javascript-5g30

0個讚 0留言 78瀏覽

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

僅使用 HTML 和 CSS 建立側邊欄選單

如果您是 Web 開發新手，您可能在不同網站上看過[側邊欄](https://www.codingnepalweb.com/category/sidebar-menu/)。您是否想知道它們是如何僅使用 HTML 和 CSS 建立的？僅使用 HTML 和 CSS 製作側邊欄是學習網頁設計基礎知識和獲得實務經驗的好方法。在這篇文章中，我將指導您僅使用[HTML](https://www.codingnepalweb.com/?s=html)和[CSS](https://www.codingnepalweb.com/category/html-and-css/)建立響應式側邊欄。最初，側邊欄將被隱藏，僅顯示每個連結的圖示。但是，將滑鼠懸停在側邊欄上將平滑展開以顯示與每個圖示關聯的連結。為了建立這個側邊欄，我們將使用基本的 HTML 語意元素，例如`<aside>` 、 `<ul>` 、 `<li>`和`<a>`以及常見的 CSS 屬性來設定其樣式。這是一個簡單的專案，因此您應該毫無困難地遵循這些步驟或理解程式碼。 HTML 和 CSS 中的響應式側邊欄選單影片教學 ------------------------- https://www.youtube.com/watch?v=VU74s-XAn7M 如果您喜歡從影片教學中學習，上面的 YouTube 影片是一個很好的資源。在本影片中，我解釋了每一行程式碼並提供了資訊豐富的註釋，以使建立 HTML 側邊欄的過程易於遵循，尤其是對於初學者而言。但是，如果您喜歡閱讀部落格文章或需要此專案的逐步指南，您可以繼續閱讀這篇文章。在 HTML 和 CSS 中建立響應式側邊欄的步驟 ------------------------- 若要僅使用 HTML 和 CSS 建立響應式側邊欄，請按照以下簡單的逐步說明進行操作： - 首先，建立一個具有任何您喜歡的名稱的資料夾。然後，在其中建立必要的文件。 - 建立一個名為`index.html`的檔案作為主檔案。 - 為 CSS 程式碼建立一個名為`style.css`檔案。 - 最後，下載[Images](https://www.codingnepalweb.com/custom-projects/simple-sidebar-menu-html-css-only-images.zip)資料夾並將其放置在您的專案目錄中。該資料夾包含該側邊欄專案所需的所有圖像。首先，將以下 HTML 程式碼新增至您的`index.html`檔案：此程式碼包含具有不同語意標籤（如`<aside>` 、 `<ul>` 、 `<li>`和`<a>`的基本HTML 標記，用於建立我們的側邊欄佈局。 ``` <!DOCTYPE html>  <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sidebar Menu HTML and CSS | CodingNepal</title>  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> <link rel="stylesheet" href="style.css" /> </head> <body> <aside class="sidebar"> <div class="sidebar-header"> <img src="images/logo.png" alt="logo" /> <h2>CodingLab</h2> </div> <ul class="sidebar-links"> <h4> <span>Main Menu</span> <div class="menu-separator"></div> </h4> <li> <a href="#"> <span class="material-symbols-outlined"> dashboard </span >Dashboard</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> overview </span >Overview</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> monitoring </span >Analytic</a > </li> <h4> <span>General</span> <div class="menu-separator"></div> </h4> <li> <a href="#" ><span class="material-symbols-outlined"> folder </span>Projects</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> groups </span>Groups</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> move_up </span>Transfer</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> flag </span>All Reports</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> notifications_active </span >Notifications</a > </li> <h4> <span>Account</span> <div class="menu-separator"></div> </h4> <li> <a href="#" ><span class="material-symbols-outlined"> account_circle </span >Profile</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> settings </span >Settings</a > </li> <li> <a href="#" ><span class="material-symbols-outlined"> logout </span>Logout</a > </li> </ul> <div class="user-account"> <div class="user-profile"> <img src="images/profile-img.jpg" alt="Profile Image" /> <div class="user-detail"> <h3>Eva Murphy</h3> <span>Web Developer</span> </div> </div> </div> </aside> </body> </html> ``` 接下來，將以下 CSS 程式碼新增至您的`style.css`檔案中，以使您的側邊欄實用且具有視覺吸引力。請隨意嘗試不同的 CSS 屬性，例如顏色、字體、背景等，以使您的側邊欄更具吸引力。 ``` /* Importing Google font - Poppins */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { min-height: 100vh; background: #F0F4FF; } .sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 85px; display: flex; overflow-x: hidden; flex-direction: column; background: #161a2d; padding: 25px 20px; transition: all 0.4s ease; } .sidebar:hover { width: 260px; } .sidebar .sidebar-header { display: flex; align-items: center; } .sidebar .sidebar-header img { width: 42px; border-radius: 50%; } .sidebar .sidebar-header h2 { color: #fff; font-size: 1.25rem; font-weight: 600; white-space: nowrap; margin-left: 23px; } .sidebar-links h4 { color: #fff; font-weight: 500; white-space: nowrap; margin: 10px 0; position: relative; } .sidebar-links h4 span { opacity: 0; } .sidebar:hover .sidebar-links h4 span { opacity: 1; } .sidebar-links .menu-separator { position: absolute; left: 0; top: 50%; width: 100%; height: 1px; transform: scaleX(1); transform: translateY(-50%); background: #4f52ba; transform-origin: right; transition-delay: 0.2s; } .sidebar:hover .sidebar-links .menu-separator { transition-delay: 0s; transform: scaleX(0); } .sidebar-links { list-style: none; margin-top: 20px; height: 80%; overflow-y: auto; scrollbar-width: none; } .sidebar-links::-webkit-scrollbar { display: none; } .sidebar-links li a { display: flex; align-items: center; gap: 0 20px; color: #fff; font-weight: 500; white-space: nowrap; padding: 15px 10px; text-decoration: none; transition: 0.2s ease; } .sidebar-links li a:hover { color: #161a2d; background: #fff; border-radius: 4px; } .user-account { margin-top: auto; padding: 12px 10px; margin-left: -10px; } .user-profile { display: flex; align-items: center; color: #161a2d; } .user-profile img { width: 42px; border-radius: 50%; border: 2px solid #fff; } .user-profile h3 { font-size: 1rem; font-weight: 600; } .user-profile span { font-size: 0.775rem; font-weight: 600; } .user-detail { margin-left: 23px; white-space: nowrap; } .sidebar:hover .user-account { background: #fff; border-radius: 4px; } ``` 結論和最後的話 ------- 對於 Web 開發初學者來說，使用 HTML 和 CSS 建立響應式側邊欄是一項可以完成的任務。透過遵循本文中提供的步驟和程式碼，您應該能夠成功建立自己的響應式和功能性側邊欄。為了進一步提高您的網頁開發技能，我建議您嘗試重新建立本網站上提供的其他[漂亮的側邊欄](https://www.codingnepalweb.com/category/sidebar-menu/)。其中一些側邊欄使用 JavaScript 來增強其功能，例如加入[深色模式](https://www.codingnepalweb.com/sidebar-menu-in-html-css-javascript-dark-light-mode/)、[下拉式選單](https://www.codingnepalweb.com/dropdown-sidebar-menu-html-css/)等。如果您在建立側邊欄時遇到任何問題，可以透過點擊「下載」按鈕免費下載專案的原始碼檔案。您也可以透過點擊“查看即時”按鈕來查看它的即時演示。 [查看現場演示](https://www.codingnepalweb.com/demos/create-sidebar-menu-html-css-only/) [下載程式碼文件](https://www.codingnepalweb.com/create-sidebar-menu-html-css-only/) --- 原文出處：https://dev.to/codingnepal/create-a-sidebar-menu-using-html-and-css-only-2e79

0個讚 0留言 74瀏覽

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

使用 NextJS 建立電子商務商店

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

0個讚 0留言 67瀏覽

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

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

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

0個讚 0留言 32瀏覽

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

使用 Gemini API 和 ToolJet 在 10 分鐘內建立 AI 內容產生器 🛠️

在本快速教學中，我們將使用 Gemini API 和 ToolJet 建立一個由 AI 驅動的內容產生器，這一切只需 10 分鐘即可完成。該應用程式將根據上傳的圖像、選定的內容類型以及用戶輸入的附加資訊來產生內容。無論您需要標題、簡短描述、詳細描述、創意故事、部落格文章大綱、完整部落格文章、社交媒體標題還是廣告文案，此應用程式都能滿足您的需求。請跟隨使用 ToolJet 的快速開發流程和 Gemini 的先進 AI 功能將內容建立無縫整合到您的工作流程中。這是我們最終應用程式的預覽： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jktjjr8hox6c4y38ndq.png) --- 先決條件 ---- - ToolJet (https://github.com/ToolJet/ToolJet)：一個開源、低程式碼的商業應用程式建構器。[註冊](https://www.tooljet.com/signup)免費的 ToolJet 雲端帳號或使用 Docker[在本機上執行 ToolJet](https://docs.tooljet.com/docs/setup/try-tooljet/) 。 - Gemini API Key：Gemini API 是[Google AI Studio](https://aistudio.google.com/app/apikey)提供的進階人工智慧服務。它使開發人員能夠將強大的內容生成功能整合到他們的應用程式中。 --- 首先建立一個名為*AI Content Generator*的應用程式。第一步 - 設計 UI 🎨 ------------- 建立應用程式後，我們就可以開始使用 ToolJet 的預先建置元件設計 UI。 - 從右側[元件庫](https://docs.tooljet.com/docs/tooljet-concepts/what-are-components)中拖曳一個**Container**元件，並調整其大小，使其覆蓋大部分畫布。 - 將**圖示**元件和**文字**元件放在容器上。然後，將 Icon 元件重新命名為*logo* ，將 Text 元件重新命名為*logoText* 。 - 選擇 Icon 元件以查看右側的屬性面板。選擇**IconListSearch**作為圖示。 - 對於文字元件，在其**文字**屬性下輸入*AI Content Generator* ，並調整其字體粗細和文字大小。 - 將圖示和文字元件的顏色變更為深藍色（十六進位程式碼 - #354094）。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kf3k3orw0yckdn786unl.png) *本教學使用深藍色（#354094）作為主色。在接下來的步驟中相應地更新元件的顏色。隨意使用不同的配色。* - 在我們剛剛建立的標題下方新增一個**圖像**元件和一個**文字**元件。分別將它們重新命名為*imagePreview*和*output* 。 *imagePreview*將顯示上傳圖像的預覽，*輸出*將顯示基於圖像和所選選項生成的文字。 - 在映像下方新增一個**File Picker**元件並將其重新命名為*imageUploader* 。 - 在其旁邊放置一個**下拉**元件和**文字輸入**元件。分別將它們重新命名為*typeOfContentInput*和*additionalInfoInput* 。 - 對於文字輸入元件，在**佔位符**屬性下輸入下列值： `Enter additional information` - 對於下拉元件，使用雙花括號將以下陣列貼到**選項值**和**選項標籤**屬性下： ``` {{["Title", "Short Description (1-2 sentences)", "Long Description (paragraph)", "Creative Story", "Blog Post Outline", "Blog Post", "Social Media Caption", "Advertisement Copy"]}} ``` - 在下拉元件的 Placeholder 屬性下輸入下列值： `Select type of content` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqnp25tphss8np3to3fc.png) *當應用程式有大量元件並且我們需要引用應用程式內與元件相關的值時，重新命名元件會很有用。* - 在底部新增一個**Button**元件作為 UI 建置過程的最後一步。將元件重新命名為*generateContentButton* 。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u25jhdxw86aeqkr5yx2k.png) 我們為此應用程式設計了一個簡單的 UI，您可以完全自訂它以滿足您的特定要求。 ToolJet 提供了廣泛的靈活性，讓您可以完全按照您的設想定義和排列元件。第二步 - 整合 AI 能力🛠️ ---------------- UI 完成後，我們可以使用 ToolJet 的[查詢](https://docs.tooljet.com/docs/tooljet-concepts/what-are-queries)與 Gemini API 連接，並根據上傳的圖像、內容類型和我們在元件中輸入的其他資訊來獲得回應。為了保護您的 Gemini API 金鑰，我們將利用 ToolJet 的[工作空間常數](https://docs.tooljet.com/docs/tooljet-concepts/workspace-constants)。這樣，您的金鑰就可以保持隱藏且安全。 - 點擊左上角的 ToolJet 標誌。從下拉清單中選擇工作空間常數。 - 點選**建立新常數**按鈕。將名稱設為*GEMINI\_API\_KEY*並在值輸入中輸入您的 Gemini API 金鑰。點選**新增常數**按鈕。現在，該常數將在我們的工作區中可用，並且可以使用`{{constants.GEMINI_API_KEY}}`進行存取。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/og7gvo56vva0t2ziu25j.png) *您可以使用現有的 Google 憑證登入[Google AI Studio](https://aistudio.google.com/app/apikey) 。在 AI Studio 介面中，您將能夠找到並複製您的 API 金鑰。* - 導航回您的應用程式並展開底部的**查詢面板**。 - 點擊**+ 新增**按鈕並選擇**REST API**選項。將查詢重新命名為*getContent* 。 - 將請求方法變更為**POST**並將以下 URL 貼到 URL 輸入下： `https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-pro:generateContent?key={{constants.GEMINI_API_KEY}}` - 導航到*getContent*查詢的**正文**部分。切換到**原始 JSON**並輸入以下程式碼： ``` {{ `{ "contents": [{ "parts": [{ "text": "Generate the following content for this image in markdown format: content type: ${components.typeOfContentInput.value}, additional info: ${components.additionalInfoInput.value}" }, { "inline_data": { "mime_type":"image/jpeg", "data": "${components.imageUploader.file[0].base64Data}" } },], },], }` }} ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnelq2jt9zmbjxa4k3tw.png) *在上面的配置中，我們建立了一個結合了使用者輸入文字和影像資料的結構化 JSON 有效負載。然後，JSON 物件被傳送到 Gemini API 端點以處理提供的內容和圖像。* 第三步 - 將資料綁定到元件🔗 --------------- 準備好查詢後，我們可以設定每次點擊 Button 元件時觸發它的方法。 - 選擇 Button 元件，然後導覽其右側的屬性面板。 - 在**「事件」**下，按一下**[「新事件處理程序」](https://docs.tooljet.com/docs/tooljet-concepts/what-are-events)**以建立新事件。 - 對於新事件，選擇**“單擊時”**作為“事件”，並**選擇“執行查詢”**作為“操作”。 - 選擇*getContent*作為查詢（在上一個步驟中建立的查詢）。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouhohqt8tartis014yv3.png) 現在，每次單擊 Button 元件時，都會觸發*getContent*查詢，它將根據上傳的圖像和使用者輸入返回 AI 生成的內容。接下來，我們將使用以下步驟使用*getContent*查詢傳回的值填入 Text(*輸出*) 元件： - 選擇為查詢輸出建立的文字（*輸出*）元件。 - 在其**Data**屬性下，輸入以下程式碼： `{{queries.getContent.data.candidates[0].content.parts[0].text}}` 同樣，使用從文件選擇器元件上傳的圖像填充圖像元件： - 選擇影像元件。 - 在其**URL**屬性下，輸入以下程式碼： `{{'data:image;base64,' + components.imageUploader.file[0].base64Data}}` 我們的應用程式現已準備就緒。讓我們嘗試一下並查看結果。選擇圖像，選擇內容類型，輸入一些附加訊息，然後按一下生成按鈕。我們現在應該能夠看到圖像的預覽和人工智慧生成的文字輸出。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b85w892qss30h3smueij.png) 結論 -- 現在，我們使用 Gemini API 和 ToolJet 在短短 10 分鐘內建立了一個功能齊全的 AI 驅動的內容產生器。該應用程式演示了 ToolJet 的快速開發環境如何與 Gemini 的高級 AI 功能無縫集成，以根據用戶輸入自動建立內容。要探索更多訊息，請查看[ToolJet 文件](https://docs.tooljet.com/docs/)或加入我們的[slack](https://join.slack.com/t/tooljet/shared_invite/zt-2ij7t3rzo-qV7WTUTyDVQkwVxTlpxQqw) 。快樂編碼！ --- 原文出處：https://dev.to/tooljet/build-an-ai-content-generator-using-gemini-api-and-tooljet-in-10-minutes-2d0m

0個讚 0留言 37瀏覽

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

TypeScript 專案的自訂實用程式類型

在我們探索 TypeScript 開發的第二部分中，我們引入了另外十種自訂實用程式類型，這些類型可以擴展程式碼的功能，提供更多工具來更有效地管理類型。這些實用程式類型有助於保持您的程式碼庫乾淨、高效和健壯。第一部分： [TypeScript 專案的 1-10 個自訂實用程式類型](https://dev.to/antonzo/10-sustom-utility-types-for-typescript-projects-48pe) 總有機碳 ---- - [不可空深](#NonNullableDeep) - [合併](#Merge) - [元組到物件](#TupleToObject) - [獨佔元組](#ExclusiveTuple) - [Promise類型](#PromiseType) - [省略方法](#OmitMethods) - [函數參數](#FunctionArguments) - [承諾](#Promisify) - [約束函數](#ConstrainedFunction) - [聯合解析器](#UnionResolver) <a name="NonNullableDeep"></a> `NonNullableDeep` ----------------- `NonNullableDeep`類型是一個實用程序，可從給定類型`T`的所有屬性中深度刪除`null`和`undefined` 。這意味著不僅物件的頂級屬性不可為空，而且所有嵌套屬性也遞歸地標記為不可為空。在必須確保物件的屬性（包括深度嵌套的屬性）不為`null`或`undefined`情況下（例如在處理必須完全填充的資料時），此類型特別有用。 ``` type NonNullableDeep<T> = { [P in keyof T]: NonNullable<T[P]> extends object ? NonNullableDeep<NonNullable<T[P]>> : NonNullable<T[P]>; }; ``` **例子** 以下範例示範如何套用`NonNullableDeep`類型來確保`Person`物件本身及其任何巢狀屬性都無法為`null`或`undefined` ，從而確保整個物件已完全填入。 ``` interface Address { street: string | null; city: string | null; } interface Person { name: string | null; age: number | null; address: Address | null; } const person: NonNullableDeep<Person> = { name: "Anton Zamay", age: 26, address: { street: "Secret Street 123", city: "Berlin", }, }; // Error: Type 'null' is not assignable to type 'string'. person.name = null; // Error: Type 'undefined' is not assignable to type 'number'. person.age = undefined; // Error: Type 'null' is not assignable to type 'Address'. person.address = null; // Error: Type 'null' is not assignable to type 'string'. person.address.city = null; ``` <a name="Merge"></a> `Merge` ------- `Merge<O1, O2>`類型對於透過組合兩個物件類型`O1`和`O2`的屬性來建立新類型非常有用。當屬性重疊時， `O2`中的屬性將覆寫`O1`中的屬性。當您需要擴展或自訂現有類型以確保特定屬性優先時，這特別有用。 ``` type Merge<O1, O2> = O2 & Omit<O1, keyof O2>; ``` **例子** 在此範例中，我們定義了兩種物件類型，分別表示預設設定和使用者設定。使用`Merge`類型，我們組合這些設定來建立最終配置，其中`userSettings`會覆蓋`defaultSettings` 。 ``` type DefaultSettings = { theme: string; notifications: boolean; autoSave: boolean; }; type UserSettings = { theme: string; notifications: string[]; debugMode?: boolean; }; const defaultSettings: DefaultSettings = { theme: "light", notifications: true, autoSave: true, }; const userSettings: UserSettings = { theme: "dark", notifications: ["Warning 1", "Error 1", "Warning 2"], debugMode: true, }; type FinalSettings = Merge<DefaultSettings, UserSettings>; const finalSettings: FinalSettings = { ...defaultSettings, ...userSettings }; ``` <a name="TupleToObject"></a> `TupleToObject` --------------- `TupleToObject`類型是將元組類型轉換為物件類型的實用程序，其中元組的元素成為物件的鍵，並根據這些元素在元組中的位置提取關聯的值。這種類型在需要將元組轉換為更結構化的物件形式的情況下特別有用，允許透過元素的名稱而不是位置更直接地存取元素。 ``` type TupleToObject<T extends [string, any][]> = { [P in T[number][0]]: Extract<T[number], [P, any]>[1]; }; ``` **例子** 考慮這樣一個場景，您正在使用將表架構資訊儲存為元組的資料庫。每個元組包含一個欄位名稱及其對應的資料類型。這種格式通常用於資料庫元資料 API 或架構遷移工具。元組格式緊湊且易於處理，但對於應用程式開發來說，使用物件更方便。 ``` type SchemaTuple = [ ['id', 'number'], ['name', 'string'], ['email', 'string'], ['isActive', 'boolean'] ]; const tableSchema: SchemaTuple = [ ['id', 'number'], ['name', 'string'], ['email', 'string'], ['isActive', 'boolean'], ]; // Define the type of the transformed schema object type TupleToObject<T extends [string, string | number | boolean][]> = { [P in T[number][0]]: Extract< T[number], [P, any] >[1]; }; type SchemaObject = TupleToObject<SchemaTuple>; const schema: SchemaObject = tableSchema.reduce( (obj, [key, value]) => { obj[key] = value; return obj; }, {} as SchemaObject ); // Now you can use the schema object console.log(schema.id); // Output: number console.log(schema.name); // Output: string console.log(schema.email); // Output: string console.log(schema.isActive); // Output: boolean ``` <a name="ExclusiveTuple"></a> `ExclusiveTuple` ---------------- `ExclusiveTuple`類型是一個實用程序，它產生包含來自給定聯合類型`T`的唯一元素的元組。此類型確保聯合的每個元素僅在結果元組中包含一次，從而有效地將聯合類型轉換為具有聯合元素的所有可能的唯一排列的元組類型。這在您需要枚舉聯合成員的所有唯一組合的情況下特別有用。 ``` type ExclusiveTuple<T, U extends any[] = []> = T extends any ? Exclude<T, U[number]> extends infer V ? [V, ...ExclusiveTuple<Exclude<T, V>, [V, ...U]>] : [] : []; ``` **例子** 考慮這樣一個場景：您正在開發一個旅行應用程式的功能，該功能可以為遊覽某個城市的遊客產生獨特的行程。該市有三個主要景點：博物館、公園和劇院。 ``` type Attraction = 'Museum' | 'Park' | 'Theater'; type Itineraries = ExclusiveTuple<Attraction>; // The Itineraries type will be equivalent to: // type Itineraries = // ['Museum', 'Park', 'Theater'] | // ['Museum', 'Theater', 'Park'] | // ['Park', 'Museum', 'Theater'] | // ['Park', 'Theater', 'Museum'] | // ['Theater', 'Museum', 'Park'] | // ['Theater', 'Park', 'Museum']; ``` <a name="PromiseType"></a> `PromiseType` ------------- `PromiseType`類型是一個實用程序，用於提取給定 Promise 解析為的值的類型。這在使用非同步程式碼時非常有用，因為它允許開發人員輕鬆推斷結果的類型，而無需明確指定它。 ``` type PromiseType<T> = T extends Promise<infer U> ? U : never; ``` 此類型使用 TypeScript 的條件類型和`infer`關鍵字來決定`Promise`的解析類型。如果`T`擴展`Promise<U>` ，則表示`T`是解析為類型`U` `Promise` ，而`U`是推斷的類型。如果`T`不是`Promise` ，則型別解析為`never` 。 **例子** 以下範例示範如何使用 PromiseType 類型從 Promise 中提取已解析的類型。透過使用此實用程式類型，您可以推斷 Promise 將解析為的值的類型，這有助於在處理非同步操作時進行類型檢查並避免錯誤。 ``` type PromiseType<T> = T extends Promise<infer U> ? U : never; interface User { id: number; name: string; } interface Post { id: number; title: string; content: string; userId: number; } async function fetchUser(userId: number): Promise<User> { return { id: userId, name: "Anton Zamay" }; } async function fetchPostsByUser(userId: number): Promise<Post[]> { return [ { id: 1, title: "Using the Singleton Pattern in React", content: "Content 1", userId }, { id: 2, title: "Hoisting of Variables, Functions, Classes, Types, " + "Interfaces in JavaScript/TypeScript", content: "Content 2", userId }, ]; } async function getUserWithPosts( userId: number ): Promise<{ user: User; posts: Post[] }> { const user = await fetchUser(userId); const posts = await fetchPostsByUser(userId); return { user, posts }; } // Using PromiseType to infer the resolved types type UserType = PromiseType<ReturnType<typeof fetchUser>>; type PostsType = PromiseType<ReturnType<typeof fetchPostsByUser>>; type UserWithPostsType = PromiseType<ReturnType<typeof getUserWithPosts>>; async function exampleUsage() { const userWithPosts: UserWithPostsType = await getUserWithPosts(1); // The following will be type-checked to ensure correctness const userName: UserType["name"] = userWithPosts.user.name; const firstPostTitle: PostsType[0]["title"] = userWithPosts.posts[0].title; console.log(userName); // Anton Zamay console.log(firstPostTitle); // Using the Singleton Pattern in React } exampleUsage(); ``` **為什麼我們需要`UserType`而不僅僅是使用`User` ？** 這是個好問題！使用`UserType`而不是直接使用`User`主要原因是為了確保從非同步函數的回傳類型準確推斷出類型。這種方法有幾個優點： 1. **類型一致性：**透過使用`UserType` ，您可以確保類型始終與`fetchUser`函數的實際回傳類型一致。如果`fetchUser`的回傳類型發生更改， `UserType`將自動反映該更改，而無需手動更新。 2. **自動類型推斷**：在處理複雜類型和巢狀承諾時，手動確定和追蹤解析的類型可能具有挑戰性。使用 PromiseType 允許 TypeScript 為您推斷這些類型，從而降低錯誤風險。 <a name="OmitMethods"></a> `OmitMethods` ------------- `OmitMethods`型別是個實用程序，可從給定型別`T`中刪除所有方法屬性。這意味著作為函數的類型`T`的任何屬性都將被省略，從而產生僅包含非函數屬性的新類型。 ``` type OmitMethods<T> = Pick<T, { [K in keyof T]: T[K] extends Function ? never : K }[keyof T]>; ``` **例子** 此類型在您想要從物件類型中排除方法的情況下特別有用，例如將物件序列化為 JSON 或透過 API 發送物件時，其中方法不相關且不應包含在內。以下範例示範如何將`OmitMethods`套用至物件類型以刪除所有方法，確保產生的類型僅包含非函數的屬性。 ``` interface User { id: number; name: string; age: number; greet(): void; updateAge(newAge: number): void; } const user: OmitMethods<User> = { id: 1, name: "Alice", age: 30, // greet and updateAge methods are omitted from this type }; function sendUserData(userData: OmitMethods<User>) { // API call to send user data console.log("Sending user data:", JSON.stringify(userData)); } sendUserData(user); ``` <a name="FunctionArguments"></a> `FunctionArguments` ------------------- `FunctionArguments`類型是一個實用程序，用於提取給定函數類型`T`的參數類型。這意味著對於傳遞給它的任何函數類型，該類型將傳回一個表示函數參數類型的元組。此類型在需要捕獲或操作函數的參數類型的情況下特別有用，例如在高階函數中或建立類型安全的事件處理程序時。 ``` type FunctionArguments<T> = T extends (...args: infer A) => any ? A : never; ``` **例子** 假設您有一個高階函數包裝，它接受一個函數及其參數，然後使用這些參數來呼叫該函數。使用 FunctionArguments，您可以確保包裝函數參數的類型安全。 ``` function wrap<T extends (...args: any[]) => any>(fn: T, ...args: FunctionArguments<T>): ReturnType<T> { return fn(...args); } function add(a: number, b: number): number { return a + b; } type AddArgs = FunctionArguments<typeof add>; // AddArgs will be of type [number, number] const result = wrap(add, 5, 10); // result is 15, and types are checked ``` <a name="Promisify"></a> `Promisify` ----------- `Promisify`類型是一個實用程序，它將給定類型`T`的所有屬性轉換為各自類型的 Promise。這意味著結果類型中的每個屬性都將是該屬性的原始類型的`Promise` 。這種類型在處理非同步操作時特別有用，您希望確保整個結構符合基於`Promise`的方法，從而更輕鬆地處理和管理非同步資料。 ``` type Promisify<T> = { [P in keyof T]: Promise<T[P]> }; ``` **例子** 考慮一個顯示使用者個人資料、最近活動和設定的儀表板。這些資訊可能是從不同的服務獲取的。透過承諾單獨的屬性，我們確保使用者資料的每個部分都可以獨立取得、解析和處理，從而在處理非同步操作時提供靈活性和效率。 ``` interface Profile { name: string; age: number; email: string; } interface Activity { lastLogin: Date; recentActions: string[]; } interface Settings { theme: string; notifications: boolean; } interface UserData { profile: Profile; activity: Activity; settings: Settings; } // Promisify Utility Type type Promisify<T> = { [P in keyof T]: Promise<T[P]>; }; // Simulated Fetch Functions const fetchProfile = (): Promise<Profile> => Promise.resolve({ name: "Anton Zamay", age: 26, email: "[email protected]" }); const fetchActivity = (): Promise<Activity> => Promise.resolve({ lastLogin: new Date(), recentActions: ["logged in", "viewed dashboard"], }); const fetchSettings = (): Promise<Settings> => Promise.resolve({ theme: "dark", notifications: true }); // Fetching User Data const fetchUserData = async (): Promise<Promisify<UserData>> => { return { profile: fetchProfile(), activity: fetchActivity(), settings: fetchSettings(), }; }; // Using Promisified User Data const displayUserData = async () => { const user = await fetchUserData(); // Handling promises for each property (might be in different places) const profile = await user.profile; const activity = await user.activity; const settings = await user.settings; console.log(`Name: ${profile.name}`); console.log(`Last Login: ${activity.lastLogin}`); console.log(`Theme: ${settings.theme}`); }; displayUserData(); ``` <a name="ConstrainedFunction"></a> `ConstrainedFunction` --------------------- `ConstrainedFunction`類型是一個實用程序，它約束給定的函數類型 T 以確保保留其參數和傳回類型。它本質上捕獲函數的參數類型和返回類型，並強制結果函數類型必須遵守這些推斷類型。當您需要對高階函數實施嚴格的類型約束或建立必須符合原始函數簽署的包裝函數時，此類型非常有用。 ``` type ConstrainedFunction<T extends (...args: any) => any> = T extends (...args: infer A) => infer R ? (args: A extends any[] ? A : never) => R : never; ``` **例子** 在事先未知函數簽署且必須動態推斷的情況下， `ConstrainedFunction`可確保根據推斷的類型正確應用約束。想像一個實用程序，它包裝任何函數以記憶其結果： ``` function memoize<T extends (...args: any) => any>(fn: T): ConstrainedFunction<T> { const cache = new Map<string, ReturnType<T>>(); return ((...args: Parameters<T>) => { const key = JSON.stringify(args); if (!cache.has(key)) { cache.set(key, fn(...args)); } return cache.get(key)!; }) as ConstrainedFunction<T>; } const greet: Greet = (name, age) => { return `Hello, my name is ${name} and I am ${age} years old.`; }; const memoizedGreet = memoize(greet); const message1 = memoizedGreet("Anton Zamay", 26); // Calculates and caches const message2 = memoizedGreet("Anton Zamay", 26); // Retrieves from cache ``` 在這裡， `memoize`使用`ConstrainedFunction`來確保記憶函數保持與原始函數`fn`相同的簽名，而不需要明確定義函數類型。 <a name="UnionResolver"></a> `UnionResolver` --------------- `UnionResolver`類型是將聯合型別轉換為可區分聯合的實用程式。具體來說，對於給定的聯合類型`T` ，它會產生一個物件陣列，其中每個物件都包含一個屬性類型，該屬性類型保存聯合中的類型之一。在需要明確處理聯合的每個成員的情況下使用聯合類型時，此類型特別有用，例如在類型安全的 Redux 操作或 TypeScript 中的可區分聯合模式中。 ``` type UnionResolver<T> = T extends infer U ? { type: U }[] : never; ``` **例子** 以下範例示範如何應用`UnionResolver`類型將聯合類型轉換為物件陣列，每個物件都具有`type`屬性。這允許對聯合內的每個操作進行類型安全處理，確保考慮到所有情況並降低使用聯合類型時發生錯誤的風險。 ``` type ActionType = "ADD_TODO" | "REMOVE_TODO" | "UPDATE_TODO"; type ResolvedActions = UnionResolver<ActionType>; // The resulting type will be: // { // type: "ADD_TODO"; // }[] | { // type: "REMOVE_TODO"; // }[] | { // type: "UPDATE_TODO"; // }[] const actions: ResolvedActions = [ { type: "ADD_TODO" }, { type: "REMOVE_TODO" }, { type: "UPDATE_TODO" }, ]; // Now you can handle each action type distinctly actions.forEach(action => { switch (action.type) { case "ADD_TODO": console.log("Adding a todo"); break; case "REMOVE_TODO": console.log("Removing a todo"); break; case "UPDATE_TODO": console.log("Updating a todo"); break; } }); ``` --- 原文出處：https://dev.to/antonzo/11-20-sustom-utility-types-for-typescript-projects-2bg5

0個讚 0留言 94瀏覽

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

提升你的技能

介紹 -- 學習如何成為更好的開發人員需要不斷提升自己的技能。一個人如何學習成長並成為更好的開發人員？讓我們探討幾個總體上適用於大多數開發人員的想法。程式碼範例全部採用 C# 語言，之所以選擇它們是因為它們對於大多數開發人員來說並不常見，並且是在內部完成的。腳步 -- - [Pluralsight](https://www.pluralsight.com/)是一個付費網站，提供數百門 C# 課程。首先使用他們的人工智慧評估，這將引導您走上正確的道路。許多課程也有自己的評估。 Pluralsight 讓您輕鬆地向高評價作者學習，並透過任何裝置（例如筆記型電腦、手機或平板電腦）存取課程。 Pluralsite 提供免費試用，有時還會在購買訂閱時提供折扣。 - 使用[微軟學習](https://learn.microsoft.com/en-us/training/)。無論您是剛開始職業生涯，還是經驗豐富的專業人士，我們的自我導向方法都可以幫助您更快、更有信心地按照自己的步調實現目標。透過互動式模組和路徑培養技能或向講師學習。以您的方式學習和成長。 - 花時間閱讀 Microsoft 文件，例如，閱讀[C# 程式的一般結構、類型運算子和表達式語句、](https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/program-structure/)各種[類別](https://learn.microsoft.com/en-us/dotnet/api/system.string?view=net-6.0)[、物件導向程式設計](https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/tutorials/oop)等等。 - 在學習過程中，嘗試使用控制台或單元測試專案使事情變得簡單，換句話說，將後端學習與前端使用者介面學習分開。 - 在您感覺舒服的某個時間點，確定一個簡單的專案，在編碼之前寫出任務，然後編寫程式碼，而不是同時思考和編碼。新手等級的思考和編碼簡直就是一場即將發生的災難。 - 在網路上尋找資訊並找到解決方案時，不要簡單地複製和貼上，檢查程式碼，在使用所述程式碼之前先嘗試弄清楚它在做什麼。 - 了解如何在 Visual Studio 中使用 GitHub 來備份和版本程式碼。假設您編寫了程式碼並破壞了它，透過 GitHub 儲存庫中的正確版本控制，您可以還原變更並還原程式碼。 - 使用 .NET Framework Core 6 或 .NET Core Framework 8 而不是 .NET Framework classic，因為使用 .NET Core 有更多好處 - 如果學習使用資料，請從 SQL-Server Express 開始並安裝 SSMS (SQL-Server Management Studio)，同時學習使用 Entity Framework Core。 - 充分了解學習任何語言時慢速學習比快速學習好，而且沒有人知道這一切。 ![了解如何使用除錯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp3uj4nuhzx7sple8tad.png) 加速學習的工具 ------- Microsoft Visual Studio 絕對是最好的 IDE（整合開發環境），它具有以下專案可以增加學習並節省編碼時間。 - 適用於 Visual Studio 和 SSMS 的 Red Gate [SQL 提示符](https://www.red-gate.com/products/sql-prompt/) - 高級 IntelliSense 風格的程式碼完成 - 重構 SQL 程式碼 - SSMS SQL 歷史記錄 - 以及更多 - Jetbrains [ReSharper](https://www.jetbrains.com/resharper/)這是一個非常寶貴的 Visual Studio 擴充功能。 - [EF Power Tools](https://marketplace.visualstudio.com/items?itemName=ErikEJ.EFCorePowerTools)可輕鬆對 EF Core 的 SQL-Server 資料庫進行逆向工程深入了解程式碼基礎知識 ----------- 掌握基礎知識後，尋找有助於成長為更好的開發人員的程式碼範例。一個可能的途徑是使用[Microsoft Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/) (EF Core) 或使用[Dapper](https://www.learndapper.com/)等資料提供者來處理資料庫。還有其他處理資料的方法，但 EF Core 和 Dapper 在效能和易於學習方面是最好的。在 Web 上尋找程式碼範例時，請確保它們適用於您的專案的 .NET Framework，因為 .NET Framework 4.8 程式碼範例與 .NET Core 8 Framework 有很大不同。 Microsoft 每年都會為 EF Core 建立程式碼範例，但在許多情況下，其結構可能不適合缺乏經驗的開發人員學習，因此 Karen Payne 採用 EF Core 8 程式碼範例並建立了以下[文章](https://dev.to/karenpayneoregon/microsoft-entity-framework-core-8-samples-3dj8)/[儲存庫，在大多數情況下，這些文章/儲存庫](https://github.com/karenpayneoregon/ef-code-8-samples)很容易學習。第 1 課 - SQL-Server 計算列 ---------------------- ### EF 核心版本 {% cta https://github.com/karenpayneoregon/sql-basics/tree/master/EF\_CoreBirthdaysCompulatedColumns %} 範例專案 {% endcta %} [計算列](https://learn.microsoft.com/en-us/sql/relational-databases/tables/specify-computed-columns-in-a-table?view=sql-server-ver16)是虛擬列，除非該列被標記為 PERSISTED，否則不會實際儲存在表中。計算列表達式可以使用其他欄位中的資料來計算其所屬列的值。您可以使用 SQL Server Management Studio (SSMS) 或 Transact-SQL (T-SQL) 為 SQL Server 中的計算列指定運算式。完整文章，請參閱[SQL-Server：使用 Ef Core 計算列](https://dev.to/karenpayneoregon/sql-server-computed-columns-with-ef-core-3h8d) 但在這裡，我們將使用 EF Core 和 Dapper 從開始和演練使用情況建立一個計算列。原文來自以下 Stackoverflow貼[文](https://stackoverflow.com/questions/9/how-do-i-calculate-someones-age-based-on-a-datetime-type-birthday?page=2&tab=modifieddesc#tab-top)。取得出生日期和目前日期，用出生日期減去目前日期，然後除以 10,000。在 SSMS（SQL Server Management Studio）中請注意，在程式碼範例中，完整資料庫存在於腳本資料夾下的專案 EF\_CoreBirthdaysCompulatedColumns 中。在執行腳本之前，請在 SSMS 中建立資料庫，然後執行腳本來建立表格並填入資料。另請注意，在程式碼範例中，連接字串使用 NuGet 套件[ConsoleConfigurationLibrary](https://www.nuget.org/packages/ConsoleConfigurationLibrary/)駐留在 appsettings.json 中。 **表結構** ![表結構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06sfbbb9i4ru5203l1nx.png) **SQL** ![選擇語句](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bqiabe7j0a4nvez1yqa.png) 將聲明分開。 - 使用日期分隔符號格式化兩個日期並將每個日期轉換為整數。 - 從目前日期減去出生日期，括號很重要。 - 將以上除以 10,000 即可得到年齡。 **結果** ![SELECT 的結果](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvzc25dc1ojr4arurnqy.png) 現在為名為 YearsOld 的表建立一個 nvarchar 類型的新欄位，並將此語句放入計算列屬性中，然後儲存變更。 ``` (CAST(FORMAT(GETDATE(), 'yyyyMMdd') AS INTEGER) - CAST(FORMAT(BirthDate, 'yyyyMMdd') AS INTEGER)) / 10000 ``` ![ssms中的表設計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvwq73hel66uumzbixh5.png) - 建立一個新的 C# 控制台專案。 - 新增[Microsoft.EntityFrameworkCore.SqlServer](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.SqlServer/8.0.0?_src=template)的依賴項 - 安裝 Visual Studio 擴充[EF Power Tools](https://marketplace.visualstudio.com/items?itemName=ErikEJ.EFCorePowerTools) 。若要了解如何使用 EF Power Tools，請觀看作者提供的以下[影片](https://www.youtube.com/watch?v=uph-AGyOd8c)。新增[完整文件](https://github.com/ErikEJ/EFCorePowerTools/wiki/Reverse-Engineering)。使用 EF Power Tools 後，將產生以下類別。代表 SQL-Server 資料庫表的模型。 ``` public partial class BirthDays { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public DateOnly? BirthDate { get; set; } public int? YearsOld { get; set; } } ``` 所謂的[DbContext](https://learn.microsoft.com/en-us/dotnet/api/system.data.entity.dbcontext?view=entity-framework-6.2.0)和與資料庫互動的配置。注意 YearsOld 上的[HasCompulatedColumnSql](https://learn.microsoft.com/en-us/dotnet/api/microsoft.entityframeworkcore.relationalpropertybuilderextensions.hascomputedcolumnsql?view=efcore-8.0) ，這是我們的計算列。 ``` public partial class Context : DbContext { public Context() { } public Context(DbContextOptions<Context> options) : base(options) { } public virtual DbSet<BirthDays> BirthDays { get; set; } protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) #warning To protect potentially sensitive information in your connection string, you should move it out of source code. You can avoid scaffolding the connection string by using the Name= syntax to read it from configuration - see https://go.microsoft.com/fwlink/?linkid=2131148. For more guidance on storing connection strings, see https://go.microsoft.com/fwlink/?LinkId=723263. => optionsBuilder.UseSqlServer(DataConnections.Instance.MainConnection); protected override void OnModelCreating(ModelBuilder modelBuilder) { modelBuilder.Entity<BirthDays>(entity => { entity.Property(e => e.YearsOld).HasComputedColumnSql("((CONVERT([int],format(getdate(),'yyyyMMdd'))-CONVERT([int],format([BirthDate],'yyyyMMdd')))/(10000))", false); }); OnModelCreatingPartial(modelBuilder); } partial void OnModelCreatingPartial(ModelBuilder modelBuilder); } ``` > **筆記** > 執行上述工作有兩個陣營：資料庫優先或程式碼優先。對於剛開始使用 EF Core 的人來說，資料庫優先是最好的路徑。要查看資料， [Spectre.Console](https://spectreconsole.net/)用於建立一個漂亮的表格。 ``` internal partial class Program { static async Task Main(string[] args) { await Setup(); var table = CreateTable(); await using (var context = new Context()) { var list = await context.BirthDays.ToListAsync(); foreach (var bd in list) { table.AddRow( bd.Id.ToString(), bd.FirstName, bd.LastName, bd.BirthDate.ToString(), bd.YearsOld.ToString()); } AnsiConsole.Write(table); } ExitPrompt(); } public static Table CreateTable() { var table = new Table() .AddColumn("[b]Id[/]") .AddColumn("[b]First[/]") .AddColumn("[b]Last[/]") .AddColumn("[b]Birth date[/]") .AddColumn("[b]Age[/]") .Alignment(Justify.Left) .BorderColor(Color.LightSlateGrey); return table; } } ``` ![上述程式碼的截圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i60dye7au7fve08y1wfu.png) 為了獲取我們的資料，一行程式碼用於實例化 EF Core，一行程式碼用於讀取資料。 EF Core 也非常適合關聯式資料庫，請參閱以下[儲存庫](https://github.com/karenpayneoregon/ef-code-8-samples)。有關記錄 EF Core 產生的 SQL，請參閱下列[專案](https://github.com/karenpayneoregon/ef-code-8-samples/tree/master/DualContextsApp)，該專案也展示如何使用兩個不同的 SQL-Server 實例。 ### 短小精悍的版本 {% cta https://github.com/karenpayneoregon/sql-basics/tree/master/DapperBirthdaysCompulatedColumns %} 範例專案 {% endcta %} 與 EF Core 不同，使用 Dapper，開發人員在 SSMS 中編寫 SQL 語句並將有效語句新增到程式碼中。有關 Dapper 的更多訊息，請參閱我的[系列](https://dev.to/karenpayneoregon/series/25270)。這裡 SQL 儲存在唯讀字串中，替代方法是將 SQL（或任何語句）儲存在預存程序中。 ![學習編寫正確的 SQL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyn1awyunv0pvbhtgzy1.png) ``` internal class SqlStatements { public static string GetBirthdays => """ SELECT Id ,FirstName ,LastName ,BirthDate ,YearsOld FROM BirthDaysDatabase.dbo.BirthDays """; } ``` 讀取資料的程式碼。 ``` internal class DapperOperations { private IDbConnection _cn; public DapperOperations() { _cn = new SqlConnection(DataConnections.Instance.MainConnection); SqlMapper.AddTypeHandler(new SqlDateOnlyTypeHandler()); SqlMapper.AddTypeHandler(new SqlTimeOnlyTypeHandler()); } public async Task<List<BirthDays>> GetBirthdaysAsync() { return (await _cn.QueryAsync<BirthDays>(SqlStatements.GetBirthdays)).AsList(); } } ``` 在類別構造函數中 1. 使用[Microsoft.Data.SqlClient](https://www.nuget.org/packages/Microsoft.Data.SqlClient/5.2.1?_src=template) NuGet 套件建立連線。 1. 使用[kp.Dapper.Handlers](https://www.nuget.org/packages/kp.Dapper.Handlers/1.0.0?_src=template) NuGet 套件為 Dapper 新增理解 DateOnly 類型的功能。讀取資料是一個單行資料，表示我們需要非同步生日列表。 ``` public async Task<List<BirthDays>> GetBirthdaysAsync() { return (await _cn.QueryAsync<BirthDays>(SqlStatements.GetBirthdays)).AsList(); } ``` 回到 Program.cs，除了建立 Dapper 類別的實例並呼叫方法之外，程式碼與 EF Core 相同。 ``` internal partial class Program { static async Task Main(string[] args) { await Setup(); var table = CreateTable(); var operations = new DapperOperations(); var list = await operations.GetBirthdaysAsync(); foreach (var bd in list) { table.AddRow( bd.Id.ToString(), bd.FirstName, bd.LastName, bd.BirthDate.ToString(), bd.YearsOld.ToString()); } AnsiConsole.Write(table); ExitPrompt(); } public static Table CreateTable() { var table = new Table() .AddColumn("[b]Id[/]") .AddColumn("[b]First[/]") .AddColumn("[b]Last[/]") .AddColumn("[b]Birth date[/]") .AddColumn("[b]Age[/]") .Alignment(Justify.Left) .BorderColor(Color.LightSlateGrey); return table; } } ``` ### 計算列的摘要並未詳細介紹程式碼的每個方面，這意味著在專案中採用技術之前需要花時間剖析程式碼以及使用了哪些 NuGet 套件。也可以考慮透過[Visual Studio 偵錯器](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-debugger?view=vs-2022)執行程式碼。偵錯是許多新手開發人員忽略的事情，也是 Visual Studio 的最佳功能之一。學習如何除錯並不需要花費大量時間。第 2 課 - 重構程式碼 ------------- 許多人認為編碼的主要任務是讓程式碼正常工作，然後返回並重構程式碼。從個人經驗來看，這種情況一般不會發生。這就是開發人員需要在工作專案之外磨練技能的原因。 ![從未停止學習](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ju4889uewhkpfrfmp0w5.png) ### 實施例1 開發人員被要求將字串拆分為大寫字符，並將字串放在前面。例如，給定 ThisIsATest，輸出將是 This Is A Test。開發者在網路上搜尋並找到以下內容。 ``` public static class StringExtensions { private static readonly Regex CamelCaseRegex = new(@"([A-Z][a-z]+)"); /// <summary> /// KarenPayne => Karen Payne /// </summary> [DebuggerStepThrough] public static string SplitCamelCase(this string sender) => string.Join(" ", CamelCaseRegex.Matches(sender) .Select(m => m.Value)); } ``` 這是可行的，但有一個更好的版本，在下面的範例中是由GitHub Copilot 編寫的，並且是第二次迭代，這意味著第一次copilot 被問到時，它提供了一個未經優化的解決方案，因為問題是如何提出的。 ``` [DebuggerStepThrough] public static string SplitCamelCase(this string input) { if (string.IsNullOrEmpty(input)) { return input; } Span<char> result = stackalloc char[input.Length * 2]; var resultIndex = 0; for (var index = 0; index < input.Length; index++) { var currentChar = input[index]; if (index > 0 && char.IsUpper(currentChar)) { result[resultIndex++] = ' '; } result[resultIndex++] = currentChar; } return result[..resultIndex].ToString(); } ``` ![更少的程式碼並不總是最好的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8u0zjrr2qjgot6tmav8.png) 等一下，第二個版本的程式碼多了很多，這個版本怎麼會更好呢？新手和經驗豐富的開發人員都有一種心態，就是程式碼行數越少越好，也許是為了提高可讀性。當然，開發人員應該始終努力編寫可讀的程式碼，但多行程式碼也可以輕鬆閱讀。如何編寫可讀的程式碼。 - 使用有意義的變數名稱，例如在 for 語句中使用索引而不是 i 或使用firstName 而不是fName。 - 折疊程式碼而不是一行，如下所示 ``` public static class CheckedListBoxExtensions { public static List<T> CheckedList<T>(this CheckedListBox sender) => sender.Items.Cast<T>() .Where((_, index) => sender.GetItemChecked(index)) .Select(item => item) .ToList(); } ``` 而不是 ``` public static class CheckedListBoxExtensions { public static List<T> CheckedList<T>(this CheckedListBox sender) => sender.Items.Cast<T>().Where((_, index) => sender.GetItemChecked(index)).Select(item => item).ToList(); } ``` 下一步 --- 這裡有一些想法，即使是許多經驗豐富的開發人員也會避免，而不是你！ - [泛型](https://learn.microsoft.com/en-us/dotnet/csharp/fundamentals/types/generics) - [介面](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/keywords/interface) - 建立公共庫 - [JSON 序列化與反序列化](https://learn.microsoft.com/en-us/dotnet/standard/serialization/system-text-json/overview) 概括 -- 這些是成為更好的開發人員的更多技巧中的一些。實現這一目標的唯一方法是在專案之外不斷學習。如果您的老闆或團隊領導者沒有提供時間來學習新技能，您可以每週花一兩個小時來學習和成長。 --- 原文出處：https://dev.to/karenpayneoregon/push-your-skills-2pho

0個讚 0留言 29瀏覽

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

編寫 SOLID React Hooks

SOLID 是較常用的設計模式之一。它在許多語言和框架中都很常用，也有一些文章介紹如何在 React 中使用它。每篇關於 SOLID 的 React 文章都以稍微不同的方式介紹該模型，有些將其應用於元件，有些將其應用於 TypeScript，但很少有人將這些原理應用於鉤子。由於 hooks 是 React 基礎的一部分，我們將在這裡看看 SOLID 原則如何應用於這些。單一職責原則（SRP） ----------- Solid 中的第一個字母 S 是最容易理解的。本質上，它的意思是，讓一個鉤子/元件做一件事。 ``` // Single Responsibility Principle ``` ``` A module should be responsible to one, and only one, actor ``` 例如，看看下面的 useUser 鉤子，它會取得使用者和待辦事項，並將任務合併到使用者物件中。 ``` import { useState } from 'react' import { getUser, getTodoTasks } from 'somewhere' const useUser = () => { const [user, setUser] = useState() const [todoTasks, setTodoTasks] = useState() useEffect(() => { const userInfo = getUser() setUser(userInfo) }, []) useEffect(() => { const tasks = getTodoTasks() setTodoTasks(tasks) }, []) return { ...user, todoTasks } } ``` 這個鉤子並不牢固，它不遵守單一責任原則。這是因為它有責任獲取用戶資料和待辦任務，這是兩件事。相反，上面的程式碼應該分為兩個不同的鉤子，一個用於獲取有關用戶的資料，另一個用於獲取任務。 ``` import { useState } from 'react' import { getUser, getTodoTasks } from 'somewhere' // useUser hook is no longer responsible for the todo tasks. const useUser = () => { const [user, setUser] = useState() useEffect(() => { const userInfo = getUser() setUser(userInfo) }, []) return { user } } // Todo tasks do now have their own hook. // The hook should actually be in its own file as well. Only one hook per file! const useTodoTasks = () => { const [todoTasks, setTodoTasks] = useState() useEffect(() => { const tasks = getTodoTasks() setTodoTasks(tasks) }, []) return { todoTasks } } ``` 這個原則適用於所有的鉤子和元件，它們都應該只做一件事。要問自己的事情是： 1. 這是一個應該顯示 UI（演示性）或處理資料（邏輯性）的元件嗎？ 1. 這個鉤子應該處理什麼單一類型的資料？ 1. 這個鉤子/元件屬於哪一層？它是處理資料儲存還是 UI 的一部分？如果您發現自己建造的鉤子對上述每個問題都沒有單一答案，那麼您就違反了單一責任原則。這裡值得注意的一件有趣的事情是第一個問題。這實際上意味著渲染 UI 的元件不應該處理資料。這意味著，要真正嚴格遵循這項原則，每個顯示資料的 React 元件都應該有一個鉤子來處理其邏輯和資料。換句話說，不應在顯示資料的相同元件中取得資料。 ### 為什麼在 React 中使用 SRP？這種單一責任原則其實非常適合 React。 React 遵循基於元件的架構，這意味著它由組合在一起的小元件組成，因此它們一起可以建構並形成一個應用程式。元件越小，可重複使用的可能性就越大。這適用於元件和鉤子。因此，React 或多或少是建立在單一職責原則上的。如果你不遵循它，你會發現自己總是在編寫新的鉤子和元件，並且很少重複使用它們中的任何一個。違反單一責任原則將使您的程式碼難以測試。如果不遵循這個原則，您經常會發現您的測試文件有數百行，甚至可能多達 1000 行程式碼。 {% 嵌入 https://dev.to/perssondennis/how-to-use-mvvm-in-react-using-hooks-and-typescript-3o4m %} 開閉原理 (OCP) ---------- 讓我們繼續遵循開閉原則，畢竟這是 SOLID 中的下一個字母。 OCP 和 SRP 一樣是較容易理解的原則之一，至少其定義是如此。 ``` // Open/Closed Principle ``` ``` Software entities (classes, modules, functions, etc.) should ``` ``` be open for extension, but closed for modification ``` 對於最近開始使用 React 的傻瓜來說，這句話可以翻譯為： ``` Write hooks/component which you never will have a reason to ``` ``` touch again, only re-use them in other hooks/components ``` 回想一下本文前面所說的單一責任原則；在 React 中，您需要編寫小元件並將它們組合在一起。讓我們看看為什麼這有幫助。 ``` import { useState } from 'react' import { getUser, updateUser } from 'somewhere' const useUser = ({ userType }) => { const [user, setUser] = useState() useEffect(() => { const userInfo = getUser() setUser(userInfo) }, []) const updateEmail = (newEmail) => { if (user && userType === 'admin') { updateUser({ ...user, email: newEmail }) } else { console.error('Cannot update email') } } return { user, updateEmail } } ``` 上面的鉤子獲取用戶並返回它。如果使用者的類型是管理員，則允許該使用者更新其電子郵件。普通使用者不允許更新其電子郵件。上面的程式碼絕對不會讓你被解僱。但這會惹惱你團隊中的後端人員，他會為他的孩子閱讀設計模式書籍作為睡前故事。我們就叫他皮特吧。皮特會抱怨什麼？他會要求你重寫該元件，如下所示。將管理功能提升到它自己的 useAdmin 掛鉤，並讓 useUser 掛鉤除了那些應該可供普通用戶使用的功能之外沒有其他功能。 ``` import { useState } from 'react' import { getUser, updateUser } from 'somewhere' // useUser does now only return the user, // without any function to update its email. const useUser = () => { const [user, setUser] = useState() useEffect(() => { const userInfo = getUser() setUser(userInfo) }, []) return { user } } // A new hook, useAdmin, extends useUser hook, // with the additional feature to update its email. const useAdmin = () => { const { user } = useUser() const updateEmail = (newEmail) => { if (user) { updateUser({ ...user, email: newEmail }) } else { console.error('Cannot update email') } } return { user, updateEmail } } ``` 皮特為什麼要求更新？因為那個無禮挑剔的混蛋皮特寧願希望你現在花時間重寫那個鉤子，然後明天回來進行新的程式碼審查，而不是將來可能需要用一個微小的新 if 語句更新程式碼，如果有的話成為另一種類型的使用者。好吧，這是消極的說法...樂觀的說法是，使用這個新的useAdmin 掛鉤，當您打算實現僅影響管理員用戶的功能時，或者當您打算實現僅影響管理員用戶的功能時，您不必更改useUser 掛鉤中的任何內容。當新增新的使用者類型或更新 useAdmin 掛鉤時，無需弄亂 useUser 掛鉤或更新其任何測試。這意味著，當您新增的使用者類型（例如假使用者）時，您不必意外地將錯誤傳送給普通使用者。相反，您只需加入一個新的 userFakeUser 鉤子，您的老闆就不會在周五晚上 9 點給您打電話，因為客戶在發薪週末會遇到銀行帳戶顯示虛假資料的問題。 ![床下的前端開發人員](https://www.perssondennis.com/images/articles/write-solid-react-hooks/frontend-developer-under-the-bed.webp) *皮特的兒子知道要小心義大利麵式程式碼開發人員* ### 為什麼在 React 中使用 OCP？一個 React 專案應該有多少個 hooks 和元件是有爭議的。每一個都需要渲染效果圖的代價。 React 不是 Java，其中 22 種設計模式導致 422 個類別用於簡單的 TODO 清單實作。這就是狂野西部網絡 (www) 的魅力所在。然而，開放/封閉原則顯然也是在 React 中使用的少數模式。上面的鉤子範例是最小的，鉤子沒有做太多事情。隨著更多實質的掛鉤和更大的專案，這項原則變得非常重要。這可能會花費您一些額外的鉤子，並且需要稍長的時間來實現，但是您的鉤子將變得更加可擴展，這意味著您可以更頻繁地重複使用它們。您將不必經常重寫測試，從而使掛鉤更加牢固。最重要的是，如果您從不接觸舊程式碼，則不會在舊程式碼中產生錯誤。 ![沒有破損的東西不要碰](https://www.perssondennis.com/images/articles/write-solid-react-hooks/dont-touch-what-is-not-broken.webp) *天知道不要碰沒有破損的東西* {% 嵌入 https://dev.to/perssondennis/react-anti-patterns-and-best-practices-dos-and-donts-3c2g %} 里氏替換原理 (LSP) ------------ 啊啊，這個名字……誰是利斯科夫？而誰來代替她呢？而這個定義，難道就沒有意義嗎？ ``` If S subtypes T, what holds for T holds for S ``` 這個原則顯然是關於繼承的，在 React 或 JavaScript 中，繼承的實踐並不像大多數後端語言中那麼多。 JavaScript 在 ES6 之前甚至沒有類，ES6 是[在 2015/2016 年左右引入的，](https://caniuse.com/?search=class)作為基於原型的繼承的語法糖。考慮到這一點，該原則的用例實際上取決於您的程式碼的外觀。類似 Liskov 的原則在 React 中有意義，可能是： ``` If a hook/component accepts some props, all hooks and components ``` ``` which extends that hook/component must accept all the props the ``` ``` hook/component it extends accepts. The same goes for return values. ``` 為了說明這一點，我們可以看一下兩個儲存鉤子：useLocalStorage 和 useLocalAndRemoteStorage。 ``` import { useState } from 'react' import { getFromLocalStorage, saveToLocalStorage, getFromRemoteStorage } from 'somewhere' // useLocalStorage gets data from local storage. // When new data is stored, it calls saveToStorage callback. const useLocalStorage = ({ onDataSaved }) => { const [data, setData] = useState() useEffect(() => { const storageData = getFromLocalStorage() setData(storageData) }, []) const saveToStorage = (newData) => { saveToLocalStorage(newData) onDataSaved(newData) } return { data, saveToStorage } } // useLocalAndRemoteStorage gets data from local and remote storage. // I doesn't have callback to trigger when data is stored. const useLocalAndRemoteStorage = () => { const [localData, setLocalData] = useState() const [remoteData, setRemoteData] = useState() useEffect(() => { const storageData = getFromLocalStorage() setLocalData(storageData) }, []) useEffect(() => { const storageData = getFromRemoteStorage() setRemoteData(storageData) }, []) const saveToStorage = (newData) => { saveToLocalStorage(newData) } return { localData, remoteData, saveToStorage } } ``` 透過上面的鉤子，useLocalAndRemoteStorage 可以被視為 useLocalStorage 的子類型，因為它與 useLocalStorage 執行相同的操作（保存到本地存儲），而且還通過將資料保存到其他位置來擴展 useLocalStorage 的功能。這兩個鉤子有一些共享的屬性和回傳值，但是 useLocalAndRemoteStorage 缺少 useLocalStorage 接受的 onDataSaved 回呼屬性。傳回屬性的名稱也有不同的命名，本地資料在useLocalStorage中命名為data，而在useLocalAndRemoteStorage中命名為localData。如果你問利斯科夫，這就違背了她的原則。實際上，當她嘗試更新Web 應用程式以在伺服器端保留資料時，她會非常憤怒，只是意識到她不能簡單地用useLocalAndRemoteStorage 鉤子替換useLocalStorage，只是因為一些懶惰的開發人員從未為useLocalAndRemoteStorage 鉤子實現onDataSaved回調。利斯科夫會痛苦地更新鉤子來支持這一點。同時，她也會更新 useLocalStorage 掛鉤中的本地資料名稱，以符合 useLocalAndRemoteStorage 中的本地資料名稱。 ``` import { useState } from 'react' import { getFromLocalStorage, saveToLocalStorage, getFromRemoteStorage } from 'somewhere' // Liskov has renamed data state variable to localData // to match the interface (variable name) of useLocalAndRemoteStorage. const useLocalStorage = ({ onDataSaved }) => { const [localData, setLocalData] = useState() useEffect(() => { const storageData = getFromLocalStorage() setLocalData(storageData) }, []) const saveToStorage = (newData) => { saveToLocalStorage(newData) onDataSaved(newData) } // This hook does now return "localData" instead of "data". return { localData, saveToStorage } } // Liskov also added onDataSaved callback to this hook, // to match the props interface of useLocalStorage. const useLocalAndRemoteStorage = ({ onDataSaved }) => { const [localData, setLocalData] = useState() const [remoteData, setRemoteData] = useState() useEffect(() => { const storageData = getFromLocalStorage() setLocalData(storageData) }, []) useEffect(() => { const storageData = getFromRemoteStorage() setRemoteData(storageData) }, []) const saveToStorage = (newData) => { saveToLocalStorage(newData) onDataSaved(newData) } return { localData, remoteData, saveToStorage } } ``` 透過為鉤子提供通用介面（傳入的 props、傳出的返回值），它們可以變得非常容易交換。如果我們遵循里氏替換原則，繼承另一個鉤子/元件的鉤子和元件應該可以用它繼承的鉤子或元件替換。 ![擔心的利斯科夫](https://www.perssondennis.com/images/articles/write-solid-react-hooks/worried-liskov.webp) *當開發人員不遵循她的原則時，利斯科夫感到失望* ### 為什麼在 React 中使用 LSP？儘管繼承在 React 中並不是很突出，但它肯定在幕後使用。 Web 應用程式通常可以有幾個外觀相似的元件。文字、標題、連結、圖示連結等都是類似類型的元件，可以從繼承中受益。 IconLink 元件可能會也可能不會包裝 Link 元件。無論哪種方式，它們都會受益於使用相同的介面（使用相同的 props）實作。這樣，您可以隨時在應用程式中的任何位置將 Link 元件替換為 IconLink 元件，而無需編輯任何其他程式碼。鉤子也是如此。 Web 應用程式從伺服器取得資料。他們也可能使用本地儲存或狀態管理系統。這些最好可以共享道具以使它們可以互換。應用程式可能會從後端伺服器取得使用者、任務、產品或任何其他資料。類似的函數也可以共享接口，從而更容易重複使用程式碼和測試。 {% 嵌入 https://dev.to/perssondennis/the-20-most-common-use-cases-for-javascript-arrays-2j8j %} 介面隔離原則（ISP） ----------- 另一個更明確的原則是介面隔離原則。定義很短。 ``` No code should be forced to depend on methods it does not use ``` 顧名思義，它與介面有關，基本上意味著函數和類別應該只實現它明確使用的介面。最容易實現這一點的方法是保持介面整潔，讓類別選擇其中的一些來實現，而不是被迫用它不關心的幾種方法來實現一個大介面。例如，代表擁有網站的人的類別應該實現兩個接口，一個稱為 Person 的接口，描述有關此人的詳細訊息，另一個用於網站的接口，其中包含有關其擁有的網站的元資料。 ``` interface Person { firstname: string familyName: string age: number } interface Website { domain: string type: string } ``` 如果相反，建立一個單一介面網站，包括有關所有者和網站的訊息，則將違反介面隔離原則。 ``` interface Website { ownerFirstname: string ownerFamilyName: number domain: string type: string } ``` 你可能會想，上面的介面有什麼問題嗎？它的問題是它使介面不太可用。想想看，如果公司不是人，而是公司，你會怎麼做？公司其實沒有姓氏。然後您會修改介面以使其對人類和公司都可用嗎？或者您會建立一個新介面 CompanyOwnedWebsite 嗎？然後，您最終會得到一個具有許多可選屬性的接口，或分別稱為 PersonWebsite 和 CompanyWebsite 的兩個接口。這些解決方案都不是最佳的。 ``` // Alternative 1 // This interface has the problem that it includes // optional attributes, even though the attributes // are mandatory for some consumers of the interface. interface Website { companyName?: string ownerFirstname?: string ownerFamilyName?: number domain: string type: string } // Alternative 2 // This is the original Website interface renamed for a person. // Which means, we had to update old code and tests and // potentially introduce some bugs. interface PersonWebsite { ownerFirstname: string ownerFamilyName: number domain: string type: string } // This is a new interface to work for a company. interface CompanyOwnedWebsite { companyName: string domain: string type: string } ``` ISP 遵循的解決方案如下所示。 ``` interface Person { firstname: string familyName: string age: number } interface Company { companyName: string } interface Website { domain: string type: string } ``` 透過上述適當的接口，代表公司網站的類別可以實現接口 Company 和 Website，但不需要考慮 Person 接口中的 firstname 和 familyName 屬性。 ### React 中使用 ISP 嗎？所以，這個原則顯然適用於接口，這意味著它只應該在您使用 TypeScript 編寫 React 程式碼時才有意義，不是嗎？當然不是！不輸入介面並不意味著它們不存在。到處都有，只是你沒有明確地輸入它們。在 React 中，每個元件和鉤子都有兩個主要接口，輸入和輸出。 ``` // The input interface to a hook is its props. const useMyHook = ({ prop1, prop2 }) => { // ... // The output interface of a hook is its return values. return { value1, value2, callback1 } } ``` 使用 TypeScript，您通常會鍵入輸入接口，但輸出接口通常會被跳過，因為它是可選的。 ``` // Input interface. interface MyHookProps { prop1: string prop2: number } // Output interface. interface MyHookOutput { value1: string value2: number callback1: () => void } const useMyHook = ({ prop1, prop2 }: MyHookProps): MyHookOutput => { // ... return { value1, value2, callback1 } } ``` 如果鉤子不會將 prop2 用於任何用途，那麼它不應該成為其 props 的一部分。對於單一道具，可以輕鬆地將其從道具清單和介面中刪除。但是，如果 prop2 是物件類型，例如上一章不正確的 Website 介面範例，該怎麼辦？ ``` interface Website { companyName?: string ownerFirstname?: string ownerFamilyName?: number domain: string type: string } interface MyHookProps { prop1: string website: Website } const useMyCompanyWebsite = ({ prop1, website }: MyHookProps) => { // This hook uses domain, type and companyName, // but not ownerFirstname or ownerFamilyName. return { value1, value2, callback1 } } ``` 現在我們有一個 useMyCompanyWebsite 鉤子，它有一個 website 屬性。如果鉤子中使用了網站介面的部分內容，我們不能簡單地刪除整個網站道具。我們必須保留 website 屬性，因此也保留ownerFirstname 和ownerFamiliyName 的介面屬性。這也意味著，該針對公司的掛鉤可以由人類擁有的網站所有者使用，即使該掛鉤可能不適用於該用途。 ### 為什麼在 React 中使用 ISP？我們現在已經了解了 ISP 的含義，以及它如何應用於 React，即使不使用 TypeScript。透過查看上面的小例子，我們也看到了一些不遵循 ISP 的問題。在更複雜的專案中，可讀性是最重要的。介面隔離原則的目的之一是避免混亂，避免不必要的程式碼的存在，這些程式碼只會破壞可讀性。不要忘記可測試性。您是否應該關心您實際未使用的道具的測試覆蓋率？實現大型介面也迫使您將 props 設定為可選。導致更多的 if 語句來檢查函數的存在和潛在的誤用，因為在介面上顯示該函數將處理此類屬性。 {% 嵌入 https://dev.to/perssondennis/answers-to-common-nextjs-questions-1oki %} 依賴倒置原則（DIP） ----------- 最後一個原則，即 DIP，包括一些被廣泛誤解的術語。令人困惑的地方在於依賴反轉、依賴注入和控制反轉之間的差異。所以我們先聲明一下。 **依賴倒置** 依賴倒置原則（DIP）表示高階模組不應該從低階模組導入任何內容，兩者都應該依賴抽象。這意味著任何高階模組自然可能依賴它所使用的模組的實作細節，但不應該具有這種依賴性。高級模組和低階模組的編寫方式應使它們都可以在不了解其他模組內部實現的任何細節的情況下使用。只要介面保持不變，每個模組都應該可以用它的替代實作來替換。 **控制反轉** 控制反轉（IoC）是用來解決依賴反轉問題的原理。它指出模組的依賴關係應由外部實體或框架提供。這樣，模組本身只需使用依賴項，而不必建立依賴項或以任何方式管理它。 **依賴注入** 依賴注入（DI）是實現 IoC 的常見方法。它透過建構函數或 setter 方法注入模組來提供對模組的依賴關係。這樣，模組就可以使用依賴項而無需負責建立它，這符合 IoC 原則。值得一提的是，依賴注入並不是實現控制反轉的唯一方法。 ### React 中使用 DIP 嗎？澄清了這些術語，並知道 DIP 原則是關於依賴倒置的，我們可以再次看看這個定義是怎樣的。 ``` High-level modules should not import anything from low-level modules. ``` ``` Both should depend on abstractions ``` 這如何適用於 React？ React 不是一個通常與依賴注入相關的函式庫，那我們該如何解決依賴倒置的問題呢？這個問題最常見的解決方案是鉤子。鉤子不能算作依賴注入，因為它們被硬編碼到元件中，並且不可能在不更改元件實現的情況下用另一個鉤子替換鉤子。相同的鉤子將在那裡，使用相同的鉤子實例，直到開發人員更新程式碼。但請記住，依賴注入並不是實現依賴倒置的唯一方法。 Hooks 可以被視為 React 元件的外部依賴，它有一個介面（它的 props），可以抽像出 hook 中的程式碼。這樣，鉤子就實現了依賴倒置的原則，因為元件依賴抽象接口，而不需要知道有關鉤子的任何細節。 React 中 DIP 的另一個更直觀的實作（實際上使用依賴注入）是 HOC 和上下文的使用。請參閱下面的 withAuth HOC。 ``` const withAuth = (Component) => { return (props) => { const { user } = useContext(AuthContext) if (!user) { return <LoginComponent> } return <Component {...props} user={user} /> } } const Profile = () => { // Profile component... } // Use the withAuth HOC to inject user to Profile component. const ProfileWithAuth = withAuth(Profile) ``` 上面顯示的 withAuth HOC 使用依賴項注入為使用者提供 Profile 元件。這個範例的有趣之處在於，它不僅顯示了依賴注入的一種用法，而且實際上包含了兩個依賴注入。將使用者註入到設定檔元件並不是此範例中的唯一注入。 withAuth 鉤子實際上也透過 useContext 鉤子透過依賴注入來獲取使用者。在程式碼中的某個地方，有人聲明了一個將使用者註入上下文的提供者。該用戶實例甚至可以在執行時透過更新上下文中的用戶來更改。 ### 為什麼在 React 中使用 DIP？儘管依賴注入不是與 React 相關的常見模式，但它實際上與 HOC 和上下文相關。鉤子從 HOC 和上下文中佔據了大量市場份額，也很好地證實了依賴倒置原則。因此，DIP 已經內建到 React 庫本身中，當然應該使用。它既易於使用，又具有模組之間的鬆散耦合、鉤子和元件的可重複使用性和可測試性等優點。它也使得實現其他設計模式（例如單一職責原則）變得更加容易。我不鼓勵的是，當確實有更簡單的解決方案可用時，請嘗試實施智慧解決方案並過度使用該模式。我在網路和書籍中看到了使用 React 上下文的建議，其唯一目的是實現依賴注入。像下面這樣的東西。 ``` const User = () => { const { role } = useContext(RoleContext) return <div>{`User has role ${role}`}</div> } const AdminUser = ({ children }) => { return ( <RoleContext.Provider value={{ role: 'admin' }}> {children} </RoleContext.Provider> ) } const NormalUser = ({ children }) => { return ( <RoleContext.Provider value={{ role: 'normal' }}> {children} </RoleContext.Provider> ) } ``` 儘管上面的範例確實將角色注入到 User 元件中，但為其使用上下文純粹是矯枉過正。當上下文本身有其用途時，應該在適當的時候使用 React 上下文。在這種情況下，一個簡單的道具可能是更好的解決方案。 ``` const User = ({ role }) => { return <div>{`User has role ${role}`}</div> } const AdminUser = () => <User role='admin' /> const NormalUser = () => <User role='normal' /> ``` {% cta https://2e015922.sibforms.com/serve/MUIFAGF3ypa0p6D6nTWI0MHVOIAC7q4TIJd0yXAhiBC9CswkNPnOlQBzeqSbR2XFM95gUn2G1IxWwCpDpDjkjk aaG9tz9UYhn\_O\_dWg1PPGS8kRM5ROREaJsslnGD8WEHszzZr0geJ9-g7lGsbn\_hTT-wZSKWa1C8ay4Ok85ozro %}訂閱我的文章{% endcta %} {% 嵌入 https://dev.to/perssondennis %} --- 原文出處：https://dev.to/perssondennis/write-solid-react-hooks-436o

0個讚 0留言 25瀏覽

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

進階 SQL：掌握查詢最佳化和複雜連接

大家好，願神的平安、憐憫、祝福臨到你們 SQL（結構化查詢語言）是管理和操作關係資料庫的重要工具。雖然基本的 SQL 技能可以幫助您入門，但高級 SQL 技術可以大大增強您處理複雜查詢和優化資料庫效能的能力。本文深入探討高階 SQL 主題，重點在於複雜的查詢最佳化策略、高階聯結類型以及`SELECT`語句的複雜性。 ### 進階查詢最佳化技術最佳化 SQL 查詢是資料庫管理員和開發人員的關鍵技能。進階查詢最佳化超越了基本索引和查詢重構，還包括一系列複雜的技術。 #### 1. 查詢執行計劃了解查詢的執行計劃對於最佳化至關重要。執行計劃顯示 SQL 引擎如何執行查詢，揭示潛在的瓶頸。 - **EXPLAIN** ： `EXPLAIN`語句提供對查詢執行方式的深入了解，使您能夠辨識效率低下的情況。 ``` EXPLAIN SELECT column1, column2 FROM table_name WHERE condition; ``` - **ANALYZE** ： `ANALYZE`語句與`EXPLAIN`結合使用，執行查詢並提供執行時統計訊息，從而更深入地了解查詢性能。 ``` EXPLAIN ANALYZE SELECT column1, column2 FROM table_name WHERE condition; ``` #### 2. 子查詢最佳化子查詢有時可以替換為更有效率的聯結或`WITH`子句（通用表表達式）。 - **用連接替換子查詢**： ``` -- Subquery SELECT * FROM table1 WHERE column1 IN (SELECT column1 FROM table2); -- Equivalent Join SELECT table1.* FROM table1 INNER JOIN table2 ON table1.column1 = table2.column1; ``` - **使用通用表格表達式 (CTE)** ： ``` WITH CTE AS ( SELECT column1, column2 FROM table_name WHERE condition ) SELECT * FROM CTE WHERE another_condition; ``` #### 3. 索引策略進階索引策略包括使用複合索引和覆蓋索引。 - **複合索引**：包含多個欄位的索引可以加快對這些欄位進行篩選的查詢速度。 ``` CREATE INDEX idx_composite ON table_name (column1, column2); ``` - **覆蓋索引**：包含查詢檢索到的所有列的索引可以顯著提高效能。 ``` CREATE INDEX idx_covering ON table_name (column1, column2, column3); ``` #### 4. 分區將大表劃分為更小、更易於管理的部分可以透過限制掃描的資料量來提高查詢效能。 - **範圍劃分**： ``` CREATE TABLE orders ( order_id INT, order_date DATE, ... ) PARTITION BY RANGE (order_date) ( PARTITION p0 VALUES LESS THAN ('2024-01-01'), PARTITION p1 VALUES LESS THAN ('2025-01-01'), ... ); ``` - **哈希分區**：根據雜湊函數將資料分佈在指定數量的分區上，提供均勻分佈。 ``` CREATE TABLE users ( user_id INT, username VARCHAR(255), ... ) PARTITION BY HASH(user_id) PARTITIONS 4; ``` - **清單分區**：根據值清單將資料劃分為多個分區。 ``` CREATE TABLE sales ( sale_id INT, region VARCHAR(255), ... ) PARTITION BY LIST (region) ( PARTITION p0 VALUES IN ('North', 'South'), PARTITION p1 VALUES IN ('East', 'West') ); ``` #### 5. 物化視圖物化視圖實體儲存查詢結果，並且可以定期刷新，從而提高頻繁執行的複雜查詢的效能。 - **建立物化視圖**： ``` CREATE MATERIALIZED VIEW sales_summary AS SELECT region, SUM(sales_amount) AS total_sales FROM sales GROUP BY region; ``` - **刷新物化視圖**： ``` REFRESH MATERIALIZED VIEW sales_summary; ``` 筆記： --- 在 MySQL 中，存在視圖，但物化視圖本身並不存在。 MySQL支援標準視圖，這些視圖是儲存查詢定義並在查詢時動態產生結果集的虛擬表。但是，它沒有對物化視圖的內建支持，物化視圖物理儲存結果集。 ### MySQL 中的視圖 #### 建立視圖您可以使用`CREATE VIEW`語句在 MySQL 中建立視圖。這是一個例子： ``` CREATE VIEW ActiveCustomers AS SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active'; ``` 這將建立一個名為`ActiveCustomers`的視圖，其中僅包含`Customers`表中的活動客戶。查詢此視圖如下所示： ``` SELECT * FROM ActiveCustomers; ``` #### 更新視圖可以使用`CREATE OR REPLACE VIEW`語句更新檢視： ``` CREATE OR REPLACE VIEW ActiveCustomers AS SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active' AND Country = 'USA'; ``` 這會將`ActiveCustomers`檢視修改為僅包含來自美國的活躍客戶。 #### 刪除視圖您可以使用`DROP VIEW`語句刪除檢視： ``` DROP VIEW ActiveCustomers; ``` #### MySQL 中的物化視圖 MySQL 本身不支援物化視圖，但有一些變通方法可以實現類似的功能。這裡有幾種方法： ##### 1. 使用表格和計劃更新一種常見的方法是建立一個表來儲存查詢結果並使用計劃事件（cron 作業）或觸發器定期更新它。 ##### 建立表首先，建立一個表格來儲存結果： ``` CREATE TABLE MaterializedActiveCustomers AS SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active'; ``` ##### 更新表格使用計劃事件定期更新表。此範例使用 MySQL 事件每小時更新一次表格： ``` CREATE EVENT UpdateMaterializedActiveCustomers ON SCHEDULE EVERY 1 HOUR DO BEGIN DELETE FROM MaterializedActiveCustomers; INSERT INTO MaterializedActiveCustomers SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active'; END; ``` 此事件每小時都會清除`MaterializedActiveCustomers`表並使用最新的活躍客戶重新填充。 ##### 2. 使用觸發器另一種方法是使用觸發器使表與基底表保持同步。然而，這可能會變得複雜，對於大型資料集可能效率不高。 #### 使用觸發器的範例 ##### 建立表首先，建立表： ``` CREATE TABLE MaterializedActiveCustomers AS SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active'; ``` ##### 建立觸發器建立觸發器以保持物化表更新： ``` DELIMITER // CREATE TRIGGER after_customer_insert AFTER INSERT ON Customers FOR EACH ROW BEGIN IF NEW.Status = 'Active' THEN INSERT INTO MaterializedActiveCustomers (CustomerID, CustomerName, ContactName, Country) VALUES (NEW.CustomerID, NEW.CustomerName, NEW.ContactName, NEW.Country); END IF; END // CREATE TRIGGER after_customer_update AFTER UPDATE ON Customers FOR EACH ROW BEGIN IF OLD.Status = 'Active' AND NEW.Status != 'Active' THEN DELETE FROM MaterializedActiveCustomers WHERE CustomerID = OLD.CustomerID; ELSEIF NEW.Status = 'Active' THEN REPLACE INTO MaterializedActiveCustomers (CustomerID, CustomerName, ContactName, Country) VALUES (NEW.CustomerID, NEW.CustomerName, NEW.ContactName, NEW.Country); END IF; END // CREATE TRIGGER after_customer_delete AFTER DELETE ON Customers FOR EACH ROW BEGIN DELETE FROM MaterializedActiveCustomers WHERE CustomerID = OLD.CustomerID; END // DELIMITER ; ``` 這些觸發器將確保`MaterializedActiveCustomers`表隨著`Customers`表的變更而保持更新。 #### 結論雖然 MySQL 支援視圖，但它本身不支援物化視圖。但是，您可以使用具有計劃更新或觸發器的表來實現類似的功能。透過使用這些解決方法，您可以維護可以快速查詢的預先計算的結果，類似於其他資料庫系統中的物化視圖。 ### 高級連接類型和技術連接是 SQL 的基礎，它允許您組合多個表中的資料。除了基本連接之外，高級連接技術還可以處理更複雜的需求。 #### 1. 自加入自連接是一種常規連接，但表與自身連接。它對於比較同一表中的行很有用。 ``` SELECT a.employee_id, a.name, b.name AS manager_name FROM employees a INNER JOIN employees b ON a.manager_id = b.employee_id; ``` #### 2. 橫向連接 `LATERAL`連線允許子查詢在`FROM`子句中引用前面表格中的欄位。這對於更複雜的查詢很有用。 ``` SELECT a.*, b.* FROM table1 a LEFT JOIN LATERAL ( SELECT * FROM table2 b WHERE b.column1 = a.column1 ORDER BY b.column2 DESC LIMIT 1 ) b ON TRUE; ``` #### 3. 使用 COALESCE 進行完全外部連接處理需要完整外連接但希望避免結果中出現`NULL`值的情況。 ``` SELECT COALESCE(a.column1, b.column1) AS column1, a.column2, b.column2 FROM table1 a FULL OUTER JOIN table2 b ON a.column1 = b.column1; ``` #### 4. 進階連接過濾器在連接中應用複雜的條件以更精確地過濾結果。 ``` SELECT a.column1, b.column2 FROM table1 a INNER JOIN table2 b ON a.column1 = b.column1 AND a.date_column BETWEEN '2023-01-01' AND '2023-12-31'; ``` #### 5. 反連接和半連接這些連接分別對於排除和包含查詢很有用。 - **反連接**：從左表中檢索右表中沒有匹配行的行。 ``` SELECT a.* FROM table1 a LEFT JOIN table2 b ON a.column1 = b.column1 WHERE b.column1 IS NULL; ``` - **半連接**：從左表中檢索右表中存在一個或多個匹配項的行。 ``` SELECT a.* FROM table1 a WHERE EXISTS (SELECT 1 FROM table2 b WHERE a.column1 = b.column1); ``` ### 高級`SELECT`語句 `SELECT`語句可以透過進階功能進行擴展，以滿足複雜的資料檢索要求。 #### 1. 視窗函數視窗函數對與目前行相關的一組表行執行計算，提供強大的分析功能。 - **行號**： ``` SELECT column1, column2, ROW_NUMBER() OVER (PARTITION BY column1 ORDER BY column2) AS row_num FROM table_name; ``` - **執行總計**： ``` SELECT column1, column2, SUM(column2) OVER (ORDER BY column1) AS running_total FROM table_name; ``` - **排行**： ``` SELECT column1, column2, RANK() OVER (PARTITION BY column1 ORDER BY column2) AS rank FROM table_name; ``` - **移動平均線**： ``` SELECT column1, column2, AVG(column2) OVER (PARTITION BY column1 ORDER BY column2 ROWS BETWEEN 1 PRECEDING AND 1 FOLLOWING) AS moving_avg FROM table_name; ``` #### 2. 遞迴 CTE 遞歸 CTE 可讓您執行遞歸查詢，這對於分層資料很有用。 ``` WITH RECURSIVE cte AS ( SELECT column1, column2 FROM table_name WHERE condition UNION ALL SELECT t.column1, t.column2 FROM table_name t INNER JOIN cte ON t.column1 = cte.column1 ) SELECT * FROM cte; ``` #### 3.JSON函數現代 SQL 資料庫通常包含處理 JSON 資料的函數，可讓您儲存和查詢 JSON 文件。 - **提取 JSON 值**： ``` SELECT json_column->>'key' AS value FROM table_name; ``` - **聚合成 JSON** ： ``` SELECT json_agg(row_to_json(t)) FROM (SELECT column1, column2 FROM table_name) t; ``` - **更新 JSON 資料**： ``` UPDATE table_name SET json_column = jsonb_set(json_column, '{key}', '"new_value"', true) WHERE condition; ``` #### 4. 資料透視透視將行轉換為列，提供了一種重新組織和匯總資料以用於報告目的的方法。 - **使用 CASE 語句進行透視**： ``` SELECT category, SUM(CASE WHEN year = 2021 THEN sales ELSE 0 END) AS sales_2021, SUM(CASE WHEN year = 2022 THEN sales ELSE 0 END) AS sales_2022 FROM sales_data GROUP BY category; ``` #### 5.動態SQL 動態 SQL 允許在執行時間建立和執行 SQL 語句，為需要動態產生的複雜查詢提供靈活性。 - **執行動態SQL** ： ``` EXECUTE 'SELECT * FROM ' || table_name || ' WHERE ' || condition; ``` - **使用準備好的語句**： ``` PREPARE stmt AS SELECT * FROM table_name WHERE column1 = $1; EXECUTE stmt('value'); ``` ### 結論掌握進階 SQL 技術可以讓您最佳化資料庫效能並輕鬆處理複雜查詢。了解執行計劃、利用高階聯結、利用複雜的`SELECT`語句、實作進階索引策略是精通 SQL 的關鍵。透過將這些技術整合到您的工作流程中，您可以顯著提高資料庫驅動應用程式的效率和可擴展性。進階 SQL 技能可讓您處理複雜的資料操作和檢索任務，確保您的應用程式能夠有效率且有效地處理大量資料。無論您是資料庫管理員、開發人員還是資料分析師，這些進階 SQL 技術都將使您能夠充分利用關聯式資料庫，從而獲得更好的效能、更深入的見解和更強大的應用程式。 --- 原文出處：https://dev.to/bilelsalemdev/advanced-sql-mastering-query-optimization-and-complex-joins-4gph

0個讚 0留言 71瀏覽

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

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

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

0個讚 0留言 140瀏覽

小編精選 - 技術文章翻譯 · 05月31日

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

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

0個讚 0留言 48瀏覽

小編精選 - 技術文章翻譯 · 05月27日

用不到 40 行程式碼建立您自己的 React 狀態管理庫 - 並支援 TypeScript

你有沒有想過 React 狀態管理函式庫是如何建構的？從像 redux 這樣具有大量樣板和大包大小的解決方案，到像 zustand 或 jotai 這樣更輕、更簡單的庫。今天我們將建立我們自己的狀態管理庫，並看看幕後發生的魔法。了解 useSyncExternalStore ----------------------- React 18 引入了一個名為[useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore)的新鉤子，它允許 React 同步到任何外部儲存。 ``` useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?) ``` 以下是其參數的詳細說明： - **subscribe**接收一個回呼作為參數，並將該回調訂閱到外部 store，以便當 store 狀態改變時呼叫它，需要傳回一個取消訂閱函數。 - **getSnapshot**取得儲存的目前快照，該快照必須是快取值，因為 React 使用`Object.is(getSnapshot(), oldSnapshot)`在每次渲染上比較該值，每次提供新值將導致無限循環。 - **getServerSnapshot** （可選）允許我們在伺服器上渲染時返回快照，這在外部儲存或訂閱源無法在伺服器上執行或需要特定處理才能在伺服器上執行的某些情況下很有幫助。利用 useSyncExternalStore，我們可以根據我們的要求建立一個簡約的 store 。為什麼不直接使用 React Context？ ----------------------- [React Context](https://react.dev/learn/passing-data-deeply-with-context)是 React 中的一個功能，它允許元件將 props 傳遞到其下面的整個元件樹，這意味著它可以用作存儲，是一個可行的選擇。 React 上下文需要一些樣板： ``` const context = createContext(); const CountProvider = ({ children }) => { const [count, setCount] = useState(0); return <context.Provider value={{ count, setCount }}>{children}</context.Provider>; }; export function App() { return ( <CountProvider> <Outer /> <Other /> </CountProvider> ); } ``` 大量使用 Context 可能會導致“Context Hell”，其中大量上下文提供者嵌套在 App 元件中： ``` export function App() { return ( <CountProvider> <AuthProvider> <ThemeProvider> <CacheProvider> <IntlProvider> <TooltipProvider> <UserSettingsProvider> <NotificationProvider> <AnalyticsProvider> <Content /> </UserSettingsProvider> </NotificationProvider> </AnalyticsProvider> </TooltipProvider> </IntlProvider> </CacheProvider> </ThemeProvider> </AuthProvider> </CountProvider> ); } ``` 此外，使用上下文可能會無意中觸發整個元件樹的重新渲染，如下所示： ``` export function App() { const [count, setCount] = useState(0); return ( <context.Provider value={{ count, setCount }}> <Outer /> <Other /> </context.Provider> ); } ``` 從上下文的用戶使用 setCount 將導致整個應用程式的重新渲染（外部和其他都會重新渲染），因為狀態是在應用程式元件上設定的，並且當它重新渲染時，它的所有子元件元件也被重新渲染。此外，使用外部存儲可以讓我們更輕鬆地與 http 請求等外部系統同步反應，在上下文中您將使用 useEffect，而使用外部存儲您可以直接更新存儲，更改將在訂閱元件。建造我們的 store ------- 讓我們深入研究一下我們 store 的實現。我們將從一個基本結構開始，然後根據我們的要求逐步增強它。 ``` import { useSyncExternalStore } from 'react'; export type Listener = () => void; function createStore<T>({ initialState }: { initialState: T }) { let subscribers: Listener[] = []; let state = initialState; const notifyStateChanged = () => { subscribers.forEach((fn) => fn()); }; return { subscribe(fn: Listener) { subscribers.push(fn); return () => { subscribers = subscribers.filter((listener) => listener !== fn); }; }, getSnapshot() { return state; }, setState(newState: T) { state = newState; notifyStateChanged(); }, }; } ``` **訂閱者**是一組偵聽器，我們的 store 將在 store 狀態的每次變更時通知它們。 **State**是 store 的狀態，我們將在呼叫 setState 時更新它，然後通知所有 store 的訂閱者更新。為了在 React 中使用 store，我們將建立 createUseStore，它是一個以方便的方式包裝 createStore 和 useSyncExternalStore 的幫助器： ``` export function createUseStore<T>(initialState: T) { const store = createStore({ initialState }); return () => [useSyncExternalStore(store.subscribe, store.getSnapshot), store.setState] as const; } ``` 使用 store ---- store 就位後，讓我們開始建立一個 Counter 元件： ``` import React, { useState } from "react"; export function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ); } ``` 並在我們的應用程式中渲染三次： ``` import React from 'react'; import ReactDOM from 'react-dom/client'; import { Counter } from './Counter.tsx'; ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <Counter /> <Counter /> <Counter /> </React.StrictMode>, ); ``` 現在，我們在頁面中看到三個計數器，點擊「增量」只會增量其中一個計數器： ![計數器起始點](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ark89f633vqifdh41d2.png) 讓我們使用我們的 store 讓這 3 個計數器使用相同的狀態，首先我們將使用我們先前建立的 createUseStore 幫助器建立 useCountStore： ``` export const useCountStore = createUseStore(0); ``` 現在讓我們在計數器中使用 useCountStore 鉤子： ``` import { useCountStore } from "./countStore"; function Counter() { const [count, setCount] = useCountStore(); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </div> ); } ``` 現在我們的 3 個計數器已同步，並且所有計數器一起遞增： ![3 個計數器現在共用相同的狀態](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j33b0ns2ep2g02obopjg.png) 由於使用了泛型，TypeScript 知道 count 是一個數字，而 setCount 是一個接受數字的回呼： ![Typescript 對狀態的支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dk0yplo7zsc2ukdgbzf6.png) ![Typescript 對 setState 的支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2l2mb8htqc16glwzczb.png) 下一步 --- 關於如何改進和建立我們的簡單 store 的一些想法： **還原狀態** 在我們的儲存中設定狀態非常直接，這很方便，但有時我們在確定狀態時可能需要處理複雜的邏輯，這就是減速器可能幫助我們的地方，我們可以為我們的儲存加入一個新的調度函數： ``` dispatch(action) { state = reducer(action); notifyStateChanged(); }, ``` **處理深度嵌套狀態** 設定新狀態需要解構現有狀態，如果我們有深度嵌套的狀態，這可能會很煩人，為了解決這個問題，我們可以使用 immer 或類似的函式庫： ``` // without immer setState({ ...state, nested: { ...state.nested, sub: { ...state.nested.sub, new: true, } } }); // with immer import { produce } from "immer"; const nextState = produce(state, s => { s.nested.sub.new = true; }); setState(nextState); ``` 我們甚至可以在內部將 immer 加入到我們的 store，並在 setState 中接受回調，如下所示： ``` setState((state) => { state.nested.sub.new = true; return state; }); ``` 結論 -- 在本教學中，我們完成了建立一個具有 TypeScript 支援的簡單 React 狀態管理函式庫的步驟。透過利用 React 的`useSyncExternalStore`鉤子，我們建立了一個簡單但功能強大的存儲，可以與 React 元件無縫整合。現在您已經掌握了它的竅門，您就可以建立自己的自訂狀態管理庫了。 --- 在 React 文件中閱讀有關[useSyncExternalStore 的](https://react.dev/reference/react/useSyncExternalStore)更多資訊。要查看本文中討論的概念的實際實現，請查看[此處的](https://github.com/paripsky/tinystate)**tinystate-react** 。該庫是使用本教程中描述的方法建置的，可讓您更深入地研究程式碼和範例。 --- 原文出處：https://dev.to/paripsky/build-your-own-react-state-management-library-in-under-40-lines-of-code-with-typescript-support-hji

0個讚 0留言 69瀏覽

1
2
3
4
5
6
›

歡迎發文

💡 記錄日常工作的實踐、心得

💡 發表對生活和職場的感悟

💡 針對感興趣的事件發表隨筆或者雜談

💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣

💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）

熱門文章

🔥 部署策略簡介：藍綠部署 vs 金絲雀部署 vs 其他部署

🔥 44 個 React 前端面試問題

🔥 寫文件基本技巧：如何替專案寫一份優質 README 文件

🔥 🚀 VSCode 中的 Emmet 強大外掛 ✨

🔥 您應該了解的 7 個開源專案 - C# 版 ✔️

近期留言

熱門搜尋：使用工作題 1 javasc 專案作為 c 4 測試第一ＣＳＳ作業 2 技術聊天 git 研前主題 COM 開發 10 Java C 系列語言 javascript 套件 js 20 jav 學習 API 網頁 JavaScript html . 50 AWS 分享研究 19 前端 api id HTML python 網站 for 資料庫入門 github REACT 架構結構 bi Line console 後端 with GIT ' %' create Git .NET React 查詢工程師 % 2023 import ul json ` JAVA OOP 編輯 go ui Html user class 自學 Ai COMPO 非同步 ci cn 搜尋 fb app 部落格回答 Node " todo 客製化 node

CodeLove 愛寫扣論壇 © 2024

🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。