Báo cáo phân tích xây dựng website dành cho bé theo chuẩn trường đại học khoa học huế

ĐẠI HỌC HUẾ TRƯỜNG ĐẠI HỌC KHOA HỌC KHOA CÔNG NGHỆ THÔNG TIN KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC NGÀNH CÔNG NGHỆ THÔNG TIN Đề tài XÂY DỰNG WEBSITE QUIZ CHO BÉ Sinh viên thực hiện HÀ XUÂN NGHĨA Khoá K42 Giáo.

Mục tiêu, phạm vi nghiên cứu

Mục tiêu

Đề tài "Xây dựng website Quiz cho bé" nhằm mục đích phát triển một ứng dụng hỗ trợ phụ huynh trong việc giảng dạy cho trẻ em ở độ tuổi mầm non và tiểu học, giúp việc học trở nên thuận tiện và dễ dàng hơn.

Phạm vi nghiên cứu

Các module chỉ được xây dụng ở mức cơ bản nhằm chỉ chứng minh tính khả thi của ứng dụng.

Cấu trúc của khoá luận

Với mục tiêu và phạm vi nghiên cứu của đề tài được chỉ ra ở trên, nội dung của khoá luận sẽ gồm các phần sau đây:

- Chương 1: Tổng quan và phần tích chức năng của đề tài “Website Quiz cho bé”.

- Chương 2: Thiết kế hệ thống ứng dụng “Website Quiz cho bé”.

- Chương 3: Cài đặt và phát triển ứng dụng “Website Quiz cho bé”.

- Đăng nhập: Cho phép người dùng đăng nhập bằng tài khoản và mật khẩu.

- Đăng ký: Cho phép người dùng tạo mới tài khoản.

- Đăng xuất: Cho phép người dùng đăng xuất ra khỏi website.

- Cập nhật thông tin cá nhân: cho phép người dùng cập nhật lại 1 số thông tin có thể thay đổi.

- Tìm kiếm Quiz: Cho phép người dùng tìm kiếm Quiz theo tên.

- Làm bài Quiz: Người dùng làm Quiz theo các bài có sẵn trên website:

+ Xem câu hỏi và chọn câu trả lời + Nghe câu hỏi và chọn câu trả lời + Làm các bài Quiz về luyện phát âm tiếng Anh

- Xem các bài Quiz gợi ý.

- Xem tất cả các bài Quiz.

- Lưu bài Quiz đã làm với điểm số.

- Xem lại các bài Quiz đã làm.

- Làm lại và cập nhật lại điểm số với các bài Quiz đã làm.

* Người quản lý website (Admin):

- Đăng nhập: Cho phép Admin đăng nhập bằng tài khoản và mật khẩu.

- Đăng xuất: Cho phép Admin đăng xuất ra khỏi website.

- Quản lý Account: Cho phép Admin quản lý Account với các thao tác: xem, thêm, sửa, xóa, tìm kiếm.

- Quản lý Quiz: Cho phép Admin quản lý Quiz với các thao tác: xem, thêm, sửa, xóa, tìm kiếm.

- Quản lý Question: Cho phép Admin quản lý Question với các thao tác:xem, thêm, sửa, xóa, tìm kiếm.

Biểu đề Use case của hệ thống (Xem hình 1.1):

Hình 1.1 Sơ đồ Use Case hoạt động tổng quát của ứng dụng. Đặc tả Use case:

- Tên Use Case: Use Case Hoạt động tổng quát của ứng dụng:

- Mô tả ngắn gọn: Use Case Tổng quát của ứng dụng mô tả các chức năng chính của hệ thống dành cho Người dùng.

 Người dùng phải đăng nhập, hoặc đăng ký nếu như chưa có tài khoản.

 Người dùng có thể reset lại mật khẩu nếu như quên mật khẩu.

 Người dùng có thể xem các cái đánh giá.

 Người dùng có thể tạo mới bài đánh giá.

 Người dùng có thể cập nhật profile.

 Người dùng có thể nhắn tin, kết bạn.

 Người dùng có thể tìm kiếm.

 Người dùng có thể lọc bài đánh giá.

 Người dùng có thể thêm, xoá bookmark.

- Các use case của ứng dụng ( Xem bảng 1.1).

STT Use Case Mục đích

1 Đăng nhập Đăng nhập vào ứng dụng.

2 Đăng xuất Đăng xuất khỏi ứng dụng.

