thiết kế và xây dựng web quyên góp và ủng hộ cộng đồng bằng reactjs

Luồng dữ liệu một chiềuHình 2.2: Luồng dữ liệu một chiều ReactJS không có các mô-đun chuyên dụng đê xừ lý dữ liệu, vì vậy ReactJS chia nhòchế độxemthành các thànhphần nhò có mồi hệ thống

Bộ GIÁO DỤC VÀ ĐÀOTẠO

NGUYEN TAT THANH

: CÔNGNGHỆ THÔNG TIN : KỸTHUẬT PHÀN MÈM

Bộ GIÁO DỤC VÀ ĐÀOTẠO

NGUYEN TAT THANH

: CÔNGNGHỆ THÔNG TIN: KỸ THUẬT PHÀN MÈM

Tp.HCM, tháng 09 năm 2023

LỜI CẢM ƠN

Tôi chân thành cám ơn Thầy hướng dần Ths.PhạmVăn Đãng, người đã hướng dẫn tận

tinh, đóng góp các ý kiến chuyên môn của klióa luận Thầy đã động viên tinli thần tôi cố

gang hoàn thành những nghiên cứu đặt ra Thầy cũng cung cấp một số tài liệu liên quan

đen klióa luận mà tôi đang nghiêncứu và ân cần nhắc nhờ tôi đến tiến độ thực hiện khóaluận này

Tôi cũng chân thành gửi lời cảm ơn đếncác ThayCô khoa Công nghệ thông tin trường

ĐạihọcNguyễnTất Thành đã giăng dạy, hướng dần, trang bị các kiến thức cho tôi trong 4 năm học vừa qua, từcác kiếnthức cơ bản đến các vấn đe chuyên sâu

Tôi xin gửi lời cảmơnden anil, chị, bạnbè,đong nghiệp bằngnhiều hình thức kliác nhauđã giúpđờ tôi trong quátrìnhhọc tập tại tnrờng cũng nhưtrong thời gian hoàn thành khóa luận

Đặc biệt xin gửi lời cảmơn đến chamẹ và anh chị em trong gia đình đã động viên tinh

thần cũng như chia sẻ những khó khăn trong những năm qua Tôi xin chân thànhcăm ơn!!!!Tôi XÙI trân trọng cảm ơn!

Sinh viên thực hiện

Phan Đại Dương

LỜI MỞ ĐÀU

Việc chọn đề tài “Thiết kế và xây dựng Website quyên góp và ủng hộ cộng đồng bang ReactJS” này có thê được thựchiệnvới nhiều lý do khác nhau, tùy thuộc vào mục

tiêu vàlợi íchphục VỊI cộng đồng:

Thị trường cầnthiết: Nhu cầu về thông tín luôn tồn tại trongmọi lĩnh vực Dựatrên sự

phát triên của Internet và sự phô biến của thiết bị di động, người dùng ngàycàng có thêm

lựa chọnđê tniy cập thông tin Tạo một Website này có thê đápứng nhu cầu này

Pháttriên kỹ năng: Xây dựng một Website đòi hòi bạn phải học vàphát triên nhiều kỹ

năng khác nhau, bao gồmthiếtkếweb, lập trình, quàn lý nộidung, SEO, và quàng cáo trựctuyến Việc này có thê giúp bạn phát triênnhiều kỹ năng quan trọng trong thời đại số hóa

Tạo nội dung giá trị: Website này có thê giúp bạn thê hiệnkiến thứcvà quan diêm của

mình về các sự kiện và chủ đềquan trọng Bạn có thê tạo nội dung giúp người đọc hiêu rõ

hơn về thế giớixung quanh và thúc đây thảo luận xãhội

Tiềmnăngkiếmtiền: Neu bạn có một lượng lớn lượt truy cập, bạncó thê cân nhắc kiếm

tiền n'r Website thông qua quảng cáo, chương trình liên kết, hoặc thuê viết bài quảng cáo Điềunày có thê biếnđề tàinày thành một nguồn thu nhập thụ động

Gan kết cộngđồng: Một Website có thê giúp bạn xây dựng cộng đồng trực tuyến quantâm đến các chủ đề cụ thê Điều này cóthê tạo ra cơ hộiđê giao tiếp vàhợp tác với nlữrng người có cùng sờthích và quan diêm

Đóng góp vảo ỉĩnh vực bạn quan tâm: Neu bạn cóniềm dam mê về một chủ đề cụ thê,

việc tạo ra một Website có thê giúpbạn đóng góp vào lĩnhvực này vàchiasẻ thông tin Hữu

ích với mọi người

NHẬN XÉTCỦA GIẢNG VIÊN HƯỚNGDẦN

1 Hình thức (Bố cục, trình bày, lỗi, các mục,hình, bảng, công thức, phụ lục,)

2 Nội dung (mụctiêu, phương pháp, kết quả, sao chép, các chtrơng, tài liệu, )

3 Kết luận

Tp.HCM, Ngày thảng năm2023

Giảng Aden hướng dẫn

(Ký tên,ghi rõhọ tên)

NHẬN XÉT CỦA GIẢNGVIÊN PHẢNBIỆN

1 Hình thức (Bố cục, trìnhbày, lôi, các mục, hình, bảng, côngthức, phụ lục,)

2 Nội dung (mục tiêu, phươngpháp, kết quả, sao chép, các chương, tài liệu, )

3 Kết luận

Tp.HCM, Ngày tháng năm2023

Giảng viên hướng dẫn

(Ký tên, ghi rõhọ tên)

CHƯƠNG 1: TỔNG QUAN ĐÈ TÀI 1

1.1 Lý do chọn đề tài 1

1.2 Mục tiêucủa đề tài 2

1.3.Đối tượng nghiêncứu 2

1.4.Phạmvi đề tài 2

1.5 Cấu trác của đề tài 2

CHƯƠNG 2: Cơ SỜLÝ THUYÉT 3

2.1 Giới thiệu về JSX 3

2.2 Luồng dữliệu một chiều 4

2.3 DOM ảo 4

2.4 Tại sao ReactJs lại lại sự chọn lựa hàng đầucho doanh nghiệp 5

2.4.1 Tương lai cùa Reactls 6

2.4.2 Quytrình phát triển phần mềm 6

2.5 Phương pháp phântích thiết kế hướng đốitượng 7

2.5.1 Kliái niệm về Phân tích và thiết kếhướng đối tượng (ObjectOriented Analysisand Design: OOAD) 7

2.5.2 Giới thiệuvềUML (Unified Modeling Language) 7

2.5.3 Tại sao lại là OOAD và UML? 8

2.6.4 Các phiên bản cùa MySQL: 13

2.7 Giới thiệu tôngquan vềReactJS 13

2.8 Giới thiệu tôngquan ve NodeJS 15

2.9.Tìmhiểu React Hook 18

2.10 Tìm hiểu Local store 18

2.11 Tim hiểu React-Bootstrap 19

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

3.1 Phântíchvà đặc tà yêu cầu 23

3.2 Sơđồ use-case tổng quát 24

3.3 Sơđồ hoạt động 28

CHƯƠNG 4: THựC NGHIỆM VÀ TRIỂN KHAI 31

4.1 Giới thiệu hệ thống 31

4.2 Trang chù 31

4.3 Trang bài viết 33

4.10 Trang Admin QuảnLý User 42

4.11 Trang Admhi sửaUser 43

4.12 Trang thêmUser 44

4.13 Trang Lịch Sử Admin 46

4.14 Trang Dữ Liệu MySQL 47

4.15 Trang Gửi Mail hỗtrợ 49

KÉT LUẬN 54

Ketquà đạt đirợc 54

Các chức năng cùa Website gồm có: 54

PHỤ LỤC 55

DANHMỤC BẢNG, HÌNH

Bảng 3.1: Use Case Đãng nhập 25

Băng 3.2: Use CaseĐăng Ký 26

Bảng 3.3: Use Case Xemthông tin bàiviết 26

Bãng 3.4: Use Case Xem lịch sừ Donate 27

Bảng 3.5: Use Case Donate 28

Băng4.1: Băng mô tã chi tiết Trang chù 32

Bảng4.2: Bảng mô tả Trangbài viết 34

Băng4.3: Bâng mô tả lịch sữ donate 35

Bảng4.4: Bảng mô tả chi tiết Trang Login 35

Bảng4.5: Bàng mô tả Trang lỗi Login 36

Bàng4.6: Băng mô tà trang Logic Success 37

Băng4.7: Băng mô tã Trang Donate 38

Bảng4.8: Bảng mô tả FormDonate 39

Bảng4.9: Bảng mô tả Trang Thanh toán thành công 40

Bảng4.10: Bảng mô tả Trang lịch sử Donate sau khi thanh toán 40

Bảng4.11: Bảng mô tả Trang đăng ký 41

Băng4.12: Bàng mô tà Trang chùtrangAdmin 42

Băng4.13: Bảng mô tả Trang Admin quăn lý User 42

Bảng 4.14: Bảng mô tà TrangAdmin Sữatàikhoản User 43

Bảng4.15: Bảng mô tả Trang sau khi Admin sữa tàikhoản User 44

Băng4.16: Bâng mô tâ trang Admin thêm tàikhoản User 44

Bảng4.17: Bàng mô tả Trang nhập thôngtin khi Admin thêm tài khoảnUser 45

Băng4.18: Bàng mô tả Trang nhập thông tin khi Adminthêm tàikhoàn User 46

Bảng4.19: Bảng mô tả Trang lịchsử Admin 46

Bảng4.20: Bảng mô tà Trang dĩrliệu MySQL 47

Bảng4.21: Bảng mô tả Trang Dữ Liệu MySQL 48

Băng4.22: Bâng mô tâ Trang Dữ Liệu MySQL 49

DANHMỤC HÌNH

Hình 2.1: JSX 3

Hình 2.2: Luồng dữ liệu một chiều 4

Hình 2.3: Dom ảo 4

Hình 2.4: Hình minh họa ReactJS 5

Hình 2.5: Các View trong OOAD sử dụng UML 9

Hình 2.6:Các băn vẽ trongOOAD sử dụng ƯML 10

Hình 2.7: Kí hiệu về Use Case 11

Hình4.5: Trang bài viết 33

Hình 4.6: Trang bài viết 33

Hình4.7: Trang bài viết 34

Hình 4.8: Lịch sử Donate 34

Hình 4.9: Trang Login 35

