Prototipando Rápido com React e Firebase - Campinas Frontend

Transcript

1. Prototipando rápido com React + Firebase Bruno Orlandi
2. Situações no trabalho • Produto de software ◦ Funcionalidades novas ◦ Produtos novos • Software sob demanda ◦ Provas de conceito ◦ Protótipos • Customizações e integração com serviços ◦ Provas de conceito ◦ Entender solução que o cliente precisa Prototipação
3. Desenvolvimento de Projetos • Projetos individuais ◦ Estudo de tecnologias ◦ Implementar ideias • Software interno da empresa ◦ Auxiliar o time, automação de tarefas ◦ Integração com sistemas internos • Projetos que ajudam o mundo MVP - Minimum Viable Product
4. Bruno Orlandi • Desenvolvedor Frontend • UPX Technologies • Professor de Git e GitHub • Kassel Labs • Fã de Star Wars @brorlandi https://brorlandi.github.io/
5. O jeito mais rápido de desenvolver um protótipo funcional?
6. Desenvolvimento de Software • Backend? • API REST? • Banco de Dados? • Frontend? • React+Redux, Angular, Vue? • MVC? • CRUD? • Autenticação de Usuários? • Mobile? • Upload de arquivos? • Sincronização de dados? • Notificações? • Deploy? Protótipo? MVP?
7. Firebase • Inicio → Realtime Database - 2011 • Comprada pela Google - 2014 • Plataforma unificada de aplicações - 2016 ◦ Aplicações Mobile e Web ◦ Autenticação, Database e Hosting
8. Ferramentas do Firebase Realtime Database • Database = Objeto JSON • Sem Arrays • Sincronização em tempo real • API Rest • Regras de leitura e escrita • Backups
9. Ferramentas do Firebase Authentication
10. Produtos do Firebase
11. O que dá pra fazer com Firebase? • Chat em tempo real • Jogos em tempo real • Coletar crashes de aplicativos • Monitorar performance de aplicativos • Configurações remotas, testes A/B • Ads • Integrar com APIs, exemplo: pagamentos • SDK para: Android, iOS, C++, Unity, Web e Node.js
12. Exemplo Chat https://oh-my-chat.firebaseapp.com/
13. Autenticação • Configurar provider no console • Ouvir: onAuthStateChanged • Gerencia os cookies automaticamente
14. Enviar e receber mensagens • Push de um objeto no banco • Ouvir um callback do Firebase • React: conectar o callback com o State do componente
15. Custos Firebase
16. Exemplo de Notificações
17. VotaSP - Minha Campinas
18. Case Star Wars Intro Creator • Criar suas próprias aberturas • Usos: • Aniversário, Casamento, Eventos • Psicólogos, hospital de câncer • Educação, palestras empresariais • Já foi usado pela NASA • https://starwarsintrocreator.kassellabs.io
19. • Ajudar as pessoas a expressarem sua criatividade e imaginação • Atualmente: ◦ Star Wars Intro Creator ◦ Stranger Things Intro Creator ◦ Westworld Intro Creator • http://kassellabs.io/ Kassel Labs.io
20. https://hackernoon.com/how-we-spent-30k-usd-in-firebase-in-less-th an-72-hours-307490bd24d
21. Próximo meetup: Dojo de Firebase Sábado 22 de Setembro às 9h Dúvidas?
22. Valeu! brorlandi.github.io KasselLabs.io