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

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

最新出爐作業包

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

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

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

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

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

🔍 搜尋結果：10

🔍 搜尋結果：10

1
2
3
4
5
6
7
8
9
10
...
18
19
›

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

SOLID－簡單的理解方式

你好呀！你最近怎麼樣？你沒事吧？但願如此！今天我要談一個每個人都在談論或寫到的主題。但有時要理解每一個原則是很困難的。我說的是固體。當我問及 SOLID 時，很多人可能總是記得第一個原則（單一職責原則）。但當我問起另一個人時，有些人不記得了，或覺得很難解釋。我明白了。確實，如果不編碼或重新修改每個原則的定義，就很難解釋。但在本文中，我想以簡單的方式介紹每個原則。所以我會用Typescript來舉例。那麼就讓我們開始吧！單一職責原則 - SRP ------------ 更容易理解和記住的原則。當我們編碼時，很容易發現我們何時忘記了原則。假設我們有一個 TaskManager 類別： ``` class TaskManager { constructor() {} connectAPI(): void {} createTask(): void { console.log("Create Task"); } updateTask(): void { console.log("Update Task"); } removeTask(): void { console.log("Remove Task"); } sendNotification(): void { console.log("Send Notification"); } sendReport(): void { console.log("Send Report"); } } ``` 好的！也許你注意到你的問題了，不是嗎？ TaskManager 類別有很多不屬於她的職責。例如：sendNotification 和 sendReport 方法。現在，讓我們重構並應用該解決方案： ``` class APIConnector { constructor() {} connectAPI(): void {} } class Report { constructor() {} sendReport(): void { console.log("Send Report"); } } class Notificator { constructor() {} sendNotification(): void { console.log("Send Notification"); } } class TaskManager { constructor() {} createTask(): void { console.log("Create Task"); } updateTask(): void { console.log("Update Task"); } removeTask(): void { console.log("Remove Task"); } } ``` 很簡單，不是嗎？我們只是將通知和報告分離到指定的類別中。現在我們尊重單一原則責任！定義： `Each class must have one, and only one, reason to change` 。開閉原則－OCP -------- 第二個原則。另外，我認為很容易理解。給您一個提示，如果您發現在某種方法中需要滿足很多條件來驗證某些內容，那麼您可能遇到了 OCP。讓我們想像一下下面的考試類別範例： ``` type ExamType = { type: "BLOOD" | "XRay"; }; class ExamApprove { constructor() {} approveRequestExam(exam: ExamType): void { if (exam.type === "BLOOD") { if (this.verifyConditionsBlood(exam)) { console.log("Blood Exam Approved"); } } else if (exam.type === "XRay") { if (this.verifyConditionsXRay(exam)) { console.log("XRay Exam Approved!"); } } } verifyConditionsBlood(exam: ExamType): boolean { return true; } verifyConditionsXRay(exam: ExamType): boolean { return false; } } ``` 是的，您可能已經多次看到這段程式碼了。首先，我們打破了SRP的第一原則，並提出了許多條件。現在想像一下如果出現另一種類型的檢查，例如超音波。我們需要加入另一個方法來驗證和另一個條件。讓我們重構一下這段程式碼： ``` type ExamType = { type: "BLOOD" | "XRay"; }; interface ExamApprove { approveRequestExam(exam: NewExamType): void; verifyConditionExam(exam: NewExamType): boolean; } class BloodExamApprove implements ExamApprove { approveRequestExam(exam: ExamApprove): void { if (this.verifyConditionExam(exam)) { console.log("Blood Exam Approved"); } } verifyConditionExam(exam: ExamApprove): boolean { return true; } } class RayXExamApprove implements ExamApprove { approveRequestExam(exam: ExamApprove): void { if (this.verifyConditionExam(exam)) { console.log("RayX Exam Approved"); } } verifyConditionExam(exam: NewExamType): boolean { return true; } } ``` 哇，好多了！現在，如果出現另一種類型的檢查，我們只需實作`ExamApprove`介面。如果出現另一種類型的考試驗證，我們只更新介面。定義： `Software entities (such as classes and methods) must be open for extension but closed for modification` 里氏替換原理 - LSP ------------ 理解和解釋比較複雜的一種。但我怎麼說，我會讓你更容易理解。想像一下，您有一所大學和兩種類型的學生。學生和研究生。 ``` class Student { constructor(public name: string) {} study(): void { console.log(`${this.name} is studying`); } deliverTCC() { /** Problem: Post graduate Students don't delivery TCC */ } } class PostgraduateStudent extends Student { study(): void { console.log(`${this.name} is studying and searching`); } } ``` 我們這裡有一個問題，我們正在延長學生的時間，但研究生不需要提供 TCC。他只是研究和尋找。我們要怎麼解決這個問題呢？簡單的！讓我們建立一個學生類，並將畢業學生和畢業後學生分開： ``` class Student { constructor(public name: string) {} study(): void { console.log(`${this.name} is studying`); } } class StudentGraduation extends Student { study(): void { console.log(`${this.name} is studying`); } deliverTCC() {} } class StudentPosGraduation extends Student { study(): void { console.log(`${this.name} is studying and searching`); } } ``` 現在我們有更好的方法來分離他們各自的職責。這個原理的名字可能很可怕，但它的原理很簡單。定義： `Derived classes (or child classes) must be able to replace their base classes (or parent classes)` 介面隔離原則-ISP ---------- 要理解這個原理，訣竅是記住定義。不應強迫類別實作不會使用的方法。因此，假設您有一個類別實作了一個從未使用過的介面。讓我們想像一下某個商店的賣家和接待員的場景。賣家和接待員都有薪水，但只有賣家有佣金。讓我們看看問題： ``` interface Employee { salary(): number; generateCommission(): void; } class Seller implements Employee { salary(): number { return 1000; } generateCommission(): void { console.log("Generating Commission"); } } class Receptionist implements Employee { salary(): number { return 1000; } generateCommission(): void { /** Problem: Receptionist don't have commission */ } } ``` 兩者都實現了 Employee 接口，但接待員沒有佣金。所以我們被迫實施一種永遠不會被使用的方法。所以解決方法： ``` interface Employee { salary(): number; } interface Commissionable { generateCommission(): void; } class Seller implements Employee, Commissionable { salary(): number { return 1000; } generateCommission(): void { console.log("Generating Commission"); } } class Receptionist implements Employee { salary(): number { return 1000; } } ``` 輕鬆輕鬆！現在我們有兩個介面了！雇主類別和佣金介面。現在只有賣方將實現將獲得佣金的兩個介面。接待員不僅負責員工的工作。因此，接待員不必被迫實施永遠不會使用的方法。定義： `A class should not be forced to implement interfaces and methods that will not be used.` 依賴倒置原則—DIP ---------- 最後一個！光看名字就會覺得很難記！但也許你每次都已經看到這個原則了。想像一下，您有一個 Service 類，它與一個將呼叫資料庫的 Repository 類別集成，例如 Postgress。但是，例如，如果 MongoDB 的儲存庫類別發生變化並且資料庫發生變化。讓我們來看看例子： ``` interface Order { id: number; name: string; } class OrderRepository { constructor() {} saveOrder(order: Order) {} } class OrderService { private orderRepository: OrderRepository; constructor() { this.orderRepository = new OrderRepository(); } processOrder(order: Order) { this.orderRepository.saveOrder(order); } } ``` 我們注意到，儲存庫是 OrderService 類，直接耦合到 OrderRepository 類別的具體實作。讓我們重構一下這個例子： ``` interface Order { id: number; name: string; } class OrderRepository { constructor() {} saveOrder(order: Order) {} } class OrderService { private orderRepository: OrderRepository; constructor(repository: OrderRepository) { this.orderRepository = repository; } processOrder(order: Order) { this.orderRepository.saveOrder(order); } } ``` 好的！好多了！現在我們接收儲存庫作為建構函數的參數來實例化和使用。現在我們依賴抽象，我們不需要知道我們正在使用哪個儲存庫。定義： `depend on abstractions rather than concrete implementations` 精加工 --- 那你現在感覺怎麼樣？我希望透過這個簡單的範例，您可以記住並理解在程式碼中使用這些原則的內容和原因。除了應用乾淨的程式碼之外，它還更容易理解和擴展。我希望你喜歡！非常感謝您，祝您永遠健康！聯絡方式：領英：https://www.linkedin.com/in/kevin-uehara/ Instagram：https://www.instagram.com/uehara\_kevin/ 推特：https://twitter.com/ueharaDev Github：https://github.com/kevinuehara dev.to：https://dev.to/kevin-uehara Youtube：https://www.youtube.com/@ueharakevin/ --- 原文出處：https://dev.to/kevin-uehara/solid-the-simple-way-to-understand-47im

0個讚 0留言 3瀏覽

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

使用更多的終端機和更少的滑鼠來提高您的工作效率 (🚀)。

許多初學者可能認為只有高級開發人員才能使用終端機來提高生產力。當我開始學習程式設計時，我害怕使用終端機來執行`npm`命令等基本任務以外的任何事情。然而，多年來，我意識到我錯過了一個提高生產力的巨大機會。因此，我們將探討您應該更多地使用終端的所有原因以及一些可以幫助您提高工作效率的工具。另外，讓我們對所有隻使用滑鼠的使用者說實話，你們有點遲鈍。 ### 滑鼠速度慢了🐌 基本上，您使用滑鼠的次數越少，速度就越快。將手放在鍵盤上將為您節省大量時間。老實說，如果您在大部分活動中都使用滑鼠，那麼您就是菜鳥。 **瀏覽資料夾** 誰在他們的電腦上使用文件瀏覽器？我的意思是，即使你是 Windows 用戶，檔案總管基本上也很糟糕，但即使在 Mac 上，使用終端機進行導航也要快得多。對於那些在 Linux 上使用文件瀏覽器的人們，我希望上帝寬恕你們的罪。 **建立檔案和目錄** 據說右鍵建立文件的人精神有問題，雖然我不完全同意，但我是82%。像`touch` 、 `mkdir`和`ls`這樣的命令基本上是提高生產力的救星。使用`cat`快速瀏覽文件也非常有幫助。我想在評論中聽聽你對此的看法。您還使用哪些其他命令？ **如果我在 Windows 上怎麼辦？** 首先，如果你是Windows用戶，你的情況可能比那些使用右鍵建立檔案的人更糟。不過，這是改天再討論的事。透過安裝**Git Bash** ，您基本上將擁有幾乎所有的 Unix 系統終端命令並遠離 PowerShell 疾病。 **窗戶=🥲** ### 奈米或 Vim 了解 nano 或 vim 的基礎知識將阻止您打開較慢的替代品，例如 vscode 或 jetbrains。當您想要快速編輯一個小檔案時，打開 IDE 或文字編輯器只是為了更改幾行程式碼可能是對開發人員社群的背叛。另外，這意味著您在伺服器方面基本上毫無用處。 ### 中興如果您不使用[oh-my-zsh](https://ohmyz.sh/) ，您將錯過一些令人驚嘆的插件。大多數人希望終端具有的一項功能是自動完成。使用[zsh-autosuggestions](https://github.com/zsh-users/zsh-autosuggestions/blob/master/INSTALL.md)插件，您的終端將自動完成大多數命令並記住先前的命令。因此，對於所有使用向上箭頭🔼的戰士來說，您將不再需要按向上箭頭鍵 500 次來查找舊命令，因為您厭倦了谷歌搜尋。 ### 硬核的東西 (🍆) 使用**tmux**切換到**neovim**讓你看起來像某種色情明星程式設計師。當您在會議中以及共享螢幕以顯示程式碼時，您會顯得很酷。除了有趣的一面之外，如果您願意使用 neovim 切換到 tmux，它可以讓您成為 10 倍的開發人員。我可以花幾個小時來談論在你完成學習曲線後它有多麼有益，但那是一篇單獨的文章。 ### 結論所以你有它！放棄滑鼠並選擇命令列就像從自行車升級到火箭飛船一樣 — 它更快、更酷，而且景色也很壯觀！透過熟悉終端，您不僅可以加快工作流程，還可以加入精英開發人員聯盟，只需敲擊幾下鍵盤即可創造奇蹟。請記住，每一位大師都曾經是一場災難。感謝您的閱讀，希望這篇文章對您有幫助。如果您有任何疑問，請隨時發送電子郵件至[**[email protected]**](mailto:[email protected]) \*\*，我會回覆。您也可以透過查看我的 X 來了解我的最新更新： [**x.com/sotergreco**](http://x.com/sotergreco) --- 原文出處：https://dev.to/sotergreco/improve-your-productivity-by-using-more-terminal-and-less-mouse--2o7b

0個讚 0留言 7瀏覽

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

你不是軟體工程師；你是軟體工程師。你是“架構師”

在當今時代，保持簡單確實很難。我見過許多開發人員使用 6 到 10 種技術的組合來建立簡單的 CRUD 應用程式。抽象可能是好的，但也有一定的限度。我們生活在一個開發人員只知道 Tailwind 但不知道 CSS 的時代。他們很難編寫簡單的 SQL 查詢，但他們知道如何使用 ORM。他們被嚴重欺騙了，認為他們可以建立任何東西，因為他們在 YouTube 上觀看了無數業餘克隆的一切，但他們甚至不了解資料庫設計是什麼，系統實際上是如何運作的。他們不知道 JavaScript 是如何運作的，但正在嘗試學習 Next.js 並向前輩尋求建議。您可能不喜歡它，但事實是您不是軟體工程師；您是軟體工程師。你是一個「框架工作者」或是一個能夠更好地複製和貼上的人。軟體工程師是了解基礎知識並掌握它們的人，他們可以簡化最複雜的任務，並且對幕後的工作原理感到好奇。這不僅僅是編寫程式碼，而是理解整個系統，相信我，這並不難 - 很簡單。如果你掌握了正確的基礎知識，那麼學習一個框架或其他任何東西將只需要幾個小時，甚至幾天的時間。 --- 原文出處：https://dev.to/themuneebh/youre-not-a-software-engineer-youre-a-frameworker-3bkk

0個讚 0留言 6瀏覽

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

🕸️ 2024 年我們將看到的 Web 開發趨勢 👀

隨著我們已經步入新的一年，現在是了解 2024 年 Web 開發趨勢開始受到關注的最佳時機。回顧 2023 年以來的旋風式更新，以下是一些熱門話題的概述即將到來的一年。 ![戲法](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8d7a35t3wvyu1ppj6xc.png) 返回自架 ---- ![噗](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zlko5f6tojse2ypqq2w.jpg) 多年來，自架是網頁開發人員和公司託管其應用程式的最初和預設方式。開發人員必須更深入地了解 IIS、Nginx 或類似工具的內部工作原理才能託管其 Web 應用程式。隨後出現了雲端服務，與「自己動手做」的方法相比，雲端服務的出現使部署變得輕而易舉。不再有伺服器維護的惡夢，對吧？與「標準」自託管解決方案相比，更便宜、更方便的雲端部署意味著在其他地方更容易學習和維護部署。畢竟，你必須擁有一台伺服器，維護它、更新它、解決錯誤等。在生產環境中執行」開始出現就像過去的事情一樣。但是，這還不足以取代僅將應用程式傳送到某些外部提供者的便利性。不必被迫學習太多有關網路、管理和虛擬機器處理的便利性仍然不存在。更便宜的家庭伺服器的興起，使用網路附加儲存（NAS）及其廣泛的選項，使得處理輕量級使用的自託管需求變得更加容易。我們現在擁有 Proxmox 和 Portainer 等工具，它們使自架您自己的 Docker 容器變得輕而易舉。我們甚至看到 DHH（他是 Ruby on Rails 等產品的建立者）公司[完全轉向](https://world.hey.com/dhh/why-we-re-leaving-the-cloud-654b47e0)自託管模式，這引發了一場大爭論。返回伺服器 ----- ![伺服器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjxxcr4n3kjlhh72ikvn.png) 在 React 的世界中，有一種強烈的推動力將伺服器作為渲染應用程式的方式。 [React Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)主要透過 Next.js 帶頭，儘管是一項非常新技術，但在公眾討論中獲得了很大的空間。這些工具正在攪局——一些開發人員認為它們具有開創性，而另一些開發人員則認為它們只是重新發明輪子。無論如何，承諾是更快的頁面加載、更少的客戶端程式碼和更流暢的開發體驗。 React 元件可以在伺服器上專門執行和渲染 React 程式碼，這應該會帶來一些好處，例如更快的頁面載入、更少的發送到客戶端的程式碼以及更好的開發人員體驗。 DX 的一大優點是直接從元件本身安全地存取資料庫層，而不需要 API。 [HTMX](https://htmx.org/)是另一個因其伺服器優先的資料渲染方法而受到歡迎的程式庫，儘管它正在尋求一種更簡單的方法來吸引開發人員。返回水療中心 ------ ![水療圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uugl165hh4465tekfn6g.png) 等等，這不是有點矛盾嗎？雖然伺服器端渲染正在蓬勃發展，但也有一個堅實的陣營正在完善優秀的單頁應用程式 (SPA) 方法。主要原因是我們在嘗試伺服器優先方法方面走得太遠，以至於我們忘記了並非所有應用程式都應該駐留在伺服器上。有些可能是高度動態的，帶有大量複雜的用戶端驗證，或者您只是想將舊的 Create-React-App 架構遷移到 Vite。順便說一句，如果您想知道 SPA 到底是什麼以及我什麼時候應該使用它而不是 React 伺服器元件，請讓我快速解釋一下。單頁應用程式 (SPA) 是一種 Web 應用程式，它最初僅加載單個 Web 文件，然後動態更新同一頁面上的內容，而無需重新加載整個頁面。 SPA 透過重寫現有網頁而不是從伺服器載入全新頁面來與使用者互動。 Remix SPA 模式是較新的 SPA 方法的範例之一。它使用 Vite 建立基本上是 React Router 和 Vite 的設置，並具有附加的 Remix 特定功能，例如基於文件的路由等。利用 Vite 為使用者提供 SPA 體驗的 React 框架的另一個例子是[Wasp——一個針對 React 和 Node.js 的全端框架，大大減少了樣板檔案](https://github.com/wasp-lang/wasp)。儘管它是一個全端框架，但它專注於使用 Node.js 伺服器部署客戶端 React 應用程式的標準化方法，以盡可能實現可移植。透過這種方法，您幾乎可以在任何地方部署您的應用程式，也可以自行託管它，這也是我們之前在本文中提到的一件事。 ![OpenSaaS 橫幅](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzwgvd7wm3i04gia4zrk.png) 為了更快啟動，它還具有[Open SaaS - 一個適用於 React 和 Node.js 的 100% 免費開源樣板啟動器](https://github.com/wasp-lang/open-saas)。只需克隆它，即可獲得具有身份驗證、計費、開放 AI API、用戶儀表板等功能的工作應用程式！ ### 覺得這篇文章有用嗎？我們在[Wasp](https://wasp.sh/)正在努力建立這樣的內容，更不用說建立一個現代的開源 React/NodeJS 框架了。表達您支援的最簡單方法就是為 Wasp 儲存庫加註星標！ 🐝 但如果您可以查看[儲存庫](https://github.com/wasp-lang/wasp)（用於貢獻，或只是測試產品），我們將不勝感激。點擊下面的按鈕給黃蜂星一顆星並表示您的支持！ ![wasp_arnie_handshake](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axqiv01tl1pha9ougp21.gif) {% cta https://github.com/wasp-lang/wasp %} ⭐️ 感謝您的支持 💪 {% endcta %} 低級語言的興起 ------- ![銹病](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61wil1pr8jfv72p17hec.png) 暫時離開 JavaScript 的世界，我們發現許多低階語言進入主流的例子，尤其是在 JavaScript 工具方面。這一趨勢在過去幾年中已經開始，並且應該會持續到 2024 年及以後。當 JavaScript 生態系統開始蓬勃發展時，出現了許多使用 JavaScript 建立的出色工具，這使得開發人員可以更輕鬆地為它們做出貢獻，並允許他們建立自己的插件並根據自己的喜好進行自訂。我們應該對此感到興奮的一個重要原因是，與基於 JS 的工具相比，這些工具為開發人員帶來的效能。 SWC（Speedy Web Compiler）和 Turbopack（Vercel 自稱為 Webpack 的繼承者）等工具都是用 Rust 建構的。另一方面，Bun，它是一個帶有 Zig 的一體化 JavaScript 工具包。它不僅使用戶能夠將其用作預設的 JavaScript 執行時，還可以用作捆綁器、測試執行器和與 Node.js 相容的套件管理器。很棒的是，許多新工具不會消除與預先存在的概念的兼容性，這使得轉換相對容易。結論 -- 與所有事情一樣，我們應該對所有預測和潛在趨勢持保留態度。人們很容易被當今不斷出現的新技術和工具的炒作沖昏頭。如果你仔細閱讀這篇文章，你可能會想「好吧，人工智慧在哪裡？」。我故意不包含任何基於人工智慧的預測，以提高人們對行業中被忽視的其他酷發展和趨勢的認識。您如何看待這些趨勢？你也注意到他們了嗎？或者更好，自己做一些這樣的事情？請在下面的評論部分告訴我們並分享您的意見！ --- 原文出處：https://dev.to/wasp/web-development-trends-we-will-see-in-2024-55pi

0個讚 0留言 8瀏覽

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

53 個專案創意（從初級到高級）

介紹 == 對於初學者來說，尋找專案想法並實施它們一直是一個困難的過程。每天，我都會遇到成百上千的人在 Reddit、Facebook、Twitter 等頁面以及 Devto 和 Medium 等技術部落格上詢問他們可以使用備受好評和誇張的程式語言做什麼。為此，我想開一個話題。僅包含專案想法的線程。我建立一篇評論文章只是為了激勵那些想要學習新語言並測試其能力的人。我會在文章下面的評論中加入新的想法。透過這種方式，我的目標是盡可能避免初學者可以用這樣或那樣的程式做什麼的問題。首先我要跟大家提幾個想法： 1. 盡可能嘗試使用心智圖技術。將主題標題寫為關鍵字，並使用您記下的筆記中的標籤將正確的專案放在正確的標題下。 2. 移植 - 將另一種語言給出的專案想法整合到您的新語言中 3. 老派 - 重寫您的第一個專案，同時透過命令列以最簡單的形式學習另一種語言（不使用人工智慧） 4. 程式碼共享 - 出於非商業目的，請毫不猶豫地共享您的程式碼。一邊喝咖啡，一邊看著你的錯誤被無情地批評。 5. 鳥在手，勝鳥在林。一個行之有效的專案比行不通的瘋狂想法要好。這樣做直到你成功為止。 > PS：此清單包含 53 個想法。不是50。句號:) 從初級到高級的專案想法 ----------- 1. 網路爬蟲#scraper 2. 文件加密器#filetool 3. URL 縮短器 #urltool 4. CLI 聊天應用程式#chat 5. REST完整 API #api 6. 影像辨識 #ml #dl 7. 股市分析#stock #market 8. Markdown 到 HTML 轉換器 #converter 9. PDF 產生器 #generator 10. 社群媒體分析#analytics 11. 視訊串流伺服器#server 12. 區塊鏈實作#blockchain 13. 內容管理系統 (CMS) #website #cms 14. 電子郵件客戶端#email 15. 任務管理系統#task 16. 線上市集#ecommerce 17. 即時聊天應用程式#chat 18. URL監控工具#url 19. 代理伺服器#proxy 20. 網路爬蟲#crawler 21. 部落格平台#blog 22. 密碼管理器#password 23. 任務調度#task 24. 圖片庫#gallery 25. Markdown 編輯器#markdown 26. 費用追蹤#finance 27. 預算追蹤器#finance 28. URL 驗證器 #url 29. 食譜共享平台#recipe 30. 文字轉語音轉換器#tts 31. 論壇或討論區#forum #discussion 32. 聊天機器人人工智慧#ai #chat 33. 日誌分析器#log #analytics 34. 天氣應用#app #weather #api 35. 程式碼審查工具#code 36. 音樂串流服務#stream #service #music 37. Markdown 部落格產生器 #markdown #blog #generator 38. 拍賣平台#platform #auction 39. URL 縮短器 #url 40. TODO 應用 #todo #task 41. 抽認卡應用程式#flashcard 42. 新聞聚合器 #news #api #rss 43. 社群媒體調度程式#social #schedule 44. 資料視覺化（圖表等）#data 45. URL 過濾代理伺服器 #url #proxy 46. URL 解析器#url 47. 密碼強度檢查器#password #cybersecurity 48. RSS 提要閱讀器 #rss #reader 49. 測驗應用程式#quiz #app 50. 視訊會議工具#video 51. 員工管理系統#business 52. Encrpyt - 解密工具#filetool 53. 程式碼片段管理器#snippet #code --- 原文出處：https://dev.to/gokayburuc/53-project-ideas-for-beginner-to-advanced-2j5

0個讚 0留言 76瀏覽

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

用於建立 AI/ML 應用程式的最佳開發工具！

