These instructions will help you in setup server and mobile application.

Introduction

The app is connected with Laravel 5.7 based CMS using REST APIs, the following documentation will guide you through the process to connect the app with your backend. This guide assumes you have some experience in setting up PHP based web applications and Laravel Framework 5.7.

Setting up the server

  1. Server Requirement

    The server on which you are going to deploy the backend must fulfill the following requirements:

    • PHP >= 7.1.2
    • Mysql 5.7
    • OpenSSL PHP Extension
    • PDO PHP Extension
    • Mbstring PHP Extension
    • Tokenizer PHP Extension
    • XML PHP Extension

  2. Deploying Backend

    Follow these steps:

    • Extract the vroom.zip on your server
    • For example if your domain is http://vroom.com then you will be able to access the backend as http://vroom.com/vroom/public

  3. Configuration

    All the major configuration values you will need to set in .env file which is present in root folder of the accompanied source code. Following are the most important values, you may set other values in .env as well if you have experience and requirment to do so:

  • App related:
    • APP_NAME: Title of your app
    • APP_URL: Url of your backend
  • Database related:
    • DB_HOST: Database host, usually it’s localhost
    • DB_PORT: Database port, incase of mysql it’s usually 3306
    • DB_DATABASE: Database Name
    • DB_USERNAME: Database username
    • DB_PASSWORD: Database password
  • Push Notification related:
  • Social Login related:
    • FIREBASE_ISS: Required to succefully login through FB/Google, Value: https://securetoken.google.com/<firebase-project-id>. If not setup properly authentication in your app will not work properly.
  • Logo:
    • APP_LOGO: Enter the url of your logo, this logo will be displayed in backend panel

  1. Database

    In accompanied source code you will find a sql file named vroom.sql. Create the database and then import the file in your database.

  2. Admin Panel

    Admin panel is developed in Angular 7 and shipped in seperate folder. Normally you will not need to compile the files again for your deployment. If you are not going to make any change in Admin Panel source code, you can skip the angular compiling step. Following change in the file will still be required in any case:

    • Open public/admin/main.e0dc3b111fbb1158753b.js or if you do not see this specific file open public/admin/main.<some-random-code>.js file in any editor of your choice
    • Search for http://opuslabs.in:9088/api/admin and replace it with your backend url for example http://vroom.com/vroom/public/api/admin
    • This is a just a quicker way to make ready your admin panel so that you do not have to compile whole angular project, if you want to customize source as per your requiremtn you will need to follow steps mentione below. If you do not want customization you can stop at these step.
    • Open vroom-admin.zip, it’s an Angualr 7 based project
    • If you are not familiar with Angular 7 we will suggest you to get basic idea from https://angular.io/guide/quickstart
    • If you need to change api url, open src/app/@core/models/constants.model.ts and update the value of API_BASE_URL variable
    • After making the required changes issue a command ng build --prod
    • Now angular would have created/updated the dist folder in root with updated compiled files
    • You need to copy all the files in dist folder to you Laravel’s public/admin folder.
    • For example cp -r vroom-angular/dist/* vroom/public/admin/ assuming vroom-angular is your angular project folder and vroom is your laravel project folder

  3. OTP Verification

    In server code, you will find a file named otp.html in public folder. You will need to update firebase config in this file to successfully run the OTP verification. Follow these steps:-

    • In you firebase console, go to Project Overview > Project Settings
    • Now click on Add App and select web in platform. Fill the required details.
    • You will be presented with script, copy the firebaseConfig complete variable
    • Now, in otp.html you will find a similar variable declared near line number 406
    • Replace the existing variable with new variable you copied from firebase console
    • Next, go to Authentication > Sign-in method > Authorize domains section
    • Click on Add domain, in domain field enter your domain name or IP address if you are not using domain name yet
    • For example vroom.com or 1.2.3.4
    • Finally click on Add button

Mobile App

  1. Setup Firebase and Api keys

    • Login to http://console.firebase.google.com
    • Click on “Add project” to add new project -> provide project name as you like and hit Create Project.
    • Now you have to Register apps in this project. Click “Add app” -> choose platform Android
    • Each app has its unique ID known as “Package name” or “ApplicationId”. For more info on how to name one visit https://developer.android.com/studio/build/application-id
    • Enter package name as asked on firebase console(once for User’s app, Restaurant’s app and Driver’s app. ps-sequence doesnt matter).
    • Set a nickname(optional, but we’ll add total of three apps so..)
    • Enter your app signing certificate(Optional but important in order to make features work like social login and otp verification. here is how to have one -> https://developers.google.com/android/guides/client-auth)
    • Click Register app. Upon succesful registration of app you’ll be provided with your configuration file(google-services.json) for that app.
    • Next click continue or skip to proceed and Repeat this step 2 more times to register app for Restaurant’s application and Driver’s application
    • Upon registering 3 applications in your firebase project you should have 3 applicationIds and 3 configuration files(google-services.json).
    • Now for api keys visit https://console.cloud.google.com/cloud-resource-manager
    • Select the project you just created in firebase
    • Navigate to “Api and Services” section and click “ENABLE APIS AND SERVICES”
    • Now Search and Enable 3 apis -> maps sdk for android, places sdk for android and directions api.
    • Go to credentails and copy “Android key” and “Browser key”

  2. Install Node.js

    You must have Node.js installed on your system to begin building our app. Please follow the following step if nodejs is not installed on your system. If already done, you can skip this step

     Note: Install Node.js version 8 or above on your system.

    Download the Node.js as per your operating system from https://nodejs.org/en/download/ To ensure that you have correct version of nodejs installed, from the command line issue the following command

    node -v

    If you see the string containing version number greater than 8, you are good to go. If you get command not found error, that means nodejs is not properly installed on your system. You’ll need to troubleshoot the problem.

    You may be able to use node version lessser than 8 but we haven’t tested the app with these versions

  3. Install ionic and cordova

    In order to build our app you need to have installed ionic and cordova on your system. To install these packages issue the following command from command line:

     npm install -g ionic@3.9.2 cordova

    This will install the ionic and cordova programs on your system. To ensure that you have successfully installed both the programs, issue following command from the command line

     ionic -v && cordova -v

    If version number gets printed on the console, you are good to go. If you get command not found error, that means that these programs didn’t get properly installed on your system. You’ll need to troubleshoot the problem.

    Make sure you do not accidentally install ionic-v4(beta)

  4. Seting up Ionic application

    Add configuration files(google-services.json) aquired from step 1 into respective project’s root folder. You’ll find config.xml, open to edit “id” parameter in very first line with applicationId you creted in step 1 in firebase console. Specify application’s name between tag name here. Next file -> src/app/app.config.ts Here change appName(name that displayes inside application) change apiBase with your base url.. such as -> http://yourbaseurl.com/api/ change googleApiKey with the Browser key obtained in step 1.

    cordova-plugin-googleplus

    • Run the following command to add the support for google login

      > ionic cordova plugin add cordova-plugin-googleplus --save --variable WEB_APPLICATION_CLIENT_ID=mywebapplicationclientid
> npm install --save @ionic-native/google-plus

      Your mywebapplicationclientid will look something like this 511052243603-tti40jbrr3ukb2t3abebcesl5sd0ql099.apps.googleusercontent.com. We have already demonstrated above how to get this id.

    Final Checklist

    In summary, make sure you have followed all these steps before proceeding

    • Added project in firebase
    • Added debug and release SHA-1 key in firebase
    • Downloaded google-services.json file from firebase and placed it in root folder of the app source code
    • Enabled Phone Authentication and Google in signin method in firebase
    • Updated all the required values in app.config.ts

    • Installed cordova-plugin-googleplus cordova plugins

      > ionic cordova plugin add cordova-plugin-googleplus --save --variable WEB_APPLICATION_CLIENT_ID=mywebapplicationclientid

> npm install --save @ionic-native/google-plus

    Useful links

  5. Build App

    Since the app depends on various native capabilities we suggest you to check the app on physical device instead of checking it in browser. Once you have followed all the steps given above you can build the app for android and ios. But keep in mind that Ionic doesn’t bundle all of the tooling required to build an app, it relies on some additional SDKs and software provided by Apple and/or Google. You’ll need to set up the platform tooling before you can preview or emulate an application on a simulator or device.

    Once done, you can run following command to run the app on your Android device:

      > ionic cordova run android

    To build the apk, run:

      > ionic cordova build android

    Simillarly for iOS, you can run:

      > ionic cordova build ios

    If you find the given information insufficient for you to successfully build or publish the app on app/play store. Please visit https://ionicframework.com/docs/intro/deploying/ for indepth documentation.

  6. Deploy App

    Deploying apps on Google Play Store and Apple App Store is out of the scope of this document. Kindly refer to this guide for further instructions.

Note: If you are unable to understand any topic or find any topic needs more elaboration. Please raise an issue ticket at this link https://opuslabs.freshdesk.com