đồ án 2 xây dựng super app

Ứng dụng tính toán lượng calo phù hợp với xuhướng này, cung cấp cho người dùng các công cụ để quản lý và theo dõi lượngcalo tiêu thụ hàng ngày của họ.Đối tượng sử dụng:•

CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

XÂY DỰNG SUPER APPĐồ án 2

Giảng viên hướng dẫn: ThS Nguyễn Công Hoan

Sinh viên thực hiện:

20520369 – Bùi Đoàn Khánh Ân

Thành phố Hồ Chí Minh, tháng 01 năm 2023

ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

KHOA CÔNG NGHỆ PHẦN MỀM

XÂY DỰNG SUPER APP

TÊN ĐỀ TÀI: XÂY DỰNG SUPER APPCán bộ hướng dẫn: ThS Nguyễn Công Hoan

Thời gian thực hiện: Từ ngày 05/09/2023 đến ngày 31/12/2023Sinh viên thực hiện:

20520353 – Bùi Đoàn Khánh Ân

Nội dung đề tài:

Mục tiêu:

Xây dựng được một super app với mục đích và định hướng, chiến lược rõ ràng,chặt chẽ, có tìm hiểu thị trường,giao diện thân thiện, màu sắc hài hòa, bố cục hợplý; đáp ứng được các tính năng cần thiết với ngôn ngữ Javascript, công nghệ mớiReactJS, , phục vụ cho mục đích kéo được người dùng vào sử dụng app, sau đótiến hành mở rộng theo hướng super app đích thực để có thể khai thác hoàn toàngiá trị mà người dùng có thể mang lại Với hình thức một super app lấy hìnhtượng của một app chăm sóc sức khỏe bằng việc tính calories các thực phẩm ănmỗi ngày làm business core, ứng dụng cung cấp các tính năng nổi bật bao gồm:● Tính toán calories của một thực phẩm

● Thêm dữ liệu về calories của 1 thực phẩm

● Cho phép kết nối các mini app vào appc core

Phạm vi:

Đề tài xây dựng một ứng dụng di động giúp cho người dùng có ý thức hơn về chếđộ ăn uống và thể dục của mình Ứng dụng tính toán lượng calo phù hợp với xuhướng này, cung cấp cho người dùng các công cụ để quản lý và theo dõi lượngcalo tiêu thụ hàng ngày của họ.

Đối tượng sử dụng:

• Fitness Enthusiasts: Những cá nhân tích cực tham gia các hoạt động thể dục và

muốn theo dõi lượng calo nạp vào để tối ưu hóa dinh dưỡng nhằm tăng cơ, giảmcân hoặc sức khỏe tổng thể.

• Weight Management Seekers: Những người đang tìm cách kiểm soát cân nặng

của mình, cho dù họ muốn giảm, duy trì hay tăng cân Ứng dụng có thể giúp họđặt ra và đạt được các mục tiêu liên quan đến cân nặng.

• Health-Conscious Individuals: Những người thường quan tâm đến sức khỏe và

muốn duy trì một chế độ ăn uống cân bằng và bổ dưỡng để có sức khỏe tổng thể.

• Athletes and Sports Professionals: Các vận động viên và chuyên gia thể thao

cần kiểm soát chính xác lượng dinh dưỡng nạp vào để hỗ trợ mục tiêu tập luyệnvà hiệu suất của họ.

Kết quả mong đợi:

Biết được quy trình xây dựng một super appBiết được công nghệ mới và phổ biến hiện nay

Xây dựng được một super app đáp ứng mục tiêu đề ra

Super app có khả năng được active và thành công như road map đặtra

2 LỜI CẢM ƠN

Đồ án với đề tài “XÂY DỰNG SUPER APP” là minh chứng cho quá trình cố gắng

không ngừng trong việc tìm tòi, học hỏi khi học tập tại trường Đại học Công nghệ Thôngtin, thể hiện khả năng của bản thân trong việc áp dụng kiến thức chuyên môn vào giảiquyết bài toán thực tế.

