Báo cáo môn công nghệ net web bán Đồ công nghệ Đã qua sử dụng

React TypeScript React TypeScript kết hợp sức mạnh của React với TypeScript, cung cấp một framework hiện đại để xây dựng giao diện người dùng động và trực quan, đồng thời tăng độ an toàn

BÁO CÁO MÔN CÔNG NGHỆ NET

Web Bán Đồ Công Nghệ Đã

Qua Sử Dụng

Thực hiện: nhóm 23

Lưu Nguyễn Thế Vinh Trịnh Xuân Dương

PHÂN

CÔNG

Nội

dung

Chương 1: Phần mở đầu

Chương 2: Công nghệ đã sử dụng

Chương 3: Phân tích, thiết kế và xây dựng hệ thống Chương 4: Tổng kết

Chương 1: Phần mở đầu

Trong thời đại công nghệ phát triển nhanh chóng, nhu cầu nâng cấp thiết bị liên tục khiến nhiều sản phẩm cũ bị lãng phí, trong

khi người dùng gặp khó khăn trong việc mua bán an toàn và

hiệu quả.

Website bán đồ công nghệ cũ ra đời nhằm giải quyết vấn đề này, cung cấp nền tảng giao dịch minh bạch, hệ thống đánh giá người dùng, và phân loại sản phẩm rõ ràng Nhờ đó, giao dịch trở nên tiện lợi, an toàn, góp phần giảm rác thải điện tử và thúc đẩy lối

sống bền vững.

Firebase Storage là dịch vụ lưu trữ tệp đám mây của Google, giúp bạn lưu trữ

và quản lý các tệp như hình ảnh, video, và tài liệu trong ứng dụng Nó dễ dàng tích hợp với Firebase Authentication để xác thực người dùng và cung cấp các API đơn giản cho việc tải lên và tải xuống tệp

Điểm nổi bật và lợi ích:

• Quyền truy cập linh hoạt thông qua các quy tắc bảo mật

• Hỗ trợ tải tệp lớn và tải lên nền

• Mở rộng vô hạn nhờ vào nền tảng Google Cloud

• Dễ sử dụng với API đơn giản

• Chi phí linh hoạt chỉ tính phí theo dung lượng sử dụng

Chương 2: Công nghệ đã sử

dụng

1 Firebase

Storage

Tailwind CSS là một framework CSS utility-first, cung cấp hàng loạt các lớp tiện ích nhỏ gọn giúp xây dựng giao diện nhanh chóng và nhất quán mà không cần viết CSS tùy chỉnh

Điểm nổi bật và lợi ích:

• Hiệu suất cao: Loại bỏ CSS dư thừa khi triển khai nhờ PurgeCSS

• Utility-First: Sử dụng các lớp tiện ích như text-center, p-4, bg-blue-500 để

thiết kế trực tiếp trong HTML

• Tăng tốc phát triển: Giảm thời gian viết CSS thủ công và tăng hiệu quả làm việc

• Tối ưu hiệu suất tải trang: File CSS nhỏ gọn, chỉ chứa các lớp sử dụng

Chương 2: Công nghệ đã sử

dụng

1 Tailwind

CSS

2 React TypeScript

React TypeScript kết hợp sức mạnh của React với TypeScript, cung cấp một framework hiện

đại để xây dựng giao diện người dùng động và trực quan, đồng thời tăng độ an toàn và khả

năng bảo trì nhờ tính năng kiểm tra kiểu tĩnh của TypeScript

Điểm nổi bật và lợi ích:

• Dễ bảo trì: Code rõ ràng hơn, dễ đọc và dễ dàng mở rộng dự án lớn

• Trải nghiệm lập trình tốt hơn: IDE hỗ trợ mạnh mẽ, giúp tăng tốc phát triển

• Hỗ trợ mạnh mẽ từ IDE: Cung cấp gợi ý mã và phát hiện lỗi nhanh chóng nhờ tính năng của TypeScript

• Tăng độ an toàn cho mã nguồn: Phát hiện lỗi trước khi chạy, giảm thiểu lỗi runtime

SQL Server là hệ quản trị cơ sở dữ liệu (DBMS) của Microsoft, cung cấp giải pháp mạnh mẽ để lưu trữ, quản lý và truy vấn dữ liệu Được thiết kế để xử lý lượng dữ liệu lớn và các ứng dụng doanh nghiệp, SQL Server hỗ trợ các tính năng bảo mật, hiệu suất và mở rộng quy mô tốt

Điểm nổi bật và lợi ích:

• Tính bảo mật cao: Cung cấp các tính năng như mã hóa, xác thực người dùng và quyền truy cập chi tiết để bảo vệ dữ liệu

• Hỗ trợ SQL tiêu chuẩn: Sử dụng ngôn ngữ truy vấn SQL mạnh mẽ giúp người dùng dễ dàng thao tác với cơ sở dữ liệu

• Dễ quản lý và bảo trì: Công cụ SQL Server Management Studio (SSMS) giúp người quản trị

dễ dàng kiểm soát cơ sở dữ liệu

3 SQL Server

