Báo cáo thực tập ngành thiết kế trang recently viewed trong dự án abc todo list

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ự á

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)

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

3

Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com)

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ý và ghi rõ họ tên)

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 tincủa Trường Đại học Nha Trang và đối tác công ty ABC Solutions (Nha Trang) vì đãtạo điều kiện cho em được thực tập tại công ty Nhờ có cơ hội này, em đã có dịp tíchlũy những kinh nghiệm quý báu và phát triển những kỹ năng cần thiết cho sự nghiệptrong tương lai

Trải qua 6 tuần thực tập, em đã có cơ hội tìm hiểu và áp dụng những kiến thứcmới Dù thời gian ngắn, nhưng nhờ vào sự hướng dẫn tận tình từ anh Lâm Minh Thiện

và các đồng nghiệp trong bộ phận, em đã nắm bắt được những khái niệm quan trọng,

từ đó phát triển kỹ năng lập trình và xây dựng giao diện trực quan Họ cũng đã nhiệttình hỗ trợ em trong công việc và giúp em thích nghi với môi trường làm việc mới

Đặ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 cùng với em trong suốt quá trình thực tập và hoàn thành tốt bài báo cáonày

Vì kiến thức của em còn hạn chế, nên trong suốt quá trình thực tập, em nhậnthức rằng có một số thiếu sót Em hiện đang rất mong muốn nhận được sự đóng góp ýkiến quý báu từ thầy cũng như từ đội ngũ của công ty, nhằm giúp bài báo cáo của emtrở nên hoàn thiện hơn và chất lượng hơn Mọi ý kiến đóng góp sẽ là nguồn động viênlớn, giúp em cải thiện và phát triển kỹ năng nghề nghiệp của mình Em rất trân trọngmọi đóng góp tích cực từ phía thầy và công ty để bài báo cáo trở nên xuất sắc hơn

Khánh Hòa, tháng 1 năm 2023Sinh viên thực hiện

MỤC LỤC

NHẬN XÉT CỦA GIẢNG VIÊN 4

PHIẾU ĐÁNH GIÁ THỰC TẬP 5

LỜI CẢM ƠN 7

CHƯƠNG 1: BÁO CÁO TỔNG HỢP 10

1.1 Giới thiệu về 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 tại 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 về React 14

2.1.1 Tổng quan về React 14

2.1.2 Lý do nên dùng React 14

2.1.3 Kết luận 14

2.2 Tổng quan về TypeScript 15

2.3 Giới thiệu Next.js 16

2.4 Giới thiệu về 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 tại công ty 19

3.2.1 Todo list cơ bản với json-server 19

3.2.2 Đăng nhập và đăng ký với json-server 24

3.3 Trang Recently viewed của 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

CHƯƠNG 1: BÁO CÁO TỔNG HỢP

1.1 Giới thiệu về 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 về công ty:

ABC Software Solutions là một công ty chuyên cung cấp các giải pháp kỹthuật số cho các vấn đề phức tạp Công ty có trụ sở tại Nha Trang, Khánh Hòa

và được thành lập vào năm 2022 bởi Mai Văn Khánh Công ty có quy môkhoảng 10-24 nhân viên và hoạt động trong lĩnh vực phần mềm CNTT/Dịch vụphần mềm Công ty có một trang web chính thức và một trang Facebook để giớithiệu về sản phẩm và dịch vụ của mình

1.2 Nội dung thực tập

1.2.1 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

 Người hướng dẫn tại công ty: Lâm Minh Thiện

1.2.2 Lịch làm việc tại nơi thực tập

1.2.3 Nhật ký thực tập

- Ôn lại kiến thức cơ bản vềJavaScript bằng cách đọc và làmcác bài tập trong JavaScript tutorial

- Nắm vững cú pháp và cách sửdụng các tính năng JS

- Làm các bài tập thực hành sử dụngTypeScript để làm quen với cú pháp

và kiểu dữ liệu trong TypeScript

- Hiểu cách tạo và sử dụng các kiểu

dữ liệu, interfaces và modules trongTypeScript

08/12/2023

- Tìm hiểu về React và các kháiniệm cơ bản của nó như component,state, props

- Tạo một ứng dụng React đơn giản

và chạy thử thành công

- Hiểu cách sử dụng JSX để viết mãJSX trong React

- Đọc và hiểu cách làm việc với cácthành phần React

