AngularJS é um framework JavaScript open-source, mantido pelo Google, que auxilia na execução de aplicações web modernas como as single-page applications. Essa tecnologia, combinada com o Google Firebase, permite o desenvolvimento de aplicativos com maior rapidez e flexibilidade com recursos baseados em nuvem. Auxiliado ainda pela plataforma AppInventor, desenvolvida pelo MIT, pode-se dar maior penetração por meio de aplicativos Android que interagem com os recurso do Google Firebase.
Desenvolvemos um curso para mostrar como desenvolver uma aplicação moderna compondo tecnologias e plataformas como Angular.js e AppInventor no frontend e a ferramenta Firebase como backend. Como requisito o aluno precisa ter conhecimentos sólidos de programação. A partir da combinação dessas tecnologias – utilizando a criatividade – inúmeros problemas do mundo real podem ser solucionados com facilidade e custo que escala conforme sua necessidade!
Este curso foi originalmente apresentado presencialmente na Semana de Computação da UFRPE, mas resolvemos deixar o material disponível para todos.
Módulos:
O curso está divido basicamente em 4 módulos:
- No primeiro módulo apresentamos o Angular.JS, sua arquitetura e diretrizes. Ao final desse módulo o aluno poderá criar um projeto CRUD simples.
- Já no segundo módulo são apresentados conceitos básicos da plataforma AppInventor para construir um aplicativo no próprio smartphone.
- O terceiro módulo apresenta formas para armazenamento e manipulação de dados do Google Firebase integrada em uma app construída no AppInventor.
- O módulo final apresenta a integração de uma aplicação Angular.JS ao Google Firebase.
O conhecimento apresentado nos módulos são reunidos, no final, no desenvolvimento de um sistema de gerenciamento de pedidos em restaurante. A ideia é mostrar como construir uma solução integrada e moderna. Para uma introdução ao Firebase, confira nosso curso Armazenamento em Nuvem com Python e Google Firebase.
Módulo [1] – Introdução ao Angular.JS
![Curso Angular, Firebase e AppInventor [MÓDULO ANGULAR.JS]](https://jualabs.files.wordpress.com/2017/11/curso-angular-firebase-e-appinventor-mc3b3dulo-angular-js.png?w=1000)
Módulo [2] – Introdução ao Android AppInventor
![Curso Pyrebase [Módulo Firebase]](https://jualabs.files.wordpress.com/2017/11/curso-pyrebase-mc3b3dulo-firebase.png?w=1000)
Módulo [3] – Integrando apps Android ao Google Firebase
![Curso Angular, Firebase e AppInventor [MÓDULO APPINVENTOR + FIREBASE]](https://jualabs.files.wordpress.com/2017/11/curso-angular-firebase-e-appinventor-mc3b3dulo-appinventor-firebase.png?w=1000)
Módulo [4] – Integrando app Angular.JS ao Google Firebase
![Curso Angular, Firebase e AppInventor [MÓDULO FIREBASE + ANGULAR.JS]](https://jualabs.files.wordpress.com/2017/11/curso-angular-firebase-e-appinventor-mc3b3dulo-firebase-angular-js.png?w=1000)
SISTEMA DE PIZZARIA SIMPLES
Nesse programa criamos uma aplicação web a partir de um template em HTML e CSS, e utilizamos o Angular.JS para listar e remover um pedido apresentado na view. Utilizamos o Google Firebase para armazenamento dos dados e desenvolvemos (através do AppInventor MIT) um app Android para cadastrar pedidos.
Primeiro faça o download desse repositório em sua máquina:
https://github.com/FelipeOliveiraTI/AngularFirebaseAppInventorSeComp.git
Após baixar os arquivos, acesse a pasta “js”, abra o arquivo “pizza.controller.js” e adicione suas configurações do Firebase na variável “config”, conforme foi apresentado no módulo [4]
Depois vá na galeria no AppInventor e procure pelo projeto “Pizzaria – SeComp”, abra o projeto e adicione suas configurações do Firebase, tal como mostrado na aula do módulo [3].
Agora seu sistema está pronto! Faça um fork do nosso projeto e modifique-o à vontade!