Báo cáo thực tập lập trình ứng dụng WEB với REACT và NODE

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 ỨNG DỤNG WEB VỚI REACT VÀ NODE
Công ty thực tập

: Công ty cổ phần SaveMoney

Người phụ trách

: Lê Xuân Hải

Thực tập sinh

: Nguyễn Duy Cương

TP. Hồ Chí Minh, tháng 07 năm 2020


LỜI MỞ ĐẦU
Chúng ta biết rằng trang web đầu tiên được ra mắt vào tháng 8 năm 1991 bởi
Tim Berners-Lee. Số lượng trang web đã tăng lên kể từ đó, trước khi phát triển lên
hàng triệu trang mới được thêm trước năm 2000. Ngày nay, có hơn 1,7 tỷ trang web
trên toàn thế giới và đếm (Internet Live Stats, 2020). Ngày nay với sự phát triển mạnh
mẽ của internet và cơ sở hạ tầng viễn thông, ngành công nghiệp “không khói” web
khẳng định vai trị và vị thế to lớn của mình. Nhu cầu phát triển web phục vụ cho kinh
tế, thương mại, giáo dục, văn hoá,... rất lớn, đây là thị trường rất “béo bở” cho các
công ty, tổ chức, cá nhân trong ngành lập trình web.Cũng xin cảm ơn thầy cô trong
khoa

Bản thân là một người đam mê công nghệ và mong muốn áp dụng công nghệ
để làm cho cuộc sống tốt hơn, em luôn luôn học hỏi, trau dồi thêm các kiến thức, kỹ
năng cuộc sống và một vốn công nghệ cần thiết để phục vụ nhu cầu của bản thân.
Web là một trong số các công nghệ em đã và đang theo đuổi. Em đã bắt đầu học lập
trình web từ năm thứ ba của đại học và vẫn đang tiếp tục cho đến ngày hôm nay là
năm thứ tư.
Thời điểm học kỳ hai của năm tư đại học, nhận thấy đây là thời điểm thích hợp
để bản thân đi học hỏi kỹ năng, kinh nghiệm làm dự án thực tế em bắt đầu lên kế
hoạch đi thực tập doanh nghiệp. Bản thân em sau nhiều ngày suy nghĩ, đắn đo đã
quyết định lựa chọn công ty cổ phần Save Money là nơi thực tập chính thức của bản
thân. Đây là cơng ty có mơi trường trẻ, nhiệt huyết, phù hợp cho em học tập và phát
triển.

Lê Xuân Hải

Nguyễn Duy Cương
22


LỜI CẢM ƠN
Em xin trân trọng gửi lời cảm ơn sâu sắc đến quý Công ty cổ phần SaveMoney,
anh Trần Quang Ninh - CEO công ty đã tạo điều kiện cho em có cơ hội được học tập
và trải nghiệm trong môi trường chuyên nghiệp tại công ty.
Chỉ trong một thời gian ngắn, nhưng nhờ sự chỉ dẫn nhiệt tình của nhóm trainer,
nhóm thực tập chúng em đã tiếp thu được những kiến thức quan trọng để có thể làm
được một website. Chân thành cảm ơn các anh chị trong nhóm trainer đã bỏ ra nhiều
thời gian, cơng sức để hướng dẫn chúng em hoàn thành đợt thực tập này. Đặc biệt em
xin gửi lời cảm ơn đặc biệt đến anh Lê Xuân Hải - Technical Lead công ty đã chân
thành chia sẻ cho những kiến thức, kinh nghiệm trong cơng việc và cuộc sống, những
lời khun bổ ích để em tiến bộ, phát triển hơn.

Cuối cùng em xin gửi lịng biết ơn đến các thầy cơ khoa Cơng nghệ Phần mềm,
trường Đại học Công nghệ Thông tin, Đại học Quốc gia Thành phố Hồ Chí Minh đã
nhiệt tình hỗ trợ, tạo điều kiện để em hồn thành tốt mơn thực tập doanh nghiệp này.
Sinh viên thực hiện
Nguyễn Duy Cương
TP. Hồ Chí Minh, ngày 01/07/2020

Lê Xuân Hải

Nguyễn Duy Cương
33


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

……………………………………………….……………………………………………….
……………………………………………….……………………………………………….
……………………………………………….……………………………………………….
……………………………………………….……………………………………………….
……………………………………………….……………………………………………….
……………………………………………….……………………………………………….
……………………………………………….……………………………………………….
……………………………………………….……………………………………………….

Lê Xuân Hải

Nguyễn Duy Cương
44


……………………………………………………………………………………………………
……………………………………………………..

MỤC LỤC

Lê Xuân Hải

Nguyễn Duy Cương
55


Chương 1: Giới thiệu về công ty thực tập

1. Giới thiệu công ty cổ phần SaveMoney
SaveMoney là một công ty công nghệ bảo hiểm chuyên xây dựng nền tảng bảo

hiểm kỹ thuật số cho các ngân hàng, bệnh viện và nhà mạng viễn thông dựa
trên sự hợp tác chiến lược để chia sẻ lợi ích kinh tế bền vững. Mục tiêu của
công ty là phục vụ hàng triệu người Việt Nam hiện chưa có bảo hiểm.
Mơ hình kinh doanh chính của SaveMoney là phát triển và xây dựng dịch vụ tài
chính tiêu dùng cá nhân cho một cơng ty sở hữu tập dữ liệu khách hàng lớn.
SaveMoney là một trung gian kết nối các công ty sở hữu bộ dữ liệu với các nhà
cung cấp dịch vụ tài chính và bán lẻ. Ra đời vào tháng 8 năm 2013, Savemoney
mong muốn đóng góp cho nền tảng cơng nghệ Việt Nam, tập trung vào công
nghệ AI cho phép các hệ thống máy tính thực hiện các nhiệm vụ đặc biệt địi hỏi
hành vi thông minh của con người .
SaveMoney cung cấp các giải pháp nền tảng bảo hiểm kỹ thuật số cho các ứng
dụng dữ liệu lớn từ viễn thông, ngân hàng, công ty, mạng xã hội và các công ty
siêu ứng dụng. Hiện tại, chúng tôi đã triển khai thành cơng cho 35 triệu th bao
vinaphone có thể mua bảo hiểm dễ dàng bằng cách nhắn tin trên điện thoại,
cách bạn mua bảo hiểm cũng giống như mua dịch vụ gói 3G hoặc 4G có thể
Lê Xuân Hải

Nguyễn Duy Cương
66


được thanh tốn hàng tháng.

2. Sản phẩm của cơng ty
Bwinwin Agent ("BWW"): một ứng dụng di động hỗ trợ kết nối thương mại. Đây
là một nền tảng để các nhà cung cấp có thể quảng bá sản phẩm và dịch vụ của
họ. Các nhà cung cấp sau khi đăng ký trên BWW có thể đăng các sản phẩm,
dịch vụ và ưu đãi của họ trên ứng dụng. BWW hiện đang cung cấp các sản
phẩm trên nhiều lĩnh vực khác nhau: du lịch, tiêu dùng, sức khỏe và sắc đẹp,
dịch vụ tài chính.

VinaCare: mua bảo hiểm dễ dàng thơng qua nhà mạng Vinaphone.

Lê Xuân Hải

Nguyễn Duy Cương
77


Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Lập trình ứng dụng web với React và Node” nhằm mục
đích giúp sinh viên thực tập được đào tạo tồn diện về lập trình web sử dụng
cơng nghệ React và Node, đồng thời rèn luyện những kỹ năng mềm như làm
việc nhóm, thuyết trình, giao tiếp. Tại cơng ty, sinh viên có cơ hội được học tập,
khám phá và làm việc trong một môi trường phát triển phần mềm chun
nghiệp.

1. Tìm hiểu cơng ty và các quy định đối với nhân viên
Thời gian: 1 ngày
Nội dung: Giới thiệu về công ty, nhân sự và các quy định đối với nhân viên
- Được người phụ trách giới thiệu về công ty, quá trình thành lập và phát triển,
các sản phẩm, thành quả đạt được và hướng đi của công ty trong tương lai.
- Ngoài ra được giới thiệu về bộ phận nhân sự của công ty, nắm được các quy
định đối với nhân viên, hiểu được văn hoá và tham gia vào các hoạt động,
phong trào hàng ngày, hàng tuần trong công ty.
Kết quả: Hiểu hơn về công ty cổ phần SaveMoney, các đồng nghiệp, văn hố
và mơi trường làm việc. Từ đó dễ dàng thích nghi hơn với mơi trường mới để
đạt được năng suất cao trong công việc.

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

Các công cụ làm việc
Thời gian: 2 ngày
Nội dung: Tìm hiểu về các cơng cụ sẽ được sử dụng trong q trình làm
việc.
-

Lê Xn Hải

Cơng cụ trao đổi, giao tiếp: Slack, Telegram, Skype.

