Báo Cáo Thực Tập Lập Trình Reactjs, Nestjs.pdf

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM Nguyễn Quốc Tú Trần Hoàng Gia Bảo BÁO CÁO THỰC TẬP LẬP TRÌNH REACTJS, NESTJS Công ty thực tập Vitalify Asia N[.]

Trang 1

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH 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 REACTJS, NESTJS

Công ty thực tập : Vitalify Asia

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

Trang 2

LỜI MỞ ĐẦU

Những năm trở lại đây, với tốc độ mở rộng mạnh mẽ của internet và sự thay đổi thói quen tìm kiếm thông tin và mua sắm trực tuyến Rất nhiều website xuất hiện để có thể đáp ứng được nhu cầu tìm kiếm thông tin, mua sắm trực tuyến, các dịch vụ cho người dùng và đã thúc đẩy ngành lập trình website “nở rộ”

Ngành website được sinh ra là do nhu cầu tìm kiếm thông tin, dịch vụ của người tiêu dùng trên internet Và cũng chính giới trẻ sẽ là nguồn nhân lực quan trọng cho việc phát triển của ngành lập trình website sau này Vì lý do này, em quyết định chọn lập trình website 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, em cảm thấy bản thân đã sẵn sàng để dấn thân vào môi trường chuyên nghiệp, em tin rằng điều này sẽ giúp em học hỏi, tiếp thu nhiều kiến thức hơn trong ngành này Do đó em đã đăng kí môn thực tập và bắt đầu tìm kiếm công việc Em đã chọn được công ty để bắt đầu phát triển bản thân là Vitalify Á Châu, đây là môi trường out-sourcing, một môi trường có khả năng thúc đẩy bản thân em thay đổi liên tục Qua quá trình thực tập tại đây, em mong rằng bản thân sẽ tích thêm nhiều kinh nghiệm, củng cố kiến thức cá nhân cũng như học hỏi thêm nhiều công nghệ mới

Trang 3

LỜI CẢM ƠN

Trân trọng gửi lời cảm ơn Công ty Vitalify Asia đã tạo điều kiện cho em có cơ hội được thực tập tại công ty cũng như được góp phần vào thực hiện các dự án trong môi trường hiện đại chuyên nghiệp

Nhờ sự hướng dẫn cùng chăm sóc nhiệt tình của các anh chị mentor, em đã dễ dàng hội nhập vào môi trường làm việc chuyên nghiệp cũng như tiếp thu được những kiến thức mới và quan trọng khi lập trình website Chân thành cảm ơn các anh chị mentor đã dành nhiều thời gian, công sức để hướng dẫn em hoàn thành trong đợt thực tập này

Cũng xin cảm ơn thầy cô trong khoa Công nghệ phần mềm đã dạy cho em nhiều kiến thức cũng như nhiệt tình hỗ trợ, tạo điều kiện em làm bài báo cáo này

Trần Hoàng Gia Bảo TPHCM, ngày 22 tháng 12 năm 2022

Trang 4

NHẬN XÉT CỦA KHOA

Trang 5

MỤC LỤC

Mục lục

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

2 Nghiên cứu kỹ thuật 4

3 Thực hiện project 7

4 Lịch làm việc 7

Trang 7

2

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

1 Giới thiệu công ty Vitalify Asia

Vitalify Asia là một công ty outsource Nhật Bản đã hoạt động tại thành phố

Hồ Chí Minh, Việt Nam vào năm 2008 với tầm nhìn của công ty là

“Delivering Happiness Through the Internet” bằng việc phát triển nhiều dịch

vụ thu hút số lượng lớn người dùng

Vitalify Á Châu có mục tiêu trở thành một công ty chuyên nghiệp có thể đảm nhận các dự án mang tầm vóc quốc tế Chính sách phát triển của công ty đó là: mỗi nhân sự từ kỹ sư, quản lý,… có trách nhiệm mở rộng vai trò và phạm vi công việc, tinh thần trách nhiệm của chính bản thân để mang lại giá trị cho người dùng với cấu trúc tổ chức phân thành các nhóm nhỏ ưu tú

Và sau hơn 10 năm thành lập, công ty chuẩn bị bước vào một giai đoạn mới nhằm nâng cao hơn nữa giá trị năng lực kỹ thuật tại Việt Nam và tạo ra nhiều sản phẩm "Made In Vietnam" và bán ra khắp thế giới

2 Môi trường làm việc của công ty

- Có văn phòng theo kiểu Pháp với sân vườn

- Đã có hơn 10 năm kinh nghiệm tại Việt Nam

và thị trường Đông Nam Á

Trang 8

3 Ngoài ra công ty cũng sở hữu cho mình một bộ sưu tập các ứng dụng sử dụng

AI và 3D như MAL Smart HRM, MAL Face Emotion

