Grocery Shopping Complete Platform

Grocery Shopping App Platform - Ionic 4

What is Grocery App with the dashboard?

1. Grocery Starter Overview

2. Deploying the dashboard or app as PWA

3. Building App on device

4. Understanding the database

5. Step-by-step instructions to use this Starter

5.1 Firebase setup

5.2. Dashboard Setup

- Pre-requisites for setup

- Install dependencies

- Run dashboard for first time

5.3. App setup

- Pre-requisites for dashboard setup

- Install dependencies

- Run app for the first time

5.4. Integration

Conclusion

Next Steps

References

Grocery Shopping App Platform - Ionic 4




Complete Grocery shopping platform with Admin Dashboard

In this post, we will describe the use of Enappd’s Ionic 4 Grocery shopping app and admin panel. It is a full-fledged Ionic starter with Firebase that can help you start your own Grocery business in minimum time.


Title
Subtitle
Kicker


What is Grocery App with the dashboard?


“Grocery App with dashboard” is a high-quality starter package for Grocery e-commerce. Both the app and dashboard are built in Ionic Framework, so they can be used either as an app or PWA.

This ionic template is built using Angular 7 and Ionic Framework v4 and has everything you need to jump start your app development!

Ionic 4 represents the culmination of more than two years of research and hard work transforming Ionic from “mobile for Angular” into a powerful UI Design System and app framework for every web developer in the world.

Benefits

  • Clients: Get your next app built by developers using Ionic 4 Grocery Complete Platform. This way you save tonnes on UI development, and significantly on major features like Firebase integration, and many other native plugin integrations. Approximate savings can run in thousands of dollars per app.
  • Developers: This is the time to save your expensive time and write less code for your new app. You can build a rich app with Ionic in a very straightforward way. Your knowledge about using CSS, HTML, and JavaScript will help serve as the building blocks of your app. Ionic also has lots of tutorials you can use.
  • Designers: Customization of the layout has no limit with Ionic. You don’t even have to modify a complicated widget. It is pretty clean and simple to start your own customization and create a satisfactory design.

Get Grocery App with dashboard and enjoy lots of carefully designed pages with the most required functionalities!

This document is divided into several sections to provide full information about Grocery App and Admin Dashboard

  1. Grocery Starter Overview
  2. Deploying the app or Dashboard as PWA on Firebase
  3. Deploying the app on Android or iOS
  4. Understanding the FireStore database
  5. Step-by-step instructions to use this Starter

Step-by-step instructions to use this Starter will be further divided into

  • Firebase project setup
  • Admin Dashboard setup
  • Ionic 4 App setup
  • App and Dashboard Integration

Title
Subtitle
Kicker


1. Grocery Starter Overview


You can take your Ionic Framework app to the next level using this starter app template. Check all the features, designs and beautiful components that you can use on your app!

All in with Ionic 4 and Angular 7

This Ionic 4 Template includes lots of Ionic 4 components coded the angular way and features that you will love. Along with this documentation, we will explain how to use most of them.

100% Flexible and Customizable

The template includes lots of pages, features, and components but you are free to use just what you need and delete the code you don’t. The code structure is super modularized so you will find easy to modify the code to fit your needs.

CSS variables

CSS Variables provide easy customization of an application and allow a value to be stored in one place, then referenced in multiple other places. So, for example, if you want to change the colors of your app, by just changing some variables your app will have the desired colors in just a few seconds!

Documentation

This documentation was built with a lot of effort to help you get the most out of this Ionic 4 template. If there is anything that you don’t understand please drop us an email at admin@enappd.com and we will try to explain it better.

Main Features and Pages

Go to our site to see the main Features and Pages of this amazing Ionic 4 Grocery shopping complete platform.

PWA ready

Progressive web applications are web applications that load like regular web pages or websites but can offer user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications.

Ionic 4 is a step forward for Progressive Web Apps. Although this starter is made to serve as an app more than PWA because of the way Grocery shopping platforms work, with minor modifications, you can use this completely as a PWA too. Learn more about PWA with Angular and Ionic.

You will be able to use this Ionic 4 starter as an iOS app, an Android app, a web app or as a PWA! Too many options, right?

Title
Subtitle
Kicker


2. Deploying the dashboard or app as PWA


Learn how to deploy your app as PWA on a free Firebase hosting

