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, 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[.]
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, 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õ Minh Tuấn TP Hồ Chí Minh, … tháng … năm … 2 LỜI MỞ ĐẦU Ứng dụng web ngày có sức lan tỏa mạnh mẽ sống người Nó trở thành phần tất yếu họ Mọi người sử dụng để giải trí, mua sắm, chia sẻ ảnh, v.v Ngồi ra, cơng ty, doanh nghiệp sử dụng để quảng cáo thương hiệu, sản phẩm, dịch vụ, hỗ trợ hoạt động kinh doanh thúc đẩy bán hàng Do nhu cầu tương đối cao ứng dụng web, nhiều framework phát triển để hỗ trợ phát triển web nhanh dễ dàng hơn, chẳng hạn Nextjs Nestjs Nextjs framework front-end React phát triển dạng opensource bổ sung khả tối ưu hóa render phía máy chủ (SSR) tạo trang web static NestJS NodeJS framework dùng để phát triển server-side applications hiệu mở rộng NestJS sử dụng TypeScript để phát triển, hỗ trợ Javascript Nest lấy cảm hứng từ kiến trúc Agular nên với bạn làm việc với Agular, khơng cịn xa lạ dễ dàng tiếp cận sử dụng Agular Với niềm đam mê lập trình web muốn có thêm kinh nghiệm thực tế, em định nộp đơn xin thực tập công ty khác May mắn, em chọn làm thực tập sinh công ty Zodinet Võ Minh Tuấn 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 có hội thực tập công ty Chỉ thời gian ngắn, nhờ dẫn nhiệt tinh nhóm trainer, nhóm thực tập chúng em tiếp thu kiến thức quan trọng để làm ứng dụng web Chân thành cảm ơn anh chị nhóm trainer bỏ nhiều thời gian, cơng sức để hướng dẫn em hoàn đợt thực tập Đặc biệt cảm ơn anh Phạm Minh Tiến tất người team hướng dẫn, giúp đỡ tận tình khó khăn cơng việc, dẫn cho em cách lên kế hoạch kỹ cần có đới với web developer 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õ Minh Tuấn Tp, Hồ Chí Minh, ngày … tháng … năm 2022 Võ Minh Tuấn NHẬN XÉT CỦA KHOA …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Võ Minh Tuấn 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 11 Lịch làm việc 11 Chương 3: Chi tiết Project 13 Giới thiệu ứng dụng 13 Thực 18 TỔNG KẾT 19 DANH MỤC HÌNH ẢNH Hình Logo Zodinet Hình Sản phẩm Skin365 Hình Sản phẩm Vietnam Healthy Application Hình Sản phẩm Goohyeah Hình Lướt tìm bạn bè 14 Hình Xem thơng tin bạn bè 15 Hình Tìm bạn đồ 16 Hình Trị chuyện với bạn bè 17 Hình Trang cá nhân 18 Võ Minh Tuấn Chương 1: Giới thiệu công ty thực tập Hình Logo Zodinet Giới thiệu công ty Zodinet - Tên công ty: Công ty TNHH Công nghệ Zodinet - Địa chỉ: 43 Số 3, P Hiệp Bình Chánh, Q Thủ Đức, TP Hồ Chí Minh - Website: https://zodinet.com/ - Email: info@zodinet.com - Số điện thoại: 0866090209 Sản phẩm công ty Lĩnh vực Zodinet phát triển phần mềm, website cho dự án thương mại điện tử, chuyển đổi kỹ thuật số, ngân hàng, blockchain, giao dục, y tế dự án nước khác Một số sản phẩm công ty: - Skin365: ứng dụng mua sắm mỹ phẩm trực tuyến cho chuỗi mỹ phẩm Shin365 Hình Sản phẩm Skin365 Võ Minh Tuấn - Vietnam Healthy Application: Ứng dụng thiết kế phát triển để hỗ trợ bảo vệ người Việt khỏi Covid19 Hình Sản phẩm Vietnam Healthy Application - Goohyeah: Goohyeah Business ứng dụng tất một, giúp bạn quản lý doanh nghiệp lúc, nơi Hình Sản phẩm Goohyeah Chương 2: Nội dung thực tập Đợt thực tập giúp cho sinh viên thực tập nắm rõ kiến thức lập trinh ứng dụng web Đồng thời rèn luyện kỹ mềm làm việc nhóm, giao tiếp, trao đổi với thành viên khác công ty Tại cơng ty, sinh viên có hội học tập, khám phá làm việc môi trường phát triển ứng dụng web chuyên nghiệ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 giám đốc công ty giới thiệu công ty, trình thành lập Võ Minh Tuấn phát triể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 Kết : Hiểu thêm công ty Zodinet, q trình thành lập phát triển Có thêm hiểu biết cách thức làm việc công ty công nghệ thống tin đồng thời thực tập sinh có ý thức việc làm việc có kế hoạch, trao đổi, giải thích với thành viên khác công ty Nghiên cứu kỹ thuật 2.1 Tìm hiểu 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 trình làm việc Trong thời gian này, mentor hướng dẫn thực tập sinh tìm hiểu cơng cụ giúp ích cho q trình làm việc sau Một số phần mềm Microsoft Teams – sử dụng làm việc nhóm Clockify – theo dõi thời gian làm việc, Visual Studio Code – text editor sử dụng chinh trình phát triển sản phầm, Figma, Git, ClickUP – phân chia công việc Thực hiện: Học lý thuyết ứng dụng cơng cụ Kết quả: Có thể sử dụng kết hợp công cụ kể 2.2 Tìm hiểu HTTP Request/ Sessions – Cookie – Storage/ Source Control Thời gian: ngày Nội dung: Được trang bị kiến thức http request, sessions, cookie, storage source control - Http request: thông tin gửi từ client lên server, để yêu cầu server tìm xử lý số thông tin, liệu mà client muốn Các phương thức http request: get, post, put, delete, … - Local storage: nơi lưu trữ liệu máy client dạng key/value trình duyệt web - Session storage: tương tự local storage, dùng để lưu trữ liệu máy client Nhưng liệu session storage biến tab trình duyệt bị đóng - Cookie: tệp trang web người dùng truy cập tạo Nó giúp trải nghiệm trực tuyến trở nên dễ dàng cách Võ Minh Tuấn lưu thông tin duyệt web Với cookie, website trì trạng thái đăng nhập bạn, ghi nhớ tùy chọn trang web Thực hiện: - Tìm hiểu http request, phương thức phổ biến http request, làm tập thực hành - Tìm hiểu session, cookie, local storage cách sử dụng chúng - Tìm hiểu git, câu lệnh thao tác với git, làm tập thực hanh Kết quả: 2.3 - Nắm kiến thức http request, session, cookie, local storage, git Tìm hiều HTML CSS, SCSS Thời gian: ngày Nội dụng: Được training kỹ thuật html, css, scss nâng cao, kiến thức giúp tạo nên giao diện responsesive - HTML: ngôn ngữ đánh dấu siêu văn bản, dùng việc phân chia đoạn văn, heading, links, blockquotes,… - CSS: ngôn ngữ tạo phong cách cho trang web, giúp trang web trở nên sinh động - SCSS: chương trình tiền xử lý CSS Nó giúp bạn viết CSS theo cách ngôn ngữ lập trinh, 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, làm tập thực hành html, css, scss Kết quả: 2.4 - Nắm kiến thức html, css, scss - Có thể dựng nên layout cho trang web, style theo thiết kế, tạo giao diện responsive ReactJs Fundamental & NextJs Thời gian: ngày Nội dung: Tìm hiểu reactjs nextjs, sử dụng với typescript - ReactJs: Võ Minh Tuấn 10 ▪ Là thư viện JavaScript mã nguồn mở Facebook xây dựng phát triển Thư viện sử dụng để tạo ứng dụng web với hiệu suất cao, tốc độ load nhanh ▪ Khái niệm chính: • JSX: cú pháp mở rộng cho JavaScript, kết hợp JavaScript với XML Nó chuyển đổi cú pháp dạng gần XML thành JavaScript, giúp code ReactJs cú pháp XML thay phải dùng JavaScript • Component: nơi render mã html thuần, cho phép chia nhỏ đoạn code UI thành phần độc lập với nhau, tiện cho việc quản lý tái sử dụng • Props: nhữn thuộc tính component • State: dùng để biểu diễn trạng thái component - NextJs: framework xây dựng dựa React Chính dựa React nên Nextjs mang cốt lõi tương tự React Nextjs cung cấp ưu vượt trội mà React khơng có Server side rendering Nextjs giúp nhà phát triển tạo ứng dụng web có hiệu xuất tốt web tĩnh siêu nhanh - Typescritp: dự án mã nguồn mở phát triển Microsoft, coi phiên nâng cao javascript việc bổ sung kiểu tĩnh lớp hướng đối tượng mà khơng có javascript Thực hiện: - Tìm hiểu ReactJs, thành phần ReactJs - Cách sử dụng Nextjs kết hợp với typescript - Làm tập thực hành liên quan đến Nextjs Kết quả: 2.5 - Biết cách tạo component, sử dụng props, state, redux ReactJs - Biết cách sử dụng ReactJs, Nextjs kết hợp với typescript Nodejs & NestJs Thời gian: ngày Võ Minh Tuấn 11 Nội dung: Tìm hiểu Nodejs, Nestjs tạo dự án mẫu với Nestjs - Nodejs: tảng (Platform) phát triển độc lập xây dựng javascript runtime chrome mà xây dựng ứng dụng mạng cách nhanh chóng dễ dàng mở rộng - Nestjs: framework Nodejs cho phép xây dựng ứng dụng phía server Nestjs mở rộng framework Nodejs Express 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 Thực hiện: - Tìm hiểu Nodejs cài đặt, tạo project mẫu - Tìm hiểu Nestjs, cách sử dụng cách cài đặt, tạo project mẫu Kết quả: Biêt thêm Nodejs, Nestjs cách cài đặt sử dụng chúng 2.6 SQL & NoSQL database Thời gian: ngày Nội dụng: Tìm hiểu SQL NoSQL cách sử dụng chúng - 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ệ - NoSQL: 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 kiểu quan hệ Thực hiện: Tìm hiểu SQL NoSQL Kết quả: Biết 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 thực kết hợp kiến thức học vào việc lập trinh tạo sản phẩm hoàn chỉnh Lịch làm việc Võ Minh Tuấn 12 Tuần Công việc HTTP Request/ Session – Cookie – Storage/ Source control HTML – Fundamental & CSS Coding Standards and Conventions & Developer tool Javascript & ES6 & Restfull API ReactJs Fundamental Nodejs Fundamental Nodejs Fundamental Sql database & NoSql Kick off final project Web Security & Hacking Mobile development Performance optimize – Client side System Architecture & Design Design database Design database Người hướng dẫn Nhận xét Mức độ hoàn 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ị mentor Anh Cường Quách Anh Tuấn Lê Anh Tiến Phạm Anh Long/ Anh Đạt Vũ/ Anh Đạt Đới Anh Long/ Anh Đạt Vũ/ Anh Đạt Đới Anh Long/ Anh Đạt Vũ/ Anh Đạt Đới Võ Minh Tuấn 13 Final project 6–8 Final project Final Project Demo final project Tất anh chị mentor Tất anh chị mentor Tất anh chị mentor Chương 3: Chi tiết Project Giới thiệu ứng dụng Ứng dụng Tinai ứng dụng giúp người tìm bạn bè xung quanh vị trí mình, giúp họ trị chuyện với nhau, tạo nên mối quan hệ bạn bè hay tinh duyên Nó bao gồm chức chính: lướt tìm bạn, tìm bạn đồ, trị chuyện nhắn tin, thay đổi thơng tin người dùng 1.1 Tính lướt tìm bạn Mơ tả: Tại trang chủ Tinai, người dùng lướt tìm bạn xung quanh vị trí thân Đồng thời xem thơng tin người bạn ảnh đại diện, họ tên, tuổi, mơ tả thân, sở thích hình ảnh yêu thích họ Nếu người dùng cảm thấy thích người bạn nhấn nút trai tim hình muốn block người nhấn nút thùng rác hình Võ Minh Tuấn 14 Hình Lướt tìm bạn bè Võ Minh Tuấn 15 Hình Xem thông tin bạn bè 1.2 Tìm bạn bạn đồ Mơ tả: Với chức này, người dùng thấy người dùng khác xung quan minh với vị trí họ hình trai tim, vị trí thân dấu chấm màu tím Khi nhấn vào hình trái tim thơng tin người hiển thị tab nhỏ phía hình Và người dùng nhấn vào nút chữ i ứng dụng hiển thị thơng tin người bạn giống phần trang chủ Võ Minh Tuấn 16 Hình Tìm bạn đồ 1.3 Trị chuyện với bạn bè Mơ tả: Sau người nhấn nút thích người trở thành bạn bè lúc họ trị chuyện với Võ Minh Tuấn 17 Hình Trò chuyện với bạn bè 1.4 Thay đổi thông tin Mô tả: Người dùng chỉnh sửa thơng tin nhân trang cá nhân, chọn hình u thích Các thơng tin xem người dùng khác Võ Minh Tuấn 18 Hình Trang cá nhân Thực Sau hai tháng thực tập, anh chị mentor training kiến thức tự nghiên cứu tài liệu, công thêm giúp đỡ anh chị trình thực đồ án, sinh viên hoan thành xong dự án Võ Minh Tuấn 19 TỔNG KẾT Như vậy, hai tháng ngắn ngủi, em trau dồi 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 ban đầu Do thời gian có hạn kinh nghiệm chưa nhiều nên tính cịn đơn giản, hình ảnh chưa thực đẹp mong đợi Chân thành cảm ơn anh chị mentor giúp em hoàn thành thời gian thực tập Zodinet Võ Minh Tuấn ... anh chị trình thực đồ án, sinh viên hoan thành xong dự án Võ Minh Tuấn 19 TỔNG KẾT Như vậy, hai tháng ngắn ngủi, em trau dồi 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... chị mentor Chương 3: Chi tiết Project Giới thiệu ứng dụng Ứng dụng Tinai ứng dụng giúp người tìm bạn bè xung quanh vị trí mình, giúp họ trị chuyện với nhau, tạo nên mối quan hệ bạn bè hay tinh duyên... Javascript Nest lấy cảm hứng từ kiến trúc Agular nên với bạn làm việc với Agular, khơng cịn xa lạ dễ dàng tiếp cận sử dụng Agular Với niềm đam mê lập trình web muốn có thêm kinh nghiệm thực tế, em định