DEV Community

Audrea Cook
Audrea Cook

Posted on • Originally published at codewitch.dev on

COVIDiary pt. 6 - Formatting Data

Welcome to Part 6 of the COVIDiary project! If you’re just joining us or missed a post, here’s what we’ve done so far:

This week, we’re working on the back end. By the end of today, we will:

  • Add some important gems
  • Generate serializers to properly format our data

Are you ready? Let’s do this.

Let’s do this!

Open your CD-API repository.

1. Add Gems

We need to add two more gems to our Gemfile to help the front and back ends communicate properly.

Rack CORS Middleware

The first is Rack CORS Middleware, which will let our fetch requests work. Rack CORS is used so frequently in Rails applications that it’s automatically included in your Gemfile. To use it, simply uncomment the line in your Gemfile.

# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'
Enter fullscreen mode Exit fullscreen mode

We also need to uncomment the following section in config/initializers/cors.rb:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'example.com'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end
Enter fullscreen mode Exit fullscreen mode

Finally, change example.com to * for now.

Fast JSON API

The second gem we need to add is Fast JSON API. This will allow us to generate serializers and properly format our data before sending it to the front end. You can read more about serializers here. In your Gemfile, add the following:

gem ‘fast_jsonapi’
Enter fullscreen mode Exit fullscreen mode

That’s it! Now that we’ve added both gems, let’s install them by running bundle install in your terminal. You can also start up your backend server now using rails s.

2. Generate Serializers

We need a serializer for both our Entries and our Users.

Get that cereal!

With Fast JSON API, these are easy to create with the rails g serializer command. Let’s do that now. In your terminal, enter the following:

rails g serializer Entry
rails g serializer User
Enter fullscreen mode Exit fullscreen mode

You will now have a serializers directory in your app directory, and it will contain your two new serializer files. They should look something like this:

class EntrySerializer
  include FastJsonapi::ObjectSerializer
  attributes 
end
Enter fullscreen mode Exit fullscreen mode

Let’s configure these to present the data the way we want. First, we’ll add our relationships. A user has many entries, so in your UserSerializer class, add:

has_many :entries
Enter fullscreen mode Exit fullscreen mode

We’ll set up the opposite side of the relationship in your EntrySerializer class:

Belongs_to :user
Enter fullscreen mode Exit fullscreen mode

Now that we have the relationships under control, we need to specify which data attributes we want to serialize. In your EntrySerializer class, change the attributes line to look like the following:

attributes :id,
             :health_rating,
             :is_symptomatic,
             :health_comments,
             :mental_health_rating,
             :mental_health_comments,
             :diary_entry,
             :is_public,
             :created_at
Enter fullscreen mode Exit fullscreen mode

Now do the same with the UserSerializer class:

attributes :id,
             :first_name,
             :last_name,
             :email,
             :birth_date,
             :occupation,
             :is_essential,
             :isolation_start,
             :isolation_end,
             :about
Enter fullscreen mode Exit fullscreen mode

Coming Up

We now have serializers to properly format our data for future fetch() requests!! Next week, we’ll create our controller actions so we can finally connect to the front end!

Top comments (0)