You are now the owner of a Korean-style yogurt ice cream shop, "Ko-yo". The shop is located in San Francisco and you need to open the shop and start your business. The shop is 20 square meters in size.

The concept of Korean-style yogurt ice cream is that customers can freely add their desired toppings to the yogurt base ice cream. You need to implement a order form to allow customers to select and add toppings freely.

First, let's create an akan app with the project code "koyo". The koyo project is a service that operates all services under your company as the brand "Ko-yo". Now, let's type the following command in the terminal.

Now, you can run the koyo service locally with the following command. Then, you can access the service at http://localhost:4201.

Now, customers want to order the ice cream. The order is simple. You need to select the size of the yogurt base ice cream and check the desired toppings.

In Akan.js, we organize features into "modules" - think of them as complete packages that handle everything related to one thing. An ice cream order module will contain all the code needed to create, display, and manage ice cream orders.

When you create a module, Akan.js automatically generates all the files you need following a consistent pattern. This makes your code organized and easy to understand.

Now, let's create a domain for the ice cream order. The domain name is icecreamOrder, and it stores information about each ice cream order.

This command will ask you which application to add the module to - select "koyo" since that's our ice cream shop app. The module name "icecreamOrder" describes what this module handles.

After running this command, Akan.js creates a complete folder structure with all the files you need. Let's look at what gets created:

Each file has a specific purpose in organizing your ice cream order feature:

Don't worry about understanding every file right now! We'll work through them step by step. The important thing is that Akan.js is based on this organized structure.

Constant file is a file that defines the shape of the object in the domain. It stores the shape of the object in the database and allows the client to query and represent data based on this shape.

The ice cream order can be represented as an object like the above. The IcecreamOrderInput, which is information for creating an order, can create an order by specifying the size and toppings of the ice cream.

Great! Now we have defined what our ice cream order looks like. But how will customers see "size" and "toppings" in their own language? That's where the dictionary comes in next.

To display and describe each data of the object to the user, you need to fill the dictionary file. You can set how to display each field to the user in the dictionary, and multi-language display is supported by default.

The dictionary starts with two important entries that describe your entire module:

These translations make your app user-friendly! For example, when customers visit your ice cream shop website, they'll see "Ice cream Order" as a page title, not the technical "icecreamOrder". The description helps explain what the page is for.

Now customers will see "Size" instead of "size" and "Small/Medium/Large" instead of "50/100/200". Next, let's create the actual form where customers can place their orders.

Now let's create the order form that customers will use. The Template file creates input forms where customers can select ice cream size and toppings.

This code creates two input fields: one for selecting ice cream size (small/medium/large) and another for choosing multiple toppings. The Field.ToggleSelect shows three size options as buttons, while Field.MultiToggleSelect allows customers to pick several toppings at once.

The "st.use.icecreamOrderForm()" gets the current form data, while "st.do.setSizeOnIcecreamOrder" and "st.do.setToppingsOnIcecreamOrder" update the form when customers make selections.

The Unit file shows how each order looks in a list or card view. Think of it as the "receipt" or "order summary" that displays the order information nicely.

This creates a card design for each ice cream order. The card shows the order ID and status with different colors - green for "active", blue for "processing", and red for "served".

The clsx function changes the card's appearance based on the order status, and l() displays the status text in the user's language.

Finally, let's create a page where customers can actually place their ice cream orders. This page connects everything together and makes it accessible through a web URL.

This complete page implementation shows how all the pieces work together! Let's break down what each part does:

Now visit http://localhost:4201/icecreamOrder to see your ice cream ordering system!