Grocery App - Setup

This page describes how to setup Grocery Mobile App Setup

Remember to enter your own GOOGLE API KEY in the source code in the place of YOUR_API_KEY. Without this api key, many functionalities might not work, especially maps. Check the docs for more info

It has 3 steps which are as follows. Make sure before these steps you must have completed the Initial Dev Environment Setup :-

1. Running the App (Web Browser)

2. Testing the Grocery App

3. Firebase Integration into our app

1. Running the App

Go to Running the App ( Web Browser) section to complete this step. Here we will run our app in the development mode.

To change the app to a device view, right click anywhere on the browser and choose Inspect Elementand choose device mode.

The screen running the app in "device mode" is shown below.

2. Testing the Grocery App

Go to Grocery App Testing section to see how to do it. Now we are successfully running our Grocery App in device mode. Let us test whether all the app features are working as expected.

3. Firebase Integration into our App

Go to Firebase Integration In Grocery App section to complete this step. Here we will setup the environment files in Ionic project to connect to right firebase instance. Previously it will have config to our sample firebase. If the connection is proper and rules and permissions are right. You should get your app working.

After completing the above step, go to the Grocery App running in the browser (as shown in the screen below).

It shows the following error "Firebase Error - the query requires index and you can create it here".

Click on the Link given in Above error to create Index. Firebase Index is a way to search using complex queries. So without these enabled you will be facing issues in the app.

It will open a your firebase project console in your browser with the title “create a composite index”, as shown below. Click on “Create index”.

It should show the status as "Building" for the composite index as shown below. This may take a long time to build index. So wait for it to be completed. It may take 2-3 minutes.

After the status changes to "Enabled" (Sometime it doesn't change the status - but a simple alert comes on completion of index) . The screen is as shown below.

Open you Grocery App running in the browser and refresh it to see that error is fixed.

You will need to build one more index in this app as coming up next. The screen below the following error.

It shows the following error "Firebase Error - the query requires index and you can create it here".

Click on Above link will open a your firebase project console in your browser with the title “create a composite index”, as shown below. Click on “Create index”.

It should show the status as "Building" for the composite index as shown below. This may take a long time to build index. So wait for it to be completed. It may take 2-3 minutes.

4. Testing Integration of Grocery Dashboard and App

Go to Testing Integration of Grocery Dashboard and App section to complete this step. Here we will check if dashboard and app are integrated and the products, categories and offers we added in the Dashboard app are reflected in our Grocery app as well.

Completed Grocery Dashboard and App setup

Now we have successfully run the Grocery App and integrated it with Dashboard app .

This completes our sample Grocery Dashboard and App flow !! There are few more flows which you can explore the app in more detail via our Demo APK or Feature videos.