CRUD Full Stack com Node, React & MySQL
HTML-код
- Опубликовано: 8 окт 2022
- Nesse vídeo compartilho a criação de um CRUD Full Stack de um cadastro de usuários, onde o backend será em node, frontend em React.JS e o MySQL como banco.
💻 Repositório: github.com/WilliamDosSantos/C...
===============
CURSOS QUE INDICO:
Full Stack Web PRO do zero ao avançado
hotm.art/Full-Stack-Web-PRO-d...
React Native do zero ao Avançado
hotm.art/React-Native-do-zero...
Curso de Node.js, React e React Native
hotm.art/Curso-Node-React-Rea...
Curso de Node.js (Celke)
hotm.art/curso-node-celke
Pacote Full Stack
hotm.art/Pacote--Full-Stack
Curso Criando Apps de I.A
hotm.art/curso-apps-ia
Curso de Flutter Completo
hotm.art/Curso-Flutter-Completo
Curso de Node.js (Danki Code)
hotm.art/curso-nodejs-dankicode
================
Instagram de Tecnologia:
/ will_programmer
Linkedin:
/ william-l-9b6625102
#fullstack #reactjs #nodejs 
Наука
Parabéns, Will!
Um projeto riquissímo em conhecimento, transmitido de maneira direta e instrutiva. Obrigado pela dedicação!
Muito obrigado pelo feedback 😃
Excelente explicação. Uma das melhores que eu já vi por aqui, sem exagero. Obrigada pelo conteúdo!
Muito obrigado pelo feedback :D
Seu projeto é maravilhoso irmão muito obrigado por todo o conhecimento compartilhado
Parabéns pelo conteúdo, meu amigo! Bastante enriquecedor. Eu trabalho como QA mas não deixo de programar. Tinha algumas coisas de front e back que sempre me perguntava como era feito, a exemplo da integração, e com seu vídeo pude entender e colocar em prática.
Que bom que o vídeo te ajudou, Arthur! Muito obrigado pelo feedback :D
Eu quem agradeço, ajudou muito Will. Por favor faça mais videos assim.
Seus videos sao maravilhosos Willian. Obrigada!!!
Agradeço seu feedback :D
Excelente! Didática top, me ajudou muito. Obrigada.
Simples e direto, muito bom, parabéns!!
simples, pratico e objetivo.. parabéns
Fantástico Will, muito obrigado por compartilhar com essa super explicação!
Muito obrigado pelo feedback 😃
tinha muita dificuldade em entender o processo entre front e back seu vídeo me ajudou muito obrigado
Que massa!! Valeeu
Meu irmão, tu é sensacional! Salvou demais aqui.
Valeeu
Merece mais views. Tutorial bem explicado e actualizado
Abraço de Portugal irmão!
Muito obrigado 😃
Parabéns pela didática, me ajudou bastante em meu aprendizado, ganhou mais um inscrito.
Valeeu 🤜🤛
Muito legal. Parabéns.
Baixei o projeto do GIT e rodei em aula para os meus alunos explicando o processo e sugerindo que eles alterem para aplicações deles.
Todo mundo curtiu muito.
Claro que lhe dando todos os créditos e compartilhando seus GIT e canal no YT.
Obrigado por compartilhar.
Que massa Liojes!! Fico feliz em poder contribuir com o aprendizado da comunidade. Valeeu :D
achei muito bom o projeto, vou estudar ele direitinho mas achei sensacional fazer tanto o front como back tudo integradinho direitinho :D
Show, agradeço o feedback :D
Cara que top perfeito de todos que acompanhei o tutorial, o seu foi o único que deu tudo certo parabéns
Que massaa, muito obrigado pelo feedback
show Will, muito bom o projeto...grato por compartilhar.
Muito obrigado pelo feedback :D
Parabens Will Muito bom, esse projeto ajudou bastante na compreensão node com backend.
Valeeu
Que vídeo fera!!! Parabéns e obrigado!
Muito obrigado pelo feedback :D
meu caro vc esta de parabens, adorei
Cara gostei muito do vídeo achei muito top , estou começando agr a estudar front e Back mas sinto que não consigo conectar tudo .Gosto de ver esse tipo de vídeo que faz . Queria saber se você tem algum curso pra indicar, ou por onde começar aprender a programar . Alguma comunidade que consiga me integrar no projeto para poder aprender mais um pouco
parabés pelo trabalho, foi um ótimo projeto, quebrei bastante a cabeça. hehe.
Faz parte kk, agradeço seu feedback :D
Mano, vou secar todos teus videos... são muito bons
Já estou inscrito.
Já vi que tem uns projetos em react, vou consumir sem moderação.
Obrigado pelo conteudo.
Que bom que tá curtindo, muito obrigado pelo feedback :D
Muito obrigado pelo vídeo!
Parabéns pelo vídeo. Gostaria de saber como seria se em vez do banco de dados ser local, se fosse remoto, hospedado em algum serviço
Muito bom!
Oque eu precisava !!
Massa!! Muito obrigado pelo feedback 😃
Muito bem explicado Will
Muito obrigado pelo feedback :D
muito bom will irei implementar algumas orm's usando esse projeto como basa.
Boaa
boa tarde Will, Parabêns pelos exemplos explicados, estou precisando atualizar uma variável ao clicar no botão Salvar, declarada no Form.js (estrutura parecida com esta sua), onde colocar Ex.: bananaEstoque = 100 ao registra venda bananaEstoque = bananaEstoque - 1, Obrigado
Will parabéns pelo projeto está me ajudando bastante \o/, porém clonei seu projeto e não estou conseguindo salvar, consigo update e delete, a unica coisa diferente do original é que estou usando docker para o mysql
Muito bacana Will!!
Mais simples e claro, não encontrei... muito obrigado por compartilhar!
Só achei estranho que ser errar a string SQL a API retorna um objeto que é o erro, o frontend não detecta esse erro... tive que apelar para o console.log(data) para ver o que vinha dentro do objeto... Vou procurar algo sobre tratamento de erros...
Obrigado, curiosidade pra hospedar online, qual site de hospedagem gratuito pra estudo trabalha com node no servidor ? Valeu
Dá para utilizar o postegres ao inves do mysql?
Gostei desse vídeo! Gosto de Laravel mas estoua alisando outras possibilidades tb 😉 Forte abraço!
Boaa, abraço!!
Ola TioJobs vc disse q gosta de Laravel estou em duvida se estudo PHP Laravel ou JavaScript com NodJs
Está aparecendo isso no terminal qunado dou o npm start no nodemon: "[nodemon] app crashed - waiting for file changes before starting..." e não consigo acessar o localhost na barra de navegação...
Parabéns pelo vídeo!!
Valeeu
Poderia fazer um crud de JS e MySQL apresentando a interface em HTML e CSS? Já faço CRUDs em PHP mas sinto dificuldades com JS devido ao node.js e sua vinculação com o front-end
Muito bom o seu trabalho, fiz algumas mudanças, criei outras telas, apartir do seu. Mas não estou conseguindo usar o google cloud, tento subir a pasta API e a frontend separadas, mas dá algum problema na construção da aplicação, você tem alguma dica?
Will consegue me tirar uma dúvida, pq vc usou o MySQL localmente colocando aquele código, não daria na mesma usar ele como servidor ?
enfim um material vasto sobre o assunto, pra mim q veio do delphi q é td na mão, fiquei dias pra entender como trazer dados de um banco pra dentro do react.
🚀🚀
onde estudou delphi?
Bom dia, infelizmente quando chegou na etapa de instalar as dependências na pasta frontend, a instalação foi interrompida apresentando erro que não sei explicar, o que posso fazer para continuar ou você tem o projeto pronto no github para eu clonar?
curso mt bom. Poucas pessoas tem a didatica que vc tem. Seria mt massa se fizesse um video ensinando a fazer o deploy desse projeto.
Muito obrigado pelo feedback :D
Tentei subir pro Vercel, mas dá erro 404. Substitui url do localhost 8800 pra url do projeto no vercel mas mesmo assim não deu. Tem 3 url lá e só testei com uma, mas acredito que se fosse pra funcionar em alguma, funcionaria em todas. Sabe dizer como faço pra rodar no vercel também?
amo seus videos, faz um com o Postgres =)
Multo obrigado pelo feedback :D
Boa tarde!
Como poderíamos hospedar ele em servidor linux basico com apache? É possível ? Como exemplo.....LAMP que voce consegue hospedar jogando as pastinhas nos lugares certo e roda de boas os PHP..... tem algo bem semelhante para hospedar no servidor linux local? e distribuir o link pela rede local? meu IP linux /nome da pasta / index.html
onde ele usa a função handleSubmit?
como você resolveu o problema que da no minuto 13:20? o seu da varios erros, assim como no meu, e depois vc corta o video com o problema resolvido
Se não quiser instalar tudo na sua máquina, uma dica é usar docker e docker compose, se não tiver prática é só investir um tempo pra aprender sobre containers, assim não é preciso fazer longas configurações pra testar seus projetos.
É disso que o povo gosta
ia ser muito om também outro projeto usando ORM
Vídeo top meu caro. Altos ensinamentos para quem ta começando em NodeJS!!! Uma dica construtiva: Se puder explicar com mais calma oq está fazendo, ficaria ainda mais top, amigo. Mesmo assim, está de parabéns, consegui entender cada parte. Sucesso!!!
Muito obrigado pelo feedback 😃
Muito obrigado
Para quem teve problema de utilizar o terminal do VS Code pode utilizar o cmd da sua própria máquina que funciona do mesmo jeito
Excelente video meu parceiro, só há uma dúvida, como eu coloco sites com backend no ar na Vercel. Agradeço desde já.
É um pouco extenso a explicação kk, então recomendo procurar algum vídeo que mostre isso, futuramente posso trazer algo relacionado :D
no npm yarn não deu certo tentei corrigir não consegui, desistir kkk
Muito bom o conteúdo! Direto ao ponto! Suponho que com SQLSERVER seria igual?
sim, mesma ideia
Vídeo muito bom, finalmente aprendi a fazer um CRUD bacana! Uma pergunta: se eu quisesse fazer um mecanismo de busca nessa aplicação, através de um select, como seria o código? Algo parecido com o getUsers só que filtrando por algum atributo? Obrigado pela atenção!
Basta fazer um filter do javascript no array de itens, no próprio state que armazena o array
Cara seu projeto e explicação foram ótimos, parabéns.
Acredito que algo para melhorar seria em questão de dividir o video do youtube apontando cada cenário tipo: 26:34 (min /segund) "classe Form.js" há um recurso no youtube, fora isso parabéns pelo ensino.
Que bom que gostou, muito obrigado pelo feedback 😃
Gostaria de ver como ficaria a paginação dessa listagem
Boa tarde isso mesmo seria top incluir a paginação
thanku once again it really help me
Boa tarde Professor, qual extensão do vscode, para deixar destacado o css do style global, igual ao do senhor?
Opa, vscode-styled-components
Big thank
Gracias
Ei moço, uma sugestão de video: tutorial de como colocar os projetos no GitHub
Muito obrigado pela sugestão :D
No seus cursos vc aborda sobre atualização de libs pq algumas tem mudanças de depósito e muitas pessoas que não conhece acaba perdendo um certo tempo com isso
Pois é, isso sempre é um problema kk
Como eu poderia fazer para este projeto rodar no localhost de outra maquina por exemplo ? baixar o mysql e conectar ao meu user do bd ?
Acredito que dá para você usar o Ngrok para compartilhar algo que está no localhost, é bem tranquilo
o que faço se aparecer o erro ERR_MODULE_NOT_FOUND
Tive o mesmo problema, você precisa mudar a extensão dos seus arquivos para mjs ao invés de js para o Node reconhecer seus arquivos como módulos ESM já que habilitou ele no package.json
Se não quiser, você pode remover o type do package.json aí só invés de usar import e Export, você usa require
Projeto bacana
Valeeu
Top
Will, excelente vídeo, meus parabéns. Só uma pergunta: se por acaso o quisesse transformar esse crud em multi usuario, cada user podendo salvar seus próprios contatos, o que eu teria de fazer ? tks
Geralmente é criado um login por usuário, aí salva no banco com a mesma tabela, só adicionando uma nova coluna para indicar quem criou o contato né, aí com isso dá para filtrar depois por usuário
tks@@will_dev
Olá, parabéns pelo vídeo, bem explicado... Mas (sempre tem um mas hehehe) Como posso fazer o deploy dessa aplicação? Pergunto por que estou com bastante dificuldades de conseguir subir os projetos com consumo de API e backend.
vou tentar trazer algo sobre isso
@@will_dev obrigado... ficarei acompanhando
Conseguiu algum vídeo que ensine isso amigo? Estou com essa dificuldade também
fiz o código e a tabela no mysql, ambos estão não apresentam falhas ou erro, mas quando abro o app no navegador ele não faz nenhuma alteração, qnd inspeciono a pgna ele me apresenta esse erro: Failed to load resource: net::ERR_CONNECTION_REFUSED. Oque posso fazer para resolvelo?
Opa, você executou aquele script para funcionar no localhost que mostro? Confere as credenciais se tá tudo certo, e por último tenho o link do repositório na descrição se quiser comparar
show, gostaria de aprender mais, para criar projeto maior com mais cadastros, tipo de produtos, com tabela relacionado de grupos, com select como funciona ? se puder poderia ensinar criar um pedido de vendas ou fluxo de caixa com entradas e saidas para aprender trabalhar com forms modais e mais de uma tabela, relacionamentos, filtros, e tambem como funciona para fornecer este projeto para clientes na web ? como se hospedar isso ? sou novo mundo da web, penso em um sistema SaaS como se estrutura isso ?
Realmente tem várias possibilidades, tenho alguns vídeos que complementam isso, como um sistema financeiro.. e para as demais dúvidas vou tentar trazer uns projetos completos futuramente :D
estou aqui, primeira vez que consigo rodar um API e front em React na minha maquina gostando bastante, e gostaria de aprender mais, e saber se um dia tiver que colocar api e front na web como funciona ?
Muito bom, obrigado will pelo video tutorial. Quando eu digito e clico em enviar no nome fica assim "Will aaa" não sei da onde ta saindo esse "aaa" kkk
Tenta comparar com o código do meu repositório que tá na descrição, deve ter sobrado algum detalhe aí :D
Will, eu apliquei o projeto em uma máquina virtual, funcionou certinho, aí tentei acessar na minha máquina, na mesma rede, o layout da página aparece certinho, mas não puxa as informações que estão no banco, e tbm não permite adicionar nenhuma informação, poderia me sugerir alguma coisa? Obrigado
O banco está local na máquina? Teria que deixar visível para o backend, talvez tentar subir esse banco
O meu terminal não estava reconhecendo o comando "yarn" então eu fiz o download usando o comando "npm install --global yarn" em seguida ele não tava deixando executar o comando, então eu abri o powershell como admin e rodei esses 2 comandos " Get-ExecutionPolicy " e o
" Set-ExecutionPolicy RemoteSigned " por fim funcionou
Boaa
vlw, fiquei confuso tentando reinstalar tudo achando q o problema era glitch ou algo corrompido
Muito bom fiz todo exemplo e criei um com meus dados só que não salva, nem edita so funciona o delete grato
Opa, o que não funciona, tenta copiar do repositório para ver se tem diferença
thankus so much upload this video
Na hora de rodar o formulario no browser no minuto 21:36 nao aparece nada na tela e aparece o seguinte erro no console do navegador:
Failed to execute 'createElement' on 'Document': The tag name provided ('') is not a valid name.
Parece que tem algum elemento com o nome errado no projeto, tenta comparar com o repositório para ver se tem diferença
Tenho uma dúvida, ao fazer um projeto como esse que tenha react, banco de dados, etc, qual a melhor forma de subir ele pro github de forma que um recrutador possa acessar e utilizar o projeto por meio de um link como GitHub Pages? Recrutadores RH geralmente não tem conhecimento de baixar e rodar os arquivos na propria máquina e nem tempo pra isso, o interessante é no nosso repositório ter um link hospedando nosso projeto. E é isso que quero saber, qual a melhor forma de hospedar um projeto desses fullstack. (obs: eu já hospedo outros projetos que são basicamente front ends consumindo APIs de terceiros no proprio github pages, mas nunca fiz nada fullstack, por isso a duvida).
Assim como tem no front o githubpage, netlify. Tem serviços de hospedagens igual para projetos backend, tem alguns exemplos no RUclips (no momento não tenho :/ ). Um exemplo é o render, que hospeda projetos backend, aí é disponibilizado o link para você consumir no teu front, então só alterar esse link no front. Pessoal da Rocketset postou esses tempos um conteúdo relacionado: ruclips.net/video/pmXfvd6Zqg4/видео.htmlsi=bXTmUX6ebqiXf_bN
Muito top Will, eu consigo visualizar o banco, alterar e deletar, só não estou conseguindo inserir, esta dando esse erro:A isn't associated with a form field. To fix this issue, nest the in the or provide a for attribute on the that matches a form field id. 2 resources Violating node Violating node,
Obrigado pelo conteúdo.
Deve ter algo problema com o HTML do form, recomendo pegar do meu repositório e comparar, o link está na descrição
@@will_dev Deu certo mano, vale em
Parabens Will,
Mas quando tento seguir a tua aula, da Erro dizendo que esta sintaxe corresponde ao ES Modules, e não consigo ultrapassar esse erro, mesmo adicionando no arquivo Package.json a instrução "type": "module" , mas notei que no teu video você não usou nada disto, preciso da tua ajuda
será que não tava importando com o .js no final? tenta comparar com o código do repositório para ver se tem alguma diferença
omg code so good bro
Muito bom video, o meu projeto não ta renderizando a pagina Form ja fiz de tudo
Tenta comparar com o código do repositório
Meu form simplesmente nao aparece na tela, nao da nenhum erro so nao aparece, alguma ideia de como resolve?
Pior que não, o get tá retornando os dados do banco?
@wll o seu full stack pro tá atualizado com a react.js + next.js?
Cara, o instrutor sempre atualiza os cursos dele, acredito que sim, mas na dúvida, manda uma mensagem para ele no insta
muito bom, gostaria de aprender criar web apps, como é feito com o bubble é possivel ? como criar aqueles controles para arrastar e criar os forms ?
Não com essas tecnologias, esses é mais mão no código mesmo, mas é só estudar que você vai ver que vai ser mais bacana criar na mão hehe
gostaria de criar app, mais nao gostaria de utilizar essas ferramentas pagas, gostaria de ir para o codigo, com banco de dados firebase por exemplo o que indica ? tipo tela de login um app para barbeiros
@@walney2008 se for um app simples dá para usar o firesabe, é bem tranquilo. Se quiser um relacional, dá para usar o MySQL
Salve!
Ao iniciar o "yarn start" exibiu o seguinte erro
" Error [ERR_MODULE_NOT_FOUND]: "
Apareceu pois não digite na extensão "js" no import {getUsers} from "../controllers/users.js";
Opa, então ficou resolvido aí a situação?
@@will_dev Opa, resolveu sim. Valeu!
Salvou minha vida...rs
ótimo vídeo amigo, só estou com problemas com a API, vc poderia me ajudar?
Opa, qual BO?
meu frontend não esta deletando e editando os usuarios? alguma ajuda obrigado
Opa, talvez faltou algum detalhe, se quiser pegar do meu repositório, o link está na descrição
o backend crasha quando eu edito algum usuario e clico em "salvar". Se alguem puder me ajudar ! (obs: isso é so na edição. inclusão e delete estão ok)
Tent copiar o código do meu repositório para ver se não tem alguma diferença, ou veja qual erro está ocorrendo no método
Outra dúvida é sobre o const xxx`
(No meu todos esses comando tornam-se invalídos`;
O arquivo está com .JS?
Como faço pra testar no postman essa API localhost??
tem que colocar o link do server do node lá no postman, e coloca / a rota da ação
Tive problema logo no início com o ALTER TABLE 'root'@'localhost'
Conseguiu resolver?
Até o 21:42, esta funcionando numa boa só que não aplicou a font, coloquei no global.js que esta na pasta styles o font-family só que não pega no site e também no html que a gente foi no site e pegou
Hmm, que estranho :/.. tenta copiar essa parte do meu repositório, se mesmo assim não funcionar, deixa para o final então para ver a fonte..
@@will_dev ok, te aviso depois
@@will_dev Fui comparar todo o seu repositorio para deixar o meu igual e ver algumas coisas que errei. O erro da font foi pq eu coloquei no margin e padding no final uma , em vez do ; Nem tinha percebido e por conta de escrever algumas partes tendo que colocar " , " acabei coloquei lá também.
Obrigado pelo video e me ajudou bastante clareando a mente para futuros projetos. Um grande abraço Will
@@smellingyou Valeeu
No meu Mysql quando entro e clico pra conectar no MySql Connections, aparece la encima no Schemas: sakila, sys, world. Eu posso deletar isso ou eles tem que ficar ali? No seu video não aparece o mesmo que esta no meu. O que fazer?
Ele vem uns bancos padrões de exemplo, pode excluir
@@will_dev cliquei com botão direito encima e qual parada que é pra excluir
@@smellingyou drop ou delete
@@will_dev obrigado
Não consigo avançar com o tutorial. Apreenta erro de LOCALHOST RECUSADA. Mesmo rodando a linha de comando sugerida no MYSQL nao consigo avançar.
Provavelmente seu MySQL estava com uma senha diferente da que você pôs no código, ai deu esse erro
Como esconder a senha do arquivo que faz a conexão com o banco de dados para subir no github ?
Pode deixar num arquivo .env
ERROR in ./src/index.js 3:0-30
Module not found: Error: You attempted to import ../db.js which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project's node_modules/.
Estou tendo esse erro, oque pode ser?
Não tá encontrando o arquivo db.js a princípio
dentro da pasta controllers vá no arquivo user.js e na primeira linha coloque esse comando: import { db } from "../db.js";