Git for Web Development: تعرف على سير العمل النموذجي للمشروع

يرتبط تطوير الويب ارتباطًا جوهريًا بالتعاون. ستعمل في معظم الأوقات مع مطورين آخرين ، وحتى إذا لم تفعل ذلك ، يمكن لـ Git مساعدتك بعدة طرق أخرى.

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

كمطور ويب ، من المهم للغاية معرفة كيفية استخدام Git لتطوير الويب بشكل صحيح. نحن لا نتحدث فقط عن "git add" و "git الالتزام" و "git push". يجب أن تعرف سير العمل الكامل لإنشاء مشروع ويب باستخدام Git.

غير مقتنع بعد؟ لنبدأ!

لماذا تستخدم Git؟

هذه ليست سوى بعض الأسباب لبدء استخدام Git:

• التنظيم: بدلاً من إدارة مشروعك في مجلدات مثل v1 و v2 و v3 وما إلى ذلك ، لديك مشروع واحد بقاعدة بيانات خاصة تخزن جميع إصدارات الملفات
• التعاون: يتيح Git لك وللآخرين العمل في نفس المشروع في نفس الوقت دون خلق تعارضات.
• المصدر المفتوح: Git مفتوح المصدر ، ولكنه أيضًا الأداة التي نستخدمها للتعاون وإنشاء برامج رائعة مفتوحة المصدر. يمكن لأي شخص تقديم طلبات سحب لمشاريع مفتوحة المصدر على منصات مثل GitHub أو Bitbucket.
• مرونة النظام الأساسي: في الوقت الحاضر ، لديك العديد من خدمات استضافة Git المختلفة للاختيار من بينها ، مثل Gitlab و GitHub و Bitbucket و SourceForge. يمكنك حتى استخدام حل مستضاف ذاتيًا لجميع مشاريعك.
• عمليات نسخ احتياطي سهلة: يمكنك التراجع عن الأخطاء بسهولة وعدم فقد قاعدة بيانات مشروعك أبدًا.

لقد ذكرنا المصطلح GitHub مرة أو مرتين الآن ، فما الفرق بين Git و GitHub؟

قد يربك هذا الأمر إذا كنت جديدًا تمامًا على Git. لوضعها في كلمات بسيطة ، فإن Git و GitHub هما أدوات مترابطة ولكن مختلفة.

Git هو نظام التحكم في الإصدار (VCS) الذي نستخدمه للتحكم في تغييرات ملفاتنا ، في حين أن GitHub هي خدمة نستخدمها لتخزين ملفات مشروعنا وسجل Git الخاص بهم عبر الإنترنت (الموجود في .git / مجلد مشروعك) .

يتم تثبيت Git محليًا ، على جهازك ، وبدون خدمات الاستضافة مثل GitHub أو GitLab ، سيكون من الصعب جدًا التعاون مع مطورين آخرين.

يقوم GitHub بشحن Git عن طريق إضافة ميزات أخرى تعمل على تحسين التعاون ، مثل الاستنساخ والتقسيم والدمج. تتحد هاتان الأداتان معًا لتوفر لك نظامًا بيئيًا ودودًا نسبيًا لتطوير مشروعك وإدارته وعرضه على الآخرين.

Basic Git لسير عمل تطوير الويب

في الأقسام التالية ، ستتعرف على المزيد حول سير عمل Git لتطوير الويب من خلال التدريب العملي.

متطلبات التثبيت

إذا لم تقم بتثبيت Git بعد ، فهذا هو الوقت المثالي. إنه سهل التثبيت ومتوفر في معظم أنظمة التشغيل.

قم بتنزيله من صفحة التنزيلات الرسمية ، أو قم بتثبيته مع مدير الحزم إذا كنت تستخدم Linux أو macOS:

لاختبار أن كل شيء سار على ما يرام مع التثبيت ، قم بتشغيل Terminal على Linux أو macOS بالبحث عن "Terminal" في قائمة التطبيقات الخاصة بك ، أو عن طريق فتح Git bash على Windows (والذي يأتي مثبتًا مع Git افتراضيًا).

