الدرس الثالث — إضافة الكود إلى مستودعك على GitHub

حفظ الكود على جهازك وحده يعني خطر الفقدان، وعدم القدرة على التعاون، وغياب التاريخ. GitHub يحلّ هذه المشاكل الثلاث دفعةً واحدة. في هذا الدرس ستتعلم الدورة الكاملة: استنساخ المستودع، وإنشاء فرع، وحفظ تغييراتك ودفعها، ثم دمجها في الكود الرئيسي عبر Pull Request — بطريقتين: GitHub Desktop للمرئيين، والـ Terminal للمحترفين.

١. ما هو GitHub Flow؟

GitHub Flow هو سير عمل خفيف الوزن مبني على فروع قصيرة العمر. الفكرة بسيطة: لا تعدّل كود الـ main مباشرةً أبداً — بدلاً من ذلك أنشئ فرعاً، اعمل عليه، ثم ادمجه عبر Pull Request بعد المراجعة.

الدورة الكاملة في ست خطوات:

1. Clone — استنسخ المستودع إلى جهازك
2. Branch — أنشئ فرعاً جديداً لكل مهمة
3. Commit — احفظ تغييراتك في commits واضحة
4. Push — ارفع الفرع إلى GitHub
5. Pull Request — اطلب مراجعة الكود ودمجه
6. Merge & Delete — ادمج وأغلق الدورة

٢. استنساخ المستودع (Clone)

الاستنساخ يعني تحميل نسخة كاملة من المستودع إلى جهازك، بما في ذلك كامل تاريخ الـ commits. على صفحة المستودع في GitHub، اضغط الزر الأخضر Code واختر طريقة النسخ.

ثلاث طرق للاستنساخ:

• HTTPS — الأسهل للمبتدئين، يطلب اسم المستخدم وكلمة المرور أو Personal Access Token
• SSH — الأفضل للمحترفين، يستخدم مفتاح SSH مخزّن مسبقاً
• GitHub CLI — إذا كنت تستخدم أداة gh

# استنساخ عبر HTTPS
git clone https://github.com/username/my-project.git

# الدخول إلى مجلد المستودع
cd my-project

٣. إنشاء فرع جديد (Branch)

الفرع هو نسخة موازية من الكود تعزل تغييراتك تماماً عن main. إنشاء فرع قبل أي تعديل هو القاعدة الذهبية في GitHub Flow.

إنشاء فرع عبر GitHub Desktop

في GitHub Desktop، اذهب إلى Branch → New Branch، أدخل اسم الفرع، ثم اضغط Create Branch. البرنامج سينتقل إليه تلقائياً.

إنشاء فرع عبر Terminal

# إنشاء فرع والانتقال إليه في أمر واحد
git checkout -b add-css-styles

# أو بطريقة أحدث (Git 2.23+)
git switch -c add-css-styles

# التحقق من الفرع الحالي
git branch

٤. حفظ التغييرات عبر GitHub Desktop

بعد تعديل ملفاتك، GitHub Desktop يكتشف التغييرات تلقائياً ويعرضها في لوحة Changes على اليسار.

لإتمام الـ commit في GitHub Desktop:

1. تحقق من الملفات المحددة في قائمة Changes (ضع ✓ على ما تريد تضمينه)
2. اكتب رسالة commit واضحة في حقل Summary — مثلاً: Add responsive CSS styles
3. اضغط Commit to add-css-styles
4. اضغط Push origin لرفع الفرع إلى GitHub

٥. حفظ التغييرات عبر Terminal

الـ Terminal يمنحك تحكماً أدق في كل خطوة من خطوات الـ commit. الأوامر الأساسية:

# عرض حالة الملفات (المعدّلة / الجديدة / المحذوفة)
git status

# إضافة ملف محدد إلى منطقة الـ staging
git add style.css

# إضافة كل التغييرات دفعةً واحدة
git add .

# حفظ الـ commit برسالة وصفية
git commit -m "Add responsive CSS styles for mobile layout"

# رفع الفرع إلى GitHub
git push origin add-css-styles

٦. إنشاء Pull Request

بعد رفع الفرع، اذهب إلى صفحة المستودع على GitHub — ستظهر لك رسالة "Compare & pull request" تلقائياً. اضغط عليها أو اذهب إلى تبويب Pull requests → New pull request.

عناصر الـ Pull Request الجيد:

• عنوان واضح يصف ما يفعله هذا الـ PR بجملة واحدة
• وصف يشرح لماذا هذا التغيير ضروري وكيف يعمل
• لقطات شاشة إذا كان التغيير مرئياً (UI)
• ربط بـ Issue بكتابة Closes #12 في الوصف

٧. الدمج (Merge) وحذف الفرع

بعد اعتماد الـ PR من المراجعين، اضغط Merge pull request ثم Confirm merge. GitHub يدمج تغييراتك في main ويُغلق الـ PR تلقائياً.

بعد الدمج، احذف الفرع لإبقاء المستودع منظماً:

# العودة إلى الفرع الرئيسي
git checkout main

# تحديث main بعد الدمج
git pull origin main

# حذف الفرع محلياً
git branch -d add-css-styles

# حذف الفرع من GitHub (اختياري إذا لم تحذفه من الواجهة)
git push origin --delete add-css-styles

تمرين عملي