Báo cáo bài tập lớn phát triển ứng dụng cho thiết bị di Động Đề tài ứng dụng mua sắm trực tuyế

Đăng nhập bằng tài khoản Google Nguyễn Mạnh Tiến 1.2 Trang chủ Hiển thị danh sách các sản phẩm, thanh tìm kiếm và các sản phẩm đề xuất cùng các bộ lọc để sử dụng Đặng Thành Long1.3 Chi t

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

KHOA CÔNG NGHỆ THÔNG TIN 1

BỘ MÔN CÔNG NGHỆ PHẦN MỀM

BÁO CÁO BÀI TẬP LỚN

PHÁT TRIỂN ỨNG DỤNG CHO THIẾT BỊ DI ĐỘNG

Đề tài: Ứng dụng mua sắm trực tuyến

Nhóm lớp học :- 07

Thành viên nhóm :- Nguyễn Mạnh Tiến –

B20DCCN595 :- Lê Văn Kiên – B20DCCN355 :- Đặng Thành Long – B20DCCN403 Thành viên báo

MỤC LỤC

DANH MỤC HÌNH ẢNH 2

DANH MỤC BẢNG BIỂU 3

Thông Tin Chung: 4

1 Chủ đề: 4

2 Danh sách Thành viên: 4

3 Đóng góp của mỗi thành viên: 4

I Giới Thiệu 6

1.1 Giới thiệu và phân tích yêu cầu ứng dụng 6

1.1.1 Giới thiệu ứng dụng 6

1.1.2 Phân tích yêu cầu ứng dụng 6

1.2 Lý do và Concept thực hiện ứng dụng: 7

1.2.1 Lý do thực hiện: 7

1.2.2 Concept thực hiện ứng dụng: 8

II Thiết Kế Ứng Dụng 9

2.1 Kiến trúc tổng quan 9

2.2 Biểu đồ Use Case tổng quan 9

2.3 Các chức năng cá nhân 10

2.3.1 Đăng nhập/ Đăng ký 10

2.3.2 Trang cá nhân 14

2.3.3 Menu/ Cài đặt/ Đăng xuất 16

2.4 Sơ đồ thực thể quan hệ (ER) 18

III Kết quả triển khai 19

3.1 Mô hình triển khai 19

3.2 Các bước cài đặt và triển khai ứng dụng 20

3.2.1 Cài đặt và Cấu hình Server (Spring Boot): 20

3.2.3 Triển khai và Quản lý ứng dụng: 21

3.3 Kết quả thực hiện được thông qua các giao diện 21

3.3.1 Giao diện chức năng Đăng nhập/ Đăng ký 21

3.3.2 Giao diện chức năng trang cá nhân 23

3.3.3 Giao diện Menu/ Cài đặt 24

3.4 Kết luận và các điểm hạn chế 25

3.5 Tài liệu tham khảo 25

1

DANH MỤC HÌNH ẢNH

Hình 2.1: Sơ đồ kiến trúc tổng quan 9

Hình 2.2: Biểu đồ Use Case tổng quan 9

Hình 2.3: Biểu đồ Use Case chi tiết chức năng Đăng ký/ Đăng nhập 10

Hình 2.4: Biểu đồ lớp phía Server cho chức năng Đăng ký/ Đăng nhập 10

Hình 2.5: Biểu đồ lớp phía Client cho chức năng Đăng ký/ Đăng nhập 11

Hình 2.6: Biểu đồ tuần tự chức năng đăng ký (1) 12

Hình 2.7: Biểu đồ tuần tự chức năng đăng ký (2) 12

Hình 2.8: Biểu đồ tuần tự chức năng đăng nhập (1) 13

Hình 2.9: Biều đồ tuần tự chức năng đăng nhập (2) 13

Hình 2.10: Biểu đồ Use Case chi tiết chức năng Trang cá nhân 14

Hình 2.11: Biểu đồ lớp chi tiết phía Server chức năng Trang cá nhân 14

Hình 2.12: Biểu đồ lớp phía Client chức năng Trang cá nhân 15

Hình 2.13: Biểu đồ tuần tự chức năng chỉnh sửa thông tin trong trang cá nhân 15

Hình 2.14: Biểu đồ Use Case chức năng Setting 16