Thêm mới bài đánh giá vào danh sách bookmark.

Xoá bài đánh giá khỏi danh sách bookmark.

6 Tìm kiếm Tìm kiếm bài đánh giá dự theo tên địa điểm.

7 Lọc bài post Lọc bài đánh giá dựa theo nhưng option mà người dùng chọn.

8 Xem bài Hiển thị chi tiết bài đánh giá.

11 Thay đổi ảnh đại diện

Thay đổi ảnh đại diện của người dùng.

Thay đổi ảnh bìa của người dùng.

13 Hiển thị các bài đăng của mình

Hiển thị danh sách các hình ảnh của người dùng đó.

14 Nhắn tin Nhắn tin với bạn bè.

15 Kết bạn Kết bạn với bạn bè thông qua email.

Chấp nhận yêu cầu kết bạn.

Bảng 1.1 Các use case của hệ thống.

 Người dùng đăng ký tài khoản.

 Người dùng đăng nhập vào hệ thống.

 Người dùng xem danh sách các bài đánh giá, xem chi tiết các bài đánh giá

 Ngươì dùng thêm vào danh sách bookmark, xoá khỏi danh sách bookmark.

 Người dùng tạo mới bài đánh giá.

 Người dùng xem danh sách các hình ảnh của bài nhưng bài đánh giá của người dùng.

 Người dùng cập nhật hình đại diện, hình nền.

 Người dùng vào danh sách bạn bè, kết bạn, nhắn tin với bạn bè.

 Người dùng vào danh sách yêu cầu kết bạn, đồng ý yêu cầu kết bạn.

 Người dùng đăng xuất khỏi hệ thống.

 Tại màn hình tìm kiếm, người dùng có thể sử dụng bộ lọc đề lọc bài đánh giá.

CHƯƠNG 2: THIẾT KẾ HỆ THỐNG 2.1 Lựa chọn công nghệ

Flutter is Google's UI framework designed for creating high-quality, cross-platform interfaces for iOS, Android, web, and desktop applications in a short time frame It was officially launched by Google at the Flutter Live event in December 2018.

Flutter hoàn toàn miễn phí và cũng là mã nguồn mở.

Flutter, được phát triển bởi Google, sử dụng ngôn ngữ lập trình Dart, một ngôn ngữ thuần OOP Dart được ứng dụng rộng rãi trong việc xây dựng các ứng dụng cho web, server, desktop và thiết bị di động.

2.1.1.2 Nhưng tính năng nổi bật của Flutter

Flutter có những tính năng nổi bật như sau:

- Mạnh về hiệu ứng, hiệu suất ứng dụng cao.

Flutter cho phép phát triển ứng dụng nhanh chóng nhờ tính năng hot reload, giúp bạn dễ dàng thử nghiệm, xây dựng giao diện người dùng, thêm tính năng và sửa lỗi hiệu quả hơn Trải nghiệm tải lại mà không mất trạng thái trên emulator, simulator và thiết bị iOS cũng như Android mang lại sự tiện lợi tối đa cho lập trình viên.

Flutter offers an expressive and flexible UI that enhances user satisfaction through its visually appealing built-in widgets, designed in accordance with Material Design for Android and Cupertino for iOS This adaptability ensures that the interface is seamlessly tailored to the respective platform, providing a cohesive user experience.

Flutter widgets leverage the unique features of various platforms, such as scrolling, navigation, icons, and fonts, to deliver optimal native performance.

Firebase là dịch vụ cơ sở dữ liệu đám mây mạnh mẽ từ Google, cung cấp tính năng bảo mật cao và hỗ trợ cả Android lẫn iOS Với tính đa năng và hiệu suất vượt trội, Firebase trở thành lựa chọn hàng đầu của nhiều lập trình viên trong việc phát triển ứng dụng cho hàng triệu người dùng toàn cầu.

2.1.2.2 Ưu điểm và hạn chế của Firebase

- Ưu điểm khi dùng Firebase:

 Tạo tài khoản và sử dụng dễ dàng.

 Tốc độ phát triển nhanh.

 Nhiều dịch vụ trong một nền tảng.

 Được cung cấp bơi Google.

 Tập trung vào phát triển giao diện người dùng.

 Firebase không có mát chủ.

 Tạo lưu lượng truy cập.

