Setup Documentation

## 1. Introduction

This project consists of 1 Mobile App, 1 Admin Portal clubbed Website.

Technologies Used in Web App are:

1. React.Js
2. Redux
3. Material UI
4. Firebase Realtime Database

We have built the Mobile App using React Native(Expo) for iOS and Android

The main Technologies used are

1. React Native
2. Expo
3. React Native Elements

## 2. Help And Support

For any support-related queries,
Email us at contact@exicube.com

## 3. Environment Setup

To run the 2 Apps you need following things in your development machine as mentioned below.

A. Download NodeJs

1. Download instructions
   - Mac users: For OS X, download the .pkg file form below link.(v.20.19.4 recommended)
   - Windows users: Download either the MSI or the .exe form below link, whichever you prefer .(v.20.19.4 recommended)
   Download Node v.20.19.4 from here
2. After Installing NodeJs you'll most likely need to restart your computer.

To ensure that NodeJs is installed correctly, you can type:

`node -v`

NOTE: DO NOT IGNORE THE NODE JS VERSION. IT HAS TO BE 20.19.4

B. Install Git (Windows PC Only)

- Download and install the latest from this link. https://git-scm.com/

C. Install Python 3.12.0 (M1 Mac Only)

- Download and install from this link. https://www.python.org/downloads/release/python-2718/

D. Install Eas Cli

#### In your command prompt, type:

`npm install -g eas-cli`

#### Create a account in https://expo.io/signup and use the same account to signin on command prompt using below command

`eas login`

E. Install Yarn

#### In your command prompt, type:

`npm install -g yarn`

F. Install Firebase Tools and Login to Firebase

#### In your command prompt, type:

`npm install -g firebase-tools`

#### You have to login in firebase from the command prompt using below command

`firebase login`

G. Copy Firebase Login Token

#### An access token from firebase is also required by the Eas build service. Again signin in firebase using below command

`firebase login:ci`

Step 1 Select Google account

Step 2 Allow the firebase

You got success message

Go to command prompt and copy the token

Now go to your Expo account -> Select the project -> Create a Environment variables

Use name FIREBASE_TOKEN and in value paste the token and Visibility select Secret and click on Add Variables

## 4. Project Configuration

Step 1 First Extract the Zip file downloaded from codecanyon.

Open the folder 'Sourecode' in Code Editor after extracting the Zip

Step 2 Change the App Name and App Description in the /functions/config.json

The app_identifier is very important. It is also known as Package Name in Android World and Bundle Identifier in iOS World

It is written like com.your-organisation-website-name.app-name
e.g. Exicube has developed a Taxi App. Then the identifier can be com.exicube.taxi

Note: The app_identifier should be in lowercase only.

Step 3 Change all Logo, Splash and other images related to branding kept in assets folders

- mobile-app/assets/images/logo1024x1024.png
- mobile-app/assets/images/splash.png
- mobile-app/assets/images/splash_ios.png
- mobile-app/assets/images/logo96x96.png
- mobile-app/assets/images/logo165x90white.png
- mobile-app/assets/images/intro.jpg
- mobile-app/assets/images/bg.jpg
- web-app/public/favicon.ico
- web-app/public/apple-icon.png
- web-app/src/assets/img/logo138x75black.png
- web-app/src/assets/img/logo138x75white.png
- web-app/src/assets/img/logo192x192.png

Note: Do not change any dimension or file name of the images given. Only overwrite the content of image using image editor.

Step 4 Go to Firebase Console and then create a new project as shown in picture.

Type in your project name as shown in picture.

Accept terms and click on 'Create Project' as shown in picture.

When your project is ready click the 'Continue' button as shown in picture.

Create a new Realtime Database as shown in picture.

NOTE: Update billing Spark to Blaze

Start in locked mode and then enable it.

Create a new Storage as shown in picture.

Start in Production mode and then next it.

Step 5 Configure GCP Server Location.

1. Select Default GCP resource location in Firebase Portal -> Settings -> General

2. Copy Project ID from Firebase Portal -> Settings -> General and paste in the /functions/config.json as shown below. Change the XXXXXX only. Do not tamper with the JSON structure.

Step 6 Change the Google map keys in the same file /functions/config.json.

Replace XXXXXX only. You can use same API key in 4 places or 4 different API keys for the 4 different platforms to better monitor platform wise usage and advance security.

Follow the Steps below to collect a valid Google API Key

Open https://console.cloud.google.com/google/maps-apis/overview

Create a new project. Make sure the type of project is MAP PLATFORM type if asked and Billing will be dollar $ USD based. You will have to setup a Billing account if you do not have a dollar $ billing account. Then click on Create. Note: Firebase creates a project in Google cloud also. Avoid using the same for the Google Maps project.

Click on Menu Icon -> API & Services -> Credentials

Click on "Create Credential"

Click on "Create Credential" Copy the API key. This will be used in code.

Couple of more steps required from some extra permissions. Click on API & Services -> Dashboard -> Enable APIs and Services

Enable All the APIs show below. Very Important

1. Routes API
2. Geocoding API
3. Places API(NEW)
4. Maps JavaScript API
5. Maps SDK for IOS
6. Maps SDK for Android
7. Firebase Extensions API

This is how you enable each API. Enable all the 7

