CƠ SỞ KIẾN THỨC VÀ CÔNG NGHỆ SỬ DỤNG
Flutter là một SDK mới được Google giới thiệu, giúp các nhà phát triển và thiết kế xây dựng ứng dụng di động cho Android và iOS một cách nhanh chóng Là một dự án mã nguồn mở đang trong giai đoạn thử nghiệm, Flutter tích hợp Reactive framework, công nghệ hiển thị 2D và các công cụ phát triển, cho phép thiết kế, xây dựng, kiểm tra và gỡ lỗi ứng dụng hiệu quả Nhờ vào những tính năng này, Flutter hỗ trợ các nhà phát triển tạo ra ứng dụng native đẹp mắt và phát triển ứng dụng đa nền tảng dễ dàng.
5 điều mô tả ngắn về Flutter:
Dart là một ngôn ngữ lập trình thuần OOP, được sử dụng rộng rãi để phát triển các ứng dụng web, server, máy tính để bàn và thiết bị di động.
• Các IDE được khuyến nghị với Flutter là Android Studio hoặc Intellij Idea
• Flutter có cầu nối là Dart, kích thước ứng dụng lớn hơn, nhưng nó hoạt động nhanh hơn nhiều Không giống như React Native với cầu nối là Javascript
• React Native và Flutter chia sẻ các mô hình tương tự như trình xử lý sự kiện và mở rộng lớp
• Animation và trải nghiệm cài đặt của Flutter thực sự tốt và mượt mà tương ứng
2 Ưu - nhược điểm của Fluter Ưu điểm:
• Ngôn ngữ Dart: Dart - OOP, nó khá dài, nhưng những người quen viết bằng Java / C # sẽ hài lòng với Dart
• Ít phải viết các config khi tạo project mới theo cách thủ công, ngược lại với React Native
To get started with Flutter, simply download it from Git and run "flutter doctor" to identify any potential issues in your system After that, create a project using Android Studio or any IDE of your choice, ensuring you have installed the Flutter plug-in Additionally, Flutter offers a Hot Reload feature similar to that of React Native, enhancing your development experience.
• Hỗ trợ tuyệt vời cho IDE (Android Studio, IDE IntelliJ, VSCode)
Flutter cung cấp một trình điều hướng tích hợp sẵn, cho phép người dùng tạo ra các route mới một cách dễ dàng mà không cần phải kết nối với bất kỳ package điều hướng gốc nào, điều này khác biệt hoàn toàn so với React Native.
• Giải pháp quản lý dữ liệu được tạo sẵn, ví dụ trong Flutter này là
Mọi thứ đều có một Widget riêng, trong đó có StatefulWidget, cho phép chúng ta quản lý và thay đổi trạng thái của widget một cách linh hoạt.
• Có một rào cản lớn cho những người chỉ học JS, hoặc đến từ RN
Do thực tế là Dart được sử dụng với sự thừa kế, đa hình của nó và tất cả các thứ về OOP
Trong Dart, không có JSX như chúng ta thường thấy trong React Native, điều này khiến việc làm việc trở nên khó khăn hơn Tệp Dart không phân chia rõ ràng giữa template, styling và data, tạo ra sự khó chịu cho người phát triển.
Styling có thể được coi là một nhược điểm trong thiết kế, bởi vì không có sự phân tách rõ ràng giữa Styles, templates và controller Điều này gây khó khăn khi mô tả một thành phần, vì chúng ta phải đồng thời mô tả cả các styles liên quan.
• Animation còn khó khăn hơn Mặc dù nó có một animation tốt, nhưng nó sẽ khó hơn khi tạo hiệu ứng động, không giống như trong
Trong Flutter, việc tối ưu hóa chủ yếu dựa vào việc kế thừa widget với các điều kiện có thể thay đổi (trạng thái) và không thể thay đổi (không trạng thái) Ngược lại, React-Native cho phép quản lý vòng đời của các component Một nhược điểm lớn của Flutter là thiếu các công cụ để lưu trữ trạng thái của ứng dụng, nhưng vấn đề này có thể được giải quyết thông qua việc tuần tự hóa trạng thái hiện tại.
3 Build app demo Ở đây dùng Android Studio, chọn project Flutter:
Chọn Flutter Application: Đặt tên cho Project:
Sau khi hoàn tất bước này, Flutter SDK sẽ tạo ra cấu trúc thư mục cho ứng dụng Tất cả các thao tác sẽ được lưu trữ trong thư mục lib, với file main.dart là điểm khởi đầu cho quá trình thực thi ứng dụng.
In Flutter, everything is a widget, including images, icons, and text within an application Notably, the Flutter SDK generates an interactive widget at the root of the application, enhancing the overall user experience.
Trước khi tìm hiểu tensorflow lite, ta cần nắm được khái niệm học máy
Học máy, hay Machine Learning, là một lĩnh vực con của trí tuệ nhân tạo, sử dụng các thuật toán giúp máy tính học từ dữ liệu để tự phát triển thuật toán, thay vì phải lập trình sẵn Hiện nay, học máy trở thành một lĩnh vực nổi bật và được coi là mỏ vàng trong ngành tin học Nhiều thư viện hỗ trợ phát triển học máy đã ra đời, trong đó TensorFlow là một trong những thư viện phổ biến nhất.
Mặc dù TensorFlow là một công cụ mạnh mẽ, nhưng kích thước lớn của nó không phù hợp với nền tảng di động Do đó, giải pháp thay thế hiệu quả hơn là TensorFlow Lite, được thiết kế đặc biệt cho các ứng dụng di động.
4.2 Một số khái niệm trong tensorflow lite
Chúng ta cần tìm hiểu về chúng nếu muốn áp dụng công nghệ này vào ứng dụng
Tensor là thành phần cốt lõi trong TensorFlow, nơi mọi tính toán đều liên quan đến chúng Một tensor có thể được hiểu là vector hoặc ma trận trong không gian n-chiều, đại diện cho nhiều loại dữ liệu khác nhau Các thuộc tính cơ bản của tensor bao gồm rank, shape và type.
Hình dạng của dữ liệu chính là kích thước của ma trận hoặc mảng Tất cả các giá trị trong một tensor đều chứa loại dữ liệu giống nhau và có một hình dạng đã được xác định hoặc một phần đã được biết đến.
Rank là số bậc của tensor, giúp phân loại dữ liệu
Type là kiểu dữ liệu của các elements trong Tensor Chỉ có một kiểu Type duy nhất cho toàn bộ các elements có trong 1 Tensor
4.3.Áp dụng tensorflow lite Để áp dụng TFL trong flutter, đòi hỏi chúng ta sử dụng 1 plugin là tflite, phiên bản sẽ được sử dụng là 1.1.2
Chúng ta sẽ sử dụng TensorFlow Lite để triển khai chức năng đăng nhập qua nhận diện khuôn mặt, vì tính năng này yêu cầu Google Machine Learning Kit Để hiểu rõ hơn về công nghệ này, hãy tiếp tục với phần Thư viện Google Machine Learning Kit.
5 Google Machine Learning Kit 1.Thư viện Google Machine learning kit
PHÂN TÍCH BÀI TOÁN
Usecase của ứng dụng android (cho khách hàng)
Usecase ứng dụng web (cho quản trị)
STT Tên Actor Ý nghĩa / Ghi chú
Người dùng sử dụng ứng dụng (Mobile) để xem và mua sản phẩm
Quản trị quản lí hệ thống (Web)
2.Sơ đồ phân rã chức năng App
- Bình thường, khi làm việc với database như MySQL, SQL
To extract data from a server, complex SQL queries are typically required However, Firebase database queries simplify this process, making data retrieval more efficient and user-friendly.
Firebase có 4 kiểu sắp xếp:
Hay như một số câu lệnh query lấy dữ liệu có giới hạn như:
So sánh với SQL truyền thống Với SQL, để thực hiện một câu lệnh query: sẽ cần chọn column từ một table nào đó Ví dụ: Chọn cột
Để truy vấn dữ liệu người dùng, bạn cần sử dụng câu lệnh WHERE với các điều kiện cụ thể Ví dụ, nếu bạn muốn lấy tất cả người dùng có tên là "Anh Son", hãy áp dụng điều kiện này trong câu lệnh truy vấn của bạn.
• SELECT * FROM Users WHERE name === "Anh Son";
Nếu muốn giới hạn số lượng Users được lấy ra thì thêm câu lệnh LIMIT
• SELECT * FROM Users WHERE name === "GeekyAnts"
Trong Firebase, việc query cũng hoàn toàn tương tự:
• const firebaseRef = db.child('child');
• firebaseRef.orderByChild("users").equalTo("GeekyAnts
3.Đặc tả usecase, UML activity của các chức năng
Mô tả use case cho khách hàng
Feature Đăng ký tài khoản
Description Người dùng tiến hành đăng ký tài khoản để đăng nhập trong app
Purpose Giúp người tạo tài khoản
User value Tính năng này giúp người dùng
-Tạo tài khoản để thực hiện đăng nhập
Assumptions Tài khoản người dùng đăng ký chưa tồn tại
Not doing Đăng ký bằng tài khoản facebook, instagram
Người dùng đã đăng ký tài khoản và đăng nhập với thông tin hoặc hình ảnh khuôn mặt đã đăng ký
Feature Đăng ký và đăng nhập vào hệ thống app
Người dùng có thể dễ dàng đăng ký và đăng nhập vào ứng dụng bằng cách tạo tên tài khoản, mật khẩu và email Ngoài ra, ứng dụng còn hỗ trợ tính năng đăng ký và đăng nhập thông qua nhận diện khuôn mặt, mang lại sự tiện lợi và bảo mật cho người dùng.
Purpose Giúp người dùng truy cập vào app
User value Tính năng này giúp người dùng
-Thực hiện truy cập vào app
Tất cả các tài khoản truy cập cần phải được liên kết với cơ sở dữ liệu người dùng của ứng dụng Nếu tài khoản không tồn tại, hệ thống sẽ tự động đăng ký người dùng mới.
Người dùng đã đăng ký tài khoản và đăng nhập với thông tin hoặc hình ảnh khuôn mặt đã đăng ký
- Chức năng nhận diện khuôn mặt
Flow nhận diện khuôn mặt
Feature Nhận diện khuôn mặt
Chức năng nhận diện khuôn mặt cho phép người dùng lưu thông tin và tự động đăng nhập Chức năng này được chia thành hai luồng: đầu tiên, khi người dùng mới tạo tài khoản, ứng dụng sẽ khuyến nghị họ sử dụng tính năng lưu thông tin nhận dạng.
Nhận diện khuôn mặt cho phép người dùng dễ dàng đăng nhập vào ứng dụng Người dùng chỉ cần vào màn hình nhận diện, điều chỉnh camera sao cho khuôn mặt vừa khớp, và nhấn xác nhận Nếu quá trình nhận diện thành công, ứng dụng sẽ tự động đăng nhập cho người sử dụng.
Purpose Giúp người dùng đăng nhập trong trường hợp quên tên đăng nhập hay mật khẩu, dễ sử dụng app hơn
Phẫu thuật chỉnh hình và thay đổi các nét khuôn mặt có thể gây khó khăn trong việc nhận diện khuôn mặt của người dùng Điều này ảnh hưởng đến tài khoản người dùng, vì hệ thống nhận diện khuôn mặt không còn chính xác.
Assumptions Người dùng không phẫu thuật chỉnh hình
Not doing Cho phép người dùng lưu nhiều thông tin đăng nhập dưới dạng
Khuôn mặt của người dùng phải dễ dàng phát hiện, độ chính xác khi sử dụng chức năng phải cao
- Chức năng xem tin tức
Feature Đọc tin tức được cập nhật hằng ngày
Người dùng có thể dễ dàng truy cập ứng dụng để đọc tin tức thời trang mới nhất Chỉ cần nhấn vào các bài viết, người dùng sẽ được chuyển hướng đến trang web mà không cần mở trình duyệt.
Purpose Giúp người dùng đọc tin tức
Assumptions Người dùng có tài khoản và đã đăng nhập
Not doing Cho phép người dùng ẩn tin tức
Tin tức phải được cập nhật chính xác, hình tin tức không quá nhỏ
- Chức năng xem quần áo
Feature Người dùng chọn quần áo để thấy cái nhìn tổng quan về các item đã chọn được mix như thế nào
Description Người dùng truy câp cập vào app và sử dụng chức năng gợi ý thời trang
- Chọn tạo mới quần áo khi nhấn hình logo Nón, Áo, Quần, Giày, Balo, hiện panel thể hiện danh sách các phụ kiện thời trang
-Chọn các item quần áo -chọn các phụ kiện thời trang để đặt hàng
Khi người dùng nhấn nút Mở, hệ thống sẽ chuyển sang màn hình hiển thị danh sách quần áo đã được lưu Ngược lại, khi nhấn nút Tạo mới, người dùng sẽ xóa tất cả các phụ kiện thời trang đã chọn trong màn hình hiện tại.
- Khi nhấn nút camera chuyển người dùng qua màn hình sử dụng AR
-Người dùng chụp hình lại hình ảnh bản thân với các item đã chọn ở tính năng AR
-khi nhấn nút Lưu, người dùng lưu thông tin các phụ kiện thời trang vào danh sách quần áo
-Khi nhấn nút đặt hàng, chuyển sang màn hình Thông tin giao hàng
Purpose Giúp người dùng mix quần áo thời trang đã chọn
User problem Người dùng không có tài khoản không được truy cập và sử dụng chức năng này
Người dùng có thể dễ dàng đăng ký tài khoản qua màn hình đăng ký, giúp họ truy cập vào bộ sưu tập quần áo và phụ kiện thời trang được bày biện một cách hấp dẫn Tuy nhiên, cần lưu ý rằng không nên cho phép người dùng xoay màn hình khi đang xem quần áo, để đảm bảo trải nghiệm mượt mà và tập trung hơn.
Người dùng đã đăng ký tài khoản và đăng nhập với thông tin đã đăng ký và sử dụng chức năng gợi ý thời trang
- Chức năng thử đồ AR
Feature Chức năng thực tế ảo, thể hiện quần áo khi quay video thời gian thực
Description Người dùng “ướm thử” phụ kiện thời trang mà mình đã chọn mà ko phải mặc quần áo trực tiếp
Khi người dùng xem quần áo, họ có thể nhấn nút AR để chuyển sang màn hình thực tế ảo, nơi các phụ kiện sẽ tự động gán ghép lên người Điều này mang đến trải nghiệm ướm thử và giúp người dùng dễ dàng xem xét xem bộ quần áo có phù hợp với mình hay không.
Purpose Cung cấp trải nghiệm thử đồ thực tế ảo cho người dùng
Việc thử quần áo bằng công nghệ AR hiện nay vẫn chưa thể hiện chính xác kích cỡ của các phụ kiện thời trang Tuy nhiên, quần áo có thể được hiển thị trên camera và được cập nhật trong thời gian thực, mang lại trải nghiệm tốt hơn cho người dùng Điều này giả định rằng người dùng đã chọn cho mình những phụ kiện thời trang phù hợp.
Not doing Ướm thử quần áo cho nhiều người
Quần áo trong AR phải vừa khít người, vị trí ít lệch, ko đòi hỏi người dùng lại quá gần hay quá xa
Feature Tạo đơn đặt hàng dựa trên bộ quần áo đã lựa chọn
Description Sau khi người dùng xem quần áo, ướm thử quần áo AR xong, họ nhấn nút đặt hàng
- Nhập các thông tin cần thiết cho đơn hàng (họ tên, số điện thoại, địa chỉ, …)
- Chọn dịch vụ thanh toán điện tử Purpose Đặt hàng quần áo
User problem Người dùng ở quá xa, khó vận chuyển hàng đến địa chỉ
User value Đơn hàng đã được lưu trong cơ sở dữ liệu
Assumptions Trước khi đặt hàng, người dùng đã chọn Ít nhất 1 phụ kiện thời trang
Not doing Tạo đơn hàng khi người dùng chưa chọn phụ kiện thời trang nào
Phải thông báo lại kết quả đặt hàng cho người dùng, cập nhật lại thông tin cho bên quản trị sau khi đặt hàng thành công
- Xem chi tiết đơn hàng
Feature Xem chi tiết đơn hàng
Description Người dùng xem thông tin cụ thể của 1 đơn hàng, bao gồm
- Danh sách phụ kiện thời trang đã đặt
- Trạng thái đơn hàng (ĐANG NHẬN HÀNG, ĐANG VẬN CHUYỂN, ĐÃ NHẬN, ĐÃ HỦY)
Mục đích của việc này là cho phép người dùng xem lại thông tin đặt hàng, giúp họ đối chiếu nếu gặp vấn đề với sản phẩm đã nhận Tuy nhiên, nếu dữ liệu của một số phụ kiện thời trang bị xóa hoặc mất, việc hiển thị thông tin của chúng trong đơn hàng sẽ trở nên khó khăn và gây rắc rối cho người dùng.
User value Bản thông tin chi tiết của 1 đơn hàng
Assumptions Người dùng đã đặt 1 đơn hàng
Thông tin của đơn hàng phải chính xác
Feature Hủy 1 đơn hàng đang trong quá trình nhận hàng hay vận chuyển
Nếu người dùng đã đặt một đơn hàng nhưng quyết định không muốn tiếp tục, họ có thể dễ dàng chọn đơn hàng đó và thực hiện hủy Mục đích của việc này là để hủy bỏ đơn hàng mà người dùng không còn muốn đặt nữa.
Việc người dùng hủy đơn hàng quá nhiều lần có thể gây lãng phí thời gian cho cửa hàng, do đó cần thiết phải có cơ chế để hạn chế tình trạng này Mỗi đơn đặt hàng bị hủy không chỉ ảnh hưởng đến quy trình làm việc mà còn có thể làm giảm hiệu quả kinh doanh.
Assumptions Người dùng đã đặt 1 đơn hàng
Not doing Không hủy đơn hàng có trạng thái ĐÃ NHẬN
Khi hủy đơn hàng phải lập tức cập nhật trạng thái lại cho bên quản trị
- Chức năng chat với admin
Feature Chat với admin để giải đáp thắc mắc thắc mắc
Description Người dùng tiến hành chat với admin khi có thắc mắc về vấn đề gợi ý hoặc mua hàng
- Vào màn hình chat + Tạo vấn đề mô tả thắc mắc + Vào từng vấn đề để chat với admin giải quyết thắc mắc
GIAO DIỆN ỨNG DỤNG
Màn hình giới thiệu ứng dụng
Mô tả: Màn hình giói thiệu ứng dụng người dùng có thể đăng nhập bằng tài khoản hoặc gương mặt đã tạo sẵn.
Màn hình đăng nhập
Màn hình đăng nhập cho phép người dùng đã có tài khoản và mật khẩu tiến hành truy cập vào ứng dụng Nếu người dùng chưa có tài khoản, họ có thể thực hiện việc đăng ký để tạo tài khoản mới.
Màn hình đăng ký
Mô tả: người dùng tiến hành đăng ký với các thông tin tên, tài khoản, mật khẩu.
Đăng ký, đăng nhập bằng nhận diện khuôn mặt
Mô tả; người dùng đăng ký nhận diện khuôn mặt bằng cách để khuôn mặt vào vùng chỉ định Đăng nhập bằng khuôn mặt đã dăng kí.
Màn hình xem tin tức
Mô tả: Người dùng xem các tin tức mới nhất về thời trang.
Màn hình tạo chat với admin
Mô tả: Khi gặp vấn đề về sản phẩm hoặc mua hàng người dùng tiến hành tạo và mô tả vấn đề để chat với admin.
Màn hình danh sách các vấn đề
Mô tả: danh sách các vấn đề (cuộc hội thoại) đã tạo.
Màn hình danh sách vấn đề chat
Mô tả: Chat với admin để giải quyết các vấn đề về sản phẩm cũng như mua hàng.
Màn hình tạo mới các item quần áo
Màn hình cho phép người dùng tạo mới các item quần áo bằng cách nhấn vào nút dấu cộng bên cạnh các item trắng, giúp họ dễ dàng xem và mua sắm sản phẩm.
- Khi nhấn vào button lưu tiến hành lưu bộ quần áo vào tủ đồ
- Khi nhấn button camera sang màn hình AR
- Khi nhán button giỏ hàng sang màn hình đặt hàng.
Màn hình danh sách các item
Mô tả: một danh sách các mục item tương ứng hiện ra cho người dùng chọn.
Màn hình danh sách item chi tiết
Mô tả: thông tin các item thời trang.
Màn hình tủ đồ
Mô tả: danh sách các tủ đồ người dùng đã xem và chọn qua.
Màn hình người dùng
Mô tả: Hiển thị các mục thông tin của nguời dùng như thông tin người dùng, giỏ hàng đã đặt, tủ đồ, các đơn đặt hàng.
Màn hình thông tin người dùng
Mô tả: Hiển thị các thông tin cá nhân của người dùng.
Camera AR
Mô tả: Người dùng sẽ thấy được các item mình vừa chọn fix theo cơ thể của mình
- Button giỏ hàng sang màn hình đặt hàng
- Button chụp hình sẽ tiến hành chụp lại hình bản thân với bộ đồ đã chọn và lưu ở tủ đồ của người dùng.
Màn hình đặt hàng
Mô tả: Người dùng tiến hành đặt hàng.
Màn hình đơn hàng
Mô tả: Hiển thị các thông tin các sản phẩm đã chọn để đặt hàng cũng như các thông tin cá nhân của người dùng để giao hàng.
Màn hình giảm giá
Người dùng sẽ nhận được 1 điểm cho mỗi 100.000 VND chi tiêu, và khi tích lũy được 1000 điểm, họ có thể đổi lấy một thẻ giảm giá 10% Điểm tích lũy có thể được quy đổi qua thẻ và sử dụng để hưởng ưu đãi giảm giá.
Danh sách đơn hàng
Mô tả: Hiển thị danh sách các đơn hàng người dùng đã đặt
Các chức năng ủy quyền, tạo vai quản trị Màn hình đăng ký
Người dùng thực hiện chức năng tạo tài khoản mới, tài khoản này chưa được cấp quyền quản trị với
Email và mật khẩu đăng ký
Để sử dụng các chức năng quản lý tin tức, quản lý phụ kiện thời trang và quản lý đơn hàng, người dùng cần thực hiện đăng nhập và có tài khoản được cấp quyền quản trị.
Màn hình cấp quyền quản trị
Cấp quyền quản trị cho những ai đã đăng ký tài khoản trong hệ thống
Quản lý tin tức Màn hình thêm tin tức
Chức năng thêm tin tức để hiển thị cho người dùng app với các thuộc tính bắt buộc: tiêu đề, hình ảnh preview và đường dẫn tin tức
Màn hình xem, sửa, xóa tin tức
*Sau khi chọn tin tức
Quản lý phụ kiện thời trang
Màn hình thêm phụ kiện thời trang
Chức năng thêm phụ kiện thời trang với các thuộc tính bắt buộc: tên phụ kiện, loại phụ kiện, hình ảnh cho phụ kiện
Màn hình xem, sửa xóa phụ kiện