Báo cáo chuyên Đề học phần lập trình trên thiết bị di Động Đề ti xây dựng ứng bán Đồ nội thất

TRƯỜNG ĐẠI HỌC ĐIỆN LỰCKHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN LẬP TRÌNH TRÊN THIẾT BỊ DI ĐỘNG ĐỀ TI: XÂY DỰNG ỨNG BÁN ĐỒ NỘI THẤT Hà Nội tháng 12 năm 2023 Giảng viên hướng

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 LẬP TRÌNH TRÊN THIẾT BỊ DI ĐỘNG

ĐỀ TI:

XÂY DỰNG ỨNG BÁN ĐỒ NỘI THẤT

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

Giảng viên hướng dẫn : ĐỖ ĐỨC CƯỜNG

DANH MỤC

DANH MỤC HÌNH ẢNH 4

LỜI MỞ ĐẦU 5

CHƯƠNG 1: GIỚI THIỆU LẬP TRÌNH DI ĐỘNG VÀ REACT NATIVE 6

1.1 Giới thiệu về lập trình di động 6

1.1.1 Khái quát về lập trình trên thiết bị di động 6

1.1.2 Các đặc điểm của lập trình di động 7

1.1.3 Xu hướng công nghệ tương lai về lập trình di động 7

1.2 Giới thiệu về React Native 7

1.2.1 React Native là gì 7

1.2.2 Tại sao nên dùng React Native 8

1.2.3 Cách hoạt động React Native 9

CHƯƠNG 2: APP BÁN ĐỒ NỘI THẤT FURNITUREHUB 10

2.1 Giới thiệu đề tài 10

2.2 Phân tích thiết kế hệ thống 11

2.2.1 Sơ đồ UseCase tổng quát 11

2.2.2 UseCase Diagram 11

2.2.3 Sequence Diagram 13

2.3 Layout các trang 15

2.3.1 Layout trang chủ 15

2.3.2 Layout trang sản phẩm 16

2.3.3 Layout trang chi tiết sản phẩm 17

2.3.4 Layout trang đăng nhập 18

2.3.5 Layout trang đăng ký 19

2.3.6 Layout trang hồ sơ 20

2.3.7 Layout trang giỏ hàng 21

2.3.8 Layout trang tìm kiếm 22

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG 23

3.1 Trang chủ 23

3.2 Trang sản phẩm 24

3.3 Trang chi tiết sản phẩm 25

3.4 Đăng nhập 26

3.5 Đăng ký 27

3.6 Hồ sơ 28

3.7 Giỏ hàng 29

3.8 Giao diện tìm kiếm 30

KẾT LUẬN 31

DANH MỤC HÌNH ẢNH Hình 2 1 Biểu đồ usecase tổng quát 11

Hình 2 2 Biểu đồ usecase đăng nhập 11

Hình 2 3 Biểu đồ usecase tìm kiếm sản phẩm 12

Hình 2 4 Biểu đồ usecase mua hàng 12

Hình 2 5 Biểu đồ usecase chỉnh sửa hồ sơ 12

Hình 2 6 Biểu đồ tuần tự chức năng đăng nhập 13

Hình 2 7 Hình 2.7 Biểu đồ tuần tự chức năng tìm kiếm sản phẩm 13

Hình 2 8 Biểu đồ tuần tự chức năng mua hàng 14

Hình 2 9 Biểu đồ tuần tự chức năng chỉnh sửa hồ sơ 14

Hình 2 10 Giao diện trang chính 15

Hình 2 11 Layout trang sản phẩm 16

Hình 2 12 Layout trang chi tiết sản phẩm 17

Hình 2 13 Layout trang đăng nhập 18

Hình 2 14 Layout trang đăng ký 19

Hình 2 15 Layout trang giới thiệu 20

Hình 2 16 Layout trang giỏ hàng 21

Hình 2 17 Layout trang tìm kiếm 22

Hình 3 1 Giao diện trang chính 23

Hình 3 2 Giao diện sản phẩm 24

Hình 3 3 Giao diện chi tiết sản phẩm 25

Hình 3 4 Giao diện đăng nhập 26

