أهلاً بكم. في هذا المقال، سأستعرض لكم كيف يمكن استخدام “Cursor” بالطريقة المثلى. لمن لا يعرف، هذا التطبيق هو عبارة عن بيئة تطوير متكاملة (IDE) مدعومة بالذكاء الاصطناعي.
مزايا تطبيق Cursor
عند الدخول إلى الإعدادات ثم الميزات (Features)، نجد عدة مزايا رئيسية:
1. التوثيق (Documentation)
هذه الميزة من المزايا الرائعة في تطبيق Cursor، حيث يمكنك إضافة أي توثيق ليرجع إليه الذكاء الاصطناعي ويقدم أفضل نتيجة أثناء كتابة الشيفرة. على سبيل المثال، لإضافة التوثيق الخاص بـ Next.js، نضغط على Add Doc ونلصق رابط التوثيق. سيقوم التطبيق تلقائياً بكتابة اسم التوثيق، والذي يمكن تعديله، ثم نضغط Confirm لبدء إضافته.
2. النماذج (Models)
يمكنك اختيار نماذج لغوية متنوعة. يُفضل استخدام النماذج المتقدمة مثل Claude 3.5 Sonnet أو GPT-4o في الفترة الحالية للحصول على أفضل النتائج.
3. القواعد (Rules)
من خلال ميزة القواعد، يمكنك إضافة شروط خاصة بك ليتبعها الذكاء الاصطناعي. على سبيل المثال، يمكن وضع قاعدتين:
- القاعدة الأولى: أن يكتب أي توثيق بأسلوب بسيط وواضح.
- القاعدة الثانية: أن يقدم اقتراحاً لكل محادثة لتحسين النتائج.
لمن لا يعرف، يوجد نوعان من القواعد:
- قواعد المستخدم (User Rules): تتزامن عبر الأجهزة المختلفة عند تسجيل الدخول بنفس الحساب.
- قواعد المشروع (Project Rules): تقتصر على المشروع الحالي فقط.
4. الفهرسة (Indexing)
يقوم التطبيق بفهرسة بيانات المشروع لتسهيل الوصول إليها.
إعداد المشروع
قبل البدء، يجب تحميل إضافتين (Extensions):
- Mermaid: للتعامل مع المخططات البيانية (Diagrams) التي تسهل على الذكاء الاصطناعي فهم التعليمات.
- MDC: لإدارة محتوى المشروع بشكل منظم.
وصف المشروع
سنقوم بإنشاء صفحة هبوط (Landing Page) بسيطة بمساعدة الذكاء الاصطناعي. للبدء، سنضيف مجلداً باسم .cursor-rules وبداخله ملف project-description.mdc. هذا الملف سيحتوي على وصف لكل تفاصيل المشروع.
من المهم ضبط نوع القاعدة (Rule Type) على always لضمان إدراج هذه المعلومات في كل محادثة.
لإنشاء وصف المشروع، استخدمت الأمر التالي لإنشاء وصف لصفحة هبوط تعمل كسيرة ذاتية (CV)، مع طلب استخدام مخططات Mermaid لتوضيح الهيكل:
Write me a project description for a landing page that acts as a CV. Use mermaid diagrams to illustrate the structure.
بعد قبول الإضافات، يمكن عرض مخطط Mermaid الذي تم إنشاؤه، والذي يظهر هيكل المشروع بشكل منظم ومفصل.
استخدام بنك الذاكرة (Memory Bank)
فكرة بنك الذاكرة باختصار هي أنه ينفذ المشروع بناءً على وصف المشروع (Project Description) ويتتبع كل التغييرات التي تحدث، مما يمنع الذكاء الاصطناعي من فقدان السياق عند بدء محادثة جديدة. هذا يغني عن كتابة محادثات طويلة قد تشتت الذكاء الاصطناعي.
لإضافة بنك الذاكرة، ندخل إلى القواعد (Rules) ونضغط New File ونسميه memory-bank.mdc. ثم نضيف محتوى بنك الذاكرة ونضبط نوع القاعدة على always.
الخطوة التالية هي تهيئة بنك الذاكرة بناءً على وصف المشروع باستخدام الأمر التالي:
Initialize the memory bank based on the project description.
بعد ذلك، يقوم الذكاء الاصطناعي بإنشاء ملفات بنك الذاكرة التي تشرح التفاصيل وتحتوي على سجلات (Logs) لتتبع الأخطاء. من المهم مراجعة الملفات التي تم إنشاؤها يدوياً. على سبيل المثال، في ملف سياق التكنولوجيا (Tech Context)، قد تجد أنه استخدم TypeScript. يمكنك تعديل هذه التقنيات حسب الحاجة، مثل تغييرها إلى Next.js أو أي إطار عمل آخر.
ملاحظة هامة: إذا لم يقم التطبيق بإضافة Git، يمكنك تهيئته يدوياً (git init) لتتبع تغييرات المشروع.
تنفيذ المشروع وتصحيح الأخطاء
بعد التأكد من أن كل الملفات مضبوطة على always، نبدأ في تنفيذ المشروع خطوة بخطوة باستخدام الأمر التالي:
Implement the project based on the progress.mdc file, step by step.
بعد محاولة تشغيل المشروع، قد يظهر خطأ. لمعالجة هذا الخطأ، يمكن استخدام أداة MCB (Browser Tools). بعد تفعيل الأداة وفتح أدوات المطور في المتصفح (Inspect Element)، نطلب من الذكاء الاصطناعي حل المشكلة باستخدام الأمر التالي:
Use the browser tools to identify the problem, fix it, and take a screenshot.
يبدأ الذكاء الاصطناعي في تحليل المشكلة وحلها بناءً على السجلات ولقطة الشاشة التي التقطها.
استخدام أداة Stagehand للتعديلات السريعة
Stagehand هي إضافة رائعة أخرى. بعد تثبيتها وإضافتها إلى شريط الأدوات في المشروع، يمكن استخدامها لإجراء تعديلات مرئية مباشرة.
على سبيل المثال، إذا كان هناك زر يظهر بشكل غير صحيح، يمكن تحديده باستخدام Stagehand وطلب إضافة padding إليه. ستقوم الأداة بتعديل الشيفرة مباشرة. يمكن أيضاً تحديد عدة عناصر وتطبيق التعديلات عليها دفعة واحدة، أو تعديل النصوص بسهولة.
بهذه الطريقة، يمكن بناء مشروع كامل وتصحيح أخطائه بكفاءة عالية باستخدام أمر واحد أساسي، مع الاعتماد على أدوات الذكاء الاصطناعي المساعدة لإجراء التعديلات والتصحيحات اللازمة.