有了正確的函式庫，任何開發人員都可以在他們的應用程式中建立強大的人工智慧功能（如 Ninja 🥷）。 在此列表中，我編譯了 7 個很棒的 AI 庫，您現在可以使用它們（相對）輕鬆地發布功能。 不要忘記為這些圖書館加註星標以表達您的支持。  https://github.com/CopilotKit/CopilotKit --- 1. [CopilotPortal](https://github.com/CopilotKit/CopilotKit) ：建構應用程式原生人工智慧聊天機器人 -------------------------------------------------------------------------------  應用程式內人工智慧聊天機器人助理可以「查看」您目前的應用程式狀態並在前端和後端採取操作。 一組完全可自訂的反應元件和掛鉤以及用於建立 LLM 和您的應用程式之間互動的架構。 定義*useMakeCopilotReadable* 、 *useMakeCopilotActionable*和*CopilotSidebarUIProvider*使其運作。 ``` import "@copilotkit/react-ui/styles.css"; import { CopilotProvider } from "@copilotkit/react-core"; import { CopilotSidebarUIProvider } from "@copilotkit/react-ui"; export default function App(): JSX.Element { return ( <CopilotProvider chatApiEndpoint="/api/copilotkit/chat"> <CopilotSidebarUIProvider> <YourContent /> </CopilotSidebarUIProvider> </CopilotProvider> ); } ``` https://github.com/CopilotKit/CopilotKit --- 2. [RAGxplorer](https://github.com/gabrielchua/RAGxplorer) - 視覺化並探索您的 RAG 文件 ----------------------------------------------------------------------------  RAGxplorer 是一個 Python 工具，用於視覺化機器學習和自然語言處理中的 RAG（檢索增強生成）文件。 以互動方式探索 RAG 流程中使用的文件中的聯繫和內容。 若要設定 RAGxplorer，請在程式碼中定義 RAG 檢查點路徑並安裝指定的依賴項。 ``` import streamlit as st from utils.rag import build_vector_database st.set_page_config(page_title="RAGxplorer", page_icon="🔍") uploaded_file = st.file_uploader("Upload your PDF", type='pdf') query = st.text_input("Enter your query") search = st.button("Search") top_k = st.number_input("Number of Chunks", value=5, min_value=1) st.session_state["chroma"] = build_vector_database(uploaded_file, ...) st.session_state['retrieved_id'] = query_chroma(...) plot_embeddings(...) ``` https://github.com/gabrielchua/RAGxplorer --- 3. [Tavily GPT 研究員](https://github.com/assafelovic/gpt-researcher)- 獲得法學碩士以搜尋網路和資料庫 -----------------------------------------------------------------------------------  Tavilly 可讓您將 GPT 支援的研究和內容產生工具新增至您的 React 應用程式中，從而增強其資料處理和內容建立功能。 ``` # Create an assistant assistant = client.beta.assistants.create( instructions=assistant_prompt_instruction, model="gpt-4-1106-preview", tools=[{ "type": "function", "function": { "name": "tavily_search", "description": "Get information on recent events from the web.", "parameters": { "type": "object", "properties": { "query": {"type": "string", "description": "The search query to use. For example: 'Latest news on Nvidia stock performance'"}, }, "required": ["query"] } } }] ) ``` https://github.com/assafelovic/gpt-researcher --- 4. [Pezzo.ai](https://github.com/pezzolabs/pezzo) - 開發者優先的 LLMOps 平台 --------------------------------------------------------------------  用於管理 OpenAI 通話的集中平台。 優化您的提示和令牌使用。追蹤您的人工智慧使用情況。 免費且易於整合。 ``` const prompt = await pezzo.getPrompt("AnalyzeSentiment"); const response = await openai.chat.completions.create(prompt); ``` https://github.com/pezzolabs/pezzo --- 5. [DeepEval](https://github.com/confident-ai/deepeval) - 評估 LLM、RAG 和微調性能 --------------------------------------------------------------------------  DeepEval 是一個開源框架，透過將評估視為單元測試來簡化法學碩士的評估。 它提供了評估 LLM 輸出的各種指標，其模組化設計允許開發人員定制他們的評估流程 要使用它，您需要安裝該程式庫、編寫測試案例並執行這些用例來評估您的 LLM 的效能。 ``` Pytest Integration: from deepeval import assert_test from deepeval.metrics import HallucinationMetric from deepeval.test_case import LLMTestCase test_case = LLMTestCase( input="How many evaluation metrics does DeepEval offers?", actual_output="14+ evaluation metrics", context=["DeepEval offers 14+ evaluation metrics"] ) metric = HallucinationMetric(minimum_score=0.7) def test_hallucination(): assert_test(test_case, [metric]) ``` https://github.com/confident-ai/deepeval --- 6. [CopilotTextarea](https://github.com/RecursivelyAI/CopilotKit) - React 應用程式中的 AI 驅動寫作 ----------------------------------------------------------------------------------------  具有 Github CopilotX 功能的任何 React `<textarea>`的直接替代品。 自動完成、插入、編輯。 可以即時或由開發人員提前提供任何上下文。 ``` import { CopilotTextarea } from "@copilotkit/react-textarea"; import { CopilotProvider } from "@copilotkit/react-core"; // Provide context... useMakeCopilotReadable(...) // in your component... <CopilotProvider> <CopilotTextarea/> </CopilotProvider>` ``` https://github.com/RecursivelyAI/CopilotKit --- 7. [SwirlSearch](https://github.com/swirlai/swirl-search) - 人工智慧驅動的搜尋。 ----------------------------------------------------------------------  Swirl Search 是一個開源平台，它使用人工智慧同時搜尋多個資料來源並提供有關這些資料的起草報告。 它可以跨各種來源進行搜尋，包括搜尋引擎、資料庫和雲端服務，並且可以按照儲存庫中提供的安裝說明輕鬆設定。 Swirl Search 建置在 Python/Django 堆疊上，在 Apache 2.0 授權下發布，並作為 Docker 映像提供，使其可供使用者存取和自訂。 https://github.com/swirlai/swirl-search --- 謝謝閱讀！不要忘記為文章加入書籤，給出您的反應，並支持和查看提到的很棒的庫。 乾杯! --- 原文出處：https://dev.to/copilotkit/im-building-an-ai-project-here-are-the-libraries-im-going-to-use-pd0
> 面向雲程式設計的宣言。 別誤會我的意思，我喜歡雲！它使我能夠建立令人驚嘆的東西，並徹底改變了我使用軟體創新和解決問題的方式。 它是「*新電腦*」、終極電腦、「*無電腦電腦*」。它可以彈性擴展，永遠在線，無處不在，可以做任何事情。這是無邊無際的。它肯定會留在這裡。 但天哪，這絕對不是我們在未來十年內建立雲端應用程式的方式。隨著雲端從“我不想讓伺服器放在我的辦公桌下”發展到“我的應用程式需要30 個不同的託管服務來執行其任務”，我們有點忘記了優秀的開發人員體驗是什麼樣子的。 為雲端建立應用程式有時感覺就像把我孩子的袋子裡未使用的樂高積木灑滿了客廳地板並試圖建造一座城堡。在經歷了撕碎的撲克牌、可怕的芭比娃娃頭和漏電的電池之後，你讀了第一百萬次說明書，卻發現你最終建造的東西與上次建造的東西基本上相同。 分類樂高積木很有趣！和孩子們一起打發時間。它甚至滿足了我的強迫症……但見鬼，這不是我想要建立專業軟體的方式！ *讓我試著描述一下我和我的開發人員朋友正在努力解決的問題。* ### 我想專注於為我的用戶創造價值 當我建立專業軟體時，我希望將大部分時間花在應用程式的*功能*領域，而不是我使用的平台的*非功能*機制。 每次我想要在 AWS Lambda 函數內執行程式碼時，我都必須了解它需要與 tree-shaken 依賴項捆綁在一起，作為 zip 檔案上傳到 S3 並透過 Terraform 部署，這是沒有意義的。或者，為了能夠向 SNS 發布訊息，我的 IAM 策略必須有一個允許對主題的 ARN 執行`sns:Publish`操作的語句。*每個開發人員都需要了解 ARN 是什麼嗎？* 所有這些東西與我試圖為用戶創造的價值沒有任何關係。這是純粹的力學。**我們能擺脫它嗎？** ### 我想獨立 作為一名開發人員，最令人沮喪和最扼殺流程的情況之一是我必須停下來等待某人或某事才能繼續前進。 就像快樂地在空中滑翔，欣賞風景，欣賞優美的背景音樂，突然，*砰！*混凝土牆。 當您為雲端建立應用程式時，這堵混凝土牆有多種形狀和尺寸。是 DevOps 人員排隊；需要更新的是 IAM 策略；是只有外部兼職顧問才知道如何除錯的部署失敗；我們希望內部平台中不斷積壓的缺失旋鈕和 API 能夠改變一切。 這些障礙令人沮喪，因為它們迫使我切換環境，應用「臨時」安全策略，並發明我不想談論的醜陋駭客。這是一個破碎的世界。 我想獨立。我希望能夠把事情做好，保持順其自然。我想一次一點地改善世界，並在完成*後*繼續下一件事。我想要完成任務時的多巴胺激增，而不是另一個未完成的線程的羞恥感。 ### 我想要即時回饋 我說過我想要獨立，但不要誤以為我會寫完美的程式碼。這就是為什麼我想用鉛筆而不是鋼筆寫程式碼。 有些開發人員可以花一整天的時間進行編碼，甚至無需呼叫編譯器，最終，他們進行編譯和部署，然後就可以正常工作了。 我很欽佩他們，但我不是那種類型的開發人員。不，先生。對我來說，這就是迭代、迭代、迭代。我從小處開始，用輕鉛筆畫草圖，看一看，擦掉一堆東西，畫一條更粗的線，後退一步，瞇著眼睛，畫更多，擦掉更多，再看一眼，*沖洗並重複*。 這就是為什麼對我來說，最重要的是迭代速度。我越早執行並測試我的應用程式，我就能越快地返回並迭代。這就是我的流量所在。 當我開始程式設計時，我使用 Borland C++。過去，在 IBM PC AT 機器（TURBO ON）上編譯和執行一個程式大約需要 100ms。**雲端中的平均迭代周期需要幾分鐘。分鐘！有時要幾十分鐘！** 這是當今雲端中迭代的樣子：我對程式碼進行了更改；然後我需要編譯它；將其部署到我的測試帳戶；找到管理控制台的方式來實際觸發它；等待它執行並去搜尋 登入另一個服務。然後我意識到有一個錯誤回應告訴我我很愚蠢，因為我怎麼不知道我必須傳入 Accept-Content: application/json，否則我會得到一些名為「XML」的奇怪結果我不知道該怎麼辦（開個玩笑，XML 很棒，不是真的）。現在一切又重新來過… 因此，您說“編寫單元測試”，以居高臨下的方式試圖證明當前的現實是合理的。 「偉大的開發人員編寫單元測試」。好的！因此，現在我需要獲取我的程式碼，該程式碼進行了大約20 個外部API 呼叫，並透過從過時的文件中複製並貼上它們來以某種方式模擬API 回應，結果卻發現我的請求被拒絕了，因為我缺少了一些隱式操作我的 IAM 安全聲明。我們都去過那裡。 **說實話，給我90年代的開發者經驗**。我想要進行更改，並且希望能夠以互動方式或透過在幾毫秒內的單元測試來測試此更改，並且我想坐在沒有 WiFi 的飛機上執行此操作，好嗎？ （我們在 90 年代沒有 WiFi）。 ### 所以這只是一句吐槽？ 一定不行！我是電腦程式編制員。有時我覺得我從出生起就一直在寫軟體。我一直在社會危險的時期這樣做，當時成為電腦極客並不酷。 我一直喜歡成為開發人員，因為如果我對自己的工具不滿意，我可以製作自己的工具。畢竟，製造工具已經融入了我們的 DNA——人類製造工具的歷史已經超過一百萬年。 我對我的工具不滿意。 2022 年 4 月，我與好朋友、前微軟同事 \[Shai Ber\] 聯手，創立了 \[Wing\]，其使命是***為開發者解鎖雲端***。我們聚集了一群令人難以置信的美麗極客，他們與我們一樣對開發人員體驗和開源充滿熱情，並開始了我們的旅程，使開發人員（即我們自己）能夠解決這些基本問題。 ### 編譯器來救援 那麼我們該如何一次解決所有這些問題呢？ **我們正在為雲端建立一種程式語言。** 「*一種程式語言！？* 」你問。 “*世界上沒有足夠的程式語言嗎？* ”，“*編寫一個編譯器真的很難嗎？* ”， *“開發人員想要學習一門全新語言的機會有多大？* ”，“*為什麼不能你侵入了現有的語言工具鏈，瞇起眼睛，然後就到此為止了嗎？* ” 我不是一個心血來潮就建立程式語言的人。事實上，我花了過去五年的時間建立 \[AWS CDK\]，這是一個*多語言庫*，它允許開發人員使用他們最喜歡的程式語言定義雲端基礎設施，從而解決了我正在談論的一些挑戰。 「滿足開發人員所在的位置」是 AWS 和 CDK 的美好宗旨，它激勵我們建立 \[JSII\] 和 \[constructs\] 等出色的技術。 ***但有時，「他們在哪裡」並不是一個足夠好的模型來創造所需的體驗。*** 用程式碼定義基礎設施確實使我們能夠建立更高層級的抽象，但只要我的應用程式程式碼需要與此基礎設施交互，抽象就變得太\[洩漏\]。我被迫要了解比我需要的更多的知識，而且我必須成為 IAM、VPC、ALB、EBS 等領域的專家，基本上還有比我想記住的更多的 TLA。 我們今天使用的語言都是圍繞著*電腦是一台機器*的想法而設計的。他們已經達到了能夠為我們提供對這些機器的可靠抽象的程度。它們抽象化了 CPU、記憶體、檔案系統、行程管理和網路。作為開發人員，我不必關心文件在磁碟上的佈局方式，甚至不必關心哈希映射需要多少記憶體。我只需寫`readFile()`或`new Dictionary()`即可開始我的一天。是的，對我來說，了解幕後發生的事情並不是一個壞主意，但我並不是被迫這樣做。 大多數這些語言還為我提供類型安全。當我使用錯誤數量的參數呼叫函數時，我的編譯器會對我大喊大叫。我不必等到我的應用程式執行時才意識到我忘記了參數，或者傳遞了錯誤的類型。 **在雲端，我獨自一人**。每當我的程式碼需要與雲端資源或服務互動時（隨著產業的發展，這種情況越來越多）我必須放棄程式語言的舒適性和安全性。我必須跳出機器的邊界，進入網路的狂野西部，而我的編譯器卻一無所知。 突然之間，所有痛苦的來源幾乎變得非常明顯。如今的雲端應用程式只是由互不相連的部分拼湊而成。我有一個用於我的基礎設施的編譯器，另一個用於我的函數，另一個用於我的容器，另一個用於我的 \[CI/CD 管道\]。每個機器都非常認真地對待自己的工作，並讓我在每台機器中保持安全和快樂，但我的應用程式不再在單台機器上執行，我的應用程式在雲端上執行。 ***雲就是計算機。*** ### Wing，一種面向雲端的程式語言 當新的程式設計範式出現時，語言需要時間來迎頭趕上。我曾經喜歡用 C 語言建立物件導向的程式碼，但它是一個有漏洞的抽象。我必須了解物件在記憶體中的佈局方式、\[V 表\] 的工作原理，並記住將物件作為每個函數的第一個參數傳遞。當程式語言開始像一等公民一樣支援物件導向的概念時，這種範式就民主化了，今天大多數開發人員甚至不知道 V 表是什麼，世界一直在旋轉。 **Wing** ，或者***winglang，***如果你想可愛一點的話，它擁有你所期望的現代、面向物件、強類型和通用語言的所有好東西，但它還包括一些額外的原語，旨在支持分佈式雲作為一等公民的基於服務的性質。 ### 一探究竟 我們在 Wing 上的工作已經快一年了，我很高興邀請您查看並告訴我您的想法。雖然仍處於 Alpha 階段，尚未準備好投入生產使用，但已經可以用它來建立一些[實際的應用程式](https://github.com/winglang/research/tree/main/dogfooding)。 https://github.com/winglang/wing --- 原文出處：https://dev.to/winglang/cloud-why-so-difficult-3j33
展示開放 SaaS 🎉 ----------- 我們非常高興推出[Open SaaS](https://opensaas.sh) ，這是適用於 React、NodeJS 和 Prisma 的完全免費、開源、生產級 SaaS 樣板。 在這裡查看它的實際效果： https://www.youtube.com/watch?v=rfO5SbLfyFE Open SaaS 擁有您最近看到的那些付費 SaaS 入門者的所有功能，除了它完全**免費**且**開源**。 **我們覺得為一些需要自己管理的樣板程式碼支付 300-2,000 美元是瘋狂的**。最重要的是，許多樣板文件嚴重依賴第三方服務。再加上託管和其他費用，您需要花費大量資金才能將您的想法推向世界。 **這就是為什麼透過開放 SaaS，我們有意識地決定盡可能嘗試使用開源和免費服務。**例如，我們在[OpenSaaS.sh](http://OpenSaaS.sh)上託管的演示應用程式及其管理儀表板由 Plausible 分析的自架版本提供支援。希望您的 SaaS 具有相同的功能嗎？那麼，Open SaaS 已為您預先配置好！ 此外，Open SaaS 使用的[Wasp 框架](https://wasp.sh)可以為您建立許多功能，例如 Auth 和 Cron 作業，這樣您就不必支付第三方服務費用或完全自己編寫程式碼（我們稍後會更詳細地解釋這一點）。 在我們開始之前... ---------- 悠悠悠悠👋 [](https://www.producthunt.com/posts/open-saas?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-open-saas) Open SaaS[現已在 Product Hunt](https://www.producthunt.com/posts/open-saas)上線！快來支持我們的免費開源倡議🙏 [](https://www.producthunt.com/posts/open-saas) 為什麼我們要建造它......然後免費贈送它 ---------------------- [我們預發布版本](https://devhunt.org/tool/open-saas)中的初步回饋基本上是正面的，但我們也收到了一些問題，例如： - “它會保持免費嗎？” - “您開源這個的動機是什麼？” 所以我們認為我們應該先回答這些問題。  首先，是的，它是 100% 免費和開源的，並將保持這種狀態。 其次，我們相信，開發者、獨立駭客和個人企業家社群的集體知識將比個人或小團體產生更好的樣板。當您從某些開發人員那裡購買SaaS 入門版時，您已經獲得了一個固執己見的堆棧，然後除此之外，您還獲得了按照他們認為最好的方式建置的應用程式- 這可能並不總是最適合*您。* 第三， [Open SaaS](https://opensaas.sh)是[Wasp](https://wasp.sh)的一個專案，一個超強的開源React + NodeJS + Prisma全端框架。我們 Wasp 團隊相信 Wasp 非常適合快速且有效率地建立 SaaS 應用程式，我們希望這個模板能夠證明這一點。另外，身為開發人員，我們從其他開源專案中學到了很多東西，而 Wasp 本身就是一個開源專案。 基本上，我們熱愛開源理念，並且希望將其發揚光大。 🙏 因此，我們希望能夠為開發者社群提供非常有價值的資產，同時宣傳我們的開源全端框架。我們很高興看到社區為其做出貢獻，以便它不斷發展並成為最好的 SaaS 樣板。 開放 SaaS 是由什麼組成的 --------------- 我們在 Open SaaS 上投入了大量的精力，包括[文件](https://docs.opensaas.sh)，以便開發人員可以自信、輕鬆地啟動 SaaS 應用程式。 我們還花了一些時間檢查其他免費的開源 SaaS 啟動器，並希望確保 Open SaaS 具有可立即投入生產的啟動器的所有正確功能，而不顯得臃腫。我們認為我們已經在很大程度上實現了這一點，儘管我們將繼續加入功能並隨著時間的推移進行改進。 目前的主要特點如下： - 🔐 身份驗證（電子郵件驗證、Google、github） - 📩 電子郵件（sendgrid、emailgun、SMTP） - 📈 管理儀表板（合理或谷歌分析） - 🤑 Stripe 付款（只需加入您的訂閱產品 ID） - ⌨️ 端對端類型安全性（無需配置） - 🤖 OpenAI 整合（AI 驅動的範例應用程式） - 📖 Astro 博客 - 🚀 部署在任何地方 - 📄 完整的文件和社群支持 值得深入了解其中每個功能的細節，所以讓我們開始吧。 ### 授權 [](https://www.producthunt.com/posts/open-saas) 感謝 Wasp，Open SaaS 附帶了許多可能的身份驗證方法： - 使用者名稱和密碼（最簡單/最容易進行開發測試） - 已驗證電子郵件並重設密碼 - Google 和/或 Github 社群登入 這就是 Wasp 真正發揮作用的地方，因為設定全端 Auth 並取得預先配置的 UI 元件所需要做的就是： ``` //main.wasp app SaaSTemplate { auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, gitHub: {}, } } } ``` 嚴重地。就是這樣！ 只需確保您已設定社交身份驗證並擁有 API 金鑰以及定義的`User`和`ExternalAuth`實體，就可以開始了。不用擔心，這部分內容已在[Open SaaS Docs](https://docs.opensaas.sh)中詳細記錄和解釋。 最重要的是，Open SaaS 預先配置了一些範例，說明如何自訂和建立一些真正強大的身份驗證流程。 ### 管理儀表板和分析 [](https://www.producthunt.com/posts/open-saas) 透過利用[Wasp 的工作功能](https://wasp-lang.dev/docs/advanced/jobs)，Open SaaS 每小時從 Plausible 或 Google 的網站分析（您的選擇！）和 Stripe 的資料 API 中提取資料，並將其保存到我們的資料庫中。然後，該資料將顯示在我們的管理儀表板上（前往[OpenSaaS.sh](https://OpenSaaS.sh)查看其實際情況）。好的部分是，要為您自己的應用程式存取這些資料，您所要做的就是按照我們的指南獲取分析 API 金鑰，插入提供的腳本，然後就可以開始了！ 再次強調，Wasp 讓整個過程變得非常簡單。透過已經為您定義的查詢 API 和取得我們需要的資料的功能，Open SaaS 然後在`main.wasp`設定檔中使用 Wasp 作業： ``` job dailyStatsJob { executor: PgBoss, perform: { fn: import { calculateDailyStats } from "@server/workers/calculateDailyStats.js" }, schedule: { cron: "0 * * * *" }, entities: [User, DailyStats, Logs, PageViewSource] } ``` 就是這樣！ Wasp 負責為您設定和執行 cron 作業。 ### 條紋支付 [](https://www.producthunt.com/posts/open-saas) 如果您是以前從未建立過自己的 SaaS 的開發人員，那麼與 Stripe 這樣的支付處理器整合可能是您將面臨的少數挑戰之一。 當我建立第一個 SaaS [CoverLetterGPT.xyz](https://coverlettergpt.xyz)時，我的情況就是如此。這實際上是我建造它的主要動機之一；了解如何將 Stripe 支付整合到應用程式以及 OpenAI API 中。 儘管 Stripe 因擁有豐富的文件而聞名，但這個過程仍然令人畏懼。你必須： - 建立正確的產品類型 - 設定 webhook 端點 - 告訴 Stripe 將正確的 Webhook 事件傳送給您 - 正確使用事件 - 處理重複付款和失敗付款 - 在上線之前透過 CLI 進行正確測試 這就是為什麼為您設定 Stripe 訂閱付款是一個巨大的勝利。 但比這更重要的是，為您方便地記錄整個過程！這就是為什麼 Open SaaS[在我們的文件中為您提供方便的 Stripe 指南](https://docs.opensaas.sh)🙂 [](https://www.producthunt.com/posts/open-saas) ### 端對端類型安全 Open SaaS 是使用 Typescript 建置的，因為它是一個全棧應用程式，所以從後端到前端的類型安全可以成為真正的救星。我的意思是，一些[固執己見的堆疊](https://create.t3.gg/)在此基礎上變得非常流行。 幸運的是，Wasp 為您提供開箱即用的端到端類型安全性（無需配置！），因此 Open SaaS 可以輕鬆利用它。 這是一個例子： 1. 讓 Wasp 了解您的伺服器操作： ``` // main.wasp action getResponse { fn: import { getResponse } from "@server/actions.js", entities: [Response] } ``` 2. 輸入並實施您的伺服器操作。 ``` // src/srever/actions.ts type RespArgs = { hours: string; }; const getResponse: GetResponse<RespArgs, string> = async ({ hours }) => { } ``` 3. 導入並在客戶端呼叫。  客戶端類型將被正確推斷！  ### AI 驅動的範例應用程式（附有 OpenAI API） [](https://www.producthunt.com/posts/open-saas) 人工智慧正在使新的應用程式創意成為可能，這也是我們看到開發人員對建立 SaaS 應用程式的興趣重新抬頭的部分原因。正如我上面提到的，我建造的第一個 SaaS 應用程式[CoverLetterGPT](https://coverlettergpt.xyz)是「GPT 包裝器」之一，我很自豪地說它帶來了約350 美元MRR（每月經常性收入）的可觀被動收入。 我個人認為，我們在軟體開發方面處於最佳狀態，開發新的、有利可圖的人工智慧應用程式有很大的潛力，尤其是「獨立駭客」和「個人企業家」。 這就是 Open SaaS 推出 AI 調度助手演示應用程式的原因。您輸入任務及其分配的時間，AI Scheduler 會為您的一天建立詳細的計劃。 [](https://www.producthunt.com/posts/open-saas) 在幕後，這是使用 OpenAI 的 API 為每個任務分配優先級，並將它們分解為詳細的子任務，包括喝咖啡休息時間！它還利用 OpenAI 的函數呼叫功能以使用者定義的 JSON 物件形式回傳回應，以便客戶端每次都能正確使用它。此外，我們計劃在未來加入開源法學碩士，敬請期待！ 示範版 AI Scheduler 可協助開發人員學習如何有效使用 OpenAI API，並激發一些 SaaS 應用程式創意！ ### 隨處部署。容易地。 許多流行的 SaaS 新創公司都使用依賴託管的框架，這意味著您只能依賴一個提供者進行部署。雖然這些都是簡單的選擇，但它可能並不總是最適合您的應用程式。 Wasp 為您提供了部署全端應用程式的無限可能性： - 使用`wasp deploy`一鍵部署到[Fly.io](http://Fly.io) - 使用`wasp build`並部署 Dockerfiles 和客戶端，無論您喜歡什麼！ `wasp deploy`的優點在於它會自動產生和部署您的資料庫、伺服器和用戶端，並為您設定環境變數。 Open SaaS 還內建了環境變數和常數驗證器，以確保您已正確設定部署所需的所有內容，以及文件中的部署指南 [](https://www.producthunt.com/posts/open-saas) 最後，您擁有自己的程式碼，並且可以自由地將其部署到任何地方，而無需受供應商鎖定。 幫助我們，幫助你 -------- [](https://www.producthunt.com/posts/open-saas?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-open-saas) 想支持我們的免費開源計畫嗎？那麼現在就去[Product Hunt 上](https://www.producthunt.com/posts/open-saas)向我們提供一些支援吧！ 🙏 [](https://www.producthunt.com/posts/open-saas) 現在就開始建立您的 SaaS！ --------------- 我們希望 Open SaaS 能夠讓更多的開發人員能夠發布他們的想法和副專案。我們也希望從開發人員那裡獲得一些回饋和意見，以便我們能夠使其成為最好的 SaaS 樣板啟動器。 因此，如果您有任何意見或發現任何錯誤，請[在此處提交問題](https://github.com/wasp-lang/open-saas/issues)。 如果您發現 Open SaaS 和/或 Wasp 很有用，最簡單的支援方法就是給我們一顆星： - 為[Open SaaS 儲存庫](https://github.com/wasp-lang/open-saas)加註星標 - 給[黃蜂倉庫](https://github.com/wasp-lang/wasp)加註星標 --- 原文出處：https://dev.to/wasp/you-dont-need-to-pay-for-saas-boilerplates-open-saas-56lj
CSS 中的超簡單響應式行和列 ================== 網格佈局是 Web 開發設計的基礎，您很可能已經使用 Bootstrap 或 Foundation 等工具來使您的佈局成為現實。但是，像你們大多數人一樣，我不喜歡執行 Bootstrap 或 Foundation 所需的依賴項，也不喜歡頁面加載時間的叮噹聲。 事實上，當我將Bootstrap 用於我正在編寫的應用程式時，我幾乎只將它用於網格佈局，有時我會將它用於通知或基本的相當合理的CSS 預設值，但90% 的時間，我想要的都是是網格佈局。 我也不喜歡只有將列拆分為 12 列或更少的選項。感覺有時你必須做一些瘋狂的工作才能讓列成列，或類似奇怪的事情。 我們如何更快、更輕鬆地進行網格佈局？ Flexbox 就是您的答案。我認為 ### flexbox 此時，flexbox 幾乎無所不在。所有主要[瀏覽器](https://caniuse.com/#feat=flexbox)都支援它。它允許更簡單的佈局，並且受到 React-Native 的支持，這意味著當我為 React-Native 佈局頁面時，我首先會使用 Flexbox，但我發現自己在 Web 開發中也首先使用了 Flexbox。 事實上，我佈置的最後一個應用程式完全是使用 Flexbox 完成的。我發現它*很*容易使用。 如果您對 Flex Box 不太了解。我喜歡這個頁面，它很好地介紹了[Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) ### layout 首先，我將整個頁麵包裹在一個 div 中。 ``` <div class='some-page-wrapper'> </div> ``` 然後我定義一個可以幫助佈局的`.row`和`.column`類別。 ``` .row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; } ``` 現在，如果我們想要兩列佈局： ``` <div class='some-page-wrapper'> <div class='row'> <div class='column'> <div class='blue-column'> Some Text in Column One </div> </div> <div class='column'> <div class='green-column'> Some Text in Column Two </div> </div> </div> </div> ``` CSS 看起來像： ``` .some-page-wrapper { margin: 15px; background-color: red; } .row { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .column { display: flex; flex-direction: column; flex-basis: 100%; flex: 1; } .blue-column { background-color: blue; height: 100px; } .green-column { background-color: green; height: 100px; } ``` https://codepen.io/drews256/pen/zLerNx 如果我們想新增第三列怎麼辦？ HTML 可以輕鬆更新為： ``` <div class='some-page-wrapper'> <div class='row'> <div class='column'> <div class='blue-column'> Some Text in Column One </div> </div> <div class='column'> <div class='green-column'> Some Text in Column Two </div> </div> <div class='column'> <div class='orange-column'> Some Text in Column Two </div> </div> </div> </div> ``` https://codepen.io/drews256/pen/djaYKo 我們新增了第三列。這無縫地融入了我們的行。 https://codepen.io/drews256/pen/djaYKo 現在如果我們想要更複雜的佈局呢？ 我們可以加入更多行，這非常簡單。 ``` <div class='some-page-wrapper'> <div class='row'> <div class='column'> <div class='orange-column'> Some Text in Column One </div> </div> <div class='column'> <div class='blue-column'> Some Text in Column Two </div> </div> <div class='column'> <div class='green-column'> Some Text in Column Three </div> </div> </div> <div class='row 2'> <div class='column'> <div class='green-column'> Some Text in Row 2, Column One </div> </div> <div class='column'> <div class='orange-column'> Some Text in Row 2, Column Two </div> </div> <div class='column'> <div class='blue-column'> Some Text in Row2, Column Three </div> </div> </div> </div> ``` https://codepen.io/drews256/pen/WKPwxN 或者我們可以調整列的大小。 要擁有雙列，我們可以新增一個`.double-column`類別。不過，這可以適用於任何尺寸的列，您可以做60/40，您可以做10/10/10/10/10/10/10/10/10/10，老實說，這裡任何組合都是可能的。您可以做 1 X 100。或 10 x 1，然後 20 x 3，然後 30 x 1。選項是無窮無盡的！ 在一種佈局上，我在“列”周圍加入了很大的邊距，並且由於行將向下滾動，因此我有一行包含所需數量的“列”。這些列是固定寬度的卡片，因此它們只是換行到下一行，而彈性盒巧妙地響應式地將卡片沿著螢幕包裹起來。 ``` .double-column { display: flex; flex-direction: column; flex-basis: 100%; flex: 2; } ``` https://codepen.io/drews256/pen/djaMWj 但這不是很敏感嗎？我們可以使用媒體查詢來加入一些響應性。 只需將`flex: 1`和`flex: 2`移動到媒體查詢（大小取決於應用程式，我只是提供一個選項） ``` @media screen and (min-width: 800px) { .column { flex: 1 } .double-column { flex: 2 } } ``` `> 800` 像素時：  `< 800` 像素時：  最終的codepen，提示點擊右下角的1x或0.5x按鈕來查看「響應式」佈局的差異。 https://codepen.io/drews256/pen/bjzpvd 本質上，我們只是用 20 行 CSS 將 bootstrap 的行/列從水中炸出來。我們有一種快速建立行/列佈局的方法，而且由於我們使用 Flexbox，我們幾乎不必擔心佈局會破壞或出現任何問題。它可以輕鬆適應各種用途，並允許大量的可自訂性。您對彈性盒有何看法？你試過了嗎？ 另一個隱藏的好處是，如果我以這種方式佈局 React 元件，那麼很容易佈局 React-Native 元件，使其看起來相似。 我通常在我的專案中使用 SCSS，所以如果您發現一些不完美的 CSS，請告訴我！ --- 原文出處：https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01
解決 DEV 上的點擊誘餌：我們的策略和行動 ====================== 最近，我們採取了措施來解決 DEV 上的點擊誘餌問題。這篇文章旨在解釋我們的方法及其背後的基本原理。 定義點擊誘餌 ------ 點擊誘餌通常是指標題中具有特定模式的內容，例如清單或聳人聽聞的標題。例如，雖然清單文章在推動 DEV 參與度方面獲得了關注，但它們有時會導致不平衡，正如 Chrome 插件等社群舉措所表明的那樣： {% 嵌入 https://dev.to/lnahrf/no-listicles-the-chrome-add-on-that-removes-list-type-articles-from-your-devto-feed-3i8 %} 我們的方法 ----- ### 強調緩解而非嚴格過濾 我們沒有實施嚴格的過濾，而是選擇了更細緻的方法。原因如下： - **內容平衡**：並非所有清單文章都是負面的；它們可以提供豐富的資訊。然而，由於我們基於參與的系統，他們常常獲得不成比例的獎勵。 - **點擊誘餌的多樣性**：點擊誘餌有多種形式，嚴格的過濾器可能無法有效地捕捉所有這些形式。 - **主觀性問題**：確定標題誘餌的主觀性使得嚴格過濾變得不切實際。 ### 評分中的人工智慧和人類判斷 我們在應用程式中引入了`clickbait_score`字段，範圍從`0.0`到`1.0` 。 {% 嵌入 https://github.com/forem/forem/pull/20493 %} 這個分數不只由演算法決定。我們利用人工智慧和人類判斷來為貼文分配分數，認識到任務的主觀性和細微差別。 ### 透過 A/B 測試實施 我們正在仔細整合點擊誘餌分數。作為我們正在進行的 A/B 測試的一部分，使用者可能會遇到不同程度的點擊誘餌緩解措施。這些資料將幫助我們在未來幾週內完善我們的方法。 ### 展望未來：可自訂的用戶設置 雖然我們正在研究管理點擊誘餌的預設設置，但我們認識到個性化的必要性。未來的更新可能包括用戶特定的設置，以根據標題誘餌分數自訂提要偏好。 *我們將在不久的將來分享更多關於我們正在採取的各種策略，以改善核心體驗並幫助**分離 DEV 上的訊號和雜訊***。 快樂編碼❤️ --- 原文出處：https://dev.to/devteam/tackling-clickbait-on-dev-strategy-and-technical-approach-3dh9
您經常聽到工程師將 Web Components 與 React 進行比較。這是我的看法。 ### Web 元件是規格。你的網路框架不是。 事實上，我們不需要 JavaScript 框架來使用 Web 元件，這是一個巨大的差異。 Web 元件規格自訂元素 v1、範本、插槽和 ShadowDOM 的部分都可以在瀏覽器中運作。這意味著開始編寫 Web 元件時無需依賴關係！  您不需要大量的 JavaScript 來渲染 UI。 Web 元件對於載入嚴重依賴項阻礙使用者互動的情況（例如行動裝置的情況）非常有用。但還不止於此。事實證明，[Web 元件的靜態網站產生需要最少的工具](https://github.com/readymade-ui/readymade/blob/master/build-gh-pages.js)。 HTML 模組將使處理模板部分的人體工學變得更好。今年，Chrome 團隊宣布 [HTML 模組規格](https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/ewfRSdqcOd8/w_Fr6rJ3DQAJ) 即將推出！雖然您可能需要 JavaScript 框架來建立複雜的 Web 應用程式，但靜態網站最好僅使用規範來建置。考慮到網路中有多少內容是靜態內容，這是一個很大的問題。抱歉，React 和蓋茲比。 ### Web 元件是包容性的。 JavaScript 生態系統是如此分散。 Web 元件為每個人提供了使用同一種語言的機會。 React 的支持者很快指出“沒有單一的‘Web 元件社區’，但事實是社區是我們所有人。JavaScript 框架是排他性的。你必須成為俱樂部的一部分。自定義元素則不然。v1. 初學者可以開始編寫它們，而無需學習JavaScript 庫的艱苦戰鬥。 ### Web 元件解決了一個不同的問題。 React 解決了 UI 開發中狀態缺失的問題。自訂元素是無狀態的。您需要將狀態機引入自訂元素。 JavaScript 框架永遠都有空間。 Web 元件提供了一個機會來簡化過去幾年一直在這裡流行的元件範例，以便每個人都可以使用相同的 UI 元件。 Web 元件本質上是在擴展我們日常使用的基本元素時解決人體工學問題。 [甚至在 React 文件中也這麼說。](https://reactjs.org/docs/web-components.html)React 和 Web Components 解決了不同的問題。 ### Web 元件是可互通的。您的 Javascript 框架很可能不是。 在框架中使用自訂元素不僅是可能的，而且應該被視為進入 2020 年的最佳實踐。Javascript 框架應該能夠處理自訂元素，就像處理 DOM 一樣。讓 Web 元件與 JavaScript 框架配合使用有許多怪癖。 React 有一些問題，但 React 團隊表示[他們將考慮與規範緊密整合](https://dev.to/ben/why-the-react-community-is-missing-the-point-about-web-components-1ic3/)。 Angular 不支援自訂內建元素的部分規格。 Angular 提供了對自主自訂元素的支持，甚至可以使用 Angular Elements 編譯它們。 Vue 與自訂元素具有相當的互通性，但是如果您遇到問題，使用 Vue 編碼的人請在這裡留言。有一些解決方法可以解決整合 Web 元件所產生的問題，但 JavaScript 框架還需要做一些工作來確保完整的自訂元素 v1 規範正常運作。 ### Web 元件是 a11y。 客製化的內建元素可讓您擴展按鈕、輸入等原生元素，並選擇和實現您自己的功能。透過擴充具有可存取性特徵的元素，您可以免費獲得這些功能。通常，在使用 JavaScript 框架建立 UI 元件時，您必須複製輔助功能。 ### 教育和網路工程存在問題。 在過去十年流行的程式碼學院中，我們忘記了詳細說明規格並直接跳入 JavaScript 框架。即使是入門級課程也可以包括接觸 React。這對於只想讓我們「使用平台」的 JavaScript 框架來說是有利的，但它留下了一個空白，即初級工程師缺乏我們所使用的平台的知識：HTML、CSS 和 JavaScript。 Web Components 透過提供每個人都可以學習和使用的規範來解決這個問題。 ## 我們就不能好好相處嗎？ 即使對於初學者來說，學習 HTML 規範也很容易。讓每個瀏覽器和函式庫都同意並支援規範是很困難的。 HTML 是一個動態文件，並且隨著時間的推移而不斷變化。 [Apple 拒絕](https://github.com/w3c/webcomponents/issues/509#issuecomment-230700060) 在 Safari 中實作自訂的內建元素規格。自從 Microsoft 在 Edge 中遷移到 Chromium 以來，所有最受歡迎的常青瀏覽器都實作了自訂元素 v1。我們只需要更好地合作，Web 元件可以為 2020 年代實現 UI 元件提供可持續的範例。  這並不意味著您現在無法開始使用 Web 元件。對於不支援此規格的瀏覽器，存在 [Polyfills](https://www.webcomponents.org/polyfills/)。 我們應該共同努力，確保 Web 元件進入開發工作流程。從前端 Web 開發教育的一開始到最複雜的 Web 應用程式 Web 元件都有可能簡化 UI 元件開發、提供開箱即用的輔助功能，甚至減少建立 UI 所需的程式碼量。是時候我們釋放這種潛力了，而不是爭論哪個 JS 框架更適合提供元件範例。 JavaScript 框架將繼續擅長其最擅長的領域：狀態管理、提供架構模式和方便的工具。 Web 元件將繼續存在。我們可以共同努力，讓網路變得更美好。 --- 原文出處：https://dev.to/steveblue/it-s-not-about-web-components-vs-react-5137
#TL;博士 在本文中，您將了解如何使用 Nextjs、CopilotKit 和 OpenAI 建立人工智慧驅動的簡歷產生器應用程式。 我們將涵蓋： - 利用 ChatGPT 撰寫履歷和求職信 📑 - 透過與履歷聊天逐漸完善你的履歷💬 - 將您的履歷和求職信匯出為 PDF 🖨️  --- ## CopilotKit：建構深度整合的應用內人工智慧聊天機器人 💬 只是簡單介紹一下我們的背景。 CopilotKit 是[開源 AI 副駕駛平台。](https://github.com/CopilotKit/CopilotKit) 我們可以輕鬆地將強大的 AI 聊天機器人整合到您的 React 應用程式中。完全可定制和深度集成。  {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} 現在回到文章。 --- ## **先決條件** 要開始學習本教程，您需要在電腦上安裝以下軟體： - 文字編輯器（例如 Visual Studio Code） - 節點.js - 套件管理器 ## **使用 NextJS 建立簡歷應用程式前端** **步驟 1：** 開啟命令提示字元並執行下列命令。 ``` npx create-next-app@latest ``` --- **第 2 步：** 系統將提示您選擇一些選項，如下所示。  **步驟 3：** 使用您選擇的文字編輯器開啟新建立的 Nextjs 專案。然後，在命令列上執行以下命令，以使用 Tailwind CSS 安裝帶有 NextJS 的 Preline UI。依照[本指南](https://preline.co/docs/frameworks-nextjs.html)完成 Preline 設定。 ``` npm install preline ``` --- **步驟4：** 在resume/app/page.tsx檔案中，新增以下程式碼內容。 ``` export default function Home() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-slate-900 bg-gradient-to-b from-violet-600/[.15] via-transparent text-sm py-3 sm:py-0 dark:bg-gray-800 dark:border-gray-700"> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8 " aria-label="Global"> <div className="flex items-center justify-between"> <a className="flex-none text-xl text-gray-200 font-semibold dark:text-white py-8" href="#" aria-label="Brand"> ResumeBuilder </a> </div> </nav> </header> {/* <!-- Hero --> */} <div className="bg-slate-900 h-screen"> <div className="bg-gradient-to-b from-violet-600/[.15] via-transparent"> <div className="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-24 space-y-8"> {/* <!-- Title --> */} <div className="max-w-3xl text-center mx-auto pt-10"> <h1 className="block font-medium text-gray-200 text-4xl sm:text-5xl md:text-6xl lg:text-7xl"> Craft A Compelling Resume With AI Resume Builder </h1> </div> {/* <!-- End Title --> */} <div className="max-w-3xl text-center mx-auto"> <p className="text-lg text-gray-400"> ResumeBuilder helps you create a resume that effectively highlights your skills and experience. </p> </div> {/* <!-- Buttons --> */} <div className="text-center"> <a className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 shadow-lg shadow-transparent hover:shadow-blue-700/50 border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-6 dark:focus:ring-offset-gray-800" href="#"> Get started <svg className="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m9 18 6-6-6-6" /> </svg> </a> </div> {/* <!-- End Buttons --> */} </div> </div> </div> {/* <!-- End Hero --> */} </> ); } ``` **步驟 5：** 在命令列上執行命令 *npm run dev*。導航至 http://localhost:3000/，您應該會看到新建立的 NextJS 專案。  --- ## 使用 GitHub GraphQL 從 GitHub 取得履歷資料 **步驟 1：** 使用下列命令安裝 Axios HTTP 用戶端。 ``` npm i axios ``` **步驟 2：** 在應用程式資料夾中，建立一個名為 API 的資料夾。然後，在 API 資料夾中建立一個名為 GitHub 的資料夾。在GitHub資料夾中建立一個名為route.ts的檔案並加入以下程式碼。 ``` import { NextResponse } from "next/server"; import axios from "axios"; // Environment variables for GitHub API token and user details const GITHUB_TOKEN = "Your GitHub personal access token"; const GITHUB_USERNAME = "Your GitHub account username"; // Axios instance for GitHub GraphQL API const githubApi = axios.create({ baseURL: "https://api.github.com/graphql", headers: { Authorization: `bearer ${GITHUB_TOKEN}`, "Content-Type": "application/json", }, }); // GraphQL query to fetch user and repository data const getUserAndReposQuery = ` query { user(login: "${GITHUB_USERNAME}") { name email company bio repositories(first: 3, orderBy: {field: CREATED_AT, direction: DESC}) { edges { node { name url description createdAt ... on Repository { primaryLanguage{ name } stargazers { totalCount } } } } } } } `; // API route to handle resume data fetching export async function GET(request: any) { try { // Fetch data from GitHub const response = await githubApi.post("", { query: getUserAndReposQuery }); const userData = response.data.data.user; // Format resume data const resumeData = { name: userData.name, email: userData.email, company: userData.company, bio: userData.bio, repositories: userData.repositories.edges.map((repo: any) => ({ name: repo.node.name, url: repo.node.url, created: repo.node.createdAt, description: repo.node.description, language: repo.node.primaryLanguage.name, stars: repo.node.stargazers.totalCount, })), }; // Return formatted resume data return NextResponse.json(resumeData); } catch (error) { console.error("Error fetching data from GitHub:", error); return NextResponse.json({ message: "Internal Server Error" }); } } ``` **步驟 3：** 在應用程式資料夾中，建立一個名為 Components 的資料夾。然後，在元件資料夾中建立一個名為 githubdata.tsx 的檔案並新增以下程式碼。 ``` "use client"; import React, { useEffect, useState } from "react"; import axios from "axios"; // Resume data interface interface ResumeData { name: string; email: string; company: string; bio: string; repositories: { name: string; url: string; created: string; description: string; language: string; stars: number; }[]; } export const useGithubData = () => { const [resumeData, setResumeData] = useState<ResumeData | null>(null); // Fetch resume data from API useEffect(() => { axios .get("/api/github") .then((response) => { setResumeData(response.data); }) }, []); return { resumeData, }; } ``` --- ## 建立求職信和履歷功能 **步驟 1：** 透過在命令列上執行以下命令來安裝 CopilotKit 前端軟體包。 ``` npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea ``` **步驟2：** 在元件資料夾中建立一個名為resume.tsx 的檔案。然後在檔案頂端匯入 useMakeCopilotReadable、useMakeCopilotActionable 和 useGithubData 自訂掛鉤，如下所示。 ``` import React, { useState } from "react"; import { useGithubData } from "./githubdata"; import { useMakeCopilotReadable, useMakeCopilotActionable, } from "@copilotkit/react-core"; ``` **第 3 步：** 建立一個名為 CoverLetterAndResume 的元件。在元件內部，使用 useGithubData 掛鉤檢索從 GitHub 取得的資料。然後，宣告一個名為 createCoverLetterAndResume 的狀態變數和一個用於更新它的名為 setCreateCoverLetterAndResume 的函數。使用包含 letter 和 resume 兩個屬性的物件初始化 useState，如下所示。 ``` export const CoverLetterAndResume = () => { const {resumeData } = useGithubData(); const [createCoverLetterAndResume, setCreateCoverLetterAndResume] = useState({ letter: "", resume: "" }); } ``` **步驟 4：** 使用 useMakeCopilotReadable 掛鉤將從 GitHub 取得的資料新增為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable(JSON.stringify(resumeData)); ``` **步驟 5：** 使用 useMakeCopilotActionable 掛鉤設定一個名為 createCoverLetterAndResume 的操作，其中包含描述和實作函數，該函數使用提供的求職信和簡歷更新 createCoverLetterAndResume 狀態，如下所示。 ``` useMakeCopilotActionable( { name: "createCoverLetterAndResume", description: "Create a cover letter and resume for a software developer job application.", argumentAnnotations: [ { name: "coverLetterMarkdown", type: "string", description: "Markdown text for a cover letter to introduce yourself and briefly summarize your professional background as a software developer.", required: true, }, { name: "resumeMarkdown", type: "string", description: "Markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (coverLetterMarkdown, resumeMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, letter: coverLetterMarkdown, resume: resumeMarkdown, })); }, }, [] ); ``` **步驟 6：** 在 CoverLetterAndResume 元件外部，建立一個名為 CoverLetterResume 的元件，用於在 Web 應用程式 UI 上顯示求職信和履歷。 ``` type CoverLetterResumeProps = { letter: string; resume: string; }; const CoverLetterResume = ({ letter, resume }: CoverLetterResumeProps) => { return ( <div className="px-4 sm:px-6 lg:px-8 bg-slate-50 py-4"> <div className="sm:flex sm:items-center"> <div className="sm:flex-auto"> <h1 className="text-3xl font-semibold leading-6 text-gray-900"> ResumeBuilder </h1> </div> </div> {/* Cover Letter Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter </h2> <div className="min-w-full divide-y divide-gray-300 p-2"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white p-2"> <ReactMarkdown>{letter}</ReactMarkdown> </div> </div> </div> </div> </div> </div> {/* Cover Letter End */} {/* Cover Letter Preview Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter Preview </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> <textarea className="p-2" id="coverLetter" value={letter} rows={20} cols={113} /> </div> </div> </div> </div> </div> </div> {/* Cover Letter Preview End */} {/* Resume Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Resume </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> <ReactMarkdown>{resume}</ReactMarkdown> </div> </div> </div> </div> </div> {/* Resume End */} {/* Cover Letter Preview Start */} <div className="mt-8 flow-root bg-slate-200"> <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> <div> <h2 className="text-lg font-semibold leading-6 text-gray-900 mb-4 p-2"> Cover Letter Preview </h2> <div className="min-w-full divide-y divide-gray-300"> {/* <Thead /> */} <div className="divide-y divide-gray-200 bg-white"> {/* {letter} */} {/* <ReactMarkdown>{letter}</ReactMarkdown> */} <textarea className="p-2" id="resume" value={resume} rows={20} cols={113} /> </div> </div> </div> </div> </div> </div> {/* Cover Letter Preview End */} </div> ); }; ``` **第7步：**然後返回CoverLetterAndResume元件內的CoverLetterResume元件，如下圖所示。 ``` return <CoverLetterResume {...createCoverLetterAndResume}/>; ``` **第8步：** 在應用程式資料夾中建立一個名為resumeandcoverletter的資料夾。然後，建立一個名為 page.tsx 的檔案並新增以下程式碼。 ``` "use client"; import { CopilotProvider } from "@copilotkit/react-core"; import { CopilotSidebarUIProvider } from "@copilotkit/react-ui"; import "@copilotkit/react-textarea/styles.css"; // also import this if you want to use the CopilotTextarea component import "@copilotkit/react-ui/styles.css"; // also import this if you want to use the chatbot component import React, { useEffect, useState } from "react"; import { CoverLetterAndResume } from "../components/resume"; function buildResume () { return ( <CopilotProvider chatApiEndpoint="./../api/copilotkit/chat"> <CopilotSidebarUIProvider> <CoverLetterAndResume /> </CopilotSidebarUIProvider> </CopilotProvider> ); } export default buildResume; ``` **步驟 9：** 使用下列指令安裝 openai 軟體套件。 ``` npm i openai ``` **步驟 10：** 在應用程式資料夾中，建立一個名為 API 的資料夾。然後，在 API 資料夾中建立一個名為 copilotkit 的資料夾。在 copilotkit 資料夾中，建立一個名為 chat 的資料夾。然後，在聊天資料夾中建立一個名為route.ts的檔案並新增以下程式碼。 ``` import OpenAI from "openai"; const openai = new OpenAI({ apiKey: "Your ChatGPT API key", }); export const runtime = "edge"; export async function POST(req: Request): Promise<Response> { try { const forwardedProps = await req.json(); const stream = openai.beta.chat.completions .stream({ model: "gpt-4-1106-preview", ...forwardedProps, stream: true, }) .toReadableStream(); return new Response(stream); } catch (error: any) { return new Response("", { status: 500, statusText: error.error.message }); } } ``` **步驟 11：** 在應用程式資料夾中的 page.tsx 檔案中，在「開始」按鈕中新增一個連結，用於導航到簡歷和求職信頁面，如下所示。 ``` <div className="text-center"> <Link className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 shadow-lg shadow-transparent hover:shadow-blue-700/50 border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-6 dark:focus:ring-offset-gray-800" href="/resumeandcoverletter"> Get started <svg className="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m9 18 6-6-6-6" /> </svg> </Link> </div> ``` **第12步：**導航至http://localhost:3000/，點擊「開始」按鈕，您將被重新導向到與聊天機器人整合的履歷和求職信頁面，如下所示。  **第 13 步：** 向右側的聊天機器人發出諸如“建立求職信和簡歷”之類的提示。聊天機器人將開始產生回應，完成後，它將在頁面左側顯示產生的求職信和履歷，如下所示。  --- ## 建立更新求職信功能 **第 1 步：** 宣告一個名為 updateLetter 的變數，用於保存先前產生的求職信。 ``` const updateLetter = createCoverLetterAndResume.letter; ``` **步驟 2：** 使用 useMakeCopilotReadable 掛鉤新增 updateLetter 作為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable("Cover Letter:" + JSON.stringify(updateLetter)); ``` **步驟 3：** 使用 useMakeCopilotActionable 掛鉤設定一個名為 updateCoverLetter 的操作，其中包含描述和實作函數，該函數使用提供的求職信更新來更新 createCoverLetterAndResume 狀態，如下所示。 ``` useMakeCopilotActionable( { name: "updateCoverLetter", description: "Update cover letter for a software developer job application.", argumentAnnotations: [ { name: "updateCoverLetterMarkdown", type: "string", description: "Update markdown text for a cover letter to introduce yourself and briefly summarize your professional background as a software developer.", required: true, }, { name: "resumeMarkdown", type: "string", description: "Markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (updatedCoverLetterMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, letter: updatedCoverLetterMarkdown, })); }, }, [] ); ``` ** 步驟 4：** 給聊天機器人一個提示，例如“更新求職信並加入我正在申請 CopilotKit 的技術寫作職位。”如下圖所示，您可以看到求職信已更新。  --- ## 建立更新復原功能 **第 1 步：** 宣告一個名為 updateResume 的變數，用於保存先前產生的求職信。 ``` const updateResume = createCoverLetterAndResume.resume; ``` **步驟 2：** 使用 useMakeCopilotReadable 掛鉤新增 updateResume 作為應用程式內聊天機器人的上下文。 ``` useMakeCopilotReadable("Resume:" + JSON.stringify(updateResume)); ``` **步驟 3：** 使用 useMakeCopilotActionable 掛鉤設定一個名為 updateResume 的操作，其中包含描述和實作函數，該函數使用提供的求職信更新來更新 createCoverLetterAndResume 狀態，如下所示。 ``` useMakeCopilotActionable( { name: "updateResume", description: "Update resume for a software developer job application.", argumentAnnotations: [ { name: "updateResumeMarkdown", type: "string", description: "Update markdown text for a resume that displays your professional background and relevant skills.", required: true, }, ], implementation: async (updatedResumeMarkdown) => { setCreateCoverLetterAndResume((prevState) => ({ ...prevState, resume: updatedResumeMarkdown, })); }, }, [] ); ``` **第 4 步：** 向聊天機器人發出提示，例如「更新履歷並將我的姓名加入為 John Doe，將我的電子郵件加入為 [email protected]」。如下圖所示，可以看到履歷已更新。  --- ## 建立下載求職信和履歷表 Pdfs 功能 **第 1 步：** 安裝 jsPDF，一個用 JavaScript 產生 PDF 的函式庫。 ``` npm i jspdf ``` **步驟 2：** 在 CoverLetterAndResume 元件內，使用 useMakeCopilotActionable 掛鉤設定一個名為“downloadPdfs”的操作，其中包含描述和實現函數，該函數使用 jsPDF 庫為求職信和簡歷建立 PDF，然後保存它們， 如下所示。 ``` function addTextToPDF(doc: any, text: any, x: any, y: any, maxWidth: any) { // Split the text into lines const lines = doc.splitTextToSize(text, maxWidth); // Add lines to the document doc.text(lines, x, y); } useMakeCopilotActionable( { name: "downloadPdfs", description: "Download pdfs of the cover letter and resume.", argumentAnnotations: [ { name: "coverLetterPdfA4", type: "string", description: "A Pdf that contains the cover letter converted from markdown text and fits A4 paper.", required: true, }, { name: "resumePdfA4Paper", type: "string", description: "A Pdf that contains the resume converted from markdown text and fits A4 paper.", required: true, }, ], implementation: async () => { const marginLeft = 10; const marginTop = 10; const maxWidth = 180; const coverLetterDoc = new jsPDF(); addTextToPDF( coverLetterDoc, createCoverLetterAndResume.letter, marginLeft, marginTop, maxWidth ); coverLetterDoc.save("coverLetter.pdf"); const resumeDoc = new jsPDF(); addTextToPDF( resumeDoc, createCoverLetterAndResume.resume, marginLeft, marginTop, maxWidth ); resumeDoc.save("resume.pdf"); }, }, [createCoverLetterAndResume] ); ``` **第 3 步：** 返回網頁應用程式中的聊天機器人，並提示「下載求職信和簡歷的 pdf 檔案」。 PDF 將開始下載，如果您開啟 coverLetter.pdf，您應該會看到產生的求職信，如下所示。  --- ## 結論 總而言之，您可以使用 CopilotKit 建立應用內 AI 聊天機器人，該機器人可以查看當前應用程式狀態並在應用程式內執行操作。 AI 聊天機器人可以與您的應用程式前端、後端和第三方服務對話。 對於完整的源程式碼： https://github.com/TheGreatBonnie/AIPoweredResumeBuilder --- 原文出處：https://dev.to/copilotkit/how-to-build-the-with-nextjs-openai-1mhb
## 長篇大論；博士 SaaS 樣板啟動器隨處可見，但它們非常昂貴（約 200-800 美元）。 我想為 React 和 NextJS 找到最好的免費開源 SaaS Starters，這些 Starters 將在 2024 年積極維護。 在下面的文章中，我將介紹每個初學者的功能及其優缺點，所以如果您有興趣，請繼續閱讀。但我還在下面整理了這個漂亮的圖表，可以一目了然地對它們進行比較（順便說一句，文章底部有同一圖表的文本版本，帶有可點擊的連結）。 享受！  ## 介紹 軟體即服務 (SaaS) 應用程式是獨立駭客和個人企業家賺錢的最佳方式之一。這就是為什麼 SaaS 樣板啟動器正在崛起！但其中一些售價高達 2,000 美元以上，平均價格約為 200 美元。 這就是為什麼我開始尋找是否有免費的開源 SaaS 啟動器以及它們的表現如何。在找到了很多但注意到大多數不再積極維護後，我將範圍縮小到這四個免費的開源 SaaS Starter：BoxyHQ 的 SaaS Starter、Open SaaS、SaaS Starter Kit 和 Next SaaS Stripe Starter。 ## BOXYHQ SaaS 入門套件 “**您的終極企業級 Next.js 樣板”**   - GitHub：https://github.com/boxyhq/saas-starter-kit - 影片演練：[https://www.youtube.com/watch?v=oF8QIwQIhyo](https://www.youtube.com/watch?v=oF8QIwQIhyo) BoxyHQ 是一家專注於安全的公司，專注於單一登入 (SSO) 和企業安全解決方案。因此，這個 SaaS 入門套件雖然免費且開源，但更專注於企業需求也就不足為奇了。 因此，如果您正在尋找一個外觀簡潔、具有安全 SAML SSO、使用者帳戶建立、團隊建立和管理以及 Webhooks 和事件整合功能的樣板，那麼這就是您的範本。 優點： - SAML 單一登入 - 全面的角色和權限 - 專注於企業SaaS應用程式開發 缺點： - 更適合企業級應用程式，這對於較小的專案來說可能有點過分 - 一些即將推出的功能（例如計費和訂閱）尚未實現 ## 開放 SaaS 「***免費*具有超能力的 SaaS 範本」**   - 網站與示範：https://OpenSaaS.sh - Github：https://github.com/wasp-lang/open-saas Open SaaS 專注於建立一個功能齊全的開源 SaaS 樣板，它擁有您期望從付費模板中獲得的一切，包括整合的人工智慧。範例、為您的網站流量和收入統計配置的分析儀表板以及完整的文件和支援。 它由 Wasp 團隊為您帶來，這是一個全端 React / NodeJS / Prisma 框架，可透過設定檔為您管理功能。例如，這意味著您只需幾行程式碼即可“推出您自己的身份驗證”，因為 Wasp 會為您管理樣板檔案。 優點： - 利用Wasp進行全端開發，減少開發時間 - 擁有完整的文件和多元化且支持性的社區 - 與 OpenAI API 集成，並包含人工智慧驅動的應用程式範例 - 開箱即用的端到端類型安全 缺點： - 可能缺少一些更廣泛的 SaaS 應用程式功能，例如測試 - 依賴 Wasp，一個鮮為人知但高效能的全端框架 ## SaaS 入門套件   - 網站與示範：[https://www.saasstarterkit.com/](https://www.saasstarterkit.com/) - GitHub：[https://github.com/Saas-Starter-Kit](https://github.com/Saas-Starter-Kit) SaaS 入門套件是一個現代 SaaS 樣板，旨在建立具有免費/開源和專業/付費選項的全面 SaaS 解決方案。 這是一個簡單、乾淨的 UI，包含許多漂亮的 UI 元件，包括 Shadcn UI 分析儀表板元件。但不幸的是，您必須將它們與您自己的資料來源集成，因為大多數樣板都沒有管道。 目前它缺少很多配置，但看起來它在未來可能是一個有前途的模板 優點： - 提供免費版和專業版，使其能夠滿足多種需求 - 精心設計的 UI 元件，專門用於管理儀表板 缺點： - 具有增強功能的專業版不是免費的，這可能會讓一些用戶望而卻步 - 主要是內建Auth的UI元件集合，所以開發者還需要做很多工作 ## 下一個 SaaS Stripe 入門者   - 網站與示範：[https://next-saas-stripe-starter.vercel.app/](https://next-saas-stripe-starter.vercel.app/) - GitHub：https://github.com/mickasmt/next-saas-stripe-starter Next SaaS Stripe Starter 是一個簡單、乾淨的 SaaS 樣板，可利用現代、流行的工具。儘管它不像其他一些軟體那麼功能齊全，但由於使用了 Shadcn UI 和 Contentlayer，它看起來很漂亮，並且有一個時尚的部落格。一般來說，它處於良好的狀態，可以用作 SaaS 的基礎。 如果您正在尋找一個最小的 NextJS 模板並且可以進行大量自訂和功能開發，那麼這就是適合您的模板。 優點： - 看起來不錯並且利用了各種流行的工具。 - 它包括未來的更新，涵蓋成功訂閱和切換訂閱計劃的重新發送功能。 缺點： - 很少甚至沒有文件 - 不像其他模板那樣功能豐富。 ##六。結論與建議 雖然所有 SaaS Starter 都為您的專案提供了良好的基礎，但如果您正在開發企業級應用程式，請考慮 BOXYHQ。如果您正在尋找可立即投入生產的模板並希望快速交付，那麼 Open SaaS 將是理想的整體模板，而如果您正在建置簡單/微型 SaaS 並且想要現代設計美感，則 Next SaaS Stripe Starter 則適合您。 | | [BoxyHQ SaaS 入門套件](https://github.com/boxyhq/saas-starter-kit) | [開放SaaS](https://opensaas.sh) | [SaaS 入門套件](https://www.saasstarterkit.com/) | [下一個 SaaS Stripe 入門](https://next-saas-stripe-starter.vercel.app/) | | --- | --- | --- | --- | --- | | **適合** | 🏢 📈<br/>企業。對於需要 Teams 功能的應用程式 | 🧑💻🤖 <br/>獨立駭客和新創公司快速建立現代 (AI) 應用程式 | 🧑💻🔧 <br/>獨立駭客正在尋找優秀的 UI 元件集合 | 🧑💻🎨 <br/>獨立駭客正在尋找簡約、時尚的 SaaS 樣板。 | | **易於使用** | 6/10 <br/>複雜，以企業為中心。 | 8/10 <br/>精簡且快速。有據可查。 | 5/10 <br/>需要大量額外設定。 | 7/10 <br/>良好的基礎，但缺乏一些功能 | | **授權** |透過 Auth.js 驗證電子郵件、SAML SSO、Google、Github |電子郵件已驗證，Google，Github 透過 Wasp w/ Lucia |電子郵件、Google 透過 Auth.js |谷歌透過 Auth.js | | **管理儀表板** |限團隊管理 |內建和預先配置的網站和收入分析 |用於收入分析的 UI 元件（未配置） |無 | | **付款** |否（即將推出）|條紋| Stripe（+ Lemonsqueezy 付費版）|條紋| | **分析** |透過 Mixpanel 進行第 3 方（付費）|合理（免費、開源）或 Google | Vercel 分析（付費）| Vercel 分析（付費）| | **人工智慧.準備好了** |沒有 |內建 AI 支援 https://opensaas.sh (OpenAI API) |沒有 |沒有 | | **端對端類型安全性** |沒有 |是的 |沒有 |沒有 | | **電子郵件發送器** |郵件發送 | SendGrid、EmailGun 或 SMTP |重新發送 |重新發送 | | **內建部落格** |沒有 |是（透過 https://astro.build/）|否（付費版本，是）|是（透過 https://contentlayer.dev/）| | **造型** |順風|順風| Tailwind，Shadcn ui | Tailwind，Shadcn ui | | **使用者介面與設計** |基本 |款式好看|帶有漂亮 UI 元件的基本 |現代、時尚的造型| | **社區支持** | https://discord.gg/uyb7pYt4Pa | https://discord.gg/aCamt5wCpS | https://www.reddit.com/r/saas_kit/（發佈時沒有討論）|無 | | **文件** |基本 |非常詳細|基本 |可憐| | **演示應用程式** |無 | https://opensaas.sh | https://www.saasstarterkit.com/ | https://next-saas-stripe-starter.vercel.app/ | https://next-saas-stripe-starter.vercel.app/ --- 原文出處：https://dev.to/vincanger/best-free-open-source-saas-starters-for-react-nextjs-2024-4nbn
#RAG簡介 作為開發人員，您今天可以學到的最有價值的技能之一是學習如何使用大型語言模型 (LLM) 建立檢索增強生成 (RAG) 應用程式。 ## 為什麼？ 因為世界上有超過 64 ZB 的資料，這甚至不包括書籍或實體文件等實體資料。 （供您參考，1澤字節是一兆千兆位元組。） 不僅如此，全球90%的資料都是在過去兩年建立的，而且資料量每兩年就會翻倍。基本上，公司都在海量的資料中游泳，而且這些資料每天都在變得越來越大。 公司將如何存取和使用所有這些資料？ 現在每個人都聽說過使用檢索增強生成（RAG）來透過人工智慧尋找資訊。能夠存取和使用不斷增長的資料量是每個公司都需要的關鍵技能。 即使您知道 RAG 基本上是描述將文件或知識連結到 LLM 的工作流程的簡寫方式，許多開發人員自己（還）還沒有嘗試或試驗過這一點。 網路上充滿了圖書館列表，但如何開始呢？ 以下是幫助您開始使用 RAG 的最佳庫的簡短清單。 --- # 1. [LLMWare](https://github.com/llmware-ai/llmware) 在LLMWare中，您可以上傳文件，並透過幾行程式碼開始檢索資訊。它處理 RAG 所需的整個過程：文件攝取、解析、分塊、索引、嵌入、儲存到向量資料庫以及連結到 LLM 以檢索答案。 LLMWare 被設計為整合和端到端，因此所有這些步驟都可以開箱即用。它組裝了所有部件，因此您無需這樣做。 LLMWare 使其非常簡單且易於上手： - 只需幾行程式碼即可透過端到端範例實現 RAG 工作流程 - 建立庫並無縫載入文件 - 輕鬆產生嵌入 - 輕鬆進行語意搜尋 - 利用任何 Hugging Face 模型或 GPT-4 等封閉源模型來回答資料中的問題 - 範例包括無需 GPU 的 RAG 模型 https://github.com/llmware-ai/llmware  --- # 2. [MongoDB](https://github.com/mongodb/mongo) MongoDB 是一種廣泛使用的開源 NoSQL 資料庫程式。它屬於以文件為導向的資料庫類別，這意味著它以類似於 JSON 文件的格式儲存和組織資料。 MongoDB 的設計具有靈活性和可擴展性，使其適合各種應用程式和行業。 資料庫（如 MongoDB）是 RAG 中非常重要的一步，因為它們在嵌入之前儲存從文件或知識庫中提取的訊息，包括重要的元資料。 https://github.com/mongodb/mongo  --- # 3. [Milvus 向量資料庫](https://github.com/milvus-io/milvus) Milvus 是一個開源向量資料庫，旨在為嵌入相似性搜尋和人工智慧應用程式提供支援。 Milvus 讓非結構化資料搜尋更容易存取，無論部署環境如何，都可以提供一致的使用者體驗。 Milvus DB，或類似的向量 DB，是 RAG 中至關重要的一步。它是存儲向量嵌入以進行相似性搜尋的地方。該資料庫允許人們用自然語言提出問題並檢索相關結果。如果沒有良好的嵌入和向量資料庫，LLM 模型將無法接收正確的文字區塊來讀取。 https://github.com/milvus-io/milvus  --- # 4. [擁抱臉](https://github.com/huggingface) 如果你還沒去過 Hugging Face，你真的應該去看看。這是所有開源模型的去處，並且可以單槍匹馬地將世界從人工智慧壟斷中拯救出來。就像 Github 用於開源專案一樣，Hugging Face 用於開源模型。有超過 450,000 個模型，所有模型都免費供任何想要使用它們的人使用。 Hugging Face 的 Transformers 庫是首選庫 提供數千個預訓練模型來執行不同模式（例如文字、視覺和音訊）的任務。 這些模型可應用於： - 文本，用於文本分類、資訊提取、問答、摘要、翻譯和文本生成等任務，支援 100 多種語言。 - 影像，用於影像分類、物件偵測和分割等任務。 - 音頻，用於語音辨識和音頻分類等任務。 Transformer 模型還可以組合執行多種模式的任務，例如表格問答、光學字元辨識、從掃描文件中提取資訊、視訊分類和視覺問答。 https://github.com/huggingface  --- #5. [Llama.cpp](https://github.com/ggerganov/llama.cpp) 沒有GPU？沒問題！ Llama.cpp 來救援！ llama.cpp 的主要目標是在 MacBook 上使用 4 位元整數化來執行 LLaMA 模型。 * 無依賴的純 C/C++ 實現 * Apple Silicon 一等公民 - 透過 ARM NEON、Accelerate 和 Metal 框架進行最佳化 * 對 x86 架構的 AVX、AVX2 和 AVX512 支持 * 混合F16/F32精度 * 支援2位、3位、4位、5位、6位和8位整數化 * CUDA、Metal 和 OpenCL GPU 後端支持 一旦量化，更大的模型就可以在 CPU 上執行，而效能損失很小。尋找 GGUF 版本的模型來嘗試使用 LLMWare 或其他 RAG 工作流程。 https://github.com/ggerganov/llama.cpp  --- 這是幫助您開始使用 RAG 的非常基本的概述。如果您想要一個讓所有這些庫無縫協作的一站式整合解決方案，請造訪 LLMWare 的 GitHub 庫，找到 50 多個優秀範例來幫助您入門。 [在不和諧中找到我們](https://discord.gg/fCztJQeV7J) - 我們很樂意聽到您的來信！ --- 原文出處：https://dev.to/llmware/top-5-beginner-friendly-open-source-libraries-for-rag-1mhb
### 讓我們開始吧！ 🚀 將網站丟入野外網路是一件大事，因此確保首先加強每個細節是關鍵。 我的意思是，您想確保您的網站在手機和平板電腦上看起來很流暢，而不僅僅是桌上型電腦（響應能力）。並且您希望真實的人也能夠找到並使用您的網站（SEO）。 我列出的這份清單列出了 14 項必須做的事情 - 涵蓋可用性、可存取性、SEO 優化、出現問題時的備份計劃、確保事物安全的 SSL 以及使用 CDN 加快加載時間等內容。 所有需要檢查的關鍵框，以便您的網站在發佈到世界各地之前被鎖定和加載。 🌐  *** ### 簡介⏱️ - 反應能力📱 - 輔助使用♿ - 可用性👍 - 加載時間短⏱️ - SSL 憑證🔒 - 優化圖片🌅 - 使用後備🔄 - 仔細檢查連結和表格✔️ - 404 頁面與圖示 🚫🤔 - 縮小檔案📦 - 專業領域🌐 - 這個🔍 - 使用 CMS 🖥️ - 額外提示🎁 *** ### 1. 回應能力📱💻 如今，使您的網站響應式是網頁開發的重要組成部分。確保您的網站在筆記型電腦、桌上型電腦、手機和平板電腦上看起來不錯。 使用每種流行的瀏覽器測試您的網站。它需要與所有瀏覽器的最新版本相容。 您永遠無法知道某些使用者將使用什麼裝置和瀏覽器來造訪您的網站。 至少會有人嘗試在裝有過時版本三星瀏覽器的舊 Galaxy S3 上執行它。 📲 *** ### 2. 輔助功能 ♿ 網路可存取性是指設計和開發殘疾人可以使用的網站和技術。 簡而言之，網站應該可供所有人存取，這意味著即使是殘疾人也應該理解、導航並與之互動。 開發網站時應考慮許多因素。 其中一些是：加入鍵盤導航、使用 ARIA 角色、在文字和背景之間使用足夠的顏色對比度、向所有圖像加入替代文字以及為連結使用描述性名稱。 🌐 *** ### 3.可用性👍 可用性衡量特定使用者如何有效地使用網站來實現既定目標。 確保您的網站易於使用。使用者應該能夠快速、輕鬆地找到他需要的東西。 您需要像訪客一樣查看網站上的每個元素。文字應該易於在行動裝置和其他標準設備上閱讀，並且您應該使導航清晰且易於理解。 您網站的兩個版本上的內容應該相同。 🕵️♂️ *** ### 4.載入時間短⏱️ 網站頁面載入速度是您應該考慮的最重要的事情之一。 你不應該讓你的用戶等待很長時間；您網站的使用者體驗變得很糟糕。 您的網站應該盡快加載，而且網站速度已成為當今 SEO 的首要任務之一。 🚀 *** ### 5.SSL憑證🔒 SSL 代表安全通訊端層。 SSL 憑證可讓您使用 HTTPS 進行安全資料傳輸，並將確保您的網站經過加密，以便駭客無法攔截您的任何資料。 這不僅會讓您的訪客放心，而且還會提高您網站的搜尋引擎優化 (SEO)，因為 SSL 現在是 Google 搜尋演算法的一部分。 🔐 *** ### 6.優化圖片🌅 無論您的網站如何優化，圖像始終是頁面上加載最慢的元素之一。 因此，優化網站上的圖像至關重要。 最好避免使用 TIFF 或 BMP 影像，而堅持使用 JPEG 和 PNG。 另外，您應該避免空圖像 src 程式碼行。在部署您的網站之前，跨網頁優化您的圖片；否則，將會影響您的頁面載入時間。 📸 *** ### 7. 使用後備。確保使用後備 🔄 「後備」只不過是在瀏覽器無法呈現特定 HTML 標記、CSS 屬性或腳本時向瀏覽器提供的附加選項。 回退最常與 HTML5 標籤和 CSS3 屬性一起使用，這兩個屬性都是新的，並且在某些瀏覽器中可能不完全支援。 🛡️ *** ### 8. 仔細檢查所有連結和表格 ✔️ 在部署網站之前，請務必檢查所有連結、按鈕、表單等。它們是否正常運作？ 經常發生這樣的情況：開發時有效的連結在生產中部署後可能無效。 按鈕和表單也是如此。始終檢查是否有損壞的連結和文件。 🚫🔗 *** ### 9. 404，網站圖示。 🚫🤔 404 頁面很重要，因為訪客可能會輸錯或點擊錯誤的連結，因此您不希望存取者看到難看的錯誤警告。 確保您已在網站上設定自訂 404 頁面以防止這種情況發生。 🚧 *** ### 10.縮小檔案📦 縮小是最小化網頁和腳本檔案中的程式碼和標記的過程。 這是減少網站載入時間和頻寬使用的主要方法之一。 主要目標是刪除冗餘或不必要的資料，例如間距和註釋。 🧹 *** ### 11.專業領域🌐 如果您希望您的網站看起來專業，請購買專業網域。 不要使用「.netlify.app」、「.vercel.app」等網域。 許多初學者買不起專業域名，但專業域名總是看起來比子域名更好。 💼 *** ### 12.這個🔍 SEO 是您應該關心的最重要的主題之一。 SEO 可以提高您網站在搜尋結果中的排名。 而且，獲得高排名的主要目的是吸引更多流量並將流量轉化為客戶。 📈 *** ### 13. 使用 CMS 🖥️ CMS 代表內容管理系統。 如果您使用CMS，您可以輕鬆更改CMS中的任何內容，而無需重複編輯程式碼。 使用 CMS 的另一個好處是，如果您的網站內容是由非技術人員建立和編輯的，他們需要有一個良好的 GUI 介面。 🤖 *** ### 14.額外提示🎁 - 確保您的網站沒有任何重大漏洞。 🛡️ - 將腳本放在底部。將樣式表放在頂部。 📜 - 使用 CDN（內容傳遞網路）。 🌐 - 避免重定向。 🔄 - 使用快取。 🔄 *** ### 總結🌟 準備好將您的網站推向世界了嗎？我感覺到你了。很嚇人但很刺激！當您為發布日做準備時，請牢記這 14 件事，它們將幫助您建立一個由內而外令人驚嘆的網站。 有很多事情需要考慮，但為了創造出令你自豪的東西是值得的。只要不斷改進即可。 你的網站從未真正完成， 將其視為一個有生命、不斷進化的事物！ 🌱 與我聯絡：[Linktree](https://linktr.ee/arjuncodess/) 我希望這篇文章對您有所幫助❤️ 快樂編碼！ 🚀 感謝11671！ 🤗 --- 原文出處：https://dev.to/arjuncodess/14-things-to-check-before-deploying-a-website-49ee
如標題所示，在這篇文章中，我們將介紹您可以學習並用作下一個專案起點的開源 Web 應用程式。堅持到最後，因為那裡有超酷的獎勵等著你！ 在我們開始討論之前，先說幾句智慧之言（希望如此）： ## （開源）榜樣的重要性  **從頭開始一個新專案時，您可以做的最有幫助的事情之一就是選擇一個或多個角色模型。**例如，如果您正在建立一個新的生產力應用程式，您可能會關注Trello 等產品或體式。當然，您的應用程式不會相同，並且您可能會想到一些使您的應用程式獨一無二的核心差異，但仍然會有很多您不想重新發明的共享概念和機制。 即使您的角色模型是一個閉源應用程式，您仍然可以透過在野外觀察它來獲得很多價值 - 設計元素、UI、用戶旅程和使用的術語，... **但是現在想像一下，如果您決定學習的應用程式是開源的，並且您可以輕鬆地在 GitHub 上存取其完整原始程式碼 - 這將打開一個全新的可能性世界！** 接下來只需從“外面」並猜測幕後發生了什麼，現在您可以看到每一個細節並了解所做的每一個決定。架構、部署、API 設計、庫和使用的演算法 - 一切都在那裡供您查看！ ## 注意規模（也就是不要過度設計） 另一件需要記住的事情是您的專案目前所處的階段。下面，我們將看到開源 SaaS 應用程式的不同範例，從獨立駭客、「週末建置」副專案到企業級 Web 平台。 **儘管您可能會發現擁有數百萬用戶的專案是一個令人驚嘆的學習資源，但請記住，並非他們所做的一切都是您必須嚴格遵循的。由於他們每天遇到的用戶規模和數量龐大**，他們的架構和設計決策通常會更加複雜。如果您剛開始，最好堅持使用最簡單（但仍然合理）的方法，直到您希望需要更高級的方法。 > 從現在開始，對於我們提到的每個應用程式，我們將使用“T 卹尺寸”方法（S、M、L...），讓您大致了解其尺寸和複雜性（無論是在功能還是功能方面）。使用者。 現在，前言結束了，讓我們一起來看看一些令人驚嘆的開源應用程式，您可以立即開始學習：  ## [CoverLetterGPT](https://coverlettergpt.xyz/) - 人工智慧驅動的 SaaS 的完美起點 💾 **原始碼**：https://github.com/vincanger/coverlettergpt 👕 **尺寸**：S **🛠️ Stack**：Chakra UI、React、Node.js 和 Prisma，由 [Wasp](https://github.com/wasp-lang/wasp) 提供支持 [CoverLetterGPT.xyz](http://CoverLetterGPT.xyz) 是每個獨立駭客的夢想- **它是一個由GPT 支援的SaaS，完全開源，最重要的是，它是人們每天使用並付費的真實產品為了**！根據您的履歷和職位描述，該工具將產生一封專業撰寫的求職信。然後，您可以進一步調整每個段落的語氣或手動編輯。 它非常適合學習，因為它不太大，架構也很簡單，但它具有應用程式中可能需要的所有功能 - 社交身份驗證 (Google)、cron 作業、文件上傳、GPT 集成、透過 Stripe 進行支付集成，甚至可以透過比特幣付款！ CoverLetterGPT 由 React、Node.js 和 Prisma 製成，由 [Wasp 框架](https://github.com/wasp-lang/wasp) 提供支持，它負責所有管道並刪除大量樣板檔案。 **最好的部分是，當您準備好時，可以透過執行單一 CLI 命令來免費部署應用程式**：「wasp deploy」。 <center><h3>🚨注意🚨</h3></center> > 提示：Wasp 團隊最近發布了 [OpenSaaS](https://kdta.io/github-wasp-lang-open_3)，**一個完全免費且開源的 React 和 Node.js 樣板啟動器**。它包含提到的所有內容 + Tailwind、管理儀表板、登陸頁面、部落格等。 [在此處查看](https://kdta.io/github-wasp-lang-open_4) 以更快地開始使用。 ## Supabase Studio - 儀表板傑作🖼️  💾 **原始碼**：https://github.com/supabase/supabase/tree/master/apps/studio **👕 尺寸**：M/L **🛠️ 堆疊：** Next.js (React)、Tailwind [Supabase](https://supabase.com/) 是一個著名的開源專案，其核心是用 Elixir 編寫的。但是，由於我們在本文中專注於 Web 應用程式，因此我們將看一下 **Supabase Studio - 一個儀表板，您可以在其中查看和管理所有專案。它本身就是一部傑作，而且完全開源！** 該設計是使用 Tailwind 定制的，您可能希望在自己的專案中重複使用許多元素 - 用戶管理、表格、列表等。它還有自己的 AI 集成，用於編寫 SQL 查詢，效果出奇的好。 ## Papermark - 開源 DocSend 替代方案 ✉️  💾 **原始碼**：https://github.com/mfts/papermark 👕 **尺寸**：M **🛠️ 堆疊**：Next.js (React)、Tailwind、Prisma [Papermark](https://github.com/mfts/papermark) 最近受到社群的廣泛喜愛，尤其是其簡潔的設計和直覺的介面。雖然從外觀上看起來很簡單，但該應用程式包含許多功能，使一切順利執行：文件上傳、電子郵件發送、內建分析和自訂網域... **如果您正在建立涉及大量文件管理和使用者協作的專案**，這絕對是您應該考慮的專案。 ## [Crowd.dev](http://Crowd.dev) - 開發社群資料平台，使用 Vue 製作 📊👩💻  💾 **原始碼**：https://github.com/CrowdDotDev/crowd.dev **👕 尺寸**：M **🛠️ 堆疊：** Vue、Node.js [Crowd.dev](http://Crowd.dev) 是 GitHub 最新的後起之秀之一 - 它是一個用於監控社區活動的平台，無論是在 Slack 還是 Discord 上。如果您正在經營自己的開發者社區，那麼這樣的工具是必須具備的，以便了解正在發生的事情以及最活躍的成員是誰。 它在儀表板方面提供了很多功能，但它的另一個強項是**集成 - 如果您正在建置一個從外部源獲取和處理大量資料的應用程式，那麼這是您的首選角色模型**。如果你是 Vue 愛好者，那就加分了，因為這個專案就是用它製作的！ ## Habitica - 作為角色扮演遊戲的習慣追蹤器🐲⚔️  💾 **原始碼**：https://github.com/HabitRPG/habitica **👕 尺寸**：L **🛠️ 堆疊：** Vue、Bootstrap、SAAS、Node.js、MongoDB [Habitica](https://habitica.com/) 是我見過的最酷的網頁應用程式之一（他們也有 iOS 和 Android 應用程式） - 它可以幫助您透過角色扮演遊戲！想像 Trello 這樣的看板，但對於您完成的每項任務，您都可以獲得 XP 和金幣，甚至可以與朋友組隊接受任務。 Habitica 已經存在 10 年了，它通過 Vue、Node.js/Express 和 MongoDB 的經典堆疊完美地經受住了時間的考驗。 **如果您想了解建立了多麼豐富的互動式 UI，以及執行這種規模的專案需要什麼樣的架構，那麼這個應用程式絕對值得一試。**誰知道，您甚至可能最終成為居住自己！ ## 🏆 **獎勵** 🏆 Appflowy - Rust 和 Flutter 中的概念替代品 🤯  💾 **原始碼**：https://github.com/AppFlowy-IO/AppFlowy **👕 尺寸**：M **🛠️ 堆疊：** Flutter、Rust 如果您走到這一步，您應該得到特別的待遇！這不是一個網絡應用程式，但它太酷了，我無法控制自己 - 它是**一個用 Rust 和 Flutter 建置的 Notion 替代品（因此可以做筆記）**！由於其本地優先的性質，用戶體驗非常流暢，並且它還將所有內容同步到雲端（如果您願意，您可以自行託管）。 **如果您一直在使用 Rust，但也在尋找一個可以每天使用的專案，Appflowy 可能是完美的選擇。** 它擁有從資料儲存到業務邏輯和 UI 的所有內容，全部都包含在其中一個包供您學習並查看您認為最有趣的內容。 ## 就是這樣！我很想聽聽你的訊息🫵  這就是我們今天的全部內容（*放下麥克風*），非常感謝您的閱讀！我希望您發現它有用和/或有趣。 我在撰寫本文時遇到了很多開源 Web 應用程式，很難只選擇其中 5 個。 **現在，我很想聽聽您的來信 - 您最喜歡的開源應用程式是什麼，以及您如何使用它們？寫在下面的評論👇** 謝謝您，下次再見！ 👋 --- 原文出處：https://dev.to/matijasos/5-beautiful-open-source-web-apps-to-learn-from-and-get-inspired-280f
對外行人來說，**K8s 代表Kubernetes**，數字8 代表**K** 和**s 之間的八個字母。** Kubernetes 在當前的技術環境中幾乎不可避免，但仍然不受歡迎，因為它的複雜性和陡峭的學習曲線。 基於終端的交互在這個故事中發揮著重要作用。如果您曾經有幸觀看一位經驗豐富的 DevOps 使用 Kubernetes 集群工作的方式，您可能會像看一位經驗豐富的武術家展示他的戰鬥技巧一樣看待他。這是因為透過終端完成的所有事情總是看起來更可怕，似乎需要多年的培訓。 🥋 現在的問題是：我們怎麼能讓這樣一個複雜的問題（甚至它的名字還被美化了）變得更有趣呢？好吧，以同樣的方式，我們讓一切變得更愉快 → 讓它變得更容易，讓它更漂亮！ 🎀 你可能會問，你會怎麼做呢？具有**圖形使用者介面**或簡稱 GUI！讓我們來看看在處理 Kubernetes 時為您提供使用者介面的**五個工具**。 ### 向我們展示您的支持🙏🏻  在開始之前，我們想提一下，我們已經安排了 [Product Hunt 的首次發布](https://www.producthunt.com/products/cyclops)！點擊“通知我”按鈕，以便在我們外出並準備好接收您的回饋時收到提醒 🔔 如果您為我們的[儲存庫](https://github.com/cyclops-ui/cyclops)加註星標並幫助我們在其他開發人員面前獲得我們的工具，我們將非常高興 ⭐ ## Kubernetes 儀表板 讓我們深入了解 **Kubernetes 管理的精髓工具** – [**Kubernetes 儀表板**](https://kubernetes.io/docs/tasks/access-application-cluster/web-ui-dashboard/)。它會自動與您的叢集捆綁在一起，提供 Kubernetes 環境的圖形概覽。您可以使用它來概覽叢集上執行的應用程式、將容器化應用程式部署到 Kubernetes 叢集以及管理叢集資源。 Kubernetes 儀表板不僅提供概述，還有助於排除故障。它提供對 Kubernetes 資源運作狀況的洞察，突出任何操作錯誤。 透過它，您還可以部署應用程式。您可以使用您編寫的清單或透過您剛剛填寫的表單來完成此操作。但是，值得注意的是，該表單雖然用戶友好，但缺乏基本範例之外的自訂靈活性。 雖然 K8s 儀表板是**萬能**，但許多人發現它是一個多面手，缺乏深入的功能。這種限制鼓勵我們探索更多工具，每種工具都是為特定目的而設計的，因此我們透過我們探索過的工具清單開始我們的旅程。  ##K9s 透過終端探索集群時，[**K9s**](https://k9scli.io/) 是你最好的朋友（明白了嗎？🐶）。它與 Vim 的互動風格有共同點，即使用快捷鍵和以 `:` 開頭的命令，但不要因此而洩氣。 K9s 密切關注 Kubernetes 活動，為資源互動提供**即時**資訊和直覺的命令。 它幾乎可以取代標準的“kubectl”，並且在與 Kubernetes 互動時不需要您身邊有“備忘單”。您只需選擇資源並深入到最低級別即可遍歷資源。這樣可以輕鬆提取日誌並存取其外殼。 K9s 可讓您查看每個資源的清單，並能夠編輯和套用變更。正如我所提到的，它**幾乎**取代了“kubectl”。區別之一是您**無法**透過 K9 部署新資源。 K9s 具有過濾資源並使用「/」指令進行搜尋的功能，可以更輕鬆地在資源海洋中找到您要尋找的資源或透過特定 pod 的日誌進行過濾。 螢幕頂部隨時可以使用的命令和快捷方式清單是一個不錯的設計，它的皮膚和插件自訂為您提供了額外實用程式的空間。  ## 獨眼巨人 如果您在處理清單檔案時遇到困難，[**Cyclops**](https://cyclops-ui.com/) 就是適合您的工具！ Cyclops 透過將清單轉換為基於 Web 的結構化形式，消除了處理清單時的混亂和複雜性，從而消除了手動配置和命令列互動的需要。 這使得具有不同技術專業知識水平的個人**更容易理解**部署過程。 在 Cyclops 的架構中，核心元件是 [Helm](https://helm.sh/) 引擎。 Helm 在 Kubernetes 社群中非常受歡迎；很可能你已經遇到過它。 Helm 的流行因其簡單的整合而發揮了 Cyclops 的優勢。  有了 Cyclops，您就不再局限於一刀切的方法。 **您可以自訂表單以滿足您的獨特需求。** 例如，團隊成員可以產生 Helm 圖表，讓其他人可以使用 Cyclops 定義必要的值，以實現輕鬆的應用程式部署。 一旦您聲明了應用程式的所需狀態，部署它就像單擊按鈕一樣簡單。此外，一旦部署應用程式，也可以透過 Cyclops 輕鬆更改所需狀態。 在 Cyclops 中，每個應用程式都列出了它使用的資源的詳細清單 - 部署、服務、pod 等，所有這些都在簡單的視圖中。您可以輕鬆追蹤它們的狀態，幫助您快速發現並修復應用程式中的任何問題。這就像有一個清晰的路線圖來導航和解決出現的任何問題。  ## 開發空間 考慮每次儲存程式碼時自動刷新本機伺服器的便利性和節省時間，從而提供程式碼變更的即時視覺化。 想像一下將這種流暢的體驗進一步應用到 Kubernetes 叢集中； [**DevSpace**](https://www.devspace.sh/) 讓這一切成為可能。借助 DevSpace，您可以在編碼過程中**即時部署應用程式**，從而促進快速迭代。 DevSpace 透過自動將變更套用到 K8s 叢集來簡化流程，而無需整個映像建置和部署管道。它在本地建立映像，而不將其推送到註冊表，儘管在開發過程中需要它的人可以使用自動推送映像的選項。 此外，DevSpace 具有一個使用者介面，雖然有些限制，但可以快速概述叢集中的所有 Pod。它允許您**輕鬆存取 Pod 日誌，甚至直接在其中執行命令**，從而增強您的開發工作流程。 儘管我專注於本地開發，但 DevSpace 也用於建立工作流程。您的所有工作流程都保存在一個檔案中，從而可以使用單一「devspace deploy」命令輕鬆在任何電腦上重現環境。  ## 庫貝前一個 與本文中提到的其他工具不同，[**Kubevious**](https://kubevious.io/) 無法更改叢集狀態。它僅用作可觀察性工具，重點關注集群中的潛在問題。它突出顯示了您可能執行的每種資源的潛在威脅和風險。 圖形視圖提供對容器、網路、暴露、RBAC 和 Helm 圖表的深入了解，以進行直觀的故障排除。 Kubevious 有一個**規則引擎**，有助於偵測並防止錯誤配置。它附帶了開箱即用的規則，但它也允許您建立自訂規則（例如，「不允許圖像位於*最新*標籤上」）。 它還配備了很酷的**時間機器**功能，允許用戶回到過去、審核應用程式、根本原因中斷和恢復清單，確保完全了解叢集歷史記錄。 我不得不提一下它提供的**全文**搜尋！您可以搜尋任何資源，而無需知道其特定名稱。一個很好的例子是，只需輸入「*port 3000*」即可搜尋使用特定連接埠的任何資源，Kubevious 就會找到您的資源。  ## 最後的想法 為了增強 Kubernetes 體驗，我們推出了五個令人愉悅的工具，每個工具都有其獨特的魅力，讓您的旅程更加順暢和愉快。 這些並不是為 Kubernetes 提供 UI 的唯一工具，但我們希望專注於一些可能不太知名的工具。 所有這些工具都是開源的，所以請嘗試一下；他們是免費的！ 我想用一個針對讀者的問題來結束這篇文章：您對 Kubernetes 的圖形表示有何看法？是否需要，或者「kubectl」是否佔據主導地位？ --- 原文出處：https://dev.to/cyclops-ui/five-tools-to-make-your-k8s-experience-more-enjoyable-5d85
## 您會在本文中找到什麼？ 電子郵件通知是讓使用者了解應用程式所執行操作的最常用方法。典型的通知包括：有人追蹤您、有人喜歡您的貼文、有人查看了您的內容。在這篇文章中，我們將探索如何使用 Next.js、Resend 和 Trigger.dev 建立一個簡單的非同步電子郵件通知系統。 我們將使用 Next.js 作為框架來建立我們的應用程式。我們將使用 Resend 發送電子郵件，並使用 Trigger.dev 非同步卸載和發送電子郵件。  ## Papermark - 開源 DocSend 替代品。 在我們開始之前，讓我與您分享 Papermark。它是 DocSend 的開源替代方案，可幫助您安全地共享文件並從查看者那裡獲取即時的逐頁分析。全部都是開源的！ 如果您能給我們一顆星星，我會非常高興！別忘了在留言區分享你的想法❤️ [https://github.com/mfts/papermark](https://github.com/mfts/papermark) [](https://github.com/mfts/papermark) ## 設定專案 讓我們繼續為我們的電子郵件後台通知系統設定專案環境。我們將建立一個 Next.js 應用程式，並設定為重新發送，最重要的是，設定觸發器來處理非同步電子郵件通知。 ### 使用 TypeScript 和 Tailwindcss 設定 Next.js 我們將使用「create-next-app」產生一個新的 Next.js 專案。我們還將使用 TypeScript 和 Tailwind CSS，因此請確保在出現提示時選擇這些選項。 ``` npx create-next-app # --- # you'll be asked the following prompts What is your project named? my-app Would you like to add TypeScript with this project? Y/N # select `Y` for typescript Would you like to use ESLint with this project? Y/N # select `Y` for ESLint Would you like to use Tailwind CSS with this project? Y/N # select `Y` for Tailwind CSS Would you like to use the `src/ directory` with this project? Y/N # select `N` for `src/` directory What import alias would you like configured? `@/*` # enter `@/*` for import alias ``` ### 安裝重新傳送和 React-Email Resend 是開發人員優先的事務性電子郵件服務。我們將使用它向我們的用戶發送電子郵件。 `react-email` 是一個 React 元件庫，可以輕鬆建立漂亮的電子郵件。 ``` npm install resend react-email ``` ### 安裝觸發器 Trigger 是 TypeScript 的後台作業框架。它允許您從主應用程式中卸載長時間執行的任務並非同步執行它們。我們將使用它非同步發送電子郵件。 觸發器 CLI 是在新的或現有的 Next.js 專案中設定觸發器的最簡單方法。有關更多訊息，請查看[他們的文件](https://trigger.dev/docs/documentation/quickstarts/nextjs)。 ``` npx @trigger.dev/cli@latest init ``` ## 建立應用程式 現在我們已經完成了設置，我們準備開始建立我們的應用程式。我們將介紹的主要功能是： - 設定重新發送電子郵件 - 編寫API路由來發送電子郵件 - 新增觸發器作業以使電子郵件發送非同步 ### #1 設定重新傳送電子郵件 首先，我們需要設定重新發送來發送電子郵件。我們將在專案中建立一個新檔案「resend-notification.ts」並新增以下程式碼。 ``` // lib/emails/resend-notification.ts import { Resend } from "resend"; import { NotificationEmail } from "@/components/emails/notification"; const resend = new Resend(process.env.RESEND_API_KEY!); export async function sendNotificationEmail({ name, email, }: { name: string | null | undefined; email: string | null | undefined; }) { const emailTemplate = NotificationEmail({ name }); try { // Send the email using the Resend API await resend.emails.send({ from: "Marc from Papermark <[email protected]>", to: email as string, subject: "You have a new view on your document!", react: emailTemplate, }); } catch (error) { // Log any errors and re-throw the error console.log({ error }); throw error; } } ``` 使用「react-email」的通知電子郵件範本將如下所示： ``` // components/emails/notification.tsx import React from "react"; import { Body, Button, Container, Head, Heading, Html, Preview, Section, Text, Tailwind, } from "@react-email/components"; export default function ViewedDocument({ name, }: { name: string | null | undefined; }) { return ( <Html> <Head /> <Preview>See who visited your document</Preview> <Tailwind> <Body className="bg-white my-auto mx-auto font-sans"> <Container className="my-10 mx-auto p-5 w-[465px]"> <Heading className="text-2xl font-normal text-center p-0 mt-4 mb-8 mx-0"> <span className="font-bold tracking-tighter">Papermark</span> </Heading> <Heading className="mx-0 my-7 p-0 text-center text-xl font-semibold text-black"> New Document Visitor </Heading> <Text className="text-sm leading-6 text-black"> Your document was just viewed by someone. </Text> <Text className="text-sm leading-6 text-black"> You can get the detailed engagement insights like time-spent per page and total duration for this document on Papermark. </Text> <Section className="my-8 text-center"> <Button className="bg-black rounded text-white text-xs font-semibold no-underline text-center" href={`${process.env.NEXT_PUBLIC_BASE_URL}/documents`} style={{ padding: "12px 20px" }}> See my document insights </Button> </Section> <Text className="text-sm"> Cheers, <br /> The Papermark Team </Text> </Container> </Body> </Tailwind> </Html> ); } ``` ### #2 撰寫API路由發送電子郵件 現在，我們已經準備好了電子郵件範本。我們可以使用它向我們的用戶發送電子郵件。我們將建立一個無伺服器函數，該函數會取得使用者的“姓名”和“電子郵件”，並使用我們之前建立的“sendNotificationEmail”函數向他們發送電子郵件。 ``` // pages/api/send-notification.ts import { NextApiRequest, NextApiResponse } from "next"; import prisma from "@/lib/prisma"; import { sendViewedDocumentEmail } from "@/lib/emails/resend-notification"; export const config = { maxDuration: 60, }; export default async function handle( req: NextApiRequest, res: NextApiResponse ) { // We only allow POST requests if (req.method !== "POST") { res.status(405).json({ message: "Method Not Allowed" }); return; } // POST /api/send-notification try { const { viewId } = req.body as { viewId: string; }; // Fetch the link to verify the settings const view = await prisma.view.findUnique({ where: { id: viewId, }, select: { document: { select: { owner: { select: { email: true, name: true, }, }, }, }, }, }); if (!view) { res.status(404).json({ message: "View / Document not found." }); return; } // send email to document owner that document await sendViewedDocumentEmail({ email: view.document.owner.email as string, name: view.document.owner.name as string, }); res.status(200).json({ message: "Successfully sent notification", viewId }); return; } catch (error) { console.log("Error:", error); return res.status(500).json({ message: (error as Error).message }); } } ``` ### #3 新增觸發器作業，使電子郵件傳送非同步 我們的電子郵件發送功能已準備就緒，但我們不想同步發送電子郵件，因此要等到電子郵件發送後應用程式才會回應使用者。我們希望將電子郵件傳送任務轉移到後台作業。我們將使用觸發器來做到這一點。 在設定中，Trigger CLI 在我們的專案中建立了一個「jobs」目錄。我們將在該目錄中建立一個新檔案“notification-job.ts”並新增以下程式碼。 ``` // jobs/notification-job.ts import { client } from "@/trigger"; import { eventTrigger, retry } from "@trigger.dev/sdk"; import { z } from "zod"; client.defineJob({ id: "send-notification", name: "Send Notification", version: "0.0.1", trigger: eventTrigger({ name: "link.viewed", schema: z.object({ viewId: z.string(), }), }), run: async (payload, io, ctx) => { const { viewId } = payload; // get file url from document version const notification = await io.runTask( "send-notification", async () => { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/send-notification`, { method: "POST", body: JSON.stringify({ viewId }), headers: { "Content-Type": "application/json", }, } ); if (!response.ok) { await io.logger.error("Failed to send notification", { payload }); return; } const { message } = (await response.json()) as { message: string; }; await io.logger.info("Notification sent", { message, payload }); return { message }; }, { retry: retry.standardBackoff } ); return { success: true, message: "Successfully sent notification", }; }, }); ``` 將匯出新增至作業索引文件，否則觸發器將不知道該作業。雖然是小細節，但連我都忘記了這一點，並花了一個小時尋找錯誤。 ``` // jobs/index.ts export * from "./notification-job"; ``` ### 獎勵：防止惡意存取 API 路由 我們已準備好 API 路由，但我們不想允許任何人存取它。我們希望確保只有我們的應用程式可以存取它。我們將使用一個簡單的標頭身份驗證金鑰來做到這一點。 在觸發器作業中，我們將標頭加入到請求中： ``` // jobs/notification-job.ts .. ... const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/jobs/send-notification`, { method: "POST", body: JSON.stringify({ viewId }), headers: { "Content-Type": "application/json", Authorization: `Bearer ${process.env.INTERNAL_API_KEY}`, // <- add the authenication header with a local env variable }, }, ); ... .. ``` 在 API 路由中，我們將在「try {} catch {}」區塊之前檢查 API 金鑰是否符合： ``` // pages/api/send-notification.ts .. ... // Extract the API Key from the Authorization header const authHeader = req.headers.authorization; const token = authHeader?.split(" ")[1]; // Assuming the format is "Bearer [token]" // Check if the API Key matches if (token !== process.env.INTERNAL_API_KEY) { res.status(401).json({ message: "Unauthorized" }); return; } ... .. ``` 確保將“INTERNAL_API_KEY”新增至“.env”檔案中。 ``` # .env INTERNAL_API_KEY="YOUR_API_KEY" ``` ## 結論 瞧！我們已經準備好非同步電子郵件通知系統。我們現在可以非同步向用戶發送電子郵件，而不會影響用戶等待時間。我們還可以使用觸發器從主應用程式中卸載許多我們不希望用戶等待的其他任務。 感謝您的閱讀。我是 Marc，開源倡導者。我正在建立 [papermark.io](https://www.papermark.io) - DocSend 的開源替代品。 繼續編碼！ ## 幫幫我！ 如果您覺得這篇文章有幫助，並且對觸發器和後台任務有了更好的理解，如果您能給我們一顆星，我將非常高興！別忘了在評論中分享你的想法❤️ [https://github.com/mfts/papermark](https://github.com/mfts/papermark)  --- 原文出處：https://dev.to/mfts/building-background-email-notifications-with-nextjs-resend-and-triggerdev-4cem
我自 2019 年以來一直是 Web 開發人員。我使用 React.js 和基於 React 的框架，如 Gatsby、Next、Remix、Astro 和 Hydrogen。我從來沒有對這些工具感到完全滿意，但是，作為一個深入 JS 生態系統的初學者，我從同行那裡聽到的都是這樣的話：「這就是方式，任何其他程式語言要么慢，要么老」。  結果，我習慣了巨大的複雜性：多個獨立的儲存庫、數千個函式庫和框架來實現簡單的事情、GraphQL、微服務、無伺服器、靜態網站產生、增量靜態再生、部分水化、 redux 、redux-thunk、babel、webpack、react 伺服器元件、伺服器操作等。這個清單還可以再持續 10 分鐘。 直到有一天我說**受夠了！** 讓我們來看看我慢慢發瘋的完整時間線。這需要一段時間，在閱讀長篇文章之前，請隨意煮點咖啡！ --- ## 倦怠的時間表 ### [Gatsby.js](https://www.gatsbyjs.com/) 我記得完成我的訓練營並想：“我終於能夠建立我的作品集了！”，所以我做到了。只有一個小問題，我想在 Google 上建立索引，但是使用舊的「create-react-app」使這項任務幾乎不可能完成。很快我了解了 SEO 和 React 的水合循環，這讓我找到了這個問題的「解決方案」：Gatsby.js。靜態網站產生的想法對當時的我來說簡直是革命性的，畢竟沒有什麼比預先渲染 HTML 檔案更快了，對吧？ 我決定透過閱讀文件來學習這個新框架，讓我告訴你，這**不是**一次有趣的體驗。我以前從未聽說過 GraphQL，顯然，您需要它來產生所有靜態檔案（到底是什麼？？？）。我問我的一些網友，很難學習這些過度設計的廢話是否正常，他們回答說「技能問題，再努力一點！」。於是我更加努力，終於學會了之後，我把我的個人網站移植到了Gatsby上。  我的大部分頁面都成功在 Google 上建立了索引，幾個月來，我對結果非常滿意。然後另一個問題出現了：我的**很多**開發者朋友開始說“Gatsby 死了！建立 Next 是為了簡化靜態站點生成並提供伺服器端渲染”。 ### [Next.js](https://nextjs.org/) 我快速瀏覽了 Next 文件並**立即**愛上了它。我能夠在沒有 GraphQL 的情況下用三分之一的程式碼做與 Gatsby 相同的事情！我再次將我的作品集移植到另一個框架：Next。 這次我確實有一次美好的經驗。部署到 Vercel 輕而易舉，「getStaticProps」和「getServerSideProps」功能很簡單，但功能非常強大，我可以選擇每個頁面的渲染樣式，整體來說非常靈活。 不幸的是，我透過慘痛的教訓學到了一些東西：在 JavaScript 生態系統中，所有美好的事情都會結束。 ### [混音](https://remix.run/) 我清楚記得 Remix 發佈時的情景。多名科技影響者開始發布有關它的內容（一如既往）。然而，當時我在主頁上看到它不支援靜態網站生成，只支援伺服器端渲染，所以我想「等一下，這些年來投資於 [JAMstack](https://jamstack.org/) 都被扔在這裡了嗎？不可能，這個框架不會長久」。然而，令我驚訝的是，Remix 不僅生存了下來，而且還被 Shopify 收購 https://shopify.engineering/remix-joins-shopify ，並成為 Next 的重要競爭對手。 幾個月過去了，我決定嘗試看看。我再一次感到驚訝，Remix 的主要座右銘是使用 Web 基礎知識，而不是像 Next 這樣過於複雜的快取系統。因此，在Remix 中編碼時，我腦中需要的思維模型要簡單10 倍：沒有全域狀態管理器，只需使用URL，更少的客戶端狀態，將所有邏輯移至伺服器，並使用cookie，無需使用完整堆疊中間的 REST API 非常簡單，只需將資料庫查詢移至「loader」函數即可。 ### 離開矩陣  然後，突然間，真相呈現在我面前，我服下了紅色藥丸。我的腦海中開始浮現出多個問題：Remix 不就像所有其他「古老而無聊」的框架（如 Rails、Laravel 和 Django）一樣嗎？幾十年來，我們一直在使用伺服器端渲染進行全端 Web 開發，但 JavaScript 黑手黨集體認為這種方法是垃圾，將所有內容移至客戶端才是未來。難道同一個黑手黨認為 Rails 一直都是對的嗎？用 JS 框架做所有那些過度設計的怪物不是正確的舉動嗎？我開始質疑一切。這種「新」的 Web 開發方式更加簡單、快速。 ### 我已經完成了 Next 和 Vercel 我透過 [Next.js 應用程式路由器](https://nextjs.org/docs/app) 達到了臨界點。以下是 Vercel 向 Next 推送的所有錯誤的完整清單： - 曾經簡單的：「getStaticProps」和「getServerSideProps」函數現在變得複雜而麻煩。目前，沒有特定的位置來新增 API 呼叫或資料庫查詢，您可以將它們寫入任何您想要的位置！在多年前使用 PHP 犯了同樣的錯誤之後，我們開始再次將業務邏輯與 UI 混合。難道前端開發者不吸取過去的教訓嗎？如果我刪除按鈕會發生什麼事？這是否會破壞我的使用者身份驗證流程，因為資料庫呼叫位於其中？您的前端應該 100% 可廢棄且可更換。你相對於競爭對手的競爭優勢在於業務邏輯，它應該與 UI 層完全隔離。  - 接下來是伺服器優先。這聽起來沒那麼糟吧？畢竟，這解決了 SEO 問題並立即向用戶展示新鮮內容。問題在於，大多數現有的 Next 程式碼庫都依賴客戶端程式庫，例如樣式元件和一些全域狀態管理器。這是什麼意思？隨著此類重大變化的不斷發生，您的應用程式將在幾週而不是幾年內變成遺留軟體。更多的時間花在保持所有依賴項最新上，而不是做重要的事情：發布功能。 - Vercel 從 Meta 聘請了多名 React 核心團隊成員。這帶來了嚴重的利益衝突，因為這些工程師現在（據稱）正在發布有利於 Next 的功能，而不是優先考慮那些可以幫助所有基於 React 的框架（如 Remix）的功能。  我再也受不了了。我對自己說：你知道嗎？我厭倦了一遍又一遍地重新學習相同的框架，我完全不同意這種新的範式。 毫不奇怪，其他內容創作者也經歷了類似的情況： https://youtu.be/zkCBSz353fc?si=z3-FDVgcB3xfp06h https://youtu.be/Zt8mO_Aqzw8?si=10fy1d-ZoB7t3Uc_ --- ## 啟蒙之路 我非常累。在厭倦了所有的 React 工具後，我開始了尋找更簡單的 Web 框架的旅程。以下是我一直在尋找的先決條件： - 含電池 - 約定優於配置 - 良好的開發體驗 - 現代化且高性能的前端 我的第一個反應是查看 [Stack Overflow Survey 2023](https://survey.stackoverflow.co/2023/#section-most-popular-technologies-web-frameworks-and-technologies) 中的頂級框架。我立即從清單中刪除了所有與 JS、C# 和 Java 相關的內容。我從來沒有興趣學習後兩個，它們看起來醜陋且冗長。所以剩下的選項是：Laravel (PHP)、Django (Python)、Rails (Ruby) 和 Phoenix (Elixir)。 Python 是我在網路工程學位期間使用的語言，我獲得了非常愉快的體驗。 Django 似乎遵循約定優於配置的理念，但最終讓我放棄它的是沒有一個好的內建工具來在前端工作。論壇上的大多數人都說他們使用[HTMX](https://htmx.org/) 和[Alpine](https://alpinejs.dev/)，但是，兩者都是您需要安裝的外部依賴項。 放棄Laravel 是非常困難的，因為它具有驚人的成本效益，有數百個官方軟體包可以處理新創公司可能需要的幾乎所有內容，例如託管、身份驗證、條紋支付等。對於前端，他們創造了[慣性。Node.js](https://inertiajs.com/)，這是一種非常簡單而優雅的方式，可以在前端使用 React 的同時保持 Laravel 的高生產力和強大功能。百分之百誠實地說，我沒有選擇 Laravel 的唯一原因是 PHP 的語法，它看起來很難看，到處都是一堆 `$` 和 `->`。 ### Ruby on Rails Ruby on Rails 無需介紹。它是 Web 開發框架的元年，其革命性的「15 分鐘建立部落格」至今仍令人印象深刻。在我開始抱怨我發現的所有問題之前，讓我們先從好的方面開始。 與 Python 類似，Ruby 是一種可以向非技術人員展示的語言，他們會理解該軟體想要做什麼。它是**迄今為止**我見過的最容易閱讀和最美麗的語言。我很快就意識到，[編寫視覺上令人愉悅的程式碼](https://world.hey.com/dhh/a-writer-s-ruby-2050b634) 是Rails 團隊的首要任務，這對我來說來說是新的。 更不用說 Rails 幾乎發明了「包含電池」和「約定優於配置」的哲學，所以這不會是一個問題。在一份文件中，我提供了任何類型的 Web 應用程式所需的一切。 在前端，有 [Hotwire](https://hotwired.dev/)，這是一種非常簡單且輕量級的方法，可以實現 SPA 框架提供的所有 UX 改進。我一直很好奇測試這個庫的極限，它看起來非常有前途。 好吧，Rails 在紙面上滿足了我想要的框架的所有先決條件。我們來試試吧！我在本地測試的第一件事是“railsscaffold”命令。我立即感到震驚。一個指令就能產生 CRUD 所需的一切？決不！  在 Node + React 領域，要實現相同的目標，我需要手動編寫所有程式碼（這裡沒有生成器）並安裝一堆程式庫，例如：Vite、prisma、express、react router、redux、redux-thunk 、 vitest、cypress 、react 測試庫、zod、typescript、eslint、prettier、1000 個不同的插件，甚至可能還有GraphQL 或tRPC。基本上就是一個已經有 900 個依賴項的 package.json。 在“railsscaffold”最初的震驚之後，當我從控制器打開程式碼時，我再次震驚了： ``` class ArticlesController < ApplicationController def index @articles = Article.all end def show @article = Article.find(params[:id]) end def new @article = Article.new end def create @article = Article.new(article_params) if @article.save redirect_to @article else render :new, status: :unprocessable_entity end end def edit @article = Article.find(params[:id]) end def update @article = Article.find(params[:id]) if @article.update(article_params) redirect_to @article else render :edit, status: :unprocessable_entity end end def destroy @article = Article.find(params[:id]) @article.destroy redirect_to root_path, status: :see_other end private def article_params params.require(:article).permit(:title, :body) end end ``` 這是所有後端程式碼嗎？只需幾行？這不可能！這非常簡單，看起來就像一個「低程式碼」工具。它簡單、優雅、可讀性極強，這是我們在 JS 領域很少見的。 好吧，好吧，你現在一定在想：「這個來自網路的瘋狂 React 開發者說他最終使用了 Elixir，所以 ruby 一定有問題！」。你是對的，我的匿名朋友，有些事情讓我很惱火，讓我們談談。 首先，我們需要解決房間裡的大象：從 React + Typescript 轉向動態類型語言並不容易。從我開始編寫程式碼的那一刻起，我的 VScode 上就沒有出現智慧感知或充滿程式碼建議的下拉式選單，我感到盲目和迷失。這是一種可怕的感覺，我可能會在函數名稱上輸入錯誤，直到網站投入使用時才意識到！我知道我們可以編寫測試，但這是我希望在 IDE 上立即辨識的錯誤類型，而不是在測試或部署期間辨識。 另一件我以為我會喜歡但最終討厭它的事情是：太多的魔法。在 Typescript 程式碼庫中，我可以點擊任何類別或函數的頂部，前往原始程式碼並查看其實作方式。在 Rails 上，我到底在哪裡進行驗證（例如）？我是否在控制器內建立私有函數？有專門的資料夾嗎？不，正確的位置是在模型內部。為什麼？因為這就是它的工作原理，所以您要么採用該約定，要么很難編寫 Ruby 程式碼。我根本無法對一切在幕後如何運作產生“直覺”，我必須盲目地相信維護者在組織一切方面做得很好。 為了解決我的挫折感，我開始寫前端程式碼。如何建立元件？ [部分](https://guides.rubyonrails.org/layouts_and_rendering.html#using-partials)。如何定義該元件的 prop 類型？沒有辦法做到這一點，您需要打開它並直觀地查找其中的所有變數。做一些互動怎麼樣？建立國家？嗯，有帶有 [Stimulus](https://stimulus.hotwired.dev/) 的 Hotwire，但是正如您所看到的，您需要手動建立“重新渲染”功能，它沒有找到一種方法像React 這樣改變狀態後自動重新渲染頁面。 ``` // src/controllers/slideshow_controller.js import { Controller } from "@hotwired/stimulus" export default class extends Controller { static targets = [ "slide" ] initialize() { this.index = 0 this.showCurrentSlide() } next() { this.index++ this.showCurrentSlide() } previous() { this.index-- this.showCurrentSlide() } showCurrentSlide() { this.slideTargets.forEach((element, index) => { element.hidden = index !== this.index }) } } ``` 我再一次感到沮喪。我非常接近找到完美的框架！如果 Rails 失敗，我想嘗試的下一個框架是什麼？靈丹妙藥。 ### 長生不老藥和鳳凰 我必須說實話，我已經沒有耐心了。我嘗試了多種不同的生態系統，我幾乎確信要堅持使用 Ruby on Rails，並放棄對完美的追求。直到我的 YouTube 推薦部分出現了一個影片： https://www.youtube.com/live/bfrzGXM-Z88?si=Xsa7yCKeVSY5R3sT 堅持，稍等！在這裡我們可以看到一位 React 開發人員說了很多關於函數式程式設計、Elixir 和 Phoenix Live View 的好話。也許我應該嘗試一下！ 我做的第一件事就是打開Elixir 和Phoenix 的文件，我真的很喜歡這樣一個事實：所有包都使用[Hex Docs](https://hexdocs.pm/) 以相同的方式進行記錄，您只需要取得習慣於單一介面以學習新事物。 另一個好處是，您只需閱讀文件即可真正學習 Elixir，無需昂貴的課程！在其他所有生態系統中，我必須透過付費課程學習語言，然後透過閱讀文件來學習框架。 然後是時候開始編寫程式碼了。很快我就明白函數式程式設計與 OOP 有很大不同。我們來做一個小小的比較： ``` // JS const obj = {name: "daniel"} obj.age = 25 // result: obj = {name: "daniel", age: 25} ``` ``` # Elixir obj = %{name: "daniel"} obj = Map.put(obj, :age, 25) # result: obj = %{name: "daniel", age: 25} ``` 或者您可以使用管道運算子透過更簡單的語法實現相同的效果： ``` # Elixir with pipe operator obj = %{name: "daniel"} |> Map.put(:age, 25) # result: obj = %{name: "daniel", age: 25} ``` 最初，您可能會發現它的可讀性較差且更複雜，但我保證隨著時間的推移它會變得有意義！嗯，至少對我來說是這樣。身為 React 開發人員，我已經習慣了到處都可以看到多個函數，甚至前端元件也是函數！更不用說建立類別有時被 JavaScript 黑手黨視為一種程式碼味道。我的大腦已經針對這種新範式進行了“塑造”，這對我來說很自然。自從我在大學獲得網路工程學位以來，我上過幾門關於物件導向程式設計的課程，但它從來沒有「受歡迎」。我無法將複雜的問題建模為類別和物件。隨著時間的推移，使用多個函數來「改變」一個變數是我在腦海中建模的方式。 主要框架怎麼樣？包含鳳凰電池嗎？約定優於配置？ **是的！** 老實說，生態系統與 Rails 不在同一水平，但已經達到了 95%。除非您需要非常具體的功能，Phoenix 都能滿足您的需求。 我幾乎被 Elixir 迷住了，我的清單中缺少兩件事：良好的開發人員體驗和現代/高效能的前端程式碼。 José Valim 宣布他正在嘗試為該語言加入類型，但 Elixir 目前還沒有這些類型，所以我很擔心。如何在沒有類型的情況下獲得智能感知和自動完成？很快我發現這些功能不一定相關。在 VScode 上安裝 [ElixirLS 擴充功能](https://marketplace.visualstudio.com/items?itemName=JakeBecker.elixir-ls) 後，我感到很驚訝。可以在隨機資料夾的隨機模組內定義函數，將其導入其他位置，並取得它的智慧感知和文件！我從靜態類型語言中獲得了這些好處，而無需編寫類型的麻煩，簡直太棒了！ https://elixir-lang.org/blog/2022/10/05/my-future-with-elixir-set-theoretic-types/ 我對前端的最後一個擔憂是由 Phoenix [Live View](https://hexdocs.pm/phoenix_live_view/welcome.html) 解決的。在程式碼方面，這正是文件主頁中讓我信服的部分：  您可以為每個元件定義“props”，如果類型不匹配，您的 IDE 中會出現錯誤，就像 React 一樣！感人的！ 使用者體驗怎麼樣？每當使用者點擊連結時是否會載入整個頁面？一定不行！即時視圖與客戶端建立 WebSocket 連接，然後每次頁面轉換只是透過 Websocket 進行內容交換，不會發出新的 HTTP 請求。此外，所有狀態都在伺服器端進行管理，這意味著 Trello 等豐富的用戶體驗過去由於加載過多的 JavaScript 而在客戶端非常卡頓，現在變得非常快！ Elixir 處理所有複雜的狀態邏輯並將頁面的更新部分傳送到前端。看看這裡的完整解釋： https://youtu.be/wrmVk2czqMg?si=ZoWAlPjQC-svmV3Y 由於我們使用 WebSocket 來建立 UI，因此建立像 Twitter 這樣的「即時」應用程式只需要幾行程式碼！ https://youtu.be/MZvmYaFkNJI?si=gAow6oIjgf8_OTkg ## 結論 可以肯定地說，「完美的技術堆疊」並不存在。解決所有問題的靈丹妙藥是我們在腦中創造的幻覺，以不斷尋找和建構最優化的工具。 然而，在個人層面上，完美的堆疊確實存在。因為每個開發人員都有偏好，您可以輕鬆找到適合您標準的工具。如果你有和我類似的旅程，完美的可能就是長生不老藥和鳳凰！所以試試看吧，也許你會像我現在一樣喜歡它。 如果您讀到了這篇文章的結尾，那您就太棒了！非常感謝您抽出寶貴的時間，希望我能為您的職業生涯帶來一些價值。  --- 原文出處：https://dev.to/danielbergholz/from-nextjs-to-rails-then-elixir-my-journey-through-reactjs-burnout-h8d
喜歡這些文章嗎？買書吧！ [***Jason C. McDonald 的《Dead Simple Python》可從 No Starch Press 取得。](https://nostarch.com/dead-simple-python) --- 教程最糟糕的部分始終是它們的簡單性，不是嗎？您很少會發現一個包含多個文件的文件，更罕見的是包含多個目錄的文件。 我發現**建立 Python 專案**是語言教學中最常被忽略的部分之一。更糟的是，許多開發人員都會犯錯，在一堆常見錯誤中跌跌撞撞，直到他們得到至少「有效」的東西。 好訊息是：您不必成為他們中的一員！ 在《Dead Simple Python》系列的本期中，我們將探索「import」語句、模組、包，以及如何將所有內容組合在一起而不費力氣。我們甚至會涉及 VCS、PEP 和 Python 之禪。係好安全帶！ # 設定儲存庫 在我們深入研究實際的專案結構之前，讓我們先討論一下它如何適合我們的版本控制系統 [VCS]…從您*需要* VCS 的事實開始！有幾個原因是... * 追蹤您所做的每一個更改， * 弄清楚你什麼時候弄壞了東西， * 能夠查看舊版的程式碼， * 備份您的程式碼，以及 * 與他人合作。 您有很多選擇。 **Git** 是最明顯的，尤其是當您不知道還可以使用什麼時。您可以在 GitHub、GitLab、Bitbucket 或 Gitote 等上免費託管 Git 儲存庫。如果您想要 Git 以外的東西，還有許多其他選擇，包括 Mercurial、Bazaar、Subversion（儘管如果您使用最後一個，您可能會被同行視為恐龍。） 我將悄悄假設您在本指南的其餘部分中使用 Git，因為這是我專門使用的。 建立儲存庫並將「本機副本」複製到電腦後，您就可以開始設定專案了。您至少需要建立以下內容： - `README.md`：您的專案及其目標的描述。 - `LICENSE.md`：您的專案的許可證（如果它是開源的）。 （有關選擇一個的更多訊息，請參閱 [opensource.org](https://opensource.org/)。） - `.gitignore`：一個特殊文件，告訴 Git 要忽略哪些文件和目錄。 （如果您使用其他 VCS，則該檔案具有不同的名稱。請尋找。） - 包含您的專案名稱的目錄。 沒錯...**我們的Python 程式碼檔案實際上屬於一個單獨的子目錄！** 這非常重要，因為我們的儲存庫的根目錄將變得非常混亂，其中包含建置檔案、打包腳本、虛擬環境以及各種方式其他實際上不屬於原始碼的內容。 僅為了舉例，我們將虛構的專案稱為「awesomething」。 # PEP 8 和命名 Python 風格主要由一組稱為 **Python 增強提案**（縮寫為 **PEP**）的文件管轄。當然，並非所有 PEP 都被實際採納——這就是它們被稱為「提案」的原因——但有些是被採納的。您可以在Python官方網站上瀏覽主PEP索引。此索引的正式名稱為 [PEP 0](https://www.python.org/dev/peps/)。 現在，我們主要關注 [**PEP 8**](https://www.python.org/dev/peps/pep-0008/)，它最初由 Python 語言建立者 Guido van Rossum 於2001 年。該文件正式概述了所有Python 開發人員應普遍遵循的程式設計風格。把它放在枕頭下！學習它，遵循它，鼓勵其他人也這樣做。 （附註：PEP 8 指出樣式規則總是有例外。它是*指南*，而不是*命令*。） 現在，我們主要關注標題為 [“包和模組名稱”](https://www.python.org/dev/peps/pep-0008/#package-and-module-names)的部分。。 > 模組應該有簡短的、全小寫的名稱。如果可以提高可讀性，可以在模組名稱中使用下劃線。 Python 套件也應該有短的、全小寫的名稱，儘管不鼓勵使用底線。 我們稍後會了解*模組*和*包*到底是什麼，但現在，請了解**模組由檔案名稱命名**，而**套件由其目錄名稱命名**。 換句話說，**檔案名稱應全部小寫，如果可以提高可讀性，則使用下劃線。**同樣，**目錄名稱應全部小寫，如果可以避免，則不使用下劃線**。換句話說... + 執行此動作：`awesomething/data/load_settings.py` + 不是這個：`awesomething/Data/LoadSettings.py` 我知道，我知道，這是一種冗長的表達方式，但至少我在你的步驟中加入了一點 PEP。 （*你好？這個東西開著嗎？*） # 套件和模組 這會讓人感覺虎頭蛇尾，但這裡是那些承諾的定義： **任何Python（`.py`）檔案都是一個*模組*，目錄中的一堆模組是一個*套件*。** 嗯……差不多了。要讓目錄成為包，您還必須做另一件事，那就是將名為「__init__.py」的檔案貼到其中。實際上，您不必將任何內容*放入*該文件中。它必須在那裡。 您也可以使用`__init__.py` 做其他很酷的事情，但這超出了本指南的範圍，因此[請閱讀文件以了解更多資訊](https://docs.python.org/3/tutorial/modules.html#packages)。 如果你*確實*忘記了套件中的`__init__.py`，它會做一些比失敗更奇怪的事情，因為這使它成為一個**隱式命名空間包**。您可以使用這種特殊類型的套件做一些有趣的事情，但我不會在這裡討論。像往常一樣，您可以透過閱讀文件來了解更多：[PEP 420：隱式命名空間包](https://www.python.org/dev/peps/pep-0420/)。 所以，如果我們看看我們的專案結構，`awesomething` 實際上是一個包，它可以包含其他包。因此，我們可以將「awesomething」稱為我們的*頂級包*，以及其*子包*下的所有包。一旦我們開始進口東西，這將非常重要。 讓我們看一下我的現實專案“遺漏”的快照，以了解我們如何建置東西... ``` omission-git ├── LICENSE.md ├── omission │ ├── app.py │ ├── common │ │ ├── classproperty.py │ │ ├── constants.py │ │ ├── game_enums.py │ │ └── __init__.py │ ├── data │ │ ├── data_loader.py │ │ ├── game_round_settings.py │ │ ├── __init__.py │ │ ├── scoreboard.py │ │ └── settings.py │ ├── game │ │ ├── content_loader.py │ │ ├── game_item.py │ │ ├── game_round.py │ │ ├── __init__.py │ │ └── timer.py │ ├── __init__.py │ ├── __main__.py │ ├── resources │ └── tests │ ├── __init__.py │ ├── test_game_item.py │ ├── test_game_round_settings.py │ ├── test_scoreboard.py │ ├── test_settings.py │ ├── test_test.py │ └── test_timer.py ├── pylintrc ├── README.md └── .gitignore ``` （如果您想知道的話，我使用 UNIX 程式“tree”來製作上面的小圖。） 您會看到我有一個名為“omission”的頂級包，它有四個子包：“common”、“data”、“game”和“tests”。我還有“resources”目錄，但只包含遊戲音訊、圖像等（為簡潔起見，此處省略）。 `resources` 不是一個包，因為它不包含 `__init__.py`。 我的頂層包中還有另一個特殊檔案：`__main__.py`。這是當我們直接透過「python -m omission」執行頂級套件時執行的檔案。我們稍後會討論「__main__.py」中的內容。 # 導入如何進行 如果您以前編寫過任何有意義的 Python 程式碼，那麼您幾乎肯定熟悉「import」語句。例如... ``` import re ``` 知道當我們導入模組時，我們實際上是在執行它是有幫助的。這意味著模組中的任何“import”語句也正在執行。 例如，[`re.py`](https://github.com/python/cpython/blob/3.7/Lib/re.py#L122) 有幾個自己的 import 語句，當我們說 `導入重新`。這並不意味著它們可用於我們從*導入“re”的文件，但這確實意味著這些文件必須存在。如果（由於某種不太可能的原因）“enum.py”在您的環境中被刪除，並且您執行了“import re”，它將失敗並出現錯誤... > 回溯（最近一次呼叫最後一次）： > 檔案“weird.py”，第 1 行，位於 <module> 中 > 進口再 > 檔案“re.py”，第 122 行，位於 <module> 中 > 導入枚舉 > ModuleNotFoundError：沒有名為「enum」的模組 當然，讀到這裡，你可能會有點困惑。有人問我為什麼找不到外部模組（在本例中為“re”）。其他人想知道為什麼要導入內部模組（此處為“enum”），因為他們沒有直接在程式碼中請求它。答案很簡單：我們導入了 `re`，然後導入了 `enum`。 當然，上面的場景是虛構的：「import enum」和「import re」在正常情況下永遠不會失敗，因為這兩個模組都是Python核心庫的一部分。這只是一個愚蠢的例子。 ;) # 匯入註意事項 實際上有多種導入方式，但其中大多數應該很少使用（如果有的話）。 對於下面的所有範例，我們假設有一個名為「smart_door.py」的檔案： ``` # smart_door.py def close(): print("Ahhhhhhhhhhhh.") def open(): print("Thank you for making a simple door very happy.") ``` 例如，我們將在 Python 互動式 shell 中執行本節中的其餘程式碼，執行位置與「smart_door.py」相同。 如果我們想執行`open()`函數，我們必須先導入模組`smart_door`。最簡單的方法是...... ``` import smart_door smart_door.open() smart_door.close() ``` 我們實際上會說“smart_door”是“open()”和“close()”的**命名空間**。 Python 開發人員非常喜歡命名空間，因為它們讓函數和其他內容的來源一目了然。 （順便說一句，不要將 *命名空間* 與 *隱式命名空間包* 混淆。它們是兩個不同的東西。） **Python 之禪**，也稱為 [PEP 20](https://www.python.org/dev/peps/pep-0020/)，定義了 Python 語言背後的哲學。最後一行有一個聲明解決了這個問題： > 命名空間是一個非常棒的想法——讓我們做更多這樣的事情！ 然而，在某種程度上，命名空間可能會變得很痛苦，尤其是對於嵌套包來說。 `foo.bar.baz.whatever.doThing()` 太醜了。值得慶幸的是，我們確實有辦法避免*每次*呼叫函數時都必須使用命名空間。 如果我們希望能夠使用 `open()` 函數，而不必總是在其前面加上模組名稱，我們可以這樣做... ``` from smart_door import open open() ``` 但請注意，「close()」和「smart_door.close()」在最後一個場景中都不起作用，因為我們沒有直接匯入該函數。要使用它，我們必須將程式碼更改為這樣... ``` from smart_door import open, close open() close() ``` 在之前可怕的嵌套包噩夢中，我們現在可以說“from foo.bar.baz.whatever import doThing”，然後直接使用“doThing()”。或者，如果我們想要一點命名空間，我們可以說“from foo.bar.baz importwhatever”，然後說“whatever.doThing()”。 “導入”系統非常靈活。 但不久之後，您可能會發現自己說“但是我的模組中有數百個函數，我想全部使用它們！”這是許多開發人員偏離軌道的地方，這樣做... ``` from smart_door import * ``` **這非常非常糟糕！** 簡而言之，它直接導入模組中的所有內容，這是一個問題。想像一下下面的程式碼... ``` from smart_door import * from gzip import * open() ``` 你認為會發生什麼事？答案是，「gzip.open()」將是被呼叫的函數，因為這是在我們的程式碼中導入並定義的「open()」的最後一個版本。 `smart_door.open()` 已被 **shadowed** - 我們不能稱之為 `open()`，這意味著我們實際上根本無法呼叫它。 當然，由於我們通常不知道，或者至少不記得每個導入的模組中的*每個*函數、類別和變數，所以我們很容易陷入一堆混亂。 *Python 之禪* 也解決了這個情況... > 顯式優於隱式。 您永遠不必“猜測”函數或變數來自何處。文件中的某個位置應該有程式碼“明確”告訴我們它來自哪裡。前兩個場景證明了這一點。 我還應該提到，早期的 `foo.bar.baz.whatever.doThing()` 場景是 Python 開發人員不喜歡看到的。也來自 *Python 之禪*... > 扁平比嵌套更好。 一些包的嵌套是可以的，但是當你的專案開始看起來像一套精緻的俄羅斯娃娃時，你就做錯了。將模組組織到包中，但保持相當簡單。 # 在您的專案中匯入 我們之前建立的專案文件結構即將「非常方便」。回想一下我的「遺漏」專案... ``` omission-git ├── LICENSE.md ├── omission │ ├── app.py │ ├── common │ │ ├── classproperty.py │ │ ├── constants.py │ │ ├── game_enums.py │ │ └── __init__.py │ ├── data │ │ ├── data_loader.py │ │ ├── game_round_settings.py │ │ ├── __init__.py │ │ ├── scoreboard.py │ │ └── settings.py │ ├── game │ │ ├── content_loader.py │ │ ├── game_item.py │ │ ├── game_round.py │ │ ├── __init__.py │ │ └── timer.py │ ├── __init__.py │ ├── __main__.py │ ├── resources │ └── tests │ ├── __init__.py │ ├── test_game_item.py │ ├── test_game_round_settings.py │ ├── test_scoreboard.py │ ├── test_settings.py │ ├── test_test.py │ └── test_timer.py ├── pylintrc ├── README.md └── .gitignore ``` 在我的“game_round_settings”模組中，由“omission/data/game_round_settings.py”定義，我想使用“GameMode”類別。類別在「omission/common/game_enums.py」中定義。我怎樣才能到達它？ 因為我將“omission”定義為包，並將模組組織到子包中，所以實際上非常簡單。在“game_round_settings.py”中，我說...... ``` from omission.common.game_enums import GameMode ``` 這稱為**絕對導入**。它從頂級包“omission”開始，然後進入“common”包，在其中查找“game_enums.py”。 一些開發人員向我提供更像「from common.game_enums import GameMode」的導入語句，並想知道為什麼它不起作用。簡而言之，「data」套件（「game_round_settings.py」所在的位置）不知道其兄弟包。 然而，它確實知道它的父母。正因為如此，Python 有一種叫做「相對導入」的東西，它可以讓我們做同樣的事情，就像這樣... ``` from ..common.game_enums import GameMode ``` `..` 表示“此套件的直接父包”，在本例中為“omission”。因此，導入後退一級，進入“common”，並找到“game_enums.py”。 關於是否使用絕對導入或相對導入有許多爭論。就我個人而言，我更喜歡盡可能使用絕對導入，因為它使程式碼更具可讀性。不過，您可以自己做決定。唯一重要的部分是結果是「顯而易見的」——任何東西的來源都不應該是神秘的。 (繼續閱讀：[Real Python - Python 中的絕對導入與相對導入](https://realpython.com/absolute-vs-relative-python-imports/) 這裡還隱藏著另一個陷阱！在 `omission/data/settings.py` 中，我有這一行： ``` from omission.data.game_round_settings import GameRoundSettings ``` 當然，由於這兩個模組都在同一個包中，我們應該可以直接說“from game_round_settings import GameRoundSettings”，對嗎？ *錯誤！* 它實際上無法找到“game_round_settings.py”。這是因為我們正在執行頂級包“omission”，這意味著**搜尋路徑**（Python 查找模組的位置以及順序）的工作方式不同。 但是，我們可以使用相對導入來代替： ``` from .game_round_settings import GameRoundSettings ``` 在這種情況下，單一“.”表示“這個包”。 如果您熟悉典型的 UNIX 檔案系統，這應該開始有意義。 `..` 表示“後一級”，“.` 表示“目前位置”。當然，Python 更進一步：`...` 表示“後兩級”，`....` 表示“後三級”，依此類推。 但是，請記住，這些「等級」不僅僅是簡單的目錄。他們是包裹。如果在一個不是包的普通目錄中有兩個不同的包，則不能使用相對導入從一個包跳到另一個包。為此，您必須使用 Python 搜尋路徑，但這超出了本指南的範圍。 （請參閱本文末尾的文件。） # `__main__.py` 還記得我提到在我們的頂級包中建立一個 `__main__.py` 嗎？這是一個特殊的文件，當我們直接使用 Python 執行套件時會執行該文件。我的“omission”包可以使用“python -m omission”從我的存儲庫的根目錄執行。 這是該文件的內容： ``` from omission import app if __name__ == '__main__': app.run() ``` 是的，實際上就是這樣！我正在從頂級包“omission”導入我的模組“app”。 請記住，我也可以說「來自…」。改為導入應用程式。或者，如果我只想說“run()”而不是“app.run()”，我可以執行“from omission.app import run”或“from .app import run”。最後，只要程式碼可讀，我如何進行導入並沒有太大的技術差異。 （附註：我們可以爭論為我的主要`run()` 函數設定一個單獨的`app.py` 對我來說是否合乎邏輯，但我有我的理由......而且它們超出了本指南的範圍。 ） 首先讓大多數人感到困惑的部分是整個「if __name__ == '__main__'」語句。 Python 沒有太多**樣板** - 必須非常普遍地使用且幾乎不需要修改的程式碼 - 但這是那些罕見的位元之一。 `__name__` 是每個 Python 模組的特殊字串屬性。如果我將“print(__name__)”行貼在“omission/data/settings.py”的頂部，當該模組被導入（並因此執行）時，我們會看到“omission.data.settings”被打印出去。 當模組直接透過「python -m some_module」運作時，模組會被指派一個特殊值「__name__」：「__main__」。 因此，「if __name__ == '__main__':」實際上是在檢查該模組是否以 *main* 模組執行。如果是，它將在條件下執行程式碼。 您可以透過另一種方式看到這一點。如果我將以下內容加入到“app.py”的底部... ``` if __name__ == '__main__': run() ``` ……然後我可以直接透過 `python -m omission.app` 執行該模組，結果與 `python -m omission` 相同。現在`__main__.py`被完全忽略，`omission/app.py`的`__name__`是`"__main__.py"`。 同時，如果我只是執行“python -m omission”，“app.py”中的特殊程式碼將被忽略，因為它的“__name__”現在又是“omission.app”。 看看效果如何？ # 總結 我們來複習。 * 每個專案都應該使用 VCS，例如 Git。有很多選項可供選擇。 * 每個 Python 程式碼檔案 (`.py`) 都是一個 **模組**。 * 將您的模組組織到**包**中。每個包必須包含一個特殊的「__init__.py」檔案。 * 您的專案通常應由一個頂級包組成，通常包含子包。該頂級包通常共享您的專案的名稱，並作為專案存儲庫根目錄中的目錄存在。 * **永遠不要**在導入語句中使用「*」。在考慮可能的例外之前，Python 之禪指出「特殊情況並沒有特殊到足以違反規則」。 * 使用絕對或相對導入來引用專案中的其他模組。 * 可執行專案的頂層套件中應該有一個`__main__.py`。然後，您可以使用「python -m myproject」直接執行該套件。 當然，我們可以在建立 Python 專案時使用許多更高級的概念和技巧，但我們不會在這裡討論。我強烈建議閱讀文件： + [Python 參考：導入系統](https://docs.python.org/3/reference/import.html) + [Python 教學：模組](https://docs.python.org/3/tutorial/modules.html) + [PEP 8：Python 風格指南](https://www.python.org/dev/peps/pep-0008/) + [PEP 20：Python 之禪](https://www.python.org/dev/peps/pep-0020/) + [PEP 240：隱式命名空間套件](https://www.python.org/dev/peps/pep-0420/) --- *感謝 `grym`、`deniska` (Freenode IRC `#python`)、@cbrintnall 和 @rhymes (Dev) 提出的修改建議。* --- 原文出處：https://dev.to/codemouse92/dead-simple-python-project-structure-and-imports-38c6
**開發者們大家好！** 歡迎來到我的另一篇博文。 在這篇文章中，我想分享一些每個開發人員都必須了解的基本網站或工具。 所以讓我們**開始**👇並且不要**忘記**“💖🦄🔥”。 --- ## 1. [omatsuri.app](https://omatsuri.app) 🍡  Omatsuri 是一個提供網頁開發人員資源的日本網站。 “Omatsuri”，一個漸進式 Web 應用程式 (PWA)，提供 **12 個開源前端工具的集合**。 這些資源**免費使用**和自訂，這在您設計新網站或應用程式時非常有幫助。 --- ## 2. [htmlrev.com](https://htmlrev.com/) 📄  HTMLrev 是一個**尋找 HTML 範本**和設計資源的絕佳網站。 他們為網站、登陸頁面、部落格、作品集等提供免費的 html 模板。 這些模板隨時可用且易於自訂。這是滿足您所有範本需求的一站式場所。 --- ## 3. [Unicornicons.com](https://unicornicons.com/) 🦄  Unicornicons 擁有**漂亮的動畫圖示**，您可以在專案中使用它們。 他們有高級圖標包，但也提供許多**免費圖標**。這些圖標有助於使介面更具吸引力和樂趣。 您還可以輕鬆自訂顏色。 --- ## 4. [UiVerse.io](https://uiverse.io/)✨  UiVerse 是一個使用 CSS 和 Tailwind 建立的 UI 元素社群。 他們擁有超過 **3000 個元素，可以在 MIT 許可下免費**使用。 這對於建立 UI 元件並節省開發時間非常有用。您可以搜尋、篩選元素並直接取得要複製的程式碼。 --- ## 5. [undraw.co](https://undraw.co/illustrations) 🖌  Undraw 是一個開源插圖函式庫。他們提供**美麗的 SVG 插圖**，您可以免費使用。 這些插圖很現代，可以輕鬆自訂。這對於登陸頁面、有關部分和產品行銷的內容非常有幫助。 他們也不斷加入新的插圖。 --- ## 6. [patternpad.com](https://patternpad.com/) 🎨  PatternPad 讓您設計來自無限顏色和形狀變化的圖案。您可以在這裡非常輕鬆地**建立獨特的品牌模式**、簡報、社交貼文等。 圖案匯出為 SVG 以供靈活使用。這是一個很好的工具，可以為您的設計增添視覺吸引力。 --- ## 7. [shapeivider.app](https://www.shapeivider.app/) 🗺  ShapeDivider 可協助您非常輕鬆地**在**標題、段落或部分之間新增曲線形狀。它是設計中經常使用的技術。 該網站允許您透過選擇形狀和顏色類型來產生程式碼。您可以**直接複製並貼上程式碼**。非常有用的工具！ --- ## 8. [photopea.com](https://www.photopea.com/) 📸  Photopea 是一款線上照片編輯器，支援 PSD、XCF、Sketch、XD 和 CDR 格式。 **您可以免費開啟、編輯和儲存照片**，無需安裝任何軟體。 它具有類似於 Photoshop 的工具，但對初學者非常友好。這非常適合開發人員的基本影像編輯需求。 --- ## 9. [quickref.me](https://quickref.me/) 🧑💻  QuickRef 是各種**開發人員工具、框架和技術**的備忘單集合。它們涵蓋了從程式語言、資料庫、設計工具到終端命令的所有內容。 這些備忘單可以幫助您更快學習，並且在開發過程中也非常方便。 **將此加入書籤！**。 --- ## 10. [devdocs.io](https://devdocs.io/) 📚  DevDocs 為許多程式庫和框架提供 API 文件。 **它從各種來源收集文件**並以有組織的方式呈現它們。 在開發過程中，經常需要參考文件。該網站使您可以輕鬆快速地找到所需的內容。 --- ## 11. [devhints.io](https://devhints.io/) 📝  Devhints 包含各種技術和工具的簡明備忘單。這些就像**開發人員的袖珍參考卡**。該資訊清晰呈現，沒有額外的細節。 他們專注於最重要的功能。這是一個很棒的網站，可以找到快速提醒。 --- ## 12. [開發工具](https://developer.chrome.com/docs/devtools/) 🛠 Chrome 開發者工具或 DevTools 是一套強大但有時令人難以抗拒的 Web 開發者工具。 developer.chrome 上的文件可協助您掌握這些工具。它涵蓋了每個面板的使用、鍵盤快捷鍵以及提示和技巧。任何開發人員都不應忽略 Chrome DevTools 文件。 --- ## 就是這樣😁 感謝您閱讀這篇部落格🙏，我希望這能為您帶來一些新的去處！ 如果您發現任何其他有用的網站，請發表評論📩。 並且不要忘記加上“💖🦄🔥” **快樂編碼👋** --- 原文出處：https://dev.to/random_ti/top-12-websites-that-every-developer-must-know-2a67
**簡介** 您選擇的 Web 應用程式框架並不重要。嗯，這很重要，只是不像別人希望你相信的那麼重要。 2024 年存在如此多的庫和框架，並且最好的庫和框架[仍在激烈爭論](https://joshcollinsworth.com/blog/self-fulfilling-prophecy-of-react)這一事實證明了我的觀點。這是網頁開發人員最大的「第一世界問題」——一個實際上並不是問題的問題。在馬斯洛的開發者需求層次結構中，它絕對接近頂部（好吧，這是我編的😅）  例如，根據 [StateOfJS](https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/) 2022 年調查（我們仍在等待 2023 年結果），2018年留存率較高的前端框架有5個； 2022 年有 11 個。這在 4 年內增長了 120%，這甚至沒有考慮到像 NextJS、SvelteKit 或Astro ！  總體而言，這些都是該領域的巨大發展。它們提高了開發人員速度、捆綁包大小、效能和開發人員體驗等。但它們也讓開發人員和團隊在嘗試決定在下一個專案中使用哪一個時很難做出決定。對於初學者來說更糟糕，這可能是為什麼他們只選擇 React 這個最「主流」的解決方案。 我認為這一切都沒關係，因為最終你選擇哪一個並不重要。 **真正歸根結底，重要的是您選擇的框架**： - 穩定（足夠） - 讓你快速移動 - 讓您達到最終目標 為什麼？因為它們中的大多數都是圍繞著相同的概念建置的，已經證明自己有能力大規模執行，並且擁有可供您參與和學習的社區。 React 可能是職位描述中最突出的一個，但如果你正在尋找一個新角色並且只有 Vue 或 Angular 經驗，我無法想像你會花費一周以上的時間來建置一個副專案做出反應，向未來的雇主展示您的能力。 另一方面，如果您是初學者或初級開發人員，一旦您掌握了 HTML、CSS 和 JS 的基礎知識，學習什麼框架並不重要。我個人開始使用 PHP 學習後端開發，但後來轉向使用 Angular 進行前端開發。在我隨後的第二個角色中，我使用了React，現在我使用[Wasp](https://wasp-lang.dev)（一個基於React 和Node.js 建置的全棧框架）來開發我的副專案， https://reflectdaily.app/ - [開發人員永遠不會停止學習](https://www.youtube.com/watch?v=gl5HvBpUbt8)，因此嘲笑任何特定框架都是毫無爭議的——除非它真的很糟糕，但沒有人會繼續這樣做無論如何使用它。  所以，最後，使用有效的方法。因為在99.99%的情況下，你對Web框架的選擇並不會決定你專案的命運。 如果您做了一些研究並找到了適合您需求的框架並且您喜歡使用它 - **使用它**。確實沒有充分的理由不這麼做。 ## 支持我們！ 🙏⭐️  如果您喜歡這篇文章，[考慮在 Github 上給我們一顆星](https://kdta.io/github-wasp-lang-wasp_18)！我們在 Wasp 所做的一切都是開源的，您的支援幫助我們使 Web 開發變得更容易，並激勵我們撰寫更多這樣的文章。  --- 原文出處：https://dev.to/wasp/the-best-web-framework-doesnt-exist-2aom
𝗛𝗶𝗖𝗼𝗺𝗺𝘂𝗻𝗶𝘁𝘆， 我們很高興與您分享這個好訊息：我們上個月完成了 500 萬美元的種子輪融資，以幫助開發人員建立 AI/資料全端應用程式。 𝗧𝗵𝗲 𝗧𝗮𝗶𝗽𝘆 𝗦𝘁𝗼𝗿𝘆 幾年前，Albert 和我在為大型組織領導人工智慧專案多年後，決定是時候過渡到完整的 Python 開發並停止使用傳統的 Java、JS、.Net 堆疊等。 我們非常清楚我們正在尋找哪些功能，但令我們驚訝的是，我們在許多現有的 Python 套件中找不到它們。 我們的使命既簡單又雄心勃勃：提供缺少的磚塊，阻止如此多的人工智慧/資料試點成功部署專案。 特別是，我們希望將最終用戶帶回「人工智慧/資料」畫面。今天我仍然驚訝地發現，關於最終用戶的提及如此之少：從資料科學家到資料工程師，都是關於資料流、公開演算法等？沒有提及人類將如何與人工智慧/資料模型互動......我們想改變這一切！ 所以我們決定建造 Taipy… 𝗧𝗮𝗶𝗽𝘆𝗰𝗼𝗺𝗯𝗶𝗻𝗲𝘀： - 功能強大的互動式前端應用程式產生器，但學習/使用非常簡單。 - 「場景」是最終用戶（以及資料科學家）輕鬆與資料和演算法互動的可能性。 2022 年，我們首次推出了 Taipy 作為開源專案（請查看我們的 [GitHub 頁面](https://github.com/Avaiga/taipy)），隨後於當年稍後推出了企業版本。 感謝這個令人驚嘆的社區的大力支持和興趣，我們的 GitHub 計畫不僅流行，而且受歡迎程度也顯著上升，在幾週內從 100 顆星增加到 3,000 多顆星！我們非常感謝您的支持和熱情。 [隨意 ⭐ Taipy 儲存庫](https://github.com/Avaiga/taipy) 我還要感謝我們早期的企業採用者，他們在驗證和測試新技術方面非常重要。感謝麥當勞、KnowledgeTouch、Groupe Les Mousquetaires、Total Energies、Textil Apparel Limited、IFP-EN 等提供的特價。 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗦𝘁𝗮𝘁𝘂𝘀 我們最近發布了： - [Taipy Cloud](https://www.taipy.io/posts/introducing-taipy-cloud-the-easiest-way-to-deploy-your-taipy-applications)允許社群使用者部署、託管和與世界其他地方分享他們的應用程式 - 重要的後端功能：Taipy Studio、應用程式版本控制、任務排程、Python API、用於場景管理的視覺化元件、新的 CLI 等等... - 在前端方面：一個新的樣式套件、一組用於即時應用程式建立的預設樣式表範本、新圖表... - [TalkToTaipy](https://talk-to-taipy.tapy.cloud/)，基於 LLM 的應用程式，僅使用自然語言探索資料集 𝗧𝗮𝗶𝗽𝘆’𝘀𝗳𝘂𝘁𝘂𝗿𝗲 這項重大投資使我們能夠繼續全職致力於改進 Taipy。這筆資金也是實現我們願景的關鍵一步，將 Taipy 定位為 Python 人工智慧/資料專案的領先平台。 𝗧𝗵𝗲 𝗻𝗲𝘅𝘁 𝗿𝗲𝗹𝗲𝗮𝘀𝗲 (𝗽𝗹𝗮𝗻 𝟰） 即將（本季）推出的精彩版本包含主要新功能： - 全新的**無程式碼 GUI 設計器**：您無需編碼即可建立 GUI 頁面！抱歉劇透，但這位新設計師是個殺手！ - **分散式計算：** 在遠端叢集上執行以並行場景/任務執行。 - **與主要平台整合**：如 Databricks、Dataiku 等。 所有這一切，同時忠於我們的開源根源！ 𝗢𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗺𝘂𝗻𝗶𝗰𝗮𝘁𝗶𝗼𝗻 𝘀𝗙 - 我們現在出現在多個社群平台：[Discord](https://discord.com/invite/SJyz2VJGxV)、[LinkedIn](https://www.linkedin.com/company/taipy-io)、[ X](https://twitter.com/Taipy_io) 和[YouTube](https://www.youtube.com/@taipy_io)。 - 我們贊助了多項活動：會議（PyData、Pycon、ODSC...）、黑客馬拉松、派對、網路研討會... - 我們也計劃很快開始定期舉辦 Taipy 技術講座。 。 是的，所有這些都是開源的！ 我們總是渴望收到您的來信，因此，如果您認為 Taipy 需要改進或加入哪些內容，請告訴我們。您的意見對於制定我們的路線圖非常寶貴。 謝謝大家的支持。沒有您，我們不可能達到這個里程碑！ 文森特·戈塞林和阿爾伯特·安托萬 太皮聯合創辦人 還沒看過 Taipy 嗎？歡迎造訪我們的[GitHub頁面](https://github.com/Avaiga/taipy ）。 --- 原文出處：https://dev.to/taipy/our-open-source-project-for-building-ai-data-full-stack-apps-got-funded-4e68
假設您有一個或多個應用程式 - 它們都發送日誌 - 您如何知道它們內部發生了什麼？ 通常有兩種方法： - **日誌記錄**：保存來自多個應用程式的日誌並提供見解和搜尋。這是老方法並且總是有幫助的。 - **追蹤**：專注於提供對應用程式效能的洞察；您可以針對它們建立準確的指標以進行監控和警報。 有些工具用於記錄，有些工具用於跟踪，有些工具兩者兼而有之！ 以下是您必須了解的用於日誌和追蹤的開源工具：  --- # 1. [Quickwit](https://github.com/quickwit-oss/quickwit)（日誌與追蹤）👑 Quickwit 是一個開源分散式搜尋引擎，專為大規模日誌管理和分析而設計。 Quickwit 是 Elasticsearch 的直接替代方案，具有更高的效能，尤其是在雲端原生和大規模分散式環境中，並且專注於優化儲存和搜尋效率。 通常，您會使用 OpenTelemetry、Fluentbit、Odigos（自動偵測追蹤工具）等工具來收集日誌和追蹤，將它們傳送到 Quickwit，然後使用 Jaeger（追蹤）或 Grafana（日誌和追蹤）將其視覺化。 **有趣的事實：** Elasticsearch 和 Kibana 都放棄了社區許可證，轉而採用更具限制性的許可證（從 Apache 2 到 Elastic 許可證，並遭到社區的強烈反對）。 Quickwit 是 AGPL 3。它對 FOSS（免費開源社群）更加開放。  --- # 2. [Grafana](https://github.com/grafana/grafana)（日誌和追蹤） Grafana 是 ELK 堆疊的開源替代品。對於日誌和跟踪，您必須設定兩個查詢引擎：Loki 和 Tempo，都由 Grafana 維護。 一旦您在 Loki 和 Tempo 中索引了所有日誌或跟踪，您將需要一個可視化工具來搜尋您的資料：Grafana 來了！ Grafana 可讓您查詢、視覺化、警報和理解您的指標，無論它們儲存在何處。與您的團隊建立、探索和分享儀表板，並培養資料驅動的文化。  --- # 3. [Odigos](https://github.com/keyval-dev/odigos)（追蹤） Odigos 是一項獨特的技術，無需更改程式碼即可為 k8s 中的任何應用程式產生追蹤：然後可以將所有追蹤轉發到 Quickwit 或 Elasticsearch 等資料庫（它們有更多整合）。 如果您不知道，OpenTelemetry 是一個接收日誌和追蹤的協定。 Odigos 正在使用該標準，因此您可以在任何支援 OpenTelemetry 的資料庫中發送您的追蹤！  --- # 5. [Jaeger](https://github.com/jaegertracing/jaeger)（追蹤） 與 Prometheus 不同，Jaeger 專注於追蹤。 Jaeger 支援跨分散式系統傳播上下文訊息，確保追蹤資料在服務網路中正確關聯。 它並不是為處理大量資料而設計的，您必須將其與強大的儲存引擎（如 Quickwit 或 Elasticsearch）一起使用。在這樣的設定中，Jaeger 可以根據您的服務進行擴展，使其適用於小型和大型系統。  --- # 6. [SigNoz](https://github.com/SigNoz/signoz)（日誌與追蹤） Signoz 提供日誌和追蹤管理功能。 您可以在單一管理平台中視覺化追蹤和日誌。 您可以透過尋找導致問題的確切追蹤並查看各個請求追蹤的詳細火焰圖來找到問題的根本原因。  --- # 7. [Keep](https://github.com/keephq/keep)（提醒） 保持與目前所有可觀察工具、資料庫和通訊管道的連接，並將所有內容聚合到一個平台中，在出現問題時提供頂級警報 😈  --- # 8. [Uptrace](https://github.com/uptrace/uptrace)（日誌與追蹤） Uptrace 是一個基於 OpenTelemetry 的可觀察性平台，用於攝取日誌和追蹤。您可以監控您的應用程式並蒐索您的日誌。 由於其 OpenTelemetry 支援和眾多集成，可以輕鬆收集和發送資料 😈。請注意，您需要設定 Postgresql 和 Clickhouse 資料庫。  --- # 9. [HyperDX](https://github.com/hyperdxio/hyperdx)（日誌與追蹤） HyperDX 是一個開源可觀察性平台，可讓您搜尋日誌並分析您的痕跡。您可以在一個平台上偵錯複雜的錯誤和使用者問題，而無需在多個工具之間跳轉。  --- # 10. [普羅米修斯](https://github.com/prometheus/prometheus)（指標） 有趣的是，這個庫是以電影[普羅米修斯](https://www.imdb.com/title/tt1446714/)命名的(當然我是在開玩笑)，但這是我的第一個假設(無論如何，這是一部好電影） 雖然 Prometheus 和 Elasticsearch 看起來很相似，但實際上它們非常不同。 Prometheus 只關注基礎設施的指標（例如 CPU、記憶體使用情況、磁碟使用情況…），但不太適合高基數指標。 Quickwit比較專注於Logs和Trace； Elasticsearch 可以做日誌、追蹤和指標！ 他們傾向於攜手合作。 Prometheus 提供了一個原始的 UI，這很好，但它與 Grafana 儀表板最搭配。 有趣的是，Prometheus 提供了名為 PromQL（Prometheus Query Language）的查詢語言  --- 我們在 X 上連接嗎？ :) [我在這裡](https://twitter.com/nevodavid) 您是否使用其他一些優秀的工具來記錄和追蹤？ 請在評論中讓我了解它們:) --- 原文出處：https://dev.to/nevodavid/top-10-tools-to-learn-whats-going-on-in-your-app-20em
## 簡介 當（幾乎）總是有一個開源替代品可以完成同樣的工作（如果不是更好的話）時，為什麼還要依賴專有軟體和服務呢？ 以下是我一直在使用的 10 個開源替代方案，涵蓋從專案管理和通訊到資料分析的所有內容。  --- ## 1- [Taipy](https://github.com/Avaiga/taipy) 而不是 Tableau Tableau 可能是資料視覺化領域的頂級參與者之一，但 Taipy 提供了強大的替代方案。 Taipy 是一個開源 Python 程式庫，可讓您建立全面的 Web 應用程式來展示資料視覺化。 Taipy 程式碼量低、高度可自訂，並且在建立儀表板時提供更大的靈活性。  ---  您的支持意義重大🌱，並且在許多方面為我們帶來了很大的幫助，例如寫文章！ 🙏 --- ## 2- [Cal.com](http://Cal.com) 而非 Calendly Calendly 是簡化日程安排的變革者，但 [Cal.com](http://Cal.com) 成功地將其提升到了一個新的水平。這個開源 gem 有以下功能： - 團隊調度 - 整合視訊會議 - 自動時區偵測  --- ## 3- [Plausible](https://github.com/plausible/analytics) 而非 Google Analytics 當然，Google Analytics 是一個大牌，但有時較小的工具也能提供同樣多的功能，一個很好的例子就是 Plausible。 這個開源工具提供像Google一樣的網站分析功能，不，他們不會損害資料隱私。  --- ## 4- [AppFlowy](https://github.com/AppFlowy-IO/AppFlowy) 而非 Notion Notion 是一個非常適合做筆記和專案管理的工作空間，但如果您想要一個更簡單的選項，請嘗試 AppFlowy。 該工具提供了一種極簡主義的替代方案，專注於簡單地建立和組織清單、註釋和任務。 介面非常人性化；您很快就會成為專業人士。  --- ## 5- [Penpot](https://github.com/penpot/penpot) 而非 Figma Figma 是一個設計巨頭，但它的開源表弟 Penpot 在過去一年中一直在增長勢頭。 以下是 Penpot 的主要功能： - 協同設計能力 - 向量編輯 - 互動式原型 - 成本效益  --- ## 6- [Fonoster](https://github.com/fonoster) 而非 Twilio Twilio 是一個通訊平台，提供簡訊、語音、視訊和身份驗證 API，並提供無縫的客戶體驗。 讓我向您介紹 Fonoster，這是一種經濟高效的替代方案。 Fonoster 提供類似的語音和訊息服務。 Fonoster 專注於可擴展性，同時為您提供無縫的客戶體驗。  --- ## 7- [NextCloud](https://github.com/nextcloud/server) 而不是 Dropbox NextCloud 是 Dropbox 的開源競爭對手。 它提供文件託管、協作和同步功能，同時保持資料的隱私性並處於您的控制之下。  --- ## 8- [Jitsi](https://github.com/jitsi/jitsi-meet) 而非 Google Meets Jitsi 是 Google Meets 的替代品，提供類似的視訊會議功能。 他們的主要特徵： - 端對端加密 - 螢幕分享 - 並且無需註冊！  --- ## 9- [Padloc](https://github.com/padloc/padloc) 與 1Password 1Password 在密碼管理領域享有盛譽，但開源工具 Padloc 同樣注重隱私和安全性。 您可以使用 Padloc 安全地儲存和管理您的敏感和私人訊息，就像 1Password 一樣。  --- ## 10- [Crowd.dev](https://github.com/CrowdDotDev/crowd.dev) 而非公共房間 Common Room 在社區建設領域一直勢頭強勁，但不要忽視他們的開源替代方案「crowd.dev」。 無論是專案管理、資金還是協作，「crowd.dev」對於建立和發展線上社群都是不可忽視的。  --- ## 結論 選擇工具時，請記住查看開源選項。 開源帶來了透明度、可自訂性和成本效益，在大多數情況下都是不錯的選擇。  恭喜你，你已經走到最後了！如果您有任何疑問，請隨時諮詢。 --- 原文出處：https://dev.to/taipy/2024-resolution-be-more-open-source-centric-1jje
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
