Uma introdução ao mundo dos códigos!

Olá!
Comecei a estudar novamente automação! Como comentei anteriormente (nesse post), quem está me ajudando com os estudos é um grande amigo meu William Grasel, que além de amigo e dev , está sendo professor e revisor dos posts.
Com esse post vamos dar início aos posts sobre automação 🙂

Os primeiros posts vão ser uma introdução de termos utilizados, como preparar a máquina,  iniciar um projeto , utilizar o git e afins. São itens simples, mas normalmente ignorados quando vamos iniciar os estudos, boas partes dos tutoriais partem do principio que já sabemos sobre o assunto, e simplesmente ignora essa parte, e com isso mesmo quando aprendemos a usar um comando ou outro, simplesmente fazemos no automático, sem realmente entender o motivo.

A introdução será dividida nos seguintes tópicos:

  • Sobre tecnologias da web
  • Ferramentas/Acessos
  • O que eu faço com isso agora?

Sendo que os dois primeiros tópicos serão abordados nesse post, e o próximo post irá trazer a conclusão da introdução. Não vou entrar nos detalhes de cada ponto, mas o suficiente para termos uma noção sobre o tema, ok?

Ah sim…. no caso de qualquer dúvida referente ao tema, não tenham nenhuma vergonha em perguntar. Caso eu não saiba a resposta eu irei liberar o comentário no post para que alguém mais possa responder 🙂
Sem mais enrolação vamos ao que importa:

Sobre tecnologias da web

 

Vou apresentar aqui três tecnologias que você provavelmente já pelo menos ouviu falar: HTML / CSS/ JS

HTML (Hyper Text Markup Language / Linguagem de marcação de hiper texto)

O HTML é um “texto que fala sobre o texto”. Enquanto vocês leem esse post vocês entendem qual o título dele, quais são os sub-títulos , tags e links (que eu gosto de deixar  relacionados diretamente a uma palavra) e o por quê de cada um estar em cada lugar… Mas o computador em si só entende um monte de letras, não faz exatamente um sentido pra ele, e é aí que o HTML entra, ele explica pro computador o que é cada coisa dentro do texto, ele que vai definir qual parte do seu texto que é o cabeçalho, links…e assim por diante.

Ele fica mais ou menos assim
<title>  Tudo o que estiver aqui dentro é o título do texto</title>

(exemplo bem tosco…eu sei, mas é pra ser simbólico mesmo)

 

CSS (Cascate Style Sheet/ Folha de estilo em cascata)

É uma folha (na verdade um arquivo…mas o nome é folha) que define o estilo da página. A leitura é feita como uma cascata (de cima pra baixo), se o HTML dá um sentido pro texto, é o CSS que deixa ele mais bonitinho, definindo fontes, cores e afins.

JS/JavaScript

O JavaScript é com quem mais vamos entrar em contato de forma direta, ele já é uma linguagem de programação, pois possui uma lógica (diferente dos itens anteriores), inclusive é a lógica que ele vai adicionar na página,criando o dinamismo da página, com maior complexidade que os outros itens da lista.

A interação dos três juntos:

De uma forma resumida:

  1. Primeiro HTML o vai dar sentido ao conteúdo/texto
  2. O CSS vai definir o visual desse texto
  3. o JS vai fazer a “mágica acontecer”, transformando o texto em algo mais, por exemplo incluindo validações e animações.

Como disse, é uma explicação bem por cima, com o passar do tempo vamos conhecendo melhor cada um deles, mas o nosso intuito não é nos tornarmos experts, mas entender a lógica por trás do que vamos testar. Quanto mais conhecermos sobre essas coisas, melhor é na hora de criar botar a mão na massa e saber resolver algum problema quando ele acontecer.

 

Ferramentas/Tools

Agora algumas ferramentas que iremos utilizar na hora de automatizar. Já vamos começar a utilizar durante os estudos, então já vale a pena ir baixando elas… até por que a melhor forma de aprendermos é com a mão na massa, não é mesmo?

Pode ser que você tenha dúvida em alguns dos itens, mas no próximo post irei explicar melhor sobre eles com exemplos práticos, então não se preocupe muito com isso agora.

PowerShell – ou outro terminal

O terminal é uma espécie de sistema operacional, uma interface entre você e seus programas, mas bem simples, você irá utilizar ele através de texto e comandos simples. Num primeiro momento iremos utilizar ele para instalar algumas das ferramentas abaixo, mas iremos encontrar novas funcionalidades para  ele com o passar do tempo.
Você pode utilizar o terminal de sua preferência, o Powershell por exemplo é uma versão bem leve e simples, tem vários detalhes que ajudam a economizar tempo. Mas eu por exemplo utilizo o GitBash, mais por que instalaram pra mim quando estava precisando de um terminal do que por eu ter escolhido…. mas já acostumei com ele rs.

GIT – O Versionador de código distribuído.

O Git é uma ferramenta de linha de comando que ajuda a gerenciar o histórico do seu projeto criando versões, ele basicamente cumpre o papel do “Backup” do seu projeto projeto.