Prepare Firebase project for PWA

For deploy the app as PWA, we will demonstrate using Firebase hosting.

First, create a project on Firebase.

Now, in your project directory, run

$ npm install -g firebase-tools

This will install Firebase tools in your project. Now login into Firebase using

$ firebase login

It will redirect you to browser, and authenticate using your google account. Once you are logged in, you can run this command to attach the code to your project.

$ firebase init

It will take you through a list of options for project setup.

This will create a firebase.json file which should look like the following

{
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"destination": "/index.html"}]}}

Convert the app into a PWA

The two main requirements of a PWA are a Service Worker and a Web Manifest. While it’s possible to add both of these to an app manually, the Angular team has a @angular/pwa package that can be used to automate this. To add this package to the app, run:

$ ng add @angular/pwa

Finally, build your project into production using

$ ionic build --prod

This will create a production build of your ionic app for PWA deployment. Use Firebase to deploy the app using

$ firebase deploy --only hosting

Whenever you make any changes to the app, make sure you run ionic build --prod before deploying it again on the hosting.

This will deploy your app on a Firebase URL such as https://grocerydashboard.firebaseapp.com where you will see your app running perfectly.

The Firebase console will show the deployment like this

For a more detailed step-by-step guide on PWA deployment, check this blog

When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers and features like Geolocation, etc.

For more information on PWA related option in firebase.json , check here


Title
Subtitle
Kicker


3. Building App on device


Learn how to build the app on a device and how to deploy it on a Firebase based hosting in quick steps

Build the app for Android

Once you have modified your app as per your requirements, you can start building the app for Android. Add an Android platform to the project by running

$ ionic cordova platform add android

This step will add an Android platform to the project.

The previous step will require Android Studio preinstalled on your system. You can also install Android SDK without Android Studio, but that is not the recommended way.

Now prepare the platform for a build

$ ionic cordova prepare android

And run the app on your device or simulator by running

$ ionic cordova run android

More information can be found in Ionic documentation

Build the app for iOS

An iOS app can be built only on an Apple based system. Add an iOS platform to the project by running

$ ionic cordova platform add iOS

This step will add an iOS platform to the project.

Previous step will require Xcode preinstalled on your system. You will also need an Apple developer license and proper provisioning profiles to build the app on the device.

Now prepare the platform for a build

$ ionic cordova prepare ios

And run the app on your device or simulator by running

$ ionic cordova run ios

OR, run the app using XCode directly.

More information in ionic documentation


Title
Subtitle
Kicker


4. Understanding the database


We are using FireStore database in this starter. Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity. Cloud Firestore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions.

There will be 5 tables (collections) we are using in this starter kit:

  • User Table
  • Product Table
  • Category Table
  • Order Table
  • Offer Table

User Table:-

Fields in the user table

  • username:- holds user name for the user
  • phoneNumber:- holds contact number for the user
  • email:- holds an email address for the user
  • gender:- holds gender info for the user
  • userId:- holds unique User id for the user which is generated by Firebase

Product Table:-

Fields in product table

  • name :- it holds name of the Product
  • images : — it holds an array of image URL for the products
  • regularPrice :- If holds Regular Price of your order
  • pricePerQuantity :- It holds Your Product Quantity per Price like 1kg m 200g , if you leave blank we will take it as 1 product per price
  • offer :- It holds Offer on your Product in percent
  • description :- Product description comes here
  • instruction :- Delivery instruction for the product comes here
  • pin :- If you want to deliver your product in specific pin code place all the pincode here. if you leave it blank it will support for all Pincode
  • tags :- Tag related to product comes here
  • Like :- Best Offers, Popular Deals
  • categories :- it will take all category id related to the product
  • instock :- it is a boolean variable means if it is true then only your product shown in Instock Products Stack
  • free_shipping :- it is a boolean variable means if it is true then your product support Free shipping
  • delivery_in :- Your product will deliver in how many days will come here
  • cod :- it is boolean variable means if it is true then your product support Cash on delivery

Category Table :-

Fields in category table

  • name :- Your name for the category comes here
  • description :- Description for the category comes here
  • discount : discount related to category comes here
  • home_page :- it is boolean. If you set it true then only your category will show in home page
  • images :- Array of all image URL related to the category comes here

Offer Table:-

