شرح v0 بالعربي: تصميم الواجهات ونشرها

ما هي الأداة ولمن

v0 تركّز على الواجهة: الصفحة، المكوّن، التخطيط، الحالات التفاعلية. تكتب «صفحة هبوط لعيادة أسنان فيها حجز موعد»، فترى تصميمًا يعمل، ثم تعدّله بالكلام أو بوضع التصميم المرئي الذي يغيّر العناصر دون كتابة طلب.

قوتها في أنها جزء من منظومة Vercel: النشر بنسختين، معاينة وإنتاج، وربط قواعد بيانات بنقرة من سوق Vercel مثل Neon و Supabase و Upstash و Vercel Blob. أما تسجيل الدخول فلم نجد له حلًا من v0 نفسها، وغالبًا تبنيه عبر خدمة مثل Supabase.

• مصمم واجهات يريد نموذجًا قابلًا للنقر بدل صورة ثابتة.
• مطور واجهات يريد نقطة بداية نظيفة يكملها عبر GitHub.
• مسوّق يريد صفحة هبوط لحملة خلال ساعة، ثم ينشرها على نطاق فرعي.

قبل أن تبدأ

تُحسب الأرصدة المدفوعة على أساس الرموز بحسب النموذج المختار: v0 Mini بـ 0.20 دولار لكل مليون رمز مدخل و1.20 للمخرج، و v0 Pro بـ 2 و10، و v0 Max بـ 5 و25. للتعديلات الصغيرة يكفي النموذج الأصغر، فلا تحرق رصيدك على تغيير لون.

جهّز: حساب Vercel (النشر يتم عليه)، وصورة مرجعية أو وصفًا دقيقًا للتصميم، والنصوص العربية النهائية.

الخطوات

المثال: صفحة هبوط لعيادة أسنان في الدمام، فيها الخدمات والأطباء وزر حجز يفتح واتساب.

1. 1

   صف الصفحة قسمًا قسمًا

   اكتب الأقسام بترتيبها: واجهة بعنوان وزر حجز، الخدمات (تنظيف، تقويم، زراعة)، الأطباء، آراء، خريطة الموقع. الوصف المرتب يوفر رسائلك اليومية السبع.

2. 2

   استخدم وضع التصميم المرئي للتعديلات الصغيرة

   تغيير مسافة أو لون أو حجم خط عبر وضع التصميم أسرع من رسالة، ويحفظ رسائلك للتغييرات الحقيقية.

3. 3

   اطلب حالة الجوال صراحة

   اكتب «اعرض الصفحة بعرض 390 بكسل وتأكد أن زر الحجز ظاهر دون تمرير». أغلب زوار العيادة سيأتون من الجوال.

4. 4

   اربط الصفحة بالبيانات عند الحاجة

   إن أردت حفظ طلبات الحجز بدل واتساب، أضف قاعدة من سوق Vercel مثل Neon أو Supabase بنقرة.

5. 5

   زامن مع GitHub

   المزامنة تدعم الفروع وطلبات الدمج والتكامل المستمر، فيراجع مطورك التعديلات قبل دمجها.

6. 6

   انشر على Vercel

   تحصل على نسخة معاينة لكل تعديل ونسخة إنتاج على رابط vercel.app مجاني.

7. 7

   اربط النطاق من واجهة v0

   أضف نطاقك مثل smile-dammam.sa من إعدادات النطاقات، ثم أضف السجلات التي تظهر لك عند المسجّل. الشرح العام في ربط النطاق المخصص.

نصائح للعربي

لم نجد في توثيق v0 ما يخص العربية أو RTL. وبما أن v0 تولّد مكوّنات واجهة جاهزة في الغالب، فالمكوّنات التفاعلية مثل القوائم المنسدلة والنوافذ والشرائح هي أول ما ينقلب عند تحويل الصفحة إلى العربية.

• اطلب dir="rtl" على مستوى الصفحة، ثم افحص القوائم المنسدلة والنوافذ واحدة واحدة.
• الشرائح (carousel) تحتاج أن تبدأ من اليمين ويتحرك سهم «التالي» نحو اليسار.
• في Tailwind اطلب الفئات المنطقية مثل ps-4 و me-2 بدل pl-4 و mr-2.
• أرقام الجوال للحجز اكتبها بصيغة دولية داخل رابط واتساب، واعرضها معزولة في النص.

<!-- بدل pl-4 و mr-2 -->
<div class="ps-4 me-2 text-start">
  <h3 class="font-bold">تقويم الأسنان</h3>
  <a href="https://wa.me/966500000000" class="inline-flex items-center gap-2">
    احجز عبر واتساب <bdi dir="ltr">+966 50 000 0000</bdi>
  </a>
</div>

مشاكل الاتجاه العامة في أدوات البناء في RTL في أدوات الذكاء الاصطناعي.

حدود يجب أن تعرفها

• 7 رسائل يوميًا في المجانية: تكفي لصفحة هبوط واحدة إن خططت رسائلك جيدًا، ولا تكفي لتطبيق.
• الواجهة أولًا: قواعد البيانات عبر سوق Vercel، ولم نجد تسجيل دخول من v0 نفسها.
• التنزيل: تنزيل الملفات من عارض الكود متاح، لكن تنزيل المشروع كاملًا كملف واحد لم نتأكد منه، فاعتمد على GitHub.
• مرتبطة بـ Vercel: النشر يتم هناك، وهذا مريح إن كنت تستخدم Vercel أصلًا، وخطوة إضافية إن لم تكن.
• التكلفة بالمستخدم: Plus و Business تُحسب لكل مستخدم، فالفريق الكبير يضاعف الفاتورة.

وللإنصاف: جودة الواجهات في v0 وتكاملها مع Vercel و GitHub من أقوى ما في السوق لمن يعمل على الواجهة الأمامية.

متى تختار أوترا

• إذا أردت الواجهة والواجهة الخلفية وقاعدة البيانات في مكان واحد، تُبنى وتعمل معًا دون ربط خدمات منفصلة.
• إذا كانت صفحتك عربية وتريد اتجاهها صحيحًا كجزء أصيل من التجربة لا تعديلًا لاحقًا.
• إذا أردت نشر الصفحة على نطاقك .sa مباشرة من شاشة «نشر» بسجلي TXT و A، مع شهادة SSL تلقائية، والنطاق المخصص مجاني مع الباقة.

خطوات نقل مشروع v0 في انقل مشروعك من v0.