Nesta atividade, você irá completar o projeto anterior permitindo cadastrar e alterar dados da entidade principal do do seu projeto a partir da estrutura criada na etapa anterior com o JSONServer. Para isso, crie uma página de cadastro (cadastro_[ENTIDADE].html), que deve mostrar um formulário para cadastrar a entidade principal do projeto. OBS: Troque [ENTIDADE] pelo nome da sua entidade principal.
- Nome:
- Matricula:
- Proposta de projeto escolhida:
- Breve descrição sobre seu projeto:
Print do testes da API com Postman ou similar
<< COLOQUE A IMAGEM GET AQUI >>
<< COLOQUE A IMAGEM POST AQUI >>
<< COLOQUE A IMAGEM PUT AQUI >>
<< COLOQUE A IMAGEM DELETE AQUI >>
Print da aba NETWORK com requisições Fetch/XHR de POST
<< COLOQUE A IMAGEM AQUI >>
Nesse projeto você vai encontrar a seguinte estrutura base:
- Pasta db
Essa pasta contem um único arquivo:
db.json. Esse arquivo serve de banco de dados simulado e nele você deve colocar as estruturas de dados que o seu projeto manipula.- OBS: Já incluímos a estrutura de usuários como exemplo e para que você possa utlizar no seu projeto. Se precisar, faça os ajustes necessários para seu projeto.
- Pasta public Nesta pasta você deve colocar todos os arquivos do seu site (front end). Aqui vão os arquivos HTML, CSS, JavaScript, imagens, vídeos e tudo o mais que precisar para a interface do usuário.
- Arquivo README.md Este arquivo em que são colocadas as informações de quem está desenvolvendo esse projeto e os registros solicitados no enunciado da tarefa.
- Arquivo .gitignore Configuração do que deve ser ignorado pelo git evitando que seja enviado para o servidor no GitHub.
- Arquivo package.json
Considerado o manifesto do projeto ou arquivo de configuração. Nesle são incluídas as informações básicas sobre o projeto (descrição, versão, palavras-chave, licença, copyright), a lista de pacotes dos quais o projeto depende tanto para desenvolvimento quanto execução, uma lista de do projeto, scripts entre outras opções.
- OBS: Esse arquivo é criado assim que o projeto é iniciado por meio do comando
npm init. - OBS2: Esse arquivo já traz a informação de necessidade do JSONServer.
- OBS: Esse arquivo é criado assim que o projeto é iniciado por meio do comando
- Pasta node_modules
Local onde ficam os pacotes dos quais o projeto depende. Evite enviar essa pasta para o repositório remoto. Essa pasta é reconstruída toda vez que se executa o comando
npm install.
Ambiente de Desenvolvimento (IMPORTANTE)
A partir de agora, NÃO utilizamos mais o LiveServer/FiveServer durante o processo de desenvolvimento. O próprio JSONServer faz o papel de servidor.
Para iniciar o JSONServer e acessar os arquivos do seu site, siga os seguintes passos:
- Abra a pasta do projeto dentro da sua IDE (por exemplo, Visual Studio Code)
- Abra uma janela de teminal e certifique-se que a pasta do terminal é a pasta do projeto
- Execute o comando
npm installIsso vai reconstruir a pasta node_modules e instalar todos os pacotes necessários para o nosso ambiente de desenvolvimento (Ex: JSONServer). - Execute o comando
npm startIsso vai executar o JSONServer e permitir que você consiga acessar o seu site no navegador. - Para testar o projeto:
- Site Front End: abra um navegador e acesse o seu site pela seguinte URL: http://localhost:3000
- Site Back End: abra o navegador e acesse as informações da estrutura de usuários por meio da API REST do JSONServer a partir da seguinte URL: http://localhost:3000/usuarios
Ao criar suas estruturas de dados no arquivo db.json, você poderá obter estes dados através do endereço: http://localhost:3000/SUA_ESTRUTURA, tal qual como foi feito com a estrutura de usuários. IMPORTANTE: Ao editar o arquivo db.json, é necessário parar e reiniciar o JSONServer.
IMPORTANTE: Assim como informado anteriormente, capriche na etapa pois você vai precisar dessa parte para as próximas semanas.
IMPORTANTE: Você deve trabalhar:
- na pasta
public, para os arquivos de front end, mantendo os arquivosindex.html,detalhes.html,styles.csseapp.jscom estes nomes, e - na pasta
db, com o arquivodb.json.
Deixe todos os demais arquivos e pastas desse repositório inalterados. PRESTE MUITA ATENÇÃO NISSO.