Lập trình website với mern stack

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 WEBSITE VỚI MERN STACK

Cơng ty thực tập

: TAPTAP

Người phụ trách

: Lý Cẩm Hào

Thực tập sinh

: Nguyễn Cơng Phi

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

1


LỜI MỞ ĐẦU

Ngày nay, ứng dụng web hay webapp là một phần không thể thiếu trong việc xây dựng
các ứng dụng, nhất là đối với các ứng dụng quản lý. Với tính tiện dụng, có thể truy cập trên tất
cả các thiết bị thơng thường thì việc sử dụng web để xây dựng các phần mềm đang dần trở nên
phổ biến.
Đối với em, do chưa có điều kiện sở hữu những thiết bị có cấu hình cao nên việc sử dụng

web để học tập, giải trí là việc làm thường ngày. Có khi em sử dụng web để xem phim, lướt
web, cũng có khi sử dụng web để thực hiện một số công việc phức tạp như photoshop, sử dụng
web để dựng video. Sử dụng càng nhiều, em càng tò mò về cấu trúc trang web, hệ thống trang
web, cách website hoạt động. Những khi trang web gặp sự cố hay lỗi ảnh hưởng đến trải
nghiệm, em cũng có tìm hiểu nguyên nhân và càng ngày càng có niềm đam mê tìm hiểu về các
trang web.
Trong các mơn học ở kỳ trước thì em đã được học các mơn học về web, cũng đã biết
cách xây dựng một trang web cơ bản với HTML, CSS và JavaScript, sau đó dần dà làm quen
với MERN stack. Do mong muốn có thêm kinh nghiệm thực tế, cũng như muốn được tham gia
làm web trong một mơi trường chun nghiệp. Em có dự định tham gia thực tập tại một cơng ty
có nhu cầu. Ứng tuyển vào trong chương trình TAPTAP TechFresher, em đã có cơ hội được
làm việc tại một mơi trường chun nghiệp, nơi có các anh chị ln nhiệt tình hỗ trợ, giải đáp
thắc mắc, luôn đưa ra những lời khuyên, nhận xét, đánh giá để giúp em phát triển hơn từng ngày

2


LỜI CẢM ƠN

Em xin được gửi lời cảm ơn đến cơng ty TAPTAP, chương trình Tech Freshser đã tạo
điều kiện cho em có cơ hội được thực tập tại cơng ty, tham gia chương trình đào tạo đầy bổ ích.
Trải qua 3 tháng, nhờ sự chỉ dẫn nhiệt tình của các anh chị trong team Loyalty và
Discovery, em đã tiếp thu được những kiến thức quan trọng để có thể tạo nên một trang web,
không chỉ là chạy được mà cịn phải tối ưu, bảo mật, dễ bào trì. Rất cảm ơn tất cả mọi người đã
bỏ ra nhiều thời gian, cơng sức hướng dẫn chúng em hồn thành chương trình thực tập này
Đặc biệt cảm ơn anh An, đã đưa ra các thử thách, từ đó hướng dẫn chúng em đi sâu, hiểu
bản chất của các công nghệ. Cảm ơn anh Hùng đã hướng dẫn em rất nhiều về quy trình, đưa ra
các cải thiện cho em về kỹ năng mềm. Cảm ơn anh Hào đã giúp em giải đáp các thắc mắc, xử lý
nhiều lỗi về code và convention. Cảm ơn anh Tú, Phúc đã giúp em review, chỉnh sửa code. Cảm
ơn chị Hồng đã hỗ trợ em giải quyết các thắc mắc về frontend.

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.
Nguyễn Công Phi
TpHCM, ngày 21/12/2022

3


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

4

Mục lục

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

Giới thiệu công ty TAPTAP............................................................................................................6

2.

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

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

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

2.

Nghiên cứu kỹ thuật.......................................................................................................................10
2.1 HTML, CSS, Các nguyên tắc design..........................................................................................10
2.2 JavaScript....................................................................................................................................11
2.3 MERN Stack...............................................................................................................................12
2.4

Docker, K8S...........................................................................................................................13

3.

Thực hiện project...........................................................................................................................14

4.

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

Chương 3: Chi tiết về project....................................................................................................................16
TÀI LIỆU THAM KHẢO.........................................................................................................................23

5


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

1. Giới thiệu công ty TAPTAP
-

TAPTAP là một công ty công nghệ với sản phẩm chính là ứng dụng di động TAPTAP,
có trụ sở chính ở quận 1, thành phố Hồ Chí Minh. Là một công ty product, công ty luôn
đổi mới và đem đến trải nghiệm, ưu đãi ngày càng tốt cho người sử dụng app với việc
ngày càng có nhiều liên kết với các nhãn hàng nổi tiếng như Pepsi, Long Châu, The
Pizza Company,…

-

TAPTAP được thành lập vào năm 2020 bởi VIG(đơn vị quản lý quỹ đầu tư doanh nghiệp
hàng đầu tại Việt Nam) và UOB(một trong 3 ngân hàng lớn nhất Đông Nam Á với giá trị
tài sản hơn 300 tỷ USD, có trụ sở tại Singapore)

-

Là một cơng ty công nghệ của Việt Nam, TAPTAP đang dần phát triển mạnh với số

người dùng ngày càng khổng lồ, tính đến thời điểm hiện tại có khoảng 3 triệu người dùng
và với hơn 50 nhãn hàng liên kết. Sản phẩm của TAPTAP ngày càng được mọi người
biết đến rộng rãi và đem lại giá trị lớn cho người sử dụng.
6


2. Sản phẩm của cơng ty
- Sản phẩm chính cơng ty là ứng dụng di động TAPTAP, hiện đang khả dụng trên
Appstore và Google play

7


- TAPTAP là ứng dụng di động hỗ trợ người dùng tích điểm VUI từ đó đổi lấy những ưu
đãi về ăn uống, giáo dục hay giải trí qua các Voucher. Điểm VUI có thể tích được khi
mua hàng tại các cửa hàng, khi quét các hóa đơn tại các cửa hàng liên kết thì sẽ được
điểm tương ứng với giá trị của hóa đơn.

- Ngồi điểm VUI thì hiện tại cơng ty cũng có những điểm khác như PEPSI coin để đổi
lấy những sản phẩm pepsi hay Pepsibravo coin để đổi các vật phẩm trong sự kiện
Pepsibravo

- TAPTAP là ứng dụng đại diện cho các sự kiện lớn gần đây như: Pepsi Ravolution Music
Festival (Sự kiện âm nhạc có sự trình diễn của các rapper hàng đầu và các ca sĩ nổi
tiếng), HOZO (Sự kiện nổi bật với các khinh khí cầu ở Thủ Thiêm và trung tâm quận 1),
và hiện tại đang có sự kiện siêu khuyến mãi cuối năm ở Vạn Hạnh Mall(kéo dài đến hết
năm 2022).

8

- Nếu muốn sưu tập hay đổi các vật phẩm đặc trưng của TAPTAP(gối kê cổm vali, áo
thun,…) thì có thể đổi bằng các điểm VUI

- Ngồi ra cơng ty còn cung cấp các web CMS để quản lý phần lõi của ứng dụng và
các phần quản lý cho các bên liên quan.

9


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

Đợt thực tập với chủ đề “Lập trình website với MERN Stack” nhằm mục đích giúp thực
tập sinh được đào tạo toàn diện, hiểu sâu, hiểu kỹ về công nghệ web. Bắt đầu từ việc tìm
hiểu cơ bản đến nâng cao về HTML, CSS và JavaScript, sau đó tìm hiểu Web với stack
cơng nghệ về web rất phổ biến đó là MERN Stack. Song song với việc review hàng tuần
các kỹ năng về công nghệ đã nghiên cứu, thực tập sinh có cơ hội được tự do nghiên cứu
những kiến thức liên quan và cải thiện những kỹ năng mềm: kỹ năng giao tiếp với các bộ
phận khác, kỹ năng demo, giải quyết vấn đề,… để có thể làm quen với mơi trường phát
triển web chun nghiệp.

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

Thời gian : 1 ngày

-

Nội dung :

o Giới thiệu về công ty, cách tổ chức của công ty
o Được nghe trưởng bộ phận: anh Hùng và nhân sự: chị Linh giới thiệu về cơng ty,
q trình thành lập và phát triển (như đã nhắc đến ở trên), cách tổ chức công ty,
các quy định của công ty, cách sử dụng template slide, các brand, màu liên quan
trong các văn bản để có sự đồng bộ trong công ty-

-

Kết quả : Hiểu thêm về công ty TAPTAP, q trình thành lập và phát triển. Có được
hiểu biết và hình dung cơ bản về cách thức làm việc trong công ty

2. Nghiên cứu kỹ thuật
2.1 HTML, CSS, Các nguyên tắc design
-

Thời gian : Tuần 1

-

Nội dung :
o Tìm hiểu về HTML, CSS và các nguyên tắc design
10


o Tìm hiểu về HTML, CSS, các ngơn ngữ mà trình duyệt có thể trực tiếp hiểu được
và tạo thành giao diện trên browser
o Trong thời gian này, anh An cũng đưa ra các thử thách tìm hiểu về TOTP: tìm
hiểu về time OTP, OTP được sinh ra dựa theo thời gian, khơng cần kết nối
internet cũng có thể tạo được mã.
-

Thực hiện:
o Thực hành nghiên cứu về HTML, CSS, các nguyên tắc trong design web.
o Nghiên cứu về TOTP
o Nghiên cứu thêm về các vấn đề liên quan đến HTML, CSS:
 A11y(accessibility)
 Semantic HTML
 SEO với HTML
 Reset CSS, tương thích CSS giữa các trình duyệt
 Design và các rule người lập trình cần tránh
 …

-

Kết quả: Hiểu rõ hơn về cách sử dụng của 2 ngôn ngữ cơ bản để tạo nên một trang web,
kết hợp với các nguyên tắc design để tránh các lỗi cơ bản với lập trình web. Thực sự hiểu
cách trang web hoạt động.
o Code phần nghiên cứu: />o Web demo: />2.2 JavaScript

-

Thời gian: Tuần 2, 3

-

Nội dung:
o Tìm hiểu kỹ và chuyên sâu về ngơn ngữ JavaScript
o Tìm hiểu về Clean Code trong JavaScript với các tiêu chuẩn như AirnB
o Nghiên cứu yêu cầu để xây dựng project Album dựa trên MERN Stack:


Hỗ trợ việc upload ảnh, phân quyền người dùng



Xem ảnh với độ phân giải cao

11


-

Thực hiện:
o Tìm hiểu về clean code trong JavaScript như hoisting, hàm closure, type conersion, type
conversion, DOM, Array và các hàm built-in, functional programming, OOP
o Tìm hiểu về các advanced topic như:

-



Memory leak



Độ phức tạp BigO của các hàm



Tối ưu hóa web với Google V8 Engine

Kết quả
o Hiểu rõ về scope, cách JavaScript quản lý bộ nhớ
o Các nội dung mới được thêm vào từ ES7 trở đi
o Học được cách mơ hình hóa một cách trực quan, chính xác hơn, cách giải quyết vấn đề
thông qua project album.
o Code và nghiên cứu: />o Webdemo: />
2.3 MERN Stack
-

Thời gian: Tuần 4, 5, 6

-

