How to Design the Food Selection in a Mobile Application

Table of Contents

Long time no see! Just keep doing it and you’ll reach your goals.

Abstract

So, today we will be discussing about how to design the food selection in a mobile application. In this post, we will explore

• Improve your mindset about developing applications.
• Working on Swift, Sketch.

Let’s do it.

---

What is the purpose of the function?

The main purpose is to provide more utility to customers using the 12bay application. This is of great importance as it helps customers in choosing their dishes during the flight. After several hours of serveying, here is the food selection design:

(source: 12bay.vn - food selection design)

Here are some important things:

• The check box : It is easy for customers to see the dishes that they have chosen.

• On the summary screen: You can quickly and easily view the total number of dishes that have been selected.

---

Let’s start to code

In this function, I have decided to use the TTBaseUIKit framework, which is based on UIKit, to build the UI, and I have used the MVVM architecture. This marks the completion of building the UI within the UIKit framework. In the next post, I will create a new series called ‘Going Deeper into SwiftUI’ to update the TTBaseUIKit framework and build the car selection function using swiftUI.

• TTBaseUIKit: The framework is used to build UI Programmatically.

• MVVM (Model-View-ViewModel) architecture: is an architecture design pattern used in mobile development.

  

  (Source: MVVM Diagram by AppCoda)

Here is FlightSelectFoodViewController codebase, which is build on the BaseUIViewController:

(source: 12bay.vn - source base)

---

Conclusion

Well done! You can download the 12bay application from the App Store and try it out. You can find it using this link: 12Bay. See you in the next post.

Posts in this Series

• How to Design the Food Selection in a Mobile Application