báo cáo thực tập frontend developer intern

Với sự tiện lợi và linh hoạt mà công nghệ web mang lại,Field Service có thể tận dụng những trang web hoặc ứng dụng di động đểtheo dõi, báo cáo và quản lý công việc một cách hiệu quả.Ngàn

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ẬPFRONTEND DEVELOPER INTERN

TP Hồ Chí Minh, tháng 7 năm 2023

LỜI MỞ ĐẦU

Ngành Công nghệ phần mềm đang nắm giữ một vị thế quan trọng vàkhông thể phủ nhận trong thế giới hiện đại Với vai trò là nền tảng cungcấp các ứng dụng và hệ thống thông tin, ngành này đã và đang chuyểnđổi cách chúng ta sống và làm việc Từ việc quản lý dữ liệu đến giải quyếtcác vấn đề phức tạp, công nghệ phần mềm đã trở thành "trái tim" của nềnkinh tế số, mở ra không gian cho sự đổi mới và sáng tạo

Trong bối cảnh này, sự phát triển không ngừng của ngành công nghệ webthật sự đáng chú ý Các ứng dụng web ngày càng trở nên linh hoạt vàmạnh mẽ, mang lại trải nghiệm người dùng tốt hơn và kích thích sự tươngtác trực tuyến Sự tích hợp của các công nghệ hiện đại đã mở ra cánh cửacho những trang web động, đồng thời tối ưu hóa hiệu suất và tương thíchtrên nhiều thiết bị

Ngày nay, trong lĩnh vực Field Service, vai trò của công nghệ không chỉ làmột yếu tố hỗ trợ mà còn là chìa khóa mở ra cơ hội và hiệu suất cao FieldService là một lĩnh vực quan trọng, liên quan đến việc quản lý, bảo dưỡng

và sửa chữa các thiết bị và hệ thống mà không cần chúng ở trong môitrường văn phòng Với sự tiện lợi và linh hoạt mà công nghệ web mang lại,Field Service có thể tận dụng những trang web hoặc ứng dụng di động đểtheo dõi, báo cáo và quản lý công việc một cách hiệu quả

Ngành phát triển web đã đóng góp quan trọng và đa chiều trong việc bổtrợ lĩnh vực Field Service, mang lại nhiều lợi ích và cải thiện đáng kể hiệusuất của các hoạt động Đầu tiên, công nghệ web giúp nhân viên FieldService có thể truy cập lịch trình và thông tin công việc từ bất kỳ thiết bị

di động nào, họ có thể cập nhật trạng thái công việc, ghi chú và hình ảnhngay tại hiện trường, tối ưu hóa quy trình báo cáo Hơn nữa, các trang webcung cấp thông tin về địa điểm, địa hình và điều kiện môi trường giúpnâng cao độ chính xác của dự án và dịch vụ Sự kết hợp giữa ngành pháttriển web và lĩnh vực Field Service đã tạo ra một môi trường làm việcthông minh và linh hoạt

Có thể nói, vai trò của một Frontend Developer trong lĩnh vực FieldService là vô cùng quan trọng, đóng góp đáng kể vào trải nghiệm ngườidùng và hiệu suất của các ứng dụng và giao diện mà nhân viên FieldService sử dụng hàng ngày Khả năng tích hợp các công nghệ mới, tối ưuhóa hiệu suất và bảo mật thông tin là những yếu tố chính mà FrontendDeveloper mang lại để đảm bảo rằng hệ thống phục vụ nhân viên FieldService đáp ứng đầy đủ nhu cầu và đồng thời đảm bảo an toàn cho dữ liệuquan trọng

Do đó để thử thách bản thân trong ngành công nghiệp web, em đã lựachọn vị trí Frontend Developer là định hướng cho việc học cũng như nghềnghiệp trong tương lai Với những kiến thức đã tích lũy được trong suốtquãng đường đại học, em mong muốn có thể áp dụng chúng vào một môitrường thực tế Chính vì lý do đó, em đã quyết định tham gia vào Công tyTNHH Kegmil VN - 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 đến Công ty TNHH Kegmil VN đã tạo điềukiện để em có cơ hội được thực tập tại công ty Thời gian thực tập tuykhông quá dài nhưng nhờ có sự hỗ trợ, chỉ dẫn nhiệt tình của anh NguyễnTrung Tính, em đã tiếp thu những kiến thức cũng như kinh nghiệm thực tế

mà có thể làm hành trang cho quãng đường sự nghiệp sau này

Chân thành cảm ơn các anh chị trong bộ phận Frontend đã bỏ ra nhiềuthời gian, công sức để tận tình hướng dẫn, giúp đỡ em trong khi mới chậpchững bước vào một môi trường doanh nghiệp thực tế, cho em cơ hội đượctiếp cận những công nghệ hay, cải thiện kỹ năng lập trình và tư duy sảnphẩm để có thể thực hiện tốt công việc trong thời gian qua

