báo cáo thực tập doanh nghiệp vị trí frontend developer

Chân thành cảm ơn Vitalify Asia và các anh chị trong team UDL đã bỏ ra nhiều thời gian, công sức để hướng dẫn, hướng dẫn, giúp đỡ em tận tình trong khi làm quen môi trường mới cũng như t

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: Vitalify Asia

Người phụ trách: Quan Chí Khánh An

Thực tập sinh: Trần Đức Tâm

TP Hồ Chí Minh, 10 tháng 01 năm 2024

LỜI MỞ ĐẦU

Trong cuộc cách mạng công nghiệp 4.0, công nghệ thông tin nói chung và ngành Công nghệ phần mềm nói riêng luôn là nhân tố đóng vai trò quan trọng trong quá trình phát triển của xã hội

Công nghệ Web, hay công nghệ sản xuất các trang web đã phục vụ hầu hết các nhu cầu của con người từ bán hàng, cung cấp kiến thức đến thông tin liên lạc, Hiện nay đã có đến hơn 1.5 tỷ trang web, nhưng nhu cầu tạo ra những trang web mới vẫn chưa có dấu hiệu giảm

Do đó, một trang web muốn được nhiều người sử dụng phải đáp ứng được yếu tố hình thức và nội dung Làm thế nào để sản phẩm tạo ra đạt chất lượng cao ở hai yếu tố trên luôn làm bất kì một đội ngũ phát triển website nào cũng cần phải suy nghĩ đau đầu Để thử thách bản thân trong ngành công nghiệp web, em đã lựa chọn Full stack web developer là định hướng cho việc học cũng như nghề nghiệp trong tương lai

Sau những năm tháng trong môi trường đại học, với mong muốn áp dụng những kiến thức đã học và có được trải nghiệm trong môi trường thực tế, em đã quyết định tham gia vào Vitalify Asia – một môi trường lý tưởng và chuyên nghiệp để thực hiện

dự định

LỜI CẢM ƠN

Em xin trân trọng gửi lời cảm ơn thầy cô đã tạo điều kiện cho em cơ hội được thực tập tại công ty Dù trong thời gian ngắn nhưng nhờ sự chỉ dẫn nhiệt tình của anh Trần Minh Tuấn, em đã tiếp thu những kiến thức quan trọng để có thể tham gia một

dự án thực tế

Chân thành cảm ơn Vitalify Asia và các anh chị trong team UDL đã bỏ ra nhiều thời gian, công sức để hướng dẫn, hướng dẫn, giúp đỡ em tận tình trong khi làm quen môi trường mới cũng như trong việc tiếp cận kiến thức công nghệ, kỹ năng lập trình

và tư duy sản phẩm để có thể thực hiện tốt dự án cá nhân và dự án thực tế trong thời gian qua

Em 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áo cáo này

TP HCM, ngày 10 tháng 1 năm 2023

NHẬN XÉT CỦA KHOA

MỤC LỤC

LỜI MỞ ĐẦU 2

LỜI CẢM ƠN 3

NHẬN XÉT CỦA KHOA 4

MỤC LỤC 5

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

1.1 Giới thiệu […] 6

1.2 Sản phẩm công ty 6

1.3 Lịch làm việc khi thực tập tại công ty 6

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

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

2.2 Nghiên cứu kỹ thuật 7

2.2.1 Tuần 1 7

2.2.2 Tuần 2 7

2.3 Thực hiện dự án cá nhân 7

[Mô tả quá trình thực hiện, kết quả] 7

2.3.1 Công nghệ 7

2.3.2 Mô tả dự án 7

2.3.3 Kết quả 7

2.4 Tham gia dự án thực tế 7

CHƯƠNG 3: TỔNG KẾT 8

3.1 Điểm mạnh 8

3.2 Điểm yếu 8

3.3 Chuẩn đạt được 8

TÀI LIỆU THAM KHẢO 9

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

1.1.Giới thiệu chung

● Tên công ty: Vitalify Asia (Vitalify Á Châu)

● Địa chỉ: 224A Điện Biên Phủ, Phường 6, Quận 3, Thành phố Hồ Chí Minh

● Trang web: https://www.vitalify.asia/

● Điện thoại: 028 3932 6293

Hình 1.1 Logo Vitalify Asia

Vitalify Asia là công ty phát triển offshore của Nhật Bản được thành lập vào năm 2008, phát triển ứng dụng phần mềm Vitalify Asia có thế mạnh về phát triển các dịch vụ hướng về người dùng hoặc phát triển các thiết bị thông minh Với 90% khách hàng là các công ty Nhật Bản, các thành viên của Vitalify Asia luôn có cơ hội tham gia vào các dịch vụ CNTT mới nhất tại Nhật Bản

Là thành viên chính thức trực thuộc bộ phận IT của Hiệp hội doanh nghiệp Nhật Bản tại Hồ Chí Minh, Vitalify Asia đem đến cho khách hàng những dịch vụ công nghệ thông tin như: Lập trình website, thương mại điện tử, ứng dụng phần mềm, ứng dụng di động

Ngoài ra, Vitalify Asia còn dịch vụ nghiên cứu thị trường và tư vấn dành cho những doanh nghiệp vừa mới thành lập

Hiện tại, Vitalify Asia đang nghiên cứu phát triển khách hàng mới của Việt Nam và cố gắng

mở rộng hoạt động kinh doanh của mình Vitalify Asia hướng đến trở thành Nhà cung cấp các dịch vụ website/ ứng dụng điện thoại hàng đầu của Việt Nam

1.2 Sản phẩm công ty

Vitalify Asia với kinh nghiệm phát triển hệ thống, ứng dụng đa lĩnh vực, với khả năng hoạt động real-time bao gồm nhiều giai đoạn phát triển, các sản phẩm của Vitalify Asia kể đến sau: Các sản phẩm ứng dụng game giải trí thiết bị di động Một số có sử dụng công nghệ AR tăng cường thực tế ảo Face Emotion- Xác định cảm xúc, Zombie Doors AR

1.3 Lịch làm việc khi thực tập tại công ty

Em tham gia làm việc tại công ty bắt đầu từ ngày 1.11.2023 tới 1.1.2024, các ngày làm việc trong tuần là từ thứ 2 đến thứ 6 Công việc hằng ngày bắt đầu từ lúc 8h35 đến 17h35 Thời gian nghỉ trưa khoảng 1 tiếng Đầu mỗi ngày em sẽ báo cáo tiến độ công việc trong ngày, đặt câu hỏi và nhận chia sẻ, giải đáp từ anh hướng dẫn, đặt mục tiêu cho ngày làm việc tiếp theo Mỗi tuần sẽ họp tiến độ tuần 1 lần vào sáng thứ 4, mọi người sẽ cùng họp và bàn bạc

về các vấn đề đã giải quyết, tồn đọng, bài học, giải pháp và mục tiêu cho tuần tiếp theo

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

2.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 tuần

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, 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, các phòng ban về IT, HR, … Ngoài ra, thực tập sinh còn được giới thiệu về văn hóa làm việc trong công ty như thời gian đi làm, các quy định, cách sử dụng email trong công việc Em nhận thiết bị phục vụ công việc và cài đặt môi trường

Kết quả: hiểu thêm về Vitalify, 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.2 Nghiên cứu kỹ thuật

2.2.1 Tuần 1

Nội dung: Nghiên cứu về công nghệ React và Vue cho Frontend và NestJS cho backend Kết quả:

React Luồng vận hành của React, các thư viện

quản lý state tối ưu với React, nghiên cứu chọn các tech stack cho những usecase cụ thể Tìm hiểu các thư viện GraphQL client cho dự án

Vite Tìm hiểu công nghệ bundler cho React và

Vue, tìm hiểu các package addon tối ưu cho

dự án

UnoCSS Tìm hiểu Atomic CSS và config cho repo, tối

ưu CSS cho Vite và config rules cho ESlint Vue Nghiên cứu về Vue và config Vue với Vite,

