ĐẠ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[.]
ĐẠ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 Người phụ trách : Nguyễn Quốc Tú Thực tập sinh : Trần Hoàng Gia Bảo TP Hồ Chí Minh, tháng 10 năm 2022 Nguyễn Quốc Tú Trần Hoàng 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 ba năm học tập trường, em cảm thấy thân sẵn sàng để dấn thân vào môi trường chuyên nghiệp, em tin điều giúp em học hỏi, tiếp thu nhiều kiến thức ngành Do em đăng kí mơn thực tập bắt đầu tìm kiếm cơng việc Em chọn công ty để bắt đầu phát triển thân Vitalify Á Châu, môi trường out-sourcing, mơi trường có khả thúc đẩy thân em thay đổi liên tục Qua trình thực tập đây, em mong thân tích thêm nhiều kinh nghiệm, củng cố kiến thức cá nhân học hỏi thêm nhiều công nghệ Nguyễn Quốc Tú Trần Hoàng 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 hoà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 Trần Hoàng Gia Bảo TPHCM, ngày 22 tháng 12 năm 2022 Nguyễn Quốc Tú Trần Hoàng Gia Bảo NHẬN XÉT CỦA KHOA Nguyễn Quốc Tú Trần Hoàng 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 Nguyễn Quốc Tú Trần Hoàng 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 Nguyễn Quốc Tú Trần Hoàng 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 Vitalify Á Châu có mục tiêu trở thành cơng ty chuyên nghiệp đảm nhận dự án mang tầm vóc quốc tế Chính sách phát triển cơng ty là: nhân từ kỹ sư, quản lý,… có trách nhiệm mở rộng vai trị phạm vi cơng việc, tinh thần trách nhiệm 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 nhóm nhỏ ưu 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 Á Nguyễn Quốc Tú Trần Hồng 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 cịn bug hay cần sửa đổi ticket Leader chuyển trạng thái ticket sang DOING gửi lại cho developer Nguyễn Quốc Tú Trần Hoàng 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 Sinh viên phổ biến gitflow cơng ty, quy trình review code,… để bắt đầu tham gia dự án cách suôn sẻ Sinh viên giới thiệu lab mà cơng ty có, cách thức làm việc lab vai trị, technical mà lab đảm nhận Sinh viên giải thích kĩ cách thức phân đội nhóm dự án, cách thức tiếp nhận dự án đội nhóm, cách tiếp nhận giải task nhiệm vụ 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 Bootstrap Thời gian : ngày Nội dung : Được giao nhiệm vụ tìm hiểu framework cho frontend Bootstrap5 Các nội dung bao gồm: - Khái niệm Bootstrap - Hệ thống grid Bootstrap - Cách sử dụng css flexbox, margin, display… Kết : Có kiến thức quan trọng khả vận dụng Bootstrap để thiết kế trang web responsive nhanh chóng 2.2 Tìm hiểu thư viện NestJS Thời gian : ngày Nguyễn Quốc Tú Trần Hoàng Gia Bảo Nội dung : Được giao nhiệm vụ tìm hiểu frameword NodeJS NestJS 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 - 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 Nguyễn Quốc Tú Trần Hoàng 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 - Hiểu cách xác thực người dùng JWT, upload file lên s3… - 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 - Setup, config MySQL - Sử dụng TypeORM để làm việc với SQL - 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 ReactJS Thời gian : ngày Nội dung : Được giao nhiệm vụ tìm hiểu thư viện ReactJS để bắt đầu làm dự án Các nội dung bao gồm - Giới thiệu tổng quát ReactJS - Vòng đời component ReactJS - Kiến trúc thư mục source code - Tìm hiểu JSX - Cú pháp html, css javascript ReactJS - Tìm hiểu React Hook, React Route Nguyễn Quốc Tú Trần Hoàng Gia Bảo Kết : - Hiểu tổng quát vòng đời component ReactJS - Hiểu cú pháp hàm ReactJS - Có thể lập trình hình website với ReactJS Thực project Sau ba tuần tìm hiểu trainning, thực tập sinh nắm kiến thực Bootstrap 5, NestJS, ReactJS 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 chun nghiệp bắt đầu thực task giao Lịch làm việc Tuần Nguyễn Quốc Tú 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 framework Bootstrap 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 Nguyễn Quốc Tú Trần Hồng Gia Bảo - Tìm hiểu NestJS - Tìm hiểu MySQL TypeORM - Tìm hiểu Amazon S3 Nguyễn Quốc Tú - 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 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 - Tham gia review Anh Nguyễn Quốc Tú Anh Nguyễn Quốc Tú Anh Nguyễn Văn Thắng Anh Nguyễn Quốc Tú Trần Hoàng Gia Bảo - - - - Nguyễn Quốc Tú code học hỏi kiến thức Tìm hiểu ReactJS 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 Nguyễn Văn Thắng Anh Nguyễn Quốc Tú Anh Nguyễn Quốc Tú Anh Nguyễn Quốc Tú Trần Hoàng Gia Bảo 10 10 11 12 Nguyễn Quốc Tú - 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 Nguyễn Quốc Tú Anh Nguyễn Quốc Tú Anh Nguyễn Quốc Tú Trần Hoàng Gia Bảo 11 Chương 3: Chi tiết project Thiết kế trang landing page Thiết kế trang web landing page sử dụng ReactJS Bootstrap5 Mô tả ứng dụng 1.1 Trang landing page hiển thị thông tin chức ứng dụng sử dụng AI để nhận diện bóng thêm hiệu ứng đồ hoạ bắt mắt Đối tượng sử dụng 1.2 Ứng dụng thiết kế cho tất người muốn ghi lại khoảnh khắc nhảy múa với trái bóng Các chức 1.3 - Trang web hiển thị thơng tin phần mềm Sử dụng AI để nhận diện Có hỗ trợ responsive Nguyễn Quốc Tú Trần Hồng Gia Bảo 12 ẢNH CHỤP MÀN HÌNH Nguyễn Quốc Tú Trần Hoàng Gia Bảo 13 Nguyễn Quốc Tú Trần Hoàng Gia Bảo 14 Nguyễn Quốc Tú Trần Hoàng Gia Bảo 15 Nguyễn Quốc Tú Trần Hoàng Gia Bảo ... thể lập trình hình website với ReactJS Thực project Sau ba tuần tìm hiểu trainning, thực tập sinh nắm kiến thực Bootstrap 5, NestJS, ReactJS Trong tháng thứ hai, mentor hướng dẫn giúp đỡ thực tập. .. 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 Sinh viên phổ biến gitflow cơng ty, quy trình review code,… để bắt... 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