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[.]
ĐẠ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 Người phụ trách : Vũ Quốc Khánh Thực tập sinh : Phạm Gia Bảo TP Hồ Chí Minh, tháng 10 năm 2022 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 Người phụ trách : Vũ Quốc Khánh Thực tập sinh : Phạm Gia Bảo MSSV : 19521254 TP Hồ Chí Minh, tháng 10 năm 2022 Vũ Quốc Khánh Phạm Gia Bảo LỜI MỞ ĐẦU Những năm trở lại đây, với tốc độ mở rộng mạnh mẽ internet thay đổi thói quen tìm kiếm thông tin mua sắm trực tuyến Rất nhiều website xuất để đáp ứng nhu cầu tìm kiếm thơng tin, mua sắm trực tuyến, dịch vụ cho người dùng thúc đẩy ngành lập trình website “nở rộ” Ngành website sinh nhu cầu tìm kiếm thơng tin, dịch vụ người tiêu dùng internet Và giới trẻ nguồn nhân lực quan trọng cho việc phát triển ngành lập trình website sau Vì lý này, em định chọn lập trình website làm định hướng cho việc học tập Sau bốn năm học tập trường, mong muốn có thêm kinh nghiệm thực tế, muốn tham gia vào dự án viết web môi trường chuyên nghiệp nên em dự định định thực tập hè Vì vậy, em định chọn Vitalify Asia - môi trường lý tưởng, đại, chuyên nghiệp - nơi giúp em thực dự định Vũ Quốc Khánh Phạm Gia Bảo 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ó hội thực tập cơng ty góp phần vào thực dự án môi trường đại chuyên nghiệp Nhờ hướng dẫn chăm sóc nhiệt tình 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 tiếp thu kiến thức quan trọng lập trình website Chân thành cảm ơn anh chị mentor dành nhiều thời gian, cơng sức để hướng dẫn em hồn thành đợt thực tập Cũng xin cảm ơn thầy cô khoa Công nghệ phần mềm dạy cho em nhiều kiến thức nhiệt tình hỗ trợ, tạo điều kiện em làm báo cáo Phạm Gia Bảo TPHCM, ngày 28 tháng 10 năm 2022 Vũ Quốc Khánh Phạm Gia Bảo NHẬN XÉT CỦA KHOA Vũ Quốc Khánh Phạm Gia Bảo MỤC LỤC Mục lục DANH MỤC TỪ VIẾT TẮT Chương 1: Giới thiêu công ty thực tập Chương 2: Nội dung thực tập Tìm hiểu cơng ty kỹ công ty Nghiên cứu kỹ thuật Thực project Lịch làm việc TÀI LIỆU THAM KHẢO 11 TỔNG KẾT 12 Vũ Quốc Khánh Phạm Gia Bảo DANH MỤC TỪ VIẾT TẮT BPM Bridge Project Manager Dev Developer Dev Leader Developer leader PM Project Manager PR Pull Request Vũ Quốc Khánh Phạm Gia Bảo Chương 1: Giới thiêu công ty thực tập Giới thiệu công ty Vitalify Asia Vitalify Asia công ty outsource Nhật Bản hoạt động thành phố Hồ Chí Minh, Việt Nam vào năm 2008 với tầm nhìn cơng ty “Delivering Happiness Through the Internet” 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ó sách phát triển kỹ sư, quản lý dự án, mở rộng vai trị phạm vi trách nhiệm mình, đồng thời cam kết cung cấp giá trị cho người dùng với cấu trúc nhóm nhỏ ưu tú Cơng ty đặt mục tiêu trở thành cơng ty chun nghiệp đảm nhận dự án mang tầm quốc tế Và sau 10 năm thành lập, công ty chuẩn bị bước vào giai đoạn nhằm nâng cao giá trị lực kỹ thuật Việt Nam tạo nhiều sản phẩm "Made In Vietnam" bán khắp giới Môi trường làm việc công ty - Có văn phịng theo kiểu Pháp với sân vườn - Đã có 10 năm kinh nghiệm Việt Nam - Hơn 100 kỹ sư phần mềm - Có 2~4 buổi hội thảo tháng với nhiều lĩnh vực Ngôn ngữ, Framework, AWS, … - Được thưởng thêm có cấp Technical AWS, Azure cấp ngoại ngữ - Phát triển theo mơ hình Agile Scrum Sản phẩm công ty Vitalify Asia công ty outsource Nhật Bản tập trung vào lĩnh vực phát triển web di động phát triển game Unity sản phẩm liên quan đến AI Đội ngũ Vitalify Asia hoạt động từ xa,có thể giao tiếp khách hàng Nhật Bản Công ty cho mắt 200 sản phẩm Nhật Bản thị trường Đông Nam Á Vũ Quốc Khánh Phạm Gia Bảo Ngồi cơng ty sở hữu cho sưu tập ứng dụng sử dụng AI 3D MAL Smart HRM, MAL Face Emotion Quy trình làm việc dự án - Mỗi dự án chia thành nhiều sprint, sprint kéo dài từ tuần tuỳ vào dự án - Mỗi sprint bắt đầu vào đầu tuần - Trước kết thúc làm việc ngày, developer gửi báo cáo cho bpm báo cáo tiến độ công việc - Ngồi cịn có họp hàng tuần để thảo luận code, sprint để ước lượng thời gian làm việc cho sprint Các chức vụ dự án - BPM: Quản lý hoạt động dự án, dịch lại yêu cầu dự án chất lượng sản phẩm - Engineer: Phát triển phần mềm, đọc hiểu yêu cầu kiểm thử - Leader: Quản lý dự án, cài đặt chương trình, CI/CD Quy trình làm việc developer - BPM / Leader tạo task cho Developer - Developer đổi trạng thái ticket sang DOING - Khi Developer hoàn thành code sửa bug, developer cần thêm thông tin: o Số ticket o Lý bug chỗ fix o Các testcase thực o Lời thông báo cần review ticket - Developer chuyển ticket sang trạng thái REVIEW - Khi ticket review xong, khơng cịn bug Leader chuyển trạng thái ticket sang FEEDBACK gửi lại cho BPM để BPM test lại gửi cho khách hàng - Nếu bug hay cần sửa đổi ticket Leader chuyển trạng thái ticket sang DOING gửi lại cho developer Vũ Quốc Khánh Phạm Gia Bảo Chương 2: Nội dung thực tập Tìm hiểu cơng ty kỹ công ty Thời gian : ngày Nội dung : Được nghe người phụ trách giới thiệu công ty, thời gian làm, quy định cần tn thủ cách chấm cơng, tính lương, quyền lợi văn hố làm việc cơng ty Thực tập sinh giới thiệu quy trình phát triển phần mềm, cách tiếp nhận thực task báo cáo hàng ngày Ngoài thực tập sinh cấp email, tài khoản có quyền truy cập vào số tài nguyên nội công ty Kết : Có hiểu biết cấu tổ chức cơng ty, quy trình phát triển phần mềm, cách tiếp nhận thực task báo cáo hàng ngày Nghiên cứu kỹ thuật 2.1 Tìm hiểu ngơn ngữ truy vấn graphql Thời gian : ngày Nội dung : Được giao nhiệm vụ tìm hiểu ngơn ngữ truy vấn graphql Các nội dung bao gồm: - Khái niệm graphql - Các kiểu liệu graphql - Câu truy vấn graphql Câu truy vấn phần quan trọng ngôn ngữ truy vấn graphql dùng để truy vấn thay đổi liệu Câu truy vấn chia làm loại query (cho câu truy vấn truy xuất liệu) mutation (cho câu truy vấn để thay đổi liệu) - Tham số câu truy vấn Trong câu truy vấn, gán khai báo tham số giá trị tĩnh biến động - Các kiểu liệu đối tượng Trong graphql, kiểu liệu bản, ta tạo kiểu liệu phức tạp sử dụng chúng tham số chọn giá trị trả Vũ Quốc Khánh Phạm Gia Bảo Tuy nhiên, với loại truy vấn (query mutation) cú pháp khai báo khác Kết : Có kiến thức quan trọng khả vận dụng graphql để tạo gọi API 2.2 Tìm hiểu thư viện NestJS Thời gian : ngày Nội dung : Được giao nhiệm vụ tìm hiểu thư viện NestJS mentor hướng dẫn tạo câu truy vấn graphql để truy vấn liệu Các nội dung bao gồm - Giới thiệu tổng quát Nestjs - Kiến trúc thư mục source code NestJS sinh để bù đắp cho việc thư viện khác NodeJS thiếu kiến trúc rõ ràng, thống “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 câu truy vấn graphql - Luồng thực thi nestjs o Pipe: Dùng để kiểm tra liệu request gửi đến o Middleware: Dùng để thực bước kiểm tra tính hợp lệ (VD: authorization) trước thực thi câu lệnh truy vấn để tạo response mẫu trả o Controller (Resolver graphql): Để điều hướng câu lệnh truy vấn thực thi hàm nào, trả liệu o Service: Thực thi câu truy vấn trả 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 module khác thực thi controller, service, repository xuất service mà module muốn cho module khác sử dụng - Các file migration có thay đổi database Vũ Quốc Khánh Phạm Gia Bảo Kết : - Hiểu cách thức tổ chức source code file cần thiết cho việc tạo câu truy vấn graphql - Có thể tạo câu truy vấn liệu graphql với bước kiểm tra tính hợp lệ 2.3 Tìm hiểu sở liệu MySQL Thời gian : ngày Nội dung : Được giao nhiệm vụ tìm hiểu sở liệu MySQL giao tiếp với MySQL source code Các nội dung bao gồm - Kết nối MySQL - ORM (Object relational) mapping - Giao tiếp với sở liệu ORM Kết : Hiểu vận dụng ORM với dự án backend sau 2.4 Tìm hiểu VueJS Thời gian : ngày Nội dung : Được giao nhiệm vụ tìm hiểu thư viện NestJS mentor hướng dẫn tạo câu truy vấn graphql để truy vấn liệu Các nội dung bao gồm - Giới thiệu tổng quát VueJS - Vòng đời component VueJS - Kiến trúc thư mục source code - Cú pháp html, css javascript VueJS - Reactive Để theo dõi thay đổi biến render lại hình có thay đổi reactive phần thiếu VueJS - Method Các hàm dùng phạm vi component Nếu đặt html gọi lại render lại hình - Computed Giống method gọi lại hàm có thay đổi biến reactive bên Vũ Quốc Khánh Phạm Gia Bảo - Các cú pháp đặc biệt html VueJS Các cú pháp VueJS giúp lập trình viên dễ code dễ maintain VueJS hỗ trợ cú pháp đặc biệt render list, render với điều kiện Kết : - Hiểu tổng quát vòng đời component VueJS - Hiểu cú pháp hàm VueJS - Có thể lập trình hình website với VueJS Thực project Sau ba tuần tìm hiểu trainning, thực tập sinh nắm kiến thực Graphql, NestJS, VueJS Trong tháng thứ hai, mentor hướng dẫn giúp đỡ thực tập sinh để thực tập sinh nhanh chóng hồ vào mơi trường làm việc chuyên nghiệp bắt đầu thực task giao Lịch làm việc Tuần Vũ Quốc Khánh Cơng việc - Tìm hiểu cơng ty, cách tổ chức công ty - Làm quen quy trình làm việc dự án - Học cách trao đổi, làm việc ứng dụng nhắn tin - Tìm hiểu ngôn ngữ truy vấn graphql Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Anh Bùi Bình Trung Anh Vũ Quốc Khánh Phạm Gia Bảo - Tìm hiểu NestJS - Tìm hiểu MySQL ORM - Thực hành tạo câu truy vấn graphql NestJS Vũ Quốc Khánh - Tìm hiểu yêu cầu quy trình dự án - Tìm hiểu quy định clean code 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 tạo pull request - Tham gia họp Daily - Nhận task lập trình backend - Tham gia review code học hỏi kiến thức - Tham gia họp Daily - Nhận task lập trình backend - Tham gia review Anh Vũ Quốc Khánh Chị Lâm Diệp Thiên Trúc Anh Vũ Quốc Khánh Anh Vũ Quốc Khánh Phạm Gia Bảo - - - - Vũ Quốc Khánh code học hỏi kiến thức Tìm hiểu VueJS Tham gia họp Daily Nhận task lập trình frontend Tham gia review code học hỏi kiến thức Tham gia họp Daily Nhận task lập trình backend frontend Tham gia review code học hỏi kiến thức Tham gia họp Daily Nhận task lập trình backend frontend Tham gia review code học hỏi kiến thức Đọc hiểu spec dự án Tham gia họp Daily Nhận task lập trình backend frontend Anh Vũ Quốc Khánh Anh Vũ Quốc Khánh Anh Vũ Quốc Khánh Anh Vũ Quốc Khánh Phạm Gia Bảo 10 10 11 12 Vũ Quốc Khánh - Tham gia review code học hỏi kiến thức - Tham gia họp Daily - Nhận task lập trình backend frontend - Tham gia review code học hỏi kiến thức - Tham gia họp Daily - Nhận task lập trình backend frontend - Tham gia review code học hỏi kiến thức - Tham gia họp Daily - Nhận task lập trình backend frontend - Tham gia review code học hỏi kiến thức Anh Vũ Quốc Khánh Anh Vũ Quốc Khánh Anh Vũ Quốc Khánh Phạm Gia Bảo 11 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 Vũ Quốc Khánh Phạm Gia Bảo 12 TỔNG KẾT Như vậy, qua tháng thực tập công ty Vitalify Asia Em trải nghiệm môi trường làm việc chuyên nghiệp tham gia vào dự án thực tế Đồng thời em học kiến thức kiến thức quan thực dự án thực tế Em xin cảm ơn trường trao cho chúng em hội để trải nghiệm điều mẻ tiếp thu thêm nhiều kiến thức có nhiều kinh nghiệm làm việc đầu đời cho chúng em sau Em xin cảm ơn công ty Vitalify Asia tạo điều kiện cho chúng em có môi trường thực tập tốt cảm ơn anh chị mentor giúp đỡ chúng em tháng thực tập Em xin cảm ơn Vũ Quốc Khánh Phạm Gia Bảo ... 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 Người phụ trách : Vũ Quốc Khánh Thực tập sinh : Phạm Gia Bảo MSSV : 19521254... VueJS - Có thể lập trình hình website với VueJS Thực project Sau ba tuần tìm hiểu trainning, thực tập sinh nắm kiến thực Graphql, NestJS, VueJS Trong tháng thứ hai, mentor hướng dẫn giúp đỡ thực. .. làm việc công ty Thực tập sinh giới thiệu quy trình phát triển phần mềm, cách tiếp nhận thực task báo cáo hàng ngày Ngoài thực tập sinh cấp email, tài khoản có quyền truy cập vào số tài nguyên