Lập trình trên thiết bị di động đề tài xây dựng app đặt đồ ăn nhanh bằng react native

11 Trang 5 DANH MỤC HÌNH ẢNH Trang 7 1 LỜI MỞ ĐẦU Ngày nay, cùng với sự phát triển của đât nước, ngành Công nghệ thông tin đã có những bước phát triển mạnh mẽ không ngừng và tin học

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO CHUYÊN ĐỀ HỌC PHẦN LẬP TRÌNH TRÊN THIẾT BỊ DI ĐỘNG

ĐỀ TÀI:

XÂY DỰNG APP ĐẶT ĐỒ ĂN NHANH

BẰNG REACT-NATIVE

Sinh viên thực hiện :

: Giảng viên hướng dẫn : Ngành : CÔNG NGHỆ THÔNG TIN Chuyên ngành : CÔNG NGHỆ PHẦN MỀM

Khóa : 2020-2025

Hà Nội, tháng 12, năm 2023

PHIẾU CHẤM ĐIỂM

Sinh viên thực hiện:

STT Họ và tên Nội dung thực hiện Điểm Chữ ký

1

2

Giáo viên chấm điểm:

Họ và tên Chữ ký Ghi chú

Giáo viên 1:

Giáo viên 2:

MỤC LỤC

LỜI MỞ ĐẦU 1

LỜI CẢM ƠN 2

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 3

1.1 Tình hình trong nước và ngoài nước 3

1.2 Tổng quan về React-Native 5

1.3 Mô tả bài toán 7

CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ CẤU TRÚC HỆ THỐNG 9

2.1 Thiết kế cấu trúc dữ liệu 9

2.2 Thiết kế layout giao diện Error! Bookmark not defined 2.2.1 Layout banner giới thiệu app Error! Bookmark not defined 2.2.2 Layout đăng nhập Error! Bookmark not defined 2.2.3 Layout đăng kí Error! Bookmark not defined 2.2.4 Layout trang chủ Error! Bookmark not defined 2.2.5 Layout chi tiết sản phẩm Error! Bookmark not defined 2.2.6 Layout giỏ hàng Error! Bookmark not defined 2.2.7 Layout đặt hàng thành công Error! Bookmark not defined 2.2.8 Layout thông tin user Error! Bookmark not defined 2.2.9 Layout cập nhật thông tin user Error! Bookmark not defined CHƯƠNG 3: THIẾT KẾ GIAO DIỆN, CÀI ĐẶT HỆ THỐNG 11

3.1 Thiết kế giao diện 11

3.1.1 Giao diện banner giới thiệu Error! Bookmark not defined 3.1.2 Giao diện đăng nhập Error! Bookmark not defined 3.1.3 Giao diện đăng kí Error! Bookmark not defined 3.1.4 Giao diện trang chủ Error! Bookmark not defined 3.1.5 Giao diện chi tiết sản phẩm Error! Bookmark not defined 3.1.6 Giao diện giỏ hàng Error! Bookmark not defined 3.1.7 Giao diện đặt hàng thành công Error! Bookmark not defined 3.1.8 Giao diện thông tin user Error! Bookmark not defined 3.1.9 Giao diện cập nhật thông tin user Error! Bookmark not defined KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN CỦA ĐỀ TÀI 11

DANH MỤC BẢNG BIỂU

Bảng 2.1 Danh sách các bảng trong mô hình cơ sở dữ liệu 9

Bảng 2.2 Bảng Category 9

Bảng 2.3 Bảng Dishes 9

Bảng 2.4 Bảng Featured Restaurants 10

Bảng 2.5 Bảng Restaurants 10

