Series: CRUD 2016

CRUD 2016 pt 1-Setup and Index

Published on Feb 19, 2016

CRUD (Create, Read, Update, and Delete) are four operations that are vital to any system that involves the manipulation of data (aka, most of them).

We made a screencast series on CRUD last year, but it’s already out of date- so we’re updating it for 2016.

In this episode we set up our app, connect it to the server, and Read an array of data. In the next two episodes we’ll Read individual records and learn how to perform the other three CRUD operations.


Links

Code

We use ember-cli 2.3-beta.1 to create a new Ember app:

ember new crud-2016

Then we set up our adapter by installing the active-model-adapter addon:

ember install active-model-adapter

Then we create our application Adapter file, including adding a namespace:

//adapters/application.js
import ActiveModelAdapter from 'active-model-adapter';

export default ActiveModelAdapter.extend({
  namespace: 'v2'
})

Then we set a proxy in .ember-cli

{
  "disableAnalytics": false,
  "proxy": "http://localhost:3000"
}

Now that we're connected with the server, we can create an Ember Data model:

//models/monster.js
import DS from 'ember-data';

export default DS.Model.extend({
  name: DS.attr('string'),
  level: DS.attr('number'),
  imageUrl: DS.attr('string'),
  price: DS.attr('number'),  
});

We'll add the 'monsters' route to the router:

Router.map(function() {
  this.route('monsters', {path: '/'})
});

Then we define the model for that route:

//routes/monsters.js
import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return this.store.findAll('monster');
  }
})

Finally, we loop through those monsters in our template:

{{! templates/monsters.hbs }}
{{#each model as |monster|}}
  {{monster.name}}
{{/each}}

If you want to see the better-styled version of this template, read this commit.

Transcript

Last year, I created a two-part series on how to make a simple CRUD app in Ember, and it’s been one of the most popular videos, but it’s been a little bit out-of-date. So we’re going to update it for 2016.

We’re going to use Ember-cli 2.3.0-beta.1, and then we’re going to create a new Ember app with that. Now I want to note that even though we’ll be using the newest versions of Ember, everything that we do should be able to work on as old as Ember 2.0, maybe even Ember 1.13. And it’ll also continue to work until the Ember 3.0 series begins. So even though some of these things may eventually be deprecated, they will still continue to be valid until Ember 3.0, at which point we’ll release another CRUD series. So let’s get into this project and get started.

So Ember-cli has already created an index route which gives us this basic message, so it’s already running. Another thing that we already have set up is the Rails server, which is sending data from the API, so we don’t have to worry about setting that up in these screencasts.

We’ll assume that in your setup, you’re sending out some sort of API either through a server or through Ember-cli mirage. Our server, it happens to be using active model adapter. So we’re going to go ahead and install that in our Ember application through the add-on. Then we’ll restart our server and we’ll go and make sure that our adapters are taking from active model adapter. So we’ll create the adapters folder, and in there we’ll create the application adapter. We’ll also set the namespace while we’re here. And for this particular application, the namespace will be v2, since this is the second version of an API that’s already existing. Next we’ll make the model that we’re going to be doing the CRUD operations on. So we’ll generate a model called monster, and here we’ll give it a couple of attributes.

Now that we’ve got the Ember app set up and we’ve got the data communications set up with the server, we can finally start working on our index route. We’re going to be creating more later, but today we’ll just be creating one route, and that route will be monsters.

Now in the last CRUD video, we had this as a resource, but that’s been deprecated. Now it’s all routes all the time. And we’ll go ahead and give this a path of the index, because we’re only going to be showing monsters in this application.

And then if we look using Ember Inspector, we see that for the homepage, the nx page, it does have the monsters route. Now we’re going to get the data showing.

Our next step in this process will be to create a routes file for the monsters route. Then we’ll define the model. And for the model, we’ll return, well we'll get the store, and then we’ll call findAll for monster on the store.

And so findAll is the new Ember data 2.0 syntax, and it’s the equivalent of this. So it’s going to return an array of monsters. And note that for the model, we’re doing the new methods syntax instead of the old way like this.

So let’s take a look at how our app is doing. And uh-oh, not so well. So we’re trying to get it from localhost:4200 which is where the Ember server is, but we want it from the Rails server, which is localhost:3000.

So let’s go to the .ember-cli file and we’ll go ahead and add in our proxy. And to get this to work, we’ll have to restart our server but then it’ll load without issue.

Now back to getting it to display. We’ll create a monsters template, and what we’ll do is we’ll loop through the model using the new syntax of each as, and then right now we’ll just do the name, just to see that it’s working. And there we go, it’s displaying the names.

So we’ve done all the coding work for the index. Now with a snap of my fingers, I’m going to make it look a lot better. If you’re interested in the code that was involved with this, it’s just some handlebars, the core of it is still looping through that model, and then some css. And that’s going to go in a separate Git commit, if you’re interested.

So that’s our introduction to our CRUD app. We did the basics of setting up with the adapter, the Ember data model and several other configuration options. And then we got our monsters displaying in the index. So that’s one version of "Read".

In the next episode, we’ll be going over the other version of "Read", which is showing each individual monster, as well as showing how to update them and delete them. I’ll see you then.

CRUD 2016

Subscribe to our mailing list