[GCPUG India] Firebase - Build Extraordinary Apps

Transcript

1. Firebase: Build Extraordinary Apps
2. +Kazunori Sato @kazunori_279 Kaz Sato Developer Advocate, Cloud Platform, Google Inc. Cloud community advocacy Cloud product launch support
3. Mobile App for Millions of People Authentication. Storing Data. Interactions.
4. “Make it work in the Cloud”
5. In the Cloud, you need… Front End. Business Logic. Database. Multiple Servers, Load Balancers, Replicas, Backups...
6. For Clients, you need to support… Smart Phones. Tablets. Desktops. Android, iOS and Browsers
7. Talking to a Backend Large Scale M-to-N Connections with Realtime messaging … It’s not easy
8. = Expensive Engineering Time
9. Is there a better way?
10. Firebase is a powerful platform for mobile and web applications.
11. Firebase User Authentication Realtime Database Static Hosting
12. Firebase User Authentication Realtime Database Static Hosting
13. Firebase User Authentication Realtime Database Static Hosting
14. Location Collaboration Gaming Realtime is…
15. Location Collaboration Gaming Realtime is…
16. Location Collaboration Gaming Realtime is…
17. Unreliable networks Multi Platform Realtime is hard! Complex Transport Stateful 2-way connection How to implement it?
18. Unreliable networks Multi Platform Realtime is hard! Complex Transport 4G/WiFi switching. Subways. Tunnels. Basements.
19. Unreliable networks Multi Platform Realtime is hard! Complex Transport Different Capabilities, Behaviors and Languages
20. Firebase in the Real World
21. CBS 50,000 Concurrent Users 27,000,000 chat messages
22. $40,000 Kickstarter 100,000 Users
23. 200,000+ Developers
24. How to Develop?
25. Demo: mmoasteroids
26. Firebase Dashboard Database. Security. Analytics. Debugging. Deployment.
27. Setup // Firebase connection Stuff var firebaseRef = new Firebase("https://mmoasteroids.firebaseio.com"); var firebaseRefGame = firebaseRef.child('game');
28. Start up the user’s ship // Add player's ship to Firebase var myship = firebaseRefGame.child('players').push(); // Schedule player removal on disconnect at the backend myship.onDisconnect().remove();
29. // Write new ship location to Firebase on any update myship.set({ ship: { acc: this.acc, vel: this.vel, x: this.x, y: this.y, rot: this.rot, accb: KEY_STATUS.up }, user: currentUser }); Write our ship to firebase on updates
30. // Sync new enemy ships from Firebase to local game state firebaseRefGame.child('players').on('child_added', function (snapshot) { if (snapshot.key() !== myship.key()) { var enemy = new EnemyShip(); enemy.acc = snapshot.val().ship.acc; enemy.vel = snapshot.val().ship.vel; enemy.x = snapshot.val().ship.x; enemy.y = snapshot.val().ship.y; enemy.rot = snapshot.val().ship.rot; enemy.accb = snapshot.val().ship.accb; enemy.user = snapshot.val().user; enemy.visible = true; enemy.fref = firebaseRefGame.child('players').child(snapshot.key()); }}); We read enemy ships too...
31. firebaseRefGame.child('players').on('child_removed', function (snapshot) { if (snapshot.key() !== myship.key()) { var enemy = Game.sprites[snapshot.key()]; enemy.visible = false; delete Game.sprites[snapshot.key()]; Game.explosionAt(snapshot.val().ship.x, snapshot.val().ship.y); } else { Game.ship.collision(null); } }) We handle enemy ship “removal”
32. bullet.fref = firebaseRefGame.child('bullets').push({ s: myship.key(), x: bullet.x, y: bullet.y, vel: bullet.vel }); bullet.fref.onDisconnect().remove(); Bullets
33. // Sync enemy bullets from Firebase to local game state firebaseRefGame.child('bullets').on('child_added', function (snapshot) { var bullet = snapshot.val(); if (bullet.s !== myship.key()) { var enemybullet = new EnemyBullet(); enemybullet.x = bullet.x; enemybullet.y = bullet.y; enemybullet.vel = bullet.vel; enemybullet.visible = true; enemybullet.fref = firebaseRefGame.child('bullets').child(snapshot.key()); Game.sprites['bullet:' + snapshot.key()] = enemybullet; }}); Enemy bullets
34. firebaseRefGame.child('bullets').on('child_removed', function (snapshot) { var bullet = snapshot.val(); if (bullet.s !== myship.key()) { var enemybullet = Game.sprites['bullet:' + snapshot.key()]; if (enemybullet != null) { enemybullet.visible = false; } delete Game.sprites['bullet:' + snapshot.key()]; } }); Enemy bullet removal
35. Conclusions
36. Mobile Is Important!
37. Traditionally Complex!
40. https://firebase.com
41. Thank you! This work is licensed under a Creative Commons Attribution 2.0 Generic License.