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

REACTJS
LẬP TRÌNH WEB
Cơng ty thực tập: UNBOXX
Người phụ trách: Nguyễn Tấn Diệu
Thực tập sinh: Nguyễn Lê Trung

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


LỜI MỞ ĐẦU
Hiện nay, việc mua sắm trực tuyến trên các trang thương mại điện tử đang ngày
càng trở nên phổ biến, từ các mặt hàng gia dụng thường ngày đến chăm sóc sức khỏe hay
các dịch vụ pháp lý, tài chính.
Trong tương lai, lĩnh vực này được dự đốn có thể trở thành một cuộc cách mạng
hiện đại của cơng nghệ, thay đổi hồn tồn cách thức mua bán hàng hóa truyền thống.
Cơng nghệ Web được hầu hết các công ty sử dụng và phát triển, cùng với sự ra đời
React của Facebook đã giúp thiết kế UI dễ dàng hơn so với Angular.Vì thế, em quyết
định chọn lập trình Web làm định hướng cho việc học tập của mình.
Sau ba năm học tập trên trường, 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 chuyên nghiệp, định là.Vì
vậy, em quyết định chọn Unboxx - một mơi trường lý tưởng, hiện đại, chuyên nghiệp - là
nơi sẽ giúp em thực hiện được dự định này.

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


LỜI CẢM ƠN
Trân trọng gửi lời cảm ơn Công ty Unboxx đã tạo điều kiện cho em có cơ hội
được thực tậ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ể thiết kế
được UI cho một trang thương mại điện tử.
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 hồn thành đợt thực tập này.
Đặc biệt cảm ơn anh Nguyễn Tấn Diệu, đã training React, hướng dẫn, giúp đỡ cho
chúng em tận tình cả những khó khăn trong cơng việc, đến những khó khăn việc làm
quen với mơi trường mới cũng như đã training cho chúng em những kiến thức quan trọng
về JavaScript, CSS3,HTML5 để có thể làm ra một sản phẩm trong thời gian qua.
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 Lê Trung
TP. HCM, ngày 24 tháng 12 năm 2021

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


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

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

MỤC LỤC

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


CHƯƠNG 1: GIỚI THIỆU VỀ CÔNG TY THỰC TẬP......................................................................5
1.

Giới thiệu công ty Unboxx.........................................................................................................5

2.


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

CHƯƠNG 2: NỘI DUNG THỰC TẬP....................................................................................9
1.
2.

Tìm hiểu cơng ty và các kỹ năng cơ bản trong công ty................................................................9
Nghiên cứu kỹ thuật..................................................................................................................9

2.1.
2.2.

Các công cụ làm việc.......................................................................................................................... 9
Tìm hiểu ngơn ngữ Reactjs.............................................................................................................. 10

3.

Thực hiện Project.....................................................................................................................11

4.

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

CHƯƠNG 3. CHI TIẾT PROJECT..............................................................................................13
1.
2.

Giới thiệu về LayoutBuilder.....................................................................................................13
Hình ảnh của giao diện LayoutBuilder......................................................................................13
2.1.

2.2.

Tạo Component Basic Banner.......................................................................................................... 13
Lưu hình ảnh banner vào thư viện.................................................................................................. 14

TÀI LIỆU THAM KHẢO............................................................................................................15
TỔNG KẾT..............................................................................................................................16

CHƯƠNG 1: GIỚI THIỆU VỀ CƠNG TY THỰC TẬP
1. Giới thiệu cơng ty Unboxx

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


Unboxx được thành lập năm 2019, là công ty xây đựng sàn thương mại
điện tử tập trung vào ngách thời trang cho giới trẻ (Local Branch), Unboxx là nơi
tập trunng cách nhà bán hàng thời trang cho giới trẻ.
Mục tiêu công ty tạo ra một sản phẩm mới kết nối các thương hiệu thời
trang trên thị trường Việt Nam để từ đó người dùng có thể lựa chọn sản phẩm đa
dạng và phong phú hơn.
2. Sản phẩm của công ty
-

Unboxx tạo ra một sàn thương mại điện tử, tập trung kết nối nhà bán hàng của
các sản phẩm thời trang danh cho giới trẻ, bao gồm ứng dụng Web và App

-


Một số hình ảnh của sản phẩm chính cơng ty.

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