Nguyễn Duy Cương
88


-

Công cụ quản lý dự án: Jira.

-

Công cụ quản lý phiên bản phần mềm: Git, GitLab.

-

Công cụ liên quan lập trình: WebStorm, DockStation, DataGrip.

Thực hiện: Thực hành sử dụng các phần mềm đã nêu trên.
Kết quả: Làm quen, biết được công dụng và cách sử dụng các công cụ phục
vụ cơng việc.

2.2.

Tìm hiểu ngơn ngữ JavaScript
Thời gian: 3 ngày (1 tuần)
Nội dung: Tìm hiểu các kiến thức cơ bản và nâng cao của JavaScript
-

Lập trình hướng chức năng (Functional Programming).

-

Các kiến thức cơ bản về DOM, Strings, Arrays, Objects, Variables,
Functions, Scopes, Browser Storage, HTTP.

-

ES6, ES7, ESNext và các vấn đề hạn chế của JavaScript.

-

Tìm hiểu về TypeScript, npm và publish package đầu tiên lên npm.

Thực hiện:
-

Tham gia đầy đủ các buổi training của công ty.

-

Làm các bài thực hành, kiểm tra về kiến thức đã học.

Kết quả:
-

Nâng cao kỹ năng lập trình với ngơn ngữ JavaScript.

-

Có được những kiến thức quan trọng về TypeScript, npm.

-

Ngồi ra cịn được biết thêm một số quy tắc trong việc viết code sao cho
đúng chuẩn, dễ đọc và dễ hiểu.

2.3.

Lập trình web front-end với React
Thời gian: 6 ngày (2 tuần)
Nội dung: Các kiến thức và kinh nghiệm lập trình front-end với React
-

Lê Xuân Hải

Khái niệm cơ bản về React, JSX, State, Props, Lifecycle Hooks, Styles.
Nguyễn Duy Cương
99


-

Sử dụng thư viện Axios để tương tác với API.

-

Lập trình React với TypeScript, Hooks.

-

Sử dụng scss, less và styled-components.

-

Tìm hiểu về kiến trúc Flux và áp dụng Redux, Redux-Saga.

-

Viết unit testing với Jest, Enzyme.

-

Triển khai ứng dụng React lên server sử dụng Heroku.

Thực hiện:
-

Tham gia đầy đủ các buổi training.

-

Làm các bài thực hành, kiểm tra về kiến thức đã học.

-

Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.

Kết quả:

2.4.

-

Hiểu được những khái niệm cơ bản trong lập trình front-end với React.

-

Biết cách sử dụng Redux, Redux Saga, Jest và các thư viện hỗ trợ React.

-

Nắm được cách triển khai ứng dụng React với Heroku.

Lập trình web back-end với Node
Thời gian: 6 ngày (2 tuần)
Nội dung: Sử dụng Node trong lập trình web back-end
-

Kiến thức cơ bản về Server, giao thức HTTP, kiến trúc cơ bản của backend.

-

Sử dụng File System, Error, Hash.

-

Tìm hiểu về Express và thực hiện một trong web theo mơ hình MVC.

-

Sử dụng Sequelize và Mongoose cho database.

-

Viết một web api sử dụng MERN stack và PERN stack.

-

Viết API testing và unit testing cho ứng dụng Node.

Lê Xuân Hải

Nguyễn Duy Cương
1010


Thực hiện:
-

Tham gia đầy đủ các buổi training.

-

Tạo ra ứng dụng đầu tiên viết bằng Express, sử dụng mơ hình MVC.

-

Viết ứng dụng thứ hai, áp dụng MERN stack.

-

Viết ứng dụng thứ ba, áp dụng PERN stack.

Kết quả:
-

Nắm được kiến thức cơ bản về back-end và những kiến thức phụ trợ.

-

Biết cách sử dụng Express, MongoDB, Postgresql, Mongoose, Sequelize
và các thư viện hỗ trợ việc kiểm thử.

-

Biết cách áp dụng mơ hình MVC, MERN stack và PERN stack vào các
ứng dụng web back-end.

3. Thực hiện project
Sau một tháng được training và thực hành, thực tập sinh đã nắm được những
kiến thức cơ bản về JavaScript, React, Node. Trong tháng thứ hai, người hướng

dẫn đã yêu cầu thực tập sinh áp dụng những kiến thức đã học để thực hiện một
ứng dụng web ứng dụng hai công nghệ là React và Node.
Chi tiết đồ án sẽ được nói ở phần sau.

4. Lịch làm việc
Người
Tuần

