Ember 2.x Ember 2.x

Exercise 10 Solution, Part 1

Check out a free preview of the full Ember 2.x course:
The "Exercise 10 Solution, Part 1" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

Exercise 10 Mike demonstrates how to transition the data retrieval from jQuery to Ember-Data. Mike also creates an Application Adapter and Application Serializer.

Get Unlimited Access Now

Transcript from the "Exercise 10 Solution, Part 1" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Mike North: I'm gonna jump in and I'm gonna use this.store instead of jquery.get and I will build off of RESTAdapter and RESTSerializer, which are some convenient base classes that handle some common JSON behavior. I'm going to use query and queryRecord which typically would be used for query params. In this case it's an easy way for me to build some non-standard URLs to talk to GitHub.

[00:00:43] And so I'll have to customize two methods in my adapter and I'm going to see if I can make an application serialized with it handles. Basically everything that I need to normalize across the whole app.
>> Mike North: All right, so, beginning with ember CLI.
>> Mike North: So I've got an org and I've got a repo.

[00:01:27]
>> Mike North: And if I look at,
>> Mike North: Githubrepo.hbs, I just wanna see what do I depend on, what properties do I need? So I need a name, and an ID actually comes for free with an ember-data model. It's implied that you have an id, you do not need to define it.

[00:01:48] In fact things will not work properly unless you have an id on each record. So, all right, we'll start with name and.
>> Mike North: Just need a string there and in an org, I know I need a login.
>> Mike North: And your also has a name.
>> Mike North: And we're probably gonna need something for that image URL but we'll get there when we get there.

[00:02:31] Now it's important to define this stuff on your models. A lot of data is coming in from GitHub but the only things that will be available for use on these records are things that I've defined on my model, attributes I've defined on my model. So as we start seeing things turn blank we know we have to go back and take a look at what's coming through.

[00:02:57] So I'm also going to create an adapter and a serializer.
>> Mike North: So we've got an application adapter that extends from rest adapter. And we've got an application serializer extending from rest serializer. And I know that I'm gonna need to use normalize response.
>> Mike North: So I'm just gonna get the signature there since I have all of the arguments [NOISE] a serializer, normalize response.

[00:03:43] So I just need this.
>> Mike North: Oops.
>> Mike North: That's odd. [LAUGH].
>> Mike North: Fantastic, and we are back.
>> [INAUDIBLE]
>> Mike North: All right, so now I'm going to make the first little switch by going to the repos route.
>> Mike North: And gonna get rid of this.
>> Mike North: Actually I'll still need this thing on the top, the org id, and instead I'm going to return this store query and I'm gonna query for object of type repo and the argument for query.

[00:04:48] So this is a great thing to use for a search or something where you're passing a lot of query params along. That's by default what this configuration object, the second argument here will do. But I wanna pass org id.
>> Mike North: And I'm getting an error, which I expect.

[00:05:09] So if we look at the error, it's saying that local host 4200 repos has failed. That's because I'm not running the get hub API locally. So here, we're just going to go host. GitHub.com and we'll see that the request will start going out to GitHub.
>> Mike North: So still errors.

[00:05:40] Okay repos is not found. So it's using sort of the default URL schema that Ember data has out of the box. It's completely customizable. But this is not going to work for us as it stands now. So I'm going to go back to my example here, which is actually a good start.

[00:06:04]
>> Mike North: [NOISE] And grab this URL for query method.
>> Mike North: So what we're doing here is in the case that the model name we're asking for is repo, I'm going to build a URL that looks like this.
>> Mike North: Otherwise fallback to whatever this method used to be doing. All right, so still getting errors, awesome.

[00:06:41] So this is a great feature of Ember Data, it's actually, because there is this consistent internal data structure, everything is built around this JSON API concept. We can actually validate that something is wrong in the serializer. That what I've passed it is in fact an invalid object. If we didn't have this convention, we sort of have to put more responsibility on the developer to say maybe you intended to pass undefined through me.

[00:07:11] I don't know. In this case, we can give some valid feedback here. So it's telling me top level thing must be an object and that I need to look at normalizeResponse. Some great feedback. So let's just let this pass through for now.
>> Mike North: And we need to make sure we're turning that.

[00:07:44]
>> Mike North: So now we have this method but it is not really doing anything, I just wanna see that the error is here. All right so It's saying it encountered 16 in the payload, but no model was found for model name 16. It's really just trying to deserialize a whole bunch of stuff.

[00:08:05] So here's what's happening. Ember data wants to recieve it's Json in the following form. Something that looks like this. That would be for a list of repos. That would be for one repo. Singular versus plural matters. That is how it can detect whether it should deserialize a list or deserialize an object.

[00:08:32] In this case this is what we're passing it. And so it's probably doing I suspect like a for in loop and these are the indices of the array. Not property keys as it expects. So, what we need to do first is this.
>> Mike North: We could fix this, like that.

[00:09:03]
>> Mike North: And we're getting some data back. Now, we left some stuff out of our model, so we're getting undefined here. We just simply need to go back to our model here and do.
>> Speaker 2: Forks count.
>> Mike North: Thank you. [LAUGH]
>> Speaker 3: [CROSSTALK] Or watchers count. [CROSSTALK] Watchers is valid too.

[00:09:30]
>> Mike North: And ta da, very much starting to look like what we want.