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
   

   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