wilt/07.26.2017

For today’s What I have Learned Today. It’ll be back on software development.

I will be sharing you about the Live Query of Parse Server using JavaScript.

If you are familiar to websockets then you could just think live query as just like that, however it is assigned to queries, it tracks real time changes for your database!!! If you didn’t find that awesome you’ll realize how epic would that be if you are already developing applications.

So, an application in real life developing apps of live queries could be endless! For example if you want real time updates in tables you could use live queries. However in my case, I did use it for Google Maps API by listening to its changes.

Let me first describe the problem here in order for you to understand what we’ll about to do. The problem is that I have a map in a specific page, that map returns different color of markers, and markers have details on them when I clicked one, now the key part there is the timeIn which is a date format, now in the structure of our schema there’s a column named timeOut which is set by default to undefined. When query comes to change the timeOut into something date the undefined will turned into date. I need to track whether the field timeOut is undefined or not, if it is undefined the marker will still be there, if there’s already data inside it, the marker must disappear!

Here’s how the Google Maps API current state, when you clicked into the marker it’ll show details about that particular user. The important part is the time there, it is the timeIn field in the schema. For the live query here’s how it looks like.

To explain this,

liveQuery — is just an instance for the Parse.Query and will be used to query. 
subscription — is the variable that will be subscribing using the Live Query.

Before going in depth with how these code work, there’s actually an underlying concept for you to understand and appreciate this more. And that is called the pub/sub.

pub — means publish.
sub — means subscribe.

Just like how we disseminate information. You publish something on Facebook, somebody will see that information and that already is subscribe because they received the information from you who published it. Now that you have understanding what is pub/sub let’s continue to the live query process.

The subscription variable is declared that it’ll be subscribing anything that the liveQuery variable will have which is pointed to the class of FinalGuest. So basically, anything the liveQuery will have will be pointed to subscription. Easy as that.

subscription.on(‘update’, (object) => {
//code here
});

Code above just basically means that it will be subscribing on updates of where? The FinalGuest class. So whenever there’s an update about anything in the FinalGuest class this receives a result which is an object. When I received the object I created a copy of the current states of the markers and have done a for loop to check who’s marker is it by its objectId, if it matched then you cut it out to the array and update the current state with the copied state. By that, you now received the update already! Easy right? Now i’ll stop talking and just show you how awesome it is.

Scenario would still be the same, watch carefully the red marker. In the database server the timeOut column is still undefined as you can see.

If I put some value in it, without reloading the ideal scenario would be the marker will vanish on the map.

I’ve added the time to the timeOut column!
The red marker disappears! Yey!

And yes it disappears, to show you more result I did put a console.log after it set the copied state to the current state and here it is.

Before adding timeOut the length of the current state is 1 however when it was updated it removes and becomes zero.

That’s it for today guys! See you tomorrow!