ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG ĐỒ ÁN CƠ SỞ ĐỀ TÀI XÂY DỰNG ỨNG DỤNG BÁN HÀNG (GIÀY) - SNEAKERf

Việc tạo và phát triển các ứng dụng điện thoại để phục vụ cho các nhu cầu riêngcủa các tổ chức, công ty thậm chí các cá nhân, ngày nay, không lấy gì làm xa lạ.Với một vài thao tác đơn

Giảng Viên Hướng Dẫn: TS Võ Hùng Cường

Sinh Viên Thực Hiện: Lê Văn Truyền

18IT2

Đà Nẵng, tháng 5 năm 2020

ĐẠI HỌC ĐÀ NẴNG KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

ĐỒ ÁN CƠ SỞ 3

ĐỀ TÀI

XÂY DỰNG ỨNG DỤNG BÁN HÀNG (GIÀY) - SNEAKERf

Đà Nẵng, tháng 5 năm 2020

MỞ ĐẦU

Ngày nay, ứng dụng công nghệ thông tin và việc tin học hóa được xem là mộttrong những yếu tố mang tính quyết định trong hoạt động của các chính phủ, tổchức, cũng như của các công ty, nó đóng vai trò hết sức quan trọng, có thể tạo ranhững bước đột phá mạnh mẽ

Việc tạo và phát triển các ứng dụng điện thoại để phục vụ cho các nhu cầu riêngcủa các tổ chức, công ty thậm chí các cá nhân, ngày nay, không lấy gì làm xa lạ.Với một vài thao tác đơn giản, một người bất kì có thể tải và cài đặt trên điệnthoại các ứng dụng liên quan đến lĩnh vực mà anh ta quan tâm, như là: về âmnhạc, video, mạng xã hội, giáo dục, gia đình, nấu ăn ….v.v

Đối với các công ty, doanh nghiệp thì việc tạo và phát triển các ứng dụng trênđiện thoại thông minh là điều rất cần thiết để phát triển Thông qua những ứngdụng này, thông tin về họ cũng như các sản phẩm, dịch vụ mới của công ty sẽ đếnvới những người quan tâm, đến với khách hàng của họ một cách nhanh chóng kịpthời, tránh những phiền hà mà phương thức giao tiếp truyền thống thường gặpphải

Bắt nguồn với ý tưởng này, cùng với những gợi ý của thầy Võ Hùng Cường,chúng em đã thực hiện đồ án:

“XÂY DỰNG ỨNG DỤNG BÁN HÀNG (GIÀY) - SNEAKERf”

MỤC LỤC

Trang

Chương 1 Giới thiệu 1

1.1 Tên dự án 1

1.2 Nhóm thực hiện: 1

1.3 Bối cảnh thực hiện: 1

1.4 Mục tiêu dự án 1

1.5 Phương pháp thực hiện: 1

1.6 Kế hoạch thực hiện dự án 2

Chương 2 Nghiên Cứu Thiết Kế 3

2.1 Framework hổ trợ, ngôn ngữ và công cụ lập trình được sử dụng: 3

2.1.1 Firebase: 3

2.1.2 Android Studio: 3

2.1.3 Java (Android): 3

2.2 Phân tích, tham khảo các ứng dụng, các mô hình mẫu: 4

2.2.1 Một số ứng dụng đã có: 4

2.2.2 Đúc kết: 5

Chương 3 Kết nối giữa Firebase và Android Studio 6

3.1 Kết nối giữa Firebase và android : 6

3.1.1 Mục đích: 6

3.1.2 Thiết lập kết nối 6

3.2 Tạo Database và Storage trên Firebase: 8

3.2.1 Tạo Database 8

3.2.2 Upload file hình ảnh lên 9

Chương 4 Xây dựng ứng dụng android 10

4.1 Mục tiêu và phân tích: 10

4.2 Xây dựng: 10

4.2.1 Các Activity (13 Activities): 10

4.3 Model package (4 Models): 10

4.4 Prevalent package: 10

4.5 Sản phẩm ứng dụng bán giày”SNEAKERf”: 11

4.5.1 Giao diện màn hình Đăng nhập – Đăng ký: 11

4.5.2 Giao diện chính (Home Activity): 12

4.5.3 Giao diện chi tiết mô tả giá cả của giày : 13

