🔍 搜尋結果:作為

🔍 搜尋結果:作為

我發現的很酷的 VSCode 擴展

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

從 SDE1 到 SDE2,甚至更高! 🚀 實際需要什麼。

> ***「我擅長寫程式碼。就在這個月,我發了 11 個 PR!我甚至按時更新了我的大部分票。也沒有請那麼多假!而且我也比 Sam 工作了更多時間!為什麼沒有我沒有升職,但他們卻升職了?*** > *-- 一些不幸的人,這次沒有得到促銷。* 這聽起來有關聯嗎? 我以前見過這個。 很多。 有時原因是辦公室政治。 🤬 有時,這只是期望沒有得到良好的溝通。那可能很糟糕。 🥲 有時,你如何達到既定的期望與實際的標準之間**存在不匹配**。 🤔 您可能無法控製或改變您的辦公環境。但你當然可以控制自己,確保沒有任何事情可以阻止你**在職業階梯上的上升**。 ![你明白了,規劃辦公室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6htoz012vjxxtc5po2hk.gif) > ### 涼爽的!你能快速引導我完成我需要做的事情嗎? 首先要知道身為軟體開發人員的職責是什麼。我不是指您在目前組織中的職責,而是指作為整體和個人開發人員的職責。 #### 目錄 我認為開發人員應該致力於涵蓋**5 個廣泛的領域**。 *點擊連結可跳轉至該部分。* 1. [技術](#1-technical-skills-)(程式碼品質、語言熟練度、測試、效能) 2. [生產力](#2-productivity-)(可靠性和效率) 3. [協作](#3-collaboration-)(溝通和評論) 4. [所有權](#4-ownership-)(責任和主動性) 5. [影響](#5-impact-)(系統/產品改進和創新) *“至此,我們製作 D&D 角色表的工作就完成了一半。滾動 Nat 20!🤣”* **我只會介紹您可以控制的事情。** 我特別提到這一點是因為我看到許多組織犯錯的一件事是,評估的各個領域最終都包括您可能無法控制的事情。 例如,您可能無法控制您的工作對公司的影響力。在大多數情況下,您只能完成直接要求您做的事情。 > ### 好吧!我們走吧!我已經準備好升職了! ![辦公室一百萬美元](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q5npkuc8euhcnb2pvtm.gif) 我上面提到的 5 個領域並不是 SDE1 所特有的。這是每個開發人員都需要掌握的東西。但每個領域的標準和期望都會改變。 讓我們討論一下每個領域的基線期望是什麼,以及您需要做什麼才能達到下一個水平。 **稍安毋躁。這會很長。** **但請記住,下面只有 5 個部分...👇** ![這需要一段時間](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaj5r04sxuc1fsfsaqtv.png) ### 1. 技術能力[\[🔝\]](#table-of-contents) 在 SDE1,沒有人指望您能引起轟動、改變世界、節省數十億美元! 他們希望您以最少或最多偶爾需要指導的方式完成工作,並且您交付的工作不需要重新審視或修復(只要合理)。 **太長了;博士** 編寫其他人可以閱讀的體面程式碼,並且不會每 2 秒就中斷一次。 有幾種方法可以做到這一點。 **寫愚蠢的程式碼。不是“智能”程式碼。** - 您可能是 Leetcode、Hackerrank 或類似事物的奇才。但不幸的是,這些網站鼓勵初級人員如此努力地追求效能,以至於常常以**犧牲可讀性為代價**。 - 如果您知道兩個循環僅針對`i`和`j`的較小值執行,那麼使用嵌套循環並不是一個壞主意。 - 如果保證陣列最多只有幾個專案,那麼不使用映射/字典而不是陣列並不是一個壞主意。 ![編寫與閱讀程式碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amla8isarsp66etjd99v.png) **了解該語言為您提供的所有工具。** - 您可能習慣於對所有事情使用 for 循環,但箭頭/lambda 函數可以使您的程式碼更具可讀性。 - \[JS 範例\] 你可能習慣將事物儲存在物件`{}`中,每次尋找的時間複雜度為 O(1),但是`set.has(thing)`比`!!obj[thing]` (甚至`Boolean(obj[thing])` **了解為什麼測試有價值,然後編寫測試** - 人們常常只是在寫測試,因為這是「最佳實踐」。 - 如果不了解背後的原因,您可能會編寫無效或毫無意義的測試。 - 這個想法是,**做任何你需要做的事情,以增加對程式碼穩定性的信心**。您需要使用類型嗎?當然。您需要聘請 QA 人員嗎?有點低效,但很酷。**也許你需要寫...測試?**好吧,但是……我的目標是什麼? - 這可以是一個單獨的部落格。**但這裡有一個簡短的簡短介紹...** - 您是否需要編寫單元測試、整合測試、驗收測試,無論您如何稱呼它們,都沒關係。人們可能對此感到「宗教」。但只要你的測試做了一件基本的事情,這一切都不重要…提高你對程式碼不會破壞的信心。 - 有時您可能需要重構程式碼,使其更易於測試,但是一旦您這樣做了幾次,您就會開始從可測試性的角度考慮程式碼。 - 在實現任何東西之前,為您預期的實作編寫測試也是一個好主意!導致測試套件一開始就完全失敗,而當您實施一些東西時,它會逐漸保持通過!順便說一句,這基本上就是測試驅動開發(TDD)。 **關心表現** - 沒有人會期望您始終以 60 FPS 的速度執行所有內容,或者所有內容的延遲都低於 100 毫秒。 - 但請注意,您的程式碼何時可能會導致對資料庫發出過多請求,或載入過多資料。不要讓你的元件渲染 5 次,因為你無法弄清楚如何正確使用`useEffect`和`useState` 。在需要的地方尋求協助,但要夠小心,不要讓這些東西進入生產階段。 ![延遲紙飛機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57g9q3qria2u6k6s3of5.gif) **⏫ 進入 SDE2:** - 更深入地了解您使用的語言和框架的內部結構。 🧠 了解 React 如何實際渲染事物。了解瀏覽器如何處理從瀏覽器到伺服器的多個請求。了解 Postgres 如何選擇優化或不優化查詢。了解應用程式部署管道的配置方式。 - 詢問有關專案、元件、API 等是如何建構的問題。了解這些設計模式的名稱以及它們的優點和缺點。開始參與架構討論並提出改進建議。誰知道?您可能有更有經驗的人沒有考慮到的想法。 - 指導他人最佳編碼實務。團隊中常常會有比你資歷低的人。查看他們的程式碼。讓他們審查您的程式碼並分享他們應該關注的內容。像尤達一樣,你應該分享你的智慧。 🧠 ### 2. 生產力[\[🔝\]](#table-of-contents) 作為 SDE1,您的生產力是透過您按時可靠地完成任務、有效管理工作負載以及保持專案一致進度的能力來衡量的。您還應該能夠處理輕微的干擾和依賴性,而不會失去焦點或需要持續的指導。 您可能經常需要依靠工具或應用程式或腳本來更有效地完成某些事情。有時您可能需要自己製作這些工具。 如果感覺太多了也沒關係。它不會總是完美的。即使是更資深的開發人員也並不總是能確定這一點。 你會到達那裡的。重要的是,如果您無法履行承諾,請儘早溝通。 **太長了;博士** 目標是按時出色地完成任務。當您覺得自己做不到時,請盡快讓人們知道。 **知道什麼時候該做什麼,什麼時候該說「不」🙅** - 學會區分什麼是緊急的,什麼是重要的。使用艾森豪威爾矩陣等工具有效地確定優先順序。 - 專注於高影響力的任務,但不要忽略那些讓車輪轉動的小任務。 - **學會說不。**天哪,這是一個很大的。這非常重要,以至於它可以單獨成為一個部落格。我有故事。 - 如果你不善於拒絕,你偶爾會發現自己的工作負擔過重。如果你能簡單、清楚地解釋你正在做的事情,以及你何時能夠處理下一件事情,人們通常會認為這是可以接受的。 - 如果你發現自己被逼入絕境,你需要依靠你的經理來為你確定優先事項。只需詢問他們認為最重要的是什麼。 ![沒有上帝請不](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46j4r2r8b9oho91fduvw.gif) *你看到這個人來了,不是嗎?* **管理好你的時間,別讓自己精疲力竭** - 使用番茄鐘等技巧來保持工作效率而不至於精疲力竭。我有很多朋友使用某種數字或實體番茄計時器來管理他們的工作日。 - 追蹤您在不同任務上的時間,以了解您可能在哪些方面花費了過多或過少的時間。 ![番茄計時器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktom06mrbpkg10u0vslo.png) *我的朋友以前常用的番茄計時器* **如果必須的話,可以透過製作自己的工具來自動化無聊的工作** - 自動執行重複性任務以節省時間。腳本和工具可以處理很多平凡的事情。我已經建立了一大堆腳本、用於內部偵錯的 Slack 命令等,這已經為我和團隊在[Middleware](https://github.com/middlewarehq/middleware)節省了無數的時間。 - 熟悉 IDE 快捷方式、插件和其他可以加快開發過程的工具。如果您的團隊中的大多數人都使用 VSCode 進行開發,您甚至可以就通用 IDE 配置達成一致,並透過將 .vscode 目錄提交到儲存庫來共享該程式碼庫! **⏫ 進入 SDE2:** - 開始更獨立地管理您的專案。建立現實的時間表並滿足它們。 SDE1 可能會不時錯過時間表。 SDE2,則不然。你走得越高,你就越有可能提前完成你的專案! - 主動辨識並解決工作流程中的瓶頸。向團隊提出流程改善建議。通常,您可能沒有時間或支援來實施此類改進。一個可靠的 SDE2+ 舉措就是在其他工作之間的零碎時間裡自己完成,突然有一天,團隊的一些關鍵工作流程痛點神奇地得到了解決!都是因為你。 - 平衡多個專案和任務,同時不忘記最後期限,並了解您並不總是透過每天工作 28 小時來滿足最後期限,您會找到更有效地完成同一件事的方法。因此,表明您可以以相同的生產力水平承擔更多的責任。像托尼史塔克管理他的套裝技術一樣升級你的多任務遊戲! 🦾 ### 3. 合作[\[🔝\]](#table-of-contents) 在 SDE1,您需要清晰溝通、分享您的進步並成為樂於助人的團隊成員。您與他人有效協作的能力對於團隊的成功至關重要。 有很多人依賴你按時交付東西。他們是您的工程經理、產品經理,也許還有他們報告的其他經理,還有等待您完成專案部分的同事。 人們通常可能會晚一點理解某些事情,特別是如果儘早得知的話。但真正導致問題的是: - 不到最後一刻才告訴你會遲到。 - 您的估計不清楚或非常不準確。 我仍然把其中的一些搞砸了。但總體而言,情況確實有所改善。 👌 **太長了;博士** 做一個好的隊友並進行良好的溝通。 ![團隊合作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/385iu3jjbits6zfgq6zz.gif) **早說、常說,但最重要的是──傾聽** - 讓您的團隊了解您的最新進展。透過站立會議和 Jira 或 Trello 等專案管理工具進行定期更新可以幫助每個人保持一致。 (我知道,Jira 很糟糕,但你必須明白,對於你的經理和高層來說,這是一個相當不錯的工具,可以用來追蹤事情的運作情況。) - 在會議和討論期間積極傾聽。在做出回應之前先了解別人在說什麼。 - 成為一個好的傾聽者也會讓你更快找到女朋友/男朋友🤣。如果你不這樣做,我們希望你能通過規則 1 和 2。 **保護您的生產,檢查程式碼** - 積極參與程式碼審查。提供建設性的回饋並樂於接受。非常關心不要讓可讀性差或有潛在風險(效能、使用者體驗或安全性方面)的程式碼最終出現在產品中。 - 從您收到的回饋中學習並將其應用到您未來的工作中。 如果您需要令人信服地了解為什麼程式碼審查至關重要以及如何正確執行,也許這會有所幫助: {% 嵌入 https://dev.to/middleware/the-senior-engineers-guide-to-the-code-reviews-1p3b %} **讓您的團隊隨時了解您所學到的知識** - 與您的團隊分享您所學到的知識。無論是新工具、編碼技巧還是有趣的文章,讓您的團隊了解情況有助於每個人成長。如果您使用 Slack,#engineering 頻道是進行此類活動的好地方。 #memes 也是如此。 😄 - 為程式碼庫或流程的複雜部分撰寫文件並建立指南。這有助於其他人更有效地理解和使用您的工作。記住這個文件需要可搜尋是非常重要的。無法搜尋到的文件就不存在。 [Glean](https://www.glean.com)可能是一個很好的工具來幫助解決這個問題,但它是一個付費(而且昂貴)的東西。 **⏫ 進入 SDE2:** - 發揮指導作用。幫助初級開發人員應對任務和挑戰。幫助他們規劃、估算、記錄等。 - 領導小型專案或倡議。表明您可以協調努力並將團隊聚集在一起以實現共同目標。 - 促進團隊內部的溝通。幫助解決衝突並確保每個人的意見都得到傾聽。每個團隊都有內向的人,通常他們是最難溝通的,盡可能幫助他們。成為團隊中的美國隊長,團結一致,以身作則! 🛡️ ### 4. 所有權[\[🔝\]](#table-of-contents) 擁有所有權意味著對你的工作及其影響負責。作為 SDE1,這意味著您應該確保您的程式碼按預期工作,勤奮地處理您的任務,並履行您的承諾。 就像創始人或執行長必須盡一切努力確保公司生存、繁榮和盈利一樣,你也必須盡一切努力確保你的工作符合規定的時間表,並以以下方式交付:不僅滿足,而且超越標準。 可以理解的是,有時設定的時間表或期望可能根本不切實際。這就是你的溝通技巧需要發揮的地方。 **太長了;博士** 擁有你的工作及其品質。完成你開始的事情。 ![德懷特覆蓋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hc5yu0726kgkxrws7xmy.gif) *也許不像……那樣。* **學會承諾** - 如果您致力於一項任務,請堅持到底直至完成。如果遇到障礙,請儘早溝通。 - 不要推卸責任。如果您的程式碼或任務有問題,請努力解決它,而不是責怪他人。 **積極主動:看到一些事情,做一些事情** - 不要等待問題被分配給您。如果您發現有問題需要修復,請主動解決。當然,您需要適當地確定優先順序。並非所有需要修復的東西都需要您先停放正在處理的任何東西並先修復它。 - 提前想好。預測潛在問題並在它們成為問題之前解決它們。對於技術或工程相關的工作,ERD(工程需求文件)可以大大幫助您制定工作計劃。 - 您的經理可能會從他們的角度關注您團隊的生產力,但作為積極主動的開發人員,您也可以這樣做。畢竟,您才是真正了解是什麼讓您有生產力的人。如果你能想出一種方法向你的經理進行生產力分析,向他們展示你的團隊實際上做得很好,或者在需要他們注意的事情上遇到了阻礙,這會讓你得到一些嚴肅的觀點。 DORA 指標是衡量開發團隊生產力的一種相當流行的方法。如果您不確定如何開始衡量這樣的事情,也許這個部落格會有所幫助: [什麼是 DORA 指標?](https://www.middlewarehq.com/blog/what-are-dora-metrics-how-they-can-help-your-software-delivery-process) **每一天,都要比前一天更好** - 反思你的工作。什麼進展順利?還有什麼可以更好的呢?利用這種反思來不斷改進。這將是您的經理將(或應該)進行的 Sprint 回顧的更個人化版本。 - 積極尋求回饋並應用它。努力讓您承擔的每個專案變得更好。對於提供回饋的人來說,共享回饋也是一項艱鉅的工作。如果您的組織沒有為此定義流程,那麼每季、每月等阻止一些時間可能是個好主意。 - 嘗試遵循童子軍規則,該規則基本上規定您應該留下比您發現時更好的程式碼庫。[在這裡閱讀更多內容](https://deviq.com/principles/boy-scout-rule)。 **⏫ 進入 SDE2:** - 從頭到尾推動專案。承擔需要您在最少監督的情況下規劃、執行和交付的任務。如果你證明自己有足夠的自我能力,你的經理可能會讓你監督更多的開發人員來執行這個專案。現在這是一些高級開發的東西。 💪 - 辨識並實施流程、工具或程式碼庫的改進。之前也提到過,但這裡的重點略有不同。表明您正在著眼於更大的前景並為組織的長期成功做出貢獻。 - 倡導最佳實踐並確保它們得到遵循。成為您專案中的蝙蝠俠—可靠、警惕並始終提供卓越服務。 🦇 ### 5.影響[\[🔝\]](#table-of-contents) 作為 SDE1,您的影響可能僅限於分配給您的任務和專案。然而,表現出更廣泛的理解並在你的直接職責之外做出貢獻可以讓你與眾不同。影響力不僅指你所做的事情,也指你的工作如何影響和造福你的團隊、你的專案和整個組織。 **太長了;博士** 做出改變。不只是做,而是改進。 ![往前想](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikxg6wmu8bnj72alus4c.png) **不要局限於“你的工作”** - 了解您所從事的業務和行業。 - 確定改進或創新的機會。建議可以使團隊或產品受益的增強功能。 - 關注產品的最終用戶。了解他們的需求和痛點可以引導您做出更有影響力的貢獻。不要只是建立你要求的任何東西,還要分析你的努力對使用者和組織有多成功。 **為社區做出貢獻** - 參與內部和外部開發者社群。參加聚會、為開源專案做出貢獻或撰寫技術部落格。 - 分享您的知識和專業知識,幫助他人成長和學習。組織技術講座、網路研討會或程式設計訓練營或在技術講座、網路研討會或程式設計訓練營中發表演講。 - 與組織內的其他團隊合作。為跨職能專案提供協助和協作,以擴大您的影響力。 ![瑞安社區服務](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zh2nexhrfd6azq4cz6qm.gif) *您可能不會被「要求」在工作中幫助您的社區🤣* **積極主動地解決問題** - 超越任務的直接要求。考慮一下您的解決方案如何使其他專案或未來的工作受益。 - 養成批判性思考您使用的工具和流程的習慣。提出並實施可以節省時間、減少錯誤或提高效能的改進措施。 - 不要等待有人給您分配有影響力的工作。尋找機會做出有意義的貢獻,即使這意味著走出你的舒適圈。 有時您可能必須依賴第三方工具來辨識流程中的問題。像[中間件](https://github.com/middlewarehq/middleware)這樣的工具可以讓您發現軟體交付中的問題。現在這是高級開發人員的舉動。 {% 嵌入 https://github.com/middlewarehq/middleware %} **創新與改進** - 隨時了解您所在領域的最新趨勢和技術。嘗試可以使您的專案受益的新工具和方法。 - 考慮工作中的可擴展性和可維護性。設計系統並編寫可以隨著業務需求而成長和發展的程式碼。 - 鼓勵團隊內部的創新文化。促進腦力激盪會議和黑客馬拉松,以產生新的想法和解決方案。 **⏫ 進入 SDE2:** - 開始戰略性思考。找出對團隊目標和公司成功產生重大影響的方法。尋找您和團隊的工作模式,並提出可以使每個人受益的改進建議。大多數人都不太擅長這一點,所以如果你能做到這一點,那絕對會讓你脫穎而出。 - 領導推動創新和改進的措施。表明您可以創造性地思考並提出有效的解決方案。這可能涉及提出新功能、優化現有系統或改進開發流程。 - 倡導可以提高生產力或品質的新技術或方法。 🚀 帶頭將這些技術整合到您的專案中並指導其他人使用它們。 --- 請記住,從 SDE1 升級到 SDE2 以及更高版本是一個旅程。專注於你可以控制的事情,尋求回饋,並不斷改進。作為開發人員,您的成長是技術技能、生產力、協作、所有權和影響力的結合。透過奉獻和努力,您不僅會升級,而且會享受成為更好的工程師和有價值的團隊成員的過程。遊戲開始! 🎮 **PS:資深工程師擅長辨識阻礙團隊準時交付的各種問題,同時又不影響輸出品質。** 其中一些使用[中間件](https://github.com/middlewarehq/middleware)等工具。 {% 嵌入 https://github.com/middlewarehq/middleware %} --- 原文出處:https://dev.to/middleware/going-from-sde1-to-sde2-and-beyond-what-it-actually-takes-1cld

給中級開發人員的建議

序幕 == 我五年前寫了[這個博客](https://dev.to/rampa2510/3-tips-for-new-developers-49hj),當時我還是一名初級開發人員。我當時分享的技巧至今仍然是我遵循的規則,並且已經成為我不可或缺的一部分。作為一名開發人員,我已經成長了很多,所以現在我想作為中級開發人員回饋社區。 這裡提到的建議是針對那些熱愛自己的手藝並希望做得更好的人,不是為了更好的報酬,而是為了享受程式設計的樂趣。 1)熱愛你的工作 -------- 我看過人們把程式設計當作只是一份工作,只是為了錢。他們透過程式設計謀生並過上日常生活。這種生活方式很好,這是你的選擇。但如果你的技能沒有提高並且你變得停滯不前,請不要感到驚訝。要擅長編程,你必須熱愛你的工作。你一天的大部分時間都花在日常工作上編程,如果你不喜歡它,你就不會在工作的同時主動提高你的技能。 我有一個個人故事可以分享。我曾經在一家我討厭的公司工作過。我沒有主動改進程式碼庫或學習新東西來增強應用程式架構。現在,我從事著自己熱愛的工作,並將其視為自己的產品。這通常會引導我學習新事物並以結構良好的方式開發程式碼庫,因為我不想破壞它。如果你做你不喜歡的事,弊大於利。你可以在下班後學習,但你一天會浪費大約六個小時,但收效甚微。 2)成為多面手 ------- 永遠不要把自己放在一個盒子裡。不要認為自己只是前端開發人員或後端開發人員。將自己視為軟體開發人員。優秀的開發人員不會將自己局限於特定的技術,他們專注於解決問題,而不僅僅是問題的一部分。如果你將自己限制在某個堆疊上,你就不會成為一個偉大的問題解決者。軟體開發就是解決問題,如果你不了解如何建立端到端產品,你就不會成為一個好的問題解決者。 在職業生涯開始時,您可能必須選擇特定的堆疊來證明自己是一名出色的軟體開發人員。但不要讓它限制你。如果您在一家優秀的公司工作,請與資深或其他開發人員交談,以深入了解不同的團隊並學習新事物。開始負責公司程式碼庫的其他部分,以轉變為更全端的開發人員角色。這樣,您將開始更多地考慮解決整個問題,而不僅僅是解決部分問題。如果不歡迎您與其他堆疊一起工作,我建議您從事另一份工作。公司永遠不應該限制工程師的學習。 所以,做個多面手。不要將自己限制在堆疊的某一部分。學習作為軟體開發人員解決問題。通才發現更容易擅長解決特定問題,因為他們已經有了廣泛的理解,因此可以更快地掌握新技術。 3)永遠不要停止學習新技術(當修補匠) ------------------- 這是許多開發人員忽略的關鍵點。要成為優秀的問題解決者,您必須隨時了解科技的最新進展。我在嗜好專案中找到了很多樂趣,這幫助我發展了許多技能。當你修補新東西時,你會學到很多東西,而且你永遠不知道它什麼時候會變得有用。 例如,假設您的任務是為您的公司建立一個部落格應用程式。他們想要一個客製化的解決方案,而不是使用 Webflow 和其他類似服務的解決方案。如果您跟上了最新的進步,您可以使用 Supabase 或 Pocketbase 等現代 CMS 工具來快速開發後端。為您的部落格網站設定 CMS 可能只需要 30 分鐘,使您無需建立和管理資料庫和後端程式碼。然後你就可以根據你公司的需求專注於前端。 這是一個個人例子:我已經業餘學習了一個月的 Go。最近,我必須寫一個 cron 作業來每 30 分鐘更新一次使用者指標。我知道 Go 對於此類任務來說非常出色且速度非常快,因此我在 Go 中建立了 cron 作業,建置了二進位文件,並每 30 分鐘安排一個帶有計時器的系統守護程序任務。它工作效率高,消耗的資源更少。如果我沒有在業餘時間修修補補,只在日常工作中編寫程式碼,我就不會在合理的時間內想出最好的解決方案。 cron 作業將以 Node 編寫,隨著使用者群的成長,這將需要更多時間。 因此,永遠不要停止學習和創造。最好的學習方法是創造和修補。我一直在業餘學習 Ruby on Rails 和 Go,並且開始欣賞各種生態系統提供的不同功能。這幫助我將新想法融入我的工作流程中。 4)取得所有權 ------- 我最近觀看了 ThePrimagen 的一段[影片](https://www.youtube.com/watch?v=5i_O6NLXYsM&t=1586s),這激發了我寫這個博客的靈感。他提到解決問題或成為優秀軟體開發人員的最佳方法是擁有產品。他談到《毀滅戰士》是如何由四個人創造出來的,他們因為擁有所有權而交付瞭如此好的產品。他們知道自己沒有其他人可以依賴,因此他們將開發最好的軟體作為自己的責任。沒有備用計劃。 他們從未感到倦怠或放棄,因為他們擁有產品,而不僅僅是任務。 為了提高軟體開發人員的技能,您需要開始掌控您正在建立的產品,而不僅僅是功能或任務。當您將任何功能或錯誤視為您要解決的問題,而不僅僅是其他人的另一項任務時,您會發現開發產品會更加有趣。這是戰勝倦怠的最好方法。當您擁有所有權時,您會發現改進產品並使產品更有效率的樂趣。 如果你正在開發一個產品,當使用者發現它們時,你不能將出現的任何錯誤歸咎於其他人。如果出現問題,你就是問題的一部分,所以你必須承擔起解決問題的責任並創造出出色的產品。好的、可擴展的產品是由團隊建立的,如果你不承擔責任,你就不是一個好的團隊成員。當您擁有所有權時,您可以編寫最好的程式碼來建立最好的軟體,而不僅僅是另一個軟體產品。 就像製作《毀滅戰士》的四個人一樣,他們投入了大量的時間來創造屬於他們的東西,他們從不滿足於只是另一款遊戲,他們創造了一款定義時代的遊戲。其餘的,正如他們所說,是歷史。這同樣適用於你,如果你想製作最好的軟體,你必須開始擁有所有權並將該產品視為你自己的產品。 結語 == 寫完這個部落格並與社區分享我的想法後,我感覺很好。我們可能會爭論框架、語言和工具,但這些爭論有助於我們改進。他們推動技術進步,使我們的社區極具競爭力。讓我們保持激情! --- 原文出處:https://dev.to/rampa2510/advice-for-intermediate-developers-4777

程式設計師必須具備的7個習慣!

介紹 -- 作為一名程式設計師,您知道您的工作需要高度專注,因此往往會佔用您大量的時間。是的,這也發生在我身上,我花了很多時間做任務,但有時結果並沒有達到預期。我意識到我從工作經驗和同事的見解中獲得了一些東西,並且有一本書很有趣並且對改善我的習慣非常有幫助。 您是否知道我們每天都遵循模式和習慣來生活,這些習慣會影響我們目標的結果。所以如果你想改變你的生活並實現你想要的,你要做的第一件事就是改變你的習慣。史蒂芬‧柯維在他的***《高效能人士的七個習慣》一***書中說:「*我們看待世界的方式完全基於我們自己的看法。* 」 讓我們先看看與我們日常活動相關的較小事物,而不是著眼於如此之大的世界。是的,沒錯,我想從我作為一個程式設計師的角度來分享。作為程式設計師,您應該了解一些提高生產力的習慣。其中一些內容也是基於我的經驗,所以結果可能會有所不同,但相信我,如果你練習得好,這將會很有用。好的,讓我們開始吧! **1. 積極主動** 柯維在他的書中描述了我們生活中存在的兩類人。**關注圈**是一個包含我們無法控制的事物的圈。同時,較小的圓圈是**影響圈**,其中包含我們可以控制的東西。 ![主動式和被動式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p50j7r9vgw6hhipidjz2.png) 基於這兩個圈子,**反應型的**人會更多地考慮**關注圈**,而**主動型的**人會更多地考慮**影響圈**。程式設計師也是一樣,我們中間一定有兩類人。 有**一些反應型程式設計師**忙於處理辦公室條件、公司財務等無法控制的事情,他們甚至認為自己的職業生涯可以透過影片《*如何在三個月內成為最好的程式設計師*》來決定。另一方面,也有一些**積極主動的程式設計師**選擇練習,嘗試幾次面試和比賽,以打開成為程式設計師或任何他們夢想的工作的機會。 積極主動的人知道他們需要了解外在事物,但他們才是對自己的職業負責的人。換句話說,要積極主動,你可以更專注於從自己內部尋找靈感,並且可以控制它,而不會忽視自己之外的重要事物,而不是僅僅期望別人給你一個「*神奇食譜*」。 **2.以終為始** 我們中的許多人一生都在隨波逐流,甚至不知道自己的目的。因此,我們所擁有的只是希望,這無論如何都不是一個好的策略。史蒂芬·柯維說「以終為始」換句話說,在做任何事情時,包括啟動一個專案,你必須確定明確的成功衡量標準以及實現這些目標的計劃。 ![開始就要考慮如何結束](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1bbrkhtnd78rarqcfd8.png) 如果您將其應用於編程,那麼每當您開始一個新專案時,您都會花時間了解最終產品。要建構的功能的功能和非功能要求是什麼? 我記得有人說過軟體工程是做出權衡的藝術。很少有正確和錯誤的答案,而是確定不同類型的設計以及特定情況下的優點和缺點的問題。不管你相信與否,我的經驗是,花 30 分鐘仔細規劃可以為你節省 10 多個小時的程式設計時間。 > 「人們比以往任何時候都更加努力工作,但由於缺乏清晰度和遠見,他們並沒有取得多大進展。本質上,他們是在用盡全力推一根繩子。史蒂芬‧柯維博士 當然,這並不容易,因為每個計劃都可能出錯,我也陷入過幾次。但這仍然比根本不計劃任何事情要好得多。 **3、要事第一** 能夠選擇什麼是重要的、什麼是不重要的也是一種有效的習慣。透過根據您的需求對您的興趣進行排序,您將能夠確定首先完成的工作的優先順序。 這個習慣與時間管理密切相關。柯維建議我們根據他建立的四個像限(他稱之為艾森豪威爾矩陣)來做主要事情。 ![艾森豪威爾矩陣](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hv4j1roh5p3f4gaw52uc.png) 以前我認為這個象限對於我的任務來說並不那麼重要。事實證明,這一點常常被大多數程式設計師所忽略。當我擔任軟體工程師時,我不斷受到需要解決的錯誤的轟炸。另一方面,我也有長期的專案需要完成。 當你承受如此大的壓力時,你就會忘記學習。因此,如果你的程式碼有問題,你只想去谷歌或使用人工智慧並複製貼上解決方案,而無需真正理解它。是的,真正了解問題的原因對學習來說很重要,但並不迫切。對許多程式設計師來說,隨著職業的進步,學習就會停止。這就是為什麼你需要專注於屬於這個象限的任務,並為你的長期成功安排特定的時間。換句話說,優先考慮並實現最重要的目標,而不是不斷地對緊急情況做出反應。 **4.雙贏思維** 一個人的**收穫**就是另一個人的**損失**——這個想法在我們的大腦中非常熟悉,可能是因為我們經常觀看的各種比賽和體育賽事。在這本書中,柯維博士認為培養「豐富心態」很重要。也就是說,相信有足夠的資源和機會讓每個人都獲得成功。這種心態對於軟體工程師的職業生涯成功至關重要。我們與其他工程師和其他工作職能人員(例如資料科學和產品管理)一起工作。 ![雙贏協議](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1thqzuw744a9usc2ezo.png) 能夠有效協作是您需要具備的主要技能之一。因此,能夠超越個人職業目標並為團隊擁有雙贏的心態非常重要。不只是透過讓別人輸來贏得自己,或是屈服於別人讓他們贏,甚至讓別人輸,因為我們也輸了。 習慣了總是想著能夠贏得多方的支持,會讓我們總是努力取得最好的結果。不僅如此,從長遠來看,這也極大地影響了我們與他人的關係。 為了建立長期良好的關係,我們需要與許多人建立關係。透過**雙贏思維**,這將有助於我們在未來建立良好的聲譽或形象,並使我們的工作從長遠來看更加有效。 **5. 首先尋求理解,然後被理解** 你是那種在給別人機會之前就忙著徵求自己回饋的人嗎?這不是史蒂芬·柯維所推薦的。 ![先尋求理解,再尋求被理解](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bg3uigm6p7xm7h9stc7v.png) 為了被別人理解,我們首先要做的就是**先理解別人**。高效能的人能夠具有極大的同理心,並透過理解他人來尊重他人。 但這如何適用於程式設計師呢?除了口頭交流之外,工程師還使用程式碼來相互交流。高效率的程式設計師了解**同理心**在編碼中的重要性。他們優先考慮程式碼的清晰度,以確保其他人(包括將來的自己)可以輕鬆理解和維護程式碼。 除了其他工程師之外,程式設計師還透過他們的產品與最終用戶進行交流。高效率的程式設計師會設身處地為最終使用者著想,優先考慮使用者體驗。他們預測用戶需求,設計可交付的介面,並建立錯誤訊息來引導用戶而不是讓他們感到困惑。 **6. 協同增效** 能夠與他人很好地協同工作的人將是高效的人。透過良好的關係和協作,您可以建立比僅依靠自己更好的解決方案。數學上1 + 1 = 2。 ![協同作用](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb8uq52jfzpkl28kyp32.png) 柯維博士在他的書中強調了欣賞差異並利用差異創造一個大於各個部分總和的整體的重要性。因此,關鍵在於充分發揮每個團隊成員的作用,創造出使用者喜愛的產品。高效的程式設計師採用**協作**編碼實踐,例如程式碼審查、配對程式設計和其他知識共享。透過結合個人技能和見解,團隊可以建立更強大、更有效率和創新的產品。 儘管這並不容易,尤其是對於程式設計師來說,他們大多數都是單獨工作,但透過習慣這一點,我們不僅可以成為獨立的人物,而且可以成為可以與任何人一起工作和良好協作的人。 **7.磨利鋸子** 高效率的人會在生活中不斷實踐事物,從而不斷進步、良好發展。科維說,我們在生活中必須磨練四件主要的事情:***身體、心靈、精神和精神***。是的,總的來說,這對於任何領域的生活來說都是非常重要的。但讓我們試著專注在更具體的事情上。 ![敏銳的發現](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2tj8no1yezmseadugi4.png) 對程式設計師來說,這是最重要的習慣。為了理解這個習慣,我們假設有兩個工人正在嘗試砍柴。第一個工人是個年輕人,整個8小時的輪班時間裡,他一直不停地砍柴。第二位工人是一位年紀較大的男子,每小時需要休息 10 分鐘,在休息期間他會花時間磨鋸子。如果你認為年長的人會砍更多的木頭,那麼你就已經理解了這個習慣。 作為一名程式設計師,你將面臨如此多的新技術。高效率的程式設計師了解**持續學習**的重要性。磨礪鋸子需要投入時間來獲取新技能、了解產業趨勢以及探索新技術。高效率的程式設計師必須透過練習、參加會議、參加程式設計社群等方式騰出時間進行專業發展。這種習慣可以幫助我們適應科技進步。 **結論** 有時候,在我們不知不覺中,壞習慣或多或少影響我們的生活,讓我們的生活變得低效。然而,一個習慣如果持續太久,就很難打破。 如果我們想要改善我們的生活,從改變我們的觀點到改變我們的習慣,這就是我們需要理解的。實踐史蒂芬‧柯維所說的這七個習慣將幫助我們更有效、更有意義地改變我們的生活。 僅僅了解這些習慣是不夠的,我們還必須全部應用它們,因為每一點都同樣重要且相互關聯。因為只有過有效的生活,我們才能走上更大成功的道路。 **參考** [富蘭克林科維](https://www.franklincovey.com/the-7-habits/) [高效能人士的七個習慣](https://books.google.co.id/books?id=36V_PAAACAAJ&hl=id&source=gbs_book_other_versions_r&cad=1) --- 原文出處:https://dev.to/tentanganak/7-habits-that-programmers-must-have-1dfj

Git 分支策略指南

自 2008 年以來,作為一名開發人員,我親眼目睹了版本控制系統的演變。從 SVN 開始,最終過渡到 Git,我已經看到這些工具如何在我們的日常工作流程中變得不可或缺。讓我分享一個詳細的分支策略,該策略已被證明在管理程式碼庫、確保穩定性和促進協作方面非常有效。 #### 主要分行 - **`main` (或`master` )分支:** - 生產就緒的程式碼。 - 僅包含經過徹底測試且穩定的程式碼。 - 直接提交受到限制;僅允許在程式碼審查和批准後透過拉取請求 (PR)。 - **`develop`分支:** - 反映當前開發狀態的最新程式碼庫。 - 所有功能和修復都在合併到`main`之前整合到此分支中。 - 作為所有新功能分支的基礎。 #### 支持分行 - **特色分支:** - **命名約定:** `feature/<feature-name>` - **建立自:** `develop` - **目的:**用於開發新功能或增強功能。 - **合併:**完成並測試後,合併回`develop` 。 - **錯誤修復分支:** - **命名約定:** `bugfix/<issue-id>` - **建立自:** `develop` (或`release` ,如果修復是針對即將發布的版本) - **目的:**修復開發過程中發現的錯誤。 - **合併:**修復後合併回`develop` (或`release` ,如果適用)。 - **發布分支:** - **命名約定:** `release/<version-number>` - **建立自:** `develop` - **目的:**為新的生產版本做好準備。 - **活動:**最終測試、錯誤修復和準備發行說明。 - **合併:**準備好後合併到`main`並`develop` 。 - **修補程式分支:** - **命名約定:** `hotfix/<issue-id>` - **建立自:** `main` - **目的:**用於需要直接投入生產的緊急修復。 - **合併:**一旦應用,就合併到`main`和`develop` 。 #### 分行工作流程 1. **功能開發:** - 使用`feature/<feature-name>`從`develop`建立分支。 - 實現該功能,提交變更並將分支推送到儲存庫。 - 開啟拉取請求以將功能分支合併到`develop`中。 - 進行程式碼審查,執行必要的測試,並將變更合併到`develop`中。 2. **錯誤修復:** - 使用`bugfix/<issue-id>`從`develop`建立一個分支。 - 修復錯誤、提交變更並推送分支。 - 開啟拉取請求以將 bugfix 分支合併到`develop`中。 - 經過審查和測試後,將變更合併到`develop`中。 3. **發布準備:** - 使用`release/<version-number>`從`develop`建立一個分支。 - 執行最終測試,修復所有最後一刻的錯誤並更新文件。 - 準備好後,將發布分支合併到`main`分支和`develop` 。 4. **修補程式:** - 使用`hotfix/<issue-id>`從`main`建立一個分支。 - 應用修復、提交變更並推送分支。 - 開啟拉取請求以將修補程式分支合併到`main`中。 - 將變更合併到`develop`中,以將修復包含在正在進行的開發中。 #### 最佳實踐 - **定期合併:**定期`develop`合併到功能分支中,以保持更新並避免整合問題。 - **程式碼審查:**在合併任何分支之前進行強制性程式碼審查,以確保品質和遵守標準。 - **自動化測試:**實施與自動化測試的持續集成,以儘早發現問題並保持程式碼品質。 - **文件:**記錄所有更改,包括程式碼中的註釋、更新日誌和全面的提交訊息。 [揭秘高級 Git 指令:簡單指南](https://dev.to/amit_k_812b560fb293c72152/demystifying-advanced-git-commands-a-simple-guide-1lpj) --- ### SVN 與 Git 比較 #### SVN(顛覆) - **集中版本控制:** SVN依賴中央伺服器來儲存專案文件的所有版本。 - **提交結構:**更改直接提交到中央儲存庫。 - **分支:**分支通常在伺服器上建立,分支操作可能很慢並且佔用資源。 - **合併:**與 Git 相比,合併可能更複雜且效率更低。 #### git - **分散式版本控制:** Git 允許每個開發人員擁有整個專案歷史記錄的本機副本。 - **提交結構:**更改首先在本地提交,然後可以推送到遠端儲存庫。 - **分支:**分支輕量且快速,鼓勵使用功能分支。 - **合併:** Git 的合併功能更先進,可以更輕鬆地整合來自不同分支的變更。 --- 我希望本指南對您有所幫助,就像自從 Git 成為我的日常夥伴以來它對我的幫助一樣。快樂編碼! --- --- 原文出處:https://dev.to/ak_23/branching-strategy-guide-24d6

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

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

使用 NextJS 建立電子商務商店

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

系統設計面試的資料庫分片

*揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* [![資料庫分片的類型](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42ob2tziqrlt820gdsy7.jpg)](https://bit.ly/3pMiO8g) image\_credit -[設計大師](https://bit.ly/3pMiO8g) 朋友們大家好,在這個資料驅動的世界中,有效處理大量資料的能力對於企業和組織來說至關重要。 傳統的整體資料庫往往難以跟上現代應用程式和服務的需求,並成為效能瓶頸。 這就是**資料庫分片發揮**作用的地方,它為**水平擴展資料提供了強大的解決方案。** 如果你不知道什麼是Sharding?分片是一種資料庫架構技術,它將大型資料庫劃分為更小、更易於管理的部分,稱為“分片”,分佈在多個伺服器上。 每個分片都包含資料的子集,它們一起形成完整的資料集。這種方法透過分配工作負載、減少延遲和啟用並行處理來增強效能和可擴展性。 分片對於處理大規模應用程式和高流量系統特別有用,確保沒有單一伺服器成為瓶頸,並提高資料庫系統的整體效率和可靠性。 過去,我討論過常見的系統設計問題,例如[API 網關與負載平衡器](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)、[水平與垂直擴展](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5),在這份全面的**資料庫分片指南**中,您將了解資料庫分片,探索其概念、優點、實施策略和實際用例。 分片也是系統設計面試的重要議題,因為 因為它展示了對如何處理大規模資料並提高系統效能和可擴展性的理解,這是開發人員的關鍵技能和經驗。 在這些面試中,通常會評估候選人設計能夠有效管理高流量和大量資料的系統的能力。分片展示了分散式系統、資料庫管理的知識以及解決潛在瓶頸和故障點的能力。 它反映了候選人設計彈性、高效能和可擴展架構的能力,這是在現實場景中建立強大且高效的軟體系統的關鍵技能。 順便說一句,如果您正在準備系統設計面試並想深入學習系統設計,那麼您還可以查看[**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)等網站,這些網站有許多很棒的系統設計課程,這裡有一個很好的系統設計 Exponent 的面試備忘單,以快速修改面試的基本系統設計概念。 [![軟體設計面試備忘錄](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3i7ytpm4lzhad3dclk5.png)](https://bit.ly/3cNF0vw) ***PS 繼續閱讀直到最後。我有一份獎金給你。*** 用於系統設計的資料庫分片 ------------ 現在,我們來了解一下什麼是資料庫分片?為什麼需要它以及它如何幫助擴展您的應用程式。我們還看到不同類型的資料庫分片,例如基於哈希和基於範圍的分片。 目錄 1. 介紹 2. 什麼是資料庫分片? 3. 為什麼要分片?對可擴展性的需求 4. 資料庫分片如何運作? 5. 分片策略 6. 挑戰和考慮因素 7. 現實世界的用例 8. 實施資料庫分片 9. 最佳實踐 10. 結論 一、簡介 ---- 在當今資料驅動的世界中,企業和組織被大量資訊淹沒。有效管理和處理這些資料是傳統整體資料庫難以應對的挑戰。 隨著用戶群的成長、應用程式工作負載的增加以及對即時分析的需求的飆升,對可擴展資料庫解決方案的需求變得至關重要。 > 這就是資料庫分片作為實現水平可擴展性的強大工具的作用。 [![資料庫分片概述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gx9climi3dpc0fpgie24.png)](https://bit.ly/3Mnh6UR) --- 2.什麼是資料庫分片? ----------- **資料庫分片是一種資料庫架構策略,用於跨多個資料庫執行個體或伺服器分割和分佈資料。**術語“分片”是指整個資料集的分區或子集。 每個分片獨立運作並包含一部分資料。透過將資料分佈在多個分片上,系統可以實現水平可擴展性,從而能夠處理更大的資料量和更高的工作負載。 分片對於資料集快速成長或高吞吐量要求的應用程式尤其有利,例如社交媒體平台、電子商務網站和遊戲應用程式。 它使這些應用程式能夠跨多個伺服器或叢集分配資料庫負載,從而防止任何單一資料庫伺服器成為瓶頸。 這是一個**簡單的圖表,將資料庫分片解釋為水平擴展:** [![什麼是資料庫分片](https://miro.medium.com/v2/resize:fit:609/1*Dmb3LCxTWjyGj_uYjEGnHA.png)](https://bit.ly/3P3eqMN) --- 3. 為什麼要進行資料庫分片?對可擴展性的需求 ----------------------- 現在,讓我們看看為什麼需要資料庫分片 ### 3.1.單體資料庫中的可擴展性挑戰 傳統的整體資料庫在可擴展性方面有其限制。在整體架構中,所有資料都儲存在單一資料庫執行個體中。 隨著資料量和使用者負載的增加,單體資料庫可能面臨幾個挑戰: - **效能瓶頸:**單一資料庫伺服器可能成為效能瓶頸,導致查詢回應時間緩慢且應用程式停機。 - **儲存有限:**單一伺服器的儲存容量有限,難以處理超大資料集。 - **垂直擴展成本**:透過升級硬體進行垂直擴展可能成本高昂,而且回報遞減。 - **複雜性:**管理大型整體資料庫可能很複雜且容易出錯,需要大量維護和最佳化。 ### 3.2.解決方案:透過分片實現水平可擴展性 資料庫分片透過將資料分佈在多個分片上(每個分片駐留在單獨的資料庫伺服器或叢集上)來解決這些可擴展性挑戰。這種方法有幾個優點: - **提高效能:**分片將資料庫負載均勻分佈在多個伺服器上,從而提高查詢效能和回應能力。 - **無限的可擴展性:**隨著資料的成長,可以加入新的分片,從而實現近乎無限的可擴展性。 - **成本效益:**與不斷升級單一伺服器相比,分片是一種經濟高效的解決方案。 - **高可用性**:分片可以提高容錯性和可用性,因為一個分片的故障不會影響整個系統。 這是資料庫的水平分片和垂直分片的樣子 [![如何使用分片擴充資料庫](https://miro.medium.com/v2/resize:fit:609/1*0j0DLUHN8EeykY-XxVSzJA.png)](https://medium.com/javarevisited/top-3-system-design-cheat-sheets-templates-and-roadmap-for-software-engineering-interviews-53012952db28) --- ### 4. 資料庫分片如何運作? 資料庫分片背後的核心思想是將資料分成更小的、可管理的部分,稱為分片。每個分片都是一個獨立的資料庫子集,用於儲存整個資料集的一部分。 分片可以分佈在多個資料庫伺服器或叢集\*\*,從而實現並行處理並提高效能。 以下是資料庫分片工作原理的進階概述: ![資料庫分片如何運作?](https://miro.medium.com/v2/resize:fit:609/1*1FCBTWUliqTM-VYNcd_YHA.png) 您可以看到資料庫分片提供了一種邏輯方法來將資料等級分割到多個伺服器和叢集上。 ### 4.1.資料分割區 分片的第一步是決定如何對資料進行分區。有幾種常見的分區策略,我們將在下一節中詳細探討。 分區策略的選擇取決於應用程式的要求和資料分佈。 ![資料分割區](https://miro.medium.com/v2/resize:fit:375/1*jsHUuhNxK-goazpSQUfAMg.png) ### 4.2.片鍵 **分片鍵**是用來決定特定資料屬於哪個分片的欄位或屬性。選擇合適的分片鍵至關重要,該鍵可以在分片之間均勻分佈資料,以防止熱點(分片接收的流量明顯多於其他分片)。 ### 4.3.資料分佈 一旦對資料進行了分區並選擇了分片鍵,資料就會分佈在可用的分片中。分發過程可以自動化,通常涉及分片機製或服務,根據分片鍵將資料路由到正確的分片。 ### 4.4.查詢路由 當對資料庫進行查詢或請求時,查詢路由器或協調器會根據分片鍵決定要查詢的分片。涉及多個分片的查詢可能需要結果的協調和聚合。 ### 4.5.聚合 在某些情況下,可能需要聚合多個分片的查詢結果才能產生最終結果。這種聚合可以發生在應用程式層級或透過專用聚合層。 ### 4.6.資料一致性 確保分片之間的資料一致性是分片的關鍵方面。兩階段提交或最終一致性等技術用於維護資料完整性。 [![資料庫分片完整指南](https://miro.medium.com/v2/resize:fit:497/1*ZVrIULaZsBFrzfEeoO63IQ.png)](https://www.java67.com/2019/09/top-5-courses-to-learn-system-design.html) --- 5. 分片策略 ------- 選擇正確的分片策略對於分片資料庫系統的成功至關重要。選擇取決於資料的性質、存取模式和可擴展性要求。以下是一些常見的分片策略: ### 5.1.基於範圍的分片 基於範圍的分片涉及根據分片鍵中特定值範圍對資料進行分區。例如,如果您要對客戶資料進行分片,則可以使用基於範圍的策略,其中每個分片包含姓氏以特定字母開頭或屬於特定範圍的客戶。 當資料分佈不均勻且您希望將相關資料保留在一個分片中時,基於範圍的分片非常有用。 以下是[DesignGuru.io](https://bit.ly/3pMiO8g)基於範圍的分片範例: [![基於範圍的資料庫分片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j4ttcmk6e1oifbd4sr6.png)](https://bit.ly/3pMiO8g) --- ### 5.2.基於哈希的分片 基於雜湊的分片使用雜湊函數將分片鍵映射到特定分片。這種方法在分片之間均勻分佈資料,有助於避免熱點。 當資料存取模式不可預測或您想要確保資料均勻分佈時,基於雜湊的分片特別有效。 以下是[DesignGuru.io](https://bit.ly/3pMiO8g)在資料庫上基於哈希的分片範例: [![基於哈希的分片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hoks5uj5825fjwo9zd6m.png)](https://bit.ly/3pMiO8g) --- ### 5.3.基於目錄的分片 基於目錄的分片維護一個中央目錄,將分片鍵對應到對應的分片。此目錄有助於將查詢有效地路由到適當的分片。但是,它可能會引入單點故障。 基於目錄的分片適用於需要對分片分配保持高度控制的場景。 這是[DesignGuru.io](https://bit.ly/3pMiO8g)的基於目錄的分片範例 [![基於目錄的分片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8691g3i2seemih5in0p.png)](https://bit.ly/3pMiO8g) --- ### 5.4.地理分片 在處理基於位置的資料(例如使用者位置)時,地理分片是相關的。資料根據與分片鍵關聯的地理區域進行分區。 此策略對於具有地理分佈的使用者或資料的應用程式很有價值。 正如他們所說,一張圖片勝過 1000 個單詞,這是來自[**Architecture Notes**](https://architecturenotes.co/database-sharding-explained/)的漂亮圖表,它解釋了不同類型的資料庫分片 ![資料庫分片策略](https://miro.medium.com/v2/resize:fit:609/1*_X8CwmkPPT1JLyiwSN6ZlQ.jpeg) 信用 --- <https://architecturenotes.co/database-sharding-explained/> --- 6. 挑戰和考慮 -------- 雖然資料庫分片提供了顯著的好處,但它也帶來了一系列挑戰和考慮因素: 6.1.資料遷移 在分片之間遷移資料可能非常複雜且耗時。正確的規劃和工具對於確保遷移過程順利進行至關重要。 6.2.備份與復原 管理備份並確保跨多個分片的資料復原需要仔細的規劃和強大的備份解決方案。 6.3.查詢複雜度 涉及來自多個分片的資料的查詢的實施和最佳化可能很複雜。應用程式程式碼可能需要處理查詢路由和結果聚合。 6.4.資料一致性 在分片環境中維護資料一致性可能具有挑戰性。開發人員需要考慮分散式事務、衝突解決和最終一致性等因素。 6.5.監控和擴展 有效的監控和擴展策略對於確保分片資料庫的健康和效能至關重要。辨識效能瓶頸並根據需要加入新分片至關重要。 ![資料庫分片的挑戰與注意事項](https://miro.medium.com/v2/resize:fit:609/1*GXRq3DgwsPpvG72EDUkX2Q.png) --- 7. 資料庫分片的實際用例 ------------- 資料庫分片適用於可擴展性和效能至關重要的各種現實場景。讓我們探討一些值得注意的例子: 7.1.社群媒體平台 Facebook、Twitter 和 Instagram 等社群媒體平台處理大量用戶生成的內容,包括貼文、圖像和影片。分片使這些平台能夠有效地分發和管理用戶資料。 7.2.電子商務網站 電子商務網站面臨著劇烈的流量波動,尤其是在促銷活動期間。分片幫助他們處理增加的負載並提供無縫的購物體驗。 7.3.遊戲應用 線上遊戲應用程式通常需要即時互動和低延遲回應時間。分片可確保遊戲資料的分佈以獲得最佳效能。 7.4.金融服務 金融機構每天處理大量的交易資料。分片允許他們擴展資料庫以處理負載,同時保持資料完整性。 ![MongoDB 中的資料庫分片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5rwxxozvp46xalmhu8r.png) --- 8. 如何實現資料庫分片? ------------- 實施資料庫分片需要仔細的規劃和執行。以下是涉及的步驟: 8.1.評估與規劃 首先評估應用程式的可擴展性要求和資料分佈模式。選擇合適的分片策略和分片鍵。 8.2.資料庫設計 設計資料庫架構以適應分片。定義資料如何跨分片分區和分佈。 8.3.分片實施 實施分片機製或使用適合您選擇的策略的分片資料庫系統。跨分片分佈現有資料。 8.4.查詢路由 發展一種查詢路由機制,根據分片鍵將查詢定向到適當的分片。如有必要,處理查詢聚合。 8.5。資料一致性 實施資料一致性機制,例如分散式交易或最終一致性,以維護資料完整性。 8.6。測試與優化 徹底測試分片資料庫系統,優化查詢並監控效能。根據需要擴展系統。 讓我告訴你一個秘密,分片還可以讓你的資料庫更快: ![分片如何使資料庫更快](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4xuebb3yiyfkg4bebaz.png) --- ### 9. 資料庫分片最佳實踐 若要充分利用資料庫分片,請考慮遵循以下最佳實務: - **選出正確的分片鍵:** 選擇能夠均勻分佈資料並避免熱點的分片鍵。 - **監控和規模**: 持續監控分片資料庫的運作狀況和效能。隨著資料的成長加入新的分片。 - **備份和災難復原:** 實施強大的備份和復原程序來保護您的資料。 - **資料遷移:** 仔細規劃資料遷移並使用高效率的工具和流程。 - **查詢最佳化:** 優化分片環境中的查詢效能。 - **資料一致性:** 了解並實施適合您的應用程式的資料一致性模型。 而且,如果您需要備忘單,這裡有[**ByteByteGo**](https://bit.ly/3P3eqMN)提供的一份不錯的資料庫分片備忘單,可幫助您快速修改關鍵分片概念 [![資料庫分片備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgf23bifr1mvth1hol9j.jpg)](https://bit.ly/3P3eqMN) --- ### 系統設計訪談資源: 而且,這裡列出了最佳系統設計書籍、線上課程和練習網站,您可以查看這些內容,以便更好地為系統設計面試做好準備。這些課程中的大多數也回答了我在這裡分享的問題。 1. [**DesignGuru 的 Grokking 系統設計課程**](https://bit.ly/3pMiO8g):一個互動式學習平台,提供實作練習和真實場景,以增強您的系統設計技能。 2. [**《系統設計面試》作者:Alex Xu**](https://amzn.to/3nU2Mbp) :這本書深入探討了系統設計概念、策略和麵試準備技巧。 3. Martin Kleppmann 的[**「設計資料密集型應用程式」**](https://amzn.to/3nXKaas) :綜合指南,涵蓋了設計可擴展且可靠的系統的原則和實踐。 4. [LeetCode 系統設計 標籤](https://leetcode.com/explore/learn/card/system-design):LeetCode 是一個受歡迎的技術面試準備平台。 LeetCode 上的系統設計標籤包含各種練習問題。 5. GitHub 上的[**「系統設計入門」**](https://bit.ly/3bSaBfC) :精選的資源列表,包括文章、書籍和影片,可幫助您準備系統設計面試。 6. [**Educative 的系統設計課程**](https://bit.ly/3Mnh6UR):一個互動式學習平台,提供實作練習和真實場景,以增強您的系統設計技能。 7. **高可擴展性部落格**:該部落格包含有關高流量網站和可擴展系統架構的文章和案例研究。 8. **[YouTube 頻道](https://medium.com/javarevisited/top-8-youtube-channels-for-system-design-interview-preparation-970d103ea18d)**:請參閱「Gaurav Sen」和「Tech Dummies」等頻道,以取得有關係統設計概念和麵試準備的富有洞察力的影片。 9. [**ByteByteGo**](https://bit.ly/3P3eqMN) :Alex Xu 的一本現場書籍和課程,用於系統設計面試準備。它包含《系統設計訪談》第一捲和第二卷的所有內容,並將隨即將推出的第三卷進行更新。 10. [**Exponent**](https://bit.ly/3cNF0vw) :一個專為面試準備的網站,特別是針對亞馬遜和谷歌等 FAANG 公司,他們還有很棒的系統設計課程和許多其他材料,可以幫助您破解 FAAN 面試。 [![如何為系統設計做準備](https://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%2Fkqv3p46jmw5qc0newuiu.jpg)](https://bit.ly/3P3eqMN) image\_credit - [ByteByteGo](https://bit.ly/3P3eqMN) 請記住透過參與實際專案和參加模擬面試將理論知識與實際應用結合。不斷的練習和學習無疑會提高你在系統設計面試中的熟練程度。 --- ### 10. 結論 這就是關於**資料庫分片及其工作原理的**全部內容。資料庫分片是實現水平可擴展性以及處理大量資料和高工作負載的強大策略。 透過跨多個分片分佈資料,組織可以提高效能、確保高可用性並滿足現代應用程式的需求。 然而,**分片並不是萬能的解決方案**,並且有其自身的一系列挑戰和考慮因素。正確的規劃、仔細的實施和遵守最佳實踐是成功分片的關鍵。 隨著資料量和複雜性不斷增長,掌握資料庫分片技術對於企業和開發人員來說變得越來越重要。 獎金 --- 正如承諾的,這是給你的獎金,一本免費的書。我剛剛找到一本新的免費書籍來學習分散式系統設計,您也可以在 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://miro.medium.com/v2/resize:fit:317/0*ICrIesz1fT-KtmUZ.png) --- 原文出處:https://dev.to/somadevtoo/database-sharding-for-system-design-interview-1k6b

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

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

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

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

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

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

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

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

資深工程師程式碼審查指南

程式碼審查。 ----- 你知道它們有多重要。 它們是獲得可靠程式碼的支柱之一。 然而,這是您在超級忙碌的日子裡需要**擠出**時間做的事情之一。 如果您不審查程式碼,那麼您可能會向用戶發送地雷,因為您永遠不知道它什麼時候會爆炸。 🤷 顯然,你知道這一點。你來這裡不是為了被告知「嘿!你應該進行程式碼審查!這是一件至關重要的事情! 我的團隊已經做了評論。我為什麼要在乎? ------------------- 如果不小心和勤勉地處理程式碼審查流程,可能會產生嚴重後果。 在我之前的一個組織中,程式碼審查通常沒有徹底完成,因此需要多次審查。它們也是由地球兩端的審查者完成的! 🌏 因此,處理任何評論幾乎花了一整天的時間。再說一次,因為評論通常不全面,所以 PR 的返工時間可能會因為一些瑣碎的事情而花費幾天的時間。 ![團隊週期時間分解](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvws8nxa2kjdvx6034n1.png) “如果不衡量,就無法改進” *通常被認為是彼得·德魯克(Peter Drucker)的作品,但我還沒有找到真正的證據。* 但我發現這句話對我的經驗來說意義深遠。 我過去曾向我的領導階層提出必要的組織變革,使所有團隊能夠減少跨時區的相互依賴,從而使人們能夠更快地協作。 我知道這樣做有多麼困難,但如果沒有可靠的資料支持理由來解釋為什麼需要改變,就更難實現任何改變。 *PS:這就是 Dhruv 和我創辦[Middleware 的](https://www.middlewarehq.com/)部分原因。 🚀* {% 嵌入 https://github.com/middlewarehq/middleware %} 好的,我聽到了。我有什麼選擇? --------------- 您理想的情況是進行徹底的程式碼審查,也就是說,明顯的危險訊號、效能或安全缺陷或其他難以閱讀的程式碼不應被忽視。 但您也希望所有這一切都在合理的時間內發生。 在合理的時間內合併經過嚴格審查的程式碼,這意味著您的團隊的交付可預測且具有高可靠性。 除非有一種經過充分研究、結構化的方法來掌握這一點。 🤔 …… 您聽過…DORA 指標嗎? 好吧,這不是另一部《DORA GOOD!文章。 這些是我過去專注於四鍵(正如出色的[Nathen Harvey](https://www.linkedin.com/in/nathen/)所[解釋的](https://dora.dev/guides/dora-metrics-four-keys/))如何幫助我改善我自己和我的團隊的程式碼交付體驗的經驗。 ![朵拉指標](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b49lb17w68bs5fojske7.png) *在中介軟體開源中看到的 DORA 指標* 使用 DORA 探索程式碼審查 --------------- ### 評論會延長交貨時間多久 審核週期長直接影響變更的前置時間。 交貨時間基本上由 5 個部分組成。 1. 從第一次提交到 PR 開放的時間 2. 然後 PR 收到第一次審核(可能是評論、更改、批准) 3. 更改 PR 直至最終獲得批准所花費的時間 4. 批准和 PR 合併之間的時間 5. PR最終部署的時間 當然,任何需要花費時間的部分都會增加您團隊的時間。但有兩個部分是造成延誤的特別嚴重的因素。這是#2 和#3。 **\#2. PR 收到第一次審核的時間(首次回應時間)** PR 公開後,開發人員實際上無法對其做太多事情。公關可能完全可以順利進行!它可能需要切實的改變。在這一點上,只有評論才能告訴我們答案。這也是開發人員可能無法承擔更多任務的時候,因為從技術上講,審查可能隨時發生,並且他們會遭受上下文切換的困擾。 **上下文切換是開發人員最大的生產力殺手之一。** ### 對「每次審核時間」的誤導性關注 這討論了提前期指標的第三個子部分。 **#3。更改 PR 所花費的時間(返工時間)** 這裡真正的問題不在於在這裡花了多少時間,而是來回發生了多少次。我們稱之為「返工週期」。 因為如果因為PR被批准而只有1個返工週期,那麼在批准之前可能仍然需要很長時間,但這是實際的實施時間,而不是空閒時間。可以透過更好的培訓、程式碼庫入門、上下文共享等來減輕這種返工。 但是…如果您要來回很多次,那麼每個週期都有一些與之相關的空閒時間,就像第一次回應時間一樣。 在此期間,開發人員無法接受新的工作,因為這將不可避免地導致快速的上下文切換。 這種情況很可能發生在PR太大而無法一次審完,或是審查者因為其他原因沒有審透徹底的情況下。當作者和審稿人位於相距甚遠的時區時,情況尤其嚴重。由於每次審核和返工都可能發生在各自時區的工作時間內,因此返工更改之前的時間可能會被誇大到很多小時。 **這就是滾雪球效應** 像這樣被屏蔽的 PR 越多,團隊交付的速度就越慢。通常新工作不會停止出現,這使得開發人員準確管理和評估他們的工作變得更具挑戰性。 如果這種情況持續發生,也會對團隊士氣造成打擊。 **博士** 僅僅專注於減少「每次審查的時間」可能會適得其反。 目標應該是在不犧牲徹底性的情況下優化審核流程,確保每次審核都能增加真正的價值。 ### 低於標準的審查和變更失敗率 團隊始終在壓力和緊迫的期限下運作。期望這種情況會神奇地改變是不合理的。但認為不會偷工減料以確保貨物不能按時發貨也是不切實際的。 由於我們談論的是程式碼審查,因此經常被削減的角落之一是: 1. 建立的大型 PR 包含某個功能的所有程式碼,而不是包含良好的較小且更易於審查的 PR。 2. PR 的審核只需略讀即可,因為審核者目前可能沒有足夠的心理能力或時間來正確處理它。 這兩件事時常發生。開發人員也是人。你不能僅僅把責任歸咎於他們或強迫他們「正確地」複習來解決這個問題。 最重要的是你首先要知道它正在發生。因為這樣你就可以做點什麼。你問,你怎麼知道這件事? 1. 您的交貨時間應該會縮短。因為審核速度更快(通常比應有的速度快) 2. 您的變更失敗率可能會上升。當然,如果評論低於標準,您可能會帶來更多錯誤。 ``` 1. But, even if your CFR isn’t going noticeably down, your team might still be shipping low performance or quality code that would bite you back later, and will likely show up as higher Lead Time down the line. But by then it’ll be too difficult to correlate with the reviews of today. ``` **現在是時候提一下《朵拉》是一位很棒的嚮導,但它並不完美。** 不要將其視為明確的規則手冊。不要用它來衡量個人。 為您的團隊全面使用它,但也要參與其中,以確保它真正幫助您的團隊。畢竟這就是目標,不是嗎? 偉大的!如何? 👉 更快、更有效的審核策略 --------------------- ### 這是一個快速**預審清單** 1. 測試:確保所有相關測試都已編寫並通過✅。 ``` 1. This can be done by a CI bot (or Github Actions) ``` 2. 文件:更新相關文件,包括內嵌註解和自述文件。 3. 清晰的提交訊息:編寫描述性提交訊息,解釋更改背後的「原因」。 ``` 2. This could also be enforced via [commit-lint](https://commitlint.js.org/) ``` ``` 3. You could also use [aicommit](https://github.com/Nutlope/aicommits) to help write good and detailed commit messages! ``` ``` 4. My team often uses GH Copilot to create commit messages that actually end up being totally satisfactory to me! ``` 提交訊息範例: ``` feat: add user authentication - Implemented OAuth2 for secure login - Added unit tests for authentication flows - Updated API documentation with new endpoints ``` ### 正確的審稿人,正確的時間 將審閱者與其專業知識和當前工作量相匹配,以避免超負荷。複雜的變更交給高階開發人員,簡單的變更交給同業。 但您還需要了解開發人員對特定程式碼庫有多少上下文。 這裡有一些挑戰: - 如果您的開發人員在單一特定儲存庫中高度專業化,那麼由於需要時間來加入和共享上下文,因此在單獨的程式碼庫上使用他們的技能將非常困難。 - 如果您的開發人員對所有程式碼庫過於籠統,那麼由於缺乏特定程式碼庫的深層上下文,他們可能很難更快地解決某些問題。 - 如果團隊中的一位開發人員對事物有很多背景知識,那麼很容易讓他們負擔過重。您需要儘早騰出時間來分發上下文,這樣您的工作就不會在最關鍵的時候受到阻礙。 您希望確保將兩者結合起來,並且只需與您合作的 2-3 名開發人員即可實現這一目標。 ![視覺化團隊中的瓶頸](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/va7uc3ajyb17kiamhq0h.png) *了解誰被阻止對誰進行程式碼審查至關重要。您不希望您的團隊因為有人需要休假而根本無法交付。* ### 貿易工具 使用靜態分析、程式碼檢查和自動檢查在人工審查之前捕獲簡單的問題。這讓審閱者可以專注於更複雜的回饋。 範例工具: - [ESLint](https://eslint.org/) :JavaScript linting。 - [Husky](https://typicode.github.io/husky/) :用於執行預提交檢查和靜態分析。 - CI/CD 管道:自動化測試和建置流程。 **超重要提示:** 爭論空格和製表符、分號與否、尾隨換行符很容易浪費大量時間。 但這一切並不重要。 決定並同意團隊最終確定的任何程式碼風格,並將它們作為 linter 規則的一部分強制執行。 這些東西不值得你花時間。 👍 ### 回饋的藝術 給予可操作的、具體的評論,重點是改進,而不是吹毛求疵。避免模糊的陳述並提供明確的指導。 分享如何將一個文件重組為多個文件,以及為什麼這樣做是個好主意。 分享為什麼在循環中多次呼叫資料庫可能是一個壞主意,因為我確信我不需要在這裡解釋。 😆 如果挑剔的問題主要是可以由 linter 處理的事情,那麼就使用其中之一。 人們討厭那些大多只有蝨子的評論。但同樣,糟糕的變數名稱、拼字錯誤等不能只是去生產! 😁 例子: ``` # Ineffective comment "Fix this." # Effective comment "Consider using a map here to improve lookup efficiency. This will reduce the time complexity from O(n) to O(1)." ``` 使用中介軟體簡化流程 ---------- ### 中介軟體如何提供協助 我能夠具體了解我的團隊在哪裡陷入困境、原因以及如何解除困境。 這就是我工作的一半,現在我能夠比以前更快地完成這些工作! ![團隊流程概述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl0k380fegaussrrckyd.png) ### 我重點關注以下幾點: - 審核指標:追蹤審核所需的時間並確定發生延遲的位置。 - 流程洞察:了解整個審核流程並找到需要最佳化的領域。 我不會對此進行太多討論,因為那樣聽起來就像是推銷! 😂 超越技術細節:人的因素 ----------- ### 培養建設性回饋文化 倡導一種將回饋視為成長機會的文化。建設性的、相互尊重的溝通有助於提高程式碼品質和團隊士氣💬。 ### 平衡速度與徹底性 平衡速度與徹底性。快速審查不應影響審查,徹底審查不應拖延。 ### 心理安全 確保審稿人和作者的心理安全。鼓勵公開討論不加指責地解決錯誤,營造持續改進的環境🌱。 請記住,當您分享改進回饋時,人們常常會保持警惕。考慮周到,思路清晰。 結論 -- 有效的程式碼審查對於保持程式碼品質和交付速度至關重要。透過與 DORA 指標保持一致、使用正確的工具並培養建設性的回饋文化,團隊可以簡化其審核流程。採用這些實踐可以使您的程式碼審查既高效又具有影響力。 *嘗試使用[中間件](https://www.middlewarehq.com/)來更深入地了解您的程式碼審查流程並確定需要進一步改進的領域。 🚀* 同樣,這些只是指導方針以及我們如何看待程式碼審查。請分享您的組織中如何進行程式碼審查! 程式碼審查對於整體產品可靠性起著至關重要的作用。有些情況下,糟糕的程式碼審查(不是糟糕的程式碼!)會造成負面的品牌影響。總而言之,更好的程式碼審查流程有助於降低故障率。 像[DORA](https://github.com/middlewarehq/middleware)這樣的框架被設計為輕量級的,可以幫助工程團隊提高工作效率,而無需工程師甚至領導者付出太多的努力。 Middleware 的使命是幫助工程團隊交付高效率的程式碼。請查看我們的[開源中間件](https://github.com/middlewarehq/middleware),我們的開源 DORA 指標解決方案,它是本地託管的。如果您喜歡,請考慮給我們一顆星! --- 原文出處:https://dev.to/middleware/the-senior-engineers-guide-to-the-code-reviews-1p3b

不是💩,這裡是如何編寫真正好的提交訊息(提示:這不僅僅是加入 commit-lint)

- **更新建置文件** - **修復依賴陣列** - **重構** - **修復測試** - *最有名的:***更新README.md** (感謝Github🤦) 這些是......我在上個月實際看到的一些令人驚嘆的提交訊息。 👀 而且......其中一些也存在於我們的程式碼庫中。 有點尷尬。我知道。 😅 但這是不行的🙅,理想情況下我想讓世界擺脫這些。 > ### “當然,無論如何。即使讀完這篇博客,我也不認為任何事情都會改變。” 為了改變一切,我需要讓你**相信**: - 這帶來了您可以感覺到或測量到的真正差異 - 這對其他人產生影響(稍後可能會歸因於您) > ### “好吧,繼續吧。我該怎麼做,我能從中得到什麼?” 寫得好的提交訊息有一些明顯的好處: ### **1. 🧑‍💻更容易除錯** `git blame`使我們非常容易理解為什麼要引入更改,並且可以更輕鬆地向作者詢問相關問題。 **`git blame`**並不是除錯過程中使用的第一個工具,但對於與業務邏輯相關的**複雜問題**,它是一個特別在大中型公司中**發揮作用的工具**。有些程式碼只是引發了這樣一個問題:“為什麼要這樣寫?”或「這最初是為了解決什麼目的?」。有些問題的答案不在於工程,而在於產品決策。寫這篇文章的作者最有可能知道其中涉及哪些決定。 ![無上下文偵錯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3q6uby1ilrqoiixsds5.png) 當然,即使不需要花俏的訊息`git blame`也會告訴你提交的作者。那為什麼是這篇文章的這一部分呢? 因為身為作者,您多久會記得**您 6 個月前寫的投稿正在做什麼**?特別是當它有像“重構”這樣的提交訊息時?**運氣不好吧?** 我見過更有經驗的開發人員編寫了非常有用的提交訊息。我認為他們中的一些人做得有點過頭了,但這裡有一個粗略的例子: ``` Fix crash on login screen due to null pointer exception. - Checks for null values before accessing user profile data - Adds unit test to cover this scenario - Issue linked: BUG-5678 ``` 也許有點太多了,但如果不是很明顯的自動對焦就太糟糕了。 現在,當我需要除錯該領域的問題時,能夠為作者和上下文`git blame`可能是我的救星。 *我這麼說是充滿信心的,因為我曾經在 Uber 既是給予者,也是接受者。* **這有一個嚴重的額外好處,當您閱讀此部落格時,您可能會高估這一好處:** - 為您和您的團隊節省時間,減少挫折感 **在沒有上下文的情況下進行除錯是痛苦的。**甚至不是那種你可以說「殺不死你的,會讓你更強大」的情況。因為它只會讓你感到沮喪。 你知道的。你的團隊知道這一點。這就是為什麼你試圖了解是誰引入了「那個錯誤」並與他們交談,卻發現他們兩年前離開了公司。祝你好運。 🤝 這樣,您就留下了一份遺產,**讓人們深情地記住您,**並希望他們能再次與您合作。 > **“如果我使用合併或壓縮提交怎麼辦?”** > *有些人對他們有強烈的支持或反對意見。* > *我要說的是,合併提交有助於在一定程度上包含提交中包含的 PR 上下文,但如果寫得不好,單一提交本身可能沒有太多與之關聯的上下文。* > *而且由於 PR 可能涉及各種不同的更改,這些更改一起工作以發布功能,並且構成更改可能有自己的上下文以這種方式編寫,因此壓制它們可能會有效地混淆所有上下文,從而很難從提交歷史記錄。* > ***但無論哪種方式都可以寫出功能完善的軟體。**只要你和你的團隊都同意你的合併 PR 的方式對你來說是可行的,並且問題最少,我是誰,我會干涉嗎?* ### **2. 🔍 更輕鬆的程式碼審查** 如果您的組織不太關心讓程式碼審查變得輕鬆,也不讓它感覺像是一件苦差事,**那麼您需要與您的員工分享這一點**: {% 嵌入 https://dev.to/middleware/the-senior-engineers-guide-to-the-code-reviews-1p3b %} 現在,更好的提交訊息如何幫助程式碼審查? 根據[Middleware 的](https://github.com/middlewarehq/middleware)分析資料,成熟程式碼庫(活躍的倉庫,經過其設定階段)中的平均 PR 可以**約為 300 行**。 有很多行。大多數這些更改都不會發生在同一個文件中。他們也不應該。 **300 行位於可讀文件的上限**(儘管這不是一成不變的規則)。 這幾乎可以保證這些 PR 中會提供不同類型的更改,這些更改需要組合在一起才能提供所需的功能。 如果您因任何原因無法建立較小的 PR,**則可以在同一 PR 中進行較小的提交**。使每個提交都包含最小的邏輯隔離更改,以便提交訊息可以充分解釋其包含的內容。因為您也不想編寫一段長的提交訊息,所以您需要建立一個足夠小的提交,大約 50-60 個字元可以解釋其內容。 現在,審閱者可以**透過提交來審查你的 PR 提交,**而不必跟進你的所有事情,或者想知道為什麼某些東西是這樣寫的(如果他們這樣做,他們將不得不問你\[作者\],你知道嗎? ![有意義的提交訊息](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhchgf489srffox2x8nd.png) ### **3. 🚀 更好的發行說明!** 或者,如果您沒有準確產生“發行說明”,那麼它仍然是專案歷史的**更好文件**! 具體來說,Github 還允許您**根據提交**自動**產生專案的發行說明**。很多人會查看發行說明來了解新版本包含哪些修復或功能。 請參閱[React 程式碼庫](https://github.com/facebook/react/releases)的發布部分,並查看每個發布說明有多少反應! ![反應發行說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbsdve9uyj84h3ajwevw.png) 明確**發布說明對人們很重要**。透過編寫良好的提交,您可以節省編寫發行說明的精力。 最後... ### **4. 👥 鼓勵整個團隊更好的實踐** ![使用路克的力量](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5y102iefuj5xzm2pdu2s.png) 當團隊成員看到編寫良好的提交訊息的好處時,他們很可能會效仿。這可以導致整個團隊採用更嚴格的程式碼提交方法,從而鼓勵清晰和精確的文化。這就是讓**SDE1 的思考和行為像 SDE2 一樣**的東西。 這是此類提交的另一個範例: ``` Update permissions routing layer to handle subroutes independently. - TKT-1234 - The permissions routing logic was previously coupled with its nested routes - This change will allow you to move subroutes to any other parent route without also having to make any changes to how the permissions for that subroute are defined ``` 在多人處理同一個專案的環境中,一致且詳細的提交訊息可以協調每個人的理解和期望,**減少潛在的衝突**和誤解,而不需要太多時間來阻止上下文共享。 當然,如果您能夠成為團隊或組織中更好的承諾訊息的擁護者,您會很樂意獲得由此帶來的任何好處,不是嗎? 👀 **能夠異步工作的團隊,才是能夠有效率地工作的團隊。**沒有人希望你的團隊在這樣的事情上遇到瓶頸。 👌 總結一下 ---- 好的提交訊息會帶來巨大的收益。 💪 為您和您所屬的團隊帶來收益。 更少的除錯時間、更少的挫折時刻、更好的文件、自動發行說明等。 作為所有這些改進的副作用,您甚至可能會注意到更快的程式碼交付、更少的審核等待時間、更少的返工週期! 繼續!您所帶來的所有效率改進都值得稱讚! *並且確切了解使用[中介軟體](https://github.com/middlewarehq/middleware)等生產力智慧工具為您的團隊帶來了多少收益!* 🚀 {% 嵌入 https://github.com/middlewarehq/middleware %} --- 原文出處:https://dev.to/middleware/not-heres-how-to-write-actually-good-commit-messages-hint-its-not-just-adding-commit-lint-j2i

Web 開發人員的頂級工具

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

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

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

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

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

GraphQL、REST 和 gRPC 之間的區別

*揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* [![GraphQL、REST 和 gRPC 之間的區別](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0rpasf3053dewpovmo4.png)](https://bit.ly/3pMiO8g) image\_credit -[設計大師](https://bit.ly/3pMiO8g) 開發者們大家好,如果您正在準備編碼面試以及系統設計和微服務面試,您還應該準備 REST、GraphQL 和 gRPC 等內容,例如**REST、GraphQL 和 gRPC 之間有什麼區別?** ,這也是程式設計面試的熱門議題之一。 之前,我討論了[API 網關與負載平衡器](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)、[水平與垂直擴展](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5)之間的區別以及[**JWT、OAuth 和 SAML 之間的區別**](https://medium.com/javarevisited/difference-between-jwt-oauth-and-saml-for-authentication-and-authorization-in-web-apps-75b412754127),在本文中,我將分享我對REST、 GraphQL 的想法,和 gRPC,這三種用於建立 Web API 的流行通訊協定。 它們用於允許不同的軟體元件透過網路相互通信,例如[微服務可以使用 REST 在它們之間進行同步通訊](https://medium.com/javarevisited/how-microservices-communicates-with-each-other-synchronous-vs-asynchronous-communication-pattern-31ca01027c53)。 這些協議都有自己的優點和缺點,了解它們之間的差異不僅從技術面試的角度很重要,而且對於為您的專案選擇正確的協議也很重要。 在本文中,您將了解**REST、GraphQL 和 gRPC 之間的差異**。您將了解每個協議背後的核心概念、它們的優點和缺點,並提供一些何時使用每個協議的用例。 讀完本文後,您應該更了解哪種協議最適合您的專案要求。 順便說一句,如果您正在準備系統設計面試並想深入學習系統設計,那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站,它們有許多很棒的系統設計課程 [![如何回答系統設計問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fehiytzxrwt4g89ubwfm.jpg)](https://bit.ly/3pMiO8g) 我們將首先進行一些介紹,然後深入研究它們中的每一個,然後再次回顧它們的差異,以便您清楚地了解它們的優點和缺點以及何時使用它們。 [REST](https://en.wikipedia.org/wiki/Representational_state_transfer)代表表述性狀態傳輸,它是一種流行的協議,用於建立透過 HTTP 公開資料和功能的 Web 服務。 它基於 HTTP 協定和一組約束,定義如何辨識和定址資源以及如何對這些資源執行操作。 另一方面, [**GraphQL**](https://graphql.org/)是 Facebook 開發的 API 查詢語言。它允許客戶端準確指定他們需要的資料,並且伺服器僅使用該資料進行回應。 GraphQL 的建立是為了解決 REST 的缺點和限制,因此它提供了一種更靈活、更有效的從伺服器獲取資料的方式,因為客戶端可以在單一請求中請求多個資源。 而且, [gRPC](https://grpc.io/)是一種用於建立 API 的高效能開源協定。它使用**Google 的 Protocol Buffers**作為資料格式,並提供對串流和雙向通訊的支援。 gRPC 由於其效能和對多種程式語言的支援而經常用於[微服務架構](https://javarevisited.substack.com/p/difference-between-microservices)中。 現在我們知道它們是什麼,讓我們深入研究它們。 --- 什麼是 REST?什麼時候使用它? -------------- 正如我所說,REST(表述性狀態傳輸)是一種用於設計分散式應用程式(尤其是基於 Web 的 API)的架構風格。 [RESTful API](https://javarevisited.blogspot.com/2018/02/top-5-restful-web-services-with-spring-courses-for-experienced-java-programmers.html)使用 HTTP 方法(例如 GET、POST、PUT、DELETE)對 URL(統一資源定位器)辨識的資源執行 CRUD(建立、讀取、更新、刪除)操作。 > > 如果您了解 HTTP,那麼您就了解 REST。 REST 還依賴**無狀態的客戶端-伺服器架構**,其中來自客戶端的每個請求都包含伺服器完成請求所需的所有訊息,而無需維護會話狀態。 以下是 REST 是不錯選擇的一些場景: 1. **當您需要透過 API 公開資料和服務時,**因為 REST 是一種流行且完善的協議,用於建立可供其他應用程式和服務輕鬆使用的 API。 2. **當您需要支援多種平台和程式語言時,**因為 REST 依賴標準 HTTP 方法和資料格式,因此它可以被多種程式語言和平台使用。 3. **當您需要支援快取時,**因為REST支援緩存,這可以提高效能並減少網路流量。 4. 當您需要建立簡單、輕量級的 API 時 5. 當您需要支援大量資源時 此外,了解 HTTP 方法對於設計 REST API 非常重要。您可以進一步查看[**REST API 設計、開發和管理**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Frest-api%2F)課程,以了解 REST API 設計、開發和管理。 [![何時使用 REST API](https://miro.medium.com/v2/resize:fit:609/1*X-VfQ3bf6WL-tcb9C8J7DA.png)](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Frest-api%2F) 總體而言, **REST 是一種靈活且廣泛採用的協議**,對於許多類型的 API 來說都是不錯的選擇。 然而,它可能不是所有場景的最佳選擇,特別是那些需要即時更新或更複雜的查詢和資料操作的場景。 在這些情況下,其他協定(例如 GraphQL 或 gRPC)可能更合適。 --- 什麼是 GraphQL?什麼時候使用它? -------------------- GraphQL 是一種 API 查詢語言,由 Facebook 於 2012 年開發,並於 2015 年作為開源專案發布。 GraphQL 允許客戶端定義他們所需的資料結構,並且伺服器可以準確地回應該資料,而無需任何不必要的資料。 它通常用作 RESTful API 的替代方案,特別是在客戶端需要對傳回的資料進行細微控制的情況下。 以下是 GraphQL 是不錯選擇的一些場景: 1. 當您想要減少網路流量時,GraphQL 允許客戶端準確指定他們需要的資料,這可以減少透過網路傳輸的不必要的資料量。 2. 當您需要支援各種客戶端時,因為 GraphQL 支援強類型查詢,這可用於確保客戶端以他們理解的格式接收正確的資料。 3. **當您需要支援即時更新時**,因為 GraphQL 支援透過訂閱進行即時更新,這允許客戶端在更新可用時立即接收更新。 4. 當您需要支援複雜的查詢和資料操作時:因為GraphQL允許客戶端使用簡單的語法執行複雜的查詢和資料操作操作,例如過濾、排序和聚合。 5. 當您需要支援版本控制時,因為 GraphQL 透過允許客戶端指定他們在請求中使用的架構版本來支援版本控制,這樣隨著架構隨時間的發展,可以更輕鬆地保持向後相容性。 總的來說,GraphQL 是一個強大且靈活的協議,對於資料細粒度控制和即時更新很重要的場景來說,它是一個不錯的選擇。 但是,**它可能比 RESTful API 需要更多的設定和配置,**特別是當您使用多種程式語言或平台時。 您可以進一步查看[**GraphQL by Example**](https://click.linksynergy.com/deeplink?id=CuIbQrBnhiw&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fgraphql-by-example%2F%3FcouponCode%3DLEADERSALE24A)和[GraphQL with React: The Complete Developers Guide](https://click.linksynergy.com/deeplink?id=CuIbQrBnhiw&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fgraphql-with-react-course%2F%3FcouponCode%3DLEADERSALE24A)以了解有關 GraphQL 及其使用方法的更多資訊。 這也是一個很好的圖表,突出顯示了**REST 和 GraphQL 查詢之間的差異:** [![何時使用 GraphQL](https://miro.medium.com/v2/resize:fit:609/0*7uX0fDc7ROg3OgjF.png)](https://click.linksynergy.com/deeplink?id=CuIbQrBnhiw&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fgraphql-by-example%2F%3FcouponCode%3DLEADERSALE24A) --- 什麼是 gRPC?什麼時候使用它? ----------------- 現在讓我們看看什麼是 gRPC 以及它提供什麼? gRPC 是 Google 開發的一個高效能、開源的遠端過程呼叫 (RPC) 框架。 它使用Protocol Buffers作為介面描述語言,支援多種程式語言,可以輕鬆建構跨不同平台和環境的分散式系統。 以下是 gRPC 是不錯選擇的一些場景: 1. **當您需要高效能和高效率時,**因為 gRPC 使用二進位協定並支援串流傳輸,這可以使其比其他協定更快、更有效率,特別是在高延遲或低頻寬連線上。 2. 當您需要支援多種程式語言時,因為 gRPC 支援多種程式語言,包括 Java、C++、Python 和 Go,可以輕鬆建立跨不同平台和環境的分散式系統。 3. 當您需要支援即時更新時,因為 gRPC 支援雙向流,這允許伺服器即時向客戶端發送更新。 4. **當您需要處理大量資料時,**因為 gRPC 使用 Protocol Buffers,它比 JSON 或 XML 等其他資料格式更有效率、更緊湊,使其成為處理大量資料的不錯選擇。 5. 當您需要建立微服務或分散式系統時,因為 gRPC 提供了一個強大且靈活的框架,用於建立可以水平擴展並處理大量流量的微服務和分散式系統。 總體而言,gRPC 是一個強大且高效的協議,對於效能、效率和即時更新很重要的場景來說,它是一個不錯的選擇。 但是,**與 RESTful API 等其他協定相比,它可能需要更多的設定和配置**,特別是當您使用多種程式語言或平台時。 您可以進一步查看[Protocol Buffers 3 完整指南 \[Java、Golang、Python\]](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fprotocol-buffers%2F)和[gRPC \[Java\] 大師班:建立現代 API 和微服務](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fgrpc-java%2F),以了解有關 gRPC 和 Google Protocol buffer 的更多資訊。 這是一個很好的圖表,突出顯示了 REST、gRPC 和 GraphQL 請求之間的區別 [![REST 和 GraphQL 之間的區別](https://miro.medium.com/v2/resize:fit:609/1*o4TgSCCvQgyE0OKsVSgQwg.png)](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fprotocol-buffers%2F) image\_credit --- [https://medium.com/@LadyNoBug/grpc-vs-rest-vs-others-5d8b6eaa61df](https://medium.com/@LadyNoBug/grpc-v-s-rest-v-s-others-5d8b6eaa61df) --- GraphQL、REST 和 gRPC 之間的區別 ------------------------- 現在您已經了解什麼是REST、gRPC 和GraphQL 以及它們的工作原理,以下是REST、GraphQL 和gRPC 之間的主要區別(以點格式表示),記住它們的主要特徵以及何時在專案中使用它們: ### REST: - 代表代表性狀態轉移 - 使用 HTTP 方法(GET、POST、PUT、DELETE)執行 CRUD 操作 - 以結構化格式傳送資料,通常是 JSON 或 XML - 不同資源可以有多個端點 - 客戶端收到回應中指定的所有資料,即使他們不需要全部資料 - 支援緩存,但管理起來可能很複雜 - 完善且廣泛採用,提供大量工具和文件 ### 圖形語言: - 允許客戶準確指定他們需要什麼資料,並僅接收該資料 - 使用單一端點存取多個資源 - 擁有自己的查詢語言,允許複雜的資料取得和操作 - 可以支援透過訂閱即時更新 - 在某些情況下比 REST 更有效率,特別是對於頻寬有限的行動設備 - 與 REST 相比,快取可以更細粒度且更易於管理 - 比 REST 需要更多的設定和配置,並且可能需要更多的專業知識才能有效使用 ### 遠程過程呼叫: - 代表帶有 Google 協定緩衝區的遠端程序呼叫 (RPC) - 使用二進位資料代替 HTTP 進行通信 - 支援串流資料即時更新 - 使用協定緩衝區進行序列化,這比 JSON 或 XML 更有效率 - 可以跨不同的程式語言使用 - 專為微服務之間的高效能、低延遲通訊而設計 - 比 REST 需要更多的設定和配置,並且可能需要更多的專業知識才能有效使用 - 互通性可能不如 REST 或 GraphQL,因為它不是基於 HTTP 這裡還有一個很好的表格,突出顯示了 REST、GraphQL 和 gRPC 之間的區別,您可以使用它來快速複習: [![REST、GraphQL 和 gRPC 之間的區別](https://miro.medium.com/v2/resize:fit:609/1*USJRkl5JS0IT90RqwMEopA.png)](https://javarevisited.blogspot.com/2022/04/difference-between-graphql-and-rest-api.html) 還值得注意的是,**這些協議並不相互排斥,並且可以組合使用它們以利用它們的不同優勢。** 例如,您可能對大多數 API 使用 REST,但對某些資源密集型查詢使用 GraphQL,或使用 gRPC 在微服務之間進行通信,同時對外部 API 用戶端使用 REST 或 GraphQL。 --- ### 系統設計訪談資源: 而且,如果您正在準備系統設計面試,那麼這裡有一些最佳系統設計書籍、線上課程和練習網站的精選列表,您可以查看這些內容,以便更好地準備系統設計面試。 1. [**DesignGuru 的 Grokking 系統設計課程**](https://bit.ly/3pMiO8g):一個互動式學習平台,提供實作練習和真實場景,以增強您的系統設計技能。 2. [**《系統設計面試》作者:Alex Xu**](https://amzn.to/3nU2Mbp) :這本書深入探討了系統設計概念、策略和麵試準備技巧。 3. Martin Kleppmann 的[**「設計資料密集型應用程式」**](https://amzn.to/3nXKaas) :綜合指南,涵蓋了設計可擴展且可靠的系統的原則和實踐。 4. [LeetCode 系統設計 標籤](https://leetcode.com/explore/learn/card/system-design):LeetCode 是一個受歡迎的技術面試準備平台。 LeetCode 上的系統設計標籤包含各種需要練習的問題。 5. GitHub 上的[**「系統設計入門」**](https://bit.ly/3bSaBfC) :精選的資源列表,包括文章、書籍和影片,可幫助您準備系統設計面試。 6. [**Educative 的系統設計課程**](https://bit.ly/3Mnh6UR):一個互動式學習平台,提供實作練習和真實場景,以增強您的系統設計技能。 7. **高可擴展性部落格**:該部落格包含有關高流量網站和可擴展系統架構的文章和案例研究。 8. **[YouTube 頻道](https://medium.com/javarevisited/top-8-youtube-channels-for-system-design-interview-preparation-970d103ea18d)**:請參閱「Gaurav Sen」和「Tech Dummies」等頻道,以取得有關係統設計概念和麵試準備的富有洞察力的影片。 9. [**ByteByteGo**](https://bit.ly/3P3eqMN) :Alex Xu 的一本現場書籍和課程,用於系統設計面試準備。它包含《系統設計訪談》第一捲和第二卷的所有內容,並將隨即將推出的第三卷進行更新。 10. [**Exponent**](https://bit.ly/3cNF0vw) :一個專為面試準備的網站,特別是針對亞馬遜和谷歌等 FAANG 公司,他們還有很棒的系統設計課程和許多其他材料,可以幫助您破解 FAAN 面試。 [![如何為系統設計做準備](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqv3p46jmw5qc0newuiu.jpg)](https://bit.ly/3P3eqMN) image\_credit - [ByteByteGo](https://bit.ly/3P3eqMN) #### 結論 這就是**REST、GraphQL 和 gRPC 技術之間的差異。**簡而言之,REST 是一種用於建立Web 服務的流行協議,受到HTTP 的啟發並充分利用HTTP 提供的功能,而GraphQL 是一種查詢語言,允許客戶端準確指定他們需要從伺服器獲取哪些資料。 它的建立是為了解決 REST 的缺點,因此如果您正在努力維護 REST API,那麼它絕對是一個可行的選擇。 另一方面, **gRPC**是一種高效能、開源協議,常用於微服務架構。 這些協定中的每一個都有不同的用途,並且它們都可以一起使用,為 Web 應用程式提供全面且高效的通訊系統。 --- 原文出處:https://dev.to/somadevtoo/difference-between-graphql-rest-and-grpc-58bl

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

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

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

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