Building a Ruby on Rails Chat App with GitHub Copilot on Ubuntu 24.04

This tutorial guides college students to create a chat app with Ruby on Rails and GitHub Copilot. The app supports user registration, chat channel creation (with topics), channel browsing, and real-time messaging.

1. Setting Up the Environment on Ubuntu 24.04

Step 1.1: Update the System

sudo apt update && sudo apt upgrade -y

Step 1.2: Install Essential Dependencies

sudo apt install -y curl git build-essential libssl-dev libreadline-dev zlib1g-dev
sudo apt install -y libbz2-dev libsqlite3-dev libffi-dev
sudo apt install -y libyaml-dev

Step 1.3: Install Ruby Using rbenv

git clone https://github.com/rbenv/rbenv.git ~/.rbenv
echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(rbenv init -)"' >> ~/.bashrc
exec $SHELL
git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
rbenv install 3.2.2
rbenv global 3.2.2

Step 1.4: Install Rails

gem install rails -v 7.1.0

Step 1.5: Install PostgreSQL

sudo apt install -y postgresql postgresql-contrib libpq-dev
sudo systemctl enable postgresql
sudo systemctl start postgresql
sudo -u postgres createuser -s $USER

Step 1.6: Install Node.js, Yarn, and Redis

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs
sudo npm install --global yarn
sudo apt install -y redis-server
sudo systemctl enable redis-server
sudo systemctl start redis-server

Step 1.7 :Prerequisites for Using GitHub Copilot

To use Copilot while coding, follow these steps:

  1. Install Visual Studio Code (VS Code) on your personal laptop (not the Linux server).
  2. Set up SSH access to the Ubuntu server for running commands and deploying your code. LINK
  3. Use GitHub Copilot in the IDE to write, edit, and manage Rails code, then deploy it to the server.

Step 1.8: Work Locally with GitHub Copilot

  1. Install VS Code (above) on your local machine.
  2. Install the GitHub Copilot extension:
    • Open VS Code.
    • Go to the Extensions Marketplace (Ctrl+Shift+X).
    • Search for “GitHub Copilot” and install it.
    • Sign in to GitHub to enable Copilot.
  3. Connect to the Ubuntu Server via SSH: Use SSH to run Rails commands remotely:
    ssh username@your-server-ip

Step 1.9: Install Required Extensions

  1. Install the Remote – SSH Extension:
  2. Install GitHub Copilot:
    • Search for GitHub Copilot in the Extensions Marketplace and install it.
  3. Open VS Code.
  4. Go to the Extensions Marketplace (Ctrl + Shift + X or Cmd + Shift + X on macOS).
  5. Search for Remote – SSH.
  6. Click Install.

Step 1.10: Connect VS Code to the Remote Linux Machine

  1. Open VS Code.
  2. Press Ctrl + Shift + P (or Cmd + Shift + P on macOS) to open the Command Palette.
  3. Select Remote-SSH: Connect to Host
  4. Enter the SSH connection string:
    username@remote_server_ip
  5. VS Code will connect to the server and install the VS Code server backend.

Step 1.11: Open and Edit Files on the Remote Server

  1. Once connected, you can:
    • Open a folder on the remote machine by selecting File > Open Folder.
    • Navigate to the desired directory on the remote server.
  2. All files you open will be edited directly on the remote server.

Step 1.12: Use GitHub Copilot While Editing

  1. Open a file for editing on the remote server.
  2. Start typing code. GitHub Copilot will automatically suggest code completions and snippets, just as it would for local files.
  3. Accept Copilot’s suggestions with Tab or other key bindings configured in VS Code.

Step 1.13: Run Commands on the Remote Machine

  1. Open the integrated terminal in VS Code (View->Terminal).
  2. Run any commands directly on the remote Linux server (e.g., Rails commands, Git operations, etc.).

2. Creating the Rails Application

Step 2.1: Generate a Rails App

Run the following to create your Rails app:

rails new chat_app -d postgresql
cd chat_app
rails db:create

3. Using GitHub Copilot to Build the Chat App

GitHub Copilot is a powerful AI coding assistant. Below are ways to integrate Copilot into your workflow effectively.

Step 3.1: Add User Authentication with Devise

  1. Add Devise to Gemfile: Add the devise gem using Copilot:
    • Start typing gem 'de... in your Gemfile.
    • Let Copilot suggest the complete line: gem 'devise'.
  2. Install Devise: Run:
    bundle install
    rails generate devise:install
  3. Generate a User model:
    rails generate devise User
    rails db:migrate
  4. Enable Copilot to Configure Authentication Routes:
    Open config/routes.rb, type devise_... and let Copilot suggest (if not already there):
    devise_for :users
  5. Generate Devise Views for Customization:
    rails generate devise:views

Step 3.2: Create the ChatRoom Model

  1. Generate a Model and Migration: Use the command:
    rails generate scaffold ChatRoom name:string topic:string
    rails db:migrate
  2. Define Validations in the Model: Open app/models/chat_room.rb and start typing:
    validates :name, ... Copilot will suggest:
    validates :name, presence: true, uniqueness: true

Step 3.3: Add Messages to Chat Channels

  1. Generate the Message Model:
    rails generate model Message content:text user:references chat_room:references
    rails db:migrate
  2. Use Copilot for Associations: Open app/models/message.rb and start typing:
    belongs_to :... Let Copilot complete:
    belongs_to :user
    belongs_to :chat_channel validates :content, presence: true

    Similarly, add associations in app/models/chat_room.rb:
    has_many :messages, dependent: :destroy