4.5.4 Giao diện tìm kiếm tên loại giày: 14

4.5.5 Giao diện thông tin user: 15

4.5.6 Giao diện Admin 16

KẾT LUẬN 17

1 Kết quả đạt được 17

2 Hướng phát triển 17

TÀI LIỆU THAM KHẢO 18

Chương 1 Giới thiệu

1.1 Tên dự án

Ứng dụng bán giày cho điện thoại

1.2 Nhóm thực hiện:

 Lê Văn Truyền -18IT113

1.3 Bối cảnh thực hiện:

Cùng với sự phát triển không ngừng về kỹ thuật máy tính và mạng internet, công nghệthông tin đang ngày càng chinh phục các đỉnh cao Mạng internet là một trong những sảnphẩm có giá trị hết sức lớn lao và ngày càng trở nên là một công cụ không thể thiếu trongmọi lĩnh vực cuộc sống

Với internet, chúng ta đã thực hiện được nhiều công việc với tốc độ nhanh hơn và chi phíthấp hơn nhiều so với cách thức truyền thống Chính điều này, đã thúc đầy sự khai sinh vàphát triển của thương mại điện tử và chính phủ điện từ trên khắp thể giới, làm biến đối đáng

kể bộ mặt văn hóa, nâng cao chẩt lượng cuộc sống con người

Trong những năm gần đây, do CNTT đang phát triển rất mạnh nên việc ứng dụng tin họcđời sống ngày càng được quan tâm hơn

Dự án em đề xuất là ứng dụng về bán hàng online là bán giày , cung cấp cho người dùngthông tin về các loại giày cao cấp (hình ảnh , mô tả , giá cả )

1.4 Mục tiêu dự án

Tạo ra một ứng dụng đơn giản , giao diện đẹp , dễ nhìn , cung cấp miễ phí thông tin về các dòng giày cao cấp , đẹp mắt hợp thời trang Hỗ trợ những tín đồ yêu giày có nơi đáng tin cậy để mua giày cao cấp

1.5 Phương pháp thực hiện:

Tìm hiểu về các ứng dụng đã có sẵn (GOAT, MyShoes) Phân tích giao diện, chức năngnổi bật Từ đó, dựa vào những chức năng đã lên kế hoạch từ đầu, đúc kết, và đưa ra cácchức năng, yêu cầu hoàn chỉnh cho ứng dụng

Sử dụng phần mềm Android Studio để tạo ứng dụng hoàn chỉnh chạy trên các thiết bị diđộng dựa vào các API trả về từ Firebase đã được đưa lên internet

Chương 2 Nghiên Cứu Thiết Kế

2.1 Công cụ lập trình được sử dụng:

2.1.1 Firebase:

Firebase là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đá mây – cloud Kèm theo đó

là hệ thống máy chủ cực kì mạnh mữ của Google Chức năng chính lag giúp người dùng lậptrình ứng dụng bằng cách đơn giản hóa các thao tác với cơ sở dữ liệu

Cụ thể là những giao diện lập trình ứng dụng API đơn giản Mục đích nhằm tăng sốlượng người dùng và thu lại nhiều lợi nhuận hơn

2.1.2 Android Studio:

Android Studio là một phầm mềm bao gồm các bộ công cụ khác nhau dùng để phát

triển ứng dụng chạy trên thiết bị sử dụng hệ điều hành Android như các loại điện thoại

smartphone, các tablet Android Studio được đóng gói với một bộ code editor, debugger,

các công cụ performance tool và một hệ thống build/deploy (trong đó có trình giả lậpsimulator để giả lập môi trường của thiết bị điện thoại hoặc tablet trên máy tính) cho phépcác lập trình viên có thể nhanh chóng phát triển các ứng dụng từ đơn giản tới phức tạp

2.1.3 Java (Android):

Java là ngôn ngữ chính thức để phát triển Android Đây là ngôn ngữ có sự hỗ trợ nhiều

nhất từ Google Nó cũng là ngôn ngữ mà hầu hết các ứng dụng trên Play Store được xâydựng Nó cũng là ngôn ngữ chính thức của Android Hệ điều hành Android của Google sử

dụng Java như là cơ sở cho tất cả các ứng dụng Android.