Hình 2.15: Biểu đồ lớp phía Server chức năng Setting 16

Hình 2.16: Biểu đồ lớp phía Client chức năng Setting 16

Hình 2.17: Biểu đồ tuần tự chức năng Setting 17

Hình 2.19: Sơ đồ thực thể quan hệ (ER) 18

Hình 3.1: Giao diện đăng nhập 21

Hình 3.2: Giao diện đăng ký 21

Hình 3.3: Giao diện quên mật khẩu 22

Hình 3.4: Giao diện khôi phục mật khẩu 22

Hình 3.5: Giao diện trang thông tin cá nhân 23

Hình 3.6: Giao diện trang địa chỉ 23

Hình 3.7: Giao diện thanh Menu 24

Hình 3.8: Giao diện trang cài đặt 24

DANH MỤC BẢNG BIỂU

Bảng 1: Bảng đóng góp của các thành viên 5Bảng 2: Bảng phân tích yêu cầu ứng dụng 7

3

Thông Tin Chung:

- Lê Văn Kiên - B20DCCN355

3 Đóng góp của mỗi thành viên:

thực hiện

I Ứng dụng mua sắm

trực tuyến

1.1 Đăng nhập, đăng ký,

tạo tài khoản

Xây dựng module đăng nhập, đăng

ký, tạo tài khoản Đăng nhập bằng tài khoản Google

Nguyễn Mạnh Tiến

1.2 Trang chủ Hiển thị danh sách các sản phẩm,

thanh tìm kiếm và các sản phẩm đề xuất cùng các bộ lọc để sử dụng

Đặng Thành Long1.3 Chi tiết sản phẩm Hiển thị các thuộc tính sản phẩm,

nút đặt hàng, yêu thích, đánh giá mặthàng

Đặng Thành Long1.4 Giỏ hàng Các sản phẩm được chọn kèm theo

nút điều chỉnh số lượng, xóa sản phẩm và thanh toán

Lê Văn Kiên

1.5 Thanh toán Danh sách sản phẩm đã mua, tổng

giá tiền, hiển thị vân tay nếu tích chọn ở cài đặt

Lê Văn Kiên

1.6 Lịch sử đặt hàng Các đơn hàng đang được giao và

trạng thái đơn hàng

Lê Văn Kiên

1.7 Trang cá nhân Thông tin chi tiết cá nhân, chỉnh sửa

thông tin

Nguyễn Mạnh Tiến

1.9 Thống kê doanh thu Hiển thị biểu đồ doanh thu sản phẩm

Hiển thị thống kê mặt hàng được gợi ý chọn xem

Đặng Thành Long

Đặng Thành Long2.3 Tích hợp đề xuất sản

phẩm dựa trên xu

hướng những người

mua

Lê Văn Kiên

III Thanh toán thông

minh.

3.1 Thanh toán 1 chạm Tích hợp thanh toán sử dụng nhận

diện khuôn mặt hoặc vân tay Lê Văn Kiên

IV Thiết kế cơ sở dữ

liệu và xây dựng máy

1.1.2 Phân tích yêu cầu ứng dụng

+ Gợi ý sản phẩm dựa trên xu hướng

- Chức năng:

+ Lưu thông tin thanh toán: Cho phép người dùng lưu thông tin thànhtoán để thực hiện các giao dịch sau

+ Thanh toán 1 chạm: Tích hợp thanh toán sử dụng nhận diện khuôn mặt hoặc vân tay

- Yêu cầu bài tập lớn.

- Ứng dụng mua sắm trực tuyến đem lại nhiều lợi ích như:Với người dùng:

+ Tiện lợi và linh hoạt

+ Gợi ý sản phẩm

+ Thanh toán tiện lợi

+ Theo dõi đơn hàng

Với doanh nghiệp:

+ Mở Rộng Thị Trường và Tiếp Cận Khách Hàng.+ Tăng Tương Tác và Tăng Doanh Số Bán Hàng.+ Thu Thập Dữ Liệu và Phân Tích Thị Trường

7

1.2.2 Concept thực hiện ứng dụng:

1 Phân Tích Yêu Cầu:

