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:
- Part 1: Project Introduction
- Part 2: Initial Setup
- Part 3: Building the Database
- Part 4: Frontend Setup
- Part 4.5: Database Fixes
- Part 5: Backend Routing
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.
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'
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
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’
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
.
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
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
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
We’ll set up the opposite side of the relationship in your EntrySerializer
class:
Belongs_to :user
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
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
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!