DANH MỤC HÌNH ẢNH Hình 1 Hình ảnh layout banner giới thiệu app Error! Bookmark not defined Hình 2 Hình ảnh layout đăng nhập Error! Bookmark not defined Hình 3 Hình ảnh layout đăng ký Error! Bookmark not defined Hình 4 Hình ảnh layout trang chủ Error! Bookmark not defined Hình 5 Hình ảnh layout chi tiết sản phẩm Error! Bookmark not defined Hình 6 Hình ảnh layout giỏ hàng Error! Bookmark not defined Hình 7 Hình ảnh layout đặt hàng thành công Error! Bookmark not defined Hình 8 Hình ảnh layout thông tin user Error! Bookmark not defined Hình 9 Hình ảnh layout cập nhật thông tin user Error! Bookmark not defined Hình 10 Hình ảnh giao diện banner giới thiệu Error! Bookmark not defined Hình 11 Hình ảnh giao diện đăng nhập Error! Bookmark not defined Hình 12 Hình ảnh giao diện đăng ký Error! Bookmark not defined Hình 13 Hình ảnh giao diện trang chủ Error! Bookmark not defined Hình 14 Hình ảnh giao diện chi tiết sản phẩm Error! Bookmark not defined Hình 15 Hình ảnh giao diện giỏ hàng Error! Bookmark not defined Hình 16 Hình ảnh giao diện đặt hàng thành công Error! Bookmark not defined Hình 17 Hình ảnh giao diện thông tin user Error! Bookmark not defined Hình 18 Hình ảnh giao diện cập nhật thông tin userError! Bookmark not defined

1

LỜI MỞ ĐẦU

Ngày nay, cùng với sự phát triển của đât nước, ngành Công nghệ thông tin đã có những bước phát triển mạnh mẽ không ngừng và tin học đã trở thành chiếc chìa khóa dẫn đến thành công cho nhiều cá nhân trong nhiều lĩnh vực, hoạt động Với ứng dụng của mình, ngành Công nghệ thông tin đã góp phần mang lại nhiều lợi ích mà không

ai có thể phủ nhận được

Từ những phầm mềm quản lý giúp cho công việc bán hàng của cửa hàng trở nên nhanh chóng và dễ dàng, ngày nay công nghệ thông tin đã phát triển mạnh mẽ hơn nữa, App di động ra đời không chỉ đáp ứng cho các khách hàng đến trực tiếp mua sản phẩm mà nó còn phục vụ những khách hàng ở xa Không những thế, việc giới thiệu, quản bá hình ảnh về cửa hàng, công ty mở rộng trên quy mô lớn giúp cho việc kinh doanh, buôn bán, trao đổi tin tức thuận lợi hơn rất nhiều, mang lại hiệu quả kinh

tế cao và tạo uy tín trong lòng khách hàng

Chình vì lợi ích mà App di động mang lại mà các cửa hàng, công ty đã áp dụng

nó để phát triển công việc kinh doanh và giới thiệu cửa hàng của mình Qua việc tìm hiểu thực tế cũng như xu thế phát triển của xã hội, em thấy việc thiết kế một App di động để phục vụ cho nhu cầu order đồ ăn tại nhà mà không cần phải đến tận nơi đặt

Vì vậy em đã chọn đề tài “Xây dựng App đặt đồ ăn nhanh bằng React-native” với

mong muốn vận dụng những kiến thức mình đã học xây dựng một trang app có tính thực tiễn mang lại cho khách hàng sự thuận tiện trong việc mua đồ ăn khắp nơi mà chỉ cần ở một chỗ

Mặc dù đã cố gắng hoàn thiện đề tài với tất cả sự nỗ lực của bản thân, nhưng với vốn kiến thức còn hạn chế, chưa có nhiều kinh nghiệm thực tế nên chắc chắn không thể tránh khỏi những thiếu sót, kính mong quý thầy cô và các bạn tận tình chỉ bảo, góp ý để đề tài được hoàn thiện hơn

2

LỜI CẢM ƠN

Trên thực tế, không có sự thành công nào mà không gắn liền với những sự hỗ trợ,

sự giúp đỡ dù ít hay nhiều, dù là trực tiếp hay gián tiếp của người khác Trong suốt thười gian từ khi bắt đầu học tập ở giảng đường Đại học đã đến nay, em đã nhận được rất nhiều sự quan tâm, giúp đỡ của thầy cô, gia đình và bạn bè

Với lòng biết ơn sâu sắc nhất, em xin gửi đến thầy cô ở Khoa Công Nghệ Thông Tin - trường Đại Học Điện Lực đã cùng với tri thức và tâm huyết của mình để truyền đạt vốn kiến thức quý báu cho chúng em trong suốt thời gian học tập tại trường Và đặc biệt, trong kỳ này, em được tiếp cận với môn học rất hữu ích đối với sinh viên

ngành Công Nghệ Thông Tin Đó là môn: “Lập trình trên thiết bị di động”

Em xin chân thành cảm ơn thầy Phương Văn Cảnh đã tận tâm hướng dẫn chúng

