Project Rabbit

미국 시카고 안전경로 추천 어플리케이션

The application that recommends a safe route for pedestrian by predicting the riskiness of the roads.

Team ChasingFox


Daye Kim	Juwon Baek	Jihu Yang	Hyun Roh	Heewon Jeong	Bryanna Ruiz
Kyunghee University	Handong Global University	Handong Global University	Kyunghee University	Chungbuk National University	Purdue University

Result of This Project

Video

Application Activation Video

Image

Goal of Rabbit

Team FOX wanted to make the application that can recommend the safe route to the destination. Definition of safe route is ‘The route that has less probability to experience crime’. The Rabbit App is based on an safety route recommendation algorithm that considers the distance and crime occurence rate, as well as factor which shows high association with the crime occurence rate. The boundary of the Rabbit App is limited in Chicago.

Research Problem Statements

Public safety is one of the most significant concerns in the United States since crime rates in the United States are higher than other OECD countries. According to the OECD Better Life Index, the homicide rate (the number of murders per 100,000 inhabitants) of United States is 6, which is 2.6 higher than the average of the OECD countries. Since major map applications, such as Google Map or Apple Map, recommend the route based on the distance from starting point to destination, we, the team Chasing FOX made the application that recommend the route based on distance and safety of the road.

Research Novelty

(1) Not only for the crime data, but also service request and city facility data were used and analyzed to define the road riskiness score.

(2) Road riskiness score is defined based on predicted crime density, and therefore, user can prevent the future crime.

(3) The personal risk perception to the type of crime was considered to define the road riskiness score. This can make application to recommend the personal safety route. It was applied in the direction(or route) recommendation service of the application.

Dataset Collection

1 type of crime data : Crimes_-_2001_to_Present

6 types of city facility data : Fire Station, Library, Police Station, Public School, Support Service Delegate Agency, CTA Bus Stop

10 types of service request data : Abandoned Building, Graffiti Removal, Street Light All Out, Rodent Baiting, Garbage Cart, Shot Spotter Alert, Sanitation code, Complaint, Tree Trim, Tree Debris Removal, and Abandoned Vehicles.

These datasets were collected from Chicago Data Portal.

Download available : https://drive.google.com/drive/folders/1VEhmGzupucOjdKmRzAhPLKAKvzF--_CF?usp=share_link

Tech Stack

Division	Stack
Front-end
Back-end
Code Management
Formatting
DB

Overall Process

Database ERD

Front-end

Xcode: 13.3.1
react-native-cli: 7.0.4
type-script: 6.10.4
react-native: 0.68.2
Home brew: 3.6.1
nvm: 0.39.1
node: 16.10.0
watchman: 2022.09.12
cocoapods: 1.11.3
JDK(Java): 11
ffi

⚙ Front-end manual

First setting

Official Document

Initial setting: must follow
java 17 version should not be installed (11 version should be installed), and environmental variables should be set well (JAVA_HOME)
Must have Android SDK 30. Receive virtual machines with Nexus 5
adb install
m1 mac setting

If the following error occurs during installation

error Error: Failed to install CocoaPods dependencies for iOS project, which is required by this template.
Please try again manually: "cd ./RabbitApp/RabbitFront/ios && pod install".

You have to enter the command below.

cd ./RabbitFront/ios && pod install

cd RabbitFront # Move to Project Folder
npm run android # Android Run Commands
npm run ios # iOS Run Commands

If you write this code, the Metro server will appear. If the server does not pop up and an error message appears, enter the command again while running the emulator. It compiles the source code from the Metro server and sends it to the app. If the Metro server is turned off, open another terminal.

npm start

To protect API address values and Google Maps API key values, you must create a '.env' file in the 'RabbitFront' folder. You should get Google Map API key here Google Map API

# ./RabbitApp/RabbitFront/.env
API_URL='API_URL_VALUE'
DIRECTION_API_URL='DIRECTION_API_URL_VALUE'
GOOGLE_API_URL='GOOGLE_MAP_API_URL_VALUE'

In order to display Google Maps, you must enter GOOGLE MAP API KEY in the file below.

# ./RabbitApp/RabbitFront/android/app/src/main/AndroidManifest.xml
...
android:value="Google Map API Key"
...
# ./RabbitApp/RabbitFront/ios/RabbitFront/AppDelegate.mm
[GMSServices provideAPIKey:@"Google Map API Key"]

Folder & File Structure Overview

├───📄babel.config
├───📄index.js
├───📄App.tsx
├───📄AppInner.tsx
├───📄app.json
├───📄metro.config.js
├───📄tscconfig.json
├───📄package.json
├───📄package-lock.json
├───📄.gitignore
├───📄.env🔐
├───📂.bundle
├───📂.expo
├───📂android
│   ├───📂app
│   │   └───📂src
│   │       ├───📂debug
│   │       └───📂main
│   │           ├───📂java
│   │           │   └───📂com
│   │           │       └───📂rabbitfront
│   │           │           └───📄MainActivity.java
│   │           │           └───📂newarchitecture
│   │           ├───📂jni
│   │           └───📂res
│   └───📂gradle
│       └───📂wrapper
├───📂ios
│   ├───📂build
│   │   └───📂src
│   ├───📂Pods
│   ├───📂RabbitFront
│   ├───📂RabbitFront.xcodeproj
│   ├───📂RabbitFront.xcworkspace
│   ├───📂RabbitFrontTests
│   ├───📄Podfile.lock
│   └───📄Podfile
├───📂src
│   ├───📂assets
│   │   ├───📂dataPage
│   │   ├───📄dataBar.png
│   │   ├───📄direction.png
│   │   ├───📄email.png
│   │   ├───📄foxProfile.png
│   │   ├───📄logo.png
│   │   ├───📄line.png
│   │   ├───📄logoIcon.png
│   │   ├───📄naviCOlor.png
│   │   ├───📄navigation.png
│   │   ├───📄profile.png
│   │   ├───📄riskiness.png
│   │   ├───📄search.png
│   │   ├───📄spectrum.png
│   │   └───📄warning.png
│   ├───📂components
│   │   ├───📄DirectionSheet.tsx
│   │   └───📄SearchSheet.png
│   ├───📂constants
│   │   ├───📄chicagoBondary.json
│   │   └───📄chicagoCrimeBoundary.json
│   ├───📂pages
│   │   ├───📄DataAnalysis.tsx
│   │   ├───📄Direction.tsx
│   │   ├───📄Navi.tsx
│   │   ├───📄NaviPage.tsx
│   │   ├───📄Profile.tsx
│   │   ├───📄ProfileEdit.tsx
│   │   ├───📄ProfilePage.tsx
│   │   ├───📄SignIn.tsx
│   │   └───📄SignUp.tsx
│   ├───📂slices
│   │   ├───📄directionSlice.ts
│   │   ├───📄waypointSlice.ts
│   │   └───📄userSlice.ts
│   └───📂store
│   │   ├───📄index.ts
│   │   └───📄reducer.ts
└───📂__tests__

Folder Structure

android: android native folder
ios: ios native folder
node_modules: node library
babel.config.js: barbell settings
index.js: main file
App.tsx: Default App Components
metro.config.js: metro settings file (use instead of webpack)
tscconfig.json: TypeScript settings
Android/app/src/main/java/com/rabbitfront/MainActivity.java: Android activity to execute react code via js engine + bridge

React Native Folder Structure

src/assets: images, fonts, etc
src/pages: components per page
src/components: Other components
src/constants: polygon data
src/modules: native module
src/store: redux store setting
src/slices: redux slice
types:type definition

After load an application

Reloading with cmd + R
Debug menu with cmd + D
Developer tools available with Debugging with Chrome
Configure Bundler allows you to change the metro server port
Show Perf Monitor lets you measure frames

Back-end

Java: 1.8.0
Tomcat: 9.0
Spring boot: 2.7.3

Ubuntu 20.04.3
Python: 3.8.10
Flask: 2.2.2
Werkzeug 2.2.2
apache2: 2.4.41(Ubuntu)

⚙ Sign-up / Sign-in API manual

Before you run the code, Java 1.8 and IntelliJ are required. And the database is needed. The schema of the database is as follows:

Install Java 8 You can download Java 8 here (https://www.oracle.com/java/technologies/downloads/).
git clone https://github.com/MINJILEE-PURDUE/KSW_2022_Fall_Program.git
Open IntelliJ You can download IntelliJ here (https://www.jetbrains.com/idea/download/#section=mac).
Open your git folder as a new project.
Edit the database configuration file. Enter your database information in the ‘application.properties’ file.
path: RabbitApp/RabbitBack/src/main/resources/application.properties
```
    spring.datasource.url=CHANGE TO YOUR OWN DB URL
    spring.datasource.username=CHANGE TO YOUR USERNAME
    spring.datasource.password=CHANGE TO YOUR PASSWORD
```
Add ‘Run Configuration’. In this process, you have to set the module to ‘Java 1.8’ and main class as ‘com.purdue.project.RabbitBackApplication’.
Run the code.

⚙ Route API manual

You should follow the below instructions.

Install ubuntu, python3, flask, apache2.
Get Google Drive API credentials file.
Download all code files from GitHub(RabbitBackFlask). And download all pickle files from here.
In Ubuntu, install python packages that I wrote below.
Do some apache2 environment settings that I wrote below.
In fox.py, change from original to app.config['MYSQL_HOST'] = 'YOUR_LOCAL_HOST_IP', folder_id = 'YOUR_OWN_GDRIVE_FOLDER_ID'
In rabbit.conf, change from original to ServerName YOUR_LOCAL_HOST_IP
Start apache2, and request the API once. Then you can get the API key token. You need to do this. sudo chmod 777 token_drive_v3.pickle
After that, restart apache2, and request the API anytime!

File Path

  📂/
    └📂etc
      └📂apache2
        └📂sites-available
            └📄rabbit.conf ✅
            └📄000-default.conf
            └...
    └📂var
      └📂www
        └📂rabbit
          └📄fox.py ✅
          └📄way.py ✅
          └📄Google.py ✅
          └📄dataAnalysis.py ✅
          └📄httpd.wsgi ✅
          └📂admin
             └📖2018_ped_raw_data.pkl
             └📖al_riskscore_graph.pkl
             └📖chicago_polygon_ratio.pkl
             └📖crime_weight_info.pkl
             └📖graph_edges.pickle
             └📖r_c_f_ET_0.99996.pkl
             └📖urban_5_dataset.pkl
          └📂userData
             └📖default.pickle
          └📄client_secret.json

To install apache2

sudo apt-get update
sudo apt-get install apache2

To set rabbit.conf file to main conf in '/etc/apache2/sites-available'
```
sudo a2dissite 000-default
sudo a2ensite rabbit
```

To open port 80

iptables -I INPUT 1 -p tcp --dport 80 -j ACCEPT
sudo ufw allow 80/tcp

To run code, install python packages

pip install flask
pip install --upgrade google-api-python-client google-auth-httplib2 google-auth-oauthlib
pip install oauth2client
pip install pandas
pip install numpy
pip install osmnx
pip install networkx
pip install matplotlib==3.1.3
pip install plot
pip install plotly
pip install -U scikit-learn
sudo apt-get install python-dev default-libmysqlclient-dev libssl-dev
pip install flask-mysqldb
pip install shapely
pip install geopandas
pip install Flask-API
pip install pycaret

To get Google Drive API credentials file

How to get credentials file

→ From this, you can get a credentials file. Then rename the file to 'client_secret.json'
→ After you run this code once, you can get the token_drive_v3.pickle file. Then run again to start normally.
For new generated token_drive_v3.pickle file
```
sudo chmod token_drive_v3.pickle 777
```
To (re)start apache2
```
sudo systemctl restart apache2
```

Tutorial

Tutorials are provided for code validation in the 'code/DataAnalysis/tutorial' folder.

The tutorial covers receiving users' risk perception, data analysis, algorithm implementation, and recommending four routes.

An Additional detail to run the code is described in that folder's readme.

YesHyeon / K-SW-Rabbit