الدرس 1

نصائح ذهبية — هذا كل ما تحتاج معرفته للبدء

تثبيت Claude Code بسطر واحد.

افتح الطرفية (الشاشة السوداء) والصق السطر التالي. هذا كل شيء.

للوكيل: “curl -fsSL https://claude.ai/install.sh | bash”

يحتاج مستخدمو Windows إلى تثبيت WSL (بيئة Linux) أولاً. نفّذ “wsl –install” في PowerShell ثم أعد التشغيل.

5 كلمات مفتاحية أساسية عند إعطاء الأوامر

  1. API — بروتوكول تواصل بين البرامج. “اصنع لي API”
  2. الواجهة الأمامية — الشاشة المرئية. “اصنع لي واجهة بـ React”
  3. قاعدة البيانات (DB) — مكان تخزين البيانات. “خزّن في DB”
  4. Commit — نقطة حفظ الحالة الحالية. “اعمل commit”
  5. النشر — رفع المشروع على الإنترنت. “انشر المشروع”

هذه الكلمات الخمس كافية لتحديد الاتجاه. الذكاء الاصطناعي يفهم الباقي.

ذاكرة الذكاء الاصطناعي تُدار بثلاثة ملفات

  • CLAUDE.md — قواعد المشروع. يقرأه الذكاء الاصطناعي تلقائياً في بداية كل جلسة. اكتب فيه “هكذا يعمل فريقنا”
  • requirements.md — سجل قراراتك. اكتب القرارات التجارية مثل “خصم VIP هو 10%” مع التاريخ
  • progress.md — إلى أين وصلت. يجعل عبارة “أكمل من حيث توقفت” تعمل في الجلسة الجديدة

جميع الملفات بصيغة Markdown. يستطيع غير المبرمجين قراءتها وكتابتها.

نصائح للحوار مع الوكيل

  • أعطِ أمراً واحداً في كل مرة. “اصنع API تسجيل الدخول أولاً” أفضل من “اصنع تسجيل الدخول والتسجيل ولوحة التحكم كلها”
  • عند حدوث خطأ، يكتشفه Claude Code ويصلحه تلقائياً. لا حاجة لنسخه يدوياً
  • عندما يتجاوز الحوار 100 دورة، تنخفض جودة الذكاء الاصطناعي. ابدأ جلسة جديدة مع تحديث الملفات الثلاثة

تجربة سريعة

ثبّت Claude Code وأجرِ أول محادثة. 5 دقائق كافية.

  1. أنشئ مجلد المشروع في الطرفية وشغّل Claude Code

للوكيل: “mkdir -p ~/projects/my-first-app && cd ~/projects/my-first-app && claude”

  1. سجّل الدخول من المتصفح (مرة واحدة فقط)

  2. ابدأ أول محادثة

للوكيل: “أنشئ في هذا المجلد خادم Go Gin. عنوان API واحد يُرجع Hello, World على المنفذ 8080.”

سينشئ الذكاء الاصطناعي الملفات، يشغّل الخادم، ويتحقق. افتح http://localhost:8080 في المتصفح.


لماذا يجب أن تأمر بهذه الطريقة

لقد جربت بالفعل أن تطلب من الذكاء الاصطناعي صنع شيء بالكلام. ظهرت الشاشة، عملت الأزرار، وتم حفظ البيانات. لكن سؤالاً واحداً بقي:

“هل يمكنني الاستمرار في تطوير هذا؟”

للإجابة على هذا السؤال، يجب أن نرى بدقة أين نقف الآن. ما الأدوات المتاحة، ما المصطلحات المتداولة، وما الأنماط المستخدمة في العمل. الدرس 1 هو وقت فتح الخريطة. من الدرس 2 سنشق الطرق عليها.

خريطة أدوات البرمجة بالذكاء الاصطناعي

هناك عدة أدوات تكتب الكود عند إعطائها أوامر بالكلام. تنقسم إلى فئتين رئيسيتين.

أدوات المحرر — ذكاء اصطناعي مدمج في محرر الكود.

الأداةالميزات
Cursorمحرر AI مبني على VS Code. تعدّل الكود بينما تعطي الأوامر للذكاء الاصطناعي
GitHub Copilotإضافة لـ VS Code/JetBrains. إكمال تلقائي ومحادثة
Windsurfمحرر AI مشابه لـ Cursor

أدوات المحرر مُحسّنة لتعديل الكود مع رؤيته. جيدة للمبرمجين. لكن لمن لا يقرأ الكود، ما يظهر على الشاشة مجرد حروف بلا معنى.

وكلاء الطرفية — ذكاء اصطناعي يقرر وينفذ بنفسه في الطرفية (الشاشة السوداء).

الأداةالميزات
Claude Codeوكيل طرفية من Anthropic. يستخدم نموذج Claude
Codex CLIوكيل طرفية من OpenAI. يستخدم نماذج GPT/o

وكلاء الطرفية لا يقتصرون على تحرير الكود، بل يقررون بأنفسهم تنفيذ الأوامر، فحص الاختبارات، وإنشاء الملفات. عندما تطلب “اصنع واجهة”، ينشئ الملفات، يشغّل الخادم، يصلح الأخطاء، ويتحقق مرة أخرى. حلقة التحقق الذاتية هذه هي الفرق الجوهري عن أدوات المحرر.

لماذا Claude Code؟

هذه الدورة تعتمد على Claude Code كمعيار.

Claude Code هو حالياً أقوى وكيل طرفية في التعامل الذاتي مع المهام متعددة الملفات المعقدة. التوكنات هي وحدة القطع النصية التي يقرأها الذكاء الاصطناعي. 200K (200 ألف) تعادل رواية واحدة، و1M (مليون) تعادل خمس روايات. يدعم Claude Code سياقاً أساسياً بـ 200K توكن، ونموذج Opus 4.6 يدعم حتى 1M توكن، مما يسمح بفهم المشروع بالكامل وتعديل ملفات متعددة في آن واحد. عندما تطلب “اصنع هذه الميزة”، يبحث عن الملفات ذات الصلة، يكتب الكود، يشغّل الاختبارات، ويصلح الأخطاء في حلقة يكررها بنفسه. وضع الوكيل في محررات مثل Cursor يحاول شيئاً مشابهاً، لكن في نطاق استكشاف الملفات وعمق القرار الذاتي، فإن وكلاء الطرفية متقدمون بخطوة.

ماذا عن Codex CLI؟ وكيل طرفية من OpenAI بنفس المفهوم. البرنامج مبني بسرعة، ومتاح مع اشتراك ChatGPT. لكن الكاتب لم يستخدمه في الإنتاج، لذا لا تتناوله هذه الدورة. تعلّم مبادئ Claude Code ينطبق بنفس الطريقة على Codex CLI. الأدوات تختلف لكن المنهجية واحدة.

تثبيت Claude Code

هذه الدورة تعتمد على بيئة Ubuntu (أو WSL). معظم الأوامر تعمل لمستخدمي Mac أيضاً.

المتطلبات المسبقة

  1. حساب Anthropic: سجّل في https://console.anthropic.com
  2. خطة اشتراك: اختر بين Claude Pro ($20/شهر) أو Max ($100/شهر أو $200/شهر). Max أكثر سخاءً في حدود الاستخدام
  3. Ubuntu أو WSL: يحتاج مستخدمو Windows لتثبيت WSL أولاً

مستخدمو Windows: تثبيت WSL

افتح Windows PowerShell بصلاحيات المسؤول ونفّذ:

wsl --install

هذا السطر الواحد يفعّل ميزة WSL، يحمّل نواة Linux، ويثبّت Ubuntu. بعد إعادة التشغيل، يُفتح Ubuntu تلقائياً ويسأل عن اسم المستخدم وكلمة المرور. أدخل اسماً قصيراً بالأحرف الصغيرة.

تنبيه: جميع العمليات التالية تتم داخل طرفية Ubuntu. تثبيت Claude Code من PowerShell أو CMD يُنتج خطأ “Windows is not supported”.

الطريقة 1: التثبيت الأصلي (موصى بها)

الطريقة الأبسط بدون الحاجة لـ Node.js.

