Bá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

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

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC KHOA CÔNG NGHỆ THÔNG TIN

BÁ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 : NGUYỄN VIỆT ANH

Giảng viên hướng dẫn : CẤN ĐỨC ĐIỆP

Hà Nội, tháng 12 năm 2023

PHIẾU CHẤM ĐIỂMSTT Họ và tên sinh viên Nội dung thực hiện Chữ ký Điểm

1 Nguyễn Việt Anh

21810310485

Phân tích + code giao diện + làm báo cáo

Phiếu chấm điểm của giảng viên:

Giảng viên chấm 1:

Giảng viên chấm 2:

MỤC LỤC

LỜI CẢM ƠN 1

LỜI MỞ ĐẦU 2

CHƯƠNG 1: TỔNG QUAN 3

1.1 Tổng quan về React Native 3

1.1.1 Tổng quan về ứng dụng React Native 3

1.1.2 Ưu và nhược điểm của React Native 3

1.2 Tổng quan về đề tài 4

1.2.1 Khảo sát hệ thống 4

1.2.2 Khái quát hệ thống 5

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 6

2.1 Mô tả hệ thống 6

2.2 Xác định thực thể và chức năng 6

2.3 Sơ đồ phân tích hệ thống 6

2.4 Thiết kế cơ sở dữ liệu 27

CHƯƠNG 3: KẾT QUẢ THỰC NGHIỆM 28

3.1 Giao diện ứng dụng 28

3.2 Đăng nhập , Đăng ký 29

3.3/ Giao diện trang chủ ứng dụng 30

3.4 Giao diện sản phẩm và danh mục 31

3.4 Mua sản phẩm và thanh toán hóa đơn 32

3.6 Thông tin tài khoản người dùng 34

KẾT LUẬN 35

T$I LIỆU THAM KHẢO 36

LỜI CẢM ƠN

Trên thực tế, không có sự thành công nào mà không gắn liền vớinhững sự hỗ trợ, sự giúp đỡ dù ít hay nhiều, dù là trực tiếp hay gián tiếpcủa người khác Trong suốt thười gian từ khi bắt đầu học tập ở giảngđường Đại học đã đến nay, chúng em đã nhận được rất nhiều sự quantâm, giúp đỡ của thầy cô, gia đình và bạn bè

Với lòng biết ơn sâu sắc nhất, chúng em xin gửi đến thầy cô ởKhoa Công Nghệ Thông Tin - trường Đại Học Điện Lực đã cùng với trithức và tâm huyết của mình để truyền đạt vốn kiến thức quý báu chochúng em trong suốt thời gian học tập tại trường Và đặc biệt, trong kỳnày, chúng em được tiếp cận với môn học rất hữu ích đối với sinh viên

ngành Công Nghệ Thông Tin Đó là môn: “Lập trình trên thiết bị di động”.

Chúng em xin chân thành cảm ơn thầy Cấn Đức Điệp đã tận tâmhướng dẫn chúng em qua từng buổi học trên lớp cũng như những buổi nóichuyện, thảo luận về môn học Trong thời gian được học tập và thực hànhdưới sự hướng dân của cô, em không những thu được rất nhiều kiến thức

bổ ích, mà còn được truyền sự say mê và thích thú đối với bộ môn “Lập trình trên thiết bị di động” Nếu không có những lời hướng dẫn, dạy

bảo của thầy thì em nghĩ báo cáo này rất khó có thể hoàn thành được.Mặc dù đã rất cố gắng hoàn thiện báo cáo với tất cả sự nỗ lực, tuynhiên, do bước đầu đi vào thực tế, tìm hiểu và xây dựng báo cáo trongthời gian có hạn, và kiến thức còn hạn chế, nhiều bỡ ngỡ, nên báo cáo

“Xây dựng ứng dụng bán quần áo thời trang ” chắc chắn sẽ không thể

tránh khỏi những thiếu sót Chúng em rất mong nhận được sự quan tâm,thông cảm và những đóng góp quý báu của các thầy cô và các bạn để báocáo này được hoàn thiện hơn

Một lần nữa, chúng em xin chân thành cảm ơn và luôn mong nhậnđược sự đóng góp của mọi người Trân trọng !

LỜI MỞ ĐẦU

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa đượcxem là một trong những yếu tố mang tính quyết định trong hoạt động củacác chính phủ, tổ chức, cũng như của các công ty, nó đóng vai trò hết sứcquan trọng, có thể tạo ra những bước đột phá mạnh mẽ

Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạngđiện tử, công nghệ thông tin cũng có được những công nghệ có đẳng cấp

và lần lượt chinh phục hết đỉnh cao này đến đỉnh cao khác Mạng internet

là một trong những sản phẩm có giá trị hết sức lớn lao và ngày càng trởthành một công cụ không thể thiếu, là nền tảng chính cho sự truyển tải,trao đổi thông tin trên toàn cầu

