xây dựng website bán đồ điện tử trực tuyến

MỞ ĐẦU Hiện nay, với xu hướng tin học hóa, áp dụng công nghệ máy tính vào trong mọi lĩnh vực hoạt động của xã hội đương thời, với thế mạnh và tính cấp thiết của ứng dụng tin học thì việc

Sinh viên: Phan Việt Linh

Mã số sinh viên: 19010017 Khóa: 2019-2023

Ngành: Công nghệ thông tin Hệ: Chính quy

Giảng viên hướng dẫn: ThS Vũ Quang Dũng

Hà Nội – 9/2023 Copies for internal use only in Phenikaa University

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC PHENIKAA

ĐỒ ÁN TỐT NGHIỆP

Thiết kế và xây dựng website bán đồ điện tử trực tuyến

Sinh viên: Phan Việt Linh

Mã số sinh viên: 19010017 Khóa: 2019-2023

Ngành: Công nghệ thông tin Hệ: Chính quy

Giảng viên hướng dẫn: ThS Vũ Quang Dũng

Hà Nội – 9/2023 Copies for internal use only in Phenikaa University

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC PHENIKAA

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

NHẬN XÉT ĐỒ ÁN TỐT NGHIỆP CỦA GIẢNG VIÊN PHẢN BIỆN

Giảng viên phản biện: ……… Bộ môn: …………

Tên đề tài: “THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ TRỰC TUYẾN” Sinh viên thực hiện: Phan Việt Linh Lớp: Công nghệ thông tin K13 Giảng viên hướng dẫn: ThS Vũ Quang Dũng NỘI DUNG NHẬN XÉT I Nhận xét ĐATN: - Bố cục, hình thức trình bày: ………

………

- Đảm bảo tính cấp thiết, hiện đại, không trùng lặp: ………

………

- Nội dung: ………

………

- Mức độ thực hiện: ………

………

II Kết quả đạt được: ………

………

III Ưu nhược điểm: ………

………

IV Kết luận: Đồng ý cho bảo vệ: Không đồng ý cho bảo vệ:

Hà Nội, ngày … tháng … năm 20…

GIẢNG VIÊN PHẢN BIỆN

(Ký, ghi rõ họ tên) Copies for internal use only in Phenikaa University

LỜI CAM ĐOAN

Tên tôi là: Phan Việt Linh

Mã sinh viên: 19010017 Lớp: Công nghệ thông tin K13

Ngành: Công nghệ thông tin

Tôi đã thực hiện đồ án tốt nghiệp với đề tài:

“THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN ĐỒ ĐIỆN TỬ TRỰC TUYẾN”

Tôi xin cam đoan đây là đề tài nghiên cứu của riêng tôi và được sự hướng dẫn của: ThS Vũ Quang Dũng

Các nội dung nghiên cứu, kết quả trong đề tài này là trung thực và chưa được các tác giả khác công bố dưới bất kỳ hình thức nào Nếu phát hiện có bất kỳ hình thức gian lận nào tôi xin hoàn toàn chịu trách nhiệm trước pháp luật

GIẢNG VIÊN HƯỚNG DẪN

Copies for internal use only in Phenikaa University

LỜI CẢM ƠN

Trước tiên, em xin gửi lời cảm ơn tới thầy hướng dẫn đồ án tốt nghiệp của em,

ThS Vũ Quang Dũng đã tạo mọi điều kiện, động viên và giúp đỡ em hoàn thành tốt

đồ án tốt nghiệp này Trong suốt quá trình nghiên cứu, thầy đã kiên nhẫn hướng dẫn,

trợ giúp và động viên em rất nhiều Sự hiểu biết sâu sắc về lĩnh vực chuyên môn, cũng

như kinh nghiệm của thầy chính là tiền đề giúp em đạt được những thành tựu và kinh

nghiệm quý báu Những góp ý và phản hồi chân thành từ quý thầy đã giúp em cải thiện

và tiến gần với mục tiêu gần nhất của bản thân em là trở thành một chuyên gia trong

lĩnh vực của mình

Em xin gửi lời cảm ơn chân thành và sâu sắc nhất đến Nhà trường về sự tận tâm

và sự chuẩn bị kỹ càng trong việc tổ chức chương trình đồ án tốt nghiệp Đây là một

giai đoạn quan trọng trong quá trình học tập của em và em thực sự trân trọng sự hỗ trợ

và định hướng mà Nhà trường đã dành cho em Điều đó đã đóng vai trò vô cùng quan

trọng và giúp em hoàn thành báo cáo này

