EasyForms_NET.vb

โคลน Google ฟอร์ม

โปรเจ็กต์นี้เป็นโคลน Google ฟอร์มอย่างง่ายที่อนุญาตให้ผู้ใช้สร้างและดูการส่ง โดยสาธิตการใช้เซิร์ฟเวอร์แบ็กเอนด์เพื่อจัดการข้อมูลและแอปพลิเคชันส่วนหน้าเพื่อโต้ตอบกับผู้ใช้ แบ็กเอนด์สร้างด้วย Node.js และ Express ในขณะที่ฟรอนต์เอนด์สร้างโดยใช้ Visual Basic ใน Visual Studio

สารบัญ

• การแนะนำ
• สถาปัตยกรรม
• โครงสร้างโครงการ
• การติดตั้ง
• การตั้งค่าแบ็กเอนด์
• การตั้งค่าส่วนหน้า
• ดำเนินโครงการ
• จุดสิ้นสุด API
• การใช้งาน
• มีส่วนร่วม
• ใบอนุญาต
• ดูตัวอย่าง

การแนะนำ

วัตถุประสงค์

วัตถุประสงค์ของโปรเจ็กต์นี้คือเพื่อให้ระบบการส่งแบบฟอร์มที่เรียบง่ายซึ่งผู้ใช้สามารถสร้างการส่งใหม่และดูแบบฟอร์มที่มีอยู่ได้ มันทำหน้าที่เป็นตัวอย่างของการรวมแอปพลิเคชันส่วนหน้าเข้ากับเซิร์ฟเวอร์ส่วนหลัง

คุณสมบัติ

• สร้างการส่งแบบฟอร์มใหม่พร้อมรายละเอียดผู้ใช้และเวลาจับเวลา
• ดูการส่งที่มีอยู่ เลื่อนดูโดยใช้ปุ่มถัดไปและก่อนหน้า
• ความคงอยู่ของข้อมูลโดยใช้ไฟล์ JSON เป็นฐานข้อมูล

สถาปัตยกรรม

แบ็กเอนด์

• Node.js และ Express ใช้เพื่อสร้าง REST API แบบง่าย
• โมดูล fs ใช้เพื่ออ่านและเขียนข้อมูลลงในไฟล์ JSON ( db.json )

ส่วนหน้า

• Visual Basic ใน Visual Studio ใช้เพื่อสร้างแอปพลิเคชันส่วนหน้า
• แอปพลิเคชันส่วนหน้าประกอบด้วยสองรูปแบบหลัก: CreateSubmissionForm และ ViewSubmissionsForm

โครงสร้างโครงการ

google-forms-โคลน/

├── สไลด์/
│ ├── แยก/
│ │ ├── server.js
│ ├── src/
│ │ ├── db.json
│ │ ├── server.ts
│ ├── node_modules/
│ ├── package.json
│ ├── tsconfig.json
│ └── README.md
│ └── โครงการ VisualStudio/
├── CreateSubmissionForm.vb
├── ดูการส่งแบบฟอร์ม.vb
├── โปรแกรม.vb
└── VisualStudioProject.sln

• Slidely : มีโค้ดแบ็กเอนด์

  • dist : ไฟล์ JavaScript ที่คอมไพล์แล้ว
  • 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

การติดตั้ง

ข้อกำหนดเบื้องต้น

• โหนด js
• เวลา 22.00 น
• 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 ดูไฟล์ใบอนุญาตสำหรับข้อมูลเพิ่มเติม