Báo Cáo Thực Tập Lập Trình Web Bằng Vuejs Và Nestjs.pdf

Vũ Quốc Khánh Phạm Gia Bảo ĐẠ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 WEB BẰNG VUEJS VÀ NESTJS Công ty thực tập Vitalify Asia[.]

Trang 1

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 WEB BẰNG VUEJS VÀ NESTJS

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

Trang 2

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 WEB BẰNG VUEJS VÀ NESTJS

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

Trang 3

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 bốn 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 vào các dự án viết web trong một môi trường chuyên nghiệp nên em dự định quyết định thực tập trong hè Vì vậy, em quyết định chọn Vitalify Asia - 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 được dự định này

Trang 4

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

Phạm Gia Bảo TPHCM, ngày 28 tháng 10 năm 2022

Trang 5

NHẬN XÉT CỦA KHOA

Trang 6

MỤC LỤC

Mục lục

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

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

DANH MỤC TỪ VIẾT TẮT

Dev Leader Developer leader

Trang 8

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

Công ty Vitalify Asia có chính sách phát triển là mỗi kỹ sư, quản lý dự án, đều

mở rộng vai trò và phạm vi trách nhiệm của mình, đồng thời cam kết cung cấp giá trị cho người dùng với cấu trúc là một nhóm nhỏ ưu tú Công ty đã đặt ra mục tiêu là trở thành một công ty chuyên nghiệp có thể đảm nhận được các dự

án mang tầm quốc 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

- Hơn 100 kỹ sư phần mềm

- Có 2~4 buổi hội thảo mỗi tháng với nhiều lĩnh vực như Ngôn ngữ, Framework, AWS, …

- Được thưởng thêm khi có các bằng cấp Technical như AWS, Azure hoặc bằng cấp ngoại ngữ

- Phát triển theo mô hình Agile Scrum

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

Vitalify Asia là một công ty outsource Nhật Bản tập trung vào lĩnh vực phát triển web và di động cũng như phát triển các game bằng Unity và các sản phẩm liên quan đến AI Đội ngũ của Vitalify Asia có thể hoạt động từ xa,có thể giao tiếp khách hàng Nhật Bản Công ty đã cho ra mắt hơn 200 sản phẩm Nhật Bản

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

Trang 9

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 10

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 : 2 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

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ề ngôn ngữ truy vấn graphql

Nội dung : Được giao nhiệm vụ tìm hiểu về ngôn ngữ truy vấn graphql Các

nội dung chính bao gồm:

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

- Các kiểu dữ liệu cơ bản trong graphql

- Câu truy vấn graphql

Câu truy vấn là một phần quan trọng trong ngôn ngữ truy vấn graphql dùng

để truy vấn hoặc thay đổi dữ liệu Câu truy vấn được chia ra làm 2 loại là query (cho các câu truy vấn truy xuất dữ liệu) và mutation (cho các câu truy vấn để thay đổi dữ liệu)

- Tham số trong câu truy vấn

Trong câu truy vấn, có thể gán khai báo tham số bằng giá trị tĩnh hoặc bằng một biến động

- Các kiểu dữ liệu đối tượng

Trong graphql, ngoài các kiểu dữ liệu cơ bản, ta có thể tạo ra các kiểu dữ liệu phức tạp và sử dụng chúng như tham số hoặc chọn ra các giá trị trả về

Trang 11

Tuy nhiên, với mỗi loại truy vấn (query hoặc mutation) thì cú pháp khai báo

sẽ khác nhau

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

và gọi API

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

Nội dung : Được giao nhiệm vụ tìm hiểu về thư viện NestJS cũng như được

các mentor hướng dẫn tạo một câu truy vấn graphql để truy vấn dữ liệu Các nội dung chính bao gồm

- 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

“Nest provides an out-of-the-box application architecture which allows developers and teams to create highly testable, scalable, loosely coupled, and easily maintainable applications The architecture is heavily inspired by Angular.” – trích từ tài liệu NestJS

- 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 12

- 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

- 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

- ORM (Object relational) mapping

- 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ề VueJS

Nội dung : Được giao nhiệm vụ tìm hiểu về thư viện NestJS cũng như được

các mentor hướng dẫn tạo một câu truy vấn graphql để truy vấn dữ liệu Các nội dung chính bao gồm

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

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

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

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

- Reactive

Để theo dõi được sự thay đổi của biến và render lại màn hình khi có sự thay đổi đó thì reactive là một phần không thể thiếu trong VueJS

- Method

Các hàm được dùng trong phạm vi của một component Nếu nó được đặt trên html thì nó sẽ gọi lại mỗi khi render lại màn hình

- Computed

Giống như method nhưng chỉ gọi lại hàm khi có sự thay đổi của biến reactive bên trong nó

Trang 13

- Các cú pháp đặc biệt của html trong VueJS

Các cú pháp trong VueJS giúp lập trình viên dễ code hơn và cũng dễ maintain hơn do VueJS hỗ trợ các cú pháp đặc biệt như render một list, render với điều kiện

Kết quả :

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

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

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

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ề Graphql, NestJS, VueJS 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

4 Lịch làm việc

dẫn

Mức

độ hoàn thành

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 ngôn ngữ truy vấn

Anh Vũ Quốc Khánh

Trang 14

NestJS

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

- Thực hành tạo một câu truy vấn

graphql trên NestJS

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

Chị Lâm Diệp Thiên Trúc

4

- Tham gia họp Daily

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

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

5

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

- Tham gia review

Trang 15

code và học hỏi kiến thức mới

6

- Tìm hiểu về VueJS

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

7

- Nhận task lập trình

cả backend và frontend

8

9

- Đọc hiểu spec dự

án mới

cả backend và

Trang 16

code và học hỏi kiến thức mới

10

11

12

Trang 17

TÀI LIỆU THAM KHẢO

[1 ] GraphQL Available: https://graphql.org

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

[3 ] VueJS Available: https://vuejs.org

Trang 18

TỔNG KẾT

Như vậy, đã qua 3 tháng thực tập trong công ty Vitalify Asia Em đã trải nghiệm được môi trường làm việc chuyên nghiệp và đã tham gia được vào các dự án thực tế Đồng thời em cũng học được các kiến thức mới cũng như các kiến thức quan trong khi thực hiện một dự án thực tế

Em xin cảm ơn trường đã trao cho chúng em cơ hội để có thể được trải nghiệm những điều mới mẻ này cũng như tiếp thu thêm được nhiều kiến thức mới và có được nhiều kinh nghiệm làm việc đầu đời cho chúng em sau này

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 Web Bằng Vuejs Và Nestjs
Tác giả	Phạm Gia Bảo
Người hướng dẫn	Vũ Quốc Khánh
Trường học	Đạ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	18
Dung lượng	344,69 KB