00:00:00على مدى أكثر من عقد من الزمان، قام الملايين من المطورين بالبناء على سحابة Vercel للواجهات الأمامية.
00:00:04لقد استخدمنا جميعًا Vercel لنشر كل شيء، بدءًا من المشاريع الشخصية وصولاً إلى برمجيات الشركات الكبرى.
00:00:10وعندما تقوم ببناء وكلاء وميزات ذكاء اصطناعي لتقليل العناء لمستخدميك أو لفريقك،
00:00:15فإن آخر شيء تريده هو شيء معقد يتطلب صيانة مستمرة في بيئة التشغيل الفعلية.
00:00:21إن بنية Vercel التحتية ذاتية القيادة تجعل عمليات التطوير والتشغيل (DevOps) بسهولة النشر تمامًا.
00:00:25أنت تقوم بإنشاء الكود وبناء الوكلاء، ثم تتولى Vercel تحسين الأداء تلقائيًا على نطاق عالمي،
00:00:31وتوفير موارد الحوسبة، وتنسيق سير عمل الذكاء الاصطناعي، وحتى التحقيق في الحالات الشاذة.
00:00:38كل ذلك دون الحاجة إلى أي إعدادات مسبقة.
00:00:40الآن، دعوني أريكم ما أعنيه من خلال عرض سريع.
00:00:43لنخض تحدي نقل تطبيق ويب موجود بالفعل.
00:00:46هذا تطبيق تجريبي لمنصة توظيف تابعة لشركة قهوة متوسطة الحجم تمتلك محمصة ومقاهي.
00:00:53إنه تطبيق بسيط يتكون من واجهة أمامية، وقاعدة بيانات لتخزين طلبات التوظيف والسير الذاتية،
00:00:58وخدمة خلفية تقوم بتلخيص رسائل التغطية لتسريع مراجعة الطلبات.
00:01:03حالياً، التطبيق مستضاف لدى مزود قديم جداً، لن أخبركم باسمه،
00:01:07لكننا بالتأكيد نريد تحديثه، لذا لنقم بذلك.
00:01:10سننتقل إلى Vercel، مما سيسرع تطوير الميزات، والنشر، والتعاون.
00:01:17الآن دعونا نستورد هذا التطبيق إلى Vercel.
00:01:19سأبدأ بالخدمة الخلفية، وهي خدمة FastAPI بسيطة بلغة بايثون.
00:01:24سأبدأ بالنقر على “إضافة جديد” (Add New).
00:01:26لقد قمت بالفعل بربط حساب Git الخاص بي ويمكنني رؤية مستودعاتي هنا.
00:01:31سأنقر على “استيراد” (Import) لمستودع واجهة برمجة التطبيقات (API).
00:01:33عملية الاستيراد قابلة للتخصيص بالكامل، بما في ذلك إعدادات البناء والمخرجات،
00:01:38لكن Vercel يدعم FastAPI وأطر العمل الخلفية الأخرى بشكل مباشر.
00:01:44لذا يمكنني فقط النقر على “نشر” (Deploy) وسيعمل الأمر.
00:01:46وفي غضون ثوانٍ قليلة، أصبحت خدمة بايثون الخلفية منشورة وتعمل على Vercel.
00:01:52قامت Vercel تلقائيًا بإنشاء رابط (URL) لهذا المشروع.
00:01:55سأقوم بنسخه حتى أتمكن من إضافته كمتغير بيئة (Environment Variable) للتطبيق التالي.
00:02:01سأضيف مشروعًا جديدًا آخر، وأنقر على “استيراد” للتطبيق التالي،
00:02:05وسأقوم باستيراد متغيرات البيئة لهذا التطبيق حتى يتمكن من الاتصال بـ Supabase.
00:02:11رائع، الآن يمكن لتطبيقي الاتصال بـ Supabase، وبالنسبة لمتغير FastAPI،
00:02:15سأضيف الرابط الذي نسخته للتو، ثم أقوم بنشر التطبيق.
00:02:20تقوم Vercel الآن ببناء المشروع ونشره،
00:02:23وسيعمل هذا على نفس البنية التحتية التي تشغل ملايين المواقع والتطبيقات.
00:02:27توزع Vercel حضورها العالمي عبر 126 نقطة لتحديد موقع المحتوى تلقائيًا بالقرب من المستخدم،
00:02:33مما يعني أنه سيكون دائمًا فائق السرعة.
00:02:37وهنا نرى أن التطبيق قد تم نشره بنجاح.
00:02:40دعونا نلقي نظرة عليه.
00:02:42يمكنني رؤية الوظائف، ورؤية الواجهة الخلفية في لوحة التحكم مع ميزة التلخيص ببايثون.
00:02:49بمجرد أن يصبح هذا في بيئة التشغيل، سأتمكن من مراقبة التطبيق بالكامل.
00:02:53لكن في الوقت الحالي، سأنتقل إلى مشروع آخر حيث يمكننا رؤية بعض البيانات المباشرة.
00:02:57يمكنني الحصول على صورة كاملة عبر تحليلات الويب، ورؤى السرعة، والسجلات، ولوحة تحكم قابلة للاستعلام.
00:03:04على سبيل المثال، هذه هي التحليلات لموقعنا skills.sh، حيث يذهب الناس للبحث عن مهارات الوكلاء.
00:03:11يمكنني العثور على معلومات مفصلة حول حركة الزوار ومصادر الإحالة، بما في ذلك المواقع المحيلة.
00:03:15إذا نقرت هنا على “رؤى السرعة” (Speed Insights)، فستظهر لي مؤشرات أداء الويب الأساسية.
00:03:19بهذه الطريقة، يمكنني تشخيص وإصلاح أي مشكلات تتعلق بالسرعة أو التحميل.
00:03:23وإذا نقرت على “القدرة على المراقبة” (Observability)، سأحصل على لوحة التحكم التي تتيح لي استكشاف أي تشخيص من تطبيقي،
00:03:29من السجلات إلى الدوال إلى طلبات الحافة وصولاً إلى نقل البيانات.
00:03:34حسناً، أريد الآن أن أجعل ميزة التلخيص أكثر فائدة لمديري التوظيف.
00:03:38حالياً، يقوم FastAPI بتلخيص رسالة التغطية باستخدام مكتبة بايثون فقط.
00:03:43لكن يمكننا بناء وكيل بسيط لتحليل كل من رسالة التغطية والسيرة الذاتية (PDF)،
00:03:48ومقارنتهما بالوصف الوظيفي، وإجراء تقييم أولي للمرشح،
00:03:52وإنشاء مسودة بريد إلكتروني ليرسلها مدير التوظيف.
00:03:56لقد قمت بالفعل بنسخ المستودع محلياً، لذا سأنتقل إلى المجلد وأقوم بتثبيت الأدوات التي أحتاجها.
00:04:01الآن سأستخدم واجهة سطر أوامر Vercel (CLI) لربط مشروعي المحلي بـ Vercel.
00:04:06تسهل عليّ الـ CLI التحكم في منصة Vercel مباشرة من سطر الأوامر.
00:04:11سأبدأ بالأمر “Vercel link”.
00:04:14نعم، سأقوم بربط هذا المشروع المحلي.
00:04:16سيكون تحت مؤسسة Vercel demo ومشروع وظائف المقهى.
00:04:21لقد تم العثور عليه بالفعل.
00:04:22وسنقوم بسحب متغيرات البيئة.
00:04:24ها قد انتهينا.
00:04:25يمكنني أيضاً تشغيل التطبيق محلياً باستخدام “Vercel dev”، الذي يحاكي بيئة نشر Vercel محلياً.
00:04:31لنجرب ذلك: “Vercel dev”.
00:04:34يبدأ تشغيل الخادم، دعونا نمضي قدماً ونختبره.
00:04:37وها هو يعمل.
00:04:38أمر رائع حقاً.
00:04:40الآن دعونا نثبت أدوات الذكاء الاصطناعي التي سنحتاجها لبناء الوكيل.
00:04:43توفر لي Vercel جميع أدوات الذكاء الاصطناعي اللازمة لبناء الميزات والوكلاء.
00:04:47أولاً، أحتاج إلى دمج نموذج ذكاء اصطناعي فعلي لعملية التلخيص.
00:04:51يمكنني استخدام المئات من النماذج المختلفة عبر بوابة Vercel للذكاء الاصطناعي،
00:04:55وتشغيل “Vercel dev” يمنحني وصولاً تلقائياً باستخدام رموز OIDC، وهو أمر رائع.
00:05:00بعد ذلك، سأقوم بتثبيت AI SDK، الذي يمنحني مجموعة كاملة من الأدوات الأساسية لأشياء مثل تلخيص النصوص.
00:05:07لنقم بتنفيذ “PMPM install AI”.
00:05:12عظيم.
00:05:13بعد ذلك، سأقوم بتثبيت حزمة تطوير سير العمل (Workflow Dev Kit)، والتي ستنظم بدقة كل خطوة يتخذها الوكيل.
00:05:21إذا كان تطبيقي يقوم بإنشاء كود، فيمكنني أيضاً استخدام بيئة Vercel المعزولة (Sandbox) لتشغيله بأمان.
00:05:26لكن هذا وكيل تلخيص بسيط، لذا لا أحتاج إلى بيئة معزولة من أجله.
00:05:31أخيراً وليس آخراً، الواجهة الأمامية مبنية باستخدام Next.js.
00:05:34لذا سأضيف مهارة “أفضل ممارسات React” إلى مشروعي لضمان أن تكون الواجهة الأمامية منظمة وسريعة.
00:05:40سأستخدم موقع skills.sh.
00:05:43سأذهب إلى هنا، وأبحث عن “React best practices”.
00:05:47سأقوم بنسخ أمر التثبيت.
00:05:50وها قد تم الأمر.
00:05:53دعونا نتأكد من تثبيته لـ clog code وبعض الأشياء الأخرى.
00:05:56على الصعيد العالمي، أفضل إصدار SimLink، وقد تم التثبيت.
00:06:01الآن دعونا نبني الوكيل.
00:06:02الأمر بسيط للغاية، لذا سأقوم فقط بإعطاء أمر (Prompt) لـ clog code.
00:06:06هذا هو الأمر الذي بدأت به.
00:06:08يطلب من clog code بناء الوكيل لتلخيص رسالة التغطية والسيرة الذاتية (PDF)،
00:06:12ودمج الملخصات ومقارنتها بالوصف الوظيفي، وتقديم توصية أولية، وإنشاء بريد إلكتروني للمتابعة.
00:06:20ولكن بالطبع، قضيت بعض الوقت مع clog في تحسين هذا ليصبح أمراً جاهزاً من محاولة واحدة،
00:06:25والذي سأقوم بلصقه الآن في clog code وأتركه يبدأ العمل.
00:06:29من خلال سحر العروض التقديمية، دعونا نفترض أنني انتهيت من أوامر clog بسرعة،
00:06:35وهو ما فعلته بالفعل، وسأفتح المجلد الآخر الذي يحتوي على تلك المخرجات.
00:06:39حسناً، لنقم بالنشر.
00:06:41سأقوم باعتماد التغييرات (Commit) ورفع الفرع (Branch) الذي أعمل عليه.
00:06:47الآن ستقوم بنية Vercel التحتية ذاتية القيادة بالتعرف تلقائياً على أعباء عمل الذكاء الاصطناعي
00:06:51وتوفير البنية التحتية اللازمة لمهام الحوسبة تلك.
00:06:55وتسعير الحوسبة النشطة رائع جداً هنا.
00:06:57سيتم محاسبتي فقط على الحوسبة الفعلية، وليس على وقت الانتظار لاستجابة واجهة برمجة تطبيقات النموذج.
00:07:03حسناً، الآن يمكنني رؤية التطبيق، دعونا نذهب إلى لوحة التحكم ونتفقد تلك الميزة الجديدة ونعرض أحد الطلبات.
00:07:10وبالفعل، لدينا نص الرفض لهذا الطلب والبريد الإلكتروني المولد للرفض.
00:07:17الآن، الجزء الأفضل في بيئات المعاينة هو أن أي شخص في فريقي يمكنه ترك تعليق على أي جزء من التطبيق.
00:07:24سأفعل ذلك الآن، وسأطلب من “إريك” إضافة زر.
00:07:31جميل، وهذه مجرد ميزة واحدة من ميزات شريط أدوات Vercel.
00:07:34يمكنك اختبار الأعلام (Flags)، وإجراء تدقيق لسهولة الوصول، وتتبع العمليات، وغير ذلك.
00:07:38تعمل بيئة المعاينة على نفس البنية التحتية لبيئة التشغيل الفعلية،
00:07:42لذا فإن ما أختبره هنا هو بالضبط ما سيراه المستخدمون النهائيون في الواقع.
00:07:46حسناً، لقد أضفنا وكيلاً إلى التطبيق، لكني أريد أن يتمكن الآخرون في الفريق من تحسين واجهة المستخدم أيضاً.
00:07:52يجعل V0 من السهل على الآخرين العمل على المشروع في بيئة تطوير قائمة على الويب،
00:07:57مع الحفاظ على كل شيء تحت نظام التحكم في الإصدارات وأمان سير عمل Git.
00:08:01هذا أمر رائع حقاً.
00:08:03سأقوم باستيراد مشروع GitHub، واختيار الفرع الرئيسي (Main) كقاعدة، وسيقوم V0 بإعداد المشروع.
00:08:13وكما ترون، تم استيراد متغيرات البيئة الخاصة بي أيضاً.
00:08:19والآن، في أقل من دقيقة، أصبح تطبيقي يعمل في V0.
00:08:23لأن هذا مشروع موجود مسبقاً، يقوم V0 بتشغيل بيئة معزولة (Sandbox) لتشغيل الكود.
00:08:28إنها نفس التقنية الأساسية للبيئة المعزولة التي نستخدمها في Vercel لإنشاء بيئات منفصلة.
00:08:33وإذا نقرت على Git، يمكنك رؤية أن V0 قد أنشأ تلقائياً فرعاً جديداً لأعمل عليه.
00:08:39أريد تعديل تصميم صفحة الوظائف قليلاً.
00:08:42قد يبدو هذا جنونياً، لكن دعونا نجعل بطاقات الوظائف بعرض الصفحة بالكامل.
00:08:50لقد أنجز V0 ذلك، وهمم، لم يعجبني هذا الخيار الذي اتخذته، لكن لنرَ رأي فريق التصميم.
00:08:57يمكنني إرسال دردشة V0 هذه إلى فريقي ليتمكنوا من مواصلة العمل،
00:09:00أو يمكنني فتح طلب سحب (PR) ومشاركة بيئة المعاينة للتعاون.
00:09:06بمجرد نشر تطبيقي وتقديمه على نطاق عالمي، تضمن Vercel أنه آمن افتراضياً.
00:09:13نفس البنية التحتية ذاتية القيادة التي تشغل تطبيقي تقوم أيضاً بحمايته عند الحافة (Edge).
00:09:18هذا هو عرض جدار الحماية لموقعنا المبني بـ Next.js.
00:09:20إنه يتلقى الكثير من الزيارات، وليست جميعها جيدة.
00:09:24يقوم جدار حماية تطبيقات الويب من Vercel تلقائياً بفحص وتصفية الطلبات الضارة عند الحافة قبل وصولها إلى تطبيقك.
00:09:33وتقوم تقنية Bot ID بتمييز المستخدمين الحقيقيين عن الزيارات الآلية بهدوء، مما يحظر الروبوتات المسيئة دون إزعاج المستخدمين باختبارات الكابتشا.
00:09:40وتكتشف شبكة الحافة العالمية لـ Vercel الهجمات واسعة النطاق وتخفف من حدتها تلقائياً، مما يحافظ على استجابة تطبيقك تحت الضغط.
00:09:49كل ما رأيتموه للتو — من هجرة البيانات، وسير عمل الذكاء الاصطناعي، والتعاون، والأمن — تم تشغيله على منصة واحدة دون أي إعداد للبنية التحتية.
00:09:59هذا هو معنى “ذاتية القيادة”.
00:10:01المنصة تبتعد عن طريقك لتركز أنت على الإنتاج.
00:10:05لقد وصلنا إلى 11 مليون مشروع والعدد في ازدياد.
00:10:08ومشروعك هو التالي.