التيرمنال للمبرمج: من الصفر إلى الاحتراف

كل مبرمج محترف يعمل بأداتين: المحرر والتيرمنال.

المحرر هو المكان الذي تكتب فيه الكود. التيرمنال هو المكان الذي تُشغّل فيه الكود — وكل شيء آخر.

حين ترى مبرمجاً يكتب أوامراً في شاشة سوداء ويحدث شيء ما، هذا هو التيرمنال. ليس سحراً — مجرد أوامر نصية واضحة، وبمجرد أن تتعلمها لن تتخيّل العمل بدونها.

١. ما هو التيرمنال ولماذا يحتاجه كل مبرمج؟

التيرمنال (يُسمى أيضاً: Command Line، CLI، Console) هو واجهة نصية لنظام التشغيل. بدلاً من النقر على الأيقونات بالفأرة، تكتب أوامراً نصية وتضغط Enter.

واجهة التيرمنال تُظهر أوامر التنقل بين المجلدات — التيرمنال — واجهة نصية بسيطة وقوية

لماذا يستخدمه المبرمجون؟

السبب	التفاصيل
لا بديل عنه	تثبيت المكتبات، تشغيل المشاريع، نشرها — كلها تحتاج التيرمنال
أسرع بكثير	أمر واحد يساوي ١٠ نقرات بالفأرة
أكثر دقة	تتحكم بالضبط فيما يحدث
أداة الذكاء الاصطناعي	Claude Code وكل أدوات Vibe Coding تعمل داخله

كيف تفتحه؟

كيف تفتح التيرمنال

Windows:  ابحث عن "PowerShell" أو "Windows Terminal" في قائمة Start
          أو: كليك يمين في أي مجلد ← "Open in Terminal"

Mac:      تطبيق "Terminal" في Applications/Utilities
          أو: Spotlight (Cmd+Space) ← اكتب "terminal"

VS Code:  View ← Terminal
          أو: Ctrl+` (الأسهل — مباشرة داخل محررك)

💡

نصيحة

استخدم التيرمنال المدمج في VS Code (Ctrl+`) — يفتح تلقائياً في مجلد مشروعك ولا تحتاج التنقل يدوياً.

٢. كيف يعمل التيرمنال — المنطق الأساسي

كل ما تراه في التيرمنال يتبع نمطاً واحداً:

سطر التيرمنال

username@computer:~/Desktop/my-project$ █

هذا السطر يخبرك بثلاثة أشياء:

شرح السطر

username              ← اسم المستخدم (أنت)
@computer             ← اسم الجهاز
~/Desktop/my-project  ← المجلد الذي أنت فيه الآن
$                     ← جاهز لاستقبال أمر (اكتب هنا)

📌

تنبيه مهم

التيرمنال حساس لمكانك في نظام الملفات. مثلاً إذا كتبت npm install في المجلد الخطأ، ستُثبّت المكتبات في المكان الخطأ. دائماً تحقق أين أنت قبل تنفيذ أي أمر.

٣. التنقل بين المجلدات

أهم مهارة في التيرمنال — الانتقال إلى المجلد الصحيح قبل أي شيء.

التيرمنال يُظهر قائمة المجلدات والملفات بأمر ls — رؤية محتوى المجلد الحالي بأمر ls

pwd — أين أنا الآن؟

bash

pwd
# النتيجة:
# /Users/abdullah/Desktop/my-project

اختصار لـ "Print Working Directory" — يخبرك بمسار مجلدك الحالي بالكامل.

ls — ماذا يوجد هنا؟

bash

ls
# النتيجة:
# index.html   style.css   script.js   package.json   node_modules/

يعرض كل الملفات والمجلدات في مكانك الحالي.

bash

ls -la   # عرض تفصيلي — يشمل الملفات المخفية والأحجام والتواريخ

cd — انتقل إلى مجلد

bash

# الانتقال لمجلد داخل مجلدك الحالي
cd my-project

# الانتقال لمجلد بمسار كامل
cd /Users/abdullah/Desktop/my-project

# الانتقال خطوة للخلف (للمجلد الأب)
cd ..

# خطوتان للخلف
cd ../..

# العودة لمجلدك الرئيسي (Home) مباشرةً
cd ~

مثال عملي — من سطح المكتب لمشروع:

bash

# ١. تحقق أين أنت
pwd
# /Users/abdullah

# ٢. انتقل لسطح المكتب
cd Desktop

# ٣. شاهد المجلدات الموجودة
ls
# my-app   old-project   notes.txt

# ٤. ادخل لمشروعك
cd my-app

# ٥. تأكد
pwd
# /Users/abdullah/Desktop/my-app

💡

سر مفيد جداً — الإكمال التلقائي

