1. Môi trường 🔎

• Ruby on Rails 6 (hoặc 7) 
• Ruby 3.0.0
• Project đã sử dụng ActionText trước đó
• Gem stimulus-rails (nếu sử dụng Rails 7 thì không cần cài gem này)
• @hotwired/stimulus
• @picmo/popup-picker
• picmo

2. Cài đặt thư viện 👨‍💻

1. Thêm gem stimulus-rails vào gemfile và chạy bundle install. (Rails 7 đã sử dụng sẵn gem này nên không cần phải cài thêm)
2. Chạy yarn add @hotwired/stimulus @picmo/popup-picker picmo

3. Tìm hiểu các kiến thức cần thiết 📑

• Javascript class: 
  • Hàm tạo của js class là constructor(). Trong hàm tạo có thể gán hoặc khởi tạo các thuộc tính cho class.
  • Các thuộc tính của class
  • Các class method. Không như class method của Ruby thì class method trong javascript là method của instance, tức phải khởi tạo biến trước rồi mới gọi được.
• Import / Export trong js:
  • Một class, biến hoặc method trong javascript có thể được export. Các class khác có thể sử dụng lại bằng cách import class, biến hoặc method đã được export trong file vừa rồi. Như kiểu tách code ra để tái sử dụng lại với giữ cho các file code không quá nhiều dòng.
• DOM Parser: 
  • parseFromString(string, mimeType): string là một chuỗi được viết theo định dạng nhất định như là html, xml, ... Còn mimeType là định dạng mà string viết theo ('text/html', 'text/xml', ...). MimeType chỉ nhận 5 định dạng các định dạng khác sẽ raise TypeError. Hàm này trả về 1 html document hoặc xml document. Tìm hiểu thêm tại đây.
• addEventListener(): elementX.addEventListener(action, function) trong đó action là hành động của người dùng trên element ấy như là hover, click, ... Còn function là 1 đoạn mã xử lý. Hàm này sẽ gán function vào elementX khi người dùng làm hành động action lên elementX thì function sẽ được gọi.
• querySelector(): documentX.querySelector(selectors) hàm này sẽ tìm trong documentX và trả ra element đầu tiên thỏa mãn điều kiện selectors