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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (696.19 KB, 32 trang )

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 ()

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

2

Downloaded by Quang Tran ()

lOMoARcPSD|10162138

Khánh Hòa – 01/2023

3

Downloaded by Quang Tran ()

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

4

Downloaded by Quang Tran ()

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
củ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ích
lũ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ệp
trong 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ức
mớ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ệt
tì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 q trình thực tập và hồn thành tốt bài báo cáo
này.
Vì kiến thức của em còn hạn chế, nên trong suốt q trình thực tập, em nhận
thứ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 em
trở 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ên
lớ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ọng
mọ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 2023
Sinh viên thực hiện
Giang
Lê Trường Giang

5

Downloaded by Quang Tran ()

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................................................................................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

6

Downloaded by Quang Tran ()

lOMoARcPSD|10162138

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: /

 Website: />
 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ới

thiệ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

 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: 2 ngày/tuần (thứ 3 và thứ 5), những ngày còn lại thực tập tại

nhà

 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

Sáng Chiều

Thứ 3 và thứ 5 8 giờ 00 đến 12 giờ 00 13 giờ 00 đến 17 giờ 00

Thứ 2, thứ 4 và thứ Thực tập tại nhà

6

7

Downloaded by Quang Tran ()

lOMoARcPSD|10162138

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

8

Downloaded by Quang Tran ()

lOMoARcPSD|10162138

Tuần Tên công việc Thời gian Kết quả làm được
1
Ôn tập và làm Từ ngày : - Ôn lại kiến thức cơ bản về
2 các bài tập về 27/11/2023 JavaScript bằng cách đọc và làm
JS tuterial, đến ngày: các bài tập trong JavaScript tutorial.
3 TypeScrip. 1/12/2023 - 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ụng

TypeScript để 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 trong

TypeScript.

Học thư viện Từ ngày : - Tìm hiểu về React và các khái
niệm cơ bản của nó như component,
React. 04/12/2023 state, props.
- Tạo một ứng dụng React đơn giản
https://react.d đến ngày:

ev/learn 08/12/2023

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

thành phần React.

- Tìm hiểu về việc quản lý state

trong React và cách sử dụng hooks

(useState, useEffect).

Làm các bài Từ ngày : - Làm quen với việc xây dựng một
ứng dụng Tic-Tac-Toe sử dụng
cơ bản về 11/12/2023 React.
- Hiểu cách tạo và sử dụng các
React đến ngày: component trong 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 của trò chơi, bao gồm

việ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 trong
9 React và cập nhật state thông qua

hooks (useState) và các hàm xử lý

Downloaded by Quang Tran ()

lOMoARcPSD|10162138

CHƯƠNG 2: CƠ SỞ LÝ THUYẾT
2.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 giao
diệ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ảo

trì. 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ệu
quả. 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ác
nhau.
- 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 ứng
dụ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.

10

Downloaded by Quang Tran ()

lOMoARcPSD|10162138

- 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ẽ.

2.1.3. Kết luận
React khơng chỉ là một thư viện UI mà cịn là một triển khai hiệu quả cho

việc xây dựng ứng dụng web hiện đại. Sự linh hoạt, hiệu suất cao và cộng đồng lớn
là những yếu tố giúp React trở thành một lựa chọn phổ biến trong cộng đồng phát
triển web.

2.2. Tổng quan về TypeScript
TypeScript là một ngơn ngữ lập trình được phát triển bởi Microsoft, là một

siêu set của JavaScript, nghĩa là nó là một mở rộng của JavaScript với thêm tính
năng đặc biệt như kiểu dữ liệu tĩnh (static typing). TypeScript được thiết kế để giúp
các nhà phát triển xây dựng ứng dụng lớn và dễ bảo trì hơn.

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 trong
quá 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 ()

lOMoARcPSD|10162138

- 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ình
biê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 được
cậ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ển
khai 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 web
React 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ấp
nhiề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 trang
tĩ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ên
cấu trúc thư mục của dự án.

12

Downloaded by Quang Tran ()

lOMoARcPSD|10162138

- 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ằng
cá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ệu
suấ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ích
tốt với các thư viện như Redux hoặc Context API để quản lý trạng thái
củ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ủa
TypeScript.

- 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ập
tứ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àng
tiế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ác

cơ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 ()

lOMoARcPSD|10162138

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ác
thuộ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ành
phầ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.

2.5. Cài đặt next.js
Mở terminal hoặc command prompt. Chạy lệnh sau để tạo một dự án Next.js mới:

npx create-next-app my-next-app
Trong đó, `my-next-app` là tên của thư mục dự án mới. Bạn có thể thay đổi tên theo ý
muốn.

Di chuyển vào thư mục dự án mới:
cd my-next-app

Chạy ứng dụng Next.js:
npm run dev
Lệnh trên sẽ khởi chạy ứng dụng Next.js trong môi trường phát triển và tạo một

server phản hồi tức thì.
Mở trình duyệt và truy cập địa chỉ [http://localhost:3000](http://localhost:3000) để
xem ứng dụng.

14

Downloaded by Quang Tran ()

lOMoARcPSD|10162138

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át
triể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ủa
mì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 ()

lOMoARcPSD|10162138

 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.

 Mục Tiêu: Xây dựng một hệ thống Todo List có khả năng thêm, sửa, xố
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:
 Giao Diện Người Dùng: Thiết kế đơn giản nhưng thân thiện, tối ưu hóa để

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.

11.

Todo list

app

12. <AddTask />

13. </div>

14. <TodoList tasks={tasks} />

15. </main>

16. )}

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

16

Downloaded by Quang Tran ()

lOMoARcPSD|10162138

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] =

useState<string>('');

12.

13. const handleSubmitNewToto:

FormEventHandler<HTMLFormElement> = async (e) => {

14. e.preventDefault();

15. await addTodo({

16. id: uuidv4(),

17. text: newTaskValue

18. });

19. setNewTaskValue("");

20. setModelOpen(false);

21. router.refresh(); //lenh cap nhat

22. }

23. return (

24. <div>

25. <button onClick={() => setModelOpen(true)}

className="btn btn-primary w-full">Add new task
className='ml-2' size={18} />

26. </button>

17

Downloaded by Quang Tran ()

lOMoARcPSD|10162138

27.
setModelOpen={setModelOpen}>

28. <form onSubmit={handleSubmitNewToto}>

29.

Add

new task

30. <div className="modal-action">

31.

32. value={newTaskValue}

33. onChange={(e) =>

setNewTaskValue(e.target.value)}

34. required

35. className="input input-bordered

input-primary w-full" />

36.