2.2 Phân tích, tham khảo các ứng dụng, các mô hình mẫu:

 Xem danh sách các loại giày

 Tìm kiếm loại giày

 Xem chi tiết mô tải giá cả

 Nổi bật:

 Lọc danh sách tìm kiếm đa dạng

 Có nhiều khuyến mãi, chương trình hấp dẫn và đa dạng

 Chức năng:

 Xem danh sách các loại giày

 Tìm kiếm loại giày

 Xem chi tiết mô tải giá cả

 Phải đơn giản, ưa nhìn, bắt mắt, dễ sử dụng

 Không quá nhiều thông tin trong một layout

 Chức năng cần có:

 Xem danh sách loại giày

 Xem danh sách loại được tìm kiếm

 Tim kiếm loại giày dễ dàng theo chữ cái

 Xem chi tiết từng đôi giày (mô tả, giá thành, tên)

 Quản trị viên có xem, thêm, sửa đổi, xóa loại giày (Admin Firebase)

 Giao diện thêm sản phẩm dễ hiểu, dễ sử dụng

 Chức năng riêng dự kiến thực hiện:

 Chức năng liên hệ giữa người dùng và admin

Chương 3 Kết nối giữa Firebase và Android

Studio 3.1 Kết nối giữa Firebase và android :

3.1.1 Mục đích:

 Thiết kế giao diện dành quản trị viên (admin) với các chức năng

 Thêm, sửa , xóa bài viết (công thức món ăn)

 Sửa thông tin, xóa (vô hiệu hóa tài khoản người dùng)

 Duyệt, sửa xóa công thức do người dùng đăng lên

 Quản lí các thông tin khác như thực đơn, bình luận, lịch sử món ăn, danh sách theo dõi bếp, quản lí bếp của người dùng,…

 Thiết kế giao diện dành cho user với các chức năng :

 Xem chọn loại hàng cần mua

 Hủy các đơn hàng (nếu cần)

3.1.2 Thiết lập kết nối

Bây giờ bước tiếp theo là kết nối với Firebase để sử dụng Realtime Database Firebase Ta làm như sau:

Hình 3 Kết nối Realtime Database Firebase 1

Vào menu Tools/ chọn Firbase, lúc này cửa sổ hướng dẫn cách sử Firebase sẽ được hiển thị

ra ở góc phải của cửa sổ Android Studio:

Hình 4 Kết nối Realtime Database Firebase 2

Trong màn hình trên, Firebase cung cấp rất nhiều công cụ, tuy nhiên ta chỉ quan tâm tới Realtime Database thôi nha Vì vậy ta nhấn vào Realtime Database:

Hình 5 Kết nối Realtime Database Firebase 3

Lúc này ta thấy nút “Save and retrieve data” hiển thị ra như hình trên Bấm vào nó nha Trìnhtrợ giúp cung cấp cho ta 8 bước thao tác (bao gốm kết nối và hướng dẫn lập trình, ta dùng 2 -

3 bước là đủ rồi):

Bước 1: Connect your app to firebase

Bước 2: Add the Realtime Database to our app

Bước 3: Configure Firebase Database Rules

Bước 4: Write to your database

Bước 5: Read from your database

Bước 6: Optional: Configure ProGuard

Bước 7: Prepare for Launch

Bước 8: Next steps

Hình 6 Kết nối Realtime Database Firebase 4

3.2 Tạo Database và Storage trên Firebase:

3.2.1 Tạo Database

Gồm có dữ liệu Admin, Cart List , Products và Users

Hình 7 Realtime Database Firebase

3.2.2 Upload file hình ảnh lên

Hình 8 Realtime Database Firebase

Chương 4 Xây dựng ứng dụng android

4.1 Mục tiêu và phân tích:

- Xây dựng sản phẩm ứng dụng android hoàn chỉnh cho người dùng

- Sản phẩm chỉ dành cho người dùng không dành cho quản trị viên thực hiện các thao tác quản lí hệ thống

- Ứng dụng có nhiều chức năng đa dạng dễ sử dụng

- Quản trị viên có thể dùng ứng dụng để đăng bài hoặc sửa xóa bài viết do chính mình đăng lên

- Dịch vụ API để lưu trữ và đồng bộ dữ liệu real-time (thời gian thực)

- Giao diện admin : AdminActivity.

