L25 — Mobile Applications pt.1

🎯Learning Objectives

Explain what a mobile application is and how it differs from a website
Name the two main mobile platforms and their app stores
List at least five categories of mobile apps with examples
Log in to MIT App Inventor and navigate its two screens (Designer and Blocks)
Build a simple app that shows a message when a button is tapped

📖Theory

1. What Is a Mobile Application?

A mobile application (or just "app") is a program designed specifically to run on a smartphone or tablet. Unlike desktop programs, apps are built for touchscreens, small screens, and constant internet access.

You already use dozens of apps every day:

WhatsApp / Telegram — messaging
Instagram / TikTok — social media
YouTube — video
Google Maps — navigation
Calculator, Clock, Camera — built-in utilities

App vs website: a website opens in a browser and needs an internet connection every time. An app is installed on the device and can often work offline. Apps can also access the camera, microphone, GPS, and contacts — websites usually can't do that.

2. Two Platforms: Android and iOS

Every smartphone runs one of two operating systems:

	Android	iOS
Made by	Google	Apple
Devices	Samsung, Xiaomi, Honor, and most others	iPhone, iPad only
App store	Google Play	App Store
Market share	~72% of smartphones worldwide	~27%
Language apps are written in	Kotlin / Java	Swift

Did you know? Most apps on Google Play are free to download, but may have in-app purchases. Paid apps give the developer money every time someone buys them — which is why popular games are free but sell "coins" inside.

3. Categories of Mobile Apps

Category	Examples
Social media	Instagram, Snapchat, VK
Messaging	WhatsApp, Telegram, Viber
Entertainment	YouTube, Netflix, Spotify
Games	Minecraft, Roblox, Subway Surfers
Education	Duolingo, Khan Academy, Photomath
Utilities	Calculator, Flashlight, QR scanner
Health & Fitness	Google Fit, Step Counter
Navigation	Google Maps, 2GIS
Finance	Mobile banking, Google Pay
Shopping	Wildberries, eBay, Amazon

Most successful apps do one thing well and do it very simply. A calculator doesn't try to also be a calendar.

4. How an App Gets to Your Phone

Code

Developer writes code
        ↓
Builds the app file (.apk for Android / .ipa for iOS)
        ↓
Submits to Google Play / App Store for review
        ↓
User opens the store, searches for the app
        ↓
Taps "Install" — the file is downloaded and installed
        ↓
App icon appears on the home screen

The whole process from coding to publishing takes a few days for a simple app — most of that time is waiting for the store review.

5. What Does an App Have Inside?

Every app, no matter how simple, has the same three parts:

Interface (UI) — the screens, buttons, images, text the user sees and touches.
Logic — what happens when the user taps a button, swipes, or types. This is the algorithm from L24 in action.
Data — information the app saves and reads (settings, your name, high scores, messages).

When we build an app today, we'll design all three:

The UI in the Designer view
The Logic in the Blocks view (like Scratch!)
Data: just one variable stored in memory

6. MIT App Inventor — Apps Without Coding

MIT App Inventor is a free tool from the Massachusetts Institute of Technology. You build apps by snapping together visual blocks — exactly like Scratch. No typing code required.

The result is a real Android app (.apk file) you can install on any Android phone.

To use it:

Go to ai2.appinventor.mit.edu
Sign in with a Google account
Click "Start new project"
That's it — you're in the designer

No Android phone? No problem. App Inventor has a built-in emulator that runs the app in the browser window. You'll use that today.

7. The Two Screens in App Inventor

App Inventor has two modes, switched by tabs at the top:

Designer — where you build the look of the app.

Left panel: components palette (Button, Label, TextBox, Image…)
Center: phone screen preview (drag components onto it)
Right panel: properties of the selected component (text, color, size…)

Blocks — where you write the logic.

Left panel: blocks organized by type (Control, Math, Text, Variables…)
Center: workspace where you snap blocks together — like Scratch

Think of it like this: Designer = draw the interface → Blocks = write the algorithm.

💻Code Examples

Example A — What a simple app looks like in Designer

A "Hello" app has:

A Label that says "Welcome!"
A TextBox where the user types their name
A Button labelled "Greet me"
Another Label below that shows the greeting after the button is tapped

In App Inventor's Designer you'd see a small phone outline with those four elements stacked vertically.

Example B — The logic in Blocks

When the button is tapped:

Read the text from the TextBox
Join "Hello, " + that text + "!"
Set the greeting Label's text to the result

In App Inventor's Blocks view, this looks like:

Code

when [GreetButton] .Click
  set [GreetingLabel] .Text  to
      join  "Hello, "
            [NameBox] .Text
            "!"

This is the same idea as Scratch blocks — snap them together, they run when the event fires.

Example C — Trying the app

After clicking ▶ "Connect → Emulator" in App Inventor, a phone simulator opens. You type your name, tap the button — the greeting appears. It's a real, working app.

✏️Practice Tasks

Task 1Explore App Inventor

EASY — IN CLASS

Open ai2.appinventor.mit.edu and sign in with your Google account
Click "Start new project" — name it MyFirstApp
In the Designer, drag these components onto the phone screen:
- A Label — change its Text property to "What is your name?"
- A TextBox — change Hint to "Type here…"
- A Button — change Text to "Greet me"
- A second Label — leave it blank (we'll fill it from Blocks)
Click the Blocks tab at the top — you'll see an empty workspace
Take a screenshot and send it to the teacher (or show it on screen)

💡 Hint

Components are found in the left palette in the Designer. The categories are User Interface, Layout, Media, etc. Drag from the palette onto the phone outline in the center. If you drop it in the wrong place, drag it to reorder — a blue line shows where it will land.

Task 2Make the greeting work

MEDIUM — IN CLASS

Continue from Task 1. Switch to the Blocks view and build the logic:

In the left panel, click your GreetButton — a block appears: when GreetButton.Click
Drag it to the workspace
From GreetingLabel, drag set GreetingLabel.Text to and snap it inside the "when Click" block
From the Text category, drag the join block — it glues two strings together
Attach "Hello, " as the first piece, NameBox.Text as the second, "!" as the third (click the blue gear icon on Join to add a third socket)
Click Connect → Emulator. Type your name, tap the button — the greeting should appear.

💡 Hint

The join block starts with two sockets. To add a third, click the blue gear ⚙ icon on the join block and drag a third "string" piece into the list on the left side. Then close the gear popup.

Task 3Add a reset button

HARD — HOMEWORK

Add a second button labelled "Clear" to your app. When tapped, it should:

Clear the TextBox (set its Text to "")
Clear the greeting Label (set its Text to "")

Extend the blocks for the Greet button so it also checks: if the TextBox is empty, set the Label to "Please enter your name!" instead of greeting.

Test in the emulator. If it works, export the app: Build → Android App (.apk) and download the file. If you have an Android phone, install it!

💡 Hint

The empty-check uses an if / then / else block from the Control category. The condition is: NameBox.Text = "" — use an equals block from Logic. Put the "Please enter" message in the "then" branch and the real greeting in the "else" branch.

⚠️Common Mistakes

Signing in with a school email that blocks Google services

Some schools restrict Google logins. Use a personal Gmail account. If Google is fully blocked, ask the teacher for the offline App Inventor installer or use code.org/applab as an alternative.

Dragging blocks but not snapping them together

If a block is floating loose in the workspace, it won't run. Blocks must click together like puzzle pieces — you'll hear/see a snap. Loose blocks are greyed out.

Forgetting to connect the TextBox to the right component name

If you renamed your TextBox or Button in the Designer (e.g. changed TextBox1 to NameBox), use that same name when picking blocks. App Inventor generates block drawers for each component by name.

The emulator takes a long time or doesn't open

The emulator needs a moment to start (15–30 seconds). If it shows a loading spinner for more than 2 minutes, try: Connect → Reset Connection, then reconnect. Make sure the browser isn't blocking pop-ups.

🎓Instructor Notes

⚡ How to run this lesson (~80 min)

[5 min] Recap L24. "What was an algorithm?" → pivot: "Today we'll write one and put it inside a real phone app."
[10 min] Theory overview. Keep slides fast — Android vs iOS, categories of apps, three parts of an app (UI / Logic / Data). Ask: "What's the most-used app on your phone?"
[10 min] Live demo App Inventor on the projector. Sign in, create a project, drag 4 components, show the phone outline. Open Blocks — "notice how this looks like Scratch from last lesson."
[10 min] Build the greet app live. Explain each block as you place it. Run in emulator on the projector. Student reaction to seeing it work is the hook.
[30 min] Tasks 1 + 2 in class. Almost everyone finishes Task 2 in 30 minutes. Walk around — the most common issue is the join block needing a third socket.
[10 min] Review + Q&A. Pick 2–3 students to show their working app.
[5 min] Assign homework + preview L26. Task 3 as homework. L26: more components — image, sound, screen switching.

💬 Discussion questions

"What's the difference between an app and a website?"
"If you were going to build an app, what problem would it solve?"
"Why do you think App Inventor uses blocks instead of typed code for beginners?"

🧰 Classroom resources

MIT App Inventor: ai2.appinventor.mit.edu — Google account required
Alternative (no account): code.org/applab
App Inventor offline: appinventor.mit.edu/explore/ai2/windows