zandelok 17 фев 2022 в 19:14

Пишем социальную сеть на Ruby on Rails. Часть 1

11 мин

5.2K

Веб-разработка*Ruby*MySQL*Ruby on Rails*Изучение языков

Туториал

Другие статьи этой серии:

Пишем социальную сеть на Ruby on Rails. Часть 2

Зачем и для кого эта статья?

Всем привет! Я Ruby on Rails Developer и еще совсем недавно я начинал свой путь в этой области. Я уже прошел первые шаги (о них я писал в данной статье), как выбор языка, изучение его основ, знакомство с фреймворком, первые pet-проекты, первые собеседования, первый оффер, первая компания. Но многие только начали идти по этому пути и именно для них эта статья. По своему опыту помню, как сложно искать гайды (большинство из них про создание книжных магазинов, личных блогов и т.д.), поэтому, надеюсь, многим понравиться идея создания соц сети.

Почему соц сеть и как будет идти процесс?

Во-первых, мне самому было бы интересно реализация данного проекта. Во-вторых, я вдохновился книгой Practical Rails Social Networking Sites by Alan Bradburne. Можно было бы сделать все по книге, скажете вы. Но зачем тогда я и мои статьи? Книга 2007 года и версия ruby там 1.8, поэтому решения в большинстве своем будут неактуальны в наше время. К тому же, я не собираюсь делать все по книге, а лишь руководствоваться ей (дизайн буду использовать из нее с добавлением bootsrap). Во время разработки я буду использовать многие гемы, которые будут полезны для начинающих разработчиков. Но скажу сразу: эта серия статей не для самого старта. Некоторые базовые вещи (установка ruby, rails, что такое MVC, git и тому подобное) я буду пропускать, поэтому рекомендую отложить данный цикл статей и вернуться к нему чуть позже. Если вы опытный разработчик и читаете эту статью, буду очень признателен услышать ваше мнение. Касательно периодичности выхода статей и сколько именно их будет не могу сказать, так как планирую делать проект в свободное время от работы и параллельно писать статьи. Но буду стараться не откладывать в долгий ящик и делать все с хорошим темпом.

Создаем проект и делаем первичные настройки

Перед тем, как мы начнем, установите следующие версии:

Ruby 3.0.3
Rails 6.1.4.6
MySQL 8.0
Node 10.19
Yarn 1.22.17

Очень советую вам использовать github во время разработки данного проекта. Чуть позже мы с вами настроим CI/CD на нашем проекте, что будет крайне полезным для вас опытом. Теперь создадим наш проект. Я назову его g_connect, но вы можете использовать любое другое название (если выберите другое, везде, где я буду использовать g_connect, пишите свое).

rails new g_connect -d mysql

Теперь переходим в папку с проектом и займемся первичными настройками. Я всегда начинаю с Gemfile и некоторые гемы, которые точно буду использовать во время разработки.

#Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '3.0.3'

gem 'aasm'
gem 'bootsnap', '>= 1.4.4', require: false
gem 'bootstrap'
gem 'devise'
gem 'jbuilder', '~> 2.7'
gem 'mysql2', '~> 0.5.2'
gem 'puma', '~> 5.0'
gem 'rails', '~> 6.1.4.6'
gem 'sass-rails', '>= 6'
gem 'slim'
gem 'turbolinks', '~> 5'
gem 'webpacker', '~> 5.0'

group :development, :test do
  gem 'better_errors'
  gem 'binding_of_caller'
  gem 'byebug', platforms: %i[mri mingw x64_mingw]
  gem 'factory_bot_rails'
  gem 'faker'
  gem 'rails-controller-testing'
  gem 'rspec-rails'
  gem 'rubocop'
  gem 'rubocop-rails'
  gem 'rubocop-rspec'
end

group :development do
  gem 'annotate'
  gem 'listen', '~> 3.3'
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'spring'
  gem 'web-console', '>= 4.1.0'
end

group :test do
  gem 'capybara', '>= 3.26'
  gem 'rspec_junit_formatter'
  gem 'selenium-webdriver'
  gem 'simplecov', require: false
  gem 'webdrivers'
