COMO FUNCIONA NA PRÁTICA UM SISTEMA FULLSTACK? #programação #iniciantes #coding #javascript

[0:00]Eu queria muito que alguém tivesse feito isso comigo que eu vou fazer agora lá atrás quando eu tava começando na programação. Cara, se tu é programador iniciante, ainda não entendeu como funciona esse negócio de fullstack, de como que um sistema funciona, um frontend se comunica com a API, com banco de dados, eu vou te mostrar agora na prática, mostrando aqui a tela do meu computador, como que isso funciona, porque eu queria muito que alguém tivesse feito isso comigo lá atrás. Para resumir isso, aqui foi um sisteminha que eu fiz, tá? Ele é full stack, essas foram as tecnologias que eu usei. Ele é um sistema para restaurantes, pizzarias, então aqui eu tenho a versão mobile que é para o garçom anotar os pedidos e mandar para a cozinha e a cozinha vai ter acesso aos pedidos para poder fazer o alimento e falar, ó, tá pronto. E aí isso aqui se comunica com a API, né? Isso aqui é o frontend, se você comunica com a API, que se comunica com o banco de dados. Agora bora ver na prática aqui, ó, como que isso funciona. Aqui no meu sistema, eu tenho uma funcionalidade em que quem tá lá na cozinha pode cadastrar novos produtos, tá, que tem no restaurante, para que o garçom consiga ver isso aqui no cardápio, para anotar um pedido desse produto. Aqui eu tô na aplicação JavaScript, usando React, que é um framework de JavaScript. Essa página aqui é literalmente o componente desse formulário aqui que eu tô mostrando para vocês, de criar um novo produto, beleza? Então, ó, aqui eu tenho todo o HTML dele, né, de insira aí o nome do produto, não sei o que, a foto e tal. E como que esses dados vão chegar lá no banco de dados? Bem aqui, ó, eu tenho falando que esse form, ele tem uma action que chama HandleRegisterProduct. Essa HandleRegisterProduct é essa função aqui. Essa função, ela pega todos aqueles dados que estão lá no formulário que o cara preencheu, faz algumas verificações aqui que não interessa muito agora, mas é só para validar o formulário. E tá vendo bem aqui? É aqui que a mágica acontece. Bem aqui, ó, eu tô chamando a minha rota /product e passando os dados do meu formulário. Uma rota é basicamente um link que meu back end fornece para que, olha, nesse link aqui você pode me mandar os dados do formulário de produto. Agora bora ver como que o back end tá recebendo isso. Aqui é o back end, já é outro projeto, ó, eu não tô aqui no mesmo projeto, tá bom? Eu tô aqui, ó, no pizzaria backend. E aqui eu tenho um arquivo de rotas, que é onde eu defino todos aqueles links lá. E bem aqui, ó, se vocês forem ver, eu tenho as rotas product. Olha, eu tenho uma rota do tipo post, que agora não precisa entender muito bem o que que é, mas ela vai ser /product, o cara tem que tá logado para acessar ela. E aqui eu tô chamando o controller que você também não precisa entender o que significa agora, mas basicamente é isso. Tenho /product, é do tipo post, porque a rota ela vai tá recebendo dados e não enviando, que no caso são o que as rotas get fazem. Ela vai tá recebendo dados que são os dados do produto e vai tá fazendo alguma coisa com eles. E o que ela tá fazendo é aqui nesse controller. Esse meu controle, Opa, não coube tudo nesse short aqui, mas eu postei o resto aí no meu perfil, beleza? Falta só uns 20 segundinhos, vai lá só para finalizar a linha de raciocínio.