Tecnologias da Quero: Criando uma aplicação com Elixir e Phoenix, parte 1
Configurando o ambiente e criando nosso primeiro teste com as tecnologias da Quero Educação
Aqui na Quero utilizamos ferramentas e linguagens diferentes para desenvolver produtos para linhas de negócios diferentes. O Elixir e o Phoenix são personagens principais no dia a dia de algumas squads do B2B e B2C.
O OPA (Painel do Guia do Aluno), uma ferramenta interna para atendimento aos alunos, foi criado com o Elixir. Assim como o SOPA (ferramenta utilizada pela equipe de SiteOps) e o Quero Alunos (plataforma para atender as instituições de ensino), também temos projetos no Quero Pago, nossa fintech, usando a linguagem.
O Elixir é descrito em seu site como “a dynamic, functional language designed for building scalable and maintainable applications”. A Quero Educação escolheu a linguagem de programação por esses motivos, por ter um bom uso de recursos computacionais, além de seu paralelismo e reliability. Além do mais, foi criada por um brasileiro — mais um motivo para você também aprender essa linguagem.
Se você, assim como eu, precisa botar a mão na massa para aprender algo novo, pode seguir os próximos passos comigo para aprender Elixir e Phoenix. Neste tutorial, decidi criar uma aplicação simples: algo para registrar as minhas contas a pagar. Você pode criar a sua própria aplicação e compartilhar conosco.
Docker para o ambiente
Para o setup inicial da nossa aplicação, vamos usar o Docker para criar o ambiente necessário para rodar a aplicação.
- Crie um Dockerfile para instalar e configurar todas as dependências: PostgreSQL, NodeJS, NPM, Phoenix entre outros, usando como base a imagem disponibilizada pelo Elixir.
- Usaremos também o docker-compose para subir o Postgres e o ambiente criado no Dockerfile anterior.
Com ambos criados, construa o ambiente usando o seguinte comando, dentro do diretório que contém os arquivos Dockerfile e docker-compose.yml (e que irá conter o projeto):
$ docker-compose build
Após a construção, entre no container e inicie o projeto propriamente. Para isso, rode os seguintes comandos
$ docker-compose run --rm web bash
$ mix phx.new
No decorrer da criação do projeto do Phoenix, será perguntado duas coisas:
- “The directory /contasapp already exists. Are you sure you want to continue? [Yn]”: É só colocar “Y” ou dar enter
- “Fetch and install dependencies? [Yn]”, é só dar enter ou colocar “Y” e esperar a aplicação ser configurada.
Ao final, alguns passos serão fornecidos:
Não vamos precisar executar a etapa do cd contasapp, pois já estamos dentro da pasta do projeto. Então, configure o arquivo dev.exs, para que a aplicação possa se conectar ao banco de dados. Será necessário alterar a permissão dos arquivos criados para seu usário (já que no linux, o docker cria os arquivos com permissão para o usário root), para fazer isso, fora do container rode:
sudo chown -R $USER:$USER .
Com isso feito, rode o comando para que o banco de dados seja criado (dentro do container)
$ mix ecto.create
Devemos ter como resultado no terminal:
The database for Contasapp.Repo has been created
Com isso feito, podemos sair do container e então colocar “para rodar” com o comando:
$ docker-compose up web
Acessando a url localhost:4000 devemos ver então a página de boas vindas do Phoenix:
Configurando o bootstrap e font-awesome
Agora vamos configurar o bootstrap como framework css e a font-awesome para termos ícones legais na aplicação. Para isso, vamos entrar novamente no container com o comando e então entrar na pasta de assets do projeto:
$ docker-compose run --rm web bash
$ cd assets/
Agora instale de uma vez bootstrap, jquery, popper.js e a font-awesome com o npm:
$ npm install --save bootstrap jquery popper.js
@fortawesome/fontawesome
Vamos precisar também instalar um pacote para carregar os arquivos de fonte da font-awesome da maneira correta. Para isso, rode o comando (dentro da pasta assets ainda):
$ npm install --save-dev file-loader
Após a instalação, importe os arquivos necessários. No arquivo app.css, vamos deixá-lo dessa forma.
Repare que estou importando também o arquivo cosmo.min.css. Este arquivo é apenas um tema para o bootstrap, então ele não é obrigatório.
E no arquivo app.js, vamos alterar para este código.
Então, vamos alterar o webpack para carrear as fontes necessárias, alterando o arquivo webpack.config.js.
Com isso pronto, temos o bootstrap e a font-awesome configurado.
Ajustando o template inicial e primeiro teste.
Utilizando os conceitos do TDD, vamos criar o primeiro teste da nossa aplicação, fazê-lo falhar e, então, corrigir. A ideia é criar um teste para verificar se o elemento header possui o link para o Login (sinta-se livre para criar outros testes se achar necessário). Então, mãos à obra!
Dentro da pasta test/contasapp_web vamos criar uma pasta chamada templates. Dentro dessa pasta, crie um arquivo chamado navbar_test.exs, onde vamos escrever nosso teste. Teste se a página contém o texto esperado para o link de login, que vamos implementar nas próximas etapas, da seguinte forma:
Fazemos uma requisição get para a página inicial da aplicação e vemos se o html retornado possui o texto esperado. Fazemos isso com o operador =~, que verifica se o termo do lado esquerdo bate com o lado direito (em caso de regex) ou se o lado esquerdo contém o que está do lado direito.
Clique aqui para ver o resultado esperado.
Se rodarmos o teste com o comando mix test, vamos ver que o mesmo falha:
1) test should show an Sign in with Google link when not signed_in (ContasappWeb.NavbarTest)
test/contasapp_web/templates/navbar_test.exs:4
Assertion with =~ failed
Para corrigir o problema, devemos pensar no componente do header. Dentro da pasta lib/contasapp_web/templates/layout/, crie um arquivo chamado de _navbar.html.eex. Fique livre para criar seu header. Aqui está o que criei para a minha aplicação, utilizando um exemplo contido na documentação do bootstrap.
Repare que temos um elemento com o texto “Login with Google”, que colocamos no nosso teste. Precisamos ainda importar esse header para o template da aplicação. No arquivo app.html.eex, vamos alterar para incluir o arquivo do header.
Altere também o arquivo index.html.eex dentro da pasta page. E não se esqueça de apagar tudo e deixar somente o texto:
“Welcome to Phoenix!”
Com isso feito, podemos rodar novamente os testes e ver todos passando (por padrão, a aplicação criada pelo Phoenix já possui três testes). No fim, devemos ter a aplicação com essa carinha:
O que achou da nossa aplicação? Acompanhe o nosso próximo post e aprenda a desenvolver com as tecnologias da Quero.
Se quiser saber mais sobre o funcionamento do Elixir, acesse a Elixir School e bote a mão na massa.
Se quiser testar essa e novas aplicações com nossos squads, conheça nossas vagas.
