ito-org / ito-app

A privacy-first contact tracing app

ito React Native App

Try it out

You can find Android alpha releases on our releases page. Click here to find the latest release. For the app to recognize other devices, make sure to enable Bluetooth.

Architecture

+--------------------------------+
|                                |
|            ito-app             |
|                                |
| +----------------------------+ |     +----------------+
| |                            | |     |                |
| |      react-native-ito      +------>+   api-backend  |
| |          library           | |     |                |
| +----------------------------+ |     +----------------+
+--------------------------------+

• ito-app (this repository): React Native app implementation
• react-native-ito: React Native library, which contains native code for handling bluetooth and network communication with the backend. The library is used by the app as an NPM dependency. The exact version is pinned in package-lock.json.
• api-backend: This is the hosted backend implementation. This is work in progress and will replace the old backend-sqlite implementation, that is currently used by the app.

Development

User flow

Take a look at the user flow on Figma. We have implemented the major part of those screen mockups.

Also try our click dummy for a quick demonstration.

Android

Select "React Native CLI Quickstart" and your OS on Environment Setup React-Native.

Don't forget to install the npm dependencies:

npm install

This will also trigger the postinstall script defined in package.json, which will run:

• jetify to do an AndroidX migration for dependencies
• react-native link to link library dependencies

To start the React Native Metro server use:

npm run start

To build the source and install use:

npm run android

To build an APK, run:

npm run build:android

The APK is generated to android/app/build/outputs/apk/release/app-release.apk

iOS

To start the React Native Metro server use:

npm run start

To build the source and install use:

npm run ios

Run the app with a locally modified library

Check out react-native-ito and execute:

npm link

Then, go to your local checkout of ito-app and execute:

npm link react-native-ito

This will override node_modules/react-native-ito with a symbolic link to your local checkout of react-native-ito. Now your local checkout of the library will appear to be an installed dependency in the node_modules folder of the app and will be recognized as such during build.

Keep in mind, that after modifying library code, you might need to remove the build folders (e.g. android/build) in your react-native-ito checkout. This will force the app project to rebuild the library.

Now you can build and start the app and it will use your locally modified library code:

npm run start

npm run android
npm run ios

Wire the app to a different server

Client/server communication is handled by the library, so you need to locally modify the library code (see previous section).

Check out the backend and run it locally (e.g. using docker-compose).

Find the BASE_URL environment variable in the code of react-native-ito-bluetooth and change it to your local server's url.

Release process

The CI pipeline is implemented using GitHub Actions.

Android

• Build (pull requests against master, master pushes, *-android tag pushes):
  • install the Android SDK
  • build an APK
• Deploy (master pushes, *-android tag pushes):
  • create a GitHub release
  • Upload the APK as release asset

iOS

Not yet implemented

ito-app's Issues

Large screen support

I've installed the app on my Tablat, i know that is not the normal device but i think the design should be work on such big devices, because there are Many phones like the Samsung Galaxy Note xx with large Displays.

Documentation on master must be updated with the new repository names

After updating the repository names, the architecture description in README on master does not match the new repository names. It is confusing to get an overview which repository is responsible for which task/functionality.

[Header] Make help button link to OnboardingHow screen

• We need to pass navigation object to components/Header to be able to navigate there.
• To accomplish that, we need to rename the navigation prop.

Improving the Buildpipline for faster Build

• Build not when Readme or .github will be changed.
• Cache npm

Trigger notification upon at-risk for infection status

The user should get a native notification if they are deemed to be infected.

To do that, move this code from HomeBluetooth screen to App.tsx or somewhere where it makes more sense.

  useEffect(() => {
    function refresh(): void {
      if (NativeModules.ItoBluetooth.isPossiblyInfected() && !hasSeenIDMatch) {
        setIDMatchShow(true);
      }
    }
    const interval = setInterval(refresh, 2500);
    return (): void => clearInterval(interval);
  }, [navigation, hasSeenIDMatch]);

Add Spanish translations

Autostart on startup

Start the app after restarting the device.

Collect metadata for improving

Get the user an option to send anonymized metadata to a server backend (in the alpha and beta version of the app) to improve the bluetooth messurment and some other stuff.

Allow translations based on country, not only on language

Use locales like en_US, de_AT etc.

See https://stackoverflow.com/a/3191729 for a list of possible locales.

Npm package monitoring

There is currently no tooling in the ci pipeline that checks for vulnerabilties in the dependencies. As far as I know there are two available tools out there, snyk.io and npm audit, that can do this for us. Snyk.io seems to support golang as well. I think this could be worth integrating, what do you think?

Links
Comparison: https://www.nearform.com/blog/comparing-npm-audit-with-snyk/
Snyk: https://snyk.io
Npm audit: https://docs.npmjs.com/cli/audit

F-Droid publishing

Inclusion policy:

• https://f-droid.org/en/docs/Inclusion_Policy

Merge request instructions:

• https://gitlab.com/fdroid/fdroiddata/blob/master/CONTRIBUTING.md#merge-requests

Submitting to F-Droid Quick Start Guide:

• https://f-droid.org/en/docs/Submitting_to_F-Droid_Quick_Start_Guide/

Example of an app integration:

• https://gitlab.com/Commit451/LabCoat
• https://gitlab.com/fdroid/fdroiddata/-/blob/master/metadata/com.commit451.gitlab.yml

Crowd-source measurements

Collect and analyze raw data in a testing phase to make risk calculations more precise.

• User activities (walking, shopping, talking)
• Phone location (pockets, out of pockets, in a room)
• RSSI
• Device model
• Percentage of infected users
• Total amount of users

