Báo cáo thực tập lập trình sản phẩm coin

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 SẢN PHẨM COIN

Cơng ty thực tập: Công ty Cổ phần Công nghệ GEEK Up
Thực tập sinh: Đinh Trần Văn Minh

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


LỜI MỞ ĐẦU
Kinh tế và xã hội phát triển không ngừng, cơng nghệ thơng tin đã khẳng định được
vai trị của mình với các đóng góp tích cực hỗ trợ cho quá trình sản xuất và sinh hoạt hằng
ngày. Và lập trình ứng dụng web cũng nằm trong số đó.
Với sự phát triển khơng ngừng, lập trình web đã trở nên cần thiết đối với các cá
nhân, tổ chức, doanh nghiệp, giúp cho họ số hóa các sản phẩm của mình và gia tăng khả
năng tiếp cận tới thị trường mong muốn.
Sau khoảng thời gian trau dồi, học tập kiến thức trên ghế nhà trường, với mong
muốn được bước chân vào môi trường doanh nghiệp, tiếp xúc với các kinh nghiệm và quy
trình làm việc thực tế, em đã quyết định tìm kiếm một nơi phù hợp để thực tập. Sau khoảng
thời gian cân nhắc, em đã tham gia vào đội ngũ nhân sự của Công ty Cổ phần Công nghệ
GEEK Up – một doanh nghiệp trẻ, đầy năng động và chuyên nghiệp, luôn tạo cơ hội cho
các bạn trẻ như em học tập và thử sức.

SINH VIÊN ĐINH TRẦN VĂN MINH

1

LỜI CẢM ƠN
Em xin chân thành cảm ơn quý thầy cô trong khoa Công nghệ Phần mềm, trường
Đại học Công nghệ Thơng tin. Trong suốt q trình em học tập tại trường, các thầy cơ trong
khoa nói chung và các thầy cơ trực tiếp giảng dạy em nói riêng, đã tận tình truyền đạt những
kiến thức quý báu cả về chuyên ngành lẫn các kiến thức xã hội. Nhờ đó, mà em được trang
bị các kỹ năng, kiên thức về kỹ thuật và công nghệ phù hợp với xã hội. Và đây cũng là
hành trang cơ bản để em sẵn sàng trên con đường sắp tới, bước đầu tiên là đợt Thực tập
doanh nghiệp lần này.
Em xin cảm ơn quý cơng ty, nơi mà em vừa hồn thành kế hoạch thực tập – Công
ty Cổ phần Công nghệ GEEK Up, cùng các anh chị trong nhân viên đã trực tiếp hướng dẫn,
chỉ bảo em nhiệt tình. Ở đây, em học hỏi được rất nhiều kinh nghiệm thực tiễn khi được
trải nghiệm một phần của dự án thực tế. Đặc biệt, em xin gửi lời cảm ơn chân thành đến 2
anh cố vấn team – anh Nguyễn Ngọc Anh Tuấn và anh Huỳnh Anh Khoa, đã hướng dẫn
em trong suốt quá trình thực tập vừa rồi.
Bên cạnh đó, em cũng xin gửi lời cảm ơn đến gia đình và bạn bè, những người ln
bên cạnh cổ vũ để em hồn thành tốt lần thực tập này.
Đinh Trần Văn Minh
Tp. Hồ Chí Minh, ngày 21 tháng 12 năm 2022

SINH VIÊN ĐINH TRẦN VĂN MINH

2


NHẬN XÉT CỦA KHOA

SINH VIÊN ĐINH TRẦN VĂN MINH

3

MỤC LỤC

MỤC LỤC ..........................................................................................................................4
PHỤ LỤC HÌNH ẢNH ......................................................................................................5
NỘI DUNG .........................................................................................................................6
Chương 1: Giới thiệu công ty thực tập ............................................................................6
1.

Giới thiệu Công ty Cổ phần Công nghệ GEEK Up ....................................................... 6

2.

Sản phẩm của công ty .................................................................................................... 7

Chương 2: Nội dung thực tập ........................................................................................11
1.

Tìm hiểu cơng ty và các kĩ năng cơ bản trong công ty ................................................ 11

2.

Nghiên cứu kỹ thuật ..................................................................................................... 12

3.

Thực hiện dự án ........................................................................................................... 28

4.

Lịch làm việc ................................................................................................................ 28

Chương 3: Chi tiết về dự án ...........................................................................................33
1.

Tổng quan về dự án COIN ........................................................................................... 33

2.

Các chức năng chính của COIN .................................................................................. 34

3.

Thực hiện ..................................................................................................................... 36

TỔNG KẾT ......................................................................................................................37
1.

Kết quả thu được ......................................................................................................... 37

2.

Điểm yếu của bản thân ................................................................................................ 37

3.

Cảm nhận về công ty ................................................................................................... 37

TÀI LIỆU THAM KHẢO ...............................................................................................39

SINH VIÊN ĐINH TRẦN VĂN MINH

4


PHỤ LỤC HÌNH ẢNH
Hình 1 – Logo Cơng ty Cổ phần Cơng nghệ GEEK Up......................................................7
Hình 2 – Sản phẩm Funding Societíe ..................................................................................8
Hình 3 – Sản phẩm Waitrr ...................................................................................................9
Hình 4 – Sản phẩm Hmlet ...................................................................................................9
Hình 5 – Sản phẩm TPBank ..............................................................................................10
Hình 6 - Quy trình Agile ....................................................................................................12
Hình 7 - Cơng cụ Git .........................................................................................................15
Hình 8 - Sơ đồ mơ hình của Gitt ........................................................................................16
Hình 9 - Sơ đồ cấu trúc nhánh của Gitt .............................................................................17
Hình 10 - NodeJS...............................................................................................................18
Hình 11 – ReactJS .............................................................................................................19
Hình 12 - Vịng đời trong ReacJs ......................................................................................21
Hình 13 - Luồng dữ liệu trong Redux................................................................................23
Hình 14 - Luồng dữ liệu trong Redux-Saga ......................................................................24
Hình 15 - Ant Design .........................................................................................................24
Hình 16 - RESTful API .....................................................................................................25
Hình 17 - NestJS ................................................................................................................27

SINH VIÊN ĐINH TRẦN VĂN MINH

5

NỘI DUNG
Chương 1: Giới thiệu công ty thực tập
1. Giới thiệu Công ty Cổ phần Công nghệ GEEK Up
-

Tên đơn vị: Công ty Cổ phần Công nghệ Geek Up (GEEK UP TECHNOLOGY
JSC).

-

Lĩnh vực hoạt động: Xuất bản phần mềm

-

Địa chỉ:
o Văn phòng: 244/31 Huỳnh Văn Bánh, Phường 11, Quận Phú Nhuận,
TP.HCM
o Chi nhánh: 27B/9 Nguyễn Đình Chiểu, Phường Đa Kao, Quận 1,
TP.HCM

-

Thời gian làm việc: Thứ 2 đến thứ 6 (8h30 – 17h30).

-

Slogan: “Insightful development”.

-

Sứ mệnh: Xây dựng các sản phẩm phần mềm mang lại nhiều giá trị cho người
dùng.

-

Giá trị cốt lõi:
o Honesty: Sống hết mình với đam mê, là chính mình và phấn đấu hướng
tới những giá trị chung.
o Geeks Get It Done: Ln cố gắng hồn thành công việc đạt kết quả mong
đợi.
o High Standard: Luôn thử thách bản thân để nâng cao trình độ chun
mơn.
o Stay Hungry Stay Foolish: Không dừng lại với khả năng hiện tại, luôn
tiếp tục trau dồi và học hỏi.

-

GEEK Up là công ty tư vấn, cung cấp xây dựng các sản phẩm công nghệ phần
mềm tối ưu nhất cho cộng đồng, doanh nghiệp và cá nhân. Đối tác của công ty
bao quát từ các công ty khởi nghiệp cho đến các doanh nghiệp lớn.

SINH VIÊN ĐINH TRẦN VĂN MINH

6


-

Mục tiêu của công ty là tạo ra những giá trị tích cực cũng như những sản phẩm
đẳng cấp phù hợp với các tiêu chuẩn quốc tế. GEEK Up không ngừng gia tăng