- Xác định yêu cầu của người dùng: Nắm vững nhu cầu và mong muốn củangười dùng, bao gồm chức năng cần thiết, giao diện người dùng, và trải nghiệmmua sắm

2 Thiết Kế Giao Diện và Trải Nghiệm Người Dùng (UI/UX):

- Thiết kế giao diện người dùng: Tạo ra một giao diện người dùng thân thiện và

dễ sử dụng với các tính năng như tìm kiếm sản phẩm, xem chi tiết sản phẩm,quản lý giỏ hàng và thanh toán

- Trải nghiệm người dùng: Xây dựng một trải nghiệm mua sắm liền mạch từ lúcngười dùng truy cập ứng dụng đến khi họ nhận được sản phẩm

3 Phát Triển Ứng Dụng:

- Lựa chọn nền tảng và công nghệ: Chọn các công nghệ phù hợp như ngôn ngữlập trình (Java, Kotlin), framework(Spring Boot), và cơ sở dữ liệu(MySQL) đểphát triển ứng dụng

- Xây dựng tính năng chính: Phát triển các tính năng như đăng nhập, đăng ký,tìm kiếm sản phẩm, quản lý giỏ hàng, thanh toán, và xử lý đơn hàng

4 Tích hợp Các Tính Năng Đặc Biệt:

- Tích hợp AI: Phát triển và tích hợp các thuật toán AI để đề xuất sản phẩm vàcải thiện trải nghiệm mua sắm

- Thanh toán 1 chạm

5 Kiểm Thử và Tối Ưu Hóa:

- Kiểm thử chức năng: Kiểm tra các tính năng của ứng dụng để đảm bảo hoạtđộng đúng đắn và mượt mà trên các thiết bị khác nhau

- Kiểm thử tương tác người dùng: Thử nghiệm giao diện người dùng và trảinghiệm mua sắm để phát hiện và sửa lỗi

6 Triển Khai:

- Triển khai ứng dụng: Đưa ứng dụng mua sắm trực tuyến vào hoạt động trênnền tảng Android

II Thiết Kế Ứng Dụng

2.1 Kiến trúc tổng quan

Hình 2.1: Sơ đồ kiến trúc tổng quanỨng dụng được thiết kế với kiến trúc Client – Server Chúng giao tiếp với nhauthông qua Web API Phía Server được triển khai bằng Spring Boot để cung cấpAPI, sử dụng cơ sở dữ liệu MySQL để lưu trữ dữ liệu Phía Client là ứng dụngAndroid được viết bằng ngôn ngữ Kotlin, sử dụng Shared Preferences để lưu cácthông tin cần thiết trong quá trình ứng dụng hoạt động

2.2 Biểu đồ Use Case tổng quan

9

Hình 2.2: Biểu đồ Use Case tổng quan

2.3 Các chức năng cá nhân

2.3.1 Đăng nhập/ Đăng ký

2.3.1.1 Biểu đồ Use Case

Hình 2.3: Biểu đồ Use Case chi tiết chức năng Đăng ký/ Đăng nhập

2.3.1.2 Biểu đồ lớp

Phía Server:

Hình 2.4: Biểu đồ lớp phía Server cho chức năng Đăng ký/ Đăng nhập

Tầng thực thể bao gồm các thực thể liên quan: User, Account, Role, ERole,Address, UserSetting

Tầng thao tác với dữ liệu có các Interface: UserRepository, RoleRepository,AccountRepository Các lớp này kế thừa từ interface JpaRepository đã có các

11

phương thức tương tác cơ bản với cơ sở dữ liệu.

Tầng Service bao gồm các Interface: AccountService, UserService, RoleService

và các lớp Implementation của chúng Là nơi xử lý các logic nghiệp vụ cho ứngdụng

Tầng Controller bao gồm: AuthController để xử lý các request được gửi đến.Các lớp còn lại: CustomUserDetail, JwtTokenProvider, AuthenticationManager,PasswordEncoder, LoginRequest, SignUpRequest là công cụ phục vụ cho chứcnăng Đăng ký/ Đăng nhập

Phía Client:

Hình 2.5: Biểu đồ lớp phía Client cho chức năng Đăng ký/ Đăng nhập