- Tìm hiểu về việc quản lý statetrong React và cách sử dụng hooks(useState, useEffect)

15/12/2023

- Làm quen với việc xây dựng mộtứng dụng Tic-Tac-Toe sử dụngReact

- Hiểu cách tạo và sử dụng cáccomponent trong React

- Viết mã JSX để tạo giao diện chotrò chơi Tic-Tac-Toe

- Xử lý logic của trò chơi, bao gồmviệc kiểm tra người chiến thắng vàthay đổi lượt chơi

- Hiểu cách quản lý state trongReact và cập nhật state thông quahooks (useState) và các hàm xử lý

sự kiện

Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com)

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT2.1 Giới thiệu về React

React là một thư viện JavaScript phổ biến được sử dụng để xây dựng giaodiện người dùng (UI) cho các ứng dụng web Được phát triển bởi Facebook, React

đã nhanh chóng trở thành một công cụ ưa thích trong cộng đồng phát triển web

2.1.1 Tổng quan về React

React được thiết kế để tạo ra các giao diện người dùng linh hoạt và dễ bảotrì Một trong những đặc điểm nổi bật của React là sự sử dụng các "component",những phần tử độc lập có thể tái sử dụng, giúp tổ chức mã nguồn một cách hiệuquả React cũng sử dụng Virtual DOM, một biểu diễn của DOM trong bộ nhớ, đểtối ưu hóa hiệu suất của ứng dụng

CHƯƠNG 2:

2.1.

2.1.1.

2.1.2 Lý do nên dùng React

Có nhiều lý do mà các nhà phát triển lựa chọn sử dụng React trong các

dự án của họ Dưới đây là một số điểm chính:

- Tái sử dụng component: React cho phép bạn xây dựng các component độc

lập, có thể tái sử dụng ở nhiều nơi trong ứng dụng hoặc giữa các dự án khácnhau

- Virtual DOM và hiệu suất: Sử dụng Virtual DOM giúp giảm thiểu số

lượng các thay đổi trực tiếp trên DOM, điều này cải thiện hiệu suất của ứngdụng

- Học dễ dàng: React có một cộng đồng lớn và tài liệu phong phú, giúp người

mới học và làm việc với nó dễ dàng hơn

- Thư viện mạnh mẽ: React được kết hợp với các thư viện khác như Redux

để quản lý trạng thái ứng dụng, tạo ra một hệ sinh thái phát triển mạnh mẽ

Một số đặc điểm chính của TypeScript:

- Kiểu dữ liệu tĩnh: TypeScript hỗ trợ kiểu dữ liệu tĩnh, cho phép xác

định kiểu của biến, tham số hàm và giá trị trả về Điều này giúp tránhđược nhiều lỗi runtime và cung cấp hỗ trợ từ các trình biên dịch trongquá trình phát triển

- Tính năng lập trình hướng đối tượng (OOP): TypeScript hỗ trợ các

tính năng của lập trình hướng đối tượng như class, interface, inheritance,

và encapsulation, giúp tăng cường cấu trúc và tổ chức mã nguồn

11

Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com)

- Tương thích với JavaScript: Mọi mã nguồn JavaScript hợp lệ cũng là

mã TypeScript hợp lệ Điều này có nghĩa là bạn có thể chuyển từJavaScript sang TypeScript một cách dễ dàng và thêm tính năng kiểu dữliệu tĩnh theo từng phần

- Tích hợp với các công cụ phát triển: TypeScript tích hợp tốt với nhiều

công cụ phát triển như Visual Studio Code, Sublime Text, và các trìnhbiên dịch JavaScript như Babel

- Cộng đồng và hỗ trợ mạnh mẽ: TypeScript có một cộng đồng lớn và

được Microsoft hỗ trợ chặt chẽ, đảm bảo rằng ngôn ngữ này luôn đượccập nhật và phát triển

- Mở rộng mã nguồn JavaScript: TypeScript cho phép sử dụng các tính

năng mới của ECMAScript (ES6, ES7, ) trước khi chúng được triểnkhai chính thức trong trình duyệt

Tổng quan về TypeScript chỉ ra rằng nó là một lựa chọn mạnh mẽ cho các

dự án phức tạp, đặc biệt là trong các ứng dụng lớn và đòi hỏi tính bảo trì cao

2.3 Giới thiệu Next.js

