Tutorial: Building a Basic Ruby on Rails App for Managing Names and Phone Numbers

This tutorial guides college students in creating a simple Rails app for managing a list of names and phone numbers. The app will be developed on a remote Ubuntu Linux server using Visual Studio Code (VS Code) with GitHub Copilot.

1. Setting Up the Remote Ubuntu Linux Server

Step 1.1: Update and Install Required Packages

  1. Update the package list:sudo apt update && sudo apt upgrade -y
  2. Install 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.2: Install Ruby and Rails

  1. Install rbenv to manage Ruby versions:
    git clone https://github.com/rbenv/rbenv.git ~/.rbenv
    echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc
    echo 'eval "$(rbenv init - bash)"' >> ~/.bashrc
    exec $SHELL
  2. Install ruby-build for managing Ruby installations:
    git clone https://github.com/rbenv/ruby-build.git ~/.rbenv/plugins/ruby-build
  3. Install the latest stable version of Ruby:
    rbenv install 3.2.2
    rbenv global 3.2.2
  4. Install Rails:
    gem install rails
    rbenv rehash

Step 1.3: Install PostgreSQL (Optional)

For better database management, install PostgreSQL:

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

Step 1.4: Create the Rails App

  1. Generate a new Rails app:
    rails new contacts_app --database=postgresql
    cd contacts_app
  2. Set up the database:
    • Edit config/database.yml to configure the PostgreSQL username and password.
    • Initialize the database:
      rails db:create

2. Setting Up Visual Studio Code for Remote Development

Step 2.1: Install VS Code and Extensions

  1. Download and install VS Code from https://code.visualstudio.com/.
  2. Install the following extensions:
    • Remote – SSH: To develop on the remote server.
    • Ruby: For Ruby syntax highlighting and IntelliSense.
    • GitHub Copilot: For AI-assisted coding.

Step 2.2: Configure Remote-SSH

  1. Open the command palette in VS Code (Ctrl+Shift+P or Cmd+Shift+P) and select Remote-SSH: Add New SSH Host.
  2. Enter the SSH command for your server:ssh username@your-server-ip
  3. Save the configuration and connect to the server using Remote-SSH: Connect to Host.
  4. Navigate to the contacts_app directory in the VS Code file explorer.

3. Enabling GitHub Copilot

Step 3.1: Install GitHub Copilot

  1. Install the GitHub Copilot extension in VS Code.
  2. Log in to your GitHub account when prompted.

Step 3.2: Use GitHub Copilot

  • As you type code, GitHub Copilot suggests completions. Press Tab to accept a suggestion.

4. Building the Rails App

Step 4.1: Generate the Model

Use GitHub Copilot to simplify model creation:

  1. Run the following command to generate the Contact model:
  2. rails generate model Contact name:string phone:string
  3. Run migrations to apply changes to the database:rails db:migrate
  4. Open app/models/contact.rb and use Copilot to add validations. For example:
  5. class Contact < ApplicationRecord validates :name, presence: true validates :phone, presence: true, length: { is: 10 } end

Step 4.2: Create the Controller and Views

  1. Generate the controller:
  2. rails generate controller Contacts
  3. Open app/controllers/contacts_controller.rb and use Copilot to implement the index, new, create, edit, update, and destroy actions. Example for index:def index @contacts = Contact.all end
  4. Create views for index, new, and edit actions. For example, create app/views/contacts/index.html.erb:
    <h1>Contacts</h1> <table> <tr> <th>Name</th> <th>Phone</th> </tr> <% @contacts.each do |contact| %> <tr> <td><%= contact.name %></td> <td><%= contact.phone %></td> </tr> <% end %> </table>

Step 4.3: Add Routes

  1. Open config/routes.rb and define resources:Rails.application.routes.draw do resources :contacts root "contacts#index" end

Step 4.4: Test the App

  1. Start the Rails server:rails server -b 0.0.0.0
  2. Open your app in a browser at http://your-server-ip:3000.
  3. Add, edit, and view contacts.

5. Using GitHub Copilot for Efficiency

Example 1: Auto-generating Validations

  • Type validates in the Contact model, and Copilot will suggest validations for attributes.

Example 2: Writing Controller Actions

  • Type def create in contacts_controller.rb, and Copilot will suggest the entire create action with strong parameters.

Example 3: Creating Forms

  • Start typing a form in new.html.erb, and Copilot will auto-complete a form_with block.

6. Deploying the App (Optional)

Step 6.1: Install Passenger and Nginx

  1. Install Passenger and Nginx:sudo apt install -y libnginx-mod-http-passenger
  2. Configure Nginx to serve the Rails app.

Step 6.2: Deploy the App

  1. Precompile assets:rails assets:precompile
  2. Restart Nginx:sudo systemctl restart nginx
  3. Access your app at http://your-server-ip.

7. References

Scroll to Top