Xây dựng mạng xã hội ẩm thực địa phương dựa trên công nghệ React Native

Tài liệu nghiên cứu Đề tài xây d ng m ng xã h ự ạ ội địa điểm ẩm thực what eat dựa trên công nghệ react native, tổng hợp lý thuyết và thực hành, cung cấp kiến thức chuyên sâu về

• Tác giả: Trần Minh Hiếu
• Người hướng dẫn: ThS. Nguyễn Hữu Vĩnh
• Trường học: Trường Đại Học Thủ Dầu Một
• Chuyên ngành: Kỹ Thuật Phần Mềm
• Đề tài: Xây Dựng Mạng Xã Hội Địa Điểm Ẩm Thực What Eat Dựa Trên Công Nghệ React Native
• Loại tài liệu: Báo Cáo Chuyên Đề Thực Tập Tốt Nghiệp
• Năm xuất bản: 2021
• Địa điểm: Bình Dương

Tóm tắt

I. Phát triển ứng dụng React Native

Chuyên đề tốt nghiệp tập trung vào phát triển ứng dụng React Native, cụ thể là xây dựng mạng xã hội địa điểm ẩm thực What Eat. Việc lựa chọn React Native cho phép tạo ra ứng dụng chạy được trên cả hai nền tảng Android và iOS, tiết kiệm thời gian và chi phí phát triển. Báo cáo đề cập đến quá trình thiết kế, xây dựng và triển khai ứng dụng, bao gồm các khía cạnh kỹ thuật như lựa chọn thư viện, cấu trúc dữ liệu, và xử lý giao diện người dùng. React Native được đánh giá cao về khả năng tái sử dụng mã nguồn, giúp rút ngắn thời gian phát triển ứng dụng. Ứng dụng What Eat là một ví dụ cụ thể minh họa cho khả năng ứng dụng của React Native trong lĩnh vực ẩm thực.

1.1. Lập trình React Native cho Android và iOS

Báo cáo chi tiết quá trình lập trình React Native cho cả hai hệ điều hành Android và iOS. Nó bao gồm việc thiết lập môi trường phát triển, sử dụng các thành phần giao diện người dùng (UI) của React Native, tích hợp các thư viện hỗ trợ, và xử lý các sự kiện người dùng. Việc sử dụng React Native cho phép ứng dụng có giao diện người dùng mượt mà và hiệu quả trên cả hai nền tảng. Báo cáo cũng đề cập đến những thách thức trong quá trình phát triển ứng dụng đa nền tảng và cách thức giải quyết chúng. Lập trình React Native giúp tối ưu hóa hiệu suất và trải nghiệm người dùng, tạo ra ứng dụng hoạt động trơn tru trên cả thiết bị Android và iOS. Đây là một trong những yếu tố then chốt giúp ứng dụng What Eat trở nên thành công.

1.2. Tích hợp bản đồ trong React Native

Một điểm nhấn quan trọng của ứng dụng What Eat là việc tích hợp bản đồ bằng cách sử dụng Google Map API. Báo cáo mô tả quá trình tích hợp API này vào ứng dụng React Native, bao gồm việc hiển thị bản đồ, đánh dấu vị trí địa điểm, và tính toán khoảng cách. Khả năng hiển thị bản đồ trực quan giúp người dùng dễ dàng tìm kiếm và khám phá các địa điểm ẩm thực xung quanh. Việc tích hợp bản đồ nâng cao trải nghiệm người dùng và tạo ra ứng dụng thân thiện hơn. API bản đồ đóng vai trò quan trọng trong việc cung cấp thông tin địa lý chính xác và hỗ trợ người dùng hiệu quả.

II. Ứng dụng mobile ẩm thực