Next.js là một framework React được sử dụng để xây dựng ứng dụng webReact có hiệu suất cao và dễ bảo trì Được phát triển bởi một đội ngũ tại Vercel,Next.js giúp đơn giản hóa quá trình phát triển ứng dụng React bằng cách cung cấpnhiều tính năng tích hợp sẵn và tối ưu hóa các khía cạnh như routing, tạo trangtĩnh, và quản lý trạng thái

Dưới đây là một số đặc điểm quan trọng của Next.js:

- Routing tự động: Next.js cung cấp một hệ thống routing tự động, giúp

tổ chức mã nguồn và tạo ra các đường dẫn (URL) intuitively dựa trêncấu trúc thư mục của dự án

- Tạo trang tĩnh (Static Site Generation - SSG): Next.js cho phép tạo

trang tĩnh trước (pre-render) các trang web, giúp cải thiện hiệu suất bằngcách giảm thời gian tải trang và tăng khả năng tương tác

- Tích hợp Server-side Rendering (SSR): Next.js hỗ trợ SSR, cho phép

render trang trên server trước khi gửi đến trình duyệt, giúp cải thiện hiệusuất và tối ưu hóa trải nghiệm người dùng

- Quản lý trạng thái (State Management): Next.js không ép buộc sử

dụng bất kỳ thư viện quản lý trạng thái cụ thể nào, nhưng nó tương thíchtốt với các thư viện như Redux hoặc Context API để quản lý trạng tháicủa ứng dụng

- Hỗ trợ TypeScript: Next.js hỗ trợ TypeScript natively, cho phép sử

dụng kiểu dữ liệu tĩnh trong mã nguồn và tận dụng tính năng củaTypeScript

- Phát triển đồng thời (Hot Module Replacement - HMR): Next.js hỗ

trợ HMR, giúp phát triển nhanh chóng và thấy những thay đổi ngay lậptức mà không cần làm mới trang

- Cộng đồng và tài liệu phong phú: Next.js có một cộng đồng lớn và

năng động, đồng thời có tài liệu chi tiết giúp người phát triển dễ dàngtiếp cận và giải quyết vấn đề

Next.js giúp đơn giản hóa nhiều khía cạnh của phát triển ứng dụng React và

là một lựa chọn mạnh mẽ cho việc xây dựng ứng dụng web hiện đại

2.4 Giới thiệu về TailwindUI

Tailwind là Famework CSS để phát triển UI nhanh chóng Nó cung cấp cáccông cụ để phát triển nhanh chóng, đồng thời cho phép nhà phát triển maintain.Mặc dù không có giới hạn đối với trí trưởng tượng với Tailwind, thiết kế được cấu

13

Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com)

trúc theo cách để nhà phát triển có thể tạo một quy tắt tăng size của CSS hoặc cácthuộc tính lặp đi lặp lại.

Tailwind UI giúp tiết kiệm thời gian phát triển bằng cách cung cấp các thànhphần giao diện người dùng đã được thiết kế sẵn và tương thích với Tailwind CSS.Thay vì phải xây dựng từ đầu mỗi thành phần, bạn có thể sử dụng các thành phần

có sẵn và chỉnh sửa chúng theo ý muốn Điều này giúp tăng tốc quá trình phát triển

và đồng thời đảm bảo tính nhất quán về giao diện trong dự án của bạn

CHƯƠNG 3: THỰC HIỆN PHẦN MỀM

3.1 Công cụ sử dụng:

1 Visual Studio Code (VSCode): Một trình soạn thảo mã nguồn mở và miễn

phí, được phát triển bởi Microsoft, với nhiều tiện ích mở rộng hỗ trợ React

và TypeScript

2 Figma : Figma là một công cụ thiết kế giao diện người dùng (UI) và tạo

wireframe rất mạnh mẽ và phổ biến Tích hợp Figma vào quy trình pháttriển của mình khi làm việc với React và Next.js

3 npx : là một công cụ đi kèm với Node.js, cho phép bạn chạy các ứng dụng

hoặc công cụ npm mà không cần cài đặt chúng trên máy tính của bạn Dướiđây là một số cách bạn có thể sử dụng npx trong quy trình làm việc củamình với React và Next.js

4 Github: là một dịch vụ lưu trữ mã nguồn và hợp tác phổ biến giúp nhóm

phát triển quản lý và theo dõi mã nguồn của dự án một cách hiệu quả

