Đồ án Kỹ thuật: chuyên ngành 2 đề tài xây dựng ứng dụng thương mại điện tử

Đồ án Chuyên ngành 2 đề tài xây dựng ứng dụng thương mại điện tử petshop thiết kế chi tiết, tính toán kỹ thuật theo tiêu chuẩn ngành điện - điện tử

• Tác giả: Phan Thị Thảo Mai
• Người hướng dẫn: TS. Trần Văn Đại
• Trường học: Trường Đại Học Công Nghệ Thông Tin Và Truyền Thông Việt - Hàn
• Chuyên ngành: Khoa Học Máy Tính
• Đề tài: Xây Dựng Ứng Dụng Thương Mại Điện Tử Petshop
• Loại tài liệu: Đồ Án Chuyên Ngành 2
• Năm xuất bản: 2024
• Địa điểm: Đà Nẵng

Tóm tắt

I. Tổng Quan Về Đồ Án Chuyên Ngành 2 Xây Dựng Ứng Dụng Thương Mại Điện Tử PetShop

Đồ án chuyên ngành 2 là một dự án học tập toàn diện tại Trường Đại học Công nghệ Thông tin và Truyền thông Việt-Hàn, nơi sinh viên khoá 21 áp dụng các kiến thức về phát triển ứng dụng mobile và công nghệ backend vào thực tiễn. Đề tài xây dựng ứng dụng thương mại điện tử PetShop được lựa chọn nhằm đáp ứng nhu cầu ngày càng tăng của người dùng trong việc chăm sóc và mua sắm sản phẩm cho thú cưng. Ứng dụng này cung cấp giải pháp toàn diện cho người nuôi thú cưng, từ việc tìm kiếm sản phẩm, so sánh giá cả đến đặt hàng trực tuyến một cách tiện lợi. Dự án được thực hiện bởi nhóm sinh viên giỏi dưới sự hướng dẫn tận tình của TS. Trần Văn Đại, nhằm hoàn thiện kỹ năng lập trình và quản lý dự án.

1.1. Lý Do Chọn Đề Tài Xây Dựng Ứng Dụng PetShop

Thị trường thương mại điện tử thú cưng đang phát triển mạnh mẽ do nhu cầu chăm sóc thú cưng tăng vọt. Người tiêu dùng cần một nền tảng để mua thức ăn, phụ kiện, và các sản phẩm chăm sóc thú cưng chất lượng. Ứng dụng PetShop giải quyết bài toán này bằng cách cung cấp giao diện thân thiện, tìm kiếm nhanh chóng, và hệ thống thanh toán an toàn, đáp ứng xu hướng chuyển đổi số hiện đại.

1.2. Mục Tiêu Chính Của Đồ Án

Mục tiêu chính là phát triển ứng dụng mobile thương mại điện tử hoàn chỉnh với các tính năng quản lý sản phẩm, giỏ hàng, và đơn hàng. Ứng dụng sử dụng React Native để phát triển giao diện và MongoDB cho quản lý cơ sở dữ liệu, đảm bảo hiệu suất cao và trải nghiệm người dùng tối ưu.

II. Công Nghệ Sử Dụng Trong Dự Án Xây Dựng Ứng Dụng

Dự án đồ án chuyên ngành 2 sử dụng các công nghệ hiện đại và phổ biến trong phát triển ứng dụng mobile và backend development. React Native được chọn là framework chính để xây dựng giao diện ứng dụng, cho phép phát triển ứng dụng hoạt động trên cả iOS và Android từ một codebase duy nhất. Đối với phần backend, dự án sử dụng Node.js kết hợp với MongoDB làm hệ thống quản lý cơ sở dữ liệu. MongoDB cung cấp tính linh hoạt cao trong lưu trữ dữ liệu không có schema cố định, phù hợp cho các ứng dụng thương mại điện tử cần xử lý dữ liệu đa dạng. Kiến trúc này đảm bảo ứng dụng có khả năng mở rộng, bảo mật, và hiệu suất tốt.

2.1. React Native Framework Phát Triển Giao Diện

React Native là một framework mạnh mẽ cho phát triển ứng dụng cross-platform. Nó cho phép lập trình viên viết code một lần và triển khai trên nhiều nền tảng. Ưu điểm của React Native bao gồm tốc độ phát triển nhanh, cộng đồng lớn, và khả năng tái sử dụng component. Ứng dụng PetShop sử dụng React Native để tạo giao diện thân thiện, responsive, và tối ưu cho cả điện thoại thông minh.