Hình 4.10: Trang lỗi Login 36

Hình 4.11: Trang Logic Success 37

Hình 4.12: Trang Donate 38

Hình 4.13: Form Donate 39

Hình 4.14: TrangThanh Toán Thành Công 39

Hình 4.15: Trang lịch sửDonate sau khi thanhtoán 40

Hình 4.16: Trang đăng ký 41

Hình 4.17: Trang chủ trang Admin 41

Hình 4.18: TrangAdmin Quàn Lý User 42

Hình 4.19: TrangAdmin Sửa TàiKhoản User 43

Hình 4.20: Trang sau khi Admin Sừa Tài Khoản User 43

Hình 4.21: TrangAdmin Thêm Tài Khoản User 44

Hình 4.22: Trangnhập thông tmkhi Admin Thêm Tài KhoảnUser 45

Hình 4.23: Trang nhập thông tin khi Admin Thêm Tài KlioảnUser 45

Hình 4.24: Trang Lịch Sừ Admin 46

Hình 4.25: TrangDữ Liệu MySQL 47

Hình 4.26: Trang Dữ Liệu MySQL 48

Hình 4.27: Tranggửi mail hỗ trợ 49

Hình 4.28: TrangDữ Liệu MySQL 50

Hình 4.29: Trang Donate 51

Hình 4.30: Trang Donate 52

Hình 4.31: Trang Thanh Toán Thành Công 53

Danh Mục TừViết Tắt

STTừ viết tắtCụm từ tiếng anhDiễn giải

2 OOAD ObjectOriented Analysis

CHƯƠNG 1:TỎNG QUAN ĐÈ TÀI

1.1 Lý do chọn đề tài

Việc chọn đe tài “Thiết kế và xây dựng Website quyên góp và ủng hộ cộng đồng bang ReactJS” này có thê được thựchiệnvới nliiều lý do khác nhau, tùy thuộc vào mục

tiêu và lợi íchphục vụ cộng đồng:

Thị trườngcần thiết: Nhu cầu về thông tin luôn tồn tại trong mọi lĩnh vực Dựatrên sự

phát triên của Internet và sự phô biến của thiết bị di động, người dùng ngày càng cỏ thêm

lựa chọnđê truy cập thông tin Tạo một Websitenày có thê đápứng nhu cầu này

Pháttriên kỹ năng: Xây dựng một Website đòi hòi bạn phải học vàphát triên nhiều kỹ

năng khác nhau, bao gồmthiếtkế web, lập trình, quànlý nộidung, SEO, và quảng cáo trực

tuyến Việc này có thê giúp bạn phát triênnhiều kỹ năng quan trọng trong thờiđại số hóa

Tạo nội dung giá trị: Website này có thê giúp bạn thê hiệnkiếnthứcvà quan diêm của mình về các sự kiện và chũ đềquan trọng Bạn có thê tạo nội dung giúp người đọc hiểurõ hơn về thế giới xung quanli và thúc đây thảo luận xãhội

Tiềmnăngkiếmtiền: Neu bạncó một lượng lớnlượt truy cập, bạncó thê cân nhắc kiếmtiền ừr Website thông qua quãng cáo, chươngtrình liên kết, hoặc thuê viết bài quàng cáo

Điều này có thê biến đề tàinày thành mộtnguồn thunhập thụ động

Gan kết cộngđồng: Một Website có thê giúp bạn xây dựng cộng đồng trực tuyến quan

tâm đến các chú đề cụ thê Điều này có thê tạo ra cơ hộiđê giao tiếp và hợp tác vớinhững người có cùng sờ thích và quan diêm

Đóng góp vào lĩnh vực bạn quan tâm: Neu bạn cóniềm dam mê về một chủ đề cụ thê,

việc tạora mộtWebsite có thê giúp bạnđónggóp vào lĩnh vực này vàchiasẻ thông tin hữu

ích với mọi người

- Tính cấp thiết củađề tài:

+ Giúp người đọc có thê tiếp cận được những bài viết+ Có thê thoải mái Donate

Những bất cập, hạn chế của hệthống cũ:+ Giao diện chưa được ưanhìn

1.2 Mục tiêu của đề tài

Mục tiêu của đề tài là Thiết kế và xây dựng website quyên góp và ùng hộ cộng đồng băng ReactJS

1.3 Đối tượng nghiên cứu

Các đối tượng của đề tài gồm có:- Khách hàng

- Các loại quyên góp- Các nhàhào tâm

■ Row per page

■ Thêm, xóa, sửa, cập nhậttàikhoảnngười dùng của trang admin

1.5 Cấu trúc của đề tài

Chương 1: Tông quanvề đề tài

Chương 2: Cơ sờ lýthuyếtChương 3: Phân tíchvà thiếtkế hệ thốngChương 4: Thực nghiệm và triên khai

Ket luậnKet quả đạt đượcHướng phát triểnTài liệu tham khảo

CHƯƠNG 2:cơ SỞ LÝ THUYẾT

2.1. Giói thiệu vê JSX