Xin cảm ơn các thầy cô giảng viên Trường Đại học Phenikaa đã dạy dỗ, tạo điều

kiện thuận lợi cho em để tiến hành tốt đồ án tốt nghiệp Em cũng xin cảm ơn bạn bè và

gia đình đã luôn bên em, cổ vũ và động viên em những lúc khó khăn để có thể vượt qua

và hoàn thành tốt luận văn này

Em xin chân thành cảm ơn!

Sinh viên thực hiện

Linh Phan Việt Linh

Copies for internal use only in Phenikaa University

MỤC LỤC

MỞ ĐẦU 1

CHƯƠNG 1: MỞ ĐẦU 2

1 Đặt vấn đề 2

2 Xác định nhiệm vụ mục đích và phạm vi của đề tài 2

3 Kết luận 4

CHƯƠNG 2: KIẾN THỨC CƠ BẢN 5

1 Internet 5

1.1 Khái niệm cơ bản về internet 5

1.1.1 Giới thiệu chung 5

1.1.2 Cách hoạt động của Internet 5

1.1.3 Ứng dụng của Internet 5

1.2 HTML 6

1.2.1 Khái niệm cơ bản về HTML 6

1.2.2 Cấu trúc HTML của website 6

1.2.3 Ưu và nhược điểm của HTML 6

1.2.4 Bố cục HTML 8

2 ReactJS 9

2.1 Khái niệm ReactJS 9

2.2 Hoạt động của ReactJS 11

2.3 Sử dụng localStorage và Cookie trong ReactJS 12

2.3.1 Cookie trong ReactJS 12

2.3.2 Khái niệm về LocalStorage 13

2.4 FireBase và ReactJS 14

3 Firebase 16

3.1 Khái niệm Firebase 16

3.2 Các hàm trong Firebase 17

3.2.1 Các hàm dùng để làm việc với chuỗi 17

3.2.2 Một số hàm quan trọng khác 17 Copies for internal use only in Phenikaa University

CHƯƠNG 3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 19

1 Nội dung công việc 19

2 Phân tích giao diện của trang web 20

3 Phân tích chức năng hệ thống, Usecase của hệ thống 22

3.1 Chức năng khách 22

3.2 Chức năng thành viên 23

3.3 Chức năng admin(quản trị viên) 25

4 Biểu đồ luồng hoạt động 26

5 Xây dựng cơ sở dữ liệu 38

CHƯƠNG 4 TRIỂN KHAI VÀ THỰC NGHIỆM 46

1 Giao diện hệ thống 46

2 Cài đặt, đánh giá và kiểm thử 50

2.1 Cài đặt 50

2.1.1 Môi trường triển khai 50

2.1.2 Quy trình triển khai 50

2.2 Đánh giá hiệu năng 50

2.3 Kiểm thử Website 50

2.4 Luồng 51

KẾT LUẬN 53

TÀI LIỆU THAM KHẢO 54

Copies for internal use only in Phenikaa University

DANH MỤC CÁC BẢNG

Hình 3.14: Sơ đồ bảng cơ sở dữ liệu 38

Hình 3.15: Bảng Users 39

Hình 3.16: Bảng Laptops 40

Hình 3.17: Bảng Discount 41

Hình 3.18: Bảng Wishlist 41

Hình 3.19: Bảng Cart 42

Hình 3.20: Bảng Orders 42

Hình 3.21: Bảng Confirm 43

Hình 3.22: Bảng Payment 44

Hình 3.24: Bảng Orderstatus 44

Hình 3.25: Bảng Reviews 45

Copies for internal use only in Phenikaa University

DANH MỤC CÁC HÌNH

Hình 2.1: Sơ đồ đơn giản về cách hoạt động của ReactJS 11

Hình 3.1: Các tác nhân 22

Hình 3.2: Biểu đồ Usecase hệ thống 26

Hình 3.3: Biểu đồ hoạt động đăng nhập vào hệ thống 27

Hình 3.4: Biểu đồ hoạt động đăng xuất khỏi hệ thống 28

Hình 3.5: Biểu đồ hoạt động đăng ký thành viên 29

Hình 3.6: Biểu đồ hoạt động đổi mật khẩu 30

Hình 3.7: Biểu đồ hoạt động thêm sản phẩm vào giỏ hàng 31

Hình 3.8: Biểu đồ hoạt động đặt hàng 32

Hình 3.9: Biểu đồ hoạt động lịch sử đơn hàng và theo dõi đơn hàng 33

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

Hình 3.11: Biểu đồ tuần tự chức năng đăng ký 35

Hình 3.12: Biểu đồ tuần tự chức năng thêm giỏ hàng 36