4 Quy trình làm việc của dự án

- Mỗi dự án được chia ra thành nhiều sprint, mỗi sprint kéo dài từ 1 hoặc 2 tuần tuỳ vào dự án

- Mỗi sprint mới đều bắt đầu vào đầu tuần

- Trước khi kết thúc giờ làm việc mỗi ngày, developer đều gửi một bản báo cáo cho bpm báo cáo tiến độ công việc

- Ngoài ra còn có các cuộc họp hàng tuần để thảo luận về code, sprint hoặc để ước lượng thời gian làm việc cho sprint mới

5 Các chức vụ trong dự án

- BPM: Quản lý hoạt động dự án, dịch lại yêu cầu dự án và chất lượng của sản phẩm

- Engineer: Phát triển phần mềm, đọc hiểu yêu cầu và kiểm thử

- Leader: Quản lý dự án, cài đặt chương trình, CI/CD

6 Quy trình làm việc của developer

- BPM / Leader tạo task cho Developer

- Developer đổi trạng thái ticket sang DOING

- Khi Developer hoàn thành code hoặc sửa bug, developer cần thêm các thông tin:

o Số ticket

o Lý do bug hoặc những chỗ đã fix

o Các testcase đã thực hiện

o Lời thông báo cần review ticket

- Developer chuyển ticket sang trạng thái REVIEW

- Khi ticket đã được review xong, và không còn bug thì Leader sẽ chuyển trạng thái ticket sang FEEDBACK và gửi lại cho BPM để BPM test lại và gửi cho khách hàng

- Nếu vẫn còn bug hay cần sửa đổi gì trong ticket thì Leader sẽ chuyển trạng thái ticket sang DOING và gửi lại cho developer

Trang 9

4

Chương 2: Nội dung thực tậ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 :

Được nghe người phụ trách giới thiệu về công ty, thời gian đi làm, các quy định cần tuân thủ cách chấm công, tính lương, quyền lợi và văn hoá làm việc trong công ty

Thực tập sinh được giới thiệu về quy trình của phát triển phần mềm, cách tiếp nhận và thực hiện các task và báo cáo hàng ngày

Sinh viên được phổ biến gitflow của công ty, quy trình review code,… để có thể bắt đầu tham gia dự án một cách suôn sẻ nhất

Sinh viên được giới thiệu về các lab mà công ty hiện có, cách thức làm việc của từng lab và vai trò, technical chính mà các lab đảm nhận Sinh viên được giải thích kĩ hơn về cách thức phân đội nhóm dự án, cách thức tiếp nhận dự án của đội nhóm, cách tiếp nhận và giải quyết các task nhiệm vụ và báo cáo hàng ngày

Ngoài ra thực tập sinh được cấp email, tài khoản có quyền truy cập vào một

số tài nguyên nội bộ của công ty

Kết quả : Có hiểu biết cơ cấu tổ chức của công ty, quy trình phát triển phần mềm,

cách tiếp nhận và thực hiện task và có thể báo cáo hàng ngày

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

2.1 Tìm hiểu về Bootstrap 5

Nội dung : Được giao nhiệm vụ tìm hiểu về framework cho frontend

Bootstrap5 Các nội dung chính bao gồm:

- Khái niệm cơ bản của Bootstrap 5

- Hệ thống grid trong Bootstrap 5

- Cách sử dụng css flexbox, margin, display…

Kết quả : Có được những kiến thức quan trọng và khả năng vận dụng Bootstrap 5 để

thiết kế trang web responsive nhanh chóng

2.2 Tìm hiểu về thư viện NestJS

Trang 10

5

Nội dung : Được giao nhiệm vụ tìm hiểu về frameword của NodeJS là NestJS

Giới thiệu tổng quát về NestJS

- Kiến trúc thư mục của source code

NestJS được sinh ra là để bù đắp cho việc các thư viện khác của NodeJS thiếu một kiến trúc rõ ràng, thống nhất

- Các file cần thiết để tạo một câu truy vấn graphql

- Luồng thực thi trong nestjs

o Pipe: Dùng để kiểm tra dữ liệu khi một request được gửi đến

o Middleware: Dùng để thực hiện các bước kiểm tra tính hợp lệ (VD: authorization) trước khi thực thi câu lệnh truy vấn hoặc để tạo các response mẫu trả về

o Controller (Resolver đối với graphql): Để điều hướng câu lệnh truy vấn nào sẽ được thực thi bởi hàm nào, cũng như trả về dữ liệu

o Service: Thực thi câu truy vấn cũng như trả về dữ liệu cho controller

o Repository: Nơi giao tiếp trực tiếp với database

o Module: Nơi để định nghĩa các module khác sẽ được thực thi trong controller, service, hoặc repository cũng như xuất service mà module muốn cho module khác sử dụng

