Voc\u00ea terminou o backend, testou as rotas e viu os dados chegando ao MySQL. E agora: como transformar essa API em uma aplica\u00e7\u00e3o que as pessoas consigam usar?<\/p>\n\n\n\n
Neste projeto, criamos a interface de um sistema de agendamento para barbearia<\/strong> com React e Bootstrap. O usu\u00e1rio preenche nome, procedimento, data e hor\u00e1rio; o frontend envia essas informa\u00e7\u00f5es para uma API Node.js, que registra o agendamento no banco de dados.<\/p>\n\n\n\n Antes de construir o formul\u00e1rio, conferimos se o backend j\u00e1 estava funcionando. Testamos a rota de cadastro com uma requisi\u00e7\u00e3o POST<\/strong> e a rota de consulta com GET<\/strong>. Assim, quando come\u00e7amos a integra\u00e7\u00e3o com React, j\u00e1 sab\u00edamos que a API conseguia receber e listar agendamentos.<\/p>\n\n\n\n Essa etapa ajuda a localizar erros: se a requisi\u00e7\u00e3o funciona no cliente REST, mas falha no navegador, podemos concentrar a investiga\u00e7\u00e3o na comunica\u00e7\u00e3o com o frontend.<\/p>\n\n\n\n Criamos um arquivo Separar essa comunica\u00e7\u00e3o do formul\u00e1rio deixa cada parte do projeto com uma fun\u00e7\u00e3o clara: o componente coleta os dados e apresenta a resposta; o servi\u00e7o cuida da requisi\u00e7\u00e3o.<\/p>\n\n\n\n No componente de agendamento, usamos Tamb\u00e9m tratamos as respostas para mostrar uma mensagem ap\u00f3s o envio e informar quando ocorre um erro. Durante os testes, corrigimos o comportamento dos campos de data e hor\u00e1rio e conferimos o registro no MySQL.<\/p>\n\n\n\n O Bootstrap ajudou a montar a estrutura visual e adaptar a p\u00e1gina a telas menores. Tamb\u00e9m usamos CSS para dar acabamento \u00e0 interface. No v\u00eddeo, mostramos o formul\u00e1rio em uma visualiza\u00e7\u00e3o de celular e o menu hamb\u00farguer da aplica\u00e7\u00e3o.<\/p>\n\n\n\n O resultado \u00e9 uma interface em que o visitante consegue preencher e enviar um agendamento, enquanto o backend recebe e salva os dados.<\/p>\n\n\n\n No v\u00eddeo editado<\/strong>, voc\u00ea acompanha a cria\u00e7\u00e3o do frontend e a integra\u00e7\u00e3o com a API:<\/p>\n\n\n\nPrimeiro, testamos a API<\/h2>\n\n\n\n
Organizando a comunica\u00e7\u00e3o no
api.js<\/code><\/h2>\n\n\n\napi.js<\/code> para concentrar a chamada \u00e0 API. Nele, usamos fetch<\/code> para enviar os dados do agendamento \u00e0 rota do backend, com o m\u00e9todo POST e o corpo convertido para JSON.<\/p>\n\n\n\nCriando o formul\u00e1rio com React<\/h2>\n\n\n\n
useState<\/code> para acompanhar o valor dos campos de nome, procedimento, data e hor\u00e1rio<\/strong>. Quando o usu\u00e1rio confirma, reunimos esses valores em um objeto e chamamos a fun\u00e7\u00e3o do api.js<\/code>.<\/p>\n\n\n\nBootstrap, CSS e responsividade<\/h2>\n\n\n\n
Assista ao projeto passo a passo<\/h2>\n\n\n\n