tìm hiểu các package quản lý state tối ưu cho phạm vi dự án Research và tìm hiểu về

các thư viện GraphQL client cho Vue.

2.3 Thực hiện dự án

2.3.1 Công nghệ

2.3.1.2 Git

Thời gian: Thời gian kéo dài toàn dự án

Nội dung: Github và Github Action dùng để quản lý code và xây dựng pipeline CI/CD cho dự án, cải thiện luồng vận hành của dự án, đồng thời tối ưu thời gian delivery từ BPM và đến khách hàng Tìm hiểu về các Git Flow sử dụng trong dự án, luồng quy trình code review và xác nhận ticket đối với BPM và khách hàng

Thực hiện:

- Cài đặt husky để chạy lint staged cho format và liniting code trước lúc config

và push

2.3.1.2 ReactJS

Thời gian: Thời gian kéo dài toàn dự án

Nội dung: React là một trong những thư viện Frontend phổ biến nhất hiện tại, có một

hệ sinh thái to lớn, những thư viện mạnh mẽ và đã được chứng minh thực tế về sự tối ưu và ổn định ReactJS đã có sự công nhận và đang có những bước phát triển mạnh mẽ qua từng năm

Thực hiện:

- Config ReactJS với Vite để bundling, bổ sung thêm những package cần thiết cho việc CSS và routing

- Sử dụng Figma và dùng plugins để extract layout cho việc thiết kế giao diện

- Tìm hiểu và sử dụng Zustand để quản lý global state cho ứng dụng

- Cài đặt tailwind cho React Vite

- Tìm hiểu các thư viện plugins sử dụng cho tailwind

2.3.1.3 TailwindCSS

Thời gian: Thời gian kéo dài toàn dự án

Nội dung: TailwindCSS là một utility-first CSS framework hỗ trợ cho việc phát triển

nhanh chóng giao diện đồng thời hỗ trợ cho việc phát triển UI responsive, tối ưu cho việc build và có nhiều thư viện hỗ trợ

Thực hiện:

- Cài đặt TailwindCSS cho React Vite, cài đặt thêm các Rule cho ESlint và Prettier

- Tích hợp addon của Figma giúp cho việc phát triển giao diện nhanh chóng

2.3.1.4 VueJS

Thời gian: Thời gian kéo dài hết dự án

Nội dung: Vue là frontend framework tối ưu cho các dự án vừa và nhỏ, Vue được tin là có learning curve ngắn và hiệu năng tốt hơn đối với React Vue có cộng đồng

hỗ trợ mạnh mẽ cùng với một sinh thái hoàn thiện và ổn định

Thực hiện:

- Sử dụng Vue cho việc xây dựng CMS, cài đặt và setup với component library Cài đặt thư viện quản lý state và config cho i18

2.3.1.4 UnoCSS

Thời gian: Thời gian kéo dài hết dự án

Nội dung: UnoCSS là một Atomic CSS engine tối ưu cho việc phát triển giao diện, được xem là một giải pháp thay thế cho Tailwind

Thực hiện:

- Cài đặt UnoCSS cho VueJS Vite, kiểm tra config và tối ưu bundling

- Cài đặt config cho Visual Studio Code, ESlint, Prettier

2.3.2 Mô tả dự án

Thời gian: Bắt đầu ngày 8.11.2023

Nội dung: Dự án phát triển một nền tảng cung cấp những trang web landing page có những hiệu ứng hình ảnh rực rỡ và sinh động, sử dụng nhiều animation phức tạp nhằm đảm bảo tính thẩm mỹ cho giao diện Dự án yêu cầu xây dựng 3 phần nhỏ

- Trang landing page: Trang landing page có khả năng tuỳ chỉnh theo API, sử dụng hiệu ưunsg và logic animation phức tạp

- Trang CMS: cung cấp khả năng tùy chỉnh giao diện cho landing page, giúp cho ứng dụng linh hoạt và vận hành hiệu quả Trang CMS trực quan và dễ sử

