Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[GCPUG India] Firebase - Build Extraordinary Apps

[GCPUG India] Firebase - Build Extraordinary Apps

Kazunori Sato

July 04, 2015
Tweet

More Decks by Kazunori Sato

Other Decks in Programming

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