Lập trình trang web với asp net reactjs và graphql

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

BÁO CÁO THỰC TẬP

LẬP TRÌNH TRANG WEB VỚI ASP.NET REACTJS VÀ
GRAPHQL

Công ty thực tập
KMS Technology
Người phụ trách
Vũ Thái Anh
Thực tập sinh
Phạm Phúc Nguyên - 19521918

TP. Hồ Chí Minh, tháng 12 năm 2022

Vũ Thái Anh

Phạm Phúc Nguyên


LỜI MỞ ĐẦU
Ngày nay, các trang web ngày càng phát triển mạnh, không chỉ đơn thuần là một trang web
tĩnh như ngày trước nữa mà bây giờ các website nhìn rất hiện đại với giao diện thân thiện với
người dùng và cung cấp một trải nghiệm mượt cho người dùng. Với sự phát triển liên tục của việc
phát triển website, nhiều công nghệ mới được ra đời liên tục trong khoản thời gian gần đây với
mục đích làm việc xây dựng website trở nên dễ hơn. Nhưng cũng mang lại sự phức tạp khi chọn
công nghệ với mỗi công nghệ đều có điểm yếu và điểm mạnh riêng, được sử dụng cho các mục
đích khác nhau bởi các cơng ty khác nhau.
Ngoài ra để phát triển một website thuận tiện ta tạo ra nhiều công nghệ khác nhau để cải

thiện trải nghiệm người dùng, việc này đã nâng cao mong đợi của người dùng đối với một website.
Bây giờ các website phải lưu trữ trạng thái của người dùng, có tốc độ cao, load nhanh, nhiều
tương tác khác nhau. Rất nhiều các cái tên như JWT, Cookie, Microservice,… được đưa ra khi ta
muốn tìm kiếm thơng tin để xây dựng một trang web.
Mặt khác các loại hình tội phạm trên mạng cũng ngày càng tinh vi hơn, việc này khiến cho
các nhà cung cấp phải phát minh ra nhiều hình thức bảo mật khác nhau, với nhiều nội dung mà
một người khi xây dựng website cần phải tuân theo. CSRF, DDOS, SQL Injection,… đây chỉ là
một số hình thức tấn cơng trong vơ số hình thức khác.
Với các vấn đề nêu trên ta có thể nhận thấy rằng việc xây dựng một website hồn chỉnh
khơng hề đơn giản như các đồ án trên trường. Khối lượng kiến thức mà ta phải tiếp thu và áp
dụng là khổng lồ mà ta không thể nào mong rằng chỉ cần đọc tải liệu là đủ. Ta phải có một nhóm
người đủ tài năng làm việc với nhau một cách hài hịa để có thể đưa ra được một sản phẩm hồn
chỉnh.
Vì lý do trên sau 3 năm học tập ở trường em muốn tham gia vào một công ty lớn để học
tập từ các anh chị đi trước, học về kiến thức chuyên môn lẫn kiến thức làm việc trong công ty.
Em muốn được nhìn thấy một tập thể làm việc để đạt đến cùng một mục tiêu lớn mà một người
không thể đạt được.

Vũ Thái Anh

Phạm Phúc Nguyên


LỜI CẢM ƠN
Em xin gửi lời cảm ơn đến Công ty KMS Technology đã tạo điều kiện để em có cơ hội
được thực tập lại công ty trong 3 tháng vừa rồi.
Trong khoảng thời gian ngắn ngủi ấy em đã học được rất nhiều kiến thức chuyên môn với
nhiều công nghệ khác nhau từ cả frontend đến backend. Em xin cảm ơn các anh/chị đã bỏ thời
gian ra để giúp đỡ em trong quá trình học tập xây dựng trang web ở công ty.
Em xin cảm ơn anh Vũ Thái Anh đã không chỉ giúp em về phần kiến thức chun mơn mà

cịn cho em các lời khun về cách làm việc. Trong tất cả các kiến thức chuyên môn anh đều góp
ý và nêu ra các điểm quan trọng để em tìm hiểu sâu thêm vào phần đó, từ đó em có cơ hội tiếp
thu thêm nhiều kiến thức về kiến trúc của một trang web và cách hoạt bên dưới của nhiều công
nghệ khác nhau.
Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều
kiện em làm bài báo cáo này.
Phạm Phúc Nguyên
Tp.HCM, ngày 25 tháng 12 năm 2022

Vũ Thái Anh

Phạm Phúc Nguyên


NHẬN XÉT CỦA KHOA

..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................

..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................
..........................................................................................................................................................

Vũ Thái Anh

Phạm Phúc Nguyên


