$30 off During Our Annual Pro Sale. View Details »

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

Filip Prochazka

March 21, 2017
Tweet

More Decks by Filip Prochazka

Other Decks in Programming

Transcript

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

    View Slide

  2. Firebase

    View Slide

  3. View Slide

  4. ⋅ Cloud-hosted NoSQL database
    ⋅ Synchronization & conflict
    resolution
    ⋅ Access directly from your app

    View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. ⋅ Authentication & account
    management
    ⋅ Supports:
    ⋅ Email & password
    ⋅ Google, Facebook, Twitter, and
    GitHub sign-in
    ⋅ Existing auth systems
    Out-of-the box UI

    View Slide

  9. SectionX
    SectionY
    SectionZ
    ⋅ Serve static assets
    ⋅ SSL by default
    ⋅ Custom domains

    View Slide

  10. ⋅ Easy file storage
    ⋅ Handles poor connectivity
    ⋅ Backed by & accessible from
    Google Cloud Storage

    View Slide

  11. View Slide

  12. ⋅ No Cost cross-platform
    messaging solution
    ⋅ Notifications to drive user
    interaction
    ⋅ Versatile Messaging Targeting

    View Slide

  13. ⋅ Serverless, easy deployment
    ⋅ Node.js
    ⋅ Database, Pub/Sub, HTTP,
    Auth, Analytics triggers

    View Slide

  14. Demo project

    View Slide

  15. Realtime
    Database
    ● Categories
    ● Products
    ● User information
    ● Orders

    View Slide

  16. Auth
    ● User login
    ● Access to orders
    ● Pairing orders with
    user

    View Slide

  17. Storage ● Images of categories
    ● Images of products

    View Slide

  18. Hosting ● Hosting of our web
    application

    View Slide

  19. FCM ● Notifications about
    order status

    View Slide

  20. Functions ● Sending FCM
    notifications

    View Slide

  21. Our shop

    View Slide


  22. View Slide

  23. Polymer

    View Slide

  24. Web
    Components?

    View Slide


  25. ...

    View Slide


  26. ...




    View Slide

  27. <br/>Polymer({<br/>is: 'contact-card',<br/>properties: {<br/>starred: Boolean<br/>}<br/>});<br/>

    View Slide



  28. Eric Bidelman

    View Slide

  29. View Slide

  30. Polymerfire

    View Slide

  31. auth-domain="mydb.firebaseapp.com"
    database-url="https://mydb.firebaseio.com/"
    api-key="AIzaSyDTP-eiQezleFsV2WdEzx_8v_g">

    View Slide

  32. id="auth"
    user="{{user}}"
    provider="google"
    on-error="handleError">

    this.$.auth.signInWithPopup()

    View Slide

  33. path="/path/in/firebase"
    data="{{data}}">

    View Slide

  34. path="/path/in/firebase"
    data="{{data}}">

    View Slide

  35. id="messaging"
    token="{{token}}"
    on-message="_onMessageReceived">

    View Slide

  36. Back to our shop

    View Slide

  37. Database structure

    View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. Read our data

    View Slide

  43. path="/categories"
    data="{{categories}}">

    View Slide

  44. path="/goods"
    data="{{goods}}">

    View Slide

  45. path="/users/[[user.uid]]/cart"
    data="{{cart}}">

    View Slide

  46. path="/orders"
    order-by-child="user"
    equal-to="[[user.uid]]"
    data="{{orders}}">

    View Slide

  47. DEMO TIME!!!

    View Slide

  48. User login

    View Slide

  49. on-tap="_doLogin"
    raised>
    Login with Google

    View Slide

  50. id="auth"
    user="{{user}}"
    provider="google"
    on-error="handleError">

    View Slide

  51. _doLogin: function () {
    this.$.auth.signInWithPopup()
    }

    View Slide

  52. DEMO TIME!!!

    View Slide

  53. New order

    View Slide

  54. firebase.database()
    .ref('/orders').push().set({
    goods: ...,
    timestamp: Date.now(),
    state: 'new',
    address: ...,
    user: this.user.uid
    })

    View Slide

  55. DEMO TIME!!!

    View Slide

  56. Functions?

    View Slide

  57. New order

    View Slide

  58. import * as functions from "firebase-functions";
    export let newOrderCreated = functions
    .database
    .ref('/orders')
    .onWrite(event =>
    orderFunctions.processNewOrder(event))

    View Slide

  59. export async function processNewOrder(event:
    Event) {
    // ...
    }

    View Slide

  60. Order status
    update

    View Slide

  61. import * as functions from "firebase-functions";
    export let orderStatusChanged = functions
    .database
    .ref('/orders/{orderId}/state')
    .onWrite(event => orderFunctions
    .notifyOrderStatusChanged(event))

    View Slide

  62. export async function notifyOrderStatusChanged
    (event: Event) {
    // send FCM if user enabled notifications
    }

    View Slide

  63. const status = event.data.val()
    const orderSnap = await event.data.ref.
    parent.once('value')
    const order = orderSnap.val()

    View Slide

  64. const user = (await admin.database()
    .ref(`/users/${order.user}`)
    .once('value')).val()

    View Slide

  65. if (user.fcmToken) {
    const payload = { data: {
    order: orderSnap.key,
    state: status
    }}
    await admin.messaging()
    .sendToDevice(user.fcmToken, payload)
    }

    View Slide

  66. New order => Ask permission

    View Slide

  67. Create a custom UI

    View Slide

  68. DEMO TIME!!!

    View Slide

  69. Thank you
    Filip Procházka
    @filipproch

    View Slide