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

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

🔍 搜尋結果：COM

🔍 搜尋結果：COM

在 React 中建立可重複使用元件：處理無限的未來變化

嗨夥計， 使用 React 時，建立可重複使用元件對於維護乾淨、可管理且可擴展的程式碼至關重要。一種經常需要具有適應性和靈活性的通用元件。在這篇文章中，我們將探討如何建立一個可重複使用的元件，該元件可以處理各種配置並適應未來的變化，而不會變得過於複雜。 **標題的變體** 讓我們考慮一個可能需要支援不同變體的標頭元件。以下是不同標題樣式的範例： ![UI/UX：具有變體的不同類型的標題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whq80q5wkg3ll2vrbu6i.png) **基本標頭元件** 典型的 React header 元件可能看起來像這樣，其中 props 用於有條件地渲染徽標、導航專案、搜尋列和購物車等元素。 ![React：基本標頭元件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2um3c46mnm2x0jx9d4ro.png) 使用 props，開發人員可以如下設定標頭： ![React 程式碼：Props 元件重載](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdxblne9ugi12kq803e0.png) **用法：** ![React 程式碼：具有重載 props 的元件使用](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nr2x71gsbt6quklzbycz.png) **處理未來的變化** 現在，讓我們考慮一個需求改變的場景。標題需要包含其他元素，例如收藏夾部分、用戶帳戶詳細資訊以及帶有可顯示或隱藏的圖像和文字的頂部橫幅。如果我們繼續使用基於 prop 的方法，則該元件可能如下所示： ![反應程式碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg5s4qi0nbg7j5uiajsi.png) 正如您所看到的，如果有 10-15 個 props，這種方法很快就會變得笨拙。管理這樣一個包含大量 prop 的元件可能會導致程式碼變得繁瑣且容易出錯。 **使用複合元件** 為了解決這個問題，我們可以使用**複合元件**模式。這種方法允許父元件定義結構並讓子元件指定內容，從而實現更靈活和可讀的程式碼。 這是我們如何使用複合元件重構標頭元件的範例： **header.js** ![React 程式碼：複合模式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg2xbj8yjl2v9k89uq03.png) **用法** ![React 程式碼：複合模式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhwqml22fq2pvrk1mxcc.png) **複合元件的優點** **靈活性**：複合元件提供了更大的靈活性，因為它們允許您嵌套元件並將 props 直接傳遞到標頭的特定部分。 **可讀性**：結構更具可讀性並保持清晰的層次結構。 **可擴展性**：新增元件或修改現有元件變得更加容易，而不會使父元件過於複雜。 **可重複使用性**：標頭的每個部分都可以在不同的上下文或佈局中獨立地重複使用。 透過使用複合元件模式，我們確保標頭元件保持可管理性並能夠適應未來的變化，為複雜的 UI 需求提供強大的解決方案。 --- 原文出處：https://dev.to/nadeemkhanrtm/creating-a-reusable-component-in-react-handling-unlimited-future-changes-mgi

0個讚   0留言 44瀏覽

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留言 53瀏覽

Node.js 最佳實務：開發人員指南

Nodejs 是一個用於建立快速且可擴展的 Web 應用程式的強大工具。然而，為了充分利用 Nodejs，遵循最佳實踐非常重要。在這篇文章中，我們將探討 Nodejs 開發的一些關鍵最佳實務。 1. 建構你的專案 --------- 結構良好的專案易於維護和擴展。這是一個您可以遵循的簡單結構： ``` my-node-app/ │ ├── src/ │ ├── controllers/ │ ├── models/ │ ├── routes/ │ └── services/ │ ├── tests/ │ ├── .env ├── .gitignore ├── package.json └── README.md ``` 解釋： - `src/`包含您的主要應用程式程式碼。 - `controllers/`處理您的應用程式的邏輯。 - `models/`定義您的資料結構。 - `routes/`管理 API 的不同端點。 - `services/`包含業務邏輯。 - `tests/`包含所有測試檔案。 - `.env`儲存您的環境變數 - `.gitignore`指定 GIT 中要忽略的檔案。 - `.package.json`追蹤依賴項和腳本。 - `README.md`描述了您的專案。 2.使用環境變數 -------- 環境變數有助於將配置設定保留在程式碼之外。這使您的應用程式更安全且更易於管理。 例子： 建立一個`.env`檔： ``` DB_HOST=localhost DB_USER=root DB_PASS=password ``` 使用`dotenv`包在程式碼中載入這些變數： ``` require('dotenv').config(); const dbHost = process.env.DB_HOST; const dbUser = process.env.DB_USER; const dbPass = process.env.DB_PASS; console.log(`Connecting to database at ${dbHost} with user ${dbUser}`); ``` 3.正確處理錯誤 -------- 正確處理錯誤可確保您的應用程式不會意外崩潰。 ``` app.get('/user/:id', async (req, res, next) => { try { const user = await getUserById(req.params.id); if (!user) { return res.status(404).send('User not found'); } res.send(user); } catch (error) { next(error); } }); app.use((err, req, res, next) => { console.error(err.stack); res.status(500).send('Something went wrong!'); }); ``` 4. 使用非同步程式碼 ----------- Nodejs 本質上是異步的。使用`async`和`await`更乾淨地處理非同步程式碼。 例子： ``` async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error('Error fetching data:', error); } } fetchData(); ``` 5. 保持依賴關係更新 ----------- 定期更新您的依賴項，以確保您擁有最新的功能和安全性修復。 使用`npm outdated`檢查是否有過時的軟體包。 ``` npm outdated ``` 更新套件： ``` npm update ``` 6. 編寫測試 ------- 測試您的程式碼有助於及早發現錯誤並確保您的應用程式正常執行 正如預期的那樣。 例子： **第 1 步：安裝`Jest`** ``` npm install --save-dev jest ``` **第 2 步：編寫測試** 建立測試文件，例如， `tests/example.test.js` 。這是一個幫助您入門的簡單範例。 ``` const sum = (a, b) => a + b; test('adds 1 + 2 to equal 3', () => { expect(sum(1, 2)).toBe(3); }); ``` 7. 使用 Linter ------------ Linters 可協助您編寫乾淨且一致的程式碼。 ESLint 是一個受歡迎的選擇。 例子： 安裝 ESLint： ``` npm install eslint --save-dev ``` 初始化 ESLint： ``` npx eslint --init ``` 將 lint 腳本加入`package.json` ： ``` "scripts": { "lint": "eslint ." } ``` 執行短絨檢查： ``` npm run lint ``` 結論 -- 遵循這些最佳實踐將幫助您編寫更好、更易於維護的 Nodejs 應用程式。請記住建立您的專案、使用環境變數、正確處理錯誤、編寫非同步程式碼、保持依賴項更新、編寫測試並使用 linter。透過這樣做，您將建立健壯且高效的 Nodejs 應用程式，並且更易於管理和維護。 快樂編碼！ --- 原文出處：https://dev.to/mehedihasan2810/nodejs-best-practices-a-guide-for-developers-4d65

0個讚   0留言 53瀏覽

我製作了一個模擬手寫效果的專案🤓

大家好，希望大家都平安、一切順利！ 我喜歡打字而不是寫作，大學要求我們手寫一些作業，我覺得很無聊。 因此，我沒有花 1 小時來寫作業，而是花了 3 小時來建立一個為我寫作業的工具🎉。它被稱為[文本到手寫](https://github.com/saurabhdaware/text-to-handwriting)（參見......我真的很擅長命名我的專案） 文字轉手寫將文字內容轉換為看起來像手寫的圖像。輸出如下圖所示： 輸出 -- ![從文字到手寫的輸出圖片，看起來非常接近手寫紙拍攝的圖片](https://dev-to-uploads.s3.amazonaws.com/i/ikkj6js77uyo7m0rd1ud.jpeg) 特徵 -- - 繪製圖表 - 變更字體大小、墨水顏色、間距等。 - 上傳自訂手寫字體按鈕（這樣您就可以從其他線上工具建立手寫字體並上傳字體檔案） 網址 -- ### 工具 https://saurabhdaware.github.io/text-to-handwriting ### GitHub 做 ⭐ 儲存庫 https://github.com/saurabhdaware/text-to-handwriting --- 感謝您閱讀🐨🎉讓我知道您的想法評論。 您可以在[Twitter @saurabhcodes](https://twitter.com/saurabhcodes)和[GitHub @saurabhdaware](https://github.com/saurabhdaware)上關注我 再見！確保安全並記住我們會度過這個難關🌻 --- 原文出處：https://dev.to/saurabhdaware/i-made-a-text-to-handwriting-tool-to-write-my-college-assignments-for-me-4ko

0個讚   0留言 41瀏覽

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

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

0個讚   0留言 22瀏覽

提升你的技能

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

0個讚   0留言 19瀏覽

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

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留言 52瀏覽

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

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

0個讚   0留言 56瀏覽

10 個工程博客，免費成為系統設計英雄

簡介： ------- 系統設計基本上是您想要建造的系統的藍圖。它是定義系統架構、元件和介面以滿足某些特定需求的過程。系統設計是軟體開發行業的熱門話題之一，在技術面試中被廣泛詢問，學習這項技能將保證你的加薪。 ![唐納川普說系統設計就是金錢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26gmdveo1ak1y0r752cn.gif) 在這篇文章中，我將分享十大系統設計工程博客，這些博客將幫助您免費成為系統設計大師 [字節字節 Go 博客](https://blog.bytebytego.com/) ------------------------------------------ Byte Byte Go 是一家教育科技新創公司，專注於提供系統設計主題的培訓和課程，幫助您像專業人士一樣在系統設計面試中取得好成績。 Byte Byte go 可以認為是學習和掌握系統設計技能最好的學校之一。 他們使用互動式動畫影片、心智圖、備忘錄等分解了複雜的系統設計主題，這將幫助您輕鬆掌握系統設計。無論您是系統設計新手還是想跟上當前行業標準，Byte Byte Go 都是您的必去之選 ![位元組GO博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ffpgu7maxrhb2jbejve5.png) [谷歌研究](https://research.google/blog/?page=1&) --------------------------------------------- 谷歌是世界上最受歡迎、最高效的搜尋引擎之一。他們每天在其平台上處理數十億用戶和請求。 Angular、Flutter、Android、Google Cloud、Firebase 等 Google 產品是幾乎每個開發人員都使用的一些關鍵技術。谷歌研究平台擁有廣泛的軟體開發主題，包括機器學習、軟體系統、硬體和架構、分散式和平行系統，這個平台是軟體開發人員學習和研究各種主題的隱藏寶石 ![谷歌研究](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jwp16grrttt33g44eg1.png) [Dropbox 技術博客](https://dropbox.tech/) ------------------------------------- Dropbox 是一家美國科技公司，為各種用例提供儲存解決方案和其他軟體產品。他們每天也處理數百萬個請求，然後管理和擴展大型軟體基礎設施。在這裡您可以探索各種主題，例如基礎設施、前端開發、安全性、行動應用程式開發等。 ![投遞箱技術博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdp43crv099kww6yl8ls.png) [Netflix 科技部落格](https://netflixtechblog.com/) --------------------------------------------- Netflix 是全球最受歡迎、最成功的 Ott 巨頭之一，每天處理數百萬用戶和請求。您可以關注 Netflix 工程博客，了解從視訊串流、微服務到機器學習和人工智慧等各種主題。如果您在 Ott 行業工作或計劃在視訊串流技術之上建立一些東西，您必須關注 Netflix 技術部落格以供參考。 ![Netflix 科技部落格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2trw7unayy4uett3cri0.png) [優步工程博客](https://eng.uber.com/) ------------------------------- 優步是世界上最受歡迎、也有望成為最大的線上計程車服務提供者之一。優步也涉足線上食品配送領域。我將 Uber 工程部落格放入此列表的原因是因為您會在他們的部落格中找到一些最重要的主題，例如使用地圖和位置來提供服務。使用地理位置資料是軟體工程中最重要的主題之一，電子商務和物流等最常見的工業部門非常依賴這些訊息，以便他們能夠盡快交付產品或服務。如果您是軟體產業中從事地理位置或導航技術工作或計劃使用這些技術建立某些東西的人，那麼 Uber 工程部落格是您必須查看的內容 ![優步工程博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1kwwqi4orz3cunyeo9p.png) [元工程博客](https://engineering.fb.com/) ------------------------------------ Meta（原 Facebook）是世界上最大的社群媒體巨頭，也是最受歡迎的用於建立使用者介面的 JavaScript 函式庫（即 React.js）的創辦人和維護者。除此之外，幾乎所有流行的社交媒體應用程式（包括 facebook、instagram、whatsapp、threads 等）都歸他們所有。元工程博客包含廣泛的軟體工程主題，如網絡和移動開發、基礎設施系統、影片技術、AR 和 VR 技術等。 VR 科技 ![元工程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8mba756nkk0q9fnsy4t.png) [Stripe 工程博客](https://stripe.com/blog/engineering) -------------------------------------------------- Stripe 是最受歡迎的提供支付相關解決方案的公司之一。大多數線上企業和電子商務網站都使用 stripe 來處理付款、訂閱和發票，即使我也使用 stripe 來存取客戶的付款。 Stripe Engineering 部落格涵蓋了廣泛的主題，您可以探索這些主題，例如使用機器學習進行詐欺偵測、用於響應式和互動式支付介面的 UI 和 UX 相關主題、應用程式安全性等等。因此，如果您正在從事支付工作或計劃建立與處理支付相關的東西，您一定要查看 Stripe 工程部落格作為參考。 ![Stripe 工程博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5g8eoq6f2puv2nkekfxy.png) [亞馬遜工程博客](https://aws.amazon.com/blogs) --------------------------------------- 亞馬遜工程博客 亞馬遜是世界上最大的電子商務巨頭，不僅如此，它還擁有亞馬遜網路服務（最大的雲端服務供應商）、亞馬遜Prime（最受歡迎的OTT巨頭之一）、有聲故事平台亞馬遜音樂等等。多的。 Amazon Engineering 部落格涵蓋了廣泛的主題，包括容器和 Kubernetes、雲端模式和架構、機器學習和 Amazon 人工智慧技術，以解決複雜的業務挑戰。因此，如果您打算使用 AWS 建立下一個應用程式或整合 Alexa 等亞馬遜技術，那麼亞馬遜工程部落格是您必須查看的地方。 ![亞馬遜工程博客](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a07bwfp2rsebvi180cnl.png) [微軟開發部落格](https://devblogs.microsoft.com/) ------------------------------------------ 微軟是美國最受歡迎的科技巨頭之一，擁有最常用的作業系統 Windows、用於建立極快企業應用程式的點網框架、Bing 搜尋引擎、copilot（最高效的人工智慧工具之一）、最大的程式碼共享、託管和版本控制平台GitHub、Azure雲端平台（最大的雲端服務提供者之一）。 Microsoft 工程部落格包含廣泛的主題和教程，還包括 Windows、azure、機器學習和人工智慧、dot net 框架。如果您打算使用 Microsoft 技術建立下一個應用程式或軟體，那麼您必須關注它 ![微軟開發部落格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y10tc92q65czuks6cidk.png) [蘋果開發者新聞](https://developer.apple.com/news/) -------------------------------------------- 蘋果是世界上最大的科技巨頭之一，也擁有最受歡迎的Mac作業系統和IOS（iPhone作業系統）。 MacBook 和 iPhone 擁有非常龐大的用戶群，因此大多數新創公司和企業也為 Mac 和 IOS 用戶打造產品。 Apple 開發者新聞主要包含與IOS、Swift（建立本機IOS 和Mac OS 應用程式的唯一語言）、Swift UI（Apple UI）相關的主題，以及一些與C++、Kubernetes 等主題相關的主題。正在計劃的人要為 iOS 或 Mac OS 用戶建立軟體，開發者新聞是您必須參考的。 ![蘋果開發者新聞](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ewo1tt4046wgom5d8hy.png) 結論 -- 在本文中，我討論了 10 個您必須查看的工程博客，以提高您的系統設計技能。如果您關注每個博客，那很好，但我建議您必須僅根據您將使用的堆疊或您正在處理的行業類型來查看那些博客 --- 原文出處：https://dev.to/kumarkalyan/10-engineering-blogs-to-become-a-system-design-hero-for-free-20ee

0個讚   0留言 58瀏覽

使用 ToolJet + Gemini API 建構 SQL 查詢產生器

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

0個讚   0留言 50瀏覽

簡短概述：微前端 🧩

當人們談論**微前端**時，他們首先提到的就是其驚人的擴展能力。他們透過將服務分成更小的部分並無縫協作來實現這一目標。 微前端的優勢👍 ------- - **微前端**支援團隊可以實現後續前端功能，從而顯著加快迭代速度。 - 微前端的**水平可擴展性**旨在使組織能夠透過水平擴展來擴展其前端架構。 📈 微前端的缺點👎 ------- - 微前端會使網站的開發、維護和建置**變得複雜**。然而，可以透過使用智慧設計、有助於自動部署和測試的工具以及確保團隊之間的清晰溝通來緩解這些挑戰。 📉 - 如果團隊之間不進行溝通，**依賴管理**可能會成為問題。但可以透過在團隊之間建立清晰的溝通管道來討論更新來解決！ 👌 單體應用程式經常遇到有效擴展的挑戰。透過將前端分解為微前端，可以更有效地實現延遲載入和**服務工作者**等高階邏輯結構。 **JavaScript 的**靈活性允許團隊加入各種框架和程式庫，從而促進微前端之間的無縫整合和互通性。豐富的 JavaScript 工俱生態系統為開發人員提供了強大的資源來建立動態和響應式的使用者介面。 - 受到以下書的啟發： [***建立微前端、擴展團隊和專案、為開發人員提供支援***。](https://www.amazon.com/Building-Micro-Frontends-Projects-Empowering-Developers/dp/1492082996/ref=sr_1_2?crid=RCBAUE4OKJ0J&dib=eyJ2IjoiMSJ9.0ZJp2IXMP9BkahJYaiHl9ez2Wm6vlnMHRLwunki8JYstYZfM_ukCSBNN1JAldlIqkOUuSa70q6nEYv5Rle1a2vzND0PJ_BEBt_kCHgnNjO9tg-Kp9V1tGAtMW7QtLmY53ZAuOFX4lfXTM2DTu5KCUiwIHGHiERCZ9ehXTueraXmWd4AAl5aP6VkEgs56_BamuYAo7pHw1nb6ceTIouGXkdImZ4fB-y81_da06oyWRY8.601H27Rq2LULtNXKVir3Z3QOGJlbx6ovOrmk3Iny2Bg&dib_tag=se&keywords=micro+frontend&qid=1717013751&sprefix=microfronten,aps,223&sr=8-2)作者：*盧卡‧梅札里拉 (Luca Mezzalira) 尼爾‧福特 (Neal Ford) 作序* 加入我們！ ----- 那麼...您喜歡 Javascript 並想為開源專案做出貢獻嗎？**你在等什麼？** 😁 前往[Webcrumbs](https://www.webcrumbs.org/)並加入一個致力於為開源愛好者提供 JavaScript 生態系統的社群！ --- 原文出處：https://dev.to/buildwebcrumbs/short-overview-micro-frontends-2f5i

0個讚   0留言 55瀏覽

寫出「本身就像是文件」的程式碼🧑‍💻📜

身為開發人員，我們都浪費了時間，盯著一段程式碼，試圖破解其目的，並想知道原始作者在想什麼。在軟體開發的世界中，專案易手且程式碼庫快速發展，編寫自文件程式碼不僅是一種可有可無的東西，而且也是一種可有可無的東西。這是必要的。 在本文中，我們將探索編寫不言自明的程式碼的藝術，減少對外部文件的依賴，並使您自己和其他開發人員的生活變得更輕鬆。 什麼是自文件程式碼？ ---------- 自記錄程式碼是以清晰、富有表現力和有意的方式編寫的程式碼，使其目的和功能易於理解，而不需要大量註解或外部文件。 這是關於編寫以下程式碼： - **可讀性：**程式碼一目了然，易於閱讀與理解 - **富有表現力：**清晰傳達其意圖和目的的程式碼 - **可維護：**易於修改和更新的程式碼，不會引入錯誤或破壞性更改 為什麼自我文件化程式碼很重要 -------------- 編寫自文件程式碼有幾個好處： 1. **減少認知負擔：**當程式碼不言自明時，開發人員可以快速掌握其目的和功能，從而減少理解和使用程式碼庫所需的腦力勞動。 2. **更快的入職：**當程式碼庫是自記錄的時，新的團隊成員可以更快地上手，因為他們不需要嚴重依賴外部文件或廣泛的知識轉移會議。 3. **改進的協作：**自記錄程式碼有助於團隊成員之間更好的協作，因為它可以最大限度地減少誤解並促進對程式碼庫的共同理解。 4. **增強的可維護性：**當程式碼是自記錄的時，隨著時間的推移，維護和更新會更容易，因為開發人員可以快速理解現有程式碼並做出明智的更改。 編寫自文件程式碼的技術 ----------- 讓我們探索一些編寫自文件程式碼的實用技術，重點是 TypeScript： ### 1.使用有意義的名字 使程式碼自記錄的最有效方法之一是為變數、函數、類別和模組使用有意義的名稱。考慮以下範例： ``` // Bad const x = 5; const y = 10; const z = x + y; // Good const numberOfItems = 5; const itemPrice = 10; const totalCost = numberOfItems * itemPrice; ``` 在「Good」範例中，變數名稱清楚地傳達了它們的用途，使程式碼更具可讀性和不言自明。 ### 2. 寫出小而集中的函數 編寫小型、集中的函數是自文件程式碼的另一個關鍵方面。函數應具有單一職責，並準確命名以反映其目的。例如： ``` // Bad function processData(data: any): any { // ... // Lots of complex logic // ... return result; } // Good function extractRelevantFields(data: Record<string, any>): Record<string, any> { // ... return relevantFields; } function applyBusinessRules(relevantFields: Record<string, any>): Record<string, any> { // ... return processedData; } function formatOutput(processedData: Record<string, any>): string { // ... return formattedResult; } ``` 透過將大函數分解為具有描述性名稱的更小、更集中的函數，程式碼變得更具可讀性和自記錄性。 ### 3. 使用描述性函數和方法名稱 命名函數和方法時，請使用能夠清楚傳達其目的和操作的描述性名稱。避免使用像`handle()`或`process()`這樣的通用名稱。相反，選擇描述函數功能的名稱。例如： ``` // Bad function handleInput(input: string): void { // ... } // Good function validateUserCredentials(username: string, password: string): boolean { // ... } ``` 描述性名稱`validateUserCredentials`可以清楚地表明該函數的用途，而無需其他註釋。 ### 4.利用 TypeScript 的型別系統 TypeScript 強大的類型系統可以大幅增強程式碼的自記錄性質。透過利用 TypeScript 的功能，您可以讓程式碼更具表現力並儘早發現潛在錯誤。例如： - **介面和類型：**使用介面和自訂類型來定義資料結構的形狀，使程式碼更具可讀性和不言自明。 ``` interface User { id: number; name: string; email: string; } function getUserById(id: number): User | undefined { // ... } ``` - **枚舉：**利用枚舉來表示一組固定的值，提供清晰易讀的方式來處理不同的場景。 ``` enum PaymentStatus { Pending = 'pending', Completed = 'completed', Failed = 'failed', } function processPayment(status: PaymentStatus): void { // ... } ``` - **類型推斷：**盡可能讓 TypeScript 推斷類型，因為它可以減少冗長並使程式碼更具可讀性。 ``` // Bad const count: number = 10; const message: string = 'Hello, world!'; // Good const count = 10; const message = 'Hello, world!'; ``` ### 5.使用強型別ID 在 TypeScript 中使用 ID 時，請考慮使用強型別 ID，而不是簡單的字串或數字。強型別 ID 提供了額外的類型安全性，並使程式碼更加自文件化。 實作強型別 ID 的一種方法是使用不透明類型： ``` // user.ts export type UserId = string & { readonly __brand: unique symbol }; export function createUserId(id: string): UserId { return id as UserId; } // post.ts export type PostId = string & { readonly __brand: unique symbol }; export function createPostId(id: string): PostId { return id as PostId; } ``` 透過使用強型別 ID，您可以確保 UserId 只能指派給需要 UserId 的屬性或函數，而 PostId 只能指派給需要 PostId 的屬性或函數。 ``` function getUserById(userId: UserId): User | undefined { // ... } const userId = createUserId('user-123'); const postId = createPostId('post-456'); getUserById(userId); // No error getUserById(postId); // Error: Argument of type 'PostId' is not assignable to parameter of type 'UserId'. ``` 強類型 ID 有助於在編譯時捕獲潛在錯誤，並使程式碼更具表現力和自記錄性。然而，與使用簡單的字串類型相比，它們確實引入了一些開銷。根據專案的需求和規模考慮權衡。 ### 6. 在團隊中建立一致性並設定期望 當作為團隊的一部分處理程式碼庫時，建立一致性並設定明確的期望至關重要。這有助於確保每個人都在同一頁上並遵循相同的約定，從而使程式碼更具可讀性和可維護性。 一致性的一個重要面向是命名約定。建立一個風格指南，定義變數、函數、類別和其他實體的命名方式。例如，考慮以下術語及其含義： - `get` ：從 API 或資料來源檢索單一值。 - `list` ：從 API 或資料來源檢索一組值。 - `patch` ：部分更新現有實體或物件。 - `upsert` ：更新現有實體或插入新實體（如果不存在）。 透過定義這些術語及其用法，您可以確保整個程式碼庫的一致性。例如： ``` function getUser(userId: UserId): Promise<User> { // ... } function listUsers(): Promise<User[]> { // ... } function patchUser(userId: UserId, updatedData: Partial<User>): Promise<User> { // ... } ``` 一致性有助於使程式碼庫對所有團隊成員更具可預測性和更容易理解。除了命名約定之外，還可以考慮為程式碼庫的其他方面建立指南，例如檔案和資料夾結構、註解、錯誤處理、測試和程式碼格式。 在團隊中工作時，您個人可能不會總是同意所有正在執行的約定。然而，重要的是要記住一致性和協作對於專案的成功至關重要。即使您有不同的偏好或編碼風格，遵守商定的約定也有助於維護有凝聚力的程式碼庫並減少其他團隊成員之間的混亂。 ### 7.複雜場景使用JSDoc或TSDoc 雖然自記錄程式碼應該是主要目標，但在某些情況下可能需要額外的文件，例如複雜的演算法或複雜的業務邏輯。在這種情況下，請考慮使用 JSDoc 或 TSDoc 來提供清晰簡潔的文件。 ``` /** * Calculates the Fibonacci number at the given position. * * @param {number} position - The position of the Fibonacci number to calculate. * @returns {number} The Fibonacci number at the specified position. */ function fibonacci(position: number): number { if (position <= 1) { return position; } return fibonacci(position - 1) + fibonacci(position - 2); } ``` 透過使用 JSDoc 或 TSDoc，您可以為複雜程式碼提供額外的上下文和解釋，而不會使程式碼庫本身變得混亂。 結論 -- 編寫自文件程式碼是每個開發人員都應該努力掌握的藝術。透過利用有意義的名稱、小而集中的函數、TypeScript 的類型系統以及文件的明智使用，您可以建立可讀、富有表現力和可維護的程式碼。 請記住，我們的目標是編寫不言而喻的程式碼，減少對外部文件的依賴，並使其他開發人員的生活更輕鬆。因此，下次編寫程式碼時，請花點時間考慮如何使其更加自文件化。未來的你和你的隊友都會感謝你！ 還有無恥的插頭🔌。如果您在敏捷開發團隊工作並使用線上會議工具（例如規劃撲克或回顧），請查看我的免費工具[Kollabe](https://kollabe.com/) ！ --- 原文出處：https://dev.to/mattlewandowski93/writing-self-documenting-code-4lga

0個讚   0留言 55瀏覽

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

建立出色的 GitHub 開發人員作品集。

在軟體開發領域，有效地展示您的工作以及您編寫的程式碼至關重要。作品集網站是開發人員展示其技能、專案和貢獻的絕佳方式。增強您的作品集的一種創新方法是整合 GitHub 統計資料，它可以提供有關您的編碼活動和貢獻的即時見解。 為了幫助其他開發人員實現這一目標，我從頭開始建立了一個新網站，重點介紹您的 GitHub 作品。該網站是使用 NextJS 和 Tailwind CSS 建立的，它從您的 GitHub 個人資料和工作中獲取所有資料。 *本文將逐步引導您完成設定過程，並且還將為您提供 GitHub 連結。* **這是即時預覽：**[即時預覽網址](https://github.abusaid.me/) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi8nc8kwy5vn42vk70zr.png) **步驟01：** 使用[GitHub 連結複製](https://github.com/said7388/github-portfolio.git)儲存庫並將目錄變更為 github-portfolio。 ``` git clone https://github.com/said7388/github-portfolio.git cd github-portfolio ``` **步驟02：** 現在使用`npm`或`yarn`安裝所有套件。 ``` npm install # or yarn ``` 安裝完所有套件後，現在根據您的情況更改`data/user-data.js`上的所有資料。例如： ``` export const userData = { githubUser: 'said7388', devUsername: "said7388", github: 'https://github.com/said7388', facebook: 'https://www.facebook.com/abusaid.riyaz/', linkedIn: 'https://www.linkedin.com/in/abu-said-bd/', twitter: 'https://twitter.com/said7388', stackOverflow: 'https://stackoverflow.com/users/16840768/abu-said', leetcode: "https://leetcode.com/said3812/", resume: "https://drive.google.com/file/d/1eyutpKFFhJ9X-qpQGKhUNnVRkB5Wer00/view?usp=sharing", skills: ['React', 'NextJS', 'Redux', 'Express', 'NestJS', 'MySql', 'MongoDB', 'Postgres', 'Docker', 'AWS'], timezone: '+6' }; ``` **步驟03：** 如果您想使用 Google Analytics，請從`.env.example`檔案建立新的`.env`檔案並提供值。 `.env`文件如下： ``` NEXT_PUBLIC_GTM = "" ``` **步驟04：** 現在 GitHub 作品集網站已準備好運作。您可以使用`npm`或`yarn`執行它。 ``` npm run dev # or yarn dev ``` 如果您喜歡這個 GitHub 組合專案，您可以考慮在[GitHub 儲存庫](https://github.com/said7388/github-portfolio)上給它一顆星。 您可以在 Linkedin 上與我聯絡： <https://www.linkedin.com/in/abu-said-bd/> > 免責聲明：在這個儲存庫中，我使用了一些開源 API。所有積分均歸這些儲存庫的擁有者所有。 --- 原文出處：https://dev.to/said7388/build-an-awesome-github-developer-portfolio-54ka

0個讚   0留言 48瀏覽

系統設計面試的 10 個微服務架構挑戰

*揭露：這篇文章包含附屬連結；如果您透過本文中提供的不同連結購買產品或服務，我可能會獲得補償。* [![微服務架構最佳實踐](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rkibz6xn6xqibepgu9cz.png)](https://bit.ly/3P3eqMN) image\_credit - [ByteByteGo](https://bit.ly/3P3eqMN) 朋友們大家好，如果您正在準備系統設計面試，那麼您也必須準備微服務架構。這是許多面試官最喜歡的架構，它提供了大量的材料來拷問你。 毫無疑問，微服務架構透過將單體應用程式分解為更小的、鬆散耦合的服務，徹底改變了軟體開發。 過去，我分享過幾篇系統設計面試文章，例如[API 網關與負載平衡器](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)、 [正向代理與反向代理](https://medium.com/javarevisited/difference-between-forward-proxy-and-reverse-proxy-in-system-design-da05c1f5f6ad)以及[常見的系統設計問題](https://medium.com/javarevisited/7-system-design-problems-to-crack-software-engineering-interviews-in-2023-13a518467c3e)，在本文中我們將討論微服務架構的挑戰。 它也是程式設計師必須了解的[基本系統設計主題或概念](https://medium.com/javarevisited/top-10-system-design-concepts-every-programmer-should-learn-54375d8557a6)之一。 雖然微服務方法承諾提高可擴展性、靈活性和更快的開發週期，但它也帶來了一系列挑戰，這對開發人員來說非常重要，不僅要了解這些挑戰，還要有效地解決這些挑戰。 雖然有很多文章討論微服務最佳實踐，但很少有文章闡述它們提供的好處以及它們解決的挑戰。 在本文中，我們將探討開發人員在使用微服務時所面臨的十大主要挑戰，並學習克服這些挑戰的有效策略。 順便說一句，如果您正在準備系統設計面試並想深入學習系統設計，那麼您還可以查看[ByteByteGo](https://bit.ly/3P3eqMN) 、 [Design Guru](https://bit.ly/3pMiO8g) 、 [Exponent](https://bit.ly/3cNF0vw) 、 [Educative](https://bit.ly/3Mnh6UR)和[Udemy](https://bit.ly/3vFNPid)等網站，它們有許多很棒的系統設計課程 此外，對各種微服務模式（例如服務發現、CQRS 和 Saga）的紮實了解對於解決我們將在本文中討論的許多挑戰大有幫助，就此而言，這裡有一個來自[DesignGuru.io](https://designgurus.org/link/84Y9hP)的漂亮圖表，說明如何微服務中的服務發現工作，我們將在本文後面使用此模式 [![微服務中的服務發現](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0ke14if9uyunsszj0lu.png)](https://www.designgurus.io/course/grokking-microservices-design-patterns?aff=84Y9hP) --- 微服務開發的10大挑戰及解決方案 ---------------- 以下列出了使用微服務架構建立應用程式時可能面臨的主要挑戰 ### 1. 服務溝通挑戰 如果您在現實世界的微服務架構中工作過，那麼您可能知道微服務嚴重依賴服務間通信，隨著服務數量的增長，這可能會成為一個挑戰。 由於每個服務都有自己的 API 和協議，管理通訊變得複雜。 為了解決這個問題，請採用 REST、訊息佇列和事件驅動架構等通訊模式。此外，請考慮使用[**API 閘道**](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)來集中通訊邏輯並處理橫切問題。 ![微服務架構挑戰](https://miro.medium.com/v2/resize:fit:609/1*I4tv-pLx4ccaaBTFzquzsA.png) --- ### 2. 資料管理挑戰 由於架構的分散性，跨微服務的資料管理可能會很複雜。不一致的資料模型和維護資料一致性帶來了困難。 為了解決這個問題，您可以實施多語言持久性策略，使用適合每個服務特定需求的資料庫。 您還應該利用事件來源和[**CQRS（命令查詢職責分離）**](https://javarevisited.substack.com/p/how-cqrs-pattern-works-in-microservices)等技術來維護資料完整性以及讀寫操作的分離。 [![微服務的資料管理挑戰](https://miro.medium.com/v2/resize:fit:609/1*XKdhM77EN6isbz5eeH2K9A.jpeg)](https://medium.com/javarevisited/what-is-cqrs-command-and-query-responsibility-segregation-pattern-7b1b38514edd) --- ### 3. 分散式追蹤與監控挑戰 由於請求跨越多個服務，監控和除錯微服務應用程式變得非常具有挑戰性。傳統的監控工具可能無法提供所需的可見度。 為了解決這個問題，您應該整合 Jaeger 或 Zipkin 等分散式追蹤系統來追蹤跨服務的請求。 您還可以使用集中式日誌記錄和監控解決方案來聚合和分析來自各種服務的日誌和指標，有助於早期發現問題。 對於開發人員來說，微服務中的偵錯問題是處理和了解 Zipkin 等追蹤系統真正運作的最大挑戰之一。 ![微服務架構中的分散式追蹤與監控挑戰](https://miro.medium.com/v2/resize:fit:609/1*MRyM0qiMBljjsfnoemCAeg.png) --- ### 4. 服務編排與編排挑戰 微服務可以集中編排，也可以以分散的方式編排。這兩種方法都有其挑戰。 編排服務可能會導致單點故障，而編排可能會導致追蹤流程的複雜性和難度增加。 在這種情況下，您應該努力尋求平衡，對關鍵工作流程採用編排，並對可以獨立運作的服務進行編排。 ![微服務中的服務編排與編排挑戰](https://miro.medium.com/v2/resize:fit:609/1*O_AFZvulWl5ZZYE1BG7hYQ.png) --- ### 5. 部署與 DevOps 挑戰 微服務的部署涉及管理多個服務實例並確保不同環境之間的相容性。使用傳統方式部署微服務幾乎是不可能的。 使用 Docker 等工具的容器化和使用[Kubernetes 的](https://medium.com/javarevisited/top-15-online-courses-to-learn-docker-kubernetes-and-aws-for-fullstack-developers-and-devops-d8cc4f16e773)編排可以幫助標準化部署流程，事實上，如果您想要穩健的話，它們是必須的。 您還應該採用**DevOps 實踐**並自動化部署管道，以確保微服務的一致性和快速部署。 ![微服務中的部署與 DevOps 挑戰](https://miro.medium.com/v2/resize:fit:609/1*Bxoxd1eCCtPyJzMtLeFVYw.jpeg) --- ### 6. 跨服務挑戰的測試 測試微服務一點也不容易，由於其互動的複雜性，它需要一個全面的策略。 傳統的單元測試可能還不夠。 為了解決這個問題，您可以結合整合測試、合約測試和端到端測試來驗證服務互動和資料流。 您還應該實施一個強大的[CI/CD 管道](https://javarevisited.blogspot.com/2018/09/top-5-jenkins-courses-for-java-and-DevOps-Programmers.html)，以在整個微服務生態系統中自動進行測試。 ![應對微服務中的服務挑戰](https://miro.medium.com/v2/resize:fit:609/1*fKlBw13XQ5RyazLXl2MIIQ.png) --- ### 7. 安全和存取控制挑戰 微服務可能會暴露大量端點，從而增加潛在的攻擊面。大多數時候，您甚至不會意識到這一點，但不用擔心，幾乎所有大型組織都有龐大的安全團隊，高薪來騷擾您。 就您而言，您應該確保跨服務的安全性，管理身分驗證和授權以及保護傳輸中的資料會帶來重大挑戰。 採用零信任安全模型，實作[OAuth2](https://medium.com/javarevisited/5-best-online-courses-to-learn-oauth-2-0-and-jwt-in-2023-719fd63c834)和[JWT（JSON Web Tokens）](https://medium.com/javarevisited/difference-between-jwt-oauth-and-saml-for-authentication-and-authorization-in-web-apps-75b412754127)等 API 安全標準，並採用具有強大存取控制機制的 API 閘道。 ![微服務中的安全性和存取控制挑戰](https://miro.medium.com/v2/resize:fit:609/1*GP0lglBapQS929e3Paf1ng.png) 積分 --- superTokens --- ### 8. 可擴展性和資源分配 可擴展性是微服務的核心承諾，也是許多公司放棄單體應用而轉向微服務的主要驅動力之一，但它需要仔細規劃。 某些服務可能會遇到比其他服務更重的負載，導致資源分配挑戰。 您應該利用容器**編排平台**和工具（例如 K8）根據需求動態分配資源。 您也可以根據 CPU 使用率或請求率等指標實施自動擴展，以確保最佳的資源使用率。 [![微服務中的可擴展性和資源分配挑戰](https://miro.medium.com/v2/resize:fit:609/1*JH4N7C199Gl3dhc2sh3xHQ.png)](https://medium.com/javarevisited/difference-between-horizontal-scalability-vs-vertical-scalability-67455efc91c) --- ### 9. 版本控制和相容性挑戰 隨著微服務的獨立發展，保持向後和向前相容性變得至關重要。 不相容的更改可能會破壞整個系統。 作為經驗豐富的開發人員或技術主管，您應該在程式碼層級和通訊協定中實作 API 的版本控制。 您也可以利用語意版本控制來清楚傳達相容性期望。逐步淘汰舊版本，同時為遷移提供足夠的支援和文件。 ![微服務中的版本控制和相容性挑戰](https://miro.medium.com/v2/resize:fit:609/1*xezI58bd7nSSjW35u2XfGQ.jpeg) --- ### 10.組織複雜性和溝通挑戰 微服務架構可以反映組織的結構，從而導致溝通和協作方面的挑戰，例如不同的團隊管理不同的微服務。 從事不同服務的跨職能團隊需要協調他們的工作，這一點很重要。 作為經驗豐富的專家，您應該透過定期會議、分享文件和促進資訊交換的工具來培養溝通和協作的文化。 ![組織複雜性與溝通挑戰](https://miro.medium.com/v2/resize:fit:609/1*6-rMCG_PZDnt1Z1RWvPWyg.jpeg) --- ### 系統設計訪談資源： 而且，這裡列出了最佳系統設計書籍、線上課程和練習網站，您可以查看這些內容，以便更好地為系統設計面試做好準備。這些課程中的大多數也回答了我在這裡分享的問題。 1. [**DesignGuru 的 Grokking 系統設計課程**](https://bit.ly/3pMiO8g)：一個互動式學習平台，提供實作練習和真實場景，以增強您的系統設計技能。 2. [**《系統設計面試》作者：Alex Xu**](https://amzn.to/3nU2Mbp) ：這本書深入探討了系統設計概念、策略和麵試準備技巧。 3. Martin Kleppmann 的[**「設計資料密集型應用程式」**](https://amzn.to/3nXKaas) ：綜合指南，涵蓋了設計可擴展且可靠的系統的原則和實踐。 4. [LeetCode 系統設計 標籤](https://leetcode.com/explore/learn/card/system-design)：LeetCode 是一個受歡迎的技術面試準備平台。 LeetCode 上的系統設計標籤包含各種練習問題。 5. GitHub 上的[**「系統設計入門」**](https://bit.ly/3bSaBfC) ：精選的資源列表，包括文章、書籍和影片，可幫助您準備系統設計面試。 6. [**Educative 的系統設計課程**](https://bit.ly/3Mnh6UR)：一個互動式學習平台，提供實作練習和真實場景，以增強您的系統設計技能。 7. **高可擴展性部落格**：該部落格包含有關高流量網站和可擴展系統架構的文章和案例研究。 8. **[YouTube 頻道](https://medium.com/javarevisited/top-8-youtube-channels-for-system-design-interview-preparation-970d103ea18d)**：請參閱「Gaurav Sen」和「Tech Dummies」等頻道，以取得有關係統設計概念和麵試準備的富有洞察力的影片。 9. [**ByteByteGo**](https://bit.ly/3P3eqMN) ：Alex Xu 的一本現場書籍和課程，用於系統設計面試準備。它包含《系統設計訪談》第一捲和第二卷的所有內容，並將隨即將推出的第三卷進行更新。 10. [**Exponent**](https://bit.ly/3cNF0vw) ：一個專為面試準備的網站，特別是針對亞馬遜和谷歌等 FAANG 公司，他們還有很棒的系統設計課程和許多其他材料，可以幫助您破解 FAANG 面試。 而且，這是一個很好的系統設計面試備忘錄，可以快速修改基本的系統設計概念： [![系統設計面試備忘錄](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ooidxg5v3bopt7a6uf4.png)](https://bit.ly/3cNF0vw) image\_credit - [tryExponent](https://bit.ly/3cNF0vw) ### 結論 這就是關於微服務架構挑戰以及如何應對這些挑戰的全部內容。微服務架構在可擴展性、靈活性和更快的開發方面提供了顯著的優勢。 然而，這些優勢也伴隨著開發人員必須有效應對的一系列獨特挑戰。 透過在服務通訊、資料管理、監控、測試、安全性等方面採用最佳實踐，團隊可以克服這些挑戰並釋放微服務的全部潛力。 隨著軟體開發環境的不斷發展，解決這些挑戰對於成功實施微服務仍然至關重要 雖然我寫這篇文章是為了準備系統設計面試，但對於使用微服務並希望獲得更多控制和更好組織的經驗豐富的開發人員來說，它同樣有價值。 微服務開發一切順利！ **獎金**\\ 正如承諾的，這是給你的獎金，一本免費的書。我剛剛找到一本新的免費書籍來學習分散式系統設計，您也可以在 Microsoft 上閱讀它 --- [https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT -eBook-設計分散式系統.pdf](https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf) [![關於分散式系統的免費書籍](https://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%2Fso5r1wv8x95i74nz6p89.png)](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%2Fso5r1wv8x95i74nz6p89.png) --- 原文出處：https://dev.to/somadevtoo/10-microservices-architecture-challenges-for-system-design-interviews-6g0

0個讚   0留言 54瀏覽

在 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留言 40瀏覽

為什麼 Theo 是錯的 & 我們會得到一個 JavaScript 版的 Laravel

JavaScript 對全端框架的需求 ------------------- 「*為什麼我們沒有適用於 JavaScript 的 Laravel？」。*這是[西奧在他最近的影片中提出的](https://www.youtube.com/watch?v=yaodD79Q4iE)問題。 如果您不熟悉[Laravel](https://laravel.com/)和[Ruby-on-Rails](https://rubyonrails.org/)等工具，它們是固執己見的全端框架（適用於 PHP 和 Ruby），具有許多遵循既定約定的內建功能，以便開發人員可以編寫更少的樣板檔案和更多的業務邏輯，同時將行業最佳實踐融入他們的應用程式中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dndfaz2hjet9nisbiimc.png) 他回答這個問題時認為 JavaScript*不需要*這樣的框架，因為最好選擇你想要的工具並自己建立你需要的解決方案。 這聽起來很棒——如果你是一位經驗豐富的開發者，這也恰好是一個很好的靈活性——但我覺得他並沒有很好地支持這一說法，**我來這裡是為了告訴你我認為他錯在哪裡**。 在我看來，更好的問題是為什麼我們*還*沒有適用於 JavaScript 的 Laravel？答案是我們仍在努力。 在他對 JavaScript 世界中可以與 Laravel 或 Rails 相媲美的全端框架的總結中，他沒有考慮到一些重要的點： 1. **人們真的想要一個 Laravel/Rails for JavaScript** 。如果他們不這樣做，就不會進行如此多的嘗試來建立一個，他也不會製作一個影片，其唯一目的是回應“*為什麼 JAVASCRIPT 沒有自己的 Laravel！？* 」 2. **他沒有考慮 JS 生態系中底層工具的時機和成熟度**。也許並不是說 Laravel for JavaScript*不需要*存在，只是由於生態系統本身存在一些重大差異，例如它們的歷史有多長以及創新主要發生在哪裡，所以它還不存在。 3. **他也沒有詢問這些類型的解決方案適合誰**。當然，並非所有開發人員都有相同的目標，因此有些人可能會選擇可組合方法，而有些人則喜歡使用框架。 那麼讓我們看看我們是如何走到今天這一步的，以及我們如何能夠將像 Laravel 或 Rails 這樣的全端框架引入 JavaScript 世界。 完成任務 ---- 在他的影片中，Theo 提出了這樣一個觀點：「*現在 React 世界裡有一句俗話，那就是『如果你不使用框架，那麼你就在建立一個框架』」。*批評，Theo 認為大多數JavaScript 開發人員都沒有抓到重點，建立自己的「自己的框架」實際上是一種優勢。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5ft5f1j2zemurcvvzzk.png) 他認為 JavaScript 生態系統的模組化特性是一個巨大的優勢，但這聽起來對普通開發人員來說承受著很大的壓力，需要做出不必要的判斷呼叫並管理大量樣板程式碼。 當然，您的團隊需要創新並滿足特殊用例的需求。這些是優先考慮模組化的。他們盡可能調整、改進和榨取開發人員體驗 (DX) 和性能，以正確完成他們獨特的工作。 但另一方面，也有許多團隊的主要目標是在他們正在建立的產品方面創造價值和創新，而不是他們用來建立產品的工具。這些開發人員會青睞一個允許他們只專注於業務邏輯的框架。這為他們提供了一種穩定的方式來建立具有最佳實踐的東西，以便他們可以輕鬆地從一個專案推進到另一個專案。在這個陣營中，還有精幹、刻薄的獨立駭客，他們正在尋找框架，以便他們能夠快速行動並將想法推向市場！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21tanpp8rmrboal0jl57.png) 這有點像Mac和Linux之間的差別。 Mac 的統一堆疊開箱即用，這意味著許多專業人士因其生產力而喜歡它，而如果您尋求靈活性並有時間和知識來根據自己的需求進行調整，那麼 Linux 是很棒的選擇。兩者都是有效的解決方案，可以共存以滿足不同的需求。 這種對生產力的關注使得 Rails 在當時如此強大，也是 Laravel 目前如此受歡迎的框架的原因。建立這樣一個 JavaScript 框架的多次嘗試足以證明，有很大一部分 JavaScript 開發人員也想要這樣的解決方案。 但也許這樣一個框架還不存在的原因與開發人員是否想要一個框架無關，而是為了使這樣一個框架組合在一起所需的重要因素直到現在才協調一致。為了使這樣的框架廣泛採用，它首先需要足夠穩定的底層技術來建造。之後，它需要時間和許多迭代周期才能達到成熟度，以便開發人員可以放心採用它。 這些因素在 JavaScript 世界中是否一致，為我們提供了 PHP 和 Ruby 已經擁有的框架類型？也許還沒有，但他們似乎正在慢慢走在一起。 比較生態系統 ------ Theo 的要點之一是JavaScript 作為一種語言能夠實現一定程度的模組化和可組合性，而Ruby 和PHP 等語言則無法做到這一點，這就是為什麼Ruby 和PHP 生態系統可以得到全端框架的良好服務，但JavaScript*不需要因為*你可以自己創作東西。 雖然 JavaScript 是一種特殊的語言，它支援函數式和命令式範式以及動態特性，但它也有很多缺陷（儘管它最近已經有了很大的改進），所以你通常不會聽到它在就像西奧在這裡所做的那樣。事實上，您可能更有可能聽到 Ruby 及其作為模組化和靈活語言特性的讚揚。 因此，如果 JavaScript 作為一種語言的一些獨特屬性使它成為 Web 開發之王，那麼它又是什麼呢？ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r051nlojgrvt9crc03jd.png) 嗯，答案非常簡單： **JavaScript 是瀏覽器的語言**。 *早在*大多數 Web 開發都發生在伺服器端的時候，PHP、Java、Ruby 和其他語言佔據了主導地位。在這個時代，開發人員只會用 JavaScript 寫一小部分功能，因為大部分的工作都是在伺服器端處理。 但隨著Web 開發的發展，我們開始建立更豐富的應用程式，具有更動態、響應更快和即時的功能，許多程式碼從伺服器轉移到客戶端上的JavaScript，因為它（基本上）是唯一可以實現的語言。因此，您不再主要使用 PHP 或 Ruby 進行開發，並在其中撒上一點 JavaScript，而是將應用程式劃分為客戶端上的大量 JavaScript，以及伺服器上的 Ruby 或 PHP。 隨著 NodeJS 的到來以及在伺服器上編寫 JavaScript 的能力，JavaScript 的最後一個權力舉措隨之而來，這鞏固了它作為 Web 開發語言之王的地位。如今，開發人員可以（而且確實）用 JavaScript 編寫整個應用程式。這意味著您需要更少地了解一種語言，同時您也可以在前端和後端之間共用程式碼。這為前端和後端之間更好的整合開闢了一條途徑，它已經像滾雪球一樣進入了我們今天所知的生態系統。 因此，與其說 JavaScript 作為語言的獨特屬性使其成為 Web 開發的主導生態系統，不如說是其作為唯一可用於編寫客戶端程式碼的語言的獨特壟斷地位，而且它還可以用於伺服器 -邊。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulc5eo5qu3a0nuv6bnv5.png) 正如 Theo 所說，「在 JavaScript 生態系統中*，我們有無數的人正在製定出色的解決方案*」。這是正確的。正是那些在該領域工作的無數開發人員為 JavaScript 建立了靈活性和模組化解決方案，而不是程式語言的固有品質。 由於 JavaScript 生態系統仍然是最熱門的生態系統，因此它擁有最多的開發人員，同時每天不斷吸引新的開發人員。這意味著我們擁有一個龐大、多元化的社區，主要做兩件事： 1. 創新 2. 大樓 創新者（和影響者）往往聲音最大，因此輿論很大程度上偏向他們。但也有很多建築或「正常」使用正在發生！只是創新者往往代表建設者說話。 那麼，鑑於 JavaScript 生態系統中正在發生的一切，嘗試為 JavaScript 開發人員建立一個持久的框架是否毫無意義，正如 Theo 所建議的那樣，或者無論創新者如何聲稱，我們是否都在實現這一目標？ 顯示您正在使用的內容 ---------- Theo 也提到了目前一些 JavaScript 框架的名字，這些框架要么未能成功，要么在成為全面的全端解決方案時「*似乎無法做到正確*」。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/susa9icldz2hzysqo1qm.png) 他的觀點確實有道理。到目前為止，像[Blitz](https://blitzjs.com/) 、 [Redwood](https://redwoodjs.com/) 、 [Adonis](https://adonisjs.com/)或[T3](https://create.t3.gg/)這樣的解決方案還沒有能夠像 Rails 或 Laravel 一樣在其生態系統中普及。 **但這些事情需要時間。** 看看上面的圖表。 Laravel 和 Rails 已經存在了 13-15 年！相較之下，使用的 JavaScript 框架才剛起步，其中一些框架（例如[Wasp](https://wasp-lang.dev)和[Redwood](https://redwoodjs.com/) ）正處於與 Laravel 和 Rails 最初幾年類似的開發階段。 正如您所看到的，好的解決方案需要時間才能成熟。即使其中一些框架開始停滯其最初的巨大增長，也證明對這些工具的需求確實存在！ 困擾這些工具的主要問題是 Javascript 作為一個生態系統正在快速發展，因此對於像這樣的解決方案要長期生存，它不僅需要足夠固執己見，而且還需要足夠模組化以跟上生態系統的變化。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/biqe18hoeb6d06ughjhh.png) 阻止框架達到這種狀態的一個因素是與錯誤的技術連結得太緊密。這是 BlitzJS 的 NextJS、Redwood 的 GraphQL 和 MeteorJS 的 Blaze。另一個因素是框架*不夠大*，因為在JavaScript 生態系統中，這似乎是一項過於艱鉅的任務，在這個生態系統中，事情發展得很快，每個人都“害怕固執己見”，因為他們可能會受到現場最響亮聲音的批評。 換句話說，避免自行發展壯大並*真正*實現全端的框架（如 Ruby-on-Rails 和 Laravel）就錯過了解決持續困擾 JavaScript 開發人員的最常見痛點的機會。 但是，JavaScript 生態系統正在成熟和穩定，我們正在從以前的嘗試中學習，並且*將會*出現一個足夠大膽的全端框架，可以一路走下去，做足夠多的事情，並堅持足夠長的時間以確保其地位。 向黃蜂打個招呼 ------- Theo 在比較當今市場上的 JavaScript 框架時，也沒有提到我們目前正在開發的 React 和 NodeJS 全端框架[Wasp](https://wasp-lang.dev) 。 我們一直在努力讓[Wasp](https://wasp-lang.dev)成為*真正的*全端框架，滿足 Web 開發人員的需求，並填補 JavaScript 生態系統的空白，成為他們喜歡使用的框架。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7j67hychqw770nrau3f.png) **對於 Wasp，我們決定做大、有主見、真正的全端**。換句話說，我們將*全力支持*這個框架。 這意味著從首要原則出發思考並設計一種只有Wasp 使用的新穎方法，例如為我們的配置語言建置我們自己的編譯器，並真正實現全棧，同時保持其足夠的模組化，以便隨著生態系統的發展與生態系統一起發展。 這意味著我們在一開始就花了更多的時間嘗試不同的方法並建立基礎，最終從 2023 年底開始使我們的使用量大幅躍升。 今天看到 Wasp 被用來發布大量新應用程式和業務，甚至被一些大公司和組織內部使用（更多資訊很快就會正式發布），這對我們來說真的很酷！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eo9feum42heb2qcua9o.png) Wasp 與 JavaScript 世界中其他全端框架的不同之處在於，它將主要抽象層分離到自己的設定檔`main.wasp`中。這個設定檔為Wasp 提供了處理大量樣板檔案、以基礎設施為中心的程式碼所需的知識，並允許它擁有這個獨特的初始編譯時步驟，在該步驟中，它能夠在生成Web 應用程式之前推理出您的Web 應用程式在後台為其編寫程式碼（在生成它時使用該知識）。 實際上，這意味著您所要做的就是在 Wasp 的設定檔中高層描述您的 Wasp 應用程式，然後使用您熟悉的技術（例如 React、NodeJS 和 Prisma）實現其他所有內容。這也意味著 Wasp 具有很高的模組化潛力，這意味著我們正在建立它來支援未來的其他前端框架，如 Vue、Solid 或 Svelte，甚至支援其他後端語言，如 Python、Go 或 Rust。 如果您是那種希望存在 Rails 或 Laravel for JavaScript 的開發人員，那麼您應該[嘗試 Wasp](https://wasp-lang.dev/) （然後[進入我們的 Discord](https://discord.gg/rzdnErX) ，讓我們知道您的想法）！ 我們要去哪裡？ ------- 我們堅信 JavaScript 將會有一個全端框架，就像 PHP 的 Laravel 和 Ruby 的 Ruby-on-Rails 一樣。 目前看來，我們仍在努力實現這一目標。鑑於當前元框架和堆疊（例如 NextJS 和 T3）的流行，我們似乎很快就會實現這一目標。 但這些東西需要時間和耐心。 另外，你必須有足夠的勇氣去嘗試新的東西，因為你知道你的工作會受到生態系統中一些最響亮的聲音的批評。 這就是我們所準備的，也是我們*全力*支持黃蜂的原因。 到時候那裡見！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nig9t4pr85jqtz536frn.png) --- 原文出處：https://dev.to/wasp/why-we-dont-have-a-laravel-for-javascript-yet-45bi

0個讚   0留言 36瀏覽

您把 Git commit 訊息寫對了嗎？

當涉及版本控制時，Git 是一個非常有效的工具。然而，像任何其他工具一樣，您必須以正確的方式使用它才能充分利用它。您需要考慮不同的方面。本文重點介紹如何按照常規提交規範編寫有效的 Git 提交訊息。它概述了幫助您建立清晰、資訊豐富且標準化的提交訊息的基礎知識。 好的提交訊息是什麼樣的？ ------------ 發送訊息的目的是為了溝通。為了使溝通有效，接收者必須清楚地了解訊息發送者試圖告訴他們什麼。因此，您需要提供上下文和足夠的資訊。基於此，一個好的提交訊息應該傳達以下內容： **1. 類型（必填）** - `fix:` – 適用於修復錯誤的操作。 - `feat:` – 當您新增功能時適用。 - `BREAKING CHANGE:` - 當您引入以下變更時適用 可能需要更新程式的某些方面或 升級以避免中斷。例如，替換已棄用的 如果有的話，新資源可能會破壞功能 沒有向後相容性。您也可以指示中斷 使用符號“!”進行更改緊接在類型（或範圍，如果 可用的）。 例子; '壯舉（身份驗證）！ - `docs:` – 適用於文件。 其他包括*test:、chore:、refactor:、build:、style:*等。因此，提前了解詳細資訊很重要。 **2.範圍（可選）** 儘管提供範圍是可選的，但為了清晰起見，最好將其包含在內。範圍指定了受變更影響的程式碼庫部分，從而幫助讀者了解變更的上下文。這對於有許多貢獻者的大型專案尤其有用。它使協作變得更加容易。 **3. 說明（必填）** 這是您描述您所做的事情的部分。保持簡潔、開門見山。確保以命令式形式編寫。例如，不應編寫“新增身份驗證機制”，而應編寫“新增身份驗證機制”。這將提高自動產生的變更日誌和發行說明的可讀性。 **4. 本體（可選）** 您可以在此處提供有關您已實施的內容的更多資訊。使用空白行將正文與描述分開。 **5.頁尾（可選）** 如果您想在頁腳中包含任何元資料，請執行此操作。例如，如果您所做的變更解決了先前提出的問題，您可以透過引用參考號在此指出。例子; '**修復#003** ' 您也可以在頁腳中包含審閱者的姓名。 請記住，在給出描述之前，範圍後面應該跟有冒號和空格。您還應該記住，BREAKING CHANGE 在包含在頁腳中時區分大小寫，因此應以大寫形式書寫。 例子 -- - Chore(Art\_func)：將變數“Empty”更改為“empty” 將變數名稱從“Empty”更改為“empty”以保持一致 命名約定。 - 修復（資料庫）！ 修改架構以僅容納結構化資料。關閉所有 其他類型的資料。 - 壯舉：增加對黑暗模式的支援。 對於長訊息，請使用文字編輯器執行 ``` git commit ``` 沒有 -m 標誌。這將打開一個編輯器，您可以在其中編寫詳細的提交訊息。對於較短的訊息，您可以僅包含 -m 標誌並使用終端機而不是編輯器。 ``` git commit -m "subject" -m "body" ``` 使用多個 -m 標誌可以透過分隔主題、正文和頁腳來幫助您正確格式化訊息。 結論 -- 編寫提交訊息應該達到預期目的。為了使其清晰且資訊豐富，建議您至少包含所做更改的類型和描述。按照傳統方法維護一個良好的程式碼庫，可以支援各種流程的協作和自動化。有關詳細訊息，請務必閱讀[常規提交](https://www.conventionalcommits.org/en/v1.0.0/)指南。 --- 原文出處：https://dev.to/otienorabin/are-you-writing-your-git-commit-messages-properly-54cl

0個讚   0留言 33瀏覽

PHP：Laravel，Ruby：Rails，JavaScript：？

最近，Twitter 上發生了 JS 開發者與 Laravel 和 Rails 開發者之間的熱烈討論。它始於 Laravel 的作者 Taylor Otwell 的一條長推文： https://twitter.com/taylorotwell/status/1791468060903096422 簡而言之，他認為整個 JavaScript 生態系統缺乏像 Laravel 或 Rails 這樣真正的「全端」框架，而這些框架可以讓單一開發人員建立下一個 GitHub、AirBnb 或 Shopify。 我對此深表同情，因為我在建立[ZenStack](https://zenstack.dev/) （Prisma ORM 之上的打字稿工具包）時有著相同的目標。事實上，我常在社區裡聽到這樣的話： ![聊天影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vikbshwmv16hxolkhw2s.png) 沒有人可以否認 JS 生態系統的受歡迎程度和快速增長，即使在非會員中也是如此。那麼這是為什麼呢？ 歷史原因 ---- > 人們創造自己的歷史，但他們並不是隨心所欲地創造歷史；他們不是在自我選擇的環境下成功的，而是在已經存在的、給定的、從過去傳承下來的環境下成功的——卡爾·馬克思 PHP 和 Ruby 從一開始就被設計為伺服器端語言。 PHP 於 1994 年建立，用於建立動態網頁，而 Ruby 於 20 世紀 90 年代中期出現，是為通用程式設計而設計的。 鑑於它們的伺服器端起源，PHP 和 Ruby 自然適合綜合框架，可以處理 Web 開發的各個方面，從路由和控制器到資料庫互動和模板引擎。這導致了 Laravel 和 Rails 等框架的建立，以提供完整的、固定的方式來建立 Web 應用程式。 相較之下，JavaScript 是作為網頁瀏覽器的客戶端腳本語言而誕生的。直到 2009 年 Node.js 推出之前，它與後端無關。如果您聽說過 Netscape Navigator 和 Internet Explorer 之間的“瀏覽器戰爭”，您可能會意識到前端中持續存在的混亂，這種混亂今天繼續以瀏覽器兼容性的名義讓前端開發人員瘋狂。因此，早期的網路是將不同的技術拼湊在一起。因此，JavaScript 開發人員開始習慣模組化，允許靈活地混合和匹配庫和工具以求生存。這就是為什麼與 Node.js 一起出現的 NPM 以驚人的速度成長，迅速成為世界上最大的軟體註冊中心。 這種不同的情況導致了不同的開發人員文化： - **PHP/Ruby 開發人員：** “給我一個可以正常工作的框架。我想要約定、穩定性和清晰的交付路徑。” - **JS 開發人員：** “不要限制我！我想要靈活性、最新的工具以及以我的方式建置的自由，即使這意味著需要更多的前期工作。” 因此，即使擴展到後端世界之後，單一的、「一刀切」的方法也很難在 Javascript 生態系統中行得通。 當代努力 ---- 一方面，這種文化導致不斷的演變，使整個生態系統保持興奮和創新。然而，這也會導致新人更決策疲勞和更陡峭的學習曲線。 “哪裡有泥土，哪裡就有黃銅。”有些人踏上了冒險之旅，建造一個類似 Rails 的、包含電池的框架來挑戰現狀。以下是一些流行的例子： - [redwoodjs](https://redwoodjs.com/) ``` Full-stack JavaScript framework that integrates React, GraphQL, and Prisma. It simplifies development with a unified setup and automatic code generation, perfect for scalable applications. ``` - [blitzjs](https://blitzjs.com/) ``` Blitz.js extends Next.js into a full-stack framework featuring a zero-API data layer and Prisma for database access. It aims to simplify development by allowing direct server-side code calls from the frontend. ``` - [adonisjs](https://adonisjs.com/) ``` AdonisJS is a TypeScript-first web framework for building web apps and API servers. It offers a rich set of features out-of-the-box, including an ORM, authentication, and a powerful CLI, making it ideal for developers seeking a comprehensive and structured development environment. ``` 他們會成為 JS 世界的 Laravel 或 Rails 嗎？現在說可能還為時過早，但至少 RedwoodJS 顯示出巨大的勢頭： ![紅木流行趨勢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rwf3tizoy59tbck2q5j.png) 另一群人正試圖透過提供**固定**電池的工具包的「啟動套件」來解決這個問題。其中，最受歡迎的是[Create-T3-App](https://create.t3.gg/) ，它結合了 Next.js、tRPC、Tailwind CSS 和其他強大的工具，為您建立類型安全的 Web 應用程式奠定了堅實的基礎。 有趣的是，T3 的建立者 Theo 似乎對 JavaScript 世界的整個努力持悲觀態度： https://twitter.com/t3dotgg/status/1792136001345003748 樂觀的未來 ----- > 任何可以用 JavaScript 編寫的應用程式最終都會用 JavaScript 編寫。 — 傑夫·阿特伍德 雖然我並不完全相信阿特伍德定律，但我確實預見到 JavaScript 在 Web 開發領域的光明前景。原因很簡單： **這是歷史上第一次可以使用程式語言開發整個網頁應用程式。** 這是一個顯著的好處，特別是對於新手開發人員來說。感謝 TypeScript 優秀的類型推斷系統，我們不僅有能力這麼做，而且也願意這麼做。 Laravel 或 Rails 使用者常見的批評是，這些框架缺乏對系統中不同實體之間的關係進行建模的傳統方法，如下所示： https://twitter.com/chantastic/status/1791531154212033004 雖然它可能還沒有達到 Laravel 或 Rails 的水平，但目前 JS 界的努力已經認識到了這個問題。如果您查看上述解決方案的工具包，您會發現一個通用名稱： [Prisma](https://www.prisma.io/) 如果您還沒有聽說過 Prisma，它是一種現代的 TypeScript-first ORM，可讓您輕鬆管理資料庫模式，以極大的靈活性進行查詢和變更，並確保出色的類型安全性。這使 JavaScript 開發人員能夠實現 Laravel 和 Rails 中傳統的資料處理複雜性和輕鬆的關係建模，就像 Laravel 的 Eloquent ORM 一樣。 我在 Prisma 之上建立的[ZenStack](https://zenstack.dev/)工具包旨在進一步縮小差距。它在架構之上加入了授權層，然後自動為您產生 API 和前端掛鉤。因此，簡單地說，一旦您完成了架構，您就幾乎完成了後端。然後，您可以選擇任何前端框架（例如 React、Vue 或 Svelte）來完成您的 UI。 [![zenstack 架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3h4wsn2ha5znwzq88u3.png)](https://zenstack.dev/) 開始就要考慮如何結束 ---------- JavaScript 會迎來 Laravel/Rails 時刻嗎？就我個人而言，我相信，或至少希望，標準化約定可以帶來整個生態系統的全局最佳化。然而，考慮到 JavaScript 的歷史和文化，實現這一目標可能需要大量時間。目前還不清楚人工智慧是否會加速這一過程，或徹底顛覆它。 所以，看來我們只能拭目以待了。然而，我們不要在這場辯論中迷失方向，忘記我們的初衷，正如李羅賓遜所說： https://twitter.com/leeerob/status/1792215708715122752 所以，我在最後引用[W3C Web平台設計原則](https://www.w3.org/TR/design-principles/#priority-of-constituencies)中的一句話： > 使用者需求先於網頁作者的需求，網頁作者的需求先於使用者代理實現者的需求，後者先於規範編寫者的需求，後者先於理論純粹性。 --- 原文出處：https://dev.to/zenstack/php-laravel-ruby-rails-javascript-36dc

0個讚   0留言 39瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 每個開發者都應該收藏的 19 個 GitHub 儲存庫 📚👍
🔥 給各位菜鳥工程師的一封信
🔥 我學習了 JavaScript 並製作了一款火爆網頁應用程式 🤯
🔥 DNS 基礎：了解 Internet 的目錄服務
🔥 只需 2GB 記憶體即可將後端擴展到 1M 請求 ⚡️
  近期留言
熱門搜尋： 查詢 使用 C 開發 Ai 前 COM c 題 語言 % 1 ＣＳＳ 第一 ui 學習 工作 日期 2 bi 主題 4 專案 50 作為 javascript 部落格 分享 工程師 套件 技術 架構 Git 前端 結構 網頁 JavaScript AI 搜尋 遊戲 非同步 19 JS 20 網站 js 作業 後端 ` AWS 2024 Java github 測試 git 新手 app 研究 go . linux 房 Github ul local 系列 練習 面試 jav react HTML 10 html 研 create Line class console .NET prisma BASIC cn 作業分享 CD id JavaScript 系列 for 資料庫 隨機 2023 入門 ci Html JAVA GIT java 乾淨 this 謝謝 javascript 系列
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。