6. Kết cấu của đề tài
3.3.2. Giao diện Front-end của thợ
3.3.2.1. Đăng ký
Hình 3.5 Giao diện đăng ký. Hình 3.6 Giao diện đăng ký khi bị lỗi.
3.3.2.2. Đăng nhập
Hình 3.7 Giao diện đăng nhập. Hình 3.8 Giao diện đăng nhập khi bị lỗi sai tài khoản hoặc mật khẩu.
Tại màn hình đăng nhập nếu lỡ quên mật khẩu thì có thể ấn vào dòng quên mật khẩu sau đó trang web sẽ hiển thị một popup người dùng có thể nhập email tài khoản đó vào để khôi phục tài khoản.
Sau khi đăng nhập thành công website sẽ tự động lấy vị trí hiện tại gửi lên server.
3.3.2.3. Trang cá nhân
Trong trang cá nhân, cột đầu tiên có tên là Chi tiết cá nhân nó chứa các thông tin của tài khoản, trạng thái online của tài khoản và nếu bạn là khách thì có thể chọn thợ thích hợp để nhắn tin trực tiếp với người đấy.
Với cột đầu tiên người dùng có thể xem các giao dịch đã được đánh giá bằng
cách click vào dòng để hiển thị popup thông tin
các giao dịch.
Hình 3.10 Giao diện Popup hiển thị lịch sử đã giao dịch
Cột thứ hai có tên là Danh sách hồ sơ chứa các thông tin các hồ sơ đã nộp và đã được kích hoạt bởi admin.
Click vào nếu muốn sửa thông tin cá nhân,
sau khi ấn nút sửa thông tin thì sẽ tự động chuyển tới trang để cập nhật thông tin cá nhân như hình dưới.
Hình 3.11 Giao diện cập nhật thông tin cá nhân.
Khi cập nhật thành công sẽ hiện một thông báo thành công và ngược lại nếu có lỗi trong quá trình cập nhật thì website sẽ hiển thị lỗi.
3.3.2.4. Hồ sơ Đăng hồ sơ Đăng hồ sơ
Hình 3.12 Giao diện đăng hồ sơ.
Ở dòng danh mục ngành nghề đó là một drop-down nhằm hiển thị danh sách các danh mục ngành nghề mà người thợ này chưa đăng ký.
Khi người dùng nhập tất cả các thông tin cần thiết và bắt đầu ấn đăng hồ sơ nếu gửi thành công sẽ hiển thị thông báo và ngược lại nếu có lỗi cũng sẽ hiển thị tên lỗi.
Danh sách hồ sơ đang đợi duyệt
Đây là giao diện danh sách hồ sơ đợi duyệt đây có thể tìm kiếm theo tên danh mục hoặc sắp xếp theo năm kinh nghiệm và ngày nạp hồ sơ.
Nếu muốn chỉnh sửa hồ sơ đang trong quá trình đợi thì có thể chọn vào nút để mở popup cập nhật thông tin hồ sơ.
Hình 3.14 Giao diện chỉnh sửa hồ sơ.
Hoặc có thể xóa hồ sơ nào đó bằng cách ấn vào nút sau đó website hiện lên popup xác nhận một lần nữa.
Danh sách hồ sơ đã duyệt
Hình 3.15 Giao diện danh sách các hồ sơ đã được admin duyệt.
Hình 3.16 Giao diện chat thời gian thực giữa thợ và khách.
Ở đây nếu màu nền của danh sách như Nguyễn Thành Đạt thì người đó chưa được trả lời tin nhắn còn nền màu trắng như Trần Đình Chiến thì tin nhắn đã được trả lời.
Bên cạnh tên của người nhắn có dấu chấm màu xanh lúc đó người đó đang online còn ngược lại là màu xám thì chứng tỏ người đấy hiện đang không online.
Nếu muốn nhắn bất kỳ điều gì cho người kia thì gõ vào ô input Nhập tin nhắn sau đó ấn Gửi hoặc nhấn nút Enter để tiến hành gửi nội dung lên server. Server xử lý xong gửi nội dung tới người nhận.
Trong quá trình nói chuyện có thể không đồng ý cho người này sửa thiết bị thì ấn để chuyển sang tìm kiếm người khác phù hợp hơn.
Sau khi mọi thứ đã được sửa chữa thành công thì ấn vào . Tiến hành đánh giá sao cho đối phương khi cả hai đều đánh giá giao dịch sẽ hoàn tất.
Hình 3.17 Giao diện đánh giá của một giao dịch.
3.3.3. Giao diện Front-end của khách
Giao diện của khách tương tự giao diện của thợ nhưng giao diện khách không có hồ sơ mà thay vào đó là tìm kiếm thợ theo danh mục ngành nghề và theo khu vực và hiển thị lên maps.
Hình 3.18 Giao diện tìm kiếm thợ
Trên giao diện có một danh sách chưa tất cả danh mục và một danh sách để người dụng chọn chứa tất cả các tên Tỉnh, Thành Phố, Quận, Phường, Xã,...
Hình 3.19 Giao diện khi đã được chọn một danh mục.
Hình trên, khi tác giả chọn danh mục Sửa chữa, bảo dưỡng bình nóng lạnh thì xuất hiện hai icon đại diện cho 2 thợ có thể sửa chữa được bình nóng lạnh ở khu vực này.
Hình 3.20 Thông tin của một thợ hiển thị khi được chọn.
Khi chọn một thợ, thông tin của thợ đó được hiển thị ra với các thông tin cơ bản và người dùng có thể xem rõ hơn thông tin của người thợ này bằng cách ấn
vào tên của thợ đấy . Nếu muốn nhắn tin trao đổi thì ấn website chuyển đến giao diện chat.
3.3.4. Giao diện Front-end của Admin
Website Admin bạn không thể đăng ký tài khoản mới như thợ hoặc khách. Ở website này có thêm một số quyền quản lý hệ thống như quản lý danh mục ngành nghề, quản lý tài khoản thợ và khách, ...
Hình 3.21 Giao diện đăng nhập của Admin
3.3.4.1. Trang tổng quan
Khi đăng nhập thành công website sẽ chuyển tới trang tổng quan với chức năng thống kê tổng các tài khoản, tổng các hồ sơ theo từng danh mục ngành nghề và thống kê tất cả các giao dịch trên hệ thống.
Hình 3.22 Giao diện trang tổng quan.
Giao diện trang tổng quan sẽ hiện thị dữ liệu dưới dạng biểu đồ với mục đích admin dễ so sánh dữ liệu.
Hình 3.23 Giao diện duyệt hồ sơ của thợ.
Khi thợ đăng hồ sơ lên thì admin tiến hành duyệt hồ sơ bằng cách nhấn vào nút , nếu hồ sơ không đạt yêu cầu thì tiến hành xóa hồ sơ sử dụng nút một popup xuất hiện.
Hình 3.24 Giao diện Popup khi nhấn xóa một hồ sơ.
3.3.4.3. Danh mục
Bên dưới là giao diện chỉnh sửa danh mục hoặc có thể thêm mới.
Để chỉnh sửa một danh mục ta chọn website hiển thị một popup. Ở đây người dùng có thể upload một ảnh lên server để làm ảnh đại diện cho danh mục đó.
Hình 3.26 Giao diện cập nhật một danh mục.
Để tạo mới một danh mục ta chọn website sẽ hiện một popup như khi cập nhật một danh mục sau đó admin nhập tên danh mục và upload ảnh khi thêm thành công website sẽ hiển thị thông báo thành công, ngược lại thì hiển thị thông báo lỗi. Admin sẽ xem được tất cả hồ sơ của một danh mục bằng cách ấn vào tên của một danh mục bất kỳ popup hiện ra như hình bên dưới chứa thông tin hồ sơ.
Hình 3.27 Popup hiển thị danh sách các hồ sơ trong một danh mục.
3.3.4.4. Quản lý Danh sách thợ Danh sách thợ
Hình 3.28 Danh sách hiển thị tài khoản của thợ.
Ở giao diện này Admin có thể tìm kiếm theo tên thợ, sắp xếp theo họ tên, ngày tạo tài khoản,...
Cột trạng thái với ký hiệu biểu hiện tài khoản này đã được xác nhận bằng email, với ký hiệu thì tài khoản đang ở trạng thái đợi xác nhận từ email và trạng thái cuối cùng là thể hiện tài khoản đã bị chặn và không đăng nhập vào hệ thống được nữa.
Với nút để chặn một tài khoản và nút giúp mở khóa một tài khoản đã bị khóa trước đó.
Danh sách khách
Chức năng tương tự như danh sách thợ.
Hình 3.29 Giao diện quản lý danh sách tài khoản khách.
Hình 3.30 Giao diện danh sách các giao dịch kèm theo trạng thái.
Với các ký hiệu bên cột trạng thái thể hiện cho trang thái 2 bên đã đánh giá lẫn nhau, ký hiệu thể hiện giao dịch này đang trong trạng thái chờ cuối cùng là trạng thái thể hiện giao dịch này đã bị hủy. Ngoài ra còn có các chức năng khác như tìm kiếm thợ khách theo tên hoặc sắp xếp để dễ tìm kiếm.
KẾT LUẬN
Kết quả đạt được:
Qua quá trình nghiên cứu đề tài Hệ thống cung cấp dịch vụ hỗ trợ tìm kiếm nhóm thợ theo khu vực trên nền tảng Website, tác giả đã đạt được một số kết quả: Nắm được cách tạo server bằng môi trường Node.js và thao tác với cơ sở dữ liệu
MySQL.
Xây dựng ứng dụng Back-end sử dụng framework Express trả về JSON.
Xây dựng ứng dụng Front-end single page application sử dụng thư viện Angular.js.
Nghiên cứu về Websocket sử dụng Socket.io để làm ứng dụng nhắn tin thời gian thực.
Thuận lợi:
Được sự hướng dẫn tận tình của các thầy cô và các bạn.
Vận dụng được các kiến thức ở trường đã học vào chương trình. Javascript có một cộng đồng rất lớn và nhiệt tình.
Khó khăn:
Khó khăn khi bắt đầu làm quen với javascript bởi sử dụng rất nhiều hàm bất đồng bộ.
Khó triển khai với hệ thống khi nhiều người sử dụng.
Định hướng phát triển trong tương lai:
Tìm giải pháp để có thể triển khai ứng dụng được cho nhiều người tiếp cận hơn và trong phạm vi lớn hơn.
Thêm tính năng cập nhật vị trí thời gian thực.
Sẽ yêu cầu thông tin hồ sơ chính xác hơn khi thợ nộp hồ sơ. Khách có thể đăng tin tìm thợ sửa chữa thiết bị.
TÀI LIỆU THAM KHẢO
[1] [NODEJS] LỰA CHỌN MỚI CHO NỀN TẢNG SERVER SIDE, truy cập ngày 16/10/2018, https://tech.3si.vn/2017/07/10/nodejs-lua-chon-moi-cho-nen-tang- server-side/
[2]Ho Van Cuong - Giới thiệu về Node.js, ngày truy cập 10/10/2018,
https://viblo.asia/p/gioi-thieu-ve-nodejs-3P0lPyRg5ox
[3]Minh-Trung Nguyễn - Node.js và biến môi trường .env, ngày truy cập 10/10/2018, https://kipalog.com/posts/Node-js-va-bien-moi-truong--env
[4]Nguyễn Văn Cảnh - NodeJs Với Express FrameWork, ngày truy cập 11/10/2018,
https://viblo.asia/p/nodejs-voi-express-framework-rQOvPKVgkYj
[5][NODEJS] NPM là gì?, truy cập ngày 11/10/2018,
https://o7planning.org/vi/11925/npm-la-gi
[6]Tran Quoc Dat - Websocket là gì ?, truy cập ngày 11/10/2018,
https://viblo.asia/p/websocket-la-gi-Ljy5VxkbZra
[7]Phan Đức Việt - Khái niệm về JSON Web Token, truy cập ngày 11/10/2018,
https://techmaster.vn/posts/33959/khai-niem-ve-json-web-token
[8][MySQL] MySQL là gì, truy cập ngày 15/10/2018