BÁO CÁO THỰC TẬP TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG WEB QUẢN LÝ CÔNG VIỆC CÁ NHÂN

MỤC LỤC MỞ ĐẦU.............................................................................................. 1 CHƯƠNG 1: GIỚI THIỆU CHUNG VỀ CÔNG TY.............................. 2 1.1. Thông tin tổng quát .................................................................. 2 1.2. Tóm lược quá trình hình thành và phát triển............................. 2 1.3. Lĩnh vực hoạt động................................................................... 3 1.4. Sơ đồ tổ chức nhân sự............................................................... 3 1.5. Vị trí thực tập tại công ty .......................................................... 4 1.1. Các khái niệm cơ bản về lập trình Front-end............................. 5 1.1.1. Các khái niệm cơ bản về Front-end ........................................ 5 1.1.2. Các công cụ và ngôn ngữ Front-end ....................................... 6 1.2. Tìm hiểu về ReactJS ................................................................. 9 1.2.1. Khái niệm về ReactJS............................................................ 9 1.2.2. Các thành phần của ReactJS.................................................. 9 1.4. Tìm hiểu về Prisma................................................................. 13 1.4.1. Khái niệm cơ bản: ............................................................... 13 1.4.2. Prisma Schema:................................................................... 13 1.4.3. Prisma Studio...................................................................... 14 1.4.4. Data Source Support ........................................................... 14 1.5. Cài đặt và cấu hình công cụ phát triển..................................... 14 1.5.1. Công cụ phát triển............................................................... 14 1.5.2. Cài đặt framework .............................................................. 14 1.6. Xác định các chức năng .......................................................... 15 1.6.1. Xác định Actor .................................................................... 15 1.6.2. Sơ đồ Use case ..................................................................... 15 1.6.3. Xác định các chức năng ....................................................... 16 1.6.4. Bảng đặc tả Use case............................................................ 16 1.6.5. Sơ đồ Class Diagram............................................................ 28 1.6.6. Sơ đồ Sequence Diagram ..................................................... 28 CHƯƠNG 3: GIAO DIỆN TRANG WEB............................................ 31 3.1. Cấu trúc source code .............................................................. 31 3.2. Giao diện................................................................................ 31 3.2.1. Trang chủ ........................................................................... 31 3.2.2. Trang Impotant Task .......................................................... 32 3.2.3. Trang Completed Task ........................................................ 32 3.2.4. Trang Incomplete Tasks ...................................................... 33 3.2.5. Trang Profile....................................................................... 33 CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC ................................................. 34 4.1. Thuận lợi và khó khăn............................................................ 34 4.1.1. Thuận lợi ............................................................................. 34 4.1.2. Khó khăn ............................................................................. 34 4.2. Những điểm học hỏi được ....................................................... 34 4.3. Hạn chế.................................................................................. 35 4.4. Hướng phát triển.................................................................... 35 TÀI LIỆU THAM KHẢO..........................

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC GIA ĐỊNH KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP TỐT NGHIỆP

XÂY DỰNG ỨNG DỤNG WEB QUẢN LÝ CÔNG VIỆC

CÁ NHÂN

Giảng viên hướng dẫn: LÊ HUỲNH PHƯỚC

Sinh viên thực hiện: NGÔ TRUNG NGHĨA

MSSV: 2104110019 Lớp: K15DCPM01 Khóa: 15

Thành phố Hồ Chí Minh, tháng 7 năm 2024

LỜI CẢM ƠN

Trong quá trình học tập tại khoa Công nghệ thông tin, trường Đại học Gia Định,

em đã được thầy cô giảng dạy tận tình cũng như truyền đạt những kiến thức bổ ích và rất quan trọng đối với quá trình đi làm của em sau này Em xin chân thành gửi lời cảm ơn đến ban giám hiệu nhà trường cùng quý thầy cô đã tận tâm giảng dạy và giúp em hoàn thành tốt khóa học

Em xin kính chúc quý thầy cô luôn luôn khỏe mạnh, vui vẻ và đạt được nhiều thành tích cao trong công tác giảng dạy Chúc trường Đại học Gia Định sẽ luôn