giá trị cộng đồng bằng khả năng cung cấp cho khách hàng những sản phẩm và
dịch vụ chất lượng cao nhất trong các lĩnh vực phát triển phần mềm. Công ty sẽ
phát triển và cung cấp phần mềm đúng thời gian, trong phạm vi ngân sách và
chất lượng cao nhất đem đến cho khách hàng sự hài lòng tuyệt đối, lợi nhuận tối
đa, sự phát triển mạnh mẽ của thương hiệu sản phẩm.

-

Nắm bắt nhu cầu và thường xuyên cập nhật xu hướng trong ngành, mỗi một
thành viên của công ty luôn không ngừng nâng cao khả năng của bản thân để
mang đến giá trị tích cực cho khách hàng.

-

Thông tin liên hệ của công ty:
o Website: />o Địa chỉ email:
o Số điện thoại: +84 28 6262 4400

Hình 1 – Logo Cơng ty Cổ phần Cơng nghệ GEEK Up

2. Sản phẩm của công ty
-

GEEK Up đã và đang là đối tác của nhiều công ty nổi tiếng từ nhỏ đến lớn, cả
trong và ngoài nước như:
o Funding Societies (Indonesia): Được thành lập năm 2015, Funding
Societies là nền tảng tài chính số có sứ mệnh kết nối nhà đầu tư với các
doanh nghiệp vừa và nhỏ có nhu cầu vay vốn dưới 1 triệu USD. Khi
Funding Societies tìm đến giải pháp cơng nghệ để tăng cường tính hiệu
quả trong hoạt động vận hành trong cuộc cách mạng 4.0 đã gặp nhiều vấn

SINH VIÊN ĐINH TRẦN VĂN MINH

7


đề. Tháng 7/2019, Funding Societies quyết định hợp tác với GEEK Up
để cải thiện những bất cập trong hệ thống vận hành của mình.
Link sản phẩm: />
Hình 2 – Sản phẩm Funding Societíe

o Waitrr (Singapore): Là nền tảng đặt hàng và thanh toán trong thị trường
ẩm thực giúp kết nối khách hàng với các nhà hàng. Khi đang trong quá
trình gọi vốn và chưa có đội ngũ cơng nghệ riêng, Waitrr đã chọn cách
tiếp cận tinh gọn khi bắt tay với GEEK Up – một đối tác xây dựng sản
phẩm tin cậy thay vì tự xây dựng nền tảng để đội ngũ nịng cốt có thể tập
trung phát triển ý tưởng.
Link sản phẩm: />
SINH VIÊN ĐINH TRẦN VĂN MINH

8


Hình 3 – Sản phẩm Waitrr

o Hmlet (Singapore): Ra đời tại Singapore vào năm 2016 với ý tưởng kết
nối người thuê và chủ nhà (co-living), Hmlet đã kết nối nhu cầu của hàng
nghìn khách hàng và liên tục mở rộng đến các thị trường trong khu vực
như Hong Kong (2018), Sydney (2019), Tokyo (2019). Hmlet hiện đang
tiếp tục bắt tay với GEEK Up trong dự án nhằm tối ưu hóa trải nghiệm

người dùng và cải thiện hiệu quả vận hành của doanh nghiệp.
Link sản phẩm: />
Hình 4 – Sản phẩm Hmlet

SINH VIÊN ĐINH TRẦN VĂN MINH

9


o TPBank (Vietnam): Vào năm 2018, nhóm giải pháp tài chính số của
TPBank đã phát triển 15 ứng dụng hoạt động đơn lẻ phục vụ nhiều mục
tiêu tài chính của những nhóm người khác nhau. Tuy nhiên, sự thiếu đồng
bộ, nhất quán giữa các ứng dụng đã cản trở người dùng tận hưởng giá trị
của hệ sinh thái ứng dụng TPBank. Với mục tiêu khắc phục nhược điểm
đó, TPBank đã bắt tay với GEEK Up để tạo ra trải nghiệm đồng nhất trên
hệ sinh thái ứng dụng của mình thơng qua hệ thống quy chuẩn thiết kế
chung.
Link sản phẩm: />
Hình 5 – Sản phẩm TPBank

o …

SINH VIÊN ĐINH TRẦN VĂN MINH

10


Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Xây dựng sản phẩm COIN” với mục tiêu xây dựng sản
phẩm Web cả về client và server, giúp đào tạo sinh viên thực tập tồn diện về lập trình sản

