رفع مشروعك على GitHub باستخدام Visual Studio

تريد رفع ملفات مشروعك على GitHub ولكن ليس لديك مهارة الـ Command line, إليك أسهل طريقة للتعامل المباشر بين Visual Studio Code & GitHub.

مشكلة عند رفع الملفات على GitHub

الكثير من المبرمجين المبتدأين تواجههم صعوبة في رفع ملفات المشروع علي موقع GitHub, وكثيراً ما تحدث أخطاء في الملفات وفي مسارات المجلدات.

لا أستطيع استخدام الـ Command line

فإذا كنت من مستخدمي Visual Studio Code, فهناك مساحة لاستخدام Command line للتعامل مع GitHub في رفع ملفات مشروعك, أو باستخدام أداة Git Bash, والتي يمكنك من خلالها استخدام Command line للتعامل مع GitHub في رفع ملفات مشروعك.

يمكنك قراءة موضوع أداة Git Bash

طريقة سهلة لرفع الملفات على GitHub

حسناً, الأدوات المطلوبة لبداية العمل

• برنامج Visual Studio Code
• عمل حساب عل موقع GitHub “باستخدام Email الخاص بك”
• ملفات مشروعك محفوظه في مكان ما عل جهازك .

1- نختار من القائمة Repositories ثم New لعمل Repo جديد, وهو المكان الذي سنقوم بحفظ ملفات المشروع فيه.

إنشاء Repository جديد

• في خانة Repository name نكتب أسم للمشروع و ليكن (My-Project).
• Description نكتب فيه وصف للمشروع, ويمكنك تركة فارغاً
• اختيار ما إذا كان المشروع (Public) أي يمكن لأي شخص الاطلاع علي ملفات المشروع, يمكنه طلب (Pull Request) أي أخذ نسخة من ملفات المشروع وتستطيع الموافقة أو عدم الموافقة.
• اختيار ما إذا كان المشروع (Private) وهو منع النشر للعام ويمكنك السماح لأشخاص معينين بالاطلاع على المشروع وإعطائهم جميع المميزات حسب رغبتك.
• خانة (README) مهمه جداً لأنها تنشأ ملف بنفس الاسم وسيكون حلقة الوصل بين الـ Repo على GitHub وبين الملف المحفوظ فيه ملفات المشروع على جهازك “سوف نعود اليه لاحقاً ”
• نترك باقي الخيارات كما هي ونضغط Create Repository

الأن أصبح الـRepo جاهز باسم مشروعك مضافً إلية ملف الـ README.

ربط حسابك على GitHub ببرنامج Visual Studio Code

بعد فتح برنامج Visual Studio Code نذهب الى أسف القائمة علي اليسار , ونختار أيقونة المستخدم ومنها نقوم بتسجيل الدخول بنفس Email المستخدم في موقع GitHub.

طريقة عمل Clone Git Repository

تظهر لنا شاشة البدء وبها قائمة Start بجانب ( A ) نختار منها Clone Git Repository, ثم نضغط على الشريط الذي سيظهر بالأعلى والمكتوب فيه Clone From GitHub.

سيظهر لك جميع الـ Repositories الموجود في حسابك علي GitHub, ومنها ما قمنا بإنشائه سابقاً باسم (My-Project) –> سنختاره.

هنا سيطلب منك اختيار مكان لحفظ المشروع فيه, قم بتحديد مكان الحفظ أو إنشاء مجلد جديد وليكن مجلد (A) واضغط Select as repository destination

ملحوظة : يفضل عمل مجلد رئيسي ليكن ( My_GitHub ) وبه مجلدات المشاريع مثل مشروعنا هذا ( My-Project ).

هنا نختار Open

قمنا في هذه الخطوة بفتح ملف الـRepository, باسم المشروع (My-Project) وبه ملف الـ (README).

الان نذهب الى المجلد الموجود به المشروع و نأخذ كل الملفات نسخ ولصق في المجلد الذي أخترته لحفظ الـRepository والذي سميناه (A)

بمجرد العودة لبرنامج Visual Studio Code ستجد الملفات قد تمت إضافتها داخل مجلد الـRepo للمشروع.

