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.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 handyman.zip on your server
   • For example if your domain is http://handyman.com then you will be able to access the backend as http://handyman.com/handyman/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: Create two apps in OneSignal console, one for user and one for provider
  • ONESIGNAL_APP_ID_CUSTOMER - Your OneSignal App ID that you created for customer app, https://documentation.onesignal.com/docs/accounts-and-keys#section-app-id
  • ONESIGNAL_REST_API_CUSTOMER - OneSignal configuration for customer app
  • ONESIGNAL_APP_ID_PROVIDER - OneSignal configuration for provider app
  • ONESIGNAL_REST_API_PROVIDER - OneSignal configuration for provider app
• Social Login related:
  • FIREBASE_ISS: Required to succefully login through Apple Login(only available on ios 13), Value: https://securetoken.google.com/<firebase-project-id>. If not setup properly authentication in your app will not work properly.
  • GOOGLE_CLIENT_ID: This will be used for Google authentication in android apps for user and provider. You will find the key in firebase console
  • GOOGLE_IOS_CLIENT_ID: This will be used for Google authentication in ios app for user. You will find the key in firebase console under iOS App section that you will create for the project.
  • GOOGLE_IOS_PROVIDER_CLIENT_ID: This will be used for Google authentication in ios app for service provider. You will find the key in firebase console under iOS App section that you will create for the project.
  • FACEBOOK_APP_ID: Your facebook app id
  • FACEBOOK_APP_SECRET: Your facebook app secret
• Stripe Payment Gateway:
  • STRIPE_KEY
  • STRIPE_SECRET

1. Database

   In accompanied source code you will find a sql file named handyman.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:9085/api/admin and replace it with your backend url for example http://handyman.com/handyman/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 handman-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 handyman-angular/dist/* handyman/public/admin/ assuming handyman-angular is your angular project folder and handyman is your laravel project folder

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 and 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 and then for Service Provider’s app)
   • Enter your app signing certificate(SHA1)(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.
   • Upon registering 2 applications in your firebase project you should have 2 applicationIds and 2 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 these apis: Maps Javascript, Places API, Directions API, Distance Matrix API, Geocoding API
   • Go to credentails and copy Browser key
   • In your firebase console enable Authentication platforms: Phone Authentication, Google Signin, Facebook, Apple Signin(only ios 13)
   • Also enable Realtime Database, Storage in firebase console

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. 
   

   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.

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 version 4 or above.

   After setup make sure these versions are installed in your system:

   • Node - 8.9.3
   • Cordova - 8.1.2
   • Ionic - 3.9.2

4. Seting up Ionic application

   Add configuration files(google-services.json) acquired 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(also known as packgae name) you creted in Step 1 in firebase console. Specify application’s name between tag name App Name.

   Facebook login setup:

   • Edit values for APP_ID and APP_NAME placehodlers in config.xml and package.json for facebook setup.

   Google login setup:

   • For android, edit values for WEB_APPLICATION_CLIENT_ID and WEB_CLIENT_ID placehodlers in package.json for google setup.
   • For iOS, edit values for REVERSED_CLIENT_ID (Regarding reverse client id: https://codesundar.com/create-reverse-client-id-for-google-login)

   In src/app/app.config.ts:

   • Here change appName(name that displayes inside application)
   • Change apiBase with your base url. For example: http://yourbaseurl.com/
   • Change googleApiKey with the Browser key obtained in step 1.
   • Fill up firebaseConfig object details from your firebase console.
   • PayPal setup: Go to [https://developer.paypal.com/developer/applications/] and setup your sandbox or live app and copy client id, paste that in respective fields, i.e. “paypalSandbox” or “paypalProduction”. note: paypalSandbox will be ignored if paypalProduction is present in app.config.ts
   • Stripe setup: Go to https://dashboard.stripe.com/apikeys , create app if not created, copy test(starting as pk_test_) or live(starting as pk_live_) key and paste that in stripeKey field in app.config.ts

   • OneSignal setup: Go to https://app.onesignal.com/ , create or select your app, copy app id to paste in oneSignalAppId field. For field “oneSignalGPSenderId” paste in Sender ID from firebase console which was used in creation of OneSignal app. Note: you need to have seperate oneSignalAppId for Handyman Provider app, oneSignalGPSenderId will be same though.

     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, Google, Facebook, Apple Signin(Only iOS 13) in signin method in firebase
     • Updated all the required values in app.config.ts

     Useful links

     • SHA-1 key related
       • https://cloud.google.com/solutions/mobile/mobile-firebase-app-engine-flexible#generating_a_sha-1_fingerprint_for_the_app
       • https://developers.google.com/android/guides/client-auth
       • https://medium.com/pen-bold-kiln-press/sha-1-android-studio-ec02fb893e72
     • Google login
       • https://ionicframework.com/docs/native/google-plus/

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