Hình 3.13: Biểu đồ tuần tự chức năng đặt hàng 37

Hình 4.1: Giao diện trang chủ 46

Hình 4.2: Giao diện đăng ký và đăng nhập 47

Hình 4.3: Giao diện giỏ hàng 47

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

Hình 4.5: Giao diện admin 48

Hình 4.6: Giao diện trang thông tin người dùng 49

Hình 4.7: Giao diện trang lịch sử đơn hàng 49

Copies for internal use only in Phenikaa University

MỞ ĐẦU

Hiện nay, với xu hướng tin học hóa, áp dụng công nghệ máy tính vào trong mọi lĩnh vực hoạt động của xã hội đương thời, với thế mạnh và tính cấp thiết của ứng dụng tin học thì việc phát triển các ứng dụng trực tuyến là một lợi thế để thương mại sản phẩm, phục vụ nhu cầu cuộc sống con người

Do vậy mà hầu hết các lĩnh vực trong xã hội hiện nay đều sử dụng internet

để quảng bá, xây dựng thương hiệu, cung cấp sản phẩm cho khách hàng Vì vậy

mà việc mua bán sản phẩm trực tuyến là vô cùng cần thiết hiện nay

Website bán sản phẩm trực tuyến là một hình thức bán sách linh hoạt, tiện dụng cho người sử dụng Với website bán laptop và phần mềm thì việc tìm kiếm, mua laptop, phần mềm đáp ứng nhu cầu học tập và giải trí của mọi người trở nên

dễ dàng hơn Bên cạnh đó việc mua bán, đặt hàng trên mạng giúp tiết kiệm thời gian, tiền bạc hơn cho khách hàng, đáp ứng được mọi yêu cầu mà khách hàng đặt

ra

Trong quá trình thực hiện đồ án em đã nhận được sự trợ giúp của các thầy,

cô giảng viên trong nhà trường Đặc biệt, em xin gửi lời chân thành cảm ơn đến

ThS Vũ Quang Dũng đã hướng dẫn tận tình em trong quá trình hoàn thành đồ án

tốt nghiệp Em cũng xin gửi lời cảm ơn trân thành đến tất cả các thầy, cô giáo trong

khoa Công nghệ thông tin - trường Đại học Phenikaa đã giảng dạy em suốt thời

gian qua

Tuy nhiên, do thời gian hạn hẹp, dù đã nỗ lực hết mình nhưng chắc chắn rằng đồ án sẽ có nhiều sai sót Em mong sẽ có được sự thông cảm, đóng góp từ các thầy cô giảng viên và các bạn

Hà Nội, ngày … tháng … năm 20… Copies for internal use only in Phenikaa University

CHƯƠNG 1: MỞ ĐẦU

1 Đặt vấn đề

Ngày nay, việc mua bán đồ điện tử trực tuyến không chỉ đơn thuần là một

xu hướng mà còn trở thành một nhu cầu thiết yếu của người tiêu dùng Tuy nhiên, để thành công trong lĩnh vực này, các trang web bán hàng cần phải cung cấp trải nghiệm người dùng xuất sắc, đảm bảo tính bảo mật và tin cậy, và kết nối liên tục với các nhà cung cấp sản phẩm

Điều quan trọng là không chỉ đáp ứng nhu cầu mua sắm, mà còn tạo ra một môi trường trực tuyến an toàn và thuận tiện cho người dùng Ngoài ra, website cũng cần được tối ưu hóa cho các thiết bị di động, vì ngày nay nhiều người dùng thường truy cập internet từ điện thoại di động

Với các thách thức và cơ hội đặt ra, việc thiết kế và xây dựng một website bán đồ điện tử trực tuyến đòi hỏi sự kỹ lưỡng và kiên nhẫn Nó bao gồm không chỉ việc tạo ra giao diện hấp dẫn mà còn cần phải quản lý và cập nhật liên tục

cơ sở dữ liệu sản phẩm, quản lý đơn hàng, và đảm bảo an ninh thông tin

2 Xác định nhiệm vụ mục đích và phạm vi của đề tài

- Nhiệm vụ:

+ Nghiên cứu và phân tích thị trường bán đồ điện tử trực tuyến để hiểu

rõ nhu cầu và xu hướng của người tiêu dùng

+ Thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UX) tối ưu, hướng đến sự thuận tiện và thân thiện với người dùng + Xây dựng cơ sở dữ liệu để quản lý các sản phẩm, thông tin người dùng, đơn hàng và các thành phần khác của trang web

+ Phát triển các chức năng chính bao gồm đăng nhập, tìm kiếm, xem chi tiết sản phẩm, thêm vào giỏ hàng, thanh toán và quản lý đơn hàng

Copies for internal use only in Phenikaa University

+ Phát triển giao diện quản trị viên cho việc quản lý sản phẩm, quản lý đơn hàng và xem thống kê

- Mục đích:

+ Đáp ứng nhu cầu mua bán ngày càng phát triển của xã hội, xây dựng lên một môi trường làm việc hiệu quả

+ Thúc đẩy phát triển buôn bán trực tuyến

+ Rút ngắn khoảng cách giữa người mua và người bán, tạo ra một Website trực tuyến có thể đưa nhanh thông tin cũng như việc trao đổi mua bán các loại sản phẩm qua mạng

+ Việc quản lý hàng trở nên dễ dàng

+ Sản phẩm được sắp xếp có hệ thống nên người dùng dễ tìm kiếm sản phẩm

+ Do nghiệp vụ của cửa hàng kết hợp với công nghệ mới và được xử

lý trên hệ thống máy tính nên công việc liên lạc nơi khách hàng cũng như việc xử lý hóa đơn thực hiện một cách nhanh chóng và chính xác Rút ngắn được thời gian làm việc, cũng như đưa thông tin về các sản phẩm mới nhanh chóng đến cho khách hàng

Copies for internal use only in Phenikaa University

3 Kết luận

Trong một thời đại công nghệ ngày nay, việc thiết kế và xây dựng một trang web bán đồ điện tử trực tuyến không chỉ đơn thuần là một ứng dụng công nghệ

mà còn là một yếu tố thúc đẩy thị trường kinh doanh trực tuyến Đề tài này đặt

ra mục tiêu phát triển một nền tảng mua sắm điện tử an toàn, thuận tiện và hấp dẫn, giúp người dùng có trải nghiệm mua sắm tốt hơn

Cấu trúc đồ án bao gồm 4 chương:

Chương 3: Phân tích và thiết kế hệ thống

• Nội dung công việc

• Phân tích giao diện của trang web

• Phân tích chức năng hệ thống

• Biểu dồ luồng hoạt động

• Xây dựng cơ sở dữ liệu

Chương 4: Triển khai và thực nghiệm

• Giao diện hệ thống

• Cài đặt, đánh giá và kiểm thử

Kết luận

Tài liệu tham khảo

Copies for internal use only in Phenikaa University

CHƯƠNG 2: KIẾN THỨC CƠ BẢN

1 Internet

1.1 Khái niệm cơ bản về internet

1.1.1 Giới thiệu chung

Internet là gì? Internet là một mạng lưới toàn cầu kết nối hàng tỷ máy

tính và máy chủ khác nhau trên khắp thế giới [1] Nó cho phép trao đổi

thông tin và giao tiếp giữa người dùng ở mọi nơi Đây là một hệ thống rộng lớn, cho phép thực hiện nhiều hoạt động trực tuyến như duyệt web, gửi nhận email, xem video trực tuyến, chơi trò chơi trực tuyến và nhiều hoạt động khác

1.1.2 Cách hoạt động của Internet

Internet hoạt động như thế nào? Câu trả lời chính xác khá phức tạp và

sẽ mất một thời gian trễ của bạn để giải thích Thay vào đó, hãy xem xét một số điều quan trọng mà bạn nên biết

Điều quan trọng là phải nhận ra rằng Internet là một mạng lưới cáp vật

lý toàn cầu Khi bạn truy cập một trang web, máy tính của bạn sẽ gửi một yêu cầu tới một máy chủ Máy chủ là nơi lưu trữ các trang web và nó hoạt động giống như ổ cứng máy tính của bạn Khi yêu cầu đến, máy chủ sẽ truy xuất trang web và gửi dữ liệu chính xác trở lại máy tính của bạn Thao tác truy vấn này, tất cả được thực hiện chỉ trong vài giây!

Bạn có thể tìm hiểu thêm video về cách thức hoạt động tại [6]

1.1.3 Ứng dụng của Internet

Bạn có thể: Duyệt web, Email và gửi tin nhắn, Mạng xã hội, Mua sắm trực tuyến, Ngân hàng trực tuyến, Chơi trò chơi trực tuyến, Xem phim, nghe nhạc và đọc sách, Dự đoán thời tiết, Tìm kiếm việc làm, Học trực tuyến, Trò chuyện và gọi video, Tìm kiếm thông tin y tế, Sáng tạo nội dung, Tham gia vào diễn đàn và cộng đồng trực tuyến

Copies for internal use only in Phenikaa University

