Đồ án tìm hiểu về react native và xây dựng ứng dụng

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ******************************************************* Môn học: ĐỒ ÁN BÁO CÁO ĐỒ ÁN Tên đề tài: TÌM HIỂU VỀ REACT NATIVE VÀ XÂY DỰNG ỨNG DỤNG GVHD: Th.S Nguyễn Công Hoan Tên thành viên: ● Nguyễn Đình Thi 20520771 ● Trương Đức Thiện 20520778 TP HCM, tháng năm 2023 LỜI CẢM ƠN Đầu tiên, em gửi lời cảm ơn chân thành đến tập thể quý thầy cô trường Đại học Công nghệ thông tin – Đại học Quốc gia Tp Hồ Chí Minh q thầy khoa Cơng nghệ phần mềm giúp cho em có kiến thức làm tảng để thực đề tài Đặc biệt, em xin gửi lời cảm ơn lòng biết ơn sâu sắc tới thầy Nguyễn Công Hoan trực tiếp hướng dẫn tận tình, sửa chữa đóng góp nhiều ý kiến q báu giúp em hồn thành tốt báo cáo mơn học Trong thời gian đề tài, em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức mới.Từ đó, em vận dụng tối đa thu thập để hồn thành báo cáođồ án tốt Tuy nhiên, trình thực hiện, em khơng tránh khỏi nhữngthiếu sót Chính vậy, em mong nhận góp ý từ phía thầycơ nhằm hồn thiện kiến thức mà em học tập hành trang đểem thực tiếp đề tài khác tương lai NHẬN XÉT CỦA GIẢNG VIÊN ………………………………………………………………………………………… … ……………………………………………………………………………………… …… …………………………………………………………………………………… ……… ………………………………………………………………………………… ………… ……………………………………………………………………………… …………… …………………………………………………………………………… ……………… ………………………………………………………………………… ………………… ……………………………………………………………………… …………………… …………………………………………………………………… ……………………… ………………………………………………………………… ………………………… ……………………………………………………………… …………………………… …………………………………………………………… ……………………………… ………………………………………………………… ………………………………… ……………………………………………………… …………………………………… …………………………………………………… ……………………………………… ………………………………………………… ………………………………………… ……………………………………………… …………………………………………… …………………………………………… ……………………………………………… ………………………………………… ………………………………………………… ……………………………………… …………………………………………………… …………………………………… ……………………………………………………… ………………………………… ………………………………………………………… ……………………………… …………………………………………………………… …………………………… ……………………………………………………………… ………………………… ………………………………………………………………… ……………………… …………………………………………………………………… …………………… ……………………………………………………………………… ……………………… …………………………………………………………………… …………………… ……………………………………………………………………… ……………………… …………………………………………………………………… …………………… ……………………………………………………………………… MỤC LỤC CHƯƠNG 1: TỔNG QUAN 1.1 Lý chọn đề tài 7 1.1.1 React Native 1.1.2 Ứng dụng quản lí chi tiêu cá nhân 1.2 Mơi trường phát triển ứng dụng 1.3 Kết mong đợi 1.4 Quy trình thực cơng việc 1.5 Review phần mềm tương tự thị trường CHƯƠNG 2: KIẾN THỨC HỌC ĐƯỢC 2.1 React Native 10 10 2.1.1 Kiến trúc 10 2.1.2 Component 10 2.1.3 Device APIs 11 2.1.4 Ưu điểm 11 2.2 Firebase 12 2.2.1 Realtime Database 12 2.2.2 Authentication 12 2.2.3 Ưu điểm 13 2.2.3 Nhược điểm 13 2.3 MongoDB 13 2.3.1 Tính 13 2.3.2 Ưu điểm 14 2.3.3 Nhược điểm 15 CHƯƠNG 3: PHÂN TÍCH, THIẾT KẾ HỆ THỐNG 3.1 Xác định mơ hình hóa u cầu phần mềm 16 16 3.1.1 Xác định yêu cầu 16 3.1.2 Mơ hình hóa u cầu 16 3.2 Thiết kế liệu 3.2.1 Sơ đồ lớp ở mức phân tích 24 24 3.3 Thiết kế giao diện 33 3.3.1 Sơ đồ liên kết hình 33 3.3.2 Danh sách hình 33 3.3.3 Mô tả hình 34 3.3.3.1 Màn hình giới thiệu 34 3.3.3.2 Màn hình đăng nhập 35 3.3.3.3 Màn hình đăng ký 36 3.3.3.4 Màn hình quên mật khẩu 38 3.3.3.5 Màn hình xác thực email 39 3.3.3.6 Màn hình thiết lập số dư ban đầu 40 3.3.3.7 Màn hình trang chủ 41 3.3.3.8 Màn hình giao dịch 43 3.3.3.9 Màn hình thêm giao dịch 45 3.3.3.10 Màn hình chỉnh sửa giao dịch 47 3.3.3.11 Màn hình xem giao dịch ngày 49 3.3.3.12 Màn hình báo cáo 50 3.3.3.13 Màn hình cài đặt 52 3.3.3.14 Màn hình tìm kiếm 54 3.3.3.15 Màn hình thay đổi thông tin cá nhân 56 3.3.3.16 Màn hình đổi mật khẩu 58 3.3.3.17 Màn hình chỉnh sửa hạn mức chi tiêu 59 CHƯƠNG KẾT LUẬN 62 4.1 Kết đạt 62 4.2 Hạn chế 62 4.3 Hướng phát triển 62 CHƯƠNG 5: TÀI LIỆU THAM KHẢO 62 DANH MỤC ẢNH Hình Bảng khảo sát phầm mềm tương tự thị trường Hình Kiến trúc hoạt động React Native 10 Hình Một số component phổ biến 11 Hình Một số Device APIs phổ biến 11 Hình Cách thức hoạt động firebase 12 Hình Lược đồ user-case tổng thể 17 Hình Bảng user-case tổng thể 18 Hình Lược đồ user-case đăng nhập 18 Hình Bảng user-case đăng nhập 19 Hình 10 Lược đồ user-case quản lí chi tiêu 19 Hình 11 Bảng user-case thêm chi tiêu 20 Hình 12 Bảng user-case sửa chi tiêu 21 Hình 13 Bảng user-case xóa chi tiêu 21 Hình 14 Sơ đồ user-case quản lí ví 22 Hình 15 Bảng user-case quản lí ví 22 Hình 16 Sơ đồ user-case quản lí tài khoản 23 Hình 17 Bảng user-case đổi mật khẩu 24 Hình 18 Bảng user-case sửa thông tin người dùng 24 Hình 19 Bảng danh sách lớp 25 Hình 20 Bảng danh sách thuộc tính User 25 Hình 21 Bảng danh sách phương thức User 25 Hình 22 Bảng danh sách thuộc tính spending 26 Hình 23 Bảng danh sách phương thức Spending 26 Hình 24 Bảng thiết kế liệu lưu trữ 27 Hình 25 Bảng danh sách bảng liệu 27 Hình 26 Bảng danh sách thuộc tính NGUOIDUNG 28 Hình 27 Bảng danh sách thuộc tính GIAODICH 28 Hình 28 Bảng danh sách thuộc tính CHITIETBANBE 28 Hình 29 Bảng danh sách thuộc tính LOAI 29 Hình 30 Bảng danh sách thuộc tính VI 29 Hình 31 Bảng danh sách thuộc tính LICHSU 29 Hình 32 Chi tiết liệu firebase 30 Hình 33 Bảng liệu collection Data 31 Hình 34 Bảng liệu collection History 31 Hình 35 Bảng liệu collection Info 32 Hình 36 Bảng liệu collection Spending 32 Hình 37 Bảng liệu collection wallet 33 Hình 38 Sơ đồ liên kết hình 33 Hình 39 Màn hình giới thiệu 34 Hình 40 Mô tả đối tượng hình giới thiệu 35 Hình 41 Màn hình đăng nhập 35 Hình 42 Mô tả đối tượng trê hình đăng nhập 36 Hình 43 Màn hình đăng kí 37 Hình 44 Mô tả đối tượng hình đăng kí 38 Hình 45 :Màn hình đăng kí 38 Hình 46 Mơ tả hình đăng kí 39 Hình 47 Màn hình xác thực email 39 Hình 48 Mơ tả hình xác thực email 40 Hình 49 hình ví 40 Hình 50 Mơ tả hình ví 41 :Hình 51 Màn hình trang chủ 42 Hình 52 Mô tả hình trang chủ 43 Hình 53 Màn hình giao dịch 44 Hình 54 Mơ tả hình giao dịch 45 Hình 55 hình thêm giao dịch 46 Hình 56 Mơ tả hình thêm giao dịch 47 Hình 57 Màn hình sửa giao dịch 48 Hình 58 Mơ tả hình sửa giao dịch 49 Hình 59 Màn hình xem giao dịch ngày 49 Hình 60 Mơ tả hình xem giao dịch ngày 50 Hình 61 Màn hình báo cáo 51 Hình 62 Mô tả hình báo cáo 52 Hình 63 Màn hình cài đặt 52 Hình 64 Mô tả hình cài đặt 54 Hình 65 Màn hình tìm kiếm 55 Hình 66 Mô tả hình tìm kiếm 56 Hình 67 Màn hình sửa tài khoản 57 Hình 68 Mơ tả hình sửa tài khoản 58 Hình 69 Màn hình sửa mật khẩu 58 Hình 70 Mơ tả hình sửa mật khẩu 59 Hình 71 Màn hình sửa hạn mức chi tiêu 60 Hình 72 Mô tả hình sửa hạn mức chi tiêu 61 CHƯƠNG 1: TỔNG QUAN 1.1 Lý chọn đề tài 1.1.1 React Native React native framework tiềm với cộng động lớn sử dụng giới kể ông lớn giới sử dụng để phát triển ứng dụng di động Các ứng dụng xây dựng bởi React native ứng dụng crossplat-form chạy hai tảng chỉ với lần code Tính dễ học tiếp cận , chi phí thấp mang lai kết cao lí cần thiết Vì nhóm chúng em định lựa chọn React Native 1.1.2 Ứng dụng quản lí chi tiêu cá nhân - Hiện thiết bị di dộng – smart phone ngày phổ biến Việc đưa ứng dụng lên kho lưu trữ tương đối dễ dàng Hơn nữa, người sử dụng sẵn sàng chi trả khoảng tiền phù hợp cho ứng dụng mà họ cảm thấy cần thiết so với trước - Vấn đề cân đối thu-cho, khoản vay nợ kỳ han phải trả ln vấn đề khó khăn với đa phần tầng lớp xã hội Bởi vậy, ứng dụng chạy thiết bị di động giúp đỡ người sử dụng việc quản lý chi tiêu cần thiết - Một số phần mềm có tính tương tự phát triển tảng Android, IOS, … như: Money lover, Sổ thu chi, Sổ thu chi misa, …, nhiên phần mềm còn nhiều bất lợi cho người dùng như: thu phí tính nâng cao, khơng đồng liệu thiết bị, không hỗ trợ đầy đủ chức năng, … - Xuất phát từ nhận định đó, tơi chọn đề tài “Phần mềm quản lý chi tiêu cá nhân di động” nhằm hỗ trợ người dùng giải vấn đề 1.2 Môi trường phát triển ứng dụng - Hệ điều hành phát triển: Microsoft Windows - Hệ điều hành cài đặt: Android - Cơ sở liệu đám mây: Firebase - Cơng cụ phân tích thiết kế: figma.com - Cơng cụ phân chia nhiệm vụ: Trello - Công cụ xây dựng ứng dụng: Visual Studio Code Ngôn ngữ sử dụng: Javascript Framework: ReactNative Công cụ quản lý source code: Github 1.3 Kết mong đợi - Học hỏi cách phát triển ứng dụng di động qua trình làm đề tài - Triển khai sản phẩm hồn thiện, có ích cho người dùng - Hiểu áp dụng quy trình phát triển phần mềm - Trau dồi kinh nghiệm làm việc nhóm 1.4 Quy trình thực hiện các cơng việc chính Hiện có nhiều quy trình phát triển phần mềm khác Tuy nhiên theo yêu cầu đề tài, nhóm sử dụng mô hình thác nước cải tiến Mô hình bao gồm trình tự: xác định yêu cầu, phân tích, thiết kế, cài đặt, kiểm thử, bảo trì Trong đó, kết giai đoạn trước sở đầu vào giai đoạn sau Vì vậy, có lỡi xảy ra, nhóm quay lui để sửa lỗi tối ưu phần mềm tiến độ trì Cụ thể trình tự phát triển phần mềm nhóm sau: - Xác định yêu cầu: Khảo sát yêu cầu người dùng, lập bảng yêu cầu quy định cụ thể cho phần mềm - Phân tích: Phân loại yêu cầu lập sơ đồ luồng liệu cho yêu cầu - Thiết kế: Mô tả thành phần phần mềm cách rõ ràng, gồm bước: ● Thiết kế hệ thống, kiến trúc, đối tượng ● Thiết kế sở liệu ● Thiết kế giao diện ● Cài đặt: Dựa theo thiết kế phân tích, tiến hành xây dựng chương trình thực tế ● Kiểm thử: Chạy thực nghiệm đánh giá, tìm sửa lỗi 1.5 Review các phần mềm tương tự thị trường Chức Mon ey lover Sở thu chi Sở thu chi misa Nhóm Thêm, chỉnh sửa thu chi X X X Khả quan Tra cứu thu chi X X X Khả quan Báo cáo theo tuần , tháng,năm X X X Khả quan Liên kết theo dõi tài khoản ngân hàng X Sử dụng nhiều thiết bị X Nhắc nhở khoản thu chi định kì X Chuyển đổi tiền tệ X Quét hóa đơn X Lập hạn mức chi tiêu X Thiết lập số dư ban đầu X Sổ tiết kiệm X Sổ nợ X Xuất liệu X Ứng dụng Không khả quan X X Khả quan X Khả quan X Không khả quan Không khả quan X Khả quan X X Khả quan X X Không khả quan Không khả quan X Khả quan Danh sách mua sắm,du lịch X Khơng khả quan Tính lãi vay, thuế TNCN X Không khả quan X Hình Bảng khảo sát phầm mềm tương tự thị trường Sửa thông tin giao dịch Người dùng sửa chi tiêu với thơng tin có hình người dùng sửa thơng tin chi tiêu người dùng click vào thông tin tương ứng Hình 58 Mô tả hình sửa giao dịch 3.3.3.11 Màn hình xem giao dịch ngày a Giao diện Hình 59 Màn hình xem giao dịch ngày b Mô tả đối tượng hình 49 Tên xử lý Ý nghĩa Điều kiện gọi Button quay lại Quay lại hình trước Khi người dùng nhấn vào button < hình Label tởng tiền giao dịch ngày Hiển thị tổng thu nhập chi tiêu Khi người dùng nhấn vào ngày ở trang trước Button chỉnh sửa Chỉnh sửa chi tiêu Khi người dùng nhấn nút chỉnh sửa Hiển thị chi tiết Danh sách chi giao dịch tiêu ngày Khi người dùng nhấn vào chi tiêu ở trang home trước STT Ghi Hình 60 Mơ tả hình xem giao dịch ngày 3.3.3.12 Màn hình báo cáo a Giao diện 50 Hình 61 Màn hình báo cáo b Mô tả đối tượng hình Tên xử lý Ý nghĩa Điều kiện gọi Thanh cuộn tháng Chọn tháng để xem báo cáo Khi người dùng nhấn vào cuộn tháng Text label ban đầu , kết thúc Hiển thị số tiền ban đầu số tiền kết thúc(Hiện tại) Nhấn vào trang báo cáo Biểu đồ tổng thu chi tháng STT Ghi Hiển thị biểu đồ Khi người dung thống kê thu chi nhấn vào trnag tháng báo cáo 51 Label khoản khác Hiển thị khoản cố định tháng Khi người dùng nhấn vào trang báo cáo Hình 62 Mơ tả hình báo cáo 3.3.3.13 Màn hình cài đặt a Giao diện Hình 63 Màn hình cài đặt b Mô tả đối tượng hình STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi 52 Cài đặt tài khoản Đổi mật khẩu Thay đổi thông tin cá nhân Khi người dùng nhấn vào Button tài khoản hình Thay đởi mật khẩu Khi người dùng nhấn vào Button đổi mật khẩu hình Ngơn ngữ Khi người dùng Chuyễn đởi nhấn vào Button ngơn ngữ sẵn có ngơn ngữ ứng dụng hình Chế độ tối Khi người dùng nhấn vào Button chế độ tối hình Thay đởi giao diện hình Lịch sử Xem lịch sử Khi người dùng giao dịch từ nhấn vào Button đến cũ lịch sử người dùng hình Xuất CSV Xuất tồn Khi người dùng liệu chi tiêu nhấn vào Button người dùng xuất CSV thành file CSV hình Tỷ giá tiền tệ Khi người dùng Xem tỷ giá tiền nhấn vào Button tệ Tỷ giá tiền tệ hình Thơng tin Xem thơng tin ứng dụng Khi người dùng nhấn vào Button thông tin hình 53 10 11 12 Đăng xuất Ví Khoản tiền cố định Hạn mức chi tiêu Đăng xuất tài khoản khỏi ứng dụng Khi người dùng nhấn vào Button Đăng xuất hình Khi người dùng Chỉnh sửa danh nhấn vào Button sách ví ví hình Chỉnh sửa khoản tiền cố định Khi người dùng nhấn vào Button khoản tiền cố định hình Thiết lập hạn mức chi tiêu Khi người dùng nhấn vào Button hạn mức chi tiêu hình Hình 64 Mơ tả hình cài đặt 3.3.3.14 Màn hình tìm kiếm a Giao diện 54 Hình 65 Màn hình tìm kiếm b Mơ tả đối tượng hình STT Tên xử lý Ý nghĩa Điều kiện gọi Tìm kiếm chi tiêu Tìm kiếm chi tiêu theo yêu cầu người dùng Khi người dùng nhấn vào button kính lúp bàn phím Hiển thị lọc Hiển thị lọc tìm kiếm lên hình Khi người dùng nhấn vào button có biểu tượng lọc Ghi 55 Lọc tìm kiếm theo số tiền Lọc tìm Khi người dùng kiếm theo số chọn tùy tiền mà người chọn dùng chọn lọc số tiền lọc Lọc tìm kiếm theo thời gian Lọc tìm Khi người dùng kiếm theo thời chọn tùy gian mà người chọn dùng chọn lọc thời gian lọc Lọc tìm kiếm theo bạn bè Lọc tìm Khi người dùng kiếm theo bạn chọn tùy bè mà người chọn dùng chọn lọc bạn bè lọc Lọc tìm kiếm theo ghi Lọc tìm Khi người dùng kiếm theo ghi chọn tùy mà người chọn dùng chọn lọc ghi lọc Lọc tìm kiếm theo nhóm Lọc tìm Khi người dùng kiếm theo nhóm chọn tùy mà người dùng chọn chọn lọc nhóm lọc Áp dụng lọc vào tìm kiếm Áp dụng lọc sau người dùng tùy chỉnh vào tìm kiếm Khi người dùng nhấn vào nút tìm kiếm lọc Hình 66 Mơ tả hình tìm kiếm 3.3.3.15 Màn hình thay đổi thông tin cá nhân a Giao diện 56 Hình 67 Màn hình sửa tài khoản b Mô tả đối tượng hình Tên xử lý Ý nghĩa Điều kiện gọi Thêm ảnh người dùng Người dùng thêm ảnh cá nhân vòa tài khoản Khi người dùng nhấn vào button dấu + hình Họ tên người dùng Người dùng thêm tên Người dùng click vào STT Ghi 57 Ngày sinh hiển thị tài khoản textbox họ tên để sửa Người dùng sửa ngày sinh mình tài khoản Người dùng click vào textbox ngày sinh để sửa Hình 68 Mơ tả hình sửa tài khoản 3.3.3.16 Màn hình đổi mật a Giao diện Hình 69 Màn hình sửa mật b Mơ tả đối tượng hình STT Tên xử lý Ý nghĩa Điều kiện gọi Ghi 58 Textbox Nhập mật khẩu cũ Button thay đổi mật khẩu Textbox nhập mật khẩu Textbox nhập lại mật khẩu Nhập mật khẩu cũ để sang trang để đổi mật khẩu Người dùng click textbox hình để nhập mật khẩu cũ Xác nhận thay đổi mật khẩu Khi người dùng click vào button nhập textbox Nhập mật khẩu người dùng Người dùng click textbox mật khẩu để nhập mật khẩu Nhập lại mật khẩu người dùng Người dùng click textbox nhập lại mật khẩu để nhập lại mật khẩu Hình 70 Mơ tả hình sửa mật 3.3.3.17 Màn hình chỉnh sửa hạn mức chi tiêu a Giao diện 59 Hình 71 Màn hình sửa hạn mức chi tiêu 60 b Mô tả đối tượng hình STT Tên xử lý Ý nghĩa Điều kiện gọi Người dùng click vào textbox hình Textbox nhập số tiền Nhập số tiền để quản lí Button chọn chu kì Khi người dùng Chọn chu kì hạn click vào button mức hạn thời gian Ghi Hình 72 Mơ tả hình sửa hạn mức chi tiêu 61 CHƯƠNG KẾT LUẬN 4.1 Kết đạt được – Hoàn thành yêu cầu ứng dụng quản lí chi tiêu cá nhân – Giao diện đơn giản, bố cục hợp lý, người dùng dễ dàng theo tác ứng dụng – Tốc độ phản hồi thao tác nhanh, tối ưu hóa suất người dùng – Nắm kiến thức tảng công nghệ Firebase , React Native , mongoDB … 4.2 Hạn chế – Website cịn hạn chế số tính năng: + Chưa tích hợp ví thật + Một số tính đề xuất chưa hồn thành + Các thông tin chưa thực đồng tối ưu 4.3 Hướng phát triển – Xây dựng chứa cịn thiếu, hồn thiện chức có – Tích hợp quản lí ví ngân hàng , ví điện tử – Tối ưu hóa CSDL , chuyển sở liệu sang mongoDB CHƯƠNG 5: TÀI LIỆU THAM KHẢO Nhóm có dùng tài liệu tham khảo từ trang chủ Flutter Bên cạnh nhóm chúng em còn tham khảo nhiều chủ đề thảo luận, ví dụ minh hoạ Dart, Flutter, Firebase trang web Stackoverflow, Github, … Flutter Document: https://flutter.dev/docs StackOverFlow: https://stackoverflow.com/ Youtube: https://youtube.com/ 62 Firebase Document: https://firebase.google.com/docs/android/setup Firebase: https://firebase.google.com/docs React Native : React Native · Learn once, write anywhere Expo app : Expo MongoDB : MongoDB: The Developer Data Platform | MongoDB 63