Numa primeira versão, queremos apenas o mínimo de funcionalidades. Comecemos, portanto, revendo a arquitetura geral do app. Primeiro, relembre que o app funcionará sobre HTTP, mas sem esconder sua natureza. Ele será essencialmente um sistema cliente-servidor em que o servidor implementa uma API REST. O cliente será um aplicativo escrito em HTML + CSS + JavaScript, executando em um browser, na máquina do usuário. E o servidor, um aplicativo executando em uma máquina conectada à Internet, capaz de responder a requisições HTTP. Os dados serão fornecidos no formato JSON de representação de dados.
Há várias formas de projetar uma API REST. Uma das mais comuns, contudo, é começar definindo os recursos e endpoints que serão providos pela API. Em nosso app, o recurso mais óbvio que será provido é a disciplina. Os endpoints, por sua vez, podem ser definidos pelas operações que precisaremos executar nos recursos. No caso de disciplinas, as operações mais simples em que podemos pensar são relacionadas às operações CRUD: criar uma nova disciplina, recuperar o conjunto de disciplinas, recuperar uma disciplina em particular, atualizar as propriedades de uma disciplina e apagar uma disciplina existente. Vejamos cada um dos endpoints e suas definições.
Usaremos o termo endpoint aqui para indicar o método e a URL (mais precisamente o alvo da requisição – request target) que devem ser usados para acessar cada operação sobre cada recurso no servidor.
POST /disciplinasEste endpoint permite a criação de uma
nova disciplina. O body da requisição deve incluir uma
representação inicial do recurso. A resposta incluirá a
representação armazenada no recurso e incluirá o identificador
(id) da nova disciplina. O body deve incluir um property
nome (uma string) e outro nota (um number).
GET /disciplinas/:idEste endpoint permite recuperar uma disciplina específica.
Observe que o trecho :id é apenas um placeholder que deve ser
substituído pelo efetivo id da disciplina que se quer buscar. A
resposta conterá um objeto correspondente a uma representação
da disciplina.
GET /disciplinasEste endpoint permite recuperar um conjunto de disciplinas. A resposta conterá um array de objetos correspondente à representação do conjunto de disciplinas.
Nos dois endpoints acima, usamos os termos objeto e array no sentido JSON desses termos. Afinal, nossa API é uma API REST JSON.
A primeira versão do frontend da aplicação será extremamente simples. Queremos apenas que permita, ao usuário, exercitar os endpoints acima, através de uma interface visual. Para isso, o app terá uma única tela. Logo que for iniciada, a tela deve exibir uma listagem das disciplinas existentes. Em algum outro espaço da tela, deve haver dois campos para digitação e um botão que devem permitir ao usuário registrar o nome e a nota de uma nova disciplina. E quando o botão for pressionado, a disciplina deve ser criada no backend e adicionada à listagem exibida para o usuário.
A listagem deve ainda conter alguns detalhes. Cada item deve exibir um botão para apagar a disciplina. Ao ser clicado, a disciplina deve ser apagada do servidor e eliminada da listagem do usuário.
Do ponto de vista visual, gráfico, não faremos quaisquer exigências por ora. Mais adiante, voltaremos a essa questão, quando tratarmos de CSS. Assim, neste primeiro momento, o que nos interessa é reduzir ao mínimo a complexidade da interface.
Esta parte será discutida com a professora Raquel. Um deploy dessa primeira versão foi feito no Heroku.
Sugestão. Use o comando
curlpara interagir com esse servidor. Não se preocupe com os dados enviados. Essa versão do servidor não faz persistência dos dados (são mantidos apenas na memória volátil). Em compensação eles serão periodicamente apagados.URL: https://lab01-projsw-ufcg.herokuapp.com/api
O design do frontend não poderia ser mais simples. Todo o
código será organizado em dois arquivos: index.html e app.js.
O index.html deve conter a estrutura visual do frontend que, em
nosso caso, se reduz ao mínimo: um título no topo da página, um
elemento para conter a listagem das disciplinas e os elementos
para que o usuário digite nome e nota de uma nova disciplina,
além do botão para solicitar o salvamento do dado.
Este frontend foi implementado em sala de aula. O processo consistiu em escrevê-lo em três etapas. O código fonte de cada uma das etapas está disponível no GitHub. Você pode interagir com um deploy de cada versão e compará-las.
Lab O estudante deve construir sua própria versão do frontend. Para isso, ele é estimulado a ler as versões criadas, mas deve procurar implementá-lo ele mesmo, para vivenciar o processo. O roteiro abaixo guia o estudante passo a passo por todo o processo de construção e deploy do frontend. É imprescindível que o estudante do curso faça o roteiro abaixo antes de prosseguir no curso.