How Frontend Engineers Power IoT at a Tea Company: From Machines to Materials

How many steps to make a cup of milk tea?

The company serves four business domains and 18 lines, and the front‑end team supports them by breaking down the drink‑making process into three steps: brewing tea, adding ingredients, and delivering the final product.

Step 1 – Brewing Tea

Key questions include water temperature, steeping time, and quantity for each tea type, as well as how to ensure store staff follow the standards and how to adjust flavors for different regions.

Step 2 – Adding Ingredients

Challenges involve handling frozen or raw materials, determining thawing time, shelf life, optimal tasting period, and ensuring food‑safety compliance while forecasting material demand for peak periods.

Step 3 – Delivering the Cup

Issues focus on reproducing the R&D‑designed flavor in stores and speeding up service.

Classification of Problems

Functional problems ("how to guarantee") require code that runs on store devices.

Configuration problems ("how many", "how long", "when") are handled via backend settings distributed to stores.

Machine – Equipment

Equipment such as tea‑brewing machines standardize processes, reducing human variability and allowing regional recipe adjustments. Front‑end developers build the "gateway" app (running on Android tablets) that parses device data according to a communication protocol and uploads it to the backend.

Typical workflow:

Embedded developers and front‑end teams define a data‑communication protocol for USB/Bluetooth links.

Back‑end developers expose APIs for device data storage and alerts.

Front‑end developers implement the gateway, decode device data, and push it to the back‑end for dashboard display and alarm handling.

The gateway runs on an Android tablet, blending traditional front‑end work with hardware communication skills.

Because stores host many device types, the current solution faces Bluetooth‑connection limits. A temporary fix rotates connections for less critical devices, while a long‑term solution proposes a true edge gateway that aggregates devices, processes data locally, and forwards it securely to the cloud.

Material – Ingredients

Food safety drives the management of ingredient lifecycles: thawing time, preparation time, and optimal tasting period. The "expiration machine" prints stickers with these timestamps and triggers voice reminders before each deadline.

Lifecycle flow:

When a staff member prints a sticker, the material’s lifecycle starts.

Three ordered queues (thawing, preparation, optimal period) are polled every 10 seconds.

When a queue head reaches its trigger time, the machine issues a voice alert.

Future work includes predictive material usage based on store demand, stricter anti‑tampering measures, and UI improvements for clearer reminders.

Reflections

The author notes rapid growth in technical breadth—learning cross‑platform front‑end skills, engaging with hardware, and adopting an engineer mindset that solves complex, interdisciplinary problems.

Overall, the front‑end team has evolved from pure UI work to a pivotal role in the company’s IoT ecosystem, driving consistency, safety, and efficiency across all stores.