Ionic 4 Food Delivery App Starter - Foodie

Ionic 4 Food Delivery App Starter — Foodie

Table of Contents

1. Introduction — What is this template

2. Features of this template

2.2 Features

3. Setup and Installation

4. Modifying code

5. Feature Explanation

6. Integrating Back-end Data

7.0 Troubleshooting

8.0 Third-party libraries, sources, and Credits

Ionic 4 Food Delivery App Starter — Foodie





Title
Subtitle
Kicker


Table of Contents


  1. Introduction — What is this template
  2. Features of this template

2.1 Screens

2.2 Features

2.3 Device compatibility

3. Setup and Installation

3.1 Introduction

3.2 Installation

3.3 Running your app

3.4 Run your app with changes

3.5 Creating icon and splash

3.6 Generating Release builds

4. Modifying code

4.1 Screen code structure

4.2 Styling structure

4.3 Logic structure

4.4 Running your app

4.4 Navigation structure

5. Feature Explanation

5.1 User Authentication

5.2 Adding restaurant, Products, Dishes, etc

5.3 Recommendations

5.4 Geolocation and Map

5.5 Google Place Prediction

5.6 Chat Support

5.7 Payments

6. Integrating Back-end Data

6.1 Data structure

6.2 Back-end options

7. Troubleshooting

8. Third-party libraries, sources, and Credits


Title
Subtitle
Kicker


1. Introduction — What is this template


Foodie— An Ionic 4 Food Ordering App Template is a mobile app theme/template. With this template, you can create a Food Ordering app like Swiggy, Zomato, Food Panda, Uber Eats, etc.

This template is the front-end part of the food ordering app, which means the screens and user interfaces (screens) are ready. You can easily change the screens, styles and logics to suit your requirements. To make it a live app like Swiggy, Zomato, Food Panda, Uber Eats, etc. you just need to add a back-end to the app, and load your data in the back-end.



This template is made in IONIC 4 language. With IONIC 4, you can

  • Create iOS and an Android app with a single source code

• Cut your project cost and time in half

  • Ensure exact same UI in iOS and Android, while following the standard UI norms
  • Saves separate updates for each app in future

Title
Subtitle
Kicker


2. Features of this template


2. 1. Screens

2.1.2 Login



This page can be accessed from the signup page as the app loads. By clicking on the login button after the required entries in the input field it redirects you to the home page.

The login page can be used to perform login action with username/email and password. Currently, the login is only for demo purposes.

The login page also contains “Forgot Password” and “Signup” page navigations.

2.1.3 Signup



This page can be accessed as the app loads. By clicking on the signup button it redirects you to the Home page.

The signup page can be used to register a user with a username/email and password, contact, and address. Currently, the signup is only for demo purposes.

The signup page also contains “Login page “ page navigations.

2.1.4 Forgot Password



This page can be accessed from the “Login” page. Forgot Password page can be used to send a reset password URL or OTP to the user’s email or any other way you want to use. Currently, this page is only UI. The OTP sent to the user can be verified here and the user may be asked to provide a new password.

2.1.5 Home



This is the first tab of the application.

Home page contains recommended restaurant and other categories for a user.

The Popular Brands/Today’s Special are arranged in a horizontal scroll for each category.

A vertical scroll allows the addition of any number of the restaurant on the homepage, each category being arranged in a horizontal scroll.

By clicking on any category, it will navigate to the category product page.

2.1.6 Select Restaurant, by Category Restaurant list



This page can be accessed by clicking on any category on the home page.

Here the list of all restaurant is available according to the category you selected. In this page, we have all the restaurants offering foods to avail and top restaurants list. By clicking on any restaurant it will navigate to restaurant products details page.

2.1.7 Repeat Orders



This page can be accessed by clicking on the restaurant's list page’s. This page contains the list of previous orders from the same restaurant. This page allows us to repeat order from the previously ordered items. The previous orders are arranged in a vertical list at the top of the page. 

2.1.8 Products from Restaurant



