Driver's Logbook

React Native App

Hynek Zemanec

January 31, 2023

Agenda

Background
Tech Stack
Architecture
Demo

What is on the menu today?

kick-off with problem
tech I did with
structuring of the app
dedicate most time to demo

Ask Anything

Background

Imagine you are ... Disruptive revolutionary idea for an app ...

To get the widest reach ...

Android apps are powered by Java and more recently Kotlin.

iOS apps are written Objective C and more recently Swift.

different worlds.

Unless huge capital or genious employees that you plan to burn out, this is a big problem.

XCode

need at least 2 different IDEs.

For iOS you need Mac OS to compile.

So what now?

getting more and more expensive

management nightmares to synchronize 2 teams

Should we just throw our hands in the air and wave them like we just don't care?

Imagine

app for ios, Android and web from a single codebase

no need to have 2 different teams

no need to synchronize them and other

it works : facebook, instagram, whatsapp

Tweet

don't take my word for it

Tech Stack

What tech did I use?

Expo SDK logo

difficult to use bare-bones react native

Typescript

React Paper

material design implementation

Styled Components

styles easier to manage

Jest

Jest

unit testing

Async Storage

Async Storage

abstraction for whatever database

React navigation

React Navigation

routing among individual screens

Microsoft Azure Computer Vision

Azure Computer Vision

Optical character recognition -> recognizing text from images

Microsoft Azure Blob Storage

Azure Blob Storage

storing captured images

Architecture

Deployment Diagram

high-level

expo go = sand box

data locally for performance

Layered Architecture

structure guided by layered...

presentation: screens (pages in web app)
application : components used in screens, affect global states domain layer
domain: business logic, global states a.k.a. Contexts
persistance: async storage abstracts database methods

Sequence Diagram

core feature

let me translate it for you

launch app
tap on new trip button
prompt to take a picture ODOMETER
image is cropped and compressed
sent for OCR to Azure
also stored in Azure Blob Storage PROOF
results from OCR
user chooses correct result

the same for the reverse

i.e. ending trip

screenshot

in the interest of time

Resources

Code
Report
zemanech@gmail.com

screen report example

many topics we have not discussed:

list of features
testing
code quality

Demo

App Demo

Driver's Logbook React Native App Hynek Zemanec January 31, 2023