Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/couchbase-examples/couchbase-lite-retail-demo

Couchbase-lite-retail-demo for app services and p2p sync between Android<->Android, Android<->iOS, iOS<->iOS, and mobile to web via CBL app services.
https://github.com/couchbase-examples/couchbase-lite-retail-demo

Last synced: about 1 month ago
JSON representation

Couchbase-lite-retail-demo for app services and p2p sync between Android<->Android, Android<->iOS, iOS<->iOS, and mobile to web via CBL app services.

Awesome Lists containing this project

README 

          
# Couchbase Mobile Retail Demo Application



A simple retail inventory management application built with [Couchbase Lite](https://docs.couchbase.com/couchbase-lite/current/index.html) for web and mobile (iOS and Android) featuring real-time sync capabilities with [Couchbase Capella App Services](https://docs.couchbase.com/cloud/app-services/deployment/creating-an-app-service.html).



## Demo App Features



- 📱 **Offline-First**: Ability to operate in disconnected mode without an Internet connection with Couchbase Lite as a local database. 

- 🔄 **Real-Time Sync**: Opportunistically sync data, in uni-directional or bi-directional mode with backend Couchbase Capella clusters via Capella App Services. Data is synced across iOS, Android and JS app via App Services.

- 🔄 **Peer-to-Peer Sync**: Sync data directly between iOS and Android apps over a local network

- 🏪 **Multi-Platform Support**: Support for **[iOS](https://docs.couchbase.com/couchbase-lite/current/swift/quickstart.html)**, **[Android](https://docs.couchbase.com/couchbase-lite/current/android/quickstart.html)** and **[web](https://docs.couchbase.com/couchbase-lite-javascript/current/index.html)**. Note that Couchbase Lite supports a broader range of platforms including C, Java, .NET, React Native, Ionic, Flutter etc.



## Demo Video

### Peer-to-Peer Sync across iOS and Android

A demo video where we are able to sync data between two android devices and an iPhone with CouchbaseLite's P2P.



https://github.com/user-attachments/assets/eec4bbed-5fa3-4b55-8b07-f4df01574c33



### Real time Data Sync via Capella App Services



https://github.com/user-attachments/assets/781028cf-6f67-4ad9-abd5-a52daf4c83d6



https://github.com/user-attachments/assets/72f61f2b-118f-4bc6-8f43-30dfac6e8f5e



## Demo Setup

The complete setup of the demo would look like this:



App Setup Diagram



> [!NOTE]

> You are not required to go through the entire setup. Depending on the app and functionality of interest, you can proceed with just the setup required for just that app and functionality.



## Setting up Capella Cluster

These are common set of instructions that you must follow to setup the cloud backend regardless of whether you are running iOS, Android and web versions of the app.



Although instructions are specified for Capella App Services, equivalent instructions apply to self-managed Sync Gateway as well. 



- Create a couchbase cluster on Capella by following these [instructions](https://docs.couchbase.com/cloud/get-started/create-account.html).

  

- Create a bucket named **"supermarket"** cluster on Capella by following these [instructions](https://docs.couchbase.com/cloud/clusters/data-service/about-buckets-scopes-collections.html#buckets). 



- Create two scopes named **"NYC-Store"** and **"AA-Store"** in the bucket by following these [instructions](https://docs.couchbase.com/cloud/clusters/data-service/about-buckets-scopes-collections.html#scopes). 



- In each scope, create three collections named **"inventory"**, **"profile"** and **"orders"** respectively by following these [instructions](https://docs.couchbase.com/cloud/clusters/data-service/scopes-collections.html#create-collection). 



- At end of the steps, your cluster configuration should look something like ![](./common/assets/data-model.png). You have probably not yet imported any data, so your collections will show no documents.



## Importing Sample Data Set



- Download and unzip sample dataset from [demo-dataset.zip](https://cbm-retaildemo-dataset.s3.us-west-1.amazonaws.com/demo-dataset.zip)



- Follow [instructions](https://docs.couchbase.com/cloud/clusters/data-service/import-data-documents.html#how-to-import-data) to import the data set into corresponding scope/collection via inline mode. 

> [!NOTE]

>  When importing data, Select the Field option to map doc Id. 



![](./common/assets/import-data.png)



## Setting up Capella App Services



- Create App Services named **"supermarket-appservice"** (you can name it anything) that is linked to supermarket cluster by following these [instructions](https://docs.couchbase.com/cloud/get-started/create-account.html#app-services) 



- Create two App Endpoints corresponding to the two scopes. This is an example for AA store. Name App Endpoints as **"supermarket-aa"** and **"supermarket-nyc"** by following these [instructions](https://docs.couchbase.com/cloud/get-started/configuring-app-services.html#create-app-endpoint).



The configuration of App Endpoint should look like this: 

![](./common/assets/appendpoint.png)



- Configure two App Users corresponding to the two stores (one in each App Endpoint) by following these [instructions](https://docs.couchbase.com/cloud/app-services/user-management/create-user.html).You can choose any password. If you would like to run the app with prefilled demo credentials, you must use the password mentioned below. This will make more sense when you setup the individual apps later.

   - **user**=nyc-store-01@supermarket.com / **password**=P@ssword1 (this is created in App Endpoint supermarket-aa)

   - **user**=aa-store-01@supermarket.com / **password**=P@ssword1 (this is created App Endpoint supermarket-nyc) 



The configuration of App User should look something like this:

![](./common/assets/appuser.png)



- Go to the "connect" tab and record the public URL endpoint. You will need it when you setup your apps later



![](./common/assets/connectapp.png)



### CORS Setup for Web Applications

If you are trying out the web application, you will need to configure App Endpoints to enable CORS. Skip this section if you are only testing mobile apps.

Repeat these steps for each of the App Endpoints



- Enable CORS on your App Endpoint from the Settings Page by following these [instructions](https://docs.couchbase.com/cloud/app-services/deployment/cors-configuration-for-app-services.html#about-cors-configuration)

  

- Set **Origin** as "http://localhost:8080". This corresponds to the URL that is running the web app. Make sure the ports match as well

  ![](./common/assets/cors1.png)



- Set **Login Origin** as "http://localhost:8080". This corresponds to the URL that is running the web app. Make sure the ports match as well



- Set **Allowed Headers** as "Authorization". This corresponds to the URL that is running the web app. Make sure the ports match as well

  ![](./common/assets/cors2.png)



## Repo Structure



The repo is organized as follows



- **iOS**: This folder includes source code corresponding to the iOS version of the retail application. Follow the instructions in the [README.md](./iOS/README.md) file in the folder to build and run the iOS app. That folder also includes instructions to run the app in peer-to-peer mode.



- **Android**: This folder includes source code corresponding to the Android version of the retail application. Follow the instructions in the [README.md](./Android/README.md) file in that folder to build and run the Android app. That folder also includes instructions to run the app in peer-to-peer mode.



- **web**: This folder includes source code corresponding to the web version of the retail application. Follow the instructions in the [README.md](./web/README.md) file in that folder to build and run the web app.