CHEER Community Garden Produce Collection App

Table of Contents

• Getting Started
  • Prerequisites
  • Installation
  • Environment Variables
  • Running the App
• Purpose
• Architecture
• Building
  • Expo development builds

Getting Started

This guide will help you get the app running on your local machine for development and testing purposes.

Prerequisites

• Node.js (v18 or newer)

• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/CommunityCHEER/gardner-harvesting.git

2. Navigate to the project directory:

   cd gardner-harvesting

3. Install the dependencies:

   npm install

Environment Variables

To run this project, you will need to add the following environment variables to your .env file:

EXPO_PUBLIC_FIREBASE_API_KEY EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN EXPO_PUBLIC_FIREBASE_PROJECT_ID EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID EXPO_PUBLIC_FIREBASE_APP_ID

Create a .env file in the root of the project and add the variables above. A template is provided in .env.example.

Note	For EAS cloud builds, these variables must also be set in the EAS environment config (npx eas env:list --environment production). The .env file is gitignored and only used locally.

Running the App

To start the Metro development server, run:

npm start

This opens the Expo dev server. Use one of these paths:

• Install a local Android development build on a device/emulator: npm run android

• Run on an iOS device/emulator: npm run ios

• Run in a web browser: npm run web

For Android phone testing, use a development build of this app, not Expo Go. Typical physical-device flow:

1. Enable USB debugging on the phone and connect it.

2. Verify the device is visible with adb devices.

3. Install the app with npx expo run:android --device.

4. Keep Metro running via npm start.

5. Open the installed app on the phone and connect it to Metro.

If you need a cloud-built installer instead of a local native build, use npm run devbuild to create an EAS development build, then sideload that artifact onto the phone.

Purpose

It’s important for CHEER’s Long Branch Gardeners program to keep effective track of the produce collected to be able to present such data for potential grants. Additionally, gardeners can receive awards for frequent participation. Originally, all of this data was collected on paper and collected by hand, then manually entered into a Google Sheet. This was cumbersome and slowly becoming messy. This app streamlines the process of data collection by providing an easy-to-use form that allows for versatile but consistently-structured uploading of harvest data, as well as a simple system for logging participation and a means of viewing past participation.

Architecture

This is a React Native app built upon the cross-platform Expo framework. It uses Expo’s tab-based routing and navigation system. The app is powered by a Firebase-hosted cloud backend. User data, some system data, and collected data, are all stored in a Firestore database. There is also a realtime database, where harvest data is held in parallel. While each harvest is in isolation and contains its data (garden, crop, date, etc.) on Firestore, harvests in the realtime database are hierarchically categorized by date, garden, and crop. The former is more efficient for viewing the data on a larger scale and selectively filtering (as in this app’s sister project, a data visualization webapp for the director of the program), while the latter is more efficient for getting specific data on a smaller scale. In this app, there is a display of the total number harvested of the selected crop at the selected garden on the current date, which necessitates both the use of the realtime database as well as the different structure.

Throughout the database, we use document references as much as possible. This allows for less copying of data and more dynamic usage of the data. Additionally, in the realtime database, while document references are unavailable, we simply use the ID of the given item, assuming knowledge of the collection in which the specific document resides.

This app also uses Firebase for user authentication. Presently, the only means of authentication is email and password. The Firebase JavaScript API provides both built-in authentication persistence and a means of utilizing React Native local storage for persistence. Authentication state is shared between tabs using React’s context API.

Building

Use EAS for cloud-built installable artifacts and store submissions.

Current Android build paths:

• Local device install: npx expo run:android --device

• Cloud-built development artifact: npm run devbuild

• Production Play build: npm run build:android

The development profile is configured in eas.json with developmentClient: true, so the resulting Android artifact is meant to be installed on a device and connected back to Metro during development.

After the first Android EAS build, sync the generated signing fingerprints back to Firebase:

1. Open the project credentials in Expo/EAS and copy the Android SHA-1 and SHA-256 fingerprints.

2. In Firebase Console, open Project Settings → Your Apps → Android → com.communitycheer.gardner_harvesting.

3. Add the fingerprints there.

4. Download the refreshed google-services.json and replace the repo copy.

Expo development builds

For rapid development, Expo development builds compile the app’s native dependencies and wrap them in a debug-friendly runtime. In this repo, that is the correct path for Android device testing when native modules matter. Run npm start for Metro, then connect from the installed development build on the phone. Use npx expo run:android --device for a local install or npm run devbuild for an EAS-built installable artifact. Read more here.