SCSS và TypeScript: Công Nghệ Phát Triển Web Mạnh Mẽ cho Aninagori

SCSS

Mã SCSS được biên dịch thành CSS thông thường trước khi được gửi đến trình duyệt, giúp nhà phát triển tận dụng các tính năng CSS nâng cao trong khi duy trì khả năng tương thích với các trình duyệt. Nó cho phép nhà phát triển viết các ứng dụng mạnh mẽ và có khả năng mở rộng hơn bằng cách phát hiện các lỗi thông thường trong quá trình biên dịch và cung cấp hỗ trợ công cụ tốt hơn. TypeScript giới thiệu các tính năng như kiểu dữ liệu tĩnh, giao diện, generics và modules, giúp tổ chức mã, cải thiện chất lượng mã và tăng năng suất phát triển.

Nó có thể được sử dụng với bất kỳ dự án JavaScript nào và được biên dịch thành JavaScript thuần, giúp cho phù hợp với mã nguồn JavaScript hiện có.

Tổng kết chương

SCSS, viết tắt của "Sassy CSS," là một phiên bản mở rộng của CSS giúp cải thiện trải nghiệm viết mã. Nó cho phép nhà phát triển viết các bộ mã CSS dễ bảo trì và có thể tái sử dụng bằng cách cung cấp một cách tiếp cận modul và có cấu trúc hơn. TypeScript là một phiên bản JavaScript có kiểu dữ liệu mạnh mẽ, được sử dụng rộng rãi để phát triển ứng dụng.

Dựa vào đó, nhằm cung cấp một mạng xã hội chia sẻ anime giúp lan tỏa sự yêu thích của anime đến với nhiều người hơn, nhóm đã tiến hành thực hiện phần cài đặt của dự án, sử dụng một bộ công nghệ đại gồm ReactJS, NextJS, Firebase, TailwindCSS, SCSS, Typescript để tạo ra một ứng dụng web mạnh mẽ và hiệu quả, đáp ứng đầy đủ các yêu cầu cần thiết của một mạng xã hội chia sẻ anime.

Phân tích và đặc tả yêu cầu

Tìm hiểu về các hệ thống Anime và mạng xã hội khác: tìm hiểu về mô hình tổ chức của các mạng xã hội khác đã từng làm về Anime như MyAnimeList hay AniList để tìm ra ưu điểm, nhược điểm hay những gì người dùng ở các trang web này yêu cầu cũng như mong muốn. Dựa trên các phương pháp thu cập yêu cầu đã áp dụng, nhóm phát triển đã rút ra được yêu cầu chính của hệ thống từ yêu cầu chức năng, phi chức năng hay yêu cầu miền như đã viết ở phần trên. Tiền điều kiện Người dùng có tài khoản email, username không trùng với tài khoản sẵn có và phải truy cập vào trang đăng ký tài khoản trên hệ thống.

Tiền điều kiện Người dùng có tài khoản, mật khẩu hợp lệ và phải truy cập vào trang đăng nhập tài khoản trên hệ thống. Việc tạo một bài viết bao gồm nhập nội dung bài viết, chọn những thông tin liên quan đến bộ Anime đang xem (tiến trình xem, số tập, tên Anime, số điểm), thêm hình ảnh, video và tag. Khi người dùng muốn gửi tin nhắn cho một người dùng khác, họ có thể sử dụng tính năng chat để tương tác với nhau trên nền tảng website.

Người dùng truy cập vào chức năng chat bằng cách bấm biểu tượng trên thanh header, hệ thống sau đó sẽ hiển thị ra danh sách các cuộc trò chuyện. Người dùng muốn liên kết tài khoản MyAnimeList của mình với hệ thống hiện tại để dễ dàng quản lý danh sách các bộ Anime cũng như cập nhật 1 cách nhanh chóng và đồng bộ cơ sở dữ liệu Anime của 2 bên. Tiền điều kiện Người dùng đã đăng nhập vào hệ thống bằng tài khoản , chưa kết nối tài khoản với MyAnimeList và có tài khoản MyAnimeList Luồng sự kiện chính 1.

Hệ thống điều hướng người dùng về trang chủ và có thể xem các thống kê về Anime, lịch sử xem của người dùng đồng bộ với bên MyAnimeList ở trang cá nhân. Tiền điều kiện Người dùng đã tương tác với các bài viết trong trang chủ một thời gian, qua “Reaction” hoặc không “Reaction”, anime chưa có trong danh sách của người dùng. ● Bước 1: Người dùng ở trang chủ click vào form đăng bài viết ở trên cùng, hệ thống sau đó sẽ hiển thị giao diện đăng bài.

Sau đó, chúng tôi đã phân tích và đặc tả các ca sử dụng theo chức năng, bao gồm các ca sử dụng quan trọng như Đăng ký tài khoản, Đăng nhập tài khoản, Tạo bài viết, Xem bài viết, Tương tác với bài viết,.

Phân tích thiết kế và xây dựng hệ thống

Với những yêu cầu để sử dụng được API từ 1 dịch vụ thứ 3 như MyAnimeList là phải có 1 hệ thống tương tác trực tiếp với API từ MyAnimeList (BackEnd) và từ dữ liệu BackEnd đó nhận được sẽ trả lại dữ liệu Anime tương ứng cho FrontEnd, nên nhóm đã phát triển các API endpoint dựa trên tính năng API route của framework NextJS như liệt kê và bảng sau đây. /api/auth: thực hiện lấy token từ bên MyAnimeList nhằm kết nối tài khoản người dùng với MyAnimeList và lưu token vào Firebase cho các tác vụ liên quan. /api/user_anime_list/[user_name]: trả về thông tin công khai của người dùng bên MyAnimeList theo username của họ như lịch sử xem, nhân vật yêu thích, thông tin cá nhân, ….

/api/updatestatus/[anime_id]: cập nhật trạng thái xem của người dùng theo các thông tin đã cung cấp sang bên database của người dùng bên MyAnimeList. API này được sử dụng để lấy AccessToken từ MyAnimeList và thực hiện liên kết tài khoản của người dùng với MyAnimeList codeChallenge: mã xác. API này được sử dụng để cập nhật trạng thái 1 bộ Anime của người dùng sang hệ thống database của MyAnimeList với các thông tin như số tập, trạng thái xem, số điểm,.

Thông tin về người dùng, bài viết, bình luận, thông báo, trò chuyện, danh sách anime… được chia thành các document, với comments là subcollection của posts. - Đăng nhập bằng tài khoản google: người dùng sẽ được điều hướng đến trang đăng nhập bằng tài khoản google có sẵn của họ mà không cần đăng ký tài khoản trước. - Left Sidebar: hiển thị những bộ Anime recommend cho người dùng dựa trên tương tác với các bài post và các bộ Anime họ đã xem.

- Xem nội dung bài đăng như văn bản, hình ảnh, video cho đến các thông tin về tiến trình xem Anime của người đăng (tên bộ Anime, số tập, số điểm,..). Trang cá nhân là một trong những trang quan trọng nhất trên trang web, cho phép người dùng tạo hồ sơ cá nhân của riêng mình để chia sẻ thông tin của bản thân, các hoạt động xem Anime của bản thân cũng như người khác. - Headers: hiển thị các thông tin của người dùng từ ảnh đại diện, tên, hình nền và 1 số nút hiển thị form thay đổi thông tin cá nhân và connect tài khoản người dùng với MyAnimeList.

Chương này đã trình bày phân tích thiết kế và xây dựng hệ thống của dự án, trong đó bao gồm sơ đồ kiến trúc Monolithic, các biểu đồ tuần tự cho tính năng đăng nhập, tạo bài viết và liên kết với ứng dụng MyAnimeList, thiết kế chi tiết API, cơ sở dữ liệu và giao diện người dùng.

Cài đặt và kiểm thử