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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA 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 AnThự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ànhCô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 nhucầ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ệnnay đã có đến hơn 1.5 tỷ trang web, nhưng nhu cầu tạo ra những trang web mới vẫnchư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 ở haiyế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 suynghĩ đau đầu Để thử thách bản thân trong ngành công nghiệp web, em đã lựa chọnFull stack web developer là định hướng cho việc học cũng như nghề nghiệp trongtươ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ữngkiến thức đã học và có được trải nghiệm trong môi trường thực tế, em đã quyết địnhtham gia vào Vitalify Asia – một môi trường lý tưởng và chuyên nghiệp để thực hiệndự đị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ựctậ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 anhTrần Minh Tuấn, em đã tiếp thu những kiến thức quan trọng để có thể tham gia mộtdự á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ờigian, công sức để hướng dẫn, hướng dẫn, giúp đỡ em tận tình trong khi làm quenmô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ìnhvà 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ế trongthờ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

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

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áttriể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ậtBả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ấttạ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ậptrì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 doanhnghiệ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ắngmở rộng hoạt động kinh doanh của mình Vitalify Asia hướng đến trở thành Nhà cung cấpcá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ể đếnsau: 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ệ ARtă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ệctrong 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ờigian 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, đặtcâ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ếptheo 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ạcvề 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ớithiệ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 đượcgiớ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ụngemail 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ệcsử 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

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/CDcho 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 quytrì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 configvà 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ộthệ 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ểnmạnh mẽ qua từng năm

- 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 choviệc build và có nhiều thư viện hỗ trợ

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 đượctin là có learning curve ngắn và hiệu năng tốt hơn đối với React Vue có cộng đồnghỗ 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ạpnhằ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úpcho ứ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 đốivớ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 trongquy 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ệcnhó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êucầu đặt ra ban đầu.

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ôngtá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 On-demand 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/