This page can be accessed from the restaurant’s list page’s, besides the restaurant selected by the category, there are some options to select other categories of your choice and it will navigate to the cart page by clicking on the view cart at the very bottom right of the page.

2.1.9 Offers 



On clicking the offer’s button in the top-right of the header in the home page, the offers page can be accessed.

This page contains the offers category for this app. It contains two categories for the offers which are restaurants offers and payment offers/coupons. It will navigate to restaurants offer page and payments offers page.

2.1.10 Restaurant Offer




This page can be accessed by clicking on the restaurant's offer on the offers page. We can select any offer from the list of offers by the restaurant arranged in the vertical direction. This is the only UI for the demo purpose.

2.1.11 Payment Offer



This page can be accessed by clicking on the restaurant’s offer on the offers page.

We can select any payment offer or apply coupon from the list of offers by the restaurant arranged in the vertical direction. This is only the UI for the demo purpose.

2.1.12 Your Cart



This is the third tab of the application.

This page contains the added items/products by the user from the product detail page. We can check the added items in our cart in list view arranged in the vertical direction.

When there is no item in the cart the above screen appears.

2.1.13 My Account



The is the fourth tab of the application.

This page contains the navigation options for the app like

  • Edit Profile
  • Previous Orders
  • FAQ’s
  • Chat Support

This page contains the notification toggle at the top right of the page.To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notificationhere.

2.1.14 My Account — Edit Profile



This page can be accessed from the “My account” page.

The options available can be chosen to edit user name, email address, update password, address, contact, and description as per your requirement. “Back” button takes you back to the “My account ” page.

2.1.15 My Account — Previous Orders



This page can be accessed from the “My account” page.

Previous orders contain all your previously ordered items from the restaurants arranged in a vertical list. It also contains the repeat order button at the very bottom right of each card. Repeat Order will navigate to that previous order detail page.s

2.1.16 My Account — FAQ’s



This page can be accessed from the “My Account” page by clicking on FAQ’s.

All the random queries related foodie app is listed here in a vertical direction.

Each list item opens a modal on click and it contains the detailed information.

2.1.17 Chat Support



This page can be accessed from the “My Account” page by clicking on the chat with us button.

Chat with us page contains the chat application for direct interaction to the foodie customer service. Here chat with us is only UI and for demo purpose.

2.1.18 Search



This is the second tab of the application.

Search page contains the UI for searching restaurants, items, dishes, etc.

Just type any word in the input box and the results can be displayed in the content as a list For demo purpose. When you type in the search box, you see preset results in the result.

2.1.19 Billing



This page can be accessed from the restaurant's product details by clicking on the VIEW CART button at the bottom right of the page. 

This page contains the total item and total item cost including restaurant charges and taxes, selected by the user in the previous page. Above is only UI.

2.1.20 Filter



This page can be accessed by clicking on any sort/filter button on the home page and product category detail page. This will open a modal to filter your choices. This is only UI depiction.

2.1.21 Add Address



This page can be accessed by clicking on any current address showing at the top left in the header of the home page at the bottom left of the billing page. This will allow us to add a delivery location according to our need. This is only UI functioning. To make it in the fully functioning mode you will have to integrate back-end of your convenience. 

2.1.22 Select Address



This can be accessed by clicking at the bottom right on the billing page.
This page allows you to select an address from your previously added addresses and it also lets you add a new address for delivering your items.

2.1.23 Current Location



This page can be accessed by clicking on the current address showing at the top right of the home page. This page shows us our current address on the google map. This page also let us add more details about the location or to confirm the current location. You can follow this link to integrate google map, geolocation, geocoding, etc here…

This is only a UI but you can integrate back-end code for map services with the help of a back-end developer orcan reach to us for integration.

2.1.24 Product Sort



This can be accessed from the product items detail page.

By clicking on the MENU button floating at the bottom of the page will show you the popover to sort your menu accordingly.
This is only the UI for demo purpose.


Title
Subtitle
Kicker


2.2 Features


2.2.1 Geolocation