Trong quá trình thực hiện đồ án, em đã nhận được sự hướng dẫn tận tình từ thầy Mộtcách đặc biệt, em xin được gửi lời cảm ơn chân thành đến:

Các thầy cô trường Đại học Công nghệ Thông Tin nói chung và thầy cô ở Khoa Côngnghệ phần mềm nói riêng đã tận tình truyền đạt kiến thức tới em trong những năm họctập tại trường Đó là tài sản quý báu đã giúp em hoàn thành khóa luận và cũng là hànhtrang cho em đường sự nghiệp của bản thân sau này.

Em xin được gửi lời cảm ơn sâu sắc tới ThS Nguyễn Công Hoan, người đã trực tiếphướng dẫn, chỉ bảo, giúp đỡ em những lúc khó khăn, đưa ra những lời khuyên bổ ích đểkhoá luận được hoàn thành đúng tiến độ và đáp ứng các yêu cầu đề ra ban đầu.

Thành phố Hồ Chí Minh, tháng 1 năm 2023

Sinh viên 1

Bùi Đoàn Khánh Ân

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

MỤC LỤC

1 ĐỀ CƯƠNG CHI TIẾT 2

2 LỜI CẢM ƠN 5

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

Chương 1 GIỚI THIỆU TỔNG QUAN ĐỀ TÀI 9

1.1 Lý do chọn đề tài 9

1.2 Mục tiêu 9

1.3 Phạm vi 10

1.4 Đối tượng 10

1.5 Phương pháp thực hiện 10

1.6 Công nghệ sử dụng 11

1.7 Kết quả mong đợi 11

1.8 Khảo sát các ứng dụng liên quan trên thị trường 11

1.8.1 WeChat 11

1.8.2 Momo 13

1.9 Quy trình thực hiện 14

Chương 2 ROAD MAP, CHU TRÌNH PHÁT TRIỂN VÀ CÔNG NGHỆ 16

2.1 Road map 16

2.3 Công nghệ sử dụng 17

Chương 3 PHÂN TÍCH BÀI TOÁN 26

3.1 Phân tích yêu cầu chức năng 26

3.2 Phân tích yêu cầu phi chức năng 28

3.3 Phân tích yêu cầu người dùng 28

3.4 Một số mô hình Use case chi tiết của hệ thống và đặc tả use case 29

3.4.1 Use case Đăng nhập 30

Chương 4 THIẾT KẾ HỆ THỐNG 39

4.1 Thiết kế kiến trúc hệ thống 39

4.1.1 Kiến trúc super app 39

4.1.2 Kiến trúc thư mục 40

4.2 Thiết kế giao diện 41

4.2.1 Mô tả màn hình 41

Chương 5 KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 45

5.1 Kết quả đạt được 45

5.2 Thuận lợi và khó khăn 46

5.2.1 Thuận lợi 46

5.2.2 Khó khăn 46

5.3 Hướng phát triển 46

4 TÀI LIỆU THAM KHẢO 47

Chủ quan:

Trong suốt quá trình học tập, nhóm chúng em đã trải nghiệm qua các ứng dụng khác nhauvà hoạt động trên nhiều nền tảng Cảm thấy hứng thú với công nghệ mobile và nắm bắtđược nhu cầu từ thực tế, nhóm đã đề xuất ý tưởng xây dựng một super app để tạo cơ hộiđể thử thách bản thân và tiếp cận được nhưng xu hướng công nghệ hiện tại mà ngườidùng cần Đây là trải nghiệm lần đầu của nhóm về việc xây dựng một super app hoànchỉnh Ngoài ra, nhóm ấp ủ một sản phẩm hoàn thiện hơn, với việc nghiên cứu và xâydựng các giải pháp cho một hệ thống tự động, sử dụng công nghệ trí tuệ nhân tạo để nângcao khả năng hỗ trợ người dùng.

1.2 Mục tiêu

● Hoàn thiện thêm ứng dụng super app với giao diện thân thiện, màu sắc hài hòa, bốcục hợp lý

● Đáp ứng được các tính năng cần thiết

● Hỗ trợ tạo thói quen chú ý bữa ăn của bản thân: Xu hướng toàn cầu ngày càngtăng hướng tới lối sống lành mạnh hơn, mọi người ngày càng có ý thức hơn về chếđộ ăn uống và thể dục của mình.

● Khả năng thương mại hóa, tạo ra cơ hội kinh doanh: Một super app có thể đưa vàothực tiễn cho mục đích thương mại

1.3 Phạm vi

Phát triển super app cho phép người dùng

● Tính toán lượng calo có trong 1 lượng thực phẩm

● Lọc, tìm kiếm thông tin của thực phẩm

● Tính toán lượng calories có thể cần mỗi ngày

● Cho phép các mini app khác được sử dụng trực tiếp trên super app

1.4 Đối tượng

• Fitness Enthusiasts: Những cá nhân tích cực tham gia các hoạt động thể dục và

muốn theo dõi lượng calo nạp vào để tối ưu hóa dinh dưỡng nhằm tăng cơ, giảmcân hoặc sức khỏe tổng thể.

• Weight Management Seekers: Những người đang tìm cách kiểm soát cân nặng

của mình, cho dù họ muốn giảm, duy trì hay tăng cân Ứng dụng có thể giúp họ đặtra và đạt được các mục tiêu liên quan đến cân nặng.

• Health-Conscious Individuals: Những người thường quan tâm đến sức khỏe và

muốn duy trì một chế độ ăn uống cân bằng và bổ dưỡng để có sức khỏe tổng thể.

• Athletes and Sports Professionals: Các vận động viên và chuyên gia thể thao

cần kiểm soát chính xác lượng dinh dưỡng nạp vào để hỗ trợ mục tiêu tập luyện vàhiệu suất của họ.

1.5 Phương pháp thực hiện

● Tìm hiểu, phân tích quy trình xây dựng một website bằng các công nghệ đã đề ra

● Phân tính, đánh giá các ứng dụng tương tự

● Khảo sát ý kiến người dùng tiềm năng

1.7 Kết quả mong đợi

Biết được quy trình xây dựng một super appBiết được công nghệ mới và phổ biến hiện nay

Xây dựng được một super app đáp ứng mục tiêu đề ra

Super app có khả năng được active và thành công như road map đặt ra

1.8 Khảo sát các ứng dụng liên quan trên thị trường

Hiện nay tại Việt Nam cũng như trên thế giới đã xuất hiện khá nhiều Super app rất nổitrội, nhờ những Super app này mà những công ty này có cơ hội khai thác triệt để giá trị từngười tiêu dùng từ đó vươn lên trở thành những người dẫn đầu trong các thị trường

1.8.1 WeChat

WeChat, hay “Weixin” như được biết đến ở Trung Quốc, khởi đầu là một nền tảng nhắntin đơn giản và sau đó phát triển nhanh chóng Tencent lấy cảm hứng từ sự phổ biến củaWhatsApp và các ứng dụng nhắn tin khác và muốn phát triển một ứng dụng cung cấpnhiều hình thức liên lạc – văn bản, giọng nói, video và trò chuyện nhóm Tuy nhiên, quanhiều năm, WeChat đã phát triển thành một “siêu ứng dụng” với nhiều tính năng vượt xatính năng nhắn tin và giờ đây kết hợp tất cả các chức năng thường chỉ có khi sử dụnghàng tá ứng dụng khác nhau

Công nghệ phía sau WeChat:

