Skip to content

Latest commit

 

History

History
102 lines (71 loc) · 4.7 KB

README.md

File metadata and controls

102 lines (71 loc) · 4.7 KB
Raw

Building Mobile App

The mobile application is built using React Native and will run on either iOS or Android.The purpose of the mobile app is to record real time incidents to and to submit this data to the Fair Change Incident directory.

Learning objectives

In this tutorial, you will:

  • Learn how to stand up a React Native Mobile
  • Connect the back-end application and the front-end application to the mobile app
  • Test and run the application

Prerequisites

To complete the steps in this tutorial you need to complete all the steps to get the back-end application running as well as the front end application running

You will also need to install Expo

npm install expo-cli --global

To run this application on an iOS simulator make sure you have Xcode installed on your mac

Estimated Time

This tutorial will take you about 30 minutes to complete.

Steps

  • If you are running locally - go to the backend folder and run the backend application with npm run dev Your app should be running at http://localhost:3000/

    • See these steps to learn how to run your back-end locally

  • If you are running your backend application on the cloud make sure you take a note of the url that your app is running on. For example, [(name from manifest file).mybluemix.net](https://(name from manifest file).mybluemix.net/).

    • See these steps to learn how to run your back-end on the cloud.
  1. Once you have your app running locally or on the cloud go to /mobile/screens/incident.tsx
  • Change line 106 to include the local url or the cloud url

  • Change line 125 to also include the local url or the cloud url

  1. Go to the mobile folder and make sure you install Expo
npm install expo-cli --global
yarn add expo
  1. Run Expo by
expo start

You will see the following screen open.

image

You can now run the application using an iOS emulator or by installing the Expo app on your mobile device and simply scanning the QR code.

Test your deployment

  1. Start the app on your mobile device (Note the camera will not work in some emulation packages).
  2. Hit the "in a situation" or "observing a situation" button.

image

  1. Hit the "start video capture" button.

image

  1. Hit the "stop video capture" button and then "Submit"

image

  1. View the map and scroll to your location. You should see a new pin on the map. Click on the pin to view the incident details.

image

The map also features search capabilities. We uploaded some sample incidents in order to show how clusters of incidents could be shown on the map for each country / state.

image

Videos

The videos currently get stored in the COS bucket, one enhancement being worked on is to view the video within the website (see screen shot below). It is possible however to download the object from COS (change the file to mp4) and then view the video as proof it was uploaded to the back-end.

image