EasyForms_NET.vb

Google Forms-Klon

Dieses Projekt ist ein einfacher Klon von Google Forms, der es Benutzern ermöglicht, Einreichungen zu erstellen und anzuzeigen. Es demonstriert die Verwendung eines Backend-Servers zur Datenverarbeitung und einer Frontend-Anwendung zur Interaktion mit Benutzern. Das Backend wird mit Node.js und Express erstellt, während das Frontend mit Visual Basic in Visual Studio erstellt wird.

Inhaltsverzeichnis

• Einführung
• Architektur
• Projektstruktur
• Installation
• Backend-Setup
• Frontend-Setup
• Ausführen des Projekts
• API-Endpunkte
• Verwendung
• Mitwirken
• Lizenz
• Vorschau

Einführung

Zweck

Der Zweck dieses Projekts besteht darin, ein einfaches Formularübermittlungssystem bereitzustellen, mit dem Benutzer neue Einreichungen erstellen und vorhandene anzeigen können. Es dient als Beispiel für die Integration einer Frontend-Anwendung mit einem Backend-Server.

Merkmale

• Erstellen Sie neue Formulareinreichungen mit Benutzerdetails und einer Stoppuhrzeit.
• Sehen Sie sich vorhandene Einreichungen an und navigieren Sie mit den Schaltflächen „Weiter“ und „Zurück“ durch sie.
• Datenpersistenz unter Verwendung einer JSON-Datei als Datenbank.

Architektur

Backend

• Node.js und Express werden verwendet, um eine einfache REST-API zu erstellen.
• Das fs- Modul wird zum Lesen und Schreiben von Daten in eine JSON-Datei ( db.json ) verwendet.

Frontend

• Zur Erstellung der Frontend-Anwendung wird Visual Basic in Visual Studio verwendet.
• Die Frontend-Anwendung besteht aus zwei Hauptformularen: CreateSubmissionForm und ViewSubmissionsForm .

Projektstruktur

google-forms-clone/
│
├── Slidely/
│ ├── dist/
│ │ ├── server.js
│ ├── src/
│ │ ├── db.json
│ │ ├── server.ts
│ ├── node_modules/
│ ├── package.json
│ ├── tsconfig.json
│ └── README.md
│ └── VisualStudioProject/
├── CreateSubmissionForm.vb
├── ViewSubmissionsForm.vb
├── Program.vb
└── VisualStudioProject.sln

• Slidely : Enthält den Backend-Code.

  • dist : Kompilierte JavaScript-Dateien.
  • src : Quell-TypeScript-Dateien und Datenbank-JSON-Datei.
  • node_modules : Node.js-Abhängigkeiten.
  • package.json : Node.js-Projektkonfiguration.
  • tsconfig.json : TypeScript-Konfiguration.

• VisualStudioProject : Enthält den Frontend-Code.

  • CreateSubmissionForm.vb : Formular zum Erstellen einer neuen Einreichung.
  • ViewSubmissionsForm.vb : Formular zum Anzeigen vorhandener Einreichungen.
  • Program.vb : Hauptprogrammdatei.
  • VisualStudioProject.sln : Visual Studio-Lösungsdatei.

Installation

Voraussetzungen

• Node.js
• npm
• Visual Studio mit .NET-Unterstützung

Backend-Setup

1. Klonen Sie das Repository:

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

2. Installieren Sie die erforderlichen Abhängigkeiten:

   npm install

3. Kompilieren Sie die TypeScript-Dateien:

   tsc

Frontend-Setup

1. Öffnen Sie die VisualStudioProject -Lösung in Visual Studio.

2. Stellen Sie sicher, dass alle erforderlichen NuGet-Pakete installiert sind. Möglicherweise müssen Sie NuGet-Pakete wiederherstellen, wenn sie fehlen.

Ausführen des Projekts

Starten des Backend-Servers

1. Navigieren Sie zum Slidely Verzeichnis:

    cd google-forms-clone/Slidely

2. Starten Sie den Server:

   node dist/server.js

   Sie sollten die Meldung sehen:

    Server is running on http://localhost:3000
   

Ausführen des Frontends

1. Öffnen Sie die Lösung in Visual Studio.

2. Legen Sie das Startformular je nach Bedarf auf CreateSubmissionForm oder ViewSubmissionsForm fest.

3. Führen Sie das Projekt aus, indem Sie F5 drücken oder in Visual Studio auf die Schaltfläche Start klicken.

API-Endpunkte

POST/Senden

• Beschreibung : Sendet einen neuen Formulareintrag.
• Anfragetext :

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

• Antwort :

  {
    "success" : true
  }

GET /lesen

• Beschreibung : Ruft einen Formulareintrag anhand seines Index ab.
• Abfrageparameter :
  • index : Der Index der abzurufenden Übermittlung.
• Antwort :

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

Verwendung

Erstellen einer Einreichung

1. Öffnen Sie CreateSubmissionForm in Visual Studio.
2. Geben Sie die erforderlichen Details wie Name, E-Mail, Telefon, GitHub-Link ein und starten Sie die Stoppuhr.
3. Klicken Sie auf die Schaltfläche Submit um die Übermittlung zu speichern.
   • Die Formulardaten werden über eine POST-Anfrage an /submit an den Backend-Server gesendet.
   • Wenn die Übermittlung erfolgreich war, wird eine Bestätigungsmeldung angezeigt.

Einsendungen ansehen

1. Öffnen Sie das ViewSubmissionsForm in Visual Studio.
2. Klicken Sie auf die Schaltflächen Next oder Previous um durch die Einreichungen zu navigieren.
   • Das Formular ruft Daten vom Backend-Server über eine GET-Anfrage an /read mit dem aktuellen Index als Abfrageparameter ab.
   • Die Übermittlungsdetails werden in den Formularfeldern angezeigt.

Mitwirken

Beiträge sind willkommen! Bitte teilen Sie das Repository auf und erstellen Sie eine Pull-Anfrage mit Ihren Änderungen. Stellen Sie sicher, dass Ihr Code den Codierungsstandards entspricht und geeignete Tests enthält.

1. Forken Sie das Repository.
2. Erstellen Sie einen neuen Zweig für Ihre Funktion.
3. Übernehmen Sie Ihre Änderungen in den Zweig.
4. Erstellen Sie eine Pull-Anfrage mit einer detaillierten Beschreibung Ihrer Änderungen.

Vorschau

Startseite

Einreichung anzeigen

Einreichung erstellen

Lizenz

Dieses Projekt ist unter der MIT-Lizenz lizenziert. Weitere Informationen finden Sie in der LICENSE-Datei.