- Phân tích frontend của ứng dụng ứng dụng - Đặt ra bài toán: + Xây dựng ứng dụng bán hàng, quản lý mặt hàng nội bộ trên nền tảng smartphone để nhân viên có thể xử lý các tác vụ một cách
Giới thiệu đề tài và nhiệm vụ đề tài
1.1 Mục tiêu và phạm vi đề tài
- Phân tích chi tiết các chức năng của người dùng hệ thống
- Phân tích frontend của ứng dụng ứng dụng
- Công nghệ sử dụng cho ứng dụng:
• Framework React Native Redux Pattern
- Hiện tại nhân viên kinh doanh vẫn phải phân phối hàng hóa, quản lý mặt hàng, kho hàng cho các cửa hàng bán lẻ trong hệ thống thông qua ứng dụng web. Điều này có những nhược điểm nhất định như phụ thuộc vào máy tính gây bất tiện, thiếu tính cơ động tùy biến
+ Xây dựng ứng dụng bán hàng, quản lý mặt hàng nội bộ trên nền tảng smartphone để nhân viên có thể xử lý các tác vụ một cách cơ động hơn
+ Cung cấp các chức năng cơ bản của một ứng dụng bán hàng: o Đăng nhập/ Đăng xuất o Quản lý khách hàng, kho hàng, chính sách giá hàng. o Quản lý danh mục hàng hóa, thêm ảnh theo từng sản phẩm o Hiển thị mặt hang theo kho hàng o Chức năng thêm mới, cập nhật, xóa thông tin khách hang, mặt hàng, kho hàng
Cơ sở lý thuyết và công nghệ sử dụng
Ngôn ngữ JavaScript
2.1.1 Ngôn ngữ JavaScript là gì?
- Javascript (JS) là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa Javascript được sử dụng rộng rãi trong các ứng dụng Website Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, trên máy tính lẫn điện thoại
- Javascript sinh ra để xử lý các sự kiện diễn ra trên trang web, làm hiệu ứng cho các website Nhưng giờ đây Javascript không chỉ dừng lại ở đó, bạn có thể sử dụng Javascript để lập trình ứng dụng di động, ứng dụng desktop, web…
2.1.2 Ưu điểm về Javascript o Ngôn ngữ linh hoạt và có thể được sử dụng theo nhiều cách qua Node.js o Nhanh hơn khi duyệt phía máy khách và không cần biên dịch o Thuận tiện để làm việc và dễ kiểm soát o Không có tiêu chuẩn thiết lập và không có nhiều chỗ để thay đổi.
React Native Framework
2.2.1 Giới thiệu về React Native
- React Native là 1 framework phát triển ứng dụng di động do Facebook phát triển nhằm mục đích giải quyết bài toán hiệu năng của Hybrid và bài toán chi phí khi mà phải viết nhiều loại ngôn ngữ native cho từng nền tảng di động
- Chỉ với 1 bộ source code viết bằng javascript, bạn có thể build ra ứng dụng cho cả 2 nền tảng iOS và Android rất dễ dàng Không giống các ứng dụng đa nền tảng khác như web hay hybrid, React Native vẫn sử dụng cốt lõi là các module native của iOS và Android Từ đó hiệu năng của ứng dụng viết bằng React Native là hoàn toàn vượt trội
2.2.1 Ưu điểm của React Native
- Tiết kiệm thời gian học: Việc học từng loại ngôn ngữ cho từng nền tảng thường rất khó và mất nhiều thời gian Tuy nhiên, với React Native, bạn chỉ cần học duy nhất một bộ công cụ
- Tái sử dụng code: Trong lập trình phần mềm, React Native là công cụ tái sử dụng code hiệu quả nhất mang lại các lợi thế như duy trì ít code, tận dụng tốt nguồn nhân lực,
- Cộng đồng lớn: React Native đang ngày càng phổ biến và nhận được sự đóng góp của nhiều lập trình viên Đặc biệt nó được xây dựng và hỗ trợ cho Facebook với lượng lớn cộng tác viên hoạt động năng nổ
- Hot reloading: Với React Native, bạn sẽ không cần phải tốn quá nhiều thời gian để tổng hợp app mỗi khi có sự thay đổi Bạn chỉ cần làm mới app trong thiết bị,emulator hoặc simulator.
Redux
- Redux là một vùng chứa trạng thái có thể dự đoán được hay còn biết đến là một thư viện của JavaScript Thư viện này được thiết kế để giúp bạn viết các ứng dụng JavaScript có thể hoạt động nhất quán trong các môi trường máy khách, máy chủ và môi trường số, đồng thời cho phép dễ dàng kiểm tra
- Mặc dù nó được sử dụng chủ yếu với React, nhưng nó có thể được sử dụng với bất kỳ khung hoặc thư viện JavaScript nào khác Nó rất nhẹ ở mức 2KB (bao gồm cả phụ thuộc), vì vậy không phải lo lắng về việc nó làm cho ứng dụng có kích thước lớn
- Với Redux, trạng thái ứng dụng được giữ trong một "store" và mỗi thành
Hình 1 Nguyên lý hoạt động của Redux
- Redux có 4 thành phần như sau: o Action: là nơi mang các thông tin gửi từ ứng dụng đến Store, mô tả mình muốn làm cái gì với cái store này Các thông tin này là 1 object mô tả những gì đã xảy ra Action gồm 2 phần là type (kiểu mô tả action), và giá trị tham số truyền lên
Hình 2 Ví dụ về Action trong Redux o Reducers: Action có nhiệm vụ mô tả những gì xảy ra nhưng lại không chỉ rõ phần state nào của response thay đổi và thay đổi như thế nào -> việc này sẽ do Reducer đảm nhiệm
Hình 3 Ví dụ về Reducer trong Redux o Store là 1 object lưu trữ tất cả state của ứng dụng, cho phép truy cập state và update state o View là phần giao diện của mình, hiển thị giao diện thông qua state của store.
- Nguyên tắc Redux như sau: o Redux sử dụng kiến trúc 1 chiều: action -> reducer -> store -> view o State một js object) o Những thay đổi của redux state được thực hiện bởi Pure functions (reducer)
- Khả năng dự báo về kết quả
- Khả năng maintain bảo trì: Nghiêm ngặt trong cấu trúc làm cho code trở nên dễ dàng bảo trì hơn
- Khả năng tổ chức: Redux chặt chẽ hơn về việc tổ chức code, điều đó làm cho code trở nên nhất quán và dễ dàng hơn khi làm việc nhóm
- Server rendering: Nó rất hữu ích đặc biệt là cho việc khởi tạo render, người dùng sẽ có trải nghiệm tốt hơn hoặc cho việc tối ưu bộ mấy tìm kiếm
- Developer tools: Developer có thể theo dõi mọi thứ xảy ra trong ứng dụng từ các actions đến sự thay đổi của state
- Cộng đồng và hệ sinh thái: Cộng đồng chia sẽ lớn nhiều article, example https://github.com/xgrommx/awesome - redux
- Dễ dàng test: Bởi Redux code hầu hết là các hàm nhỏ và độc lập
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Các yêu cầu về chức năng
- Xây dựng ứng dụng di động cho phép người dùng đăng nhập vào hệ thống thực hiện được các chức năng cơ bản như xem mặt hàng, thao tác với kho hàng, danh mục hàng hóa, danh mục khách hàng, thêm sửa xóa mặt hàng, khách hàng…
3.2.1 Mô tả các tác nhân Ứng dụng bán hàng gồm 1 tác nhân là nhân viên kinh doanh của công ty
3.2.2 Các chức năng của tác nhân
- Hiển thị danh sách mặt hàng
- Hiển thị danh sách khách hàng
- Thêm sửa xóa mặt hàng, thêm hình ảnh theo từng mặt hàng.
- Thêm sửa xóa khách hàng, thêm hình ảnh khách hàng
3.2.3 Luồng quy trình xử lý
- Nhân viên đăng nhập vào tài khoản công ty cung cấp
- Chọn kho hàng tương ứng
- Hiển thị danh sách mặt hàng, thông tin các mặt hàng
- Thêm, sửa , xóa các mặt hàng, thêm hình ảnh mặt hàng
- Thêm, sửa , xóa các khách hàng, thêm hình ảnh khách hàng
Hình 3 Biểu đồ Usecase tổng quát
Hình 4 Biểu đồ Use Case Đăng nhập
Hình 5 Biểu đồ UseCase Chọn kho hàng 3.3.3 Usecase quản lý thông tin khách hàng
Hình 6 Usecase quản lý thông tin khách hàng
3.3.4 Usecase quản lý thông tin mặt hàng
Hình 7 Usecase quản lý thông tin hàng hóa
3.4.1 Đặc tả Usecase Đăng nhập
Description Nhân viên đăng nhập vào hệ thống
Actor Nhân viên bán hàng
Pre-Condition Tài khoản nhân viên được cấp đã có trên hệ thống
Post-Condition Trả về màn hình trang chủ
Basic Flow - Hệ thống yêu cầu đăng nhập bằng tài khoản
- Nhân viên đăng nhập vào hệ thống bằng username và password
- Hệ thống nhận thông tin đăng nhập, thực hiện gọi hàm đăng nhập từ ws.Admin thêm thông tin hợp đồng của nhân viên. Exception Flow - Khi đăng nhập không thành công thì trả lại màn hình đăng nhập kèm thông báo
Bảng 1 Đặc tả Usecase Đăng nhập
3.4.2 Đặc tả Usecase Chọn kho hàng
Usecase Name Chọn kho hàng
Description Nhân viên chọn kho hàng để hiển thị mặt hàng tương ứng.
Actor Nhân viên bán hàng
Pre-Condition Đăng nhập tài khoản nhân viên được cấp
Post-Condition Trả về trang chủ với danh sách sản phẩm tương ứng với kho hàng hàng
Basic Flow - Nhân viên tap vào button với label “Kho hàng” trên trang quản trị với biểu tượng biểu tượng ở tabbar - Nhân viên tap kho hàng muốn chọn
- Kho hàng được chọn sẽ lưu vào state
- Hệ thống trả về các thông tin tương ứng theo kho hàng vừa chọn.
Exception Flow - Khi đăng nhập không thành công thì nhân viên không được cấp quyền chọn khách hàng
Bảng 2 Đặc tả Usecase Chọn kho hàng
Usecase Name Quản lý khách hàng
Description Chức năng cho phép nhân viên thêm, sửa và xóa khách hàng, thêm ảnh theo từng khách hàng
Actor Nhân viên bán hàng
Pre-Condition Đăng nhập tài khoản nhân viên được cấp
Post-Condition Trả về trang chủ kèm thông báo
Basic Flow - Khi thêm khách hàng
• Nhân viên tap vào button trên thanh tìm kiếm trong giao diện khách hàng
• Nhân viên nhập các thông tin cần thiết - Khi sửa xóa
• Nhân viên tap khách hàng muốn sửa xóa
• Nhân viên thay đổi thông tin khách hàng
- Khi nhấn Lưu/ Xóa, thông tin sẽ được update lên database
- Thêm hình ảnh của khách hàng:
Chọn vào icon tương ứng với khách hàng cần thêm hình ảnh để thêm hình ảnh
Chọn file từ thiết bị sử dụng để tiến hành thêm ảnh.
- Nhấn lưu để đưa thông tin hình ảnh lên server và lưu vào thông tin hàng hóa trên Database.
Exception Flow - Khi đăng nhập không thành công thì nhân viên không được cấp quyền quản lý khách hàng
- Mã khách hàng không được trùng
- Yêu cầu nhập đủ thông tin cần thiết
Usecase Name Quản lý danh mục hàng hóa
Description Chức năng cho phép nhân viên quản lý danh mục hàng hóa
Actor Nhân viên bán hàng
Pre-Condition Đăng nhập tài khoản nhân viên được cấp
Post-Condition Hiển thị danh sách hàng hóa hiện có theo kho hàng
Basic Flow - Khi thêm khách hàng
• Nhân viên tap vào button trên thanh tìm kiếm trong giao diện khách hàng
• Nhân viên nhập các thông tin cần thiết để thêm mặt hàng
• Nhân viên tap vào icon muốn sửa thông tin hàng hóa, hoặc tap vào icon xóa
• Nhân viên thay đổi thông tin hàng hóa
Khi nhấn Lưu/ Xóa, thông tin sẽ được update lên database.
- Thêm hình ảnh của hàng hóa:
Chọn vào icon tương ứng với sản phẩm cần thêm hình ảnh để thêm hình ảnh
Điền các thông tin bắt buộc như mã màu, không bắt buộc như mô tả, chọn file từ thiết bị
Nhấn lưu để đưa thông tin hình ảnh lên server và lưu vào thông tin hàng hóa trên Database.
Exception Flow - Khi đăng nhập không thành công thì nhân viên không được cấp quyền quản lý danh mục hàng hóa
Bảng 5 Đặc tả Usecase Quản lý khách hàng
Hình 11 Biểu đồ Sequence Đăng nhập
Hình 12 Biểu đồ Sequence Đăng xuất 3.5.3 Sequence quản lý khách hàng
Hình 17 Biểu đồ Sequence Thêm khách hàng
Hình 18 Biểu đồ Sequence Sửa khách hàng
Hình 19 Biểu đồ Sequence Xóa khách hàng
Hình 20 Biểu đồ Activity Đăng nhập
Hình 21 Biểu đồ Activity Đăng xuất 3.6.9 Activity Thêm khách hàng
Hình 28 Biểu đồ Activity Thêm khách hàng
Hình 29 Biểu đồ Activity Sửa khách hàng
Hình 30 Biểu đồ Activity Xóa khách hàng
Đặc tả Usecase
3.4.1 Đặc tả Usecase Đăng nhập
Description Nhân viên đăng nhập vào hệ thống
Actor Nhân viên bán hàng
Pre-Condition Tài khoản nhân viên được cấp đã có trên hệ thống
Post-Condition Trả về màn hình trang chủ
Basic Flow - Hệ thống yêu cầu đăng nhập bằng tài khoản
- Nhân viên đăng nhập vào hệ thống bằng username và password
- Hệ thống nhận thông tin đăng nhập, thực hiện gọi hàm đăng nhập từ ws.Admin thêm thông tin hợp đồng của nhân viên. Exception Flow - Khi đăng nhập không thành công thì trả lại màn hình đăng nhập kèm thông báo
Bảng 1 Đặc tả Usecase Đăng nhập
3.4.2 Đặc tả Usecase Chọn kho hàng
Usecase Name Chọn kho hàng
Description Nhân viên chọn kho hàng để hiển thị mặt hàng tương ứng.
Actor Nhân viên bán hàng
Pre-Condition Đăng nhập tài khoản nhân viên được cấp
Post-Condition Trả về trang chủ với danh sách sản phẩm tương ứng với kho hàng hàng
Basic Flow - Nhân viên tap vào button với label “Kho hàng” trên trang quản trị với biểu tượng biểu tượng ở tabbar - Nhân viên tap kho hàng muốn chọn
- Kho hàng được chọn sẽ lưu vào state
- Hệ thống trả về các thông tin tương ứng theo kho hàng vừa chọn.
Exception Flow - Khi đăng nhập không thành công thì nhân viên không được cấp quyền chọn khách hàng
Bảng 2 Đặc tả Usecase Chọn kho hàng
Usecase Name Quản lý khách hàng
Description Chức năng cho phép nhân viên thêm, sửa và xóa khách hàng, thêm ảnh theo từng khách hàng
Actor Nhân viên bán hàng
Pre-Condition Đăng nhập tài khoản nhân viên được cấp
Post-Condition Trả về trang chủ kèm thông báo
Basic Flow - Khi thêm khách hàng
• Nhân viên tap vào button trên thanh tìm kiếm trong giao diện khách hàng
• Nhân viên nhập các thông tin cần thiết - Khi sửa xóa
• Nhân viên tap khách hàng muốn sửa xóa
• Nhân viên thay đổi thông tin khách hàng
- Khi nhấn Lưu/ Xóa, thông tin sẽ được update lên database
- Thêm hình ảnh của khách hàng:
Chọn vào icon tương ứng với khách hàng cần thêm hình ảnh để thêm hình ảnh
Chọn file từ thiết bị sử dụng để tiến hành thêm ảnh.
- Nhấn lưu để đưa thông tin hình ảnh lên server và lưu vào thông tin hàng hóa trên Database.
Exception Flow - Khi đăng nhập không thành công thì nhân viên không được cấp quyền quản lý khách hàng
- Mã khách hàng không được trùng
- Yêu cầu nhập đủ thông tin cần thiết
Usecase Name Quản lý danh mục hàng hóa
Description Chức năng cho phép nhân viên quản lý danh mục hàng hóa
Actor Nhân viên bán hàng
Pre-Condition Đăng nhập tài khoản nhân viên được cấp
Post-Condition Hiển thị danh sách hàng hóa hiện có theo kho hàng
Basic Flow - Khi thêm khách hàng
• Nhân viên tap vào button trên thanh tìm kiếm trong giao diện khách hàng
• Nhân viên nhập các thông tin cần thiết để thêm mặt hàng
• Nhân viên tap vào icon muốn sửa thông tin hàng hóa, hoặc tap vào icon xóa
• Nhân viên thay đổi thông tin hàng hóa
Khi nhấn Lưu/ Xóa, thông tin sẽ được update lên database.
- Thêm hình ảnh của hàng hóa:
Chọn vào icon tương ứng với sản phẩm cần thêm hình ảnh để thêm hình ảnh
Điền các thông tin bắt buộc như mã màu, không bắt buộc như mô tả, chọn file từ thiết bị
Nhấn lưu để đưa thông tin hình ảnh lên server và lưu vào thông tin hàng hóa trên Database.
Exception Flow - Khi đăng nhập không thành công thì nhân viên không được cấp quyền quản lý danh mục hàng hóa
Bảng 5 Đặc tả Usecase Quản lý khách hàng
Biểu đồ Sequence
Hình 11 Biểu đồ Sequence Đăng nhập
Hình 12 Biểu đồ Sequence Đăng xuất 3.5.3 Sequence quản lý khách hàng
Hình 17 Biểu đồ Sequence Thêm khách hàng
Hình 18 Biểu đồ Sequence Sửa khách hàng
Hình 19 Biểu đồ Sequence Xóa khách hàng
Biểu đồ Activity
Hình 20 Biểu đồ Activity Đăng nhập
Hình 21 Biểu đồ Activity Đăng xuất 3.6.9 Activity Thêm khách hàng
Hình 28 Biểu đồ Activity Thêm khách hàng
Hình 29 Biểu đồ Activity Sửa khách hàng
Hình 30 Biểu đồ Activity Xóa khách hàng
GIAO DIỆN VÀ HƯỚNG DẪN SỬ DỤNG
Giao diện đăng nhập
Hình 31 Giao diện đăng nhập
- Điền tên đăng nhập và mật khẩu của mình sau đó tap “Đăng nhập” để tiến hành đăng nhập.
Trang chủ
Hình 32 Giao diện trang chủ
- Sau khi đăng nhập, hệ thống sẽ trả về trang chủ hiển thị danh sách hàng hóa theo kho hàng
- Khi tap vào nút “Quản trị”, hệ thống chuyển qua giao diện quản trị danh mục và chuyển kho hàng .
Giao diện quản trị
Hình 33 Giao diện chi tiết sản phẩm
- Tap icon quản trị ở BottomTabBar để chuyển hướng màn hình từ trang chủ qua màn hình quản trị
- Giao diện mặc định hiển thị button logout, thông tin user, label “ Kho hàng” button chuyển kho hàng , button “ Quản trị danh mục”
- Tap button “kho hàng” hiển thị modal từ modal chọn kho hàng cần chuyển
- Tap “Quản trị danh mục” hiển thị modal danh mục quản trị bao gồm “ Danh mục khách hàng”, “Danh mục hàng hóa”
- Tap để đăng xuất khỏi hệ thống, chuyển về giao diện đăng nhập
Hình 34: Modal chọn kho hàng
Danh sách khách hàng
Hình 34 Giao diện danh sách khách hàng, giao diện thêm khách hàng mới
- Nhập text vào ô “Tìm kiếm”, hệ thống sẽ tìm kiếm khách hàng theo text đã nhập và cập nhật lại danh sách khách hàng theo kết quả tìm được
- Khi tap vào thông tin khách hàng, hệ thống sẽ chọn khách hàng đó làm khách hàng được chọn, chuyển về màn hình chính và hiển thị danh sách sản phẩm theo khách hàng đó
- Khi tap vào , hệ thống chuyển qua giao diện thêm khách hàng
- Khi tap vào , hệ thống chuyển qua giao diện sửa/xóa khách hàng.
Thêm khách hàng
Hình 35 Giao diện thêm khách hàng
Sửa/Xóa khách hàng
Hình 36 Giao diện Sửa/Xóa khách hàng
- Giao diện sửa/xóa khách hàng trả về form thông tin khách hàng đã điền sẵn thông tin
- Sửa lại các thông tin và tap “Lưu” để thực hiện cập nhật thông tin khách hàng, hệ thống trả về trang chủ
- Khi tap “Xóa”, hệ thống xóa thông tin khách hàng và trả về trang chủ.