curl -fsSL https://claude.ai/install.sh | bash

بعد انتهاء التثبيت تحقق:

claude --version

إذا ظهر رقم الإصدار، فقد نجح التثبيت.

الطريقة 2: التثبيت عبر npm

هذه الطريقة لمن لديه خبرة سابقة بـ Node.js. إذا كنت مبتدئاً استخدم الطريقة 1.

للاستخدام مع Node.js موجود أو عند الحاجة لإدارة الإصدارات.

الخطوة 1 — تثبيت Node.js (يتطلب 18 أو أعلى)

# تثبيت nvm (مدير إصدارات Node)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

# أغلق الطرفية وأعد فتحها أو نفّذ:
source ~/.bashrc

# تثبيت Node.js LTS
nvm install --lts

# التحقق
node --version   # v22.x.x أو أعلى
npm --version    # 10.x.x أو أعلى

الخطوة 2 — تثبيت Claude Code

npm install -g @anthropic-ai/claude-code

تنبيه: لا تستخدم sudo npm install -g. يسبب مشاكل في الصلاحيات ومخاطر أمنية.

التشغيل الأول والمصادقة

# انتقل لمجلد المشروع (أنشئه إن لم يكن موجوداً)
mkdir -p ~/projects/my-first-app
cd ~/projects/my-first-app

# شغّل Claude Code
claude

عند التشغيل لأول مرة، يُفتح المتصفح ويطلب تسجيل الدخول في Anthropic. بعد تسجيل الدخول تكتمل المصادقة، وفي المرات التالية يتصل تلقائياً.

نصيحة WSL: ضع المشروع حتماً في نظام ملفات Linux (/home/اسم_المستخدم/). وضعه في جهة Windows (/mnt/c/) يجعل قراءة الملفات بطيئة للغاية.

قائمة التحقق من التثبيت

  • هل يُخرج claude --version رقم إصدار
  • هل يظهر موجه الأوامر عند تشغيل claude
  • هل اكتملت المصادقة (نجاح تسجيل الدخول في المتصفح)

الكلمات المفتاحية للأوامر — القاموس الكامل

لإعطاء الأوامر للذكاء الاصطناعي دون قراءة الكود، يجب معرفة الحد الأدنى من الكلمات المفتاحية. لا حاجة لتعلم كل مصطلحات البرمجة. يكفي أن تعرف ما يكفي لتحديد الاتجاه.

لا تحتاج للحفظ الآن. الجدول أدناه هو قاموس. اطلع عليه مرة، وارجع إليه لاحقاً عندما يقول الذكاء الاصطناعي شيئاً لا تفهمه.

الخلفية (Backend) — المحرك الخفي

البرنامج على جانب الخادم غير المرئي للمستخدم. يستقبل البيانات، يعالجها، يخزنها، ويُرجعها.

"اصنع API بـ Go Gin"
"اصنع خلفية بـ FastAPI"
"اصنع خادم Node.js Express"
المصطلحالمعنىالتشبيه
APIبروتوكول تواصل بين البرامجنموذج الطلب في المطعم
Endpointعنوان كل وظيفة في الـ APIكل عنصر في القائمة
الخادمبرنامج يعمل 24 ساعة ويعالج الطلباتالمطبخ
Goلغة برمجة من Google. سريعة وبسيطة
Ginأداة (إطار عمل) لصنع API بـ Go
FastAPIأداة لصنع API بـ Python. سهلة التعلم
Node.jsبيئة لصنع خوادم بـ JavaScript

الواجهة الأمامية (Frontend) — الشاشة المرئية

الشاشة التي يراها المستخدم ويتفاعل معها. تعمل في المتصفح.

"اصنع واجهة بـ React"
"اصنع صفحة تسجيل الدخول"
"اعرض القائمة كجدول"
المصطلحالمعنىالتشبيه
Reactأداة JavaScript لصنع الواجهات. الأكثر استخداماً حالياً
Componentجزء من الواجهة (زر، حقل إدخال، قائمة…)قطعة ليغو
SPAتطبيق يتغير المحتوى بدون إعادة تحميل الصفحة. مثل محادثات الواتساب
CSSلغة تحدد مظهر الشاشة (اللون، الحجم، التوزيع)التصميم الداخلي