This can be accessed by clicking on the location text on the top right of the home page. This allows the app to get your current location by clicking on the current location.

2.2.2 Google Map



Google map shows us the current location of the app by clicking on the current location or by filling the input field in the set location. This shows us the exact point of our location on the map.

Clicking on Confirm Location takes you to the Home page and clicking on the Add more details navigates to the add address detail page.  

2.2.3 Social Sharing



This is at the fifth tab of the application and the top right of the page’s header.

This allows us to share our page or app information to social sites or via email.
This is only UI here for demo purpose.

 2.2.4 Google Place Prediction



As mentioned earlier in the geolocation, by filling the input text in the set location page this will show you some predicted locations according to your filled entries in the text input field. By selecting any predicted location it will store that location and show that on home page’s top left text after Now — >

2.2.5 Chat Support



Chat support provides us the facility to interact with the customer service provider directly. We can ask our queries and get a solution for their side. This provides us the real-time solution of our related queries.
Here in the app, this is only UI for demo purpose but you can make it in fully functioning real-time chat support by integrating back-end witAs mentioned earlier,h the help of any back-end developer.

2.3 Device Compatibility

As mentioned earlier, the app is written in Ionic 4 and angular language. This allows single source code to create both iOS and Android apps.

This template has been tested in all latest Android versions and major devices.

This template has also been tested in all latest versions of iPhones, including iPhone X.


Title
Subtitle
Kicker


3. Setup and Installation


Foodie is a food delivering application made with Ionic 4 and angular.

For navigation in the application, we have used default angular navigation.

3.1 What is Ionic Framework

Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).

Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.

3.2 How can I use this template

This template is a ready-made front-end template for a Food Delivery App. You can use the screens coded in this app, navigation between the screens and specific functions applied to buttons, etc. This saves your 100% cost and time in front-end UI development. You can simply add a back-end/server to this app template, and replace the demo data with data coming from your server. This way, you only spend time and money on back-end development.

3.3 Installation

Setting Up Environment and Installing Dependencies

# Install the Ionic CLI

npm install -g ionic

# Start an App

ionic start myApp tabs/blank/sidemenu
whatever is your requirement you can select that and remove others from tabs/blank/sidemenu.

#Angular + Ionic Framework

npm install @ionic/angular@latest --save

# 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

# iOS Setup

To target iOS, some additional environment setup is required. Unfortunately, iOS apps can only be created on macOS.

For iOS setup please follow the steps provided in the link here

#Run the App

cd your app name
ionic serve

For iOS build, follow the steps provided in the link here

For the android build, execute the following command

ionic cordova prepare android
ionic cordova run android




3.4 Creating Icon and Splash screen

For creating an icon and splash first paste your icon and splash in the resources folder and then execute the following command in your project directory

ionic cordova platform add android 
ionic cordova resources
ionic cordova build android

Title
Subtitle
Kicker


4. Modifying code


4.1 Screen / View’s Code Structure



4.2 Overall Folder Structure

There are broadly 30+ pages in this template. All pages are shown in the src/app folder above. Mostly, each page’s code is kept in a separate folder. Folder names are self-explanatory. You can create a page by executing the command

ionic cordova generate page your page name

This will create a folder of page name containing four files as -

In the case of Ionic 4, pages are generated with lazy loading by default which means a page has its own module.

├── enappd.html
├── enappd.module.ts
├── enappd.scss
└── enappd.ts
  • enappd.html: contains UI components for the page.
  • enappd.scss: contains sass styles to style your page.
  • enappd.ts: contains TypeScript code

4.3 Layout File Code Structure

The layout file has the structure shown in the image.

• imports are written on the top.

• @component is the decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

• A constructor is used for dependency injections.

When the app loads the constructor gets called first then ngOnInit.

After constructor and inside the class we can write our logic for the page/component in page.ts



4.4. Styling Code Structure



style page are generated by default for each page after executing page generate command, inside the page folder.

4.5. Navigation Code Structure



