Recriando Pipefy do zero (com drag n' drop) | Diego Fernandes
ฝัง
- เผยแพร่เมื่อ 12 ก.ย. 2024
- Faala dev, beleza?
Nesse vídeo eu vou recriar a interface do PIPEFY usando React :)
Se tiver alguma sugestão de interface para um próximo vídeo só deixar nos comentários :)
Vaaleu!
Link do arquivo de API: gist.github.co...
Código: github.com/Roc...
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Pra quem tá com erro em 33:27 quando ele começa a fazer o dnd, onde tem item: { type: 'CARD' }, coloca só type: 'CARD',
Salvou!!!!
Salvou muito mano, vlw!!
Pra reproduzir o que tá acontecendo no 42:10 você tem que colocar o item de novo mas deixar fora o type: 'CARD', deixando só o id dentro do item pq se colocar o type junto dá ruim no código👊
Basicamente no 42:10
const [{ isDragging }, dragRef] = useDrag({
type: 'CARD',
item: {id: data.id},
collect: monitor => ({
isDragging: monitor.isDragging(),
}),
});
Muito bom Diego! Tb quero mais “recriando” de web.
Faz um vídeo com a interface do Spotify.
Ele não faz por que ele cria isso no bootcamp, não só a interface como toda a lógica, tu recria o Spotify com as funcionalidades... Até o app mobile ele faz
@@TON-ys5lb 5.0 e acho que o 6.0 é o mesmo conteúdo
@@TON-ys5lb toop! Tu é aluno de qual?
Rennan Haro No bootcamp 5 tem o projeto (Plataforma antiga).... Na plataforma nova do 8 não tem essa parte, talvez eles juntem o conteúdo em um futuro.
@@pablomarques4772 acho que é dia 21 que vai juntar
A solução para o problema de mover um card pra uma lista vazia, talvez seria adicionar um card como se fosse um template, com aquele style com a borda dashed se a lista tivesse vazia, assim a lista não estaria vazia, vc teria um 'card' lá com a mesma lógica dos outros, apenas com o style diferente.
Vídeo muito bom! Aprendi muita coisa nova! Valeu Rocketseat pela contribuição na comunidade!
Boa solução.
Wardando aqui para implementar depois🤙
@@pjNoveNove conseguiu?
@@RafaelSantos-pp1iz cara que louco relembrar esse comentário shahsah. Na época eu estava fazendo um processo para trabalhar em uma "concorrente" do Pipefy, e hoje estou trabalhando nessa empresa, usando essa tecnologia de Dn'D.
Não lembro se cheguei a aplicar essa solução, mas uma coisa que notei usando outras bibliotecas é que quase sempre é necessário deixar um "min-height" nas listas para que, mesmo com elas estando vazias, seja possível mover um card para elas.
Uma biblioteca bem simples e poderosa é a react-beautiful-dnd. Com ela a gente acaba se preocupando menos com essas questões
@@pjNoveNove kkkk 1 ano dps ainda ajuda alguém. Massa dmais mano, muito obrigado por compartilhar
Ótima solução
Era uma das funções que eu mais queria aprender a fazer, obrigado Diego, como sempre....showwww!!! Continue trazendo mais conteúdo de React também, quem sabe uma integração agora do seu "pipefy" com React Native.
Que Deus abençoe sua vida e sua carreira Diego e todos da RocketSeat pela bondade de nos disponibilizar conteúdos gratuitos tão ricos em conhecimentos, somente com micro video aulas que vocês disponibilizam já é possível adquirir um conhecimento gigante, muito obrigado!
Por favor faça a parte 2, continuando funcionalidades front ou criando api para o mesmo. Seria SHOW
outro pedido: CLONANDO NETFLIX
Boa Diego!!! Para quem não vive só de native é muito bom ver uns vídeos específicos de web hahaha. Faça mais desses por favor!
Mano nada melhor que esse tipo de vídeo, com reactJS melhor ainda, é o que a galera usa mais. Esse tipo de vídeo na prática são SENSACIONAIS !!!!
Fazer esse lance do css usando o ”+” pra pegar a partir da segunda é legal, mas dá pra fazer com o :not(:first-child) fica show.
Uma outra ideia legal para manter só o card Draggable seria criar um elemento invisível com flex 1 na lista, ou seja, ele ocuparia a área restante do card (Talvez quando houvesse muitos itens teria que rever uma coisa ou outra), mas acho que funcionaria legal também.
Conteúdo show de bola, parabéns.
Mano, faz algum tempo que eu tentava aprender react e não conseguia, depois que conheci esse canal as coisas ficaram bem mais claras pra mim. Parabens pelo trabalho vey, otima didatica.
Como sempre o Diego com um material top !! Já chego apertando o joinha!
sinceramente, eu aprendo mais com os videos da rocketseat do que com cursos inteiros que tem pela internet
Obrigado pelo feedback Ricardo 😍💜
Estou embarcando no ReactJS agora, e estou aproveitando bem o conteúdo deles, ta show!!! os cara é fera kkkkk
O que falar de um material como este... simplesmente excelente!!!
Minha maior dificuldade foi que inventei de fazer com Typescript... mas valeu também pelo aprendizado!
Valeeeu pelo feedback, Alexandre! 💜💜
@Marcus Torres com toda certeza, só ts daqui pra frente. Fiz tb o clone do twitter com ts e já foi bem tranquilo 😁
podia fazer 1 video explicando como fazer os tests em js e manejar antes da produção
Muito obrigado, este conteúdo me ajudou muito a criar um componente na empresa que trabalho.
Como sempre a rocketseat mostra um novo conteúdo explicando de um jeito q todos entendem. Continuem assim que vcs só fazem a gente crescer!!!
Simplesmente um dos melhores canais de programação do TH-cam. Meus parabéns pelo trabalho!
21:04 "Provavelmente quando a gnt terminar essa estilizacao, tu vai olhar e vai falar: Poouuurraaa ficou massa" - Gaitei aqui hahahhaha
Esse vídeo entrou no meu top 5 vídeos mais úteis q já vi no TH-cam
Um dos melhores videos que ja vi !!!! Esse e o do electron MT bom continuem com esse quadro !!!!!!!! Amooo issso !
Show de bola, parabéns pelo video. Gostei muito. Deixo minha sugestão para recriar a interface da Netflix.
Sem dúvidas esse tipo de vídeo é o que se mais aprende
Sensacional! Parabéns pela iniciativa de tornar a programação acessível.
Opá Diego, faz mais videos assim recriando interfaces de sistemas Web, achei que vai ajudar muito os Devs a ver as diferenças de desenvolvimento de um APP e um Sistema Web.
Show Diego. Concordo com a galera. Um dos melhores canais que acessei até hoje. Parabéns !
Opa curto demais quando rola esses vídeos de recriação. Continue sempre
Parabéns Diego muito show, uso o pipefy e me interessou muito esse seu vídeo. Uma das maneiras de solucionar o problema de mover o card para um lista fazia é criando um card vazio como default. Fiz essa adaptação e ficou show.
Não sei se é necessário mas se for posso dar um pr no Git.
Cara, to tentando fazer isso mas não consigo :/
Parece que vc tá lendo minha mente kkkkk. Tudo que eu preciso vc tá ensinando a fazer. Te amooo
quem estiver com ficuldades ai no item tenta colocar assim:
const [{ isDragging }, dragRef] = useDrag({
type: "CARD",
item: { index },
collect: (monitor) => ({
isDragging: monitor.isDragging(),
}),
});
Fiz a lógica para alternar também entre as listas, a mesma tbm deixa inserir ao final caso inserir o 'drop' depois do ultimo card =) ficou muito bom
Cara, se puder compartilhar... tô precisando muito e não estou conseguindo sair do lugar.
Uma ideia de interface fantástica é a do seu próxprio SkyLab! Clean, chamativa e bonita...
muito bom, cara!
mostrar implementando algo similar é mto daora
Muito obrigado pelo tutorial Diego. Parabéns equipe Rocketseat !
Bom demais!!! Assisti o vídeo que nem senti o tempo passar :)
Massa, sempre bom entender como certas funcionalidades podem ser feitas.
Diego sensacional , vocês poderiam fazer um vídeo ou conteúdo sobre o Redux na prática iria ajudar bastante a galera. O básico claro!
Muito bom Diego!!!!!! Tb quero mais "recriando " de interface WEB.....
muito bom, inclusive que excelência de código. parabéns Diego
Top Diego. Por mais videos de interface web. Poderia fazer um Dashboard bem loko.
Kkkkkk amo dashboard, se vc se interessa procura no google "muz.li search" pois la tem ótimos dashboards
Já dou like antes de ver
Mal saiu e já assisti o vídeo inteiro 👨💻
Estava procurando um projeto assim faz um bom tempo... Parabens!!
29:24 ele começa a criar o bagui de arrastar ( drag n' drop )
👀 🤣
Legal cara, estou começando agora sobre programação de site, ajudaria muito se você continuasse com esta série!
Esse quadro de ui clone podia voltar, agrega muito!
Estudar isso durante o final de semana foi uma recompensa!
o maluco é brabo
Recriando web top de mais, traga mais vídeos vai ser bom de mais.
Melhor conteúdo da Net. Vlw Diego.
Didática excepcional👏🏽👏🏽
Interessante um vídeo com a interface do novo APP do Banco do Brasil! Algumas telas apenas e o menu.
Show demais, faz um video com a interface do messenger do facebook
Achei uma solucao bem simples para adicionar Cards em uma lista vazia.
Use a o useDrop no componente de List. A logica aqui é fazer com que se adicione o card no final da lista target Voce tem que fazer 3 coisas aqui: uma é testar se o index da lista do dragged é o mesmo index do target. Nesse caso, de um return. Isso garante que o dragged card va apenas para uma lista diferente. A segunda coisa é chamar um novo function dentro do contexto, assim como move. Nele, vai ter a logica que adiciona o item no final da lista to e remove o card na lista from. A terceira é atualizar os index semelhante ao useDrop do card
A outra coisa é adicionar uma validacao no useDrop do Card. Essa validacao deve testar se o index da lista from e to sao diferentes. Se serem diferentes, deem um return. Isso garante que o useDrop funcione apenas para ordenacao dentro da lista.
Dessa forma, a aplicacao vai funcionar da seguinte maneira: quando voce pegar o card, e mover ele para uma nova lista, o useDrop do Card nao vai executar ate que o useDrop do List execute, sendo que é no useDrop do list que faz com que o card va para a nova lista. A partir desse momento, o useDrop do Card passa a funcionar e voce pode adicionar o card em qualquer lugar da lista. Como tudo é feito na funcao hover, nao precisar dropar o card, entao nao muda nada para o usuario.
Vc chegou a fazer? Está no git?
Ótimo vídeo!!
Parabéns, Diego!
Muito Bom Diego. Obrigado por compartir seu conhecimento. Seus vídeo são ótimos
Tem que respeitar!! Parabéns...
Porque de utilizar a crase no export default createGlobalStyle`
(arquivo global.js)??? nao esta funcionando com a mesma....
o meu tbm nao ta funcionando... to travado nessa parte...
Já dar pra criar uma ferramentar de UI com isso.
Diego, faz um video recriando a Interface do Instagram.... seria mt top... criando a interface principal, tmj :>
Esse foi feito na semana Omnistack 7.0 Lucas! Acho que esse não vem para o yt.. rsrs. Fica de olho na semana omnistack 8 que deve ser algum desses Apps grandes novamente.
Só dar uma olhada, o video saiu tem poucos dias. E teve um antigo que teve ate o mobile, além do backend.
@@22h4wk eu vi, ali é só o feed... To falando o Instagram todo, porém já foi recriado na omnistack 7.0 :/
Diego um exemplo de como ficaria com o redux seria legal também pra ter uma ideia, mas o vídeo ficou show, vlw
Ótimo vídeo , como sempre kkk. Vocês perderiam fazer um de vídeo chamada p2p utilizando webrtc no react native . Não tem quase nada disso na internet , e o que tem está depreciado. Seria de uma ajuda imensurável!
A implementação do drag and drop inicia em 29:25
esse cara é brabo cê é louco.
OBRIGADO! 😍🤩🙏
Continua trazendo, só tem conteúdo produtivo no canal Rocket!
Cara, como que faz pra deixar a estilização colorida assim? Eu instalei o styled-components, porém o meu fica todo amarelo as strings do CSS
Faala Guilherme! Tem uma extensão chamada vscode-styled-components que resolve justamente isso 💜
Mano muito obrigado pela pergunta, você me salvou! Eu estava com um problema com a estilização da Label do Card q só consegui ver depois que eu coloquei essa extensão.
@@pedromartinsfalleiros7721 Haha tmj, maioria dos problemas que tenho eu encontro a solução nos comentários tbm haha
Sensacional o conteúdo!
Show Diego cara como eu faria para cada coluna da lista ter uma cor do label e ao mudar de coluna a cor desse label também mudar! muito obrigado por compartilhar conosco tanta conhecimento estou muito feliz e trabalhando para entrar no bootcamp!!!
Muito foda.
Só anotando para não esquecer de fazer depois a gambiarra:
Da para usar a mesma lógica que ele utilizou no 48:00 de pegar a metade do card para jogar em baixo e fazer o cálculo do eixo X, assim pode arrastar e soltar na list que desejar. É o melhor? Não, tem a questão da resolução, pegar e ter várias possibilidades, vai deixar o código sujo, porém ainda não vi nada sobre a lib.
Bom dia, essa gambiarra funcionou ? se sim como você fez ela ?
Context não substitui o redux mas para ser usando de forma isolada entre componentes internos é uma ótima solução.
Brabos
Pessoal, estou fazendo a minha versão do Pipefy, e para resolver o problema do card não ir para listas vazias usei a seguinte forma.
Na lista, eu verifico se tem cards, caso não tenha, eu crio um card com key e index = -1 (pois sei que nenhum outro card terá esses mesmos valores, isso faz desse card único), passo uma propriedade "invalid". Esse card é um card igual aos outros e usa o mesmo script, porém ele é um card invalido, e não pode usar as funções de um card normal, por isso, no useDrop, verifiquei se o index do card selecionado é maior ou igual a 0, fazendo o card invalido não possa ser solto em lugar nenhum, ou seja, ele sempre vai ficar na lista onde ele foi criado. No css, eu puxei a propriedade "invalid" e todo card com essa propriedade terá o css "resetado", background transparent e padding de 90%, para que ele fique com 90% da altura da lista.
Resultado final:
Quando uma lista fica vazia, é criado um card tranparent que não pode ser movido, quando um card normal passa por esse card invisivel, ele assume a posição desse card invisivel, a lista agora tem um card, e o card invisivel é removido.
Gostaria de saber se essa gambiarra ta de boa, ou não é muito bom fazer.
Para ver o resultado e o código:
github.com/RaphaelHSilvaDev/TaskApp
Não me parece ser uma "Gambiarra" e sim uma adaptação engenhosa, creio que há maneiras mais corretas de se fazer isso, mas, por hora ta valendo!, Tive uma ideia parecida hoje mais cedo, mas desisti, fui ver o teu e deu certo comigo. Porém estou recebendo esse erro: Expected to find a valid target. Fiz algumas pesquisas me parece ser um bug no react-dnd, o seu ainda funciona ?
@@guilhermealves6582 Então, eu tive o mesmo problema com esse erro, fui ousado e comentei fui até aonde está com o erro no código fonte do react-dnd e comentei ela, funcionou. Claro que não é a melhor coisa a se fazer, mas até estudar uma forma melhor, acho que ta valendo.
@@raphaeldasilva9548 Vou tentar arrumar isso aí pra gente, estou aprendendo react agora
Maravilha, um exemplo q poderia ajudar seria criar uma tela de login e como carregar o header com o usuário autenticado
Muito massa Diego, valeu!
Cara você é top, mano obrigado pelo conteudo
Cara que show!! Parabéns, eu achava que seria algo bem mais complexo
Simples e prático, não? 💜
@@rocketseat demais!!!
@@rocketseat e apanhei um pouco mas consegui entender melhor o funcionamento da biblioteca DnD e consegui fazer a funcionalidade de arrastar para a lista vazia ou em cima do espaço vazio 😬🚀
Muito bom, espero mais videos assim poderia criar a interface do Netflix
51:12 " [...] e ai agora ... provavelmente a sua cabeça explodiu né?!"
Ainda bem que você entende a gente! KKKKKKKKKKKKKKKKKKKKKKKKKKK porque eu pensei exatamente isso na hora desse if ai, mas deu pra entender, excelente!
seria legal um video recriando a interface do monday =)
Sonho
Show... você ...mandou bem no vídeo!
Valeu diego muito bom suas aulas.
Top demais faz mais isso!!!
hehe
Ficou foda demais!!!!!!!
Eu amei o vídeo, parabéns ganhou um seguidor
Incrivelmente incrível!
eu podia ve umas 10 horas do diego programando e falando pq é muito agradável, no próximo que tal o yotube?
🎉
Valeu diego!
Valeeu Alberto! 💜💜
muito bacana
Valeeeeu, Marlon! 💜 😍
muito bom! Parabéns :)
Parabens!!! Muito Show!!!
Há 2 tipos de desenvolvedor:
let center = height / 2;
||
let center = (bottom - top) / 2;
Kkkkkkkkkkk
o primeiro é melhor e mais rapido
Só o ouro! 👏👏👏👏👏👏
Massa!
Quero mais "Recriando" Web
Meu amigo, ótimo vídeo, parabéns!
Mas e no React Native, como se faz essa coisa toda? Melhor dizendo, a parte do Dnd.
Da uma luz ai!
Achei alguma coisa com PanResponder, mas não vi nenhum material em português.
Abraço e obrigado!
Acho que seria massa um novo vídeo de Drag n' Drop utilizando a react-beautiful-dnd
Sugestão anotadíssima, Luis! 💜 😉
@@rocketseat Eu apoio fortemente