Firebase na webu? Hračka

Pojďme si společně ukázat použití Firebase na webu. Podíváme se jak jí jednoduše použít na webu pomocí knihovny Polymerfire a projdeme si kompletní demo, postavené na Firebase, včetně notifikací a používání nově vydaných Cloud Functions.

Společnost Firebase byla založena v roce 2011 a na podzim roku 2014 ji koupil Google. Firebase je sada nástrojů, která vývojářům umožňuje jednodušší vytváření Android, iOS a webových aplikací.

Filip Procházka je Android a web developer na volné noze a vedoucí skupiny GDG Plzeň. Je partnerem a Android vývojářem ve společnbosti Step Up Labs.

--------------------------------------------------

Ukázku z prezentace najdete na GitHubu zde: https://github.com/filipproch/talk-firebase-shop-demo

Transcript

1. Filip Procházka @filipproch Firebase na webu? Hračka
2. Firebase
4. ⋅ Cloud-hosted NoSQL database ⋅ Synchronization & conflict resolution ⋅ Access directly from your app
8. ⋅ Authentication & account management ⋅ Supports: ⋅ Email & password ⋅ Google, Facebook, Twitter, and GitHub sign-in ⋅ Existing auth systems Out-of-the box UI
9. SectionX SectionY SectionZ ⋅ Serve static assets ⋅ SSL by default ⋅ Custom domains
10. ⋅ Easy file storage ⋅ Handles poor connectivity ⋅ Backed by & accessible from Google Cloud Storage
12. ⋅ No Cost cross-platform messaging solution ⋅ Notifications to drive user interaction ⋅ Versatile Messaging Targeting
13. ⋅ Serverless, easy deployment ⋅ Node.js ⋅ Database, Pub/Sub, HTTP, Auth, Analytics triggers
14. Demo project
15. Realtime Database • Categories • Products • User information • Orders
16. Auth • User login • Access to orders • Pairing orders with user
17. Storage • Images of categories • Images of products
18. Hosting • Hosting of our web application
19. FCM • Notifications about order status
20. Functions • Sending FCM notifications
21. Our shop
22. <screenshot>
23. Polymer
24. Web Components?
25. <dom-module id="contact-card"> ... </dom-module>
26. <template> <style>...</style> <content></content> <iron-icon icon="star" hidden$="{{!starred}}"> </iron-icon> </template>
27. <script> Polymer({ is: 'contact-card', properties: { starred: Boolean } }); </script>
28. <contact-card starred> <img src="profile.jpg" alt="Eric's photo"> <span>Eric Bidelman</span> </contact-card
30. Polymerfire
31. <firebase-app auth-domain="mydb.firebaseapp.com" database-url="https://mydb.firebaseio.com/" api-key="AIzaSyDTP-eiQezleFsV2WdEzx_8v_g"> </firebase-app>
32. <firebase-auth id="auth" user="{{user}}" provider="google" on-error="handleError"> </firebase-auth> this.$.auth.signInWithPopup()
33. <firebase-document path="/path/in/firebase" data="{{data}}"> </firebase-document>
34. <firebase-query path="/path/in/firebase" data="{{data}}"> </firebase-query>
35. <firebase-messaging id="messaging" token="{{token}}" on-message="_onMessageReceived"> </firebase-messaging>
36. Back to our shop
37. Database structure
42. Read our data
43. <firebase-document path="/categories" data="{{categories}}"> </firebase-document>
44. <firebase-document path="/goods" data="{{goods}}"> </firebase-document>
45. <firebase-query path="/users/[[user.uid]]/cart" data="{{cart}}"> </firebase-query>
46. <firebase-query path="/orders" order-by-child="user" equal-to="[[user.uid]]" data="{{orders}}"> </firebase-query>
47. DEMO TIME!!!
48. User login
49. <paper-button on-tap="_doLogin" raised> Login with Google </paper-button>
50. <firebase-auth id="auth" user="{{user}}" provider="google" on-error="handleError"> </firebase-auth>
51. _doLogin: function () { this.$.auth.signInWithPopup() }
52. DEMO TIME!!!
53. New order
54. firebase.database() .ref('/orders').push().set({ goods: ..., timestamp: Date.now(), state: 'new', address: ..., user: this.user.uid })
55. DEMO TIME!!!
56. Functions?
57. New order
58. import * as functions from "firebase-functions"; export let newOrderCreated = functions .database .ref('/orders') .onWrite(event => orderFunctions.processNewOrder(event))
59. export async function processNewOrder(event: Event<DeltaSnapshot>) { // ... }
60. Order status update
61. import * as functions from "firebase-functions"; export let orderStatusChanged = functions .database .ref('/orders/{orderId}/state') .onWrite(event => orderFunctions .notifyOrderStatusChanged(event))
62. export async function notifyOrderStatusChanged (event: Event<DeltaSnapshot>) { // send FCM if user enabled notifications }
63. const status = event.data.val() const orderSnap = await event.data.ref. parent.once('value') const order = orderSnap.val()
64. const user = (await admin.database() .ref(`/users/${order.user}`) .once('value')).val()
65. if (user.fcmToken) { const payload = { data: { order: orderSnap.key, state: status }} await admin.messaging() .sendToDevice(user.fcmToken, payload) }
66. New order => Ask permission
67. Create a custom UI
68. DEMO TIME!!!
69. Thank you Filip Procházka @filipproch