Ionic framwork, xây dựng website bán hàng nội thất

BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT ĐỒ ÁN CHUYÊN NGHÀNH NGHIÊN CỨU IONIC FRAMEWORK XÂY DỰNG WEBSITE BÁN HÀNG NỘI THẤT Giảng viên hướng dẫn : Th.S Trần Bửu Dung Sinh viên thực : Lê Quyết Toàn Mã sinh viên : 161250543133 Khoa : Điện – Điện tử Ngành : Hệ Thống Thông Tin Quản Lý Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Đà Nẵng, tháng 6/2019 MỤC LỤC DANH MỤC HÌNH ẢNH DANH MỤC BẢNG Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung LỜI CẢM ƠN Em xin gửi lời cám ơn chân thành sâu sắc tới cô Trần Bửu Dung hướng dẫn, giúp đỡ em suốt thời gian thực đề tài Em xin chân thành cám ơn thầy cô mơn tận tình giảng dạy, truyền đạt kiến thức cho em kỳ học vừa qua Xin chân thành cám ơn tất bạn bè động viên, giúp đỡ em thời gian học tập hoàn thành đồ án Mặc dù cố gắng nhiều khơng thể tránh khỏi thiếu sót Em kính mong nhận góp ý q Thầy Cơ bạn để hồn thnah tốt Đà nẵng, tháng năm 2019 Sinh viên thực Lê Quyết Toàn Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… Đà Nẵng, tháng ngày 2019 Giáo viên hướng dẫn Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung LỜI CAM ĐOAN Tôi xin cam đoan Những nội dung luận văn em thực hướng dẫn cô Trần Bửu Dung Mọi tham khảo luận văn trích dẫn rõ ràng tên tác giả, tên cơng trình, thời gian, địa điểm cơng bố Mọi chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, em xin chịu hoàn toàn trách nhiệm Sinh viên Lê Quyết Toàn Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung TỔNG QUAN ĐỀ TÀI Lý chọn đề tài Với phát triển điện thoại nhu cầu sử dụng ngày tăng, để thuận tiện cho việc quảng bá thương hiệu sản phẩm tiếp cận khách hàng rộng rãi cửa hàng cần có app chạy nhiều tảng iOS, Android, máy tính…mà Ionic framwork đáp ứng yêu cầu đó, vậy, em chọn đề tài “NGHIÊN CỨU IONIC FRAMWORK XÂY DỰNG ỨNG DỤNG BÁN HÀNG NỘI THẤT TRÊN ĐIỆN THOẠI DI ĐỘNG” Công nghệ sử dụng - Xây dựng web service PHP, JavaScript, CSS, HTML - Cơng nghệ : + Ionic framwork có tích hợp Angular + CSS + HTML + JavaScript + Hệ quản trị sơ sở liệu: MySQL Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung CHƯƠNG I CƠ SỞ LÝ THUYẾT Giới thiệu Ionic framwork 1.1 Giới thiệu Ionic framework dùng để phát triển ứng dụng Hybrid cho mobile Hybrid hiểu lai ứng dụng native web mobile Bản chất hybrid giao diện viết html, css, javascript cho phép gọi api native hệ thống nên thao tác với hệ điều hành mobile ứng dụng native khác Ionic phát triển dựa Apache Cordova(trước gọi phonegap) dùng angular1, angular2 để làm core hệ thống Các tính Cordova Command Line Interface (Cordova CLI): tool dùng để khởi tạo project , xây dựng ứng dụng nhiều nên tảng khác thêm nhiều plugin có ích để giúp việc phát triển dễ dàng Cordova Core Components: Cordova đưa tập thành phần mà ứng dụng di động cần đến Cordova Plugins: Cordova đưa API để sử dụng chức thiết bị di động cảm biến, camera, GPS… 1.2 Ưu điểm nhược điểm - Ưu điểm: + Dễ học, thời gian phát triển nhanh, sử dụng kỹ từ lập trình web + Đa tảng + Khả truy cập đến tính thiết bị hệ điều hành bluetooth, camera, Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung + Dễ dàng thiết kế giao diện cho thiết bị có kích cỡ khác + Việc sử dụng AngularJS làm core giúp phần xử lý UI linh động so với javasript hay thư viện Jquery + Việc sử dụng AngularJS làm core mang lại lợi lớn so với framework cho ứng dụng hybrid khác + Ionic cung cấp đầy đủ thành phần giao diện người dùng Pull-to-Refresh, Infinite-loader, tabs, … - Nhược điểm: + Vẫn giai đoạn phát triển + Một số API chưa hỗ trợ để giao tiếp với thiết bị + Hiệu chưa cao ổn định + Cộng đồng phát triển ứng dụng chưa đơng 1.3 Thành phần Ionic framwork: - Slides Nếu bạn muốn ứng dụng bạn có hướng dẫn cho người dùng lần đầu, thành phần Slides giúp dễ dàng tạo hướng dẫn Thành phần cho phép bạn tạo layout dựa trang mà người dùng vuốt qua để đọc tất ứng dụng bạn - Action Sheet Các Action Sheet menu trượt lên từ phía hình Một Action Sheet thể lớp hình, bạn phải bỏ qua cách bấm vào khoảng trống chọn tùy chọn từ menu Điều thường sử dụng cho xác nhận chẳng hạn bạn xoá bỏ tập tin thiết bị iOS bạn - Segments Segments giống tab Chúng sử dụng để nhóm nội dung liên quan lại với theo cách mà người dùng nhìn thấy nội dung Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung segment (phân đoạn) chọn Segments thường sử dụng với danh sách để lọc phần tử liên quan - Toast Toast biến thể nhẹ cảnh báo Chúng thường sử dụng để thông báo cho người dùng xảy mà khơng u cầu hành động từ người dùng Chúng thường hiển thị đầu cuối trang để không làm ảnh hưởng đến nội dung hiển thị Chúng biến sau số giây cụ thể Giới thiệu Angular 2.1 Giới thiệu - Angular tảng khung để xây dựng ứng dụng khách HTML TypeScript Angular viết TypeScript Nó thực chức cốt lõi tùy chọn tập hợp thư viện TypeScript mà bạn nhập vào ứng dụng - Các khối xây dựng ứng dụng Angular NgModules , cung cấp bối cảnh biên dịch cho thành phần NgModules thu thập mã liên quan vào chức năng; ứng dụng Angular xác định NgModules Một ứng dụng ln có mô-đun gốc cho phép bootstrapping thường có nhiều mơ-đun tính 2.2 Ưu điểm nhược điểm - - Ưu điểm: • • Cung cấp khả tạo Single Page Aplication dễ dàng Cung cấp khả kiên kết liệu tới HTML, khiến cho người dùng cảm giác linh • • • • hoạt, thân thiện Dễ dàng viết Unit test Dễ dàng tái sử dụng component Giúp lập trình viên viết code với nhiều chức Chạy loại trình duyệt, PC lẫn mobile Nhược điểm: Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 10 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung 1.3 Quản lý bảng a Tài khoản Hình Users (tài khoản) b Khách hàng Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 25 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Hình Customer (Khách hàng) c Nhân viên Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 26 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Hình 5 Employees (nhân viên) d Sản phẩm Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 27 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Hình Products (sản phẩm) e Loại sản phẩm Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 28 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Hình Categories ( Loại sản phẩm) f Đơn hàng Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 29 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Hình Order ( đơn hàng) g Phiếu nhập Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 30 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Hình Bills (phiếu nhập) h Nhà cung cấp Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 31 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Hình 10 Suppliers (nhà cung cấp) Giao diện ứng dụng 2.1 Màn hình giới thiệu (splash screen) Hình 11 Màn hình giới thiệu Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 32 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung 2.2 Trang chủ Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 33 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 34 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Hình 12 trang chủ 2.3 Đăng ký Hình 13 Đăng ký Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 35 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung 2.4 Đăng nhập Hình 14 Đăng nhập 2.5 Sản phẩm Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 36 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Hình 15 Trang sản phẩm 2.6 Giỏ hàng Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 37 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung Hình 16 Giỏ hàng KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN KẾT LUẬN Qua trình thực đồ án, em tổng hợp lại kiến thức thời gian học trường Đồng thời, em tìm hiểu nắm quy trình xây dựng app bán hàng, chủ động việc tìm kiếm thơng tin để phục vụ công việc Đồ án xử lý chức theo yêu cầu cửa hàng Vì thời gian có hạn, kinh nghiệm thực tế chưa nhiều nên việc phân tích tốn thực tương đối đầy đủ, nhiên chưa mô tả đầy đủ khía cạnh vấn đề Xây dựng hệ thống với chức chính, có chức chưa đầy đủ, nhiều chức có chưa tiện dụng đơn giản HƯỚNG PHÁT TRIỂN Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 38 BÁO CÁO ĐỒ ÁN CHUYÊN NGHÀNH GVHD: Th.S Trần Bửu Dung + + + Tối ưu hóa hệ thống để app hoạt động nhanh Nâng cấp hoàn thiện giao diện chức Phát triển thêm chức người dùng đăng nhập qua mạng xã hội facebook, google TÀI LIỆU THAM KHẢO [1] https://ionicframework.com/ [2] https://www.w3schools.com/ Sinh viên thực hiện: Lê Quyết Toàn MSV: 161250543133 39 ... khách hàng rộng rãi cửa hàng cần có app chạy nhiều tảng iOS, Android, máy tính…mà Ionic framwork đáp ứng u cầu đó, vậy, em chọn đề tài “NGHIÊN CỨU IONIC FRAMWORK XÂY DỰNG ỨNG DỤNG BÁN HÀNG NỘI THẤT... phẩm + Xử lý đơn hàng + Phân quyền - Nhân viên bán hàng + Đăng nhập + Xem thông tin đơn hàng + Tìm kiếm + Xử lý đơn hàng - Nhân viên kho + Cập nhật phiếu nhập + Tìm kiếm đơn hàng + Số lượng sản... lại Đặt hàng Tóm tắt: Khách hàng thành viên sử dụng usecase “Đặt mua” để tham gia mua hàng trực tuyến Actor: Khách hàng thành viên - Các dòng kiện • B1 Trên giao diện sản phẩm , Khách hàng thành