Công việc

hướng
dẫn

1
Lê Xuân Hải

-

Giới thiệu về công ty,

Anh Lê

Mức
độ

Nhận xét của

hồn

người hướng dẫn

thành
09 / 10

Thích nghi nhanh
Nguyễn Duy Cương
1111


-

nhân sự và các quy định

Xuân

với môi trường mới

đối với nhân viên

Hải

của cơng ty, tích

Tìm hiểu về các cơng cụ

cực trong việc hỏi

sẽ được sử dụng trong

đáp các vấn đề cịn

q trình làm việc.

trở ngại, vướng

Tìm hiểu các kiến thức cơ bản

Anh Lê

và nâng cao của JavaScript

Xuân

JavaScript và

Hải

TypeScript. Hỗ trợ

2

10 / 10

mắc.
Có kiến thức tốt và

tốt các thành viên
cùng học tập, phát
Các kiến thức và kinh nghiệm

Anh Lê

lập trình front-end với React

Xuân

kỹ năng tốt về

Hải

React, Redux,

3, 4

10 / 10

triển.
Có kinh nghiệm và

Redux-Saga. Hỗ
Sử dụng Node trong lập trình

Anh Lê

web back-end

Xuân

và GraphQL. Hỗ

Hải

trợ team trong quá

5, 6

10 / 10

trợ tốt mọi người.
Thành thạo Node

trình nghiên cứu,
tìm giải pháp cơng

7, 8, 9

Giai đoạn alpha:

10 / 10

-

Lên kế hoạch

Xuân

vụ của dự án. Chủ

-

Tìm hiểu nghiệp vụ

Hải

động nêu ý kiến,

-

Lê Xuân Hải

Anh Lê

nghệ.
Nắm bắt tốt nghiệp

chung

quan điểm, giải

Viết codebase cho

pháp để cải thiện

front-end sử dụng

kết quả công việc,
Nguyễn Duy Cương
1212

-

-

React, Ant Design,

sản phẩm. Có kiến

GraphQL client.

thức tốt về Docker,

Viết codebase cho

Kubernetes, hỗ trợ

back-end sử dụng

tốt team DevOps

Node, GraphQL

trong quá trình triển

server.

khai ứng dụng lên

Tích hợp Docker và

cloud.

Kubernetes cho
trường
development và
production.
-

Triển khai ứng
dụng lên Azure.

-

Triển khai các API

cho back-end.
10, 11, Giai đoạn beta:
12

-

-

-

Anh Lê

09 / 10

Làm việc hiệu quả

Viết api và unit testing cho Xuân

với team Design và

các API bên back-end.

QC. Hỗ trợ tốt

Hải

Triển khai giao diện trang

Product Owner

web từ thiết kế Figma

trong việc hồn

theo từng màn hình,

thành tài liệu cho

component.

dự án.

Viết các xử lý logic cho
các màn hình,
component.

-

Kết nối các API từ backend cho từng màn hình,
component.

Lê Xuân Hải

Nguyễn Duy Cương
1313


-

Kết nối logic giữa các
màn hình.

-

Viết unit testing cho frontend.

-

Tối ưu css và image cho
trang web.

-

Build source code và triển
khai lên server.

-

Fix các bug bị test thất bại
từ bộ phận QC.

-

Hoàn thành các tài liệu về
dự án.

Lê Xuân Hải

Nguyễn Duy Cương
1414


Chương 3: Chi tiết về project
1. Giới thiệu về dự án:
Tên dự án: Tích hợp kênh bán bảo hiểm trên ứng dụng banking của ngân hàng
Nam Á.
1.1.

Ý tưởng

SaveMoney là một platform lớn chuyên về mảng bảo hiểm kỹ thuật số,
SaveMoney là gateway trung gian giữa các công ty kinh doanh bảo hiểm và các
đối tác có chiến lược phân phối bảo hiểm đến người dùng cuối. Ngân hàng Nam
Á là một trong những mắt xích quan trọng quan việc phân phối bảo hiểm đến tay
người dùng. Xuất phát từ nhu cầu mua bảo hiểm cho xe máy, ô tô lớn từ người

dùng, công ty cổ phần SaveMoney và ngân hàng Nam Á tiến hành hợp tác để
tích hợp kênh bán bảo hiểm trên ứng dụng banking của ngân hàng này nhằm
đáp ứng nhu cầu mua bảo hiểm lớn của người dùng.
1.2.

Các màn hình chính và tính năng