Danh mục hình ảnh
Hình 1.1 Logo KMS Technology .................................................................................................. 1
Hình 1.2 Logo KMS Healthcare .................................................................................................... 1
Hình 1.3 Logo KMS Solution ........................................................................................................ 2
Hình 1.4 Kobiton logo ................................................................................................................... 3
Hình 1.5 Katalon logo .................................................................................................................... 3
Hình 1.6 Grove logo ...................................................................................................................... 3
Hình 1.7 Visily logo ....................................................................................................................... 3
Hình 1.8 Kaypay logo .................................................................................................................... 3
Hình 2.1 Thời gian biểu để nghiên cứu ......................................................................................... 5
Hình 2.2 Hệ thống .NET ................................................................................................................ 6
Hình 2.3 Cách hoạt động của GC .................................................................................................. 7
Hình 2.4 OOP................................................................................................................................. 8
Hình 2.5 EF Core logo ................................................................................................................... 9
Hình 2.6 Web api ......................................................................................................................... 10
Hình 2.7 Mơ hình MVC ............................................................................................................... 12
Hình 2.8 Quy trình thực hiện TDD .............................................................................................. 13
Hình 2.9 Mơ hình GraphQL......................................................................................................... 14
Hình 2.10 Logo typescript ........................................................................................................... 16
Hình 2.11 Logo ReactJS .............................................................................................................. 16

Hình 3.1 Planning Poker .............................................................................................................. 22
Hình 3.2 Quá trình chơi ............................................................................................................... 23

Vũ Thái Anh

Phạm Phúc Nguyên


Mục Lục
Chương 1: Giới thiệu công ty thực tập ........................................................................................ 1
1. Giới thiệu công ty KMS Technology .................................................................................. 1
1.1 KMS Health care ........................................................................................................... 1
1.2 KMS Solution ............................................................................................................... 2
1.3 Các công ty product ...................................................................................................... 2
2. Sản phẩm của công ty .......................................................................................................... 3
Chương 2: Nội dung thực tập ...................................................................................................... 4
1. Tìm hiểu công ty và các kỹ năng cơ bản trong công ty ....................................................... 4
2.1 Thông tin về công ty: .................................................................................................... 4
2.2 Kỹ năng cơ bản trong công ty: ...................................................................................... 4
2. Nghiên cứu kỹ thuật ............................................................................................................. 5
2.1 Tìm hiểu về C# nâng cao .............................................................................................. 5
2.2 Tìm hiểu sâu về OOP .................................................................................................... 8
2.3 Tìm hiểu về EF Core ..................................................................................................... 9
2.4 Tìm hiểu về Web API ................................................................................................. 10
2.5 Tìm hiểu về MVC ASP.NET CORE .......................................................................... 11
2.6 Tìm hiểu về TDD (Test driven development) ............................................................ 12
2.7 Tìm hiểu về GraphQL ................................................................................................. 14
2.8 Tìm hiểu về Typescript ............................................................................................... 16
2.9 Tìm hiểu về ReactJS ................................................................................................... 16
3. Thực hiện project ............................................................................................................... 17

4. Lịch làm việc ..................................................................................................................... 19
Chương 3: Chi tiết về project .................................................................................................... 22
1. Giới thiệu về phần mềm Planning Poker ........................................................................... 22
3.1 Cách chơi planning poker. .......................................................................................... 22
3.2 Lý do xây dựng chương trình...................................................................................... 24
2. Thực hiện ........................................................................................................................... 24
3. Kế hoạch ............................................................................................................................ 24

Vũ Thái Anh

Phạm Phúc Nguyên


Trang |1
Chương 1: Giới thiệu cơng ty thực tập

Hình 1.1 Logo KMS Technology
1. Giới thiệu công ty KMS Technology
Được thành lập vào năm 2009, KMS Technology là công ty chuyên cung cấp các dịch
vụ phát triển sản phẩm phần mềm, tư vấn triển khai các giải pháp công nghệ và khởi
nghiệp. Sau hơn 12 năm hoạt động KMS đã xây dựng đội ngũ hơn 1000 nhân viên tại
Mỹ và Việt Nam, và phát hành 6 sản phẩm phần mềm trên thị trường thế giới.
KMS bao gồm:
• KMS Healthcare
• KMS Solution
• Các công ty product
1.1 KMS Health care
Phát triển các sản phẩm phần mềm hiện đại trong thị trường y tế một cách nhanh chóng
và hiệu quả.

Hình 1.2 Logo KMS Healthcare
Đội ngũ nhân viên có kiến thức về cả lập trình phát triển phần mềm lẫn y tế giúp việc
xây dựng các phần mềm lấy bệnh nhân làm đối tượng chính được phát triển một cách
hiệu quả hơn.
Cung cấp nhiều dịch vụ khác nhau như lưu trữ và bảo mật thông tin của bệnh nhân, xây
dựng phần mềm y tế trên ứng dụng di động, tư vấn về các dịch vụ trong ngành y tế, …
Vũ Thái Anh

Phạm Phúc Nguyên


Trang |2
Được các nhiều cơng ty tin tưởng như:
• Greenphire
• ThermoFisher Scientific
• Clario
• Clearwave
• Medidata
1.2 KMS Solution
KMS Solution tập trung vào các giải pháp phần mềm và các dịch vụ phía nhà bank.

Hình 1.3 Logo KMS Solution
Họ có trách nhiệm tư vấn về mặt công nghệ và các platform, phân tích data với mục
đích phát triển một hệ thống dịch vụ banking hiện đại. Cung cấp trải nghiệm tốt cho
khách hàng khi sử dụng các dịch vụ mua bán.
1.3 Các công ty product
Trong hơn 12 năm hoạt động KMS đã thành lập thành công 6 công ty product khác
nhau bao gồm Kobiton, Katalon, Grove, Visily, Kaypay
• QASymphony ( tách rời vào năm 2018 )

