TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI Khoa Công nghệ thông tin
ĐỀ CƯƠNG NGHIÊN CỨU
ĐỀ TÀI NGHIÊN CỨU KHOA HỌC CỦA SINH VIÊN NĂM HỌC 2023 – 2024
NGHIÊN CỨU REALTIME WEB APP ỨNG DỤNG VÀO VIỆC XÂY DỰNG 1 HỆ QUẢN TRỊ NỘI DUNG CMS
Giảng viên hướng dẫn:ThS. Lê Hữu Dũng – Khoa Công nghệ thông tin Sinh viên thực hiện
Chu Quỳnh Anh Lớp: 2110A04 Khoa: Công nghệ thông tin Nguyễn Tất Đạt Lớp: 2110A02 Khoa: Công nghệ thông tin Nguyễn Ngọc Tân Lớp: 2110A04 Khoa: Công nghệ thông tin
Hà Nội - 2023
MỤC LỤC
DANH MỤC CHỮ VIẾT TẮT 3
DANH MỤC CÁC HÌNH ẢNH 4
PHẦN MỞ ĐẦU 5
1. Lý do chọn đề tài...5
2. Mục tiêu nghiên cứu... 6
3. Đối tượng nghiên cứu... 6
4. Phạm vi nghiên cứu... 6
5. Phương pháp nghiên cứu... 7
PHẦN NỘI DUNG 8 Chương 1: CƠ SỞ LÝ THUYẾT CỦA CÁC VẤN ĐỀ TRONG ĐỀ TÀI NGHIÊN CỨU... 8
1.1. Tìm hiểu về Web application... 8
1.2. Tìm hiểu về công nghệ Realtime và Realtime Web App...14
1.3. Tìm hiểu CMS (Content Management System)... 18
1.4. Tìm hiểu về các công nghệ lập trình ứng dụng vào bài toán của đề tài nghiên cứu: HTML, CSS, JS, C#, ASP.NET CORE, SignalR... 21
Chương 2: GIAO DIỆN CMS WEB APP... 29
KẾT LUẬN 32
DANH MỤC TÀI LIỆU THAM KHẢO 33
DANH MỤC CHỮ VIẾT TẮT
Chữ viết tắt Ý nghĩa
1. Tiếng Việt
CNTT Công nghệ thông tin
NCKH Nghiên cứu khoa học
LTW Lập trình Web
2. Tiếng Anh
CMS Content Management System (Hệ quản trị
nội dung)
DANH MỤC CÁC HÌNH ẢNH
Hình 1: Giao diện dashboard của WordPress - một CMS phổ biến hiện nay 19 Hình 2: Giao diện tải lên và quản lý đa phương tiện trên CMS 19
Hình 3: Một số CMS phổ biến hiện nay 21
Hình 4: Giao diện trang chủ 29
Hình 5: Giao diện trang con 29
Hình 6:Giao diện đăng ký 30
Hình 7: Giao diện đăng nhập 30
Hình 8: Giao diện đăng bài tin tức 31
Hình 9: Giao diện quản lý bài đăng (CMS) 31
PHẦN MỞ ĐẦU
1. Lý do chọn đề tài
Realtime hay còn gọi là hệ thống thời gian thực, là công nghệ cho phép người dùng có thể nhận hoặc truyền thông tin trong 1 khoảng thời gian cực ngắn với tốc độ gần như ngay lập tức.
Công nghệ Real - time đã xuất hiện như một phần quan trọng trong nhiều khía cạnh cuộc sống hàng ngày của chúng ta. Từ việc trò chuyện qua những mẩu tin nhắn, việc nhận được những thông báo quan trọng về lịch trình công việc, việc kiểm tra thời gian bắt đầu của một chuyến bay, hay việc theo dõi hành trình của một shipper qua ứng dụng đặt đồ ăn online,… Ứng dụng của hệ thống thời gian thực đang hiện hữu xung quanh ta một cách hết sức tự nhiên như một nhu cầu thiết yếu đi cùng với sự phát triển không ngừng của công nghệ thông tin.
Nhìn một cách khái quát, công nghệ Realtime mang tới một vài lợi ích chính yếu như sau:
- Sự cam kết:Các ứng dụng thời gian thực cung cấp tính năng nhanh chóng, tức thời mà các ứng dụng truyền thống phi thời gian thực không làm được. Qua đó mà người dùng có những trải nghiệm tốt hơn trên ứng dụng.
- Giao tiếp: Việc cho phép giao tiếp hai chiều hiệu quả hơn so với hình thức giao tiếp 1 chiều điển hình của các ứng dụng phi thời gian thực. Điều này giúp cải thiện sự hợp tác và giao tiếp giữa các bên liên quan.
- Thời gian: Ứng dụng Realtime có phản hồi đầu vào của người dùng nhanh hơn so với các ứng dụng truyền thống, từ đó cho phép các chương trình thời gian thực đáp ứng nhu cầu của người dùng nhanh và hiệu quả hơn.
- Quy trình làm việc: Cung cấp quy trình làm việc hợp lý hơn vì các tác vụ được lên lịch và hoàn thành phối hợp với dữ liệu thời gian thực và có thể tăng hiệu quả, năng suất làm việc của người dùng.
Tóm lại, có thể thấy được việc áp dụng tính năng Realtime đã giúp cải tiến vượt bậc trải nghiệm người dùng và đồng thời, tính năng ấy đã và đang trở nên ngày một không thể thiếu đối với nhiều những ứng dụng công nghệ ngày nay.
Nhận thức được điều đó, nhóm đã quyết định tiến hành nghiên cứu về Realtime web app hay ứng dụng web thời gian thực và tìm hiểu cách xây dựng một Realtime web app tích hợp với hệ quản trị nội dung CMS (Content Management System).
2. Mục tiêu nghiên cứu
- Việc nghiên cứu sẽ tập trung vào các vấn đề sau:
+ Nghiên cứu về công nghệ Realtime.
+ Tìm hiểu về hệ quản trị nội dung CMS (Content Management System).
+ Tìm hiểu về các công nghệ lập trình ứng dụng vào bài toán của đề tài nghiên cứu: HTML, CSS, JS, C#, ASP.NET CORE, SignalR
+ Ứng dụng công nghệ Realtime vào xây dựng CMS Web App.
3. Đối tượng nghiên cứu
- Ứng dụng công nghệ Realtime vào xây dựng CMS Web App 4. Phạm vi nghiên cứu
- Phạm vi không gian: Việc nghiên cứu tập trung hướng đến xây dựng một web app cho phép người dùng giao tiếp với nhau theo thời gian thực, đăng tải và chỉnh sửa nội dung bài viết của mình theo nhu cầu.
- Phạm vi thời gian: Đề tài nghiên cứu khoa học sinh viên dự kiến sẽ được thực hiện trong thời gian từ 5/8/2023 đến 1/4/2024.
5. Phương pháp nghiên cứu
Đề tài được dự kiến sử dụng các phương pháp sau:
- Phương pháp nghiên cứu tổng hợp, thu thập thông tin:
+ Các kiến thức, thông tin của bài nghiên cứu được chắt lọc, tổng hợp từ các bài báo, bài nghiên cứu trên các trang tạp chí, và những nguồn thông tin uy tín.
- Phương pháp thực nghiệm:
+ Nghiên cứu các nguồn tài liệu liên quan
+ Phân tích và thiết kế demo cho giao diện web app
+ Vận dụng các kết quả nghiên cứu lý thuyết, tiến hành khảo sát về xu hướng người dùng các thiết bị như thế nào nhằm xác định độ ưu tiên của các chức năng khi xây dựng realtime web app.
- Phương pháp hỏi ý kiến chuyên gia:
+ Tham khảo, thu thập ý kiến, đề xuất, hướng dẫn từ thầy cô, anh chị, những người có kinh nghiệm, chuyên môn liên quan tới đề tài nghiên cứu.
PHẦN NỘI DUNG
Chương 1: CƠ SỞ LÝ THUYẾT CỦA CÁC VẤN ĐỀ TRONG ĐỀ TÀI NGHIÊN CỨU
1.1. Tìm hiểu về Web application 1.1.1. Web application là gì?
Ứng dụng web (ứng dụng web) là một chương trình ứng dụng được lưu trữ trên máy chủ từ xa và được phân phối qua internet thông qua giao diện trình duyệt. Theo định nghĩa, các dịch vụ web là các ứng dụng web và nhiều trang web, mặc dù không phải tất cả, đều chứa các ứng dụng web.
Các nhà phát triển thiết kế các ứng dụng web cho nhiều mục đích sử dụng và người dùng khác nhau, từ một tổ chức đến một cá nhân vì nhiều lý do. Các ứng dụng web thường được sử dụng có thể bao gồm webmail, máy tính trực tuyến hoặc cửa hàng thương mại điện tử. Mặc dù người dùng chỉ có thể truy cập một số ứng dụng web bằng một trình duyệt cụ thể nhưng hầu hết đều khả dụng bất kể trình duyệt nào.
Cách thức hoạt động của web app
- Các ứng dụng web không cần phải tải xuống vì chúng được truy cập qua mạng.
Người dùng có thể truy cập ứng dụng web thông qua trình duyệt web, chẳng hạn như Google Chrome, Mozilla Firefox hoặc Safari.
- Để một ứng dụng web hoạt động, nó cần có máy chủ web, máy chủ ứng dụng và cơ sở dữ liệu. Máy chủ web quản lý các yêu cầu đến từ máy khách, trong khi máy chủ ứng dụng hoàn thành nhiệm vụ được yêu cầu. Cơ sở dữ liệu lưu trữ mọi thông tin cần thiết.
- Các ứng dụng web thường có chu kỳ phát triển ngắn và nhóm phát triển nhỏ.
Các nhà phát triển viết hầu hết các ứng dụng web bằng JavaScript, HTML5 hoặc CSS. Lập trình phía máy khách thường sử dụng các ngôn ngữ này để giúp xây
dựng giao diện người dùng của ứng dụng. Lập trình phía máy chủ tạo ra các tập lệnh mà ứng dụng web sẽ sử dụng. Các ngôn ngữ như Python, Java và Ruby thường được sử dụng trong lập trình phía máy chủ.
1.1.2. Sự khác biệt Web app, Native app và Hybrid app
Trong lĩnh vực điện toán di động, Web app đôi khi tương phản với Native app, là những ứng dụng mà nhà phát triển xây dựng riêng cho một nền tảng hoặc thiết bị cụ thể và cài đặt trên thiết bị đó. Các Native app thường có thể sử dụng phần cứng dành riêng cho thiết bị, chẳng hạn như GPS hoặc máy ảnh trên ứng dụng gốc dành cho thiết bị di động.
Các chương trình kết hợp cả hai phương pháp này đôi khi được gọi là Hybrid app.
Hybrid app hoạt động tương tự như Web app nhưng cài đặt vào thiết bị như Native app. Hybrid app cũng có thể tận dụng các tài nguyên dành riêng cho thiết bị bằng cách sử dụng API nội bộ. Các Native app đã tải xuống đôi khi có thể hoạt động ngoại tuyến; tuy nhiên, Hybrid app không có chức năng này. Hybrid app thường sẽ chia sẻ các thành phần điều hướng tương tự với Web app vì chúng chủ yếu dựa trên Web app.
1.1.3. Sự khác biệt giữa Website và Web Application
Người dùng cuối thường sẽ không phân biệt được những điểm giống và khác nhau của website và web application. Họ chỉ việc nhập URL và sử dụng kết quả tìm kiếm là được. Nhưng với các dev, bạn chính là người build nên các nền tảng này cho người dùng sử dụng. Do đó việc nắm bắt được sự khác nhau này chắc chắn sẽ giúp ích rất nhiều cho công việc.
1.1.3.1. Website là gì?
- Website là một tập hợp các trang web có liên quan chứa hình ảnh, văn bản, âm thanh, video và hơn thế nữa. Nó có thể bao gồm một trang hoặc nhiều trang và nó
cung cấp cả nội dung trực quan và văn bản. Có rất nhiều loại website khác nhau hiện tại trang web giáo dục, cộng đồng, tìm kiếm, viết blog,…
- Một số website phổ biến như Wikipedia, Google, Amazon và Craigslist.
- Đặc điểm của một Website + Thân thiện với người dùng
+ Có thể dễ dàng tìm kiếm bằng công cụ tìm kiếm + Hiển thị nội dung chất lượng
+ Có một bố cục dễ điều hướng - Khi nào bạn cần dùng đến website?
+ Bạn có thể cần một trang web để giới thiệu sản phẩm của mình + Trang web giúp bạn thiết lập thương hiệu cho doanh nghiệp
+ Giúp tạo ra bằng chứng xã hội để người khác có thể thấy những gì bạn đã và đang làm
+ Sử dụng nó để quảng cáo và nâng cao nhận thức về thương hiệu của mình 1.1.3.2. Web Application là gì?
- Web Application là một phần của phần mềm có thể được truy cập bởi trình duyệt.
Nói cách khác, Web Application là website có chức năng và các yếu tố tương tác.
- Các Web Application có khả năng tùy biến cực cao và có thể thực hiện nhiều tác vụ và chức năng khác nhau. Chúng thường phức tạp hơn và khó xây dựng hơn, đồng thời chúng cần một đội ngũ phát triển phần mềm có kinh nghiệm để tạo ra chúng.
- Một số Web Application phổ biến hiện nay như Twitter, Facebook, Gmail, Adobe CC và Youtube.
- Đặc điểm của Web Application + Đa nền tảng
+ Dễ dàng test với các bài kiểm tra automated + Được lưu trữ trên đám mây
- Bạn sử dụng Web Application để làm gì?
+ Có thể sử dụng trên mọi nền tảng vì chúng hỗ trợ tất cả các trình duyệt hiện đại
+ Bạn không cần phê duyệt từ cửa hàng ứng dụng để có một web app + Người dùng có thể truy cập chúng bất kỳ lúc nào, từ bất kỳ đâu
+ Có thể sử dụng trên cả thiết bị di động hoặc máy tính để bàn để truy cập dữ liệu
+ Dễ hiểu hơn vì sử dụng cùng một bộ mã trong toàn bộ ứng dụng 1.1.3.3. Sự khác biệt chính giữa Website và Web Application
- Sự tương tác của người dùng
+ Website cung cấp nội dung văn bản và hình ảnh mà người dùng có thể xem và đọc, những điều này không ảnh hưởng đến hoạt động của trang web.
+ Với Web Application, người dùng không chỉ xem nội dung trên trang mà còn thao tác dữ liệu. Người dùng có thể tương tác từng người một bằng cách điền vào biểu mẫu hoặc cung cấp dữ liệu cần thiết để tương tác với ứng dụng.
- Vấn đề xác thực
+ Xác thực không phải lúc nào cũng cần thiết cho các website dựa trên thông tin. Người dùng có thể được yêu cầu đăng ký nhận các bản cập nhật thường xuyên để truy cập các tùy chọn bổ sung, và thế là xong.
+ Các web app cần xác thực vì chúng cung cấp phạm vi tùy chọn và chức năng/tương tác rộng hơn nhiều so với một trang web. Điều này có nghĩa là bạn phải có tên người dùng và mật khẩu để truy cập vào tài khoản của mình.
- Tasks và sự linh hoạt
+ Một website sẽ chỉ hiển thị dữ liệu và thông tin được thu thập trên một trang cụ thể khi người dùng đã tìm kiếm.
+ Trong một web app, các chức năng cao hơn và phức tạp hơn so với các chức năng của một trang web.
- Mục đích sáng tạo
+ Một website chủ yếu bao gồm nội dung tĩnh. Điều này có nghĩa là thông tin có thể truy cập công khai cho tất cả khách truy cập.
+ Web app được thiết kế để tương tác với người dùng cuối. Điều này có nghĩa là nếu không có thông tin đăng nhập bắt buộc, bạn có thể không truy cập được vào bất kỳ dữ liệu nào.
- Deployment
+ Khi xử lý một website, những thay đổi nhỏ không bao giờ yêu cầu biên dịch lại và triển khai đầy đủ. Bạn chỉ cần cập nhật mã HTML và mọi thứ sẽ được cập nhật.
+ Trong khi với web app, bạn cần phải biên dịch lại và triển khai lại ứng dụng bất cứ khi nào bạn thực hiện thay đổi.
+ Phát triển một website là một quá trình tương đối đơn giản. Nhưng việc tạo một web app đòi hỏi kiến thức sâu hơn, nhiều kinh nghiệm hơn và lập kế hoạch nhiều hơn. Do đó, nắm rõ sự khác biệt của chúng giúp bạn hiểu rõ mình cần làm gì và phát triển như thế nào.
1.1.4. Ưu nhược điểm của Web Application - Ưu điểm của Web Application:
+ Web Application không giới hạn cho một nền tảng cụ thể. Chúng có thể được xây dựng cho tất cả các nền tảng miễn là chúng có thể chạy trong trình duyệt web, dễ dàng tương thích ứng với iOS, Android hoặc Windows
+ Web Application không yêu cầu nhiều thời gian hoặc nhân lực để xây dựng, không cần thử nghiệm trong mỗi hệ điều hành khác nhau, do đó nó có chi phí đầu tư thấp hơn nhiều so với các loại phát triển ứng dụng khác.
+ Web Application sử dụng các ngôn ngữ mã hóa phổ biến trên nhiều nền tảng, do đó việc xây dựng và bảo trì tương đối dễ dàng
+ Cập nhật tự động, người dùng luôn thấy phiên bản cập nhật nhất khi họ mở ứng dụng web.
- Nhược điểm của Web Application:
+ Web Application phải được truy cập thông qua trình duyệt web; do đó, nếu không có kết nối internet, người dùng sẽ không thể truy cập bất kỳ ứng dụng web nào.
+ Ứng dụng web có ít chức năng hơn các loại ứng dụng khác, chúng không có quyền truy cập vào các tính năng và phần cứng của thiết bị.
+ Các Web App có UX kém, nên việc cung cấp trải nghiệm liền mạch cho người dùng trở nên khó khăn hơn.
+ Web Application được liên kết trực tiếp với trình duyệt web. Điều đó có nghĩa là, nếu trang web xảy ra lỗi thì rất có thể ứng dụng cũng sẽ bị lỗi.
+ Web App thiếu tính năng của hệ thống kiểm soát chất lượng. Do đó, tính an toàn và bảo mật đều không cao.
1.2. Tìm hiểu về công nghệ Realtime và Realtime Web App
- Realtime Web App (ứng dụng web thời gian thực) cung cấp trải nghiệm web nâng cao và ngày càng trở nên phổ biến hơn. Người dùng đánh giá cao khi họ có thể chỉ cần mở trang và trình duyệt được cập nhật bất cứ khi nào nội dung trên máy chủ thay đổi. Thông thường công việc này là mô hình giao tiếp dựa trên HTTP: trao đổi client - server đồng bộ, trong đó máy khách luôn khởi tạo yêu cầu và máy chủ luôn phản hồi yêu cầu đó.
- Tuy nhiên một số ứng dụng yêu cầu tính năng máy chủ có thể bắt đầu cuộc trò chuyện với khách hàng trước tiên. Một số ví dụ như khi gửi giá cổ phiếu cập nhật hoặc gửi tin nhắn cho các thành viên của một room chat trên web. Nói chung, bất cứ khi nào muốn gửi một thay đổi trạng thái từ máy chủ đến các máy khách được kết nối thì sẽ cần một thứ gì đó để cho phép máy chủ bắt đầu liên lạc.
- Trong các ứng dụng truyền thống, điều này là không thể. Để xem bản cập nhật, người dùng phải làm mới trang. Để mô phỏng các cập nhật theo thời gian thực theo cách tiếp cận truyền thống, chúng tôi phải sử dụng các giải pháp thay thế, chẳng hạn như AJAX Polling hoặc Long Polling.
1.2.1. AJAX Polling
- Cách triển khai điển hình nhất của ứng dụng web thời gian thực với cách tiếp cận truyền thống là AJAX Polling. Ở đây chúng tôi sử dụng JavaScript trên máy khách để thăm dò máy chủ với tần suất được xác định trước. Mỗi khi yêu cầu cập nhật, máy khách sẽ gửi yêu cầu HTTP chính thức. Sau đó, máy chủ sẽ phản hồi bằng
phản hồi HTTP chứa dữ liệu đã cập nhật hoặc thông báo báo hiệu không có bản cập nhật nào.
- Mặc dù cách này hoạt động và có độ trễ cập nhật tỷ lệ nghịch với tần suất Polling, nhưng điều này khá lãng phí vì nó tạo ra chi phí đáng kể: bạn phải thiết lập kết nối TCP mới và có khả năng đàm phán các tham số bảo mật mới mỗi khi yêu cầu cập nhật. Và mặc dù có thể thực hiện một số cải tiến về hiệu suất nhưng chi phí phát sinh vẫn còn đáng kể. Hơn nữa, tải trên máy chủ tăng lên đáng kể: chỉ một nhóm 1000 khách hàng mỗi lần Polling cứ sau 5 giây sẽ tạo ra 12.000 yêu cầu/phút.
1.2.2. Long Polling
- Long Polling là một nỗ lực nhằm giảm chi phí AJAX Polling. Tại đây, sau khi máy khách gửi yêu cầu HTTP, máy chủ sẽ đợi cho đến khi có dữ liệu cập nhật. Chỉ sau đó nó mới trả về phản hồi HTTP chứa dữ liệu. Vì thời gian chờ đợi lâu hơn nên việc Long Polling còn được gọi là GET treo. Ngay sau khi nhận được phản hồi, client sẽ gửi một yêu cầu khác và việc chờ dữ liệu mới vẫn tiếp tục.
- Việc Long Polling không tạo ra phản hồi HTTP trống khi máy chủ không có bản cập nhật. Tuy nhiên, các yêu cầu HTTP chính thức vẫn được yêu cầu cho mỗi lần cập nhật. Tùy thuộc vào tần suất tạo bản cập nhật, điều này có thể giảm đáng kể tải trên máy chủ so với AJAX Polling.
1.2.3. WebSockets
- Ngày nay, WebSockets là giải pháp phù hợp cho các ứng dụng web thời gian thực.
Chúng cung cấp khả năng liên lạc nhanh, hai chiều giữa trình duyệt và máy chủ, khiến chúng trở nên lý tưởng cho các tình huống yêu cầu tốc độ, chẳng hạn như các trò chơi nhiều người chơi có nhịp độ nhanh. Tuy nhiên, ổ cắm web hoạt động khác với các yêu cầu và phản hồi HTTP truyền thống.
- Kết nối WebSocket bắt đầu bằng một yêu cầu HTTP cổ điển mà máy chủ phản hồi bằng phản hồi HTTP với mã 101 Chuyển đổi giao thức và một vài tiêu đề phản
hồi. Sau đó, kết nối sẽ chuyển sang giao thức nhị phân và hai chiều, trong đó một trong hai bên có thể gửi tin nhắn bất cứ lúc nào. Do đó, kết nối TCP cơ bản sẽ tồn tại lâu dài: nó vẫn hoạt động miễn là máy khách vẫn mở trang.
- Tuy nhiên, WebSockets không phải không có hạn chế. Thứ nhất, chúng không hoạt động trên HTTP mà hoạt động bên cạnh nó. Điều này có nghĩa là WebSockets không thể tận dụng một số tính năng HTTP nhất định, như nén và ghép kênh HTTP/2. Ngoài ra, WebSockets có thể gặp một số vấn đề khi triển khai khi sử dụng proxy và vì chúng hoạt động độc lập với kết nối HTTP nên một số vấn đề bảo mật nhất định, chẳng hạn như chính sách cùng nguồn gốc, cần phải được xử lý theo cách thủ công. Các nhà phát triển vẫn đang tìm cách cải thiện tình trạng này.
- Hơn nữa, vì giao thức WebSocket là nhị phân nên các nhà phát triển cần điều chỉnh nó cho phù hợp với trường hợp sử dụng của họ. Trong khi các thư viện ngày nay thực hiện hầu hết các công việc nặng nhọc liên quan đến mã hóa nhị phân, các nhà phát triển vẫn chịu trách nhiệm xác định các thông báo giao thức cấp ứng dụng.
Điều này cũng có nghĩa là trong số tất cả các phương pháp tiếp cận ứng dụng web thời gian thực, WebSockets cũng phức tạp nhất.
1.2.4. Server-Sent Events
- Server-Sent Events (SSE) nằm ở đâu đó giữa các phương pháp tiếp cận cổ điển và ổ cắm web: chúng có sự đơn giản của các phương pháp tiếp cận truyền thống trong khi cung cấp một số chức năng nhất định, nhưng không phải tất cả, của WebSockets.
- Với Sự kiện do máy chủ gửi, máy khách bắt đầu yêu cầu đến máy chủ, giống như trong giao thức HTTP truyền thống và máy chủ phản hồi bình thường, ngoại trừ việc giờ đây phần nội dung phản hồi không bao giờ kết thúc – nó là vô hạn. Máy chủ giữ kết nối TCP cơ bản mở (nó tồn tại lâu dài) và khi có bản cập nhật cần gửi, nó chỉ cần ghi chúng vào luồng phản hồi nơi chúng được khách hàng nhận ngay lập tức.
- Một lợi thế rõ ràng là giờ đây máy chủ có thể gửi các bản cập nhật ngay lập tức mà không cần yêu cầu rõ ràng của khách hàng. Tuy nhiên, so với các ổ cắm web, SSE là một chiều, nghĩa là chỉ máy chủ mới có thể gửi dữ liệu. (Tất nhiên, máy khách luôn có thể gửi dữ liệu đến máy chủ bằng yêu cầu HTTP truyền thống, nhưng điều đó phải xảy ra trên một kết nối TCP khác.) Hạn chế này có thể không phù hợp cho tất cả các ứng dụng.
- Điều đó có nghĩa là luồng dữ liệu trong nhiều ứng dụng thời gian thực là không đối xứng: hầu hết dữ liệu được gửi bởi máy chủ trong khi khách hàng chủ yếu chỉ thỉnh thoảng nghe và gửi. Ngay cả trong cài đặt phòng trò chuyện, hầu hết dữ liệu thường đến từ máy chủ: trong phòng trò chuyện có nhiều người dùng và phòng công cộng, phần lớn lưu lượng truy cập sẽ là tin nhắn được gửi từ máy chủ đến khách hàng. Nếu khối lượng dữ liệu đi từ máy chủ đến máy khách vượt quá đáng kể khối lượng theo hướng khác thì SSE vẫn có thể là một lựa chọn tốt.
1.2.5. So sánh giữa các công nghệ hỗ trợ giao tiếp giữa server-side và client-side.
- Mỗi công nghệ trong số bốn công nghệ đều có những lợi ích và hạn chế. Sự lựa chọn tốt nhất luôn phụ thuộc vào yêu cầu ứng dụng và ngăn xếp ứng dụng web cơ bản.
- AJAX Polling là đơn giản nhất và về cơ bản có thể được áp dụng cho bất kỳ ngăn xếp ứng dụng web nào. Một hạn chế rõ ràng là tính kém hiệu quả và lãng phí khi tần suất bỏ phiếu cao.
- Mặt khác, việc Long Polling sẽ hiệu quả hơn nhưng gây áp lực lớn hơn cho máy chủ về số lượng kết nối mở đồng thời; không phải là một chiến lược mà mọi máy chủ web đều đánh giá cao.
- WebSockets là mạnh mẽ và hiệu quả nhất nhưng cũng phức tạp nhất. Hơn nữa, chúng yêu cầu một ngăn xếp ứng dụng web hỗ trợ các kết nối lâu dài: khi giao thức
HTTP nâng cấp lên giao thức WebSocket, kết nối TCP cơ bản phải được giữ mở cho đến khi máy khách được kết nối.
- Các ngăn xếp ứng dụng web hoạt động đồng bộ với chiến lược một quy trình cho mỗi yêu cầu, điển hình trong cài đặt LAMP, sẽ cực kỳ kém hiệu quả khi số lượng máy khách trở nên lớn: nếu mỗi máy khách có quy trình riêng, máy chủ cuối cùng sẽ hết của các tiến trình có sẵn. Khung web không đồng bộ có thể xử lý đồng thời nhiều kết nối bằng cách sử dụng I/O không chặn là lựa chọn tốt nhất cho các trường hợp sử dụng như vậy.
- Tương tự, Server-Sent Events cũng yêu cầu ngăn xếp ứng dụng web hỗ trợ các kết nối lâu dài, nhưng so với WebSockets thì chúng ít phức tạp hơn, dựa trên văn bản và một chiều.
1.3. Tìm hiểu CMS (Content Management System) 1.3.1. CMS là gì?
Hệ thống quản lý nội dung (CMS) là phần mềm giúp người dùng tạo, quản lý và sửa đổi nội dung trên trang web mà không cần kiến thức kỹ thuật. Nói cách khác, CMS cho phép bạn xây dựng một trang web mà không cần phải viết mã từ đầu (hoặc thậm chí không biết cách viết mã)
1.3.2. CMS hoạt động như thế nào?
Khi không có một hệ quản trị nội dung, để tạo nội dung, chúng ta cần viết một file HTML tĩnh và tải lên server của mình
Tuy nhiên, khi sử dụng CMS, chúng ta chỉ cần viết nội dung muốn thêm trên một giao diện gần giống như Microsoft Word
Hình 1: Giao diện dashboard của WordPress - một CMS phổbiến hiện nay
Tương tự, để tải lên và quản lý phương tiện, như hình ảnh, bạn chỉ cần duyệt qua thư viện phương tiện thay vì cần phải tương tác trực tiếp với máy chủ web của mình
Hình 2: Giao diện tải lên và quản lýđa phương tiện trên CMS
1.3.3. Yếu tố chính tạo nên một CMS
Hệ thống quản lý nội dung được tạo thành từ hai phần cốt lõi:
Ứng dụng quản lý nội dung (Content Management Application - CMA): Đây là phần cho phép bạn thực sự thêm và quản lý nội dung trên trang web của mình.
Ứng dụng phân phối nội dung (Content Delivery Application - CDA): Đây là quy trình phụ trợ, backend lấy nội dung bạn nhập vào CMA, lưu trữ đúng cách và hiển thị nội dung đó cho khách truy cập vào website của bạn nhìn thấy.
Hai hệ thống trên sẽ giúp chúng ta dễ dàng duy trì trang web của mình.
1.3.4. Một số CMS phổ biến hiện nay
WordPress mà chúng tôi đã giới thiệu cho bạn ở trên là ví dụ điển hình nhất về hệ thống quản lý nội dung phổ biến. Mặc dù chắc chắn có các hệ thống quản lý nội dung khác đang tồn tại, nhưng WordPress vẫn duy trì hơn 62,5% thị phần trên các trang web có hệ thống quản lý nội dung đã biết.
Ngoài phần mềm WordPress tự lưu trữ, các hệ thống quản lý nội dung phổ biến khác bao gồm:
● Joomla
● Drupal
● Magento (dành cho cửa hàng thương mại điện tử)
● Hình vuông
● Wix
● TYPO3
Ngoài ra còn có rất nhiều hệ thống quản lý nội dung ít nổi tiếng khác nhắm mục tiêu đến các doanh nghiệp lớn (với mức giá đắt đỏ tương ứng).
Hình 3: Một sốCMS phổbiến hiện nay
1.4. Tìm hiểu về các công nghệ lập trình ứng dụng vào bài toán của đề tài nghiên cứu: HTML, CSS, JS, C#, ASP.NET CORE, SignalR
1.4.1. C#
Đây là ngôn ngữ kịch bản phía máy chủ được tạo bởi Microsoft. Nó được sử dụng để tạo các ứng dụng web có lưu ý đến HTML, CSS và JavaScript. Mã lập trình có thể được thiết kế bằng nhiều công cụ khác nhau. Tuy nhiên, mạnh nhất là Visual Studio (một chương trình phần mềm), giúp việc tạo các chương trình tương tác trở nên dễ dàng hơn bao giờ hết. Điều này đã cho phép C# hoạt động với các ngôn ngữ web cải tiến khác như HTML5, CSS3 và JavaScript.
C# có nhiều lợi ích, nhưng một trong những lợi ích lớn nhất là nó có thể được sử dụng với các ngôn ngữ khác. Điều đó có nghĩa là bạn không bị giới hạn ở C# khi thiết kế chương trình của mình - có nhiều cách dễ dàng để bạn sử dụng ASP.NET/C# với các ngôn ngữ khác nhau.
C# cũng có lượng hỗ trợ cộng đồng lớn nhất, giúp bạn dễ dàng tìm thấy câu trả lời hơn nếu bạn gặp khó khăn. Mặc dù điều này có thể không quan trọng đối với nhiều doanh nghiệp vì họ có bộ phận CNTT, nhưng các công ty nhỏ hoặc những người làm việc một mình có thể đánh giá cao khía cạnh này của C#.
1.4.2. HTML, CSS, JS
Nhiệm vụ chính của HTML xây dựng cấu trúc siêu văn bản trên một trang web và khai báo các tập tin kỹ thuật số như hình ảnh, video, âm thanh. Ngoài ra, HTML còn có các công dụng quan trọng khác, bao gồm:
2. Phân chia và định dạng nội dung: chia đoạn, định dạng và nhấn mạnh văn bản, đặt tiêu đề, ngắt dòng, tạo danh sách, và tạo ký tự đặc biệt.
3. Tạo liên kết và chèn hình ảnh: bao gồm liên kết nội bộ và liên kết ngoài web, ảnh minh họa,.. thu hút người dùng
4. Tạo các kiểu mẫu: gồm cách hiển thị các đoạn văn bản, hình ảnh, bảng,…giúp cho trang web đồng nhất và dễ dàng quản lý hơn.
5. Xác định các thuộc tính của trang web: bao gồm màu sắc, kích thước, vị trí và các thông tin khác.
Vai trò của CSS trong lập trình web có thể kể đến như:
● Xác định phong cách và định nghĩa nội dung dưới dạng văn bản HTML trên trang web
● Tạo ra trang web tương thích với nhiều thiết bị khác nhau.
● Tạo ra bố cục, hiệu ứng và sự độc đáo để thu hút, tăng tính tương tác và trải nghiệm của người dùng.
● Điều khiển định dạng và tái sử dụng các kiểu dáng và phong cách giúp tiết kiệm thời gian và công sức.
● Giúp giảm thiểu lượng mã nguồn và tăng tốc độ tải trang.
Vai trò của JavaScript trong lập trình web:
● Tạo bố cục chuyển động với thư viện ảnh và hiệu ứng động.
● Xây dựng các trò chơi, hoạt hình 2D hoặc 3D, và các ứng dụng cơ sở dữ liệu phức tạp để tăng tính tương tác trên trang web.
● Tăng cường hành vi người dùng bằng các tính năng như xác nhận hộp thoại, các lời kêu gọi hành động, và các tính năng tương tác khác.
● Kiểm soát mặc định của trình duyệt bằng cách thay đổi các hành vi mặc định của trình duyệt, chẳng hạn như xử lý các biểu mẫu đăng ký và đăng nhập của người dùng.
● Hỗ trợ việc xử lý dữ liệu phía máy khách (client-side), giảm tải cho máy chủ và tăng tốc độ xử lý trang.
Tóm lại, HTML xác định cấu trúc nội dung của website, CSS xác định phong cách và bố cục và JavaScript làm cho nội dung có tính tương tác.
1.4.3. ASP.NET CORE
ASP.NET là một framework phổ biến trong phát triển web để xây dựng các ứng dụng web trên nền tảng .NET. ASP.NET Core là phiên bản mã nguồn mở của ASP.NET, chạy trên macOS, Linux và Windows. ASP.NET Core được phát hành lần đầu tiên vào năm 2016 và là thiết kế lại của các phiên bản ASP.NET chỉ dành cho Windows trước đó.
ASP.NET Core được thiết kế để cho phép các thành phần thời gian chạy, API, trình biên dịch và ngôn ngữ phát triển nhanh chóng trong khi vẫn cung cấp nền tảng ổn định và được hỗ trợ để duy trì hoạt động của ứng dụng.
1.4.4. SignalR
ASP.NET Core SignalR là thư viện dành cho các nhà phát triển ASP.NET giúp đơn giản hóa quá trình thêm chức năng thời gian thực vào các ứng dụng web. Chức năng thời gian thực là khả năng yêu cầu server đẩy nội dung đến các clients được kết nối ngay lập tức khi có sẵn, thay vì bắt server đợi clients yêu cầu dữ liệu mới.
SignalR có thể được sử dụng để thêm bất kỳ loại chức năng web "thời gian thực" nào vào ứng dụng ASP.NET. Ứng dụng trò chuyện (chatting) là một ví dụ điển hình. Bất cứ khi nào người dùng làm mới một trang web để xem dữ liệu mới hoặc trang thực hiện Long
Polling để truy xuất dữ liệu mới, thì đó là một trường hợp để sử dụng SignalR. Ví dụ bao gồm bảng thông tin và ứng dụng giám sát, ứng dụng cộng tác (chẳng hạn như chỉnh sửa tài liệu đồng thời), cập nhật tiến độ công việc và biểu mẫu thời gian thực.
SignalR cũng cho phép các loại ứng dụng web hoàn toàn mới yêu cầu cập nhật tần suất cao từ máy chủ, chẳng hạn như chơi game thời gian thực.
SignalR hiện hỗ trợ 3 kỹ thuật khác nhau để xử lý giao tiếp thời gian thực:
● WebSockets
● Server Sent Events
● Long Polling
SignalR sẽ mặc định sử dụng bằng cách thỏa thuận giữa máy khách và máy chủ để xác định kỹ thuật sử dụng dựa trên khả năng của từng bên.
WebSockets
Cho phép giao tiếp 2 chiều giữa trình duyệt và máy chủ sau khi kết nối ban đầu được thiết lập máy chủ thực hiện các cuộc gọi bổ sung đến máy chủ thông qua kết nối hiện có.
Đồng thời, máy chủ có thể gửi dữ liệu đến máy khách thông qua kết nối được thiết lập lâu dài này mà không cần máy khách thực hiện bất kỳ yêu cầu bổ sung nào.
HTTP cung cấp khả năng kết nối nâng cấp lên giao thức mới, chẳng hạn như WebSockets.
● Yêu cầu ban đầu phải được thực hiện bởi khách hàng
● Trong yêu cầu này, khách hàng sẽ yêu cầu nâng cấp thông qua các tiêu đề nâng cấp và kết nối
Nếu máy chủ chấp nhận nâng cấp, nó sẽ gửi lại 101 mã trạng thái HTTP bao gồm các tiêu đề kết nối nâng cấp để mô tả giao thức đã chọn.
Khi kết nối WebSockets được thiết lập, máy chủ bây giờ có thể gửi dữ liệu cho máy khách, máy khách cũng có thể đưa ra yêu cầu quay lại máy chủ có cùng kết nối. Đó là sự giao tiếp hai chiều.
Bây giờ chúng ta có thể chuyển sang push model thay vì HTTP pull model như mô tả trước đó.
Bây giờ chúng ta có thể đẩy dữ liệu đến khách hàng từ máy chủ.
Kết nối WebSockets sẽ vẫn mở cho đến khi một trong hai bên quyết định đóng kết nối.
Kết nối có thể bị đóng nếu trình duyệt bị đóng hoặc nếu trang được làm mới.
Server-Sent Events
Đây là tin nhắn một chiều, máy khách bắt đầu kết nối và sau đó máy chủ có thể truyền các sự kiện xuống máy khách với các sự kiện được máy chủ gửi.
Máy chủ có thể gửi dữ liệu mới đến một trang web bất cứ lúc nào bằng cách đẩy tin nhắn lên trang web. Những tin nhắn đến này có thể được coi là sự kiện có dữ liệu bên trong trang web.
Không giống như WebSockets, các kết nối này chỉ mang tính định hướng từ máy chủ đến máy khách, máy chủ có thể truyền dữ liệu xuống máy khách nhưng máy khách không thể thực hiện bất kỳ yêu cầu bổ sung nào với kết nối này.
Một điều cần lưu ý về các sự kiện được gửi từ máy chủ là chúng không được hỗ trợ bởi Microsoft Internet Explorer hoặc Edge.
Long Polling
Đây là một kỹ thuật khá cũ được sử dụng để lấy dữ liệu từ máy chủ trước khi tồn tại WebSockets hoặc Server-Sent Events.
Ý tưởng cơ bản là máy khách gửi yêu cầu đến máy chủ và máy chủ sẽ giữ yêu cầu đó cho đến khi có dữ liệu để cung cấp.
Khi máy chủ phản hồi với dữ liệu như bình thường, kết nối sẽ bị đóng vào thời điểm này.
Máy khách sẽ ngay lập tức kết nối lại với máy chủ và quá trình tiếp tục tái diễn.
Chương 2: GIAO DIỆN CMS WEB APP
Hình 4: Giao diện trang chủ
Hình 5: Giao diện trang con
Hình 6:Giao diệnđăng ký
Hình 7: Giao diệnđăng nhập
Hình 8: Giao diệnđăng bài tin tức
Hình 9: Giao diện quản lý bàiđăng (CMS)
KẾT LUẬN
Những kết quả nghiên cứu của báo cáo cho phép rút ra những kết luận sau:
Về mặt nghiên cứu khoa học: Công nghệ Realtime đã trở thành một phần quan trọng, cần thiết trong hầu hết mọi khía cạnh cuộc sống ngày nay, do vậy, nghiên cứu về Realtime đã giúp cho sinh viên trau dồi thêm kiến thức trong lĩnh vực phát triển phần mềm, hướng tới tạo nên sản phẩm phần mềm không chỉ có giao diện dễ nhìn, dễ dùng mà còn hiệu quả với người sử dụng thông qua tích hợp tính năng Realtime.
Về mặt thực tế:Nhờ việc tìm hiểu, tổng hợp, phân tích và ứng dụng các thông tin, kiến thức về công nghệ Realtime và một số công nghệ lập trình web như HTML, CSS, JS, C#, ASP.NET CORE, SignalR vào xây dựng một CMS web app, sinh viên nghiên cứu cũng như các độc giả với nhu cầu tìm hiểu cách xây dựng và phát triển web app chất lượng có thêm được một nguồn tham khảo khá đa dạng. Qua đó, có thể nâng cao những kiến thức, kỹ năng để góp phần tạo nên những web app được nhiều người tin dùng.
Hướng phát triển:Trong tương lai, đề tài có thể phát triển thêm một số tính năng như trò chuyện trực tuyến, cộng tác đồng thời và tích hợp với các dịch vụ bên ngoài khác, hỗ trợ đa ngôn ngữ, xem trước nội dung, quản lý và chia sẻ tệp tin đa phương tiện,…
DANH MỤC TÀI LIỆU THAM KHẢO
ASP.NET Core là gì?(n.d.). Retrieved from TopDev:
https://topdev.vn/blog/asp-net-core-la-gi/
Introduction to SignalR. (2020, 10 9). Retrieved from Microsoft:
https://learn.microsoft.com/en-us/aspnet/signalr/overview/getting-started/introducti on-to-signalr
What are HTML, CSS, & Javascript?(n.d.). Retrieved from CIAT:
https://www.ciat.edu/blog/html-css-javascript/#:~:text=HTML%20defines%20the
%20structure%20of,and%20imperative%20styles%20of%20programming What Is a Content Management System (CMS)?(2023, 10 18). Retrieved from Kinsta:
https://kinsta.com/knowledgebase/content-management-system/