Hình 3 5 Giao diện đăng ký 27

Hình 3 6 Giao diện hồ sơ 28

Hình 3 7 Giao diện giỏ hàng 29

Hình 3 8 Giao diện tìm kiếm 30

LỜI MỞ ĐẦU

Cùng với sự phát triển vượt bậc của CNTT, con người đã xây dựng, pháttriển và bảo trì các trang web được lưu trữ trên internet dưới hình thức lập trìnhweb Một trang web đơn giản có thể được viết bằng ngôn ngữ HTML, CSS vàchỉ chứa vài trăm dòng lệnh Tuy nhiên đối với trang web lớn như Facebook cóthể lên đến 60 triệu dòng lệnh để phát triển hoàn chỉnh trang web

Trước nhu cầu của thị trường mua bán trao đổi hàng hóa, cập nh ậtthông tin, tin tức thì thay vì phải quảng bá sản phẩm, hàng hóa một cách truyềnthống thì ta có thể thay thế vào đó là một trang web mua -bán với nhiều tiện ích.Cuộc sống con người càng phát triển thì nhu cầu sống của con người cũng đượcnâng cao và những nhu cầu đơn giản nhưng cũng rất thiết thực Đó là nhu cầu

ăn, ở và mặc đây là vấn đề cũng đang là 1 bài toán của các nhà kinh doanh, làmsao để đáp ứng nhu cầu của con người để cải thiện đời sống ngày càng cao.Chính vì vậy, để đáp ứng những nhu cầu đó trên sơ sở kế thừa nhữngtrang web bán hàng khác nhóm em xây dựng một website qua mạng để đáp ứngnhu cầu mua sắm của mọi người, giúp họ tiết kiệm được thời gian, chi phítrong việc phải đi ra các shop, các cửa hàng hay các chợ truyền thống để mua vàtìm kiếm sản phẩm Giúp cho người quản trị dễ dàng trong việc phân quyềnquản lý khách hàng, các loại sản phẩm, các nhãn hiệu và các đơn đặt hàng Đó là

lý do nhóm em chọn đề tài “Xây dựng website bán bán đồ nội thất”.

CHƯƠNG 1: GIỚI THIỆU LẬP TRÌNH DI ĐỘNG V REACT NATIVE 1.1 Giới thiệu về lập trình di động

1.1.1 Khái quát về lập trình trên thiết bị di động

Lập trình trên thiết bị di động là quá trình tạo ra ứng dụng và phần mềmchạy trên các thiết bị di động như điện thoại di động và máy tính bảng Đây làmột lĩnh vực phát triển phổ biến và có sự yêu cầu ngày càng tăng do sự gia tăngcủa thiết bị di động trong cuộc sống hàng ngày của mọi người Hệ điều hành diđộng: Các thiết bị di động chạy trên các hệ điều hành di động như Android, iOS(cho iPhone và iPad), và Windows Phone

Ứng dụng di động: Ứng dụng di động có thể làm nhiều công việc khácnhau, từ ứng dụng xã hội đến trò chơi, ứng dụng văn phòng, ứng dụng thươngmại điện tử và nhiều loại ứng dụng khác Các ứng dụng này phải được phát triển

và tối ưu hóa cho các màn hình di động nhỏ và tương tác cảm ứng

Giao diện người dùng (UI) và trải nghiệm người dùng (UX Thiết kế):

giao diện người dùng thân thiện và trải nghiệm người dùng tốt là yếu tố quantrọng trong lập trình di động Điều này bao gồm việc thiết kế các thành phầngiao diện như nút, hình ảnh, và thao tác cảm ứng để tạo ra trải nghiệm dễ sửdụng và hấp dẫn

Kết nối mạng và dữ liệu: Lập trình di động thường liên quan đến việc sửdụng kết nối mạng để truy cập dữ liệu từ máy chủ hoặc dịch vụ web Điều này

có thể bao gồm việc gửi và nhận dữ liệu, đồng bộ hóa dữ liệu và quản lý bảomật

Thử nghiệm và triển khai: Lập trình viên di động cần thực hiện thửnghiệm kỹ thuật để đảm bảo rằng ứng dụng hoạt động đúng cách trên các thiết

bị di động khác nhau và sau đó triển khai ứng dụng lên các cửa hàng ứng dụngnhư Google Play Store và Apple App Store

Cập nhật và duy trì: Sau khi ứng dụng được triển khai, lập trình viên phảiliên tục duy trì và cập nhật để sửa lỗi, thêm tính năng mới và đảm bảo tínhtương thích với các phiên bản mới của hệ điều hành di động

1.1.2 Các đặc điểm của lập trình di động

- Dễ tiếp cận, dễ tìm hiểu và dễ học

- Giúp lập trình viên tạo ra ứng dụng cho người sử dụng

- Giúp hiện thực hóa ý tưởng của lập trình viên

- Giúp lập trình viên tạo ra ứng dụng là cầu nối giao tiếp với mọi người trên thếgiới qua số lượng người download và sử dụng ứng dụng của mình

1.1.3 Xu hướng công nghệ tương lai về lập trình di động

Đa dạng về phương pháp phát triển: Lập trình di động có nhiều phươngpháp khác nhau như web app, hybrid app và native app, nhưng tất cả đều cầnchạy trên mã gốc của một nền tảng cụ thể

Yêu cầu hiểu biết sâu về nền tảng: Các tổ chức khi muốn phát triển ứngdụng cho một nền tảng cụ thể thường tuyển dụng những người có kiến thứcchuyên sâu về nền tảng đó

Quản lý dự án không chỉ dành cho quản lý: Lập trình viên cũng cần hiểuquá trình phát triển phần mềm và có khả năng làm việc trong các quy trình pháttriển phần mềm như Agile để tối ưu hóa quá trình làm việc

Quy trình Agile: Agile là một phương pháp giúp rút ngắn và tinh gọn quátrình phát triển phần mềm Có nhiều phương pháp khác nhau trong Agile nhưScrum, Kanban, và XP, và lập trình viên cần chọn phương pháp phù hợp với dự

Sự ra đời của React Native giúp cho lập trình viên web có thể viết ứngdụ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ến đấu trên mọi mặt trậnweb, desktop, server và bây giờ là mobile Điều này không những có lợi cho lậptrình viên web mà nó giúp cho các doanh nghiệp phát triển sản phẩm đầu cuốivớ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ính năngLive Reload tương tự tính năng Hot Replacement Module trong Webpack Tínhnăng Live Reload khác tính năng Reload, trong khi Live Reload chỉ tải lại chứcnăng/tập tin nào thay đổi, thì Reload sẽ tải lại toàn bộ mã nguồn Ngoài ra, bạncũng dễ dàng debug javascript trong Chrome và Safari Đối với những lỗi thuộcNative thì phải cần đến XCode cho iOS hoặc Android Studio cho Android

1.2.2 Tại sao nên dùng React Native

- Có thể tái sử dụng code

React Native cho phép các developer có thể tái sử dụng code trong khipháttriển các ứng dụng đa nền tảng Đặc biệt, developer có thể tái sử dụng hầunhư 80-90% các đoạn code thay vì phải viết và tạo các ứng dụng riêng biệt chocác nền tảngkhác nhau Ưu điểm này giúp người dùng:

 Tiết kiệm thời gian và giảm chi phí phát triển của một ứng dụng

 Tận dụng nguồn nhân lực tốt hơn

 Duy trì ít code hơn, ít bugs hơn

 Các tính năng trong cả 2 platforms cũng tương tự nhau

- Cộng đồng người dùng lớn

React Native được đánh giá là một trong những Framework được yêuthíchnhất (khảo sát của stack overflow vào năm 2019) Nhờ cộng đồng ngườidùng rất lớntrên toàn thế giới, bạn có thể tìm sự hỗ trợ nếu gặp phải bugs

- Tính ổn định và tối ưu

Được phát triển bởi Facebook, React Native có hiệu năng ổn định khácao

 Mã React Native giúp đơn giản hóa quá trình xử lý dữ liệu

 Đội ngũ phát triển ứng dụng không quá lớn

 Xây dựng ứng dụng ít native code nhất cho nhiều hệ điều hành khác nhau

 Trải nghiệm người dùng tốt hơn khi so sánh với ứng dụng Hybrid

1.2.3 Cách hoạt động React Native

Ứng dụng viết bằng React Native được chia làm 2 phần: phần view (hiểnthị) và phần xử lý

Phần hiển thị được biên dịch từ javascript sẽ map với những componentcủa hệ thống ví dụ: điều hướng, tab, touch…Phần view này được lấy cảm hứng

từ Virtual DOM của React JS, mọi xử lý view được thực hiện trên một câyDOM ảo, sau đó được React Native render lại bằng native view

Phần xử lý vẫn được thực hiện trực tiếp bằng ngôn ngữ javascript: ví dụ

“1+1=2”, biểu thức này được xử lý dưới bộ core thực thi Javascript, không phải thông dịch qua Java hay Swift/Objective-C rồi mới làm phép tính

CHƯƠNG 2: APP BÁN ĐỒ NỘI THẤT FURNITUREHUB 2.1 Giới thiệu đề tài

Mô tả đề tài: "FurnitureHub" là một ứng dụng di động dành cho việc mua sắm

và khám phá các sản phẩm nội thất đa dạng và đẹp mắt Ứng dụng này cung cấpmột nền tảng thuận tiện cho người dùng tìm kiếm, tư vấn và mua sắm đồ nộithất để cải thiện không gian sống của họ

Chức năng và tính năng:

 Danh mục đa dạng: Hiển thị các danh mục sản phẩm nội thất, bao gồm

nội thất phòng khách, phòng ngủ, phòng bếp, và nhiều loại nội thất khác

 Tìm kiếm và lọc: Cho phép người dùng tìm kiếm sản phẩm theo từ khóa,

mức giá, màu sắc, kích thước và thương hiệu

 Thông tin chi tiết sản phẩm: Cung cấp thông tin chi tiết về sản phẩm

bao gồm hình ảnh, mô tả, giá cả và sự đánh giá từ người dùng khác

 Tích hợp thanh toán: Cho phép người dùng mua sản phẩm bằng các

phương thức thanh toán an toàn như thẻ tín dụng, ví điện tử, và COD(Cash on Delivery)

 Giỏ hàng và đặt hàng: Cho phép người dùng thêm sản phẩm vào giỏ

hàng, kiểm tra đơn hàng, và theo dõi tình trạng giao hàng

 Xem trước sản phẩm trong không gian thực tế ảo (AR): Tích hợp công

nghệ AR cho phép người dùng xem trước cách sản phẩm sẽ trông nhưtrong không gian của họ trước khi mua

 Ưu điểm và lợi ích:

o Cung cấp trải nghiệm mua sắm thuận tiện và linh hoạt cho người dùng

o Tạo cơ hội cho các nhà sản xuất và thương hiệu nội thất để tiếp cận kháchhàng một cách dễ dàng

o Tăng cơ hội bán hàng và tạo doanh thu

o Hỗ trợ khách hàng trong việc tìm kiếm và lựa chọn sản phẩm phù hợp

o Tạo nền tảng cho việc chia sẻ đánh giá và kết nối cộng đồng yêu thích nộithất

2.2 Phân tích thiết kế hệ thống

2.2.1 Sơ đồ UseCase tổng quát

Hình 2 1 Biểu đồ usecase tổng quát

2.2.2 UseCase Diagram

UseCase Đăng nhập

Hình 2 2 Biểu đồ usecase đăng nhập

UseCase Tìm kiếm sản phẩm:

Hình 2 3 Biểu đồ usecase tìm kiếm sản phẩm

UseCase Mua hàng

Hình 2 4 Biểu đồ usecase mua hàng

UseCase Chỉnh sửa hồ sơ

Hình 2 5 Biểu đồ usecase chỉnh sửa hồ sơ

2.2.3 Sequence Diagram

Biểu đồ tuần tự chức năng đăng nhập

Hình 2 6 Biểu đồ tuần tự chức năng đăng nhập