j * React.createClass({ render: functionO {

return ( <div>

<p>Maybe you prefera hellofrom Adele</p> </div>

});

Hình 2.1: JSX

Trong React, thay vì thường xuyên sử dụng JavaScriptđê thiết kế trangweb cục bộ thì

sẽ sử dụng JSX JSXđược đánli giá là sử dụngJavaScript đơn giãn hơn và cho phép trích

dần HTML cũng như sử dụng các cú pháp thẻ HTML đêhiên thị các thành phầnphụ JSX tốitru hóa mã khi biên dịch, vì vậy nó chạy nhanh hơn so với mã JavaScripttương đương

Nó đượcgọi là JSX, là mộtcú pháp mờ rộng cho JavaScript Chúng tôi khuyến khích sừ

dụng JSX vớiReact đê mô tả giao diện(UI) JSX có thê trông giống Ngônngữ Khuôn mẫu

(Template language), nhưng JSX đi kèm với toàn bộ tính năng của JavaScript

React Kliông bat buộc sử dụng JSX, nhung phần lớn mọi người đều cho rang nó hữu dụng khi làm việc với giao diện (UI) trong mã JavaScript JSX cũng cho phép React hiên

thị những thông báo lỗivà “lời cảnh báo”(warning) hữu ích hơn

2.2 Luồng dữ liệu một chiều

Hình 2.2: Luồng dữ liệu một chiều

ReactJS không có các mô-đun chuyên dụng đê xừ lý dữ liệu, vì vậy ReactJS chia nhòchế độxemthành các thànhphần nhò có mồi hệ thống chặt chẽ với nhau Tại sao chúng ta

phải quan tâmđến cấu trúc và mối quan hệ giữa các thànhphần trong ReactJS?

Câu trả lời chính là luồng truyền dữ liệu trong ReactJS: Luồng dữ liệu theo chiểu tìr cha sangcon Việc ReactJS sử dụng luồng dữ liệu một chiều có thê gây ra một chút khó khăn

cho những người muốn tìm hiểu và ứng dụng vào trong các dự án Tuy nhiên, cơ chế này

sẽ phát huy được ưu diêm của mình khi cấu trác cũng như chức năng cùa chế độ xem trờ

nênphức tạp thi ReactJS sẽ phát huy được vai trò cũa mình

2.3 DOM ảo

Hình 2.3: Dom ào

Những Framework sử dụng Virtual-DOM nhtr ReactJS khi Virtual-DOM thay đôi, chúng ta không cần thao tác trực tiếp với DOM trên View mà vẫnphàn ánh được sự thay đôi đó Do Virtual-DOMvừa đóng vai trò là Model, vừa đóng vai trò là Viewnên mọi sự

thay đôi trênModel đã kéo theo sự thay đôi trên View và đảo ngược Có nghĩa là mặc dù chúng takliông tác động trực tiếp vào các phần ừr DOM trong Chế độ xem nhưng vần thực hiện được cơ che ràng buộc dir liệu Điều này làmcho tốc độ ứngdụng tăng lênđáng kê -

mộtlợi thếkliông thê tuyệt vời hơn khi sử dụngVirtual-DOM

2.4 Tại sao ReactJs lại lại sự chọn lựa hàng đầu cho doanh nghiệp

Trong lĩnh vực phát triên công nghệ, các chủ doanli nghiệp và nhà phát triên luôn tìm

kiếm những phương pháp tốt nhất đê giúp doanh nghiệp cùahọcó được những lợi thế cạnhtranhtốthơn Và mộttrong những công nghệ tốt nhất có thê giúp nhữngdoanh nghiệp mặt

đối thủ trongviệc tạo ra nliữngứng dụng web chính là ReactJS

Hình 2.4: Hình minh họa ReactJS

ReactJS cho phép các doanli nghiệp tạo ra các ứng dụng web với giao diện ngrrời dùng tốt hơn đê nâng cao trảinghiệm người dùng Đây cũng chính là công nghệ mà các doanh nghiệp cầnphảicó đượclượng ưrơngtáccủa người dùng, tỷlệ nhấp chuột cũng như chuyên

đôi cao hơn Hơn nữa, các doanhnghiệp sừ dụng ReactJS chắc chan có giao diện tốt hơn

so với các doanhnghiệp sừ dụng các framework khác nhờ ReactJS giúp ngăn chặn việccập

nliậtcủa DOM giúp ứngdụng nhanh hơn và truyền tãiux tốt hơn

2.4.1 Tương lai của ReactJs

Facebook và toàn bộ nhóm phát triênReactJS luôn cố gang chứng minh trong việc cam

kếtnâng caohiệu quả tính toán cùa ReactJS Đây là vanđề tiên quyết đê vượt qua sự phát

triênnhanhchóng của các framework khác nhưVue.js Một số kỳ vọng cập nhật cùa Reactđược mong đợi trong tương lai có thê kê đến như: Sẽ có những loạikết xuất mới như việc

thêm những pha cú pháp độc đáo vào JSX mà không cần đến các phím Cài thiện trong công việc xử lý các lỗi phát sinh Trước đây, các lỗi Javascript bên trongcác Thành phần sẽ ảnh hường đen trạng thái của thành phần và cũng gây racác lỗitrong quá trình kếtxuất

trong các thànhphần khác Nhtrng lỗi này được thông báo là rất khó hiêu gây ra klió khăn

trong công việc giải quyết Một vấn đề khác là trong các phiên bàn tiước đây, React không cung cấp cách thức đê có thê bắt và xừ lý lỗi và phục hoi khi lỗi xảy ra một cách rõ ràng

Đặc tả phan mềm: là tiến trình đê hiêu và xác địnli những dịch VỊI nào cần có trong hệ

thống, những ràng buộc đối với việc phát triên và chức năng của hệ thống Tiến trình nàysẽ sinhra các tài liệuyêu cầu (bản đặc tà hệ thống)

Thiết kế và thực thi phần mềm: liên quan đến việc chuyên những yêu cầu phần mềm

thành hệ thống có thê thực thi đượcTlúết ke phần mềm: là việc mô tả cấu trúc phan mềm, dữ liệu cùa hệ thống, giao diện giao tiếp giữa các thànhphần, thuật toán được sử dụng,

Thực thi phầnmềm: Các lập trình viên dùngcác ngôn ngữ lập trìnhđê viết lệnh(source) thựcthi đêtạo ra hệ thốngdựa trên các bànđặc tả thiết kế chi tiết, đồng thời tiến hành các thử nghiệm (testcase) với dữ liệu giả định

Kiêm thử phần mềm: là quá trình vận hành chương trình đê tìmra lỗi

Cài đặt vàbảo trì phần mềm:Cài đặt vàtriênkhai hệ thốngvừa pháttriên đê ngườidùng có thê sử dụng được.

Bảo trì phần mềm: điều chinh các lỗi chưa đirợc phát hiện trong các giai đoán tnrớc,nâng cao tính năng sử dụng và an toàn vận hành cùa phần mềm, đảm bào cho việc phần

mềm được cập nhật khi môitnrờng và yêu cầu cùa người sửdụng thay đôi

2.5. Phương pháp phân tích thiết kế hướng đối tượng

2.5.1 Khái niệm về Phân tích và thiết kế hướng đối tượng (Object Oriented Analysis and Design: OOAD)

Trong kỹnghệ phần mềm đê sản xuất được một sân phâmphần mềm ngườita chia quá

trình phát triên sân phâm ra nhiều giai đoạn nhiĩ thu thập và phân tích yêu cầu, phân tích

vàthiết kế hệ thống, phát triên(coding), kiêmthừ, triên khai và bảo tri Trong đó, giai đoạn

phântích, thiết kế bao giờ cũng làgiai đoạn khó khăn và phức tạp nliat Giai đoạn này giúp chúng tahiêu rõyêu cầuđặt ra,xác định giải pháp, môtâ chi tiết giãi pháp Nó trả lời 2 câu

hỏi What (phần mềm này làm cái gì?)và How (làm nó nhưthế nào?).Đê phântíchvà thiết kế một phần mềm thì có nhiềucách làm, mộttrong những cách làm

đó là xem hệthống gồm nhĩrng đối tượng sống trong đó vàtương tác với nhau Việc mô tả

được tất cả các đối tượng và sự tương tác của chúng sẽ giúp chúng ta hiêu rõ hệ thốngvàcài đặtđược nó Phương thức này gọi là Phân tích thiết kếhướng đốitượng (OOAD)

2.5.2 Giới thiệu về UML (Unified Modeling Language)

UML (Unified Modeling Language) là ngôn ngir dành cho việc đặc tà, hình dung, xây

dựngvà làmtài liệu của các hệ thống phần mềm

UML tạo cơ hội đê viết thiết ke hệ thống, bao gồm nliững khái niệm như tiến trình

nghiệp vụ và các chức năng cùa hệ thống

Cụ thê, nó hữu dụng cho những ngôn ngữ kliai báo, giàn đo cơ sờ dữ liệu, thànhphan

phần mềm có khả năng tái sử dụng

UML được phát triên bời Rational Rose và một số nlióm cộng tác, nó nhanh chóng trờ

thành một trong nhữngngôn ngíi chuân đêxây dựng hệ thống phần mềm hướng đối tượng(Obj ect-Oriented)

Đây là ngôn ngữ kế vị xứng đáng cho những ngôn ngữ mô hình hoá nliư Booch,OOSE/Jacobson, OMT vàmột số các phươngthức khác.

UML cung cấp cho ngườidùng một ngôn ngữmô hìnhhoá trực quan sẵn sàng đê dùng và có ý nghĩa:

Cho phép phát triên và trao đôinhững mô hình mangnhiều ý nghĩa.Cung cấp khảnăng mờ rộng và chuyên môn hoáđê mở rộng nhữngkliái niệm cốt lõi.Độc lập với ngôn ngữ lập trình chuyên biệt và các tiến trinh phát triên

Cung cấp nentàng về sự hiêu biết ngôn ngữmôhình hoá

Khuyến kliích và hỗ trợ sự phát triêncủa các công cụ hướng đối tượng

Hỗtrợ những khái niệm phát triển cấp độ cao như collaboration, framework, pattern and

component

Tích hợp một cáchtốt nhất với thực tiễn

2.5.3 Tại sao lại là OOAD và UML?

OOAD cần các bàn vẽ đê mô tà hệ thốngđượcthiếtke, cònUMLlà ngôn ngữ mô tãcác

bân vẽ nên cần nội dung thê hiện Do vậy, chúng ta phân tích và thiết ke theo hướng đối

tượng và sử dụngUML đê biêu diên các thiết kế đó nên chúng thườngđi đôi với nhau

View (góc nhìn): Mỗi góc nhìn như thầy bói xem voi, nó không thê hiện hết hệ thống

nhưng thê hiện rõ hệ thống ờ một khía cạnh Chính vì the trong xây dựng có bân vẽ kiến trúc (nhìn về mặt kiến trác), bản vẽ kếtcấu (nhìn ve mặt kết cấu), bản vẽ thi công (nhìn vềmặt thi công) Trongphần mềm cũngnhưvậy, OOAD sừ dụng UML có các góc nhìn sau:

LogicalViewComponent View

Functionality

Software Management, Reuse Portability

Process View

Understandability Usability

Use CaseView

Deployment

View-Performance.Availability.Fault Tolerance

Performance Availability.Fault Tolerance Scalability

Delivery and Installation

Hình 2.5: Các Viewtrong OOAD sử dụng UML

Trong đó:

+ Use Case View: cung cap góc nhìn về các ca sừ dụng giúp chúngtahiêu hệ thống có

gì? ai dùng và dùng nó nhir the nào.+Logical View: cung câp góc nhìn vê câu trúc hệ thông, xem nó được tô chức như thênào Bên trong nó có gì

+ Process View: cungcấpgóc nhìn động về hệ thống, xem các thànhphần trong hệ thống

tương tác vớinliaunliư the nào.+ Component View: cũng là một góc nhìn về cấu trúc giúp chúng ta hiêu cáchphân bôvà sử dụnglại cácthành phầntrong hệthống ra sao

+Deployment View: cung cap góc nhìn về triên kliai hệ thống, nó cũng ảnh hường lớn

đen kiến tróc hệ thống.Tập hợp cácgóc nhìn này sẽ giúpchúng tahiêurõhệthốngcần phân tích, thiết kế Trong

hình 1 chúng ta thấy góc nhìn Use Case View nam ờ giữa và chi phối tất cả các góc nhìn

còn lại Chínhvì the chúng ta thường thaycác tài liệu nói về4 view+ 1 chứ không phải

view nhằm nhấn mạnh vai trò cùa Use Case View.Diagram (bàn vẽ): Diagram các bạn có thê dịch là sơ đồ Tuy nlũên ờ đây chúng ta sử

dụng từ bản vẽ cho dê hình dung Các bànvẽ được dùng đê thê hiện các góc nhìn của hệthống

Hình 2.6:Các bân vẽ trongOOAD sừdụng UML

+ Sequence Diagram: là bản vẽ mô tà sựtươngtác củacác đối tượngtrong hệ thống với nhau được mô tả tuần ựrcác bước tương tác theo thời gian

+ Collaboration Diagram: tương tự như sequence Diagram nhưng nhấn mạnh về sự

tương tácthay vì tuầntự theo thờigian.+ State Diagram: băn vẽ mô tả sự thayđôi trạng tháicùa một đối tượng.Nó đirợc dùng

đê theo dõi các đối tượng có trạng tháithay đôinhiềutrong hệthống.+ Activity Diagram: bàn vẽ mô tả các hoạt động của đối tượng, thường được sử dụng

đê hiêu về nghiệp vụ cùa hệthống.+ Component Diagram: băn vẽ mô tả về việc bố trí các thành phần của hệ thống cũngnhư việc sử dụng các thành phầnđó

+ Deployment Diagram: bản vẽ môtả việctriển khai của hệ thống như việc kết nối, càiđặt, hiệu năng của hệ thống v.v

+ Notations (ký hiệu): Notations là các kýhiệu đêvẽ, nó như từ vựng trong ngôn ngữ hr nhiên Bạn phải biết hr vựng thi mới ghép thànli câu, thành bài đirợc Chúng ta sẽ tìm

hiểu kỹ cácnotations trongtìrng bân vẽ sau này Dưới đây là vài ví dụ về notation

Hình 2.7: Kíhiệu về Use Case

Mechanisms (quytắc, cơ chế): Mechanismslà các quy tắc đê lập nên bảnvẽ, mỗi bân vẽcó quy tắcriêng và bạn phải namđược đê tạo nên các bản vẽ thiết keđúng Cácquy tắcnày

chúng ta sẽ bàn kỹ trong các bài về các bân vẽ

2.6. Giới thiệu tông quan về hệ quản trị Cơ sở dữ liệu MySQL

MySQL là một hệ quản trị cơ sờ dữ liệu (DBMS) phô biến và mạnh mẽ, được sử dụng

rộng rãi trêntoàn thế giới Dưới đây làmột giới thiệu tông quan về MySQL:

2.6.1 MySQL là gì?

MySQL là một hệ quản trị cơ sờ dữ liệu mã nguồn mờ (open source DBMS), nghĩa là

bạn có thê sử dụng nó miền phí và có thê tùy chinh mã nguồn theo nhu cầu MySQL phát

triên bời Oracle Corporation và có một cộng đồngrộng lớn cùa các nhà phát triênvà người dùng trên toàn thế giới

Tốc độ: MySQL được thiết kế đê xữ lý các tải công việc lớn và cung cấp hiệu suất cao

Khâ năng mờ rộng: MySQL cho phép bạn mờrộng cơ sờdữ liệu dễ dàng bằng cách sử

dụng một hệ thống chia sẻ tải hoặc sao lưu đámmây

Hô trợ đa nền tảng: MySQL có thê hoạt động trên nhiều hệ điều hành như Windows, Linux, macOS, vànhiều nen tảng khác

Ngôn ngữ SQL: MySQL sử dụng ngôn ngữ SQL (Structured Query Language) đê truy

cập và quản lý cơ sờ dir liệu.An toàn: MySQL hỗ trợ các tính năng bãomậtnhưxác thực, mãhóa dữliệu, và quàn lýquyềntruy cập

trong cáchệ thốngphântích dữ liệu và báo cáo

ứngdụngdi động: MySQL cung cấphỗ trợ cho các ứng dụngdi động thông quaAPIvà

tlnr viện kết nối dễ dàng

Liru trữ dữ liệu: MySQL có thêđược sửdụng đêhrutrữ dữ liệu của cácứng dụng doanli

nghiệpvà trangweb thương mại điện ữr.2.6.4 Các phiên bản của MySQL:

MySQL có nhiều phiên bàn kliác nhau, bao gồm phiên bân mã nguồn mờ (MySQL Community Server) và phiên bản thương mại (MySQL Enterprise Edition) với các tínhnăngvàhỗ trợ mờrộng khác nhau MySQLcũngcómột số biếnthênhư MariaDB, PerconaServer, và nhiềuhệthống quản lý cơ sờ dữliệu khác dựa trên mã nguồncủa MySQL

Hình 2.10: MySQL Workbench

2.7 Giới thiệu tông quan về ReactJS

ReactJS là một thư viện JavaScript phát triên bời Facebook đê xây dựng giao diệnngười

dùng (UI) cho các ứng dụng web và ứng dụng đơntrang (single-page applications) Dướiđây là một tông quan ve ReactJS:

2.7.2 Khả năng tái sử dụng

Reactkhuyến khích việc xây dựng các thành phầngiao diện tái sử dụng Điều này giúp

tối ưu hóa việc quản lý mã nguồn, giảm lặp lạimã,và dễ dàng bảo tri ứng dụng

2.7.3 Virtual DOM:

React sử dụng một cơ chế gọi là Virtual DOM (DOM ảo) đêcải thiện hiệu suất Thay vi

cập nhật DOM tụĩc tiếp mỗi khi có thay đôi trạngthái, React tạo ra một bãn sao của DOM

gọi là Vừtual DOM và chi cập nhật các phan ữr thực sự thay đôi Sau đó, React so sánli

Virtual DOM mới với Virtual DOM cũđê tim racác thay đôi cần áp dụng trên DOM thựctế, điều này giúp giảm thiêu overhead và tăng hiệu suất

2.7.4 Cộng đồng lớn và hệ sinh thái:

React có một cộng đồng phát triên lớn và rấtnhiều tài liệu hướng dẫn, ví dụmâu, và thư

viện bô sung được xây dựng bời cộngđong

Ngoài ra, có nhiều công cụ và thư viện khác như ReactRouter (đê quân lý địnhtuyến), Redux (đê quản lý trạng tháiứng dụng), và Material-UI (đê xây dựng giao diện dựa trên nguyên tắcthiếtkếvật liệu)

2.7.5 Hỗ trợ dự án lớn:

React thíchhợp cho việc phát triển các ứng dụng lớn và phức tạp nhờ khả năng quàn lý

trạng thái tốt, khả năng tối ini hóa hiệu suất vàsự chia sẻ mã nguồn dễ dàng

2.7.6 Hỗ trợ cho ứng dụng di động:

React Native làmột framework được xây dựngdựatrênReactJS,chophép bạn phát triên

ứng dụng di động đa nen tảng sừdụngJavaScript và React

Các công ty sữ dụng React:

Hình 2.11: Logo React

React được sử dụng rộng rãi bởi nhiều công ty lớn nhir Facebook, Instagram, Airbnb,

Netflix, và nhiềuứng dụng web và di độngkhác

Node.js là một môi trường chạy mãJavaScript phía máy chù (server-side) được xây dựng

trên JavaScript Engine V8 của Google Chrome Nó cho phép bạn thực thi mã JavaScripttrênmáy chù, cung cấp một cách linh hoạt và hiệu quả đê pháttriên các ứng dụng web và

ứng dụngmạng

2.8 Giói thiệu tông quan ve NodeJS

Dưới đây là một tông quan về Node.js:

Node.js là một hệ thống phần mềm được thiết kế đê viết các ứng dụng internet có khảnăng mờrộng, đặc biệt là máy chủ web Chương trìnhđirợc viết bang JavaScript, sử dụng kỹ thuật điều khiên theo sựkiện, nhập/xuất không đồng bộ đê tối thiêu tông chi phívà tối

đa khả năng mờrộng

Node.JS là một trong nhữngnền tàng phô biến nhất hiện nay cho mục đích phát triên ứng dụng mạng phía server

ưu diem

^ 1O hướngsự kiệnkhông đồng bộ, cho phép xử lý nhiều yêu cầu đồng

thời.^ Sừ dụng JavaScript —một ngôn ngữ lậptrìnhdề học

v' Chia sécùng code ờcá phía client và server

^ NPM(NodePackage Manager) và module Node đang ngày càng phát trien mạnh mẽ

JavaScript Everywhere:

Node.js cho phép bạn sử dụng JavaScript cà phía máy chù và phía trình duyệt.Điều nàytạo ra một môitrường đồng nhất và giúp đơn giản hóa việc chia sè mãnguồn giữa phía máychủ và plúa kháchhàng (client-side)

Kiến thức cơ bản về Node.js:

Hình 2.12: Logo Nodejs

Node.js sử dụng mô hình xử lýkhông đồng bộ (asynchronous) và sự kiện (event-driven)đê xừ lý các tácvụ I/O (đầu vào/đầu ra) một cáchhiệu quâ Điều này giúp tránh tình trạng đứngchờ trong quá trình xửlý yêu cầu từcác khách hàng.

Nen tảng đanhiệm (Multi-Threaded):

Node.js không sử dụng multi-threading truyền thống như nhiều môi tnrờng máy chũ

khác Thay vào đó, nó sửdụng mô hình đa nhiệm một luồng đơn (single-threaded)vànon­blocking I/O đè xừ lý nliiều yêu cầu cùng một lúc Điều này giúpgiảm tài nguyên và tối im

hóa hiệu suất

Node.js được sừ dụng rộng rãi bời nhiều công ty lớn và dịch vụ nôi tiếng như Netflix,

Uber, Linkedln, và eBay

2.9 Tìm hiểu React Hook

Hình 2.13: React Hooks

Chúng ta đã có thê sữ dụng State trong stateless (functional) component, việc mà từ trước

tới nay ta bat buộcphảikhai báo Class Có thê thấy, các nlià phát triên React họ đang muốn hướng đến 1 tương laiFunctional Programming thay vi sữ dụng những Class mà chi nghecái tên thôi là ta đã nghĩ ngay đen OOP Cộng với việc kliông sử dụng Class kế thừa tìr

React Component nữa nên giờ đây kíchthước bundle sẽ được giảm đáng kê bời code sử

ValueThomas

Local storage là một feature mới cùa HTML5 cho phép bạn hru trữ bất kì info nào bạn

muốn trong browser dùng JavaScript

Local Storage có tínli đồng bộ (synchronous), nghĩa là không thê truycập song song mànó sẽ đáp ứngtìrng lời gọi thực thi theo thứ tự

Một diêm trìr lớn khác cũa Local Storage lànó kliông có phương thức nào đê bảo vệ dữ liệu lưu trên trình duyệt Bất cứ đoạn mã javascript nào trongWebsite cũng có thêtiuy cập

các giá trị hni trữtrong Local Storage

2.11. Tìm hiêu React-Bootstrap

Hình 2.15: Bootstrap

React-Bootstrap cung cấpsẵnmộtbộ các React component với look-and-feel cùa Twitter

Bootstrap componenttừ đó giúp việc tạo dựngUI cho React app dễ dàng hơn bao giờ hết

2.12 Tìm hiểu SASS/SCSS

Hình2.16: Sass

SASS (Syntactically Awesome StyleSheets) làmột css Preprocessor giúp bạnviếtcss

nhanh hơn và có cấu trúc rõ ràng hơn Với SASS, bạn có thêviết css theo thứ tự rõ ràng,quản lý các biến đã được định nghĩa sẵn, các class dùng chung hay có thê tựđộng nén tập

tin css lạiđẽ bạn tiết kiệmdung hrợng

SASS và scss ve bảnchat vấn đềlàgiốngnhau, chi khác nhau ờ cáchviết

Sass là chữ viết tắt cùa Syntactically Awesome Style Sheets, chương trinh tiền xử lý bang ngôn ngữ kịch bản (Preprocessor Scripting Language ), sẽ được biên dịch thành css

Nghĩa là, mình sẽ làm style bang SASS, rồi SASS sẽrender việc mình làmthành file css.

2.13. Giói thiệu tống quan về Stripe

Stripe làmộtcôngty và nền tâng thanlitoán trực tuyếnđược phát triên đê giúp các doanh

nghiệp và các nhàphát triêntích hợp dịch vụ thanh toán vào các ứng dụng và trang webcũa họ Dưới đây là một tông quan ve Stripe:

2.13.2 Dịch vụ Stripe:

Stripe cung cấp nhiều dịch vụ và sânphâm liên quan đến thanh toán, bao gồm:

Stripe Payments: Dịch VỊI thanh toáncho phép doanh nghiệp chấp nhận thanh toán trực

tuyến từ khách hàng thông qua thẻ tín dụng, thẻ ghi nợ và nhiều phương thức thanh toánkhác

StripeConnect: Cho phép xâydựng nền tàng thị trườngvà kết nối với nhiềuđốitác thanh

Stripe Sigma: Cung cấp công cụ đê truy van và phân tích dữ liệuthanh toán

StripeAtlas:Hô trợ các công ty kliời nghiệp trongviệc thành lập doanli nghiệp tại HoaKỳ

Khả năngtíchhợp:

Stripe có các thư viện và API mạnh mẽ, cho phép các nhà phát triên tích hợp dịch vụthanh toán cùa họ vào cácứng dụng webvà di động dê dàng

Hỗ trợ đaquốc gia:

Stripe hô trợnhiều loại tiền tệ và có khả năng xử lý thanh toán tìtkháchhàng trên toàn

ký