ثم اكتب:

 git --version

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

سنحتاج أيضًا إلى حساب GitHub ، لذا تأكد من التسجيل أو تسجيل الدخول إلى GitHub:

بمجرد تثبيت Git وتسجيل الدخول إلى حساب GitHub الخاص بك ، يمكنك الانتقال إلى القسم التالي.

سير عمل Git الأساسي للمشاريع التعاونية

كما ذكرنا سابقًا ، لن تقوم في معظم الوقت بتطوير مشاريع فردية. يعد التعاون مهارة أساسية ، ويساعدنا Git و GitHub في جعلها عملية بسيطة لكنها فعالة.

يبدو سير العمل النموذجي لمشروع Git كما يلي:

1. احصل على نسخة محلية من المشروع عن طريق استنساخ مستودع أو ريبو. إذا كنت تتعاون ، فيجب أن تتفرع الريبو أولاً.
2. قم بإنشاء فرع باسم تمثيلي للميزة التي ستعمل عليها.
3. تحرير المشروع.
4. قم بتنفيذ التغييرات على جهازك المحلي.
5. ادفع التغييرات إلى الريبو البعيد.
6. قم بإنشاء طلب سحب إلى الريبو الأصلي.
7. دمج وحل النزاعات في الفرع الرئيسي من الريبو الأصلي.

درس تعليمي

حان الوقت الآن لجعل أيدينا متسخة!

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

لتقسيم موقع HTML ، انتقل إلى مستودع GitHub هذا وانقر فوق الزر Fork الموجود أعلى يمين الصفحة:

الآن لديك شوكة من الريبو الأصلي المتاح فقط على حساب GitHub الخاص بك. إنه نفس الريبو بالضبط - حتى تبدأ في تنفيذ التغييرات.

كما ترى ، يستغرق إنشاء إعادة شراء عامة بضع ثوانٍ فقط. يعد هذا أمرًا رائعًا للمشاريع مفتوحة المصدر ، ولكن ضع في اعتبارك أنه إذا كانت مؤسستك لديها ريبو خاص ، فستحتاج إلى تضمينك كمساهم قبل محاولة تفرعها.

حان الوقت لإحضار الشوكة إلى جهازك المحلي. للقيام بذلك ، تحتاج إلى استنساخه باستخدام الأمر git clone ، الذي يسترد مستودع Git من الخادم البعيد:

 git clone remote_url

تحتاج إلى استبدال remote_url بعنوان URL الخاص بالشوكة. للحصول على عنوان URL الدقيق لـ GitHub repo ، انتقل إلى صفحته وانقر فوق Code . ثم اختر SSH ، وانسخ الرابط الذي يقدمه لك:

الأمر الذي ستقوم بتشغيله لاستنساخ الريبو المتشعب هو:

 git clone [email protected]:yourusername/HTML-site.git

عند استنساخ الريبو ، تحصل على مجلد باسمه. يوجد داخل هذا المجلد الكود المصدري للمشروع (في هذه الحالة ، موقع HTML) و Git repo ، الموجود داخل مجلد باسم .git .

يمكنك رؤية قائمة الملفات داخل الدليل الجديد عن طريق فتح المجلد الجديد في مدير ملفات رسومي ، أو من خلال سردها مباشرة من الجهاز باستخدام الأمرين ls أو dir :

 # Linux/macOS ls HTML-site/ # Windows dir HTML-site\ .git images .gitignore index.html LICENSE README.md styles.css

موقع HTML هذا بسيط للغاية. يستخدم Bootstrap لأغراض عملية وبعض الصور من Unsplash ، حيث يمكنك تنزيل صور مجانية لموقعك.

إذا فتحت ملف index.html في متصفحك ، فسترى صفحة بسيطة بها بعض الصور:

