Báo cáo thực tập doanh nghiệp intern ui frontend engineer công ty tnhh naver vietnam

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH
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 DOANH NGHIỆP
INTERN UI FRONTEND ENGINEER
Công ty TNHH NAVER VIETNAM

GV HƯỚNG DẪN: ThS. Nguyễn Tấn Toàn
SV THỰC HIỆN: Nguyễn Khánh Huyền – 20520558
LỚP: SE405.N21.PMCL

TP. HỒ CHÍ MINH, 2023


Lời cảm ơn
Em xin gửi lời cảm ơn chân thành đến thầy Nguyễn Tấn Toàn đã hỗ trợ em hoàn thành
báo cáo thực tập này. Trong suốt thời gian thực hiện báo cáo, thầy đã chu đáo, tận tình
hỗ trợ, tạo động lực để em hoàn thành.
Em xin gửi lời cảm ơn sâu sắc đến Trường Đại học Công nghệ thông tin đã tạo cơ hội
để em tiếp cận với khóa thực tập lần này của Naver VietNam thơng qua khóa học
Frontend kếp hợp giữa 3 phía: Naver VietNam, LikeLion và Trường Đại học Công
nghệ thông tin.
Cuối cùng, em xin gửi lời cảm ơn đến công ty TNHH NAVER VIETNAM cũng như
chị Trần Thị Mộng Vi (leader team UI Frontend) và team, vì đã tận tình huấn luyện,
động viên, giúp đỡ em trong công việc cũng như trong sinh hoạt hằng ngày, giúp em
có thể mở lịng với mọi người hơn.


Mục lục

CHƯƠNG 1. GIỚI THIỆU CHUNG VỀ CÔNG TY ..................................................................... 1
CHƯƠNG 2. TẬP HUẤN ................................................................................................................. 2

2.1. Mô tả về công việc......................................................................................................... 2
2.2. Lịch tập huấn và tham gia dự án.................................................................................... 3
2.3. Kiến thức thu được ........................................................................................................ 5
2.3.1. Tìm hiểu cơng ty ............................................................................................................... 5
2.3.2. Nền tảng cơ bản về thiết kế ............................................................................................... 5
2.3.3. Kiến thức và thực hành HTML/CSS ................................................................................. 6
2.3.4. Kiến thức tự học ................................................................................................................ 7

2.4. Kỹ năng mềm................................................................................................................. 8
2.4.1. Kỹ năng làm việc nhóm .................................................................................................... 8
2.4.2. Kỹ năng quản lý thời gian ................................................................................................. 8
2.4.3. Kỹ năng giao tiếp .............................................................................................................. 8
2.4.4. Kỹ năng thích nghi ............................................................................................................ 9
CHƯƠNG 3. THAM GIA DỰ ÁN ................................................................................................. 10

3.1. Dự án Blog Engineering .............................................................................................. 10
3.2. Dự án QR Code ........................................................................................................... 12
CHƯƠNG 4. ĐÁNH GIÁ, NHẬN XÉT ......................................................................................... 13

4.1. Tự đánh giá .................................................................................................................. 13
4.2. Mô tả hoạch định tương lai dựa trên kết quả thực tập ................................................. 13


CHƯƠNG 1. GIỚI THIỆU CHUNG VỀ CƠNG TY
• Tên cơng ty: TNHH NAVER VIETNAM.
• Địa chỉ: Tầng 4, Tháp B, toà nhà Viettel, 285 Cách Mạng Tháng Tám, Phường 12,
Quận 10, Thành phố Hồ Chí Minh.

• Website cơng ty: .
• Quy mơ: 201-500 người.
• Lĩnh vực hoạt động:
o Naver VietNam là một công ty con của Naver Corporation (Hàn Quốc) với các
mảng nổi bật về Search Engine(Cơng cụ tìm kiếm phổ biến nhất Hàn Quốc), các
nền tảng mạng xã hội.
o Năm 2021, Naver VietNam được thành lập và đến hiện tại có 3 trung tâm đặt
tại Thành phố Hồ Chí Minh và Hà Nội.
o Trung tâm phát triển: phát triển các ứng dụng:
▪ NAVER WORKS: hệ thống các ứng dụng cần thiết cho công việc như
Mail, Calendar, Message, Drive.
▪ NAVER TUNE: tập trung vào audio, video.
▪ BBOOM: chia sẻ blog trên nền tảng mobile một cách ẩn danh.
▪ WEVERSE: ứng dụng giúp fan có thể gặp gỡ các thần tượng qua các
livestream, bài viết, video.
▪ WEBTOON: ứng dụng về truyện tranh.
o Trung tâm nghiên cứu AI.