Điểm đặc biệt của WeChat nằm ở thiết kế và danh sách tính năng phong phú Giao diệnngười dùng trực quan và giúp việc điều hướng qua các phần khác nhau khá liền mạch.Một tính năng chính là “Moments”, một giao diện giống dòng thời gian, nơi người dùngcó thể chia sẻ thông tin cập nhật, ảnh và bài viết, tương tự như nguồn cấp tin tức củaFacebook, nhưng có thể coi nó giống nguồn cấp dữ liệu của các ứng dụng khác nhau hộitụ lại Có thể cho rằng, tính năng quan trọng nhất của WeChat là “WeChat Pay”, một loạiví kỹ thuật số cho phép người dùng dễ dàng thực hiện thanh toán di động và chuyển tiền.Sự phổ biến của WeChat Pay đã khiến các giao dịch không dùng tiền mặt trở thành tiêuchuẩn ở Trung Quốc, từ mua hàng tạp hóa đến thanh toán hóa đơn điện nước Vì ngườidùng chỉ cần đăng ký 1 lần trong ứng dụng cũng lưu trữ tập trung chức năng thanh toánnên các ứng dụng khác có thể dễ dàng truy cập Vì vậy, bạn có thể mua sắm trực tuyến,mua các tính năng mới, đi ăn ngoài hoặc chỉ gửi tiền cho bạn bè mà không cần phải nạpthẻ tín dụng mới mỗi lần, đăng ký PayPal hoặc những việc khác Vì các chức năng nhưxác thực, thanh toán, kết nối API và nhiều chức năng khác hoạt động tự động nên ngườidùng chỉ cần có một tài khoản và không bao giờ cần đăng nhập nhiều lần, không bao giờ

cần gửi lại địa chỉ thanh toán hoặc thẻ tín dụng Nền tảng WeChat cũng hoạt động chocác công ty thông qua “Tài khoản chính thức”, cho phép họ tương tác với những ngườitheo dõi mình Về cơ bản, tính năng này biến WeChat thành một công cụ tiếp thị, tạokênh trực tiếp giữa thương hiệu và người tiêu dùng, đồng thời cho phép bán sản phẩm,dịch vụ hoặc dịch vụ kỹ thuật số (“Mini Programs”) dễ dàng thông qua nền tảng WeChat.Đối với nhiều công ty và công ty khởi nghiệp, các “Mini Programs” đã trở thành một hệsinh thái của riêng họ để tiếp cận khách hàng và bán hàng nhanh chóng Đây là nhữngứng dụng phụ trong WeChat cung cấp nhiều dịch vụ khác nhau như thương mại điện tử,gọi xe và giao đồ ăn, giúp giảm nhu cầu về các ứng dụng riêng biệt.

Ứng dụng:

Người dùng có thể sử dụng toàn bộ các dịch vụ, tất cả đều được kết hợp trong ứng dụng.Từ các cuộc trò chuyện đơn giản thay thế WhatsApp, đến tương tác với chính quyền, kếthợp với các chức năng truyền thông xã hội được cung cấp bởi Facebook, Instagram,Twitter, Foursquare, v.v., cho đến các cửa hàng trực tuyến và ứng dụng thanh toán Ứngdụng này là một hệ sinh thái hoàn chỉnh cung cấp mọi thứ cho một người dùng mà nếukhông sẽ yêu cầu hàng tá ứng dụng Đó là ứng dụng “one-stop” cho mọi thứ và bạn thậmchí không cần phải rời khỏi ứng dụng.Sau đây là một ví dụ về việc một người dùngWeChat dành thời gian trong ngày ra sao:

Nhược điểm:

Vì sự thành công và phổ biến của nó, WeChat thường bị chỉ trích Những điểm chính bịchỉ trích là bảo vệ dữ liệu và bảo mật Do quy mô tuyệt đối và chủ quyền dữ liệu củaWeChat, có thể sàng lọc hoàn toàn người dùng từ sáng đến tối và tạo ra một “tính cáchhoàn hảo” Hiện chưa rõ ứng dụng có quyền truy cập vào tất cả dữ liệu người dùng ở mứcđộ nào và liệu dữ liệu này có được chia sẻ với chính phủ Trung Quốc hay không cũngchưa rõ ràng Ngoài ra, chính sách kiểm duyệt của WeChat cũng là một vấn đề khác, đặcbiệt là ở phương Tây Được biết, một số từ khóa và chủ đề nhất định đã bị lọc hoặc chặn,điều này phù hợp với chính sách quản lý Internet nghiêm ngặt của Trung Quốc và nhàsản xuất Tencent dường như đang bị chính phủ Trung Quốc giám sát chặt chẽ.

1.8.2 Momo

Siêu ứng dụng được Ví điện tử MoMo cho biết đã phát triển từ năm 2018 bằng trí tuệ củangười Việt Nam, tích hợp công nghệ Big Data, AI… có thể giúp đối tác hiểu và tiếp cận khách hàng sâu hơn, chính xác, không chỉ đúng thời điểm mà còn đúng nhu cầu.

Ví điện tử này không dừng lại ở việc cung cấp công cụ thanh toán, Siêu ứng dụng MoMo sẽ giúp các đối tác sử dụng công nghệ tiếp cận thêm hàng triệu khách hàng mới với chi phí thấp hơn, đồng thời chăm sóc khách hàng tốt và hiệu quả hơn.

Theo đó, tạo điều kiện cho các đối tác nhỏ bé, đơn lẻ như các tiểu thương, người bán hàng rong, các công ty khởi nghiệp, có thể “Go-online” để bán hàng và thanh toán trực tuyến.

Ngoài ra, Siêu ứng dụng còn hỗ trợ các doanh nghiệp đối tác tham gia vào quá trình chuyển đổi số một cách dễ dàng và nhanh chóng với hy vọng nâng tầm ngành bán lẻ và chuyển đổi số trong nền kinh tế Việt Nam.

Công nghệ:

WeChat có mini programs thì Momo có mini app, Momo đã nhà một bên outsourcing (Call-Stack) để xây dựng kiến trúc Super App trên nền tảng cross-platform sử dụng ReactNative Momo cung câp bộ sdk và design system riêng cho các bên muốn đưa doanh nghiệp của mình vào Momo app Chi tiết có thể xem tại đây.

Tạo codebase cho FrontendThiết lập API Superbase

6 + 7 + 8 +9 Xây dựng Core App

10 + 11 Xây dựng mini app Thứ 1

12 - Tìm hiểu về Module Bundler

- Tìm hiểu về Webpack, Module Federation- Tìm hiểu về Re.Pack

14 Viết báo cáo

Chương 2ROAD MAP, CHU TRÌNH PHÁT TRIỂN VÀ CÔNG NGHỆ2.1 Road map

 Nghiên cứu thị trường

 Chọn ra các tính năng chính cho app core Lựa chọn công nghệ và thiết kế hệ thống Thiết kế giao diện

 Phát triển app core Phát hành app core

 Nghiên cứu thị trường hoặc mời gọi các partner tham gia tạo các mini app Tiếp tục cải tiến và mở rộng app

2.2 Chu trình phát triển

2.2.1 Core App2.2.1.1 Thị trường:

Ngành thể dục và chăm sóc sức khỏe đang có sự tăng trưởng nhanh chóng và một ứng dụng tính toán lượng calo có thể thâm nhập vào thị trường này bằng cách cung cấp giải pháp toàn diện để người dùng theo dõi không chỉ lượng calo mà còn cả thói quen tập thể dục của họ.

 Việt Nam chưa có ứng dụng về nghiệp vụ này

 Các ứng dụng cạnh tranh có mức phí cao, ẩn nhiều quảng cáo Tính năng phức tạp, khó sử dụng

2.2.1.4 Đối thủ cạnh tranh:

 MyFitnessPal Cronometer

2.2.2 Meal Planning App2.2.2.1 Thị trường:

Thị trường ứng dụng lập kế hoạch bữa ăn đã có sự tăng trưởng đáng kể, được thúc đẩy bởi sự thay đổi lối sống, nâng cao nhận thức về sức khỏe và thể chất cũng như mong muốn về sự thuận tiện.

2.2.2.2 Feature list:

 Tạo bữa ăn theo bữa trên ngày Thông báo giờ ăn

 Hiện thị công thức nấu món ăn

2.2.3 PTO (Physical training online)2.2.3.1 Thị trường:

Thị trường ứng dụng tập luyện đã chứng kiến sự tăng trưởng đáng kể trong những năm gần đây, được thúc đẩy bởi sự chú trọng ngày càng tăng vào sức khỏe và thể lực, tiến bộ công nghệ và thay đổi sở thích tập luyện Dưới đây là cáckhía cạnh chính của thị trường ứng dụng tập luyện.

2.2.3.2 Feature list

Chọn kế hoạch tập luyện theo nhiều chế độPhân bổ bài tập theo ngày

Thông báo tới giờ tập luyện

Theo dõi việc tập luyện đúng kế hoạch2.2.4 Healthy e-mark

2.2.4.1 Thị trường:

Xu hướng toàn cầu ngày càng tăng hướng tới lối sống lành mạnh hơn, mọi ngườingày càng có ý thức hơn về chế độ ăn uống và thể dục của mình Việc có một ứng dụng để chuyên mua những thực phẩm, dụng cụ chuyên hỗ trợ cho người tiêu dùng sẽ có cơ hội phát triển rất lớn.

Các khái niệm chính của React:

● Component-based architecture: chia các thành phần lớn thành các thành phần nhỏ hơn nhằm dễ đọc, dễ bảo trì và có tính tải sử dụng.

● Virtual DOM: React sử dụng virtual Document Object Model (DOM), cho phép cập nhật và hiển thị giao diện người dùng một cách hiệu quả Khi trạng thái của một thành phần (component) thay đổi, React chỉ cập nhật phần DOM thực bị thay đổi thay vì tải lại toàn bộ trang.

● JSX: là một phần mở rộng cú pháp cho Javascript tương tự như HTML Nó được dùng trong React để mô tả các cấu trúc UI JSX giúp cho code dễ đọc hơn và dễ dàng hơn trong việc viết code React.

● State and Props: là các khái niệm chính trong React State (trạng thái) đề cập đến dữ liệu thay đổi theo thời gian của một thành phần Props (viết tắt của properties) được dùng để truyền dữ liệu từ thành phần cha đến thành phần con.

Hình 3: ReactJS

2.3.1.2 Re.Pack

Môi trường React Native và môi trường Trình duyệt có sự khác biệt React Native cần chạy mã khởi tạo/thiết lập JS bổ sung để có thể sử dụng được Có sự khác biệt lớn giữa các API có sẵn Trong React Native,cũng có các tệp dành riêng cho nền tảng - ví

dụ: ios.js, android.js, v.v

Kết hợp tất cả những điều trên lại với nhau, khiến Webpack không thể tạo ra bundle nào do lỗi khi build và khi đó bundle do Webpack tạo ra theo mặc định không thể sử dụng được.

Do đó, chúng ta cần thực hiện các thay đổi đối với cấu hình Webpack cũng như thay đổi cách thức và những gì Webpack đưa vào bundle cuối cùng Tất cả những thay đổi cần thiết này được gói gọn bên trong Re.Pack dưới dạng plugin Webpack.

Re.Pack là thứ giúp Webpack và bundle do Webpack sản xuất có thể sử dụng được trong ứng dụng React Native Ngoài ra, Re.Pack là thứ cho phép chúng ta sử dụng Code

Splitting được cung cấp bởi Webpack bên trong các ứng dụng React Native.Các tính năng chính:

● Mobile module bundler: cho phép người dung sử dụng các tính năng của module bundler của webpack trong

● Code Spliting: Code Spliting là một kỹ thuật chia mã thành nhiều tệp, có thể tải theo request và được song song hóa Nó có thể được sử dụng để: Tối ưu hóa kích thước ban đầu của ứng dụng và cải thiện hiệu suất khởi động bằng cách trì hoãn việc phân tích cú pháp (chỉ với JS) và thực thi (JSC và Hermes) của mã không quan trọng Tự động cung cấp nội dung và tính năng cho người dùng dựa trên các yếu tố thời gian chạy.Dành cho các nhà phát triển và công ty: chia nhỏ và tách biệtcác phần của sản phẩm để cải thiện khả năng mở rộng và giảm sự ghép nối

