استخدام النائب + Claude لصنع تطبيقات SaaS مكونة الكاملة

أمضيت الأسبوع الماضي بإصدار درس فيديو يظهر كيفية استخدامي لـCursor وClaude 3.5، بالإضافة إلى Open SaaS، لصنع تطبيقات SaaS الكاملة الطرفة.

تم إعادة نشر الفيديو الأصلي من قبل المؤثر Rohan Paul وحالياً يحتوي على أكثر من 200,000 مشاهدة!

ولذلك، لأنه يبدو أن الكثير من الناس مهتمين بذلك، فكرت بإعطاء بعض المعلومات الإضافية والتلميحات لتوافق الفيديو ومساعدتكم على بدء بناء تطبيقات SaaS بسرعة وأملين أن نساعدكم في جني بعض الأموال الإضافية!

إستخدام Open SaaS وWasp

ما هو أهم بكثير هو أنني أستخدم Open SaaS، وهو مفتوح المصدر، مجاني، بداية SaaS كاملة بـReact، NodeJS، وPrisma.

يأتي Open SaaS مع العديد من المميزات الرائعة مباشرة:

• المصادقة الكاملة الطرفة

• أمثلة تطبيقات API Open AI

• أمثلة رفع ملفات AWS S3

• تكامل الدفعات Stripe أو Lemon Squeezy

• المصادقة الكاملة الطرفة النوعية

• لوحة التحكم الإدارية

• إرسال البريد الإلكتروني

• وثائق كاملة

• تنشيطات سهلة، بأمر واحد

إذا كنت تريد معرفة المزيد، اشاهد الصفحة الرئيسية لـOpen SaaS.

ليس فقط القالب جيد للبدء لأنه يأتي مع الكثير من الكود البناء الأساسي، ولكنه مبني أيضًا على Wasp، إطار رياكت/نوديجسكي كامل الطريقة مع البطاريات المضمنة.

استخدام 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 إلى سيارة المؤشر

الفائدة من استخدام Open SaaS والهيكل الخاص بـ Wasp هي أنهما مجانيان ومفتوحين بمنابع. لحسن الحظ ، هذا يعني أننا أيضًا نملك أسلوب الوصول إلى ملفات توثيقهم الأساسية المكتوبة بالماركداوند ويمكن العثور عليها في موارد GitHub الخاصة بهم كلا.

لذلك ما سأفعله هو نسخ ملفات مستندات Wasp المكتوبة بالماركداوندإلى مجال من المجال الرئيسي لمشروع التطوير الذي أعمل فيه. ثم يمكنني أن أرجع إلى المستندات في أي وقت يكون لدي أسئلة أو أحاول تطبيق وظيفة جديدة.

ثم، عندما أستخدم سيارة المؤشر لـ Cursor أو واجهة المحادثة، يمكنني استخدام رمز “@” واختيار Folder -> Docs وكتابة تعبير مثل هذا:

وفقاً للمستندات @docs كدليل، ساعدني على تطبيق وظيفة المحادثة مع ميزة Wasp النقار الشبكي في تطبيقي. أعطي تطبيقك صفحة للمحادثات…

2. إضافة قواعد Cursor لتجنب الأخطاء الشائعة

سيارة Cursor وكلاude أفضل في كتابة البرامج عبر مجموعة من الملفات ، ومع ذلك يمكن أن يخطئوا بعض الأخطاء الصغيرة ، مثل تخيل الاستيرادات أو تخطي وظيفة Wasp تجعل التنفيذ أسرع.

لهذا أحب تحديد هذه الأخطاء الشائعة وإضافتها إلى قسم قواعد المؤشر في 设置. بدلاً من ذلك، يمكنك إضافة هذه القواعد إلى ملف .cursorrules في جذر مشروعك إذا كنت تريد أن يبقى خاص بالمشروع.

ما يهم هو أنه إذا وجدت أن ماسكرور يؤكد بالتوالي على نفس الأخطاء، يجب أن ترفع المساعدة الورقية وتجد المشكلة وتضيف قاعدة جديدة كما يظهر.

هذه هي القواعد التي وجدت أنها مفيدة حتى الآن:

• حين تصدر ما يتم إستعماله من الوظائف التي تقوم بها واسب الى البرمجيات التي تتضمنها الوظائف، تأكد من استخدام ‘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 داخل الdirectory الخاص بالميزة بدلاً من ملفات queries.ts و actions.ts منعزلة.

3. توفير فهرس للبرنامج بأكمله

هذا الأمر البسيط. تأكد من أن لديك خيار في 设置 Cursor لتوفير فهرس للبرنامج، وهذا يجعل المرشد Cursor يتمكن أسهل من إبقاء كامل المشروع (والمستندات التعليمية) في السياق عندما تطلب منه أن يقوم بشيء لك.

وهناك خيار أيضًا لـIndex new folders by default في قائمة الإختيار Show settings. تأكد من تمكينه لتوفير فهرس للمجالات الجديدة والميزات بشكل تلقائي حينما يتم إنشائهم من قبل Cursor

حاول الآن إنشاء SaaSin’

وهذا كل شيء. الآن لا يوجد من سبب لعدم بناء تلك التطبيقات SaaS المثيرة التي كان لديك لفترة طويلة.

باستخدام Cursor مع Open SaaS و Wasp يمكنك أن تكون مكررًا لتطوير تطبيقات SaaS ، لذا إمتلك المتعة به!

وبالمناسبة، إذا وجدت هذه المعلومات مفيدة، نحن سنحب أن يكون لدينا نجمة في GitHub

إنه أسهل طريقة لدعم المبادرات المفتوحة المصدر مثل مبادرتنا.

شكراً لكم و نحن سنرى في المرة القادمة!