phẩm Web. Đồng thời, rèn lueyenj những kỹ năng mềm như làm việc nhóm, thuyết trình,
giao tiếp. Tại GEEK Up, sinh viên có cơ hội khám phá mơi trường phát triển sản phẩm số
chuyên nghiệp. Đặc biệt, sinh viên còn được tiếp cận với quy trình xây dựng sản phẩm
(Product Development) và văn hóa làm việc năng động, sáng tạo.
1. Tìm hiểu cơng ty và các kĩ năng cơ bản trong công ty
-

Thời gian: 3 ngày.

-

Nội dung: Giới thiệu về công ty, cách tổ chức của công ty.
o Được nghe người phụ trách giới thiệu về cơng ty, q trình thành lập và

phát triển, quy trình làm việc để deliver một sản phẩm, cách thức tổ chức
của công ty, tinh thần của mọi người trong công ty Geek Up, các vị trí
hiện tại trong cơng ty, cách mọi người trong cơng ty làm việc với nhau,…
o Ngồi ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong

công ty như thời gian đi làm, các quy định cần phải tuân thủ, các bước
cần thực hiện trước khi bắt đầu vào làm, trong quá trình làm việc và khi
kết thúc một ngày làm việc.
o Tìm hiểu về các cơng cụ sẽ được sử dụng trong q trình làm việc. Cũng

trong thời gian này, các anh chị hướng dẫn thực tập sinh tìm hiểu các
cơng cụ phục vụ cho từng mục đích cụ thể khi làm việc. Hầu hết các công
cụ đều là sản phẩm lưu hành nội bộ cơng ty, ngồi ra cịn có các ứng dụng,
phần mềm hỗ trợ như Google Meet – phục vụ cho mục đích gặp và trao
đổi bối cảnh các thành viên khơng có khả năng tham gia trực tiếp tại địa
điểm làm việc.

-

Kết quả: Hiểu thêm về công ty Geek Up, quá trình thành lập và phát triển cho
đến hiện tại. Cách vận hành trong công ty, cách phối hợp với nhau giữa các thành

SINH VIÊN ĐINH TRẦN VĂN MINH

11


viên. Có thêm các kỹ năng về việc quản lý dự án, tinh thần trách nhiệm, kỹ năng
giao tiếp qua các công cụ do công ty cung cấp.
2. Nghiên cứu kỹ thuật
2.1. Quy trình Agile

Hình 6 - Quy trình Agile

-

Thời gian: 2 ngày song song với thực hành trong suốt quá trình thực tập.

-

Nội dung: Được training về các kiến thức chung và tìm hiểu về việc áp dụng mơ
hình vào quy trình làm việc nhóm trong q trình thực tập. Đây là mơ hình làm
việc mà cơng ty GEEK Up đã sử dụng trong mọi dự án của công ty.
o Khái niệm Agile (viết tắt của Agile Software Development) có nghĩa là

phương thức phát triển phần mềm linh hoạt, được ứng dụng trong quy
trình phát triển phần mềm với mục tiêu là đưa sản phẩm đến tay người

dùng càng nhanh càng tốt.
o Rất nhiều nơi định nghĩa Agile như một phương pháp. Thực chất, Agile

giống như một phương pháp luận, một triết lý dựa trên hơn nguyên tắc
phân đoạn vòng lặp (iterative) và tăng trưởng (incremental).
o Ngày nay, triết lí Agile đã vượt xa khỏi khu vực truyền thống của mình

là phát triển phần mềm để đóng góp sự thay đổi trong cách thức làm việc,
quản lí, sản xuất ở các ngành khác như sản xuất, dịch vụ, sales, marketing,
SINH VIÊN ĐINH TRẦN VĂN MINH

12


giáo dục... và trở thành một phương thức quản lý dự án phổ biến nhất hiện
nay với nhiều đại diện được gọi là các phương pháp “họ Agile”.
o 4 tôn chỉ cần tuân thủ trong phương pháp Agile:

