展示開放 SaaS 🎉

我們非常高興推出Open SaaS ,這是適用於 React、NodeJS 和 Prisma 的完全免費、開源、生產級 SaaS 樣板。

在這裡查看它的實際效果:

https://www.youtube.com/watch?v=rfO5SbLfyFE

Open SaaS 擁有您最近看到的那些付費 SaaS 入門者的所有功能,除了它完全免費開源

我們覺得為一些需要自己管理的樣板程式碼支付 300-2,000 美元是瘋狂的。最重要的是,許多樣板文件嚴重依賴第三方服務。再加上託管和其他費用,您需要花費大量資金才能將您的想法推向世界。

這就是為什麼透過開放 SaaS,我們有意識地決定盡可能嘗試使用開源和免費服務。例如,我們在OpenSaaS.sh上託管的演示應用程式及其管理儀表板由 Plausible 分析的自架版本提供支援。希望您的 SaaS 具有相同的功能嗎?那麼,Open SaaS 已為您預先配置好!

此外,Open SaaS 使用的Wasp 框架可以為您建立許多功能,例如 Auth 和 Cron 作業,這樣您就不必支付第三方服務費用或完全自己編寫程式碼(我們稍後會更詳細地解釋這一點)。

人們已經在使用開放 SaaS 建置什麼...

自正式發布以來,已有大量人員使用 Open SaaS 建立了令人驚嘆的應用程式並推出了超級創意業務。因此,我們首先要強調其中的一些內容。

以下是我們社區中一些應用程式的精選清單:

  1. Solon :Instagram/whatsapp 賣家的人工智慧銷售代理,幫助客戶探索產品。

梭倫

  1. Captn.ai :人工智慧代理團隊協作,自動建立、監控和優化 Google Ads 廣告活動。

船長

  1. Bleepify :在人工智慧的幫助下,自動配音或立即從影片中刪除某些單字。對於快速使 YouTube 影片符合其行為準則非常有幫助。

圖片描述

  1. 取得 AI 部落格文章:以 Markdown 格式提供的高品質、專注於 SEO 的部落格文章產生器

圖片描述

如果上面的這些範例還沒有激發您的建造靈感,請繼續閱讀下面的內容,我們將討論為什麼建立開源 SaaS 模板、我們使用的堆疊以及它的工作原理。

為什麼我們要建造它......然後免費贈送它

自從我們正式發布以來,反饋非常積極。

圖片描述

很多人對它讚不絕口,並且已經用它建置了許多 SaaS 應用程式,但我們也收到了一些問題,例如:

  • “它會保持免費嗎?”

  • “您開源這個的動機是什麼?”

所以我們認為我們應該先回答這些問題。

圖片描述

首先,是的,它是 100% 免費和開源的,並將保持這種狀態。

其次,我們相信,開發者、獨立駭客和個人企業家社群的集體知識將比個人或小團體產生更好的樣板。當您從某些開發人員那裡購買SaaS 入門版時,您已經獲得了一個固執己見的堆棧,然後除此之外,您還獲得了按照他們認為最好的方式建置的應用程式- 但這可能並不總是最適合您。

第三, Open SaaSWasp的一個專案,一個超強的開源React + NodeJS + Prisma全端框架。我們 Wasp 團隊相信 Wasp 非常適合快速且有效率地建立 SaaS 應用程式,我們希望這個模板能夠證明這一點。另外,身為開發人員,我們從其他開源專案中學到了很多東西,而 Wasp 本身就是一個開源專案。

基本上,我們熱愛開源理念,並且希望將其發揚光大。 🙏

因此,我們希望能夠為開發者社群提供非常有價值的資產,同時宣傳我們的開源全端框架。我們很高興看到社區為其做出貢獻,以便它不斷發展並成為最好的 SaaS 樣板。

開放 SaaS 是由什麼組成的

我們在 Open SaaS 上投入了大量的精力,包括文件,以便開發人員可以自信、輕鬆地啟動 SaaS 應用程式。

我們還花了一些時間檢查其他免費的開源 SaaS 啟動器,並希望確保 Open SaaS 具有可立即投入生產的啟動器的所有正確功能,而不顯得臃腫。我們認為我們已經在很大程度上實現了這一點,儘管我們將繼續加入功能並隨著時間的推移進行改進。

目前的主要特點如下:

  • 🔐 身份驗證(電子郵件驗證、Google、github)

  • 📩 電子郵件(sendgrid、emailgun、SMTP)

  • 📈 管理儀表板(合理或谷歌分析)

  • 🤑 Stripe 付款(只需加入您的訂閱產品 ID)

  • ⌨️ 端對端類型安全性(無需配置)

  • 🤖 OpenAI 整合(AI 驅動的範例應用程式)

  • 📖 Astro 博客

  • 🧪 與劇作家進行端到端測試

  • 🚀 部署在任何地方

  • 📄 完整的文件和社群支持

值得深入了解其中每個功能的細節,所以讓我們開始吧。

授權

圖片描述

感謝 Wasp,Open SaaS 附帶了許多可能的身份驗證方法:

  • 使用者名稱和密碼(最簡單/最容易進行開發測試)

  • 已驗證電子郵件並重設密碼

  • Google 和/或 Github 社群登入

這就是 Wasp 真正發揮作用的地方,因為設定全端 Auth 並取得預先配置的 UI 元件所需要做的就是:

//main.wasp
app SaaSTemplate {
  auth: {
    userEntity: User,
    methods: {
      usernameAndPassword: {},
      google: {},
      gitHub: {},
    }
  }
}

嚴重地。就是這樣!

只需確保您已設定社交身份驗證並擁有 API 金鑰以及定義的UserExternalAuth實體,就可以開始了。不用擔心,這部分內容已在Open SaaS Docs中詳細記錄和解釋。

最重要的是,Open SaaS 預先配置了一些範例,說明如何自訂和建立一些真正強大的身份驗證流程。

管理儀表板和分析

圖片描述

透過利用Wasp 的工作功能,Open SaaS 每小時從 Plausible 或 Google 的網站分析(您的選擇!)和 Stripe 的資料 API 中提取資料,並將其保存到我們的資料庫中。然後,該資料將顯示在我們的管理儀表板上(前往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 作業。

條紋支付

圖片描述

如果您是以前從未建立過自己的 SaaS 的開發人員,那麼與 Stripe 這樣的支付處理器整合可能是您將面臨的少數挑戰之一。

當我建立第一個 SaaS CoverLetterGPT.xyz時,我的情況就是如此。這實際上是我建造它的主要動機之一;了解如何將 Stripe 支付整合到應用程式以及 OpenAI API 中。

儘管 Stripe 因擁有豐富的文件而聞名,但這個過程仍然令人畏懼。你必須:

  • 建立正確的產品類型

  • 設定 webhook 端點

  • 告訴 Stripe 將正確的 Webhook 事件傳送給您

  • 正確使用事件

  • 處理重複付款和失敗付款

  • 在上線之前透過 CLI 進行正確測試

這就是為什麼為您設定 Stripe 訂閱付款是一個巨大的勝利。

但比這更重要的是,為您方便地記錄整個過程!這就是為什麼 Open SaaS在我們的文件中為您提供方便的 Stripe 指南🙂

圖片描述

端對端類型安全

Open SaaS 是使用 Typescript 建置的,因為它是一個全棧應用程式,所以從後端到前端的類型安全可以成為真正的救星。我的意思是,一些固執己見的堆疊在此基礎上變得非常流行。

幸運的是,Wasp 為您提供開箱即用的端到端類型安全性(無需配置!),因此 Open SaaS 可以輕鬆利用它。

這是一個例子:

  1. 讓 Wasp 了解您的伺服器操作:
    // main.wasp

    action getResponse {
      fn: import { getResponse } from "@server/actions.js",
      entities: [Response]
    }
  1. 輸入並實施您的伺服器操作。
    // src/srever/actions.ts

    type RespArgs = {
      hours: string;
    };

    const getResponse: GetResponse<RespArgs, string> = async ({ hours }) => { }
  1. 導入並在客戶端呼叫。

圖片描述

客戶端類型將被正確推斷!

圖片描述

AI 驅動的範例應用程式(附有 OpenAI API)

圖片描述

人工智慧正在使新的應用程式創意成為可能,這也是我們看到開發人員對建立 SaaS 應用程式的興趣重新抬頭的部分原因。正如我上面提到的,我建造的第一個 SaaS 應用程式CoverLetterGPT是「GPT 包裝器」之一,我很自豪地說它帶來了約350 美元MRR(每月經常性收入)的可觀被動收入。

我個人認為,我們在軟體開發方面處於最佳狀態,開發新的、有利可圖的人工智慧應用程式有很大的潛力,尤其是「獨立駭客」和「個人企業家」。

這就是 Open SaaS 推出 AI 調度助手演示應用程式的原因。您輸入任務及其分配的時間,AI Scheduler 會為您的一天建立詳細的計劃。

圖片描述

在幕後,這是使用 OpenAI 的 API 為每個任務分配優先級,並將它們分解為詳細的子任務,包括喝咖啡休息時間!它還利用 OpenAI 的函數呼叫功能以使用者定義的 JSON 物件回傳回應,以便客戶端每次都能正確使用它。此外,我們計劃在未來加入開源法學碩士,敬請期待!

示範版 AI Scheduler 可協助開發人員學習如何有效使用 OpenAI API,並激發一些 SaaS 應用程式創意!

隨處部署。容易地。

許多流行的 SaaS 新創公司都使用依賴託管的框架,這意味著您只能依賴一個提供者進行部署。雖然這些都是簡單的選擇,但它可能並不總是最適合您的應用程式。

Wasp 為您提供了部署全端應用程式的無限可能性:

  • 使用wasp deploy一鍵部署到Fly.io

  • 使用wasp build並部署 Dockerfiles 和客戶端,無論您喜歡什麼!

wasp deploy的優點在於它會自動產生和部署您的資料庫、伺服器和用戶端,並為您設定環境變數。

Open SaaS 還內建了環境變數和常數驗證器,以確保您已正確設定部署所需的所有內容,以及文件中的部署指南

圖片描述

最後,您擁有自己的程式碼,並且可以自由地將其部署到任何地方,而無需受供應商鎖定。

幫助我們,幫助你

想支持我們的免費開源計畫嗎?然後在 GitHub 上為我們加註星標以向我們表示支持🙏

https://media1.giphy.com/media/ZfK4cXKJTTay1Ava29/giphy.gif?cid=7941fdc6pmqo30ll0e4rzdiisbtagx97sx5t0znx4lk0auju&ep=v1_gifs_searchx97sx5t0znx4lk0auju&ep=v1_gifs_search}&ridgi.

https://www.github.com/wasp-lang/wasp ⭐️ 給 Open SaaS 一顆星 🙏

現在就開始建立您的 SaaS!

我們希望 Open SaaS 能夠讓更多的開發人員能夠發布他們的想法和副專案。我們也希望從開發人員那裡獲得一些回饋和意見,以便我們能夠使其成為最好的 SaaS 樣板啟動器。

因此,如果您有任何意見或發現任何錯誤,請在此處提交問題

如果您發現 Open SaaS 和/或 Wasp 很有用,最簡單的支援方法就是給我們一顆星:


原文出處:https://dev.to/wasp/the-best-free-open-source-saas-template-for-react-nodejs-263


共有 0 則留言