Biểu đồ tuần tự chức năng tìm kiếm sản phẩm

Hình 2 7 Biểu đồ tuần tự chức năng tìm kiếm sản phẩm

Biểu đồ tuần tự chức năng mua hàng

Hình 2 8 Biểu đồ tuần tự chức năng mua hàng

Biểu đồ tuần tự chức năng chỉnh sửa hồ sơ

Hình 2 9 Biểu đồ tuần tự chức năng chỉnh sửa hồ sơ

2.3 Layout các trang

2.3.1 Layout trang chủ

Hình 2 10 Giao diện trang chính

2.3.2 Layout trang sản phẩm

Hình 2 11 Layout trang sản phẩm

2.3.3 Layout trang chi tiết sản phẩm

Hình 2 12 Layout trang chi tiết sản phẩm

2.3.4 Layout trang đăng nhập

Hình 2 13 Layout trang đăng nhập

2.3.5 Layout trang đăng ký

Hình 2 14 Layout trang đăng ký

2.3.6 Layout trang hồ sơ

Hình 2 15 Layout trang giới thiệu

2.3.7 Layout trang giỏ hàng

Hình 2 16 Layout trang giỏ hàng

2.3.8 Layout trang tìm kiếm

Hình 2 17 Layout trang tìm kiếm

CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG

3.1 Trang chủ

Hình 3 1 Giao diện trang chính

3.2 Trang sản phẩm

Hình 3 2 Giao diện sản phẩm

3.3 Trang chi tiết sản phẩm

Hình 3 3 Giao diện chi tiết sản phẩm

3.4 Đăng nhập

Hình 3 4 Giao diện đăng nhập

3.5 Đăng ký

Hình 3 5 Giao diện đăng ký

3.6 Hồ sơ

Hình 3 6 Giao diện hồ sơ

3.7 Giỏ hàng

Hình 3 7 Giao diện giỏ hàng

3.8 Giao diện tìm kiếm

Hình 3 8 Giao diện tìm kiếm

KẾT LUẬN

Trong hành trình học môn lập trình trên thiết bị di động, chúng em đã trảiqua những thử thách, học được nhiều điều mới mẻ và có cơ hội ứng dụng kiếnthức vào thực tế Môn học không chỉ giúp chúng em làm quen với các ngôn ngữlập trình di động như Swift và Kotlin mà còn mở ra một cửa sổ mới về sự sángtạo và tiềm năng phát triển không ngừng trong lĩnh vực này

Qua bài báo cáo này, chúng em đã có cơ hội áp dụng những kiến thức và

kỹ năng đã học vào việc xây dựng ứng dụng thực tế Những đồng hành khôngngừng từ thầy cô đã giúp chúng em vượt qua những thách thức kỹ thuật và pháttriển khả năng giải quyết vấn đề của mình

Quan trọng hơn, chúng em nhận ra tầm quan trọng của trải nghiệm ngườidùng trong việc phát triển ứng dụng di động Sự tập trung vào giao diện ngườidùng và trải nghiệm người dùng cuối cùng là chìa khóa để tạo ra những ứngdụng được người dùng chào đón và yêu thích

Môn học này không chỉ giúp chúng em mở rộng kiến thức về lập trình diđộng mà còn tạo ra những cơ hội mới để phát triển bản thân Chúng em tự tinhơn trong việc đối mặt với thách thức công nghệ, và đồng thời, chúng em nhận

ra rằng hành trình học tập này chỉ là bước đầu tiên trong sự nghiệp của chúngem

Chân thành cảm ơn thầy cô đã luôn hỗ trợ và động viên chúng em trongsuốt thời gian học môn này Những kiến thức và kinh nghiệm chúng em thuđược sẽ là nguồn động viên lớn để chúng em tiếp tục phát triển và khám pháthêm về thế giới lập trình di động

Tuy vậy, do những hạn chế về trình độ, thời gian nên chúng emkhông khỏi có những thiếu sót trong quá trình tìm hiểu, nghiên cứu cũng nhưthực nghiệm Chúng em rất mong nhận được đánh giá và chỉnh sửa từ các thầycô