Saturday 31 October 2020

Was this helpful? Use firebase to save website feedback [Part 1]

track yes no feedback in your website whit google firebase sdk
Continue whit 

Free cloud storage DB? I chose google firebase

topic, today I will share whit you how to make simple website feedback like google, apple and alot more companies do. Place a simple question "Was this helpful" at the end of the page whit Yes / No buttons.

My case is that I want to track feedback for my single page application, but you can reproduce this structure for as many pages as you wish. Ofcore this is working only for small project and whit limitations, if you want something profesional, you will need real backend. If you have questions, fell free to ask.

Lets see how the actual website feedback will look like

yes no feedback from users

[Part 1]: in this post we will create and setup the firebase project

[Part 2]: Was this helpful? Use firebase to save website feedback [Part 2] 

in the second part we will integrate this cloud database to our website.


Creating free cloud database whit google firebase

  • Open firebase website and create a project

  • Register web app in the project

  • Create Realtime database

  • Start in locked mode


  • Open Data tab and add 2 fields 
    • like:0
    • dislike:0
Don't forget to add value 0 as default value, also you can ad as many field as you wish.


  • Open Rule tab and add some validation rules to it

{
  "rules": {
    ".read": false,
    ".write": false,
    "like": {
      ".validate": "newData.isNumber() && newData.val() === data.val() + 1",
      ".read": true,           
      ".write": true
    },
    "dislike": {
      ".validate": "newData.isNumber() && newData.val() === data.val() + 1",
      ".read": true,           
      ".write": true
    } 
  }
}


  • Open project settings and fill in missing options, for resource location i picked up the nearest location to my location.

  • Get the CDN connection string to firebase project

And voila, our free database is ready to take some likes :) In next post we will integrate the cloud database to our website using this javascript snipped. 

Continue to Was this helpful? Use firebase to save website feedback [Part 2]

No comments:

Post a Comment