Đồ án ỨNG DỤNG đọc TIN tức

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM DƯƠNG THÀNH ĐẠT – 1752004 BÙI TUẤN MINH - 17520107 ĐỒ ÁN ỨNG DỤNG ĐỌC TIN TỨC Build app for reading news from some source KỸ SƯ NGÀNH CÔNG NGHỆ PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN GIẢNG VIÊN: THÁI THỊ HÀN UYỂN TP HỒ CHÍ MINH, 2021 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM DƯƠNG THÀNH ĐẠT – 17520040 BÙI TUẤN MINH - 17520107 ĐỒ ÁN ỨNG DỤNG ĐỌC TIN TỨC Build app for reading news from some source KỸ SƯ NGÀNH CÔNG NGHỆ PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN GIẢNG VIÊN: THÁI THỊ HÀN UYỂN TP HỒ CHÍ MINH, 2021 LỜI CẢM ƠN Sau q trình học tập rèn luyện khoa Cơng nghệ phần mềm trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM, em trang bị kiến thức kỹ thực tế để hồn thành Đồ án Để hồn thành khóa luận này, với lịng biết ơn sâu sắc em xin gửi lời cảm ơn chân thành đến: Ban Giám hiệu trường Đại học Công nghệ Thông tin – ĐHQG TP.HCM tạo điều kiện thuận lợi để sinh viên tìm kiếm, nghiên cứu thơng tin với hệ thống thư viện đại, đa dạng loại sách tài liệu Gần gũi lời tốt đẹp xin gửi đến đến cô Thái Thị Hàn Uyển tận tình giúp đỡ, định hướng cách tư hướng làm việc khoa học Đó góp ý q báu khơng q trình thực luận văn mà cịn hành trang tiếp bước cho em trình học tập làm việc sau Sau cùng, xin chúc quý Thầy Cơ khoa Cơng nghệ Phần mềm nói riêng giáo viên trường Công nghệ thông tin nói chung thật dồi sức khỏe, niềm tin để tiếp tục thực sứ mệnh cao đẹp Thành phố Hồ Chí Minh, 10 tháng 06 năm 2021 Sinh viên Dương Thành Đạt Sinh viên Bùi Tuấn Minh MỤC LỤC Chương TỔNG QUAN ĐỀ TÀI 1.1 Lý chọn đề tài 1.2 Đối tượng nghiên cứu 1.3 Khảo sát trạng 1.3.1 BÁO MỚI 1.3.2 Tin tức 24h 1.4 Mục tiêu đề tài 1.5 Phương pháp thực Chương KIẾN THỨC NỀN TẢNG 2.1 FLASK 2.1.1 Tại chọn Flask 2.2 Flutter 2.2.1 Tại chọn Flutter 2.3 Firebase Authentication 5 2.4 Cloud FireStore 10 2.5 Beutifulsoup 11 2.5.1 Chương Web Crawling 11 XÂY DỰNG HỆ THỐNG 12 3.1 Xác định yêu cầu hệ thống 12 3.2 Phân tích yêu cầu hệ thống 12 3.3 Phân tích thiết kế hệ thống 14 3.3.1 Sơ đồ use case 14 3.4 Thiết kế kiến trúc phần mềm 21 3.4.1 Kiến trúc phía backend 21 3.4.2 Kiến trúc phía ứng dụng Mobile 22 3.5 Thiết kế giao diện Chương KẾT LUẬN, HƯỚNG PHÁT TRIỂN 23 32 4.1 Ưu điểm 32 4.2 Nhược điểm 32 4.3 Hướng phát triển 32 DANH MỤC HÌNH VẼ Hình 1-1: Ảnh minh hoạ ứng dụng Báo Hình 1-2: Ảnh minh hoạ ứng dụng Tin tức 24h Hình 2-1: Ảnh minh hoạ Flask Hình 2-2: Ảnh minh hoạ Flutter .7 Hình 2-3: Ảnh minh hoạ Firebase Authentication Hình 2-4: Ảnh minh hoạ Cloud Firestore 10 Hình 3-1: Ảnh sơ đồ Use-case mức tổng quát 14 Hình 3-2: Mơ hình kiến trúc Web Crawling + API 21 Hình 3-3: Mơ hình kiến trúc phía ứng dụng Mobile 22 Hình 3-4: Màn hình đăng nhập chung 25 Hình 3-5: Màn hình đăng nhập tài khoản hệ thống 26 Hình 3-6: Màn hình đăng ký .27 Hình 3-7: Màn hình trang tin tức 28 Hình 3-8: Màn hình nội dung tin tức 29 Hình 3-9: Màn hình tài khoản 30 Hình 3-10: Màn hình kho lưu trữ 31 DANH MỤC BẢNG Bảng 3-1: Danh sách actors 14 Bảng 3-2: Danh sách use-cases 15 Bảng 3-3: Đặc tả chức đăng ký 15 Bảng 3-4: Đặc tả chức đăng nhập 16 Bảng 3-5: Đặc tả chức Xem danh sách tin tức 17 Bảng 3-6: Đặc tả chức Đọc tin tức 17 Bảng 3-7: Đặc tả chức Lọc nguồn tin tức 18 Bảng 3-8: Đặc tả chức Xem tin tức theo chủ đề 18 Bảng 3-9: Đặc tả chức Lưu trữ tin tức .19 Bảng 3-10: Đặc tả chức Xóa tin tức lưu trữ .20 Bảng 3-11: Bảng danh sách hình 23 TÓM TẮT ĐỒ ÁN Tổng quan đề tài: Lý chọn đề tài, xác định đối tượng nghiên cứu, khảo sát trạng, định hướng thực kết mong đợi Tìm hiểu cơng nghệ phù hợp để xây dựng ứng dụng Xây dựng hệ thống: Xác định phân tích yêu cầu, thiết kế sở liệu, kiến trúc back-end, fron-end hình Triển khai hệ thống lên máy chủ Linux nhận kết phản hồi Viết báo cáo, đưa kết luận hướng phát triển cho ứng dụng Chương TỔNG QUAN ĐỀ TÀI 1.1 Lý chọn đề tài Trong giới số ngày bùng nổ, việc tiếp cận thông tin cách nhanh chóng trở thành nhu cầu tất yếu người Trong đó, khơng thể khơng kể đến vai trị thơng tin báo chí, nơi cung cấp nhanh thơng tin xác sống ngày Khơng khó để nhận có nhiều trang báo thống, hợp pháp Việt Nam VNEXPRESS, TUỔI TRẺ Điều làm cho người dùng phải truy cập trang web để đọc tin tức từ nguồn báo khác nhau, có khả bỏ sót nguồn báo khác Vì nhu cầu cần có ứng dụng để tổng hợp nguồn báo để phục vụ người dùng 1.2 Đối tượng nghiên cứu Đối tượng phạm vi đề tài hướng đến: Những người Việt Nam có nhu cầu cập nhật tin tức báo chí 1.3 Khảo sát trạng Thực tế nay, Việt Nam có nhiều ứng dụng đọc tin tức quen thuộc kể đến app Báo mới, app Tin tức 24h Ta qua số thông tin chung ứng dụng đọc báo Việt Nam 1.3.1 BÁO MỚI Mô tả chung Báo thu thập tin tức từu 200 nguồn khác từ trang báo điện tử Việt Nam Báo tự động phân tích, cập nhật phân chia liệu theo sở thích người dùng Hình 1-1: Ảnh minh hoạ ứng dụng Báo Ưu điểm Giao diện sinh động Nhiều tính tùy chỉnh cho người dùng Tự động gộp báo giống nguồn gốc Nhiều nguồn báo Nhược điểm Có tính thừa khơng cần thiết đổi font, đổi theme Nhiều lúc performance bị thấp Hay bị kết nối mạng dùng app, load liệu Tên chức Xem tin tức theo chủ đề Chức cho phép người dùng xem tin tức Tóm tắt xếp theo chủ đề Dịng kiện Người dùng chọn tab chủ đề tin tức muốn xem Dòng kiện khác Khơng có Trạng thái hệ thống trước thực use case Khơng có Trạng thái hệ thống sau thực Hệ thống hiển thị danh sách tin tức theo chủ use case đề chọn Bảng 3-9: Đặc tả chức Lưu trữ tin tức Tên chức Tóm tắt Dịng kiện Dịng kiện khác Trạng thái hệ thống trước thực use case Lưu trữ tin tức Chức cho người dùng lưu trữ tin tức quan tâm Người dùng chọn tin tức quan tâm nhấn vào nút “Book mark”(icon) Khơng có Hệ thống kiểm tra tin tức lưu hay chưa Trạng thái hệ thống sau Hệ thống lưu lại tin tức kho lưu trữ thực use case người dùng 19 Người dùng vào tab “Account” chọn “Repository” để xem kho lưu trữ Bảng 3-10: Đặc tả chức Xóa tin tức lưu trữ Tên chức Tóm tắt Xóa tin tức lưu trữ Chức cho phép người dùng xóa tin tức lưu không cần thiết Người dùng chọn tab “Account” tiếp tục vào Dịng kiện “Repository” Người dùng kéo tin tức qua trái chọn “Delete” Dòng kiện khác Trạng thái hệ thống trước thực use case Khơng có Khơng có Trạng thái hệ thống sau Hệ thống xóa tin tức người dùng chọn cập nhật thực use case lại danh sách kho lưu trữ 20 3.4 Thiết kế kiến trúc phần mềm Hệ thống bao gồm phần ứng dụng Mobile Web Crawling + API Trong ứng dụng Mobile xây dựng công nghệ Flutter Web Crawling + API xây dựng công nghệ Flask với hỗ trợ thư viện Beautifulsoup 3.4.1 Kiến trúc phía Web Crawling + API Phía backend thiết kế theo mơ hình Layers Trong có layers Controler, Services Repositories; bên cạnh có module Helper Chi tiết thành phần sau: Hình 3-2: Mơ hình kiến trúc Web Crawling + API 21 • Resful API: Được dùng để cấu hình xử lý request, response ứng dụng Data Resful API nơi định nghĩa xử lý web api Trong đó, Resources nơi định nghĩa loại data nằm request response, với số phương thức chuyển đổi resources models • Web Crawling: Được dùng để cấu hình xử lý hoạt động crawl data từ nguồn thông tin, người cịn có nhiệm vụ lưu lại liệu crawl vào nhớ đệm server Sau chuyển data cho API xử lý 3.4.2 Kiến trúc phía ứng dụng Mobile Phía ứng dụng Mobile xây dựng dựa quy chuẩn Flutter Trong có thành phần gồm có: Layout, Models, Provider, Services chi tiết sau: Hình 3-3: Mơ hình kiến trúc phía ứng dụng Mobile 22 • App/Widgets/Components: thành phần gồm nhiều thư mục source code Nhưng thực nhiệm vụ định nghĩa thành phần giao diện cho ứng dụng Mobile • Models: Thư mục chứa vấn đề liên quan đến định nghĩa loại liệu sử dụng ứng dụng • Provider: Thư viện Provider quen thuộc cần thiết cho việc quản lý state Flutter Và nơi triển khai source code cho Provider • Services: Đây module dùng để chứa hàm hỗ trợ xử lý cho phía ứng dụng Nó việc gọi API, liên kết với CSDL, xử lý lỗi, 3.5 Thiết kế giao diện Ứng dụng News chia làm nhóm người dùng, bao gồm: người dùng đăng nhập tài khoản đăng ký (khách hàng) guest (người dùng sử dụng tài khoản ẩn danh) Bảng 3-11: Bảng danh sách hình STT Tên hình Mơ tả chức Đăng ký Đăng ký tài khoản Đăng nhập Đăng nhập vào hệ thống Trang tin tức Danh sách tin tức nhất, chủ đề Nội dung tin tức Hiển thị nội dung chi tiết tin tức Tài khoản Xem thông tin cá nhân tài khoản Kho lưu trữ Danh sách tin tức người dùng lưu lại Cài đặt (Chưa phát triển) 23 Một số hình ứng dụng bật 24 Hình 3-4: Màn hình đăng nhập chung 25 Hình 3-5: Màn hình đăng nhập tài khoản hệ thống 26 Hình 3-6: Màn hình đăng ký 27 Hình 3-7: Màn hình trang tin tức 28 Hình 3-8: Màn hình nội dung tin tức 29 Hình 3-9: Màn hình tài khoản 30 Hình 3-10: Màn hình kho lưu trữ 31 Chương KẾT LUẬN, HƯỚNG PHÁT TRIỂN 4.1 Ưu điểm Hoàn thành yêu cầu đặt ban đầu, có đầy đủ tính cần thiết ứng dụng đọc tin tức thiết bị di động Giao diện đơn giản, bố cục hợp lý, người dùng dễ dàng theo tác Sinh viên thực nắm kiến thức tổ chức việc lập trình ứng dụng mobile 4.2 Nhược điểm − Còn hạn chế số tính năng: − Tối ưu code chưa tốt nên tốc độ làm liệu ứng dụng cập nhật tin tức chậm − Chưa phát triển tính xác thực qua email, số điện thoại cho tài khoản − Còn hạn chế số lượng nguồn tin tức chưa tối ưu hóa khả cập nhật tin tức − Chưa có thơng báo ứng dụng cập nhật tin tức − Chưa có chức xóa tài khoản 4.3 Hướng phát triển Xây dựng chức cịn thiếu, hồn thiện chức có Tối ưu hóa code để tăng tốc độ tương tác Hỗ trợ thêm đa ngôn ngữ cho quốc gia Triển khai thiết bị thực tế 32 TÀI LIỆU THAM KHẢO [1] https://flutter.dev/docs [2] https://flask-restful.readthedocs.io/en/latest/ [3] https://www.crummy.com/software/BeautifulSoup/bs4/doc/ [4] https://firebase.google.com/docs 33 ... case Đọc tin tức Use case Lọc nguồn tin tức Người dùng đăng nhập để yêu cầu xác thực sử dụng tính ứng dụng Người dùng xem danh sách tin tức Người dùng đọc nội dung tin tức Người dùng lọc nguồn tin. .. cầu cập nhật tin tức báo chí 1.3 Khảo sát trạng Thực tế nay, Việt Nam có nhiều ứng dụng đọc tin tức quen thuộc kể đến app Báo mới, app Tin tức 24h Ta qua số thông tin chung ứng dụng đọc báo Việt... sách tin tức Bảng 3-6: Đặc tả chức Đọc tin tức Tên chức Đọc tin tức 17 Tóm tắt Dịng kiện Dịng kiện khác Trạng thái hệ thống trước thực use case Chức đọc nội dung tin tức Người dùng tìm kiếm tin tức