O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Próximos SlideShares
Utilizando Polymer em aplicações móveis
Avançar

10

Compartilhar

Workshop - Ionic + firebase

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

Audiolivros relacionados

Gratuito durante 30 dias do Scribd

Ver tudo

Workshop - Ionic + firebase

  1. 1. Agenda • Overview de Soluções; • NodeJS; • Bower; • GulpJS; • AngularJS; • Cordova; • Ionic; • Firebase;
  2. 2. Ferramentas Modern WebApps
  3. 3. 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);
  4. 4. Primeiro Projeto Criando um servidor HTTP https://github.com/GDGDoisVizinhos/nodejs-http-server
  5. 5. http.js
  6. 6. Segundo Projeto Criando um servidor HTTP + Adicionando um serviço REST https://github.com/GDGDoisVizinhos/nodejs-rest-service
  7. 7. package.json
  8. 8. mensagens.js
  9. 9. Modern Webapps workflow Criar um serviço básico de autenticação
  10. 10. 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;
  11. 11. 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/
  12. 12. Instalação
  13. 13. Iniciando um projetohttps://github.com/GDGDoisVizinhos/bower-primeiro-exemplo
  14. 14. Adicionando dependências
  15. 15. Principais comandos
  16. 16. Configuração
  17. 17. .bowerrc
  18. 18. 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;
  19. 19. AngularJS – Principais features • Bootstrap; • Two-way databinding; • Templates; • Repeaters; • Filters; • Injeção de Dependência; • Routes; • Eventos; • RESTful;
  20. 20. Primeira aplicação - TODOhttps://github.com/GDGDoisVizinhos/angularjs-todo
  21. 21. Segunda Aplicaçao - Routinghttps://github.com/GDGDoisVizinhos/angularjs-router
  22. 22. 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
  23. 23. Instalação
  24. 24. Primeira exemplo – Build Taskhttps://github.com/GDGDoisVizinhos/gulp-build-task
  25. 25. Segundo exemplo - Browser-Sync https://github.com/GDGDoisVizinhos/gulp-browser-sync
  26. 26. Showcase e Demos
  27. 27. 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;
  28. 28. Firebase – Valores
  29. 29. Firebase – Dashboard
  30. 30. Serviço de Databasehttps://github.com/GDGDoisVizinhos/firebase-data
  31. 31. Google Developer Cloud – Criando Aplicação
  32. 32. Google Developer Console - API
  33. 33. Google Developer Console - API
  34. 34. Google Developer Console - API
  35. 35. Google Developer Console - API
  36. 36. Google Developer Console - API
  37. 37. Firebase – Serviço de Autenticação
  38. 38. Serviço de Autenticaçãohttps://github.com/GDGDoisVizinhos/firebase-auth
  39. 39. Aplicativo de Chathttps://github.com/GDGDoisVizinhos/firebase-chat
  40. 40. CréditosSlides do número 42 ao 68, retirados da apresentação cedida pelo Ionic: http://ionicframework.com/present-ionic/
  41. 41. Obrigado!
  • FabianoMonte

    Jan. 20, 2017
  • leosdn

    Sep. 9, 2016
  • aureliano_81

    Mar. 9, 2016
  • karlavianacosta

    Dec. 18, 2015
  • elias.nogueira

    Dec. 18, 2015
  • AndreusTimm

    Nov. 17, 2015
  • juarezpaf

    Nov. 17, 2015
  • jgabriellima

    Nov. 17, 2015
  • ramonrabello

    Nov. 17, 2015
  • odairseixas

    Nov. 16, 2015

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

Vistos

Vistos totais

1.660

No Slideshare

0

De incorporações

0

Número de incorporações

321

Ações

Baixados

0

Compartilhados

0

Comentários

0

Curtir

10

×