CHƯƠNG 4 PHÂN TÍCH THIẾT KẾ HỆ THỐNG
4.5 Mô tả chi tiết mỗi màn hình
4.5.1 Màn hình “Giới thiệu”
Hình 4. 4: Màn hình giới thiệu
STT Tên đối tượng Chức năng
1 Text Lời giới thiệu
2 Image Ảnh minh hoạ
3 Button Bắt đầu với màn hình đăng
nhập
56
4.5.2 Màn hình “Đăng nhập”
Hình 4. 5: Màn hình đăng nhập
STT Tên đối tượng Chức năng
1 Text Lời chào
2 TextEditingController Nhập thông tin tài khoản
3 TextEditingController Nhập thông tin mật khẩu
4 Button Hiển thị mật khẩu đã
nhập
5 Button Đăng nhập
6 Text Điều hướng đến màn
hình đăng ký
57
4.5.3 Màn hình “Đăng ký”
Hình 4. 6: Màn hình đăng ký
STT Tên đối tượng Chức năng
1 Text Lời chào
2 TextEditingController Nhập thông tin tên
3 TextEditingController Nhập thông tin email
4 TextEditingController Nhập thông tin điện thoại
5 TextEditingController Nhập thông tin mật khẩu
6 TextEditingController Nhập thông tin xác nhận
mật khẩu
7 Button Hiện thông tin mật khẩu
58
8 Button Đăng ký tài khoản
7 Text Điều hướng đến màn
hình đăng nhập
Bảng 3. 19: Bảng mô tả chi tiết các thành phần của màn hình “Đăng ký”.
4.5.4 Màn hình “Người dùng”
Hình 4. 7: Màn hình người dùng
STT Tên đối tượng Chức năng
1 Appbar Hiển thị thơng tin về tên
màn hình
59
3 Image Hình đại diện người dùng
4 Text Hiển thị thông tin tên người
dùng
5 Text Hiển thị thông tin địa chỉ email
người dùng
6 Text Hiển thị danh mục
7 Icon + Text Hiển thị chức năng các tin yêu
thích
8 Icon + Text Hiển thị chức năng đang theo
dõi
9 Icon + Text Hiển thị chức năng các tin đã
đọc gần đây
10 Icon + Text Hiển thị chức năng xem thời tiết
11 Icon + Text Hiển thị chức năng xem lịch
Việt
12 Icon + Text Hiển thị chức năng xem kết quả
sổ xố
13 NavigationBar Điểu hướng đến màn hình khác
60
4.5.5 Màn hình “Chính”
Hình 4. 8: Màn hình “Chính”
STT Tên đối tượng Chức năng
1 Appbar Hiển thị thơng tin về tên
màn hình
2 MenuItem Hiển thị các thơng tin về màn
hình khác
3 TabbarView Hiển thị các thể loại bài báo
4 Article Hiển thị thông tin bài báo
5 Image Hiển thị ảnh minh hoạ bài báo
6 Text Hiển thị tên tờ báo
61
8 Text Hiển thị mô tả bài báo
Bảng 3. 21: Bảng mô tả chi tiết các thành phần của màn hình “Chính”.
4.5.6 Màn hình “Xu hướng”
Hình 4. 9: Màn hình “Xu hướng”
STT Tên đối tượng Chức năng
1 Appbar Hiển thị thơng tin màn
hình hiện tại
2 Text Hiển thị thông tin danh
mục
3 Article Hiển thị thông tin bài báo
62
4.5.7 Màn hình “Thơng báo”
Hình 4. 10: Màn hình thơng báo
STT Tên đối tượng Chức năng
1 Appbar Hiển thị thơng tin màn hình
hiện tại
2 NotificationPiece Hiển thị thông tin thông báo
3 Image Hiển thị ảnh minh hoạ
thông báo
4 Text Hiển thị thời gian thông báo
so với hiện tại
5 Text Hiển thị mô tả thông báo
63
4.5.8 Màn hình “Chi tiết bài báo”
Hình 4. 11: Màn hình “Chi tiết bài báo”
STT Tên đối tượng Chức năng
1 Appbar Hiển thị thông tin tờ báo
2 Button Trở về màn hình trước
3 Button Thêm vào tin ưa thích
4 Webview Hiển thị thông tin chi tiết
bài báo
5 Button Trở về bài viết trước
6 Button Đi đến bài viết tiếp theo
64
Bảng 3. 24: Bảng mơ tả chi tiết các thành phần của màn hình “Chi tiết bài báo”.
4.5.9 Màn hình “Gần đây”
Hình 4. 12: Màn hình “gần đây”
STT Tên đối tượng Chức năng
1 Appbar Hiển thị thơng tin màn hình
hiện tại
2 Button Trở về màn hình trước
3 Article Hiển thị thơng tin bài báo
65
4.5.10 Màn hình “Ưa thích”
Hình 4. 13: Màn hình “Ưa thích”
STT Tên đối tượng Chức năng
1 Appbar Hiển thị thơng tin màn hình
hiện tại
2 Button Trở về màn hình trước
3 Article Hiển thị thông tin bài báo
66
4.5.11 Màn hình “Thời tiết”
Hình 4. 14: Màn hình “Thời tiết”
STT Tên đối tượng Chức năng
1 Appbar Hiển thị thơng tin
màn hình hiện tại
2 Button Trở về màn hình trước
3 Webview Hiển thị thông tin thời tiết
67
4.5.12 Màn hình “Lịch việt”
Hình 4. 15: Màn hình “Lịch việt”
STT Tên đối tượng Chức năng
1 Appbar Hiển thị thơng tin
màn hình hiện tại
2 Button Trở về màn hình trước
3 Webview Hiển thị thơng tin lịch
việt
68
4.5.13 Màn hình “Kết quả xổ số”
Hình 4. 16: Màn hình kết quả xổ số
STT Tên đối tượng Chức năng
1 Appbar Hiển thị thơng tin
màn hình hiện tại
2 Button Trở về màn hình trước
3 Webview Hiển thị thông tin kết quả
xổ số
Bảng 3. 29: Bảng mô tả chi tiết các thành phần của màn hình “Kết quả sổ xố”.
69
4.6 Sơ đồ tuần tự 4.6.1 Đăng nhập
70
4.6.2 Đăng ký
71
CHƯƠNG 5. KẾT LUẬN 5.1. Đánh giá
Thuận lợi:
- Giảng viên hướng dẫn tận tình hỗ trợ và định hướng nhóm nghiên cứu
và thực hiện đề tài.
- Các tài liệu về ngôn ngữ, công cụ thực hiện được chia sẻ nhiều trên
mạng.
- Vận dụng được các kiến thức, quy trình phát triển đã được học.
- Cộng đồng lập trình Flutter ở Việt Nam phát triển với các bài viết
hướng dẫn có tính ứng dụng cao.
- Tài liệu dồi dào, nguồn tham khảo đa dạng
Khó khăn:
- Vấn đề tìm hiểu và hiện thực về các cơng nghệ Flutter, MongoDB tốn
thời gian.
- Tìm hiểu về Web Crawler và Web Scraping mất cơng, do có khá
nhiều thư viện, cơng cụ, khiến việc lựa chọn trở nên khó khăn
5.2 Kết quả đạt được 5.2.1 Ưu điểm
- Hoàn thành yêu cầu đặt ra ban đầu
- Cơ sở dữ liệu khá tối ưu, việc truy vấn diễn ra khá nhanh
- Giao diện đơn giản, bố cục hợp lý, người dùng dễ dàng theo tác trên ứng
dụng.
- Tốc độ phản hồi các thao tác nhanh, tối ưu hóa năng suất của người dùng.
- Sinh viên thực hiện đã nắm được cách thức làm một ứng dụng di động.
- Sinh viên nắm được các công nghệ phổ biến hiện nay như: Flutter,
MongoDB, Firebase, Nodejs, Python…
72
5.2.2 Nhược điểm
- Cịn hạn chế một số tính năng
- Tối ưu code chưa tốt nên tốc độ tương tác trong ứng dụng còn chậm
5.2.3 Hướng phát triển
- Sử dụng ranking nhằm sắp xếp thứ tự tin tức sẽ hiển thị cho người dùng
- Tối ưu hóa code để tăng tốc độ tương tác
- Tối ưu hóa CSDL hợp lý hơn
- Xây dựng chức năng gợi ý tin tức
- Xây dựng chức năng tìm kiếm tin tức
73
CHƯƠNG 6. TÀI LIỆU THAM KHẢO
[
[1] Vu Viet Anh, "VIBLO," 21 7 2019. [Online]. Available:
https://viblo.asia/p/tim-hieu-ve-ngon-ngu-dart-phan-i-bJzKmykwK9N. [Accessed 7 10 2020].
[
[2] "stackoverflow.com," 1 12 2021. [Online]. Available:
https://stackoverflow.com/. [Accessed 1 12 2021]. [
[3] Audrey, "viblo.asia," 24 May 2017. [Online]. Available:
https://viblo.asia/p/tim-hieu-ve-mongodb-4P856ajGlY3. [Accessed 1 10 2021].
[
[4] A. Bajo, "Scrapingbee," Scrapingbee, 11 December 2020. [Online].
Available: https://www.scrapingbee.com/blog/crawling-python/. [Accessed 1 11 2021].
[
[5] D. Garage, "youtube," Digital Garage, 14 January 2019. [Online].
Available: https://www.youtube.com/watch?v=3CgJRdJetiw&t=3s. [Accessed 1 12 2021].
[
[6] P. S. Humagain, "dev.to," dev.to, 16 Dec 2019. [Online]. Available:
https://dev.to/paurakhsharma/flask-rest-api-part-1-using-mongodb-with-flask- 3g7d. [Accessed 10 11 2021].
74 [
[7] Y. Ida, "brightdata.com," 30 November 2020. [Online]. Available:
https://brightdata.com/blog/guest-post/difference-between-web-crawling-and- webscraping#:~:text=Crawling%20is%20essentially%20what%20search%20 engines%20do.&text=The%20web%20crawling%20process%20usually,targe t%20data%20from%20web%20pages.. [Accessed 1 10 2021].
[
[8] F. Marketing, "ironhackvietnam.edu.vn," 6 July 2021. [Online].
Available: https://ironhackvietnam.edu.vn/python-la-gi/. [Accessed 1 10 2021].
[
[9] N. V. Minh, "viblo.asia," 17 January 2019. [Online]. Available:
https://viblo.asia/p/trien-khai-web-tren-heroku-djeZ1RWglWz. [Accessed 1 12 2021].
[
[10] A. Pettegree, "Introduction: All the News that's Fit to Tell," in The
Invention of News: How the World Came to Know About Itself, London, Yale
University Press, 2014, pp. 7-20. [
[11] C. Schafer, "youtube," Corey Schafer, 9 November 2017. [Online].
Available: https://www.youtube.com/watch?v=ng2o98k983k. [Accessed 1 11 2021].
[
[12] TopDev, "TopDev.vn," 1 1 2018. [Online]. Available: