báo cáo thực tập lập trình WEB với REACTJS

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
----------

BÁO CÁO THỰC TẬP DOANH NGHIỆP

LẬP TRÌNH WEB VỚI REACTJS

Nơi thực tập: Cơng ty TNHH Virtual Desire Event
Người hướng dẫn: Kiều Trí Đăng
Sinh viên thực hiện: Nguyễn Thanh Hồng
Mã số sinh viên: 17520514

Tp. Hồ Chí Minh, ngày 15 tháng 12 năm 2020


LỜI MỞ ĐẦU
Những năm gần đây, ngành công nghệ thông tin luôn phát triển với tốc độ cao ở
Việt Nam địi hỏi một nguồn nhân lực lớn. Các cơng ty product cũng như outsourcing
đều muốn tạo ra các sản phẩm chất lượng đến và mang đến trải nghiệm tốt nhất với
khách hàng. Chính vì thế, người chịu trách nhiệm đảm bảo chất lượng sản phẩm thông
qua việc làm việc tương tác giữa các bên liên quan là rất cần thiết.
Trong bài báo cáo này, tơi xin được trình bày về chương trình thực tập tại Cơng ty
TNHH Virtual Desire Event với vị trí (Frontend Developer) với việc tham gia làm việc
trên platform của công ty.
Nội dung bài báo cáo gồm các phần sau
-

Giới thiệu cơng ty và chương trình thực tập

-

Báo cáo nội dung thực tập

-

Kinh nghiệm thực tiễn thu được

-

Những đóng góp cho cơng ty


LỜI CẢM ƠN
KHOA CÔNG NGHỆ PHẦN MỀM
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Em xin chân thành cảm ơn trường Đại học Công nghệ Thông tin và Khoa Công nghệ
Phần mềm đã tạo điều kiện cho em hoàn thành tốt đợt thực tập doanh nghiệp. Nhờ đợt thực
tập này đã giúp cho em rất nhiều kinh nghiệm quý báu. Những kinh nghiệm đó sẽ giúp em
hồn thiện hơn trong cơng việc và môi trường làm việc sau này .
Em cũng xin cảm ơn q thầy cơ trong khoa đã tận tình giảng dạy và trang bị cho em
những kiến thức cần thiết. Chính những kiến thức này hỗ trợ em rất trong việc hồn thành
khóa thực tập doanh nghiệp.
Mặc dù em đã cố gắng hoàn thành báo cáo thực tập doanh nghiệp. Tuy nhiên sẽ có
những thiếu sót, rất mong nhận được sự thông cảm, chia sẻ của quý thầy cô để giúp em
hồn thành tốt bộ mơn thực tập doanh nghiệp.
Một lần nữa em xin chân thành cảm ơn !

Hồ Chí Minh, ngày 15 tháng 12 năm 2020
Sinh viên thực tập

Nguyễn Thanh Hoàng


LỜI CẢM ƠN
CÔNG TY TNHH VIRTUAL DESIRE EVENT

Em xin chân thành cảm ơn Công ty TNHH Virtual Desire Event đã hỗ trợ, tạo điều
kiện cho em được tham gia thực tập ở Công ty trong thời gian vừa qua.
Em xin đặc biệt cảm ơn anh Võ Đăng Khoa, anh Bùi Thanh Chính, anh Lương Trường
An đã giúp đỡ, kèm cặp em trong suốt quá trình training và thực tập ở công ty. Nhờ sự
hướng dẫn của các anh đã giúp em có kinh nghiệm quý báu .Những kinh nghiệm đó sẽ
giúp em hồn thiện hơn trong cơng việc và mơi trường làm việc sau này .
Mặc dù em đã cố gắng hoàn thành báo cáo thực tập doanh nghiệp. Tuy nhiên sẽ có
những thiếu sót, rất mong nhận được sự thơng cảm, chia sẻ và góp ý của cơng ty để báo
cáo của em có thể tốt và hồn thiện hơn.
Một lần nữa em xin chân thành cảm ơn !

Hồ Chí Minh, ngày 15 tháng 12 năm 2020
Sinh viên thực tập

Nguyễn Thanh Hoàng


NHẬN XÉT
(Của giảng viên)
........................................................................................................................................................................................
........................................................................................................................................................................................
........................................................................................................................................................................................
........................................................................................................................................................................................

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


Mục Lục

PHẦN I. GIỚI THIỆU TỔNG QUAN VỀ DOANH NGHIỆP ................................................................... 1
Giới thiệu tổng quan về Công ty TNHH Virtual Desire Event ........................................................ 1

1.

1.1 Sơ lược về công ty .......................................................................................................................... 1
1.2 Nhiệm vụ, chức năng...................................................................................................................... 2

1.3 Cơ cấu tổ chức ................................................................................................................................ 6
1.4 Văn hóa cơng ty .............................................................................................................................. 6
Giới thiệu về cơng việc..................................................................................................................... 8

2.

2.1

Vị trí ......................................................................................................................................... 8

2.2

Cơng việc.................................................................................................................................. 8

2.3

u cầu ..................................................................................................................................... 8

2.4

Nhiệm vụ của sinh viên thực tập .............................................................................................. 8

2.5

Nội dung training trước khi làm việc được note lại trên notion ............................................... 9

PHẦN II. CƠNG NGHỆ, GIẢI PHÁP, QUY TRÌNH ÁP DỤNG ............................................................ 10
1. Giới thiệu về Git và Source Tree ........................................................................................................ 10
1.1 Git ................................................................................................................................................. 10
1.2.

SourceTree.................................................................................................................................. 15

PHẦN III. NỘI DUNG THỰC TẬP .......................................................................................................... 21
1.

Nhiệm vụ của sinh viên được giao ................................................................................................. 21

PHẦN IV. KẾT LUẬN .............................................................................................................................. 22
1.

Nhận xét đánh giá về doanh nghiệp và góp ý của sinh viên ........................................................... 22
1.1 Về quy mô công ty ....................................................................................................................... 22
1.2 Về môi trường làm việc ................................................................................................................ 22
1.3 Về văn hóa cơng ty ....................................................................................................................... 23

2.

Kinh nghiệm đạt được .................................................................................................................... 23


PHẦN I. GIỚI THIỆU TỔNG QUAN VỀ DOANH NGHIỆP
1. Giới thiệu tổng quan về Công ty TNHH Virtual Desire Event
1.1 Sơ lược về công ty
Tên công ty: Công ty TNHH Virtual Desire Event
Địa chỉ: 106 - 108 Bùi Đình Túy, Phường 12, quận Bình Thạnh, TPHCM
Điện thoại: 1800 6872
Mã số thuế: 0313940971
Email:
Địa chỉ Website: />VDEs - start-up chuyên về công nghệ, do chị Nguyễn Thị Xuân Ngọc (Ann

Nguyễn) sáng lập và ra mắt vào tháng 2/2017 với mục tiêu đưa ứng dụng
thực tế ảo vào tìm kiếm địa điểm và tổ chức sự kiện tại Việt Nam.
VDES là công ty công nghệ, ứng dụng kĩ thuật tiên tiến vào ngành cơng
nghệ sự kiện. Bên cạnh đó, trang web www.VDES.vn là trang thương mại
điện tử (e – commerce), tìm kiếm địa điểm và hỗ trợ khách hàng tổ chức sự
kiện cùng với sự khác biệt chưa từng xuất hiện tại Việt Nam. Đồng thời,
VDES mong muốn trở thành một phương tiện kết nối hiệu quả với tất cả các
đối tác dịch vụ tổ chức sự kiện tại Việt Nam và trên toàn thế giới.
Khách hàng đặt dịch vụ tổ chức sự kiện (hội thảo, hội nghị, tiệc cưới…) qua
VDEs sẽ tiết kiệm 80% thời gian và 30% chi phí trên tổng thể kế hoạch.
VDEs khơng thu bất cứ khoản phí nào đối với người dùng khi đặt địa điểm,
dịch vụ, mà chỉ thu phí hoa hồng của đơn vị cung cấp dịch vụ khi hợp đồng
được chốt. Ngồi ra, thơng qua các gói bảo hiểm, khách hàng và nhà cung
cấp có ràng buộc chặt chẽ, tránh những rủi ro khi tổ chức sự kiện.

1


1.2 Nhiệm vụ, chức năng
1.2.1 Phát triển nền tảng của cơng ty dành cho phía khách hàng
Thơng qua trang website (VDES), công ty cung cấp một nền tảng trực tuyến
thông qua tất cả các loại địa điểm và nhà cung cấp tạm thời (ví dụ như khách
sạn, nhà hàng, hội trường tiệc cưới, trung tâm hội nghị, tiệm bán hoa, chỗ
th đồ nội thất, trang trí sự kiện), có thể quảng cáo sản phẩm của họ cho
việc đặt chỗ và thơng qua đó khách hàng đến trang website để có thể đặt
chỗ. Bằng cách tạo một cái đặt chỗ qua VDES, bạn ký vào một hợp đồng
trực tiếp (ràng buộc pháp lý) mối quan hệ với người tổ chức sự kiện mà bạn
đặt chỗ. Từ quan điểm này, bạn có thể đặt chỗ của bạn, cơng ty đóng vai trị
như trung gian giữa bạn và nhà cung cấp, truyền tải những chi tiết thông tin
cho việc đặt chỗ của bạn tới nhà cung cấp sự kiện và gửi cho bạn mail xác

nhận để thay mặt và cho nhà cung cấp sự kiện.

2


3


1.2.2 Phát triển nền tảng cho nhà cung cấp, đối tác
Thông qua trang website (VDES.vn/extranet), công ty cung cấp một nền
tảng trực tuyến giúp đối tác của vdes có thể quản lý các sản phẩm, gói sản
phẩm, ưu đãi, thơng tin địa điểm, dịch vụ của họ thông qua vdes và được
đăng tải trên trang vdes.vn. Đang phát triển thành dạng module để bán cho
doanh nghiệp sử dụng để quản lý công ty của họ.

4


1.2.3 Phát triển nền tảng cho chính vdes dùng để quản lý
Thông qua trang website (VDES.vn/vsm), công ty cung cấp một nền tảng
trực tuyến các bộ phận trên công ty thực hiện các nghiệp vụ online, có 1 nền
tảng quản lý trực quan, tiện lợi.

5


1.3 Cơ cấu tổ chức

Giám Đốc

Trợ Lý
Giám Đốc

Bộ phận
nhân sự

Bộ phận
Designer

Tech
Developer

Bộ phận
BA/QA

Bộ phận
kế toán

Bộ phận
Marketing

Sơ đồ 1: Cơ cấu tổ chức Cơng ty TNHH Virtual Desire Event

1.4 Văn hóa cơng ty
- Nhân viên phải có mặt ở cơng ty trước 09:30 AM và check in bằng
fingerprint. Nếu đi làm trễ hoặc về sớm thì phải báo cáo ở channel
xin_nghi_phep trên slack

6

- Thời gian làm việc từ thứ 2 đến thứ 7 và làm việc 40 tiếng 1 tuần tối
thiểu 6 tiếng 1 ngày, thứ 7 tối thiểu 4 tiếng.
- Thời gian nghỉ trưa từ 12:00 PM đến 1:30 PM, mọi nhân viên có thể
ăn trưa và ngủ trước khi bắt đầu cơng việc vào buổi chiều.
- Mỗi tháng có tổ chức outing theo từng phòng, bộ phận sẽ được trưởng
bộ phận sắp xếp địa điểm outing, làm việc ở bên ngồi cơng ty
- Mỗi chiều 05:30 PM tồn cơng ty sẽ tham gia peer testing cho
platform của mình để hồn thiện sản phẩm.
- Mỗi sáng 09:45 AM mọi thành viên sẽ thực hiện report cơng việc của
mình qua bot standup trên slack với 3 câu hỏi hơm trước làm gì, hơm
nay làm gì, có stuck ở đâu khơng.

7


2. Giới thiệu về cơng việc
2.1 Vị trí
Sinh viên thực tập tại vị trí Frontend Developer
2.2 Cơng việc
- Tìm hiểu về quy trình làm việc, làm task, nghiệp vụ cơng ty
- Tham gia vào phát triển nền tảng của công ty (vdes.vn)
2.3 Yêu cầu
- Nắm được quy trình làm việc và tuân thủ đúng
- Hiểu rõ các kiến thức, công nghệ, công cụ cơ bản và nâng cao đang
được sử dụng như NexJS, ReactJS, Mobx, Loopback 4, Axios, Eslint,
Mongo, Nodejs, Airtable, Gitlab, Slack, Discord…
- Giao tiếp tốt và phối hợp làm việc hiệu quả với các thành viên trong
công ty
2.4 Nhiệm vụ của sinh viên thực tập

