báo cáo thực tập intern front end developer

Công nghệ được ứng dụng trong hầu hết các lĩnh vực quan trọng: giáo dục, y tế, văn hoá, du lịch, giao thông, … Chính vì sự phát triển mạnh mẽ của công nghệ thông tin, nhu cầu sử dụng các

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

INTERN FRONT-END DEVELOPER

Công ty thực tập: Unit Technology Corporation Người phụ trách: Nguyễn Hồng Phong

Thực tập sinh: Lê Đặng Phương Uyên

LỜI MỞ ĐẦU

Trong thời đại ngày nay, công nghệ thông tin giữ vai trò quan trọng ở mọi quốc gia trên thế giới, là yếu tố quan trọng trong công cuộc phát triển đất nước Công nghệ được ứng dụng trong hầu hết các lĩnh vực quan trọng: giáo dục, y tế, văn hoá, du lịch, giao thông, …

Chính vì sự phát triển mạnh mẽ của công nghệ thông tin, nhu cầu sử dụng các ứng dụng web ngày càng tăng cao hơn Để có thể xây dựng nên một ứng dụng web tốt, ngoài yếu tố giao diện thân thiện, dễ sử dụng, các thao tác xử lý logic và dữ liệu phía sau cũng rất quan trọng Nắm bắt được xu hướng đó, em đã lựa chọn ReactJS Front-end Developer là định hướng phát triển bản thân và nghề nghiệp trong tương lai

Sau những năm tháng học tập 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 Công ty Cổ phần Công nghệ UNIT – một môi trường lý tưởng và chuyên nghiệp để thực hiện dự định của bản thân

LỜI CẢM ƠN

Em xin trân trọng gửi lời cảm ơn đến Công ty Cổ phần Công nghệ UNIT đã tạo điều kiện cho em có 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 Nguyễn Hồng Phong, em đã tiếp thu những kiến thức quan trọng để có thể sẵn sàng tham gia vào các dự án thực tế

Ngoài kiến thức chuyên môn, em còn học được những kỹ năng cần thiết: quản lý thời gian, kỹ năng giao tiếp, làm việc nhóm, kỹ năng giải quyết vấn đề Đây sẽ là hành trang quý giá cho em trên con đường phát triển sau này

Chân thành cảm ơn các anh chị trong team đã 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 4 tháng 1 năm 2024

Lê Đặng Phương Uyên

NHẬN XÉT CỦA KHOA

MỤC LỤC

LỜI MỞ ĐẦU 1

LỜI CẢM ƠN 2

NHẬN XÉT CỦA KHOA 3

MỤC LỤC 4

DANH MỤC HÌNH 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 Cổ Phần Công nghệ UNIT 6

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

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

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

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

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

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

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

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

3.1 Điểm mạnh 17

3.2 Điểm yếu 17

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

TÀI LIỆU THAM KHẢO 19

DANH MỤC HÌNH

Hình 1 1 Logo công ty 6

Hình 1 2 Sản phẩm Paperless 7

Hình 1 3 Hệ thống quản lý ra vào 8

Hình 1 4 Sản phẩm BPM Hub 8

Hình 1 5 Sản phẩm Napas ACH 9

Hình 1 6 Sản phẩm CIC Host to Host 10

Hình 1 7 Sản phẩm SBV Reporting System 11

Hình 2 1 Sơ đồ tổ chức giao diện người dùng 13

Hình 2 2 Trang đăng ký / đăng nhập 15

Hình 2 3 Trang Home 15

Hình 2 4 Trang Danh mục sản phẩm 16

Hình 2 5 Giỏ hàng 16

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

Hình 1 1 Logo công ty

Tên công ty: Công ty Cổ phần Công nghệ UNIT

Địa chỉ văn phòng: 157 Nguyễn Thị Thập, Phường Tân Phú, Quận 7, Thành phố Hồ Chí Minh

Website công ty: https://unit.com.vn/

Quy mô: hơn 200 người

