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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (791.85 KB, 23 trang )

<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>BÁO CÁO THỰC TẬP</b>

<b>FRONTEND DEVELOPER INTERN</b>

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

<b>TP. Hồ Chí Minh, tháng 7 năm 2023</b>

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

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ưỡngvà 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.

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

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ệndự định.

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

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 07năm 2023

Trần Đình Khơi

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

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

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

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

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

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

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

</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 cơng ty TNHH Kegmil VN</b>

<i>Hình 1.1. Logo công ty TNHH Kegmil VN</i>

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 tồ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 chun 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ợimà 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 Electricvà Global Brain Corporation thành lập) và Origin Capital, với sự tham giacủa GHV Accelerator và GK-Plug and Play Indonesia.

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 tốn.

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

 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ười

dù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.

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

</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: 3 ngàyNộ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…

- Ngồ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ôngty như thời gian đi làm, các quy định.

<b>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</b>

 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 q 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.

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

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.

<i>Hình 2.2. Logo Confluence</i>

 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.

<b>2.2.2. Công cụ quản lý source code</b>

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

Tồ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áptồn diện cho quy trình phát triển phần mềm.

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

<i>Hình 2.3. Logo GitLab</i>

 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.

<b>2.2.3. Các framework, thư viện phát triển web</b>

 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 q 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.

<i>Hình 2.4. Logo ReactJS</i>

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 webvà ứng dụng di động.

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

<i>Hình 2.5. Logo Ant Design</i>

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.

<i>Hình 2.6. Logo Redux</i>

 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ả.

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

<b>2.2.4. Dynamic rendering</b>

 Nội dung:

Tồ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:

<i>Hình 2.7. Dữ liệu list template trả về từ Backend</i>

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:

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

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

Đố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.

<i>Hình 2.9. Dữ liệu form template trả về từ Backend</i>

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

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

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

 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ào

những dự án cá nhân trong tương lai.

<b>2.2.5. Agile/Scrum</b>

 Nội dung: làm quen với quy trình phát triển phần mềm Agile/Scrum.Agile và Scrum là hai khái niệm phổ biến trong lĩnh vực quản lý dự ánvà phát triển phần mềm. Agile khơng phải là một quy trình cụ thể mà làmột triết lý phát triển dựa trên sự linh hoạt, tương tác và sự phản hồiliên tục. Scrum là một framework quản lý dự án thuộc hệ thống Agile,được sử dụng rộng rãi trong phát triển phần mềm.

Trong suốt q 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.

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

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

 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.

<b>2.3. Tham gia dự án thực tế2.3.1. Giới thiệu dự án</b>

Trong q 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 q 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.

</div>