Vũ Thái Anh

Phạm Phúc Nguyên


Trang |3
2. Sản phẩm của cơng ty
Trong q trình phát triển của KMS, họ đã phát triển thành công nhiều sản phẩm như:
• Kobiton: Hệ thống kiểm thử các phần mềm di động, cung cấp tính năng kiểm thử
tự động hay manual trên các thiết bị di động thật và khơng sử dụng giả lập.

Hình 1.4 Kobiton logo
• Katalon: Một hệ thống kiểm thử sử dụng công nghệ AI giúp tạo các test case một
cách nhanh chóng và dễ dàng cho các trang web và mobile.

Hình 1.5 Katalon logo
• Grove: Hệ thống quản lý thông tin về human resource một cách nhanh chóng và
thuận tiện cho cả nhân viên và cơng ty.

Hình 1.6 Grove logo
• Visily: Trong web thiết kế UI được tạo ra cho những người không phải là designer
áp dụng cơng nghệ AI.

Hình 1.7 Visily logo
• Kaypay: Hệ thống thanh tốn một cách đơn giản và thuận tiện.

Hình 1.8 Kaypay logo

Vũ Thái Anh

Phạm Phúc Nguyên


Trang |4
Chương 2: Nội dung thực tập
Đợt thực tập trong công ty KMS đã giúp em học được nhiều kiến thức khác nhau về cả kỹ
năng mềm và kiến thức chun mơn. Trong q trình này em đã học được thêm các kiến thức
nâng cao về các công nghệ khác nhau được sử dụng để xây dựng trang web lẫn cả kiến thức
xây dựng hệ thống của một web api.
Sau q trình học tập các kiến thức chun mơn thì cơng ty cho intern áp dụng kiến thức đó
trên một sản phẩm của các bạn intern trước của công ty. Các task em nhận trong quá trình này
là fix bug của chương trình và refactor codes.
1. Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty
2.1 Thông tin về cơng ty:
Thời gian: 1 ngày
Nội dung:
• Nhận thiết bị làm việc của công ty bao gồm laptop và một số linh kiện khác, thiết
lập một khẩu và tài khoản cần thiết trên laptop.
• Được hướng dẫn nội quy của cơng và các quy trình thực hiện cơng việc trong q
trình thực tập. Hướng dẫn các cơng cụ mà cơng ty cung cấp để giúp q trình làm
việc được hiệu quả hơn.
• Được phổ cập các thơng tin về công ty từ lịch sử của công ty và quá trình phát triển
đến các mục tiêu và tầm nhìn của cơng ty.
• Hồn tất các thủ tục, ký các giấy tờ cần thiết và nhận thẻ nhân viên.
Kết quả: Có đầy đủ thiết bị để bắt đầu làm việc, nắm bắt được thông tin về các quyền lợi,
nội quy trong cơng ty, cơ cấu của cơng ty và quả trình phát triển của công ty.
2.2 Kỹ năng cơ bản trong cơng ty:
Thời gian: cả q trình thực tập
Nội dung: Tiếp thu được nhiều kỹ năng làm việc trong công ty bao gồm:
• Giao tiếp trong nhóm làm việc, mỗi ngày làm việc đều bắt đầu với việc báo cáo

công việc thực hiện hôm qua và lịch làm việc của hôm nay. Điều này đồng thời
giúp cải thiện tính kỷ luật và kích thích nhân viên cạnh tranh lành mạnh với nhau,
vì mỗi ngày ai cũng phải nói về cơng việc của mình trước tồn nhóm. Đồng thời có
nhiều kiến thức rất khó để tìm cần phải hỏi các anh trong công ty giúp cải thiện kỹ
năng giao tiếp đặt câu hỏi.

Vũ Thái Anh

Phạm Phúc Nguyên


Trang |5
• Kỹ năng quản lý thời gian, lên lịch các công việc cần làm trong ngày và trong tuần
để hoàn thành các tasks được giao. Trước khi làm việc trong cơng ty em khơng có
thói quen lên lịch cho các task, nhưng khi được mentor khuyên thì em bắt đầu sử
dụng google calendar và các việc quản lý công trở nên dễ dàng hơn.
• Kỹ năng ước lượng thời gian thực hiện cơng việc. Trong q trình thực tập trong
công ty, kỹ năng này của em được cải thiện qua thời gian. Tuy rằng vẫn còn nhiều
điểm cần cải thiện nhưng bây giờ ước lượng của em không sai lệch nhiều như trước.
• Kỹ năng giải quyết vấn đề, với công việc là tiếp tục phát triển project của các bạn
intern trước, có nhiều vấn đề được đặt ra và cần phải được giải quyết để cải thiện
sản phẩm.
Kết quả: Cải thiện được rất nhiều về kỹ năng mềm đặc biệt là kỹ năng giao tiếp vì có
nhiều kiến thức cần phải hỏi người khác trong nhóm. Học được các kỹ năng giúp cải thiện
quá trình làm việc, quản lý thời gian và task. Vận dụng được kỹ năng giải quyết vấn đề với
project thực tập.
2. Nghiên cứu kỹ thuật

