WebApps com AngularJS e MongoDB (CPBR14)

Desenvolvendo protótipos com AngularJS e MongoDB na Campus Party 2014 - http://www.youtube.com/watch?v=NhJQhJo6HCI

Transcript

1. CRIANDO! WEBAPPS com
2. Vitor Leal / Telefonica Digital http://github.com/vitorleal http://twitter.com/vitorleal http://vitorleal.com #cpbr7 #campusparty2014
3. • Teve uma ideia • Quer lançar um produto rápido (Startup) • Tem que fazer uma prova de conceito • Tem que apresentar um MVP Imagine que você:
4. • NodeJS • Python • Ruby • PHP Você tem muitas opções: mas não tem tempo…
5. DataBase as a Service (DBaaS)
6. Por que usar o mongoLab? • Tem versão FREE • Não precisa programar o Back-End! • Utiliza uma API em REST • Retorna os dados em formato JSON! • Cross-Origin Resource Sharing (CORS)
7. Exemplo da API REST • URL padrão https://api.mongolab.com/api/1 • GET /databases/{db}/collections?apiKey={key}! • GET /databases/{db}/collections/{coll}?apiKey={key}! • POST /databases/{db}/collections/{collection}?apiKey={key}! • data: JSON.stringify( { "data": "value", "data": "value" } )
8. Editar documentos já criados Criar novos bancos Interface Web
9. Sem escrever nenhuma linha de código no Back-End sobra mais tempo pra você focar no que interessa nesse momento, o seu aplicativo
10. AngularJS (v.1.2.10) Um framework para criar aplicações web dinâmicas, de maneira rápida, testável e de fácil manutenção
11. Princípios do AngularJS • Desenvolvimento rápido • Escrever menos código • Modularidade • Pensado para ser testado
12. O que o AngularJS oferece? • Templates (view) • Two-way Data-binding • Injeção de dependências • Directives! • Testes (Unit/E2E)
13. Um exemplo bem simples exemplo
14. Modelo • O modelo da aplicação é representado pelo objeto $scope, que liga a View e o Controller myController.js myView.html
15. Controllers • São funções usadas para "aumentar" a instância do $scope. Adicionando um valor ou um comportamento a um objeto
16. Views • As views no angular são simplesmente HTML5 É onde toda a presentation logic deve estar
17. Two-Way Data-Binding • Data binding no angular funciona de maneira bi-direcional, qualquer alteração na View se reflete no Model e vice-versa
18. Services e factorys • São objetos que executam tarefas específicas e que são controlados pela injeção de depêndencias. • $http! • $locale! • $timeout! • $filter
19. $http • O service $http facilita a integração com APIs. Métodos: .get, .post, .put, .delete, .jsonp
20. Routes (ngRoute) • Em apps mais complexos utilize o $routeProvider do angular, para definir qual controller e template deve ser utilizdo em cada path.
21. Criando um factory para mongoLab • Vamos utilizar o módulo ngResource para criar nosso factory e enviar dados par o mongoLab
22. Como utilizar nosso factory • Vamos utilizar o módulo ngResource para criar nosso factory e enviar dados par o mongoLab
23. • Angular - http://angularjs.org! • MongoDB - http://www.mongodb.org! • MongoLab - https://mongolab.com Referências:
24. Vitor Leal / Telefonica Digital http://github.com/vitorleal http://twitter.com/vitorleal http://vitorleal.com Obrigado!