báo cáo thực tập FRONT END DEVELOPER

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

FRONT END DEVELOPER

Công ty thực tập

: Công ty TNHH Công nghệ thông tin Visitek

Người phụ trách

: Đinh Thanh Tình

Thực tập sinh

: Đỗ Ngọc Bích Trâm

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

ĐỖ NGỌC BÍCH TRÂM


2

LỜI MỞ ĐẦU

Hiện nay với sự phát triển mạnh của cơng nghệ trên thế giới thì nhu cầu sử dụng internet

tăng lên từng ngày là điều chắc chắn. Chính vì thế công nghệ thông tin không chỉ dừng lại ở
mục đích phục vụ cho khoa học kỹ thuật mà đi sâu vào đời sống, chính trị, kinh tế - xã hội,…
mang lại nhiều lợi ích cho con người.
Đi kèm theo đó các hệ thống website cũng đang ngày càng phát triển không ngừng với
đủ lĩnh vực, ngành nghề như giáo dục, y tế, phim ảnh, ca nhạc, thể thao, làm đẹp,… Tuy nhiên
để tạo ra một website được nhiều người sử dụng cần rất nhiều yếu tố như nội dung, giao diện,
trải nghiệm của người dùng cũng như nó mang lại cho người sử dụng một lợi ích nhất định.
Và ngày nay, với sự phát triển của các framework như Angular, React và Vue đưa nền
tảng web trở nên mạnh mẽ hơn nữa, mang lại trải nghiệm người dùng tốt hơn.
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, em có dự định là sẽ thực
tập. Vì vậy, em quyết định chọn Công ty TNHH Visitek – một môi trường lý tưởng để em có thể
học tập và rèn luyện bản thân.

ĐỖ NGỌC BÍCH TRÂM


3

LỜI CẢM ƠN

Để hồn thành q trình thực tập doanh nghiệp này trước hết em xin gửi đến quý Thầy
Cô giảng viên trường Đại học Công Nghệ Thông Tin – Đại học Quốc Gia TP.HCM cũng như
các Thầy Cô giảng viên khoa Cơng Nghệ Phần Mềm đã tận tình giúp đỡ và tạo mọi điều kiện để
em có thể hồn thành quá trình thực tập tại doanh nghiệp.
Em xin trân trọng gửi lời cảm ơn đến Ban Lãnh Đạo, các phịng ban của Cơng ty TNHH
Cơng nghệ thơng tin Visitek đã tạo điều kiện thuận lợi cho em được tìm hiểu cũng như trải
nghiệm thực tế trong suốt quá trình thực tập tại công ty. Cuối cùng em xin chân thành cảm ơn
anh Cao Thanh Ý – Giám đốc công ty và anh Đinh Thanh Tình – người phụ trách chuyên môn
đã giúp đỡ, tin tưởng cho em tham gia vào các dự án thực tế để em có thể hoàn thành tốt báo

cáo thực tập doanh nghiệp.
Cuối cùng em xin chúc quý Thầy Cô dồi dào sức khỏe và thành cơng trong sự nghiệp cao
q. Đồng kính chúc các cô, chú, anh, chị trong Công ty TNHH Công nghệ thông tin Visitek
luôn mạnh khỏe, đạt được nhiều thành công tốt đẹp trong cơng việc.
Đỗ Ngọc Bích Trâm
TP.Hồ Chí Minh, ngày 29 tháng 07 năm 2020

ĐỖ NGỌC BÍCH TRÂM


4

NHẬN XÉT CỦA KHOA

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

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

ĐỖ NGỌC BÍCH TRÂM


5

MỤC LỤC

MỤC LỤC.......................................................................................................................... 5
Chương 1: Giới thiệu công ty thực tập..........................................................................6
1.Giới thiệu về công ty Visitek................................................................................6
2.Sản phẩm của công ty...........................................................................................6
Chương 2: Nội dung thực tập.........................................................................................7
1.Tìm hiểu cơng ty và các kỹ năng cơ bản của công ty...........................................7
2.Nghiên cứu kỹ thuật.............................................................................................7
3.Thực hiện project..................................................................................................9
4.Lịch làm việc........................................................................................................9
Chương 3: Chi tiết về project.......................................................................................11
1.Giới thiệu về trang admin quản lý karaoke.........................................................11
2.Thực hiện...........................................................................................................13
3.Thực hiện project................................................................................................13
4.Kết quả...............................................................................................................14

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

ĐỖ NGỌC BÍCH TRÂM

6

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