Chuyên đề tập trung vào việc xây dựng một ứng dụng mobile ẩm thực, cụ thể là mạng xã hội What Eat. Ứng dụng này cung cấp một nền tảng cho người dùng chia sẻ, đánh giá và tìm kiếm thông tin về các địa điểm ăn uống. Đây là một ví dụ điển hình của ứng dụng mobile ẩm thực kết hợp yếu tố mạng xã hội, cho phép người dùng tương tác với nhau và chia sẻ trải nghiệm. Khả năng tìm kiếm, lọc và đánh giá các địa điểm góp phần tạo nên sự tiện lợi và hữu ích của ứng dụng. Ứng dụng mobile ẩm thực What Eat có tiềm năng lớn trong việc đáp ứng nhu cầu tìm kiếm thông tin về ăn uống của người dùng.

2.1. Ứng dụng đặt món ăn online

Mặc dù không trực tiếp tích hợp chức năng đặt món ăn online, ứng dụng What Eat tạo điều kiện thuận lợi cho người dùng tìm kiếm và lựa chọn nhà hàng, từ đó có thể đặt món thông qua các kênh khác. Việc cung cấp thông tin đầy đủ về nhà hàng, menu, và đánh giá người dùng tạo điều kiện cho người dùng quyết định đặt món. Tuy nhiên, việc tích hợp chức năng đặt món ăn online trong tương lai sẽ làm tăng tính tiện lợi của ứng dụng. Ứng dụng đặt món ăn online là một hướng phát triển tiềm năng cho What Eat.

2.2. Xây dựng ứng dụng review nhà hàng

What Eat được thiết kế như một ứng dụng review nhà hàng. Người dùng có thể đăng bài viết, đánh giá và bình luận về các địa điểm ẩm thực. Chức năng này giúp người dùng chia sẻ kinh nghiệm và giúp người khác có cái nhìn tổng quan về chất lượng của nhà hàng. Tính năng này thúc đẩy sự tương tác giữa người dùng và tạo nên cộng đồng người dùng tích cực. Xây dựng ứng dụng review nhà hàng là một phần quan trọng trong việc tạo nên giá trị của What Eat.

III. Ứng dụng giao đồ ăn React Native

What Eat, mặc dù không phải là một ứng dụng giao đồ ăn điển hình, nhưng lại cung cấp một nền tảng hữu ích để tìm kiếm và khám phá các địa điểm ẩm thực. Thông tin chi tiết về nhà hàng, thực đơn và đánh giá giúp người dùng tìm được địa điểm phù hợp và có thể tự đặt giao hàng qua các ứng dụng khác. Tính năng tìm kiếm và lọc giúp người dùng nhanh chóng tìm được những nhà hàng phù hợp với nhu cầu. Ứng dụng giao đồ ăn React Native là một hướng phát triển khác có thể được xem xét trong tương lai để mở rộng chức năng của What Eat.

3.1. Tính năng ứng dụng đặt đồ ăn

Ứng dụng hiện tại tập trung vào việc review và tìm kiếm. Tuy nhiên, việc thêm tính năng ứng dụng đặt đồ ăn sẽ làm tăng thêm tiện ích cho người dùng. Điều này đòi hỏi tích hợp với các nền tảng thanh toán và dịch vụ giao hàng. Tính năng ứng dụng đặt đồ ăn sẽ làm cho What Eat trở nên toàn diện hơn và đáp ứng nhiều nhu cầu của người dùng hơn.

3.2. Tích hợp thanh toán trong ứng dụng

Việc tích hợp thanh toán trong ứng dụng là một bước quan trọng để hoàn thiện chức năng đặt đồ ăn. Nó giúp người dùng thanh toán nhanh chóng và tiện lợi mà không cần rời khỏi ứng dụng. Các giải pháp thanh toán tích hợp cần được cân nhắc kỹ lưỡng để đảm bảo tính bảo mật và an toàn cho người dùng. Tích hợp thanh toán trong ứng dụng là một yếu tố quan trọng giúp nâng cao trải nghiệm người dùng.

Trích đoạn nội dung tài liệu

LỜI MỞ ĐẦU Đại dịch COVID-19 ngày càng diễn biến phức tạp hơn khiến học tập và làm việc gặp không ít kh khăn. Nhờ sự phát triển của công nghệ, việc học tập và làm việc trực tuyến đang là một giải pháp hiệu quả được đa số trường học và công ty lựa chọn. Tuy nhiên do dịch bệnh nên các công ty đang tuyển thực tập sinh với số lượng hạn chế, dẫn đến sinh viên ít cơ hội được thực tập thực tế hơn. Chính v thế việc tham gia một khoá học trong thời gian này là một giải pháp thay thế tương đối hợp lý.