end

gem 'tzinfo-data', platforms: %i[mingw mswin x64_mingw jruby]

Давайте я поясню, для чего некоторые из этих гемов (более подробно рекомендую перед стартом ознакомиться с документацией):

gem 'aasm' - его мы будем использовать для транзакций между состояниями
gem 'bootstrap' - это нам нужно будет для нашего дизайна (я делаю упор на бэк и совсем немного буду уделять время фронту, но в самом конце может и придет вдохновение на наведение красоты)
gem 'devise' - аутентификация (коротко и ясно, будет еще гем для авторизации, но я еще не выбрал, какой)
gem 'slim' - сэкономим время на написании html-тегов
gem 'better_errors' - красивый вывод ошибок в браузере (например, роут указали неправильный)
gem 'factory_bot_rails' - шаблон, который будем использовать в наших тестах
gem 'faker' - для создания фейковых данных
gem 'rspec-rails - это подключаем среду тестирования RSpec для нашего проекта
gem 'rubocop' - проверяем, насколько хорошо написан наш код
gem 'annotate' - для автоматической аннотации наших моделей (зачем переключаться между моделей и миграцией, если есть этот гем)
gem 'simplecov' - для просмотра, все ли мы покрыли тестами

Теперь нужно установить все гемы и их зависимости, поэтому запускаем bundle в нашем терминале (кстати да, забыл сказать, что использую Ubuntu, поэтому для MacOS/Windows(вот винду вообще не трогайте лучше при разработке на ruby, но уж если оч хочется) смотрите некоторые моменты самостоятельно). Также можем удалить папку test, она не понадобиться (ведь будем писать rspec-и).

После этого настроим нашу БД. В файле config/database.yml укажите свои username и password (я стандартно делал root/root). После этого запускаем следующее (если кто-то не знает, то эта одна команда сразу же выполняет db:create, db:schema:load и db:seed):

rails db:setup

Некоторые из наших гемов требуют дополнительной настройки. Ими мы сейчас и займемся (devise также требует дополнительной настройки, но им мы займемся позже, когда будем делать аутентификацию). Начнем с bootstrap. Переходим в файл app/assets/stylesheets/application.scss (файл может вначале иметь расширение .css, поэтому исправьте его на .scss) и добавляем следующую строчку:

/*app/assets/stylesheets/application.scss*/

@import "bootstrap";

Теперь настроим annotate. Для этого в терминале запустите следующую команду:

rails g annotate:install

Теперь нужно настроить rspec:

rails g rspec:install

Также для наших тестов нам понадобится настройка factory_bot_rails и simplecov. В нашей папке spec создаем папку support, а в ней создаем файл factory_bot.rb со следующим кодом:

#spec/support/factory_bot.rb

RSpec.configure do |config|
  config.include FactoryBot::Syntax::Methods
end

Теперь переходим в наш spec/rails_helper.rb. Здесь мы подключим наш файл для factory_bot, а так же подключим simplecov (две строчки для подключения simplecov должны быть в самом начале файла).

#spec/rails_helper.rb

require 'simplecov'
SimpleCov.start 'rails'
require_relative './support/factory_bot'

С настройкой гемов пока что закончили. Если вы хотите проверить процент покрытия тестами, то можете запустить xdg-open coverage/index.html и вот она магия. Но я бы хотел добавить еще пару моментов. Первый - shared_context.rb для тестов наших моделей. В папке spec/support создайте shared_context.rb

#spec/support/shared_context.rb

RSpec.shared_examples 'creates_object_for' do |model_name|
  subject { FactoryBot.build(model_name) }

  it 'creates object' do
    expect { subject.save }.to change { described_class.count }.by(1)
  end
end

RSpec.shared_examples 'not_create_object_for' do |model_name, parameter|
  subject { described_class.create(attributes) }

  let(:attributes) { FactoryBot.attributes_for(model_name, parameter) }

  it 'does not create object' do
    expect { subject.save }.to change { described_class.count }.by(0)
  end

  it 'raise RecordInvalid error' do
    expect { subject.save! }.to raise_error(ActiveRecord::RecordInvalid)
  end
end

Наш shared_context будет играть роль шаблона для тестирования моделей. В нем мы опишем, что должно происходить, если данные валидны и объект создаётся, и наоборот, что будет происходить, если какие-то данные невалидны либо отсутствуют и объект не будет создаваться. Это заметно упростит написание тестов для моделей, потом на практике вы в этом убедитесь. Теперь давайте подключим его в наш spec_helper.rb

#spec/spec_helper.rb

require_relative './support/shared_context'

И последнее по настройкам перед стартом: чутка дизайна. Перейдите в app/views/layouts/application.html.erb. Измените расширение .erb на .slim и сделайте вот так:

#app/views/layouts/application.html.slim

doctype html
html
  head
    meta content='text/html; charset=UTF-8' http-equiv='Content-Type'
    title G-Connect
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
  body
    #container
      #header
        
      #sidemenu
        = render 'application/sidemenu'
      #content
        = yield

Как по мне, это намного лучше смотрится, чем .html.erb. Если вы до этого никогда не использовали .slim, то используйте вот этот ресурс для перевода из .html.erb в .html.slim. Далее в папке app/views создаем папку application, а в ней файл _sidemenu.html.slim и внутри него пока что только следующие строчки:

#app/views/layouts/_sidemenu.html.slim

ul
  li
    = link_to 'Home', '/', class: 'btn btn-sm btn-light'

Затем переходим в app/assets/stylesheets/application.scss и добавляем следующее:

/*app/assets/stylesheets/application.scss*/

body {
   margin: 0;
   padding: 0;
   background-color: #f0ffff;
   font-family: Arial, Helvetica, sans-serif;
 }

 #header {
   background-color: #f0ffff;
   height: 60px;
   margin-top: 10px;
   text-align: left;
   padding-top: 1px;
 }

 #container {
   width: 760px;
   min-width: 760px;
   margin: 0 auto;
   padding: 0px;
 }

 #sidemenu {
   font-size: 80%;
   float: left;
   width: 100px;
   padding: 0px;
 }

 #sidemenu ul {
   list-style: none;
   margin-left: 0px;
   padding: 0px;
 }

 a {
   color: #b00;
 }

 a:hover {
   background-color: #b00; color: #f0ffff;
 }

 #content {
   float: right;
   width: 650px;
 }

 th {
   background-color: #933;
   color: #f0ffff;
 }

 tr.odd {
   background-color: #fcc;
 }

 tr.even {
   background-color: #ecc;
 }

Пока совсем простенько (css взят из книги), но, как я и говорил ранее, я делаю упор на бэк. Когда первичная работа окончена, можем двигаться дальше. Может залить все, что мы с вами сделали, на github и делать новые вещи уже в другой ветке. Рекомендую перед этим сделать проверку rubocop-ом (можете добавить специальное расширение для вашей IDE и он сразу будет подсвечивать вам файлы, в которых есть недочеты).

Создание модели страниц

Первую модель мы сделаем для страниц. У нее будут следующие поля

Имя поля	Тип
`id`	`integer`
`title`	`string`
`permalink`	`string`
`body`	`text`

Permalink будет составляться из нашего title, только будет иметь более красивый вид, чтобы использовать его в качестве url. Давайте создадим модель.

rails g model Page

Помимо модели у нас сгенерировалась миграция и два файла для тестов, к ним мы вернемся чуть позже. Миграция находится в папке db/migrate. Давайте начнем с нее:

#db/migrate/date_time_create_pages.rb

class CreatePages < ActiveRecord::Migration[6.1]
  def change
    create_table :pages do |t|
      t.string :title,          null: false
      t.string :permalink
      t.text :body,             null: false
    end
  end
end

После этого запускаем rails db:migrate (наш annotate сразу же показывает, какие файлы были аннотированы) и переходим в нашу модель. Здесь мы пропишем наши валидации, а так же метод для получения нашего permalink (его мы будем вызывать с помощью коллбэка after_create). В этом методе я буду использовать регулярные выражения, для помощи с их составлением я всегда использую Rubular.

#app/model/page.rb