2.2. MongoDB Hệ Thống Quản Lý Cơ Sở Dữ Liệu

MongoDB là cơ sở dữ liệu NoSQL hiện đại, lưu trữ dữ liệu dưới dạng JSON. Nó cung cấp tính linh hoạt cao, cho phép thêm thuộc tính mới mà không cần cập nhật schema. MongoDB phù hợp lưu trữ thông tin sản phẩm, người dùng, đơn hàng, và dữ liệu động khác trong ứng dụng thương mại điện tử.

III. Phân Tích Thiết Kế Hệ Thống Ứng Dụng PetShop

Giai đoạn phân tích và thiết kế hệ thống là nền tảng quan trọng của dự án đồ án chuyên ngành 2. Nhóm sinh viên sử dụng mô hình UML (Unified Modeling Language) để mô tả chi tiết các chức năng và luồng hoạt động của ứng dụng. Thiết kế bao gồm biểu đồ use case mô tả các tương tác giữa người dùng và hệ thống, biểu đồ hoạt động hiển thị quy trình xử lý, và biểu đồ tuần tự minh họa tương tác giữa các thành phần. Cơ sở dữ liệu được thiết kế để lưu trữ thông tin về sản phẩm, danh mục, người dùng, giỏ hàng, và đơn hàng. Cấu trúc hệ thống được chia thành ba module chính: quản lý sản phẩm, quản lý đơn hàng, và quản lý người dùng.

3.1. Biểu Đồ Use Case Và Chức Năng Chính

Biểu đồ use case của ứng dụng PetShop bao gồm các chức năng chính: đăng nhập/đăng ký, duyệt sản phẩm, quản lý giỏ hàng, đặt hàng, và quản lý tài khoản. Mỗi use case mô tả tương tác cụ thể giữa người dùng (khách hàng hoặc quản trị viên) và hệ thống, đảm bảo ứng dụng đáp ứng đầy đủ nhu cầu của người dùng.

3.2. Thiết Kế Cơ Sở Dữ Liệu MongoDB

Cơ sở dữ liệu MongoDB được thiết kế với các collection: Users (người dùng), Products (sản phẩm), Categories (danh mục), Orders (đơn hàng), và Cart (giỏ hàng). Mỗi collection chứa các document lưu trữ thông tin chi tiết, cho phép ứng dụng thương mại điện tử hoạt động hiệu quả và linh hoạt.

IV. Triển Khai Xây Dựng Và Các Tính Năng Của Ứng Dụng

Giai đoạn triển khai xây dựng ứng dụng là quá trình các sinh viên chuyển đổi thiết kế thành code thực tế. Ứng dụng PetShop được xây dựng với các tính năng toàn diện bao gồm: giao diện người dùng đẹp mắt, hệ thống quản lý sản phẩm chi tiết, chức năng giỏ hàng linh hoạt, và quy trình đặt hàng an toàn. Phía khách hàng, ứng dụng cung cấp chức năng tìm kiếm, lọc sản phẩm theo danh mục, xem chi tiết sản phẩm, quản lý giỏ hàng, và theo dõi đơn hàng. Phía quản trị viên, hệ thống cho phép quản lý sản phẩm, cập nhật danh mục, xem danh sách đơn hàng, và quản lý người dùng. Công nghệ React Native đảm bảo giao diện mượt mà, còn MongoDB xử lý dữ liệu nhanh chóng.

4.1. Tính Năng Phía Khách Hàng

Ứng dụng khách hàng cung cấp chức năng đăng nhập an toàn, duyệt sản phẩm chăm sóc thú cưng theo danh mục, xem chi tiết sản phẩm với hình ảnh và mô tả, thêm sản phẩm vào giỏ hàng, xác nhận đơn hàng, và theo dõi trạng thái đơn hàng. Giao diện thân thiện giúp người dùng dễ dàng mua sắm.

4.2. Tính Năng Phía Quản Trị Viên

Bảng điều khiển quản trị viên cho phép quản lý sản phẩm (thêm, sửa, xóa), quản lý danh mục sản phẩm, xem danh sách và chi tiết đơn hàng, cập nhật trạng thái đơn hàng, và quản lý thông tin người dùng. Các tính năng này giúp ứng dụng thương mại điện tử hoạt động hiệu quả.