What do you think? Expert opinions are highly appreciated.

[Home] New visualization of close contacts

Automate iOS build

Concept of a build toolchain for Android and iOS

@joernb and I discussed a concept for a build pipeline for the mobile apps which enables us to immediately build development builds on each commit as well as automatically build and publish stable releases to the common app stores.

This would allow one to easily perform developer tests for new features as well as it makes releasing a new version rapidly possible.

1. Using the Git Flow workflow, it is transparent to everyone which branch marks the current development line and which a stable release. A new branch, the develop branch is the main development line. Every commit on this branch triggers the development build process. New feature implementations are always branched from the latest develop. To create a new, stable release, a release branch is created and merged into master. A commit on master triggers the release build and publish process.

2. When the development build process is triggered, the connection strings for the application are set to the server address of the development backend which provides test data and allows testing of connectivity functions by showing debug outputs. Commits on master (these are always tagged with a semantic version number), cause the pipeline to set the connection strings to the production backend.

3. Only when releases are built, the application is properly signed for publishing in the Android and Apple app stores. The keys required for publishing are hosted in a private key repository. Development builds are signed with debug keys.

To achieve this goal, we discussed utilizing fastlane altogether with Github Actions.

We want you to participate in creating the new pipeline and ask for your ideas and comments on how to improve this concept.

Unique Android package id

We need to change the Android package id to a unique id. Right now, it is "com.reactnativeapp". We already discussed this issue and basically agreed on changing it to org.ito-app.

[All] Update existing screens to v2

• See (Figma)[https://www.figma.com/file/fcDmzECUHFCrem9NBrzZSv/Ito-App?node-id=972%3A0]
  • Bottom Menu needs to be added in most screens
  • Pause Popup must be added
  • State (Endangered or not) Popup must be added
  • Colors may need a change

JS tests are failing

See #143 workflow failing at https://github.com/ito-org/ito-app/pull/143/checks?check_run_id=613543541

> [email protected] test /home/runner/work/ito-app/ito-app
> jest

FAIL __tests__/App-test.tsx
  ● Test suite failed to run

    TypeError: Cannot read property 'Direction' of undefined

      at Object.<anonymous> (node_modules/react-native-gesture-handler/Directions.js:3:39)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:2:1)

Cancelling upload is impossible

The uploading callback will always be executed even when the user taps on the Cancel upload button.

ito-app/App/screens/PositiveResult.tsx

Lines 84 to 88 in 462b5f9

	// FIXME: store this timeout and clear it to allow cancelling
	setTimeout(() => {
	ItoBluetooth.publishBeaconUUIDs(sevenDaysAgo, now, setUploadSuccess);
	}, 2000);
	navigation.navigate('Upload');

That timeout should be stored and cleared upon click on the Cancel upload button.

Support Screen

Add a support Screen for report Bugs ore asking questions.

App translation

please add the abblity to translate the app in different language.

[Home] Implement new Home screen mockup

The Home screen/view is currently implemented in App/screens/HomeBluetooth.tsx. This file should implement the new version of our proximity display.

• Implement mockup
  • Pause/play button (#104)
  • #106 New visualization of close contacts
• #102 Stop advertising via Bluetooth upon user choice

See user flow on Figma

Apply patches to released apks

#143 disabled Snyk patches when building apks (as this takes around 7 minutes).
We should add an if condition to those steps in the android workflow so that patches will be applied if the build job is running on a tag, i.e. if the generated apk is to be released.

Incorrect linking

On the Screen "I have typical symptoms" the link of "i have a positive test result" is set to the homescreen...

Back to home dosn't work

On the "Data got Uploaded" page the back to home button doesn't work!

[Mockup] Data uploading screen

[Home] Add popup component showing endangerment status / info

Implementation of the popup component shown in Figma App Flow Green in the Screens Home-3-contact, Home-3-contact-time-up etc.

[Home] Stop advertising via Bluetooth upon user choice

Part of #98.

Ask user to disable battery optimization

We should answer these questions first.

• What does this do effectively on iOS and Android?
• Is it enough to enable semi-regular polling the background?

And if it makes sense we need to create a user flow.

cc @Dionysusnu @jeroenpg

Keystore in repository

The debug-keystore is public, which means that everyone can generate and sign the app

Add German translations

As we have many German team members, I think it would be feasible to add German translations fairly quickly.

1. Copy assets/locales/en.json to assets/locales/de.json.
2. Translate strings
3. Import de.json in i18n.ts.
4. Add de as an available language in i18n.ts.

Enable bluetooth dialog missed

There is no hint for activating bluetooth right now.

Duplicated app releases

Describe the bug
Currently the android-master workflow creates a release for tagged builds. Once iOS automated builds is finished it will create a release for iOS aswell. This would cause two releases, one for android, one for ios respectively. We don't want this behavior do we? I guess we could create a release before the android & ios workflows?

To Reproduce
Steps to reproduce the behavior:

1. Create a tagged build
2. Wait for builds to finish
3. See two new releases in this repo, one for android, one for ios

Expected behavior
I would expect one release with an IPA and APK attached

Developer option is activated in the Release

In the release, developer options are active. This means that everyone can learn about the behaviour of the app.

Is that a truly issue on a alpha version and is it really problemanical for a opensource project?

Missing license

Hi,

There seems to be no license for this code repository.

Icon notification in notification bar

I know that isn't a real issue but there are many different ways to notify if a app is running ore not. I think we should use that one who is not shown up in the notification bar ore setup a switch for hide the icon.

Extract global styles into single file