Fields in offer table

  • titles :- Title for the offer comes here
  • description :- Description for the offer comes here
  • code :- Promo-code for the offer comes here
  • images :- Array of all image URL related to this Offer comes here
  • discount :- Discount in percentage user will get after applying the promo-code will come here

Order Table:-

Fields in the order table

  • address :- it holds all related information of address on which this order has to deliver
  • created_at :- holds Created Date for the product
  • GrandTotal :- it is a calculation of all the money you get in this order after deduction of all the discounts
  • Products :- Array of the product ordered
  • SelectedDay :- on which day User needs this product
  • SelectedTime :- User’s suitable time period for receiving this order
  • UserId :- Holds the ID of the user who creates this order

Title
Subtitle
Kicker


5. Step-by-step instructions to use this Starter


For using this Starter kit follow this we will follow these steps

  1. Firebase setup
  2. Dashboard setup
  3. Ionic App setup
  4. Test Integration How to use this Starter

Title
Subtitle
Kicker


5.1 Firebase setup


Once you purchase the starter, you have all the code to your disposal. You can modify the app any way you want, but here are two major ways it can be done.

This starter Kit uses Firebase cloud FireStore as its database so in the very first step we will connect Firebase to our app

Firebase is one of the most powerful and popular Database as a Service (DBaaS) solutions available today. It provides a scalable cloud database to store and sync data for client and server-side development.

For connecting Firebase to our Ionic app we’re using the @angular/fire plugin. @angular/fire is The official library for Firebase and Angular.

Set Firebase Configuration

This is one of the crucial steps in using this starter. Many of the users forget to do this step and end up using our test Database for their production app. Doing so can results in a data loss, in case some other test user decides to delete a product. So follow these steps for connecting your own Firebase project to this starter kit

Step 1:- In this step, we will create a project in Firebase console. For that, we will go to Firebase



Firebase website

Step 2:- We will create a new project in our Firebase console. So click on Go to console button to check all of your projects



Go to Firebase console

Step 3:- Create a new project if you do not have already otherwise click on any existing project you want to use



Firebase console

Step 4:- When you click on Add Project Button it will ask you for your project name, fill your project name in project name input box, accept their terms and condition and click on Create Project button



Add a project in Firebase

Step 5:- So now our Firebase project is created. In this step, we will add Firebase to our Ionic app. For this, select Add Firebase to your Web App



Firebase project dashboard

Step 6:- In this Step, we will register our app to firebase so we will enter our app’s nickname and click on the register button



Create a Firebase Web App

Step 7:- Copy your Firebase Config from Firebase dashboard



Pick Firebase credentials from the code snippet

Step 8:- Paste your Firebase config in your environment file in your Ionic app project. The environment file should be in the project root.



Create an environment file in Ionic project base

Step 9:- We have successfully created our Firebase project and connected to our app/dashboard. From left side tabs, we can use Firebase tools according to our requirements.



Use more Firebase services from left panel

Step 10:- Active database in your firebase project.for this goto Database tab is our left panel and then click on Create Database in below page



Create Database

And then it will ask for your Database permission so in this case I will suggest you to Start in the locked mode because in this kit we have already added Authorization so we do not need of test mode here.



And then click on enable button

Step 11:- Enabling Firebase Authention in Out Dashboard for doing this Click on Authentication tab in the side panel and enable Email-password login in dashboard



Step 12:- For active storage in our Firebase dashboard click on storage Tab in the left panel and then click on Get started Button

And the set your permission config here



So till this step, you are successfully able to connect your Firebase Database to this starter app


Title
Subtitle
Kicker


5.2. Dashboard Setup



Title
Subtitle
Kicker


- Pre-requisites for setup


This step describes the initial setup steps. Follow the steps to get the dashboard setup and running on your dev environment

1. Node & npm

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

$ node --version$ npm --version

This starter app will run best with node 10.x +

Node and NPM version are constantly updated so if you face any issue in setup, or warnings in npm audit feel free to contact us.

2. Install the Ionic CLI

Before proceeding, make sure the latest version of Node.js and npm are installed. See Environment Setup for details. Install the Ionic CLI globally with npm:

$ npm install -g ionic

Ionic apps are created and developed primarily through the Ionic command-line utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way.


Title
Subtitle
Kicker


- Install dependencies


