Analyzing Real Time Data Updates with an Angular + Rails System
In this lesson we'll monitor how the Angular application allows for real time data updates without a page refresh by changing the database query scope in the Rails API.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

Now that we have our API up and working and we have our documents and our angular app connected I want to show you some of the really cool things that this does because we implemented an observable our document is more like a living kind of component meaning that even without a page refresh all of this data is going to be updated on a real live basis and to demonstrate that I want you to take a look and see that we have documents 0, 1 and 2.

large

So were going in the order from the first ones created through the last. Now I opened up the freelance_camp_documents microservice and if I go to the freelance_documents_controller.rb. I can change the def index action so that instead of just giving the default scope I can do 

def index
  @freelance_documents = FreelanceDocument.order('created_at DESC')

  render json: @freelance_documents
end

And now if I hit save watch whats going to happen. It's going to actually flip these even though we haven't hit refresh we haven't changed the code in the angular app anything like that so I'm gonna save and without any kind of refresh. You can see right away it updates to 9, 8 and it changed the scoping order.

large

So this is really cool this is a great way of being able to have a system that can auto-update without any kind of page refresh or anything like that from the user. This is a very popular thing if you're building say something like a dashboard I built something kind of similar to this for a client that needed real-time updates of rentals that they had. So they had these bike rentals all over the place and they all had GPS coordinates associated with them and they wanted a dashboard where they could see all of the bikes on a real-time basis without having to hit page refresh or anything like that. So I was able to implement something very similar to what I just did here so that their dashboard was updating right in front of their eyes. So this is a very powerful kind of system. Now I also want to show you can add records to this too. So if I switch over to the terminal and I start a Rail's console session.

rails c

What I want to do is pull in an item from the seeds.rb file. I will create a sample file in the seeds.rb file. So here I have FreelanceDocument and I want to create a new one, the new one is going to be a totally different one so the title: will equal "A Totally Different One". I can keep the description: and the file_url: but I am going to change the image_url: just because I want to make it really nice and explicit that things really are changing here I uploaded another image to Amazon so I'm going to come and pull this URL right in here. 

'https://s3.amazonaws.com/devcamp-static/images/freelance-img-2.jpg'

And now I'm going to take this out because I don't want to actually add it to the seeds file I just want to run it in the terminal. So I'm going to do

rails c

And we've had a little issue. This usually happens when there is some kind of a tab character or something like that. So let me come back here. And see and yes it was because there is a tab character included. You always have to be careful when you're copying and pasting if there are any tabs and you copy and paste that into a script then it can cause an error. So now I'm going to come into the rails console and paste the code. 

FreelanceDocument.create!(title: "A Totally Different One", description: "Lorem ipsum dolar sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna alqua. Ut enim ad minim veniam, quis nostrud exercitation", file_url: "https://docs.google.com/document/d/1UUgAob6ZpivgkgCbMD84JMMRc1flrzCPKybtQoAfASo/edit?usp=sharing", image_url: 'https://s3.amazonaws.com/devcamp-static/images/freelance-img-2.jpg')

And this creates the record. And look at that on the browser.

large

It updated and added our totally different one without any changes on our side whatsoever except for our document database being updated. So that is some of the power on why you would want to implement something like an observable where you have the ability to very quickly and efficiently check for any changes. And you can then update the screen just based off of what data is coming back into the API.

Resources