Save 37% off PRO during our Black Friday Sale! »

Firebase na webu? Hračka

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

3343adcbe1c5d2c947d211fa012989ec?s=128

Filip Prochazka

March 21, 2017
Tweet

Transcript

  1. Filip Procházka @filipproch Firebase na webu? Hračka

  2. Firebase

  3. None
  4. ⋅ Cloud-hosted NoSQL database ⋅ Synchronization & conflict resolution ⋅

    Access directly from your app
  5. None
  6. None
  7. None
  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
  11. None
  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

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

  38. None
  39. None
  40. None
  41. None
  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