EasyForms_NET.vb

Clone do Formulários Google

Este projeto é um clone simples do Formulários Google que permite aos usuários criar e visualizar envios. Ele demonstra o uso de um servidor backend para lidar com dados e um aplicativo frontend para interagir com os usuários. O backend é construído com Node.js e Express, enquanto o frontend é construído usando Visual Basic no Visual Studio.

Índice

• Introdução
• Arquitetura
• Estrutura do Projeto
• Instalação
• Configuração de back-end
• Configuração de front-end
• Executando o Projeto
• Terminais de API
• Uso
• Contribuindo
• Licença
• Visualização

Introdução

Propósito

O objetivo deste projeto é fornecer um sistema simples de envio de formulários onde os usuários possam criar novos envios e visualizar os existentes. Serve como exemplo de integração de uma aplicação frontend com um servidor backend.

Características

• Crie novos envios de formulário com detalhes do usuário e um cronômetro.
• Visualize os envios existentes e navegue por eles usando os botões seguinte e anterior.
• Persistência de dados usando um arquivo JSON como banco de dados.

Arquitetura

Back-end

• Node.js e Express são usados ​​para criar uma API REST simples.
• O módulo fs é usado para ler e gravar dados em um arquivo JSON ( db.json ).

Front-end

• Visual Basic no Visual Studio é usado para criar o aplicativo frontend.
• O aplicativo frontend consiste em dois formulários principais: CreateSubmissionForm e ViewSubmissionsForm .

Estrutura do Projeto

clone do google-forms/
│
├── Deslizar/
│ ├── dist/
│ │ ├── servidor.js
│ ├── src/
│ │ ├──db.json
│ │ ├── servidor.ts
│ ├── node_modules/
│ ├── pacote.json
│ ├── tsconfig.json
│ └── README.md
│ └── VisualStudioProject/
├── CreateSubmissionForm.vb
├── ViewSubmissionsForm.vb
├── Programa.vb
└── VisualStudioProject.sln

• Slidely : contém o código de back-end.

  • dist : arquivos JavaScript compilados.
  • src : arquivos TypeScript de origem e arquivo JSON do banco de dados.
  • node_modules : dependências do Node.js.
  • package.json : configuração do projeto Node.js.
  • tsconfig.json : configuração TypeScript.

• VisualStudioProject : Contém o código frontend.

  • CreateSubmissionForm.vb : Formulário para criar um novo envio.
  • ViewSubmissionsForm.vb : Formulário para visualizar os envios existentes.
  • Program.vb : arquivo principal do programa.
  • VisualStudioProject.sln : arquivo de solução do Visual Studio.

Instalação

Pré-requisitos

• Node.js
• npm
• Visual Studio com suporte .NET

Configuração de back-end

1. Clone o repositório:

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

2. Instale as dependências necessárias:

   npm install

3. Compile os arquivos TypeScript:

   tsc

Configuração de front-end

1. Abra a solução VisualStudioProject no Visual Studio.

2. Certifique-se de que todos os pacotes NuGet necessários estejam instalados. Talvez seja necessário restaurar pacotes NuGet se eles estiverem faltando.

Executando o Projeto

Iniciando o servidor back-end

1. Navegue até o diretório Slidely :

    cd google-forms-clone/Slidely

2. Inicie o servidor:

   node dist/server.js

   Você deverá ver a mensagem:

    Server is running on http://localhost:3000
   

Executando o front-end

1. Abra a solução no Visual Studio.

2. Defina o formulário de inicialização como CreateSubmissionForm ou ViewSubmissionsForm conforme necessário.

3. Execute o projeto pressionando F5 ou clicando no botão Start no Visual Studio.

Terminais de API

POSTAR/enviar

• Descrição : Envia uma nova entrada de formulário.
• Corpo da solicitação :

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

• Resposta :

  {
    "success" : true
  }

OBTER / ler

• Descrição : busca uma entrada de formulário por seu índice.
• Parâmetros de consulta :
  • index : O índice do envio a ser buscado.
• Resposta :

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

Uso

Criando um envio

1. Abra o CreateSubmissionForm no Visual Studio.
2. Insira os detalhes necessários, como nome, e-mail, telefone, link do GitHub e inicie o cronômetro.
3. Clique no botão Submit para salvar o envio.
   • Os dados do formulário são enviados ao servidor back-end por meio de uma solicitação POST para /submit .
   • Se o envio for bem-sucedido, uma mensagem de confirmação será exibida.

Visualizando Envios

1. Abra o ViewSubmissionsForm no Visual Studio.
2. Clique nos botões Next ou Previous para navegar pelos envios.
   • O formulário busca dados do servidor back-end por meio de uma solicitação GET para /read com o índice atual como parâmetro de consulta.
   • Os detalhes do envio são exibidos nos campos do formulário.

Contribuindo

Contribuições são bem-vindas! Bifurque o repositório e crie uma solicitação pull com suas alterações. Certifique-se de que seu código esteja de acordo com os padrões de codificação e inclua testes apropriados.

1. Bifurque o repositório.
2. Crie uma nova ramificação para seu recurso.
3. Confirme suas alterações no branch.
4. Crie uma solicitação pull com uma descrição detalhada de suas alterações.

Visualização

Página inicial

Ver envio

Criar envio

Licença

Este projeto está licenciado sob a licença MIT. Consulte o arquivo LICENSE para obter mais informações.