Criaremos um aplicativo de quiz dinâmico de perguntas, que pode ser facilmente adaptado para outras ferramentas de pesquisa de opinião, testes e provas online, etc.
Neste, o usuário poderá criar novos tópicos e assimilar opções a cada um, tendo os dados sincronizados em tempo real tanto no conteúdo web quanto para o banco de dados.
O Meteor.js flexibiliza essa implementação ao possibilitar que o código tenha o deploy feito de forma automática, isto é, sempre que salvarmos qualquer arquivo no projeto as alterações se espelharão para todos os clientes navegadores sem a necessidade de reload da página.
Além disso, aprenderemos a lidar com os packages do framework, que são recursos para importação de bibliotecas JavaScript de terceiros, como o Bootstrap que usaremos para o estilo da aplicação.
Prototipagem é uma prática que permite que as aplicações sejam estruturadas conforme modelos de código ou via estruturas de marcação (XML, HTML, etc.), possibilitando assim que os dados sejam customizados em detrimento da fonte de dados.
O Meteor, ou MeteorJS, é um framework web JavaScript open-source escrito em Node.js. Ele foi inicialmente introduzido à comunidade em dezembro de 2011 com o nome de Skybreak e foi adquirido pelo Meteor Development Group da startup Y Combinator em 2014 com o objetivo de expandir o suporte (já fornecido) a banco de dados.
Através dele conseguimos desenvolver rapidamente código de protótipos para aplicações tanto web rodando em browsers, quanto para dispositivos móveis (Android, iOS, Windows Phone, etc.). Com ele, podemos também facilmente integrar a aplicação com o MongoDB (Banco de dados NoSQL baseado em documentos JSON) e usar o protocolo DDP (Distributed Data Protocol) para propagar as mudanças nos dados para todos os clientes do serviço em tempo real sem requerer qualquer código de sincronização específico.
Neste artigo trataremos de esclarecer os principais tópicos que envolvem esse framework por meio da construção de um aplicativo de quiz de perguntas: o usuário terá acesso a uma tela de cadastro de perguntas e respectivas opções, assim como a lista de perguntas já criadas irá aparecer abaixo do formulário.
O usuário também terá uma pré-lista de perguntas criada quando ele acessar a aplicação a primeira vez, já que ainda não teremos dados populados.
As informações serão armazenadas simultaneamente no banco de dados tanto do lado cliente quanto do servidor e qualquer alteração em um ou outro será automaticamente impressa no browser, independente do cliente a acessar (Firefox, Chrome, WebView, etc.).
No final faremos uma tela de login com o Open Auth utilizando a API do Facebook para isso. O usuário, portanto, será direcionado para a tela de login e, uma vez logado com sucesso, será redirecionado para a tela do quiz.
O que é o Meteor?
O conceito de Meteor vai além de um simples framework, ele funciona como uma plataforma completa que envolve tecnologias como linguagem de programação, banco de dados e serviços web.
Em comparação com o AngularJS, por exemplo, que é um framework amplamente usado para integrar serviços e regras de negócio no lado front-end da aplicação, o Meteor vai além e consegue lidar com a mesma lógica tanto no lado cliente quando no servidor do sistema.
Veja na Figura 1 uma representação gráfica de como o framework é dividido bem como os tipos de ferramentas que ele suporta.
Perceba que os itens marcados em negrito representam as tecnologias que o Meteor já traz consigo por padrão, ao passo que os demais tratam-se de itens também aceitos mas que precisam ser baixados e instalados no ambiente.
O Meteor é baseado em sete princípios, a saber:
- Dados na rede - O Meteor não envia qualquer HTML pela rede, em vez disso ele envia os dados e deixa que o cliente os renderize. Assim, ganhamos em performance ao trafegar bem menos informação, tal como teríamos com os Web Services baseados em restful e JSON, por exemplo.
-
Uma só linguagem - O Meteor possibilita que você escreva ambas as partes (cliente e servidor) da sua aplica ...
Fim do trecho gratuito • continue abaixoCONTEÚDO EXCLUSIVO
Desbloqueie toda a DevMedia
-
+2000 artigos e vídeos
-
+40 trilhas sobre Front-end, Back-end, IA e muito mais
-
+5000 exercícios práticos
-
Mentorias ao vivo individuais
-