THE IDEA

The idea of having a coffee counter on a website is not new, in fact, we’ve seen a plethora of “trendy” websites that state how many cups of coffee the team has consumed. But how does that number change? Well, generally one of two things happens, either it gets updated manually, or there is a predictive algorithm based on average coffee consumption per day by each team member – and so, the number keeps growing.

At Hubnest, we like to do things proper though, so instead of faking the coffee consumption, we had an idea – create an actual coffee counter button and learn something new in the process. The idea is simple, build a physical button which the team would press every time they make a coffee, system will connect to the server via a custom written API and update the Hubnest website in real-time.

INGREDIENTS

1x
Particle Core Microcontroller with a breadboard, similar to this one: https://store.particle.io/?product=photon-kit

1x
Momentary Push Button

1x
Roll of Wire

1x
LED

PREPARATION

1.  As the first step, we wrote a simple Web API to handle receiving button presses:

Sql.php file is a standard PHP MySQL adapter library, since this is common knowledge please feel free to look up how to write it yourself if you don’t already have one.

2.  After that, we had to decide what kind of microprocessor we wanted to use for the button. At a local maker store we picked up the Particle Core due to its’ built in WiFi and an out of the box breadboard. Although we’ve never worked with Particle products before, this was ideal for rapid prototyping.  We also purchased a green LED, 25ft roll or wires (of which we used 4 inches) and a black momentary push button.

3.  We opted to host the API on our own servers instead of directly on the Particle Core. Although we essentially added a middleman to the process, we found this method to be more reliable than depending on the Core to handle constant web requests from the real-time counter on the site.

THE BUILDING PROCESS

1.  After unboxing the materials, we jumped right into the documentation to give the "Getting Started" examples a try.

2.  After a lot of hardware debugging and reviewing how electric circuits work (we're not in the business of electrical engineering, can you tell?), we finally got something up and running using Particle's Tinker mobile app to control the pins on the chip.

3. Code time! We wrote this script and flashed it onto the Particle Core to send a request to our server that the button was pressed.

4. Voila, in less than 2 hours we were able to make a fully functioning coffee button!

BUILDING THE CASING

THE FINAL PRODUCT

A huge thanks to our intern, Ivan Zhang, for spearheading this project and our lead developer, Schien for helping out!