Web-start step 8 (Read messages): loadMessages function does not appear to do anything

SOLVED: I had to update my rules in my Realtime Database. I had ‘read: false’. Leaving my issue report as record of my stupidity. Maintainers may delete it if it’s unhelpful.

ORIGINAL ISSUE: I have followed the instructions and copy-pasted the code exactly from the tutorial. The sample messages are correctly loaded into my Realtime Database and I am able to read them from the firebase CLI. When I call loadMessages from the chrome console, it is defined, and its definition matches the one in the tutorial, but nothing happens. I think something is outdated in either the description or the code snippet itself, since the description mentions “the callback function – setMessage” and there is nothing called setMessage anywhere in the code. From what I can tell from inserting log statements, the callback function is never called. And I can’t call it myself manually to see what happens, because I don’t know what “snap” is supposed to be.

EDIT: I was able to define the callback function as a standalone function in-console and build a ‘snap’ parameter that looked like the following:

snap = {key:'asdfjkl', val: function() { return {name:'garbage', text:'bwah', profilePicUrl: '', imageUrl:''}}}

This successfully loaded the message in my chat window. Still no clue how to trigger the actual callback, since the code provided doesn’t do it, and the code provided is supposed to teach me how to do it.

Also, since there’s nowhere to leave feeback on the tutorial itself, I’m going to leave some here. This is a badly written tutorial. I already know how to copy and paste blocks of code. This tutorial does almost zero explaining of what the sample code actually does. For example, the loadMessages function provided:

  // Loads the last 12 messages and listen for new ones.
  var callback = function(snap) {
    var data = snap.val();
    displayMessage(snap.key, data.name, data.text, data.profilePicUrl, data.imageUrl);
  };

  console.log("callback defined, what happened?");
  firebase.database().ref('/messages/').limitToLast(12).on('child_added', callback);
  firebase.database().ref('/messages/').limitToLast(12).on('child_changed', callback);
}

I know that this function is necessary to get my messages from my firebase realtime database. But I’m not able to extend this knowledge to a real life use case because I have no clue what this code does.

• Where does the ‘snap’ parameter come from in the callback function? what do we expect it to look like?
• We have a ton of functions chained on to firebase.database(). what does ‘ref’ do? I assume it’s the path under which I’d like to retrieve data? by the time I get to ‘on’, what am I calling ‘on’, on? I don’t know what limitToLast(12) actually returns. What are the triggers I can listen to with ‘on’? what does ‘child_added’ or ‘child_changed’ do? -what does displayMessage do? It’s defined lower down in the code, but I’m not sure what it does in the context of this app, as I’m new to firebase.

[nicolasgarnier]

Hey @gosieg and @bbbbencody

There is a section in Step 3 of the codelab that runs you through the UI to chose the correct security rules:

Just to know if that part can be improved: Did you simply miss it? Or was there a bug during this flow?

I know it’s frustrating when something doesn’t work and you don’t know why 😉 FYI in this case checking the JS console should give a clue (there should be some “Permission denied” error) I should add an Issue template making sure people had a look at the JS console before posting 😄

[gosieg]

I ran into the same issue. Changing the read (and write) flag to true fixed it for me too. I think the issue has something to do with the new Firestore database showing up by default now.