obsidianwolf / plogalong

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

• React-Native + Expo: React Native is built on the same bones as React for web, except that instead of building user interfaces from DOM elements, you use platform-native views (UIViews on iOS, Views on Android). Expo is a managed version of React Native that includes a library of components known to be compatible with each other. It adds some tooling that help in the development cycle.

• Redux for managing local state

• Database - Firebase

• Authentication - Firebase

Setup Instructions

• Clone this repository (download and extract zip file from https://github.com/codeforboston/plogalong)

• Node (10.x or 12.x) -- ensure that you have a recent version installed - https://nodejs.org/en/download/

• Make sure that /usr/local/bin is in your $PATH by opening Terminal and typing in echo $PATH (if it's not, follow directions here: https://opensource.com/article/17/6/set-path-linux)

• (iOS) Install Xcode This may take a while... why not go plogging for an hour?
  ...then launch it at least once so that you can agree to its Terms and Conditions.

• (Android) Install Android Studio and create a virtual device.

  See here for detailed instructions To create a virtual device from the Android welcome screen, click configure>AVD Manager To edit your virtual device selection from somewhere other than the welcome screen, click on the AVD Manager icon in the toolbar on the top right (looks like a phone with a green android alien)
  n.b. Since this app will be deployed on the Google Play Store, when creating a virtual device in the AVD Manager, try to choose a device that has the triangular Google Play Store icon next to it. Download an available system image

• (Optional) Install yarn: https://yarnpkg.com/lang/en/docs/install/

• Install node modules: npm install or yarn install

• Install Expo: npm install expo-cli --global or yarn global add expo-cli npm install expo-cli --global)

• Configure Firestore connection: rename the file firebase/config.js.example to firebase/config.js. Replace the values in firebase/config.js by copying in the new config info (which you can find pinned in the #plogalong Slack channel).

• If you're planning on running this on an Android simulator, you'll have to install the Expo app via the simulated device's Google Play Store. To do so, open Android Studio, open the AVD Manager (icon looks like a phone with a green Android alien in the top right toolbar), click the Play button under "Actions" to launch the simulator. You can then open the Google Play Store on the simulated device. Now search for the Expo app and install it to the simulated device. You may have to launch the simulator from Android Studio each time you want to run the app via Expo.

• In a terminal window, navigate to the root directory of your local clone of this repository. Type expo start to launch Metro bundler and Expo's browser-based developer tools.

• While Expo runs, you can type i to run the app in the iOS simulator. In order to use the Android emulator, launch the Android Virtual Device emulator via Android studio (described above), then type a at the terminal to run the app in the Android emulator. You can also use Expo's local web interface to launch the app.

  If you type 'i' and get an error, run 'sudo xcode-select -s /Applications/Xcode.app'

• To run Plogalong on an iOS device:
  1. Connect both your computer and your iOS device with same Wi-Fi.
  2. In Expo XDE in your browser, select Connection > LAN
  3. Use the Camera App on your iOS (iOS 11+)Device or any QR code reader (iOS 9 & 10) to scan the QR Code.
  4. Your QR code reader / Camera App, will ask if you want to launch the App in Expo Client App, select "Yes"
  5. Plogalong should load accordingly

//TODO: add directions for running on Android Device

Updating Instructions

• After a pull request is merged, it may specify that node_modules will need to be deleted. When this is the case, delete the node_modules folder on your local repo and execute yarn install in your terminal.
  n.b. if you are using npm, execute npm install instead of yarn install

• The time may come when you will have to update Expo on your simulator. To do so on the iOS simulator, execute expo client:install:ios in your terminal. If it doesn't take on the first try, try once more. If you're still stuck after two times, consult an expert.

How to Contribute

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