hello world nuxtjs

البرنامج المساعد Hello World باستخدام Nuxt.js

يتيح لك Dashibase إنشاء لوحات معلومات إدارية داخلية باستخدام واجهة مستخدم تشبه Notion.

يمكنك توسيع وظائف لوحات المعلومات الخاصة بك عن طريق تطوير مكون إضافي. على سبيل المثال، يمكنك عرض معلومات Stripe الخاصة بكل عميل، وإظهار تذاكر الدعم من Zendesk، وإرسال رسائل البريد الإلكتروني عبر SendGrid، والمزيد.

هذا مثال بسيط للمكون الإضافي Hello World ليُظهر لك:

• ما هي البيانات التي يمكنك الحصول عليها من Dashibase لاستخدامها في البرنامج المساعد الخاص بك
• كيفية إنشاء مكون إضافي بسيط باستخدام Nuxt.js

ابدء

1. قم بإعداد لوحة معلومات في Dashibase

يمكنك تخطي هذه الخطوة إذا كان لديك بالفعل لوحة تحكم في Dashibase.

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

2. استنساخ ونشر هذا الريبو

انقر فوق الزر أعلاه لاستنساخ البرنامج الإضافي ونشره من خلال Vercel.

المكون الإضافي Hello World جاهز الآن.

3. أضف مكونًا إضافيًا إلى لوحة التحكم الخاصة بك

ارجع إلى لوحة التحكم الخاصة بك في Dashibase. أثناء عرض أي من العناصر الموجودة على الجدول، أضف كتلة مكون إضافي عن طريق كتابة "/plugin". ثم أضف عنوان URL للمكون الإضافي الذي تم نشره وانقر على "إعداد".

من المفترض أن تشاهد تطبيق Hello World، الذي يخبرك ببيانات الإعداد التي أرسلها Dashibase إلى المكون الإضافي.

عندما تقوم بتطوير المكون الإضافي الخاص بك، يمكنك استخدام بيانات الإعداد لتحديد البيانات التي تريد استخدامها في المكون الإضافي الخاص بك. لنفترض أن لديك جدول عملاء، يمكنك سحب حقل البريد الإلكتروني لكل عميل عبر عمود email واستخدامه في مكونك الإضافي. راجع البرنامج المساعد Stripe الخاص بنا للحصول على مثال ملموس.

إذا كانت لديك أي أسئلة، فلا تتردد في التواصل معنا عبر Twitter (@dashibase) أو [email protected].

يتعلم أكثر

قد تجد الموارد التالية مفيدة:

• البرنامج التعليمي Hello World NuxtJS
• مرجع API البرنامج المساعد