Створення блогу на Rails 8 - javascript.org.ua

Створення міцного фундаменту на Ruby on Rails — це ключ до того, щоб стати крутим розробником. Натхнені дуже корисним туторіалом від Девіда Хайнемайера Ханссона (DHH), цей гайд допоможе вам створити додаток Rails 8 з нуля. Ми зосередимося на кращих практиках та вигляді (views), щоб ваш додаток був не просто робочим, а й виглядав круто. Хочете створити демонстраційний проєкт чи підготувати базу для великого проєкту? Не переживайте, цей туторіал охоплює все необхідне. Ви отримаєте корисні знання як для сьогодні, так і на майбутнє. 💻✨

Почнемо!

Примітка: якщо застрягли, просто клонуйте мій репозиторій тут.

Функції:

Редагування тексту для постів
Виведення локального часу за допомогою local-time
Turbo Streams для реальних оновлень
Аутентифікація (кастомне рішення)
Система коментарів за допомогою partials і Turbo Frames
Просте стилізування за допомогою CDN стилів

0. Налаштування: Підготовка середовища

Встановіть Ruby, Rails 8 та всі необхідні залежності.
Налаштуйте базу даних (ми будемо використовувати SQLite, щоб швидко і просто).
Перевірте налаштування:

# Система, яку я використовую  
OS: MacOS Sonoma 15.3.1  
Processor: Intel® Core™ i7-9750H - 16GiB RAM

rails -v  
Rails 8.0.0

1. Створення Rails додатка:

rails new blog  
cd blog

2. Використовуємо потужність scaffolding в Rails 8:

Ознайомтесь з філософією Rails для спрощення розробки в Rails.
Використовуємо налаштування за замовчуванням Rails, щоб все працювало швидко.

rails g scaffold post title:string body:text  
rails db:migrate

3. Починаємо з перевірки контролера:

app/controllers/posts_controller.rb

Контролер постів в Rails керує всіма основними діями, такими як показ даних (index, show), створення/редагування даних (new, edit, create, update) та видалення даних (destroy). Цей контролер також автоматично може надсилати HTML для веб-сторінки або JSON для API. Дані посту отримуються за ID в URL або з параметрів форми, тому немає потреби в ручному налаштуванні.

4. Консоль — створення та оновлення об’єктів:

Щоб запустити додаток, введіть у терміналі:

rails s

Створіть перший пост через браузер:
http://localhost:3000/posts або http://localhost:3000/posts.json.

Далі відкрийте консоль Rails:

rails c

Створіть пост і спробуйте оновити його через консоль, виконавши команду:

post = {"title": "масив з CLI", "body":"lorem ipsum sit amet"}  
Post.create!(post)  

Post.first.update!(title: “Змінено через CLI”)  
exit

Коли захочете вийти, просто введіть exit.

Останнє, оновіть браузер, щоб побачити оновлений пост.

5. Додаємо стиль

app/views/layouts/application.html.erb

<%= stylesheet_link_tag "https://cdn.simplecss.org/simple.css" %>

6. Встановлюємо WYSIWYG редактори. У терміналі:

rails action_text:install  
rails db:migrate

Якщо rails db:migrate не вдалось, виконайте bundle install.

Перезапустіть сервер.

7. Оголошуємо в моделі `post` hasrichtext :body :

app/models/post.rb

has_rich_text :body

8. Виведення WYSIWYG інтерфейсу:**

Використовуємо rich_ у формі:

app/views/posts/_form.html.erb

<%= form.rich_textarea :body %>

rails db:migrate

http://127.0.0.1:3000/posts/new

9. Встановлюємо `libvips` — для рендерингу зображень:

Бібліотека libvips, залежність для рендерингу зображень у Rails (через гем image_processing або mini_magick), повинна бути встановлена та доступна в середовищі нашого пристрою.

Встановіть бібліотеку libvips у системі.
beda OS beda cara:

Mac:  
brew install vips  

Linux:  
sudo apt-get update  
sudo apt-get install -y libvips  

Windows:  
entar dulu

Тепер ми можемо завантажувати зображення:

Натискаємо “Прикріпити файл” і вибираємо зображення

10. Додаємо локальний час

У терміналі вводимо команду:

bin/importmap pin local-time

Ми побачимо це автоматично в config/importmap.rb:

pin "local-time" # @3.0.2

11. Додаємо час у наш додаток:

app/javascript/application.js