Linux là một hệ điều hành khá phổ biến hiện nay, n thường xuất hiện trên rất nhiều hệ thống đặc biệt là hệ thống máy chủ. Hiểu biết về hệ điều hành này không chỉ giúp chúng ta xử lý những công việc liên quan mà còn giúp mở rộng kiến thức. Nhận thức được tầm quan trọng đ, Công ty cổ phần CrossTech đã phối hợp cùng Công ty TEL4VN và trường Đại học Thủ Dầu Một tổ chức khoá học Linux Essential, giúp sinh viên có cái nhìn mới và hiểu biết hơn về hệ điều hành Linux. Với khoá học này em đã tích luỹ cho mình rất nhiều kiến thức bổ ích và biết cách vận dụng nó một cách hiệu quả.

Song song với quá trình thực tập tại CrossTech, theo yêu cầu của giáo viên hướng dẫn tại trường, em đã nghiên cứu và thực hiện đề tài “Xây dựng Mạng xã hội địa điểm ẩm thực What Eat”. “Hôm nay ăn g?” – Đây không chỉ là một câu hỏi, đây còn là nỗi ám ảnh đối với rất nhiều người mỗi khi muốn đi ăn g đ. Buổi sáng, buổi trưa, buổi tối, câu hỏi đ sẽ xuất hiện bất cứ lúc nào mỗi khi con người ta muốn đi ăn. Vậy câu trả lời cho nó là gì? Thật kh đúng không! Bởi vì hiện nay có rất nhiều mn ăn cũng như cửa hàng để mọi người lựa chọn.

Tuy nhiên để chọn một mn ăn ngon cũng như một địa điểm uy tín lại là một vấn đề khá hóc búa. Trước nhu cầu như trên, các Food Reviewer – những người chuyên đánh giá các địa địa điểm và các mn ăn lần lượt xuất hiện ngày càng nhiều. Song song đ là các website, hội nhóm về ẩm thực cũng xuất hiện ngày một nhiều. Tuy nhiên, đến hiện tại vẫn chưa c một ứng dụng hoặc website nào thật sự đáng tin cậy.

Trước những vấn đề đ, em đã nãy ra ý tưởng thực hiện một ứng dụng để giải quyết vấn đề trên. Và từ đ ứng dụng What Eat được ra đời. Ý tưởng chính của ứng dụng dựa trên các nền tảng mạng xã hội phổ biến hiện nay như Facebook, Instagram, Tiktok, … với những chức năng cơ bản mà một mạng xã hội hiện c. Điểm đặc biệt của ứng dụng là ứng dụng trí tuệ nhân tạo và hệ thống gợi ý để gợi các mn ăn, địa điểm dựa trên thói quen tìm kiếm và sử dụng ứng dụng của ngườ i dùng.

Ứng dụng cũng tích hợp Google Map giúp việc tìm kiếm của người dùng, cũng như việc gợi ý dựa trên địa điểm hiện tại của họ trở nên dễ dàng hơn. Trong báo cáo này em sẽ chia thành 02 phần với những nội dung như sau: PHẦN 1: THỰC TẬP TẠI DOANH NGHIỆP. Gồm các chương: Chương 1: Tổng quan về cơ sở thực tập Chương 2: Nội dung thực tập tại cơ quan tiếp nhận Chương 3: So sánh thực tế với lý thuyết. Đề xuất giải pháp cải tiến.

PHẦN 2: ĐỀ TÀI TỰ NGHIÊN CỨU. G ồm các chương: Chương 1: Giới thiệu tổng quan đề tài Chương 2: Cơ sở lý thuyết và công nghệ Lời mở đầu Trang 1 0 0 CHƯƠNG 4: XÂY DỰNG VÀ CÀI ĐẶT HỆ THỐNG. Màn hình chính. Bài viết mới.

