Ruby on Rails 8 and Hotwire : Build a Password Manager

Ruby on Rails 8 và Hotwire: Xây dựng Trình quản lý Mật khẩu

Xây dựng ứng dụng Web Full-stack Ruby on Rails hiện đại với JSON API bảo mật và tiện ích mở rộng Google Chrome

4.7

(80 đánh giá)

508 học viên

Giảng viên

Nick McNeany

Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao

50.000đ 399.000đ -87%

✓ Xem giỏ hàng và thanh toán

Bao gồm phụ đề tiếng Việt, tiếng Anh

7.5 giờ video

69 bài giảng

Truy cập vĩnh viễn

Học trên mọi thiết bị

Cập nhật: 28/05/2026

#Authentication #Full Stack Development #Hotwire #Ruby On Rails

Bạn sẽ học được gì

Học cách tạo ứng dụng Rails đơn-codebase kết hợp giao diện web với JSON API bảo mật cho tiện ích Chrome

Học cách tạo tiện ích mở rộng Google Chrome sử dụng JSON API từ ứng dụng Ruby on Rails

Học cách tạo JSON API bảo mật với xác thực JWT

Học cách tận dụng Hotwire để tạo Ứng dụng Trang đơn (SPA) sánh ngang với bất kỳ framework Javascript hiện đại nào

Học cách sử dụng Hotwire (Turbo và Stimulus) bên ngoài ứng dụng Ruby on Rails

Học cách tận dụng API tiện ích mở rộng Google Chrome để hiển thị dữ liệu dựa trên trang web hiện tại và tự động điền thông tin biểu mẫu chỉ với một cú nhấp chuột

Học các thực hành tốt nhất của Ruby on Rails

Yêu cầu

Kiến thức cơ bản về HTML, CSS và Javascript

Kinh nghiệm cơ bản về Ruby và Ruby on Rails

Đối tượng phù hợp

Dành cho nhà phát triển Ruby on Rails từ mới bắt đầu đến chuyên nghiệp

Những người quan tâm đến phát triển web với Ruby on Rails

Nhà phát triển muốn tạo ứng dụng Web Ruby on Rails và tiện ích mở rộng Google Chrome

Nội dung khóa học

12 phần • 69 bài giảng

1 Quan trọng. Vui lòng xem.

2 Những gì chúng ta sẽ xây dựng

3 Mã nguồn

4 Thiết lập môi trường phát triển

1 Chạy Rails New và khởi động máy chủ

2 Pages Controller, Định tuyến và Views

3 View - Navbar Partial và Liên kết

1 Cài đặt Devise Gem

2 Views - Tạo kiểu biểu mẫu Devise

3 View - Phương thức Helper Logo

4 Stimulus - Thông báo Flash và Trình khởi tạo lỗi biểu mẫu

5 Tạo người dùng và kiểm tra phiên đăng nhập

6 Tạo kiểu trang Tài khoản

1 Entry Model

2 Định tuyến Entry

3 Controller và View - New Action

4 View - Biểu mẫu New Entry

5 Controller - Create Action

6 Model - Xác thực cơ sở dữ liệu Entry

7 Model - Mã hóa Active Record

8 View - Index Action cho tất cả các Entry

9 View và Controller - Show Action cho một Entry

1 Giới thiệu phần

2 View - Chuẩn bị Index cho SPA

3 View - Dashboard Sidebar

4 View - Dashboard Main

5 Turbo Frames - Xem một Entry trong Dashboard Main

6 Turbo Frames - Hiển thị biểu mẫu New Entry trong Turbo Frame

7 Turbo Streams - Create Action và Cập nhật View

8 Turbo Streams - Sửa thông báo Flash

9 Turbo Streams - Xóa Entry

10 Cơ sở dữ liệu - Entry Seeds

11 Turbo Frames - Giao diện chỉnh sửa nội tuyến Phần 1

12 Turbo Frames - Giao diện chỉnh sửa nội tuyến Phần 2

13 Turbo Streams - Update Action chỉnh sửa nội tuyến

1 Model - Tìm kiếm Entry

2 Turbo Streams - Tự động tải Dashboard Main khi có một kết quả tìm kiếm

3 Stimulus - Xóa kết quả tìm kiếm

4 Stimulus - Sao chép vào clipboard

5 Stimulus - Chuyển đổi hiển thị mật khẩu

1 Controller - Entries JSON API

2 Controller - API Base Controller

3 Controller - Xác thực API

4 JWT - Mã hóa và Giải mã Token

5 JWT - Giải mã và Xác thực Token

6 JWT - Xử lý ngoại lệ

1 Giới thiệu phần

2 Mẫu khởi đầu

3 Thiết lập và tải lên Chrome

4 Khung Đăng nhập và Entries cơ bản

1 Frame - Biểu mẫu Đăng nhập

2 Stimulus - Auth Controller

3 Storage Service - setSessionStorage và getSessionStorage

4 Stimulus - Đăng xuất và Navbar

1 Stimulus - Entries Controller

2 Service - Lấy Entries

3 View - Mẫu Entries

4 Stimulus - Tìm kiếm Entries

5 Stimulus - Sao chép vào clipboard

6 Stimulus - Chuyển đổi mật khẩu

1 Điều hướng đến URL đăng nhập của Entry

2 Tự động tải Entry từ URL của tab hiện tại

3 sendMessage - Gửi thông tin đăng nhập đến contentScript

4 onMessage Listener - Lắng nghe tin nhắn và điền thông tin đăng nhập

5 Hàm tiện ích - Bộ chọn đầu vào

1 Triển khai lên Heroku

2 Triển khai lên Fly.io

3 Triển khai lên Render

4 Triển khai lên Chrome Web Store

Giới thiệu khóa học

In this course, we're going to build a password manager inspired by popular applications like 1Password and LastPass. Our application will enable users to create secure accounts, allowing them to store login credentials for their favorite websites. These credentials will be easily accessible through a Chrome Extension, powered by a secure, robust JSON API from our Rails backend.

We'll begin by creating a Ruby on Rails 8, Full-stack web application. Leveraging the power of Hotwire, we'll create a lightning-fast Single Page Application (SPA). We'll also take advantage of advanced Rails 8 tools such as Active Record Encryption, ensuring sensitive user information like usernames and passwords are securely encrypted and safely stored in our database.

Next, while working in the same Ruby on Rails 8 web application we'll start building out a secure JSON API, implementing user authentication using JSON Web Tokens (JWT). Users who successfully authenticate will receive an expiring token to securely fetch their data through subsequent requests.

Finally, we'll use the Google Chrome Extension API and Hotwire (yes, you can use Hotwire outside of Rails!) to build a similar version of our web application as a Chrome Extension. We'll cover essential topics such as using local storage, communicating between the Popup and Content Script, retrieving URLs from active tabs, and automatically filling login forms with a single click.

CHANGELOG:
- July 17, 2025 (Section 1 - Lesson 3): Update SafePassExtension zip file with missing assets.