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

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

最新出爐作業包

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

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

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

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

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

🔍 搜尋結果：replit

🔍 搜尋結果：replit

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

30 多個應用程式創意以及完整的源程式碼

這是科技進步的令人興奮的時刻。作為開發人員，我們所有人都需要從事可以產生收入或幫助建立我們聲譽的副業專案。今天，我們將介紹 10 個令人興奮的專案，並發現使用每個專案建立的 3-4 個流行應用程式。總共有 30 多個專案，提供程式碼存取供您學習。這些將讓您編碼一段時間，所以讓我們開始吧！ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fhpnyrvncqsbultjfk9.gif) --- 1. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 ------------------------------------------------------------------------------------ ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/769q31e3wi56efcmkx1s.png) 將 AI 功能整合到 React 中是很困難的，這就是 Copilot 的用武之地。一個簡單快速的解決方案，可將可投入生產的 Copilot 整合到任何產品中！您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建（完全可自訂）Copilot 原生 UX 元件，例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui ``` Copilot Portal 是 CopilotKit 提供的元件之一，CopilotKit 是一個應用程式內人工智慧聊天機器人，可查看目前應用狀態並在應用程式內採取操作。它透過插件與應用程式前端和後端以及第三方服務進行通訊。這就是整合聊天機器人的方法。 `CopilotKit`必須包裝與 CopilotKit 互動的所有元件。建議您也開始使用`CopilotSidebar` （您可以稍後切換到不同的 UI 提供者）。 ``` "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; export default function RootLayout({children}) { return ( <CopilotKit url="/path_to_copilotkit_endpoint/see_below"> <CopilotSidebar> {children} </CopilotSidebar> </CopilotKit> ); } ``` 您可以使用此[快速入門指南](https://docs.copilotkit.ai/getting-started/quickstart-backend)設定 Copilot 後端端點。之後，您可以讓 Copilot 採取行動。您可以閱讀如何提供[外部上下文](https://docs.copilotkit.ai/getting-started/quickstart-chatbot#provide-context)。您可以使用`useMakeCopilotReadable`和`useMakeCopilotDocumentReadable`反應掛鉤來執行此操作。 ``` "use client"; import { useMakeCopilotActionable } from '@copilotkit/react-core'; // Let the copilot take action on behalf of the user. useMakeCopilotActionable( { name: "setEmployeesAsSelected", // no spaces allowed in the function name description: "Set the given employees as 'selected'", argumentAnnotations: [ { name: "employeeIds", type: "array", items: { type: "string" } description: "The IDs of employees to set as selected", required: true } ], implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds), }, [] ); ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)並查看[演示影片](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file#demo)。您可以輕鬆整合 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 供應商。您可以按照本[指南](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)將聊天機器人整合到您的應用程式中。基本概念是在幾分鐘內建立可用於基於 LLM 的應用程式的 AI 聊天機器人。用例是巨大的，作為開發人員，我們絕對應該在下一個專案中嘗試使用 CopilotKit。 CopilotKit 在 GitHub 上擁有超過 4,200 個星星，發布了 200 多個版本，這意味著它們正在不斷改進。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8i6roafbjxvds26fl35.gif) {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} --- ### 🎯 使用 CopilotKit 建立的熱門應用程式。我們可以使用 CopilotKit 建立許多創新應用程式，所以讓我們探索一些脫穎而出的應用程式！ ### ✅ [人工智慧驅動的部落格平台](https://dev.to/copilotkit/how-to-build-an-ai-powered-blogging-platform-nextjs-langchain-supabase-1hdp)。 ![部落格平台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b89eub6whw7kxzbyw1dl.png) 您可以閱讀本文，使用`Next.js` 、 `Langchain` 、 `Supabase`和`CopilotKit`來建立這個令人驚嘆的應用程式。 LangChain & Tavily 用於網路搜尋人工智慧代理，Supabase 用於儲存和檢索部落格平台文章資料，而 CopilotKit 用於將人工智慧整合到應用程式中。您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/aipoweredblog)。 ### ✅ [文字到 Powerpoint 應用程式](https://dev.to/copilotkit/how-to-build-ai-powered-powerpoint-app-nextjs-openai-copilotkit-ji2)。您可以閱讀本文，使用`Next.js` 、 `OpenAI`和`CopilotKit`建立 Text to Powerpoint 應用程式。您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/aipoweredpresentation)。 ### ✅ [V0.dev 複製](https://dev.to/copilotkit/i-created-a-v0-clone-with-nextjs-gpt4-copilotkit-3cmb)。 ![v0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyutbegrv571lp3i6081.png) 如果您不熟悉，Vercel 的 V0 是一款人工智慧驅動的工具，可讓您根據提示產生 UI，以及許多其他有用的功能。您可以使用`Next.js` 、 `GPT4`和`CopilotKit`建立 V0 的克隆。這篇文章名列前 7 名，總的來說，這是一個值得加入到您的作品集中的偉大專案。您可以檢查[GitHub 儲存庫](https://github.com/Tabintel/v0-copilot-next)。 ### ✅[與您的履歷聊天](https://dev.to/copilotkit/how-to-build-the-with-nextjs-openai-1mhb)。您可以閱讀本文，使用`Next.js` 、 `OpenAI`和`CopilotKit`來建立這個很棒的工具。您不僅可以使用 ChatGPT 產生履歷，還可以將其匯出為 PDF，甚至可以透過與其對話來進一步改進它。多酷啊，對吧:) 您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/AIPoweredResumeBuilder)。 --- 2. [Appwrite](https://github.com/appwrite/appwrite) - 減少後端的麻煩。 -------------------------------------------------------------- ![應用程式寫入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8x568uz21seyygw6b72z.png) ![帶有 appwrite 的 sdk 列表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp7k8qnamsluto7eifpl.png) Appwrite 的開源平台可讓您將身份驗證、資料庫、函數和儲存體新增至您的產品中，並建立任何規模的任何應用程式、擁有您的資料並使用您喜歡的編碼語言和工具。類似的選項是supabase，但儘管它們有相似之處，但它們在幾個方面有很大不同。 Restack 非常漂亮地涵蓋了[Appwrite 與 Supabase](https://www.restack.io/docs/supabase-knowledge-supabase-vs-appwrite) 。一探究竟！他們有很好的貢獻指南，甚至不厭其煩地詳細解釋架構。開始使用以下 npm 指令。 ``` npm install appwrite ``` 您可以像這樣建立一個登入元件。 ``` "use client"; import { useState } from "react"; import { account, ID } from "./appwrite"; const LoginPage = () => { const [loggedInUser, setLoggedInUser] = useState(null); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [name, setName] = useState(""); const login = async (email, password) => { const session = await account.createEmailSession(email, password); setLoggedInUser(await account.get()); }; const register = async () => { await account.create(ID.unique(), email, password, name); login(email, password); }; const logout = async () => { await account.deleteSession("current"); setLoggedInUser(null); }; if (loggedInUser) { return ( <div> <p>Logged in as {loggedInUser.name}</p> <button type="button" onClick={logout}> Logout </button> </div> ); } return ( <div> <p>Not logged in</p> <form> <input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} /> <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} /> <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} /> <button type="button" onClick={() => login(email, password)}> Login </button> <button type="button" onClick={register}> Register </button> </form> </div> ); }; export default LoginPage; ``` 您可以閱讀[文件](https://appwrite.io/docs)。 Appwrite 可以非常輕鬆地建立具有開箱即用的擴充功能的可擴展後端應用程式。 Appwrite 最近推出的「Init」發布了一些令人興奮的功能。對於我們可以用 init 做什麼，我並沒有達到 100% 的標準，所以請發表評論讓我們了解更多資訊。它有一些很酷的功能，對於將我們的應用程式提升到一個新的水平非常有用。好奇心超載：D ![熱](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yflpzhvz7h0shs0dsrp8.png) 我很高興它可以連接到 Twilio、Vonage 和 Mailgun。更多選擇意味著更好的產品。 Appwrite 在 GitHub 上擁有 40k+ Stars，並且發布了`v1.5`版本。 {% cta https://github.com/appwrite/appwrite %} Star Appwrite ⭐️ {% endcta %} ### 🎯 使用 Appwrite 建立的熱門應用程式。 Appwrite 非常受歡迎，尤其是因為它的易用性。這些是一些很酷的專案，您可以從中獲得靈感。 ### ✅ [FoodMagic](https://github.com/Sameerkash/FoodMagic) - 擴增實境食品應用程式。 ![食物魔法](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/verpfy365uzrdyhopgdu.png) FoodMagic 是使用擴增實境和令人驚嘆的使用者介面的獨特食品配送服務。它是使用`Appwrite`和 Flutter 建立的。涉及 Appwrite 函數、資料庫、儲存和更多概念，因此您可以使用它學到很多東西。您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/aipoweredpresentation)。 ### ✅[回購評級員](https://github.com/EddieHubCommunity/RepoRater)。此專案可讓您從開發者體驗 (DX) 的角度對 GitHub 儲存庫進行評分。它是使用`Appwrite` 、 `Headless UI (React)` 、 `Next.js`和`Tailwind CSS`建立的。您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/aipoweredpresentation)並查看[即時執行情況](https://repo-rater.eddiehub.io/)。 ### ✅ [Twitter 克隆](https://www.youtube.com/watch?v=njLEDvoDjtk)- FreeCodeCamp (YouTube)。它具有各種功能，例如使用電子郵件和密碼註冊和登入、發送文字、圖像和連結、辨識和儲存主題標籤、顯示推文、喜歡推文、轉發、評論/回應、關注用戶、搜尋用戶、顯示追蹤者、追蹤和最近的推文、編輯用戶個人資料、顯示帶有特定主題標籤的推文以及名為「Twitter Blue」的高級功能。講師還實現了一個通知選項卡，當有人回覆您、追蹤您、喜歡您的推文或轉發時，該選項卡將顯示通知。在本教程結束時，您將擁有一個功能齊全的 Twitter 克隆，您可以對其進行進一步自訂和改進。意味著一切:) 他使用過`Flutter` 、 `Appwrite`和`Riverpod` ，並且教學超過 9 個小時，所以這是一個很長的教學。 ### ✅ [Dart 線上編譯器](https://github.com/aadarshadhakalg/Dart-Playground) ![飛鏢編譯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfazlnc0j33nrlybsngr.png) 一個應用程式，用戶可以編寫和執行小型 dart 程序，而無需在系統中安裝 dart SDK。該應用程式使用 Appwrite 函數來執行 dart 程式碼。它是使用`Appwrite`和`Flutter`建構的。這使用了 Appwrite Auth、函數和資料庫來進行工作。您可以檢查[GitHub 儲存庫](https://github.com/aadarshadhakalg/Dart-Playground)。 --- 3.[重新發送](https://github.com/resend)- 為開發人員提供的電子郵件 API。 ------------------------------------------------------ ![重發](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3auhh3hbxjmmzehe5v0.png) 您可以使用 React 建立和傳送電子郵件。 2023 年最受炒作的產品之一。他們提供了大量的 SDK 選項，因此您不必從您首選的技術堆疊進行切換。 ![開發工具包](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1e8qmaxzk00t7etu4f0z.png) Resend 非常值得信賴，許多公司（例如 Payload 和 Dub）都使用它。您可以看到[客戶](https://resend.com/customers)清單。開始使用以下 npm 指令。 ``` npm install @react-email/components -E ``` 這是將其與 next.js 專案整合的方法。 ``` import { EmailTemplate } from '@/components/email-template'; import { Resend } from 'resend'; const resend = new Resend(process.env.RESEND_API_KEY); export async function POST() { const { data, error } = await resend.emails.send({ from: '[email protected]', to: '[email protected]', subject: 'Hello world', react: EmailTemplate({ firstName: 'John' }), }); if (error) { return Response.json({ error }); } return Response.json(data); } ``` 您可以閱讀[文件](https://resend.com/docs/introduction)。 ![重發](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rer9ym187e4i9l11afkg.png) 如果您是教學人員，我推薦 YouTube 上的這個[播放清單系列](https://www.youtube.com/playlist?list=PL8HkCX2C5h0VVXsgSXtj2KXpoPATnMFeF)，它涵蓋了大部分內容並且易於理解。基本理念是一個簡單、優雅的介面，使您能夠在幾分鐘內開始發送電子郵件。它可以透過適用於您最喜歡的程式語言的 SDK 直接融入您的程式碼中。出於顯而易見的原因，React email 在 GitHub 上擁有最高的星數（12k+），並且超過 5000 名開發人員在他們的應用程式中使用它。 {% cta https://github.com/resend %} 星標重新發送 ⭐️ {% endcta %} ### 🎯 使用重新發送發送電子郵件的熱門應用程式。讓我們看看一些使用重新發送來發送電子郵件的應用程式。 ### ✅ [gitroom](https://github.com/gitroomhq/gitroom) 。提前安排所有社群媒體貼文和文章。您也可以與其他團隊成員合作交換或購買貼文。它是使用`NX (Monorepo)` 、 `NextJS (React)` 、 `NestJS` 、 `Prisma (Default to PostgreSQL)` 、 `Redis`和`Resend`建構的。您可以檢查[GitHub 儲存庫](https://github.com/gitroomhq/gitroom)和[網站](https://gitroom.com/)。 Gitroom 在 GitHub 上有 3k+ Stars。 ### ✅[任何郵件](https://github.com/anymail/django-anymail)。 Anymail 可讓您使用您選擇的交易電子郵件服務提供者 (ESP) 在 Django 中傳送和接收電子郵件。您可以檢查[GitHub 儲存庫](https://github.com/anymail/django-anymail)和[網站](https://anymail.dev/en/stable/)。他們在 GitHub 上有超過 1,500 個 Stars，並且正在發布 v10 版本。 ### ✅[徽章](https://github.com/projectx-codehagen/Badget)。 ![徽章](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xmfd2wzpfj0c0qmxkt22.png) Badget 旨在透過使用者友善的介面和強大的後端來簡化財務管理。它是使用`Next.js 14` 、 `Turborepo` 、 `Drizzle ORM` 、 `Planetscale` 、 `Clerk` 、 `Resend` 、 `React Email` 、 `Shadcn/ui`和`Stripe`建置的。您可以檢查[GitHub 儲存庫](https://github.com/projectx-codehagen/Badget)。這個專案很快就會在 GitHub 上達到 2k Stars。 --- 4. [Shadcn UI](https://ui.shadcn.com/docs) - 您可以將其複製並貼上到應用程式中的元件。 ----------------------------------------------------------------- ![shadcn使用者介面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xhp1p50dd3b51weao3b.png) 這個開源專案無需介紹。由於其簡單性、自訂選項和靈活性，它一推出就受到了熱烈歡迎。然而，我確實同意它並不像看起來那麼簡單，特別是如果您不熟悉它的語法和結構。開始使用以下命令（Next.js 應用程式）。 ``` npx shadcn-ui@latest init ``` 其餘的將自動完成，您可以匯入[元件](https://ui.shadcn.com/docs/components/accordion)並相應地使用它們。您可以根據您使用的框架閱讀[文件](https://ui.shadcn.com/docs)和[安裝指南](https://ui.shadcn.com/docs/installation)。 Shadcn UI 在 GitHub 上擁有超過 55,000 顆星，並被超過 3,000 名開發者使用。 {% cta https://ui.shadcn.com/docs %} Star Shadcn UI ⭐️ {% endcta %} ### 🎯 使用 Shadcn UI 建立的熱門應用程式。我不會介紹非常簡單的專案，所以不用擔心。 ### ✅ [10000+ shadcn/ui 主題](https://github.com/jln13x/ui.jln.dev/)。 ![10000+ 主題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywbrkhizpjqogtrk7svm.png) 有了這個，您可以探索、保存、產生新主題，甚至對隨機主題進行投票。您可以使用的好專案之一。使用者介面也很糟糕。它是使用很多套件建構的，例如`react-query` 、 `Framer` 、 `Zod` ，當然還有`shadcn ui` 。您可以查看[GitHub 儲存庫](https://github.com/jln13x/ui.jln.dev/)和[現場演示](https://ui.jln.dev/)。它在 GitHub 上有 600 多個 Star。 ### ✅[開啟 v0](https://github.com/raidendotai/openv0) 。 ![開放v0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rubuowp2oerrexy9adp1.png) 我正在報道 v0.dev 但意識到它不是開源的。我不會放棄這個想法。 Openv0 是另一個使用 AI 產生 UI 元件的專案。元件產生是一個多通道管道 - 每個通道都是一個完全獨立的插件。它支援 React、Next.js 和 Svelte 等前端框架。使用 Flowbite、NextUI 和 Shadcn 建置。檢查[GitHub 儲存庫](https://github.com/raidendotai/openv0)並閱讀[安裝指南](https://github.com/raidendotai/openv0?tab=readme-ov-file#install)。您也可以在[Replit](https://replit.com/@n-raidenai/openv0-react)上執行它。它在 GitHub 上有 3k+ Stars。很多專案都使用Shadcn，請自行探索。 --- 5. [Buildship](https://buildship.com/) - 低程式碼視覺化後端建構器。 ------------------------------------------------------ ![建造船](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzlrynz5xephv4t9layd.png) 對於您正在使用無程式碼應用程式建構器（FlutterFlow、Webflow、Framer、Adalo、Bubble、BravoStudio...）或前端框架（Next.js、React、Vue...）建立的應用程式，您需要一個後端來支援可擴展的 API、安全工作流程、自動化等。 BuildShip 為您提供了一種完全視覺化的方式，可以在易於使用的完全託管體驗中可擴展地建立這些後端任務。這意味著您無需在雲端平台上爭論或部署事物或執行 DevOps。只需立即建造和發貨 🚀 他們甚至與 TypeSense 合作並且發展得非常快！ ![建造船](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6oc3rc713mjg9cwqj7d4.png) 我嘗試過Buildship，它很強大。 {% cta https://github.com/rowyio/buildship %} 明星建造 ⭐️ {% endcta %} ### 🎯 使用 Buildship 建立的熱門應用程式。大多數資源都是影片，但值得一看。 YouTube 官方頻道上有很多教程，但以下是一些有趣的教程。 ### ✅[使用低程式碼和 AI 建立旅遊 WebApp](https://www.youtube.com/watch?v=Pj08uTOzNPQ) 。 ![旅行應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8c179msfljpnesbrf4vi.png) 它是使用`Buildship`和`Locofy`建構的。 Locofy.ai 用於從設計到應用程式前端的過渡，而 BuildShip.com 用於應用程式的後端。它還計算實時距離和旅程成本。他們使用 Figma 來源進行設計。 ### ✅ [Telegram 上的人工智慧助理](https://www.youtube.com/watch?v=Pz1t1KCnrbs)。您可以使用 OpenAI Assistant 和 BuildShip 建立智慧型 Telegram 機器人，而無需編碼。這將幫助您與資料聊天。看起來很令人興奮，對吧:) ### ✅ [AI YouTube 時間戳產生器](https://www.youtube.com/watch?v=7DkLUY6kfTg)。 ![時間戳生成器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2wv0s9mz9wpuez4egee.png) 相信我，使用本教程您會學到很多東西。您可以查看開發人員上[未發布的有關自訂提示的帖子](https://dev.to/jamesmurdza/building-a-fcg-temp-slug-4578922?preview=4210cdff8fea25a8cd4d81363155c451b20e6484504a41fa0f0d992a272c21a3a707c0cb6ddac2f740234c032a02af5ce442841ad4033efc46424c84)。您可以檢查[前端程式碼](https://github.com/jamesmurdza/timestamp-generator-app/)。 --- 6. [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ---------------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/deak7rre409rzv5j5viv.png) Taipy 是一個開源 Python 庫，可用於輕鬆的端到端應用程式開發，具有假設分析、智慧管道執行、內建調度和部署工具。我相信你們大多數人都不明白 Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。因此，您可以繪製資料集的圖表，並使用類似 GUI 的滑桿來提供使用其他實用功能來處理資料的選項。雖然 Streamlit 是一種流行的工具，但在處理大型資料集時，其效能可能會顯著下降，這使得它在生產級使用上不切實際。另一方面，Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 Taipy，您將親身體驗其用戶友好的介面和高效的資料處理。在底層，Taipy 利用各種函式庫來簡化開發並增強功能。 ![圖書館](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9xts3nof4uapr7dakrl.png) 開始使用以下命令。 ``` pip install taipy ``` 他們還使用分散式運算提高了效能，但最好的部分是 Taipy，它的所有依賴項現在都與 Python 3.12 完全相容，因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。您可以閱讀[文件](https://docs.taipy.io/en/latest/)。另一個有用的事情是，Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。 ![太皮工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc1umm5hcxes0ydbuspb.png) 如果您想閱讀部落格來了解程式碼庫結構，您可以閱讀 HuggingFace[的使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。 Taipy 在 GitHub 上有 8k+ Stars，並且處於`v3`版本，因此它們正在不斷改進。 {% cta https://github.com/Avaiga/taipy %} Star Taipy ⭐️ {% endcta %} ### 🎯 使用 Taipy 建立的熱門應用程式。嘗試新技術通常很困難，但 Taipy 提供了 10 多個演示教程，其中包含程式碼和適當的文件供您遵循。我們將看到開發人員建構的其他一些專案。 ### ✅[錢包方面](https://github.com/Ujj1225/from_Taipy-walletWISE)。 ![錢包明智](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vva4tu9dxrz9fgaiavlb.png) WalletWise 就像是我們財務的友善幫手，幫助我們追蹤收入和支出。它使用 Gemini 進行交易，使用 Taipy 來了解支出。對使用者的收入和支出進行分析，以數學方式顯示，並顯示 7 個做出更好、更明智的財務決策的提示。它還具有視覺化工具，您可以在其中查看不同的標題，以了解有關您的支出的更多資訊。就創造力而言，這是下面提到的所有內容中最好的。 ### ✅[人口普查](https://github.com/SusheelThapa/from_taipy_census)。透過由 Taipy 提供支持的「人口普查」專案，將資料編織到動態視覺化中，揭開 2021 年尼泊爾的住房和人口故事。這有很多選擇，所以如果您想用更少的錢學到更多，這是最好的選擇！ ### ✅[太皮象棋](https://github.com/KorieDrakeChaney/taipy-chess)。 ![棋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xasxqldf7z1q5ie3r4nn.png) 所有應用程式中我最喜歡的一個，因為我喜歡國際象棋。哈哈！這是一個基於20,000盤棋的國際象棋視覺化工具。您可以查看所有比賽、他們參加的開局、對手、表現最好的開局以及最成功的開局。您可以查看資料的熱圖和圖表。您還可以查看[Olympic Medals Taipy 應用程式](https://github.com/enarroied/Olympic-Medals-Taipy-App)，該應用程式提供了一個儀表板，其中包含有關奧運獎牌、 [Covid 儀表板](https://covid-dashboard.taipy.cloud/Country)和[資料視覺化的](https://production-planning.taipy.cloud/Data-Visualization)訊息。 --- 7. [xyflow](https://github.com/xyflow/xyflow) - 使用 React 建立基於節點的 UI。 -------------------------------------------------------------------- ![XY流](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yevpzvqpt3u6ahkqdrsl.png) XYFlow 是一個強大的開源程式庫，用於使用 React 或 Svelte 建立基於節點的 UI。它是一個單一的倉庫，提供[React Flow](https://reactflow.dev)和[Svelte Flow](https://svelteflow.dev) 。讓我們更多地了解可以使用 React flow 做什麼。 ![反應流](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mzezlna4v4bx75z3omr.png) 您可以觀看此影片，在 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; ``` 這就是它的樣子。您還可以新增標籤、更改類型並使其具有互動性。 ![你好世界](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzerdd3ng0vtnz5rbgau.png) 您可以在 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. ``` ![背景元件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en2tl17ef31nydaycw18.png) 如果您正在尋找一篇快速文章，我建議您查看 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://dev-to-uploads.s3.amazonaws.com/uploads/articles/o99csz9epqmai3ixt859.png) {% cta https://github.com/xyflow/xyflow %} 星 xyflow ⭐️ {% endcta %} ### 🎯 使用 React Flow 建立的熱門應用程式。很多公司都使用 React flow，例如 Zapier 和 Stripe。夠可信，可以使用。我不會介紹使用 Svelte Flow 製作的應用程式，因為 React 更受歡迎。 ### ✅[條紋文件](https://docs.stripe.com/payments/checkout/how-checkout-works#lifecycle)。 ![條紋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crma9z46y0u2m5p3z9wa.png) Stripe 使用它，特別是在展示結帳的工作原理時。您可以閱讀[完整的文件](https://stripe.com/docs)。 ### ✅[著色蛙](https://shaderfrog.com/2/editor/cln84z4950000pan66v5fcunv)。 ![著色蛙](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ri9aw9vynoiflkbvclq.png) 我選擇這個是因為這個專案很酷。 ### ✅ [類型](https://www.typeform.com/help/a/use-the-logic-map-to-add-logic-to-your-forms-5514792640916/)。 ![打字機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48gc4m8ewm4j65luuavs.png) Typeform 使用它來展示如何使用邏輯圖為表單新增邏輯。您也可以發現它被用於[FlowwiseAI](https://flowiseai.com/)和[Doubleloop](https://app.doubleloop.app/strategy/2236/map) 。想讓您知道，Supabase 是 GitHub 上 XYflow 的贊助商之一。 --- 8. [Pieces](https://github.com/pieces-app) - 您的工作流程副駕駛。 ------------------------------------------------------- ![件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf2qgqtpv78fxw5guqm5.png) Pieces 是一款支援人工智慧的生產力工具，旨在透過智慧程式碼片段管理、情境化副駕駛互動和主動呈現有用材料來幫助開發人員管理混亂的工作流程。它最大限度地減少了上下文切換、簡化了工作流程並提升了整體開發體驗，同時透過完全離線的 AI 方法維護了工作的隱私和安全性。太棒了：D ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2ro3rcwnqp4qrmv5e8s.png) 它與您最喜歡的工具無縫集成，以簡化、理解和提升您的編碼流程。它具有比表面上看到的更令人興奮的功能。 - 它可以透過閃電般快速的搜尋體驗找到您需要的材料，讓您根據您的喜好透過自然語言、程式碼、標籤和其他語義進行查詢。可以放心地說“您的個人離線谷歌”。 - Pieces 使用 OCR 和 Edge-ML 升級螢幕截圖，以提取程式碼並修復無效字元。因此，您可以獲得極其準確的程式碼提取和深度元資料豐富。您可以查看 Pieces 可用[功能的完整清單](https://pieces.app/features)。您可以閱讀[文件](https://docs.pieces.app/)並存取[網站](https://pieces.app/)。他們為 Pieces OS 用戶端提供了一系列 SDK 選項，包括[TypeScript](https://github.com/pieces-app/pieces-os-client-sdk-for-typescript) 、 [Kotlin](https://github.com/pieces-app/pieces-os-client-sdk-for-kotlin) 、 [Python](https://github.com/pieces-app/pieces-os-client-sdk-for-python)和[Dart](https://github.com/pieces-app/pieces-os-client-sdk-for-dart) 。 {% cta https://github.com/pieces-app/ %} 星星碎片 ⭐️ {% endcta %} ### 🎯 用 Pieces 建置的熱門應用程式。由於它更像是一個工具，因此不會有那麼多專案，但開發人員仍然使用它來建立很棒的專案。 ### ✅[辦公桌夥伴](https://github.com/ayothekingg/deskbuddy)。一個社區專案，可透過分析和 Copilot Conversation 幫助您了解、評估和改善您的編碼習慣。使用的主要語言是 TypeScript。您可以檢查[GitHub 儲存庫](https://github.com/ayothekingg/deskbuddy)。 ### ✅ [CLI 代理](https://github.com/pieces-app/cli-agent)。一個全面的命令列介面 (CLI) 工具，旨在與 Pieces OS 無縫互動。它提供了一系列功能，例如資產管理、應用程式互動以及與各種 Pieces OS 功能的整合。使用的主要語言是Python。您可以檢查[GitHub 儲存庫](https://github.com/pieces-app/cli-agent)。 ### ✅ [Streamlit 和碎片](https://github.com/pieces-app/pieces-copilot-streamlit-example)。 Pieces Copilot Streamlit Bot 是一款使用 Streamlit 建立的互動式聊天機器人應用程式，旨在為用戶提供無縫介面來即時提問和接收答案。使用的主要語言是Python。您可以檢查[GitHub 儲存庫](https://github.com/pieces-app/pieces-copilot-streamlit-example)。 --- 9. [Typesense](https://github.com/typesense/typesense) - 快速、容錯、記憶體中模糊搜尋引擎。 -------------------------------------------------------------------------- ![類型感](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uc2r5owew7bkeckc81n.png) Typesense 是一款開源、容錯的搜尋引擎，針對即時（通常低於 50 毫秒）的即輸入即搜尋體驗和開發人員工作效率進行了最佳化。如果您聽說過 ElasticSearch 或 Algolia，那麼考慮 Typesense 的一個好方法是，它是 Algolia 的開源替代品，解決了一些關鍵問題，並且是 ElasticSearch 的更易於使用、包含電池的替代品。您可以在[Algolia vs ElasticSearch vs Meilsearch vs Typesense](https://typesense.org/typesense-vs-algolia-vs-elasticsearch-vs-meilisearch/)中對它們進行比較。它是一個快速、容錯、內存中模糊搜尋引擎，用於建置令人愉快的搜尋體驗 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dj1dov237eyg662vqw6y.png) 您可以使用此指令安裝 Typesense 的 python 用戶端。 ``` pip install typesense ``` 根據文件，在這些情況下不應使用 Typesense。 A。 Typesense 不應用作主資料存儲，它存儲資料的唯一副本。 b. Typesense 通常不太適合搜尋應用程式日誌。您可以閱讀[文件](https://typesense.org/docs/)和[安裝指南](https://github.com/typesense/typesense?tab=readme-ov-file#install)。 ![類型感](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwf0c9jgjrju1xtrwfqv.png) 我建議您閱讀快速入門[指南](https://typesense.org/docs/guide/#quick-start)，該指南將逐步指導您如何安裝和建立搜尋 UI。他們還提供了高達 28M 的資料集的明確[基準測試](https://typesense.org/docs/overview/benchmarks.html#typesense-benchmarks)，以便您可以檢查將獲得的效能。如果您更喜歡教程，那麼我建議您觀看這個[YouTube 影片](https://www.youtube.com/watch?v=kwtHOkf7Jdg)。您將獲得 Typesense 的概述，作者將向您展示端到端演示。 TypeSense 在 GitHub 上有 17k+ Stars，而且版本為 26，這真是太瘋狂了。它是使用 C++ 建構的。 {% cta https://github.com/typesense/typesense?tab=readme-ov-file %} 明星 Typesense ⭐️ {% endcta %} ### 🎯 使用 Typesense 建立的熱門應用程式。一些使用 Typesense 的現場演示和應用程式。 ### ✅ 現場示範。他們還提供現場演示，展示 Typesense 在大型資料集上的實際應用，例如： - [從 Linux 核心搜尋 1M Git 提交訊息](linux-commits-search.typesense.org)- [GitHub Repo](https://github.com/typesense/showcase-linux-commits-search) - [從 MusicBrainz 搜尋 3200 萬首歌曲資料集](songs-search.typesense.org)- [GitHub Repo](https://github.com/typesense/showcase-songs-search) - [具有預先輸入功能的拼字檢查器，包含 333K 英文單字](spellcheck.typesense.org)- [GitHub Repo](https://github.com/typesense/showcase-spellcheck) - [從 OpenLibrary 搜尋 28M 圖書資料集](books-search.typesense.org)- [GitHub Repo](https://github.com/typesense/showcase-books-search) - [GeoSearch / 瀏覽體驗](airbnb-geosearch.typesense.org)- [GitHub Repo](https://github.com/typesense/showcase-airbnb-geosearch) - [電子商務瀏覽與搜尋體驗](https://ecommerce-store.typesense.org/)- [GitHub Repo](https://github.com/typesense/showcase-ecommerce-store) - [搜尋 2M 烹飪食譜](https://recipe-search.typesense.org/)- [GitHub Repo](https://github.com/typesense/showcase-recipe-search) 其他一些公司使用 Typesense 雲端來完成整個工作。 ![類型感知雲](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kn37bf908emr04ahilo.png) 這些公司包括 Codecademy、Logitech、Buildship、n8n 和 Storipress CMS。 --- 10. [Payload](https://github.com/payloadcms/payload) - 建立未來網路的最快方式。 ------------------------------------------------------------------- ![有效負載](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h79j0zte5eo7n32639jy.png) 建立現代後端 + 管理 UI 的最佳方式。 Payload 沒有黑魔法，全是 TypeScript，並且完全開源，它既是一個應用程式框架，也是一個無頭 CMS。我全心全意欽佩的少數專案之一。他們的網站擁有最乾淨的使用者介面之一，我看過 1000 多個網站，其中包括非常瘋狂的網站。快去看看吧！ ![有效負載客戶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ep8brjas1iaptifw97e.png) 您可以觀看這段 YouTube 影片，其中 James（聯合創始人）談論了 Payload CMS 簡介以及它如何縮小 Headless CMS 和應用程式框架之間的差距。 {% 嵌入 https://www.youtube.com/watch?v=In\_lFhzmbME %} 簡而言之，Payload 是一個無頭 CMS 和應用程式框架。它旨在為您的開發過程提供巨大的推動力，但重要的是，當您的應用程式變得更加複雜時，請不要妨礙您。開始使用以下命令。 ``` npx create-payload-app@latest ``` 您可以閱讀 Payload 與普通 CMS 不同的完整[功能清單](https://github.com/payloadcms/payload?tab=readme-ov-file#-features)。如果您是 next.js 的粉絲，我建議您閱讀[The Ultimate Guide To Use Next.js with Payload](https://payloadcms.com/blog/the-ultimate-guide-to-using-nextjs-with-payload) 。您可以閱讀[文件](https://payloadcms.com/docs)和[安裝指南](https://payloadcms.com/docs/getting-started/installation)。 v3 beta 版本的有效負載也變得很困難，所以請密切注意。 Payload 在 GitHub 上擁有 19k+ Stars，並被 8k+ 開發者使用。 {% cta https://github.com/payloadcms/payload %} 明星有效負載 ⭐️ {% endcta %} ### 🎯 使用 Payload 的熱門應用程式 + 模板。我們將看到可協助您將 Payload 用於特定用例的範本和應用程式。 ### ✅[混音和有效負載](https://github.com/payloadcms/remix-server) 帶有 Remix 和 Payload 的單聲道儲存庫範本。這可以幫助您設定 Payload CMS 與 Remix 一起進行內容管理，從而將每個應用程式分為其套件（包括 Express 伺服器應用程式）。 ### ✅ [Astro 和有效負載](https://github.com/mooxl/astroad) 這是 Astro 和 Payloadcms 的預先配置設置，旨在讓您輕鬆開始建立網站。借助 Astroad，您將擁有一個可以使用 Docker 在本地執行的完整開發環境。此設定簡化了將網站部署到生產環境之前的測試和開發。 ### ✅[電子商務範本](https://github.com/payloadcms/payload/tree/main/templates/ecommerce)。他們還提供了一個電子商務模板，可幫助您更專注於業務策略而不是技術。您的 API 是您自己的，您的資料也屬於您。您無需依賴第三方服務，這些服務可能會在每月費用之外向您收取 API 超額費用，並可能限制您對資料庫的存取。經營線上商店的成本永遠不會超過伺服器的成本（加上支付處理費）。開始做一些我們不喜歡的事情總是感覺很奇怪，因此您可以閱讀[如何使用使用此範本的 Next.js 建立電子商務網站](https://payloadcms.com/blog/how-to-build-an-e-commerce-site-with-nextjs)。使用 Payload 的一些流行公司包括[Speechify](https://speechify.com/) 、 [Bizee](https://bizee.com/)等。閱讀以下案例研究。他們將告訴您 Payload 的功能以及它如何奠定堅實的基礎。 ### ✅[快速犁](https://miquikplow.com/) ![快犁](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4k2rlwzf1u3vnfe1yxr.png) Quikplow 是一個創新的隨選服務平台，通常被稱為「掃雪機的 Uber」。 Quikplow 為其應用程式開發和部署功能齊全的後端的速度不僅是無與倫比的，而且幾乎是聞所未聞的。整個應用程式涵蓋身份驗證、基於位置的搜尋、電子商務功能等，開發時間不到 120 天。前所未有的速度歸功於 Payload 的身份驗證、CRUD 操作和管理面板生成功能，為 Quikplow 節省了寶貴的開發時間和預算資源。 ### ✅[紙三角形](https://www.papertriangles.com/) ![紙三角形](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73t78tva710qj5owgos1.png) Paper Triangles 需要在線展示，以反映其著名的沉浸式體驗，但發現自己受到過時且緩慢的內容管理系統的限制。與他們的代理商合作夥伴 Old Friends 合作，面臨的挑戰是建立一個能夠反映他們尖端工作的網站 - 需要自動播放影片、動態動畫、整合式相機庫等，而不犧牲內容更新的速度或便利性。有效負載成為完美的選擇。它的開源特性以及 TypeScript 和 React 的強大基礎使其成為開發高度客製化的互動式前端的理想選擇。對於像 Old Friends 這樣的代理商來說，Payload 是向 Paper Triangles 這樣的客戶兌現承諾的最佳選擇。「Payload 為我們的客戶提供了易於使用的介面，並為我們提供了執行客製化設計所需的開發自由度，」Old Friends 的設計工程師 James Clements 說。 ### ✅[比茲](https://bizee.com/) ![比西](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mai4bkcu4vdi3138gqm.png) 他們需要在短短三個月內遷移和檢修 2,500 個頁面，同時重新建立新的 CMS 平台，並在全面品牌重塑下實施全面的網站重新設計。為了兌現對 Bizee 的承諾，Ritters（代理商）依靠 Payload 乾淨的、TypeScript 驅動的架構，事實證明該架構具有變革性，簡化了設計整合並確保了無錯誤、可維護的程式碼。這加速了內容遷移並保留了 SEO 和用戶體驗。它甚至促進了從設計到開發的過程，幫助 Riotters 將 Figma 概念轉化為實際實施。至關重要的是，Payload 與 Next.js 的天然協同作用促進了開發人員、設計師、UX 專業人員、QA 團隊和行銷人員之間的跨職能協作。有許多公司決定使用 Payload，這是他們做出的最佳決定之一。不管怎樣，去探索你能用它做什麼。 --- 哇！這花了我很長很長的時間來寫。我希望你喜歡它。我得到它！建立良好的長期副專案可能很困難，但即使是一個簡單的用例也可以帶來顯著的成果。誰知道？從長遠來看，您甚至可能會獲得對您有幫助的直接機會。我試圖涵蓋每個專案製作的最好和最有用的應用程式。不管怎樣，請讓我們知道您的想法以及您計劃在未來建立任何可擴展的副專案嗎？祝你有美好的一天！直到下一次。請在 Twitter 上關注我，我將非常感激。 |如果你喜歡這類東西，請關注我以了解更多:) | [![用戶名 Anmol_Codes 的 Twitter 個人資料](https://img.shields.io/badge/Twitter-d5d5d5?style=for-the-badge&logo=x&logoColor=0A0209)](https://twitter.com/Anmol_Codes) [![用戶名 Anmol-Baranwal 的 GitHub 個人資料](https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/Anmol-Baranwal) [![用戶名 Anmol-Baranwal 的 LinkedIn 個人資料](https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 請關注 CopilotKit 以了解更多此類內容。 {% 嵌入 https://dev.to/copilotkit %} --- 原文出處：https://dev.to/copilotkit/30-app-ideas-with-complete-source-code-5f76