- Các file migration khi có sự thay đổi trong database

Trang 11

6

Kết quả :

- Hiểu được cách thức tổ chức source code cũng như các file cần thiết cho việc tạo một câu truy vấn graphql

- Hiểu được cách xác thực người dùng bằng JWT, upload file lên s3…

- Có thể tạo ra được một câu truy vấn dữ liệu graphql với các bước kiểm tra tính hợp lệ

2.3 Tìm hiểu về cơ sở dữ liệu MySQL

Nội dung : Được giao nhiệm vụ tìm hiểu về cơ sở dữ liệu MySQL và các giao

tiếp với MySQL trong source code

Các nội dung chính bao gồm

- Kết nối MySQL

- Setup, config MySQL

- Sử dụng TypeORM để làm việc với SQL

- Giao tiếp với cơ sở dữ liệu bằng ORM

Kết quả : Hiểu và vận dụng được ORM với các dự án backend sau này

2.4 Tìm hiểu về ReactJS

Nội dung : Được giao nhiệm vụ tìm hiểu về thư viện ReactJS để bắt đầu làm

dự án Các nội dung chính bao gồm

- Giới thiệu tổng quát về ReactJS

- Vòng đời của một component trong ReactJS

- Kiến trúc thư mục của source code

- Tìm hiểu về JSX

- Cú pháp html, css và javascript trong ReactJS

- Tìm hiểu về React Hook, React Route

Trang 12

7

Kết quả :

- Hiểu được tổng quát cũng như vòng đời của một component trong ReactJS

- Hiểu được các cú pháp và các hàm trong ReactJS

- Có thể lập trình một màn hình website với ReactJS

3 Thực hiện project

Sau ba tuần tìm hiểu và được trainning, thực tập sinh đã nắm được những kiến thực cơ bản về Bootstrap 5, NestJS, ReactJS Trong tháng thứ hai, các mentor đã hướng dẫn và giúp đỡ thực tập sinh để các thực tập sinh nhanh chóng hoà vào môi trường làm việc chuyên nghiệp và bắt đầu thực hiện các task được giao

Nhận xét của người hướng dẫn

1

- Tìm hiểu về công

ty, cách tổ chức của công ty

- Làm quen quy trình làm việc của

dự án

- Học cách trao đổi, làm việc ứng dụng nhắn tin

Anh Bùi Bình Trung

2

- Tìm hiểu framework Bootstrap 5

Anh Nguyễn Quốc Tú

Trang 13

8

- Tìm hiểu về NestJS

- Tìm hiểu về MySQL và TypeORM

- Tìm hiểu về Amazon S3

Anh Nguyễn Quốc

Tú

3

- Tìm hiểu về yêu cầu và quy trình của dự án

- Tìm hiểu về quy định clean code của dự án

- Tìm hiểu cách nhận task, báo cáo

- Tìm hiểu cách push code, viết giải thích cho commit và tạo pull request

4

- Tham gia họp Daily

- Nhận task lập trình frontend

- Tham gia review code và học hỏi kiến thức mới

Anh Nguyễn Văn Thắng

5

- Nhận task lập trình backend

- Tham gia review

Trang 14

9 code và học hỏi

kiến thức mới

6

- Tìm hiểu về ReactJS

- Nhận task lập trình frontend

Anh Nguyễn Văn Thắng

7

- Nhận task lập trình

cả backend và frontend

8

- Đọc hiểu spec dự

án mới

Trang 15

10

11

12

Trang 16

11

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

1 Thiết kế trang landing page

Thiết kế trang web landing page sử dụng ReactJS và Bootstrap5

Trang 17

12

ẢNH CHỤP MÀN HÌNH

Trang 18

13

Trang 19

14

Trang 20

15

Trang 21

16

TÀI LIỆU THAM KHẢO

[1 ] Bootstrap Available: https://getbootstrap.com

[2 ] NestJS Available: https://nestjs.com

[3 ] ReactJS Available: https://reactjs.org

Trang 22

Em cũng xin cảm ơn công ty Vitalify Asia đã tạo điều kiện cho chúng em có được một môi trường thực tập tốt và cũng cảm ơn anh chị mentor đã giúp đỡ chúng em trong 3 tháng thực tập này

Em xin cảm ơn

Tiêu đề	Báo Cáo Thực Tập Lập Trình Reactjs, Nestjs
Tác giả	Trần Hoàng Gia Bảo, Nguyễn Quốc Tú
Người hướng dẫn	PT. Nguyễn Văn A
Trường học	Trường Đại Học Công Nghệ Thông Tin, Đại Học Quốc Gia TP. Hồ Chí Minh
Chuyên ngành	Khoa Công Nghệ Phần Mềm
Thể loại	Báo cáo thực tập
Năm xuất bản	2022
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	22
Dung lượng	652,79 KB