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

Lý do chọn đề tài Với sự phát triển của điện thoại và nhu cầu sử dụng ngày càng tăng, để thuậntiện cho việc quảng bá thương hiệu sản phẩm cũng như tiếp cận khách hàng rộngrãi hơn thì cửa

Trang 1

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT

Trang 2

Đà Nẵng, tháng 6/2019

MỤC LỤC

DANH MỤC HÌNH ẢNH

Trang 4

Lê Quyết Toàn

Trang 5

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

………

Đà Nẵng, tháng 6 ngày 2019 Giáo viên hướng dẫn

Trang 6

LỜI CAM ĐOAN

Tôi xin cam đoan

1. Những nội dung trong luận văn này do em thực hiện dưới sự hướng dẫn của côTrần Bửu Dung

2. Mọi tham khảo trong luận văn đều được trích dẫn rõ ràng tên tác giả, tên côngtrình, thời gian, địa điểm công bố

3. Mọi sao chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, em xin chịuhoàn toàn trách nhiệm

Sinh viên

Lê Quyết Toàn

Trang 7

TỔNG QUAN ĐỀ TÀI

1. Lý do chọn đề tài

Với sự phát triển của điện thoại và nhu cầu sử dụng ngày càng tăng, để thuậntiện cho việc quảng bá thương hiệu sản phẩm cũng như tiếp cận khách hàng rộngrãi hơn thì cửa hàng cần có app chạy trên nhiều nền tảng như iOS, Android, máytính…mà Ionic framwork có thể đáp ứng được những yêu cầu đó, chính vì vậy,

em đã chọn đề tài “NGHIÊN CỨU IONIC FRAMWORK XÂY DỰNG ỨNGDỤNG BÁN HÀNG NỘI THẤT TRÊN ĐIỆN THOẠI DI ĐỘNG”

Trang 8

Command Line Interface (Cordova CLI): đây là một tool dùng để khởi tạo mộtproject , xây dựng ứng dụng trên nhiều nên tảng khác nhau cũng như là thêm nhiềuplugin có ích để giúp việc phát triển dễ dàng hơn.

Cordova Core Components: Cordova đưa ra một tập các thành phần mà mọi ứngdụng di động cần đến

Cordova Plugins: Cordova đưa ra các API để sử dụng các chức năng của thiết bị

di động như cảm biến, camera, GPS…

1.2. Ưu điểm và nhược điểm

Trang 9

+ Dễ dàng thiết kế giao diện cho các thiết bị có kích cỡ khác nhau

+ Việc sử dụng AngularJS làm core giúp phần xử lý UI linh động hơn so với javasripthay thư viện Jquery

+ Việc sử dụng AngularJS làm core cũng mang lại lợi thế lớn so với các framework choứng dụng hybrid khác

+ Ionic cung cấp đầy đủ các thành phần trong giao diện người dùng như Pull-to-Refresh,Infinite-loader, tabs, …

- Nhược điểm:

+ Vẫn còn trong giai đoạn phát triển

+ Một số API cũng chưa được hỗ trợ để giao tiếp với các thiết bị

+ Hiệu năng vẫn chưa cao và ổn định

+ Cộng đồng phát triển ứng dụng vẫn còn chưa đông

1.3. Thành phần trong Ionic framwork:

- Slides

Nếu bạn muốn ứng dụng của bạn có một hướng dẫn cho người dùng lần đầu,thì thành phần Slides giúp dễ dàng tạo ra một hướng dẫn như vậy Thành phần này chophép bạn tạo ra các layout dựa trên trang mà người dùng có thể vuốt qua để đọc tất cả

về ứng dụng của bạn

- Action Sheet

Các Action Sheet là các menu trượt lên từ phía dưới màn hình Một ActionSheet được thể hiện trên lớp trên cùng của màn hình, do đó bạn hoặc là phải bỏ qua nóbằng cách bấm vào khoảng trống hoặc chọn một tùy chọn từ menu Điều này thườngđược sử dụng cho các xác nhận chẳng hạn như khi bạn xoá bỏ một tập tin trên thiết bịiOS của bạn

- Segments

Segments giống như các tab Chúng được sử dụng để nhóm các nội dung liênquan lại với nhau theo một cách mà người dùng chỉ có thể nhìn thấy các nội dung của

Trang 10

segment (phân đoạn) hiện đang được chọn Segments thường được sử dụng với danhsách để lọc các phần tử liên quan.

- Toast

Toast là biến thể nhẹ của cảnh báo Chúng thường được sử dụng để thông báocho người dùng một cái gì đó đã xảy ra mà không yêu cầu bất kỳ hành động nào từngười dùng Chúng thường được hiển thị ở đầu hoặc cuối trang để không làm ảnhhưởng đến nội dung đang được hiển thị Chúng cũng biến mất sau một số giây cụ thể

2.Giới thiệu về Angular

2.1. Giới thiệu

- Angular là một nền tảng và khung để xây dựng các ứng dụng khách trong HTML vàTypeScript Angular được viết bằng TypeScript Nó thực hiện chức năng cốt lõi và tùychọn như một tập hợp các thư viện TypeScript mà bạn nhập vào ứng dụng của mình

- Các khối xây dựng cơ bản của ứng dụng Angular là NgModules , cung cấp bối cảnhbiên dịch cho các thành phần NgModules thu thập mã liên quan vào các bộ chứcnăng; một ứng dụng Angular được xác định bởi một bộ NgModules Một ứng dụng

luôn có ít nhất một mô-đun gốc cho phép bootstrapping và thường có nhiều mô-đun tính năng hơn

- Ưu điểm:

• Cung cấp khả năng tạo ra các Single Page Aplication dễ dàng

• Cung cấp khả năng kiên kết dữ liệu tới HTML, khiến cho người dùng cảm giác linhhoạ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 ít hơn với nhiều chức năng hơn

• Chạy được trên các loại trình duyệt, trên cả PC lẫn mobile

Trang 11

• Không an toàn : được phát triển từ javascript cho nên ứng dụng được viết bởiAngularJS không an toàn Nên có sự bảo mật và xác thực phía server sẽ giúp ứng dụngtrở nên an toàn hơn.

• Phu thuộc : Nếu người sử dụng ứng dụng của vô hiệu hóa JavaScript thì sẽ chỉ nhìnthấy trang cơ bản

2.3. Thành phần trong Angular

- Ng-app: Các ng-app chỉ thị AngularJS rằng đây là phần tử gốc của ứng dụng

AngularJS Tất cả các ứng dụng AngularJS phải có phần tử gốc Bạn chỉ có thể có mộtng-app chỉ thị trong tài liệu HTML của mình Nếu có nhiều hơn một ng-app chỉ thịxuất hiện, liên kết đầu tiên sẽ được sử dụng

- Ng-model: Chỉ thị ng-model liên kết giá trị của các điều khiển HTML (đầu vào, chọn,

văn bản) với dữ liệu ứng dụng Với ng-model, bạn có thể liên kết giá trị của trườngđầu vào với biến được tạo trong AngularJS

- Ng-bind: Các ng-bind AngularJS để thay thế nội dung của một phần tử HTML với giá

trị của một biến, hoặc biểu hiện nhất định Nếu giá trị của biến hoặc biểu thức thay đổithì nội dung của phần tử HTML được chỉ định cũng sẽ được thay đổi

3. Giới thiệu mô hình MVC

3.1. MVC là gì?

MVC là viết tắt của Model – View – Controller Là một kiến trúc phần mềm hay

mô hình thiết kế được sử dụng trong kỹ thuật phần mềm Nói cho dễ hiểu, nó là môhình phân bố source code thành 3 phần, mỗi thành phần có một nhiệm vụ riêng biệt vàđộc lập với các thành phần khác

Trang 12

đối tượng GUI như textbox, images… Hiểu một cách đơn giản, nó là tập hợp các formhoặc các file HTML.

3.3. Luồng đi trong MVC

Hình 2 1 Mô Hình MVC

Khi có một yêu cầu từ phía client gửi đến server, Bộ phận controller có nhiệm vụnhận yêu cầu, xử lý yêu cầu đó Và nếu cần, nó sẽ gọi đến phần model, vốn là bộ phầnlàm việc với Database

Sau khi xử lý xong, toàn bộ kết quả được đẩy về phần View Tại View, sẽ gen ra

mã Html tạo nên giao diện, và trả toàn bộ html về trình duyệt để hiển thị

Trang 13

- Ưu điểm: Thể hiện tính chuyên nghiệp trong lập trình, phân tích thiết kế Do được

chia thành các thành phần độc lập nên giúp phát triển ứng dụng nhanh, đơn giản, dễnâng cấp, bảo trì

- Nhược điểm: Đối với dự án nhỏ việc áp dụng mô hình MC gây cồng kềnh, tốn thời

gian trong quá trình phát triển Tốn thời gian trung chuyển dữ liệu của các thành phần

3.5.

Trang 15

Hình 3 1 Sơ đồ ERD

2. Đặc tả usecase

- Usecase đăng ký thành viên

- Tóm tắt: Khách hàng viếng thăm sử dụng usecase “Đăng ký” để tạo tài khoản cho

mình trên website

- Actor: Khách hàng viếng thăm

- Các bước thực hiện:

• B1 Trên giao diện đăng nhập, hhách hàng viếng thăm chọn Đăng ký

• B2 Hệ thống sẽ hiển thị giao diện đăng ký và khách hàng viếng thăm nhập thông tinvào giao diện rồi bấm đăng ký để lưu vào cơ sở dữ liệu

• B3 Kết thúc Usecase

- Usecase quản lý đăng nhập

- Đối tượng sử dụng (actor) bao gồm: khách hàng thành viên, nhân viên, admin

- Use case này mô tả các bước đăng nhập của các actor vào hệ thống

- Các bước thực hiện:

Trang 16

• B1 Hệ thống yêu cầu actor cung cấp thông tin đăng nhập gồm tên đăng nhập và mật khẩu.

• B2 Actor nhập xong thông tin đăng nhập và click nút đăng nhập

• B3 Hệ thống check lại thông tin đăng nhập và thông báo thành công/thất bại cho actor.Nếu đăng nhập thành công hệ thống dựa trên thông tin đăng nhập sẽ đồng thời phân quyền tùy theo loại vai trò Nếu đăng nhập thất bại, hệ thống sẽ hiện thông báo cho người dùng và yêu cầu đăng nhập lại

• B1 Trên giao diện sản phẩm , Khách hàng thành viên chọn Đặt mua

• B2 Hệ thống sẽ hiển thị giao diện chứa thông tin khách hàng và danh sách các sảnphẩm khách hàng đặt mua Sau khi nhập đầy đủ thông tin thì khách hàng xác nhận đặtmua

- Actor: Khách hàng, nhân viên, admin

• Tại trang sản phẩm, nhập từ khóa cần tìm tại seach, hệ thống sẽ hiển thị tất cả sản phẩm trùng với từ khóa cần tìm

- Actor: nhân viên

• Tại trang quản lý đơn hàng, bấm chọn đơn hàng cần xem hoặc nhập từ khóa cần tìm của đơn hàng, rồi chọn đơn hàng cần xem

Trang 17

CHƯƠNG III

THIẾT KẾ HỆ THỐNG

1.Thiết kế cơ sở dữ liệu

1.1 Bảng Users (tài khoản)

khoản varchar(50)

thoại varchar(20)

Bảng 4 2 Bảng Employees ( nhân viên )

1.3 Bảng Customers(Bảng khách hàng)

Trang 18

3 Birthday Ngày sinh date

Trang 19

4 Price Giá double

Bảng 4 8 Bảng Order ( đơn hàng)

1.9 Bảng orders_detail (chi tiết đơn hàng)

phẩm

Int(5) Khóa ngoại

Bảng 4 9 Bảng Order_detail ( chi tiết đơn hàng)

1.10 Bảng Bill (phiếu nhập)

Trang 20

2 Supp_id Mã NCC Int(5) Khóa ngoại

Bảng 4 10 Bảng Bills ( Phiếu nhập)

1.11 Bảng bill_detail(chi tiết phiếu nhập)

Bảng 4 11 Bảng Bill_detail( chi tiết phiếu nhập)

Trang 21

GVHD: Th.S Trần Bửu Dung

Hình 4 1 Sơ đồ ERD

2. Sơ đồ ERD

Trang 22

Trang 23

3 Sơ đồ Relationship

Trang 26

Hình 5 4 Customer (Khách hàng)

c. Nhân viên

Trang 27

Hình 5 5 Employees (nhân viên)

d. Sản phẩm

Trang 28

Hình 5 6 Products (sản phẩm)

e. Loại sản phẩm

Trang 29

Hình 5 7 Categories ( Loại sản phẩm)

f. Đơn hàng

Trang 30

Hình 5 8 Order ( đơn hàng)

g. Phiếu nhập

Trang 31

Hình 5 9 Bills (phiếu nhập)

h. Nhà cung cấp

Trang 33

2.2 Trang chủ

Trang 34

Trang 35

Hình 5 12 trang chủ

2.3 Đăng ký

Hình 5 13 Đăng ký

Trang 36

2.4 Đăng nhập

Hình 5 14 Đăng nhập

2.5 Sản phẩm

Trang 37

Hình 5 15 Trang sản phẩm

2.6 Giỏ hàng

Trang 38

Hình 5 16 Giỏ hàng

KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN

Qua quá trình thực hiện đồ án, em đã tổng hợp lại được kiến thức trong thời gian đã học tại trường

Đồng thời, em đã tìm hiểu và nắm được quy trình xây dựng app bán hàng, có thế chủ động trong việc tìm kiếm cácthông tin để phục vụ công việc Đồ án cơ bản đã xử lý các chức năng theo yêu cầu của 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 bài toán về cơ bản đã thực hiện tương đối đầy

đủ, tuy nhiên chưa mô tả đầy đủ mọi khía cạnh của vấn đề

Xây dựng được hệ thống nhưng chỉ với các chức năng chính, có chức năng chưa đầy đủ, nhiều chức năng có nhưng

Trang 39

GVHD: Th.S Trần Bửu Dung + Tối ưu hóa hệ thống để app hoạt động nhanh hơn

+ Nâng cấp và hoàn thiện giao diện và các chức năng

+ Phát triển thêm các chức năng người dùng đăng nhập qua mạng xã hội như facebook, google

TÀI LIỆU THAM KHẢO

[1] https://ionicframework.com/

[2] https://www.w3schools.com/

Định dạng
Số trang	39
Dung lượng	2,05 MB