là nền tảng vững chắc cho nhiều thế hệ sinh viên trên bước đường học tập Cuối cùng, em xin gửi lời cảm ơn đến ban lãnh đạo và các anh chị tại công ty TNHH Công Nghệ Hoa Sơn Trong quá trình thực tập tại đây, em đã có cơ hội hiểu rõ hơn về những kiến thức đã được học cũng như thực tế áp dụng như thế nào Bên cạnh đó, sự chỉ dẫn và giúp đỡ của các anh chị trong công ty đã giúp

em học hỏi thêm nhiều bài học kinh nghiệm quý báu Đó chắc chắn sẽ là một phần hành trang quan trọng giúp em có thể tự tin bước vào đời

Vì kiến thức có hạn nên trong quá trình hoàn thiện báo cáo thực tập em không tránh khỏi những sai sót, rất mong mọi người thông cảm và bỏ qua

Em xin chân thành cảm ơn

ĐÁNH GIÁ CỦA ĐƠN VỊ THỰC TẬP

1 Thái độ tác phong trong thời gian thực tập:

ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN

1 Thái độ tác phong trong thời gian thực tập:

TRƯỜNG ĐẠI HỌC GIA ĐỊNH

KHOA CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

BÁO CÁO THỰC TẬP TỐT NGHIỆP HÀNG TUẦN

Họ và tên SV: NGÔ TRUNG NGHĨA MSSV: 2104110019

Lớp: K15DCPM01

Giảng viên hướng dẫn: LÊ HUỲNH PHƯỚC

Tên doanh nghiệp (đơn vị) đến thực tập: Công ty TNHH Công Nghệ Hoa Sơn

Địa chỉ: 109 Cộng Hoà, Phường 12, Quận Tân Bình

tên)

