O que eu faço com isso agora? – Introdução ao mundo dos códigos

Olá!
Dessa vez irei explicar um pouco melhor como podemos usar as ferramentas apresentadas no primeiro post da introdução,  então talvez seja interessante deixar os dois posts abertos em abas diferentes para ir consultando o anterior, e também vou considerar que você instalou tudo descrito no primeiro. E iremos abordar os seguintes tópicos

Quero começar um novo projeto (Com o AngularCli)

Criando/baixando um repositório no GitHub

Mantendo o código atualizado (usando o git) 

“VIM” a tela dos pesadelos, e como sair dela

Então a partir do próximo post eu começo a compartilhar código de teste (e páginas para testar) via GitHub e conseguimos colocar a mão na massa.
Vamos ao post:

Quero começar um novo projeto (Com o AngularCli)

Afinal, precisamos começar um projeto em algum momento não é mesmo? rs
Se você instalou o Git e o Node, isso quer dizer que você já tem o NPM na máquina e vai facilitar bastante nossa vida.

Primeiro vamos instalar o AngularCli através do NPM, basta executar o seguinte comando no seu terminal npm install -g @angular/cli (para executar o código, basta colar/digitar ele no terminal e pressionar Enter,  agora para facilitar daqui pra frente, sempre que tivermos um comando para executar no terminal, ele virá em itálico e negrito como agora)

Antes de criarmos a pasta do projeto precisamos aprender a navegar nela dentro do nosso terminal, certo?

Navegando entre as pastas
Um exemplo de navegação entre pastas via terminal

Na imagem acima vocês podem perceber que temos as mensagens do terminal bem coloridas e diferenciadas, enquanto o que eu digito é apenas em branco. e sempre que eu executar um comando, o terminal vai me dar um retorno.

Na imagem eu executei o comando cd nome da pasta, o  “cd” nada mais é do que eu dizendo para o terminal “quero ir para a pasta que vou falar”, então quando eu disse cd /c eu acessei a pasta “C:” (importante, o terminal que eu uso é o GitBash, que simula o linux dentro do meu Windows, então a pasta “C:” é uma pasta como qualquer outra, por isso chamo ela apenas como “\c”)

Dentro da pasta C eu já sei o que quero acessar, minha pasta “perdidonoteste” que está dentro da pasta “projetos”, mas ao invés de executar os comandos cd projetos e cd perdidonoteste eu preferi executar em apenas uma linha cd projetos / perdidonoteste explicando pro terminal “entra na pasta projetos, mas logo em seguida (/) já acessa a perdido no teste” e vocês podem ver que foi isso que ocorreu no retorno do terminal. 🙂

Com o AngularCli instalado, e sabendo navegar entre as pastas, basta ir para a pasta em que você quiser criar o projeto e executar o seguinte comando no terminal ng new meu-projeto , o “meu-projeto” é o nome que você quer dar pro projeto.

Depois de executar esses comando o seu projeto foi criado, sim…apenas isso! O AngularCli já cria automaticamente o repositório, o código inicial, arquivo de dependência e ainda instala as dependências… (Eu disse que era basicamente um cheat)

Criando o projeto com AngularCli
Eu disse que o AngularCli é um cheat

 

E agora que estamos dentro da sua pasta do projeto nós podemos:

  • Subir o servidor de desenvolvimento com npm start
    • Ao subir o servidor o terminal vai te informar o endereço do projeto (localhost:4200) se você abrir esse endereço vai poder ver ‘seu projeto” abrindo no navegador, pode alterar o numero da porta que o projeto está, mas não vamos nos preocupar com isso agora, vamos continuar usando a default mesmo.

ou:

  • Executar testes de unidade com npm test
  • Executar os testes e2e com npm run e2e

Os comando acima são independentes um do outro (pelo menos hoje em dia), então você pode executar eles em qualquer ordem, ou não executar um deles.

Se quiser testar, pode ficar a vontade também. O AngularCli criou alguns “testes” (eles não testam nada na verdade, mas você pode rodar eles), basta executar qualquer um dos comandos citados acima (se quiser cancelar um deles basta pressionar Ctrl+C, isso é útil caso alguma coisa trave e não de nenhum retorno também).

