An IO Hack Project for team ANTS (team #8)

As our project includes both a front-end application and a back-end server, running instructions will vary depending on which you want to run. The front-end requires the back-end to function; however, we are running a server with the back-end code running. This means the front end can be run without needing to run the back end on your computer. If you wish to run the backend, you need an API key and database authentication. Please let us know if you would like these resources. This is NOT necessary unless you want to run the server yourself, as we have our own server running.

You can run the client yourself as well, but once again, this is NOT necessary as we are hosting the app on a webpage and have created two Android APKs for your use.

Our project has three forms:

1. A webpage hosting the client. If you allow location access, the app will use your location. If you deny access, it will use a set location as a demo.
2. An Android APK with a set location. This is used to demonstrate the features of the app. (sparse-fake-location.apk)
3. An Android APK that looks at user location. Note that you likely will not get many results with this app: this is because the range that it searches is set low so that it does not use up all of our free API key usage. (sparse.apk)

To view, download one of our Android APKs or visit our webpage.

If you would like to run either the server or client yourself, follow these instructions:

To get started:

To set up frontend requirements:

cd client
npm run init

Then to run the project npm start To build on cordova

cordova platform add android
cordova build android

To build and host

npm run build
npm run serve

(you need the npm package serve)

To set up backend requirements:

cd server
pip3 install websockets
pip3 install firebase_admin
pip3 install --upgrade git+https://github.com/m-wrzr/populartimes

To run the backend run: python3 main.py

Technology

Our project utilizes many different technologies, including:

• React JavaScript libraries to create a simple, yet effective, web app. https://reactjs.org/
• Cordova to package a web app into an android APK. https://cordova.apache.org/
• Google Maps Places API to get data on nearby locations and their popularity. https://developers.google.com/places/web-service/intro
• Popular times API, a python extension to Places API. https://github.com/m-wrzr/populartimes
• Cloud Firebase, a cloud based database, to store user ratings and display them to clients. https://firebase.google.com/
• Websockets to allow the client and server to communicate. https://pypi.org/project/websockets/

Code Structure

Sparse operates with both a front end and back end.

Inside the "client" folder you will find our front end application. This consists of the React project that creates our app. The front end communicates with the server and displays the information it recieves to the user. Several files are involved in the front end. Most are located in client/src

Inside the "server" folder you will find the back end. This is a python file that runs on our server. This file is designed to communicate with the Firebase DB and the Popular times API. When it recieves a request from the client, it will send the required data. The backend file is "main.py". This file will not run successfully without an API key and database authentication.

Note

Since we used React to generate framework for our webapp and cordova to package our app into android, some files have been autogenerated by React, Cordova, or NPM and thus are not written by us.

In client/public, index.html, manifest.json

In client/scripts, prebuild.js

In client/src, serviceWorker.js and setupTests.js

In client, config.xml, package-lock.json, package.json

Created By

Ben Heard, Ben Shi, Cole Dewis, Jacob Guglielmin and Jerry Zhou