كيف تبدأ مع «agentic coding»: المبتدئ

البرمجة تغيرت. اليوم تقدر تبني مشروعك الأول بالمحادثة، حتى لو ما جربت أي أداة «agentic coding» من قبل.

هذا الدليل يأخذك من الصفر: اختيار الأداة، تثبيت «Claude Code»، فتح أول محادثة، ثم بناء تطبيق صغير يعمل على جهازك. لا تحتاج خبرة مسبقة.

الجزء الأول: اختيار الأداة

مساحة الـ«agentic coding» انفجرت. عشرات الأدوات تتيح لك اليوم بناء البرمجيات عبر المحادثة. الفكرة واحدة تقريبا، لكن التجربة تختلف كثيرا. هذه أبرز اللاعبين:

أدوات تعمل من الـ«terminal»

هذه الأدوات تعيش في سطر الأوامر. تفتحها بجانب محررك المعتاد، وتعمل على أي مشروع.

Tool         | Best For                         | Cost       | Notes
-------------|----------------------------------|------------|------------------------------
Claude Code  | Power users, terminal workflow   | Paid       | Best reasoning, high limits with Max
Gemini CLI   | Free terminal agent              | Free       | Good starting point
Codex CLI    | OpenAI users                     | Paid/API   | Works well with GPT models
OpenCode     | Open-source workflow             | Free       | Bring your own model

أدوات تعمل داخل الـ«IDE»

هذه الأدوات تستبدل محرر الـ«code»، أو تضيف له طبقة ذكاء اصطناعي. مناسبة لمن يريد كل شيء داخل نافذة واحدة.

Tool            | Best For                     | Cost        | Notes
----------------|------------------------------|-------------|------------------------------
Cursor          | AI-first editor              | Free/Paid   | Polished VS Code-like experience
Windsurf        | Fast AI editor               | Free/Paid   | Good autocomplete and agents
GitHub Copilot  | Existing VS Code users       | Paid        | Integrated into popular editors

أدوات تعمل من المتصفح

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

Tool          | Best For                    | Cost        | Notes
--------------|-----------------------------|-------------|------------------------------
Replit Agent  | Full browser workspace      | Free/Paid   | Build and deploy in Replit
Bolt.new      | Quick web prototypes        | Free/Paid   | Very fast for frontend apps
Lovable       | Product-style prototypes    | Free/Paid   | Good for app mockups

أي أداة تختار؟

لا يوجد اختيار خاطئ. كل أداة لها طبع. بعض الناس يرتاحون مع «Claude Code» لأنه يعيش في الـ«terminal». بعضهم يفضل «Cursor» لأنه محرر مصقول. وبعضهم يريد بساطة أدوات المتصفح مثل «Bolt.new».

اقتراحي: ابدأ بالمجاني. «Gemini CLI» أو «OpenCode» أو الخطة المجانية من «Cursor» تكفي لتفهم الفكرة. جرب قبل أن تدفع ريالا واحدا.

إذا وجدت الطريقة تناسبك وتريد مساحة استخدام أكبر، فاختياري هو «Claude Code Max» بسعر 100 دولار شهريا. أفضل قيمة بلا منازع: حدود استخدام جدية، ووصول إلى أفضل نموذج استدلال متاح.

المهم أن المهارة لا تضيع. طريقة كتابة الـ«prompts»، التفكير بالنتائج، ومراجعة الـ«code» الذي ينتجه الذكاء الاصطناعي، كلها تنتقل معك من أداة إلى أخرى.

الجزء الثاني: «Claude Code»، أداتي المفضلة

جربت أغلب الأدوات أعلاه. للسير في عملي اليومي، فاز «Claude Code».

• لا يستبدل محرري. ما زلت أستخدم «VS Code». «Claude Code» يعمل بجانبه، لا بدلا منه.
• استدلاله ممتاز. عندما أشرح مهمة معقدة، يفكر في المشكلة قبل أن يكتب أي «code».
• كونه يبدأ من الـ«terminal» يعطي شفافية. أرى كل أمر، وكل تعديل على الملفات. لا شيء يحدث في الخلفية دون أن أعرف.
• يعمل على أي مشروع. «Python»، «JavaScript»، «Go»، أو غيرها. لا يحتاج إعدادا خاصا.
• خطة «Max» بسعر 100 دولار هي نقطة التوازن. تكفي لعمل يومي جاد، دون أن تصطدم بالحدود كل ساعتين.

قد تفضل أداة أخرى، وهذا طبيعي. «Cursor» مصقول. «Windsurf» سريع. «Gemini CLI» مجاني. الأداة الأفضل هي التي ستستخدمها فعلا.

ما هو «Claude Code»؟

«Claude Code» أداة تعمل من سطر الأوامر وتخليك تبني البرمجيات بالمحادثة. بدلا من أن تكتب الـ«code» بنفسك، تصف ما تريد، وهو يكتب، يشغل، ويصلح الأخطاء.

يعمل داخل الـ«terminal» ويملك صلاحية وصول كاملة إلى ملفات مشروعك. يقدر أن:

• يقرأ الـ«code» الموجود ويفهمه
• ينشئ ملفات ومجلدات جديدة
• يعدل ملفات موجودة
• يشغل أوامر مثل npm install أو python script.py
• يرى الأخطاء ويصلحها تلقائيا
• يبحث في الويب عن التوثيق

تخيله مطورا يعيش داخل الـ«terminal». تقول له ما تريد، ويعمل أمامك خطوة بخطوة.

المتطلبات

1. اشتراك في «Claude»

«Claude Code» يحتاج اشتراكا مدفوعا. الخطة المجانية لا تعطيك وصولا إليه.

Plan        | Price           | Claude Code Access | Best For
------------|-----------------|--------------------|------------------------------
Free        | $0              | No                 | Chat only
Pro         | $20/month       | Yes                | Trying Claude Code
Max 5x      | $100/month      | Yes                | Daily individual use
Max 20x     | $200/month      | Yes                | Heavy usage
Team        | $30/user/month  | Yes                | Teams

اقتراحي: ابدأ بخطة «Pro» بسعر 20 دولارا شهريا، وتأكد أن «Claude Code» يناسب طريقة عملك. إذا تعلقت به، انتقل إلى «Max» بسعر 100 دولار شهريا.

سجل أو حدث اشتراكك من هنا: claude.ai/settings/billing

2. «Node.js» الإصدار 18 أو أعلى

تثبيت «Claude Code» يتم عبر «npm»، و«npm» يأتي مع «Node.js».

تأكد هل «Node.js» موجود عندك:

node --version

إذا ظهر رقم إصدار مثل v20.10.0، فأنت جاهز. إذا لم يظهر، حمله من nodejs.org

3. «terminal»

• «Mac»: استخدم تطبيق «Terminal» الموجود في الجهاز. ابحث عنه في «Spotlight».
• «Windows»: استخدم «PowerShell» أو «Windows Terminal».
• «Linux»: استخدم الـ«terminal» الافتراضي في توزيعتك.

4. حساب «Anthropic»

ستحتاج حساب «Anthropic» للمصادقة. إذا لم يكن عندك حساب، ستنشئه أثناء الإعداد.

التثبيت

صفحة «Claude Code» الرسمية: claude.ai/download

افتح الـ«terminal» وشغل:

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

هذا يثبت «Claude Code» على جهازك كاملا. خيار -g يعني أنك تستطيع تشغيله من أي مجلد.

ظهرت أخطاء صلاحيات؟

على «Mac» و«Linux»، قد تحتاج «sudo»:

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

على «Windows»، شغل «PowerShell» بصلاحيات المسؤول.

تأكد من التثبيت

claude --version

يفترض أن ترى رقم إصدار:

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

الخطوة الأولى: افتح مجلد مشروع

انتقل إلى أي مجلد تريد العمل داخله. قد يكون مشروعا موجودا، أو مجلدا فارغا لمشروع جديد.

mkdir my-first-project
cd my-first-project