Nội dung:
o Tìm hiểu về stack cơng nghệ MERN để nên một trang web
o Tiếp tục nghiên cứu về Project Album
o Ngồi ra anh An có giới thiệu thêm về một số stack công nghệ: Redis, Redux Saga(Để
thực hiện Rollback), mơn hình producer – consumer(piprline, worker, queue, rabbit mq),
Kafka, middleware và cache, process và quản lý, Docker, K8S,…

-

Thực hiện:
o Tìm hiểu về stack cơng nghệ MERN để nên một trang web
o MERN bao gồm


M: MongoDB là một dạng cơ sở dữ liệu NoSQL được ra đời vào năm 2007, có
tính flexible với kiểu hướng tài liệu, lưu trữ dữ liệu dưới dạng JSON, mạnh mẽ

12


trong việc lưu trữ dữ liệu, phù hợp với các ứng dụng realtime giống như mạng xã
hội hoặc thương mại điện thử


E: ExpressJS là một web framework được xây dựng bằng JS chạy trên nền
NodeJS. Nó hỗ trợ thêm nhiều tính năng cần có của 1 framework như: routing,
middlewares, template engines,..



R: ReactJS là một thư viện JS(không phải thư viện của Node) được tạo bởi
Facebook và Instagram. Đặc trưng của nó là cho phép việc Render dữ liệu khơng
chỉ có thể thực hiện ở Server mà cịn có thể thực hiện ở Client(SSR).



N: NodeJS là một JavaScript runtime dùng để tạo ứng dụng mạng nhanh chóng,
theo hướng event-driven và non-blocking IO, sử dụng các built in của HTTP
Server framework để mà sử dụng hosting

-

Kết quả:
o Hiểu rõ hơn về MERN Stack, được các anh chị chỉnh sửa lại các phần kiến thức bị hiểu
sai và giải quyết các thắc mắc.
o Qua project Album hiểu thêm được các vấn đề về công nghệ, đi từ ý tưởng đến giải
quyết vấn đề từ đó output ra sản phẩm

2.4 Docker, K8S
-

Thời gian : Tuần 8, 9

-

Nội dung:
o Được tự do nghiên cứu, học hỏi về công nghệ mà bản thân hứng thú, em chọn Docker và
K8S
o Các anh chị hỗ trợ và review kết quả nghiên cứu

-

Thực hiện:
o Nghiên cứu về Docker với các phần chính: image, container, dockerfile, dockerhub
o Build một image từ một ứng dụng web có sẵn
o Sử dụng Docker để chạy local một số ứng dụng web cần cấu hình phức tạp

-

Kết quả:
13


o Những kiến thức nghiên cứu em có note lại sử dụng docusaurus để tạo document có thể
truy cập nhanh khi cần thiết:


/>
o Hiểu hơn về cách docker hoạt động, cách build images, run container và có thể sử dụng
trong các mục đích sau này

3. Thực hiện project
-

Sau hai tháng được học tập, nghiên cứu, thực tập sinh đã nắm được các kiến thức cơ bản về
HTML, CSS, JavaScript và MERN Stack. Trong tháng thứ ba, 6 bạn thực tập sinh được chia ra
làm 3 nhóm, mỗi nhóm 2 người thực hiện các project khác nhau. Em và Lương Thiện Phước
cùng nhau làm 2 project là các tool nội bộ của tơng ty.

-

Chi tiết dự án sẽ được nói ở phẩn sau

4. Lịch làm việc
Mức
Tuần

Cơng việc

Người hướng dẫn

độ
hồn
thành

-

Tìm hiểu về công ty

-

Nghiên cứu về HTML, và chị Linh

1

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

Anh Hùng, anh An

CSS, các nguyên tắc
design

2, 3

4,5,6,7

-

Nghiên cứu về TOTP

-

Tìm hiểu về JavaScript, Anh An, anh Hùng,
Thiết kế project Album

anh Hào, chị Hồng

-

Tìm hiểu MERN Stack

Anh An, anh Hào

-

Xây dựng project album
tham khảo

8.9

-

Nghiên cứu tự do

