Đồ án chuyên ngành 2 xây dựng ứng dụng giao hàng ( Đa nền tảng

Các lập trình viên React Native là người sửdụng những framework này để phát triển nên các hệ thống, nền tảng ứng dụngtrên các hệ điều hành như IOS và Android.. Kỹ sư Jordan Walke tại Fac

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN &

TRUYỀN THÔNG VIỆT HÀN

Khoa Khoa Học Máy Tính

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

………

………

………

………

………

………

………

………

………

………

………

………

………

Giảng viên hướng dẫn

LỜI CẢM ƠN

Trong quá trình học tập và thực hiện đồ án chuyên ngành 1, chúng tôiluôn được sự quan tâm, giúp đỡ, hướng dẫn tận tình của các thầy cô trong khoa.Các thầy cô đã giảng dạy cho chúng tôi những kiến thức về chuyên ngành Côngnghệ thông tin, để từ đó chúng tôi áp dụng những kiến thức đó vào thực tiễn.Với tình cảm chân thành và sâu sắc, cho phép chúng tôi bày tỏ lòng biết ơn sâusắc đến các thầy cô đã giúp đỡ để đồ án đạt được kết quả tốt đẹp

Đặc biệt, chúng tôi xin gửi lời cảm ơn chân thành nhất đến cô ThS.Dương Thị Mai Nga đã trực tiếp hướng dẫn và giúp đỡ tận tình để tạo điều kiệncho chúng tôi hoàn thành bài đồ án này

Sau cùng, chúng tôi xin gửi lời cảm ơn đến gia đình, bạn bè đã tạo mọiđiều kiện để xây dựng thành công đồ án

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

Sinh viên,

Nguyễn Đình Trí

Phạm Đức Trung

Mục Lục

MỞ ĐẦU VII

1 Giới thiệu vii

2 Mục tiêu, nhiệm vụ của đề tài vii

2.1 Mục tiêu vii

2.2 Nhiệm vụ viii

3 Đối tượng, phương pháp tiếp cận viii

3.1 Đối tượng viii

3.2 Phương pháp tiếp cận viii

4 Đóng góp của đề tài viii

5 Bố cục của đề tài viii

CHƯƠNG I TỔNG QUAN VỀ ĐỀ TÀI X 1 Tổng quan về React Native x

1.1 Giới thiệu về React Native x

1.2 Lịch sử của React Native x

1.3 Đặc điểm xi

1.4 Kiến trúc cơ bản của hệ điều hành Android xiii

2 Cài đặt React Native – Setup Environment – Development xv

3 Kết chương 1 xvi

CHƯƠNG II PHÂN TÍCH THIẾT KẾ ỨNG DỤNG GIAO HÀNG XVII 1 Mục đích xây dựng ứng dụng xvii

2 Yêu cầu của ứng dụng xvii

2.1 Yêu cầu về hệ thống xvii

2.2 Yêu cầu về chức năng xvii

2.3 Yêu cầu phi chức năng xviii

3 Lập sơ đồ hệ thống xviii

3.1 Sơ đồ ngữ cảnh hệ thống xviii

3.2 Sơ đồ chức năng xix

3.3 Sơ đồ luồng dữ liệu xix

4 Kết chương 2 xx

CHƯƠNG III XÂY DỰNG ỨNG DỤNG GIAO HÀNG TRỰC TUYẾN XXI 1 Giao diện trang chủ xxi

2 Giao diện sản phẩm xxii

3 Giao diện thanh toán xxiii

4 Giao diện giỏ hàng xxiv

KẾT LUẬN XXVI 1 Kết quả đạt được xxvi

2 Những điểm chưa làm được xxvi

3 Hướng phát triển xxvii TÀI LIỆU THAM KHẢO XXVIII

MỞ ĐẦU

1 Giới thiệu

Xã hội ngày càng phát triển và hiện đại hóa, mang lại nhiều lợi ích chocon người Mức sống ngày càng nâng cao, thu nhập tăng lên, và nhu cầu tiêudùng cũng tăng theo Tuy nhiên, sự phát triển nhanh chóng của xã hội tạo ranhiều áp lực và mâu thuẫn, đặc biệt là trong lĩnh vực giao hàng Nhiều người cónhu cầu mua sắm trực tuyến để tiết kiệm thời gian và công sức Họ muốn muahàng từ các nền tảng trực tuyến và nhận hàng tại nhà Điều này đặt ra nhu cầu vềdịch vụ giao hàng nhanh chóng, đáng tin cậy và hiệu quả

Tại Việt Nam, mua sắm trực tuyến đang trở thành một phần quan trọngcủa cuộc sống hàng ngày Tuy nhiên, vẫn còn nhiều người có thu nhập thấp và ítthời gian rảnh, việc giao hàng nhanh chóng và tiện lợi trở nên cần thiết hơn baogiờ hết

Chính vì thế, chúng tôi quyết định xây dựng một ứng dụng giao hàng đanền tảng trực tuyến, nhằm đáp ứng nhu cầu ngày càng tăng của xã hội Ứngdụng này sẽ giúp người dùng đặt hàng từ nhiều nền tảng khác nhau và nhậnhàng tại nhà một cách nhanh chóng và tiện lợi

Với mong muốn vận dụng kiến thức đã học vào thực tế, chúng tôi hy vọngrằng ứng dụng này sẽ giúp cải thiện cuộc sống hàng ngày của mọi người, đồngthời đáp ứng nhu cầu xã hội Đồng thời, qua việc xây dựng ứng dụng này, chúngtôi cũng có thể hiểu sâu hơn về nội dung và ý nghĩa thực tiễn của môn học

2 Mục tiêu, nhiệm vụ của đề tài

2.1 Mục tiêu

Củng cố và nắm chắc kiến thức về phân tích và thiết kế hệ thống thông tinTạo ra phần mềm có thể ứng dụng được trong thực tế

3 Đối tượng, phương pháp tiếp cận

3.1 Đối tượng

- Tài liệu phân tích và thiết kế hệ thống

- Visual Studio Code, ngôn ngữ lập trình Reactjs

- Các Website và App điện thoại giao hàng trực tuyến

Trên cơ sở tìm hiểu, phân tích, tổng hợp và áp dụng, đề tài đạt được một

số kết quả như sau:

Chương 1 Tổng quan về đề tài Trong chương này, báo cáo trình bày cáckhái niệm, đặc điểm, kiến thức, ngôn ngữ, công cụ sẽ sử dụng

Chương 2 Phân tích thiết kế ứng dụng giao hàng Nội dung chương nêumục đích xây dựng ứng dụng, các yêu cầu về chức năng hệ thống và phi hệthống, lập sơ đồ hệ thống

Chương 3 Xây dựng phần mềm Chương này đề xuất giao diện, các chứcnăng làm được cho ứng dụng

Cuối cùng là Kết luận Tài liệu tham khảo, liên quan đến đề tài

Chương I TỔNG QUAN VỀ ĐỀ TÀI

1 Tổng quan về React Native

1.1 Giới thiệu về React Native

React Native là các đoạn code đã được viết sẵn (framework) do công tycông nghệ Facebook phát triển Các lập trình viên React Native là người sửdụng những framework này để phát triển nên các hệ thống, nền tảng ứng dụngtrên các hệ điều hành như IOS và Android Ngôn ngữ lập trình được sử dụngnhiều nhất là Javascript

Sự ra đời của React Native đã giải quyết được bài toán về hiệu năng và sựphức tạp khi trước đó người ta phải dùng nhiều loại ngôn ngữ native cho mỗinền tảng di động Chính vì thế lập trình React Native sẽ giúp tiết kiệm đượcphần lớn thời gian và công sức khi thiết kế và xây dựng nên một ứng dụng đanền tảng Javascript phù hợp với rất nhiều nền tảng khác nhau

1.2 Lịch sử của React Native

Năm 2012 Mark Zuckerberg đã phát biểu, "Sai lầm lớn nhất của chúng tôi khilàm công ty là dựa trên quá nhiều HTML hơn là môi trường phát triển gốc" Ônghứa rằng Facebook sẽ sớm cung cấp trải nghiệm di động tốt hơn

Kỹ sư Jordan Walke tại Facebook đã tìm ra cách xây dựng các thành phần UIcho iOS bằng một luồng JavaScript.Họ quyết định tổ chức cuộc thi Hackathon

để hoàn thiện nguyên mẫu hệ thống để có thể xây dựng các ứng dụng di độnggốc (native app) bằng công nghệ này

Sau nhiều tháng phát triển, Facebook đã phát hành phiên bản đầu tiên cho ReactNative vào năm 2015 Trong một cuộc hội thảo công nghệ,Christopher Chedeaucho biết Facebook đã sử dụng React Native trong phát triển ứng dụng nhóm vàứng dụng quản lí quảng cáo của họ

1.3 Đặc điểm

 Khả năng tái sử dụng mã

- Ưu điểm lớn nhất của React Native là các nhà phát triển không cần phảitạo các mã riêng biệt cho các nền tảng khác nhau (Android và iOS).Trên thực tế, khoảng 90% mã có thể được sử dụng lại giữa hai nềntảng, giúp tăng tốc độ phát triển và mang đến hiệu quả đáng kể Việc tái

sử dụng code cũng rút ngắn thời gian đưa sản phẩm ra thị trường và cần

ít nỗ lực bảo trì hơn

 Live reload

- Tính năng live reload của React Native cho phép bạn xem và làm việcvới các thay đổi ngay lập tức Bạn có thể thực hiện các bản sửa lỗitrong code ngay khi ứng dụng đang tải, tính năng live reload sẽ tự độngrefresh ứng dụng để bạn có thể thấy những thay đổi của đoạn code

- Tính năng này giúp các lập trình viên tiết kiệm rất nhiều thời gian vàcông sức tổng hợp lại app khi có thay đổi

 Tập trung vào giao diện người dùng

- React Native sử dụng thư viện React JavaScript để xây dựng các giaodiện app cực nhanh và đáp ứng nhiều nhu cầu Ngoài ra, frameworknày có khả năng kết xuất tuyệt vời và sử dụng cách tiếp cận dựa trênthành phần giúp dễ dàng tạo ra các ứng dụng với giao diện người dùngđơn giản, hoặc phức tạp

 Rút ngắn thời gian học

- Với React Native, bạn có thể rút ngắn thời gian học vì React Nativegiúp bạn làm quen với việc tạo ứng dụng di động trên cả hai hệ điềuhành iOS và Android Thêm vào đó, dù phải làm quen với nhiều thứnhư Javascript, React Native, hay Node, v,v, bạn cũng chỉ cần phải họcthông qua một bộ công cụ duy nhất

 Chi phí - Hiệu quả

Vì bạn có thể sử dụng lại mã trong React Native, nó giúp bạn tiết kiệmchi phí phát triển lên đến 40% Bạn không cần phải thuê hai nhóm nhàphát triển Android và iOS khác nhau để tạo ứng dụng Trên hết, có rấtnhiều thành phần đã được xây dựng sẵn trong React Native giúp đẩynhanh quá trình phát triển

 Plugin của bên thứ ba

- Việc xây dựng một ứng dụng từ đầu có thể rất tốn kém, vì vậy ReactNative cung cấp một số tùy chọn plugin của bên thứ ba bao gồm cácnative mô-đun và JavaScript-based để các nhà phát triển sử dụng Cácplugin của bên thứ ba giúp nâng cao hiệu suất của ứng dụng và tiếtkiệm thời gian phát triển app

 Cộng đồng phát triển

- Việc có một công ty mẹ như Facebook giúp React Native nhận được sựquan tâm của nhiều chuyên gia, kỹ sư và những người đam mê côngnghệ trên toàn thế giới Đó là lý do React Native có một cộng đồng phát

triển mạnh mẽ và bạn có thể dễ dàng tìm kiếm sự hỗ trợ cũng như chia

sẻ kiến thức của mình

Ngoài ra, React Native là một framework mã nguồn mở nên mọi người đều cóthể đóng góp để giúp framework này phát triển hơn nữa trong tương lai

1.4 Kiến trúc cơ bản của hệ điều hành Android

Ngày nay chúng ta có hai nền tảng cạnh tranh chính là iOS và Android, mỗi kẻ một thế lực làm khuynh đảo giới lập trình Từ đó sinh ra các công cụ hỗ trợ nhà phát triển ứng dụng có thể phát triển mỗi ứng dụng một cách dễ dàng chẳng hạn như Apple thì có XCode, Android thì có Android Studio

Nhưng cũng chính vì lẽ mỗi kẻ một thế lực nên không ai chơi với ai, mỗi bên xưng đế một “phương” cuối cùng con dân lập trình viên là những người phải chịu trận Và cũng từ lẽ đó mà giang hồ sinh ra hai môn vang danh thiên hạ là Native và Hybrid

1.4.1 Native App là gì?

Native App khá là dễ hiểu, tức đó là các ứng dụng được phát triển vàbuild trên chính những công cụ hỗ trợ mà nhà phát triển iOS và Android cungcấp cho người lập trình viên ở đây là XCode và Android

Chúng được viết bằng ngôn ngữ mà nhà phát triển iOS và Android cung cấp raiOS thì là Swift hiện tại, xưa là Objective C, còn Android thì hiện tại tồn tạisong song là Java và Kotlin Các ứng dụng Native được build dựa trên ngôn ngữcủa chính hệ điều hành và sử dụng những tính năng sẵn có của hệ điều hành màkhông phải thông qua bất cứ ứng dụng bên thứ ba hay engine nào khác để vậnhành nên tốc độ là nhanh nhất.

1.4.2 Hybrid App là gì?

Hybrid App là sự kết hợp giữa ứng dụng Web và ứng dụng mobile Tức làchúng vừa có thể cài đặt lên điện thoại người dùng giống như là những ứngdụng Native bình thường và bạn có thể tìm thấy chúng trên chợ ứng dụng nhưngkhó có thể nhận ra đâu là ứng dụng Native và đâu là ứng dụng Hybrid thườngthì người dùng sẽ không để ý quá nhiều

Đồng thời như ứng dụng Web chúng được xây dựng dựa trên HTML + CSS +

JS Nhược điểm của Hybrid App đó chính là vấn đề hiệu năng sẽ bị ảnh hưởngđáng kể cũng như không tương tác được hết những tài nguyên hệ thống phầnmềm cũng như phần cứng

Vì vậy, mà Native App là sự lựa chọn hàng đầu của giới lập trình trong việc pháttriển phần mềm di động bởi vì nó mang lại hiệu năng cao, trải nghiệm ngườidùng tốt

1.4.5 Ưu và nhược điểm của React Native

 Xây dựng cho nhiều hệ điều hành khác nhau với ít native code nhất

 Trải nghiệm người dùng tốt hơn là hybrid app

Nhược điểm:

 Vẫn đòi hỏi native code

 Hiệu năng sẽ thấp hơn với app thuần native code

 Bảo mật không cao do dựa trên JS

 Quản lý bộ nhớ

 Khả năng tùy biến cũng không thực sự tốt đối với một vài module

2 Cài đặt React Native – Setup Environment – Development

React Native có thể chạy trên Windows, Linux, MacOS Để cài đặt React Nativebạn có thể xem trên trang hướng dẫn của Facebook hoặc làm theo mình bên dưới ở đây mình sẽ demo trên hệ điều hành linux hoặc cũng có thể bạn chỉ muốntrải nghiệm về cách lập trình thì sử dụng online editor EXPO

Sau đây là các bước đơn giản nhất, không cần phải cài đặt Android Studio hay XCode để build ra file cài đặt Các bạn muốn sử dụng cách mà có sử dụng Android Studio hay XCode có thể tham khảo trên trang của Facebook phần Building Project with Native Code Ở đây mình sẽ chỉ viết code JS thuần không

sử dụng bất kì Native Code nào

Bước 1: Cài NodeJS

Bước 2: Cài đặt create-react-native-app

Cài đặt create-react-native-app Nordiccoder

Bước 3: Tạo project và run project mẫu

Tạo project và run project mẫu Nordiccoder

Bước 4: Khởi chạy project trên điện thoại

– Đầu tiên các bạn cài đặt Expo client trên điện thoại của các bạn Android, iOS.– Kết nối cùng mạng wifi với máy tính mà bạn run project

– Sau đó mở ứng dụng Expo Client lên và quét mã QR trên terminal của run project

3 Kết chương 1

Thông qua tìm hiểu về lập trình Android và ngôn ngữ lập trình Java từ đó,làm cơ sở để xây dựng ứng dụng giao hàng trực tuyến Phần thiết kế, phân tíchyêu cầu và xây dựng ứng dụng sẽ được trình bày trong chương tiếp theo

Chương II PHÂN TÍCH THIẾT KẾ

ỨNG DỤNG GIAO HÀNG

1 ĐỊNH NGHĨA BÀI TOÁN

1.1 Định nghĩa bài toán

Hệ thống giao hàng là một ứng dụng cung cấp cho người sử dụng, nhàquản lý những chức năng cần thiết để tiến hành giao dịch, quản lý sự hoạtđộng cũng như theo dõi tình hình phát triển ứng dụng của mình Đối với kháchhàng, hệ thống cho phép xem thông tin về sản phẩm của ứng dụng Sau khi đăng

ký làm thành viên, khách hàng có thể chọn sản phẩm trên ứng dụng, đưa vào giỏhàng và tiến hành giao dịch mua bán Sau khi chọn hàng xong khách hàngchuyển qua việc thanh toán bằng một trong các hình thức thanh toán, đồng thờichọn địa điểm và xác định thời gian giao hàng Sau khi đã thực hiện xong, kháchhàng nhấn xác nhận để hoàn tất giao dịch

Đối với các nhân viên, là người sẽ tiếp nhận đơn hàng do người quản lýchuyển đến, thực hiện việc giao hàng và xác nhận việc giao hàng đã hoàn tất

1.2 Các nhóm chức năng của hệ thống

Chức năng của hệ thống có thể chia làm các nhóm chức năng chính như sau:

1 Nhóm chức năng đăng ký, đăng nhập thành viên

2 Nhóm chức năng xem thông tin, bao gồm xem thông tin giỏ hàng, xem thông tin đơn hàng, xem thông tin sản phẩm, xem thông tin cá nhân

3 Nhóm chức năng quản lý thông tin, bao gồm quản lý thông tin

cá nhân, quản lý danh sách thành viên, quản lý danh mục sản phẩm

4 Nhóm chức năng mua hàng, tiếp nhận và xử lý đơn hàng

giao hàng Khách hàng có thể đăng ký làm thành viên của hệ thống.

NGƯỜI 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

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

đã đăng ký Sau khi đăng nhập để trở thành thành viên, ngoài những chức năngchung của người sử dụng, còn có thêm một số chức năng khác phục vụ chocông việc cụ thể của từng đối tượng

Theo tính chất của các Actor, ta có thể tổng quát hoá chúng như sau:

Hình 1: Mối quan hệ giữa các tác nhân

2 Xác định các Use Case, các gói UC và xây dựng biểu đồ UC chi tiết 2.1 Xác định các Use Case

Tác nhân Khách hàng có các UC sau:

 Đăng ký làm thành viên

 Xem thông tin sản phẩm

 Xem thông tin giỏ hàng

 Thêm, bớt sản phẩm trong giỏ hàng

 Thực hiện việc mua hàng

 Thanh toán

 Yêu cầu bảo hành

 Nhận lại thiết bị sau khi bảo hành

Tác nhân Người quản lý có các UC sau:

 Tiếp nhận đơn hàng, nhận yêu cầu bảo hành

 Giao cho nhân viên thực hiện

 Quản lý danh sách thành viên

 Quản lý danh mục sản phẩm

Tác nhân Nhân viên có các UC sau:

 Thực hiện việc giao hàng

 Thực hiện việc bảo hành sản phẩm

 Báo cáo kết quả

Ngoài ra, các thành viên của hệ thống bao gồm người quản lý, nhân viên

và các khách hàng đã đăng ký làm thành viên còn có các UC sau:

 Đăng nhập

 Xem thông tin cá nhân

 Sửa đổi thông tin cá nhân

2.2 Biểu đồ do Use Case tổng quát

2.3 Xác định các gói UC, biểu đồ chi tiết

Từ việc phân tích các UC của từng tác nhân, ta xây dựng thành các gói

Quản lý danh mục sản phẩm