Và một trong những tính năng tốt nhất của Internet là Email và gửi tin nhắn khi ta có khả năng giao tiếp gần như ngay lập tức với bất kỳ ai trên thế giới

1.2 HTML

1.2.1 Khái niệm cơ bản về HTML

HTML (Hypertext Markup Language) là một ngôn ngữ đánh dấu được

sử dụng để tạo ra các trang web Nó được sử dụng để định dạng và cấu trúc hóa nội dung trên trang web bằng cách sử dụng các thẻ (tags) đặc biệt

1.2.2 Cấu trúc HTML của website

Một Website thường chứa nhiều trang con và mỗi trang con này lại có một tập tin HTML riêng Điều này có nghĩa là nó không thể thực hiện các chức năng “động” HTML chỉ có tác dụng bố cục và định dạng trang web

và khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắc cho thế giới mạng

1.2.3 Ưu và nhược điểm của HTML

- Ưu điểm

● Đơn giản và dễ học: HTML là ngôn ngữ đánh dấu cơ bản, rất dễ học

và sử dụng Điều này làm cho nó trở thành một công cụ lý tưởng cho người mới bắt đầu trong việc phát triển web

● Hỗ Trợ Toàn Diện: Mọi trình duyệt web hiện đại đều hỗ trợ HTML

Do đó, các trang web được viết bằng HTML có thể được hiển thị chính xác trên nhiều nền tảng và trình duyệt khác nhau

● Tích Hợp Dễ Dàng: HTML dễ kết hợp với các ngôn ngữ và công nghệ khác như CSS để kiểm soát kiểu dáng và JavaScript để thêm tính năng động

● Hỗ Trợ Đa Phương Tiện: HTML cho phép nhúng nhiều định dạng phương tiện khác nhau như hình ảnh, video, âm thanh, và nhiều loại tệp tin đa phương tiện khác

- Nhược điểm

Copies for internal use only in Phenikaa University

● Hạn Chế Trong Việc Tạo Giao Diện Phức Tạp: HTML tập trung vào cấu trúc nội dung và không cung cấp nhiều tính năng kiểu dáng phức tạp Điều này đòi hỏi sự hỗ trợ của CSS để tạo ra giao diện đẹp mắt

và phức tạp

● Không Hỗ Trợ Tính Năng Động Tích Hợp Sẵn: HTML không có khả năng tương tác hoặc cập nhật dữ liệu mà cần sự hỗ trợ của JavaScript Điều này đặc biệt quan trọng đối với các ứng dụng web đòi hỏi tính năng động

● Có Thể Dễ Dàng Bị Sửa Đổi: Vì HTML là ngôn ngữ văn bản mở, ai cũng có thể xem mã nguồn và thay đổi nó

Copies for internal use only in Phenikaa University

1.2.4 Bố cục HTML

Bên dưới là ví dụ bốc cục HTML của một trang web:

Trong đó:

● <!DOCTYPE html> xác định phiên bản HTML

● <html> bao quanh toàn bộ trang

● Phần <head> chứa thông tin meta, tiêu đề trang, và liên kết đến các tệp CSS

● Phần <body> chứa nội dung thực tế của trang

● Phần <header> chứa tiêu đề và thanh điều hướng

● Phần <main> chứa nội dung chính

● Phần <footer> chứa thông tin chân trang

Copies for internal use only in Phenikaa University

2 ReactJS

2.1 Khái niệm ReactJS

ReactJS là một thư viện JavaScript phát triển bởi Facebook, được sử dụng

để xây dựng giao diện người dùng (UI) cho các ứng dụng web đơn trang (Single Page Applications hoặc SPAs) Nó được thiết kế để tạo ra các giao

diện người dùng tương tác động, dễ duy trì và mở rộng [2] [4]

Dưới đây là một số khái niệm cơ bản về ReactJS:

● Components (Thành phần): ReactJS xây dựng giao diện người dùng bằng cách sử dụng các thành phần Mỗi thành phần đại diện cho một phần của giao diện người dùng, như một nút, một form, hoặc thậm chí một trang web đơn Các thành phần có thể nhúng vào các thành phần khác để xây dựng cấu trúc phức tạp hơn

● JSX (JavaScript XML): JSX là một phần mở rộng của JavaScript cho phép viết mã HTML trong JavaScript Nó giúp React tạo và quản lý các thành phần một cách dễ dàng

● Virtual DOM (DOM Ảo): React sử dụng một cơ chế gọi là Virtual DOM để cải thiện hiệu suất Thay vì cập nhật DOM trực tiếp, React tạo ra một bản sao ảo của DOM, so sánh nó với phiên bản cũ và chỉ cập nhật những phần thay đổi Điều này giúp giảm tải cho trình duyệt

và cải thiện tốc độ

● State (Trạng thái): Trạng thái trong React là dữ liệu có thể thay đổi theo thời gian Mỗi thành phần có thể có trạng thái riêng của nó và khi trạng thái thay đổi, React sẽ cập nhật giao diện người dùng tương ứng

● Props (Thuộc tính): Props là các tham số đầu vào mà một thành phần nhận từ các thành phần cha của nó Props giúp truyền dữ liệu từ thành phần cha xuống thành phần con

● Unidirectional Data Flow (Luồng dữ liệu một chiều): React theo mô hình luồng dữ liệu một chiều, điều này có nghĩa rằng dữ liệu chỉ di Copies for internal use only in Phenikaa University

chuyển từ thành phần cha xuống thành phần con và không ngược lại Điều này làm cho quy trình quản lý trạng thấy dễ hiểu hơn

● Lifecycle Methods (Phương thức vòng đời): React cung cấp các phương thức vòng đời cho phép bạn thực hiện hành động cụ thể tại các điểm thời gian cụ thể trong quá trình vòng đời của một thành phần Đây là ví dụ về cách viết ReactJS

Copies for internal use only in Phenikaa University

2.2 Hoạt động của ReactJS

Hình 2.1: Sơ đồ đơn giản về cách hoạt động của ReactJS [7]

Cách một ứng dụng ReactJS hoạt động đơn giản gồm 5 bước:

Bước 1: Khởi tạo Component: React bắt đầu bằng việc khởi tạo các thành phần và thiết lập trạng thái ban đầu

Bước 2: Render Component: React gọi phương thức render() của từng thành phần để tạo ra một cây thành phần

Bước 3: Tạo Virtual DOM: React sử dụng thông tin từ phương thức render()

để tạo ra một Virtual DOM, là một bản sao ảo của DOM

Bước 4: So sánh Virtual DOM và DOM thật: React so sánh Virtual DOM với DOM thật để xác định những thay đổi cần được áp dụng

Bước 5: Cập nhật DOM: Dựa trên kết quả so sánh, React cập nhật DOM thật chỉ với những phần cần thay đổi, giúp tối ưu hóa hiệu suất

Copies for internal use only in Phenikaa University

2.3 Sử dụng localStorage và Cookie trong ReactJS

2.3.1 Cookie trong ReactJS

Cookie là mẫu tin nhỏ được lưu ở máy người dùng(cụ thể là tại Browser trình duyệt), Cookie sử dụng với mục đích để theo dõi, lưu lại hoạt động truy cập Ví dụ nhớ tên người dùng truy cập vào website có thể hoạt động qua các bước sau:

● Server gửi các cookie cho browser(Ví dụ tên người dùng: username)

● Browser lưu lại thông tin này (cookie)

● Lần sau truy cập URL cùng domain(tên miền) browser sẽ gửi ngược các Cookie này lên Server và Server nhận được Cookie, từ đó xác định được thông tin như (username) …

Nên nhớ Cookie được lưu lại ở Browser, sau đó mỗi lần gửi yêu cầu đến Server nó sẽ tự động gửi thông tin này đến Server

- Thiết lập, lưu Cookie

Từ ReactJS có thể thiết lập Cookie bằng thư viện

Để yêu cầu trình duyệt xóa Cookie bạn sử dụng hàm removeCookie Ví dụ:

2.3.2 Khái niệm về LocalStorage

Sử dụng tương tự Cookie nhưng có những điểm khác sau:

● Cách Lưu Trữ Dữ Liệu

● Thời gian tồn tại

● Dung lượng lưu trữ

● Quyền truy cập

- Chạy localStorage- Lưu trữ và lấy thông tin

Lưu trữ thông tin

2.4 FireBase và ReactJS

Firebase là một nền tảng phát triển ứng dụng di động và web cung cấp một loạt các dịch vụ và công cụ cho việc phát triển ứng dụng Firebase giúp bạn xây dựng và triển khai ứng dụng nhanh chóng mà không cần quá nhiều kiến thức về việc quản lý máy chủ và cơ sở dữ liệu

ReactJS, mặt khác, là một thư viện JavaScript phổ biến được sử dụng để xây dựng giao diện người dùng (UI) cho ứng dụng web Nó giúp bạn tạo ra các thành phần tương tác và linh hoạt cho trang web của mình

Khi kết hợp Firebase với ReactJS, bạn có thể tận dụng các tính năng mạnh

