1. MobileCoach Avatar MobileCoach
  2. MobileCoach
  3. mobilecoach-documentation

Wiki

Clone wiki

mobilecoach-documentation / Setting-up-the-client

View History

Setting up the client

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-client.git
cd mobilecoach-client

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 ..

Updated