EasyForms_NET.vb

استنساخ نماذج جوجل

هذا المشروع عبارة عن نسخة بسيطة من نماذج Google التي تسمح للمستخدمين بإنشاء وعرض التقديمات. يوضح استخدام خادم الواجهة الخلفية للتعامل مع البيانات وتطبيق الواجهة الأمامية للتفاعل مع المستخدمين. تم إنشاء الواجهة الخلفية باستخدام Node.js وExpress، بينما تم إنشاء الواجهة الأمامية باستخدام Visual Basic في Visual Studio.

جدول المحتويات

• مقدمة
• بنيان
• هيكل المشروع
• تثبيت
• إعداد الواجهة الخلفية
• إعداد الواجهة الأمامية
• تشغيل المشروع
• نقاط نهاية API
• الاستخدام
• المساهمة
• رخصة
• معاينة

مقدمة

غاية

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

سمات

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

بنيان

الخلفية

• يتم استخدام Node.js و Express لإنشاء واجهة برمجة تطبيقات REST بسيطة.
• تُستخدم وحدة fs لقراءة البيانات وكتابتها في ملف JSON ( db.json ).

الواجهة الأمامية

• يتم استخدام Visual Basic في Visual Studio لإنشاء تطبيق الواجهة الأمامية.
• يتكون تطبيق الواجهة الأمامية من نموذجين رئيسيين: CreateSubmissionForm و ViewSubmissionsForm .

هيكل المشروع

جوجل نماذج استنساخ /
│
├── بالسلايد/
│ ├── حي/
│ │ ├── server.js
│ ├── سرك/
│ │ ├── db.json
│ │ ├── server.ts
│ ├── العقدة_modules/
│ ├── package.json
│ ├── tsconfig.json
│ └── README.md
│ └── VisualStudioProject/
├── CreateSubmissionForm.vb
├── عرض التقديماتForm.vb
├── Program.vb
└── VisualStudioProject.sln

• Slidely : يحتوي على رمز الواجهة الخلفية.

  • dist : ملفات جافا سكريبت المجمعة.
  • src : ملفات TypeScript المصدر وملف JSON لقاعدة البيانات.
  • Node_modules : تبعيات Node.js.
  • package.json : تكوين مشروع Node.js.
  • tsconfig.json : تكوين TypeScript.

• VisualStudioProject : يحتوي على رمز الواجهة الأمامية.

  • CreateSubmissionForm.vb : نموذج لإنشاء إرسال جديد.
  • ViewSubmissionsForm.vb : نموذج لعرض التقديمات الموجودة.
  • Program.vb : ملف البرنامج الرئيسي.
  • VisualStudioProject.sln : ملف حل Visual Studio.

تثبيت

المتطلبات الأساسية

• Node.js
• npm
• Visual Studio مع دعم .NET

إعداد الواجهة الخلفية

1. استنساخ المستودع:

   git clone https://github.com/yourusername/google-forms-clone.git
   cd google-forms-clone/Slidely

2. تثبيت التبعيات اللازمة:

   npm install

3. تجميع ملفات TypeScript:

   tsc

إعداد الواجهة الأمامية

1. افتح حل VisualStudioProject في Visual Studio.

2. تأكد من تثبيت كافة حزم NuGet الضرورية. قد تحتاج إلى استعادة حزم NuGet إذا كانت مفقودة.

تشغيل المشروع

بدء تشغيل الخادم الخلفي

1. انتقل إلى دليل Slidely :

    cd google-forms-clone/Slidely

2. بدء الخادم:

   node dist/server.js

   يجب أن تشاهد الرسالة:

    Server is running on http://localhost:3000
   

تشغيل الواجهة الأمامية

1. افتح الحل في Visual Studio.

2. قم بتعيين نموذج بدء التشغيل إلى CreateSubmissionForm أو ViewSubmissionsForm حسب الحاجة.

3. قم بتشغيل المشروع بالضغط على F5 أو النقر فوق الزر Start في Visual Studio.

نقاط نهاية API

مشاركة /إرسال

• الوصف : إرسال إدخال نموذج جديد.
• هيئة الطلب :

  {
    "name" : " John Doe " ,
    "email" : " [email protected] " ,
    "phone" : " 1234567890 " ,
    "github_link" : " https://github.com/johndoe " ,
    "stopwatch_time" : " 00:05:00 "
  }

• إجابة :

  {
    "success" : true
  }

الحصول على / قراءة

• الوصف : جلب إدخال النموذج من خلال فهرسه.
• معلمات الاستعلام :
  • index : فهرس الإرسال المطلوب جلبه.
• إجابة :

  {
    "submission" : {
      "name" : " John Doe " ,
      "email" : " [email protected] " ,
      "phone" : " 1234567890 " ,
      "githubLink" : " https://github.com/johndoe " ,
      "stopwatchTime" : " 00:05:00 "
    }
  }

الاستخدام

إنشاء التقديم

1. افتح CreateSubmissionForm في Visual Studio.
2. أدخل التفاصيل الضرورية مثل الاسم والبريد الإلكتروني والهاتف ورابط GitHub وابدأ ساعة الإيقاف.
3. انقر على زر Submit لحفظ التقديم.
   • يتم إرسال بيانات النموذج إلى الخادم الخلفي عبر طلب POST إلى /submit .
   • إذا تم الإرسال بنجاح، يتم عرض رسالة تأكيد.

عرض التقديمات

1. افتح ViewSubmissionsForm في Visual Studio.
2. انقر فوق الزر Next أو Previous للتنقل خلال عمليات الإرسال.
   • يقوم النموذج بجلب البيانات من خادم الواجهة الخلفية عبر طلب GET إلى /read باستخدام الفهرس الحالي كمعلمة استعلام.
   • يتم عرض تفاصيل التقديم في حقول النموذج.

المساهمة

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

1. شوكة المستودع.
2. أنشئ فرعًا جديدًا لميزتك.
3. قم بإجراء تغييراتك على الفرع.
4. قم بإنشاء طلب سحب مع وصف تفصيلي للتغييرات التي أجريتها.

معاينة

الصفحة الرئيسية

عرض التقديم

إنشاء التقديم

رخصة

هذا المشروع مرخص بموجب ترخيص MIT. راجع ملف الترخيص لمزيد من المعلومات.