Trích đoạn nội dung tài liệu

Chương 1: Tổng quan: Tổng quan vấn đề, giới thiệu, mục tiêu, các vấn đề cần giải quyết và phương pháp nghiên cứu  Chương 2: Cơ sở lý thuyết: Lý thuyết, phương thức thực hiện, công cụ hỗ trợ.  Chương 3: Phân tích thiết kế hệ thống: Từ các vấn đề của bài toán tiến hành phân tích, thiết kế hệ thống, thiết kế các mô hình.  Chương 4: Triển khai xây dựng ứng dụng: Thiết kế giao diện và hoàn thiện chương trình.  Kết luận: Từ kết quả những gì làm được đưa ra kết luận về những gì đã đạt được, những gì chưa đạt được đồng thời đưa ra hướng phát triển cho đề tài.

Đồ án chuyên ngành 2 4 Khoa Khoa học máy tính CHƯƠNG II - CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu về React Native 2.1 Khái niệm React Native là một framework mã nguồn mở được phát triển bởi Facebook, cho phép các nhà phát triển xây dựng ứng dụng di động native bằng cách sử dụng JavaScript và React. Thay vì kết xuất giao diện bằng HTML và CSS như ReactJS, React Native sử dụng các thành phần native (native components) để tạo giao diện người dùng, giúp ứng dụng đạt hiệu suất cao và trải nghiệm gần giống như các ứng dụng được viết bằng ngôn ngữ native (Swift, Objective-C, Java, hoặc Kotlin).2 Lịch sử phát triển  2013: Facebook gặp phải vấn đề về hiệu suất khi ứng dụng di động Facebook trên iOS và Android phát triển. Nhóm phát triển nội bộ bắt đầu tìm kiếm một giải pháp để xây dựng ứng dụng di động hiệu quả hơn.  2015: Facebook chính thức công bố React Native tại sự kiện React.

Framework nhanh chóng được cộng đồng đón nhận bởi khả năng tạo ra ứng dụng di động có hiệu suất tốt với trải nghiệm native thực sự. Đồ án chuyên ngành 2 5 Khoa Khoa học máy tính  2016: Facebook phát hành React Native cho cả hai nền tảng Android và iOS, mở rộng phạm vi sử dụng.  2018: React Native được cải tiến lớn với sự ra mắt của React Native 0.57, hỗ trợ ES6 và cải thiện hệ sinh thái công cụ phát triển.  2020: Facebook thông báo kế hoạch làm mới toàn bộ React Native với dự án Fabric, nhằm cải thiện hiệu suất, kiến trúc và khả năng mở rộng.

 Hiện nay: React Native vẫn là một trong những framework phổ biến nhất để phát triển ứng dụng di động cross-platform, được sử dụng bởi các công ty lớn như Facebook, Instagram, Uber Eats, Airbnb, và Microsoft.1 Ưu điểm  Khả năng tái sử dụng mã nguồn (Code Reusability) - React Native cho phép sử dụng chung một mã nguồn cho cả iOS và Android, tiết kiệm thời gian và chi phí phát triển. - Tái sử dụng các logic của ReactJS nếu bạn đã quen thuộc với nó.  Hiệu suất cao - React Native sử dụng các thành phần native, mang lại hiệu suất gần như ứng dụng native thực sự.  Cộng đồng mạnh mẽ - Là mã nguồn mở, React Native có sự hỗ trợ từ cộng đồng lớn và liên tục được cải tiến.

