VỀ CHỨC NĂNG ● Hệ thống tự động cập nhật bài viết mới trên các nguồn tin uy tín - Tự động cập nhật các bài viết mới theo nguồn VnExpress và Dân Trí.. ● Hệ thống cho phép người dùng đăng
NỘI DUNG
TRANG “GOOGLE NEWS”: https://news.google.com
MÔ HÌNH HỌC SÂU COCO-SSD
ĐẶC TẢ USECASE
3.4 Thiết kế cơ sở dữ liệu
4.1 Cài đặt các hàm, API
5.1 Tổng quan kịch bản kiểm thử
5.2 Chi tiết kịch bản kiểm thử
2 Ưu và nhược điểm của ứng dụng
3 Hướng phát triển trong tương lai
Ngày… tháng ….năm 2024 Ý kiến của giáo viên hướng dẫn Người viết đề cương
Trương Thị Ngọc Phượng Nguyễn Trường Phúc vi
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN i
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN ii
LỜI CẢM ƠN iii ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP iv
DANH MỤC TỪ VIẾT TẮT x
DANH MỤC HÌNH ẢNH xi
DANH MỤC BẢNG BIỂU xiv
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC ĐÍCH CỦA ĐỀ TÀI 2
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 2
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 6
1.Chương 1 KHẢO SÁT HIỆN TRẠNG 9
1.1 TRANG “GOOGLE NEWS”: https://news.google.com 9
2.1 MÔ HÌNH HỌC SÂU COCO-SSD 13
2.1.1 Tổng quan mô hình COCO-SSD 13
2.1.2 Kiến trúc của mô hình 13
3.3.4 Cập nhật ảnh đại diện 24
3.3.5 Cập nhật thông tin cá nhân 25
3.3.6 Xem bài viết theo chuyên mục 26
3.3.7 Tự động cập nhật bài viết mỗi năm phút 27
3.3.8 Xem bài viết chi tiết 29
3.3.9 Tìm kiếm bài viết theo từ khóa 30
3.3.10 Tìm kiếm bài viết theo hình ảnh 31
3.3.14 Đánh giá sao cho bài viết 36
3.3.15 Thả cảm xúc cho bài viết 37
3.3.17 Xem bài viết chuyên mục theo dõi 39
3.3.18 Thêm bài viết vào danh sách lưu 40
3.3.19 Xem danh sách bài viết đã lưu 41
3.3.20 Xóa bài viết khỏi danh sách lưu 42
3.4 THIẾT KẾ CƠ SỞ DỮ LIỆU 50
3.4.2 Mô tả cơ sở dữ liệu 51
4.1 CÀI ĐẶT CÁC CHỨC NĂNG CHÍNH 58
4.1.5 Phát hiện đối tượng trong ảnh 62
4.2.1 Giao diện độc giả vãng lai 64
4.2.2 Giao diện người dùng với quyền “người dùng” 71
4.2.3 Giao diện người dùng với quyền “quản trị viên” 75
5.1 TỔNG QUAN KỊCH BẢN KIỂM THỬ 77
5.2 CHI TIẾT KỊCH BẢN KIỂM THỬ 79
5.2.3 Kiểm thử đổi mật khẩu 80
5.2.4 Kiểm thử cập nhật ảnh đại diện 81
5.2.5 Kiểm thử cập nhật thông tin cá nhân 82
5.2.6 Kiểm thử xem bài viết theo chuyên mục 83
5.2.7 Kiểm thử xem bài viết chi tiết 83
5.2.8 Kiểm thử tìm kiếm bài viết theo từ khóa 84
5.2.9 Kiểm thử tìm kiếm bài viết theo hình ảnh 84
5.2.10 Kiểm thử bình luận bài viết 85
5.2.11 Kiểm thử cập nhật bình luận 86
5.2.12 Kiểm thử xóa bình luận 87
5.2.13 Kiểm thử đánh giá sao cho bài viết 88 ix
5.2.14 Kiểm thử thả cảm xúc cho bài viết 88
5.2.15 Kiểm thử theo dõi chuyên mục 89
5.2.16 Kiểm thử xem bài viết bảng tin 90
5.2.17 Kiểm thử thêm bài viết vào danh sách lưu 91
5.2.18 Kiểm thử xem danh sách bài viết đã lưu 91
5.2.19 Kiểm thử xóa bài viết khỏi danh sách lưu 92
5.2.20 Kiểm thử thêm chuyên mục 93
5.2.21 Kiểm thử cập nhật chuyên mục 94
5.2.22 Kiểm thử xóa chuyên mục 95
5.2.23 Kiểm thử cập nhật người dùng 96
5.2.24 Kiểm thử xóa người dùng 97
5.2.26 Kiểm thử cập nhật tag 99
5.2.28 Kiểm thử kiểm duyệt bài viết – chấp nhận 101
5.2.29 Kiểm thử kiểm duyệt bài viết – từ chối 102
2 ƯU VÀ NHƯỢC ĐIỂM CỦA ỨNG DỤNG 104
3 HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI 105
DANH MỤC TÀI LIỆU THAM KHẢO 106 x
DANH MỤC TỪ VIẾT TẮT
COCO: Common Objects in Context
API: Application Programming Interface xi
Hình 1: Tổng quan trang Google News 9
Hình 2: Chọn bài viết trên Google News 10
Hình 3: Chuyển đổi ngôn ngữ 10
Hình 4: Tin tức sau khi chuyển khu vực sang Việt Nam 11
Hình 5: Chức năng tìm kiếm trang Google News 11
Hình 6: Đề xuất tin tức phù hợp với cá nhân 12
Hình 7: Đề xuất tin theo địa phương sinh sống 12
Hình 8: So sánh tốc độ xử lý và độ chính xác các mô hình phát hiện vật thể 13
Hình 9: Sơ đồ kiến trúc mạng SSD 13
Hình 10: Vị trí hộp giới hạn tiêu chuẩn trên ảnh gốc khi áp dụng trên bản đồ đặc trưng
Hình 11: Lược đồ usecase phía người dùng 18
Hình 12: Lược đồ usecase phía hệ thống 18
Hình 13: Sơ đồ tuần tự usecase đăng nhập 20
Hình 14: Sơ đồ tuần tự usecase đăng ký 22
Hình 15: Sơ đồ tuần tự đổi mật khẩu 24
Hình 16: Sơ đồ tuần tự usecase cập nhật ảnh đại diện 25
Hình 17: Sơ đồ tuần tự usecase cập nhật thông tin cá nhân 26
Hình 18: Sơ đồ tuần tự usecase xem bài viết theo chuyên mục 27
Hình 19: Sơ đồ tuần tự usecase tự động cập nhật bài viết mỗi năm phút 28
Hình 20: Sơ đồ tuần tự usecase xem bài viết chi tiết 29
Hình 21: Sơ đồ tuần tự usecase usecase tìm kiếm bài viết theo từ khóa 31
Hình 22: Sơ đồ tuần tự usecase tìm kiếm bài viết theo hình ảnh 32
Hình 23: Sơ đồ tuần tự usecase bình luận bài viết 33
Hình 24: Sơ đồ tuần tự usecase cập nhật bình luận 35
Hình 25: Sơ đồ tuần tự usecase xóa bình luận 36
Hình 26: Sơ đồ tuần tự usecase đánh giá sao cho bài viết 37
Hình 27: Sơ đồ tuần tự usecase thả cảm xúc cho bài viết 38
Hình 28: Sơ đồ tuần tự usecase theo dõi chuyên mục 39
Hình 29: Sơ đồ tuần tự usecase xem bài viết chuyên mục theo dõi 40
Hình 30: Sơ đồ tuần tự usecase thêm bài viết vào danh sách lưu 41 xii
Hình 31: Sơ đồ tuần tự usecase xem danh sách bài viết đã lưu 42
Hình 32: Sơ đồ tuần tự usecase xóa bài viết khỏi danh sách lưu 43
Hình 33: Sơ đồ tuần tự usecase quản lý chuyên mục 45
Hình 34: Sơ đồ tuần tự usecase quản lý người dùng 47
Hình 35: Sơ đồ tuần tự usecase quản lý tag 49
Hình 36: Sơ đồ tuần tự usecase kiểm duyệt bài viết 50
Hình 37 Lược đồ quan hệ cơ sở dữ liệu 51
Hình 38: Thu thập tin mới từ nguồn VnExpress 58
Hình 39: Thu thập thông tin chi tiết (1) 58
Hình 40: Thu thập thông tin chi tiết (2) 59
Hình 41: Thu thập thông tin chi tiết (3) 59
Hình 42: Chuyển đổi từ sang tiếng anh 60
Hình 43: Kết hợp phân đoạn câu và chuyển đổi ngôn ngữ 60
Hình 44: Trích xuất từ khóa quan trọng 61
Hình 45: Kiểm thử chức năng hàm nerKeyword() 61
Hình 46: Tính toán tương đồng giữa 2 chuỗi 62
Hình 47: Lập lịch để hệ thống tự động gọi hàm thu thập 62
Hình 48: Phát hiện đối tượng trong ảnh 63
Hình 49: Giao diện đăng nhập 64
Hình 50: Giao diện đăng ký tài khoản 64
Hình 51: Giao diện header, thanh chuyên mục và tìm kiếm 64
Hình 52: Bài viết mới nhất mọi chuyên mục 65
Hình 53: Bài viết có đánh giá sao cao nhất 65
Hình 54: Bài viết được thả cảm xúc nhiều nhất 65
Hình 55: Bài viết mới nhất theo nguồn Dân Trí 66
Hình 56: Bài viết mới nhất theo nguồn Dân Trí 67
Hình 57: Các bài mới nhất của từng chuyên mục cha 68
Hình 58: Danh sách bài viết theo chuyên mục(đầu trang) 69
Hình 59: Danh sách bài viết theo chuyên mục(cuối trang) 69
Hình 60: Kết quả sau khi tìm kiếm 70
Hình 61: Giao diện chi tiết bài viết (1) 70
Hình 62: Giao diện chi tiết bài viết (2) 71 xiii
Hình 63: Giao diện chi tiết bài viết (3) 71
Hình 64: Giao diện header sau khi đăng nhập 72
Hình 65: Giao diện thông tin cá nhân 72
Hình 66: Giao diện cập nhật mật khẩu 72
Hình 67: Giao diện đánh giá sao cho bài viết 72
Hình 68: Nơi người dùng thả cảm xúc và lưu bài viết 73
Hình 69: Người dùng bình luận bài viết 73
Hình 70: Người dùng cập nhật bình luận (1) 73
Hình 71: Người dùng cập nhật bình luận (2) 74
Hình 72: Người dùng cập nhật bình luận (3) 74
Hình 73: Giao diện bảng tin 74
Hình 74: Theo dõi chuyên mục 74
Hình 75: Giao diện in đã lưu 75
Hình 76: Header sau khi quản trị viên đăng nhập 75
Hình 77: Quản lý chuyên mục 76
Hình 79: Quản lý người dùng 76
Hình 80: Kiểm duyệt bài viết 76 xiv
Bảng 1: Danh sách chức năng của hệ thống 16
Bảng 2: Đặc tả usecase đăng nhập 18
Bảng 3: Thông tin dữ liệu đầu vào cho usecase đăng nhập 19
Bảng 4: Đặc tả usecase đăng ký 20
Bảng 5: Thông tin dữ liệu đầu vào cho usecase đăng ký 21
Bảng 6: Đặc tả usecase đổi mật khẩu 22
Bảng 7: Thông tin dữ liệu đầu vào cho usecase đổi mật khẩu 23
Bảng 8: Đặc tả usecase cập nhật ảnh đại diện 24
Bảng 9: Thông tin dữ liệu đầu vào cho usecase cập nhật ảnh đại diện 25
Bảng 10: Đặc tả usecase cập nhật thông tin cá nhân 25
Bảng 11: Thông tin dữ liệu đầu vào cho usecase cập nhật thông tin cá nhân 26
Bảng 12: Đặc tả usecase xem bài viết theo chuyên mục 26
Bảng 13: Đặc tả usecase tự động cập nhật bài viết mỗi năm phút 27
Bảng 14: Đặc tả usecase xem bài viết chi tiết 29
Bảng 15: Đặc tả usecase tìm kiếm bài viết theo từ khóa 30
Bảng 16: Thông tin dữ liệu đầu vào cho usecase tìm kiếm bài viết theo từ khóa 30
Bảng 17: Đặc tả usecase tìm kiếm bài viết theo hình ảnh 31
Bảng 18: Thông tin dữ liệu đầu vào cho usecase tìm kiếm bài viết theo hình ảnh 32
Bảng 19: Đặc tả usecase bình luận bài viết 32
Bảng 20: Thông tin dữ liệu đầu vào cho usecase bình luận bài viết 33
Bảng 21: Đặc tả usecase cập nhật bình luận 33
Bảng 22: Thông tin dữ liệu đầu vào cho usecase cập nhật bình luận 34
Bảng 23: Đặc tả usecase xóa bình luận 35
Bảng 24: Đặc tả usecase đánh giá sao cho bài viết 36
Bảng 25: Đặc tả usecase thả cảm xúc cho bài viết 37
Bảng 26: Đặc tả usecase theo dõi chuyên mục 38
Bảng 27: Đặc tả usecase xem bài viết chuyên mục theo dõi 39
Bảng 28: Đặc tả usecase thêm bài viết vào danh sách lưu 40
Bảng 29: Đặc tả usecase xem danh sách bài viết đã lưu 41
Bảng 30: Đặc tả usecase xóa bài viết khỏi danh sách lưu 42
Bảng 31: Đặc tả usecase quản lý chuyên mục 43 xv
Bảng 32: Thông tin dữ liệu đầu vào cho usecase quản lý chuyên mục 44
Bảng 33: Đặc tả usecase quản lý người dùng 45
Bảng 34: Thông tin dữ liệu đầu vào cho usecase quản lý người dùng 46
Bảng 35: Đặc tả usecase quản lý tag 47
Bảng 36: Thông tin dữ liệu đầu vào cho usecase quản lý tag 48
Bảng 37: Đặc tả usecase kiểm duyệt bài viết 49
Bảng 38: Mô tả bảng trong cơ sở dữ liệu 51
Bảng 39: Mô tả thuộc tính bảng article 52
Bảng 40: Mô tả thuộc tính bảng category 53
Bảng 41: Mô tả thuộc tính bảng tag 53
Bảng 42: Mô tả thuộc tính bảng tag_article 53
Bảng 43: Mô tả thuộc tính bảng user 54
Bảng 44: Mô tả thuộc tính bảng comment 54
Bảng 45: Mô tả thuộc tính bảng vote_star 55
Bảng 46: Mô tả thuộc tính bảng average_star 55
Bảng 47: Mô tả thuộc tính bảng react_emotion 55
Bảng 48: Mô tả thuộc tính bảng saved_article 56
Bảng 49: Mô tả thuộc tính bảng follow category 56
Bảng 50: Mô tả thuộc tính bảng ner_keyword 56
Bảng 51: Mô tả thuộc tính bảng pending_information 57
Bảng 52: Mô tả giao diện độc giả vãng lai 64
Bảng 53: Mô tả giao diện với quyền người dùng 71
Bảng 54: Mô tả giao diện quản trị viên 75
Bảng 55: Tồng quan kịch bản kiểm thử 77
Bảng 56: Trường hợp kiểm thử đăng nhập 79
Bảng 57: Trường hợp kiểm thử đăng ký 79
Bảng 58: Trường hợp kiểm thử đổi mật khẩu 80
Bảng 59: Trường hợp kiểm thử cập nhật ảnh đại diện 81
Bảng 60: Trường hợp kiểm thử cập nhật thông tin cá nhân 82
Bảng 61: Trường hợp kiểm thử xem bài viết theo chuyên mục 83
Bảng 62: Trường hợp kiểm thử xem bài viết chi tiết 83
Bảng 63: Trường hợp kiểm thử tìm kiếm bài viết theo từ khóa 84 xvi
Bảng 64: Trường hợp kiểm thử tìm kiếm bài viết theo hình ảnh 84
Bảng 65: Trường hợp kiểm thử bình luận bài viết 85
Bảng 66: Trường hợp kiểm thử cập nhật bình luận 86
Bảng 67: Trường hợp kiểm thử xóa bình luận 87
Bảng 68: Trường hợp kiểm thử đánh giá sao cho bài viết 88
Bảng 69: Trường hợp kiểm thử thả cảm xúc cho bài viết 88
Bảng 70: Trường hợp kiểm thử theo dõi chuyên mục 89
Bảng 71: Trường hợp kiểm thử xem bài viết bảng tin 90
Bảng 72: Trường hợp kiểm thử thêm bài viết vào danh sách lưu 91
Bảng 73: Trường hợp kiểm thử xem danh sách bài viết đã lưu 91
Bảng 74: Trường hợp kiểm thử xóa bài viết khỏi danh sách lưu 92
Bảng 75: Trường hợp kiểm thử thêm chuyên mục 93
Bảng 76: Trường hợp kiểm thử cập nhật chuyên mục 94
Bảng 77: Trường hợp kiểm thử xóa chuyên mục 95
Bảng 78: Trường hợp kiểm thử cập nhật người dùng 96
Bảng 79: Trường hợp kiểm thử xóa người dùng 97
Bảng 80: Trường hợp kiểm thử thêm tag 98
Bảng 81: Trường hợp kiểm thử cập nhật tag 99
Bảng 82: Trường hợp kiểm thử xóa tag 100
Bảng 83: Kiểm thử chấp nhận bài viết 101
Bảng 84: Kiểm thử từ chối bài viết 102
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong bối cảnh Cách mạng Công nghiệp 4.0, Internet đã và đang biến đổi toàn diện cả xã hội, tri thức và công nghệ trở thành yếu tố chủ chốt quyết định sự tiến bộ của mỗi quốc gia Xã hội loài người càng phát triển, lượng thông tin tiếp nhận ngày càng nhiều Bên cạnh những thông tin chính thống, luôn tồn tại những thông tin sai lệch, gây hoang mang dư luận, cộng đồng Việc xây dựng một trang tin tức tổng hợp từ các nguồn uy tín là cần thiết để mang đến sự yên tâm cho người dùng khi tiếp cận với tin tức
Hiện nay, số lượng người dùng dành thời gian trên các thiết bị di động hay mạng Internet ngày càng gia tăng Chính vì thế, người dùng đã và đang phải đối phải đối mặt với một làn sóng tin giả, tin chưa xác thực, kiểm duyệt tràn lan trên mạng, thậm chí là xuất hiện ở một số mặt báo “lá cải”, không uy tín Điều này đặt ra một thách thức lớn cho người dùng khi tiếp cận với thông tin cũng như các trang web uy tín khác trong việc truyền đạt những thông tin chính thống tới người dùng Đây chính là hạn chế của báo điện tử so với báo truyền thống trong thời đại công nghệ số hiện nay
Vì vậy, việc nghiên cứu và phát triển một ứng dụng mà thông tin mới sẽ được tự động cập nhật theo các nguồn uy tín là cần thiết Báo điện tử cung cấp nhiều tiện ích và khả năng tương tác mà báo giấy truyền thống không thể có Người dùng có thể tìm kiếm, lưu trữ và chia sẻ bài viết, đánh giá, bình luận và tương tác với nội dung báo Điều này tạo ra một trải nghiệm đọc báo đa dạng và tương tác hơn
Với tính chất động của tin tức, việc cập nhật thông tin nhanh chóng là rất quan trọng Trang tin tức tổng hợp tự động sẽ đáp ứng được điều đó với khả năng cập nhật liên tục ngay sau khi có sự kiện xảy ra Điều này giúp người dùng được tiếp cận với những thông tin mới nhất và chính xác nhất
Bên cạnh đó, việc sử dụng trang tin tức tổng hợp cũng giảm sự phụ thuộc vào báo truyền thống, từ đó giảm lượng giấy in ấn và tiêu thụ năng lượng Có ý nghĩa quan trọng trong việc bảo vệ môi trường và tiết kiệm tài nguyên tự nhiên
2 MỤC ĐÍCH CỦA ĐỀ TÀI Đề tài “Xây dựng website tin tức tổng hợp tự động” có những mục tiêu cần đạt được là:
● Xây dựng giao diện trực quan với những tính năng hỗ trợ, nâng cao trải nghiệm người dùng
● Xây dựng ứng dụng gần gũi thực tiễn, đáp ứng nhu cầu tiếp cận thông tin mới nhất, chính thống nhất của người dùng
● Áp dụng kiến thức về công nghệ phát triển website trong đồ án
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU
3.1 ĐỐI TƯỢNG NGHIÊN CỨU Đối tượng nghiên cứu được đề cập trong báo cáo là một ứng dụng web được xây dựng trên nền tảng Java, sử dụng các công nghệ: NextJS, MySQL, Java Spring Boot
Next.js là một framework React mã nguồn mở được thiết kế để tạo ra các ứng dụng web hiệu quả cao với trải nghiệm người dùng mượt mà và tối ưu hóa SEO Cung cấp nhiều tính năng và công cụ giúp xây dựng các ứng dụng web phức tạp dễ dàng và hiệu quả
Next.js sử dụng Server-Side Rendering (SSR) và Static Site Generation (SSG) để tăng tốc độ tải trang và cải thiện hiệu suất Các công cụ tìm kiếm có thể dễ dàng thu thập dữ liệu và tạo chỉ mục cho nội dung với SSR và SSG, từ đó cải thiện khả năng hiển thị trên trang kết quả tìm kiếm
Các tính năng như routing, pre-fetching và tối ưu hóa hình ảnh đảm bảo trải nghiệm người dùng liền mạch và nhanh chóng của Next.js Bộ khung phát triển hoàn chỉnh của Next.js bao gồm các công cụ và thư viện hỗ trợ để xây dựng ứng dụng nhanh chóng và dễ dàng
Có thể dễ dàng tích hợp Next.js với các công nghệ như Redux, GraphQL và API của bên thứ ba
Next.js là một framework React mạnh mẽ và linh hoạt được thiết kế để tạo ra các ứng dụng web có hiệu suất cao, trải nghiệm người dùng mượt mà và thân thiện với SEO Với các tính năng và công cụ được tích hợp sẵn trong Next.js, có thể phát triển ứng dụng nhanh chóng và hiệu quả
Tailwind CSS, một thư viện CSS giúp tạo layout và style cho giao diện người dùng, đã được sử dụng một cách hiệu quả trong dự án phát triển ứng dụng web của chúng tôi Tailwind không chỉ cung cấp cách tiếp cận linh hoạt và tối ưu hóa quy trình phát triển, mà còn mang lại khả năng tùy chỉnh mạnh mẽ
Sử dụng mô hình "utility-first" giúp tạo ra các class CSS ngay trong HTML, tăng cường tính tương tác và tái sử dụng Cung cấp một loạt các class như flex, p-4, bg-gray-
500 để thiết lập thuộc tính CSS một cách nhanh chóng
Có khả năng tùy chỉnh mọi khía cạnh của stylesheet thông qua file cấu hình Cho phép thay đổi kích thước, màu sắc, font chữ và nhiều yếu tố khác một cách dễ dàng
Có thể tích hợp Tailwind vào dự án một cách dễ dàng thông qua npm hoặc yarn, cung cấp khả năng làm việc chung với các framework JavaScript như React hoặc Vue
Tailwind CSS đã chứng minh là một công nghệ hữu ích trong quá trình phát triển ứng dụng web của chúng tôi Với mô hình "utility-first," khả năng tùy chỉnh linh hoạt và tích hợp dễ dàng, Tailwind không chỉ giúp tối ưu hóa quy trình phát triển mà còn đảm bảo sự tương tác và hiệu suất tốt cho giao diện người dùng của ứng dụng
THIẾT KẾ CƠ SỞ DỮ LIỆU
Hình 37 Lược đồ quan hệ cơ sở dữ liệu
3.4.2 Mô tả cơ sở dữ liệu
Bảng 38: Mô tả bảng trong cơ sở dữ liệu
STT Tên bảng Mô tả
1 article Nơi lưu trữ thông tin của các bài viết, tin tức
2 category Nơi lưu trữ thông tin chuyên mục
3 tag Nơi lưu trữ thông tin các thẻ tag
4 tag_article Nơi lưu trữ thông tin các thẻ tag của từng bài viết
5 user Nơi lưu trữ thông tin về tài khoản người dùng
6 comment Nơi lưu trữ thông tin về bình luận của người dùng ở các bài viết
7 vote_star Nơi lưu trữ thông tin về những đánh giá sao của người dùng với các bài viết
8 average_star Nơi lưu trữ thông tin về đánh giá sao trung bình của bài viết
9 react_emotion Nơi lưu trữ thông tin về những cảm xúc của người dùng với các bài viết
10 saved_article Nơi lưu trữ thông tin về các bài viết mà người dùng đã lưu
11 follow_category Nơi lưu trữ thông tin về những thông tin chuyên mục mà người dùng theo dõi
12 ner_keword Nơi lưu trữ chuỗi từ khóa liên quan đến con người và địa điểm được trích xuất từ nội dung bài viết
13 pending_information Nơi lưu trữ thông tin bài viết được đánh giá là trùng
Bảng 39: Mô tả thuộc tính bảng article
STT Tên trường Kiểu dữ liệu Mô tả
1 id varchar Khóa chính, id của bài viết
2 title text Tiêu đề của bài viết
3 abstracts text Tóm tắt nội dung của bài viết
4 content text Nội dung chi tiết bài viết
5 art_source enum Nguồn của bài viết, bao gồm các giá trị:
6 avatar varchar Đường dẫn ảnh của bài viết
7 create_date datetime Ngày tạo bài viết
8 reading_time float Thời gian ước lượng để đọc bài viết
9 status enum Trạng thái của bài viết, bao gồm các trạng thái: PENDING, REFUSE,
10 category_id varchar Khóa ngoại, tham chiếu đến id của chuyên mục
Bảng 40: Mô tả thuộc tính bảng category
STT Tên trường Kiểu dữ liệu Mô tả
1 id varchar Khóa chính, id của chuyên mục
2 name varchar Tên của chuyên mục
3 second_name varchar Tên gọi khác của chuyên mục
4 parent_id varchar Khóa ngoại, tham chiếu đến id của chuyên mục, hỗ trợ cho mối quan hệ giữa chuyên mục con và chuyên mục cha
5 create_date datetime Ngày tạo chuyên mục
Bảng 41: Mô tả thuộc tính bảng tag
STT Tên trường Kiểu dữ liệu Mô tả
1 id varchar Khóa chính, id của tag
2 value varchar Tên của tag
Bảng 42: Mô tả thuộc tính bảng tag_article
STT Tên trường Kiểu dữ liệu Mô tả
2 article_id varchar Khóa ngoại, tham chiếu đến id của bài viết
3 tag_id varchar Khóa ngoại, tham chiếu đến id của tag
Bảng 43: Mô tả thuộc tính bảng user
STT Tên trường Kiểu dữ liệu Mô tả
1 id varchar Khóa chính, id của người dùng
2 firstname varchar Tên người dùng
3 lastname varchar Họ tên lót của người dùng
4 email varchar Email của người dùng, email duy nhất, dùng cho đăng nhập
5 avatar varchar Đường dẫn ảnh đại diện của người dùng
6 dob datetime Ngày tháng năm sinh của người dùng
7 password varchar Mật khẩu tài khoản người dùng
8 role enum Vai trò của tài khoản, bao gồm các giá trị: USER, ADMIN
Bảng 44: Mô tả thuộc tính bảng comment
STT Tên trường Kiểu dữ liệu Mô tả
1 id varchar Khóa chính, id của bình luận bài viết
2 comment varchar Nội dung bình luận
3 create_date datetime Ngày đăng bình luận
4 article_id varchar Khóa ngoại, tham chiếu đến id của bài viết
5 parent_id varchar Khóa ngoại, tham chiếu đến id của bình luận
6 user_id varchar Khóa ngoại, tham chiếu đến id của người dùng
Bảng 45: Mô tả thuộc tính bảng vote_star
STT Tên trường Kiểu dữ liệu Mô tả
1 id varchar Khóa chính, id của bầu chọn sao
2 star float Số sao bầu chọn, các giá trị cho phép là từ 1 đến 5
3 article_id varchar Khóa ngoại, tham chiếu đến id của bài viết
4 user_id varchar Khóa ngoại, tham chiếu đến id của người dùng
Bảng 46: Mô tả thuộc tính bảng average_star
STT Tên trường Kiểu dữ liệu Mô tả
1 id varchar Khóa chính, id của sao trung bình
2 average_star float Số sao đánh giá trung bình của bài viết
3 article_id varchar Khóa ngoại, tham chiếu đến id của bài viết
Bảng 47: Mô tả thuộc tính bảng react_emotion
STT Tên trường Kiểu dữ liệu Mô tả
1 id varchar Khóa chính, id của thể hiện cảm xúc
2 type_react enum Các giá trị cảm xúc, bao gồm: LIKE,
3 article_id varchar Khóa ngoại, tham chiếu đến id của bài
4 user_id varchar Khóa ngoại, tham chiếu đến id của người dùng
Bảng 48: Mô tả thuộc tính bảng saved_article
STT Tên trường Kiểu dữ liệu Mô tả
1 id varchar Khóa chính, id của danh mục lưu bài viết
2 article_id varchar Khóa ngoại, tham chiếu đến id của bài viết
3 user_id varchar Khóa ngoại, tham chiếu đến id của người dùng
Bảng 49: Mô tả thuộc tính bảng follow category
STT Tên trường Kiểu dữ liệu Mô tả
1 id varchar Khóa chính, id của danh mục theo dõi chuyên mục
2 user_id varchar Khóa ngoại, tham chiếu đến id của người dùng
3 category_id varchar Khóa ngoại, tham chiếu đến id của chuyên mục
Bảng 50: Mô tả thuộc tính bảng ner_keyword
STT Tên trường Kiểu dữ liệu Mô tả
1 id varchar Khóa chính, id của bảng lưu trữ từ khóa
2 ner_keyword text Chuỗi từ khóa liên quan đến con người
57 và địa điểm trích xuất từ nội dung
3 article_id varchar Khóa ngoại, tham chiếu đến id của bài viết
Bảng 51: Mô tả thuộc tính bảng pending_information
STT Tên trường Kiểu dữ liệu Mô tả
1 id varchar Khóa chính, id của bảng lưu trữ thông tin bài viết trùng
2 pending_id varchar Khóa ngoại, tham chiếu đến id của bài viết đang ở trạng thái chờ, được đánh giá là trùng
3 duplicated_id varchar Khóa ngoại, tham chiếu đến id của bài viết đã công khai
4 similarity float Độ tương đồng giữa hai bài viết
5 is_hidden bit Giá trị để ẩn, hiện dữ liệu khi thao tác kiểm duyệt
CÀI ĐẶT GIAO DIỆN
TỔNG QUAN KỊCH BẢN KIỂM THỬ
5.2 Chi tiết kịch bản kiểm thử
2 Ưu và nhược điểm của ứng dụng
3 Hướng phát triển trong tương lai
Ngày… tháng ….năm 2024 Ý kiến của giáo viên hướng dẫn Người viết đề cương
Trương Thị Ngọc Phượng Nguyễn Trường Phúc vi
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN i
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN ii
LỜI CẢM ƠN iii ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP iv
DANH MỤC TỪ VIẾT TẮT x
DANH MỤC HÌNH ẢNH xi
DANH MỤC BẢNG BIỂU xiv
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC ĐÍCH CỦA ĐỀ TÀI 2
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 2
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 6
1.Chương 1 KHẢO SÁT HIỆN TRẠNG 9
1.1 TRANG “GOOGLE NEWS”: https://news.google.com 9
2.1 MÔ HÌNH HỌC SÂU COCO-SSD 13
2.1.1 Tổng quan mô hình COCO-SSD 13
2.1.2 Kiến trúc của mô hình 13
3.3.4 Cập nhật ảnh đại diện 24
3.3.5 Cập nhật thông tin cá nhân 25
3.3.6 Xem bài viết theo chuyên mục 26
3.3.7 Tự động cập nhật bài viết mỗi năm phút 27
3.3.8 Xem bài viết chi tiết 29
3.3.9 Tìm kiếm bài viết theo từ khóa 30
3.3.10 Tìm kiếm bài viết theo hình ảnh 31
3.3.14 Đánh giá sao cho bài viết 36
3.3.15 Thả cảm xúc cho bài viết 37
3.3.17 Xem bài viết chuyên mục theo dõi 39
3.3.18 Thêm bài viết vào danh sách lưu 40
3.3.19 Xem danh sách bài viết đã lưu 41
3.3.20 Xóa bài viết khỏi danh sách lưu 42
3.4 THIẾT KẾ CƠ SỞ DỮ LIỆU 50
3.4.2 Mô tả cơ sở dữ liệu 51
4.1 CÀI ĐẶT CÁC CHỨC NĂNG CHÍNH 58
4.1.5 Phát hiện đối tượng trong ảnh 62
4.2.1 Giao diện độc giả vãng lai 64
4.2.2 Giao diện người dùng với quyền “người dùng” 71
4.2.3 Giao diện người dùng với quyền “quản trị viên” 75
5.1 TỔNG QUAN KỊCH BẢN KIỂM THỬ 77
5.2 CHI TIẾT KỊCH BẢN KIỂM THỬ 79
5.2.3 Kiểm thử đổi mật khẩu 80
5.2.4 Kiểm thử cập nhật ảnh đại diện 81
5.2.5 Kiểm thử cập nhật thông tin cá nhân 82
5.2.6 Kiểm thử xem bài viết theo chuyên mục 83
5.2.7 Kiểm thử xem bài viết chi tiết 83
5.2.8 Kiểm thử tìm kiếm bài viết theo từ khóa 84
5.2.9 Kiểm thử tìm kiếm bài viết theo hình ảnh 84
5.2.10 Kiểm thử bình luận bài viết 85
5.2.11 Kiểm thử cập nhật bình luận 86
5.2.12 Kiểm thử xóa bình luận 87
5.2.13 Kiểm thử đánh giá sao cho bài viết 88 ix
5.2.14 Kiểm thử thả cảm xúc cho bài viết 88
5.2.15 Kiểm thử theo dõi chuyên mục 89
5.2.16 Kiểm thử xem bài viết bảng tin 90
5.2.17 Kiểm thử thêm bài viết vào danh sách lưu 91
5.2.18 Kiểm thử xem danh sách bài viết đã lưu 91
5.2.19 Kiểm thử xóa bài viết khỏi danh sách lưu 92
5.2.20 Kiểm thử thêm chuyên mục 93
5.2.21 Kiểm thử cập nhật chuyên mục 94
5.2.22 Kiểm thử xóa chuyên mục 95
5.2.23 Kiểm thử cập nhật người dùng 96
5.2.24 Kiểm thử xóa người dùng 97
5.2.26 Kiểm thử cập nhật tag 99
5.2.28 Kiểm thử kiểm duyệt bài viết – chấp nhận 101
5.2.29 Kiểm thử kiểm duyệt bài viết – từ chối 102
2 ƯU VÀ NHƯỢC ĐIỂM CỦA ỨNG DỤNG 104
3 HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI 105
DANH MỤC TÀI LIỆU THAM KHẢO 106 x
DANH MỤC TỪ VIẾT TẮT
COCO: Common Objects in Context
API: Application Programming Interface xi
Hình 1: Tổng quan trang Google News 9
Hình 2: Chọn bài viết trên Google News 10
Hình 3: Chuyển đổi ngôn ngữ 10
Hình 4: Tin tức sau khi chuyển khu vực sang Việt Nam 11
Hình 5: Chức năng tìm kiếm trang Google News 11
Hình 6: Đề xuất tin tức phù hợp với cá nhân 12
Hình 7: Đề xuất tin theo địa phương sinh sống 12
Hình 8: So sánh tốc độ xử lý và độ chính xác các mô hình phát hiện vật thể 13
Hình 9: Sơ đồ kiến trúc mạng SSD 13
Hình 10: Vị trí hộp giới hạn tiêu chuẩn trên ảnh gốc khi áp dụng trên bản đồ đặc trưng
Hình 11: Lược đồ usecase phía người dùng 18
Hình 12: Lược đồ usecase phía hệ thống 18
Hình 13: Sơ đồ tuần tự usecase đăng nhập 20
Hình 14: Sơ đồ tuần tự usecase đăng ký 22
Hình 15: Sơ đồ tuần tự đổi mật khẩu 24
Hình 16: Sơ đồ tuần tự usecase cập nhật ảnh đại diện 25
Hình 17: Sơ đồ tuần tự usecase cập nhật thông tin cá nhân 26
Hình 18: Sơ đồ tuần tự usecase xem bài viết theo chuyên mục 27
Hình 19: Sơ đồ tuần tự usecase tự động cập nhật bài viết mỗi năm phút 28
Hình 20: Sơ đồ tuần tự usecase xem bài viết chi tiết 29
Hình 21: Sơ đồ tuần tự usecase usecase tìm kiếm bài viết theo từ khóa 31
Hình 22: Sơ đồ tuần tự usecase tìm kiếm bài viết theo hình ảnh 32
Hình 23: Sơ đồ tuần tự usecase bình luận bài viết 33
Hình 24: Sơ đồ tuần tự usecase cập nhật bình luận 35
Hình 25: Sơ đồ tuần tự usecase xóa bình luận 36
Hình 26: Sơ đồ tuần tự usecase đánh giá sao cho bài viết 37
Hình 27: Sơ đồ tuần tự usecase thả cảm xúc cho bài viết 38
Hình 28: Sơ đồ tuần tự usecase theo dõi chuyên mục 39
Hình 29: Sơ đồ tuần tự usecase xem bài viết chuyên mục theo dõi 40
Hình 30: Sơ đồ tuần tự usecase thêm bài viết vào danh sách lưu 41 xii
Hình 31: Sơ đồ tuần tự usecase xem danh sách bài viết đã lưu 42
Hình 32: Sơ đồ tuần tự usecase xóa bài viết khỏi danh sách lưu 43
Hình 33: Sơ đồ tuần tự usecase quản lý chuyên mục 45
Hình 34: Sơ đồ tuần tự usecase quản lý người dùng 47
Hình 35: Sơ đồ tuần tự usecase quản lý tag 49
Hình 36: Sơ đồ tuần tự usecase kiểm duyệt bài viết 50
Hình 37 Lược đồ quan hệ cơ sở dữ liệu 51
Hình 38: Thu thập tin mới từ nguồn VnExpress 58
Hình 39: Thu thập thông tin chi tiết (1) 58
Hình 40: Thu thập thông tin chi tiết (2) 59
Hình 41: Thu thập thông tin chi tiết (3) 59
Hình 42: Chuyển đổi từ sang tiếng anh 60
Hình 43: Kết hợp phân đoạn câu và chuyển đổi ngôn ngữ 60
Hình 44: Trích xuất từ khóa quan trọng 61
Hình 45: Kiểm thử chức năng hàm nerKeyword() 61
Hình 46: Tính toán tương đồng giữa 2 chuỗi 62
Hình 47: Lập lịch để hệ thống tự động gọi hàm thu thập 62
Hình 48: Phát hiện đối tượng trong ảnh 63
Hình 49: Giao diện đăng nhập 64
Hình 50: Giao diện đăng ký tài khoản 64
Hình 51: Giao diện header, thanh chuyên mục và tìm kiếm 64
Hình 52: Bài viết mới nhất mọi chuyên mục 65
Hình 53: Bài viết có đánh giá sao cao nhất 65
Hình 54: Bài viết được thả cảm xúc nhiều nhất 65
Hình 55: Bài viết mới nhất theo nguồn Dân Trí 66
Hình 56: Bài viết mới nhất theo nguồn Dân Trí 67
Hình 57: Các bài mới nhất của từng chuyên mục cha 68
Hình 58: Danh sách bài viết theo chuyên mục(đầu trang) 69
Hình 59: Danh sách bài viết theo chuyên mục(cuối trang) 69
Hình 60: Kết quả sau khi tìm kiếm 70
Hình 61: Giao diện chi tiết bài viết (1) 70
Hình 62: Giao diện chi tiết bài viết (2) 71 xiii
Hình 63: Giao diện chi tiết bài viết (3) 71
Hình 64: Giao diện header sau khi đăng nhập 72
Hình 65: Giao diện thông tin cá nhân 72
Hình 66: Giao diện cập nhật mật khẩu 72
Hình 67: Giao diện đánh giá sao cho bài viết 72
Hình 68: Nơi người dùng thả cảm xúc và lưu bài viết 73
Hình 69: Người dùng bình luận bài viết 73
Hình 70: Người dùng cập nhật bình luận (1) 73
Hình 71: Người dùng cập nhật bình luận (2) 74
Hình 72: Người dùng cập nhật bình luận (3) 74
Hình 73: Giao diện bảng tin 74
Hình 74: Theo dõi chuyên mục 74
Hình 75: Giao diện in đã lưu 75
Hình 76: Header sau khi quản trị viên đăng nhập 75
Hình 77: Quản lý chuyên mục 76
Hình 79: Quản lý người dùng 76
Hình 80: Kiểm duyệt bài viết 76 xiv
Bảng 1: Danh sách chức năng của hệ thống 16
Bảng 2: Đặc tả usecase đăng nhập 18
Bảng 3: Thông tin dữ liệu đầu vào cho usecase đăng nhập 19
Bảng 4: Đặc tả usecase đăng ký 20
Bảng 5: Thông tin dữ liệu đầu vào cho usecase đăng ký 21
Bảng 6: Đặc tả usecase đổi mật khẩu 22
Bảng 7: Thông tin dữ liệu đầu vào cho usecase đổi mật khẩu 23
Bảng 8: Đặc tả usecase cập nhật ảnh đại diện 24
Bảng 9: Thông tin dữ liệu đầu vào cho usecase cập nhật ảnh đại diện 25
Bảng 10: Đặc tả usecase cập nhật thông tin cá nhân 25
Bảng 11: Thông tin dữ liệu đầu vào cho usecase cập nhật thông tin cá nhân 26
Bảng 12: Đặc tả usecase xem bài viết theo chuyên mục 26
Bảng 13: Đặc tả usecase tự động cập nhật bài viết mỗi năm phút 27
Bảng 14: Đặc tả usecase xem bài viết chi tiết 29
Bảng 15: Đặc tả usecase tìm kiếm bài viết theo từ khóa 30
Bảng 16: Thông tin dữ liệu đầu vào cho usecase tìm kiếm bài viết theo từ khóa 30
Bảng 17: Đặc tả usecase tìm kiếm bài viết theo hình ảnh 31
Bảng 18: Thông tin dữ liệu đầu vào cho usecase tìm kiếm bài viết theo hình ảnh 32
Bảng 19: Đặc tả usecase bình luận bài viết 32
Bảng 20: Thông tin dữ liệu đầu vào cho usecase bình luận bài viết 33
Bảng 21: Đặc tả usecase cập nhật bình luận 33
Bảng 22: Thông tin dữ liệu đầu vào cho usecase cập nhật bình luận 34
Bảng 23: Đặc tả usecase xóa bình luận 35
Bảng 24: Đặc tả usecase đánh giá sao cho bài viết 36
Bảng 25: Đặc tả usecase thả cảm xúc cho bài viết 37
Bảng 26: Đặc tả usecase theo dõi chuyên mục 38
Bảng 27: Đặc tả usecase xem bài viết chuyên mục theo dõi 39
Bảng 28: Đặc tả usecase thêm bài viết vào danh sách lưu 40
Bảng 29: Đặc tả usecase xem danh sách bài viết đã lưu 41
Bảng 30: Đặc tả usecase xóa bài viết khỏi danh sách lưu 42
Bảng 31: Đặc tả usecase quản lý chuyên mục 43 xv
Bảng 32: Thông tin dữ liệu đầu vào cho usecase quản lý chuyên mục 44
Bảng 33: Đặc tả usecase quản lý người dùng 45
Bảng 34: Thông tin dữ liệu đầu vào cho usecase quản lý người dùng 46
Bảng 35: Đặc tả usecase quản lý tag 47
Bảng 36: Thông tin dữ liệu đầu vào cho usecase quản lý tag 48
Bảng 37: Đặc tả usecase kiểm duyệt bài viết 49
Bảng 38: Mô tả bảng trong cơ sở dữ liệu 51
Bảng 39: Mô tả thuộc tính bảng article 52
Bảng 40: Mô tả thuộc tính bảng category 53
Bảng 41: Mô tả thuộc tính bảng tag 53
Bảng 42: Mô tả thuộc tính bảng tag_article 53
Bảng 43: Mô tả thuộc tính bảng user 54
Bảng 44: Mô tả thuộc tính bảng comment 54
Bảng 45: Mô tả thuộc tính bảng vote_star 55
Bảng 46: Mô tả thuộc tính bảng average_star 55
Bảng 47: Mô tả thuộc tính bảng react_emotion 55
Bảng 48: Mô tả thuộc tính bảng saved_article 56
Bảng 49: Mô tả thuộc tính bảng follow category 56
Bảng 50: Mô tả thuộc tính bảng ner_keyword 56
Bảng 51: Mô tả thuộc tính bảng pending_information 57
Bảng 52: Mô tả giao diện độc giả vãng lai 64
Bảng 53: Mô tả giao diện với quyền người dùng 71
Bảng 54: Mô tả giao diện quản trị viên 75
Bảng 55: Tồng quan kịch bản kiểm thử 77
Bảng 56: Trường hợp kiểm thử đăng nhập 79
Bảng 57: Trường hợp kiểm thử đăng ký 79
Bảng 58: Trường hợp kiểm thử đổi mật khẩu 80
Bảng 59: Trường hợp kiểm thử cập nhật ảnh đại diện 81
Bảng 60: Trường hợp kiểm thử cập nhật thông tin cá nhân 82
Bảng 61: Trường hợp kiểm thử xem bài viết theo chuyên mục 83
Bảng 62: Trường hợp kiểm thử xem bài viết chi tiết 83
Bảng 63: Trường hợp kiểm thử tìm kiếm bài viết theo từ khóa 84 xvi
Bảng 64: Trường hợp kiểm thử tìm kiếm bài viết theo hình ảnh 84
Bảng 65: Trường hợp kiểm thử bình luận bài viết 85
Bảng 66: Trường hợp kiểm thử cập nhật bình luận 86
Bảng 67: Trường hợp kiểm thử xóa bình luận 87
Bảng 68: Trường hợp kiểm thử đánh giá sao cho bài viết 88
Bảng 69: Trường hợp kiểm thử thả cảm xúc cho bài viết 88
Bảng 70: Trường hợp kiểm thử theo dõi chuyên mục 89
Bảng 71: Trường hợp kiểm thử xem bài viết bảng tin 90
Bảng 72: Trường hợp kiểm thử thêm bài viết vào danh sách lưu 91
Bảng 73: Trường hợp kiểm thử xem danh sách bài viết đã lưu 91
Bảng 74: Trường hợp kiểm thử xóa bài viết khỏi danh sách lưu 92
Bảng 75: Trường hợp kiểm thử thêm chuyên mục 93
Bảng 76: Trường hợp kiểm thử cập nhật chuyên mục 94
Bảng 77: Trường hợp kiểm thử xóa chuyên mục 95
Bảng 78: Trường hợp kiểm thử cập nhật người dùng 96
Bảng 79: Trường hợp kiểm thử xóa người dùng 97
Bảng 80: Trường hợp kiểm thử thêm tag 98
Bảng 81: Trường hợp kiểm thử cập nhật tag 99
Bảng 82: Trường hợp kiểm thử xóa tag 100
Bảng 83: Kiểm thử chấp nhận bài viết 101
Bảng 84: Kiểm thử từ chối bài viết 102
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong bối cảnh Cách mạng Công nghiệp 4.0, Internet đã và đang biến đổi toàn diện cả xã hội, tri thức và công nghệ trở thành yếu tố chủ chốt quyết định sự tiến bộ của mỗi quốc gia Xã hội loài người càng phát triển, lượng thông tin tiếp nhận ngày càng nhiều Bên cạnh những thông tin chính thống, luôn tồn tại những thông tin sai lệch, gây hoang mang dư luận, cộng đồng Việc xây dựng một trang tin tức tổng hợp từ các nguồn uy tín là cần thiết để mang đến sự yên tâm cho người dùng khi tiếp cận với tin tức
Hiện nay, số lượng người dùng dành thời gian trên các thiết bị di động hay mạng Internet ngày càng gia tăng Chính vì thế, người dùng đã và đang phải đối phải đối mặt với một làn sóng tin giả, tin chưa xác thực, kiểm duyệt tràn lan trên mạng, thậm chí là xuất hiện ở một số mặt báo “lá cải”, không uy tín Điều này đặt ra một thách thức lớn cho người dùng khi tiếp cận với thông tin cũng như các trang web uy tín khác trong việc truyền đạt những thông tin chính thống tới người dùng Đây chính là hạn chế của báo điện tử so với báo truyền thống trong thời đại công nghệ số hiện nay
Vì vậy, việc nghiên cứu và phát triển một ứng dụng mà thông tin mới sẽ được tự động cập nhật theo các nguồn uy tín là cần thiết Báo điện tử cung cấp nhiều tiện ích và khả năng tương tác mà báo giấy truyền thống không thể có Người dùng có thể tìm kiếm, lưu trữ và chia sẻ bài viết, đánh giá, bình luận và tương tác với nội dung báo Điều này tạo ra một trải nghiệm đọc báo đa dạng và tương tác hơn
Với tính chất động của tin tức, việc cập nhật thông tin nhanh chóng là rất quan trọng Trang tin tức tổng hợp tự động sẽ đáp ứng được điều đó với khả năng cập nhật liên tục ngay sau khi có sự kiện xảy ra Điều này giúp người dùng được tiếp cận với những thông tin mới nhất và chính xác nhất
Bên cạnh đó, việc sử dụng trang tin tức tổng hợp cũng giảm sự phụ thuộc vào báo truyền thống, từ đó giảm lượng giấy in ấn và tiêu thụ năng lượng Có ý nghĩa quan trọng trong việc bảo vệ môi trường và tiết kiệm tài nguyên tự nhiên
2 MỤC ĐÍCH CỦA ĐỀ TÀI Đề tài “Xây dựng website tin tức tổng hợp tự động” có những mục tiêu cần đạt được là:
● Xây dựng giao diện trực quan với những tính năng hỗ trợ, nâng cao trải nghiệm người dùng
● Xây dựng ứng dụng gần gũi thực tiễn, đáp ứng nhu cầu tiếp cận thông tin mới nhất, chính thống nhất của người dùng
● Áp dụng kiến thức về công nghệ phát triển website trong đồ án
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU
3.1 ĐỐI TƯỢNG NGHIÊN CỨU Đối tượng nghiên cứu được đề cập trong báo cáo là một ứng dụng web được xây dựng trên nền tảng Java, sử dụng các công nghệ: NextJS, MySQL, Java Spring Boot
Next.js là một framework React mã nguồn mở được thiết kế để tạo ra các ứng dụng web hiệu quả cao với trải nghiệm người dùng mượt mà và tối ưu hóa SEO Cung cấp nhiều tính năng và công cụ giúp xây dựng các ứng dụng web phức tạp dễ dàng và hiệu quả
Next.js sử dụng Server-Side Rendering (SSR) và Static Site Generation (SSG) để tăng tốc độ tải trang và cải thiện hiệu suất Các công cụ tìm kiếm có thể dễ dàng thu thập dữ liệu và tạo chỉ mục cho nội dung với SSR và SSG, từ đó cải thiện khả năng hiển thị trên trang kết quả tìm kiếm
Các tính năng như routing, pre-fetching và tối ưu hóa hình ảnh đảm bảo trải nghiệm người dùng liền mạch và nhanh chóng của Next.js Bộ khung phát triển hoàn chỉnh của Next.js bao gồm các công cụ và thư viện hỗ trợ để xây dựng ứng dụng nhanh chóng và dễ dàng
Có thể dễ dàng tích hợp Next.js với các công nghệ như Redux, GraphQL và API của bên thứ ba
Next.js là một framework React mạnh mẽ và linh hoạt được thiết kế để tạo ra các ứng dụng web có hiệu suất cao, trải nghiệm người dùng mượt mà và thân thiện với SEO Với các tính năng và công cụ được tích hợp sẵn trong Next.js, có thể phát triển ứng dụng nhanh chóng và hiệu quả
Tailwind CSS, một thư viện CSS giúp tạo layout và style cho giao diện người dùng, đã được sử dụng một cách hiệu quả trong dự án phát triển ứng dụng web của chúng tôi Tailwind không chỉ cung cấp cách tiếp cận linh hoạt và tối ưu hóa quy trình phát triển, mà còn mang lại khả năng tùy chỉnh mạnh mẽ
Sử dụng mô hình "utility-first" giúp tạo ra các class CSS ngay trong HTML, tăng cường tính tương tác và tái sử dụng Cung cấp một loạt các class như flex, p-4, bg-gray-
500 để thiết lập thuộc tính CSS một cách nhanh chóng
Có khả năng tùy chỉnh mọi khía cạnh của stylesheet thông qua file cấu hình Cho phép thay đổi kích thước, màu sắc, font chữ và nhiều yếu tố khác một cách dễ dàng
Có thể tích hợp Tailwind vào dự án một cách dễ dàng thông qua npm hoặc yarn, cung cấp khả năng làm việc chung với các framework JavaScript như React hoặc Vue
Tailwind CSS đã chứng minh là một công nghệ hữu ích trong quá trình phát triển ứng dụng web của chúng tôi Với mô hình "utility-first," khả năng tùy chỉnh linh hoạt và tích hợp dễ dàng, Tailwind không chỉ giúp tối ưu hóa quy trình phát triển mà còn đảm bảo sự tương tác và hiệu suất tốt cho giao diện người dùng của ứng dụng
KẾT LUẬN
ƯU VÀ NHƯỢC ĐIỂM CỦA ỨNG DỤNG
HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI
Ngày… tháng ….năm 2024 Ý kiến của giáo viên hướng dẫn Người viết đề cương
Trương Thị Ngọc Phượng Nguyễn Trường Phúc vi
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN i
PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN ii
LỜI CẢM ƠN iii ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP iv
DANH MỤC TỪ VIẾT TẮT x
DANH MỤC HÌNH ẢNH xi
DANH MỤC BẢNG BIỂU xiv
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 1
2 MỤC ĐÍCH CỦA ĐỀ TÀI 2
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU 2
4 KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC 6
1.Chương 1 KHẢO SÁT HIỆN TRẠNG 9
1.1 TRANG “GOOGLE NEWS”: https://news.google.com 9
2.1 MÔ HÌNH HỌC SÂU COCO-SSD 13
2.1.1 Tổng quan mô hình COCO-SSD 13
2.1.2 Kiến trúc của mô hình 13
3.3.4 Cập nhật ảnh đại diện 24
3.3.5 Cập nhật thông tin cá nhân 25
3.3.6 Xem bài viết theo chuyên mục 26
3.3.7 Tự động cập nhật bài viết mỗi năm phút 27
3.3.8 Xem bài viết chi tiết 29
3.3.9 Tìm kiếm bài viết theo từ khóa 30
3.3.10 Tìm kiếm bài viết theo hình ảnh 31
3.3.14 Đánh giá sao cho bài viết 36
3.3.15 Thả cảm xúc cho bài viết 37
3.3.17 Xem bài viết chuyên mục theo dõi 39
3.3.18 Thêm bài viết vào danh sách lưu 40
3.3.19 Xem danh sách bài viết đã lưu 41
3.3.20 Xóa bài viết khỏi danh sách lưu 42
3.4 THIẾT KẾ CƠ SỞ DỮ LIỆU 50
3.4.2 Mô tả cơ sở dữ liệu 51
4.1 CÀI ĐẶT CÁC CHỨC NĂNG CHÍNH 58
4.1.5 Phát hiện đối tượng trong ảnh 62
4.2.1 Giao diện độc giả vãng lai 64
4.2.2 Giao diện người dùng với quyền “người dùng” 71
4.2.3 Giao diện người dùng với quyền “quản trị viên” 75
5.1 TỔNG QUAN KỊCH BẢN KIỂM THỬ 77
5.2 CHI TIẾT KỊCH BẢN KIỂM THỬ 79
5.2.3 Kiểm thử đổi mật khẩu 80
5.2.4 Kiểm thử cập nhật ảnh đại diện 81
5.2.5 Kiểm thử cập nhật thông tin cá nhân 82
5.2.6 Kiểm thử xem bài viết theo chuyên mục 83
5.2.7 Kiểm thử xem bài viết chi tiết 83
5.2.8 Kiểm thử tìm kiếm bài viết theo từ khóa 84
5.2.9 Kiểm thử tìm kiếm bài viết theo hình ảnh 84
5.2.10 Kiểm thử bình luận bài viết 85
5.2.11 Kiểm thử cập nhật bình luận 86
5.2.12 Kiểm thử xóa bình luận 87
5.2.13 Kiểm thử đánh giá sao cho bài viết 88 ix
5.2.14 Kiểm thử thả cảm xúc cho bài viết 88
5.2.15 Kiểm thử theo dõi chuyên mục 89
5.2.16 Kiểm thử xem bài viết bảng tin 90
5.2.17 Kiểm thử thêm bài viết vào danh sách lưu 91
5.2.18 Kiểm thử xem danh sách bài viết đã lưu 91
5.2.19 Kiểm thử xóa bài viết khỏi danh sách lưu 92
5.2.20 Kiểm thử thêm chuyên mục 93
5.2.21 Kiểm thử cập nhật chuyên mục 94
5.2.22 Kiểm thử xóa chuyên mục 95
5.2.23 Kiểm thử cập nhật người dùng 96
5.2.24 Kiểm thử xóa người dùng 97
5.2.26 Kiểm thử cập nhật tag 99
5.2.28 Kiểm thử kiểm duyệt bài viết – chấp nhận 101
5.2.29 Kiểm thử kiểm duyệt bài viết – từ chối 102
2 ƯU VÀ NHƯỢC ĐIỂM CỦA ỨNG DỤNG 104
3 HƯỚNG PHÁT TRIỂN TRONG TƯƠNG LAI 105
DANH MỤC TÀI LIỆU THAM KHẢO 106 x
DANH MỤC TỪ VIẾT TẮT
COCO: Common Objects in Context
API: Application Programming Interface xi
Hình 1: Tổng quan trang Google News 9
Hình 2: Chọn bài viết trên Google News 10
Hình 3: Chuyển đổi ngôn ngữ 10
Hình 4: Tin tức sau khi chuyển khu vực sang Việt Nam 11
Hình 5: Chức năng tìm kiếm trang Google News 11
Hình 6: Đề xuất tin tức phù hợp với cá nhân 12
Hình 7: Đề xuất tin theo địa phương sinh sống 12
Hình 8: So sánh tốc độ xử lý và độ chính xác các mô hình phát hiện vật thể 13
Hình 9: Sơ đồ kiến trúc mạng SSD 13
Hình 10: Vị trí hộp giới hạn tiêu chuẩn trên ảnh gốc khi áp dụng trên bản đồ đặc trưng
Hình 11: Lược đồ usecase phía người dùng 18
Hình 12: Lược đồ usecase phía hệ thống 18
Hình 13: Sơ đồ tuần tự usecase đăng nhập 20
Hình 14: Sơ đồ tuần tự usecase đăng ký 22
Hình 15: Sơ đồ tuần tự đổi mật khẩu 24
Hình 16: Sơ đồ tuần tự usecase cập nhật ảnh đại diện 25
Hình 17: Sơ đồ tuần tự usecase cập nhật thông tin cá nhân 26
Hình 18: Sơ đồ tuần tự usecase xem bài viết theo chuyên mục 27
Hình 19: Sơ đồ tuần tự usecase tự động cập nhật bài viết mỗi năm phút 28
Hình 20: Sơ đồ tuần tự usecase xem bài viết chi tiết 29
Hình 21: Sơ đồ tuần tự usecase usecase tìm kiếm bài viết theo từ khóa 31
Hình 22: Sơ đồ tuần tự usecase tìm kiếm bài viết theo hình ảnh 32
Hình 23: Sơ đồ tuần tự usecase bình luận bài viết 33
Hình 24: Sơ đồ tuần tự usecase cập nhật bình luận 35
Hình 25: Sơ đồ tuần tự usecase xóa bình luận 36
Hình 26: Sơ đồ tuần tự usecase đánh giá sao cho bài viết 37
Hình 27: Sơ đồ tuần tự usecase thả cảm xúc cho bài viết 38
Hình 28: Sơ đồ tuần tự usecase theo dõi chuyên mục 39
Hình 29: Sơ đồ tuần tự usecase xem bài viết chuyên mục theo dõi 40
Hình 30: Sơ đồ tuần tự usecase thêm bài viết vào danh sách lưu 41 xii
Hình 31: Sơ đồ tuần tự usecase xem danh sách bài viết đã lưu 42
Hình 32: Sơ đồ tuần tự usecase xóa bài viết khỏi danh sách lưu 43
Hình 33: Sơ đồ tuần tự usecase quản lý chuyên mục 45
Hình 34: Sơ đồ tuần tự usecase quản lý người dùng 47
Hình 35: Sơ đồ tuần tự usecase quản lý tag 49
Hình 36: Sơ đồ tuần tự usecase kiểm duyệt bài viết 50
Hình 37 Lược đồ quan hệ cơ sở dữ liệu 51
Hình 38: Thu thập tin mới từ nguồn VnExpress 58
Hình 39: Thu thập thông tin chi tiết (1) 58
Hình 40: Thu thập thông tin chi tiết (2) 59
Hình 41: Thu thập thông tin chi tiết (3) 59
Hình 42: Chuyển đổi từ sang tiếng anh 60
Hình 43: Kết hợp phân đoạn câu và chuyển đổi ngôn ngữ 60
Hình 44: Trích xuất từ khóa quan trọng 61
Hình 45: Kiểm thử chức năng hàm nerKeyword() 61
Hình 46: Tính toán tương đồng giữa 2 chuỗi 62
Hình 47: Lập lịch để hệ thống tự động gọi hàm thu thập 62
Hình 48: Phát hiện đối tượng trong ảnh 63
Hình 49: Giao diện đăng nhập 64
Hình 50: Giao diện đăng ký tài khoản 64
Hình 51: Giao diện header, thanh chuyên mục và tìm kiếm 64
Hình 52: Bài viết mới nhất mọi chuyên mục 65
Hình 53: Bài viết có đánh giá sao cao nhất 65
Hình 54: Bài viết được thả cảm xúc nhiều nhất 65
Hình 55: Bài viết mới nhất theo nguồn Dân Trí 66
Hình 56: Bài viết mới nhất theo nguồn Dân Trí 67
Hình 57: Các bài mới nhất của từng chuyên mục cha 68
Hình 58: Danh sách bài viết theo chuyên mục(đầu trang) 69
Hình 59: Danh sách bài viết theo chuyên mục(cuối trang) 69
Hình 60: Kết quả sau khi tìm kiếm 70
Hình 61: Giao diện chi tiết bài viết (1) 70
Hình 62: Giao diện chi tiết bài viết (2) 71 xiii
Hình 63: Giao diện chi tiết bài viết (3) 71
Hình 64: Giao diện header sau khi đăng nhập 72
Hình 65: Giao diện thông tin cá nhân 72
Hình 66: Giao diện cập nhật mật khẩu 72
Hình 67: Giao diện đánh giá sao cho bài viết 72
Hình 68: Nơi người dùng thả cảm xúc và lưu bài viết 73
Hình 69: Người dùng bình luận bài viết 73
Hình 70: Người dùng cập nhật bình luận (1) 73
Hình 71: Người dùng cập nhật bình luận (2) 74
Hình 72: Người dùng cập nhật bình luận (3) 74
Hình 73: Giao diện bảng tin 74
Hình 74: Theo dõi chuyên mục 74
Hình 75: Giao diện in đã lưu 75
Hình 76: Header sau khi quản trị viên đăng nhập 75
Hình 77: Quản lý chuyên mục 76
Hình 79: Quản lý người dùng 76
Hình 80: Kiểm duyệt bài viết 76 xiv
Bảng 1: Danh sách chức năng của hệ thống 16
Bảng 2: Đặc tả usecase đăng nhập 18
Bảng 3: Thông tin dữ liệu đầu vào cho usecase đăng nhập 19
Bảng 4: Đặc tả usecase đăng ký 20
Bảng 5: Thông tin dữ liệu đầu vào cho usecase đăng ký 21
Bảng 6: Đặc tả usecase đổi mật khẩu 22
Bảng 7: Thông tin dữ liệu đầu vào cho usecase đổi mật khẩu 23
Bảng 8: Đặc tả usecase cập nhật ảnh đại diện 24
Bảng 9: Thông tin dữ liệu đầu vào cho usecase cập nhật ảnh đại diện 25
Bảng 10: Đặc tả usecase cập nhật thông tin cá nhân 25
Bảng 11: Thông tin dữ liệu đầu vào cho usecase cập nhật thông tin cá nhân 26
Bảng 12: Đặc tả usecase xem bài viết theo chuyên mục 26
Bảng 13: Đặc tả usecase tự động cập nhật bài viết mỗi năm phút 27
Bảng 14: Đặc tả usecase xem bài viết chi tiết 29
Bảng 15: Đặc tả usecase tìm kiếm bài viết theo từ khóa 30
Bảng 16: Thông tin dữ liệu đầu vào cho usecase tìm kiếm bài viết theo từ khóa 30
Bảng 17: Đặc tả usecase tìm kiếm bài viết theo hình ảnh 31
Bảng 18: Thông tin dữ liệu đầu vào cho usecase tìm kiếm bài viết theo hình ảnh 32
Bảng 19: Đặc tả usecase bình luận bài viết 32
Bảng 20: Thông tin dữ liệu đầu vào cho usecase bình luận bài viết 33
Bảng 21: Đặc tả usecase cập nhật bình luận 33
Bảng 22: Thông tin dữ liệu đầu vào cho usecase cập nhật bình luận 34
Bảng 23: Đặc tả usecase xóa bình luận 35
Bảng 24: Đặc tả usecase đánh giá sao cho bài viết 36
Bảng 25: Đặc tả usecase thả cảm xúc cho bài viết 37
Bảng 26: Đặc tả usecase theo dõi chuyên mục 38
Bảng 27: Đặc tả usecase xem bài viết chuyên mục theo dõi 39
Bảng 28: Đặc tả usecase thêm bài viết vào danh sách lưu 40
Bảng 29: Đặc tả usecase xem danh sách bài viết đã lưu 41
Bảng 30: Đặc tả usecase xóa bài viết khỏi danh sách lưu 42
Bảng 31: Đặc tả usecase quản lý chuyên mục 43 xv
Bảng 32: Thông tin dữ liệu đầu vào cho usecase quản lý chuyên mục 44
Bảng 33: Đặc tả usecase quản lý người dùng 45
Bảng 34: Thông tin dữ liệu đầu vào cho usecase quản lý người dùng 46
Bảng 35: Đặc tả usecase quản lý tag 47
Bảng 36: Thông tin dữ liệu đầu vào cho usecase quản lý tag 48
Bảng 37: Đặc tả usecase kiểm duyệt bài viết 49
Bảng 38: Mô tả bảng trong cơ sở dữ liệu 51
Bảng 39: Mô tả thuộc tính bảng article 52
Bảng 40: Mô tả thuộc tính bảng category 53
Bảng 41: Mô tả thuộc tính bảng tag 53
Bảng 42: Mô tả thuộc tính bảng tag_article 53
Bảng 43: Mô tả thuộc tính bảng user 54
Bảng 44: Mô tả thuộc tính bảng comment 54
Bảng 45: Mô tả thuộc tính bảng vote_star 55
Bảng 46: Mô tả thuộc tính bảng average_star 55
Bảng 47: Mô tả thuộc tính bảng react_emotion 55
Bảng 48: Mô tả thuộc tính bảng saved_article 56
Bảng 49: Mô tả thuộc tính bảng follow category 56
Bảng 50: Mô tả thuộc tính bảng ner_keyword 56
Bảng 51: Mô tả thuộc tính bảng pending_information 57
Bảng 52: Mô tả giao diện độc giả vãng lai 64
Bảng 53: Mô tả giao diện với quyền người dùng 71
Bảng 54: Mô tả giao diện quản trị viên 75
Bảng 55: Tồng quan kịch bản kiểm thử 77
Bảng 56: Trường hợp kiểm thử đăng nhập 79
Bảng 57: Trường hợp kiểm thử đăng ký 79
Bảng 58: Trường hợp kiểm thử đổi mật khẩu 80
Bảng 59: Trường hợp kiểm thử cập nhật ảnh đại diện 81
Bảng 60: Trường hợp kiểm thử cập nhật thông tin cá nhân 82
Bảng 61: Trường hợp kiểm thử xem bài viết theo chuyên mục 83
Bảng 62: Trường hợp kiểm thử xem bài viết chi tiết 83
Bảng 63: Trường hợp kiểm thử tìm kiếm bài viết theo từ khóa 84 xvi
Bảng 64: Trường hợp kiểm thử tìm kiếm bài viết theo hình ảnh 84
Bảng 65: Trường hợp kiểm thử bình luận bài viết 85
Bảng 66: Trường hợp kiểm thử cập nhật bình luận 86
Bảng 67: Trường hợp kiểm thử xóa bình luận 87
Bảng 68: Trường hợp kiểm thử đánh giá sao cho bài viết 88
Bảng 69: Trường hợp kiểm thử thả cảm xúc cho bài viết 88
Bảng 70: Trường hợp kiểm thử theo dõi chuyên mục 89
Bảng 71: Trường hợp kiểm thử xem bài viết bảng tin 90
Bảng 72: Trường hợp kiểm thử thêm bài viết vào danh sách lưu 91
Bảng 73: Trường hợp kiểm thử xem danh sách bài viết đã lưu 91
Bảng 74: Trường hợp kiểm thử xóa bài viết khỏi danh sách lưu 92
Bảng 75: Trường hợp kiểm thử thêm chuyên mục 93
Bảng 76: Trường hợp kiểm thử cập nhật chuyên mục 94
Bảng 77: Trường hợp kiểm thử xóa chuyên mục 95
Bảng 78: Trường hợp kiểm thử cập nhật người dùng 96
Bảng 79: Trường hợp kiểm thử xóa người dùng 97
Bảng 80: Trường hợp kiểm thử thêm tag 98
Bảng 81: Trường hợp kiểm thử cập nhật tag 99
Bảng 82: Trường hợp kiểm thử xóa tag 100
Bảng 83: Kiểm thử chấp nhận bài viết 101
Bảng 84: Kiểm thử từ chối bài viết 102
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong bối cảnh Cách mạng Công nghiệp 4.0, Internet đã và đang biến đổi toàn diện cả xã hội, tri thức và công nghệ trở thành yếu tố chủ chốt quyết định sự tiến bộ của mỗi quốc gia Xã hội loài người càng phát triển, lượng thông tin tiếp nhận ngày càng nhiều Bên cạnh những thông tin chính thống, luôn tồn tại những thông tin sai lệch, gây hoang mang dư luận, cộng đồng Việc xây dựng một trang tin tức tổng hợp từ các nguồn uy tín là cần thiết để mang đến sự yên tâm cho người dùng khi tiếp cận với tin tức
Hiện nay, số lượng người dùng dành thời gian trên các thiết bị di động hay mạng Internet ngày càng gia tăng Chính vì thế, người dùng đã và đang phải đối phải đối mặt với một làn sóng tin giả, tin chưa xác thực, kiểm duyệt tràn lan trên mạng, thậm chí là xuất hiện ở một số mặt báo “lá cải”, không uy tín Điều này đặt ra một thách thức lớn cho người dùng khi tiếp cận với thông tin cũng như các trang web uy tín khác trong việc truyền đạt những thông tin chính thống tới người dùng Đây chính là hạn chế của báo điện tử so với báo truyền thống trong thời đại công nghệ số hiện nay
Vì vậy, việc nghiên cứu và phát triển một ứng dụng mà thông tin mới sẽ được tự động cập nhật theo các nguồn uy tín là cần thiết Báo điện tử cung cấp nhiều tiện ích và khả năng tương tác mà báo giấy truyền thống không thể có Người dùng có thể tìm kiếm, lưu trữ và chia sẻ bài viết, đánh giá, bình luận và tương tác với nội dung báo Điều này tạo ra một trải nghiệm đọc báo đa dạng và tương tác hơn
Với tính chất động của tin tức, việc cập nhật thông tin nhanh chóng là rất quan trọng Trang tin tức tổng hợp tự động sẽ đáp ứng được điều đó với khả năng cập nhật liên tục ngay sau khi có sự kiện xảy ra Điều này giúp người dùng được tiếp cận với những thông tin mới nhất và chính xác nhất
Bên cạnh đó, việc sử dụng trang tin tức tổng hợp cũng giảm sự phụ thuộc vào báo truyền thống, từ đó giảm lượng giấy in ấn và tiêu thụ năng lượng Có ý nghĩa quan trọng trong việc bảo vệ môi trường và tiết kiệm tài nguyên tự nhiên
2 MỤC ĐÍCH CỦA ĐỀ TÀI Đề tài “Xây dựng website tin tức tổng hợp tự động” có những mục tiêu cần đạt được là:
● Xây dựng giao diện trực quan với những tính năng hỗ trợ, nâng cao trải nghiệm người dùng
● Xây dựng ứng dụng gần gũi thực tiễn, đáp ứng nhu cầu tiếp cận thông tin mới nhất, chính thống nhất của người dùng
● Áp dụng kiến thức về công nghệ phát triển website trong đồ án
3 CÁCH TIẾP CẬN VÀ PHƯƠNG PHÁP NGHIÊN CỨU
3.1 ĐỐI TƯỢNG NGHIÊN CỨU Đối tượng nghiên cứu được đề cập trong báo cáo là một ứng dụng web được xây dựng trên nền tảng Java, sử dụng các công nghệ: NextJS, MySQL, Java Spring Boot
Next.js là một framework React mã nguồn mở được thiết kế để tạo ra các ứng dụng web hiệu quả cao với trải nghiệm người dùng mượt mà và tối ưu hóa SEO Cung cấp nhiều tính năng và công cụ giúp xây dựng các ứng dụng web phức tạp dễ dàng và hiệu quả
Next.js sử dụng Server-Side Rendering (SSR) và Static Site Generation (SSG) để tăng tốc độ tải trang và cải thiện hiệu suất Các công cụ tìm kiếm có thể dễ dàng thu thập dữ liệu và tạo chỉ mục cho nội dung với SSR và SSG, từ đó cải thiện khả năng hiển thị trên trang kết quả tìm kiếm
Các tính năng như routing, pre-fetching và tối ưu hóa hình ảnh đảm bảo trải nghiệm người dùng liền mạch và nhanh chóng của Next.js Bộ khung phát triển hoàn chỉnh của Next.js bao gồm các công cụ và thư viện hỗ trợ để xây dựng ứng dụng nhanh chóng và dễ dàng
Có thể dễ dàng tích hợp Next.js với các công nghệ như Redux, GraphQL và API của bên thứ ba
Next.js là một framework React mạnh mẽ và linh hoạt được thiết kế để tạo ra các ứng dụng web có hiệu suất cao, trải nghiệm người dùng mượt mà và thân thiện với SEO Với các tính năng và công cụ được tích hợp sẵn trong Next.js, có thể phát triển ứng dụng nhanh chóng và hiệu quả
Tailwind CSS, một thư viện CSS giúp tạo layout và style cho giao diện người dùng, đã được sử dụng một cách hiệu quả trong dự án phát triển ứng dụng web của chúng tôi Tailwind không chỉ cung cấp cách tiếp cận linh hoạt và tối ưu hóa quy trình phát triển, mà còn mang lại khả năng tùy chỉnh mạnh mẽ
Sử dụng mô hình "utility-first" giúp tạo ra các class CSS ngay trong HTML, tăng cường tính tương tác và tái sử dụng Cung cấp một loạt các class như flex, p-4, bg-gray-
500 để thiết lập thuộc tính CSS một cách nhanh chóng
Có khả năng tùy chỉnh mọi khía cạnh của stylesheet thông qua file cấu hình Cho phép thay đổi kích thước, màu sắc, font chữ và nhiều yếu tố khác một cách dễ dàng
Có thể tích hợp Tailwind vào dự án một cách dễ dàng thông qua npm hoặc yarn, cung cấp khả năng làm việc chung với các framework JavaScript như React hoặc Vue
Tailwind CSS đã chứng minh là một công nghệ hữu ích trong quá trình phát triển ứng dụng web của chúng tôi Với mô hình "utility-first," khả năng tùy chỉnh linh hoạt và tích hợp dễ dàng, Tailwind không chỉ giúp tối ưu hóa quy trình phát triển mà còn đảm bảo sự tương tác và hiệu suất tốt cho giao diện người dùng của ứng dụng