Nhận xét của giảng viên hướng dẫn (Ký tên và ghi rõ họ

MỤC LỤC

MỞ ĐẦU 1

CHƯƠNG 1: GIỚI THIỆU CHUNG VỀ CÔNG TY 2

1.1 Thông tin tổng quát 2

1.2 Tóm lược quá trình hình thành và phát triển 2

1.3 Lĩnh vực hoạt động 3

1.4 Sơ đồ tổ chức nhân sự 3

1.5 Vị trí thực tập tại công ty 4

1.1 Các khái niệm cơ bản về lập trình Front-end 5

1.1.1 Các khái niệm cơ bản về Front-end 5

1.1.2 Các công cụ và ngôn ngữ Front-end 6

1.2 Tìm hiểu về ReactJS 9

1.2.1 Khái niệm về ReactJS 9

1.2.2 Các thành phần của ReactJS 9

1.4 Tìm hiểu về Prisma 13

1.4.1 Khái niệm cơ bản: 13

1.4.2 Prisma Schema: 13

1.4.3 Prisma Studio 14

1.4.4 Data Source Support 14

1.5 Cài đặt và cấu hình công cụ phát triển 14

1.5.1 Công cụ phát triển 14

1.5.2 Cài đặt framework 14

1.6 Xác định các chức năng 15

1.6.1 Xác định Actor 15

1.6.2 Sơ đồ Use case 15

1.6.3 Xác định các chức năng 16

1.6.4 Bảng đặc tả Use case 16

1.6.5 Sơ đồ Class Diagram 28

1.6.6 Sơ đồ Sequence Diagram 28

CHƯƠNG 3: GIAO DIỆN TRANG WEB 31

3.1 Cấu trúc source code 31

3.2 Giao diện 31

3.2.1 Trang chủ 31

3.2.2 Trang Impotant Task 32

3.2.3 Trang Completed Task 32

3.2.4 Trang Incomplete Tasks 33

3.2.5 Trang Profile 33

CHƯƠNG 4: KẾT QUẢ ĐẠT ĐƯỢC 34

4.1 Thuận lợi và khó khăn 34

4.1.1 Thuận lợi 34

4.1.2 Khó khăn 34

4.2 Những điểm học hỏi được 34

4.3 Hạn chế 35

4.4 Hướng phát triển 35

TÀI LIỆU THAM KHẢO 36

MỤC LỤC HÌNH ẢNH

Hình 1: Logo của công ty 2

Hình 2: Sơ đồ tổ chức nhân sự 3

Hình 3: HTML – CSS – JS 6

Hình 4: Prima schema 14

Hình 5: Các lựa chọn sau khi chạy lệnh tạo dự án 15

Hình 6: Sơ đồ Use case 15

Hình 7: Sơ đồ Class Diagram 28

Hình 8: Sơ đồ Sequency Sign up 28

Hình 9: Sơ đồ Sequency Sign in 29

Hình 10: Sơ đồ Sequency Create Task 29

Hình 11: Sơ đồ Sequency Update Task 29

Hình 12: Sơ đồ Sequency Delete Task 30

Hình 13: Sơ đồ Sequency Update Profile 30

Hình 14: Cấu trúc source code 31

Hình 15: Trang chủ 31

Hình 16: Trang Impotant Task 32

Hình 17: Trang Completed Task 32

Hình 18: Trang Incomplete Tasks 33

Hình 19: Trang Profile 33

MỞ ĐẦU

1 Lý do thực tập

Quá trình học tập tại trường đã cho mỗi sinh viên một lượng kiến thức lý thuyết

về chuyên ngành mà bản thân đã lựa chọn Những lý thuyết ấy có thể giúp chúng

em đủ kiến thức để đọc hiểu tài liệu, hiểu biết những khái niệm đặc thù của ngành nghề nhưng như thế vẫn chưa đủ Đối với xã hội ngày càng phát triển hiện nay thì việc cọ xát thực tế cùng với những kiến thức mà sinh viên được tiếp thu trên giảng đường thì thực sự rất cần thiết Hoạt động thế này sẽ giúp sinh viên biết được kiến thức trên giảng đường khác với việc thực hành tại công

ty là như thế nào

Chính vì vậy các trường đại học hiện nay đã áp dụng các hoạt động thực tập thế này cho các sinh viên có thể nhanh chóng tiếp thu kiến thức thực tế và thực hành những gì mình đã học.Thực tập còn giúp sinh viên không còn bỡ ngỡ khi kết thúc chương trình học tại trường mà vẫn không xác định được là bản thân sẽ làm gì sau đó, làm tăng sự tự tin trong nghề nghiệp cho mỗi người, để chúng

em có thể vượt qua nỗi sợ hãi không tên khi phải đối mặt với những môi trường làm việc khác nhau

3 Kết cấu của bài báo cáo

Nội dung bài báo cáo được xây dựng gồm các phần sau:

- Chương 1: Giới thiệu chung về công ty

- Chương 2: Nội dung thực tập tại công ty

- Chương 3: Giao diện trang web

- Chương 4: Kết quả đạt được

CHƯƠNG 1: GIỚI THIỆU CHUNG VỀ CÔNG TY

1.1 Thông tin tổng quát

Hình 1: Logo của công ty

- Tên công ty: Công ty TNHH Công Nghệ Hoa Sơn

- Tên quốc tế: HOA SON TECHNOLOGY COMPANY LIMITED

- Tên viết tắt: HOA SON TECHNOLOGY CO., LTD

- Loại hình doanh nghiệp: Công ty trách nhiệm hữu hạn

- Địa chỉ: 109 Cộng Hòa, Phường 12, Q.Tân Bình, TP Hồ Chí Minh

1.2 Tóm lược quá trình hình thành và phát triển

- Công ty TNHH Công Nghệ Hoa Sơn, thương hiệu HOASON INFOTECH được thành lập từ năm 2014 khi nhận thấy kỷ nguyên số hóa và quản trị thông minh bắt đầu phát triển, công ty mong muốn tạo ra các hệ thống phần mềm quản trị hệ thống thông minh hơn để gia tăng hiệu quả lãnh đạo trong hoạt động sản xuất kinh doanh của doanh nghiệp

- Ngoài ra công ty còn xây dựng đội ngũ Marketing thương hiệu, sản phẩm trên môi trường Internet thông qua các công cụ gia tăng nhận diện, tiếp cận khách hàng trên môi trường mạng

- HOASON INFOTECH phát triển được trên thị trường cho đến ngày nay

là phải trải qua nhiều chặng đường khó khăn khi phải tìm tòi ra nhiều giá trị mới cho khách hàng của mình, từ đó niềm tin của khách hàng ngày một lớn hơn để tin tưởng giao nhiều dự án

1.3 Lĩnh vực hoạt động

- Cung cấp các phần mềm cho doanh nghiệp như: phần mềm bán hàng, chấm công, tính lương…

- Cung cấp các giải pháp phát triển, thiết kế website, landing page, logo…

- Cung cấp, phân phối các thiết bị cho doanh nghiệp như máy chấm công, các thiết bị văn phòng

1.4 Sơ đồ tổ chức nhân sự

Hình 2: Sơ đồ tổ chức nhân sự

- Tại công ty TNHH Công Nghệ Hoa Sơn, con người luôn được đặt lên hàng đầu trong sơ đồ tổ chức Công ty coi trọng vai trò quan trọng của mỗi cá nhân và tạo ra một môi trường làm việc đầy tôn trọng và đồng hành Mỗi bộ phận và nhóm làm việc được phân công nhiệm vụ và chức năng riêng, nhưng chúng cũng hiểu rằng chỉ thông qua sự hỗ trợ và cộng tác, chúng ta mới có thể đạt được mục tiêu phát triển công ty và mang lại sự hài lòng cho khách hàng

Công ty chúng tôi tự hào sở hữu đội ngũ nhân viên tài năng và giàu kinh nghiệm Với kiến thức và tầm nhìn sâu sắc trong lĩnh vực công nghệ, chúng tôi cam kết cung cấp các sản phẩm và dịch vụ cao cấp nhất Chúng

tôi không chỉ tạo ra những giải pháp tiên tiến để giúp khách hàng tiết kiệm thời gian, mà còn tăng cường hiệu quả làm việc của họ Sự nỗ lực không ngừng nghiên cứu và phát triển là động lực của chúng tôi, nhằm đáp ứng một loạt các nhu cầu ngày càng đa dạng của khách hàng và đồng thời tạo ra giá trị cho cộng đồng và xã hội mà chúng tôi phục vụ.

1.5 Vị trí thực tập tại công ty

Vị trí: Thực tập sinh Front-end

Mô tả công việc:

- Tìm hiểu về các sản phẩm của công ty

- Tham gia phát triển, xây dựng, cải tiến các chức năng theo yêu cầu của khách hàng

- Tham gia phân tích và hiểu các yêu cầu, phát triển và triển khai các tính năng mới

- Báo cáo công việc

CHƯƠNG 2: NỘI DUNG THỰC TẬP TẠI CÔNG TY

1.1 Các khái niệm cơ bản về lập trình Front-end

1.1.1 Các khái niệm cơ bản về Front-end

Front-end (hay còn gọi là client-side) là phần của một trang web mà người dùng có thể nhìn thấy và tương tác trực tiếp Bao gồm giao diện người dùng, nơi mà các thành phần như văn bản, hình ảnh, nút bấm và các phần tử tương tác khác được hiển thị và hoạt động Front-end được xây dựng bằng HTML, CSS và JavaScript để tạo ra giao diện thân thiện, đẹp mắt và có khả năng tương tác

Vai trò trong phát triển web:

- Tạo ra trải nghiệm người dùng (UX): Front-end đóng vai trò chính trong việc xây dựng giao diện người dùng thân thiện và dễ sử dụng Điều này bao gồm cách các phần tử được sắp xếp, tương tác và trình bày trên trang web để cung cấp trải nghiệm tốt nhất cho người dùng

- Tương tác người dùng: Qua các công nghệ như JavaScript, Front-end cho phép tạo ra các chức năng tương tác như form nhập liệu, nút bấm, hiển thị dữ liệu động mà người dùng có thể tương tác trực tiếp trên trình duyệt

- Liên kết với Back-end: Front-end tương tác với phần Back-end thông qua các yêu cầu HTTP, API để lấy và gửi dữ liệu, cập nhật

- Đảm bảo tính nhất quán và tương thích: Front-end phải đảm bảo rằng trang web hoạt động tốt trên nhiền trình duyệt khác nhau vả thiết bị có kích thước màn hình khác nhau, thông qua việc sử dụng kỹ thuật Responsive Design và Cross-Browser Compatibility

1.1.2 Các công cụ và ngôn ngữ Front-end

Hình 3: HTML – CSS – JS

HTML (HyperText Markup Language) là ngôn ngữ cơ bản và không

thể thiếu trong việc xây dựng cấu trúc cho một trang web Nó được sử dụng để đánh dấu và định nghĩa cấu trúc của trang web, bao gồm cách hiển thị và tổ chức nội dung trên trình duyệt HTML đóng vai trò quan trọng trong việc:

- Xác định cấu trúc: Nó xác định cách các phần tử trên trang web sẽ được

tổ chức, bao gồm tiêu đề, đoạn văn, danh sách, bảng, hình ảnh và nhiều thành phần khác

- Định nghĩa nội dung: HTML cho phép nhúng văn bản, hình ảnh, video, liên kết và các phần tử multimedia khác vào trang web, định nghĩa rõ ràng thông tin được hiển thị

- Tạo liên kết: Nó cung cấp khả năng tạo liên kết giữa các trang web thông qua thẻ <a>, cho phép người dùng di chuyển qua lại giữa các trang một cách thuận tiện

HTML sử dụng các thẻ để bao quát nội dung và các thuộc tính để định cấu trúc Ví dụ:

- <html>: Thẻ bao bọc toàn bộ nội dung HTML trên trang

- <head>: Khu vực chứa thông tin không hiển thị trực tiếp cho người dùng, bao gồm tiêu đề của trang

- <body>: Phần chứa nội dung hiển thị trên trang web <h1>, <p>, <img>,

<a>: Các thẻ đánh dấu các phần tử khác nhau như tiêu đề, đoạn văn, hình ảnh, và liên kết tương ứng

HTML là nền tảng cơ bản nhưng quan trọng, cung cấp cấu trúc căn bản cho trang web, làm cho nội dung trở nên có tổ chức và dễ đọc cho trình duyệt

và người dùng

CSS (Cascading Style Sheets) là ngôn ngữ được sử dụng để điều chỉnh

giao diện và hiển thị của trang web Nó cho phép người phát triển web tạo ra giao diện đẹp mắt, điều chỉnh màu sắc, kiểu dáng và bố cục của các phần tử HTML trên trang

- Điều chỉnh giao diện: CSS cho phép xác định cách mà các phần tử HTML sẽ hiển thị trên trình duyệt, bao gồm cỡ chữ, màu sắc, khoảng cách, đường viền và hình dạng

- Tạo kiểu dáng và bố cục: Nó giúp tạo ra bố cục trực quan và thu hút người dùng thông qua việc xác định vị trí, kích thước và tỷ lệ của các phần tử trên trang

- Responsive Design: CSS cũng hỗ trợ Responsive Design, cho phép trang web tự động điều chỉnh để phản hồi với kích thước màn hình khác nhau của các thiết bị

CSS sử dụng các quy tắc để áp dụng kiểu dáng cho các phần tử HTML

Ví dụ:

- Color, font-size, background-color, border, và padding là các thuộc tính của CSS để điều chỉnh màu sắc, kích thước, đường viền, nền, và khoảng trắng xung quanh các phần tử HTML

- p, h1, và box là các lựa chọn (selectors) để áp dụng các quy tắc CSS cho các phần tử hoặc lớp cụ thể trên trang

CSS cung cấp khả năng linh hoạt trong việc tạo ra giao diện đa dạng và tùy chỉnh cho trang web, giúp cải thiện trải nghiệm người dùng và tạo ra giao diện thẩm mỹ hơn

JavaScript là một ngôn ngữ lập trình mạnh mẽ và phổ biến trong việc

phát triển Front end của trang web Nó chủ yếu được sử dụng để tạo ra các chức năng tương tác động và thao tác với nội dung trên trình duyệt, cải thiện trải nghiệm người dùng và đem lại sự động đậy cho trang web Vai trò của JavaScript trong Front-end:

- Tương tác người dùng: JavaScript cho phép tạo ra các tương tác trực tiếp

và động như form nhập liệu, nút bấm, hiển thị dữ liệu động, và các hiệu ứng trực quan mà người dùng có thể tương tác trên trình duyệt mà không cần tải lại trang web

- Manipulation của DOM: JavaScript có thể thao tác trên cấu trúc của trang web thông qua Document Object Model (DOM), cho phép thay đổi nội dung, cấu trúc, hoặc kiểu dáng của các phần tử trên trang

- DOM là chữ viết tắt của Document Object Model, là một giao diện lập trình ứng dụng (API) Thông thường, DOM có dạng một cây cấu trúc dữ liệu, được dùng để truy xuất các tài liệu dạng HTML và XML Mô hình DOM độc lập với hệ điều hành và dựa theo kỹ thuật lập trình hướng đối tượng để mô tả tài liệu

- Xử lý sự kiện: Nó cho phép xử lý các sự kiện như click chuột, di chuột qua phần tử, nhập liệu từ bàn phím, và nhiều sự kiện khác để thực hiện các hành động tương ứng

- Giao tiếp với Back-end: JavaScript cũng có khả năng gửi và nhận dữ liệu

từ Back end thông qua AJAX (Asynchronous JavaScript and XML) hoặc Fetch API, cho phép trao đổi dữ liệu với máy chủ một cách không đồng

bộ mà không cần tải lại toàn bộ trang

Ví dụ: addEventListener là một phương thức của JavaScript để lắng nghe các sự kiện xảy ra trên các phần tử

- document.getElementById được sử dụng để chọn phần tử dựa trên ID và thực hiện các hành động khi sự kiện xảy ra

JavaScript là một phần không thể thiếu trong việc tạo ra trải nghiệm người dùng tốt hơn và tạo ra các chức năng tương tác động trên trang web

1.2 Tìm hiểu về ReactJS

1.2.1 Khái niệm về ReactJS

- ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client nữa

- ReactJS là một thư viện JavaScript chuyên giúp các nhà phát triển xây dựng giao diện người dùng hay UI Trong lập trình ứng dụng front-end, lập trình viên thường sẽ phải làm việc chính trên 2 thành phần sau: UI và xử lý tương tác của người dùng UI là tập hợp những thành phần được nhìn thấy được trên bất kỳ một ứng dụng nào, ví dụ có thể

kể đến bao gồm: menu, thanh tìm kiếm, những nút nhấn, card…

1.2.2 Các thành phần của ReactJS

Components

- Component là một khối xây dựng độc lập và tái sử dụng, được sử dụng

để xây dựng giao diện người dùng Một ứng dụng React được phân chia thành các thành phần nhỏ hơn, gọi là các component, và mỗi component có thể chứa các component con

- Các component trong React có thể được sử dụng lại và tổ chức thành một cấu trúc cây phân cấp Các component con có thể nhận dữ liệu từ component cha thông qua props và truyền dữ liệu xuống các component con khác Điều này giúp tái sử dụng code, tăng tính module và quản lý giao diện một cách dễ dàng và linh hoạt trong ứng dụng React

Props và State Trong React, props (viết tắt của "properties") và state là hai khái niệm quan trọng để quản lý dữ liệu và giao diện trong các component

• Trong component con, props có thể truy cập thông qua đối

số của hàm hoặc thông qua props object

- Để cập nhật state, ta sử dụng phương thức setState trong các component dạng lớp hoặc sử dụng hàm trả về từ useState trong các component dạng hàm

Hook

- React Hook là một tính năng giới thiệu từ phiên bản React 16.8 trở đi, cho phép sử dụng các tính năng của React như trạng thái (state) và hiệu ứng (effect) trong các component viết dưới dạng hàm thay vì viết dưới dạng lớp

React Router

- React Hook là một tính năng giới thiệu từ phiên bản React 16.8 trở đi, cho phép sử dụng các tính năng của React như trạng thái (state) và hiệu ứng (effect) trong các component viết dưới dạng hàm thay vì viết dưới dạng lớp

- React Router giúp xây dựng các ứng dụng đơn trang (Single-Page Applications-SPA) trong React dễ dàng hơn bằng cách cung cấp các thành phần như BrowserRouter, Route, Link, và Switch

1.3 Tìm hiểu về NextJS

Next.js là một framework xây dựng trên React.js, do công ty Vercel phát triển Nó được thiết kế để giúp các nhà phát triển dễ dàng tạo ra các ứng dụng web hiện đại với hiệu suất cao và trải nghiệm người dùng tốt Dưới đây là một số điểm nổi bật của Next.js:

• Render phía máy chủ (Server-side Rendering - SSR): Next.js hỗ trợ SSR, cho phép nội dung trang web được render trên máy chủ trước khi gửi đến trình duyệt Điều này giúp cải thiện hiệu suất tải trang và SEO

• Render phía khách hàng (Client-side Rendering - CSR): Ngoài SSR, Next.js cũng hỗ trợ CSR, cho phép các trang web động được render trên phía khách hàng sau khi tải trang

• Render tĩnh (Static Site Generation - SSG): Next.js hỗ trợ SSG, cho phép tạo ra các trang tĩnh mà không cần máy chủ Điều này rất hữu ích cho các trang web cần tải nhanh và không yêu cầu thay đổi nội dung liên tục

• Phân trang tự động: Next.js có hệ thống phân trang tự động thông qua thư mục `pages` Mỗi tệp trong thư mục này sẽ tự động trở thành một route trong ứng dụng

• API routes: Next.js cho phép tạo các API routes dễ dàng, giúp phát triển các endpoint API trong cùng một dự án mà không cần phải thiết lập một server riêng biệt

• Hot Module Replacement (HMR): Next.js hỗ trợ HMR, giúp cập nhật các thay đổi trong mã nguồn mà không cần phải tải lại toàn bộ trang web, giúp tăng tốc độ phát triển

• Tích hợp CSS và Sass: Next.js hỗ trợ tích hợp CSS và Sass một cách trực tiếp, giúp quản lý styles dễ dàng hơn

• Tối ưu hóa hình ảnh: Next.js cung cấp công cụ tối ưu hóa hình ảnh tự động, giúp cải thiện tốc độ tải trang

• Hỗ trợ TypeScript: Next.js có hỗ trợ tích hợp sẵn cho TypeScript, giúp xây dựng các ứng dụng với kiểu dữ liệu mạnh mẽ và tránh lỗi trong quá trình phát triển

1.4 Tìm hiểu về Prisma

Prisma là một ORM (Object-Relational Mapping) thế hệ tiếp theo cho Node.js và TypeScript Nó giúp các nhà phát triển dễ dàng tương tác với cơ sở dữ liệu bằng cách cung cấp một API để truy vấn và thao tác dữ liệu Dưới đây là một số điểm nổi bật về Prisma:

1.4.1 Khái niệm cơ bản:

- ORM: Prisma cho phép ta làm việc với cơ sở dữ liệu bằng cách sử dụng các đối tượng trong ngôn ngữ lập trình của thay vì các câu lệnh SQL

- Prisma Client: Một client được tự động sinh ra từ mô hình dữ liệu, cung cấp các phương thức để thực hiện các truy vấn cơ sở dữ liệu

1.4.2 Prisma Schema:

• Prisma sử dụng một file schema (thường là `schema.prisma`)

để định nghĩa mô hình dữ liệu, các kết nối cơ sở dữ liệu, và các nhà cung cấp