import LocalTime from "local-time"  
LocalTime.start()

Rails 8 — no-build за замовчуванням — це означає, що не потрібно складно налаштовувати компіляцію коду (transpiling), використовувати bundler (Webpack і т.д.), або NPM. Усі пакети завантажуються безпосередньо у браузер за допомогою Import Maps, класної функції Rails для управління JavaScript без зайвих проблем. Зацікавлені в тому, як це працює? Залишайтеся з нами — у наступному туторіалі ми детально розглянемо Import Maps.

12. Додаємо timestamp до посту

app/views/posts/_post.html.erb


 Update at:  
 <%= time_tag post.updated_at, "data-local": "time", "data-format": "%B %e, %Y %l:%M %P"%>

Тестуємо. Потрібно буде побачити: Updated at: January 10, 2025, 3:34 PM. І це локальний час нашого комп'ютера.

13. Додаємо коментарі:

У терміналі вводимо команду:

rails g resource comment post:references content:text   
rails db:migrate

14. Контролер коментарів:

app/controllers/comments_controller.rb

class CommentsController < ApplicationController  
  before_action :set_post    

  def create  
    @post.comments.create! params.require(:comment).permit(:content)  
    redirect_to @post  
  end  

  private  
  def set_post  
    @post = Post.find(params[:post_id])  
  end  
end

15. Створюємо зв'язок між постом та коментарем, заходимо в модель:

app/models/post.rb

has_many :comments

16. Створюємо окремий файл у директорії `app/views/comments`:

app/views/comments/_comments.html.erb

Comments

<%= render post.comments %>   
<%= render "comments/new", post: post %>

app/views/comments/_comment.html.erb

<%= comment.content %> -     
<%= time_tag comment.updated_at, "data-local": "time-ago" %>

app/views/comments/_new.html.erb

<%= form_with model: [post, Comment.new] do |form| %>  
  Your comment:  
  <%= form.text_area :content, size: "20x5" %>  
  <%= form.submit %>  
<% end %>

17. Виводимо коментарі:

app/views/posts/show.html.erb

<%= render "comments/comments", post: @post %>

18. Маршрутизація:

config/routes.rb

resources :posts do  
  resources :comments  
end

19. Тестуємо:

rails s

20. Тепер додаємо Turbo-frame

app/views/posts/show.html.erb

<%= turbo_stream_from @post %>

Додаємо цей код на сторінку show, щоб підключити WebSocket до каналу, що належить конкретному посту. Результат: оновлення постів/коментарів можуть з'являтися в реальному часі без перезавантаження сторінки.

21. Додаємо broadcasts:

app/models/comment.rb

broadcasts_to :post

22. Створюємо аутентифікацію (без Devise)

Відкриваємо термінал:

rails g authentication  
rails db:migrate

23. Seeding:

db/seeds.rb

User.create!(  
  email_address: "[email protected]",  
  password: "Password1!"  
)

24. Заповнюємо базу даних:

rails db:seed   
rails s

25. Створюємо кнопку для виходу

app/views/layouts/application.html.erb

<%= button_to 'Sign out', session_path, method: :delete if authenticated? %>

Оновлення:

`config/routes.rb`

root "posts#index"
```

Усе це засновано на відео Дэвіда Хайнемайера Ханссона (DHH), засновника Rails

Цей туторіал блогу заснований на відео від DHH

0 # Rails8Series — Управління версіями Rails — Як впоратися з випадковими оновленнями та повернутися до старішої версії

1 # Rails8Series — Створення додатка Rails 8 з нуля — Фундамент для сучасного розробника (цей туторіал)

2 # Rails8Series — Освоєння Import Maps в Rails 8— Покроковий гід для ефективного управління JavaScript

3 # Rails8Series — Часто задавані питання та відповіді — 4 основні питання, на які відповідаємо!

4 # Rails8Series — Розумінняparams.expect— Спрощене пояснення та приклади коду

5 # Rails8Series — Ініціалізація в Turbo Streams — Швидка примітка про використання Rails 8bin/devКоманда для розробки

6 # Rails8Series — Освоєння Turbo Streams в Rails 8 — Безшовні динамічні оновлення з Turbo Frames, AJAX та Stream Responses

7 # Rails8Series — Освоєння Enums в Rails— Практичний посібник для спрощення та покращення ваших моделей ActiveRecord

8 # Jungletronics — Початок роботи з Rails 8

Перекладено з: Bikin Blog App Pakai Rails 8