Como criar uma aplicação bancária King Lion com Spring e Thymeleaf (série Coding Bootcamp)

Diana Bernardo Blocked Unblock Seguir Seguindo 16 dez

Depois de concluir a parte de fundação do curso na Green Fox Academy , começamos a fase de orientação há duas semanas. Agora, cada turma seguirá um caminho mais específico. Como eu estava na aula de Java na Fundação, a Orientação será sobre o aprendizado do Spring .

Então, nas últimas duas semanas, aprendemos sobre os fundamentos do back-end quando fomos apresentados ao framework Spring, primeiro por conta própria e depois em conexão com o Thyemleaf , um mecanismo de modelo. Consequentemente, essas semanas também nos permitiram revisitar HTML e CSS – um pesadelo para muitos, mas um prazer para mim.

A fim de explicar os tópicos que abordamos nessas semanas, realizarei um dos exercícios que concluímos, em que o objetivo era criar o Bank of Simba, um aplicativo de conta bancária baseado no Lion King que exibia informações sobre os clientes, permitir atualizar o saldo e adicionar novas contas. O resultado final ficará assim:

Etapa 1: configurando a estrutura

O Spring usa a arquitetura MVC (Model-View-Controller), que permite separar os diferentes aspectos do aplicativo, da seguinte forma:

Modelo: encapsula os dados da aplicação;

Exibir: renderiza os dados do modelo e gera saída em HTML que o navegador do cliente pode interpretar;

Controlador: responsável por processar solicitações de usuários e construir um modelo para passar para a visualização para renderização;

Com isso em mente, o primeiro passo para criar nosso aplicativo do Banco de Simba é criar um Controlador, que listará os diferentes terminais de nosso aplicativo. Por exemplo:

O @GetMapping (“/ accounts”) é o nosso primeiro endpoint (coloque muito simplesmente, o que temos que escrever em nosso navegador para obter este View). E quando retornamos “contas”, estamos exibindo um documento HTML com esse nome.

Etapa 2: exibindo informações sobre clientes existentes

Agora, esse documento HTML é escrito usando o Thyemeleaf. Vamos criar uma tabela para exibir as informações sobre nossos clientes e vamos preenchê-lo usando o loop "for: each", da seguinte forma:

Observe que, para chegar a este ponto, onde referenciamos “name”, “animalType” e assim por diante, obviamente precisamos defini-lo primeiro. Para isso, precisamos ter uma classe BankAccount com os campos listados e, em seguida, instanciar objetos dessa classe e armazená-los em uma lista.

E para fazer a conexão entre o HTML e nossa classe, precisamos adicionar isso no nosso Controller, usando o Model, assim:

Isso significa que quando nos referimos a “contas” em nosso documento Thyemleaf, estamos fazendo referência à Lista de contas do BankAccounts.

Etapa 3: aumentar o equilíbrio dos clientes existentes

Agora que temos nossa lista de clientes, queremos poder aumentar seus saldos. O exercício tinha a especificação de que, se o animal fosse um rei, o saldo deveria ser aumentado em $ 100 e, se não, em $ 10.

Por este ponto, precisamos de alguma entrada do usuário. De quem será o equilíbrio? Vamos perguntar ao usuário com um formulário, assim:

Este formulário nos enviará para o ponto final "/ raisebalance" e enviará uma solicitação HTTP Post com as informações fornecidas pelo usuário. Em seguida, no Controlador, verificamos se o cliente é um Rei, para saber o valor a ser levantado.

Observe a anotação @RequestParam aqui, que vai… bem, solicitar um param (eter) do usuário… com o nome “q” – o mesmo nome que demos a entrada em nosso Form – sem isso, a conexão entre os dois pontos é não feito e o @RequestParam retornará null. (Eu lutei com isso por um tempo até que percebi que estava faltando. Não é divertido …).

Etapa 4: adicione um novo cliente

Ótimo, agora temos nossa lista de clientes e podemos aumentar seus saldos. Mas um banco precisa de novos clientes, certo? Vamos criar uma maneira de adicioná-los!

Como você deve ter notado, adicionamos um botão para fazer isso em nossa página principal. Isso direcionará o usuário para o endpoint "/ accounts / add", onde retornamos uma nova página HTML. Nesta página, temos um formulário com os campos obrigatórios para criar uma nova conta (nome, saldo e assim por diante).

E para esta página nós criamos um novo Controller, onde passamos a anotação @ModelAttribute como um atributo. Esta é uma anotação Spring que liga o valor de retorno do método a um atributo de modelo nomeado e o expõe a uma visualização da web.

Ok, recebemos as informações do usuário sobre a nova conta. Mas ainda precisamos passar essa informação para nosso aplicativo e faremos isso com um @PostRequest para o mesmo endpoint, onde retornaremos não o documento HTML original como antes, mas redirecionaremos (para manter as informações, o usuário acabou de entrar). Algo assim:

E aí está, eu me acrescentei como cliente. Eu não sou um rei e meu saldo é muito baixo, mas pelo menos eu sou um "bom rapaz"!

Espero que isso tenha ajudado alguns de vocês. Se você tiver dúvidas sobre qualquer uma das etapas, avise-me e terei prazer em responder.

Na próxima semana, continuaremos nossa jornada de aprendizado com Persistência e Implantação. E então… umas merecidas férias de Natal!