This project is the mobile app version of Ogcisum made with React Native.

Overview

Ogcisum is a web app and a mobile app for a music and location based experience similar to Pokemon GO. When users are within 100 meters of a pre-defined location, they can play music when there is any.

Getting Started

Prerequisites

1. Computer with MacOS installed.
2. React Native development environment.
3. Haz API local server.

Setting up the development environment

Make sure you have set up React Native development environent in your Mac. If not, follow this documentation.

After setting up the environment, follow these steps:

Step 1: Install the dependencies stated in package.json:

npm install

Step 2: For iOS, install the required pods configured in Podfile:

Attention! if you are using MacOS with Apple Silicone (e.g M1/M2), use this command:

cd ios
sudo arch -arm64 pod install

If you're using MacOS with Intel chip, use this command:

cd ios
pod install

Haz API local server

Since this project is only the front-end part, you have to set up the Haz API back-end app before spinning up the mobile app and try its features.

Follow this documentation to set up the local server.

Running the App

Haz API local server

Before spinning up the web app, make sure to run the Haz API back-end server.

Follow this documentation to run the local server.

Ogcisum iOS App

Step 1: Start Metro:

Navigate to the root project directory. Then, use this command:

npx react-native start

The main dependencies used in this project:

1. React Navigation, for the bottom tabs navigation.
2. react-native-maps, for embedding native maps.
3. @react-native-community/geolocation, for getting the user’s current location.
4. Geolib, to calculate distances between coordinates.
5. React Native WebView, for running the sounds via Tone.js in a webpage.
6. WMP COMP2140, the web for running the sounds via Tone.js in a webpage.
7. React Native Image Picker, for taking & selecting photos from the system’s photo library.
8. react-native-linear-gradient, for making the tab bar gradient without images.

Step 2: Run the app with XCode simulator:

npx react-native run-ios

Features

1. See the pre-defined locations in Map page.
2. Preview samples shared with a location in Now Playing page.
3. Set a profile picture and profile name in Profile page.

Pages

Map page

Map page: When there's no music nearby
Map page: When there's music nearby

• See the pre-defined locations represented by purple circles.
  • Each circle has a radius of 100 meters from a location's coordinate.
• See indicator at the Bottom Tab Bar when there's music to play nearby.

Now Playing page

Now Playing page: When there's no music nearby
Now Playing page: When there's music nearby

• See the location information.
• Play/Stop music shared with the location by clicking the Play button.
• See profile picture and profile name.

Profile page

Profile page: When no photo and name added
Profile page: When a photo and name added

• Add a profile picture by clicking the Add Photo button.
• Change the profile picture by clicking the Change Photo button.
• Set / change the profile name by typing in the Text Input.

Known Minor Issues

No sound when playing music

Solution — Toggle / Un-toggle the Physical Silent button on the left side of the phone in the simulator.

Keyboard does not show up in iOS simulator

Solution — Toggle / Un-toggle the Connect Hardware Keyboard in the I/O > Keyboard setting of the simulator.