Mobile Application Development II - SSS 2 Note

MOBILE APPLICATION DEVELOPMENT II
Build a Simple Android App

Subject: Digital Technologies
Class: SSS 2
Term: Third Term
Week: 2
Topic: Mobile Application Development II
Duration: 80 Minutes (Double Period)
Materials: Computers with internet access, a web browser, a Google account, and (recommended) an Android phone. Students can work in pairs.

Learning Objectives

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

1. Design a simple mobile application interface.
2. Create a basic Android application using MIT App Inventor.
3. Add simple controls (button, text box, label) and make them work using blocks.
4. Run a simple app on a phone or emulator.
5. Test a simple mobile application and identify and fix basic errors.

1. Introduction

In the previous lesson, we learned that mobile applications are software programs designed to perform specific tasks on mobile devices. We also examined different types of mobile applications, development environments and the basic components of an application.

In this lesson, we move from theory to practice. You will plan, design, build, run and test a real Android app. Beginners do not need to type long programs. With a visual tool such as MIT App Inventor, you build an app by dragging screen items into place and joining colourful blocks that tell the app what to do.

2. Creating Simple Android/iOS Applications

Mobile application development is the process of planning, designing, creating, testing and improving software intended to run on mobile devices or provide mobile services.

Android and iOS are two major mobile operating-system platforms. Applications for these platforms may be developed using different tools.

Platform	Description	Examples of Development Tools
Android	A mobile operating-system platform used by many smartphones and tablets.	Android Studio, Flutter, React Native, MIT App Inventor
iOS	Apple's mobile operating system for supported iPhone and iPad devices.	Xcode, Swift, SwiftUI and suitable cross-platform tools

Our tool for this lesson: MIT App Inventor is a free, beginner-friendly, block-based tool that runs in a web browser. You do not need to install a large program on the computer, and it is ideal for building a first Android app in class.

3. Basic Stages of Creating a Simple Mobile App

A mobile application should be planned before development begins. The following stages provide a simple development process:

1. Identify the problem: Determine what problem the application is expected to solve.
2. Identify the users: Decide who will use the application.
3. Plan the features: List the main functions the application should provide.
4. Design the interface: Plan the screens, buttons, text fields and other controls.
5. Choose a development environment: Select a suitable tool for the platform and project.
6. Create the application: Build the screens and add the required controls and functions.
7. Test the application: Check whether the application works as expected.
8. Correct errors: Fix problems discovered during testing.
9. Improve the application: Make the application easier, safer and more convenient to use.

Figure 1: The nine stages of creating a simple mobile app, grouped into three phases.

4. Basic Interface Design

User interface (UI) refers to the visual parts of an application through which users interact with the application.

A good interface should be simple, clear and easy to understand. The designer should consider the size and position of controls, readability of text and the logical arrangement of information.

Important Elements of a Mobile Interface

Interface Element	Function	Name in App Inventor
Label / Text	Displays information, instructions or titles.	Label
Button	Allows the user to perform an action.	Button
Text field	Allows the user to enter information.	TextBox
Image	Displays pictures or visual information.	Image
Checkbox	Allows a user to select or deselect an option.	CheckBox
List	Displays a collection of items from which a user can choose.	ListView

Figure 2: Common interface elements on a mobile screen.

Principles of Good Interface Design

• Keep the layout simple and organised.
• Use clear and readable text.
• Use familiar controls and symbols where appropriate.
• Arrange related information together.
• Provide clear feedback after important actions.
• Avoid overcrowding the screen with unnecessary elements.
• Consider accessibility and users with different needs.

5. Controls, Events and Functions

Controls such as buttons and text boxes allow users to interact with an application. A control becomes useful when it is connected to instructions that decide what happens next.

Event: Something that happens in an app, such as the user tapping a button.
Function (action): The instructions the app carries out in response to an event.