Vì các lý do liên quan đến bảo mật, bí mật kinh doanh của công ty cổ phần
SaveMoney và ngân hàng Nam Á, sinh viên chỉ được trình bày một số tính năng
được cho phép từ cơng ty cổ phần SaveMoney.
1.2.1. Màn hình Trang chủ
Màn hình Trang chủ chứa thơng tin các gói bảo hiểm, các sản phẩm bảo hiểm,
các đối tác cung cấp sản phẩm bảo hiểm, các bài viết và quảng cáo.

Lê Xuân Hải

Nguyễn Duy Cương
1515


1.2.2. Màn hình nhập thơng tin xe
Màn hình u cầu khách hàng nhập các thông tin về ô tô như: mục đích sử
dụng, thương hiệu, dịng xe, năm sản xuất, biển số,...

Lê Xuân Hải

Nguyễn Duy Cương
1616

1.2.3. Màn hình Trả lời câu hỏi chống trục lợi
Màn hình này sẽ hỏi người dùng một số câu hỏi nhằm chống trục lợi từ người
dùng.

Lê Xuân Hải

Nguyễn Duy Cương
1717


1.2.4. Màn hình danh sách sản phẩm so sánh
Màn hình này chứa thông tin các sản phẩm bảo hiểm phù hợp với người dùng
kèm theo chức năng so sánh sản phẩm.

Lê Xuân Hải

Nguyễn Duy Cương
1818


1.2.5. Màn hình so sánh bảo hiểm xe
Màn này so sánh 2 gói sản phẩm bảo hiểm xe dựa trên các tiêu chí giá cả, thời
hạn sử dụng, lợi ích kèm theo,...

Lê Xuân Hải

Nguyễn Duy Cương
1919

1.2.6. Màn hình đăng ký gói bảo hiểm
Màn hình u cầu khách hàng nhập các thông tin liên quan đến việc đăng ký
mua sản phẩm bảo hiểm.

Lê Xuân Hải

Nguyễn Duy Cương
2020


1.2.7. Màn hình đăng ký chủ sở hữu
Màn hình yêu cầu nhập các thông tin liên quan đến chủ sở hữu như: họ tên,
ngày sinh, địa chỉ, CMND,...

Lê Xuân Hải

Nguyễn Duy Cương
2121


1.2.8. Màn hình xác nhận thanh tốn
u cầu người dùng xác nhận thơng tin trước khi tiến hành thanh tốn mua sản
phẩm bảo hiểm.

Lê Xuân Hải

Nguyễn Duy Cương
2222

2. Thực hiện
3 thành viên của team internship:
-

Nguyễn Duy Cương

-

Nguyễn Lê Ngọc Thanh

-

Trịnh Xuân Đức

1 thành viên mentor:
-

Anh Lê Xuân Hải

Lê Xuân Hải

Nguyễn Duy Cương
2323


3. Kế hoạch
Giai đoạn alpha:
-

Lên kế hoạch

-

Tìm hiểu nghiệp vụ chung

-

Viết codebase cho front-end sử dụng React, Ant Design, GraphQL client.

-

Viết codebase cho back-end sử dụng Node, GraphQL server.

-

Tích hợp Docker và Kubernetes cho trường development và production.

-

Triển khai ứng dụng lên Azure.

-

Triển khai các API cho back-end.
Kết quả: Hoàn thành 100% các yêu cầu đã được giao.

Giai đoạn beta:
-

Viết api và unit testing cho các API bên back-end.

-

Triển khai giao diện trang web từ thiết kế Figma theo từng màn hình,
component.

-

Viết các xử lý logic cho các màn hình, component.

-

Kết nối các API từ back-end cho từng màn hình, component.

-

Kết nối logic giữa các màn hình.

-

Viết unit testing cho front-end.

-

Tối ưu css và image cho trang web.

-

Build source code và triển khai lên server.

-

Fix các bug bị test thất bại từ bộ phận QC.
Kết quả: Hoàn thành 100% các yêu cầu đã được giao.

TÀI LIỆU THAM KHẢO
/>Lê Xuân Hải

Nguyễn Duy Cương
2424


/> /> /> /> /> /> /> /> /> /> /> />
TỔNG KẾT
Như vậy, chỉ trong vòng một khoảng thời gian ngắn 12 tuần, em đã được trải nghiệm
và học hỏi rất nhiều kỹ năng, kiến thức quan trọng để có thể thích ứng nhanh với cơng
việc của một lập trình viên web trong tương lai.

Lê Xuân Hải

Nguyễn Duy Cương
2525