原始影片被影響者 Rohan Paul 轉發,目前已超過 200,000 次觀看!

{% embed https://x.com/hot_town/status/1831679375269310890 %}

因此,因為這似乎是一個許多人感興趣的話題,我想提供一些額外的信息和技巧,來輔助這部影片,幫助你快速開始建置 SaaS 應用程式,並希望能幫助你賺取一些額外的收入!

利用 Open SaaS 和 Wasp

最重要的是,我使用 Open SaaS,一個 免費、開源 的全端 React、NodeJS 和 Prisma SaaS 起始架構作為我的基礎。

圖片描述

Open SaaS 預先整合了一堆很酷的功能:

  • 全端身份驗證
  • Open AI API 應用範例
  • AWS S3 文件上傳範例
  • Stripe 或 Lemon Squeezy 付款整合
  • 全端類型安全
  • 管理儀表板
  • 郵件發送
  • 完整的文件
  • 簡易的一鍵部署

如果你想了解更多,請查看 Open SaaS 首頁

這個範本不僅是個很好的起點,因為它有大量的範本代碼,而且它還基於 Wasp,這是一個包含各種元件的全端 React/NodeJS 框架。

Wasp 使用一個中心設定檔,意味著你只需要用幾行代碼定義功能,Wasp 就會為你管理這些功能,省去編寫大量的範本代碼的需要,例如身份驗證:

app todoApp {
  title: "待辦事項應用程式",  // 在瀏覽器標籤中可見
  auth: { // 預設的全端身份驗證
    userEntity: User, 
    methods: { google: {}, gitHub: {}, email: {...} }
  }
}

這意味著,當使用像 Cursor 和 Claude 這樣的 AI 輔助編程工具時,AI 需要做的工作少得多。它編寫的代碼簡單很多,你得到的代碼也更容易除錯!

Cursor 提示與技巧

當我使用 Cursor 時,注意到 AI 偶爾會產生幻覺或編寫有錯誤的代碼。我用兩種方法解決了這些問題:

  1. 將 Wasp 文件添加到 Cursor 的上下文中
  2. 在 Cursor 規則設置中指導 Cursor 如何克服其常見錯誤。
  3. 確保為你的整個代碼庫建立索引

1. 將 Wasp 文件添加到 Cursor 的上下文中

使用 Open SaaS 和 Wasp 作為底層框架的好處在於,它們都是免費且開源的。幸運的是,這意味著我們也可以訪問它們的原始文檔文件,這些文件是用 Markdown 編寫的,可以在各自的 GitHub 倉庫中找到。

圖片描述

所以我會把 Wasp 文檔 Markdown 文件 複製到我正在工作的專案根目錄中的一個單獨目錄。然後,每當我有問題或嘗試實現新功能時,我就可以參考這些文檔。

圖片描述

然後,當我使用 Cursor 的作曲家或聊天介面時,我可以使用 "@" 符號並選擇 Folder -> Docs,然後寫下這樣的提示:

使用 @docs 作為指南,幫助我在我的應用程式中實現帶有 Wasp Websockets 功能的聊天功能。給應用程式一個聊天頁面...

2. 添加 Cursor 規則以避免常見錯誤

Cursor 和 Claude 在跨多個文件寫代碼方面非常出色,但它們仍然可能會犯小錯誤,例如產生錯誤的導入或跳過某個 Wasp 特性,使實現變得更快。

圖片描述

這就是為什麼我喜歡識別這些常見錯誤並將它們添加到 Cursor 設定中的 Cursor 規則部分。或者,如果你希望這些規則保持專案特定,可以將這些規則添加到專案根目錄中的 .cursorrules 文件中。

重要的是,如果你發現 Cursor 一直犯相同的錯誤,請檢查文檔,找出問題,並隨著錯誤的出現添加新的規則。

以下是我至今發現的有用規則:

  • 從 SDK 導入 Wasp 函數時,確保使用 'wasp' 而不是 '@wasp',例如 import { Task } from 'wasp/entities'import { type GetTasks } from 'wasp/server/operations'import { getTasks, useQuery } from 'wasp/client/operations'
  • schema.prisma 中添加新實體(即模型),而不是 main.wasp 文件
  • 不要在 main.wasp 文件中添加依賴項,而是指示通過 npm install 來安裝它們。
  • 在創建 Wasp 操作(查詢和動作)時,將它們合併到特性目錄中的 operations.ts 文件中,而不是分開的 queries.ts 和 actions.ts 文件中

3. 為你的整個代碼庫建立索引

這是一個簡單的步驟。確保在你的 Cursor 設定中,你有選項來對代碼庫進行索引,因為這會讓 Cursor 更容易保持整個專案(加上文檔文件)的上下文,當你請求它為你做某事時。

圖片描述

顯示設定 下拉選單中,還有一個選項可以 預設索引新資料夾。確保這個選項已啟用,以便在 Cursor 創建新資料夾和功能時自動索引它們。

現在開始進行 SaaS 開發吧!

這就是全部內容。現在你沒有理由不去實現你一直想要的酷炫 SaaS 應用程式創意。

使用 Cursor、Open SaaSWasp 就像是 SaaS 應用程式開發的作弊碼,所以好好享受吧!

哦,順便說一下,如果你覺得這篇文章有用,我們希望你能在 GitHub 上給我們一顆星。

{% cta https://www.github.com/wasp-lang/wasp %} ⭐️ 在 GitHub 給 Wasp 點星 🙏 {% endcta %}

這是支持我們這樣的開源計畫的最簡單方式。


原文出處:https://dev.to/wasp/using-cursor-claude-to-make-full-stack-saas-apps-2aj3


共有 0 則留言