After you have Ionic installed, you have to install all the dependencies required by the app. These dependencies are listed in package.json file in the root of the project. To do this just run the following command using a terminal inside your ionic app folder path.

// Move into your project directory
$ cd GroceryDashboard
// Install dependencies
$ npm install

If you are using latest NPM, you might see an audit report after the installation is completed. If you see any vulnerability marked as high , please contact us regarding the same or run npm audit fix


Title
Subtitle
Kicker


- Run dashboard for first time


Once you have the initial setup done, it’s time to run your app. First, we’ll run the app in a development environment. In development environment, your app runs in a browser (of your choice). It is recommended to make all changes and development while running the app on browser . Running on device while developing will be too time consuming.

To run the app on browser, run

ionic serve

on your command line, inside your project folder. This will build the project and deploy it on a localhost URL (usually it is localhost:8100). Your command line will look like this



The initial deploy process will take some time when it creates “chunks” of code pieces. Once you see compiled successfully , you are good to go. Your browser window will open automatically and load the app in a full-screen view.

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

More about browser development tools can be found out in the following links



Grocery dashboard product list

Title
Subtitle
Kicker


5.3. App setup



Title
Subtitle
Kicker


- Pre-requisites for dashboard setup


This step describes the initial setup steps. Follow the steps to get the app setup and running on your dev environment, as well as on your devices.

Node & npm

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure the best compatibility.

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

$ node --version$ npm --version

This starter app will run best with node 10.x +

Node and NPM version are constantly updated so if you face any issue in setup, or warnings in npm audit feel free to contact us.

Install the Ionic CLI

Before proceeding, make sure the latest version of Node.js and npm are installed. See Environment Setup for details. Install the Ionic CLI globally with npm:

$ npm install -g ionic

Ionic apps are created and developed primarily through the Ionic command-line utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way.


Title
Subtitle
Kicker


- Install dependencies


After you have Ionic installed, you have to install all the dependencies required by the app. These dependencies are listed in package.json file in the root of the project. To do this just run the following command using a terminal inside your ionic app folder path.

// Move into your project directory
$ cd store2Door
// Install dependencies
$ npm install

If you are using latest NPM, you might see an audit report after the installation is completed. If you see any vulnerability marked as high , please contact us regarding the same.


Title
Subtitle
Kicker


- Run app for the first time


Once you have the initial setup done, it’s time to run your app. First, we’ll run the app in the development environment. In the development environment, your app runs in a browser (of your choice). It is recommended to make all changes and development while running the app on the browser . Running on device while developing will be too time consuming.

To run the app on the browser, run

ionic serve

on your command line, inside your project folder. This will build the project and deploy it on a localhost URL (usually it is localhost:8100). Your command line will look like this



The initial deploy process will take some time when it creates “chunks” of code pieces. Once you see compiled successfully , you are good to go. Your browser window will open automatically and load the app in a full-screen view.

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

More about browser development tools can be found out in the following links

It will show something like this




Title
Subtitle
Kicker


5.4. Integration


How to enter first product

For entering first product in our platform, just click on Add new Product Button. After clicking here, a pop-up will appear. In this popup, fill all your product related stuff and click on Save button



How to check if app and dashboard are connected

In previous step we created one product. If it is reflected in our page on home page, then yes, our app and Dashboard are connected. If not then there is a problem with our Firebase setup. Please check Firebase connection steps and try again

Create new user and check in Dashboard

In this step we will create a new user in our platform. To do that create a user from Sign up page of our app. You can also integrate social login in the app by following our blog posts and using our free starters

Check our free starters to start implementing all of the above



After signing up, it will reflect the user in User Tab on our Dashboard



Create order in the app and check in Dashboard

For creating order in app, Add Product in cart. In second step, select address and after selecting address apply Promo-code in payment page. This way you can also check Promo-code connection in our app to dashboard. After applying Promo-code click on Pay button



After clicking pay button this orders will be reflected in your Order page in app



And it will also reflect in our dashboard



We have not added any payment gateway in our app till now, but you can add it according to your requirements. There are several popular payment gateways available for Ionic 4 apps. Check out our blog posts for the same

Check our free starters to start implementing all of the above


Title
Subtitle
Kicker


Conclusion


This post describes the use of our Ionic 4 Grocery shopping app and admin panel. It is a full-fledged Ionic starter with Firebase that can help you start your own Grocery business in minimum time. Please note that this is not a SaaS product or a full-fledged app like Uber, but it can get your MVP started very easily.


