Iniciando no AdonisJS — parte 1

O framework em Node.js que é uma “cópia” do Laravel, do php, que se inspira no Ruby on Rails…

Resumo

O AdonisJs é um framework back-end javascript rodando em NodeJS usando a arquitetura MVC(Model-View-Controller) e com uma série de ferramentas e abstrações pra facilitar a vida do programador afegão médio.

Quick start

Como é uma dica recorrente entre desenvolvedores mais sênior:

Nenhum tutorial/livro é melhor que ler a própria documentação.

Então, vamos começar pela Doc, que manda iniciar um projeto em alguns passos simples. Abra seu terminal e:

Antes que me cancelem, eu me considero um macaco, ou seja, que não sei de nada e eternamente curioso.

Mas espera, precisa do NodeJS instalado primeiro. Então, se não tiver ainda, volte um passo atrás e siga as instruções de como instalar o Node, que tem… olha lá… quem diria… no site do Node. 👉Aqui

Voltando ao trilho

Agora, explicando o código acima. Primeiro instalamos globalmente o CLI do AdonisJs, que vai nos ajudar a gerenciar e rodar um servidor com Adonis.

Logo depois, usamos o comando do Adonis pra criar o projeto, que criará uma pasta com o mesmo nome e colocará todos os arquivos dentro.

PS: Se você já criou a pasta manualmente e está dentro dela no terminal, basta usar . ao invés do nome do projeto, assim:

adonis new .

Após executar e ver essas mensagens abaixo no terminal, seu projeto Adonis já está pronto pra uso, de verdade!

Basta executar, após entrar na pasta de seu projeto, o comando:

adonis serve --dev

O parâmetro “ — dev” serve para que toda alteração no seu código, ele seja “recompilado” novamente. Caso contrário, só iria ver mudanças se reiniciasse seu servidor.

Voilá! Seu app já está rodando na porta 3333 do seu Localhost.

Acesse no navegador e veja:

IT WORKS! Pelo menos não é um Hello World!

Certo, mas e agora?

Agora vamos entender a estrutura do Adonis, como ele sai de um canto e chega a outro.

Essa é a estrutura de pastas padrão do Adonis:

ENV FILE

O arquivo .env é onde você colocará todas as variáveis de ambiente pra seu Adonis saber o que tá fazendo da vida.

HOST=127.0.0.1
PORT=3333
NODE_ENV=development
APP_URL=http://${HOST}:${PORT}
CACHE_VIEWS=false
APP_KEY=xgguoyaAyZFanMvnGAtvZagtdemU2o0f
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_USER=root
DB_PASSWORD=root
DB_DATABASE=adonisformonkeys
SESSION_DRIVER=cookie
HASH_DRIVER=bcrypt

Nele que vamos definir, por exemplo, a conexão com o Banco de Dados, o qual, nesse artigo, trabalharei com o MySQL.

Após configurado o .env, a sua porta de entrada pra o adonis é o arquivo de rotas, que está em start/routes.js.

O que temos aqui é basicamente o Adonis dizendo que se a rota for “/”, ou seja, o root do site, então renderize o view chamada welcome.

Views

As views são nosso html, assim por dizer. Elas são a camada de Visualização do modelo MVC. Elas receberão os dados tratados dos Controllers e se preocuparão apenas em exibi-los.

Aqui a pasta onde estão:

A extensão .edge pode soar estranha, mas ela é a engine de template do Adonis. É como um HTML com superpoderes de JS e aqui pode saber mais sobre ela.

Se abrirmos o welcome.edge veremos:

A estrutura html que vemos no navegador quando executamos nosso app.

Mude algo nesse arquivo e recarregue a página no navegador pra conferir.

Rotas

Voltando a falar de rotas. Agora veremos os tipos de rota e alguns truques.

Além do método .on(), a rota pode ser definida de acordo com seu verbo.

Os Verbos do HTTP são:

• GET: É uma requisição que pede por um recurso, uma página por exemplo. Esse é o verbo que é realizado quando acessamos um site pelo navegador.
• POST: Serve pra enviar informações entre o navegador e o servidor. Normalmente usados por formulários, que os dados precisam ir, digamos, um pouco mais escondidos que um GET.
• PUT: É semelhante ao POST em sua estrutura, porém tem o significado/propósito de inserir um novo dado no backend.
• PATCH: Também igual ao POST. Tem o significado de atualizar ou alterar os dados de um registro no backend.
• DELETE: Serve para excluir um recurso no backend.
• Existem outros, como OPTIONS, TRACE, HEAD… mas esses de cima são os que vamos usar mais frequentemente.

No Adonis, escrevemos assim as rotas para capturarem cada verbo:

Lembrando que o único método que o navegador envia naturalmente quando você abre uma página é o método GET. Então se tentar acessar verá isso:

E se tentar acessar um recurso com o verbo errado, veremos:

Somente com isso você já pode criar um site estático :)

No próximo artigo vou mostrar os Controllers, Models, o ORM do Adonis…

Até mais, velhinhos!

Continua a Parte 2 aqui!