Đồ án: Xây dựng ứng dụng tìm nhà trọ - Phạm Thái Vĩnh & Phùng Đại Hiệp (ĐH SPKT)

Tham khảo đồ án tốt nghiệp xây dựng ứng dụng tìm nhà trọ bằng React Native. Tài liệu gồm báo cáo đầy đủ, thiết kế CSDL, giao diện và mã nguồn.

• Tác giả: Phạm Thái Vĩnh
• Người hướng dẫn: ThS. Mai Tuấn Khôi
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật TP. Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Ứng dụng Tìm Nhà Trọ React Native
• Loại tài liệu: Đề án tốt nghiệp
• Năm xuất bản: 2020
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Đồ án Tốt nghiệp Ứng dụng Tìm Nhà Trọ React Native

Ứng dụng tìm nhà trọ React Native là một đồ án tốt nghiệp được phát triển tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh, dưới hướng dẫn của ThS. Mai Tuấn Khôi. Đề tài này nhằm giải quyết bài toán tìm kiếm nhà trọ hiệu quả thông qua một ứng dụng mobile đa nền tảng. Nhóm tác giả gồm Phạm Thái Vĩnh (16110525) và Phùng Đạl Hiệp (16110331) đã thực hiện từ tháng 3 năm 2020 đến tháng 8 năm 2020. Dự án sử dụng React Native làm nền tảng chính, kết hợp với MERN stack (MongoDB, Express.js, React Native, Node.js) để xây dựng một giải pháp toàn diện. Mục tiêu là tạo ra một ứng dụng thân thiện với người dùng, giúp tìm kiếm nhà trọ một cách dễ dàng và nhanh chóng trên cả nền tảng iOS và Android.

1.1. Tính Cấp Thiết của Đề Tài

Hiện nay, nhu cầu tìm kiếm nhà trọ ngày càng gia tăng đặc biệt ở các thành phố lớn. Tuy nhiên, quy trình tìm kiếm truyền thống thường mất nhiều thời gian và công sức. Ứng dụng tìm nhà trọ React Native giải quyết vấn đề này bằng cách cung cấp một nền tảng tìm kiếm trực tuyến hiệu quả. Người dùng có thể dễ dàng tìm kiếm, lọc thông tin nhà trọ theo các tiêu chí như giá cả, vị trí, diện tích và tiện ích. Điều này làm cho quá trình tìm kiếm nhanh chóng, tiện lợi và tiết kiệm thời gian cho người sử dụng.

1.2. Mục Tiêu của Đề Tài

Mục tiêu chính của đồ án là xây dựng một ứng dụng mobile đa nền tảng sử dụng React Native để tìm kiếm nhà trọ. Cụ thể, ứng dụng cần hỗ trợ các chức năng: tìm kiếm nhà trọ theo vị trí, giá cả và tiện ích; hiển thị thông tin chi tiết về các căn phòng; quản lý yêu thích; và giao tiếp giữa người cho thuê và người tìm trọ. Ngoài ra, dự án cũng nhằm giúp sinh viên làm quen với các công nghệ hiện đại trong phát triển ứng dụng mobile.

II. Công Nghệ và Stack Lập Trình Sử Dụng

MERN stack là lựa chọn chính cho đồ án tốt nghiệp này, bao gồm bốn công nghệ mạnh mẽ: MongoDB cho cơ sở dữ liệu, Express.js cho backend, React Native cho giao diện ứng dụng mobile, và Node.js cho máy chủ backend. Sự kết hợp này cho phép phát triển một ứng dụng toàn diện và hiệu quả. React Native được chọn vì khả năng xây dựng ứng dụng đa nền tảng (iOS và Android) từ một codebase duy nhất, giúp tiết kiệm thời gian phát triển. Ngoài ra, dự án còn sử dụng Redux để quản lý trạng thái ứng dụng, Mongoose để tương tác với MongoDB, và các công cụ hỗ trợ khác. Thiết kế Restful API đảm bảo giao tiếp hiệu quả giữa frontend và backend.

2.1. Công Nghệ React Native và Ưu Điểm

React Native là một framework JavaScript được phát triển bởi Facebook, cho phép xây dựng ứng dụng native cho iOS và Android từ một codebase duy nhất. Ưu điểm của React Native bao gồm: giảm chi phí phát triển do sử dụng một ngôn ngữ duy nhất (JavaScript), tốc độ phát triển nhanh, cộng đồng hỗ trợ mạnh, và khả năng tái sử dụng code. Đối với dự án tìm nhà trọ, React Native cho phép tạo giao diện người dùng đáp ứng và trực quan trên cả hai nền tảng mobile chính.

2.2. Kiến Trúc Backend với Node.js và Express.js

Node.js cung cấp môi trường chạy JavaScript trên máy chủ, cho phép phát triển backend hiệu suất cao. Express.js là một framework web nhẹ và linh hoạt chạy trên Node.js, giúp xây dựng Restful API một cách nhanh chóng. Cơ sở dữ liệu MongoDB được sử dụng để lưu trữ dữ liệu nhà trọ, người dùng và thông tin liên quan. Mongoose được sử dụng để định nghĩa schema và tương tác với MongoDB, đảm bảo tính nhất quán dữ liệu.

III. Mô Hình Hóa Yêu Cầu và Thiết Kế Cơ Sở Dữ Liệu

Quá trình mô hình hóa yêu cầu là bước quan trọng trong phát triển ứng dụng tìm nhà trọ. Nhóm đã xác định các actor chính bao gồm khách vãng lai (Guest), người dùng đã đăng ký (User), người cho thuê (Landlord), và quản trị viên (Admin). Mỗi actor có các nghiệp vụ riêng như đăng ký tài khoản, đăng nhập, tìm kiếm nhà trọ, đăng tin cho thuê, quản lý bình luận và đánh giá. Thiết kế cơ sở dữ liệu sử dụng MongoDB với các collection chính bao gồm Users, Rooms, Comments, Ratings, và Bookmarks. Sơ đồ luồng dữ liệu (Data Flow Diagram) được sử dụng để mô tả chi tiết cách dữ liệu di chuyển qua các component của hệ thống, đảm bảo tất cả các yêu cầu được đáp ứng.

3.1. Các Actor và Nghiệp Vụ Chính

Hệ thống ứng dụng tìm nhà trọ có ba loại actor chính. Thứ nhất, Khách (Guest) có thể xem danh sách nhà trọ nhưng không thể thực hiện các thao tác nâng cao. Thứ hai, Người dùng (User) có thể đăng ký, đăng nhập, tìm kiếm nhà trọ, lưu yêu thích, và bình luận. Thứ ba, Người cho thuê (Landlord) có thể đăng tin cho thuê, quản lý phòng trọ, và trả lời bình luận. Mỗi nhóm actor có các use case riêng biệt được mô tả chi tiết trong tài liệu thiết kế.

3.2. Cơ Sở Dữ Liệu MongoDB và Cấu Trúc Collection

MongoDB là một cơ sở dữ liệu NoSQL được lựa chọn cho dự án này do tính linh hoạt và khả năng mở rộng. Các collection chính bao gồm: Users lưu trữ thông tin người dùng, Rooms lưu trữ thông tin nhà trọ, Comments lưu trữ bình luận từ người dùng, Ratings lưu trữ đánh giá, và Bookmarks lưu trữ danh sách yêu thích. Mỗi document có cấu trúc JSON linh hoạt, cho phép lưu trữ dữ liệu đa dạng và thích nghi với các thay đổi yêu cầu.

IV. Quá Trình Phát Triển và Kiểm Thử Ứng Dụng

Quá trình phát triển ứng dụng tìm nhà trọ React Native được chia thành các giai đoạn rõ ràng: khảo sát hiện trạng, thiết kế prototype, thiết kế giao diện, xây dựng backend API, và kiểm thử. Nhóm đã dành khoảng 4 tuần để tìm hiểu về React Native, Redux, và MongoDB. Tiếp theo, họ xây dựng giao diện ứng dụng sử dụng React Native và quản lý trạng thái bằng Redux. Sau đó, họ phát triển các Restful API sử dụng Node.js, Express.js, và Mongoose. Cuối cùng, quá trình kiểm thử được thực hiện để đảm bảo chức năng hoạt động đúng. Kế hoạch kiểm thử bao gồm kiểm thử chức năng, kiểm thử hiệu suất, và kiểm thử bảo mật.

4.1. Thiết Kế Giao Diện và Xử Lý Nghiệp Vụ

Giao diện người dùng là yếu tố quan trọng trong ứng dụng mobile. Nhóm đã thiết kế các màn hình chính bao gồm: màn hình đăng nhập/đăng ký, màn hình tìm kiếm nhà trọ, màn hình chi tiết phòng trọ, màn hình yêu thích, và màn hình quản lý tài khoản. Mỗi màn hình được thiết kế để dễ sử dụng và đáp ứng. Xử lý nghiệp vụ bao gồm validating input từ người dùng, gọi API backend, và cập nhật trạng thái ứng dụng sử dụng Redux.

4.2. Kiểm Thử và Sửa Lỗi

Kiểm thử là giai đoạn cuối và quan trọng của quá trình phát triển. Nhóm sử dụng các phương pháp kiểm thử chức năng để đảm bảo tất cả các tính năng hoạt động đúng theo yêu cầu. Kiểm thử tích hợp được thực hiện để kiểm tra giao tiếp giữa frontend và backend. Ngoài ra, nhóm cũng thực hiện kiểm thử hiệu suất để đảm bảo ứng dụng chạy mượt mà trên các thiết bị mobile khác nhau. Các lỗi được phát hiện được ghi lại và sửa chữa một cách hệ thống.

Trích đoạn nội dung tài liệu

CHƯƠNG 1 : KHẢO SÁT HIỆN TRẠNG. NHÀ TRỌ TỐT [3]. 29  ỨNG DỤNG HƯỚNG ĐẾN :. 31 CHƯƠNG 2 : MÔ HÌNH HÓA YÊU CẦU VÀ.

32 THIẾT KẾ CƠ SỞ DỮ LIỆU .2 CHI TIẾT CÁC ACTOR .3 SƠ ĐỒ LUỒNG DỮ LIỆU VÀ CƠ SỞ DỮ LIỆU CÁC NGHIỆP VỤ.1 Các nghiệp vụ của Guest (user,admin nếu có chung). Xét nghiệp vụ đăng ký tài khoản.2 Xét nghiệp vụ đăng nhập. Xét nghiệp vụ Tìm Trọ .2 Các nghiệp vụ của User. Xét nghiệp vụ Cập Nhập Thông Tin Cá Nhân .2 Xét nghiệp vụ Đặt Lịch Hẹn .2 Xét nghiệp vụ Xem Bài Đăng .3 Xét nghiệp vụ Đăng Bài .4 Xét nghiệp vụ Báo Cáo Sai Phạm .5 Xét nghiệp vụ Bình Luận .6 Xét nghiệp vụ Đóng Mở Trạng Thái Tìm Trọ.3 Các nghiệp vụ của ADMIN .1 Xét nghiệp vụ Xem báo cáo sai phạm .2 Xét nghiệp vụ Quản Lý Bài Đăng .4 CƠ SỞ DỮ LIỆU HOÀN CHỈNH .1 Cơ sở dữ liệu .2 Mô tả cơ sở dữ liệu.

