Đồ án chuyên ngành 1 Đề tài xây dựng ứng dụng Đa nền tảng về thương mại Điện tử sản phẩm handmade

Chính vì những ưu điểm của lập trình ứng dụng đa nền tảng nên là chúng em lựa chọn để thực hiện đồ án chuyên ngành lần này.Xâydựng một ứng dụng đa nền tảng về thương mại điện tử sản phẩm

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

VIỆT-HÀN

ĐỒ ÁN CHUYÊN NGÀNH 1

TẢNG VỀ THƯƠNG MẠI ĐIỆN TỬ

2

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

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Chữ kí củ a gi ảng viên hướng dẫn

LỜI C ẢM ƠN

Lời đầu tiên, chúng em xin gửi lời cảm ơn chân thành đến Trường Đại Học Công nghệ Thông tin và Truy n thông Vi - ề ệt Hàn đã tạo cơ hội cho chúng em được h c t p ọ ậtại một ngôi trường có cơ sở v t chậ ất hàng đầu, v i chớ ất lượng gi ng d y vô cùng chuyên ả ạnghiệp

Trong su t th i gian h c t p và rèn luy n tố ờ ọ ậ ệ ại Trường Đại H c Công ngh Thông ọ ệtin và Truy n thông Vi - ề ệt Hàn cho đến nay, chúng em đã nhận đượ ấc r t nhiều sự quan tâm, giúp đỡ của quý Thầy cô và bạn bè

Chúng em g i l i cử ờ ảm ơn đặc biệt đế thần y Nguy n Thanh, giễ ảng viên hướng d n ẫ

đề tài đồ án chuyên ngành của chúng em trong quá trình làm đồ án chuyên ngành Nhờ

sự giúp đỡ nhiệt tình, nhẫn nại dành thời gian hướng dẫn, chỉ bảo, trả lời những thắc mắc trong suốt quá trình để chúng em có kết quả tốt nhất

Với điều kiện thời gian cũng như kinh nghiệm còn hạn ch , bài báo cáo này không ếthể tránh được những thiếu sót Chúng em rất mong nhận được sự chỉ bảo, đóng góp ý kiến c a các quý thủ ầy cô để chúng em có điều ki n b sung, nâng cao ý th c c a mình, ệ ổ ứ ủphục vụ tốt hơn công tác thự ế sau này c t

Chúng em xin chân thành cảm ơn!

Đà Nẵng, ngày 4 tháng 12 năm 2022 Sinh viên thực hiện

4

MỤC LỤC

MỞ ĐẦU

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

Một doanh nghiệp khi lựa chọn sử dụng ứng dụng luôn nhắm đến nhiều mục tiêu Trong đó có thu hút được càng nhiều khách hàng càng tốt và gia tăng trải nghiệm cho khách hàng Tất cả đều phục vụ cho việc nâng cao chất lượng sản phẩm/dịch vụ

mà doanh nghiệp đang cung cấp Mà hiện nay, phần lớn các khách hàng sử dụng các nền tảng khác nhau Vì vậy việc lựa chọn lập trình ứng dụng đa nền tảng trở nên rất cần thiết

Chính vì những ưu điểm của lập trình ứng dụng đa nền tảng nên là chúng em lựa chọn để thực hiện đồ án chuyên ngành lần này.Xâydựng một ứng dụng đa nền tảng

về thương mại điện tử sản phẩm handmade có giao diện bắt mắt, đơn giản, dễ sử dụng đối với khách hàng, phù hợp với xu thế năng động, phát triển hiện nay

2 Mục tiêu và nhi m v nghiên c u ệ ụ ứ

• Vận d ng t t c ki n thụ ấ ả ế ức đã học được trong su t th i gian qua trong nhà ố ờtrường đồng th i nghiên cờ ứu nhưng kiến th c mứ ới để đáp ứng nhu c u cho ầviệc th c hiự ện d án.ự

• Nghiên cứu react-native, firebase, react-redux

• Tạo ra được ứng dụng trên android và website, thao tác được v i nh ng ớ ữchức năng cơ bản của ứng dụng

3 Đối tượng nghiên cứu

6

CHƯƠNG I: CƠ SỞ LÝ THUYẾT

1.1 React Native

1.1.1 Giới thi u ệ

React Native là một framework mã nguồn mở được sáng tạo bởi Facebook Nó

được sử dụng để phát triển ứng dụng di động Android, iOS, Web và UWP bằng cách cho phép các nhà phát triển sử dụng React cùng với môi trường ứng dụng gốc (native) Trên các phiên bản hệ điều hành Windows đều được trang bị sẵn tính năng Remote Desktop Tuy nhiên để có thể sử dụng tính năng này bạn sẽ phải kích hoạt chúng trước tiên

• Native App là tên gọi của những ứng dụng được xây dựng và phát triển bằng những công cụ do chính nhà phát triển cung cấp cho lập trình viên Hai nhà phát triển App hàng đầu là Android và iOs

• Hybrid App là sự kết hợp giữa ứng dụng Web và ứng dụng mobile Người dùng có thể cài đặt lên điện thoại của mình giống như những ứng dụng Native bình thường, vừa có thể tìm thấy ở những kho ứng dụng trả phí

1.1.2 Nguyên lý hoạt động

React Native được viết bằng sự kết hợp của JavaScript và JXL, một mã đánh dấu đặc biệt giống với XML Framework có khả năng thao tác với cả hai thread là main thread và JS thread Mỗi thread đều có vai trò riêng biệt

• Main thread: Đảm nhiệm vai trò cập nhật giao diện người dùng và xử lý tương tác người dùng

• JS thread: Đảm bảo hệ thống hoạt động hiệu quả thông qua việc thực thi và

xử lý code JavaScript

Nguyên lý hoạt động của RN gần như tương tự với React React Native không sử dụng thao tác với DOM và HTML mà chạy một quá trình xử lý nền với nền tảng gốc

React Native sử dụng Bridge (cầu nối) Mặc dù các thread JavaScript và native được viết bằng các ngôn ngữ hoàn toàn khác nhau, nhưng Bridge là tính năng cầu nối giúp thao tác hai chiều có thể thực hiện dễ dàng hơn

1.1.3 Ưu điểm

• Có khả năng tái sử dụng code

• Sở hữu cộng đồng hỗ trợ cực kỳ lớn mạnh

• Có tính ổn định và khả năng tối ưu cao

• Thời gian học không quá dài

1.1.4 Nhược điểm

• Vẫn còn thiếu nhiều component quan trọng

• Không sử dụng được để tạo ra các game có đồ họa cao và luật chơi phức tạp

• Hiệu năng kém hơn so với khi sử dụng native app

• Không thích hợp khi ứng dụng vào các app cần khả năng tính toán cao

• Vì sử dụng JavaScript nên chưa có sự bảo mật an toàn

• Khả năng tùy biến trong một số module chưa thật sự tốt

• Không thích hợp khi ứng dụng vào các app cần khả năng tính toán cao

1.2 React Redux

1.2.1 Giới thiệu

Redux là một thư viện Javascript giúp t o ra thành m t l p qu n lý tr ng thái cạ ộ ớ ả ạ ủa ứng dụng Được dựa trên nền tảng tư tưởng của ki n trúc Flux do Facebook giới ếthiệu, do v y ậ Redux thường là b ộ đôi kết hợp hoàn h o v i React (React Js và React ả ớNative)

1.2.2 Nguyên lý hoạt động

• Nguyên lý thứ 1: tất cả ọi thứ mà thay đổ m i trong ng d ng, bao gứ ụ ồm dữ liệu

và tr ng thái giao diên ạ – UI state, được lưu trong đối tượng g i là state hoọ ặc state tree.Ttrong quá trình hoạt động của ứng d ng, b ph ụ ị ụ thuộc khá nhi u y u tề ế ố ữ : d

liệu từ máy chủ ban đầu, thao tác của người dùng (nh p d ậ ữ ệu, click menu, libutton ), d u c p nhữ liệ ậ ật từ máy chủ ữ liệu được tính toán trong ứ, d ng d ng (Ví ụdụ: tính toán số dư tài khoản dựa trên biến động của tỉ giá) nh ng y u tữ ế ố này còn gọi là nguồn d ữ liệu Nh ng ngu n d ữ ồ ữ liệu này đế ừn t những nơi khác nhau, bấ ỳt k khi nào, khi n cho ng d ng c a chúng ta r t khó kiế ứ ụ ủ ấ ểm soát, chúng tác động đến những thành phần đơn lẻ, hoặc nhiều thành ph n trên ng d ng, ho c hi u ng dây ầ ứ ụ ặ ệ ứchuyền Chính vì s phự ức tạp đó, là vấn đề mà Redux mu n gi i quyố ả ết, t t cấ ả các nguồn d u c n phữ liệ ầ ải được quản lý và t o thành m t ngu n duy nh t, tin c y ạ ộ ồ ấ ậ

• Nguyên lý thứ 2: state ch ỉ được phép đọc, Cách duy nhất để thay đổi State của ứng dụng là phát m t Action (là 1 object mô tả những gì xảộ y ra).Tr ng thái của ứng ạdụng không được phép thay đổi “trực tiếp”, trạng thái cũng chỉ là một đ i tưố ợng mà thôi, nên việc thay đổi là được Tuy nhiên, với Redux hay Flux thì tr ng thái ch ạ ỉthay đổi khi và ch khi có mỉ ột sự kiện x y ra, giả ống như ra trận thì ch ỉ được phép nghe lời từ chỉ huy, mọi tin tức tình báo đều được gở ới t i ch huy, n u không có ỉ ếlệnh t ừ chỉ huy thì tất cả không được phép manh động

8

• Nguyên lý thứ 3: s d ng pure function nh n tham s ử ụ ậ ố là state trước đó và action

và tr v state ti p theo Hàm này g i là reducer, (pure function là hàm tr v giá tr ả ề ế ọ ả ề ịphụ thuộc duy nh t vào giá trấ ị c a tham s , pure function có t p các tham s thì giá ủ ố ậ ố

tr trị ả v ề cũng là một tập tương tự như thế) Việc thay đổi tr ng thái cạ ủa ứng d ng, ụđược thực hiện thông qua các hàm thuần tuý Đưa vào giá trị ự kiện, trạng thái hiện stại và hàm trả v ề trạng thái tiếp theo Dù tương lai ứng d ng cụ ủa bạn có th rể ất lớn, nhưng các hàm reducer này thì chỉ cần nhỏ gọn thay đổi trên từng lá của cây trạng thái, và chúng hoàn toàn có thể k t h p vế ợ ới nhau tạo thành chu i s ki n Ví dỗ ự ệ ụ: người click vào menu (m t sự kiộ ện => thay đổi trạng thái), sau đó router cũng cần thay đ i đổ ể phù h p vợ ới ngữ cảnh

1.2.3 K ết h p vợ ới React

Redux có thể được dùng với các thư viện Angular, Ember, jQuery trong

đó rất thích hợp với React, vì React và Redux cho phép quản lý UI giống như hàm c a state Redux c p nhủ ậ ật state tương ứng v i action ớ

• Async Actions: action không đồng bộ, khi g i tọ ới API không đồng bộ quan tâm đến 2 thời điểm: thời điểm bắt đầu g i API, thọ ời điểm nhận trả lời (timeout) dẫn đến có 3 loại action: Action thông báo t i reducer r ng ớ ằrequest bắt đầu: reducer x lý action này b ng cách chuy n c isFetching cử ằ ể ờ ủa state Do đó UI biết được thời gian để thay đổi Action thông báo reducer rằng request k t thúc thành công: reducer k t h p d u m i v i state hiế ế ợ ữ liệ ớ ớ ện tại mà nó đang quản lý, chuyển cờ isFetching UI hi n th d u sau khi lệ ị ữ liệ ấy được Action thông báo v i reducer r ng request th t b i: chuy n c ớ ằ ấ ạ ể ờisFetching, m t s reducer có thông báo ch a l i, UI có th ộ ố ứ ỗ ể hiện th các lị ỗi đó

• Async Flow: không đồng bộ được th c hi n nhự ệ ờ middleware: thunk, redux promise cho phép gửi đi nhiều hơn một là action, có th là hàm ểhoặc promise Middleware: Đặt giữa gửi đi action và reducer, sử ụng để d ghi log, báo l i, ỗ nhận API không đồng bộ, routing

redux-• Sử dụng cùng react-router: routing trong ng d ng Redux Redux là tài ứ ụnguyên cho d ữ liệu, react-router tài nguyên cho URL Redux có 3 ng d ng ứ ụquan tr ng nhọ ất: Quản lý trạng thái: như một bản replay có th undo/redo ểtrạng thái của ứng d ng, phụ ải nói là “Không thể tin được” Tăng tố c phát triển: với webpack đã có Hot Module Replacement, khi kết hợp với Redux, tạo thành s k t hự ế ợp ăn ý, bạn có th ể viết code và debug r t d dàng ng ấ ễ Ứdụng offline: t t cấ ả các thao tác của người dùng được lưu vào một cây trạng thái, khi có k t n i Internet, cây này s ế ố ẽ được đồng bộ lên server b i m t loở ộ ạt các s ự kiện

1.3 Firebase

1.3.1 Giới thi u ệ

Firebase là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám 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 là giúp người dùng lập trì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

Đặc biệt, còn là dịch vụ đa năng và bảo mật cực tốt Firebase hỗ trợ cả hai nền tảng Android và IOS Không có gì khó hiểu khi nhiều lập trình viên chọn Firebase làm nền tảng đầu tiên để xây dựng ứng dụng cho hàng triệu người dùng trên toàn thế giới

• Freebase Authentication: Hoạt động kế tiếp của Firebase là tạo lập quy trình xác thực người dùng thông qua các phương tiện như Goolge, Email, GitHub, Facebook, Twitter và xác thực nặc danh đối với các ứng dụng Việc xác thực giúp bảo vệ an toàn dữ liệu về thông tin cá nhân của người dùng mạng

• Firebase Hosting: Các thức hoạt động tiêu biểu cuối cùng, không thể không nhắc đến của Firebase là cung cấp hosting Firebase hosting thông qua sự hỗ trợ của SSL đến từ mạng CDN Nhờ vậy mà lập trình viên có thể tiết kiệm rất nhiều thời gian thiết kế cũng như phát triển ứng dụng

• Theo dõi lỗi

• Được cung cấp bởi Google

• Tập trung vào phát triển giao diện người dùng

• Firebase không có máy chủ

• Học máy (Machine Learning)

• Tạo lưu lượng truy cập

• Sao lưu

1.3.4 Nhược điểm

• Không phải là mã nguồn mở

• Người dùng không có quyền truy cập mã nguồn

• Firebase không hoạt động ở nhiều quốc gia

• Chỉ hoạt động với Cơ sở dữ liệu NoSQL

• Truy vấn chậm

• Không phải tất cả các dịch vụ Firebase đều miễn phí

• Firebase khá đắt và giá không ổn định

• Chỉ chạy trên Google Cloud

• Thiếu Dedicated Servers và hợp đồng doanh nghiệp

• Không cung cấp các API GraphQL

CHƯƠNG 2 PHÂN TÍCH THIẾT KẾ HỆ THÔNG

2.1 Li t kê các tác nhân c a h ệ ủ ệ thống (actor)

Khách xem: là người chưa có tài khoản trong hệ thống, chỉ có thể xem thông tin sản ph m và khách hàng có thẩ ể đăng ký làm thành viên của hệ thống

Khách hàng: là người đã có tài khoản trong hệ thống và có thể giao dịch với hệ thống thông qua các đơn đặt hàng, khách hàng có th ể chọn các lo i s n phạ ả ẩm, chọn địa điểm và thời gian giao hàng

Quản lý: là người điều hành, quản lý và theo dõi mọi hoạt động của hệ thống Nhân viên: là người tiếp nhận và xử lý các đơn hàng, các yêu cầu bảo hành do người quản lý giao

Thành viên: bao gồm người quản lý, nhân viên và nh ng khách hàng thành ữviên Sau khi đăng nhập để trở thành thành viên, ngoài những chức năng chung của người sử d ng, còn có thêm mụ ộ ố chức năng khác phục vụ cho công vit s ệc cụthể của từng đối tượng

2.2 Li t kê các User Case ệ

• UC Xem thông tin sản phẩm

• UC Quản lý thông tin cá nhân

• UC Quản lí khách hàng

• UC Quản lí danh m c, thụ ể loại

• UC Quản lí nhân viên

• UC Quản lí doanh thu

• UC Xét duyệt hóa đơn

12

2.3 Đặc tả User Case

• Đăng kí:

➢ Tác nhân: khách xem

➢ Mục tiêu: cho phép khách xem đăng kí làm thành viên c a hệ thốủ ng.

➢ Tiền điều kiện: khách xem chưa có tài khoản thành viên của hệ th ng ố

➢ Hậu điều kiện: khách hàng trở thành thành viên của hệ thống

➢ Mô tả: khách xem điền vào form đăng kí Sau khi hệ ống lưu các thông tin thcần thi t, khách hàng có thế ể đăng nhập vào hệ thống

• Đăng nhập:

➢ Tác nhân: khách hàng, quản tr , nhân viên ị

➢ Mục tiêu: cho phép thành viên đăng nhập vào h ệ thống

➢ Tiền điều kiện: thành viên chưa đăng nhập vào hệ thống

➢ Hậu điều kiện: thành viên đã đăng nhập thành công và có thể sử dụng các chức năng mà hệ thống cung c p ấ

➢ Mô tả: thành viên điền thông tin vào form đăng nhập Nếu đúng thông tin, khách hàng có thể đặt hàng trên hệ thống Nếu không đúng, hệ thống s yêu ẽcầu khách hàng ki m tra lể ại tài khoản

••••• Xem thông tin sản phẩm:

••••• Quản lý thông tin cá nhân:

➢ Mục tiêu: cho phép khách hàng đưa sản phẩm đã chọn vào gi hàng ỏ

➢ Tiền điều kiện: sản phẩm đã được chọn

➢ Hậu điều kiện: thông tin sản phẩm đã được chọn phải được lưu trữ

➢

➢ Mô t : khi mu n mua m t s n phả ố ộ ả ẩm nào đó khách hàng ti n hành nh p vào ế ấchức năng thêm sản ph m vào gi hàng Lúc này s n phẩ ỏ ả ẩm đó s ẽ được chuy n ểđến giỏ hàng

• Loại sản phẩm khỏi giỏ hàng:

➢ Tác nhân: khách hàng

➢ Mục tiêu: cho phép khách hàng loại s n phả ẩm đã chọn khỏi giỏ hàng

➢ Tiền điều kiện: sản phẩm đã trong giỏ hàng

➢ Hậu điều kiện: sản phẩm đã được chọn đã loại bỏ khỏi giỏ hàng

➢ Mô t : khi c m th y không còn mu n mua m t s n phả ả ấ ố ộ ả ẩm nào đó khách hàng ti n hành nh p vào nút xóa s n ph m Lúc này s n phế ấ ả ẩ ả ẩm đó ẽ loại khỏi s giỏ hàng

• Thanh toán:

➢

➢ Tác nhân: khách hàng

➢

➢ Mục tiêu: cho phép khách hàng tạo đơn hàng để tiến hành thanh toán - Tiền

điều kiện: khách hàng đã chọn sản phẩm vào giỏ hàng

• Xét duyệt hóa đơn:

➢ Tác nhân: nhân viên

➢ Mục tiêu: cho phép xem thông tin đơn hàng và duyệt đơn hàng

➢ Tiền điều kiện: nhân viên có đơn hàng cần được duyệt

➢ Hậu điều kiện: đơn hàng đã được duyệt

➢ Mô t : nhân viên vào mả ục “quản lí đơn hàng” trong trang quản trị thực hiện x ử lí các đơn hàng chưa được duyệt

14

• Quản lí nhân viên:

➢ Tác nhân: quản tr ị

➢ Mục tiêu: cho phép người quản trị thêm s a xoá nhân viên ử

➢ Mô tả: người qu n tr vào mả ị ục “nhân viên” trong trang quản tr ịthực hiện điều chỉnh ch c v cho nhân viên H ứ ụ ệ thống s ẽ lưu những thay đổ ủa người c i quản

trị vào cơ sở dữ ệu li

• Quản lí doanh thu:

Hình 2: UC xem thông tin sản phẩm

Hình 3: UC quản lý thông tin cá nhân

16

Hình 4:UC đăng nhập đăng ký

Hình 5: UC quản lý gi hàng ỏ

Hình 6: UC thanh toán