WalkSafe

Mobile app on Android and iOS that provides the user crime density heatmap, real time crime updates using SpotCrime API, and many more safety features.

Table of Contents

1. Team
2. Demo
3. Screenshots
   1. iOS Screenshots
   2. Android Screenshots
4. Initial Setup
   1. iOS Setup
   2. Android Setup
5. Requirements
6. Development
   1. Installing Devices
   2. Installing Dependencies
   3. Roadmap
7. WalkSafe Server
8. Contributing

Team

• Product Owner: Fredy-Edwin Esse
• Scrum Master: Rick Gallegos
• Development Team Members: Sonrisa Chen and Brian Kim

Demo

View a video of WalkSafe in action here

Screenshots

iOS Screenshots

Android Screenshots

Landing page

Heat Map

Recent Crimes

App Drawer

Initial Setup

1. Fork and clone the repo

Environment Variables WalkSafe requires a Mapbox Access Token to use the Mapbox API on the frontend. We have used the .env package, which allows environment variables to be set easily with the .env file in the root directory of the project. An example of the necessary variables for WalkSafe been provided here in this repo.

Backend server and Local Host A fair warning when entering in the environmental variables for HOST, PORT, FACEBOOK_URL, and GOOGLE_URL. These variables should connect to your backend server but emulated Android devices on Android Studio and iOS devices on Xcode run their own local host so setting these environmental variables to route to 127.0.0.1 will have requests that never reach their destination. Use the appropriate IP address to connect to your WalkSafe Server.

NOTE Download Xcode and/or Android Studio depending on what platform you want to develop on.

iOS Setup

2. Download and install Xcode
3. [INSTRUCTIONS FOR XCODE HERE]
4. Install dependencies from the root of the repo by running

npm install

5. Link dependencies to iOS code by running

react-native link

NOTE If this does not work go to the npm module website for each dependency and follow the iOS instructions for manually linking.

6. Start WalkSafe Server
7. Start WalkSafe by running:

react-native run-ios

NOTE Building and compiling the React Native JavaScript code into Objective C will initially take a couple of minutes.

NOTE It is important to not have the ios folder nor any of its contents open in your text editor as this may cause the build to fail.

NOTE [CHANGE ME!!!!!] After making changes in JavaScript code in your text editor double tap R to reload WalkSafe and have it reflect your new changes! Push Ctrl + M on the screen to open up the menu to enable remote debugging through Chrome. While debugging it is important to have that Chrome tab in the foreground as it will use up a lot of your computer's resources otherwise.

Android Setup

2. Download and install Android Studio
3. Create a WalkSafe project in Android Studio
4. Click Tools on the toolbar
5. Click Android
6. Click AVD Manager
7. Create a virtual device
8. In Android Virtual Device Manager launch virtual device by double clicking on it
9. Install dependencies from the root of the repo by running

npm install

10. Link dependencies to Android code by running

react-native link

NOTE If this does not work go to the npm module website for each dependency and follow the Android instructions for manually linking.

11. Start WalkSafe Server
12. Start WalkSafe by running:

react-native run-android

NOTE Building and compiling the React Native JavaScript code into Java will initially take a couple of minutes.

NOTE It is important to not have the android folder nor any of its contents open in your text editor as this may cause the build to fail.

NOTE After making changes in JavaScript code in your text editor double tap R to reload WalkSafe and have it reflect your new changes! Push Ctrl + M on the screen to open up the menu to enable remote debugging through Chrome. While debugging it is important to have that Chrome tab in the foreground as it will use up a lot of your computer's resources otherwise.

Requirements

• Node 0.10.x
• React Native 0.47.0
• WalkSafe Server
• Xcode
• Android Studio

Development

Installing Devices

• Install Xcode and/or Android Studio to run WalkSafe
• Download, install and run Xcode
• Download, install and run Android Studio

Installing Dependencies

From within the root directory:

npm install
react-native link

NOTE If this does not work go to the npm module website for each dependency and follow the Android and/or iOS instructions for manually linking.

Roadmap

View the project roadmap here

WalkSafe Server Repo

View the WalkSafe server repo here

Contributing

See CONTRIBUTING.md for contribution guidelines.