إعداد قاعدة البيانات الخاصة بك

قبل أن تتمكن من متابعة العمل على لوحة التحكم الخاصة بك، ستحتاج إلى بعض البيانات. في هذا الفصل، ستقوم بإعداد قاعدة بيانات PostgreSQL من إحدى تكاملات سوق Vercel. إذا كنت معتادًا بالفعل على PostgreSQL وترغب في استخدام موفر قاعدة البيانات الخاص بك، يمكنك تخطي هذا الفصل وإعداده بنفسك. وإلا، فلنكمل!

إنشاء مستودع GitHub

للبدء، لنقم بدفع مستودعك إلى GitHub إذا لم تكن قد فعلت ذلك بالفعل. هذا سيجعل من السهل إعداد قاعدة البيانات ونشرها.

إذا كنت بحاجة إلى مساعدة في إعداد مستودعك، راجع هذا الدليل على GitHub.

معلومة مفيدة:

• يمكنك أيضًا استخدام موفري git آخرين مثل GitLab أو Bitbucket.
• إذا كنت جديدًا على GitHub، نوصي بتطبيق GitHub Desktop App لسير عمل تطوير مبسط.

إنشاء حساب Vercel

قم بزيارة vercel.com/signup لإنشاء حساب. اختر خطة "hobby" المجانية. حدد المتابعة مع GitHub لربط حسابات GitHub وVercel الخاصة بك.

ربط ونشر مشروعك

بعد ذلك، سيتم نقلك إلى هذه الشاشة حيث يمكنك تحديد واستيراد مستودع GitHub الذي أنشأته للتو:

قم بتسمية مشروعك وانقر على نشر.

تهانينا! 🎉 تم نشر مشروعك الآن.

عن طريق ربط مستودع GitHub الخاص بك، كلما دفعت تغييرات إلى فرع main، سيقوم Vercel تلقائيًا بإعادة نشر تطبيقك دون الحاجة إلى أي تكوين. عند فتح طلبات السحب، سيكون لديك أيضًا روابط معاينة فورية والتي تتيح لك اكتشاف أخطاء النشر مبكرًا ومشاركة معاينة مشروعك مع أعضاء الفريق للحصول على ملاحظات.

إنشاء قاعدة بيانات Postgres

بعد ذلك، لإعداد قاعدة بيانات، انقر على المتابعة إلى لوحة التحكم وحدد علامة التبويب التخزين من لوحة تحكم مشروعك. حدد إنشاء قاعدة بيانات. اعتمادًا على وقت إنشاء حساب Vercel الخاص بك، قد ترى خيارات مثل Neon أو Supabase. اختر الموفر المفضل لديك وانقر على متابعة.

اختر منطقتك وخطة التخزين، إذا لزم الأمر. المنطقة الافتراضية لجميع مشاريع Vercel هي واشنطن العاصمة (iad1)، ونوصي باختيار هذه إذا كانت متوفرة لتقليل زمن الوصول لطلبات البيانات.

بمجرد الاتصال، انتقل إلى علامة التبويب .env.local، انقر على إظهار السر ونسخ المقتطف. تأكد من الكشف عن الأسرار قبل نسخها.

انتقل إلى محرر الأكواد الخاص بك وقم بإعادة تسمية ملف .env.example إلى .env. الصق المحتويات المنسوخة من Vercel.

هام: انتقل إلى ملف .gitignore الخاص بك وتأكد من أن .env موجود في الملفات التي يتم تجاهلها لمنع كشف أسرار قاعدة البيانات عند الدفع إلى GitHub.

ملء قاعدة البيانات بالبيانات الأولية

الآن بعد أن تم إنشاء قاعدة البيانات الخاصة بك، لنقم بملئها ببعض البيانات الأولية.

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

يستخدم السكريبت SQL لإنشاء الجداول، والبيانات من ملف placeholder-data.ts لملئها بعد إنشائها.

تأكد من أن خادم التطوير المحلي الخاص بك يعمل باستخدام pnpm run dev وانتقل إلى localhost:3000/seed في متصفحك. عند الانتهاء، سترى رسالة "تم ملء قاعدة البيانات بنجاح" في المتصفح. بمجرد الانتهاء، يمكنك حذف هذا الملف.

استكشاف الأخطاء وإصلاحها:

• تأكد من الكشف عن أسرار قاعدة البيانات قبل نسخها إلى ملف .env الخاص بك.
• يستخدم السكريبت bcrypt لتجزئة كلمة مرور المستخدم، إذا كان bcrypt غير متوافق مع بيئتك، يمكنك تحديث السكريبت لاستخدام bcryptjs بدلاً من ذلك.
• إذا واجهت أي مشكلات أثناء ملء قاعدة البيانات الخاصة بك وتريد تشغيل السكريبت مرة أخرى، يمكنك حذف أي جداول موجودة عن طريق تشغيل DROP TABLE tablename في واجهة استعلام قاعدة البيانات الخاصة بك. راجع قسم تنفيذ الاستعلامات أدناه لمزيد من التفاصيل. لكن كن حذرًا، هذا الأمر سيقوم بحذف الجداول وجميع بياناتها. لا بأس في القيام بذلك مع تطبيق المثال الخاص بك لأنك تعمل مع بيانات نائبة، ولكن لا يجب تشغيل هذا الأمر في تطبيق إنتاجي.

تنفيذ الاستعلامات

لنقم بتنفيذ استعلام للتأكد من أن كل شيء يعمل كما هو متوقع. سنستخدم معالج موجه آخر، app/query/route.ts، لاستعلام قاعدة البيانات. داخل هذا الملف، ستجد دالة listInvoices() التي تحتوي على استعلام SQL التالي.

SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;

قم بإلغاء تعليق الملف، وإزالة كتلة Response.json()، وانتقل إلى localhost:3000/query في متصفحك. يجب أن ترى أن amount الفاتورة وname يتم إرجاعها.