- Thư viện phong phú, dễ dàng tích hợp các tính năng mới.  Live Reload và Hot Reloading - Tính năng Live Reload cho phép bạn kiểm tra ứng dụng ngay khi lưu mã nguồn. - Hot Reloading cho phép thay đổi giao diện mà không cần khởi động lại ứng dụng. Đồ án chuyên ngành 2 6 Khoa Khoa học máy tính Đồ án chuyên ngành 2 7 Khoa Khoa học máy tính  Hỗ trợ đa nền tảng (Cross-platform) - Có thể phát triển cho cả Android và iOS từ một mã nguồn duy nhất.2 Nhược điểm  Hiệu suất kém hơn ứng dụng native thuần - Mặc dù hiệu suất tốt, nhưng đôi khi không đạt được tối ưu tuyệt đối so với ứng dụng native viết bằng Swift (iOS) hay Kotlin (Android).

 Phụ thuộc vào thư viện bên thứ ba - Nhiều tính năng cần sử dụng thư viện ngoài vì React Native không hỗ trợ đầy đủ tất cả các API native.  Độ phức tạp tăng khi cần tích hợp với các module native - Khi ứng dụng yêu cầu các tính năng đặc thù của hệ điều hành, bạn phải viết các module native bằng Swift/Java, gây khó khăn cho các nhà phát triển chỉ quen thuộc với JavaScript.4 Ứng dụng của React Native Được sử dụng để phát triển ứng dụng di động đa nền tảng, với những ứng dụng tiêu biểu như: - Facebook - Instagram - Uber Eats - Walmart - Skype Đồ án chuyên ngành 2 8 Khoa Khoa học máy tính 2.2 Giới thiệu về MongoDB 2.1 Khái niệm MongoDB là một cơ sở dữ liệu NoSQL mã nguồn mở, được thiết kế để lưu trữ dữ liệu theo cấu trúc document-oriented (định hướng tài liệu) thay vì dạng bảng như các cơ sở dữ liệu quan hệ (RDBMS). MongoDB lưu trữ dữ liệu dưới dạng JSON-like documents (được gọi là BSON) với cấu trúc linh hoạt, giúp nó dễ dàng xử lý các dữ liệu phức tạp và không có cấu trúc cố định. Cơ sở dữ liệu MongoDB 2.2 Lịch sử phát triển  2007: MongoDB được phát triển bởi công ty 10gen (sau đổi tên thành MongoDB Inc.) như một phần của nền tảng PaaS (Platform as a Service).

 2009: Phiên bản đầu tiên của MongoDB được phát hành dưới dạng mã nguồn mở.  2013: MongoDB trở thành một trong những cơ sở dữ liệu NoSQL phổ biến nhất thế giới, nhờ vào sự hỗ trợ mạnh mẽ từ cộng đồng và khả năng mở rộng tốt. Đồ án chuyên ngành 2 9 Khoa Khoa học máy tính  2017: MongoDB Inc. chính thức niêm yết trên sàn giao dịch Nasdaq với mã cổ phiếu MDB, đánh dấu bước phát triển lớn trong lịch sử công ty.

 Hiện nay: MongoDB được sử dụng rộng rãi trong các ứng dụng web, di động, IoT, và phân tích dữ liệu. Nó cũng cung cấp phiên bản đám mây là MongoDB Atlas, cho phép triển khai và quản lý dễ dàng hơn.1 Ưu điểm  Cấu trúc linh hoạt - MongoDB lưu trữ dữ liệu theo tài liệu (document) dạng BSON, cho phép lưu trữ dữ liệu có cấu trúc phức tạp mà không cần định nghĩa trước các bảng hay schema như RDBMS.  Khả năng mở rộng tốt (Scalability) - Hỗ trợ sharding (phân mảnh dữ liệu) để mở rộng theo chiều ngang, giúp xử lý lượng lớn dữ liệu và các yêu cầu truy cập cao.  Hiệu suất cao - MongoDB được thiết kế để tối ưu hóa cho các tác vụ ghi dữ liệu và truy vấn nhanh chóng.

 Dễ tích hợp với các ngôn ngữ lập trình - Cung cấp API client cho nhiều ngôn ngữ như JavaScript (Node.js), Python, Java, C#, và nhiều ngôn ngữ khác.  Khả năng xử lý dữ liệu không đồng nhất - MongoDB phù hợp với các ứng dụng có dữ liệu thay đổi liên tục hoặc không có cấu trúc cố định, như hệ thống quản lý nội dung, hệ thống log, hoặc mạng xã hội.2 Nhược điểm  Không hỗ trợ các giao dịch phức tạp như RDBMS - MongoDB không lý tưởng cho các ứng dụng yêu cầu giao dịch ACID phức tạp trên nhiều bảng.  Chi phí lưu trữ lớn hơn Đồ án chuyên ngành 2 10 Khoa Khoa học máy tính - Vì lưu trữ dữ liệu theo dạng BSON (JSON kèm theo metadata), MongoDB có thể tốn nhiều dung lượng hơn so với RDBMS truyền thống.  Cần cấu hình và quản lý phức tạp - Để đạt được hiệu suất tối ưu, các chức năng như sharding và replication cần được cấu hình cẩn thận.4 Kiến trúc của MongoDB - Document: Dữ liệu được lưu trữ dưới dạng JSON-like document (BSON).

- Collection: Tập hợp các document, tương tự như bảng trong cơ sở dữ liệu quan hệ. - Database: Chứa nhiều collection. - Shard: Dữ liệu được chia nhỏ để lưu trên nhiều server. - Replica Set: Cơ chế sao lưu dữ liệu để đảm bảo tính sẵn sàng cao.5 Ứng dụng của MongoDB  Ứng dụng web và di động: MongoDB rất phù hợp với các hệ thống có nhu cầu lưu trữ dữ liệu động hoặc không đồng nhất, như ứng dụng thương mại điện tử, mạng xã hội, hoặc nền tảng học trực tuyến.

 Hệ thống IoT: Với khả năng xử lý dữ liệu lớn và không có cấu trúc, MongoDB thường được sử dụng trong các dự án IoT để lưu trữ dữ liệu cảm biến.  Phân tích dữ liệu: MongoDB cung cấp các công cụ mạnh mẽ để thực hiện truy vấn và phân tích dữ liệu, đặc biệt trong hệ thống log hoặc hệ thống quản lý nội dung. Đồ án chuyên ngành 2 11 Khoa Khoa học máy tính CHƯƠNG III - PHÂN TÍCH THIẾT KẾ HỆ THỐNG 3.1 Phân tích và thiết kế hệ thống 3.1 Phân tích  Phần quản lý trong Admin Admin quản lý toàn bộ hoạt động của ứng dụng, bao gồm: - Quản lý sản phẩm - Quản lý danh mục sản phẩm - Quản lý người dùng - Quản lý đơn hàng  Giao diện người dùng - Ứng dụng không nên quá phức tạp. - Dung lượng không quá lớn.

- Thanh menu đơn giản. - Font chữ đơn giản, dễ nhìn, màu sắc hài hòa. - An toàn và bảo mật dữ liệu. - Hiển thị được các sản phẩm mới, các sản phẩm bán chạy, danh mục sản phẩm,….

- Cho phép người dùng xem thông tin chi tiết, tìm kiếm sản phẩm theo tên/thể loại,. - Cho phép người dùng đăng ký tài khoản.2 Thiết kế hệ thống  Phân hệ Admin - Quản lý sản phẩm - Quản lý danh mục sản phẩm - Quản lý người dùng - Quản lý đơn hàng  Phân hệ Khách hàng - Đăng nhập, Đăng ký tài khoản - Reset mật khẩu Đồ án chuyên ngành 2 12 Khoa Khoa học máy tính - Xem danh sách sản phẩm - Xem chi tiết sản phẩm - Quản lý giỏ hàng - Quản lý đơn hàng - Quản lý địa chỉ 3.2 Biểu đồ phân rã chức năng Hình 3-3. Biểu đồ phân rã chức năng 3.3 Thiết kế chi tiết hệ thống với UML 3.1 Tổng quan về UML  Sự ra đời - Năm 1980: Công nghệ phần mềm chỉ có ngôn ngữ hướng đối tượng Simula. - Nửa sau thập niên 1980: Các ngôn ngữ như Smalltalk, C++ xuất hiện, kéo theo nhu cầu mô hình hóa hệ thống phần mềm theo hướng đối tượng.

 Đặc điểm của UML Đồ án chuyên ngành 2 13 Khoa Khoa học máy tính - UML là ngôn ngữ mô hình hóa thống nhất, gồm các ký hiệu hình học để miêu tả thiết kế hệ thống. - Dùng để đặc tả, trực quan hóa, xây dựng và làm tài liệu cho các hệ thống phần mềm phức tạp. - Là công cụ giao tiếp giữa người dùng, nhà phân tích, nhà thiết kế và nhà phát triển.  Một số biểu đồ cơ bản - Biểu đồ Use-Case ₒ Miêu tả hệ thống, tác nhân và các Use-Case, thể hiện quan hệ: ₒ Include: Sử dụng lại chức năng.

ₒ Extend: Mở rộng chức năng. ₒ Generalization: Kế thừa chức năng.