BÁO CÁO THỰC TẬP LẬP TRÌNH FRONTEND VỚI REACTJS

Chương 2: Nội dung thực tập Đợi thực tập nhằm giúp các em lắm rõ các kiến thức về lập trình web nói chung và công nghệ ReactJS, và các thư viện UI, xử lý nghiêp vụ nói riêng.Đồng thời rè

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

LẬP TRÌNH FRONTEND VỚI REACTJS

Công ty thực tập: TGL Solutions Người phụ trách: Phan Ngọc Thịnh Thực tập sinh: Nguyễn Đức khang

TP Hồ Chí Minh,15 tháng 06 năm 2022

LỜI MỞ ĐẦU

Ngày nay, với sự phát triển nhanh chóng của internet, các ứng dụng web cũng ngày càng nhiều nên việc phát triển các ứng dụng web cũng đã trở nên rất phổ biến trong ngành công nghệ thông tin

Các ứng dụng web được sinh ra là do nhu cầu sử dụng internet hiện nay rất cao Các ứng dụng web cũng đem lại nhiều thuận tiện cho người dùng khi chỉ cần thiết bị hỗ trợ kết nối mạng là đã sử dụng được Vì lý do này, em quyết định chọn lập trình web làm định hướng cho việc học tập của mình

Sau hơn ba năm học tập trên trường, do mong muốn có thêm kinh nghiệm thực tế, cũng như muốn được tham gia làm ứng dụng web trong một môi trường chuyên nghiệp,

em có dự định là sẽ thực tập trong học kỳ này Vì vậy, em quyết định chọn TGL Solutions - một môi trường lý tưởng, hiện đại, chuyên nghiệp, trẻ trung năng động - là nơi sẽ giúp em thực hiện được dự định này

Đặc biệt cảm ơn chị Lê Bê Ly, đã hướng dẫn, giúp đỡ cho em tận tình khi em gặp những khó khăn trong việc làm quen với môi trường mới Cảm ơn anh Phan Ngọc Thịnh

– team leader đã quan tâm, giúp đỡ em trong khoảng thời gian thực tập Và gửi lời cảm

ơn đến tất cả các thành viên trong team

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ài báo cáo này

Nguyễn Đức Khang TpHCM, ngày 16 tháng 06 năm 2022

NHẬN XÉT CỦA KHOA

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

1 Giới thiệu công ty TGL Solutions 7

2 Sản phẩm của công ty 8

2.1 MIRAI EC System 8

2.2 APP QUAY SỐ ĐA CHỨC NĂNG (QUAY SỐ ONLINE/ TRỰC TIẾP/ QR CODE) 10

2.3 APP QUẢN LÝ SERIAL CODE 11

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

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

2 Tìm hiểu về dự án 12

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

3.1 Các công cụ làm việc 12

3.2 Tìm hiểu về Material, React hook form, Tailwind, redux, custom hook, graphql, rest API, sử dụng TypeScript 13

3.3 Lập trình Wed Frontend với ReactJS và các thư viện hỗ trợ 14

4 Thực hiện project 14

5 Lịch làm việc 14

Chương 3: Chi tiết về project 16

1 Giới thiệu về dự án 16

2 Các màn hình chính 16

2.1 Màn hình quản lý các công nhân đi khảo sát 16

2.2 Màn hình thu hoạch, theo dõi tiến độ và nội dung khảo sát, xuất các file báo

cáo 17

2.3 Màn hình tạo ra các form phức tạp đáp ứng rộng rãi các vấn đề về mẫu khảo sát 17

2.4 Màn hình quản lý các công ty 18

2.5 Màn hình hỗ trợ nhân viên quản lý Job của mình 19

Chương 4: Giải thưởng 20

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

1 Giới thiệu công ty TGL Solutions

Công ty Cổ phần TGL Solutions (gọi tắt TGL, tiếng Việt: ) là một công ty Việt Nam trong lĩnh vực IT hướng đến việc cung cấp các giải pháp (solutions) một cách thông minh và nhanh nhất, qua đó tối ưu hoá lợi nhuận cho khách hàng

Công ty cổ phần TGL Solutions được thành lập vào tháng 07/2019 với hai thành viên Từ khi thành lập cho đến nay, công ty luôn phát triển không ngừng và đặt mục tiêu phát triển liên tục vững mạnh hơn nữa trong thời gian tới

Hiện có hơn 50 kỹ sư tài năng đang làm việc, cùng nhau xây dựng hình ảnh TGL năng động và chuyên nghiệp trên bản đồ công nghệ thông tin

Phương châm: Smart & Speed Solutions

Giá trị cốt lõi: Xây dựng công ty với 2 giá trị cốt lõi là: NHÂN HOÀ