On creating a project in ionic a file named app-routing.module.ts gets generated by default where all the navigation codes get done.
We use the path name of a particular page to navigate from one page to another.

In ionic, there are some navigation type as-

Tab navigation



Controls the navigation of Tabs (4 tabs in the app). This is detailed in src/app/ tabs/tabs-router.module.ts. All the settings of Tab Navigation can be controlled from here.


Title
Subtitle
Kicker


5. Feature Explanation


5.1. User Authentication

User authentication is often the first and most important part of the app. This template has pages for Login, Signup, Forgot password and Update password.

As per your requirements, you can either

— Allow a user to access the app without login/signup, and ask a login for specific features, OR

— Do not allow any access without login/signup. In this case the Login page with go on top of the router navigation in app-routing.module.ts. Only once there is a “login”, the user should be allowed access to HomePage. Authentication can be achieved by your custom back-end or, if you are using Firebase, there are several easy authentication options. You can even choose to integrate social logins in the app. Check details here.

5.2. Adding restaurant, Products, Dishes, etc

This template takes the dummy data from the JSON files placed in the delivery.service.ts file. If you only want to create static data, you can modify the JSON files’ data and the data in the page/ layout will change.

For example, in Homepage — we see different categories of restaurants.

These categories are imported from the JSON data in the delivery.service.ts file in src/app.

You can generate service in ionic by executing the command

ionic g service your service name


Editing this data will edit the view in the page on serve or device.

Once you connect your back-end with the app, this JSON data will be replaced by the backend data. All the data labels are self-explanatory.

5.3 Images

You can choose to load images from URLs (recommended), or keep images in the local storage. If you are loading images from URL, keep a backup image to show in case the actual image takes time to load.

5.4. Geolocation and Map

This is the central component of the food delivery app. This template has this feature  — for getting users current location or allowing the user to feed his/her location and showing that on map.



The app uses ionic @ionic-native/geolocation plugin for geolocation and @agm/core npm package for map view.

Geolocation for Cordova applications. Display the ‘current location’ of the user or device at the current time.

The agm core package provides the ability to open and show location on the map and drag the location for location adjustment in the map.

5.5. Social Sharing



Providing Social Sharing features is where you can share using your app.

This template does have a Social Sharing feature functionality but only UI.

 You can share your app's pages and invite links via this plugin after integrating it with proper back-end.

5.6 Payments



You can implement the payments by using any one or multiple of the following

Ionic PayPal

— Ionic Stripe

Ionic in-app purchase

— Ionic Apple Pay and Android Pay

Ionic Razorpay

 — PhonePe

 — GooglePay

 — AmazonPay


Title
Subtitle
Kicker


6. Integrating Back-end Data


6.1. Data Structure

In each service.ts, there is a dummy data file placed to mimic the behavior of a back-end.

E.g. Following images shows the data and its structure in restaurants products detail page. The data is in JSON format.



Data is imported in the page.ts file as

this.deliveryService.offerSlides
here, deliveryService is service name
offerSlides is the JSON data in service

6.2 Back-end options

To make the app fully operational you will need to attach a back-end to the app. This will require several additions and you will need the assistance of a back-end developer.

We will provide a glimpse into the things you will require

Step 1 — Choose a back-end Technology

There are several options when it comes to back-end. Some of the major ones are

  1. Node.js custom back-end
  2. 2. Firebase back-end (node.js)
  3. 3. Django custom back-end
  4. 4. Ruby-on-rails custom back-end
  5. GO back-end

We recommend starting out with Firebase, if you want quick turn-around of features. Firebase is a BaaS platform and comes with a bunch of ready-made functionality, like

— Storage

— Analytics

Push notifications

— In-app messages

Real-time database and much more.

Step 2 — Connect the back-end to the app

As explained in the section above, you will need to replace the Data coming in form individual JSON files with the data coming in from APIs (from your back-end).

To manage the data efficiently, you will need to arrange all API calls, and data manipulation in a single location. You can manage API calls with HttpClient services orfirebase functions.


