Chương 3 : Hệ thống gợi ý tin tức tiếng Việt xenoNews
3.3 Thiết kế và cài đặt chi tiết các thành phần hệ thống
3.3.5.1 Cơng nghệ Web được sử dụng để xây dựng Front-end
Giao diện người dùng nền Web được xây dựng theo kiến trúc Client-based, với tồn bộ mã lập trình sử dụng Javascript. Kiến trúc này đã tạo nên các ứng dụng Web (Web
Application) hiện đại, như Twitter, Facebook, Gmail, Youtube. Ưu điểm rõ ràng, mà
những ai đã từng dùng một trong các ứng dụng kể trên đĩ chính là: nhanh, và rất nhiều chức năng cĩ thể được sử dụng ngay, khơng cần tải lại tồn bộ trang như các website truyền thống. Khả năng đĩ cĩ được là do: phần lớn (hoặc tồn bộ) mã nguồn web nằm trên máy tính của người sử dụng, và Server chỉ đĩng vai trị cung cấp các files cài đặt ban đầu và dữ liệu; cịn việc giao diện được hiển thị như thế nào, hồn tồn do Client (cụ thể ở đây là trình duyệt web người dùng sử dụng: Chrome, Safari, Firefox, …) tính tốn. Bởi vậy, website xây dựng dựa trên kiến trúc này được gọi là ứng dụng Web, do chúng hoạt động y như một phần mềm cài đặt trên máy của người sử dụng.
Minh hoạ 3.5: Kiến trúc Web theo kiểu Server-based
Minh hoạ 3.5 thể hiện kiến trúc Website truyền thống, trong đĩ phía client chủ yếu
là Dumb Terminal – khơng tính tốn gì, hoặc Thin Client – tính tốn nhưng ít. Tồn bộ
nội dung trang web cần hiển thị mỗi khi người dùng yêu cầu đều do Web Server (xây dựng sử dụng các ngơn ngữ PHP, ASP.NET, JSP, Ruby, Python, …), tương tác với CSDL rồi kết xuất tồn bộ kết quả ra mã HTML hồn chỉnh, trả lại cho trình duyệt web hiển thị.
Trong khi đĩ, ứng dụng web để duyệt tin trong hệ thống xenoNews sử dụng kiến trúc mơ tả trong Minh hoạ 3.6. Đầu tiên, khi truy cập vào địa chỉ của ứng dụng, trình duyệt web gửi yêu cầu lấy các file mã nguồn của chương trình (bao gồm file HTML, các file javascript, css) từ server. Sau đĩ, với các yêu cầu về dữ liệu (lấy dữ liệu, thêm, xố, sửa, cập nhật, …), client, server (cụ thể là Web Services, cũng là Middle-level trong hệ thống xenoNews) giao tiếp với nhau thơng qua các yêu cầu AJAX, định dạng dữ liệu JSON. Khi đã cĩ dữ liệu, dựa trên mã nguồn đã cĩ được, trình duyệt web sẽ chỉnh sửa Mơ
hình hồ sơ tài liệu (Document Object Model - DOM), kết xuất nên giao diện trang web
Minh hoạ 3.6: Kiến trúc Web theo kiểu Client-based
Kiến trúc này phù hợp cho hệ thống gợi ý tin tức xenoNews tơi đang trình bày, nhờ các tính chất sau:
- Giảm tải cho Web Server: Server khơng phải kết xuất mã HTML từng yêu cầu của người dùng.
- Nâng cao trải nghiệm người dùng (User experiences):
o Các tương tác cĩ độ trễ thấp: dữ liệu cần trao đổi dưới dạng JSON thường nhỏ, quá trình gửi - nhận sẽ nhanh hơn so với hướng tiếp cận Server-based; đồng thời các máy tính cá nhân hiện nay đều cĩ năng lực tính tốn tốt, dễ dàng đáp ứng yêu cầu kết xuất và quản lý giao diện.
o Theo dõi tốt tương tác người dùng: các phản hồi của người dùng được cập nhật về CSDL theo thời gian thực. Từ đĩ, người dung cĩ thể nhanh chĩng
chỉnh sửa nếu cần thiết. Ví dụ như chức năng “Undo”, “Redo”, tương tự các phần mềm cài đặt trên máy tính.
o Hiệu ứng chuyển đổi (transition effect) và Hoạt hình (animations): tạo hiệu ứng thị giác khi di chuyển giữa các phần, hay thực hiện nhiều thao tác khác nhau. Các hiệu ứng thị giác này cũng đĩng gĩp phần rất quan trọng khiến cho người dùng cĩ cảm giác website hoạt động nhanh, từ đĩ cũng tạo sự thích thú và tăng hiệu quả đọc tin.
Để hiện thực hố việc cài đặt kiến trúc này, tơi đã sử dụng một số thư viện Javascript và CSS chính như: BackboneJS, MarionetteJS, RequireJS, Underscore, Jquery, Twitter Bootstrap, …