ASP.NET MVC là một framework phát triển ứng dụng web của Microsoft, giúp xây dựng các ứng dụng web linh hoạt, dễ bảo trì và có khả năng mở rộng Dựa trên kiến trúc MVC, ASP.NET MVC tách biệt rõ ràng các phần xử lý dữ liệu (Model), giao diện người dùng (View) và logic điều

khiển (Controller), giúp việc phát triển và bảo trì ứng dụng trở nên hiệu quả hơn

Điểm nổi bật và lợi ích:

• Kiến trúc MVC rõ ràng: Tách biệt các thành phần trong ứng dụng, giúp quản lý mã nguồn

dễ dàng và tổ chức công việc hiệu quả

• Tính mở rộng cao: Dễ dàng mở rộng và tùy chỉnh, phù hợp cho các ứng dụng lớn và phức tạp

• Quản lý URL linh hoạt: Cho phép tạo ra các URL đẹp và dễ hiểu, giúp cải thiện SEO và trải nghiệm người dùng

4 ASP.NET MVC

ASP.NET Core Identity là một thành phần (built-in) của ASP.NET Core, nó cung cấp cho bạn các tính năng đầy đủ và đa dạng về authentication Có thể như: Tạo tài khoản, login với user name

và password, cập nhật profile

Điểm nổi bật và lợi ích:

• ASP.NET Core Identity cung cấp khả năng tách biệt lưu trữ Điều này có nghĩa là ASP.NET

Core Identity cung cấp khái niệm lưu trữ riêng biệt cho thông tin nhận dạng (như tên người dùng và mật khẩu) và mã cho các triển khai bảo mật (như băm mật khẩu, xác thực mật

khẩu, v.v.)

• Khả năng phân quyền dễ dàng bằng Asp.net identity role

• Đăng nhập bằng mạng xã hội - người dùng có thể đăng nhập thông qua bên thứ ba cung

cấp xác thực như tài khoản Google, Facebook, Twitter hoặc Microsoft

4 ASP.NET CORE

IDENTITY

JSON Web Mã (JWT) là một chuẩn mở (RFC 7519) định nghĩa một cách nhỏ gọn và khép kín để truyền một cách an toàn thông tin giữa các bên dưới dạng đối tượng JSON Thông tin này có thể được xác minh và đáng tin cậy vì nó có chứa chữ ký số JWTs có thể được ký bằng một

thuật toán bí mật (với thuật toán HMAC) hoặc một public / private key sử dụng mã hoá RSA

Điểm nổi bật và lợi ích:

• Authentication (Xác thực): JWT được sử dụng để xác thực người dùng trước khi họ truy cập đến tài nguyên trên server

• Authorization (Uỷ quyền): Khi người dùng đăng nhập thành công, application có thể truy cập vào các tài nguyên thay mặt người dùng đó Các ứng dụng đăng nhập một lần (Single Sign-On SSO) sử dụng JWT thường xuyên vì tính nhỏ gọn và dễ dàng triển khai trên nhiều domain

• Trao đổi thông tin an toàn: JWT được coi là một cách trao đổi thông tin an toàn vì thông tin

đã được signed trước khi gửi đi

5.JWT

Chương 3: Phân tích, thiết

kế và xây dựng hệ thống

Sơ đồ usecase

Sơ đồ lớp của hệ thống

Sơ đồ luồng điều hướng giao

diện người dùng

Kiến trúc hệ

thống

Hệ thống dựa trên mô hình ba lớp:

• Frontend: React.js cho giao diện tương tác và thiết kế đáp ứng.

• Backend: ASP.NET Core xử lý logic nghiệp vụ và cung cấp API.

• Cơ sở dữ liệu: SQL Server để lưu trữ dữ liệu và xử lý các quan hệ.

Chương 4: Tổng kết

Kết quả đạt

được

• Website có đầy đủ các chức năng cơ bản.

• Giao diện được thiết kế tối ưu, trực quan, hiện đại, thân thiện và đáp ứng tốt, mang lại trải nghiệm người dùng chuyên nghiệp.

• Website có phân quyền người dùng giúp tăng cường bảo mật và dễ dàng quản lý, kiểm soát đăng nhập.

Hạn chế

• Vẫn chưa tối ưu phần lọc và tìm kiếm sản phẩm

• Một số tính năng của phần mềm có hiệu năng không được tốt.

• Chưa hoàn thiện các chức năng mở rộng cho phần đăng nhập (quên mật khẩu, gửi email, )

• Admin Dashboard vẫn còn đơn điệu và chưa có thống kê mỗi tháng

• Chưa hoàn thiện phần thanh toán sản phẩm

• Web vẫn còn những bug nhỏ ở phần front end

• Khi số lượng sản phẩm hoặc người dùng tăng mạnh, việc xử lý dữ liệu trong SQL Server và giao diện React có thể bị chậm nếu không tối ưu truy vấn và caching.

Hướng phát

triển

• Thêm các phương thức thanh toán (Momo, ngân hàng)

• Tối ưu tìm kiếm và lọc sản phẩm

• Cải thiện hiệu năng của Web

• Cải thiện giao diện

Demo sản

phẩm

THANK YOU