أنتظر قليلاً لم ننتهي بعد .

سترى في القائمة علي اليسار أيقونة الـ Source Control وبها علامة زرقاء تحتوي علي أرقام, هذا الرقم يدل علي عدد التغيرات التي حدثت لمجلد الـ Repo بعد إضافة ملفات المشروع له.

أي تغيير يحدث لأي ملف من هذه الملفات سيتم زيادة عدد المستجدات علي المجلد, حتى وأن كان التعديل أضافة أو حذف حرف واحد من الكود.

ستلاحظ بالجانب الأيمن للملفات يوجد إما نقاط أو حرف (U) أي (Untracked) ومعناها أن هذا الملف لم يتم تعقبه بعد, بمعنى أخر تمت إضافته حديثاً ولم يتم رفعه بعد على GitHub.

أو حرف (M) أي (Modified) بمعنى أنه تم التعديل علي الملف وفي انتظار رفع التعديلات.

هو الأن في انتظار رفع الملفات علي GitHub. سنضغط عل علامة الـ Source Control في القائمة علي اليسار (محدده بدائرة ).

Commit

تأتي الأن خطوه مهمه وهي التعامل مع للتعديلات التي تمت علي الملفات (Commit), وهذه الخطوة ستتكرر كلما تم التعديل علي الملفات بالإضافة أو الحذف.

يمكنك كتابة أي شيء في الـ Commit.

بعدها نضغط على السهم بجوار Commit.

الفرق بين Commit, Commit & Push, Commit & Sync

ستظهر لك عدة اختيارات:

الخيار الأول Commit : يقوم ببساطة بتسجيل التغييرات التي أجريتها على جهازك المحلي. لكنه لن يشير الي التغيرات في مستودع GitHub remote repository

الخيار الثاني Commit & Push : سوف يقوم بعمل ما سبق ودفعه إلى المستودع البعيد (remote repository).
هذا يعني أنه سيتم حفظ أي تغييرات قمت بإجرائها في المستودع البعيد (remote repository) أيضًا.

الخيار الثالث Commit & Sync : يقوم بثلاثة أشياء. أولا ، سوف يقوم بعمل Commit. ثانيًا ، سيتم إجراء سحب Pull (يأخذ المعلومات المحدثة من الريبو البعيد). أخيرًا ، Push.

سنقوم بكتابة أي وصف تريده في الخانة ( B ), ونقوم باختيار Commit & Sync.

تهانينا, لقد قمت برفع ملفات مشروعك وباقي خطوه واحده , نقوم الأن بالنقر علي الريبو الخاص بالمشروع (My-Project).

نشر المشروع علي GitHub والحصول علي رابط لمشاركته

بمجرد الدخول علي الريبو الخاص بالمشروع ستجد جميع الملفات الخاص بمشروعك, وتأكد من وجود ملف الـ README.

الأن نقوم بالنقر على Setting –>

الأن نقوم بنشر المشروع والحصول علي رابط لمشاركته, لذا سنقوم باختيار Page من القائمة الموجودة على اليسار –>

خانة الـ Source تترك بدون تعديل

خانة الـ Branch نضغط علي Select Branch ومنها نختار main –> ثم save.

وانتظر حتي يقوم الموقع بإنشاء رابط مخصص لمشروعك, قد يستغرق بعض الوقت.

قم بعمل تحديث للصفحة حتى يظهر رابط المشروع .

كما يظهر في الصورة, الرابط الخاص بمشروعك جاهز للاستخدام.

ملحوظة مهمة :
يمكنك بعد ذلك من التعديل علي ملفات مشروعك مباشرة داخل الـ Visual Studio Code وبعد الانتهاء من التعديلات فقط قم بعمل خطوة Commit & sync .

أيضاً يمكنك بداية مشروع جديد مباشرةً مع الـ GitHub وذلك بعمل الريبو الخاص بالمشروع الجديد في الموقع وفتحة بنفس الطريقة في برنامج VS, وبعدها قم بعملك كالمعتاد ( أضف ملفاتك, واكتب أكوادك ) وعند الانتهاء والرغبة في النشر قم بعمل ما تعلمته هنا اليوم.