<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b> TRƯỜNG ĐẠI HỌC GIAO THÔNG VẬN TẢI</b>

<b>KHOA CÔNG NGHỆ THÔNG TIN</b>

<b>---o0o---BÁO CÁO BÀI TẬP LỚN</b>

<b>LẬP TRÌNH THIẾT BỊ DI ĐỘNG</b>

<b>Đề tài: App giao đồ ăn</b>

<b>Giảng viên hướng dẫn: Thầy Lại Mạnh Dũng</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<i>Hà Nội, Tháng 4 Năm 2024</i>

CHƯƠNG I : TỔNG QUAN VỀ ĐỀ TÀI 1. Mô tả về đề tài

<b> 1.1. Tóm tắt đề tài</b>

Đề tài chúng em thực hiện là ứng dụng mua bán thực phẩm trên hệ điều hành Android và sử dụng ngôn ngữ Java dựa trên kiến thức đã được học trên lớp và tham khảo các nguồn kiến thức khác trên Internet.

<b> 1.2. Lý do chọn đề tài</b>

Ngày nay việc mua bán trực tuyến trên điện thoại trở nên phổ biến, dựa vào nhu cầu đó chúng em muốn trải nghiệm thiết kế một ứng dụng mua bán trực tuyến là ứng dụng mua bán thực phẩm

.

<b> 1.3. Mục tiêu của đề tài</b>

Mục tiêu của ứng dụng mua bán thực phẩm này để vừa luyện tập kĩ năng cơ bản cũng như nâng cao trong thiết kế phát triển ứng dụng Android. Ứng dụng dùng Android Studio vẽ giao diện và dùng SQLiteOpenHelper làm CSDL.

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b> 1.2. Chi tiết các use-case</b>

<b> </b>

2. Cơ sở dữ liệu

3. Giao diện thiết kế

<b> 3.1. Giao diện thiết kế phần đăng ký, đăng nhập</b>

<b> </b>

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<b> 3.2. Giao diện thiết kế khi vào bên trong ứng dụng </b>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

CHƯƠNG III : GIAO DIỆN VÀ CHỨC NĂNG CỦA HỆ THỐNG

1. Cấu trúc dự án

<b> 1.1. Module dự án Android </b>

<b> Bên Android, cấu trúc dự án sẽ chia làm các thành phần là model, repository,</b>

serviceapi, utils, view. Mỗi một package sẽ chứa code để làm việc với từng thành phần tương ứng.

<b> </b>

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b> Trong package model, là nơi chứa các domain hay các thực thể để cho việc trao</b>

đổi dữ liệu trong suốt cả chương trình Android.

<b> Trong package</b> repository và serviceapi là nơi

thành phần để giao tiếp với bên Spring BackEnd. Đây là phần MODEL ở trong kiến trúc MVVM.

<b> Trong package view là nơi để làm</b> việc với các activity và các fragment, đây là nơi

chứa nhiều code và nghiệp vụ nhất khi làm việc với Android, ở trong kiến trúc MVVM đây là phần VIEW và VIEW MODEL. Hình sau sẽ giới thiệu đơi chút.

<small>package utils chứa các thành phần static để sử dụng trong suốt quá trình ứng dụng chạy</small>

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

<b>1.2.Module dự án Spring (do file quá nhiều nên sẽ show các thư mục project)</b>

Bên phía BackEnd, các module được chia thành các package như bootstrap, configuration, controller, dto, exception, mapper, model, repository, service, util. Trong đó các package như controller sẽ là đại diện cho tầng presentation (trình diễn) , những class trong package này sẽ có nhiệm vụ cung cấp các api để client có thể giao tiếp với phía BackEnd, package service và repository đại diện cho tầng business cũng như tầng persistence, đây là nơi chứa những class giải quyết các logic nghiệp vụ và logic để giao tiếp với phía DB, Database em sử dụng là PostgresSql.

<small>package auth chứa các activities và fragments liên quan đến đăng nhập, đăng ký, …</small>

<small>package love chứa các activities và fragments liên quan đến trang loveplaylist, tạo một love playlist, …</small>

<small>package musicplayer chứa các activities và fragments liên quan đến trình phát nhạc, và service để phát nhạc trong khi ứng dụng chạy</small>

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