Title
Subtitle
Kicker


7.0 Troubleshooting


Refer this troubleshooting guide from Ionic framework docs to solve some common issues.


Title
Subtitle
Kicker


8.0 Third-party libraries, sources, and Credits


Title
Subtitle
Kicker



Ionic 4 Food Delivery App Starter — Foodie



Table of Contents

  1. Introduction — What is this template
  2. Features of this template

2.1 Screens

2.2 Features

2.3 Device compatibility

3. Setup and Installation

3.1 Introduction

3.2 Installation

3.3 Running your app

3.4 Run your app with changes

3.5 Creating icon and splash

3.6 Generating Release builds

4. Modifying code

4.1 Screen code structure

4.2 Styling structure

4.3 Logic structure

4.4 Running your app

4.4 Navigation structure

5. Feature Explanation

5.1 User Authentication

5.2 Adding restaurant, Products, Dishes, etc

5.3 Recommendations

5.4 Geolocation and Map

5.5 Google Place Prediction

5.6 Chat Support

5.7 Payments

6. Integrating Back-end Data

6.1 Data structure

6.2 Back-end options

7. Troubleshooting

8. Third-party libraries, sources, and Credits

1. Introduction — What is this template

Foodie— An Ionic 4 Food Ordering App Template is a mobile app theme/template. With this template, you can create a Food Ordering app like Swiggy, Zomato, Food Panda, Uber Eats, etc.

This template is the front-end part of the food ordering app, which means the screens and user interfaces (screens) are ready. You can easily change the screens, styles and logics to suit your requirements. To make it a live app like Swiggy, Zomato, Food Panda, Uber Eats, etc. you just need to add a back-end to the app, and load your data in the back-end.



This template is made in IONIC 4 language. With IONIC 4, you can

  • Create iOS and an Android app with a single source code

• Cut your project cost and time in half

  • Ensure exact same UI in iOS and Android, while following the standard UI norms
  • Saves separate updates for each app in future

2. Features of this template

2. 1. Screens

2.1.2 Login



This page can be accessed from the signup page as the app loads. By clicking on the login button after the required entries in the input field it redirects you to the home page.

The login page can be used to perform login action with username/email and password. Currently, the login is only for demo purposes.

The login page also contains “Forgot Password” and “Signup” page navigations.

2.1.3 Signup



This page can be accessed as the app loads. By clicking on the signup button it redirects you to the Home page.

The signup page can be used to register a user with a username/email and password, contact, and address. Currently, the signup is only for demo purposes.

The signup page also contains “Login page “ page navigations.

2.1.4 Forgot Password



This page can be accessed from the “Login” page. Forgot Password page can be used to send a reset password URL or OTP to the user’s email or any other way you want to use. Currently, this page is only UI. The OTP sent to the user can be verified here and the user may be asked to provide a new password.

2.1.5 Home



This is the first tab of the application.

Home page contains recommended restaurant and other categories for a user.

The Popular Brands/Today’s Special are arranged in a horizontal scroll for each category.

A vertical scroll allows the addition of any number of the restaurant on the homepage, each category being arranged in a horizontal scroll.

By clicking on any category, it will navigate to the category product page.

2.1.6 Select Restaurant, by Category Restaurant list



This page can be accessed by clicking on any category on the home page.

Here the list of all restaurant is available according to the category you selected. In this page, we have all the restaurants offering foods to avail and top restaurants list. By clicking on any restaurant it will navigate to restaurant products details page.

2.1.7 Repeat Orders



This page can be accessed by clicking on the restaurant's list page’s. This page contains the list of previous orders from the same restaurant. This page allows us to repeat order from the previously ordered items. The previous orders are arranged in a vertical list at the top of the page. 

2.1.8 Products from Restaurant



This page can be accessed from the restaurant’s list page’s, besides the restaurant selected by the category, there are some options to select other categories of your choice and it will navigate to the cart page by clicking on the view cart at the very bottom right of the page.

2.1.9 Offers 



