Setting up the mobile app

Requirements

  • Administrator permissions
  • Installed Git

Please follow the React Native CLI Quickstart Guide for your desired development/target OS. If you do that correctly, you're ready to deploy this repository.

Configuration

1. Cloning the repository

git clone https://bitbucket.org/mobilecoach/mobilecoach-mobile-app.git
cd mobilecoach-mobile-app

2. Setting the config file

  • First open the config file (Path: App/Config/AppConfig.js) in an editor.
  • Change the intervention variables to the information of the created or existing intervention.
  • Change the remote URL variables to the host you want to connect.
interventionPattern: '[INTERVENTION-NAME]', // name of the intervention you want to connect
interventionPassword: '[DEEPSTREAM-CLIENT-PASSWORD]', // also in the intervention dashboard
remoteDeepstreamURL: 'wss://[HOSTNAME]/deepstream',
remoteRestURL: 'https://[HOSTNAME]/PMCP/api/v02/',
remoteMediaURL: 'https://[HOSTNAME]/PMCP/files/',

For example:

interventionPattern: 'WORKSHOP',
interventionPassword: 'workshop',
remoteDeepstreamURL: 'wss://workshop-cdhi.ethz.ch/deepstream',
remoteRestURL: 'https://workshop-cdhi.ethz.ch/PMCP/api/v02/',
remoteMediaURL: 'https://workshop-cdhi.ethz.ch/PMCP/files/',

All other variables are explained in this Wiki entry: All client variables explained

3. Setting the FABRIC_API_KEY for Crashlytics

Instruction to get Firebase Crashlytics Key (to be displayed)

  • Open the Android manifest (Path: android/app/src/main/AndroidManifest.xml) in an editor.
  • Set the fabric api key on line 105.
android:value="<REPLACE-WITH-FABRIC-KEY>"
  • Open the Info plist (Path: ios/MobileCoachClient/Info.plist) in an editor.
  • Set the fabric api key on line 37.
<string>FABRIC_API_KEY_HERE</string>

4. Changing the project name and the App identifier.

Important: This needs to be changed if you want to use push notifications and/or publish the app.

First you have to open your mobilecoach-client folder in the terminal. You can simply rename almost all of the needed files.

react-native-rename "[NEW-PROJECT-NAME]" -b [NEW-APP-IDENTIFIER]
watchman watch-del-all

For example:

react-native-rename "WorkshopClient" -b ch.ethz.workshop.test.client
watchman watch-del-all

Additional Todo for Android:
Open the google-services file in (Path: android/app/google-services.json). Edit the package name on line 13.

"package_name": "[NEW-APP-IDENTIFIER]"

For example:

"package_name": "ch.ethz.workshop.test.client"

5. Installing all dependencies

You have to be in the mobilecoach-client folder.

npm install

6. Running the app

Important: A connected smartphone or installed emulator is required.

npx react-native run-android

OR running it for instance on an iPhone 8 Simulator

npx react-native run-ios --simulator="iPhone 8"

7. Troubleshooting

  • Presence of a .git file in the project folders in node_modules would produce an error when executing npm commands. Please remove them as shown below.
cd node_modules/react-native-push-notification
rm -r .git/
cd ..
cd react-native-restart
rm -r .git/
  • Building failed because of "java.io.IOException: Unable to delete directory pathToPackage" Execute the following commands:
cd android
gradlew clean
cd ..
Edit this page