我來自世界各地的 DevOps 領域，在加入我現在的公司 SingleStore 之前，AI/ML 世界對我來說是全新的。我加入已經 8 個月了，一切進展得非常順利。從各種部落格、教程、工具等中學習AI/ML 中所有新的很酷的東西。這些要求的工具。順便說一句，我們有很多內容和材料可以開始，但我想看看行業之外還發生了什麼，並做我自己的研究。正如我所說，已經過去 8 個月了。在我在這裡的整個旅程中，從舉辦網路研討會、在會議上發言，到撰寫有關新興技術趨勢的博客，我偶然發現了一系列不可或缺的工具。在本文中，我將分享這些工具，從新興程式語言到 AI 框架，再到向量資料庫，再到簡化 AI/ML 應用程式建立的開發工具。***讓我們開始吧。*** 1. 程式語言 ------- ### [翅膀](https://git.new/winglang) ![只是一個翅膀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pyqzc2vsp6ckovq7j7p.png) 我嘗試使用多種語言，但發現大多數語言都被誇大了。是的，就在那時，我遇到了一個正在討論這種為雲端和人工智慧應用程式設計的新語言的社群。那是我第一次嘗試 Wing 程式語言，發現它令人印象深刻。你可能會問 - 為什麼是 Wing？ Wing 提供了一個統一的程式設計模型，將基礎架構和應用程式程式碼整合到一個有凝聚力的框架內。這種獨特的方法使開發人員能夠簡化他們的工作流程，消除不斷切換情境的需要，並顯著提高生產力和創造力。這正是您在建立 AI/ML 應用程式時所需要的，更專注於核心功能而不是底層基礎設施。我遇到了他們的 Open AI Joker 應用程式，它可以產生笑話並將其翻譯成不同的語言。整個框架的流暢程度令人驚嘆。請注意，Wing 仍在積極開發中。您可以使用最少的程式碼建立任何 AI/ML 應用程式。讓我們看看 Joker 應用程式是如何運作的。該應用程式使用 OpenAI 生成笑話並將其翻譯成不同的語言。有一個喜劇演員，一個開放人工智慧助手，可以產生笑話，每當它生成笑話時，笑話就會被放入/儲存在一個桶中。有兩個譯者，西班牙語和希伯來語。這些譯者訂閱一個主題。每當有笑話產生時，他們都會收到並翻譯。而且，他們也把翻譯好的笑話丟進桶裡了。很簡單。以下是此範例的技術概述圖，展示如何將[OpenAI 的 API 與 Wing](https://github.com/winglang/examples/tree/main/examples/openai-joker)結合使用。 ![翅膀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5chcap4ufyxnv6aef9m.png) 如果您還沒有嘗試過 Winglang，您可以透過簡單的命令輕鬆嘗試 ``` npm install -g winglang ``` 使用 git clone 指令將程式碼複製到本機 ``` git clone https://github.com/winglang/wing.git ``` 轉到範例資料夾，然後在終端機中執行以下命令： ``` npm install wing it ``` 呼叫“START HERE”函數，並在“Joke Store”中查看結果。 2.向量資料儲存與分析工具 ------------- ### SingleStore 和筆記本 ![單一儲存資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/migeuz23bst8l2s445i4.jpeg) 對於 AI/ML 應用程式，您需要一個資料庫來儲存非結構化資料。我大約 8 個月前加入 SingleStore，當時我對 AI/ML 和向量資料庫還是個新手。隨著圍繞向量資料庫的大肆宣傳，我開始了解向量資料庫，並發現 SingleStore 作為向量資料庫如何為行業帶來驚人的補充。它不僅用於儲存向量資料，而且該公司還使用 SingleStore 進行即時分析。現在，看看支援即時分析的向量資料儲存的力量，這是一種超級力量。下面我要來跟大家介紹一下SingleStore；它是一個基於雲端的資料庫管理系統（RDBMS），專為資料密集型應用程式而設計。它以其資料攝取、事務處理和查詢處理的速度而聞名。 SingleStore 早在 2017 年就開始支援向量儲存。 SingleStore 的 Notebook 功能基於流行的 Jupyter Notebook，廣泛應用於資料科學和機器學習社群。 SingleStore Notebook 擴展了 Jupyter Notebook 的功能，使資料專業人員能夠輕鬆使用 SingleStore 的分散式 SQL 資料庫，同時在語言和資料來源方面提供出色的可擴充性。 [試試 SingleStore 並獲得價值 600 美元的免費積分](https://www.singlestore.com/cloud-trial/?utm_medium=referral&utm_source=pavan&utm_term=devto&utm_content=aimltools)。 3. 資料操作與分析工具 ------------ 我只是喜歡處理資料並使用公開的資料集（例如葡萄酒資料集、泰坦尼克號資料集等）進行不同的實驗。我著迷地看到 NumPy 和 Pandas 在資料探索和提出不同解決方案方面的能力。 Pandas 和 NumPy 是 Python 生態系統中用於資料分析和科學計算的兩個最受歡迎的函式庫。 ### 熊貓和 NumPy ![熊貓和 numpy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zl8ez8r05a61wcy9zaze.png) 任何 AI/ML 應用程式的核心都是資料。 Pandas 和 NumPy 等工具是 Python 中資料操作和分析的基礎。 Pandas 提供了用於操作數值表和時間序列的高級資料結構和操作，使其成為在用於訓練模型之前預處理和清理資料的理想選擇。 NumPy 增加了對大型多維陣列和矩陣的支持，以及對這些陣列進行操作的大量數學函數的支持，這對於資料預處理和模型訓練中的效能密集型操作至關重要。 4. 人工智慧與機器學習框架 -------------- 我使用過 TensorFlow、PyTorch，最近接觸過 LangChain 和 LlamaIndex，對它們幫助 AI/ML 工程師使用 API、向量儲存功能、邏輯、推理等建立強大應用程式所需的所有工具包的能力印象深刻。讓我們一一來看看他們的超能力。 ### TensorFlow 和 PyTorch ![pytorch中的tensonflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/23wl305qjftx5y33ewvt.png) 由 Google 開發的[TensorFlow](https://www.tensorflow.org/)和由 Facebook 開發的[PyTorch](https://pytorch.org/)是用於建立和訓練複雜機器學習模型的兩個最受歡迎的框架。 TensorFlow 以其靈活性和強大的可擴展性而聞名，使其適用於研究原型和生產部署。 PyTorch 因其易用性、簡單性和動態計算圖而受到讚譽，可以更直觀地編碼複雜的 AI 模型。這兩個框架都支援廣泛的人工智慧模型，從簡單的線性回歸到複雜的深度神經網路。 ### 浪鏈 ![浪鏈](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy5mcfwl843zlrte6x0b.png) [LangChain](https://www.langchain.com/)由 Harrison Chase 開發，於 2022 年 10 月首次亮相，它是一個開源平台，旨在建立由大型語言模型支援的強大應用程式，例如 ChatGPT 等聊天機器人和各種客製化應用程式。 Langchain 致力於為資料工程師提供一個包羅萬象的工具包，以便在聊天機器人、自動問答、文字摘要等各種用例中利用法學碩士。 ### 駱駝指數 ![駱駝指數](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tgndtlwx6emah2k6s2h.png) [LlamaIndex](https://www.llamaindex.ai/)是一種先進的編排框架，旨在增強 GPT-4 等 LLM 的功能。雖然法學碩士本質上很強大，並且接受過大量公共資料集的培訓，但他們通常缺乏與私有或特定領域資料互動的方法。 LlamaIndex 彌補了這一差距，提供了一種結構化的方式來攝取、組織和利用各種資料來源——包括 API、資料庫和 PDF。透過將這些資料索引為針對法學碩士最佳化的格式，LlamaIndex 促進了自然語言查詢，使用戶能夠無縫地與其私有資料進行對話，而無需重新訓練模型。 5.深度學習模型 -------- 作為初學者，我一直在尋找簡單而靈活的東西來開發深度學習模型，就在那時我發現了 Keras。許多 AI/ML 專業人士欣賞[Keras](https://keras.io/)在原型設計和開發深度學習模型方面的簡單性和高效性，使其成為首選，特別是對於初學者和需要快速開發的專案。 ### 難的 ![難的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqtk1tp1berno2yie8u7.png) 對於尋求高級神經網路 API 的開發人員來說，現在已整合到 TensorFlow 中的 Keras 提供了更簡單的介面來建立和訓練深度學習模型。 Keras 抽象化了建構神經網路的大部分複雜性，使其易於初學者使用，同時仍足夠強大以進行研究。 6. 開發和版本控制平台 ------------ ### GitHub 和 DVC ![DVC套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1tx82df0xei0m5qwpk3.png) 由於模型開發的迭代性質和對可重複性的需求，協作和版本控制在 AI/ML 開發專案中至關重要。 [GitHub](https://github.com/)是領先的原始碼管理平台，允許團隊協作處理程式碼、追蹤問題和管理專案里程碑。 [DVC（資料版本控制）](https://dvc.org/)透過處理 Git 無法有效管理的大型資料檔案、資料集和機器學習模型來補充 Git，從而實現對 AI 專案中使用的資料和模型檔案的版本控制。 7. AI模型部署與監控 ------------ 我建立了一些 AI/ML 應用程式，但是如何以及在哪裡部署它們？這就是我的想法跳到這個類別中的兩個主要工具：Docker 和 Kubernetes。正如我之前所說，我來自世界各地的 DevOps 地區，我已經使用過這些工具，並且知道它們是如何運作的。 Docker 將您的應用程式容器化，而 Kubernetes 用於大規模部署您的應用程式。 ### Docker 和 Kubernetes ![Docker 和 Kubernetes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thj4mvioz76tja3ew3iw.png) 將人工智慧模型部署到生產中需要能夠打包應用程式並大規模管理它們的工具。 [Docker](https://www.docker.com/)透過容器化AI應用程式來簡化其部署，確保應用程式在任何環境中順利執行。 [Kubernetes](https://kubernetes.io/)是 Docker 容器的編排系統，可以自動部署、擴展和管理容器化應用程式，這對於需要跨多個伺服器或雲端環境進行擴展的 AI 應用程式至關重要。 8.人工智慧雲端平台 ---------- 如果沒有 AWS、Google 和 Azure 等雲端平台，您就無法擴展任何東西。雖然 AWS 是我最喜歡的，但我也探索了其他選項，並在此提到了所有三個主要雲端供應商。 ### AWS、Google雲端和 Azure ![雲端提供者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jtvbfzk003t5jxi9ghi.png) Amazon Web Services (AWS)、Google Cloud Platform (GCP) 和 Microsoft Azure 等雲端平台提供了一系列 AI 和機器學習服務，這些服務抽象化了訓練和部署 AI 模型所需的大部分基礎架構。這些平台為機器學習模型訓練、部署和監控提供託管服務，以及可擴展以滿足任何人工智慧專案需求的大量運算資源。 9. 專門的人工智慧開發工具 -------------- 雖然我仍然更喜歡使用 SingleStore Notebook 功能，但我知道大多數人已經在使用 Jupyter Notebook 進行資料探索和分析。我有時會使用 Jupyter Notebooks，另一個更有趣的工具是 MLflow，它將幫助您完成端到端的 ML 工作流程。 ### Jupyter 筆記本 ![Jupyter筆記本](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/411i9cumaafb3un5viqi.png) 對於探索性資料分析、模型開發和文件編制，Jupyter Notebooks 是不可或缺的工具。它們允許開發人員建立和共享包含即時程式碼、方程式、視覺化和敘述文字的文件，使其成為協作人工智慧研究和開發的絕佳工具。 ### ML流 ![毫升流工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nabnjklq1e07x8kc1vr.png) [MLflow](https://mlflow.org/)是一個用於管理端對端機器學習生命週期的開源平台。它包括實驗追蹤、模型版本控制和部署等功能，使開發人員能夠追蹤和比較實驗、將模型打包成可重複的執行，以及管理跨多個環境的模型部署。 ### 最後的一些想法人工智慧/機器學習領域正在像海洋一樣不斷發展。每天我們都會看到一種或另一種語言模型帶著許多期望首次亮相。有許多令人驚嘆的開發工具仍然可以包含在這個清單中，但從我個人的經驗來看，我相信這些工具是每個 AI/ML 工程師開始建立他們的 AI/ML 應用程式的良好開端。讓我知道您目前在 AI/ML 領域最喜歡的工具是什麼。 --- 原文出處：https://dev.to/pavanbelagatti/my-favorite-devtools-to-build-aiml-applications-3c0c

0個讚 0留言 44瀏覽

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

為開源做出貢獻將使您獲得新工作的機會增加 10 倍 🚀

最近我一直在嘗試讓一些程式設計師在 Upwork 上為我工作。每個申請者都提出了很多關於他們是否能夠真正處理我的專案的問題。我還沒有僱用任何人。 ![沒有技能](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bps04cekis2pasb07w07.gif) --- 將作業新增至 Upwork ------------- 我做了一個非常簡單的職位描述，並回答了幾個問題： ![問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8krynn1qyxy0fpifel23.png) 並開始收到許多無用的申請。如果其中許多是使用 ChatGPT 建立的，我不會感到驚訝。 ![無益的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swlrnc124ryte61zozh1.png) 然後收到了很多帶有未解決問題的申請： - 我怎麼知道他們可以處理我的專案？ - 我怎麼知道他們沒有說謊？ - 我如何知道他們是否能夠以高品質的貢獻來應對？ - 我怎麼知道他們知道如何與我正確溝通？ ![大聲哭](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mg3dva9mc5zxeal24kka.png) 如此多的懸而未決的問題給聘用任何候選人帶來了巨大的風險。如果他們做得不好，我可以： - 失去時間 - 賠錢 - 浪費了我的時間（因為我需要教他們）我需要面試和測試每個候選人（很頭痛） --- 開源閃耀 ---- 現在，假設有人為我的開源儲存庫做出了貢獻。現在我明白了： - 他們的水平 - 他們處理大型專案的能力 - 他們如何溝通我可以告訴你，在[Novu](https://novu.co/) ，很多貢獻者已經從貢獻者轉變為員工。大多數開發人員常犯的錯誤 ------------ 我透過 GitHub 收到了一個人的申請。這是他們的 GitHub 個人資料： ![輪廓](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jd2ktb7tjb3e8r85ast.png) 他們沒有為不同的開源儲存庫做出很多貢獻，而是嘗試建立和應用自己的演示。這是一個很大的錯誤。每個擁有1年以上經驗的開發者都可以從0開始；在受控環境中要容易得多。實際上，為大型程式碼庫做出貢獻（並進行合併）是一個不同的層次。以下是我從 HackSquad 不和諧中收到的一條訊息： ![黑客小隊不和諧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rlz8fl98vr9bsc1zrrh.png) > “但是初學者無法為他們龐大的程式碼庫做出貢獻” 這就是您在申請工作時降低風險的方法。因此，不要建立 100 個演示專案，而是專注於為更大的程式碼庫專案做出 1-2 個貢獻。對您的貢獻具有戰略意義 ----------- 在為任何大型程式碼庫專案做出貢獻之前，請檢查： - 是一家公司嗎？ - 他們在招人嗎？ - 他們有空缺職位來滿足我正在尋找的職位嗎？ - 我可以向類似公司或 Upwork 展示這項貢獻嗎？ --- 您應該貢獻的專案 ======== 所有列出的專案都是完全遠端的公司，到處招募。 [1.Gitroom](https://github.com/gitroomhq/gitroom/) -------------------------------------------------- 我沒有太多的預算，但我正在努力減輕一些工作。如果您想：這是一個很好的專案： - 從一個中型專案開始 - 使用最先進的技術，例如 NextJS 和 NestJS - 接觸更多支援許多開源公司的開源公司（因為 Gitroom）。我還打開了一系列很酷的問題，您可以從這裡開始！ [![吉特魯姆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zlcqtrvpmjr03c96bydd.png)](https://github.com/gitroomhq/gitroom/) 2.[Copilotkit](https://github.com/CopilotKit/CopilotKit/) ---------------------------------------------------- 如今，出現了一個新概念「AI工程師」。它主要適合那些有興趣用人工智慧建立東西而不自己建立人工智慧的人。 Copilotkit 正在建立包裝現有法學碩士的聊天機器人。如果您想：這是一個很好的專案： - 與法學碩士合作 - 使用 NextJS 以及未來更多的框架 - 做一些很酷的人工智慧狗屎:) [![副駕駛套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9ps9yyn60w9xqx3e1ie.png)](https://github.com/CopilotKit/CopilotKit/) 3.[Wing](https://github.com/winglang/wing/) ----------------------------------------- 雖然許多人去學習電腦科學，但他們是作為開發人員而不是工程師來編寫全端軟體的；你不必學習CS（我剛從高中畢業）。如果您想從事工程師職業，那麼這是一個很好的專案，如果您想： - 建造一個轉譯器，接受程式碼並最後將其轉換為 JS - 編寫複雜的演算法 - 打造深度基礎設施 ![翅膀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krrlly1b3x6rqc3w1ki4.png) 4.[LLMWare](https://github.com/llmware-ai/llmware) ------------------------------------------------- 我問[聖地牙哥](https://twitter.com/svpino)當今人工智慧最大的趨勢是什麼。他表示，RAG 和 LLM 是最大的炒作或主要是未來。 LLMWare 是與 RAG 相關的一切的殺手。如果您想：這是一個很好的專案： - 與 RAG 一起玩 - 播放和微調模型 - 成為 Python 專業人士 ![法學碩士軟體](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8az6baig5ctii4l64rgx.png) 5.[Novu](https://github.com/novuhq/novu) ------------------------------------- 我在 Novu 工作過，所以我可以告訴你這是一家很好的公司:) 他們的程式碼庫相當大（3 年的編碼）。如果您想：這是一個很好的專案： - 他們已經聘請了許多社區成員 - 簡單的程式碼庫全端 javascript - 巨大的社區（很有趣） ![新的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ku2dva54034m8wq6abhp.png) 6.[Taipy](https://github.com/avaiga/taipy) --------------------------------------- 我愛泰比。他們建立了一個獨特的 Python 應用程式建構器；這是一個很酷的專案，因為它不像全端 JavaScript 應用程式那麼容易。如果您想：這是一個很好的專案： - 學習Python - 炫耀對大型程式碼庫的出色貢獻 - 成為大社區的一份子。 ![類型](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ajd52xb20zu8zy8fsgzt.png) --- 如果您是一家也在招聘的開源公司，請在評論中加入您的儲存庫:) --- 原文出處：https://dev.to/github20k/contributing-to-open-source-will-10x-your-chances-to-land-a-new-job-433f

0個讚 0留言 46瀏覽

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

我們在使用 Rust 建構 SaaS 時學到了什麼

在這篇文章中，我們**不會**回答每個人在開始新專案時都會問的問題：**我應該用 Rust 來做嗎？** ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExNHQwOTl6Ym5odmVmNDZpdzVmZG9mMW9yd2tmN2lyZ2NzOWNxc2MxMCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l83rkRUu4IqyUbt5k6/giphy.gif) 相反，我們將探索在自信地回答「**絕對！** 」並開始主要使用 Rust 建立業務後遇到的陷阱和見解。這篇文章旨在提供我們經驗的高層次概述，我們將在即將推出的系列中更深入地研究細節。（在評論中為我們的下一篇文章投票🗳️） --- 為什麼生鏽 ----- 為專案選擇正確的語言從來不是一個一刀切的決定。關於我們的團隊和用例的幾句話： - 我們是一個 6 人團隊，幾乎沒有 Rust 經驗，但擁有建立資料密集型應用程式的豐富 Scala/Java 背景 - 我們的 SaaS 是一個計費平台，專注於分析、即時資料和可操作的見解（想想 Stripe Billing 與 Profitwell 的結合，再加上一點 Posthog）。 - 我們的後端完全採用 Rust（分為 2 個模組和幾個工作線程），並使用 gRPC-web 與我們的 React 前端進行對話 > 我們是開源的！ > 您可以在這裡找到我們的儲存庫：https://github.com/meteroid-oss/meteroid > 我們期待您的支持 ⭐ 和貢獻因此，我們有一些不可協商的要求恰好非常適合 Rust：**效能、安全性和並發性**。 Rust 實際上消除了與記憶體管理相關的所有 bug 和 CVE，而它的並發原語非常有吸引力（並且沒有讓人失望）。在 SaaS 中，所有這些功能在處理敏感或關鍵任務時尤其有價值，例如我們案例中的計量、發票計算和交付。正如[包括微軟在內的](https://mspoweruser.com/microsoft-forms-new-team-to-help-rewrite-core-windows-components-into-rust-from-c-c/)許多大型企業最近所承認的那樣，其記憶體使用量的顯著減少也是建立可擴展和**永續**平台的一大優勢。來自戲劇性的、有時有毒的 Scala 社區，**熱情且包容的**Rust 生態系統也是一個重要的吸引力，為探索這個新領域提供了動力。帶著這樣的厚望，讓我們開始我們的旅程吧！ --- 第 1 課：學習曲線是真的 ------------- 學習 Rust 並不像學習另一種語言。所有權、借用和生命週期等概念一開始可能會讓人望而生畏，使得原本瑣碎的程式碼變得極其耗時。儘管生態系統令人愉快（稍後會詳細介紹），但有時**您不可避免地需要編寫較低層級的程式碼**。例如，考慮我們的 API (Tonic/Tower) 的一個相當基本的中間件，它只報告計算持續時間： ``` impl<S, ReqBody, ResBody> Service<Request<ReqBody>> for MetricService<S> where S: Service<Request<ReqBody>, Response = Response<ResBody>, Error = BoxError> + Clone + Send + 'static, S::Future: Send + 'static, ReqBody: Send, { type Response = S::Response; type Error = BoxError; type Future = ResponseFuture<S::Future>; fn poll_ready(&mut self, cx: &mut Context<'_>) -> Poll<Result<(), Self::Error>> { self.inner.poll_ready(cx) } fn call(&mut self, request: Request<ReqBody>) -> Self::Future { let clone = self.inner.clone(); let mut inner = std::mem::replace(&mut self.inner, clone); let started_at = std::time::Instant::now(); let sm = GrpcServiceMethod::extract(request.uri()); let future = inner.call(request); ResponseFuture { future, started_at, sm, } } } #[pin_project] pub struct ResponseFuture<F> { #[pin] future: F, started_at: Instant, sm: GrpcServiceMethod, } impl<F, ResBody> Future for ResponseFuture<F> where F: Future<Output = Result<Response<ResBody>, BoxError>>, { type Output = Result<Response<ResBody>, BoxError>; fn poll(self: Pin<&mut Self>, cx: &mut Context<'_>) -> Poll<Self::Output> { let this = self.project(); let res = ready!(this.future.poll(cx)); let finished_at = Instant::now(); let delta = finished_at.duration_since(*this.started_at).as_millis(); // this is the actual logic let (res, grpc_status_code) = (...) crate::metric::record_call( GrpcKind::SERVER, this.sm.clone(), grpc_status_code, delta as u64, ); Poll::Ready(res) } } ``` 是的，除了泛型類型、泛型生命週期和特徵約束之外，您最終還需要為簡單的服務中間件編寫自訂的 Future 實作。請記住，這是一個有點極端的例子，旨在展示生態系統中存在的粗糙邊緣。*在許多情況下，Rust 最終可以像任何其他現代語言一樣緊湊。* **學習曲線可能會根據您的背景而有所不同。**如果您習慣了 JVM 處理繁重的工作並像我們一樣使用更成熟、更廣泛的生態系統，那麼可能需要付出更多的努力來理解 Rust 的獨特概念和範例。然而，一旦您掌握了這些概念和原語，它們就會成為您武器庫中極其強大的工具，即使您偶爾需要編寫一些樣板文件或宏，也可以提高您的工作效率。值得一提的是， [Google 在相當短的時間內成功地將團隊從 Go 和 C++ 過渡到 Rust，](https://www.theregister.com/2024/03/31/rust_google_c)並且取得了積極的成果。要平滑學習曲線，請考慮以下因素： - **閱讀官方[Rust Book 的](https://doc.rust-lang.org/stable/book/)封面**。不要跳過章節。理解這些複雜的概念將變得容易得多。 - **練習，練習，練習！**透過[Rustlings](https://rustlings.cool/)練習來建立肌肉記憶並採用 Rust 思維方式。 - **參與[Rust 社群](https://www.reddit.com/r/rust/)。**他們是一群令人難以置信的人，總是願意伸出援手。 - **利用 GitHub 的搜尋**功能尋找其他專案並向其學習。生態系統仍在不斷發展，與其他人的合作至關重要（只需注意許可證並始終做出貢獻）。我們將在下一篇文章中探討一些帶給我們啟發的專案。 --- 教訓 2：生態系仍處於成熟階段 --------------- Rust 的底層生態系統確實令人難以置信，擁有精心設計和維護的庫，並被社區廣泛採用。這些函式庫為建構高效能且可靠的系統奠定了堅實的基礎。然而，當你在堆疊中向上移動時，事情可能會變得稍微複雜一些。 ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeWNoejRsb2RhaGsybzQwdXJydjJzbHVpNjR6eW9udzdudjlvdWVjdiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l2SpOlC7JLROBEkO4/giphy.gif) 例如，在資料庫生態系統中，雖然針對關聯式資料庫存在像[`sqlx`](https://github.com/launchbadge/sqlx)和[`diesel`](https://github.com/diesel-rs/diesel)這樣的優秀函式庫，但對於許多非同步或非關聯式資料庫用戶端來說，情況會更加複雜。這些領域的高品質庫，即使被大公司使用，也往往只有**單一維護者**，導致開發速度較慢並且有潛在的維護風險。對於分散式系統原語來說，挑戰更為明顯，您可能需要實現自己的解決方案。這並不是 Rust 所獨有的，但與舊的/更成熟的語言相比，我們經常發現自己處於這種情況。從好的方面來說， **Rust 的生態系統對安全問題的反應令人印象深刻**，補丁迅速傳播，確保了應用程式的穩定性和安全性。到目前為止，圍繞 Rust 開發的工具也非常令人驚嘆。我們將在以後的文章中深入探討我們選擇的函式庫以及我們所做的決定。生態系統不斷發展，社區積極努力填補空白並提供強大的解決方案。準備好探索未知領域，並相應地分配資源以幫助維護，並回饋社區。 --- ### ……我有沒有提到我們是開源的？ > [Metroid](https://meteroid.com/)是一個現代化的開源計費平台，專注於商業智慧和可操作的見解。 **我們需要你的幫助！如果你有一分鐘時間，** [](https://git.new/meteroid) ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZDFvd2M3bnZ4OTF1dzBkcHh1NnlwemY1cTU5NWVjOThoZjU4a2U5biZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XATW2O9w0hrmuIpvtu/giphy.gif) 您的支持對我們意義重大❤️ https://github.com/meteroid-oss/meteroid ⭐️ 在 Github 上為我們加註星標 ⭐️ --- 第 3 課：文件位於程式碼中 -------------- 當深入 Rust 的生態系統時，您很快就會意識到文件網站有時可能有點......好吧，稀疏。但不要害怕！真正的寶藏往往存在於原始碼中。許多庫都有**非常詳細的方法記錄，**並**在程式碼註釋中**包含全面的範例。如有疑問，請深入研究原始程式碼並進行探索。您經常會發現您尋求的答案，並對圖書館的內部運作有更深入的了解。雖然具有使用指南的外部文件仍然很重要，並且可以節省開發人員的時間和挫折感，但在 Rust 生態系統中，準備好在必要時深入研究程式碼至關重要。像[docs.rs](https://docs.rs)這樣的網站可以輕鬆存取公共 Rust 套件的基於程式碼的文件。或者，您可以使用 Cargo doc 在本機上產生所有依賴項的文件。這種方法一開始可能會令人困惑，但從長遠來看，花一些時間學習如何駕馭這個系統可能會非常有效。不用說，另一個有用的技術是尋找範例（**大多數庫在其存儲庫中都有一個`/examples`資料夾**）和使用您感興趣的庫的其他專案，並與這些社區互動。這些總是為如何使用該庫提供有價值的指導，並且可以作為您自己實施的起點。 --- 第四課：不要追求完美 ---------- 當開始使用 Rust 時，人們很容易會努力爭取最慣用和最高效能的程式碼。然而，大多數時候，以簡單性和生產力的名義進行權衡是可以的。 ![做完比求完美強](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fylenuk9pzgynzsvbwpf.png) 例如，使用`clone()`或`Arc`在執行緒之間共享資料可能不是最節省記憶體的方法，但它可以極大地簡化程式碼並提高可讀性。只要您意識到效能影響並做出明智的決策，**優先考慮簡單性是完全可以接受的。** 請記住，過早的優化是萬惡之源。首先專注於編寫乾淨、可維護的程式碼，然後在必要時進行最佳化。**不要嘗試進行微優化（**除非您確實需要）。 Rust 強大的類型系統和所有權模型已經為編寫高效、安全的程式碼提供了堅實的基礎。當需要優化效能時，請專注於關鍵路徑並使用`perf`和`flamegraph`等分析工具來辨識程式碼中的真正效能熱點。對於工具和技術的全面概述，我可以推薦[The Rust Performance Book](https://nnethercote.github.io/perf-book/introduction.html) 。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eyudtxuaeswhtc9porfc.png) **¹**這適用於您的整個創業歷程，包括籌款 --- 第五課：錯誤畢竟是好事 ----------- Rust 的錯誤處理非常優雅，具有`Result`類型和`?`運算符鼓勵明確的錯誤處理和傳播。然而，這不僅涉及處理錯誤；還涉及處理錯誤。它還涉及提供乾淨且資訊豐富的錯誤訊息以及可追蹤的堆疊追蹤。無需大量樣板在錯誤類型之間進行轉換。像`thiserror` ， `anyhow`或`snafu`函式庫對於這個目的來說是無價的。我們決定使用`thiserror` ，它可以簡化帶有資訊性錯誤訊息的自訂錯誤類型的建立。在大多數 Rust 用例中，您不太關心底層錯誤類型堆疊跟踪，而是更喜歡將其直接映射到域中的訊息類型錯誤。 ``` #[derive(Debug, Error)] pub enum WebhookError { #[error("error comparing signatures")] SignatureComparisonFailed, #[error("error parsing timestamp")] BadHeader(#[from] ParseIntError), #[error("error comparing timestamps - over tolerance.")] BadTimestamp(i64), #[error("error parsing event object")] ParseFailed(#[from] serde_json::Error), #[error("error communicating with client : {0}")] ClientError(String), } ``` 投入時間製作清晰且資訊豐富的錯誤訊息可以大大增強開發人員的體驗並簡化偵錯。這是一個小小的努力，卻可以產生顯著的長期效益。然而，有時，甚至在日誌位於使用者範圍之外的 SaaS 用例中，保留完整的錯誤鏈以及沿途可能有額外的上下文是很有意義的。我們目前正在試驗[`error-stack`](https://github.com/hashintel/hash/tree/main/libs/error-stack) ，這是一個由 hash.dev 維護的庫，它允許附加額外的上下文並將其保留在整個錯誤樹中。它作為`thiserror`之上的一層效果很好。它提供了一個慣用的 API，實際上將錯誤類型包裝在報告資料結構中，該資料結構保留了所有錯誤、原因和您可能加入的任何其他上下文的堆疊，在發生故障時提供大量資訊。我們遇到了一些問題，但這篇文章已經太長了，更多內容將在後續文章中介紹！總結 --- 使用 Rust 建立我們的 SaaS 一直是（而且仍然是）一段旅程。一開始是一段漫長而充滿挑戰的旅程，但也是一段非常有趣且有益的旅程。 - **使用 Scala 可以更快地建立我們的產品嗎？** 當然。 - **會有那麼有效嗎？** 或許。 - **我們還會像今天一樣充滿熱情和興奮嗎？** 可能不會。 Rust 促使我們以不同的方式思考我們的程式碼，接受新的範式，並不斷努力改進。 **當然，Rust 也有其粗糙的一面**。學習曲線可能很陡峭，而且生態系統仍在不斷發展。但這是令人興奮的一部分。除了技術面之外， **Rust 社群也絕對令人高興**。熱情的氛圍、樂於助人的意願以及對語言的共同熱情使這趟旅程變得更加愉快。 ![](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExazJlZGppYjY5M3RwOG5sdHdudW94dzk4eXczZm5iMmN0YWUzdG10NyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/sn39fEb1LcHPGQ4b6h/giphy.gif) 因此，如果您有時間和意願去探索一個新的、蓬勃發展的生態系統，如果您願意接受挑戰並從中學習，如果您需要表現、安全性和並發性，那麼**Rust 可能只是成為適合您的語言**。對我們來說，我們很高興能夠繼續使用 Rust 建立我們的 SaaS，不斷學習和成長，並看看這段旅程將帶我們走向何方。請繼續關注更深入的帖子，或在第一條評論中投票選出我們下一步應該做的事情。如果您喜歡這篇文章並發現它有幫助，請不要忘記給[我們的儲存庫](https://github.com/meteroid-oss/meteroid)一顆星！您的支持對我們來說意味著整個世界。 https://github.com/meteroid-oss/meteroid ⭐️ 流星星 ⭐️ 下次見，祝您編碼愉快！ --- 原文出處：https://dev.to/meteroid/5-lessons-learned-building-our-saas-with-rust-1doj