Note: Enable billing in this Google Cloud Platform. Very important.

Step 7 You should enter the Purchase Code in the /functions/config.json.

Step 8 Go to firebase console and Click on Authetication Menu. Click on Sign-in-Method. Click on Google icon then enter your email id now click on Save button and follow the instruction as show in pictures

Step 9 Click on Authetication Menu and click on Sign-in Method and hover on Email/ Password pencil icon and follow the instruction as show in pictures

Similarly enable the Phone Auth as shown below

Similarly enable the Apple Auth as shown below. Also add the Bundle Indentifier in the "Service ID"

Step 10 Create a project in https://expo.dev by logging with your Expo account

Try to use the same Firebase Project Id in Slug
Click to open the project
Copy the Owner, Slug and ID in the expo_owner, expo_slug and expo_project_id of config.json respectively
Step 11 In admin_email field use Admin email id which will create admin account with this email id
Note: This will be the same email you will use to login as Admin user.

## 5. Deploying the Web App plus Server Side

Run the below commands to run and deploy the web app.

Use Command Prompt in Administrator Mode if using MS Windows. Also note that when you make some changes in code, you have to repeat all these commands.

`cd Sourecode` `yarn` `yarn deploy`

After successfully deploying your project you will receive the hosted url in the terminal.

Open the URL mentioned in result of the last line of the command. Go to login and type the admin email you mentioned as admin_email on the config.json.

Use FORGOT PASSWORD to generate new password for Admin.

## 5.1 Add Payment Gateway

For activating any Payment Gateway, add the API keys of the payment gateway you want in the Payment Settings of Admin panel and make the active as true then click on Submit button.

## 6. Build Native Mobile App

Go into the Main code folder in Command Prompt

`cd Sourecode`

1. For building Android
`yarn app:build-android`
2. For building IOS
`yarn app:build-ios`

*For APK build run yarn app:build-android-apk

When anything asked in the process above, let eas build handle all the certificate and key generation for you.

## 7. Post Build Setup

## 7.1 Setting Push Notification for Android

For Android Push Notifications

Goto your Google cloud console and enable Firebase Cloud Messaging API
Go to Firebase Portal -> Project Settings -> Service accounts -> click the button to Generate new private key for the Firebase Admin SDK and download the JSON

Then Go your Expo account -> Select Project -> Project settings -> Credentials -> choose Android -> Application Identifier

Click the Add a service account key

Then Go Upload new key tab and select the JSON that you got from Firebase -> Service accounts section

## 7.2 Copy Android SHA-1 To Firebase

Go to Expo Account -> Select The Project -> Credentials

Click on Application Identifiers

Copy the SHA-1 Certificate Fingerprint

Go to your Firebase Portal -> Project Settings -> General -> Android apps -> Click on Add Fingerprint

Now paste the SHA-1 Certificate Fingerprint and Click on Save button

After Publish Your App in PlayStore Copy SHA-1 certificate fingerprint

And Paste It in your Firebase Portal -> Project Settings -> General -> Android apps -> Click on Add Fingerprint

## 7.3 Upload Apple APNs to Firebase

Go to Expo Account -> Select The Project -> Credentials

Click on Application Identifiers(IOS)

Go to Service Credentials > Push Key > Press Push Key Button and copy Key ID and Apple Team Identifier

Go to Firebase Portal -> Project Settings -> Cloud Messaging -> Apple app configuration -> Upload the downloaded Push Key in APNs Authentication Key

Browse the downloaded Push Key file and paste both Key ID and Apple Team Identifier Respectively

## 8. Additional Settings For Google Login

How To Set Google Login In Your Project

Go your google cloud console > APIs & Services > Credentials

Then click on Web client (auto created by Google Service)

Authorized JavaScript origins > add your web url(Firebase Portal -> Hosting -> Domains) and click on Save button

Then go your OAuth consent screen > then select External > click on create button

Then go Authorized domains section and add your web url(Firebase Portal -> Hosting -> Domains) and add your email id .
Then click on SAVE AND CONTINUE button

## 9. Common Issues

## 9.1 Backend Specification Issue

After running 'yarn deploy' if showing backend specification issue then run 'yarn deploy' again.

## 9.2 "yarn deploy" issue

If you face the issue when running "yarn deploy". It's mean many functions are not deployed

Then go to Firebase and click on the 'Firebase functions' and delete all the functions(Which is Red marked)

Afterthat go to Google cloud console then search 'Cloud run functions' then select red error functions and delete it.

when all of this completed then run 'yarn deploy' again. Then check Google cloud console and make sure all the functions are deployed properly.

If the issue still persists, please delete the undeployed functions one by one using the command - firebase functions:delete functionName and confirm by pressing 'y'.

After that, redeploy the same function using the command - firebase deploy --only functions:YourFunctionName.

##### Make sure all the functions permission are approved

Go to Google cloud console > Cloud run functions then select all the functions and click on the 'Permissions' and check all permissions are granted successfully.

## 9.3 Firebase issue

After running 'yarn' if you face the firebase error then delete node modules from sourcecode folder and follow the documentation of "F. Install Firebase Tools and Login to Firebase" and "G. Copy Firebase Login Token".

## 9.4 Google API issue

If you face the below issue then follow the documentation of "Step 6 Change the Google map keys in the same file /functions/config.json."