Parte 4 - Meteor.js, Angular.js, Bootstrap e mongoDB - Série Iniciando com Meteor.JS

Cadastrando e listando dados no mongoDB.

Veja os artigos anteriores

Parte 1 - https://goo.gl/jN58pA
 Parte 2 - https://goo.gl/tCvJM3
 Parte 3 - https://goo.gl/E3Sx9q

Continuando o protejo anterior, nossa estrutura ficou assim:

//Nossa Estrutura
├── aluno
└── .meteor
└── index.html
└── app.js

Incluindo o Bootstrap em nosso projeto.

O Bootstrap e um framework front end que ajudará na construção de nossas telas e assim ficará com um visual muito elegante.
Para obter o BootStrap entre no site oficial http://getbootstrap.com e clique em download, após o termino do download basta descompactar o arquivo e copiar somente o arquivo bootstrap.css localizado no diretório css. Agora basta colar o arquivo em nosso projeto na raiz.

//Nossa Estrutura
├── aluno
└── .meteor
└── index.html
└── app.js
└── bootstrap.css

Criando um controller em nosso app.js

OBS: Alteramos o nome de nosso modulo angular de aluno para minhaApp por questões de organização e melhor entendimento. Altere os arquivos index.html e App.js abaixo:

Iremos criar um controller com um array de objetos de alunos, com o nome de AlunoListController.

Criando (tela) View and Template de listagem de aluno.

Vamos criar um arquivo chamado de aluno-lista.html e inserir o seguinte código.

//Nossa Estrutura
├── aluno
└── .meteor
└── index.html
└── aluno-lista.html
└── app.js
└──
bootstrap.css

aluno-lista.html

Nós adicionamos uma nova directiva, chamado ng-controller , que atribui na div o controller AlunoListController, dessa forma temos como acessar em nossso front end tudo que está dentro do controller em nosso app.js. Neste ponto, as expressões em duplas chaves estão se referindo ao nosso objeto de alunos, que é criada em nosso AlunoListController em app.js.
Adicionamos uma directiva ngRepeat e duas expressões:

  • O ng-repeat = “aluno in alunos” atribuído na li é uma directiva um repetidor Angular. O repetidor diz para o angular criar uma li para cada aluno da lista.
  • As expressões com duplas chaves ( {{ aluno.name}} e {{ aluno.sobrenome}} ) será substituído pelo valor das expressões vinda do controller.

Antes de executar o projeto vamos alterar a index.html para poder mostrar nosso layout aluno-lista.html:

index.html

Agora vamos executar o projeto.

meteor <tecle Enter>
//Projeto será executado=> Started proxy => Started MongoDB. => Started your app. => App running at: http://localhost:3000/


http://localhost:3000/

Adicionando BootStrap no layout da tela aluno-lista.html.

http://localhost:3000/

Agora você tem um aplicativo dinâmico que apresenta separação model, view e controller.
Mas, este é o lado apenas do cliente, o que é bom para tutoriais, mas em uma aplicação real precisamos manter os dados no servidor e sincronizar todos os clientes com ele.

Declarando uma Collection (coleção) com mongoDB em nosso app.js

Agora vamos realmente começar a usar o nosso banco de dados MongoDB e atuar no servidor, vamos definir a coleção de alunos que irá armazenar todos os nossos alunos.
Adicionar ao início do arquivo app.js.

Após a criação de nossa coleção, precisamos ligá-la ao nosso cliente para podermos manipula com o angular, isso será capaz através do $meteor.collection(), para utilizá-lo precisamos declarar em nosso controller o $meteor.

Agora precisamos retirar o array de objeto de lado do cliente e iremos colocar ao lado do servidor utilizando o Meteor.isServer.

Primeiramente demos o start no meteor e logo em seguida realizamos uma busca na coleção Alunos.find() usando o count() para verificar a quantidade de registros no banco, caso retorne ‘0’, iremos criar um array de objetos var alunos e logo em seguida realizaremos o foreach para percorrer nosso array e inserir os alunos em nosso banco de dados Alunos.insert().

Nosso código app.js completo.

Vamos executar nosso projeto.

http://localhost:3000/

Agora sim estamos listando os dados vindo de nossa coleção.
Como você provavelmente pode entender, esse código é executado somente no servidor, e quando Meteor começa ele inicializa o banco de dados com os alunos cadastrados, execute o aplicativo e você deve ver a lista de alunos na tela.

Código do projeto disponível em: https://github.com/marcobarrosweb/parte4

No próximo artigo, vamos ver como é fácil manipular os dados, salvar e publicar as alterações para o servidor, e fazer isso em tempo real para que todos os clientes conectados serão automaticamente atualizados.

Espero que tenham gostado, até o próximo artigo pessoal.

E-mail para dúvidas marcobneves@gmail.com