Tầng giao diện có các trang xml Fragment: LoginFragment, SignUpFragment.Tầng Front-Controller có các lớp: LoginFragment, SignUpFragment,AuthViewModel, AuthRepository, AuthApi

Các lớp MessageResponse, TokenResponse để thể hiện dữ liệu phía Server trả

về Lớp JwtManager để quản lý (lưu và xóa) token khi người dùng đăng nhập

2.3.1.3 Biểu đồ tuần tự

Đăng ký:

Hình 2.6: Biểu đồ tuần tự chức năng đăng ký (1)

Hình 2.7: Biểu đồ tuần tự chức năng đăng ký (2)

13

Đăng nhập:

Hình 2.8: Biểu đồ tuần tự chức năng đăng nhập (1)

Hình 2.9: Biều đồ tuần tự chức năng đăng nhập (2)

2.3.2 Trang cá nhân

2.3.2.1 Biểu đồ Use Case

Hình 2.10: Biểu đồ Use Case chi tiết chức năng Trang cá nhân

2.3.2.2 Biểu đồ lớp

Phía Server:

Hình 2.11: Biểu đồ lớp chi tiết phía Server chức năng Trang cá nhân

Tầng thực thể bao gồm các lớp: User, Address

Tầng thao tác với dữ liệu gồm các Interface: AddressRepository,UserRepository; chúng kế thừa từ Interface JpaRepository

Tầng Service bao gồm các Interface: AddressService, UserService và các lớpImplementation của chúng

Tầng Controller bao gồm: AddressController, UserController

Lớp MessageResponse để thể hiện thông điệp trả về Client

15

Phía Client:

Hình 2.12: Biểu đồ lớp phía Client chức năng Trang cá nhân

Tầng giao diện có các trang xml Fragment: ProfileFragment, AddressFragment.Tầng Front-Controller bao gồm các lớp: ProfileFragment, AddressFragment,UserViewModel, UserRepository, UserApi

2.3.2.3 Biểu đồ tuần tự

2.3.3 Menu/ Cài đặt/ Đăng xuất

2.3.3.1 Biểu đồ Use Case

Hình 2.14: Biểu đồ Use Case chức năng Setting2.3.3.2 Biểu đồ lớp

Tương tự như chức năng trang cá nhân, tầng Front-Controller của chức năngSetting cũng sử dụng các lớp: UserViewModel, UserRepository và UserApi.Tầng giao diện là trang xml Fragment - SettingFragment và lớp SettingFragmenttương ứng.

2.3.3.3 Biểu đồ tuần tự

Thay đổi cài đặt ứng dụng:

Hình 2.17: Biểu đồ tuần tự chức năng SettingĐăng xuất:

2.4 Sơ đồ thực thể quan hệ (ER)

Hình 2.19: Sơ đồ thực thể quan hệ (ER)

 User: Id, Name, PhoneNumber, Gender, AvatarImage

 Account: Id, Email, Password

 Address: Id, Address

 Roles: Id, RoleName

 UserSetting: Id, EnableFingerPrint, EnableNotification, EnableLocationService

Quan hệ số lượng giữa các bảng:

III Kết quả triển khai

3.1 Mô hình triển khai

Server (Spring Boot):

 Tạo ứng dụng Spring Boot để xử lý logic kinh doanh và cung cấp dịch vụqua API RESTful

 Sử dụng các thư viện Spring JPA để xây dựng các API

 Kết nối với cơ sở dữ liệu để lưu trữ và truy xuất dữ liệu

 Triển khai các lớp dịch vụ (service layer), lớp điều khiển (controller layer),

và lớp truy cập dữ liệu (data access layer) để xử lý các yêu cầu từ client

Client (Android Kotlin):

 Tạo ứng dụng Android bằng Kotlin để làm giao diện người dùng cho ngườidùng cuối

 Sử dụng Retrofit để giao tiếp với server thông qua các HTTPrequests/responses

 Xử lý phản hồi từ server và hiển thị dữ liệu cho người dùng theo cách thíchhợp

 Quản lý các yêu cầu mạng và xử lý lỗi kết nối

Giao tiếp giữa Server và Client:

 Định nghĩa các endpoint API trên server để cho phép client truy xuất và gửi

