<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TINKHOA CƠNG NGHỆ PHẦN MỀM</b>

BÁO CÁO THỰC TẬP

<b>FRONT-END DEVELOPER</b>

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

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b>LỜI MỞ ĐẦU</b>

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 ln là nhân tố đóng vai trị quan trọng trong qtrì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 ln 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.

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>LỜI CẢM ƠN</b>

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

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

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

<b>1.1.Giới thiệu chung</b>

● 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: a/

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

<i>Hình 1.1. Logo Vitalify Asia</i>

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 ln 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

Ngồ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.

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

<b>1.2. Sản phẩm công ty</b>

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.

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

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.

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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

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

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, q 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, … Ngồ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, q 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.

<b>2.2. Nghiên cứu kỹ thuật</b>

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ề

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

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

<b>2.3. Thực hiện dự án</b>

2.3.1. Công nghệ

<b>2.3.1.2. Git</b>

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

<b>2.3.1.2. ReactJS</b>

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

<b>2.3.1.3. TailwindCSS</b>

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

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

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

<b>2.3.1.4. UnoCSS</b>

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ử

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b>CHƯƠNG 3: TỔNG KẾT</b>

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.

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b>3.2. Điểm yếu</b>

- Còn cần cải thiện và nâng cao khả năng về trình độ chun 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

<b>3.3. Chuẩn đạt được</b>

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

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>TÀI LIỆU THAM KHẢO</b>

1. ReactJS (2024 tháng 1) -

2. Vue - The Progressive JavaScript Framework (2024 tháng 1) - UnoCSS - Instant On-demand Atomic CSS Engine (2024 tháng 1) - TailwindCSS - Rapidly build modern websites without ever leaving your HTML.(2024 tháng 1) -