1


CHƯƠNG 2. TẬP HUẤN
2.1. Mô tả về công việc
UI Frontend Engineer là một vị trí khá mới mẻ ở thị trường Việt Nam. Dựa vào tên gọi, cũng
có thể hiểu được sơ sơ về vị trí này. UI là User Interface, ý nói về giao diện người dùng.
Frontend là một mảng trong phát triển ứng dụng Web, tập trung phát triển những phần nổi
trên giao diện, cái mà người dùng thấy được, tương tác được, xử lý các logic tương tác và kết
nối với Backend.
UI Frontend chính là sự kết hợp vừa đủ giữa UI và Frontend. Một UI Frontend là người có
hiểu biết về UI, có nền tảng kiến thức cơ bản về thiết kế giao diện người dùng; bên cạnh đó,

cũng phải có kiến thức về code, nói đúng hơn là thành thạo code HTML/CSS, và các ngôn
ngữ, cơng nghệ của Frontend như Javascript, React,…
Vậy nói sâu hơn về cơng việc của một UI Frontend, nó bao gồm:
• Code xây dựng khung của ứng dụng, tạo kiểu cho các thành phần ứng dụng.
• Làm việc được với bản thiết kế trên nền tảng thiết kế như Figma.
• Xây dựng các UI component library (thư viện các thành phần giao diện người dùng).
• Xây dựng được Design system (hệ thống thiết kế).
Một UI Frontend Engineer sẽ thường góp mặt trong một team (nhóm) trong phương pháp phát
triển phần mềm Agile.
Các vị trí tương tác trực tiếp:
• Frontend Engineer: UI Frontend Engineer xây dựng cấu trúc, bố cục, giao diện cho các
thành phần UI, các trang tĩnh. Frontend Engineer sẽ dựa trên đó để xây dựng một phần
code Frontend hồn chỉnh.
• Designer: UI Frontend Engineer xây dựng giao diện dựa trên bản thiết kế của Designer.
Vì thế, họ sẽ có mối quan hệ mật thiết với Designer. Và có những trường hợp, Designer
có thể khơng có hiểu biết về code, đơi khi có thể tạo ra những thiết kế q phức tạp,
không phù hợp với dự án hiện tại.

2


2.2. Lịch tập huấn và tham gia dự án
Thời gian thực tập: từ 07.12.2022 đến 07.06.2023.
Thời gian lên công ty: 3 ngày/tuần (8h/ngày).
Ngày

Nội dung

Chi tiết

07.12.2022 - Onboarding

• Nhận thiết bị.

08.12.2022

• Gặp gỡ team.
• Làm quen với thiết bị được cấp.
• Tìm hiểu cơng ty.

09.12.2022 - Huấn luyện kiến thức về nền tảng Nền tảng cơ bản về thiết kế:
30.12.2022

thiết kế và HTML/CSS.

• Visualization fundamentals
• Design System
• UI/UX
• Figma Tool
Kiến thức và thực hành HTML/CSS:
• HTML/CSS fundamentals
• Layouts: Floats, Flexbox, and
CSS Grid Fundamentals
• Web Design Rules and
Framework
• Coding convention
• Transitions & Animations

03.01.2023 - Blog Engineering Project

UI components

06.02.2023

• Video
• New
3


UI Pages
• Home (Header, Cover, Videos)
• New Listings
• Video
13.02.2023 - QR Code Project

Fix UI components

now

• Select (Multi-select, select with
checkbox)
• Dropdown
• Input
UI systems
• Spacing system
• Typography system
Fix UI error

4

