Code PHP Caro Online Realtime nền tảng Laravel 11 & Reverb

Code PHP Caro Online Realtime nền tảng Laravel 11 & Reverb

Laravel Caro là một ứng dụng game Caro Online realtime đơn giản

• PHP 8.2+
• Laravel 11
• Laravel Reverb (WebSocket)
• MySQL
• Node 18+
• Vue 3 x TypeScript
• TailwindCSS FTW

Setup

Sử dụng PHP 8.2+ và Node 18+

Tùy theo các bạn, tôi xài MySQL nên sử dụng MySQL.

Nếu được, hãy cài Redis và dùng CACHE_STORE=redis

Vào trang Console Google và tạo 1 project mới.

Sau đó vào OAuth Consent Screen và tạo 1 app testing.

• User Type: External
• Nhớ thêm testing users (Gmail của bạn, ko thì ko login dc đâu).
• Authorized domains: điền tạm 1 domain nào đó, có thể tạo 1 domain từ ngrok cũng được
• Scopes: userinfo.email, userinfo.profile và openid. Chỉ 3 cái này thôi nhé.
• Còn lại cứ next next

Sau đó vào Credentials và tạo OAuth 2.0 Client ID. Lưu ý, Authorized redirect URIs thì điền vào cái localhost của bạn (e.g.: http://localhost:8000/login-with-google)

Sau khi tạo xong, chúng ta sẽ update 3 cái ENVs này:

Truy cập vào localhost:8000 và bắt đầu chơi thử.

• Tạo tài khoản (thông qua đăng nhập Google)
• Tạo phòng
• Đợi người chơi thứ 2 vào phòng (thông qua URL hoặc rooms list)
• Đợi người chơi thứ 2 chuyển sang trạng thái “Sẵn Sàng”
• Chơi
• Kết quả sẽ được tính trên Backend

• Chatbox giữa 2 người chơi
• Chặn 2 đầu thì ko dc thắng
• Kick người chơi
• Bảng xếp hạng (ngày, tuần, tháng, năm)
• Lịch sử thi đấu
• Lịch sử từng nước đi
• Time limit (nếu sau x seconds mà ko đi thì mặc định thua)

• Tạo ra các reusable components (button, avatar,…)

Dành cho các bạn quan tâm học hỏi để tiếp thu thêm kiến thức + kinh nghiệm thực chiến với Laravel.

Tests là phần không thể thiếu trong các backend apps hiện nay. Project này cũng vậy.

Để học cách viết tests, hãy tham khảo thư mục tests

Project này bao gồm: Unit Tests và Feature Tests.

Note: cái quan trọng nhất là Logic Caro, dc test covered 100% 😎

Project này sử dụng GitHub Actions để chạy Continuous Integration (CI) process. Tham khảo thư mục .github/workflows để tìm hiểu thêm.

Workflow cơ bản:

• Pull project
• Setup dependencies
• Setup ENV
• Chạy tests
• Hoàn tất

Thay vì sử dụng Socialite của Laravel, mình viết 1 cái service đơn giản để login với Google.

Về cơ bản thì nó đơn giản, 2 external APIs call và hết. Không cần phải cài thêm package cho mệt.

Đúng vậy, khi ta stores Auth Token ở HTTPOnly Cookie, có thể ensure 100% là client không lấy + chỉnh sửa được.

Điều này khiến app của bạn dc secured hơn, mấy cái browser’s extensions cũng ko thể lấy dc token

• Nếu bạn lưu trong localStorage/sessionStorage thì có thể.

Tất nhiên là cái gì cũng có trade-offs nhưng mình cảm thấy approach này phù hợp cho Laravel Caro app.