Hình 2.1 Thời gian biểu để nghiên cứu
2.1 Tìm hiểu về C# nâng cao

Thời gian: 4 tuần
Nội dung: Bao gồm các kiến thức nâng cao hơn trong C# và ít được đề cập đến trong quá
trình lập trình nhưng cực kỳ quan trọng để xây dựng một chương trình hiệu quả.
• Phân biệt các phiên bản Dotnet và lý do đằng sau tên của nó.
o Phiên bản đầu tiên của Dotnet là .NET Framework và nó sẽ khơng được
Microsoft tiếp tục phát triển với phiên bản cuối là 4.8.
o Tiếp theo là .NET Core, đây là phiên bản sau và Microsoft tạo ra framework
này với mục đích phát triển phần mềm trên nhiều nền tảng khác nhau không
chỉ trên window, ở phiên bản này có nhiều tính năng bị loại bỏ do các tính
năng đó thường liên quan trực tiếp đến Winapi bên dưới và cần được thay
thế. Phiên bản cuối là 3.1.
o Tiếp đến là .NET 5 và trở về sau (hiện tại là 6) là .NET Core được đổi tên
lại và trở thành phiên bản chính của Dotnet. Các phiên bản này sẽ được sử

Vũ Thái Anh

Phạm Phúc Nguyên


Trang |6
dụng để xây dựng phần mềm trên các nền tảng OS thông dụng hiện tại
(Window, Linux, Mac).
o Cuối là .NET Standard, là phiên bản được update chậm nhất của Dotnet với
điểm mạnh là các chương trình được viết bằng framework này có thể được
compile bằng các framework khác.
• Kiến trúc hệ thống của Dotnet.

Hình 2.2 Hệ thống .NET
o Trong framework Dotnet, mỗi ngơn ngữ mà nó hỗ trợ đều được compile
thành CIL với compiler tương ứng của ngôn ngữ đó. Sau đó CIL này sẽ được

đưa vào CLR khi chương trình chạy sử dụng JIT để compile từ CIL thành
mã máy để chạy chương trình.
o Dotnet cịn hỗ trợ compile không kèm thư viện để phần mềm nhẹ nhưng cần
máy tính người dùng cài Dotnet hoặc cài kèm thư viện nhưng phần mềm sẽ
nặng hơn.
• Các chức năng mới của C# từ phiên bản 9 trở đi giúp cải thiện code C# dễ đọc hơn
và cải thiện hiệu suất. Đồng thời thêm các loại dữ liệu cụ thể hơn cho môi trường
yêu cầu hiệu suất cao, record để giúp việc code trở nên nhanh chóng hơn với các
tính năng cần phải implement khi sử dụng class hay struct.
• Phân biệt khi nào thì object trong Dotnet được lưu trên stack, khi nào thì trên heap
để cải thiện hiệu suất hệ thống.

Vũ Thái Anh

Phạm Phúc Nguyên


Trang |7
o Tất cả các Reference Types đều được lưu trên heap với pointer chỉ tới
Reference type đó được lưu trên stack.
o Tất cả các Value Types đều được lưu ở nơi mà scope của nó được lưu, nếu
nó nằm trong một function thì nó nằm trên stack nhưng nếu nó nằm trong
một biến lưu trên heap thì nó nằm trên heap. Nếu một value type chứa một
value type khác thì nếu value type cha nằm trên stack thì con nằm trên stack.
o Trong trường hợp ta typecast Value Types thành Object thì nó sẽ Clone value
type đó ra heap rồi tạo một pointer chỉ tới dữ liệu đó trên stack.
• Garbage Collector của .NET 6.

Hình 2.3 Cách hoạt động của GC
o Các dữ liệu nằm trên heap sẽ được GC dọn dẹp tùy theo generation của nó.

o Với Generation 0 là các object được dọn ngay lập tức, generation 1 là các
object sẽ sống lâu hơn scope của nó và generation 2 là các object tồn tại lâu,
thường là cả thời gian chạy chương trình.
o Khi bộ nhớ của một generation đầy thì GC sẽ được chạy để dọn dẹp, đánh
dấu các object tồn tại lâu hơn để chuyển sang generation tiếp theo.
o Sau khi dọn dẹp một generation thì GC sẽ compact các object cịn lại trên bộ
nhớ để tránh fragmentation.
Kết quả:
• Học được nhiều kiến thức quan trọng về C# để giúp xây dựng các chương trình với
năng suất cao.
• Tìm hiểu được các chức năng mới của ngôn ngữ C# để giúp cho code trở nên dễ
đọc và dễ hiểu hơn so với các đời trước của C#.

Vũ Thái Anh

Phạm Phúc Nguyên


Trang |8
• Học được các kiến thức liên quan đến Dotnet, về cách Dotnet quản lý bộ nhớ, thông
tin về Intermediate Language và các cấu trúc của Dotnet Compiler với nhiều cách
compile khác nhau
2.2 Tìm hiểu sâu về OOP