UNIT là Công ty công nghệ chuyên cung cấp các Giải pháp và Sản phẩm phần mềm trong lĩnh vực Tài chính, Ngân Hàng, Bảo hiểm và Quản trị có uy tín tại thị trường Việt Nam và Quốc tế Với phương châm “Chúng tôi luôn lắng nghe ý kiến của khách hàng, nhu cầu của thị trường, nghiên cứu các công nghệ mới để đem đến cho khách hàng những sản phẩm đầy trải nghiệm” Công ty hiện tại có 3 chi nhánh:

- Một trụ sở ở Thành phố Hồ Chí Minh

- Một chi nhánh ở Hà Nội

- Một văn phòng ở Singapore (Giới thiệu UNIT, n.d.)

1.2 Sản phẩm công ty

1.2.1 Sản phẩm Paperless

Hình 1 2 Sản phẩm Paperless

- Chuyển đổi giấy tờ truyền thống sang biểu mẫu thông minh, biểu mẫu kỹ thuật số cùng với tự động hóa quy trình kinh doanh nhằm tối đa hóa qui trình ra quyết định của Doanh nghiệp Sự kết hợp giữa Biểu mẫu thông minh (Smart Forms) + eKYC + Qui trình nghiệp vụ – (BPM – Business Process Management) + Chữ ký số (Digital Signature) (Sản phẩm Paperless, n.d.)

1.2.2 Hệ thống quản lý ra vào

Hình 1 3 Hệ thống quản lý ra vào

- Ứng dụng ra đời với sứ mệnh giúp Tổ chức và Doanh nghiệp chào đón khách mời một cách THÔNG MINH – TOÀN DIỆN và HIỆN ĐẠI (Hệ thống quản lý ra vào, n.d.)

1.2.3 Sản phẩm BPM Hub

Hình 1 4 Sản phẩm BPM Hub

- BPM Hub là hệ thống trung tâm tích hợp và điều phối hệ thống qui trình nghiệp vụ kinh doanh (BPM), hệ thống xử lý nghiệp vụ và các hệ thống liên quan khác (Sản phẩm BPM Hub, n.d.)

1.2.4 Sản phẩm Napas ACH

Hình 1 5 Sản phẩm Napas ACH

- Giải pháp cung cấp hệ thống chuyển mạch tài chính và bù trừ điện tử ACH

(Automation Clearing House), đây là mô hình kết nối chuyển mạch tài chính và bù trừ thanh toán giữa NAPAS và ngân hàng thành viên Hệ thống ACH là hệ thống thanh toán bù trừ tự động phục vụ nhu cầu xử lý bù trừ (clearing) các giao dịch thanh toán (ghi Nợ/Có tài khoản) bán lẻ giá trị thấp (thường là các giao dịch bán lẻ, thực hiện 24/7, có giá trị nhỏ, số lượng giao dịch trong ngày lớn), thực hiện xử lý theo món (transaction) hoặc theo lô (batch) giữa các thành viên tham gia (Sản phẩm Napas ACH, n.d.)

1.2.5 Sản phẩm CIC Host to Host

Hình 1 6 Sản phẩm CIC Host to Host

- Hệ thống CIC H2H là hệ thống kết nối online giữa tổ chức tài chính với trung tâm tín dụng quốc gia CIC (National Credit Information Center of Viet Nam) nhằm truy vấn thông tin tín dụng trực tuyến với CIC phục vụ cho các nhu cầu tín dụng cá nhân và doanh nghiệp (Sản phẩm CIC Host to Host, n.d.)

1.2.6 Sản phẩm SBV Reporting System

Hình 1 7 Sản phẩm SBV Reporting System

- Hệ thống báo cáo ngân hàng nhà nước được xây dựng với mục đích phục vụ cho báo

cáo và thống kê số liệu một cách tự động dành cho ngân hàng và các tổ chức tài chính

đáp ứng yêu cầu đặt ra của ngân hàng nhà nước theo các thông tư 02 & 03, thông tư

11, thông tư 35, công văn 1396, CIC, DIV… (Sản phẩm SBV Reporting System, n.d.)

