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

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

🔍 搜尋結果：編輯

🔍 搜尋結果：編輯

🚀 VSCode 中的 Emmet 強大外掛 ✨

Emmet是Visual Studio Code中的整合工具，可以幫助我們更快地編寫HTML和CSS程式碼。它允許我們將簡單的縮寫擴展為完整的程式碼區塊，從而節省時間並減少重複輸入。 ⏱️ Emmet 的主要特點🛠️ ------------- - **縮寫擴充：**將縮寫轉換為完整的程式碼。 📝 - **程式碼片段：**快速插入預先定義程式碼結構的捷徑。 ⚡ - **快速導航和編輯：**允許快速導航和編輯程式碼中的類似元素。 🏃‍♂️ 縮寫的實際例子🔍 -------- 1 -**建立一個具有特定類別和/或 ID 的 div** - **縮寫：** `.className`或`#idName` - **範例：**鍵入`.container`並按 Enter 鍵將擴充為： ``` <div class="container"></div> ``` ![具有特定類別的 div](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3drrw9f2wern4qe99hn.gif) 2 -**建立一個包含專案的無序列表** - **縮寫：** `ul>li*3` - **範例：**鍵入`ul>li*3`並按 Enter 鍵將擴充為： ``` <ul> <li></li> <li></li> <li></li> </ul> ``` ![使用專案範例建立無序列表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9h6on8she7nyzrrh341b.gif) 3 -**建立帶有文字的連結** - **縮寫：** `a[href="link"]{text}` - **範例：**輸入`a[href="https://example.com"]{Test}`並按 Enter 鍵將展開為： ``` <a href="https://example.com">Test</a> ``` 4 -**基本 HTML 結構** - **縮寫：** `!` - **例：**打字`!`然後按 Enter 鍵將展開為基本 HTML 結構。 ![基本 HTML 結構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpkqml701g7mz41kvss7.gif) 5 -**建立一個帶有文字的段落** - **縮寫：** `p{text}` - **範例：**輸入`p{This is a paragraph}`並按 Enter 鍵將展開為： ``` <p>This is a paragraph</p> ``` ![帶文字的段落](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/240fx9sv17vphvk457w6.gif) 6 -**建立具有 src 和 alt 屬性的映像** - **縮寫：** `img[src="path"][alt="description"]` - **範例：**鍵入`img[src="image.jpg"][alt="Image description"]`並按 Enter 鍵將擴展為： ``` <img src="image.jpg" alt="Image description"> ``` ![具有 src 和 alt 屬性的圖像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akay6732bexdke3v0n8g.gif) 7 -**建立一個帶有輸入欄位和提交按鈕的表單** - **縮寫：** `form>input[type="text" name="name"]+button[type="submit"]{Submit}` - **範例：**輸入`form>input[type="text" name="name"]+button[type="submit"]{Submit}`並按 Enter 鍵將擴充為： ``` <form> <input type="text" name="name"> <button type="submit">Submit</button> </form> ``` ![帶有輸入和提交按鈕的表單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo0ucjvttuv9a5k4ra39.gif) 8 -**建立一個包含子元素的結構（多個元素）** - **縮寫：** `.container>a+p` - **範例：**鍵入`.container>a+p`並按 Enter 鍵將擴展為： ``` <div class="container"> <a href=""></a> <p></p> </div> ``` ![具有子元素的結構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvklhsbyt6y5m2u4uf7s.gif) 這些只是您可以在 VSCode 中使用 Emmet 執行的操作的幾個範例。這些快捷方式提供的效率可以顯著改變您的日常生活。 💡 願力量與大家同在。再見 --- 原文出處：https://dev.to/kibumpng/emmet-in-vscode-1l99

0個讚   0留言 38瀏覽

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

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

0個讚   0留言 30瀏覽

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

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

0個讚   0留言 20瀏覽

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

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

0個讚   0留言 58瀏覽

如何在行動裝置上測試本地網站