class Page < ApplicationRecord
  after_create :clean_url

  validates_presence_of :title, :body
  validates :title, length: { in: 3..250 }
  validates :body, length: { in: 3..100_00 }

  private

  def clean_url
    return unless self.permalink.nil?
    url = title.downcase.gsub(/\s+/, '_').gsub(/[^a-zA-Z0-9_]+/, '')
    self.permalink = url
    save
  end
end

Теперь предлагаю заняться нашими тестами. Начнем с файла spec/factories/pages.rb

#spec/factories/pages.rb

FactoryBot.define do
  factory :page do
    title { 'Test' }
    body { 'Test' }
  end
end

После этого можем заняться непосредственно написанием тестов. Именно в этом файле нам и пригодится наш написанный ранее spec/supprot/shared_context.rb.

#spec/models/page_spec.rb

require 'rails_helper'

RSpec.describe Page, type: :model do
  describe '.create' do
    context 'with valid attributes' do
      include_examples 'creates_object_for', :page
    end

    context 'with invalid attributes' do
      context 'with short title' do
        include_examples 'not_create_object_for', :page, title: 'te'
      end

      context 'with too long title' do
        include_examples 'not_create_object_for', :page, title: Faker::String.random(length: 253)
      end

      context 'with short body' do
        include_examples 'not_create_object_for', :page, body: 'te'
      end

      context 'with too long body' do
        include_examples 'not_create_object_for', :page, body: Faker::String.random(length: 100_02)
      end
    end

    context 'with missing attributes' do
      context 'with missing title' do
        include_examples 'not_create_object_for', :page, title: nil
      end

      context 'with missing body' do
        include_examples 'not_create_object_for', :page, body: nil
      end
    end
  end
end

Думаю, здесь не нужно никаких пояснений, лишь отмечу, что private методы не нуждаются в тестировании, поэтому здесь и нет тестов для нашего clean_url. Можем запустить rspec в нашем терминале и убедиться, что все наши тесты проходят без ошибок. Когда с моделью и тестами для них мы разобрались, предлагаю заняться контроллером. Я не использую генератор для контроллеров, поэтому создаем файл pages_controller.rb в нашей папке app/controllers. Здесь мы пропишем следующее:

#app/controllers/pages_controller.rb

class PagesController < ApplicationController
  before_action :find_page, only: %i[show edit update destroy]

  def index
    @pages = Page.all
  end

  def show; end

  def new
    @page = Page.new
  end

  def create
    @page = Page.create(page_params)

    if @page.save
      redirect_to pages_path, notice: 'Page created'
    else
      render :new
    end
  end

  def edit; end

  def update
    if @page.update(page_params)
      redirect_to page_path(@page), notice: 'Page updated'
    else
      render :edit
    end
  end

  def destroy
    @page.destroy
    redirect_to pages_path, notice: 'Page deleted'
  end

  private

  def find_page
    @page = Page.find(params[:id])
  end

  def page_params
    params.require(:page).permit(:title, :permalink, :body)
  end
end

Здесь все с больше абсолютно стандартное, поэтому также не буду заострять на этом внимание. Теперь нужно добавить роуты для нашего контроллера:

#config/routes.rb

Rails.application.routes.draw do
  root 'pages#index'

  resources :pages
end

Теперь давайте покроим тестами наш контроллер. Для это в папке spec создаем папку controllers и там же сразу создаем файл pages_controller_spec.rb

#spec/controllers/pages_controller_spec.rb

require 'rails_helper'

