codeforboston / plogalong

MIT License
22 stars 37 forks source link

Plogalong

Plogalong is an app for iOS and Android designed to encourage new and existing ploggers to record the litter they pick up while walking, running, or exercising outdoors.

This is a project of Code for Boston. If you would like to get involved in helping us develop the app, join us at the next Hack Night, and we can help you get started.

We're in the beginning stages of development, but we have a very detailed Mockup.

Architectural Overview

Setup Instructions

API Keys

Firebase

Using the shared Firebase project

Check on our Slack channel for the shared configuration file. Save it to firebase/config.js.

Setting up your own Firebase project

  1. Install Firebase CLI: npm install -g firebase-tools
  2. In the firebase/project directory, run firebase login. If prompted, log in to your Firebase account.
  3. Choose the project to use:
    • An existing project: Run firebase use --add and follow the prompts. (I use the alias "default".)
    • A new project: Run firebase projects:create and follow the prompts
  4. In firebase/project/functions run npm install.
  5. Deploy with firebase deploy. (See firebase deploy --help for additional options.)

Additional setup: see the section on SendGrid below.

Local Configuration

Some Firebase features require additional configuration in the shared app config (app.config.js). When building, you can optionally specify a LOCAL_CONFIG_FILE environment variable. If given, it should be set to the path (relative to the working directory) of a JS module that exports a config object. See app.config.js for the keys you can override.

SendGrid

What it's for: this API is used to send certain transactional emails: for example, user feedback.

Get API Key

  1. Create an account
  2. In the SendGrid dashboard, open API keys
  3. Create a new API key. If you choose to customize the access levels, set "Mail Send" to Full Access.
  4. Copy the API key
Sender Authentication
  1. Open the Sender Authentication page under Settings
  2. Choose "Authenticate Your Domain" and follow the instructions

Configure Firebase

  1. In this repo, cd to firebase/project
  2. Set the email configuration options:

    plogalong.sendgrid_api_key=SG.xxxxxxx plogalong.admin_email=xxxxxx 

    Replace SG.xxxxxxx with the API key you got earlier. The plogalong.admin_email option determines the email address that will receive admin alerts (comment submissions, for instance). It will also be the sender email unless you provide a separate plogalong.sender_email option. In either case, you must complete "Sender Authentication" (above) for the sender domain or address.

OpenWeatherMap (optional)

What it's for: this API is used to populate the Current Weather box on the Plog screen

What to do: Register for a free account on Open Weather. Copy your key from the "API Keys" tab and paste it into the openWeatherMapKey of your config.json file.

Updating

Remote Debugging

Debugging Plogalong should be no different than debugging any other React Native project, but below are some useful tools for your convenience.

Option 1: React-DevTools

If you're already familiar with debugging React web apps via Chrome DevTools, this is pretty similar. The React Native documentation points out that "the React Developer Tools Chrome extension does not work with React Native" and offers a standalone version of React Developer Tools for debugging.

Installation

The steps for installation can be found here.

Option 2: React Native Debugger

Similar to React-DevTools is the React Native Debugger published on GitHub by user jhen0409. This standalone app is based on the DevTools in Option 1 above, but may provide more functionality.

Installation

For installation via Homebrew, you can follow the README instructions.
Otherwise, you can simply download the appropriate prebuild binary from the release page (choose the .dmg file for macOS and .exe for Windows)

Usage

  1. Open React Native Debugger app, and notice that the default port is set to 8081. With this default window open, select Debugger > New Window (or more simply ⌘T or Ctrl+T) to change the port to 19001. Confirm the new packager port.
  2. Fire up the Plogalong app via expo start just like you always do.
  3. Navigate to the Expo Developer Menu with a shake gesture (Ctrl ⌘ Z in an iOS Simulator, Cmd+M in an Android Emulator), and select "Debug Remote JS" from the menu that pops up on the device.
  4. The React Native Debugger should connect and you'll see console.log() statements print in the console, be able to inspect elements by triggering the Expo Developer Menu (shake gesture > Toggle Element Inspector), and set breakpoints in the Debugger by navigating to Sources > Page > RNDebuggerWorker.js
  5. When you're finished, you'll save yourself some trouble the next time you start Plogalong if you remember to "Stop Remote Debugging" via the Expo Developer Menu (shake gesture).

How to Contribute

Join us on the Code for Boston Slack. We're in the #plogalong channel.