Create a food ordering application with Monaca, React, Framework 7 and Firebase database
In this article, we will learn how to create a food ordering application using Monaca, React and Framework 7, as well as the Firebase database.
This tutorial consists of two parts:
Part 1 (this article): We will go through all the technologies, components and pages needed in the tutorial, except the payment system.
Part 2: Online Payments with Monaca, React and Framework7 with Express backend.
Used technologies
Before we start creating the project, it is good to understand what technologies we will be using in this tutorial.
Monaca is a collection of software tools and services for building and deploying HTML5 mobile hybrid apps. It is built using Apache Cordova and offers different resources like Cloud IDE, local development tools, a debugger, and also backend support.
Apache Cordova is an open-source hybrid mobile app development environment. It allows software developers to build apps for phones using HTML5, CSS and JavaScript. Besides, it can be extended with native plug-ins, allowing developers to add more functionalities.
React (also known as React.js or ReactJS) is a free open-source JavaScript library designed to create user interfaces to make single-page app development easier. It is maintained by Facebook and involves more than one thousand developers.
Framework7 is a free open-source framework to develop mobile, desktop or web apps. Besides, it is also possible to use it as a prototyping tool. It allows the user to create apps with HTML, CSS, and JavaScript easily and clearly.
Firebase is a cloud platform for web app and mobile app development launched in 2011 and acquired by Google in 2014. It is a Backend-as-a-Service solution that includes services for building, testing, and managing apps.
Prerequisites
This is what we need to have to follow this tutorial:
- Monaca account
- Firebase account
- Node.js (only if you want to code locally)
Are you ready? Let’s start!
Creating the project
Firstly, we need to create the project in Monaca. This can be done either locally or in the cloud IDE. We decided to use the template Framework7 React Single View to create the project.
Locally:
*If you don’t have Monaca installed, please run:
npm install -g monacaBefore starting, we have to log in using the following command:
monaca loginAfter logging in, we can create the project by running:
monaca create food_order_appAfter running it, we should choose the following options:
Cloud IDE:
After clicking on Create New Project, we will choose the options shown in the following screenshot:
Project Type: Framework Templates
Framework: React
Template: Framework7 React Single View
Configuring Firebase
Our next step will be configuring Firebase. To do so, we need to go to the Firebase Console and create a new project. Follow the steps on the screen.
Once we have the project created, we have to go to Project settings and then go to the bottom of the screen. There, we should click on the web app icon, which is indicated as </>.
Follow the instructions shown on the screen. Install Firebase and copy the firebaseConfig. We will need it in the next step.
Once we have Firebase ready, we should create a .js file that will work as a service for the database. In our case, we called it db.js. Here, we need to paste the firebaseConfig information, so then we can initialise the app and the connections to the services we need.
In this project we will be using the following Firebase services:
Firestore is a flexible NoSQL document database, where we will store the menu, table reservations and order information.
Storage is a service that allows developers to store and download files, where we will store images.
In this db.js file, we will create all the logic behind the connection to the database.
Components
In this app, we will have the following components:
- App: the main component of the app.
- AppContext: a component that manages the context of the app.
- FooterButtons: a component that includes the footer buttons of every screen. These buttons allow movement between different pages.
- NavBarBack: a component that includes the navbar to go to the previous page and the settings icon.
- Settings: a component that controls the settings sheet modal and allows the user to give or revoke permission to access the camera and/or location.
- Table: a component that includes the table’s icon and number.
Among all the aforementioned components, the most important we need to fully understand is the AppContext component. It will define the context of the app.
React’s Context is a way of creating global variables that are being easily shared with other components or pages within the app. It is a better and more efficient alternative to the traditional method of sharing props from father components to children components.
The variables we will include in the context and consequently, we can access from any page of the app, are:
Pages
The app will be divided into these pages:
- HomePage: the main page of the app. It will welcome the user to the restaurant and allow them to go to the About Us Page (2) or see the menu (3).
2. AboutUsPage: this page will display the information about the restaurant.
3. FoodPage: in this page, users can see the menu and select the food they want to add to the cart. When finished, they can choose between eat-in (4) or delivery (5).
The food chosen by the user on this page will be stored in the context previously mentioned.
4. DateTimePage: users will choose here which day they want to go to the restaurant and the time (only o’clock hours when the restaurant is open). If there are no available tables on the selected date and time, the user will be informed to choose a new time slot. Besides, they will have to fill in their personal information. If all the data introduced is valid, they can select the table they want to sit in (5).
All the information given by the user will be stored in the context as well.
5. TablePickerPage: users can select a table between the available ones and also take a picture of themselves to make the reservation. This image will be uploaded to Firebase Storage. After doing so, they will move on to the Payment Page (7).
The table will be stored in the context.
We will use the Camera Cordova plugin for taking photos.
6. ContactInfoPage: The user will fill in their personal information and after, they will send the location. When everything has been validated, they can move to the Payment Page (7).
All the information given by the user will be stored in the context as well.
We will use the Geolocation Cordova plugin for accessing the location.
7. PaymentPage: page for making the payment. After paying, they will be redirected to the Order Summary Page (8).
This will be explained in more detail in the second part of the tutorial.
8. OrderSummaryPage: this page will show the user a summary of the order they have just completed. From here, they can go to the Home Page again (1).
Conclusion
In this article, we could learn how to create a food ordering application using Monaca, React and Framework 7, as well as the Firebase database. You can find the code here.
I hope that you could understand every step easily and please, contact me if there is any question or comment.
Remember that this is just the first part of the tutorial, so if you want to learn to finish it, you should check the second part: Online Payments with Monaca, React and Framework7 with Express backend.
Good luck and enjoy coding :)
