Explore an offline-first client intake app

[tienyuan]

Goal

To vet the 'offline-first client intake app' idea for collecting participant information electronically. The data will be used with a separate web application for further processing back at the office.

Desired Result

Try this approach. Then write down your thoughts/opinions/notes for the potential framework.

Code/prototypes produced should be used to form your opinions. Demos are nice to have, not required

Examples of what to include:

• "I really liked bleh bleh, but it was hard to blah blah"
• Pros (what was good, reasons to do it, likes)
• Cons (what was hard, reasons to skip it, dislikes)
• Is this possible? 👍/ 👎
• Is this time consuming/super hard? - 👍/ 👎
• Is it worth the effort? 👍/ 👎
• Did this inspire another idea/approach?

Background

Assumptions At a Connect Day event, Gina may have laptops/smartphones, but no internet access because she's under a freeway overpass.

At an event, there can be:

• up to 70 participants??
• up to 2 laptops
• up to 5?? staff/volunteers to type the information while speaking with a participant

Hypothesis JS can run in the browser and store participant data offline. Therefore, Gina can open "client-intake.js" in her browser and save data.

But then what should happen?

• Option A: once online, the offline-app can automatically connect and push data to database.
• Option B: once Gina is at the office, she can manually export data to a file, copy/move the file to a desktop running the main app and manually import data into a database.

Resources

• Jon's earlier spike

  • Files are here: https://hackforla.slack.com/archives/CDWKEBYBB/p1543343142035500
  • Inspired by offline nodejs framework with synch to sql servers: https://strongloop.com/strongblog/node-js-api-offline-sync-replication/

• Hoodie

  • Found by @jimthoburn
  • https://github.com/hoodiehq

Offline db links

• https://dev.to/rdegges/please-stop-using-local-storage-1i04
• https://github.com/localForage/localForage
• https://github.com/jakearchibald/idb
• https://github.com/dfahlander/Dexie.js
• https://hackernoon.com/turtledb-a-javascript-framework-for-building-offline-first-collaborative-web-apps-7183cd787163
• https://www.papaparse.com/ (maybe a flat-file? convert json to a csv)
• https://eligrey.com/demos/FileSaver.js/ which is https://www.npmjs.com/package/file-saver (another flat file link)

The original forms, work-in-progress mockups etc available in in slack.

---

For the sake of our future selves/volunteers, we're trying to document the intent/thoughts/assumptions/decisions that lead up to the code.

So this is an extra wordy issue description 😃

[jimthoburn]

These notes are great, Tien!

Here’s another tool we can consider, to help with making an offline app: https://github.com/hoodiehq

[tienyuan]

Oooh, nice find @jimthoburn

[tienyuan]

We've decided to use Electron and save entries to a csv. The csv will be imported by the main app.