Hình 2.4 OOP
Thời gian: 1 tuần
Nội dung: Tìm hiểu các kiến thức liên quan đến design patterns, SOLID, các thói quen
xấu khi lập trình OOP.
• SOLID: Nó là từ viết tắt từ năm nguyên tắc bao gồm single responsibility,
Open/closed, Liskov substitution, Interface segregation, Dependency inversion.

Các nguyên tắc này được sử dụng để tránh các vấn để thường gặp phải khi sử dụng
OOP và trong tương lai có thể trở thành spaghetti code.
• Design pattern: Là các pattern được tạo ra bởi những lập trình viên đi trước và ta
có thể sử dụng mà không cần phải tạo lại cái pattern. Các pattern này giải quyết các
vấn đề của OOP và tuân theo SOLID nên khi ta áp dụng đúng, các pattern này sẽ
giúp code gọn và có thể phát triển một cách dễ dàng trong tương lai.
Kết quả:
• Nắm được các kiến thức sâu hơn về OOP để có thể viết code hiệu quả hơn.
• Hiểu được kiến thức SOLID và áp dụng nó vào q trình làm việc.
• Học các design pattern với ví dụ thực tế trong project.

Vũ Thái Anh

Phạm Phúc Nguyên


Trang |9
2.3 Tìm hiểu về EF Core

Hình 2.5 EF Core logo
Thời gian: 1 tuần
Nội dung: Tìm hiểu về cơng nghệ EF Core (cho .Net 6) để giúp việc lưu trữ thông tin và
tương tác với database từ C# thực hiện một cách thuận tiện hơn viết các câu lệnh query
thường.
• Các package cần cài:
o EF Core runtime tương ứng với database cần liên kết với.
o EF Core tools để cung cấp các lệnh cần thiết để quản lý database.
• Migration: Với migration, người lập trình có thể thiết kế database với C# và gọi
lệnh trong CLI thì EF Core sẽ tạo ra các câu lệnh SQL tương ứng để tạo ra được
database phù hợp với các table tương ứng. Người lập trình có thể khai báo quan hệ

giữa các bảng với OOP mà khơng cần phải đụng vào SQL, có thể khai báo các field
bằng object.
• Model: Là một lớp chứa thơng tin để EF Core có thể map nó với các bảng trong
database. Một model là một dòng trong database và một DbSet là một bảng, mỗi
field trong model sẽ có các quy định cụ thể để xác định cách map nó với field của
một dịng trong database. Ta có thể dùng Fluent API hoặc Attribute để cung cấp
thơng tin nếu ta muốn nó hoạt động khác mặc định.
• DbContext: Đại diện cho database ở runtime, mọi thứ đều được làm thông qua
context sử dụng Builder pattern hoặc LINQ. Trong trường hợp xây dựng database
sử dụng code first thì DbContext sẽ chứa các DbSet, mỗi DbSet là một table.
• Lazy vs Eager loading: Để nâng cao hiệu quả của các câu lệnh truy vấn, tất cả câu
lệnh truy vấn trong EF Core đều là Explicit loading vì eager loading tạo ra quá
nhiều vấn đề trong phiên bản trước. Với explicit loading thì các câu lệnh truy vấn
trả về data khi hồn thành mà khơng cần phải query lại mỗi lần cần sử dụng.

Vũ Thái Anh

Phạm Phúc Nguyên


T r a n g | 10
• Query: Có nhiều q trình xử lý chỉ có C# mới có thể làm được cịn SQL thì khơng
nên khi ta truy vấn sử dụng EF Core, các câu lệnh C# sẽ được dịch ra SQL rồi truy
vấn trên database. Trong trường hợp khơng có thể dịch ra SQL được thì phần trước
đó sẽ được gửi đến database, lấy thông tin cần, đưa lên C# để chạy trên xử lý rồi từ
thông tin đó dịch ra SQL phần cịn lại rồi gửi về database để có được thơng tin cuối
cùng. Vấn đề này cực kỳ quan trọng trong việc viết các câu lệnh truy vấn một cách
hiệu quả.
• Fluent API: Sử dụng builder pattern để xây dựng database thay vì attribute, Fluent
API thường được sử dụng nhiều hơn attribute vì nó dễ đọc hơn attribute và khơng

làm rối model.
• LINQ: Là ngơn ngữ truy vấn tích hợp, nó có cú pháp gần giống với sql và tiếng anh.
Sử dụng Linq ta có thể viết code truy vấn database gần giống với sql nhưng hoạt
động với object thay vì bảng nên rất dễ hình dung. Nhưng không chỉ với database,
bất kỳ dữ liệu nào có implement IEnumerable đều có thể dùng Linq.
Kết quả:
• Có thể sử dụng được LINQ một cách hiệu quả cho các câu lệnh truy vấn.
• Học được cách integrate EF Core vào hệ thống.
• Biết sử dụng nhiều cách khác nhau để quản lý thông tin tạo ra từ EF Core.
• Hiểu được quy tắc hoạt động bên dưới của EF Core.
2.4 Tìm hiểu về Web API