RSpec.describe PagesController, type: :controller do
  describe 'GET #index' do
    let(:pages) { [FactoryBot.create(:page)] }

    it 'returns all pages' do
      get :index

      expect(response).to render_template('index')
      expect(response).to have_http_status(:ok)
      expect(assigns(:pages)).to eq(pages)
    end
  end

  describe 'GET #show' do
    let(:page) { FactoryBot.create(:page) }

    it 'assigns page' do
      get :show, params: { id: page.id }

      expect(response).to render_template('show')
      expect(response).to have_http_status(:ok)
      expect(assigns(:page)).to eq(page)
    end
  end

  describe 'GET #new' do
    it 'returns render form for creating new page' do
      get :new

      expect(response).to render_template('new')
      expect(response).to have_http_status(:success)
    end
  end

  describe 'POST #create' do
    let(:page_params) { FactoryBot.attributes_for(:page) }

    it 'creates new page' do
      post :create, params: { page: page_params }

      expect(response).to redirect_to('/pages')
      expect(response).to have_http_status(:found)
    end

    it 'doesn`t create new page' do
      post :create, params: { page: page_params.except(:title) }

      expect(response).to render_template('new')
    end
  end

  describe 'PUT #update' do
    let(:page) { FactoryBot.create(:page) }

    it 'updates the requested page' do
      put :update, params: { id: page.id, page: { title: 'brbrbr' } }

      expect(response).to redirect_to("/pages/#{page.id}")
      expect(response).to have_http_status(:found)
    end

    it 'doesn`t update page' do
      put :update, params: { id: page.id, page: { title: '' } }

      expect(response).to render_template('edit')
    end
  end

  describe 'DELETE #destroy' do
    let(:page) { FactoryBot.create(:page) }

    it 'destroys page' do
      delete :destroy, params: { id: page.id }

      expect(response).to redirect_to('/pages')
    end
  end
end

Теперь же предлагаю сделать визуал для нашего контроллера. Переходим в app/views и создаем там папку pages, а в ней 5 файлов: _form.htm.slim, new.html.slim, edit.html.slim, show.html.slim и index.html.slim. Теперь пройдемся по каждому из них. В нашем _form.htm.slim будет находиться форма, которую мы будем заполнять для создания или изменения наших Pages. Эту форму мы будем рендерить в наших new и edit соответственно.

#app/views/pages/_form.html.slim

= form_with(model: page, local: true) do |f|
  .form-group
    = f.label :title
    = f.text_field :title
  .form-group
    = f.label :body
    = f.text_area :body
  .form-group
    = f.submit 'Submit', class: 'btn btn-success'

#app/views/pages/new.html.slim

h1 New Page

= render 'form', page: @page

= link_to 'Back', :back, class: 'btn btn-sm btn-primary'

#app/views/pages/edit.html.slim

h1 Edit Page

= render 'form', page: @page

= link_to 'Back', :back, class: 'btn btn-sm btn-primary'

Теперь займемся show и index:

#app/views/pages/show.html.slim

p
  strong Title: 
  = @page.title
p
  strong Body: 
  = @page.body

= link_to 'Edit', edit_page_path(@page), class: 'btn btn-sm btn-success'
'
= link_to 'Delete', page_path(@page), method: :delete, class: 'btn btn-sm btn-danger', data: { confirm: 'Are you sure?' }
'
= link_to 'Back', :back, class: 'btn btn-sm btn-primary'

#app/views/pages/index.html.slim

h2 Pages
ul
  - @pages.each do |page|
    li
      = page.permalink
      |: 
      = page.title
      |
      p  
        = link_to 'Show', page_path(page), class: 'btn btn-sm btn-info'

p
  = link_to 'Create new page', new_page_url, class: 'btn btn-sm btn-primary'

И последняя вещь на сегодня - немного подправим _sidemenu.html.slim

#app/views/application/_sidemenu.html.slim 

ul
  li
    = link_to 'Home', root_path, class: 'btn btn-sm btn-light'

Думаю, на сегодня уже достаточно. Итак довольно объемная статья получилась. Проверьте все rubocop-ом, исправьте недочеты, если нужно, и можете смело заливать на ваш github. В следующей статье мы добавим пользователей, devise и настроим CI/CD. Надеюсь вам всем было интересно читать эту статью. Если есть какие-то замечания либо же предложения - смело пишите в комментариях. Желаю всем поменьше ошибок в коде и побольше интересных проектов!

Теги:

Хабы:

Пишем социальную сеть на Ruby on Rails. Часть 1

Зачем и для кого эта статья?

Почему соц сеть и как будет идти процесс?

Создаем проект и делаем первичные настройки

Создание модели страниц

Публикации

Истории

Работа

Ближайшие события