That's why I feel proud to have created what I did in such a short time frame. A working web application that scans barcodes, talks to the grocery chain's non-public API, adds products to a list, calculates the total and factors in sales tax.
Let me back up a few steps to a couple of days ago. My wife, Kaitlynn, and I are having dinner while our kids play and she drops a real first-world problem on me: "I hate going to HEB (our local grocery store) because I can never tell what our total will be until I'm at the checkout. By then I may decide something in my basket isn't worth it." I grin, "oh, that's terrible." She laughs and continues, "but if I use the app to order, I feel cheated because we end up focusing on the price and eating the same food over and over. I just miss out on the experience to see new foods that spark fresh meal ideas if I'm not there."
I'll admit, I have a personal love for web APIs, having built several, myself. I begin to think of solutions. "I'm sure there's an app for what you want", I say. I look it up, and there is, but it's limited to locations that are nowhere near ours. Even if it's a first-world problem, I like to problem-solve, and my wife is a fantastic homemaker. If I can make her work even a little bit easier with what I do, I'm hooked.
I check out the HEB app and sure enough: they have barcode scanning. I look up a barcode and try it run it through HEB's web site search - no dice, UPC codes don't return results. But I know there is an endpoint out there serving up product results for UPC codes. But how do I find out where it is?
I remember something my father-in-law always talked about: WiFi honeypots. With the right software you can view network traffic. So, I hatched a plan. I would monitor my home network traffic while using the app and try to catch the outgoing API call.
After awhile I finally settled on the simplest solution: an iOS app called Thor. I started the network sniffer, opened the app and scanned. I crossed my fingers and began scrolling through the network logs hoping I would strike gold.
Bingo! I had an endpoint, and more importantly, I had an api key. This was starting to look like a real possibility now.
Now all I had to do was find a way to use a device's camera to convert a barcode and pass it to the API. I had been avoiding this part of the project as much as possible because I knew the limitations of my knowledge well enough to know barcode scanning was more advanced than I could handle right now.
Luckily, there are some really solid JS frameworks out there that handle this very thing. After some digging I found Quagga JS. I had a little bit of trouble getting the configuration right, mainly because the examples they provided didn't 100% match the source code they used, but eventually I got it working.
valet secure <folder> and done. I was running https protocol. It was just that easy.
In less than 2 full days I had a working beta version of the web app which promised to cure my wife's shopping woes. See for yourself. Click the image below to watch it in action.
Thanks for taking the time to share in my story. If you're a developer, I hope this inspires you to go out and make something great.
- Thor - iOS network sniffer app
- Tailwind CSS - css framework for ui development
- Font Awesome - icons
- Quagga JS - camera access and barcode scanning
- Valet - local web server w/ ssl support
- HEB - for their kind understanding that I borrowed their api 😅
HEB, if you're reading this, I'm open for contract web development work, I'm great with APIs 😉
I have several free open source packages available for download on my Github profile. Check them out and see if any of them can save you time in your next project!