On clicking the offer’s button in the top-right of the header in the home page, the offers page can be accessed.

This page contains the offers category for this app. It contains two categories for the offers which are restaurants offers and payment offers/coupons. It will navigate to restaurants offer page and payments offers page.

2.1.10 Restaurant Offer




This page can be accessed by clicking on the restaurant's offer on the offers page. We can select any offer from the list of offers by the restaurant arranged in the vertical direction. This is the only UI for the demo purpose.

2.1.11 Payment Offer



This page can be accessed by clicking on the restaurant’s offer on the offers page.

We can select any payment offer or apply coupon from the list of offers by the restaurant arranged in the vertical direction. This is only the UI for the demo purpose.

2.1.12 Your Cart



This is the third tab of the application.

This page contains the added items/products by the user from the product detail page. We can check the added items in our cart in list view arranged in the vertical direction.

When there is no item in the cart the above screen appears.

2.1.13 My Account



The is the fourth tab of the application.

This page contains the navigation options for the app like

  • Edit Profile
  • Previous Orders
  • FAQ’s
  • Chat Support

This page contains the notification toggle at the top right of the page.To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notificationhere.

2.1.14 My Account — Edit Profile



This page can be accessed from the “My account” page.

The options available can be chosen to edit user name, email address, update password, address, contact, and description as per your requirement. “Back” button takes you back to the “My account ” page.

2.1.15 My Account — Previous Orders



This page can be accessed from the “My account” page.

Previous orders contain all your previously ordered items from the restaurants arranged in a vertical list. It also contains the repeat order button at the very bottom right of each card. Repeat Order will navigate to that previous order detail page.s

2.1.16 My Account — FAQ’s



This page can be accessed from the “My Account” page by clicking on FAQ’s.

All the random queries related foodie app is listed here in a vertical direction.

Each list item opens a modal on click and it contains the detailed information.

2.1.17 Chat Support



This page can be accessed from the “My Account” page by clicking on the chat with us button.

Chat with us page contains the chat application for direct interaction to the foodie customer service. Here chat with us is only UI and for demo purpose.

2.1.18 Search



This is the second tab of the application.

Search page contains the UI for searching restaurants, items, dishes, etc.

Just type any word in the input box and the results can be displayed in the content as a list For demo purpose. When you type in the search box, you see preset results in the result.

2.1.19 Billing



This page can be accessed from the restaurant's product details by clicking on the VIEW CART button at the bottom right of the page. 

This page contains the total item and total item cost including restaurant charges and taxes, selected by the user in the previous page. Above is only UI.

2.1.20 Filter



This page can be accessed by clicking on any sort/filter button on the home page and product category detail page. This will open a modal to filter your choices. This is only UI depiction.

2.1.21 Add Address



This page can be accessed by clicking on any current address showing at the top left in the header of the home page at the bottom left of the billing page. This will allow us to add a delivery location according to our need. This is only UI functioning. To make it in the fully functioning mode you will have to integrate back-end of your convenience. 

2.1.22 Select Address



This can be accessed by clicking at the bottom right on the billing page.
This page allows you to select an address from your previously added addresses and it also lets you add a new address for delivering your items.

2.1.23 Current Location



This page can be accessed by clicking on the current address showing at the top right of the home page. This page shows us our current address on the google map. This page also let us add more details about the location or to confirm the current location. You can follow this link to integrate google map, geolocation, geocoding, etc here…

This is only a UI but you can integrate back-end code for map services with the help of a back-end developer orcan reach to us for integration.

2.1.24 Product Sort



This can be accessed from the product items detail page.

By clicking on the MENU button floating at the bottom of the page will show you the popover to sort your menu accordingly.
This is only the UI for demo purpose.

2.2 Features

2.2.1 Geolocation



This can be accessed by clicking on the location text on the top right of the home page. This allows the app to get your current location by clicking on the current location.

2.2.2 Google Map



Google map shows us the current location of the app by clicking on the current location or by filling the input field in the set location. This shows us the exact point of our location on the map.