Title
Subtitle
Kicker


Next Steps


Now that you have learnt the implementation of Firebase push notifications in Ionic 4, you can also try

If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App

You can also make your next awesome app using Ionic 4 Full App



Use Ionic 4 Full App to make your next awesome app

Title
Subtitle
Kicker


References


Grocery Shopping App Platform - Ionic 4



Complete Grocery shopping platform with Admin Dashboard

In this post, we will describe the use of Enappd’s Ionic 4 Grocery shopping app and admin panel. It is a full-fledged Ionic starter with Firebase that can help you start your own Grocery business in minimum time.

What is Grocery App with the dashboard?

“Grocery App with dashboard” is a high-quality starter package for Grocery e-commerce. Both the app and dashboard are built in Ionic Framework, so they can be used either as an app or PWA.

This ionic template is built using Angular 7 and Ionic Framework v4 and has everything you need to jump start your app development!

Ionic 4 represents the culmination of more than two years of research and hard work transforming Ionic from “mobile for Angular” into a powerful UI Design System and app framework for every web developer in the world.

Benefits

  • Clients: Get your next app built by developers using Ionic 4 Grocery Complete Platform. This way you save tonnes on UI development, and significantly on major features like Firebase integration, and many other native plugin integrations. Approximate savings can run in thousands of dollars per app.
  • Developers: This is the time to save your expensive time and write less code for your new app. You can build a rich app with Ionic in a very straightforward way. Your knowledge about using CSS, HTML, and JavaScript will help serve as the building blocks of your app. Ionic also has lots of tutorials you can use.
  • Designers: Customization of the layout has no limit with Ionic. You don’t even have to modify a complicated widget. It is pretty clean and simple to start your own customization and create a satisfactory design.

Get Grocery App with dashboard and enjoy lots of carefully designed pages with the most required functionalities!

This document is divided into several sections to provide full information about Grocery App and Admin Dashboard

  1. Grocery Starter Overview
  2. Deploying the app or Dashboard as PWA on Firebase
  3. Deploying the app on Android or iOS
  4. Understanding the FireStore database
  5. Step-by-step instructions to use this Starter

Step-by-step instructions to use this Starter will be further divided into

  • Firebase project setup
  • Admin Dashboard setup
  • Ionic 4 App setup
  • App and Dashboard Integration

1. Grocery Starter Overview

You can take your Ionic Framework app to the next level using this starter app template. Check all the features, designs and beautiful components that you can use on your app!

All in with Ionic 4 and Angular 7

This Ionic 4 Template includes lots of Ionic 4 components coded the angular way and features that you will love. Along with this documentation, we will explain how to use most of them.

100% Flexible and Customizable

The template includes lots of pages, features, and components but you are free to use just what you need and delete the code you don’t. The code structure is super modularized so you will find easy to modify the code to fit your needs.

CSS variables

CSS Variables provide easy customization of an application and allow a value to be stored in one place, then referenced in multiple other places. So, for example, if you want to change the colors of your app, by just changing some variables your app will have the desired colors in just a few seconds!

Documentation

This documentation was built with a lot of effort to help you get the most out of this Ionic 4 template. If there is anything that you don’t understand please drop us an email at admin@enappd.com and we will try to explain it better.

Main Features and Pages

Go to our site to see the main Features and Pages of this amazing Ionic 4 Grocery shopping complete platform.

PWA ready

Progressive web applications are web applications that load like regular web pages or websites but can offer user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications.

Ionic 4 is a step forward for Progressive Web Apps. Although this starter is made to serve as an app more than PWA because of the way Grocery shopping platforms work, with minor modifications, you can use this completely as a PWA too. Learn more about PWA with Angular and Ionic.

You will be able to use this Ionic 4 starter as an iOS app, an Android app, a web app or as a PWA! Too many options, right?

2. Deploying the dashboard or app as PWA

Learn how to deploy your app as PWA on a free Firebase hosting

Prepare Firebase project for PWA

For deploy the app as PWA, we will demonstrate using Firebase hosting.

First, create a project on Firebase.

Now, in your project directory, run

$ npm install -g firebase-tools

This will install Firebase tools in your project. Now login into Firebase using

$ firebase login

