CHƯƠNG 4 THỰC NGHIỆM VÀ KẾT QUẢ
4.5. Quy trình thực nghiệm lần 2
4.5.10. Triển khai ứng dụng website
Việc xây dựng một website áp dụng mơ hình kinh tế chia sẻ, ứng dụng học sâu với đề xuất bài viết dựa trên thói quen người dùng là một chức năng mở rộng. Website chú trọng đến việc tạo ra một môi trường để kết nối giữa khách hàng và nhà thiết kế, qua những bài viết của nhà thiết kế đăng lên website.
4.5.10.1. Lược đồ Use Case (Use Case Diagram)
Hình 4.101: Usecase Diagram của ứng dụng website Interior Design. uc Interior Design uc Interior Design
Interior Design's Website
Guest Admin Customer Designer Login Register Login with Google
View List Post Search with keywords
Comments for Post Vote for Posts Save favorite Posts
Manage Account
Review favorite Posts
Edit profile
Update password
Update avatar
Register new Admin
Authenticated User
:Authenticated User Review viewed Posts
View Posts Statistic
Classification images
Save prediction results Manage Posts
Book appointment View Post's Detail
Like Post
Unlike Post
Manage Users Login with Local
acount
Create/ Edit/ Delete Posts.
Use the Interior Design classification System.
View List Post View List User
View User statistics
View Statistics View Statistics of
Featured Posts
Logout
View List Designer View User Account
«include» «include» «include» «include» «include» «extend»
Trang | 150
Phần đặc tả của lược đồ có trong tập tài liệu Đặc tả yêu cầu phần mềm (SRS) đính kèm.
4.5.10.2. Sơ đồ thực thể (ERD)
• Sơ đồ thực thể:
Trang | 151
• Mơ tả từng bảng trong sơ đồ
Bảng 4.15: Bảng mô User.
Tên bảng User
Thuộc tính Kiểu dữ liệu Mơ tả
userID String Khóa chính
displayName String Tên hiển thị
about String Mô tả sơ lược
birthDate Datetime Ngày sinh
gender String Giới tính
role String Vai trị
tages String Quyền
emai String Địa chỉ emal
address String Địa chỉ nhà
avartarURL String Đường dẫn đến hình ảnh
Bảng 4.16: Bảng mơ tả CommentsDetails
Tên bảng CommentsDetails
Thuộc tính Kiểu dữ liệu Mô tả
createdDate Datetime Thời điểm tạo bình luận
content String Nội dung bình luận
postID String Khóa chính bài viết
authorID String Khóa chính người bình luận
authorAvartar String Ảnh đại diện người bình luận
rated Number Số sao được bình chọn
liked Array Mảng chứa các khóa chính
Trang | 152
Bảng 4.17: Bảng mơ tả Post.
Tên bảng Post
Thuộc tính Kiểu dữ liệu Mô tả
postID String Khóa chính bài viết
title String Tựa đề bài viết
createDate Datetime Ngày tạo bài
updateDate Datetime Ngày chỉnh sửa bài
summary String Nội dung tổng quan bài
content String Nội dung chính bài
keywords String Các từ khóa trong bài
likeCount Number Số lượng lượt thích
authorID String Khóa chính tác giả
category String Tên của phong các thiết kế
gallery Array Mảng các đường dẫn hình
ảnh
pattern Array Mảng các hoa văn có trong
bài
status String Trạng thái bài viết
mainColor Array Mảng các màu sắc chủ đạo
authorAvartar String Ảnh đại diện của tác giả
displayNameAuthor String Tên hiển thị của tác giả
liked Array Mảng chứa khóa của
người thích
thumbnail String Hình ảnh tượng trưng
averageRating Number Trung bình số lượt bình
chọn
Bảng 4.18: Bảng mơ tả PostHistory.
Tên bảng PostHistory
Thuộc tính Kiểu dữ liệu Mơ tả
id String
Khóa chính bảng lưu lịch sử lượt xem và lượt thích của người dùng qua các bài viết.
idCus String Khóa chính người dùng.
viewdPost Array Mảng chứa các khóa chính
Trang | 153
likedPost Array Mảng chứa các khóa chính
bài viết đã thích.
Bảng 4.19: Bảng mô tả Catergory.
Tên bảng Category
Thuộc tính Kiểu dữ liệu Mơ tả
cateID String Khóa chính của các loại
phong cách thiết kế nội thất.
name String Tên của các loại phong
cách thiết kế nội thất.
summary String Tổng quan các loại phong
cách thiết kế nội thất.
description_first String Đoạn mô tả đầu tiên.
description_second String Đoạn mô tả thứ hai.
image_feature Array Mảng các đường dẫn hình
ảnh đặc trưng.
image Array Mảng các đường dẫn hình
ảnh mô tả.
Bảng 4.20: Bảng mô tả PredictResult.
Tên bảng PredictResult
Thuộc tính Kiểu dữ liệu Mơ tả
id String Khóa chính bảng chứa kết
quả dự đốn
imageUrl String Đường dẫn đến hình ảnh dự
đốn
idUser String Khóa chính người sử dụng
resultImage String Kết quả dự đốn hình ảnh
Bảng 4.21: Bảng mô tả Appointment.
Tên bảng Appointment
Thuộc tính Kiểu dữ liệu Mơ tả
id String Khóa chính các lịch hẹn
idCus String Khóa chính của khách hàng
idDes String Khóa chính của kiến trúc sư
dateApp Datetime Ngày đặt lịch hẹn
Trang | 154
4.5.10.3. Cài đặt môi trường phát triển
Cài đặt các công cụ, môi trường phát triển sau:
Tools, framwork Name
Front-end Angular 11
Back-end ExpressJS
DBMS Firebase
Source Control Github
IDE Visual Studio Code
4.5.10.4. Front End
• Cài đặt
Cơng cụ Angular CLI - Angular Command Line Interface - ra đời hỗ trợ khởi tạo, sinh các component cũng như kiểm thử và triển khai ứng dụng.
Angular CLI thực chất là một Node.js package, cài đặt thông qua trình quản lý package của Node.js - npm. Mở cửa sổ console và gõ vào như sau:
npm install -g @angular/cli
Kiểm tra cài đặt thành công và số phiên bản bằng cách nhập:
Trang | 155
Hình 4.103: Xem phiên bản Angular .
• Cấu trúc
- e2e: Thư mục này dùng để chứa các tập tin dành cho mục đích testing.
- node_modules: Chứa các module cần thiết cho ứng dụng Angular của
chúng ta.
- src: Đây là thư mục sẽ chứa toàn bộ source code của ứng dụng Angular.
- .editorconfig: Chứa các cấu hình liên quan đến phần Editor để chỉnh sửa
Trang | 156 - .gitignore: Đây là tập tin Metadata của Git, chứa thông tin những tập tin
hoặc thư mục sẽ bị ignore không được commit lên Git Repository. - angular.json: Đây là tập tin chứa cấu hình cho Angular CLI, giúp chúng
ta có thể build ứng dụng Angular.
- karma.conf.js: Tập tin cấu hình cho Karma, liên quan nhiều đến phần
testing.
- package-lock.json: Dùng để lock version cho các Node.js module
dependencies.
- package.json: Tập tin cấu hình cho Node.js module dependencies.
4.5.10.5. Back End
• Cài đặt
Đầu tiên mở file cửa sổ terminal trong Visual Studio Code, gõ lệnh:
npm init
Trong quá trình cài đặt, cmd yêu cầu ta nhập những thông tin liên quan đến dự án như: name, version, description.... Kết thúc bước này ta có một file package.json.
Sau đó cài đặt Framework Express bằng câu lệnh:
npm install --save express
Trang | 157 - node_modules: chứa core framework và các thư viện.
- routes: định nghĩa URL và method.
- index.js: là một file quan trọng, có nhiệm vụ kết nối tất cả mọi thứ để
ứng dụng có thể chạy một cách chính xác. - package.json: file định nghĩa các module.
- service: dùng để liên kết với FireBase
- controller: dùng để chứa các file controller.js
Trang | 158
4.5.10.6. Các giao diện của ứng dụng website
• Màn hình đăng nhập.
Hình 4.104: Giao diện đăng nhập của web.
• Màn hình đăng ký
Trang | 159
• Màn hình trang chủ.
Trang | 160
• Màn hình trang profile.
Hình 4.107: Màn hình trang Profile.
• Màn hình trang chi tiết bài viết.
Trang | 161
• Màn hình trang dự đốn kết quả sử dụng học sâu.
Trang | 162