BÁO CÁO THỰC TẬP LẬP TRÌNH FRONT-END WEB

1

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 FRONT-END WEB

Cơng ty thực tập

: S3Corp.

Người phụ trách

: Trà Quang Khánh

Thực tập sinh

: Đoàn Minh Lực

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

<Đồn Minh Lực>


1

LỜI MỞ ĐẦU

Như chúng ta cũng đã biết thì website (hay một trang web) hiện là một công cụ không

thể thiếu trong các lĩnh vực kinh doanh, bán hàng, quảng cáo,…Nó có thể dùng để trao đổi bn
bán trực tuyến với nhau. Với các lợi ích như vậy nên hầu hết các công ty hoặc một tổ chức hay
cá nhân nào đấy cũng sẽ có cho mình một trang web để phục vụ cho các mục đích khác nhau.
Một trang web bắt mắt sẽ thu hút nhiều sự chú ý từ khách hàng hơn và đi kèm theo đấy
sẽ là sự hiệu quả. Một website sẽ đại diện cho cả một công ty, tổ chức, cá nhân, vậy nên yếu tố
thẩm mĩ là không thể thiếu. Đương nhiên nội dung cũng không kém phần quan trọng. Và một
yếu tố khác đó chính là tiện ích đối với người dùng. Kết hợp các yếu tố trên chúng ta sẽ có một
trang web tốt, có thể thu hút khách hàng cũng như thể hiện được các giá trị của công ty.
Và với sự u thích nhìn trang web mà mình tạo ra ngày càng đẹp hơn thì em đã quyết
định theo hướng lập trình web, cụ thể là front-end. Vì vậy, em quyết định chọn S3Corp – một
môi trường chuyên nghiệp, lâu đời để giúp em thực hiện được dự định của bản thân mình.

<Đồn Minh Lực>


1

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty S3Corp đã tạo điều kiện cho em có cơ hội được thực
tập tại cơng ty.
Nhờ sự chỉ dẫn tận tình của các anh/chị trong cơng ty mà em đã có thêm nhiều kiến thức
hơn về front-end (cụ thể hơn là về ReactJs)
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..
<Đoàn Minh Lực>
<TpHCM, ngày 27 tháng 05 năm 2022>

<Đoàn Minh Lực>

1

NHẬN XÉT CỦA KHOA

<Đoàn Minh Lực>


1

MỤC LỤC
Chương 1: Giới thiệu công ty thực tập
1. Giới thiệu cơng ty S3Corp
Chương 2: Nội dung thực tập

6
6
7

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

7

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

7

2.1.

Tìm hiểu về html, css, js

7

2.2.

Tìm hiểu về React

7

2.3.

Thực hiện bài tập Convert từ file html sang React (Ex1)

8

2.4.

Thực hiện bài tập Redux (Ex2)

8

2.5.

Thực hiện Unit test và code coverage cho Ex2

9

2.6.

Thực hiện bài tập Phân nhỏ component (Ex3)

9

2.7.

Thực hiện bài tập với component ở Ex3 (Ex4)

9

2.8.

Thực hiện thêm các tính năng vào Ex4 (Ex5)

10

2.9.

Sử dụng thêm các library để tăng tốc độ code cho Ex5 (Ex6)

10

3. Thực hiện project

10

3.1.

UI Team

10

3.2.

Gluing team

11

TÀI LIỆU THAM KHẢO

12

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

<Đồn Minh Lực>


1

1. Giới thiệu công ty S3Corp
S3Corp được thành lập năm 2007 tại Pháp, là một trong những công ty hàng đầu
trong ngành công nghệ phần mềm.
S3Corp cung cấp các dịch vụ về Product Development (Full Lifecycle, Web
Application, Mobile Application), Product Verification, Automation Testing
Sản phẩm của cơng ty

<Đồn Minh Lực>


1

Chương 2: Nội dung thực tập
Đợt thực tập về framework ReactJs giúp cho sinh viên hiểu được cách hoạt động cũng
như chia nhỏ các component trong react, cũng như lưu trữ và xử lý các state, rèn luyện kỹ năng
css , responsive.

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 S3corp, quá 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.

2.2.

Tìm hiểu về html, css, js
Thời gian : 1 ngày
Nội dung : Tìm hiểu các kiến thức cơ bản về html, css, js.
Trong thời gian này, thực tập sinh sẽ tiến hành tìm hiểu về các kiến thức cơ bản
của html, css, js. Sau đó sẽ thực hành một bài tập nhỏ (không dùng bất kỳ thư việc hỗ
trợ nào) để có thể hiểu rõ cũng như áp dụng các kiến thức đã tìm hiểu.
Thực hiện : Thực hiện một bài tập nhỏ.