0個讚 0留言 32瀏覽

zooey · 03月07日

JavaScript 系列八：作業分享

第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/

0個讚 0留言 127瀏覽

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

學習 Rust：一個乾淨的開始

我決定是時候學習[Rust 了](https://www.rust-lang.org/)，為了保持自己的動力，我將在這裡記錄學習的進展。 ![費里斯螃蟹](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0xl5mafhbjgfuowu62t.png) 有關於我的一些;我是一名 Web 開發人員，雖然已經涉足多年，但已經從事了大約 5 年。我有使用[Perl](https://www.perl.org/)和[PHP](https://www.php.net/)的經驗，但我的日常工作是 JavaScript/TypeScript，無論是透過[NodeJS](https://nodejs.org/en)還是[ReactJS](https://react.dev/) 。我想學習 Rust 沒有什麼特別的原因，只是學習新事物很有趣。我的第一個停靠點是Google `learn rust` ，這引導我找到了[「這本書」](https://doc.rust-lang.org/book/) 。這本書是 Rust 社群為新手（或所謂的 Rustlings）編寫的入門指南，旨在「紮實掌握這門語言」。公共學習 ---- 我選擇公開記錄我的 Rust 學習之旅，因為我相信公開學習的力量。透過分享我的成功、挑戰和見解，我將加強自己的理解，並希望為其他走類似道路的人提供資源。我親眼目睹了這種方法的價值。我邀請讀者提供回饋、更正和貢獻。雖然我認識到公共學習並不適合所有人，但我個人發現它非常有益，並希望激勵其他人考慮它。那麼，讓我們深入學習這些課程。第 1 課“入門” --------- 本課分為 3 個部分： - 安裝 - 你好世界！ - 你好，貨物！ ### 安裝看到列出的安裝，我鬆了口氣，我擔心我必須查找如何安裝 Rust。我使用的是 Windows 計算機，但決定在 Linux 中學習 Rust，因此我將透過 WSL 使用 Ubuntu。安裝指令看起來很簡單，它使用curl來下載一些東西，然後透過sh進行管道傳輸，所以我們可以假設下載的專案是某種bash腳本。 ``` curl --proto '=https' --tlsv1.2 https://sh.rustup.rs -sSf | sh ``` 不管你信不信，這是我犯下的第一個錯誤。我看到`Rust is installed now. Great!`訊息並繼續下一課。如果我繼續閱讀下去，我會發現我需要單獨安裝編譯器。 > Linux 使用者通常應該根據其發行版的文件安裝 GCC 或 Clang。例如，如果您使用 Ubuntu，則可以安裝 build-essential 套件。不過，這很容易解決，我很快就回到了正軌。 ``` sudo apt install build-essential ``` ### 你好世界！下一部分是開發社群的主要內容，即深受喜愛的“Hello, World!”例子。 ![你好世界](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2navm68azq2jbk9mcsf.png) 我在這裡學到了一些東西，函數是用`fn`關鍵字聲明的，任何 Rust 應用程式的入口點都是`main.rs`檔案中的`main`函數，標準命名約定是使用下劃線來分隔函數和檔案名稱中的單字。正是在這個階段，我發現我沒有安裝編譯器，我認為這是像這樣的簡單部分的真正原因，以確保我們都設定正確。 ### 你好，貨物！上一節很簡單，這節也很簡單，但向我們介紹了[Cargo](https://crates.io/) ，它是 Rust 的套件管理器，作為一個 JS 開發者，我的腦海裡直接想到了 NPM。 Cargo 允許我們做一些很酷的事情： - 為我們的包命名。 - 新增包依賴項。 - 用一個命令執行我們的程式。 - 使用除錯模式和發布模式來建立我們的程式。 - 檢查我們的程式是否編譯，但沒有實際建立它。這個範例讓我們重新創造我們的`Hello, World!`例如但以貨運方式。程式碼非常簡單，幾乎不值得展示，但它就是這樣。 ``` fn main() { println!("Hello, world!"); } ``` 第 2 課“猜謎遊戲” ----------- 第二課沒有任何小節，本課的目標是編寫一個猜謎遊戲，用戶輸入一個數字，我們將其與隨機選擇的數字進行比較，遊戲繼續，直到用戶猜出確切的數字。我們仍然沒有做任何突破性的事情，但從列印靜態文字到動態獲取用戶輸入並返回結果的進展仍然很好。 ### VS程式碼正是在這一點上，我決定在`nano`中進行程式碼變更不是一個好主意，我需要在 VSCode 中開啟專案。我加入了一些擴展，希望能讓開發變得更容易。這些是[rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer) 、[板條箱](https://marketplace.visualstudio.com/items?itemName=serayuzgur.crates)和[Even Better TOML](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml) 。你可以使用任何你喜歡的編輯器，我只是習慣了 VSCode。 ![VSCode 標誌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rq9m8kkxv6milsxbv5zw.png) ### 製作遊戲讓我們來看看遊戲教程，它讓我們使用貨物來設定專案，並很快向我們介紹了一些新概念 - `use`關鍵字。 - 可變變數。 - 錯誤處理。 - 文件位置 #### `use`關鍵字 `use`關鍵字允許我們從其他庫中提取程式碼，作為一名 Web 開發人員，我想將其與[import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)進行比較。預設情況下，Rust 將能夠存取「標準」庫中的一組專案，這稱為前奏，但如果您想存取其他任何內容，則必須使用`use` 。在他們給出的範例中，我們確實`use std::io;`它允許我們存取`io`命名空間，這確實感覺有點奇怪，因為我們已經可以存取`std` ，這意味著`std::io`也可以存取。 #### 可變變數在 JavaScript 領域，我們有不可變變數和可變變數的概念，它們是`const`和`let` ，其中`const`是不可變的，而`let`不是。 Rust 有點不同，因為除非另有說明，否則所有變數都是不可變的，變數關鍵字也總是`let` ，或者至少據我所知到目前為止是這樣。 ``` let mut var1 = String::new(); // mutable let mut var2 = String::from("Test String"); // mutable let var3 = 6; // immutable ``` 這本書讓我們知道，第三課將回歸可變性。 #### 錯誤處理我們介紹了兩種類型的錯誤處理`.expect` ，它們不會嘗試任何類型的恢復，但會在應用程式崩潰和`match`時發布一條訊息。 `Match`從函數中取得`Result` ，然後允許您根據`Result`呼叫函數。在範例中，我們給出了`parse`並告訴它要么是`Ok`要么是`Err` ，在`match`中我們可以定義一個在這兩種情況下呼叫的函數。我假設當我們開始處理更多樣化的函數時，match 將能夠處理所有`Result`類型。 #### 文件位置這是迄今為止我最喜歡 Rust 的部分，我知道它不應該那麼令人興奮，但我認為它是。當您執行命令`cargo doc` Cargo 時，Cargo 將掃描您正在使用的所有程式碼，並產生解釋功能以及如何使用它們的說明頁面。目前還沒有太多解釋，但我希望這些文件是從程式碼中的註解產生的，即使這不是那種情況，可以自我記錄的程式碼庫對我來說是如此有趣。 ### 偏離了人跡罕至的地方此時，我已經完成了前兩課，並決定對猜謎遊戲進行一些更改。我將遊戲循環提取到它自己的函數中，並加入了解析失敗的錯誤訊息。我不喜歡的一件事是這條線的`magic` 。 ``` let guess: u32 = match guess.trim().parse() ``` 我不喜歡這種感覺，就像 parse 神奇地知道它的目標類型一樣。所以我閱讀了 VSCode 中的解析工具提示，它教導了有關`turbofish`語法的內容。我不知道人們是否不喜歡這種語法，或者這本書的作者是否認為它對於初學者來說太複雜，但在我看來，它更有意義。我們告訴 parse 我們想要什麼類型，然後我們的`let`從中推論出類型，而不是相反。 ``` let guess = match guess.trim().parse::<u32>() ``` 這是修改後的程式碼。 {% 嵌入 https://replit.com/@andrewb05/Guessing-game %} 註銷 -- 感謝您與我一起踏上這段旅程。我計劃繼續這個系列並涵蓋整本書。如果您想關注，可以按下「關注」按鈕以獲得新帖子的通知。正如我之前所說，請隨意留下任何反饋，如果您也在公開學習，請在評論中留下您的系列的連結，以便我可以查看。非常感謝您的閱讀。如果您想在開發之外與我聯繫，這裡有我的[Twitter](https://twitter.com/Link2Twenty)和[linkedin，](https://www.linkedin.com/in/andrew-bone-ba241b179/)歡迎來打個招呼 😊。 --- 原文出處：https://dev.to/link2twenty/learning-rust-a-clean-start-4eom

0個讚 0留言 72瀏覽

佑 · 03月04日

JavaScript系列八: 作業分享

第一課碼表應用程式 https://replit.com/@a41522001/online-watch?v=1#index.html 第二課筆記應用程式 https://replit.com/@a41522001/online-note?v=1#index.html 第三課分帳應用程式 https://replit.com/@a41522001/Fen-Zhang-Ying-Yong-Cheng-Shi?v=1#index.html 第四課行事曆應用程式 https://replit.com/@a41522001/fullcalendar?v=1#index.html 第五課體重追蹤應用程式 https://replit.com/@a41522001/Weight-Tracking?v=1#src/App.vue 第六課天氣查詢應用程式 https://replit.com/@a41522001/Tian-Qi-Cha-Xun-Ying-Yong-Cheng-Shi?v=1#index.html 第七課國家資訊與地圖應用程式 https://replit.com/@a41522001/Guo-Jia-Zi-Xun-Yu-Di-Tu-Ying-Yong-Cheng-Shi?v=1#index.html

1個讚 1留言 126瀏覽

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

Pair Programming：實務技巧與工具推薦

合作對於開發高質量程式碼至關重要。在本文中，我們將探討結對編程的概念，揭示其優點並推薦有用的工具。我們還將打破一些關於結對編程的常見誤解。原文出處：https://dev.to/documatic/pair-programming-best-practices-and-tools-154j ## 什麼是結對編程？ [結對編程](https://en.wikipedia.org/wiki/Pair_programming) 是一種讓兩個開發人員一起完成同一任務的技術。在這個過程中，一個人編寫程式碼（驅動程序），另一個人檢查每一行並提供反饋（導航器）。這種方法不同於傳統的單獨編程，並具有多種優點。驅動程序的職責是專注於操作計算機和輸入程式碼的機制。導航員的責任是思考需要做什麼以及我們要去哪裡。兩人會不斷地溝通並頻繁地轉換角色，可能每隔幾分鐘。 ![結對編程](https://martinfowler.com/articles/on-pair-programming/driver_navigator.png) ## 結對編程的好處 ### 提高程式碼質量當兩個軟體工程師一起工作時，他們可以快速發現彼此的錯誤，從而產生高質量的程式碼，從而顯著減少遺漏錯誤的機會。編程合作夥伴可以提供寶貴的見解、提出改進建議，並在做出承諾之前獲得有關其想法的反饋。例如，在處理編碼問題時，一個軟體工程師可以專注於實現解決方案，而另一個軟體工程師則監視任何錯誤或語法錯誤。這樣，團隊就可以建立更清晰、更實用、更優化的程式碼。 ### 加強協作和溝通結對編程還增強了兩個開發人員之間的協作。它幫助他們在相同的程式碼庫上工作並分享他們的知識和技能，從而更好地解決問題。它還解決了同事之間的溝通鴻溝，因為它促進了溝通，實現了快速、輕鬆的訊息共享。例如，在開發新功能時，一名軟體工程師可以解釋他們的思維過程和想法，而另一名軟體工程師可以提供反饋並提出問題以澄清需要做什麼。這樣，團隊就可以共同尋找最佳解決方案並避免誤解。 ### 提高生產力結對編程可以提高開發團隊的生產力。當兩個軟體工程師一起工作時，他們可以通過分擔責任更快地完成任務。一個可以解決問題，另一個可以搜尋潛在的錯誤。這樣，團隊就能比單獨工作更高效地解決問題、更有效地工作。這也取決於個人，一些軟體工程師在單獨工作時效率更高。例如，在一個專案上的兩人合作中，一個人可能需要一兩個小時才能完成一項單獨開發人員需要三四個小時才能完成的任務。第二對可以專注於查找程式碼中的錯誤或其他問題。這意味著團隊可以用更少的時間和更少的精力完成任務，從而提高整體生產力。 ## 關於結對編程的誤解在討論結對編程的最佳實踐之前，讓我們先澄清一些關於結對編程的誤解。 ### 誤區#1：結對編程很昂貴這是關於結對編程的一個常見誤區。但實際上，這是對團隊生產力、程式碼質量和創新的投資。從長遠來看，通過及早發現錯誤可以節省時間並降低成本。所以，這不是真的。 ### 誤區#2：結對編程很慢結對編程比其他編碼方法更快，因為它允許快速更正。當兩個開發人員協作時，他們可以避免許多錯誤和錯誤並加快問題解決速度。因此，除非開發人員只是為了好玩而不是高效地工作，否則這是不正確的。 ### 誤區#3：結對編程導致緊張一些人認為結對編程會給開發人員帶來太大壓力，導致工作場所發生衝突。然而，這種情況只發生在該技術實施不佳的情況下。這取決於您與編程夥伴的關係如何。如果它很好，那麼這不適用於你。 ## 結對編程的最佳實踐為了充分利用結對編程課程，請考慮遵循以下最佳實踐： ### 明確定義角色明確界定駕駛員和領航員的角色。駕駛員編寫程式碼，而導航員檢查程式碼並提供反饋。經常切換角色以保持兩位開發人員的參與並避免一個人主導整個會話。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/govzbp92oczw6yx7259t.png) ### 有效溝通結對編程期間，溝通至關重要。雙方開發人員都應該積極參與，表達自己的想法，並認真傾聽。分享想法、提出問題並公開討論程式碼。使用螢幕共享和程式碼審查平台等協作工具來促進溝通。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y46bjmfoivparjdb5lu2.png) ### 尊重和同理心相互尊重和同理心對於成功的結對編程至關重要。重視彼此的意見、想法和專業知識。對建設性批評持開放態度，避免人身攻擊。建立一個鼓勵協作和學習的支持性和非評判性環境。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e34ughpeje20bxfbuekt.png) ### 休息一下結對編程可能對智力要求很高。定期休息對於防止疲勞和保持工作效率非常重要。利用這些休息時間反思進展、討論挑戰併計劃下一步。請記住考慮彼此的精力水平並相應地安排休息時間。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au3xmal7cftl1xtx5tub.png) ### 擁抱學習機會結對編程是學習和技能發展的絕佳機會。與您的合作夥伴分享知識、技術和最佳實踐。對新想法和方法持開放態度。鼓勵參與的開發人員不斷學習和成長。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1myouifacd659tc2ox6.png) ### 練習主動程式碼審查利用結對編程的力量來持續審查和驗證程式碼。討論潛在的改進、及早發現缺陷並解決設計缺陷。利用兩位開發人員的專業知識來確保程式碼具有最高質量。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chmhnulefghzk17ulmy9.png) ### 計劃並設定目標在開始結對編程課程之前，討論並調整手頭任務的目的和目標。將工作分解為更小的、可管理的部分。設定明確的里程碑並確定任務的優先順序，以保持重點和進展。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hse6ayo7sggjfrico6y.png) ### 記錄和分享知識在結對編程會議期間做筆記，以記錄重要的討論、決策和見解。建立可以與團隊共享的文件，有助於傳播知識並確保整個專案的一致性。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfqcuoqdpv2dq9bxigiz.png) ### 反思和改進完成結對編程課程後，花時間反思這次經歷。討論哪些方面進展順利，哪些方面可以改進。根據反饋和經驗教訓不斷完善您的結對編程實踐。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dlrw737qbsij0i3fvb8.png) *通過遵循這些最佳實踐，您可以最大限度地發揮結對編程的優勢。協作和程式碼質量將得到改善，開發人員將有機會增長他們的技能和知識。* ## 結對編程工具為了充分利用結對編程，開發人員可以依靠各種工具來簡化流程。以下是一些可用的最佳工具： ### 實時分享（VS Code） [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) 是 VS Code 的擴展。它包含在最新版本的 VS Code 中。該工具使使用 VS Code 的開發人員能夠實時協作。 ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686383031679/a2336e60-fe72-477b-ada7-978c113961ef.png) ### Replit [Replit](https://replit.com/) 是一個在線工具，可讓您與其他開發人員協作，而無需下載或安裝任何額外的軟體。您所要做的就是打開網絡瀏覽器，然後就可以開始了。如果您只是需要與其他人一起實時編輯程式碼，那麼它是完美的。 Replit 的一大優點是它支持 50 多種編程語言，使其具有多功能性並適合廣泛的專案。 ![](https://replit.com/public/images/IDE2/hero-image.svg) ### CodeSandbox Live [CodeSandbox](https://codesandbox.io/blog/introducing-codesandbox-live-real-time-code-collaboration-in-the-browser) Live 是一項實時協作功能，使開發人員能夠在同一平台上工作實時專案。借助 CodeSandbox Live，多個開發人員可以同時處理同一個程式碼庫，從而更輕鬆地協作處理複雜的專案。 ![](https://codesandbox.io/_next/image?url=%2Fnew%2Fblog%2Fintroducing-codesandbox-live-real-time-code-collaboration-in-the-browser%2F0.gif&w=1920&q=75) ### Codeanywhere [Codeanywhere](https://codeanywhere.com/) 是一個基於雲的集成開發環境 (IDE)，允許開發人員使用任何具有網路連接的設備從任何地方編碼、協作和管理他們的專案。它提供了一套全面的工具和功能來促進編碼和簡化開發工作流程。 ![](https://i.imgur.com/jIr0IqV.png) ### [CodeTogether](https://www.codetogether.com/) CodeTogether **允許您通過 Eclipse、IntelliJ 或 VS Code 主持和加入協作編碼會話**。來賓可以從安裝了 CodeTogether 的自己的 IDE 加入會話，即使它與主機的 IDE 不同。訪客還可以通過任何現代瀏覽器加入會話，無需進行任何設置。 ![](https://i.imgur.com/8KDJzAv.png) ## 結論最後，結對編程對於軟體開發人員來說是一種非常有效的技術。它增強了協作、程式碼質量、團隊生產力和許多其他方面。遵循最佳實踐並使用適當的工具是成功結對編程的關鍵。

0個讚 0留言 1,407瀏覽

hung · 04月19日

JavaScript（八）—— 不想教你 Vue，只想讓你寫有趣專案 - 統整

[第1課 ── 碼表應用程式](https://codelove.tw/@howtomakeaturn/post/k31583) [my code](https://replit.com/@hungYE/online-stopwatch) --- [第2課 ── 筆記應用程式](https://codelove.tw/@howtomakeaturn/post/waYLQ3) [my code](https://replit.com/@hungYE/online-notes) --- [第3課 ── 分帳應用程式](https://codelove.tw/@howtomakeaturn/post/13k0Va) [my code](https://replit.com/@hungYE/online-bill-split) --- [第4課 ── 行事曆應用程式](https://codelove.tw/@howtomakeaturn/post/9aWkka) [my code](https://replit.com/@hungYE/online-calendar) --- [第5課 ── 體重追蹤應用程式](https://codelove.tw/@howtomakeaturn/post/L3QRYa) [my code](https://replit.com/@hungYE/online-weight-tracking) --- [第6課 ── 天氣查詢應用程式](https://codelove.tw/@howtomakeaturn/post/1ayR0q) [my code](https://replit.com/@hungYE/weather) --- [第7課 ── 國家資訊與地圖應用程式](https://codelove.tw/@howtomakeaturn/post/Ex2GE3) [my code](https://replit.com/@hungYE/map)

1個讚 0留言 368瀏覽

superyngo · 04月13日

自學網頁の嬰兒教材：JavaScript（八）作業分享

第1課 ── 碼表應用程式 https://replit.com/@superyngo1/vue3timer 第一次獨立開發，css苦手，看前輩做的這麼漂亮就練習了一個文字背景漸變第2課 ── 筆記應用程式 https://replit.com/@superyngo1/vue3notebook 看到學長的範例就練習建置vue的sfc和typescript 花了一些心思設定筆記的選取順序和刪除變換 css苦手第3課 ── 分帳應用程式 https://replit.com/@superyngo1/vue3billsplitter?v=1 被typescrtpt的型別檢查搞得很苦看了一些youtube教學css比較會排版面了規格要求外新增了待付的選項第4課 ── 行事曆應用程式 https://replit.com/@superyngo1/vue3calendar 漸漸掌握vue的資料框架看前輩用很多vue標籤覺得厲害仍對typescrtpt頭痛第5課 ── 體重追蹤應用程式 https://replit.com/@superyngo1/Weight-Tracker-Chart 放棄建置(以及typescript)回到用cdn導入vue 寫的愉快感謝學長拆雷第6課 ── 天氣查詢應用程式 https://replit.com/@superyngo1/vue3weathercheck 第一次導入api 還算輕鬆看到學長寫法用v-show去控制顯示資料原來還可以這樣第7課 ── 國家資訊與地圖應用程式 https://replit.com/@superyngo1/vue3-World-Map-with-Country-info 原本以為只要資料串好格式設定好應該很簡單結果卡在一堆低級錯誤(for loop格式寫錯等) 還糾結為何flag顯示不出來圖案(看學長的可以) 最後才發現原來是瀏覽器的問題心累

1個讚 1留言 642瀏覽

birdie · 03月11日

自學網頁の嬰兒教材：JavaScript（八）作業分享

* [第1課 ── 碼表應用程式](https://replit.com/@birdiewu/Ma-Biao-Ying-Yong-Cheng-Shi-online-stopwatch?v=1) * [第2課 ── 筆記應用程式](https://replit.com/@birdiewu/Bi-Ji-Ying-Yong-Cheng-Shi-online-notepad?v=1) * [第3課 ── 分帳應用程式](https://replit.com/@birdiewu/Fen-Zhang-Ying-Yong-Cheng-Shi-online-split-the-bill?v=1) * [第4課 ── 行事曆應用程式](https://replit.com/@birdiewu/Xing-Shi-Li-Ying-Yong-Cheng-Shi-online-calendar?v=1) * [第5課 ── 體重追蹤應用程式](https://replit.com/@birdiewu/Ti-Zhong-Zhui-Zong-Ying-Yong-Cheng-Shi-online-weight-tracker?v=1) 備註：如果第五課卡關，說不定你遇到跟我一樣的問題，可以參考[這裡的討論串](https://codelove.tw/@birdie2019/post/Ja69K3) * [第6課 ── 天氣查詢應用程式](https://replit.com/@birdiewu/Tian-Qi-Cha-Xun-Ying-Yong-Cheng-Shi-weather-in-taiwan?v=1) * [第7課 ── 國家資訊與地圖應用程式](https://replit.com/@birdiewu/Guo-Jia-Zi-Xun-Yu-Di-Tu-Ying-Yong-Cheng-Shi-world-map?v=1) 心得分享： JavaScript第八系列的作業跟前七個系列相比真的有挑戰性和困難度，此系列讓我進入到學習的陣痛期，不習慣、沒自信地摸索著，在網路上東看看西看看方法，文件重複看了好多次，code也拼拼湊湊完成每個作業的規格，遇到卡關的問題學著自己解決(除了第五課的問題外，那邊卡關兩天，最後終於揮白旗XD)，想想有什麼辦法可以做或可以找哪方面的資料，我認為自己不是很聰明和邏輯好的人，剛開始覺得作業規格條件好困難，一直出現卡關的問題，現在回頭看其實我都挑戰完成了欸！雖然回去翻作業看還是有小瑕疵和待優化的地方，但還是恭喜自己終於完成了! _(:з」∠)_

1個讚 1留言 691瀏覽

birdie · 03月04日

[作業問題] JavaScript系列八：第5課

https://replit.com/@birdiewu/Ti-Zhong-Zhui-Zong-Ying-Yong-Cheng-Shi-online-weight-tracker?v=1 ![](https://i.imgur.com/UyLeEpD.jpg) JS部分加上第46~49和55~58行無法更新圖表(官網提供的功能) 新增和刪除資料時，圖表無法跟著一起改變，只能重新整理網頁才會改變不知道哪邊出了問題＠＠

1個讚 6留言 794瀏覽

evon0306 · 03月03日

[ 作業問題 ]JavaScript 系列五：第1課 ---學會 Cookie 相關功能

https://replit.com/@evon5995/GigaDeadPort#index.html 點擊離開，把用戶跳轉到 google 首頁點擊確認，就關閉蓋板警告以上兩功能都完成了但是“按過確認，重新整理之後，蓋板警告就不會再跳出來”此功能怎麼都無法完成 ![](https://i.imgur.com/KC3I1lQ.png) js的錯誤不知道如何解決

1個讚 3留言 432瀏覽

站長阿川 · 02月16日

JavaScript 系列八：第7課 ── 國家資訊與地圖應用程式

## 課程目標 - 能夠寫出國家資訊與地圖應用程式 ## 課程內容開發應用程式時，經常需要把多種 API 組合起來使用！如果各種 API 有提供 Vue 包裝的元件版本，通常會容易許多如果沒有，那就自己想辦法管理好狀態，在 Vue 裡面使用，通常也沒問題 --- 這一課來寫各國資訊查詢使用這服務來取得各國資料 https://restcountries.com/ 內含每個國家「中心點」的經緯度 --- 接著要用地圖套件 Leaflet https://leafletjs.com/ 底層圖資，使用 OpenStreetMap https://www.openstreetmap.org/ ## 課後作業請使用 https://replit.com/ 來寫作業這次作業的規格如下： - 顯示世界地圖，上面有上百個代表國家的大頭針（marker），放在國家「中心點」的經緯度 - 點擊大頭針，會跳出一個視窗，視窗內含以下資訊： - 國旗圖案 - 國家名稱 - 首都名稱 - 貨幣符號做出以上功能，你就完成這次的課程目標了！

0個讚 16留言 1,135瀏覽

站長阿川 · 02月16日

JavaScript 系列八：第6課 ── 天氣查詢應用程式

## 課程目標 - 能夠寫出天氣查詢應用程式 ## 課程內容開發應用程式時，經常需要上網找一些資料 API 比如搜尋 `台灣氣象資料 api` 會找到中央氣象局開發的 API 服務 https://opendata.cwb.gov.tw/index 想使用這些 API，通常就把官網說明文件看一看，試一試即可如果不順利，就上網找找看有沒有人寫過 API 串接教學，照做即可為了避免 API 服務被濫用、過度呼叫，通常 API 需要註冊之後，取得金鑰（key）才能呼叫如何使用金鑰驗證？通常是在發出 api call 的時候，在 http request header 裡面附上 API key 也有可能就直接在呼叫的 url 附上，或者在 http post 內用 form data 附上各種 API 驗證方式不同，取決於 API 提供者的主觀偏好多找找範例、說明文件，多多嘗試即可 --- 這一課來寫天氣查詢應用程式關鍵字 `weather app ui` ## 課後作業請使用 https://replit.com/ 來寫作業這次作業的規格如下： - 頁面上有一個「縣市」選單，可選擇要查詢的縣市 - 選擇縣市之後，在畫面上顯示此縣市當下的這些資訊： - 天氣現象 - 最高溫度 - 最低溫度 - 降雨機率做出以上功能，你就完成這次的課程目標了！

0個讚 12留言 981瀏覽

站長阿川 · 02月16日

JavaScript 系列八：第5課 ── 體重追蹤應用程式

## 課程目標 - 能夠寫出體重追蹤應用程式 ## 課程內容找套件時，如果官方沒有提供特定框架的版本，通常會有開發者，自行包裝一個，分享給大家使用搜尋 `how to use 套件名稱 in 框架名稱` 大概就找得到相關資源了舉例來說，這款圖表套件，官方沒有提供框架版本 https://www.chartjs.org/ 但是社群就有人做好了 https://vue-chartjs.org/ --- 介紹一個網站 https://dribbble.com/ 業界設計師，經常在上面搜尋別人的成品、找靈感、分享靈感除了在 google 搜尋關鍵字，也可以常常到 Dribbble 搜尋 --- 這一課來寫體重追蹤應用程式關鍵字 `weight tracking` ## 課後作業請使用 https://replit.com/ 來寫作業這次作業的規格如下： - 這種程式應該要讓人註冊登入使用，需要後端配合，但我們簡化吧：免登入、把資料存在 local storage 就好 - 此程式能夠新增一筆體重資料，input 欄位有「體重」、「日期」 - 有清單列表顯示每一筆輸入的資料，按照日期排序。每筆資料旁邊有刪除按鈕 - 使用 Chart.js 將體重的走勢，用折線圖（Line Chart）呈現 - 請「不要」使用社群包裝的版本（vue-chartjs），學著自己在框架內導入套件 --- 提示：vue 跟 chart.js 整合的時候，有一個地雷！會導致 `RangeError: Maximum call stack size exceeded ` 要解決這個地雷，請參閱這邊的討論 https://codelove.tw/@birdie2019/post/Ja69K3 --- 做出以上功能，你就完成這次的課程目標了！

0個讚 12留言 1,012瀏覽

站長阿川 · 02月16日

JavaScript 系列八：第4課 ── 行事曆應用程式

## 課程目標 - 能夠寫出行事曆應用程式 ## 課程內容現在新推出的大部份 javascript 套件，都會提供 native（原生）、React、Vue 三種版本，方便使用舉例來說，這款行事曆套件，就有多種版本 https://fullcalendar.io/ 也有易安裝的 CDN 版本 https://fullcalendar.io/docs/initialize-globals --- 所謂的 React、Vue 或是任何框架版本，其實就只是把套件，根據框架規格，封裝成元件而已（元件的觀念，之後會教，先別擔心）套件會大量跟 DOM 互動，框架也會跟 DOM 互動，兩者容易衝突，使用上通常會 bug 一大堆所以官方會推出套件版本，改掉一些底層寫法，方便框架用戶使用如果沒有，那就由開發者自己小心管理，通常也沒太大問題就是把初始化相關放在 `mounted` 裡面，然後狀態更新時，找方法與套件狀態同步，就這樣而已 --- 這一課來寫行事曆應用程式關鍵字 `calendar app ui` ## 課後作業請使用 https://replit.com/ 來寫作業這次作業的規格如下： - 這種程式應該要讓人註冊登入使用，需要後端配合，但我們簡化吧：免登入、把資料存在 local storage 就好 - 有一個「新增活動」按鈕，點擊可以輸入「活動名稱」、選擇「活動日期」與「活動時間」 - 不用做成「開始、結束」兩個時間點，就做成開始時間就好 - 日期時間的 UI，請使用 https://github.com/xdan/datetimepicker - 上述功能，可以做成 modal 視窗（輸入欄位放在視窗內），也可以直接把輸入欄位都放在畫面上 - 使用 FullCalendar 呈現行事曆，將活動顯示在對應日期 - 點擊行事曆內的活動，可以刪除活動。請使用 javascript 內建的 `confirm` 函式，確認「是否刪除此筆活動？」後刪除 - 請「不要」用官方 Vue 版本，請用 CDN 版本，學著自己在框架內導入套件做出以上功能，你就完成這次的課程目標了！

0個讚 14留言 1,120瀏覽

站長阿川 · 02月16日

JavaScript 系列八：第3課 ── 分帳應用程式

## 課程目標 - 能夠寫出分帳應用程式 ## 課程內容實務上，在開發應用程式，難免需要用到一些數學計算通常也不用到太進階，大概國中數學的內容就很好用了我個人經驗是，其實國中數學、高中數學的內容，超級強大、好用只是大家普遍是填鴨式教育出身，失去創意、不知如何運用了 --- 這一課來寫分帳應用程式關鍵字 `bill split online` `分帳 app` `splitwise 網頁版` ## 課後作業請使用 https://replit.com/ 來寫作業這次作業的規格如下： - 這個程式的用途，是跟一群朋友出遊時，方便均分所有支出 - 可以隨時打開使用，所以資料要隨時存到 local storage - 可以清楚看到，誰目前還欠多少錢、誰目前先出了多少錢 - 旅遊結束時，可以根據上述資料，快速地互相結清帳款 UI 規格如下： - 頁面上有一個「分帳成員」清單，裡面列出目前參與分帳的成員 - 有一個「新增成員」按鈕，點擊可以輸入「成員姓名」後新增 - 有一個「新增支出款項」按鈕，點擊可以輸入「款項名稱」、「款項金額」，並且可以選擇「由誰付款」 - 上述兩個功能，可以做成 modal 視窗（輸入欄位放在視窗內），也可以直接把輸入欄位都放在畫面上 - 頁面上條列出所有帳款，顯示付款人、金額、款項名稱，旁邊有刪除按鈕 - 在「分帳成員」清單內，每個成員旁邊顯示「應付金額」或者「應收金額」，分別顯示為紅色、綠色（目前總支出，除以成員人數之後，與成員目前代墊支出的差額） - 頁面上有一個「旅程結束」按鈕，點擊後刪除所有成員、所有款項做出以上功能，你就完成這次的課程目標了！

0個讚 19留言 1,042瀏覽

站長阿川 · 02月16日

JavaScript 系列八：第2課 ── 筆記應用程式

## 課程目標 - 能夠寫出筆記應用程式 ## 課程內容應用程式簡單沒關係，只要精準解決用戶通點甚至可以收一點點月租費，替開發者「賺到一點零用錢」這一課來寫筆記應用程式關鍵字 `write notes online` `online note tool` 研究看看目前市面上，大家都做得怎樣最簡潔的是這兩款 - https://justnotepad.com/ - http://simplenotes.online/ ## 課後作業請使用 https://replit.com/ 來寫作業這次作業的規格如下： - 有一大塊輸入文字的地方，用戶可以當成臨時打筆記的地方 - 以 `textarea` 實作即可，純文字即可，不需要複雜的文章格式編輯器 - 筆記內容要隨時記錄到 local storage，用戶隨時關閉、開啟網頁，都不會失去資料 - 側邊或底部，有一排「筆記清單」，用戶可以在多則筆記之間切換 - 畫面上有一個「建立新筆記」按鈕 - 「筆記清單」的每個筆記旁邊，都有「刪除」按鈕做出以上功能，你就完成這次的課程目標了！

0個讚 19留言 1,228瀏覽

站長阿川 · 02月16日

JavaScript 系列八：第1課 ── 碼表應用程式

## 課程目標 - 能夠寫出碼表應用程式 ## 課程內容千萬不要小看簡易、陽春的小應用程式只要做到夠簡單好用、能解決使用者的問題就算只是放一些網路廣告，也能夠替開發者「賺到一點零用錢」這一課來寫碼表應用程式關鍵字 `online stopwatch` `線上碼表` ## 課後作業請使用 https://replit.com/ 來寫作業這次作業的規格如下： - 有一個「開始」按鈕，一個「重設」按鈕 - 按下開始之後，「開始」按鈕會變成「暫停」按鈕 - 按下暫停之後，「暫停」按鈕會變成「繼續」按鈕 - 按下重設按鈕，整個碼表會歸零 - 畫面上有清楚的計時數字，起始格式為 `00:00.00` 做出以上功能，你就完成這次的課程目標了！

0個讚 25留言 1,213瀏覽

birdie · 01月24日

自學網頁の嬰兒教材：JavaScript（五）作業分享

第1課 ── 學會 Cookie 相關功能 https://replit.com/@birdiewu/DarkvioletClutteredDigits?v=1 第2課 ── 學會 Local Storage 相關功能 https://jsfiddle.net/birdie2019/wkqbvhma/378/ 第3課 ── 變數作用域、箭頭函式、ES6 語法 https://jsfiddle.net/birdie2019/0akLh4r8/7/ 第4課 ── 學會 AJAX 基本原理 https://jsfiddle.net/birdie2019/5sfhbq8v/8/ 第5課 ── 學會 AJAX 錯誤處理 https://jsfiddle.net/birdie2019/5sfhbq8v/12/ 第6課 ── 學會 AJAX 與各種 HTTP 請求方法 https://jsfiddle.net/birdie2019/5sfhbq8v/15/ 第7課 ── 學會 AJAX 與 data attribute 的結合 https://jsfiddle.net/birdie2019/5sfhbq8v/23/ 心得分享：做完本單元五的課程作業，覺得自己技術再提升一點(?! ) 模擬購物網站有點成就感(自己講XD) 但同時覺得要做出大規模的購物網站真的不容易！因為資料好龐大( 像amazon或MOMO等等)，自己還有好多要學~

3個讚 1留言 340瀏覽

站長阿川 · 01月20日

JavaScript 系列五：第1課 ── 學會 Cookie 相關功能

## 課程目標認識並且能使用 Cookie 相關功能 ## 課程內容大名鼎鼎的 cookie，很多人在科技新聞上都聽過某某公司利用網頁 cookie 追蹤個資、某某公司偷偷用 cookie 分享個資這類新聞提到的 cookie，就是本課在說的 cookie 目前為止的作業，你會發現只要重新整理網頁，畫面上的所有東西就都歸零回預設值了因為我們說網頁 HTTP 協議是「無狀態」的，也就是每次打開網頁的「狀態」不會被保留這樣的設計當然有好處以及方便的地方，因為每次打開網頁都是獨立事件、彼此不會互相影響，開發起來單純很多但是在實務上，經常需要「有狀態」才能完成某些功能，例如「已登入帳號」的狀態，否則網站會變很難用 Cookie 技術就是為了這個原因而誕生 --- Cookie 主要有兩個特性 - cookie 的內容，主機端也能存取 - cookie 的內容，網頁重新整理之後還會保留 Cookie 會出現在 HTTP Request 內，一起送到主機會員登入功能、各種廣告追蹤功能，就是這樣做到的 HTTP 協議不熟沒關係，反正就是前端工程師設定過 cookie 值之後，後端工程師也能在主機端拿到那些值就對了 --- 注意，由於 cookie 會包含一些網站上的敏感資訊，jsfiddle 等等線上程式碼實驗工具、以及各種免費架站工具，幾乎通通都關閉了 cookie 功能我目前找到一個可以用 cookie 的架站工具 https://replit.com/ 本課請使用 replit 來跑範例程式碼、寫作業註冊登入之後，點 Create -> Templates -> 選 HTML, CSS, JS 那個 -> Create Repl 就可以開始寫了，但是右邊的預覽視窗，因為是 iframe，一樣不能用 cookie 請點擊右上方的 Open in a new tab，就可以正常跑 cookie 功能了 --- 來看一些範例程式碼吧 ``` Your Age: <input type="text"> Your Name: <input type="text"> <button onclick="save()">Save</button> <script> if (document.cookie) { alert(document.cookie); var arr = document.cookie.split(';'); var myage = arr[0].split('=')[1]; var myname = arr[1].split('=')[1]; document.querySelectorAll('input')[0].value = myage; document.querySelectorAll('input')[1].value = myname; } function save() { var myage = document.querySelectorAll('input')[0].value; var myname = document.querySelectorAll('input')[1].value; document.cookie = 'myage=' + myage; document.cookie = 'myname=' + myname; alert('saved!'); } </script> ``` 這個範例中，輸入年齡、名字一次，接著重新整理網頁，會發現資料一樣存在欄位裡面，不用重新輸入！存取值，都是透過 `document.cookie` 這個物件屬性，值的格式是 `name=value` 雖然 `document.cookie=` 寫了兩次，但第二次並不會蓋掉第一次的值，而是兩個都存進 cookie 了（這個設計，很糟糕，沒錯，讓人看得很混亂。應該是瀏覽器的設計者，有他們的苦衷，我們先不細究原因，先知道怎麼用就好）然後，讀取的時候，多個值會用分號 `;` 隔開，所以讀取時我用了 `.split()` 這個字串函式除此之外，cookie 還可以設定「使用期限」以及「限定網域」，但我這邊就先不示範總之，cookie 的效果大概就是這樣，稍微理解就好。然後這些值，後端工程師在伺服器端，也會收到，就這樣！ --- 如上所示，cookie 寫起來，有點麻煩實務上，每次都這樣手寫，太囉唆，通常會直接找套件來用，我是用這款 https://github.com/js-cookie/js-cookie 用來操作 cookie 的 API，漂亮多了！ --- 關於 cookie 的 debug 除錯，也要知道一下打開瀏覽器開發者工具 -> Application -> Cookies 可以看到網站上有哪些 cookie，也可以直接在這邊修改、刪除 cookie --- cookie 還有一些特性，以及大小限制、使用限制這邊不細談，稍微知道怎麼用 cookie 就好有興趣的話，請上網搜尋一下，多研究一些 cookie 的細節 ## 課後作業請使用 https://replit.com/ 來寫作業假設你正在幫客戶寫一個「成人限制級網站」頁面第一次打開會顯示蓋板警告，下方有兩個按鈕 ``` 警告︰您即將進入之網頁內容需滿十八歲方可瀏覽。根據「兒童及少年福利與權益保障法」規定，本網站已於非闔家皆宜之網頁加以標示。若您尚未年滿十八歲，請點選離開。若您已滿十八歲，亦不可將本站之內容派發、傳閱、出售、出租、交給或借予年齡未滿18歲的人士瀏覽，或將本網站內容向該人士出示、播放或放映。您年滿十八歲嗎？ [離開] [是，我已年滿十八歲] ``` - 點擊離開，把用戶跳轉到 google 首頁 - 點擊確認，就關閉蓋板警告，在網頁上顯示一張美女 or 帥哥圖片：參考圖庫 https://unsplash.com/ - 只要按過確認，重新整理之後，蓋板警告就不會再跳出來做出以上功能，你就完成這次的課程目標了！

0個讚 23留言 1,308瀏覽

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

給軟體工程師的各類好用工具清單

向您介紹這個開發人員工具列表。它是一個開源專案，由社群整理。讓我們開始吧！ 🚀 原文出處：https://dev.to/dostonnabotov/ultimate-tools-for-developers-2aj2 --- ## 程式碼編輯器和 IDE 💻 - [Visual Studio Code](https://code.visualstudio.com/) 作為免費的開源程式碼編輯器，Visual Studio Code 是開發人員的絕佳工具。它帶有許多功能和外掛，使其成為開發人員的絕佳選擇。 - [CodeSandbox](https://codesandbox.io/) 簡單來說，CodeSandbox 就是 Visual Studio Code 的在線版本。 - [Dev - Visual Studio Code](https://github.dev/) github.dev 基於網絡的編輯器是一種輕量級的編輯體驗，完全在您的瀏覽器中執行。有兩種方法可以打開基於 Web 的編輯器 1. 在任何存儲庫或拉取請求上按 `.` 鍵 2. 將 URL 中的 .com 替換為 .dev。例如。 `https://github.dev/username/repo` - [CodePen](http://codepen.io/) CodePen 是網絡前端的遊樂場。這是一個試驗、測試和展示您的前端工作的地方。此外，您還可以從其他開發人員那裡找到許多靈感。 - [Replit](https://repl.it/) Replit 是一個簡單、強大且協作的在線 IDE。這是編碼、協作和託管專案的好地方。 - [StackBlitz](https://stackblitz.com/) 面向前端和全棧開發人員的 Web IDE。 - [TypeScript Playground](https://www.typescriptlang.org/play/) 想玩玩看 TypeScript 嗎？ TypeScript Playground 是一個適合你的地方。 ## 圖片 🖼 - [Unsplash](https://unsplash.com/) 為您的下一個專案輕鬆找到精美、高質量的照片。所有照片均可免費用於商業和個人用途。 - [Pexels](https://www.pexels.com/) Pexels 是免費庫存照片的重要來源。所有照片均可免費用於商業和個人用途。 - [Carbon](https://carbon.now.sh/) Carbon 是一個很棒的平台，可以建立和共享程式碼的精美圖像，允許您使用語法突出顯示、主題、字體等自定義圖像。 ## 顏色 🎨 - [Color Space](https://mycolor.space/) 再也不會浪費時間尋找完美的調色板！只需輸入顏色！並生成漂亮的調色板 - [Coolors](https://coolors.co/) 建立完美的調色板或從數千種美麗的配色方案中汲取靈感。 - [Color Wheel](https://www.canva.com/colors/color-wheel/) 想知道什麼顏色搭配起來好看嗎？ Canva 的色輪讓色彩組合變得簡單。 ## 排版 📝 - [Google Fonts](https://fonts.google.com/) Google Fonts 是一個包含免費授權字體系列的庫。只需選擇您想要的字體，將它們下載到您的計算機或使用提供的 CSS 或 HTML 鏈接將它們嵌入您的網頁。 - [Fontsource](https://fontsource.org/) 如果您不想從 CDN 獲取字體，則可以使用整齊打包的 NPM 包中的自託管開源字體。 - [Nerd Fonts](https://www.nerdfonts.com/) Nerd Fonts 使用大量字形（圖標）修補針對開發人員的字體。 ## 設計 🎨 - [Figma](https://www.figma.com/) 一個免費的線上協作界面設計工具和原型製作工具。 - [Pinterest](https://www.pinterest.com/) Pinterest 是一種視覺發現工具，可用於為您的所有專案和興趣尋找創意。 ## 文檔 📚 - [MDN 網絡文檔](https://developer.mozilla.org/en-US/) 學習Web開發的最佳平台。每當您對 HTML、CSS、JavaScript 或任何其他網絡技術有疑問時，請務必先查看 MDN。 - [W3Schools](https://www.w3schools.com/) 幾乎所有您能想到的程式語言的參考。 - [CSS 技巧](https://css-tricks.com/) 提供使用 CSS（層疊樣式表）的提示、技巧和技術的最佳平台之一。 ## 工具 🛠 等一會兒！工具中的工具？是的，你沒有聽錯。這裡有一些工具可以幫助您找到更多工具。 😃 - [Stack Overflow](https://stackoverflow.com/) Stack Overflow 是一個面向專業和狂熱工程師的問答網站。這是提出問題和獲得答案的好地方。 - [Micro Digital Tools](https://mdigi.tools/) 一組對開發人員有用的工具。 - [Small Dev Tools](https://smalldev.tools/) 一組對開發人員有用的工具。 - [Can I Use](https://caniuse.com/) Can I Use 提供了最新的瀏覽器支持表，以支持桌面和移動 Web 瀏覽器上的前端 Web 技術。 - [網站圖標生成器](https://favicon.io/) 您是否曾經為了替自己的網站建立網站圖標而苦惱？不同的尺寸，不同的格式，不同的平台。從文本、圖像或從數百個表情符號中選擇快速生成您的網站圖標。 - [Font Awesome](https://fontawesome.com/) 免費和高級圖標庫。 - [OverAPI.com](https://overapi.com/) 以有組織的格式查找大量不同技術的備忘單。 - [Transform](https://transform.tools/) 多語言網絡轉換器。輕鬆將 HTML 轉換為 Pug、將 TypeScript 轉換為 JavaScript、將 Markdown 轉換為 HTML 等等... - [Frontend Tools](https://murtazajoo.github.io/tools/) 一個網站，您可以在其中找到具有更好用戶體驗的所有工具。 - [GitProtect](https://gitprotect.io/) 適用於所有 GitHub、GitLab、Bitbucket 和 Jira 資料的 DevOps 備份和災難恢復軟體。 - [Linear](https://linear.app/) 在團隊中組織問題和拉取請求的好工具。 ## 結論 🎉 希望您覺得這個列表有用。

0個讚 0留言 1,436瀏覽

歡迎發文

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

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

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

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

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

熱門文章

🔥 SOLID－簡單的理解方式

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

🔥 你不是軟體工程師，你只是個「框架使用者」

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

🔥 詢問JS children使用方式

近期留言

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

CodeLove 愛寫扣論壇 © 2024

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