我見過數百種人工智慧工具，其中許多正在改變世界。 作為開發人員，總是有很多事情需要學習，因此專注於節省時間來處理重要的事情非常重要。 我將介紹 21 個供開發人員使用的工具，它們可以讓您的生活更輕鬆，特別是在開發人員體驗方面。 相信我，這份清單會讓你大吃一驚！ 我們開始做吧。 --- 1. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ----------------------------------------------------------------------------  Taipy 是一個開源 Python 庫，可用於輕鬆的端到端應用程式開發，具有假設分析、智慧管道執行、內建調度和部署工具。 我相信你們大多數人都不明白 Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能，而 Taipy 是最佳選擇。 雖然 Streamlit 是一種流行的工具，但在處理大型資料集時，其效能可能會顯著下降，這使得它在生產級使用上不切實際。 另一方面，Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 Taipy，您將親身體驗其用戶友好的介面和高效的資料處理。  Taipy 有許多整合選項，可以輕鬆地與領先的資料平台連接。  開始使用以下命令。 ``` 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/)。  另一個有用的事情是，Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。  您也可以使用 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://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) - 開發者的瑞士軍刀。 ----------------------------------------------------------------  DevToys 協助完成日常開發任務，例如格式化 JSON、比較文字和測試 RegExp。 這樣，就無需使用不可信的網站來處理您的資料執行簡單的任務。透過智慧型偵測，DevToys 可以偵測用於複製到 Windows 剪貼簿的資料的最佳工具。 緊湊的覆蓋範圍讓您可以保持應用程式較小並位於其他視窗之上。最好的部分是可以同時使用應用程式的多個實例。 我可以肯定地說，開發人員甚至不知道這個很棒的專案。 最後是一款專為 Windows 生態系統設計的軟體。哈哈！  他們提供的一些工具是： > 轉換器 - JSON <> YAML - 時間戳 - 數基數 - 規劃任務解析器  > 編碼器/解碼器 - 超文本標記語言 - 網址 - Base64 文字與圖片 - 壓縮包 - 智威湯遜解碼器  > 格式化程式 - JSON - SQL - XML  > 發電機 - 哈希（MD5、SHA1、SHA256、SHA512） - UUID 1 和 4 - 洛雷姆·伊普蘇姆 - 校驗和  > 文字 - 逃脫/逃脫 - 檢驗員和箱子轉換器 - 正規表示式測試器 - 文字比較 - XML驗證器 - 降價預覽   > 形象的 - 色盲模擬器 - 顏色選擇器和對比度 - PNG / JPEG 壓縮器 - 影像轉換器  我不了解你，但我不會錯過這個！ 您可以閱讀[如何執行 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) - 您的工作流程副駕駛。 -------------------------------------------------------  Pieces 是一款支援人工智慧的生產力工具，旨在透過智慧程式碼片段管理、情境化副駕駛互動和主動呈現有用材料來幫助開發人員管理混亂的工作流程。 它最大限度地減少了上下文切換、簡化了工作流程並提升了整體開發體驗，同時透過完全離線的 AI 方法維護了工作的隱私和安全性。太棒了：D  它與您最喜歡的工具無縫集成，以簡化、理解和提升您的編碼流程。 它具有比表面上看到的更令人興奮的功能。 - 它可以透過閃電般快速的搜尋體驗找到您需要的材料，讓您根據您的喜好透過自然語言、程式碼、標籤和其他語義進行查詢。可以放心地說“您的個人離線谷歌”。 - 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)秘密管理平台。 --------------------------------------------------------------  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 }); ```  Infisical 還提供了一組工具來自動防止 git 歷史記錄的秘密洩露。可以使用預提交掛鉤或透過與 GitHub 等平台直接整合在 Infisical CLI 層級上設定此功能。 您可以閱讀[文件](https://infisical.com/docs/documentation/getting-started/introduction)並檢查如何[安裝 CLI](https://infisical.com/docs/cli/overview) ，這是使用它的最佳方式。 Infisical 還可用於將機密注入 Kubernetes 叢集和自動部署，以便應用程式使用最新的機密。有很多整合選項可用。  在使用整個原始程式碼之前一定要檢查他們的[許可證](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) - 在建置時出現的文件。 --------------------------------------------------------------  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 工具包。 ------------------------------------------------------------------------------------  在地化方面的困難是真實存在的，因此人工智慧的幫助絕對是一個很酷的概念。 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 流程。 ---------------------------------------------------------------------------  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://docs.flowiseai.com/)。  雲端主機不可用，因此您必須使用這些[說明](https://github.com/FlowiseAI/Flowise?tab=readme-ov-file#-self-host)自行託管。 讓我們探討一些用例： - 假設您有一個網站（可以是商店、電子商務網站或部落格），並且您希望廢棄該網站的所有相關連結，並讓法學碩士回答您網站上的任何問題。您可以按照此[逐步教學](https://docs.flowiseai.com/use-cases/web-scrape-qna)來了解如何實現相同的目標。  - 您還可以建立一個自訂工具，該工具將能夠呼叫 Webhook 端點並將必要的參數傳遞到 Webhook 主體中。請依照本[指南](https://docs.flowiseai.com/use-cases/webhook-tool)使用 Make.com 建立 Webhook 工作流程。  還有許多其他用例，例如建立 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) - 一個快速、簡單且功能強大的部落格框架。 ---------------------------------------------------------------  大多數開發人員更喜歡自己的博客，如果您也是如此。 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)- 放入螢幕截圖並將其轉換為乾淨的程式碼。 ---------------------------------------------------------------------------  這個開源專案廣泛流行，但許多開發人員仍然不了解它。它可以幫助您以 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) - 建立管理面板、內部工具和儀表板的平台。 -----------------------------------------------------------------------------  管理面板和儀表板是任何軟體創意（在大多數情況下）的一些常見部分，我嘗試從頭開始建立它，這會帶來很多痛苦和不必要的辛苦工作。 您可能已經看到組織建立了內部應用程式，例如儀表板、資料庫 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)。   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://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 樣式）且可擴充的富文本編輯器。 --------------------------------------------------------------------------------------  人們常說，除非您正在學習新東西，否則不要重新發明輪子。 Blocknote 是開源的 Block 為基礎的 React 富文本編輯器。您可以輕鬆地將現代文字編輯體驗加入到您的應用程式中。 Blocknote 建構在 Prosemirror 和 Tiptap 之上。 它們有很多功能，如下所示。   您可以輕鬆自訂內建 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)。 您應該嘗試一下，特別是因為它包含廣泛的功能，例如「斜線」選單、流暢的動畫以及建立即時協作應用程式的潛力。  斜線選單  即時協作  格式選單 他們還提供了[20 多個範例](https://www.blocknotejs.org/examples)以及預覽和程式碼，您可以使用它們來快速跟進。  Blocknote 在 GitHub 上擁有超過 5,000 顆星，並有超過 1,500 名開發者在使用。 {% cta https://github.com/TypeCellOS/BlockNote %} 星 BlockNote ⭐️ {% endcta %} --- 12. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 -------------------------------------------------------------------------------------  將 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。 ----------------------------------------------------------------------------------  [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) - 用於建立業務應用程式的低程式碼平台。 ----------------------------------------------------------------------  我們都建立前端，但它通常非常複雜並且涉及很多因素。這樣可以省去很多麻煩。 ToolJet 是一個開源低程式碼框架，可以用最少的工程工作來建置和部署內部工具。 ToolJet 的拖放式前端建構器可讓您在幾分鐘內建立複雜的響應式前端。 您可以整合各種資料來源，包括PostgreSQL、MongoDB、Elasticsearch等資料庫；具有 OpenAPI 規範和 OAuth2 支援的 API 端點； SaaS 工具，例如 Stripe、Slack、Google Sheets、Airtable 和 Notion；以及 S3、GCS 和 Minio 等物件儲存服務來取得和寫入資料。一切 ：） 這就是 Tooljet 的工作原理。  您可以在 ToolJet 中開發多步驟工作流程以自動化業務流程。除了建置和自動化工作流程之外，ToolJet 還可以在您的應用程式中輕鬆整合這些工作流程。  您可以閱讀此[快速入門指南](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 導向的低程式碼平台。 ---------------------------------------------------------------------------------  APITable 是一個面向 API 的低程式碼平台，用於建立協作應用程式，並表示它比所有其他 Airtable 開源替代品都要好。 有很多很酷的功能，例如： - 即時協作。  - 您可以產生自動表單。  - 無限的跨錶連結。  - API 第一個面板。  - 強大的行/列功能。  您可以閱讀完整的[功能清單](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 是一個可擴展的工作流程自動化工具。透過公平程式碼分發模型，n8n 將始終擁有可見的原始程式碼，可用於自託管，並允許您加入自訂函數、邏輯和應用程式。 每個開發人員都想使用的工具。自動化是生產力和簡單性的關鍵。  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 清理程式。 ----------------------------------------------------------------------------------------  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) - 更少的程式碼，更多的內容。 -----------------------------------------------------------------------   這是一個開源專案，旨在複製 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)後端開發平台。 -----------------------------------------------------------------------  我想我們都同意，如果我們要達到標準，設定後端並從頭開始是很困難的。 我知道 Appwrite 和 Supabase 在功能方面要好得多，但每種情況都是獨特的，這可能會點擊而不是那些。  Amplication 旨在徹底改變可擴展且安全的 Node.js 應用程式的建立。 他們消除了重複的編碼任務，並提供可立即投入生產的基礎設施程式碼，這些程式碼根據您的規範精心定制，並遵循行業最佳實踐。 其用戶友好的介面促進了 API、資料模型、資料庫、身份驗證和授權的無縫整合。 Amplication 建立在靈活的、基於插件的架構之上，允許輕鬆定製程式碼並提供大量整合選項。   您可以閱讀[文件](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 Carousel，是因為 Shadcn/ui 在他們的 UI 系統中使用了它。 Embla Carousel 是一個簡單的輪播庫，具有出色的流暢運動和出色的滑動精度。它與庫無關、無依賴性且 100% 開源。 如果您不確定，我建議您查看[基本的實例](https://www.embla-carousel.com/examples/predefined/)。     我最喜歡的是視差，它可以提供非常酷且平滑的過渡。 它們支援 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/)使用您自己的一組選項來產生自訂輪播。   它們在 GitHub 上擁有 4.9K 顆星，並被超過 26000 名開發人員使用。如果我必須使用一個，我肯定會使用這個。 {% cta repo %} 明星名稱 ⭐️ {% endcta %} --- [21.Documenso](https://github.com/documenso/documenso) - 開源 DocuSign 替代方案。 --------------------------------------------------------------------------  如果您從事自由職業並需要簽署協議，這是最佳選擇。我們不應該浪費時間，而應該專注於重要的事情。 以數位方式簽署文件應該既快速又簡單，並且應該成為全球簽署的每個文件的最佳實踐。 如今，這在技術上相當簡單，但它也為每個簽名引入了一個新方：簽名工具提供者。 此專案的技術堆疊包括 TypeScript、Next.js、Prisma、Tailwind CSS、shadcn/ui、NextAuth.js、react-email、tRPC、@documenso/pdf-sign、React-PDF、PDF-Lib、Stripe 和韋爾塞爾。   免費套餐可讓您每月簽署 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 上關注我來支持我，我將不勝感激。 |如果你喜歡這類東西， 請關注我以了解更多:) | [](https://twitter.com/Anmol_Codes) [](https://github.com/Anmol-Baranwal) [](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
視覺化獎品 ===== 想像一下，您正在開發全端應用程式，並且想要實作一項新功能。這是一個複雜的過程，因此您拿出筆和紙，或轉到[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 作業、路由和電子郵件發送，為您節省大量時間並讓您專注於有趣的事情。  [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`  讓我們快速分解一下我們在這裡看到的內容： - 中間藍色的主應用程式元件顯示了應用程式的名稱、我們正在使用的資料庫及其身份驗證方法 - 左邊的黃色實體向我們展示了我們定義的資料庫模型 - 最左邊的紅色和綠色的操作和查詢向我們展示了作用於資料庫實體的伺服器操作 - 右側的路由和頁面向我們展示了 React 元件所在的位置以及它們是否需要授權（以 🔒 表示） 如果您想知道更複雜的應用程式會是什麼樣子，以下是在[Open SaaS（我們的免費開源 SaaS 樣板啟動器）](https://OpenSaaS.sh)上執行時的樣子。  這樣做的好處是，我們可以概覽所有資料庫實體以及它們所依賴的伺服器功能（也稱為「操作」）。在上圖的左上角，您甚至會看到一個 cron 作業`dailyStatsJob` ，它每小時執行一次 ( `0 * * * *` )。 例如，這使得開發後端邏輯變得輕而易舉，特別是如果您不是經驗豐富的後端開發人員。考慮一下讓您到達那裡的程式碼就像這樣簡單： ``` job dailyStatsJob { executor: PgBoss, perform: { fn: import { calculateDailyStats } from "@src/calculateDailyStats" }, schedule: { cron: "0 * * * *" }, entities: [User, DailyStats, Logs, PageViewSource] } ``` 是的，這就是您在伺服器上取得非同步作業所需的全部內容。現在你的`calculateDailyStats`函數將每小時執行一次——不需要第三方服務🙂 這是派對把戲嗎！ ======== 好的。您可能會想，視覺化工具很酷，但它真的有用途嗎，還是只是一個不錯的「派對把戲」？老實說，*目前*這只是派對上的把戲。 但這是一個具有**很大潛力的**派對技巧。讓我解釋。  當然，您可以以當前形式使用它來更好地了解您的應用程式，或者計劃一些新功能，但將來您將能夠使用它做更多事情，例如： - 只需點擊幾下即可新增新的身份驗證方法 - 透過伺服器操作快速搭建功能性客戶端元件 - 立即為您的整個應用程式新增新的全端功能，例如 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 的設定檔（本質上只是全端應用程式及其功能的更高層次抽象），我們為法學碩士提供了成功為手頭上的應用程式建立新功能所需的上下文。  這非常有效，因為我們不僅為 LLM 提供了所需的上下文，而且 Wasp 的編譯器還承擔了為我們編寫大部分樣板文件的責任（謝謝，朋友），為 LLM 提供了更簡單的任務的寫作，例如： - 修改Wasp設定檔 - 在伺服器上執行的函數 - 使用 Wasp 程式碼的 React 元件 從這個意義上說，法學碩士必須掌握的上下文要少得多，並且其糟糕的記憶力是可以原諒的，因為黃蜂是確保一切都很好地粘在一起的人！ 為了進一步說明這一點，讓我們再看看上面介紹的授權碼： ``` auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, }, ``` 請考慮此程式碼在整個堆疊中提供身份驗證。因此，您不僅可以在伺服器上獲得為您產生和管理的所有身份驗證邏輯，還[可以在客戶端上獲得可供您使用的 UI 元件和身份驗證掛鉤](https://wasp-lang.dev/docs/auth/ui)！  另一方面，如果沒有 Wasp 給我們的抽象，我們最終只能依靠 LLM，它的記憶力很差，容易產生幻覺，一遍又一遍地為我們編寫一堆樣板文件，如下圖所示的 JWT 中間件：  法學碩士非常擅長單獨編寫樣板程式碼、重複性任務。但期望他們將其作為有凝聚力的全端應用程式的一部分來完成，這意味著我們有更多的表面積來暴露可能的錯誤。 另一方面，對於 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
### 介紹 每個開發人員都知道編寫測試很重要，但是當涉及 JavaScript 測試時，[有許多框架](https://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript)可供選擇。那麼，下次啟動專案時，如何知道該選擇哪個框架呢？ 在本文中，我將比較三個流行的框架[——Mocha](https://github.com/mochajs/mocha) 、 [Jest](https://jestjs.io/)和[Jasmine——](https://jasmine.github.io/)以幫助您做出更明智的決定。我將了解這些框架如何處理常見的測試場景，例如模擬函數和非同步呼叫。我將展示如何實施這些測試的範例。我還將討論一些最佳實踐以及為什麼應該使用測試框架。 ### 三個框架 Mocha、Jest 和 Jasmine 都是流行的框架，擁有有用的社群和多年的開發經驗。總體而言，Mocha 和 Jasmine 更適合測試後端，因為它們最初是為 Node 應用程式建立的；因此，他們比 Jest 擁有更多可用的後端工具和文件。對於前端來說，你的測試框架的選擇通常會受到你的前端框架的影響。 Jasmine 更常與 Angular 一起使用，而 Jest 是 Facebook 建立的與 React 一起使用。 無論您選擇哪一個框架，這三個框架都是成熟且有效的選擇。最好的選擇實際上取決於您的專案需求和您的個人喜好。為了幫助您決定哪個框架最適合您，讓我們看看每個框架在一些常見測試場景下的實際應用。 ### 模擬函數 您在應用程式中測試的最常見的事情是函數呼叫。為您的函數編寫可靠的測試非常重要，因為無論測試框架如何，糟糕的測試都可能觸發真實的函數，從而導致記憶體洩漏和瀏覽器中的意外行為。 測試函數呼叫時，您的測試應該： - 專注於函數呼叫的預期結果，而不是函數的實現 - 永遠不要更改應用程式的狀態 - 使用模擬函數，這樣您就不必擔心測試中出現意外的副作用 以下是如何在 Jest、Jasmine 和 Mocha 中模擬前端函數呼叫的範例。 **是** 如果您使用 React，Jest 不需要太多依賴項（如果有的話）。但是，如果您不想深入[研究react-testing-library](https://testing-library.com/docs/react-testing-library/intro) ，Jest也與一些特定於測試的函式庫（例如Enzyme）相容。此範例使用[Enzyme](https://enzymejs.github.io/enzyme/)對元件進行淺層渲染，按一下按鈕，然後查看模式是否已開啟。在這裡，您必須渲染元件並模擬單擊，以查看您的模擬函數呼叫是否按預期開啟模式。  *Jest 中的模擬函數呼叫* **茉莉花** 在所有框架中，Jasmine 更適合 Angular。但是，一旦為 React 設定了所有正確的配置和幫助程式文件，編寫測試就不需要太多程式碼。 在這裡您可以看到使用[ReactTestUtils](https://reactjs.org/docs/test-utils.html)代替 Enzyme 或 React-testing-library（以顯示其他可用工具之一）。 ReactTestUtils 使得在前端使用 Jasmine 變得更加容易，並保持較低的程式碼行數。但是，您需要了解 ReactTestUtils API。  *Jasmine 中的模擬函數呼叫* **摩卡** Mocha 為您提供了更多的靈活性，因為它通常用於前端和後端測試。您必須匯入幾個庫，例如[Chai](https://www.chaijs.com/) ，才能使其與 React 一起使用。雖然 Chai 沒有直接連接到 React，但它是 Mocha 中最常用的斷言函式庫。安裝這些依賴項後，就類似於使用 Jest。此範例結合使用 Enzyme 進行渲染和 Chai 進行斷言。  *Mocha 中的模擬函數呼叫* #### 我的看法 對於模擬函數，這三個函式庫在程式碼行數和複雜性方面都非常相似。我建議只使用最適合您的堆疊的程式庫：Jest for React、Jasmine for Angular 和 Mocha（如果您也在後端使用 Mocha 並且希望保持一致）。 ### 模擬資料 後端測試與前端測試一樣棘手。對於處理資料尤其如此，因為您不希望測試將資料插入真實資料庫中。如果您不小心，這種危險的副作用很容易潛入您的測試套件中。這就是為什麼使用模擬資料設定測試資料庫是最佳實踐的原因。 當您使用模擬資料時，您可以： - 準確地看到錯誤發生的位置，因為您知道期望的值是什麼 - 類型檢查您的後端響應並確保響應不會洩露真實資料 - 更快發現錯誤 您會經常遇到模擬資料以在請求中發送的情況，而這三個框架都支援這種情況。以下是這三個框架如何實現模擬資料的範例。 **是** 在此 Jest 測試中需要注意的最重要的事情是如何檢查資料是否已成功傳遞到 API 或資料庫。最後有幾個 Expect() 匹配器，它們的順序很重要。在發送模擬資料後，您必須準確地告訴 Jest 您希望找到什麼。這裡使用[supertest](https://www.npmjs.com/package/supertest)函式庫來使用假資料發出模擬 post 請求。  *在 Jest 後端測試中處理資料* **茉莉花** 雖然編寫良好的後端 Jasmine 測試需要更多程式碼，但您可以控制建立和重置資料的方式和時間。 Jasmine 還具有內建工具，用於在測試的其他部分引用模擬資料。此範例使用[請求](https://www.npmjs.com/package/request)庫來處理模擬發布資料請求。  *在 Jasmine 後端測試中處理資料* **摩卡** 在所有框架中，Mocha 需要最多的依賴來處理模擬資料和請求。您可能需要使用[chai-http](https://www.app.devspotlight.com/stories/draft/Comparing-the-top-3-Javascript-testing-frameworks)設定一個模擬伺服器來執行請求，而不是像其他伺服器一樣模擬請求和回應。 Mocha 確實有很好的內建工具，但需要更多時間才能上手。使用 Chai 及其相關函式庫是常見的做法，如下例所示：  *在 Mocha 後端測試中處理資料* #### 我的看法 後端測試是 Mocha 和 Jasmine 最強的地方。它們是為測試 Node 應用程式而建構的，這一點在它們的工具中得到了體現。它們使您可以透過框架中包含的選項和功能進行更精細的控制。如果您願意花時間加入一些可用的庫，Jest 仍然是一個不錯的選擇。 ### 模擬異步呼叫 眾所周知，非同步程式碼會引起問題，因此此處的測試尤其重要。您不僅必須注意自己程式碼中的非同步為，而且許多進入生產的錯誤可能來自意外的非同步來源，例如第三方服務。當您編寫具有異步行為的測試時，請盡量避免觸發真正的函數呼叫，因為測試的非同步呼叫與實際程式碼的執行重疊。 所有測試框架都為您提供了編寫非同步程式碼的多種選項。如果您的程式碼使用回調，那麼您的測試就可以使用回呼。如果可以選擇，請考慮使用[async/await 模式](https://javascript.info/async-await)。它使您的程式碼更具可讀性，並幫助您快速找到測試的問題所在。 [Promise](https://javascript.info/promise-basics)也是編寫非同步測試的選擇。如果您正在使用不支援非同步/等待的舊程式碼，請考慮使用這些。但是，請確保它們按照您在生產中期望的順序執行。在整個執行過程中檢查您的值可以幫助捕捉奇怪的行為。 以下是 JavaScript 測試框架中的非同步測試範例。 **是** 儘管使用Jest 編寫後端測試很簡單，但由於它最初是為了與React 一起使用而建立的，因此您最終可能會花一些時間閱讀文件並安裝第三方庫，因為它的大多數工具都是特定於前端的。但 Jest 確實可以處理您需要處理的任何格式的非同步呼叫，例如回呼或 Promises。此 async/await 呼叫的工作方式與其他 JavaScript 程式碼中的工作方式相同。  *使用 async/await 開玩笑非同步呼叫* **茉莉花** Jasmine 最初是為 Node.js 建立的，因此它有很多內建功能。但是，在執行測試之前和之後可能需要一些設定。例如，您可以在此處看到，您應該在 beforeAll 方法中處理非同步呼叫，以防止稍後的測試中產生殘留影響。  *使用 async/await 進行 Jasmine 非同步呼叫* **摩卡** 在這裡您可以看到用於處理返回承諾的完成方法。它使用與前面的 Mocha 範例相同的 chai-http 庫。這是在 Mocha 測試中編寫的非同步呼叫的常見方式。您可以在 Mocha 中使用 Promises 或非同步/等待模式。  *使用 async/await 進行 Mocha 非同步呼叫* #### 我的看法 對於後端測試，Jasmine 可以輕鬆處理非同步方法並且開箱即用，這將是我的首選。 Mocha 和 Jest 也很有用，儘管它們需要更多地搜尋文件才能找到您需要的內容。 ### 模擬渲染元件 另一個重要且常見的測試是確保渲染的元件在預期時可用。和以前一樣，您通常會看到 Jest 與 React 一起使用，Jasmine 與 Angular 一起使用，但您可以在任何前端程式庫上使用這三個框架中的任何一個。 渲染元件可能是一項昂貴的任務，具體取決於渲染的深度。有些開發人員喜歡使用快照測試，它保存代表 UI 當前狀態的檔案。其他人則喜歡模擬渲染的元件。當您尋找 UI 中的變更時，快照更有用，而當您想要查看元件是否按預期工作時，渲染更有用。兩種方法都很有用。 **是** 正如我之前提到的，Jest 是為 React 建置的，因此您無需導入任何特殊的庫來進行渲染測試。這使得這些測試變得簡單並節省了依賴項的空間。 [ReactDOM](https://reactjs.org/docs/react-dom.html)在許多 React 專案中都很常見，並且附帶了檢查基本渲染所需的方法，如下例所示：  *Jest 框架中的 React 渲染測試* **茉莉花** 設定 Jasmine 來進行 React 渲染測試比看起來更困難；它涉及重要的初始設定。 [Angular 團隊](https://angular.io/guide/testing)使用並推薦[Karma](https://www.npmjs.com/package/karma-jasmine)和 Jasmine 來測試元件。下面的範例用於測試 Angular 元件。您必須匯入要測試的元件，並且可以使用 Angular 隨附的 @angular/core/testing 來設定元件的環境，然後再嘗試渲染該元件並檢查它是否可用。  *Jasmine框架中的Angular渲染測試* **摩卡** 您通常會看到[Enzyme](https://enzymejs.github.io/enzyme/)和 Chai 與 Mocha 一起用於前端測試，並且測試 React 渲染沒有任何不同。一旦匯入了所需的特定方法（例如shallow 和expect），您將能夠編寫與其他框架類似的測試。下面的範例利用了 Enzyme 的淺層渲染和 Chai 的斷言。  *Mocha框架中的React渲染測試* #### 我的看法 渲染元件的最佳實踐是僅使用為您的前端庫推薦的測試框架。使用附帶安裝的工具，您無需處理設定錯誤。如果可能，請嘗試使用淺渲染和快照來節省測試時間並專注於渲染元件的核心功能。 ### 結論 希望您現在對這三個流行框架之間的差異有了更好的了解。正如我所提到的，無論您選擇哪種框架，這三個框架都是成熟且有效的選擇，並且可以為您工作，這取決於您的專案的需要和您的偏好。現在您已準備好接受測試！ --- 原文出處：https://dev.to/heroku/comparing-the-top-3-javascript-testing-frameworks-2cco
**現在是 2024 年，您又建立了另一個 JavaScript 框架。說真的，夥計！** 當您談論另一個 Javascript 框架時，您可能會笑並認為有大量經過驗證的選項，為什麼還要建立另一個框架？ 🤷♂️ 讓我與您分享我的個人故事，它導致了新的 Javascript 框架的發展。但如果你不關心我的可悲的故事，這裡是 TLDR： > **TiniJS**是一個元框架，由基於 Google [Lit](https://lit.dev/)庫的**Web 元件**技術提供支援。 > 您可以先下載[入門範本](https://github.com/tinijs/bare-starter)或使用 CLI 初始化應用程式，執行`npx @tinijs/cli@latest new my-app`並按照說明進行操作。 > 有關更多詳細訊息，請參閱下面的**“入門”**部分或存取<https://tinijs.dev/> 。 故事 --  開個玩笑吧，我不是 Javascript 的專家，但我想稍微介紹一下我的背景，這樣您可能就會知道我關於前端 Web 開發的煩惱故事。我曾經是 Angular 1 版本的開發人員，目前主要使用 Vue，偶爾使用 jQuery。我有這**3 個 PITA** （Pain In The \*beep\*）經歷，這促使我嘗試使用 TiniJS 框架。 > **PITA #1 - 建立良好的 UI/UX 很困難，既乏味又耗時！** 早在 2010 年左右，就有兩種不同類型的網站：一種有大量文本、連結，幾乎沒有一些圖片；另一種有大量文本、連結，幾乎沒有一些圖片。其他的則包含大量的圖形元素，例如 GIF 圖像、Flash 背景、彩虹遊標… 人們往往有**後端難前端容易的**刻板印象。這有點正確，但不完全正確，我的意思是，我該怪誰，對吧？因為只要有一點 HTML 和 CSS 知識，您就可以非常輕鬆地建立靜態網站。但是，為了建立良好的 UI/UX，還有很多事情需要考慮。你必須成為更多事情的大師，而它們一點也不容易！  > **PITA #2 - CSS 框架缺乏功能並且自訂它們不是很有效！** 人們意識到前端開發的困難，開始建立CSS框架來幫助解決這個問題。 Bootstrap是這一趨勢的先驅之一，其他流行的有：Foundation、Semantic UI、Bulma、Skeleton、Pure CSS…這些CSS框架很棒，毫無疑問，它們幫助我們建立一個好的UI/使用者體驗更快，但它們也有自己的限制。 首先，儘管所有框架都提供了一定的方式來定制樣式，但總的來說，我覺得這對我來說不是很容易和可重用。  二是功能缺失。我的意思是，它們主要是 CSS，它們提供一些功能，通常是作為 JQuery 的插件。大多數情況下，您必須編寫自己的 Javascript 才能使功能正常運作。 > **PITA #3 - JavaScript 框架勢不可擋，而且有點多餘！** 進入現代 Web 開發時代，Javascript 框架已成為新趨勢。但問題是我們有太多的選擇，這既是福也是禍。它們提供了很棒的功能，但互通性不太好，您不能只從一個框架中取出一段程式碼並在另一個框架中使用它。特別是，為特定框架建立一個具有單獨套件的 UI 系統是一項非常艱鉅的任務。  每次我開始一個專案或做某種前端工作時，前端web的碎片化對我來說都有些痛苦。這似乎就是生活方式，無可避免，不是嗎？請不要誤會我的意思，我並不反對任何框架，我傾向於選擇解決方案而不是技術，所以如果它適合你，就用它吧。但我想知道有什麼辦法可以以某種方式統一或縮小前端開發經驗的差距嗎？ 🤔 介紹 TiniJS --------- 這就是我嘗試**TiniJS 框架**一段時間的原因。它是基於[Lit](https://lit.dev/)庫、使用本機**Web 元件**技術開發 Web/桌面/行動應用程式的工具集合。感謝[Lit](https://lit.dev/)團隊建立了一個出色的工具，幫助我們更輕鬆地使用標準 Web 元件。 它的目標是盡可能**標準化、小型化和多功能化**。與其他框架和元框架沒有真正的可比性，但總體而言，它具有相似的功能，但另一方面也有關鍵的區別。它既是替代選擇，也是對其他框架的補充。您可以使用 TiniJS 建立各種類型的應用程式：**登陸頁面、SPA、PWA、桌面應用程式、行動應用程式**…就功能而言，任何在 Javascript 中工作的內容都應該在 TiniJS 應用程式中正常運作。 整個系統由幾個部分組成，這是一個快速介紹。 > 請注意，**並非所有部件現在都可用**，該專案還處於早期階段，有些是**之前的實驗**，我盡力盡快將它們投入使用。但我的時間和資源有限，所以請耐心等待，如果可能的話請幫助我。 🙇♂️ > V1 的計畫及其路線圖可在<https://github.com/tinijs/tinijs>找到 ### 核 **TiniJS 的**核心提供了傳統的專案結構和簡化的開發流程。有**用於組織內容的資料夾**，**用於開發的本機伺服器**，在分發時，您可以選擇 Vite 或 Parcel 或 Webpack 來**建立產品**。 核心還包括：用於在頁面之間導航的**路由器**、用於全域狀態管理的簡單**儲存**、支援**PWA** ，... 您可以嘗試[Try TiniJS 中的範例專案（範例照片庫應用程式）](https://stackblitz.com/edit/try-tinijs?file=app%2Fapp.ts) ### 使用者介面系統 TiniJS 有一個專用的**UI 庫，我的目標是提供每個常用的元件和區塊甚至整個頁面**。元件以特殊的方式建置，它們是自訂元素，不僅可以與 TiniJS 一起使用，還可以與其他框架或不使用框架一起使用。  使用可重複使用元件很容易，通常是以將 props 傳遞給自訂元素標籤的形式。自訂可以透過 props 或 CSS `::part()`或自訂主題系列或完全克隆元件來源來完成，... 元件還能夠以盡可能小的努力適應幾乎所有設計系統。這是透過主題系統實現的，概念是這樣的： - 元件**只寫一次**，它們是**無頭的**（沒有特定的樣式） - 主題被組織成**系列**（又稱設計系統），系列定義自己的基本特徵，例如：Bootstrap、Material、Fluent、Spectrum，... - 根據基本特徵，一個系列有風格變體，稱為**“皮膚”** ，例如，Bootstrap 系列可能有：淺色皮膚、深色皮膚… 考慮到主題概念，任何應用程式都可以具有以下主題功能： - **一個**主題系列 - 可能是當今存在的所有網路應用程式中的 80% 到 90%，只有 1 種特定風格相當於 TiniJS 1 主題系列。 - **一個**主題系列 + 多個皮膚 - 常見的用例是亮/暗模式，相當於 TiniJS 1 主題系列，具有來自同一系列的多個皮膚。 - **多個**主題系列 - 高度個人化的應用程式可能有多個主題系列，每個系列都有一個或多個皮膚，將根據使用者參考應用某個主題。 UI 使用詳細資訊將在[主頁](https://tinijs.dev/ui)上提供，現在您也可以在<https://ui.tinijs.dev/>查看實驗概念，以查看該概念的實際應用。 ### 網頁、PWA、混合桌面/行動設備 預設的 TiniJS 應用程式是**單頁應用程式**，它小而快速，可以直接部署為 Web 應用程式。但是，您也可以將 TiniJS 轉換為以下一種或所有類型的應用程式： - **漸進式 Web 應用程式**(PWA) - 使用單一 CLI 命令實作（即將推出） - 混合**桌面/行動**應用程式 - 使用 Tauri 2.0 或類似工具（todo：編寫指令） ### 靜態和伺服器 TiniJS 應用程式可以作為靜態網路啟動，無論大小，無需伺服器或資料庫。您始終可以使用 SaaS 服務來滿足幾乎任何後端需求。我還在開發`@tinijs/content` - 一個基於文件的內容管理系統，用於輕鬆管理多種類型的內容。靜態站點產生（SSG）或預渲染也在計劃中。 如果您需要處理後端任務並參考從 Node 伺服器而不是靜態主機為 Web 應用程式提供服務，則可選的 Nitro 伺服器用於**伺服器/API 路由**和其他**伺服器內容**。我的開發能力有限，因此第一個版本可能不支援伺服器端渲染（SSR），相反，我計劃使用半SSR，其中伺服器將為用戶提供單頁服務，並向機器人提供最少的伺服器端渲染內容。 ### 功能和模組 在功能方面，由於 TiniJS 應用程式**基於標準 Web 技術**，因此在瀏覽器中工作的任何程式庫和功能都可能在 TiniJS 應用程式中運作。因此，與其他框架相比，您可能**不必擔心功能**。您甚至可以在 TiniJS 應用程式中使用其他框架，例如初始化 Vue 應用程式並將其安裝到 TiniJS 頁面內的元素。 還有一個模組架構師，以便某些模組可以進入 TiniJS 應用程式的工作流程，建立更簡化的開發管道。 ### 工具 官方 CLI 工具提供了一些使用 TiniJS 應用程式的便利命令。 - `dev` - 啟動本機開發伺服器 - `build` - 建構生產分配 - `preview` - 在部署之前預覽生產版本 - `generate` - 生成元件、頁面、實用程式... 此外，CLI**足夠通用，可以在 TiniJS 應用程式以外的任何類型的專案中使用**。它具有可擴展的架構，您可以在其中擴展更多命令以用於其他自動化任務。一些官方擴展，例如`ui`命令（來自`@tinijs/ui` ）用於處理 UI 任務或`content`命令（來自`@tinijs/content` ）用於處理內容相關任務，...您可以根據自己的目的建立 CLI 擴展包私人或共享。 好了，說得夠多了，讓我看看一些行動吧！ 👌 開始使用 ---- **Tini** （越南語中的“ [Tí nị](https://translate.google.com/?sl=vi&tl=en&text=t%C3%AD%20n%E1%BB%8B&op=translate) ”，意思是非常小、可愛的東西）。 為了快速建立**TiniJS**專案，您可以使用[CLI](https://tinijs.dev/cli)來初始化模板。 ``` npx @tinijs/cli@latest new my-app ``` 上面的命令透過下載**Bare**模板來建立一個應用程式。將來，我想提供幾個入門範本。您還可以建立自己的模板並與社區共享或供您自己私人使用。目前，這些模板可用： - [Bare](https://github.com/tinijs/bare-starter) （預設）- TiniJS 應用程式的最小結構。 - [空白](https://github.com/tinijs/blank-starter)（標誌`-t blank` ）- 包含路由器、狀態管理、元標記管理和[Bootstrap 主題系列](https://tinijs.dev/ui)。 現在，在專案內部，您可以執行`npm run dev`來啟動開發伺服器。您可以透過編輯檔案`./app/app.ts`來開始開發，該檔案是應用程式的根元件。有關如何使用 Lit 處理自訂元素，請存取[Lit 元件](https://lit.dev/docs/components/overview/)， `LitElement`和`TiniComponent`之間存在一些差異，但現在您可以像平常一樣修改`static styles`和`render()` 。 若要建立發行版，請執行`npm run build`並可選擇執行`npm run preview`以預覽生產版本。現在您可以將`.output`資料夾部署到任何靜態主機。 您可能需要查看這些範例以了解 TiniJS 應用程式如何運作的更多細節。 - 首頁 - <https://github.com/tinijs/tinijs/tree/main/apps/tinijs.dev> - 待辦事項應用程式 - <https://github.com/tinijs/tinijs/tree/main/examples/todo> 這就是**TiniJS 框架**的基本介紹。下次我們將探索**TiniJS 應用程式的結構並使用元件**。 欲了解更多訊息，請存取： <https://tinijs.dev> 謝謝您，編碼愉快！ 💖 --- 原文出處：https://dev.to/lamnhan/ive-created-yet-another-javascript-framework-5c5o
Supabase `bootstrap`是從現有入門範本啟動新託管 Supabase 專案最快的方式： `npx supabase bootstrap` 這為 Supabase 帶來了類似「shadcn」的體驗，在本地建立專案並啟動準備部署的遠端資料庫。 https://supabase.com/ga-week ⚡️ 了解有關 GA 週的更多資訊 入門 -- 從任何本機目錄執行`supabase bootstrap` ，系統將提示您選擇啟動範本。最棒的是，您甚至不需要安裝 CLI 即可開始！只要安裝了`npm`或`bun` ，就可以開始了！ - CLI： `supabase bootstrap` - NPM： `npx supabase@latest bootstrap` - 髮髻： `bunx supabase@latest bootstrap`  模板如何運作 ------ 入門範本清單在 GitHub 上發佈為[Samples.json](https://github.com/supabase-community/supabase-samples/blob/main/samples.json) 。每當我們（以及未來的社區）加入新的啟動器時，它將自動對所有 Supabase 用戶可用。 範本儲存庫通常包含完整的前端程式碼，檔案結構如下： - 包含`config.toml`和`migrations`檔案（如果有）的`supabase`目錄。 - `.env.example file` ，定義 CLI 的環境變數清單以填入專案憑證。我們目前支援與[Vercel 整合](https://vercel.com/integrations/supabase)相同的憑證清單。如果`.env`檔案不存在，CLI 將為您建立它。 當地發展 ---- 選擇啟動器後，Supabase CLI 會將所有檔案從範本儲存庫下載到您選擇的本機目錄。 > **GitHub 速率限制** 從範本儲存庫下載過於頻繁時，您可能會遇到 GitHub 速率限制。可以透過在本地將 GITHUB\_TOKEN 環境變數設定為 GitHub 個人存取權杖來避免這種情況。 該模型與流行的[shadcn](https://ui.shadcn.com/)工作流程非常相似。在本機儲存庫中建立檔案後，您可以修改它們並將它們簽入原始碼管理。 部署到生產環境 ------- 在`supabase bootstrap`過程中，將在 Supabase 平台上建立一個新專案並連結到您的本機環境。如果您還沒有帳戶建立流程，此命令將引導您完成帳戶建立流程。  > **需要一些耐心** 連結到新的託管專案可能需要一段時間，因為它需要在雲端啟動新的資料庫。 連結完成後，系統將提示您將所有範本遷移檔案推送到新託管的專案。這些遷移檔案將使用必要的模式設定您的遠端資料庫以支援入門應用程式。  推送遷移後，您的專案憑證將匯出到`.env`文件，以便您從任何前端或後端程式碼進行連線。預設環境變數包括： - `POSTGRES_URL` - `SUPABASE_URL` - `SUPABASE_ANON_KEY` - `SUPABASE_SERVICE_ROLE_KEY` 由您選擇的範本定義的`.env.example`檔案中的其他自訂變數也將合併到您的本機`.env`檔案中。 > **安全地儲存憑證** 安全地儲存這些憑證非常重要，因為任何人都可以使用`POSTGRES_URL`連接到您的遠端資料庫。 開始開發 ---- 最後，CLI 將建議一個`start`命令來在本地啟動您的應用程式。啟動本機應用程式將使用`.env`檔案中定義的憑證連接到新的託管專案。  範本庫 --- 就是這樣，只需一個命令，您就可以啟動一個新專案並端到端執行。 Supabase Bootstrap 讓您更輕鬆地開始使用 Supabase、行動應用程式工具和 Web 開發框架（例如 Next.js、Expo React Native、Flutter、Swift iOS）。 我們即將推出更多模板，並將開放給社區貢獻。敬請關注！ 開始使用 ---- 請造訪[Supabase CLI 文件](https://supabase.com/docs/guides/cli/getting-started)以開始使用`supabase bootstrap` 。 **更多關於 GA 週的訊息** - [斯帕巴斯威夫特](https://supabase.com/blog/supabase-swift) - [AWS Marketplace 上的 Supabase](https://supabase.com/blog/supabase-aws-marketplace) - [Supabase 開源黑客馬拉松 2024](https://supabase.com/blog/supabase-oss-hackathon) - [Oriole 加入 Supabase](https://supabase.com/blog/supabase-aquires-oriole) - [分支現已公開](https://supabase.com/blog/branching-publicly-available) --- 原文出處：https://dev.to/supabase/supabase-bootstrap-the-fastest-way-to-launch-a-new-project-56hf
Supabase Auth 現在支援[匿名登錄](https://supabase.com/docs/guides/auth/auth-anonymous)，這是社群[最需要的功能](https://github.com/supabase/auth/issues/68)之一。 {% cta https://supabase.com/ga-week %} ⚡️ 了解有關 GA 週的更多資訊 {% endcta %} 匿名登入可用於建立尚未註冊您的應用程式的**臨時使用者**。這降低了新用戶試用您的產品的阻力，因為他們不必提供任何註冊憑證。 {% 嵌入 https://youtu.be/WNN7Pp5Ftk4 %} 啟用匿名登入 ------ 您今天可以從儀表板為您的專案[啟用匿名登入](https://supabase.com/dashboard/project/_/settings/auth)：  對於本機開發，請升級 Supabase CLI 並將設定新增至`config.toml`檔案： ``` [auth] enable_anonymous_sign_ins = true ``` 現在您可以透過[Javascript](https://supabase.com/docs/reference/javascript/auth-signinanonymously) 、 [Flutter](https://supabase.com/docs/reference/dart/auth-signinanonymously)或[Swift](https://supabase.com/docs/reference/swift/auth-signinanonymously) SDK 建立匿名使用者。以下是如何使用`supabase-js`建立匿名用戶。 ``` const { data, error } = await supabase .auth .signInAnonymously() ``` 術語 -- 使用匿名登入建立的個人資料也會經過`authenticated` ！ 呼叫`.signInAnonymously()`後，您已將使用者移至驗證流程，我們將他們視為登入使用者：  限制匿名用戶的存取 --------- 與永久使用者一樣，匿名使用者也保留在`auth.users`表中： |編號 |角色 |電子郵件 |是\_匿名 | | ------------------------------------------------ | ------------- | ----------------- | ------------ | | e053e470-afa1-4625-8963-37adb862fd11 |已驗證 |空|真實 | | 5563108e-ac81-4063-9288-4f3db068efa1 |已驗證 | [email protected] |假 | 匿名用戶可以透過用戶 JWT 中傳回的`is_anonymous`聲明來辨識，該聲明可從行級安全策略 (RLS) 存取。如果您想限制對應用程式中某些功能的存取，這會很有幫助。 例如，假設我們有一個線上論壇，用戶可以在其中建立和閱讀貼文。 給定這個表來儲存帖子： ``` create table public.posts ( id serial primary key, name text not null, description text ); ``` 如果我們只想允許永久用戶建立帖子，我們可以透過檢查 JWT `select auth.jwt() ->> 'is_anonymous'`來檢查使用者是否是匿名的。 在 RLS 策略中使用此函數： ``` create policy "Only permanent users can create posts" on public.posts for insert to authenticated -- Note: user is still authenticated with check ( (select auth.jwt() ->> 'is_anonymous')::boolean is false ); ``` RLS 為我們提供了建立各種規則的充分靈活性。 例如，允許永久用戶對所有帖子進行讀取存取，並限制匿名用戶只能存取今天建立的帖子： ``` create policy "Limit access to anonymous users" on public.posts for select to authenticated -- Note: user is still authenticated using ( case when (select (auth.jwt() ->> 'is_anonymous'))::boolean is true then (created_at >= current_date) else true end ); ``` 將匿名用戶轉換為永久用戶 ------------ 在某些時候，匿名用戶可能決定他們想要建立一個貼文。我們在這裡提示他們註冊一個帳戶，將他們轉換為永久用戶。 > 當匿名使用者俱有與其關聯的身份時，他們被視為永久使用者。 轉換後，使用者 ID 保持不變，這表示與使用者 ID 關聯的任何資料都將被保留。 Supabase Auth 提供了 2 種方法來實現此目的： 1-連結電子郵件或電話身份 2-連結 OAuth 身份 連結電子郵件或電話身份 ----------- 若要連結電子郵件或電話身分： ``` const { data, error } = await supabase .auth .updateUser({ email }) ``` 連結 OAuth 身份 ----------- 要將 OAuth 身分連結到匿名用戶，您需要為專案[啟用手動連結](https://supabase.com/dashboard/project/_/settings/auth)。了解[身分連結](https://supabase.com/docs/guides/auth/auth-identity-linking)如何與 Supabase Auth 配合使用。  啟用後，您可以呼叫`linkIdentity()`方法： ``` const { data, error } = await supabase .auth .linkIdentity({ provider: 'google' }) ``` 冒充匿名用戶 ------ 在建立 RLS 策略來區分匿名使用者的存取權時，您可以利用 SQL 編輯器中的[使用者模擬功能](https://supabase.com/blog/studio-introducing-assistant)來測試您的策略：  *SQL 編輯器中的資料庫角色設定。您可以從下拉清單中選擇使用者來模擬匿名使用者。* [使用者管理畫面](https://supabase.com/dashboard/project/_/auth/users)提供了匿名使用者過濾的選項，這可以幫助了解已建立了多少匿名使用者。  下一步是什麼 ------ 管理匿名用戶可能很棘手，尤其是當您的網站有大量訪客時。我們正在開發「自動清理」選項，以刪除超過 30 天不活動的匿名用戶。同時，由於匿名使用者儲存在資料庫的 auth 模式中，因此您可以透過執行下列查詢來清理孤立的匿名使用者： ``` -- deletes anonymous users created more than 30 days ago delete from auth.users where is_anonymous is true and created_at < now() - interval '30 days'; ``` 我們也正在開發[linter，](https://github.com/supabase/splinter/pull/28)以檢查您的 RLS 策略並突出顯示那些允許匿名用戶存取的策略 - 請繼續關注本月稍後的更新！ 入門 -- - 文件：[匿名登入](https://supabase.com/docs/guides/auth/auth-anonymous) - API方法參考： [Javascript](https://supabase.com/docs/reference/javascript/auth-signinanonymously) 、 [Flutter](https://supabase.com/docs/reference/dart/auth-signinanonymously) 、 [Swift](https://supabase.com/docs/reference/swift/auth-signinanonymously) **更多關於 GA 週的訊息** - [斯帕巴斯威夫特](https://supabase.com/blog/supabase-swift) - [AWS Marketplace 上的 Supabase](https://supabase.com/blog/supabase-aws-marketplace) - [Supabase 開源黑客馬拉松 2024](https://supabase.com/blog/supabase-oss-hackathon) - [Supabase引導程式](https://supabase.com/blog/supabase-bootstrap) - \[分支現已公開 \](https://supabase.com/blog/branching-publicly-available) --- 原文出處：https://dev.to/supabase/supabase-auth-now-supports-anonymous-sign-ins-1j00
這是科技進步的令人興奮的時刻。 作為開發人員，我們所有人都需要從事可以產生收入或幫助建立我們聲譽的副業專案。 今天，我們將介紹 10 個令人興奮的專案，並發現使用每個專案建立的 3-4 個流行應用程式。總共有 30 多個專案，提供程式碼存取供您學習。 這些將讓您編碼一段時間，所以讓我們開始吧！  --- 1. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 ------------------------------------------------------------------------------------  將 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 %} --- ### 🎯 使用 CopilotKit 建立的熱門應用程式。 我們可以使用 CopilotKit 建立許多創新應用程式，所以讓我們探索一些脫穎而出的應用程式！ ### ✅ [人工智慧驅動的部落格平台](https://dev.to/copilotkit/how-to-build-an-ai-powered-blogging-platform-nextjs-langchain-supabase-1hdp)。  您可以閱讀本文，使用`Next.js` 、 `Langchain` 、 `Supabase`和`CopilotKit`來建立這個令人驚嘆的應用程式。 LangChain & Tavily 用於網路搜尋人工智慧代理，Supabase 用於儲存和檢索部落格平台文章資料，而 CopilotKit 用於將人工智慧整合到應用程式中。 您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/aipoweredblog)。 ### ✅ [文字到 Powerpoint 應用程式](https://dev.to/copilotkit/how-to-build-ai-powered-powerpoint-app-nextjs-openai-copilotkit-ji2)。 您可以閱讀本文，使用`Next.js` 、 `OpenAI`和`CopilotKit`建立 Text to Powerpoint 應用程式。 您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/aipoweredpresentation)。 ### ✅ [V0.dev 複製](https://dev.to/copilotkit/i-created-a-v0-clone-with-nextjs-gpt4-copilotkit-3cmb)。  如果您不熟悉，Vercel 的 V0 是一款人工智慧驅動的工具，可讓您根據提示產生 UI，以及許多其他有用的功能。 您可以使用`Next.js` 、 `GPT4`和`CopilotKit`建立 V0 的克隆。這篇文章名列前 7 名，總的來說，這是一個值得加入到您的作品集中的偉大專案。 您可以檢查[GitHub 儲存庫](https://github.com/Tabintel/v0-copilot-next)。 ### ✅[與您的履歷聊天](https://dev.to/copilotkit/how-to-build-the-with-nextjs-openai-1mhb)。 您可以閱讀本文，使用`Next.js` 、 `OpenAI`和`CopilotKit`來建立這個很棒的工具。 您不僅可以使用 ChatGPT 產生履歷，還可以將其匯出為 PDF，甚至可以透過與其對話來進一步改進它。多酷啊，對吧:) 您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/AIPoweredResumeBuilder)。 --- 2. [Appwrite](https://github.com/appwrite/appwrite) - 減少後端的麻煩。 --------------------------------------------------------------   Appwrite 的開源平台可讓您將身份驗證、資料庫、函數和儲存體新增至您的產品中，並建立任何規模的任何應用程式、擁有您的資料並使用您喜歡的編碼語言和工具。 類似的選項是supabase，但儘管它們有相似之處，但它們在幾個方面有很大不同。 Restack 非常漂亮地涵蓋了[Appwrite 與 Supabase](https://www.restack.io/docs/supabase-knowledge-supabase-vs-appwrite) 。一探究竟！ 他們有很好的貢獻指南，甚至不厭其煩地詳細解釋架構。 開始使用以下 npm 指令。 ``` npm install appwrite ``` 您可以像這樣建立一個登入元件。 ``` "use client"; import { useState } from "react"; import { account, ID } from "./appwrite"; const LoginPage = () => { const [loggedInUser, setLoggedInUser] = useState(null); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [name, setName] = useState(""); const login = async (email, password) => { const session = await account.createEmailSession(email, password); setLoggedInUser(await account.get()); }; const register = async () => { await account.create(ID.unique(), email, password, name); login(email, password); }; const logout = async () => { await account.deleteSession("current"); setLoggedInUser(null); }; if (loggedInUser) { return ( <div> <p>Logged in as {loggedInUser.name}</p> <button type="button" onClick={logout}> Logout </button> </div> ); } return ( <div> <p>Not logged in</p> <form> <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} /> <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} /> <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} /> <button type="button" onClick={() => login(email, password)}> Login </button> <button type="button" onClick={register}> Register </button> </form> </div> ); }; export default LoginPage; ``` 您可以閱讀[文件](https://appwrite.io/docs)。 Appwrite 可以非常輕鬆地建立具有開箱即用的擴充功能的可擴展後端應用程式。 Appwrite 最近推出的「Init」發布了一些令人興奮的功能。對於我們可以用 init 做什麼，我並沒有達到 100% 的標準，所以請發表評論讓我們了解更多資訊。 它有一些很酷的功能，對於將我們的應用程式提升到一個新的水平非常有用。好奇心超載：D  我很高興它可以連接到 Twilio、Vonage 和 Mailgun。更多選擇意味著更好的產品。 Appwrite 在 GitHub 上擁有 40k+ Stars，並且發布了`v1.5`版本。 {% cta https://github.com/appwrite/appwrite %} Star Appwrite ⭐️ {% endcta %} ### 🎯 使用 Appwrite 建立的熱門應用程式。 Appwrite 非常受歡迎，尤其是因為它的易用性。這些是一些很酷的專案，您可以從中獲得靈感。 ### ✅ [FoodMagic](https://github.com/Sameerkash/FoodMagic) - 擴增實境食品應用程式。  FoodMagic 是使用擴增實境和令人驚嘆的使用者介面的獨特食品配送服務。 它是使用`Appwrite`和 Flutter 建立的。 涉及 Appwrite 函數、資料庫、儲存和更多概念，因此您可以使用它學到很多東西。 您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/aipoweredpresentation)。 ### ✅[回購評級員](https://github.com/EddieHubCommunity/RepoRater)。 此專案可讓您從開發者體驗 (DX) 的角度對 GitHub 儲存庫進行評分。 它是使用`Appwrite` 、 `Headless UI (React)` 、 `Next.js`和`Tailwind CSS`建立的。 您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/aipoweredpresentation)並查看[即時執行情況](https://repo-rater.eddiehub.io/)。 ### ✅ [Twitter 克隆](https://www.youtube.com/watch?v=njLEDvoDjtk)- FreeCodeCamp (YouTube)。 它具有各種功能，例如使用電子郵件和密碼註冊和登入、發送文字、圖像和連結、辨識和儲存主題標籤、顯示推文、喜歡推文、轉發、評論/回應、關注用戶、搜尋用戶、顯示追蹤者、追蹤和最近的推文、編輯用戶個人資料、顯示帶有特定主題標籤的推文以及名為「Twitter Blue」的高級功能。 講師還實現了一個通知選項卡，當有人回覆您、追蹤您、喜歡您的推文或轉發時，該選項卡將顯示通知。在本教程結束時，您將擁有一個功能齊全的 Twitter 克隆，您可以對其進行進一步自訂和改進。意味著一切:) 他使用過`Flutter` 、 `Appwrite`和`Riverpod` ，並且教學超過 9 個小時，所以這是一個很長的教學。 ### ✅ [Dart 線上編譯器](https://github.com/aadarshadhakalg/Dart-Playground)  一個應用程式，用戶可以編寫和執行小型 dart 程序，而無需在系統中安裝 dart SDK。該應用程式使用 Appwrite 函數來執行 dart 程式碼。 它是使用`Appwrite`和`Flutter`建構的。 這使用了 Appwrite Auth、函數和資料庫來進行工作。 您可以檢查[GitHub 儲存庫](https://github.com/aadarshadhakalg/Dart-Playground)。 --- 3.[重新發送](https://github.com/resend)- 為開發人員提供的電子郵件 API。 ------------------------------------------------------  您可以使用 React 建立和傳送電子郵件。 2023 年最受炒作的產品之一。 他們提供了大量的 SDK 選項，因此您不必從您首選的技術堆疊進行切換。  Resend 非常值得信賴，許多公司（例如 Payload 和 Dub）都使用它。您可以看到[客戶](https://resend.com/customers)清單。 開始使用以下 npm 指令。 ``` npm install @react-email/components -E ``` 這是將其與 next.js 專案整合的方法。 ``` import { EmailTemplate } from '@/components/email-template'; import { Resend } from 'resend'; const resend = new Resend(process.env.RESEND_API_KEY); export async function POST() { const { data, error } = await resend.emails.send({ from: '[email protected]', to: '[email protected]', subject: 'Hello world', react: EmailTemplate({ firstName: 'John' }), }); if (error) { return Response.json({ error }); } return Response.json(data); } ``` 您可以閱讀[文件](https://resend.com/docs/introduction)。  如果您是教學人員，我推薦 YouTube 上的這個[播放清單系列](https://www.youtube.com/playlist?list=PL8HkCX2C5h0VVXsgSXtj2KXpoPATnMFeF)，它涵蓋了大部分內容並且易於理解。 基本理念是一個簡單、優雅的介面，使您能夠在幾分鐘內開始發送電子郵件。它可以透過適用於您最喜歡的程式語言的 SDK 直接融入您的程式碼中。 出於顯而易見的原因，React email 在 GitHub 上擁有最高的星數（12k+），並且超過 5000 名開發人員在他們的應用程式中使用它。 {% cta https://github.com/resend %} 星標重新發送 ⭐️ {% endcta %} ### 🎯 使用重新發送發送電子郵件的熱門應用程式。 讓我們看看一些使用重新發送來發送電子郵件的應用程式。 ### ✅ [gitroom](https://github.com/gitroomhq/gitroom) 。 提前安排所有社群媒體貼文和文章。您也可以與其他團隊成員合作交換或購買貼文。 它是使用`NX (Monorepo)` 、 `NextJS (React)` 、 `NestJS` 、 `Prisma (Default to PostgreSQL)` 、 `Redis`和`Resend`建構的。 您可以檢查[GitHub 儲存庫](https://github.com/gitroomhq/gitroom)和[網站](https://gitroom.com/)。 Gitroom 在 GitHub 上有 3k+ Stars。 ### ✅[任何郵件](https://github.com/anymail/django-anymail)。 Anymail 可讓您使用您選擇的交易電子郵件服務提供者 (ESP) 在 Django 中傳送和接收電子郵件。 您可以檢查[GitHub 儲存庫](https://github.com/anymail/django-anymail)和[網站](https://anymail.dev/en/stable/)。他們在 GitHub 上有超過 1,500 個 Stars，並且正在發布 v10 版本。 ### ✅[徽章](https://github.com/projectx-codehagen/Badget)。  Badget 旨在透過使用者友善的介面和強大的後端來簡化財務管理。 它是使用`Next.js 14` 、 `Turborepo` 、 `Drizzle ORM` 、 `Planetscale` 、 `Clerk` 、 `Resend` 、 `React Email` 、 `Shadcn/ui`和`Stripe`建置的。 您可以檢查[GitHub 儲存庫](https://github.com/projectx-codehagen/Badget)。 這個專案很快就會在 GitHub 上達到 2k Stars。 --- 4. [Shadcn UI](https://ui.shadcn.com/docs) - 您可以將其複製並貼上到應用程式中的元件。 -----------------------------------------------------------------  這個開源專案無需介紹。 由於其簡單性、自訂選項和靈活性，它一推出就受到了熱烈歡迎。 然而，我確實同意它並不像看起來那麼簡單，特別是如果您不熟悉它的語法和結構。 開始使用以下命令（Next.js 應用程式）。 ``` npx shadcn-ui@latest init ``` 其餘的將自動完成，您可以匯入[元件](https://ui.shadcn.com/docs/components/accordion)並相應地使用它們。 您可以根據您使用的框架閱讀[文件](https://ui.shadcn.com/docs)和[安裝指南](https://ui.shadcn.com/docs/installation)。 Shadcn UI 在 GitHub 上擁有超過 55,000 顆星，並被超過 3,000 名開發者使用。 {% cta https://ui.shadcn.com/docs %} Star Shadcn UI ⭐️ {% endcta %} ### 🎯 使用 Shadcn UI 建立的熱門應用程式。 我不會介紹非常簡單的專案，所以不用擔心。 ### ✅ [10000+ shadcn/ui 主題](https://github.com/jln13x/ui.jln.dev/)。  有了這個，您可以探索、保存、產生新主題，甚至對隨機主題進行投票。您可以使用的好專案之一。 使用者介面也很糟糕。 它是使用很多套件建構的，例如`react-query` 、 `Framer` 、 `Zod` ，當然還有`shadcn ui` 。 您可以查看[GitHub 儲存庫](https://github.com/jln13x/ui.jln.dev/)和[現場演示](https://ui.jln.dev/)。 它在 GitHub 上有 600 多個 Star。 ### ✅[開啟 v0](https://github.com/raidendotai/openv0) 。  我正在報道 v0.dev 但意識到它不是開源的。 我不會放棄這個想法。 Openv0 是另一個使用 AI 產生 UI 元件的專案。元件產生是一個多通道管道 - 每個通道都是一個完全獨立的插件。 它支援 React、Next.js 和 Svelte 等前端框架。使用 Flowbite、NextUI 和 Shadcn 建置。 檢查[GitHub 儲存庫](https://github.com/raidendotai/openv0)並閱讀[安裝指南](https://github.com/raidendotai/openv0?tab=readme-ov-file#install)。 您也可以在[Replit](https://replit.com/@n-raidenai/openv0-react)上執行它。它在 GitHub 上有 3k+ Stars。 很多專案都使用Shadcn，請自行探索。 --- 5. [Buildship](https://buildship.com/) - 低程式碼視覺化後端建構器。 ------------------------------------------------------  對於您正在使用無程式碼應用程式建構器（FlutterFlow、Webflow、Framer、Adalo、Bubble、BravoStudio...）或前端框架（Next.js、React、Vue...）建立的應用程式，您需要一個後端來支援可擴展的 API、安全工作流程、自動化等。 BuildShip 為您提供了一種完全視覺化的方式，可以在易於使用的完全託管體驗中可擴展地建立這些後端任務。 這意味著您無需在雲端平台上爭論或部署事物或執行 DevOps。只需立即建造和發貨 🚀 他們甚至與 TypeSense 合作並且發展得非常快！  我嘗試過Buildship，它很強大。 {% cta https://github.com/rowyio/buildship %} 明星建造 ⭐️ {% endcta %} ### 🎯 使用 Buildship 建立的熱門應用程式。 大多數資源都是影片，但值得一看。 YouTube 官方頻道上有很多教程，但以下是一些有趣的教程。 ### ✅[使用低程式碼和 AI 建立旅遊 WebApp](https://www.youtube.com/watch?v=Pj08uTOzNPQ) 。  它是使用`Buildship`和`Locofy`建構的。 Locofy.ai 用於從設計到應用程式前端的過渡，而 BuildShip.com 用於應用程式的後端。 它還計算實時距離和旅程成本。他們使用 Figma 來源進行設計。 ### ✅ [Telegram 上的人工智慧助理](https://www.youtube.com/watch?v=Pz1t1KCnrbs)。 您可以使用 OpenAI Assistant 和 BuildShip 建立智慧型 Telegram 機器人，而無需編碼。這將幫助您與資料聊天。看起來很令人興奮，對吧:) ### ✅ [AI YouTube 時間戳產生器](https://www.youtube.com/watch?v=7DkLUY6kfTg)。  相信我，使用本教程您會學到很多東西。您可以查看開發人員上[未發布的有關自訂提示的帖子](https://dev.to/jamesmurdza/building-a-fcg-temp-slug-4578922?preview=4210cdff8fea25a8cd4d81363155c451b20e6484504a41fa0f0d992a272c21a3a707c0cb6ddac2f740234c032a02af5ce442841ad4033efc46424c84)。 您可以檢查[前端程式碼](https://github.com/jamesmurdza/timestamp-generator-app/)。 --- 6. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ----------------------------------------------------------------------------  Taipy 是一個開源 Python 庫，可用於輕鬆的端到端應用程式開發，具有假設分析、智慧管道執行、內建調度和部署工具。 我相信你們大多數人都不明白 Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 因此，您可以繪製資料集的圖表，並使用類似 GUI 的滑桿來提供使用其他實用功能來處理資料的選項。 雖然 Streamlit 是一種流行的工具，但在處理大型資料集時，其效能可能會顯著下降，這使得它在生產級使用上不切實際。 另一方面，Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 Taipy，您將親身體驗其用戶友好的介面和高效的資料處理。 在底層，Taipy 利用各種函式庫來簡化開發並增強功能。  開始使用以下命令。 ``` pip install taipy ``` 他們還使用分散式運算提高了效能，但最好的部分是 Taipy，它的所有依賴項現在都與 Python 3.12 完全相容，因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 另一個有用的事情是，Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。  如果您想閱讀部落格來了解程式碼庫結構，您可以閱讀 HuggingFace[的使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。 Taipy 在 GitHub 上有 8k+ Stars，並且處於`v3`版本，因此它們正在不斷改進。 {% cta https://github.com/Avaiga/taipy %} Star Taipy ⭐️ {% endcta %} ### 🎯 使用 Taipy 建立的熱門應用程式。 嘗試新技術通常很困難，但 Taipy 提供了 10 多個演示教程，其中包含程式碼和適當的文件供您遵循。我們將看到開發人員建構的其他一些專案。 ### ✅[錢包方面](https://github.com/Ujj1225/from_Taipy-walletWISE)。  WalletWise 就像是我們財務的友善幫手，幫助我們追蹤收入和支出。它使用 Gemini 進行交易，使用 Taipy 來了解支出。 對使用者的收入和支出進行分析，以數學方式顯示，並顯示 7 個做出更好、更明智的財務決策的提示。 它還具有視覺化工具，您可以在其中查看不同的標題，以了解有關您的支出的更多資訊。 就創造力而言，這是下面提到的所有內容中最好的。 ### ✅[人口普查](https://github.com/SusheelThapa/from_taipy_census)。 透過由 Taipy 提供支持的「人口普查」專案，將資料編織到動態視覺化中，揭開 2021 年尼泊爾的住房和人口故事。 這有很多選擇，所以如果您想用更少的錢學到更多，這是最好的選擇！ ### ✅[太皮象棋](https://github.com/KorieDrakeChaney/taipy-chess)。  所有應用程式中我最喜歡的一個，因為我喜歡國際象棋。哈哈！ 這是一個基於20,000盤棋的國際象棋視覺化工具。您可以查看所有比賽、他們參加的開局、對手、表現最好的開局以及最成功的開局。您可以查看資料的熱圖和圖表。 您還可以查看[Olympic Medals Taipy 應用程式](https://github.com/enarroied/Olympic-Medals-Taipy-App)，該應用程式提供了一個儀表板，其中包含有關奧運獎牌、 [Covid 儀表板](https://covid-dashboard.taipy.cloud/Country)和[資料視覺化的](https://production-planning.taipy.cloud/Data-Visualization)訊息。 --- 7. [xyflow](https://github.com/xyflow/xyflow) - 使用 React 建立基於節點的 UI。 --------------------------------------------------------------------  XYFlow 是一個強大的開源程式庫，用於使用 React 或 Svelte 建立基於節點的 UI。它是一個單一的倉庫，提供[React Flow](https://reactflow.dev)和[Svelte Flow](https://svelteflow.dev) 。讓我們更多地了解可以使用 React flow 做什麼。  您可以觀看此影片，在 60 秒內了解 React Flow。 {% 嵌入 https://www.youtube.com/watch?v=aUBWE41a900 %} 有些功能在專業模式下可用，但免費層中的功能足以形成一個非常互動的流程。 React 流程以 TypeScript 編寫並使用 Cypress 進行測試。 開始使用以下 npm 指令。 ``` npm install reactflow ``` 以下介紹如何建立兩個節點（ `Hello`和`World` ，並透過邊連接。節點具有預先定義的初始位置以防止重疊，並且我們還應用樣式來確保有足夠的空間來渲染圖形。 ``` import ReactFlow, { Controls, Background } from 'reactflow'; import 'reactflow/dist/style.css'; const edges = [{ id: '1-2', source: '1', target: '2' }]; const nodes = [ { id: '1', data: { label: 'Hello' }, position: { x: 0, y: 0 }, type: 'input', }, { id: '2', data: { label: 'World' }, position: { x: 100, y: 100 }, }, ]; function Flow() { return ( <div style={{ height: '100%' }}> <ReactFlow nodes={nodes} edges={edges}> <Background /> <Controls /> </ReactFlow> </div> ); } export default Flow; ``` 這就是它的樣子。您還可以新增標籤、更改類型並使其具有互動性。  您可以在 React Flow 的 API 參考中查看[完整的選項清單](https://reactflow.dev/api-reference/react-flow)以及元件、鉤子和實用程式。 最好的部分是您還可以加入[自訂節點](https://reactflow.dev/learn/customization/custom-nodes)。在您的自訂節點中，您可以渲染您想要的一切。您可以定義多個來源和目標句柄並呈現表單輸入或圖表。您可以查看此[codesandbox](https://codesandbox.io/p/sandbox/pensive-field-z4kv3w?file=%2FApp.js&utm_medium=sandpack)作為範例。 您可以閱讀[文件](https://reactflow.dev/learn)並查看 Create React App、Next.js 和 Remix 的[範例 React Flow 應用程式](https://github.com/xyflow/react-flow-example-apps)。 React Flow 附帶了幾個額外的[插件](https://reactflow.dev/learn/concepts/plugin-components)元件，可以幫助您使用 Background、Minimap、Controls、Panel、NodeToolbar 和 NodeResizer 元件製作更高級的應用程式。 例如，您可能已經注意到許多網站的背景中有圓點，增強了美觀性。要實現此模式，您可以簡單地使用 React Flow 中的後台元件。 ``` import { Background } from 'reactflow'; <Background color="#ccc" variant={'dots'} /> // this will be under React Flow component. Just an example. ```  如果您正在尋找一篇快速文章，我建議您查看 Webkid 的[React Flow - A Library for Rendering Interactive Graphs](https://webkid.io/blog/react-flow-node-based-graph-library/) 。 React Flow 由 Webkid 開發和維護。 它在 GitHub 上有超過 19k 顆星星，並且在`v11.10.4`上顯示它們正在不斷改進，npm 套件每週下載量超過 40 萬次。您可以輕鬆使用的最佳專案之一。  {% cta https://github.com/xyflow/xyflow %} 星 xyflow ⭐️ {% endcta %} ### 🎯 使用 React Flow 建立的熱門應用程式。 很多公司都使用 React flow，例如 Zapier 和 Stripe。夠可信，可以使用。我不會介紹使用 Svelte Flow 製作的應用程式，因為 React 更受歡迎。 ### ✅[條紋文件](https://docs.stripe.com/payments/checkout/how-checkout-works#lifecycle)。  Stripe 使用它，特別是在展示結帳的工作原理時。 您可以閱讀[完整的文件](https://stripe.com/docs)。 ### ✅[著色蛙](https://shaderfrog.com/2/editor/cln84z4950000pan66v5fcunv)。  我選擇這個是因為這個專案很酷。 ### ✅ [類型](https://www.typeform.com/help/a/use-the-logic-map-to-add-logic-to-your-forms-5514792640916/)。  Typeform 使用它來展示如何使用邏輯圖為表單新增邏輯。 您也可以發現它被用於[FlowwiseAI](https://flowiseai.com/)和[Doubleloop](https://app.doubleloop.app/strategy/2236/map) 。想讓您知道，Supabase 是 GitHub 上 XYflow 的贊助商之一。 --- 8. [Pieces](https://github.com/pieces-app) - 您的工作流程副駕駛。 -------------------------------------------------------  Pieces 是一款支援人工智慧的生產力工具，旨在透過智慧程式碼片段管理、情境化副駕駛互動和主動呈現有用材料來幫助開發人員管理混亂的工作流程。 它最大限度地減少了上下文切換、簡化了工作流程並提升了整體開發體驗，同時透過完全離線的 AI 方法維護了工作的隱私和安全性。太棒了：D  它與您最喜歡的工具無縫集成，以簡化、理解和提升您的編碼流程。 它具有比表面上看到的更令人興奮的功能。 - 它可以透過閃電般快速的搜尋體驗找到您需要的材料，讓您根據您的喜好透過自然語言、程式碼、標籤和其他語義進行查詢。可以放心地說“您的個人離線谷歌”。 - 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) 。 {% cta https://github.com/pieces-app/ %} 星星碎片 ⭐️ {% endcta %} ### 🎯 用 Pieces 建置的熱門應用程式。 由於它更像是一個工具，因此不會有那麼多專案，但開發人員仍然使用它來建立很棒的專案。 ### ✅[辦公桌夥伴](https://github.com/ayothekingg/deskbuddy)。 一個社區專案，可透過分析和 Copilot Conversation 幫助您了解、評估和改善您的編碼習慣。 使用的主要語言是 TypeScript。 您可以檢查[GitHub 儲存庫](https://github.com/ayothekingg/deskbuddy)。 ### ✅ [CLI 代理](https://github.com/pieces-app/cli-agent)。 一個全面的命令列介面 (CLI) 工具，旨在與 Pieces OS 無縫互動。它提供了一系列功能，例如資產管理、應用程式互動以及與各種 Pieces OS 功能的整合。 使用的主要語言是Python。 您可以檢查[GitHub 儲存庫](https://github.com/pieces-app/cli-agent)。 ### ✅ [Streamlit 和碎片](https://github.com/pieces-app/pieces-copilot-streamlit-example)。 Pieces Copilot Streamlit Bot 是一款使用 Streamlit 建立的互動式聊天機器人應用程式，旨在為用戶提供無縫介面來即時提問和接收答案。 使用的主要語言是Python。 您可以檢查[GitHub 儲存庫](https://github.com/pieces-app/pieces-copilot-streamlit-example)。 --- 9. [Typesense](https://github.com/typesense/typesense) - 快速、容錯、記憶體中模糊搜尋引擎。 --------------------------------------------------------------------------  Typesense 是一款開源、容錯的搜尋引擎，針對即時（通常低於 50 毫秒）的即輸入即搜尋體驗和開發人員工作效率進行了最佳化。 如果您聽說過 ElasticSearch 或 Algolia，那麼考慮 Typesense 的一個好方法是，它是 Algolia 的開源替代品，解決了一些關鍵問題，並且是 ElasticSearch 的更易於使用、包含電池的替代品。 您可以在[Algolia vs ElasticSearch vs Meilsearch vs Typesense](https://typesense.org/typesense-vs-algolia-vs-elasticsearch-vs-meilisearch/)中對它們進行比較。 它是一個快速、容錯、內存中模糊搜尋引擎，用於建置令人愉快的搜尋體驗  您可以使用此指令安裝 Typesense 的 python 用戶端。 ``` pip install typesense ``` 根據文件，在這些情況下不應使用 Typesense。 A。 Typesense 不應用作主資料存儲，它存儲資料的唯一副本。 b. Typesense 通常不太適合搜尋應用程式日誌。 您可以閱讀[文件](https://typesense.org/docs/)和[安裝指南](https://github.com/typesense/typesense?tab=readme-ov-file#install)。  我建議您閱讀快速入門[指南](https://typesense.org/docs/guide/#quick-start)，該指南將逐步指導您如何安裝和建立搜尋 UI。他們還提供了高達 28M 的資料集的明確[基準測試](https://typesense.org/docs/overview/benchmarks.html#typesense-benchmarks)，以便您可以檢查將獲得的效能。 如果您更喜歡教程，那麼我建議您觀看這個[YouTube 影片](https://www.youtube.com/watch?v=kwtHOkf7Jdg)。您將獲得 Typesense 的概述，作者將向您展示端到端演示。 TypeSense 在 GitHub 上有 17k+ Stars，而且版本為 26，這真是太瘋狂了。它是使用 C++ 建構的。 {% cta https://github.com/typesense/typesense?tab=readme-ov-file %} 明星 Typesense ⭐️ {% endcta %} ### 🎯 使用 Typesense 建立的熱門應用程式。 一些使用 Typesense 的現場演示和應用程式。 ### ✅ 現場示範。 他們還提供現場演示，展示 Typesense 在大型資料集上的實際應用，例如： - [從 Linux 核心搜尋 1M Git 提交訊息](linux-commits-search.typesense.org)- [GitHub Repo](https://github.com/typesense/showcase-linux-commits-search) - [從 MusicBrainz 搜尋 3200 萬首歌曲資料集](songs-search.typesense.org)- [GitHub Repo](https://github.com/typesense/showcase-songs-search) - [具有預先輸入功能的拼字檢查器，包含 333K 英文單字](spellcheck.typesense.org)- [GitHub Repo](https://github.com/typesense/showcase-spellcheck) - [從 OpenLibrary 搜尋 28M 圖書資料集](books-search.typesense.org)- [GitHub Repo](https://github.com/typesense/showcase-books-search) - [GeoSearch / 瀏覽體驗](airbnb-geosearch.typesense.org)- [GitHub Repo](https://github.com/typesense/showcase-airbnb-geosearch) - [電子商務瀏覽與搜尋體驗](https://ecommerce-store.typesense.org/)- [GitHub Repo](https://github.com/typesense/showcase-ecommerce-store) - [搜尋 2M 烹飪食譜](https://recipe-search.typesense.org/)- [GitHub Repo](https://github.com/typesense/showcase-recipe-search) 其他一些公司使用 Typesense 雲端來完成整個工作。  這些公司包括 Codecademy、Logitech、Buildship、n8n 和 Storipress CMS。 --- 10. [Payload](https://github.com/payloadcms/payload) - 建立未來網路的最快方式。 -------------------------------------------------------------------  建立現代後端 + 管理 UI 的最佳方式。 Payload 沒有黑魔法，全是 TypeScript，並且完全開源，它既是一個應用程式框架，也是一個無頭 CMS。我全心全意欽佩的少數專案之一。 他們的網站擁有最乾淨的使用者介面之一，我看過 1000 多個網站，其中包括非常瘋狂的網站。快去看看吧！  您可以觀看這段 YouTube 影片，其中 James（聯合創始人）談論了 Payload CMS 簡介以及它如何縮小 Headless CMS 和應用程式框架之間的差距。 {% 嵌入 https://www.youtube.com/watch?v=In\_lFhzmbME %} 簡而言之，Payload 是一個無頭 CMS 和應用程式框架。它旨在為您的開發過程提供巨大的推動力，但重要的是，當您的應用程式變得更加複雜時，請不要妨礙您。 開始使用以下命令。 ``` npx create-payload-app@latest ``` 您可以閱讀 Payload 與普通 CMS 不同的完整[功能清單](https://github.com/payloadcms/payload?tab=readme-ov-file#-features)。 如果您是 next.js 的粉絲，我建議您閱讀[The Ultimate Guide To Use Next.js with Payload](https://payloadcms.com/blog/the-ultimate-guide-to-using-nextjs-with-payload) 。 您可以閱讀[文件](https://payloadcms.com/docs)和[安裝指南](https://payloadcms.com/docs/getting-started/installation)。 v3 beta 版本的有效負載也變得很困難，所以請密切注意。 Payload 在 GitHub 上擁有 19k+ Stars，並被 8k+ 開發者使用。 {% cta https://github.com/payloadcms/payload %} 明星有效負載 ⭐️ {% endcta %} ### 🎯 使用 Payload 的熱門應用程式 + 模板。 我們將看到可協助您將 Payload 用於特定用例的範本和應用程式。 ### ✅[混音和有效負載](https://github.com/payloadcms/remix-server) 帶有 Remix 和 Payload 的單聲道儲存庫範本。 這可以幫助您設定 Payload CMS 與 Remix 一起進行內容管理，從而將每個應用程式分為其套件（包括 Express 伺服器應用程式）。 ### ✅ [Astro 和有效負載](https://github.com/mooxl/astroad) 這是 Astro 和 Payloadcms 的預先配置設置，旨在讓您輕鬆開始建立網站。借助 Astroad，您將擁有一個可以使用 Docker 在本地執行的完整開發環境。此設定簡化了將網站部署到生產環境之前的測試和開發。 ### ✅[電子商務範本](https://github.com/payloadcms/payload/tree/main/templates/ecommerce)。 他們還提供了一個電子商務模板，可幫助您更專注於業務策略而不是技術。您的 API 是您自己的，您的資料也屬於您。您無需依賴第三方服務，這些服務可能會在每月費用之外向您收取 API 超額費用，並可能限制您對資料庫的存取。經營線上商店的成本永遠不會超過伺服器的成本（加上支付處理費）。 開始做一些我們不喜歡的事情總是感覺很奇怪，因此您可以閱讀[如何使用使用此範本的 Next.js 建立電子商務網站](https://payloadcms.com/blog/how-to-build-an-e-commerce-site-with-nextjs)。 使用 Payload 的一些流行公司包括[Speechify](https://speechify.com/) 、 [Bizee](https://bizee.com/)等。 閱讀以下案例研究。他們將告訴您 Payload 的功能以及它如何奠定堅實的基礎。 ### ✅[快速犁](https://miquikplow.com/)  Quikplow 是一個創新的隨選服務平台，通常被稱為「掃雪機的 Uber」。 Quikplow 為其應用程式開發和部署功能齊全的後端的速度不僅是無與倫比的，而且幾乎是聞所未聞的。整個應用程式涵蓋身份驗證、基於位置的搜尋、電子商務功能等，開發時間不到 120 天。 前所未有的速度歸功於 Payload 的身份驗證、CRUD 操作和管理面板生成功能，為 Quikplow 節省了寶貴的開發時間和預算資源。 ### ✅[紙三角形](https://www.papertriangles.com/)  Paper Triangles 需要在線展示，以反映其著名的沉浸式體驗，但發現自己受到過時且緩慢的內容管理系統的限制。 與他們的代理商合作夥伴 Old Friends 合作，面臨的挑戰是建立一個能夠反映他們尖端工作的網站 - 需要自動播放影片、動態動畫、整合式相機庫等，而不犧牲內容更新的速度或便利性。 有效負載成為完美的選擇。它的開源特性以及 TypeScript 和 React 的強大基礎使其成為開發高度客製化的互動式前端的理想選擇。 對於像 Old Friends 這樣的代理商來說，Payload 是向 Paper Triangles 這樣的客戶兌現承諾的最佳選擇。 「Payload 為我們的客戶提供了易於使用的介面，並為我們提供了執行客製化設計所需的開發自由度，」Old Friends 的設計工程師 James Clements 說。 ### ✅[比茲](https://bizee.com/)  他們需要在短短三個月內遷移和檢修 2,500 個頁面，同時重新建立新的 CMS 平台，並在全面品牌重塑下實施全面的網站重新設計。 為了兌現對 Bizee 的承諾，Ritters（代理商）依靠 Payload 乾淨的、TypeScript 驅動的架構，事實證明該架構具有變革性，簡化了設計整合並確保了無錯誤、可維護的程式碼。這加速了內容遷移並保留了 SEO 和用戶體驗。 它甚至促進了從設計到開發的過程，幫助 Riotters 將 Figma 概念轉化為實際實施。 至關重要的是，Payload 與 Next.js 的天然協同作用促進了開發人員、設計師、UX 專業人員、QA 團隊和行銷人員之間的跨職能協作。 有許多公司決定使用 Payload，這是他們做出的最佳決定之一。不管怎樣，去探索你能用它做什麼。 --- 哇！ 這花了我很長很長的時間來寫。我希望你喜歡它。 我得到它！ 建立良好的長期副專案可能很困難，但即使是一個簡單的用例也可以帶來顯著的成果。誰知道？從長遠來看，您甚至可能會獲得對您有幫助的直接機會。 我試圖涵蓋每個專案製作的最好和最有用的應用程式。 不管怎樣，請讓我們知道您的想法以及您計劃在未來建立任何可擴展的副專案嗎？ 祝你有美好的一天！直到下一次。 請在 Twitter 上關注我，我將非常感激。 |如果你喜歡這類東西， 請關注我以了解更多:) | [](https://twitter.com/Anmol_Codes) [](https://github.com/Anmol-Baranwal) [](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 請關注 CopilotKit 以了解更多此類內容。 {% 嵌入 https://dev.to/copilotkit %} --- 原文出處：https://dev.to/copilotkit/30-app-ideas-with-complete-source-code-5f76
## 簡介 本文列出了開發人員可以在 Linux 電腦上安裝的六種出色工具。 🎉 請隨意探索這些工具，並為這些儲存庫加註星標。開源專案需要您的幫助！ 🙏🏻 您準備好成為 **10X Linux 使用者** 了嗎？ 🧠 開玩笑，你不會的，😆 但這些工具絕對可以加快你的日常工作量。 🏃🏻♂️💨  *** **1. [Ngrok](https://ngrok.com/)** > 💡 安全地在線上公開本機伺服器。  Ngrok 可協助您為本機 Web 伺服器建立公用 URL 🌐，以便您可以與團隊成員、客戶或全世界分享您正在進行的工作。 🌍 只需執行一個簡單的命令，Ngrok 就會啟動一條從公共端點到您的電腦的安全隧道。這使您可以在「localhost」上測試網站、應用程式和 API，而無需部署任何內容。 Ngrok 支援 HTTP 和 TCP 流量，因此您幾乎可以透過隧道傳輸任何內容 - Web 伺服器，甚至間接資料庫。它還提供有用的功能，例如自訂子網域和重播/檢查流量。 Ngrok 在以下主要領域提供協助： - 暫時分享一個僅在您的開發機器上執行的網站🖥️。 <br/> - 開發任何使用 webhook 的服務 🪝。 <br/> - 透過檢查網路流量來除錯 🧑💻 網路服務。 > ✨ 我不常使用這個工具，但我記得幾年前我第一次使用這個工具是為了向我的朋友展示我在本地建立的網站。 https://github.com/inconshreveable/ngrok 🌟 GitHub 上的 ngrok *** **2. [fzf](https://github.com/junegunn/fzf)** > 💡 命令列模糊查找器。  對於那些花費大量時間在終端工作的人來說，Fzf 是一個有用的工具🖥️。它可作為模糊查找器，可讓您快速搜尋並過濾檔案、命令歷史記錄、git 提交等資料清單。 這是它的工作原理。當您執行“fzf”命令時，它會在您鍵入時立即過濾下面的列表，以僅顯示匹配的結果。 這是一個可能的用例。 😯 ``` ls -la | fzf ```  這種互動式方法使您可以快速輕鬆地找到所需內容，即使在長列表中也是如此。模糊匹配意味著它將找到部分匹配，因此您不必輸入全名。 🤯 https://github.com/junegunn/fzf 🌟 GitHub 上的 fzf *** **3. [Z](https://github.com/rupa/z)** > 💡 在不知道整個路徑的情況下跳轉目錄。  您是否曾經處理過具有深層巢狀資料夾結構的專案，並且必須不斷使用 cd 命令鍵入長目錄📂路徑？ Z 解決了這個問題。 😉 一旦您安裝並開始使用 Z，它就會追蹤您最常存取的目錄。然後，您可以輸入一個短名稱來立即跳轉 🦘 到該資料夾，而不是輸入完整路徑。  Z 使用**兩個因素**來決定要為您追蹤哪些目錄：您存取資料夾的**頻率**以及您最近**存取該資料夾的方式。 因此，您最常使用的資料夾將獲得最短的名稱。 https://github.com/rupa/z 🌟 GitHub 上的 Z *** **4. [遊俠](https://github.com/ranger/ranger)** > 💡 受 VIM 啟發的控制台檔案管理器。  Ranger 是一個**受 vim 啟發的**檔案管理器👮🏻，帶有控制台介面。它提供了一種易於使用且高效的方式來導航和檢視檔案系統。 Ranger 的一些主要特點是： - 多欄✨顯示 <br/> - 預覽所選檔案/目錄的📂 <br/> - 常見檔案操作（`create/chmod/copy/delete`/...） <br/> - 一次重新命名多個文件 <br/> - 類似 VIM 的控制台和熱鍵 ⌨️  https://github.com/ranger/ranger 🌟 GitHub 上的 Ranger *** **5. [Ncdu](https://www.howtoing.com/ncdu-a-ncurses-based-disk-usage-analyzer-and-tracker/)** > 💡 查看 Linux 系統上使用的檔案和磁碟空間。 Ncdu 是一個有用的命令列工具，可以幫助您有效地管理磁碟空間。 它以直觀方式顯示磁碟機上的空間使用情況，使您可以輕鬆辨識佔用最多空間的大檔案和資料夾。 當您執行 Ncdu 時，它會掃描您的檔案系統並在終端機中顯示互動式列表，向您顯示磁碟機上的每個資料夾以及它們使用了多少空間。您可以導航此清單以深入查看並查看子資料夾的空間使用情況📂。  其簡單的介面使其易於使用，但功能強大，可用於分析磁碟使用情況和最佳化儲存。 如果您遇到磁碟空間💾填滿的問題，Ncdu 可以成為一個方便的工具來辨識罪魁禍首並採取行動。 👮🏻 *** **6。 [Exa](https://github.com/ogham/exa)** - _最好有_ > 💡 `ls` 指令的多彩替換。  > 🚨 Exa 現已不再維護，請使用 [eza](https://github.com/eza-community/eza)。它是 exa 的一個分支，增加了一些功能。但我仍在使用 Exa，而且效果很好。它們幾乎是一樣的。 Exa 是舊的「ls」指令的現代替代品，您在終端機中使用該指令列出檔案和資料夾。它為您提供當前目錄中更豐富多彩、詳細且易於閱讀的文件清單。 當您執行 **exa** 而不是 `ls` 時，您會看到一些不錯的改進。首先，它使用不同的顏色和圖示（啟用或停用）對文件類型進行顏色編碼💬，從而更容易一目了然地在視覺上區分文件。 它還會向您顯示額外的訊息，例如文件權限、所有者、大小等。  https://github.com/ogham/exa 🌟 GitHub 上的 Exa *** > 如果您認為本文中未提及的任何其他方便的工具，請在下面的評論部分中分享。 👇🏻 那麼，這就是本文的內容。非常感謝您的閱讀！ 🎉🫡 https://dev.to/shricodev --- 原文出處：https://dev.to/shricodev/be-a-10x-linux-user-with-these-tools-3g1f
*揭露：這篇文章包含附屬連結；如果您透過本文中提供的不同連結購買產品或服務，我可能會獲得補償。* [](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 您好，作為開發人員，充分理解基本系統設計概念對於開發可擴展、可靠和高效能的軟體系統至關重要。 [**系統設計**](https://medium.com/javarevisited/7-system-design-problems-to-crack-software-engineering-interviews-in-2023-13a518467c3e)涉及設計軟體系統的體系結構和元件，以滿足特定要求並實現所需的性能特徵。 隨著技術的快速進步和軟體應用的複雜性不斷增加，掌握系統設計概念對於程式設計師建立高效且有效的系統至關重要。 在上幾篇文章中，我回答了流行的系統設計問題，例如[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)，今天，我們將看看每個程式設計師都應該學習的 10 個關鍵系統設計概念。 這些概念為設計能夠處理大規模資料、容納並髮用戶並提供最佳效能的軟體系統奠定了堅實的基礎。 無論您是初學者還是經驗豐富的開發人員，了解這些系統設計概念都將使您能夠建立強大且可擴展的軟體系統，以滿足現代應用程式的需求。那麼，讓我們深入探討這些基本的系統設計原則吧！ 順便說一句，如果您正在準備系統設計面試並想深入學習系統設計，那麼您還可以查看[**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)等網站，它們有許多很棒的系統設計課程 以下是每個程式設計師都應該考慮學習的 10 個重要的系統設計概念： 1. **可擴展性** 2. **可用性** 3. **可靠性** 4. **容錯能力** 5. **快取策略** 6. **負載平衡** 7. **安全** 8. **可擴展的資料管理** 9. **設計模式** 10. **效能最佳化** 理解和應用這些系統設計概念可以幫助程式設計師和開發人員建立強大的、可擴展的、高效能的軟體系統，以滿足現代應用程式和使用者的需求。 現在，讓我們深入研究它們中的每一個並了解它們是什麼以及如何在您的應用程式中實現它們。 ### 1. 可擴展性 可擴展性是指系統或應用程式處理不斷增加的工作負載或使用者而不顯著降低效能或功能的能力。 它是系統設計中的一個重要概念，因為它允許系統成長並適應不斷變化的需求，**例如增加的資料量、使用者流量或處理需求，**而不會遇到效能瓶頸或限制。 在現代運算環境中，系統需要處理大量且不斷成長的資料和用戶，可擴展性至關重要。例如，流行的網站、行動應用程式和基於雲端的服務需要能夠同時處理數百萬甚至數十億個請求，而分散式資料庫和大資料平台需要擴展以處理 PB 或 EB 的資料。 對於需要適應尖峰負載的系統來說，可擴展性也很重要，例如假期期間的線上購物或因病毒事件導致的用戶活動突然激增。 > 可擴展性主要有兩種：**垂直可擴展性和水平可擴展性**。垂直可擴展性涉及向單一伺服器或節點加入更多資源（例如 CPU、記憶體或儲存）以處理增加的工作負載。另一方面，水平可擴展性涉及向系統加入更多伺服器或節點以分配工作負載並處理增加的需求。 水平可擴展性通常透過[負載平衡](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)、 [分片](https://medium.com/javarevisited/what-is-database-sharding-scaling-your-data-horizontally-1dc12b33193f)、分區和分散式處理等技術來實現。 實現可擴展性需要仔細的系統設計、架構和實作。它涉及設計能夠有效處理不斷增加的工作負載、有效利用資源、最大限度地減少依賴性以及跨多個節點或伺服器分佈處理的系統。 > 快取、非同步處理、平行處理和分散式資料庫等技術通常用於提高可擴展性。測試和效能監控對於確保系統在擴展時繼續保持良好效能也至關重要。 可擴展性是建立強大的高效能係統的重要考慮因素，這些系統可以處理成長並適應隨時間變化的需求。它使系統能夠滿足不斷增長的需求，提供無縫的用戶體驗，並支援業務成長，而不會遇到效能限製或停機。 這是來自[**ByteByteGo**](https://bit.ly/3P3eqMN)的一個很好的圖表，這是準備系統設計面試的好地方，它顯示了[*垂直擴展和水平擴展之間的區別*](https://medium.com/javarevisited/difference-between-horizontal-scalability-vs-vertical-scalability-67455efc91c) [](https://bit.ly/3P3eqMN) --- ### 2. 可用性 可用性是指軟體系統即使在發生故障或中斷時也能保持運作並可供使用者存取的能力。 高可用性是許多系統的關鍵要求，特別是那些任務關鍵型或時間敏感型系統，例如線上服務、電子商務網站、金融系統和通訊網路。 此類系統的停機可能會導致重大的財務損失、聲譽受損和客戶不滿。因此，保證高可用性是系統設計時重點考慮的問題。 可用性通常**使用正常運作時間（衡量系統運作時間的百分比）和停機時間（衡量系統不可用的時間）等指標**來量化。 實現**高可用性涉及設計具有冗餘、容錯和故障轉移機制的系統**，以最大限度地降低因硬體故障、軟體故障或其他意外事件而導致停機的風險。 > 在系統設計中，採用了各種技術和策略來提高可用性，例如負載平衡、叢集、複製、備份和復原、監控和主動維護。 實施這些措施是為了最大限度地減少單點故障、檢測故障並從故障中恢復，並確保系統即使在發生故障或中斷時也能保持運作。 透過設計具有高可用性的系統，工程師可以確保系統可以長時間存取和執行，從而提高客戶滿意度、減少停機時間並提高業務連續性。 [](https://www.linkedin.com/pulse/top-20-system-design-interview-questions-answers-soma-sharma-g0pqc/) --- ### 3、可靠性 可靠性是指**軟體系統在交付預期結果時的一致性和可靠性**。建立具有可靠元件、錯誤處理機制和備份/復原策略的系統對於確保系統按預期運作並產生準確的結果至關重要。 可靠性是系統設計的關鍵因素，因為它直接影響系統的整體性能和品質。可靠的系統應始終按預期執行，不會出現意外故障、錯誤或中斷。 **關鍵任務應用通常需要高可靠性，**因為系統故障可能會造成嚴重後果，例如在航空、醫療保健、金融和其他安全關鍵領域。 可靠性通常使用各種指標來量化，例如**平均故障間隔時間 (MTBF)** （測量故障之間的平均持續時間）和故障率 (FR)（測量一段時間內故障發生的速率）。 > 可靠性可以透過各種技術和策略來實現，例如冗餘、錯誤檢測和糾正、容錯和穩健設計。 在系統設計中，要實現高可靠性需要仔細考慮各種因素，包括元件品質、系統架構、錯誤處理、容錯機制、監控和維護策略。 透過**設計高可靠性的系統**，工程師可以確保系統始終如一地按預期執行，從而提高客戶滿意度、減少停機時間並提高系統效能和可用性。 --- ### 4. 容錯性 容錯是指系統或元件在故障或故障（例如硬體故障、軟體錯誤或其他不可預見的問題）時繼續正常運作的能力。 容錯系統旨在檢測、隔離故障並從故障中恢復，而不會完全故障或停機。 容錯是系統設計中的重要概念，特別是在分散式系統或需要在具有挑戰性的環境中可靠運作的系統中。 它涉及實現冗餘、錯誤檢測、錯誤糾正和錯誤恢復機制，以確保即使某些元件或子系統發生故障，系統也能繼續運作。 > 有多種技術和策略可以實現容錯，例如**複製**，即在不同位置維護相同資料或服務的多個副本，以便在一個發生故障時，其他副本可以接管；檢查點，定期保存系統狀態，以便在發生故障時，系統可以恢復到先前已知的良好狀態；優雅降級，即係統在故障時可以繼續執行，但功能會減少。 容錯對於確保系統的高可用性、可靠性和彈性至關重要，特別是在系統故障可能造成嚴重後果的關鍵任務應用程式中。 透過在系統設計中納入容錯機制，工程師可以建立強大且可靠的系統，即使在遇到意外故障時也可以繼續運作並提供預期結果。 [](https://bit.ly/3P3eqMN) --- ### 5. 快取策略 快取策略是一種用於優化系統效能的技術，它透過將經常存取的資料或結果儲存在稱為快取的臨時儲存位置中，以便可以快速檢索資料，而無需重新計算或從原始來源取得。 系統設計中常用的快取策略有以下幾種： 1. **完全緩存** 在此策略中，整個資料集或結果都會快取在快取中，提供對所有資料或結果的快速存取。當資料或結果相對較小且可以輕鬆儲存在記憶體或本地快取中時，此策略非常有用。 2. **部分快取** 在此策略中，通常基於使用模式或頻繁存取的資料，僅快取資料或結果的子集。當資料或結果規模很大，或並非所有資料或結果都被頻繁存取，並且快取整個資料集不可行時，此策略很有用。 3. \*\*基於時間的到期時間 在此策略中，資料或結果被快取特定的時間，之後快取被認為是陳舊的，並且資料或結果從原始來源獲取並在快取中更新。當資料或結果相對穩定且不經常變化時，此策略很有用。 4. **LRU（最近最少使用）或 LFU（最不常使用）替換策略** 在這些策略中，最近最少使用或最不頻繁使用的資料或結果被從快取中逐出，以為新資料或結果騰出空間。當快取的儲存容量有限且需要驅逐不常存取的資料以容納新資料時，這些策略非常有用。 5. **直寫式或後寫式緩存** 在這些策略中，資料或結果在更新或插入時寫入快取和原始來源（直寫）或僅寫入快取（後寫）。當系統需要保持快取和原始來源之間的一致性或原始來源無法直接更新時，這些策略就非常有用。 6. **分散式快取** 在此策略中，快取分佈在多個節點或伺服器上，通常使用分散式快取框架或技術。當系統跨多個節點或伺服器分佈或擴展並且需要保持分散式快取的一致性和效能時，此策略就非常有用。 7. **自訂快取** 可以根據系統或應用程式的特定要求和特徵來實施自訂快取策略。這些策略可能涉及上述策略或其他自訂方法的組合，以滿足系統的獨特需求。 選擇*合適的快取策略取決於資料或結果的大小、存取頻率、資料或結果的易變性、儲存容量、一致性要求以及系統的效能目標等多種因素*。仔細考慮和實施快取策略可以顯著提高系統效能、降低資源利用率、提高可擴展性並增強使用者體驗。 [](https://bit.ly/3P3eqMN) --- ### **6.負載平衡** 負載平衡是分散式系統或網路中使用的技術，用於在多個伺服器或資源之間均勻分配傳入的網路流量或工作負載，確保沒有任何單一伺服器或資源因過多的流量或工作負載而不堪負荷。 負載平衡的目的是優化資源利用率，最大化系統可用性，提高系統整體效能和可靠性。在微服務架構中， [*負載平衡和 API 閘道*](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)通常指的是相同的，但事實並非如此，API 閘道可以做更多的事情，如[本文](https://medium.com/javarevisited/what-is-api-gateway-pattern-in-microservices-architecture-what-problem-does-it-solve-ebf75ae84698)所述。 負載平衡可以透過各種演算法或方法來實現，例如： 1. **循環：**傳入請求以輪流方式依序分發到每個伺服器或資源，確保所有伺服器或資源之間的流量平均分配 2. **最少連線：**傳入請求分發到活動連線數最少的伺服器或資源，確保負載最少的伺服器或資源接收新請求。 3. **來源 IP 關聯性：**來自相同客戶端 IP 位址的傳入請求將導向至相同伺服器或資源，確保來自特定用戶端的請求始終由相同伺服器或資源處理。 4. **加權循環：**傳入請求根據分配給每個伺服器或資源的預定義權重進行分配，從而允許根據伺服器或資源容量或功能採用不同的流量分配比率。 5. **自適應負載平衡：**負載平衡演算法根據伺服器或資源健康、效能或其他指標的即時監控，動態調整流量分配，確保最佳的資源利用率和系統效能。 負載平衡可以使用基於硬體的負載平衡器、基於軟體的負載平衡器或基於雲端的負載平衡服務來實現。 它在具有高流量負載或資源密集型工作負載的分散式系統或網路中發揮著至關重要的作用，可以實現資源的高效利用，增強系統的可用性和可靠性，並提供無縫的用戶體驗。 這裡還有一個來自[DesignGuru.io](https://bit.ly/3pMiO8g)的漂亮圖表，這是一個學習面試準備系統設計的優秀網站，它強調了負載平衡器和 API 閘道之間的區別： [](https://bit.ly/3pMiO8g) --- ### **7. 安全** 系統設計中的安全性是指考慮和實施保護系統免受潛在安全威脅、漏洞或攻擊的措施。 它涉及設計和實施具有內建安全功能和實踐的系統，以防止未經授權的存取、資料外洩、資料外洩、惡意軟體攻擊和其他安全風險。 系統設計中的安全性通常涉及以下原則： 1. **身份驗證：**確保使用者或實體經過驗證並根據其身分和憑證被授予適當的存取權限。 2. **授權**：實施存取控制和權限，限制使用者或實體存取未經授權的資源或執行未經授權的操作。 3. **加密**：透過使用加密技術來保護敏感資料，以防止未經授權的存取或資料外洩。 4. **稽核和日誌記錄**：實施機制來追蹤和記錄系統活動和事件，以用於監視、稽核和取證目的。 5. **輸入驗證：**驗證和清理所有輸入資料，以防止常見的安全漏洞，例如 SQL 注入、跨站腳本 (XSS) 和跨站請求偽造 (CSRF) 攻擊。 6. **修補程式和更新**：使用最新的安全性修補程式和更新使系統保持最新狀態，以解決已知的安全漏洞。 7. **深度防禦**：實施多層安全控制，例如防火牆、入侵偵測系統和防毒軟體，以提供針對安全威脅的多層防禦。 8. **最小權限原則**：將使用者或實體的存取權限限製到執行其任務所需的最低限度，減少安全漏洞或攻擊的潛在影響。 9. **安全通訊**：使用安全通訊協定（例如 HTTPS 或 SSL/TLS）來保護傳輸中的資料免於攔截或竊聽。 系統設計中的安全性對於保護資料和資源的完整性、機密性和可用性以及確保系統的整體安全狀況至關重要。應考慮並納入系統的設計、開發和部署階段，以減輕潛在的安全風險並防範安全威脅。 --- ### **8. 可擴展的資料管理** 可擴展的資料管理是指系統或應用程式有效處理不斷增長的資料量而不會出現效能下降或功能遺失的能力。 它涉及設計和實施資料管理實務和技術，這些實務和技術可以處理不斷增加的資料量、使用者負載和處理要求，同時保持可接受的效能和可靠性水準。 可擴展的資料管理通常涉及以下原則： 1. **資料分區：**將大型資料集分割成更小的、可管理的區塊或分區，以將資料分佈在多個儲存或處理資源上。這有助於減少單一資源的負載，並允許並行處理和提高效能。 2. **分散式資料庫系統：**使用分散式資料庫或資料儲存解決方案，可以將資料分佈在多個節點或伺服器上，從而實現水平擴展並提高效能。 3. **資料複製**：跨多個節點或伺服器複製資料，以確保資料可用性和容錯性。這可能涉及資料鏡像、資料分片或資料快取等技術，以提高效能和可靠性。 4. **快取和記憶體中資料儲存：快取**經常存取的資料或將資料儲存在記憶體中，以便更快地檢索和處理，減少對昂貴的磁碟 I/O 操作的需求並提高效能。 5. **索引和查詢最佳化**：使用高效的索引和查詢最佳化技術來加速資料檢索和處理操作，尤其是在大型資料集中。 6. **資料壓縮：**實施資料壓縮技術以減少儲存佔用空間並提高資料傳輸效率，特別是對於大型資料集。 7. **資料歸檔和清除**：實施資料歸檔和清除實踐以刪除或歸檔舊的或不經常存取的資料，減少儲存和處理開銷並提高效能。 8. **可擴展的資料處理框架：**使用可擴展的資料處理框架，例如 Apache Hadoop、Apache Spark 或 Apache Flink，可以分散式並行方式處理大規模資料處理和分析任務。 9. **雲端的資料管理**：利用雲端的資料管理服務，例如 Amazon S3、Amazon RDS 或 Google Bigtable，提供可擴充和託管的資料儲存和處理功能。 10. **監控和可擴展性測試**：定期監控系統效能並進行可擴展性測試，以辨識和解決效能瓶頸、資源限製或其他可擴展性挑戰，並確保資料管理實踐能夠有效處理不斷增長的資料量和負載。 簡而言之，可擴展的資料管理對於需要處理大量資料、使用者負載和處理要求的現代應用程式和系統至關重要。 它使系統能夠成長並適應不斷變化的需求，而無需犧牲效能或可靠性，從而確保資料管理實踐能夠有效地處理不斷增加的資料量和負載。 --- ### **9. 設計模式** 系統設計中的[設計模式](https://medium.com/javarevisited/top-10-microservice-design-patterns-for-experienced-developers-f4f5f782810e)是指用於解決軟體系統開發過程中遇到的常見設計挑戰或問題的可重複使用解決方案或最佳實踐。 [設計模式](https://medium.com/javarevisited/21-software-design-pattern-interview-questions-and-answers-b7d1774b5dd2)是被廣泛接受和經過驗證的設計和架構軟體系統的方法，它們為設計高效、可維護和可擴展的系統提供了一組明確的指南。 系統設計中的設計模式可分為多種類型，包括： 1. **建立模式：**這些模式專注於物件建立機制，並提供以靈活且可重複使用的方式建立物件的方法。建立模式的範例包括 Singleton、Factory Method、Abstract Factory、Builder 和 Prototype 模式。 2. **結構模式：**這些模式著重於類別和物件的組織以形成更大的結構或系統。結構模式的範例包括適配器、橋、複合、裝飾器和外觀模式。 3. **行為模式：**這些模式著重於系統內物件或元件之間的互動和通訊。行為模式的範例包括觀察者、策略、命令、迭代器和模板方法模式。 4. **架構模式：**這些模式為設計系統的整體架構提供了高階指南和策略。架構模式的範例包括模型-視圖-控制器 (MVC)、模型-視圖-視圖模型 (MVVM)、分層架構、微服務和事件驅動架構模式。 設計模式在系統設計中非常重要，因為它們提供了經過驗證的標準化方法來解決常見的設計挑戰、提高程式碼品質並確保軟體系統的可維護性和可擴展性。 它們促進程式碼的可重複使用性、關注點分離和功能封裝，從而更容易管理複雜的系統並使其適應不斷變化的需求。 透過使用設計模式，開發人員可以利用現有知識和最佳實踐來設計強大而高效的系統，以滿足使用者和利害關係人的需求。 在過去的幾篇文章中，我還討論了常見的微服務設計模式，如[**事件來源**](https://medium.com/javarevisited/what-is-event-sourcing-design-pattern-in-microservices-architecture-how-does-it-work-b38c996d445a)**、** [**CQRS**](https://medium.com/javarevisited/what-is-cqrs-command-and-query-responsibility-segregation-pattern-7b1b38514edd) \*\*、SAGA\*\*、 [**每個微服務的資料庫**](https://medium.com/javarevisited/what-is-database-per-microservices-pattern-what-problem-does-it-solve-60b8c5478825)**、** [**API 閘道**](https://medium.com/javarevisited/difference-between-api-gateway-and-load-balancer-in-microservices-8c8b552a024)、 [**斷路器**](https://medium.com/javarevisited/what-is-circuit-breaker-design-pattern-in-microservices-java-spring-cloud-netflix-hystrix-example-f285929d7f68)，並分享了[*設計微服務的最佳實踐*](https://medium.com/javarevisited/10-microservices-design-principles-every-developer-should-know-44f2f69e960f)，您也可以查看這些文章以了解有關微服務通訊的更多訊息，包括同步和非同步通訊。 --- ### 10. 性能 雖然我們已經知道效能意味著什麼，但還記得速度慢的筆記型電腦嗎？在系統設計中，效能是指軟體系統處理資料和交付結果的速度、反應能力和效率。 透過高效的演算法、快取、索引和其他技術來優化系統效能對於建立能夠處理大規模資料處理並提供最佳回應時間的系統至關重要。 系統設計中的效能是指軟體系統或應用程式有效率且有效地執行其預期功能或任務，同時滿足效能要求和期望的能力。它涵蓋了系統的回應時間、吞吐量、資源利用率、可擴展性和效率等各個方面。 效能是系統設計中的關鍵因素，因為它直接影響使用者體驗、系統可靠性和整體系統效率。效能不佳的系統可能會導致反應時間慢、吞吐量低、資源利用率高以及系統資源使用效率低下，導致系統效能下降和使用者不滿意。 系統設計人員在設計過程中需要考慮各種與效能相關的因素，例如選擇適當的演算法和資料結構、最佳化程式碼、最大限度地減少不必要的開銷、有效管理系統資源以及確保正確的系統配置和調優。 效能測試和分析技術還可用於辨識和解決效能瓶頸並優化系統效能。 優化系統設計中的效能需要在功能、複雜性和資源利用率之間進行仔細的平衡。它涉及做出明智的設計決策、使用最佳實踐以及持續監控和優化系統性能，以確保系統滿足其性能要求並提供流暢高效的用戶體驗。 ### 結論 這就是面試的基本系統設計概念。理解和掌握這些關鍵的系統設計概念對於程式設計師建立健壯、可擴展且高效的軟體系統至關重要。 這些概念，包括容錯、可靠性、可用性、快取策略、負載平衡、安全性、可擴展資料管理、設計模式和效能，在確保軟體系統滿足其預期目標、最佳執行並提供卓越的效能方面發揮著關鍵作用。 透過對這些系統設計概念的深入理解，您可以做出明智的設計決策，選擇適當的技術和技巧，並優化系統效能。 它還允許您設計具有彈性、可擴展、安全和高效的系統，能夠應對現代軟體開發的挑戰並滿足最終用戶的期望。 順便說一句，如果您正在*準備系統設計面試*並想要深入學習系統設計，那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**DesignGuru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站，它們有許多很棒的系統設計課程，如果您需要免費的系統設計課程您也可以查看下面的文章。 --- 原文出處：https://dev.to/somadevtoo/10-must-know-system-design-concepts-for-interviews-2fii
我一直在建立大量的應用程式。 我最新的一個是[Gitroom](https://platform.gitroom.com/) 。它可以幫助您： - 在多個社交媒體平台上安排您的帖子，並將它們交叉發佈到 DEV、Medium 和 Hashnode 等發布平台。 - 追蹤您的 GitHub 儲存庫指標 - 監控 GitHub 趨勢 （[它是開源的](https://github.com/gitroomhq/gitroom/)🙏🏻） 這一切都很好，但真正的關鍵是這裡。  --- 將人工智慧加入到您的應用程式中 --------------- 我每天都會看到大量的人工智慧庫，其中大多數都非常酷，但我問自己，它們在現實生活中對我有幫助嗎？ 是的， [babyagi](https://github.com/yoheinakajima/babyagi)可能是下一個大事件。但老實說，我看不出我能用它做什麼。 那麼你可以用人工智慧做什麼，人們通常會做什麼呢？ 我認為在當今的 ChatGPT 世界和 LLMs 中，用例非常簡單： - **自動完成內容**- 非常適合 Gitroom，讓您產生附加資訊或使用 GitHub copilot 等功能。 - **自動化**- 您將內容傳遞給 LLM，LLM 傳回包含您可以執行的操作的 JSON。 - **函數呼叫**- 主要使用 ChatGPT，您將不同的函數傳遞給 LLM，然後由他們決定要執行哪一個。 - **雜項**- 分類、翻譯等 我認為“函數呼叫”的利用不夠，因為以有意義的方式加入它很複雜。  --- 為您的用戶提供一切協助 ----------- 我承認我喜歡建立東西，但有時我會跳過開發良好的使用者體驗，這會導致人們離開系統，因為他們不知道該怎麼做。 我本質上認為，如果你為開發人員建立系統，你就可以逃脫懲罰——因為它們更加複雜。 但事實大多並非如此。 你應該有： - 入職訓練 - 教學 - YouTube 影片（在您的系統內，是的，是的） 這就是人工智慧可以拯救你而無需編寫太多程式碼的地方。 --- 加入一個可以為您做所有事情的聊天機器人 ------------------- 因此，越來越多的公司提供的產品之一是聊天機器人，它可以與您的資料互動並為用戶執行操作。 例如，我可以告訴聊天機器人我想在美國時間晚上 7:00 為 Gitroom 安排一個新帖子。 它會為我做的。 我發現的大多數解決方案的問題是： 1. 不開源 2. 它不是一個基礎設施產品，而是一個主要針對產品經理的完整產品。 --- CopilotKit 可以幫助您 ---------------- 所以，我發現了這個令人難以置信的[開源庫，](https://github.com/CopilotKit/CopilotKit)並獲得了麻省理工學院的許可——這太棒了。 https://www.youtube.com/watch?v=DJRG9oPiW-I 它只是位於您右側欄上的聊天機器人。 你餵牠： 1. 您目前的上下文資訊。 2. 您的資料資源，例如資料庫、Dropbox、Google Drive 等。 3. 可以呼叫系統中的不同函數。 一旦你完成了這件事，它就像魔術一樣。 有人想安排一個貼文嗎？ 它將觸發`schedulePost`函數。 當然，它在後台使用ChatGPT“函數呼叫”，但它簡化了一切。 我認為它適合任何應用程式。您可以將其與大型法學碩士（例如 ChatGPT / Gemini）一起使用，也可以與較小的法學碩士（例如 LLAMA2 和 Mistral）一起使用。 https://github.com/CopilotKit/CopilotKit 查看 CopilotKit --- 我建立了一個新的 YouTube 頻道，主要涉及技術、開源和行銷:) 如果您對此感興趣，請隨時在這裡訂閱： https://www.youtube.com/@nevo-david?sub\_confirmation=1 --- 原文出處：https://dev.to/github20k/react-crazy-this-ai-library-transformed-my-app-to-the-next-level-b4i
**長話短說** -------- 在本文中，您將學習如何建立一個人工智慧驅動的部落格平台，該平台可以搜尋網路並研究部落格文章的任何主題。 我們將涵蓋： - 用於應用程式框架的 Next.js 🖥️ - 法學碩士 OpenAI 🧠 - LangChain 和 Tavily 的網路搜尋人工智慧代理🤖 - 使用 CopilotKit 將 AI 整合到您的應用程式中 🪁 - Supabase 用於儲存和檢索部落格平台文章資料。 --- CopilotKit：開源 Copilot 框架 ======================== CopilotKit 是[開源 AI 副駕駛框架和平台。](https://github.com/CopilotKit/CopilotKit)我們可以輕鬆地將強大的人工智慧整合到您的 React 應用程式中。 建造： - ChatBots💬：上下文感知的應用內聊天機器人，可以在應用程式內執行操作 - CopilotTextArea📝：人工智慧驅動的文字字段，具有上下文感知自動完成和插入功能 - 聯合代理🤖：應用程式內人工智慧代理，可以與您的應用程式和使用者互動。由浪鏈提供技術支援。  {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} （原諒人工智慧的拼字錯誤並給一顆星：） 現在回到文章。 --- **先決條件** -------- 在開始建立應用程式之前，讓我們先查看建置應用程式所需的依賴項或套件 - `copilotkit/react-core` ：CopilotKit 前端包，帶有 React hooks，用於向副駕駛提供應用程式狀態和操作（AI 功能） - `copilotkit/react-ui:`聊天機器人側邊欄 UI 的 CopilotKit 前端包 - `copilotkit/react-textarea:` CopilotKit 前端包，用於在演講者筆記中進行人工智慧輔助文字編輯。 - `LangChainJS:`用於開發由語言模型支援的應用程式的框架。 - `Tavily Search API:`幫助將法學碩士和人工智慧應用程式連接到可信賴的即時知識的 API。 安裝所有專案包和依賴項 ----------- 在安裝所有專案包和依賴項之前，我們首先在終端機上執行以下命令來建立 Nextjs 專案。 ``` npx create-next-app@latest ``` 然後系統會提示您選擇一些選項。請隨意標記它們，如下所示。  之後，使用您選擇的文字編輯器開啟新建立的 Nextjs 專案。然後在命令列中執行以下命令來安裝所有專案包和依賴項。 ``` npm i @copilotkit/backend @copilotkit/shared @langchain/langgraph @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea @supabase/ssr @supabase/auth-helpers-nextjs ``` **建立部落格平台前端** ------------- 在本節中，我將引導您完成使用靜態內容建立部落格平台前端的過程，以定義平台的使用者介面。 首先，前往`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中，建立一個名為`Article.tsx`的檔案。 之後，將以下程式碼新增至定義名為`Article`功能元件的檔案中，該元件將用於呈現文章建立表單。 ``` "use client"; import { useRef, useState } from "react"; export function Article() { // Define state variables for article outline, copilot text, and article title const [articleOutline, setArticleOutline] = useState(""); const [copilotText, setCopilotText] = useState(""); const [articleTitle, setArticleTitle] = useState(""); return ( // Form element for article input <form action={""} className="w-full h-full gap-10 flex flex-col items-center p-10"> {/* Input field for article title */} <div className="flex w-full items-start gap-3"> <textarea className="p-2 w-full h-12 rounded-lg flex-grow overflow-x-auto overflow-y-hidden whitespace-nowrap" id="title" name="title" value={articleTitle} placeholder="Article Title" onChange={(event) => setArticleTitle(event.target.value)} /> </div> {/* Textarea for article content */} <textarea className="p-4 w-full aspect-square font-bold text-xl bg-slate-800 text-white rounded-lg resize-none" id="content" name="content" value={copilotText} placeholder="Write your article content here" onChange={(event) => setCopilotText(event.target.value)} /> {/* Publish button */} <button type="submit" className="p-4 w-full !bg-slate-800 text-white rounded-lg">Publish</button> </form> ); } ``` 接下來，將另一個檔案新增到元件資料夾中，並將其命名為`Header.tsx` 。然後將以下程式碼新增至定義名為`Header`的功能元件的檔案中，該元件將呈現部落格平台的導覽列。 ``` import Link from "next/link"; export default function Header() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white border-b border-gray-200 text-sm py-3 sm:py-0 "> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global"> <div className="flex items-center justify-between"> <Link className="flex-none text-xl font-semibold " href="/" aria-label="Brand"> AIBlogging </Link> </div> <div id="navbar-collapse-with-animation" className=""> <div className="flex flex-col gap-y-4 gap-x-0 mt-5 sm:flex-row sm:items-center sm:justify-end sm:gap-y-0 sm:gap-x-7 sm:mt-0 sm:ps-7"> <Link className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " href="/writearticle"> Create Post </Link> </div> </div> </nav> </header> </> ); } ``` 之後，轉到`/[root]/src/app`並建立一個名為`writearticle`的資料夾。在`writearticle`資料夾中，建立一個名為`page.tsx`檔案。然後將以下程式碼加入匯入`Article`和`Header`元件的檔案中。然後，程式碼定義了一個名為`WriteArticle`的功能元件，它將呈現導覽列和文章建立表單。 ``` import { Article } from "../components/Article"; import Header from "../components/Header"; export default function WriteArticle() { return ( <> <Header /> <Article /> </> ); } ``` 接下來，前往`/[root]/src/page.tsx`文件，並新增以下程式碼，該程式碼定義一個名為`Home`功能元件，該元件呈現將顯示已發佈文章清單的部落格平台主頁。 ``` import Image from "next/image"; import Link from "next/link"; import Header from "./components/Header"; const Home = async () => { return ( <> <Header /> <div className="max-w-[85rem] h-full px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto"> <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"> <Link key={""} className="group flex flex-col h-full bg-white border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 " href={""}> <div className="aspect-w-16 aspect-h-11"> <Image className="object-cover h-48 w-96 rounded-xl" src={`https://source.unsplash.com/featured/?${encodeURIComponent( "hello world" )}`} width={500} height={500} alt="Image Description" /> </div> <div className="my-6"> <h3 className="text-xl font-semibold text-gray-800 "> Hello World </h3> </div> </Link> </div> </div> </> ); }; export default Home; ``` 之後，請轉到`next.config.js`檔案並加入以下程式碼，該程式碼允許您使用 Unsplash 中的圖像作為已發布文章的封面圖像。 ``` module.exports = { images: { remotePatterns: [ { protocol: "https", hostname: "source.unsplash.com", }, ], }, }; ``` 最後，在命令列上執行命令`npm run dev` ，然後導航到 http://localhost:3000/。現在您應該在瀏覽器上查看部落格平台前端，如下所示。  **將部落格平台與 CopilotKit 後端集成** --------------------------- 在本節中，我將引導您完成將部落格平台與 CopilotKit 後端整合的過程，CopilotKit 後端處理來自前端的請求，提供函數呼叫和各種 LLM 後端（例如 GPT）。此外，我們將整合一個名為 Tavily 的人工智慧代理，它可以研究網路上的任何主題。 首先，在根目錄中建立一個名為`.env.local`的檔案。然後在保存`ChatGPT`和`Tavily` Search API 金鑰的檔案中加入下面的環境變數。 ``` OPENAI_API_KEY="Your ChatGPT API key" TAVILY_API_KEY="Your Tavily Search API key" ``` 若要取得 ChatGPT API 金鑰，請導覽至 https://platform.openai.com/api-keys。  若要取得 Tavilly Search API 金鑰，請導覽至 https://app.tavily.com/home  之後，轉到`/[root]/src/app`並建立一個名為`api`的資料夾。在`api`資料夾中，建立一個名為`copilotkit`的資料夾。在`copilotkit`資料夾中，建立一個名為`research.ts`的檔案。然後導航到[該 Research.ts gist 文件](https://gist.github.com/TheGreatBonnie/58dc21ebbeeb8cbb08df665db762738c)，複製程式碼，並將其新增至**`research.ts`**檔案中 接下來，在`/[root]/src/app/api/copilotkit`資料夾中建立一個名為`route.ts`的檔案。該文件將包含設定後端功能來處理 POST 請求的程式碼。它有條件地包括對給定主題進行研究的“研究”操作。 現在在文件頂部導入以下模組。 ``` import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; // For backend functionality with CopilotKit. import { researchWithLangGraph } from "./research"; // Import a custom function for conducting research. import { AnnotatedFunction } from "@copilotkit/shared"; // For annotating functions with metadata. ``` 在上面的程式碼下面，定義一個執行時間環境變數和一個名為`researchAction`的函數，該函數使用下面的程式碼對某個主題進行研究。 ``` // Define a runtime environment variable, indicating the environment where the code is expected to run. export const runtime = "edge"; // Define an annotated function for research. This object includes metadata and an implementation for the function. const researchAction: AnnotatedFunction<any> = { name: "research", // Function name. description: "Call this function to conduct research on a certain topic. Respect other notes about when to call this function", // Function description. argumentAnnotations: [ // Annotations for arguments that the function accepts. { name: "topic", // Argument name. type: "string", // Argument type. description: "The topic to research. 5 characters or longer.", // Argument description. required: true, // Indicates that the argument is required. }, ], implementation: async (topic) => { // The actual function implementation. console.log("Researching topic: ", topic); // Log the research topic. return await researchWithLangGraph(topic); // Call the research function and return its result. }, }; ``` 然後在上面的程式碼下加入下面的程式碼來定義處理POST請求的非同步函數。 ``` // Define an asynchronous function that handles POST requests. export async function POST(req: Request): Promise<Response> { const actions: AnnotatedFunction<any>[] = []; // Initialize an array to hold actions. // Check if a specific environment variable is set, indicating access to certain functionality. if (process.env["TAVILY_API_KEY"]) { actions.push(researchAction); // Add the research action to the actions array if the condition is true. } // Instantiate CopilotBackend with the actions defined above. const copilotKit = new CopilotBackend({ actions: actions, }); // Use the CopilotBackend instance to generate a response for the incoming request using an OpenAIAdapter. return copilotKit.response(req, new OpenAIAdapter()); } ``` **將部落格平台與 CopilotKit 前端集成** --------------------------- 在本節中，我將引導您完成將部落格平台與 CopilotKit 前端整合的過程，以促進部落格文章研究和文章大綱生成。我們將使用聊天機器人側欄元件、copilot 文字區域元件、用於向 Copilot 提供應用程式狀態和其他資訊的 useMakeCopilotReadable 掛鉤，以及用於提供 Copilot 可以呼叫的操作的 useCopilotAction 掛鉤 首先，導入`/[root]/src/app/components/Article.tsx`檔案頂部的`useMakeCopilotReadable` 、 `useCopilotAction` 、 `CopilotTextarea`和`HTMLCopilotTextAreaElement`掛鉤。 ``` import { useMakeCopilotReadable, useCopilotAction, } from "@copilotkit/react-core"; import { CopilotTextarea, HTMLCopilotTextAreaElement, } from "@copilotkit/react-textarea"; ``` 在 Article 函數內的狀態變數下方，新增以下程式碼，該程式碼使用`useMakeCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的文章大綱。鉤子使副駕駛可以閱讀文章大綱。 ``` useMakeCopilotReadable("Blog article outline: " + JSON.stringify(articleOutline)); ``` 在`useMakeCopilotReadable`掛鉤下方，使用以下程式碼建立一個名為`copilotTextareaRef`的引用，該引用指向名為`HTMLCopilotTextAreaElement`的文字區域元素。 ``` const copilotTextareaRef = useRef<HTMLCopilotTextAreaElement>(null); ``` 在上面的程式碼下方，加入以下程式碼，該程式碼使用`useCopilotAction`掛鉤來設定名為`researchBlogArticleTopic`的操作，該操作將啟用對部落格文章的給定主題的研究。此操作採用兩個參數，稱為`articleTitle`和`articleOutline` ，這兩個參數可以產生文章標題和大綱。 該操作包含一個處理程序函數，該函數根據給定主題生成文章標題和大綱。在處理函數內部， `articleOutline`狀態會使用新產生的大綱進行更新，而`articleTitle`狀態會使用新產生的標題進行更新，如下所示。 ``` useCopilotAction( { name: "researchBlogArticleTopic", description: "Research a given topic for a blog article.", parameters: [ { name: "articleTitle", type: "string", description: "Title for a blog article.", required: true, }, { name: "articleOutline", type: "string", description:"Outline for a blog article that shows what the article covers.", required: true, }, ], handler: async ({ articleOutline, articleTitle }) => { setArticleOutline(articleOutline); setArticleTitle(articleTitle); }, }, [] ); ``` 在上面的程式碼下方，前往表單元件並新增以下`CopilotTextarea`元素，該元素將使您能夠為文章內容新增補全、插入和編輯。 ``` <CopilotTextarea value={copilotText} ref={copilotTextareaRef} placeholder="Write your article content here" onChange={(event) => setCopilotText(event.target.value)} className="p-4 w-full aspect-square font-bold text-xl bg-slate-800 text-white rounded-lg resize-none" placeholderStyle={{ color: "white", opacity: 0.5, }} autosuggestionsConfig={{ textareaPurpose: articleTitle, chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { max_tokens: 5, stop: ["\n", ".", ","], }, }, insertionApiConfig: {}, }, debounceTime: 250, }} /> ``` 然後將Tailwindcss隱藏類別加入文章內容的Textarea中，如下所示。文字區域將保存文章的內容，並在文章發布後將其插入資料庫。 ``` {/* Textarea for article content */} <textarea className="p-4 w-full aspect-square font-bold text-xl bg-slate-800 text-white rounded-lg resize-none hidden" id="content" name="content" value={copilotText} placeholder="Write your article content here" onChange={(event) => setCopilotText(event.target.value)} /> ``` 之後，請前往`/[root]/src/app/writearticle/page.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件和樣式。 ``` import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; import "@copilotkit/react-textarea/styles.css"; ``` 然後使用`CopilotKit`和`CopilotSidebar`包裹Article元件，如下所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/openai/` ) 的 URL，而`CopilotSidebar`則呈現應用程式內聊天機器人，您可以提示您研究文章的任何主題。 ``` export default function WriteArticle() { return ( <> <Header /> <CopilotKit url="/api/copilotkit"> <CopilotSidebar instructions="Help the user research a blog article topic." defaultOpen={true} labels={{ title: "Blog Article Copilot", initial: "Hi you! 👋 I can help you research any topic for a blog article.", }} clickOutsideToClose={false}> <Article /> </CopilotSidebar> </CopilotKit> </> ); } ``` 之後，執行開發伺服器並導航到 http://localhost:3000/writearticle。您應該會看到應用程式內聊天機器人已整合到部落格平台中。  給右側的聊天機器人一個提示，例如“研究一篇關於生成人工智慧的部落格文章主題，然後給我文章大綱。”聊天機器人將開始研究該主題，然後產生部落格標題。 當您開始在編輯器上寫作時，您應該會看到內容自動建議，如下所示。  **將部落格平台與 Supabase 資料庫集成** -------------------------- 在本節中，我將引導您完成將部落格平台與 Supabase 資料庫整合以插入和獲取部落格文章資料的過程。 首先，導覽至[supabase.com](http://supabase.com)並點擊主頁上的「啟動您的專案」按鈕。  然後新建一個專案，名為AiBloggingPlatform，如下圖所示。  建立專案後，將 Supabase URL 和 API 金鑰新增至 env.local 檔案中的環境變數中，如下所示。 ``` NEXT_PUBLIC_SUPABASE_URL=”Your Supabase URL” NEXT_PUBLIC_SUPABASE_ANON_KEY=”Your Supabase API Key” ``` 之後，請前往 Supabase 上專案的儀表板並開啟 SQL 編輯器部分。然後將下列 SQL 程式碼新增至編輯器中，然後按一下 CTRL + Enter 鍵建立一個名為articles 的表。文章表包含 id、標題和內容行。 ``` create table if not exists articles ( id bigint primary key generated always as identity, title text, content text ); ``` 建立表格後，您應該會收到一條成功訊息，如下所示。  之後，轉到`/[root]/src/`資料夾並建立一個名為`utils`的資料夾。在`utils`資料夾內，建立一個名為`supabase.ts`文件，並新增以下用於建立並傳回 Supabase 用戶端的程式碼。 ``` // Importing necessary functions and types from the Supabase SSR package import { createServerClient, type CookieOptions } from '@supabase/ssr' // Define a function named 'supabase' that takes a 'CookieOptions' object as input export const supabase = (cookies: CookieOptions) => { // Retrieve cookies from the provided 'CookieOptions' object const cookieStore = cookies() // Create and return a Supabase client configured with environment variables and cookie handling return createServerClient( // Retrieve Supabase URL from environment variables process.env.NEXT_PUBLIC_SUPABASE_URL!, // Retrieve Supabase anonymous key from environment variables process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { // Define a custom 'get' function to retrieve cookies by name from the cookie store get(name: string) { return cookieStore.get(name)?.value }, }, } ) } ``` 然後轉到`/[root]/src/app`資料夾並建立一個名為`serveractions`的資料夾。在`serveractions`資料夾中，建立一個名為`AddArticle.ts`的文件，並新增以下程式碼，將部落格文章資料插入到 Supabase 資料庫中。 ``` // Importing necessary functions and modules for server-side operations "use server"; import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"; import { cookies } from "next/headers"; import { redirect } from "next/navigation"; // Define an asynchronous function named 'addArticle' that takes form data as input export async function addArticle(formData: any) { // Extract title and content from the provided form data const title = formData.get("title"); const content = formData.get("content"); // Retrieve cookies from the HTTP headers const cookieStore = cookies(); // Create a Supabase client configured with the provided cookies const supabase = createServerComponentClient({ cookies: () => cookieStore }); // Insert the article data into the 'articles' table on Supabase const { data, error } = await supabase.from("articles").insert([ { title, content, }, ]); // Check for errors during the insertion process if (error) { console.error("Error inserting data", error); return; } // Redirect the user to the home page after successfully adding the article redirect("/"); // Return a success message return { message: "Success" }; } ``` 之後，轉到`/[root]/src/app/components/Article.tsx`檔案並導入`addArticle`函數。 ``` import { addArticle } from "../serveractions/AddArticle"; ``` 然後加入`addArticle`函數作為表單動作參數，如下所示。 ``` // Form element for article input <form action={addArticle} className="w-full h-full gap-10 flex flex-col items-center p-10"> </form> ``` 之後，導覽至http://localhost:3000/writearticle，研究您選擇的主題，新增文章內容，然後點擊底部的發布按鈕來發布文章。 然後轉到 Supabase 上專案的儀表板並導航到表編輯器部分。您應該會看到您的文章資料已插入 Supabase 資料庫，如下所示。  接下來，前往`/[root]/src/app/page.tsx`檔案並在頂部導入 cookie 和 supabase 套件。 ``` import { cookies } from "next/headers"; import { supabase } from "@/utils/supabase"; ``` 然後在 Home 函數中加入以下程式碼，從 Supabase 資料庫中取得文章資料。 ``` const { data: articles, error } = await supabase(cookies).from('articles').select('*') ``` 之後，更新如下所示的元素程式碼，以將已發佈的文章呈現在部落格平台主頁上。 ``` return ( <> <Header /> <div className="max-w-[85rem] h-full px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto"> <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"> {articles?.map((post: any) => ( <Link key={post.id} className="group flex flex-col h-full bg-white border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 " href={`/posts/${post.id}`}> <div className="aspect-w-16 aspect-h-11"> <Image className="object-cover h-48 w-96 rounded-xl" src={`https://source.unsplash.com/featured/?${encodeURIComponent( post.title )}`} width={500} height={500} alt="Image Description" /> </div> <div className="my-6"> <h3 className="text-xl font-semibold text-gray-800 "> {post.title} </h3> </div> </Link> ))} </div> </div> </> ); ``` 然後導航到[http://localhost:3000](http://localhost:3000/writearticle) ，您應該會看到您發布的文章，如下所示。  之後，轉到`/[root]/src/app`資料夾並建立一個名為`[id].`在`[id]`資料夾中，建立一個名為`page.tsx`的文件，並在頂部匯入以下套件和元件。 ``` import { supabase } from '@/utils/supabase'; import { cookies } from "next/headers"; import Header from '@/app/components/Header'; ``` 在導入下面，定義一個名為「getArticles」的非同步函數，該函數根據 id 參數從 supabase 資料庫檢索文章資料，如下所示。 ``` // Define an asynchronous function named 'getArticles' that retrieves article data based on the provided parameters async function getArticles(params: any) { // Extract the 'id' parameter from the provided 'params' object const { id } = params // Retrieve article data from Supabase database where the 'id' matches the provided value const { data, error } = await supabase(cookies) .from('articles') .select('*') .eq('id', id) .single(); // Return the retrieved data return data } ``` 在上面的程式碼下面，定義一個名為“Post”的函數，它將“params”作為 props，如下所示。 ``` // Define a default asynchronous function named 'Post' that takes 'params' as props export default async function Post({ params }: { params: any }) { // Retrieve the post data asynchronously based on the provided 'params' const post = await getArticles(params); // Return JSX to render the post details return ( <> {/* Render the header component */} <Header /> {/* Main content wrapper */} <div className="max-w-3xl px-4 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto"> <div className="max-w-2xl"> <div className="space-y-5 md:space-y-8"> <div className="space-y-3"> {/* Render the post title */} <h2 className="text-2xl font-bold md:text-3xl dark:text-white"> {/* Render the post title only if 'post' is truthy */} {post && post.title} </h2> {/* Render the post content */} <p className="text-lg text-gray-800 dark:text-gray-200"> {/* Render the post content only if 'post' is truthy */} {post && post.content} </p> </div> </div> </div> </div> </> ); } ``` 之後，導覽至[http://localhost:3000](http://localhost:3000/writearticle)並點擊部落格平台主頁上顯示的文章。 然後您應該被重定向到文章的內容，如下所示。  結論 -- 總而言之，您可以使用 CopilotKit 建立應用內 AI 聊天機器人，該機器人可以查看當前應用程式狀態並在應用程式內執行操作。 AI 聊天機器人可以與您的應用程式前端、後端和第三方服務對話。 完整的原始碼：https://github.com/TheGreatBonnie/aipoweredblog --- 原文出處：https://dev.to/copilotkit/how-to-build-an-ai-powered-blogging-platform-nextjs-langchain-supabase-1hdp
這是比利。 -----  他是一位為重要公司工作的實習開發人員。 對公司來說不幸的是，今天比利醒來並選擇了*暴力。* 這是因為他覺得學習Git非常麻煩、枯燥、很費解。 分支、提交、簽出、HEAD、功能、暫存，天啊！ 這對他來說實在太多了。 但隨後比利想到了一個絕對是最好、最壞的主意。 > 「如果我學習 git 時先學會什麼不該做，然後又去做，那會怎麼樣！” 這將完成三件事： 1. 他會透過給自己一些通常被禁止的有趣的小挑戰來學習 git 最常用的工具。 2. 如果他知道什麼**不該**做，那麼他以後就可以專注於他**應該**做的事情。 3. 這樣的學習滿足了他混亂的邪惡傾向。 對比利來說，這聽起來越來越像是個好主意。這肯定會讓他成為一個更好的開發人員。 但只有一個問題...... ### Git 是開發人員用來管理軟體原始碼的版本控制系統。 每當某人更改、新增甚至刪除某些內容時，Git 都會記錄誰做了什麼。 如果你想在你工作的公司擁有的儲存庫中做一些非常糟糕的事情，那麼總是有人可以追溯到你。 那肯定會讓你被解僱。 這就是比利偷了特倫特電腦的原因。  特倫特是個大笨蛋，他去洗手間時打開了電腦，而且沒有採取任何保護措施。 在上個月的聚會後，他還沒有事先詢問就吃了最後一片披薩。 透過 Trent 的計算機，Billy 現在可以存取相同的儲存庫，但需要使用 Trent 的登入憑證。 所以現在 Billy 可以透過先學習他不應該做的所有事情來學習 Git，例如： 1.使用--force將程式碼推送到別人的分支 ----------------------- 假設目前的 git 生態系如下所示：  Billy 目前正在查看另一位同事分支的早期版本。 如果兩個人在同一個分支上簽出，但其中一個人開始將變更推送到遠端，則可能會發生這種情況。 這意味著比利在分支上落後了。如果他想取得目前所在分支的最新更改，他會在終端機中寫入`git pull` 有趣的事實： Git pull 其實是另外 2 個 git 指令的組合。 - `git fetch origin` （取得遠端的最新變更而不檢查或合併它） - `git merge origin/<branch name>` （這*會將*本機變更合併至遠端。由於通常您不會合併本機文件，因此 git 會執行所謂的「快轉」操作，最終您會得到最新的變更） 比利想知道如果他嘗試推動這個人的分支會發生什麼，即使他落後於最新的變化。 通常，如果他嘗試`git push`某些程式碼，該嘗試將會失敗並出現錯誤 - 要求他首先提取最新的更改。 （這是 git 內建的安全網，以避免工作遺失。除非先拉，否則無法推！） 但如果比利執行`git push --force`指令，就可以避免這種情況。 `git push --force`對於開發人員來說通常是一個大問題。這是一個強制覆蓋 git 歷史記錄並讓您推送本地更改的命令，儘管它可能會刪除同一分支上其他人的工作。 比利以前從未使用過它，是一個好奇的男孩，所以他做了任何好奇的人都會做的事情。 1. 他建立了一個新文件，其中包含特殊文字： `echo "Trent was here" > Trent.txt` 2. 他對分行做出了非常重要的改變 `git add Trent.txt` `git commit -m "Trent committed this"` 這使得 git 看起來像這樣：  3. 他透過強制將新變更推送到分支來結束 `git push --force` 幾秒鐘後... *噗！* Billy 非常重要的更改現在已在 Git 中！ 同時，他同事的所有工作完全消失了！ 天啊，那真是太有趣了。比利想知道他還要等多久才能讓那位同事注意到。 他想知道是否有什麼事情是他能做的最糟糕的事情。也許……他可以在生產中做類似的事情？ 比利腦中的一個燈泡突然熄滅了！如果他做了： 2.生產分支上的硬重置 ----------- `Git reset`是一個命令，類似於 Billy 對他的同事所做的那樣，撤消在分支中建立的對先前提交的更改。 與他之前學到的`git push --force`指令不同，沒有什麼可以推送的。它只是透過（通常）取消提交在某個提交之前完成的所有事情來重寫 git 歷史記錄。 git reset 指令有 3 種模式。 1. `git reset --soft`將 HEAD（Head 是您目前簽出的提交）移回指定的提交，同時也撤銷所做的所有變更。所有這些變更都會返回暫存狀態，並允許您再次提交。 2. `git reset --mixed`與`git reset --soft`作用相同，但會保留您所做的所有變更。這也是 git reset 指令的預設模式。因此，如果您編寫`git reset` ，則與執行`git reset --mixed`相同。 3. `git reset --hard`是惡魔般的。它不會撤消更改並將其保留在暫存/未暫存狀態...它只是丟棄它們。 *噗* 當您硬重置到舊提交時，所有這些更改都會消失。 因此，如果 Billy 說…硬重置到**6 個月前**的提交，哦，我不知道，這對公司來說將是非常糟糕的。 比利微笑著打開終端機。 記住 git 生態系統是什麼樣子的：  比利高興地開始說： 1. 在終端`git checkout main`中輸入，將他定位到該分支的最新提交。 2. 使用 git 視覺化工具從主分支尋找 6 個月前的提交。 3. 最後輸入`git reset --hard <commit hash>`刪除主分支中過去 6 個月的所有變更。 幾秒鐘後... *噗！* 比利成功地讓一些公司高層非常非常生氣！ 但等一下... 比利能夠做到這一點很奇怪，不是嗎？畢竟... ### 權限通常在儲存庫中設置，以便任何人都無法直接推送到生產分支。 這可以防止意外推送或重寫直接影響網站的 git 歷史記錄。 這就是為什麼存在所謂的「拉取請求」（或 PR）的原因。 ### 拉取請求是將一組變更從一個分支合併到另一個分支的提議。 通常，其他精通技術的開發人員首先必須接受您的更改，然後您才能合併。 但如果從未設定這些權限會發生什麼事？ 好吧，似乎像比利這樣的人可以在一秒鐘內抹掉每個人過去兩個季度的努力。 他計算出，在他對生產產生主要影響之前，他可能還有 10 分鐘……不，15 分鐘。 所以比利必須快速行動。在一個名叫特倫特的人陷入麻煩之前，他可能還有時間去做另一件混亂的邪惡事情。 該怎麼辦... 哦，比利知道！他應該： 3. 揭露專案秘密並將其推向生產！ ----------------- Billy 可以透過修改 .gitignore 檔案輕鬆完成此操作。 ### .gitignore 是位於專案目錄中的一種特殊類型的檔案。顧名思義，它指定 Git 應忽略哪些檔案並避免讓您暫存。 當您有一些不想先上傳到儲存庫的特定檔案時，這非常有用。 您*通常*希望避免上傳的檔案之一是 .env 檔案。 ### .env 檔案往往在專案中用於保存您將在整個解決方案中使用的環境變數。 它們具有鍵/值對以及您*確實*不想上傳的資訊。 API 金鑰、資料庫 URI、AUTH 金鑰等。 但比利不喜歡保守秘密。 他是他故事中的英雄，必須讓人知道！ 因此，如果我們假設 .gitignore 檔案如下所示： ``` # Javascript node_modules node_modules/ # API keys .env ``` 那麼比利要做的就是： 1. 找到 .gitignore 文件 2. 使用他最喜歡的 IDE 或終端文字編輯器從檔案中刪除 .env 行並儲存。 （這使得文件現在看起來像這樣） ``` # Javascript node_modules node_modules/ # API keys are gone from ignore oops ``` 3. 將現在更改的 .gitignore 檔案新增到暫存中。 Billy 透過在終端機中輸入`git add .gitignore`來完成此操作 4. 等一下！不要忘記 - 由於 Git 現在不會忽略 .env 文件，Billy 也必須加入它！ `git add .env`也被輸入到終端機中。 5. 是時候做出承諾了！比利用這一行做到了這一點： ``` `git commit -m "FREEEEEEDOOOOOMMM!!!! #TrentWasHere"` ``` 6. 最後一步！是時候推送到主分支了。再次，由於某種原因，沒有任何權限設定可以阻止比利，他可以在終端機中寫入`git push --force` 。 幾秒鐘後... *噗！* 「自由、平等、博愛」比利高興地低聲說！就在他把特倫特的電腦留在了它所屬的地方。 這也是一件好事，因為他剛剛聽到遠處房間裡傳來廁所沖水的聲音。 比利跑回他的辦公桌，在任何人注意到之前及時趕到。 *唷* 看來特倫特終於從衛浴休息回來，坐在辦公桌前。 但就在他打開筆記型電腦之前，特倫特的電話響了。 *戒指戒指，戒指戒指* 比利滿懷期待地等待著，看到特倫特慢慢地拿起電話。 “你好？” “特倫特。辦公室。現在。” 比利可以在 5 個辦公桌外聽到特倫特電話裡的喊叫聲。 “哇，老闆發生什麼事了？” … “我沒有做任何事——” … 「你們生產出了什麼事嗎？ … “我正在路上” 崔恩特迅速跑向辦公室，可能是為了他一生中的尖叫聲。 比利坐下來，放鬆下來，終於可以說： 「今天我是一個更好的開發人員」。  --- 這是我寫過的最愚蠢的文章。 ------------- 如果您喜歡我的幽默感，那麼我想您一定會喜歡我的電子報「Exceptional Frontend」——網路上最有趣的前端電子報。 它適合任何想要一份以前端為中心、試圖與其他人不同的時事通訊的開發人員。我們專注於使其獨一無二，最重要的是—有趣！ 同時也幫助開發人員在他們所做的事情上變得出色。 [您可以在這裡註冊。](https://exceptional-frontend.aweb.page/p/b56d0522-222b-468d-85b2-d69c15afac1c) --- 原文出處：https://dev.to/mauroaccorinti/how-to-get-somebody-fired-using-git-31if
世界上充滿了有前景的人工智慧工具，如 Sora、ChatGPT 以及更多即將推出的工具。 我收集了一些你必須使用的令人興奮的人工智慧工具。 該清單包括 Devin AI 的開源替代品、Notion、5 秒內的語音克隆、電子郵件自動化軟體以及您從未聽說過的工具。好奇心超載！ 別忘了給他們加星號🌟 讓我們涵蓋這一切！ --- 1. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ----------------------------------------------------------------------------  Taipy 是一個開源 Python 庫，可用於輕鬆的端到端應用程式開發，具有假設分析、智慧管道執行、內建調度和部署工具。 我相信你們大多數人都不明白 Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 因此，您可以繪製資料集的圖表，並使用類似 GUI 的滑桿來提供使用其他實用功能來處理資料的選項。 雖然 Streamlit 是一種流行的工具，但在處理大型資料集時，其效能可能會顯著下降，這使得它在生產級使用上不切實際。 另一方面，Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 Taipy，您將親身體驗其用戶友好的介面和高效的資料處理。 在底層，Taipy 利用各種函式庫來簡化開發並增強功能。  開始使用以下命令。 ``` 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://docs.taipy.io/en/release-3.1/gallery/llm/5_chatbot/)，它使用 OpenAI 的 GPT-4 API 來產生對您的訊息的回應。您可以輕鬆更改程式碼以使用任何其他 API 或模型。  另一個有用的事情是，Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。  您也可以使用 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://covid-dashboard.taipy.cloud/Country) - [推文生成](https://tweet-generation.taipy.cloud/) - [資料視覺化](https://production-planning.taipy.cloud/Data-Visualization) - [即時人臉辨識](https://face-recognition.taipy.cloud/) - [國際象棋大師](https://github.com/KorieDrakeChaney/taipy-chess) Taipy 在 GitHub 上有 7k+ Stars，並且處於`v3`版本，因此它們正在不斷改進。 https://github.com/Avaiga/taipy Star Taipy ⭐️ --- 2. [PR Agent](https://github.com/Codium-ai/pr-agent) - 自動拉取請求分析、回饋、建議的工具。 -------------------------------------------------------------------------  這是一個開源工具，可幫助有效地審查和處理拉取請求。它有許多獨特的選項，並提供跨各種 git 提供者的廣泛的拉取請求功能。 每天有數百萬個開源專案和數百個 Pull 請求，因此有一個可以幫助您的朋友是非常好的事情。 我是開源維護者，所以我知道有時會變得多麼困難，特別是每天都要審查這麼多的 Pull 請求。 無論如何，這就是公關代理商的幕後工作方式。  您必須使用`@CodiumAI-Agent /review`對拉取請求發表評論，代理商將透過對 PR 的審查進行回應。有很多可用的選項，例如`describe`和`improve` 。 他們也提供了 [PR-Agent 工具](https://pr-agent-docs.codium.ai/tools/)，每個頁面都有一個專門的頁面來解釋如何使用它。 您可以閱讀[文件](https://pr-agent-docs.codium.ai/installation/)並查看[範例結果](https://github.com/Codium-ai/pr-agent?tab=readme-ov-file#example-results)。 最好的部分是您甚至可以將其作為[GitHub Action](https://pr-agent-docs.codium.ai/installation/github/#run-as-a-github-action)執行。他們還提供了一個專業版本，有更多的選擇，但免費套餐足以開始使用。 如果您正在尋找好的文章，我推薦[使用 CodiumAI PR-Agent 自動進行拉取請求審查和](https://rnemet.dev/posts/ai/codium-pragent/)[CodiumAI PR-Agent 讓開發人員的生活更輕鬆的 5 個原因](https://medium.com/@mengineer/5-reasons-why-codiumai-pr-agent-is-making-developers-lives-easier-e040be0f6a36)。這些提供了有關 PR Agent 的大量概述。 它們在 GitHub 上有大約 3800 個 Star，被 300 多名開發人員使用，並且是使用 Python 建構的。雖然它們可能不是非常受歡迎，但它們的用例非常好。 https://github.com/Codium-ai/pr-agent 明星公關代理人 ⭐️ --- 3. [Mintlify](https://github.com/mintlify/writer) - 在建置時出現的文件。 --------------------------------------------------------------  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/) ；回購協議中目前的似乎是錯誤的。 它在 GitHub 上有大約 2.4k 顆星，受到許多開發人員的喜愛，並且是使用 TypeScript 建構的。 https://github.com/mintlify/writer Star Mintlify ⭐️ --- 4.[螢幕截圖到程式碼](https://github.com/abi/screenshot-to-code)- 放入螢幕截圖並將其轉換為乾淨的程式碼。 ---------------------------------------------------------------------------  這是一個非常受歡迎的開源專案，但我可以肯定地說，很多開發人員仍然沒有意識到這一點。使用此功能，您可以將使用者介面的建置速度提高 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。 https://github.com/abi/screenshot-to-code 將螢幕截圖轉為程式碼 ⭐️ --- 5. [FaceSwap](https://github.com/deepfakes/faceswap) - 適合所有人的 Deepfakes 軟體。 ---------------------------------------------------------------------------  我總是對 Deepfakes 著迷，因為這就是某些人工智慧的工作原理，尤其是使用影片的人工智慧。 相信我！我們中的許多人甚至不使用它來建立影片，我們只是修改程式碼來看看它的作用，不道德的使用並不能代表它的建立原因、我們現在如何使用它，或者我們對它的未來的看法。 您應該觀看此影片以了解電腦如何辨識臉！觀看[此影片](https://www.youtube.com/watch?v=aircAruvnKk)以了解神經網路的基本功能。 https://www.youtube.com/watch?v=R9OHn5ZF4Uo 您可以閱讀[INSTALL.md](https://github.com/deepfakes/faceswap/blob/master/INSTALL.md)以取得詳細的安裝指南。根據文件，您需要具有 CUDA 支援的現代 GPU 才能獲得最佳效能。許多 AMD GPU 透過 DirectML (Windows) 和 ROCm (Linux) 支援。 您可以閱讀<a href="">文件</a>、觀看[演示影片](https://www.dailymotion.com/video/x810mot)並存取他們的[部落格](https://faceswap.dev/blog/)以觀看具有其他用例的會議影片。 我最喜歡的事實是，他們有一個非常簡單的部分，介紹任何人如何為該專案做出貢獻，包括對生成模型感興趣的人、開發人員、非開發高級用戶、最終用戶，當然還有討厭者:) 他們在 GitHub 上有 48k+ Stars，這使得他們足夠可信。 https://github.com/deepfakes/faceswap 明星 FaceSwap ⭐️ --- 6. [Amica](https://github.com/semperai/amica) - 讓您可以在瀏覽器中輕鬆地與 3D 角色聊天。 ----------------------------------------------------------------------  Amica 是一個開源接口，用於透過語音合成和語音辨識與 3D 角色進行互動式通訊。 您可以匯入 VRM 文件，調整聲音以適合角色，並產生包含情緒表達的回應文字。 他們使用 Three.js、OpenAI、Whisper、Bakllava 等進行視覺處理。您可以閱讀[Amica 的工作原理](https://docs.heyamica.com/overview/how-amica-works)及其所涉及的[核心概念](https://docs.heyamica.com/overview/core-concepts)。 您可以克隆該存儲庫並使用它來[開始](https://docs.heyamica.com/getting-started/installation)。 ``` npm i npm run dev ``` 您可以閱讀[文件](https://docs.heyamica.com/)並查看[演示](https://amica.arbius.ai/)，這真是太棒了：D  您可以觀看這段簡短的影片，了解它的功能。 https://www.youtube.com/watch?v=hUxAEnFiXH8 Amica 使用 Tauri 建立桌面應用程式。 他們在 GitHub 上有 400+ Stars，而且看起來非常容易使用。 https://github.com/semperai/amica Star Amica ⭐️ --- 7. [Bark](https://github.com/suno-ai/bark) - 文字提示的生成音訊模型。 ---------------------------------------------------------  Bark 是 Suno 建立的基於轉換器的文本到音訊模型。 Bark 可以產生高度逼真的多語言語音以及其他音訊 - 包括音樂、背景噪音和簡單的音效。 該模型還可以產生非語言交流，如笑、嘆息和哭泣。哇！ 它擁有 MIT 許可證，這意味著它現在可用於商業用途。 Bark 支援超過 100 種語言的揚聲器預設。您可以[在此處](https://suno-ai.notion.site/8b8e8749ed514b0cbf3f699013548683?v=bc67cff786b04b50b3ceb756fd05f68c)查看支援的語音預設庫。 根據文件，Bark 嘗試匹配給定預設的語氣、音高、情緒和韻律，但目前不支援自訂語音複製。該模型還嘗試保留音樂、環境噪音等。這超出了任何人的需要。 您可以這樣使用它。如果您想將其與 Transformers 庫一起使用，請閱讀[本文](https://github.com/suno-ai/bark?tab=readme-ov-file#-transformers-usage)。 ``` from bark import SAMPLE_RATE, generate_audio, preload_models from scipy.io.wavfile import write as write_wav from IPython.display import Audio # download and load all models preload_models() # generate audio from text text_prompt = """ Hello, my name is Suno. And, uh — and I like pizza. [laughs] But I also have other interests such as playing tic tac toe. """ audio_array = generate_audio(text_prompt) # save audio to disk write_wav("bark_generation.wav", SAMPLE_RATE, audio_array) # play text in notebook Audio(audio_array, rate=SAMPLE_RATE) ``` Bark 開箱即用支援各種語言，並自動根據輸入文字確定語言。當提示使用程式碼轉換文字時，Bark 將嘗試使用相應語言的本地口音。 您可以在[Google Colab](https://colab.research.google.com/drive/1eJfA2XUa-mXwdMy7DoYKVYHI1iTd9Vkt?usp=sharing) & [Replicate](https://replicate.com/suno-ai/bark)閱讀<a href="">文件</a>並查看演示。 您也可以在筆記本部分閱讀有關語音一致性增強和其他形式的[範例](https://github.com/suno-ai/bark/tree/main/notebooks)。  它們支援多種語言，如英語、印地語、德語、法語等。 他們在 GitHub 上擁有 30k+ Stars，並且經營超過 300,000 人的社區，這使他們成為值得選擇的選擇。 https://github.com/suno-ai/bark 星樹 ⭐️ --- 8. [GPTDiscord](https://github.com/Kav-K/GPTDiscord) - Discord 的一體化 GPT 介面。 ---------------------------------------------------------------------------  我是 Discord 上多個社群的成員，具有出色用例的機器人可以改善整體最終用戶體驗。 這個機器人的功能與 ChatGPT 網路相當，甚至在某些事情上做得更好！ 它們支援一切，從多模態圖像理解、程式碼解釋、高級資料分析、文件問答、與 Wolfram Alpha 的網路連接聊天和 Google 存取、AI 審核、使用 DALL-E 生成圖像等等！ 您可以閱讀 GPTDiscord 的所有高效[功能](https://github.com/Kav-K/GPTDiscord?tab=readme-ov-file#features)。 您可以閱讀[安裝指南](https://github.com/Kav-K/GPTDiscord/blob/main/detailed_guides/INSTALLATION.md)。 您可以查看[螢幕截圖](https://github.com/Kav-K/GPTDiscord?tab=readme-ov-file#screenshots)並查看不同目的的[詳細指南](https://github.com/Kav-K/GPTDiscord/tree/main/detailed_guides)清單。 他們在 GitHub 上有大約 1.8k+ Stars，而且肯定在進步。 https://github.com/Kav-K/GPTDiscord 星 GPTDiscord ⭐️ --- 9. [Upscayl](https://github.com/upscayl/upscayl) - 開源 AI 影像擴大機。 ---------------------------------------------------------------  適用於 Linux、MacOS 和 Windows 的免費開源 AI Image Upscaler 採用 Linux 優先概念建構。 它可能與全端無關，但它對於升級圖像很有用。   透過最先進的人工智慧，Upscayl 可以幫助您將低解析度影像變成高解析度。清脆又鋒利！ 您可以閱讀[安裝指南](https://github.com/upscayl/upscayl?tab=readme-ov-file#-installation)，並查看 Upscayl 之前/之後的[比較](https://github.com/upscayl/upscayl/blob/main/COMPARISONS.MD)。  它在 GitHub 上有 23k+ Stars，並且基於 TypeScript 建置。 https://github.com/upscayl/upscayl 明星 Upscayl ⭐️ --- 10. [AppFlowy](https://github.com/AppFlowy-IO/AppFlowy) - Notion 的開源替代品。 ------------------------------------------------------------------------  AppFlowy 是一個由人工智慧驅動的安全工作空間，類似於您在不失去資料控制的情況下實現更多目標的概念。  他們還提供行動應用程式，這是一個優點。 您可以閱讀[文件](https://docs.appflowy.io/docs)並了解[安裝方法](https://docs.appflowy.io/docs/appflowy/install-appflowy/installation-methods)。 他們還支援[使用 Supabase 自託管 AppFlowy](https://docs.appflowy.io/docs/guides/appflowy) 。對於喜歡 Supabase 功能或使用 Supabase 作為其基礎設施的用戶來說，這是理想的選擇。 您還應該檢查[此內容](https://docs.appflowy.io/docs/appflowy/product/data-storage)以了解有關資料儲存、Markdown、捷徑、主題、涉及的人工智慧和插件的更多資訊。 AppFlowy 在 GitHub 上擁有超過 47,000 顆星，發布了 64 個以上版本。 https://github.com/AppFlowy-IO/AppFlowy 明星 AppFlowy ⭐️ --- 11. [Leon](https://github.com/leon-ai/leon) - 您的開源個人助理。 -------------------------------------------------------  Leon 是一個開源個人助理，可以駐留在您的伺服器上。 當你要求他做事時，他就會做事。 你可以跟他說話，他也可以跟你說話。你也可以給他發短信，他也可以傳簡訊給你。如果您願意，Leon 可以透過離線方式與您溝通，以保護您的隱私。這是萊昂目前可以做的[技能](https://github.com/leon-ai/leon/tree/develop/skills)清單。 你應該讀一下[萊昂背後的故事](https://blog.getleon.ai/the-story-behind-leon/)。您還可以觀看此演示以了解有關 Leon 的更多資訊。 https://www.youtube.com/watch?v=p7GRGiicO1c  這是Leon的高層架構模式。  這是開始使用 npm 指令的方法。 ``` # install leon global cli npm install --global @leon-ai/cli # install leon leon create birth ``` 您可以閱讀[文件](https://docs.getleon.ai/)。 它在 GitHub 上擁有超過 14k 顆星，並且還在不斷增長。 https://github.com/leon-ai/leon 明星萊昂 ⭐️ --- 12. [n8n](https://github.com/n8n-io/n8n) - 工作流程自動化工具。 -----------------------------------------------------  n8n 是一個可擴展的工作流程自動化工具。透過公平程式碼分發模型，n8n 將始終擁有可見的原始程式碼，可用於自託管，並允許您加入自訂函數、邏輯和應用程式。  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，並提供兩個包供整體使用。 https://github.com/n8n-io/n8n 明星 n8n ⭐️ --- 13. [Quivr](https://github.com/QuivrHQ/quivr) - 你的 GenAI 第二腦。 -------------------------------------------------------------  Quivr，您的第二個大腦，利用 GenerativeAI 的力量成為您的私人助理！可以將其視為黑曜石，但增強了人工智慧功能。  您可以閱讀[安裝指南](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#getting-started-)。 您可以閱讀[文件](https://docs.quivr.app/home/intro)並觀看[示範影片](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#demo-highlights-)。 他們可以提供更好的免費套餐，但這足以在您端進行測試。 它在 GitHub 上擁有超過 30k 顆星，發布了 220 多個版本，這意味著它們正在不斷改進。 https://github.com/QuivrHQ/quivr Star Quivr ⭐️ --- 14. [meilisearch](https://github.com/meilisearch/meilisearch) - 適合您的應用程式、網站和工作流程的搜尋 API。 ----------------------------------------------------------------------------------------  Meilisearch 可協助您快速打造令人愉悅的搜尋體驗，提供開箱即用的功能來加快您的工作流程。 您一定看過可以使用`Ctrl + k`搜尋文件的軟體網站，例如 GitHub 或 Appwrite。那麼，meilisearch 可以幫助您實現相同的功能。 與 Algolia、Typesense 和 Elasticsearch 相比，這是唯一基於 Rust 建構的。您可以閱讀有關可用替代選項的[比較](https://www.meilisearch.com/docs/learn/what_is_meilisearch/comparison_to_alternatives):) Meilisearch 不應該是您的主要資料儲存。它是一個搜尋引擎，而不是一個資料庫。 Meilisearch 應僅包含您希望使用者搜尋的資料。如果您必須加入與搜尋無關的資料，請務必使這些字段不可搜尋，以提高相關性並縮短響應時間。 無論您是在開發網站還是應用程式，Meilisearch 都能提供直覺的即輸入即搜尋體驗，回應時間低於 50 毫秒。 他們提供[SDK 和庫，](https://www.meilisearch.com/docs/learn/what_is_meilisearch/sdks?utm_campaign=oss&utm_source=github&utm_medium=meilisearch&utm_content=sdks-link)用於 Meilsearch 和您喜歡的語言或框架之間的無縫整合。相信我，選擇的數量是瘋狂的。 他們還提供了一個[抓取工具](https://github.com/meilisearch/docs-scraper)來自動讀取文件內容並將其儲存到Meilisearch。 他們展示了許多[有用的功能](https://www.meilisearch.com/docs/learn/what_is_meilisearch/overview#features)，例如即使查詢包含拼寫錯誤和拼寫錯誤（他們將其稱為`typo tolerance` ，您也可以獲得相關匹配。 有很多可用的選項，但讓我們看看如何使用 React 來做到這一點。 開始使用以下命令。 ``` yarn add react-instantsearch @meilisearch/instant-meilisearch # or npm install react-instantsearch @meilisearch/instant-meilisearch # or pnpm add react-instantsearch @meilisearch/instant-meilisearch ``` 您可以這樣使用它。 ``` import React from 'react'; import { InstantSearch, SearchBox, Hits, Highlight } from 'react-instantsearch'; import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'; const { searchClient } = instantMeiliSearch( 'https://ms-adf78ae33284-106.lon.meilisearch.io', 'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303' ); const App = () => ( <InstantSearch indexName="steam-video-games" searchClient={searchClient} > <SearchBox /> <Hits hitComponent={Hit} /> </InstantSearch> ); const Hit = ({ hit }) => <Highlight attribute="name" hit={hit} />; export default App ``` 您可以查看此[codesandbox](https://codesandbox.io/p/sandbox/eager-dust-f98w2w)以取得詳細的範例以開始使用。 正如我所說，他們在幕後提供了很多東西。例如，您可以使用這些。 ``` npm install @meilisearch/autocomplete-client npm install @meilisearch/instant-meilisearch npm install meilisearch-docsearch ``` `meilisearch docsearch`的靈感來自 Algolia 搜尋文件元件。另外，非常詳細的文件以及每個 sdk 的範例和選項使它們成為人們的最愛。 您可以閱讀[文件](https://www.meilisearch.com/docs)並觀看[現場演示](https://where2watch.meilisearch.com/?utm_campaign=oss&utm_source=github&utm_medium=meilisearch&utm_content=demo-link)。  他們在 GitHub 上有超過 42k 顆星，並且`v1.7`版本有 180 多個版本。 https://github.com/meilisearch/meilisearch 星 meilisearch ⭐️ --- 15.[收件匣清除](https://github.com/elie222/inbox-zero)- 幾分鐘內清理您的收件匣。 ---------------------------------------------------------------  收件匣歸零是一款開源電子郵件應用程式，其目標是透過 AI 協助幫助您快速實現收件匣歸零。 它們得到了谷歌的批准，因此這是關注隱私的一個很好的部分。  它們使用 Postgres 作為資料庫，並基於 TypeScript 建置。 它們有一些瘋狂的功能，例如： > 您的電子郵件人工智慧助理 1. 人工智慧代理將讓您根據您提供的規則自動回覆、轉發或存檔電子郵件。 2. 他們的人工智慧計畫可以幫助你點擊接受或拒絕。一旦您確信人工智慧可以獨立工作，就可以開啟完全自動化。 3. 您可以用簡單的英語進行指導。就像與助手交談或向 ChatGPT 發送提示一樣簡單。 > 您可以自動封鎖冷電子郵件 您可以告訴「收件匣零」什麼對您來說構成冷郵件。它將根據您的指示阻止它們。 > 分析 了解收件匣是處理它的第一步。了解您的收件匣裡裝滿了什麼。它們還為您提供了立即採取行動的方法。 您可以閱讀核心[功能](https://github.com/elie222/inbox-zero?tab=readme-ov-file#key-features)並觀看[演示影片](https://github.com/elie222/inbox-zero?tab=readme-ov-file#demo-video)。您還可以查看他們的[看板](https://github.com/users/elie222/projects/1/views/1)以了解計劃內容。 他們在 GitHub 上擁有超過 1,500 個 Star，並且絕對值得更多。 https://github.com/elie222/inbox-zero 星收件匣零 ⭐️ --- 16. [Lively](https://github.com/rocksdanister/lively) - 允許使用者設定動畫桌面桌布和螢幕保護程式。 -----------------------------------------------------------------------------  這只是為了好玩，我們可以使用程式碼學到很多關於它是如何完成的。 你可以看看這個[影片](https://www.pexels.com/video/blue-texture-abstract-leaves-7710243/)，看看它看起來有多瘋狂。  他們提供[三種類型的壁紙，](https://github.com/rocksdanister/lively?tab=readme-ov-file#types-of-wallpapers)包括影片/GIF、網頁和應用程式/遊戲。 它基於 C# 和 live 支援的一些很酷的功能建置： 1. Lively 可以透過終端機的[命令列參數](https://github.com/rocksdanister/lively/wiki/Command-Line-Controls)進行控制。您可以將其與其他語言（例如 Python 或腳本軟體 AutoHotKey）整合。 2. 一組強大的[API](https://github.com/rocksdanister/lively/wiki/API) ，供開發人員建立互動式壁紙。取得硬體讀數、音訊圖表、音樂資訊等。 3. 當電腦上執行全螢幕應用程式/遊戲時（~0% CPU、GPU 使用率），桌布播放會暫停。 4. 您還可以利用[機器學習推理](https://github.com/rocksdanister/lively/wiki/Machine-Learning)來建立動態壁紙。您可以預測任何 2D 影像與相機的距離並產生類似 3D 的視差效果。酷：D 我見過很多人使用它，其中許多人甚至不知道它是開源的。 您可以使用[安裝程式](https://github.com/rocksdanister/lively/releases/download/v2.0.7.4/lively_setup_x86_full_v2074.exe)或透過[Microsoft Store](https://www.microsoft.com/store/productId/9NTM2QC6QWS7?ocid=pdpshare)下載它。 它是 2023 年 Microsoft Store 的獲勝者。 它在 GitHub 上擁有 13k+ Stars，有 60 個版本。 https://github.com/rocksdanister/lively 明星活潑 ⭐️ --- 17. [Netron](https://github.com/lutzroeder/netron) - 神經網路、深度學習和機器學習模型的視覺化工具。 ----------------------------------------------------------------------------  Netron 是神經網路、深度學習和機器學習模型的檢視器。 Netron 支援 ONNX、TensorFlow Lite、Core ML、Keras、Caffe、Darknet、MXNet、PaddlePaddle、ncnn、MNN 和 TensorFlow.js。 Netron 對 PyTorch、TorchScript、TensorFlow、OpenVINO、RKNN、MediaPipe、ML.NET 和 scikit-learn 提供實驗性支援。 您可以閱讀有關[安裝說明](https://github.com/lutzroeder/netron?tab=readme-ov-file#install)。 您可以存取該[網站](https://netron.app/)並打開這些[範例模型文件](https://github.com/lutzroeder/netron?tab=readme-ov-file#models)以使用它來打開。例如，您可以看到這個[演示](https://netron.app/?url=https://github.com/onnx/models/raw/main/validated/vision/classification/squeezenet/model/squeezenet1.0-3.onnx)。  他們在 GitHub 上有 25k+ Stars，並且是基於 JavaScript 建構的。它們在`v7.5`上只有三個版本，考慮到我只使用了語義版本，這對我來說似乎很困惑。我們都同意這個用例非常出色。 https://github.com/lutzroeder/netron 明星 Netron ⭐️ --- 18. [Cursor](https://github.com/getcursor/cursor) - 以 VSCode 為基礎的人工智慧程式碼編輯器。 ----------------------------------------------------------------------------  Cursor 是一款專為與 AI 結對程式設計而設計的程式碼編輯器。遊標適用於 Windows、Mac 和 Linux。 Cursor 不僅僅是 Visual Studio Code (VSC) 擴充功能。這是它自己的應用程式。但別擔心！這是VSC前叉。這意味著它擁有 VSC 所擁有的一切，但在此基礎上也建立了更多人工智慧功能。 https://github.com/anysphere/primpt 他們之前開源了[基於 Codemirror 的編輯器](https://github.com/getcursor/old)。 基於 VSCodium 的 Cursor 版本不是開源的，只有它們的[提示庫](https://github.com/anysphere/priompt)是開源的。 選項數量龐大，您可以查看[功能列表](https://docs.cursor.sh/features/chat)，例如選擇用於聊天的 AI 模型、程式碼庫索引和自動終端偵錯。聽起來很酷，對吧：D 您應該檢查的一些功能是： - 允許您透過編輯程式碼庫的「偽程式碼」版本來進行編碼。 - 一旦錯誤出現在您的終端機中，就會自動修復錯誤。 - 要求 AI 更改程式碼區塊，查看編輯的內聯差異。 您也可以閱讀他們官方網站的[變更日誌](https://changelog.cursor.sh/?)。 您可以閱讀有關如何從[VSCode 遷移到 Cursor 的](https://docs.cursor.sh/get-started/moving-from-vsc-to-cursor)資訊。 他們也有定價模型，但免費套餐足以讓您進行測試！ 他們在 GitHub 上擁有超過 19k+ 的 Star，並將繼續成長。正如我所說，這不是開源的，但將來可能會改變。 https://github.com/getcursor/cursor 星形遊標 ⭐️ --- 19. [VSCode 除錯視覺化工具](https://github.com/hediet/vscode-debug-visualizer)- VS Code 的擴展，可在偵錯期間可視化資料。 -------------------------------------------------------------------------------------------------  這個專案相當令人印象深刻。它不僅有助於高效除錯，還有助於透過視覺化學習基本概念，從長遠來看，這是無價的。 這是一個 VS Code 擴展，用於在偵錯時可視化資料結構。與 VS Code 的監視視圖類似，但具有豐富的監視值視覺化效果。 他們支援許多語言，如 Dart/Flutter、JS/TS、Go、Python、C#、Java、C++、Ruby、Rust 和 Swift，儘管它很基礎，所以這是一個優點。 其他語言和除錯器也可能有效。對於有基本支援的語言，只能視覺化 JSON 字串。您需要實作邏輯來為您的資料結建置立此 JSON。完全支援的語言提供資料提取器，可將一些眾所周知的資料結構轉換為 JSON。 安裝擴充功能後，您可以使用命令`Debug Visualizer: New View`開啟新的視覺化工具視圖。 您可以[在 market 上](https://marketplace.visualstudio.com/items?itemName=hediet.debug-visualizer)查看所有可用的[演示](https://github.com/hediet/vscode-debug-visualizer/blob/master/extension/README.md#selected-demos)並查看擴展。 您還可以查看他們的[視覺化遊樂場](https://hediet.github.io/visualization/?darkTheme=1)，其中包含眾多選項。 他們在 GitHub 上擁有超過 7800 顆星，而且還在不斷增長。 https://github.com/hediet/vscode-debug-visualizer 明星 VSCode 除錯視覺化工具 ⭐️ --- 20. [OpenDevin](https://github.com/OpenDevin/OpenDevin) - 更少的程式碼，更多的內容。 -----------------------------------------------------------------------   這是一個開源專案，旨在複製 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，並且正在快速成長。 https://github.com/OpenDevin/OpenDevin 明星 OpenDevin ⭐️ --- 21.[即時語音克隆](https://github.com/CorentinJ/Real-Time-Voice-Cloning)－5秒克隆語音，即時產生任意語音。 ----------------------------------------------------------------------------------  該專案是透過即時工作的聲碼器實現從說話者驗證到多說話者文字到語音合成 (SV2TTS) 的遷移學習。 SV2TTS是一個分為三個階段的深度學習架構。 在第一階段，人們從幾秒鐘的音訊中建立聲音的數位表示。 在第二和第三階段，該表示被用作參考來產生給定任意文字的語音。 您可以閱讀[如何設定](https://github.com/CorentinJ/Real-Time-Voice-Cloning?tab=readme-ov-file#setup)專案，其中包括安裝要求、下載預訓練模型、測試配置、下載資料集和啟動工具箱。 觀看下面所示的影片示範！ https://www.youtube.com/watch?v=-O\_hYhToKoA 我一直喜歡開源專案的最好的部分是，他們甚至非常清楚地提到了替代方案，並且像往常一樣，他們推薦了一些[專案](https://github.com/CorentinJ/Real-Time-Voice-Cloning?tab=readme-ov-file#heads-up)，這些專案將為您克隆的聲音提供更好的保真度及其表現力。 他們在 GitHub 上擁有 50k+ Stars，並且僅基於 Python 建置。到目前為止使用起來還是非常可信的。 https://github.com/CorentinJ/Real-Time-Voice-Cloning Star 即時語音克隆 ⭐️ --- 請在評論中告訴我您在此列表中發現了哪些有用的人工智慧工具：D 人工智慧正在改變世界，最好讓人工智慧成為你的朋友，而不是簡單地忽略它。 使用這些工具來提高工作效率並抓住機會創造非凡的東西。 祝你有美好的一天！直到下一次。 在 GitHub 和[Twitter](https://twitter.com/Anmol_Codes)上關注我。 https://github.com/Anmol-Baranwal 關注 Taipy 以了解更多此類內容。 https://dev.to/taipy --- 原文出處：https://dev.to/taipy/21-ai-tools-that-are-changing-the-world-1o54
2021 年，我創辦了一家名為 Linvo 的新創公司，這是一款 LinkedIn 自動化工具。它產生了很多錢，但燒錢率也很高。 我可以告訴你，作為一個年輕的企業家（完全自力更生），我損失了大部分錢😆 我的系統的問題是它不斷故障；我不是世界上最好的程式設計師，但讓我詳細說明一下。  --- 傀儡師會吸走你的記憶 ---------- Linvo 在其生命週期中進行了幾次迭代。我使用了我所知道的技術：React 和 NestJS。 基本上，任何自動化的雲端抓取都會涉及建立任務然後解決它們。 它看起來像這樣：  - Cron 每 10 分鐘執行一次，尋找新的事情要做，並將其發送到佇列。 - 工作人員從佇列中取出任務並處理它們。 - 將所有內容儲存到資料庫。 這是一個非常簡單的解決方案，在多個 EC2 (AWS) 和 Redis 上運作。 理論上，它應該有效 - 是的，您需要水平擴展工作人員，但這不是我的問題。 我開始經歷其他事情——**記憶體洩漏。** 您可能知道， [Puppeteer](https://pptr.dev/) - 一種 chromium 自動瀏覽器，很重（與您電腦上的 Chrome 相同），而且我執行了很多它們 - 它們耗盡了我的記憶體 - 導致伺服器停止工作並佔用網路頻寬。  --- 需要一個解決方案 -------- 重構聽起來就像 - 是的，讓我們這樣做，但我的 Intercom 支援充滿了支援票（我已經有很多用戶），而且我知道我必須建立一些瘋狂的重構。 我有一個解決方案的想法 - 讓我們使用 AWS lambda。 - 拉姆達啟動 - 做任務 - 死亡（大部分時間） 它不會影響你的網路。 它會死掉並且不會導致記憶體洩漏。 它有點貴，因為 Lambda 並不意味著無限期地執行——這會消除整個概念，但我很絕望。 （嗯，好處是你不需要考慮規模。） 這是新的基礎設施：  - 事件橋 cron 每 1 分鐘執行一次（這是最小值） - 為佇列建立六個事件的 Lambda（使其像 cron 每 10 秒執行一次） - SQS隊列（再見，Redis） - Lambda 以自動縮放功能脫穎而出（是嗎？） --- 供應商鎖定 ----- 正如您可能從上下文中了解到的那樣 - 現在我完全使用 AWS，但我不介意 - 只介意如何在我的計算機上測試它。 以前，我使用[Sam](https://github.com/aws/aws-sam-cli) 。和[Serverless](https://www.serverless.com/)幾乎一樣快速地創造整個環境。 是的，他們確實帶來了一些本地測試。他們可以獲得您的 lambda 並將其轉變為端點！耶！ 但我使用的是 Event Bridge、SQS 和 Lambda。那是不可能的。 我遇過[localstack](https://github.com/localstack/localstack) 。它本來應該幫助我在我的電腦上建立整個 AWS 堆疊，但當時很多東西都不受支持，例如 Lambda 層。我在使用它時不知所措。 因此，我開始建立我的「自己的」基礎設施，在 AWS 上部署了一個「測試」SQS，並用它執行本地程式碼（一個呼叫函數的函數），但結果很糟糕。 我在生產方面做得不好；我感覺這個詞當時就壓在我身上。 我只是想擺脫這家新創公司；我甚至免費向人們提供它，吸引了顧客並擺脫了這個問題。 長話短說，我設法以低價出售了該系統，但最近，我發現了一些有趣的事情。 --- Winglang - 類似 Typescript 的雲方言 ----------------------------- 我想我的痛苦是真實的，儘管我會很高興在當天找到它 - 我很高興它今天還活著。 [Winglang](https://github.com/winglang/wing)幫助您建立與我使用的相同的雲端基礎設施，但好處是： - 它不需要您使用任何設定檔。您基本上用程式碼定義了整個基礎設施（您可以檢查他們的整個預檢和飛行中文件） - 你可以在本地執行它 - 謝謝你，上帝，🙏🏻🙏🏻🙏🏻🙏🏻，包括所有基礎設施。 - 您可以將其部署到任何雲端供應商，並且不必使用 AWS。他們實際上可以產生任何 Terraform 或雲端結構，以便於部署。 我和Winglang的創始人Elad（著名的CDK的建置者）進行了交談，他說了一些讓我抽搐的話。 > 當您在飛機上時，您實際上可以處理您的專案並為其編寫測試🤯 我自己無法給他們足夠的星星 - 但請幫我一個忙，給他們的存儲庫加星標，當然，將其用於您的下一個專案。 https://github.com/winglang/wing  --- 最後的話 ---- 我對翼朗很生氣。我希望他們早點這麼做。現在他們出現了。什麼時候一切都與人工智慧有關？ 我建立了一個新的 YouTube 頻道，主要涉及技術、開源和行銷:) 如果您對此感興趣，請隨時在這裡訂閱： https://www.youtube.com/@nevo-david?sub\_confirmation=1 --- 原文出處：https://dev.to/github20k/i-sold-my-startup-because-of-bugs-i-wish-i-had-this-serverless-repository-4l3a
今天，我們將學習如何使用 Wing 作為後端建立全端應用程式。  我們將使用 React 和 Vite 作為前端。 我知道還有其他框架，如 Vue、Angular 和 Next，但 React 仍然是最常見的，並且迄今為止有大量值得信賴的新創公司使用它。 如果您不知道， [React](https://github.com/facebook/react)是 Facebook 建立的開源程式庫，用於建立 Web 和本機使用者介面。正如您從儲存庫中看到的，它被超過 2040 萬開發人員使用。所以，這是值得的。 讓我們看看如何使用 Wing 作為後端。  --- [Wing](https://git.new/wing-repo) - 一種雲端程式語言。 ---------------------------------------------  Winglang 是一種專為雲端（又稱「面向雲端」）設計的新型開源程式語言。它允許您在雲端中建立應用程式，並且具有相當簡單的語法。 Wing 程式可以使用功能齊全的模擬器在本地執行（是的，不需要網路），也可以部署到任何雲端供應商。  Wing 需要 Node `v20 or higher` 。 建立一個父目錄（我們使用的`shared-counter` ）並使用 Vite 使用新的 React 應用程式設定前端。您可以使用這個 npm 指令。 ``` npm create -y vite frontend -- --template react-ts // once installed, you can check if it's running properly. cd frontend npm install npm run dev ``` 您可以使用此 npm 命令安裝 Wing。 ``` npm install -g winglang ``` 您可以使用`wing -V`驗證安裝。 Wing 還提供官方[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=Monada.vscode-wing)和[IntelliJ](https://plugins.jetbrains.com/plugin/22353-wing) ，後者提供語法突出顯示、補全、轉到定義和嵌入式 Wing 控制台支援。您可以在建立應用程式之前安裝它！ 建立後端目錄。 ``` mkdir ~/shared-counter/backend cd ~/shared-counter/backend ``` 建立一個新的空 Wing 專案。 ``` wing new empty // This will generate three files: package.json, package-lock.json and main.w file with a simple "hello world" program wing it // to run it in the Wing simulator // The Wing Simulator will be opened in your browser and will show a map of your app with a single function. //You can invoke the function from the interaction panel and check out the result. ``` 使用指令`wing new empty`後的結構如下。 ``` bring cloud; // define a queue, a bucket, and a counter let bucket = new cloud.Bucket(); let counter = new cloud.Counter(initial: 1); let queue = new cloud.Queue(); // When a message is received in the queue -> it should be consumed // by the following closure queue.setConsumer(inflight (message: str) => { // Increment the distributed counter, the index variable will // store the value before the increment let index = counter.inc(); // Once two messages are pushed to the queue, e.g. "Wing" and "Queue". // Two files will be created: // - wing-1.txt with "Hello Wing" // - wing-2.txt with "Hello Queue" bucket.put("wing-{index}.txt", "Hello, {message}"); log("file wing-{index}.txt created"); }); ``` 您可以安裝`@winglibs/vite`來啟動開發伺服器，而不是使用`npm run dev`來啟動本機 Web 伺服器。 ``` // in the backend directory npm i @winglibs/vite ``` 您可以使用`backend/main.w`中提供的 publicEnv 將資料傳送到前端。 讓我們來看一個小例子。 ``` // backend/main.w bring vite; new vite.Vite( root: "../frontend", publicEnv: { TITLE: "Wing + Vite + React" } ); // import it in frontend // frontend/src/App.tsx import "../.winglibs/wing-env.d.ts" //You can access that value like this. <h1>{window.wing.env.TITLE}</h1> ``` 你還可以做更多： - 讀取/更新 API 路線並使用 Wing Simulator 檢查它。 - 使用後端獲取值。 - 使用`@winglibs/websockets`同步瀏覽器，它在後端部署一個 WebSocket 伺服器，您可以連接此 WebSocket 來接收即時通知。 您可以閱讀完整的逐步指南，以了解[如何使用 React 作為前端和 Wing 作為後端建立簡單的 Web 應用程式](https://www.winglang.io/docs/guides/react-vite-websockets)。測試是使用 Wing Simulator 完成的，並使用 Terraform 部署到 AWS。 部署後的AWS架構是這樣的。  為了提供開發者選擇和更好的體驗，Wing 推出了對[TypeScript (Wing)](https://www.winglang.io/docs/typescript/)等其他語言的全面支援。唯一強制性的事情是您必須安裝 Wing SDK。 這也將使控制台完全可用於本地偵錯和測試，而無需學習 Wing 語言。 Wing 甚至還有其他[指南](https://www.winglang.io/docs/category/guides)，因此更容易遵循。  您可以閱讀[文件](https://www.winglang.io/docs)並查看[範例](https://www.winglang.io/docs/category/examples)。 您也可以在[Playground](https://www.winglang.io/play/?code=LwAvACAAVABoAGkAcwAgAGkAcwAgAHQAaABlACAAaQBtAHAAbwByAHQAIABzAHQAYQB0AGUAbQBlAG4AdAAgAGkAbgAgAFcAaQBuAGcALgAKAC8ALwAgAEgAZQByAGUAIAB3AGUAIABiAHIAaQBuAGcAIAB0AGgAZQAgAFcAaQBuAGcAIABzAHQAYQBuAGQAYQByAGQAIABsAGkAYgByAGEAcgB5ACAAdABoAGEAdAAgAAoALwAvACAAYwBvAG4AdABhAGkAbgBzACAAYQBiAHMAdAByAGEAYwB0AGkAbwBuAHMAIABvAGYAIABwAG8AcAB1AGwAYQByACAAYwBsAG8AdQBkACAAcwBlAHIAdgBpAGMAZQBzAC4ACgBiAHIAaQBuAGcAIABjAGwAbwB1AGQAOwAKAAoALwAvACAAVABoAGkAcwAgAGMAbwBkAGUAIABkAGUAZgBpAG4AZQBzACAAYQAgAGIAdQBjAGsAZQB0ACAAYQBzACAAcABhAHIAdAAgAG8AZgAgAHkAbwB1AHIAIABhAHAAcAAuAAoALwAvACAAVwBoAGUAbgAgAGMAbwBtAHAAaQBsAGkAbgBnACAAdABvACAAYQAgAHMAcABlAGMAaQBmAGkAYwAgAGMAbABvAHUAZAAgAHAAcgBvAHYAaQBkAGUAcgAKAC8ALwAgAGkAdAAgAHcAaQBsAGwAIABiAGUAIABzAHUAYgBzAHQAaQB0AHUAdABlAGQAIABiAHkAIABhAG4AIABpAG0AcABsAGUAbQBlAG4AdABhAHQAaQBvAG4AIABmAG8AcgAKAC8ALwAgAHQAaABhAHQAIABjAGwAbwB1AGQALgAgAEkALgBlACwAIABmAG8AcgAgAEEAVwBTACAAaQB0ACAAdwBpAGwAbAAgAGIAZQAgAGEAbgAgAFMAMwAgAEIAdQBjAGsAZQB0AC4ACgBsAGUAdAAgAGIAdQBjAGsAZQB0ACAAPQAgAG4AZQB3ACAAYwBsAG8AdQBkAC4AQgB1AGMAawBlAHQAKAApADsACgAKAC8ALwAgACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAKAC8ALwAgAFkAbwB1ACAAYwBhAG4AIABpAG4AdABlAHIAYQBjAHQAIAB3AGkAdABoACAAdABoAGUAIABhAHAAcAAgAGkAbgAgAHQAaABlACAAYwBvAG4AcwBvAGwAZQAgAC0ALQA%2BAAoALwAvACAACgAvAC8AIABDAGwAaQBjAGsAIABvAG4AIAB0AGgAZQAgAEYAdQBuAGMAdABpAG8AbgAsACAAYQBuAGQAIAB0AGgAZQBuACAAaQBuAHYAbwBrAGUAIABpAHQAIABpAG4AIAB0AGgAZQAKAC8ALwAgAGwAbwB3AGUAcgAgAHIAaQBnAGgAdAAgAHAAYQBuAGUAbAAsACAAbwByACAAYwBsAGkAYwBrACAAbwBuACAAdABoAGUAIABCAHUAYwBrAGUAdAAKAC8ALwAgAHQAbwAgAHMAZQBlACAAaQB0AHMAIABjAG8AbgB0AGUAbgB0AHMAIABpAG4AIAB0AGgAZQAgAHAAYQBuAGUAbAAsACAAZQB0AGMALgAKAC8ALwAgACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAKAAoALwAvACAAYABpAG4AZgBsAGkAZwBoAHQAcwBgACAAcgBlAHAAcgBlAHMAZQBuAHQAIABjAG8AZABlACAAdABoAGEAdAAgAHIAdQBuAHMAIABsAGEAdABlAHIALAAgAG8AbgAKAC8ALwAgAG8AdABoAGUAcgAgAG0AYQBjAGgAaQBuAGUAcwAsACAAaQBuAHQAZQByAGEAYwB0AGkAbgBnACAAdwBpAHQAaAAgAGMAYQBwAHQAdQByAGUAZAAgAGQAYQB0AGEAIABhAG4AZAAKAC8ALwAgAHIAZQBzAG8AdQByAGMAZQBzACAAZgByAG8AbQAgAHQAaABlACAAcAByAGUALQBmAGwAaQBnAGgAdAAgAHAAaABhAHMAZQAuAAoAbABlAHQAIABoAGUAbABsAG8AXwB3AG8AcgBsAGQAIAA9ACAAaQBuAGYAbABpAGcAaAB0ACAAKAApACAAPQA%2BACAAewAKACAAIABiAHUAYwBrAGUAdAAuAHAAdQB0ACgAIgBoAGUAbABsAG8ALgB0AHgAdAAiACwAIAAiAEgAZQBsAGwAbwAsACAAVwBvAHIAbABkACEAIgApADsACgB9ADsACgAKAC8ALwAgAEkAbgBmAGwAaQBnAGgAdABzACAAYwBhAG4AIABiAGUAIABkAGUAcABsAG8AeQBlAGQAIABhAHMAIABzAGUAcgB2AGUAcgBsAGUAcwBzACAAZgB1AG4AYwB0AGkAbwBuAHMACgBuAGUAdwAgAGMAbABvAHUAZAAuAEYAdQBuAGMAdABpAG8AbgAoAGgAZQBsAGwAbwBfAHcAbwByAGwAZAApADsACgAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAACgAvAC8AIACRISAAUwB3AGkAdABjAGgAIABmAGkAbABlAHMAIABhAG4AZAAgAHMAZQBlACAAbwB0AGgAZQByACAAZQB4AGEAbQBwAGwAZQBzACAAdwBpAHQAaAAgAG0AbwByAGUACgAvAC8AIABlAHgAcABsAGUAbgBhAHQAaQBvAG4AcwAgAGEAYgBvAHYAZQAuAA%3D%3D)中使用 Wing 查看結構和範例。 如果你比較像輔導員。看這個！ https://www.youtube.com/watch?v=wzqCXrsKWbo Wing 在 GitHub 上擁有超過 3500 個 Star，發布了 1500 多個版本，但仍未進入 v1 版本，這意味著意義重大。 去嘗試一下，做一些很酷的事情吧！ https://git.new/wing-repo 星翼 ⭐️ --- 開發者生態系統不斷發展，許多開發者圍繞 React 建置了一些獨特的東西。 我不會介紹如何使用 React，因為這是一個非常廣泛的主題，我在最後貼了一些資源來幫助您學習 React。 但為了幫助您建立出色的 React 專案，我們介紹了 25 個開源專案，您可以使用它們來使您的工作更輕鬆。 這將有大量的資源、想法和概念。 我甚至會給你一些學習資源，以及一些產品的專案範例來學習 React。 一切都是免費的，而且只有 React。 讓我們涵蓋這一切！ --- 1. [Mantine Hooks](https://www.npmjs.com/package/@mantine/hooks) - 用於狀態和 UI 管理的 React hooks。 --------------------------------------------------------------------------------------------  這可能不是專門針對 React 的，但是您可以使用這些鉤子來使您的工作更輕鬆。這些鉤子隨時可用，每個鉤子都有許多選項。 如果我必須評價的話，這將是每個人都可以使用的最有用的專案，而不是從頭開始編寫程式碼。 相信我，獲得 60 多個 Hooks 是一件大事，因為他們有一個簡單的方法讓您可以透過簡單的文件查看每個 Hooks 的演示。 開始使用以下 npm 指令。 ``` npm install @mantine/hooks ``` 這就是如何使用`useScrollIntoView`作為 mantine 掛鉤的一部分。 ``` import { useScrollIntoView } from '@mantine/hooks'; import { Button, Text, Group, Box } from '@mantine/core'; function Demo() { const { scrollIntoView, targetRef } = useScrollIntoView<HTMLDivElement>({ offset: 60, }); return ( <Group justify="center"> <Button onClick={() => scrollIntoView({ alignment: 'center', }) } > Scroll to target </Button> <Box style={{ width: '100%', height: '50vh', backgroundColor: 'var(--mantine-color-blue-light)', }} /> <Text ref={targetRef}>Hello there</Text> </Group> ); } ``` 它們幾乎擁有從本地儲存到分頁、滾動視圖、交叉點，甚至一些非常酷的實用程式（例如滴管和文字選擇）的所有功能。這實在太有幫助了！  您可以閱讀[文件](https://mantine.dev/hooks/use-click-outside/)。 如果您正在尋找更多選項，您也可以使用[替代庫](https://antonioru.github.io/beautiful-react-hooks/)。 他們在 GitHub 上擁有超過 23k star，但這不僅僅是為了 hooks，因為他們是 React 的元件庫。 隨著`v7`版本的發布，它的每週下載量已超過 38 萬次，這表明它們正在不斷改進且值得信賴。 https://github.com/mantinedev/mantine Star Mantine Hooks ⭐️ --- 2. [React Grid Layout](https://github.com/react-grid-layout/react-grid-layout) - 可拖曳且可調整大小的網格佈局，具有響應式斷點。 --------------------------------------------------------------------------------------------------------  React-Grid-Layout 是專為 React 應用程式建構的響應式網格佈局系統。 透過支援可拖曳、可調整大小和靜態小部件，它提供了使用網格的簡單解決方案。 與 Packery 或 Gridster 等類似系統不同，React-Grid-Layout 不含 jQuery，確保輕量級且高效的實作。 它與伺服器渲染應用程式的無縫整合以及序列化和恢復佈局的能力使其成為開發人員在 React 專案中使用網格佈局的寶貴工具。 開始使用以下 npm 指令。 ``` npm install react-grid-layout ``` 這就是如何使用響應式網格佈局。 ``` import { Responsive as ResponsiveGridLayout } from "react-grid-layout"; class MyResponsiveGrid extends React.Component { render() { // {lg: layout1, md: layout2, ...} const layouts = getLayoutsFromSomewhere(); return ( <ResponsiveGridLayout className="layout" layouts={layouts} breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }} cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} > <div key="1">1</div> <div key="2">2</div> <div key="3">3</div> </ResponsiveGridLayout> ); } } ``` 您可以閱讀[文件](https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#installation)並查看[演示](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html)。有一系列[演示](https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#demos)，甚至可以透過點擊“查看下一個範例”來獲得。 您也可以嘗試[codesandbox](https://codesandbox.io/p/devbox/github/gilbarbara/react-joyride-demo/tree/main/?embed=1)上的東西。 該專案在 GitHub 上有超過 19k+ 的星星，有超過 16k+ 的開發者使用，並且[npm 套件](https://www.npmjs.com/package/react-grid-layout)的每週下載量超過 600k+。 https://github.com/react-grid-layout/react-grid-layout 明星 React 網格佈局 ⭐️ --- 3. [React Spectrum](https://github.com/adobe/react-spectrum) - 提供出色使用者體驗的程式庫和工具的集合。 -----------------------------------------------------------------------------------  React Spectrum 是一個庫和工具的集合，可幫助您建立自適應、可存取且強大的使用者體驗。 它們提供了太多的東西，以至於很難在一篇文章中涵蓋所有內容。 總的來說，他們提供了這四個庫。  - [反應譜](https://react-spectrum.adobe.com/react-spectrum/index.html) - [React Stately](https://react-spectrum.adobe.com/react-stately/index.html) - 一組龐大的 React Hooks，為您的設計系統提供跨平台狀態管理。 - [反應詠嘆調](https://react-spectrum.adobe.com/react-aria/index.html) - [國際化](https://react-spectrum.adobe.com/internationalized/index.html) 我們將了解一些有關 React Aria 的內容，它是一個無樣式 React 元件和鉤子庫，可幫助您為應用程式建立可存取的、高品質的 UI 元件。 它經過了各種設備、互動方式和輔助技術的精心測試，以確保為所有用戶提供最佳體驗。 開始使用以下 npm 指令。 ``` npm i react-aria-components ``` 這就是建立自訂`select`的方法。 ``` import {Button, Label, ListBox, ListBoxItem, Popover, Select, SelectValue} from 'react-aria-components'; <Select> <Label>Favorite Animal</Label> <Button> <SelectValue /> <span aria-hidden="true">▼</span> </Button> <Popover> <ListBox> <ListBoxItem>Cat</ListBoxItem> <ListBoxItem>Dog</ListBoxItem> <ListBoxItem>Kangaroo</ListBoxItem> </ListBox> </Popover> </Select> ``` 相信我，出於學習目的，這是一座金礦。  他們使用自己強大的[40 多個樣式元件](https://opensource.adobe.com/spectrum-css/)，這比通常提供的要多得多。他們也有自己的一套[設計系統，](https://spectrum.adobe.com/)例如字體、UI、版面、動作等等。   您可以詳細了解[Spectrum](https://react-spectrum.adobe.com/index.html)及其[架構](https://react-spectrum.adobe.com/architecture.html)。 他們在 GitHub 上擁有超過 11,000 顆星，這表明了他們的質量，儘管他們並不廣為人知。研究它們可以為您建立圖書館提供寶貴的見解。 https://github.com/adobe/react-spectrum Star React Spectrum ⭐️ --- 4.[保留 React](https://github.com/StaticMania/keep-react) - Tailwind CSS 和 React.js 的 UI 元件庫。 -------------------------------------------------------------------------------------------  Keep React 是一個基於 Tailwind CSS 和 React.js 建立的開源元件庫。它提供了一組多功能的預先設計的 UI 元件，使開發人員能夠簡化現代、響應式且具有視覺吸引力的 Web 應用程式的建立。 開始使用以下 npm 指令。 ``` npm i keep-react ``` 這就是使用時間軸的方法。 ``` "use client"; import { Timeline } from "keep-react"; import { CalendarBlank } from "phosphor-react"; export const TimelineComponent = () => { return ( <Timeline horizontal={true}> <Timeline.Item> <Timeline.Point icon={<CalendarBlank size={16} />} /> <Timeline.Content> <Timeline.Title>Keep Library v1.0.0</Timeline.Title> <Timeline.Time>Released on December 2, 2021</Timeline.Time> <Timeline.Body> Get started with dozens of web components and interactive elements. </Timeline.Body> </Timeline.Content> </Timeline.Item> <Timeline.Item> <Timeline.Point icon={<CalendarBlank size={16} />} /> <Timeline.Content> <Timeline.Title>Keep Library v1.1.0</Timeline.Title> <Timeline.Time>Released on December 23, 2021</Timeline.Time> <Timeline.Body> Get started with dozens of web components and interactive elements. </Timeline.Body> </Timeline.Content> </Timeline.Item> <Timeline.Item> <Timeline.Point icon={<CalendarBlank size={16} />} /> <Timeline.Content> <Timeline.Title>Keep Library v1.3.0</Timeline.Title> <Timeline.Time>Released on January 5, 2022</Timeline.Time> <Timeline.Body> Get started with dozens of web components and interactive elements. </Timeline.Body> </Timeline.Content> </Timeline.Item> </Timeline> ); } ``` 輸出如下。  流暢的小動畫讓這一切都是值得的，如果你想快速建立一個 UI，沒有任何麻煩，你可以使用它。   您可以閱讀[文件](https://react.keepdesign.io/docs/getting-started/Introduction)並查看[故事書](https://react-storybook.keepdesign.io/?path=/docs/components-accordion--docs)以進行詳細的使用測驗。 該專案在 GitHub 上有超過 1000 顆星，而且它的一些元件使用起來非常方便。 https://github.com/StaticMania/keep-react Star Keep React ⭐️ --- 5. [React Content Loader](https://github.com/danilowoz/react-content-loader) - SVG 支援的元件，可輕鬆建立骨架載入。 ---------------------------------------------------------------------------------------------------  該專案為您提供了一個由 SVG 驅動的元件，可以輕鬆建立佔位符載入（如 Facebook 的卡片載入）。 在載入狀態期間使用骨架來向使用者指示內容仍在載入。 總的來說，這是一個非常方便的專案，可以增強整體使用者體驗。 開始使用以下 npm 指令。 ``` npm i react-content-loader --save ``` 您可以這樣使用它。 ``` import React from "react" import ContentLoader from "react-content-loader" const MyLoader = (props) => ( <ContentLoader speed={2} width={400} height={160} viewBox="0 0 400 160" backgroundColor="#f3f3f3" foregroundColor="#ecebeb" {...props} > <rect x="48" y="8" rx="3" ry="3" width="88" height="6" /> <rect x="48" y="26" rx="3" ry="3" width="52" height="6" /> <rect x="0" y="56" rx="3" ry="3" width="410" height="6" /> <rect x="0" y="72" rx="3" ry="3" width="380" height="6" /> <rect x="0" y="88" rx="3" ry="3" width="178" height="6" /> <circle cx="20" cy="20" r="20" /> </ContentLoader> ) export default MyLoader ```  您甚至可以拖曳單一骨架或使用為 Facebook 和 Instagram 等不同社群媒體預先定義的骨架。 您可以閱讀[文件](https://github.com/danilowoz/react-content-loader?tab=readme-ov-file#gettingstarted)並查看[演示](https://skeletonreact.com/)。 該專案在 GitHub 上擁有 13k+ Stars，並在 GitHub 上有 45k+ 開發人員使用。 https://github.com/danilowoz/react-content-loader Star React 內容載入器 ⭐️ --- 6. [React PDF](https://github.com/diegomura/react-pdf) - 使用 React 建立 PDF 檔案。 ----------------------------------------------------------------------------  該套件用於使用 React 建立 PDF。 開始使用以下 npm 指令。 ``` npm install @react-pdf/renderer --save ``` 您可以這樣使用它。 ``` import React from 'react'; import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'; // Create styles const styles = StyleSheet.create({ page: { flexDirection: 'row', backgroundColor: '#E4E4E4', }, section: { margin: 10, padding: 10, flexGrow: 1, }, }); // Create Document Component const MyDocument = () => ( <Document> <Page size="A4" style={styles.page}> <View style={styles.section}> <Text>Section #1</Text> </View> <View style={styles.section}> <Text>Section #2</Text> </View> </Page> </Document> ); ```   您可以閱讀[文件](https://react-pdf.org/)並查看[演示](https://react-pdf.org/repl)。 React-pdf 現在提供了一個名為`usePDF`的鉤子，可以透過 React hook API 存取所有 PDF 建立功能。如果您需要更多控製文件的呈現方式或更新頻率，這非常有用。 ``` const [instance, update] = usePDF({ document }); ``` 該專案在 GitHub 上有 13k+ Stars，有超過 270 個版本，[每週下載量超過 400k](https://www.npmjs.com/package/@react-pdf/renderer) ，這是一個好兆頭。 https://github.com/diegomura/react-pdf Star React PDF ⭐️ --- 7. [Recharts](https://github.com/recharts/recharts) - 使用 React 和 D3 建立的重新定義的圖表庫。 --------------------------------------------------------------------------------  該庫的主要目的是幫助您輕鬆地在 React 應用程式中編寫圖表。 Recharts 的主要原則是。 1. 只需使用 React 元件進行部署即可。 2. 原生 SVG 支持，輕量級，僅依賴一些 D3 子模組。 3. 聲明性元件、圖表元件純粹是表示性的。 開始使用以下 npm 指令。 ``` npm install recharts ``` 您可以這樣使用它。 ``` <LineChart width={500} height={300} data={data} accessibilityLayer> <XAxis dataKey="name"/> <YAxis/> <CartesianGrid stroke="#eee" strokeDasharray="5 5"/> <Line type="monotone" dataKey="uv" stroke="#8884d8" /> <Line type="monotone" dataKey="pv" stroke="#82ca9d" /> <Tooltip/> </LineChart> ```  您可以閱讀[文件](https://recharts.org/en-US/guide)並查看有關[Storybook](https://recharts.org/en-US/storybook)的更多資訊。 他們提供了大量的選項來自訂它，這就是開發人員喜歡它的原因。他們也提供一般常見問題的[wiki](https://github.com/recharts/recharts/wiki)頁面。 您也可以在此處的codesandbox 上嘗試。 https://codesandbox.io/embed/kec3v?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.tsx 該專案在 GitHub 上有 22k+ Stars，有 200k+ 開發人員使用。 https://github.com/recharts/recharts 明星 Recharts ⭐️ --- 8. [React Joyride](https://github.com/gilbarbara/react-joyride) - 在您的應用程式中建立導遊。 -------------------------------------------------------------------------------   導覽是向新用戶展示您的應用程式或解釋新功能的絕佳方式。它改善了用戶體驗並可以創造個人化的觸感。 開始使用以下 npm 指令。 ``` npm i react-joyride ``` 您可以這樣使用它。 ``` import React, { useState } from 'react'; import Joyride from 'react-joyride'; /* * If your steps are not dynamic you can use a simple array. * Otherwise you can set it as a state inside your component. */ const steps = [ { target: '.my-first-step', content: 'This is my awesome feature!', }, { target: '.my-other-step', content: 'This another awesome feature!', }, ]; export default function App() { // If you want to delay the tour initialization you can use the `run` prop return ( <div> <Joyride steps={steps} /> ... </div> ); } ``` 它們還提供[元件列表](https://docs.react-joyride.com/custom-components)以及自訂預設用戶介面的簡單方法。 您可以閱讀[文件](https://docs.react-joyride.com/)並查看[演示](https://react-joyride.com/)。 您也可以嘗試[codesandbox](https://codesandbox.io/p/devbox/github/gilbarbara/react-joyride-demo/tree/main/?embed=1)上的東西。 他們在 GitHub 上有超過 6k 顆星，npm 套件每週下載量超過 25 萬次。 https://github.com/gilbarbara/react-joyride Star React Joyride ⭐️ --- 9. [SVGR](https://github.com/gregberge/svgr) - 將 SVG 轉換為 React 元件。 ------------------------------------------------------------------  SVGR 是一個將 SVG 轉換為 React 元件的通用工具。 它需要一個原始的 SVG 並將其轉換為隨時可用的 React 元件。 開始使用以下 npm 指令。 ``` npm install @svgr/core ``` 例如，您採用這個 SVG。 ``` <?xml version="1.0" encoding="UTF-8"?> <svg width="48px" height="1px" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch --> <title>Rectangle 5</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="19-Separator" transform="translate(-129.000000, -156.000000)" fill="#063855" > <g id="Controls/Settings" transform="translate(80.000000, 0.000000)"> <g id="Content" transform="translate(0.000000, 64.000000)"> <g id="Group" transform="translate(24.000000, 56.000000)"> <g id="Group-2"> <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect> </g> </g> </g> </g> </g> </g> </svg> ``` 執行SVGR後，將轉換為. ``` import * as React from 'react' const SvgComponent = (props) => ( <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}> <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" /> </svg> ) export default SvgComponent ``` 它使用[SVGO](https://github.com/svg/svgo)優化 SVG，並使用 Prettier 格式化程式碼。 將 HTML 轉換為 JSX 需要幾個步驟： 1. 將 SVG 轉換為 HAST (HTML AST) 2. 將 HAST 轉換為 Babel AST (JSX AST) 3. 使用 Babel 轉換 AST（重新命名屬性、更改屬性值…） 您可以在[Playground](https://react-svgr.com/playground/)閱讀[文件](https://react-svgr.com/docs/getting-started)並檢查內容。 該專案在 GitHub 上擁有 10k+ Stars，有超過 800 萬開發者使用，npm 上每週下載量超過 800k。 https://github.com/gregberge/svgr 明星 SVGR ⭐️ --- 10. [React Sortable Tree](https://github.com/frontend-collective/react-sortable-tree) - 用於巢狀資料和層次結構的拖放可排序元件。 ------------------------------------------------------------------------------------------------------------  一個 React 元件，支援對分層資料進行拖放排序。  開始使用以下 npm 指令。 ``` npm install react-sortable-tree --save ``` 您可以這樣使用它。 ``` import React, { Component } from 'react'; import SortableTree from 'react-sortable-tree'; import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app export default class Tree extends Component { constructor(props) { super(props); this.state = { treeData: [ { title: 'Chicken', children: [{ title: 'Egg' }] }, { title: 'Fish', children: [{ title: 'fingerline' }] }, ], }; } render() { return ( <div style={{ height: 400 }}> <SortableTree treeData={this.state.treeData} onChange={treeData => this.setState({ treeData })} /> </div> ); } } ``` 檢查由此獲得的各種[道具選項](https://github.com/frontend-collective/react-sortable-tree?tab=readme-ov-file#props)和[主題](https://github.com/frontend-collective/react-sortable-tree?tab=readme-ov-file#featured-themes)。 您可以閱讀[文件](https://github.com/frontend-collective/react-sortable-tree?tab=readme-ov-file#getting-started)並查看[Storybook](https://frontend-collective.github.io/react-sortable-tree/?path=/story/basics--minimal-implementation) ，以獲取一些基本和高級功能的演示。 它可能不會被積極維護（仍然沒有存檔），因此您也可以使用[維護的 fork 版本](https://github.com/nosferatu500/react-sortable-tree)。 該專案在 GitHub 上擁有超過 4,500 個 Star，並被超過 5,000 名開發人員使用。 https://github.com/frontend-collective/react-sortable-tree Star React 可排序樹 ⭐️ --- 11. [React Hot Toast](https://github.com/timolins/react-hot-toast) - 冒煙的 Hot React 通知。 --------------------------------------------------------------------------------------  React Hot Toast 透過簡單的自訂選項提供了驚人的 🔥 預設體驗。它利用 Promise API 進行自動加載，確保平穩過渡。 它重量輕，不到 5kb，但仍然可以存取，同時為開發人員提供了像`useToaster()`這樣的無頭鉤子。 首先將 Toaster 加入到您的應用程式中。它將負責渲染發出的所有通知。現在您可以從任何地方觸發 toast() ！ 開始使用以下 npm 指令。 ``` npm install react-hot-toast ``` 這就是它的易用性。 ``` import toast, { Toaster } from 'react-hot-toast'; const notify = () => toast('Here is your toast.'); const App = () => { return ( <div> <button onClick={notify}>Make me a toast</button> <Toaster /> </div> ); }; ```   他們有很多自訂選項，但`useToaster()`掛鉤為您提供了一個無頭系統，可以為您管理通知狀態。這使得建立您的通知系統變得更加容易。 您可以閱讀[文件](https://react-hot-toast.com/docs)、[樣式指南](https://react-hot-toast.com/docs/styling)並查看[示範](https://react-hot-toast.com/)。 該專案在 GitHub 上有 8k+ Stars，有 230k+ 開發者使用。 https://github.com/timolins/react-hot-toast Star React Hot Toast ⭐️ --- 12. [Payload](https://github.com/payloadcms/payload) - 建立現代後端+管理 UI 的最佳方式。 --------------------------------------------------------------------------  Payload 是一個無頭 CMS 和應用程式框架。它旨在促進您的開發過程，但重要的是，當您的應用程式變得更加複雜時，不要妨礙您。 Payload 沒有黑魔法，完全開源，它既是一個應用程式框架，也是一個無頭 CMS。它確實是適用於 TypeScript 的 Rails，並且您會獲得一個管理面板。您可以使用此[YouTube 影片](https://www.youtube.com/watch?v=In_lFhzmbME)了解有關 Payload 的更多資訊。 https://www.youtube.com/watch?v=In\_lFhzmbME 您可以透過使用Payload來了解[其中涉及的概念](https://payloadcms.com/docs/getting-started/concepts)。  有效負載透過您選擇的資料庫適配器與您的資料庫進行互動。目前，Payload 正式支援兩種資料庫適配器： 1. MongoDB 與 Mongoose 2. Postgres 帶毛毛雨 開始使用以下命令。 ``` npx create-payload-app@latest ``` 您必須產生 Payload 金鑰並更新`server.ts`以初始化 Payload。 ``` import express from 'express' import payload from 'payload' require('dotenv').config() const app = express() const start = async () => { await payload.init({ secret: process.env.PAYLOAD_SECRET, express: app, }) app.listen(3000, async () => { console.log( "Express is now listening for incoming connections on port 3000." ) }) } start() ```  您可以閱讀[文件](https://payloadcms.com/docs/getting-started/what-is-payload)並查看[演示](https://demo.payloadcms.com/?_gl=1*9x0za3*_ga*NzEzMzkwNzIuMTcxMDE2NDk1MA..*_ga_FLQ5THRMZQ*MTcxMDE2NDk1MC4xLjEuMTcxMDE2NDk1MS4wLjAuMA..)。 他們還提供與 Payload + Stripe 無縫整合的[電子商務模板](https://github.com/payloadcms/payload/tree/main/templates/ecommerce)。此範本具有令人驚嘆的、功能齊全的前端，包括購物車、結帳流程、訂單管理等元件。 Payload 在 GitHub 上擁有 18k+ Stars，並且有超過 290 個版本，因此它們不斷改進，尤其是在資料庫支援方面。 https://github.com/payloadcms/payload 明星有效負載 ⭐️ --- 13. [React Player](https://github.com/cookpete/react-player) - 用於播放各種 URL 的 React 元件。 -------------------------------------------------------------------------------------  用於播放各種 URL 的 React 元件，包括檔案路徑、YouTube、Facebook、Twitch、SoundCloud、Streamable、Vimeo、Wistia、Mixcloud、DailyMotion 和 Kaltura。您可以看到[支援的媒體](https://github.com/cookpete/react-player?tab=readme-ov-file#supported-media)清單。 ReactPlayer 的維護工作由 Mux 接管，這使它們成為一個不錯的選擇。 開始使用以下 npm 指令。 ``` npm install react-player ``` 您可以這樣使用它。 ``` import React from 'react' import ReactPlayer from 'react-player' // Render a YouTube video player <ReactPlayer url='https://www.youtube.com/watch?v=LXb3EKWsInQ' /> // If you only ever use one type, use imports such as react-player/youtube to reduce your bundle size. // like this: import ReactPlayer from 'react-player/youtube' ``` 您也可以使用`react-player/lazy`為您傳入的URL 延遲載入適當的播放器。這會為您的輸出加入幾個reactPlayer 區塊，但會減少主包的大小。 ``` import React from 'react' import ReactPlayer from 'react-player/lazy' // Lazy load the YouTube player <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' /> ``` 您可以閱讀[文件](https://github.com/cookpete/react-player?tab=readme-ov-file#props)並查看[演示](https://cookpete.github.io/react-player/)。他們提供了大量的選項，包括加入字幕並以簡單的方式使其響應。 它們在 GitHub 上擁有超過 8000 顆星，被超過 135,000 名開發人員使用，並且 npm 軟體包[每週的下載量超過 800k](https://www.npmjs.com/package/react-player) 。 https://github.com/cookpete/react-player 明星 React 播放器 ⭐️ --- 14. [Victory](https://github.com/FormidableLabs/victory) - 用於建立互動式資料視覺化的 React 元件。 ----------------------------------------------------------------------------------  Victory 是一個可組合 React 元件的生態系統，用於建立互動式資料視覺化。  開始使用以下 npm 指令。 ``` npm i --save victory ``` 您可以這樣使用它。 ``` <VictoryChart domainPadding={{ x: 20 }} > <VictoryHistogram style={{ data: { fill: "#c43a31" } }} data={sampleHistogramDateData} bins={[ new Date(2020, 1, 1), new Date(2020, 4, 1), new Date(2020, 8, 1), new Date(2020, 11, 1) ]} /> </VictoryChart> ``` 這就是它的渲染方式。他們還提供通常有用的動畫和主題選項。  您可以閱讀[文件](https://commerce.nearform.com/open-source/victory/docs)並按照[教學](https://commerce.nearform.com/open-source/victory/docs/native)開始。他們提供大約 15 種不同的圖表選項。 它也可用於[React Native（文件）](https://commerce.nearform.com/open-source/victory/docs/native) ，所以這是一個優點。我還建議您查看他們的常見[問題解答](https://commerce.nearform.com/open-source/victory/docs/faq#frequently-asked-questions-faq)，其中描述了常見問題的程式碼解決方案和解釋，例如樣式、註釋（標籤）、處理軸。 該專案在 GitHub 上擁有 10k+ Stars，並在 GitHub 上有 23k+ 開發人員使用。 https://github.com/FormidableLabs/victory 勝利之星 ⭐️ --- 15. [React Slick](https://github.com/akiran/react-slick) - React 輪播元件。 ----------------------------------------------------------------------  React Slick 是一個使用 React 建構的輪播元件。它是一個光滑的旋轉木馬的反應端口 開始使用以下 npm 指令。 ``` npm install react-slick --save ``` 這是使用自訂分頁的方法。 ``` import React, { Component } from "react"; import Slider from "react-slick"; import { baseUrl } from "./config"; function CustomPaging() { const settings = { customPaging: function(i) { return ( <a> <img src={`${baseUrl}/abstract0${i + 1}.jpg`} /> </a> ); }, dots: true, dotsClass: "slick-dots slick-thumb", infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( <div className="slider-container"> <Slider {...settings}> <div> <img src={baseUrl + "/abstract01.jpg"} /> </div> <div> <img src={baseUrl + "/abstract02.jpg"} /> </div> <div> <img src={baseUrl + "/abstract03.jpg"} /> </div> <div> <img src={baseUrl + "/abstract04.jpg"} /> </div> </Slider> </div> ); } export default CustomPaging; ```  您可以閱讀有關可用的[prop 選項](https://react-slick.neostack.com/docs/api)和[方法](https://react-slick.neostack.com/docs/api#methods)的資訊。 您可以閱讀[文件](https://react-slick.neostack.com/docs/get-started)和所有帶有程式碼和輸出[的範例集](https://react-slick.neostack.com/docs/example/)。 他們在 GitHub 上有超過 11k 顆星，並且有超過 36 萬開發者在 GitHub 上使用它。 https://github.com/akiran/react-slick Star React Slick ⭐️ --- 16. [Medusa](https://github.com/medusajs/medusa) - 數位商務的建構模組。 -------------------------------------------------------------  Medusa 是一組商務模組和工具，可讓您建立豐富、可靠且高效能的商務應用程式，而無需重新發明核心商務邏輯。 這些模組可以客製化並用於建立高級電子商務商店、市場或任何需要基礎商務原語的產品。所有模組都是開源的，可以在 npm 上免費取得。 開始使用以下 npm 指令。 ``` npm install medusa-react @tanstack/[email protected] @medusajs/medusa ``` 將其包含在`app.ts`中。 只有 MedusaProvider 的子級才能從其鉤子中受益。因此，Storefront 元件及其子元件現在可以使用 Medusa React 公開的鉤子。 ``` import { MedusaProvider } from "medusa-react" import Storefront from "./Storefront" import { QueryClient } from "@tanstack/react-query" import React from "react" const queryClient = new QueryClient() const App = () => { return ( <MedusaProvider queryClientProviderProps={{ client: queryClient }} baseUrl="http://localhost:9000" > <Storefront /> </MedusaProvider> ) } export default App ``` 例如，這就是您如何使用突變來建立購物車。 ``` import { useCreateCart } from "medusa-react" const Cart = () => { const createCart = useCreateCart() const handleClick = () => { createCart.mutate({}) // create an empty cart } return ( <div> {createCart.isLoading && <div>Loading...</div>} {!createCart.data?.cart && ( <button onClick={handleClick}> Create cart </button> )} {createCart.data?.cart?.id && ( <div>Cart ID: {createCart.data?.cart.id}</div> )} </div> ) } export default Cart ``` 他們提供了一套電子商務模組（大量選項），例如折扣、價目表、禮品卡等。  它們還提供了一種簡單的管理員和客戶身份驗證方法，您可以在[文件](https://docs.medusajs.com/)中閱讀。 他們提供了[nextjs 入門模板](https://docs.medusajs.com/starters/nextjs-medusa-starter)和[Medusa React](https://docs.medusajs.com/medusa-react/overview)作為 SDK。 該專案在 GitHub 上有 22k+ Stars，有 4k+ 開發者使用。 https://github.com/medusajs/medusa 明星美杜莎 ⭐️ --- 17. [React Markdown](https://github.com/remarkjs/react-markdown) - React 的 Markdown 元件. ---------------------------------------------------------------------------------------  Markdown 至關重要，使用 React 渲染它對於各種場景都非常有用。 它提供了一個 React 元件，能夠安全地將一串 Markdown 渲染到 React 元素中。您可以透過傳遞外掛程式並指定要使用的元件而不是標準 HTML 元素來自訂 Markdown 的轉換。 開始使用以下 npm 指令。 ``` npm i react-markdown ``` 您可以這樣使用它。 ``` import React from 'react' import {createRoot} from 'react-dom/client' import Markdown from 'react-markdown' import remarkGfm from 'remark-gfm' const markdown = `Just a link: www.nasa.gov.` createRoot(document.body).render( <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown> ) ``` 等效的 JSX 是。 ``` <p> Just a link: <a href="http://www.nasa.gov">www.nasa.gov</a>. </p> ``` 他們還提供了一份[備忘錄](https://commonmark.org/help/)和一個十分鐘的逐步[教學](https://commonmark.org/help/tutorial/)。  您可以閱讀[文件](https://github.com/remarkjs/react-markdown?tab=readme-ov-file#install)並查看[演示](https://remarkjs.github.io/react-markdown/)。 該專案在 GitHub 上有 12k+ Stars，[每週下載量超過 2700k](https://www.npmjs.com/package/react-markdown) ，並被 200k+ 開發人員使用，證明了它的真正有用性。 https://github.com/remarkjs/react-markdown Star React Markdown ⭐️ --- 18. [React JSONSchema Form](https://github.com/rjsf-team/react-jsonschema-form) - 用於從 JSON Schema 建立 Web 表單。 ------------------------------------------------------------------------------------------------------------  `react-jsonschema-form`會自動從 JSON Schema 產生 React 表單，使其非常適合僅使用 JSON schema 為任何資料產生表單。它提供了像 uiSchema 這樣的自訂選項來自訂預設主題之外的表單外觀。 開始使用以下 npm 指令。 ``` npm install @rjsf/core @rjsf/utils @rjsf/validator-ajv8 --save ``` 您可以這樣使用它。 ``` import { RJSFSchema } from '@rjsf/utils'; import validator from '@rjsf/validator-ajv8'; const schema: RJSFSchema = { title: 'Todo', type: 'object', required: ['title'], properties: { title: { type: 'string', title: 'Title', default: 'A new task' }, done: { type: 'boolean', title: 'Done?', default: false }, }, }; const log = (type) => console.log.bind(console, type); render( <Form schema={schema} validator={validator} onChange={log('changed')} onSubmit={log('submitted')} onError={log('errors')} />, document.getElementById('app') ); ``` 他們提供[高級定制](https://rjsf-team.github.io/react-jsonschema-form/docs/advanced-customization/)選項，包括定制小部件。 您可以閱讀[文件](https://rjsf-team.github.io/react-jsonschema-form/docs/)並查看[即時遊樂場](https://rjsf-team.github.io/react-jsonschema-form/)。 它在 GitHub 上擁有超過 13k 個 Star，並被 5k+ 開發人員使用。他們在`v5`上發布了 190 多個版本，因此他們正在不斷改進。 https://github.com/rjsf-team/react-jsonschema-form Star React JSONSchema 表單 ⭐️ --- 19. [Craft.js](https://github.com/prevwong/craft.js) - 建立可擴充的拖放頁面編輯器。 ---------------------------------------------------------------------  頁面編輯器可以增強使用者體驗，但從頭開始建立頁面編輯器可能會令人望而生畏。現有庫提供具有可編輯元件的預先建置編輯器，但自訂通常需要修改庫本身。 Craft.js 透過模組化頁面編輯器元件、透過拖放功能簡化自訂以及渲染管理來解決這個問題。在 React 中設計你的編輯器，無需複雜的插件系統，專注於你的特定需求和規格。 開始使用以下 npm 指令。 ``` npm install --save @craftjs/core ``` 他們還提供了有關如何入門的[簡短教程](https://craft.js.org/docs/guides/basic-tutorial)。我不會介紹它，因為它非常簡單且詳細。 您可以閱讀[文件](https://craft.js.org/docs/overview)並查看[即時演示](https://craft.js.org/)以及另一個[即時範例](https://craft.js.org/examples/basic)。 它在 GitHub 上有大約 6k+ Stars，但考慮到它們正在改進，仍然很有用。 https://github.com/prevwong/craft.js Star Craft.js ⭐️ --- 20. [Gatsby](https://github.com/gatsbyjs/gatsby) - 最好的基於 React 的框架，具有內建的效能、可擴展性和安全性。 ------------------------------------------------------------------------------------  Gatsby 是一個基於 React 的框架，使開發人員能夠建立閃電般快速的網站和應用程式，將動態渲染的靈活性與靜態網站生成的速度融為一體。 憑藉可自訂的 UI 和對各種資料來源的支援等功能，Gatsby 提供了無與倫比的控制和可擴展性。此外，它還可以自動進行效能最佳化，使其成為靜態網站的首選。 開始使用以下 npm 指令。 ``` npm init gatsby ``` 這就是如何在 Gatsby（反應元件）中使用`Link` 。 ``` import React from "react" import { Link } from "gatsby" const Page = () => ( <div> <p> Check out my <Link to="/blog">blog</Link>! </p> <p> {/* Note that external links still use `a` tags. */} Follow me on <a href="https://twitter.com/gatsbyjs">Twitter</a>! </p> </div> ) ``` 他們提供了一組[入門模板，](https://www.gatsbyjs.com/starters/)其中包含如何使用它、涉及的依賴項以及每個模板的演示。  您可以閱讀有關 Gatsby 的一些[常見概念，](https://www.gatsbyjs.com/docs/conceptual/gatsby-concepts/)例如 React Hydration、Gatsby 建置流程等。 您可以閱讀[文件](https://www.gatsbyjs.com/docs/)並查看入門[教學課程](https://www.gatsbyjs.com/docs/tutorial/)。 Gatsby 在 GitHub 上擁有超過 55,000 顆星，並被超過 240,000 名開發者使用 https://github.com/gatsbyjs/gatsby 明星蓋茲比 ⭐️ --- 21. [Chat UI Kit React](https://github.com/chatscope/chat-ui-kit-react) - 在幾分鐘內使用 React 建立您的聊天 UI。 --------------------------------------------------------------------------------------------------  Chatscope 的聊天 UI 工具包是一個用於開發網頁聊天應用程式的開源 UI 工具包。 儘管該專案並未廣泛使用，但這些功能對於剛剛查看該專案的初學者來說還是很有用的。  開始使用以下 npm 指令。 ``` npm install @chatscope/chat-ui-kit-react ``` 這就是建立 GUI 的方法。 ``` import styles from '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css'; import { MainContainer, ChatContainer, MessageList, Message, MessageInput } from '@chatscope/chat-ui-kit-react'; <div style={{ position:"relative", height: "500px" }}> <MainContainer> <ChatContainer> <MessageList> <Message model={{ message: "Hello my friend", sentTime: "just now", sender: "Joe" }} /> </MessageList> <MessageInput placeholder="Type message here" /> </ChatContainer> </MainContainer> </div> ``` 您可以閱讀[文件](https://chatscope.io/docs/)。 故事書中有更[詳細的文件](https://chatscope.io/storybook/react/?path=/docs/documentation-introduction--docs)。 它提供了一些方便的元件，例如[`TypingIndicator`](https://chatscope.io/storybook/react/?path=/docs/components-typingindicator--docs) 、 [`Multiline Incoming`](https://chatscope.io/storybook/react/?path=/story/components-message--multiline-incoming)等等。 我知道你們中的一些人更喜歡透過部落格來了解整個結構，因此你可以閱讀使用 Chat UI Kit React 的 Rollbar 的[如何將 ChatGPT 與 React 整合](https://rollbar.com/blog/how-to-integrate-chatgpt-with-react/)。 您可以看到的一些演示： - [聊天機器人使用者介面](https://mars.chatscope.io/) - [與朋友聊天](https://chatscope.io/demo/chat-friends/)- 看看這個！  https://github.com/chatscope/chat-ui-kit-react Star Chat UI Kit React ⭐️ --- 22. [Botonic](https://github.com/hubtype/botonic) - 用於建立會話應用程式的 React 框架。 -------------------------------------------------------------------------  Botonic 是一個全端 Javascript 框架，用於建立在多個平台上執行的聊天機器人和現代對話應用程式：Web、行動和訊息應用程式（Messenger、WhatsApp、Telegram 等）。它建構在 ⚛️ React、Serverless 和 Tensorflow.js 之上。 如果您不了解對話應用程式的概念，可以在[官方部落格](https://www.hubtype.com/blog/what-are-conversational-apps)上閱讀它們。 使用 Botonic，您可以建立包含最佳文字外介面（簡單性、自然語言互動）和圖形介面（多媒體、視覺上下文、豐富互動）的會話應用程式。 這是一個強大的組合，可以提供比僅依賴文字和 NLP 的傳統聊天機器人更好的用戶體驗。 這就是 Botonic 的簡單方式。 ``` export default class extends React.Component { static async botonicInit({ input, session, params, lastRoutePath }) { await humanHandOff(session)) } render() { return ( <Text> Thanks for contacting us! One of our agents will attend you as soon as possible. </Text> ) } } ``` 它們也支援 TypeScript，所以這是一個優點。 您可以看到一些使用 Botonic 建置的[範例](https://botonic.io/examples/)及其原始程式碼。 您可以閱讀[文件](https://botonic.io/docs/welcome)以及如何[從頭開始建立會話應用程式](https://botonic.io/docs/create-convapp)。 https://github.com/hubtype/botonic Star Botonic ⭐️ --- 23. [React Flowbite](https://github.com/themesberg/flowbite-react) - 為 Flowbite 和 Tailwind CSS 建構的 React 元件. ------------------------------------------------------------------------------------------------------------  每個人對他們想要用來建立網站的使用者介面都有不同的偏好。 Flowbite React 是 UI 元件的開源集合，在 React 中建置，具有來自 Tailwind CSS 的實用程式類，您可以將其用作使用者介面和網站的起點。 開始使用以下 npm 指令。 ``` npm i flowbite-react ``` 這是一起使用表格和鍵盤元件的方法。 ``` 'use client'; import { Kbd, Table } from 'flowbite-react'; import { MdKeyboardArrowDown, MdKeyboardArrowLeft, MdKeyboardArrowRight, MdKeyboardArrowUp } from 'react-icons/md'; function Component() { return ( <Table> <Table.Head> <Table.HeadCell>Key</Table.HeadCell> <Table.HeadCell>Description</Table.HeadCell> </Table.Head> <Table.Body className="divide-y"> <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800"> <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white"> <Kbd>Shift</Kbd> <span>or</span> <Kbd>Tab</Kbd> </Table.Cell> <Table.Cell>Navigate to interactive elements</Table.Cell> </Table.Row> <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800"> <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white"> <Kbd>Enter</Kbd> or <Kbd>Spacebar</Kbd> </Table.Cell> <Table.Cell>Ensure elements with ARIA role="button" can be activated with both key commands.</Table.Cell> </Table.Row> <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800"> <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white"> <span className="inline-flex gap-1"> <Kbd icon={MdKeyboardArrowUp} /> <Kbd icon={MdKeyboardArrowDown} /> </span> <span> or </span> <span className="inline-flex gap-1"> <Kbd icon={MdKeyboardArrowLeft} /> <Kbd icon={MdKeyboardArrowRight} /> </span> </Table.Cell> <Table.Cell>Choose and activate previous/next tab.</Table.Cell> </Table.Row> </Table.Body> </Table> ); } ```  您可以閱讀[文件](https://www.flowbite-react.com/docs/getting-started/introduction)並查看[Storybook](https://storybook.flowbite-react.com/?path=/story/components-accordion--always-open)中的功能。您也可以查看[元件](https://www.flowbite-react.com/docs/components/accordion)清單。 在我看來，如果您想快速設定 UI，但又不想最終為高品質的開源專案使用預先定義的庫元件，那麼這很好。 該專案在 GitHub 上擁有超過 1,500 顆星，擁有超過 37,000 名開發者的用戶群，並受到社群的廣泛認可和信任，使其成為一個可靠的選擇。 https://github.com/themesberg/flowbite-react Star React Flowbite ⭐️ --- 24. [DND 套件](https://github.com/clauderic/dnd-kit)- 輕量級、高效能、可存取且可擴展的拖放功能。 -------------------------------------------------------------------------  這是一個強大的 React 拖放工具包，擁有可自訂的碰撞檢測、多個啟動器和自動滾動等功能。 它的設計考慮到了 React，提供了方便集成的鉤子，無需進行重大的架構更改。支援從清單到網格和虛擬化清單的各種用例，它既是動態的又是輕量級的，沒有外部相依性。 開始使用以下 npm 指令。 ``` npm install @dnd-kit/core ``` 這就是建立可拖放元件的方法。 `Example.jsx` ``` import React, {useState} from 'react'; import {DndContext} from '@dnd-kit/core'; import {Draggable} from './Draggable'; import {Droppable} from './Droppable'; function Example() { const [parent, setParent] = useState(null); const draggable = ( <Draggable id="draggable"> Go ahead, drag me. </Draggable> ); return ( <DndContext onDragEnd={handleDragEnd}> {!parent ? draggable : null} <Droppable id="droppable"> {parent === "droppable" ? draggable : 'Drop here'} </Droppable> </DndContext> ); function handleDragEnd({over}) { setParent(over ? over.id : null); } } ``` `Droppable.jsx` ``` import React from 'react'; import {useDroppable} from '@dnd-kit/core'; export function Droppable(props) { const {isOver, setNodeRef} = useDroppable({ id: props.id, }); const style = { opacity: isOver ? 1 : 0.5, }; return ( <div ref={setNodeRef} style={style}> {props.children} </div> ); } ``` `Draggable.jsx` ``` import React from 'react'; import {useDraggable} from '@dnd-kit/core'; import {CSS} from '@dnd-kit/utilities'; function Draggable(props) { const {attributes, listeners, setNodeRef, transform} = useDraggable({ id: props.id, }); const style = { // Outputs `translate3d(x, y, 0)` transform: CSS.Translate.toString(transform), }; return ( <button ref={setNodeRef} style={style} {...listeners} {...attributes}> {props.children} </button> ); } ``` 我將可拖曳元件放在可放置元件上。  您可以閱讀[文件](https://docs.dndkit.com/)以及滑鼠和指標等[感測器的選項](https://docs.dndkit.com/introduction/installation#core-library)。 它在 GitHub 上擁有 10k+ Stars，並被 GitHub 上 47k+ 開發人員使用。 https://github.com/clauderic/dnd-kit 明星免打擾套件 ⭐️
***NVIDIA***是一家處於*人工智慧革命🫀 的*公司，最近透過其最新課程讓學習人工智慧變得輕而易舉。 這裡有***五門免費課程***，它們實際上物有所值（相信我，當我這麼說時），它們將幫助您更多地了解該主題並提高您的技能。 😉 PS：他們的網站上一**共有16門免費課程**。我為初學者精選出以下最好的課程。 點擊下面的連結查看它們 - 🔗 https://www.nvidia.com/en-us/training/online/#free-courses  --- 1️⃣ 生成式人工智慧解說 ------------- 你將學到什麼： - 生成式人工智慧並解釋生成式人工智慧的工作原理。 - 各種生成式人工智慧應用。 - 生成人工智慧的挑戰與機遇 🔗 https://courses.nvidia.com/courses/course-v1:DLI+S-FX-07+V1/  --- 2️⃣ 10 分鐘打造大腦 ------------- 你將學到什麼： - 探索神經網路如何使用資料進行學習 - 了解神經元背後的數學和科學 🔗 https://courses.nvidia.com/courses/course-v1:DLI+T-FX-01+V1/  --- 3️⃣ 透過檢索增強生成來增強您的 LLM： ---------------------- 你將學到什麼： - 檢索增強生成基礎知識 - RAG檢索過程 - NVIDIA AI 基礎和 RAG 模型元件 🔗 https://courses.nvidia.com/courses/course-v1:NVIDIA+S-FX-16+v1/  --- 4️⃣ 用 LLM 一起建構 RAG 代理： ---------------------- 你將學到什麼： - LLM 和向量資料庫的可擴展部署策略。 - 用於對話管理和文件檢索的現代 LangChain 範例。 - 採用先進的模型和步驟進行生產。 🔗 https://courses.nvidia.com/courses/course-v1:DLI+S-FX-15+V1/  --- 5️⃣ 透過零程式碼變更加速資料科學工作流程： ----------------------- 你將學到什麼： - 了解統一 CPU 和 GPU 工作流程的優勢 - GPU 加速資料處理和機器學習，無需更改程式碼 - 體驗更快的處理時間 🔗 https://courses.nvidia.com/courses/course-v1:DLI+T-DS-03+V1/  --- 🙌 總結 ---- 總之，NVIDIA 透過提供 16 門免費課程改變了 AI 教育。 這些精心挑選的資源，包括產生人工智慧和神經網路等主題，提供了寶貴的知識。 我個人正在利用這些課程，我鼓勵您也這樣做。 好啦，今天就到此為止！ 與我聯絡@ [Linktree](https://linktr.ee/arjuncodess) 。 快樂編碼！ 🚀 感謝24220！ 🤗 --- 原文出處：https://dev.to/arjuncodess/nvidia-just-launched-free-courses-in-ai-47ef
無論您**剛開始**學習程式設計還是**已經有**一些經驗，我很確定您已經問過自己（或其他人）資料庫到底是什麼，如何處理它，關聯式資料庫和資料庫之間有什麼區別？和非關聯式資料庫及其用途。 當談到程式設計時，感覺我們的疑慮無窮無盡，有時我們會在資訊的海洋中迷失。我將討論每個初學者在建立第一個資料庫時應該了解的一些概念。我希望至少能教您一些有關資料庫的知識，資料庫是軟體最重要的部分之一。 - [什麼是 SQL？](#what-is-sql) 什麼是資料庫？ ------- 在一切之前，了解什麼是**資料**很重要。嗯，它是一個值，例如 21。但是除非我們對其進行組織並建立訊息，否則該資料將沒有意義。例如，這個數字可以是年齡，可以是登入您網站的總人數，甚至可以是您所在州的號碼。現在，如果我告訴你我們有資料： `age = 21` ，我們幾乎可以理解值 21 是某人的年齡。這就是我們所說的**訊息**。 知道了這一點，我可以告訴你資料庫是有組織的資訊的集合。我喜歡把資料庫想像成類似搬到新家的過程。例如，當我們搬家時，將東西裝進盒子裡是很正常的。我們會有一個盒子裝書，一個盒子裝衣服，另一個盒子裝電子產品。最後，我們把所有東西都裝進卡車，運到我們的新家。 在此範例中，我們的資料庫將是卡車，因為我們有許多特定物品的盒子 - 有組織的資訊的集合。該資訊是結構化的並且通常儲存在電腦系統中。 （我們使用資料庫來儲存、存取和維護資料。） 為了控制資料庫，我們將使用所謂的資料庫管理系統（DBMS），該軟體用於可視化資料庫的表、其訊息，以及我們還可以執行查詢（對資料庫執行操作的命令）和許多功能。其他事情。它基本上是用戶（使用資料庫的人）和資料庫本身之間的介面。 可以說，每次建立、刪除、更新和讀取等等，我們都會處理 DBMS。  資料庫管理系統範例： - MySQL - SQL伺服器 - 甲骨文資料庫 有很多選擇，我們應該選擇更適合我們和專案的一種。 資料庫類型 ----- 每個初學者都應該了解的最重要的資料庫類型是： - 關係型資料庫 - 非關係型資料庫 ### 關係型 這種類型的資料庫是使用具有列和行的表來建構的，如下圖所示，我們使用 SQL 來處理這種結構。 在表格中，我們將有： - 列，定義每條資料是什麼（ID、姓名、年齡...）及其類型； - 行，保存給定的資料。  表中的每一行都是一筆具有唯一 ID 的記錄，我們稱之為**鍵**。例如，在這個表中，鍵是數字1、2、3…我們可以看到每筆記錄都有自己的鍵，用來標識自己。 每個初學者都應該了解至少三種類型的密鑰： - **鍵**：它基本上是表中的一列或多列，負責以獨佔方式辨識行。 - **主鍵**：這種類型將確保暫存器的**唯一性**，將在表之間的關係上引用暫存器並對其**進行索引**，這提高了 DBMS 的效率。 - **外鍵**：它是一個使用每個表的主鍵連接表的列。我們使用這種類型的鍵來建立表之間的關係。重要的是要理解，具有外鍵的表稱為**引用表**，而被引用的表稱為**引用表**或**父表**。 ### 非關係型 非關聯式資料庫，也稱為NoSQL（現在是Not Only SQL），是一種不使用表格及其列和行作為組織方案的資料庫。它提供了更大的靈活性，因為您不必像我們在關聯式資料庫上所做的那樣擔心建立表。 NoSQL 上的儲存經過最佳化，可以自我調整以滿足各種需求。例如，可以將資料儲存為鍵/值、JSON 文件或圖形。 NoSQL 資料庫的建立是為了解決人們直到 90 年代末期才遇到的問題，即難以設計能夠滿足使用關聯式資料庫所需的規模和敏捷性的資料庫，而當時無法做到這一點。  NoSQL 最重要的功能之一是： - 更高的可擴展性 - 沒有複雜的關係 - 降低成本 非關係型資料庫也有類型，其中兩種是： - **鍵值**：最常見的一個。資料庫中的每個專案都將儲存為屬性名稱（或“鍵”）及其值。例如： `{"name": "Maria"}` 。鍵是“name”，值是“Maria”。在這些情況下最常使用的資料庫是**Redis** 、 **DynamoDB**和**Berkeley DB** 。 - **文件**：將每個金鑰與其文件一起存儲，其主要特徵是將所有資訊包含在一個文件中。該文件通常是 JSON，但也可以是 XML。最著名的文件資料庫是 MongoDB 關於此類資料庫的更多資訊有很多，但這是您開始之前必須了解的基礎知識！除此之外，不要讓這個開始阻止您深入挖掘以了解更多資訊。 什麼是 SQL？ -------- SQL 代表**結構化查詢語言**，這是一種用於處理 70 年代左右在 IBM 實驗室建立的資料庫的程式語言。一段時間後，它成為資料管理的模式。 我們使用這種程式語言在資料庫上執行查詢，並且可以使用各種參數從資料庫中檢索、建立或刪除資訊。我們只需要遵循語法，就像任何其他程式語言一樣。 SQL 有許多**指令**，但最重要的是： - **SELECT** ：搜尋資料庫表中的行。 - **INSERT** ：在表中插入新行。 - **UPDATE** ：用於更新表中已存在的資料。 - **DELETE** ：刪除一個暫存器。 重要的是，我們將此命令與其他參數一起使用，以便我們可以使查詢非常具體。在 Capslock 上使用 SQL 是一種約定。 SQL 還具有一些我們可以在查詢中新增的條件，以便修改將傳回的暫存器，例如： - **FROM** ：用於表示將查詢哪個表。 - **ORDER BY** ：用於以特定順序組織傳回的資料。 - **WHERE** ：用於**指定傳回資料的條件**。例如，如果我們想查看表中年齡超過 18 歲的用戶，我們將使用「where」。 SQL 中還有許多其他命令，但這是我們建立第一個表並學習建立第一個 CRUD（代表建立、讀取、更新和刪除）所需的基本命令。 就是這樣！ ----- 透過這篇文章我們了解了資料庫的基礎知識，例如它是什麼、它的類型以及什麼是 SQL。現在，我們必須學習如何建立一個主題，該主題將在本系列的下一篇文章中介紹。 這個內容是根據我在 100 天的程式碼中的筆記建立的，在這段期間我了解了資料庫、PHP 和 Laravel，所以我真的很自豪，因為在開始挑戰之前我對此幾乎一無所知。另外，如果需要的話，請隨時向我提問！ 感謝那些審查我的文章並幫助我到達這裡的人： - @danielhe4rt - @cherryramatis - @reenatoteixeira --- 原文出處：https://dev.to/basementdevs/database-for-newbies-n46
在快節奏的軟體開發世界中，時間至關重要，快速存取重要資訊可能意味著編碼幸福和編碼混亂之間的差異。輸入備忘單 - 這些寶貴的資源已成為開發人員最好的朋友，作為簡潔的參考指南，可以節省無數時間的挫敗感和無休止的谷歌搜尋。在本文中，我們將探索專為開發人員量身訂製的備忘單集合。 備忘錄集合💥 ------ ### 1. 通用編程： - [Codecademy Cheat Sheets](https://www.codecademy.com/resources/cheatsheets/all) ：Codecademy 的集合提供了一系列全面的備忘單，涵蓋各種程式語言，從 Python 和 JavaScript 到 Ruby 和 SQL。這些精心設計且易於瀏覽的資源非常適合初學者和經驗豐富的程式設計師。  - [很棒的備忘單](https://lecoupa.github.io/awesome-cheatsheets/)：這個精選的備忘單清單涵蓋了廣泛的主題，包括程式語言、框架、資料庫等，使其成為各個層級的開發人員的寶貴資源。  - [DevHints](https://devhints.io/)：DevHints 以簡潔且易於存取的格式提供了大量針對各種程式語言、工具和技術的備忘單。  ### 2. 專門備忘單： - [CSS Grid Cheat Sheet](https://alialaa.github.io/css-grid-cheat-sheet/) ：這份備忘錄是前端開發人員使用CSS Grid 的必備工具，為使用CSS Grid 提供了簡潔的參考與這個強大的佈局系統相關的所有屬性和值。  - [Grid Malven](https://grid.malven.co/)：CSS Grid 的另一個精彩資源，Grid Malven 提供了視覺化和互動式備忘單，讓開發人員嘗試不同的網格配置並即時查看結果。  - [Flex Malven](https://flexbox.malven.co/)：CSS Flexbox 的另一個精彩資源，Flex Malven 提供了類似 Grid Malven 的視覺化和互動式備忘單。  - [Easings](https://easings.net/)：在處理動畫和過渡時，Easings 為各種緩動函數提供了全面的備忘單，使開發人員能夠可視化並為他們的專案選擇完美的時序曲線。  ### 3. 綜合館藏： - [免費編程備忘錄](https://github.com/EbookFoundation/free-programming-books?tab=readme-ov-file)：此GitHub 儲存庫提供了大量免費備忘單，適用於多種編程語言、框架、和工具，所有這些都方便組織且易於存取。  - [OverAPI](https://overapi.com/)：OverAPI 是一個綜合中心，為開發人員收集和整理備忘單。它不僅僅是與 API 相關的內容，還充當涵蓋多種程式語言的備忘單的集中儲存庫。從 Python、JavaScript 和 Ruby 等流行選擇到更小眾的語言，OverAPI 都能滿足您的需求。  ### 最後的想法 在軟體開發領域，擁有可靠的參考指南可以產生重大影響。這些工具不僅可以節省您的時間和精力，還支援無縫編碼過程，使您能夠專注於專案的創意方面。 如果您知道任何有用的資源或根據自己的經驗有任何建議，請隨時在下面的評論部分分享。👇 如果您發現這有幫助並願意給我的專案一顆星以支持，我將不勝感激！ [黏土主題🚀](https://github.com/lilxyzz/clay-theme) --- 原文出處：https://dev.to/lilxyzz/2024-cheat-sheet-collection-47h8
長話短說 ==== 我收集了您應該了解的 React 庫，以建立許多不同類型的專案並成為 React 奇才🧙♂️。 其中每一項都是獨一無二的，並且都有自己的用例。 別忘了給他們加星號🌟 讓我們開始吧！  --- 1. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 建立應用內人工智慧聊天機器人、代理程式和文字區域 ------------------------------------------------------------------------------------  將 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。 https://github.com/CopilotKit/CopilotKit Star CopilotKit ⭐️ --- 2. [xyflow](https://github.com/xyflow/xyflow) - 使用 React 建立基於節點的 UI。 --------------------------------------------------------------------  XYFlow 是一個功能強大的開源程式庫，用於使用 React 或 Svelte 建立基於節點的 UI。它是一個 monorepo，提供[React Flow](https://reactflow.dev)和[Svelte Flow](https://svelteflow.dev) 。讓我們更多地了解可以使用 React flow 做什麼。  您可以觀看此影片，在 60 秒內了解 React Flow。 https://www.youtube.com/watch?v=aUBWE41a900 有些功能在專業模式下可用，但免費層中的功能足以形成一個非常互動的流程。 React 流程以 TypeScript 編寫並使用 Cypress 進行測試。 開始使用以下 npm 指令。 ``` npm install reactflow ``` 以下介紹如何建立兩個節點（ `Hello`和`World` ，並透過邊連接。節點具有預先定義的初始位置以防止重疊，並且我們還應用樣式來確保有足夠的空間來渲染圖形。 ``` import ReactFlow, { Controls, Background } from 'reactflow'; import 'reactflow/dist/style.css'; const edges = [{ id: '1-2', source: '1', target: '2' }]; const nodes = [ { id: '1', data: { label: 'Hello' }, position: { x: 0, y: 0 }, type: 'input', }, { id: '2', data: { label: 'World' }, position: { x: 100, y: 100 }, }, ]; function Flow() { return ( <div style={{ height: '100%' }}> <ReactFlow nodes={nodes} edges={edges}> <Background /> <Controls /> </ReactFlow> </div> ); } export default Flow; ``` 這就是它的樣子。您還可以新增標籤、更改類型並使其具有互動性。  您可以在 React Flow 的 API 參考中查看[完整的選項清單](https://reactflow.dev/api-reference/react-flow)以及元件、鉤子和實用程式。 最好的部分是您還可以加入[自訂節點](https://reactflow.dev/learn/customization/custom-nodes)。在您的自訂節點中，您可以渲染您想要的一切。您可以定義多個來源和目標句柄並呈現表單輸入或圖表。您可以查看此[codesandbox](https://codesandbox.io/p/sandbox/pensive-field-z4kv3w?file=%2FApp.js&utm_medium=sandpack)作為範例。 您可以閱讀[文件](https://reactflow.dev/learn)並查看 Create React App、Next.js 和 Remix 的[範例 React Flow 應用程式](https://github.com/xyflow/react-flow-example-apps)。 React Flow 附帶了幾個額外的[插件](https://reactflow.dev/learn/concepts/plugin-components)元件，可以幫助您使用 Background、Minimap、Controls、Panel、NodeToolbar 和 NodeResizer 元件製作更高級的應用程式。 例如，您可能已經注意到許多網站的背景中有圓點，增強了美觀性。要實現此模式，您可以簡單地使用 React Flow 中的後台元件。 ``` import { Background } from 'reactflow'; <Background color="#ccc" variant={'dots'} /> // this will be under React Flow component. Just an example. ```  如果您正在尋找一篇快速文章，我建議您查看 Webkid 的[React Flow - A Library for Rendering Interactive Graphs](https://webkid.io/blog/react-flow-node-based-graph-library/) 。 React Flow 由 Webkid 開發和維護。 它在 GitHub 上有超過 19k 顆星，並且在`v11.10.4`上顯示它們正在不斷改進，npm 套件每週下載量超過 40 萬次。您可以輕鬆使用的最佳專案之一。  https://github.com/xyflow/xyflow 星 xyflow ⭐️ --- 3. [Zod](https://github.com/colinhacks/zod) + [React Hook Form](https://github.com/react-hook-form) - 致命的驗證組合。 --------------------------------------------------------------------------------------------------------------  第一個問題是：為什麼我在同一個選項中包含 Zod 和 React Hook 表單？好吧，請閱讀它來找出答案。 Zod 的目標是透過最大限度地減少重複的類型聲明來對開發人員友好。使用 Zod，您聲明一次驗證器，Zod 將自動推斷靜態 TypeScript 類型。將更簡單的類型組合成複雜的資料結構很容易。 開始使用以下 npm 指令。 ``` npm install zod ``` 這是您在建立字串架構時自訂一些常見錯誤訊息的方法。 ``` const name = z.string({ required_error: "Name is required", invalid_type_error: "Name must be a string", }); ``` ``` // It does provide lots of options // validations z.string().min(5, { message: "Must be 5 or more characters long" }); z.string().max(5, { message: "Must be 5 or fewer characters long" }); z.string().length(5, { message: "Must be exactly 5 characters long" }); z.string().email({ message: "Invalid email address" }); z.string().url({ message: "Invalid url" }); z.string().emoji({ message: "Contains non-emoji characters" }); z.string().uuid({ message: "Invalid UUID" }); z.string().includes("tuna", { message: "Must include tuna" }); z.string().startsWith("https://", { message: "Must provide secure URL" }); z.string().endsWith(".com", { message: "Only .com domains allowed" }); z.string().datetime({ message: "Invalid datetime string! Must be UTC." }); z.string().ip({ message: "Invalid IP address" }); ``` 請閱讀[文件](https://zod.dev/)以了解有關 Zod 的更多資訊。 它適用於 Node.js 和所有現代瀏覽器。 現在，第二部分來了。 有很多可用的表單整合。  雖然 Zod 可以驗證物件，但如果沒有自訂邏輯，它不會影響您的用戶端和後端。 React-hook-form 是用於客戶端驗證的優秀專案。例如，它可以顯示輸入錯誤。  開始使用以下 npm 指令。 ``` npm install react-hook-form ``` 這就是如何使用`React Hook Form` 。 ``` import { useForm, SubmitHandler } from "react-hook-form" type Inputs = { example: string exampleRequired: string } export default function App() { const { register, handleSubmit, watch, formState: { errors }, } = useForm<Inputs>() const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data) console.log(watch("example")) // watch input value by passing the name of it return ( /* "handleSubmit" will validate your inputs before invoking "onSubmit" */ <form onSubmit={handleSubmit(onSubmit)}> {/* register your input into the hook by invoking the "register" function */} <input defaultValue="test" {...register("example")} /> {/* include validation with required or other standard HTML validation rules */} <input {...register("exampleRequired", { required: true })} /> {/* errors will return when field validation fails */} {errors.exampleRequired && <span>This field is required</span>} <input type="submit" /> </form> ) } ``` 您甚至可以隔離重新渲染，從而提高整體效能。 您可以閱讀[文件](https://react-hook-form.com/get-started)。 兩者結合起來就是一個很好的組合。嘗試一下！ 我透過 Shadcn 發現了它，它使用它作為表單元件的預設值。我自己在幾個專案中使用過它，效果非常好。它提供了很大的靈活性，這確實很有幫助。 https://github.com/colinhacks/zod Star Zod ⭐️ https://github.com/react-hook-form Star React Hook Form ⭐️ --- 4. [React DND](https://github.com/react-dnd/react-dnd) - 用於 React 的拖放。 ----------------------------------------------------------------------  我還沒有完全實現拖放功能，而且我經常發現自己對選擇哪個選項感到困惑。我遇到的另一個選擇是[interactjs.io](https://interactjs.io/) ，根據我讀過的文件，它似乎非常有用。由於他們提供了詳細的範例，這非常容易。  但我現在只介紹 React DND。 開始使用以下 npm 指令。 ``` npm install react-dnd react-dnd-html5-backend ``` 除非您正在編寫自訂後端，否則您可能想要使用 React DnD 隨附的 HTML5 後端。 這是安裝`react-dnd-html5-backend`方法。閱讀[文件](https://react-dnd.github.io/react-dnd/docs/backends/html5)。 這是起點。 ``` import { HTML5Backend } from 'react-dnd-html5-backend' import { DndProvider } from 'react-dnd' export default class YourApp { render() { return ( <DndProvider backend={HTML5Backend}> /* Your Drag-and-Drop Application */ </DndProvider> ) } } ``` 透過這種方式，您可以非常輕鬆地實現卡片的拖放操作。 ``` // Let's make <Card text='Write the docs' /> draggable! import React from 'react' import { useDrag } from 'react-dnd' import { ItemTypes } from './Constants' export default function Card({ isDragging, text }) { const [{ opacity }, dragRef] = useDrag( () => ({ type: ItemTypes.CARD, item: { text }, collect: (monitor) => ({ opacity: monitor.isDragging() ? 0.5 : 1 }) }), [] ) return ( <div ref={dragRef} style={{ opacity }}> {text} </div> ) } ``` 請注意，HTML5 後端不支援觸控事件。因此它不適用於平板電腦和行動裝置。您可以將`react-dnd-touch-backend`用於觸控裝置。閱讀[文件](https://react-dnd.github.io/react-dnd/docs/backends/touch)。 ``` import { TouchBackend } from 'react-dnd-touch-backend' import { DndProvider } from 'react-dnd' class YourApp { <DndProvider backend={TouchBackend} options={opts}> {/* Your application */} </DndProvider> } ``` 這個codesandbox規定了我們如何正確使用React DND。 https://codesandbox.io/embed/3y5nkyw381?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.tsx&hidenavigation=1 你可以看看React DND的[例子](https://react-dnd.github.io/react-dnd/examples)。 它們甚至有一個乾淨的功能，您可以使用 Redux 檢查內部發生的情況。 您可以透過為提供者新增 debugModeprop 來啟用[Redux DevTools](https://github.com/reduxjs/redux-devtools) ，其值為 true。 ``` <DndProvider debugMode={true} backend={HTML5Backend}> ``` 它提供了多種元件選項，我需要親自測試一下。總的來說，這看起來相當不錯，特別是如果你剛開始的話。 React DND 已獲得`MIT`許可，並在 GitHub 上擁有超過 20k Stars，這使其具有令人難以置信的可信度。 https://github.com/react-dnd/react-dnd Star React DND ⭐️ --- 5. [Cypress](https://github.com/cypress-io/cypress) - 快速測試瀏覽器中執行的內容。 --------------------------------------------------------------------  近年來已經證明了測試的重要性，而 Jest 和 Cypress 等選項使其變得異常簡單。 但我們只會介紹 Cypress，因為它本身就很方便。 只需一張圖片就能證明 Cypress 值得付出努力。  開始使用以下 npm 指令。 ``` npm install cypress -D ``` 如果您在專案中沒有使用 Node 或套件管理器，或者您想快速試用 Cypress，您始終可以[直接從 CDN 下載 Cypress](https://download.cypress.io/desktop) 。 一旦安裝並打開它。您必須使用`.cy.js`建立一個規範檔案。  現在，您可以編寫並測試您的應用程式（範例程式碼）。 ``` describe('My First Test', () => { it('Does not do much!', () => { expect(true).to.equal(true) }) }) ``` Cypress 提供了多種選項，例如`cy.visit()`或`cy.contains()` 。由於我沒有廣泛使用 Cypress，因此您需要在其[文件](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test)中進一步探索它。 如果它看起來很可怕，那麼請前往這個[為初學者解釋 Cypress 的](https://www.youtube.com/watch?v=u8vMu7viCm8&pp=ygUQY3lwcmVzcyB0dXRvcmlhbA%3D%3D)freeCodeCamp 教程。 Freecodecamp 影片確實是金礦 :D Cypress 在 GitHub 上擁有超過 45,000 顆星，並且在目前的 v13 版本中，它正在不斷改進。 https://github.com/cypress-io/cypress 星柏 ⭐️ --- [6.Refine](https://github.com/refinedev/refine) - 面向企業的開源 Retool。 -----------------------------------------------------------------  Refine 是一個元 React 框架，可以快速開發各種 Web 應用程式。 從內部工具到管理面板、B2B 應用程式和儀表板，它可作為建立任何類型的 CRUD 應用程式（例如 DevOps 儀表板、電子商務平台或 CRM 解決方案）的全面解決方案。  您可以在一分鐘內使用單一 CLI 命令進行設定。 它具有適用於 15 多個後端服務的連接器，包括 Hasura、Appwrite 等。 您可以查看可用的[整合清單](https://refine.dev/integrations/)。  但最好的部分是，Refine `headless by design` ，從而提供無限的樣式和自訂選項。 由於該架構，您可以使用流行的 CSS 框架（如 TailwindCSS）或從頭開始建立樣式。 這是最好的部分，因為我們不希望最終受到與特定庫的兼容性的樣式限制，因為每個人都有自己的風格並使用不同的 UI。 開始使用以下 npm 指令。 ``` npm create refine-app@latest ``` 這就是使用 Refine 新增登入資訊的簡單方法。 ``` import { useLogin } from "@refinedev/core"; const { login } = useLogin(); ``` 使用 Refine 概述程式碼庫的結構。 ``` const App = () => ( <Refine dataProvider={dataProvider} resources={[ { name: "blog_posts", list: "/blog-posts", show: "/blog-posts/show/:id", create: "/blog-posts/create", edit: "/blog-posts/edit/:id", }, ]} > /* ... */ </Refine> ); ``` 您可以閱讀[文件](https://refine.dev/docs/)。 您可以看到一些使用 Refine 建立的範例應用程式： - [全功能管理面板](https://example.admin.refine.dev/) - [優化不同的用例場景](https://github.com/refinedev/refine/tree/master/examples)。 他們甚至提供模板，這就是為什麼這麼多用戶喜歡Refine。 你可以看到[模板](https://refine.dev/templates/)。  他們在 GitHub 上擁有大約 22k+ 顆星。 https://github.com/refinedev/refine 星際精煉 ⭐️ --- 7. [Tremor](https://github.com/tremorlabs/tremor) - React 元件來建立圖表和儀表板。 ----------------------------------------------------------------------  Tremor 提供了 20 多個開源 React 元件，用於建立基於 Tailwind CSS 的圖表和儀表板，使資料視覺化再次變得簡單。  開始使用以下 npm 指令。 ``` npm i @tremor/react ``` 這就是您如何使用 Tremor 快速建立東西。 ``` import { Card, ProgressBar } from '@tremor/react'; export default function Example() { return ( <Card className="mx-auto max-w-md"> <h4 className="text-tremor-default text-tremor-content dark:text-dark-tremor-content"> Sales </h4> <p className="text-tremor-metric font-semibold text-tremor-content-strong dark:text-dark-tremor-content-strong"> $71,465 </p> <p className="mt-4 flex items-center justify-between text-tremor-default text-tremor-content dark:text-dark-tremor-content"> <span>32% of annual target</span> <span>$225,000</span> </p> <ProgressBar value={32} className="mt-2" /> </Card> ); } ``` 這就是基於此生成的內容。  您可以閱讀[文件](https://www.tremor.so/docs/getting-started/installation)。其間，他們在引擎蓋下使用混音圖標。 從我見過的各種元件來看，這是一個很好的起點。相信我！ Tremor 還提供了一個[乾淨的 UI 工具包](https://www.figma.com/community/file/1233953507961010067)。多麼酷啊！  Tremor 在 GitHub 上擁有超過 14k 顆星，並有超過 280 個版本，這意味著它正在不斷改進。 https://github.com/tremorlabs/tremor 星震 ⭐️ --- 8. [Watermelon DB](https://github.com/Nozbe/WatermelonDB) - 用於 React 和 React Native 的反應式和非同步資料庫。 ------------------------------------------------------------------------------------------------  我不知道為什麼資料庫有這麼多選項；甚至很難全部數清。但如果我們使用 React，Watermelon DB 是一個不錯的選擇。即使在 4k+ 提交之後，它們仍然處於`v0.28`版本，這是一個相當大的問題。 Rocket.chat 使用 Watermelon DB，這給了他們巨大的可信度。 開始使用以下 npm 指令。 ``` npm install @nozbe/watermelondb ``` 您需要做的第一件事是建立模型和後續遷移（閱讀文件）。 ``` import { appSchema, tableSchema } from '@nozbe/watermelondb' export default appSchema({ version: 1, tables: [ // We'll add to tableSchemas here ] }) ``` 根據文件，使用 WatermelonDB 時，您正在處理模型和集合。然而，在 Watermelon 之下有一個底層資料庫（SQLite 或 LokiJS），它使用不同的語言：表格和欄位。這些一起稱為資料庫模式。 您可以閱讀有關[CRUD 操作的](https://watermelondb.dev/docs/CRUD)[文件](https://watermelondb.dev/docs/Installation)和更多內容。 https://github.com/Nozbe/WatermelonDB 明星 WatermelonDB ⭐️ --- 9. [Evergreen UI](https://github.com/segmentio/evergreen) - 按 Segment 劃分的 React UI 框架。 --------------------------------------------------------------------------------------  沒有 UI 框架的清單幾乎是不可能的。有許多受歡迎的選項，例如 Material、Ant Design、Next UI 等等。 但我們正在報道 Evergreen，它本身就非常好。 開始使用以下 npm 指令。 ``` $ npm install evergreen-ui ``` [Evergreen Segment 網站](https://evergreen.segment.com/foundations)上顯示了任何使用者介面的基礎以及詳細的選項。  它提供了很多元件，其中一些非常好，例如`Tag Input`或`File uploader` 。   您可以看到 Evergreen UI 提供的所有[元件](https://evergreen.segment.com/components)。 https://github.com/segmentio/evergreen Star Evergreen UI ⭐️ --- 10. [React Spring](https://www.react-spring.dev/) - 流暢的動畫來提升 UI 和互動。 --------------------------------------------------------------------   如果您喜歡 React-Motion 但感覺過渡不流暢，那是因為它專門使用 React 渲染。 如果你喜歡 Popmotion，但感覺自己的能力受到限制，那是因為它完全跳過了 React 渲染。 `react-spring`提供了兩種選擇，試試看！ 開始使用以下 npm 指令。 ``` npm i @react-spring/web ``` 這就是導入高階元件來包裝動畫的方法。 ``` import { animated } from '@react-spring/web' // use it. export default function MyComponent() { return ( <animated.div style={{ width: 80, height: 80, background: '#ff6d6d', borderRadius: 8, }} /> ) } ``` 由於以下程式碼和框，我決定嘗試 React Spring。令人驚訝的是，我們可以使用 React Spring 做很多事情。 https://codesandbox.io/embed/mdovb?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.tsx&hidenavigation=1 您可以閱讀[文件](https://www.react-spring.dev/docs/getting-started)。 他們還提供了很多您可以學習的[範例](https://www.react-spring.dev/examples)。  它提供了大量的選項，例如`useScroll` ，它允許您建立滾動連結動畫。 例如，這個codesandbox告訴了`useScroll`的用法。 https://codesandbox.io/embed/b07dmz?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.tsx&hidenavigation=1 React Spring 在 GitHub 上有大約 27k+ Stars。 https://github.com/pmndrs/react-spring Star React Spring ⭐️ --- 11. [React Tweet](https://github.com/vercel/react-tweet) - 將推文嵌入到你的 React 應用程式中。 --------------------------------------------------------------------------------  `React Tweet`可讓您在使用 Next.js、Create React App、Vite 等時將推文嵌入到 React 應用程式中。 該函式庫不需要使用 Twitter API。推文可以靜態呈現，從而無需包含 iframe 和額外的客戶端 JavaScript。 它是 Vercel 的開源專案。 開始使用以下 npm 指令。 ``` npm i react-tweet ``` 為了顯示推文，我們需要從 Twitter 的 API 請求資料。透過此 API 進行速率限制具有挑戰性，但如果您僅依賴我們提供的 SWR 端點 ( `react-tweet.vercel.app/api/tweet/:id` )，這是可能的，因為伺服器的IP 位址向Twitter 發出了許多請求API。這也適用於 RSC，其中 API 端點不是必需的，但伺服器仍然從相同 IP 位址發送請求。 為了避免 API 限制，您可以使用 Redis 或 Vercel KV 等資料庫快取推文。例如，您可以使用 Vercel KV。 ``` import { Suspense } from 'react' import { TweetSkeleton, EmbeddedTweet, TweetNotFound } from 'react-tweet' import { fetchTweet, Tweet } from 'react-tweet/api' import { kv } from '@vercel/kv' async function getTweet( id: string, fetchOptions?: RequestInit ): Promise<Tweet | undefined> { try { const { data, tombstone, notFound } = await fetchTweet(id, fetchOptions) if (data) { await kv.set(`tweet:${id}`, data) return data } else if (tombstone || notFound) { // remove the tweet from the cache if it has been made private by the author (tombstone) // or if it no longer exists. await kv.del(`tweet:${id}`) } } catch (error) { console.error('fetching the tweet failed with:', error) } const cachedTweet = await kv.get<Tweet>(`tweet:${id}`) return cachedTweet ?? undefined } const TweetPage = async ({ id }: { id: string }) => { try { const tweet = await getTweet(id) return tweet ? <EmbeddedTweet tweet={tweet} /> : <TweetNotFound /> } catch (error) { console.error(error) return <TweetNotFound error={error} /> } } const Page = ({ params }: { params: { tweet: string } }) => ( <Suspense fallback={<TweetSkeleton />}> <TweetPage id={params.tweet} /> </Suspense> ) export default Page ``` 您可以直接使用它，方法非常簡單。 ``` <div className="dark"> <Tweet id="1629307668568633344" /> </div> ``` 如果您不喜歡使用 Twitter 主題，您也可以使用多個選項建立自己的[自訂主題](https://react-tweet.vercel.app/custom-theme)。 例如，您可以建立自己的推文元件，但沒有回覆按鈕，如下所示： ``` import type { Tweet } from 'react-tweet/api' import { type TwitterComponents, TweetContainer, TweetHeader, TweetInReplyTo, TweetBody, TweetMedia, TweetInfo, TweetActions, QuotedTweet, enrichTweet, } from 'react-tweet' type Props = { tweet: Tweet components?: TwitterComponents } export const MyTweet = ({ tweet: t, components }: Props) => { const tweet = enrichTweet(t) return ( <TweetContainer> <TweetHeader tweet={tweet} components={components} /> {tweet.in_reply_to_status_id_str && <TweetInReplyTo tweet={tweet} />} <TweetBody tweet={tweet} /> {tweet.mediaDetails?.length ? ( <TweetMedia tweet={tweet} components={components} /> ) : null} {tweet.quoted_tweet && <QuotedTweet tweet={tweet.quoted_tweet} />} <TweetInfo tweet={tweet} /> <TweetActions tweet={tweet} /> {/* We're not including the `TweetReplies` component that adds the reply button */} </TweetContainer> ) } ``` 您可以閱讀[文件](https://react-tweet.vercel.app/#installation)。 您可以查看[React Tweet 的演示，](https://react-tweet-next.vercel.app/light/1761133168772489698)以了解它如何在頁面上呈現。 它們已發布`v3.2`版本，這表明它們正在不斷改進，並且[每週下載量超過 46k+](https://www.npmjs.com/package/react-tweet) 。 https://github.com/vercel/react-tweet Star React 推文 ⭐️ --- 12. [React 360](https://github.com/facebookarchive/react-360) - 使用 React 建立令人驚嘆的 360 度和 VR 內容。 ----------------------------------------------------------------------------------------------  儘管 Facebook 已將其存檔，但許多開發人員仍然發現它足夠有用，因此繼續使用。 React 360 是一個函式庫，它利用大量 React Native 功能來建立在 Web 瀏覽器中執行的虛擬實境應用程式。 它使用 Three.js 進行渲染，並作為 npm 套件提供。透過將 WebGL 和 WebVR 等現代 API 與 React 的聲明性功能結合，React 360 有助於簡化建立跨平台 VR 體驗的過程。 開始使用以下 npm 指令。 ``` npm install -g react-360-cli ``` 涉及的事情有很多，但您可以使用 VrButton 加入重要的互動功能到您的 React VR 應用程式。 ``` import { AppRegistry, StyleSheet, Text, View, VrButton } from 'react-360'; state = { count: 0 }; _incrementCount = () => { this.setState({ count: this.state.count + 1 }) } <View style={styles.panel}> <VrButton onClick={this._incrementCount} style={styles.greetingBox}> <Text style={styles.greeting}> {`You have visited Simmes ${this.state.count} times`} </Text> </VrButton> </View> ``` 除了許多令人驚奇的東西之外，您還可以加入聲音。請參閱[使用 React 360 的 React Resources](https://reactresources.com/topics/react-360)範例。 您也可以閱讀 Log Rocket 撰寫的關於[使用 React 360 建立 VR 應用](https://blog.logrocket.com/building-a-vr-app-with-react-360/)程式的部落格。 這個codesandbox代表了我們可以使用React 360做什麼的一個常見範例。 https://codesandbox.io/embed/2bye27?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.js&hidenavigation=1 https://github.com/facebookarchive/react-360 Star React 360 ⭐️ --- 13. [React Advanced Cropper](https://github.com/advanced-cropper/react-advanced-cropper) - 建立適合您網站的裁剪器。 -------------------------------------------------------------------------------------------------------   React Advanced Cropper 是一個高級庫，可讓您建立適合任何網站設計的裁剪器。這意味著您不僅可以更改裁剪器的外觀，還可以自訂其行為。 它們仍處於測試版本，這意味著 API 可能會在未來版本中發生變化。 簡單的用例是設計軟體和裁剪圖像表面以獲得進一步的見解。 他們有很多選擇，因此值得。   開始使用以下 npm 指令。 ``` npm install --save react-advanced-cropper ``` 您可以這樣使用它。 ``` import React, { useState } from 'react'; import { CropperRef, Cropper } from 'react-advanced-cropper'; import 'react-advanced-cropper/dist/style.css' export const GettingStartedExample = () => { const [image, setImage] = useState( 'https://images.unsplash.com/photo-1599140849279-1014532882fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1300&q=80', ); const onChange = (cropper: CropperRef) => { console.log(cropper.getCoordinates(), cropper.getCanvas()); }; return ( <Cropper src={image} onChange={onChange} className={'cropper'} /> ) }; ``` 您可以閱讀[文件](https://advanced-cropper.github.io/react-advanced-cropper/docs/intro)，它們提供了[20 多個自訂選項](https://github.com/advanced-cropper/react-advanced-cropper?tab=readme-ov-file#cropper)。 他們主要提供三種類型的[裁剪器選項](https://advanced-cropper.github.io/react-advanced-cropper/docs/guides/cropper-types/)：固定、經典和混合以及範例和程式碼。 您可以使用 React Advanced Cropper 製作一些令人興奮的東西來向世界展示:) https://github.com/advanced-cropper/react-advanced-cropper Star React 進階裁剪器 ⭐️ --- 14. [Mobx](https://github.com/mobxjs/mobx) - 簡單、可擴展的狀態管理。 ---------------------------------------------------------  MobX 是一個經過驗證的基於訊號的函式庫，可透過函數反應式程式設計簡化和擴展狀態管理。它提供了靈活性，使您能夠獨立於任何 UI 框架來管理應用程式狀態。 這種方法會產生解耦、可移植且易於測試的程式碼。 以下是使用 MobX 的任何應用程式中處理事件的方式。  圖片來自文件 開始使用以下 npm 指令。 ``` npm install mobx-react --save // CDN is also available ``` 這就是它的樣子。 ``` import { observer } from "mobx-react" // ---- ES6 syntax ---- const TodoView = observer( class TodoView extends React.Component { render() { return <div>{this.props.todo.title}</div> } } ) // ---- ESNext syntax with decorator syntax enabled ---- @observer class TodoView extends React.Component { render() { return <div>{this.props.todo.title}</div> } } // ---- or just use function components: ---- const TodoView = observer(({ todo }) => <div>{todo.title}</div>) ``` 您可以使用 props、全域變數或使用 React Context 在觀察者中使用外部狀態。 您可以閱讀[有關 React Integration](https://mobx.js.org/react-integration.html)和[npm docs](https://www.npmjs.com/package/mobx-react#api-documentation)的文件。 您也可以閱讀[MobX 和 React 的 10 分鐘互動介紹](https://mobx.js.org/getting-started)。 MobX 在 GitHub 上擁有超過 27k 顆星，並在 GitHub 上被超過 140K 開發者使用。 https://github.com/mobxjs/mobx 明星 Mobx ⭐️ --- 15. [React Virtualized](https://github.com/bvaughn/react-virtualized) - 渲染大型清單和表格資料。 ------------------------------------------------------------------------------------  開始使用以下 npm 指令。 ``` npm install react-virtualized --save ``` 以下是如何在網格中使用 ColumnSizer 元件。探索演示（文件）以詳細了解可用選項。 ``` import React from 'react'; import ReactDOM from 'react-dom'; import {ColumnSizer, Grid} from 'react-virtualized'; import 'react-virtualized/styles.css'; // only needs to be imported once // numColumns, numRows, someCalculatedHeight, and someCalculatedWidth determined here... // Render your list ReactDOM.render( <ColumnSizer columnMaxWidth={100} columnMinWidth={50} columnCount={numColumns} width={someCalculatedWidth}> {({adjustedWidth, getColumnWidth, registerChild}) => ( <Grid ref={registerChild} columnWidth={getColumnWidth} columnCount={numColumns} height={someCalculatedHeight} cellRenderer={someCellRenderer} rowHeight={50} rowCount={numRows} width={adjustedWidth} /> )} </ColumnSizer>, document.getElementById('example'), ); ``` 您可以閱讀[文件](https://github.com/bvaughn/react-virtualized/tree/master/docs#documentation)和[演示](https://bvaughn.github.io/react-virtualized/#/components/List)。 他們提供了 React-window 作為輕量級的替代方案，但這個在發布和明星方面更受歡迎，所以我介紹了這個選項。您可以閱讀哪個選項更適合您： [React-Window 與 React-Virtualized 有何不同？](https://github.com/bvaughn/react-window?tab=readme-ov-file#how-is-react-window-different-from-react-virtualized) 。 它被超過 85,000 名開發人員使用，並在 GitHub 上擁有超過 25,000 顆星。它還擁有令人印象深刻的[170 萬+ 每週下載量](https://www.npmjs.com/package/react-virtualized)。 https://github.com/bvaughn/react-virtualized Star React 虛擬化 ⭐️ --- 16.React [Google Analytics](https://github.com/react-ga/react-ga) - React Google Analytics 模組。 ----------------------------------------------------------------------------------------------  這是一個 JavaScript 模組，可用於在使用 React 作為前端程式碼庫的網站或應用程式中包含 Google Analytics 追蹤程式碼。 該模組對我們如何在前端程式碼中進行追蹤有一定的看法。我們的 API 比核心 Google Analytics 庫稍微詳細一些，以使程式碼更易於閱讀。 開始使用以下 npm 指令。 ``` npm install react-ga --save ``` 您可以這樣使用它。 ``` import ReactGA from 'react-ga'; ReactGA.initialize('UA-000000-01'); ReactGA.pageview(window.location.pathname + window.location.search); <!-- The core React library --> <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script> <!-- The ReactDOM Library --> <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script> <!-- ReactGA library --> <script src="/path/to/bower_components/react-ga/dist/react-ga.min.js"></script> <script> ReactGA.initialize('UA-000000-01', { debug: true }); </script> ``` 執行`npm install` `npm start`並前往`port 8000 on localhost`後，您可以閱讀[文件](https://github.com/react-ga/react-ga?tab=readme-ov-file#installation)並查看[演示](https://github.com/react-ga/react-ga/tree/master/demo)。 它每週的下載量超過 35 萬次，在 GitHub 上擁有超過 5,000 顆星（已存檔）。 https://github.com/react-ga/react-ga Star React Google Analytics ⭐️ --- 17.react [-i18next](https://github.com/i18next/react-i18next) - React 的國際化做得很好。 -------------------------------------------------------------------------------  無需更改 webpack 配置或加入額外的 babel 轉譯器。 開始使用以下 npm 指令。 ``` npm i react-i18next ``` 我們來比較一下程式碼結構。 > 在使用react-i18next之前。 ``` ... <div>Just simple content</div> <div> Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>. </div> ... ``` > 使用react-i18next後。 ``` ... <div>{t('simpleContent')}</div> <Trans i18nKey="userMessagesUnread" count={count}> Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>. </Trans> ... ``` 您可以閱讀[文件](https://react.i18next.com/)並前往[Codesandbox 的互動式遊樂場](https://codesandbox.io/s/1zxox032q)。 該工具已被超過 182,000 名開發人員使用，在 GitHub 上擁有超過 8,000 顆星。軟體包中令人印象深刻的 3400k+ 下載量進一步鞏固了它的可信度，使其成為您下一個 React 專案的絕佳選擇。 您也可以閱讀 Locize 關於[React Localization - Internationalize with i18next](https://locize.com/blog/react-i18next/)的部落格。 https://github.com/i18next/react-i18next 明星react-i18next ⭐️ --- 哇！如此長的有用專案清單。 我知道您有更多想法，分享它們，讓我們一起建造：D 現在就這些了！ 在開展新專案時，開發人員經驗至關重要，這就是為什麼有些專案擁有龐大的社區，而有些則沒有。 React 社群非常龐大，所以成為這些社群的一部分，並使用這些開源專案將您的專案提升到一個新的水平。 祝你有美好的一天！直到下一次。 在 GitHub 上關注我。 https://github.com/Anmol-Baranwal 請關注 CopilotKit 以了解更多此類內容。 https://dev.to/copilotkit --- 原文出處：https://dev.to/copilotkit/libraries-you-should-know-if-you-build-with-react-1807
**透過研究和貢獻這些 Next.js 專案，了解大型 Web 應用程式的結構。 🚀** 參與現實世界的專案是開發者成長的關鍵策略。 ✅ 在本文中，我們編譯了一系列綜合性的 Next.js 專案供您研究和分析。 🚀 透過沉浸在這些擴充功能的 Web 應用程式的結構和程式碼庫中，您將收集有關最佳實踐、專案組織和高級方法的寶貴經驗。 無論您是初學者並尋求基本理解，還是經驗豐富的開發人員旨在提高您的能力，這些專案都提供了不可或缺的資源來增強您的專業知識並充滿信心地應對複雜的任務。 💯 --- Supabase⭐ -----  **[Supabase](https://github.com/supabase/supabase)**是 Firebase 的開源替代品，提供全面的 PostgreSQL 資料庫、即時功能、簡化的身份驗證、流暢的儲存整合等等。該平台使開發人員能夠製作可擴展且強化的 Web 應用程式，同時確保與流行工具和擴展的兼容性。 除了核心產品外，Supabase 還擁有一系列補充功能，例如嵌入向量（地理空間資料的理想選擇）、即時訂閱、邊緣功能（用於無伺服器運算）、遷移幫助、專案管理實用程式、命令列介面( CLI)，以及與各種其他服務的無縫整合。 --- Cal.com ⭐ ---------  **[Cal.com](https://github.com/calcom/cal.com)**是一個開源調度解決方案，為使用者提供對其資料、工作流程和美學偏好的完全自主權。作為 Calendly 的進化繼承者，它提供自託管選項和透過 Cal.com, Inc. 進行託管，可適應使用者的網域。 Cal.com 的與眾不同之處在於它與眾多服務的無縫集成，包括 Google Calendar、Zoom、Daily.co、HubSpot 等。此外，它還有助於自訂、白標籤和 API 可存取性。其內建的應用程式商店使用戶能夠根據自己的需求輕鬆合併或刪除整合。 --- Infisical ⭐ ----  **[Infisical](https://github.com/Infisical/infisical)**是一種開源秘密管理解決方案，可讓團隊整合其敏感資料，例如 API 金鑰、資料庫憑證和配置。其一系列功能包括用戶友好的儀表板、客戶端 SDK、CLI、API、本機整合、Kubernetes 操作員、代理、自託管功能、秘密版本控制、基於角色的存取控制、秘密掃描等。這種多樣化的功能集促進了 Next.js 生態系統內的廣泛學習和實驗。 --- Dub.co ⭐ -------  **[Dub.co](https://github.com/dubinc/dub)**是一款專為當代行銷團隊設計的尖端連結管理工具，使他們能夠產生、分發和監控短連結。其突出的功能之一是能夠在您的伺服器上自行託管 Dub.co，從而更好地控制資料和設計。這提供了一個探索 Next.js 的令人興奮的機會。 --- Twenty⭐ ---  在考慮替代方案時， **[Twenty](https://github.com/twentyhq/twenty)**因其提供完全控制、自由以及用戶貢獻、自我託管和分叉的機會而脫穎而出，從而擺脫了供應商鎖定，並使用戶能夠影響 CRM 的開放未來。此外，它非常重視來自不同來源的資料可存取性和視覺化，而無需進行改造，同時擁有受 Notion 啟發的直覺設計介面。 --- Inbox Zero⭐ ------  **[Inbox Zero](https://github.com/elie222/inbox-zero)**作為一款開源電子郵件應用程式脫穎而出，旨在透過 AI 支援快速引導用戶進入 Inbox Zero。其顯著特點在於利用人工智慧幫助用戶處理電子郵件訂閱、自動回覆、防止不需要的電子郵件以及分析收件匣內容。 此外，人工智慧使用戶能夠使用簡單的語言命令與應用程式進行通信，以根據預先定義的標準執行回覆、轉發或存檔電子郵件等操作。此外，使用者可以選擇進入規劃模式，在實施之前查看人工智慧產生的建議。 --- Rally⭐ ----  **[Rally](https://github.com/lukevella/rallly)**是一款網路應用程式，可根據參與者的空閒情況產生民意調查，從而簡化了小組會議的安排。用戶無需註冊即可輕鬆加入投票；他們只需輸入姓名和電子郵件即可。這種簡化的方法為 Rally 提供了許多優於替代方案的優勢，例如簡單性、隱私性和自訂選項。 --- Formbricks ⭐ -----  **[Formbricks](https://github.com/formbricks/formbricks)**是一個開源調查平台，使用戶能夠從多個管道收集回饋並與各種工具無縫整合。透過其直覺的無程式碼編輯器，使用者可以輕鬆地進行調查，精確定位特定的使用者人口統計資料，與團隊成員協作，並利用 Formbricks Insight 平台進行資料分析或開發自訂分析解決方案。 --- Civita⭐ ---  **[Civita](https://github.com/civitai/civitai)**作為一個開源中心，使個人能夠交流、合作，並從彼此的精細擴散模型中收集見解以進行人工智慧客製化。透過該平台，使用者可以參與協作，對其他成員的模型提供評論和回饋，從而培養共享學習和合作的文化。 --- Plane⭐ ---  **[Plane](https://github.com/makeplane/plane)**是一個可免費存取的專案管理解決方案，旨在簡化問題、史詩和產品路線圖的追蹤。它被全球眾多公司使用，擁有用戶友好的介面、強大的查詢功能、可自訂的工作流程選項，以及與 GitHub、Slack 和 Figma 等領先平台的無縫整合。 --- Daily.dev ⭐ ------  最後， **[Daily.dev](https://github.com/dailydotdev/apps)**脫穎而出，成為為尋求提陞技能、促進協作和集體發展的開發人員量身定制的首要平台。其功能包括個人化提要自訂、文章書籤、跨裝置同步以及整合到充滿活力的開發者社群。 其 Web 應用程式由 Next.js 的尖端增量靜態生成功能提供支持，可確保快速的頁面交付，增強用戶探索。利用這項技術，Daily.dev 從領先的技術出版物中精選了不同主題的最新節目更新，幫助用戶及時了解行業趨勢、獲得新的技能並挖掘技術領域令人興奮的前景。 --- 結論🔻 --- 深入研究各種廣泛的 Next.js 專案，為渴望增強理解力和提高能力的個人打造一個豐富的學習平台。 透過剖析和深入研究這些有形的應用程式，我們收集了有關複雜方法、專案框架和最佳策略的寶貴知識。 無論是渴望鞏固基礎知識還是完善現有專業知識，沉浸在這些事業中都可以提供一條實用的途徑來提高熟練程度並有把握地應對複雜的障礙。 把握機會在 Next.js 領域深入研究、發現並踏上永久學習和進步的旅程！ --- ***快樂編碼！*** 🔥 **[領英](https://www.linkedin.com/in/dev-alisamir)** **[X（推特）](https://twitter.com/dev_alisamir)** **[電報](https://t.me/swe_alisamir)** **[Youtube](https://www.youtube.com/@DevGuideAcademy)** **[不和諧](https://discord.gg/s37uutmxT2)** **[Facebook](https://www.facebook.com/alisamir.dev)** **[Instagram](https://www.instagram.com/alisamir.dev)** --- 原文出處：https://dev.to/alisamirali/top-open-source-nextjs-projects-for-meaningful-contributions-5hn4
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
