00:00:00Olá a todos, aqui é Scott, o CEO da GitButler.
00:00:02Hoje vou mostrar alguns dos recursos sensacionais do GitButler e dar a vocês
00:00:05uma visão geral do que este cliente Git é capaz de fazer.
00:00:07Eu tenho um projeto de exemplo aqui. É um clone do Twitter ou X. Eu o chamo de Y.
00:00:12Vou adicionar algumas edições que já fiz e vamos ver
00:00:16como criar commits, criar branches, criar branches paralelos e como
00:00:20criar branches empilhados. Se eu editar alguns arquivos, vocês verão algo
00:00:25similar à saída de um "git status", mostrando quais arquivos foram modificados.
00:00:30O que você quer fazer com eles? Como quer commitá-los? Aqui podemos inspecioná-los.
00:00:34Posso ver meu CSS da aplicação, minha barra lateral, meu index, certo? Fiz algumas mudanças pequenas.
00:00:39E o que eu quero fazer é criar um novo branch e commitar essas mudanças nele.
00:00:45Existem algumas formas diferentes de fazer isso. Posso clicar em "commit to new branch"
00:00:49ou posso criar explicitamente um novo branch aqui, e farei um branch independente
00:00:54em vez de um branch dependente. Falaremos de empilhamento em um segundo.
00:00:57Você dá um nome, cria o branch e agora há várias coisas que pode fazer. Pode
00:01:03apenas commitar algumas coisas, certo? Posso commitar este arquivo application.css
00:01:08arrastando-o para a raia e criando um commit, ou posso iniciar um commit por aqui.
00:01:15Você pode fazer uma mensagem de commit curta neste campo menor ou expandi-lo
00:01:19e escrever uma mensagem de commit longa e detalhada. Vamos manter a simplicidade.
00:01:27A outra coisa que posso fazer é decidir o que entra neste commit. Tenho três arquivos ao lado.
00:01:34Eu posso não apenas dizer que não quero um arquivo específico, mas também selecionar linhas específicas.
00:01:39Mas, por hora, vamos commitar todas as mudanças. Ou melhor, vamos fazer
00:01:44dois commits diferentes. Não quero as coisas da barra lateral neste aqui. Farei "front-end fixes"
00:01:48e depois outro commit chamado "sidebar fixes". Agora tenho dois commits neste novo branch.
00:01:55Sou um pouco preguiçoso, então vou usar o Claude Code para fazer esse trabalho para mim. Vou mudar o tema
00:01:59de azul para vermelho e depois veremos como adicionar um novo branch separado apenas com isso,
00:02:04independente das minhas correções de front-end. Parece que está pronto. Assim era o site antes.
00:02:09Um tipo de Twitterzinho. Se eu aplicar as mudanças, agora tenho um belo tema vermelho
00:02:14em tudo, e minhas mudanças de front-end estão prontas. E vejam que estes são branches
00:02:18independentes. Se eu desaplicar a pilha de "front-end fixes", ainda continua vermelho, mas tenho isso.
00:02:25Foi o que fiz aqui. E posso colocar de volta. E agora sumiu. Ou a mesma coisa:
00:02:34posso desaplicar o tema de cor vermelha e ele deixa de ser vermelho. Vamos colocar de volta.
00:02:43Agora temos dois branches diferentes. O legal disso é que, se eu enviar para o GitHub,
00:02:48essas mudanças ficam separadas uma da outra. Mas ambas estão aplicadas ao mesmo tempo.
00:02:52É como os branches do Git, exceto que você pode trabalhar em mais de um simultaneamente.
00:02:57Se eu continuar trabalhando em algo na barra lateral, eu verei aqui. E posso
00:03:04fazer várias coisas. Posso arrastar para cá e até emendar este commit, se eu quiser.
00:03:10Eu também poderia commitar como um novo commit naquele branch. Agora temos esses dois
00:03:14branches paralelos. Vamos ver uma forma diferente de fazer isso. O que poderíamos ter feito
00:03:18é, digamos que o tema vermelho dependa das mudanças que fizemos no front-end.
00:03:24Então eu realmente quero mesclar o front-end antes de olhar para o tema vermelho,
00:03:29ou mesclar tudo junto. Vamos desfazer este commit. Vamos removê-lo e fazer como branch empilhado.
00:03:37Vamos descommitar. Desaplicar a pilha. Agora, vamos adicionar um novo branch dependente aqui.
00:03:42Você clica em criar novo branch e adiciona um dependente. Outra forma de fazer
00:03:47é esta: você diz para criar um branch dependente aqui e adiciona o "front-end fixes" empilhado.
00:03:51Vamos chamar de "sc_red_theme". Agora você pode ver que esses branches estão empilhados.
00:03:58E agora posso pegar isso e commitar neste aqui. Com esses branches empilhados, você pode dar push.
00:04:06É muito fácil enviá-los. Se você tiver a integração com o GitHub configurada, também pode
00:04:11criar um Pull Request. Se eu criar um PR chamado "red theme" aqui, sendo este um
00:04:16branch empilhado, ele vai inserir um rodapé na descrição do PR dizendo
00:04:20que este branch é dependente de outro branch que ele tem como alvo. E você terá que
00:04:25ou mesclar tudo junto, ou o "front-end fixes" antes do "red theme". É uma
00:04:30maneira muito boa de lidar com branches empilhados. Olhando para este PR agora, ele
00:04:34conecta ambos em uma pilha. Esta é a parte dois da pilha e esta é a parte um,
00:04:39e elas dependem uma da outra. Outra coisa legal é o que chamamos de
00:04:43atribuir a branches. Neste caso, tenho duas raias e três branches. Dois estão
00:04:48empilhados e um é independente. Quando começo a fazer mudanças, o que posso fazer é
00:04:54atribuir trechos (hunks). Posso atribuir mudanças a um branch específico e continuar trabalhando.
00:05:00É como se cada raia tivesse sua própria área de staging independente. Se você usa o "git add"
00:05:05para preparar mudanças no Git, isso é similar, mas com múltiplas áreas de staging independentes.
00:05:09Vamos testar. Vou adicionar um novo recurso na página de admin, uma pequena seção.
00:05:14Vou colocá-la em seu próprio branch, no mesmo diretório de trabalho, em um
00:05:19novo branch que não é empilhado, é algo independente, e posso abrir um PR só com essas mudanças.
00:05:24Ok, este é o painel de admin antes. Fiz algumas mudanças, adicionei alguns cadastros recentes.
00:05:31Tenho essas duas mudanças aqui e o que eu quero é atribuí-las a esta raia.
00:05:37Se eu fizer mais mudanças, elas irão para "não atribuídas" se ele não conseguir identificar.
00:05:43Se for nos mesmos trechos, ele manterá automaticamente na raia atribuída.
00:05:47Vamos mudar o controller de admin aqui. Apenas um comentário bobo, mas vamos
00:05:55ver o que acontece. Como o controller de admin já estava atribuído a esta raia,
00:06:00não preciso ficar preparando as mudanças. Ele entende que isso faz parte daquela mudança
00:06:05e coloca lá. Vamos criar um novo commit nisso. Vou iniciar o commit novamente.
00:06:10Posso expandir e fazer uma mensagem bem feita. Também posso usar IA para
00:06:15gerar mensagens de commit se quiser um ponto de partida, e depois você pode editar.
00:06:19Ela analisa as diferenças que você fez e te dá pelo menos um rascunho. Certo,
00:06:23agora temos um commit na página de admin de novos cadastros. Temos esse branch empilhado
00:06:27aqui de lado e, novamente, posso dar push e criar um PR disso independentemente. E se eu
00:06:31fizer isso e for conferir o PR, o que veremos é que, embora todas essas mudanças
00:06:37estejam no meu diretório de trabalho ao mesmo tempo, elas foram separadas em branches
00:06:42diferentes. Assim, posso entrar e ver apenas as coisas do admin. Ele claramente só editou
00:06:48as páginas de admin e manteve isso em seu próprio branch e commit, sem misturar com
00:06:55todo o resto do trabalho no meu diretório. Eles ficam em branches separados.
00:06:58Essa é a vantagem de trabalhar com branches paralelos e empilhados no GitButler.
00:07:02Existem muitas coisas que seriam bem difíceis no Git normal e vou mostrar algumas.
00:07:06Para começar, podemos mover commits de um branch para outro. Se eu quisesse pegar
00:07:11este commit de "new signups" e movê-lo para o commit do tema vermelho,
00:07:15basta arrastar e soltar, e então posso me livrar desta pilha. Agora meus commits
00:07:20estão aqui. Se eu quiser esmagar (squash) commits, posso arrastá-lo não apenas
00:07:26para o que está abaixo, mas para qualquer outro commit na pilha. Posso pegar as coisas
00:07:30do admin e levar para o "sidebar fixes" ou até mover, certo? Posso
00:07:36descer mais na pilha ou esmagar em outro commit. Agora vocês podem ver
00:07:41que as coisas de admin também estão no "sidebar fixes". Também podemos fazer o oposto: dividir
00:07:47um commit. Fazemos isso adicionando um commit vazio e movendo mudanças para ele.
00:07:52Posso adicionar um commit vazio em qualquer lugar da pilha, neste caso, abaixo. Posso escrever a
00:07:58mensagem agora ou mover os arquivos antes. Vamos dar uma olhada nestes arquivos.
00:08:02Temos o controller de admin e a barra lateral. Vamos pegar este index de admin e arrastá-lo
00:08:08para este do meio. Agora este commit tem apenas o index de admin; o "sidebar fixes"
00:08:13continua com os outros arquivos. O controller de admin e a barra lateral. Posso mover apenas trechos.
00:08:20Agora este tem parte das correções da barra lateral e este aqui tem a outra parte
00:08:30das correções. E agora, se eu quiser, posso mudar a mensagem do commit depois.
00:08:34Isso nos leva a outra coisa: editar mensagens de commit é muito fácil, certo? Além de
00:08:41apenas mudar a ordem, esmagar ou dividir, eu posso voltar
00:08:46e dizer que quero mudar isso para "parte dois". E ele fará o rebase de todos os commits acima.
00:08:53Outra coisa interessante é editar commits no lugar, e há formas de fazer isso bem rápido.
00:08:57Digamos que alguém me deu um feedback sugerindo que, em vez de "margin top 0", fosse
00:09:0110 pixels ou algo assim. Como editamos um commit que não está apenas
00:09:06quatro posições atrás, mas em outra pilha? Com o GitButler, isso é muito, muito fácil.
00:09:13Vamos lá fazer essa mudança. Está aqui, vamos mudar para 10 pixels.
00:09:16CSS inline é o que há. Esta é a mudança que fiz aqui. Ela está bloqueada
00:09:23porque estamos editando um trecho que já foi editado, então ela tem que ir para
00:09:28algum lugar deste branch. Não poderíamos colocar em um branch paralelo separado.
00:09:32Mas como fazemos? O jeito mais fácil é apenas pegar este arquivo e
00:09:39arrastá-lo para este commit. E agora, se olharmos este commit, os 10 pixels estão
00:09:46lá, nós o modificamos e fizemos o rebase de todos os outros commits em cima dele.
00:09:51A outra forma, que já vimos, é commitar isso em um commit temporário
00:09:55e então esmagar (squash) neste aqui. Isso essencialmente faz
00:10:02a mesma coisa. Se olharmos de novo, a margem agora é de 10 pixels.
00:10:07E a última maneira interessante de fazer isso é o que chamamos de modo de edição.
00:10:12Digamos que não tínhamos feito nada aqui. Ainda temos os zero pixels e queremos editar.
00:10:20Podemos ir no commit em si e clicar em "edit commit".
00:10:25Ao fazer isso, algo interessante acontece. É como o Git fazendo um "detached head checkout",
00:10:30se você já fez isso. Ele basicamente carrega aquele commit naquele estado.
00:10:36Você edita como quiser e, ao sair, ele fará o rebase de tudo o mais por cima. Vamos mudar de novo.
00:10:39Ele vê que foi modificado, você salvou o arquivo, e então salvamos e saímos. Novamente,
00:10:46ele refaz o rebase de tudo. Podemos ver que nossa mudança está salva lá. Você pode
00:10:52editar um commit diretamente, fazer a mudança e emendá-lo, ou fazer a mudança,
00:10:57commitar e esmagar. Há muitas formas de manipular as mudanças no GitButler.
00:11:01E a última coisa que vou mostrar é o histórico de operações.
00:11:05Isso é algo muito difícil de fazer no Git, se você já tentou usar o reflog.
00:11:10Acho que todo mundo tem um pouco de medo disso, mas tudo o que você faz no GitButler
00:11:15fica salvo em um log de operações e você pode ver sua linha do tempo e voltar
00:11:21a qualquer ponto do passado. É este botão aqui; vemos nosso histórico de operações,
00:11:26com todas as coisas que fizemos durante a sessão. E eu posso voltar
00:11:30no tempo para qualquer momento. Se eu quisesse voltar para antes de começar
00:11:37a mexer naqueles 10 pixels, eu poderia vir aqui e ver como estava a mudança
00:11:42antes de eu ter feito qualquer coisa. Ou posso até voltar
00:11:47para o início desta sessão que tivemos. O que ele não desfaz é o que foi
00:11:52enviado para o GitHub. Aqui vejo estes commits enviados, eles aparecem como upstream,
00:11:56mas estou voltando para antes de eu ter commitado absolutamente qualquer coisa. E eu
00:12:01posso até remover este branch e recomeçar do zero, mas não importa o que você faça,
00:12:05até esse desfazer eu posso desfazer. Se eu vier aqui e reverter o snapshot da reversão,
00:12:11voltamos para onde estávamos. Podemos sempre viajar no tempo para qualquer
00:12:16ponto. É ótimo, você nunca precisa ter medo de nenhuma dessas ações.
00:12:22Se entrar em um estado estranho ou quiser voltar para como estava há 10 minutos,
00:12:26é só abrir a linha do tempo, clicar em reverter e pronto. Bem, isso foi uma visão rápida
00:12:32do GitButler: rebaser, editor de commits, branches paralelos e empilhados,
00:12:36tudo fácil e sem outras ferramentas. Baixe agora, conte no Discord o que achou,
00:12:41e aproveite.