BÁO CÁO THỰC TẬP THỰC TẬP TỐT NGHIỆP LẬP TRÌNH FRONT-END VỚI REACT VÀ ÁP DỤNG QUY TRÌNH SCRUM - AGILE

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
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
THỰC TẬP TỐT NGHIỆP - SE501.M21

LẬP TRÌNH FRONT-END VỚI REACT VÀ ÁP DỤNG
QUY TRÌNH SCRUM - AGILE
Building front-end wih React and applying Scrum - Agile to project

Công ty thực tập: Công ty TNHH FPT Software
Người phụ trách: Nguyễn Đức Nhân
Thực tập sinh: Ngơ Cơng Hậu - 18520277

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


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

LỜI MỞ ĐẦU
Trải qua quá trình học tập trên trường với nền tảng kiến thức từ thầy cô và bạn bè, vì
mong muốn có thêm kinh nghiệm thực tế, cũng như được tham gia phát triển phần mềm
trong một môi trường chuyên nghiệp, em đã quyết định thực tập vào học kì này. Sau khi tìm
hiểu kĩ lưỡng giữa các cơng ty, em chọn công ty TNHH FPT Software làm nơi để áp dụng
những kiến thức chuyên môn đã được đào tạo và để trải nghiệm thực tế văn hóa làm việc
trong mơi trường doanh nghiệp. Với quy trình làm việc linh hoạt, hiệu quả, con người thân
thiện, văn hóa tốt, có nhiều cơ hội phát triển, em nhận thấy đây thực sự là nơi thích hợp để
thực hiện những mong muốn trên của bản thân,.

+

2


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

LỜI CẢM ƠN
Em xin trân trọng gửi lời cảm ơn đến công ty TNHH FPT Software đã tạo điều kiện
cho em có cơ hội được thực hiện q trình thực tập ở công ty.
Em xin cảm ơn các anh mentor, anh team lead và các anh chị trong công ty đã hướng
dẫn em trong thời gian vừa qua. Nhờ sự chỉ dẫn nhiệt tình của mọi người, em đã tiếp thu
được những kiến thức và quan trọng phục vụ trong quá trình làm việc thực tế.
Cũng xin cảm ơn thầy cơ và bạn bè trong khoa Công nghệ phần mềm đã nhiệt tình hỗ
trợ và tạo điều kiện cho em làm bài báo cáo này.
Bản báo cáo dù đã được hoàn thành với tất cả nỗ lực tuy nhân vẫn sẽ khơng tránh khỏi
thiếu sót, rất mong nhận được sự thơng cảm và góp ý chân thành từ thầy cơ. Em xin chân
thành cảm ơn ạ.
Thành phố Hồ Chí Minh, ngày 15 tháng 6 năm 2022
Ngô Công Hậu

3


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

NHẬN XÉT CỦA KHOA
..............................................................................................................................................................
..............................................................................................................................................................
..............................................................................................................................................................
..............................................................................................................................................................

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

+

4


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

MỤC LỤC

5


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

CHƯƠNG 1 - GIỚI THIỆU CƠNG TY
1.1. Giới thiệu về cơng ty TNHH FPT Software

Được thành lập từ năm 1999, tiền thân thuộc tập đoàn FPT, FPT Software đã trở thành
một trong những ông ty phát triền phần mềm lớn nhất Việt Nam. Có chi nhánh ở hơn 11
quốc gia, với thị trường chính ở Hoa Kỳ, Châu Âu, Châu Á Thái Bình Dương, Việt Nam
cùng hơn 15000 lao động, bao gồm nhiều kỹ sư công nghệ Việt Nam và chuyên gia cơng
nghệ nước ngồi. FPT Software đã đạt được những thành tích rất ấn tượng khi nằm trong top
100 nhà cung cấp dịch vụ phần mềm toàn cầu và được vinh dự là một trong hai nơi làm việc
tốt nhất Việt Nam trong lĩnh vực CNTT.
Với tham vọng đổi mới cơng nghệ, đem lại sự hài lịng cao nhất cho khách hàng, cung
cấp nhân viên môi trường làm việc thuận lợi nhất, FPT Software đã tạo nên sự khác biệt cho
mình nhờ 5 yếu tố.
1.
2.
3.
4.
5.