em qua từng buổi học trên lớp cũng như những buổi nói chuyện, thảo luận về môn học Trong thời gian được học tập và thực hành dưới sự hướng dân của thầy, em không những thu được rất nhiều kiến thức bổ ích, mà còn được truyền sự say mê và

thích thú đối với bộ môn “Lập trình trên thiết bị di động”

Mặc dù đã rất cố gắng hoàn thiện báo cáo với tất cả sự nỗ lực, tuy nhiên, do bước đầu đi vào thực tế, tìm hiểu và xây dựng báo cáo trong thời gian có hạn, và kiến thức

còn hạn chế, nhiều bỡ ngỡ, nên báo cáo “Xây dựng app đặt đồ ăn nhanh” chắc chắn

sẽ không thể tránh khỏi những thiếu sót Em rất mong nhận được sự quan tâm, thông cảm và những đóng góp quý báu của các thầy cô và các bạn để báo cáo này được hoàn thiện hơn

Một lần nữa, em xin chân thành cảm ơn và luôn mong nhận được sự đóng góp của mọi người

Trân trọng!

3

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Tình hình trong nước và ngoài nước

1.1.1 Tình hình trong nước

Theo thống kê, dân số Việt Nam hiện đang xấp xỉ 100 triệu người, có khoảng 70% hiện đang trong độ tuổi lao động, và 40% trong số đó dưới 25 tuổi Hơn thế nữa,

có hơn một nửa quốc gia được kết nối với Wi-Fi và một nửa trong số đó là người dùng Internet thông qua các thiết bị di động (smartphone) Nói cách khác, Việt Nam được đánh giá là một quốc gia rộng lớn, trẻ trung và ngày càng hiểu biết về công nghệ

Các app mobile trên đều gắn liền mật thiết với cuộc sống hàng ngày của con người, đã và đang được sử dụng mọi lúc mọi nơi phổ biến suốt thập kỉ qua Ngoài ra còn có hàng trăm app mobile về nhiều chủ đề, ngành nghề, lĩnh vực khác như app du lịch, app ẩm thực, app luật, app bảo hiểm, app game Tần suất sử dụng app mobile ngày càng cao vì điện thoại thông minh là trợ thủ đắc lực cho mọi người trong công việc, học tập, cuộc sống Chính vì vậy việc thiết kế app rất cần thiết và cũng là người bạn thân thiết mọi nhà, tích hợp hàng ngàn tiện ích thông minh cho mọi người sử dụng dễ dàng nhanh chóng

Theo ước tính của Tập đoàn nghiên cứu thị trường Euromonitor International, thị trường giao đồ ăn trực tuyến tại Việt Nam có giá trị quy mô 33 triệu USD trong năm

2018, dự kiến sẽ đạt quy mô khoảng 38 triệu USD vào năm 2020 và duy trì mức tăng trưởng bình quân 11% trong 5 năm tới

Còn theo Công ty nghiên cứu thị trường Kantar TNS, doanh thu thị trường giao thức ăn trực tuyến Việt Nam năm 2018 là 148 triệu USD và có tốc độ tăng trưởng trung bình 28.5%/ năm Dự kiến năm 2019, doanh số thị trường này sẽ lên tới 207 triệu USD và năm 2023 ước tính có thể lên tới 449 triệu USD.Trong đó, doanh thu

từ mảng Restaurant – to – Consumer Delivery khoảng 117 triệu USD ( chiếm 79%)

và doanh thu của Platform – to – Consumer Delivery khoảng 32 triệu USD ( chiếm 21%) Doanh thu năm 2023 ước tính có thể lên tới 449 triệu USD Số lượng người

sử dụng dịch vụ giao thức ăn trực tuyến trong năm 2018 khoảng 5.3 triệu người, chủ yếu dụng dịch vụ Restaurant – to – Consumer Delivery (chiếm 92%) Dự báo đến năm 2023, số lượng người sử dụng dịch vụ giao thức ăn tăng hơn gấp 2 lần, khoảng

13 triệu người

Thị trường giao đồ ăn tại Việt Nam tuy khá mới nhưng cũng vô cùng sôi động Bởi hiện nay, nhịp sống tất bật và sự phát triển của làn sóng đô thị hiện đại đã dẫn đến những thay đổi đáng kể trong thói quen ăn uống của nhiều người dân, hướng đến

4

