Đề tài xây dựng ứng dụng bán hàng (giày) sneakerf

ĐẠ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 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 năm 2020 Đồ án sở TS.Võ Hùng Cường n ĐẠ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 Đà Nẵng, tháng năm 2020 Đồ án sở TS.Võ Hùng Cường n MỞ ĐẦU Ngày nay, ứng dụng công nghệ thông tin việc tin học hóa xem yếu tố mang tính định hoạt động phủ, tổ chức, cơng ty, đóng vai trị quan trọng, tạo bước đột phá mạnh mẽ Việc tạo phát triển ứng dụng điện thoại để phục vụ cho nhu cầu riêng tổ chức, công ty chí cá nhân, ngày nay, khơng lấy làm xa lạ Với vài thao tác đơn giản, người tải cài đặt điện thoại ứng dụng liên quan đến lĩnh vực mà quan tâm, là: âm nhạc, video, mạng xã hội, giáo dục, gia đình, nấu ăn ….v.v Đối với công ty, doanh nghiệp việc tạo phát triển ứng dụng điện thoại thông minh điều cần thiết để phát triển Thông qua ứng dụng này, thông tin họ sản phẩm, dịch vụ công ty đến với người quan tâm, đến với khách hàng họ cách nhanh chóng kịp thời, tránh phiền hà mà phương thức giao tiếp truyền thống thường gặp phải.  Bắt nguồn với ý tưởng này, với gợi ý thầy Võ Hùng Cường, chúng em thực đồ án: “XÂY DỰNG ỨNG DỤNG BÁN HÀNG (GIÀY) - SNEAKERf” Đồ án sở TS.Võ Hùng Cường n MỤC LỤC Trang Chương Giới thiệu 1.1 Tên dự án 1.2 Nhóm thực hiện: 1.3 Bối cảnh thực hiện: .1 1.4 Mục tiêu dự án 1.5 Phương pháp thực hiện: .1 1.6 Kế hoạch thực dự án Chương Nghiên Cứu Thiết Kế .3 2.1 Framework hổ trợ, ngôn ngữ cơng cụ lập trình sử dụng: 2.1.1 Firebase: 2.1.2 Android Studio: .3 2.1.3 Java (Android): 2.2 Phân tích, tham khảo các ứng dụng, các mô hình mẫu: 2.2.1 Một số ứng dụng có: 2.2.2 Đúc kết: Chương Kết nối Firebase Android Studio .6 3.1 Kết nối Firebase android : 3.1.1 Mục đích: 3.1.2 Thiết lập kết nối 3.2 Tạo Database Storage Firebase: .8 3.2.1 Tạo Database 3.2.2 Upload file hình ảnh lên Chương Xây dựng ứng dụng android .10 4.1 Mục tiêu 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 hình Đăng nhập – Đăng ký: 11 4.5.2 Giao diện (Home Activity): 12 4.5.3 Giao diện chi tiết mô tả giá 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 Kết đạt 17 Hướng phát triển 17 TÀI LIỆU THAM KHẢO 18 Đồ án sở TS.Võ Hùng Cường n Chương 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 phát triển không ngừng kỹ thuật máy tính mạng internet, cơng nghệ thơng tin ngày chinh phục đỉnh cao Mạng internet sản phẩm có giá trị lớn lao ngày trở nên công cụ thiếu lĩnh vực sống Với internet, thực nhiều cơng việc với tốc độ nhanh chi phí thấp nhiều so với cách thức truyền thống Chính điều này, thúc đầy khai sinh phát triển thương mại điện tử phủ điện từ khắp thể giới, làm biến đối đáng kể mặt văn hóa, nâng cao chẩt lượng sống người Trong năm gần đây, CNTT phát triển mạnh nên việc ứng dụng tin học đời sống ngày càng được quan tâm Dự án em đề xuất ứng dụng bán hàng online bán giày , cung cấp cho người dùng thông tin loại giày cao cấp (hình ảnh , mô tả , giá .) 1.4 Mục tiêu dự án Tạo ứng dụng đơn giản , giao diện đẹp , dễ nhìn , cung cấp miễ phí thơng tin dịng giày cao cấp , đẹp mắt hợp thời trang Hỗ trợ 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 ứng dụng có sẵn (GOAT, MyShoes) Phân tích giao diện, chức bật Từ đó, dựa vào chức lên kế hoạch từ đầu, đúc kết, đưa chứ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 thiết bị di động dựa vào API trả từ Firebase đưa lên internet n 1.6 Kế hoạch thực dự án Thời gian Tuần thứ nhất (Từ ngày 13/5 đến ngày 19/5 ) Tuần thứ hai (Từ ngày 19/5 đến ngày 26/5 ) Nội dung thực Xây dựng, hồn thiện đề cương Tìm hiểu ứng dụng có sẵn Phân tích thiết kế giao diện Tuần thứ ba Kết nối xây dựng sơ sở liệu Firebase (Từ ngày2526/5 đến Xây dựng giao diện admin ngày 2/5 ) Tuần thứ tư (Từ ngày 2/6 đến ngày 9/6 ) Xây dựng giao diện admin Tuần thứ năm (Từ ngày 9/6 đến ngày 16/6 ) Lập trình di động, xây dựng giao diện ban đầu cho thiết bị android Tuần thứ sáu (Từ ngày 16/6 đến ngày 23/6 ) Lập trình di động, tiếp tục xây dựng giao diện người dùng, phát triển chức Tuần thứ bảy (Từ ngày 23/6 đến ngày 30/6 ) Lập trình di động, tiếp tục xây dựng hoàn thiện giao diện ứng dụng, hoàn thành chức cần thiết, thêm chức tìm kiếm lọc Tuần thứ tám (Từ ngày 30/6 đến ngày 7/7 ) Tiếp tục xây dựng, hoàn thành chức năng, kiểm thử, phát sửa lỗi (nếu có) ứng dụng android Các tuần cịn lại Thực báo cáo word, slide tiếng anh, kiểm tra, kiểm thử ứng dụng để phát hiện, sửa lỗi… n Chương Nghiên Cứu Thiết Kế 2.1 Công cụ lập trình sử dụng: 2.1.1 Firebase: Firebase dịch vụ sở liệu hoạt động tảng đá mây – cloud Kèm theo hệ thống máy chủ mạnh mữ Google Chức lag giúp người dùng lập trình ứng dụng cách đơn giản hóa thao tác với sở liệu Cụ thể 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 thu lại nhiều lợi nhuận 2.1.2 Android Studio: Android Studio phầm mềm bao gồm công cụ khác dùng để phát triển ứng dụng chạy thiết bị sử dụng hệ điều hành Android loại điện thoại smartphone, tablet Android Studio đóng gói với code editor, debugger, công cụ performance tool hệ thống build/deploy (trong có trình giả lập simulator để giả lập môi trường thiết bị điện thoại tablet máy tính) cho phép lập trình viên nhanh chóng phát triển ứng dụng từ đơn giản tới phức tạp 2.1.3 Java (Android): Java ngơn ngữ thức để phát triển Android Đây ngơn ngữ có hỗ trợ nhiều từ Google Nó ngơn ngữ mà hầu hết ứng dụng Play Store xây dựng Nó ngơn ngữ thức Android Hệ điều hành Android Google sử dụng Java sở cho tất ứng dụng Android n 2.2 Phân tích, tham khảo các ứng dụng, các mô hình mẫu: 2.2.1 Một số ứng dụng có: 2.2.1.1 GOAT: Hình Giao diện ứng dụng GOAT  Giao diện:  Giao diện đẹp, bắt mắt  Dễ nhìn, rõ ràng, dễ sử dụng  Khơng q phức tạp  Chức năng:  Xem danh sách loại giày  Tìm kiếm loại giày n  Xem chi tiết mô tải giá  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 đa dạng 2.2.1.2 MyShoes: Hình Giao diện ứng dụng MyShoes  Giao diện:  Giao diện đẹp, bắt mắt, màu sắc nhẹ nhàng  Dễ nhìn, rõ ràng, dễ sử dụng  Không phức tạp n  Chức năng:  Xem danh sách loại giày  Tìm kiếm loại giày  Xem chi tiết mô tải giá  Nổi bật:  Gợi ý tìm kiếm  Giao diện mua hàng dễ dàng, dễ hiểu 2.2.2 Đúc kết:  Về giao diện:  Phải đơn giản, ưa nhìn, bắt mắt, dễ sử dụng  Khơng q nhiều thơng tin layout  Chức cần có:  Xem danh sách loại giày  Xem danh sách loại tìm kiếm  Tim kiếm loại giày dễ dàng theo chữ  Xem chi tiết đô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 riêng dự kiến thực hiện:  Chức liên hệ người dùng admin Chương Kết nối Firebase Android Studio 3.1 Kết nối Firebase android : 3.1.1 Mục đích:  Thiết kế giao diện dành quản trị viên (admin) với chức  Thêm, sửa , xóa viết (cơng thức ă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 người dùng đăng lên  Quản lí thơng tin khác thực đơn, bình luận, lịch sử ăn, danh sách theo dõi bếp, quản lí bếp người dùng,…  Thiết kế giao diện dành cho user với chức :  Xem chọn loại hàng cần mua  Hủy đơn hàng (nếu cần) 3.1.2 Thiết lập kết nối Bây bước kết nối với Firebase để sử dụng Realtime Database Firebase Ta làm sau: n Hình Kết nối Realtime Database Firebase Vào menu Tools/ chọn Firbase, lúc cửa sổ hướng dẫn cách sử Firebase hiển thị góc phải cửa sổ Android Studio: Hình Kết nối Realtime Database Firebase n Trong hình trên, Firebase cung cấp nhiều công cụ, nhiên ta quan tâm tới Realtime Database thơi nha Vì ta nhấn vào Realtime Database: Hình Kết nối Realtime Database Firebase Lúc ta thấy nút “Save and retrieve data” hiển thị hình Bấm vào nha Trình trợ giúp cung cấp cho ta bước thao tác (bao gốm kết nối hướng dẫn lập trình, ta dùng bước đủ 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 n Hình Kết nối Realtime Database Firebase n 3.2 Tạo Database Storage Firebase: 3.2.1 Tạo Database Gồm có liệu Admin, Cart List , Products Users Hình Realtime Database Firebase 10 n 3.2.2 Upload file hình ảnh lên Hình Realtime Database Firebase Chương Xây dựng ứng dụng android 4.1 Mục tiêu 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 dành cho người dùng không dành cho quản trị viên thực thao tác quản lí hệ thống Ứng dụng có nhiều chức đa dạng dễ sử dụng Quản trị viên dùng ứng dụng để đăng sửa xóa viết đăng lên Dịch vụ API để lưu trữ đồng liệu real-time (thời gian thực) 4.2 Xây dựng: 4.2.1 - Các Activity (13 Activities): Đăng nhập : LoginActivity Đăng ký: RegisterActivity Màn hình chính: MainActivity Giao diện admin : AdminActivity Admin thêm sản phẩm: AdminAddNewProductActivity Admin thêm loại giày: AdminCategoryActivity 11 n - 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 đôi giày : ProductDetailsActivity Tìm kiếm: SearchActivity Chỉnh sửa tài khoản User: SettingActivity 4.2.2 - Các model chịu trách nhiệm lưu trữ thơng tin, xử lí thơng tin trả đưa lên Một số model như:  AdminOrders: Thông tin khách hàng oder (tên, sdt, địa , email , tổng tiền )  Cart: Thơng tin hàng (Bao gồm tên , giá , số lượng )  Products: Model để lưu trữ thông tin sản phẩm  Users: Model dùng để lưu trữ thông tin người dùng (tên , sdt , mật khẩu, hình ảnh địa ) 4.2.3 - Prevalent package: Kiểm tra tài khoản có tồn hay khơng Thực request đến Database Firebase 4.2.4 - Model package (4 Models): ViewHolder package (3 ViewHolders): CartViewHolder: giao diện cho mục Recycler View giỏ hàng OrderViewHolder: giao diện cho mục Recycler View thêm vào ProductHolder: giao diện cho mục Recycler View sản phẩm 4.2.5 Thư mục resources (res folder):  Anim folder: animation (Hoạt hình động)  Drawble folder: hình ảnh, icon cho giao diện  Layout folder: giao diện activity, item recycler view  Menu folder: giao diện menu  Values folder: giá trị màu sắc, phong cách biến string lưu trữ 4.3 Sản phẩm ứng dụng bán giày”SNEAKERf”: 4.3.1 - - Giao diện hình Đăng nhập – Đăng ký: Ở giao diện đăng nhập, người dùng cần nhập vào email mật tài khoản họ có tài khoản, hệ thống kiểm tra xem tài khoản mật có hợp lệ hay khơng, hợp lệ chuyển vào hình chính, thất bại in thơng báo Trong trường hợp người dùng chưa có tài khoản hệ thống, cần nhấp vào nút “Đăng Ký” chuyển đến giao diện đăng ký tài khoản Tại người dùng cần nhập điền đầy đủ thông tin cần thiết chọn đăng ký Hệ thống thông báo thành công hay không, thành công chuyển đến giao diện đăng nhập để đăng nhập lại, thất bại hệ thống đưa thông báo 12 n Hình Android app - Giao diện đăng nhập ,đăng ký 13 n 4.3.2 Giao diện Home(Home Activity): Hình 10 Android app - Giao diện hình 14 n - Giao diện Home gồm Recycleview sản phẩn nhờ đổ liệu từ Firebase Phía toolbar có chưa nút giỏ hàng , tìm kiếm, giày, cài đặt đăng xuất Người dùng nhấn vào tìm kiếm để tìm kiếm loại giày thích muốn xem thơng tin tiến hành sửa xóa nhấp vào nút cài đặt 4.3.3 Giao diện chi tiết mô tả giá giày : 15 n Hình 11 Android app - Giao diện chi tiết mô tả đôi giày - Giao diện mô tả chứa thông tin chi tiết tên giày , giá mô tả Ở ta thấy phầm chọn số lượng thêm vào giỏ hàng thích hủy khơng thích 16 n 4.3.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 ăn - Người dùng nhấp vào icon tìm kiếm cơng cụ tiến hành nhập vào gợi ý tìm kiếm, hệ thống tự động nhận diện hiển thị kết 17 n 4.3.5 Giao diện thông tin user: Hình 13 Android app - Giao diện thông tin user - Ở giao diện người dùng xem thơng tin chi tiết Khi nhấp vào nút ba gạch ngang bên menu với lựa chọn, muốn thay đổi ta tiến hành thay đổi cập nhật thông tin 18 n 4.3.6 Giao diện Admin Hình 14 Android app - Giao diện đăng nhập admin - Ở giao diện bạn admin bạn chọn “Tơi Admin” tiến hành đăng nhập vào để đăng cập nhật sản phẩm 19 n KẾT LUẬN Kết đạt Tạo ứng dụng hoàn chỉnh sử dụng , giao diện đơn giản dể hiểu , dễ sử dụng Hướng phát triển Hoàn thiện mặt thẩm mỹ chức Thêm chức đa dạng 20 n TÀI LIỆU THAM KHẢO 1.Tích hợp realtime database Firebase vào Android (https://viblo.asia/p/tich-hoprealtime-database-trong-firebase-vao-android-Az45bbyV5xY) Phát triển ứng dụng sở liệu thời gian thực với Firebase (https://duythanhcse.wordpress.com/2018/10/11/phat-trien-ung-dung-co-so-du-lieuthoi-gian-thuc-voi-firebase-phan-1/) 3.Video hương dẫn tạo app bán hàng online (https://www.youtube.com/watch? v=LKQRyGtt72M&list=PLxefhmF0pcPlqmH_VfWneUjfuqhreUz-O&index=48) 21 n