Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zayneio/open-flights
OpenFlights - A CRUD app example built with ruby on rails and react.js using webpacker
https://github.com/zayneio/open-flights
react ruby ruby-on-rails webpacker
Last synced: about 1 month ago
JSON representation
OpenFlights - A CRUD app example built with ruby on rails and react.js using webpacker
- Host: GitHub
- URL: https://github.com/zayneio/open-flights
- Owner: zayneio
- License: mit
- Created: 2020-02-19T16:56:59.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T22:40:51.000Z (3 months ago)
- Last Synced: 2024-09-13T11:54:24.673Z (3 months ago)
- Topics: react, ruby, ruby-on-rails, webpacker
- Language: Ruby
- Homepage:
- Size: 3.17 MB
- Stars: 148
- Watchers: 8
- Forks: 181
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- Open-Source-Ruby-and-Rails-Apps - open-flights - A flight reviews app built with Ruby on Rails and React.js 🔥 ✅ 🚀 (Happy Exploring 🤘)
README
## OpenFlights
### A flight reviews app built with Ruby on Rails and React.js
This app is intended to be a simple example of a CRUD app built with **Ruby on Rails** and **React.js** using **Webpacker**.
https://github.com/zayneio/open-flights/assets/37857673/489827d5-f142-4064-ba00-48e194acf2c7
---
## Running it locally
- run `rails db:prepare`
- run `yarn install`
- run `bundle exec rails s`
- in another tab run `./bin/webpack-dev-server`
- in another tab run `sidekiq` (optional, but necessary for things like password reset emails)
- navigate to `http://localhost:3000`
## Environment Variables
If you want functionality like password reset emails to work locally, you'll need to set the following environment variables in `config/application.yml` with your own unique values:
```
ROOT_URL: http://localhost:3000
SENDGRID_API_KEY: xxxxxxxxxxxxxx
SENDGRID_USERNAME: xxxxxxxxxxxxxx
SENDGRID_PASSWORD: xxxxxxxxxxxxxx
DEFAULT_FROM_EMAIL: [email protected]
```
## Routes
```shell
Prefix Verb URI Pattern Controller#Action
root GET / pages#index
api_v1_airlines GET /api/v1/airlines(.:format) api/v1/airlines#index
POST /api/v1/airlines(.:format) api/v1/airlines#create
new_api_v1_airline GET /api/v1/airlines/new(.:format) api/v1/airlines#new
edit_api_v1_airline GET /api/v1/airlines/:slug/edit(.:format) api/v1/airlines#edit
api_v1_airline GET /api/v1/airlines/:slug(.:format) api/v1/airlines#show
PATCH /api/v1/airlines/:slug(.:format) api/v1/airlines#update
PUT /api/v1/airlines/:slug(.:format) api/v1/airlines#update
DELETE /api/v1/airlines/:slug(.:format) api/v1/airlines#destroy
api_v1_reviews POST /api/v1/reviews(.:format) api/v1/reviews#create
api_v1_review DELETE /api/v1/reviews/:id(.:format) api/v1/reviews#destroy
GET /*path(.:format) pages#index
```
---
## Api V2 (Graphql)
**Get Airlines#index**
```
query Airlines {
airlines {
id
name
imageUrl
slug
averageScore
reviews {
id
title
description
score
}
}
}
```
**Get Airlines#show**
```
query Airline {
airline(slug:) {
id
name
imageUrl
slug
averageScore
reviews {
id
title
description
score
}
}
}
```
**Create Review**
```
mutation {
createReview(
title: "test",
description: "test",
score: 1,
airlineId: 1
) {
id
title
description
score
airlineId
error
message
}
}
```
**Destroy Review**
```
mutation {
destroyReview(id:) {
message
error
}
}
```
---
## How to rebuild this app from scratch (*WORK IN PROGRESS)
For an up to date, full step-by-step guide on how to rebuild this app from scratch, check out [this article I've put together.](https://zayne.io/articles/how-to-build-a-crud-app-with-ruby-on-rails-and-react)
### Getting Started: Creating a New Rails App With React & Webpacker
First things first, let's create a brand new rails app. We can do this from the command line by doing `rails new app-name` where app-name is the name of our app, however we are going to add a few additional things. We need to add `--webpack=react` to configure our new app with webpacker to use react, and additionally I'm going to add `--database=postgresql` to configure my app to use postgres as the default database. so the final output to create our new app will look like this:
```shell
rails new open-flights --webpack=react --database=postgresql
```
Once this finishes running, make sure to cd into the directory of your new rails app (`cd open-flights`), then we can go ahead and create the database for our app by entering the following into our command line:
```
bundle exec rails db:create
```
## Models
Our data model for this app will be pretty simple. Our app will have `airlines`, and each airline in our app will have many `reviews`.
For our airlines, we want to have a `name` for each airline, a unique url-safe `slug`, and an `image_url` for airline logos (Note: I'm not going to handle file uploading in this article, instead we will just link to an image hosted on s3).
For our reviews, we want to have a `title`, `description`, `score`, and the `airline_id` for the airline the review will belong to. The scoring system I'm going to use for our reviews will be a star rating system that ranges from 1 to 5 stars; 1 being the worst score and 5 being the best score.
So from our command line we can enter the following generators to create our airline and review models in our app:
```shell
rails g model Airline name slug image_url
```
```shell
rails g model Review title description score:integer airline:belongs_to
```
This will create two new files in our `db/migrations` folder; one for airlines:
```ruby
class CreateAirlines < ActiveRecord::Migration[5.2]
def change
create_table :airlines do |t|
t.string :name
t.string :slug
t.string :image_url
t.timestamps
end
end
end
```
and one for reviews:
```ruby
class CreateReviews < ActiveRecord::Migration[5.2]
def change
create_table :reviews do |t|
t.string :title
t.string :description
t.integer :score
t.belongs_to :airline, foreign_key: true
t.timestamps
end
end
end
```
Additionally, we should now have airline and review model files created for us inside of our `app/models` directory. Because we used `airline:belongs_to` when we generated our review model, our `Review` model should already have the `belongs_to` relationship established, so our this model so far should look like this:
```ruby
class Review < ApplicationRecord
belongs_to :airline
end
```
We need to additionally add `has_many :reviews` to our airline model. Once we do, our airline model should look like this:
```ruby
class Airline < ApplicationRecord
has_many :reviews
end
```
At this point, we can go ahead and migrate our database:
```shell
rails db:migrate
```
Once you run that, you should see a new `schema.rb` file created within the `db` folder in our app. Your schema file should now look something like this:
```ruby
ActiveRecord::Schema.define(version: 2019_12_26_200455) do
enable_extension "plpgsql"
create_table "airlines", force: :cascade do |t|
t.string "name"
t.string "slug"
t.string "image_url"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end
create_table "reviews", force: :cascade do |t|
t.string "title"
t.string "description"
t.integer "score"
t.bigint "airline_id"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.index ["airline_id"], name: "index_reviews_on_airline_id"
end
add_foreign_key "reviews", "airlines"
end
```
So now for our airline model, we need to do a couple things. First off, I want to add a `before_create` callback method that creates a unique slug based off of the airline's name when we create a new airline. To do this, we can add a new `slugify` method with a before create callback to our airline model like this:
```ruby
class Airline < ApplicationRecord
has_many :reviews
before_create :slugify
def slugify
self.slug = name.downcase.gsub(' ', '-')
end
end
```
This slugify method will take the name of an airline, convert any uppercase characters to lowercase, replace any spaces with hyphens, and set this value as our slug before saving the record.
Actually, I think we can simplify this method further by just calling parameterize on our name attribute instead of using downcase and gsub:
```ruby
class Airline < ApplicationRecord
has_many :reviews
before_create :slugify
def slugify
self.slug = name.parameterize
end
end
```
This parameterize method should handle both downcasing characters and replacing spaces with hyphens for us. Of course, we can quickly test this out from our rails console to confirm:
```ruby
'Fake AIRline Name 1'.parameterize
# => "fake-airline-name-1"
```
So now if/when we create a new airline, for example "United Airlines", this will convert the name to `united-airlines` and save it as the unique slug for that airline.
Additionally, we need to create a method that will take all of the reviews that belong to an airline and get the average overall rating. We can add an avg_score method to our model like this:
```ruby
class Airline < ApplicationRecord
...
def avg_score
reviews.average(:score).to_f.round(2)
end
end
```
This method will return 0 if an airline has no reviews yet. Otherwise it will get the sum of all the review scores for an airline divided by the total number of reviews for that airline to get the average rating.
So our full Airline model with our slugify method and avg_score method should now look like this:
```ruby
class Airline < ApplicationRecord
has_many :reviews
before_create :slugify
def slugify
self.slug = name.parameterize
end
def avg_score
reviews.average(:score).to_f.round(2)
end
end
```
## Seeding Our Database
Now that we have got our models created, let's go ahead and seed our database with some data! We can add this to the `seeds.rb` file located inside of our `db` folder:
```ruby
Airline.create([
{
name: "United Airlines",
image_url: "https://open-flights.s3.amazonaws.com/United-Airlines.png"
},
{
name: "Southwest",
image_url: "https://open-flights.s3.amazonaws.com/Southwest-Airlines.png"
},
{
name: "Delta",
image_url: "https://open-flights.s3.amazonaws.com/Delta.png"
},
{
name: "Alaska Airlines",
image_url: "https://open-flights.s3.amazonaws.com/Alaska-Airlines.png"
},
{
name: "JetBlue",
image_url: "https://open-flights.s3.amazonaws.com/JetBlue.png"
},
{
name: "American Airlines",
image_url: "https://open-flights.s3.amazonaws.com/American-Airlines.png"
}
])
```
And then we can seed our database by running the following command in our terminal:
```shell
rails db:seed
```
Now if we jump into our rails console with `rails c` we should be able to see our new data in the database:
```ruby
Airline.first
# => #
```
Notice that even though we only included the name and image_url in our seed data, we additionally have a slug value (in this case "united-airlines") because we added that slugify method to our airline model. We will use this slug shortly as the paramater to find records by in our controllers, instead of using the id param.
## Serializers: Building Our JSON API
For this app we are going to use [fast_jsonapi](https://github.com/Netflix/fast_jsonapi), a gem created by the Netflix engineering team. If you have ever used Active Model Serializer (AMS), you will likely notice some similarities.
with fast_jsonapi, we can create the exact structure for the data we want to expose in our api, and then use that when we render json from within our controllers.
Let's install the fast_jsonapi gem, by adding it to our Gemfile:
```ruby
gem 'fast_jsonapi'
```
Then we can install it with bundle install from our terminal:
```shell
bundle install
```
Now we can use a generator to create a new airline serializer and review serializer, passing along the specific attributes we want to expose in our api:
```shell
rails g serializer Airline name slug image_url
```
```shell
rails g serializer Review title description score airline_id
```
This will create a new serializer folder in our app and create a new airline serializer that should so far look like this:
```ruby
class AirlineSerializer
include FastJsonapi::ObjectSerializer
attributes :name, :slug, :image_url
end
```
And a reviews serializer that should look like this:
```ruby
class ReviewSerializer
include FastJsonapi::ObjectSerializer
attributes :title, :description, :score, :airline_id
end
```
For our airlines serializer, we want to include the relationship with reviews in our serialized json. We can add this simply by adding `has_many :reviews` into our serializer. So then our serializer should look like this:
```ruby
class AirlineSerializer
include FastJsonapi::ObjectSerializer
attributes :name, :slug, :image_url
has_many :reviews
end
```
Let's take a quick look at how we can use our serializers now to structure our api. If we jump into a rails console (`rails c`) in our terminal, let's get the first airline from our database. Then we can initialize a new instance of our airline serializer with that record and return the result as serialized json:
```ruby
# Get the first airline record from our database
airline = Airline.first
=> #
# Serialized JSON
AirlineSerializer.new(airline).serialized_json
=> "{\"data\":{\"id\":\"1\",\"type\":\"airline\",\"attributes\":{\"name\":\"United Airlines\",\"slug\":\"united-airlines\",\"image_url\":\"https://open-flights.s3.amazonaws.com/United-Airlines.png\"},\"relationships\":{\"reviews\":{\"data\":[]}}}}"
# Formatted JSON
AirlineSerializer.new(airline).as_json
=> {
"data" => {
"id" => "1",
"type" => "airline",
"attributes" => {
"name" => "United Airlines",
"slug" => "united-airlines",
"image_url" => "https://open-flights.s3.amazonaws.com/United-Airlines.png"
},
"relationships" => {
"reviews" => {
"data" => []
}
}
}
}
```
In the above examples, you can see that the only attributes shared within the attributes section are those that we have explicitly declared in our airline seriaizer.
## Controllers
Our app is going to have three controllers: an airlines controller, a reviews controller and a pages controller. Our pages controller will have a single index action that I'm going to use as the root path of our app. I'm also going to use Pages#index as a sort of catch-all for any requests outside of our api. This will come in handy once we start using react-router in a little, as we will need to be able to match routes to different components.
For our airlines and reviews controllers, we are going to namespace everything under api/v1. Again, this will give us an easy way to manage routing from both the react side of our app and the rails side once we additionally start using react-router in a moment.
For example, if a user navigates to /airlines in our app, on the react side we can load the necessary components to show a list of all airlines, and on the back end we can make the request to our Airline#index action in our controller as /api/v1/airlines to get a list of all of the airlines from our api.
### Routes
Let's actually go ahead and set up our routes, adding our root path and our namespaced api resources:
```ruby
Rails.application.routes.draw do
root 'pages#index'
namespace :api do
namespace :v1 do
resources :airlines, param: :slug
resources :reviews, only: [:create, :destroy]
end
end
get '*path', to: 'pages#index', via: :all
end
```
Notice that I added `param: :slug` to our airlines resources so that we can use our slugs as the primary param for airlines instead of using id.
### Airlines Controller
Inside of `app/controllers`, let's create a new `api` folder, and inside of that, a new `v1` folder, and then inside of that let's create a new airlines controller, namespaced under`Api::V1`:
```ruby
module Api
module V1
class AirlinesController < ApplicationController
end
end
end
```
### Airlines#index
Now let's add an index method to our new controller. All we need to do for this method is get all of the airlines from our database, then render the data as JSON using our AirlineSerializer.
To get all of our airlines, we can simply call all on our Airline model like so:
```ruby
airlines = Airline.all
```
Then we can pass our airlines variable as an argument into a new instance of our AirlineSerializer and return our data as serialized JSON like so:
```ruby
AirlineSerializer.new(airlines).serialized_json
```
So putting these two steps together, and then rendering the result as JSON from our controller, our index method should look like this:
```ruby
module Api
module V1
class AirlinesController < ApplicationController
def index
airlines = Airline.all
render json: AirlineSerializer.new(airlines).serialized_json
end
end
end
end
```
### Airlines#show
Our show method will also be pretty simple. For this we just need to find a specific airline, not by its id, but using it's slug as the param. We can do this by calling find_by on our Airline model and searching for a record that has a matching slug, like so:
```ruby
airline = Airline.find_by(slug: params[:slug])
```
Then, we will again render the resulting JSON using our AirlineSerializer. So our show method should look like this:
```ruby
module Api
module V1
class AirlinesController < ApplicationController
...
def show
airline = Airline.find_by(slug: params[:slug])
render json: AirlineSerializer.new(airlines).serialized_json
end
end
end
end
```
### Airlines#create
Before we add our create method, let's use strong paramaters to create a whitelist of allowed parameters when creating a new airline in our app. For now we will allow only `name` and `image_url`:
```ruby
module Api
module V1
class AirlinesController < ApplicationController
...
private
def airline_params
params.require(:airline).permit(:name, :image_url)
end
end
end
end
```
Then we can go ahead and add our create method. For this, we will simply initialize a new instance of Airline, passing in our airline_params. If everything is valid and saves, we will render data for our new airline again using our airline serializer, otherwise we will return an error:
```ruby
module Api
module V1
class AirlinesController < ApplicationController
...
def create
airline = Airline.new(airline_params)
if airline.save
render json: AirlineSerializer.new(airline).serialized_json
else
render json: { error: airline.errors.messages }, status: 422
end
end
private
def airline_params
params.require(:airline).permit(:name, :image_url)
end
end
end
end
```
---
This README is still being written - check back soon!
---
## License
```
Copyright (c) 2020 zayneio
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```