Configurando o GitHub com o VS Code - Aprenda a Criar e Conectar Seus Projetos de Programação!

Fala mestre tranquilo o vídeo de hoje a gente vai estar falando aqui sobre guite né a gente vai explorar aqui o vídeo de novo visual Studio code que esse vídeo aqui vai ser basicamente a continuação né do que a gente veio fazendo aí até então sobre configuração de ambiente tá e a gente tá usando aqui o visual Studio code e a ideia desse vídeo não é ser um curso de Git né É aqui é basicamente a gente vai iniciar mostrar né como iniciante vai conseguir inicializar ali um repositório e já invercionando o seu projeto sem ter que se aprofundar muito e guite e obviamente isso é um conhecimento muito importante mas não é o que a gente vai estar abordando aqui é a parte de guite ali onde a gente inicia tudo entendendo sobre terminar alguém de comando e como tudo funciona tá a gente vai basicamente falar aqui o básico do básico de guite e de realização ali de comics Tá certo então nesse vídeo aqui né antes da gente partir para o conteúdo Eu gostaria de pedir que você é deixa um like aí no vídeo se inscreva no canal e também clica no Sininho né pro YouTube te manter sempre atualizado aí dos nossos conteúdos e também né eu vou deixar aí todos os links da Mestres né estão tudo aí na descrição para que você consiga seguir todos os nossos conteúdos e se manter sempre atualizado aí de tudo que a gente ia andar aprontando Beleza então aqui quem fala é o Jansen né E vamos aí para o nosso conteúdo [Música] Então eu estou aqui no site do Beach Hub tá aqui Hit hub. com né o site oficial deles e a gente vai tá trabalhando com Git né Git github né que são um complemento o outro né Git é a tecnologia ali que a gente usa para vercionar né para fazer todo o controle de diversão do nosso código certo então sempre que tiver alguma alteração alguém mexeu em alguma coisa tudo isso aí a gente faz através do Git é o Git que é responsabilizado por isso certo e aí nós temos um github que é um serviço né que é prestado aí hoje o dono a dona do que tiver a Microsoft né então a Microsoft fornece o serviço do github para a gente pegar o nosso código pressionado e até então usando o Git somente estaria só na nossa máquina certo e a gente vai levar essa esse versionamento para nuvem né então é uma forma ali um hubi um lugar onde a gente armazena as versões do nosso código e consegue acessar através do através aqui da web certo então a primeira coisa que a gente vai precisar aqui é de ter uma conta no github certo e ter o Git instalado na nossa máquina então aqui no site do github né que você clica em sai na up ou Create account criar conta né e ele vai te redirecionar aqui para criação da conta certo então aqui é um processo de criação de conta normal onde você vai entrar aqui com seus dados confirmar tudinho e vai ter aí uma conta no github criada certo e outra coisa que a gente vai precisar também é ter o Git instalado na nossa máquina tá então eu tô aqui numa aba anônima para porque na outra aba do navegador eu já tô logado né no mas aqui a gente pode pesquisar por download bit né ou algo do tipo e aqui a gente vai cair aqui no site Opa do guit-sm né que é aqui o site oficial do DIT certo então aqui no Git a gente vai escolher a versão que a gente precisa no caso do meu caso aqui é o Windows né mas aqui temos para todas as plataformas e ele vai baixar o executável a gente faz a instalação também sem segredo nenhum correto então depois disso tudo depois de criar a conta e instalar o Git localmente a gente já pode partir aí para o visual de code para o uso né do Git que primeiramente esse uso é iniciado na nossa máquina certo então eu consigo fazer versionamento eu consigo controlar a versão do que eu estou fazendo localmente né na minha máquina e aí depois entra OB que é basicamente pegar esse versionamento que tá na minha máquina e mandar para nuvem certo então com isso direito a gente já pode vir aqui para nossa parte do visual Studio code então aqui no nosso vs code né Nós temos aqui uma aba de controle de versão né sorte control E clicando aqui ele já na verdade aqui eu já estou no projeto que a gente desenvolveu nas aulas anteriores né onde a gente iniciou aqui um projeto um projeto node né chavescript fez a instalação aqui de alguns pacotes que na verdade foi só o excelente o Primer né enfim Aqui nós só temos esse arquivo JavaScript eu alterei ele para parar de dar erro né Por causa do s20 e nós temos aqui um projeto em JavaScript extremamente simples é extremamente básico então com esse projeto a gente vai fazer o versionamento dele tá então vindo aqui para essa aba de controle de versão o visual Studio code já percebe que nós não inicializamos né o repositório aqui no nosso projeto tá então esse projeto aqui ele não é um não tem um repositório Guito inicializado e no Git né tem a gente tem vários o vocabulário indígena tem várias palavras é a primeira que a gente está se deparando aqui é aí o repositório é então um repositório a gente pode pensar como um projeto o que seria um local onde o projeto vai estar armazenado né Então esse é um repositório então lá no Git a gente vai cria no github né a gente vai inicializando o repositórios diferentes a gente dá nome para esse repositório e a gente vêciona esses repositórios em locais diferentes tá então e um projeto por exemplo que tem o Frontier de um back and separado o front a gente vai ser um repositório que a gente vai ser outro repositório no Git certo então só que nessa aba de controle de versão a primeira coisa que a gente fez foi lá criar na nossa conta e agora eu vou clicar aqui e inicializar esse repositório certo então clicando em inicializar repositório ele vai pedir aí um nome né ou Na verdade nesse caso aqui ele tá perguntando o diretório porque no meu caso eu estou usando o workspace lá do do visual Studio né que são basicamente áreas de trabalho é nesse caso aqui essa área de trabalho minha ela está aberta na pasta YouTube né e por isso que ele tá pedindo aqui para mim escolher essa esse diretório para mim inicializar o Git eu vou dar um exemplo aqui tá onde eu não estou usando o workspace para ficar mais claro eu só vou abrir aqui uma pasta para a gente ver isso aqui melhor certo então eu estou aqui ó no meu repositório uma reportagem não no meu diretório eu criei que uma pasta chama ela de recordam e abrir e abrir ela que não vê as coisas aqui em arquivo né Abrir pasta e selecionei né esse direto essa parte conclusão passe diretório Enfim vocês estão entendendo aí a gente abriu né esse diretório aqui novo visual Studio Eu criei esse arquivo Windows JS só para ter alguma coisa e aqui no Git é a gente na parte de controle de versão né eu tenho aqui o botão de inicializar repositório e quando eu clico ele já vai inicializar para mim né E no caso lá do outros pensam ele perguntou em qual diretório eu queria utilizar Tá mas a diferença é essa eu quis realmente dar o exemplo aqui para não deixar nenhuma dúvida tá então no meu caso aqui desse workspace e novamente eu estou usando o works aqui porque eu já tenho uma configuração na minha máquina e essa configuração já seria o final ali que a gente iria chegar né após configurar muitas extensões e muitas coisas então para inicializar aqui uma configuração e mostrar para vocês o passo a passo de como configurar esse ambiente de desenvolvimento eu decidi criar um workspace e dentro desse outros preço iniciais sem nenhum extensão sem nada configurado e para a gente configurando aos poucos tá então quando tem essa diferença no walkspace é de um jeito e na no diretor no diretório solto é outro eu deixo isso claro aqui mostrando Dos dois jeitos tá então aqui eu vou selecionar o diretório do YouTube né que é onde eu criei o meu workspace e ele vai inicializar para mim esse repositório tá então se eu clicar aqui no explorador a gente pode ver que tudo ficou verde né E esse Verde aqui no Git significa que o meu arquivo ele está no estado que de antracked né que seria é um arquivo basicamente que o Git não está acionando ele não foi enviado ainda para o versionamento Então tudo né na pasta no dentro do diretório do YouTube não está acionado por isso que ele está verdinho assim tá então a primeira coisa que a gente vai analisar aqui é que nem sempre todos os diretórios eu vou querer tudo que está dentro né de um diretório de um projeto eu vou querer versionar tá E por que que a gente não vai querer versionar tudo na maioria das vezes é por conta de performance tá então se eu pegar aqui eu já deixei aqui aberto no meu explorador de arquivos esse mesmo É esse mesmo diretório que tá aberto aqui no visual atitude code a gente pode ver que ele criou que uma pasta oculta ponto Gui Onde fica as versões tudo local que a gente faz no Git tá tá aqui dentro dessa pasta e Aqui nós temos esse diretório que note models tá então ele né como eu disse lá nos vídeos onde a gente estava criando o projeto a noite modles é responsável por ter ali todos as dependências do meu projeto Então se o projeto depende ali de 20 pacotes 30 pacotes 40 50 vai ficar tudo armazenado dentro da noite moldes Então ela é um diretório que vai que tende a crescer muito é que ficar muito pesado tem muito arquivo muita coisa então E por que que a gente não menciona a noite moldes né porque o próprio pack de Jason é como eu expliquei nas aulas anteriores ele vai descrever todas as dependências do meu projeto e as versões dessas dependências então tendo impostos o meu pet Jason eu consigo instalar todas as dependências e em qualquer ambiente que eu quiser tá então com a norde mods vamos imaginar que por exemplo essa um projeto mediano ali à noite tem ali os seus 500 Megas de tamanho né e para a gente ficar pressionando todos esses arquivos ou se a gente clicar aqui no Git a gente pode ver que tem mais de 4 mil 4. 400 né arquivos andraca de né que são arquivos aí que não estão sendo olhar verificados pelo Git e enfim o número tende a crescer muito tá então o nosso projeto em si Ele só tem aqui seis arquivos né mas a node módulos tem 4.