Chất lượng dịch vụ đạt chuẩn thế giới
Đáp ứng được nhu cầu khắt khe của các công ty hàng đầu
Luôn đi đầu về công nghệ
Nguồn nhân lực chuyên nghiệp
Giá thành cạnh tranh

Nhờ vậy FPT software đã vinh dự nhận các chứng chỉ thế giới về chất lượng và bảo
mật nhi: CMMI 5, ISO 27001: 2005, ISO 9001, ISO 20000. Tính đến nay cơng ty đã
hợp tác với những khách hàng là những nhà công nghệ hàng đầu thế giới nhi Hitachi,
Neopost , IBM, Canon, Panasonic, Toshiba, Sony,…
6


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

1.2. Sản phẩm của công ty
Với bề dày 3 thập kỷ trong việc tạo dựng và phát triển các mơ hình kinh doanh quy
mô lớn trong lĩnh vực phát triển các mơ hình kinh doanh quy mơ lớn trong lĩnh vực phần
mềm, FPT đã cung cấp các dịch vụ đạt tiêu chuẩn quốc tế ở các mảng:
+

Dịch vụ phần mềm truyền thống (Application Services, Business Application
Services, Legacy Migration, Testing & BPO

+

Dịch vụ Digital Age Services (Cloud, Mobility, Analytics & Internet of Things

+

Dịch vụ Product Engineering bao gồm Embeded System, CAD/CAM và IC
Design

AkaBot – Giải pháp Robotic Process Automation, một sản phẩm đến từ FPT Software

7

Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

CHƯƠNG 2 - NỘI DUNG THỰC TẬP
2.1. Tham gia khóa học Day One
●
●
+
+
+
+
+
●
+
+

Thời gian: 2 ngày (onboarding)
Nội dung chính:
Giới thiệu về cơng ty, q trình thành lập và phát triển, sơ đồ tổ chức
Tìm hiểu các kênh thơng tin, dịch vụ của cơng ty
Tìm hiểu các quy tắc về bảo mật trong công ty
Được hướng dẫn setup các thiết bi, giới thiệu sử dụng các nguồn tài nguyên của công
ty
Làm quen, giao lưu với các anh chị. Các anh chị giới thiệu về các sản phẩm và những
thành tựu công ty đã đạt được.
Kết quả
Hiểu thêm về công ty FPT Software và tn thủ luật cơng ty
Có thêm các kỹ năng về việc sử dụng các kênh thông tin để trao đổi hiệu quả trong
doanh nghiệp

2.2. Giai đoạn training

●
●
+
+
+
●
+
+
+

Thời gian: 1 tháng (fundamental training)
Nội dung chính:
Được giới thiệu các phần kiến thức cần thiết cho dự án thông qua chỉ dẫn của mentor
Tham gia các khóa học trên nền tảng Udemy Business
Thực hành áp dụng các kiến thức kỹ năng để xây dựng các mock project
Kết quả
Hiểu sâu hơn về các công nghệ phát triển web
Biết cách xây dựng các web project và cách giải quyết vấn đề thường gặp phải
Biết vận dụng cách quản lí mã nguồn bằng Git, phương pháp Agile, các nguyến tắc
clean code, các mẫu thiết kế, an toàn trong ứng dụng web, …

8


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp
2.3. Nghiên cứu về công nghệ của project
Thời gian: 1 tháng
● Nội dung chính:

Ngồi các kiến thức nền tảng của frontend là HTML, CSS, JS mà em đã biết, qua tìm
hiểu cơng nghệ dự án, em đã tìm hiểu các cơng nghệ, kĩ thuật sau đây:
●

2.3.1. React
React là một thư viện UI phát triển tại Facebook để hỗ trợ việc xây dựng những thành
phần (components) UI có tính tương tác cao, có trạng thái và có thể sử dụng lại được.
React được sử dụng tại Facebook trong production, và www.instagram.com được viết
hoàn toàn trên React.

Một trong những điểm mạnh của React là cấu thành các UI component sử dụng JSX,
sự kết hợp của JS và HTML, giúp thực hiện các logic render dễ dàng hơn. Ngồi ra React
sử dụng cơng nghệ Vỉtual DOM giúp so sánh sự thay đổi giữa các giá trị của lần render
này với lần render trước và cập nhật ít thay đổi nhất trên DOM.

9


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp
2.3.2. State management với Redux
Redux là một predictable state management tool cho các ứng dụng Javascript. Nó
giúp bạn viết các ứng dụng hoạt động một cách nhất quán, chạy trong các môi trường khác
nhau (client, server, and native) và dễ dàng để test. Redux ra đời lấy cảm hứng từ tư tưởng
của ngôn ngữ Elm và kiến trúc Flux của Facebook. Do vậy Redux thường dùng kết hợp với
React.

Các thành thần chính của redux:
1. Store: Nơi lưu trữ state, có thể được sử dụng ở tất cả component trong app nằm
dưới store provider, store được thay đổi sang trạng thái mới thông qua reducer.
2. Reducer: 1 reduce function chứa các logic để return state cũ thành state mới dựa

vào các action truyền vào
3. Actions: Các hành động để thay đổi state, bao gồm 2 thành phần: type và payload.
Các hành động này được truyền vào reducer thông qua phương thức dispatch.
4. Middlewares: Action dưới dạng hàm, có khả năng dispatch 1 action khác.

10


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

2.3.3. Unit test với Jest và React testing library
Jest là một Javascript testing framework phổ biến và dễ sử dụng. Những tính năng nổi
bật của Jest bao gồm số lượng matcher phong phú, cơ chế mock đơn giản, tài liệu rõ
ràng.

11


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp
Đi kèm với Jest, dự án còn sử dụng React Testing Library, một thư viện hỗ trợ render
các element dùng cho test, simulate user event và cơ chế async.

2.3.4. End to end testing với cypress

Cypress là front end testing tool được xây dựng cho các ứng dụng Web hiện đại. Đây
là một công cụ hỗ trợ hữu hiệu cho developers và QA trong kiểm thử ứng dụng Web
hiện đại. Cypress được xây dựng trên một kiến trúc mới và chạy trong cùng vòng lặp
chạy khi ứng dụng đang được thử nghiệm. Cypress thường được so sánh với
Selenium. Nhưng Cypress hoàn toàn khác biệt với Selenium và nó khơng gặp phải các
hạn chế như Selenium. Điều này giúp chúng ta thực thi các Test Cases một cách đơn

giản và dễ dàng hơn.

12


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

Cypress được tích hợp sẵn test report giúp thể hiện rõ ràng các hành động
trong lúc test.
2.3.5. Công cụ tổ chức UI components với Storybook

13


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

Storybook là một công cụ để phát triển giao diện người dùng. Nó giúp việc phát triển
nhanh hơn và dễ dàng hơn bằng cách cô lập các UI Component. Sử dụng Storybook ta có thể
preview UI, specifications và hành vi của từng component trước khi được đưa vào sử dụng
trong ứng dụng.
2.3.6. CI/CD với Jenkins

Project có áp dụng workflow CI/CD nên đỏi hỏi em phải hiểu quy trình build, deploy
và sửa lỗi khi cần thiết.

2.4. Tham gia project thực tế với khách hàng
●
●
+
+

+
+
+

Thời gian: 8 tuần
Nội dung chính:
Được cấp tài khoản truy cập vào các trang làm việc: Github Enterprise, Slack, Rally,
OKTA,..
Được tiếp cận với source code của dự án, nghiên cứu structure và code convention
(khoảng 1 tuần), được assign các chức năng phụ (1 tuần), trực tiếp nhận các chức
năng chính (những tuần sau đó)
Tham gia vào các sự kiện trong mỗi sprint: Daily meeting, Planning, Grooming,
Review. Retro
Support các thành viên trong team
Thảo luận với khách hàng để làm rõ chức năng, refactor code và resolve comment
trong các Pull Requests
14


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp
Kết quả
+ Hiểu được thực sự cách làm việc trong thực tế của quy trình phát triển phần mềm theo
mơ hình Scrum – Agile
+ Áp dụng kỹ thuật code trong một môi trường chuyên nghiệp
+ Rèn luện kỹ năng communicate, kỷ luật trong cơng việc, làm việc nhóm
●

15

Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

CHƯƠNG 3 - CHI TIẾT VỀ PROJECT

3.1. Mô tả dự án
3.1.1. Tổng quát
Tên dự án: KBBATC
Mục tiêu: Phát triển và bảo trì ứng dụng website autotrader.com. Trang web là một
marketplace để liên kết những người mua bán xe hơi. Người dùng có thể mua bán xe mới, xe
cũ cùng những tính năng như 3D viewer, chạy thử, nhắn tin, customer support.
Đối tượng hướng tới: Mọi cơng dân Mỹ và Úc có nhu cầu mua bán xe hơi.
Cơng nghệ:
• Frontend: React, Nextjs, Redux, Bootstrap, SCSS, Storybook
• Backend: Java Spring Boot
3.1.2. Một số chức năng chính
Trang tìm kiếm xe: Tìm kiếm xe theo các bộ lọc, vị trí hiện tại

Trang chi tiết xe: Xem thơng số kỹ thuật của xe, hình ảnh/video preview, trả giá, liên
hệ với người bán / doanh nghiệp bán.
16


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

17


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp
3.2. Sản phẩm hoàn thành

Refactor, stabilize Offer component trong ứng dụng.

Gắn các analytic taggings vào các element trên trang.

18


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

Optimize thanh tìm kiếm xe

19


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp
CHƯƠNG 4 - TỔNG KẾT
4.1. Các kết quả đạt được và ưu điểm
Sau kì thực tập, em đã thực hiện được nhiều việc, được đánh giá như sau:

Nhận xét về phong cách làm việc từ mentor và PM
Bản thân em thấy mình đã trưởng thành hơn trong cơng việc khi thực hiện:
●

Học hỏi được kinh nghiệm thực tế từ dự án của công ty, từ kiến thức và kĩ năng về kĩ
thuật và đến quy trình nghiệp vụ trong Scrum - Agile, rèn luyện tác phong lập trình nhóm
có tính kỉ luật, theo quy trình cụ thể.

●

Học hỏi được các best practices và cơng cụ phát triển lập trình web frontend trong dự án

chuyên nghiệp.

20


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp
4.2. Một số hạn chế
Tuy nhiên bất cứ dự án nào cũng gặp phải những bất lợi nhất định:
●

Do dịch COVID 19 nên em không trực tiếp lên làm việc với công ty, gặp mặt các thành
viên, khiến gặp một số khó khăn về trao đổi cơng việc (Mạng internet, thời gian làm việc
không ổn định,…). Khắc phục: Cố gắng giữ liên lạc với team, chủ động hỗ trợ các thành
viên khác trong giờ làm việc.

●

Do cịn ít kinh nghiệm nên tốn một số thời gian để làm quen công nghệ với cách làm việc
của doanh nghiệp. Khắc phục: Trau dồi kiến thức và kỹ năng, học hỏi từ các anh chị
senior, PM.

21


Ngô Công Hậu - 18520277 - Thực tập tốt nghiệp

TÀI LIỆU THAM KHẢO

[1] React document: />[2] FPT Software Offiical Website: />[3] Redux State Management: />[4] Storybook: />[5] Bootstrap: />
22