giải pháp giao hàng tận nơi, đặc biệt là thế hệ Millennial (sinh năm 1980 – 2000) Mặt khác, việc sử dụng các ứng dụng trên smartphone ngày càng phổ biến, cùng với đó người dùng có thể trả tiền trên Mobile Banking, ví điện tử nên rất thuận tiện cho người mua lẫn người bán, đặc biệt cả cho người giao hàng Các tên tuổi đang hot nhất đang được đông đảo người dùng biết đến là Now Food (tên cũ là Delivery Now), Grab Food, Gojek (Công ty mẹ của Go Việt cũ) Mới nhất là Woowa Brothers Corp gia nhập vào thị trường giao đồ ăn tại Việt Nam bằng việc mua lại Vietnammm Vào ngày 14/05/2019, Vietnammm chính thức thay đổi logo và hình ảnh của mình với tên gọi là BaeMin

Theo nhìn nhận của nhiều chuyên gia, việc mở rộng thị trường giao thức ăn nhanh tại Việt Nam không chỉ đem lại thuận lợi cho người tiêu dùng mà còn tạo cơ hội cho nhiều nhà hàng, quán ăn nhỏ, thậm chí là các gia đình có sở trường nấu ăn mà không

có điều kiện mở mặt bằng, tạo nên thị trường thức ăn phong phú, hấp dẫn thực khách không chỉ địa phương mà cả khách du lịch trong và ngoài nước Ngoài ra, đơn vị giao hàng nào nhanh nhất, nhiều khuyến mãi nhất và nhiều thực đơn phong phú nhất

ắt sẽ thắng trong cuộc đua giành thị phần này

1.1.2 Tình hình ngoài nước

Quy mô thị trường ứng dụng di động toàn cầu được định giá là 154,05 tỉ USD vào năm 2019 và dự kiến sẽ tăng với tốc độ tăng trưởng kép hàng năm 11,5% trong khoảng từ 2020 đến 2027 Phạm vi nghiên cứu của báo cáo bao gồm các ứng dụng trò chơi, âm nhạc, giải trí, các ứng dụng sức khỏe và thể dục, ứng dụng mạng xã hội, thương mại điện tử, bán lẻ cũng như các ứng dụng di động khác

Nhu cầu về ứng dụng di động dự kiến sẽ tăng trong những năm tới Chủ yếu do

sự gia tăng của lượng điện thoại thông minh, độ phủ sóng internet và việc sử dụng ngày càng nhiều máy móc sở hữu công nghệ trí tuệ nhân tạo điều khiển bằng các ứng dụng điện thoại

Ngoài ra, các ứng dụng di động nói trên hầu hết đều được tải về từ các nền tảng phân phối ứng dụng như App Store (iOS) và Google Play Store (Android)

Sự phổ biến hơn của Internet ở các nước đang phát triển như Ấn Độ, Trung Quốc

và Brazil là yếu tố chính thúc đẩy tăng trưởng thị trường Trong thập kỉ qua, Internet

đã nổi lên như một phương tiện giao tiếp chính thông qua một số thiết bị, bao gồm điện thoại thông minh, máy tính bảng, máy tính xách tay và một số thiết bị khác Vài năm qua, đã có sự gia tăng đáng kể về số lượng người mua ứng dụng di động

do sự tăng trưởng trong ngành thương mại điện tử.Nhiều loại sản phẩm và chương trình giảm giá, ưu đãi khác chỉ có bán trên các nền tảng điện tử Các gói dữ liệu giá

5

rẻ sẵn có từ các nhà mạng giúp giảm bớt chi phí Internet di động và thu hút nhiều người dùng hơn

Sau đợt bùng phát virus coronavirus (COVID-19) gần đây, các ứng dụng mạng

xã hội, game và giải trí có số lượt tải xuống cao nhất, vượt lên so với các ứng dụng khác Thêm vào đó, nhu cầu về các ứng dụng thương mại điện tử, chăm sóc sức khỏe

và giáo dục cũng tăng trưởng mạnh mẽ

Trong các ứng dụng giáo dục, việc chuyển sang học từ xa đã mang lại cơ hội phát triển, sinh lợi cho một số công ty công nghệ và ứng dụng học trực tuyến như Google Classroom, Zoom và Microsoft Teams Bắc Mỹ thống trị thị trường và chiếm hơn 30% thị phần doanh thu trong năm 2019 Tỉ trọng cao do sự hiện diện của nhiều công