5 Yarn và npm: là hai công cụ quản lý gói (package manager) phổ biến trong

cộng đồng phát triển JavaScript Cả hai công cụ này đều được sử dụng đểquản lý các thư viện, gói, và phụ thuộc của dự án

3.2 Bài tập cá nhân tại công ty

3.2.1 Todo list cơ bản với json-server

Giới thiệu:

15

Downloaded by Quang Tran (quangvaytiennhanh1994@gmail.com)

 Nền Tảng: Ứng dụng Todo List được phát triển sử dụng JSON Server nhằm

tạo ra một giao diện linh hoạt và dễ sử dụng cho việc quản lý danh sách công việc cá nhân

nhiệm vụ để người dùng có trải nghiệm quản lý công việc linh hoạt

Chức năng chính:

tương tác nhanh chóng và dễ sử dụng

Mã lệnh xử lý giao diện (path : ` /src/app/page.tsx`) :

1 import { getAllTodos } from " / /api" ;

2 import { ITask } from " / /types/tasks" ;

3 import AddTask from "./components/tasks/AddTask" ;

4 import TodoList from "./components/tasks/TodoList" ; 5.

6 export default async function Home () {

7   const tasks await getAllTodos ();

8   return (

9     < main className ="max-w-4xl mx-auto mt-4" >

10       < div className ="text-center my-5 flex flex-col gap-4" >

11         < h1 className ="text-2xl font-bold" > Todo list app </ h1 >

Thao tác với giao diện:

o Khi nhấn vào button Add new task sẽ hiển thị ra Modal với chức năng thêm nhiệm vụ mới

Mã lệnh xử button “Add new task”(path : \src\app\components\tasks\AddTask.tsx ):

1 'use client' ;

2 import { FaPlus } from "react-icons/fa" ;

3 import Model from "./Model" ;

4 import { FormEventHandler , useState } from "react" ;

5 import { addTodo } from " / / / /api" ;

6 import { useRouter } from "next/navigation" ;

7 import { v4 as uuidv4 } from 'uuid' ;

8 const AddTask () => {

9     const router useRouter (); //cap nhat lien tuc data tu json

10     const [ modelOpen , setModelOpen ] =

useState < boolean >( false );

11     const [ newTaskValue , setNewTaskValue ] =

27       < Model modelOpen = { modelOpen }

setModelOpen = { setModelOpen }

28       < form onSubmit = { handleSubmitNewToto }

29       < h3 className ="font-bold text-lg" > Add new task </ h3 >

30       < div className ="modal-action" >

31       < input type ="text" placeholder ="Type here"

44 export default AddTask

6 Khi nhấn vào Icon chỉnh sửa, xoá sẽ hiện lên Modal với chức năng chỉnh sửa và thông tin tên nhiệm vụ

 Tương Tác với JSON Server: Các thao tác thêm, sửa, xoá nhiệm vụ được thực

hiện thông qua giao tiếp với JSON Server, đảm bảo đồng bộ dữ liệu giữa client

và server (Đính kèm đoạn mã nguồn tương tác với JSON Server

5 export const getAllTodos async () :Promise < ITask []> => {

6     const res   await fetch ( ` ${ baseUrl } /tasks` ,{ cache: store' });

'no-7     const todos await res json ();

8     return todos ;

9 }

10.

11 export const addTodo async ( todo :ITask ) Promise < ITask > => {

12     const res await fetch ( ${ baseUrl } /tasks` ,{

23 export const editTodo = async ( todo :ITask ) :Promise < ITask > => {

24     const res await fetch ( ${ baseUrl } /tasks/ ${todo id} ,{

35 export const deleteTodo = async ( id :string ) Promise < void > => {

36     const res await fetch ( ${ baseUrl } /tasks/ ${id} ` ,{

37         method: 'DELETE'

38     });

39 }

3.2.2 Đăng nhập và đă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 nếu chưa có tài khoản thì có thể 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 và xử lý đăng nhập:

1 'use client' ;

2 import Link from "next/link" ;

3 import { useEffect , useState } from "react" ;

4 import { useRouter } from "next/navigation" ;

5 import axios from "axios" ;

6 import { toast } from "react-hot-toast" ;

7 import { getUsers } from " / / /api" ;

8.

9 export default function PageLogin () {

10     const router useRouter ();

11     const [ user , setUser ] = useState ({

12         email: "" ,