- Hoàn thành đầy đủ các task trong được giao.
- Thực hiện theo quy trình phát triển phần mềm của cơng ty.
- Đi làm đúng giờ, số ngày trong tuần theo thỏa thuận với cơng ty. Tối
thiểu 20h/tuần và thực tập trong vịng 3 tháng.

8


2.5 Nội dung training trước khi làm việc được note lại trên notion

9


PHẦN II. CƠNG NGHỆ, GIẢI PHÁP, QUY TRÌNH ÁP DỤNG
1. Giới thiệu về Git và Source Tree
1.1 Git

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. Đại loại là như vậy.

10

Mơ hình hoạt động của DVCS
Ngồi ra, có một cách hiểu khác về Git đơn giản hơn đó là nó sẽ giúp bạn lưu lại
các phiên bản của những lần thay đổi vào mã nguồn và có thể dễ dàng khôi phục
lại dễ dàng mà không cần copy lại mã nguồn rồi cất vào đâu đó. Và một người
khác có thể xem các thay đổi của bạn ở từng phiên bản, họ cũng có thể đối chiếu
các thay đổi của bạn rồi gộp phiên bản của bạn vào phiên bản của họ. Cuối cùng là
tất cả có thể đưa các thay đổi vào mã nguồn của mình lên một kho chứa mã nguồn.
11


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.

Git Flow
12


13


Git Branching

14


1.2.

SourceTree

SourceTree là một tool hỗ trợ quản lý Git version với giao diện dễ dùng.
Kéo dự án về ( Clone project )
– Bạn click vào Clone/new một popup sẽ hiện ra

15


Lưu ý:
•

Cách lấy source path/url

chỉ cần copy đoạn code trên paste vào Source Url sẽ tự sinh ở destination
path, nếu để tự sinh thì nó sẽ được lưu vào thư mục mặc định nên bạn cần thay đổi
lại đường dẫn Destination Path trỏ vào một thư mục rỗng( bạn phải chắc chắn thư
mục đó là rỗng ). Sau đó click vào clone lúc này thư mục cho dự án đã được kéo về
máy tính cá nhân của bạn. Ở các máy thành viên khác cũng làm tương tự.
Đẩy code lên( push code )
Đây là việc cần thiết khi có sự thay đổi trong source code, trước khi push được bắt
buộc phải click vào unstaged files và comment -> click vào push trên toolbar của
source tree. Việc làm này phải được thực hiện thường xuyên khi có sự thay đổi về
code để người quản lý có thể quản lý được cơng việc cũng như là các thành viên
khác có thể nắm bắt được sự thay đổi.

16


17

Kéo code về( pull code )
Cũng giống như Push code lên tuy nhiên việc bây giờ chỉ là lấy code về bao gồm
những thay đổi mà thành viên khác đã push lên. Bạn chỉ cần click vào Pull ở
trên toolbar của source tree

Lưu ý:
– Nếu có nhiều người cùng thay đổi trên 1 file và cùng một chỗ thì chắc chắn bạn
sẽ bị conflict và việc pull hoặc Push code lên sẽ báo lỗi và không thực hiện được.
Dấu hiệu nhận biết lỗi Conflict sẽ xuất hiện dòng lỗi sau:
1 Auto-merging hello.html
2 CONFLICT (content): Merge conflict in hello.html
3 Automatic merge failed; fix conflicts and then commit the result.

18


2. Giới thiệu về VSCode

Visual Studio Code là sản phẩm của Microsoft, ra mắt vào tháng 4 năm 2015 ở
hội nghị Build. Đặc điểm nổi bật là đơn giản, gọn nhẹ, dễ dàng cài đặt. Visual
Studio Code có thể cài đặt được trên cả Windows, Linux và Mac OS và hỗ trợ
nhiều ngôn ngữ
Giao diện ban đầu:

19