حان الوقت للتلاعب بهذا المشروع. إنه شعور فارغ للغاية ، وربما يمكن أن يؤدي العنوان الذي يحمل اسم الموقع إلى تحسين تجربة المستخدم.

للقيام بذلك ، أدخل دليل موقع HTML وأنشئ فرعًا يسمى header . في هذا الفرع الجديد ، يمكننا تحرير جميع الملفات وتنفيذ أكبر قدر من التعليمات البرمجية كما نريد لأنه لن يؤثر على الفرع الرئيسي (الأصلي).

قم بتشغيل الأمر التالي:

اشترك في النشرة الإخبارية

تريد أن تعرف كيف قمنا بزيادة حركة المرور لدينا أكثر من 1000٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول WordPress!

إشترك الآن

 git checkout -b header

سيؤدي هذا إلى إنشاء فرع يسمى "header" ويحولك إليه بعد ذلك مباشرة. إنه يعادل:

 git branch header git checkout header

لتأكيد أن كل شيء سار على ما يرام ، قم بتشغيل:

 git status # On branch header # nothing to commit, working tree clean

ستلاحظ أنه تم نقلك من الفرع "الرئيسي" إلى فرع "الرأس" ، لكن شجرة العمل لا تزال نظيفة نظرًا لأننا لم نقم بتحرير أي ملفات.

في محرر الكود المفضل لديك ، افتح ملف index.html في مشروعك المتفرّع. يتضمن هذا الملف بعض الارتباطات إلى Bootstrap 5 ، حتى نتمكن من الاستفادة من مكونات الإطار الجاهزة للاستخدام.

أضف الكود التالي إلى ملف index.html داخل علامة <body> وفوق حاوية الصورة:

 <header> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">HTML site</span> </div> </nav> </header>

مظهر أفضل بكثير! لا تتردد في عمل الفروع والتغييرات الأخرى التي تريدها.

بمجرد الانتهاء من تحرير المشروع ، حان الوقت لإجراء جميع التغييرات على الريبو المحلي الخاص بك. داخل دليل المشروع ، اكتب ما يلي في جهازك الطرفي:

 git add --all git commit -m "Added simple header in index.html file"

عندما تبدأ مشروعًا لأول مرة ، من الشائع أن يكون لديك رسائل التزام وصفية ، ولكن مع مرور الوقت وتغيير التركيز ، تميل جودة الرسائل إلى الانخفاض. تأكد من مواكبة ممارسات التسمية الجيدة.

لقد قمت الآن بالتزام الريبو المحلي الخاص بك (والذي لا يزال متاحًا فقط على جهاز الكمبيوتر الخاص بك) ، فقد حان الوقت لدفعه إلى المستودع البعيد.

إذا حاولت دفع الالتزام كالمعتاد ، فلن ينجح ذلك لأنك تعمل حاليًا على فرع header . تحتاج إلى تعيين فرع المنبع header :

 git push --set-upstream origin header

بدءًا من 13 أغسطس 2021 ، يتطلب GitHub استخدام مصادقة SSH ، لذا تأكد من إعداد مفاتيحك بشكل صحيح.

