26.1.0 .f Cumulative Layout Shift
49 Bảng thông tin khách hàng
số thông tin liên lạc cơ bản để tiện việc phục vụ khách hàng. Khách hàng thực hiện mua hàng thông qua việc thành lập các hóa đơn qua quá trình thanh toán với nhân viên bán hàng. Khách hàng có thể trả lại hàng hóa mình không vừa ý trong những khuôn khổ điều kiện của cửa hàng. Việc thực hiện trả hàng sẽ được xác định bằng hóa đơn mua hàng của sản phẩm cần trả.
16.4 Kiến trúc hệ thống
Hình 50:Kiến trúc hệ thống
Kiến trúc hệ thống bao gồm ba phần chính:
• Client: là nơi người dùng trực tiếp sử dụng hệ thống trên trình duyệt. Tại đây, Website nhận các yêu cầu từ người dùng, sau đó gửi các Request lên Server để thực hiện chức năng tương ứng. Các request này có thể là các request thao tác trên dữ liệu, hoặc request để server trả về giao diện, ...
• Server: là nơi xử lý các yêu cầu được gửi từ Website. Tùy theo từng yêu cầu mà Server sẽ gửi các dữ liệu (đã qua xử lý) hay các giao diện về trình duyệt người dùng. Khi xử lý dữ liệu, thực chất là dữ liệu này được cung cấp từ server database, server hệ thống không lưu trực tiếp dữ liệu, chỉ xử lý dữ liệu.
• Database: là nơi lưu trữ toàn bộ dữ liệu của người dùng, khi cần sẽ nhận yêu cầu từ Server và gửi về Server dữ liệu tương ứng.
• Google Cloud Flatform: được cung cấp bởi Google, là một bộ dịch vụ điện toán đám mây module bao gồm điện toán, lưu trữ dữ liệu, phân tích dữ liệu và học máy. Trong hệ thống được dùng để gọi Google Maps API.
Tóm lại, khi người dùng thao tác trên trình duyệt, Website dựa vào thao tác này gửi các Request tương ứng. Khi Request đến được Server, Server tiến hành xử lý Request này, tùy theo yêu cầu mà có thể đơn giản trả về một giao diện hoặc gọi đến Database để Database trả về dữ liệu cần thiết, sau đó xử lý dữ liệu đó và cũng trả về Website để hiển thị lên cho người dùng. Kết quả là người dùng thực hiện được chức năng mong muốn.
Phần E
Hiện thực
17 Quản lý mã nguồn 17.1 Git
Git là một trong những hệ thống quản lý phiên bản phân tán (Distributed Version Control System) nổi bận hiện nay và từ lâu đã trở thành một trong những hệ thống quản lý phiên bản phân tán cực kì phổ biến nhờ sự hỗ trợ mạnh mẽ của mình. Git cung cấp cho mỗi lập trình viên kho lưu trữ (repository) riêng chứa toàn bộ lịch sử thay đổi.
VCS là viết tắt của Version Control System là hệ thống kiểm soát các phiên bản phân tán mã nguồn mở. Đọc cái tên VCS đã phần nào nói lên tính năng của hệ thống này, VCS sẽ lưu lại toàn bộ mã nguồn và ghi chép đầy đủ trạng thái thay đổi của các file, với từng trạng thái thay đổi mỗi file, đều được log lại thành một phiên bản.
Git đơn giản là một hệ thống thuộc dạng VCS. Tức là ngoài Git ra vẫn còn nhiều hệ thống khác tương tự như Git. Nhưng ngày nay (2021), khi nói tới VCS, người ta chỉ hình dung tới Git. Với Git, chúng ta có thể: lưu trữ source code, quản lý phiên bản source code, merge code (ghép code) từ nhiều người. TheoKhảo sát của Stack Overflowhơn87%nhà lập trình sử dụng Git.
17.2 Github
Github là một trang web cung cấp dịch vụ cloud-base dựa trên Git để giúp cho người lập trình có thể lưu trữ source code của họ. Không chỉ là lưu trữ, Github còn hỗ trợ người dùng theo dõi code cũng như xem và quản lý các thay đổi đã được thực hiện trên source code đó . Giao diện Github rất thân thiện với người dùng, nhà lập trình dù là người chưa thực sự làm quen với lập trình cũng có thể dễ dàng sử dụng.
18 Cấu trúc mã nguồn 18.1 Frontend
Cấu trúc mã nguồn Frontend gồm 2 phần chính:node_modulevàsrc.
Cụ thể, trong thư mục frontend chứa cái phần chính sau:
• node_modules: Đây là thư mục chứa các thư viện cảunodeđược cài đặt và dùng trong hệ thống phía người dùng.
• public: Đây là thư mục chứa file HTML khi cần sẽ được render ra giao diện người dùng. • src: Đây là thư mục chứa toàn bộ mã nguồn chính viết bằng JavaScript sử dụng thư viện
ReactJS và MobX, bao gồm các thư mục con như sau:
- common: chứa những gì tổng quát nahats dùng chung cho cả hệ thống: các hàm tổng quát (ví dụ như hàm gửi các request có kèm token,...), các hằng số, các hàm bổ trợ utils,... .
- module: chứa mã nguồn cho từng module con trong hệ thống (cụ thể bên dưới hình) - themes: chứa các mã nguồn liên quan đến giao diện (ví dụ các files css, scss, ... )
Thư mụcmodulessẽ chứa nhiều module con. Một module con được cấu trúc như sau: • components: chứa những component con dưới dạng file.tsxđể cấu tạo thành một page. • pages: chứa những page sẽ được tạo ra trong module này.
• .dto.ts: chứa các dto được sử dụng trong module. • .enum.ts: chứa các enum được sử dụng trong module. • .service.ts: chứa mã nguồn để gọi api từ backend.
• .store.ts: chứa mã nguồn để gọi dữ liệu sau khi lấy được từ service và lưu vào store để sử dụng trong các page.
Cấu trúc mã nguồn Frontend gồm 2 phần chính:node_modulevàsrc.
Cụ thể, trong thư mục frontend chứa cái phần chính sau:
• node_modules: Đây là thư mục chứa các thư viện cảunodeđược cài đặt và dùng trong hệ thống phía người dùng.
• public: Đây là thư mục chứa file HTML khi cần sẽ được render ra giao diện người dùng. • src: Đây là thư mục chứa toàn bộ mã nguồn chính viết bằng JavaScript sử dụng thư viện
ReactJS và MobX, bao gồm các thư mục con như sau:
- common: chứa những gì tổng quát nahats dùng chung cho cả hệ thống: các hàm tổng quát (ví dụ như hàm gửi các request có kèm token,...), các hằng số, các hàm bổ trợ utils,... .
- module: chứa mã nguồn cho từng module con trong hệ thống (cụ thể bên dưới hình) - themes: chứa các mã nguồn liên quan đến giao diện (ví dụ các files css, scss, ... )
Thư mụcmodulessẽ chứa nhiều module con. Một module con được cấu trúc như sau: • components: chứa những component con dưới dạng file.tsxđể cấu tạo thành một page. • pages: chứa những page sẽ được tạo ra trong module này.
• .dto.ts: chứa các dto được sử dụng trong module. • .enum.ts: chứa các enum được sử dụng trong module. • .service.ts: chứa mã nguồn để gọi api từ backend.
• .store.ts: chứa mã nguồn để gọi dữ liệu sau khi lấy được từ service và lưu vào store để sử dụng trong các page.
18.2 Backend
Hình 55:Thư mục modules
18.2.1 Tổng quan những file chính của mã nguồn Nest
• app.controller.spec.ts: Có nhiệm vụ viết unit-test cho các controller. • app.module.ts: Root module của ứng dụng.
• app.service.ts: Service chứa các logic mà controller sẽ dùng đến. • main.ts: Sử dụng NestFactory để khởi tạo ứng dụng.
18.2.2 Module
Hình 56:Tổng quan một module
Module có nhiệm vụ đóng gói những logic liên quan của các chức năng cần triển khai đến client một cách độc lập. Một module trong Nest là class được define với @Module().Một file module cơ bản sẽ như sau:
1 ### s r c / modules / p r o d u c t s / p r o d u c t s . module . t s : 2 import { Module } from '@ n e s t j s / common';
3 import { TypeOrmModule } from '@ n e s t j s / typeorm '; 4 import { ProductsService } from '. / p r o d u c t s . s e r v i c e ';
5 import { ProductsController } from '. / p r o d u c t s . c o n t r o l l e r '; 6 import { Product } from ' . . / . . / e n t i t i e s / p r o d u c t / p r o d u c t . e n t i t y '; 7 import { CategoriesModule } from '. . / c a t e g o r i e s / c a t e g o r i e s . module '; 8 import { AccountsModule } from '. . / a c c o u n t / a c c o u n t s . module ';
9 import { StoreproductsModule } from '. . / s t o r e p r o d u c t s / s t o r e p r o d u c t s . module←֓
'; 10
11 @Module( { 12 imports: [
13 TypeOrmModule.forFeature( [Product] ) ,
14 CategoriesModule, 15 AccountsModule, 16 StoreproductsModule 17 ] , 18 providers: [ProductsService] , 19 exports: [ProductsService] , 20 controllers: [ProductsController] , 21 } ) 22 e x p o r t c l a s s ProductsModule { }
Trong 1 module sẽ có các thành phần chính sau đây:
• providers: Có nhiệm vụ khởi tạo và cung cấp các service mà sẽ được controller trong module sẽ sử dụng đến.
• controller: Có nhiệm vụ khởi tạo những controller đã được xác định trong module. • imports: Có nhiệm vụ import những thành phần của một module khác mà module sẽ sử
dụng.
• exports: Có nhiệm vụ export các thành phần của provider và các module khác sẻ import để sử dụng.
Chi tiết chức năng các thành phần của module:
• providers: Là nơi cung cấp các serivce, repositories, factories, helpers,... cho controller trong một module sử dụng. Đây cũng là nơi sẽ chứa những logic xử lý đã được tách biệt với controller.
• controller: Là nơi xử lý các request và trả về response cho người dùng. Mỗi controller sẽ chứa các router thực hiện hành động và nhiệm vụ khác nhau được yêu cầu từ client.14
18.2.3 Các thư mục phụ trợ khác
• ./f iles, ./templates, ./uploads: Các thư mục để chứa cái file tĩnh, các file được upload hoặc templates cho email, ...
• ./src/auth: Thư mục hiện thực các phương thức xác thực client
• ./src/common: Thư mục chứa các phương thức, các dữ liệu được dùng chung ở nhiều nơi trong mã nguồn
• ./src/dto: Thư mục chứa các file định dạng dữ liệu giúp việc request/response thuận tiện hơn với dữ liệu mong muốn
• .src/entities: Thư mục chứ các file thể hiện dạng dữ liệu để ánh xạ vối database và thể hiện các ràng buộc dữ liệu cũng như các mỗi quan hệ giữa các thực thể với nhau, ...
14Framework Nestjs, Võ Văn Danh, https://viblo.asia/p/framework-nestjs-gioi-thieu-part-1-GrLZDkAwKk0
19 Giao diện người dùng