# Or navigate to an existing project
cd path/to/your/project

الخطوة الثانية: شغل «Claude Code»

claude

الخطوة الثالثة: المصادقة

في أول تشغيل، سيطلب منك «Claude Code» المصادقة.

• ستفتح نافذة المتصفح تلقائيا
• سجل دخولك بحساب «Anthropic»، أو أنشئ حسابا جديدا
• اسمح لـ«Claude Code» بالوصول إلى حسابك
• ارجع إلى الـ«terminal». يفترض أن ترى رسالة نجاح

فهم الواجهة

بعد المصادقة، تظهر لك واجهة «Claude Code»:

علامة > هي المكان الذي تكتب فيه الـ«prompts». اكتب بإنجليزية بسيطة وواضحة.

عناصر الواجهة الأساسية

Element             | What it means
--------------------|----------------------------------------------
Working directory   | The folder Claude Code can see and edit
> prompt            | Where you type your requests
Tool calls          | Actions Claude wants to take
Output              | Claude's response, plan, or results

أوامر أساسية

قبل أن نبدأ البناء، هذه أوامر تحتاج معرفتها:

داخل «Claude Code»

Command    | What it does
-----------|------------------------------------------------
/help      | Show available commands
/clear     | Clear the conversation context
/compact   | Summarize the conversation to save context
/cost      | Show current session usage
/quit      | Exit Claude Code

اختصارات لوحة المفاتيح

Shortcut      | What it does
--------------|----------------------------------------------
Enter         | Send your prompt
Shift+Enter   | Add a new line
Ctrl+C        | Stop current operation
Up/Down       | Navigate prompt history

أول محادثة

لنبدأ بشيء بسيط. اكتب:

> what files are in this folder?

سيقرأ «Claude» المجلد ويخبرك بمحتواه. إذا كان فارغا، سيقول لك ذلك.

فهم الـ«tool calls»

عندما ينفذ «Claude» شيئا، سترى «tool calls». هذه هي الأفعال التي يريد تنفيذها على جهازك:

Bash(ls -la /Users/you/my-project)

total 0
drwxr-xr-x  2 you  staff   64 Jan 15 10:00 .
drwxr-xr-x  8 you  staff  256 Jan 15 09:58 ..

هذه الشفافية مهمة. ترى بالضبط ماذا يفعل «Claude» على جهازك، قبل أن تكمل.

بناء أول مشروع

الآن نبني شيئا حقيقيا: تطبيق ويب بسيط لقائمة مهام.

الخطوة الأولى: صف ما تريد

> Create a simple to-do list web app. It should have an input field, an add button, and a list of tasks. Users should be able to mark tasks as complete and delete them. Put everything in a single index.html file.

الخطوة الثانية: راقب «Claude» وهو يعمل

سيبدأ «Claude» بتقسيم العمل:

• يضع خطة التنفيذ
• ينشئ الملف
• يكتب بنية الـ«HTML»
• يضيف تنسيقات الـ«CSS»
• يكتب منطق الـ«JavaScript»

سترى كل خطوة وهي تحدث.

الخطوة الثالثة: راجع النتيجة

عندما ينتهي «Claude»، سيخبرك. تستطيع فتح الملف:

> open the file in my browser

أو على «Mac»:

> run: open index.html

الخطوة الرابعة: اطلب تعديلات

لم يعجبك شيء؟ قل له مباشرة:

> Make the design more modern. Use a dark theme with rounded corners.

سيعدل «Claude» الملف ويعرض لك التغييرات.

سير عمل شائع

بدء مشروع جديد

> Create a new React app with TypeScript. Add a simple dashboard layout with a sidebar, header, and main content area.

سيقوم «Claude» عادة بهذه الخطوات:

• ينشئ المشروع
• يثبت الاعتماديات
• يبني هيكل المجلدات
• يضبط ملفات الإعداد
• ينشئ المكونات الأولى

العمل على مشروع موجود

انتقل إلى مجلد مشروعك، ثم اكتب:

> Look at the codebase and explain the architecture

سيقرأ «Claude» الملفات ويعطيك صورة عامة. بعدها اطلب منه تغييرا محددا:

> Add a dark mode toggle to the settings page

تصحيح الأخطاء

عندما ينكسر شيء، أعطه وصفا واضحا:

> The submit button doesn't do anything when I click it. Find the bug and fix it.

أو أعطه رسالة الخطأ كما هي:

> I'm getting this error: TypeError: Cannot read properties of undefined (reading 'map'). Explain what's causing it and fix it.

التعلم والاستكشاف

> Explain how the authentication flow works in this project
> What does this function do?
> What's the best way to add caching here?

فهم الصلاحيات

«Claude Code» سيطلب موافقتك قبل تنفيذ بعض الأوامر. سترى شيئا مثل:

Claude wants to run: npm install express

Allow? (y/n/always)

خياراتك:

Option   | Meaning
---------|------------------------------------------------
y        | Allow this action once
n        | Reject this action
always   | Allow this type of action automatically

وضع الموافقة التلقائية

إذا كنت تثق بـ«Claude» ولا تريد الموافقة على كل أمر:

claude --dangerously-skip-permissions

تحذير: استخدم هذا فقط في بيئات آمنة، مثل مشروع تجريبي. في هذا الوضع، سينفذ «Claude» الأوامر دون أن يسألك.

نصائح لنتائج أفضل

كن محددا

BAD:
> Make it better

GOOD:
> Improve the homepage hero section. Make the headline more prominent, add a clear call-to-action button, and use more spacing between sections.

أعطه سياقا

BAD:
> Add auth

GOOD:
> Add email/password authentication to this Next.js app using Supabase. The app already has a users table and a login page at /login.

قسم المهام الكبيرة

بدلا من:

BAD:
> Build me a complete e-commerce platform

جرب:

GOOD:
> First, create a product listing page that displays products from a static array. Include product name, price, image, and an Add to Cart button.

ثم أكمل:

GOOD:
> Now add a shopping cart. Users should be able to add products, update quantities, and remove items.

اطلب من «Claude» أن يشرح

> Explain your approach before making changes
> What are the trade-offs of this solution?
> Why did you choose this library?

راجع قبل أن تكمل

> Show me what changed
> Test this feature
> Run the test suite and fix any failures

إعداد المشروع بملف CLAUDE.md

تستطيع إنشاء ملف CLAUDE.md في جذر المشروع لتعطي «Claude» سياقا دائما عن مشروعك.

# Project Context

## Tech Stack
- Next.js 15
- TypeScript
- Tailwind CSS
- Supabase

## Conventions
- Use server components by default
- Put reusable components in components/
- Use absolute imports with @/
- Keep functions small and typed

## Important Notes
- Do not modify database migrations without asking
- Run npm run lint before finishing
- Follow the existing file structure

سيقرأ «Claude» هذا الملف تلقائيا ويتبع التعليمات الموجودة فيه.

إدارة التكاليف

«Claude Code» يستهلك رصيد استخدام. انتبه للإنفاق، خصوصا في الجلسات الطويلة.

راجع إنفاقك

/cost

هذا يعرض استخدام الجلسة الحالية.

خفض التكاليف

• استخدم /compact بانتظام: يلخص المحادثة ويقلل حجم السياق.
• اكتب باختصار: الـ«prompts» الطويلة تكلف أكثر.
• ابدأ من جديد للمهام غير المرتبطة: استخدم /clear أو أعد تشغيل «Claude» عندما تنتقل إلى عمل مختلف.
• راجع قبل العمليات الكبيرة: اطلب من «Claude» أن يشرح خطته قبل أي «refactor» كبير.

ماذا بعد؟

إذا وصلت إلى هنا، فأنت لم تعد تتفرج على الـ«agentic coding». أنت استخدمته فعلا. في الدليل التالي ندخل مستوى أعمق: «sub-agents»، «hooks»، «skills»، «MCP servers»، و«plugins»: كيف تبدأ مع البرمجة الـ«agentic»: المستوى المتوسط