• Button: performs an action when tapped (for example, Start Quiz opens the quiz).
• Text field: accepts information typed by the user (for example, a student's name).
• List: displays several choices (for example, a list of topics).
• Checkbox: lets the user select an option (for example, topics to revise).

Figure 3: A control starts an event, the event runs a function, and the function changes what the user sees.

6. Getting Started with MIT App Inventor

What You Need

• A computer with internet access and a modern web browser.
• A Google account to sign in. Ask your teacher or a parent which account to use.
• An Android phone with the free MIT AI2 Companion app installed from the official app store (recommended, but optional).
• For the phone connection: the phone and the computer on the same Wi-Fi network. A phone hotspot can also be used.

No phones or Wi-Fi? Students can still build the app on the computer and test it using the emulator or by sharing one teacher's phone. See Section 9 for all the options.

The Two Main Screens

App Inventor has two views. You switch between them using the buttons at the top right of the page.

View	What you do there
Designer	Design how the app looks. Drag buttons, labels and text boxes onto the screen and change their properties (text, colour, size).
Blocks	Decide how the app behaves. Join blocks together to tell the app what to do when the user taps a button or types something.

Figure 4: The Designer view. Drag items from the Palette to the Viewer, then change them in Properties.

Note: App Inventor is updated from time to time, so some buttons or menus may look slightly different from the pictures in this note. The main ideas stay the same.

7. Practical 1: Build the “Hello App”

Goal: Build an app where the user types their name, taps a button, and the app greets them by name.
What you will practise: Label, TextBox, Button, events and the join block.

Part A: Create the Project and Design the Screen

1. Open the App Inventor website (search for MIT App Inventor), click Create Apps! and sign in.
2. Click Start new project. Type the name HelloApp and click OK. Project names use letters, numbers and underscores, with no spaces.
3. You are now in the Designer. In the Palette, under User Interface, drag a Label onto the Viewer. In Properties, change its Text to Enter your name:
4. Drag a TextBox below the label. In Properties, change its Hint to Type here.
5. Drag a Button below the text box. Change its Text to Say Hello.
6. Drag a second Label (it will be named Label2). Delete the text in its Text property so it starts empty. This is where the greeting will appear.
7. Click Screen1 in the Components list and change its Title to Hello App.

Figure 5: The finished Designer screen for the Hello App and the properties to set.

Part B: Make It Work with Blocks

8. Click the Blocks button at the top right. You will see an empty workspace.
9. In the block list on the left, click Button1. Drag out the block when Button1.Click do into the workspace. This block means: when the user taps the button, do the following.
10. Click Label2. Drag the block set Label2.Text to and snap it inside the do slot.
11. Click Text and drag the join block. Snap it to the right of set Label2.Text to.
12. From the Text list, drag an empty text block (a pink block with quote marks) into the first slot of join. Click inside it and type Hello, (with a space after the comma).
13. Click TextBox1, drag the block TextBox1.Text and snap it into the second slot of join.

Figure 6: The finished blocks for the Hello App. Blocks snap together like puzzle pieces.

The program now reads like a sentence: when Button1 is clicked, set the text of Label2 to “Hello, ” joined with whatever is in TextBox1.

Check your work: If a block will not snap, its shape does not fit that slot. Look for yellow warning or red error counters at the bottom-left of the Blocks screen. They point to blocks with empty slots or errors.

8. Practical 2: Build a One-Question Quiz App

Goal: Build an app that asks a question, checks the student's answer and shows Correct or Try again.
What you will practise: Making a decision with an if…then…else block, just like the decision symbol in a flowchart.

Design the Screen

1. Click Projects → Start new project and name it QuizApp.
2. Add a Label and set its Text to What is the capital city of Nigeria?
3. Add a TextBox and set its Hint to Type your answer.
4. Add a Button and set its Text to Submit.
5. Add a second Label (Label2) and clear its Text. This will show the result.

Add the Blocks

6. Switch to Blocks. Drag out when Button1.Click do.
7. Open the Control list and drag an if then block into the do slot.
8. Click the small blue gear on the if block. Drag an else piece into the if inside the pop-up box, so the block has an else part.
9. Open the Logic list and drag the = block into the if slot.
10. Put TextBox1.Text in the left side of the = block. Put a text block containing Abuja on the right side.
11. In then, add set Label2.Text to with a text block that says Correct! Well done.
12. In else, add set Label2.Text to with a text block that says Not correct. Try again.

Figure 7: The if…then…else blocks check the answer and choose which message to show.

Careful: The answer typed by the user must match the text in the block exactly. A spelling difference, an extra space or a different capital letter can make the app say Not correct.

9. Running Your App on a Phone

You can test your app while you build it. There are three common ways to run it.

Figure 8: Three ways to run and test a simple Android app.

Method 1: Phone with the MIT AI2 Companion (Recommended)

1. Install the MIT AI2 Companion app on the Android phone from the official app store.
2. Connect the phone and the computer to the same Wi-Fi network (a phone hotspot works too).
3. In App Inventor, click Connect → AI Companion. A QR code and a short code appear.
4. Open the Companion app on the phone and tap Scan QR code (or type the short code).
5. Your app appears on the phone. Type a name and tap the button to test it. Changes you make on the computer show up on the phone while you work.

Method 2: Emulator

An emulator is a virtual phone shown on the computer screen. It needs extra software to be installed first, so ask your teacher whether it is set up on your school computers. Use Connect → Emulator.

Method 3: Build an APK File

An APK is an installable Android app file. Use Build → Android App (.apk) to create one, then download it or scan the code on the phone. Android may ask for permission to install apps from outside the app store. Only install apps that you or your teacher built, and switch the setting off afterwards.

10. Testing and Debugging

Testing is the process of checking an application to determine whether it works correctly and meets its intended requirements.

Do not assume an app works simply because you built it. Test it by using it the way a real user would.

Things to Check During Testing

• Does the button respond when tapped?
• Can text be entered correctly?
• Does the app show the expected result?
• Does it behave sensibly if the text box is left empty or the answer is wrong?
• Are the labels easy to read and understand?
• Does the app display well on the phone screen?

Common Errors When Building with App Inventor

Problem	Possible Cause	Possible Solution
Button does nothing	The blocks are not inside when Button1.Click, or they belong to a different button.	Make sure every block is snapped into the do slot of the correct event block.
Greeting or result never appears	The set Label.Text block is missing or uses the wrong label.	Check that you set the label that is meant to show the message (Label2).
Quiz always says “Not correct”	The answer does not match exactly (spelling, extra space or capital letter).	Type the answer exactly as written in the block and check the block text for extra spaces.
Companion will not connect	The phone and computer are on different networks, or the code was typed incorrectly.	Join the same Wi-Fi or hotspot and scan the QR code again.
Warning or error counters show numbers	A block has an empty slot or a block is in the wrong place.	Click the counters to find the problem block and fix it.

Debugging

Debugging is the process of finding and correcting errors in a computer program or application.

Testing reveals that a problem exists; debugging helps you find and fix its cause. A simple debugging process is:

1. Identify the problem.
2. Reproduce the problem if possible.
3. Find the part of the app responsible.
4. Correct the problem.
5. Test the app again.

Figure 9: Debugging is a cycle of finding, fixing and testing again.

11. Challenge Activity

When your Hello App and Quiz App work, try one of these challenges. Work alone or in pairs as directed by your teacher.

1. Improve the Quiz App: Change the question and the correct answer. Add a second question on a new screen or below the first.
2. Add Two Numbers app: Add two TextBoxes, a Button and a Label. When the button is tapped, show the sum of the two numbers. Hint: use a Math + block with TextBox1.Text and TextBox2.Text.
3. Make it your own: Change colours, font sizes and button text in the Designer so that the app looks neat and easy to read.
4. Test and record: Write down one error you found while testing and explain how you fixed it.

Safety and privacy: Use sample information such as made-up names and answers. Never put real passwords, bank details or other private information into a classroom app. Only install apps from trusted sources, and only install APK files that you or your teacher built.

12. Summary

Creating a mobile application involves planning its purpose and users, designing its interface, choosing a development environment, adding controls and functions, and testing the finished app. With MIT App Inventor, you design the screen in the Designer and make the app work in the Blocks editor. A button tap is an event; the blocks connected to it are the function that runs. The join block combines text, and the if…then…else block lets an app make a decision. Apps can be tested on a phone with the MIT AI2 Companion, on an emulator, or by building an APK. Testing finds problems, and debugging finds and fixes their causes. A well-designed app should be simple, useful, easy to use and safe.

13. Evaluation Questions

1. What is mobile application development?
2. Name the tool used in this lesson to build an Android app. Why is it good for beginners?
3. State the difference between the Designer and Blocks views.
4. Mention four controls that can be used in a mobile application.
5. What is an event? Give one example from the Hello App.
6. What does the join block do?
7. Which block is used to make an app choose between two actions?
8. State two ways of running an App Inventor app for testing.
9. Differentiate between testing and debugging.

14. Assignment

1. Write the steps you followed to build the Hello App, from creating the project to testing it on a phone or emulator.
2. Draw the Hello App screen and label its Label, TextBox and Button.
3. Plan a simple app for your school (for example, a timetable viewer, a quiz or a greeting app). Give its name, its purpose, its users and four controls it will use.
4. Describe two errors that could occur in your app and how you would fix them.
5. Optional: Build the app you planned in MIT App Inventor and show it in the next lesson.

15. Interactive Revision Quiz

Choose the correct answer for each question, then click Mark Quiz to see your score.

1. Which tool lets students build Android apps by dragging items and joining blocks in a web browser?

A. A word-processing program B. MIT App Inventor C. A paper notebook D. A calculator

2. In App Inventor, which view is used to arrange buttons, labels and text boxes on the screen?

A. Designer B. Blocks C. Emulator D. Battery

3. Which view is used to tell the app what to do when a button is tapped?

A. Palette B. Viewer C. Blocks D. Phone cover

4. What is the purpose of the MIT AI2 Companion app?

A. To replace the phone's operating system B. To make the phone's battery last longer C. To store lesson notes only D. To let you test your app on a phone while you build it

5. What should usually be true for the Companion to connect to the computer?

A. The phone must be switched off B. The phone and the computer are on the same Wi-Fi network C. The computer must have no internet D. The phone must be a brand-new model

6. Which block runs instructions when the user taps a button?

A. set Label2.Text to B. join C. when Button1.Click D. TextBox1.Text

7. In the Hello App, which block combines “Hello, ” with the name typed by the user?

A. join B. if then else C. when Button1.Click D. Label1

8. Which block lets the quiz app choose between “Correct” and “Try again”?

A. join B. A text block C. A label D. if then else

9. A student's button does nothing when tapped. What should they check first?

A. Replace the phone B. Delete the whole project C. Whether the blocks are connected inside a when Button1.Click block D. Whether the classroom has a new door

10. What should students use when testing their classroom apps?

A. Real bank details B. Other students' passwords C. Friends' real phone numbers D. Sample information that is not private