بعد ذلك ، يجب أن تكون قادرًا على رؤية فرع جديد يسمى header في مستودعك المتشعب (على سبيل المثال https://github.com/yourusername/HTML-site/branches ):

لإنشاء طلب سحب إلى الريبو الأصلي ، انقر فوق مقارنة ، لأسفل في قسم الفروع النشطة .

سيرشدك هذا إلى طلب السحب ، حيث ستحتاج إلى اختيار الفرع (الأصلي أو المفترق الخاص بك) الذي تريد دمجه معه. بشكل افتراضي ، يعرض خيار الدمج مع المستودع الأساسي:

بمجرد النقر فوق خيار طلب السحب ، ستحتاج إلى كتابة وصف موجز للتغييرات التي تم إجراؤها ، تمامًا كما هو الحال مع التزاماتك السابقة. مرة أخرى ، حاول أن تكون موجزًا ​​وصفيًا:

انقر فوق الزر " إنشاء طلب سحب " وانتظر حتى يقبل مالك المستودع الأساسي التغييرات التي أجريتها أو يقدمها لك.

تهانينا - لقد أكملت للتو جميع خطوات سير عمل Git المشترك لتطوير الويب!

كان هذا مثالًا أساسيًا حقًا ، لكن المنطق يمتد عبر المشاريع من جميع الأحجام. تأكد من تنفيذ سير العمل هذا عن كثب في المشاريع التعاونية الأكبر أيضًا.

كيفية استخدام جيت في كينستا

إذا كنت من مستخدمي Kinsta ، فلديك بالفعل طريقتان لاستخدام Git و GitHub من داخل بوابة MyKinsta الخاصة بك.

لنبدأ بالخيار الأول. يمكنك بسهولة SSH وسحب الريبو من أي خدمة استضافة Git مثل GitHub أو Gitlab أو Bitbucket.

للقيام بذلك ، انتقل إلى علامة التبويب " المواقع " ، وحدد موقعًا ، وانتقل إلى قسم تفاصيل SSH ، وانسخ أمر SSH Terminal.

قم بتسجيل الدخول عبر SSH إلى موقعك عن طريق لصق الأمر أعلاه في جهازك ، والدخول إلى المجلد العام لموقعك (الموجود تحت / www / yoursitename / ). هذا هو المكان الذي توجد به جميع ملفات WordPress الخاصة بك ، بحيث يمكنك سحب Git repo باستخدام سمة مخصصة أو مكون إضافي كنت تعمل عليه.

إليك كيفية سحب Git repo بأمر بسيط:

 ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

الآن ، عند تقديم ميزة نشر GitHub الجديدة في Kinsta ، يمكنك نشر موقع WordPress كامل من مستودع GitHub.

يجب أن يتضمن GitHub repo نسخة من ملفات WordPress الأساسية ، وبالطبع محتوى موقعك داخل مجلد wp-content .

دعنا نلقي نظرة سريعة على هذا الخيار.

انتقل إلى أحد مواقع شركتك وأنشئ بيئة انطلاق. لن يستغرق هذا أكثر من دقيقتين.

بمجرد دخولك إلى موقع التدريج ، انتقل إلى علامة التبويب النشر وانقر على زر بدء الإعداد . سترى نموذج GitHub الذي سيسمح لـ Kinsta بالاتصال بحساب GitHub الخاص بك.

الآن ، حدد الريبو الذي ستسحب منه موقعك.

أخيرًا ، انشر موقعك وقم بزيارته من خلال عنوان URL الخاص بالموقع المرحلي.

لا تزال هذه الميزة في الإصدار التجريبي ، ولكن سرعان ما سيتمكن كل مستخدم من مستخدمي Kinsta من الوصول إليها.

يمكن أن يكون استخدام Git و Kinsta مزيجًا قويًا إذا كنت تعرف استخدامهما جيدًا. بينما يقدم برنامجنا التعليمي هنا مجرد مثال بسيط ، يمكنك معرفة المزيد من مقالة قاعدة المعارف الخاصة بنا.

ملخص

في الوقت الحاضر ، تعد Git أداة لا بد من تعلمها لتطوير الويب ، نظرًا لأنك ستتعاون في معظم الأوقات مع الآخرين لإنشاء أفضل مشروع يمكنك.

في هذه المقالة ، ناقشنا بعض الأسباب المهمة لاستخدام Git في مشاريعك ، وقد أظهرنا لك سير العمل الأساسي للتعاون في Git repo.

تعد Git أداة قوية يمكنك توسيع استخدامها حتى إلى استضافة WordPress ، لذلك لا يمكن أن تفيدك إلا في تعلمها وتنفيذها كجزء من ترسانة مهارات تطوير الويب الخاصة بك.

هل لديك أي اقتراحات أخرى لتحسين سير عمل Git الأساسي لتطوير الويب؟ دعنا نعلم فى قسم التعليقات!