Tìm kiếm và l ọc. Chi tiết bài viết. Chỉnh sửa bài viết. Thích bài viết, bình luận.

Trang cá nhân của người dùng khác. Chỉnh sửa trang cá nhân. Xoá bài viết. Chi tiết địa điểm.

Đổi mật khẩu. Quên mật khẩu. Sơ đồ liên kết màn hình. Sơ đồ triển khai hệ thống.

CHƯƠNG 5: KẾT LUẬN. Kết quả đạt được. Kết quả chưa đạt được. Định hướng phát triển trong tương lai.

88 KẾT LUẬN VÀ KIẾN NGHỊ. Ý kiến bản thân sau khi hoàn thành báo cáo thực tập tốt nghiệp. 90 TÀI LIỆU THAM KHẢO. Tài liệu đơn vị cung cấp.

Tài liệu trên mạng. Tài liệu giáo trình. 9 0 0 vi 0 0 DANH MỤC BẢNG Bảng 1 - Các cột mốc quan trọng trong quá trình thành l ập và phát triển của Công ty Cổ phần CrossTech. Bảng 2 - Các thành viên Co-Founder của CrossTech.

6 Bảng 3 - Các thành viên trong Training Team. 6 Bảng 4 - Các thành viên trong HR Team. 7 Bảng 5 - Các thành viên trong Content Team. 8 Bảng 6 - Các thành viên trong Design Team.

8 Bảng 7 - Các thành viên trong Marketing Team. 9 Bảng 8 - Thành viên trong Admin Team. Bảng 9 – Bảng các nhóm công cụ Firebase Develop & Test Your App. 23 Bảng 10 - Bảng các nhóm công cụ Firebase Grow & Engage Your Audience.

23 Bảng 11 - Bảng đặc tả use case đăng nhập. 30 Bảng 12 - Bảng đặc tả use case đăng ký. 31 Bảng 13 - Bảng đặc tả use case quên mật khẩu. 32 Bảng 14 - Bảng đặc tả use case đổi mật khẩu.

34 Bảng 15 - Bảng đặc tả use case đăng xuất. 35 Bảng 16 - Bảng đặc tả use case đăng bài viết. 36 Bảng 17 - Bảng đặc tả use case chỉnh sửa bài viết. 38 Bảng 18 - Bảng đặc tả use case xoá bài viết.

39 Bảng 19 - Bảng đặc tả use case thích bài viết. 40 Bảng 20 - Bảng đặc tả use case bình luận vào bài viết. 41 Bảng 21 - Bảng đặc tả use case lưu bài viết. 42 Bảng 22 - Bảng đặc tả use case xem bản đồ.

43 Bảng 23 - Bảng đặc tả use case tìm kiếm. 44 Bảng 24 - Bảng đặc tả use case thông báo. 46 Bảng 25 - Bảng đặc tả use case nhắn tin. 47 Bảng 26 - Bảng đặc tả use case theo dõi người dùng.

48 Bảng 27 - Bảng đặc tả use case huỷ theo dõi người dùng. 49 Bảng 28 - Bảng đặc tả use case cập nhật thông tin cá nhân. 50 0 0 Bảng 29 - Bảng đặc tả use case cập nhật ảnh đại diện. 51 Bảng 30 Bảng đặc tả use case thống kê.

52 Bảng 31 - Bảng đặc tả use case quản lý người dùng. 53 Bảng 32 - Bảng đặc tả use case quản trị quyền của tài khoản. 53 vii Bảng 33 - Bảng đặc tả use case quản lý danh sách địa điểm. 54 Bảng 34 - Bảng đặc tả use case quản lý danh mục.

55 Bảng 35 - Bảng dữ liệu người dùng 0. 0 6 Bảng 36 - Bảng dữ liệu các tài khoản người dùng đang theo dõi. 66 Bảng 37 - Bảng dữ liệu các tài khoản đang theo dõi người dùng. 67 Bảng 38 – Bảng dữ liệu bài viết.

6 Bảng 39 - Bảng dữ liệu thích bài viết. 6 Bảng 40 - Bảng dữ liệu bình luận. 6 Bảng 41 - Bảng dữ liệu lưu trữ bài viết. 68 Bảng 42 - Bảng dữ liệu địa điểm.

