Does Your Sales Pitch Include a Strong Value Proposition?

When you buy a house, you buy a whole house. When you buy a car, you buy a whole car. You don’t buy each individual nail on each individual board, or each individual bolt and piston. The value lies…

独家优惠奖金 100% 高达 1 BTC + 180 免费旋转

Create your own Grocery Shopping App in Ionic 4

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.

“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.

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

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

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!

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.

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 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!

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.

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

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

Now, in your project directory, run

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

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.

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

Finally, build your project into production using

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

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

The Firebase console will show the deployment like this

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.

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

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

This step will add an Android platform to the project.

Now prepare the platform for a build

And run the app on your device or simulator by running

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

This step will add an iOS platform to the project.

Now prepare the platform for a build

And run the app on your device or simulator by running

OR, run the app using XCode directly.

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:

Fields in the user table

Fields in product table

Fields in category table

Fields in offer table

Fields in the order table

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

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.

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 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

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

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

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

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

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

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

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

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.

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.

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

To run the app on browser, run

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

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.

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

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.

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.

To run the app on the browser, run

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

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

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

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

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

After signing up, it will reflect the user in User Tab on our 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

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.

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

Does Your Sales Pitch Include a Strong Value Proposition?

Create your own Grocery Shopping App in Ionic 4

Add a comment

Related posts:

Most Beautiful Places in the World List

Baselang Review

La Critique