- Hạn chế khi dùng Firebase.

 Không phải là mã nguồn mở.

 Người dùng không có quyền truy cập mã nguồn.

 Firebase không hoạt động ở nhiều quốc gia.

 Chỉ hoạt động với Cơ sở dữ liệu NoSQL.

 Tốc độ truy vấn chậm.

 Không phải tất cả các dịch vụ của Firebase đều miễn phí.

 Firebase khá đắt và giá không ổn định.

 Chỉ chạy trên Google Cloud.

2.2 Thiết kế chức năng của hệ thống

Mô tả chức năng: Người dùng đăng nhập ứng dụng bằng email và mật khẩu.

Hình 2.1 là sơ đồ tuần tự thể hiện chức năng đăng nhập của người dùng.

Hình 2.2 Sơ đồ tuần tự thể hiện chức năng đăng nhập của người dùng.

Mô tả chức năng: Người dùng đăng ký tài khoản mới với email, số điện thoại, mật khẩu.

Hình 2.2 là sơ đồ tuần tự thể hiện chức năng đăng ký tài khoản người dùng.

Hình 2.3 Sơ đồ tuần tự thể hiện chức năng đăng ký tài khoản người dùng.

Mô tả chức năng: Người dùng reset mật khẩu.

Hình 2.3 là sơ đồ tuần tử thể hiện chức năng reset mật khẩu nếu người dùng quên mật khẩu.

Hình 2.4 Sơ đồ tuần tự thể hiện chức năng reset mật khẩu.

2.2.4 Tạo mới bài đánh giá

Mô tả chức năng: Người dùng tạo bài viết đánh giá mới.

Hình 2.4 là sơ đồ tuần tự thể hiện chức năng thêm mới bài đánh giá.

Hình 2.5 Sơ đồ tuần tự thể hiện chức năng thêm mới bài đánh giá.

2.2.5 Hiển thị bài đánh giá

Chức năng hiển thị các bài đánh giá cho tất cả người dùng cho phép người dùng tiếp cận thông tin phản hồi từ cộng đồng Hình 2.5 minh họa sơ đồ tuần tự của chức năng này, giúp người dùng dễ dàng theo dõi và tương tác với các đánh giá.

Hình 2.6 Sơ đồ tuần tự thể hiện chức năng hiển thị các bài đánh giá.

Mô tả chức năng: Người dùng có thể thêm hoặc xoá bài viết ra khỏi danh sách bookmark.

Hình 2.6 là sơ đồ tuần tự thể hiện chức năng thêm, xoá bookmark.

Hình 2.7 Sơ đồ tuần tự thể hiện chức năng thêm, xoá bookmark.

Mô tả chức nang: Người dùng tìm kiếm bài đánh giá thông qua nội dung tìm kiếm.

Hình 2.7 là sơ đồ tuần tự thể hiện chức năng tìm kiếm bài đánh giá.

Hình 2.8 Sơ đồ tuần tự thể hiện chức năng tìm kiếm bài đánh giá.

Mô tả chức năng: Người dùng lọc bài viết thông qua những option có sẳn trong ứng dụng.

Hình 2.8 là sơ đồ tuần tự thể hiện chức năng lọc bài đánh giá.

Hình 2.9 Sơ đồ tuần tự thể hiện chức năng lọc bài đánh giá.

Mô tả chức năng: Người dùng cập nhật lại ảnh đại diện.

Hình 2.9 là sơ đồ tuần tự thể hiện chức năng cập nhật ảnh đại diện.

Hình 2.10 Sơ đồ tuần tự thể hiện chức năng cập nhật ảnh đại diện.

Mô tả chức năng: Người dùng cập nhật lại ảnh bìa.

Hình 2.10 là sơ đồ tuần tự thể hiện chức năng cập nhật ảnh bìa người dùng.

Hình 2.11 Sơ đồ tuần tự thể hiện chức năng cập nhật ảnh bìa.

2.2.11 Hiển thị chi tiết bài đánh giá

Mô tả chức năng: Hiển thị chi tiết bài đánh giá.

Hình 2.11 là sơ đồ tuần tự thể hiện chức năng xem chi tiết bài đánh giá.

Hình 2.12 Sơ đồ tuần tự thể hiện chức năng xem chi tiết bài đánh giá.

2.2.12 Hiển thị danh sách bookmark

Mô tả chức năng: Hiển thị danh sách bookmark của người dùng.

Hình 2.12 là sơ đồ tuần tự thể hiện chức năng hiển thị danh sách bookmark.

Mô tả chức năng: Người dùng kết bạn thông qua email. Hình 2.13 là sơ đồ tuần tự thể hiện chức năng thêm bạn bè.

Hình 2.14 Sơ đồ tuần tự thể hiện chức năng thêm mới bạn bè.

Mô tả chức năng: Hiển thị danh sách yêu cầu kết bạn để người dùng đồng ý kết bạn hoặc không.

Hình 2.14 là sơ đồ tuần tự thể hiện chức năng đồng ý kết bạn.

Hình 2.15 Sơ đồ tuần tự thể hiện chức năng đồng ý kết bạn.

2.2.15 Nhắn tin với bạn bè

Mô tả chức năng: Cho phép những người dùng khác đã kết bạn với nhau có thể nhắn tin với nhau.

Hình 2.15 là sơ đồ tuần tự thể hiện chức năng nhắn tin với bạn bè.

Hình 2.16 Sơ đồ tuần tự thể hiện chức năng nhắn tin với bạn bè.

2.2.16 Cập nhật view của bài đánh giá

Mô tả chức năng: Cập nhật số lượng view của bài đánh giá đó.

Hình 2.16 là sơ đồ tuần tự thể hiện chức năng cập nhật lại số lượng view.

Hình 2.17 Sơ đồ tuần tự thể hiện chức năng cập nhật view.

CHƯƠNG 3: CÀI ĐẶT VÀ PHÁT TRIỂN ỨNG DỤNG 3.1 Màn hình splash

Hình 3.1 là giao diện màn hình splash.

Hình 3.18 Màn hình Splash. Đặc tả chi tiết màn hình (Xem bảng 3.1 ):

Login Button Nhấn nút để chuyển sang màn hình đăng nhập

Sign Up Button Nhấn nút để chuyển sang màn hình đăng ký

Mô tả Thành công Thất bại

Khi người dùng nhấn nút "Đăng Nhập", hệ thống sẽ xác định xem người dùng đã đăng nhập trước đó hay chưa Nếu đã có tài khoản, hệ thống sẽ tiến hành kiểm tra thông tin tài khoản đó.

Kiểm tra thành công thì sẽ chuyển sang màn hình trang chủ.

Kiểm tra không thành công thì sẽ chuyển sang màn hình Đăng nhập để người dùng đăng nhập vào hệ thống.

Người dùng nhấn nút “Sign Up”

Chuyển sang màn hình Đăng ký.

Bảng 3.2 Bảng đặc tả chi tiết màn hình splash.

Hình 3.2 là giao diện màn hình đăng nhập.

Hình 3.19 Màn hình Login. Đặc tả chi tiết màn hình (Xem bảng 3.2):

Email TextFeild Trường để nhập email đăng nhập

Password TextFeild Trường để nhập mật khẩu đăng nhâp.

Login Button Nhấn nút để đăng nhập vào ứng dụng.

Button Nhấn nút sẽ chuyển sang màn hình reset mật khẩu.

Button Nhấn nút sẽ chuyển sang màn hình đăng ký.

Nhập Email Người dùng nhập vào email đăng nhập.

Hiển thị nội dung đã nhập.

Người dùng nhập vào mật khẩu đăng nhập.

Sau khi người dùng nhấn vào nút

“Login” hệ thống sẽ kiểm tra tài khoản tương ứng với email và mật khẩu đã nhập

Chuyển sang màn hình trang chủ.

Khi ô nhập email không hợp lệ thì sẽ hiển thị thông báo email không không hợp lệ.

Người dùng nhấn vào nút “Forgot password”

Chuyển sang màn hình Reset mật khẩu

Người dùng nhấn vào nút “Create a new account”

Chuyển sang màn hình Đăng ký tài khoản

Bảng 3.3 Bảng đặc tả chi tiết màn hình đăng nhập.

Hình 3.3 là giao diện đăng ký tài khoản mới. Đặc tả chi tiết màn hình (Xem bản 3.3):

Name TextFeild Trường để nhập tên người dùng đăng nhập

Email TextFeild Trường để nhập email đăng nhâp.

Password TextFeild Trường để nhập mật khẩu đăng nhập.

TextField Trường để xác nhận lại mật khẩu.

Sign Up Button Nhấn nút sẽ đăng ký tài khoản mới.

Login Button Nhấn nút sẽ trờ về màn hình

Button Nhấn nút sẽ trở về màn hình

Nhập Name Người dùng nhập tên.

Hiển thị nội dung đã nhập

Nhập Email Người dùng nhập email.

Người dùng nhập mật khẩu.

Người dùng nhập lại mật khẩu để

Không thông báo lỗi. kiểm tra thông tin đăng ký. thị thông báo email không hợp lên.

Khi ô Password không hợp lệ thì hiển thị thông báo mật khẩu không hợp lệ.

Khi ô Confirm password không trùng với Password thì hiển thị thông báo Confirm password và password không trùng nhau.

Người dùng nhấn vào nút

Chuyển sang màn hình Đăng nhập.

Nhấn vào nút Người dùng nhấn vào nút

Bảng 3.4 Bảng đặc tả chi tiết màn hình đăng ký tài khoản

3.4 Màn hình Reset mật khẩu

Hình 3.4 là màn hình reset mật khẩu.

Hình 3.21 Màn hình reset mật khẩu. Đặc tả chi tiết màn hình (Xem bảng 3.4):

Email TextFeild Trường để nhập email người dùng.

Send Button Nhấn nút để hệ thống gửi link reset mật khẩu đến email đó.

Button Nhấn nút sẽ trở về màn hình Đăng nhập.

Nhập Email Người dùng nhập email

Sau khi người dùng nhấn nút

“Send” hệ thống sẽ gửi link reset mật khẩu đến email mà người dùng đã nhập.

Hiển thị thông báo kiểm tra email.

Nhấn nút Người dùng nhấn vào button

Chuyển sang màn hình Đăng nhập

Bảng 3.5 Bảng đặc tả chi tiết màn hình Reset mật khẩu.

Hình 3.5 là màn hình trang chủ.

Hình 3.22 Màn hình trang chủ. Đặc tả chi tiết màn hình (Xem bản 3.5).

Button Nhấn để hiển thị Drawer.

Show post Button Nhấn đề chuyển sang màn hình hiển thị danh sách bài đánh giá.

Button Nhấn để hiện thị danh sách bài đánh giá có nhiều lượt view nhất.

List bài đánh giá phổ biến

ListView Hiển thị bài đánh giá.

Chat Button Nhấn để chuyển sang màn hình nhắn tin.

Log Out Button Nhấn để đăng xuất ra khỏi ứng dụng.

Button Nhấn để chuyển sang màn hình category.

Button Nhấn để chuyển sang màn hình tạo mới bài đánh giá.

Button Nhấn để chuyển sang màn hình hiển thị danh sách bookark

Button Nhấn để chuyển sang màn hình trang cá nhân.

Người dùng nhấn vào button

Chuyển sang màn hình hiển thị danh sách bài đánh giá.

Chuyển sang màn hình hiển thị dánh sách bài đánh giá phổ biến.

Chuyển sang màn hình chat

Sau khi người dùng nhấn nút “Log

Nhấn nút Người dùng nhấn vào nút

Chuyển sang màn hình cateogry

Chuyển sang màn hình tạo mới bài đánh giá.

Chuyển sang màn hình hiển thị danh sách bookmark

Nhấn nút Người dùng Chuyển sang Không

Bảng 3.6 Bảng đặc tả chi tiết màn hình Trang chủ.

Hình 3.6 là màn hình category.

Hình 3.23 Màn hình group. Đặc tả chi tiết màn hình (Xem bảng 3.6):

Nhấn nút để chọn quốc gia.

Search TextField Nhập nội dung tìm kiếm.

List thể loại bài đánh giá

ListView Nhấn vào item listView để lọc bài đánh giá.

ListView Hiển thị danh sách bài đánh giá.

Sau khi người dùng nhấn vào button, người dùng chọn quốc gia mà hệ thống hiển thị ra

Hiển thị danh sách có quốc gia ở quốc gia mà người dùng đã chọn

Nếu không tìm thấy bài đánh giá thì hiển thị danh sách bài đánh giá rỗng.

Tìm kiếm bài đánh giá

Người dùng nhập nội dung tìm kiếm vào ô tìm kiếm.

Hiển thị danh sách bài đánh giá theo nội dung tìm kiếm.

Nếu không tìm thấy thì hiển thị danh sách bài đánh giá rỗng.

Nhấn vào item thể loại

Sau khi người dùng nhấn vào item thể loại.

Hiển thị danh sách bài đánh giá theo thể

Nếu không tìm thấy thì hiển thị

Bảng 3.7 Bảng đặc tả chi tiết màn hình group.

Hình 3.7 là màn hình bookmark.

Hình 3.24 Màn hình Bookmark. Đặc tả chi tiết màn hình (Xem bảng 3.7):

Xem chi tiết bài đánh giá

Sau khi người dùng nhấn vào item bài đánh giá.

Chuyển đến màn hình hiển thị danh sách

Bảng 3.8 Đặc tả chi tiết màn hình Bookmark.

Hình 3.8 là màn hình trang cá nhân.

Hình 3.25 Màn hình trang cá nhân. Đặc tả chi tiết màn hình ( Xem bảng 3.8):

Button Nhấn nút để cập nhật ảnh bìa

Button Nhấn nút để cập nhật ảnh đại diện.

Friends Button Nhấn vào để hiển thị danh sách bạn bè.

Friend requests Button Nhấn vào để hiển thị danh sách yêu cầu kết bạn.

GridView Hiển thị danh sách ảnh mà người dùng đã đăng.

Take photo Button Nhấn vào để thực hiện chụp ảnh.

Button Nhấn vào để thực hiện chọn ảnh từ thư viện.

Cancel Button Nhấn vào để tắt menu popup.

(Yêu cầu cấp quyền camera)

Menu PopUp Hiển thị ra popup để người dùng cho phép/từ chối cấp quyền.

(Yêu cầu cấp quyền truy cập bộ nhớ)

Menu PopUp Hiển thị ra popup để người dùng cho phép/từ chối cấp quyền

Khi người dùng nhấn nút "Chụp Ảnh", nếu chưa cấp quyền cho ứng dụng, hệ thống sẽ hiển thị popup yêu cầu quyền truy cập vào camera.

Sau khi người dùng cấp quyền, người dùng đó sẽ chụp ảnh và cập nhật ảnh bìa hoặc ảnh đại diện.

Trờ về màn hình trang cá nhân và hiển thị ảnh đại diện hoặc ảnh bìa

Chuyển sang màn hình hiển thị danh sách bạn bè.

Nhấn vào button “Friend requests”

Chuyển sang màn hình hiển thị danh sách yêu cầu kết bạn.

Nhấn vào Người dùng Tắt Không

Bảng 3.9 Đặc tả chi tiết màn hình Profile.

3.9 Màn hình tạo mới bài đánh giá

Hình 3.9 là màn hình tạo mới bài dánh giá.

Hình 3.26 Màn hình thêm mới bài đánh giá. Đặc tả chi tiết màn hình (Xem hình 3.9):

Nhấn nút để chọn thể loại.

Button Nhấn để chọn ảnh bài đánh giá.

Place TextFeild Nhập vào địa điểm của bài viết.

About Photo TextFeild Nhập vào nội dung của bài đánh giá.

Share Button Nhấn vào để chia sẽ bài đánh giá.

Take Photo Button Nhấn vào để chụp ảnh.

Button Nhấn vào để chọn ảnh.

Cancel Button Nhấn vào để tắt PopUp.

Sau khi người dùng nhấn vào button

“Country” thì sẽ chọn quốc gia của bài đăng đó.

Hiển thị tên quốc gia đó.

Sau khi người dùng nhấn vào button.

Sau khi người dùng nhấn vào button thì hệ thống sẽ mở giao diện camera lên để người dùng chụp ảnh.

Nếu người dùng chọn ảnh đã chụp, hiển thị ảnh đã chụp ở button “Choose Picture”.

Nếu người dùng không chọn ảnh đã chụp. Trở về màn hình tạo mới bài đăng.

Sau khi người dùng nhấn vào button thì hệ thống sẽ mở giao diện thư viện ảnh của điện thoại.

Nếu người dùng chọn ảnh thì sẽ hiển thị ảnh đã chọn ở button “Choose Picture”.

Nếu người dùng không chọn ảnh đã chụp. Trở về màn hình tạo bài đăng.

Nhập Place Người dùng nhập vào place

Người dùng nhập vào about photo

“Share” hệ thống sẽ tiến hành thêm mới bài đánh giá đó.

Xoá toàn bộ nội dung mà người dùng đã nhập trước đó và thông báo thành công.

Bảng 3.10 Đặc tả chi tiết màn hình Thêm bài đánh giá.

3.10 Màn hình chi tiết bài đánh giá

Hình 3.10 là màn hình chi tiết bài đánh giá.

Hình 3.27 Màn hình chi tiết bài đánh giá. Đặc tả chi tiết màn hình (Xem hình 3.10):

Button Nhấn nút để trở về

Button Nhấn để thêm vào danh sách bookmark.

ImageView Hiển thị số lượt xem của bài đánh giá đó.

Trở về màn hình trước đó.

Thêm bai đánh giá đó vào danh sách bookmark và thay đổi thành

Nếu không thành công thì giữ nguyễn hình ảnh cũ

Bảng 3.11 Đặc tả chi tiết màn hình chi tiết bài đánh giá.

3.11 Màn hình danh sách bạn bè

Hình 3.11 là màn hình hiển thị danh sách bạn bè.

Hình 3.28 Màn hình hiển thị danh sách bạn bè. Đặc tả chi tiết màn hình (Xem hình 3.11):

Button Nhấn nút để trở về.

Add friend Button Nhấn nút để gửi yêu cầu kết bạn.

Email TextField Trường để nhập email người dùng khác.

Chat Button Nhấn nút để chuyển sang màn hình chat.

List bạn bè ListView Danh sách bạn bè.

Nhấn nút Người dùng nhất nút

Trở về trang cá nhân.

Nhập email Người dùng nhập email

Không thông báo lỗi. Nhấn nút

Sau khi người dùng nhất nút “Add friend” hệ thống sẽ kiểm tra email và gửi yêu cầu kết bạn đến email đó.

Hiển thị thông báo thành công.

Hiển thị thông báo lỗi.

Nhấn nút Người dùng Chuyển sang

3.12 Màn hình danh sách yêu cầu kết bạn

Hình 3.12 là màn hình hiển thị danh sách yêu cầu kết bạn.

Hình 3.29 Màn hình hiển thị danh sách yêu cầu kết bạn. Đặc tả chi tiết màn hình (Xem hình 3.12):

Accept Button Nhấn để đồng ý yêu cầu kết bạn.

List yêu cầu kết bạn

ListView Danh sách yêu cầu kết bạn.

Người dùng nhấn nút “Accept”

Hiển thị thông báo thành công và xoá item đó khỏi danh sách yêu cầu kết bạn.

Bảng 3.13 Bảng đặc tả chi tiết màn hình hiển thị danh sách yêu cầu kết bạn.

Hình 3.30 Màn hình nhắn tin. Đặc tả chi tiết màn hình (Xem hình 3.13):

Button Nhấn để gửi tin nhắn.

TextField Trường nhập nội dung tin nhắn.

List tin nhắn ListView Danh sách tin nhắn.

Nhấn nút Người dùng nhấn nút

Hiển thị tin nhắn mới lên danh sách tin nhắn

Nhập nội dung tin nhắn.

Người dùng nhập nội dung tin nhắn

Hiển thị nội dung tin nhắn ở trường nhập nội dung.

Bảng 3.14 Bảng đặc tả chi tiết màn hình nhắn tin.

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Sau khi hoàn thành khoá luận đã mang lại một số kết quả sau:

- Xây dựng được phần mềm “Xây dựng ứng dụng di động đánh giá, chia sẽ địa điểm du lịch” bằng Flutter Framework.

- Tìm hiểu và biết cách sử dụng Firebase.

Do thời gian thực hiện khóa luận có hạn, ứng dụng chia sẻ và đánh giá địa điểm du lịch đã hoàn thành nhưng vẫn còn nhiều thiếu sót Em mong muốn phát triển thêm dự án này để cải thiện và nâng cao chất lượng ứng dụng.

- Phát triển thêm chức năng chia sẻ, like, comment.

- Phát triển một số cái giao diện cho ứng dụng để ứng dụng đẹp mắt, thu hút hơn.

Đưa ứng dụng vào thực tế là bước quan trọng trong quá trình phát triển dự án Tôi mong nhận được đánh giá và góp ý từ các thầy cô để cải thiện ứng dụng này Những ý kiến đóng góp sẽ giúp tôi tích lũy kinh nghiệm và phát triển không chỉ ứng dụng hiện tại mà còn nhiều ứng dụng khác, với mục tiêu phục vụ cộng đồng.

Em xin chân thành cảm ơn.

Phân tích chức năng hệ thống

THIẾT KẾ HỆ THỐNG

Lựa chọn công nghệ

Flutter is Google's UI framework designed for creating high-quality, cross-platform interfaces for iOS, Android, web, and desktop applications in a short time frame Officially launched in December 2018 during the Flutter Live event, it offers developers a powerful tool for efficient app development.

