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 Zodinet Technology Người phụ trách Phạm Minh Tiến Thực tập sinh[.]

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 : Zodinet Technology Người phụ trách : Phạm Minh Tiến Thực tập sinh : 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 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 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 DANH MỤC HÌNH ẢNH Hình Logo cơng ty Zodinet Hình Website cơng ty Zodinet Hình Sản phẩm Vietnam Healthy Application Hình Sản phẩm Skin365 Hình Sản phẩm Camly Academy Hình Thiết bị khơng hỗ trợ 14 Hình Màn hình lướt tìm bạn 15 Hình 8.Xem chi tiết thông tin người dùng khác 16 Hình Màn hình tìm bạn map 16 Hình 10 Màn hình trang cá nhân 17 Hình 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 hàng, blockchain, giáo dục, y tế dự án nước khác Võ Xuân Tú 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, q 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 cịn 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, 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: Thời gian: ngày Nội dung: Tìm hiểu cơng cụ sử dụng q 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, Võ Xuân Tú 2.2 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ụ 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ả: 2.3 - 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 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 - 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ả: Võ Xuân Tú 10 2.4 - Nắm kiến thức liên quan tới Javascript, ES6 - Biết cách viết url theo RESTful API Tìm hiểu HTTP request/Session-Cookie-Storage/Source control Thời gian: ngày Nội dung: tìm hiểu HTTP request, Session-Cookie-Storage Source control - HTTP request: thông tin gửi tử Client lên Server, để 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 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 Võ Xuân Tú 11 2.5 - Biết cách tạo git repository thao tác với repository thơng qua câu lệnh 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 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ả: 2.6 - 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 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 trình duyệt client Võ Xuân Tú 12 - NestJS: NodeJS framework dùng để phát triển serverside 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ả: 2.7 - Nắm kiến thức NodeJS tạo project đơn giản sử dụng NodeJS - Nắm kiến thức NestJS tạo project đơn giản sử dụng NestJS 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: Võ Xuân Tú 13 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 hồn chỉnh Lịch làm việc: Bảng Lịch làm việc Tuần Công việc HTTP Request/SessionCookie-Storage/Source Control HTML-Fundamental / CSS Coding Standards and Convention & Developer tool Javascript & ES6 & RESTful API ReactJS Fundamental NodeJS Fundamental NodeJS Fundamental SQL Database & NoSQL Kickoff final Project Web Security & Hacking Mobile development Performance Optimize – Client side – FESTACKs System Architecture & Design Người hướng dẫn Mức độ hoàn thành Nhận xét người hướng dẫn Anh Đạt Đới/Anh Tuấn Lê/Chị Ngân Anh Long Anh Đạt Vũ Anh Tâm Nguyễn Anh Tuấn Lê Anh Đạt Đới Anh Đạt Đới Anh Tuấn Diệp Tất anh chị mentors Anh Cường Quách Anh Tuấn Lê Anh Tiến Phạm Anh Long Đào/ Anh Đạt Võ Xuân Tú 14 Design Database Design Database Final Project 6-7-8 Final Project Final Project Demo Final Project Đới/ Anh Đạt Vũ Anh Long Đào 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ú 15 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 yê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 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,… Võ Xuân Tú 16 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 Hình Màn hình tìm bạn map Võ Xuân Tú 17 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, … 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 Võ Xuân Tú 18 Hình 11 Màn hình chat 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ú 19 TỔNG KẾT Như vậy, hai tháng ngắn ngủi, em tiếp thu nhiều kiến thức trải nghiệm thực tế lập trình ứng dụng web Ứng dụng demo đạt tính dự tính ban đầu Nhưng thời gian có hạn nên số tính chưa hồn thiện mong đợi Chân thành cảm ơn anh chị mentor cơng ty Zodinet giúp em hồn thành tập Zodinet Võ Xuân Tú ... 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: Võ Xuân Tú 13 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... đ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... 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 Võ Xuân Tú 12 - NestJS: