ฝัง
- เผยแพร่เมื่อ 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 - วิทยาศาสตร์และเทคโนโลยี
Eu quem agradeço, ajudou muito Will. Por favor faça mais videos assim.
Seu projeto é maravilhoso irmão muito obrigado por todo o conhecimento compartilhado
Excelente! Didática top, me ajudou muito. Obrigada.
simples, pratico e objetivo.. parabéns
Simples e direto, muito bom, parabéns!!
Excelente explicação. Uma das melhores que eu já vi por aqui, sem exagero. Obrigada pelo conteúdo!
Muito obrigado pelo feedback :D
Parabéns, Will!
Um projeto riquissímo em conhecimento, transmitido de maneira direta e instrutiva. Obrigado pela dedicação!
Muito obrigado pelo feedback 😃
Seus videos sao maravilhosos Willian. Obrigada!!!
Agradeço seu feedback :D
Fantástico Will, muito obrigado por compartilhar com essa super explicação!
Muito obrigado pelo feedback 😃
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
tinha muita dificuldade em entender o processo entre front e back seu vídeo me ajudou muito obrigado
Que massa!! Valeeu
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
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 😃
show Will, muito bom o projeto...grato por compartilhar.
Muito obrigado pelo feedback :D
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
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
Parabens Will Muito bom, esse projeto ajudou bastante na compreensão node com backend.
Valeeu
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
meu caro vc esta de parabens, adorei
Parabens! Ótima didática.
Que vídeo fera!!! Parabéns e obrigado!
Muito obrigado pelo feedback :D
parabés pelo trabalho, foi um ótimo projeto, quebrei bastante a cabeça. hehe.
Faz parte kk, agradeço seu feedback :D
Muito obrigado pelo vídeo!
muito bom will irei implementar algumas orm's usando esse projeto como basa.
Boaa
Muito bom!
Oque eu precisava !!
Massa!! Muito obrigado pelo feedback 😃
Muito bem explicado Will
Muito obrigado pelo feedback :D
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éns pelo vídeo!!
Valeeu
show, se dockerizar esse projeto fica até melhor
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
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
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?
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
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
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...
amo seus videos, faz um com o Postgres =)
Multo obrigado pelo feedback :D
É disso que o povo gosta
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
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.
Obrigado, curiosidade pra hospedar online, qual site de hospedagem gratuito pra estudo trabalha com node no servidor ? Valeu
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
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
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?
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
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
Projeto bacana
Valeeu
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 😃
thanku once again it really help me
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 ?
ia ser muito om também outro projeto usando ORM
Top
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
Big thank
Muito bom o conteúdo! Direto ao ponto! Suponho que com SQLSERVER seria igual?
sim, mesma ideia
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
Boa tarde Professor, qual extensão do vscode, para deixar destacado o css do style global, igual ao do senhor?
Opa, vscode-styled-components
Will, belo material....
me tira uma dúvida...
vamos supor que este teu grid ai fosse de alunos... como faria um formulário matricula deste aluno, para pegar ai o código do aluno neste grid ai ou mesmo o curso que o mesmo faria e retornar e após selecionar o curso ou o aluno retornar a este formulário de matricula com as informações. Podes me dar uma ajuda, ou exemplo ou até mesmo onde encontrar?? não achei nada parecido ainda. desde já lhe agradeço.
Dá para utilizar o postegres ao inves do mysql?
omg code so good bro
thankus so much upload this video
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...
Gracias
onde ele usa a função handleSubmit?
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
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
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?
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?
Ei moço, uma sugestão de video: tutorial de como colocar os projetos no GitHub
Muito obrigado pela sugestão :D
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
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
Gostaria de ver como ficaria a paginação dessa listagem
Boa tarde isso mesmo seria top incluir a paginação
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
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 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
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
@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 video, o meu projeto não ta renderizando a pagina Form ja fiz de tudo
Tenta comparar com o código do repositório
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
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 TH-cam (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: th-cam.com/video/pmXfvd6Zqg4/w-d-xo.htmlsi=bXTmUX6ebqiXf_bN
ótimo vídeo amigo, só estou com problemas com a API, vc poderia me ajudar?
Opa, qual BO?
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
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
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
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
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
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?
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
Outra dúvida é sobre o const xxx`
(No meu todos esses comando tornam-se invalídos`;
O arquivo está com .JS?
no npm yarn não deu certo tentei corrigir não consegui, desistir kkk
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
Fala @will_dev, ao invés de adicionar os dados no banco de dados, estou tentando fazer com que os valores digitados no input retornem informações do DB para o Grid quando clicado em Buscar, mas estou quebrando a cabeça kkkkkk
Será que agente pode bater um papo sobre, para ver se consigo?
vai ter que criar um input e usar o "onChange=", depois criar um UseEffect pra "pra filtrar as buscar" exemplo ->
useEffect (()=>{
if ( ............................
...........CONTEUDO COM A LISTA "PUSH"
)
}, [busca])
falei de forma bem resumida pra vc ter uma noção de qual caminho seguir pra chegar no resultado que quer ....ja fiz um projeto assim...
opa
Um projeto desse eu consigo colocar no ar com Github Pages ?
o back teria que subir em outro lugar
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
Tem previsão pra disponibilizar o curso ?
Ainda não :/
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
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