Bên cạnh đó, không thể không nhắc đến sự hỗ trợ của thầy cô trong khoaCông nghệ phần mềm đã nhiệt tình hỗ trợ, tạo điều kiện để em làm báocáo này

TP HCM, ngày 05 tháng 07

năm 2023

Trần Đình Khôi

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 công ty TNHH Kegmil VN 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 7

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

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

2.2 Nghiên cứu công nghệ, kỹ thuật, các công cụ hỗ trợ 8

2.2.1 Công cụ quản lý công việc 8

2.2.2 Công cụ quản lý source code 9

2.2.3 Các framework, thư viện phát triển web 9

2.2.4 Dynamic rendering 11

2.2.5 Agile/Scrum 13

2.3 Tham gia dự án thực tế 14

2.3.1 Giới thiệu dự án 14

2.3.2 Quá trình thực hiện 15

2.3.3 Thuận lợi 19

2.3.4 Khó khăn 19

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

3.1 Điểm mạnh 20

3.2 Điểm yếu 20

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

TÀI LIỆU THAM KHẢO 21

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

1.1 Giới thiệu công ty TNHH Kegmil VN

Hình 1.1 Logo công ty TNHH Kegmil VN

Kegmil là một công ty SaaS và IoT có trụ sở tại Singapore, chuyên cungcấp cho các OEM và nhà cung cấp dịch vụ bảo trì với công nghệ vượt trội

để nâng cao hiệu quả hoạt động, độ tin cậy của tài sản, hiệu suất dịch vụ,

an toàn, và mang đến lợi nhuận

Công ty ra đời vào năm 2018 với mục tiêu số hóa các quy trình liên quanđến lưu trữ hồ sơ thực hiện bởi nhân viên hiện trường Đây là một startupchuyên phục vụ cộng đồng nhà đầu tư trong các lĩnh vực như sản xuất,xây dựng, hậu cần và các ngành công nghiệp liên quan

Kegmil là một doanh nghiệp khởi nghiệp chuyên cung cấp dịch vụ phầnmềm theo mô hình dịch vụ (SaaS), liên tục đưa vào sử dụng những tiến bộcông nghệ và công cụ phân tích dữ liệu mới nhất để phát triển một giảipháp quản lý và vận hành dịch vụ hiện trường Sản phẩm được xây dựng

để tự động hóa một cách thông minh, nó không chỉ tạo điều kiện thuận lợi

mà còn cải thiện hiệu quả hoạt động, thời gian sử dụng của tài sản, vàhiệu suất công việc cho những người làm việc trong các lĩnh vực không tựđộng hóa như xây dựng, hậu cần, sản xuất, và các ngành nghề khác.Kegmil giúp các công ty tự động hóa và tối ưu hóa các quy trình cũ của họ

từ lập kế hoạch và điều phối đến thực hiện và báo cáo

Ngày 23 tháng 9 năm 2022, Kegmil đã công bố kết thúc vòng đầu tư Series A trị giá 2,2 triệu đô la Singapore dẫn đầu bởi ME Innovation FundL.P (quỹ đầu tư mạo hiểm doanh nghiệp do Tập đoàn Mitsubishi Electric

Pre-và Global Brain Corporation thành lập) Pre-và Origin Capital, với sự tham giacủa GHV Accelerator và GK-Plug and Play Indonesia

1.2 Sản phẩm công ty

Kegmil cung cấp dịch vụ trong lĩnh vực FSM (Field Service ManagementSystem) ví dụ như bảo dưỡng thang máy, máy điều hòa, thiết bị điện tử, …

Hệ thống được chia thành 3 phần chính với các nhiệm vụ khác nhau:

 Admin web app: quản lý toàn bộ tenants trong hệ thống, bao gồmthông tin chi tiết của tenant, xem danh sách người dùng của tenant,bật/tắt các tính năng, hình thức thanh toán

 Tenant web app: trang web làm việc chính của từng tenant Tại đây,người dùng có thể xem các thông tin, số liệu tổng hợp của Client,Job, … Tenant thực hiện quản lý, điều phối công việc thông quatrang quản lý Job, quản lý các team, người dùng khác nhau và thayđổi cài đặt Bên cạnh đó, các tenant có thể xem các bản báo cáo.

 Client portal web app: trang web làm việc chính của những ngườidùng trong mỗi tenant Mỗi người dùng có thể quản lý Requests vàngười dùng hiện tại của tenant

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 05/07/2023 tới hiện tại,các ngày làm việc trong tuần là từ thứ hai đến thứ sáu Công việc hằngngày bắt đầu từ lúc 09:00 đến 18:00 Thời gian nghỉ trưa khoảng 1 tiếng.Công việc hằng ngày của em là tham gia phát triển các tính năng mới chosản phẩm, sửa các lỗi đã tồn tại hoặc phát sinh, tham gia vào các cuộchọp của nhóm để cùng nhau cải thiện chất lượng công việc và sản phẩm.Trước khi bắt đầu 2 tuần làm việc, em và cả team sẽ cùng nhìn qua cáccông việc còn tồn đọng, công việc cần tiếp tục, ước tính lượng thời giancho mỗi công việc đó Đồng thời, em cũng tham gia vào các buổi planning