6 Bảng 43 - Bảng dữ liệu các danh mục. 6 Bảng 44 - Bảng dữ liệu các quyền hạn. 6 Bảng 45 - Bảng dữ liệu tin nhắn. 6 Bảng 46 - Bảng dữ liệu mn ăn.

6 viii 0 0 DANH MỤC HÌNH Hình 1 - Một vài số liệu nổi bật của công ty. 4 Hình 2 - Sơ đồ tổ chức Công ty Cổ phần CrossTech. 5 Hình 3 - Đội ngũ Mentor tại CrossTech. 7 Hình 4 - Buổi khai giảng khoá học, ngày 24/09/2021.

11 Hình 5 - Buổi học đầu tiên, ngày 26/09/2021. Nguồn: TEL4VN. 11 Hình 6 - Buổi học thứ 2, ngày 10/10/2021. Nguồn: TEL4VN.

11 Hình 7 - Buổi học thứ 3, ngày 17/10/2021. Nguồn: TEL4VN. 12 Hình 8 - Buổi seminar Road Map 4U, ngày 23/10/2021. 12 Hình 9 - Buổi học thứ 4, ngày 31/10/2021.

Nguồn: TEL4VN. 12 Hình 10 - Tổng kết khoá học ngày 31/10/2021. Kết thúc khoá Linux Essential. 13 Hình 11 - Chứng chỉ hoàn thành khoá học Linux Essential.

13 Hình 12 - Giao diện website Foody. Hình 13 - Giao diện ứng dụng Foody 0 17 Hình 14 - Ứng dụng Hatto. 1 Hình 15 - Website Bản đồ ăn. 1 Hình 16 - Website Bản đồ ăn - Chi tiết địa điểm.

19 Hình 17 - Ứng dụng được xây dựng bằng React Native. 20 Hình 18 - Một số ứng dụng của Nodejs. 21 Hình 19 - Giao diện Firebase. 2 Hình 20 - Hệ thống gợi ý của ứng dụng Spotify.

27 Hình 21 - Ma trận users - items. 2 Hình 22 - Ma trận dữ liệu đã được chuẩn hoá. 28 Hình 23 - Cấu trúc của Redux. 2 Hình 24 - Sơ đồ use case.

Hình 26 - Sơ đồ tuần tự chức năng đăng nhập. 58 Hình 27 - Sơ đồ tuần tự chức năng đăng ký. 58 Hình 28 - Sơ đồ tuần tự chức năng quên mật khẩu. 59 Hình 29 - Sơ đồ tuần tự chức năng đổi mật khẩu.

60 Hình 30 - Sơ đồ tuần tự chức năng đăng xuất. 60 Hình 31 - Sơ đồ tuần tự chức năng đăng bài viết mới. 61 Hình 32 - Sơ đồ tuần tự chức năng chỉnh sửa bài viết. 61 Hình 33 - Sơ đồ tuần tự chức năng xoá bài viết.

62 ix 0 0 Hình 34 - Sơ đồ tuần tự chức năng thích bài viết. 62 Hình 35 - Sơ đồ tuần tự chức năng bnh luận. 63 Hình 36 - Sơ đồ tuần tự chức năng lưu bài viết. 63 Hình 37 - Sơ đồ tuần tự chức năng xem bản đồ.

64 Hình 38 - Sơ đồ tuần tự chức năng tm kiếm. 64 Hình 39 - Sơ đồ tuần tự chức năng nhắn tin. 64 Hình 40 - Sơ đồ tuần tự chức năng theo dõi người dùng. 65 Hình 41 - Sơ đồ tuần tự chức năng huỷ theo dõi người dùng.

65 Hình 42 - Sơ đồ tuần tự chức năng cập nhật ảnh đại diện. 65 Hình 43 - Sơ đồ tuần tự chức năng cập nhật thông tin cá nhân. 66 Hình 44 - Giao diện đăng nhập. 7 Hình 45 - Giao diện đăng ký.

7 Hình 46 - Màn hình chính – Dành cho bạn .