Đồ án xây dựng ứng dụng đặt phòng

ĐỒ ÁN SE121.N21.PMCL ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THƠNG TIN ĐỒ ÁN MƠN HỌC XÂY DỰNG ỨNG DỤNG ĐẶT PHỊNG GIẢNG VIÊN GIẢNG DẠY THS.THÁI THỤY HÀN UYỂN Thành viên nhóm: Trần Dư Gia Bảo – 20520409 Bùi Lương Hiếu – 20520994 TP HỒ CHÍ MINH, 2023 ĐỒ ÁN SE121.N21.PMCL LỜI CẢM ƠN Trước bước vào phần báo cáo đồ án, nhóm chúng em trân trọng gửi lời cảm ơn đến cô Thái Thụy Hàn Uyển tạo điều kiện cho chúng em có hội thực đồ án nhiệt tình góp ý, giúp đỡ chúng em lớp, cung cấp cho chúng em nhiều kiến thức kinh nghiệm hữu ích ngồi mảng lập trình di động Dù vậy, trình học tập, làm đồ án thời gian kiến thức có hạn nên nhóm em khơng thể tránh khỏi thiếu sót Nhóm em mong nhận thơng cảm, đóng góp xây dựng từ để nhóm em có thêm nhiều kiến thức có ích ngày hồn thiện Stelio Nhóm thực Trường Đại học Cơng nghệ Thơng tin, tháng năm 2023 ĐỒ ÁN SE121.N21.PMCL MỤC LỤC CHƯƠNG I GIỚI THIỆU ĐỀ TÀI 12 Giới thiệu chung: 12 Mục tiêu đề tài: 12 2.1 Lý thuyết: 12 2.2 Mục tiêu 13 Quá trình thực 13 Tổng quan chức 13 CHƯƠNG II CƠ SỞ LÝ THUYẾT React Native 15 1.1 Tổng quan lịch sử 15 1.2 Thành phần React Native 16 1.3 Một số đặc điểm bật 17 1.4 Ưu nhược điểm React Native: 18 1.4.1 Ưu điểm: 18 1.4.2 Nhược điểm: 19 Ngơn ngữ lập trình JavaScript 19 2.1 Tổng quan 19 2.2 Tại React Native chọn JavaScript? 20 Hệ quản trị sở liệu Firebase 21 3.1 Firebase gì? 21 3.2 Firebase Realtime database 21 3.3 Firebase Authentication 21 3.4 Firebase Hosting 21 3.5 Ưu điểm Firebase 22 3.6 Nhược điểm Firebase 22 CHƯƠNG III XÂY DỰNG HỆ THỐNG 15 Xây dựng kiến trúc hệ thống: 24 24 1.1 Công nghệ sử dụng: 24 1.2 Kiến trúc hệ thống: Mơ hình Client-Server: 24 1.3 Kiến trúc ứng dụng: Mơ hình MVC: 25 ĐỒ ÁN SE121.N21.PMCL 1.4 Mô tả thành phần hệ thống: 26 1.5 Sơ đồ Use case: 26 1.6 Mô tả Use case 28 1.7 Đặc tả use case 29 1.7.1 Đăng ký 29 1.7.2 Đăng nhập với email mật 31 1.7.3 Yêu thích sản phẩm 32 1.7.4 Tạo đơn hàng 33 1.7.5 Thêm mã giảm giá 34 1.7.6 Chọn phương thức toán 35 1.7.7 Thanh tốn 36 1.7.8 Tìm kiếm 37 1.7.9 Lọc 39 1.7.10 Sắp xếp 40 1.7.11 Xem đơn đặt phòng 41 1.7.12 Đánh giá homestay 42 1.7.13 Cài đặt cá nhân 44 1.7.14 Chỉnh sửa thông tin cá nhân 45 1.7.15 Đăng xuất 46 Mơ tả hình: 47 2.1 Màn hình đăng nhập: 47 2.2 Màn hình đăng ký: 49 2.3 Màn hình trang chủ: 51 2.4 Màn hình thơng báo: 52 2.5 Màn hình chi tiết Homestay: 54 2.6 Màn hình chọn ngày booking: 56 2.7 Màn hình đề xuất homestay: 58 2.8 Màn hình đặt nhanh Homestay: 59 2.9 Màn hình thêm Homestay vào danh sách Fast booking: 61 2.10 Màn hình ưu đãi: 63 2.11 Màn hình chi tiết ưu đãi: 64 ĐỒ ÁN SE121.N21.PMCL 2.12 Màn hình thơng tin tài khoản: 65 2.13 Màn hình homestay u thích: 67 Sơ đồ lớp: 68 Sơ đồ hoạt động: 69 4.1 Hoạt động đăng ký: 69 4.2 Hoạt động đặt phòng: 70 4.3 Hoạt động tìm kiếm sản phẩm: 71 CHƯƠNG IV KẾT LUẬN 72 Kết đạt được: 72 Ưu điểm: 72 Nhược điểm giải pháp: 72 TÀI LIỆU THAM KHẢO 73 ĐỒ ÁN SE121.N21.PMCL DANH MỤC HÌNH ẢNH CHƯƠNG I GIỚI THIỆU ĐỀ TÀI 12 Giới thiệu chung: 12 Mục tiêu đề tài: 12 2.1 Lý thuyết: 12 2.2 Mục tiêu 13 Quá trình thực 13 Tổng quan chức 13 CHƯƠNG II CƠ SỞ LÝ THUYẾT React Native 15 1.1 Tổng quan lịch sử 15 1.2 Thành phần React Native 16 1.3 Một số đặc điểm bật 17 1.4 Ưu nhược điểm React Native: 18 1.4.1 Ưu điểm: 18 1.4.2 Nhược điểm: 19 Ngơn ngữ lập trình JavaScript 19 2.1 Tổng quan 19 2.2 Tại React Native chọn JavaScript? 20 Hệ quản trị sở liệu Firebase 21 3.1 Firebase gì? 21 3.2 Firebase Realtime database 21 3.3 Firebase Authentication 21 3.4 Firebase Hosting 21 3.5 Ưu điểm Firebase 22 3.6 Nhược điểm Firebase 22 CHƯƠNG III XÂY DỰNG HỆ THỐNG 15 Xây dựng kiến trúc hệ thống: 24 24 1.1 Công nghệ sử dụng: 24 1.2 Kiến trúc hệ thống: Mơ hình Client-Server: 24 1.3 Kiến trúc ứng dụng: Mơ hình MVC: 25 ĐỒ ÁN SE121.N21.PMCL 1.4 Mô tả thành phần hệ thống: 26 1.5 Sơ đồ Use case: 26 1.6 Mô tả Use case 28 1.7 Đặc tả use case 29 1.7.1 Đăng ký 29 1.7.2 Đăng nhập với email mật 31 1.7.3 Yêu thích sản phẩm 32 1.7.4 Tạo đơn hàng 33 1.7.5 Thêm mã giảm giá 34 1.7.6 Chọn phương thức toán 35 1.7.7 Thanh tốn 36 1.7.8 Tìm kiếm 37 1.7.9 Lọc 39 1.7.10 Sắp xếp 40 1.7.11 Xem đơn đặt phòng 41 1.7.12 Đánh giá homestay 42 1.7.13 Cài đặt cá nhân 44 1.7.14 Chỉnh sửa thông tin cá nhân 45 1.7.15 Đăng xuất 46 Mơ tả hình: 47 2.1 Màn hình đăng nhập: 47 2.2 Màn hình đăng ký: 49 2.3 Màn hình trang chủ: 51 2.4 Màn hình thơng báo: 52 2.5 Màn hình chi tiết Homestay: 54 2.6 Màn hình chọn ngày booking: 56 2.7 Màn hình đề xuất homestay: 58 2.8 Màn hình đặt nhanh Homestay: 59 2.9 Màn hình thêm Homestay vào danh sách Fast booking: 61 2.10 Màn hình ưu đãi: 63 2.11 Màn hình chi tiết ưu đãi: 64 ĐỒ ÁN SE121.N21.PMCL 2.12 Màn hình thơng tin tài khoản: 65 2.13 Màn hình homestay u thích: 67 Sơ đồ lớp: 68 Sơ đồ hoạt động: 69 4.1 Hoạt động đăng ký: 69 4.2 Hoạt động đặt phòng: 70 4.3 Hoạt động đánh giá sản phẩm: Error! Bookmark not defined 4.4 Hoạt động tìm kiếm sản phẩm: 71 CHƯƠNG IV KẾT LUẬN 72 Kết đạt được: 72 Ưu điểm: 72 Nhược điểm giải pháp: 72 TÀI LIỆU THAM KHẢO 73 ĐỒ ÁN SE121.N21.PMCL DANH MỤC BẢNG CHƯƠNG I GIỚI THIỆU ĐỀ TÀI 12 Giới thiệu chung: 12 Mục tiêu đề tài: 12 2.1 Lý thuyết: 12 2.2 Mục tiêu 13 Quá trình thực 13 Tổng quan chức 13 CHƯƠNG II CƠ SỞ LÝ THUYẾT React Native 15 1.1 Tổng quan lịch sử 15 1.2 Thành phần React Native 16 1.3 Một số đặc điểm bật 17 1.4 Ưu nhược điểm React Native: 18 1.4.1 Ưu điểm: 18 1.4.2 Nhược điểm: 19 Ngơn ngữ lập trình JavaScript 19 2.1 Tổng quan 19 2.2 Tại React Native chọn JavaScript? 20 Hệ quản trị sở liệu Firebase 21 3.1 Firebase gì? 21 3.2 Firebase Realtime database 21 3.3 Firebase Authentication 21 3.4 Firebase Hosting 21 3.5 Ưu điểm Firebase 22 3.6 Nhược điểm Firebase 22 CHƯƠNG III XÂY DỰNG HỆ THỐNG 15 Xây dựng kiến trúc hệ thống: 24 24 1.1 Công nghệ sử dụng: 24 1.2 Kiến trúc hệ thống: Mơ hình Client-Server: 24 1.3 Kiến trúc ứng dụng: Mơ hình MVC: 25 ĐỒ ÁN SE121.N21.PMCL 1.4 Mô tả thành phần hệ thống: 26 1.5 Sơ đồ Use case: 26 1.6 Mô tả Use case 28 1.7 Đặc tả use case 29 1.7.1 Đăng ký 29 1.7.2 Đăng nhập với email mật 31 1.7.3 Yêu thích sản phẩm 32 1.7.4 Tạo đơn hàng 33 1.7.5 Thêm mã giảm giá 34 1.7.6 Chọn phương thức toán 35 1.7.7 Thanh tốn 36 1.7.8 Tìm kiếm 37 1.7.9 Lọc 39 1.7.10 Sắp xếp 40 1.7.11 Xem đơn đặt phòng 41 1.7.12 Đánh giá homestay 42 1.7.13 Cài đặt cá nhân 44 1.7.14 Chỉnh sửa thông tin cá nhân 45 1.7.15 Đăng xuất 46 Mơ tả hình: 47 2.1 Màn hình đăng nhập: 47 2.2 Màn hình đăng ký: 49 2.3 Màn hình trang chủ: 51 2.4 Màn hình thơng báo: 52 2.5 Màn hình chi tiết Homestay: 54 2.6 Màn hình chọn ngày booking: 56 2.7 Màn hình đề xuất homestay: 58 2.8 Màn hình đặt nhanh Homestay: 59 2.9 Màn hình thêm Homestay vào danh sách Fast booking: 61 2.10 Màn hình ưu đãi: 63 2.11 Màn hình chi tiết ưu đãi: 64 10 ĐỒ ÁN SE121.N21.PMCL - Phần đầu tiêu đề screen  - Phần top tab bar gồm tab Thiết kế tab bo tròn theo label làm tăng hiệu ứng kích thích so với tab bar thơng thường - Phần danh sách homestay đề xuất dạng card Mỗi item gạch với chiều dài độ dày phù hợp khung thông tin để dễ phân biệt khơng gây khó chịu cho người dùng - Phần cuối bottom navigation bar 2.8 Màn hình đặt nhanh Homestay: 59 ĐỒ ÁN SE121.N21.PMCL Hình 14 Màn hình đặt nhanh Homestay Màn hình có chức homestay khách hàng quan tâm, lưu lại homestay mà khách hàng click vào xem Gồm phần chính: - Phần gồm tiêu đề hình nút Button để thêm homestay vào danh 60 ĐỒ ÁN SE121.N21.PMCL sách fast booking - Phần 2: danh sách homestay, item gồm TextView tên homestay, loại phòng, giá tiền - Phần 3: bottom navigation gồm nút home, for you, fast booking, notification, account 2.9 Màn hình thêm Homestay vào danh sách Fast booking: 61 ĐỒ ÁN SE121.N21.PMCL Hình 15 Màn hình thêm Homestay vào danh sách FastBooking Màn hình BottomSheet có chức thêm homestay vào danh sách Fastbooking để thuận tiện đặt nhanh cho lần hình gồm phần chính: - Phần TextView tiêu đề hình - Phần TextInput để nhập tên Homestay người dùng muốn tìm kiếm để thêm vào Fastbooking Button Search để xác nhận sau người dùng nhập tên Homestay - Phần danh sách Homestay 62 ĐỒ ÁN SE121.N21.PMCL 2.10 Màn hình ưu đãi: Hình 16 Màn hình ưu đãi Màn hình ưu đãi gồm: - Header “Reward”: thể thông tin trang coupons - Danh sách coupons, coupons bao gồm: tên, số phần trăm giảm giá, thông tin thêm, button nhận coupon 63 ĐỒ ÁN - SE121.N21.PMCL Một Bottom Navigation gồm tab: home, for you, fast booking, rewards, account 2.11 Màn hình chi tiết ưu đãi: Hình 16 Màn hình thơng tin chi tiết ưu đãi Màn hình ưu đãi thể thơng tin chi tiết ưu đãi gồm quy định sử dụng, thời gian áp dụng, ưu đãi nhận gồm thành phần chính: 64 ĐỒ ÁN - SE121.N21.PMCL Hình ảnh ưu đãi lớn phía nút button Back để quay lại hình trước - TextView tên ưu đãi - List View thơng tin chi tiết ưu đãi 2.12 Màn hình thơng tin tài khoản: 65 ĐỒ ÁN SE121.N21.PMCL Hình 17.Màn hình thơng tin tài khoản Màn hình thơng tin tài khoản gồm: - Phần profile bao gồm: ảnh đại diện, tên người dùng, button show profile dẫn đến trang thông tin người dùng cụ thể - My journey: nơi thể lại khách sạn booking chất lượng dịch vụ, vị trí khách sạn - Phần setting bao gồm mục: Thơng tin người dùng, ngơn ngữ, bảo mật an tồn phần log out 66 ĐỒ ÁN SE121.N21.PMCL 2.13 Màn hình homestay u thích: Hình 18 Màn hình homestay u thích Màn hình Danh sách homestay u thích gồm: - Thanh header để hiển thị tên hình button Back để quay trở lại hình trước 67 ĐỒ ÁN SE121.N21.PMCL - ListView danh sách homestay người dùng u thích, item gồm hình ảnh homestay, tên homestay giá Sơ đồ lớp: Hình 17 Sơ đồ lớp 68 ĐỒ ÁN SE121.N21.PMCL Sơ đồ hoạt động: 4.1 Hoạt động đăng ký: Hình 18 Sơ đồ hoạt động đăng ký 69 ĐỒ ÁN SE121.N21.PMCL 4.2 Hoạt động đặt phịng: Hình 19 Sơ đồ hoạt động đặt phòng 70 ĐỒ ÁN SE121.N21.PMCL 4.3 Hoạt động tìm kiếm sản phẩm: Hình 21 Sơ đồ hoạt động tìm kiếm sản phẩm 71 ĐỒ ÁN SE121.N21.PMCL CHƯƠNG IV KẾT LUẬN Kết đạt được: ● Tạo sản phẩm hoàn chỉnh ● Áp dụng kiến thức quy trình phát triển phần mềm hướng đối tượng cách chun nghiệp ● Tìm hiểu thêm cơng nghệ kiến trúc kỹ thuật ● Hiểu nắm kiến thức ứng dụng Visual Studio Code ● Hiểu nắm cách xây dựng ứng dụng di động với React Native ● Nắm rõ firebase, data base, thiết kế giao diện ứng dụng di động ● Phân công công việc hợp lý Ưu điểm: ● Dễ dàng sử dụng ● Giao diện đẹp mắt thân thiện ● Có nhiều chức khác phục vụ cho nhu cầu mục đích người dùng ● Hồn tồn miễn phí ● Có tính áp dụng thực tế cao Nhược điểm giải pháp: - Các phương thức tốn cịn hạn chế o Giải pháp: tìm hiểu nhiều ví điện tử internet banking - Chưa mang lại trải nghiệm mượt mà o Giải pháp: Tìm cách tối ưu hệ thống - Chưa có chức đề xuất phịng phù hợp với người dùng o Giải pháp: mở rộng liệu phát triển thêm recommend system - Luồng xử lý kiện rườm rà, phức tạp o Giải pháp: tìm cách tối ưu tḥt tốn luông xử lý kiện 72 ĐỒ ÁN SE121.N21.PMCL TÀI LIỆU THAM KHẢO - Stackoverflow: https://stackoverflow.com/ - Firebase Document:React Native Firebase | React Native Firebase (rnfirebase.io) - React Native : React Native · Learn once, write anywhere - UI : Dribbble - Discover the World’s Top Designers & Creative Professionals - Client- Servel model: Client-server application model - Documentation for Remedy Action Request System 18.05 - BMC Documentation 73