CHƯƠNG 2: NỘI DUNG THỰC TẬP
Đợt thực tập với chủ đề “Xây dựng LayoutBuilder” 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 Frontend trên Web, đồ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 game chuyên
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 : Giới thiệu về công ty, cách tổ chức của công ty
Được nghe 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 (như đã nhắc đến ở trên), quy trình làm việc từ cao xuống thấp, cách
thức tổ chức của cơng ty .
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ách sử dụng email
trong công việc…
Kết quả : Hiểu thêm về cơng ty Unboxx, q trình thành lập và phát triển. Có
thêm các kỹ năng về việc sử dụng email trong cơng việc, làm việc có kế hoạch, có
kỷ luật, có trách nhiệm hơn.
2. Nghiên cứu kỹ thuật
2.1. Các công cụ làm việc
Thời gian : 4 ngày
Nội dung : Tìm hiểu về các cơng cụ sẽ được sử dụng trong quá trình làm việc.
Trong thời gian này, supervisor đã hướng dẫn thực tập sinh tìm hiểu về các
cơng cụ sẽ giúp ích cho trong cơng việc sau này. Một số phần mềm trong số đó
như Gitlab để quản lí source code – Jira sử dụng trong làm việc nhóm, Source
Tree - cơng cụ hỗ trợ quản lí code
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ập trình sử dụng các cơng cụ miễn phí, giúp dễ dàng kết hợp các
2.2.

cơng cụ với nhau, so với việc dung các IDE.
Tìm hiểu ngôn ngữ Reactjs
Thời gian : 10 ngày (2 tuần)
Nội dung: Các kiến thức cơ bản về JavaScript và ReactJS

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


-

Các lý thuyết cơ bản về JavaScript.

Kiến thức về ngôn ngữ JavaScript
Nắm vững các lý thuyết về const, let, var trong JavaScript.
Bên cạnh đó cịn có các lý thuyết: function, promise, ...
- Kiến thức về React:
Nắm chắc khái niệm Virtual DOM trong React.
Lý thuyết về React Hook
Responsive với React Bootstrap

-

Tìm hiểu và sử dụng thư viện Antd và Tailwind
Thực hiện:
- Tham gia đầy đủ các buổi trainning.
- Làm các bài tập thực hành javascript cơ bản, React, ...
- Tìm kiếm tài liệu trên mạng để tìm hiểu thêm.
Kết quả:
- Hiểu được những khái niệm cơ bản trong lập trình ReactJS.
- Biết cách tổ chức và xây dựng một web page.

3. Thực hiện Project

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


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ề React, JavaScript, HTML5,CSS và thư viện hỗ trợ Antd, TailWind. Trong
tháng thứ hai, trainer đã hướng dẫn thực tập sinh áp dụng những kiến thức đã học để thực
hiện một project LayoutBuilder bằng Reactjs.

Chi tiết đồ án sẽ được nói ở phần sau
4. Lịch làm việc
Tuần

Công việc

1

Cài đặt môi trường
làm việc

2,3,4

React

Người hướng dẫn

Mức
độ
hoàn
thàn
h

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

Anh Nguyễn Tấn Diệu


+ JavaScript
+ Css (thư viện
Tailwind)
+React framework
+ Antd framework
5

Review

Anh Nguyễn Tấn Diệu

6,7,8

LayoutBuilder

Anh Nguyễn Tấn Diệu

+ LayoutBuilder

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


+ Review
LayoutBuilder
9

Viết doc


CHƯƠNG 3. CHI TIẾT PROJECT
1. Giới thiệu về LayoutBuilder
LayoutBuilder là nơi để nhà bán hàng lựa chọn hoặc tự thiết kế cho gian hàng
của họ, tạo ra các layout có sẵn để nhà bán hàng thiết kế một cách dễ dàng cho
gian hàng của mình.
Nhà bán hàng thiết kế từ những banner và hình ảnh có sẵn.

2. Hình ảnh của giao diện LayoutBuilder
2.1.
-

Tạo Component Basic Banner

Tạo form cho người dùng điền url của ảnh hoặc banner lên

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


-

Sau khi người dùng nhập đầy đủ thông tin alt,url,image,classes và nhấn save sẽ
lưu hình ảnh hoặc banner

-

Người dùng kéo thả tuỳ vào vị trí mình muốn


2.2.
-

Lưu hình ảnh banner vào thư viện

Hình ảnh banner sau khi tạo sẽ được lưu vào thư viện.

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


TÀI LIỆU THAM KHẢO
Reactjs và Bootrap

/>Framework Css
/>Framework Antd
ign/

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp


TỔNG KẾT
Như vậy, sau hơn một tháng thực tập. Em đã tìm hiểu về phát triển giao diện
của một Website kết hợp với các Framework hỗ trợ cũng như kiến thức khá
quan trọng về responsive Website, xây dựng được giao diện theo yêu cầu đặt ra
Chân thành cảm ơn các anh chị trong công ty Unboxx tạo điều kiện giúp đỡ em
học tập và hồn thành khố thực tập. Cảm ơn anh Nguyễn Tấn Diệu đã giúp

em hoàn thành báo cáo này.

Nguyễn Lê Trung

Báo cáo Thực Tập Doanh Nghiệp