2.3. Kiến thức thu được
2.3.1. Tìm hiểu cơng ty
Thời gian: 1 ngày.
Nội dung:
• Tìm hiểu về các quy tắc làm việc ở cơng ty.
• Tìm hiểu về các lợi ích của thực tập sinh và nhân viên chính thức.
• Tìm hiểu về các trang thơng tin của cơng ty.
• Tìm hiểu về vai trị của vị trí UI Frontend Engineer trong dự án thực tế.
Kết quả:
• Có hiểu biết về cơng ty, lợi ích của thực tập sinh và vai trị của vị trí thực tập.
2.3.2. Nền tảng cơ bản về thiết kế
Thời gian: 3 ngày.
Nội dung:
• Visualization fundamentals(Nguyên lý thị giác): học về 12 nguyên lý thị giác.
o Đó là các nguyên lý về: khoảng cách, màu sắc, kích thước, sự cân bằng, sự
tương phản,…
o Học cách cảm nhận và các nguyên tắc về thiết kế, trau dồi khả năng cảm nhận
và kỹ năng nhận xét thiết kế dựa trên các nguyên tắc.
• Design System: Là hệ thống các quy tắc, tài liệu chung được sử dụng trong một nhóm
để tất cả thành viên có thể thống nhất.
o Học được các khái niệm.
o Thực hành tạo ra một Pattern Libary (một phần Design system).
• UI/UX: các khái niệm về UI và UX.
o UI(User Interface – Giao diện người dùng): là bề nổi của ứng dụng, liên quan
đến đẹp xấu.

5

o UX(User Experience – Trải nghiệm người dùng): tập trung đến trải nghiệm của
người dùng có tốt khơng, ứng dụng có mượt mà, kích thích người dùng sử dụng
hay khơng.
• Figma Tool: một công cụ thiết kế phổ biến hàng đầu hiện nay.
o Học được cách sử dụng cơ bản Figma.
o Học được cách lấy các thông số để tạo code thực tế.
o Thực hành sử dụng Figma để tạo ra một Pattern Libary (một phần Design
system).
Kết quả:
• Có hiểu biết về các khái niệm thiết kế, các nguyên lý và cách sử dụng Figma.

2.3.3. Kiến thức và thực hành HTML/CSS
Thời gian: 8 ngày.
Nội dung:
• HTML/CSS fundamentals: kiến thức nền tảng về HTML/CSS
o Học được các kiến thức cơ bản về HTML/CSS.
o Thực hành tạo một trang index (Website) với thơng tin đơn giản.
• Layouts: Floats, Flexbox, and CSS Grid Fundamentals
o Học được các kiến thức cơ bản về “Bố cục”.
o Thực hành xây dựng bố cục bằng hỗ trợ của CSS “Floats”, “Flexbox” và “CSS
Grid”.
• Web Design Rules and Framework
o Học được khái niệm về Framework và biết đến một số Framework phổ biến.
o Học được các quy tắc trong thiết kế.
• Coding convention
o Học được các quy tắc trong code HTML/CSS.
o Thực hành sửa các bài tập cũ đúng với các quy tắc vừa học.
• Transitions & Animations
6

o Học được các khái niệm về hoạt ảnh trong xây dựng trang Web.
o Thực hành xây dựng hoạt ảnh cơ bản.
Kết quả:
• Có kiến thức nền tảng về code HTML/CSS, các quy tắc trong thiết kế, trong code.
• Học được cách tạo hoạt ảnh.
2.3.4. Kiến thức tự học
Thời gian: 4 ngày.
Nội dung:
• Học về các ngơn ngữ, thư viện, công nghệ hỗ trợ trong dự án sắp tới:
o Typescript: ngôn ngữ được mở rộng từ Javascript với các đặc điểm cải tiến hơn.
o ReactJs: là một công nghệ xây dựng trang Web phía Frontend phổ biến hiện
nay.
o SCSS: là một ngôn ngữ để tô điểm, tạo kiểu cho ứng dụng, mở rộng từ CSS với
các đặc điểm cải tiến hơn.
o Module CSS: là một thư viện hỗ trợ cho ReactJs trong việc tạo file css thành
module riêng cho từng component, cùng các tiện ích khác như tự động tạo tên
class,…
Kết quả: Tự học được một cách cơ bản về các kiến thức như Typescript, ReactJs, SCSS,
Module CSS.

7