dụng, tích hợp với những tính năng tân tiến.

- Backend: Xây dựng Backend cho việc liên kết CMS và landing page

2.3.3 Kết quả

Xây dựng được ứng dụng thành công theo đúng tiến độ dự án, cung cấp tài liệu đối với dự án đồng thời cung cấp test để đảm bảo cho dự án có tính ổn định

CHƯƠNG 3: TỔNG KẾT

Quãng thời gian thực tập tại Vitalify đã giúp em cải thiện bản thân rất nhiều trong quy trình làm việc thực tế, tác phong của người kỹ sư phần mềm Được làm việc tại đây, em đã học thêm được kỹ năng mềm sử dụng mail, quản lý ticket, làm việc nhóm, giao tiếp với cấp trên đồng thời

Chỉ trong thời gian hạn chế, em đã hoàn thành dự án thực tế với các tính năng, yêu cầu đặt ra ban đầu

3.1 Điểm mạnh

Về trình độ chuyên môn:

1 Cải thiện được trình độ chuyên môn, tiếp xúc được nhiều công nghệ mới và

sử dụng được những công nghệ một cách thuần thục

2 Cải thiện được luồng làm việc với Git và Github, biết sử dụng thuần thục Git

để đảm bảo một Git Graph sạch sẽ và tối ưu

3 Tối ưu thời gian phát triển và sử dụng Figma, sử dụng Addon cho việc tối ưu phát triển trên Figma

4 Phát triển cho việc xây dựng kiến trúc dự án, biết cách kiến tạo lên một dự án Frontend Enterprise theo một kiến trúc nhất quán và ổn định

5 Phát triển về thiết kế và tổ chức module đối với những dự án có kích thước lớn

6 Cải thiện khả năng viết tài liệu và đọc hiểu tài liệu

Về kỹ năng mềm:

1 Cải thiện về việc giao tiếp và thảo luận trong công việc, đảm bảo được sự truyền đạt được rõ ràng và không bị mập mờ

2 Biết cách đánh giá khối lượng công việc và phát triển được kỹ năng ước lượng được tiến độ công việc một cách hiệu quả

3 Cải thiện khả năng quản lý thời gian và phân phối thời gian cho từng task

4 Cải thiện về khả năng tìm hiểu và giải quyết vấn đề

5 Cải thiện kỹ năng thảo luận và hợp tác với đồng nghiệp

3.2 Điểm yếu

- Còn cần cải thiện và nâng cao khả năng về trình độ chuyên môn

- Khả năng viết tài liệu và testing vẫn còn bị hạn chế, cần cải thiện nhiều hơn

- Khả năng ước lượng khối lượng công việc còn cần phải cải thiện nhiều hơn, đôi lúc ước lượng sai khối lượng công việc dẫn đến việc trễ nải trong công tác vận chuyển

3.3 Chuẩn đạt được

Goal Mục tiêu môn học

G1 Nắm bắt được xu hướng, nhu cầu xã hội và tính đặc thù của doanh nghiệp

G2 Hiểu và giải thích được các khái niệm cơ bản, thuật ngữ và sơ đồ hệ thống trong dự

án

G3 Nắm được quy trình, phương pháp và công nghệ phát triển sản phẩm phần mềm tại

doanh nghiệp

G4 Có khả năng tìm hiểu vấn đề, mô hình hóa vấn đề và tham gia giải quyết vấn đề G5 Phát triển kỹ năng tư duy, kỹ năng làm việc nhóm và kỹ năng trình bày

G6 Đọc, hiểu các tài liệu và giao tiếp bằng tiếng Anh

TÀI LIỆU THAM KHẢO

1 ReactJS (2024 tháng 1) - https://react.dev

2 Vue - The Progressive JavaScript Framework (2024 tháng 1) - https://vuejs.org/

3 UnoCSS Instant Ondemand Atomic CSS Engine (2024 tháng 1) -https://unocss.dev/

4 TailwindCSS - Rapidly build modern websites without ever leaving your HTML (2024 tháng 1) - https://tailwindcss.com/