البدء مع v0: من الفكرة إلى الإنتاج
VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00هذه صفحة هبوط لحدث قمت ببنائها بنفسي في غضون دقائق قليلة.
00:00:05حتى أنها تتضمن تجربة قياس افتراضية مدعومة بالذكاء الاصطناعي.
00:00:09لقد كلفني مديري بالمشروع، وساعدني V0 في تحويل أفكاري إلى برنامج حقيقي.
00:00:14في هذا الفيديو، سأوضح لك ما هو V0 وكيفية بناء المشاريع خطوة بخطوة.
00:00:19إذن، ما هو V0؟
00:00:21يجعل الذاء الاصطناعي توليد الأكواد أمرًا سهلاً.
00:00:23يستغل V0 هذه القوة في قالب يسهل على أي شخص بناء تطبيقات حقيقية
00:00:28ومواقع إلكترونية أو التعاون مع المطورين.
00:00:30تم تصميم V0 لمساعدتك على الانتقال من نقطة الصفر إلى الإطلاق بأسرع ما يمكن.
00:00:36هذه هي آلية عمل V0.
00:00:37تصف التطبيق، أو العميل المساعد، أو الموقع الذي تريده، ثم يقوم V0 بتوليد الكود في
00:00:42معاينة مباشرة.
00:00:43يمكنك إجراء تغييرات وتعديل مشروعك من خلال التحدث إلى V0، وإخباره بالتغييرات المطلوبة،
00:00:48وسيقوم بإجرائها نيابةً عنك.
00:00:49يقوم V0 بتوليد برمجيات حقيقية باستخدام Vercel و Next.js، لكن V0 ليس مجرد أداة لبناء المواقع.
00:00:56يمكنه إنشاء تطبيقات حقيقية، وربطها بالذكاء الاصطناعي وقواعد البيانات، وتوليد أكواد يمكن للمطورين
00:01:00استخدامها ونشرها.
00:01:02هذا ممكن لأن V0 تم تطويره بواسطة Vercel، مبدعي إطار عمل Next.js،
00:01:08والذي تستخدمه علامات تجارية كبرى مثل Under Armour و Stripe و Notion.
00:01:11لذا، عندما يقوم V0 ببناء ونشر تطبيق Next.js الخاص بك، فإنك تستخدم نفس الكود والبنية التحتية
00:01:15الآمنة التي تستخدمها كبرى الشركات في العالم.
00:01:19دعونا نعرض بعض المشاريع لتتمكنوا من رؤية V0 أثناء العمل ومدى سهولة البدء.
00:01:24أنا الآن في فريق التسويق، ولدي مشروعان كبيران لأقوم بهما هذا الأسبوع.
00:01:27أولاً، أحتاج إلى بناء صفحة حدث لمنتج جديد نقوم بإطلاقه.
00:01:31وثانياً، أحتاج إلى تحديث صفحة هبوط على موقعنا الإلكتروني.
00:01:34لنبدأ أولاً بصفحة الحدث.
00:01:36الحدث مخصص لحفلة إطلاق منتج حيث سنطرح ساعة جديدة تسمى
00:01:40"Son of Ali".
00:01:41أريد أن أجعل صفحة الهبوط أنيقة ومثيرة لإثارة الحماس وخلق تجربة قياس افتراضية
00:01:45جذابة للزوار حتى يقوموا بالتسجيل.
00:01:48لذا، سأطلب من V0 القيام بذلك تماماً.
00:01:53لقد انتهيت من كتابة توجيهاتي.
00:01:54الآن سأرسل التعليمات، وسيبدأ V0 في البناء.
00:01:59بينما يقوم V0 بالبناء، أريد أن أريكم ما يجعله قويًا للغاية.
00:02:02إذا نقرت على الإعدادات، ثم التكاملات، فستشاهد كل التكاملات المتاحة
00:02:07لك في V0.
00:02:09أولاً، يمكنك رؤية أن V0 يحتوي بالفعل على ذكاء اصطناعي مدمج.
00:02:12سيستخدم حزمة تطوير برمجيات الذكاء الاصطناعي (AI SDK) لبناء ميزات الذكاء الاصطناعي وبوابة الذكاء الاصطناعي لمنح تطبيقك إمكانية الوصول
00:02:17إلى مئات من نماذج الذكاء الاصطناعي تلقائيًا.
00:02:20يمكنك أيضًا بناء قواعد بيانات أو الاتصال بها لتشغيل الجزء الخلفي من تطبيقك وحتى
00:02:25قبول المدفوعات من خلال Stripe.
00:02:27باستخدام هذه التكاملات، يمكنك بناء تطبيقات حقيقية متكاملة تدعم الذكاء الاصطناعي.
00:02:32حسناً، فلنتحقق من صفحة الحدث الخاصة بنا.
00:02:34لقد انتهى V0 من بناء هذا الإصدار الأول، لذا دعونا نختبره.
00:02:38سأقوم برفع صورة لنفسي، ويجب أن تعطينا تلك النماذج الأربعة
00:02:44التي طلبناها مع تجربة القياس الافتراضي للساعة.
00:02:49رائع، لقد أخذ V0 تعليماتي بالفعل وقام بتحديث الكود.
00:02:55إذا نظرنا إلى المحرر، يمكنك رؤية أن V0 يقوم بتحديث كود Next.js بنشاط.
00:03:00كما يسهل المحرر على المطورين مراجعة الكود وتعديله.
00:03:04تماماً، لقد انتهى V0 من إجراء التغييرات وتبدو رائعة.
00:03:09قبل أن أنشر هذا، أريد مشاركته مع فريقي للحصول على آرائهم.
00:03:12لذا يمكنني النقر على "مشاركة" ثم نسخ الرابط وإرسال المحادثة والمعاينة إلى فريقي.
00:03:18ما يرونه في هذه المعاينة سيكون تمامًا ما يراه المستخدمون عندما أجعل الصفحة عامة،
00:03:22لذا لا داعي للقلق بشأن تغير أي شيء عند النشر الفعلي.
00:03:26بمجرد أن يراجع فريقي الصفحة، سأكون مستعدًا لمنحها رابطًا مخصصًا ونشرها.
00:03:31والأكثر من ذلك هو أن هذا قد أنشأ بالفعل مشروعًا على Vercel لهذا الابتكار الذي
00:03:36صنعته بواسطة V0.
00:03:37لذا إذا نقرت على "فحص على Vercel"، يمكنني الذهاب وإلقاء نظرة على هذا المشروع.
00:03:42داخل هذا المشروع، يمكنني رؤية جميع التحليلات، والأخطاء، وسجل كامل لعمليات النشر.
00:03:48حسنًا رائع، لقد قمت بنشر هذا التطبيق للعمل الفعلي.
00:03:51الآن يمكنني زيارة الموقع المباشر وسيكون هذا ما يراه المستخدمون ويمكنني مشاركة
00:03:56هذا الرابط ليتمكنوا من الوصول إليه علنًا.
00:03:59الأمر الرائع حقًا مع V0 هو أنه يمكنني اختيار إضافة نطاق مخصص.
00:04:03يمكنني تخصيص النطاق على .vercel.app، أو شراء نطاق، أو إضافة نطاق
00:04:09أمتلكه بالفعل.
00:04:10بما أن هذه الصفحة لحدث يقام لمرة واحدة، سأقوم بتخصيص النطاق الأساسي ثم
00:04:14أنشرها مرة أخرى.
00:04:15ممتاز.
00:04:16حسنًا، تم الآن تحديث هذا النطاق ويمكنني الوصول إلى نفس الصفحة عبر النطاق الجديد الذي
00:04:21قم بتعديله وإضافته.
00:04:23وهذا كل شيء.
00:04:24لقد قام V0 الآن بنشر تطبيقي على البنية التحتية لـ Vercel وهو متاح للجميع للوصول إليه.
00:04:30الآن دعنا ننتقل إلى مشروعي التالي، وهو تحديث صفحة هبوط تم
00:04:34نشرها بالفعل على موقعنا التسويقي.
00:04:36يدير فريق التطوير لدينا الموقع ويتحكم في إصدارات الكود عبر GitHub، لذا سأحتاج
00:04:41إلى إجراء التحديث كجزء من سير عملهم.
00:04:44الخبر السار هو أن V0 يسهل علي القيام بذلك تمامًا.
00:04:48سأفتح نافذة V0 جديدة وأنقر على "استيراد من GitHub".
00:04:52لدي بالفعل رابط مستودع GitHub الذي أحاول الوصول إليه، لذا سأقوم
00:04:56بلصقه في الشريط العلوي والنقر على "استيراد".
00:05:01وهكذا ببساطة، يستورد V0 المستودع.
00:05:05الآن بعد أن استورد V0 المستودع، أصبحت جاهزًا لإجراء التغيير.
00:05:08ما أود القيام به هو إضافة شريط إعلاني في أعلى صفحة التسويق هذه يوجه الأشخاص
00:05:12إلى صفحة هبوط الحدث التي أنشأناها للتو حتى يتمكنوا من التسجيل في حدث إطلاق
00:05:17"Son of Ali".
00:05:18لذا سأطلب من V0 القيام بذلك تمامًا.
00:05:21بينما يقوم V0 بإجراء التغيير، سأذهب وأضغط على "Git".
00:05:27يمكنك أن ترى أن V0 قد أنشأ فرعًا (Branch) لي تلقائيًا، مما يسهل على
00:05:31المطورين مراجعة واختبار التغييرات التي أجريتها قبل دمجها في
00:05:35الموقع الرئيسي.
00:05:36تمامًا، لقد قام V0 بإجراء التغيير، وحان الوقت الآن لإنشاء طلب سحب (Pull Request) يمكن
00:05:42لفريقي مراجعته.
00:05:44لذا سأقوم بالنقر على "فتح طلب سحب" ثم "فتح طلب سحب" مجددًا.
00:05:49الآن إذا نقرت على "عرض طلب السحب"، يمكنني رؤية أن طلب السحب الخاص بي قد فُتح على GitHub.
00:05:54ولأن موقعنا مستضاف على Vercel، فقد تم إنشاء نسخة معاينة تلقائيًا.
00:05:59بهذه الطريقة، لا يقتصر الأمر على مراجعة المطورين للكود فحسب، بل يمكن لبقية أعضاء الفريق رؤية
00:06:03كيف يبدو التحديث وتقديم ملاحظاتهم من خلال التعليقات.
00:06:06وهذا كل شيء.
00:06:07لقد أجريت للتو تغييرًا على موقعنا التسويقي بنفسي دون فتح تذكرة لقسم الهندسة
00:06:11ويمكنهم مراجعة التغيير كجزء من عمليتهم الحالية.
00:06:15لقد قمنا ببناء V0 للفرق التي تعمل مع المطورين، سواء كان ذلك في التسويق، أو إدارة المنتجات، أو المؤسسين،
00:06:19أو حتى المهندسين أنفسهم.
00:06:22مع V0، يمكن لأي شخص تحويل أفكاره إلى برمجيات حقيقية والتعاون في التطبيقات والمواقع
00:06:27الحالية.
00:06:28تفضل بزيارة v0.app وابدأ مشروعك الأول اليوم.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video