Giới thiệu Họ và tên sinh viên: Lê Trường Giang Lớp: 62.CNTT-1 Giảng viên hướng dẫn: Huỳnh Tuấn Anh Vị trí thực tập: Web developer Tên đề tài: Thiết kế trang Recently viewed cho dự á
lOMoARcPSD|10162138 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NHA TRANG KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO THỰC TẬP NGÀNH THIẾT KẾ TRANG RECENTLY VIEWED TRONG DỰ ÁN ABC TODO LIST Công ty thực tập: ABC Software Solution Giảng viên hướng dẫn: Huỳnh Tuấn Anh Người phụ trách/Giám sát: Lâm Minh Thiện Sinh viên thực hiện: Lê Trường Giang Mã số sinh viên: 62133637 Khánh Hòa – 01/2023 Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com) lOMoARcPSD|10162138 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC NHA TRANG KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO THỰC TẬP NGÀNH THIẾT KẾ TRANG RECENTLY VIEWED TRONG DỰ ÁN ABC TODO LIST Công ty thực tập: ABC Software Solution Giảng viên hướng dẫn: Huỳnh Tuấn Anh Người phụ trách/Giám sát: Lâm Minh Thiện Sinh viên thực hiện: Lê Trường Giang Mã số sinh viên: 62133637 Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com) lOMoARcPSD|10162138 Khánh Hòa – 01/2023 Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com) lOMoARcPSD|10162138 NHẬN XÉT CỦA GIẢNG VIÊN …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… ………… Điểm tổng kết: GIẢNG VIÊN HƯỚNG DẪN (Ký ghi rõ họ tên) Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com) lOMoARcPSD|10162138 LỜI CẢM ƠN Trước hết, em xin bày tỏ lịng biết ơn sâu sắc đến Khoa Cơng nghệ thông tin Trường Đại học Nha Trang đối tác cơng ty ABC Solutions (Nha Trang) tạo điều kiện cho em thực tập công ty Nhờ có hội này, em có dịp tích lũy kinh nghiệm quý báu phát triển kỹ cần thiết cho nghiệp tương lai Trải qua tuần thực tập, em có hội tìm hiểu áp dụng kiến thức Dù thời gian ngắn, nhờ vào hướng dẫn tận tình từ anh Lâm Minh Thiện đồng nghiệp phận, em nắm bắt khái niệm quan trọng, từ phát triển kỹ lập trình xây dựng giao diện trực quan Họ nhiệt tình hỗ trợ em cơng việc giúp em thích nghi với mơi trường làm việc Đặc biệt, em xin gửi lời cảm ơn thầy Huỳnh Tuấn Anh nhiệt tình hỗ trợ, đồng hành với em suốt q trình thực tập hồn thành tốt báo cáo Vì kiến thức em cịn hạn chế, nên suốt trình thực tập, em nhận thức có số thiếu sót Em mong muốn nhận đóng góp ý kiến quý báu từ thầy từ đội ngũ công ty, nhằm giúp báo cáo em trở nên hoàn thiện chất lượng Mọi ý kiến đóng góp nguồn động viên lớn, giúp em cải thiện phát triển kỹ nghề nghiệp Em trân trọng đóng góp tích cực từ phía thầy cơng ty để báo cáo trở nên xuất sắc Khánh Hòa, tháng năm 2023 Sinh viên thực Giang Lê Trường Giang Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com) lOMoARcPSD|10162138 MỤC LỤC NHẬN XÉT CỦA GIẢNG VIÊN .4 PHIẾU ĐÁNH GIÁ THỰC TẬP LỜI CẢM ƠN CHƯƠNG 1: BÁO CÁO TỔNG HỢP 10 1.1 Giới thiệu công ty 10 1.2 Nội dung thực tập .10 1.2.1 Giới thiệu .10 1.2.2 Lịch làm việc nơi thực tập 10 1.2.3 Nhật ký thực tập .11 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT .14 2.1 Giới thiệu React .14 2.1.1 Tổng quan React .14 2.1.2 Lý nên dùng React .14 2.1.3 Kết luận 14 2.2 Tổng quan TypeScript 15 2.3 Giới thiệu Next.js 16 2.4 Giới thiệu TailwindUI 17 2.5 Cài đặt next.js .18 CHƯƠNG 3: THỰC HIỆN PHẦN MỀM 19 3.1 Công cụ sử dụng: 19 3.2 Bài tập cá nhân công ty 19 3.2.1 Todo list với json-server .19 3.2.2 Đăng nhập đăng ký với json-server 24 3.3 Trang Recently viewed dự án ABC Todo List 30 CHƯƠNG 4: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN .34 4.1 Kết luận .34 4.2 Hướng phát triển 34 TÀI LIỆU THAM KHẢO 35 Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com) lOMoARcPSD|10162138 CHƯƠNG 1: BÁO CÁO TỔNG HỢP 1.1 Giới thiệu công ty Tên công ty: ABC Software Solutions Địa chỉ: 02 Đường Tố Hữu, Phước Hải, Nha Trang, Khánh Hòa 650000 Email: hello@abcsoftwarecompany.com/ Website: https://abcsoftwarecompany.com/ Giới thiệu công ty: ABC Software Solutions công ty chuyên cung cấp giải pháp kỹ thuật số cho vấn đề phức tạp Công ty có trụ sở Nha Trang, Khánh Hịa thành lập vào năm 2022 Mai Văn Khánh Công ty có quy mơ khoảng 10-24 nhân viên hoạt động lĩnh vực phần mềm CNTT/Dịch vụ phần mềm Cơng ty có trang web thức trang Facebook để giới thiệu sản phẩm dịch vụ 1.2 Nội dung thực tập 1.2.1 Giới thiệu Họ tên sinh viên: Lê Trường Giang Lớp: 62.CNTT-1 Giảng viên hướng dẫn: Huỳnh Tuấn Anh Vị trí thực tập: Web developer Tên đề tài: Thiết kế trang Recently viewed cho dự án ABC Todo-lfist Thời gian thực tập: 27/11/2023 – 05/01/2024 Buổi thực tập: ngày/tuần (thứ thứ 5), ngày lại thực tập nhà Người hướng dẫn công ty: Lâm Minh Thiện 1.2.2 Lịch làm việc nơi thực tập Sáng Chiều Thứ thứ 00 đến 12 00 13 00 đến 17 00 Thứ 2, thứ thứ Thực tập nhà Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com) lOMoARcPSD|10162138 1.2.3 Nhật ký thực tập Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com) lOMoARcPSD|10162138 Tuần Tên công việc Thời gian Kết làm Ôn tập làm Từ ngày : - Ôn lại kiến thức tập 27/11/2023 JavaScript cách đọc làm JS tuterial, đến ngày: tập JavaScript tutorial TypeScrip 1/12/2023 - Nắm vững cú pháp cách sử dụng tính JS - Làm tập thực hành sử dụng TypeScript để làm quen với cú pháp kiểu liệu TypeScript - Hiểu cách tạo sử dụng kiểu liệu, interfaces modules TypeScript Học thư viện Từ ngày : - Tìm hiểu React khái niệm component, React 04/12/2023 state, props - Tạo ứng dụng React đơn giản https://react.d đến ngày: ev/learn 08/12/2023 chạy thử thành công - Hiểu cách sử dụng JSX để viết mã JSX React - Đọc hiểu cách làm việc với thành phần React - Tìm hiểu việc quản lý state React cách sử dụng hooks (useState, useEffect) Làm Từ ngày : - Làm quen với việc xây dựng ứng dụng Tic-Tac-Toe sử dụng 11/12/2023 React - Hiểu cách tạo sử dụng React đến ngày: component React - Viết mã JSX để tạo giao diện cho (TicTocTac) 15/12/2023 trò chơi Tic-Tac-Toe https://react.d ev/learn/tutori al-tic-tac-toe - Xử lý logic trò chơi, bao gồm việc kiểm tra người chiến thắng thay đổi lượt chơi - Hiểu cách quản lý state React cập nhật state thông qua hooks (useState) hàm xử lý Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com) lOMoARcPSD|10162138 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.1 Giới thiệu React React thư viện JavaScript phổ biến sử dụng để xây dựng giao diện người dùng (UI) cho ứng dụng web Được phát triển Facebook, React nhanh chóng trở thành cơng cụ ưa thích cộng đồng phát triển web 2.1.1 Tổng quan React React thiết kế để tạo giao diện người dùng linh hoạt dễ bảo trì Một đặc điểm bật React sử dụng "component", phần tử độc lập tái sử dụng, giúp tổ chức mã nguồn cách hiệu React sử dụng Virtual DOM, biểu diễn DOM nhớ, để tối ưu hóa hiệu suất ứng dụng CHƯƠNG 2: 2.1 2.1.1 2.1.2 Lý nên dùng React Có nhiều lý mà nhà phát triển lựa chọn sử dụng React dự án họ Dưới số điểm chính: - Tái sử dụng component: React cho phép bạn xây dựng component độc lập, tái sử dụng nhiều nơi ứng dụng dự án khác - Virtual DOM hiệu suất: Sử dụng Virtual DOM giúp giảm thiểu số lượng thay đổi trực tiếp DOM, điều cải thiện hiệu suất ứng dụng - Học dễ dàng: React có cộng đồng lớn tài liệu phong phú, giúp người học làm việc với dễ dàng 10 Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com) lOMoARcPSD|10162138 27 28 29 Add new task 30 31 setNewTaskValue(e.target.value)} 34 required 35 className="input input-bordered input-primary w-full" /> 36 Submit 37 38 39 40 41 ) 42 } 43 44 export default AddTask Khi nhấn vào Icon chỉnh sửa, xoá lên Modal với chức chỉnh sửa thông tin tên nhiệm vụ 18 Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com) lOMoARcPSD|10162138 Tương Tác với JSON Server: Các thao tác thêm, sửa, xoá nhiệm vụ thực thông qua giao tiếp với JSON Server, đảm bảo đồng liệu client server (Đính kèm đoạn mã nguồn tương tác với JSON Server + Mã lệnh thao tác: import { ITask } from "./types/tasks"; const baseUrl = 'http://localhost:3001'; export const getAllTodos = async():Promise=>{ const res = await fetch(`${baseUrl}/tasks`,{cache:'no- store'}); const todos = await res.json(); return todos; } 10 11 export const addTodo = async (todo:ITask):Promise=>{ 12 const res = await fetch(`${baseUrl}/tasks`,{ 13 method:'POST', 14 headers:{ 15 'Content-Type' : 'application/json' 16 }, 17 body:JSON.stringify(todo) 18 }); 19 const newTodo = await res.json(); 20 return newTodo; 21 } 22 23 export const editTodo = async (todo:ITask):Promise=>{ 24 const res = await fetch(`${baseUrl}/tasks/${todo.id}`,{ 25 method:'PUT', 26 headers:{ 19 Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com) lOMoARcPSD|10162138 27 'Content-Type' : 'application/json' 28 }, 29 body:JSON.stringify(todo) 30 }); 31 const updateTodo = await res.json(); 32 return updateTodo; 33 } 34 35 export const deleteTodo = async (id:string):Promise=>{ 36 const res = await fetch(`${baseUrl}/tasks/${id}`,{ 37 method:'DELETE' 38 }); 39 } 3.2.2 Đăng nhập đăng ký với json-server Giao diện đăng nhập: người dùng nhập email vào password để đăng nhập chưa có tài khoản nhấn vào đường link `click` để chuyển tới trang đăng ký Mã lệnh xử lý hiển thị giao diện xử lý đăng nhập: 'use client'; import Link from "next/link"; import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import axios from "axios"; import { toast } from "react-hot-toast"; import { getUsers } from " / / /api"; export default function PageLogin() { 10 const router = useRouter(); 11 const [user, setUser] = useState({ 12 email: "", 20 Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com)