rossumai / elis-capture

React Native app for uploading documents to Elis

Rossum Capture (MVP)

Mobile app, that let's you upload your documents to Elis with a snap of your finger. Both iOS and Android supported.

Stack

react, react-native, rxjs, redux, redux-observables, react-router-native, react-native-elements, typescript

Start

yarn android - to run android app (you will need android sdk, or real device connected) yarn ios - to run ios app (you will need the Xcode installed) - in this case pls navigate to /fastlane folder and run fastlane fetch_certificates - see deployment_guide.md for more info) you will be probably prompted to have private key for the certificate installed. The key is stored in ...

elis-capture's Issues

Getting white screen after photo deletion

Steps to reproduce:

1. Take multiple photos
2. Enter the preview mode
3. Delete the last photo
4. Swipe left
5. User is stuck at the white screen (see the pic below)

Expected behavior:
Camera view should be initiated and user should be able to take another photo

[IMPROVEMENT REQUEST - TECHNICAL] - SETUP FASTLANE

App release management could be pain in the ass. There are multiple approaches how to make release management smoother and more reliable - Fastlane is a great option https://fastlane.tools/

[Android]

1. setup build signing for both development and production builds
2. setup build creation for different workflows (development build, Play Store Beta, Play Store Production)

[iOS]

1. manage signing - each type of build requires different signing and different certificates - best practice is to store certificates in GH repo, introduce fastlane mechanism for fetching of the certificates and its regeneration
2. setup build creation for different workflows (development build, Play Store Beta, Play Store Production)

[IMPROVEMENT REQUEST - TECHNICAL] - INTRODUCE TYPESCRIPT

Flow is nice, but Typescript is better in every manner

Create React Native App supports Typescript workflow as well. Any further refactoring will be faster, more reliable and with better developer experience :)

Show bounding box of the document

To produce a clean image of the document, whatever the aspect ratio, it would be nice to have a bounding box finding algorithm. It could overlay the found boundaries on top of the camera view in real time and black out the surroundings. Then we could apply a perspective transformation to produce the best possible scan.

Here is an example for a an established document scanner app (Tiny Scanner)

It will probably require native code though. I'll find out if there is any open source implementation available.

Distorted camera ratio on some Androids

@pasky reported that on his phone (Xiaomi redmi 6), camera is not selecting appropriate ratio, resulting in distorted display of camera. After photo is taken, image is of good ratio. It only looks bad when taking the photo.

Multiple crashes of the camera component [android]

When I delete a photo, the camera won't open again and sometimes expo will crash.
When I click the camera icon to open camera again, expo crashes every time with this error:

Java.lang.NullPointerException: Attempt to invoke interface method 'java.lang.Object java.util.SortedSet.last()' on a null object reference
	at com.google.android.a.b.v(Camera1.java:560)
	at com.google.android.a.b$1.a(Camera1.java:114)
	at com.google.android.a.i.e(PreviewImpl.java:56)
	at com.google.android.a.n$1.onSurfaceTextureAvailable(TextureViewPreview.java:45)
	at android.view.TextureView.getHardwareLayer(TextureView.java:396)
	at android.view.TextureView.draw(TextureView.java:339)
	at android.view.View.updateDisplayListIfDirty(View.java:18254)
	at android.view.View.draw(View.java:19052)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4301)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4085)
	at android.view.View.draw(View.java:19345)
	at android.view.View.updateDisplayListIfDirty(View.java:18254)
	at android.view.View.draw(View.java:19052)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4301)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4085)
	at abi27_0_0.com.facebook.react.ReactRootView.dispatchDraw(ReactRootView.java:210)
	at android.view.View.updateDisplayListIfDirty(View.java:18245)
	at android.view.View.draw(View.java:19052)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4301)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4085)
	at android.view.View.draw(View.java:19345)
	at android.view.View.updateDisplayListIfDirty(View.java:18254)
	at android.view.View.draw(View.java:19052)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4301)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4085)
	at android.view.View.updateDisplayListIfDirty(View.java:18245)
	at android.view.View.draw(View.java:19052)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4301)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4085)
	at android.view.View.updateDisplayListIfDirty(View.java:18245)
	at android.view.View.draw(View.java:19052)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4301)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4085)
	at android.view.View.updateDisplayListIfDirty(View.java:18245)
	at android.view.View.draw(View.java:19052)
	at android.view.ViewGroup.drawChild(ViewGroup.java:4301)
	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4085)
	at android.view.View.draw(View.java:19345)
	at com.android.internal.policy.DecorView.draw(DecorView.java:792)
	at android.view.View.updateDisplayListIfDirty(View.java:18254)
	at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:678)
	at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:684)
	at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:792)
	at android.view.ViewRootImpl.draw(ViewRootImpl.java:3162)
	at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:2962)
	at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2500)
	at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1482)
	at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7122)
	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:983)
	at android.view.Choreographer.doCallbacks(Choreographer.java:795)
	at android.view.Choreographer.doFrame(Choreographer.java:723)
	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:969)
	at android.os.Handler.handleCallback(Handler.java:794)
	at android.os.Handler.dispatchMessage(Handler.java:99)
	at android.os.Looper.loop(Looper.java:176)
	at android.app.ActivityThread.main(ActivityThread.java:6656)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:547)
	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:873)