▪ Individuals and interactions over processes and tools: Cá nhân
và sự tương tác hơn là quy trình và cơng cụ
▪ Working software over comprehensive documentation: Phần
mềm chạy tốt hơn là tài liệu đầy đủ
▪ Customer collaboration over contract negotiation: Cộng tác với
khách hàng hơn là đàm phán hợp đồng
▪ Responding to change over following a plan: Phản hồi với sự thay
đổi hơn là bám theo kế hoạch
o 12 nguyên tắc quan trọng trong Agile:
▪ Đáp ứng tồn diện nhu cầu khách hàng thơng qua việc giao hàng
sớm và sản phẩm có giá trị.
▪ Thay đổi u cầu được chào đón, thậm chí là rất muộn trong quá

trình phát triển.
▪ Giao phần mềm chạy được cho khách hàng một cách thường
xuyên.
▪ Nhà kinh doanh và các kỹ sư phần mềm cần làm việc cùng nhau
trong suốt dự án.
▪ Xây dựng dự án xung quanh các cá nhân có động lực. Cung cấp
sự hỗ trợ cần thiết, môi trường làm việc và niềm tin để hồn thành
cơng việc.
▪ Trao đổi trực tiếp là cách truyền đạt thơng tin hiệu quả nhất.
▪ Thước đo chính của tiến độ là phần mềm chạy tốt.
▪ Phát triển liên tục và bền vững.
▪ Cải tiến sự linh hoạt bằng cách quan tâm đến kỹ thuật và thiết kế.
▪ Nghệ thuật tối đa hóa lượng cơng việc chưa xong - Sự đơn giản là
cần thiết.
SINH VIÊN ĐINH TRẦN VĂN MINH

13


▪ Nhóm tự tổ chức
▪ Thích ứng thường xun với những thay đổi.
o Điểm mạnh:
▪ Thực hiện thay đổi dễ dàng
▪ Không cần phải nắm mọi thông tin ngay từ đầu
▪ Bàn giao nhanh hơn
▪ Chú ý đến phản hồi của khách hàng và người dùng
▪ Cải tiến liên tục
o Các bước làm việc theo Agile – Scrum: Scrum là một quy trình phát triển
phần mềm theo phương pháp Agile. Chính vì thế, Scrum tn thủ các
ngun tắc của Agile Manifesto. Tuy nhiên, Agile và Scrum không phải

là một. Agile là một phương pháp, bao gồm những giá trị cốt lõi và
ngun tắc nhất định cịn Scrum là quy trình “hiện thực hóa” những giá
trị và nguyên tắc của Agile. Scrum định nghĩa quy tắc cho bốn sự kiện
chủ chốt nhằm tạo môi trường và quy cách hoạt động và cộng tác cho các
thành viên trong dự án.
▪ Sprint Planning (Họp Kế hoạch Sprint - Iteration): Nhóm phát
triển gặp gỡ với Product Owner để lên kế hoạch làm việc cho một
Sprint (xem thêm phần Sprint bên dưới). Công việc lập kế hoạch
bao gồm việc chọn lựa các yêu cầu cần phải phát triển, phân tích
và nhận biết các cơng việc phải làm kèm theo các ước lượng thời
gian cần thiết để hồn tất các tác vụ. Chia nhỏ cơng việc thành các
backlog (task) để có thể theo dõi tiến độ dự án dễ dàng hơn. Scrum
sử dụng cách thức lập kế hoạch từng phần và tăng dần theo thời
gian, theo đó, việc lập kế hoạch khơng diễn ra duy nhất một lần
trong vòng đời của dự án mà được lặp đi lặp lại, có sự thích nghi
với các tình hình thực tiễn trong tiến trình đi đến sản phẩm.
▪ Daily Scrum (Họp Scrum hằng ngày): Scrum Master tổ chức
cho Đội sản xuất họp hằng ngày trong khoảng 15 phút để Nhóm
SINH VIÊN ĐINH TRẦN VĂN MINH

14


Phát triển chia sẻ tiến độ công việc cũng như chia sẻ các khó khăn
gặp phải trong q trình phát triển phần mềm suốt một Sprint.
▪ Sprint Review (Họp Sơ kết Sprint): Cuối Sprint, nhóm phát triển
cùng với Product Owner sẽ rà sốt lại các cơng việc đã hồn tất
(DONE) trong Sprint vừa qua và đề xuất các chỉnh sửa hoặc thay
đổi cần thiết cho sản phẩm.
▪ Sprint Retrospective (Họp Cải tiến Sprint): Dưới sự trợ giúp

của Scrum Master, nhóm phát triển sẽ rà sốt lại tồn diện Sprint
vừa kết thúc và tìm cách cải tiến quy trình làm việc cũng như bản
thân sản phẩm.
-

Thực hiện:
o Tham gia đầy đủ các buổi training.
o Áp dụng vào quá trình deliver dự án và cải thiện thêm kỹ năng áp dụng.

-

Kết quả:
o Hiểu được những khái niệm của Agile
o Biết cách làm việc theo mơ hình Agile – Scrum và áp dụng tốt vào q
trình deliver sản phẩm.
2.2. Cơng cụ Git

Hình 7 - Công cụ Git

-

Thời gian: 0.5 ngày song song với thực hành trong suốt quá trình thực tập.

SINH VIÊN ĐINH TRẦN VĂN MINH

15


-

Nội dung: Được training về công cụ Git và các kỹ thuật liên quan nhằm sử dụng
hiệu quả công cụ cho quá trình phát triển sản phẩm.
o Git là tên gọi của một Hệ thống quản lý phiên bản phân tán (Distributed
Version Control System – DVCS) là một trong những hệ thống quản lý
phiên bản phân tán phổ biến nhất hiện nay. DVCS nghĩa là hệ thống giúp
mỗi máy tính có thể lưu trữ nhiều phiên bản khác nhau của một mã nguồn
được nhân bản (clone) từ một kho chứa mã nguồn (repository), mỗi thay
đổi vào mã nguồn trên máy tính sẽ có thể ủy thác (commit) rồi đưa lên
máy chủ nơi đặt kho chứa chính. Và một máy tính khác (nếu họ có quyền
truy cập) cũng có thể clone lại mã nguồn từ kho chứa hoặc clone lại một
tập hợp các thay đổi mới nhất trên máy tính kia. Trong Git, thư mục làm
việc trên máy tính gọi là Working Tree.

Hình 8 - Sơ đồ mơ hình của Gitt

o Cơ chế lưu trữ phiên bản của Git là nó sẽ tạo ra một “ảnh chụp”
(snapshot) trên mỗi tập tin và thư mục sau khi commit, từ đó nó có thể
cho phép bạn tái sử dụng lại một ảnh chụp nào đó mà bạn có thể hiểu đó
là một phiên bản. Đây cũng chính là lợi thế của Git so với các DVCS khác
khi nó khơng “lưu cứng” dữ liệu mà sẽ lưu với dạng snapshot.

SINH VIÊN ĐINH TRẦN VĂN MINH

16


o Cấu trúc branch:
▪ master: Là nhánh chính, run trên production.
▪ dev: là nhánh replica (bản sao) cho nhánh master cộng với các
nhánh feature đang được phát triển.

▪ feature: được tách từ nhánh dev, chức năng sau khi được phát
triển sẽ được merge vào dev trước khi merge vào master.

Hình 9 - Sơ đồ cấu trúc nhánh của Gitt

-

Thực hiện:
o Tham gia đầy đủ các buổi training của công ty.
o Áp dụng vào quá trình deliver dự án.

-

Kết quả:
o Hiểu và biết cách sử dụng Git cho quá trình phát triển sản phẩm.
o Áp dụng tốt Git vào quá trình deliver dự án.

SINH VIÊN ĐINH TRẦN VĂN MINH

17


2.3. NodeJS

Hình 10 - NodeJS

-

Thời gian: 0.5 ngày song song với thực hành trong suốt quá trình thực tập.

-

Nội dung: Được training về NodeJS, các cài đặt và các kỹ thuật liên quan nhằm
sử dụng hiệu quả công cụ cho quá trình phát triển sản phẩm.
o NodeJS là một nền tảng dựa vào Chrome Javascript runtime để xây dựng
các ứng dụng nhanh, có độ lớn. NodeJS sử dụng các phần phát sinh các
sự kiện (event-driven), mơ hình non-blocking I/O để tạo ra các ứng dụng
nhẹ và hiệu quả cho các ứng dụng về dữ liệu thời gian thực chạy trên các
thiết bị phân tán.
o NodeJS là một mã nguồn mở, đa nền tảng cho phát triển các ứng dụng
phía Server và các dự án theo quy trình Waterfall thường cần define cụ
thể yêu cầu của dự án, trong khi các yêu cầu trong các dự án Agile có thể
thay đổi và phát triển.
o Trong các dự án Waterfall, bạn không thể thay đổi những thứ bạn đã làm
trong những công đoạn trước, tuy nhiên Agile rất phù hợp và có thể đáp
ứng được các thay đổi.