Ngoài ra còn rất nhiều sản phẩm hỗ trợ doanh nghiệp xây dựng phương thức vận hành tối ưu,

loại bỏ các quy trình rườm rà

Em tham gia làm việc tại công ty bắt đầu từ ngày 01/11/2023 tới 05/1/2024, các ngày làm việc

trong tuần là từ thứ hai đến thứ 6 Công việc hằng ngày bắt đầu từ lúc 8h30 đến 17h30 Thời

gian nghỉ trưa khoảng 1 tiếng, từ 12h đến 13h Sau mỗi ngày làm việc 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 Cuối thứ 6 mỗi tuần sẽ tổng hợp và báo cáo lại những gì đã làm được

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

Thời gian: 1 ngày

Nội dung:

- Được giới thiệu về công ty, quy trình thành lập và phát triển, quy định bảo mật của công ty

- Học và làm quen với văn hóa công ty

- Làm quen với các công cụ hỗ trợ làm việc tại công ty: ứng dụng chấm công, gitlap, nền tảng chat, mail

Kết quả: hiểu thêm về UNIT, quá trình thành lập và phát triển Thành thạo các công cụ hỗ trợ làm việc, quy trình làm việc Hiểu rõ tầm quan trọng của bảo mật thông tin đối với một công

ty công nghệ 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.1 Tuần 1

Nội dung:

- Cài đặt môi trường (Node.js và npm), khởi tạo ứng dụng React

- Tìm hiểu về các React Common Hook (useRef, useMemo, useReducer, useContext, )

và cách sử dụng để quản lý các state

- Tìm hiểu về Material UI, MUI Styles, custom theme MUI

- Tìm hiểu về React Router

- Xây dựng web demo

Kết quả: Hiểu và vận dụng được các React Hook, React Router và sử dụng MUI để phát triển ứng dụng

2.2.2 Tuần 2

Nội dung:

- Tìm hiểu về cách gọi API và xử lí dữ liệu từ API bằng axios

- Tìm hiểu về cách tạo và quản lý form bằng React Hook Form và Yup

- Styling React

Kết quả: Hiểu và áp dụng được cách xử lí dữ liệu từ API bằng axios và cách dùng React Hook Form và Yup Hiểu hơn về nhiều kiểu style trong React (CSS-in-JS, Styled component) và tầm

2.2.3 Tuần 3

Nội dung:

- Xây dựng UI đăng nhập và dùng React Hook Form để xác thực dữ liệu nhập vào

- Xây dựng các chức năng đăng nhập bằng facebook và google

- Đọc hiểu cấu trúc source của IES Landing Page và responsive UI

- Dùng Figma design Organizational Chart hệ thống nhân viên phòng ban

- Tạo cấu trúc dữ liệu cho Organizational Chart

- Xây dựng các custom node cho chart

Kết quả: Hiểu và áp dụng được thành thạo React Hook Form Thiết kế được Organizational Chart bằng Figma và xây dựng dữ liệu và các component node

Hình 2 1 Sơ đồ tổ chức giao diện người dùng

2.2.4 Tuần 4

Nội dung:

- Xây dựng Organizational Chart

- Tìm hiểu RxJs và Strapi

Kết quả: Bổ sung thêm kiến thức về lập trình web, làm việc với API

2.2.6 Tuần 6

Nội dung: Tiếp tục tạo API từ Strapi và gọi chúng vào IES Landing Page và tìm hiểu NextJS

- Áp dụng với trang “Giới thiệu công nghệ”

- Tìm hiểu NextJS

Kết quả: Bổ sung thêm kiến thức về lập trình web, làm việc với API, tìm hiểu NextJS

2.2.7 Tuần 7

Nội dung: Áp dụng NextJS để xây dựng các trang web

- Cổng thông tin bảo hiểm (Trang Home)

- Trang “Dịch vụ”

- Trang “Về chúng tôi”

- Tìm hiểu cách triển khai NextJS

Kết quả: Tiếp cận và áp dụng NextJS vào dự án cá nhân

2.2.8 Tuần 8

Nội dung:

- Tìm hiểu eForm FORCS

- Áp dụng ReacJS xây dựng demo eForm

- Tìm hiểu eKYC

- Áp dụng ReactJS xây dựng demo eKYC

- Áp dụng Jest để kiểm thử đơn vị

Kết quả: Tìm hiểu được thêm nhiều công nghệ mới (FORCS, eKYC, Jest), đồng thời áp biết cách triển khai và có thể áp dụng vào các dự án cá nhân trong tương lai

2.3.1 Công nghệ

- Sử dụng ReactJS trên TypeScript

- Thư viện hỗ trợ:

+ Material UI

+ Axios

+ RxJs

+ React Facebook Login

+ React Google Login

2.3.2 Mô tả dự án

Đây là dự án demo cho quá trình training về ReactJS, với các chức năng đơn giản:

- Quản lí giỏ hàng

2.3.3 Kết quả

Hình 2 2 Trang đăng ký / đăng nhập

Hình 2 3 Trang Home

Hình 2 4 Trang Danh mục sản phẩm

Hình 2 5 Giỏ hàng

- Vì đang trong thời gian đào tạo tại công ty, em chưa có cơ hội được tiếp cận với các dự

án thực tế Trong thời gian tới em sẽ được tham gia vào dự án và học hỏi thêm nhiều kiến thức, từ đó trau dồi kinh nghiệm của bản thân

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

Thời gian thực tập tại UNIT đã mang lại cho em nhiều cơ hội phát triển cá nhân Không chỉ học được kiến thức chuyên ngành và kỹ năng thực tế, em còn đắm chìm trong những giá trị quan trọng khác Môi trường làm việc chuyên nghiệp tại đây giúp tôi cảm thấy thoải mái và được hỗ trợ

Thời gian thực tập còn hạn chế nên em chưa có được nhiều cơ hội tham gia vào các dự án thực

tế của công ty Thời gian thực tập còn lại em sẽ cố gắng trau dồi kiến thức để hoàn thành tốt công việc khi được tham gia vào dự án

- Được làm việc tại môi trường chuyên nghiệp, được hướng dẫn bởi những anh chị có chuyên môn và tận tâm

- Chuyên cần, có ý chí cầu tiến, ham học hỏi

- Hoà đồng với mọi người trong công ty

- Tiếp thu, học hỏi nhanh về các kiến thức mới

- Chịu được áp lực công việc

- Chưa có kinh nghiệm làm việc với ReactJS trước đó, nên tốn nhiều thời gian để tìm hiểu kiến thức nền

- Vị trí nơi ở cách công ty xa, nên tốn nhiều thời gian di chuyển

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

Qua quá trình thực tập, em có thể tự đánh giá các chuẩn đạt được như sau:

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

- 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 (G2): 8/10

- 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 (G3): 10/10

- 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 đề (G4): 9/10

- 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 (G5): 8/10

- Đọc, hiểu các tài liệu và giao tiếp bằng tiếng Anh (G6): 8/10

TÀI LIỆU THAM KHẢO

Giới thiệu UNIT (không ngày tháng) Được truy lục từ https://unit.com.vn/vn/gioi-thieu/

Hệ thống quản lý ra vào (không ngày tháng) Được truy lục từ

https://unit.com.vn/vn/he-thong-quan-ly-ra-vao/

Sản phẩm BPM Hub (không ngày tháng) Được truy lục từ

https://unit.com.vn/vn/san-pham-bpm-hub/

Sản phẩm CIC Host to Host (không ngày tháng) Được truy lục từ

https://unit.com.vn/vn/san-pham-cic-host-to-host/

Sản phẩm Napas ACH (không ngày tháng) Được truy lục từ

https://unit.com.vn/vn/san-pham-napas-ach/

Sản phẩm Paperless (không ngày tháng) Được truy lục từ

https://unit.com.vn/vn/san-pham-paperless/

Sản phẩm SBV Reporting System (không ngày tháng) Được truy lục từ

https://unit.com.vn/vn/san-pham-sbv-reporting-system/