để nhận công việc Bắt đầu tuần làm việc, em sẽ cập nhật tất cả các côngviệc mình sẽ thực hiện trong vòng 2 tuần tới vào một bảng chung Đầungày, xen kẽ giữa các ngày làm việc, em sẽ tham gia họp để báo cáo tiến

độ công việc hiện tại Khi hoàn thành xong một công việc nào đó, em sẽnhờ anh hướng dẫn xem lại, đưa ra nhận xét, góp ý để em cải thiện hơn.Khi kết thúc 2 tuần làm việc, các team sẽ có một buổi họp để nhìn lại đãlàm tốt những gì, có điều gì cần cải thiện và đưa ra hành động để khắcphục trong tương lai

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: 3 ngày

Nội dung:

- Người phụ trách giới thiệu về công ty, cách tổ chức của công ty,được nghe về lịch sử thành lập và phát triển, quy trình làm việc củacông ty, quy mô và cách thức tổ chức của công ty, tình hình kinhdoanh hiện tại…

- Ngoài ra, thực tập sinh còn được giới thiệu về lĩnh vực mà công tyđang hoạt động, sản phẩm của công ty, văn hóa làm việc trong công

ty như thời gian đi làm, các quy định

2.2 Nghiên cứu công nghệ, kỹ thuật, các công cụ hỗ trợ

2.2.1 Công cụ quản lý công việc

 Nội dung: làm quen, tìm hiểu về bộ công cụ quản lý công việc baogồm Jira, Confluence

Trong suốt quá trình làm việc tại công ty, em được giới thiệu, hướngdẫn về cách sử dụng bộ công cụ của Atlassian để quản lý dự án Trongbuổi huấn luyện, người hướng dẫn giới thiệu về các mục quan trọngcần sử dụng, một số tính năng chủ yếu để thực tập sinh nghiên cứu

o Jira: là một ứng dụng quản lý dự án và theo dõi công việc đượcphát triển bởi Atlassian Được ra mắt lần đầu vào năm 2002, Jira

đã trở thành một trong những công cụ quản lý dự án phổ biếnnhất và được sử dụng rộng rãi trong cộng đồng phát triển phầnmềm

Hình 2.1 Logo Jira

o Confluence: là một ứng dụng của Atlassian được thiết kế để hỗtrợ việc làm việc cộng tác và quản lý thông tin trong tổ chức.Confluence được sử dụng rộng rãi trong các doanh nghiệp, tổchức, và nhóm làm việc để chia sẻ kiến thức, tạo tài liệu, và tăngcường sự cộng tác

Hình 2.2 Logo Confluence

 Kết quả:

o Jira: biết cách sử dụng để theo dõi tiến độ tiến độ và phân loạicông việc, ứng dụng Jira để tối ưu hóa luồng làm việc, tuân theocác quy chuẩn mà công ty đề ra

o Confluence: biết cách sử dụng Confluence để xem, tạo, chỉnh sửatài liệu và hỗ trợ trong các buổi họp của công ty

2.2.2 Công cụ quản lý source code

 Nội dung: được hướng dẫn về cách sử dụng và quy trình làm việc vớiGitLab

Toàn bộ source code của công ty được quản lý trên GitLab Ngay từnhững buổi đầu em đã được hướng dẫn về GitLab Người hướng dẫngiới thiệu về các repo hiện tại của công ty, các quy tắc như đặt tênnhánh, cách viết commit message, tạo merge request

o GitLab là một nền tảng phần mềm quản lý mã nguồn và hệ thốngtích hợp liên tục (CI/CD) được phát triển bởi GitLab Inc Nó cungcấp một loạt các công cụ để quản lý mã nguồn, theo dõi côngviệc, xây dựng và triển khai ứng dụng, tất cả trong một giao diệnđồng nhất GitLab hỗ trợ mô hình DevOps và là một giải pháptoàn diện cho quy trình phát triển phần mềm

Hình 2.3 Logo GitLab

 Kết quả: biết cách sử dụng GitLab để quản lý mã nguồn, xem thayđổi, tạo merge requests, quản lý nhánh cũng như sử dụng tốt các gitcommands