- Admin thêm sản phẩm: AdminAddNewProductActivity.

- Admin thêm loại giày: AdminCategoryActivity.

- Admin xem danh sách hàng đã đặt: AdminViewOrderActivity.

- Giỏ hàng : CartActivity.

- Form xác nhận giao hàng: ConfirmFormOrderActivity.

- Giao diện Home: HomeActivity

- Xem thông tin của đôi giày : ProductDetailsActivity.

- Tìm kiếm: SearchActivity.

- Chỉnh sửa tài khoản User: SettingActivity.

4.2.2 Model package (4 Models):

- Các model chịu trách nhiệm lưu trữ thông tin, xử lí thông tin trả về và đưa lên

- Một số các model chính như:

và địa chỉ )

4.2.3 Prevalent package:

- Kiểm tra tài khoản có tồn tại hay không

- Thực hiện các request đến Database Firebase

4.2.4 ViewHolder package (3 ViewHolders):

4.2.5 Thư mục resources (res folder):

Chương 6 Drawble folder: hình ảnh, icon cho giao

diện.

Chương 7 Layout folder: các giao diện của các activity,

item của recycler view.

Chương 9 Values folder: các giá trị màu sắc, phong

cách và biến string lưu trữ.

9.1 Sản phẩm ứng dụng bán giày”SNEAKERf”:

9.1.1 Giao diện màn hình Đăng nhập – Đăng ký:

- Ở giao diện đăng nhập, người dùng chỉ cần nhập vào email và mật khẩu của tài khoản của mình nếu họ đã có tài khoản, hệ thống sẽ kiểm tra xem tài khoản và mật khẩu có hợp lệ hay không, nếu đã hợp lệ thì sẽ chuyển vào màn hình chính, nếu thất bại thì sẽ in ra thông báo

- Trong trường hợp người dùng chưa có tài khoản trên hệ thống, thì chỉ cần nhấp vào nút “Đăng Ký” thì sẽ được chuyển đến giao diện đăng ký tài khoản Tại đây người dùng chỉ cần nhập điền đầy đủ thông tin cần thiết và chọn đăng ký Hệ thống sẽ thông báo thành công hay không, nếu thành công thì sẽ được chuyển đến giao diện đăng nhập để đăng nhập lại, thất bại thì hệ thống sẽ đưa ra thông báo.

Hình 9 Android app - Giao diện đăng nhập ,đăng ký

9.1.2 Giao diện Home(Home Activity):

Hình 10 Android app - Giao diện màn hình chính

- Giao diện Home gồm các Recycleview hiện các sản phẩn nhờ đổ dữ liệu ra từ

9.1.3 Giao diện chi tiết mô tả giá cả của giày :

Hình 11 Android app - Giao diện chi tiết mô tả của từng đôi giày

- Giao diện mô tả chứa thông tin chi tiết về tên giày , giá cả và mô tả

- Ở dưới cùng ta có thể thấy phầm chọn số lượng và thêm vào giỏ hàng nếu thích hoặc hủy nếu không thích

9.1.4 Giao diện tìm kiếm tên loại giày:

Hình 12 Android app - Giao diện tìm kiếm món ăn

- Người dùng nhấp vào icon tìm kiếm ở thanh công cụ và tiến hành nhập vào gợi ý tìmkiếm, hệ thống sẽ tự động nhận diện và hiển thị kết quả

9.1.5 Giao diện thông tin user:

Hình 13 Android app - Giao diện thông tin user.

- Ở giao diện này người dùng có thể xem thông tin chi tiết của mình

- Khi nhấp vào nút ba gạch ngang bên trên cùng sẽ hiện ra menu với 3 lựa chọn, nếu muốn thay đổi thì ta tiến hành thay đổi và cập nhật thông tin

9.1.6 Giao diện Admin

Hình 14 Android app - Giao diện đăng nhập admin

- Ở giao diện này nếu bạn là admin thì bạn chọn “Tôi là Admin” và tiến hành đăng nhập vào để đăng bài và cập nhật sản phẩm mới

Hoàn thiện hơn về mặt thẩm mỹ cũng như các chức năng

Thêm các chức năng đa dạng hơn

TÀI LIỆU THAM KHẢO

1.Tích hợp realtime database trong Firebase vào Android