400 e o projeto nosso não depende de praticamente nada é a gente só configurou aqui o s20 preeder tá então isso tende a crescer muito e fica inviável as coisas ficam muito lentas para verificar e a gente tem que ficar trafegando aí mais de o sei lá de 500 megas que a noite vai ter para o github o que também a gente vai estourar os limites de lá né não é uma coisa que a gente fica pensando Então a gente tem que ignorar algumas alguns arquivos que às vezes não interessa a gente subir no caso a noite Borges é um deles outro exemplo de arquivo de que a gente poderia ignorar pode ser por exemplo um arquivo de Henry né um arquivo de configuração de ambiente a gente não chegou nisso ainda mas seria um arquivo que contém informações críticas Chaves coisas relacionadas ao projeto a gente não quer compartilhar com ninguém então eu eu excluiria também esse arquivo e para excluir essas coisas né arquivos diretórios a gente tem um arquivo de configuração tá e o nome desse arquivo é Git e gnor né É bem intuitivo aí que são uns arquivos ou diretórios que eu quero ignorar ali do versionamento do Git então na raiz aqui do nosso projeto né tem que ser na raiz eu vou criar aqui um novo arquivo chamado Git na verdade é ponto Git não é ponto é Git ignora Na verdade tem um ponto que sim tô ficando maluco certo e com esse arquivo. t aqui dentro eu vou escrever o nome dos arquivos ou das do dos diretórios eu posso já usar readcax também para para que ele ignora né Ignore então se eu digitar aqui ó underline models e salvar a gente pode ver que a pasta novo de modo ele ficou aqui agora cinza né E esse cinza ele descreve ali um arquivo indica para gente que esse arquivo ou diretório não está sendo versionado tá então por exemplo se eu tenho aqui o noivo eu vou escrever aqui por exemplo index. js e sal o meu index.