It will redirect you to browser, and authenticate using your google account. Once you are logged in, you can run this command to attach the code to your project.

$ firebase init

It will take you through a list of options for project setup.

This will create a firebase.json file which should look like the following

{
"hosting": {
"public": "www",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [{
"source": "**",
"destination": "/index.html"}]}}

Convert the app into a PWA

The two main requirements of a PWA are a Service Worker and a Web Manifest. While it’s possible to add both of these to an app manually, the Angular team has a @angular/pwa package that can be used to automate this. To add this package to the app, run:

$ ng add @angular/pwa

Finally, build your project into production using

$ ionic build --prod

This will create a production build of your ionic app for PWA deployment. Use Firebase to deploy the app using

$ firebase deploy --only hosting

Whenever you make any changes to the app, make sure you run ionic build --prod before deploying it again on the hosting.

This will deploy your app on a Firebase URL such as https://grocerydashboard.firebaseapp.com where you will see your app running perfectly.

The Firebase console will show the deployment like this

For a more detailed step-by-step guide on PWA deployment, check this blog

When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers and features like Geolocation, etc.

For more information on PWA related option in firebase.json , check here

3. Building App on device

Learn how to build the app on a device and how to deploy it on a Firebase based hosting in quick steps

Build the app for Android

Once you have modified your app as per your requirements, you can start building the app for Android. Add an Android platform to the project by running

$ ionic cordova platform add android

This step will add an Android platform to the project.

The previous step will require Android Studio preinstalled on your system. You can also install Android SDK without Android Studio, but that is not the recommended way.

Now prepare the platform for a build

$ ionic cordova prepare android

And run the app on your device or simulator by running

$ ionic cordova run android

More information can be found in Ionic documentation

Build the app for iOS

An iOS app can be built only on an Apple based system. Add an iOS platform to the project by running

$ ionic cordova platform add iOS

This step will add an iOS platform to the project.

Previous step will require Xcode preinstalled on your system. You will also need an Apple developer license and proper provisioning profiles to build the app on the device.

Now prepare the platform for a build

$ ionic cordova prepare ios

And run the app on your device or simulator by running

$ ionic cordova run ios

OR, run the app using XCode directly.

More information in ionic documentation

4. Understanding the database

We are using FireStore database in this starter. Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. Like Firebase Realtime Database, it keeps your data in sync across client apps through realtime listeners and offers offline support for mobile and web so you can build responsive apps that work regardless of network latency or Internet connectivity. Cloud Firestore also offers seamless integration with other Firebase and Google Cloud Platform products, including Cloud Functions.

There will be 5 tables (collections) we are using in this starter kit:

  • User Table
  • Product Table
  • Category Table
  • Order Table
  • Offer Table

User Table:-

Fields in the user table

  • username:- holds user name for the user
  • phoneNumber:- holds contact number for the user
  • email:- holds an email address for the user
  • gender:- holds gender info for the user
  • userId:- holds unique User id for the user which is generated by Firebase

Product Table:-

Fields in product table

  • name :- it holds name of the Product
  • images : — it holds an array of image URL for the products
  • regularPrice :- If holds Regular Price of your order
  • pricePerQuantity :- It holds Your Product Quantity per Price like 1kg m 200g , if you leave blank we will take it as 1 product per price
  • offer :- It holds Offer on your Product in percent
  • description :- Product description comes here
  • instruction :- Delivery instruction for the product comes here
  • pin :- If you want to deliver your product in specific pin code place all the pincode here. if you leave it blank it will support for all Pincode
  • tags :- Tag related to product comes here
  • Like :- Best Offers, Popular Deals
  • categories :- it will take all category id related to the product
  • instock :- it is a boolean variable means if it is true then only your product shown in Instock Products Stack
  • free_shipping :- it is a boolean variable means if it is true then your product support Free shipping
  • delivery_in :- Your product will deliver in how many days will come here
  • cod :- it is boolean variable means if it is true then your product support Cash on delivery

Category Table :-

Fields in category table

  • name :- Your name for the category comes here
  • description :- Description for the category comes here
  • discount : discount related to category comes here
  • home_page :- it is boolean. If you set it true then only your category will show in home page
  • images :- Array of all image URL related to the category comes here

Offer Table:-