E se você reparar bem o comando do E2E é o único que tem um “run” no meio, isso é por que as duas primeiras tasks são default do npm, já os testes E2E é uma task dentro do projeto, então você avisa pro npm que você quer que rode aquele processo.  Quanto as outras tasks o NPM já entende o que elas são e pra que elas servem, então não precisa avisar com o “run”,

E agora você pode abrir seu projeto via editor de código OU se você está usando o VSCode pode simplesmente executar um code . (se atentar que tem um espaço antes do ponto), com esse comando o terminal já vai abrir o editor de código, com o projeto aberto, economizando um tempo.

Criando/baixando um repositório no GitHub

Mas nós não queremos apenas criar o projeto, queremos gerenciar as versões do código, baixar as edições que os colegas fizeram no projeto, e também enviar  nosso código pra lá, ou as vezes baixar um código já existente.
Então vamos usar um servidor de repositórios, que nesse caso será o GitHub.

Para criar o projeto não tem segredo nenhum, basta logar, clicar no “+” que tem no canto superior direto, clicar em “new repository”  e dar um nome pro seu repositório, lembrando que pra criar um repositório privado precisa pagar e que se você utilizou o AngularCli ele também já criou o ReadMe

Com isso o repositório é criado, mas sem conteúdo, aparecem algumas instruções/opções na tela e nós iremos seguir uma delas, que é “pushar” o nosso projeto (…or push an existing repository from the command line), existem duas linhas de comando abaixo dessa descrição, você precisa executar cada uma em ordem no seu terminal.

As linhas são:

git remote add origin https://github.com/SeuUsuário/Nome-criado-pro-projeto.git
git push -u origin master

Uma breve explicação sobre as duas linhas (pode parecer um pouco complexo agora, mas futuramente fica mais facil de entender):