1. Giới thiệu công ty Visitek
Visitek hiện tại là công ty start up được thành lập trong năm nay, là một nhà cung
cấp dịch vụ Công nghệ thông tin, công ty tập trung cung cấp các giải pháp CNTT
cho các doanh nghiệp vừa và nhỏ tại Việt Nam. Công việc của công ty là cung cấp
các giải pháp CNTT chất lượng cao, duy trì và bảo vệ cơ sở hạ tầng IT của các
doanh nghiệp vừa và nhỏ.
- Thông tin liên hệ: Công ty TNHH Công nghệ thông tin Visitek
- Địa chỉ: 86 đường số 7 , phường 7 , khu Cityland Center Hills , Gò Vấp , TP
HCM
- Hotline: 0567055912
- Website: />- Email:

2. Sản phẩm của công ty
Là công ty start up vừa được thành lập gần đây nhưng công ty đã phát triển phần mềm
quản lý bán hàng, phần mềm hỗ trợ thực hiện các nghiệp vụ quản lý trường học, quản lí kho,…
outsource cũng như các trang website được thiết kế riêng theo nhu cầu của khách hàng,…

ĐỖ NGỌC BÍCH TRÂM


7

Chương 2: Nội dung thực tập
Đợt thực tập với chủ đề “Frontend developer” nhằm mục đích giúp sinh viên thực tập được
đào tạo chủ yếu về lập trình giao diện của website cũng như rèn luyện bổ sung kỹ năng lập

trình, từ duy logic và đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, 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 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, q 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 Visitek, 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.

2.2.

Các công cụ làm việc
Thời gian : 1 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ư Phần
mềm Telegram – sử dụng chính trong các cuộc trao đổi giữa các bạn và các anh trong
công ty, Notepad ++ - một chương trình soạn thảo văn bản rất hữu ích và phổ biến
với lập trình viên, Github – nơi up và quản lý source 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 cơng cụ
với nhau.
Tìm hiểu sơ lược về HTML, CSS, Javascript
Thời gian : 2 ngày
Nội dung :
- Sử dụng các thẻ <div>,

,… sắp xếp hợp lý, dễ đọc, dễ nhìn cũng như làm
sao cho chuẩn SEO nhất. Đồng thời cũng tìm hiểu về html5.

ĐỖ NGỌC BÍCH TRÂM


8

-

Tổ chức css theo cấu trúc từ layout lớn đến các layout chi tiết, cũng như đặt
tên các class của element trong html sao cho phù hợp dễ đọc nhất. Và các
atribute css để trang web có một ui/ux tốt thân thiện với người dùng.
- Responsive cho một trang website hồn chỉnh như thế nào.
- Tìm hiểu về Bootstrap 4 là một framework hỗ trợ tốt cho việc lập trình giao
diện một website.
Thực hiện : Tham gia đầy đủ các buổi training của công ty.
Kết quả :
- Nâng cao kỹ năng lập trình html/css.
- Biết được một số quy tắc trong viết code html/css sao cho mọi người có thể dễ
đọc, dễ hiểu và dễ dàng sử dụng.
2.3.

Tìm hiểu về ReactJS

Thời gian : 3 ngày (1 tuần)
Nội dung :
- Khởi tạo 1 ứng dụng ReactJS bằng create-react-app
- Tìm hiểu về vòng đời của ReactJS
- Cách chuyển từ Class Component sang React Hook
- Cách sử dụng thư viện Material UI – thư viện giúp hỗ trợ cho việc xây dụng UI
được nhanh chóng và theo quy chuẩn của Material Design.
Thực hiện :
- Tham gia đầy đủ các buổi training của công ty.
- Làm layout admin page có responsive.
Kết quả :
-

2.4.

Nắm được những kiến thức cần thiết về ReactJS.
Nắm được cách để triển khai một ứng dụng web với ReactJS
Biết thêm nhiều thư viện hỗ trợ xây dựng một ứng dụng web bằng ReactJS

Tìm hiểu về cách lấy data từ API và store dữ liệu vào Redux
Thời gian : 6 ngày (2 tuần)
Nội dung :
- Cách kiểm tra, đọc data lấy từ API thông qua Postman
- Cách gọi API trong React bằng thư viện axios
- Tìm hiểu về Redux, cách Redux hỗ trợ React trong việc quản lý các state trong
ứng dụng.
- Async/await function
- Thiết lập Redux Thunk structure trong React
Thực hiện :

ĐỖ NGỌC BÍCH TRÂM


9

-

Tham gia đầy đủ các buổi training của công ty.
Làm admin page hoàn chỉnh với đầy đủ các chức năng cần thiết.

Kết quả :
-

Nắm được những kiến thức cần thiết về ReactJS + Redux
Nắm được cách để triển khai một ứng dụng web với ReactJS với đầy đủ chức
năng.

