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

BO GIAO DUC VA DAO TAO

TRUONG DAI HOC NHA TRANG KHOA CONG NGHE THONG TIN

ĐẠI HỌC NHA TRANG

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

BO GIAO DUC VA DAO TAO

TRUONG DAI HOC NHA TRANG KHOA CONG NGHE THONG TIN

ĐẠI HỌC NHA TRANG

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

Khanh Hoa — 01/2023

NHAN XET CUA GIANG VIEN

Điểm tông kết:

GIẢNG VIÊN HƯỚNG DẪN

(Kỹ và ghi rõ họ tên)

LOICAMON _

Trước hệt, em xin bay to 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ó dip tich 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 đụ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 quá trình thực tập và hoà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 quá 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

Khanh Hoa, thang | nam 2023 Sinh viên thực hiện

Giang

Lé Truong Giang

LOI CAM ON 7 CHUONG 1: BAO CAO TONG HOP 10 1.1 Giới thiệu về công ty 10

1.2 Nội dung thực tập 10 HN .r nh 10 1.2.2 Lịch làm việc tại HƠi tHỰC ÍẬP cong hao 10 LQ3 NAG 1s n6 A,Ạ,4AA II

2.1 Giới thiệu về React 14

2.1.1 Tổng quan về ÑeqCt ST EEEHEn HH HH nai 14 2.1.2 Lý do nên dùng N€QCI Q2 QQSSnHSSn HS SH KTS v14 1 HH Hy rà 14

2.1.3 KẾI luậH HH He 14

2.2 Tổng quan về TypeScript 15 2.3 Giới thiệu Nex(t.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 - 5 22T 22222 tgrrrrrryu 19

3.1 Công cụ sử dụng: o0 HH cọ TH 0 50 4 9 19 3.2 Bài tập cá nhân tại công ty 19 3.2.1 Todo list co bản với JSOII-S€TVT L1 2.12201112111211 1121111811151 11 k2 19 3.2.2 Đăng nhập và đăng ky với Json-S€TV€T 0 22 2211222122111 222212 24 3.3 Trang Recently viewed cia dw an ABC Todo LiS( s-2 555 s5 s 30

CHƯƠNG 4: KÉT LUẬN VÀ HƯỚNG PHÁT TRIẾN 5- <-sesess 34 4.1 Kết luận d «se e9 ELeEEgEEs re preree 34

4.2 Hướng phát triển dd

IV.308I2089:7.09083 01m 35

CHUONG 1: BAO CAO TONG HOP

1.1 Giới thiệu về công ty

Tên công ty: ABC Software Solutions

Dia chi: 02 Duong Tố Hữu, Phước Hai, Nha Trang, Khánh Hòa 650000 Email: hello@abcsoftwarecompany.com/

Website: https://abcsoftwarecompany.com/ Giới thiệu về công ty:

ABC SofRware 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/Dich 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

- Tén dé tai: Thiét ké trang Recently viewed cho dự án ABC Todo-lfst

- Thoi gian thyc tap: 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 Lich lam 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à

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

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ề 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 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, 1nterfaces và modules trong TypeSeript

2 Học thư viện| Từ ngày : - Tìm hiểu về React va các khái React 04/12/2023 niệm cơ ban cua no nhu component,

https://react.d | đến ngày: state, props

evAearn 08/12/2023 | - 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ác thanh phan React

- Tim hiéu vé viéc quan ly state trong React va cach su dung hooks (useState, useEffect)

3 Làm các bài| Từ ngày : - Làm quen với việc xây dựng một

cơ bản về| J1/12/2023 | img dung Tic-Tac-Toe sử dụng

React đến ngày: React

(TicTocTac) 15/12/2023 - Hiểu cách tạo và sử dụng các

https://react.d component trong React ev/learn/tutori

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

cur kiên

CHUONG 2: CO SO LY THUYET

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 đụ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

211 Te ong 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 qua React ciing str dung Virtual DOM, mét biéu dién cia DOMI trong bộ nhớ, để tối ưu hóa hiệu suất của ứng dụng

CHƯƠNG 2: 2.1

- 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ễ đà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àng hơn

10

- Thw vién manh mé: React duge két hop voi cac thr vién khac nhu Redux dé quan 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.13 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 đữ 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 đụng lớn và để bảo trì hơn

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

- Kiểu dữ liệu nh: TypeScript hỗ trợ kiểu đữ 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

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 đễ đà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, va cac trình biên dich JavaScript nhu Babel

Cộng đồng va 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 cua 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 Nex(.js

Next.js là một amework React được sử đụ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 đựa trên cầu trúc thư mục của dự án

12

- Tao trang tinh (Static Site Generation - SSG): Next.js cho phép tao trang tinh trước (pre-render) các trang web, giúp cải thiện hiệu suất bằng cách giảm thoi gian tai trang va tang kha năng tương tác

- Tich hop Server-side Rendering (SSR): Next.js hé tro 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

- Quan ly trang thai (State Management): Next.js khéng ép buGéc su dụng bất kỳ thư viện quản lý trạng thái cu 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 dé quản lý trạng thái của ứng dụng

- _ Hỗ trợ TypeScript: Nextjs hỗ trợ TypeScript natively, cho phép sử dụng kiểu di 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ú: Nextjs có một cộng đồng lớn và năng động, đồng thời có tài liệu chỉ tiết giúp người phát triển dé dang 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

trúc theo cách dé 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

PS D:\Thiet-ke-WEB> npx create-next-app my-next-app

Would you like to use k No

Would you like to use k No Would you like to use L Lo Would you like to use ? No

Would you like to use ? (recommended) No

Would you like to customize the default (C@/+)?

Creating a new Next.js app in P

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:/⁄1ocalhost:3000](http://localhost:3000) dé xem ứng dụng

14

II:

Figma : Figma là một công cụ thiết kế giao diện người dùng (U]) va tao 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

npx : la m6t céng cu di kem voi Node.js, cho phép bạn chạy các ửng dụng hoặc công cu 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 minh voi React va Next.js

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 đði mã nguồn của đự án một cách hiệu quả 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 co ban với json-server

Giới thiệu:

15

- Nén Tang: Ung dung Todo List duge phat trién str dung 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, xoá

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

{ getAllTodos } { ITask } AddTask TodoList

Home() { getAllTodos(); (

className= className=

className= Todo list

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

o_ Khi nhấn vào button Add new task sé hién thi ra Modal với chức nang thêm nhiệm vụ mới

1ó