قاعدة البيانات — جهاز الذاكرة

المكان الذي تُخزّن فيه البيانات بشكل دائم. تبقى البيانات حتى لو أُطفئ الخادم.

"أنشئ قاعدة بيانات PostgreSQL"
"أنشئ جدول مستخدمين"
"خزّن في DB"
المصطلحالمعنىالتشبيه
PostgreSQLأكثر قاعدة بيانات مفتوحة المصدر موثوقيةخزنة
جدول (Table)بيانات منظمة في صفوف وأعمدةورقة إكسل
DDLلغة تعريف بنية الجداولإعداد عناوين أعمدة إكسل
CRUDإنشاء (Create)، قراءة (Read)، تحديث (Update)، حذف (Delete)إضافة/عرض/تعديل/حذف صفوف في إكسل
SQLلغة الأوامر لقاعدة البيانات

النشر — الإطلاق للعالم

عملية رفع ما صنعته على الإنترنت ليتمكن الآخرون من الوصول إليه.

"انشر بـ Docker"
"ارفع على AWS"
"اربط النطاق"
المصطلحالمعنىالتشبيه
Dockerأداة تضع البرنامج في صندوق ليعمل بنفس الطريقة في أي مكانحاوية نقل
AWSخدمات سحابية من Amazon. خوادم، تخزين، نطاقاتمبنى مستأجر
النشر (deploy)رفع الكود على الخادم وتشغيلهافتتاح متجر
CI/CDخط أنابيب يختبر وينشر تلقائياً عند تغيير الكودنظام توصيل آلي

مصطلحات شائعة أخرى

المصطلحالمعنىالتشبيه
Gitأداة إدارة إصدارات الكود. نقطة حفظحفظ اللعبة
Commitفعل حفظ الحالة الحاليةضغط زر الحفظ
GitHubخدمة لرفع مستودعات Git على الإنترنتالحفظ السحابي
الطرفيةشاشة سوداء لإعطاء أوامر نصية للكمبيوترإرسال رسالة نصية للمساعد
مجلد/دليلصندوق لتصنيف الملفاتدرج خزانة الملفات
JSONصيغة قياسية لتبادل البيانات. تُكتب بأسماء وقيم داخل { }نموذج إرسال الطرد
متغير البيئةطريقة لحفظ كلمات المرور والإعدادات خارج الكودمفتاح في خزنة

لا حاجة لحفظ هذه المصطلحات. حتى لو قلت للذكاء الاصطناعي “ذلك الشيء الذي يحفظ البيانات”، سيفهم. لكن لفهم ما يقوله الذكاء الاصطناعي، من الجيد أن تألف هذه المصطلحات.

الآن بعد معرفة الكلمات المفتاحية، السؤال التالي: هل يجب شرح كل هذا في كل مرة تعطي أمراً؟ هل يتذكر الذكاء الاصطناعي ما فعله سابقاً مع كبر المشروع؟ هنا تظهر إدارة السياق.

إدارة السياق — التعامل مع ذاكرة الذكاء الاصطناعي

إذا سألت الذكاء الاصطناعي ما هو الأهم، سيجيب معظمهم “نموذج ذكي”. خطأ. السياق.

السياق (context) هو كل المعلومات التي يتذكرها الذكاء الاصطناعي حالياً. ما قلته، ما قاله الذكاء الاصطناعي، ملفات المشروع، القواعد — كل هذا سياق. المشكلة أن هذه الذاكرة لها حدود.

الذكاء الاصطناعي ينسى

مع طول الحوار، ينسى الذكاء الاصطناعي ما قيل سابقاً. إذا قلت “ميزة تسجيل الدخول التي صنعتها قبل قليل” وأجاب “أي ميزة تسجيل دخول؟"، فقد تلاشى السياق.

الجلسة الجديدة تبدأ بصفحة بيضاء. المحادثة التي استمرت طوال الليل تتبخر. لهذا لا تعمل عبارة “أكمل من حيث توقفت”.

فماذا نفعل؟ نُخرج الذاكرة إلى ملفات.

CLAUDE.md — دستور المشروع

CLAUDE.md هو ملف خاص يُوضع في مجلد المشروع. يقرأه Claude Code تلقائياً في بداية كل جلسة. دون أن تشرح في كل مرة، يعرف الذكاء الاصطناعي قواعد المشروع منذ البداية.

تخيّله كوثيقة الإحاطة الصباحية لعضو فريق جديد في أول يوم. “فريقنا يعمل هكذا، هذا ممنوع، والمهم هنا.”

فيما يلي مثال على ما يُكتب في CLAUDE.md. ليس للتنفيذ الآن، بل يكتبه في الملف ويقرأه الذكاء الاصطناعي كل مرة.

# CLAUDE.md

## نظرة عامة على المشروع
تطبيق قائمة مهام. خلفية Go Gin + واجهة React + SQLite.

## الأوامر
- `go run main.go` — تشغيل الخادم (المنفذ 8080)
- `cd frontend && npm run dev` — تشغيل الواجهة

## القواعد
- استجابات API دائماً JSON
- رسائل الخطأ بالعربية
- عند إضافة ميزة جديدة، تأكد أن الميزات الحالية لم تتعطل

## البنية
- `main.go` — نقطة دخول الخادم
- `internal/handler/` — معالجات API
- `internal/model/` — نماذج البيانات
- `frontend/src/pages/` — ملفات الواجهة

أهم خاصية لهذا الملف: يمكن لغير المبرمج قراءته وكتابته. Markdown صيغة كتابة بسيطة تستخدم # للعناوين و- للقوائم. الصيغة هكذا، والمحتوى لغة طبيعية.

requirements.md — سجل القرارات

طلبت من الذكاء الاصطناعي “عند تسجيل الدخول أظهر لوحة التحكم”، ونفّذ ذلك. بعد أسبوع طلبت “غيّر الشاشة الأولى بعد تسجيل الدخول إلى صفحة الإعدادات”? الذكاء الاصطناعي لا يعرف ما كان القرار الأصلي. ربما نسيته أنت أيضاً.

سجّل القرارات في ملف.

# requirements.md

## المصادقة
- دعم تسجيل الدخول عبر OAuth فقط
- عند نجاح تسجيل الدخول الانتقال للوحة التحكم (قرار 2026-05-20)
- لا حاجة لاستعادة كلمة المرور (لأنه OAuth)

## إدارة المهام
- المهمة تحتوي على عنوان، محتوى، موعد نهائي، أولوية
- المهام المكتملة لا تُحذف بل تُعلَّم كمكتملة (قرار 2026-05-21)
- الأولوية 3 مستويات: عالية/عادية/منخفضة (قرار 2026-05-21)

سبب إضافة التاريخ هو لتتبع “لماذا فعلنا هذا؟” لاحقاً.

progress.md — مؤشر الموقع الحالي

# progress.md

## مكتمل
- [x] إعداد المشروع الأولي
- [x] إنشاء جدول المستخدمين
- [x] API تسجيل الدخول
- [x] API CRUD للمهام

## قيد التنفيذ
- [ ] واجهة قائمة المهام

## مخطط
- [ ] فلتر الأولوية
- [ ] تنبيهات الموعد النهائي

عندما تقول للذكاء الاصطناعي “أكمل من حيث توقفت”، يعرف بالضبط إلى أين وصلت إذا كان هذا الملف موجوداً.

لماذا ملفات؟

المفتاح لتحكم غير المبرمج بالذكاء الاصطناعي في مشروع طويل الأمد هنا. لا تستطيع قراءة الكود، لكن تستطيع قراءة المستندات. افتح CLAUDE.md وتحقق “هل هذه القاعدة صحيحة؟"، أضف قرارات جديدة في requirements.md، وحدد موقعك الحالي في progress.md.

لا تترك ذاكرة الذكاء الاصطناعي للذكاء الاصطناعي. أخرجها إلى ملفات وأمسكها بيدك.

أنماط البرمجة بالإحساس

