Carregado porStefan Horochovec
Workshop - Ionic + firebase
O documento aborda diversas ferramentas e frameworks para desenvolvimento de aplicações web modernas, como Node.js, Bower, Gulp.js, AngularJS e Firebase. Apresenta também links para repositórios de código, exemplos de projetos e instruções sobre a criação e gerenciamento de serviços web. Além disso, discute a estrutura do fluxo de trabalho no desenvolvimento e os principais recursos de cada tecnologia mencionada.
Mais conteúdo relacionado
Semelhante a Workshop - Ionic + firebase
Workshop - Ionic + firebase
- 2. Agenda • Overview deSoluções; • NodeJS; • Bower; • GulpJS; • AngularJS; • Cordova; • Ionic; • Firebase;
- 3.
- 5. NodeJS – Oque é? • 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 umservidor HTTP https://github.com/GDGDoisVizinhos/nodejs-http-server
- 7.
- 10. Segundo Projeto Criando umservidor HTTP + Adicionando um serviço REST https://github.com/GDGDoisVizinhos/nodejs-rest-service
- 11.
- 13.
- 16. Modern Webapps workflow Criarum serviço básico de autenticação
- 17. WebApp Workflow • Criaçãode 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 – Oque é? • 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.
- 22.
- 24.
- 27.
- 29.
- 30.
- 32. AngularJS – Oque é? • 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 – Principaisfeatures • 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 – Oque é? • 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.
- 40. Primeira exemplo –Build Taskhttps://github.com/GDGDoisVizinhos/gulp-build-task
- 41. Segundo exemplo -Browser-Sync https://github.com/GDGDoisVizinhos/gulp-browser-sync
- 69.
- 71. Firebase – Oque é? • http://www.firebase.com/ • Google Company; • Realtime Database; • Serviço de Autenticação; • Serviço de Hosting; • SDK para Android, iOS e JavaScript;
- 72.
- 73.
- 74.
- 75. Google Developer Cloud– Criando Aplicação
- 76.
- 77.
- 78.
- 79.
- 80.
- 81. Firebase – Serviçode Autenticação
- 82.
- 83.
- 84. CréditosSlides do número42 ao 68, retirados da apresentação cedida pelo Ionic: http://ionicframework.com/present-ionic/
- 85.