dữ liệu

 Sử dụng công nghệ như JSON để truyền tải dữ liệu giữa server và client

 Xác thực và ủy quyền người dùng sử dụng JSON Web Tokens (JWT)

Quản lý Phiên bản và Triển Khai:

 Sử dụng các công cụ quản lý phiên bản như Git để quản lý mã nguồn của

cả server và client

 Triển khai ứng dụng client trên các thiết bị Android máy ảo và máy thật

3.2 Các bước cài đặt và triển khai ứng dụng

3.2.1 Cài đặt và Cấu hình Server (Spring Boot):

Cài đặt Java Development Kit (JDK):

+ Tải và cài đặt JDK từ trang web chính thức của Oracle hoặc OpenJDK.Tạo Dự án Spring Boot:

+ Sử dụng Spring Initializr hoặc IntelliJ IDEA để tạo dự án Spring Boot.+ Lựa chọn các dependencies như Spring Web, Spring Data JPA, SpringSecurity, MySql Driver, LomBok, Validation,…

Triển khai ứng dụng:

+ Viết mã logic kinh doanh và API trong các lớp Service và Controller.+ Kết nối với cơ sở dữ liệu MySQL

+ Chạy ứng dụng Spring Boot trên máy cục bộ

Cấu hình Kết nối Cơ sở dữ liệu:

+ Đảm bảo các thông tin kết nối cơ sở dữ liệu (URL, username,password) được cấu hình chính xác trong tệp application.properties

3.2.2 Cài đặt và Cấu hình Client (Android Kotlin):

Cài đặt Android Studio:

+ Tải và cài đặt Android Studio từ trang web chính thức của Google.Tạo Dự án Android Kotlin:

+ Tạo một dự án mới trong Android Studio và chọn ngôn ngữ Kotlin.Triển khai ứng dụng:

+ Viết mã để tạo giao diện người dùng và xử lý logic ứng dụng trongAndroid Studio

+ Sử dụng Retrofit để tạo các yêu cầu mạng đến server

+ Thêm các dependences vào file gradle.kts

Cấu hình Quyền truy cập Internet:

+ Thiết lập cho phép ứng dụng Android của có quyền truy cập Internettrong tệp manifest.xml

21

Kiểm thử ứng dụng:

+ Kiểm tra ứng dụng trên nhiều thiết bị Android để đảm bảo tính chínhxác và tính tương thích

3.2.3 Triển khai và Quản lý ứng dụng:

Triển khai Server: Triển khai Server trên localhost

Triển khai Client: Cài đặt ứng dụng trên thiết bị Android máy ảo và máy thật

3.3 Kết quả thực hiện được thông qua các giao diện

3.3.1 Giao diện chức năng Đăng nhập/ Đăng ký

Hình 3.1: Giao diện đăng nhập Hình 3.2: Giao diện đăng ký

Hình 3.3: Giao diện quên mật khẩu Hình 3.4: Giao diện khôi phục mật khẩu

3.3.2 Giao diện chức năng trang cá nhân

Hình 3.5: Giao diện trang thông tin cá nhân Hình 3.6: Giao diện trang địa chỉ

25

3.3.3 Giao diện Menu/ Cài đặt

Hình 3.7: Giao diện thanh Menu Hình 3.8: Giao diện trang cài đặt

Ứng dụng mới chỉ được triển khai trên môi trường thử nghiệm (local).

Các chức năng chưa hoàn chỉnh:

 Đăng ký: Chưa có bước xác thực Email của người dùng

 Cài đặt ứng dụng: Chỉ dừng lại ở mức thể hiện cài đặt cho phép cácquyền, chưa thực hiện các quyền đó với thiết bị

3.5 Tài liệu tham khảo

1 Android Jetpack: Introducing Navigation component – AndroidDevelopers – Youtube.com

2 Giáo trình Slides PDF – Thầy Nguyễn Hoàng Anh

3 Lập trình Android với Kotlin - Trung Tâm Đào Tạo Công Nghệ KhoaPhạm – Youtube.com

4 Spring Boot 3 + Spring Security 6 – JWT Authentication andAuthorisation [NEW] [2023] – Amigoscode – Youtube.com

5 Tìm hiểu mô hình MVVM trong Android thông qua ví dụ - dinhlam –viblo.asia

Hết 27