Mobile Application Development II SS2 Digital Technologies Lesson Note

The Tools of the Trade

To build a house, you need a hammer and nails. To build an app, you need an IDE (Integrated Development Environment). This is just a fancy name for 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).

The Emulator: This is one of the coolest 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.

Designing the “Face” of your App (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.”

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: These 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.

Making the App “Work” (The Logic)

Design is only half the battle. 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.

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

Step-by-Step: Creating your First App

Let’s 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.”

Summary Table: App Components

Testing and Debugging

In the world of 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: Don’t 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!

Practical 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. Exploration: If you have access to a computer, try to open a “Drag and Drop” app builder like MIT App Inventor to see how views are arranged.