0個讚 0留言 45瀏覽

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

精通程式碼審查：審閱者和 PR 創作者指南

程式碼審查對於程式碼品質、團隊協作以及確保在開發過程中遵循最佳實踐至關重要。不過，到目前為止還沒有任何訊息，有效的程式碼審查需要的不僅僅是尋找錯誤或語法錯誤。讓我們從審查者和拉取請求建立者的角度來看看進行程式碼審查的最佳實踐。對於審稿人🔎 ------ 1. **具有建設性**：以建設性和尊重的方式提供回饋。專注於改進程式碼而不是批評開發人員。有禮貌總是好的 xP 2. **了解背景**：花時間了解目的和要求。這將幫助您提供更相關的回饋。 3. **審查程式碼，而不是人**：請記住，程式碼審查是為了改進程式碼，而不是攻擊開發人員。 4. **具體**：提供具體的意見和建議。避免可能使開發人員感到困惑的模糊或籠統的回饋（我認為這是最重要的回饋之一）。 5. **確定問題的優先順序**：確定需要立即關注的關鍵問題和未來可以解決的非關鍵問題。這將幫助開發人員專注於最重要的事情。 6. **提供替代方案**：不要僅僅指出問題，而是提出替代解決方案或改進建議。 7. **考慮更大的前景**：考慮更改對整個系統的影響。在審查期間考慮可擴展性、可維護性和性能方面。 8. **記住截止日期**：及時審查程式碼以避免延誤開發過程。如果您需要更多時間，請將其傳達給拉取請求建立者。 9. **避免「拉取請求友誼」** ：不要僅僅因為建立者是朋友或因為您對他們的交付有信心而批准拉取請求。每個拉取請求都應該根據程式碼的品質及其對專案標準和最佳實踐的遵守情況進行客觀審查。這確保了公平性並維護了程式碼庫的完整性。 *享受它？如果是的話，別忘了給個*❤️\_。然後我會繼續創作更多這樣的內容\_ 對於拉取請求建立者💻 ---------- 1. **準備程式碼**：在提交拉取請求之前，請確保您的程式碼乾淨、結構良好，並遵循專案的編碼約定。這將使審核過程更加順利。 2. **利用儲存庫功能**：將拉取請求分配給自己，使用清晰且描述性的標題並套用標籤。維護一個有組織的儲存庫是簡單的，更容易將來的過濾和搜尋，並培養一個健康的程式碼庫來使用。 3. **提供上下文**：包括對所做更改和正在解決的問題的清晰描述。這將有助於審閱者理解程式碼的目的，也使未來的調查變得更容易。 4. **對回饋持開放態度**：樂於接受回饋並願意做出改變。請記住，程式碼審查是（應該是）提高程式碼品質的機會。 5. **參與討論**：回應審稿人的評論和問題。 6. **從評審中學習**：使用程式碼評審期間收到的回饋來提高您的編碼技能。藉此機會向更有經驗的開發人員學習。 7. **處理所有意見**：處理審稿人提出的所有意見和建議。如果您不同意某個評論，請提供明確的解釋並與審查者討論。 8. **測試您的變更**：在將拉取要求標記為準備合併之前，請確保您的變更已徹底測試並且不會引入任何回歸。 9. **保持簡潔和特定於上下文**：專注於在上下文內交付並避免修改範圍之外的文件。較小的拉取請求更容易審查，並減少拉取請求批准的總時間。 10. **心存感激**：對審稿人提供回饋所花費的時間和精力表示感謝。一句簡單的感謝就足夠了，並創造了積極的程式碼審查文化。 ❤️ [請參閱我的其他文章](https://frontend-pattern.vercel.app/articles)和[我的開源專案](https://github.com/tassioFront/frontend-pattern) --- 原文出處：https://dev.to/tassiofront/mastering-code-review-a-guide-for-reviewers-and-pr-creators-ac6

0個讚 0留言 45瀏覽

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

基本演算法介紹

算法是計算的命脈。它們是電腦解決問題、分析資料和做出決策所遵循的逐步指令。就像食譜一樣，它們將複雜的任務分解為易於管理的程式。理解這些基本演算法是掌握電腦科學和程式設計的基石。 > [什麼是演算法](https://github.com/m-mdy-m/algorithms-data-structures/tree/main/1.IntroductionToAlgorithmsAndProblemSolving) 1. 搜尋演算法： --------- ### 什麼是搜尋？搜尋是在資料集合中定位特定元素或專案的基本過程。此資料集合可以採用各種形式，例如陣列、列表、樹或其他結構化表示。搜尋的主要目標是確定資料中是否存在所需元素，如果存在，則辨識其精確位置或檢索它。它在各種計算任務和現實應用中發揮重要作用，包括資訊檢索、資料分析、決策過程等。 ### 介紹搜尋演算法所有搜尋演算法都使用搜尋關鍵字來繼續執行該過程。搜尋演算法預計會返回成功或失敗狀態，通常以布林 true/false 表示。可以使用不同的搜尋演算法，其效能和效率取決於資料及其使用方式。線性搜尋演算法被認為是所有搜尋演算法中最基本的。最好的也許是二分搜尋。還有其他搜尋演算法，例如深度優先搜尋演算法、廣度優先演算法等。搜尋演算法中使用的符號是 O(n)，其中 n 是完成的比較次數。它給出了演算法在給定條件下所需執行時間的漸近上限的概念。搜尋演算法中的搜尋案例可以分為最佳情況、平均情況和最壞情況。在某些演算法中，所有三種情況可能漸近相同，而在其他一些演算法中可能存在很大差異。搜尋演算法的平均行為有助於確定演算法的有用性。 > 摘要：搜尋演算法是用於在資料集合中定位特定資料的逐步過程。它被認為是計算中的基本過程。在電腦科學中，搜尋資料時，快速應用程式和較慢應用程式之間的差異通常在於使用正確的搜尋演算法。 ### 術語： - **目標元素：**這就是你要尋找的寶藏！這是您想要在集合中尋找的特定資料。想像搜尋電話簿 - 目標元素是特定人的電話號碼。 - **搜尋空間：**將其視為可能隱藏針的大海撈針。它代表您正在搜尋的整個資料集合。這可以是數字陣列、名稱列表或更複雜的資料結構。 - **複雜度：**這是指搜尋演算法所需的工作量。這就像衡量圖書館員需要做多少工作才能找到你的書。複雜性通常以時間（找到目標需要多長時間）和空間（演算法需要多少額外記憶體）來衡量。 - **確定性與非確定性：**搜尋演算法可以像遵循食譜（確定性）或進行有根據的猜測（非確定性）。確定性演算法始終遵循相同的清晰步驟，例如二分搜尋，它將搜尋空間一分為二。非確定性演算法（例如線性搜尋）可能需要在最壞的情況下檢查整個集合。 ### 實際應用 - **資訊檢索：**想像在網路上搜尋特定的食譜。像Google這樣的搜尋引擎利用複雜的搜尋演算法來篩選大量資料集，為網站和內容建立索引。當您輸入查詢時，這些演算法會辨識與您的搜尋字詞最相關的網頁，並在幾分之一秒內提供您要尋找的資訊。 - **資料庫系統：**資料庫儲存大量訊息，從客戶記錄到金融交易。搜尋演算法是高效資料檢索的支柱。當您在資料庫管理系統中提交查詢時，搜尋演算法會快速找到符合您條件的特定記錄，從而節省您的時間和精力。 - **電子商務：**線上購物因高效搜尋而蓬勃發展。電子商務平台使用搜尋演算法來幫助您找到完美的產品。它們允許您根據價格、品牌或顏色等各種標準進行過濾和搜尋。在幕後，搜尋演算法為這些過濾器提供支持，精確定位滿足您偏好的產品，使您的購物體驗順暢高效。 - **網路：**網路是一個由互連設備組成的複雜網路。搜尋演算法在有效路由資料包方面發揮著至關重要的作用。它們可協助確定訊息在網路上傳輸的最佳路徑，確保您的視訊通話或線上遊戲順利運作。 - **人工智慧（AI）：**人工智慧正在為許多領域帶來革命性的變化。搜尋演算法是人工智慧應用的基本工具。它們使人工智慧系統能夠解決問題、做出決策，甚至玩國際象棋等遊戲。透過有效地搜尋大量資料並辨識模式，搜尋演算法有助於人工智慧背後的智慧。 - **模式辨識：**模式辨識允許電腦辨識和理解資料中的模式，例如圖像、語音或手寫。搜尋演算法對於模式辨識很有幫助。它們可協助電腦將新資料與現有模式進行匹配，從而實現照片中的臉部辨識或虛擬助理的語音辨識等應用。 ### 演算法類型： ![](https://www.gatevidyalay.com/wp-content/uploads/2018/07/Searching-Algorithms-Approaches-to-Searching.png) **1. `Linear Search` ：** 想像一下，在一個雜亂無章的書架中尋找一本特定的書。線性搜尋模仿了這種方法。這是一種簡單的方法，可以**逐項**檢查集合中的每個專案，直到找到目標元素（您想要的書）。 **它的工作原理如下：** 1. 搜尋從集合中的第一項開始。 2. 此演算法將目標元素與目前專案進行比較。 ``` * If they match, the search is successful, and the algorithm returns the location (index) of the target element. ``` ``` * If they don't match, the algorithm moves on to the next item in the collection. ``` 3. 這種比較和移動的過程將持續下去，直到找到目標元素或耗盡整個集合。 **例子：** 讓我們在未排序清單中搜尋值「25」：\[10, 4, 12, 25, 18, 7\]。 - 搜尋從第一個元素 (10) 開始。由於 10 不是 25，我們繼續。 - 我們將目標 (25) 與下一個元素 (4) 進行比較。沒有匹配項，所以我們繼續。 - 重複此過程，直到到達索引 3 處的元素「25」。 **優勢：** - 易於理解和實施，使其成為初學者的好選擇。 - 適用於未排序的資料，在各種情況下提供靈活性。 **弱點：** - 對於大型資料集來說速度很慢。隨著集合大小的增加，搜尋時間也會成比例增加，導致海量資料集效率低。 > 怎麼運作的： ![](https://media.geeksforgeeks.org/wp-content/cdn-uploads/Linear-Search.png) **2. `Binary Search` ：** 二分搜尋在**排序資料**上蓬勃發展。想像一下在一本精心組織的字典中搜尋特定單字。在這種情況下，二分搜尋比線性搜尋快得多。它透過重複地將已排序的集合分成兩半來進行操作。策略如下： 1. 此演算法首先將目標元素與集合的中間元素進行比較。 2. 如果目標元素等於中間元素，則搜尋成功，演算法會傳回中間元素的索引。 3. 如果目標元素**小於**中間元素，則在剩餘集合的**左半部**（不包括中間元素）繼續搜尋。 4. 如果目標元素**大於**中間元素，則在剩餘集合的**右半部**繼續搜尋。 5. 在集合的縮小範圍的一半上重複步驟 1-4，直到找到目標元素或搜尋空間減少到單一元素（與目標不符）。 **例子：** 讓我們在排序清單中搜尋值「18」：\[4, 7, 10, 12, 18, 25\]。 - 中間的元素是 12。 - 現在，右半部的中間元素是18。目標元素位於索引 4 處。 **優勢：** - 對於大型排序資料集，比線性搜尋快得多。透過在每次比較時消除一半的剩餘元素，二分搜尋可以快速縮小搜尋空間。 **弱點：** - 要求預先對資料進行排序，如果資料尚未組織，則加入額外的步驟。 - 不適合未排序的資料。二分搜尋策略依賴資料的排序性質，以在每次迭代期間有效地消除一半的可能性。 > 怎麼運作的： ![](https://assets.digitalocean.com/articles/alligator/js/linear-vs-binary-search/binary-search.png) --- 2. 排序演算法： --------- ### 什麼是排序？排序是指根據元素上的比較運算子對給定陣列或元素列表進行重新排列。比較運算子用於決定對應資料結構中元素的新順序。排序意味著將所有元素按升序或降序重新排序。 ### 介紹在計算機科學中，排序演算法是將列表中的元素依序排列的演算法。最常用的順序是數字順序和字典順序，以及升序或降序。高效排序對於優化需要輸入資料位於排序清單中的其他演算法（例如搜尋和合併演算法）的效率非常重要。排序對於規範化資料和產生人類可讀的輸出通常也很有用。形式上，任何排序演算法的輸出必須滿足兩個條件：輸出是單調順序的（根據所需的順序，每個元素不小於/大於前一個元素）。 1. 輸出是輸入的排列（重新排序，但保留所有原始元素）。 2. 為了獲得最佳效率，輸入資料應儲存在允許隨機存取的資料結構中，而不是僅允許順序存取的資料結構中。 > 摘要：排序演算法是一組指令，它將陣列或列表作為輸入並將專案排列成特定的順序。排序最常見的是數字或字母（或字典）順序，並且可以按升序（AZ，0-9）或降序（ZA，9-0）。 ### 術語： - **就地分類：**想像一下重新整理抽屜裡的衣服而不把所有東西都拿出來。就地排序的工作原理類似。這些演算法透過修改現有清單本身內元素的順序來對資料進行排序，從而需要最少的額外空間。例如選擇排序、冒泡排序和插入排序。 - **內部排序：**這是指完全在電腦主記憶體 (RAM) 內執行的排序演算法。整個資料集可以一次載入到記憶體中，使其適合中小型資料集。堆排序、冒泡排序和合併排序等內部排序演算法通常用於記憶體資料操作。 - **外部排序：**當處理超出主存容量的海量資料集時，外部排序就發揮作用。這些演算法將大型資料集分解為較小的區塊，在磁碟（輔助儲存）上對它們進行排序，然後按特定順序將排序後的區塊合併在一起。合併排序是外部排序演算法的一個流行範例。 - **穩定排序：**想像一下按標題對書籍清單進行排序，但您也希望保留具有相同標題的書籍最初列出的順序。穩定的排序演算法在排序過程中保持具有相等鍵（值）的元素的相對順序。歸併排序和插入排序是穩定排序演算法的範例。 - **不穩定排序：**並非所有排序演算法都優先考慮順序保留。不穩定的排序演算法僅專注於實現所需的排序順序（例如，升序或降序），並且可能會打亂具有相同鍵的元素的相對位置。快速排序和堆排序是不穩定排序演算法的例子。 ### 排序演算法的特徵： - **時間複雜度：**這是指排序演算法完成其工作所需的時間（以步驟或比較而言）。我們通常在三種情況下分析時間複雜度： ``` * **Worst-case:** This represents the maximum amount of time the algorithm could take for a particular data size, considering the worst possible input scenario. ``` ``` * **Average-case:** This reflects the average time the algorithm takes across various random inputs of the same size. ``` ``` * **Best-case:** This represents the minimum amount of time the algorithm could take for a specific data size, considering the most favorable input scenario (e.g., data already partially sorted). ``` - **空間複雜度：**這是指排序演算法在原始資料所佔用的空間之外執行其操作所需的額外記憶體量。就地排序演算法透過在現有記憶體分配中操作資料來使用最少的額外空間，而某些演算法在排序過程中可能需要額外的臨時儲存。 - **穩定性：**此屬性決定排序演算法是否保留排序輸出中具有相等值的元素的原始順序。穩定的排序演算法維護這些元素的相對位置，這在特定應用中可能很重要。例如，如果您按姓名對客戶記錄清單進行排序，並且兩個客戶具有相同的姓名，您可能需要穩定的排序來維護它們最初列出的順序（例如，按帳戶建立日期）。 - **就地排序：**如前所述，就地排序演算法非常節省內存，因為它們透過修改原始列表本身來對資料進行排序，從而需要最少的額外空間。當處理大型資料集或記憶體有限時，這可能是有利的。 - **適應性：**一些排序演算法可以適應它們正在排序的資料的特徵。自適應排序演算法可以利用資料中預先存在的順序來提高其效能。例如，如果資料已經部分排序，自適應演算法可能會調整其方法以利用該部分順序並實現更快的排序。 ### 排序演算法的應用： - **搜尋演算法：**想像在電話簿中搜尋特定聯絡人。排序演算法是二分搜尋等高效搜尋演算法的無聲夥伴。透過確保電話簿條目按字母順序組織（排序），二分搜尋可以比透過未排序清單的線性搜尋更快找到您的聯絡人。 - **資料管理：**資料是現代計算的命脈，但有效管理資料需要組織。排序演算法在資料管理中起著至關重要的作用。當您按名稱、日期或大小對文件清單進行排序時，您可以更輕鬆地找到所需的特定文件。此外，排序的資料有助於更快地檢索和分析，從而節省您的時間和精力。 - **資料庫最佳化：**資料庫儲存大量訊息，從客戶記錄到金融交易。排序演算法顯著提高了資料庫查詢的效能。當您在電子商務資料庫中搜尋特定產品時，資料庫可能會根據您的搜尋條件（例如價格）對產品清單進行排序，以快速提供最相關的結果。 - **機器學習：**機器學習演算法從資料中學習以進行預測或分類。然而，需要準備好資料才能進行有效的學習。排序演算法通常用於資料預處理步驟，以在將資料輸入機器學習模型之前組織和建構資料。這可以顯著提高學習過程的準確性和效率。 - **資料分析：**資料分析就是從資訊中提取見解。排序演算法在這個過程中起著至關重要的作用。透過按各種屬性（例如日期、位置、客戶人口統計）對資料進行排序，您可以辨識在未排序的資料集中可能不易明顯的模式、趨勢和異常值。這使得資料分析師能夠更深入地了解資料，為金融、行銷和科學研究等各個領域的更好決策提供資訊。 - **作業系統：**作業系統管理電腦的資源。排序演算法適用於各種作業系統任務。例如，排序演算法可用於確定 CPU 任務的優先權、有效管理記憶體分配或以目錄結構組織文件，從而確保電腦系統的平穩運作。 > 這些只是排序演算法如何滲透到我們日常生活中的幾個例子。 ### 簡單解釋：想像一下，你有一個雜亂的書架，裡面擺滿了各種主題的書。您想要按類型來組織它們（對它們進行排序）。以下是應用於此場景的排序演算法背後的主要概念和邏輯： 1. **比較：**您一次拿兩本書，並根據它們的類型進行比較（就像比較清單中的兩個元素）。 2. **交換：**如果類型不符合所需的順序（例如，歷史書放在小說之前），則交換它們在書架上的位置（就像重新排列清單中的元素一樣）。 3. **重複：**您繼續一次比較和交換兩本書，直到所有書籍按類型按所需順序排列（清單中的所有元素都根據所選標準排序）。 ### 排序演算法:: **1. 冒泡排序** **概念：**冒泡排序是一種簡單的排序演算法，它迭代列表，反覆比較相鄰元素，如果順序錯誤則交換它們。想像氣泡上升到液體表面 - 具有較大值的元素每次通過都會「冒泡」到清單中。這個過程一直持續到不需要交換為止，這表示清單已排序。 **解釋：** 想像一下將一堆亂七八糟的玩具進行分類。冒泡排序的工作原理如下： 1. **進行多次遍歷：**您多次瀏覽玩具清單。 2. **比較鄰居：**在每一遍中，您將每個玩具與其鄰居進行比較。如果第一個玩具更大（或排序術語中的“更高”），則交換它們的位置。 3. **泡泡上升：**每次交換時，較大的玩具（如泡泡）往往會移向清單的末端。 4. **繼續直到沒有交換：**您在整個清單中重複這些比較和交換，直到完成一次完整的傳遞而無需交換。這表示列表已排序。 **時間複雜度：**不幸的是，在最壞情況和平均情況下，冒泡排序的時間複雜度都是 O(n^2)。這意味著排序時間隨著元素數量 (n) 的二次方增加。對於大型資料集，冒泡排序變得非常低效。 **2.選擇排序** **概念：**選擇排序也遍歷列表，但它不是直接比較相鄰元素，而是專注於尋找未排序部分中的最小（或降序最大）元素。然後，該元素與未排序部分中的第一個元素交換，有效地將其放置在正確的排序位置。重複此過程，在每次通過時逐漸將未排序部分減少一個位置。 **解釋：** 想像一下根據身高安排學生拍照。選擇排序的工作原理如下： 1. **尋找最矮的（或最高的）：**在每次遍歷中，您搜尋該行的整個未排序部分以尋找最矮的學生（或按降序排列最高的學生）。 2. **與第一個學生交換：**一旦找到最矮的學生，就可以與未排序部分中的第一個學生交換他們的位置，有效地將他們放在行開頭的正確排序位置（最矮的在前面）。 3. **重複並減少未排序部分：**繼續此過程，將交換的元素視為已排序部分的開頭，並在剩餘的未排序部分中搜尋最小元素。 **時間複雜度：**與冒泡排序類似，選擇排序在平均情況和最壞情況下的時間複雜度均為 O(n^2)。這意味著排序時間隨元素數量呈二次方增長，從而導致大型資料集效率低下。 **3.插入排序** **概念：**插入排序的工作原理是維護一個已排序的子列表，並迭代地將未排序部分中的元素插入到子列表中的正確位置。想像一下用塊建造一座塔，但您只能將它們一一加入，並且希望保持塔按高度排序。插入排序就像策略性地將每個新區塊放置在不斷增長的排序塔中的正確位置。 **解釋：** 想像一下按高度對書架上的書籍進行排序。插入排序的工作原理如下： 1. **從單一排序元素開始：**從一個空的排序子清單開始（就像書架上只有一本書）。 2. **從未排序的部分中取出一個元素：**您從未排序的堆中挑選一本書。 3. **移動與插入：**您可以將新書與已排序子清單中的每本書進行比較，從右端開始。如果新書較短（或按降序排列較高），則可以移動現有書籍以騰出空間，並將新書插入到正確的位置以保持排序順序。 4. **重複並增長已排序的子清單：**繼續此過程，從未排序的堆中獲取元素，將它們與已排序的子列表進行比較，並將它們插入到正確的已排序位置。這會逐漸增長排序的子列表，直到合併所有元素。 **時間複雜度：**插入排序適用於部分排序的資料。在一般情況下，對於已經排序的資料，它的時間複雜度為 O(n)，因此非常有效率。然而，對於完全隨機的資料（最壞情況），它可以回落到 O(n^2)，類似於冒泡排序和選擇排序。 **4. 歸併排序** **概念：**合併排序採用巧妙的「分而治之」策略來有效地對清單進行排序。它將問題分解為更小、更易於管理的子問題，然後按排序順序將解決方案重新組合在一起。 **解釋：** 想像一下，你有一支龐大的軍隊，需要按照身高來組織。歸併排序的工作原理如下： 1. **劃分：**將軍隊（列表）分成越來越小的組（子列表），直到每組只有一名士兵（元素）。這就像將一個大問題分解成更小、更容易解決的部分。 2. **征服：**由於現在每個子清單只有一名士兵（元素），因此它已被視為「已排序」。這是分而治之方法的基本情況。 3. **合併：**現在到了合併部分。您可以策略性地將已排序的子清單重新組合在一起，但以特定的方式。您比較每個子清單中的第一個士兵（元素），並將較短的士兵（較小的元素）放入最終的排序清單中。您不斷重複這種比較和放置，直到兩個子清單中的所有士兵（元素）都合併到最終的排序清單中。 4. **重複：**您繼續遞歸地應用這種分而治之的策略，直到整個原始軍隊（列表）從最短到最高（最小到最大）排序。 **時間複雜度：**合併排序的美妙之處在於它的時間複雜度。在平均情況和最壞情況下，其複雜度為 O(n log n)。這意味著對清單進行排序所需的時間隨著元素數量(n) 呈對數增長，這比冒泡排序、選擇排序或插入排序（其複雜度為O(n^2)）要快得多。 **5. 快速排序** **概念：**快速排序是另一種分而治之的排序演算法，但採用不同的方法。它依賴一個被稱為“樞軸”的策略性選擇元素來對列表進行分區並解決排序問題。 **解釋：** 想像一下，你的書架上堆滿了雜亂的書。快速排序的工作原理如下： 1. **選擇樞軸：**您從書架中選擇一本書（樞軸）。可以透過不同的方式選擇該主元，但通常它是清單中的第一個或最後一個元素。 2. **分區：**依樞軸重新排列書架上的書。類型按字母順序排列在樞軸類型之前的書籍位於一側，類型按字母順序排列在樞軸類型之後的書籍位於另一側。樞軸本身尚未放置。這種劃分有效地將較大的排序問題劃分為兩個較小的子問題。 3. **遞歸地征服：**現在，您將兩個子清單（成堆的書）中的每一個都視為單獨的排序問題。您可以遞歸地將快速排序策略套用到這些子列表，為每個子列表選擇一個新的主元並相應地對它們進行分割。 4. **合併：**兩個子清單排序後，將原始樞軸元素放置在兩個子清單之間正確的排序位置。現在，整個書架（清單）按字母順序排序。 **時間複雜度：**平均而言，快速排序的時間複雜度為 O(n log n)，這使得它對大型資料集非常有效率。然而，其性能可能會根據所選樞軸元件的不同而有所不同。選擇不當的主元（例如，總是排序或部分排序清單中的第一個或最後一個元素）可能會導致O(n^2) 的最壞情況，類似於冒泡排序、選擇排序和插入排序。 --- 3.樹的遍歷演算法： ---------- ### 什麼是樹遍歷？樹遍歷是指探索樹資料結構的系統方法。這就像有一個路線圖可以精確地存取鄰裡（樹）中的每個房屋（節點）一次，確保您不會迷路或重新存取同一棟房屋。與可以直接按位置存取元素的簡單資料結構不同，樹需要特定的演算法來導航節點之間的連接。這些遍歷演算法定義了存取每個節點的順序，可讓您對它們包含的資料執行操作，例如搜尋特定值、新增節點或刪除現有節點。遍歷技術有多種，每種技術都有其優點和應用，這使得樹遍歷成為電腦科學中的基本概念。 ### 介紹樹遍歷，也稱為樹搜尋，是在僅包含樹邊的圖上執行的演算法，該演算法僅存取每個節點一次。此類別中的演算法僅在存取每個節點的順序上有所不同。遍歷樹的兩種經典方法是廣度優先搜尋（bfs），即在進入下一層之前存取同一級別或距根部距離的節點；深度優先搜尋，其中分支中的所有節點或從根到葉的一組路徑在傳遞到下一個分支之前都會被存取。還有其他方法，它們使用啟發式或隨機採樣在樹中移動來加速該過程。 #### 概括： - **目的：**系統探索樹資料結構，確保每個節點僅被存取一次。 - **優點：**支援搜尋特定資料、插入新節點或刪除現有節點等操作。 - **主要區別：**演算法分為兩種主要方法： ``` * **Breadth-First Search (BFS):** Visits nodes level by level, starting from the root and progressing outward. ``` ``` * **Depth-First Search (DFS):** Explores one branch (path) as far as possible before backtracking and exploring another branch. Further variations of DFS exist for specific applications. ``` - **其他技術：**其他方法利用啟發式或隨機取樣來加快遍歷速度。 ### 術語： **1. 樹：**一種分層資料結構，模擬顛倒的樹，其節點（資料點）透過邊（連結）連接。節點可以有零個或多個子節點，形成分支，並最終導致底部的葉節點（沒有子節點的節點）。 **2. 節點：**樹的基本建構塊，包含資料和對其子節點的潛在引用。想像一下附近的一棟房子——它保存資訊（資料）並透過道路（邊緣）連接到其他房子（子節點）。 **3.根節點：**樹中最頂層的節點，作為遍歷演算法的起點。將其視為附近的主屋，從這裡開始探索。 **4.葉子節點：**沒有子節點的節點，代表樹中分支的「末端」。想像位於社區邊緣的房屋，沒有進一步的聯繫。 **5.邊：**樹中兩個節點之間的連接，描述它們之間的關係。想想連接附近房屋的道路。 **6. 遍歷：**僅存取樹中每個節點一次的系統過程。這就像探索整個社區，確保您參觀每棟房屋而不會錯過任何一棟或重新參觀同一棟房屋。 **7.廣度優先搜尋（BFS）：**一種從根開始向外逐階存取節點的遍歷方法。想像一下，透過造訪第一條街道（層）上的所有房屋，然後再前往下一條街道（層）上的房屋來探索社區。 **8.深度優先搜尋（DFS）：**一種遍歷方法，在回溯和探索另一個分支之前，先沿著一個分支（路徑）探索盡可能遠的地方。想像一下，沿著一條路（分支）探索附近區域，直到到達死胡同（葉節點），然後回溯並嘗試另一條路。 DFS 的常見變體包括前序、中序和後序，每種形式都有存取分支內節點的特定順序。 ### 樹遍歷演算法的特點： **1. 只存取每個節點一次：** - 樹遍歷的核心原則是保證樹中的每個節點都被恰好存取一次。這可以防止冗餘處理並確保對樹結構的完整探索。 **2. 探訪順序：** - 雖然每個節點僅被存取一次，但樹遍歷演算法的定義特徵在於它們存取節點的順序。不同的演算法會優先考慮以特定順序探索節點，從而產生不同的遍歷模式。 **3. 遞歸與迭代實作：** - 樹遍歷演算法可以遞歸或迭代地實現。遞歸方法涉及定義在子樹上呼叫自身的函數，模仿樹的層次結構性質。迭代方法利用迴圈和堆疊來管理遍歷過程。 **4.時間與空間複雜度：** - 與任何演算法一樣，樹遍歷方法具有相關的時間和空間複雜度。時間複雜度是指基於樹中節點數 (n) 執行演算法所需的時間量。常見的複雜度包括 O(n)（線性）和 O(n log n)（對數），BFS 和 DFS 變體根據實現的不同具有不同的複雜度。空間複雜度反映了演算法執行所需的額外記憶體量，通常取決於用於遍歷的資料結構（例如堆疊）。 **5.特定於應用的選擇：** - 樹遍歷演算法的選擇在很大程度上取決於手頭上的具體任務。例如，BFS 可能更適合尋找樹中兩個節點之間的最短路徑，而具有變體的 DFS 可用於搜尋特定資料或探索所有可能的路徑。 **6. 不可修改：** - 一般來說，樹遍歷演算法旨在探索現有的樹結構，而不修改樹本身。它們存取節點，對它們包含的資料執行操作，但通常不會更改樹中的連接或資料。 ### 樹遍歷演算法的應用： **1. 檔案系統導航：** - 作業系統使用樹遍歷演算法來導航電腦上的目錄結構。將您的檔案系統想像成一棵樹，其中資料夾作為節點，子資料夾和檔案作為子節點。廣度優先搜尋 (BFS) 可用於列出目錄及其子目錄中的所有文件，而深度優先搜尋 (DFS) 可用於在層次結構中定位特定文件。 **2. 網頁抓取：** - 像 Google 這樣的搜尋引擎利用 BFS 或 DFS 變體來抓取網路。他們從種子 URL（根節點）開始，有系統地探索連結的網頁（子節點）。 BFS 確保在進入更深層次之前探索特定層級（網站）的所有頁面，而 DFS 可能會在回溯和探索其他網站之前更深入地研究特定網站。 **3.人工智慧（AI）：** - 人工智慧中的遊戲演算法通常使用樹遍歷來探索可能的動作及其結果。將西洋棋遊戲想像成一棵樹，當前棋盤狀態作為根節點，潛在的移動作為通往新棋盤狀態（子節點）的分支。具有修剪技術的深度優先搜尋可用於評估潛在的移動並確定最有希望的策略。 **4.社會網絡分析：** - 社群媒體平台利用樹遍歷來推薦聯繫或探索朋友網路。將您的個人資料想像為一個節點，將朋友作為子節點。遍歷演算法可用於建議基於共同朋友（樹中的共同祖先）的連接或探索網路以了解資訊流或影響力。 **5.電腦圖形學：** - 光線追蹤是一種用於在 3D 圖形中實現逼真光照效果的技術，通常採用樹遍歷演算法。虛擬場景可以表示為一棵樹，其中物件作為節點，它們的空間關係作為邊緣。遍歷有助於確定光線與哪些物件交互，從而建立逼真的陰影和反射。 **6. 網路路由：** - 電腦網路中的路由協定使用樹遍歷的變體來找到資料包到達目的地的最佳路徑。將網路想像成一棵樹，路由器作為節點，連接作為邊緣。遍歷演算法有助於確定資料在網路中不同點之間傳輸的最有效路徑。 ### 簡單解釋：想像一下，您是一名送貨員，您有一堆包裹要在附近送貨。附近的房屋透過道路連接起來，形成樹狀結構。 - **房屋是節點：**每個房屋代表樹中的一個節點，包含地址（資料）等資訊以及可能由道路（邊）連接的相鄰房屋（子節點）的地址。 - **您的遞送路線就是遍歷：**樹遍歷演算法定義您存取每個房屋（節點）以遞送包裹（對資料執行操作）的順序。 **您可以透過兩種主要方式進行交付，這對應於兩種常見的樹遍歷方法：** **1. 廣度優先搜尋（BFS）：像一個不斷擴大的圓圈一樣提供：** - 您從清單中的第一個房子（根節點）開始。 - 您將包裹運送到該房屋，然後**存取同一條街道（層）上與其直接相連的所有房屋（鄰居/子節點），**然後繼續前進。 - 一旦您運送到第一條街道（層）上的所有房屋，您就會移動到下一條街道（層）並重複該過程，在前往下一層之前存取該層上的所有房屋。這就像一個不斷擴大的圓圈——您從中心（根部）開始，逐漸向外工作，確保在移動到下一個之前，您可以運送到街道（層）上的所有房屋。如果您想先優先考慮向附近區域的所有房屋送貨，這種方法很有用，也許是因為它們都在同一個街區，並且最大限度地減少行程時間很重要。 **2. 深度優先搜尋（DFS）：深入研究一條街道：** - 您從清單中的第一棟房子（根節點）開始。 - 您將包裹運送到該房屋，然後**選擇一條從該房屋引出的相連道路（分支），並沿著它一直走到終點（葉節點）** ，在原路返回之前運送到該路徑（分支）上的所有房屋。 - 一旦到達該路的盡頭（分支），您就回溯到最後一個路口（父節點）並選擇另一條路（分支）進行探索，將物品運送到該新路徑上的所有房屋，直到到達另一個死胡同（葉節點）。這就像探索迷宮一樣——你選擇一條路徑（分支）並沿著它一路走下去，運送到沿途的房屋，直到你到達死胡同（葉節點）。然後你原路返回並嘗試另一條路徑（分支），直到你到達所有房屋。如果您正在快速查找特定地址並希望在前往另一條街道（分支）之前探索整條街道（分支），則此方法可能會很有用。 ### 演算法類型： **1.廣度優先搜尋（BFS）：** - **概念：** BFS逐級存取節點，從根節點開始，逐層向外進行。想像一下探索一個家譜； BFS 將在向下移動到其子節點（下一層）之前存取所有兄弟節點（同一層級的節點）。 - **怎麼運作的：** ``` 1. Start at the root node and add it to a queue (a data structure that follows a "first-in, first-out" principle). ``` ``` 2. Remove the first node from the queue and visit it (process its data). ``` ``` 3. Add all the unvisited child nodes of the removed node to the back of the queue. ``` ``` 4. Repeat steps 2 and 3 until the queue is empty. ``` - **例子：** 考慮一棵簡單的樹： ``` A / \ B C / \ / \ D E F G ``` BFS 遍歷將依下列順序存取節點：A、B、C、D、E、F、G。 **2.深度優先搜尋（DFS）：** - **概念：** DFS 沿著一個分支（路徑）探索盡可能遠的距離，然後回溯並探索另一個分支。 DFS 還有更多變體，但這裡我們將重點放在基本方法上。 - **怎麼運作的：** ``` 1. Start at the root node. ``` ``` 2. Visit the node (process its data). ``` ``` 3. If there are any unvisited child nodes, choose one and repeat steps 2 and 3, essentially following that branch (path) until you reach a leaf node (a node with no children). ``` ``` 4. Once you reach a leaf node, backtrack to the parent node and repeat step 3, exploring another unvisited child node (if any) of the parent. ``` ``` 5. Continue backtracking and exploring until all nodes have been visited. ``` - **例子：** 使用與之前相同的樹： ``` A / \ B C / \ / \ D E F G ``` DFS 遍歷可以以各種順序存取節點，具體取決於每一步選擇的子節點。可能的順序是：A、B、D、E、C、F、G。 **主要區別：** - BFS強調逐級存取節點，確保在深入之前先進行更廣泛的探索。 - DFS 優先考慮完全探索一個分支（路徑），然後再轉向另一個分支（路徑），可能會更快到達特定節點，但不能保證逐級存取。結論： ---- 總而言之，這個基本演算法之旅為您理解基本的搜尋、排序和樹遍歷技術奠定了堅實的基礎。這些解釋使用了清晰的語言和相關的類比，使這些抽象概念更加平易近人、直觀。無論您是經驗豐富的程式設計師還是剛開始涉足電腦科學，這種理解都為建立高效且有效的程式奠定了基石。隨著您對知識的渴望與日俱增，請更深入研究！我的儲存庫充滿了各種演算法和資料結構，等待您的探索（[演算法-資料-結構](https://github.com/m-mdy-m/algorithms-data-structures)）。這是一個寶庫，您可以在這裡進行實驗、練習並鞏固您對這些基本建置模組的掌握。 **雖然某些部分仍在建設中，**反映了我自己正在進行的學習旅程（這個旅程可能需要 2-3 年才能完成！），但儲存庫正在不斷發展。冒險不止於探索！我非常重視您的反饋。在文章中遇到障礙？有建設性的批評要分享嗎？還是只是想引發一場關於演算法的對話？我的門（或者更確切地說，我的收件匣）總是開著的。在 Twitter 上聯絡： [@m\_\_mdy\_\_m](https://twitter.com/m__mdy__m)或 Telegram：@m\_mdy\_m。此外，我的 GitHub 帳戶[m-mdy-m](https://github.com/m-mdy-m)歡迎討論和貢獻。讓我們共同建立一個充滿活力的學習社區，在這裡我們分享知識並突破我們的理解界限。 --- 原文出處：https://dev.to/m__mdy__m/basic-algorithms-5bep

0個讚 0留言 46瀏覽

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

20 個免費的 API：打造您的下一個有趣專案吧！

以下是所有 Api 的連結，請告訴我您最喜歡哪一個。 1. [FIXER](https://fixer.io) - 用於當前和歷史外匯匯率的簡單且輕量級的 API。 2. [Spoonaulous](https://spoonacular.com/food-api) - 食品 api，可以存取超過 330,000 個食譜和 80,000 種食品。 3. [Mememaker](https://mememaker.github.io/api/) - Meme Api，您可以在其中獲得大量模因 4. [Gnews](https://gnews.io/) - 搜尋新聞文章並取得 json 格式的結果 5. [Unsplash](https://unsplash.com/developers) - Unsplash 免費且無限制的相片 API 6. [Dogapi](https://thedogapi.com) - 取得狗的品種、圖像和事實 7. [Jokeapi](https://jokeapi.dev) - 存取程式設計笑話、一般笑話和各種類別的笑話 8. [Restcountries](https://restcountries.com) - 檢索有關國家、人口、語言等的訊息 9. [Opentrivia](https://opentdb.com/api_config.php) - 存取不同類別和難度的問答題 10. [Pokeapi](https://pokeapi.co) - 取得有關 Pokemon 的資料，包括所有類型 11. [Catapi](https://thecatapi.com) - 存取貓的品種、圖片等 12. [Nasaapi](https://api.nasa.gov) - 探索 NASA 提供的資料，包括圖像、太空任務等 13. [Newsapi](https://newsapi.org) - 從來源存取頭條新聞和文章 14. [TVmaze](https://www.tvmaze.com/api) - 將電視資訊加入您自己的網站 15. [Opensea](https://docs.opensea.io/reference/api-overview) - 讓您使用 NFT 及其市場建立新體驗 16. [CloudConvert](https://cloudconvert.com/api/v2) - 支援 200 多種不同音訊、文件、視訊和更多格式的檔案轉換器服務 17. [Coinpaprika](https://api.coinpaprika.com) - 從加密貨幣世界獲取最新的市場資料 18. [Marvel](https://developer.marvel.com) - 存取有關 Marvel 龐大漫畫庫的訊息 19. [IPapi](https://ipapi.co/) - 為您提供有關 IP 位址的資訊的服務。 20\. [Randomdata](https://random-data-api.com) - 為您提供比 json 佔位符更好的隨機資料的服務希望您心中有個專案🧠 今天就這樣了⚡ 快樂學習🏫 --- 原文出處：https://dev.to/fazicodes/20-free-api-for-your-next-project-51d5

0個讚 0留言 56瀏覽

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

2024 年 50 大系統設計面試問題

*揭露：這篇文章包含附屬連結；如果您透過本文中提供的不同連結購買產品或服務，我可能會獲得補償。* [![面試時必須了解的 10 個系統設計概念](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfxdldzd09fwws7nve36.png)](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 朋友們大家好，如果您正在準備技術面試，那麼您必須準備系統設計問題，因為這是大多數人都遇到困難的地方。即使經驗豐富的程式設計師也很難解決常見問題，例如如何設計 WhatsApp 或 YouTube，或回答[API 閘道與負載平衡器](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)、[水平與垂直擴充](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5)之間的差異。在當今日益分散的世界中，建立強大且可擴展的系統的能力是頂級科技公司所追求的基本技能。系統設計面試已成為評估候選人解決現實挑戰、評估權衡以及設計能夠處理複雜需求的系統的能力的關鍵組成部分。之前也分享過[資料庫分片](https://medium.com/javarevisited/what-is-database-sharding-scaling-your-data-horizontally-1dc12b33193f)、[系統設計主題](https://dev.to/somadevtoo/10-must-know-system-design-concepts-for-interviews-2fii)、 [微服務架構](https://medium.com/javarevisited/10-microservices-design-principles-every-developer-should-know-44f2f69e960f)、 [系統設計演算法](https://dev.to/somadevtoo/10-distributed-data-structures-and-system-design-algorithms-for-interviews-a4j)，今天就分享一下系統設計面試題。在本文中，我精心設計了*50 多個系統設計面試問題，*以指導應徵者從基本概念到複雜的設計場景。無論您是旨在掌握要點的初學者，還是尋求提高技能的經驗豐富的工程師，這些問題不僅可以幫助您為面試做好準備，還可以提高您對系統設計和軟體架構的了解。順便說一句，如果您正在準備系統設計面試並想深入學習系統設計，那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站，它們有許多很棒的系統設計課程 [![如何回答系統設計問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd9nfio7kl57gyevndql.jpg)](https://bit.ly/3pMiO8g) PS 繼續閱讀直到最後。我有一份免費獎金給你。 --- 2024 年 50 道系統設計面試題 ------------------ 這裡列出了針對初學者和經驗豐富的開發人員的 50 個流行的系統設計面試問題，您可以解決這些問題來開始準備。在此列表中，我不僅分享了簡單、中等和困難的系統設計問題，還分享了基於概念的問題，例如 API 閘道與負載平衡器或微服務與整體式設計。您可以練習這些系統設計問題和麵試問題。 ### 基於系統設計概念的問題 1\. API網關和負載平衡器有什麼差別？ \[ [解決方案](https://javarevisited.substack.com/p/difference-between-api-gateway-and?utm_source=profile&utm_medium=reader2)\] 2\. 反向代理和正向代理有什麼不同？ [（回答）](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5) 3\. 水平縮放和垂直縮放有什麼不同？ [（回答）](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09) 4\. 微服務和單體架構有什麼差別？ [（回答）](https://dev.to/somadevtoo/difference-between-microservices-vs-monolithic-applications-for-system-design-interview-2lb5) 5\. 垂直分區和水平分區有什麼差別？ 6.什麼是速率限制器？它是如何運作的？ [（回答）](https://javarevisited.substack.com/p/what-is-rate-limiter-how-does-it?utm_source=profile&utm_medium=reader2) 7\. 單一登入 (SSO) 的工作原理是什麼？ [（回答）](https://javarevisited.substack.com/p/how-does-sso-single-sign-on-authentication?utm_source=profile&utm_medium=reader2) 8\. Apache Kafka 是如何運作的？為什麼這麼快？ [（回答）](https://javarevisited.substack.com/p/how-does-apache-kafka-works?utm_source=profile&utm_medium=reader2) 9\. Kafka、ActiveMQ 和 RabbitMQ 之間的差異？ [（回答）](https://javarevisited.substack.com/p/difference-between-kafka-rabbitmq?utm_source=profile&utm_medium=reader2) 10\. JWT、OAuth 和 SAML 之間的差異？ [（回答）](https://javarevisited.substack.com/p/difference-between-jwt-oauth-and?utm_source=profile&utm_medium=reader2) 這是來自 DesignGuru.io 的一個很好的圖表，它解釋了垂直和水平資料庫分區之間的區別 [![水平分區和垂直分區的區別](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kosgqvr5d2prlpo61tv7.png)](https://bit.ly/3pMiO8g) --- ### 𝐄𝐚𝐬𝐲 系統設計問題現在，讓我們開始討論簡單的系統設計問題。這些是常見問題，您需要設計隨處使用的小型實用程序，例如 URL 縮短器： 1\. 如何設計像TinyURL這樣的URL縮短器 \[[解決方案](https://bit.ly/3dZoQ2G)\] 2\. 如何設計像Pastebin這樣的文字儲存服務？ \[[解決方案](https://www.youtube.com/watch?v=9wAj-5IMdyU)\] 3\. 設計內容傳遞網路（CDN）？ \[[解決方案](https://bit.ly/3dZoQ2G)\] 4\. 設計停車庫【[解決方案](https://bit.ly/3eMUosX)】 5.設計自動販賣機【[解決方案](https://javarevisited.blogspot.com/2016/06/design-vending-machine-in-java.html)】 6\. 如何設計分散式鍵值存儲 7.設計分散式緩存 8.設計分散式作業調度器 9\. 如何設計認證系統 10\. 如何設計統一支付介面（UPI）並且，以下是來自 Educative.io 的 YouTube 高級設計供您參考： [ ![YouTube 的高層設計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03a26o4bntorhtpngs4v.jpg)](https://bit.ly/3Mnh6UR) --- ### 𝐌𝐞𝐝𝐢𝐮𝐦 系統設計問題現在，是時候看看中等難度的系統設計問題了。這些問題既不簡單也不太困難，但您需要對各種軟體架構元件和系統設計概念有深入的了解才能回答這些問題。 11.設計Instagram【[解決方案](https://bit.ly/3BqamCL)】 12\. 如何設計 Tinder 13.設計WhatsApp（[解決方案](https://bit.ly/3SbA9Eu)） 14\. 如何設計 Facebook 15.設計推特 16.設計Reddit 17.設計Netflix【[解決方案](https://bit.ly/3bbNnAN)】 18.設計Youtube【[解決方案](https://bit.ly/3bbNnAN)】 19\. 設計谷歌搜尋 20.設計像亞馬遜這樣的電子商務商店 21.設計Spotify 22.設計TikTok 23\. 設計 Shopify 24\. 設計愛彼迎 25\. 為搜尋引擎設計自動完成功能 26.設計速率限制器 27.像Kafka一樣設計分散式訊息佇列 28.設計航班預訂系統 29.設計線上程式碼編輯器 30.設計證券交易所繫統 31.設計一個分析平台（指標和日誌記錄） 32.設計通知服務 33.設計支付系統而且，這是來自 DesignGuru 的 Netflix 高級系統設計，這是我最喜歡的學習系統設計的地方之一 [![Netflix 系統設計架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7aj73gezzybzgi8dewp.jpg)](https://bit.ly/3pMiO8g) --- ### 𝐇𝐚𝐫𝐝 系統設計問題現在，讓我們來看看一些需要你付出更多努力的難題。解決這些問題你可能會感到不舒服，但透過這樣做你會變得更好。 34\. 如何設計像 Yelp 這樣的基於位置的服務 35\. 設計優步 36.設計像 Doordash 這樣的送餐應用程式 37.設計Google文件 38\. 如何設計Google地圖 39\. 設計縮放 40\. 如何設計像 Dropbox 這樣的檔案共用系統 41\. 如何設計像BookMyShow這樣的訂票系統 42.設計分散式網路爬蟲 43.如何設計程式碼部署系統 44.設計像S3這樣的分散式雲端存儲 45\. 如何設計分散式鎖定服務這是 Educative.io 的 Google 地圖的高級設計 [![Google 地圖的高層設計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn97eqxqthqx6714gadl.png)](https://bit.ly/3Mnh6UR) 而且，如果您需要解決方案，則可以在 @ Ashish Pratap Singh 的 GitHub 儲存庫中找到它們：https://github.com/ashishps1/awesome-system-design-resources/blob/main/README.md#system-design-interview-problems 而且，現在可以看到更多有關係統設計面試準備的資源 --- ### 系統設計訪談資源：而且，這裡列出了最佳系統設計書籍、線上課程和練習網站，您可以查看這些內容，以便更好地為系統設計面試做好準備。這些課程中的大多數也回答了我在這裡分享的問題。 1. [**DesignGuru 的 Grokking 系統設計課程**](https://bit.ly/3pMiO8g)：一個互動式學習平台，提供實作練習和真實場景，以增強您的系統設計技能。 2. [**《系統設計面試》作者：Alex Xu**](https://amzn.to/3nU2Mbp) ：這本書深入探討了系統設計概念、策略和麵試準備技巧。 3. Martin Kleppmann 的[**「設計資料密集型應用程式」**](https://amzn.to/3nXKaas) ：綜合指南，涵蓋了設計可擴展且可靠的系統的原則和實踐。 4. [LeetCode 系統設計標籤](https://leetcode.com/explore/learn/card/system-design)：LeetCode 是一個受歡迎的技術面試準備平台。 LeetCode 上的系統設計標籤包含各種練習問題。 5. GitHub 上的[**「系統設計入門」**](https://bit.ly/3bSaBfC) ：精選的資源列表，包括文章、書籍和影片，可幫助您準備系統設計面試。 6. [**Educative 的系統設計課程**](https://bit.ly/3Mnh6UR)：一個互動式學習平台，提供實作練習和真實場景，以增強您的系統設計技能。 7. **高可擴展性部落格**：該部落格包含有關高流量網站和可擴展系統架構的文章和案例研究。 8. **[YouTube 頻道](https://medium.com/javarevisited/top-8-youtube-channels-for-system-design-interview-preparation-970d103ea18d)**：請參閱「Gaurav Sen」和「Tech Dummies」等頻道，以取得有關係統設計概念和麵試準備的富有洞察力的影片。 9. [**ByteByteGo**](https://bit.ly/3P3eqMN) ：Alex Xu 的一本現場書籍和課程，用於系統設計面試準備。它包含《系統設計訪談》第一捲和第二卷的所有內容，並將隨即將推出的第三卷進行更新。 10. [**Exponent**](https://bit.ly/3cNF0vw) ：一個專為面試準備的網站，特別是針對亞馬遜和谷歌等 FAANG 公司，他們還有很棒的系統設計課程和許多其他材料，可以幫助您破解 FAAN 面試。 [![如何為系統設計做準備](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqv3p46jmw5qc0newuiu.jpg)](https://bit.ly/3P3eqMN) image\_credit - [ByteByteGo](https://bit.ly/3P3eqMN) 請記住透過參與實際專案和參加模擬面試將理論知識與實際應用結合。不斷的練習和學習無疑會提高你在系統設計面試中的熟練程度。這就是2024 年50 個系統設計面試問題。有線上課程以及我分享過的書籍。無論您是準備技術面試的候選人，還是希望提高技能的經驗豐富的專業人士，掌握系統設計都是在不斷發展的科技行業中推進職業生涯的關鍵一步，這些問題將對您有所幫助。。 ### 獎金正如承諾的，這是給你的獎金，一本免費的書。我剛剛找到一本新的免費書籍來學習分散式系統設計，您也可以在 Microsoft 上閱讀它 --- [https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT -eBook-設計分散式系統.pdf](https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf) ![](https://miro.medium.com/v2/resize:fit:365/0*99i4bdkoEjeeJio8.png) 謝謝 --- 原文出處：https://dev.to/somadevtoo/top-50-system-design-interview-questions-for-2024-5dbk

0個讚 0留言 75瀏覽

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

恭喜前端挑戰賽：地球日版的得獎者！

--- title：恭喜前端挑戰賽：地球日版的得獎者！發表：真實描述：我們收到了許多富有創意、技術精湛且鼓舞人心的提交作品，展現了社群的才華。標籤： frontendchallenge、devchallenge、js、css 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1j6wz3srlywj4z0u7vd.png 使用 100:42 的比例可獲得最佳效果。 ===================== 發佈於: 2024-04-25 15:53 +0000 =========================== --- 本月早些時候，我們啟動了第二次前端挑戰，以慶祝地球上最大的公民活動「地球日」。我們邀請社區參與兩個提示，有機會贏得額外的獎品類別： **提示** - CSS 藝術：地球日 - 魅力我的標記：地球日慶祝活動登陸頁面 **附加獎類別** - 世界地球日：授予提高人們對氣候變遷認識的最佳提交作品。反應令人難以置信！我們收到了許多富有創意、技術精湛且鼓舞人心的提交作品，展現了社群的才華。但隨著每一次挑戰的進行，最終只能有少數獲勝者。恭喜… --- @schmoris 教育了我們所有人並展示了我們可以用更少的資源做什麼。所謂更少的資源，是指只用 CSS！這款遊戲的精美程度和互動性令人難以置信，並且對挑戰進行了令人難以置信的演示。 {% 連結 https://dev.to/schmoris/earth-rescue-a-css-only-game-o0e %} --- @devdongsu 使用我們提供的 HTML 設計了一個互動式且深思熟慮的地球日登陸頁面。這是一個簡單、可存取的頁面，可在桌面和行動裝置上使用。儘管簡單，但它包含引人注目的動畫和個性。這裡有很多很棒的作品，而這個最終確實成功了。 {% 連結 https://dev.to/devdongsu/earth-day-frontend-challenge-landing-page-hugging-earth-30j0 %} --- @jorgedelcampo，我們的額外獎項類別獲得者，以提高人們對氣候變遷的認識。談論用 CSS 講故事！這是另一項事半功倍的提交，在這種情況下，我們得到了關於我們的地球和我們的影響的完整故事。 {% 連結 https://dev.to/jorgedelcampo/happy-earth-day-3mgn %} 下一步是什麼？ ------- 我們很快就會舉辦另一場前端挑戰賽！請務必關注我們的挑戰標籤，這樣您就不會錯過公告。 {% 標籤前端挑戰 %} {% 標籤 devchallenge %} 感謝所有參與的人。 ❤️ 我們希望您玩得開心，感受到挑戰，並可能為您的職業檔案加入一兩件事。下次見！ --- 原文出處：https://dev.to/devteam/congrats-to-the-winners-of-the-frontend-challenge-earth-day-edition-4gd7

0個讚 0留言 13瀏覽

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

加入我們的 Netlify 動態網站挑戰賽：獎品為 3,000 美元！

--- 標題：加入我們參加 Netlify 動態網站挑戰：獎品為 3,000 美元！發表：真實說明：使用 Netlify 的全新不可知平台原語證明您的技能、贏得現金獎勵並獲得經驗。標籤： netlifychallenge、devchallenge、webdev、javascript 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbcz1t2nzsbn3ygf1jx3.jpg 使用 100:42 的比例可獲得最佳效果。 ===================== 發佈於: 2024-04-23 14:24 +0000 =========================== --- 我們很高興與[Netlify](https://netlify.com)合作，為您帶來下一個 DEV 挑戰。本次挑戰賽的主題是跨任何框架的動態和高效能數位體驗！ Netlify 動態網站挑戰賽將持續到**5 月 12 日**，您將有機會證明您的技能、贏得現金獎勵並獲得 Netlify 新的[不可知平台原語的](https://www.netlify.com/platform/primitives/)經驗。跨所有框架解鎖前所未有的功能 - Next.js、Astro、Nux、Remix，應有盡有！這項挑戰提供了一個投資開放網路、開源以及您在新的和不斷發展的框架方面的技能的機會。我們期待看到您創造的作品。我們希望您至少嘗試我們的三個提示中的一個！提示 -- ### 視覺饗宴使用**Netlify 圖像 CDN**建立動態圖像庫 - 您的專案應利用 Netlify 的按需圖像轉換功能，並演示如何獲取圖像、應用調整大小和格式優化等轉換，以及在圖庫佈局中渲染優化的圖像。這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/netlify)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20netlifychallenge%2C%20devchallenge%2C%20webdev%2C%20javascript%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BNetlify%20Dynamic%20Site%20Challenge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A% % 20 盛宴。* %0A%0A%0A%23%23%20什麼%20I%20Built%0A%3C！ --%20Share%20an%20概述%20about%20您的%20專案。 0A%23%23 %20Demo%0A%3C!--%20將%20a%20link%20分享至%20您的%20Netlify%20app%20和%20在此處包括%20some%20螢幕截圖%20 。 -%3E%0A%0A%3C!--%20Did%20you% 20實現%20additional%20platform%20primitives%20like%20Netlify%20Blobs%20or%20Cache%20Control%3F%20告訴%20us%2000%20Cache%20Control%3F%20告訴%20us%2000%20abouttoo% !%20You%20may%20qualify%20for%20more%20than%20one%20prompt.% 20--%3E%0A%0A%3C!--%20Team%20Submissions%3A%20請%20pick%20one%20m %20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%20DEV %20usernames%20directly%20in%20the%20body%20of%20the%2000%20in%20the%20body%20of%20the%20postA% 3C!--%20Don%27t%20forget%20to%20add%20a%20cover%20image %20(如果%20你%20想要).%20--%3E%0A%0A%0A%3C!-- %20感謝%20%20的參與!%20--%3E %} 視覺饗宴提交模板 {% 結束%} ### 使用 Blob 建置建立使用**Netlify Blob**讀取和寫入資料的應用程式 - 您的專案應示範儲存和擷取 Blob 物件、處理元資料以及將 Blob 儲存與 Netlify Functions 整合以處理任務。這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/netlify)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20netlifychallenge%2C%20devchallenge%2C%20webdev%2C%20javascript%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BNetlify%20Dynamic%20Site%20Challenge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A% % 20%20Blob。* %0A%0A%0A%23%23%20什麼%20I%20Built%0A%3C！ --%20Share%20an%20概述%20about%20您的%20專案。 0A%23%23 %20Demo%0A%3C!--%20將%20a%20link%20分享至%20您的%20Netlify%20app%20和%20在此處包括%20some%20螢幕截圖%20 。 %0A%0A%3C!--%20Did%20you%20implement%20additional% 20platform%20primitives%20like%20the%20Netlify%20Image%20CDN%20or%20Cache%20Control3F%20Image%20CDN%20or%20Cache%20Control20%20T%200%2020 %20You%20may%20qualify%20for%20more%20than%20one%20prompt.% 20--%3E%0A%0A%3C!--%20Team%20Submissions%3A%20請%20pick%20one%20mick% 20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%20DEV %20usernames%20directly%20in%20the%20body%20of%20the%20postE20A% !--%20Don%27t%20forget%20to%20add%20a%20cover%20image %20（如果%20你%20想要）。 20感謝%20%20參與！使用 Blob 提交模板建置 {% 結束%} ### 巧妙的緩存建立一個利用**Netlify 細粒度快取控制功能**的 Web 應用程式 - 您的專案應該實現自訂 Cache-Control 標頭，利用 Netlify-CDN-Cache-Control 標頭進行邊緣緩存，並使用快取標記演示快取失效。這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/netlify)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20netlifychallenge%2C%20devchallenge%2C%20webdev%2C%20javascript%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BNetlify%20Dynamic%20Site%20Challenge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fge%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Fnetlify)%3A% % 20快取*%0A%0A%0A%23%23%20What%20I%20Built%0A%3C！ --%20Share%20an%20overview%20about%20your%20project.%20--%3E%0A%0A% 23% 23%20Demo%0A%3C！ --%20將%20a%20link%20分享到%20您的%20Netlify%20app%20和%20在此處包含%20some%20螢幕截圖%20。 20--%3E%0A%0A%23%23% 20Platform%20Primitives%0A%3C!--%20告訴%20us%20如何%20you%20利用%20Netlify%20Cache%20Control.%20--%3E %0A%0A%3C!--%20Did%20you%20implement%20additional %20platform%20primitives%20like%20the%20Netlify%20Image%20CDN%20or%20Blobs%3F%200%20%20%20%20%！ 20You%20may%20qualify%20for%20more%20than%20one%20提示。 %20publish%20the%20submission%20and%20credit%20teammates%20by%20listing%20their%20DEV% 20usernames%20directly%20in%20the%20body%20of%20the%20postA%20in%20the%20body%20of%20the%200.A% 3C!--%20Don%27t%20forget%20to%20add%20a%20cover%20image% 20(如果%20你%20想要).%20--%3E%0A%0A%0A%3C!-- %20感謝%20參與%20！巧妙的快取提交模板 {% 結束%} 評審標準和獎項 ------- 所有三個提示都將根據以下內容進行判斷： - 底層技術的使用 - 可用性和使用者體驗 - 無障礙 - 創造力每個提示的獲勝者將收到： - $1,000 禮品卡或同等金額 - 專屬開發者徽章 - 來自[DEV 商店](https://shop.forem.com)的禮物 **所有提交有效提交的參與者都**將在其 DEV 個人資料中收到完成徽章。如何參與 ---- 為了參與，您需要使用與每個提示關聯的提交範本來發布貼文。所有提交都必須在 Netlify 上建置和執行，並至少利用每個提示中所述的一個平台原語。提交的作品將根據 Netlify 免費入門平台進行評審，因此任何使用 Netlify 付費服務的行為都將在評審過程中考慮。 **請在提交之前查看我們的完整[規則、指南和常見問題解答頁面，](https://dev.to/challenges/netlify)以便您了解我們的參與指南和[官方競賽規則](https://dev.to/page/netlify-dynamic-site-challenge-contest-rules)（例如資格要求）。** 需要幫忙？ ----- 您可以利用 Netlify 的文件和教學來了解 Netlify 平台： - [平台原語](https://docs.netlify.com/platform/primitives/) - [開發者文件](https://docs.netlify.com/get-started/) Netlify 團隊也將為挑戰期間需要技術支援的任何人發布協助線程。關注他們的組織，這樣您就不會錯過該帖子： {% 嵌入 https://dev.to/netlify %} 重要的日子 ----- - 5 月 1 日：Netlify 動態網站挑戰賽開始！ - 5 月 12 日：提交截止時間為太平洋夏令時間晚上 11:59 - 5 月 14 日：得獎者公佈我們希望您享受框架的自由，我們迫不及待想看看您建造的內容！對挑戰有疑問嗎？請在下面詢問他們。祝你好運，編碼愉快！ --- 原文出處：https://dev.to/devteam/join-us-for-the-netlify-dynamic-site-challenge-3000-in-prizes-3mfn

0個讚 0留言 10瀏覽

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

深入探討 Javascript 函數式編程

[訂閱我的程式設計 YouTube 頻道](https://www.youtube.com/@alexmercedcoder) [訂閱我的資料 YouTube 頻道](https://www.youtube.com/@alexmerceddata) 函數式程式設計 (FP) 在軟體開發領域獲得了巨大的關注，JavaScript 開發人員越來越多地轉向這種範例，以更有效地解決問題並減少錯誤。從本質上講，函數式程式設計強調使用純函數、不變性以及柯里化、記憶化和 monad 等先進技術來建立更清晰、更可預測的程式碼。在這篇文章中，我們將深入研究每個概念，以了解它們的工作原理以及它們在 JavaScript 開發中的重要性。我們將探索**純函數**的無副作用性質、用於維護狀態可預測性的**不變性**、用於增強函數重用和組合的**柯里化**、用於優化性能的**記憶化**以及用於以函數式風格處理副作用的**monad** 。無論您是函數式程式設計的新手，還是希望加深對其在 JavaScript 中的應用的理解，這篇文章都將為您提供堅實的基礎和實際範例，以便將這些原則整合到您的編碼實踐中。讓我們揭開這些概念的神秘面紗，看看它們如何改變您編寫 JavaScript 程式碼的方式。 1. 純函數 ------ **純函數**是一種函數，在給定相同的輸入的情況下，將始終返回相同的輸出，並且不會導致任何可觀察到的副作用。這個概念在函數式程式設計中至關重要，因為它允許開發人員編寫更可預測和可測試的程式碼。 ### 在 JavaScript 中使用純函數的好處： - **可預測性：**由於純函數不依賴或修改其範圍之外的資料狀態，因此它們更容易推理和除錯。 - **可重複使用性：**純函數可以在應用程式的不同部分重複使用，而無需考慮外部上下文。 - **可測試性：**沒有隱藏狀態或副作用，純函數很容易測試；輸入和輸出是您需要考慮的全部。 ### JavaScript 中純函數的範例：考慮一個簡單的函數來計算矩形的面積： ``` function rectangleArea(length, width) { return length * width; } ``` 這個函數是純粹的，因為它總是使用相同的參數來傳回相同的結果，而且它不會修改任何外部狀態或產生副作用。 ### 常見陷阱以及如何避免它們：雖然純函數提供了許多好處，但開發人員在嘗試將它們整合到與資料庫、外部服務或全域狀態互動的應用程式時可能會面臨挑戰。以下是保持純度的一些技巧： - **避免副作用：**不要修改函數內的任何外部變數或物件。 - **本機處理狀態：**如果您的函數需要存取應用程式狀態，請考慮將狀態作為參數傳遞並傳回新狀態而不修改原始狀態。透過理解和實現純函數，開發人員可以在充分利用 JavaScript 中函數式程式設計的全部功能方面邁出重要一步。 2. 不變性 ------ **不變性**是指資料建立後永不更改的原則。您無需修改現有物件，而是建立一個包含所需變更的新物件。這是函數式程式設計的基石，因為它有助於防止副作用並在應用程式的整個生命週期中保持資料的完整性。 ### JavaScript 如何處理不變性：預設情況下，JavaScript 物件和陣列是可變的，這表示在需要時必須注意強制執行不變性。但是，有幾種技術和工具可以提供幫助： - **使用`const` ：**雖然`const`不會使變數變得不可變，但它可以防止將變數辨識碼重新指派給新值，這是邁向不變性的一步。 - **Object.freeze()：**此方法可以透過防止向物件新增屬性和修改現有屬性來使物件不可變。 - **陣列和物件的擴展語法：**使用擴展語法可以幫助建立新的陣列或物件，同時合併現有陣列或物件的元素或屬性，而無需修改原始陣列或物件。 ### 確保 JavaScript 中資料不變性的技術： 1. **寫入時複製：**始終建立一個新的物件或陣列，而不是修改現有的物件或陣列。例如： ``` const original = { a: 1, b: 2 }; const modified = { ...original, b: 3 }; // 'original' is not changed ``` 2. **使用函式庫：**像 Immutable.js 這樣的函式庫提供了高度最佳化的持久不可變資料結構，可以簡化不變性的實作。 ### 幫助實施不變性的函式庫： - **Immutable.js：**提供一系列本質上不可變的資料結構。 - **immer：**允許您透過使用臨時草稿狀態並套用變更來產生新的不可變狀態，以更方便的方式處理不可變狀態。透過將不變性整合到 JavaScript 專案中，您可以增強資料完整性、提高應用程式效能（透過減少防禦性複製的需求）並提高程式碼的可預測性。它完全符合函數式程式設計的原則，從而產生更乾淨、更健壯的軟體。 3.柯里化 ----- **柯里化**是函數式程式設計中的一種變革性技術，其中具有多個參數的函數被轉換為一系列函數，每個函數採用一個參數。這種方法不僅使您的函數更加模組化，而且還增強了程式碼的可重複使用性和可組合性。 ### JavaScript 柯里化的實際用途：柯里化允許建立高階函數，這些函數可以在應用程式的不同點使用不同的參數進行自訂和重複使用。它特別適用於： - **事件處理：**建立針對特定事件自訂的部分應用函數，但重複使用通用處理程序邏輯。 - **API 呼叫：**使用預定義參數（例如 API 金鑰或使用者 ID）設定函數，這些參數可以在不同的呼叫中重複使用。 ### 說明柯里化的逐步範例：考慮一個簡單的函數來加兩個數字： ``` function add(a, b) { return a + b; } // Curried version of the add function function curriedAdd(a) { return function(b) { return a + b; }; } const addFive = curriedAdd(5); console.log(addFive(3)); // Outputs: 8 ``` 此範例展示了柯里化如何將簡單的加法函數轉變為更通用和可重複使用的函數。 ### 柯里化與部分應用：雖然柯里化和部分應用都涉及將函數分解為更簡單、更具體的函數，但它們並不相同： - **柯里化（Currying）：**將具有多個參數的函數轉換為一系列巢狀函數，每個函數只接受一個參數。 - **部分應用：**涉及透過預先填充一些參數來建立具有較少參數的函數。這兩種技術在函數式程式設計中都很有價值，可以用來簡化複雜的函數簽名並提高程式碼模組化。透過利用柯里化，開發人員可以增強函數的可重複使用性和組合性，從而在 JavaScript 專案中產生更清晰、更易於維護的程式碼。 4. 記憶 ----- **記憶化**是函數式程式設計中使用的最佳化技術，透過儲存昂貴的函數呼叫的結果並在相同的輸入再次發生時返回快取的結果來加速電腦程式。它在 JavaScript 中對於優化涉及繁重計算任務的應用程式的效能特別有用。 ### 為什麼記憶化在 JavaScript 很重要： - **效率：**減少使用相同參數重複呼叫函數所需的計算次數。 - **效能：**透過快取耗時操作的結果來提高應用程式回應能力。 - **可擴展性：**透過最小化計算開銷來幫助管理更大的資料集或更複雜的演算法。 ### 實現記憶化：範例和常用方法：以下是 JavaScript 中記憶函數的基本範例： ``` function memoize(fn) { const cache = {}; return function(...args) { const key = args.toString(); if (!cache[key]) { cache[key] = fn.apply(this, args); } return cache[key]; }; } const factorial = memoize(function(x) { if (x === 0) { return 1; } else { return x * factorial(x - 1); } }); console.log(factorial(5)); // Calculates and caches the result console.log(factorial(5)); // Returns the cached result ``` 此範例示範了記憶化如何快取階乘計算的結果，從而顯著減少重複呼叫的計算時間。 ### 記憶化的優點和潛在缺點： #### 好處： - 顯著減少重複操作的處理時間。 - 透過避免冗餘計算來提高應用程式效率。 - 易於用高階函數實現。 #### 缺點： - 由於快取而增加記憶體使用量。 - 不適合具有不確定性輸出的函數或具有副作用的函數。透過理解和實現記憶化，開發人員可以優化他們的 JavaScript 應用程式，使其更快、更有效率。然而，重要的是要考慮額外記憶體使用方面的權衡，並確保僅在能夠提供明顯好處的地方應用記憶化。 5. 單子 ----- **Monad**是函數式程式設計中使用的抽象資料類型，用於處理副作用，同時保持純函數原則。它們將行為和邏輯封裝在靈活的可連結結構中，允許順序操作，同時保持函數的純淨。 ### Monad 簡介及其在 FP 中的意義： Monad 提供了一個以受控方式處理副作用（如 IO、狀態、異常等）的框架，有助於保持功能的純度和可組合性。在 JavaScript 中，Promise 是一個常見的一元結構範例，可以乾淨且有效率地管理非同步操作。 ### JavaScript 中 Monad 的範例： - **Promises：**透過封裝待處理操作、成功值或錯誤來處理非同步操作，允許方法連結（如`.then()`和`.catch()` ）： ``` new Promise((resolve, reject) => { setTimeout(() => resolve("Data fetched"), 1000); }) .then(data => console.log(data)) .catch(error => console.error(error)); ``` - **Maybe Monad：**透過封裝可能存在或不存在的值來幫助處理 null 或未定義的錯誤： ``` function Maybe(value) { this.value = value; } Maybe.prototype.bind = function(transform) { return this.value == null ? this : new Maybe(transform(this.value)); }; Maybe.prototype.toString = function() { return `Maybe(${this.value})`; }; const result = new Maybe("Hello, world!").bind(value => value.toUpperCase()); console.log(result.toString()); // Outputs: Maybe(HELLO, WORLD!) ``` ### Monad 定律與結構： Monad 必須遵循三個核心定律——同一性、關聯性和單位——以確保它們的行為可預測： - **同一性：**直接應用函數或透過 monad 傳遞函數應該會產生相同的結果。 - **關聯性：**執行操作的順序（連結）不影響結果。 - **單位：**一個值必須能夠被提升為一個單子而不改變其行為。理解這些定律對於在函數式程式設計中有效地實現或利用 monad 至關重要。 ### Monad 如何管理副作用並保持功能純度：透過封裝副作用，monad 允許開發人員保持程式碼庫的其餘部分純淨，從而更易於理解和維護。它們使副作用可預測和可管理，這對於維護狀態一致性和錯誤處理可能變得具有挑戰性的大型應用程式至關重要。透過利用 monad，開發人員可以增強 JavaScript 應用程式的功能，確保它們以功能性的方式處理副作用，從而提高程式碼的可靠性和可維護性。 6. 這些概念如何相互關聯 ------------- 純函數、不變性、柯里化、記憶化和 monad 的概念不僅僅是單獨的元素，而是增強 JavaScript 應用程式的健全性和可維護性的互連工具。以下是他們如何共同創造一個有凝聚力的函數式程式設計環境。 ### 建立功能協同： - **純函數與不變性：**純函數確保函數沒有副作用，並為相同的輸入傳回相同的輸出，並透過防止資料意外變更的不變性來補充。它們共同確保了可預測且穩定的程式碼庫。 - **柯里化和記憶化：**柯里化允許將函數分解為更簡單的單參數函數，這些函數更易於管理和記憶。然後可以將記憶化應用於這些柯里化函數以緩存其結果，透過避免重複計算來優化應用程式的效能。 - **Monad 和純函數：** Monad 有助於以受控方式管理副作用，這使得純函數即使在處理 I/O 或狀態轉換等操作時也能保持純淨。這種副作用的封裝保留了功能架構的完整性。 ### 範例：一個小型功能模組：讓我們考慮一個將這些概念結合在一起的實際範例。假設我們正在建立一個簡單的用戶註冊模組： ``` // A pure function to validate user input const validateInput = input => input.trim() !== ''; // A curried function for creating a user object const createUser = name => ({ id: Date.now(), name }); // Memoizing the createUser function to avoid redundant operations const memoizedCreateUser = memoize(createUser); // A monad for handling potential null values in user input const getUser = input => new Maybe(input).bind(validateInput); // Example usage const input = getUser(' John Doe '); const user = input.bind(memoizedCreateUser); console.log(user.toString()); // Outputs user details or empty Maybe ``` 在此範例中， `validateInput`是確保輸入有效性的純函數。 `createUser`是一個柯里化和記憶化的函數，針對效能進行了最佳化，而`getUser`使用 monad 來安全地處理潛在的 null 值。結論： --- 理解和整合這些函數式程式設計概念可以顯著提高 JavaScript 程式碼的品質和可維護性。透過同時使用純函數、不變性、柯里化、記憶化和 monad，開發人員可以建立更可靠、更有效率、更乾淨的應用程式。透過採用這些相互關聯的原則，JavaScript 開發人員可以充分利用函數式程式設計的潛力來編寫更好、更永續的程式碼。 --- 原文出處：https://dev.to/alexmercedcoder/deep-dive-into-functional-programming-in-javascript-851

0個讚 0留言 85瀏覽

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

5 個你不知道的隱藏 CSS 屬性

層疊樣式表 (CSS) 是網頁設計的支柱，讓開發人員可以輕鬆設計網頁的樣式和格式。雖然大多數開發人員熟悉顏色、字體大小和邊距等常見 CSS 屬性，但仍有許多鮮為人知的屬性可以為您的設計加入功能。在本文中，您將發現五個您可能不知道的 CSS 屬性，但它們可以顯著增強您的 Web 開發專案。 *1. 文字修飾* ``` .menu__list-link:hover { text-decoration: underline 2px solid green; } ``` ![文字裝飾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi8lujehj83ovqkzbfpc.png) 變成經典的文字裝飾：底線你可以再增加 3 個參數。第一個是線條的寬度（2px），第二個是線條的類型（實線、點線），第三個是該線條的顏色（綠色）。 *2. 文字下劃線偏移* ``` .menu__list-link:hover { text-decoration: underline 2px solid green; text-underline-offset: 6px; } ``` ![文字下劃線偏移](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hfbsk3mlk6d0be8s3kx.png) ![文字下劃線偏移](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjes52klh127k3ita0yj.png) 非常方便。解決當某些字母低於行高以及在懸停效果期間下劃線被這些字母打斷時經常發生的問題。建立從文字到下劃線的偏移（6px）是一個很好的解決方案。 *3. 插圖* 對於相對、絕對和其他定位，我們經常寫上、右、下、左： ``` top: 5px; right: 3px; bottom: 1px; left: 4px; ``` 為了加快編寫過程，我們可以用屬性 inset 來寫上面的較短版本： ``` inset: 5px, 3px, 1px, 4px; ``` *4. 物體位置* 我們經常對圖像應用 object-fit: cover - 它將圖像裁剪到指定的高度和寬度，以便看起來清晰： ![物件適配：覆蓋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7g2h4z68qbgw57158j5.png) 但我們無法控制它將裁剪影像的哪一部分。所以這就是物體位置發揮作用的地方。 ``` .test { height: 350px; width: 500px; object-fit: cover; object-position: bottom; } ``` ![物件位置：底部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjkwnz4w4mtgd9hd653q.png) ``` object-position: top; ``` ![物件位置：頂部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jy5061gj1cfsqkldatku.png) 我們也可以加：左或右。或者當我們指定 2 個參數時甚至可以更精確，例如 object-position: center Bottom; *5. 滾動邊距頂部* 預設情況下，當我們連結到頁面`<a href="#fairy-tale__inner">Itinery</a>`上的部分時，它將準確地帶到該部分的頂部。 ![捲動邊距頂部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0gbscn4v5jkhsgkzaqy.png) 但如果我們想騰出空間，我們需要使用 scrool-margin-top ``` #fairy-tale__inner { scroll-margin-top: 100px; } ``` ![捲動邊距頂部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r1f9wh1ea3i8peks6bj.png) 所以，繼續吧，深入探索隱藏 CSS 屬性的世界，將您的設計提升到一個新的水平！ --- 原文出處：https://dev.to/vitalipri/5-hidden-css-properties-you-didnt-know-existed-12h8

0個讚 0留言 17瀏覽

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

如何讓 AI 融入您的使用者（Next.js、OpenAI、CopilotKit）

長話短說 ---- 在本文中，您將了解如何建立基於 AI 的行銷活動管理應用程式，該應用程式可讓您建立和分析廣告活動，從而使您能夠為您的業務做出正確的決策。我們將介紹如何： - 使用 Next.js 建立 Web 應用程式， - 使用 CopilotKit 將 AI 助理整合到軟體應用程式中，以及 - 建立特定於操作的人工智慧副駕駛來處理應用程式中的各種任務。 - 建立一名競選經理 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xqpz356qm79t90f1l87.gif) --- CopilotKit：建構應用內人工智慧副駕駛的框架 -------------------------- CopilotKit是一個[開源的AI副駕駛平台](https://github.com/CopilotKit/CopilotKit)。我們可以輕鬆地將強大的人工智慧整合到您的 React 應用程式中。建造： - ChatBot：上下文感知的應用內聊天機器人，可以在應用程式內執行操作 💬 - CopilotTextArea：人工智慧驅動的文字字段，具有上下文感知自動完成和插入功能📝 - 聯合代理：應用程式內人工智慧代理，可以與您的應用程式和使用者互動🤖 ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fx3us3vc140aun0dvrdof.gif](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fx3us3vc140aun0dvrdof.gif) {% cta https://git.new/devtoarticle1 %} Star CopilotKit ⭐️ {% endcta %} --- 先決條件 ---- 要完全理解本教程，您需要對 React 或 Next.js 有基本的了解。我們還將利用以下內容： - [Radix UI](https://www.radix-ui.com/) - 用於為應用程式建立可存取的 UI 元件。 - [OpenAI API 金鑰](https://platform.openai.com/api-keys)- 使我們能夠使用 GPT 模型執行各種任務。 - [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 一個開源副駕駛框架，用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 --- 專案設定和套件安裝 --------- 首先，透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式： ``` npx create-next-app campaign-manager ``` 選擇您首選的配置設定。在本教學中，我們將使用 TypeScript 和 Next.js App Router。 ![Next.js 應用程式安裝](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xboujt60i6lpoaqgjyap.png) 接下來，將[Heroicons](https://www.npmjs.com/package/@heroicons/react) 、 [Radix UI](https://www.radix-ui.com/)及其原始元件安裝到專案中。 ``` npm install @heroicons/react @radix-ui/react-avatar @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-icons @radix-ui/react-label @radix-ui/react-popover @radix-ui/react-select @radix-ui/react-slot @radix-ui/react-tabs ``` 另外，安裝[Recharts 程式庫](https://recharts.org/en-US)（一個用於建立互動式圖表的 React 程式庫）以及以下實用程式套件： ``` npm install recharts class-variance-authority clsx cmdk date-fns lodash react-day-picker tailwind-merge tailwindcss-animate ``` 最後，安裝[CopilotKit 軟體套件](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)。這些套件使 AI copilot 能夠從 React 狀態檢索資料並在應用程式中做出決策。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend ``` 恭喜！您現在已準備好建立應用程式。 --- 使用 Next.js 建立 Campaign Manager 應用程式 ----------------------------------- 在本節中，我將引導您建立活動管理器應用程式的使用者介面。首先，讓我們進行一些初始設定。在`src`資料夾中建立一個`components`和`lib`資料夾。 ``` cd src mkdir components lib ``` 在**`lib`**資料夾中，我們將聲明應用程式的靜態類型和預設活動。因此，在**`lib`**資料夾中建立**`data.ts`**和**`types.ts`**檔案。 ``` cd lib touch data.ts type.ts ``` 將下面的程式碼片段複製到`type.ts`檔中。它聲明了活動屬性及其資料類型。 ``` export interface Campaign { id: string; objective?: | "brand-awareness" | "lead-generation" | "sales-conversion" | "website-traffic" | "engagement"; title: string; keywords: string; url: string; headline: string; description: string; budget: number; bidStrategy?: "manual-cpc" | "cpa" | "cpm"; bidAmount?: number; segment?: string; } ``` 為應用程式建立預設的行銷活動清單並將其複製到`data.ts`檔案中。 ``` import { Campaign } from "./types"; export let DEFAULT_CAMPAIGNS: Campaign[] = [ { id: "1", title: "CopilotKit", url: "https://www.copilotkit.ai", headline: "Copilot Kit - The Open-Source Copilot Framework", description: "Build, deploy, and operate fully custom AI Copilots. In-app AI chatbots, AI agents, AI Textareas and more.", budget: 10000, keywords: "AI, chatbot, open-source, copilot, framework", }, { id: "2", title: "EcoHome Essentials", url: "https://www.ecohomeessentials.com", headline: "Sustainable Living Made Easy", description: "Discover our eco-friendly products that make sustainable living effortless. Shop now for green alternatives!", budget: 7500, keywords: "eco-friendly, sustainable, green products, home essentials", }, { id: "3", title: "TechGear Solutions", url: "https://www.techgearsolutions.com", headline: "Innovative Tech for the Modern World", description: "Find the latest gadgets and tech solutions. Upgrade your life with smart technology today!", budget: 12000, keywords: "tech, gadgets, innovative, modern, electronics", }, { id: "4", title: "Global Travels", url: "https://www.globaltravels.com", headline: "Travel the World with Confidence", description: "Experience bespoke travel packages tailored to your dreams. Luxury, adventure, relaxation—your journey starts here.", budget: 20000, keywords: "travel, luxury, adventure, tours, global", }, { id: "5", title: "FreshFit Meals", url: "https://www.freshfitmeals.com", headline: "Healthy Eating, Simplified", description: "Nutritious, delicious meals delivered to your door. Eating well has never been easier or tastier.", budget: 5000, keywords: "healthy, meals, nutrition, delivery, fit", }, ]; ``` 由於我們使用 Radix UI 建立可以使用 TailwindCSS 輕鬆自訂的基本 UI 元件，因此請在**`lib`**資料夾中建立一個**`utils.ts`**文件，並將以下程式碼片段複製到該文件中。 ``` //👉🏻 The lib folder now contains 3 files - data.ts, type.ts, util.ts //👇🏻 Copy the code below into the "lib/util.ts" file. import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export function randomId() { return Math.random().toString(36).substring(2, 15); } ``` 導航到`components`資料夾並在其中建立其他三個資料夾。 ``` cd components mkdir app dashboard ui ``` `components/app`資料夾將包含應用程式中使用的各種元件，而儀表板資料夾包含某些元素的 UI 元件。 `ui`資料夾包含使用 Radix UI 建立的多個 UI 元素。將[專案儲存庫中的這些元素](https://github.com/CopilotKit/campaign-manager-demo/tree/main/src/components/ui)複製到該資料夾中。恭喜！ `ui`資料夾應包含必要的 UI 元素。現在，我們可以使用它們來建立應用程式中所需的各種元件。 ### 建立應用程式 UI 元件在這裡，我將引導您完成為應用程式建立使用者介面的過程。 ![應用程式使用者介面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9l4lvv4394gg033oatwq.png) 首先，導航至**`app/page.tsx`**檔案並將以下程式碼片段貼到其中。該文件呈現在**`components/app`**資料夾中聲明的 App 元件。 ``` "use client"; import { App } from "@/components/app/App"; export default function DashboardPage() { return <App />; } ``` 在`components/app`資料夾中建立`App.tsx` 、 `CampaignForm.tsx` 、 `MainNav.tsx`和`UserNav.tsx`檔案。 ``` cd components/app touch App.tsx CampaignForm.tsx MainNav.tsx UserNav.tsx ``` 將下面的程式碼片段複製到`App.tsx`檔案中。 ``` "use client"; import { DEFAULT_CAMPAIGNS } from "@/lib/data"; import { Campaign } from "@/lib/types"; import { randomId } from "@/lib/utils"; import { Dashboard } from "../dashboard/Dashboard"; import { CampaignForm } from "./CampaignForm"; import { useState } from "react"; import _ from "lodash"; export function App() { //👇🏻 default segments const [segments, setSegments] = useState<string[]>([ "Millennials/Female/Urban", "Parents/30s/Suburbs", "Seniors/Female/Rural", "Professionals/40s/Midwest", "Gamers/Male", ]); const [campaigns, setCampaigns] = useState<Campaign[]>( _.cloneDeep(DEFAULT_CAMPAIGNS) ); //👇🏻 updates campaign list function saveCampaign(campaign: Campaign) { //👇🏻 newly created campaign if (campaign.id === "") { campaign.id = randomId(); setCampaigns([campaign, ...campaigns]); } else { //👇🏻 existing campaign - search for the campaign and updates the campaign list const index = campaigns.findIndex((c) => c.id === campaign.id); if (index === -1) { setCampaigns([...campaigns, campaign]); } else { campaigns[index] = campaign; setCampaigns([...campaigns]); } } } const [currentCampaign, setCurrentCampaign] = useState<Campaign | undefined>( undefined ); return ( <div className='relative'> <CampaignForm segments={segments} currentCampaign={currentCampaign} setCurrentCampaign={setCurrentCampaign} saveCampaign={(campaign) => { if (campaign) { saveCampaign(campaign); } setCurrentCampaign(undefined); }} /> <Dashboard campaigns={campaigns} setCurrentCampaign={setCurrentCampaign} segments={segments} setSegments={setSegments} /> </div> ); } ``` - 從上面的程式碼片段來看， - 我為行銷活動建立了預設細分列表，並對已定義的行銷活動列表進行了深層複製。 - `saveCampaign`函數接受行銷活動作為參數。如果行銷活動沒有 ID，則表示它是新建立的，因此會將其新增至行銷活動清單。否則，它會找到該活動並更新其屬性。 - `Dashboard`和`CampaignForm`元件接受細分和行銷活動作為 props。 [Dashboard 元件](https://github.com/CopilotKit/campaign-manager-demo/blob/main/src/components/dashboard/Dashboard.tsx)在儀表板上顯示各種 UI 元素，而[CampaignForm 元件](https://github.com/CopilotKit/campaign-manager-demo/blob/main/src/components/app/CampaignForm.tsx)使用戶能夠在應用程式中建立和保存新的行銷活動。您也可以使用[GitHub 儲存庫](https://github.com/CopilotKit/campaign-manager-demo/tree/main/src/components)中的程式碼片段來更新儀表板和應用程式元件。恭喜！您應該有一個有效的 Web 應用程式，可讓使用者查看和建立新的行銷活動。在接下來的部分中，您將了解如何將 CopilotKit 加入到應用程式中，以根據每個行銷活動的目標和預算進行分析和決策。 ![應用概述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4phyaucli8pdcbe625u4.gif) --- 使用 CopilotKit 透過 AI 分析廣告活動 -------------------------- 在這裡，您將學習如何將人工智慧加入到應用程式中，以幫助您分析行銷活動並做出最佳決策。在繼續之前，請造訪[OpenAI 開發者平台](https://platform.openai.com/api-keys)並建立一個新的金鑰。 ![取得 OpenAI API 金鑰](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02972pt2aj3kf9l5suqq.png) 建立一個`.env.local`檔案並將新建立的金鑰複製到該檔案中。 ``` OPENAI_API_KEY=<YOUR_OPENAI_SECRET_KEY> OPENAI_MODEL=gpt-4-1106-preview ``` 接下來，您需要為 CopilotKit 建立 API 端點。在 Next.js 應用程式資料夾中，建立一個包含`route.ts`檔案的`api/copilotkit`資料夾。 ``` cd app mkdir api && cd api mkdir copilotkit && cd copilotkit touch route.ts ``` 將下面的程式碼片段複製到`route.ts`檔中。 [CopilotKit 後端](https://docs.copilotkit.ai/reference/CopilotBackend)接受使用者的請求並使用 OpenAI 模型做出決策。 ``` import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; export const runtime = "edge"; export async function POST(req: Request): Promise<Response> { const copilotKit = new CopilotBackend({}); const openaiModel = process.env["OPENAI_MODEL"]; return copilotKit.response(req, new OpenAIAdapter({ model: openaiModel })); } ``` 若要將您的應用程式連接到此 API 端點，請更新`app/page.tsx`文件，如下所示： ``` "use client"; import { App } from "@/components/app/App"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; export default function DashboardPage() { return ( <CopilotKit url='/api/copilotkit/'> <CopilotSidebar instructions='Help the user create and manage ad campaigns.' defaultOpen={true} labels={{ title: "Campaign Manager Copilot", initial: "Hello there! I can help you manage your ad campaigns. What campaign would you like to work on?", }} clickOutsideToClose={false} > <App /> </CopilotSidebar> </CopilotKit> ); } ``` `CopilotKit`元件包裝整個應用程式並接受包含 API 端點連結的`url`屬性。 `CopilotSidebar`元件為應用程式加入了一個聊天機器人側邊欄面板，使我們能夠向 CopilotKit 提供各種指令。 ![將 CopilotKit 加入 Next.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzh8ui253ftzmgtrcksd.gif) ### 如何讓AI副駕駛執行各種動作 CopilotKit 提供了兩個鉤子，使我們能夠處理使用者的請求並插入應用程式狀態： [useCopilotAction](https://docs.copilotkit.ai/reference/useCopilotAction)和[useMakeCopilotReadable](https://docs.copilotkit.ai/reference/useMakeCopilotReadable) 。 `useCopilotAction`掛鉤可讓您定義 CopilotKit 執行的動作。它接受包含以下參數的物件： - name - 操作的名稱。 - 描述 - 操作的描述。 - 參數 - 包含所需參數清單的陣列。 - render - 預設的自訂函數或字串。 - handler - 由操作觸發的可執行函數。 ``` useCopilotAction({ name: "sayHello", description: "Say hello to someone.", parameters: [ { name: "name", type: "string", description: "name of the person to say greet", }, ], render: "Process greeting message...", handler: async ({ name }) => { alert(`Hello, ${name}!`); }, }); ``` `useMakeCopilotReadable`掛鉤向 CopilotKit 提供應用程式狀態。 ``` import { useMakeCopilotReadable } from "@copilotkit/react-core"; const appState = ...; useMakeCopilotReadable(JSON.stringify(appState)); ``` CopilotKit 還允許您為使用者提示提供上下文，使其能夠做出充分且準確的決策。將`guidance.ts`和`script.ts`加入到專案內的`lib`資料夾中，並將此[指導](https://github.com/CopilotKit/campaign-manager-demo/blob/main/src/lib/guideline.ts)和[腳本建議](https://github.com/CopilotKit/campaign-manager-demo/blob/main/src/lib/script.ts)複製到檔案中，以便 CopilotKit 做出決策。在應用程式元件中，將當前日期、腳本建議和指導傳遞到 CopilotKit。 ``` import { GUIDELINE } from "@/lib/guideline"; import { SCRIPT_SUGGESTION } from "@/lib/script"; import { useCopilotAction, useMakeCopilotReadable, } from "@copilotkit/react-core"; export function App() { //-- 👉🏻 ...other component functions //👇🏻 Ground the Copilot with domain-specific knowledge for this use-case: marketing campaigns. useMakeCopilotReadable(GUIDELINE); useMakeCopilotReadable(SCRIPT_SUGGESTION); //👇🏻 Provide the Copilot with the current date. useMakeCopilotReadable("Today's date is " + new Date().toDateString()); return ( <div className='relative'> <CampaignForm segments={segments} currentCampaign={currentCampaign} setCurrentCampaign={setCurrentCampaign} saveCampaign={(campaign) => { if (campaign) { saveCampaign(campaign); } setCurrentCampaign(undefined); }} /> <Dashboard campaigns={campaigns} setCurrentCampaign={setCurrentCampaign} segments={segments} setSegments={setSegments} /> </div> ); } ``` 在`App`元件中建立一個 CopilotKit 操作，該操作可在使用者提供此類指令時建立新的活動或編輯現有的活動。 ``` useCopilotAction({ name: "updateCurrentCampaign", description: "Edit an existing campaign or create a new one. To update only a part of a campaign, provide the id of the campaign to edit and the new values only.", parameters: [ { name: "id", description: "The id of the campaign to edit. If empty, a new campaign will be created", type: "string", }, { name: "title", description: "The title of the campaign", type: "string", required: false, }, { name: "keywords", description: "Search keywords for the campaign", type: "string", required: false, }, { name: "url", description: "The URL to link the ad to. Most of the time, the user will provide this value, leave it empty unless asked by the user.", type: "string", required: false, }, { name: "headline", description: "The headline displayed in the ad. This should be a 5-10 words", type: "string", required: false, }, { name: "description", description: "The description displayed in the ad. This should be a short text", type: "string", required: false, }, { name: "budget", description: "The budget of the campaign", type: "number", required: false, }, { name: "objective", description: "The objective of the campaign", type: "string", enum: [ "brand-awareness", "lead-generation", "sales-conversion", "website-traffic", "engagement", ], }, { name: "bidStrategy", description: "The bid strategy of the campaign", type: "string", enum: ["manual-cpc", "cpa", "cpm"], required: false, }, { name: "bidAmount", description: "The bid amount of the campaign", type: "number", required: false, }, { name: "segment", description: "The segment of the campaign", type: "string", required: false, enum: segments, }, ], handler: (campaign) => { const newValue = _.assign( _.cloneDeep(currentCampaign), _.omitBy(campaign, _.isUndefined) ) as Campaign; setCurrentCampaign(newValue); }, render: (props) => { if (props.status === "complete") { return "Campaign updated successfully"; } else { return "Updating campaign"; } }, }); ``` {% 嵌入 https://www.youtube.com/watch?v=gCJpH6Tnj5g %} 新增另一個模擬 API 呼叫的操作，以允許 CopilotKit 從先前建立的活動中檢索歷史資料。 ``` // Provide this component's Copilot with the ability to retrieve historical cost data for certain keywords. // Will be called automatically when needed by the Copilot. useCopilotAction({ name: "retrieveHistoricalData", description: "Retrieve historical data for certain keywords", parameters: [ { name: "keywords", description: "The keywords to retrieve data for", type: "string", }, { name: "type", description: "The type of data to retrieve for the keywords.", type: "string", enum: ["CPM", "CPA", "CPC"], }, ], handler: async ({ type }) => { // fake an API call that retrieves historical data for cost for certain keywords based on campaign type (CPM, CPA, CPC) await new Promise((resolve) => setTimeout(resolve, 2000)); function getRandomValue(min: number, max: number) { return (Math.random() * (max - min) + min).toFixed(2); } if (type == "CPM") { return getRandomValue(0.5, 10); } else if (type == "CPA") { return getRandomValue(5, 100); } else if (type == "CPC") { return getRandomValue(0.2, 2); } }, render: (props) => { // Custom in-chat component rendering. Different components can be rendered based on the status of the action. let label = "Retrieving historical data ..."; if (props.args.type) { label = `Retrieving ${props.args.type} for keywords ...`; } if (props.status === "complete") { label = `Done retrieving ${props.args.type} for keywords.`; } const done = props.status === "complete"; return ( <div className=''> <div className=' w-full relative max-w-xs'> <div className='absolute inset-0 h-full w-full bg-gradient-to-r from-blue-500 to-teal-500 transform scale-[0.80] bg-red-500 rounded-full blur-3xl' /> <div className='relative shadow-xl bg-gray-900 border border-gray-800 px-4 py-8 h-full overflow-hidden rounded-2xl flex flex-col justify-end items-start'> <h1 className='font-bold text-sm text-white mb-4 relative z-50'> {label} </h1> <p className='font-normal text-base text-teal-200 mb-2 relative z-50 whitespace-pre'> {props.args.type && `Historical ${props.args.type}: ${props.result || "..."}`} </p> </div> </div> </div> ); }, }); ``` ![應用程式預覽](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz3xm63ciq5q3kyooz9s.gif) 恭喜！您已完成本教學的專案。結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具，可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣，還是對複雜任務的自動化感興趣，CopilotKit 都能讓您輕鬆實現。如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中，您應該考慮 CopilotKit。您可以在 GitHub 上找到本教學的源程式碼： <https://github.com/CopilotKit/campaign-manager-demo> 感謝您的閱讀！ --- 原文出處：https://dev.to/copilotkit/build-an-ai-powered-campaign-manager-nextjs-openai-copilotkit-59ii

0個讚 0留言 17瀏覽

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

我用新的程式語言微調了我的模型。你也可以做到！ 🚀

我使用 OpenAI ChatGPT-4 一段時間了。對此我沒什麼好說的。但有時，這還不夠。在[Winglang](https://github.com/winglang/wing)中，我們希望使用 OpenAI 和 ChatGPT-4 根據我們的文件回答人們的問題。您的選擇是： - 使用[OpenAI 助理](https://platform.openai.com/docs/assistants/overview?context=with-streaming)或任何其他基於向量的資料庫 (RAG)。由於 Wing 看起來像 JS，所以效果很好，但仍然有很多錯誤。 - 將整個文件傳遞到上下文視窗的成本非常高。很快，我們意識到這是行不通的。是時候舉辦我們自己的法學碩士課程了。 ![問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9x9ng6feh6x739djcb0.gif) --- 您的 LLM 資料集 ========== 在訓練模型之前，我們需要建立用於訓練模型的資料。在我們的例子中，是 Winglang 文件。我會做一些非常簡單的事情。 1. 從網站地圖中提取所有 URL，設定 GET 請求並收集內容。 2. 解析它；我們希望將所有 HTML 轉換為可讀內容。 3. 使用 ChatGPT 4 執行它，將內容轉換為 CSV 作為資料集。它應該是這樣的： ![法學碩士資料集](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2xq8lm4b31k8pop4gmc.png) 完成後，儲存包含一列名為`text`的 CSV 並新增問題和答案。我們稍後會用到它。它應該看起來像這樣： ``` text <s>[INST]How to define a variable in Winglang[/INST] let a = 'Hello';</s> <s>[INST]How to create a new lambda[/INST] bring cloud; let func = new cloud.Function(inflight () => { log('Hello from the cloud!'); });</s> ``` 將其保存在電腦上名為`data`新資料夾中。 --- Autotrain，您的模型 ============== 我的電腦很弱，所以我決定使用更小的模型 - 7b 參數： `mistralai/Mistral-7B-v0.1` 訓練模型的方法有數百萬種。我們將使用 Huggingface Autotrain。我們將使用他們的 CLI，而不執行任何 Python 程式碼🚀 當您使用 Huggingface 的 Autotrain 時，您可以在電腦上訓練它（這裡是我的方法）或在他們的伺服器上訓練它（付費）並訓練更大的模型。我的舊 Macbook Pro M1 2021 沒有 GPU。讓我們安裝自動訓練。 ``` pip install -U autotrain-advanced autotrain setup > setup_logs.txt ``` 然後，我們需要做的就是執行 autotrain 指令： ``` autotrain llm \ --train \ --model "mistralai/Mistral-7B-Instruct-v0.2" \ --project-name "autotrain-wing" \ --data-path data/ \ --text-column text \ --lr "0.0002" \ --batch-size "1" \ --epochs "3" \ --block-size "1024" \ --warmup-ratio "0.1" \ --lora-r "16" \ --lora-alpha "32" \ --lora-dropout "0.05" \ --weight-decay "0.01" \ --gradient-accumulation "4" \ --quantization "int4" \ --mixed-precision "fp16" \ --peft ``` 完成後，您將擁有一個名為“autotrain-wing”的新目錄，其中包含新的微調模型🚀 --- 玩模型 --- 要使用模型，請先執行： ``` pip install transformers torch ``` 完成後，使用以下程式碼建立一個名為 invoke.py 的新 Python 檔案： ``` from transformers import pipeline # Path to your local model directory model_path = "./autotrain-wing" # Load the model and tokenizer from the local directory classifier = pipeline("text-classification", model=model_path, tokenizer=model_path) # Example text to classify text = "Example text to classify" result = classifier(text) print(result) ``` 然後您可以透過執行 CLI 命令來執行它： ``` python invoke.py ``` 你就完成了🚀 --- 繼續攻讀法學碩士 -------- 我仍在學習法學碩士。我意識到的一件事是追蹤模型的變化並不容易。你不能真正將它與 Git 一起使用，因為模型可以達到非常大的大小 > 100 GB；這沒有多大意義——git 不能很好地處理它。更好的方法是使用名為[KitOps 的](https://github.com/jozu-ai/kitops/)工具。我認為它很快就會成為法學碩士世界的標準，所以請確保你給這個庫加註星標，以便以後可以使用它。 1. 下載最新的[KitOps 版本](https://github.com/jozu-ai/kitops/releases/tag/v0.1.3)並[安裝它](https://kitops.ml/docs/cli/installation.html)。 2. 轉到模型資料夾並執行命令來打包您的 LLM： ``` kit pack . ``` 3. 您也可以透過執行將其推送到 Docker hub ``` kit pack . -t [your registry address]/[your repository name]/mymodelkit:latest ``` > 💡 要了解如何使用 DockerHub，[請檢查此](https://kitops.ml/docs/quick-start.html) {% cta https://github.com/jozu-ai/kitops %}⭐️ Star KitOps，以便您稍後可以再次找到它⭐️{% endcta %} [![星庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/362tc5831i5ozbsau2o3.png)](https://github.com/jozu-ai/kitops) --- 我建立了一個新的 YouTube 頻道，主要是關於開源行銷:) （例如如何獲得星星、叉子和客戶端）如果您對此感興趣，請隨時在這裡訂閱： https://www.youtube.com/@nevo-david?sub\_confirmation=1 --- 原文出處：https://dev.to/github20k/i-fine-tuned-my-model-on-a-new-programming-language-you-can-do-it-too-449

0個讚 0留言 18瀏覽

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

🚀 21 個將你的開發技能帶上月球的工具 🌝

我見過數百種人工智慧工具，其中許多正在改變世界。作為開發人員，總是有很多事情需要學習，因此專注於節省時間來處理重要的事情非常重要。我將介紹 21 個供開發人員使用的工具，它們可以讓您的生活更輕鬆，特別是在開發人員體驗方面。相信我，這份清單會讓你大吃一驚！我們開始做吧。 --- 1. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ---------------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd10iiofzmt4or4db6ej.png) Taipy 是一個開源 Python 庫，可用於輕鬆的端到端應用程式開發，具有假設分析、智慧管道執行、內建調度和部署工具。我相信你們大多數人都不明白 Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。關鍵是性能，而 Taipy 是最佳選擇。雖然 Streamlit 是一種流行的工具，但在處理大型資料集時，其效能可能會顯著下降，這使得它在生產級使用上不切實際。另一方面，Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 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 v3.1 版本](https://docs.taipy.io/en/latest/relnotes/)。最新版本使得在 Taipy 的多功能零件物件中可視化任何 HTML 或 Python 物件成為可能。這意味著[Folium](https://python-visualization.github.io/folium/latest/) 、 [Bokeh](https://bokeh.org/) 、 [Vega-Altair](https://altair-viz.github.io/)和[Matplotlib](https://matplotlib.org/)等程式庫現在可用於視覺化。這也帶來了對[Plotly python](https://plotly.com/python/)的原生支持，使繪製圖表變得更加容易。他們還使用分散式運算提高了效能，但最好的部分是 Taipy，它的所有依賴項現在都與 Python 3.12 完全相容，因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 ![用例](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) 您也可以使用 Taipy 雲端部署應用程式。如果您想閱讀部落格來了解程式碼庫結構，您可以閱讀 HuggingFace[的使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。嘗試新技術通常很困難，但 Taipy 提供了[10 多個演示教程，](https://docs.taipy.io/en/release-3.1/gallery/)其中包含程式碼和適當的文件供您遵循。 ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wigid2aokt6spkkoivr.png) 例如，一些演示範例和專案想法： - [即時污染儀表板](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/pollution_sensors/) 使用工廠周圍的感測器測量空氣品質的用例，展示 Taipy 儀表板流資料的能力。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-realtime-pollution)。 - [詐欺辨識](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/fraud_detection/) Taipy 應用程式可分析信用卡交易以偵測詐欺行為。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-fraud-detection)。 - [新冠儀表板](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/covid_dashboard/) 這使用 2020 年的 Covid 資料集。還有一個預測頁面來預測傷亡人數。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-covid-dashboard)。 - [建立 LLM 聊天機器人](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/chatbot/) 該演示展示了 Taipy 使最終用戶能夠使用 LLM 執行推理的能力。在這裡，我們使用 GPT-3 建立一個聊天機器人，並將對話顯示在互動式聊天介面中。您可以輕鬆更改程式碼以使用任何其他 API 或模型。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-chatbot)。 - [即時人臉辨識](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/face_recognition/) 該演示將人臉辨識無縫整合到我們的平台中，使用網路攝影機提供使用者友好的即時人臉偵測體驗。檢查[GitHub 儲存庫](https://github.com/Avaiga/demo-face-recognition)。這些用例非常驚人，所以一定要檢查一下。 Taipy 在 GitHub 上有 8.2k+ Stars，並且處於`v3.1`版本，因此它們正在不斷改進。 {% cta https://github.com/Avaiga/taipy %} Star Taipy ⭐️ {% endcta %} --- 2. [DevToys](https://github.com/DevToys-app/DevToys) - 開發者的瑞士軍刀。 ---------------------------------------------------------------- ![開發玩具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zfl1wjr01fdvca6wxbi.png) DevToys 協助完成日常開發任務，例如格式化 JSON、比較文字和測試 RegExp。這樣，就無需使用不可信的網站來處理您的資料執行簡單的任務。透過智慧型偵測，DevToys 可以偵測用於複製到 Windows 剪貼簿的資料的最佳工具。緊湊的覆蓋範圍讓您可以保持應用程式較小並位於其他視窗之上。最好的部分是可以同時使用應用程式的多個實例。我可以肯定地說，開發人員甚至不知道這個很棒的專案。最後是一款專為 Windows 生態系統設計的軟體。哈哈！ ![工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7wd60jsgdb5tx2t2adi.png) 他們提供的一些工具是： > 轉換器 - JSON <> 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 上有 23k Stars，並且使用 C#。 {% cta https://github.com/DevToys-app/DevToys %} 明星 DevToys ⭐️ {% endcta %} --- 3. [Pieces](https://github.com/pieces-app) - 您的工作流程副駕駛。 ------------------------------------------------------- ![件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf2qgqtpv78fxw5guqm5.png) Pieces 是一款支援人工智慧的生產力工具，旨在透過智慧程式碼片段管理、情境化副駕駛互動和主動呈現有用材料來幫助開發人員管理混亂的工作流程。它最大限度地減少了上下文切換、簡化了工作流程並提升了整體開發體驗，同時透過完全離線的 AI 方法維護了工作的隱私和安全性。太棒了：D ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2ro3rcwnqp4qrmv5e8s.png) 它與您最喜歡的工具無縫集成，以簡化、理解和提升您的編碼流程。它具有比表面上看到的更令人興奮的功能。 - 它可以透過閃電般快速的搜尋體驗找到您需要的材料，讓您根據您的喜好透過自然語言、程式碼、標籤和其他語義進行查詢。可以放心地說“您的個人離線谷歌”。 - Pieces 使用 OCR 和 Edge-ML 升級螢幕截圖，以提取程式碼並修復無效字元。因此，您可以獲得極其準確的程式碼提取和深度元資料豐富。您可以查看 Pieces 可用[功能的完整清單](https://pieces.app/features)。您可以閱讀[文件](https://docs.pieces.app/)並存取[網站](https://pieces.app/)。他們為 Pieces OS 用戶端提供了一系列 SDK 選項，包括[TypeScript](https://github.com/pieces-app/pieces-os-client-sdk-for-typescript) 、 [Kotlin](https://github.com/pieces-app/pieces-os-client-sdk-for-kotlin) 、 [Python](https://github.com/pieces-app/pieces-os-client-sdk-for-python)和[Dart](https://github.com/pieces-app/pieces-os-client-sdk-for-dart) 。就開源流行度而言，他們仍然是新的，但他們的社群是迄今為止我見過的最好的社群之一。加入他們，成為 Pieces 的一部分！ {% cta https://github.com/pieces-app/ %} 星星碎片 ⭐️ {% endcta %} --- 4. [Infisical－](https://github.com/Infisical/infisical)秘密管理平台。 -------------------------------------------------------------- ![內部的](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 %} --- 5. [Mintlify](https://github.com/mintlify/writer) - 在建置時出現的文件。 -------------------------------------------------------------- ![精簡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvk07kmn8p48cpssogov.png) Mintlify 是一款由人工智慧驅動的文件編寫器，您只需 1 秒鐘即可編寫程式碼文件 :D 幾個月前我發現了 Mintlify，從那時起我就一直是它的粉絲。我見過很多公司使用它，甚至我使用我的商務電子郵件產生了完整的文件，結果證明這是非常簡單和體面的。如果您需要詳細的文件，Mintlify 就是解決方案。主要用例是根據我們將在此處討論的程式碼產生文件。當您編寫程式碼時，它會自動記錄程式碼，以便其他人更容易跟上。您可以安裝[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=mintlify.document)或將其安裝在[IntelliJ](https://plugins.jetbrains.com/plugin/18606-mintlify-doc-writer)上。您只需突出顯示程式碼或將遊標放在要記錄的行上。然後點選「編寫文件」按鈕（或按 ⌘ + 。）您可以閱讀[文件](https://github.com/mintlify/writer?tab=readme-ov-file#%EF%B8%8F-mintlify-writer)和[安全指南](https://writer.mintlify.com/security)。如果您更喜歡教程，那麼您可以觀看[Mintlify 的工作原理](https://www.loom.com/embed/3dbfcd7e0e1b47519d957746e05bf0f4)。它支援 10 多種程式語言，並支援許多文件字串格式，例如 JSDoc、reST、NumPy 等。順便說一句，他們的網站連結是[writer.mintlify.com](https://writer.mintlify.com/) ；回購協議中目前的似乎是錯誤的。 Mintlify 是一個方便的工具，用於記錄程式碼，這是每個開發人員都應該做的事情。它使其他人更容易有效地理解您的程式碼。它在 GitHub 上有大約 2.5k 顆星，基於 TypeScript 建置，受到許多開發人員的喜愛。 {% cta https://github.com/mintlify/writer %} Star Mintlify ⭐️ {% endcta %} --- 6. [Replexica](https://github.com/replexica/replexica) - 用於 React 的 AI 支援的 i18n 工具包。 ------------------------------------------------------------------------------------ ![反射](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htgshukxy927iy37ui33.png) 在地化方面的困難是真實存在的，因此人工智慧的幫助絕對是一個很酷的概念。 Replexica 是 React 的 i18n 工具包，可快速發布多語言應用程式。它不需要將文字提取到 JSON 檔案中，並使用 AI 支援的 API 進行內容處理。它有以下兩個部分： 1. Replexica Compiler - React 的開源編譯器插件。 2. Replexica API - 雲端中的 i18n API，使用 LLM 執行翻譯。（基於使用情況，它有免費套餐）支援的一些 i18n 格式包括： 1. 無 JSON 的 Replexica 編譯器格式。 2. Markdown 內容的 .md 檔案。 3. 基於舊版 JSON 和 YAML 的格式。當他們達到 500 星時，他們也在 DEV 上發布了官方公告。我是第一批讀者之一（少於 3 個反應）。它們涵蓋了很多內容，因此您應該閱讀 Max 的[《We Got 500 Stars What Next》](https://dev.to/maxprilutskiy/we-got-500-github-stars-whats-next-2njc) 。為了給出 Replexica 背後的總體思路，這是基本 Next.js 應用程式所需的唯一更改，以使其支援多語言。開始使用以下 npm 指令。 ``` // install pnpm add replexica @replexica/react @replexica/compiler // login to Replexica API. pnpm replexica auth --login ``` 您可以這樣使用它。 ``` // next.config.mjs // Import Replexica Compiler import replexica from '@replexica/compiler'; /** @type {import('next').NextConfig} */ const nextConfig = {}; // Define Replexica configuration /** @type {import('@replexica/compiler').ReplexicaConfig} */ const replexicaConfig = { locale: { source: 'en', targets: ['es'], }, }; // Wrap Next.js config with Replexica Compiler export default replexica.next( replexicaConfig, nextConfig, ); ``` 您可以閱讀如何[開始使用](https://github.com/replexica/replexica/blob/main/getting-started.md)以及清楚記錄的有關[幕後使用內容的](https://github.com/replexica/replexica?tab=readme-ov-file#whats-under-the-hood)內容。 Replexica 編譯器支援 Next.js App Router，Replexica API 支援英文🇺🇸和西班牙文🇪🇸。他們計劃接下來發布 Next.js Pages Router + 法語🇫🇷語言支援！他們在 GitHub 上擁有 740 多個 Star，並且基於 TypeScript 建置。您應該密切關注該專案以獲得進一步進展！ {% cta https://github.com/replexica/replexica %} Star Replexica ⭐️ {% endcta %} --- 7. [Flowise](https://github.com/FlowiseAI/Flowise) - 拖放 UI 來建立您的客製化 LLM 流程。 --------------------------------------------------------------------------- ![弗洛伊薩伊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5bp43nil764fhe4a05z.png) Flowise 是一款開源 UI 視覺化工具，用於建立客製化的 LLM 編排流程和 AI 代理程式。開始使用以下 npm 指令。 ``` npm install -g flowise npx flowise start OR npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234 ``` 這就是整合 API 的方式。 ``` import requests url = "/api/v1/prediction/:id" def query(payload): response = requests.post( url, json = payload ) return response.json() output = query({ question: "hello!" )} ``` ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahk2ovjrpq1qk3r5pfot.png) 您可以閱讀[文件](https://docs.flowiseai.com/)。 ![流程化人工智慧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trkltpn5lk1y1pte0smd.png) 雲端主機不可用，因此您必須使用這些[說明](https://github.com/FlowiseAI/Flowise?tab=readme-ov-file#-self-host)自行託管。讓我們探討一些用例： - 假設您有一個網站（可以是商店、電子商務網站或部落格），並且您希望廢棄該網站的所有相關連結，並讓法學碩士回答您網站上的任何問題。您可以按照此[逐步教學](https://docs.flowiseai.com/use-cases/web-scrape-qna)來了解如何實現相同的目標。 ![刮刀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e91sz2mga5wvc0x2hp2g.png) - 您還可以建立一個自訂工具，該工具將能夠呼叫 Webhook 端點並將必要的參數傳遞到 Webhook 主體中。請依照本[指南](https://docs.flowiseai.com/use-cases/webhook-tool)使用 Make.com 建立 Webhook 工作流程。 ![網路鉤子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckyivo9dvue461jc9pv4.png) 還有許多其他用例，例如建立 SQL QnA 或與 API 互動。 FlowiseAI 在 GitHub 上擁有超過 27,500 個 Star，並擁有超過 10,000 個分叉，因此具有良好的整體比率。 {% cta https://github.com/FlowiseAI/Flowise %} 明星 Flowise ⭐️ {% endcta %} --- 8. [Hexo](https://github.com/hexojs/hexo) - 一個快速、簡單且功能強大的部落格框架。 --------------------------------------------------------------- ![六角形](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vos07fyydiupqqplo2s.png) 大多數開發人員更喜歡自己的博客，如果您也是如此。 Hexo 可能是你不知道的工具。 Hexo 支援許多功能，例如超快的生成速度，支援 GitHub Flavored Markdown 和大多數 Octopress 插件，提供對 GitHub Pages、Heroku 等的一命令部署，以及可實現無限擴展性的強大 API 和數百個主題和插件。這意味著您可以用 Markdown（或其他標記語言）編寫帖子，Hexo 在幾秒鐘內生成具有漂亮主題的靜態檔案。開始使用以下 npm 指令。 ``` npm install hexo-cli -g ``` 您可以這樣使用它。 ``` // Setup your blog hexo init blog // Start the server hexo server // Create a new post hexo new "Hello Hexo" ``` 您可以閱讀[文件](https://hexo.io/docs/)，查看 Hexo 提供的所有[400 多個外掛程式](https://hexo.io/plugins/)和[主題集](https://hexo.io/themes/)。據我所知，這些外掛程式支援廣泛的用例，例如 Hexo 的 Ansible 部署器外掛程式。您可以查看有關在[Hexo 上編寫和組織內容的](https://www.youtube.com/watch?v=AIqBubK6ZLc&t=6s)YouTube 教學。 Hexo 在 GitHub 上擁有超過 38,000 顆星，並被 GitHub 上超過 125,000 名開發者使用。它們位於`v7`版本中，解壓縮後大小為`629 kB` 。 {% cta https://github.com/hexojs/hexo %} Star Hexo ⭐️ {% endcta %} --- 9.[螢幕截圖到程式碼](https://github.com/abi/screenshot-to-code)- 放入螢幕截圖並將其轉換為乾淨的程式碼。 --------------------------------------------------------------------------- ![截圖到程式碼](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 上擁有超過 47k 顆星星，並支援許多技術堆疊，例如 React 和 Vue，以及不錯的 AI 模型，例如 GPT-4 Vision、Claude 3 Sonnet 和 DALL-E 3。 {% cta https://github.com/abi/screenshot-to-code %} 將螢幕截圖轉為程式碼 ⭐️ {% endcta %} --- 10. [Appsmith](https://github.com/appsmithorg/appsmith) - 建立管理面板、內部工具和儀表板的平台。 ----------------------------------------------------------------------------- ![應用史密斯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rt7s0r3wz2leec83cl17.png) 管理面板和儀表板是任何軟體創意（在大多數情況下）的一些常見部分，我嘗試從頭開始建立它，這會帶來很多痛苦和不必要的辛苦工作。您可能已經看到組織建立了內部應用程式，例如儀表板、資料庫 GUI、管理面板、批准應用程式、客戶支援儀表板等，以幫助其團隊執行日常操作。正如我所說，Appsmith 是一個開源工具，可以實現這些內部應用程式的快速開發。首先，請觀看這個[YouTube 影片](https://www.youtube.com/watch?v=NnaJdA1A11s)，該影片在 100 秒內解釋了 Appsmith。 {% 嵌入 https://www.youtube.com/watch?v=NnaJdA1A11s %} 他們提供拖放小部件來建立 UI。您可以使用 45 多個可自訂的小工具在幾分鐘內建立漂亮的響應式 UI，而無需編寫一行 HTML/CSS。尋找[小部件的完整清單](https://www.appsmith.com/widgets)。 ![按鈕點擊小工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqpnnslvsvjl4gifseon.png) ![驗證](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/489fly7tvknz2uv2mgei.png) Appsmith 幾乎可以在 GUI 上的小部件屬性、事件偵聽器、查詢和其他設定內的任何位置編寫 JavaScript 程式碼。 Appsmith 支援在`{{ }}`內編寫單行程式碼，並將括號之間編寫的任何內容解釋為 JavaScript 表達式。 ``` /*Filter the data array received from a query*/ {{ QueryName.data.filter((row) => row.id > 5 ) }} or {{ storeValue("userID", 42); console.log(appsmith.store.userID); showAlert("userID saved"); }} ``` 您需要使用立即呼叫函數表達式（IIFE）來編寫多行。例如，無效程式碼和有效程式碼。 ``` // invalid code /*Call a query to fetch the results and filter the data*/ {{ const array = QueryName.data; const filterArray = array.filter((row) => row.id > 5); return filterArray; }} /* Check the selected option and return the value*/ {{ if (Dropdown.selectedOptionValue === "1") { return "Option 1"; } else { return "Option 2"; } }} // valid code /* Call a query and then manipulate its result */ {{ (function() { const array = QueryName.data; const filterArray = array.filter((row) => row.id > 5); return filterArray; })() }} /* Verify the selected option and return the value*/ {{ (function() { if (Dropdown.selectedOptionValue === "1") { return "Option 1"; } else { return "Option 2"; } })() }} ``` 您可以透過幾個簡單的步驟建立從簡單的 CRUD 應用程式到複雜的多步驟工作流程的任何內容： 1. 與資料庫或 API 整合。 Appsmith 支援最受歡迎的資料庫和 REST API。 2. 使用內建小工具建立您的應用程式佈局。 3. 在編輯器中的任何位置使用查詢和 JavaScript 來表達您的業務邏輯。 4. Appsmith 支援使用 Git 進行版本控制，以使用分支來協作建立應用程式來追蹤和回滾變更。部署應用程式並分享:) ![應用史密斯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yltcrmuzwdoydrwyqjpp.png) 您可以閱讀[文件](https://docs.appsmith.com/)和[操作指南](https://docs.appsmith.com/connect-data/how-to-guides)，例如如何將其連接到本機資料來源或\[如何與第三方工具整合\]（與第三方工具整合）。您可以自行託管或使用雲端。他們還提供[20 多個模板](https://www.appsmith.com/templates)，以便您可以快速入門。一些有用的是： - [維修訂單管理](https://www.appsmith.com/template/Maintenance-Order-Management) - [加密即時追蹤器](https://www.appsmith.com/template/crypto-live-tracker) - [內容管理系統](https://www.appsmith.com/template/content-management-system) - [WhatsApp 信使](https://www.appsmith.com/template/whatsapp-messenger) Appsmith 在 GitHub 上擁有超過 31,000 顆星，發布了 200 多個版本。 {% cta https://github.com/appsmithorg/appsmith %} Star Appsmith ⭐️ {% endcta %} --- 11. [BlockNote](https://github.com/TypeCellOS/BlockNote) - 基於區塊（Notion 樣式）且可擴充的富文本編輯器。 -------------------------------------------------------------------------------------- ![區塊註釋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eddx8cld0g492w3a8fjh.png) 人們常說，除非您正在學習新東西，否則不要重新發明輪子。 Blocknote 是開源的 Block 為基礎的 React 富文本編輯器。您可以輕鬆地將現代文字編輯體驗加入到您的應用程式中。 Blocknote 建構在 Prosemirror 和 Tiptap 之上。它們有很多功能，如下所示。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9kd6xnkg9fa5j29frot.png) ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezuz7ywh6vefixmpeyzk.png) 您可以輕鬆自訂內建 UI 元件，或建立自訂區塊、內聯內容和樣式。如果您想更進一步，您可以使用額外的 Prosemirror 或 TipTap 外掛程式來擴充核心編輯器。其他庫雖然功能強大，但通常具有相當陡峭的學習曲線，並且要求您自訂編輯器的每個細節。這可能需要數月的專門工作。相反，BlockNote 只需最少的設定即可提供出色的體驗，包括現成的動畫 UI。開始使用以下 npm 指令。 ``` npm install @blocknote/core @blocknote/react ``` 您可以這樣使用它。透過`useCreateBlockNote`鉤子，我們可以建立一個新的編輯器實例，然後使用`theBlockNoteView`元件來渲染它。 `@blocknote/react/style.css`也被匯入來新增編輯器的預設樣式和 BlockNote 匯出的 Inter 字體（可選）。 ``` import "@blocknote/core/fonts/inter.css"; import { BlockNoteView, useCreateBlockNote } from "@blocknote/react"; import "@blocknote/react/style.css"; export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote(); // Renders the editor instance using a React component. return <BlockNoteView editor={editor} />; } ``` 您可以閱讀可用的[文件](https://www.blocknotejs.org/docs)和[ui 元件](https://www.blocknotejs.org/docs/ui-components)。您應該嘗試一下，特別是因為它包含廣泛的功能，例如「斜線」選單、流暢的動畫以及建立即時協作應用程式的潛力。 ![削減](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0i7ob8nrhpl7r70k6527.png) 斜線選單 ![即時協作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id22qol6y0838zgwad3y.png) 即時協作 ![格式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8maems8tfhtehw9lkol.png) 格式選單他們還提供了[20 多個範例](https://www.blocknotejs.org/examples)以及預覽和程式碼，您可以使用它們來快速跟進。 ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uillknk0ogkcvpula7b.png) Blocknote 在 GitHub 上擁有超過 5,000 顆星，並有超過 1,500 名開發者在使用。 {% cta https://github.com/TypeCellOS/BlockNote %} 星 BlockNote ⭐️ {% endcta %} --- 12. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 ------------------------------------------------------------------------------------- ![副駕駛套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzuxjfog2ldam3csrl62.png) 將 AI 功能整合到 React 中是很困難的，這就是 Copilot 的用武之地。一個簡單快速的解決方案，可將可投入生產的 Copilot 整合到任何產品中！您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui ``` Copilot Portal 是 CopilotKit 提供的元件之一，CopilotKit 是一個應用程式內人工智慧聊天機器人，可查看目前應用狀態並在應用程式內採取操作。它透過插件與應用程式前端和後端以及第三方服務進行通訊。這就是整合聊天機器人的方法。 `CopilotKit`必須包裝與 CopilotKit 互動的所有元件。建議您也開始使用`CopilotSidebar` （您可以稍後切換到不同的 UI 提供者）。 ``` "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; export default function RootLayout({children}) { return ( <CopilotKit url="/path_to_copilotkit_endpoint/see_below"> <CopilotSidebar> {children} </CopilotSidebar> </CopilotKit> ); } ``` 您可以使用此[快速入門指南](https://docs.copilotkit.ai/getting-started/quickstart-backend)設定 Copilot 後端端點。之後，您可以讓 Copilot 採取行動。您可以閱讀如何提供[外部上下文](https://docs.copilotkit.ai/getting-started/quickstart-chatbot#provide-context)。您可以使用`useMakeCopilotReadable`和`useMakeCopilotDocumentReadable`反應掛鉤來執行此操作。 ``` "use client"; import { useMakeCopilotActionable } from '@copilotkit/react-core'; // Let the copilot take action on behalf of the user. useMakeCopilotActionable( { name: "setEmployeesAsSelected", // no spaces allowed in the function name description: "Set the given employees as 'selected'", argumentAnnotations: [ { name: "employeeIds", type: "array", items: { type: "string" } description: "The IDs of employees to set as selected", required: true } ], implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds), }, [] ); ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)並查看[演示影片](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file#demo)。您可以輕鬆整合 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 供應商。您可以按照本[指南](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)將聊天機器人整合到您的應用程式中。基本概念是在幾分鐘內建立可用於基於 LLM 的應用程式的 AI 聊天機器人。用例是巨大的，作為開發人員，我們絕對應該在下一個專案中嘗試使用 CopilotKit。 CopilotKit 在 GitHub 上擁有超過 4,200 個星星，發布了 200 多個版本，這意味著它們正在不斷改進。 {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} --- 13.[自動完成](https://github.com/withfig/autocomplete)- IDE 風格的自動完成功能適用於您現有的終端和 shell。 ---------------------------------------------------------------------------------- ![自動完成](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)了解如何開始。他們在 GitHub 上有 24k+ Stars，這對於經常使用 shell 或終端機的開發人員來說非常有用。 {% cta https://github.com/withfig/autocomplete %} 星狀自動完成 ⭐️ {% endcta %} --- 14. [Tooljet](https://github.com/ToolJet/ToolJet) - 用於建立業務應用程式的低程式碼平台。 ---------------------------------------------------------------------- ![工具噴射器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhipvjl2wnthjccgrpij.png) 我們都建立前端，但它通常非常複雜並且涉及很多因素。這樣可以省去很多麻煩。 ToolJet 是一個開源低程式碼框架，可以用最少的工程工作來建置和部署內部工具。 ToolJet 的拖放式前端建構器可讓您在幾分鐘內建立複雜的響應式前端。您可以整合各種資料來源，包括PostgreSQL、MongoDB、Elasticsearch等資料庫；具有 OpenAPI 規範和 OAuth2 支援的 API 端點； SaaS 工具，例如 Stripe、Slack、Google Sheets、Airtable 和 Notion；以及 S3、GCS 和 Minio 等物件儲存服務來取得和寫入資料。一切：）這就是 Tooljet 的工作原理。 ![工具噴射器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6vv09z7ioma1ce2ttei.png) 您可以在 ToolJet 中開發多步驟工作流程以自動化業務流程。除了建置和自動化工作流程之外，ToolJet 還可以在您的應用程式中輕鬆整合這些工作流程。 ![工作流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eh2vk3kih9fhck6okf67.png) 您可以閱讀此[快速入門指南](https://docs.tooljet.com/docs/getting-started/quickstart-guide)，該指南向您展示如何使用 ToolJet 在幾分鐘內建立員工目錄應用程式。該應用程式將讓您透過漂亮的用戶介面追蹤和更新員工資訊。查看可用[功能列表](https://github.com/ToolJet/ToolJet?tab=readme-ov-file#all-features)，包括 45 多個內建響應式元件、50 多個資料來源等等。您可以閱讀[文件](https://docs.tooljet.com/docs/)並查看[操作指南](https://docs.tooljet.com/docs/how-to/use-url-params-on-load)。它們在 GitHub 上有 26k+ Stars，並且基於 JavaScript 建置。他們也獲得了 GitHub 的資助，從而建立了巨大的信任。 {% cta https://github.com/ToolJet/ToolJet %} Star ToolJet ⭐️ {% endcta %} --- 15. [Apitable](https://github.com/apitable/apitable) - 用於建立協作應用程式的 API 導向的低程式碼平台。 --------------------------------------------------------------------------------- ![有能力的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58syhvpb2fn6hhlyrtst.png) APITable 是一個面向 API 的低程式碼平台，用於建立協作應用程式，並表示它比所有其他 Airtable 開源替代品都要好。有很多很酷的功能，例如： - 即時協作。 ![即時協作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58kpvpab2nj92421yvy3.gif) - 您可以產生自動表單。 ![形式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jo084gg0cd9xiud3nz3.gif) - 無限的跨錶連結。 ![交叉表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jnvb9sdp3uqrcn55hwug.gif) - API 第一個面板。 ![API第一個面板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7u48ue4rl0q41rhh6bif.gif) - 強大的行/列功能。 ![行列](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apxqwp84awdbj7cdw5yu.gif) 您可以閱讀完整的[功能清單](https://github.com/apitable/apitable?tab=readme-ov-file#-features)。您可以嘗試[apitable](https://aitable.ai/)並在 apitable 的[live Gitpod demo](https://gitpod.io/#https://github.com/apitable/apitable)中查看該專案的演示。您也可以閱讀[安裝指南](https://github.com/apitable/apitable?tab=readme-ov-file#installation)，在本機或雲端運算環境中安裝 APITable。 {% cta https://github.com/apitable/apitable %} Star Apitable ⭐️ {% endcta %} --- 16. [n8n](https://github.com/n8n-io/n8n) - 工作流程自動化工具。 ----------------------------------------------------- ![n8n](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 上有 39k+ Stars，並提供兩個包供整體使用。 {% cta https://github.com/n8n-io/n8n %} 明星 n8n ⭐️ {% endcta %} --- 17. [DOMPurify](https://github.com/cure53/DOMPurify) - 一個僅限 DOM、超快、超級容忍 XSS 的 HTML 清理程式。 ---------------------------------------------------------------------------------------- ![DOM純化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r846r2hmmw9d9wzvbocz.png) DOMPurify 是一款僅限 DOM、超快、超級容忍 XSS 的 HTML、MathML 和 SVG 清理工具。作為開發人員，我們的應用程式需要它來確保它們足夠安全。 DOMPurify 可以淨化 HTML 並防止 XSS 攻擊。您可以向 DOMPurify 提供一個充滿髒 HTML 的字串，它將傳回一個包含乾淨 HTML 的字串（除非另有配置）。 DOMPurify 將刪除所有包含危險 HTML 的內容，從而防止 XSS 攻擊和其他惡意行為。這也太快了。他們使用瀏覽器提供的技術並將其轉變為 XSS 過濾器。您的瀏覽器速度越快，DOMPurify 的速度就越快。 DOMPurify 使用 JavaScript 編寫，適用於所有現代瀏覽器（Safari (10+)、Opera (15+)、Edge、Firefox 和 Chrome - 以及幾乎所有使用 Blink、Gecko 或 WebKit 的其他瀏覽器）。它不會在 MSIE 或其他舊版瀏覽器上中斷。它根本什麼都不做。開始使用以下 npm 指令。 ``` npm install dompurify npm install jsdom // or use the unminified development version <script type="text/javascript" src="src/purify.js"></script> ``` 您可以這樣使用它。 ``` const createDOMPurify = require('dompurify'); const { JSDOM } = require('jsdom'); const window = new JSDOM('').window; const DOMPurify = createDOMPurify(window); const clean = DOMPurify.sanitize('<b>hello there</b>'); ``` 如果您遇到問題，請參閱[文件](https://github.com/cure53/DOMPurify?tab=readme-ov-file#how-do-i-use-it)。他們已經記錄了使用腳本或在伺服器端執行它。您可以看到一些 [純化樣品](https://github.com/cure53/DOMPurify?tab=readme-ov-file#some-purification-samples-please)並觀看[現場演示](https://cure53.de/purify)。使用起來也非常簡單。 DOMPurify 於 2014 年 2 月啟動，同時版本已達 v3.1.0。其中涉及到很多概念，我渴望探索它們。如果您有任何與此相關的令人興奮的事情，請告訴我。我發現的另一個有用的替代方案是[validator.js](https://github.com/validatorjs/validator.js) 。他們在 GitHub 上擁有超過 12,000 顆星，被超過 30 萬開發者使用，每週下載量超過 5,475,000 次，這使得他們非常可信。 {% cta https://github.com/cure53/DOMPurify %} 明星 DOMPurify ⭐️ {% endcta %} --- 18. [OpenDevin](https://github.com/OpenDevin/OpenDevin) - 更少的程式碼，更多的內容。 ----------------------------------------------------------------------- ![奧彭文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4on63bb02g4x4ny8gtcn.png) ![奧彭文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0yepod2rye2jk5r12dt.png) 這是一個開源專案，旨在複製 Devin，一名自主人工智慧軟體工程師，能夠執行複雜的工程任務並在軟體開發專案上與用戶積極協作。該計畫致力於透過開源社群的力量複製、增強和創新 Devin。只是想讓你知道，這是在德文被介紹之前。您可以閱讀帶有要求的[安裝說明](https://github.com/OpenDevin/OpenDevin?tab=readme-ov-file#installation)。他們使用 LiteLLM，因此您可以使用任何基礎模型來執行 OpenDevin，包括 OpenAI、Claude 和 Gemini。如果您想為 OpenDevin 做出貢獻，您可以查看 [演示](https://github.com/OpenDevin/OpenDevin/blob/main/README.md#opendevin-code-less-make-more)和[貢獻指南](https://github.com/OpenDevin/OpenDevin/blob/main/CONTRIBUTING.md)。它在 GitHub 上擁有超過 10,700 個 Star，並且正在快速成長。 {% cta https://github.com/OpenDevin/OpenDevin %} 明星 OpenDevin ⭐️ {% endcta %} --- 19. [Amplification－](https://github.com/amplication/amplication)後端開發平台。 ----------------------------------------------------------------------- ![放大](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w7yi3kvwrniredj4lp5r.png) 我想我們都同意，如果我們要達到標準，設定後端並從頭開始是很困難的。我知道 Appwrite 和 Supabase 在功能方面要好得多，但每種情況都是獨特的，這可能會點擊而不是那些。 ![放大](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5wud5sef1lpwzi8zdq2.png) Amplication 旨在徹底改變可擴展且安全的 Node.js 應用程式的建立。他們消除了重複的編碼任務，並提供可立即投入生產的基礎設施程式碼，這些程式碼根據您的規範精心定制，並遵循行業最佳實踐。其用戶友好的介面促進了 API、資料模型、資料庫、身份驗證和授權的無縫整合。 Amplication 建立在靈活的、基於插件的架構之上，允許輕鬆定製程式碼並提供大量整合選項。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3lc27fgvk8yearir13z.png) ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zgix42tplg9hwko3a7u.png) 您可以閱讀[文件](https://docs.amplication.com/)並查看可用的[社群插件](https://docs.amplication.com/plugins-list/)清單。他們還提供了[逐步教程](https://docs.amplication.com/tutorials/#step-by-step-tutorials)，以幫助您使用 Angular 或 React 建立應用程式。 Amplification 在 GitHub 上擁有超過 13k 顆星，發布了 170 多個版本，因此它們不斷發展。 {% cta https://github.com/amplication/amplication %} 星狀放大 ⭐️ {% endcta %} --- 20. [Embla 旋轉木馬](https://github.com/davidjerleke/embla-carousel)-。 ------------------------------------------------------------------ ![Embla 旋轉木馬](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aj2expoo15t6xhgcm3hi.png) 我們都在應用程式中使用輪播，有時會切換到網格佈局，因為輪播並不總是好看，但這會改變您對輪播的看法。我之所以了解 Embla Carousel，是因為 Shadcn/ui 在他們的 UI 系統中使用了它。 Embla Carousel 是一個簡單的輪播庫，具有出色的流暢運動和出色的滑動精度。它與庫無關、無依賴性且 100% 開源。如果您不確定，我建議您查看[基本的實例](https://www.embla-carousel.com/examples/predefined/)。 ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/paqu3ozlvhk5km5746pe.png) ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qxfvmn83et836zon4ua.png) ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/abukp6j29gsaade7eci8.png) ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/locv2kqksvpl0ha8a9te.png) 我最喜歡的是視差，它可以提供非常酷且平滑的過渡。它們支援 CDN、react、Vue、Svelte 和 Solid。開始使用以下 npm 指令 (react)。 ``` npm install embla-carousel-react --save ``` 您可以這樣使用它。 Embla Carousel 提供了方便的 useEmblaCarousel 鉤子，用於與 React 無縫整合。最小的設定需要一個溢出包裝器和一個滾動容器。 `useEmblaCarousel`掛鉤將 Embla Carousel 選項作為第一個參數。您還需要使用 useEffect 存取 API ``` import React, { useEffect } from 'react' import useEmblaCarousel from 'embla-carousel-react' export function EmblaCarousel() { const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }) useEffect(() => { if (emblaApi) { console.log(emblaApi.slideNodes()) // Access API } }, [emblaApi]) return ( <div className="embla" ref={emblaRef}> <div className="embla__container"> <div className="embla__slide">Slide 1</div> <div className="embla__slide">Slide 2</div> <div className="embla__slide">Slide 3</div> </div> </div> ) } ``` 他們還提供了一組插件，您可以加入它們以實現自動播放等額外功能。 ``` npm install embla-carousel-autoplay --save ``` ``` import React, { useEffect } from 'react' import useEmblaCarousel from 'embla-carousel-react' import Autoplay from 'embla-carousel-autoplay' export function EmblaCarousel() { const [emblaRef] = useEmblaCarousel({ loop: false }, [Autoplay()]) return ( <div className="embla" ref={emblaRef}> <div className="embla__container"> <div className="embla__slide">Slide 1</div> <div className="embla__slide">Slide 2</div> <div className="embla__slide">Slide 3</div> </div> </div> ) } ``` 尋找[插件的完整列表](https://www.embla-carousel.com/plugins/)，包括自動滾動和滾輪手勢。您可以閱讀有關如何實現不同部分（例如斷點或上一個/下一個按鈕）的[文件](https://www.embla-carousel.com/get-started/)和[指南](https://www.embla-carousel.com/guides/)。最讓我驚訝的部分是，您可以使用他們的[生成器](https://www.embla-carousel.com/examples/generator/)使用您自己的一組選項來產生自訂輪播。 ![發電機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wlq7l44bwl681644xf3.png) ![發電機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r1y3kr926h87clbqosw.png) 它們在 GitHub 上擁有 4.9K 顆星，並被超過 26000 名開發人員使用。如果我必須使用一個，我肯定會使用這個。 {% cta repo %} 明星名稱 ⭐️ {% endcta %} --- [21.Documenso](https://github.com/documenso/documenso) - 開源 DocuSign 替代方案。 -------------------------------------------------------------------------- ![文獻](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cttvudzx02wqsu04qt8v.gif) 如果您從事自由職業並需要簽署協議，這是最佳選擇。我們不應該浪費時間，而應該專注於重要的事情。以數位方式簽署文件應該既快速又簡單，並且應該成為全球簽署的每個文件的最佳實踐。如今，這在技術上相當簡單，但它也為每個簽名引入了一個新方：簽名工具提供者。此專案的技術堆疊包括 TypeScript、Next.js、Prisma、Tailwind CSS、shadcn/ui、NextAuth.js、react-email、tRPC、@documenso/pdf-sign、React-PDF、PDF-Lib、Stripe 和韋爾塞爾。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ziz58jqi2qtl6p6sx62w.png) ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8zrln5zlywkb6k10n09.png) 免費套餐可讓您每月簽署 10 份文件，這已經足夠了。您可以閱讀本文以了解如何[設定專案](https://github.com/documenso/documenso?tab=readme-ov-file#developer-setup)。您可以閱讀[文件](https://github.com/documenso/documenso?tab=readme-ov-file#developer-quickstart)。我知道這不是一個非常廣泛的用例，但您仍然可以從程式碼中學習，因此這始終是一個優點。他們在 GitHub 上擁有超過 5800 顆星，並且發布了`v1.5`版本。不是很流行但非常有用。 {% cta https://github.com/documenso/documenso %} 明星 documenso ⭐️ {% endcta %} --- 哇！這花了我很長很長的時間來寫。我希望你喜歡它。我知道人工智慧工具有時太多了，但我們應該使用它們來讓我們的工作更輕鬆。我的意思是，這就是我們所做的正確的事情，讓生活變得更輕鬆。我嘗試涵蓋廣泛的工具。不管怎樣，請讓我們知道您的想法以及您計劃在您的工作流程中使用這些工具嗎？祝你有美好的一天！直到下一次。我建立了很多技術內容，因此如果您能在 Twitter 上關注我來支持我，我將不勝感激。 |如果你喜歡這類東西，請關注我以了解更多:) | [![用戶名 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/21-tools-to-take-your-dev-skills-to-the-moon-53mf

0個讚 0留言 46瀏覽

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

🥇第一個讓你視覺化你的 React/NodeJS 應用程式的框架🤯

視覺化獎品 ===== 想像一下，您正在開發全端應用程式，並且想要實作一項新功能。這是一個複雜的過程，因此您拿出筆和紙，或轉到[tldraw](https://www.tldraw.com/) ，並開始繪製應用程式目前的樣子的圖表，從資料庫到伺服器，再到客戶端。但是，如果您有一個**工具可以為您可視化整個全端應用程式，**那該有多酷？如果該工具有潛力做更偉大的事情，例如立即為您在整個堆疊中加入有用的功能，或者與人工智慧和大型語言模型配合用於程式碼生成，會怎麼樣？嗯，這個想法已經成為現實，它被稱為`wasp studio` 。在這裡查看： {% 嵌入 https://youtu.be/SIAhAvDEoMw %} 黃蜂工作室是這個名字 ========== 首先， [Wasp 是一個具有超能力的全端 React、NodeJS 和 Prisma 框架](https://github.com/wasp-lang/wasp)。它[在 GitHub 上的星數剛剛突破 10,000 個](https://github.com/wasp-lang/wasp)，並已被用來建立超過 50,000 個專案。為什麼它很特別？它使用設定檔和自己的編譯器來為您管理一系列功能，例如身份驗證、cron 作業、路由和電子郵件發送，為您節省大量時間並讓您專注於有趣的事情。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugko7ycnjkfwwuool3vj.png) [Wasp 的中央設定檔](https://wasp-lang.dev/docs)（充當應用程式的一組指令）和編譯器的組合還允許 Wasp 透過單行命令為您執行一系列複雜且有趣的任務，例如： - 全端部署 → `wasp deploy` - 使用 Docker 啟動開發資料庫 → `wasp start db` - 建立整個範例應用程式，例如 SaaS 入門 → `wasp new` - 為您提供整個全端應用程式的視覺示意圖 → `wasp studio` 如果你想親自嘗試一下，你所要做的就是： 1. 使用`curl -sSL https://get.wasp-lang.dev/installer.sh | sh`[安裝Wasp](https://wasp-lang.dev/docs/quick-start) https://get.wasp-lang.dev/installer.sh | `curl -sSL https://get.wasp-lang.dev/installer.sh | sh` 2. 使用`wasp new -t todo-ts`在 TypeScript 中建立一個新的待辦事項應用程式 3. 然後要獲得下面螢幕截圖中的視覺化工具，請執行`wasp studio` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l34peqp9t60ftu3d1g32.png) 讓我們快速分解一下我們在這裡看到的內容： - 中間藍色的主應用程式元件顯示了應用程式的名稱、我們正在使用的資料庫及其身份驗證方法 - 左邊的黃色實體向我們展示了我們定義的資料庫模型 - 最左邊的紅色和綠色的操作和查詢向我們展示了作用於資料庫實體的伺服器操作 - 右側的路由和頁面向我們展示了 React 元件所在的位置以及它們是否需要授權（以 🔒 表示）如果您想知道更複雜的應用程式會是什麼樣子，以下是在[Open SaaS（我們的免費開源 SaaS 樣板啟動器）](https://OpenSaaS.sh)上執行時的樣子。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scdj3khkybrk30579hij.png) 這樣做的好處是，我們可以概覽所有資料庫實體以及它們所依賴的伺服器功能（也稱為「操作」）。在上圖的左上角，您甚至會看到一個 cron 作業`dailyStatsJob` ，它每小時執行一次 ( `0 * * * *` )。例如，這使得開發後端邏輯變得輕而易舉，特別是如果您不是經驗豐富的後端開發人員。考慮一下讓您到達那裡的程式碼就像這樣簡單： ``` job dailyStatsJob { executor: PgBoss, perform: { fn: import { calculateDailyStats } from "@src/calculateDailyStats" }, schedule: { cron: "0 * * * *" }, entities: [User, DailyStats, Logs, PageViewSource] } ``` 是的，這就是您在伺服器上取得非同步作業所需的全部內容。現在你的`calculateDailyStats`函數將每小時執行一次——不需要第三方服務🙂 這是派對把戲嗎！ ======== 好的。您可能會想，視覺化工具很酷，但它真的有用途嗎，還是只是一個不錯的「派對把戲」？老實說，*目前*這只是派對上的把戲。但這是一個具有**很大潛力的**派對技巧。讓我解釋。 ![https://media2.giphy.com/media/WsNIwVzVEZKnhkEBc1/giphy.gif?cid=7941fdc6akodg2p40uvpuw0ocqn3b0ek94bpdjudqn428rc3&ep=v1_gifs_search&ct=gifm&rid;](https://media2.giphy.com/media/WsNIwVzVEZKnhkEBc1/giphy.gif?cid=7941fdc6akodg2p40uvpuw0ocqn3b0ek94bpdjudqn428rc3&ep=v1_gifs_search&rid=giphy.gif&ct=g) 當然，您可以以當前形式使用它來更好地了解您的應用程式，或者計劃一些新功能，但將來您將能夠使用它做更多事情，例如： - 只需點擊幾下即可新增新的身份驗證方法 - 透過伺服器操作快速搭建功能性客戶端元件 - 立即為您的整個應用程式新增新的全端功能，例如 Stripe 支付 - 與大型語言模型 (LLM) 輕鬆協作，即時產生功能！同樣，這一切都是可能的，因為中央設定檔充當了應用程式的一組「指令」。透過這個文件，Wasp 確實知道您的應用程式是如何建置的，因此它可以輕鬆地以視覺形式向您顯示您的應用程式。它還使您可以更輕鬆地以令人興奮的新方式建立應用程式的新部分。看看下面 Wasp 設定檔中的另一個片段。這就是為您的網頁應用程式獲得全端身份驗證所需的一切！這是因為 Wasp 編譯器正在為您管理樣板程式碼。 ``` app todoVisualize { title: "todo-visualize", auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, }, } } entity User {=psl id Int @id @default(autoincrement()) tasks Task[] psl=} ``` 一張圖值一千枚代幣 ========= 現在我們已經了解了 Wasp 的工作原理，接下來讓我們更深入地探討 Wasp 和`wasp studio`與 LLM 結合作為未來用例的潛力。目前，人工智慧輔助程式碼產生的最大限制之一是上下文。現在，我們都知道LLM喜歡產生幻覺，[但他們的「記憶力」也很差](https://glazkov.com/2023/05/18/ai-developer-experience-asymptotes/)。因此，如果您試圖讓他們為您的應用程式建立功能，以確保新功能適用於您的應用程式，您必須不斷「提醒」他們應用程式的工作方式、結構和依賴項。但是，透過 Wasp 的設定檔（本質上只是全端應用程式及其功能的更高層次抽象），我們為法學碩士提供了成功為手頭上的應用程式建立新功能所需的上下文。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtk0u2g8cxtymf713om5.png) 這非常有效，因為我們不僅為 LLM 提供了所需的上下文，而且 Wasp 的編譯器還承擔了為我們編寫大部分樣板文件的責任（謝謝，朋友），為 LLM 提供了更簡單的任務的寫作，例如： - 修改Wasp設定檔 - 在伺服器上執行的函數 - 使用 Wasp 程式碼的 React 元件從這個意義上說，法學碩士必須掌握的上下文要少得多，並且其糟糕的記憶力是可以原諒的，因為黃蜂是確保一切都很好地粘在一起的人！為了進一步說明這一點，讓我們再看看上面介紹的授權碼： ``` auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, }, ``` 請考慮此程式碼在整個堆疊中提供身份驗證。因此，您不僅可以在伺服器上獲得為您產生和管理的所有身份驗證邏輯，還[可以在客戶端上獲得可供您使用的 UI 元件和身份驗證掛鉤](https://wasp-lang.dev/docs/auth/ui)！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8agd8cch9vtnx9a85xyr.gif) 另一方面，如果沒有 Wasp 給我們的抽象，我們最終只能依靠 LLM，它的記憶力很差，容易產生幻覺，一遍又一遍地為我們編寫一堆樣板文件，如下圖所示的 JWT 中間件： ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uywfi0ww42r0rntez05.png) 法學碩士非常擅長單獨編寫樣板程式碼、重複性任務。但期望他們將其作為有凝聚力的全端應用程式的一部分來完成，這意味著我們有更多的表面積來暴露可能的錯誤。另一方面，對於 Wasp，**只需幾行程式碼**。如果人類寫起來很容易，那麼法學碩士也很容易寫。順便說一句，這不僅為我們省去了很多麻煩，還可以為我們節省很多錢，因為[AI 生成的 Wasp 應用程式使用的令牌（即輸入和輸出文字）比同類工具少約 10-40 倍](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator)，因此他們以一小部分的價格產生程式碼。幫助計算機幫助我們 ========= 隨著技術的不斷改進，專業知識較少的用戶將更容易進行編程，因為更多的專業知識將嵌入我們的工具中。但這意味著我們需要抽象，使我們人類能夠輕鬆地使用這些工具。就像上面的 LLM 範例一樣，我們可以建立工具，讓人工智慧一遍又一遍地為我們編寫所有樣板文件，但問題是，當他們*可以*做其他更有用的事情時，我們*是否應該*讓他們這樣做？法學碩士擅長快速產生大量新想法。為什麼不建構讓人工智慧在這方面幫助我們的工具呢？這正是我們對`wasp studio`未來的規劃。一個視覺化介面，讓您在有或沒有法學碩士的幫助下拼湊應用程式的新功能，然後快速對這些不同的想法進行 A/B 測試。 {% 嵌入 https://www.youtube.com/watch?v=ERwtJtNQL28 %} 不僅如此，我們還可以使用一個抽象來與不太懂科技的使用者輕鬆協作。在這些工具的幫助下，甚至您的產品經理也可以從中獲得樂趣並開始建立新功能以供開發人員簽署。 Wasp 及其功能集的強大之處在於，我們獲得的程式碼對於人和機器來說都**更容易閱讀、除錯和維護**。與視覺化介面相結合，我們將能夠快速迭代整個堆疊中的新功能，將其用作我們自己的規劃和編排工具，或者作為更輕鬆地除錯和監督法學碩士可能為我們所做的工作的一種方式。這是對 Web 開發未來的令人興奮的展望，這些新工具將帶來許多利用它們的新方法。您認為像`wasp studio`這樣的工具有哪些使用方法？您能想像人工智慧與人類協作領域即將出現哪些其他發展嗎？請在下面的評論中告訴我們，感謝您的閱讀！ --- 原文出處：https://dev.to/wasp/the-first-framework-that-lets-you-visualize-your-reactnodejs-app-1d63

0個讚 0留言 18瀏覽

1
2
3
4
5
6
7
8
9
10
...
18
19
›

歡迎發文

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

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

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

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

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

熱門文章

🔥 詢問JS children使用方式

🔥 53 個專案創意（從初級到高級）

🔥 用於建立 AI/ML 應用程式的最佳開發工具！

🔥 為開源做出貢獻將使您獲得新工作的機會增加 10 倍 🚀

🔥 我們在使用 Rust 建構 SaaS 時學到了什麼

近期留言

熱門搜尋： module user nodes 使用題 19 ci go 1 C git c 20 10 前端開發前學習 % 第一 2 javascript JS 4 作為 API REACT github . 語言 js AI id ` 查詢專案 " api 工作 Ai 後端 COM Git Javascript for ui JavaScript 作業履歷搜尋 unity app Github 技術 GIT 測試 react COMPO 自學網頁の嬰兒教材：主題 python 套件網站面試 result create jav 50 with JAVA QT fetch vite `) html local 非同步ＣＳＳ ERD prisma rest 分離 CSS windows ruby class Callback CD import Can JavaScript 系列一遊戲 Vue 資料庫 AWS 聊天 cn 熱情分享 nodejs

CodeLove 愛寫扣論壇 © 2024

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