29 trang 21 lượt tải

Báo cáo đồ án: Xây dựng ứng dụng web coffee môn Công nghệ phần mềm | Trường Đại học Kiến trúc Đà Nẵng

41

Công nghệ phần mềm là lĩnh vực nghiên cứu, phát triển và áp dụng các phương pháp, quy trình, công cụ và nguyên tắc để phát triển và duy trì các sản phẩm phần mềm. Tài liệu được sưu tầm gồm 29 trang, giúp các bạn nắm vững kiến thức, rèn luyện kỹ năng và đạt được kết quả tốt trong học tập. Mời các bạn đón xem!

Môn: Công nghệ phần mềm (KT01) 10 tài liệu

Trường: Đại học Kiến trúc Đà Nẵng 254 tài liệu

Tác giả:

Profile

My Lữ

1 tháng trước
Danh sách Quiz
/29
TRƯỜNG ĐẠI HỌC KIẾN TRÚC ĐÀ NẴNG
----------------------------------------
BÁO CÁO KẾT QUẢ ĐỒ ÁN CÔNG
NGHỆ PHẦN MỀM
ĐỀ TÀI : XÂY DỰNG TRANG WEB COFFEE
GIẢNG VIÊN : PHẠM THỊ DUNG
Sinh Viên Thực Hiện : Nguyễn Công Anh
I. CHƯƠNG 1 : GIỚI THIỆU VÀ HƯỚNG DẪN CÀI ĐẶT MÔI
TRƯỜNG THỰC HIỆN ĐỀ TÀI .......................................................... 3
1.Khái niệm về công nghệ phần mềm và react js .............................. 3
2. Xu hướng phát triển Công Nghệ Phần Mềm và React js............. 4
3. Hướng dẫn cài đặt môi trường React js ........................................ 5
4. Tổng quan về đề tài xây dựng ứng dụng Coffee ......................... 14
II. CHƯƠNG 2: SƠ ĐỒ CÁC BIỂU ĐỒ TUẦN TỰ, USE CASE ,
DỮ LIỆU, CÁC BẢN THIẾT KẾ TRANG DEMO .......................... 17
A. 1.Sơ đồ biểu đồ tuần tự ................................................................. 17
B. 2. Sơ đồ Use Case ........................................................................... 18
C. 3. Sơ đồ dữ liệu .............................................................................. 19
III. CHƯƠNG 3: TRÌNH BÀY DEMO THỰC HIỆN ...................... 29
I. CHƯƠNG 1 : GIỚI THIỆU VÀ HƯỚNG DẪN CÀI ĐẶT MÔI
TRƯỜNG THỰC HIỆN ĐỀ TÀI
1.Khái niệm về công nghệ phần mềm và react js
Công nghệ phần mềm là lĩnh vực nghiên cứu, phát triển và áp dụng các
phương pháp, quy trình, công cụ và nguyên tắc để phát triển và duy trì các
sản phẩm phần mềm. Trong thế giới công nghệ ngày nay, công nghệ phần
mềm đóng vai trò quan trọng trong việc xây dựng các ứng dụng và hệ
thống phức tạp, từ các ứng dụng di động đến các hệ thống máy chủ lớn.
Trong lĩnh vực phát triển web, ReactJS là một trong những công nghệ phổ
biến và mạnh mẽ nhất hiện nay. ReactJS là một thư viện JavaScript mã
nguồn mở được phát triển bởi Facebook, được sử dụng để xây dựng các
giao diện người dùng (UI) tương tác trong các ứng dụng web.
Môi trường ReactJS là một cộng đồng lớn và đầy đủ các tài nguyên, công
cụ và thư viện hỗ trợ để phát triển các ứng dụng web hiệu quả và linh hoạt.
Dưới đây là một số điểm nổi bật về môi trường ReactJS: Component-
Based Architecture: ReactJS áp dụng một kiến trúc dựa trên thành phần
(component-based architecture), cho phép phân chia giao diện người dùng
thành các thành phần độc lập và tái sử dụng được. Điều này giúp tăng
cường khả năng bảo trì và mở rộng của mã nguồn.
Virtual DOM: ReactJS sử dụng Virtual DOM để tối ưu hóa hiệu suất của
ứng dụng. Virtual DOM là một phiên bản nhẹ của DOM (Document
Object Model) mà ReactJS sử dụng để theo dõi thay đổi và cập nhật giao
diện người dùng một cách hiệu quả.
JSX (JavaScript XML): ReactJS sử dụng JSX, một phần mở rộng của
JavaScript cho phép viết HTML trong JavaScript. Điều này giúp tạo ra mã
nguồn dễ đọc và dễ hiểu hơn, đồng thời cung cấp tính linh hoạt trong việc
xây dựng giao diện người dùng.
Huge Ecosystem: ReactJS có một cộng đồng phong phú và mạnh mẽ, với
nhiều công cụ, thư viện và tài liệu hỗ trợ. Điều này giúp cho việc học và
phát triển ứng dụng ReactJS trở nên dễ dàng hơn.
React Native: ReactJS không chỉ hỗ trợ phát triển ứng dụng web mà còn
là cơ sở cho React Native, một framework cho phép phát triển ứng dụng
di động sử dụng ReactJS và JavaScript.
Môi trường ReactJS không ngừng phát triển và trở nên mạnh mẽ hơn qua
từng phiên bản, mang lại nhiều cơ hội và tiềm năng cho các nhà phát triển
web.
2. Xu hướng phát triển Công Nghệ Phần Mềm và React js
Xu hướng phát triển trong lĩnh vực công nghệ phần mềm và môi trường
ReactJS đang tiếp tục thay đổi và phát triển theo thời gian. Dưới đây là
một số xu hướng đáng chú ý:
- Phát triển Cross-Platform: Xu hướng phát triển các ứng dụng có
khảnăng chạy trên nhiều nền tảng khác nhau đang trở nên phổ biến. Sự ra
đời của các framework như React Native và Flutter cung cấp cho các nhà
phát triển khả năng xây dựng ứng dụng di động cho cả iOS và Android từ
một mã nguồn duy nhất.
- Mai mối giữa Frontend và Backend: Ngày càng có sự tích hợp chặt
chẽhơn giữa phần frontend và backend của ứng dụng. Các kiến trúc như
MERN (MongoDB, Express.js, React.js, Node.js) hoặc MEAN
(MongoDB, Express.js, AngularJS hoặc Angular, Node.js) đang trở nên
phổ biến, giúp cho việc phát triển và triển khai ứng dụng trở nên dễ dàng
hơn.
- Tối ưu hóa hiệu suất và trải nghiệm người dùng: Với sự gia tăng
củacác ứng dụng web và di động, tối ưu hóa hiệu suất và trải nghiệm
người dùng là một xu hướng quan trọng. Các kỹ thuật như Progressive
Web Apps (PWA) và Single Page Applications (SPA) đang được ưa
chuộng để cung cấp trải nghiệm người dùng mượt mà và tốc độ tải trang
nhanh chóng.
- Sự phát triển của Machine Learning và AI: Machine Learning (ML)
vàArtificial Intelligence (AI) đang ngày càng được tích hợp vào các ứng
dụng phần mềm. ReactJS không chỉ cung cấp khả năng tích hợp dễ dàng
với các thư viện và framework ML/AI mà còn cung cấp các công cụ phát
triển đồng thời hiệu quả.
- Tăng cường bảo mật và quản lý dữ liệu: Với sự gia tăng của các
cuộctấn công mạng và quy định về bảo vệ dữ liệu cá nhân như GDPR,
việc tăng cường bảo mật và quản lý dữ liệu trở thành một ưu tiên hàng
đầu trong việc phát triển ứng dụng. Các công nghệ như JSON Web Tokens
(JWT), OAuth và HTTPS đang được sử dụng rộng rãi để bảo vệ thông tin
người dùng.
- Những xu hướng này đang cùng nhau định hình bức tranh phát
triểncủa lĩnh vực công nghệ phần mềm và môi trường ReactJS, tạo ra
những cơ hội mới và thách thức cho các nhà phát triển và doanh nghiệp.
3. Hướng dẫn cài đặt môi trường React js
Bước 1 - Tạo Thư mục gốc
Tạo một thư mục với tên reactApp trên màn hình để cài đặt tất cả các tệp
được yêu cầu, sử dụng lệnh mkdir. C:\Users\username\Desktop>mkdir
reactApp
C:\Users\username\Desktop>cd reactApp
Để tạo bất kỳ mô-đun nào, cần phải tạo tệp package.json . Do đó, sau khi
Tạo thư mục, chúng ta cần tạo một tệp package.json . Để làm như vậy,
bạn cần chạy lệnh npm init từ dấu nhắc lệnh.
C:\Users\username\Desktop\reactApp>npm init
Lệnh này hỏi thông tin về mô-đun như tên gói, mô tả, tác giả, v.v. bạn có
thể bỏ qua các thông tin này bằng cách sử dụng tùy chọn –y.
C:\Users\username\Desktop\reactApp>npm init -y
Bước 2 - cài đặt React và react dom
Kể từ khi nhiệm vụ chính của chúng tôi là để cài đặt ReactJS, cài đặt nó,
và các gói dom của nó, sử dụng cài đặt phản ứng và phản ứng-dom lệnh
của NPM tương ứng. Bạn có thể thêm các gói chúng tôi cài đặt vào tệp
package.json bằng cách sử dụng tùy chọn --save .
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save
Hoặc, bạn có thể cài đặt tất cả chúng bằng một lệnh duy nhất
nhưC:\Users\username\Desktop\reactApp>npm install react react-dom --
save
Bước 3 - Cài đặt webpack
Vì chúng tôi đang sử dụng webpack để tạo gói cài đặt gói, webpack-
devserver và webpack-cli.
C:\Users\username\Desktop\reactApp>npm install webpack --save
C:\Users\username\Desktop\reactApp>npm install webpack-dev-server -
-save
C:\Users\username\Desktop\reactApp>npm install webpack-cli --save
Hoặc, bạn có thể cài đặt tất cả chúng bằng một lệnh duy nhất như-
C:\Users\username\Desktop\reactApp>npm install webpack
webpackdev-server webpack-cli --save
Bước 4 - Cài đặt babel
Cài đặt babel và các plugin babel-core, babel-loader, babel-preset-env,
babel-preset-react và, html-webpack-plugin
C:\Users\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Users\username\Desktop\reactApp>npm install babel-loader --
savedev
C:\Users\username\Desktop\reactApp>npm install babel-preset-env -
save-dev
C:\Users\username\Desktop\reactApp>npm install babel-preset-react -
save-dev
C:\Users\username\Desktop\reactApp>npm install html-webpack-plugin
--save-dev
Hoặc, bạn có thể cài đặt tất cả chúng bằng một lệnh duy nhất như -
C:\Users\username\Desktop\reactApp>npm install babel-core
babelloader babel-preset-env
Bước 5 - Tạo tệp
Để hoàn tất quá trình cài đặt, chúng ta cần tạo một số tệp cụ thể là
index.html, App.js, main.js, webpack.config.js và,. babelrc . Bạn có thể
tạo các tệp này theo cách thủ công hoặc sử dụng dấu nhắc lệnh .
C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc
Bước 6 - Đặt Trình biên dịch, Máy chủ và Bộ tải
Mở tệp webpack-config.js và thêm mã sau. Chúng tôi đang đặt điểm nhập
webpack thành main.js. Đường dẫn đầu ra là nơi ứng dụng đi kèm sẽ được
phân phát. Chúng tôi cũng đang đặt máy chủ phát triển thành cổng 5000 .
Bạn có thể chọn bất kỳ cổng nào bạn muốn.
webpack.config.js const path = require('path'); const
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './main.js', output: { path:
path.join(__dirname, '/bundle'),
filename: 'index_bundle.js'
},
devServer: {
inline: true,
port: 5000
},
module: {
rules: [ { test:
/\.jsx?$/, exclude:
/node_modules/, loader:
'babel-loader', query: {
presets: ['es2015', 'react']
}
}
]
},
plugins:[ new
HtmlWebpackPlugin({
template: './index.html'
})
]
}
Mở package.json và xóa "test" "echo \" Lỗi: không chỉ định thử nghiệm \
"&& thoát 1" bên trong đối tượng "scripts" . Chúng tôi đang xóa dòng này
vì chúng tôi sẽ không thực hiện bất kỳ thử nghiệm nào trong hướng dẫn
này. Thay vào đó, hãy thêm lệnh bắt đầu và xây dựng . "start": "webpack-
dev-server --mode development --open --hot",
"build": "webpack --mode production"
Bước 7 - index.html
Đây chỉ là HTML thông thường. Chúng tôi đang đặt div id = "app" làm
phần tử gốc cho ứng dụng của mình và thêm tập lệnh index_bundle.js , là
tệp ứng dụng đi kèm của chúng tôi.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'index_bundle.js'></script>
</body>
</html>
Bước 8 - App.jsx và main.js
Đây là thành phần React đầu tiên. Chúng tôi sẽ giải thích sâu hơn về các
thành phần của React trong chương tiếp theo. Thành phần này sẽ hiển thị
Hello World . App.js import React, { Component } from 'react'; class App
extends Component{ render(){ return( <div>
<h1>Hello World</h1>
</div>
);
}
}
export default App;
Chúng tôi cần nhập thành phần này và hiển thị nó thành phần tử Ứng dụng
gốc của chúng tôi , để chúng tôi có thể nhìn thấy nó trong trình duyệt.
main.js
import React from 'react'; import
ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
Lưu ý - Bất cứ khi nào bạn muốn sử dụng thứ gì đó, bạn cần nhập nó
trước. Nếu bạn muốn làm cho thành phần có thể sử dụng được trong các
phần khác của ứng dụng, bạn cần xuất thành phần đó sau khi tạo và nhập
thành phần đó vào tệp nơi bạn muốn sử dụng.
Tạo một tệp có tên .babelrc và sao chép nội dung sau vào tệp đó.
{
"presets":["env", "react"]
}
Bước 9 - Chạy máy chủ
Quá trình thiết lập hoàn tất và chúng ta có thể khởi động máy chủ bằng
cách chạy lệnh sau.
C:\Users\username\Desktop\reactApp>npm start
Nó sẽ hiển thị cổng mà chúng ta cần mở trong trình duyệt. Trong trường
hợp của chúng tôi, đó là http: // localhost: 5000 / . Sau khi chúng ta mở
nó, chúng ta sẽ thấy kết quả sau.
Bước 10 - Tạo gói
Cuối cùng, để tạo gói, bạn cần chạy lệnh xây dựng trong dấu nhắc lệnh
dưới dạng:
C:\Users\Tutorialspoint\Desktop\reactApp>npm run build
Thao tác này sẽ tạo gói trong thư mục hiện tại như được hiển thị bên dưới.
Sử dụng lệnh create-react-app
Thay vì sử dụng webpack và babel, bạn có thể cài đặt ReactJS đơn giản
hơn bằng cách cài đặt ứng dụng tạo-phản ứng .
Bước 1 - cài đặt ứng dụng tạo-phản ứng
Duyệt qua màn hình và cài đặt Ứng dụng Tạo React bằng dấu nhắc lệnh
như hình dưới đây
C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app
Thao tác này sẽ tạo một thư mục có tên là ứng dụng của tôi trên màn hình
và cài đặt tất cả các tệp cần thiết trong đó.
Bước 2 - Xóa tất cả các tệp nguồn
Duyệt qua thư mục src trong thư mục ứng dụng của tôi đã tạo và xóa tất
cả các tệp trong đó như hình dưới đây
C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y
Bước 3 - Thêm tệp
Thêm tệp có tên index.css và index.js trong thư mục src dưới dạng:
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul >
index.js Trong tệp index.js, hãy thêm mã sau import React from
'react'; import ReactDOM from 'react-dom';
import './index.css';
Bước 4 - Chạy dự án
Cuối cùng, chạy dự án bằng lệnh start.
npm start
4. Tổng quan về đề tài xây dựng ứng dụng Coffee
Mục tiêu của dự án là xây dựng một ứng dụng web cho phép người dùng
đặt hàng coffee trực tuyến. Người dùng có thể truy cập ứng dụng, xem
menu của cửa hàng coffee, lựa chọn các loại cofee và các món phụ khác
nhau, thêm vào giỏ hàng và thực hiện thanh toán.
• Chức Năng Chính Của Người Dùng:
- Hiển thị menu: Hiển thị danh sách các loại coffee và các món
phụ có sẵn để người dùng lựa chọn.
- Thêm vào giỏ hàng: Cho phép người dùng thêm các sản phẩm
vào giỏ hàng và điều chỉnh số lượng.
- Quản lý giỏ hàng: Cho phép người dùng xem và chỉnh sửa
giỏ hàng của họ trước khi thanh toán.
-Thanh toán: Cho phép người dùng nhập thông tin thanh toán và
hoàn tất đơn hàng và người dùng có thể thanh toán online hoặc thanh
toán sau khi nhận hàng.
- Đăng Nhập , Đăng Ký: Sau khi đăng ký thành công người
dùng bắt buộc phải xác thực email của người dùng đã đăng ký thì
mới được vào ứng dụng để mua sản phẩm.
- Tìm kiếm sản phẩm: Tính năng tìm kiếm cho phép người
dùng tìm kiếm các sản phẩm coffee theo từ khóa, ví dụ như tên loại
coffee.
- Xem thông tin sản phẩm: Tính năng này cho phép người
dùng xem thông tin chi tiết về một sản phẩm coffee cụ thể.
- Quản Lý Lịch Sử Mua Hàng : Xem được tất cả các sản phẩm
của tất cả mà người dùng đó đã mua
- Thông Tin Người Dùng: Có thể xem được các thông tin cá
nhân của mình và chỉnh sửa
• Chức Năng Chính Của Admin:
- Quản lý Sản Phẩm : Thêm , sửa, xóa sản phẩm và có thể biết
được 1 ngày được thêm bao nhiêu sản phẩm và đó là những loại nào
- Quản Lý Người Dùng: Thêm , Sửa, Xóa người dùng và có
thể phân quyền người dùng
- Quản Lý Đơn Hàng : Có thể kiểm tra được đơn hàng này đã
thanh toán hay chưa và giao hàng có thành công hay không - Quản
Lý Lịch Sử Mua Hàng : Xem được tất cả các sản phẩm của tất cả
người dùng đã mua
• Chức Năng Chính Của Shipper:
-Quản Lý Đơn Hàng : Có thể kiểm tra xem đơn hàng này đã thanh
toán hay chưa và Shipper là người cập nhật các đơn hàng đó là thành
công hay thất bại
• Thiết kế giao diện:
- Thiết kế giao diện người dùng thân thiện, dễ sử dụng và trựcquan.
- Sử dụng các thành phần UI như buttons, forms, modals để tạo
ratrải nghiệm người dùng tốt nhất.
• Quản lí trạng thái ứng dụng:
- Sử dụng ReactJS để quản lý trạng thái ứng dụng một cách hiệu
quả, bao gồm trạng thái của giỏ hàng, thông tin sản phẩm và
thông tin thanh toán.
• Tính linh hoạt và mở rộng:
- Xây dựng ứng dụng một cách linh hoạt và mở rộng, cho phép
thêm các tính năng mới như đăng nhập, theo dõi đơn hàng, hoặc
tích hợp hệ thống thanh toán trực tuyến.
II. CHƯƠNG 2: SƠ ĐỒ CÁC BIỂU ĐỒ TUẦN TỰ, USE CASE ,
DỮ LIỆU, CÁC BẢN THIẾT KẾ TRANG DEMO
1.Sơ đồ biểu đồ tuần tự
2. Sơ đồ Use Case
- Dưới đây là sơ đồ UseCase của đề tài:
3. Sơ đồ dữ liệu
- Dưới đây là một sơ đồ dữ liệu đơn giản cho cơ sở dữ liệu của ứng
dụngCoffee bao gồm các bảng chính và mối quan hệ giữa chúng:
+ Bảng OrderItem:
- Khoá chính: id
- Khóa phụ: productId (tham chiếu đến bảng Product)
- Thuộc tính: quantity + Bảng Product: - Khoá chính: id
- Khóa phụ: categoryId (tham chiếu đến bảng Category)
- Thuộc tính: name, price, description, imgUrl +Bảng Category:
- Khoá chính: id - Thuộc tính: name + Bảng User:
- Khoá chính: Id
- Thuộc tính: firstName, lastName, email, password, isverifyEmail,role,
verifyEmailToken + Bảng Orders:
- Khoá chính: OrderId

Tài liệu khác của Đại học Kiến trúc Đà Nẵng

Tài liệu liên quan: