Mobile Application Development II – SS2 Digital Technologies Lesson Note (Third Term)

Mobile application development is the process of building apps for phones. A developer uses an IDE (a digital workshop) to design the user interface with views and layouts, writes code in languages such as Kotlin, Java or Swift to make the app respond, and then tests the app and fixes bugs.

Behavioural objectives

By the end of the lesson, students should be able to:

• State what an IDE is and name the IDEs used for Android, iOS and hybrid apps.
• Describe what an emulator does.
• Identify common views and layouts used to design a user interface.
• Name the programming languages used for Android and iOS apps and explain what a click listener does.
• List the steps for creating a simple app.
• Explain the terms bug, debugging and testing.

What tools are used to build a mobile app?

To build a house, you need a hammer and nails. To build an app, you need an IDE (Integrated Development Environment). This is a “digital workshop” where you write your code and see how it looks.

• Android Studio: The official tool for building Android apps.
• Xcode: The official tool for building iPhone (iOS) apps.
• VS Code: A popular tool used for building “Hybrid” apps (apps that work on both).

What is an emulator?

The emulator is one of the most useful parts of the IDE. It is a “virtual phone” that appears on your computer screen, so you can test your app without needing a real physical phone.

How do you design the user interface (UI)?

Before we write the logic, we have to design the UI (User Interface). This is what the user sees and touches. In mobile development, we build this using “Views.”

Views

Think of your phone screen as a blank wall. You “pin” different items onto it:

• TextView: For displaying text (like a headline).
• ImageView: For showing pictures.
• Button: Something the user clicks to make something happen.
• EditText: A box where the user can type in their name or password.

Layouts

Layouts are invisible containers that hold your views in place. For example, a LinearLayout stacks items one after the other (top to bottom), while a ConstraintLayout lets you “anchor” items to different corners of the screen.

How do you make the app work?

Design is only half the work. If you click a button and nothing happens, the app is “dead.” We use code to bring it to life.

• For Android: We usually use Kotlin or Java.
• For iOS: We use Swift.

What is a click listener?

The “Click Listener” is a small piece of code that “listens” for when the user touches a button. When it hears a “click,” it triggers an action, such as opening a new page or showing a “Success” message.

How do you create your first app?

Imagine we are building a “Simple Greet” app. The user types their name, clicks a button, and the app says “Hello!”

1. Start a New Project: Open your IDE and choose an “Empty Activity” template.
2. Draw the UI: Drag a “Plain Text” box (for the name) and a “Button” onto the screen.
3. Give them IDs: Every item needs a name so the code can find it. We might name our button btnSubmit.
4. Write the Logic: We tell the computer: “When btnSubmit is clicked, take the text from the box and show it in a pop-up message.”

What are the main components of an app?

What are testing and debugging?

In coding, mistakes are called bugs.

• Debugging is the process of finding and fixing those mistakes.
• Testing: Always test your app on different screen sizes. An app that looks great on a big tablet might look terrible on a small smartphone.

Teacher’s tip: Do not get frustrated if your app crashes the first time. Even the people who built WhatsApp and TikTok had apps that crashed when they first started.

Evaluation

1. What is an IDE? Name the official IDE for Android apps and the one for iOS apps.
2. What is the use of an emulator?
3. State the job of each of these views: TextView, ImageView, Button and EditText.
4. Which languages are used for Android apps and which for iOS apps?
5. What is a bug, and what is debugging?

Assignment

1. Sketching: On a piece of paper, draw three screens for a “School Library” app. (Screen 1: Login, Screen 2: Book List, Screen 3: Book Details).
2. Logic thinking: If you were building a “Calculator” app, what would be the Input, the Process and the Output?
3. Try it out: If you have access to a computer, open a “Drag and Drop” app builder like MIT App Inventor to see how views are arranged.