ty trong khu vực, chẳng hạn như Apple Inc, Google LLC, Hewlett Packard Enterprise, Netflix Inc, và Tập đoàn Microsoft

Thêm vào đó, người dùng chi tiêu mạnh mẽ trong ứng dụng, lượng sử dụng điện thoại thông minh cao và số lượt tải xuống ứng dụng di động tương đối lớn đã đảm bảo một cách tổng thể thị phần cao của thị trường Hoa Kỳ dự kiến sẽ nổi lên như một thị trường béo bở cho game ứng dụng trên thiết bị di động, mua hàng trong ứng dụng (in-app purchase), game di động trả phí và lượng người dùng

Châu Á Thái Bình Dương dự kiến sẽ nổi lên như một thị trường phát triển nhanh nhất Với tiềm năng mà khu vực này nắm giữ về mức độ phủ sóng Internet và lượng

sử dụng điện thoại thông minh Ấn Độ và Trung Quốc được sẽ vẫn là những thị trường lớn, mang đến cơ hội phát triển mạnh mẽ cho tất cả những nhà phát triển trên toàn hệ sinh thái ứng dụng di động

Hơn nữa, thu nhập từ thị trường ngày càng tăng cùng với các chính sách của chính phủ như Digital India, dự kiến sẽ tác động thuận lợi đến tăng trưởng thị trường khu vực trong những năm tới Sự sẵn có của các gói dữ liệu di động chi phí thấp và việc phát triển của hệ thống mạng Internet là những động lực tăng trưởng quan trọng khác trong tăng trưởng khu vực

Qua cái nhìn tổng quan về thị trường trong và ngoài nước nêu trên có thể thấy, app mobile hiện nay là không thể thiếu và có những tiềm năng to lớn cho mọi ngành, đặc biệt là ngành thương mại điện tử, đồ ăn, uống

1.2 Tổng quan về React-Native

1.2.1 React-Native là gì?

Được phát triển bởi Facebook, React Native là một framework hướng đến phát triển ứng dụng di động đa nền tảng Với sự trợ giúp của React Native, lập trình viên (developer) có thể sử dụng JavaScript để tạo ra mobile apps (ứng dụng di động) hỗ

6

trợ cho cả nền tảng Android và iOS Instagram, Facebook, Skype,… là những ứng dụng nổi bật sử dụng React Native

1.2.2 Tại sao nên dùng React-Native

– Có thể tái sử dụng code

React Native cho phép các developer có thể tái sử dụng code trong khi phát triển các ứng dụng đa nền tảng Đặc biệt, developer có thể tái sử dụng hầu như 80 - 90% các đoạn code thay vì phải viết và tạo các ứng dụng riêng biệt cho các nền tảng khác nhau Ưu điểm này giúp người dùng:

 Tiết kiệm thời gian và giảm chi phí phát triển của một ứng dụng

 Tận dụng nguồn nhân lực tốt hơn

 Duy trì ít code hơn, ít bugs hơn

 Các tính năng trong cả 2 platforms cũng tương tự nhau

– Cộng đồng người dùng lớn

React Native được đánh giá là một trong những Framework được yêu thích nhất (khảo sát của stack overflow vào năm 2019) Nhờ cộng đồng người dùng rất lớn trên toàn thế giới, bạn có thể tìm sự hỗ trợ nếu gặp phải bugs

– Tính ổn định và tối ưu

Được phát triển bởi Facebook, React Native có hiệu năng ổn định khá cao

 Mã React Native giúp đơn giản hóa quá trình xử lý dữ liệu

 Đội ngũ phát triển ứng dụng không quá lớn

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

 Trải nghiệm người dùng tốt hơn khi so sánh với ứng dụng Hybrid

1.2.3 Hoạt động của React-Native

React Native hoạt động được nhờ tích hợp 2 thread là Main Thread và JS Thread cho ứng dụng mobile Trong đó:

 Main Thread: cập nhật giao diện người dùng(UI) và xử lý tương tác người dùng

 JS Thread: thực thi và xử lý code Javascript

Hai luồng Main Thread và JS Thread này hoạt động độc lập với nhau Hai Thread

sẽ tương tác với nhau nhờ một Bridge(cầu nối) Chiếc cầu này sẽ chuyển đổi dữ liệu qua lại giữa các Thread