Kết quả : Hiểu rõ về html, css, js
Tìm hiểu về React
Thời gian : 2 ngày
Nội dung : Tìm hiểu về các kiến thức trong React (Understand SPA, React Concept,
React Life-Cycle, Define JSX, React Class, React Hook, DOM & Shadow DOM...)
- Tìm hiểu về project structure, setup codebase, cách đặt vị trí các thư mục (assets,
internal code, external code, react component
- Tạo nhánh branch trên SVN và upload code lên.
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.

<Đoàn Minh Lực>


1

Kết quả :
-

2.3.

Nâng cao kỹ năng lập trình, kiến thức với framework react.
Có được những kiến thức quan trọng cho việc lập trình web nói chung cũng như
React nói riêng sau này.
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, dễ hiểu.

Thực hiện bài tập Convert từ file html sang React (Ex1)
Thời gian: 2 ngày

Nội dung: Áp dụng các kiến thức đã tìm hiểu để chuyển đổi html sang react (giống
như mẫu, không được lệch các element, thực hiện thêm các tính năng, selected item,
dropdown menu,…)
Thực hiện :
-

Tham gia đầy đủ các buổi trainning.
Làm các bài tập thực hành chia component, xử lý state,…
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 cách chia component, xử lý state
Thực hiện bài tập Redux (Ex2)
Thời gian: 3 ngày
Nội dung : Convert từ file html mẫu sang React nhưng sử dụng Redux để quản lý
state
- Định nghĩa về 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.
Thực hiện :
-

Tham gia đầy đủ các buổi training.
Quản lý cũng như xử lý các state trên redux, hiểu rõ cách quản lý cũng như luồng
di chuyển của các state

Kết quả:

<Đoàn Minh Lực>


1

2.5.

2.6.

2.7.

2.8.

2.9.

- Có thể sử dụng redux để quản lý tất cả các state
Thực hiện Unit test và code coverage cho Ex2
Thời gian: 1 ngày
Nội dung: Sử dụng Jet built-in để viết unit test cũng như các package khác
Thực hiện:
- Tham gia đầy đủ các buổi training
Kết quả:
- Hiểu được cách hoạt động của unit test
Thực hiện bài tập Phân nhỏ component (Ex3)
Thời gian: 2 ngày
Nội dung: Phân nhỏ các component để có thể tái sử dụng (Form, Input, Button,…),
thực hiện validation form, hiểu được cách authentication

Thực hiện: Chia nhỏ component, validation form (username khơng có ký tự đặc
biệt,email hợp lệ, password hợp lệ,…)
Kết quả:
- Hiểu được cách chia nhỏ component để tái sử dụng, đóng gói dữ liệu.
Thực hiện bài tập với component ở Ex3 (Ex4)
Thời gian: 1 ngày
Nội dung: Thêm route vào ứng dụng, protected route (navigate khi login)
Thực hiện: Thêm route vào và hiểu cách bảo vệ page (chỉ navigate đến khi đã đăng
nhập)
Kết quả:
- Hiểu cách thêm route vào ứng dụng
- Hiểu cách bảo vệ page (Protected route)
Thực hiện thêm các tính năng vào Ex4 (Ex5)
Thời gian: 2 ngày
Nội dung: Hiểu rõ về lifecycle hook và quản lý state. Tạo các model và generate UI
component bằng cách passing model
Thực hiện: Dùng lifecycle hook và quản lý state trên đó.
Kết quả:
- Hiểu rõ về lifecycle hook
- Biết cách tạo các model và pass sang các component để generate UI
Sử dụng thêm các library để tăng tốc độ code cho Ex5 (Ex6)
Thời gian: 1 Ngày
Nội dung: Sử dụng thêm thư viện (Ant design) để tăng tốc độ code
Thực hiện: Áp dụng Ant design để filter dữ liệu
Kết quả:
- Biết cách sử dụng các thư viện để tối ưu code

<Đoàn Minh Lực>

1

3. Thực hiện project
Sau thời gian đượ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. 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.
Chi tiết đồ án:
3.1. UI Team
- Yêu cầu: HTML, Strong CSS, Advance JS, có khả năng thiết kế UI từ PTS
- Reactjs: Context, Reducer, React Hook, Lifecycle hook, Router
- Exercise:
o Thiết kế UI giống như mẫu
o Không dùng Redux, dùng React Hook
o Sử dụng Context API để quản lý state
o Tạo 3 component cùng cấp : Sidebar, Profile Bar, Editor
o Mỗi Profile có Editor riêng
o Khi click vào 1 item sẽ add item đó vào editor. Tất cả các item sẽ thuộc về
profile đang chọn.
o Note: Keyboard Item: có thể edit key
▪ Mouse Item: có thể edit mouse
▪ Delay time: có thể set delay time
▪ Macro item: click để hiện dropdown menu và chọn 1 profile
3.2. Gluing team
- Yêu cầu: HTML, Web API, CSS, Advance JS
- Good Reactjs + Redux, có thể viết Unit test (Jest,…)
- Exercise:
o Tương tự như UI Team
o Tạo 1 temporary server sử dụng redux để CRUD profile
o Tạo 1 deviceUSB service (sử dụng navigator, usb web API để yêu cầu
quyền truy cập khi USB được cắm vào PC

o Viết Unit test

<Đoàn Minh Lực>


1

TÀI LIỆU THAM KHẢO

HTML, CSS, JS
/>
/> />
React
/> />
TỔNG KẾT
Như vậy, trong vòng hai tháng thực tập, em đã kịp học hỏi, tiếp thu thêm kiến thức cũng
như tạo ra một web app đơn giản, tuy chưa có nhiều chức năng nhưng việc code bằng React,
chia nhỏ các component sẽ dễ dàng hơn trong việc mở rông ứng dụng
Chân thành cảm ơn sự giúp đỡ của các anh chị trong công ty S3Corp, cũng như các thầy
cơ đã giúp em hồn thành báo cáo này.

<Đoàn Minh Lực>