在建立網站時，開發人員通常需要測試他們的網站是否響應靈敏、經過優化並且在行動裝置上運作良好。如果他們不知道一種簡單且正確的方法來進行測試，那麼測試可能會令人沮喪。 在這篇文章中，我將向您展示如何透過三個簡單的步驟在行動裝置上測試本地網站。儘管瀏覽器開發工具可以提供幫助，但有時您可能需要更好的視覺化、清晰度和與專案的觸控互動。在這種情況下，在實際手機上進行測試可能比使用瀏覽器的行動螢幕更好。 要在手機上查看本地網站的即時預覽，請確保您的手機和桌面連接到相同 WiFi 網路。如果尚未安裝，請安裝[VS Code](https://code.visualstudio.com/)編輯器和[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)擴充功能。 在電話上測試本地網站的步驟 ------------- 下載 VS Code 編輯器及其 Liver Server 擴充功能後，現在請按照給定的 3 個步驟逐行查看手機上的本機專案： ### 1. 執行實時伺服器 首先，在 VS Code 中開啟專案資料夾。然後，點擊右下角的「上線」按鈕。這將為您的專案啟動本機開發伺服器，通常在連接埠`5500`上執行。 您的專案現在應該在預設的 Web 瀏覽器中執行。記下連接埠號碼（5500 或其他數字，如果不同）。 ![執行實時伺服器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bxampc1npsnupyvfwrf.jpg) ### 2. 尋找您的本地 IPv4 位址 接下來，您需要本機 IPv4 位址。開啟命令提示字元 (CMD)，鍵入 ipconfig，然後按 Enter。在「無線 LAN 適配器 Wi-Fi」部分下尋找您的 IPv4 位址。它看起來像`192.168.1.68` 。 請記住，如果新設備連接或斷開與您的 WiFi 網路的連接，您的本地 IP 位址可能會發生變化。 ![尋找您的本機 IPv4 位址](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggaldbbpfdf26cbbqebk.jpg) ### 3. 在手機上查看您的專案 開啟手機上的瀏覽器並輸入您的 IPv4 位址，然後輸入連接埠號碼。 URL 應如下所示： `192.168.1.68:5500` 。 如果您的主 HTML 檔案未命名為 index.html，則需要在 URL 中包含檔案名，如下所示： `192.168.1.68:5500/filename.html` 。 ![在手機上查看您的專案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qoy2k744fqngq9bsz35.jpg) 現在您應該在手機上看到專案的即時預覽。您在桌面上的 VS Code 中所做的任何更改都會立即反映在您的手機上，無需手動刷新。 常見錯誤故障排除 -------- 如果您遇到「無法存取網站」或類似內容的錯誤，請嘗試以下故障排除步驟： - **仔細檢查 IPv4 位址和連接埠號碼：**確保您在手機瀏覽器中輸入了正確的 IPv4 位址和連接埠號碼。 - **檢查網路連線：**確保您的手機和桌面連接到相同 WiFi 網路。 - **檢查檔案路徑：**如果您的主 HTML 檔案不是`index.html` ，請確保 URL 中包含正確的檔案路徑。 - **防火牆設定：**您電腦的防火牆可能阻止連線。調整設定以允許 Live Server 使用的連接埠號碼上的流量。 結論 -- 在這篇文章中，您學習如何在手機上查看專案的即時預覽。此方法適用於使用[HTML、CSS](https://www.codingnepalweb.com/category/html-and-css/)和[JavaScript](https://www.codingnepalweb.com/category/javascript/)以及其他框架專案建立的靜態專案。 如果您想提高編碼的準確性、速度和效能，請查看我的部落格文章《[面向 Web 開發人員的十大有用 VS 程式碼擴充》](https://www.codingnepalweb.com/top-vs-code-extensions-for-web-developers/) 。 如果您發現本指南有幫助，請與其他人分享！ --- 原文出處：https://dev.to/codingnepal/how-to-test-local-website-on-mobile-devices-2p69

0個讚   0留言 33瀏覽

掌握 Git 版本控制：超越基礎知識

\_歡迎參加 DevSecOps in 5 的第 2 週：您獲得安全開發超級大國的門票！ 嘿，安全冠軍和編碼戰士！ 您是否渴望提升 DevSecOps 水平並成為堅如磐石的軟體架構師？好吧，您來對地方了！這個為期 5 週的部落格系列是您掌握安全開發和部署的快速通道。 準備好拋棄開發戲劇，對您的安全實踐建立不可動搖的信心。我們同舟共濟，所以係好安全帶，讓我們踏上這段史詩般的旅程！ --- 歡迎來到 Git 的世界，這是一個為無數軟體開發專案提供支援的無處不在的版本控制系統。雖然您可能已經掌握了初始化儲存庫、提交變更和推送程式碼的基本命令，但本部落格將進行更深入的研究，探索進階策略和工作流程以增強您對 Git 的掌握。 分支策略：超越 GitFlow --------------- 分支是 Git 的核心概念，它允許開發人員在不影響主程式碼庫的情況下處理獨立的程式碼行。然而，有效的分支策略對於維護清潔和協作的開發環境至關重要。在這裡，我們將探討流行的分支策略及其細微差別： #### GitFlow 與 GitHub Flow： 這兩種流行的分支策略提供了不同的方法： #### gitflow： 受到較大團隊的青睞，GitFlow 採用了一組專用的分支： #### master： 神聖不可侵犯的生產分支，只保存最穩定且經過徹底測試的程式碼。 #### develop： 整合了持續功能和錯誤修復的中央開發分支。 #### feature： 短期分支從針對特定功能的開發中分支出來，完成後合併回來。 #### hotfix： 短期分支直接從 master 分支出來，用於緊急錯誤修復，然後合併回開發分支和 master 分支。 發布分支：從開發分支出來的短期分支，為不同的環境準備發布。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rd07388its3zftj37eau.png) #### GitHub 流程： GitHub Flow 更輕量級且適合較小的團隊，它利用： #### master： 與 GitFlow 類似，僅儲存可用於生產的程式碼。 #### feature： 這些分支直接從 master 分支出來，包含功能和錯誤修復，在審查和測試後直接合併到 master 中。 #### hotfix： 與GitFlow類似，用於關鍵bug修復，直接合併到master中，然後刪除。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a1osj6j2n0re1myppe7.png) #### 優點和適用性： GitFlow 為大型團隊提供結構化控制，確保程式碼在投入生產之前的穩定性。但是，它需要更嚴格地執行分支命名約定和工作流程。 GitHub Flow 對於較小的團隊來說更簡單、更快，專注於持續整合和快速迭代。選擇最適合您的專案規模、複雜性和團隊結構的策略。 #### 額外提示： 考慮使用分支模型視覺化工具（例如“git分支”）來獲得分支及其關係的清晰圖形視圖。 功能分支工作流程：最佳實踐 ------------- 功能分支是 Git 開發的主力。以下是如何利用它們來優化您的工作流程： #### 建立清晰且具描述性的分支名稱： 使用一致的命名約定（例如，功能/新登入系統）來提高專案的清晰度和可發現性。 #### 定期程式碼審查： 在合併回主分支之前，請另一位開發人員檢查您的程式碼的品質、效率以及對編碼標準的遵守情況。利用 GitHub 或 GitLab 等平台的內建審核功能來簡化溝通。 #### 合併策略： 採用「合併」或「變基」策略來整合您的功能分支： #### 合併： 建立合併提交，記錄分支和主分支之間的整合點。這更簡單，但可能會導致更複雜的 Git 歷史記錄。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efj71to6b9ahiwtxbson.png) #### 狐狸： 在最新的主分支提交之上重寫功能分支的提交，從而產生更清晰的 Git 歷史記錄。然而，變基需要謹慎，因為它可以重寫其他合作者所看到的歷史。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no72l54ss657ygf3t4dy.png) #### 衝突解決技巧： 當對不同分支所做的變更影響相同的程式碼行時，可能會出現合併衝突。學習使用 Git 的內建合併工具或手動編輯來辨識和解決衝突。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jkzk7vi9iy1in80qvic.png) 修補程式和版本的分支 ---------- 專用分支服務於功能開發以外的特定目的： #### 修補程式分支： 對於需要立即部署的關鍵錯誤修復，請直接從主伺服器建立修補程式分支。修復問題，在臨時環境中進行徹底測試，並將修補程式合併回主版本（並在適用的情況下進行開發）以快速解決問題。合併後刪除修補程式分支。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wc9hbgwq8ellvdgv94x.png) #### 發布分支： 使用從開發分支的專用分支準備版本。整合錯誤修復、最終功能完善和文件更新。嚴格測試完成後，將發布分支合併至 master 進行部署。考慮在 master 中標記提交以進行版本控制。 使用 Git 的協作工作流程 -------------- #### 分叉和拉取請求： GitHub 和 GitLab 等平台允許開發人員「分叉」儲存庫，建立個人副本。在他們的分支上，他們可以建立功能分支，實施更改，然後向原始儲存庫提交「拉取請求」。這會觸發程式碼審查流程，維護人員可以審查變更、建議修改並批准拉取請求以將程式碼合併到主分支中。 #### 解決合併衝突： 當多個開發人員在不同的分支中處理相同的檔案時，就會發生合併衝突。 Git 通常會突出顯示這些衝突，您有責任手動編輯文件來解決它們。 Git 的合併工具或 Git 用戶端中的視覺化合併編輯器等工具可以簡化此流程。 #### 使用遠端儲存庫： 使用 GitHub 或 GitLab 等遠端儲存庫服務集中化版本控制。這提供了許多好處： #### 合作： 團隊成員可以輕鬆分叉、克隆程式碼並將其推送到遠端儲存庫，從而促進協作開發。 版本控制歷史記錄：遠端儲存庫維護完整的 Git 歷史記錄，讓您可以恢復到先前的版本或追蹤程式碼演進。 #### 備份和災難復原： 如果本機電腦發生故障，遠端儲存庫可確保程式碼庫的安全備份。 用於自動化任務的 Git Hooks ------------------ Git 掛鉤是在 Git 工作流程中的特定點自動執行的腳本，增加了自動化並實施最佳實踐。 #### Git Hook 的類型： 有幾種預定義的鉤子類型： #### 預提交： 在提交之前執行，允許您強制執行編碼標準或執行 linting 檢查。 #### 提交後： 在提交後執行，對於更新建置版本或發送通知很有用。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqmapedl10bu9hub5ozt.png) #### 預推： 在程式碼被推送到遠端儲存庫之前執行，通常用於最終檢查或測試。 #### 推後： 在推送程式碼後執行，可能會觸發部署或整合。 常見的 Git Hook 使用案例：Git hook 可以自動執行各種任務： #### 程式碼格式： 使用在提交之前執行程式碼格式化程式（例如 autopep8 或 clang-format）的鉤子來強制執行一致的程式碼風格。 #### 單元測試： 在推送程式碼之前使用 pytest 或 Jest 等掛鉤執行自動化單元測試，確保整合先前的基本功能。 #### 靜態程式碼分析： 透過預先提交掛鉤將 Pylint 或 ESLint 等靜態程式碼分析工具整合到您的工作流程中，以辨識潛在的錯誤或漏洞。 #### 建立自訂 Git Hook： 雖然預先定義的掛鉤可以滿足常見需求，但您可以使用 Bash 或 Python 等腳本語言建立自訂掛鉤。有關建立和配置自訂掛鉤的詳細說明，請參閱 Git 文件。 #### 適用於非程式設計師的 Git： Git 不僅僅適合程式設計師！對於使用基於文字的文件進行協作專案的任何人來說，它都很有價值。使用它來管理文件、設定文件，甚至具有版本控制的創意寫作專案。 高級 Git 主題： #### 藏匿： 暫時儲存未提交的變更以供以後使用。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6ztfitlypw84z9evpgz.png) #### 子模組： 管理較大專案中不同 Git 儲存庫之間的依賴關係。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2aclbe66vn30rv3ipfx7.png) #### 變基 ：重新組織您的 Git 歷史記錄，以獲得更清晰的線性進展（謹慎使用！）。 #### 將 Git 與不同的工具和 IDE 結合使用： Visual Studio Code、IntelliJ IDEA 和 Eclipse 等流行的開發工具和 IDE 與 Git 無縫集成，為直接在開發環境中提交、分支和合併程式碼提供了流暢的工作流程。 深入研究 Git：高級技術和高級用戶提示 -------------------- 現在您已經掌握了基礎知識，讓我們為經驗豐富的使用者深入研究進階 Git 概念： #### 進階分支策略： 功能標誌和分支切換：使用功能標誌管理向特定環境或使用者群組推出新功能。將此與 Git 分支結合起來，建立啟用功能標誌的功能分支，從而允許分階段部署和受控部署。 #### Git 鏡像： 使用 Git 映像建立遠端儲存庫的同步副本，以實現災難復原或冗餘目的。這會在另一台伺服器上建立儲存庫的完整副本，確保在發生中斷或意外刪除時的資料安全。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfgyskg46rxgo4gvsn87.png) #### 高級版本控制的精挑細選和變基： 這些技術提供了對 Git 歷史記錄的精細控制： #### 採櫻桃： 選擇特定提交並將其從一個分支應用到另一個分支，這對於合併來自修補程式分支的錯誤修復而不合併整個分支非常有用。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mi9w8wsnu5n99acsa9a.png) 變基（互動式）： 透過重新排列、編輯或壓縮提交來重寫 Git 歷史記錄。互動式變基允許對重寫過程進行更細粒度的控制。謹慎使用這些技術，因為它們可以改變合作者所看到的歷史並且需要仔細協調。 Git Porcelain 命令和重構 ------------------- #### 可拆卸 HEAD 和變基工作流程： Git 中的 HEAD 指的是目前簽出的提交。可拆卸的 HEAD 可讓您將其與工作目錄分離，從而實現複雜的變基等高級工作流程。這是一個強大但在概念上具有挑戰性的功能。 #### 互動式變基： 如前所述，互動式變基允許以互動方式編輯現有提交並重構 Git 歷史記錄。你可以： 將大型提交拆分為更小、更集中的提交。 將多個提交合併為一個提交。 編輯現有提交的提交訊息。 重新排序致力於反映開發的邏輯流程。 用於日常任務的 Git Porcelain 命令：Git 為各種用例提供了一套強大的「Porcelain」命令： `git add -p (patch):` 暫存文件中的特定更改而不是整個文件。 `git stash:` 暫時儲存未提交的變更以供以後檢索，這對於切換上下文或測試分支很有用。 `git lfs (Large File Storage):` 使用 Git LFS 在儲存庫中有效管理大型文件（影片、映像），它可以單獨儲存這些文件，而不會增加儲存庫的大小 具有大型程式碼庫的 Git ------------- #### Git 大檔案儲存 (LFS)： 如前所述，Git LFS 對於管理 Git 儲存庫中的大檔案至關重要。它追蹤存儲庫中的這些文件，但將它們存儲在單獨的位置，從而保持主存儲庫的精簡和高效。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyamfu90d4mlhnksb4e2.png) #### 模組化開發的子模組： 將大型專案分解為較小的模組化元件，由單獨的 Git 儲存庫管理。您可以將這些子模組整合到更大的專案（monorepo）中，同時維護每個模組的獨立版本控制。 適用於分散式團隊和持續整合 (CI) 的 Git： ------------------------- 在分散式團隊中利用 Git：Git 在地理分散的團隊中表現出色。就是這樣： #### 遠端儲存庫： 在 GitHub 或 GitLab 等平台上集中進行版本控制，使每個人都可以無縫地複製、推送和拉取程式碼。 #### 分支策略： 採用 GitFlow 或 GitHub Flow 等清晰的分支策略來管理並發開發並避免衝突。 #### 溝通與協調： 保持清晰的溝通管道並利用拉取請求審查和問題追蹤器等工具進行有效協作。 #### Git 與 CI/CD 管道整合： 持續整合和持續交付 (CI/CD) 管道可自動執行建置、測試和部署。將 Git 與 CI/CD 管道集成，以便在程式碼變更時自動觸發這些流程： #### CI 觸發器： 配置 CI 系統以在程式碼推送到特定分支時觸發建置和測試。 部署自動化：根據成功的建置和測試，自動部署到不同的環境（暫存、生產）。 #### CI 管道的 Git Hooks： 自訂 Git 掛鉤可以觸發 CI 管道中的特定操作： #### 預推掛鉤： 在推送程式碼之前執行程式碼品質檢查或單元測試，以防止在到達遠端儲存庫之前出現回歸。 #### 後推掛鉤： 成功推播後觸發部署或自動通知。 #### Git 用於非程式碼資產的版本控制： Git 不僅限於程式碼。使用它來管理非程式碼資產的版本控制，例如： #### 文件: 追蹤文件檔案隨時間的變化。 設定檔：維護開發、登台和生產環境的不同配置。 #### 設計樣機： 版本控制設計資產（例如模型和原型）可輕鬆協作和迭代。 #### 視覺化 Git 歷史記錄： 「git log --graph」等工具或 GitKraken 等圖形用戶端可以以使用者友好的格式視覺化您的 Git 歷史記錄，幫助您一目了然地了解分支和合併活動。 結論 -- 這本綜合指南為您提供了在基礎知識之外駕馭 Git 的知識和技術。請記住，掌握 Git 是一個持續的旅程。繼續練習、試驗這些概念，並利用龐大的線上 Git 社群進行進一步探索。以下是一些可協助您掌握 Git 的額外資源： 官方 Git 文件：https://git-scm.com/ - Git 所有內容的權威來源，包含深入的解釋、命令和教學。 互動式 Git 訓練：https://learngitbranching.js.org/ - 一個學習 Git 基礎並在模擬環境中進行分支和合併實驗的動手平台。 Git SCM 部落格：https://git-scm.com/ - 隨時了解 Git 團隊的最新 Git 開發、新聞和最佳實踐。 線上 Git 社群：Stack Overflow、GitHub Discussions 和 Git 論壇等平台提供了經驗豐富的 Git 用戶的豐富知識和幫助。 透過積極利用這些資源並將新學到的知識付諸實踐，您將成為 Git 高級用戶，準備好應對專案遇到的任何版本控制挑戰。快樂分支！ --- 我很高興有機會今天與您一起深入研究《掌握 Git 版本控制：超越基礎知識》。這是一個令人著迷的領域，具有改善安全狀況的巨大潛力。 感謝您與我一起探索《使用 Git 掌握版本控制：超越基礎》。您持續的興趣和參與推動了這趟旅程！ 如果您發現有關使用 Git 進行版本控制：超越基礎知識的討論有幫助，請考慮與您的網路分享！知識就是力量，尤其是在安全方面。 讓我們繼續談話吧！在下面的評論中分享您的想法、問題或經驗《掌握 Git 版本控制：超越基礎知識》。 渴望了解有關 DevSecOps 最佳實踐的更多資訊？請繼續關注下一篇文章！ 透過共同努力並採用安全的開發實踐，我們可以建立一個更具彈性和值得信賴的軟體生態系統。 請記住，安全開發之旅是一個持續學習的過程。這是為了持續改進！ --- 原文出處：https://dev.to/gauri1504/mastering-version-control-with-git-beyond-the-basics-44ib

0個讚   0留言 36瀏覽

同步引擎是 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留言 17瀏覽

我發現的很酷的 VSCode 擴展

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

0個讚   0留言 64瀏覽

使用 NextJS 建立電子商務商店

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

0個讚   0留言 68瀏覽

我在 IT 產業工作了 10 多年。這是我希望在開始時就知道的 5 件事

我需要吐露一些心聲，所以我在這裡，希望能與年輕的 IT 專業人士分享一些有用的東西。在我的職業生涯中，我經歷了自由工作、實習、公司工作、職業轉變，甚至推出了自己的 SaaS（這個故事下次再說…）。我犯過無數的錯誤，也學到了一些慘痛的教訓。以下是我希望 10 年前就知道的 5 件重要事情。 1. 一致性是關鍵 --------- 曾經有一段時間，我懷疑自己所做的一切——品質、選擇、從方向到技術堆疊。我在技術之間切換，考慮放棄我正在做的事情，並再次改變職業。這導致我對自己的技能缺乏信心，常常感到非常沮喪。再加上自由職業的收入和普遍的內向——我甚至沒有任何更有經驗的人可以諮詢來衡量我的進步。這很艱難——當時我主要建立 WordPress 網站。如果我把時間浪費在懷疑和優柔寡斷上，專注於一條職業道路，我會取得更多、更快的成就。選擇一條道路並堅持下去——它會比廣泛的平庸發展的技能產生更多的結果，尤其是在開始時。 這也適用於尋找你的第一份工作。如果您一開始無法找到夢想的工作或任何 IT 工作，那麼這還沒結束。是的，這可能需要幾個月甚至幾年的時間！但如果您覺得 IT 是您的位置，請繼續挖掘該位置。找臨時工作維持生計。尋找更便宜的住房，如果有必要的話，和父母住在一起。購買便宜且健康的食物（提示：您吃的蛋白質越多，您一整天感到的飢餓感就越少）。如果您有系統地投入時間來發展和找工作 – 您就會成功。 2. 你會掙扎並且不理解事情－這是正常的（隨著時間的推移，情況會好起來，但不會完全好） ------------------------------------------- 隨著時間的推移，它會變得更容易，但鬥爭永遠不會完全消失。我在大學逃課，留下了我的電腦科學基礎知識中的空白，而這些空白是經驗無法填補的。但這還不是最重要的。最重要的是，在工作中，你會存在著知識上的空白。也許不是在特定的工作、角色或專案中——你可以徹底學習一個專案，特別是如果你在它上工作的時間足夠長的話。但總體上不了解有關您職業的某些事情是正常的。您不需要了解曾經建立的每一個處理器架構；系統架構師不需要了解特定的測試工具。您不需要徹底了解亞馬遜的每項服務來建立強大的測試系統。這是正常的。 3.不要執著於一份糟糕的工作 -------------- 有時你最終會得到一份糟糕的工作。認識到一份糟糕的工作很簡單——一天結束時，你想把自己裹在毯子裡，躲在角落裡，最重要的是，工作中沒有人可以與你談論改善情況。糟糕的工作可能有多種原因 - 有時是團隊，有時是管理層，有時是你 - 不適合該職位，招聘錯誤，但沒關係。不好的是堅持那份工作。原因可能有很多——沒有安全網、沒有合適的替代方案、對新工作的到來沒有信心……你決定等待。等待、忍受、拖拖拉拉，直到你完全精疲力盡，或者儘管你付出了努力，但還是被明確地趕出了家門。這種情況可能發生在你職業生涯的任何階段，你絕對不能讓它發展到極端。如果你覺得有什麼不對勁，那你可能是對的。如果你強烈地不想去上班——那就是有問題了。切斷這些聯繫，否則你會精疲力竭，或在一個糟糕的地方紮根數週、數月、甚至數年，而沒有力量去改變任何事情。當臨界點到來時，你會面臨更疲憊的情況。 4. 經常換工作可能有好處，但不適合所有人 --------------------- 我仍然看到對初學者程式設計師的建議：多換工作。他們說，這樣你就會獲得更多經驗。在這裡一年，在那裡六個月，三、四年後，你的經驗就和高年級學生一樣了。這可以工作。但這並不適合所有人。 人們在如何集中和保持注意力方面存在差異。如果你沒有註意力不集中的問題，你可以輕鬆地在一個地方工作幾年，並徹底學習所有流程——這將增加你在當前公司的價值，並為你在未來的面試中提供故事。人們低估了深刻的理解，但許多職位和公司卻很重視它。 跳槽也很有用，但對於那些在任務被理解後難以保持注意力的人來說可能是有益的。對這些人來說，當工作中的驚喜消失或接近消失時，工作就變成例行公事，他們可能會開始破壞它。如果你有這樣的感覺——這可能就是你的情況，你需要從熟悉的地方跳到未知的地方。一次又一次。隨著時間的推移，這些人會成為具有超強適應性的專家，對他們來說，新語言或新領域都不會成為障礙。 及時辨識什麼適合您個人非常重要。 5. 不要錯過機會，即使它們看起來很小或微不足道 ------------------------ 測試自動化的職業生涯讓我的生活變得更好。這個機會一直就在我面前。我不只一次想過嘗試它，甚至開始學習一些東西，但我放棄了——我認為測試並不認真，而且在經過幾年的 Web 開發後轉向測試是個壞主意（哈哈）。事實證明，我不需要付出很大的努力就可以在這個領域建立一份嚴肅的職業生涯。從酒吧工作轉向網頁開發對我來說是一個更大的努力。 為了養活自己而工作也是如此。我的第一份 Web 開發工作賺了 50 美元。我製作了兩個 WordPress 網站——一個 30 美元，另一個 20 美元。自從我從頭開始學習以來，這還不錯。我之前的工作經驗大部分都是在酒吧度過的。儘管我將自己（主要是在我的腦海中）定位為網頁開發人員，但我從事了任何工作——從編寫文字到編輯圖像。在自由業的前 2-3 年裡，我最大的單筆收入是用 Photoshop 編輯了數千張電影海報。三天三夜幾乎不間斷的工作讓我賺到了 500 美元——這對那個時代來說是一個了不起的結果。 還有一件事：行話和抽象 ----------- 你讀到的、聽到的和做的很多事情都可能非常混亂和複雜，以至於變成了白噪音。有時，一件難以理解的事情會流入另一件事情中，留下不愉快的痕跡和限制感。但這是正常的！一旦你開始解開抽象概念的結，並意識到術語和行話背後的含義，一切都會很快步入正軌。看起來這種混亂沒有盡頭，但事實並非如此——遲早，你會明白一切（或幾乎一切）。 實際上，程式設計論壇和技術播客對我幫助很大。我只是閱讀和聆聽所有內容，谷歌搜尋每個未知的單字和術語。在某些時候，這會導致您的手機和電腦上的瀏覽器中出現數十個和數百個選項卡，但最終，此流程開始縮小。透過每個新的閱讀選項卡，您會變得更聰明，對自己的知識更有信心，即使在很長一段時間內看起來並非如此。 --- 我希望這篇文章能對大家有所幫助，並激勵人們不要害怕變化，尋找自己的位置，不要在遇到困難時就放棄。請記住，每條道路都是獨一無二的，重要的是要找到自己的道路，遵循自己的興趣、願望並專注於自己的感受。一切都會好起來的，但還是祝你好運。 --- 原文出處：https://dev.to/vorniches/ive-worked-in-it-for-over-10-years-here-are-5-things-i-wish-i-knew-when-i-started-43pe

0個讚   0留言 55瀏覽

我一直在編寫 TypeScript 但不理解它

我承認，我不太懂 TypeScript ------------------- 有一天，我在一些處理樂觀更新的程式碼中遇到了一個錯誤，所以我向我的同事[Filip](https://tenor.com/en-GB/view/the-office-funny-kevin-malone-phillip-i-hate-phillip-gif-16434707)尋求幫助。 TypeScript 精靈 Filip 提到`satisfies`關鍵字將是我正在尋找的解決方案的一部分。 *`Satisfies` ？那是什麼呀？為什麼我以前從未聽說過它？*我的意思是，我已經使用 TypeScript 一段時間了，所以我很驚訝我自己並不了解它。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6kny7wtjnc4168yn2o0.png) 不久之後，我偶然發現了 @yacineMTB 的這條推文，他是[X.com](http://X.com) （又名 Twitter）的多產者和工程師： > 就像，為什麼我不能只*執行***打字稿**檔案？如果我需要初始化整個目錄和專案，那麼腳本語言有什麼意義呢？ > 我再次發現自己想知道為什麼我還不了解 TypeScript。*為什麼你不能真正執行 TypeScript 檔案？腳本語言和編譯語言有什麼不同？* [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy01hirmxhlwybk6mx9u.png)](https://opensaas.sh) 我突然意識到，我不太了解我幾乎每天使用的語言的一些基本知識，這些語言是我用來建立諸如[Open SaaS](https://opensaas.sh) （一個免費的開源 SaaS 入門工具）之類的東西的。 所以我決定退一步，對這些主題進行一些調查。在這篇文章中，我將與您分享我學到的一些最重要的事情。 TypeScript 是什麼類型的腳本？ -------------------- 您可能已經聽說過 TypeScript 是 JavaScript 的「超集」。這意味著它是 JavaScript 之上的一個附加層，在本例中，它允許您向 JavaScript 加入靜態類型。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5595bx8k88hkih2pthh.png) 這有點像 TypeScript 是 JavaScript 的進階版。或者，換句話說，如果 JavaScript 是 Tesla Model 3 的基礎模型，那麼 TypeScript 就是 Model X Plaid。*嗚嗚嗚。* 但因為它是 JavaScript 的*超集*，所以它實際上並不像 JavaScript 本身那樣運作。例如，JavaScript 是一種腳本語言，這意味著程式碼在執行過程中會被逐行解釋。它被設計成可以在不同作業系統和硬體配置的網路瀏覽器中運作。這與 C 等低階語言不同，後者需要先編譯為特定係統的機器碼才能執行。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iu22drd35u217gatsifn.png) 因此，JavaScript 不必先編譯，而是由 JavaScript 引擎解釋。另一方面，TypeScript 必須先轉換（或「轉編譯」）為 JavaScript，然後才能由瀏覽器中的 JavaScript 引擎（或作為獨立的 NodeJS 應用程式）執行。 所以這個過程看起來有點像這樣： ``` → Write TypeScript Code → “Transcompile” to JavaScript → Interpret JavaScript & Check for Errors → JavaScript Engine Compiles and Executes the Code ``` 很有趣，對吧？ 現在我們已經掌握了一些理論知識，接下來讓我們繼續討論一些更實際的東西，例如 TypeScript 的出名之處：它就是*類型！* --- 順便一提… 我們[Wasp](https://wasp-lang.dev/)正在努力建立最好的開源 React/NodeJS 框架，讓您快速行動！ 這就是為什麼我們提供了即用型全端應用程式模板，例如帶有 TypeScript 的 ToDo 應用程式。您所要做的就是安裝 Wasp： ``` curl -sSL https://get.wasp-lang.dev/installer.sh | sh ``` 並執行： ``` wasp new -t todo-ts ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj26gymrxyybut4541lg.png) 您將獲得一個開箱即用的具有 Auth 和端到端 TypeSafety 功能的全端 ToDo 應用程式，以幫助您學習 TypeScript，或者只是開始快速安全地建置一些東西:) --- 玩耍`satisfies` ------------- 還記得我如何向我的同事尋求幫助，他的解決方案涉及`satisfies`關鍵字嗎？好吧，為了更好地理解它，我決定打開一個編輯器並嘗試一些基本範例，這是我發現的最有用的東西。 首先，我們以 person 物件為例，將其輸入為`Record` ，該 Record 可以採用一組`PossibleKeys`和一個`string`或`number`作為值。那想看看這個： ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person: Record<PossibleKeys, string | number> = { } ``` 我們輸入`person`常數的方式稱為型別註解。它直接位於變數名稱之後。 讓我們開始為此`person`物件新增鍵和值： ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person: Record<PossibleKeys, string | number> = { id: 12, name: "Vinny", email: "[email protected]", age: 37, } ``` 看起來很簡單，對吧？ 現在，讓我們來看看 TypeScript 如何推斷`person`屬性的類型： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bd9m3bfy19qep0mvz98.png) 有趣的。當我們將滑鼠懸停在`email`上時，我們看到 TypeScript 告訴我們電子郵件是`string`或`number`的聯合類型，即使我們肯定只將其定義為`string` 。 如果我們嘗試在這種類型上使用一些`string`方法，這將會產生一些意想不到的後果。讓我們嘗試一下`split`方法，例如： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6u4nxa0em6mr0qqghuyp.png) 我們收到一個錯誤，表示此方法不適用於`number`類型。哪個是對的。但這很煩人，因為我們知道`email`是一個字串。 讓`satisfies`透過將類型向下移動到常數定義的末尾來解決這個問題： ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person = { id: 12, name: "Vinny", email: "[email protected]", age: 37, } satisfies Record<PossibleKeys, string | number>; ``` 現在，當將滑鼠懸停在`email`屬性上時，我們將看到它被正確推斷為`string` ： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxv578os1altgpkgmojo.png) 好的！現在，我們使用`split`將`email`轉換為字串陣列不會遇到任何問題。 這就是`satisfies`真正的閃光點。它讓我們驗證表達式的類型是否與特定類型匹配，同時為我們推斷最窄的可能類型。 多餘的財產檢查 ------- 但當我玩`satisfies`時，我注意到另一個奇怪的事情是，如果我直接在變數上使用它與在中間變數上使用它，它的行為會有所不同，如下所示： ``` // Directly on object literal const person = { } satisfies PersonType; // Using on intermediate variable const personIntermediate = person satisfies PersonType ``` 具體來說，如果我向`person`物件加入類型中不存在的另一個屬性（例如`isAdmin` ，則直接使用時我們會收到錯誤，但使用中間變數時不會收到錯誤： 1. 直接使用`satisfies` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzqk2ph21jkcbdu4w6oz.png) 2. 使用`satisfies`和中間變數 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/haipxyc4ihxpmezydgto.png) 您可以看到，在範例 2 中，沒有錯誤且 person “滿足” `PersonType` ，但在範例 1 中卻沒有。 這是為什麼？ 嗯，這實際上與 JavaScript 的基本工作原理有關，而與`satisfies`關鍵字關係不大。讓我們來看看。 上面範例中發生的過程就是所謂的「多餘屬性檢查」。 過多的屬性檢查實際上是該規則的例外。 TypeScript 使用所謂的「結構類型系統」。這只是一種奇特的方式來表示**如果一個值具有所有預期的屬性，那麼它將被使用。** 因此，使用上面的`personIntermediate`範例，TypeScript 不會抱怨`person`有一個額外的屬性`isAdmin` ，該屬性在`PersonType`中不存在。它具有所有其他必要的屬性，例如`id` 、 `name` 、 `email`和`age` ，因此 TypeScript 接受這種中間形式。 但是，當我們直接在變數上聲明類型時（如範例 1 中所示），我們會收到 TypeScript 錯誤：「'isAdmin' 在類型 'PersonType' 中不存在」。**這是工作中的多餘屬性檢查**，它可以幫助您避免犯下愚蠢的錯誤。 記住這一點是有好處的，因為這將幫助您避免意外的副作用。 例如，假設我們將 person 類型變更為具有可選的`isAdmin`屬性，如下所示： ``` type PersonType = { id: number, name: string, isAdmin?: boolean, // 👈 Optional } ``` 如果我們不小心用`isadmin`屬性而不是`isAdmin`定義了`person`並且沒有直接聲明類型，會發生什麼情況？ 我們不會從 TypeScript 中得到任何錯誤，因為`person`實際上滿足所有必要的類型。 `isAdmin`類型是可選的，它不存在於`person`上，但這並不重要。您已經做了一個簡單的 type-o，現在嘗試存取`isAdmin`屬性，但它不起作用： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxz8zzlxxog0xkdfpvbn.png) 哎呀！讓我們用類型註釋來修復它，我們立即聲明類型： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zer5v40ipp47juw2n50f.png) 好的。因為我們在第 58 行使用了直接類型註釋，所以我們獲得了 TypeScript 多餘屬性檢查的好處。 謝謝，打字稿！ 🙏 --- 如果您發現此內容有用，並且想要查看更多類似內容，您可以[在 GitHub 上給 Wasp 一顆星，輕鬆幫助我們！](https://www.github.com/wasp-lang/wasp) 。 ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif) {% cta <https://www.github.com/wasp-lang/wasp> %} ⭐️ GitHub 上的 Star Wasp 🙏 {% endcta %} --- 待續… --- 感謝您加入我的旅程的第 1 部分，以便更好地了解我們每天使用的工具。 這將是一個持續進行的系列，我將繼續以更具探索性、更少結構化的方式分享我所學到的東西。我希望您發現其中的某些部分有用或有趣。 讓我知道你接下來想看什麼！你喜歡這種風格嗎？你願意改變一些事情嗎？加入或刪除一些東西？或者你對最近學到的東西有什麼看法或類似的故事嗎？ 如果是這樣，請在評論中告訴我們，我們下次見:) --- 原文出處：https://dev.to/wasp/ive-been-writing-typescript-without-understanding-it-5ef4

0個讚   0留言 27瀏覽

我如何在處理多個專案時提高工作效率

身為自由Web 開發人員、應用程式建立者和開源維護者，我必須不斷地在多個工作流程之間來回切換，例如編輯程式碼、設計模型、管理待辦事項清單、搜尋圖示和文件、執行命令列、檢查使用不同帳戶的電子郵件等等。每個開關都需要持續不斷的重複操作： - 啟動程式碼或圖像編輯器並在其中開啟特定專案的檔案。 - 開啟 Web 瀏覽器並導航至任務管理器中的專案。 - 導航到圖示網站，設定圖像過濾器並執行搜尋。 - 開啟網頁郵件應用程式並切換帳戶。 - 啟動終端機並在其中輸入命令。 - ETC… 所有東西都分散在不同的地方，使整個過程變得一團糟。當同時處理多個專案時，情況會變得更糟。我認為透過收集在一個地方完成工作所需的一切並將其組織到專案和工作流程中以便它們具有正確的上下文，我可以極大地提高我的工作效率。專案和工作流程將有清晰的界限，它們之間的切換將不再是一場噩夢。所以我想出了[Freeter](https://freeter.io/?ref=devto) ，一個可以做到這一點的組織應用程式。最近將其作為永久免費的[開源專案](https://github.com/FreeterApp/Freeter)發布。 在這篇簡短的文章中，我將使用三個工作流程作為範例，向您展示如何使用 Freeter 來提高工作效率。我希望這能為您提供一些關於如何提高工作效率的想法。 --- 工作流程 ---- 首先，我分析了我的工作流程以及我在專案工作中尋找所需內容時經常做的所有事情： 1. 當我開發應用程式或網站時，我經常需要能夠存取任務管理器、在程式碼和圖像編輯器中開啟專案文件、在特定網站上搜尋圖示和文件、記下快速想法以及打開專案儲存庫在網路瀏覽器中。 2. 當我檢查電子郵件和 Twitter DM 時，我需要存取網頁郵件和 Twitter DM 頁面。我有多個帳戶，需要使用特定於專案的帳戶登入。 3. 當我發布新版本的應用程式時，我需要在終端應用程式中執行發布命令，打開git存儲庫中的發布頁面，打開任務管理器並打開Freeter社區中的“計劃功能”帖子編輯器。 現在是時候將它們轉變為 Freeter 工作流程了。 應用程式/網站開發 --------- 為了快速存取開發應用程式/網站所需的內容，我使用以下小工具設定了工作流程畫面： - 任務：網頁小工具，將專案的任務管理器直接嵌入到工作流程畫面中。 - 編輯程式碼：檔案開啟器小工具，用於在程式碼編輯程式中開啟專案資料夾。 - 編輯模型：文件開啟器小部件，用於在圖像編輯程式中開啟模型檔案。 - MDN：Web 查詢小工具，用於搜尋 MDN Web 文件網站。 - Node.js 文件：Web 查詢小工具，用於搜尋 Node.js 文件網站。 - 大綱圖示：Web 查詢小工具，用於搜尋帶有圖示的網站，並按大綱圖示進行過濾。 - 填滿圖示：Web 查詢小工具，用於搜尋帶有圖示的網站，並按填滿圖示進行過濾 - 註：註釋小部件，用於在開發功能時記下快速想法。 - 開啟儲存庫：連結開啟器小工具，用於在 Web 瀏覽器中開啟專案儲存庫。 - 錯誤報告：連結開啟器小工具，用於在網頁瀏覽器中開啟錯誤報告頁面。 - 功能請求：連結開啟器小工具，用於在 Web 瀏覽器中開啟功能請求頁面。 ![應用程式開發工作流程螢幕](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c0ay12255rcfctnvbb1.png) 此工作流程使我能夠立即切換到開發上下文，只需單擊即可啟動啟動開發過程所需的一切，快速搜尋文件和圖標，並快速存取任務清單。 留言 -- 為了檢查電子郵件和 Twitter 私信，我使用兩個網頁小工具設定了工作流程： - 嵌入 Google Mail 收件匣頁面。 - 嵌入 Twitter DM 頁面。 我還在小部件設定中將 Session Scope 設定為 Project，以便我可以在其他專案中以不同帳戶登入。 ![訊息工作流程螢幕](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pz09rm70xn2rg5bog0z1.png) 此工作流程使我能夠快速同時存取專案特定帳戶的 Google Mail 和 Twitter DM。 新發布 --- 為了發布應用程式的新版本，我使用這五個小部件設定了工作流程： - 發布：Commander 小工具，用於在終端機中執行命令列，請求新版本號並啟動新版本的草稿建置。 - 開啟版本：連結 Opener 小工具，用於在 Web 瀏覽器中開啟版本頁面。 - 任務：應用程式開發工作流程中的任務副本。我需要它來查看當前版本中所有已完成的任務。 - 規劃功能：網頁小工具，將 Freeter 社群的「排程功能」頁面嵌入到工作流程畫面中。在它的幫助下，我更新了計劃的功能並發布了新版本中已實現的功能。 - 發布步驟：注意widget，不要忘記在發布過程中做一些事情。 ![新版本工作流程畫面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96t0ka8kxlrcqzo4yonu.png) 借助這個工作流程，我可以輕鬆發布新版本並發布有關新功能的更新。 像超級英雄一樣在工作流程之間切換 ---------------- 現在，當我在專案和工作流程之間切換時，只需按`Ctrl+Shift+F`將 Freeter 帶到前面，打開我當時需要的工作流程選項卡，然後立即開始工作。 我希望這也能激勵您組織您的工作流程。若要開始使用，請造訪[Freeter 主頁](https://freeter.io/?ref=devto)。 --- 原文出處：https://dev.to/alexk/how-i-boosted-my-productivity-while-working-on-multiple-projects-3h71

0個讚   0留言 63瀏覽

Docker 掌握：初學者和專業人士的全面指南

Docker 是一個功能強大的平台，可簡化輕量級、可移植容器中應用程式的建立、部署和管理。它允許開發人員將應用程式及其相依性打包到標準化單元中，以實現無縫開發和部署。 Docker 增強了不同環境之間的效率、可擴展性和協作，使其成為現代軟體開發和 DevOps 實踐的重要工具。 我們將深入研究 Docker 的各個方面，從安裝和配置到掌握映像、儲存、網路和安全性。 安裝與配置 ----- 下面給出了在 CentOS 和 Ubuntu 上安裝 Docker Community Edition (CE) 的基本指南。 **在 CentOS 上安裝 Docker CE** - 安裝所需的軟體包： `sudo yum install -y () device-mapper-persistent-data lvm2` - 新增 Docker CE yum 儲存庫： `sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo` - 安裝 Docker CE 軟體包： `sudo yum install -y docker-ce-18.09.5 docker-ce-cli-18.09.5 containerd.io` - 啟動並啟用 Docker 服務： `sudo systemctl 啟動 docker sudo systemctl 啟用 docker` 將使用者加入Docker群組，授予使用者執行Docker命令的權限。下次登入後它將可以存取 Docker。 `sudo usermod -a -G docker` **在 Ubuntu 上安裝 Docker CE** - 安裝所需的軟體包： `sudo apt-get 更新 sudo apt-get -y install apt-transport-https ca-certificates curl gnupg-agent software-properties-common` - 新增 Docker 儲存庫的 GNU Privacy Guard (GPG) 金鑰： `curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -` - 新增 Docker Ubuntu 儲存庫： `sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable` - 安裝包： `sudo apt-get install -y docker-ce=5:18.09.5~3-0~ubuntu-bionic docker-ce-cli=5:18.09.5~3-0~ubuntu-bionic containerd.io` 將使用者加入Docker群組，授予使用者執行Docker命令的權限。下次登入後它將可以存取 Docker。 `sudo usermod -a -G docker` **選擇儲存驅動程式** 儲存驅動程式是處理容器內部儲存的可插入驅動程式。 CentOS和Ubuntu系統的預設驅動程式是overlay2。 若要確定目前的儲存驅動程式： `docker info | grep "Storage"` 選擇不同儲存驅動程式的一種方法是將`--storage-driver`標誌傳遞給 Docker 守護程式。設定儲存驅動程式的建議方法是使用守護程式設定檔。 - 建立或編輯守護程序設定檔： `sudo vi /etc/docker/daemon.json` - 新增儲存驅動程式值： `"storage-driver": "overlay2"` 請記住在進行任何更改後重新啟動 Docker，然後檢查狀態。 `sudo systemctl 重新啟動 docker sudo systemctl 狀態泊塢窗` **執行容器** `docker run IMAGE[:TAG] [COMMAND] [ARGS]` `IMAGE` ：指定執行容器的映像。 `COMMAND and ARGS` ：在容器內執行指令。 `TAG` ：指定影像標籤或版本 `-d` ：以分離模式運作容器。 `--name NAME` ：為容器指定一個指定的名稱，而不是通常隨機分配的名稱。 `--restart RESTART` ：指定 Docker 何時自動重新啟動容器。 - `no (default)` ：從不重新啟動容器。 - `on-failure` ：僅當容器失敗時（以非零退出程式碼退出）。 - `always` ：無論成功或失敗，始終重新啟動容器。 - `unless-stopped` ：無論容器成功或失敗，始終重新啟動容器，並且在守護程序啟動時，除非手動停止容器。 `-p HOST_PORT` : CONTAINER\_PORT：發布容器的連接埠。 HOST\_PORT 是在主機上偵聽的端口，到該端口的流量將映射到容器上的 CONTAINER\_PORT。 `--memory MEMORY` ：對記憶體使用設定硬性限制。 `--memory-reservation MEMORY` ：設定記憶體使用的軟限制。 `docker run -d --name nginx --restart unless-stopped -p 8080:80 --memory 500M --memory-reservation 256M nginx:latest` 用於管理正在執行的容器的一些命令是： `docker ps` ：列出正在執行的容器。 `docker ps -a` ：列出所有容器，包括已停止的容器。 `docker container stop [alias: docker stop]` ：停止正在運作的容器。 `docker container start [alias: docker start]` ：啟動已停止的容器。 `docker container rm [alias: docker rm]` ：刪除容器（必須先停止） **升級 Docker 引擎** 停止 Docker 服務： `sudo systemctl stop docker` 安裝所需版本的 docker-ce 和 docker-ce-cli： `sudo apt-get install -y docker-ce=<new version> docker-ce-cli=<new version>` 驗證目前版本 `docker version` 鏡像建立、管理和註冊 ---------- 鏡像是一個可執行包，包含執行容器所需的所有軟體。 使用映像執行容器： `docker run IMAGE` 下載圖片： `docker拉映像 docker鏡像拉取鏡像` 映像和容器使用分層檔案系統。每層僅包含與前一層的差異。 使用以下命令查看影像中的檔案系統層： `docker image history IMAGE` Dockerfile 是一個定義了一系列指令並用於建立映像的檔案。 ``` # Use the official Nginx base image FROM nginx:latest # Set an environment variable ENV MY_VAR=my_value # Copy custom configuration file to container COPY nginx.conf /etc/nginx/nginx.conf # Run some commands during the build process RUN apt-get update && apt-get install -y curl # Expose port 80 for incoming traffic EXPOSE 80 # Start Nginx server when the container starts CMD ["nginx", "-g", "daemon off;"] ``` 建構圖像： `docker build -t TAG_NAME DOCKERFILE_LOCATION` Dockerfile 指令： `FROM` ：指定用於正在建置的 Docker 映像的基礎映像。它定義了映像的起點，可以是 Docker Hub 或私有註冊表上可用的任何有效映像。 `ENV` ：設定影像內的環境變數。在建置過程和容器執行時可以存取這些變數。 `COPY or ADD` ：將檔案和目錄從建置上下文（Dockerfile 所在的目錄）複製到映像中。 COPY 通常更適合簡單的文件複製，而 ADD 支援附加功能，例如解壓縮存檔。 `RUN` ：在建置過程中執行指令。您可以使用 RUN 安裝依賴項、執行腳本或執行任何其他必要的任務。 `EXPOSE` ：通知 Docker 容器將在執行時間監聽指定的網路連接埠。它不會將連接埠發佈到主機或使容器可以從外部存取。 `CMD or ENTRYPOINT` ：指定從映像啟動容器時要執行的指令。 CMD 提供可以覆寫的預設參數，而 ENTRYPOINT 指定不能覆寫的指令。 `WORKDIR` ：設定任何後續 RUN、CMD、ENTRYPOINT、COPY 或 ADD 指令的工作目錄。 `STOPSIGNAL` ：設定將用於停止容器程序的自訂訊號。 `HEALTHCHECK` ：設定 Docker 守護程式將使用的指令來檢查容器是否健康 Dockerfile 中的多階段建置是一種用於建立更有效率、更小的 Docker 映像的技術。它涉及在 Dockerfile 中定義多個階段，每個階段都有自己的一組指令和依賴項。 包含多階段建置定義的範例 Dockerfile 是： ``` # Build stage FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build WORKDIR /app # Copy and restore project dependencies COPY *.csproj . RUN dotnet restore # Copy the entire project and build COPY . . RUN dotnet build -c Release --no-restore # Publish the application RUN dotnet publish -c Release -o /app/publish --no-restore # Runtime stage FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS runtime WORKDIR /app COPY --from=build /app/publish . # Expose the required port EXPOSE 80 # Set the entry point for the application ENTRYPOINT ["dotnet", "YourApplication.dll"] ``` **管理影像** 影像管理的一些關鍵命令是： 列出系統上的影像： `docker image ls` 列出系統上的映像，包括中間映像： `docker image ls -a` 取得有關圖像的詳細資訊： `docker image inspect <IMAGE>` 刪除影像： `docker rmi docker 映像 rm docker 映像 rm -f ` 只有當沒有容器或其他圖像標籤引用圖像時，圖像才會被刪除。尋找並刪除懸空或未使用的圖像： `docker image prune` **Docker 註冊表** Docker 註冊表可作為儲存和共用 Docker 映像的集中儲存庫。 Docker Hub 是由 Docker 管理的預設、公開可用的註冊表。透過利用註冊表鏡像，我們可以免費設定和管理我們自己的私有註冊表。 執行一個簡單的註冊表： `docker run -d -p 5000:5000 --restart=always --name registry registry:2` 將圖像上傳到註冊表： `docker push <IMAGE>:<TAG>` 從註冊表下載映像： `docker pull <IMAGE>:<TAG>` 登入註冊表： `docker login REGISTRY_URL` 有兩種身份驗證方法可用於使用不受信任或自簽名憑證連接到私有註冊表： **安全性**：這涉及將註冊表的公共憑證新增至 /etc/docker/certs.d/ 目錄。 **Insecure** ：此方法需要將登錄檔新增至 daemon.json 檔案中的 insecure-registries 清單中，或使用 --insecure-registry 標誌將其傳遞給 dockerd。 **儲存和磁碟區** 儲存驅動程式控制如何在 Docker 主機上儲存和管理映像和容器。 Docker 使用可插拔架構支援多種儲存驅動程式。 **overlay2** ：所有 Linux 發行版的首選 **fusion-overlayfs** ：僅適用於執行 Rootless Docker（不是 Ubuntu 或 Debian 10） **vfs** ：用於測試目的，以及無法使用寫入時複製檔案系統的情況。 **儲存型號** \*\*檔案系統儲存：\*\* - 資料以常規檔案的形式儲存在主機磁碟上 - 有效利用記憶體 - 寫入繁重的工作負載效率低下 - overlay2使用 **區塊儲存：** - 使用特殊的區塊儲存設備將資料儲存在區塊中 - 高效率處理寫入繁重的工作負載 - 由 btrfs 和 zfs 使用 **物件儲存：** - 將資料儲存在外部基於物件的儲存中 - 應用程式必須設計為使用基於物件的儲存。 - 靈活且可擴展。 **配置overlay2儲存驅動** 停止 Docker 服務： `sudo systemctl stop docker` 建立或編輯守護程序設定檔： `sudo vi /etc/docker/daemon.json` 新增/編輯儲存驅動程式值： `"storage-driver": "overlay2"` 請記住在進行任何更改後重新啟動 Docker，然後檢查狀態。 `sudo systemctl 重新啟動 docker sudo systemctl 狀態泊塢窗` **Docker 卷** Docker 上有兩種不同類型的資料掛載： **Bind Mount** ：將主機上的特定目錄掛載到容器。它對於在容器和主機之間共用設定檔和其他資料非常有用。 **命名磁碟區**：將目錄掛載到容器，但 Docker 動態控製磁碟區在磁碟上的位置。 在容器中新增綁定掛載或磁碟區有不同的語法： \_-v 語法 \_ 綁定安裝：來源以正斜線“/”開頭，這使其成為綁定安裝。 `docker run -v /opt/data:/tmp nginx` 命名卷：來源只是一個字串，這表示這是一個磁碟區。如果不存在具有所提供名稱的捲，它將自動建立。 `docker run -v my-vol:/tmp nginx` *--掛載語法* 綁定掛載： `docker run --mount source=/opt/data,destination=/tmp nginx` 命名卷： `docker run --mount source=my-vol,destination=/tmp nginx` 我們可以將相同的磁碟區掛載到多個容器，從而允許它們共享資料。我們也可以自己建立和管理卷，而無需執行容器。 一些常見且有用的指令： `docker volume create VOLUME` ：建立一個磁碟區。 `docker volume ls` ：列出卷。 `docker volume inspect VOLUME` ：檢查卷。 `docker volume rm VOLUME` ：刪除磁碟區。 **影像清理** 檢查Docker的磁碟使用情況： `docker system df` `docker system df -v` 刪除未使用或懸空的影像： `docker 映像修剪 docker映像修剪-a` Docker 網路 --------- Docker 容器網路模型 (CNM) 是一個概念模型，描述 Docker 網路的元件和概念。 Docker CNM 有多種實作： **沙箱**：一個隔離單元，包含與單一容器關聯的所有網路元件。 **端點**：將一個沙箱連接到一個網路。 **網路**：可以相互通訊的端點的集合。**網路驅動程式**：可插拔驅動程序，提供 CNM 的特定實作。 **IPAM 驅動程式**：提供 IP 位址管理。分配和指派 IP 位址。 **內建網路驅動程式** **Host** ：此驅動程式將容器直接連接到主機的網路堆疊。它不提供容器之間或容器與主機之間的隔離。 `docker run --net host nginx` **Bridge** ：此驅動程式使用虛擬橋接器介面在同一主機上執行的容器之間建立連線。 `docker 網路建立 --driver 橋 my-bridge-net docker run -d --network my-bridge-net nginx` **Overlay** ：此驅動程式使用路由網格來連接多個 Docker 主機（通常在 Docker 群組中）的容器。 `docker 網路建立 --driver 覆蓋 my-overlay-net docker 服務建立 --network my-overlay-net nginx` **MACVLAN** ：此驅動程式將容器直接連接到主機的網路接口，但使用特殊配置來提供隔離。 `docker網路建立-d macvlan --subnet 192.168.0.0/24 --gateway 192.168.0.1 -oparent=eth0 my-macvlan-net docker run -d --net my-macvlan-net nginx` **None** ：此驅動程式提供沙箱隔離，但它不提供容器之間或容器與主機之間的網路的任何實作。 `docker run --net none -d nginx` **建立 Docker 橋接網絡** 它是預設驅動程式。因此，任何在未指定驅動程式的情況下建立的網路都將是橋接網路。 建立橋接網路。 `docker network create my-net` 在橋接網路上執行容器。 `docker run -d --network my-net nginx` 預設情況下，同一網路上的容器和服務只需使用容器或服務名稱即可相互通訊。 Docker 在網路上提供 DNS 解析，使其能夠正常運作。 提供網路別名以提供存取容器或服務的附加名稱。 `docker run -d --network my-net --network-alias my-nginx-alias nginx` 當必須與 Docker 網路互動時，一些有用的命令是： `docker network ls` ：列出網路。 `docker network inspect NETWORK` ：檢查網路。 `docker network connect CONTAINER NETWORK` ：將容器連接到網路。 `docker network disconnect CONTAINER NETWORK` ：斷開容器與網路的連接。 `docker network rm NETWORK` ：刪除網路。 **建立 Docker 覆蓋網絡** 建立覆蓋網路： `docker network create --driver overlay NETWORK_NAME` 建立使用網路的服務： `docker service create --network NETWORK_NAME IMAGE` **網路故障排除** 查看容器日誌： `docker logs CONTAINER` 查看服務的所有任務的日誌： `docker service logs SERVICE` 查看Docker守護程序日誌： `sudo jounralctl -u docker` 我們可以使用nicolaka/netshoot鏡像來執行網路故障排除。它附帶了各種有用的網路相關工具。我們可以將一個容器注入另一個容器的網路沙箱中以進行故障排除。 `docker run --network container:CONTAINER_NAME nicolaka/netshoot` **配置 Docker 使用外部 DNS** 在 daemon.json 中為 Docker 容器設定係統範圍的預設 DNS： `{ “DNS”：\[“8.8.8.8”\] }` 為單一容器設定 DNS。 `docker run --dns 8.8.4.4 IMAGE` 安全 -- **簽署映像並啟用 Docker 內容信任** Docker Content Trust (DCT) 是一項功能，可讓我們在執行映像之前對映像進行簽名並驗證簽名。透過設定環境變數啟用 Docker Content Trust： `DOCKER_CONTENT_TRUST=1` 如果映像未簽署或在啟用 Docker Content Trust 的情況下簽章無效，系統將不會運作映像。 使用以下命令簽署並推送映像： `docker trust sign` 當 DOCKER\_CONTENT\_TRUST=1 時，docker push 在推送之前會自動對映像進行簽署。 **預設 Docker 引擎安全性** 基本的 Docker 安全性概念： Docker 使用命名空間將容器程序彼此隔離以及與主機隔離。這可以防止攻擊者在設法獲得對一個容器的控制時影響或獲得對其他容器或主機的控制。 Docker 守護程式必須以 root 存取權限執行。在允許任何人與守護進程互動之前，請注意這一點。它可用於存取整個主機。 Docker 利用 Linux 功能為容器程序分配精細權限。例如，偵聽低埠（低於 1024）通常需要進程以 root 身分執行，但 Docker 使用 Linux 功能允許容器偵聽連接埠 80，而無需以 root 身分執行。 **保護 Docker 守護程式 HTTP 套接字的安全** 為 Docker 伺服器產生憑證授權單位和伺服器憑證。 ``` openssl genrsa -aes256 -out ca-key.pem 4096` `openssl req -new -x509 -days 365 -key ca-key.pem -sha256 -out ca.pem -subj "/C=US/ST=Texas/L=Keller/O=Linux Academy/OU=Content/CN=$HOSTNAME" openssl genrsa -out server-key.pem 4096 ` `openssl req -subj "/CN=$HOSTNAME" -sha256 -new -key server-key.pem -out server.csr \ echo subjectAltName = DNS:$HOSTNAME,IP:,IP:127.0.0.1 >> extfile.cnf ` `echo extendedKeyUsage = serverAuth >> extfile.cnf ` `openssl x509 -req -days 365 -sha256 -in server.csr -CA ca.pem -CAkey ca-key.pem -CAcreateserial -out server-cert.pem -extfile extfile.cnf` Generate client certificates: `openssl genrsa -out key.pem 4096 openssl req -subj '/CN=client' -new -key key.pem -out client.csr echo extendedKeyUsage = clientAuth > extfile-client.cnf openssl x509 -req -days 365 -sha256 -in client.csr -CA ca.pem -CAkey ca-key.pem \ -CAcreateserial -out cert.pem -extfile extfile-client.cnf ``` 對憑證文件設定適當的權限： `chmod -v 0400 ca-key.pem key.pem server-key.pem chmod -v 0444 ca.pem server-cert.pem cert.pem` 將 Docker 主機配置為使用 tlsverify 模式以及先前建立的憑證： ``` sudo vi /etc/docker/daemon.json { "tlsverify": true, "tlscacert": "/home/user/ca.pem", "tlscert": "/home/user/server-cert.pem", "tlskey": "/home/user/server-key.pem" } ``` 編輯 Docker 服務文件，尋找以 ExecStart 開頭的行並更改 -H。 `sudo vi /lib/systemd/system/docker.service` `ExecStart=/usr/bin/dockerd -H=0.0.0.0:2376 --containerd=/run/containerd/containerd.sock` `sudo systemctl daemon-reload` `sudo systemctl restart docker` 將 CA 憑證和用戶端憑證檔案複製到客戶端電腦。 在用戶端電腦上，設定用戶端以安全地連線到遠端 Docker 守護程式： `mkdir -pv ~/.docker` `cp -v {ca,cert,key}.pem ~/.docker` `export DOCKER_HOST=tcp://:2376 DOCKER_TLS_VERIFY=1` 測試連接： `docker version` 結論 -- 總而言之，掌握 Docker 可以簡化安裝、設定、映像管理、儲存、網路和安全性，從而改變您的開發工作流程。本指南為您提供必要的知識和實務技能，使您能夠有效率地建立、發布和執行應用程式。利用 Docker 的強大功能將您的容器管理提升到一個新的水平。 --- 原文出處：https://dev.to/theyasirr/docker-mastery-a-comprehensive-guide-for-beginners-and-pros-2p18

0個讚   0留言 33瀏覽

Web 開發人員的頂級工具

**嘿，網頁開發者們！** 如果您是在廣闊的 Web 開發世界中揚帆起航的新手，擁有正確的工具可以決定您的旅程的成敗，有時很難選擇正確的工具。有太多可供選擇！ 🤯 在本文中，我們將深入探討一些必備工具，這些工具不僅流行，而且能夠改變遊戲規則，提高您的工作效率，簡化複雜的任務，並使您的編碼生活變得更加輕鬆（也更有趣！ ） 。 *PS 本文適合初學者，但歡迎更多經驗豐富的開發人員閱讀並加入他們的技巧。* --- ### 1. 程式碼編輯器和 IDE 程式碼編輯器是專門為編輯程式碼而設計的程式。它提供語法突出顯示、自動完成和除錯工具等功能，使編碼更有效率、更不易出錯。 **Visual Studio 程式碼（VS 程式碼）** VS Code 是一個輕量級但功能強大的原始程式碼編輯器，可以在桌面上執行。它支援 JavaScript、TypeScript、Node.js，並擁有豐富的其他語言擴充生態系統（包括 C++、C#、Python、PHP 等）。其內建的 Git 支援、強大的除錯和智慧程式碼完成 (IntelliSense) 使其成為開發人員的最愛。 **崇高的文字** Sublime Text 以其速度和效率而聞名，是一款多功能編輯器，可處理多個專案並在多個專案之間切換。其大量的鍵盤快捷鍵提高了工作效率，並允許開發人員更快地編寫和編輯程式碼。 **JetBrains WebStorm** WebStorm 專為 JavaScript 開發人員量身打造。它為 JavaScript、HTML 和 CSS 提供高級編碼幫助，包括自動完成、自動重構和強大的導航工具。 WebStorm 與流行的版本控制系統集成，並為建立 Web、伺服器和行動應用程式提供流暢的開發人員體驗。 --- ### 2.版本控制系統 版本控制系統是幫助軟體團隊管理原始碼隨時間變化的軟體工具。他們在一種特殊的資料庫中追蹤對程式碼的每次修改。如果發生錯誤，開發人員可以倒轉並比較早期版本的程式碼，以幫助修復錯誤，同時最大限度地減少對所有團隊成員的干擾。 **git** Git 是當今世界上使用最廣泛的現代版本控制系統。它允許多個開發人員在複雜的專案上一起工作，而不必擔心發生衝突的變更。 GitHub 和 GitLab 等平台也在 Git 功能之上提供了視覺化介面，讓管理專案變得更容易。 **水銀** 作為 Git 的替代方案，Mercurial 的設計考慮了簡單性和效能。它是一個分散式版本控制系統，允許開發人員有效管理大型程式碼庫。 --- **想要探索 Web 開發的未來嗎？** {% cta https://www.webcrumbs.org/waitlist %} 透過 Webcrumbs 了解更多 {% endcta %} --- ### 3. 前端框架 前端框架是允許開發人員建立使用者介面的標準結構。它提供了一種組織和建構程式碼的方法，並提供可重複使用的元件，從而使 Web 開發更快、更容易且更具可擴展性。使用框架可以大幅簡化開發過程，特別是對於需要快速建置的複雜專案。 **反應** React 是一個聲明式、高效且靈活的 JavaScript 程式庫，用於建立使用者介面。它允許開發人員從稱為“元件”的小型且獨立的程式碼片段組成複雜的 UI。 **視圖.js** Vue.js 因其簡單性而受到讚賞，並且對於初學者來說很容易上手。它的核心庫僅專注於視圖層，因此可以輕鬆選擇並與其他庫或現有專案整合。 **角** Angular 是一個使用 HTML 和 TypeScript 建立用戶端應用程式的平台和框架。它非常適合開發大型企業應用程式，並支援廣泛的功能，例如雙向資料綁定、模組化、模板化、AJAX 處理、依賴項注入等。 --- ### 4. CSS 框架與預處理器 CSS 框架是預先準備好的軟體框架，旨在允許使用級聯樣式表語言更輕鬆、更符合標準的網頁樣式。另一方面，預處理器為 CSS 加入了額外的功能，以保持樣式表組織良好，並允許我們更快地編寫程式碼。 **引導程式** Bootstrap 是世界上最受歡迎的框架，用於建立響應式、行動優先的網站。它包括用於排版、表單、按鈕、導航和其他介面元件的基於 HTML 和 CSS 的設計模板，以及可選的 JavaScript 擴充功能。 **順風 CSS** Tailwind CSS 是一個實用程式優先的 CSS 框架，用於快速建立自訂設計。與其他 CSS 框架不同，Tailwind 不附帶預定義元件，而是提供實用程式類別來直接在標籤中建立獨特的設計。 **薩斯** Sass 是一種成熟、穩定、強大的專業級 CSS 擴展語言。它有助於讓 CSS 再次變得有趣，並包含變數、巢狀和混合等功能，允許更靈活和可重複使用的程式碼。 --- ### 5. 建置工具和任務執行器 建置工具和任務執行程式是在軟體開發過程中自動執行重複任務的軟體，例如縮小程式碼、將原始程式碼編譯為二進位程式碼、打包二進位程式碼以及執行自動化測試。這種自動化使開發過程更加一致，並為開發人員節省了大量時間。 **網頁包** Webpack 是現代 JavaScript 應用程式的靜態模組捆綁器。當 Webpack 處理您的應用程式時，它會在內部建立一個依賴關係圖，該圖會對應您的專案所需的每個模組並產生一個或多個捆綁包。 **咕嚕咕嚕** Gulp 是一個工具包，可協助開發人員自動執行開發工作流程中痛苦或耗時的任務。它用於常見任務的任務自動化，例如 CSS 縮小、圖像優化、程式碼檢查和建立網頁。 ### 您使用哪些工具？ 我們希望本指南可以幫助您選擇合適的工具來增強您的 Web 開發專案。嘗試將其中一些工具整合到您的工作流程中，並親自看看有何不同。 與我們分享您的經驗或推薦其他值得一提的工具！ 在 WebCrumbs，我們正在發展一個供開發人員相處和共同學習的社群！ {% cta [https://discord.gg/4PWXpPd8HQ](https://discord.gg/4PWXpPd8HQ "https://discord.gg/4PWXpPd8HQ") %} 在這裡加入我們{% endcta %} --- 原文出處：https://dev.to/buildwebcrumbs/top-tools-for-modern-web-developers-1ba3

0個讚   0留言 24瀏覽

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

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

0個讚   0留言 41瀏覽

21 個可提高您工作效率的 VS Code 擴展

開發者們大家好👋 身為開發人員，我們大部分時間都花在 VS Code 上。在這篇文章中，我將分享一些 VS Code 擴展，它們可以幫助提高您的工作效率並節省您的寶貴時間。 讓我們開始吧🚀 Codiumate -- ![鈉鹽](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmm61xovmha09i9us1fl.png) > ✨ Codiumate 使用 AI 產生測試、檢視測試結果、修復用 Python、JavaScript、TypeScript 和 Java 等各種程式語言編寫的程式碼的錯誤和錯誤。它在您的 IDE 中充當您的私人代理或助手。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=Codium.codium) Partial Diff ---- ![部分差異](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uqlcq8e60lkthg7dosx.png) > ✨ Partial Diff 擴充功能可讓您比較同一文件內或不同文件中的不同文字選擇，從而更容易發現變更和差異。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff) Git Graph ---- ![git圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww8j9qvrsr66wmn0mosw.png) > ✨ Git Graph 擴充功能為您提供了 Git 儲存庫的視覺化表示，讓您更容易理解和管理分支、提交和合併，您還可以從圖表中執行 Git 操作。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) Path Intellisense ------ ![路徑智能](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v22b2kyhxwwfpzpnwtc4.png) > ✨ Path Intellisense 擴充擴展了 VS Code 中的預設路徑完成，以包含工作區中的所有可用路徑，即使它們尚未匯入。 🔹連結 [👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) Error Lens ---- ![誤差透鏡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui3i6k3zm1b64r1ga7xb.png) > ✨ Error Lens 擴充功能透過直接在程式碼中顯示錯誤訊息來增強 VS Code 中的錯誤突出顯示。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) SQL工具 ----- ![SQL工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ceg4gtsb96fme1in7z2.png) > ✨ SQLTools 是 VS Code 的輕量級 SQL 用戶端，它為您提供資料庫管理、查詢執行，並直接在編輯器中提供視覺化結果。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools) Markdown 多合一 ------------ ![Markdown 多合一](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3k7dpy89w65i30ggq8ih.png) > ✨ Markdown All in One 擴展為 Markdown 編輯提供全面支持，包括快捷方式、目錄生成等。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) Turbo 控制台日誌 ----------- ![Turbo 控制台日誌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ycisuti1dsz1z632olq.png) > ✨ Turbo Console Log 擴充功能會自動將有意義的 console.log 語句新增到您的程式碼中，這可以在偵錯過程中節省大量時間。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) Quokka.js --------- ![Quokka.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bko1yy8akuwm36ny4j4u.png) > ✨ Quokka.js 是一款用於快速 JavaScript / TypeScript 原型設計的開發人員生產力工具。當您鍵入時，執行時間值會更新並顯示在 IDE 中程式碼旁邊。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) 專案經理 ---- ![專案經理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drvs445isps5ydysl58v.png) > ✨ 專案管理器可讓您在 VS Code 中的不同專案之間輕鬆切換，使其成為管理和導航多個專案的捷徑。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) Todo Tree --- ![所有樹](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr5zknvtyuujeipsmbh0.png) > ✨ Todo Tree 擴充功能掃描您的程式碼中的註解標籤，例如 TODO 和 FIXME，並將它們顯示在活動欄中的樹狀視圖中。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) TabNine ---- ![選項卡九](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bycu1zglpkloehx8yq1d.png) > ✨ TabNine 是一款支援多種程式語言的人工智慧程式碼補全擴展，它為您提供智慧程式碼建議、即時程式碼補全、聊天和程式碼生成。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) Better Comments ----- ![更好的評論](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkjarirc3nsaeqg509zr.png) > ✨ Better Comments 擴充功能可協助您在程式碼中建立或編寫更人性化的註解。它允許您使用不同的顏色將註釋分類為警報、查詢、待辦事項等。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) Polacode --- ![波拉碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0shnpzcdku2prtrafvl.png) > ✨ Polacode 是一款時尚的程式碼螢幕截圖工具，可讓您直接從 VS Code 建立漂亮的程式碼螢幕截圖。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) REST Client ----- ![休息客戶端](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s54cm9rrjwllxjipi9y0.png) > ✨ REST 用戶端可讓您直接在 VS Code 中發送 HTTP 請求並查看回應，從而更輕鬆地測試和偵錯 API。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) HTML CSS 支持 ----------- ![HTML CSS 支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk68l0ra0jjpy07ebe0t.png) > ✨ HTML CSS 支援根據工作區中的 CSS 檔案為 HTML 類別屬性提供 CSS 類別和 ID 名稱補全。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) Git Lens ---- ![吉特透鏡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyhhk9m4xezrl6gqrrh9.png) > ✨ GitLens 擴充功能增強了 VS Code 的內建 Git 功能。它可以幫助您視覺化程式碼作者、無縫導航和探索 Git 儲存庫，並深入了解您的程式碼。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) Wakatime ---- ![瓦卡時間](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfs2ux1njyipa8cdc88n.png) > ✨ WakaTime 擴充功能為您的編碼活動提供自動時間追蹤。它可以讓您深入了解自己的編碼習慣，並幫助您更有效地管理時間。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) Bookmarks -- ![書籤](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jn88xn94pg001feiazq.png) > ✨ 書籤擴充功能可協助您在程式碼中導航，輕鬆快速地在重要位置之間移動。不再需要搜尋程式碼。它還支援一組選擇命令，允許您選擇已加入書籤的行以及已加入書籤的行之間的區域。它對於日誌檔案分析非常有用。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) PlantUML ----- ![植物UML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvlanhdp5yx61xteaen1.png) > ✨ PlantUML 擴充功能可讓您從純文字描述建立 UML 圖，從而輕鬆視覺化和記錄您的系統設計。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml) 尾隨空格 ---- ![尾隨空格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55wyje0me31nchvmkk6k.png) > ✨ 尾隨空格擴充會自動反白並刪除程式碼中的尾隨空格，它有助於保持程式碼整潔且一致。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) 這就是這篇文章的內容。感謝您的閱讀💖 > 請在評論中告訴我您最常使用哪一個或任何其他有用的擴充功能👇 在 👉 https://x.com/kiran\_\_a\_\_n X https://github.com/Kiran1689 GitHub 上找到我 https://dev.to/dev\_kiran --- 原文出處：https://dev.to/dev_kiran/21-vs-code-extensions-to-boost-your-productivity-1fil