Adding Views for Messages

To interact with messages in your Rails app, you need views to display, create, and manage messages. Follow these steps:

Step 1: Generate a Controller for Messages

If you haven’t already created a MessagesController, do so now:

rails generate controller Messages

This will create:

  • A new MessagesController at app/controllers/messages_controller.rb.
  • A directory for views: app/views/messages.

Step 2: Add Routes for Messages

Ensure the config/routes.rb file includes routes for Messages:

resources :messages

Step 3: Implement Actions in the Controller

Open app/controllers/messages_controller.rb and add RESTful actions:

class MessagesController < ApplicationController
  before_action :set_message, only: [:show, :edit, :update, :destroy]

  # GET /messages
  def index
    @messages = Message.all
  end

  # GET /messages/:id
  def show
  end

  # GET /messages/new
  def new
    @message = Message.new
  end

  # POST /messages
  def create
    @message = Message.new(message_params)
    if @message.save
      redirect_to @message, notice: 'Message was successfully created.'
    else
      render :new
    end
  end

  # GET /messages/:id/edit
  def edit
  end

  # PATCH/PUT /messages/:id
  def update
    if @message.update(message_params)
      redirect_to @message, notice: 'Message was successfully updated.'
    else
      render :edit
    end
  end

  # DELETE /messages/:id
  def destroy
    @message.destroy
    redirect_to messages_url, notice: 'Message was successfully destroyed.'
  end

  private

  def set_message
    @message = Message.find(params[:id])
  end

  def message_params
    params.require(:message).permit(:content, :user_id, :chat_channel_id)
  end
end

Step 4: Create Views for Messages

Create the following view files in app/views/messages/:

  1. index.html.erb Displays a list of messages: Type “Command-i” and ask complete….
    <h1>Messages</h1> <%= link_to 'New Message', new_message_path %> <ul> <% @messages.each do |message| %> <li> <%= link_to message.content, message %> (<%= link_to 'Edit', edit_message_path(message) %> | <%= link_to 'Delete', message, method: :delete, data: { confirm: 'Are you sure?' } %>) </li> <% end %> </ul>
  2. show.html.erb Displays a single message:
    <h1>Message</h1> <p> <strong>Content:</strong> <%= @message.content %> </p> <p> <strong>User:</strong> <%= @message.user_id %> </p> <p> <strong>Chat Channel:</strong> <%= @message.chat_channel_id %> </p> <%= link_to 'Edit', edit_message_path(@message) %> | <%= link_to 'Back', messages_path %>
  3. new.html.erb A form to create a new message:
    <h1>New Message</h1> <%= render 'form', message: @message %> <%= link_to 'Back', messages_path %>
  4. edit.html.erb A form to edit an existing message:
    <h1>Edit Message</h1> <%= render 'form', message: @message %> <%= link_to 'Back', messages_path %>
  5. _form.html.erb A shared form partial for creating and editing messages:
    <%= form_with(model: message, local: true) do |form| %> <% if message.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(message.errors.count, 'error') %> prohibited this message from being saved:</h2> <ul> <% message.errors.full_messages.each do |msg| %> <li><%= msg %></li> <% end %> </ul> </div> <% end %> <div> <%= form.label :content %><br> <%= form.text_area :content %> </div> <div> <%= form.label :user_id %><br> <%= form.number_field :user_id %> </div> <div> <%= form.label :chat_channel_id %><br> <%= form.number_field :chat_channel_id %> </div> <div> <%= form.submit %> </div> <% end %>

Step 5: Migrate the Database

Ensure the database is updated:

rails db:migrate

Step 3.4: Set Up Real-Time Messaging with ActionCable

  1. Generate a Chat Channel:
    rails generate channel chat
  2. Modify the Generated Channel: Open app/channels/chat_channel.rb and start typing:
    class ChatChannel < ApplicationCable::Channel
    def subscribed
    # Use data to fetch subscription parameters
    room = params_from_identifier["room"]
    stream_from "chat_#{room}"
    end
    private
    def params_from_identifier JSON.parse(self.params[:identifier])
    end
    end
  3. Broadcast Messages: Open app/models/message.rb and add:
    after_create_commit ( broadcast_prepend_to "chat_room_#{chat_room_id}" )

Step 3.5: Build the Frontend with Copilot

  1. Install Bootstrap for Styling:
    yarn add bootstrap @popperjs/core
    Add to app/assets/stylesheets/application.css:
    @import "bootstrap";
  2. Generate Views for Channels and Messages:
    • Open app/views/chat_rooms/index.html.erb.
    • Start typing:
      <%= link_to 'New chat room' ...
    • Let Copilot suggest:
      <%= link_to "New chat room", new_chat_room_path %>
  3. Use Copilot for Live Message Rendering:
    Open app/views/messages/_message.html.erb:
    <p><%= message.user.email %>: <%= message.content %></p>

Step 3.6: Configure Routes with Copilot

Open config/routes.rb and type:

  resources :chat_rooms do
    resources :messages
  end

Let Copilot complete nested resources.

4. Deploy and Test the Application

Step 4.1: Precompile Assets

rails assets:precompile

Step 4.2: Start the Server

rails server -b 0.0.0.0

Step 4.3: Test

Visit http://192.168.100.94:3000 in your browser. Register, create channels, and send messages.

5. References

Ruby on Rails

GitHub Copilot

Bootstrap

PostgreSQL

Redis

By following this tutorial, you will experience firsthand how GitHub Copilot can streamline their coding process, from writing migrations to creating real-time features, making app development efficient and intuitive.

Scroll to Top