-

Thực hiện:
o Tham gia đầy đủ các buổi training của công ty.
o Cài đặt và áp dụng NodeJS vào quá trình deliver dự án.

-

Kết quả:
o Cài đặt được NodeJS.

SINH VIÊN ĐINH TRẦN VĂN MINH

18


o Áp dụng tốt NodeJS vào qus trình deliver dự án.
2.4. ReactJS

Hình 11 – ReactJS

-

Thời gian: 0.5 ngày song song với thực hành trong suốt quá trình thực tập.

-

Nội dung: Được training về ReactJS, cách cài đặt và các kỹ thuật liên quan để
sử dụng hiểu quả ReactJs trong quá trình xây dựng sản phẩm Web.
o ReactJS là một thư viện Javascript đang nổi lên trong những năm gần
đây với xu hướng Single Page Application. Trong khi những framework
khác cố gắng hướng đến một mơ hình MVC hồn thiện thì React nổi bật
với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác.
Nếu như AngularJS là một Framework cho phép nhúng code javascript
trong code html thông qua các attribute như ng-model, ng-repeat...thì với
React là một library cho phép nhúng code html trong code javascript nhờ
vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS.Tích hợp
giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu
hơn.
o Vòng đời trong ReactJS:
▪ Initialization: Tương tự hàm khởi tạo (constructor) được gọi đến
khi một thể hiện của component được tạo ra.
▪ Mounting: Là các hàm gắn kết, kết nối các component với nhau.

SINH VIÊN ĐINH TRẦN VĂN MINH

19


• componentWillMount(): Được gọi đến trước khi hiển thị
component ra ngồi trình duyệt. Q trình này diễn ra hết
sức nhanh chóng, vì vậy khơng nên làm q nhiều điều tại
đây và hàm này được thực hiện một lần duy nhất (từ phiên
bản 16.3 thì hàm này khơng được khuyến khích dùng và sẽ
bị loại bỏ ở bản 17).
• render(): Được gọi khi hiển thị component ra ngồi trình
duyệt. Sẽ return về nội dung mà bạn đã viết, có thể là một
component hoặc null hoặc là false (trong trường hợp không
muốn render gì cả).
• componentDidMount(): Được gọi sau khi đã hiển thị
component ra ngồi trình duyệt, và hàm này được thực hiện
một lần duy nhất. Hàm này được gọi để thông báo
component đã tồn tại trên DOM, từ đó các thao tác trên
DOM có thể thực hiện bình thường với component này.
Đầu tiên khi component được gọi thì hàm hàm constructor() được
gọi, sau đó đến componentWillMount(), tiếp theo là render() ra
ngồi và cuối cùng hàm componentDidMount được gọi khi đã
render() xong.
▪ Updation: Là các vấn đề khi mình update component về props, về
state.
• componentWillReceiveProps(nextProps): Hàm này được
chạy khi mà props của component đã được sinh ra có sự
thay đổi. Phải gọi setState() nếu muốn render lại.

• shouldComponentUpdate(nextProps, nextState): Được
thực hiện ngay sau khi state và props thay đổi. Sẽ trả về kết
quả true or false. Phương thức này sẽ xác định 1 component
có được update hay khơng. Mặc định giá trị này là true. Nếu

SINH VIÊN ĐINH TRẦN VĂN MINH

20


bạn không muốn component render lại sau khi update state
hay props thì return giá trị thành false.
• componentWillUpdate(nextProps, nextState): Được gọi
khi chúng ta update state của component trước khi nó
render lại. Bạn không thể gọi this.setState trong
componentWillUpdate(). Hàm render sẽ được gọi ngay sau
hàm này (từ phiên bản 16.3 thì hàm này khơng được khuyến
khích dùng và sẽ bị loại bỏ ở bản 17).
• componentDidUpdate(prevProps, prevState): Được gọi
khi một component instance update, componentDidUpdate
sẽ được gọi sau khi render HTML được loading xong.
▪ Unmounting:
• componentWillUnmount(): Được gọi trước khi một
component bị remove khỏi một DOM.

Hình 12 - Vịng đời trong ReacJs

-

Thực hiện:

o Tham gia đầy đủ các buổi training của công ty.
o Áp dụng ReạctJS để xây dựng sản phẩm Web trong quá trình deliver dự
án.

-

Kết quả:
o Hiểu và biết cách sử dụng ReacJS cho quá trình phát triển sản phẩm.

SINH VIÊN ĐINH TRẦN VĂN MINH

21


o Áp dụng tốt ReactJS vào quá trình deliver dự án.
2.5. Redux và Redux-Saga
-

Thời gian: 0.5 ngày song song với thực hành trong suốt quá trình thực tập.

-

Nội dung: Được training về Redux, Redux-Saga, hiểu và sử dụng được để quản
lý và cập nhật trạng thái trong quá trình xây dựng sản phẩm Web.
o Redux:
▪

Là một thư viện javascript giúp tạo ra thành một lớp quản lý trạng
thái của ứng dụng. Được dựa trên nền tảng tư tưởng của ngôn
ngữ Elm kiến trúc Flux do Facebook giới thiệu, do vậy Redux

thường là bộ đơi kết hợp hồn hảo với React (ReactJS và React
Native).

▪ Nguyên lý của Redux: Redux được xây dựng dựa trên 3 ngun
lý.
• Trạng thái (state) của tồn bộ ứng dụng được lưu trong
trong 1 store duy nhất là 1 Object mơ hình tree.
• Chỉ có 1 cách duy nhất để thay đổi trạng thái (state) đó là
tạo ra một action (là 1 object mơ tả những gì xảy ra).
• Để chỉ rõ trạng thái (state) tree được thay đổi bởi 1 action
bạn phải viết pure reducers.

SINH VIÊN ĐINH TRẦN VĂN MINH

22


Hình 13 - Luồng dữ liệu trong Redux

o Redux-Saga:
▪ Là một thư viện redux middleware, giúp quản lý những side effect
trong ứng dụng redux trở nên đơn giản hơn. Bằng việc sử dụng tối
đa tính năng Generators (function*) của ES6, nó cho phép ta viết
async code nhìn giống như là synchronos.
▪ Đối với logic của saga, ta cung cấp một hàm cho saga, chính hàm
này là hàm đứng ra xem xét các action trước khi vào store, nếu là
action quan tâm thì nó sẽ thực thi hàm sẽ được thực thi, nếu bạn
biết khái niệm hook thì hàm cung cấp cho saga chính là hàm hook.
Điều đặc biệt của hàm hook này nó là một generator function,
trong generator function này có yield và mỗi khi yield ta sẽ trả về

một plain object. Object trả về đó được gọi Effect object. effect
object này đơn giản chỉ là một object bình thường nhưng chứa
thông tin đặc biệt dùng để chỉ dẫn middleware của Redux thực thi
các hoạt động khác ví dụ như gọi một hàm async khác hay put một
action tới store. Để tạo ra effect object đề cập ở trên thì ta gọi hàm
từ thư viện của saga là redux-saga/effects.

SINH VIÊN ĐINH TRẦN VĂN MINH

23


Hình 14 - Luồng dữ liệu trong Redux-Saga

-

Thực hiện:
o Tham gia đầy đủ các buổi training của công ty.
o Áp dụng Redux và Redux-Saga để quản lý và cập nhật trạng thái trong
xây dựng sản phẩm Web trong quá trình deliver dự án.

-

Kết quả:
o Hiểu và biết cách sử dụng Redux, Redux-Saga cho quá trình phát triển
sản phẩm.
o Áp dụng tốt Redux và Redux-Saga vào quá trình deliver dự án.
2.6. Ant Design

Hình 15 - Ant Design

-

Thời gian: 0.5 ngày song song với thực hành trong suốt quá trình thực tập.

SINH VIÊN ĐINH TRẦN VĂN MINH

24