00:00:00>> مرحبًا، أنا بولين من Vercel، وفي فيديو اليوم،
00:00:03سأريكم كيفية استخدام
00:00:05تكامل Git في v0 لنقل
00:00:08أفكاركم من مرحلة النموذج الأولي إلى الإنتاج.
00:00:11لذا في هذا الفيديو،
00:00:12سنقوم ببناء مدونة،
00:00:14وربطها بـ GitHub،
00:00:15وتجربة ميزات جديدة بأمان باستخدام
00:00:18الفروع (Branches)، ثم نشرها مباشرة على الويب.
00:00:21بنهاية الفيديو، يجب أن تفهم سير العمل الكامل.
00:00:25لذا دعونا نبدأ.
00:00:27حسناً، نحن الآن في v0.
00:00:30سأبدأ ببناء مدونة بسيطة.
00:00:33سأصف فقط ما أريده في الدردشة.
00:00:35ما سنفعله هنا هو إنشاء
00:00:37صفحة مدونة حديثة تحتوي على
00:00:42ترويسة، ومنشور مميز، وشبكة للمنشورات الأخيرة.
00:00:53نصيحة احترافية: يمكنك أيضاً تغيير النموذج من هنا.
00:00:57لدينا نماذج متعددة.
00:00:59لدينا Mini، و Pro، و Max،
00:01:01وأيضاً Opus.
00:01:03لذا يمكنك تغيير ذلك أثناء الدردشة.
00:01:07جميل، أعجبني.
00:01:09لقد صمم v0 هذا التخطيط النظيف للمدونة من أجلي.
00:01:13دعونا نجرِ بعض التعديلات لإضفاء لمسة شخصية.
00:01:17دعونا نجعل،
00:01:21أوه، إن استطعت الكتابة بشكل صحيح،
00:01:23اجعل خلفية الترويسة متدرجة من الأزرق إلى الأرجواني.
00:01:32ممتاز. الآن لدي مدونة أنا راضية عنها.
00:01:36لكن حالياً، هذا موجود فقط في v0.
00:01:40أحتاج لحفظ عملي في مكان أكثر ديمومة.
00:01:43في النهاية، أريد نشر هذا مباشرة،
00:01:45وهنا يأتي دور تكامل Git.
00:01:48لذا سنتوجه هنا إلى الشريط الجانبي
00:01:52حيث يمكنك رؤية شعار GitHub واتصال Git.
00:01:56بما أن هذه هي المرة الأولى التي أربط فيها هذا المشروع،
00:01:59يطلب مني v0 توصيل حسابي على GitHub وتسمية المستودع.
00:02:04ما سنفعله هو المضي قدماً في الاتصال.
00:02:06النطاق هو حسابي الشخصي.
00:02:08أنا مشتركة في كل هذه الحسابات،
00:02:10لكن الآن، سأستخدم فقط حسابي الشخصي Pauline.
00:02:13أنا راضية عن اسم المستودع هذا،
00:02:15لذا سنتركه كما هو ونمضي
00:02:16قدماً لإنشاء المستودع.
00:02:18بهذه البساطة، يقوم v0 بإنشاء
00:02:21المستودع ورفع كل الأكواد الخاصة بي إلى GitHub.
00:02:24رائع. الآن، لنرَ ما يحدث فعلياً في GitHub.
00:02:29يمكننا إلقاء نظرة.
00:02:31انظروا إلى كل هذا الكود الذي أنشأه v0.
00:02:34إنه مهيكل بشكل صحيح مع كل ملفات الإعداد التي أحتاجها.
00:02:38مكوناتي موجودة هناك،
00:02:40ومجلد التطبيق (app directory)، و
00:02:41كل شيء منظم وجاهز للعمل عليه.
00:02:43قد تتساءلون: "ما الذي استفدته فعلياً من الربط بـ GitHub؟"
00:02:48أولاً، الكود الخاص بي مدعوم بنسخة احتياطية آمنة.
00:02:51إذا حدث أي خطأ،
00:02:53فلدي سجل تاريخي كامل.
00:02:55ثانياً، يمكنني التجربة بمزيد من
00:02:57الحرية الآن دون القلق بشأن تغييرات قد تفسد العمل.
00:03:00سنرى هذا عملياً بعد قليل مع الفروع،
00:03:02وثالثاً، لدي مسار للإنتاج.
00:03:04يمكنني نشر هذه المدونة مباشرة.
00:03:06حسناً، لنرَ هذا عملياً بإضافة ميزة جديدة.
00:03:09لنفترض أنني أردت إضافة قسم "عن الكاتب"،
00:03:14لكنني لست متأكدة بنسبة 100% كيف أريد أن يبدو بعد.
00:03:17لا أريد أن أفقد هذا الإصدار الحالي.
00:03:19هنا يأتي دور الفروع (Branches).
00:03:21الفرع هو بمثابة نسخة موازية
00:03:24لمشروعك حيث يمكنك التجربة بأمان.
00:03:27حسناً. ما سنفعله هنا هو تكرار هذا الفرع.
00:03:31لنسمِّ هذا الفرع "author bio".
00:03:36لاحظوا هنا في الأعلى،
00:03:38أنا الآن على فرع "author bio".
00:03:41فرعي الرئيسي (Main) لا يزال كما تركته دون تغيير.
00:03:45الآن يمكننا التجربة بحرية هنا.
00:03:48نريد إضافة سيرة الكاتب الذاتية تلك.
00:03:50سنطلب فقط من v0 إضافة قسم لسيرة الكاتب.
00:03:56حسناً، مذهل.
00:03:59لقد أضاف هذا المكون الجديد لسيرة الكاتب.
00:04:02الآن لنقم بتحديث سريع للمعاينه هنا.
00:04:06يجب أن نكون قادرين على رؤية المكان الذي أضيف فيه.
00:04:10ها هو ذا. يوجد قسم جديد "عن الكاتب".
00:04:13فقط للتذكير،
00:04:15لقد أجرينا التغييرات في هذا الفرع،
00:04:18فرع "author bio"،
00:04:19مما يعني أنه لم يتم إجراء أي
00:04:22تغييرات على الفرع الرئيسي على الإطلاق.
00:04:24لذا هذا الفرع متاح لنا للتجربة.
00:04:27إذا أردنا تغيير أي شيء آخر في النص،
00:04:29أو النمط، فيمكننا فعل ذلك بحرية هنا.
00:04:33في الواقع، بالنظر إلى هذا،
00:04:35أعتقد أن سيرة الكاتب يجب أن تكون أكثر إحكاماً.
00:04:38دعني أعدلها بينما لا أزال في هذا الفرع،
00:04:40فقط لأريكم.
00:04:41اجعل سيرة الكاتب أكثر إحكاماً.
00:04:46حسناً، مذهل.
00:04:48تلاحظون أن v0 جعل قسم الكاتب أكثر إحكاماً
00:04:52ويقول بشكل عام إنه قلل المسافات (padding).
00:04:56يبدو أفضل بكثير.
00:04:57أنا سعيدة جداً بذلك.
00:04:58لذا يمكننا المضي قدماً وفتح PR ورفع هذه التغييرات.
00:05:03انظروا كيف يحمي سير العمل هذا فرعي الرئيسي.
00:05:06يمكنني التكرار والتعديل كما أريد في هذا الفرع التجريبي،
00:05:10لكن الفرع الرئيسي يبقى مستقراً حتى أرضى تماماً.
00:05:13تمام، أنا راضية عن سيرة الكاتب الآن.
00:05:16حان الوقت لدمجها في فرعي الرئيسي.
00:05:18سأقوم بإنشاء "طلب سحب" (Pull Request).
00:05:20طلب السحب أو PR هو أساساً طلب
00:05:25لسحب تغييراتي من فرع "author bio"
00:05:28إلى الفرع الرئيسي.
00:05:30إنها الطريقة الرسمية لاقتراح التغييرات.
00:05:32لذا سنفتح PR مباشرة من هنا.
00:05:35وسننقر هنا للانتقال إلى طلب السحب نفسه.
00:05:44وهذا سيأخذنا مباشرة إلى GitHub.
00:05:46وكما ترون،
00:05:47لدينا تلك العمليات التي قمنا بها (commits) على v0.
00:05:51إنشاء سيرة الكاتب وأيضاً جعلها أكثر إحكاماً.
00:05:56وإذا ذهبنا هنا إلى تغييرات الملفات،
00:05:58يمكنكم مراجعة الكود الدقيق الذي غيره v0.
00:06:03في بيئة الفريق،
00:06:04هنا سيقوم زملاؤك بمراجعة كودك
00:06:07وترك تعليقاتهم.
00:06:08بالنسبة للمشاريع الفردية،
00:06:09هذا هو فحصك النهائي للتأكد من
00:06:11أن كل شيء يبدو على ما يرام.
00:06:13أنا راضية عن هذه التغييرات.
00:06:14لذا سأقوم بدمج (merge) طلب السحب هذا.
00:06:17لنعد إلى v0 هنا.
00:06:20وكما ترون، يمكننا دمج الـ PR.
00:06:23لذا سنقوم بدمجه.
00:06:29وإذا عدنا إلى GitHub،
00:06:31يمكنكم رؤية أنه قد تم الدمج.
00:06:34هذه الميزة الآن هي رسمياً جزء من قاعدة الكود الرئيسية لدينا.
00:06:38الآن أصبح كل شيء مباشراً على الويب.
00:06:39يمكننا أيضاً الانتقال إلى الإعدادات هنا
00:06:42والنظر إلى مشروع Vercel وعرضه على Vercel.
00:06:46كما ترون هنا، تمت عملية النشر بنجاح.
00:06:51وإذا نقرنا هنا على النطاقات (domains)، ها هي ذي.
00:06:55مدونتي منشورة ومتاحة على الإنترنت.
00:06:57يمكنكم رؤية الترويسة مع التدرج اللوني،
00:07:00ومنشورات المدونة.
00:07:01وإذا نزلت للأسفل هنا، سيرة الكاتب.
00:07:06كل ما بنيته في v0 تم
00:07:08دمجه بأمان عبر Git
00:07:10وهو الآن منشور ومتاح للعالم.
00:07:13هذا هو نفس سير العمل الذي
00:07:14تستخدمه فرق التطوير المحترفة كل يوم.
00:07:17أنت تبني في v0، وتدير كودك باستخدام Git
00:07:20ثم تنشر باستخدام Vercel،
00:07:22سير عمل إنتاجي متكامل.
00:07:25أتمنى أن يساعدكم هذا في فهم
00:07:27كيفية استخدام تكامل Git في v0 بمزيد من الثقة.
00:07:30جرب سير العمل هذا بنفسك.
00:07:32ابدأ بشيء صغير، أنشئ فرعاً،
00:07:34جرب وانشر.
00:07:36إذا كانت لديكم أي أسئلة،
00:07:38تواصلوا معنا في مجتمعنا على community.vercel.com.
00:07:41شكراً جزيلاً لكم على المشاهدة.