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..........................
Trang 1BỘ 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
Trang 2LỜ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.
Trang 3ĐÁNH GIÁ CỦA ĐƠN VỊ THỰC TẬP 1 Thái độ tác phong trong thời gian thực tập:
Trang 4ĐÁ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:
………
……… ……… 2 Kiến thức chuyên môn:
……… ………
………
3 Nhận thức thực tế:
……… ………
………
4 Đánh giá khác:
……… ………
………
5 Đánh giá chung kết quả thực tập:
……… ………
……… ……… ,ngày…………tháng……….năm………
Giảng viên hướng dẫn (Ký tên, ghi rõ họ tên)
Trang 5TRƯỜ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ọ
tên)
1
Tuần 1 (Từ ngày 20/5đến ngày
đến ngày 2/6)
Tìm hiểu về React
3
Tuần 3 (Từ ngày 3/6 đến ngày 9/6)
Tìm hiểu về Prisma
Trang 64
Tuần 4 (Từ ngày 10/6 đến ngày 16/6)
Thiết kế bố cục cho trang
5
Tuần 5 (Từ ngày 17/6 đến ngày 23/6)
Vẽ sơ đồ mô hình hóa cho hệ thống
6
Tuần 6 (Từ ngày 24/6 đến ngày 30/6)
Cài đặt và cấu hình công cụ phát triển (IDE, server, framework)
7
Tuần 7 (Từ ngày 1/7 đến ngày 7/7)
Phát triển Front-end và Back-end
8
Tuần 8 (Từ ngày 8/07
đến ngày 14/07)
Kiểm thử chức năng và giao diện
9
Tuần 9 (Từ ngày 15/07
đến ngày 21/07)
Triển khai lên server
10
Tuần 10 (Từ ngày 22/7 đến ngày 28/7)
Tổng hợp, viết báo cáo
Trang 7MỤ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.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
Trang 81.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
Trang 9Hì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
Trang 10MỞ ĐẦ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
2 Mục tiêu thực tập
Tiếp cận môi trường làm việc thực tế, có cơ hội quan sát, hiểu được những yêu cầu của nghề nghiệp và tự đánh giá những ưu khuyết điểm của bản thân để có kế hoạch phát huy, khắc phục trước khi thực sự bước vào môi trường làm việc thực tế.Tạo ra cái nhìn tổng quan về một môi trường thực tế là như thế nào để sinh viên ghi chú lại làm tư liệu cho mỗi cá nhân
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
Trang 11CHƯƠ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 - Website: https://hoasonit.com/
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
Trang 12- 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
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
Trang 13tô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 Kỹ năng, kiến thức cần có:
- Có kiến thức cơ bản về javascript và ReactJS - Có tư duy lập trình tốt
- Có kĩ năng giao tiếp và làm việc nhóm.
Trang 14CHƯƠ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
Trang 151.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
Trang 16- <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
Trang 17- 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
Trang 18- 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
Trang 19- 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
Trang 20- Để 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
Trang 21- 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
Trang 22• 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