Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
[GCPUG India] Firebase - Build Extraordinary Apps
Search
Kazunori Sato
July 04, 2015
Programming
2
250
[GCPUG India] Firebase - Build Extraordinary Apps
Kazunori Sato
July 04, 2015
Tweet
Share
More Decks by Kazunori Sato
See All by Kazunori Sato
Tensor Processing Unit (TPU) Overview (July 6, 2018)
kazunori279
0
180
FPGAによる大規模データ処理の高速化
kazunori279
0
93
Googleがめざす、誰もが使える機械学習
kazunori279
4
4.7k
Machine Intelligence at Google Scale
kazunori279
3
1.4k
Machine Intelligence at Google Scale: Vision/Speech API, TensorFlow and Cloud Machine Learning
kazunori279
3
5.3k
Distributed TensorFlow
kazunori279
3
2.3k
What is Google BigQuery?
kazunori279
0
44
Cloud Vision API and TensorFlow
kazunori279
7
9.1k
Having fun with Google Cloud + RasPi
kazunori279
0
1.1k
Other Decks in Programming
See All in Programming
DjangoNinjaで高速なAPI開発を実現する
masaya00
0
500
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
390
dbt-ga4パッケージを実業務に導入してみた話
t_tokumaru_feedcorp
0
120
利用者視点で考える、イテレータとの上手な付き合い方
syumai
4
230
Compose Multiplatform과 Ktor로 플랫폼의 경계를 넘어보자
kwakeuijin
0
260
モジュラモノリス、その前に / Modular monolith, before that
euglena1215
6
680
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
840
(Deep|Web) Link support with expo-router
mrtry
0
170
クラウドサービスの 利用コストを削減する技術 - 円安の真南風を感じて -
pyama86
3
390
CSC509 Lecture 03
javiergs
PRO
0
140
データフレームライブラリ徹底比較
daikikatsuragawa
2
100
メルカリ ハロ アプリの技術スタック
atsumo
2
750
Featured
See All Featured
Infographics Made Easy
chrislema
239
18k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
362
19k
What the flash - Photography Introduction
edds
67
11k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Clear Off the Table
cherdarchuk
91
320k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
A better future with KSS
kneath
237
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
What's in a price? How to price your products and services
michaelherold
243
11k
Transcript
Firebase: Build Extraordinary Apps
+Kazunori Sato @kazunori_279 Kaz Sato Developer Advocate, Cloud Platform, Google
Inc. Cloud community advocacy Cloud product launch support
Mobile App for Millions of People Authentication. Storing Data. Interactions.
“Make it work in the Cloud”
In the Cloud, you need… Front End. Business Logic. Database.
Multiple Servers, Load Balancers, Replicas, Backups...
For Clients, you need to support… Smart Phones. Tablets. Desktops.
Android, iOS and Browsers
Talking to a Backend Large Scale M-to-N Connections with Realtime
messaging … It’s not easy
= Expensive Engineering Time
Is there a better way?
Firebase is a powerful platform for mobile and web applications.
Firebase User Authentication Realtime Database Static Hosting
Firebase User Authentication Realtime Database Static Hosting
Firebase User Authentication Realtime Database Static Hosting
Location Collaboration Gaming Realtime is…
Location Collaboration Gaming Realtime is…
Location Collaboration Gaming Realtime is…
Unreliable networks Multi Platform Realtime is hard! Complex Transport Stateful
2-way connection How to implement it?
Unreliable networks Multi Platform Realtime is hard! Complex Transport 4G/WiFi
switching. Subways. Tunnels. Basements.
Unreliable networks Multi Platform Realtime is hard! Complex Transport Different
Capabilities, Behaviors and Languages
Firebase in the Real World
CBS 50,000 Concurrent Users 27,000,000 chat messages
$40,000 Kickstarter 100,000 Users
200,000+ Developers
How to Develop?
Demo: mmoasteroids
Firebase Dashboard Database. Security. Analytics. Debugging. Deployment.
Setup // Firebase connection Stuff var firebaseRef = new Firebase("https://mmoasteroids.firebaseio.com");
var firebaseRefGame = firebaseRef.child('game');
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();
// 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
// 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...
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”
bullet.fref = firebaseRefGame.child('bullets').push({ s: myship.key(), x: bullet.x, y: bullet.y, vel:
bullet.vel }); bullet.fref.onDisconnect().remove(); Bullets
// 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
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
Conclusions
Mobile Is Important!
Traditionally Complex!
None
None
https://firebase.com
Thank you! This work is licensed under a Creative Commons
Attribution 2.0 Generic License.