This happens on real device, Xiaomi Redmi 6

Disable Queuepicker if there is only one queue

on capture screen

Upload indicator is not visible [Android only]

iOS [Release]

This app is currently android only. iOS requires more bureaucracy. It should be dealt with

Bug: Cannot load after opening app from background

Steps to reproduce:

1. Open the Rossum app
2. Open a different app so that Rossum app is in the background
3. Open the Rossum app again from the "Running apps" menu

Actual state:
App does not open, black screen.

Expected state:
App does open.

[IMPROVEMENT REQUEST - TECHNICAL] - CREATE APPLE DEVELOPER ACCOUNT

With the bare workflow comes the need to manage iOS certificates. In order to make iOS release, certificates and app management, we will need Apple Developer Account. The account is paid and it requires some bureaucracy - apply for the account and pay the annual subscription (99 USD per year).

Then create iOS certificates for Development, AdHoc (staging testing) and Appstore (production).
The best practice is to store the certificates in the private GitHub repo and setup some certificate management around it (possibly the best option is Fastlane)

Captured images are too large for Elis

When taking a photo, it's resolution needs to be downgraded and/or file compressed before it's sent to Elis API. With current setting, 15MB limit for documents is often exceeded

Splash screen blurry [android]

Looking like a lower resolution version, upscaled

[IMPROVEMENT REQUEST - TECHNICAL] - INTRODUCE BITRISE

Bitrise is a great option for automating continuous delivery of the mobile apps.
Its more likely for the further development, because its simplifying the process of the fast delivery to the QA engineers and end users.

It could be hooked up with Slack, either for triggering the different type of builds with the Slack command, or having particular Slack channel for the results of the builds.

Upload photos from gallery

Here's some feedback from Balu, that is suggesting this feature. It's as raw as it came. I'm currently discussing visuals with Marek - Rossum's UX designer, so I'll update description of this issue continuesly.

we tested the photo capture quality with a shitty Android phone and the image was really blurry and skewed

But there are apps for similar phones that can deskew the image and enhance the contrast considerably, like Office Lens from Microsoft for example

And they store the "cleaned" images in the gallery, which Elis Capture can use

Another advantage would be that a single user can upload images in bulk on the move from their mobile device after receiving the images from multiple sources (eg: email attachments)

Thirdly, if we can have the ability to get images from the file system of the phone, we can search cloud storage locations as well, right from the phone, instead of doing it from a laptop. Not sure how easy this is from a coding perspective though.

And lastly, maybe most important, if the phone does not have mobile/data coverage at any given point, the user can still take photos and store them in the gallery to upload via Elis Capture later

Resolve security issue of `merge` package

https://github.com/rossumai/elis-capture/network/alert/yarn.lock/merge/open

[IMPROVEMENT REQUEST - FEATURES] - IMPROVE IMAGE CAPTURE

Even thought React Native is not the best option for image processing, some tiny improvement with the image capturing could be done.

1. Improve permission handling - right now only Android is supported, but iOS permissions are more strict, so it would be nice to introduce proper permission handling for both platforms.

2. Support image picking both from Gallery and Camera

3. Introduce some scanning-like package, which will take care about document detection, image cropping, auto-scaling, image ratio correction and so on

4. It would be also nice to distinguish whether user is capturing image for the first time and in that case to show him some hints and tips (which could avoid collecting of the garbage from the users)

[IMPROVEMENT REQUEST - TECHNICAL] - REMOVE EXPO

Despite the benefits of Expo when fast-prototyping the apps, its not usable in real world development. In order to be able to add any advanced functionality and third-party packages, its nice to have bare workflow without Expo.
There are multiple approaches how to achieve bare workflow - Create React Native App is the best fit.

Cannot distinguish queues

Users have multiple workspaces and queues. When queues are named the same (e.g. Incoming invoices), it is not possible to distinguish queues in Elis-capture.

We may need to include workspace name into the queue list.

Workaround is to rename queues to make their names uniqueue.

Enable taking photo with "volume down" button

Obvious stuff
In almost every app that takes photos, it is possible to take photo via pressing the volume down button. It's a minor UX feature, but industry standard.

While on Camera screen, pressing the button should take photo.

Experiment
Let's try to experiment a bit, if it doesn't work UX-wise we will change it later.
Shooting via "volume down" button, does not automatically open the "preview" screen. Instead it behaves like you're taking another page.

[IMPROVEMENT REQUEST - FEATURES] - ADD FIRST TIME USER FLOW

First time user flows are nice and they can attract users when they are downloading the app which is new to them.

Apps should be designed with the proper UX, so they are intuitive, but every intuition has its limits.

Three small, content rich, screens which are shown when user opens the app for the first time, are enough.

Those three screens should guide the user through the app functionality.