Workshop organizado pelo Google Developer Group - Dois Vizinhos, ministrado na Tagon8 no dia 14 de novembro.

2. Agenda
• Overview de Soluções;
• NodeJS;
• Bower;
• GulpJS;
• AngularJS;
• Cordova;
• Ionic;
• Firebase;

3. Ferramentas
Modern WebApps

5. NodeJS – O que é?
• http://www.nodejs.org/
• Plataforma baseada no Javascript runtime do Google Chrome – V8;
• Criado para desenvolvimento de aplicações de alto desempenho;
• Baseado em Eventos de I/O;
• Apps real-time (Websockets);
• Não confundir com Ajax (requisições assíncronas);
• Operação via command-line;
• Javascript de todos os lados (front-end e back-end);
• Não suporta base de dados relacionais;
• Disponível para Windows, Linux e MacOS;
• Gerenciamento de pacotes via NPM (Node Package Manager);

6. Primeiro Projeto
Criando um servidor HTTP
https://github.com/GDGDoisVizinhos/nodejs-http-server

7. http.js

10. Segundo Projeto
Criando um servidor HTTP + Adicionando um serviço REST
https://github.com/GDGDoisVizinhos/nodejs-rest-service

11. package.json

13. mensagens.js

16. Modern Webapps workflow
Criar um serviço básico de autenticação

17. WebApp Workflow
• Criação de estrutura básica como diretórios e arquivos estruturais do projeto;
• Instruções de SaaS/LEES;
• Programação Javascript++;
• Alterações de CSS++;
• Criação de formulários;
• Programação Javascript++;
• Mais alterações de CSS++;
• Deploy da aplicação:
• Testes;
• Lint;
• Minificação;
• Compilação CSS;

19. Bower – O que é?
• http://bower.io/
• Ferramenta para gerenciamento de pacotes relacionados ao desenvolvimento
WEB;
• Pré-requisitos: NodeJS;
• Mantem a estrutura de dependências do projeto no arquivo bower.json;
• Todos os componentes são adicionados no diretório bower_components;
• Documentação: http://bower.io/docs/api/#commands
• Configuração: http://bower.io/docs/config/

20. Instalação

22. Iniciando um projetohttps://github.com/GDGDoisVizinhos/bower-primeiro-exemplo

24. Adicionando dependências

27. Principais comandos

29. Configuração

30. .bowerrc

32. AngularJS – O que é?
• http://www.angularjs.org/
• Framework JavaScript com grande foco em HTML;
• Conceito MVC;
• Desenvolvido pela Google;
• Permite uma padronização de arquitetura “enterprise” em uma aplicação web
dinâmica;
• Permite criação de novas tags em HTML para seu navegador interpretar;
• Suporta os navegadores: IE8+, Chrome, Firefox, Safari e Opera;

33. AngularJS – Principais features
• Bootstrap;
• Two-way databinding;
• Templates;
• Repeaters;
• Filters;
• Injeção de Dependência;
• Routes;
• Eventos;
• RESTful;

34. Primeira aplicação - TODOhttps://github.com/GDGDoisVizinhos/angularjs-todo

35. Segunda Aplicaçao - Routinghttps://github.com/GDGDoisVizinhos/angularjs-router

37. GulpJS – O que é?
• http://www.gulp.js/
• Ferramenta para build de aplicações web modernas;
• Pré-requisitos: NodeJS;
• Através de um único arquivo você pode trabalhar com o build de seus
aplicativos;
• Operação via command-line;
• Lista de plugins: http://gulpjs.com/plugins/
• Documentação de tarefas:
https://github.com/gulpjs/gulp/blob/master/docs/API.md

38. Instalação

40. Primeira exemplo – Build Taskhttps://github.com/GDGDoisVizinhos/gulp-build-task

41. Segundo exemplo - Browser-Sync
https://github.com/GDGDoisVizinhos/gulp-browser-sync

69. Showcase e Demos

71. Firebase – O que é?
• http://www.firebase.com/
• Google Company;
• Realtime Database;
• Serviço de Autenticação;
• Serviço de Hosting;
• SDK para Android, iOS e JavaScript;

72. Firebase – Valores

73. Firebase – Dashboard

74. Serviço de Databasehttps://github.com/GDGDoisVizinhos/firebase-data

75. Google Developer Cloud – Criando Aplicação

76. Google Developer Console - API

77. Google Developer Console - API

78. Google Developer Console - API

79. Google Developer Console - API

80. Google Developer Console - API

81. Firebase – Serviço de Autenticação

82. Serviço de Autenticaçãohttps://github.com/GDGDoisVizinhos/firebase-auth

83. Aplicativo de Chathttps://github.com/GDGDoisVizinhos/firebase-chat

84. CréditosSlides do número 42 ao 68, retirados da apresentação cedida pelo Ionic: http://ionicframework.com/present-ionic/

85. Obrigado!