New Project: Asset Management PWA

New Project: Asset Management PWA

May 01, 2018

I'm done purchasing stuff we already have on hand

Not frequently, but enough that I am a little grr, I've purchased technology stuff that we already had on-premises. Nothing big, but I feel like it's finally time we implemented an asset management app in the 'ol tech department. Additionally, we'll hopefully be able to have an accurate inventory of tech in classrooms. This post will document my process of developing the app from scratch so that you, the gentle reader, can see one coder's system of application development. The good, bad, and ugly!

Application Criteria

For our app to be effective and not just one more thing, these are the criteria I believe it must meet:

  1. Responsive progressive web application with easy UX
  2. Only require essential information
  3. Allow picture upload
  4. Have a map of each facility with room numbers
  5. Allow bar code scanning from phone
  6. Track quantities and move qty 0 items to an archive
  7. Generate informative reports
  8. Scan items to remove, add, or change

Starting Technology

I will start the app from a template I have for PWAs that uses the following:

  • HTML5 & CSS3 w/SCSS
  • Vanilla JavaScript (ES6/ES2018)
  • eslint
  • VCS Integration (Git/Github)
  • Node.js
  • PWA stuff (manifest.json, service worker, favicons)

Initial Project Layout:

Next Steps: I will start coding the UX first and begin curating an appropriate database system that will alow for the uploads of pictures, Excel files, PDFs, etc. Ideally, it will be standalone and not need a daemon to be running. Stand by for more progress!

Day 2:
I have settled on Sqlite 3 for my database as it's connection-less and can be warehoused directly in the app package.

The other database I evaluated was NeDB, but it is a little too light for my needs. It won't handle binary data, only ascii.

Day 3:
I found a fantastic tutorial/article on capturing an image from a devices camera with a progressive web app HERE.
Additionally, THIS is a great resource to see what device hardware a PWA can access.

UPDATE - DAY 360!
I wanted to circle back around a year later and give a final status update on our inventory app. In short, it works great. It does have some…. issues, but they are minor and I presume that the PWA ecosystem will only improve.

Issues:

  • PWA performance vs. vanilla web app is a problem for some reason. Still testing solutions.
  • Something weird is happing with duplicated results after using Quagga.
  • Quagga in conjunction with the phone cameras don't work all that great as barcode scanners. They DO work, but lots of focusing issues.
  • Quagga hasn't been updated since 2017 which is slightly worrying.

Anyhoo, here's our code and links to what I used in it….