5.1. Trang người dùng
5.1.1. Trang đăng nhập (Login)
- Có các input để người dùng nhập thông tin đăng nhập.
- Button “Login” để người dùng đăng nhập vào trang web.
- Button “Register” để người dùng đăng kí tài khoản.
Hình 5. Trang dăng nhập 5.1.2. Trang đăng kíÁ́ (Register)
- Có các input để người dùng nhập thơng tin đăng kí.
- Button “Register” để người dùng đăng kí tài khoản.
Hình 5. Trang đăng ký 5.1.3. Trang chủ (Home)
- Chứa các chức năng của khách hàng.
- Chứa textbox để tìm kiểm sản phẩm.
- Có icon giỏ hàng để người dùng đã đăng nhập có thể mua sản phẩm.
5.1.4. Trang sảả̉n phẩm (Products)
- Chứa tất cả các loại sản phẩm trong cửa hàng.
- Thanh “Filter” cho phép khách hàng tìm sản phẩm theo loại.
- Thanh “SortBy” cho phép khách hàng xem sản phẩm theo một tiêu
chuẩn nào đó.
Hình 5. Trang sảả̉n phẩm 5.1.5. Trang chi tiết sảả̉n phẩm
5.1.6. Trang danh sách địa chỉ khách hàng
- Hiển thị danh sách sản phẩm.
- Button “X” cho phép người dùng xoá địa chỉ đã chọn.
- “ADD New Address” cho phép người dùng thêm một địa chỉ mới.
Hình 5. Trang danh sách địa chỉ khách hàng
5.1.7. Trang giỏ hàng
- Button “+”, “-” cho phép người dùng chỉnh số lượng sản phẩm.
- Button “X” cho phép người dùng xoá sản phẩm không muốn chọn.
- Button “Checkout” cho phép người dùng tiếp tục mua hàng.
5.1.8. Trang đặt hàng
- Danh sách địa chỉ cho phép người dùng chọn địa chỉ giao hàng.
- Input “Your Discount Code” cho phép người dùng chọn mã giảm giá.
- Button “Order” cho phép người dùng dặt hàng thanh toán tại nhà.
- Button “Paypal” cho phép người dùng đặt hàng thanh tốn online.
Hình 5. Trang đặt hàng 5.1.9. Trang xem lịch sử giao dịch
- Button Cancel cho phép người dùng huỷ hàng khi hàng chưa được
xác nhận.
- “ViewDetail” cho phép người dùng xem chi tiết đơn hàng.
5.2. Trang quảả̉n trị người dùng5.2.1. Trang chủ 5.2.1. Trang chủ
- Hiển thị các thống kê của cửa hàng.
Hình 5. Trang chủ (Admin) 5.2.2. Trang quảả̉n lý người dùng
- Hiển thị thông tin của khách hàng.
- Button “BlockAcount” sẽẽ̃ khố tài khoản khách hàng nếu vi phạm chính
sách của cửa hàng.
5.2.3. Trang quảả̉n lý sảả̉n phẩm
- Button “Create Product” cho phép tạo một sản phẩm mới.
- Icon “Edit” cho phép sửa thông tin sản phẩm
- Icon “X” cho phép xoá sản phẩm.
- Button “Prev/Next” có chức năng phân trang
Hình 5. Trang quảả̉n lý sảả̉n phẩm 5.2.4. Trang quảả̉n lý loại sảả̉n phẩm
- Input “Search” cho phép người dùng tìm kiếm loại sản phẩm.
- Input “Category” cho phép người dùng thêm/sửa loại sản phẩm
5.2.5. Trang quảả̉n lý đơn hàng
- Icon “Export Bill” cho phép người quản trị xuất đơn hàng khi gọi điện
xác nhận thành công
- “ViewDetail” cho phép người dùng xem chi tiết đơn hàng.
Hình 5. Trang quảả̉n lý đơn hàng 5.2.6. Trang chi tiết đơn hàng
5.2.7. Trang xuất hoá đơn
- Button “Bill” dùng để in hoá đơn.
CHƯƠNG 6: CÀÀ̀I ĐẶT VÀÀ̀ THỬ NGHIỆM 6.1Để cài đặt ứÁ́ng dụ ̣ng
Máy phải có npm
Máy có cài đặt NodeJS
Máy phải có Git Bash
6.1.1. Các bước cài đặt
Ở bài hướng dẫn này, nhóm sử dụng IDE là Visual Studio Code
Bước 1:
Clone hoặc download project từừ̀ link github:
https://github.com/sttinh99/client (bên phíÁ́a client) https://github.com/sttinh99/API-TLCN (bên server) Bước 2:
Sau khi giải nén, sẽẽ̃ được hai thư mục là client và API-TLCN
Bước 3:
Mở hai thư mụ ̣c đó lên bằng visual studio code ta sẽ được giao diện như sau:
Hình 6. Giao diện visual studio code (server)
Nếu tại phía server chưa có file env. Tạo một file có tên là .env và điền vào các thơng tin như hình dưới đây. Nó được sinh ra để ta có thể cấu hình các thơng số cơ bản về mơi trường của project một cách dễ dàng hơn.
Bước 4:
Tại mỗi giao diện ta mở terminal bằng cách:
Tại thanh taskbar trên cùng ta chọn Terminal New Termianl hoặc bấm Ctrl Shift + Sau khi cửa sổ Command Line tích hợp hiện ra, chạy lệnh “npm install” để cập nhật những thư viện, package cịn thiếu trên máy mà project cần
Hình 6. Màn hình Intergrate Command Line (client)
Bước 5:
Tại giao diện phía client chạy lệnh “npm start” ta sẽẽ̃ được kết quả như sau.
Hình 6. Màn hình Intergrate Command Line (client)
Tại giao diện phía server chạy lệnh “npm run dev” ta sẽẽ̃ được kết quả như sau.
Hình 6. Màn hình Intergrate Command Line (server)
6.2Kiểm thử phầÀ̀n mềm
Sau khi thực hiện xong việc kiểm thử thì nhóm xin trình bày một số test case tiêu biểu.
6.2.1. ChứÁ́c năng đăng ký
STT Test Case
Description
1 Đăng ký tai khoan
user
2 Kiểm tra những
trường hợp không diền đầy đủ
3 Kiêm tra nhâpp̣
email đa tồn tại trong hê p̣thông
4 Kiểm tra mật khẩu
6.2.2. ChứÁ́c năng đăng nhập
STT Test Case
Description
1
Kiểm tra việc đăng nhập khi chưa có tài khoản
2 Đăng nhâpp̣ băng tai
khoan user
3 Đăng nhâpp̣ băng tai
khoan admin
Bảả̉ng 6. Kiểm thử chứÁ́c năng đăng nhập 6.2.3. ChứÁ́c năng quên mật khẩu
STT Test Case
Description
1 Kiểm tra khi nhập tài
khoản chưa tồn tại trong hệ thống 2
Kiểm tra việc nhập email đúng
6.2.4. ChứÁ́c năng tạo lại mật khẩu
STT Test Case
Description
1
Kiểm tra mật khẩu với việc xác nhận mật khẩu sai
2
Kiểm tra mật khẩu với việc xác nhận mật khẩu đúng
CHƯƠNG 7: TỔNG KẾT7.1. Kết quảả̉ đạt được 7.1. Kết quảả̉ đạt được
Kỹ năng làm việc nhóm tốt, kỹ năng giao tiếp trong team, phân cơng công việc khi làm dự án ngắn ngày.
Kỹ năng tìm kiếm giải pháp trên mạng cho những khúc mắc trong quá trình xây dựng đồ án.
Biết cách áp dụng cơ sở dữ liệu không quan hệ (noSQL) để xây dựng database cho một hệ thống, xây dựng được một web server REST API có thể phục vụ cho ứng dụng web lẫn ứng dụng di động, xây dựng giao diện trang web dưới dạng Single Page Application bằng React.
7.2. Ưu điểm và nhược điểm7.2.1. Ưu điểm 7.2.1. Ưu điểm
Website được thiết kế với giao diện dễ nhìn, thân thiện với người dùng. Thao tác đặt mua và thanh tốn đơn giản.
Có chức năng thanh tốn online để khách hàng có thể thuận tiện hơn trong việc mua sản phẩm.
7.2.2. Nhược điểm
Về giao diện, vẫn cịn nhiều thiếu sót trong việc thiết kế nên website chỉ tương thích với máy tính và vẫn cịn nhiều trang vẫn chưa thực sự ổn trong việc thiết kế. Về vấn đề tương tác admin với khách hàng, do khơng tích hợp chat box nên khách hàng chỉ có một cách duy nhất để phản hồi với admin là thông qua email.
7.3. Kinh nghiệm đạt được
Học được cách quản lýý́ source control cơ bản, hỗ trợ rất tốt trong việc làm dự án nhiều người.
Học được cách phân chia các component để dễ quản lýý́ source code. Học được cách phân bố thời gian hợp lýý́.
7.4. Hướng phát triển trong tương lai
Mở rộng và phát triển thêm các chức năng như chat realtime, đánh giá sản phẩm, flash sale…
Phát triển cửa hàng thành một chuỗi cửa hàng. Hiệu suất cho trang web.
TÀÀ̀I LIỆU THAM KHẢO [1]. https://reactjs.org/tutorial/tutorial.html [2]. https://mongoosejs.com/docs/guide.html [3]. https://expressjs.com/en/4x/api.html [4]. https://viblo.asia/p/cach-phan-chia-folder-va-dat-ten-components-cho-mot-app-react- aWj53891K6m [5]. https://viblo.asia/p/tim-hieu-ve-mongodb-4P856ajGlY3 [6]. https://phongvu.vn [7]. https://www.codehub.com.vn/Xay-Dung-Ung-Dung-React-Voi-MERN-Stack- MongoDB-Express-js-ReactJS-va-Node-js