שימוש בסקורסור + Claude כדי ליצור אפליקציות SaaS בשכבה מלאה

שבוע שעבר, שיחררתי סרטון הדרכה שמראה איך אני משתמש ב-Cursor וב-Claude 3.5 יחד עם Open SaaS כדי ליצור אפליקציות סאס אפלייקסטיות.

הסרטון המקורי קיבל שידור מחדש מהמשפיע Rohan Paul ועכשיו יש לו יותר מ-200,000 צפיות!

אז, כיוון שנראה שזה נושא שמעניין הרבה אנשים, חשבתי לספק מידע נוסף וטיפים כדי ללוות את הסרטון ולעזור לך להתחיל בבניית אפליקציות סאס במהירות, ובתקווה לעזור לך להרוויח כסף נוסף!

ניצול Open SaaS ו-Wasp

מה שהכי חשוב הוא שאני משתמש ב-Open SaaS, מקור סטרטר ספלסטי חופשי ופתוח בחינם, בשביל React, NodeJS ו-Prisma SaaS.

Open SaaS מגיע עם כמה תכונות מדהימות מידי התחלה:

• אוטנטיקציה ספלסטית

• דוגמאות אפליקציות API Open AI

• דוגמאות העלאה קבצים ל-AWS S3

• שילוב תשלומים Stripe או Lemon Squeezy

• אבטחת סוגים ספלסטית

• לוח מנהל

• שליחת דואר אלקטרוני

• תיעוד מלא

• התקנות קלות עם פקודה אחת

אם ברצונך ללמוד יותר, בדק את דף הבית של Open SaaS.

לא רק שהתבנית מתחילה מעולה כי היא מגיעה עם המון קוד מתבנית, אלא גם בנויה על Wasp, מסגרת מלואסטק React/NodeJS עם הכל כולל.

שימוש בקובץ התצורה המרכזי של Wasp משמע שכל מה שעליך לעשות זה להגדיר תכונות במספר שורות קוד, וWasp מנהל אותן בשבילך, חוסל צורך בכתיבת המון קוד מתבנית לדברים כמו האימות, לדוגמה:

app todoApp {
  title: "ToDo App",  // visible in the browser tab
  auth: { // full-stack auth out-of-the-box
    userEntity: User, 
    methods: { google: {}, gitHub: {}, email: {...} }
  }
}

זה אומר שכשאתה עובד עם כלי קודה מועצתיים כמו Cursor וClaude, האיי-אי צריך לעשות הרבה פחות עבודה. הוא כותב קוד פשוט יותר ואתה מקבל קוד שקל יותר לניפוי באגים!

טיפים וטריקים לCursor

כשאני עובד עם Cursor, אני שמה לב שיש עדיין בעיות עם האיי-אי שמדמיין או כותב קוד מעורער. פתרתי את הבעיות הללו בשתי דרכים:

1. הוסף את התיעוד של Wasp להקשר של Cursor

2. הורא לCursor כיצד להתגבר על טעויות נפוצות שהוא עושה בהגדרות חוקי Cursor.

3. וידא שכ

1. הוסף את מסמכי Wasp להקשר של Cursor

היתרון בשימוש ב-Open SaaS, ו-Wasp כבסיס, הוא ששניהם חינמיים וקוד פתוח. למרבה המזל, זה אומר שיש לנו גם גישה לקבצי התיעוד הגולמיים שלהם, שנכתבים ב-markdown וניתנים למציאה בריפוזיטורי GitHub שלהם.

אז מה שאעשה הוא להעתיק את קבצי ה-markdown של מסמכי Wasp לתיקיה משלהם בתוך תיקיית השורש של הפרויקט עליו אני עובד. כך אוכל להתייחס למסמכים בכל פעם שיש לי שאלות או כשאני מנסה ליישם פיצ'ר חדש.

לאחר מכן, כאשר אני משתמש בממשק המלחין או הצ'אט של Cursor, אני יכול להשתמש בסמל "@" ולבחור Folder -> Docs ולכתוב הנחיה כמו זו:

בעזרת @docs כמדריך, עזור לי ליישם פונקציונליות צ'אט עם הפיצ'ר Websockets של Wasp באפליקציה שלי. צור לאפליקציה דף צ'אט…

2. הוספת כללי Cursor להימנעות מטעויות נפוצות

Cursor ו-Claude מדהימים בכתיבת קוד במספר קבצים, אך הם עדיין עלולים לעשות טעויות קטנות, כמו לדמיין ייבוא שלא קיים, או לדלג על פיצ'ר של Wasp שיכול לזרז את היישום.

לכן אני אוהב לזהות את הטעויות הנפוצות הללו ולהוסיף אותן לחלקית "חוקי הסמן" בהגדרות של הסמן. באופן אלטרנטיבי, ניתן להוסיף את החוקים הללו לקובץ .cursorrules בשורש של הפרויקט שלך אם ברצונך שהם יישארו ספציפיים לפרויקט.

מה שחשוב הוא ש, אם מוצאים שהסמן עושה באופן עקבי את אותן הטעויות, לבדוק בתיעוד, למצוא את הבעיה, ולהוסיף חוק חדש כפי שהופיעו.

הנה החוקים שמצאתי שימושיים עד כה:

• כשמייבאים פעולות של Wasp מהSDK, ודאי להשתמש ב'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 בתוך התיקיית התכונה במקום ליצור שאילתות.ts ופעולות.ts בנפרד

3. סידור את כל בסיס הקוד שלך

זה דבר פשוט. ודא שבהגדרות ה-Cursor שלך יש אפשרות לסדר את בסיס הקוד שלך, כי זה יושפע ל-Cursor לשמור על כל הפרויקט שלך (בנוסף לקבצי התיעוד) בהקשר כאשר אתה מבקש ממנו לעשות משהו בשבילך.

ישנה גם אפשרות לסידור תיקיות חדשות ברירת מחדל בתוך התפריט הצג הגדרות. ודא שזה מופעל כדי לסדר את התיקיות והתכונות החדשות באופן אוטומטי כאשר Cursor יוצר אותן

עכשיו קבלו את ה-SaaSin'

וזה בערך הכל. עכשיו אין תירוץ לא לבנות את אפליקציית ה-SaaS המגניבה שהיתה לך מתמיד.

שימוש ב-Cursor יחד עם Open SaaS ו-Wasp הוא כמו קוד חיטיב לפיתוח אפליקציות SaaS, אז נהנה מזה!

אולי כדאי לומר, אם מצאת את זה שימושי, אנחנו אוהבים כוכב על GitHub 🙏

זוהי דרך הקלה ביותר לתמוך בייצוגים פתוחים כמו שלנו.

תודה, וראשונה בפעם הבאה!