● Module Federation: Module Federation là một kiến trúc chia ứng dụng thành nhiều phần Những mảnh này được gọi là container Tương tự như các dịch vụ vi mô, Liên kết mô-đun chia ứng dụng thành các giao diện người dùng phân tán, đôi khi được gọi là giao diện người dùng vi mô

Hình 4: Module Federation

2.3.1.3 Redux toolkit

Redux là một công quản lý state phổ biến trong hệ sinh thái React Được sử dụng nhằm quản lý state một cách hiệu quả, chia sẻ state giữa các thành phần mà không phải thông qua props Redux toolkit là một package được sinh ra nhằm giải quyết phần lớn vấn đề vềconfig của redux khá dài dòng để sử dụng.

Các khái niệm chính của Redux bao gồm:

● Actions: đơn giản là các events Chúng là cách mà chúng ta gửi dữ liệu từ app đến Redux store Những dữ liệu này có thể là từ sự tương tác của người dùng với app, API calls hoặc cũng có thể là từ form submission.

● Reducers: là các hàm dùng để lấy state hiện tại của app, thực hiện một action và trả về một state mới Những states này được lưu như những objects và chúng định rõ cách state của một ứng dụng thay đổi trong việc phản hồi một action được gửi đến store.

● Store: lưu trạng thái ứng dụng và nó là duy nhất trong bất kỳ một ứng dụng Redux nào Bạn có thể access các state được lưu, update state, và đăng ký or hủy đăng ký các listeners thông qua helper methods.

Hình 5: mô hình hoạt động của Redux

2.3.2 Backend

2.3.2.1 Supabase Overview

Supabase là một Baas (Backend as a service) open source được coi là có thể thay thế được cho Firebase Supabase cung cấp đầy đủ và tốt các tính năng cơ bản và nâng cao để có thể xây dựng một ứng dụng hoàn chỉnh, có khả năng mở rộng và bảo trì tốt sau này Trên đà phát triển thần tốc của thế giới công nghệ hiện nay, tốc độ và sự tin cậy được đặt lên hàng đầu, vì thế khi ta có thể vận dụng được những công nghệ mới tiện lợi một cách hiệu quả sẽ đem lại kết quả rất đáng mong đợi.

2.3.2.2 Supabase architecture

Supabase là sự kết hợp của nhiều công cụ open source khác nhau, nó xây dựng những tính năng của Firebase thành những open soure product Mục tiêu của supabase là cung cấp cho lập trình viên một trải nghiệm giống như Firebase nhưng là bằng các open sourcetool.

Supabase là một hosted-platform Chúng ta chỉ cần đăng ký và sử dụng mà không cần phải cài đặt bất cứ điều gì Ngoài ra Supabase còn hỗ trợ ta self-host và develop-locally.Mỗi project của supabse sẽ có cấu trúc như trên, trong đó:

1.PostgreSQL: Đây là trung tâm của Supabase, mỗi một project là một full Postgres

database Supabse sẽ cung cấp cho ta một bộ công cụ để quản lý database đó dễ dàng nhưchúng ta sử dụng Firebase.

2.GoTrue: Một JWT-based API hỗ trợ việc quản lý user và các vấn đề liên quan đến

access tokens.

3.PostRest: Là một standalone web server biến đổi trực tiếp PostgreSQL database thành

một RESTful API.

4.RealTime: Là một websocket engine có khả năng mở rộng cao để có thể quản lí được

các việc như Presence, broadcasting messages, streaming database changes của người dùng.

5.Storage: Một dịch vụ lưu trữ tương thích với S3 để lưu trữ các metadata của Postgres 6.Postgres-meta: Một RESTful API để quản lý Postgres, cho phép ta lấy dữ liệu của các

bảng, thêm các vai trò , chạy các queries,…

7.Kong: là một cloud-native API gateway cho các API nêu trên.2.3.2.3 Tính năng

2.3.2.3.1 Database

Mỗi project Supabase sẽ là một full Postgres database Supabase cung cấp cho ta các api và công cụ để có thể sử dụng database dễ dàng nhất có thể mà không cần quá am hiểu về database.

Một số tính năng nổi bật như là: