Criação e Consumo de API - A jornada Full Stack com Java, MySQL, Spring Boot e JavaScript, Html, Css com Reactjs - Do Back ao Front-end
- #Spring Framework
- #JavaScript
- #Java
Fala, Dev. Hoje, compartilho um pouco da minha jornada de criação e consumo de API, usando Spring Boot e React.js. Depois de muito estudo, acessando os conteúdos certos, o cenário full stack que desejo está tomando forma.
Neste exemplo, uso o Spring Boot com JPA, MySQL, Spring Web, Spring Boot Dev Tools, para criar uma api, o mais simples possível, assim tentei rsrs.
Usei o gerenciador de pacotes Maven e a versão 2.7.10 do Spring, que são as que tenho mais afinidade.
Durante a criação do projeto fui desafiado a pesquisar quais os requisitos para se criar uma api, depois de já ter assistido algumas aulas de reactjs com javascript, para aprender a consumí-la. Criar uma API simples, que consome um banco de dados MySQL, que possui apenas dois campos, nome e e-mail, com Java e Spring Boot possui muitos detalhes.
Como gosto de criação de páginas de vendas, páginas de captura, nome e e-mail, geralmente, são as informações mais úteis.
Para este projeto, criei 4 pacotes (principal, controller, model, repository), onde fui desafiado a identificar a finalidade de cada um, buscando visualizar o padrão de desenvolvimento model-view-controller com o repository.
O controlador fica responsável pelas requisições http, das rotas, enquanto o repository abstrai as queries do banco de dados MySQL acessadas via JPA, o model possui a lógica do negócio, que neste exemplo está limitada a mapear uma classe em java, na entidade do banco de dados, que terá a tabela, com as colunas nome e e-mail, para armazenar os dados.
Antes de chegar neste resultado, queimei algumas horas vasculhando direcionamentos, conteúdos, contextos, até entender que não precisa ser tão complicado assim. O chatgpt me economizou algumas horas nestas pesquisas.
Após isso, usei a experiência que adquiri com Reactjs e Spring Boot nos últimos meses, com o bootcamp OrangeTech+ aqui da Dio, para criar um componente simples, que consome a API. O bom do Spring Boot é que ele consegue restringir de qual local virá o acesso, ou seja, qual a url pode requisitar os dados da API. Isso faz parte da politica de segurança de acesso. Se você quer desejar aberto a qualquer acesso ou restrito, isso precisa ser configurado. Por padrão, o acesso externo é bloqueado.
Até descobri isso, passei mais alguns minutos pesquisando para descobrir o motivo da minha aplicação React não conseguir se comunicar com a API Spring Boot. Para consumo da API, com Reactjs, utilizei programação assíncrona com async, await, fetch e then.
A curva de aprendizado até aqui foi longa e ainda continua. Agora, é documentar tudo, refazer ainda mais simples, e testar as novas possibilidades, identificar os conceitos e práticas que ainda não estão claros, e assim, inserir dados, atualizar, apagar, estilizar o componente, criando uma landing page com cara profissional, que consome e armazena dados, para que por fim, seja hospedado e disponibilizado para acesso na web.
Gostou da visão.
Em breve, teremos mais.
#mysql #react #reactjs #java #springboot #jpa #javascript #html #css #eclipse #visualstudiocode #vscode #bancodedados #api #consumodeapi #criacaodeapi #springframework
Inscreva-se no Canal para acompanhar novidades sobre Java, JavaScript, Html, Css, MySQL, Spring Boot, Reactjs, Carreira Dev, Freelancer, Tecnologia e mais. Acesse e conheça: https://www.linkedin.com/in/olivalpaulino/