Ele funciona da seguinte forma, ele salva o projeto conforme você sobe ele, só que a cada nova alteração que você faz no código e sobe novamente pro git, ele vai comparar o código atual com o anterior, te informar as diferenças e criar uma nova versão do seu projeto. Então caso de algum problema ao rodar o projeto depois de um update você pode simplesmente voltar para a versão anterior, e ainda vai saber  exatamente o que mudou no código, facilitando o entendimento do erro novo que está ocorrendo.
Além disso, mais de uma pessoa pode trabalhar no projeto ao mesmo tempo, cada um vai poder subir suas alterações e baixar as alterações que os outros fizeram.

Para exemplificar melhor:
Digamos que estamos nós dois trabalhando num projeto chamado “PerdidoNaAutomação”, o projeto já está criado e nós iremos fazer algumas alterações nele eu vou alterar a tela de login, e você irá alterar a tela de cadastro.

Então nós dois iremos baixar o projeto  na nossa máquina, nós vamos ter uma cópia idêntica da versão “master” , eu faço as alterações da tela de login na minha máquina, então teremos duas versões do projeto:

Master  e Login 0.1 (correções na tela de login), os testes foram feitos e vimos que tudo está funcionando.

Logo em seguida você também finaliza suas correções na tela de cadastro e gera uma nova versão, temos então 3 versões certo?
Master, Login 0.1 e Cadastro 0.1.

Só que eu não tenho suas correções na tela de cadastro, e nem você tem as minhas correções de login…da mesma forma que qualquer pessoa que pegar o código “master” não vai ter nenhuma das duas correções, então nós enviamos nossas versões para essa master e teremos uma nova versão  que vou chamar de “Master 1.0”,  se após adicionarmos nossas versões não deu nenhum problema na master, nós dois podemos baixar essa “Master 1.0” e ter ambas correções na máquina 🙂
E é o Git que permite toda essa mágica rs.

GITHUB – O maior servidor de repositórios GIT

Certo, acima eu expliquei sobre o projeto ficar em um lugar, sobre baixarmos o projeto e subirmos o projeto… mas onde ele fica? Eis uma das possíveis respostas. Nesse site podemos guardar nosso código de uma forma gratuita (e pública), no decorrer dos posts irei utilizar ele para compartilhar os testes que forem feitos, e o código que será feito para ser testado… então apesar de existirem outros servidores, pra acompanhar melhor os posts será necessário abrir uma conta no github.

NodeJS – Vamos precisar dele

Esse rapaz que irá permitir a execução do JS fora do navegador… então sem ele não tem jogo 🙂

NPM (Node Package Manager /Administrador de pacotes node)

Algo simplesmente sensacional, ele gerência as dependências e pacotes do projeto. “Como assim?” Ele baixa e prepara praticamente tudo o que você precisa para o seu projeto funcionar, para vocês terem uma ideia o próprio Protractor é um desses pacotes, já pensou se ao invés de criar os testes você tivesse antes que criar TODO O EXECUTOR DE TESTES? A complexidade e tempo seriam absurdos.

Ele também separa a entre-dependências de desenvolvedor e produção, afinal quando for subir pra produção você não vai querer mandar o protractor junto né? rs
NPM já vem incluso no NodeJS 😉

Protractor – É nele que vamos automatizar nossos testes

Como disse acima, o protractor é uma dependência voltada para testes, então pra você instalar ele já vai precisar do NPM. Basta entrar no site oficial e seguir as instruções, mas de forma resumida basta você abrir o seu terminal e colar lá o seguinte texto

npm install -g protractor

É isso. Se você tentar colar com o “Ctrl+V” e não conseguir, provavelmente seu terminar não permite esse comando, nesse caso pra colar tem que ser com o botão direito do mouse 😉

 

AngularCli – Mas prefiro chamar ele de trapaça

Esse cheat vai facilitar bastante nossa vida!

Brincadeiras a parte, o AngularCli vai nos ajudar (fazer quase tudo) na hora de criar um projeto… sim ele cria praticamente tudo o que precisamos pra simplesmente iniciar o projeto sem perder muito tempo. As vezes tem que arrumar um detalhe ou outro, mas mesmo assim é bem mais rápido

Você pode seguir as instruções no site oficial ou simplesmente ir no seu terminal e colar o seguinte texto

npm install -g angular-cli

Mas vale a pena ver o site oficial para conhecer um pouco mais (assim como o site do protractor)

EDITOR DE CÓDIGO – A parte mais pessoal

Chegou a hora de uma das decisões mais importantes da sua  vida (Quase mais importante que “Squirtle , Charmanter ou Bulbassaur”)

O editor de código vai ser nosso companheiro por muito tempo! Vamos olhar bastante pra cara dele, digitar bastante nele… então escolha bem qual deles você irá utilizar, veja com o pessoal que trabalha contigo quais eles aconselham e o por que, e veja com qual você se adapta melhor.
No meu caso estou utilizando o VSCode, e ele tem se mostrado uma opção leve, rápida, eficiente e ainda por cima tem um ótimo suporte para as ferramentas que iremos utilizar 🙂

Anúncios

2 comentários sobre “Uma introdução ao mundo dos códigos!

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