Este é o primeiro artigo de uma série sobre o Keystone.js, um framework desenvolvido em Node.js para servir de CMS e também Web Application. Pra começarmos, será necessário nesse primeiro artigo um pouco de teoria, pra termos uma noção.
Aos apressados, o link do repo está disponível no github.
Pra começar, não vou falar detalhadamente sobre sua descrição, pois no site deles está bem explicado, apenas um resumo sobre, e depois, quando formos iniciar o projeto, ficará mais claro.
O Keystone.js utiliza o Express, então para muitos a curva de aprendizado será bem pequena e é um ponto bom, pois a customização (quando necessária) será tranquila. Na interface admin, utilizam o React.js. Este framework me chamou muito a atenção pelo fato de agilizar MUITA coisa no desenvolvimento, e ao mesmo tempo não deixar o desenvolvedor sem saber o que ocorre por baixo dos panos, os módulos de rotas/models/views são bem organizados.
Atualmente, a comunidade Keystone.js está trabalhando na próxima versão (0.4) que terá um rebuild da interface admin com o React e mais novidades.
O projeto que faremos utilizará a versão 0.3.16
A idéia nessa série é desenvolver um CMS (obviamente) onde vamos publicar posts, cadastro e listagem de produtos, e também customizar o Framework (é Javascript!) para termos uma API para posterior consumo.
Showmethecode!
Pré requisitos: Node.js e Mongodb. No terminal, digite:
Após a instalação via NPM, o generator fará algumas perguntas sobre as engines que deseja utilizar e informações sobre seu projeto (exemplo nome), esta parte fica a seu critério. Itens como template engine, pré-processor, taskers…
Agora você já consegue navegar em https://localhost:3000 pra ter uma noção do que o framework estruturou para você. Nesse momento, repare que já temos um Blog e uma Galeria de imagens (utilizando uma conta temporária da Cloudinary).
Para acessar o admin, navegue em https://localhost:3000/keystone e informe usuário e senha que informou no generator (se não informou nada, é user: user@keystonejs.com pass: admin)
Um pouco sobre as models e rotas
Esta parte é uma mão na roda, dê um check na estrutura de ./models/Post.js e ./models/Gallery.js pra saber do que estamos tratando. O interessante, é que no momento de estruturar as models, você não precisa se preocupar em criar o formulário de cadastro/edição no adminUI (o Keystone.js faz isso conforme vc seta as propriedades da model).
Já as rotas, ficam em ./routes/index.js para serem registradas. Possuímos o arquivo ./routes/middleware.js para interceptar e tratar as requests de acordo com a nossa necessidade (veremos mais adiante).
Uma boa prática que adotamos aqui na Ornito é separar a pasta de rotas em ./routes/api/* e ./routes/views/*, onde, respectivamente, incluiremos os arquivos de API retornardos de nosso JSON, e ServerViews, que vamos renderizar pela template engine (Jade foi a escolhida).
Cadastro de Produtos
Ao subir o Keystone.js pela primeira vez, ele gerou as models de Post e Galeria para nós, por isso, não teremos muito trabalho nesta parte (já está pronto). Vamos agora focar no código para criação de produtos.
Nosso fluxo de criação: definir Model, definir Rota, definir View.
Vamos criar o arquivo ./models/Produto.js:
Já criamos a model, então podemos navegar pelo admin, e https://localhost:3000/keystone nos levará para o cadastro de um produto. Preencha as informações do produto.
Agora temos que configurar a rota em ./routes/views/produtos.js , ./routes/index.js e ./routes/middleware.js
A rota views/produtos.js é a responsável por consultar nossa base no mongoDB e retornar os produtos existentes.
Em routes/index.js registramos igual a um app comum em express com app.get() e apontamos para nossa rota de produtos, a qual vamos consultar os produtos na base.
Em routes/middeware.js estamos apenas estruturando os navLinks para exibirmos o link de produtos na home.
E agora vamos exibir nossos produtos em ./templates/views/produtos.jade
Navegue em https://localhost:3000/produtos e verá o resultado 🙂
Neste artigo não foi possível cobrir TODOS os detalhes do Keystone.js. Mas, se você se interessou pelo framework, vale dar uma olhada na documentação sobre tipos de dados, formatos, middlewares, serviços já integrados e tudo mais.
Fiz aqui uma pequena imersão ao framework para mostrar o que ele pode fazer com pouco tempo e dedicação. No próximo artigo vamos ao detalhe do produto, e também começar com nossa API (para produtos e posts).
Repo: https://github.com/victorkurauchi/post-keystone
Até mais.
@victorkurauchi