البرمجة بالإحساس (vibe coding) — المصطلح الذي صاغه Andrej Karpathy. البرمجة بالشعور (vibe). لا تقرأ الكود. تتحقق بالنقر والإدخال على الشاشة. عند حدوث خطأ تنسخ رسالة الخطأ وترميها للذكاء الاصطناعي. (Claude Code يفعل هذا تلقائياً — يكتشف الخطأ ويحاول الإصلاح بنفسه.)

ما تفعله بالفعل هو البرمجة بالإحساس. بتنظيم منهجي يصبح:

التدفق الأساسي

فكرة → أمر للذكاء الاصطناعي → التحقق من النتيجة → طلب تعديل → تكرار

المحادثة الفعلية تسير هكذا:

الخطوة 1: ابدأ بهيكل البيانات

"انظر لملف الإكسل هذا. صمم جدول DB لتخزين هذه البيانات."

يقترح الذكاء الاصطناعي هيكل الجدول. تطلب تعديلات مثل “هذا العمود غير ضروري”، “صيغة التاريخ هكذا”.

الخطوة 2: صنع API

"اصنع CRUD API لهذا الجدول."

تظهر الـ API. وظائف حفظ واستعلام البيانات. لا شاشة في هذه المرحلة. لكن الذكاء الاصطناعي يختبرها مباشرة من الطرفية.

الخطوة 3: صنع الواجهة

"اصنع واجهة React تستدعي هذا الـ API. بإمكانية العرض، الإضافة، التعديل، والحذف."

تحقق في المتصفح. تظهر القائمة، يوجد زر إضافة، والإدخال يُحفظ.

الخطوة 4: إضافة ميزات

"أضف ميزة البحث."
"أضف زر فلترة المكتملة فقط."
"رتّب حسب الأولوية."

هذا هو الوقت الذهبي للبرمجة بالإحساس. حتى 3 ميزات سحرية السرعة.

طريقة التحقق

لأنك لا تقرأ الكود، طريقة التحقق واحدة: جرّبه بنفسك.

  • افتح الواجهة في المتصفح وانقر
  • أدخل بيانات وتحقق أنها حُفظت
  • استعلم من القائمة مرة أخرى
  • عدّل واحذف

عند حدوث خطأ؟ يكتشفه Claude Code ويحاول الإصلاح تلقائياً. لا حاجة للنسخ واللصق يدوياً.

الذكاء الاصطناعي يصلح بنفسه.

حدود هذا النمط

البرمجة بالإحساس سريعة بشكل مذهل. لكن بعد 5 ميزات تبدأ أشياء غريبة. تضيف ميزة جديدة فتتعطل ميزة قديمة. تطلب من الذكاء الاصطناعي الإصلاح فيتعطل شيء آخر. تبدأ لعبة ضرب الخلد.

لماذا؟ الإجابة في الدرس 2. الآن يكفي أن تعرف أن هذا النمط يعمل، وأن له حدوداً.

دليل استخدام Claude Code العملي

ثبّتناه، فلنستخدمه. نتعلم الاستخدام الأساسي.

البدء والإنهاء

# ابدأ في مجلد المشروع
cd ~/projects/my-first-app
claude

# تحدث داخل Claude Code
# للإنهاء:
/exit

الحوار الأساسي

تحدث بلغة طبيعية داخل Claude Code.

> أنشئ في هذا المجلد خادم Go Gin. عنوان API واحد يُرجع "Hello, World" على المنفذ 8080.

سينشئ الذكاء الاصطناعي الملفات، يثبّت الحزم اللازمة، ويكتب الكود. يسأل أثناء العمل “هل أنشئ هذا الملف؟"، “هل أنفّذ هذا الأمر؟”. اسمح له بالمتابعة.

أوامر مفيدة

يمكن استخدام أوامر تبدأ بـ (/) داخل Claude Code.

الأمرالوظيفة
/exitإنهاء Claude Code
/clearمسح سجل المحادثة (إعادة ضبط السياق)
/compactتلخيص المحادثة لتوفير السياق
/helpالمساعدة

نصائح الحوار

  1. أعطِ أمراً واحداً في كل مرة. “اصنع API تسجيل الدخول أولاً” أفضل نتائج من “اصنع تسجيل الدخول والتسجيل ولوحة التحكم كلها”.

  2. كن محدداً. “عند حدوث خطأ أظهر رسالة حمراء للمستخدم” أفضل من “اجعله أفضل”.

  3. Claude Code يصلح الأخطاء تلقائياً. يكتشف الأخطاء ويحاول الإصلاح بنفسه. لا حاجة للنسخ واللصق.

  4. تحقق بشكل متقطع. التحقق كل 2-3 عناصر في المتصفح أأمن من طلب 10 أشياء دفعة واحدة والتحقق في النهاية.

  5. عند طول السياق ابدأ من جديد. عندما تتجاوز المحادثة 100 دورة تنخفض جودة استجابات الذكاء الاصطناعي. أعد الضبط بـ /clear أو شغّل claude في طرفية جديدة.

التطبيق العملي: صنع تطبيق قائمة مهام

كفى نظرياً. لنصنع شيئاً عملياً.

الهدف

صنع تطبيق قائمة مهام في جلسة Claude Code واحدة، وإضافة 3 ميزات. الوقت الإجمالي 30-60 دقيقة.

المتطلبات المسبقة

يجب أن يكون التالي مثبتاً قبل البدء. إذا لم يكن موجوداً، اطلب من Claude Code.

  • تثبيت Go: اطلب من Claude Code "ثبّت لي Go"
  • تثبيت Node.js: اطلب من Claude Code "ثبّت لي Node.js LTS"
  • التحقق من Claude Code: هل يعمل claude --version

نصيحة: لا تقلق إذا ظهر شيء لا تفهمه أثناء التثبيت. اسأل Claude Code “كيف أفعل هذا؟” وسيتولى الأمر.

التحضير

# إنشاء مجلد المشروع
mkdir -p ~/projects/todo-app
cd ~/projects/todo-app

# تشغيل Claude Code
claude

الخطوة 1: صنع التطبيق الأساسي

أدخل التالي في Claude Code.

اصنع تطبيق ويب لقائمة المهام.

الحزمة التقنية:
- الخلفية: Go + Gin
- الواجهة: React
- قاعدة البيانات: SQLite (ملف DB، لتعمل بدون تثبيت)

الميزات:
- إضافة مهمة (عنوان، محتوى)
- عرض قائمة المهام
- تعليم مهمة كمكتملة
- حذف مهمة

الواجهة بسيطة. كل شيء في صفحة واحدة.
خادم واحد يعرض الواجهة أيضاً.

سيبدأ الذكاء الاصطناعي العمل. ينشئ الملفات، يثبّت الحزم، ويكتب الكود بشكل مستقل. عند ظهور طلب إذن، وافق.

بعد الانتهاء شغّل الخادم وتحقق في المتصفح.

شغّل الخادم. وأعطني رابط الوصول.

افتح http://localhost:8080 في المتصفح. أضف مهمة، علّمها كمكتملة، واحذفها.

الخطوة 2: إضافة ميزة — الأولوية

أضف أولوية للمهام. 3 مستويات: عالية/عادية/منخفضة.
- عند الإضافة يمكن اختيار الأولوية
- تظهر الأولوية في القائمة
- العالية بالأحمر، العادية بالأزرق، المنخفضة بالرمادي

تحقق في المتصفح. أضف مهمة مع اختيار الأولوية.

الخطوة 3: إضافة ميزة — الموعد النهائي

أضف موعد نهائي للمهام.
- عند الإضافة اختر التاريخ من التقويم
- يظهر الموعد النهائي في القائمة
- إذا تجاوز الموعد يُبرز بخلفية حمراء

تحقق في المتصفح. تحقق أن المهمة بموعد أمس تظهر بخلفية حمراء.

الخطوة 4: إضافة ميزة — البحث

أضف ميزة بحث في المهام.
- حقل بحث فوق القائمة
- فلترة المهام التي تحتوي العنوان أو المحتوى على كلمة البحث
- فلترة فورية عند الكتابة

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

الخطوة 5: إنشاء CLAUDE.md

سجّل حالة المشروع الحالي.

أنشئ ملف CLAUDE.md لهذا المشروع. يشمل نظرة عامة، أوامر التشغيل، بنية المجلدات، وقائمة الميزات.

افتح CLAUDE.md واقرأه. هذا الملف سيكون ذاكرة الذكاء الاصطناعي عندما تقول “أكمل” في جلسة الغد.

الخطوة 6: إنشاء requirements.md

اصنعه بنفسك. لا تطلب من Claude Code. افتح محرر نصوص واكتب:

دليل المحرر (مستخدمو WSL):

  • التحرير في الطرفية: nano requirements.md (حفظ: Ctrl+O → Enter، خروج: Ctrl+X)
  • التحرير بـ VS Code: code requirements.md (إذا كان VS Code مثبتاً يتصل تلقائياً بـ WSL)
# requirements.md

## إدارة المهام
- المهمة تحتوي عنوان، محتوى، أولوية (عالية/عادية/منخفضة)، موعد نهائي
- المهام المكتملة لا تُحذف بل تُعلَّم كمكتملة
- عند تجاوز الموعد النهائي تُبرز بخلفية حمراء

## البحث
- البحث في العنوان والمحتوى
- فلترة فورية

## التقنية
- قاعدة البيانات SQLite ملف DB
- الخلفية تخدم الواجهة معاً

هذا الملف كتبته أنت، وليس الذكاء الاصطناعي. هذا مهم. القرار لك، والتوثيق لك.


ملخص الدرس 1

ما تناولناه في هذا الدرس:

  1. خريطة الأدوات: تنقسم إلى أدوات المحرر (Cursor, Copilot) ووكلاء الطرفية (Claude Code, Codex CLI)
  2. Claude Code: حلقة التحقق الذاتية، السياق الواسع، التعديل متعدد الملفات — أقوى وكيل طرفية حالياً
  3. التثبيت: curl -fsSL https://claude.ai/install.sh | bash سطر واحد يكفي
  4. الكلمات المفتاحية: الخلفية، الواجهة، DB، النشر — يكفي معرفة ما يحدد الاتجاه
  5. إدارة السياق: CLAUDE.md (القواعد)، requirements.md (القرارات)، progress.md (الحالة) لإخراج ذاكرة الذكاء الاصطناعي
  6. نمط البرمجة بالإحساس: إكسل → تصميم DB → API → واجهة → إضافة ميزات. حتى 3 سحرية، من 5 تبدأ التصدعات

تمهيد للدرس التالي: “لماذا ينهار عند 5 ميزات.” سنضيف 5 ميزات متتالية للتطبيق من الدرس 1. عند الميزة الثالثة تقريباً ستشهد لحظة تعطل ميزة قديمة. ثم نحلل السبب بنيوياً.


الواجب

بعد إكمال التطبيق العملي في الدرس 1، جرّب التالي:

  1. أضف ميزتين إضافيتين: أي شيء. تصنيف فئات، وضع داكن، ترتيب المهام. راقب إلى أي حد يسير بسلاسة، ومن أين تبدأ الأمور بالغرابة.

  2. حسّن CLAUDE.md: افتح CLAUDE.md الذي أنشأه الذكاء الاصطناعي واقرأه. هل هناك أجزاء غير مفهومة؟ هل هناك معلومات ناقصة؟ عدّله بنفسك.

  3. جرّب المتابعة في جلسة جديدة: أغلق Claude Code وأعد تشغيله. قل “أكمل الميزة قيد التنفيذ”. راقب الفرق بوجود CLAUDE.md وبدونه.


سلسلة دروس Reins Engineering الكاملة

الدرسالعنوان
الدرس 1كيف تأمر الذكاء الاصطناعي
الدرس 2كيف لا تثق بالذكاء الاصطناعي
الدرس 3التطبيق الذي لا ينكسر
الدرس 4القرارات خارج الكود
الدرس 5ذكاء اصطناعي بلجام
الدرس 6إذا نجح أقفله
الدرس 7كيف تعكس التملق
الدرس 8مصنع الوكيل
الدرس 9الأتمتة ما بعد الكود
الدرس 10قانون البيانات