[GCPUG India] Firebase - Build Extraordinary Apps

Transcript

1. Firebase:
   Build Extraordinary Apps
   

   View Slide

2. +Kazunori Sato
   @kazunori_279
   Kaz Sato
   Developer Advocate,
   Cloud Platform, Google Inc.
   Cloud community advocacy
   Cloud product launch support
   

   View Slide

3. Mobile App for
   Millions of People
   Authentication.
   Storing Data.
   Interactions.
   

   View Slide

4. “Make it work
   in the Cloud”
   

   View Slide

5. In the Cloud,
   you need…
   Front End.
   Business Logic.
   Database.
   Multiple Servers,
   Load Balancers,
   Replicas, Backups...
   

   View Slide

6. For Clients,
   you need to support…
   Smart Phones.
   Tablets.
   Desktops.
   Android, iOS and
   Browsers
   

   View Slide

7. Talking to a Backend
   Large Scale M-to-N Connections
   with Realtime messaging … It’s not easy
   

   View Slide

8. = Expensive Engineering Time
   

   View Slide

9. Is there a better way?
   

   View Slide

10. Firebase is a powerful platform for
    mobile and web applications.
    

    View Slide

11. Firebase
    User
    Authentication
    Realtime
    Database
    Static
    Hosting
    

    View Slide

12. Firebase
    User
    Authentication
    Realtime
    Database
    Static
    Hosting
    

    View Slide

13. Firebase
    User
    Authentication
    Realtime
    Database
    Static
    Hosting
    

    View Slide

14. Location Collaboration Gaming
    Realtime is…
    

    View Slide

15. Location Collaboration Gaming
    Realtime is…
    

    View Slide

16. Location Collaboration Gaming
    Realtime is…
    

    View Slide

17. Unreliable networks Multi Platform
    Realtime is hard!
    Complex Transport
    Stateful 2-way connection
    How to implement it?
    

    View Slide

18. Unreliable networks Multi Platform
    Realtime is hard!
    Complex Transport
    4G/WiFi switching. Subways.
    Tunnels. Basements.
    

    View Slide

19. Unreliable networks Multi Platform
    Realtime is hard!
    Complex Transport
    Different Capabilities,
    Behaviors and Languages
    

    View Slide

20. Firebase
    in the Real World
    

    View Slide

21. CBS
    50,000
    Concurrent
    Users
    27,000,000
    chat
    messages
    

    View Slide

22. $40,000
    Kickstarter
    100,000
    Users
    

    View Slide

23. 200,000+
    Developers
    

    View Slide

24. How to Develop?
    

    View Slide

25. Demo: mmoasteroids
    

    View Slide

26. Firebase Dashboard
    Database.
    Security.
    Analytics.
    Debugging.
    Deployment.
    

    View Slide

27. Setup
    // Firebase connection Stuff
    var firebaseRef = new Firebase("https://mmoasteroids.firebaseio.com");
    var firebaseRefGame = firebaseRef.child('game');
    

    View Slide

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();
    

    View Slide

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
    

    View Slide

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...
    

    View Slide

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”
    

    View Slide

32. bullet.fref = firebaseRefGame.child('bullets').push({
    s: myship.key(),
    x: bullet.x,
    y: bullet.y,
    vel: bullet.vel
    });
    bullet.fref.onDisconnect().remove();
    Bullets
    

    View Slide

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
    

    View Slide

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
    

    View Slide

35. Conclusions
    

    View Slide

36. Mobile Is
    Important!
    

    View Slide

37. Traditionally
    Complex!
    

    View Slide

38. View Slide

39. View Slide

40. https://firebase.com
    

    View Slide

41. Thank you!
    This work is licensed under a Creative Commons Attribution 2.0 Generic License.
    

    View Slide