MATAAM

Full multiple restaurants order & delivery application

Documentation


Introduction


I would like to start by thanking you for purchasing this template. I hope that you will be very satistfied with the item, and with our supoort.

In this documentation, we will show you how to configure and setup the application, how to customize it and how to change the behaviour and the code.

Requirements

Before starting, it is required that you install NodeJS as it will be used as an execution environment for the mobile application, the dashboard and even the server.

To verify that you have correctly installed NodeJS, open your terminal and run these two commands: npm -v and node -v

It should shows the version that you have installed. If it didn't please re-install it.

Android SDK and/or Xcode are also required to run and build a mobile application

You also need to have a firebase project, a google maps key and a stripe account.

Folder structure #back to top

The downloaded zip file from envato should contains these folders:

Here's the purpose of each folder:

  • admin-dashboard: This folder contains administration dashboard which will be used to:
    • Add, Update and Remove restaurants
    • Add, Update and Remove delivery men
    • Show clients
    • Show orders
    • Show usage statistics

  • DeliveryApp: This is the mobile application that you should give to your delivery men, it will notify them when a new order is ready to be delivered and how to get to the delivering address

  • Documentation: Contains the instructions of the project

  • Mobile: This is the main application, you should upload it to the PlayStore and the App Store so that clients could download it and use it (i advice you to advertise it via google and/or facebook to get more clients)

  • restaurant-dashboard: This folder contains the dashboard that your partner restaurants will use to update their informations, manage their menu and manage their orders (after you give them access via the admin-dashboard)

  • Server: This will be the backend of your plateform, you don't need to worry about this folder. You just need to host it in a server (a nodejs server)

Setup the application #back to top

Setting up the application with your own title, language, database, etc... couldn't be eaiser, as we provide a setup wizard that will do all the work for your (you're welcome )

You can find the setup wizard at https://mataam.themeleger.net/setup

Watch this video to see how to setup the application with the setup wizard


Too long didn't watch

  1. Visit https://mataam.themeleger.net/setup
  2. Fill in the forms and click next until you reach the last step
  3. Click on Generate Configuration
  4. Click on Download
  5. Extract the downloaded zip file in the folder you downloaded from envato (if it ask you to override a file just click yes)
  6. There's no other step, you just finished setting up the application

Starting it #back to top

For the purpose of this section we will test our application locally, in the next section we will see how to build and upload it.

Starting the Server

To start the server, follow these steps:

  1. Open your terminal
  2. Go to the Server folder
  3. Run npm install
  4. Run npm start
  5. The server should be running at http://localhost:8080/ (This will be the url of your server)
  6. You should update all the Config.js files inside the Mobile, DeliveryApp, admin-dashboard and restaurant-dashboard folders to set the server url with the value of this url

Starting the Admin dashboard

To start the Admin dashboard, follow these steps:

  1. Open your terminal
  2. Go to the admin-dashboard folder
  3. Run npm install
  4. Run npm start
  5. The dashboard should get opened in your navigator (it may take a while)
  6. Login with your admin credentials

Starting the Restaurant dashboard

To start the Restaurant dashboard, follow these steps:

  1. Open your terminal
  2. Go to the restaurant-dashboard folder
  3. Run npm install
  4. Run npm start
  5. The dashboard should get opened in your navigator (it may take a while)
  6. Login with a restaurant (it should be added first via the admin-dashboard)

Starting the Mobile application

To start the Mobile application, follow these steps:

  1. Open your emulator or plug in your device
  2. Open your terminal
  3. Go to the Mobile folder
  4. Run npm install
  5. Run react-native upgrade
  6. Run react-native link
  7. Run react-native run-ios for IOS testing or react-native run-android
  8. The app will be open in your emulator or on your device

Starting the Delivery application

To start the Delivery application, follow these steps:

  1. Open your emulator or plug in your device
  2. Open your terminal
  3. Go to the DeliveryApp folder
  4. Run npm install
  5. Run react-native upgrade
  6. Run react-native link
  7. Run react-native run-ios for IOS testing or react-native run-android
  8. The app will be open in your emulator or on your device

Building it #back to top

Building an application is a necessary step to deploy it, but it's not a hard step. In this section we will see how to do this step

  • Server: The server does not need a build, you only need to deploy it (we will see this in the next section)
  • admin-dashboard: Go to the admin-dashboard folder via the terminal and run npm run build. The build output should be inside the public folder
  • restaurant-dashboard: Go to the restaurant-dashboard folder via the terminal and run npm run build. The build output should be inside the public folder
  • Server: The server does not need a build, you only need to deploy it (we will see this in the next section)
  • Mobile and DeliveryApp: Please follow this documentation to see how to build a react-native for Android, and this tutorial for IOS.

Deploying #back to top

You could host the dashboards on any kind of a server, or even on a html and css only hosts (many of them are free)

The Mobile app need to be hosted on Google PlayStore and/or Apple AppStore.

And for the server, it need to be deployed on a NodeJS server. A free and a recommended solution is to depoloy it on Heroku Cloud by following this documentation

Customizing #back to top

We made the code clear and well structured to make it easier for clients to customize the application


Customizing the language

If the desired language does not exists on the setup wizard you should change it manually by going to the Language.js file inside the dashboards and the applications source folders. You will find all the text displayed inside the application in a JSON format so it's pretty easy to change.
If you don't know about JSON i advice you to read this tutorial first.


Changing the configuration manually

Each part of the app (there's 5: Two mobile applications, two dashboards and a server) have it's own configuration file placed inside the source folder. You could open it with your favorite editor and change it values.


Customizing the icon and the splash screen

To change the icon and the splash screen of the app i advice you to use the React Native Generator package which will make this step alot easier.
First prepare the icon image (should be a square image with a size greater than 192x192 px) and the splash screen image (size bigger than 2208x2208 px) and then use the RN generator module to use this images to generate the icons and the splash screens for the Mobile and the DeliveryApp applications.
Follow this instructions on how to use the React Native generator.

Support #back to top

If you run into any problems during installation, use, or customizing please feel free to contact us at contact@themeleger.net