Souce code Android, iOS, HTML CSS, JS ứng dụng tìm nhà trọ tích hợp chức năng dẫn đường, định vị GPS +báo cáo

Source code ứng dụng tìm nhà trọ cho phép tìm kiếm thời gian thực theo định vị GPS, kết quả được hiển thị trực tiếp trên bản đồ với thông tin cần thiết, tích hợp chức năng dẫn đường tiện lợi. Việc tìm kiếm nhà trọ sẽ trở nên đơn giản, nhẹ nhàng hơn.
Ngoài ra, nếu bạn có phòng cho thuê hay muốn nhượng lại phòng cũ, với ứng dụng, việc đăng tải thông tin sẽ trở nên vô cùng nhanh chóng. Chỉ với một vài thao tác đơn giản, thông tin nhà trọ của bạn sẽ được chuyển đến hàng trăm ngàn người đang có nhu cầu cần thuê.

Giao diện trang chủ

Giao diện trang chủ là danh sách các bài đăng theo thời gian mới nhất, khi kích và Tiêu đề hoặc nút “Xem chi tiết” thì ứng dụng sẽ mở trang chi tiết về bài đăng đó.
Người dùng cũng có thể bấm vào số điện thoại để có thể gọi ngay cho chủ nhà, tính năng này rất tiện.

Thiết kế

Bản thiết kế cuối cùng của giao diện bao gồm các chức năng chính:
• Trang chủ: danh sách các bài đăng phòng trọ mới nhất.
• Đăng tin: Giao diện đăng tin dành cho người dùng đã đăng kí.
• Bản đồ: Giao diện bản đồ trực quan có hiển thị các marker ứng với các nhà trọ.
• Tìm kiếm: Giao diện tìm kiếm dựa trên từ khóa và có thể lọc theo các yêu cầu cụ thể.
• Chi tiết phòng trọ: Giao diện hiển thị thông tin chi tiết của bài đăng.
Ngoài ra còn có chỉnh sửa giao diện đăng nhập, đăng kí, đổi mật khẩu có sẵn của gói template useraccount:materialize thuận tiện cho người dùng

Giao diện đăng tin

Giao diện đăng tin: Bao gồm các form nhập thông tin cơ bản cho chủ phòng trọ, dồng thời có khung bản đồ để định vị hoặc đính vị trí.
Về cơ bản giao diện này nhận được phản hồi rất tốt từ người dùng thực tế nên không có gì thay đổi đáng kể.
Giao diện chọn vị trí trên bản đồ có Marker để đánh dấu vị trí, có thể di chọn và di chuyển đến vị trí cần đính. Hoặc người dùng có thể bấm nút “Định vị” để lấy ngay vị trí hiện tại qua GPS, bấm nút “Lấy từ địa chỉ” để bản đồ tự tìm kiếm dựa trên thông tin địa chỉ đã nhập ở trên.

Giao diện Bản đồ

Giao diện Bản đồ: Bản đồ có gắn các vị trí của các phòng trọ.
Người dùng có thể gõ địa chỉ, sau đó bấm nút “Tìm từ địa chỉ” để di chuyển đến vùng cần xem. Tương tự với nút “Định vị”.
Khi nhấp vào các Marker thì sẽ hiện một popup hiển thị thông tin cơ bản của phòng trọ.

Giao diện Tìm kiếm 

Giao diện Tìm kiếm: Tìm kiếm và lọc kết quả dựa trên các yêu cầu như loại nhà trọ, giá, diện tích…
Người dùng có thể gõ từ khóa và ứng dụng sẽ tìm kiếm trong các bài đăng mọi thông tin từ tiêu đề, số đt nếu chứa từ khóa (cả có dấu hoặc không dấu đều được) thì sẽ ra kết quả.

Chi tiết phòng trọ

Tương tự giao diện đăng bài nhưng đây chỉ là thông tin chỉ xem.
Khung bản đồ có phím chức năng “Dẫn đường” giúp tìm đường từ vị trí GPS hiện tại tới vị trí của phòng trọ. Tính năng này rất hữu ích theo phản hồi từ các người dùng thật.
Nút “Xem địa chỉ” dùng để di chuyển đến vị trí phòng trọ trên bản đồ.
Ngoài ra nếu bài đăng này do chính người dùng đang đăng nhập đăng lên thì sẽ có thêm nút “Xóa bài đăng” giúp xóa bài đăng trên Ứng dụng.

Cấu trúc project

Project được phát triển trên nền tảng Meteor JS, một nền tảng dựa trên Node.js (Javascript Server-side), cung cấp khả năng thiết kế giao diện trên HTML, CSS và Javascript (Web, Mobile) và build ra ứng dụng trên Web, hoặc Mobile như Android, iOS.
Giao diện trên web lẫn mobile (Android/iOS) đều giống nhau, được thiết kế bởi các template đc viết bằng HTML, được tổ chức trong thư mục /client/template.

Ứng dụng này sử dụng thư viện Materialize CSS và các style CSS riêng trong thư mục /client/styles.

Hướng dẫn cài đặt

Cài đặt Meteor

HĐH Mac, Linux: Chạy dòng lệnh sau curl https://install.meteor.com/ | sh

HĐH Windows: Download file cài đặt tại địa chỉ https://install.meteor.com/windows

Khởi chạy ứng dụng Server:

meteor run

Ngoài ra còn có thể deploy lên trên internet theo hướng dẫn: https://www.meteor.com/tutorials/blaze/deploying-your-app Build ứng dụng client ra nên tảng iOS hoặc Android: https://www.meteor.com/tutorials/blaze/running-on-mobile