Thực tập tốt nghiệp lập trình ứng dụng web với reactjs công ty thực tập công ty tnhh giải pháp phần mềm tường minh (tma

DAI HOC CONG NGHE THONG TIN KHOA CONG NGHE PHAN M EM ⁄ THỰC TẬP TỐT NGHIỆP LẬP TRÌNH ỨNG DỤNG WEB VỚI REACTJS Công ty thực tập: Công ty TNHH Giải pháp Phần m`ềần Tưởng Minh TMA So

DAI HOC CONG NGHE THONG TIN KHOA CONG NGHE PHAN M EM

⁄

THỰC TẬP TỐT NGHIỆP

LẬP TRÌNH ỨNG DỤNG WEB VỚI REACTJS

Công ty thực tập: Công ty TNHH Giải pháp Phần m`ềần

Tưởng Minh (TMA Solutions) Lớp: SE501.NII.PMCL Sinh viên thực hiện: Trần Hoàng Long — 19521801

Tp H ôChí Minh, ngày 22 tháng 12 năm 2022 x °

AS

LỜI MỞ ĐẦU

Với sự phát triển nhanh chóng mặt của thị trưởng phần m`ần, Cùng với sự phát triển của thế giới, Việt Nam cũng không ngoại lệ Các xu hướng phát triển web đã và đang phát triển rất mạnh mẽ để hòa nhập với xu hướng toàn cần Các công nghệ thay đổi theo từng thời kì đòi hỏi các doanh nghiệp và nhà phát triển luôn phải cập nhật, cải tiến các sản phẩm web để mang đến những sản phẩm tốt nhất phù hợp với thị trưởng

Sau thơi gian học tập trên trưởng, với mục dich trang bị thêm cho mình kinh nghiệm thực tế, cũng như muốn được tham gia trải nghiệm và làm việc trong một môi trưởng chuyên nghiệp, em đã quyết định tìm kiếm một công ty để thực tập Vì vậy, em quyết định chon TMA Solutions — một môi trưởng lý tưởng, hiện đại, chuyên nghiệp - là nơi sẽ giúp em thực hiện kỳ thực tập này

Trần Hoàng Long

LOI CAM ON

Trân trọng gửi lởi cam on Céng ty TNHH Giai phdp ph mn Tudong Minh(TMA

Solutions) da tao di kiện cho em có cơ hội được thực tập tại công ty

Em xin chân thành cảm ơn các anh chị mentor, các thành viên trong team ReactJS

cùng tất cả mọi người trong công ty đã hỗ trợ em trong công việc và chia sẻ với em những kinh nghiệm làm việc quý báu Chỉ trong 2 tháng thực tập, nhưng nhở sự chỉ dẫn tận tình của mentor cùng với tất cả mọi ngươi đã giúp em tiếp thu những kiến thức cẦn thiết, và nâng cao kỹ năng sẵn có bản thân

Cũng xin cảm ơn các thầy cô trong khoa Công nghệ ph`› m`ần đã nhiệt tình hỗ trợ,

tạo đi ân kiện em làm bài báo cáo nay

Trần Hoàng Long

Tp H 6Chi Minh, thang 12 nam 2022

NHAN XET CUA KHOA

Trần Hoàng Long

IE9/06/.00/0)0 00 AANANAgv.A1 3

P.9 0.950060007.09.G.9.01 4

hp ii 5

Chương 1 Giới thiệu công ty thực tập - +- cọ HnHn Hrr, 1 II HH on am 1

1.2 WẲẰ ẽ co an 2

Chương 2 Nội dung thực tẬP - - - << LH TH TH HH TH Hư tườ 4 2.1 Tìm hiểu công ty và các kỹ năng cơ bản trong công Éy sec sesererevee 4 PIN ôn ca na 4

PHI no an se 6

“4 Lich oan 6

Chương 3 Chi tIẾT V ÊDFOJ€C( SG ST TH HH TH TH HH vn 9 “Non on 9

E “ma oi ah 9

== <2 se .ea 9

Churong 4 T6ng Két nh 10

Chung l8 0/1 11

Chương I Giới thiệu công ty thực tập

soluti ns

1.1 Giới thiệu công ty

[1 Tên công ty: Công ty TNHH Giải pháp Phần m`ềần Tưởng Minh

LI Tên thương mại: TMA Solutions

LH Địa chỉ:

o Head Office (Lab 1): 111 Nguyễn Đình Chính, Phương 15, Phú Nhuận,

TP H 6Chí Minh

o Office 3 (Lab 3): 10 Dang Văn Ngữ, Phương 10, Phú Nhuận, TP Hồ

Chí Minh

o Office 4 (Lab 4): 84A/5 Trầ› Hữu Trăng, Phường 10, Phú Nhuận, TP

HChí Minh

o Office 5 (Lab 5): Anna Building — lot I — Central road, Công viên ph Ấn

mm Quang Trung, Tân Chánh Hiệp, Quận 12, TP H'ôChí Minh

o Office 6 (Lab 6): TMA Tower — lot 17 — Road 10, Công viên ph âầì m ần

Quang Trung, Tan Chanh Hiép, Quan 12, TP H 6Chi Minh

o TMA Inovation Park (Lab 8): Dai 16 Khoa hoc, Phuong Gh‘&ih Rang,

Quy Nhon O1 Website: https://www.tmasolutions.com

Trần Hoàng Long

2 TMA Solutions được thành lập nấm 1997, cung cấp dịch vụ gia công phì m`ần chất lượng cho các công ty hàng đầu trên toàn thế giới TMA tự hào là công ty phần m`ềần hàng đi Việt Nam Với 25 năm phát triển vững mạnh, TMA đã xây dựng được một đội ngũ với hơn 3,800 kỹ sư tài năng, nhiệt huyết luôn nhận được sự đánh giá cao tử phía khách hàng, cùng chung tay xây dựng hình ảnh TMA - đối tác tin cậy trên bản đô công

nghệ thông tin toàn c`âI MA hiện có 7 chỉ nhánh tại Việt Nam (6 tại FPH ôChí Minh

va 1 TP Quy Nhơn) cùng với 6 văn phòng ở nước ngoài (Mỹ, Canada, Pháp, Nhật, Úc, Singapore)

1.2 Sản phẩm công ty

Với kinh nghiệm phong phú, TMA mang đến cho khách hàng các giải pháp toàn diện trong nhi`âi lĩnh vực với việc đồng hành cùng khách hàng từ giai đoạn tư vấn, ý tưởng, phân tích yêu cu, tới các giai đoạn thiết kế, kiểm thử cho đến khi hoàn thiện sản phẩm

và vận hành hệ thống 24/24

Giải pháp & dịch vụ

Phát triển

phân mềm

Tư vấn Phân tích Thiết kế Hỗ trợ

Kiểm thử

phân mềm

dy an giao dién : hệ thống

Tích hợp

hệ thống

[ ĐT lf | ]

Go Automation il Go Digital i Go Mobile it Go Online ia

Go Smart —° Go Innovative i Go Interactive it Go Cloud

© Smart camera

© Smart building

s Kiểm soát ra vào

© Theo dõi sức khỏe từ xa

Sản phẩm công nghệ 4.0 cho các ngành

s Khu công nghiệp thông minh

© Quan ly container

s Quản lý điện - nước

s Robot

Giải pháp công nghệ cho nhiều lĩnh vực

Viễn thông

Mang 4G/5G

loT

VolP

» WebRTC

» Tống đài số

* Ung dụng quản lý mang

» Router

Thương Mại Điện Tử &

eT tt

Tu van, thiét ké, va xay dung

kỹ thuật hệ thống trọn gói về

thương mại điện tử

Phân tích hành vi khách hàng

Dự báo doanh số

Phần mềm phân phối

Xe hơi & Robot

Phần mêm xe hơi

Phân mêm robot

Các hệ thống điều khiển

LiDAR/SLAM

Wireless

Infotainment/HMI

Tài chính & Bảo hiểm

s Giám sát ra vào kho quỹ

* Nhận dạng tài liệu

* Quan ly tài sản

* Thị trường vốn

s Quản lý quỹ

s Quản lý dòng tiền

s Phân tích tài chính

s Quản trị tài chính doanh nghiệp

s Thanh toán + Phần mềm bảo hiểm Bất động sản & Xây dựng

s Smart building

s Smart camera

* Quan ly ra vao

« Giao dịch bất động sản

« Tài chính bất động sản Sản xuất & Logistics

» Quản lý logistics

* Quan lý đội xe và phương tiện vận chuyển

5 Giải pháp tự động hóa

5 Robot tự hành AGV

s Tối ưu hoạt động của máy móc

« Giải pháp đếm sản phẩm hàng hóa tự động

s Theo dõi container

RTT Cet N AÁ.` Theo dõi sức khỏe người

lớn tuổi tại nhà Theo dõi sức khỏe F0 từ xa Phân tích dữ liệu bệnh nhân Phân tích dữ liệu bệnh viện

Hệ thống thông tin y tế

Phan mem quản lý nhà thuốc

Công cụ hỗ trợ nghiên cứu

lâm sàng Phân mềm phòng chống sot ret

Giai phap phong gym Phan tich gen

Giao duc & Dao tao Sách giáo khoa điện tử,

Thư viên điện tử, Sách điện tử

» Đào tạo trong doanh nghiệp Phân tích hành vi học trực tuyến Phân tích học sinh

« Cá nhân hóa nội dung học

s Quản lý trường hoc

Trần Hoàng Long

Chương 2 Nội dung thực tập

Đợt thực tập kéo dài 2 tháng, nhằm mục đích giúp sinh viên thực tập được đào tạo

toàn diện v`ề lập trình ứng dụng web với ReactJS, đ ông thời rèn luyện những kỹ năng

mm như làm việc nhóm, thuyết trình, giao tiếp Tại công ty, sinh viên có cơ hội được học tập, khám phá và làm việc trong một môi trưởng phát triển phì mềềm chuyên nghiệp

2.1 Tim hiéu céng ty và các kỹ năng cơ bản trong công ty

[1 Nội dung: Giới thiệu v écéng ty, cách tổ chức, các quy định và quy trình làm việc trong công ty

o Tham gia vào các lớp training dành cho New -hire trong suốt khoang thoi gian thực tập

o_ Được trainer giới thiệu v`ềcông ty, quá trình thành lập, phát triển và cách thức tổ chức của công ty

o Ngoài ra, thực tập sinh còn được giới thiệu v`cách thức và quy trình làm việc, các quy định cn phải tuân thủ,

H Kết quả: Hiểu thêm về quá trình thành lập, phát triển, cũng như tần nhìn, và giá trị cốt lõi của TMA Biết được cách làm việc, hoạt động trong môi trưởng thực tế ở một công ty ph3n m ‘én

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

2.2.1 Tim hiéu v €ReactJS

O Nội dung: Tìm hiểu và nắm vững kiến thức căn bản v`êReactJS

o Tim hiéu va nam ré React ES6, React JSX, React components

o Tim hiéu v éReact Props/State, React Hook

o Tim hiéu va nam ré v €State management

o Tim hiéu Unit tests trong ReactJS

O Két qua: Hiéu biét co ban vé thu vién ReactJS, hoc héi duoc nhi& kinh

nghiệm trong việc làm việc nhóm Có thêm nhỉ `âi kiến thức v`ềlĩnh vực dự án

Nhận được phản hổ của các anh chị v`ềmặt kỹ năng và kiến thức

2.2.2 Tim hiéu v €Angular framework

HH Nội dung: Tìm hiểu và nắm vững kiến thức căn bản v`ÊAngular

Oo

Oo

Oo

Oo

Tim hiéu v écac kiến thức cơ bản cta Angular, Angular component

Tìm hiểu v`ề Directives, làm việc với các Directives co’ ban nhw ngFor,

neglf

Tìm hiểu kiến thire v‘é Service trong Angular( Angular HTTP Client, -

Observable, .)

Tim hiéu v €Reactive Form(FormsModule,ngForm, ngModel ngSubmit)

Tìm hiểu về UI framework h6é tro’ Angular nhu PrimeNG, Angular material

Tim hiéu Unit tests va End-to-End tests (cypress test) trong Angular

Thuc hién demo Angular

O Két qua: Hiéu biét co ban v €Angular framework, nam được cách cài đặt và sử

dung Angular framework trong một dự án Nhận được phản h ` của các anh chị

v émat ky nang va kiến thức

2.2.3 Tim hiéu v €Web responsive

At ` 1 ` ‹ ~ tar “ yw > AA :

L Nội dung: Tìm hiểu và nấm vững kiến thirc can ban v €Web responsive

Oo

Oo

Tim hiéu overview Web responsive

Tìm hi âu v êcác khái niém Viewport, Media query (@media)

Tìm hiểu v ềkhái niệm Breakpoints

Tìm hiểu v ềGrid System

Thuc hién demo Web responsive

Trần Hoàng Long

2.3

6

HH Kết quả: Hiểu biết cơ ban vé Web responsive, nam duoc cach str dung Web

responsive trong một dự án Nhận được phản hỗ của các anh chị v`ề mặt kỹ

năng và kiến thức

Tham gia project

Sau thởi gian được training và thực hành, thực tập sinh đã nắm được những kiến

thực cơ bản v`ềFront-end ReactJS Sau đó thực tập sinh áp dụng những kiến thức

đã học để thực hiện phát triển project

2.4 Lịch làm việc

Tuần Công việc Người hướng dẫn Nin cua

người hướng dẫn

O Tham gia meeting gigi | Anh Chu Van Thanh

thiéu véc6ng ty danh

cho New-hire

O Lam quen với các

công cụ và môi trưởng

trong công ty

1

H Ôn tập tìm hiểu các

kiến thức cơ bản của

ReactJS

O Tim hiéu quy trinh lam

việc và vai trò của

ReactJS trong dự án

Tham gia lop training

dành cho New-hire của

công ty

Thực hiện ứng dụng

demo để kiểm tra kiến

thức đã học

Tìm hiểu về State

management (Redux,

Redux Toolkit)

Tìm hiểu v`ềUnit test

Chuẩn bị và trình bày

cho team về State

management va Unit

test

Anh Chu Van Thanh

Tham gia lop training

đành cho New-hire của

công ty

Tìm hiểu các kiến thức

cơ bản của Angular

framework

Thực hiện ứng dụng

demo để kiểm tra kiến

thức đã học

Anh Nguyễn Quang Vinh

Tham gia lớp training Anh Chu Văn Thành

Trần Hoàng Long

dành cho New-hire của

công ty

Tìm hiểu vê Web

responsive

Thực hiện ứng dụng

demo để kiểm tra kiến

thức đã học

Chuẩn bị và trình bày

cho team vé Web

responsive

Tham gia lop training

dành cho New-hire của

công ty

Tham gia vao project

thực tế và được nhận

các task đơn giản Anh Nguyễn Quang

Vinh

Chuong 3 Chi tiét v €project

3.1 Giới thiệu project

Mô tả: Ứng dụng web giúp quản lý User và các Role của User Với Layout có

LeftMenu, cùng với các chức năng cơ bản như table show list User va list Role,

thêm/xóa/sửa, sort/paging/search, assign role to a list of user, đ`âi thông qua call API

3.2 Thực hiện

Thực tập sinh: Trần Hoàng Long

Dưới sự hướng dẫn của mentor Chu Văn Thành

3.3 Kế hoạch

Vì quy định bảo mật của công ty nên các thông tin chỉ tiết v êdự án thực tế không được cung cấp ra bên ngoài

Trần Hoàng Long

10

Chương 4 Tổng kết

Như vậy, trong hai tháng thực tập, em đã tham gia và thực hiện dự án tại TMA

Solutions Thoi gian thực tập này đã mang lại cho em nhi `âi kiến thúc và kinh nghiệm

Dù đây là In đâi em trải nghiệm việc phát triển phần m`ềần trong thực tế, kết quả em đạt được đã vượt hơn mong đợi của em rất nhi `êi Tuy nhiên, em cũng nhận thấy được rằng bản thân còn nhiên thiếu sót c3n cải thiện, nếu thêm thơi gian nhất định em sẽ thể hiện va làm tốt hơn

Chân thành cảm ơn sự giúp đỡ của các anh chị trong team tại TMA Solutions và anh Chu Văn Thành đã theo dõi và hướng dẫn quá trình thực tập của em, giúp em hoàn thành

tốt dự án và cả đợt thực tập này tại TMA Solutfions

11

Chương 5 Tài liệu tham khảo

1 TMA Solutions, https://www.tmasolutions.vn/

2 ReactJS, https://ReactJS.org/

3 Angular, https://angular.io/

Trần Hoàng Long