Báo cáo thực tập lập trình ứng dụng web với nextjs và nestjs

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 ỨNG DỤNG WEB VỚI NEXTJS VÀ NESTJS Công ty thực tập Technology Người phụ trách Thực tập sinh : Zodinet : Phạm Minh Tiến : Võ Xuân Tú TP.Hồ Chí Minh, tháng … năm 2022 LỜI MỞ ĐẦU Trong bối cảnh ngành công nghệ thông tin phát triển mạnh mẽ nay, việc ứng dụng công nghệ vào kinh doanh, hỗ trợ doanh nghiệp, hay đơn giản học tập thao tác số công việc cá nhân gần trở thành thói quen, chí cơng cụ tương tác ngày Hầu hết nhu cầu người dùng trở nên đơn giản hoá, nhanh hơn, tiện lợi nhờ tảng cơng nghệ, điển hình ứng dụng web Việc phát triển ứng dụng web sử dụng cơng cụ framework khác Ở front-end kể tên đến ReactJS, VueJS, NextJS, Cịn back-end có ExpressJS, Django, NestJS, Spring,… NextJS framework nhỏ gọn xây dựng dựa ReactJS, Webpack Babel giúp xây dựng ứng dụng Server Side Rendering kết hợp với ReactJS cách dễ dàng nhanh chóng NestJS framework Node.JS cho phép xây dựng ứng dụng phía server Nest mở rộng framework Node.js Express hay Fastify để bổ sung thêm nhiều module hay thư viện hỗ trợ việc xử lý tác vụ Đây framework mã nguồn mở, sử dụng TypeScript linh hoạt để xây dựng hệ thống backend Bên cạnh thời gian học tập trường, em muốn tích lũy thêm kinh nghiệm thực tế, mong muốn tham gia làm việc mơi trường chun nghiệp Vì vậy, em đăng ký môn thực tập bắt đầu tìm kiếm cơng việc May mắn thay, em vượt qua kì tuyển thực tập sinh cơng ty Zodinet thực tập công ty Võ Xuân Tú LỜI CẢM ƠN Trân trọng gửi lời cảm ơn Công ty Zodinet tạo điều kiện cho em thực tập công ty Chỉ thời gian ngắn nhờ dẫn nhiệt tình mentors, em tiếp thu kiến thức quan trọng để xây dựng ứng dụng web hoàn thiện Chân cảm ơn anh chị team bỏ nhiều thời gian, công sức để hướng dẫn em hoàn thành đợt thực tập Những kiến thức kinh nghiệm giúp em hồn thiện thân có thêm kinh nghiệm trình phát triển phần mềm Cũng xin cảm ơn thầy cô khoa Công nghệ phần mềm nhiệt tình hỗ trợ, tạo điều kiện cho em làm báo cáo Võ Xuân Tú Tp Hồ Chí Minh, …/…/2022 Võ Xuân Tú NHẬN XÉT CỦA KHOA ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… ………………………………………………………………………………… Võ Xuân Tú MỤC LỤC Chương 1: Giới thiệu công ty thực tập .6 Giới thiệu công ty Zodinet: Sản phẩm công ty: Chương 2: Nội dung thực tập .8 Tìm hiểu cơng ty kỹ công ty Nghiên cứu kĩ thuật: Thực Project: 12 Lịch làm việc: 13 Chương 3: Chi tiết project 14 Giới thiệu ứng dụng 14 Thực hiện: 18 Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình DANH MỤC HÌNH ẢNH Logo cơng ty Zodinet Website công ty Zodinet .6 Sản phẩm Vietnam Healthy Application Sản phẩm Skin365 Sản phẩm Camly Academy Thiết bị không hỗ trợ 14 Màn hình lướt tìm bạn .15 8.Xem chi tiết thông tin người dùng khác .16 Màn hình tìm bạn map .16 10 Màn hình trang cá nhân 17 11 Màn hình chat 18 DANH MỤC BẢNG Bảng Lịch làm việc 13 Võ Xuân Tú Chương 1: Giới thiệu công ty thực tập Hình Logo công ty Zodinet Giới thiệu công ty Zodinet:  Tên công ty: Công ty TNHH Công Nghệ Zodinet  Website công ty: Zodinet.com Hình Website công ty Zodinet  Địa chỉ: 43 Đường số 3, Phường Hiệp Bình Chánh, Quận Thủ Đức, Thành phố Hồ Chí Minh, Việt Nam  Điện thoại: 0866090209  Email: info@zodinet.com  Năm thành lập: 2016 Zodinet thành lập vào năm 2016 có trụ sở thành phố Hồ Chí Minh Lĩnh vực công ty phát triển phần mềm, trang web cho dự án thương mại điện tử, chuyển đổi kỹ thuật số, ngân Võ Xuân Tú hàng, blockchain, giáo dục, y tế dự án nước ngồi khác Sản phẩm cơng ty: - Vietnam Healthy Application Hình Sản phẩm Vietnam Healthy Application - Skin365 Hình Sản phẩm Skin365 - Camly Academy Võ Xuân Tú Hình Sản phẩm Camly Academy 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 : Giới thiệu công ty, cách tổ chức công ty Được nghe người phụ trách giới thiệu công ty, trình thành lập 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ơng ty Ngồi ra, thực tập sinh giới thiệu cách thức làm việc công ty thời gian làm, quy định cần phải tuân thủ, cách sử dụng email công việc, giới thiệu thành viên nhóm thực tập, chương trình thực tập,… Kết : Hiểu thêm cơng ty Zodinet, q trình thành lập phát triển Có thêm kỹ việc sử dụng email cơng việc, làm việc có kế hoạch, có kỷ luật, có trách nhiệm Nghiên cứu kĩ thuật: 2.1 Các công cụ làm việc: Võ Xuân Tú Thời gian: ngày Nội dung: Tìm hiểu công cụ sử dụng trình làm việc Trong thời gian này, cài đặt công cụ phục vụ công việc như: Visual studio code, Git, Clickup – phân công công việc, PostgreSQL – sở liệu, Clockify – công cụ ghi thời gian làm công việc, Figma,… Thực hiện: thực hành sử dụng công cụ nêu Kết quả: làm quen với cơng cụ 2.2 Tìm hiểu HTML CSS: Thời gian: ngày Nội dung: training kỹ thuật html, css, scss - html: cấu trúc thành phần trang web, phân chia đoạn văn bảng, header, footer, … - css: tạo style cho trang web màu sắc, khoảng cách, phông chữ,… - scss: tiền sử lý css, giúp việc code css giống ngơn ngữ lập trình, có cấu trúc rõ ràng, rành mạch, dễ phát triển bảo trì code Thực hiện: - Tham gia đầy đủ buổi training công ty - Làm thực hành Kết quả: - Nắm kiến thức html-css-scss - Nắm kĩ thuật đặt tên BEM - Có thể tạo layout cho trang web, style theo design responsive 2.3 Tìm hiểu Javascript, ES6 RESTful API Thời gian: ngày Nội dung : tìm hiểu kiến thức Javascript, ES6 RESTful API - Tìm hiểu JS DOM - Tìm hiểu JQuery - Tìm hiểu object, function, class, async Võ Xuân Tú 10 - Tìm hiểu HTTP method endpoint - Các quy ước resource endpoint Thực hiện: - Tham gia đầu đủ buổi training công ty - Làm thực hành Kết quả: - Nắm kiến thức liên quan tới Javascript, ES6 - Biết cách viết url theo RESTful API 2.4 Tìm hiểu HTTP request/Session-CookieStorage/Source control Thời gian: ngày Nội dung: tìm hiểu HTTP request, Session-CookieStorage Source control - HTTP request: thông tin gửi tử Client lên Server, để yêu cầu Server tìm sử lý số thơng tin, liệu mà Client muốn Tìm hiểu phương thức HTTP request GET, POST, PUT, DELETE, - Session: phiên làm việc dùng lập trình web kết nối tới database - Cookie: file tạm tự động tạo máy tính người dùng truy cập vào trang web đó, lưu thơng tin liên quan đến cá nhân tài khoản để sử dụng cho lần đăng nhập sau - Local storage: loại lưu trữ web cho phép trang web ứng dụng javascript lưu trữ truy cập liệu trình duyệt mà khơng có ngày hết hạn - Session storage: giống local storage session storage dùng để lưu trữ liệu trình duyệt khách truy cập, liệu Võ Xuân Tú 11 biến người dùng đóng tab trình duyệt - Source control: tìm hiểu git cách sử dụng git với câu lệnh Thực hiện: - Tham gia đầu đủ buổi training công ty - Tìm hiểu HTTP request, Session, Cookie, Storage cách sử dụng chúng - Tìm hiểu git câu lệnh thao tác với repository - Làm thực hành Kết quả: - Nắm kiến thức HTTP request - Biết cách sử dụng Session, Cookie, Storage - Biết cách tạo git repository thao tác với repository thông qua câu lệnh 2.5 Tìm hiểu ReactJS NextJS Thời gian: ngày Nội dung: tìm hiểu ReactJS kết hợp với Typescript NextJS - ReactJS:  ReactJS thư viện Javascript dùng để xây dựng giao diện người dùng, khơng phải framework js hết  React hỗ trợ việc xây dựng thành phần (components) UI có tính tương tác cao, có trạng thái sử dụng lại - Typescript: dự án mã nguồn mở phát triển Microsoft, coi phiên nâng cấp Javascript việc bổ xung tùy chọn kiểu tĩnh lớp hướng đối tượng mà Javascript khơng có - NextJS: open-source React front-end framework xây dựng tính Võ Xuân Tú 12 Server Side Rendering (SSR) NextJS xây dựng dựa React có nghĩa NextJS lấy lợi React bổ xung thêm tính Thực hiện: - Tìm hiểu ReactJS cách sử dụng ReactJS - Tìm hiểu Typescript kết hợp với ReactJS - Tìm hiểu NextJS cách sử dụng NextJS với Typescript Kết quả: - Biết cách tạo component để tái sử dụng chúng - Biết cách sử dụng ReactJS NextJS kết hợp với Typescript để tạo trang web đơn giản 2.6 Tìm hiểu NodeJS NestJS Thời gian: ngày Nội dung: tìm hiểu NodeJS NestJS cách tạo Project với NodeJS NestJS - NodeJS: môi trường runtime chạy Javascript đa tảng có mã nguồn mở, sử dụng chạy ứng dụng web bên ngồi trình duyệt client - NestJS: NodeJS framework dùng để phát triển server-side applications hiệu mở rộng NestJS kết hợp OOP (Object Oriented Programming), FP (Functional Programming), FRP (Functional Reactive Programming) Thực hiện: - Tìm hiểu NodeJS, cách cài đặt sử dụng - Tìm hiều NestJS, cách cài đặt sử dụng Kết quả: - Nắm kiến thức NodeJS tạo project đơn giản sử dụng NodeJS Võ Xuân Tú 13 - Nắm kiến thức NestJS tạo project đơn giản sử dụng NestJS 2.7 Tìm hiểu SQL NoSQL Database Thời gian: ngày Nội dung: tìm hiểu SQL NoSQL Database - SQL: ngôn ngữ truy vấn có cấu trúc Nó ngơn ngữ, tập hợp lệnh để tương tác với sở liệu Dùng để lưu trữ, thao tác truy xuất liệu lưu trữ sở liệu quan hệ Trong thực tế, SQL ngôn ngữ chuẩn sử dụng hầu hết cho hệ sở liệu quan hệ Tất hệ thống quản lý sở liệu quan hệ (RDMS) MySQL, MS Access, Oracle, Postgres SQL Server… sử dụng SQL làm ngôn ngữ sở liệu chuẩn - NoSQL: tên gốc Non SQL cung cấp chế lưu trữ truy xuất liệu mơ hình hóa khác với quan hệ bảng sử dụng sở liệu quan hệ Thực hiện: - Tìm hiểu SQL NoSQL Database, cách cài đặt phần mềm để tương tác với sở liệu Kết quả: - Nắm cách sử dụng sở liệu SQL NoSQL Thực Project: Sau tháng training thực hành, thực tập sinh nắm kiến thức lập trình ứng dụng web Sau sinh viên bắt đầu kết hợp kiến thức học vào việc lập trình ứng dụng web hoàn chỉnh Lịch làm việc: Bảng Lịch làm việc Tuầ n Công việc Người hướng dẫn Mức độ Nhận xét Võ Xuân Tú 14 hoà n người thàn hướn h g dẫn HTTP Request/SessionCookie-Storage/Sourc e Control HTML-Fundamental / CSS Coding Standards and Convention & Developer tool Javascript & ES6 & RESTful API ReactJS Fundamental Anh Đạt Đới/Anh Tuấn Lê/Chị Ngân Anh Long Anh Đạt Vũ Anh Tâm Nguyễn Anh Tuấn Lê NodeJS Fundamental Anh Đạt Đới NodeJS Fundamental Anh Đạt Đới SQL Database & Anh Tuấn NoSQL Diệp Kickoff final Project Tất anh chị mentors Web Security & Anh Cường Hacking Quách Mobile development Anh Tuấn Lê Performance Anh Tiến Optimize – Client side Phạm – FESTACKs System Architecture Anh Long & Design Đào/ Anh Đạt Đới/ Anh Đạt Vũ Design Database Anh Long Đào Võ Xuân Tú 15 Design Database Final Project 6-78 Final Project Final Project Demo Final Project Anh Đạt Đới/ Anh Đạt Vũ Tất anh chị mentors Tất anh chị mentors Tất anh chị mentors Chương 3: Chi tiết project Giới thiệu ứng dụng Ứng dụng Foxy ứng dụng web hỗ trợ cho xem thiết bị di động bao gồm tính chính: Chỉ hỗ trợ cho thiết bị di động, lướt tìm bạn, tìm bạn xung quanh map, chat với bạn, xem thông tin bạn bè, trang thông tin cá nhân Framework sử dung: - Front-end: NextJS - Back-end: NestJS 1.1 Tính hỗ trợ cho thiết bị di động Mơ tả: tính cho phép người dùng sử dụng trang web truy cập thiết bị di động Hình Thiết bị không hỗ trợ 1.2 Tính lướt tìm bạn: Võ Xn Tú 16 Mơ tả: tính cho phép người dùng lướt (trái phải) để xem số thơng tin hình ảnh mặc định, tên, tuổi khoảng cách so với thân người chưa kết bạn với minh mà gần với (khoảng 200 m) Khi người dùng muốn xem thông tin người hình nhấn vào nút có hình chữ i hình xem thơng tin chi tiết người Và người dùng nhấn nút hình trái tim để gửi u cầu kết bạn nhấn nút có hình chữ X để block người ln Hình Màn hình lướt tìm bạn 1.3 Tính xem thơng tin chi tiết người dùng Mơ tả: Tính cho phép người dùng xem thêm thơng tin chi tiết người dùng gần mình, mà người dùng Võ Xn Tú 17 khơng phải bạn bè không bị block Ở trang hiển thị thơng tin số hình ảnh, tên , tuổi, sở thích,… Hình 8.Xem chi tiết thơng tin người dùng khác 1.4 Tính tìm bạn xung quanh map Mơ tả: tính cho phép người dùng thấy trực quan người dùng mà chưa kết bạn hay block gần thơng qua map Và xem thơng tin người dùng khác cách nhấn nút i hình Võ Xuân Tú 18 Hình Màn hình tìm bạn map 1.5 Tính trang cá nhân Mơ tả: trang cá nhân người dùng thay đổi số thông tin avatar, ảnh mặc định, ảnh yêu thích để hiển thị cho người khác xem họ lướt, thơng tin cá nhân sở thích, chiều cao, … Võ Xuân Tú 19 Hình 10 Màn hình trang cá nhân 1.6 Tính chat với bạn Mơ tả: tính cho phép người dùng nhắn tin với người họ kết bạn Hình 11 Màn hình chat Võ Xuân Tú 20 Thực hiện: Sau thời gian trau dồi kiến thức từ buổi training tự nghiên cứu tài liệu Cùng với giúp đỡ anh chị mentor thành viên nhóm thực tập hồn thành xong dự án Võ Xuân Tú ... phần mềm để tương tác với sở liệu Kết quả: - Nắm cách sử dụng sở liệu SQL NoSQL Thực Project: Sau tháng training thực hành, thực tập sinh nắm kiến thức lập trình ứng dụng web Sau sinh viên bắt... điển hình ứng dụng web Việc phát triển ứng dụng web sử dụng cơng cụ framework khác Ở front-end kể tên đến ReactJS, VueJS, NextJS, Cịn back-end có ExpressJS, Django, NestJS, Spring,… NextJS framework... hiểu NodeJS NestJS cách tạo Project với NodeJS NestJS - NodeJS: môi trường runtime chạy Javascript đa tảng có mã nguồn mở, sử dụng chạy ứng dụng web bên ngồi trình duyệt client - NestJS: NodeJS