YouBothAgent▾
You — Business rules and flows you own. Read these yourself.
Both — Know the idea; your agent follows the details.
Agent — Conventions and references your agent follows. Look up as needed.
Introduction▾
Tutorials▾
Kiosk for Customers
The number of customers at the store has increased, and the staff is having trouble processing orders. Let's create a kiosk for customers to order ice cream. A kiosk is a simple interface that allows customers to order ice cream.
Add Schema
There is some missing information in the current schema to allow customers to order directly from the kiosk. We need to add serve type and contact information. Let's expand the schema to add these features.
apps/koyo/lib/icecreamOrder/icecreamOrder.constant.ts
Let's understand the new schema additions:
- ServeType: An enum defining how the customer wants their order - for here, take out, or delivery
- phone: Customer's phone number for pickup notifications. isPhoneNumber accepts a Korean mobile number in the form 010-0000-0000, the same shape as the field placeholder. field.hidden stores it and lets server code read it, but every response sends null, because anyone can read an order
- LightIcecreamOrder: Updated to include serveType for display in order lists and dashboards
Next, we need to add dictionary entries for the new fields and enum values:
apps/koyo/lib/icecreamOrder/icecreamOrder.dictionary.ts
Next, let's add serveType and phone selection to the order form template.
apps/koyo/lib/icecreamOrder/IcecreamOrder.Template.tsx
Finally, let's display serveType on the order's Unit card to clearly show whether the customer's order is for here or take out, etc.
apps/koyo/lib/icecreamOrder/IcecreamOrder.Unit.tsx
Kiosk Landing Page
The first thing customers see when they approach the kiosk is the landing page. Think of it like the welcome screen at a fast-food restaurant kiosk - it should be inviting, easy to understand, and guide customers to their first choice: "For Here" or "Take Out".
Let's create the landing page for the kiosk ordering flow:
apps/koyo/page/icecreamOrder.tsx
Let's break down the key features of this landing page:
Link.Lang
Language switcher buttons allow customers to choose their preferred language. This is essential for kiosks in tourist areas or multicultural neighborhoods.
Link with Query Params
The "For Here" and "Take Out" buttons pass serveType as a query parameter to the next page. This pre-fills the order form with the customer's choice.
Visual Design
Large buttons with emojis make the interface touch-friendly. Gradient backgrounds and hover effects give the kiosk a distinct look.
After customers complete their order, they need a confirmation page. Let's create a success page that reassures them:
apps/koyo/page/icecreamOrder/success.tsx
The success page provides important feedback to customers:
- A large checkmark icon gives instant visual confirmation that the order was successful
- Clear instructions tell customers to wait for their order number to be called
- A 'Place New Order' button allows the next customer to start fresh
Order Form Page
The heart of the kiosk is the order form page. This is where customers actually customize their ice cream - choosing size, toppings, and entering their phone number for pickup notifications. Think of this page like the main ordering screen at a bubble tea shop where you select your drink size and add-ons.
The page needs to handle query parameters from the landing page and provide an intuitive form experience:
apps/koyo/page/icecreamOrder/new.tsx
Let's understand the key components of this order form page:
.search()
The page declares the query key it reads with .search("serveType", cnst.ServeType), so .render() receives serveType already typed as the enum's union — a value outside the enum is dropped, the way an absent one is. We use it to pre-fill the order form with the customer's choice from the landing page.
Load.Edit
The Load.Edit component handles form state management, validation, and submission. It connects to the slice for data persistence, and with type="form" it renders the form inline with its own submit button.
onSubmit="/icecreamOrder/success"
Once the order is created, onSubmit moves the customer to the success page. A path string navigates there; a function receives the created order instead.
Now let's style the Template component for the kiosk experience. Each section is wrapped in a card with icons:
apps/koyo/lib/icecreamOrder/IcecreamOrder.Template.tsx
The Template component uses these Field components for kiosk-friendly input:
- Field.ToggleSelect: Large, touch-friendly buttons for selecting a single option (size)
- Field.MultiToggleSelect: Allows selecting multiple options (toppings) with visual feedback
- Field.Phone: Phone number input with formatting and validation. It accepts a Korean mobile number, 010-0000-0000
In the next tutorial, we'll use a Scalar - a value object embedded in a model - to track ice cream stock, so the shop knows when it is about to run out.