mẽ của cả hai để phát triển ứng dụng web đáng tin cậy, linh hoạt và tương tác Dưới đây là một số cách bạn có thể sử dụng Firebase và ReactJS cùng nhau:

● Xác thực Người Dùng

● Lưu trữ dữ liệu

● Phân tích và theo dõi

● Hosting và triển khai

● Authentication Hook trong React

Để kết nối tới Firebase từ ReactJS ta cần 4 bước cơ bản

Bước 1: Cài đặt Firebase

Bước 2: Kết nối FireBase với ứng dụng React

Copies for internal use only in Phenikaa University

Bước 3: Truy vấn dữ liệu từ cơ sở dữ liệu Firebase

Bước 4: Lưu trữ và cập nhật dữ liệu

Copies for internal use only in Phenikaa University

3 Firebase

3.1 Khái niệm Firebase

Firebase là một nền tảng phát triển ứng dụng di động và web được cung cấp bởi Google Nó cung cấp một loạt các dịch vụ và công cụ giúp nhà phát triển xây dựng và triển khai ứng dụng nhanh chóng mà không cần quá nhiều kiến thức về việc quản lý máy chủ và cơ sở dữ liệu

Các tính năng chính của Firebase bao gồm: [5]

● Authentication (Xác thực): Firebase cung cấp các phương pháp xác

thực người dùng như đăng nhập bằng email/password, đăng nhập bằng

Google, Facebook, và nhiều tùy chọn khác [3]

● Realtime Database: Cung cấp một cơ sở dữ liệu thời gian thực cho

ứng dụng, cho phép đồng bộ và cập nhật dữ liệu trực tiếp trong thời

gian thực [3]

● Firestore: Một cơ sở dữ liệu linh hoạt hơn Firebase Realtime

Database, cung cấp các tùy chọn truy vấn mạnh mẽ và tăng cường hiệu

● Authentication: Firebase cung cấp các công cụ giúp theo dõi, phân

tích và cải thiện sự tương tác của người dùng với ứng dụng của bạn

[3]

● Cloud Messaging: Cho phép gửi thông báo đẩy đến người dùng trên các thiết bị di động [3]

● Machine Learning (ML Kit): Firebase cung cấp các API Machine

Learning cho việc nhận diện khuôn mặt, văn bản, dịch ngôn ngữ, v.v Copies for internal use only in Phenikaa University

Firebase giúp giảm bớt công đoạn phát triển hạ tầng và tập trung vào việc xây dựng các tính năng chính của ứng dụng Điều này làm cho việc phát triển ứng dụng nhanh chóng và tiết kiệm thời gian

3.2 Các hàm trong Firebase

3.2.1 Các hàm dùng để làm việc với chuỗi

toUpperCase() Chuyển đổi chuỗi thành chữ in hoa

toLowerCase() Chuyển đổi chuỗi thành chữ thường

startsWith(prefix) Kiểm tra xem chuỗi có bắt đầu bằng tiền tố

được chỉ định hay không

endsWith(suffix) Kiểm tra xem chuỗi có kết thúc bằng hậu tố

được chỉ định hay không includes(substring) Kiểm tra xem chuỗi có chứa một chuỗi con cụ

● signInWithPopup(provider): Đăng nhập bằng cửa sổ popup sử

dụng một nhà cung cấp xác thực như Google, Facebook, Twitter, vv

● signInWithRedirect(provider): Đăng nhập và chuyển hướng trang

đến trang xác thực của nhà cung cấp

● onAuthStateChanged(callback): Theo dõi trạng thái xác thực và

gọi lại khi trạng thái thay đổi

- Firebase Realtime Database:

● push(data): Thêm một mục mới vào cơ sở dữ liệu và trả về định

danh (key) của mục đó

● update(updates): Cập nhật dữ liệu trong đường dẫn đã chỉ định

● remove(): Xóa dữ liệu từ đường dẫn đã chỉ định

- Firebase Firestore:

● add(data): Thêm một tài liệu mới vào bộ sưu tập và trả về một định

danh (ID) duy nhất cho tài liệu đó

● update(data): Cập nhật dữ liệu trong tài liệu đã chỉ định

● delete(): Xóa tài liệu

- Storage (Lưu Trữ):

● put(file): Đăng tải một tệp tin lên lưu trữ

● getDownloadURL(): Lấy địa chỉ URL cho một tệp tin trong lưu trữ

- Firebase Cloud Messaging (FCM):

● messaging().getToken(): Lấy mã thông báo đăng ký thiết bị (Device

Registration Token)

● messaging().onMessage(callback): Lắng nghe và xử lý các thông

