長話短說 ---- 本文列出了 2024 年我作為開發人員在日常生活中最常使用的 4 個工具。✅ 這些工具旨在提高您的編輯技能、終端導航、筆記以及在應用程式容器化之外使用 Docker。另外，最後我還幫大家準備了一個小驚喜。 😉 > 如果您沒有使用本文中至少提到的 1-2 個工具，那麼我告訴您，朋友，您就錯過了。絕對至少嘗試其中的一些。以後你會感謝我的。 😎  --- 1. [Tmux——](https://github.com/tmux/tmux/wiki)**終端復用器** ------------------------------------------------------- > ℹ️我認為沒有任何理由不使用Tmux。只要您必須在航站樓工作，相信我，這會讓您的生活變得更加輕鬆。  每次需要在終端機中處理其他事情時，您是否都會開啟新選項卡，並且目前的終端視窗已被佔用？相信我，這件事會讓你大吃一驚。 🤯 您可以將選項卡/視窗分割為多個窗格。此外，還有一個會話的概念，它允許您打開多個窗口，完全獨立於其他會話，從而可以輕鬆地同時處理多個專案。 看到圖片了嗎？我的筆記在另一個視窗中，點檔案配置在另一個視窗中。它們之間的切換非常簡單和方便。 **劇透警告**：在終端機中工作時，您將永遠不想使用滑鼠。 😉 > 我開始使用 Tmux 的時間並不長，但現在它已經成為我離不開的主要核心實用程式。 🔥 --- 2. [Neovim](https://neovim.io/) **- 首選程式碼編輯器** --------------------------------------------- > ❓ 你喜歡在航站樓工作嗎？如果是，那麼您可能不知道您需要這個程式碼編輯器。試一試。  我是 VSCode 的忠實粉絲，現在仍然如此。幾個月前我對 Vim 和 Neovim 一無所知。但現在，請相信我，在這幾個月裡，我一次都沒有碰過 VSCode。 🫠 也許您和我一樣是 VSCode 的忠實粉絲，但請嘗試將自己切換到 Vim 動作。這是您可以為自己做的提高生產力的最佳事情。一旦您將編輯器轉移到終端，您將慢慢開始生活在終端本身。 儘管終端中的編輯器可能不適合每個人的口味，但至少嘗試使用一次，看看它是否是您的選擇。 --- 3. [Obsidian](https://obsidian.md) **- 很棒的筆記** ---------------------------------------------- > 🧠 我的第二個大腦，如果你現在開始使用它，它也會是你的。  我知道您可能正在使用一些很酷的筆記工具，例如 Notion、Evernote 等。但是，您還記得上次打開這些筆記應用程式來實際參考您幾個月前寫的東西是什麼時候嗎？ 🤔 看，你們大多數人沒有答案。所以卸載這些，現在就做！  這正是 Obsidian 解決的問題。將其視為您的**第二個大腦**。這個工具非常好，我可以在虛擬桌面上一直打開 GUI，或者在 Tmux 視窗中打開它，這樣每當我編寫程式碼並需要引用我的筆記時，我都可以使用**obsidian.nvim**輕鬆完成此操作來自我的編輯。 🔥 在[obsidian.nvim](https://github.com/epwalsh/obsidian.nvim)上了解更多。 > 我也從 Notion 切換到 Obsidian。相信我，這是我做出的最好的轉變之一，我將終生珍惜這一轉變。別擔心，您可以輕鬆地將現有筆記從筆記工具匯入到 Obsidian。 --- 4. [Docker](https://docker.com) **- 超越容器化** ------------------------------------------- > 🐳 它不僅僅用於容器化您的應用程式嗎？如果沒有，我想是時候了。  大多數情況下，當我們想到 Docker 時，我們只是將其視為容器化應用程式的一種方式。我們知道使用 Docker 的方法有很多，但我們只是忽略它們。但是，更像是您的日常司機，而不僅僅是為了一個目的。 最近，我想嘗試使用 Arch，所以我可以說，「**我使用 Arch，順便說一句！** 」 😉 但我不想從頭開始安裝一個全新的 Linux 發行版，只是為了看看我是否不想繼續使用 Arch。為此，我只是用 Arch 映像啟動了一個 Docker 容器並開始使用它。如果我將來不喜歡它，我會簡單地刪除該死的圖像及其容器。就這樣，我恢復正常了。🔥 > ⁉️**為什麼不針對該用例使用虛擬機器？** 在虛擬機器中，你必須分配所有資源，說實話，這會感覺更臃腫。但透過這種方法，您將擁有一個完整、完全流暢的作業系統，而無需從頭開始手動執行任何操作。 另外，最近我必須處理透過 SSH 連接到遠端伺服器的問題，而我的基於金鑰的身份驗證不起作用。為了除錯問題是否出在我這邊，我只需使用 Alpine 啟動一個 Docker 容器，在那裡設定我的 SSH 金鑰，然後它就成功連接了。主要問題是`ssh-daemon`錯誤配置，由於`/etc/ssh/sshd_config`檔案中`PubKeyAuthentication no`因此伺服器本身不接受基於金鑰的身份驗證。 Docker 太漂亮了😻，試著經常使用它。 --- 只為您帶來驚喜！ 😉 ---------- Microsoft 提供有關雲端、DevOps 和開發的免費認證課程！ ✅ 無需付款、無需訂閱、無需註冊。剛開始學習！ 🚀 > ⚠️**注意**：您將被重定向到 Microsoft 官方網站。 https://learn.microsoft.com/training?wt.mc\_id=studentamb\_366508 感謝您的閱讀！我希望你至少嘗試其中的一些。 🫡 https://dev.to/shricodev --- 原文出處：https://dev.to/shricodev/4-core-developer-tools-i-use-in-my-daily-life-2524
長話短說 ==== 我收集了您應該了解的 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
--- 標題：加入我們的第一個社群挑戰：前端挑戰 發表：真實 標籤： frontendchallenge, devchallenge, css, javascript 封面圖：https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfwaylumsyrf5t3upl4v.jpg --- 我們很高興推出我們的**第一個官方[開發挑戰賽](https://dev.to/devteam/introducing-dev-challenges-1mk9)**：前端挑戰賽！ 這項挑戰將持續到 3 月 31 日，這將是一個展示您的創造力、建立您的個人資料、贏得徽章的機會，總的來說，您將獲得很多樂趣。 對於第一個挑戰，我們有三個提示 -**您可以只參加一個或全部三個**。也歡迎在同一提示下多次提交，但請務必遵循我們的提交指南。 對於本次挑戰，每個提示都會有一名獲勝者。獲獎者將獲得專屬 DEV 榮譽徽章以及[DEV 商店](https://shop.forem.com)贈送的禮物。有效提交的參與者將獲得完成徽章。 繼續閱讀以了解每個提示以及如何參與！ 提示 -- *仔細閱讀這些提示，然後使用模板提交挑戰。* ### CSS 藝術挑戰賽🎨 把你最喜歡的零食變成 CSS 藝術作品，讓我們驚嘆不已。 您提交的內容**不應使用任何 JavaScript** ，並且應在 CSS 中發揮您的創造力，並且看起來應該很美味。您提交的內容將包括標記，可能包括 SVG 等，但主要應該*展示*您的 CSS 技能。 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看所有評審標準、挑戰規則以及[官方挑戰頁面](https://dev.to/challenges/frontend)上的常見問題： {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20false%0Atags%3A%20frontendchallenge%2C%20devchallenge%2C%20css%0A---% 0A%0A\_This%20is%20a%20submission%20for%20DEV%20Challenge%20v24.03.20%2C%20CSS%20Art%3A%20Favorite%20Snack.\_%0A%0A%23%3A%20Favorite%20Snack.\_%0A%0A%23%3pi%202323pi7%20A%3pi%C% 21--%20What%20snack%20are%20you%20highlighting%20today%3F%20--%3E%0A%0A%23%23%20Demo%0A%3C%21--%20Show%20us%20your%20CSS% 20Art!%20You%20can%20直接%20embed%20an%20editor%20into%20this%20post%20（參見%20the%20FAQ%20section%20of%20the%20challenge%20page）%20%2000%20%20you 20an% 20image%20of%20your%20project%20and%20share%20a%20public%20link%20to%20the%20code.%20--%3E%0A%0A%23%23%20Journey%0A%3%21 %20告訴%20us%20about%20your%20process%2C%20what%20you%20learned%2C%20anything%20you%20are%20尤其%20proud%20of%2C%20what%20you%20hope%20proud%20of%2C%20what%20you%20hope%20to% %20etc.% 20--%3E%0A%0A%3C%21--%20團隊%20Submissions%3A%20請%20pick%20one%20member%20to%20publish%20the%20submission%20and%20ammacredit 20by%20listing%20their% 20DEV%20usernames%20直接%20in%20the%20body%20of%20the%20post。%20--%3E%0A%0A%3C%21--%20我們%20鼓勵%20you% 20to%20考慮%20加入%20a%20許可證%20for%20your%20code.%20--%3E%0A%0A%3C%21--%20Don%27t%20忘記%20to%20add%20a% 20cover%20image%20to%20your%20post%20(if% 20你%20想要）。%20--%3E%0A%0A%0A%3C%21--%20感謝%20%20參與！% 20--%3E %} CSS 藝術挑戰提交模板 {% 結束%} --- ### 讓我的標記更迷人💅 使用 CSS 和 JavaScript 使下面的入門 HTML 標記美觀、互動且有用。 您提交的內容應該比我們提供的 HTML 更有趣、更具互動性，而且也應該可用且易於存取。**您不應該直接編輯提供的 HTML，除非它是在程式中透過 JavaScript 功能進行編輯的。**最終結果應該可以改進現有的預期功能。我們期待風格*和*實質。 ***入門 HTML*** ``` <section id="camp-activities-inquiry"> <h1>Camp Activities Inquiry</h1> <form action="/submit-form" method="POST"> <label for="activity-select">Which camp activities are you most looking forward to?</label> <select id="activity-select" name="activity"> <option value="">--Please choose an option--</option> <option value="hiking">Hiking</option> <option value="canoeing">Canoeing</option> <option value="fishing">Fishing</option> <option value="crafts">Crafts</option> <option value="archery">Archery</option> </select> <label for="food-allergies">Food Allergies (if any)</label> <textarea id="food-allergies" name="food_allergies" rows="4" cols="50"></textarea> <label for="additional-info">Additional things the counselor should know</label> <textarea id="additional-info" name="additional_info" rows="4" cols="50"></textarea> <button type="submit">Submit</button> </form> </section> ``` 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看所有評審標準、挑戰規則以及[官方挑戰頁面](https://dev.to/challenges/frontend)上的常見問題： {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20false%0Atags%3A%20frontendchallenge%2C%20devchallenge%2C%20css%2C%endchallenge%2C%20devchallenge%2C%20css%2C%20javascript%0A ---%0A%0A\_This%20is%20a%20submission%20for%20DEV%20Challenge%20v24.03.20%2C%20Glam%20Up%20My%20Markup%3A%20Camp%20Activities\_%A% 20I%20Built%0A%3C%21--%20告訴%20us%20什麼%20you%20built%20和%20what%20you%20是%20look%20to%20實現。%20--%3E%0A% 0A%23%23 %20Demo%0A%3C%21--%20Show%20us%20your%20project!%20You%20can%20直接%20embed%20an%20editor%20into%20this%20postthe%20this%20post20( 20FAQ%20section%20from% 20%20挑戰%20頁)%20或%20you%20can%20share%20an%20image%20of%20your%20project%20和%20share%20a%20037% 20碼。%20--%3E%0A% 0A%23%23%20旅程%0A%3C%21--%20告訴%20us%20about%20your%20process%2C%20what%20you%20learned%2C% 20anything%20you%20are%20specially%20proud%20of%2C% 20what%20you%20hope%20to%20do%20next%2C%20etc.%20--%3E%0A%0A%3C%21%20etc.%20--%3E%0A%0A%3C%21%200ams %3A%20Please%20pick%20one%20member%20to%20publish %20the%20submission%20and%20credit%20teammates%20by%20listing%20他們的%20DEV%20usernames%20直接7% 20post。%20--%3E%0A%0A%3C%21- -%20我們%20鼓勵%20you%20to%20考慮%20為%20您的%20程式碼加入%20a%20許可證%20 .%20--%3E%0A%0A%3C%21--%20不要%27t%20忘記%20to%20add %20a%20cover%20image%20to%20your%20post%20(如果%20you%20想要)。%20--%3E%0A%0A%0A%3C%21--%20感謝%20%20的參與！%20- -%3E%} 使我的標記提交模板更加迷人 {% 結束%} --- ### 一位元組解釋器✍️ 用**256 個或更少的字元**解釋瀏覽器 API 或功能。 選擇任何瀏覽器 API（例如“fetch”、“DOM”、“Geolocation”）並*簡要*解釋它的作用，也許它是如何工作的，以及為什麼有人可能會使用它。您有 256 個字元（比一條推文還少）來表達您的觀點，因此挑戰在於*保持簡單*。 你無法用 256 個字元涵蓋所有細節，但你能挑出最重要的嗎？只要符合請求的精神，我們在這裡對*API 或功能*的定義是靈活的。 這是供任何想要直接參與的人使用的提交模板，但請在提交之前查看所有評審標準、挑戰規則以及[官方挑戰頁面](https://dev.to/challenges/frontend)上的常見問題： {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20false%0Atags%3A%20frontendchallenge%2C%20devchallenge%2C%20javascript%2C%endchallenge%2C%20devchallenge%2C%20javascript%2C%20webdev%0A ---%0A%0A\_This%20is%20a%20submission%20for%20DEV%20Challenge%20v24.03.20%2C%20One%20Byte%20Explainer%3A%20Browser%20API%20Byte%20Explainer%3A%20Browser%20API%20or% 23%20解釋%0A%3C%21--%20解釋%20a%20瀏覽器%20API%20or%20feature%20in%20256%20字元%20或%20less。%20--%3E%0A%0A %23%23%20附加%20Context%0A%3C%21--%20請%20share%20any%20additional%20context%20you%20think%20the%20judges%20should%20take%20into%20sideity% %20to%20your%20One%20Byte %20解釋者。%20--%3E%0A%0A%3C%21--%20團隊%20Submissions%3A%20請%20pick%20one%20member%20to%20publish% 20the%20submission%20and%20credit%20teammates%20by% 20列出%20他們的%20DEV%20用戶名%20直接%20in%20the%20body%20of%20the%20post。%20--%3E%0A% 0A%3C%21--%20Don%27t%20forget%20to%20add%20a %20cover%20image%20to%20your%20post%20(如果%20you%20想要)。%20--%3E%0A% 0A%0A%3C%21--%20感謝%20%20的參與！%20--% 3E%} 一字節解釋提交模板 {% 結束%} --- 如何參與 ---- 為了參與，您需要使用提示的提交範本發布貼文。 **您可以在[官方挑戰頁面](https://dev.to/challenges/frontend)上找到所有評審標準、官方挑戰規則（即資格）、我們的常見問題解答等，因此請務必仔細閱讀。** {% cta https://dev.to/challenges/frontend %} 官方挑戰頁面 {% 結束%} 重要的日子 ----- - 3 月 20 日：前端挑戰 v24.03.20 開始！ - 3 月 31 日：提交截止時間為太平洋夏令時間晚上 11:59 - 4 月 2 日：公佈得獎者 - 4 月 3 日：敬請期待我們的下一個挑戰 我們很高興看到誰最終能在我們的第一個挑戰中獲得吹噓的權利！問題？請在下面詢問他們。 祝你好運，編碼愉快！ --- 原文出處：https://dev.to/devteam/join-our-first-community-challenge-the-frontend-challenge-8be
經過數月的開發和測試，我們很高興地宣布 AnalogJS 1.0 版本發布！ `1.0`版本包含許多功能，可協助開發人員使用 Angular 更快地交付網站和應用程式。 此版本標誌著 Analog 的第一個主要版本，為開發人員使用 Analog 進行建置提供了更穩定的起點。我們將繼續從開發人員那裡獲得回饋，幫助我們繼續改進和創新專案。 特點⭐️ ---- Analog 是建構在 Angular 之上的元框架，由下一代開源建置工具[Vite](https://vitejs.dev)和開源伺服器引擎框架[Nitro](https://nitro.unjs.io)提供支援。以下是它的一些功能，包括： - 對 Vite 生態系統的一流支援（Vitest、Playwright、Cypress 等） - [基於檔案系統的路由](https://analogjs.org/docs/features/routing/overview) - [支援 Markdown](https://analogjs.org/docs/features/routing/content)頁面和博客 - [支援 API/伺服器路由](https://analogjs.org/docs/features/api/overview) - 具有網站地圖和 RSS 提要支援的混合[SSR](https://analogjs.org/docs/features/server/server-side-rendering) / [SSG](https://analogjs.org/docs/features/server/static-site-generation) - 支援 Angular CLI/ [Nx 工作區](https://analogjs.org/docs/integrations/nx) - 與[tRPC](https://trpc.io)整合以實現類型安全的伺服器交互 - 伺服器和部署支援 - 和更多！ 貢獻和社區🤓 ------ 如果沒有核心貢獻者和合作者團隊，AnalogJS 就不會有今天的成就。 [羅賓·戈茨](https://twitter.com/goetzrobin) [馬爾科·斯塔尼米羅維奇](https://twitter.com/markostdev) [路易斯·卡斯特羅](https://twitter.com/LuisHCCDev) [週陳](https://twitter.com/nartc1410) [約書亞·莫羅尼](https://twitter.com/joshuamorony) [安德烈斯·維拉紐瓦](https://twitter.com/villanuevand) 此外，也要感謝該專案的[80 多名貢獻者](https://github.com/analogjs/analog#contributors-)，無論是透過程式碼、文件、測試，還是只是嘗試該專案。 該專案已經在[GitHub](https://github.com/analogjs/analog)上擁有超過 2000 顆星，在[Discord](https://chat.analogjs.org)上擁有超過 500 名成員，在[Twitter/X](https://twitter.com/analogjs)上擁有超過 1000 名追蹤者，並被納入第一批[GitHub 加速器隊列](https://accelerator.github.com/)。 {% youtube H4U6udLcM-Q %} 如果您想嘗試 Analog，請查看這篇有關使用 Analog 和 Angular[建立部落格](https://dev.to/analogjs/how-to-build-a-blog-with-analog-and-angular-4pk2)的部落格文章。如果您想參與該專案，請查看[GitHub 儲存庫](https://github.com/analogjs/analog)。 下一步是什麼 ------ 我們將繼續使用 Analog 和 Angular 盡可能無縫地建立全端網站和應用程式，並透過與[Astro](https://astro.build) 、 [Nx](https://nx.dev) 、 [Vitest](https://analogjs.org/docs/features/testing/vitest) 、 [Storybook](https://storybook.js.org)等整合來擴展 Angular 生態系統。 我們還在 Analog 中引入了一種新的單文件元件格式，用於編寫元件和指令。 以下是`hello.analog`檔案的範例： ``` <script lang="ts"> import { signal } from '@angular/core'; const count = signal(0); function increment() { count.update(total => ++total); } </script> <template> <h2>Hello Analog</h2> Count: {{ count() }} <button (click)="increment()"> Increment </button> </template> <style> h2 { color: red; } </style> ``` 最初是使用 Angular 的元件和指令的`.ng`檔案副檔名，現已發展成為模擬 SFC，其功能包括支援[自動導入](https://github.com/analogjs/analog/discussions/901)、內聯 Markdown 模板、頁面路由等。隨著 Analog 未來的發展，我們將繼續迭代這種方法，並探索在 Angular 應用程式中啟用這種格式的選項。 我們已經收到了非常積極的回饋，甚至還收到了支援這種格式的進一步開發，包括[用於模擬 SFC 的 IDEA 插件](https://plugins.jetbrains.com/plugin/23913-analog?noRedirect=true)，該插件可在 WebStorm 的 EAP 版本中使用。感謝 JetBrains 團隊的[Jan-Niklas Wortmann](https://twitter.com/niklas_wortmann)和[Piotr Tomiak](https://twitter.com/PiotrekTomiak)對此外掛程式的初步開發。您也可以在[GitHub](https://github.com/analogjs/idea-plugin)上為該插件做出貢獻。 與 Analog 合作🤝 ------------ 我們正在尋找與模擬專案合作的公司，以支持該專案的開發。感謝[Snyder Technologies](https://snyder.tech/)作為 Analog 的早期採用者和推動者，[感謝 Nx](https://nx.dev)作為贊助商加入我們，[感謝 House of Angular](https://houseofangular.io)以及該專案的許多其他支持者。 了解有關我們[合作機會](https://analogjs.org/docs/sponsoring)的更多資訊或直接聯繫贊助商\[at\]analogjs.org。 加入社群🥇 ----- - 存取[GitHub 儲存庫](https://github.com/analogjs/analog)並為其加註星標 - 加入[不和諧](https://chat.analogjs.org) - 在[推特](https://twitter.com/analogjs)上關注我們 如果您喜歡這篇文章，請點擊 :heart: 這樣其他人就會看到它。在 Twitter/X 上關注[AnalogJS](https://twitter.com/analogjs)和 \[me\] (https://twitter.com/brandontroberts)，並訂閱我的[YouTube 頻道](https://youtube.com/brandonrobertsdev?sub_confirmation=1)以獲取更多內容！ --- 原文出處：https://dev.to/analogjs/announcing-analogjs-10-19an
過去十年來，人工智慧世界取得了長足發展。 人工智慧無所不在，從語音助理到軟體開發，如果我們正確使用它，它會非常有幫助。 在這樣的世界中，製作 AI 應用程式是有利可圖的，因此我在這裡介紹 25 個開源專案，您可以使用它們來製作 AI 應用程式並將其提升到新的水平。 其中有一些令人興奮的概念，例如使用語音合成與 3D 角色進行互動式溝通。堅持到底。 將會有大量的資源、文章、專案想法、指南等可供參考。 讓我們涵蓋這一切！ --- 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/) Taipy 在 GitHub 上有 7k+ Stars，並且處於`v3`版本，因此它們正在不斷改進。  https://github.com/Avaiga/taipy Star Taipy ⭐️ --- 2. [Supabase](https://github.com/supabase/supabase) - 開源 Firebase 替代品。 ----------------------------------------------------------------------  要建立AI應用程式，您需要一個後端，而Supabase作為優秀的後端服務提供者可以滿足這一需求。 開始使用以下 npm 指令 (Next.js)。 ``` npx create-next-app -e with-supabase ``` 這就是使用 CRUD 操作的方式。 ``` import { createClient } from '@supabase/supabase-js' // Initialize const supabaseUrl = 'https://chat-room.supabase.co' const supabaseKey = 'public-anon-key' const supabase = createClient(supabaseUrl, supabaseKey) // Create a new chat room const newRoom = await supabase .from('rooms') .insert({ name: 'Supabase Fan Club', public: true }) // Get public rooms and their messages const publicRooms = await supabase .from('rooms') .select(` name, messages ( text ) `) .eq('public', true) // Update multiple users const updatedUsers = await supabase .from('users') .eq('account_type', 'paid') .update({ highlight_color: 'gold' }) ``` 您可以閱讀[文件](https://supabase.com/docs)。 您可以使用身份驗證、即時、邊緣功能、儲存等功能建立一個速度極快的應用程式。 Supabase 涵蓋了這一切！ Supabase 也提供了幾個入門套件，例如[Nextjs 與 LangChain](https://github.com/langchain-ai/langchain-nextjs-template) 、 [Stripe 與 Nextjs](https://github.com/vercel/nextjs-subscription-payments)或[AI Chatbot](https://github.com/supabase-community/vercel-ai-chatbot) 。 Supabase 在 GitHub 上擁有超過 63,000 顆星，並且擁有大量提交超過 27,000 次的貢獻者。 https://github.com/supabase/supabase 明星 Supabase ⭐️ --- 3. [Chatwoot](https://github.com/chatwoot/chatwoot) - 即時聊天、電子郵件支援、全通路服務台並擁有您的資料。 --------------------------------------------------------------------------------  Chatwoot 連接流行的客戶溝通管道，如電子郵件、網站即時聊天、Facebook、Twitter、WhatsApp、Instagram、Line 等。這有助於您從單一儀表板跨管道提供一致的客戶體驗。 這在各種情況下都可能很重要，例如當您圍繞人工智慧應用程式建立社群時。  您可以閱讀[文件](https://www.chatwoot.com/docs/product)來發現各種整合選項，以便更輕鬆地管理整個生態系統。 他們在每個整合中都有非常詳細的文件和快照範例，例如[帶有 WhatsApp Cloud API 的 WhatsApp 通道](https://www.chatwoot.com/docs/product/channels/whatsapp/whatsapp-cloud)。您可以根據需要一鍵式或自架部署到 Heroku。 他們在 GitHub 上擁有 18k+ Stars，並且發布了`v3.6`版本。 https://github.com/chatwoot/chatwoot 明星 Chatwoot ⭐️ --- 4. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 ------------------------------------------------------------------------------------  您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea ``` 這是整合 CopilotTextArea 的方法。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { useState } from "react"; export function SomeReactComponent() { const [text, setText] = useState(""); return ( <> <CopilotTextarea className="px-4 py-4" value={text} onValueChange={(value: string) => setText(value)} placeholder="What are your plans for your vacation?" autosuggestionsConfig={{ textareaPurpose: "Travel notes from the user's previous vacations. Likely written in a colloquial style, but adjust as needed.", chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { max_tokens: 20, stop: [".", "?", "!"], }, }, }, }} /> </> ); } ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)。 基本概念是在幾分鐘內建立可用於基於 LLM 的全端應用程式的 AI 聊天機器人。 https://github.com/CopilotKit/CopilotKit Star CopilotKit ⭐️ --- 5. [DALL·E Mini](https://github.com/borisdayma/dalle-mini) - 根據文字提示產生圖像。 ------------------------------------------------------------------------  OpenAI 擁有第一個令人印象深刻的模型，用於使用 DALL·E 生成圖像。 Craiyon/DALL·E mini 嘗試使用開源模型重現這些結果。 如果您想知道這個名字，DALL-E mini 應母公司的要求更名為 Craiyon，並以更易於存取的網路應用程式格式使用類似的技術。 您可以在[Craiyon](https://www.craiyon.com/)上使用該模型。  開始使用以下命令（用於開發）。 ``` pip install dalle-mini ``` 您可以閱讀[文件](https://github.com/borisdayma/dalle-mini?tab=readme-ov-file#development)。 您可以閱讀[DALL-E Mini 解釋](https://wandb.ai/dalle-mini/dalle-mini/reports/DALL-E-Mini-Explained-with-Demo--Vmlldzo4NjIxODA)來了解有關資料集、架構和所涉及演算法的更多資訊。 您可以閱讀[最佳真實感 AI 圖像和提示的終極指南](https://www.craiyon.com/blog/ultimate-guide-best-ai-art-photorealistic-images-and-prompts)，以便更好地理解優質資源。 DALL·E Mini 在 GitHub 上擁有 14k+ Stars，目前處於`v0.1`版本。 https://github.com/borisdayma/dalle-mini 明星 DALL·E Mini ⭐️ --- 6. [Deepgram](https://github.com/deepgram) - 將語音 AI 建置到您的應用程式中。 ---------------------------------------------------------------  從新創公司到 NASA，Deepgram API 每天都用於轉錄和理解數百萬分鐘的音訊。快速、準確、可擴展且經濟高效。 它為開發人員提供語音到文字和音訊智慧模型。  儘管他們有免費增值模式，但免費套餐的限制足以讓您入門。 可視化效果更上一層樓。您可以檢查即時串流媒體回應或音訊檔案並比較音訊的智慧程度。   您可以閱讀[文件](https://developers.deepgram.com/docs/introduction)。 您也可以閱讀 Deepgram 撰寫的[關於如何將語音辨識新增至您的 React 和 Node.js 專案的](https://deepgram.com/learn/how-to-add-speech-recognition-to-your-react-project)範例部落格。 如果您想嘗試 API 來親自了解模型的靈活性，請查看他們的[API Playground](https://playground.deepgram.com/?smart_format=true&language=en&model=nova-2) 。 https://github.com/deepgram 明星 Deepgram ⭐️ --- 7. [InvokeAI](https://github.com/invoke-ai/InvokeAI) - 領先的穩定擴散模型創意引擎。 ---------------------------------------------------------------------  關於 InvokeAI 是 Stable Diffusion（開源文字到圖像和圖像到圖像生成器）的實現。 它可以在 Windows、Mac 和 Linux 機器上執行，並在 RAM 低至 4 GB 的 GPU 卡上執行。 此解決方案提供業界領先的WebUI，支援透過CLI進行終端使用，並作為多種商業產品的基礎。  您可以閱讀有關[安裝和硬體要求](https://invoke-ai.github.io/InvokeAI/installation/INSTALLATION/)、[如何安裝不同型號](https://invoke-ai.github.io/InvokeAI/installation/050_INSTALLING_MODELS/)以及最重要的[自動安裝的資訊](https://invoke-ai.github.io/InvokeAI/installation/010_INSTALL_AUTOMATED/)。 令人興奮的功能是能夠使用另一個圖像生成圖像，如[文件](https://invoke-ai.github.io/InvokeAI/features/IMG2IMG/)中所述。 InvokeAI 在 GitHub 上有近 21k 顆星， https://github.com/invoke-ai/InvokeAI 明星 InvokeAI ⭐️ --- 8. [OpenAI](https://github.com/openai) - 您所需要的一切。 -------------------------------------------------  Gemini by Google 和 OpenAI 非常受歡迎，但我們在此列表中專注於 OpenAI。 如果您想了解更多訊息，可以在 Medium 上閱讀[Google AI Gemini API in web using React 🤖](https://generativeai.pub/google-gemini-api-in-web-using-react-7e5bf0bf0abc) 。這很簡單，也很切中要害。 透過 OpenAI，您可以使用 DALL·E（根據文字描述建立原創、逼真的圖像和藝術）、Whisper（語音辨識模型）和 GPT-4。在評論中告訴我們關於索拉的事吧！ 您可以使用簡單的 API 開始建置。 ``` completion = openai.ChatCompletion.create( model="gpt-3.5-turbo", messages=[ {"role": "system", "content": "You are a helpful assistant."}, {"role": "user", "content": "What are some famous astronomical observatories?"} ] ) ``` 您可以閱讀[文件](https://platform.openai.com/docs/introduction)。它提供瞭如此多的選項來建立非常酷的東西！  甚至 Stripe 也使用 GPT-4 來改善使用者體驗。 例如，您可以建立[Assistant 應用程式](https://platform.openai.com/docs/assistants/overview)並查看[API 遊樂場](https://platform.openai.com/playground/p/default-chat?model=text-davinci-003)以更好地理解它。  如果您需要指南，可以閱讀 Dzone 的[Integrating ChatGPT With ReactJS](https://dzone.com/articles/integrating-chatgpt-with-reactjs-a-comprehensive-g) 。 其間，OpenAI收購了Sora，獲得了壟斷地位。你怎麼認為？ https://github.com/openai 明星 OpenAI ⭐️ --- 9. [DeepFaceLab](https://github.com/iperov/DeepFaceLab) - 用於建立深度贗品的領先軟體。 ------------------------------------------------------------------------  DeepFaceLab 是製作 Deepfakes 的頂級開源工具。 Deepfakes 是透過深度學習製作的經過修改的圖像和影片。它們經常被用來交換圖片或剪輯中的臉孔，有時是為了開玩笑，但也有出於有害的原因。 DeepFaceLab，用Python建置，是一個強大的deepfake工具。它可以改變媒體中的臉孔，甚至消除皺紋和老化跡象。 這些是您可以使用 DeepFaceLab 執行的一些操作。 - 換臉。  - [臉部抗衰老 - YouTube](https://www.youtube.com/watch?v=Ddx5B-84ebo) 。  - 更換頭部。  - 操縱嘴唇。 您可以使用這個基本教學來了解[如何有效地使用 DeepFaceLab](https://www.youtube.com/watch?v=kOIMXt8KK8M)來完成這些事情。 您可以在[YouTube](https://www.youtube.com/channel/UCGf4OlX_aTt8DlrgiH3jN3g/videos)上看到使用此 DeepLab 演算法的影片。 不幸的是，DeepFaceLab 中沒有「讓一切正常」按鈕，但值得根據您的特定需求了解其工作流程。 儘管它於 2023 年 11 月 9 日存檔，在 GitHub 上有近 44k+ 顆星，但由於其大量的教程和可靠的演算法，它仍然是您的 AI 應用程式的可靠選擇。 https://github.com/iperov/DeepFaceLab 明星 DeepFaceLab ⭐️ --- 10. [Detectron2](https://github.com/facebookresearch/detectron2) - 基於 PyTorch 的模組化物件偵測庫。 ----------------------------------------------------------------------------------------  Detectron2 是 Facebook AI Research 的下一代函式庫，提供最先進的偵測和分割演算法。它是 Detectron 和 maskrcnn-benchmark 的後繼者。 它支援 Facebook 上的多個電腦視覺研究專案和生產應用程式。 使用此[YouTube 教學](https://www.youtube.com/watch?v=eUSgtfK4ivk)將 Detectron2 與 Facebook 開發者倡導者的機器學習結合使用。 Detectron2 旨在支援各種最先進的物件偵測和分割模型，同時也適應不斷發展的前沿研究領域。 您可以閱讀[如何入門](https://detectron2.readthedocs.io/en/latest/tutorials/getting_started.html)以及 [元博客](https://ai.meta.com/blog/-detectron2-a-pytorch-based-modular-object-detection-library-/)，其中深入介紹了 Detectron 的目標。 舊版的 Detectron 使用的是 Caffe，因此很難與後來結合 Caffe2 和 PyTorch 的程式碼變更一起使用。為了回應社群回饋，Facebook AI 發布了 Detectron2 作為更新的、更容易使用的版本。 Detectron2 配備了用於物件偵測的先進演算法，例如 DensePose 和全景特徵金字塔網路。 此外，Detectron2 還可以進行語義分割和全景分割，這有助於更準確地偵測和分割影像和影片中的物件。 Detectron2 不僅支援使用邊界框和實例分割遮罩進行物件偵測，還可以預測人體姿勢，與 Detectron 類似。 它們在 GitHub 儲存庫上擁有 28k+ Stars，並在 GitHub 上被 1.6k+ 開發人員使用。 https://github.com/facebookresearch/detectron2 Star Detectron2 ⭐️ --- [11.FastAI-](https://github.com/fastai/fastai)深度學習庫。 ----------------------------------------------------  Fastai 是一個多功能的深度學習庫，旨在滿足從業者和研究人員的需求。它為從業者提供了高級元件，以便他們在常見的深度學習任務中快速獲得一流的結果。 同時，它為研究人員提供低階元件來實驗和開發新方法。 Detectron2 透過其分層架構實現了易用性和靈活性之間的平衡。 該架構將複雜的深度學習技術分解為可管理的抽象，簡潔地利用了 Python 的動態特性和 PyTorch 的靈活性。 它建構在較低層級 API 的層次結構之上，這些 API 提供可組合的建構塊。這樣，想要重寫部分高級 API 或加入特定行為以滿足其需求的用戶無需學習如何使用最低級別。  [安裝 pyTorch](https://pytorch.org/get-started/locally/)後即可開始使用以下命令。 ``` conda install -c fastai fastai ``` 您可以閱讀[文件](https://docs.fast.ai/)。 它們針對初學者、中級和專家的[教程](https://docs.fast.ai/tutorial.html)有不同的起點。 如果您想為 FastAI 做出貢獻，您應該閱讀他們的[程式碼風格指南](https://docs.fast.ai/dev/style.html)。 如果您更喜歡影片，可以在 YouTube 上觀看傑里米霍華德 (Jeremy Howard) 撰寫的[課程“0”：程式設計師實用深度學習 (fastai)](https://www.youtube.com/watch?v=gGxe2mN3kAg) 。 它們在 GitHub 上擁有超過 25,000 顆星，並已被 GitHub 上超過 16,000 名開發人員使用。 https://github.com/fastai/fastai 明星 FastAI ⭐️ --- 12.[穩定擴散](https://github.com/CompVis/stable-diffusion)- 潛在文字到影像擴散模型。 --------------------------------------------------------------------  > 什麼是穩定擴散？ 穩定擴散是指生成模型中使用的一種技術，特別是在文字到圖像合成的背景下，其中將資訊從文字描述轉移到圖像的過程是逐漸且平滑地完成的。 在潛在文字到影像擴散模型中，穩定擴散可確保來自文字描述的訊息在整個模型的潛在空間中一致地擴散或傳播。這種擴散過程有助於產生與給定文字輸入相符的高品質和逼真的圖像。 穩定的擴散機制確保模型在生成過程中不會出現突然的跳躍或不穩定。我希望這能解決問題！ 下載和採樣穩定擴散的簡單方法是使用[擴散器庫](https://github.com/huggingface/diffusers/tree/main#new--stable-diffusion-is-now-fully-compatible-with-diffusers)。 ``` # make sure you're logged in with `huggingface-cli login` from torch import autocast from diffusers import StableDiffusionPipeline pipe = StableDiffusionPipeline.from_pretrained( "CompVis/stable-diffusion-v1-4", use_auth_token=True ).to("cuda") prompt = "a photo of an astronaut riding a horse on mars" with autocast("cuda"): image = pipe(prompt)["sample"][0] image.save("astronaut_rides_horse.png") ``` 您可以閱讀[研究論文](https://ommer-lab.com/research/latent-diffusion-models/)以及有關[穩定擴散影像修改](https://github.com/CompVis/stable-diffusion?tab=readme-ov-file#image-modification-with-stable-diffusion)的更多資訊。 例如，這是輸入。  這是放大一點後的輸出。  Stable Diffusion v1 是一種特定的模型配置，它採用 860M UNet 和 CLIP ViT-L/14 文字編碼器進行擴散模型，並具有下採樣因子 8 自動編碼器。該模型在 256x256 影像上進行了預訓練，隨後在 512x512 影像上進行了微調。 他們在 GitHub 儲存庫上擁有大約 64k+ Stars。 https://github.com/CompVis/stable-diffusion 恆星穩定擴散 ⭐️ --- 13. [Mocap Drones](https://github.com/jyjblrd/Mocap-Drones) - 用於房間規模追蹤的低成本動作捕捉系統。 ---------------------------------------------------------------------------------  該專案需要 SFM（運動結構）OpenCV 模組，這需要您從原始程式碼編譯 OpenCV。 從`computer_code`目錄中，執行此命令來安裝節點相依性。 ``` yarn install yarn run dev // to start the web server. ``` 您將獲得前端介面的 URL 視圖。 開啟一個單獨的終端機視窗並執行命令`python3 api/index.py`來啟動後端伺服器。此伺服器負責接收攝影機串流並執行動作捕捉計算。 架構如下。  您可以觀看此[YouTube 影片](https://www.youtube.com/watch?v=0ql20JKrscQ)來了解 Mocap 無人機的工作原理，也可以觀看該專案所有者的[部落格](https://joshuabird.com/blog/post/mocap-drones)。 https://www.youtube.com/watch?v=0ql20JKrscQ 您可以閱讀[文件](https://github.com/jyjblrd/Mocap-Drones?tab=readme-ov-file#runing-the-code)。 這是一個最近的開源專案，在 GitHub 儲存庫上擁有 900 多個 star。 https://github.com/jyjblrd/Mocap-Drones 明星動捕無人機 ⭐️ --- 14. [Whisper Speech](https://github.com/collabora/WhisperSpeech) - 透過反轉 Whisper 建構的文字轉語音系統。 -------------------------------------------------------------------------------------------  該模型與穩定擴散類似，但用於語音，功能強大且高度可自訂。 該團隊確保使用經過適當許可的語音錄音，並且所有程式碼都是開源的，使該模型對於商業應用程式來說是安全的。 目前，這些模型是在英語 LibreLight 資料集上進行訓練的。 您可以進一步研究[架構](https://github.com/collabora/WhisperSpeech?tab=readme-ov-file#architecture)。  您可以聽到[範例聲音](https://github.com/collabora/WhisperSpeech/assets/107984/aa5a1e7e-dc94-481f-8863-b022c7fd7434)並使用[colab](https://colab.research.google.com/drive/1xxGlTbwBmaY6GKA24strRixTXGBOlyiw)自行嘗試。 它們相當新，在 GitHub 上有大約 3k+ 的星星。 https://github.com/collabora/WhisperSpeech 星語語音 ⭐️ --- 15. [eSpeak NG](https://github.com/espeak-ng/espeak-ng) - 支援一百多種語言和口音的語音合成器。 ----------------------------------------------------------------------------  eSpeak NG 是一款緊湊型開源軟體文字語音合成器，適用於 Linux、Windows、Android 和其他作業系統。它支援 100 多種語言和口音。它基於 Jonathan Duddington 建立的 eSpeak 引擎。 您可以閱讀各種系統上的[安裝指南](https://github.com/espeak-ng/espeak-ng/blob/master/docs/guide.md)。 對於類似 Debian 的發行版（例如 Ubuntu、Mint 等）。您可以使用此命令。 ``` sudo apt-get install espeak-ng ``` 您可以查看[支援的語言](https://github.com/espeak-ng/espeak-ng/blob/master/docs/languages.md)清單、閱讀[文件](https://github.com/espeak-ng/espeak-ng/tree/master?tab=readme-ov-file#documentation)並查看[功能](https://github.com/espeak-ng/espeak-ng/tree/master?tab=readme-ov-file#features)。 該模型將文字轉換為音素程式碼，表明其作為另一個語音合成引擎前端的潛在能力。 他們在 GitHub 上有 2700+ 顆星星， https://github.com/espeak-ng/espeak-ng 明星 eSpeak NG ⭐️ --- 16.[聊天機器人 UI](https://github.com/mckaywrigley/chatbot-ui) - 每個模型的人工智慧聊天。 ------------------------------------------------------------------------  我們都使用過 ChatGPT，這個專案可以幫助我們為任何 AI 聊天機器人設定使用者介面。少一麻煩！ 你可以閱讀[安裝指南](https://github.com/mckaywrigley/chatbot-ui?tab=readme-ov-file#1-install-docker)來安裝 docker、supabase CLI 和其他東西。 您可以閱讀<a href="">文件</a>並查看[演示](https://twitter.com/mckaywrigley/status/1738273242283151777?s=20)。 這在底層使用了 Supabase (Postgres)，這就是我們之前討論它的原因。 我沒有討論 Vercel AI 聊天機器人，因為它與此機器人相比是一個相當新的比較。 Chatbot UI 在 GitHub 上擁有大約 25k+ Stars，因此它仍然是開發人員為任何聊天機器人建立 UI 介面的首選。 https://github.com/mckaywrigley/chatbot-ui 明星聊天機器人 UI ⭐️ --- 17. [GPT-4 & LangChain](https://github.com/mayooear/gpt4-pdf-chatbot-langchain) - 用於大型 PDF 文件的 GPT4 和 LangChain 聊天機器人。 --------------------------------------------------------------------------------------------------------------------------  這可用於新的 GPT-4 API 來為多個大型 PDF 檔案建立 chatGPT 聊天機器人。 該系統是使用 LangChain、Pinecone、Typescript、OpenAI 和 Next.js 建構的。 LangChain 是一個簡化可擴展 AI/LLM 應用程式和聊天機器人開發的框架。 Pinecone 用作向量存儲，用於以文字格式儲存嵌入和 PDF，以便以後檢索類似文件。 您可以閱讀涉及複製、安裝依賴項和設定環境 API 金鑰[的開發指南](https://github.com/mayooear/gpt4-pdf-chatbot-langchain?tab=readme-ov-file#development)。 您可以觀看[YouTube 影片](https://www.youtube.com/watch?v=ih9PBGVVOO4)，了解如何遵循和使用它。 他們在 GitHub 上擁有 14k+ Stars，僅提交了 34 次。在您的下一個人工智慧應用程式中嘗試！ https://github.com/mayooear/gpt4-pdf-chatbot-langchain 明星 GPT-4 和 Langchain ⭐️ --- 18. [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 多個 Star，看起來非常容易使用。 https://github.com/semperai/amica Star Amica ⭐️ --- 19. [Hugging Face Transformers](https://github.com/huggingface/transformers) - 適用於 Pytorch、TensorFlow 和 JAX 的最先進的機器學習。 ----------------------------------------------------------------------------------------------------------------------  Hugging Face Transformers 可以輕鬆存取最先進的預訓練模型和演算法，用於文字分類、語言生成和問答等任務。該庫建置在 PyTorch 和 TensorFlow 之上，允許用戶以最少的努力將高級 NLP 功能無縫整合到他們的應用程式中。 憑藉大量預訓練模型和支援社區，Hugging Face Transformers 簡化了基於 NLP 的解決方案的開發。 這些模型可用於執行 100 多種語言的文本相關任務，例如文字分類、資訊擷取、問答、摘要、翻譯和文字生成。 它們還可以處理與影像相關的任務，例如影像分類、物件偵測和分割，以及與音訊相關的任務，例如語音辨識和音訊分類。 他們還可以執行各種模式的多任務處理，包括表格問答、光學字元辨識、從掃描文件中提取資訊、視訊分類和視覺問答。 您可以看到大量可用的[模型](https://huggingface.co/models)。 您可以瀏覽[文件](https://huggingface.co/docs/transformers/task_summary)以取得完整的目標並向您展示可以執行的各種任務的範例。 例如，使用管道的一種方法是用於影像分割。 ``` from transformers import pipeline segmenter = pipeline(task="image-segmentation") preds = segmenter( "https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/pipeline-cat-chonk.jpeg" ) preds = [{"score": round(pred["score"], 4), "label": pred["label"]} for pred in preds] print(*preds, sep="\n") ``` Transformer 得到了 Jax、PyTorch 和 TensorFlow 這三個最廣泛使用的深度學習庫的支持，並且它們之間可以無縫整合。這種整合可以使用一個庫輕鬆訓練模型，然後加載它們以使用另一個庫進行推理。 它們在 GitHub 上擁有大約 120k+ 星，並被 142k+ 大量開發人員使用。試試看！ https://github.com/huggingface/transformers 明星抱臉變形金剛 ⭐️ --- 20. [LLAMA](https://github.com/facebookresearch/llama) - LLaMA 模型的推理程式碼。 ------------------------------------------------------------------------  Llama 2 是 Facebook Research 開發的尖端技術，使個人、創作者、研究人員和各種規模的企業能夠使用大型語言模型負責任地實驗、創新和擴展他們的想法。 最新版本包括模型權重以及預訓練和微調 Llama 語言模型的起始程式碼，參數範圍從 7B 到 70B。 開始使用涵蓋以下步驟的[安裝指南](https://github.com/facebookresearch/llama?tab=readme-ov-file#quick-start)。 - 克隆並下載儲存庫。 - 安裝所需的依賴項。 - 從 Meta 網站註冊並下載模型。 - 執行提供的腳本來下載模型。 - 使用提供的命令在本地執行所需的模型。 您可以觀看由 ZeroToMastery 製作的關於什麼是美洲駝的[YouTube 影片](https://www.youtube.com/watch?v=OqZ0CSKzu10)。 您也可以在[Hugging Face](https://huggingface.co/meta-llama)和[Meta 官方頁面](https://llama.meta.com/)上查看型號清單和更多資訊。 Ollama 基於 llama，在 GitHub 上擁有 50k+ star。請參閱文件並使用此模型進行更多研究。 https://github.com/facebookresearch/llama 明星 LLAMA ⭐️ --- 21. [Fonoster](https://github.com/fonoster/fonoster) - Twilio 的開源替代品。 ---------------------------------------------------------------------  Fonoster Inc. 研究了一種創新的可編程電信堆棧，該堆疊將為企業提供完全基於雲端的實用程序，將電話服務與網路連接起來。 根據您想要實現的目標，有多種開始方法。 開始使用以下 npm 指令。 ``` npm install @fonoster/websdk // CDN is also available ``` 例如，您可以透過以下方式將 Fonoster 與 Google Speech API 結合使用。 （您將需要服務帳戶的金鑰） ``` npm install @fonoster/googleasr @fonoster/googletts ``` 這是您可以配置語音伺服器以使用插件的方法。 ``` const { VoiceServer } = require("@fonoster/voice"); const GoogleTTS = require("@fonoster/googletts"); const GoogleASR = require("@fonoster/googleasr"); const voiceServer = new VoiceServer(); const speechConfig = { keyFilename: "./google.json" }; // Set the server to use the speech APIS voiceServer.use(new GoogleTTS(speechConfig)); voiceServer.use(new GoogleASR(speechConfig)); voiceServer.listen(async(req, res) => { console.log(req); await res.answer(); // To use this verb you MUST have a TTS plugin const speech = await res.gather(); await res.say("You said " + speech); await res.hangup(); }); ``` 您可以閱讀[文件](https://fonoster.com/docs/overview/)。 他們提供了一個足以入門的免費套餐。 他們在 GitHub 上擁有大約 6k+ 顆星，並發布了 250 多個版本。 https://github.com/fonoster/fonoster 明星 Fonoster ⭐️ --- 22. [DIPY](https://github.com/dipy/dipy) - Python 中的 paragon 3D/4D+ 成像庫。 ------------------------------------------------------------------------  DIPY 是 Python 中領先的 3D/4D+ 成像庫。它包含用於空間歸一化、訊號處理、機器學習、統計分析和醫學影像視覺化的各種方法。 此外，它還包含計算解剖學的專門方法，包括擴散、灌注和結構成像。 您可以開始使用。 ``` pip install dipy // run this in python console import dipy print(dipy.get_info()) ``` 如果您使用的是 anaconda 或其他系統，您可以閱讀完整的[安裝指南](https://docs.dipy.org/stable/examples_built/quick_start/quick_start.html#sphx-glr-examples-built-quick-start-quick-start-py)。 您可以閱讀[文件](https://docs.dipy.org/stable/)並存取他們的[YouTube 頻道](https://www.youtube.com/c/diffusionimaginginpython)。 你可以看看詳細的[例子](https://docs.dipy.org/stable/examples_built/index.html)。  他們的下載量超過 428k，並且在 GitHub 儲存庫上擁有 600 多個 Star。 https://github.com/dipy/dipy 明星 DIPY ⭐️ --- 23. [Elastic Search](https://github.com/elastic/elasticsearch) - 免費開放式、分散式、RESTful 搜尋引擎。 ----------------------------------------------------------------------------------------   Elasticsearch 是一種分散式、RESTful 搜尋和分析引擎，能夠解決大量使用案例。 作為 Elastic Stack 的核心，它集中儲存您的資料，以實現閃電般的快速搜尋、微調的相關性以及可輕鬆擴展的強大分析。 他們闡述了使用 ElasticSearch 的用例。  Elasticsearch 使用標準 RESTful API 和 JSON。我們也使用多種語言（例如 Java、Python、.NET、SQL 和 PHP）來建立和維護客戶端。 該結構如下。 ``` const { Client } = require('@elastic/elasticsearch') const client = new Client({ node: 'http://localhost:9200' }) client .search({ index: 'social-*', body: { query: { match: { message: 'myProduct' } }, aggs: { top_10_states: { terms: { field: 'state', size: 10 } } } } }) .then(({ body }) => { const { hits } = body.hits console.log(hits) }) .catch(console.error) ``` 您可以閱讀<a href="">文件</a>並查看[功能清單](https://www.elastic.co/elasticsearch/features)。 儘管具有有用的功能，Elastic Search 的主要缺點是缺乏免費套餐。但是，您仍然可以利用免費試用版來探索和了解開源專案的架構。 Elastic Search 在 GitHub 上擁有超過 67k+ 的星星和近 1900 名貢獻者，並且處於`v8`版本中，正在不斷發展和改進。 https://github.com/elastic/elasticsearch 明星 Elastic Search ⭐️ --- 24. [Tauri](https://github.com/tauri-apps/tauri) - 使用 Web 前端建立更小、更快且安全的桌面應用程式。 ------------------------------------------------------------------------------  Tauri 是一個工具包，旨在幫助開發人員利用幾乎任何可用的前端框架為主要桌面平台建立應用程式。其核心是使用 Rust 開發的，而 CLI 利用 Node.js，提供了一種真正的多語言方法來開發和維護卓越的應用程式。 Tauri 應用程式中的使用者介面目前利用 Tao 作為 macOS、Windows、Linux、Android 和 iOS 上的視窗處理庫。 為了渲染您的應用程式，Tauri 使用 WRY，這是一個為系統 Web 視圖提供統一介面的程式庫。它在 macOS 和 iOS 上利用 WKWebView、在 Windows 上利用 WebView2、在 Linux 上利用 WebKitGTK 以及在 Android 上利用 Android System WebView。 您可以使用 Vite、HTML/CSS/JS、Next.js、Svelte 等等。 開始使用以下 npm 指令。 ``` npm create tauri-app@latest ``` 您可以閱讀[文件](https://tauri.app/v1/guides/getting-started/prerequisites)並查看 Tauri 提供的[功能清單](https://tauri.app/v1/guides/features/)。 您甚至可以使用 Tauri 建立自己的 CLI，這有多酷:) 團隊提供了[YouTube 影片](https://www.youtube.com/watch?v=UxTJeEbZX-0&t=2s)，讓您了解更多關於 Tauri 的訊息。 他們在 GitHub 上擁有超過 75k 顆星星，並發布了 800 多個版本。 https://github.com/tauri-apps/tauri 金牛座之星 ⭐️ --- 25. [AutoGPT](https://github.com/Significant-Gravitas/AutoGPT) - 比 ChatGPT 更令人興奮。 ---------------------------------------------------------------------------------  AutoGPT 的核心在於其主要專案，即由大型語言模型 (LLM) 驅動的半自治代理，旨在為您執行任何任務。 AutoGPT 計畫由[四個主要部分](https://docs.agpt.co/#agent)組成： - 代理 – 也稱為“AutoGPT” - 基準 – 又稱 agbenchmark - 熔爐 - 前端 了解如何使用 OpenAI 金鑰[設定 AutoGPT](https://docs.agpt.co/autogpt/setup/) 。 您可以觀看[Fireship 發布的有關 AutoGPT 的 YouTube 影片](https://www.youtube.com/watch?v=_rGXIXyNqpk)。 https://www.youtube.com/watch?v=\_rGXIXyNqpk 您也可以觀看 Sentral Media 提供的[AutoGPT 教學](https://www.youtube.com/watch?v=FeIIaJUN-4A)。 您可以閱讀[文件](https://docs.agpt.co/)並查看[專案板](https://github.com/orgs/Significant-Gravitas/projects/1)，以了解目前正在開發的內容。 即使您對 AI 不太了解，您也可以嘗試 AutoGPT 以了解如何節省時間並建立很酷的東西。 由於如此出色的用例和自動化功能，他們在 GitHub Repo 上擁有大約 159k+ 的星星。 https://github.com/Significant-Gravitas/AutoGPT 明星 AutoGPT ⭐️ --- 還沒結束。 現在，讓我們探索一些有價值的資源，這些資源將幫助您學習新概念並製作更好的人工智慧應用程式。 我們會保持簡單。不掛！ - [人工智慧 (AI) 課程、書籍、視訊講座和論文](https://github.com/owainlewis/awesome-artificial-intelligence) - [機器學習/深度學習/AI + Web3 - 教程](https://github.com/TarrySingh/Artificial-Intelligence-Deep-Learning-Machine-Learning-Tutorials) - [ML 初學者](https://github.com/microsoft/ML-For-Beginners)- 12 週、26 節課程、52 個測驗，適合所有人的經典機器學習。 - [機器學習框架、函式庫和軟體](https://github.com/josephmisiti/awesome-machine-learning) - [如何製作人工智慧：逐步指南 - Revelo](https://www.revelo.com/blog/how-to-make-an-ai) 希望這將幫助您學習更多概念！ --- 我希望您在列表中找到有用的東西。 我介紹了一些很棒的開源專案，它們可以將您的 AI 應用程式提升到一個新的水平。 人工智慧正在改變世界，最好與人工智慧保持朋友關係，而不是忽視它。 利用它來提高生產力，並抓住機會開發一些非凡的東西。 如果您想以最佳方式改進您的專案，有些開源專案比其他專案更有用，尤其是 Taipy 和 AutoGPT。 請發表評論，讓我們知道哪個專案最讓您感到驚訝。 祝你有美好的一天！直到下一次。 在 GitHub 上關注我。 https://github.com/Anmol-Baranwal 關注 Taipy 以了解更多此類內容。 https://dev.to/taipy --- 原文出處：https://dev.to/taipy/all-the-tools-i-need-to-build-a-perfect-ai-app-2oeh
通常，作為開發人員，我們會編寫類似類型的程式碼，陷入雖然舒適但有時感覺很平凡的模式。 然而，JavaScript 的世界是廣闊的，充滿了高級功能，當發現和使用這些功能時，可以將我們的開發工作變得更加令人興奮和充實。 在本指南中，我們將揭曉 25 個高級 JavaScript 功能，這些功能不僅能揭示這些隱藏的瑰寶，還能將您對 JavaScript 的掌握提升到前所未有的水平。 讓我們一起踏上這段發現之旅，將 JavaScript 的高級功能整合到我們的編碼庫中，以建立更有效率、更優雅、更強大的應用程式。是時候為我們的開發任務注入新的樂趣和創造力了。 1 — 迴圈和區塊語句的標籤 -------------- JavaScript 允許標記迴圈和區塊語句，從而可以使用`break`和`continue`進行精確控制。 ``` outerLoop: for (let i = 0; i < 5; i++) { innerLoop: for (let j = 0; j < 5; j++) { if (i === 2 && j === 2) break outerLoop; console.log(`i=${i}, j=${j}`); } } ``` 2 - 逗號運算符 --------- 逗號運算子允許按序列計算多個表達式，並傳回最後一個表達式的結果。 ``` let a = (1, 2, 3); // a = 3 ``` 3 — 字串格式化以外的標記範本文字 ------------------ 除了建立字串之外，標記範本還可用於 DSL（域特定語言）、清理使用者輸入或本地化。 ``` function htmlEscape(strings, ...values) { // Example implementation } ``` 4 — 區塊內的函數聲明 ------------ 儘管不推薦，但 JavaScript 允許在區塊內聲明函數，這可能會導致非嚴格模式下的不同行為。 ``` if (true) { function test() { return "Yes"; } } else { function test() { return "No"; } } test(); // Behavior varies depending on the environment ``` 5 — 無效運算符 --------- `void`運算子計算任何表達式，然後傳回未定義的值，這對於 JavaScript 的超連結很有用。 ``` void (0); // returns undefined ``` 6 — 用於快速數學的位元運算符 ---------------- 位運算符，例如`|`和`&` ，可以更快地執行一些數學運算，但會犧牲可讀性。 ``` let floor = 5.95 | 0; // Fast way to do Math.floor(5.95) ``` 7 — with 處理物件的語句 ---------------- `with`語句擴展了區塊的作用域鏈，讓您可以編寫更短的程式碼。但是，出於可讀性和效能方面的考慮，不建議這樣做。 ``` with(document.getElementById("myDiv").style) { background = "black"; color = "white"; } ``` [](https://skillshare.eqcm.net/QyLx6z) 與 Christian Heilmann 一起提高您的 JavaScript 技能 - 從今天開始編寫更乾淨、更快、更好的程式碼！ 8 — 自動分號插入 (ASI) ---------------- JavaScript 嘗試修復缺少的分號，但依賴它可能會導致意外結果。 ``` let x = 1 let y = 2 [x, y] = [y, x] // Without proper semicolons, this could fail ``` 9 — 在屬性檢查操作員中 ------------- 檢查物件是否具有屬性，而無需直接存取其值。 ``` "toString" in {}; // true ``` 10——instanceof 與 typeof ----------------------- `instanceof`檢查原型鏈，而`typeof`傳回一個字串，指示未計算的操作數的類型。 ``` function Person() {} let person = new Person(); console.log(person instanceof Person); // true console.log(typeof person); // "object" ``` 11 — ES6 中的區塊級函數 ---------------- [ES6](https://www.webdevstory.com/mastering-es6-for-react/)允許函數具有區塊作用域，類似`let`和`const` 。 ``` { function test() { return "block scoped"; } } console.log(typeof test); // "function" in non-strict mode, "undefined" in strict mode ``` 12 — 偵錯器語句 ---------- 使用`debugger`語句暫停執行並開啟偵錯器。 ``` function problematicFunction() { debugger; // Execution pauses here if the developer tools are open } ``` **13 —**用於動態程式碼執行的`eval()` -------------------------- `eval`將字串作為 JavaScript 程式碼執行，但會帶來重大的安全性和效能影響。 ``` eval("let a = 1; console.log(a);"); // 1 ``` [](https://partners.inmotionhosting.com/k0EPWv) 利用 InMotion Hosting 的一系列計劃（從共享伺服器到 VPS 以及專用伺服器）為您的專案找到合適的託管解決方案。 **14 — 非標準**`__proto__`屬性 ------------------------- 雖然`__proto__`被廣泛支持用於設定物件的原型，但它是非標準的。請改用`Object.getPrototypeOf()`和`Object.setPrototypeOf()` 。 ``` let obj = {}; obj.__proto__ = Array.prototype; // Not recommended ``` 15 — document.write() 用於直接文件編輯 ------------------------------ `document.write()`直接寫入 HTML 文件，但使用它可能會產生負面影響，特別是同步載入外部腳本。 ``` document.write("<h1>Hello World!</h1>"); ``` 16 — 鍊式分配 --------- JavaScript 允許鍊式賦值，它可以在一個語句中將單一值指派給多個變數。 ``` let a, b, c; a = b = c = 5; // Sets all three variables to the value of 5 ``` 17 — 屬性存在的 in 運算符 ----------------- `in`運算子檢查屬性是否存在於物件中，而不存取屬性值。 ``` const car = { make: 'Toyota', model: 'Corolla' }; console.log('make' in car); // true ``` 18 — 物件屬性簡寫 ----------- 為物件指派屬性時，如果屬性名稱與變數名稱相同，則可以使用簡寫。 ``` const name = 'Alice'; const age = 25; const person = { name, age }; ``` 19 — 預設參數值和解構組合 --------------- 您可以將預設參數值與函數參數中的解構結合起來，以獲得更具可讀性和更靈活的函數定義。 ``` function createPerson({ name = 'Anonymous', age = 0 } = {}) { console.log(`Name: ${name}, Age: ${age}`); } createPerson({ name: 'Alice' }); // Name: Alice, Age: 0 createPerson(); // Name: Anonymous, Age: 0 ``` **20 — 使用**`Array.fill()`初始化陣列 ------------------------------ 使用`fill()`方法使用特定值快速初始化陣列。 ``` const initialArray = new Array(5).fill(0); // Creates an array [0, 0, 0, 0, 0] ``` [](https://amzn.to/3VhQFae) 利用可調式 LED 照明優化您的工作空間，提高工作效率和舒適度，為專注的工作會議創造理想的環境。 **21 —** `Array.includes()`用於存在檢查 --------------------------------- 使用`includes()`方法可以輕鬆檢查陣列中是否存在元素，這比使用`indexOf()`更具可讀性。 ``` const fruits = ['apple', 'banana', 'mango']; console.log(fruits.includes('banana')); // true ``` 22 — 解構別名 --------- `destructuring`物件時，可以使用別名將屬性指派給具有不同名稱的變數。 ``` const obj = { x: 1, y: 2 }; const { x: newX, y: newY } = obj; console.log(newX); // 1 ``` 23 — 預設值的空合併運算符 --------------- 使用`??`僅在處理`null`或`undefined`時提供預設值，而不是其他`falsy`值，例如 ``` const count = 0; console.log(count ?? 10); // 0, because count is not null or undefined ``` 24 — 動態函數名稱 ----------- 使用物件字面量中的計算屬性名稱建立具有動態名稱的函數。 ``` const dynamicName = 'func'; const obj = { [dynamicName]() { return 'Dynamic Function Name!'; } }; console.log(obj.func()); // "Dynamic Function Name!" ``` 25 — 私有類別字段 ----------- 使用 hash `#`前綴定義類別中的私有字段，該字段無法從類別外部存取。 ``` class Counter { #count = 0; increment() { this.#count++; } getCount() { return this.#count; } } ``` 簡單總結 --- 當我們結束 25 個 JavaScript 高階功能的探索時，JavaScript 的函式庫既龐大又強大。 我們深入研究的每個功能都為解決編碼挑戰開闢了新途徑，類似於在我們的工具包中加入創新工具。 這不僅增強了我們創造性、有效率地制定解決方案的能力，而且還強調了 JavaScript 的動態多功能性。 這些進階功能凸顯了持續學習在 Web 開發領域的關鍵角色。 接受這些細微差別並將它們整合到我們的日常編碼實踐中，使我們能夠提高我們的技能並為[網路技術的發展](https://www.simplilearn.com/what-is-web-1-0-web-2-0-and-web-3-0-with-their-difference-article)做出貢獻。 請記住，[掌握 JavaScript 的](https://www.webdevstory.com/javascript-essential-terms/)道路是一個持續的旅程，每一行程式碼都提供了發現非凡事物的機會。 讓我們不斷突破 JavaScript 所能實現的極限，保持好奇心並對未來的無限可能性保持開放。 ***支持我們的技術見解*** [](https://www.buymeacoffee.com/mmainulhasan) [](https://www.paypal.com/donate/?hosted_button_id=GDUQRAJZM3UR8) 注意：此頁面上的某些連結可能是附屬連結。如果您透過這些連結進行購買，我可能會賺取少量佣金，而您無需支付額外費用。感謝您的支持！ --- 原文出處：https://dev.to/mmainulhasan/25-unnoticeable-features-of-javascript-15l1
長話短說 ---- 你正在學習Python嗎？這是一片叢林！ 您可以擁有任何您能想到的庫 - 從建立遊戲到建立 Web 應用程式。 透過此列表，無論您是剛剛入門還是想要深化 Python 遊戲，都可以快速了解 50 個標準 Python 庫及其用途。  --- 1.**Taipy** -------- Taipy 旨在加快應用程式開發，從最初的原型到生產就緒的應用程式。 這個開源 Python 函式庫專為輕鬆開發前端 (GUI) 和 ML/資料管道而設計。 它程式碼量低，專為任何 pythonista 設計。  https://github.com/Avaiga/taipy Star ⭐ Taipy 儲存庫 您的支持意義重大🌱，並在許多方面幫助我們，例如寫文章！ 🙏 --- **2.NumPy** ----------- 對於數值計算至關重要，支援大型多維陣列和矩陣。該函式庫是 Python 版稅的一部分。 https://github.com/numpy/numpy Star ⭐ Numpy 儲存庫 --- 3.**Pandas** -------- 資料操作和分析的基石，提供直覺的資料結構和操作來操作數值表和時間序列。又一個Python不可或缺的函式庫，必知的函式庫。 https://github.com/pandas-dev/pandas Star ⭐ Pandas 儲存庫 --- **4.Matplotlib** ---------------- 一種多功能工具，用於建立各種靜態、最小和互動式視覺化。有很多參數可供使用，這個函式庫在繪製 ML 和 AI 圖表時非常有用。 https://github.com/matplotlib/matplotlib Star ⭐ Matplotlib 儲存庫 --- **5.SciPy** ----------- 專注於技術和科學計算，使用 Scipy，您可以進行最佳化、整合、插值等。 https://github.com/scipy/scipy Star ⭐ SciPy 儲存庫 --- **6.Scikit-learn** -------------- 機器學習的首選庫，提供廣泛的監督和無監督學習演算法。開始機器學習時您應該了解的唯一庫。 https://github.com/scikit-learn/scikit-learn Star ⭐ Scikit-learn 儲存庫 --- **7.TensorFlow** ---------------- 機器學習的綜合框架提供了各種工具、庫和社區資源。學習曲線可能有點陡峭，但在 Python 和 ML 領域中了解 TF 很重要。 https://github.com/tensorflow/tensorflow Star ⭐ TensorFlow 儲存庫 --- **8.PyTorch** ------------- 由於其靈活性，提供動態神經網路建立和操作，因此受到學術研究和生產的青睞。 https://github.com/pytorch/pytorch Star ⭐ PyTorch 儲存庫 --- 9.**Keras** -------- 用於建立和訓練深度學習模型的高級 API，旨在促進神經網路的建構和使用。 https://github.com/keras-team/keras Star ⭐ Keras 儲存庫 --- 10.**requests** --------- 簡化了發出 HTTP 請求的過程，使 Web 抓取和 API 消費更容易存取。 https://github.com/psf/requests Star ⭐ 請求儲存庫 --- 11.**Beautiful Soup** ----------- 一種網頁抓取工具，有助於從 HTML 和 XML 文件中提取資料。 https://github.com/waylan/beautifulsoup Star ⭐ Beautiful Soup 儲存庫 --- 12.**Flask** --------- 一個輕量級且可擴展的 Web 框架，非常適合建立中小型 Web 應用程式。 https://github.com/pallets/flask Star ⭐ Flask 儲存庫 --- 13.**Django** --------- 這個高級框架專為快速開發和簡潔、實用的設計而設計。 https://github.com/django/django Star ⭐ Django 儲存庫 --- 14.**Selenium** -------- 該程式庫使 Web 瀏覽器自動化，從而能夠模擬實際使用者操作以測試 Web 應用程式。 https://github.com/SeleniumHQ/selenium Star ⭐ Selenium 儲存庫 --- **15.Pygame** ------------- 提供用於編寫視訊遊戲的 Python 模組，包括圖形和聲音庫。 https://github.com/pygame/pygame Star ⭐ Pygame 儲存庫 --- 16.**Pillow** --------------- 擴充Python圖像庫功能，支援各種圖像檔案格式。 https://github.com/python-pillow/Pillow Star ⭐ Pillow 儲存庫 --- 17.SQL**Alchemy** ------------- 本函式庫提供了一整套透過 Python 處理資料庫的工具，提供了強大的 ORM 層和 SQL 表達式語言。 https://github.com/sqlalchemy/sqlalchemy Star ⭐ SQLAlchemy 儲存庫 --- **18.PySpark** -------------- 從名稱中可以看出，該程式庫將 Apache Spark 的強大功能引入了 Python，透過 Pythonic 方法促進大資料處理和分析。 https://github.com/apache/spark Star ⭐ PySpark 儲存庫 --- 19.**dash** --------- 允許直接在 Python 中建立分析 Web 應用程式，無需深入了解 Web 開發。 https://github.com/plotly/dash Star ⭐ dash 儲存庫 --- 20.**Plotly** --------- 專注於建立適合網路和行動應用程式的互動式且具有視覺吸引力的圖形和圖表。 https://github.com/plotly/plotly.py Star ⭐ Plotly 儲存庫 --- 21. **Nltk** ------------ 該庫使自然語言處理變得易於存取且易於使用。 https://github.com/nltk/nltk Star ⭐ Nltk 儲存庫 --- 22.**SpaCy** ---------- 提供工業級自然語言處理能力以及針對多種語言的預訓練模型。 https://github.com/explosion/spaCy Star ⭐ SpaCy 儲存庫 --- **23.Gensim** ------------- 專注於無監督主題建模和自然語言處理，您可以使用該程式庫來分析文件相似性。 https://github.com/RaRe-Technologies/gensim Star ⭐ Gensim 儲存庫 --- 24.Py**Test** ----------- 一個強大的框架，用於編寫小型到複雜的功能測試，增強測試的可讀性和可維護性。 https://github.com/pytest-dev/pytest Star ⭐ PyTest 儲存庫 --- 25.**單元測試** ----------- 用於建置和執行測試的內建框架，反映了其他語言中的 xUnit 架構。 Unitest 是內建的。 --- 26.**Fabric** --------- 簡化應用程式部署或系統管理任務的 SSH，自動執行遠端 shell 命令。 https://github.com/fabric/fabric Star ⭐ Fabric 儲存庫 --- 27.**Vizzu** -------- Vizzu 旨在動畫資料視覺化和講故事，是建立動態和互動式圖表的首選庫。 https://github.com/vizzuhq/vizzu-lib Star ⭐ Vizzu 儲存庫 --- 28.**Polars** --------- 針對效能和效率進行最佳化的 DataFrame 庫，能夠輕鬆處理大型資料集。 https://github.com/pola-rs/polars Star ⭐ Polars 儲存庫 --- 29.Docker **-Py** ----------------- 提供對 Docker Remote API 的 Pythonic 存取，從而實現 Docker 容器管理的自動化。 https://github.com/docker/docker-py Star ⭐ Docker-Py 儲存庫 --- **30.OpenCV** ------------- 電腦視覺和影像處理的主要內容，提供一整套演算法和工具。 https://github.com/opencv/opencv Star ⭐ OpenCV 儲存庫 --- 31.Scikit**-image** --------------- 它致力於影像處理，將 SciPy 和 NumPy 的功能擴展到視覺領域。 https://github.com/scikit-image/scikit-image Star ⭐ Scikit-image 儲存庫 --- 32.**SymPy** --------- 該庫專為符號計算而設計，提供從代數求解到微積分的各種功能。 https://github.com/sympy/sympy Star ⭐ SymPy 儲存庫 --- 33.**Virtualenv** ----------- 對於建立隔離的 Python 環境和乾淨地管理專案依賴至關重要。 https://github.com/pypa/virtualenv Star ⭐ Virtualenv 儲存庫 --- 34.**Click** --------- 簡化命令列介面的建立，促進可組合且易於擴展的程式碼。 https://github.com/pallets/click 為 Click 儲存庫加註星標 --- 35. **argparse** ---------------- 促進命令列參數的解析，這對於 CLI 應用程式開發至關重要。 Argparse 是內建的。 --- 36.**日誌記錄** ----------- 提供靈活的日誌記錄系統，從簡單的日誌記錄到複雜的每個模組配置。 日誌記錄是內建的。 --- **37.PyYAML** ------------- 處理 YAML 文件，支援 Python 物件與 YAML 之間的序列化和反序列化。 https://github.com/yaml/pyyaml Star ⭐ PyYAML 儲存庫 --- 38.xlrd **/xlwt** ----------------- 非常適合讀取和寫入 Excel 文件，彌補了 Python 和 Excel 文件之間的差距。 https://github.com/python-excel/xlrd Star ⭐ xlrd 儲存庫 https://github.com/python-excel/xlwt Star ⭐ xlwt 儲存庫 --- 39. **Pandas 分析** ----------------- 從 pandas 產生全面的配置文件報告 https://github.com/pandas-profiling/pandas-profiling Star ⭐ Pandas-Profiling 儲存庫 --- 40.**全面品質管理** ------------- Tqdm 是任何循環的包裝器，它將透過進度條追蹤進度。 https://github.com/tqdm/tqdm Star ⭐ TQDM 儲存庫 --- 41.**Faker** --------- 需要看起來真實的假資料嗎？ Faker 為你提供支援。 https://github.com/joke2k/faker Star ⭐ Faker 儲存庫 --- 42.**Flake8** ---------- 一個必備的庫，可以使您的程式碼保持簡潔，並輕鬆實現樣式檢查。 https://github.com/PyCQA/flake8 Star ⭐ Flake8 儲存庫 --- 43.**Black** --------- 將您的程式碼格式提升到一個新的水平。 https://github.com/psf/black Star ⭐ Black 儲存庫 --- 44.**Mypy** ---------- 這就像有一位文法老師來教你的程式碼，但教你的類型。 https://github.com/python/mypy Star ⭐ Mypy 儲存庫 --- 45.**Pydantic** ----------- 驗證 Python 腳本所需的函式庫。 https://github.com/samuelcolvin/pydantic Star ⭐ Pydantic 儲存庫 --- **46.FastAPI** -------------- FastAPI 是一個用於建立 RESTful API 的 Web 框架。 https://github.com/tiangolo/fastapi Star ⭐ FastAPI 儲存庫 --- 47.**Catboost** ---------- 為您的機器學習模型提供處理分類資料的方法。 https://github.com/catboost/catboost Star ⭐ Catboost 儲存庫 --- 48.**Seaborn** ---------- 提高資料可視化水準。 https://github.com/mwaskom/seaborn Star ⭐ Seaborn 儲存庫 --- 49.**Turtle graphics ** --------- 透過酷炫的圖形和動畫將程式設計帶入生活。學習並開始使用 Python 的好方法。 Turtle graphics 是內建的。 --- 50.**Asciimatics** ------------ Asciimatics 是一個可讓您建立全螢幕文字 UI 的程式庫。 https://github.com/peterbrittain/asciimatics Star ⭐ Asciimatics 儲存庫 --- 原文出處：https://dev.to/taipy/python-libraries-you-need-to-know-in-2024-37ka
長話短說 ==== 在本文中，您將學習如何建立由 AI 驅動的 PowerPoint 應用程式，該應用程式可以搜尋網路以自動製作有關任何主題的簡報。 我們將介紹使用： - 用於應用程式框架的 Next.js 🖥️ - 法學碩士 OpenAI 🧠 - LangChain 和 Tavily 的網路搜尋人工智慧代理🤖 - 使用 CopilotKit 將 AI 整合到您的應用程式中 🪁  --- CopilotKit：為您的應用程式建立人工智慧副駕駛 --------------------------- CopilotKit 是[開源人工智慧副駕駛平台。](https://github.com/CopilotKit/CopilotKit)我們可以輕鬆地將強大的人工智慧整合到您的 React 應用程式中。 建造： - ChatBot：上下文感知的應用內聊天機器人，可以在應用程式內執行操作 💬 - 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 @heroicons/react ``` **建立 PowerPoint 應用程式前端** ------------------------ 讓我們先建立一個名為`Slide.tsx`的檔案。該文件將包含顯示和編輯投影片內容的程式碼，包括其`title` 、 `body text` 、 `background image`和`spoken narration text` 。 要建立該文件，請前往`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中，建立`Slide.tsx`檔案。 之後，在文件頂部加入以下程式碼。程式碼定義了兩個名為`SlideModel`和`SlideProps`的 TypeScript 介面。 ``` "use client"; // Define an interface for the model of a slide, specifying the expected structure of a slide object. export interface SlideModel { title: string; content: string; backgroundImageDescription: string; spokenNarration: string; } // Define an interface for the properties of a component or function that manages slides. export interface SlideProps { slide: SlideModel; partialUpdateSlide: (partialSlide: Partial<SlideModel>) => void; } ``` 接下來，在上面的程式碼下面加入以下程式碼。程式碼定義了一個名為`Slide`功能元件，它接受`SlideProps`類型的 props。 ``` // Define a functional component named Slide that accepts props of type SlideProps. export const Slide = (props: SlideProps) => { // Define a constant for the height of the area reserved for speaker notes. const heightOfSpeakerNotes = 150; // Construct a URL for the background image using the description from slide properties, dynamically fetching an image from Unsplash. const backgroundImage = 'url("https://source.unsplash.com/featured/?' + encodeURIComponent(props.slide.backgroundImageDescription) + '")'; // Return JSX for the slide component. return ( <> {/* Slide content container with dynamic height calculation to account for speaker notes area. */} <div className="w-full relative bg-slate-200" style={{ height: `calc(100vh - ${heightOfSpeakerNotes}px)`, // Calculate height to leave space for speaker notes. }} > {/* Container for the slide title with centered alignment and styling. */} <div className="h-1/5 flex items-center justify-center text-5xl text-white text-center z-10" > {/* Textarea for slide title input, allowing dynamic updates. */} <textarea className="text-2xl bg-transparent text-black p-4 text-center font-bold uppercase italic line-clamp-2 resize-none flex items-center" style={{ border: "none", outline: "none", }} value={props.slide.title} placeholder="Title" onChange={(e) => { props.partialUpdateSlide({ title: e.target.value }); }} /> </div> {/* Container for the slide content with background image. */} <div className="h-4/5 flex" style={{ backgroundImage, backgroundSize: "cover", backgroundPosition: "center", }} > {/* Textarea for slide content input, allowing dynamic updates and styled for readability. */} <textarea className="w-full text-3xl text-black font-medium p-10 resize-none bg-red mx-40 my-8 rounded-xl text-center" style={{ lineHeight: "1.5", }} value={props.slide.content} placeholder="Body" onChange={(e) => { props.partialUpdateSlide({ content: e.target.value }); }} /> </div> </div> {/* Textarea for entering spoken narration with specified height and styling for consistency. */} <textarea className=" w-9/12 h-full bg-transparent text-5xl p-10 resize-none bg-gray-500 pr-36" style={{ height: `${heightOfSpeakerNotes}px`, background: "none", border: "none", outline: "none", fontFamily: "inherit", fontSize: "inherit", lineHeight: "inherit", }} value={props.slide.spokenNarration} onChange={(e) => { props.partialUpdateSlide({ spokenNarration: e.target.value }); }} /> </> ); }; ``` 之後，我們現在會建立一個名為`Presentation.tsx`的檔案。 該文件將包含初始化和更新投影片狀態、渲染目前投影片以及根據目前狀態動態啟用或停用按鈕實現導覽和投影片管理操作的程式碼。 要建立該文件，請將另一個文件新增至元件資料夾中，並將其命名為`Presentation.tsx` ，然後使用下列程式碼在檔案頂部匯入`React hooks` 、 `icons` 、 `SlideModel`和`Slide`元件。 ``` "use client"; import { useCallback, useMemo, useState } from "react"; import { BackwardIcon, ForwardIcon, PlusIcon, SparklesIcon, TrashIcon } from "@heroicons/react/24/outline"; import { SlideModel, Slide } from "./Slide"; ``` 之後，在上面的程式碼下面加入以下程式碼。程式碼定義了一個`ActionButton`功能元件，它將呈現具有可自訂屬性的按鈕元素。 ``` export const ActionButton = ({ disabled, onClick, className, children, }: { disabled: boolean; onClick: () => void; className?: string; children: React.ReactNode; }) => { return ( <button disabled={disabled} className={`bg-blue-500 text-white font-bold py-2 px-4 rounded ${disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"} ${className}`} onClick={onClick} > {children} </button> ); }; ``` 然後在上面的程式碼下面加入下面的程式碼。程式碼定義了一個名為「Presentation」的功能元件，用於初始化投影片的狀態並定義一個用於更新目前投影片的函數。 ``` // Define the Presentation component as a functional component. export const Presentation = () => { // Initialize state for slides with a default first slide and a state to track the current slide index. const [slides, setSlides] = useState<SlideModel[]>([ { title: `Welcome to our presentation!`, // Title of the first slide. content: 'This is the first slide.', // Content of the first slide. backgroundImageDescription: "hello", // Description for background image retrieval. spokenNarration: "This is the first slide. Welcome to our presentation!", // Spoken narration text for the first slide. }, ]); const [currentSlideIndex, setCurrentSlideIndex] = useState(0); // Current slide index, starting at 0. // Use useMemo to memoize the current slide object to avoid unnecessary recalculations. const currentSlide = useMemo(() => slides[currentSlideIndex], [slides, currentSlideIndex]); // Define a function to update the current slide. This function uses useCallback to memoize itself to prevent unnecessary re-creations. const updateCurrentSlide = useCallback( (partialSlide: Partial<SlideModel>) => { // Update the slides state by creating a new array with the updated current slide. setSlides((slides) => [ ...slides.slice(0, currentSlideIndex), // Copy all slides before the current one. { ...slides[currentSlideIndex], ...partialSlide }, // Merge the current slide with the updates. ...slides.slice(currentSlideIndex + 1), // Copy all slides after the current one. ]); }, [currentSlideIndex, setSlides] // Dependencies for useCallback. ); // The JSX structure for the Presentation component. return ( <div className="relative"> {/* Render the current slide by passing the currentSlide and updateCurrentSlide function as props. */} <Slide slide={currentSlide} partialUpdateSlide={updateCurrentSlide} /> {/* Container for action buttons located at the top-left corner of the screen. */} <div className="absolute top-0 left-0 mt-6 ml-4 z-30"> {/* Action button to add a new slide. Disabled state is hardcoded to true for demonstration. */} <ActionButton disabled={true} onClick={() => { // Define a new slide object. const newSlide: SlideModel = { title: "Title", content: "Body", backgroundImageDescription: "random", spokenNarration: "The speaker's notes for this slide.", }; // Update the slides array to include the new slide. setSlides((slides) => [ ...slides.slice(0, currentSlideIndex + 1), newSlide, ...slides.slice(currentSlideIndex + 1), ]); // Move to the new slide by updating the currentSlideIndex. setCurrentSlideIndex((i) => i + 1); }} className="rounded-r-none" > <PlusIcon className="h-6 w-6" /> {/* Icon for the button. */} </ActionButton> {/* Another action button, currently disabled and without functionality. */} <ActionButton disabled={true} onClick={async () => { }} // Placeholder async function. className="rounded-l-none ml-[1px]" > <SparklesIcon className="h-6 w-6" /> {/* Icon for the button. */} </ActionButton> </div> {/* Container for action buttons at the top-right corner for deleting slides, etc. */} <div className="absolute top-0 right-0 mt-6 mr-24"> <ActionButton disabled={slides.length === 1} // Disable button if there's only one slide. onClick={() => {}} // Placeholder function for the button action. className="ml-5 rounded-r-none" > <TrashIcon className="h-6 w-6" /> {/* Icon for the button. */} </ActionButton> </div> {/* Display current slide number and total slides at the bottom-right corner. */} <div className="absolute bottom-0 right-0 mb-20 mx-24 text-xl" style={{ textShadow: "1px 1px 0 #ddd, -1px -1px 0 #ddd, 1px -1px 0 #ddd, -1px 1px 0 #ddd", }} > Slide {currentSlideIndex + 1} of {slides.length} {/* Current slide and total slides. */} </div> {/* Container for navigation buttons (previous and next) at the bottom-right corner. */} <div className="absolute bottom-0 right-0 mb-6 mx-24"> {/* Button to navigate to the previous slide. */} <ActionButton className="rounded-r-none" disabled={ currentSlideIndex === 0 || true} // Example condition to disable button; 'true' is just for demonstration. onClick={() => { setCurrentSlideIndex((i) => i - 1); // Update currentSlideIndex to move to the previous slide. }} > <BackwardIcon className="h-6 w-6" /> {/* Icon for the button. */} </ActionButton> {/* Button to navigate to the next slide. */} <ActionButton className="mr-[1px] rounded-l-none" disabled={ true || currentSlideIndex + 1 === slides.length} // Example condition to disable button; 'true' is just for demonstration. onClick={async () => { setCurrentSlideIndex((i) => i + 1); // Update currentSlideIndex to move to the next slide. }} > <ForwardIcon className="h-6 w-6" /> {/* Icon for the button. */} </ActionButton> </div> </div> ); }; ``` 要在瀏覽器上呈現 PowerPoint 應用程式，請前往`/[root]/src/app/page.tsx`檔案並新增以下程式碼。 ``` "use client"; import "./style.css"; import { Presentation } from "./components/Presentation"; export default function AIPresentation() { return ( <Presentation /> ); } ``` 如果您想要在 Powerpoint 應用程式前端新增樣式，請在`/[root]/src/app`資料夾中建立名為`style.css`的檔案。 然後導航[到此 gist 文件](https://gist.github.com/TheGreatBonnie/e7c0b790a2e2af3e669810539ba54fed)，複製 CSS 程式碼，並將其新增至 style.css 檔案。 最後，在命令列上執行命令`npm run dev` ，然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看 PowerPoint 應用程式，如下所示。  **將 PowerPoint 應用程式與 CopilotKit 後端集成** -------------------------------------- 讓我們先在根目錄中建立一個名為`.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. ``` 在上面的程式碼下面，定義一個執行時環境變數和一個註解的函數，以便使用下面的程式碼進行研究。 ``` // 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()); } ``` **將 PowerPoint 應用程式與 CopilotKit 前端集成** -------------------------------------- 讓我們先導入`/[root]/src/app/components/Slide.tsx`檔案頂部的`useMakeCopilotActionable`掛鉤。 ``` import { useMakeCopilotActionable } from "@copilotkit/react-core"; ``` 在 Slide 函數中，新增以下程式碼，該程式碼使用`useMakeCopilotActionable`掛鉤來設定一個名為`updateSlide`的操作，該操作具有特定參數以及根據提供的值更新投影片的實作。 ``` useMakeCopilotActionable({ // Defines the action name. This is a unique identifier for the action within the application. name: "updateSlide", // Describes what the action does. In this case, it updates the current slide. description: "Update the current slide.", // Details the arguments that the action accepts. Each argument has a name, type, description, and a flag indicating if it's required. argumentAnnotations: [ { name: "title", // The argument name. type: "string", // The data type of the argument. description: "The title of the slide. Should be a few words long.", // Description of the argument. required: true, // Indicates that this argument must be provided for the action to execute. }, { name: "content", type: "string", description: "The content of the slide. Should generally consists of a few bullet points.", required: true, }, { name: "backgroundImageDescription", type: "string", description: "What to display in the background of the slide. For example, 'dog', 'house', etc.", required: true, }, { name: "spokenNarration", type: "string", description: "The spoken narration for the slide. This is what the user will hear when the slide is shown.", required: true, }, ], // The implementation of the action. This is a function that will be called when the action is executed. implementation: async (title, content, backgroundImageDescription, spokenNarration) => { // Calls a function passed in through props to partially update the slide with new values for the specified properties. props.partialUpdateSlide({ title, content, backgroundImageDescription, spokenNarration, }); }, }, [props.partialUpdateSlide]); // Dependencies array for the custom hook or function. This ensures that the action is re-initialized only when `props.partialUpdateSlide` changes. ``` 之後，請前往`/[root]/src/app/components/Presentation.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件。 ``` import { useCopilotContext } from "@copilotkit/react-core"; import { CopilotTask } from "@copilotkit/react-core"; import { useMakeCopilotActionable, useMakeCopilotReadable } from "@copilotkit/react-core"; ``` 在演示函數中，加入以下程式碼，該程式碼使用`useMakeCopilotReadable`掛鉤加入`Slides`和`currentSlide`幻燈片陣列作為應用程式內聊天機器人的上下文。掛鉤使副駕駛可以讀取簡報中的整個幻燈片集合以及當前幻燈片的資料。 ``` useMakeCopilotReadable("These are all the slides: " + JSON.stringify(slides)); useMakeCopilotReadable( "This is the current slide: " + JSON.stringify(currentSlide) ); ``` 在`useMakeCopilotReadable`掛鉤下方，新增以下程式碼，該程式碼使用`useCopilotActionable`掛鉤來設定名為`appendSlide`的操作，其中包含說明和加入多張幻燈片的實作函數。 ``` useMakeCopilotActionable( { // Defines the action's metadata. name: "appendSlide", // Action identifier. description: "Add a slide after all the existing slides. Call this function multiple times to add multiple slides.", // Specifies the arguments that the action takes, including their types, descriptions, and if they are required. argumentAnnotations: [ { name: "title", // The title of the new slide. type: "string", description: "The title of the slide. Should be a few words long.", required: true, }, { name: "content", // The main content or body of the new slide. type: "string", description: "The content of the slide. Should generally consist of a few bullet points.", required: true, }, { name: "backgroundImageDescription", // Description for fetching or generating the background image of the new slide. type: "string", description: "What to display in the background of the slide. For example, 'dog', 'house', etc.", required: true, }, { name: "spokenNarration", // Narration text that will be read aloud during the presentation of the slide. type: "string", description: "The text to read while presenting the slide. Should be distinct from the slide's content, and can include additional context, references, etc. Will be read aloud as-is. Should be a few sentences long, clear, and smooth to read.", required: true, }, ], // The function to execute when the action is triggered. It creates a new slide with the provided details and appends it to the existing slides array. implementation: async (title, content, backgroundImageDescription, spokenNarration) => { const newSlide: SlideModel = { // Constructs the new slide object. title, content, backgroundImageDescription, spokenNarration, }; // Updates the slides state by appending the new slide to the end of the current slides array. setSlides((slides) => [...slides, newSlide]); }, }, [setSlides] // Dependency array for the hook. This action is dependent on the `setSlides` function, ensuring it reinitializes if `setSlides` changes. ); ``` 在上面的程式碼下方，定義一個名為`context`的變數，該變數使用名為`useCopilotContext`的自訂掛鉤從 copilot 上下文中檢索當前上下文。 ``` const context = useCopilotContext(); ``` 之後，定義一個名為`generateSlideTask`的函數，它包含一個名為`CopilotTask`的類別。 `CopilotTask`類別定義用於產生與簡報的整體主題相關的新投影片的指令 ``` const generateSlideTask = new CopilotTask({ instructions: "Make the next slide related to the overall topic of the presentation. It will be inserted after the current slide. Do NOT carry any research", }); ``` 然後在上面的程式碼下面初始化一個名為`generateSlideTaskRunning`的狀態變數，預設值為false。 ``` const [generateSlideTaskRunning, **setGenerateSlideTaskRunning**] = useState(false); ``` 之後，使用下面的程式碼更新簡報元件中的操作按鈕，以透過新增、刪除和導覽投影片來新增動態互動。 ``` // The JSX structure for the Presentation component. return ( <div className="relative"> {/* Renders the current slide using a Slide component with props for the slide data and a method to update it. */} <Slide slide={currentSlide} partialUpdateSlide={updateCurrentSlide} /> {/* Container for action buttons positioned at the top left corner of the relative parent */} <div className="absolute top-0 left-0 mt-6 ml-4 z-30"> {/* ActionButton to add a new slide. It is disabled when a generateSlideTask is running to prevent concurrent modifications. */} <ActionButton disabled={generateSlideTaskRunning} onClick={() => { const newSlide: SlideModel = { title: "Title", content: "Body", backgroundImageDescription: "random", spokenNarration: "The speaker's notes for this slide.", }; // Inserts the new slide immediately after the current slide and updates the slide index to point to the new slide. setSlides((slides) => [ ...slides.slice(0, currentSlideIndex + 1), newSlide, ...slides.slice(currentSlideIndex + 1), ]); setCurrentSlideIndex((i) => i + 1); }} className="rounded-r-none" > <PlusIcon className="h-6 w-6" /> </ActionButton> {/* ActionButton to generate a new slide based on the current context, also disabled during task running. */} <ActionButton disabled={generateSlideTaskRunning} onClick={async () => { setGenerateSlideTaskRunning(true); // Indicates the task is starting. await generateSlideTask.run(context); // Executes the task with the current context. setGenerateSlideTaskRunning(false); // Resets the flag when the task is complete. }} className="rounded-l-none ml-[1px]" > <SparklesIcon className="h-6 w-6" /> </ActionButton> </div> {/* Container for action buttons at the top right, including deleting the current slide and potentially other actions. */} <div className="absolute top-0 right-0 mt-6 mr-24"> {/* ActionButton for deleting the current slide, disabled if a task is running or only one slide remains. */} <ActionButton disabled={generateSlideTaskRunning || slides.length === 1} onClick={() => { console.log("delete slide"); // Removes the current slide and resets the index to the beginning as a simple handling strategy. setSlides((slides) => [ ...slides.slice(0, currentSlideIndex), ...slides.slice(currentSlideIndex + 1), ]); setCurrentSlideIndex((i) => 0); }} className="ml-5 rounded-r-none" > <TrashIcon className="h-6 w-6" /> </ActionButton> </div> {/* Display showing the current slide index and the total number of slides. */} <div className="absolute bottom-0 right-0 mb-20 mx-24 text-xl" style={{ textShadow: "1px 1px 0 #ddd, -1px -1px 0 #ddd, 1px -1px 0 #ddd, -1px 1px 0 #ddd", }} > Slide {currentSlideIndex + 1} of {slides.length} </div> {/* Navigation buttons to move between slides, disabled based on the slide index or if a task is running. */} <div className="absolute bottom-0 right-0 mb-6 mx-24"> {/* Button to move to the previous slide, disabled if on the first slide or a task is running. */} <ActionButton className="rounded-r-none" disabled={generateSlideTaskRunning || currentSlideIndex === 0} onClick={() => { setCurrentSlideIndex((i) => i - 1); }} > <BackwardIcon className="h-6 w-6" /> </ActionButton> {/* Button to move to the next slide, disabled if on the last slide or a task is running. */} <ActionButton className="mr-[1px] rounded-l-none" disabled={generateSlideTaskRunning || currentSlideIndex + 1 === slides.length} onClick={async () => { setCurrentSlideIndex((i) => i + 1); }} > <ForwardIcon className="h-6 w-6" /> </ActionButton> </div> </div> ); ``` 現在讓我們轉到`/[root]/src/app/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`來包裝Presentation元件，如下所示。 ``` export default function AIPresentation() { return ( <CopilotKit url="/api/copilotkit/"> <CopilotSidebar instructions="Help the user create and edit a powerpoint-style presentation. IMPORTANT NOTE: SOMETIMES you may want to research a topic, before taking further action. BUT FIRST ASK THE USER if they would like you to research it. If they answer 'no', do your best WITHOUT researching the topic first." defaultOpen={true} labels={{ title: "Presentation Copilot", initial: "Hi you! 👋 I can help you create a presentation on any topic.", }} clickOutsideToClose={false} > <Presentation /> </CopilotSidebar> </CopilotKit> ); } ``` 之後，執行開發伺服器並導航到 http://localhost:3000/。您應該會看到應用程式內聊天機器人已整合到 PowerPoint Web 應用中。  最後，給右側的聊天機器人一個提示，例如“在 JavaScript 上建立 PowerPoint 簡報”，聊天機器人將開始產生回應，完成後，使用底部的前進按鈕瀏覽產生的幻燈片。 注意：如果聊天機器人沒有立即產生投影片，請根據其回應給予適當的後續提示。  結論 -- 總而言之，您可以使用 CopilotKit 建立應用內 AI 聊天機器人，該機器人可以查看當前應用程式狀態並在應用程式內執行操作。 AI 聊天機器人可以與您的應用程式前端、後端和第三方服務對話。 完整的原始碼：https://github.com/TheGreatBonnie/aipoweredpowerpointapp --- 原文出處：https://dev.to/copilotkit/how-to-build-an-ai-powered-powerpoint-generator-langchain-copilotkit-openai-nextjs-4c76
他們說有些人就是喜歡混亂。 大家好👋🏼，我是格雷厄姆「喜歡混亂」TheDev，這次我帶著另一個愚蠢的網路實驗回來了（如果你願意，你可以[直接跳到遊戲](#the-game)）。 一切都是那麼天真地開始，「我可以寫一個貪吃蛇遊戲嗎？」。 但是，一如既往，我肩膀上的小惡魔低聲說「讓它變得更難」......所以我想「沒有 JavaScript，用純 CSS 來做」。 他再次嘰嘰喳喳地說：「噗，還是太簡單了，而且你最近做了太多 CSS 東西，用原始的、無樣式的 HTML 來做吧」。 我轉向另一邊肩膀，想聽聽天使的想法，希望得到更明智的結果。 然後我想起天使從來沒有在我身邊... 所以這就是，snake，純 HTML 格式（用一點 PHP 技巧來支援它）。 這是正確的！ - 沒有 JavaScript - 沒有圖片 - 沒有CSS - 沒有 Cookie 不過，我想澄清一下（因為我不想被指責為點擊誘餌），我正在使用 PHP 渲染此 HTML。 雖然可以僅使用文件以純 HTML 形式完成此操作，無需後端語言，但它需要 640,345,228,142,352,307,046,244,325,015,114,448,670,890， 662,773,914,918,117,331,955,996,440,709,549,671,345,290,477,020,322,434,911,210,797,593,280,795,101, 545,372,667,251,627,877,890,009,349,763,765,710,326,350,331,533,965,349,868,386,831,339,352,024,373, 788,157,786,791,506,311,858,702,618,270,169,819,740,062,983,025,308,591,298,346,162,272,304,558,339, 520,759,611,505,302,236,086,810,433,297,255,194,852,674,432,232,438,669,948,422,404,232,599,805,551,610,635,942,376,961,399 ,231,917,134,063,858,996,537,970,147,827,206,606,320,217,379,472,010,321,356,624,613,809,077,942,304,597,360,699,567,595,836, 096,158,715,129,913,822,286,578,579,549,361,617,654,480,453,222,007,825,818,400,848,436,415,591,229,454,275,384,803,558,374,5 18,022,675,900,061,399,560,145,595,206,127,211,192,918,105,032,491,008,000,000,000,000,000,000,000,000,000,000,000,000,000,00 0,000,000,000,000,000,000,000,000,000,000,000,000,000,000,000 個文件。 所以請原諒使用 PHP 產生下一頁的「捷徑」（對於那些在技術 Twitter 上花費太多時間的人，也請原諒我使用「死」語言！😱🤣）。 不管怎樣，序言太多了，我知道你為什麼來這裡，你想看到它的實際效果！ 玩 HTML 貪吃蛇（有警告！） ---------------- 在桌面 PC 上的 Chrome 上執行...對於我來說，在 Firefox 和 iOS 上的任何瀏覽器上執行速度太快...您將在本文後面了解原因。 所以基本上，在桌面版 Chrome 中玩吧！ 關鍵是： - ALT + I向上， - ALT + J向左， - ALT + K向下， - ALT + L向右， - ALT + O開始新遊戲（一旦你輸了）。 在 Mac 上，我相信是Control + Option而不是Alt ！ 如果你想知道為什麼奇怪的鍵而不是 WASD，不幸的是ALT + D已經在 Windows 上的 Chrome 中使用，所以我不得不選擇「安全」鍵。 **最後一個警告：**我們用於實現此功能的技巧之一會用大量 URL 淹沒您的瀏覽器歷史記錄...您已被警告！ ### 遊戲 **遺憾的是，這無法在 codepen 中執行，因此您必須[在我的網站上玩 HTML Snake](https://grahamthe.dev/demos/snake/) 。** 當你玩完後，回來看看我用了什麼技巧來完成這個工作（並在評論中分享你的最高分！）。 問題 1：取得遊戲勾選 ----------- 對於遊戲，您*通常*需要有一個“遊戲勾選”。每個刻度是當一個動作發生或您計算一個新的遊戲狀態然後渲染新的遊戲狀態。 但這提出了我們的第一個問題，我們如何能夠在沒有 JavaScript 的情況下自動更新頁面？ 嗯，在 HTML 中執行此操作實際上非常簡單，我們只需將[`<meta http-equiv="refresh"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#http-equiv)設為較低值即可。 因此，我們從 0.35 秒刷新時間開始，然後隨著您的分數攀升，將刷新時間加快至 0.2 秒。 「元刷新」允許我們做的是指示瀏覽器載入頁面的 HTML 後，等待 X 秒，然後載入另一個 URL。 透過設定較低的刷新時間，然後更改我們在每次刷新時重定向到的 URL（稍後會詳細介紹），我們有一種方法可以讓頁面自行更改，即使您不按任何按鈕！ 以下是格式的簡單範例： ``` <meta http-equiv="refresh" content="[time];url=[url-to-redirect-to]"> ``` **附註：**這是我之前提到的它不適用於其他瀏覽器的地方。他們不排除部分第二次刷新時間，因此刷新是即時的，使得遊戲太快而無法玩。 但僅元刷新不足以使遊戲正常執行，我們需要某種方法來保存遊戲狀態並將蛇方向的變化傳達給伺服器。 為此，我們使用另一個直接的技巧：URL 編碼的 GET 參數。 問題 2：管理遊戲狀態 ----------- 因為我們不能使用 POST 請求或類似的東西，所以我們需要另一個機制來管理瀏覽器和伺服器之間的遊戲狀態。 起初，我使用多個 GET 參數來管理狀態，因此 URL 如下所示： ``` url?playing=1&x=2&y=6&foodx=3&foody=6&dir=left. ``` 這一直工作得很好，直到我需要為蛇儲存多個點（它佔據的每個方塊的 x，y 座標）。 雖然我確實讓它與一些 hacky x,y 座標列表和解析一起工作（例如`snake=1,1,2,1` ，蛇位於x=1,y=1 和x=2,y=1），但這是凌亂的。 因此，我們轉向我們的好朋友： [`urlencode()`](https://www.php.net/manual/en/function.urlencode.php)和[`json_encode()`](https://www.php.net/manual/en/function.json-encode.php) 。 一起使用時，我可以取得一個陣列（或在本例中為多維陣列），將其轉換為 JSON，然後將其轉換為 URL 的有效字元。 讓我解釋： ### 在 URL 中儲存複雜資料 以下是我用於遊戲狀態的資料範例： ``` $state = array( 'width' => $width, 'height' => $height, 'snake' => array(array('x' => 5, 'y' => 5)), 'food' => array('x' => 7, 'y' => 7), 'direction' => 'right', 'score' => 0, 'state' => true ); ``` 要將這些資料儲存在 URL 中，我們可以使用以下命令： ``` $url = urlencode(json_encode($state)); ``` 透過 JSON 編碼我們的陣列，然後用 URL 友好的字符替換無效字符，這以 URL 友好（儘管不是人類友好！）的方式為我們提供了狀態： ``` %7B%22width%22%3A20%2C%22height%22%3A20%2C%22snake%22%3A%5B%7B%22x%22%3A19%2C%22y%22%3A5%7D%5D%2C%22food%22%3A%7B%22x%22%3A4%2C%22y%22%3A11%7D%2C%22direction%22%3A%22right%22%2C%22score%22%3A0%2C%22state%22%3Afalse%7D ``` 現在我們有一個機制可以將遊戲狀態傳遞到瀏覽器並備份到伺服器。 ### 最大 URL 長度 那些了解自己的東西的人會知道這裡有一個問題。 URL 長度有最大限制！ 在 Chrome 中是 2083 個字元。 如果您玩遊戲的時間足夠長，您實際上會達到字元限制，因為為了儲存 x,y 位置對，我們每次使用超過 10 個字元。 但這是一個愚蠢的演示，所以我只想說：讓我知道如果你讓你的蛇足夠長，會發生什麼錯誤！ 哦，在現實世界中，**您不應該對 URL 中的參數進行 JSON 編碼**，我們就這樣吧！ 我們有狀態和遊戲標記，現在怎麼辦？ ----------------- 這就對了！ 嗯，差不多了。 我們需要將按鍵資訊傳達給伺服器。 ### 問題3：改變蛇的方向 這是最後一個問題（也是我們最終在 URL 中顯示遊戲狀態的原因），我們需要向伺服器傳達按鍵訊息以更改蛇的方向。 #### 問題 3a：按下按鈕 在我們將按鍵傳達給伺服器之前，我們需要某種方法來實際捕獲它們。 請記住，我們沒有 JS 來捕獲按鍵操作。 我們也不能使用`<button>`元素，因為它們需要 JS 才能運作。 所以我們剩下的就是不起眼的錨元素（ `<a>` ）。 但讓某人點擊錨點會讓遊戲變得很難玩。 幸運的是，HTML 中內建了一種名為[`accesskey`的](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey)東西。 它們允許我們將一個字元指派給一個錨點，然後可以透過捷徑（ALT + Windows 上 Chrome 中的字元）存取這些字元。 這為我們提供了允許鍵盤控制的機制，我們只需要 4 個具有不同方向的連結（錨點）作為 URL，然後為每個連結分配一個`accesskey` 。 **重要提示：**應謹慎使用`accesskey` ，如果您選擇輔助科技 (AT) 使用者使用的按鍵，則可能會產生幹擾。 #### 問題 3b：方向 現在我們有了一種按鍵方法，以及一種將按鍵操作傳達給伺服器的方法，我們需要一種方法來管理按鍵操作，以便它們更新蛇的方向。 幸運的是，我們透過 URL 傳遞的狀態物件中已經有了一個`direction`屬性。 因此，我們要做的就是建立 4 個不同的 URL，每個方向一個。然後我們將這些加入到連結中就完成了。 ``` $encodedState = urlencode(json_encode($state)); <a href="index.php?state=<?php echo $encodedState; ?>&direction=up" accesskey="i">up (ALT + I)</a><br/> <a href="index.php?state=<?php echo $encodedState; ?>&direction=left" accesskey="j">left (ALT + J)</a> <a href="index.php?state=<?php echo $encodedState; ?>&direction=right" accesskey="l">right (ALT + L)</a> <a href="index.php?state=<?php echo $encodedState; ?>&direction=down" accesskey="k">down (ALT + K)</a> ``` 現在，例如，當您按ALT + K時，將單擊第四個連結，我們將當前狀態+新方向發送到伺服器！ 現在剩下的就是獲取該資訊併計算下一個遊戲狀態。 ### 遊戲邏輯 最後，謎題的最後一部分是一些遊戲邏輯。 例如，在生成食物位置時，我們需要檢查它是否不在蛇已經佔據的圖塊上，因此我們有以下函數： ``` function generateFoodPosition($width, $height, $snake) { do { $food = array( 'x' => rand(0, $width - 1), 'y' => rand(0, $height - 1)); } while ( in_array($food, $snake) ); return $food; } ``` 還有一個移動蛇的功能 ``` function moveSnake($state) { $newHead = array('x' => $state['snake'][0]['x'], 'y' => $state['snake'][0]['y']); // Update snake's head position based on direction switch ($state['direction']) { case 'up': $newHead['y']--; break; case 'down': $newHead['y']++; break; case 'left': $newHead['x']--; break; case 'right': $newHead['x']++; break; } // Check if snake has collided with the wall or itself if ($newHead['x'] < 0 || $newHead['x'] >= $state['width'] || $newHead['y'] < 0 || $newHead['y'] >= $state['height'] || in_array($newHead, array_slice($state['snake'], 1))) { $state['state'] = false; return $state; // Game over } // Check if snake has eaten the food if ($newHead['x'] == $state['food']['x'] && $newHead['y'] == $state['food']['y']) { $state['score'] += 10; // Generate new food position $state['food'] = generateFoodPosition($state['width'], $state['height'], $state['snake']); } else { // Remove tail segment array_pop($state['snake']); } // Move snake array_unshift($state['snake'], $newHead); return $state; } ``` 以及建構遊戲板的循環。 ``` for ($y = 0; $y < 20; $y++) { echo "\r\n"; for ($x = 0; $x < 20; $x++) { if ($x == $state['food']['x'] && $y == $state['food']['y']) { echo '🍎'; } elseif (in_array(array('x' => $x, 'y' => $y), $state['snake'])) { echo '🟩'; }else{ echo '⬜'; } } } ``` 但我不會詳細介紹這些內容，因為您可以輕鬆找到（並找到更簡潔的方法）、找到其他人編寫的（更好的）程式碼並適應您的需求。 這是一個包裝 ------ 現在你已經知道了，我們使用元刷新、存取鍵和在 URL 中編碼複雜資料的技巧建立了一個遊戲。 這些東西對你的日常生活有用嗎？不，可能不會。 他們是否會在一個奇怪的邊緣情況下拯救你的屁股，完成這個工作，有能力使用黑客來交付產品情況？可能吧。 什麼？您沒想到我會提供您有用的教學嗎？你現在應該更清楚了。 但是，話雖如此，如果您確實喜歡這篇文章，或者奇蹟般地學到了一些新東西，請在下面給我留言，這真的意義重大！ 祝大家週末愉快！ 💗 --- 原文出處：https://dev.to/grahamthedev/snakein-pure-html-no-js-no-css-no-images-2ccg
長話短說 ---- 隨著 3 月 8 日的臨近，我總是會在這個時候反思我作為科技女性的經歷。 我從事科技工作已有五年多了。 我一開始是資料科學家，現在我正在探索並喜歡[Taipy](https://github.com/Avaiga/taipy)的 DevRel 🥑 角色。 不用說，科技領域的發展充滿了起起落落，以及介於兩者之間的一切。  國際婦女節不僅僅是日曆上的一個日期；它也是一個節日。今天對我們來說至關重要，我們要思考如何改善情況。這是慶祝、反思和改變的一天！ --- 這一天讓我質疑自己的進化。 儘管我必須克服冒名頂替症候群並不斷尋找歸屬感，但科技的進步是有益且令人興奮的。 然而，這些挑戰塑造了今天的我，並磨練了我最大的優勢。 在我的發展過程中，我在各種社區和資源中發現了令人難以置信的支持系統，我很高興與您分享： --- 社群 -- ### PyLadies  身為 Python 愛好者，Pyladies 在我心中佔有特殊的地位。我參加過他們在巴黎和倫敦舉行的聚會，他們也在全球 50 多個城市舉辦了活動。顧名思義，該小組是開源 Python 社群的活躍組成部分。一個了解 Python 最新趨勢的好地方，甚至可以透過他們的研討會提高您的編碼技能。 https://pyladies.com/ --- ### 機器學習和資料科學領域的女性  機器學習和資料科學領域的女性支持並促進有興趣在機器學習和資料科學領域取得進步的女性。 參加他們在法國和英國舉行的活動是了解最新趨勢並與其他資料科學愛好者交流的絕佳機會。 https://wimlds.org/ --- ### 科技女性  這個全球組織致力於幫助女性擁抱科技。他們擁有全球視野，致力於賦權和縮小性別差距。 https://women-in-tech.org/ --- ### 編碼的女性  旨在賦予女性技術職業權力。他們舉辦編碼活動和資源，專注於幫助女性走上職業道路。如果您覺得需要一些職業指導，請不要猶豫查看他們的網站。 https://womenwhocode.com/ --- 會議 -- ### 格蕾絲·霍珀慶祝活動  聚集科技領域女性的最重要活動。該活動以一位鼓舞人心的電腦科學家的名字命名，展示了女性在電腦領域的職業和研究。 https://ghc.anitab.org/ --- ### 女性科技節  這是一個充滿活力的活動，透過鼓舞人心的演講、社交和研討會展示科技領域的女性。 https://ghc.anitab.org/ --- ### 資料和人工智慧領域的女性+  這是我去年最喜歡的會議之一。能量是 鼓舞人心－現代會議展示了代表性不足的性別在該領域的貢獻。 https://www.womenintechfestivalglobal.com/womenintechfestivalglobal2024/en/page/home --- podcast ------- ### 女性科技播客  該播客將為您講述科技業女性的精彩故事，從她們的旅程到挑戰，以及一些精心建置的建議。 https://podcast.womenintechshow.com/ --- ### 科技女孩演員陣容  另一個勵志播客，它將帶您了解女性的故事，並在日常生活中激勵您。 https://podcasts.apple.com/us/podcast/tech-girls-cast/id1557400427 --- ### She Talks Tech  該播客與該行業的主要女性進行了強有力的對話。它們涵蓋了領導力和個人成長等主題。 https://wearetechwomen.com/she-talks-tech-podcast/ --- 子版塊 --- ### /girlsgonewired  STEM 領域的女性和非二元性別社群。您可以分享您的故事並尋求建議。用作支援系統的 Reddit 子版塊。 https://www.reddit.com/r/girlsgonewired/ --- ### /女性科技  這是一個很棒的 Reddit 子版塊，用於討論您在科技行業的經歷、挑戰和成就。在 Reddit 子版塊中閃耀並支持女性。 https://www.reddit.com/r/womenintech/ --- ### /科學女士們  這是一個為科技業女性提供支援的 Reddit 子版塊。您會找到證詞、建議和展示。 https://www.reddit.com/r/LadiesofScience/ --- 最後的想法 ----- 我的科技之旅既有時感覺自己像個局外人，又學著擁抱自己的優勢和獨特性。這些社區在這一演變中發揮了作用。 讓我們繼續打破障礙，確保科技世界具有包容性和歡迎性。 不要猶豫，在評論中分享您最喜歡的資源！ --- 原文出處：https://dev.to/marisogo/10-resources-to-empower-women-in-technology-2m6n
我可能不是唯一一個對瀏覽器的預設`<input type="checkbox">`感到沮喪的開發人員。 首先：**它不可擴展。**在此範例中，字體大小已縮放至`200%` ，但複選框仍保持其根大小，即`13.333333px` ：  在本教程中，我們將剖析瀏覽器的預設複選框，看看是否可以做得更好。 --- 首先，我們需要使用`appearance:none`清除預設樣式並設定初始大小 - 這將是一個相對單位`em` ： ``` [type=checkbox] { appearance: none; aspect-ratio: 1; box-sizing: border-box; font-size: 1em; width: 1em; } ``` `background-color`應該適應深色模式，因此我們將檢查它是否與任何[系統顏色](https://developer.mozilla.org/en-US/docs/Web/CSS/system-color)相符。它似乎與`Field`系統顏色匹配，所以讓我們使用它。 對於 Chrome 中的邊框顏色，它與系統顏色`ButtonBorder`匹配，但由於 Safari 使用*更輕的*`ButtonBorder` ，我們將使用適用於兩種瀏覽器的`GrayCanvas` 。 我們將加入一些 CSS 自訂屬性，稍後我們將使用它們來建立變體。 對於`border-radius`和`margin` ，我們將使用預設值，但將它們轉換為相對單位`em` 。 `border-width`似乎使用以下公式進行縮放： ``` (4/3) / root size ``` 由於根大小為`13.333333px` ，我們現在有： ``` [type=checkbox] { --_bdw: calc(1em * (4/3) / 13.333333); appearance: none; aspect-ratio: 1; background: var(--_bg, Field); border: var(--_bdw) solid var(--_bdc, GrayText); border-radius: var(--_bdrs, .2em); box-sizing: border-box; font-size: 1em; margin: var(--_m, .1875em .1875em .1875em .25em); position: relative; width: 1em; } ``` 讓我們看看它是否可擴展：  好的！深色模式呢？  這就是為什麼我**喜歡**系統顏色！接下來，讓我們新增瀏覽器在**未選取的**複選框上使用的相同懸停效果。 我們將混合`CanvasText` ，它在淺色模式下為黑色，在深色模式下為白色，並簡單地更新我們在上一步中加入的`--_bdc`屬性： ``` @media (hover: hover) { &:not(:checked):hover { --_bdc: color-mix(in srgb, GrayText 60%, CanvasText 40%); } } ``` --- 複選標記 ---- 現在是複選標記。我們**可以**在`::after`元素中使用旋轉的 CSS 方塊來做到這一點： ``` [type=checkbox]::after { border-color: GrayText; border-style: solid; border-width: 0 0.15em 0.15em 0; box-sizing: border-box; content: ''; aspect-ratio: 1 / 1.8; rotate: 40deg; width: 0.375em; } ```  雖然這工作得很好，但我更喜歡在蒙版中使用 SVG，因為它更靈活。為此，我們將為遮罩加入一個屬性，並為`::after`元素的背景加入另一個`--_bga` ，該屬性將是複選標記的**顏色**。 ``` [role=checkbox] { --_bga: Field; --_mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="3" stroke="%23000" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path d="M5 12l5 5l10 -10"/></svg>'); &::after { background: var(--_bga, transparent); content: ""; inset: 0; position: absolute; mask: var(--_mask) no-repeat center / contain; -webkit-mask: var(--_mask) no-repeat center / contain; } } ``` 所以，我們現在**確實**有一個複選標記，只是看不到它，因為蒙版顏色設定為`transparent` 。 讓我們使用`:checked` -state 更新點擊時複選框的顏色。但在此之前，我們需要先弄清楚**哪種**顏色！ Safari 是唯一支援系統顏色`AccentColor`瀏覽器，因此我們需要為此建立自己的變數`--_accent` ，在 Mac 上對應於`#0075ff` ： ``` [type=checkbox] { --_accent: #0075ff; &:checked { --_bdc: transparent; --_bg: var(--_accent); --_bga: Field; } } ``` 讓我們看看我們建構了什麼：  還有深色模式？我們需要先更新`--_accent`屬性，因為`AccentColor`尚未在所有瀏覽器中運作： ``` @media (prefers-color-scheme: dark) { --_accent: #99C8FF; } ``` 讓我們檢查：  涼爽的！現在我們需要加入的是`:checked:hover` -state，它類似於我們之前新增的 border-hover： ``` @media (hover: hover) { &:checked:hover { --_bg: color-mix(in srgb, var(--_accent) 60%, CanvasText 40%); } } ``` 讓我們比較一下它在 Chrome、Safari 和 Firefox 中的外觀：  看來我們通過考驗了！ --- 變體 -- 建立變體非常簡單：您只需要更新一些屬性。例子： ``` .rounded { --_bdrs: 50%; } .square { --_bdrs: 0; } ``` 然後在 HTML 中： ``` <input type="checkbox" class="rounded"> <input type="checkbox" class="square"> ```  — 或全力以赴並建立*老式*複選框：  > **關於圓形複選框的註釋：**這是*不好的*做法，正如您可以在[這篇精彩的文章](https://tonsky.me/blog/checkbox/)中讀到的那樣。不過，也有一些例外，例如這個「影像選擇器」：  開關 -- 對於開關，我們將加入一個`role="switch"` ，所以它是： ``` <input type="checkbox" role="switch"> ``` 蘋果最近加入了[自己的 switch-control](https://dev.to/madsstoumann/a-first-look-at-apples-new-switch-control-3pnd) ，但`role="switch"`是跨瀏覽器的。同樣，我們只需要更新我們之前建立的許多屬性： ``` [role=switch] { --_bdc--hover: transparent; --_bdrs: 1em; --_bg: #d1d1d1; --_bga: Field; --_mask: none; aspect-ratio: 1.8 / 1; border: 0; display: grid; padding: .125em; place-content: center start; width: 1.8em; &::after { border-radius: 50%; height: .75em; inset: unset; position: static; width: .75em; } &:checked { --_bg: var(--_bg--checked, var(--_accent)); justify-content: end; } } ``` 這給了我們：  --- 示範 -- 就是這樣！下面是帶有演示的 Codepen： https://codepen.io/stoumann/pen/OJqQNgm --- 駭客與縫合 ----- 以下是我在 Codepen 上使用複選框所做的一系列工作： ### 複選框電影院 選擇座位。還可以修改為在火車、飛機上選擇座位...... https://codepen.io/stoumann/pen/eYXpEBa ### 天際線複選框 點擊窗戶打開公寓裡的燈… https://codepen.io/stoumann/pen/KKbGJqd ### 按數字繪畫 先選擇一種顏色（使用`<input type="radio">` ），然後按一下對應的數字（複選框）... https://codepen.io/stoumann/pen/VwRejpR ### 點對點 不需要 JavaScript，但我把它留在那裡供你玩… https://codepen.io/stoumann/pen/zYbNRNL ### 來自地獄的條款和條件 檢查全部… https://codepen.io/stoumann/pen/GRwRjYP --- 每日 toggle ---- Alvaro Montoro 正在建立大量開關/撥動開關 - 2024 年每天一個。請[在此處](https://codepen.io/collection/aMPYMo)查看。 --- 原文出處：https://dev.to/madsstoumann/styling-checkboxes-and-switches-pf0
歡迎使用我們精選的 JavaScript 技巧集合，它將幫助您優化程式碼、使其更具可讀性並節省您的時間。 讓我們深入研究 JavaScript 的功能和超越傳統的技巧，並發現這種強大的程式語言的全部潛力。 ### 1. 使用!!轉換為布林值 使用雙重否定快速將任何值轉換為布林值。 ``` let truthyValue = !!1; // true let falsyValue = !!0; // false ``` ### 2. 預設功能參數 設定函數參數的預設值以避免未定義的錯誤。 ``` function greet(name = "Guest") { return `Hello, ${name}!`; } ``` ### 3. 短 if-else 的三元運算符 `if-else`語句的簡寫。 ``` let price = 100; let message = price > 50 ? "Expensive" : "Cheap"; ``` ### 4. 動態字串的範本文字 使用模板文字在字串中嵌入表達式。 ``` let item = "coffee"; let price = 15; console.log(`One ${item} costs $${price}.`); ``` ### 5. 解構賦值 輕鬆從物件或陣列中提取屬性。 ``` let [x, y] = [1, 2]; let {name, age} = {name: "Alice", age: 30}; ``` ### 6. 用於陣列和物件克隆的擴展運算符 克隆陣列或物件而不引用原始陣列或物件。 ``` let originalArray = [1, 2, 3]; let clonedArray = [...originalArray]; ``` ### 7. 短路評估 使用邏輯運算子進行條件執行。 ``` let isValid = true; isValid && console.log("Valid!"); ``` ### 8. 可選連結 (?.) 如果引用為`nullish`則可以安全地存取巢狀物件屬性，而不會出現錯誤。 ``` let user = {name: "John", address: {city: "New York"}}; console.log(user?.address?.city); // "New York" ``` ### 9. 空合併運算子 (??) 使用`??`為`null`或`undefined`提供預設值。 ``` let username = null; console.log(username ?? "Guest"); // "Guest" ``` [](https://try.monday.com/9xf9ftaa4i2f) ### 10. 使用`map` 、 `filter`和`reduce`進行陣列操作 無需傳統循環即可處理陣列的優雅方法。 ``` // Map let numbers = [1, 2, 3, 4]; let doubled = numbers.map(x => x * 2); // Filter const evens = numbers.filter(x => x % 2 === 0); // Reduce const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); ``` ### 11.標記模板文字 使用模板文字進行函數呼叫以進行自訂字串處理。 ``` function highlight(strings, ...values) { return strings.reduce((prev, current, i) => `${prev}${current}${values[i] || ''}`, ''); } let price = 10; console.log(highlight`The price is ${price} dollars.`); ``` ### 12.使用Object.entries()和Object.fromEntries() 將物件轉換為陣列並返回以方便操作。 ``` let person = {name: "Alice", age: 25}; let entries = Object.entries(person); let newPerson = Object.fromEntries(entries); ``` ### 13. 唯一元素的集合物件 使用 Set 儲存任何類型的唯一值。 ``` let numbers = [1, 1, 2, 3, 4, 4]; let uniqueNumbers = [...new Set(numbers)]; ``` ### 14. 物件中的動態屬性名稱 在物件文字表示法中使用方括號來建立動態屬性名稱。 ``` let dynamicKey = 'name'; let person = {[dynamicKey]: "Alice"}; ``` ### 15. 使用bind()進行函數柯里化 建立一個新函數，在呼叫時將其 this 關鍵字設定為提供的值。 ``` function multiply(a, b) { return a * b; } let double = multiply.bind(null, 2); console.log(double(5)); // 10 ``` ### 16. 使用 Array.from() 從類別陣列物件建立陣列 將類似陣列或可迭代的物件轉換為真正的陣列。 ``` let nodeList = document.querySelectorAll('div'); let nodeArray = Array.from(nodeList); ``` ### 17. 可迭代物件的 for...of 循環 直接迭代可迭代物件（包括陣列、映射、集合等）。 ``` for (let value of ['a', 'b', 'c']) { console.log(value); } ``` ### 18. 使用 Promise.all() 實作並發 Promise 同時執行多個 Promise 並等待所有的都解決。 ``` let promises = [fetch(url1), fetch(url2)]; Promise.all(promises) .then(responses => console.log('All done')); ``` ### 19. 函數參數的剩餘參數 將任意數量的參數捕獲到陣列中。 ``` function sum(...nums) { return nums.reduce((acc, current) => acc + current, 0); } ``` [](https://imp.i384100.net/c/3922519/1320997/14726) ### 20. 用於性能優化的記憶 儲存函數結果以避免冗餘處理。 ``` const memoize = (fn) => { const cache = {}; return (...args) => { let n = args[0]; // assuming single argument for simplicity if (n in cache) { console.log('Fetching from cache'); return cache[n]; } else { console.log('Calculating result'); let result = fn(n); cache[n] = result; return result; } }; }; ``` ### 21. 使用 ^ 交換值 使用 XOR 以位元運算子交換兩個變數的值，無需使用臨時變數。 ``` let a = 1, b = 2; a ^= b; b ^= a; a ^= b; // a = 2, b = 1 ``` ### 22. 使用 flat() 展平陣列 使用`flat()`方法輕鬆展平巢狀陣列，並將展平深度作為可選參數。 ``` let nestedArray = [1, [2, [3, [4]]]]; let flatArray = nestedArray.flat(Infinity); ``` ### 23. 用一元加法轉換為數字 使用一元加運算子快速將字串或其他值轉換為數字。 ``` let str = "123"; let num = +str; // 123 as a number ``` ### 24. HTML 片段的模板字串 使用模板字串建立 HTML 片段，使動態 HTML 生成更加清晰。 ``` let items = ['apple', 'orange', 'banana']; let html = `<ul>${items.map(item => `<li>${item}</li>`).join('')}</ul>`; ``` ### 25. 使用 Object.assign() 合併物件 將多個來源物件合併到一個目標物件中，有效地組合它們的屬性。 ``` let obj1 = { a: 1 }, obj2 = { b: 2 }; let merged = Object.assign({}, obj1, obj2); ``` [](https://amzn.to/3UXGIyx) 使用符合人體工學的滑鼠優化您的編程設置，專為舒適和長時間的編碼會話而定制。 ### 26. 預設值短路 處理潛在的未定義或空變數時，使用邏輯運算子指派預設值。 ``` let options = userOptions || defaultOptions; ``` ### 27. 使用括號表示法動態存取物件屬性 使用括號表示法動態存取物件的屬性，當屬性名稱儲存在變數中時非常有用。 ``` let property = "name"; let value = person[property]; // Equivalent to person.name ``` ### 28. 使用 Array.includes() 進行存在檢查 使用includes() 檢查陣列是否包含某個值，它是indexOf 的更清晰的替代方法。 ``` if (myArray.includes("value")) { // Do something } ``` ### 29. Function.prototype.bind() 的強大功能 將函數綁定到上下文（此值）並部分套用參數，以建立更多可重複使用和模組化的程式碼。 ``` const greet = function(greeting, punctuation) { return `${greeting}, ${this.name}${punctuation}`; }; const greetJohn = greet.bind({name: 'John'}, 'Hello'); console.log(greetJohn('!')); // "Hello, John!" ``` ### 30.防止物件修改 使用`Object.freeze()`防止物件進行修改，使其不可變。對於更深層的不變性，請考慮更徹底地強制不變性的函式庫。 ``` let obj = { name: "Immutable" }; Object.freeze(obj); obj.name = "Mutable"; // Fails silently in non-strict mode ``` 我希望這些 JavaScript 技巧為您提供如何進行[JavaScript 程式設計的](https://www.w3schools.com/js/)新視角。 從利用模板文字的簡潔功能到掌握`map` 、 `filter`和`reduce`的效率，這些 JavaScript 技巧將豐富您的開發工作流程並激發您的下一個專案。 讓這些 JavaScript 技巧不僅可以完善您目前的專案，還可以在您的[程式設計之旅](https://www.webdevstory.com/programming-roadmap/)中激發未來創新的靈感。 ***支持我們的技術見解*** [](https://www.buymeacoffee.com/mmainulhasan) [](https://www.paypal.com/donate/?hosted_button_id=GDUQRAJZM3UR8) 注意：此頁面上的某些連結可能是附屬連結。如果您透過這些連結進行購買，我可能會賺取少量佣金，而無需您支付額外費用。感謝您的支持！ --- 原文出處：https://dev.to/mmainulhasan/30-javascript-tricky-hacks-gfc
**編輯**：大家好！在對本文做出驚人反應後，我建立了一個名為「每週專案俱樂部」的專案。每週您的收件匣都會收到需要解決的問題。你可以努力解決問題，並且你將得到整個俱樂部的幫助，讓你走上正軌。了解更多並[在這裡](https://weeklyproject.club)註冊！ 有一天我注意到一個模式。我注意到很多人都在努力 學習編程，但他們心中沒有特定的目標。我已經討論過如何了解您想要學習程式設計的原因可以幫助您選擇要學習的語言[！](https://pickaframework.com/articles/why/) ，以及如何實際做出決定（[在這裡！](https://pickaframework.com/feature_fishing/) ）但是專案有什麼幫助呢？ 當我指導程式設計師時，我發現有一個專案可以幫助排除其他一些幹擾，例如想知道你是否使用了正確的語言。透過專注於一個特定的目標，你就不用那麼費力去擔心*這*是否正是你應該使用的語言。結果是你建立了一些簡潔的東西，並且一路上你學到了一些東西！ 2隻鳥，1塊石頭。 這就是為什麼我為初學者程式設計師策劃了這個專案清單。許多人列出了大量的專案來學習編程，但很少按照難度進行組織。我瀏覽了幾個流行的程式設計專案想法清單。如果您想查看完整列表，可以在頁面底部找到來源。 我將其分為教程和想法。教程包含資源連結，而想法只是專案的一般描述。我還列出了我最喜歡的初學者清單。 看看，看看是否有什麼啟發你！ 教學 == 我的最愛 ---- - [透過 30 個教學在 30 天內建立 30 個東西](https://javascript30.com) - [在 30 分鐘內建立一個簡單的搜尋機器人](https://medium.freecodecamp.org/how-to-build-a-simple-search-bot-in-30-minutes-eb56fcedcdb1) - [使用 Xamarin 和 Visual Studio 建立 iOS 照片庫應用程式](https://www.raywenderlich.com/134049/building-ios-apps-with-xamarin-and-visual-studio) - [建立 Android 手電筒應用程式](https://www.youtube.com/watch?v=dhWL4DC7Krs)（影片） - [製作聊天應用程式](https://medium.freecodecamp.org/how-to-build-a-chat-application-using-react-redux-redux-saga-and-web-sockets-47423e4bc21a) - [使用 React Native 建立 ToDo 應用程式](https://blog.hasura.io/tutorial-fullstack-react-native-with-graphql-and-authentication-18183d13373a) 簡單的 --- - [使用 C# 和 Xamarin 建立空白應用程式（正在進行中）](https://www.intertech.com/Blog/xamarin-tutorial-part-1-create-a-blank-app/) - [使用 Xamarin 和 Visual Studio 建立 iOS 照片庫應用程式](https://www.raywenderlich.com/134049/building-ios-apps-with-xamarin-and-visual-studio) - [建立加載畫面](https://medium.freecodecamp.org/how-to-build-a-delightful-loading-screen-in-5-minutes-847991da509f) - [使用 JS 建立 HTML 計算器](https://medium.freecodecamp.org/how-to-build-an-html-calculator-app-from-scratch-using-javascript-4454b8714b98) - [建立 React Native Todo 應用程式](https://egghead.io/courses/build-a-react-native-todo-application) - 使用 Node.js 編寫 Twitter 機器人 ``` - [Part 1](https://codeburst.io/build-a-simple-twitter-bot-with-node-js-in-just-38-lines-of-code-ed92db9eb078) ``` ``` - [Part 2](https://codeburst.io/build-a-simple-twitter-bot-with-node-js-part-2-do-more-2ef1e039715d) ``` - [建立一個簡單的 RESTFUL Web 應用程式](https://closebrace.com/tutorials/2017-03-02/creating-a-simple-restful-web-app-with-nodejs-express-and-mongodb) - [在 30 分鐘內建立一個簡單的搜尋機器人](https://medium.freecodecamp.org/how-to-build-a-simple-search-bot-in-30-minutes-eb56fcedcdb1) - [建立一個工作抓取 Web 應用程式](https://medium.freecodecamp.org/how-i-built-a-job-scraping-web-app-using-node-js-and-indreed-7fbba124bbdc) - [使用 Python 挖掘 Twitter 資料](https://marcobonzanini.com/2015/03/02/mining-twitter-data-with-python-part-1/) - [使用 Scrapy 和 MongoDB 抓取網站](https://realpython.com/blog/python/web-scraping-with-scrapy-and-mongodb/) - [如何使用 Python 和 Selenium WebDriver 進行抓取](http://www.byperth.com/2018/04/25/guide-web-scraping-101-what-you-need-to-know-and-how-to-scrape-with-python-selenium-webdriver/) - [我應該使用 BeautifulSoup 觀看哪部電影](https://medium.com/@nishantsahoo.in/which-movie-should-i-watch-5c83a3c0f5b1) - [使用 Flask 建立微博](https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world) - 在 Django 中建立部落格 Web 應用程式 ``` - [Part I : Introduction](https://tutorial.djangogirls.org/en/) ``` ``` - [Part II : Extension To Add More Features](https://legacy.gitbook.com/book/djangogirls/django-girls-tutorial-extensions/details) ``` - [選擇您自己的冒險演示](https://www.twilio.com/blog/2015/03/choose-your-own-adventures-presentations-wizard-mode-part-1-of-3.html) - [使用 Flask 和 RethinkDB 建立待辦事項列表](https://realpython.com/blog/python/rethink-flask-a-simple-todo-list-powered-by-flask-and-rethinkdb/) 中等的 --- - [透過建立簡單的 RPG 遊戲來學習 C#](http://scottlilly.com/learn-c-by-building-a-simple-rpg-index/) - [用 C# 創作 Rogue-like 遊戲](https://roguesharp.wordpress.com/) - [使用 Clojure 建構 Twitter 機器人](http://howistart.org/posts/clojure/1/index.html) - [建立拼字檢查器](https://bernhardwenzel.com/articles/clojure-spellchecker/) - [使用 Java 建立簡單的 HTTP 伺服器](http://javarevisited.blogspot.com/2015/06/how-to-create-http-server-in-java-serversocket-example.html) - [建立 Android 手電筒應用程式](https://www.youtube.com/watch?v=dhWL4DC7Krs)（影片） - [建立具有使用者身份驗證的 Spring Boot 應用程式](https://scotch.io/tutorials/build-a-spring-boot-app-with-user-authentication) - [透過 30 個教學在 30 天內建立 30 個東西](https://javascript30.com) - [使用純 JS 建立應用程式](https://medium.com/codingthesmartway-com-blog/pure-javascript-building-a-real-world-application-from-scratch-5213591cfcd6) - [建立無伺服器 React.js 應用程式](http://serverless-stack.com/) - [建立 Trello 克隆](http://codeloveandboards.com/blog/2016/01/04/trello-tribute-with-phoenix-and-react-pt-1/) - [使用 React、Node、MongoDB 和 SocketIO 建立角色投票應用程式](http://sahatyalkabov.com/create-a-character-voting-app-using-react-nodejs-mongodb-and-socketio/) - [React 教學：克隆 Yelp](https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/) - [使用 React.js 和 Node.js 建立簡單的中型克隆](https://codeburst.io/build-simple-medium-com-on-node-js-and-react-js-a278c5192f47) - [在 JS 中整合 MailChimp](https://medium.freecodecamp.org/how-to-integrate-mailchimp-in-a-javascript-web-app-2a889fb43f6f) - [使用 React Native 建立 ToDo 應用程式](https://blog.hasura.io/tutorial-fullstack-react-native-with-graphql-and-authentication-18183d13373a) - [製作聊天應用程式](https://medium.freecodecamp.org/how-to-build-a-chat-application-using-react-redux-redux-saga-and-web-sockets-47423e4bc21a) - [使用 React Native 建立新聞應用程式](https://medium.freecodecamp.org/create-a-news-app-using-react-native-ced249263627) - [學習 React 的 Webpack](https://medium.freecodecamp.org/learn-webpack-for-react-a36d4cac5060) - [建立您自己的 React 樣板](https://medium.freecodecamp.org/how-to-build-your-own-react-boilerplate-2f8cbbeb9b3f) - [基本 React+Redux 入門教學](https://hackernoon.com/a-basic-react-redux-introductory-tutorial-adcc681eeb5e) - [建立一個預約安排程序](https://hackernoon.com/build-an-appointment-scheduler-using-react-twilio-and-cosmic-js-95377f6d1040) - 使用 Angular 2+ 建立具有離線功能的 Hacker News 用戶端 ``` - [Part 1](https://houssein.me/angular2-hacker-news) ``` ``` - [Part 2](https://houssein.me/progressive-angular-applications) ``` - 帶有 Angular 5 的 ToDo 應用程式 ``` - [Introduction to Angular](http://www.discoversdk.com/blog/intro-to-angular-and-the-evolution-of-the-web) ``` ``` - [Part 1](http://www.discoversdk.com/blog/angular-5-to-do-list-app-part-1) ``` - 帶有 Angular 5 的 ToDo 應用程式 ``` - [Introduction to Angular](http://www.discoversdk.com/blog/intro-to-angular-and-the-evolution-of-the-web) ``` ``` - [Part 1](http://www.discoversdk.com/blog/angular-5-to-do-list-app-part-1) ``` 難的 -- - [建構一個解釋器](http://www.craftinginterpreters.com/)（第 14 章是用 C 寫的） - [用 C 語言寫一個 Shell](https://brennan.io/2015/01/16/write-a-shell-in-c/) - [編寫 FUSE 文件系統](https://www.cs.nmsu.edu/~pfeiffer/fuse-tutorial/) - [建立您自己的文字編輯器](http://viewsourcecode.org/snaptoken/kilo/) - [建立自己的 Lisp](http://www.buildyourownlisp.com/) - [建構 CoreWiki](https://www.youtube.com/playlist?list=PLVMqA0_8O85yC78I4Xj7z48ES48IQBa7p)這是一個 Wiki 風格的內容管理系統，完全用 C# 使用 ASP.NET Core 和 Razor Pages 編寫。您可以[在這裡](https://github.com/csharpfritz/CoreWiki)找到原始程式碼。 - [建構 JIRA 與 Clojure 和 Atlassian Connect 的集成](https://hackernoon.com/building-a-jira-integration-with-clojure-atlassian-connect-506ebd112807) - [建構一個解釋器](http://www.craftinginterpreters.com/)（第 4-13 章是用 Java 寫的） - [使用 Mocha、React、Redux 和 Immutable 透過測試優先開發來建立全端電影投票應用程式](https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html) - [使用 React 和 Node 建立 Twitter Stream](https://scotch.io/tutorials/build-a-real-time-twitter-stream-with-node-and-react-js) - 使用 Webtask.io 建立無伺服器 MERN Story 應用程式 ``` - [Part 1](https://scotch.io/tutorials/build-a-serverless-mern-story-app-with-webtask-io-zero-to-deploy-1) ``` ``` - [Part 2](https://scotch.io/tutorials/build-a-serverless-mern-story-app-with-webtask-io-zero-to-deploy-2) ``` - [使用 React + Parcel 建立 Chrome 擴充功能](https://medium.freecodecamp.org/building-chrome-extensions-in-react-parcel-79d0240dd58f) ``` [Testing React App With Pupepeteer and Jest](https://blog.bitsrc.io/testing-your-react-app-with-puppeteer-and-jest-c72b3dfcde59) ``` - [用 React 編寫生命遊戲](https://medium.freecodecamp.org/create-gameoflife-with-react-in-one-hour-8e686a410174) - [建立帶有情感分析的聊天應用程式](https://codeburst.io/build-a-chat-app-with-sentiment-analysis-using-next-js-c43ebf3ea643) - [建立全端 Web 應用程式設置](https://hackernoon.com/full-stack-web-application-using-react-node-js-express-and-webpack-97dbd5b9d708) - 建立隨機報價機 ``` - [Part 1](https://www.youtube.com/watch?v=3QngsWA9IEE) ``` ``` - [Part 2](https://www.youtube.com/watch?v=XnoTmO06OYo) ``` ``` - [Part 3](https://www.youtube.com/watch?v=us51Jne67_I) ``` ``` - [Part 4](https://www.youtube.com/watch?v=iZx7hqHb5MU) ``` ``` - [Part 5](https://www.youtube.com/watch?v=lpba9vBqXl0) ``` ``` - [Part 6](https://www.youtube.com/watch?v=Jvp8j6zrFHE) ``` ``` - [Part 7](https://www.youtube.com/watch?v=M_hFfrN8_PQ) ``` - 使用 Angular 6 建立美麗的現實世界應用程式： ``` - [Part I](https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e) ``` - [使用 BootStrap 4 和 Angular 6 建立響應式佈局](https://medium.com/@tomastrajan/how-to-build-responsive-layouts-with-bootstrap-4-and-angular-6-cfbb108d797b) - [使用 Django 和測試驅動開發建立待辦事項列表](http://www.obeythetestinggoat.com/) - [使用 Python 建立 RESTful 微服務](http://www.skybert.net/python/developing-a-restful-micro-service-in-python/) - [使用 Docker、Flask 和 React 的微服務](https://testdriven.io/) - [使用 Flask 建立簡單的 Web 應用程式](https://pythonspot.com/flask-web-app-with-python/) - [使用 Flask 建立 RESTful API – TDD 方式](https://scotch.io/tutorials/build-a-restful-api-with-flask-the-tdd-way) - [在 20 分鐘內建立 Django API](https://codeburst.io/create-a-django-api-in-under-20-minutes-2a082a60f6f3) 想法 == 簡單的 --- ### 99 瓶 - 建立一個程序，列印歌曲“牆上的 99 瓶啤酒”的每一行。 - 不要使用所有數字的列表，也不要手動輸入所有數字。請改用內建函數。 - 除了短語“取下一個”之外，您不得直接在歌詞中輸入任何數字/數字名稱。 - 請記住，當您還剩下 1 瓶時，「瓶子」一詞將變為單數。 ### 魔術8球 - 模擬神奇的 8 球。 - 允許使用者輸入他們的問題。 - 顯示正在進行的訊息（即“思考”）。 - 建立 20 個回應，並顯示隨機回應。 - 允許用戶提出另一個問題或退出。 - 獎金： ``` - Add a gui. ``` ``` - It must have a box for users to enter the question. ``` ``` - It must have at least 4 buttons: ``` ``` - ask ``` ``` - clear (the text box) ``` ``` - play again ``` ``` - quit (this must close the window) ``` ### 石頭剪刀布遊戲 - 建立一個石頭剪刀布遊戲。 - 讓玩家選擇石頭、剪刀或布。 - 讓計算機選擇它的移動方式。 - 比較選擇並決定誰獲勝。 - 列印結果。 - 子目標： ``` - Give the player the option to play again. ``` ``` - Keep a record of the score (e.g. Player: 3 / Computer: 6). ``` ### 倒數時鐘 - 建立一個程序，允許使用者選擇時間和日期，然後以給定的時間間隔（例如每秒）列印一條訊息，告訴使用者距離所選時間還有多長時間。 - 子目標： ``` - If the selected time has already passed, have the program tell the user to start over. ``` ``` - If your program asks for the year, month, day, hour, etc. separately, allow the user to be able to type in either the month name or its number. ``` ``` - TIP: Making use of built in modules such as time and datetime can change this project from a nightmare into a much simpler task. ``` 中等的 --- ### 番茄計時器 建立一個番茄計時器。 番茄計時器是一種時間管理方法。該技術使用計時器將工作分解為多個時間間隔，通常長度為 25 分鐘，中間間隔短暫的休息。這些間隔被命名為“pomodoros”，是意大利語單字“pomodoro”（番茄）的英文複數形式，以西里洛在大學時使用的番茄形狀的廚房計時器命名。 原始技巧有六個步驟： 決定要完成的任務。 設定番茄計時器（傳統上為 25 分鐘）。 完成任務。 當計時器響起時結束工作並在一張紙上畫上複選標記。 如果您的複選標記少於四個，請短暫休息（3-5 分鐘），然後轉到步驟 2。 四個番茄鐘後，休息較長時間（15-30 分鐘），將複選標記計數重設為零，然後轉到步驟 1。 要了解有關番茄計時器的更多訊息[，請單擊此處](https://en.wikipedia.org/wiki/Pomodoro_Technique) ### 谷歌案例 - 這是一個可以讓你玩英文句子的遊戲。 - 使用者將以任何格式輸入一個句子。（大寫或小寫或兩者的混合） - 程式必須將給定的句子轉換為Google大小寫。什麼是Google大小寫句子風格？\[know\_about\_it\_here:\]（這是一種寫作風格，我們將所有小寫字母替換為大寫字母，留下所有單字的首字母）。 - 子目標： ``` - Program must then convert the given sentence in camel case.To know more about camel case ``` ``` [click_here](https://en.wikipedia.org/wiki/Camel_case) ``` ``` - Sentence can be entered with any number of spaces. ``` ### 擲骰子模擬器 - 允許使用者輸入骰子的面數以及應擲骰子的次數。 - 您的程式應該模擬擲骰子並追蹤每個數字出現的次數（這不必顯示）。 - 最後，列印出每個數字出現的次數。 - 子目標： ``` - Adjust your program so that if the user does not type in a number when they need to, the program will keep prompting them to type in a real number until they do so. ``` ``` - Put the program into a loop so that the user can continue to simulate dice rolls without having to restart the entire program. ``` ``` - In addition to printing out how many times each side appeared, also print out the percentage it appeared. If you can, round the percentage to 4 digits total OR two decimal places. ``` - 獎金： ``` - You are about to play a board game, but you realize you don't have any dice. Fortunately you have this program. ``` ``` - 1. Create a program that opens a new window and draws 2 six-sided dice ``` ``` - 2. Allow the user to quit, or roll again ``` ``` - Allow the user to select the number of dice to be drawn on screen(1-4) 2. Add up the total of the dice and display it ``` ### 計算並修復綠雞蛋和火腿 你們有些人可能還記得蘇博士的故事「綠雞蛋和火腿」。對於那些不記得或從未聽說過的人，[這](http://pastebin.com/XMY48CnN)是這個故事。然而，我給你的故事有一個問題——每次使用「我」這個詞時，它都是小寫的。 由於此問題，您的工作是執行以下操作： - 將我給您的故事複製到常規文字檔案中。 - 建立一個程式來通讀故事並在任何時候將字母 i 變為大寫。 （當它也用在 sam-I-am 的名字中時，請務必更改它。） - 讓你的程式建立一個新文件，並讓它正確地寫出故事。 - 印出有多少錯誤被修正。 - 完成後，您應該已經糾正了[這麼多](https://i.imgur.com/GRkj3yz.jpg)錯誤。 難的 -- ### 隨機維基百科文章 如果您曾造訪維基百科，您可能已經注意到螢幕左側有一個指向隨機文章的連結。雖然看到您被帶到哪篇文章可能很有趣，但有時看到文章的名稱會很好，這樣您就可以在聽起來很無聊時跳過它。幸運的是，維基百科有一個 API，允許我們這樣做[點擊這裡](https://en.wikipedia.org/w/api.php?action=query&list=random&rnnamespace=0&rnlimit=10&format=json)。 然而，有一個困境。由於維基百科擁有有關世界各地主題的文章，其中一些文章的標題中包含特殊字元。例如，關於西班牙畫家[埃拉斯托·科爾特斯·華雷斯 (Erasto Cortés Juárez)](https://en.wikipedia.org/wiki/Erasto_Cort%C3%A9s_Ju%C3%A1rez)的文章中就有 é 和 á。如果您查看這篇特定文章的[API](https://en.wikipedia.org/w/api.php?action=query&prop=info&pageids=39608394&inprop=url&format=json) ，您將看到標題是“Erasto Cort\\u00e9s Ju\\u00e1rez”，並且 \\u00e9 和 \\u00e1 正在替換前面提到的兩個字母。 （有關這是什麼的訊息，請首先查看文件中[本頁](https://docs.python.org/2/howto/unicode.html)的前半部分）。為了讓你的程式正常運作，你必須以某種方式處理這個問題。 - 建立一個程序，從官方維基百科 API 中提取標題，然後一一詢問用戶是否願意閱讀該文章。 - 例子： ``` - If the first title is Reddit, then the program should ask something along the lines of "Would you like to read about Reddit?" If the user says yes, then the program should open up the article for the user to read. ``` ``` - HINT: Click [here](https://en.wikipedia.org/wiki?curid=39608394) to see how the article's ID can be used to access the actual article. ``` - 子目標： ``` - As mentioned before, do something about the possibility of unicode appearing in the title. ``` ``` - Whether you want your program to simply filter out these articles or you want to actually turn the codes into readable characters, that's up to you. ``` ``` - Make the program pause once the user has selected an article to read, and allow him or her to continue browsing different article titles once finished reading. ``` ``` - Allow the user to simply press ENTER to be asked about a new article. ``` ### 天氣如何？ 如果您想了解 API 的基礎知識，請查看 iamapizza 的[這篇](http://www.reddit.com/r/explainlikeimfive/comments/qowts/eli5_what_is_api/c3z9kok)文章。 - 建立一個程序，從 OpenWeatherMap.org 提取資料並列印有關當前天氣的訊息，例如您居住的地方的最高氣溫、最低氣溫和雨量。 - 子目標： ``` - Print out data for the next 5-7 days so you have a 5 day/week long forecast. ``` ``` - Print the data to another file that you can open up and view at, instead of viewing the information in the command line. ``` ``` - If you know html, write a file that you can print information to so that your project is more interesting. ``` - 尖端： ``` - APIs that are in Json are essentially lists and dictionaries. Remember that to reference something in a list, you must refer to it by what number element it is in the list, and to reference a key in a dictionary, you must refer to it by its name. ``` ``` - Don't like Celsius? Add &units=imperial to the end of the URL of the API to receive your data in Fahrenheit. ``` ### 來源 - https://github.com/tuvtran/project-based-learning - https://github.com/jorgegonzalez/beginner-projects - https://github.com/MunGell/awesome-for-beginners/blob/master/README.md - https://github.com/sarahbohr/AbsoluteBeginnerProjects --- 你怎麼認為？您喜歡透過特定專案進行學習還是不喜歡透過特定專案進行學習？ --- 原文出處：https://dev.to/samborick/100-project-ideas-oda
是的，初學者的挫折感是一種常見的情緒，而且很自然。不要因為這種傾向而責怪，因為我們自己都可能經歷過這種情況。不要撒謊，您可能在某個領域中發現初學者很煩人，因為您擁有更高水平的專業知識。 如果你沒有，那麼，做你自己就很糟糕。 然而，必須認識到，應對初學者的挑戰不僅是學習旅程的一部分，也是個人成長的重要面向。在本文中，我們深入研究了初學者旅程中伴隨的各種挫折，並探討了為什麼承認和解決這些挫折對於任何努力提高技能和知識的人來說都是至關重要的。 因此，讓我們探索初學者階段的複雜性，並發現有價值的見解，以推動您在學習努力中前進： **1. 缺乏知識：** 作為初學者通常意味著缺乏基礎知識，讓我們面對現實吧，這對您和您想要向其學習的人來說可能會令人沮喪。當你剛開始時，你可能有遠大的抱負，但將它們分解為可操作的步驟感覺就像試圖蒙住眼睛解開魔術方塊。 初學者並沒有意識到自己的無能，這常常會導致他們尷尬地提出看似愚蠢的問題——我曾經經歷過，這樣做過，現在仍然偶爾這樣做。 *舉個例子*：幾年前，我竟然厚顏無恥地詢問谷歌員工是否可以給比爾蓋茲發一封電子郵件來解決我的 Windows 7 啟動金鑰問題。我感到很羞愧，但這也提醒我們，即使是職業選手也曾經是一無所知的新手。 你需要提出問題來獲取知識，即使它們可能很愚蠢。 感謝像 chatGPT 這樣的工具，與以前不同的是，你現在可以安全地提出愚蠢的問題，唯一會嘲笑你的人就是 openai 的工程師。 ***從人們那裡獲取知識而不顯得愚蠢*** 現在，有些東西你只能從人們那裡學習/獲得，並且你可能需要為了這類事情而接近他們（但僅限於這類事情）。當向他人尋求幫助時，一切都取決於給予和索取。人們更有可能幫助解決棘手的問題，從而帶來某種互惠互利。所以，在你向某人尋求建議之前，想想這對他們有什麼好處？ 如果你的問題對他們沒有幫助或沒有興趣，你應該問chatGPT，因為chatGPT 沒有更好的事情要做。 ***害怕顯得愚蠢*** 這是完全正常的。但事情是這樣的——承認自己的無知是邁向智慧的第一步。畢竟，每個人都是從新手開始的，暴露我們專業知識的缺乏只是成為真正專家的旅程的一部分。 你是否因為擔心別人認為你很蠢而害怕與人接觸？ Lmao，如果你回到根本上，你害怕看起來很愚蠢的原因只是因為你很愚蠢——就這個話題而言。 遲早，你在該領域的技能不足將會暴露出來。所以無論如何也無所謂，最好還是仔細揭開，快速獲得知識。 **2、不耐煩：** 正如他們所說，耐心是一種美德，但讓我們面對現實吧——這是一顆難以吞嚥的藥丸，尤其是當你深入學習新事物的時候。無論是掌握一項技能、達到財務里程碑，還是等待您最喜歡的系列的下一部，不耐煩常常會出現。 想想看：您是否願意等待我的下一篇文章（知道它將於下週一下午 3:00 準時發布），還是因為“下個月的某個時候”的模糊承諾而懸而未決？確切地。擁有明確的時間表可以讓你更容易保持耐心。 在追逐那個難以捉摸的夢想時，你能喚起聖人的耐心嗎？這是一個艱難的問題，尤其是當成功之路充滿不確定性時。你看，你無法計算出達到那個里程碑的確切時刻，因為你還沒有走過那條路。這是一個第二十二條軍規：你需要知識來實現目標，但在實現目標之前你不會真正掌握這些知識。令人困惑，對吧？ 例如，你不知道你需要多長時間才能賺到第一個十億，因為你沒有所需的知識，而當你擁有所需的知識時，你應該已經賺到了十億，因為這是了解您是否已獲得有關如何賺取第一個十億美元的足夠知識的唯一方法。 如果你認為你知道如何賺到第一個十億，但你還沒有做到，那麼你告訴自己為什麼*你沒有*做到的任何故事，都代表著一個知識空白，你需要填補這個空白，以更接近所需的真正知識。賺十億。 你和你的目標之間的每一個障礙都是一個等待學習的教訓。這都是旅程的一部分，我的朋友。擁抱不確定性，享受挑戰，並記住－成功之路不是一條直線；而是一條直線。這是一條蜿蜒的道路，充滿了曲折、轉彎，偶爾會走彎路。 作為一個初學者，你會感到焦慮，因為你似乎無法填補你現在的位置和你想要的位置之間的差距；因為你沒有所需的知識。 你獲得的知識越多，前方的道路就會變得更清晰、更光明。越接近隧道的盡頭，路就越清晰，盡頭的光會照亮前路，雖然沒有確切的“隧道盡頭”，但學習是一生的旅程（至少，是這樣）本來就是這樣的）。 因此，與其專注於目的地，不如專注於旅程本身。旅程就是目的地。享受過程，享受挑戰，享受一路上的小勝利。畢竟，正是不確定性才讓這段旅程變得值得。如果一定能成功，那還有什麼樂趣呢？ 正是不確定性使得耐心變得困難，如果在特定時間範圍內保證成功，許多懶惰的人就會開始投入工作。 當你開始看到曙光時，你就已經到了意識到自己無能的階段。 現在您可以清楚地看到自己的限制以及您想要獲得的技能的困難。這是覺醒的階段。 這是29%的人開始懈怠、70%的人放棄的階段。 但如果你已經讀到這裡，我就知道那不是你。 **3.害怕失敗：** 把事情做好是最好的學習方式，但一開始你就不可能不失敗就完成任何事。 *失敗是知道下一步該學什麼的唯一方法。* 很多人只是堅持低階學習；在大腦中記憶和儲存事實和數字而不付諸實踐，認為自己知道很多，這可能會導致鄧寧克魯格效應。 對於那些不知道的人來說，鄧寧-克魯格效應是一種認知偏差，它會導致人們高估自己的能力，從而導致錯誤的自信感。換句話說，他們認為自己知道一切，而實際上，他們只觸及了表面。 但事實是：真正學習的唯一方法就是捲起袖子、親力親為。知識只有付諸實踐才有價值。否則，這些只是無用的瑣事擾亂你的大腦。  *你想要堆疊知識還是想要堆疊結果？* 在我的環境中流行一句話：「沒有知識就是浪費」。我不相信這是真的。如果你不使用知識，知識絕對會浪費。 這句話一定起源於人們過去所知道的一些隨機的事情拯救了他們時所獲得的多巴胺。 嗯，是的，隨機知識有時會有所幫助。但是，您是否願意繼續累積知識並希望它派上用場，並祈禱您所擁有的知識會以某種方式幸運地使您成功，或者您是否會採取積極的步驟來確保您掌控自己的成功。你會驚訝地發現有多少人仍然不選擇後者。  人生不是一場學校考試，透過反省事實和數字就能為你贏得**A** ，如果你學到了一些你沒有應用的東西，你就是在浪費時間。人生是一場親力親為、充滿動感的冒險，成功只屬於那些願意捲起袖子、親力親為的人。 你需要做更多，而不是知道更多。 不要挑選一本新書，而是按照你在上一本中讀過的內容去做。閱讀本文將為您提供訊息，但只有將這些訊息付諸實踐才能帶來轉變。 如果你想以十倍的速度學習，並在幾個月內實現別人需要幾年才能實現的目標，*那麼你需要學習如何學習。* 不要毫無目的地學習，而是這樣做： - 了解基礎知識 - 概述一個專案來解決您遇到的問題，或其他人正在為初學者解決的基本問題 - 開始建立專案 - 一路學習 **4. 過於急切：** 這就像在你還沒學會爬行之前就試圖衝刺一樣。一頭扎進新事物可能會令人興奮，但不要超前。 當初學者太急於證明自己時，他們常常會為了急於引起轟動而忽略重要的說明並跳過關鍵的基礎知識。這就像在不先打地基的情況下試圖建造一座房子一樣——你注定會失敗。 問題的根源是什麼？***感性太多，理性思考不夠***。充滿熱情固然很好，但當你的情緒影響了你的判斷時，你就會走向災難。不要幻想所有的可能性，醒來並注意現實的冷酷事實。相信我，它並不那麼迷人，但它是完成真正工作的地方。 所以，事情是這樣的：努力保持謙虛和冷靜。把你的牌放在胸前－不要讓你的情緒出賣你。無論有人給你 1 美元還是 100 萬美元，都要保持撲克臉。表達自己的情緒可能有助於人際關係，但在生意上呢？沒那麼多。 當人們在人際關係中充分理解你時，溝通就會變得更容易。當人們在商業上更了解你時，操縱就會變得更容易 在商業中，情緒可以發揮複雜的作用。雖然理解和同理心在人際關係中很受重視，但在商業世界中，它們有時可能被視為可利用的漏洞。如果您顯得絕望，如果對方利用這種情況（也許是提高價格），請不要感到驚訝。在商業交易中保持專業和冷靜以避免被操縱至關重要，同時仍然認識到真正的聯繫和同理心的重要性，儘管是在不同的背景下。 控制住你的情緒，你就會非常有效地學習，而不會顯得愚蠢。 **5、不一致：** 大多數人都是懶惰的，只在自己想做的時候做自己想做的事。 > 我有這條法律；*如果你花在不做某件事上的時間比持續做某件事所花的時間多，那麼你就是在倒退並浪費你過去付出的努力。* 對我來說，速度是獲勝的最重要因素，你能以多快的速度完成這項高品質的工作？這才是重要的。 很多人說“聰明的工作勝過艱苦的工作”，我認為這並不重要，“快速的工作永遠會獲勝”（記住，我先說的）  聰明的工作可以打敗艱苦的工作的唯一原因是它更快。找到一種快速完成某件事的方法是明智之舉。速度更重要。當你不一致時，你就會失去動力。 如果某人持續努力，而你慢慢變得聰明，他/她會因為速度更快而獲得更多結果。 力求努力、聰明、快速地工作。 **6. 太害羞不敢成功：** 許多人喜歡用可笑的藉口說他們是一個內向的人，並且由於他們的“天性”而無法將自己放在那裡尋找機會。 那是廢話，社交是一種技能，而不是個性，你需要發展你的社交技能，讓你的創造力變得有價值。擁有創造性技能並不足以取得成功，您需要補充技能才能充分利用它；說服的藝術。 從技術上來說，你可能在某件事上擁有最好的技能，但如果人們不了解你，那就毫無用處。你擁有與你的臉一樣獨特的價值，如果你不能讓人們注意到它，你就無法將這種價值賦予任何人。 有時，您可能會看到那些技能不如您的人享受您沒有的機會，只是因為他們建立了人際網絡，而不總是因為這對他們來說更容易。 在過去，你要成功，顯然仍然需要人脈，但為了獲得這些人脈，你需要努力學習，進入最好的學校，結識最好的人，你需要錢去長途旅行才能見到最好的人。名人和成功人士可能會或可能不會聽你的，所以如果你真的想成功，你必須走出你的舒適區，發揮你的魅力，讓自己看起來很體面。如今，借助網路，您可以向任何名人發送私訊（有些人仍然不知道這的意義，不幸的是，這幾乎就像他們在睡覺一樣）。 ***利用網路。*** 從一開始就推銷自己，不要害怕表現得像個初學者，也不要害怕認為有些人可能會認為你很愚蠢或基礎。讓我給你看一些東西： 看看這個 Twitter/𝕏 帳號。  它實際上只是發布“這一年已完成 x%”，沒有其他內容，並且它有 130 萬粉絲。我目前在…稍後在 Twitter 上關注我🥺。 > 皇室教訓：我們就像網路上超過 5,300,500,000 人一樣，無論你是否基礎並不重要，仍然有人會喜歡你所做的事情，無論如何你都有義務接觸他們什麼。 大多數討厭你的基本內容的人可能會嫉妒他們有相同的想法或知識，但沒有足夠的勇氣將其表達出來。 不要等到成為大師才開始表現自己。  *山頂孤獨，戰壕裡擁擠。* 人們更喜歡能夠產生共鳴，你的地位越低，越多的人能夠產生共鳴並欣賞你的成長。當你達到前 1% 時，就會變得更加孤獨，也更難找到可以交往的人。 許多人都在尋求他們能夠實現目標、能夠變得偉大的保證：「如果這個人能夠在面臨挑戰的情況下表現出這一點，我當然也可以！先讓我了解他們是如何做到的」。 所以本質上我的觀點是，大師非常有價值，但你可以輕鬆地向更接近你水平的人學習，也許領先 1-10 步，越接近越容易。 例如，我從伊隆馬斯克那裡學到了很多東西，但我從我網絡中目前的導師那裡學到了更多，因為他們是「平易近人的」。 此人可能是該領域的專家，但如果無法聯繫到他/她，他/她就無法為您提供針對您的具體情況的個人化建議。 您可能正在聽一些優秀的 YouTuber 的講話，這個人可能會給出準確的建議，但您的情況可能是這些事實的例外，可能存在一些細微差別，導致這些事情不起作用。 然後你可能最終會得出結論，這個人所說的是無稽之談（儘管我並不是說每個人都總是正確的）。 處於金字塔底部的你更容易接近。利用這一點來發揮你的優勢。 我認為名人面臨的問題之一是，他們通常會受到很多人試圖「接近」他們的轟炸，他們沒有足夠的時間或精力去照顧每個人。但你做到了，這是你擁有伊隆馬斯克所沒有的東西，利用它來攀登金字塔。 > 透過你的可及性為人們提供價值，從而成為難以接近的人；你所給予的價值將變得非常有價值，以至於初學者或金字塔底層的人很難獲得它。 您可以展示您的專業知識，並為近距離和個人聯繫收取額外費用。 我希望這對你有幫助，我很讚揚，我幫助人們從他們的創造力中賺錢，[訂閱我的時事通訊](https://tbk.beehiiv.com)（商業造王者）以獲得關於如何從你的創造力中賺錢印鈔系統的更多新鮮觀點。我為人們創造更多機會透過我的專案等賺取更多收入，我的時事通訊是與我聯繫並了解更多有關我的專案的好方法。 請務必將這篇文章轉發並分享給困擾您的煩人的初學者。和平✌️ --- 原文出處：https://dev.to/drpraze/skill-issue-how-to-master-anything-10x-faster-without-looking-stupid-2hj4
在本文中，我將向您介紹 20 個最好、最大的可用網頁圖示庫。其中許多為您提供數千甚至數百萬個圖標，因此您一定會找到您需要的東西。 我想先澄清一下：這些不是 20 個最好的庫，而是**20 個最好的庫**，所以當然可能還有，而且除了這些之外，可能還有其他很棒的庫，我沒有提到/沒有提到。我不知道。 **另外，這是`ul` ，不是`ol` 。** > 快速訊息：如果您知道其他優秀的庫，請隨時在回復中提及，如果我擴展列表，我可能會包括它。 **[The Noun Project](https://thenounproject.com/)** =======================================  The Noun Project 是一個龐大的圖示庫，聲稱擁有超過 200 萬個圖示。這些圖標都是由貢獻者製作的。它有一個龐大且仍然活躍的社區，您也可以成為其中的一部分。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `true`** ### **強烈推薦！** --- --- **[iconmonstr](https://iconmonstr.com/)** -----------------------------------  iconmonstr 是一個圖標庫，提供超過 4000 個圖標，分為 300 多個不同的集合。這個庫由**一個人**維護。好處是您可以直接從網站取得程式碼，因此不一定需要下載。 - **免費內容： `true`** - **付費內容： `false`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** --- --- **[Good Stuff No Nonsense](https://goodstuffnononsense.com/)** ----------------------------------------------  Good Stuff No Nonsense 是一個僅由**一個人**建立的圖標庫，並且所有可用的圖標都是**手繪的**。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂的圖示： `false`** - **需要註冊： `false`** --- --- **[獵戶座](https://orioniconlibrary.com/)** ----------------------------------------  線條、實心、顏色和平面圖標具有精確和統一的風格。 適應具有不同筆畫粗細的任何類型的專案， 色彩控制和出色的易讀性。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** --- --- **[愛可月](https://icomoon.io/)** ------------------------------  IcoMoon 可作為網站和應用程式使用，提供超過 4,000 個免費圖示和圖示的離線儲存。每個圖標包都具有詳細的許可，以便設計人員和開發人員確切地知道如何使用圖標。用戶還可以製作自己的自訂圖示字體。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** --- --- **[皮克托尼克](https://pictonic.co/)** ---------------------------------  所有圖示均採用精確的像素比例設計，因此可以在不損失品質或完整性的情況下調整大小。由於它們以字體集的形式提供，因此該集合中的圖示也可以使用 CSS 元素進行風格化。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂的圖示： `false`** - **需要註冊： `true`** --- --- **[圖示8](https://icons8.com/)** ------------------------------  Icons8 系列擁有超過 100,000 個圖標且每日更新，在選擇和多樣性方面無可匹敵。使用者可以透過標籤搜尋圖標，也可以瀏覽 50 多個不同的主題集合來尋找滿足其需求的圖形。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** --- --- **[平面圖示](https://www.flaticon.com/)** -------------------------------------  超過 2,000,000 個 SVG、PSD、PNG、EPS 格式或 ICON FONT 格式的免費向量圖示。最大的免費向量圖示資料庫中有數千個免費圖示！ - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** *注意：您不需要註冊即可下載和瀏覽圖標，但要進行圖標自訂則需要註冊。* --- --- **[字體棒](https://fontawesome.com/)** -----------------------------------  當然，我需要將 Font Awesome 放在這個列表中，因為它實際上可能是最知名的圖示庫。 當我寫了一篇關於這個庫的文章後，請查看它以了解有關 Font Awesome 為您提供的所有功能的更多資訊。相信我，這是值得的。 https://dev.to/weeb/font-awesome-guide-and-useful-tricks-you-might-ve-not-known-about-until-now-o15 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** --- --- **[圖示偵察](https://iconscout.com)** ---------------------------------  iconcout 是數百萬個不同圖示的集合，涵蓋您可以想像的每個可能的類別。此處的使用者可以選擇建立和分享自己的圖標，並建立供訪客稍後查看的集合。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** --- --- **[圖示查找器](https://www.iconfinder.com/)** ----------------------------------------  Iconinder 是目前最大的圖標庫之一，擁有超過 400 萬個免費和付費圖標。此外，他們還提供 25,000 多個圖標集。 > Iconinder 為數百萬創意專業人士提供高品質的圖標。我們是一個小型國際團隊，總部位於美麗的哥本哈根市，其中一些遠端工作。我們與充滿熱情的圖標設計師社群一起打造世界上最受歡迎的圖標網站。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** --- --- **[像素之愛](https://www.pixellove.com/)** --------------------------------------  PixelLove 擁有超過 15,000 個適用於 iOS 和 Android 平台的圖標，是建立行動網站和應用程式的設計師的首選圖標集合。所有圖示都有多種像素尺寸可供選擇。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂的圖示： `false`** - **需要註冊： `false`** --- --- **[流線型圖標](https://streamlineicons.com/)** -----------------------------------------  三種不同重量的超過 10,500 個。 53個類別，720個子類別，總共30,000多個內容。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `true`** --- --- **[格拉比克漢堡](https://graphicburger.com/)** ----------------------------------------  Graphic Burger是一個特殊且獨特的網站，提供大量免費和付費圖示以及其他圖形元素。本網站上提供的所有圖標都經過精心優化，與各種網站、應用程式和其他圖形用途相容。可用圖示的選擇和種類非常多，幾乎有適合任何主題的圖示。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂的圖示： `false`** - **需要註冊： `false`** --- --- **[粉碎圖標](https://smashicons.com/)** -----------------------------------  Smashicons 提供極其全面的圖標集，目前其庫中包含超過 175,000 個圖標。然而，與提到的其他一些圖標庫不同，並非所有這些圖標都遵循相同的風格。因此，如果您想在網站、應用程式等上保持一致的外觀和感覺，您需要確保您需要的所有圖示都在特定的圖示集中。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `true`** --- --- **[PNG樹](https://pngtree.com/so/icon)** ---------------------------------------  在短短的3年時間裡，Pngtree已經累積了數百萬個獨特的平面設計資源。其中：插圖、向量、模板、背景，最重要的是圖示。 所有圖標都經過分類，可以無縫且快速地存取滿足您需求的設計。 找到圖示後，您可以將其下載為最大尺寸為 512×512 的 PNG 或 SVG 檔案。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂的圖示： `false`** - **需要註冊： `true`** --- --- **[偶像震撼](https://www.iconshock.com/)** --------------------------------------  超過 200 萬個專業圖示庫，包含 30 多種風格的 400 多個圖示集，包括 Flat、Material、iOS、Glyph、Colorful、Window 10、Revamped Office、3D Realistic、Isometric 等！ 除了擁有 200 萬個圖示庫之外，Iconshock 還專注於自訂樣式。具體來說，最受喜愛的有 Material、iOS、Flat、Modern 等。 您可以選擇下載單一圖示或下載整個圖示集。 - **免費內容： `true`** - **付費內容： `true`** - **可自訂圖示： `true`** - **需要註冊： `false`** --- --- **[材料設計圖示](https://materialdesignicons.com/)** ----------------------------------------------  Material Design Icons 不斷增長的圖標集合允許面向各種平台的設計人員和開發人員下載任何專案所需的格式、顏色和大小的圖標。它已經存在很多年了，並且與許多技術和框架相容。 - **免費內容： `true`** - **付費內容： `false`** - **可自訂圖示： `true`** - **需要註冊： `false`** ### **強烈推薦！** --- --- **[材質圖示](https://material.io/)** --------------------------------  選擇圖示後，您可以將顏色從黑色變更為白色，反之亦然。您也可以下載 SVG 或 PNG 格式。不過，如果您確實下載了 SVG 格式，則始終可以將顏色調整為特定專案所需的顏色。 更不用說有數百個免費圖示可供選擇，非常適合網站專案和網站以外的任何類型的圖形設計。 - **免費內容： `true`** - **付費內容： `false`** - **可自訂的圖示： `false`** - **需要註冊： `false`** --- --- **[免費圖示](https://freeicons.io/)** ---------------------------------  與我們已經瀏覽過的網站之一類似，FreeIcons 致力於僅突出顯示最突出的圖標包。 每個包包含多達 100 個圖標，大多數都經過精心設計。 但請放心，您還可以找到旅行、美食、女性、特定國家等主題的圖示。 而且，您可以選擇 3D、卡通、手繪、徽章、平滑等多種風格。 - **免費內容： `true`** - **付費內容： `false`** - **可自訂的圖示： `false`** - **需要註冊： `false`** --- 原文出處：https://dev.to/weeb/15-of-the-best-and-largest-icon-libraries-4p5n
第1課 ── 碼表應用程式 code：https://replit.com/@ZoeyLai1/08-01-vue-stopWatch 畫面：https://9ae3756c-652f-4aa4-9b57-cb528318fb08-00-msym9f2ajxo5.riker.replit.dev/ 第2課 ── 筆記應用程式 code：https://replit.com/@ZoeyLai1/08-02-memonote 畫面：https://7dbf5017-ba3f-4eb5-b23e-87113bcc7803-00-1adu58vgexdpe.kirk.replit.dev/ 第3課 ── 分帳應用程式 code：https://replit.com/@ZoeyLai1/08-03-Bill-Splitter 畫面：https://785f5421-ace6-4774-b61f-251f0116f3fd-00-1kwg6tn2x390e.spock.replit.dev/ 第4課 ── 行事曆應用程式 code：https://replit.com/@ZoeyLai1/08-04-Calendar 畫面：https://7d9aaced-68fc-43bb-be9a-bb01a57052f8-00-2ctp2w5sp9cin.picard.replit.dev/ 第5課 ── 體重追蹤應用程式 code：https://replit.com/@ZoeyLai1/08-05-WeightTracking 畫面：https://9960c13e-b168-449c-b1af-ee5a8a845f55-00-mz9h4glvormk.worf.replit.dev/ 第6課 ── 天氣查詢應用程式 code：https://replit.com/@ZoeyLai1/08-06-weather 畫面：https://d3611be6-202d-420b-b819-4a0a5e96d089-00-3i4a3aup60d27.janeway.replit.dev/ 第7課 ── 國家資訊與地圖應用程式 code：https://replit.com/@ZoeyLai1/08-07-Openstreetmap?v=1 畫面：https://fdd23ba6-9fea-448e-81a3-30f81404789f-00-2y0nrngj6ja9m.riker.replit.dev/
 **TL;DR - 儘管困難重重，我們建立的 Web 框架還是達到了一個里程碑！請查看（如果您喜歡的[話，請給我們加星支持](https://github.com/wasp-lang/wasp)- 謝謝！🙏），並閱讀下文以了解我們的故事以及我們是如何走到這一步的。** 作為一名開發人員，建立自己的 Web 框架可能是您能做的最可怕的事情之一。幾乎可以肯定你的專案將會失敗，作為額外的好處，其他開發人員會一路取笑你，數出它不起作用的所有原因。 < 圖>  分享您對新 Web 框架的想法是怎樣的感覺 這對我們來說沒有什麼不同。當我們開始 Wasp 時，每個人都問*“為什麼要另一個 Web 框架？為什麼有人會在成熟、著名的框架旁邊使用你的工具？”* 。我承認，這些都是好問題，但我們並沒有找到所有答案，甚至還沒有接近答案。但這絕對不是我們不這麼做的理由。 < 圖>  三年前，當我們推出 Wasp Alpha 時 我們繼續前進。我們心中有一個願景，我們想看看能否將其變成現實。**我們根本不在乎黃蜂是死是活，我們只知道我們需要堅持到底，這才是最重要的**。幾個月後，我們發布了 Alpha 版本並獲得了第一批 100 顆星。結果，這帶來了更多問題，我們距離弄清楚我們想像的概念是否真的能飛還差得遠。 **但是，我們也無法相信有人真的為我們的倉庫加註了星標。我們既驚訝又興奮**。我仍然清楚地記得 Martin Šošić 問我*“Matija，你能想像我們建立的專案在 GitHub 上獲得 1000 星嗎？”* 。我們倆立即搖頭大笑，心想*：“是啊，就是這樣啊！”* 。 < 圖>  我們的第一次社群更新，慶祝 GitHub 上的 100 顆星！ 9,500 顆星，近 3 年後，我們今天在這裡。 Wasp 即將進入 GitHub 上的精英 10,000 星俱樂部，與行業巨頭並駕齊驅。**我們啟動的框架，並根據社群的寶貴回饋進一步開發，正在被各種開發人員使用 - 從週末專案到新創公司和頂級企業**。用 Wasp 建立的新創公司[已被收購](https://dev.to/wasp/from-idea-to-exit-building-and-selling-an-ai-powered-saas-in-5-months-27d9)。我今天剛在 Upwork 上看到一則招募廣告，其中一家公司正在招募[Open SaaS](https://github.com/wasp-lang/open-saas) （React 和 Node.js 的開源免費樣板啟動器，由 Wasp 提供支援）開發人員🤯。  回想起來，我仍然覺得難以置信。從我哥哥女朋友（現在是妻子）的公寓開始，我們幾乎沒有開源也沒有社區建設經驗，但我們卻做出了全世界開發人員日常使用的產品，並且願意選擇使用它而不是主流的著名框架我們都知道。我們對此感到無比榮幸和謙卑。 我們仍然有很多問題（認為這些問題永遠不會消失），但現在也開始感覺我們得到了一些正確的答案。 < 圖>  我們今天收到的回饋 謝謝閱讀！[在這裡](https://github.com/wasp-lang/wasp)了解有關 Wasp 的更多資訊並支持我們達到 10,000 顆星的旅程。 PS：如果您想知道誰是黃蜂隊的真正老闆，現在我們終於在上面的照片中明確了這一點。必須把這個小傢伙一直帶到山頂，這樣他才能得到一個漂亮的鏡頭。 🐝 --- 原文出處：https://dev.to/wasp/our-web-framework-reached-9000-stars-on-github-9000-jij
--- 標題：為什麼事件溯源是一種微服務通訊反模式 發表：真實 描述：這篇文章描述了合理的事件溯源用例，並提供了微服務之間通訊的替代方案。 封面圖片：https://github.com/OLibutzki/blog/raw/master/water-4230596\_1920.jpg 標籤： 事件溯源, 領域驅動設計, 領域事件 --- 一般而言，事件驅動架構，特別是事件溯源，在過去幾年中獲得了廣泛關注。這種趨勢是由於我們努力建構具有彈性和可擴展性的模組化系統而引起的。*微服務*是在這種情況下經常使用的術語。在我看來，微服務只是實現有界脈絡的一種方法。模組化系統的核心是模組的邊界，而如何辨識這些邊界最有前途的想法是 Eric Evans 的領域驅動設計中引入的[戰略設計](https://en.wikipedia.org/wiki/Domain-driven_design#Strategic_domain-driven_design)。它可以幫助您辨識/發現模組及其邊界（[有界上下文](https://martinfowler.com/bliki/BoundedContext.html)），並描述這些有界上下文相互關聯的方式（上下文映射）。 *注意：我會預設某些術語的一些預知，因為我不想第一千次解釋它們。我決定連結到[microservices.io](https://microservices.io/) 、[維基百科](https://en.wikipedia.org)或[Martin Fowler 的 Bliki](https://martinfowler.com/bliki/)的解釋，因此，如果您對自己的知識感到不舒服，則可以更深入地研究某個主題。* 領域事件作為通用語言的核心 ============= 儘管在 Eric 的書中沒有明確提及，但領域事件很好地促進了 DDD 概念的發展。像 Alberto Brandolini 的[事件風暴](https://en.wikipedia.org/wiki/Event_storming)這樣的技術將事件的焦點從技術層面轉移到組織/業務層面。我們不討論一些 UI 層事件，例如*ButtonClickedEvent* ，而是討論領域事件，它們是業務領域的一部分，並由業務專家說出和理解。這些領域事件是一流的概念，並提供了一種形成所有參與者（領域專家、開發人員…）都同意的[通用語言的](https://martinfowler.com/bliki/UbiquitousLanguage.html)好方法。 用於跨界通訊的領域事件 =========== 領域事件可用於促進有界上下文之間的溝通。假設我們有一家具有三個限界上下文的線上商店：訂單、交貨、發票。 訂單上下文的網域事件是*訂單已接受*。發票和交付上下文對此事件的發生感興趣，因為它會導致一些內部流程啟動。 脫鉤神話 ==== 使用領域事件可以幫助您開發解耦的模組。模組可能會暫時離線。領域事件不關心不可用的模組，它們描述過去發生的事情。這取決於其他模組處理事件的速度。您得到的是一個設計上具有彈性的系統。 除了時間解耦之外，領域事件還具有另一個優勢，至少乍看之下是這樣： Order 上下文不必知道 Invoice 和 Delivery 上下文會偵聽其事件。實際上它甚至不需要知道這些上下文的存在。 這很酷，但具有挑戰性的部分是事件負載。哪些資料放入事件中？ 簡單的答案：事件溯源！ =========== 事件很有用，所以為什麼不賦予它們盡可能多的權力（和責任）。這就是[事件溯源](https://microservices.io/patterns/data/event-sourcing.html)的基本思想。您不會透過更新資料 (CRUD) 而是透過套用事件流來儲存聚合的狀態。 除了您可以重播事件以重建應用程式狀態之外，事件來源的一個重要功能是您可以免費獲得完整且可靠的審核日誌。因此，當需要這樣的稽核日誌時，在評估持久性策略時一定要考慮事件溯源。 事件溯源只是一種持久性策略嗎？ =============== 您可能想知道為什麼我從領域事件直接轉向持久化策略，因為這些概念顯然適用於不同的層/抽象層級。 ……這就是我的觀點：事件溯源是由單一限界上下文做出的本地決策！這些事件不該向外界曝光！其他限界上下文則不知道彼此的持久化策略，因此它們不知道也不關心另一個限界上下文是否使用事件溯源。 如果您在全球範圍內使用事件溯源，則會暴露您的持久層。 您的持久性將成為您的公共 API。每次限界上下文調整其持久性資料時，我們都必須處理公共 API 變更。 我很確定每個人都同意，由於開發和執行時耦合，不同的限界上下文[共享（關係）資料庫中的資料](https://microservices.io/patterns/data/shared-database.html)是一個壞主意。但差別在哪裡呢？ 空無一人。我們是否共享事件或資料庫表並不重要。在這兩種情況下，我們都會分享持久性詳細資訊。 有出路 === 我仍然認為領域事件非常適合限界上下文之間的通信，但這些事件不應與用於事件溯源的事件相對應。 我提出的解決方案是合乎邏輯的結果：無論您使用 CRUD 還是事件溯源方法來實現持久性，您都可以將領域事件發佈到全域事件儲存。這些領域事件是有界上下文的公共 API。如果您喜歡在限界上下文中使用事件溯源，則可以將這些事件儲存在本機事件儲存中，該儲存只能從此限界上下文存取 選擇的自由 ===== 在公共 API 中擁有專用領域事件可讓您決定如何對這些事件建模。您不受事件來源事件預先定義的佈局的限制。 對於每次發生的“現實世界事件”，您有兩個選擇： 使用已發布語言的開放主機服務 -------------- 準確發布一個網域事件，其中包含其他限界上下文可能需要的所有資料。在 DDD 術語中，我們將其稱為具有已發布語言的開放主機服務。  現實世界事件*Order Accepted*的發生會導致發布一個網域事件*OrderAccepted* 。此事件的有效負載包含 Order 期望其他限界上下文感興趣的所有資料...因此希望 Invoice 和 Delivery 上下文找到它們所需的所有資訊。 客戶/供應商 ------ 發布多個專用領域事件，每個事件使用者一個。您必須與另一方（消費者）討論每個特定的領域事件，而不必定義共享模型。 DDD 將這種關係稱為客戶/供應商。  現實世界事件*Order Accepted*的發生會導致每個消費限界上下文發布一個網域事件： *InvoiceOrderAccepted*和*DeliveryOrderAccepted* 。每個領域事件都包含消費上下文所請求的資料。 我不想討論這兩種選擇的優缺點。我只是想強調一下，您可以自由選擇領域事件的數量及其有效負載。 這是您不應低估的巨大優勢，因為您可以決定如何發展有界上下文的 API，而不必致力於事件溯源所需的事件。 結論 == 向外界公開持久性細節是一種眾所周知的反模式。在談論持久性時，我們首先想到的是資料庫表，但我解釋了為什麼用於事件來源的事件只是持久性資料的另一種方式。因此，暴露這些事件也是一種反模式。 {% 推特 784691906005635072 %} 如果以適當的（本地）方式使用事件溯源，它會非常強大。乍一看，它似乎是事件驅動架構的靈丹妙藥，但如果您深入研究，您會意識到它可能會引導您進入緊密耦合（分散式）系統……當然，這不是您的目標。 參考 == 除了我的個人經驗之外，我還從不同的摘要和會議演講中獲得了許多靈感。我想重點介紹 Eberhard Wolff 的演講《*基於事件的架構以及使用 Kafka 和 Atom 的實現》* 。特別是[事件溯源](https://youtu.be/Ecg7lvvm8aU?t=1178)和[事件中有什麼？](https://youtu.be/Ecg7lvvm8aU?t=655)與本博文的上下文高度相關。我選擇的線上商店範例是受到這次演講的啟發。 如果您想獲取更多訊息，還可以查閱其他一些資源： - [領域事件與事件溯源，](https://www.innoq.com/en/blog/domain-events-versus-event-sourcing/)作者：Christian Stettler，部落格文章 - [關於事件溯源，他們沒有告訴您的事情](https://medium.com/@hugo.oliveira.rocha/what-they-dont-tell-you-about-event-sourcing-6afc23c69e9a)由 Hugo Rocha 撰寫，部落格文章 - [DDD、CQRS、事件溯源的十年（CQRS/ES 不是頂級架構），](https://youtu.be/LDW0QWie21s?t=1259)作者：Greg Young，會議演講 --- 原文出處：https://dev.to/olibutzki/why-event-sourcing-is-a-microservice-anti-pattern-3mcj
您可以使用無數的框架和函式庫來改進您的全端應用程式。 我們將介紹令人興奮的概念，例如應用程式內通知、使用 React 製作影片、從為開發人員提供的電子郵件 API 到在瀏覽器中建立互動式音樂。 那我們就開始吧。 （不要忘記為這些庫加註星標以表示您的支持）。  https://github.com/CopilotKit/CopilotKit --- 1. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 ------------------------------------------------------------------------------------  您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea ``` 這是整合 CopilotTextArea 的方法。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { useState } from "react"; export function SomeReactComponent() { const [text, setText] = useState(""); return ( <> <CopilotTextarea className="px-4 py-4" value={text} onValueChange={(value: string) => setText(value)} placeholder="What are your plans for your vacation?" autosuggestionsConfig={{ textareaPurpose: "Travel notes from the user's previous vacations. Likely written in a colloquial style, but adjust as needed.", chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { max_tokens: 20, stop: [".", "?", "!"], }, }, }, }} /> </> ); } ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)。 基本概念是在幾分鐘內建立可用於基於 LLM 的全端應用程式的 AI 聊天機器人。 https://github.com/CopilotKit/CopilotKit --- 2. [Storybook](https://github.com/storybookjs/storybook) - UI 開發、測試和文件變得簡單。 ---------------------------------------------------------------------------  Storybook 是一個用於獨立建立 UI 元件和頁面的前端工作坊。它有助於 UI 開發、測試和文件編制。 他們在 GitHub 上有超過 57,000 次提交、81,000 多個 star 和 1300 多個版本。 這是您為專案建立簡單元件的方法。 ``` import type { Meta, StoryObj } from '@storybook/react'; import { YourComponent } from './YourComponent'; //👇 This default export determines where your story goes in the story list const meta: Meta<typeof YourComponent> = { component: YourComponent, }; export default meta; type Story = StoryObj<typeof YourComponent>; export const FirstStory: Story = { args: { //👇 The args you need here will depend on your component }, }; ``` 您可以閱讀[文件](https://storybook.js.org/docs/get-started/setup)。 如今，UI 除錯起來很痛苦，因為它們與業務邏輯、互動狀態和應用程式上下文糾纏在一起。 Storybook 提供了一個獨立的 iframe 來渲染元件，而不會受到應用程式業務邏輯和上下文的干擾。這可以幫助您將開發重點放在元件的每個變體上，甚至是難以觸及的邊緣情況。 https://github.com/storybookjs/storybook --- 3. [Appwrite](https://github.com/appwrite/appwrite) - 您的後端減少麻煩。 ---------------------------------------------------------------   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 可以非常輕鬆地建立具有開箱即用的擴充功能的可擴展後端應用程式。 https://github.com/appwrite/appwrite --- 4. [Wasp](https://github.com/wasp-lang/wasp) - 用於 React、node.js 和 prisma 的類似 Rails 的框架。 ---------------------------------------------------------------------------------------  使用 React 和 Node.js 開發全端 Web 應用程式的最快方法。這不是一個想法，而是一種建立瘋狂快速全端應用程式的不同方法。 這是將其整合到元件中的方法。 ``` import getRecipes from "@wasp/queries/getRecipes"; import { useQuery } from "@wasp/queries"; import type { User } from "@wasp/entities"; export function HomePage({ user }: { user: User }) { // Due to full-stack type safety, `recipes` will be of type `Recipe[]` here. const { data: recipes, isLoading } = useQuery(getRecipes); // Calling our query here! if (isLoading) { return <div>Loading...</div>; } return ( <div> <h1>Recipes</h1> <ul> {recipes ? recipes.map((recipe) => ( <li key={recipe.id}> <div>{recipe.title}</div> <div>{recipe.description}</div> </li> )) : 'No recipes defined yet!'} </ul> </div> ); } ``` 您可以閱讀[文件](https://wasp-lang.dev/docs)。 https://github.com/wasp-lang/wasp --- 5. [Novu](https://github.com/novuhq/novu) - 將應用程式內通知新增至您的應用程式！ --------------------------------------------------------------  Novu 提供開源通知基礎架構和功能齊全的嵌入式通知中心。 這就是如何使用`React`建立 novu 元件以用於應用程式內通知。 ``` import { NovuProvider, PopoverNotificationCenter, NotificationBell, } from "@novu/notification-center"; function App() { return ( <> <NovuProvider subscriberId={process.env.REACT_APP_SUB_ID} applicationIdentifier={process.env.REACT_APP_APP_ID} > <PopoverNotificationCenter> {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />} </PopoverNotificationCenter> </NovuProvider> </> ); } export default App; ``` 您可以閱讀[文件](https://docs.novu.co/getting-started/introduction)。 https://github.com/novuhq/novu --- 6. [Remotion](https://github.com/remotion-dev/remotion) - 使用 React 以程式設計方式製作影片。 -------------------------------------------------------------------------------  使用 React 建立真正的 MP4 影片，使用伺服器端渲染和參數化擴展影片製作。 開始使用以下 npm 指令。 ``` npm init video ``` 它為您提供了一個幀號和一個空白畫布，您可以在其中使用 React 渲染任何您想要的內容。 這是一個範例 React 元件，它將當前幀渲染為文字。 ``` import { AbsoluteFill, useCurrentFrame } from "remotion"; export const MyComposition = () => { const frame = useCurrentFrame(); return ( <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", fontSize: 100, backgroundColor: "white", }} > The current frame is {frame}. </AbsoluteFill> ); }; ``` 您可以閱讀[文件](https://www.remotion.dev/docs/)。 過去兩年，remotion 團隊因製作 GitHub Wrapped 而聞名。 https://github.com/remotion-dev/remotion --- [7.NocoDB](https://github.com/nocodb/nocodb) - Airtable 的替代品。 -------------------------------------------------------------  Airtable 的免費開源替代品是 NocoDB。它可以使用任何 MySQL、PostgreSQL、SQL Server、SQLite 或 MariaDB 資料庫製作智慧型電子表格。 其主要目標是讓強大的計算工具得到更廣泛的使用。 開始使用以下 npx 指令。 ``` npx create-nocodb-app ``` 您可以閱讀[文件](https://docs.nocodb.com/)。 NocoDB 的建立是為了為世界各地的數位企業提供強大的開源和無程式碼資料庫介面。 您可以非常快速地將airtable資料匯入NocoDB。 https://github.com/nocodb/nocodb --- 8.[新穎](https://github.com/steven-tey/novel)- 所見即所得編輯器，具有人工智慧自動完成功能。 -------------------------------------------------------------------  它使用`Next.js` 、 `Vercel AI SDK` 、 `Tiptap`作為文字編輯器。 開始使用以下 npm 指令。 ``` npm i novel ``` 您可以這樣使用它。有多種選項可用於改進您的應用程式。 ``` import { Editor } from "novel"; export default function App() { return <Editor />; } ``` https://github.com/steven-tey/novel --- 9. [Blitz](https://github.com/blitz-js/blitz) - 缺少 NextJS 的全端工具包。 -----------------------------------------------------------------  Blitz 繼承了 Next.js 的不足，為全球應用程式的交付和擴展提供了經過實戰考驗的函式庫和約定。 開始使用以下 npm 指令。 ``` npm install -g blitz ``` 這就是您如何使用 Blitz 建立新頁面。 ``` const NewProjectPage: BlitzPage = () => { const router = useRouter() const [createProjectMutation] = useMutation(createProject) return ( <div> <h1>Create New Project</h1> <ProjectForm submitText="Create Project" schema={CreateProject} onSubmit={async (values) => { // This is equivalent to calling the server function directly const project = await createProjectMutation(values) // Notice the 'Routes' object Blitz provides for routing router.push(Routes.ProjectsPage({ projectId: project.id })) }} /> </div> ); }; NewProjectPage.authenticate = true NewProjectPage.getLayout = (page) => <Layout>{page}</Layout> export default NewProjectPage ``` 您可以閱讀[文件](https://blitzjs.com/docs/get-started)。 它使建築物改善了數倍。  https://github.com/blitz-js/blitz --- 10. [Supabase](https://github.com/supabase/supabase) - 開源 Firebase 替代品。 -----------------------------------------------------------------------  我們大多數人都已經預料到 SUPABASE 會出現在這裡，因為它實在是太棒了。 開始使用以下 npm 指令 (Next.js)。 ``` npx create-next-app -e with-supabase ``` 這是使用 supabase 建立用戶的方法。 ``` import { createClient } from '@supabase/supabase-js' // Initialize const supabaseUrl = 'https://chat-room.supabase.co' const supabaseKey = 'public-anon-key' const supabase = createClient(supabaseUrl, supabaseKey) // Create a new user const { user, error } = await supabase.auth.signUp({ email: '[email protected]', password: 'example-password', }) ``` 您可以閱讀[文件](https://supabase.com/docs)。 您可以使用身份驗證、即時、邊緣功能、儲存等功能建立一個速度極快的應用程式。 Supabase 涵蓋了這一切！ 他們還提供了一些入門套件，例如 AI 聊天機器人和 Stripe 訂閱。 https://github.com/supabase/supabase --- [11.Refine](https://github.com/refinedev/refine) - 企業開源重組工具。 ------------------------------------------------------------  建立具有無與倫比的靈活性的管理面板、儀表板和 B2B 應用程式 您可以在一分鐘內使用單一 CLI 命令進行設定。 它具有適用於 15 多個後端服務的連接器，包括 Hasura、Appwrite 等。 開始使用以下 npm 指令。 ``` npm create refine-app@latest ``` 這就是使用 Refine 新增登入資訊的簡單方法。 ``` import { useLogin } from "@refinedev/core"; const { login } = useLogin(); ``` 您可以閱讀[文件](https://refine.dev/docs/)。 https://github.com/refinedev/refine --- 12. [Zenstack](https://github.com/zenstackhq/zenstack) - 資料庫到 API 和 UI 只需幾分鐘。 -----------------------------------------------------------------------------  TypeScript 工具包，透過強大的存取控制層增強 Prisma ORM，並釋放其全端開發的全部功能。 開始使用以下 npx 指令。 ``` npx zenstack@latest init ``` 這是透過伺服器適配器建立 RESTful API 的方法。 ``` // pages/api/model/[...path].ts import { requestHandler } from '@zenstackhq/next'; import { enhance } from '@zenstackhq/runtime'; import { getSessionUser } from '@lib/auth'; import { prisma } from '@lib/db'; // Mount Prisma-style APIs: "/api/model/post/findMany", "/api/model/post/create", etc. // Can be configured to provide standard RESTful APIs (using JSON:API) instead. export default requestHandler({ getPrisma: (req, res) => enhance(prisma, { user: getSessionUser(req, res) }), }); ``` 您可以閱讀[文件](https://zenstack.dev/docs/welcome)。 https://github.com/zenstackhq/zenstack --- 13. [Buildship](https://github.com/rowyio/buildship) - 低程式碼視覺化後端建構器。 --------------------------------------------------------------------  對於您正在使用無程式碼應用程式建構器（FlutterFlow、Webflow、Framer、Adalo、Bubble、BravoStudio...）或前端框架（Next.js、React、Vue...）建立的應用程式，您需要一個後端來支援可擴展的 API、安全工作流程、自動化等。BuildShip 為您提供了一種完全視覺化的方式，可以在易於使用的完全託管體驗中可擴展地建立這些後端任務。 這意味著您不需要在雲端平台上爭論或部署東西、執行 DevOps 等。只需立即建置和交付 🚀 https://github.com/rowyio/buildship --- 14. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 -----------------------------------------------------------------------------  Taipy 是一個開源 Python 庫，用於輕鬆的端到端應用程式開發， 具有假設分析、智慧管道執行、內建調度和部署工具。 開始使用以下命令。 ``` pip install taipy ``` 這是一個典型的Python函數，也是過濾器場景中使用的唯一任務。 ``` def filter_genre(initial_dataset: pd.DataFrame, selected_genre): filtered_dataset = initial_dataset[initial_dataset['genres'].str.contains(selected_genre)] filtered_data = filtered_dataset.nlargest(7, 'Popularity %') return filtered_data ``` 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 他們還有很多可供您建立的[演示應用程式教學](https://docs.taipy.io/en/latest/knowledge_base/demos/)。 https://github.com/Avaiga/taipy --- 15. [LocalForage](https://github.com/localForage/localForage) - 改進了離線儲存。 ------------------------------------------------------------------------  LocalForage 是一個 JavaScript 函式庫，它透過使用非同步資料儲存和簡單的、類似 localStorage 的 API 來改善 Web 應用程式的離線體驗。它允許開發人員儲存多種類型的資料而不僅僅是字串。 開始使用以下 npm 指令。 ``` npm install localforage ``` 只需包含 JS 檔案並開始使用 localForage。 ``` <script src="localforage.js"></script> ``` 您可以閱讀[文件](https://localforage.github.io/localForage/#installation)。 https://github.com/localForage/localForage --- 16. [Zod](https://github.com/colinhacks/zod) - 使用靜態類型推斷的 TypeScript-first 模式驗證。 -------------------------------------------------------------------------------  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", }); ``` 您可以閱讀[文件](https://zod.dev/)。 它適用於 Node.js 和所有現代瀏覽器 https://github.com/colinhacks/zod --- 17.[多普勒](https://github.com/DopplerHQ)- 管理你的秘密。 -----------------------------------------------  您可以透過在具有開發、暫存和生產環境的專案中組織機密來消除機密蔓延。 開始使用以下指令 (MacOS)。 ``` $ brew install dopplerhq/cli/doppler $ doppler --version ``` 這是安裝 Doppler CLI[的 GitHub Actions 工作流程](https://github.com/DopplerHQ/cli-action)。 您可以閱讀[文件](https://docs.doppler.com/docs/start)。 ``` name: Example action on: [push] jobs: my-job: runs-on: ubuntu-latest steps: - name: Install CLI uses: dopplerhq/cli-action@v3 - name: Do something with the CLI run: doppler secrets --only-names env: DOPPLER_TOKEN: ${{ secrets.DOPPLER_TOKEN }} ``` https://github.com/DopplerHQ --- 18. [FastAPI](https://github.com/tiangolo/fastapi) - 高效能、易於學習、快速編碼、可用於生產。 -------------------------------------------------------------------------  FastAPI 是一個現代、快速（高效能）的 Web 框架，用於基於標準 Python 類型提示使用 Python 3.8+ 建立 API。 開始使用以下命令。 ``` $ pip install fastapi ``` 這是您開始使用 FastAPI 的方式。 ``` from typing import Union from fastapi import FastAPI app = FastAPI() @app.get("/") def read_root(): return {"Hello": "World"} @app.get("/items/{item_id}") def read_item(item_id: int, q: Union[str, None] = None): return {"item_id": item_id, "q": q} ``` 您的編輯器將自動完成屬性並了解它們的類型，這是使用 FastAPI 的最佳功能之一。 您可以閱讀[文件](https://fastapi.tiangolo.com/)。 https://github.com/tiangolo/fastapi --- 19. [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 --- 20. [Scrapy](https://github.com/scrapy/scrapy) - Python 的快速進階網頁爬行和抓取框架.. ------------------------------------------------------------------------  Scrapy 是一個快速的高級網路爬行和網頁抓取框架，用於爬行網站並從頁面中提取結構化資料。它可用於多種用途，從資料探勘到監控和自動化測試。 開始使用以下命令。 ``` pip install scrapy ``` 建造並執行您的網路蜘蛛。 ``` pip install scrapy cat > myspider.py <<EOF import scrapy class BlogSpider(scrapy.Spider): name = 'blogspider' start_urls = ['https://www.zyte.com/blog/'] def parse(self, response): for title in response.css('.oxy-post-title'): yield {'title': title.css('::text').get()} for next_page in response.css('a.next'): yield response.follow(next_page, self.parse) EOF scrapy runspider myspider.py ``` 您可以閱讀[文件](https://scrapy.org/doc/)。 它擁有大約 50k+ 的星星，因此對於網頁抓取來說具有巨大的可信度。 https://github.com/scrapy/scrapy --- 21. [Tone](https://github.com/Tonejs/Tone.js) - 在瀏覽器中製作互動式音樂。 -------------------------------------------------------------  開始使用以下 npm 指令。 ``` npm install tone ``` 這是您開始使用 Tone.js 的方法 ``` // To import Tone.js: import * as Tone from 'tone' //create a synth and connect it to the main output (your speakers) const synth = new Tone.Synth().toDestination(); //play a middle 'C' for the duration of an 8th note synth.triggerAttackRelease("C4", "8n"); ``` 您可以閱讀[文件](https://github.com/Tonejs/Tone.js?tab=readme-ov-file#installation)。 https://github.com/Tonejs/Tone.js --- 22. [Spacetime](https://github.com/spencermountain/spacetime) - 輕量級 javascript 時區庫。 -----------------------------------------------------------------------------------  您可以計算遠端時區的時間；支持夏令時、閏年和半球。按季度、季節、月份、週來定位時間.. 開始使用以下 npm 指令。 ``` npm install spacetime ``` 您可以這樣使用它。 ``` <script src="https://unpkg.com/spacetime"></script> <script> var d = spacetime('March 1 2012', 'America/New_York') //set the time d = d.time('4:20pm') d = d.goto('America/Los_Angeles') d.time() //'1:20pm' </script> ``` https://github.com/spencermountain/spacetime --- 23. [Mermaid](https://github.com/mermaid-js/mermaid) - 從類似 markdown 的文字產生圖表。 ----------------------------------------------------------------------------  您可以使用 Markdown with Mermaid 等文字產生流程圖或序列圖等圖表。 這就是建立圖表的方法。 ``` sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good! ``` 它將做出如下圖。  您可以閱讀[VS Code](https://docs.mermaidchart.com/plugins/visual-studio-code)的[文件](https://mermaid.js.org/intro/getting-started.html)和外掛程式。 請參閱[即時編輯器](https://mermaid.live/edit#pako:eNpVkE1PwzAMhv9KlvM-2AZj62EIxJd24ADXXLzEbaKlcUkdUDX1v5MONomcnNevXz32UWoyKAvZ4mfCoPHRQRWhVuHeO42T7XZHNhTiFb0nMdRjYelbQETRUbpTwRM1uQ2erbaoDyqI_AbnZfjZVZYFVOBCy8J2DWlLwUQHKmAwKrwRo4gnF5Xid-gd2FEAL9hSyp12pMIpNcee2ArxEhH4LG-3D7TPoAPcnhL_4WVxcgHZkfedqIjMSI5ljbEGZ_LyxwFaSbZYo5JFLg3Eg5Iq9NkHiemjC1oWHBOOZWoM8PlQ_8Un45iiLErwbRY9gcH8PUrumuHKlWs5J2oKpasGPUWfZcvctMVsNrSnlWOb9lNN9ax1xkJk-7VZzVaL1RoWS1zdLuFmuTR6P9-sy8X1vDS3V_MFyL7vfwD_bJ1W)中的範例。 https://github.com/mermaid-js/mermaid --- 24.[公共 API](https://github.com/public-apis/public-apis) - 20 多個類別的 1400 多個 API。 -------------------------------------------------------------------------------  我們主要使用外部 API 來建立應用程式，在這裡您可以找到所有 API 的清單。網站連結在最後。 它在 GitHub 上擁有大約 279k+ 顆星。  從儲存庫取得網站連結非常困難。所以，我把它貼在這裡。 網址 - [Collective-api.vercel.app/](https://collective-api.vercel.app/) https://github.com/public-apis/public-apis --- 25. [Framer Motion](https://github.com/framer/motion) - 像魔法一樣的動畫。 -----------------------------------------------------------------  可用的最強大的動畫庫之一。 Framer 使用簡單的聲明性語法意味著您編寫的程式碼更少。更少的程式碼意味著您的程式碼庫更易於閱讀和維護。 您可以建立事件和手勢，並且使用 Framer 的社區很大，這意味著良好的支援。 開始使用以下 npm 指令。 ``` npm install framer-motion ``` 您可以這樣使用它。 ``` import { motion } from "framer-motion" <motion.div whileHover={{ scale: 1.2 }} whileTap={{ scale: 1.1 }} drag="x" dragConstraints={{ left: -100, right: 100 }} /> ``` 您可以閱讀[文件](https://www.framer.com/motion/introduction/)。 https://github.com/framer/motion --- 26.[順便說一句](https://github.com/btw-so/btw)- 在幾分鐘內建立您的個人部落格。 ----------------------------------------------------------  順便說一句，您可以註冊並使用，而無需安裝任何東西。您也可以使用開源版本自行託管。  使用順便說一句建立的[範例部落格](https://www.siddg.com/about)。 https://github.com/btw-so/btw --- 27. [Formbricks](https://github.com/formbricks/formbricks) - 開源調查平台。 --------------------------------------------------------------------  Formbricks 提供免費、開源的測量平台。透過精美的應用程式內、網站、連結和電子郵件調查收集用戶旅程中每個點的回饋。在 Formbricks 之上建置或利用預先建置的資料分析功能。 開始使用以下 npm 指令。 ``` npm install @formbricks/js ``` 這就是您開始使用 formbricks 的方法。 ``` import formbricks from "@formbricks/js"; if (typeof window !== "undefined") { formbricks.init({ environmentId: "claV2as2kKAqF28fJ8", apiHost: "https://app.formbricks.com", }); } ``` 您可以閱讀[文件](https://formbricks.com/docs/getting-started/quickstart-in-app-survey)。 https://github.com/formbricks/formbricks --- 28. [Stripe](https://github.com/stripe) - 支付基礎設施。 -------------------------------------------------  數以百萬計的各種規模的公司在線上和親自使用 Stripe 來接受付款、發送付款、自動化財務流程並最終增加收入。 開始使用以下 npm 指令 (React.js)。 ``` npm install @stripe/react-stripe-js @stripe/stripe-js ``` 這就是使用鉤子的方法。 ``` import React, {useState} from 'react'; import ReactDOM from 'react-dom'; import {loadStripe} from '@stripe/stripe-js'; import { PaymentElement, Elements, useStripe, useElements, } from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { event.preventDefault(); if (elements == null) { return; } // Trigger form validation and wallet collection const {error: submitError} = await elements.submit(); if (submitError) { // Show error to your customer setErrorMessage(submitError.message); return; } // Create the PaymentIntent and obtain clientSecret from your server endpoint const res = await fetch('/create-intent', { method: 'POST', }); const {client_secret: clientSecret} = await res.json(); const {error} = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, clientSecret, confirmParams: { return_url: 'https://example.com/order/123/complete', }, }); if (error) { // This point will only be reached if there is an immediate error when // confirming the payment. Show error to your customer (for example, payment // details incomplete) setErrorMessage(error.message); } else { // Your customer will be redirected to your `return_url`. For some payment // methods like iDEAL, your customer will be redirected to an intermediate // site first to authorize the payment, then redirected to the `return_url`. } }; return ( <form onSubmit={handleSubmit}> <PaymentElement /> <button type="submit" disabled={!stripe || !elements}> Pay </button> {/* Show error message to your customers */} {errorMessage && <div>{errorMessage}</div>} </form> ); }; const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); const options = { mode: 'payment', amount: 1099, currency: 'usd', // Fully customizable with appearance API. appearance: { /*...*/ }, }; const App = () => ( <Elements stripe={stripePromise} options={options}> <CheckoutForm /> </Elements> ); ReactDOM.render(<App />, document.body); ``` 您可以閱讀[文件](https://github.com/stripe/react-stripe-js?tab=readme-ov-file#minimal-example)。 您幾乎可以整合任何東西。它有一個巨大的選項清單。  https://github.com/stripe --- 29. [Upscayl](https://github.com/upscayl/upscayl) - 開源 AI 影像升級器。 ----------------------------------------------------------------  適用於 Linux、MacOS 和 Windows 的免費開源 AI Image Upscaler 採用 Linux 優先概念建構。 它可能與全端無關，但它對於升級圖像很有用。  透過最先進的人工智慧，Upscayl 可以幫助您將低解析度影像變成高解析度。清脆又鋒利！ https://github.com/upscayl/upscayl --- 30.[重新發送](https://github.com/resend)- 為開發人員提供的電子郵件 API。 -------------------------------------------------------  您可以使用 React 建立和傳送電子郵件。 2023 年最受炒作的產品之一。 開始使用以下 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)。  基本概念是一個簡單、優雅的介面，讓您可以在幾分鐘內開始發送電子郵件。它可以透過適用於您最喜歡的程式語言的 SDK 直接融入您的程式碼中。 https://github.com/resend --- 哇！如此長的專案清單。 我知道您有更多想法，分享它們，讓我們一起建造：D 如今建立全端應用程式並不難，但每個應用程式都可以透過有效地使用優秀的開源專案來解決任何問題來增加這一獨特因素。 例如，您可以建立一些提供通知或建立 UI 流來抓取資料的東西。 我希望其中一些內容對您的開發之旅有用。他們擁有一流的開發人員經驗；你可以依賴他們。 由於您將要建造東西，因此您可以在這裡找到一些[瘋狂的想法](https://github.com/florinpop17/app-ideas)。 祝你有美好的一天！直到下一次。 --- 原文出處：https://dev.to/copilotkit/im-building-a-full-stack-app-here-are-the-libraries-im-going-to-use-51nk
上週，我推出了[notesGPT](https://usenotesgpt.com/) ，這是一款免費開源語音記事應用程式，上週迄今為止已有[35,000 名訪客](https://twitter.com/nutlope/status/1760053364791050285)、7,000 名用戶和超過 1,000 名 GitHub star。它允許您錄製語音筆記，使用[Whisper](https://github.com/openai/whisper)進行轉錄，並透過[Together](https://together.ai/)使用 Mixtral 來提取操作項並將其顯示在操作項視圖中。它也是[完全開源的](https://github.com/nutlope/notesgpt)，配備了身份驗證、儲存、向量搜尋、操作項，並且在行動裝置上完全響應，易於使用。 我將向您詳細介紹我是如何建造它的。 架構和技術堆疊 ------- 這是架構的快速圖表。我們將更深入地討論每個部分，並同時展示程式碼範例。  這是我使用的整體技術堆疊： - 資料庫和雲端函數的[convex](https://convex.dev/) - Next.js [App Router](https://nextjs.org/docs/app)框架 - [複製](https://replicate.com/)Whisper 轉錄 - LLM 與[JSON 模式](https://docs.together.ai/docs/json-mode)的[Mixtral](https://mistral.ai/news/mixtral-of-experts/) - [Together.ai](http://Together.ai)用於推理和嵌入 - 用於儲存語音註釋的[凸檔存儲](https://docs.convex.dev/file-storage) - [凸向量搜尋](https://docs.convex.dev/vector-search)用於向量搜尋 - 負責使用者身份驗證的[職員](https://clerk.dev/) - [Tailwind CSS](https://tailwindcss.com/)樣式 登陸頁面 ---- 該應用程式的第一部分是您導航到notesGPT 時看到的登入頁面。  用戶首先看到的是這個登陸頁面，它與應用程式的其餘部分一起使用 Next.js 和 Tailwind CSS 進行樣式建立。我喜歡使用 Next.js，因為它可以輕鬆啟動 Web 應用程式並編寫 React 程式碼。 Tailwind CSS 也很棒，因為它允許您在網頁上快速迭代，同時與 JSX 保持在同一檔案中。 與 Clerk 和 Convex 進行身份驗證 ----------------------- 當使用者點擊主頁上的任一按鈕時，他們將被導向到登入畫面。這是由 Clerk 提供支援的，這是一個與 Convex 很好整合的簡單身份驗證解決方案，我們將在整個後端使用它，包括雲端功能、資料庫、儲存和向量搜尋。  Clerk 和 Convex 都很容易設定。您只需在這兩個服務上建立一個帳戶，安裝它們的 npm 庫，執行`npx convex dev`來設定您的凸資料夾，然後建立一個如下所示的`ConvexProvider.ts`檔案來包裝您的應用程式。 ``` 'use client'; import { ReactNode } from 'react'; import { ConvexReactClient } from 'convex/react'; import { ConvexProviderWithClerk } from 'convex/react-clerk'; import { ClerkProvider, useAuth } from '@clerk/nextjs'; const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!); export default function ConvexClientProvider({ children, }: { children: ReactNode; }) { return ( <ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!} > <ConvexProviderWithClerk client={convex} useAuth={useAuth}> {children} </ConvexProviderWithClerk> </ClerkProvider> ); } ``` 請查看[Convex Quickstart](https://docs.convex.dev/quickstart/nextjs)和[Convex Clerk](https://docs.convex.dev/auth/clerk) auth 部分以了解更多詳細資訊。 設定我們的架構 ------- 您可以在有或沒有模式的情況下使用 Convex。就我而言，我知道資料的結構並想要定義它，所以我在下面這樣做了。這也為您提供了一個非常好的類型安全 API，可以在與資料庫互動時使用。我們定義兩個表格－一個用於儲存所有語音註解資訊的`notes`表和用於提取的操作專案的`actionItems`表。我們還將定義索引，以便能夠透過`userId`和`noteId`快速查詢資料。 ``` import { defineSchema, defineTable } from 'convex/server'; import { v } from 'convex/values'; export default defineSchema({ notes: defineTable({ userId: v.string(), audioFileId: v.string(), audioFileUrl: v.string(), title: v.optional(v.string()), transcription: v.optional(v.string()), summary: v.optional(v.string()), embedding: v.optional(v.array(v.float64())), generatingTranscript: v.boolean(), generatingTitle: v.boolean(), generatingActionItems: v.boolean(), }) .index('by_userId', ['userId']) .vectorIndex('by_embedding', { vectorField: 'embedding', dimensions: 768, filterFields: ['userId'], }), actionItems: defineTable({ noteId: v.id('notes'), userId: v.string(), task: v.string(), }) .index('by_noteId', ['noteId']) .index('by_userId', ['userId']), }); ``` 儀表板 --- 現在我們已經有了後端和身份驗證設定以及模式，我們可以看看如何獲取資料。登入應用程式後，用戶可以查看其儀表板，其中列出了他們錄製的所有語音筆記。  為此，我們首先在凸資料夾中定義一個查詢，該查詢使用 auth 接收`userId` ，驗證其有效，並傳回與使用者的`userId`相符的所有註解。 ``` export const getNotes = queryWithUser({ args: {}, handler: async (ctx, args) => { const userId = ctx.userId; if (userId === undefined) { return null; } const notes = await ctx.db .query('notes') .withIndex('by_userId', (q) => q.eq('userId', userId)) .collect(); const results = Promise.all( notes.map(async (note) => { const count = ( await ctx.db .query('actionItems') .withIndex('by_noteId', (q) => q.eq('noteId', note._id)) .collect() ).length; return { count, ...note, }; }), ); return results; }, }); ``` 之後，我們可以透過凸提供的函數使用使用者的驗證令牌來呼叫此`getNotes`查詢，以在儀表板中顯示所有使用者的註解。我們使用伺服器端渲染在伺服器上取得此資料，然後將其傳遞到`<DashboardHomePage />`客戶端元件。這也確保了客戶端上的資料也保持最新。 ``` import { api } from '@/convex/_generated/api'; import { preloadQuery } from 'convex/nextjs'; import DashboardHomePage from './dashboard'; import { getAuthToken } from '../auth'; const ServerDashboardHomePage = async () => { const token = await getAuthToken(); const preloadedNotes = await preloadQuery(api.notes.getNotes, {}, { token }); return <DashboardHomePage preloadedNotes={preloadedNotes} />; }; export default ServerDashboardHomePage; ``` 錄製語音筆記 ------ 最初，使用者的儀表板上不會有任何語音註釋，因此他們可以點擊「錄製新語音註釋」按鈕來錄製。他們將看到以下螢幕，允許他們進行錄製。  這將使用本機瀏覽器 API 錄製語音筆記，將檔案保存在 Convex 檔案儲存中，然後透過 Replicate 將其傳送至 Whisper 進行轉錄。我們要做的第一件事是在凸資料夾中定義一個`createNote`突變，它將接收此記錄，在凸資料庫中保存一些訊息，然後呼叫耳語操作。 ``` export const createNote = mutationWithUser({ args: { storageId: v.id('_storage'), }, handler: async (ctx, { storageId }) => { const userId = ctx.userId; let fileUrl = (await ctx.storage.getUrl(storageId)) as string; const noteId = await ctx.db.insert('notes', { userId, audioFileId: storageId, audioFileUrl: fileUrl, generatingTranscript: true, generatingTitle: true, generatingActionItems: true, }); await ctx.scheduler.runAfter(0, internal.whisper.chat, { fileUrl, id: noteId, }); return noteId; }, }); ``` 耳語動作如下圖所示。它使用 Replicate 作為 Whisper 的託管提供者。 ``` export const chat = internalAction({ args: { fileUrl: v.string(), id: v.id('notes'), }, handler: async (ctx, args) => { const replicateOutput = (await replicate.run( 'openai/whisper:4d50797290df275329f202e48c76360b3f22b08d28c196cbc54600319435f8d2', { input: { audio: args.fileUrl, model: 'large-v3', translate: false, temperature: 0, transcription: 'plain text', suppress_tokens: '-1', logprob_threshold: -1, no_speech_threshold: 0.6, condition_on_previous_text: true, compression_ratio_threshold: 2.4, temperature_increment_on_fallback: 0.2, }, }, )) as whisperOutput; const transcript = replicateOutput.transcription || 'error'; await ctx.runMutation(internal.whisper.saveTranscript, { id: args.id, transcript, }); }, }); ``` 此外，所有這些檔案都可以在 Convex 儀表板的「檔案」下看到。  生成行動專案 ------ 使用者完成語音記錄並透過耳語進行轉錄後，輸出將傳遞到 Together AI 中。我們同時顯示此加載畫面。  我們首先定義一個我們希望輸出所在的模式。然後，我們將此模式傳遞到 Together.ai 上託管的 Mixtral 模型中，並提示辨識語音註釋的摘要、文字記錄，並根據成績單。然後我們將所有這些資訊保存到 Convex 資料庫中。為此，我們在凸資料夾中建立一個凸動作。 ``` // convex/together.ts const NoteSchema = z.object({ title: z .string() .describe('Short descriptive title of what the voice message is about'), summary: z .string() .describe( 'A short summary in the first person point of view of the person recording the voice message', ) .max(500), actionItems: z .array(z.string()) .describe( 'A list of action items from the voice note, short and to the point. Make sure all action item lists are fully resolved if they are nested', ), }); export const chat = internalAction({ args: { id: v.id('notes'), transcript: v.string(), }, handler: async (ctx, args) => { const { transcript } = args; const extract = await client.chat.completions.create({ messages: [ { role: 'system', content: 'The following is a transcript of a voice message. Extract a title, summary, and action items from it and answer in JSON in this format: {title: string, summary: string, actionItems: [string, string, ...]}', }, { role: 'user', content: transcript }, ], model: 'mistralai/Mixtral-8x7B-Instruct-v0.1', response_model: { schema: NoteSchema, name: 'SummarizeNotes' }, max_tokens: 1000, temperature: 0.6, max_retries: 3, }); const { title, summary, actionItems } = extract; await ctx.runMutation(internal.together.saveSummary, { id: args.id, summary, actionItems, title, }); }); ``` 當 Together.ai 做出回應時，我們會看到最終畫面，使用者可以在左側的記錄和摘要之間切換，並查看並勾選右側的操作專案。  向量搜尋 ---- 該應用程式的最後一部分是向量搜尋。我們使用 Together.ai 嵌入來嵌入文字記錄，並使人們可以根據文字記錄的語義在儀表板中進行搜尋。 我們透過在凸資料夾中建立一個`similarNotes`操作來實現此目的，該操作接受使用者的搜尋查詢，為其產生嵌入，並找到要在頁面上顯示的最相似的註釋。 ``` export const similarNotes = actionWithUser({ args: { searchQuery: v.string(), }, handler: async (ctx, args): Promise<SearchResult[]> => { // 1. Create the embedding const getEmbedding = await togetherai.embeddings.create({ input: [args.searchQuery.replace('/n', ' ')], model: 'togethercomputer/m2-bert-80M-32k-retrieval', }); const embedding = getEmbedding.data[0].embedding; // 2. Then search for similar notes const results = await ctx.vectorSearch('notes', 'by_embedding', { vector: embedding, limit: 16, filter: (q) => q.eq('userId', ctx.userId), // Only search my notes. }); return results.map((r) => ({ id: r._id, score: r._score, })); }, }); ``` 結論 -- 就像這樣，我們建立了一個可投入生產的全端人工智慧應用程式，配備身份驗證、資料庫、儲存和 API。請隨意查看[notesGPT，](https://usenotesgpt.com/)以從您的筆記或[GitHub 儲存庫](https://github.com/nutlope/notesGPT)產生操作專案以供參考。如果您有任何疑問，[請私訊我](twitter.com/nutlope)，我將非常樂意回答！ --- 原文出處：https://dev.to/nutlope/how-i-built-notesgpt-a-full-stack-ai-voice-note-app-265o
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