Flutter hoàn toàn miễn phí và cũng là mã nguồn mở.

Flutter, được phát triển bởi Google, sử dụng ngôn ngữ lập trình Dart, một ngôn ngữ thuần OOP Dart được ứng dụng rộng rãi trong việc xây dựng các ứng dụng cho web, server, desktop và thiết bị di động.

2.1.1.2 Nhưng tính năng nổi bật của Flutter

Flutter có những tính năng nổi bật như sau:

- Mạnh về hiệu ứng, hiệu suất ứng dụng cao.

Flutter hỗ trợ phát triển ứng dụng nhanh chóng với tính năng hot reload, cho phép bạn dễ dàng thử nghiệm, xây dựng giao diện người dùng, thêm tính năng và sửa lỗi hiệu quả hơn Bạn có thể tải lại ứng dụng mà không mất trạng thái trên emulator, simulator và thiết bị iOS cũng như Android.

Flutter offers an expressive and flexible user interface that delights users with its visually appealing built-in widgets, designed according to Material Design for Android and Cupertino for iOS This adaptability ensures that the UI is not only attractive but also platform-aware, providing a seamless experience across different operating systems.

Flutter widgets leverage the unique features of various platforms, such as scrolling, navigation, icons, and fonts, to deliver optimal native performance.

Firebase là dịch vụ cơ sở dữ liệu dựa trên nền tảng đám mây của Google, nổi bật với hệ thống máy chủ mạnh mẽ Với tính năng đa năng và bảo mật cao, Firebase hỗ trợ cả Android và iOS, lý do khiến nhiều lập trình viên lựa chọn nó làm nền tảng chính để phát triển ứng dụng cho hàng triệu người dùng toàn cầu.

2.1.2.2 Ưu điểm và hạn chế của Firebase

- Ưu điểm khi dùng Firebase:

 Tạo tài khoản và sử dụng dễ dàng.

 Tốc độ phát triển nhanh.

 Nhiều dịch vụ trong một nền tảng.

 Được cung cấp bơi Google.

 Tập trung vào phát triển giao diện người dùng.

 Firebase không có mát chủ.

 Tạo lưu lượng truy cập.

- Hạn chế khi dùng Firebase.

 Không phải là mã nguồn mở.

 Người dùng không có quyền truy cập mã nguồn.

 Firebase không hoạt động ở nhiều quốc gia.

 Chỉ hoạt động với Cơ sở dữ liệu NoSQL.

 Tốc độ truy vấn chậm.

 Không phải tất cả các dịch vụ của Firebase đều miễn phí.

 Firebase khá đắt và giá không ổn định.

 Chỉ chạy trên Google Cloud.

Thiết kế chức năng của hệ thống

Mô tả chức năng: Người dùng đăng nhập ứng dụng bằng email và mật khẩu.

Hình 2.1 là sơ đồ tuần tự thể hiện chức năng đăng nhập của người dùng.

Hình 2.2 Sơ đồ tuần tự thể hiện chức năng đăng nhập của người dùng.

Mô tả chức năng: Người dùng đăng ký tài khoản mới với email, số điện thoại, mật khẩu.

Hình 2.2 là sơ đồ tuần tự thể hiện chức năng đăng ký tài khoản người dùng.

Hình 2.3 Sơ đồ tuần tự thể hiện chức năng đăng ký tài khoản người dùng.

Mô tả chức năng: Người dùng reset mật khẩu.

Hình 2.3 là sơ đồ tuần tử thể hiện chức năng reset mật khẩu nếu người dùng quên mật khẩu.

Hình 2.4 Sơ đồ tuần tự thể hiện chức năng reset mật khẩu.

2.2.4 Tạo mới bài đánh giá

Mô tả chức năng: Người dùng tạo bài viết đánh giá mới.

Hình 2.4 là sơ đồ tuần tự thể hiện chức năng thêm mới bài đánh giá.

Hình 2.5 Sơ đồ tuần tự thể hiện chức năng thêm mới bài đánh giá.

2.2.5 Hiển thị bài đánh giá

Chức năng hiển thị bài đánh giá cho phép tất cả người dùng tiếp cận thông tin phản hồi từ người dùng khác Hình 2.5 minh họa sơ đồ tuần tự của chức năng này, giúp người dùng dễ dàng hiểu và tương tác với các đánh giá.