اكتب cd (بمسافة بعد cd) ثم اضغط Tab — التيرمنال سيُكمل اسم المجلد تلقائياً. اضغط Tab مرتين لترى كل الخيارات المتاحة.

mkdir — أنشئ مجلداً جديداً

bash

mkdir my-new-project

touch — أنشئ ملفاً فارغاً (Mac/Linux)

bash

touch index.html
touch style.css script.js   # أنشئ عدة ملفات دفعةً واحدة

clear — نظّف الشاشة

bash

clear   # يُخفي كل ما سبق — لا يحذف شيئاً

٤. خارطة الأوامر الأساسية

مرجع الأوامر

التنقل والاستكشاف:
  pwd          ← أين أنا؟
  ls           ← ماذا يوجد هنا؟
  ls -la       ← عرض تفصيلي شامل
  cd [مجلد]   ← ادخل لمجلد
  cd ..        ← ارجع خطوة للخلف
  cd ~         ← العودة للرئيسي
  clear        ← نظّف الشاشة

الإنشاء:
  mkdir [اسم]  ← أنشئ مجلداً
  touch [اسم]  ← أنشئ ملفاً (Mac/Linux)

معلومات:
  node -v      ← إصدار Node.js المثبت
  npm -v       ← إصدار npm المثبت
  git --version ← إصدار git

٥. npm — قلب أدوات الويب

npm (Node Package Manager) هو مدير المكتبات في عالم JavaScript. تخيّله كـ App Store للكود — بدلاً من كتابة كل شيء من الصفر، تُثبّت مكتبات جاهزة كتبها آخرون.

كل مشروع ويب حديث (React، Next.js، Vue، Vite...) يعتمد عليه بشكل أساسي.

كيف يعمل npm

أنت      →  npm install [اسم المكتبة]
npm      →  يبحث في npmjs.com
npmjs    →  يُرجع الكود
npm      →  يحفظه في مجلد node_modules

📌

تنبيه مهم

قبل تشغيل أي أمر npm، تأكد أنك داخل مجلد مشروعك الذي يحتوي على ملف package.json. هذا الملف هو "سجل مشروعك" الذي يحفظ كل المكتبات التي يحتاجها.

٦. npm install — تثبيت المكتبات

التيرمنال يُظهر تشغيل npm install وتثبيت المكتبات — npm install يُثبّت كل مكتبات المشروع دفعةً واحدة

bash

# تثبيت كل مكتبات المشروع (المذكورة في package.json)
npm install

# تثبيت مكتبة واحدة محددة
npm install axios

# تثبيت مكتبة وإضافتها لـ package.json تلقائياً
npm install react

# تثبيت مكتبة للتطوير فقط (لن تُضاف في النسخة النهائية)
npm install --save-dev eslint

ماذا يحدث عند npm install؟

قبل وبعد npm install

قبل:                      بعد:
my-project/               my-project/
  package.json    →         package.json
                            node_modules/     ← مجلد جديد ضخم
                              react/
                              axios/
                              ... (مئات الملفات)

💡

لماذا node_modules في .gitignore؟

مجلد node_modules قد يصل لـ ٥٠٠MB أو أكثر — لهذا السبب تجد ملف .gitignore في كل مشروع يُخبر git بتجاهله وعدم رفعه.

٧. npm run dev — تشغيل المشروع

bash

npm run dev

هذا الأمر يُشغّل خادم تطوير محلي (Development Server) على جهازك. بعد تشغيله:

مثال على الناتج

$ npm run dev

  VITE v5.2.0  ready in 423 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.5:5173/

افتح المتصفح واذهب إلى http://localhost:5173 (أو أي رقم منفذ يظهر) — ستجد مشروعك يعمل!

ما يعنيه localhost

localhost    ← جهازك أنت (ليس الإنترنت)
5173         ← رقم الباب (Port) الذي يستمع عليه الخادم

ميزة التحديث الفوري (Hot Reload): بمجرد حفظ أي ملف في مشروعك، المتصفح يتحدث تلقائياً — لا تحتاج إعادة تشغيل أو refresh يدوي.

🔑

السر الصغير — كيف توقف npm run dev؟

هذا أهم اختصار ستتعلمه اليوم: Ctrl + C

الكثير من المبتدئين يُشغّلون npm run dev ثم لا يعرفون كيف يوقفونه — فيُغلقون نافذة التيرمنال كاملةً! الطريقة الصحيحة:

إيقاف السيرفر

١. اضغط Ctrl + C معاً
٢. قد يظهر: "Terminate batch job (Y/N)?"
٣. اضغط Y ثم Enter
٤. أُطفئ السيرفر بأمان ✅

📌

تنبيه مهم

Ctrl+C في التيرمنال لا يعني "نسخ" — يعني إيقاف الأمر الجاري. إذا أردت النسخ في التيرمنال استخدم Ctrl+Shift+C.

٨. npm run build — بناء النسخة النهائية

bash

npm run build

هذا الأمر يُحوّل مشروعك من "كود تطوير" إلى "كود إنتاج" جاهز للنشر:

قبل وبعد npm run build

قبل (كود تطوير):          بعد (كود إنتاج):
src/
  App.jsx       →    dist/
  style.css          index.html
  utils.js           assets/
  (قابل للقراءة)        main-abc123.js   ← مضغوط ومُصغَّر
                       style-xyz789.css  ← مضغوط

الفرق بين dev وbuild:

	npm run dev	npm run build
الهدف	تطوير واختبار	نشر للمستخدمين
السرعة	أبطأ — مع أدوات debugging	أسرع — كل شيء مضغوط
الحجم	كبير	صغير جداً
قابلية القراءة	كود واضح	كود مُصغَّر (Minified)
النتيجة	يعمل على جهازك فقط	مجلد `dist/` ترفعه للسيرفر

💡

نصيحة — بعد البناء

بعد npm run build ستجد مجلد dist/ أو build/ — هذا هو ما ترفعه على Netlify أو Vercel أو أي استضافة.

٩. npx — الأمر السحري

bash

npx create-react-app my-app
npx create-next-app@latest
npx shadcn@latest init

الفرق بين npm وnpx:

npm مقابل npx

npm install [أداة]  ← تُثبّت الأداة على جهازك للأبد

npx [أداة]          ← تُشغّل الأداة مؤقتاً بدون تثبيت
                       (تحميل → تشغيل → حذف)

متى تستخدم npx؟

bash

# إنشاء مشروع جديد (تحتاجه مرة واحدة فقط)
npx create-react-app my-app
npx create-next-app@latest my-next-app

# تشغيل أدوات لمرة واحدة
npx prettier --write .    # تنسيق الكود
npx eslint src/           # فحص الأخطاء

# خادم بسيط لأي مجلد
npx http-server .

١٠. اختصارات لا تنساها أبداً

الاختصارات الأساسية

Ctrl + C          ← أوقف أي أمر جاري (الأهم)
Tab               ← أكمل اسم الملف/المجلد تلقائياً
↑ (سهم للأعلى)   ← استرجع الأمر السابق
↑↑↑               ← تنقّل في تاريخ أوامرك
Ctrl + L          ← نظّف الشاشة (مثل clear)
Ctrl + A          ← انتقل لبداية السطر
Ctrl + E          ← انتقل لنهاية السطر
Ctrl + U          ← احذف كل السطر الحالي

مرجع سريع — الأوامر الأكثر استخداماً:

bash — مرجع سريع

# ─── التنقل ───
pwd                     # أين أنا؟
ls                      # ماذا يوجد هنا؟
cd [اسم-المجلد]        # ادخل مجلداً
cd ..                   # ارجع خطوة
cd ~                    # العودة للرئيسي

# ─── المشروع ───
npm install             # ثبّت كل المكتبات
npm install [مكتبة]    # ثبّت مكتبة محددة
npm run dev             # شغّل خادم التطوير
npm run build           # ابنِ النسخة النهائية

# ─── الأدوات ───
npx [أداة]             # شغّل أداة بدون تثبيت
node -v                 # تحقق من إصدار Node
npm -v                  # تحقق من إصدار npm

# ─── git ───
git init                # ابدأ مستودعاً جديداً
git add .               # أضف كل التغييرات
git commit -m "رسالة"  # احفظ نقطة تفتيش
git push                # ارفع للـ GitHub

# ─── اختصارات ───
Ctrl+C                  # أوقف الأمر الجاري
Tab                     # إكمال تلقائي
↑                       # الأمر السابق
clear                   # نظّف الشاشة

تمارين عملية

✅

٧ تمارين لإتقان التيرمنال

افتح التيرمنال ونفّذ pwd — هل تعرف أين أنت؟
نفّذ ls — ماذا ترى؟ تعرف على كل المجلدات
انتقل لسطح المكتب: cd ~/Desktop، ثم أنشئ مجلداً: mkdir my-terminal-practice
ادخل المجلد الجديد وأنشئ ملفاً: cd my-terminal-practice ثم touch index.html
افتح VS Code من التيرمنال مباشرةً: code . — النقطة تعني "المجلد الحالي"
نفّذ npx http-server . — افتح المتصفح واذهب لـ http://localhost:8080 — أوقفه بـ Ctrl+C
في مشروع موجود لديك: cd له ← npm install ← npm run dev ← شاهد النتيجة ← Ctrl+C

🔗

مصادر إضافية