[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!

38. None
39. None

40. https://firebase.com

41. Thank you! This work is licensed under a Creative Commons

    Attribution 2.0 Generic License.