- NHÂN: là con người Tôn chỉ của TGL Solutions chính là xây dựng công ty lấy con người làm trung tâm Lợi nhuận thu được từ việc kinh doanh sẽ được dùng

để đầu tư về trang thiết bị để tạo môi trường làm việc tốt hơn, đầu tư các khóa đào tạo để nâng cao kỹ năng cho mọi người Bên cạnh đó, sẽ có các kì bonus theo dự án (không định kỳ), các kỳ đánh giá tăng lương 2 lần/năm

- HÒA: là sự hoà hợp, là sự đồng thuận, đồng lòng.Khi bàn luận về một vấn đề, chúng ta có thể thoải mái tranh luận, thoải mái góp ý.Sẽ có một lãnh đạo đưa ra quyết định cuối cùng và chịu trách nhiệm về quyết định của mình

Định hướng công ty:

Tăng số lượng nhân viên lên 40+ vào tháng 12/2021, 100 nhân viên vào tháng 12/2022

Tiếp tục đi theo hướng chính là outsourcing trong vòng 3 năm tới

- Một là, theo xu hướng chung của thế giới là cloud services Công ty sẽ mở rộng

service từ AWS ra GCP và Azure Chinh phục SaaS (Salesforce)

- Hai là, xông pha vào một lĩnh vực hẹp, ở đó IT chưa phát triển lắm và còn ít đối thủ cạnh tranh Hiện tại công ty đang hợp tác với 1 kiến trúc sư rất giỏi

người Nhật để phát triển các projects liên quan đến xây dựng nhà ở, kiến trúc

2 Sản phẩm của công ty

Những sản phẩm phần mềm của TGL Solutions được phát triển nhắm tới tệp

khách hàng rất đa dạng, từ trong nước cho tới ngoài nước, từ chính phủ cho tới các doanh nghiệp, tập đoàn lớn Là một công ty chuyên cung cấp các giải pháp, các sản phẩm trải rộng trên nhiều lĩnh vực TGL Solutions chuyên cung cấp các sản phẩm phần mềm phục vụ nhiều loại hình dịch vụ khác nhau, đem lại trải nghiệm tốt nhất cho người dùng

Một số dự án nổi bật:

2.1 MIRAI EC System

TÍNH NĂNG:

- Tính năng đặt hàng, mua bán sản phẩm, tích lũy và đổi point

- Góc VR Showroom, góc video giới thiệu sản phẩm của các nhà sản xuất

- Tính năng livestream: Các streamer có thể thực hiện tổ chức livestream, lên lịch livestream.Người dùng có thể xem livestream của các streamer và mua hàng trực tiếp

- Tính năng đấu giá sản phẩm: Các streamer có thể tổ chức đấu giá sản phẩm Người dùng có thể tham gia đấu giá sản phẩm, người đấu giá thành công có thể thực hiện order với giá thắng

- Trang admin: Trang admin: Quản lý sản phẩm, quản lí đặt hàng, số points, doanh thu ; Xuất excel theo đơn đặt hàng, theo sản phẩm, theo người dùng ;

Có thể tạo các link quickLogin đăng nhập vào trang Top, Admin; Có hệ thống gửi mail thông báo các trạng thái của đơn đặt hàng, trạng thái thay đổi points đến người dùng và người chịu trách nhiệm đơn hàng

CÔNG NGHỆ:

Nextjs, Ant Design, Agora, Socket, GraqhQL, webRTC, NestJS, Base Web

2.2 APP QUAY SỐ ĐA CHỨC NĂNG (QUAY SỐ ONLINE/ TRỰC TIẾP/ QR CODE)

TÍNH NĂNG:

- Quay số online hoặc trực tiếp tại cửa hàng

- Quản lý thông tin người quay số, kết quả xổ số, thiết lập tỉ lệ xổ số mong muốn

- Tùy chỉnh thiết kế thích hợp với user dựa trên mô hình SaaS

CÔNG NGHỆ:

ReactJS (Nextjs), Oracle, GraphQL, NestJS

2.3 APP QUẢN LÝ SERIAL CODE

TÍNH NĂNG:

- Tạo các Serial Code để quay số trúng thưởng

- Quản lý các Serial code đã tạo

- Tự động xuất các QR Code tương ứng với Serial Code

CÔNG NGHỆ:

ReactJS (Nextjs), Oracle, GraphQL, NestJS

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

Đợi thực tập nhằm giúp các em lắm rõ các kiến thức về lập trình web nói chung và công nghệ ReactJS, và các thư viện UI, xử lý nghiêp vụ nói riêng.Đồng thời rèn luyện những kỹ năng mềm như làm việc nhóm, giao tiếp, trao đổi với các thành viên khác trong công ty 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 ứng dụng web chuyên nghiệp

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

Thời gian : 1 ngày

Nội dung : Giới thiệu về công ty, cách tổ chức của công ty

