TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TINBÁO CÁO CHUYÊN ĐỀ HỌC PHẦN MÔN LẬP TRÌNH TRÊN THIẾT BỊ DI ĐỘNG ĐỀ T$I: XÂY DỰNG ỨNG DỤNG BÁN QUẦN ÁO THỜI TRANG Sinh viên thực hiện : NGU
TỔNG QUAN
Tổng quan về React Native
1.1.1 Tổng quan về ứng dụng React Native
React Native là một framework cho phép lập trình viên phát triển ứng dụng chỉ với ngôn ngữ Javascript, điều này đã thay đổi cách hiểu về ứng dụng Native truyền thống.
Sự xuất hiện của React Native đã mang đến cơ hội cho lập trình viên web phát triển ứng dụng Native, khắc phục những hạn chế của ứng dụng web và hybrid.
Chỉ với một kỹ sư thành thạo Javascript, bạn có thể phát triển ứng dụng cho web, desktop, server và cả mobile Điều này không chỉ mang lại lợi ích cho lập trình viên web mà còn giúp doanh nghiệp tối ưu hóa nguồn nhân lực trong việc phát triển sản phẩm cuối cùng.
Khi phát triển ứng dụng với React Native, tính năng Live Reload được tích hợp, cho phép tải lại chỉ những phần mã đã thay đổi, khác với tính năng Reload sẽ tải lại toàn bộ mã nguồn Điều này giúp cải thiện hiệu suất làm việc Bên cạnh đó, bạn có thể dễ dàng gỡ lỗi JavaScript trong Chrome và Safari, trong khi các lỗi liên quan đến Native cần sử dụng Xcode cho iOS hoặc Android Studio cho Android.
1.1.2 Ưu và nhược điểm của React Native
Reactjs rất hiệu quả nhờ vào việc tạo ra DOM ảo, nơi các component tồn tại, từ đó cải thiện đáng kể hiệu suất Nó chỉ tính toán và thực hiện những thay đổi cần thiết lên DOM, giúp giảm thiểu các thao tác tốn kém.
Reactjs giúp đơn giản hóa việc viết mã JavaScript nhờ vào cú pháp JSX (JavaScript mở rộng), cho phép kết hợp mã HTML và JavaScript một cách dễ dàng Người dùng có thể chèn các đoạn HTML trực tiếp vào hàm render mà không cần phải nối chuỗi, điều này tạo nên sự thuận tiện khi phát triển ứng dụng Đặc biệt, Reactjs tự động chuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTML thông qua bộ biến đổi JSX, và hiển thị chúng trong virtual DOM như một cây DOM thông thường.
+ Khó tiếp cận cho người mới học Web
+ React chỉ là View Library nó không phải là một MVC framework như những framework khác.
+ React khá nặng nếu so với các framework khác React có kích thước tương đương như Angular Trong đó Angular là một framework hoàn chỉnh.
Tổng quan về đề tài
Công nghệ thông tin hiện nay được coi là ngành mũi nhọn, đặc biệt quan trọng đối với các quốc gia đang phát triển như Việt Nam Sự bùng nổ thông tin và sự phát triển nhanh chóng của công nghệ kỹ thuật số đặt ra yêu cầu phải tin học hóa tất cả các ngành và lĩnh vực để thúc đẩy quá trình công nghiệp hóa và hiện đại hóa.
Hệ thống môn lập trình thiết bị di động với chủ đề "Xây dựng ứng dụng bán quần áo thời trang" mang lại cơ hội quý báu cho sinh viên áp dụng kiến thức thực tế về phát triển ứng dụng di động trong ngành thời trang Việc khảo sát hệ thống là rất cần thiết để xác định các yếu tố và yêu cầu cụ thể, từ đó giúp xây dựng một ứng dụng hiệu quả và thu hút người dùng.
Để phát triển một ứng dụng thời trang hiệu quả, trước tiên cần nghiên cứu xu hướng thị trường hiện tại nhằm đáp ứng nhu cầu người dùng Việc tìm hiểu về sự phổ biến của các loại quần áo, phong cách và màu sắc ưa chuộng sẽ giúp xác định các tính năng quan trọng cho ứng dụng, bao gồm tìm kiếm nhanh, xem trước sản phẩm và chức năng thanh toán tiện lợi.
Khảo sát đối thủ là bước quan trọng trong việc phân tích các ứng dụng bán quần áo thời trang hiện có trên thị trường Việc này giúp xác định điểm mạnh và điểm yếu của đối thủ, từ đó đề xuất cải tiến và phát triển những ưu điểm riêng biệt, tạo nên sự độc đáo và thu hút người dùng.
Đối với hệ thống này, cần chú ý đến các yếu tố kỹ thuật như nền tảng di động (iOS, Android), ngôn ngữ lập trình, cơ sở dữ liệu và bảo mật thông tin Những yếu tố này không chỉ đặt ra thách thức cho sinh viên mà còn tạo cơ hội cho họ áp dụng kiến thức đã học vào thực tế, từ đó phát triển kỹ năng cần thiết cho sự nghiệp tương lai.
Website bán hàng được chia thành 4 phần chính: User (Phía người dùng), trang chủ và trang bán hàng, giỏ hàng.
Website có đầy đủ chức năng thông thường của một website bán hàng.
Tốc độ xử lý nhanh, chính xác.
Bảo mật tốt không hiện thị thông tin khách hàng ra bên ngoài.
+ Quản lý thông tin khách hàng
+ Đăng tải các sản phẩm
+ Thêm, sửa, xóa thông tin
+ View thông tin sản phẩm
+ Thêm quần áo vào giỏ hàng
+ Quản lý thông tin cá nhân
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
Mô tả hệ thống
Hệ thống bán quần áo nữ là ứng dụng kết nối trực tiếp giữa người tiêu dùng và người bán, giúp tiết kiệm thời gian, chi phí và công sức trong quá trình vận chuyển Phần mềm này mang lại hiệu quả cao cho cả hai bên, tối ưu hóa trải nghiệm mua sắm và kinh doanh.
Xác định thực thể và chức năng
Dựa vào mô tả bài toán ta có thể xác định được các thực thể chính sau:
- Admin – người quản lý website
- Nhân viên – người thêm các sản phẩm lên trang web
- Khách hàng – người sử dụng website Thực thể admin có các use case sau:
- Quản lý tài khoản khách hàng
- Cập nhật thông tin cá nhân
- Phê duyệt các bài đăng từ nhân viên
Thực thể nhân viên có các use case sau:
- Xem thông tin sản phẩm
- Thêm, sửa, xóa sản phẩm
Thực thể khách hàng có các use case sau:
- Xem thông tin sản phẩm
- Quản lý thông tin cá nhân
- Thêm sản phẩm vào giỏ hàng
Sơ đồ phân tích hệ thống
Các tác vụ hệ thống được xây dựng dưới dạng các use case, liên kết với các actor theo quyền hạn tương ứng Bên cạnh các use case tổng quát, còn tồn tại các use case chi tiết được phân tách từ các use case tổng quát.
2.3.2 Biểu đồ use case tổng quát
Hình 2 10: Biểu đồ use case tổng quát
2.3.3 Biểu đồ cho đăng nhập, đăng xuất và đăng kí
2.3.3.1 Biểu đồ use case cho đăng nhập, đăng xuất và đăng kí
Hình 2 11: Biểu đồ use case đăng nhập, đăng xuất và đăng kí
2.3.3.2 Biểu đồ hoạt động cho đăng nhập, đăng xuất và đăng kí
Hình 2 12: Biều đồ hoạt động đăng nhập, đăng xuất và đăng kí
2.3.3.3 Biểu đồ trình tự cho đăng nhập, đăng xuất và đăng kí
Hình 2 13: Biểu đồ trình tự đăng nhập
Hình 2 14: Biểu đồ trình tự đăng xuất
Hình 2 15: Biểu đồ trình tự đăng kí
2.3.4 Biểu đồ cho quản lý nhân viên
2.3.4.1 Biểu đồ use case quản lý nhân viên
Hình 2 16: Biểu đồ use case quản lý nhân viên
2.3.4.2 Biểu đồ hoạt động quản lý nhân viên
Hình 2 17: Biểu đồ hoạt động quản lý nhân viên
2.3.4.3 Biểu đồ trình tự quản lý nhân viên
Hình 2 18: Biểu đồ trình tự quản lý nhân viên
2.3.5 Biểu đồ quản lý thông tin cá nhân
2.3.5.1 Biểu đồ use case quản lý thông tin cá nhân
Hình 2 19: Biểu đồ use case quản lý thông tin cá nhân
2.3.5.2 Biểu đồ hoạt động quản lý thông tin cá nhân
Hình 2 20: Biểu đồ hoạt động quản lý thông tin cá nhân
2.3.5.3 Biểu đồ trình tự quản lý thông tin cá nhân
2.3.6 Biểu đồ cho quản lý khách hàng
2.3.6.1 Biểu đồ use case quản lý khách hàng
Hình 2 22: Biểu đồ use case quản lý khách hàng
2.3.6.2 Biểu đồ hoạt động quản lý khách hàng
Hình 2 23: Biểu đồ hoạt động quản lý khách hàng
2.3.6.3 Biểu đồ trình tự quản lý khách hàng
Hình 2 24: Biểu đồ trình tự quản lý khách hàng
2.3.7 Biểu đồ cho quản lý sản phẩm
2.3.7.1 Biểu đồ use case cho quản lý sản phẩm
Hình 2 25: Biểu đồ use case quản lý sản phẩm
2.3.7.2 Biểu đồ hoạt động cho quản lý sản phẩm
Hình 2 26: Biều đồ hoạt động quản lý sản phẩm
2.3.7.3 Biểu đồ trình tự cho quản lý sản phẩm
Hình 2 27: Biểu đồ trình tự cho thêm sản phẩm
Hình 2 28: Biểu đồ trình tự cho sửa sản phẩm
Hình 2 29: Biểu đồ trình tự cho xoa sản phẩm
Hình 2 30: Biểu đồ trình tự cho tìm kiếm sản phẩm
2.3.8 Biểu đồ cho quản lý bán hàng
2.3.8.1 Biểu đồ use case cho quản lý bán hàng
Hình 2 31: Biểu đồ use case quản lý bán hàng
2.3.8.2 Biểu đồ hoạt động cho quản lý bán hàng
2.3.8.3 Biểu đồ trình tự cho quản lý bán hàng
Hình 2 33: Biểu đồ trình tự tìm kiếm theo sản phẩm đã bán
Hình 2 34: Biểu đồ trình tự tìm kiếm theo khách đã mua
Hình 2 35: Biểu đồ trình tự tìm kiếm theo nhân viên bán
Hình 2 36: Biểu đồ trình tự tìm kiếm thông tin đơn hàng
2.3.9 Biểu đồ cho quản lý giỏ hàng
2.3.9.1 Biểu đồ use case cho quản lý giỏ hàng
Hình 2 37: Biểu đồ use case quản lý giỏ hàng
2.3.9.2 Biểu đồ hoạt động cho quản lý giỏ hàng
Hình 2 38: Biểu đồ hoạt động quản lý giỏ hàng
2.3.9.3 Biểu đồ trình tự cho quản lý giỏ hàng
Hình 2 39: Biểu đồ trình tự thêm sản phẩm vào giỏ hàng
Hình 2 40: Biểu đồ trình tự xóa sản phẩm vào giỏ hàng
Hình 2 41: Biểu đồ trình tự sửa sản phẩm vào giỏ hàng
Hình 2 42: Biểu đồ trình tự tìm kiếm sản phẩm vào giỏ hàng
2.3.10 Biểu đồ cho quản lý đơn hàng
2.3.10.1 Biểu đồ use case cho quản lý đơn hàng
Hình 2 43: Biểu đồ use case quản lý đơn hàng
2.3.10.2 Biểu đồ hoạt động cho quản lý đơn hàng
Hình 2 44: Biểu đồ hoạt động cho quản lý đơn hàng
2.3.10.3 Biểu đồ trình tự cho quản lý đơn hàng
Hình 2 45: Biểu đồ trình tự tạo đơn hàng
Hình 2 46: Biểu đồ trình tự sửa đơn hàng
Hình 2 47: Biểu đồ trình tự tìm kiếm đơn hàng
Thiết kế cơ sở dữ liệu
KẾT QUẢ THỰC NGHIỆM
Giao diện ứng dụng
-Giao diện được thiết kế trẻ trung , năng động , vô cùng bắt mắt
-Dễ tiếp cận đến người tiêu dùng
-Với hai phím bấm mũi tên chuyển qua đăng nhập và đăng ký
Đăng nhập , Đăng ký
Giao diện được thiết kế thân thiện, cho phép người dùng dễ dàng đăng ký tài khoản cá nhân Điều này giúp họ bắt đầu trải nghiệm mua sắm một cách thuận tiện với thông tin cá nhân đã được điền sẵn.
Giao diện trang chủ ứng dụng
Giao diện trang chủ của ứng dụng bán quần áo có vai trò then chốt trong việc thu hút và giữ chân người dùng Một thiết kế giao diện hấp dẫn không chỉ giúp người dùng dễ dàng tìm kiếm sản phẩm mà còn tạo ấn tượng tích cực, khuyến khích họ khám phá và mua sắm Việc tối ưu hóa trải nghiệm người dùng thông qua giao diện trực quan và thân thiện sẽ gia tăng khả năng chuyển đổi và giữ chân khách hàng.
-Banner và Hình Ảnh Nổi Bật
-Hình Ảnh Đại Diện Bắt Mắt
Giao diện sản phẩm và danh mục
-Sản phẩm nổi bật gây thu hút
-Phân chia từng sản phẩm giúp dễ tìm kiếm
-Có ảnh đi kèm mỗi sản phẩm
3.5 Mua sản phẩm và thanh toán hóa đơn
Việc thanh toán nhanh là điều cần thiết trong bối cảnh nhu cầu của người dùng ngày càng cao về việc chi tiêu ngay lập tức Hệ thống thanh toán đơn giản không chỉ giúp tiết kiệm thời gian mà còn tạo sự thuận tiện cho mọi lứa tuổi, từ trẻ em đến người cao tuổi.
3.6 Hóa đơn đã thanh toán
Giao diện thanh toán trong ứng dụng bán quần áo đóng vai trò quan trọng trong trải nghiệm mua sắm trực tuyến Để khách hàng dễ dàng hoàn tất giao dịch, giao diện này cần được thiết kế đơn giản, tiện lợi và an toàn Dưới đây là mô tả chi tiết về giao diện thanh toán.
-Tổng tiền và đơn hàng -Kiểm tra thông tin -Hiển thị đã hoàn tất thanh toán
-An toàn và bảo mật
3.7 Thông tin tài khoản người dùng
Giao diện thông tin tài khoản người dùng trong ứng dụng bán quần áo cho phép người dùng quản lý thông tin cá nhân, theo dõi đơn hàng và trải nghiệm các tính năng cá nhân hóa một cách thuận tiện.
Thông tin tài khoản người dùng
+ Ứng dụng có đầy đủ các chức năng cơ bản của một ứng dụng. + Bảo mật tốt với người có quyền sử dụng.
+ Tốc độ xử lý nhanh chính xác.
Quá trình phát triển phần mềm gặp nhiều khó khăn như xây dựng theo mô hình và xử lý thời gian Ứng dụng vẫn đang trong giai đoạn hoàn thiện, do đó không tránh khỏi những thiếu sót Chúng em rất trân trọng mọi ý kiến đóng góp từ thầy cô, vì đó sẽ là nguồn động lực quý giá giúp chúng em cải thiện và phát triển phần mềm tốt hơn.
Hướng phát triển trong tương lai:
Ứng dụng bán quần áo sẽ không ngừng cải tiến và phát triển các tính năng mới, đồng thời thiết lập các hình thức giao dịch đa dạng Mục tiêu là xây dựng một hệ thống hoàn chỉnh, mạnh mẽ để phục vụ nhu cầu và lợi ích của con người, góp phần mang lại sự phong phú cho đời sống.
+ Đáp ứng được việc chạy thời gian thực (realtime).