Front-end web simples
Vamos criar uma página estática simples pra você ficar mais confortável com o Git, Docker e VS Code. Logo em seguida fazemos uma mais elaborada, ok?
Já que estamos usando o Git, vamos criar um branch (galho) separado pra fazermos nosso trabalho sem atrapalhar o resto do time. Se você prefere passar o máximo de tempo fora de um editor de texto ou IDE, pode usar o comando no terminal. Vou entrar mais em detalhes sobre o Git mais abaixo.
terminal (sh like)
git branch # lista os branches existentes, por enquanto só temos o master, que é o padrão
git checkout -b features/static-html # cria e muda para um novo branch chamado static-html
Switched to a new branch 'features/static-html'
git branch # lista nossos dois branches
Na tela do VS Code, crie um novo arquivo que será nosso index.html, com Ctrl ou ⌘ + N.
Por padrão o VS Code vai criar um arquivo de texto simples (text/plain). Vamos dizer para ele que queremos um arquivo html (text/html). Poderíamos salvar o arquivo primeiro e o VS Code saberia qual o tipo pela extensão que selecionamos, porém existe outro jeito que não necessita salvar o arquivo, e pode ser útil em outras situações. Abrimos a barra de comandos do VS Code pressionando Ctrl + Shift + P ou ⌘ + ⇧ + P.
A barra vai abrir já com um > preenchido.
É a indicação que queremos rodar um comando.
Se você apagar este >, o VS Code só vai mostrar uma lista dos arquivos abertos.
Na barra de comandos, digite ou selecione (ou digite parte, use as setas do teclado e selecione, ou use o mouse, fique bem á vontade...) o comando Change Language Mode e pressione Return ou ↩︎.
Depois selecione HTML na lista de opções.
Isto vai habilitar para nós alguns atalhos para escrever HTML de um plug-in chamado Emmet (ou Zen Coding se você for velho o suficiente pra lembrar).
O primeiro atalho que vamos aprender do Emmet é o !. Digite ! dentro do arquivo HTML do VS Code e ele vai te dar uma sugestão:
Pressione Return ou ↩︎ para aceitar a sugestão e voilà (isso é francês, se não der certo vc pode usar merde). Temos um html mínimo.
Mágica do Emmet - Modelo de HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Salve este arquivo como index.html na raiz da pasta front-end.
Ele será nosso arquivo inicial.
O que define na verdade que ele é o arquivo inicial é a configuração do nosso servidor.
Por padrão, servidores como Nginx, Apache, IIS, WildFly e por aí vai aceitam index.html.
Quando você abre um arquivo existente o VS Code adivinha qual a linguagem pela extensão.
Se ele não conseguir adivinhar, ou se você quiser sobrescrever a decisão do VS Code, pode usar o comando que mencionei acima, o Change Language Mode.
Controle de Versão - Release Flow
Existem vários fluxos que as pessoas foram inventando ao longo do tempo pra tentar deixar o uso do Git um pouco menos complicado e simplificar o histório das alterações dentro de um projeto. Vou usar aqui um fluxo chamado release flow + squash + rebase.
A primeira parte desse fluxo já fizemos lá em cima, com:
terminal (sh like)
git checkout -b features/static-html # cria e muda para um novo branch chamado static-html
Se você não quiser usar uma janela separada com o terminal pra digitar o restante, o VS Code tem um terminal integrado. Acesse pelo menu View, Terminal, ou pelo atalho Ctrl + ' ou ⌃ + ⇧ + '
terminal (sh like)
git add index.html
git commit --message "Adição de arquivo inicial"
Vamos melhorar um pouquinho nosso projeto e salvar uma nova versão. Criamos um arquivo CSS para melhorar a aparência da nossa página.
terminal (sh like)
mkdir css
cd css
# vamos criar e inserir conteúdo num arquivo pequeno com cat
cat >> index.css
/* Digite o conteúdo do arquivo aqui, quando terminar, pressione Ctrl + d ou ⌃ + d */
h1 {
color: #505B66;
}
E incluímos um pouco de conteúdo.
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Olá mundo</title>
<!-- estilos vão no cabeçalho da página -->
<link rel='stylesheet' href='css/index.css' />
</head>
<body>
<h1>Pra quem não sabe</h1>
<p>Hipertexto é feito de <a href='https://en.wikipedia.org/wiki/Hypertext'>links</a> ;)</p>
</body>
</html>
Abra esse arquivo no navegador, clicando duas vezes nele. O navegador vai mostrar na barra de endereços algo como file:///Users/marco/dozero/front-end/index.html O file:// significa que ele está abrindo um arquivo local, do sistema de arquivos. O título deve ficar num cinza ligeiramente diferente do preto original (design está nos detalhes). Mas que você quiser verificar com certeza, inspecione o título TODO.
Já que tudo parece certo, vamos salvar novamente nosso progresso.
terminal (sh like)
# tínhamos parado dentro da pasta css se lembra?
# então o git mostra ../index.html como modificado e ./ como não versionado
git status
# podemos adicionar todas as pendências de uma vez na área de ensaio com *
git add *
# mostra que index.html e css/index.css serão inclusos no commit
git status
git commit --message "Adição de arquivo css"
git status
Por último vamos colocar um pouquinho de programação nessa página. Agora criamos um arquivo JavaScript para melhorar a aparência da nossa página.
js/index.js
'use strict';
const titulo = document.querySelector('h1');
titulo.innerText = 'Rodou';
E incluímos um pouco de conteúdo.
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Olá mundo</title>
<!-- estilos vão no cabeçalho da página -->
<link rel='stylesheet' href='css/index.css' />
</head>
<body>
<h1>Pra quem não sabe</h1>
<p>Hipertexto é feito de <a href='https://en.wikipedia.org/wiki/Hypertext'>links</a> ;)</p>
<!-- scripts vão no final da página -->
<script src='js/index.js'></script>
</body>
</html>
Veja novamente a página no navegador.
Se estiver tudo ok, vamos salvar as alterações de novo. A boa prática diz para fazer commits com códigos que funcionem sempre. Se tiver algum erro, corrija antes de comitar.
terminal (sh like)
git status # O comando status é opcional, mas é interessante para acompanhar o que está acontecendo
git add *
git status
git commit --message "Adição de arquivo js"
git status
Como nossa funcionalidade está completa, vamos jogar as alterações de volta na master e criar uma tag. Isto é, no meio de todas as alterações que fizemos, vamos congelar um estado específico que esteja completo ou estável, e dar um nome pra ele.
Dando uma olhada no nosso histório, podemos ver quatro commits. O primeiro feito ainda no master branch, e os demais no nosso próprio branch.
terminal (sh like)
git log
commit ff63d353dc98bb6a667523eacb5eb6310ec595f5 (HEAD -> features/static-html)
Author: Marco Luglio <marcodejulho@gmail.com>
Date: Wed May 13 23:29:24 2020 -0300
Adição de arquivo js
commit e723dd356571d0c71b124f3678471917d9826279
Author: Marco Luglio <marcodejulho@gmail.com>
Date: Wed May 13 23:28:12 2020 -0300
Adição de arquivo css
commit 1b94ef3834278e25ab27b1718ae2cdeb6ef2a2a6
Author: Marco Luglio <marcodejulho@gmail.com>
Date: Wed May 13 23:26:45 2020 -0300
Adição de arquivo inicial
commit 299a808ae84a3b08ca8c84c6f374d065cf4da822 (master)
Author: Marco Luglio <marcodejulho@gmail.com>
Date: Wed May 13 23:15:52 2020 -0300
Adição de arquivo .gitignore
As mensagens de commit nesse caso são relevantes enquanto estamos desenvolvendo a funcionalidade, mas podem não ser muito úteis uma vez que ela já está terminada. Nesse caso seria melhor ter uma única mensagem com um resumo das alterações e o código no estado final. Pelo menos essa é a filosofia do squash + rebase. Então vamos achatar nossos três últimos commits em um só.
terminal (sh like)
# maneira compacta de mostrar as alterações
git log --oneline
ff63d35 (HEAD -> features/static-html) Adição de arquivo js
e723dd3 Adição de arquivo css
1b94ef3 Adição de arquivo inicial
299a808 (master) Adição de arquivo .gitignore
# achata todos os commits após o commit com o hash indicado em um só, também podemos usar --root que achataria tudo, mas perderíamos o histórico do master branch
git rebase --interactive 299a808
Isso vai abrir o editor padrão do git (vi provavelmente, mas tem como trocar). Preste atenção nas linhas não comentadas no topo, são elas que serão executadas e que precisamos alterar de acordo com o que quisermos fazer com cada commit.
terminal (sh like)
pick 1b94ef3 Adição de arquivo inicial
pick e723dd3 Adição de arquivo css
pick ff63d35 Adição de arquivo js
Vamos mudar o pick para fixup.
No vi, aperte i para entrar no modo de edição.
Neste modo ele se comporta quase como um editor normal.
Altere o texto com abaixo:
terminal (sh like)
pick 1b94ef3 Adição de arquivo inicial
fixup e723dd3 Adição de arquivo css
fixup ff63d35 Adição de arquivo js
Agora pressione Esc para sair do modo de edição e digite : para entrar no modo de comando.
Digite wq e pressione Return ou ↩︎.
Isso vai executar o comando write e o comando quit.
Se quiser sair sem salvar, digite q! que descarta as alterações e fecha o arquivo.
Se verificarmos o histórico de commits novamente:
terminal (sh like)
git log --oneline
ac490ce (HEAD -> features/static-html) Adição de arquivo inicial
299a808 (master) Adição de arquivo .gitignore
Vemos que agora temos novamente só dois commits, mas nossos arquivos estão com as alterações dos quatro.
terminal (sh like)
cat index.html # note que o CSS e JavaScript ainda estão lá
Podemos ainda alterar a mensagem deste commit, para descrever tudo o que foi feito. Fazemos isso digitando:
terminal (sh like)
git commit --amend --message "Alteração de título por JavaScript"
E no log, note que o hash do commit ainda é o mesmo, mas a mensagem não:
terminal (sh like)
git log --oneline
ac490ce (HEAD -> features/static-html) Alteração de título por JavaScript
299a808 (master) Adição de arquivo .gitignore
Vamos pegar esta única mudança e aplicar no master branch.
terminal (sh like)
git checkout master # muda para o master branch
git branch # confirma que estamos no master branch
git diff master features/static-html # mostra oq será alterado, pressione q pra sair
git rebase features/static-html # coloca as alterações do branch na master
git log # confirma que as alterações estão lá
git tag 1.0.0 0296a7f # dá um nome para esse ponto específico da história do repositório
git log # note que o nome da tag aparece ao lado do commit
git branch -d features/static-html # apaga o branch que já foi reintegrado no master
Servidores HTTP
Alguns recursos não funcionam quando abrimos a página direto do sistema de arquivos. Nesses casos precisamos configurar um servidor local para testes. Se este servidor for igual ao que vamos publicar nosso site, melhor.
A maneira como carregamos os arquivos JavaScript é um desses recursos que dependem de um servidor. Hoje separamos os arquivos em módulos.
js/biblioteca.js
'use strict';
function mudarTitulo(novoTitulo) {
const titulo = document.querySelector('h1');
titulo.innerText = novoTitulo;
}
// módulos só conseguem expor o que é exportado explicitamente
export { mudarTitulo };
js/index.js
'use strict';
// do que é exportado nos módulos, só é visível o que for importado explicitamente
import { mudarTitulo } from './biblioteca.js';
mudarTitulo('Rodou');
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Olá mundo</title>
<!-- estilos vão no cabeçalho da página -->
<link rel='stylesheet' href='css/index.css' />
</head>
<body>
<h1>Pra quem não sabe</h1>
<p>Hipertexto é feito de <a href='https://en.wikipedia.org/wiki/Hypertext'>links</a> ;)</p>
<!-- scripts vão no final da página -->
<!-- módulos são indicados pelo atributo type, e são carregados de maneira diferente -->
<script src='js/index.js' type='module'></script>
</body>
</html>
Se você abrir este arquivo como fizermos anteriormente, vai notar que nossa programação não vai funcionar. O carregamento destes módulos requer um servidor HTTP. A Mozilla tem uma página com instruções de como rodar um servidor simples de teste com Python. Basicamente:
terminal (sh like)
python -m SimpleHTTPServer 8000 # para python v2, que já vem no Mac
Para páginas simples e testes rápidos isso é suficiente, mais pra frente vou mostrar uma ferramenta mais completa, chamada Docker. Por enquanto quero fazer mais uma alteração em nossa
Vamos usar o Docker para resolver nosso problema, rodando um servidor HTTP simples.
Por padrão os servidores HTTP usam a porta 80.
Se você já estiver usando a porta 80 para alguma coisa, pode mudar no comando abaixo o 80:80 para 8080:80, 8081:80 e por aí vai.
O número antes do : é da porta que você deseja usar.
Outro detalhe no comando abaixo é como indicamos o diretório atual dentro do shell.
No Powershell ou Unix ${PWD} é um variável que contém o diretório onde estamos no terminal.
O Unix também suporta $PWD, que não funciona no Windows.
E o Winndows também suporta %cd%, que não funciona no Unix.
terminal (sh like)
# A
docker container run -d -p 80:80 -v "${PWD}":/usr/share/nginx/html --name nginx nginx:alpine
# lista os contêineres rodando atualmente, para listar todos use o parâmetro -a
docker container ls
https://www.johnmackenzie.co.uk/post/creating-self-signed-ssl-certificates-for-docker-and-nginx/
Versionamos nosso exemplo de novo.