Package bootstrap có class Bootstrap để khởi chạy các thành phần cần thiết và xử lý các dữ liệu cần thiết khi server khởi chạy, em dùng class này để khởi tạo lời gọi đến Song API rồi sau đó xử lý dữ liệu nhét vào album rồi lưu vào DB, một dạng initialize dữ liệu.

Package dto chứa các class DTO (Data Transfer Object) để trao đổi dữ liệu, exception chứa các lớp xử lý ngoại lệ tự định nghĩa, mapper là nơi chứa các interface để thực hiện cho việc chuyển đổi giữa DTO và Model gốc. Em các annotations của MapStruct để trong quá trình package thành jar sẽ tự sinh ra code triển khai các interface này cho việc chuyển đổi.

Cuối cùng là các package còn lại

<small>package configuration có chứa class để cấu hình các Spring Bean cần thiết để sử dụng trong khi code…</small>

<small>package model chứa các logic miền hay domain logic chính của hệ thống backend</small>

<small>package repository, service có tác dụng để trao đổi với phía database, các service sẽ sử dụng thành phần phụ thuộc (DI) từ repository để các logic nghiệp vụ có thể giao tiếp với DB</small>

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

Ngồi ra em cịn viết một số unit test và integration test phía backend để kiểm thử xem API hoạt động oke chưa hay kiểm thử xem repository lấy dữ liệu, lưu dữ liệu chuẩn chưa.

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>2.2. Giao diện trang Home, Playlist, LovePlaylist, User</b>

<b>Giao diện trang Home</b>

<b>Giao diện trang Playlist (chứa danh sách các bài hát)</b>

<b> </b>

<b>Giao diện trang LovePlaylist</b>

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

<b>Giao diện trang User</b>

<b> 2.3. Giao diện trang Rank (chưa có ý tưởng triển khai)</b>

<b> 2.4. Giao diện trang Album khi người dùng click vào Album ở Home</b>

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b> 2.5. Giao diện trang Playlist khi người dùng click vào một Playlist</b>

<b> 2.6. Giao diện thêm mới một bài hát vào Playlist </b>

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

<b> 2.7. Giao diện trình phát nhạc </b>

3. Chức năng

<b> 3.1. Giao diện và chức năng đăng nhập</b>

Giao diện bắt đầu sau intro là giao diện đăng nhập của ứng

<b>3.2. Giao diện và chức năng đăng ký</b>

<b> </b>

<b>3.3. Giao diện và chức năng quên mật khẩu</b>

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

<b> </b>

<b>3.4. Giao diện và chức năng trong trang Home </b>

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<b>3.5. Giao diện và chức năng của trang …</b>

<b>3.6. Giao diện và chức năng của trang ….</b>

<b>3.7. Giao diện và chức năng trang danh sách sản phẩm</b>

<b>3.8. Giao diện và chức năng trang người dùng</b>

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

<b>3.9. Giao diện và chức năng </b>

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

CHƯƠNG IV: KẾT LUẬN

KẾT LUẬN

BẢNG PHÂN CÔNG CÔNG VIỆC

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

Thao tác trên Intelij IDEA (để chạy backend local)

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

o Sau khi thầy đã cài JDK 17 và tạo database trên PostgresSQL, mở ứng dụng Spring Boot lên bằng Intelij IDEA

<small>file cấu hình cho ứng dụng spring</small>

<small>Đây là cấu hình mặc định cho remote database, chúng ta cần thay đổi để chạy trên local database đã cài từ bước trước.</small>

</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">

o Sau đó, vào file application.properties cấu hình lại một chút để có thể giao tiếp với database local, mặc định là đang kết nối đến database host trên web. Đây là nội dung cần thay thế

o oSau đó chạy ứng dụng lên bằng cách cách nhấn nút hình tam giác trong file SoulMusicBEServiceApplication.java

</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">

o Vậy là xong phần chạy backend local, em dùng Spring Data JPA nên khi chạy app sẽ tự chạy code sinh ra các bảng và dữ liệu khởi tạo sẽ được khởi tạo từ file Bootstrap.java trong package bootstrap.

Thao tác trên Android (để chạy android)

o Trong package serviceapi, để có thể chạy local cần thay đổi đường dẫn gọi đến API của backend đang chạy local.

o Sau đó chạy ứng dụng Android lên và đăng ký tài khoản và trải nghiệm thơi. Lưu ý là phải có kết nối wifi để đăng ký.

<small>Thay đổi từ Constants.FULL sang Constants.EMULATOR_FULL_PATH</small>

</div>