رفع مشروعك على 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 جديد, وهو المكان الذي سنقوم بحفظ ملفات المشروع فيه.

GitHub

إنشاء Repository جديد

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

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

Visual Studio Code with GitHub

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

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

Visual Studio Code

طريقة عمل Clone Git Repository

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

TamCode

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

TamCode

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

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

Clone Git Repository

هنا نختار Open

Clone Git Repository

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

Clone Git Repository

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

Clone Git Repository

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

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

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

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

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

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

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

رفع ملفات المشروع على GitHub

Commit

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

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

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

Clone Git Repository

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

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

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

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

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

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

Commit

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

Commit & Sync

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

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

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

Commit & Sync

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

Commit & Sync

GitHub

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

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

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

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

GitHub

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

TamCode

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

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

Similar Posts