Na primeira linha estamos adicionando nosso projeto na URL citada na linha (algo como “ei git, eu tenho essa url remota pra adicionar o projeto, já prepara lá que vou subir o o projeto…e quero dar o nome de ‘origin’ pra ele ” ( sim o comando poderia ser git remote add batatinhaFrita https://github.com/SeuUsuário/Nome-criado-pro-projeto.git mas por default colocamos o nome de ‘origin’, é uma boa prática que vale a pena manter)
Na segunda linha nós estamos efetivamente enviando o código (“Ei git, envia o código do projeto faz um push  no repositório origin, na branch com nome de “master”)

Após executar os dois comandos, se você atualizar a página do github, vai ver que seu projeto está lindo e maravilhoso 🙂

 

Após criar repositório
Após criar repositório

Na imagem acima tem um detalhe que gostaria de chamar a atenção, que é o link do repositório, com esse link qualquer pessoa pode fazer o download do repositório  mas apenas você pode enviar commits/atualizações para ele, estou deixando o link disponível para vocês a critério de curiosidade, pois esse repositório não será  utilizado corretamente, só estou fazendo alguns testes lá.

Mantendo o código atualizado (usando o git) 

Termo útil que iremos utilizar com frequência : “Commit”, é quando criamos um novo ponto de versionamento no git. São esses commits que podemos “enviar” ou “baixar” no repositório

Como Clonar o projeto?
Digamos que ao invés de criar seu projeto você decidiu fazer o download de um projeto já existente (por exemplo usando esse link), o processo é bem simples também, começamos com um git clone url (trocamos a ‘url’ pela url do repositório), isso vai copiar o projeto, mas mesmo com o projeto inteiro baixado não estamos com ele pronto, pois apesar das dependências já estarem no código, elas não estão instaladas no projeto, então só precisamos instalar elas com um npm install , inclusive esse comando tem umas utilidades bem legais que devemos abordar em outro post 🙂

Certo, agora estamos com o código na máquina (projeto que você criou ou clonou)!

Mas queremos manter ele atualizado com edições futuras no código, sejam suas ou de seus colegas.

Pra baixar as atualizações que fizeram no código basta utilizar o comando git pull isso vai atualizar o código que você tem na máquina com as alterações que seus colegas subiram para o repositório.

E para você criar uma versão do código no GIT, ou seja commitar (enviar sua edição do código pra uma branch) precisamos seguir alguns passos:

1º  Adicionar suas edições com o comando git add  -A (esse comando adiciona tudo, o “A” é de ALL, existem outros comandos para adicionar as edições, mas vamos manter apenas essa por enquanto)

Git Add
Um exemplo do git add e git status

2º “Commitar” as alterações adicionadas, com git commit -m “mensagem personalizada” (Se atentar as aspas) , nessa hora vale reforçar uma boa prática! Quando for fazer o commit, adicione uma mensagem clara do motivo daquele commit, no lugar do “mensagem personalizada” você adiciona uma mensagem que será útil para o pessoal entender o que você está mudando no código, e futuramente também ajuda a verificar versões antigas.

Exemplos de:

Mensagem boa:
git commit -m “testes e2e da tela de cadastro”

Mensagem péssima:
git commit -m “cadastro”

3º integrar suas alterações no servidor do repositório com git push esse é aquele momento em que você envia seu commit pro repositório, ou seja “pushar”.

Resumindo:

  1. git pull para garantir que está com a versão atual
  2. git add-A para adicionar as alterações no commit
  3. git status não é obrigatório, mas serve pra ver se está tudo certo
  4. git commit -m “Mensagem” para “criar” o commit
  5. git push para enviar o commit

O passo 2 e 3 podem ser repetidos diversas vezes, até que o código esteja organizado (falaremos disso melhor num post futuro), e só então seguir para o passo 4

VIM” a tela dos pesadelos, e como sair dela

Uma tela que assusta muitas pessoas, uma tela responsável por uma quantidade absurdas de buscas no StackOverFlow, a tela que não tem nenhum teste de UX, a tela que aparece quando você esquece de colocar uma mensagem no commit!

Vim
Essa tela não é de Deus

Quando estava commitando para esse post, eu esqueci de adicionar a mensagem no meu commit… e me deparei com essa tela! Para sair dela você precisa digitar um :q e pressionar ENTER, mas reparem na seta vermelha, ela mostra aonde aparece o código digitado… não lá em cima onde seria esperado, e logo em cima do :q  também minas tentativas frustradas de sair da tela…não vendo onde meu texto estava sendo digitado.

Pode parecer uma besteira, mas vocês ficariam surpresos com a quantidade de buscas no StackOverFlow pra sair dessa tela (e com a quantidade de pessoas que simplesmente fecham o terminal quando ficam presos na tela)

Mas existe uma solução/prevenção de entrar nessa tela,  basta configurar o git para abrir seu editor de códigos ao invés do VIM.
No meu caso para configurar o VSCode bastou executar o comando git config –global core.editor “code –wait” e pronto! Ao invés de abrir o Vim, serei direcionado para o VSCode com sua interface e usabilidade bem mais amigável 🙂

Só pra explicar esse comando acima,  estamos dizendo para o git basicamente algo assim:
Git config – >”Ei Git, configura um negócio aí pra mim”
— global -> “mas configura pra todos os projetos, não só pro projeto atual”
core.editor ->”Essa é a função que você vai editar pra mim”
“code–wait” -> E é isso que você vai executar pra mim

Agora caso você acabe fazendo um commit sem mensagem, o seu editor de código irá abrir com instruções bem claras de como adicionar uma mensagem, e se você forçar o fechamento do editor, seu commit será abortado. Por que commits sem mensagem são coisas de gente sacana, e seu editor de código não quer que você seja  sacana.

Pronto, com isso encerramos o post de introdução!

O plano inicial era já iniciar com post de automação no próximo, mas durante a revisão e criação desse post, deu pra perceber que tem bastante coisa simples e pertinente pra falar sobre essa parte de git e gerenciamento de projeto… então o próximo post está um pouco obscuro ainda, mas temos no planejamento pelo menos mais um post de git e mais algumas coisas sobre o terminal 🙂

Anúncios

2 comentários sobre “O que eu faço com isso agora? – Introdução ao mundo dos códigos

  1. Vou acompanhar esses posts!! =D Preciso começar a automatizar alguns testes e não fazia ideia de como começar… aqui estamos indo passo-a-passo com bastante calma hehe
    Obrigada!

    Curtido por 1 pessoa

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s