Anh An
14


10,11,12

Docker và K8S

- Thực hiện project service Anh An, anh Hào,
registeration

13,14

- Thực

anh Hoàng
hiện

project Anh An, anh Hào,

dashboard monitoring

anh Nhựt

15


Chương 3: Chi tiết về project
3.1 Project 1: Service registration
-

Nội dung project:
o Trong cơng ty có rất nhiều service, hiện tại với cấu trúc cũ, khi tạo một service với,
người tạo service phải tạo một trang confluence, sau đó viết mô tả các service. Việc này
đặt ra vấn đề là khi tạo một service sẽ tốn thời gian, khó quản lý và khơng biết được các
service này có tương tác với nhau như thế nào
o Từ đó đặt ra vấn đề phải có một phần mềm quản lý các service này, hỗ trợ việc nhập các
service của người dùng
o Dưới sự gợi ý của anh An, nhóm em gồm em và Phước thực hiện tạo các trang: form
nhập các service, sửa, xóa service, visualise sự tương tác giữa các service bằng các biểu
đồ

-

Các tính năng chính:
o Đăng nhập, đăng xuất, authentication
o Quản lý service:

-



Thêm, sửa service dưới dạng JSON và dưới dạng form



Xóa service



Kiểm tra sự phụ thuộc của các service



Xem tất cả service để tiện cho việc quản lý

Các màn hình chính:
o Xem service:

16

-

Thêm service

17


-

Tổng kết project:
o Giá trị của project:


Giúp việc thêm service được đơn giản hơn, tiện dụng cho việc quản lý, kiểm tra
sự phụ thuộc của các service

o Ưu điểm:


Đã thực hiện được tính năng cơ bản cho việc nhập



Kiểm tra được sự phụ thuộc, thông báo cho người dùng khi người dùng thêm
hoặc xóa service



Tiện cho DevOps có cái nhìn tổng quát hơn về dự án

o Nhược điểm


Giao diện còn chưa tiện dụng, cách bố trí các ơ nhập, các nút chưa hợp lý

o Những kiến thức học được:
18




Trong q trình làm, em có tham gia vào q trình deploy, biết thêm các kiến
thức sử dụng biến mơi trường và bước đầu sử dụng CI CD



Học được cách cấu hình một project hồn chỉnh để deploy với MERN Stack

3.2 Project 2: VUI Monitoring
-

Nội dung project:
o Mỗi khi các anh chị Product muốn xem chi tiết số điểm VUI được cho đi hay số điểm
VUI được sử dụng trong ngày thì phải sử dụng BigQuery hay MongoDB để truy vấn thì
sẽ rất tốn thời gian và khơng xem được realtime để kiểm sốt hay nắm được tình hình khi
điểm VUI được cho đi hay sử dụng vượt quá ngưỡng an tồn.
o Do đó, em và Phước dưới sự gợi ý và hướng dẫn của anh An đã xây dựng nên một ứng
dụng giúp xem chi tiết sự chuyển đổi của dịng tiền VUI

-

Các tính năng chính:
o Xem dịng tiền VUI chuyển đổi theo ngày, tuần, tháng
o Xem dòng tiền VUI chuyển đổi realtime
o Lọc theo các nhãn hàng, service có chuyển đổi dịng tiền
o Xem chi tiết các giao dịch chuyển đổi dịng tiền VUI

-

Các màn hình:
o Màn hình chính xem chuyển đổi dịng tiền VUI:

19


o Màn hình Realtime xem trực tiếp chuyển đổi của dòng tiền VUI

-

Xem chi tiết các giao dịch

-

Tổng kết project:
o Giá trị project:


Giúp bên Product và Dev nắm được thông tin khi dịng tiền VUI có vấn đề



Trực quan các kết quả giúp cho việc đưa vào các báo cáo tiện lợi hơn



Rà soát, kiểm tra các giao dịch ở các thời điểm cụ thể
20