DEV Community: jamesmai0512

How I make a Calendly App with Ruby and React js (Backend Part 2)

jamesmai0512 — Fri, 25 Dec 2020 14:27:07 +0000

Controllers

We will create controllers named Meetings and Bookings. Navigate into the controllers directory and run:

rails generate controller Meetings

rails generate controller Bookings

In your file tree, you should see the new controller.

Notice: In our Model, we use singular (Meeting), and in our Controller, we use the plural (Meetings).

Route
Once we have done with our Models and Controller, we'll need to establish the routes:

Rails.application.routes.draw do
  defaults format: :json do
    resource :meetings
    resource :bookings
  end
end

In our routes will be returning as the format json defaults format: :json do
After we set up our routes, you could run the command rails routes, and you should see something similar to this.

Action Controller.

Inside meetings_controller.rb we going stubbed out actions for index, show, create and destroy.

class MeetingsController < ApplicationController

  def index
    meetings = Meeting.all
    render json: meetings
  end

  def show
    meeting = Meeting.find(params[:id])
    render json: meeting
  end

  def create
    meeting_params = params.require(:meeting).permit( :title, :time_meeting, :start_date, :end_date, :start_time, :end_time)
    meeting = Meeting.new(meeting_params)
    meeting.save
  end

  def destroy
    meeting = Meeting.find(params[:id})
    meeting.destroy
  end
end

Explain:
Action index.

The index actions will show all the meeting
As you can see, when you run the command rails routes
1. Verd(GET) is the request of the API.
2. URI(/meetings) is the link of the API.
3. Controller(meetings) and Action(index) are when you run the API link(http://localhost:3000/meetings), it will run into the meetings_controller.rb file and run action index.

  def index
    meetings = Meeting.all
    render json: meetings
  end

And in my booking_controller.rb, 3 actions are index, show, create.

class BookingsController < ApplicationController
  def index
    bookings = Booking.all 
    render json: bookings
  end

  def show
    booking = Booking.find(params[:id])
    render json: booking
  end

  def create
    booking_params = params.require(:booking).permit(:name, :date, :time, :email, :message)
    @booking = Booking.new(booking_params)
    @booking.save
  end
end

With the controller are done, and the routes are set up, we can be able to run rails s -p 3001; the link will be http://localhost:3001/

Adding Data

Our data is empty right now, so it won't return anything. So I will create meeting data with Postman.

First, open Postman and enter this link http://localhost:3001/meetings into Enter request URL. Because we will create a meeting, so we have to choose the method POST.
Second, click on Body, in the Beautify choose raw and JSON.

After all, it will look like this:

And type this data inside.

{
    "title": "60 minutes meeting",
    "time_meeting": "60",
    "start_date": "2020-11-24",
    "end_date": "2020-11-26",
    "start_time": "01:00:00.000",
    "end_time": "06:00:00.000"
}

It will look like this:

Now you should be able to click Send, which will be creat the data for us.

After you create data, click the plus tab and enter the link again http://localhost:3001/meetings, change the method to GET.
Now you click Send you will see the Data like this:

Note: your id should be 1 and without column user_id, Because I had some test before.

How I make the Calendly App with Ruby and React js (Backend Part 1)

jamesmai0512 — Fri, 25 Dec 2020 14:26:45 +0000

Have you guys ever hear about Calendly? From this app, I have an idea to make the app called Bookme.

First, When I started making this app, I thought I would do an app for some practice with Ruby and React JS and wanted to have a conversation with me about the job, they could book me through the app.

Bookme App is an app for scheduling appointments, meetings, and events. People can book you for a meeting you've created. Even more, people can book you through this Booking App instead of email or message.

The Bookme App only allows you to create and delete meetings, Invitees will see all the meetings you've available in my schedule, and they can select one of those to make an appointment with you. After a person has booked you, it will have the email notice for you and the person who has booked you, Ensuring the ideal time slot for both parties.

For this Booking App, I'll be creating an API containing Meeting and Booking. We'll be using PostgreSQL for our database cause it will allow easier to push it on Heroku.

Backend API

To get started, we will create the Rails API.

rails new booking_backend --api --database=postgresql

The rails new booking_backend command will create the full application with views and some we won't be using, so we insert the --api to specify it is an API. --database= the database we are using, which is postgresql.

Once you've created it, you can open the project in your code editor. Inside the app folder, we will be working on the controllers and models directories.

Models

First, we will generate two models are Meeting and Booking.

Meeting

rails generate model Meeting title:string start_date:datetime end_date:datetime start_time:time end_time:time time_meeting:string

This command line will create the migrate, the meeting files, and some other code.

In our meeting will have:

title of the meeting.
start_date and end_date is the valid date of the meeting.
start_time and end_time is the available time people can book the meeting in the day.
time_meeting is the limited time of the meeting.

Booking

rails generate model Booking meeting:references name:string date:date time:time email:string message:text

This command line will create the migrate, booking files, and some other code.

In our Booking table will have some columns for people to book the meeting:

date and time are the day and time the person booking wants to start the meeting.
name and email are the information of the person booking
message is the message of the person booking to send to the meeting user.

Note that meeting:references creates a relationship with the Meeting model, this is because of our Booking to belong_to :meeting and Meeting has_many :bookings.

Migrate
Once we have everything done, we can start building and migrating our database with the following commands:

//Set up the database
rails db:setup

//Run the migration files
rails db:migrate

You should see some similar to this:

You also can be able to check the schema.rb file in your db folder:

Meeting Model
Add some code to the Meeting Model: app/models/meeting.rb

class Meeting < ApplicationRecord
  has_many :bookings
  validates :title, :time_meeting, :start_date, :end_date, :start_time, :end_time, :user_id, presence: true
end

Because booking belongs to a meeting, it's mean the meeting will have many bookings has_many :bookings .
validates :title, :time_meeting... are used to ensure that valid data of :title, :time_meeting... is saved into database
:title, :time_meeting, :start_date, :end_date, :start_time, :end_time, :user_id, are column in meeting table.
presence: true is a method to check if the value is nil or a blank string,
Booking Model
Add code to the Booking Model: app/models/booking.rb

class Booking < ApplicationRecord
  belongs_to :meeting, optional: true
  validates :name, :date, :time, :email, :message, presence: true
end

As I told you before, the meeting has many bookings, it means booking will belong to meeting belongs_to :meeting.

Backend Part 2