2.2.3 Các framework, thư viện phát triển web

 Nội dung: tham gia các buổi huấn luyện về các công nghệ nhưReactJS, Ant Design, Redux, …

Trong quá trình thực tập, em được hướng dẫn về các công nghệ quantrọng đối với một Frontend Developer Đây đều là những công nghệphổ biến giúp tối ưu hóa quá trình phát triển web

o ReactJS: là một thư viện JavaScript được phát triển bởi Facebook.React được thiết kế để xây dựng các giao diện người dùng (UI)đơn trang và hiệu suất cao Nó đã trở thành một trong những thưviện JavaScript phổ biến nhất và được sử dụng rộng rãi trongcộng đồng phát triển web

Hình 2.4 Logo ReactJS

o Ant Design: Ant Design là một bộ công cụ giao diện người dùng(UI toolkit) được thiết kế để phục vụ việc xây dựng giao diệnngười dùng hiện đại, thân thiện và dễ bảo trì trong ứng dụng web

và ứng dụng di động

Hình 2.5 Logo Ant Design

o Redux: là một thư viện quản lý trạng thái (state management)cho ứng dụng JavaScript, thường được sử dụng chủ yếu trong cácứng dụng React, nhưng nó cũng có thể được tích hợp với các thưviện và framework khác

Hình 2.6 Logo Redux

 Kết quả: nắm vững được các công nghệ giúp ích cho em vô cùngnhiều trong quá trình làm việc và ngay cả trong những dự án cánhân

- Nắm được luồng hoạt động của Redux

- Ứng dụng được Redux để quản lý ứng dụng một cách hiệuquả

2.2.4 Dynamic rendering

 Nội dung:

Toàn bộ ứng dụng tại công ty đa số đều xoay quanh các form và list,chính vì vậy team Frontend đã phát triển và tích hợp chúng theo kiểuđộng Cụ thể, phía Backend sẽ lưu trữ các template của form và list ởdạng JSON và trả về cho Frontend, từ đây ứng dụng sẽ dựa vàotemplate đó để tạo ra các giao diện

Đối với dynamic list, dữ liệu mà Backend trả về là các columns để quy định cách mà các cột sẽ được hiển thị, cũng như thứ tự sắp xếp, filter:

Hình 2.7 Dữ liệu list template trả về từ Backend

Sau đó, ứng dụng sẽ xây dựng các thành phần UI dựa trên dữ liệu này:

Hình 2.8 Giao diện list được xây dựng từ template

Đối với dynamic form, Backend trả về dữ liệu là các sections, trong mỗisection chứa một trường dữ liệu là fields, đây là mảng dùng để quy định cách hiển thị cho từng field

Hình 2.9 Dữ liệu form template trả về từ Backend

Sau đó, trang web sẽ hiển thị giao diện tương ứng:

Hình 2.10 Giao diện form được xây dựng từ template

 Kết quả:

o Hiểu được cách hoạt động của dynamic rendering

o Ứng dụng được kỹ thuật để tạo ra các giao diện cho sản phẩm

o Làm quen được các kỹ thuật nâng cao để có thể đưa chúng vàonhững dự án cá nhân trong tương lai

Trong suốt quá trình làm việc tại công ty, em có cơ hội được làm việctheo một quy trình cụ thể, rõ ràng Trước khi bắt đầu sprint, em vàteam sẽ estimate cho một số các ticket trong Backlog Bên cạnh đó,

em tham gia vào các buổi Sprint Planning để nhận task

Đầu mỗi ngày sẽ có các buổi daily meeting để báo cáo tiến độ côngviệc Và sau khi kết thúc sprint, các team sẽ có buổi SprintRetrospective để cùng nhau nhìn lại một sprint vừa qua

Hình 2.11 Agile/Scrum trong quản lý dự án phát triển phần mềm

 Kết quả: có thể hiểu được một số quy trình cơ bản trongAgile/Scrum, làm quen với quy trình phát triển phần mềm phổ biến

để áp dụng vào công việc hiện tại và trong tương lai

2.3 Tham gia dự án thực tế

2.3.1 Giới thiệu dự án

Trong quá trình thực tập tại công ty, em được tham gia vào 2 dự án chính của công ty:

 Maintenance: dự án tập trung fix các lỗi liên quan đến giao diện, trải nghiệm người dùng Đây có thể là các lỗi phát sinh trong quá trình phát triển, hoặc những phản hồi của người dùng khi sử dụng sản phẩm

Một ví dụ về một task trong dự án là nâng cao trải nghiệm thông qua việc triển khai tính năng auto-select Cụ thể, khi một ô select trong form chỉ một option, ứng dụng cần tự động chọn option đó Đây là yêu cầu xuất phát từ người dùng khi họ trải nghiệm sản phẩm của công ty