Hình 2.6 Web api
Thời gian: 1 tuần
Nội dung: Tìm hiểu về khái niệm của web api và thiết kế kiến trúc của nó với REST.
• REST: Được đề xuất vào năm 2000, được sử dụng để thay thế HTTP thuần, Rest có
thể sử dụng Http hay bất kỳ một phương thức giao tiếp nào bên dưới nhưng cuối
cùng nó cũng sẽ tuân theo các quy tắc được đặt ra mà mọi người đã đồng ý. Thay

Vũ Thái Anh

Phạm Phúc Nguyên


T r a n g | 11
vì mỗi nhà cung cấp api có một cách thiết kế riêng thì client chỉ cần biết rest là có
thể hiểu được cấu trúc của api. Rest giúp nhà cung cấp api nâng cấp api một cách
dễ dàng kể cả khi có client sử dụng với versioning.
• Web API: Cung cấp dịch vụ qua mạng, ẩn đi các implementation bên dưới giống
như một api thông thường. Các api này sẽ giao tiếp với chương trình của mình qua

các giao thức khác nhau theo một phương thức cụ thể. Hai phương thức thường
được dùng bây giờ là REST và GraphQL.
• End points: Trong REST các endpoint được thiết kế theo một quy tắc rõ ràng giúp
bất kỳ người nào sử dụng api có thể nắm bắt được cách sử dụng một cách nhanh
chóng. Tên gọi của endpoints trong rest được thiết kế sát với data mà endpoint đó
muốn tương tác, với tên của path trong endpoint là tên của collection, id, trường
thông tin, tương tác với thông tin…
o Get dùng cho truy vấn dữ liệu.
o Post dùng tạo dữ liệu.
o Put dùng để cập nhật dữ liệu (thay thế tất cả các field của dữ liệu).
o Delete dùng để xóa dữ liệu.
o Patch dùng để cập nhật một phần trong dữ liệu, thường sử dụng Json Patch
Document.
Kết quả:
• Hiểu được REST là gì và các vấn đề mà rest cần giải quyết.
• Hiểu được Web API một cách chung.
• Biết cách thiết kế các endpoints trong rest một cách bài bản.
2.5 Tìm hiểu về MVC ASP.NET CORE
Thời gian: 1 tuần
Nội dung: Tìm hiểu các kiến thức về MVC ASP.NET CORE.
• MVC: là viết tắt của cụm từ “Model-View-Controller“. Đây là mơ hình thiết kế
được sử dụng trong kỹ thuật phần mềm. MVC là một mẫu kiến trúc phần mềm để
tạo lập giao diện người dùng trên máy tính. MVC chia thành ba phần được kết nối
với nhau và mỗi thành phần đều có một nhiệm vụ riêng của nó và độc lập với các
thành phần khác. Tên gọi 3 thành phần:

Vũ Thái Anh

o

Model (dữ liệu): Quản lí xử lí các dữ liệu.

o

View (giao diện): Nới hiển thị dữ liệu cho người dùng.
Phạm Phúc Nguyên


T r a n g | 12
o

Controller (bộ điều khiển): Điều khiển sự tương tác của hai thành phần
Model và View.

Hình 2.7 Mơ hình MVC
• Html và C#: Trong MVC thay vì sử dụng JS và Html như các framework khác thì
C# được sử dụng để thay thế javascript. Ta có thể tương tác với các dữ liệu của C#
và gọi các hàm của C# trong file cshtml để thiết kế UI. Ngồi ra cshtml cịn hoạt
động với CSS như một trang web thông thường để giúp ta thiết kế một trang web
đẹp hơn.
• Cấu trúc của project: Trong MVC vị trí của file và tên folder rất quan trọng, khi
làm việc với MVC ta phải nắm được các quy tắc này để có thể xây dựng được trang
web. Trong trường ta đặt sai vị trí hoặc đặt tên file sai quy tắc thì sẽ có thể dẫn tới
lỗi như khơng áp dụng style hay khi compile thì style rỗng.
Kết quả:
• Biết thiết kế một trang web hồn chỉnh sử dụng C#.
• Hiểu được MVC pattern.
• Học được các kiến thức liên quan đến ASP.NET để xây dựng server mà khơng dùng
MVC làm frontend.
2.6 Tìm hiểu về TDD (Test driven development)

Thời gian: 1 tuần
Nội dung: Nắm bắt thông tin qua buổi thuyết trình về TDD cho các bạn intern và tự đọc
tài liệu thêm.
• Nội dung của TDD:
o TDD đặt năng việc viết unit test trước khi viết code. Quá trình viết code sử
dụng TDD được chia thành từng bước lặp lại nhiều lần.

Vũ Thái Anh

Phạm Phúc Nguyên


T r a n g | 13
o Các lập trình viên sẽ bắt đầu bằng cách viết test case với yêu cầu của chương
trình và chỉnh sửa code dần để các test case đúng.
o TDD bao gồm 3 giai đoạn, thiết kế test case, sửa code và refactor code như
mô hình bên dưới.

