SAPAA Deployment Documentation

1. Frontend

The frontend of the app can be hosted locally on your computer with Expo or it can be installed onto a mobile device with an apk.

Before either you must clone the Github repository.
On the github page, select the code button near the top then select HTTPS and copy the given URL.
Open Visual Studio Code (Or your favorite editor) and select clone Git repository.
Select a folder you wish to clone to and then open the folder
Open a new terminal and type: cd .\sapaa-app\
To install dependencies type: npm i
This will install all the dependencies needed to run the app

Local hosting with Expo:

First install the Expo Go app on your phone
In the project terminal navigate to the sapaa-app folder and run: npm start
This will generate a QR code that you can scan with the Expo Go app and will run the app on your phone

Install with apk:

Followed from https://docs.expo.dev/build/setup/
Navigate to the sapaa-app folder
First create an Expo user account
Run: npm install -g eas-cli
Login by running: eas login
Configure project by running: eas build:configure
Build project by running: eas build --platform android
NOTE, you can build this for the IOS platform but that requires a paid apple developer account so we only focus on android
Connect the phone to the computer and install the generated apk file.

2. Backend

We deployed the backend which is a nodeJS server with express, with a service called fly.io, which includes a free plan, or you can also host the backend locally.

Hosting Locally:

Navigate to the sapaa-app folder and then to the backend folder
Run npm start
NOTE, with doing this you will have to change the config file backend url to your IP address.

Hosting on fly.io:

Followed from: https://fly.io/docs/hands-on/install-flyctl/
Install flyctl, run: pwsh -Command \"iwr https://fly.io/install.ps1 -useb \| iex\"
Sign up, run: fly auth signup
Login, run: fly auth login
Navigate to the sapaa-app folder then navigate to the backend folder
Run: fly launch
This will generate a dockerfile.
Run: fly deploy
This will deploy the backend on fly.io and then you will need to replace the backend url in the config file.

3. Firebase

In addition to storing the form data in Google Sheets, we also store pictures and the map from the geolocation feature into firebase. In order to link this data we include a link in the Google Sheet to the picture in the Firebase storage. Firebase is also used for authenticating our users upon login.

Authentication:

We implement login using Firebase Auth with signInWIthEmailAndPassword as well as createUserWithEmailAndPassword from the firebase/auth library.

Storage:

In order to upload images to firebase we used the firebase/firestore to add a document to our database. We then use the firebase/storage library to retrieve the url for that image and include that to the Google Sheet.

4. Configure Google Sheets

The app will send all the data to a specific Google Sheet as a single row. There are a few things needed to specify which sheet to send data to. First, place our provided credentials file into the backend folder. Other things required include the sheet being shared with a service account as an editor, ours is sapaa-226@sapaa-app.iam.gserviceaccount.com. Also required is the sheet ID (information about how to find that is at https://developers.google.com/sheets/api/guides/concepts) as well as the name of the sheet (ours is just sheet1) included into the config file.

Create a new service account:

If you do not wish to use our service account, you can create your own account. Go to the Google Cloud Platform and select create a new service account and then generate a credentials JSON file and place that file in the backend folder. More information found here: https://support.google.com/a/answer/7378726?hl=en.

5. API Documentation

Our deployed API has 3 endpoints, /form, /names and /send-email.

Form:

This is a post request and it takes in requests of all the fields in the Google Sheet and posts them to the Google Sheet. An example usage is:

axios.post('https://yourURL/form', data)

where data is all the data you wish to push to the Google Sheet.

Names:

Names is a get request and if pulls all the names from a target sheet with the range A1:A1000, it only pulls from the A column. An example usage is:

axios.get('https://yourURL/names')

The purpose of this is to gather a list of names from the Google Sheet that the user can select from in the form.

Send-email:

This is a post request that sends an email to a provided email. It takes in a request that includes to (the address you wish to send to), subject (the subject line of the email), and text (the body text of the email). An example usage would be

axios.post('https://yourURL/send-email', emailData)

where emailData is the to, subject and text provided.