3. Thực hiện project
Sau 1 tháng được training và thực hành, thực tập sinh đã nắm được những kiến thực về
html, css và biết cách sử dụng bootstrap 4, jquery cũng như những kiến thức nền tảng của
reactjs. Trong thời gian tiếp theo, mentor đã hướng dẫn thực tập sinh áp dụng các kiến thức
vào những dự án thực tế của công ty.
4. Lịch làm việc

Tuần

Cơng việc
-

1

-

Người hướng dẫn

Mức
độ
hồn
thành

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

Tìm hiểu về cơng ty, Anh Đinh Thanh
cách tổ chức của
Tình
cơng ty.
Làm quen với các
cơng cụ làm việc
trong cơng ty.
Học cách trao đổi,
làm việc qua
Telegram.
Tìm hiểu sơ lược về
HTML, CSS,
Javascript

2
3,4

Tìm
hiểu
về Anh Đinh Thanh
ReactJS
Tình
- Làm layout admin
page bằng React với
thư viện Material UI
- Học cách lấy data
Anh Đinh Thanh

ĐỖ NGỌC BÍCH TRÂM


10

5,6

7,8,9

10

từ API
- Tìm hiểu về Redux
- Xây dựng hệ thống
React + Redux
Thunk
- Hoàn thiện admin
page đầy đủ các
chức năng với React

+ Redux
- Hỗ trợ team viết
trang web công ty
- Tiếp nhận và cùng
team lên kế hoạch
viết trang admin
quản lý karaoke theo
yêu cầu khách hàng.
- Xây dựng giao diện
trang web
- Thực hiện trang
admin với đầy đủ
các chức năng được
yêu cầu
- Tiếp nhận và cùng
team lên kế hoạch
viết trang web bán
sản phẩm chim yến
- Xây dựng layout
trang chủ và trang
danh sách, chi tiết
sản phẩm
-

Tình

Anh Đinh Thanh
Tình

Anh Đinh Thanh

Tình

Anh Đinh Thanh
Tình

ĐỖ NGỌC BÍCH TRÂM


11

Chương 3: Chi tiết về project

1. Giới thiệu về trang admin quản lý quán karaoke
Website giúp cho chủ doanh nghiệp có thể quản lý qn karaoke của mình với đầy đủ
các chức năng chính: đăng nhập, thêm xóa sửa phịng, sản phẩm, nhân viên thơng tin
hóa đơn, và chia ca làm việc cho nhân viên, phân quyền, báo cáo, tính lương nhân viên
theo tuần, …
Một số hình ảnh về website:
Trang Dashboard

Trang User (lưu thơng tin nhân viên):

ĐỖ NGỌC BÍCH TRÂM


12

Trang chia lịch cho nhân viên và bảng tính lương theo tuần:

Trang thơng tin hóa đơn và chi tiết hóa đơn:

ĐỖ NGỌC BÍCH TRÂM


13

2. Thực hiện:
Front end: sinh viên Đỗ Ngọc Bích Trâm
Với sự giúp đỡ của bạn Back end trong team và anh hướng dẫn Đinh Thanh Tình

3. Kế hoạch:
Giai đoạn phân tích requirement:
- Trang web với chức năng chính thêm xóa sửa, chia lịch, báo cáo,….
- Thiết kế layout thân thiện, dễ sử dụng.
Giai đoạn coding:
- Thiết kế trang web theo layout thống nhất
Giai đoạn testing:
- Test tay qua các chức năng, fix bugs

ĐỖ NGỌC BÍCH TRÂM


14

-

Gửi cho khách hàng, nhận feedback các chức năng, thiết kế cần sửa cho phù hợp
hơn.
4. Kết quả:
- Đầy đủ các chức năng yêu cầu

- Có hơi chậm với dự kiến ban đầu
-

ĐỖ NGỌC BÍCH TRÂM


15

TÀI LIỆU THAM KHẢO

For React
/>For Redux
/>For Material UI
/>
ĐỖ NGỌC BÍCH TRÂM


16

TỔNG KẾT

Như vậy, chỉ trong vòng hơn hai tháng ngắn ngủi, sinh viên thực tập đã hoàn thành một
web quản lý karaoke . Trang web đã có đầy đủ các tính năng đã đề ra mà bên đối tác yêu cầu.
Chân thành cảm ơn sự giúp đỡ của các bạn trong nhóm lập trình web cũng như ban giám đốc
cơng ty, đặc biệt cảm ơn anh Đinh Thanh Tình đã ln giúp đỡ cũng như hỗ trợ hết mình cho
em có thể hồn thành báo cáo thực tập lần này.

ĐỖ NGỌC BÍCH TRÂM