Fields in offer table

  • titles :- Title for the offer comes here
  • description :- Description for the offer comes here
  • code :- Promo-code for the offer comes here
  • images :- Array of all image URL related to this Offer comes here
  • discount :- Discount in percentage user will get after applying the promo-code will come here

Order Table:-

Fields in the order table

  • address :- it holds all related information of address on which this order has to deliver
  • created_at :- holds Created Date for the product
  • GrandTotal :- it is a calculation of all the money you get in this order after deduction of all the discounts
  • Products :- Array of the product ordered
  • SelectedDay :- on which day User needs this product
  • SelectedTime :- User’s suitable time period for receiving this order
  • UserId :- Holds the ID of the user who creates this order

5. Step-by-step instructions to use this Starter

For using this Starter kit follow this we will follow these steps

  1. Firebase setup
  2. Dashboard setup
  3. Ionic App setup
  4. Test Integration How to use this Starter

5.1 Firebase setup

Once you purchase the starter, you have all the code to your disposal. You can modify the app any way you want, but here are two major ways it can be done.

This starter Kit uses Firebase cloud FireStore as its database so in the very first step we will connect Firebase to our app

Firebase is one of the most powerful and popular Database as a Service (DBaaS) solutions available today. It provides a scalable cloud database to store and sync data for client and server-side development.

For connecting Firebase to our Ionic app we’re using the @angular/fire plugin. @angular/fire is The official library for Firebase and Angular.

Set Firebase Configuration

This is one of the crucial steps in using this starter. Many of the users forget to do this step and end up using our test Database for their production app. Doing so can results in a data loss, in case some other test user decides to delete a product. So follow these steps for connecting your own Firebase project to this starter kit

Step 1:- In this step, we will create a project in Firebase console. For that, we will go to Firebase



Firebase website

Step 2:- We will create a new project in our Firebase console. So click on Go to console button to check all of your projects



Go to Firebase console

Step 3:- Create a new project if you do not have already otherwise click on any existing project you want to use



Firebase console

Step 4:- When you click on Add Project Button it will ask you for your project name, fill your project name in project name input box, accept their terms and condition and click on Create Project button



Add a project in Firebase

Step 5:- So now our Firebase project is created. In this step, we will add Firebase to our Ionic app. For this, select Add Firebase to your Web App



Firebase project dashboard

Step 6:- In this Step, we will register our app to firebase so we will enter our app’s nickname and click on the register button



Create a Firebase Web App

Step 7:- Copy your Firebase Config from Firebase dashboard



Pick Firebase credentials from the code snippet

Step 8:- Paste your Firebase config in your environment file in your Ionic app project. The environment file should be in the project root.



Create an environment file in Ionic project base

Step 9:- We have successfully created our Firebase project and connected to our app/dashboard. From left side tabs, we can use Firebase tools according to our requirements.



Use more Firebase services from left panel

Step 10:- Active database in your firebase project.for this goto Database tab is our left panel and then click on Create Database in below page



Create Database

And then it will ask for your Database permission so in this case I will suggest you to Start in the locked mode because in this kit we have already added Authorization so we do not need of test mode here.



And then click on enable button

Step 11:- Enabling Firebase Authention in Out Dashboard for doing this Click on Authentication tab in the side panel and enable Email-password login in dashboard



Step 12:- For active storage in our Firebase dashboard click on storage Tab in the left panel and then click on Get started Button

And the set your permission config here



So till this step, you are successfully able to connect your Firebase Database to this starter app

5.2. Dashboard Setup

- Pre-requisites for setup

This step describes the initial setup steps. Follow the steps to get the dashboard setup and running on your dev environment

1. Node & npm

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

$ node --version$ npm --version

This starter app will run best with node 10.x +

Node and NPM version are constantly updated so if you face any issue in setup, or warnings in npm audit feel free to contact us.

2. Install the Ionic CLI

Before proceeding, make sure the latest version of Node.js and npm are installed. See Environment Setup for details. Install the Ionic CLI globally with npm:

$ npm install -g ionic

Ionic apps are created and developed primarily through the Ionic command-line utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way.

- Install dependencies

After you have Ionic installed, you have to install all the dependencies required by the app. These dependencies are listed in package.json file in the root of the project. To do this just run the following command using a terminal inside your ionic app folder path.

// Move into your project directory
$ cd GroceryDashboard
// Install dependencies
$ npm install