Giờ đây, mọi việc liên quan đến thông tin trở nên thật dễ dàng chongười sử dụng, chỉ cần có một máy tính kết nối Internet hay điện thoạithông minh ta đã có thể thỏa thích xem phim, nghe nhạc hay đến cả muasắm

Trong thời gian qua, vấn đề cần được quan tâm nhất bên phíangười dùng là có một hệ thống mua sắm online, không cần tới tận nơi, tốnthời gian mà ta vẫn có một bộ đồ thời trang, đồ ăn ngon được mang tớitận nhà Chính vì những lý do trên mà nhiều nhà cung cấp đang cố gắngtạo ra một hệ thống để phục vụ được nhu cầu của người tiêu dùng.Cùng với nhưng yếu tố trên mà nhóm chúng em đã áp dụng cáckiến thức mà mình đã học vào đề tài thực tiễn này Đó chính là xây dựngmột ứng dụng mua sắm quần áo thời trang để phục vụ nhu cầu của mọi

người tiêu dùng Chính vì vậy, chúng em quyết định chọn đề tài “Xây dựng ứng dụng bán quần áo thời trang” làm đề tài kết thúc học phần

của mình

2

CHƯƠNG 1: TỔNG QUAN1.1 Tổng quan về React Native

1.1.1 Tổng quan về ứng dụng React Native

React Native là framework giúp lập trình viên viết ứng dụng chỉbằng Javascript Đúng vậy, chỉ đơn giản là Javascript, React Native phủnhận định nghĩa về ứng dụng Native ở đoạn trên

Sự ra đời của React Native giúp cho lập trình viên web có thể viếtứng dụng Native để khắc phục các điểm yếu của ứng dụng web và hybrid

Và nhờ đó, chỉ với một kỹ sư thành thạo Javascript, bạn có thể chiếu đấutrên mọi mặt trận web, desktop, server và bây giờ là moblie Điều nàykhông những có lợi cho lập trình viên web mà nó giúp cho các doanhnghiệp phát triển sản phẩm đầu cuối với ít nhân lực hơn

Khi xây dựng React Native, điều tuyệt vời là đã được tích hợp tínhnăng Live Reload tương tự tính năng Hot Replacement Module trongWebpack Tính năng Live Reload khác tính năng Reload, trong khi LiveReload chỉ tải lại chức năng hoặc tập tin nào thay đổi thì Reload sẽ tải lạitoàn bộ mã nguồn Ngoài ra, bạn cũng dễ dàng Debug Javascript trongChrome và Safari Đối với những lỗi thuộc Native thì cần phải đến Xcodecho iOS hoặc Android Studio cho Android

1.1.2 Ưu và nhược điểm của React Native

 Ưu điểm:

+ Reactjs cực kỳ hiệu quả: Reactjs tạo ra chi chính nó DOM ảo – nơi màcác component thực sự tồn tại trên đó Điều này sẽ giúp cải thiện hiệusuất rất nhiều Reactjs cũng tính toán những thay đổi nào cần cập nhật lênDom và chỉ thực hiện chúng Điều này, giúp Reactjs tránh những thao táccần trên DOM mà nhiều chi phí

+ Reactjs giúp việc viết các đoạn code JS dễ dàng hơn Nó dùng cú phápđặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML

và Javascript Ta có thể thêm vào các đoạn HTML vào trong hàm render

mà không cần phải nối chuỗi Đây là đặc tính thú vị của Reactjs Nó sẽchuyển đổi các đoạn HTML thành các hàm khởi tạo đối tượng HTMLbằng bộ biến đổi JSX

trực tiếp vào virtual DOM như thể bạn đang xem cây DOM thôngthường.

- Nhược điểm:

+ 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ướctương đương như Angular Trong đó Angular là một framework hoànchỉnh

1.2 Tổng quan về đề tài

1.2.1 Khảo sát hệ thống

Hiện nay, công nghệ thông tin được xem là một ngành mũi nhọncủa các quốc gia, đặc biệt là các quốc gia đang phát triển, tiến hành côngnghiệp hóa và hiện đại hoá như nước ta Sự bùng nổ thông tin và sự pháttriển mạnh mẽ của công nghệ kỹ thuật số, yêu cầu muốn phát triển thìphải tin học hoá tất cả các ngành, các lĩnh vực

Hệ thống môn lập trình thiết bị di động chủ đề "Xây dựng ứng dụngbán quần áo thời trang" là một chủ đề hết sức hứa hẹn, nơi mà sinh viên có

cơ hội nắm bắt và áp dụng những kiến thức thực tế về phát triển ứng dụng

di động vào lĩnh vực thời trang Khảo sát hệ thống trong nội dung nàyđóng vai trò quan trọng để xác định các yếu tố cần thiết và yêu cầu cụ thểcho việc xây dựng một ứng dụng hiệu quả và hấp dẫn

Trước hết, cần tìm hiểu về xu hướng thị trường thời trang hiện nay

để đảm bảo rằng ứng dụng sẽ đáp ứng được nhu cầu của người dùng Việcnày bao gồm việc nghiên cứu về mức độ phổ biến của các loại quần áo,phong cách và màu sắc được ưa chuộng Điều này giúp xác định danh sáchcác tính năng quan trọng cần có trong ứng dụng, chẳng hạn như tìm kiếmnhanh, xem trước sản phẩm, và chức năng thanh toán tiện lợi

Ngoài ra, việc khảo sát đối thủ cũng là một bước quan trọng Phântích những ứng dụng bán quần áo thời trang đang hoạt động trên thị trường

sẽ giúp xác định những điểm mạnh và điểm yếu của họ, từ đó đề xuấtnhững cải tiến và ưu điểm riêng để tạo nên sự độc đáo và thu hút ngườidùng

Cuối cùng, đối với hệ thống này, cần xem xét các yếu tố kỹ thuậtnhư 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 Việc này đặt ra những thách thức cụ thể cho sinh viên,tạo cơ hội cho họ áp dụng kiến thức đã học vào môi trường thực tế và pháttriển những kỹ năng cần thiết cho sự nghiệp sau này

4

+ Quản lý nhân viên

+ Quản lý thông tin khách hàng

+ Xem quần áo

+ View thông tin sản phẩm

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG2.1 Mô tả hệ thống

Hệ thống bán quần áo nữ là một ứng dụng liên kết gian tiếp giữangười tiêu dùng và người bán hàng Với hệ thống mới này không nhữnggiúp cả hai phía tiết kiệm thời gian, chi phí mà còn tiết kiệm sức lực trongquá trình vận chuyển và đi lại Đồng thời, khi sử dụng phần mềm nàymang lại hiệu quả cao cho cả người tiêu dùng lẫn người bán hàng

2.2 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

- Quản lý nhân viên

- Phê duyệt các bài đăng từ nhân viên

- Báo cáo thông kê

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

6

2.3.1 Biểu đồ lớp

Hình 2 9: Biểu đồ lớp

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í

8

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í

10

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

12

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

14

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

16

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

18

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

20

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

22

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

24

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

26

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

2.4 Thiết kế cơ sở dữ liệu

Hình 2 48: Bảng diagram

28

CHƯƠNG 3: KẾT QUẢ THỰC NGHIỆM

3.1 Giao diện ứng dụng

-Giao diện được thiết kế trẻ trung , năng động , vô cùng bắtmắ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ý

3.2 Đăng nhập , Đăng ký

-Giao diện đăng ký

-Giao diện đăng nhập

-Hai giao diện được thiết kế để người dùng đăng ký tài khoản cho riêng mình

để bắt đầu trải nghiệm mua sắm bằng những thông tin của bản thân đã được điền sẵn

30

3.3/ Giao diện trang chủ ứng dụng

-Giao diện trang chủ của ứng dụng bán quần áo đóng vai trò quan trọng trong việc thu hút và giữ chân ngườidùng Dưới đây là một mô tả giới thiệu về giao diện trang chủ của ứngdụng bán quần áo

-Banner và Hình Ảnh Nổi Bật

-Tìm Kiếm Nhanh

-Hình Ảnh Đại Diện Bắt Mắt

3.4 Giao diện sản phẩm và danh mục

-Danh mục phong cách

-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

32

3.5 Mua sản phẩm và thanh toán hóa đơn

-Thêm vào giỏ hàng

-Thanh toán thành công

-Tổng kết : + việc thanh toán nhanh thật sự cầnthiết vì nhu cầu người dùng muốn được tiêu tiền

nhanh+việc thanh toán đơn giản+phù hợp với mọi lứa tuổi

3.6 Hóa đơn đã thanh toán

-Giao diện thanh toán của ứng dụng bán quần áo là phần quan trọng cuối cùng của trải nghiệm mua sắm trực tuyến Nó cần phải đượcthiết kế đơn giản, tiện lợi và

an toàn để khách hàng có thể

dễ dàng hoàn tất giao dịch mua hàng của mình Dưới đây là một 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

34

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 ứngdụng bán quần áo là nơi người dùng có thể quản lý thông tin cá nhân, theo dõi đơn hàng, và tận hưởng các tính năng cá nhân hóa

vì vậy mọi ý kiến đóng góp từ thầy cô sẽ là rất quý giá đối với chúng

em trong việc phát triển phần mềm

 Hướng phát triển trong tương lai:

+ Ứng dụng bán quần áo sẽ tiếp tục hoàn thiện và phát triển các tínhnăng cũng như thiết lập thêm hình thức mới nhằm xây dựng nên một

hệ thống tốt, đầy đủ, mạnh phục vụ cho các nhu cầu lợi ích của conngười, đem đến sự đa dạng của đời sống con người

+ Đáp ứng được việc chạy thời gian thực (realtime)

36