0個讚   0留言 72瀏覽

編寫 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留言 26瀏覽

Kubernetes 編譯失敗：然後正式機掛掉的情況！

我從來都不是一個大賭徒。過去我可能會下一個小賭注來為超級盃增添趣味，但我並沒有那麼投入，但這並不是什麼瘋狂的事情。真正投入資金需要一定程度的確定性，而我在任何體育賽事、選舉結果或未來預測中都很少有這種確定性。科技領域的確定性非常少。工作保障並不是既定的，產業趨勢潮起潮落，你每天使用的[工具](https://glasskube.dev/guides/kubectl/)和技術堆疊很可能會隨著時間的推移而不斷發展。儘管充滿了不確定性，但還是有一些東西你可以安全地押注，但在某些時候，**你會遭遇中斷。** ![賭場](https://media1.giphy.com/media/26tneF8wxg0H4NrC8/200.webp?cid=ecf05e4725b5vpix4vj3x0ajz06gb8rehvx96kjva729y9nu&ep=v1_gifs_search&rid=200.webp&ct=g) 從事任何時間的 Kubernetes 工程師都可以證明這個現實。在這種情況下，害怕失敗或執行艱鉅的任務來確保[100% 可用性](https://andrewmatveychuk.com/why-99-99-uptime-or-sla-is-bad/)是沒有意義的，如果有任何[錯誤](https://www.amazon.com/Black-Box-Thinking-People-Mistakes-But/dp/1591848229)和中斷應該被視為學習機會，這對於任何渴望成熟並提供高品質的環境來說都是必要的邪惡以可靠的方式提供服務。 有效處理和消化中斷的最佳方法是系統地進行[事後分析](https://www.atlassian.com/incident-management/postmortem/reports)。事實證明，這些是我們尋找模式並綜合中斷所提供的經驗教訓的最敏銳的工具。關於 Kubernetes 叢集故障中常見的模式主題，出現了一些模式。 ![reddit-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xml8lmgs8g9e36624td5.png) DNS、網路和預設資源分配是一些關鍵的罪魁禍首。 ![reddit-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ijimseogd4nn43k5sni.png) 在這篇文章中，我們將分析其中的一些事後分析，並盡力吸收其他人經過艱苦的努力才學到的東西。 故障嚴重程度等級 -------- 並非每次中斷都會產生相同的影響，因此我建立了一個非常科學的分類系統來了解每次 Kubernetes 中斷的影響： **🤷 - 有點糟糕：**微不足道的 Kubernetes 故障 **😅 - 非正式機，但仍然令人煩惱：**我們沒有影響任何客戶，但我們學到了教訓 **🤬 - 休士頓，我們在生產中遇到了問題：**客戶受到影響，職業選擇受到質疑。 ![你被開除了](https://media1.giphy.com/media/xT4uQ7N8UNsoeFAjVS/200.webp?cid=790b76115lk6lg7hzua5e4qexoocj2f0sltdsw5l4ggfcsln&ep=v1_gifs_search&rid=200.webp&ct=g) --- 在我忘記之前，讓我感謝[Glasskube](https://github.com/glasskube/glasskube)讓我花時間建立這樣的內容。如果這是您第一次聽說我們，我們正在努力`Package Manager for Kubernetes` 。 如果您願意支持我們完成這項任務，我們將不勝感激 [⭐️ GitHub 上的 Star Glasskube 🙏](https://github.com/glasskube/glasskube) [![感謝您的支持](https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExOHZxc3Nxbjdyem9kY24xd3k5M3EwY2Q1dmQ3OTA0aTh4c3cycmpkdyZlcD12MV9naWZzX3NlYXJjaCZjdD1n/l3q2wJsC23ikJg9xe/200.webp)](https://github.com/glasskube/glasskube) --- 有點糟糕🤷 ----- 如果你不能笑自己，你還能笑誰？ ### 叢集和節點群組 第一個故事來自您謙虛的記者，他最近使用 AWS 控制台啟動了一個測試 Kubernetes 集群，以快速驗證概念。我已經有一段時間沒有使用 EKSCTL 或某種形式的基礎設施即程式碼定義檔來建立叢集了。 因此，我登入並存取 EKS 控制台，命名我的 Kubernetes 集群，然後點擊「建立」。然後，我按照 CLI 說明配置 kubeconfig 檔案並透過終端連接到我新建立的叢集。 由於渴望測試最新版本的 Glasskube，我將其安裝在叢集中。然而，令我驚訝的是 Pod 的安排時間如此之長。現在回想起來，我很尷尬地承認我花了多長時間才意識到我沒有配置節點組，難怪 Pod 沒有被調度。 ![不為所動](https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExNm9mdzVweWc1cDljdjM3MWpmeTRqcm1sejltZXhzZmZlYzFtMmNtMSZlcD12MV9naWZzX3NlYXJjaCZjdD1n/c5FhF1waAJ5wk/giphy.webp) ### 打電話給消防隊，我忘了加入資源限制。 另一個真實的故事來自另一位Glasskube 成員，由於在本地Minikube 集群中安裝了許多元件（GitLab），他的本地筆記型電腦超載了，筆記型電腦幾乎在他的辦公桌上燒了一個洞，這是一個很好的提醒，要使用資源限制和請求 ![筆記型電腦起火](https://media0.giphy.com/media/dbtDDSvWErdf2/200.webp?cid=ecf05e4775sy7d66ores8c10w1hrw77311mm7m323lkkkqym&ep=v1_gifs_search&rid=200.webp&ct=g) 非正式機，但仍然很煩人😅 ----------- 轉向一些真實的事件，幸運的是這些事件僅限於不會影響付費客戶的叢集。 ### 事件#1：Venafi 的 Webhooks 無回應 [Venafi](https://venafi.com/)是機器身分的控制平面，最近被[Cyberark](https://www.cyberark.com/)收購，Cyberark 在 OPA 方面存在一些問題。完整的屍檢[在這裡](https://venafi.com/blog/gke-webhook-outage/)。 ![快點](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mnqgz5998ynmk3rpipg.png) > **影響：**間歇性 API 伺服器逾時導致節點不健康。 > **涉及：**開放策略代理、節點準備 **逐場比賽** 在計劃的叢集升級期間，儘管有警告並且之前升級成功，但主升級失敗，導致 API 伺服器逾時和節點不穩定。**根本原因是 ConfigMap 更新期間逾時**，由無回應的[OPA](https://www.openpolicyagent.org/) Webhook 觸發。刪除 webhook 恢復了服務，此後他們將其限制在特定的命名空間，加入了 OPA 的活性探針，並更新了文件。 他們強調需要 API 回應時間警報、工作負載探測，並可能使用 Helm 圖表進行部署，以避免將來出現類似問題。他們繼續監控功能的改進並透過 Flightdeck 服務提供見解。 **學習內容：** - 需要對 API 伺服器回應時間發出警報。 - 增加所有工作負載所需的`livenessProbes` 。 - 使用套件管理進行更精細的配置。 > 💡 這事件凸顯了[Glasskube](https://github.com/glasskube/glasskube)旨在解決的用例之一。雖然 Glasskube 尚不支援 OPA 運算符，但我們相信透過強大的 Kubernetes 套件管理器可以避免這個問題。 Glasskube 可輕鬆配置關鍵功能，協助升級，並將 GitOps 方法應用於套件操作員管理，包括回溯和特定命名空間分配。[在這裡](https://github.com/glasskube/glasskube)嘗試一下。 ### 事件#2：當加密貨幣礦工潛入時 [JW Player](https://jwplayer.com/)成為比特幣挖礦惡意軟體的目標，請[在此處](https://medium.com/jw-player-engineering/how-a-cryptocurrency-miner-made-its-way-onto-our-internal-kubernetes-clusters-9b09c4704205)查看完整的事後分析。 ![JW-玩家](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/do39mgvqt5e01ndnk9aw.png) > **影響：**非生產集群被比特幣礦工滲透 > **涉及：** Root存取利用 **逐場比賽** 在 Datadog 向 JW Player 的 DevOps 團隊發出其臨時和開發環境中的平均負載較高的警報後，JW Player 的 DevOps 團隊在其 Kubernetes 叢集上發現了一個加密貨幣挖礦程式。**初步調查發現，有一個gcc進程佔用了100%的CPU，經檢查發現該進程是監控工具Weave Scope發起的礦機**。該礦工利用了面向公眾的 Weave Scope 負載平衡器，允許在容器中執行命令。 立即採取的行動包括停止 Weave Scope、隔離受影響的節點並將其輪換出去。該事件導致 CPU 使用率較高，但沒有服務中斷或資料外洩。該團隊將 Kubernetes 覆蓋的手動安全群組編輯確定為關鍵問題，並強調需要採取適當的配置實踐來防止此類漏洞。 **學習內容：** - 監控負載並不是檢測叢集問題的最佳方法。 - 可能需要`falcon`或`sysdig`等工具 - 需要更強大的 Docker 映像和容器掃描。 - 架構的某些區域需要重新檢視。 - 需要更多的跨團隊資料共享和溝通。 ### 事件 #3：GKE 耗盡 IP 位址 ![愛情假期](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2e5fh4u5u8hxwse1az0s.png) > **影響：**高節點數叢集耗盡了 IP 位址，無法調度新的 Pod。 > **涉及：**子網路、每個節點的預設 IP 分配 **逐場比賽** 當一名團隊成員報告其應用程式的部署時間異常長時，就發生了一起事件。他們很快就發現，雖然一些新部署的 Pod 正在提供流量，但其餘的 Pod 仍處於`pending`狀態。**分析顯示`FailedScheduling`警告顯示資源不足。**儘管部署了叢集自動縮放器，但問題仍然存在，因為他們看到了令人震驚的**「0/256 個節點可用」**訊息。進一步檢查發現，GKE為每個節點預先分配了110個IP，導致IP消耗意外高。了解這一點後，他們調整了每個節點的 Pod 分配，將整體 IP 使用量減少了 30%。此外，他們還探索了子網擴展和增加節點大小等選項以緩解 IP 耗盡，最終優化節點池實例大小以更好地利用資源。 **學習內容：** - 了解 GKE 設定的預設值的重要性。 - [子網路擴充功能](https://cloud.google.com/vpc/docs/create-modify-vpc-networks#expand-subnet)是一個可供您使用的實用工具（儘管關於次要範圍的文件不多）。 - 增加節點池執行個體大小也可以完成這項工作（每個節點執行更多 Pod，然後需要更少的節點）。 休士頓，我們的生產遇到問題了🤬 --------------- 這些類型的中斷**會讓 SRE 徹夜難眠**，當客戶受到影響並且業務價值岌岌可危時，這些都是最重要的經驗教訓和英雄的誕生地。 ### 事件 #1 Skyscanner 只需要幾個字元就可以關閉他們的網站 在這裡我們看到，針對彈性進行了最佳化的架構仍然容易因為一行程式碼而故障。完整的屍檢[在這裡](https://medium.com/@SkyscannerEng/how-a-couple-of-characters-brought-down-our-site-356ccaf1fbc3)。 ![天巡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zma05ic4v2m88e05y797.png) > **影響：**全球 Skyscanner 網站和行動應用程式無法存取 > **涉及：** IaC清單 **逐場比賽** 2021 年 8 月，由於無意中更改了基礎設施配置系統中的根文件，Skyscanner 面臨持續四個多小時的全球中斷。**由於缺少`{{ }}` ，這項變更意外地觸發了全球範圍內關鍵微服務的刪除**，導致網站和行動應用程式無法存取。 ![致命線](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ohytkjb4v3p1c0ekvno.png) 他們迅速解決了這個問題，利用 GitOps 恢復配置並確定關鍵服務的優先順序。 **學習內容：** - 不要進行全域配置部署。 - 需要更徹底的「最壞情況」規劃。 - 驗證備份/復原過程。 - 保持操作手冊最新。 - 超越自動化的潛力。 ### 事件#2 Monzo Bank 的 linkerd 慘敗 英國數位[銀行](https://monzo.com/)艱難地發現了 Kubernetes 的一個嚴重錯誤。完整的屍檢[在這裡](https://community.monzo.com/t/resolved-current-account-payments-may-fail-major-outage-27-10-2017/26296/95)。 ![蒙佐銀行](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tjblle4py5mifmv1s1e.png) > **影響：**預付卡和新活期帳戶下降約1.5小時 > **涉及：** Linkerd、kube-apiserver、etcd **逐場比賽：** 此事件始於例行部署導致支付處理失敗。嘗試回滾變更未成功，導致內部中斷聲明。工程師發現並重新啟動了不健康的`linkerd`實例，但`kube-apiserver`的配置問題導致新的`linkerd`實例無法啟動，從而將中斷升級為整個平台故障。**根本原因可追溯到 Kubernetes 和 etcd 中的錯誤，該錯誤是由最近的叢集重新配置觸發的。**這導致`linkerd`無法接收網路更新，再加上 Kubernetes 和 linkerd 之間的相容性問題。該事件已透過更新 linkerd 並刪除空的 Kubernetes 服務得到解決。 **學習內容：** - 需要新版本的 Linkerd。 - k8s bug 需要修復（現已[修復](https://github.com/kubernetes/kubernetes/issues/47131)）。 - 改進執行狀況檢查、儀表板和警報。 - 改進程序以改善停電期間的內部溝通。 ### 事件 #3 Redis 操作員丟了一個曲線球 Palark 是一家 DevOps 服務供應商，曾試圖保護其 Redis 集群，但最終卻後悔了。[這](https://blog.palark.com/failure-with-redis-operator-and-redis-data-analysis-tools/)是完整的移植剖析 ![帕拉克](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09fk9z0exq8006orscwm.png) > **影響：**加入副本後的生產 Redis 資料 > **涉及：** Redis算子 **逐場比賽** 他們遇到了一個涉及眾所周知的記憶體鍵值儲存 Redis 的事件，他們透過[Redis Operator](https://github.com/spotahome/redis-operator)安裝該儲存來執行 Redis 故障轉移。最初部署了一個 Redis 副本，後來擴展到兩個副本以增強資料庫可靠性。**然而，這個看似微小的變化在部署過程中被證明是災難性的，導致資料遺失。**該事件揭露了 Redis Operator 中的缺陷，主要是其`readiness probe` ，引發了意外的主升級和隨後的資料破壞。使用`Redis-memory-analyzer`等工具進行進一步分析，揭示了對資料庫大小和元素的洞察，從而幫助開發人員優化資料庫和應用程式程式碼，以防止未來發生事件。 **學習內容：** - 使用 Kubernetes Operator 時要非常小心（確保它們成熟且經過充分測試）。 - 他們發現了與 Redis Operators 就緒性探測相關的關鍵錯誤，該錯誤使副本橫向擴展容易導致資料遺失（已[修復](https://github.com/spotahome/redis-operator/releases/tag/v1.0.0-rc.3)）。 - `Redis-memory-analyzer`是Redis資料庫故障排除的最佳工具。 事件 #4 Datadog 的多區域噩夢 -------------------- 多個[Datadog](https://www.datadoghq.com/)區域宕機`systemd-networkd`強制刪除了容器網路介面 (CNI) 插件管理的路由。完整的屍檢 [在這裡](https://www.datadoghq.com/blog/2023-03-08-multiregion-infrastructure-connectivity-issue/)。 ![資料狗](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcobaticca62tpuk7nwq.png) > **影響：**多個地區的使用者無法存取 API 和平台。 > **涉及：** systemd更新、Cilium **逐場比賽** 從 2023 年 3 月 8 日開始，Datadog 經歷了一次影響多個區域的重大中斷，導致用戶無法存取平台、API 和監視器，並影響資料提取。這個問題是由眾多虛擬機器上的 systemd 自動安全性更新觸發的，導致網路中斷，導致數萬個節點離線。恢復涉及恢復運算能力、解決特定於服務的問題以及為客戶提供持續更新。**根本原因被確定為允許自動更新的錯誤配置，該更新已停用。** **學習內容：** - 更強大的混沌測試。 - 需要在停電期間改善與客戶的溝通 - 停電期間狀態頁面不充分。 - 自動更新本身就有風險，應謹慎使用。 ### 事件#5 Reddit 的圓周率日中斷 Reddit 遭受了快速有機成長的後果，他們面臨著殘酷的現實，即許多關鍵的 Kubernetes 叢集不標準化，很容易出現中斷，[這裡是](https://www.reddit.com/r/RedditEng/comments/11xx5o0/you_broke_reddit_the_piday_outage/)完整的 Pi-Day 中斷事後分析。 ![紅迪網](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s1vi0fdjwzps01hgnpj.png) > **影響：**嚴重的跨平台中斷持續 314 分鐘 > **涉及：** Calico、Kubernetes版本更新 **逐場比賽** 2023 年 3 月，Reddit 經歷了一次持續 314 分鐘的嚴重中斷，巧合的是，這發生在圓周率日。嘗試存取網站的用戶要么遇到不堪重負的 Snoo 吉祥物、錯誤訊息，要么看到空的主頁。這次中斷是由 Kubernetes 1.23 升級到 1.24 引發的，這引入了一個以前從未見過的微妙問題。工程團隊近年來一直強調可用性的改進，但發現自己處於一個充滿挑戰的境地，回滾雖然有風險，但卻成為了最佳選擇。 在復原過程中，由於 TLS 憑證和 AWS 容量限制不匹配，因此出現了一些複雜情況，但團隊設法克服了這些挑戰並重新建立了高可用性控制平面。 **進一步調查顯示，根本原因與 Calico 過時的路由反射器配置有關**，由於刪除了「master」節點標籤，此配置與 Kubernetes 1.24 不相容。 **學習內容：** - 出於測試目的改進預生產集群的重要性。 - 需要改進 Kubernetes 元件生命週期管理工具。 - 需要更同質的環境。 - 此外，還需要增加他們的 IaC 和內部技術文件。 結論 -- 正如您所看到的，熵定律很容易適用於 Kubernetes 叢集——破壞它們比讓它們滿意要容易得多。升級、部署、擴展和部署等變更通常會引發中斷，因此您可能傾向於盡量減少中斷。但對於那些努力引領細分市場並滿足不斷變化的客戶需求的組織來說，這不是一個選擇。我們所能期望的最好的結果就是從實踐中學習，並從失敗中學習。從好的方面來說，科技業普遍樂於學習，並能坦然面對失敗（ [在大多數情況下](https://apnews.com/article/cellular-att-verizon-tmobile-outage-02d8dfd93019e79e5e2edbeed08ee450)）。事實上，許多大型企業公開分享事後總結供更大的社區學習，這是一種最佳實踐，其基礎是這樣的假設：故障和中斷是「何時」而不是「是否」的問題。保護我們自己的最好方法就是在他們過去後向他們學習。 > 🫵 那你呢？您是否經歷過任何特別困難的停電並從另一邊講述了這個故事？如果是這樣，請在下面的評論中分享您的經驗。我相信我們很多人都想聽聽這個。 --- 幫助我們製作更多這樣的內容！ -------------- 在[Glasskube，](https://github.com/glasskube/glasskube)我們在此類內容上投入了大量精力，並`next generation package manager for Kubernetes` 。 如果您從我們所做的工作中獲得價值，我們將不勝感激 [⭐️ GitHub 上的 Star Glasskube 🙏](https://github.com/glasskube/glasskube) [![github 上的明星](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExdnhibjU3MnRqeDVydm83ZXNiMHF1YXQ3NW9iMTEwcjFuZmhqcG8ydSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XaFhFM2lVRoVa/giphy.gif)](https://github.com/glasskube/glasskube) --- 原文出處：https://dev.to/glasskube/kubernetes-fail-compilation-but-they-keep-getting-worse-12n2

0個讚   0留言 66瀏覽

每個開發人員都需要了解的 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留言 156瀏覽

在 localhost 設定 SSL 其實只需要 5 秒！

為什麼有人需要為 localhost 開發設定 ssl？ - 在安全的環境中測試您的 Web 應用程式。 - 一些 OAuth 提供者需要 ssl（例如 Google）。 - 測試並找出您的應用程式中是否存在潛在的安全風險（混合內容）。 - 在部署應用程式之前，您需要使用 CORS 和 cookie。 - 在安全的環境中測試服務人員。 - 在安全環境中測試網路推播通知。 身為開發人員，我們都經歷過這種情況。 有困難的方法，也有容易的方法。 如果你在網上搜尋，你只會發現很難的方法。 為本地主機設定 SSL 看似簡單的任務可能會令人驚訝地變成一個長達數小時的考驗，糾纏在手動配置（第一次從來沒有工作）和重複步驟中。 ### 本機上的硬（手動且繁瑣）SSL 設定 傳統上，為 localhost 設定 SSL 涉及一系列繁瑣的步驟： **產生自簽名憑證：**最初，您需要手動建立瀏覽器不可避免地不信任的憑證，然後才能開始。 **編輯 /etc/hosts 文件：**接下來，深入研究 /etc/hosts 等系統文件，將所需的網域（例如 local.whatever）對應到 127.0.0.1。這通常需要像 vi 或 nano 這樣的命令列工具，但並不是每個人都喜歡使用這些工具。 **本機啟動 Web 伺服器：**無論是 Apache、Nginx 或其他伺服器，您都需要在電腦上下載並設定 Web 伺服器。 （我不喜歡，因為它們可能會弄亂我的電腦） **配置 Web 伺服器：**這涉及調整伺服器設定檔以辨識您的新主機名稱和憑證，通常需要您深入研究文件以獲得正確的語法和路徑。 **信任憑證：**最後，您必須說服您的電腦信任您產生的憑證，這通常涉及一些更晦澀的命令或深入探討鑰匙圈存取的廢話。 這個過程不僅麻煩，而且**「每次」**你開始一個新專案或想要快速測試某些東西時都會重複執行。 但現在，5秒內就可以完成。 ### Ophiuchi 簡介：本機 SSL 代理程式變得簡單 現在，想像一個工具可以將所有這些步驟濃縮為快速、無縫的操作。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/142or0wk768jq5ygcgl9.png) 有了 Ophiuchi，為本地主機專案設定 SSL 的整個過程就減少到了幾種類型和點擊次數。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12jdugzgqk61gig10246.png) 以下是它如何簡化每個步驟： **自動憑證產生：** Ophiuchi 會自動處理指定網域的自簽名憑證的建立。無需命令列。沒有麻煩。 **網域對映：** Ophiuchi 使用您選擇的任何網域名稱自動更新您的 /etc/hosts 文件，將其直接對應到您的本機主機環境。 **整合 Web 伺服器：**無需下載和設定單獨的 Web 伺服器； Ophiuchi 附帶了一個整合解決方案，該解決方案已預先配置為開箱即可使用您的 SSL 設定。 （Docker 是必要的。但大多數開發人員自然會使用 docker 來做其他事情。） **即時信任：** Ophiuchi 包含一項功能，可以自動將憑證新增至系統的受信任清單中，從而繞過那些煩人的瀏覽器關於不受信任憑證的警告。 **刪除是EZ：**當您使用完代理伺服器後想要刪除嗎？上面的工作流程只是相反！ **它也很安全：**所有內容（憑證、設定檔）永遠不會離開您的計算機，也不會透過網路共用。 --- ### 為什麼要浪費時間？ 時間很寶貴。為什麼像透過 HTTPS 進行測試這樣基本的事情會成為開發工作流程中的障礙？有了蛇夫座，就不再是這樣了。該工具是由開發人員為開發人員設計的，他們了解您的時間最好花在建立上，而不是配置上。 無論您是在處理個人專案還是測試企業級應用程式，Ophiuchi 都能確保您只需單擊幾下滑鼠即可順利、快速地在本機上從 HTTP 轉換為 HTTPS。過去需要幾個小時的事情現在只需幾秒鐘，讓您可以專注於真正重要的事情：建立出色的軟體。 我不得不提的是它仍然是阿爾法。但我時不時地使用它。我的隊友也經常使用蛇夫座，他們變得比以前更快樂！ 為什麼不試試呢？ https://www.ophiuchi.dev --- 編輯： === 我（作者）是這個應用程式的建立者。 正如評論中提到的，我知道安全風險是本機桌面應用程式的首要任務。此應用程式的所有版本均已/將由 Apple 進行公證，以確保額外的安全性。下一次更新將包括用戶手動複製和貼上到終端的替代方法，以獲得額外的安全選項！ 您可以查看一個 Twitter 帳戶，如果您有任何疑問，可以自由加入一個 Discord 頻道！ 😃 （推特）\[https://x.com/get\_ophiuchi\] （不和諧）\[https://discord.gg/fpp8kNyPtz\] --- 原文出處：https://dev.to/cheeselemon/ssl-in-localhost-takes-5-seconds-now-460i

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