2.4. Kỹ năng mềm
Trong suốt 6 tháng thực tập tại NAVER VIETNAM, ngồi việc tích lũy được các kiến thức,
kỹ thuật code, làm quen với các công nghệ, thư viện liên quan đến cơng việc; em cịn tích lũy
cho mình rất nhiều kỹ năng mềm quan trọng. Trong đó bao gồm: kỹ năng làm việc nhóm,
quản lý thời gian, giao tiếp và khả năng thích nghi.
2.4.1. Kỹ năng làm việc nhóm

Trong các dự án thực tế, làm việc nhóm là một kỹ năng bắt buộc phải có. Làm việc nhóm tốt
sẽ thúc đẩy dự án hoàn thành nhanh và đạt được chất lượng tốt hơn.
• Sự thống nhất được tạo nên bằng cách tuân theo các quy tắc chung trong nhóm dự án.
• Học được cách lắng nghe, tiếp thu ý kiến từ mọi người.
• Học được cách trao đổi với các vị trí khác trong dự án.
• Nâng cao tinh thần trách nhiệm của bản thân, hồn thành cơng việc được giao đúng
hạn.
2.4.2. Kỹ năng quản lý thời gian
Vừa đi học, vừa đi thực tập là một sự lựa chọn khá hợp lý cho sinh viên gần cuối khóa. Chúng
ta có thể tích lũy được nhiều kinh nghiệm thực tế để chuẩn bị hành trang cho tương lai gần ra
trường và đi làm. Nhưng bên cạnh đó, cũng cần có kỹ năng quản lý thời gian cực kì tốt.
• Cố gắng hồn thành cơng việc thực tập chỉ ở trên cơng ty, khơng mang việc về nhà.
• Học được cách tập trung vào cơng việc.
• Có thói quen lên kế hoạch trong ngày.
• Xây dựng được giờ giấc sinh hoạt hợp lí, lành mạnh hơn.
2.4.3. Kỹ năng giao tiếp
Giao tiếp là một kỹ năng không thể thiếu, khi làm việc với các thành viên trong nhóm, cần
biểu đạt được suy nghĩ, ý kiến của bản thân để mọi người có thể hiểu được một cách rõ ràng,
là điều khá khó đối với em.
• Học được cách mở lời, khơng ngại nói sai.
• Luyện tập ơn lại kiến thức bằng cách tự giảng bài cho mình.
8


• Học được cách viết tài liệu.
2.4.4. Kỹ năng thích nghi
Công ty em thực tập là một công ty con của người Hàn, đa số họ sẽ giao tiếp bằng tiếng Anh
(khi nhắn tin) hoặc có thơng dịch viên (khi họp). Vì thế, tiếng Anh là điều vơ cùng cần thiết.
Bên cạnh đó, một mơi trường thực tế mới lạ, sẽ khiến mình bị chống, có nhiều thứ rất khác
so với những gì được tiếp xúc trên giảng đường. Những gì cần làm là:

• Trau dồi vốn tiếng Anh.
• Tập giao tiếp bằng tiếng Anh (vì khơng phải lúc nào cũng có thơng dịch viên).
• Tập trung vào cơng việc cơng ty khi ở cơng ty.
• Học hỏi từ các anh chị thơng qua giao tiếp lời nói, code, cách làm việc, viết tài liệu,…

9


CHƯƠNG 3. THAM GIA DỰ ÁN
Các dự án dưới đây là dự án riêng tư của công ty, chưa được cơng bố ra bên ngồi. Vì vậy,
em xin phép được giữ kín các thơng tin về chúng (kể cả hình ảnh và thời gian).

3.1. Dự án Blog Engineering
Thời gian: 1 tháng.
Đây là một dự án được mở ra nhằm mục đích tổng kết q trình huấn luyện của UI Frontend
Intern và Frontend Intern.
Blog Engineering là một ứng dụng Web cho phép người dùng chia sẻ cuộc sống hằng ngày,
như một cuốn nhật ký, chia sẻ những sinh hoạt hằng ngày, những khoảnh khắc mà mình muốn
lưu giữ và lan tỏa đến mọi người.
Các thành viên trong dự án:
1. Vũ Quốc Huy.
2. Trần Thị Diệp.
3. Nguyễn Khánh Huyền (em).
Vai trò trong dự án:
• Xây dựng các thành phần giao diện:
o Video component.
o News component.
• Xây dựng giao diện cho các trang:
o Home page.
o Videos page.