Hình 2.8 Quy trình thực hiện TDD
• Ứng dụng của TDD:
o Giúp người lập trình hình dung và xây dựng chương trình sát với yêu cầu
của client.
o Giúp codebase trở nên dễ quản lý hơn.
o Khi hoàn thành chương trình thì ta có ln cả testcase giúp việc xây dựng
thêm tính năng trong tương lai dễ dàng hơn.
o Bởi vì việc thiết kế gắn chặt với việc viết test nên thông thường test coverage
khi áp dụng TDD sẽ cao hơn so với viết test như bình thường.
• Cơng cụ kiểm thử C#: Microsoft cung cấp 3 công cụ kiểm thử chính là xUnit, NUnit
và MSUnit.
o NUnit được port từ JUnit, là một open-source testing framework nổi tiếng

trên nuget hỗ trợ nhiều phiên bản của Dotnet framework.

Vũ Thái Anh

Phạm Phúc Nguyên


T r a n g | 14
o xUnit cũng là một open-source testing framework được tạo ra bởi người viết
ra NUnit. Thay vì thêm các tính năng lên NUnit qua mỗi đợt update thì họ
muốn tạo ra một framework tốt hơn từ đầu.
o MSUnit là một testing framework được ship cùng visual studio và opensource từ phiên bản 2.
Kết quả:
• Hiểu được quá trình xây dựng chương trình sử dụng TDD.
• Học được các cơng cụ kiểm thử của C#.
• Áp dụng nó vào một trang web demo nhỏ.
2.7 Tìm hiểu về GraphQL
Thời gian: 1 tuần
Nội dung: Trong quá trình tìm hiểu về GraphQL em đã học được rất nhiều kiến thức mới
về cơng nghệ thú vị này.
• GraphQL: Là một ngôn ngữ thao tác truy vấn dữ liệu được facebook phát triển nội
bộ vào năm 2012 và công khai vào năm 2015. Điểm đặc trưng của công nghệ này
là nó giúp client query dữ liệu với một request gần giống với dữ liệu được trả về.
Điều này giúp client chủ động được dữ liệu mình muốn query với lượng thông tin
cần vừa đủ. Trong GraphQL ta định dạng cách truy vấn dữ liệu theo các field và
resolver, resolver là một function trả về dữ liệu cần thiết mỗi khi field đi với resolver
đó được u cầu.

Hình 2.9 Mơ hình GraphQL

Vũ Thái Anh

Phạm Phúc Nguyên


T r a n g | 15
• GraphQL so với REST: GraphQL giải quyết một số vấn đề mà rest thương hay mắc
phải do trong REST, khi ta gọi tới một endpoint thì dữ liệu trả về sẽ tùy theo người
thiết kế API cịn trong GraphQL thì phụ thuộc vào client. Các vấn đề như:
o Over fetching: Dữ liệu trả về dư thừa không cần thiết, như ta chỉ cần tên
người dùng nhưng để lấy được thơng tin đó RESTapi sẽ trả về tất cả thông
tin đi kèm khác.
o Under fetching: Ngược lại thì khi api trả về khơng đủ thông tin, ta lại phải
gửi một yêu cầu khác tới một endpoint khác để lấy được thơng cịn lại tạo ra
nhiều round trip.
• Hot Chocolate: Là một GraphQL server cho .NET, nó giúp việc xây dựng một
GraphQL Api trở nên nhanh chóng và thuận tiện. Với GraphQL thơng thường thì
ta phải học thêm một ngơn ngữ rồi phải tìm cách cho nó hoạt động với object trong
ngơn ngữ mình đang sử dụng. Hot Chocolate làm việc đó giúp mình và cung cấp 3
cách khác nhau để có thể sử dụng GraphQL trong api. Hot Chocolate cung cấp sẵn
một IDE để test api của mình tên là BananaCakePop ngay khi cài đặt, việc này giúp
ta kiểm tra code một cách nhanh chóng.
• Hot Chocolate và EF Core: EF Core đảm bảo tính đúng đắn bằng cách giới hạn
DbContext cho một thread, nhưng GraphQL lại sử dụng multithread để có thể tra
cứu thơng tin một cách nhanh chóng cho từng field. Đây là một vấn đề có thể giải
quyết bằng cách áp dụng DbContextFactory để tạo ra context cho mỗi thread khi
cần để không xảy ra lỗi. Việc này quan trọng nếu như ta sử dụng explicit loading,
khi này chỉ khi client yêu cầu các collections thì ta mới sử dụng EF Core để query
các collections tương ứng, giảm thiểu việc query quá nhiều data cũng một lúc.
Kết quả:

• Hiểu và áp dụng được GraphQL và một trang web bán cà phê nhỏ.
• Biết thêm được một phương thức thay thế cho REST.
• Biết cách sử dụng GraphQL .NET và Hot Chocolate với C#.

Vũ Thái Anh

Phạm Phúc Nguyên


T r a n g | 16
2.8 Tìm hiểu về Typescript

