Firebase ♥️ Web - Speaker Deck

Slide 1

Slide 1 text

GDG Thailand Firebase Thailand Organized by Firebase ♥ Web Thanongkiat Tamtai Doosoft

Slide 2

Slide 2 text

#FirebaseDevDay

Slide 3

Slide 3 text

#FirebaseDevDay Google Analytics for Firebase

Slide 4

Slide 4 text

#FirebaseDevDay

Slide 5

Slide 5 text

#FirebaseDevDay Integrations with other services - BigQuery - Crashlytics - Firebase Cloud Messaging - Firebase Remote Config - Firebase A/B Testing - Firebase Predictions - Google Tag Manager

Slide 6

Slide 6 text

#FirebaseDevDay var firebaseConfig = { apiKey: "api-key", authDomain: "project-id.firebaseapp.com", databaseURL: "https://project-id.firebaseio.com", projectId: "project-id", storageBucket: "project-id.appspot.com", messagingSenderId: "sender-id", appId: "app-id", measurementId: "G-measurement-id", };

Slide 7

Slide 7 text

#FirebaseDevDay

Slide 8

Slide 8 text

#FirebaseDevDay const analytics = firebase.analytics() analytics.logEvent('login', { eventParameters }) firebase.auth().onAuthStateChanged( async user => { user && analytics.setUserId(user.uid) }) firebase.auth().onIdTokenChanged(async user => { user && analytics.setUserProperties({ userTokenParameters }) })

Slide 9

Slide 9 text

#FirebaseDevDay exports.sendCouponOnPurchase = functions.analytics.event('in_app_purchase').onLog((event) => { const user = event.user; const uid = user.userId; const purchaseValue = event.valueInUSD; const userLanguage = user.deviceInfo.userDefaultLanguage; const Platform = event.user.appInfo.appPlatform if (purchaseValue > 500 && Platform === ‘Web’) { return sendHighValueCouponViaFCM(uid, userLanguage); } return sendCouponViaFCM(uid, userLanguage); }); Integrate with Firebase Cloud Functions

Slide 10

Slide 10 text

#FirebaseDevDay Firebase Remote Config

Slide 11

Slide 11 text

#FirebaseDevDay

Slide 12

Slide 12 text

#FirebaseDevDay

Slide 13

Slide 13 text

#FirebaseDevDay

Slide 14

Slide 14 text

#FirebaseDevDay

Slide 15

Slide 15 text

#FirebaseDevDay

Slide 16

Slide 16 text

#FirebaseDevDay const remoteConfig = firebase.remoteConfig(); remoteConfig.settings = { minimumFetchIntervalMillis: 3600000, }; remoteConfig.defaultConﬁg = ({ 'welcome_message': 'Welcome', }); remoteConfig.fetchAndActivate().then(() => { showWelcomeMessage(); }) const welcomeMessage = remoteConfig.getValue('welcome_message')

Slide 17

Slide 17 text

#FirebaseDevDay Firebase Cloud Messaging

Slide 18

Slide 18 text

#FirebaseDevDay

Slide 19

Slide 19 text

#FirebaseDevDay

Slide 20

Slide 20 text

#FirebaseDevDay

Slide 21

Slide 21 text

#FirebaseDevDay

Slide 22

Slide 22 text

#FirebaseDevDay Message JSON representation { "name": string, "data": { string: string, ... }, "notification": { object (Notification) }, "android": { object (AndroidConfig) }, "webpush": { object (WebpushConfig) }, "apns": { object (ApnsConfig) }, "fcm_options": { object (FcmOptions) }, // Pick 1 "token": string, "topic": string, "condition": string }

Slide 23

Slide 23 text

#FirebaseDevDay Notification JSON representation { "title": string, "body": string, "image": string }

Slide 24

Slide 24 text

#FirebaseDevDay Webpush JSON representation { "headers": { string: string, // Urgency: ’low’, TTL: 600 , Content-Type: text/plain;charset=utf8 }, "data": { string: string, }, "notification": { object }, "fcm_options": { { "link": string } } }

Slide 25

Slide 25 text

#FirebaseDevDay POST https://fcm.googleapis.com/v1/projects/myproject-b5ae1/messages:send HTTP/1.1 Content-Type: application/json Authorization: Bearer ya29.ElqKBGN2Ri_Uz...PbJ_uNasm { "message": { "token" : , "notification": { "title": "FCM Message", "body": "This is a message from FCM" }, "webpush": { "headers": { "Urgency": "high" }, "notification": { "body": "This is a message from FCM to web", "requireInteraction": "true", "badge": "/badge-icon.png" } } } }

Slide 26

Slide 26 text

#FirebaseDevDay WebAPI > Notification https://developer.mozilla.org/en-US/docs/Web/API/notification/Notification

Slide 27

Slide 27 text

#FirebaseDevDay https://tools.ietf.org/html/rfc8030

Slide 28

Slide 28 text

#FirebaseDevDay Firebase Performance Monitoring

Slide 29

Slide 29 text

#FirebaseDevDay const perf = firebase.performance()

Slide 30

Slide 30 text

#FirebaseDevDay const perf = firebase.performance()

Slide 31

Slide 31 text

#FirebaseDevDay

Slide 32

Slide 32 text

#FirebaseDevDay

Slide 33

Slide 33 text

#FirebaseDevDay const fooScreen = perf.trace('fooScreen') ngOnInit() { fooScreen.start() } ngOnDestroy() { fooScreen.stop() }

Slide 34

Slide 34 text

#FirebaseDevDay const fooQueryTrace = perf.trace('fooQuery') const fooQueryRef = firebase.firestore().collection('eiei') fooQueryTrace.start() const fooQueryRes = await fooQueryRef.get() fooQueryTrace.incrementMetric('totalFooSize', fooQueryRes.size) fooQueryTrace.putMetric('itemFooSize', fooQueryRes.size) fooQueryTrace.stop()

Slide 35

Slide 35 text

#FirebaseDevDay Monitor HTTP/S network requests example.com/*/animals/** ● example.com/singapore/animals ● example.com/australia/animals/spiders ● example.com/australia/animals/marsupials/koala.png

Slide 36

Slide 36 text

Thank You! #FirebaseDevDay Helpful resources fb.com/FirebaseThailand fb.com/groups/FirebaseDevTH medium.com/FirebaseThailand Thanongkiat Tamtai