Aplicações modernas com Angular.js, Firebase e AppInventor.

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:

  1. 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.
  2. Já no segundo módulo são apresentados conceitos básicos da plataforma AppInventor para construir um aplicativo no próprio smartphone.
  3. O terceiro módulo apresenta formas para armazenamento e manipulação de dados do Google Firebase integrada em uma app construída no AppInventor.
  4. 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]
Para acessar o módulo: Curso Angular, Firebase e AppInventor [MÓDULO ANGULAR.JS]

Módulo [2] – Introdução ao Android AppInventor

Curso Angular, Firebase e AppInventor [MÓDULO APPINVENTOR MIT - ANDROID]
Para acessar o módulo: Curso Angular, Firebase e AppInventor [MÓDULO ANDROID APP-INVENTOR MIT]
Entenda abaixo sobre o Google Firebase antes de avançar para o próximo módulo. Caso precise de uma introdução mais detalhada confira nosso curso Armazenamento em Nuvem com Python e Google Firebase.

Curso Pyrebase [Módulo Firebase]
Para acessar:  [Módulo Firebase]

Módulo [3] – Integrando apps Android ao Google Firebase

Curso Angular, Firebase e AppInventor [MÓDULO APPINVENTOR + FIREBASE]
Para acessar o módulo:  Curso Angular, Firebase e AppInventor [MÓDULO APPINVENTOR + FIREBASE]

Módulo [4] – Integrando app Angular.JS ao Google Firebase

Curso Angular, Firebase e AppInventor [MÓDULO FIREBASE + ANGULAR.JS]
Para acessar o módulo: Curso Angular, Firebase e AppInventor [MÓDULO FIREBASE + ANGULAR.JS]

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!

Publicidade

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s