Được nghe giám đốc công ty giới thiệu về công ty, quá trình thành lập và phát triển (như đã nhắc đến ở trê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

Ngoài ra, thực tập sinh còn được giới thiệu về cách thức làm việc trong công

ty như thời gian đi làm, các quy định cần phải tuân thủ, cách sử dụng email trong công việc…

Kết quả : Hiểu thêm về công ty TGL Solutions, quá trình thành lập và phát triển

Có thêm hiểu biết về cách thức làm việc trong một công ty công nghệ thống tin đồng thời thực tập sinh có ý thức hơn trong việc làm việc có kế hoạch, trao đổi, giải thích với những thành viên khác trong công ty

2 Tìm hiểu về dự án

Thời gian : 5 ngày

Nội dung: Giới thiệu, đưa tài liệu để tìm hiểu về dự án

Thực tập sinh được người hướng dẫn giới thiệu tổng quan về dự án Ngoài ra, thực tập sinh được đưa các tài liệu liên quan về dự án để tìm hiểu

Kết quả : Hiểu thêm về dự án sẽ làm, về cách làm việc với vai trò lập trình viên

trong công ty

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

3.1 Các công cụ làm việc

Thời gian: 2 ngày

Nội dung: Tìm hiểu về các công cụ sẽ được sử dụng trong quá trình làm việc

Trong thời gian này, người phụ trách đã hướng dẫn thực tập sinh tìm hiểu về các công cụ sẽ giúp ích cho trong công việc sau này Một số phần mềm trong số

đó như Microsoft Teams - sử dụng trong quá trình làm việc nhóm, Visual Studio Code - một công cụ hỗ trợ lập trình, SourceTree – Git GUI clients, gitlab

Thực hiện : Làm quen với cách sử dụng các phần mềm đã nêu trên

Kết quả : Lập trình sử dụng các công cụ miễn phí

3.2 Tìm hiểu về Material, React hook form, Tailwind, redux, custom hook,

graphql, rest API, sử dụng TypeScript

Thời gian: 10 ngày

Nội dung: Được hướng dẫn thêm về các kỹ thuật lập trình web nâng cao,

những kiến thức quan trọng cho việc tối ưu lập trình, quản lý state, validate form Sử dụng các thư viện UI như Material, Tailwindcss

- Nắm dõ các kiến thức cơ bản về validate form, register, watch, get/setValue

và các vấn đề liên quan đến React hook form

- Quản lý router, phân quyền qua react router dom

- Thực hiện css một cách hiệu quả và nhanh chóng với Tailwindcss

- Sử dụng ổn định các component của Material UI

- Quản lý sử dụng state hiệu quả với các Hook và redux

- Làm quen và sử dụng thành thạo custom hook

- Sử dụng graphql, rest API để call API

- Học TypeScript

Thực hiện:

- Tham gia meeting hàng ngày của team

- Hoàn thành các công việc được giao

- Đọc source và tham gia chỉnh sửa các tính năng nhỏ theo yêu cầu của leader

Kết quả:

- Nâng cao kỹ năng của bản thân

- Được tiếp xúc với nhiều công nghệ mới như graphql, tailwind

- Sử dụng thành thạo các hook và có khả năng custom hook một cách hiệu quả

- Tối ưu hoá việc rerender, tăng hiệu xuất ứng dụng

- Biết thêm về nhiều cách thiết kế UI cho phù hợp với UI/UX

- Sử dụng TypeScript để code tường minh, rõ dàng, dễ bảo trì

3.3 Lập trình Wed Frontend với ReactJS và các thư viện hỗ trợ

Nội dung: Do đã hiểu rõ và ôn lại các kiến thức ở trên Việc lập trình web trở

lên dễ dàng hơn Biết nhiều hướng giải quyết giúp cho lựa chọn và triển khai

dự án một cách tốt nhất

Thực hiện :

- Tham gia các buổi meeting hàng ngày

- Làm các công việc được giao

- Tham gia chỉnh sửa, phát triển thêm tính năng cho dự án

Kết quả :

- Nắm rõ về cách lập trình web nói riêng và với thư viện ReactJS/React TypeScrip nói chung

- Thực hiện cải thiện UI/UX của dự án

- Tối ưu cách quản lý và tổ chức source code hiệu quả

4 Thực hiện project

Sau thời gian được hỗ trợ và củng cố kệ thức thực tập sinh được giới thiệu, hướng dẫn và thực hành, thực tập sinh đã nắm được những kiến thức cơ bản về frontend, sao đó được tham gia dự án thực tế của team

5 Lịch làm việc

1

- Tìm hiểu về công ty, cách tổ chức của công ty

- Làm quen với các công cụ làm việc trong công

ty

- Học cách trao đổi, làm việc qua email

Anh Lê Tiến Triển Chị Lê Bê Ly Anh Phan Ngọc Thịnh

2

- Tìm hiểu về thông tin dự án Anh Lý Hồng Bảo

Anh Phan Ngọc Thịnh Anh Trần Hoàng Sơn Anh Trần Thanh Vũ

3 - Tìm hiểu về React hook form

- Material UI

Anh Phan Ngọc Thịnh Anh Trần Hoàng Sơn

6

- Tham gia bổ sung các tính năng, fix các bug tồn đọng Thêm yêu cầu theo nghiệp vụ khách hàng

Anh Phan Ngọc Thịnh Anh Trần Hoàng Sơn Anh Trần Thanh Vũ

7,8

- Thực hiện việc cải thiện và tiếp tục phát triển

dự án

Anh Phan Ngọc Thịnh Anh Trần Hoàng Sơn Anh Trần Thanh Vũ

Chương 3: Chi tiết về project

1 Giới thiệu về dự án

Dự án cho phép tạo các phiếu khảo sát đa phần về nhà cửa, quản lý nhân viên và cho nhân viên đi thực hiện rà soát, phát hiện, bảo trì nâng cấp nhà cửa, xuất các file báo cáo Dự án được đem đi triển lãm bên nhật có các khách hàng lớn như HAT Gần đây dự

án đang được chỉnh sửa và áp dụng với khách hàng Thái Lan Dự án có mặt trên các thiết

bị di động hỗ trợ nhân viên khảo sát

Thông tin chi tiết: https://kensa-cloud.com/

2 Các màn hình chính

2.1 Màn hình quản lý các công nhân đi khảo sát

Ở đây cho phép người quản lý có thể quản lý được các nhân viên của mình, cũng như thêm xoá sửa nhân viên Hỗ trợ tạo tài khảon cho nhân viên và xác nhận gửi qua mail đăng ký

2.2 Màn hình thu hoạch, theo dõi tiến độ và nội dung khảo sát, xuất các file báo cáo

Cho phép thu hoạch theo dõi, điền các form phức tạp, xuất các file báo cáo như

excel, pdf Xem được tiến độ, trạng thái của các nhân viên đi khảo sát

2.3 Màn hình tạo ra các form phức tạp đáp ứng rộng rãi các vấn đề về mẫu khảo

sát

Cho phép tạo ra các mẫu phức tạp, ở trong mỗi lựa chọn sẽ có thêm nhiều lựa chọn khác Việc tạo form khảo sát một cách linh động nhanh chóng và hiệu quả cao, tiết kiệm thời gian và chi phí người quản lý Tạo form dễ dàng với các tình huống khác nhau trong thực tế

2.4 Màn hình quản lý các công ty

Hỗ trợ quản lý thông tin công ty hỗ trợ các doanh nghiệp khác khi sử dung Nơi nhận phải hồi cải tiến hỗ trợ các công ty sử dụng

2.5 Màn hình hỗ trợ nhân viên quản lý Job của mình

Cho phép nhân viên theo dõi tiến độ, quá trình thực hiện các job của mình Nhân viên có thể coi các thông tin cá nhân, đổi mật khẩu Nhận thêm job

Chương 4: Giải thưởng

Dự án đã được thông qua và trở thành một trong 3 dự án xuất sắc nhất của 2 quý đầu năm với các tiêu chí: hiệu quả, sáng tạo, ứng dụng công nghệ mới, tiên phong đi đầu

Cá nhân em vinh dự trở thành một trong số những thành viên tiêu biểu

TÀI LIỆU THAM KHẢO

TỔNG KẾT

Thời gian thực tập vừa qua đã giúp em có điều kiện va chạm với thực tế, có thể áp dụng các kiến thức đã học ở trong trường vào thực tế và điều này thực sự rất quan trọng, cần thiết và bổ ích đối với sinh viên bọn em.Ngoài ra, em còn học được thêm những kiến thức mới về lập trình web back-end với ASP.Net Core và Entity Framework Thêm vào

đó, em còn được biết thêm về quy trình làm việc tại môi trường chuyên nghiệp, cách làm việc nhóm, giao tiếp giữa các thành viên để có thể chuẩn bị tốt hơn cho tương lai

Chúng em xin chân thành cảm ơn các thầy cô cùng toàn thể quý công ty đã giúp

đỡ và tạo điều kiện cho chúng em hoàn thành tốt nhiệm vụ và yêu cầu đặt ra trong thời gian thực tập này

Tuy nhiên vì thời gian và khả năng có hạn lại chưa có nhiều kinh nghiệm thực tế nên báo cáo thực tập vẫn còn nhiều thiếu sót vì vậy em mong muốn nhận được sự đóng góp ý kiến từ các thầy cô để nội dung bản báo cáo thực tập được hoàn thiện hơn