báo được gửi đến thiết bị

- Firebase Remote Config: fetchAndActivate(): Lấy cấu hình từ xa và

kích hoạt nó

- Firebase Analytics: logEvent(eventName, eventParams): Ghi lại sự

kiện cho mục tiêu phân tích

Copies for internal use only in Phenikaa University

CHƯƠNG 3 PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

1 Nội dung công việc

- Là một Website chuyên bán các sản phẩm về đồ điện tử (cụ thể là laptop)

- Người dùng truy cập vào Website có thể xem, tìm kiếm, mua các sản phẩm hoặc đặt hàng sản phẩm

- Các sản phẩm được sắp xếp hợp lý Vì vậy người dùng sẽ có cái nhìn tổng quan về tất cả các sản phẩm hiện có

- Người dùng có thể xem chi tiết từng sản phẩm (Có hình ảnh minh họa sản phẩm)

- Khi đã chọn được món hàng vừa ý thì người dùng click vào nút cho vào giỏ hàng hoặc ấn vào nút mua hàng để sản phẩm được cập nhật trong giỏ hàng

- Người dùng vẫn có thể quay trở lại trang sản phẩm để xem và chọn tiếp, các sản phẩm đã chọn được lưu vào trong giỏ hàng

- Khách hàng cũng có thể bỏ đi những sản phẩm không vừa ý đã có trong giỏ hàng

- Nếu đã quyết định mua hàng các sản phẩm trong giỏ hàng thì người dùng click vào mục thanh toán để hoàn tất việc mua hàng hoặc cũng có thể hủy mua hàng

- Đơn giá của các món hàng sẽ có trong giỏ hàng

- Người dùng sẽ chọn các hình thức vận chuyển, thanh toán hàng do hệ thống

đã định

- Đánh giá và nhận xét: Người dùng có thể đánh giá và viết nhận xét về các sản phẩm đã mua từ website Các đánh giá này cung cấp thông tin quan trọng cho người dùng khác khi đưa ra quyết định mua hàng

Copies for internal use only in Phenikaa University

■ Email

■ Mật khẩu

○ Các thông tin của khách hàng được bảo mật

○ Hệ thống quản trị tuyệt đối an toàn, không thể bị truy cập do lỗi của

hệ thống

➢ Về hệ thống: Trang web làm việc trong trình duyệt trên mạng Vì thế, nó hoạt động được với tất cả các hệ thống vận hành

➢ Lựa chọn giải pháp nhu cầu

○ Chương trình sử dụng ReactJS và Firebase

○ Các công cụ mà sản phẩm sử dụng:

■ Visual Studio Code: Trình soạn thảo văn bản viết mã nguồn cho lập trình viên

■ Firebase: Dùng để lưu cơ sở dữ liệu và deploy

■ GitHub: Dùng để quản lý mã nguồn, theo dõi thay đổi

■ Trình điều khiển phiên bản: npm để quản lý và cài đặt các thư viện, framework cần thiết

2 Phân tích giao diện của trang web

- Giao diện User(Người dùng)

● Phải có một giao diện thân thiện dễ sử dụng

● Phải nêu bật được thế mạnh của website, cũng như tạo được niềm tin cho khách hàng ngay từ lần viếng thăm đầu tiên

Copies for internal use only in Phenikaa University

● Màu sắc ổn định làm nổi bật trọng tâm, hình ảnh sản phẩm rõ ràng, font chữ dễ nhìn, tiện lợi khi sử dụng chỉ với 1 cú click chuột

● Giới thiệu được sản phẩm của cửa hàng đang có

● Có mục đăng ký thành viên

● Có danh mục sản phẩm

● Chức năng đặt hàng, mua hàng

● Chức năng tìm kiếm sản phẩm

● Mỗi loại sản phẩm có trang xem chi tiết sản phẩm

● Có biểu mẫu thông tin liên hệ

● Mục đăng nhập của khách hàng khi đã trở thành viên gồm có: Địa

chỉ email (Email) và mật khẩu (Password)

● Giới thiệu những thông tin về shop: Địa chỉ liên hệ của shop hoặc các đại lý trực thuộc(nếu có), các số điện thoại liên hệ, email liên hệ

- Giao diện Admin(Quản trị viên)

● Quản lý sản phẩm

● Quản lý hóa đơn

● Quản lý tài khoản khách hàng

● Quản lý đăng nhập

● Quản lý mọi thay đổi website

● Giao diện đơn giản, dễ quản lý dữ liệu

● Được bảo vệ bằng Email & Password riêng của Admin

Copies for internal use only in Phenikaa University