o News page.
• Xây dựng tương thích trên các kích thước màn hình khác nhau (mobile-tablet-desktop).
• Viết code theo các quy tắc, đảm bảo SEO (tối ưu khả năng tìm kiếm).
Cách thực hiện: dựa vào bản thiết kế Figma để hoàn thành giao diện cho các trang bằng cơng
cụ Visual Studio Code, quản lí code bằng github.
10


Các kiến thức cần có:
• ReactJs (tạo component).
• SCSS và các quy tắc code (style cho các component và các trang).
• Cách lấy thơng số từ Figma.
• Sử dụng cơ bản git.

11


3.2. Dự án QR Code
Đây là một dự án cải tiến một ứng dụng Web đã có từ rất lâu trước đó ở Hàn Quốc. Hiện tại
dự án vẫn đang được tiến hành và là dự án riêng tư của cơng ty.
QR Code, đúng với tên gọi của nó, ứng dụng cho phép người dùng tạo, quản lý mã QR, xem
báo cáo, thống kê,…
Vai trị trong dự án:
• Xây dựng các thành phần giao diện:
o Select.
o Multiple Select.
o Input (chỉ style).
o Calendar (chỉ style).
• Xây dựng các hệ thống UI:
o Spacing system(hệ thống về khoảng cách giữa các thành phần).

o Typography system(hệ thống về phơng chữ, kiểu chữ, kích thước,… liên quan
đến chữ).
• Chỉnh sửa giao diện các trang.
• Xây dựng tương thích trên các kích thước màn hình khác nhau (mobile-tablet-desktop).
• Viết code theo các quy tắc, đảm bảo SEO (tối ưu khả năng tìm kiếm).
• Sửa một số lỗi dễ về Frontend.
Cách thực hiện: dựa vào bản thiết kế Figma để hoàn thành giao diện cho các trang bằng cơng
cụ Visual Studio Code, quản lí code bằng github.
Các kiến thức cần có:
• ReactJs (tạo component, sửa lỗi giao diện và lỗi cơ bản về Frontend).
• Sử dụng Storybook (một thư viện để xem trước, truyền đối số cho các component).
• SCSS và các quy tắc code (style cho các component và các trang).
• Cách lấy thơng số từ Figma.
• Sử dụng cơ bản git.
12


CHƯƠNG 4. ĐÁNH GIÁ, NHẬN XÉT
4.1. Tự đánh giá
Trong khoảng thời gian thực tập tại NAVER VIETNAM, em đã tiếp thu được khá nhiều kiến
thức, kinh nghiệm thực tế, cũng như là tìm được những đồng đội tuyệt vời.
Em đã hồn thành được mục tiêu của khóa thực tập. Bao gồm trang bị các kiến thức về giao
diện người dùng và thực hành code các thành phần giao diện, hiểu được quy trình làm việc
của dự án nói riêng và cơng ty nói chung. Bên cạnh đó, cũng nâng cao được các kỹ năng mềm
như làm việc nhóm, kỹ năng giao tiếp, quản lý thời gian, thích nghi với mơi trường thực tế và
môi trường công ty đa quốc gia.
Em đã cân bằng được việc học trên trường cũng như q trình thực tập được diễn ra khá thành
cơng, nhận được đánh giá khá tốt và em cũng cảm thấy hài lịng với những gì mình đạt được.

4.2. Mơ tả hoạch định tương lai dựa trên kết quả thực tập

Sau khi kết thúc quá trình thực tập, em cảm nhận được mình khá hợp với vị trí UI Frontend
Engineer. Vậy nên, em sẽ tiếp tục theo đuổi con đường này, bằng cách cống hiến mình với
nghề tại cơng ty hiện tại (được xét duyệt trở thành nhân viên chính thức dựa trên kết quả thực
tập). Vị trí này thoạt nhìn khá đơn giản, khơng có nhiều cơ hội, nhưng thật ra nó khá có tiềm
năng. Vì hiểu được cơ bản về cả 2 mảng UI và Frontend, em sẽ mở rộng ở 2 đầu. Cố gắng cải
thiện kỹ năng code, mở rộng sang Frontend Developer; cùng lúc đó, học cách để trở thành
một Designer thực thụ.

13