js também ficou cinza né então ele não vai ser versionado e a gente só pode adicionar esses arquivos para serem ignorados aqui no Git gnor quando o arquivo está nesse estado verdinho né porque uma vez que houver sono que eu mando ele para nuvem que eu mando ele para o Git na verdade né que eu crio a versões desse arquivo eu não consigo mais ignorar ele porque já existe uma versão né então para ignorar eu teria que apagar esse arquivo apagar ele fazer o convite a gente vai falar de convite ainda mas seria apagar esse arquivo remover ele a versão desse arquivo e criar ele de novo e aí sim adicionar o nome dele aqui no Beach Tá mas isso aqui é um é um caso um pouco mais complicado uma coisa um pouco mais avançada Tá certo então aqui no Git ignor eu vou deixar só o meu index. js não só o noivo né para ser ignorado e aqui sobrou aqui esses nossos sete arquivos né que agora o Git gnor também ele vai selecionado né Tem nós temos aqui esse sete arquivos que serão versionados tá então com isso feito aqui agora a gente entra na questão do convite né O que que é um comiti o convite se a gente for traduzir essa palavra literalmente a gente não vai chegar no significado interessante né então é basicamente a gente pega essa palavra comente e crie dar o significado para ela nesse contexto que digite tá então o convite aqui vai ser basicamente um envio de alterações tá então eu alterei x arquivos e eu quero enviar essa alteração eu quero salvar essas alterações eu faço um convite ele tem um nome esse convite ele tem uma descrição né ele tem um responsável né por ele então é através dos convites que o guit consegue criar todo o histórico ali de alterações de quem alterou aquele arquivo qual hora foi Qual o e-mail daquela pessoa que alterou enfim várias informações da alteração né Quais linhas foram alteradas né o que que tinha antes o que que tinha depois então é tudo isso fica armazenado no convite tá então não comente aqui ele tá pedindo uma mensagem né então como mensagem que eu vou dar para esse convite eu vou digitar aqui é primeira primeiro né primeiro primeiro comente certo e quando eu faço isso né quando eu dou uma mensagem para o convite eu posso clicar aqui em convite e ele vai criar aqui é esse convite ele vai criar essa versão localmente na minha máquina tá então feito isso se a gente volta aqui no nosso explorador de arquivos né os arquivos que estavam verdes ele já não estão mais né que essa parte do YouTube tá porque eu acredito que por conta do workspace tá ou deixa eu dar um Reload aqui no ouvir as code e sumiu o verde em Lara então era isso mesmo era bug Mas enfim fizemos o convite tá foi feita e as alterações e agora se por exemplo eu vier aqui no Git Ignore e adicionar aqui alguma coisa e salvar a gente pode ver que agora o arquivo ele ficou azul né que agora esse arquivo ele está modificado tá então houve uma mudança né Essa mudança nesse arquivo e se a gente vir aqui no controle de versão eu posso ver né o que que tinha antes o que que tinha depois qual alteração foi né e ele vai ficar aqui marcado como modificado E aí quando eu fizer um novo convite essa modificação vai ser salva também tá então no caso que eu vou descartar né a gente tem esse esse cone aqui descarte Chains para descartar essa alteração né Eu não vou mexer nela aqui agora e Aqui nós temos a opção de publicar né Essa Branch a questão de branches a gente não vai falar sobre isso agora tá até porque é um negócio complicado mas a gente pode imaginar como caminhos diferentes ou é que versões diferentes começa a ficar confuso mas a gente pode pensar em linhagens diferentes de alteração então por exemplo nós temos aqui esse meu esse meu projeto nesse meu repositório que tá nesse estado atual da com essas alterações e se eu criar uma brecht nova eu vou basicamente copiar esse arquivo meu que está no estado atual né e vou começar a fazer alteração nele então a gente teria duas linhagens aí de alterações né duas branches diferentes até dois traduzindo Branch né que seria um Galhos eu teria dois Galhos diferentes aí eu duas linhas diferentes de alteração tá então se eu vier aqui no meu browser a gente pode pesquisar aqui por get Brandt e pegar uma imagem aqui que vai ficar um pouco mais intuitivo Olha só nós temos aqui uma brecha essa brecha azul claro né que seria um ambiente principal e a partir dela eu posso criar brecht Diferentes né com E aí essas brechas teriam alterações diferentes tá então essa ideia de blanches é isso tá e aqui tá falando para mim publicar essa Branch que seria Abranches principal né que ele dá o nome de Master aqui no no Git né ele a primeira branche que ele cria é abranche master é a principal e eu posso clicar aqui em publicar tá então clicando em publicar ele vai falar aqui que eu preciso primeiramente fazer aqui um login tá então eu vou permitir o visual Studio code a fazer login na minha conta na conta do caso aqui do github tá então o meu Olha só o meu visual ele já vem com essa conexão aí com github tá E aí sempre que eu tento fazer um convite ele já tenta automaticamente fazer um login na minha conta do github tá então se eu clicar aqui em permitir ele vai abrir o meu navegador tá então eu vou voltar aqui no navegador na parte no caso aqui na no navegador que já está logado né que eu já estou na minha conta essa conta que tá aberta aqui é o meu perfil no hit Rubi você criou o seu aí né No início do vídeo lá Eu falei para você configurar tá então então aqui no visual eu vou clicar aqui permitir tá então ele vai abrir um site externo que é o site ali do para a gente fazer o login né então eu clico em Abrir como eu já tinha feito o login nesse browser aqui ele já vai pedir para abrir de volta o visual para que seja aí aplicado o nosso esse login tá então aqui eu clico em Open de novo é um fluxo um pouco doido mas a gente vai conseguir fazer e feito isso ele já vai falar aqui ó se eu quero publicar né esse repositório essa Branch esse projeto como um repositório privado ou como repositório público Tá eu vou clicar aqui em publicar um repositório público tá e feito isso agora se eu ir lá no meu perfil tá no github eu vou encontrar esse repositório bom eu estou aqui então no meu perfil né no meu github tá e eu pesquisei aqui por YouTube até para ocultar os outros se fossem privados que eu tenho aqui e aqui eu já tenho né esse repositório aqui YouTube que foi criado né por aquele convite que eu fiz Ele está ele está marcando aqui três horas atrás mas esse atualizado às 3 horas atrás foi porque quando eu iniciei né o quando eu criei aquele diretório que eu comecei a alterar ele foi Já faz um tempinho tá mas se eu clicar aqui em YouTube no repositório YouTube então dá para ver que aqui em perfil no perfil nós temos aqui aba repositórios né E clicando você vai ter a sua lista de repositórios e vai conseguir clicar neles e acessar tá Então nesse repositório YouTube nós temos aqui o primeiro convite feito a 9 minutos atrás tá foi quando a gente clicou a gente deu a mensagem ali para aquele convite e realizou ele tá então se eu voltar aqui no nosso visual Studio coaching e agora eu vou fazer outra alteração aqui por exemplo no index. js eu vou alterar esse console log colocar um Hello aqui tá se eu salvo a gente clica aqui na aba né de controle de versão tem aqui uma alteração né no arquivo indexpoint JS e na mensagem que eu vou falar que é alterando console ponto log tá e vou fazer o convite fazendo o convite né ele fez o convite localmente né tá na minha máquina agora eu clicar em sincronizar as alterações ele vai mandar essas alterações para o github tá então se eu voltar aqui no meu github tá e atualizar isso aqui tem aqui agora alterando consolog realizado agora que foi esse o convite que eu acabei de fazer tá então isso aqui tá na nuvem tá no servidores aí do github que Independente se você trocar de máquina ou não você vai conseguir clonar né esse repositório e isso pode ser tópico para outro vídeo né onde eu clono esse repositório pego toda todo o projeto ali os arquivos que estão sendo direcionados puxa para minha máquina instala as dependências né através aqui do Pet Jason né eu sei quais dependências tem né que é onde ele vai criar a noite módulos e eu consegui executar esse meu projeto em outra máquina tá então é dessa forma que times grandes times remotos trabalham né todo mundo sincroniza as alterações em um servidor e sempre que as pessoas alteram outras pessoas conseguem buscar as alterações e todo o código de todo mundo vai ficar sempre aí o mais atualizado possível e tudo vai ficar com ver né convencionamento que é o mais importante Tá certo então voltando aqui né na verdade é aqui a gente finaliza a questão de repositório tá é de convites Enfim tudo a gente conseguiu fazer tudo através do visual Studio code e agora eu vou fazer um exemplo aqui do contrário da criação do repositório no gifthub e a sincronização é o uso desse repositório lá no visual Studio code tá então eu tenho se a gente vem aqui na aba de repositórios né do nosso perfil nós temos aqui esse botão novo né para criar um novo repositório então se eu clicar aqui eu vou conseguir criar um novo repositório eu vou dar um nome para esse repositório eu vou chamar de YouTube Tá difícil YouTube 2 nome bem né vai ser público eu não vou colocar descrição Esse redmi também eu não vou adicionar nada não adicionar nada disso vou clicar aqui em criar repositório tá e ele vai criar esse repositório para mim aqui eu tenho vários comandos né do Git e isso aqui é o que eu falei lá no início né que a gente usa o glitter primariamente ele é um commandline interface ele é uma interface de comandos do terminal Tá mas o visual Studio que hoje já tem essa integração ou na verdade ele usa ele dá para a gente já interface gráfica e usa essa se é line essa esse terminal aí do Git para fazer aí a execução dos Comandos então ele meio que encapsula toda a parte de comando e a gente só fica focado ali mesmo no código Tá certo então o que que eu posso fazer aqui né nesse caso aqui eu vou estar fazendo uso aqui do Nós temos duas opções para fazer a parte ali de autenticação que também é uma coisa um pouco mais complicada aí é a gente se preocuparia mais com isso no caso de repositórios privados tá que mas no caso repor storie público qualquer pessoa acessa né Ele é público então né como é público não precisa de autenticação então a gente não precisa desses problemas não vai ter tanto problema como a gente teria Num caso privado que a gente teria autenticar a nossa máquina tá mas enfim para usar como esse repositório ele é público a gente clica que a gente vai usar aquela opção https tá E com essa opção https ele dá para a gente um link tá esse link é o link para acessar que referente ao repositório que eu acabei de criar YouTube 2 então ponto com barra de uma série que é o meu perfil barra YouTube 2.