Công cụ tương tác để tìm hiểu về sự tương thích giữa những nhóm máu cơ bản với nhau; chỉ nhằm cho mục đích giáo dục.
Trang web này ban đầu được tạo ra theo yêu cầu của mẹ tôi. Bởi vì đây là một dự án sở thích cá nhân, về mặt chức năng thì nó khá đơn giản. Tuy nhiên, việc tự thiết kế nên toàn bộ trang web này đã mang lại cho tôi nhiều kinh nghiệm học hỏi quý giá.
Mặc dù việc sử dụng các framework phổ biến như React, Vue hoặc Svelt để xây dựng trang web này là hoàn toàn khả thi, hoặc thậm chí còn được khuyến khích, tôi đã quyết định ưu tiên sự đơn giản và dễ tiếp cận lên hàng đầu cho dự án này.
HTML, CSS và JavaScript cơ bản: Bộ ba huyền thoại này hình thành nên nền tảng cho giao diện người dùng và các tính năng tương tác của trang web, đảm bảo khả năng tương thích trên nhiều thiết bị và trình duyệt khác nhau. Với quy mô tương đối nhỏ của dự án, bộ công nghệ này đáp ứng yêu cầu giáo dục của dự án một cách hiệu quả.
Vì trang web này hoạt động gần giống như một trang web tĩnh (static website), nên ta không cần sử dụng phần mềm quá phức tạp cho bên máy chủ. Bởi thế, tôi đã quyết định thiết lập một máy chủ đơn giản sử dụng những công nghệ sau:
-
Node.js: Môi trường runtime JavaScript phổ biến này xử lý hiệu quả các hoạt động phía máy chủ.
-
Express: Framework tối giản này giúp cho việc xây dựng máy chủ Node.js có tổ chức hơn, đảm bảo về mặt hiệu năng và khả năng mở rộng tính năng của trang web.
-
Compression: Thư viện này tối ưu hóa việc truyền tải dữ liệu, giảm thiểu thời gian tải (load) trang web và giúp người dùng có một trải nghiệm mượt mà hơn.
Chạy Công Cụ Kiểm Tra Các Nhóm Máu Tương Thích Trong Truyền Máu Ở Người từ mã nguồn là một công đoạn tương đối khá đơn giản bởi vì không có bước biên dịch mã nguồn nào.
Để chạy trang web từ mã nguồn, trước tiên hãy đảm bảo rằng bạn đã tải xuống và cài đặt những thư viện (dependencies) sau trên máy tính của bạn:
node
>=20.10.0
compression
>=1.7.4
express
>=4.18.2
express-rate-limit
>=7.1.5
Để bắt đầu trên Linux, trước tiên hãy cài đặt Node.js bằng trình quản lý gói (package manager) của bạn. Lưu ý rằng tên gói cụ thể có thể khác nhau trên từng distro Linux một.
Fedora
dnf install nodejs
Debian
apt install nodejs
Arch:
pacman -S nodejs-lts-iron
Tiếp theo, sao chép kho lưu trữ mã nguồn (repo) trên GitHub vào hệ thống của bạn.
git clone https://github.com/QingTian1927/Quynhbio-s-Interactive-Blood-Compatibility-Checker
Sau đó, sử dụng lệnh cd
để di chuyển đến thư mục đã sao chép thành công và cài đặt các phần mềm phụ thuộc (dependencies) trên npm
.
npm install
Nếu npm
thiết lập môi trường Node.js thành công, bạn chỉ cần khởi chạy máy chủ bằng lệnh sau:
node server.js
Nếu mọi thứ diễn ra suôn sẻ, bạn sẽ thấy thông báo sau:
[INIT] [2024-02-16T04:32:12.318Z] Blood Compatibility listening on port {<PORT NUMBER>}
trong đó <PORT NUMBER
có thể là bất kỳ số nào, chẳng hạn như 4242
hoặc 10000
.
Cuối cùng, mở trình duyệt web của bạn và nhập thông tin sau vào thanh địa chỉ.
localhost:<PORT NUMBER>
Nếu bạn nhập đúng <PORT NUMBER>
, bạn sẽ thấy trang chủ của trang web xuất hiện.
Để trộn hai nhóm máu với nhau, ta trước hết phải chọn nhóm máu của người cho bằng cách ấn vào 1 trong 4 biểu tượng túi máu tượng trưng cho một nhóm máu của người cho.
Ví dụ như để chọn nhóm máu người cho là nhóm máu A, ta sẽ di chuyển con trỏ chuột ra chỗ biểu tượng túi máu nhóm A. Khi chưa chọn nhóm máu nào, hình con trỏ chuột, khi đưa vào gần một túi máu nào đó, sẽ hiện hình một ống tiêm trống không như sau:
Khi ấn vào biểu tượng một túi máu nào đó, con trỏ chuột sẽ hiện hình một ống tiêm nửa đầy như sau:
Khi đã chọn xong một nhóm máu, nhóm máu đang được chọn sẽ được hiển thị trong một biểu tượng hình tròn bên cạnh nút truy cập trang thông tin (?) ở đầu trang web như sau:
Để trộn hai nhóm máu với nhau, ta chỉ cần ấn vào 1 trong 4 biểu tượng tượng trưng cho một nhóm máu của người nhận.
Giả dụ như ta muốn trộn nhóm máu A của người cho với nhóm máu O của người nhận, ta sẽ trước hết di chuyển con trỏ chuột tới biểu tượng nhóm máu O của người nhận. Khi đã chọn một nhóm máu người cho như ở trên bước 1, con trỏ chuột sẽ hiện hình một ống tiêm nửa đầy như sau:
Khi ấn vào biểu tượng nhóm máu của người nhận, ta hiểu là ta đang trộn nhóm máu của người cho với nhóm máu của người nhận. Trong trường hợp này, bởi vì ta đang trộn nhóm máu A với nhóm máu O, nhóm máu O sẽ bị kết dính và sẽ hiển thị hình như sau:
Khi nhóm máu người nhận kết dính sau khi trộn với nhóm máu của người cho, con trỏ chuột sẽ hiện hình một ống tiêm nửa đầy với hình tròn đỏ gạch chéo ở bên dưới (tham khảo Hình 2.2). Điều này có nghĩa là ta không thể trộn một nhóm máu đã bị kết dính với một nhóm máu nữa.
Ở trong ví dụ ở bước 2, để trộn nhóm máu O của người nhận với một nhóm máu khác của người cho, ta sẽ phải khôi phục trạng thái ban đầu của công cụ bằng cách ấn nút Reset ở cuối trang.
Khi ấn xong, công cụ sẽ được đưa lại về trạng thái ban đầu như khi mới mở trang web.
Ngoài việc sử dụng những thư viện bên thứ ba trong mã nguồn, trang web còn sử dụng một số tài nguyên từ các bên thứ ba cho phần thiết kế giao diện của trang web. Những tài nguyên đó sẽ được liệt kê trong danh sách sau đây:
-
Biểu tượng ống tiêm con trỏ được chỉnh sửa từ file đồ họa Green syringe element vector của rawpixel.com trên trang Freepik
-
Bảng màu của trang web tham khảo từ bảng màu Palette ở trang GNOME Human Interface Guidelines