Hình 2.10 Logo typescript
Thời gian: 1 tuần
Nội dung:
• Học Typescript: Học cách sử dụng typescript và làm quen với dynamic types trong
javascript.
• Functional Programming: Khác với OOP, first class citizen của Function
Programming là function. Ta không thiết kế hệ thống quay quanh các object mà ta
thiết kế hệ thống dựa trên việc kết hợp các function nhỏ hơn để xây dựng một
function lớn hơn. Thay vì ta viết ra các bước để thực hiện code như trong OOP thì
ta viết ra các statement và expression sử dụng function nhỏ hơn, việc này khiến
code trở nên rõ ràng và module hóa.
• Typescript và Javascript: Typescript thêm các syntax vào javascript để giúp xử lý
các lỗi từ quá trình viết code và compile mà không cần phải đợi đến runtime như
javascript. Khi ta viết Typescript thì cuối cùng nó cũng được dịch ra javascript rồi
chạy trên trang web nên typescript và javascript là giống nhau.
Kết quả:
• Sử dụng được typescript.
• Hiểu được Functional programming.

2.9 Tìm hiểu về ReactJS

Hình 2.11 Logo ReactJS
Thời gian: 1 tuần
Nội dung:
Vũ Thái Anh

Phạm Phúc Nguyên


T r a n g | 17
• ReactJS: là một thư viện opensource được phát triển bởi Facebook, ra mắt vào năm
2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương
tác với các thành phần trên website. Để code một website sử dụng Javascript thuần
và JQuery có rất nhiều rủi ro có thể xảy ra cho nên khi ReactJS ra đời nó trở nên rất
nổi tiếng. Giờ đây những người lập trình web có thể thiết kế trang web và xử lý
tương tác của người dùng một cách đơn giản và nhanh chóng.
• Functional Components: Được sử dụng nhiều hơn rất nhiều so với class bởi
Functional Components loại bỏ sự phức tạp của class trong Javascript, thay vì ta
phải quan tâm tới this là gì trong function đó thì ta có một cái gì đó cụ thể hơn và
nằm gọn trong scope của function. Mặt khác function component không hề thua
kém về mặt tính năng so với class bởi chính tính năng sử dụng Hooks, việc này giúp
đảm bảo về mặt tính năng nhưng tránh sử dụng class. Một điểm mạnh khác là khi
ta sử dụng functional component nó là một function và trả về một JSX.Element,
việc này giúp project của ta đồng một từ trên xuống dưới là Functional
Programming với cả các thành phần của trang web được đại diện bằng functions và
các functions này hợp lại để xây dựng một trang web lớn.
• JSX: JSX (JavaScript extension) là một React extension giúp chúng ta dễ dàng thay
đổi cây DOM bằng các HTML-style code đơn giản. Và kể từ lúc ReactJS browser
hỗ trợ tồn bộ những trình duyệt Web hiện đại, ta có thể tự tin sử dụng JSX trên bất

kỳ trình duyệt nào. Thay vì phải khai báo các component trên trang web một cách
dài dịng thì ta có thể sử dụng JSX để khai báo một cách gọn gàng mà cịn quen
thuộc bởi gần giống với HTML.
• Virtual DOM: Thay vì thay đổi thơng tin trên DOM thiệt ngay khi có thay đổi,
ReactJS sẽ cập nhật thơng tin lên virtual DOM trước, sau khi cập nhật hết thơng tin
xong thì ReactJS sẽ cập nhật DOM thiệt với tất cả thông tin thay đổi cùng một lúc
để cải thiện tốc độ.
Kết quả:
• Áp dụng ReactJS vào xây dựng UI cho trang web bán cà phê.
• Hiểu được các thành phần bên dưới của ReactJS.
• Làm quen với cơng cụ NodeJS.
3. Thực hiện project
Sau khoảng thời gian training 2 tháng với nhiều project nhỏ hơn để vừa học vừa áp dụng
kiến thức mới thì các intern sẽ tiếp tục làm việc với một phần mềm được xây dựng bằng

Vũ Thái Anh

Phạm Phúc Nguyên


T r a n g | 18
Javascript + ReactJS cho frontend và ASP.Net + GraphQL + EF Core + MySQL cho
backend. Thời gian thực hiện project này là 4 tuần.
Chi tiết đồ án sẽ được nói ở phần sau.

Vũ Thái Anh

Phạm Phúc Nguyên

T r a n g | 19
4. Lịch làm việc
Tuần

Công việc
-

-

1

-

2
-

3

-

4
-

Vũ Thái Anh

Tìm hiểu về cơng
ty, cách tổ chức của
cơng ty.
Làm quen với các
công cụ làm việc

trong công ty.
Học cách trao đổi
thông tin qua Skype
Học về SOLID
Học các kiến thức
về C# 9.0 trở về
sau.
Làm slide thuyết
trình OOP
Học về EF Core.
Học về cách .Net
hoạt động và các
thành phần khác
nhau của .Net.
Làm slide thuyết
trình EF Core.
Học về WebAPI
Học về GC của
.Net và phiên bản
khác nhau của .Net
Làm Slide thuyết
trình Web API.
Xây dựng backend
áp dụng EF Core
cho trang web bán
café để demo.
Học về cách .Net
lưu trữ thông tin
trên Heap và Stack.
Học cách sử dụng

MVC ASP.Net core

Người hướng dẫn

Mức
độ
hoàn
thành

Nhận xét của người
hướng dẫn

Anh Vũ Thái Anh

Anh Vũ Thái Anh

Anh Vũ Thái Anh

Anh Vũ Thái Anh

Phạm Phúc Nguyên