Clicking on Confirm Location takes you to the Home page and clicking on the Add more details navigates to the add address detail page.  

2.2.3 Social Sharing



This is at the fifth tab of the application and the top right of the page’s header.

This allows us to share our page or app information to social sites or via email.
This is only UI here for demo purpose.

 2.2.4 Google Place Prediction



As mentioned earlier in the geolocation, by filling the input text in the set location page this will show you some predicted locations according to your filled entries in the text input field. By selecting any predicted location it will store that location and show that on home page’s top left text after Now — >

2.2.5 Chat Support



Chat support provides us the facility to interact with the customer service provider directly. We can ask our queries and get a solution for their side. This provides us the real-time solution of our related queries.
Here in the app, this is only UI for demo purpose but you can make it in fully functioning real-time chat support by integrating back-end witAs mentioned earlier,h the help of any back-end developer.

2.3 Device Compatibility

As mentioned earlier, the app is written in Ionic 4 and angular language. This allows single source code to create both iOS and Android apps.

This template has been tested in all latest Android versions and major devices.

This template has also been tested in all latest versions of iPhones, including iPhone X.

3. Setup and Installation

Foodie is a food delivering application made with Ionic 4 and angular.

For navigation in the application, we have used default angular navigation.

3.1 What is Ionic Framework

Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).

Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.

3.2 How can I use this template

This template is a ready-made front-end template for a Food Delivery App. You can use the screens coded in this app, navigation between the screens and specific functions applied to buttons, etc. This saves your 100% cost and time in front-end UI development. You can simply add a back-end/server to this app template, and replace the demo data with data coming from your server. This way, you only spend time and money on back-end development.

3.3 Installation

Setting Up Environment and Installing Dependencies

# Install the Ionic CLI

npm install -g ionic

# Start an App

ionic start myApp tabs/blank/sidemenu
whatever is your requirement you can select that and remove others from tabs/blank/sidemenu.

#Angular + Ionic Framework

npm install @ionic/angular@latest --save

# 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

# iOS Setup

To target iOS, some additional environment setup is required. Unfortunately, iOS apps can only be created on macOS.

For iOS setup please follow the steps provided in the link here

#Run the App

cd your app name
ionic serve

For iOS build, follow the steps provided in the link here

For the android build, execute the following command

ionic cordova prepare android
ionic cordova run android




3.4 Creating Icon and Splash screen

For creating an icon and splash first paste your icon and splash in the resources folder and then execute the following command in your project directory

ionic cordova platform add android 
ionic cordova resources
ionic cordova build android

4. Modifying code

4.1 Screen / View’s Code Structure



4.2 Overall Folder Structure

There are broadly 30+ pages in this template. All pages are shown in the src/app folder above. Mostly, each page’s code is kept in a separate folder. Folder names are self-explanatory. You can create a page by executing the command

ionic cordova generate page your page name

This will create a folder of page name containing four files as -

In the case of Ionic 4, pages are generated with lazy loading by default which means a page has its own module.

├── enappd.html
├── enappd.module.ts
├── enappd.scss
└── enappd.ts
  • enappd.html: contains UI components for the page.
  • enappd.scss: contains sass styles to style your page.
  • enappd.ts: contains TypeScript code

4.3 Layout File Code Structure

The layout file has the structure shown in the image.

• imports are written on the top.

• @component is the decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

• A constructor is used for dependency injections.

When the app loads the constructor gets called first then ngOnInit.

After constructor and inside the class we can write our logic for the page/component in page.ts



4.4. Styling Code Structure



style page are generated by default for each page after executing page generate command, inside the page folder.

4.5. Navigation Code Structure



On creating a project in ionic a file named app-routing.module.ts gets generated by default where all the navigation codes get done.
We use the path name of a particular page to navigate from one page to another.

In ionic, there are some navigation type as-

Tab navigation



Controls the navigation of Tabs (4 tabs in the app). This is detailed in src/app/ tabs/tabs-router.module.ts. All the settings of Tab Navigation can be controlled from here.

5. Feature Explanation

5.1. User Authentication

User authentication is often the first and most important part of the app. This template has pages for Login, Signup, Forgot password and Update password.

As per your requirements, you can either

— Allow a user to access the app without login/signup, and ask a login for specific features, OR

— Do not allow any access without login/signup. In this case the Login page with go on top of the router navigation in app-routing.module.ts. Only once there is a “login”, the user should be allowed access to HomePage. Authentication can be achieved by your custom back-end or, if you are using Firebase, there are several easy authentication options. You can even choose to integrate social logins in the app. Check details here.

5.2. Adding restaurant, Products, Dishes, etc

This template takes the dummy data from the JSON files placed in the delivery.service.ts file. If you only want to create static data, you can modify the JSON files’ data and the data in the page/ layout will change.

For example, in Homepage — we see different categories of restaurants.

These categories are imported from the JSON data in the delivery.service.ts file in src/app.

You can generate service in ionic by executing the command

ionic g service your service name


Editing this data will edit the view in the page on serve or device.

Once you connect your back-end with the app, this JSON data will be replaced by the backend data. All the data labels are self-explanatory.

5.3 Images

You can choose to load images from URLs (recommended), or keep images in the local storage. If you are loading images from URL, keep a backup image to show in case the actual image takes time to load.

5.4. Geolocation and Map

This is the central component of the food delivery app. This template has this feature  — for getting users current location or allowing the user to feed his/her location and showing that on map.



The app uses ionic @ionic-native/geolocation plugin for geolocation and @agm/core npm package for map view.

Geolocation for Cordova applications. Display the ‘current location’ of the user or device at the current time.

The agm core package provides the ability to open and show location on the map and drag the location for location adjustment in the map.

5.5. Social Sharing



Providing Social Sharing features is where you can share using your app.

This template does have a Social Sharing feature functionality but only UI.

 You can share your app's pages and invite links via this plugin after integrating it with proper back-end.

5.6 Payments



You can implement the payments by using any one or multiple of the following

Ionic PayPal

— Ionic Stripe

Ionic in-app purchase

— Ionic Apple Pay and Android Pay

Ionic Razorpay

 — PhonePe

 — GooglePay

 — AmazonPay

6. Integrating Back-end Data

6.1. Data Structure

In each service.ts, there is a dummy data file placed to mimic the behavior of a back-end.

E.g. Following images shows the data and its structure in restaurants products detail page. The data is in JSON format.



Data is imported in the page.ts file as

this.deliveryService.offerSlides
here, deliveryService is service name
offerSlides is the JSON data in service

6.2 Back-end options

To make the app fully operational you will need to attach a back-end to the app. This will require several additions and you will need the assistance of a back-end developer.

We will provide a glimpse into the things you will require

Step 1 — Choose a back-end Technology

There are several options when it comes to back-end. Some of the major ones are

  1. Node.js custom back-end
  2. 2. Firebase back-end (node.js)
  3. 3. Django custom back-end
  4. 4. Ruby-on-rails custom back-end
  5. GO back-end

We recommend starting out with Firebase, if you want quick turn-around of features. Firebase is a BaaS platform and comes with a bunch of ready-made functionality, like

— Storage

— Analytics

Push notifications

— In-app messages

Real-time database and much more.

Step 2 — Connect the back-end to the app

As explained in the section above, you will need to replace the Data coming in form individual JSON files with the data coming in from APIs (from your back-end).

To manage the data efficiently, you will need to arrange all API calls, and data manipulation in a single location. You can manage API calls with HttpClient services orfirebase functions.

7.0 Troubleshooting

Refer this troubleshooting guide from Ionic framework docs to solve some common issues.

8.0 Third-party libraries, sources, and Credits

Major third-party libraries used in this app template are

All these are open-source libraries and the license & usage permission of the above are available on their respective URLs.

Assets images are used from unsplash.com. The usage of these images is free.

_doc_end_


Title
Subtitle
Kicker