64 CHƯƠNG 3 : THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ .1 MÀN HÌNH TÌM TRỌ .2 MÀN HÌNH TRANG CHỦ .3 MÀN HÌNH ĐĂNG BÀI .4 MÀN HÌNH QUY TRÌNH ĐĂNG BÀI .5 MÀN HÌNH XEM HỒ SƠ CÁ NHÂN .6 MÀN HÌNH CHI TIẾT PHÒNG .7 MÀN HÌNH CÀI ĐẶT TRẠNG THÁI TÌM TRỌ .8 MÀN HÌNH ĐẶT LỊCH HẸN. 91 CHƯƠNG 4 : LẬP TRÌNH .1 STACK LẬP TRÌNH .2 CƠ SỞ DỮ LIỆU MONGODB.4 MÔ TẢ CHI TIẾT TỪNG LỚP .5 TRÍCH DẪN THUẬT TOÁN HAY SỬ DỤNG TRONG PHẦN MỀM. 100 CHƯƠNG 5 : KIỂM THỬ PHẦN MỀM .1 KẾ HOẠCH KIỂM THỬ .2 QUY TRÌNH KIỂM THỬ. 105 12 TÀI LIỆU THAM KHẢO.

108 13 MỤC LỤC HÌNH ẢNH Hình 1 - 1 Nhà trọ 360 .20 Hình 1 - 2 Nhà trọ 360 .20 Hình 1 - 3 Nhà trọ 360 .24 Hình 1 - 9 Nhà trọ tốt .26 Hình 1 - 10 Nhà trọ tốt .26 Hình 1 - 11 Nhà trọ tốt .27 Hình 1 - 12 Nhà trọ tốt .28 Hình 1 - 13 Nhà trọ tốt .30 Hình 2 - 1 UseCase Diagram .32 Hình 2 - 2 BM1_MHC .36 Hình 2 - 3 BM2_TK1.37 Hình 2 - 4 BM2_TK2.37 Hình 2 - 5 BM2_TK3.38 Hình 2 - 6 BM3_BD1.43 Hình 2 - 7 BM3_BD2.43 Hình 2 - 8 BM3_BD3.44 Hình 2 - 9 BM4_XBD.44 Hình 2 - 10 BM5_DLH .45 Hình 2 - 11 BM6_IF .48 Hình 2 - 13 SDLDL đăng ký .49 Hình 2 - 14 SDLDL đăng nhập.50 Hình 2 - 15 SDLDL tìm trọ .52 Hình 2 - 16 SDLDL cập nhập thông tin cá nhân .53 Hình 2 - 17 SDLDL đặt lịch hẹn.54 Hình 2 - 18 SDLDL xem bài đăng .56 Hình 2 - 19 SDLDL đăng bài .57 Hình 2 - 20 SDLDL báo cáo sai phạm .59 Hình 2 - 21 SDLDL bình luận .60 Hình 2 - 22 SDLDL trạng thái tìm trọ.61 Hình 2 - 23 SDLDL xem báo cáo .62 Hình 2 - 24 SDLDL quản lý bài đăng .63 Hình 2 - 25 25 Cơ sở dữ liệu hoàn chỉnh .64 14 Hình 3 - 1 màn hình tìm kiếm.70 Hình 3 - 2 màn hình trang chủ .73 Hình 3 - 3 màn hình đăng bài .76 Hình 3 - 4 màn hình quy trình đăng bài .79 Hình 3 - 5 màn hình quy trình đăng bài tt .80 Hình 3 - 6 màn hình trang cá nhân .84 Hình 3 - 7 màn hình chi tiết phòng .87 Hình 3 - 8 màn hình cài đặt trạng thái tìm trọ .90 Hình 3 - 9 màn hình đặt lịch hẹn .96 Hình 4 - 2 Thuật toán xác định tọa độ. 100 15 MỤC LỤC BẢNG Bảng 2 - 1Bảng nghiệp vụ của guest .33 Bảng 2 - 2 Bảng các quy định của guest .33 Bảng 2 - 3 Bảng các nghiệp vụ của user .39 Bảng 2 - 4 Bảng các quy định của user .40 Bảng 2 - 5 Bảng các nghiệp vụ của admin .46 Bảng 2 - 6 Bảng các quy định của admin .46 Bảng 2 - 7 Bảng SDLDL nghiệp vụ đăng ký .49 Bảng 2 - 8 Bảng SDLDL nghiệp vụ đăng nhập .50 Bảng 2 - 9 Bảng SDLDL nghiệp vụ tìm trọ .52 Bảng 2 - 10 Bảng SDLDL nghiệp vụ cập nhập thông tin cá nhân .53 Bảng 2 - 11 Bảng SDLDL nghiệp vụ đặt lịch hẹn.54 Bảng 2 - 12 Bảng SDLDL nghiệp vụ xem bài đăng .56 Bảng 2 - 13 Bảng SDLDL nghiệp vụ đăng bài.57 Bảng 2 - 14 Bảng SDLDL nghiệp vụ báo cáo sai phạm.59 Bảng 2 - 15 Bảng SDLDL nghiệp vụ bình luận .60 Bảng 2 - 16 Bảng SDLDL nghiệp vụ đóng mở trạng thái tìm trọ .61 Bảng 2 - 17 Bảng SDLDL nghiệp vụ xem báo cáo .62 Bảng 2 - 18 Bảng SDLDL nghiệp vụ quản lý bài đăng .63 Bảng 3 - 1Bảng danh sách xử lý màn hình tìm trọ .71 Bảng 3 - 2 Bảng danh sách xử lý màn hình trang chủ .74 Bảng 3 - 3 Bảng danh sách xử lý màn hình đăng bài .77 Bảng 3 - 4 Bảng danh sách xử lý màn hình quy trình đăng bài .81 Bảng 3 - 5 Bảng danh sách xử lý màn hình hồ sơ cá nhân .85 Bảng 3 - 6 Bảng danh sách xử lý màn hình chi tiết phòng .88 Bảng 3 - 7 Bảng danh sách xử lý màn hình cài đặt trạng thái tìm trọ .91 Bảng 3 - 8 Bảng danh sách xử lý màn hình đặt lịch hẹn .93 Bảng 4 - 1 Bảng mô tả attributes của class user .97 Bảng 4 - 2 Bảng mô tả method của class user .97 Bảng 4 - 3 Bảng mô tả attributes của class Post .98 Bảng 4 - 4 Bảng mô tả attributes của class Apointment .99 Bảng 4 - 5 Bảng mô tả method của class Apointment .99 16 GIỚI THIỆU ĐỀ TÀI 1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI :  Nhu cầu tìm nhà trọ cho người đi làm và sinh viên lúc nào cũng tồn tại, đỉnh điểm là thời gian nhập học, một số lượng lớn sinh viên phải tìm nhà trọ cho mình trong khoảng thời gian ngắn để ổn định và chuẩn bị học tập. Nhận thấy được vấn đề và tính cần thiết nên chúng tôi chọn đề tài này cho môn học của mình.

 Cơ hội kinh doanh cho ứng dụng tìm nhà trọ là cao, hiện tại trên thị trường số lượng sản phẩm đang có rất ít (chưa đến 10 ứng dụng cho cả Android và IOS) và tính năng của các ứng dụng trên thị trường còn hạn chế.  Chí phí để hoàn thành và đưa vào kinh doanh không cao (chỉ tốn chi phí đưa sản phẩm ra thị trường). MỤC TIÊU CỦA ĐỀ TÀI :  Xây dựng ứng dụng tìm nhà trọ với React Native, Nodejs, ExpressJs, MongoDB.  App hướng đến 3 đối tượng người dùng: Người tìm trọ , chủ trọ, người tìm người ở ghép.

