TOM TAT KHÓA LUẬN
CHƯƠNG 2: CƠ SỞ LÝ THUYET VÀ CÔNG NGHỆ SỬ DỤNG
2.1. Cơ sở lý thuyết
2.1.1. Ngôn ngữ Javascript, Typescript
2.1.1.1 Định nghĩa
- JavaScript là một ngôn ngữ lập trình được sử dụng dé tao trang web tương tác.
Nó giúp cải thiện trải nghiệm người dùng bằng cách thêm các chức năng động vào trang web. Ban đầu chỉ hoạt động trong trình duyệt web, nhưng sau đó đã
mở rộng sử dụng để phát triển cả ở phía máy chủ. JavaScript giúp thực hiện các chức năng như thay đổi nội dung trang, xử lý sự kiện người dùng và tạo
hiệu ứng động trên trang web.
- TypeScript là một ngôn ngữ lập trình cải tiễn JavaScript bằng cách thêm các
kiêu loại vào cú pháp. TypeScript thêm cú pháp bổ sung vào JavaScript dé các công cụ soạn thảo mã có thé sớm phát hiện những lỗi viết mã. Đồng thời, mã TypeScript chuyển đôi sang JavaScript và cung cấp tat cả các lợi ích tương tự
như ở JavaScript. TypeScript cũng chạy trong các ứng dung va với các khung
và thư viện JavaScript.
What’s TypeScript?
Strongly Typed
Interfaces Generies
ES6 Compiles to ys
== )| The browser cant
lôi] run TypeScript
Hình 2. 1 Mới liên hệ giữa typescript và javascript
2.1.1.2. Phương thức hoạt động
Trình phân tích (Parser):
Trình phân tích trong JS Engine sẽ tiếp nhận các dòng lệnh JavaScript đầu
tiên.
Công việc của trình phân tích là kiểm tra lỗi cú pháp từng dòng một. Khi phát
hiện lỗi, trình phân tích sẽ dừng lại và thông báo lỗi ở dòng tương ứng.
AST: Trình phân tích tạo ra cấu trúc đữ liệu tên là AST (Abstract Syntax Tree
— Cây cú pháp trừu tượng) sau khi nó đảm bảo tat cả dòng lệnh không còn lỗi
[1].
Abstract Syntax Tree function fun(x)
: =.
ye ae: lộ
Gp a /
Hinh 2. 2 Vi du vé AST
Chuyên đôi thành mã máy: JavaScript Engine tiễn hành chuyền đổi các dòng lệnh JavaScript thành mã máy (là ngôn ngữ máy tính có thê hiểu) sau khi Trình
phân tích hoàn thành AST.
Thực thi: JavaScript Engine gửi mã máy đến hệ thống tương ứng đề thực thi ở
giai đoạn cuôi cùng.
ileal avaScript Engin‹
9919191 91101919
> 101110101
11911996
1010 0116
> i Chuyén déi
` thành mã máy
JS Files Parser AST
Tniniininil
li
Thực thi
Hình 2. 3 Cách thức javascript hoạt động
2.1.2. Chat GPT
2.1.2.1. Chat GPT là gì ?
- Chat GPT là một chương trình trí tuệ nhân tao tao ra đối thoại. Được tạo ra
bởi OpenAI, chatbot có khả năng cao này sử dụng các thuật toán học máy dé
xử lý và phân tích lượng lớn dữ liệu dé tạo ra câu trả lời cho các câu hỏi của người dùng. Chương trình xử lý ngôn ngữ này có khả năng hiểu được ngôn ngữ của con người khi nó được nói hoặc viết, cho phép nó hiểu thông tin mà
nó được cung cấp và cách xử lý nó. Một người học có thé gõ một câu hỏi, và Chat GPT sẽ trả về một câu trả lời dé hiéu - trong nhiều định dạng khác nhau với các yêu cầu cụ thê.
2.1.2.2. Cách hoạt động cua Chat GPT
Chat GPT được hoạt động theo những cơ chế sau [2]:
- Chat GPT sử dụng một bộ dữ liệu lớn chứa văn ban dé học về ngôn ngữ, ngữ
pháp, cau trúc và ý nghĩa của từ và câu. Bằng cách này, nó có khả năng hiểu
ngữ cảnh và ý định của câu hỏi từ người dùng và tạo ra các câu trả lời phù hợp.
- Qua trình hoc của Chat GPT dựa trên việc xem xét và phân tích lượng lớn
văn bản từ đa dạng nguồn. Nó học cách từ ngữ được sử dụng trong các bối
cảnh khác nhau, cách các câu được hình thành, và cách các từ được sắp xêp
để tạo nên ý nghĩa. Điều này giúp nó xây dựng một mô hình ngôn ngữ đa
chiêu, từ đó có thê hiêu và tạo ra các câu trả lời một cách chính xác và tự
nhiên.
Step1
Collect demonstration data and train a supervised policy.
A prompt is sampled from our prompt dataset.
Alabeler demonstrates the desired output behavior.
This data is used to fine-tune GPT-3.5 with supervised learning.
7>
Explain reinfarcement learning toa 6 year old,
|
®)
¿
We give treats and
punishments to teach.
Ý
ST
oAi
2
BES
Step2
Collect comparison data and train a reward model.
Aprompt and several model outputs are sampled.
Alabeler ranks the outputs from best toworst.
This data is used
to train our reward model,
Lờ,ơ
Step4
Optimize a policy against the reward model using the PPO reinforcement learning algorithm.
Anew prompt is sampled from the dataset.
The PPO model is initialized from the supervised policy.
The policy generates
an output,
The reward model calculates a reward for the output.
The reward is used
to update the policy using PPO.
Hình 2. 4 Cách hoạt động của ChatGPT
(Nguồn: https://openai.com/blog/chatgpt )
2.1.2.3. Các tính năng và hạn chế của Chat GPT
a. Tính năng
wre
Write a story about otters,
'
PPO
CA, ơ`.
KeeWe
.^
'
‘Once upon atime,
'
aM -
.ơ
Ụ
ty
Tao Phan Ung Tự Nhiên: Chat GPT có kha năng tao ra các câu trả lời tự
nhiên và giông như con người, giúp tương tác người dùng một cách chan
thực.
Đa Dạng Công Việc: Có thé giải quyết nhiều công việc khác nhau như trả lời
câu hỏi, giải phương trình toán, dịch ngôn ngữ, sửa mã lỗi, viết câu chuyện
hoặc thơ.
- Toc Độ và Hiệu Quả: Tạo ra phản ứng và câu trả lời nhanh chóng, giúp tiết
kiệm thời gian so với việc nghiên cứu và viết thủ công.
- Kha Năng Học Từ Dữ Liệu Lớn: Học từ một lượng lớn di liệu văn bản, giúp
nó hiéu vê ngôn ngữ và câu trúc câu một cách tự nhiên.
b. Hạn chê
- Han Chế Hiểu Biết: Dù có khả năng tạo ra câu trả lời tự nhiên, nhưng Chat
GPT có thê không hiểu sâu về một chủ dé cụ thé và có thé tạo ra thông tin
không chính xác.
- _ Giới Hạn Thời Gian: Các cau trả lời được tạo ra nhanh chóng, nhưng đôi khi
có thê thiếu sự chỉ tiết và độ sâu so với việc nghiên cứu kỹ lưỡng.
- Phu Thuộc vào Dữ Liệu Hudn Luyện: Chat GPT phản anh thông tin dựa trên
dữ liệu mà nó được huấn luyện, vì vậy nếu đữ liệu có giới hạn hoặc không chính xác, câu trả lời có thể bị ảnh hưởng.
- Kha Năng Tao Ra Thông Tin Ao: Do khả năng sinh câu trả lời mà không cần
hiểu sự logic đằng sau, Chat GPT có thê tạo ra thông tin ảo hoặc không có cơ
sở thực tế.
- Kha Năng Tạo Ra Nội Dung Thiếu Đạo Đức: Không có khả năng phân biệt
đạo đức, Chat GPT có thể tạo ra nội dung không phù hợp hoặc không đạo
đức nêu được yêu câu một cách không đảm bảo.
Những tính năng và hạn chế nay phản ánh cả những tiến bộ và thách thức trong lĩnh
vực của trí tuệ nhân tạo và xử lý ngôn ngữ tự nhiên.
2.1.3. Cơ sở dữ liệu MongoDB
2.1.3.1. Định nghĩa
- MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, thuộc loại NoSQL,
và được sử dụng rộng rãi. Nó là hệ quản tri cơ sở đữ liệu hướng tài liệu, lưu trữ dtr liệu trong các tài liệu JSON thay vì trong bảng như các hệ quan tri cơ sở dữ liệu quan
hệ. Trong MongoDB, chúng ta sử dụng khái niệm "collection" thay vì "bang" như
trong hệ quản trị cơ sở dữ liệu quan hệ. Mỗi "document" trong MongoDB tương
10
đương với một "row" trong hệ quản tri cơ sở dữ liệu quan hệ. Điều đặc biệt là các collection trong MongoDB có cấu trúc linh hoạt, cho phép lưu trữ dữ liệu mà không cần tuân theo một cấu trúc cụ thé. Thông tin liên quan thường được lưu trữ cùng nhau
dé hỗ trợ truy vấn nhanh bang ngôn ngữ truy van của MongoDB. [7]
2.1.3.2. Tại sao lại sử dụng MongoDB
- MongoDB: là cơ sở dit liệu phi quan hệ vì vậy dữ liệu của nó được lưu trữ dưới
dang document. Với dạng lưu trữ nay giúp việc lưu trữ dtr liệu linh hoạt hon
và phù hợp hơn với các yêu cầu phát triển đữ liệu trong thực tế.
- Truy vấn đặc biệt: MongoDB hỗ trợ bạn tìm kiếm dữ liệu theo trường, truy
vấn theo miền, hoặc tìm kiếm các biểu thức thông thường. Các truy vấn được thực hiện dé có thé trả về các trường cụ thé trong document.
- _ Đánh chỉ mục (Index): Đánh chỉ mục đề giúp việc tìm kiếm nhanh chóng hơn
và trong MongoDB có thê đánh chỉ mục cho bat kỳ trường nao. [12]
- Ban sao (Replication): MongoDB luôn san sàng cung cấp bộ các bản sao. Một
bộ bản sao bao gồm hai hoặc nhiều thê hiện của MongoDB. Mỗi bộ bản sao
có thê đóng vai trò là bản sao chính (bản sao thứ cấp) hoặc bản sao phụ (bản sao sơ cấp) bất cứ lúc nào. Bản sao thứ cấp là server chính tương tác với client
dé thực hiện việc doc/ghi. Ban sao sơ cấp một bản sao di liệu của ban sao thứ cấp. Khi bản sao thứ cấp thất bại, bản sao thứ cấp tự động được chuyên qua bản sao sơ cấp đề chuyền thành thứ cấp sau đó nó trở thành server thứ cấp.
- Cdn bằng tải: MongoDB sử dụng khái niệm sharding dé chia cắt dữ liệu thành
nhiều thé hiện của MongoDB. MongoDB có thể chạy trên nhiều server cân bang tải, và hoặc sao chép dữ liệu dé hệ thống luôn hoạt động ngay cả khi có lỗi phần cứng.
11
2.1.3.3. Cách hoạt động của MongoDB
MongoDB hoạt động dưới một tiễn trình ngầm service, luôn mở một công (Công mặc định là 27017) để lắng nghe các yêu cầu truy vấn, thao tác từ các ứng dụng gửi vào sau đó mới tiến hành xử lý. [7]
Mỗi một bản ghi của MongoDB được tự động gan thêm một field có tên “_¡d” thuộc kiểu dữ liệu Objectld mà nó quy định dé xác định được tính duy nhất của bản ghi này so với bản ghi khác, cũng như phục vụ các thao tác tìm kiếm
và truy vấn thông tin về sau. Trường dit liệu “ id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất. [12]
Mỗi khi có một truy van di liệu, ban ghi được cache (ghi đệm) lên bộ nhớ Ram, dé phục vụ lượt truy vấn sau diễn ra nhanh hơn mà không cần phải đọc
từ 6 cứng. [7]
Khi có yêu cầu thêm/sửa/xóa bản ghi, để đảm bảo hiệu suất của ứng dụng mặc định MongoDB sẽ chưa cập nhật xuống 6 cứng ngay, mà sau 60 giây MongoDB mới thực hiện ghi toàn bộ dữ liệu thay đôi từ RAM xuống 6 cứng.
[7]
2.1.3.4. Cac loại dit liệu trong MongoDB
Nếu như mô hình dé liệu trong hệ quản tri cơ sở dữ liệu quan là các bảng quan hệ thi trong hệ quản trị cơ sở dữ liệu phi quan hệ lại được lưu trữ dưới nhiều dạng khác
nhau, dưới đây là các dạng lưu trữ:
Key - Value: dit liệu lưu trữ kiêu này chúng ta sẽ dựa vào key dé lay value.
Dữ liệu dạng này có tốc độ truy vấn nhanh và đặc biệt Key - Value được sử dụng để làm cache cho đữ liệu.
Document: Mỗi object được lưu trữ trong cơ sở đữ liệu dưới dạng document.
Dữ liệu sẽ được lưu trữ dưới dạng BSON/JSON/XML dưới database. Với dang
này chúng ta có thé dé dàng thêm, sửa, xóa trường một cach linh hoạt vì vay
nó khac phục được câu trúc cứng nhac của Schema.
12
- Column - Family: Dữ liệu được lưu trữ dạng cột khác với SQL là dạng hàng,
mỗi hàng có key/id riêng. Đặc biệt mỗi hàng trong một bảng lại có số lượng cột khác nhau. Với dạng lưu trữ này sẽ thích hợp cho việc ghi một số lượng
lớn đữ liệu.
- Graph: Đây là kiểu cơ sở dit liệu đồ thị, dữ liệu sẽ được lưu trữ theo từng node.
Node chính là các thực thé hoặc là đối tượng. Properties là các thuộc tính liên quan đến từng Node, nó sẽ được đặt tên sao cho có quan hệ gần gũi với Node
nhất. Edges là cạnh nối các Node, nó biểu thị cho quan hệ gitra các Node. Với
dạng lưu trữ này thường được sử dụng trong các mạng noron, mạng xã hội....
Ưu điểm của nó là sử dụng các thuật toán duyệt node đề tăng tốc độ truy vấn. (Nguồn tham khảo: https://www.mongodb.com/databases/types)
2.2. Công nghệ sử dụng
2.2.1. Phát triển web với framework ReactJS
2.2.1.1. Định nghĩa
- React (ReactJS hay React.js) là 1 thư viện JavaScript mã nguồn mở được phát
triển bởi đội ngũ kỹ sư đến từ Facebook. Nguyên lý xây dựng của React dựa trên components (component-based approach), có thể tái sử dụng và phù hợp
với ứng dung | trang SPA. React giúp lập trình viên xây dựng giao diện người
dùng dựa trên JSX (môt cú pháp mở rộng của JavaScript), tạo ra các DOM ảo
(virtual DOM) để tối ưu việc render 1 trang web.
- __ Hiện tại sau hơn nhiều năm phát triển thi React vẫn đang chiếm vị trí số 1
trong các thư viện Front-end hiện tại.
Downloads in past 5 Years ~
13
Hình 2. 5 Thống kê số lượng sử dụng của các framework js
(Nguồn: hffps://dev.to/hb/react-vs-vue-vs-angular-vs-svelte-Ifdm )
2.2.1.2. Các thành phan và cách hoạt động của ReactJS
a. JSX
- Trang web cơ bản dựa chủ yếu vào các tài liệu HTML. Khi bạn truy cập trang
web từ trình duyệt, nó sẽ đọc các tài liệu HTML này dé hiển thị nội dung trên
màn hình của máy tính, tablet, hoặc điện thoại. Trong quá trình này, trình duyệt
tạo ra một cái gọi là Document Object Model (DOM) - một cau trúc cây biểu diễn cách website được hién thi.
- Lap trình viên có khả năng thêm nội dung động vào dự án của họ bằng cách
sử dụng ngôn ngữ JavaScript dé thay đôi cây DOM. JSX, hay JavaScript extension, là một phần mở rộng của React giúp chúng ta dé dang thay đổi cây DOM bằng cách viết mã giống như HTML. Với sự hỗ trợ đầy đủ từ trình duyệt cua ReactJS trên mọi trình duyệt web hiện dai, bạn có thé thoải mái sử dụng JSX trên bất kỳ trình duyệt nào bạn đang làm việc.
Document
R nent
Element: Element:
<head> <body>
Element: Attribute: Element: Element:
<title> “href” <a> <h1>
Text: Text: Text:
“My tithe” “My link” “My header”
Hinh 2. 6 Cach Element duoc thé hién trong DOM
(Nguén: https://www.w3schools.com/js/js_htmldom.asp )
b. Virtual DOM
- Néu không sử dung ReactJS (và JSX), website sẽ phải dựa vào HTML dé cập
nhật cây DOM, làm cho trang phải tai lai mỗi khi có sự thay đổi. Đối với các
14
trang web đơn giản, tĩnh, điều này có thể chấp nhận được. Tuy nhiên, đối với các trang web lớn, đặc biệt là có nhiều tương tác người dùng, cách làm này có thé gây ảnh hưởng nghiêm trọng đến hiệu suất do việc tải lại toàn bộ cây DOM.
- Khi sử dụng JSX và ReactJS, Virtual DOM sẽ được tạo ra. Điều này là một
bản sao của DOM thực và giúp tìm kiếm những phần cần cập nhật một cách hiệu quả. Khi có sự kiện như thêm bình luận, ReactJS chỉ cập nhật những phần can thiết trong Virtual DOM, giảm tải và tiết kiệm tài nguyên, cải thiện hiệu suất, đặc biệt là trên các trang web lớn và phức tạp.
Virtual DOM Real DOM
compare
¢ NN
&
/ `_ +
Vo
Hinh 2. 7 Hinh anh minh hoa cho Virtual DOM
c. Cách thức React hoạt động
- Tao đại diện của nút DOM thông qua tạo ham Element trong React.
Ví dụ:
React.createElement("div", { className: "red" }, "Children Text");
React.createElement(MyCounter, { count: 3 +5 });
- ThéJSX có tên thé, con và thuộc tính. Dau ngoặc kép trong các thuộc tính JSX
đại diện cho chuỗi. Yếu tố này tương tự như JavaScript. Ngoài ra, các giá trị
sô và biêu thức phải được việt bên trong dâu ngoặc nhọn.
- Hau hết các phần của React được viết bang cách sử dụng JSX (JavaScript
XML) chứ không phải JavaScript tiêu chuẩn (JS).
15
2.2.1.3. Uu điểm và nhược điểm của ReactJS
a. Ưu điểm
- Pht hợp với Da dạng Thể loại Website: ReactJS hỗ trợ việc khởi tạo website
dễ dàng hơn, cung cấp nhiều công cụ linh hoạt cho nhiều trường hợp sử dụng.
- Tdi sử dụng các Component: Khả năng tái sử dụng Component giúp tiết kiệm
thời gian va công sức, đặc biệt hữu ích khi xây dựng các dự án mới.
- Than thiện với SEO: ReactJS có khả năng tương tác tốt với công cụ tìm kiếm,
đặc biệt là Google, giúp cải thiện khả năng SEO của trang web.
- Debug dé dàng: Có các công cụ hỗ trợ debug như Chrome extension, giúp quá
trình phát triển và sửa lỗi diễn ra thuận lợi.
- Công cụ phát triển Web hot nhất: ReactJS là một công nghệ phổ biến, có số
lượng tuyển dụng lớn, độ phổ biến cao trên thị trường Việt Nam, làm cho nó
trở thành một lựa chọn hấp dẫn cho các nhà phát triển.
- __ Tóm lại, ReactJS mang lại nhiều lợi ích và tiện ích cho quá trình phát triển ứng
dụng web, từ sự linh hoạt trong xây dựng giao diện đến khả năng tái sử dụng
và tích hợp linh hoạt trên nhiều nền tang.
e react}s ” @ AngularJS ® VueJS + Thêm lượt so sánh
Việt Nam + 12 tháng qua * Tất cả danh mục + Tìm kiếm trên web
@ iy ant từ tìm kié t lữ ay du r khá TÌM HIẾU THÊM
Mức độ quan tâm theo thời gian le od
Hình 2. 6 Độ quan tâm cua các framework js
16