EasyForms_NET.vb

Clon de formularios de Google

Este proyecto es un clon simple de Google Forms que permite a los usuarios crear y ver envíos. Demuestra el uso de un servidor backend para manejar datos y una aplicación frontend para interactuar con los usuarios. El backend está construido con Node.js y Express, mientras que el frontend está construido usando Visual Basic en Visual Studio.

Tabla de contenido

• Introducción
• Arquitectura
• Estructura del proyecto
• Instalación
• Configuración de back-end
• Configuración de interfaz
• Ejecutando el proyecto
• Puntos finales API
• Uso
• Contribuyendo
• Licencia
• Avance

Introducción

Objetivo

El propósito de este proyecto es proporcionar un sistema de envío de formularios simple donde los usuarios puedan crear nuevos envíos y ver los existentes. Sirve como ejemplo de integración de una aplicación frontend con un servidor backend.

Características

• Cree nuevos envíos de formularios con detalles de usuario y un cronómetro.
• Vea los envíos existentes, navegue a través de ellos usando los botones siguiente y anterior.
• Persistencia de datos utilizando un archivo JSON como base de datos.

Arquitectura

backend

• Node.js y Express se utilizan para crear una API REST simple.
• El módulo fs se utiliza para leer y escribir datos en un archivo JSON ( db.json ).

Interfaz

• Visual Basic en Visual Studio se utiliza para crear la aplicación frontend.
• La aplicación frontend consta de dos formularios principales: CreateSubmissionForm y ViewSubmissionsForm .

Estructura del proyecto

clon-de-formularios-de-google/
│
├── Deslizante/
│ ├── dist/
│ │ ├── servidor.js
│ ├── src/
│ │ ├── db.json
│ │ ├── servidor.ts
│ ├── módulos_nodo/
│ ├── paquete.json
│ ├── tsconfig.json
│ └── LÉAME.md
│ └── Proyecto VisualStudio/
├── Crear formulario de envío.vb
├── Ver formulario de envíos.vb
├── Programa.vb
└── VisualStudioProject.sln

• Slidely : contiene el código de backend.

  • dist : archivos JavaScript compilados.
  • src : archivos fuente TypeScript y archivo JSON de base de datos.
  • node_modules : dependencias de Node.js.
  • paquete.json : configuración del proyecto Node.js.
  • tsconfig.json : configuración de TypeScript.

• VisualStudioProject : contiene el código de interfaz.

  • CreateSubmissionForm.vb : formulario para crear un nuevo envío.
  • ViewSubmissionsForm.vb : Formulario para ver los envíos existentes.
  • Program.vb : Archivo de programa principal.
  • VisualStudioProject.sln : archivo de solución de Visual Studio.

Instalación

Requisitos previos

• Nodo.js
• npm
• Visual Studio con soporte .NET

Configuración de back-end

1. Clonar el repositorio:

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

2. Instale las dependencias necesarias:

   npm install

3. Compile los archivos TypeScript:

   tsc

Configuración de interfaz

1. Abra la solución VisualStudioProject en Visual Studio.

2. Asegúrese de que todos los paquetes NuGet necesarios estén instalados. Es posible que deba restaurar paquetes NuGet si faltan.

Ejecutando el proyecto

Iniciar el servidor backend

1. Navegue al directorio Slidely :

    cd google-forms-clone/Slidely

2. Inicie el servidor:

   node dist/server.js

   Deberías ver el mensaje:

    Server is running on http://localhost:3000
   

Ejecutando la interfaz

1. Abra la solución en Visual Studio.

2. Configure el formulario de inicio en CreateSubmissionForm o ViewSubmissionsForm según sea necesario.

3. Ejecute el proyecto presionando F5 o haciendo clic en el botón Start en Visual Studio.

Puntos finales API

ENVIAR /enviar

• Descripción : envía una nueva entrada de formulario.
• Cuerpo de la solicitud :

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

• Respuesta :

  {
    "success" : true
  }

OBTENER /leer

• Descripción : recupera una entrada de formulario por su índice.
• Parámetros de consulta :
  • index : El índice del envío a recuperar.
• Respuesta :

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

Uso

Creando un envío

1. Abra CreateSubmissionForm en Visual Studio.
2. Ingrese los detalles necesarios, como nombre, correo electrónico, teléfono, enlace de GitHub e inicie el cronómetro.
3. Haga clic en el botón Submit para guardar el envío.
   • Los datos del formulario se envían al servidor backend mediante una solicitud POST a /submit .
   • Si el envío es exitoso, se muestra un mensaje de confirmación.

Ver envíos

1. Abra el ViewSubmissionsForm en Visual Studio.
2. Haga clic en los botones Next o Previous para navegar por los envíos.
   • El formulario obtiene datos del servidor backend mediante una solicitud GET para /read con el índice actual como parámetro de consulta.
   • Los detalles del envío se muestran en los campos del formulario.

Contribuyendo

¡Las contribuciones son bienvenidas! Bifurque el repositorio y cree una solicitud de extracción con sus cambios. Asegúrese de que su código cumpla con los estándares de codificación e incluya las pruebas adecuadas.

1. Bifurca el repositorio.
2. Crea una nueva rama para tu función.
3. Confirme sus cambios en la rama.
4. Cree una solicitud de extracción con una descripción detallada de sus cambios.

Avance

Página de inicio

Ver envío

Crear envío

Licencia

Este proyecto está bajo la licencia MIT. Consulte el archivo de LICENCIA para obtener más información.