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 Trong suốt thời gian thực 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 hội để em tiếp cận với khóa thực tập lần Naver VietNam thơng qua khóa học Frontend kếp hợp phía: Naver VietNam, LikeLion 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 chị Trần Thị Mộng Vi (leader team UI Frontend) team, tận tình huấn luyện, động viên, giúp đỡ em công việc sinh hoạt ngày, giúp em mở lịng với người Mục lục CHƯƠNG GIỚI THIỆU CHUNG VỀ CÔNG TY CHƯƠNG TẬP HUẤN 2.1 Mô tả công việc 2.2 Lịch tập huấn tham gia dự án 2.3 Kiến thức thu 2.3.1 Tìm hiểu công ty 2.3.2 Nền tảng thiết kế 2.3.3 Kiến thức thực hành HTML/CSS 2.3.4 Kiến thức tự học 2.4 Kỹ mềm 2.4.1 Kỹ làm việc nhóm 2.4.2 Kỹ quản lý thời gian 2.4.3 Kỹ giao tiếp 2.4.4 Kỹ thích nghi CHƯƠNG THAM GIA DỰ ÁN 10 3.1 Dự án Blog Engineering 10 3.2 Dự án QR Code 12 CHƯƠNG ĐÁ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 kết thực tập 13 CHƯƠNG 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, 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: https://navercorp.vn • Quy mơ: 201-500 người • Lĩnh vực hoạt động: o Naver VietNam công ty Naver Corporation (Hàn Quốc) với mảng bật Search Engine(Cơng cụ tìm kiếm phổ biến Hàn Quốc), tảng mạng xã hội o Năm 2021, Naver VietNam thành lập đến có trung tâm đặt Thành phố Hồ Chí Minh Hà Nội o Trung tâm phát triển: phát triển ứng dụng: ▪ NAVER WORKS: hệ thống ứng dụng cần thiết cho công việc Mail, Calendar, Message, Drive ▪ NAVER TUNE: tập trung vào audio, video ▪ BBOOM: chia sẻ blog tảng mobile cách ẩn danh ▪ WEVERSE: ứng dụng giúp fan gặp gỡ thần tượng qua livestream, viết, video ▪ WEBTOON: ứng dụng truyện tranh o Trung tâm nghiên cứu AI CHƯƠNG TẬP HUẤN 2.1 Mô tả công việc UI Frontend Engineer vị trí mẻ thị trường Việt Nam Dựa vào tên gọi, hiểu sơ sơ vị trí UI User Interface, ý nói giao diện người dùng Frontend mảng phát triển ứng dụng Web, tập trung phát triển phần giao diện, mà người dùng thấy được, tương tác được, xử lý logic tương tác kết nối với Backend UI Frontend kết hợp vừa đủ UI Frontend Một UI Frontend người có hiểu biết UI, có tảng kiến thức thiết kế giao diện người dùng; bên cạnh đó, phải có kiến thức code, nói thành thạo code HTML/CSS, ngôn ngữ, cơng nghệ Frontend Javascript, React,… Vậy nói sâu cơng việc UI Frontend, bao gồm: • Code xây dựng khung ứng dụng, tạo kiểu cho thành phần ứng dụng • Làm việc với thiết kế tảng thiết kế Figma • Xây dựng UI component library (thư viện thành phần giao diện người dùng) • Xây dựng Design system (hệ thống thiết kế) Một UI Frontend Engineer thường góp mặt team (nhóm) 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 thành phần UI, trang tĩnh Frontend Engineer dựa để xây dựng phần code Frontend hồn chỉnh • Designer: UI Frontend Engineer xây dựng giao diện dựa thiết kế Designer Vì thế, họ có mối quan hệ mật thiết với Designer Và có trường hợp, Designer khơng có hiểu biết code, đơi tạo thiết kế phức tạp, không phù hợp với dự án 2.2 Lịch tập huấn 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: 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ấp • Tìm hiểu cơng ty 09.12.2022 - Huấn luyện kiến thức tảng Nền tảng thiết kế: 30.12.2022 thiết kế HTML/CSS • Visualization fundamentals • Design System • UI/UX • Figma Tool Kiến thức 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 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 2.3 Kiến thức thu 2.3.1 Tìm hiểu cơng ty Thời gian: ngày Nội dung: • Tìm hiểu quy tắc làm việc cơng ty • Tìm hiểu lợi ích thực tập sinh nhân viên thức • Tìm hiểu trang thơng tin cơng ty • Tìm hiểu vai trị vị trí UI Frontend Engineer dự án thực tế Kết quả: • Có hiểu biết cơng ty, lợi ích thực tập sinh vai trò vị trí thực tập 2.3.2 Nền tảng thiết kế Thời gian: ngày Nội dung: • Visualization fundamentals(Nguyên lý thị giác): học 12 nguyên lý thị giác o Đó nguyên lý về: khoảng cách, màu sắc, kích thước, cân bằng, tương phản,… o Học cách cảm nhận nguyên tắc thiết kế, trau dồi khả cảm nhận kỹ nhận xét thiết kế dựa nguyên tắc • Design System: Là hệ thống quy tắc, tài liệu chung sử dụng nhóm để tất thành viên thống o Học khái niệm o Thực hành tạo Pattern Libary (một phần Design system) • UI/UX: khái niệm UI UX o UI(User Interface – Giao diện người dùng): bề ứng dụng, liên quan đến đẹp xấu o UX(User Experience – Trải nghiệm người dùng): tập trung đến trải nghiệm 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: cơng cụ thiết kế phổ biến hàng đầu o Học cách sử dụng Figma o Học cách lấy thông số để tạo code thực tế o Thực hành sử dụng Figma để tạo Pattern Libary (một phần Design system) Kết quả: • Có hiểu biết khái niệm thiết kế, nguyên lý cách sử dụng Figma 2.3.3 Kiến thức thực hành HTML/CSS Thời gian: ngày Nội dung: • HTML/CSS fundamentals: kiến thức tảng HTML/CSS o Học kiến thức HTML/CSS o Thực hành tạo trang index (Website) với thông tin đơn giản • Layouts: Floats, Flexbox, and CSS Grid Fundamentals o Học kiến thức “Bố cục” o Thực hành xây dựng bố cục hỗ trợ CSS “Floats”, “Flexbox” “CSS Grid” • Web Design Rules and Framework o Học khái niệm Framework biết đến số Framework phổ biến o Học quy tắc thiết kế • Coding convention o Học quy tắc code HTML/CSS o Thực hành sửa tập cũ với quy tắc vừa học • Transitions & Animations o Học khái niệm hoạt ảnh xây dựng trang Web o Thực hành xây dựng hoạt ảnh Kết quả: • Có kiến thức tảng code HTML/CSS, quy tắc thiết kế, code • Học cách tạo hoạt ảnh 2.3.4 Kiến thức tự học Thời gian: ngày Nội dung: • Học ngôn ngữ, thư viện, công nghệ hỗ trợ dự án tới: o Typescript: ngôn ngữ mở rộng từ Javascript với đặc điểm cải tiến o ReactJs: công nghệ xây dựng trang Web phía Frontend phổ biến o SCSS: ngôn ngữ để tô điểm, tạo kiểu cho ứng dụng, mở rộng từ CSS với đặc điểm cải tiến o Module CSS: thư viện hỗ trợ cho ReactJs việc tạo file css thành module riêng cho component, tiện ích khác tự động tạo tên class,… Kết quả: Tự học cách kiến thức Typescript, ReactJs, SCSS, Module CSS 2.4 Kỹ mềm Trong suốt tháng thực tập NAVER VIETNAM, ngồi việc tích lũy kiến thức, kỹ thuật code, làm quen với công nghệ, thư viện liên quan đến cơng việc; em cịn tích lũy cho nhiều kỹ mềm quan trọng Trong bao gồm: kỹ làm việc nhóm, quản lý thời gian, giao tiếp khả thích nghi 2.4.1 Kỹ làm việc nhóm Trong dự án thực tế, làm việc nhóm kỹ bắt buộc phải có Làm việc nhóm tốt thúc đẩy dự án hồn thành nhanh đạt chất lượng tốt • Sự thống tạo nên cách tuân theo quy tắc chung nhóm dự án • Học cách lắng nghe, tiếp thu ý kiến từ người • Học cách trao đổi với vị trí khác dự án • Nâng cao tinh thần trách nhiệm thân, hồn thành cơng việc giao hạn 2.4.2 Kỹ quản lý thời gian Vừa học, vừa thực tập lựa chọn hợp lý cho sinh viên gần cuối khóa Chúng ta tích lũy nhiều kinh nghiệm thực tế để chuẩn bị hành trang cho tương lai gần trường làm Nhưng bên cạnh đó, cần có kỹ quản lý thời gian tốt • Cố gắng hồn thành cơng việc thực tập công ty, không mang việc nhà • Học cách tập trung vào cơng việc • Có thói quen lên kế hoạch ngày • Xây dựng giấc sinh hoạt hợp lí, lành mạnh 2.4.3 Kỹ giao tiếp Giao tiếp kỹ thiếu, làm việc với thành viên nhóm, cần biểu đạt suy nghĩ, ý kiến thân để người hiểu cách rõ ràng, điều khó em • Học cách mở lời, khơng ngại nói sai • Luyện tập ơn lại kiến thức cách tự giảng cho • Học cách viết tài liệu 2.4.4 Kỹ thích nghi Cơng ty em thực tập cơng ty người Hàn, đa số họ giao tiếp tiếng Anh (khi nhắn tin) có thơng dịch viên (khi họp) Vì thế, tiếng Anh điều vơ cần thiết Bên cạnh đó, mơi trường thực tế lạ, khiến bị chống, có nhiều thứ khác so với tiếp xúc giảng đường Những cần làm là: • Trau dồi vốn tiếng Anh • Tập giao tiếp tiếng Anh (vì khơng phải lúc có thơng dịch viên) • Tập trung vào cơng việc cơng ty cơng ty • Học hỏi từ 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,… CHƯƠNG THAM GIA DỰ ÁN Các dự án dự án riêng tư công ty, chưa công bố bên ngồi Vì vậy, em xin phép giữ kín thơng tin chúng (kể hình ảnh thời gian) 3.1 Dự án Blog Engineering Thời gian: tháng Đây dự án mở nhằm mục đích tổng kết q trình huấn luyện UI Frontend Intern Frontend Intern Blog Engineering ứng dụng Web cho phép người dùng chia sẻ sống ngày, nhật ký, chia sẻ sinh hoạt ngày, khoảnh khắc mà muốn lưu giữ lan tỏa đến người Các thành viên dự án: Vũ Quốc Huy Trần Thị Diệp Nguyễn Khánh Huyền (em) Vai trò dự án: • Xây dựng thành phần giao diện: o Video component o News component • Xây dựng giao diện cho trang: o Home page o Videos page o News page • Xây dựng tương thích kích thước hình khác (mobile-tablet-desktop) • Viết code theo quy tắc, đảm bảo SEO (tối ưu khả tìm kiếm) Cách thực hiện: dựa vào thiết kế Figma để hoàn thành giao diện cho trang cơng cụ Visual Studio Code, quản lí code github 10 Các kiến thức cần có: • ReactJs (tạo component) • SCSS quy tắc code (style cho component trang) • Cách lấy thơng số từ Figma • Sử dụng git 11 3.2 Dự án QR Code Đây dự án cải tiến ứng dụng Web có từ lâu trước Hàn Quốc Hiện dự án tiến hành dự án riêng tư cơng ty QR Code, với tên gọi 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ò dự án: • Xây dựng thành phần giao diện: o Select o Multiple Select o Input (chỉ style) o Calendar (chỉ style) • Xây dựng hệ thống UI: o Spacing system(hệ thống khoảng cách thành phần) o Typography system(hệ thống phơng chữ, kiểu chữ, kích thước,… liên quan đến chữ) • Chỉnh sửa giao diện trang • Xây dựng tương thích kích thước hình khác (mobile-tablet-desktop) • Viết code theo quy tắc, đảm bảo SEO (tối ưu khả tìm kiếm) • Sửa số lỗi dễ Frontend Cách thực hiện: dựa vào thiết kế Figma để hồn thành giao diện cho trang cơng cụ Visual Studio Code, quản lí code github Các kiến thức cần có: • ReactJs (tạo component, sửa lỗi giao diện lỗi Frontend) • Sử dụng Storybook (một thư viện để xem trước, truyền đối số cho component) • SCSS quy tắc code (style cho component trang) • Cách lấy thơng số từ Figma • Sử dụng git 12 CHƯƠNG ĐÁNH GIÁ, NHẬN XÉT 4.1 Tự đánh giá Trong khoảng thời gian thực tập NAVER VIETNAM, em tiếp thu nhiều kiến thức, kinh nghiệm thực tế, tìm đồng đội tuyệt vời Em hoàn thành mục tiêu khóa thực tập Bao gồm trang bị kiến thức giao diện người dùng thực hành code thành phần giao diện, hiểu quy trình làm việc dự án nói riêng cơng ty nói chung Bên cạnh đó, nâng cao kỹ mềm làm việc nhóm, kỹ giao tiếp, quản lý thời gian, thích nghi với mơi trường thực tế môi trường công ty đa quốc gia Em cân việc học trường q trình thực tập diễn thành cơng, nhận đánh giá tốt em cảm thấy hài lịng với đạt 4.2 Mô tả hoạch định tương lai dựa kết thực tập Sau kết thúc trình thực tập, em cảm nhận hợp với vị trí UI Frontend Engineer Vậy nên, em tiếp tục theo đuổi đường này, cách cống hiến với nghề công ty (được xét duyệt trở thành nhân viên thức dựa kết thực tập) Vị trí nhìn đơn giản, khơng có nhiều hội, thật có tiềm Vì hiểu mảng UI Frontend, em mở rộng đầu Cố gắng cải thiện kỹ code, mở rộng sang Frontend Developer; lúc đó, học cách để trở thành Designer thực thụ 13