قم ببناء نماذج خاصة بالمهمة وقابلة للتخصيص باستخدام منشئ نموذج السحب وإسقاط HTML. Formio مستضيف ذاتي ، مدفوع API ، يوفر النماذج وإدارة البيانات.
ملخص
في احتياجات الأعمال سريعة النمو ، هناك الكثير من العمليات التي تنتمي مباشرة إلى التعامل الجمهور والمشاركة. يمكن أن تكون هذه المشاركة إما مادية أو افتراضية. في بعض الأحيان يتعلق الأمر بتقديم الخدمات وأحيانًا يتعلق بجمع البيانات أو التعليقات. من ناحية أخرى ، تميل مؤسسات المؤسسات إلى جمع بيانات العميل حول منتجاتهم وخدماتهم. لذلك ، يعتمد كمية البيانات على الوصول إلى الجمهور ذي الصلة. بعد ذلك ، تعد إدارة البيانات مهمة حرجة أخرى وتتطلب اهتمامًا كبيرًا. ومع ذلك ، تستخدم قطاعات الشركات النماذج عبر الإنترنت لتلبية الاحتياجات المتعلقة بجمع البيانات. هناك العديد من مواقع الويب التي قد تحتوي على نماذج متعددة مثل نموذج الاتصال ونموذج الشكوى ونموذج ملاحظات العملاء ونموذج القبول والمزيد. الآن ، يصبح من المتاعب بناء هذه النماذج وبيانات التقديم. هنا يأتي form.io. Form.io هو منشئ نموذج bootstrap مفتوح المصدر يوفر قدرات بناء النماذج وإدارة البيانات. في الماضي القريب ، قمنا بنشر مقال غطى أفضل 5 مصادر مفتوحة المصدر على الإنترنت بناة في عام 2020. في منشور المدونة هذا ، سوف نستكشف منشئ نموذج bootstrap هذا مع عملية إعداده على المضيف المحلي من خلال تغطية النقاط التالية.
- [ما هو form.io؟/2/20101**
- كيفية إعداد form.io على localhost؟
- كيف يعمل form.io؟
- الخلاصة
ما هو form.io؟
Form.io هو منشئ نموذج مفتوح المصدر مجاني. إنه برنامج مستضيف ومتعدد اللغات ومستأجر. يقدم هذا Form Form Creator أذونات قائمة على الأدوار للمستخدمين والنماذج. يوفر Form.io مصادقة OAUTH ويتيح للمستخدمين تسجيل الدخول باستخدام مقدمي الهوية الشعبية مثل Google و Facebook. علاوة على ذلك ، يعتمد منشئ نموذج HTML هذا على بنية بدون خادم ، ويمكن للمستخدمين إنشاء وتضمين النماذج في التطبيقات الأخرى عن طريق وضع سطر واحد من التعليمات البرمجية. فيما يتعلق بواجهة المستخدم ، فإنه يوفر واجهة مستخدم منطقية مع ميزات السحب والإفلات. هناك العديد من عناصر HTML على جانب واحد يمكن للمستخدمين السحب والإسقاط لإنشاء النموذج المطلوب. يمكن للمستخدمين ضخ JavaScript المخصص لتحسين الوظائف. علاوة على ذلك ، يمكن للمستخدمين تعديل مظهر ومشاهدة النموذج باستخدام CSS. هناك أحكام للتحكم في تقديم النماذج والوصول إليها. ومع ذلك ، فإن صانع النماذج المجاني HTML مكتوب في JavaScript وجميع الكود المصدري متاح في Github. Form.io يوفر المدى الواسع من الميزات. الميزات الرئيسية مدرجة أدناه.
- إرسال نموذج البريد الإلكتروني
- إدارة البيانات
- مقدمي OAUTH
- أشكال التضمين
- تخطيط ودية
كيفية إعداد Form.io على المضيف المحلي؟
في هذا القسم من البرنامج التعليمي Form Builder ، سنرى كيفية إعداد Form.io على LocalHost. من السهل إعداده لأنه يوفر وثائق شاملة فيما يتعلق بالنشر والتطوير. قبل المضي قدمًا ، تأكد من تثبيت المتطلبات المسبقة التالية.
- شخص سخيف
- Nodejs
- MongoDB بمجرد تثبيت المتطلبات المسبقة أعلاه ، افتح تشغيل الطرف الأوامر التالية:
mkdir formio<br>cd formio
الآن ، قم بتشغيل الأمر التالي لاستنساخ الكود المصدري لهذا التطبيق:
git clone https://github.com/formio/formio.git
عند استنساخ ناجح ، قم بتشغيل الأوامر التالية لتثبيت التبعيات:
cd formio <br>npm install
بعد ذلك ، قم بتشغيل التطبيق مع الأمر التالي:
npm start
سيعرض هذا الأمر الإخراج التالي مع بعض مطالبات المستخدمين:
يمكنك الوصول إلى التطبيق في المتصفح على العنوان التالي.
http://localhost:3001
سيفتح صفحة تسجيل الدخول. يمكنك تسجيل الدخول باستخدام بيانات الاعتماد التي أدخلتها أثناء عملية التثبيت.
كيف يعمل Form.io؟
يصف هذا الجزء آلية العمل لـ form.io. يعتمد النظام البيئي بأكمله لهذا المصمم على المكونات والصديقة للمطورين. إنه قابل للتمديد ويوفر واجهة مريحة لتطبيقات الطرف الثالث. لذلك ، دعونا نرى كيفية إنشاء نماذج في هذا نموذج منشئ . بعد تسجيل الدخول ، سوف تهبط على الصفحة التالية.
الآن ، انقر على زر “النموذج الجديد” وإنشاء النموذج الأول. سيتم عرض الصفحة التالية. يمكنك أن ترى أن هناك لوحة على الجانب الأيسر تحتوي على عنصر HTML للنماذج. أنه يحتوي على الأقسام الأربعة مثل “المكونات الأساسية” و “المكونات الخاصة” والمزيد.
يمكنك تعيين اسم النموذج مع سمات أخرى. الآن ، إذا اخترت عنصر نموذج من الجانب الأيسر وإسقاطه في الوسط ، فسترى مربع الحوار التالي.
يمكنك أن ترى أنه يتيح لك تعديل موضوع النموذج والتحقق من الصحة والتعديلات الأخرى. بمجرد إنشاء النموذج الخاص بك ، اضغط على زر “إنشاء” وسوف تهبط على النموذج الذي تم إنشاؤه.
يأتي النموذج الذي تم إنشاؤه مع خيارات مختلفة حيث يمكنك تحرير النموذج وعرض البيانات المقدمة. في علامة التبويب “إجراءات النموذج” ، يمكنك تعيين خطافات تقديم النموذج قبل أو نشر مثل البريد الإلكتروني و WebHook والمزيد. قبل كل شيء ، يأتي كل نموذج تم إنشاؤه مع واجهة برمجة تطبيقات ويمكن للمستخدمين الوصول إليه عن طريق تمرير معرف النموذج.
خاتمة
هذا هو نهاية هذا النموذج البرنامج التعليمي. آمل أن تكون قد تعلمت عن منشئ نموذج bootstrap فيما يتعلق بميزاته ونشره واستخدامه. بالإضافة إلى ذلك ، هناك العديد من بناة النماذج مفتوحة المصدر التي توفر مجموعة واسعة من الميزات. ومع ذلك ، من المهم للغاية اختيار أفضل منتج يلبي احتياجات عملك. لذلك ، في منشور المدونة هذا ، لاحظنا أن Form.io يوفر التخصيصات المتعلقة بالوظائف والتخطيط والأناقة. يتيح لك إنشاء نماذج متعددة الأغراض يمكنك استضافتها على مواقع الويب الحية. في الواقع ، يمكنك جمع البيانات بطريقة جيدة التنظيم في قاعدة البيانات الخاصة بك أو في أي خيار تخزين آخر. أخيرًا ، Containerize.com في عملية ثابتة لكتابة المقالات حول مواضيع ومنتجات مصادر مفتوحة أخرى. لذلك ، يرجى البقاء على اتصال مع هذه الفئة النموذج للتحديثات العادية.