If you are using latest NPM, you might see an audit report after the installation is completed. If you see any vulnerability marked as high , please contact us regarding the same or run npm audit fix

- Run dashboard for first time

Once you have the initial setup done, it’s time to run your app. First, we’ll run the app in a development environment. In development environment, your app runs in a browser (of your choice). It is recommended to make all changes and development while running the app on browser . Running on device while developing will be too time consuming.

To run the app on browser, run

ionic serve

on your command line, inside your project folder. This will build the project and deploy it on a localhost URL (usually it is localhost:8100). Your command line will look like this



The initial deploy process will take some time when it creates “chunks” of code pieces. Once you see compiled successfully , you are good to go. Your browser window will open automatically and load the app in a full-screen view.

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

More about browser development tools can be found out in the following links



Grocery dashboard product list

5.3. App setup

- Pre-requisites for dashboard setup

This step describes the initial setup steps. Follow the steps to get the app setup and running on your dev environment, as well as on your devices.

Node & npm

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure the best compatibility.

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

$ node --version$ npm --version

This starter app will run best with node 10.x +

Node and NPM version are constantly updated so if you face any issue in setup, or warnings in npm audit feel free to contact us.

Install the Ionic CLI

Before proceeding, make sure the latest version of Node.js and npm are installed. See Environment Setup for details. Install the Ionic CLI globally with npm:

$ npm install -g ionic

Ionic apps are created and developed primarily through the Ionic command-line utility. The Ionic CLI is the preferred method of installation, as it offers a wide range of dev tools and help options along the way.

- Install dependencies

After you have Ionic installed, you have to install all the dependencies required by the app. These dependencies are listed in package.json file in the root of the project. To do this just run the following command using a terminal inside your ionic app folder path.

// Move into your project directory
$ cd store2Door
// Install dependencies
$ npm install

If you are using latest NPM, you might see an audit report after the installation is completed. If you see any vulnerability marked as high , please contact us regarding the same.

- Run app for the first time

Once you have the initial setup done, it’s time to run your app. First, we’ll run the app in the development environment. In the development environment, your app runs in a browser (of your choice). It is recommended to make all changes and development while running the app on the browser . Running on device while developing will be too time consuming.

To run the app on the browser, run

ionic serve

on your command line, inside your project folder. This will build the project and deploy it on a localhost URL (usually it is localhost:8100). Your command line will look like this



The initial deploy process will take some time when it creates “chunks” of code pieces. Once you see compiled successfully , you are good to go. Your browser window will open automatically and load the app in a full-screen view.

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

More about browser development tools can be found out in the following links

It will show something like this



5.4. Integration

How to enter first product

For entering first product in our platform, just click on Add new Product Button. After clicking here, a pop-up will appear. In this popup, fill all your product related stuff and click on Save button



How to check if app and dashboard are connected

In previous step we created one product. If it is reflected in our page on home page, then yes, our app and Dashboard are connected. If not then there is a problem with our Firebase setup. Please check Firebase connection steps and try again

Create new user and check in Dashboard

In this step we will create a new user in our platform. To do that create a user from Sign up page of our app. You can also integrate social login in the app by following our blog posts and using our free starters

Check our free starters to start implementing all of the above



After signing up, it will reflect the user in User Tab on our Dashboard



Create order in the app and check in Dashboard

For creating order in app, Add Product in cart. In second step, select address and after selecting address apply Promo-code in payment page. This way you can also check Promo-code connection in our app to dashboard. After applying Promo-code click on Pay button



After clicking pay button this orders will be reflected in your Order page in app



And it will also reflect in our dashboard



We have not added any payment gateway in our app till now, but you can add it according to your requirements. There are several popular payment gateways available for Ionic 4 apps. Check out our blog posts for the same

Check our free starters to start implementing all of the above

Conclusion

This post describes the use of our Ionic 4 Grocery shopping app and admin panel. It is a full-fledged Ionic starter with Firebase that can help you start your own Grocery business in minimum time. Please note that this is not a SaaS product or a full-fledged app like Uber, but it can get your MVP started very easily.

Next Steps

Now that you have learnt the implementation of Firebase push notifications in Ionic 4, you can also try

If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App

You can also make your next awesome app using Ionic 4 Full App



Use Ionic 4 Full App to make your next awesome app

References

_doc_end_


Title
Subtitle
Kicker