o Guest :  Guest có thể sử dụng các tính năng như đăng ký, đăng nhập, tìm trọ.  Đối với tính năng tìm trọ, guess có 2 sự lựa chọn : tìm các phòng trọ trống, và tìm phòng ghép theo khu vực hoặc tìm xung quanh vị trí của guess. o Thành viên:  Cũng có tính năng tìm trọ như guest  Cập nhật thông tin cá nhân ( họ tên, sđt )  Đặt lịch hẹn : Người dùng sẽ đặt lịch hẹn với người đăng tin để xem phòng, các thông tin phải cung cấp bao gồm : Tên người đặt hẹn, Sdt, Ngày giờ đặt hẹn.  Tính năng đăng phòng : thực hiện thông qua 4 bước : 17  Bước 1 : Cho biết vị trí của phòng trọ, bao gồm tên TP, Quận-huyện, phường, tên đường, số nhà.

 Bước 2 : Thông tin phòng trọ gồm loại phòng, số lượng, sức chứa, giới tính, diện tích phòng, chi phí.  Bước 3 : Cho người dùng biết những tiện ích nào có trong phòng trọ mà bạn cho thuê: WC riêng, Chỗ để xe, cửa sổ, an ninh, wifi, tự do giờ giấc, chủ riêng, máy lạnh, máy nước nóng, nhà bếp, tủ lạnh, máy giặt, gác lửng, giường, tủ đồ, tivi, thú cưng (5-10 hình ảnh chụp phòng trọ).  Bước 4 : Xác nhận thông tin để đăng phòng gồm số điện thoại, tiêu đề, nội dung mô tả, thời gian người thuê có thể chuyển đến.  Quản lí bài đăng : người dùng có thể sửa hoặc xóa bài đăng.

 Mở/đóng trạng thái tìm trọ : ở tính năng này người dùng có thể để lại sự quan tâm đến khu vực nào đó, hoặc quan tâm về giá, các tiện ích của phòng trọ mà người dùng mong muốn. Khi có những phòng trọ thích hợp với yêu cầu, người dùng sẽ được thông báo.VD: Người dùng A mong muốn chuyển trọ đến khu vực xung quanh trường đại học Sư Phạm Kỹ Thuật, nhưng hiện tại các phòng trọ ở đây đều quá tải hoặc chất lượng tệ hơn mong muốn của người dùng, người dùng A chỉ cần chọn các option về giá, tiện ích mà A mong muốn. Khi bất kì phòng trọ nào trong khu vực ấy thích hợp, hệ thống sẽ tự động thông báo về cho A. o Admin:  Quản lí các bài đăng : Xóa bài, Duyệt bài.

KẾT CẤU ĐỀ TÀI :  Khảo sát hiện trạng  Mô hình hóa yêu cầu và thiết kế cơ sở dữ liệu  Thiết kế giao diện và xử lý 18  Lập trình  Kiểm thử phần mềm 19 CHƯƠNG 1 : KHẢO SÁT HIỆN TRẠNG 1.2*/170 đánh giá) Hình 1 - 1 Nhà trọ 360 Hình 1 - 2 Nhà trọ 360 20 Hình 1 - 3 Nhà trọ 360  Ưu điểm : o Đáp ứng được tính tiện dụng : người dùng có thể dễ dàng sử dụng được chức năng tìm trọ ngay lần đầu sử dụng. o Màu sắc không tương phản, thiện cảm với người dùng. o Hiện thông tin trọ ngày khi vào ứng dụng cùng thông tin(địa chỉ, diện tích). o Component phân chia hợp lý, hình ảnh và chữ không quá nhỏ.

o Có thể chú ý ngay vào giá tiền vì được thiết kế nổi bật. o Sử dụng icon cho phần tiện ích giúp dễ hình dung hơn. o Có chức năng gọi điện, chỉ đường và chia sẽ. o Có chức năng hỗ trợ lưu phòng.

21  Nhược điểm : o Bắt buộc đăng nhập khi muốn vào ứng dụng. o Chức năng lưu phòng trọ rất khó để nhận biết, khi click vào không hiển thị thông báo đã lưu hay bất kì hành động nào. Khi out ứng dụng và truy cập lại thì mới hiển thị thông tin phòng đã lưu, không cập nhập khi nhấn vào button lưu. o Chức năng tìm kiếm không trả về khoảng cách, và trong ứng dụng cũng không đề cặp đến khoảng cách từ nơi chỉ định đến những phòng trọ tìm được.