Prototipando rápido com React e Firebase

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 Sr • 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 • Comprada pela Google • Conjunto de vários Produtos
8. Ferramentas do Firebase Realtime Database • Database = Objeto JSON • Sem Arrays • Regras de leitura e escrita • Sincronização em tempo real • API Rest • Backups
9. Ferramentas do Firebase Authentication • Vários providers • Plug and Play • Nº Telefone - SMS • Passwordless
10. Ferramentas do Firebase Firebase Cloud Messaging (FCM) • Antigo GCM • iOS, Android, Web...
11. Ferramentas do Firebase
12. 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
13. Exemplo Chat https://oh-my-chat.firebaseapp.com/
14. Autenticação • Configurar provider no console • Ouvir: onAuthStateChanged • Gerencia os cookies automaticamente
15. Enviar e receber mensagens • Push de um objeto no banco • Ouvir um callback do Firebase • React: conectar o callback com o State do componente
16. Exemplo Sino Virtual
17. Envio de Notificações • Salvar tokens de subscription • Registrar service worker do Firebase • Enviar notificação: escrever no database • Criar uma Cloud Function para ouvir escritas • Enviar notificação quando houver uma nova no banco
18. Custos Firebase
19. Case Star Wars Intro Creator • Criar suas próprias aberturas • Firebase para armazenamento • Sem Realtime • Usos: • Psicólogos, hospital de câncer • Educação, palestras empresariais • Já foi usado pela NASA • https://starwarsintrocreator.github.io
20. • Missão: ajudar as pessoas a expressarem sua criatividade e imaginação • Desenvolver mais projetos • Atualmente: ◦ Star Wars Intro Creator ◦ Stranger Things Intro Creator ◦ Westworld Intro Creator • http://kassellabs.io/ Kassel Labs.io
21. Obrigado! brorlandi.github.io KasselLabs.io