Chapter 1: App Development

1. What is an App?
• An App (short for Application) is a software program that helps you perform specific tasks
on your smartphone, tablet, or computer.
• Examples of apps include games, educational tools, social media platforms, productivity
tools, and more.
• Apps are designed to make tasks easier or more fun by offering various functionalities.

2. Defining Android and iOS

Android:
• Android is an operating system (OS) used by many smartphone manufacturers such as
Samsung, Xiaomi, OnePlus, etc.
• Developed by Google, it is the most popular mobile OS in the world.
• Apps on Android devices are usually built using Java or Kotlin programming languages.
• Apps are downloaded from the Google Play Store.
iOS:
• iOS is the operating system for Apple devices like iPhones, iPads, and iPods.
• It is developed by Apple Inc. and is known for its smooth performance and security
features.
• Apps for iOS devices are usually built using Swift or Objective-C programming languages.
• Apps are downloaded from the Apple App Store.

3. Types of Mobile Apps

There are different types of apps based on their platform and functionality:
A. Native Apps:
• Developed for a specific platform (Android or iOS).
• Can use device hardware like the camera, GPS, etc.
• Example: WhatsApp, Instagram.

COMPUTER EDUCATION (CLASS-VII) 1

 B. Web Apps:
• These are accessed through web browsers and don’t need to be downloaded.
• Can run on multiple devices (Android, iOS, Windows, etc.) using internet browsers.
• Example: Google Docs, Facebook (using a browser).

C. Hybrid Apps:
• A combination of native and web apps.
• Built using web technologies like HTML, CSS, and JavaScript, but wrapped in a native
container to run on any platform. Example: Uber, Pinterest.

4. Categories of Apps
Apps can be grouped into different categories
based on their use or purpose:
A. Productivity Apps: Help users to
complete tasks like managing
schedules, emails, and documents.
Example: Microsoft Office, Google Keep,
Evernote.

B. Entertainment Apps: Provide

entertainment content like movies,
music, and games. Example: Netflix,
Spotify, Candy Crush.

COMPUTER EDUCATION (CLASS-VII) 2

 C. Educational Apps: Help students and learners to study various subjects or improve skills.
Example: Duolingo, Khan Academy, Quizlet.

D. Social Media Apps: Enable users to interact with friends, share posts, and chat.
Example: Facebook, Instagram, Snapchat.

E. Utility Apps: Provide tools for daily life like weather forecasts, flashlight, and more.
Example: Google Maps, Weather App, Calculator.

F. Gaming Apps: Provide gaming entertainment.

Example: Subway Surfers, Angry Birds, Clash of Clans.

G. Health & Fitness Apps: Help users track their health, fitness, and wellness.
Example: MyFitnessPal, Nike Training Club, Fitbit.

5. Downloading and Installing an App

To get an app on your phone, you need to follow these steps:
Open the App Store (Google Play or Apple App Store):
Android: Open the Google Play Store.
iOS: Open the Apple App Store.
Search for the App:
Use the search bar to find the app you want.
Download the App:
Press the Download or Install button next to the app you want.
Install the App:
Once downloaded, the app will automatically install on your device.
Open the App:
After installation, tap the app icon to open and start using it.

COMPUTER EDUCATION (CLASS-VII) 3

6. Developing an App
Developing an app involves several important steps, from planning to publishing. Here’s a
simplified guide:
Step 1: Idea and Planning
What will your app do? Identify the purpose of your app (e.g., a calculator, a game, an educational
tool).
Target Audience: Decide who will use your app. Is it for kids, students, or adults?

Step 2: Design the User Interface (UI)

Sketch how the app will look, including the buttons, screens, icons, and layout.
You can use tools like Figma or Adobe XD for designing.
Design a simple interface with easy navigation.

Step 3: Choose a Platform and Tools

For Android: Use Android Studio, a development environment that supports Java and Kotlin.

For iOS: Use Xcode, which supports Swift programming.

No-Code Platforms: If you’re a beginner, tools like MIT App Inventor or Thunkable allow you to
build apps with drag-and-drop blocks without coding.
Step 4: Coding the App
Programming Languages:
Java and Kotlin for Android.
Swift for iOS.
Add functionality to your app, such as responding to button clicks, storing data, or making the app
interactive.

Step 5: Testing
Test your app on different devices to make sure it works properly.
Fix any bugs or issues that appear during testing.
You can use emulators or real devices to test the app.

COMPUTER EDUCATION (CLASS-VII) 4

Step 6: Deployment (Publishing)
Once your app is ready, you can publish it to the app stores.
For Android: Upload the app to the Google Play Store.
For iOS: Upload the app to the Apple App Store.
Make sure your app meets the store’s guidelines before submission.

Key Terms to Remember

App Store: A place where users can download and install apps (Google Play Store for Android,
Apple App Store for iOS).

Platform: The operating system on which an app run (e.g., Android or iOS).

User Interface (UI): The design and layout of the app that users interact with.

User Experience (UX): How the app feels and how easy it is to use.

App Development: The process of creating an app, from planning and coding to testing and
publishing.

COMPUTER EDUCATION (CLASS-VII) 5

7. Creating a Mobile App with MIT App Inventor:
In this guide, we’ll walk through how to create a simple mobile app using MIT App Inventor,
which is an easy-to-use tool for beginners to create Android apps. This app will be fun, interactive,
and something you can try yourself!

Step 1: Open MIT App Inventor

1. Go to the MIT App Inventor website: appinventor.mit.edu.

2. Click on “Create Apps!” to open the designer. You’ll need to sign in with your Google
account.

Step 2: Sign in with Google

1. Choose an account

COMPUTER EDUCATION (CLASS-VII) 6

Step 3: Click continue.

Step 4: Click I Accept the terms of services.

COMPUTER EDUCATION (CLASS-VII) 7

Step 5: Select Student and click Next. Step 6: Select Interface style and click ok.

Step 7: Click continue.

COMPUTER EDUCATION (CLASS-VII) 8

Step 8: Click on start a blank Project.

Step 9: Enter Project Name and click ok.

COMPUTER EDUCATION (CLASS-VII) 9

Step 10: Ready to start your work.

Easy projects you can create using MIT App Inventor

Projeect1: Simple Calculator App in MIT App Inventor

Step 1: Open MIT App Inventor

1. Go to the MIT App Inventor website: appinventor.mit.edu.

2. Click on “Create Apps!” to open the designer. You’ll need to sign in with your Google
account.

Step 2: Designing the Interface

Here, we’ll build the look of the app – where all the buttons and text will go.
1. Add a Label for the result:

• Drag a Label from the “User Interface” section on the left side of the screen.

• Drop it onto the Viewer area.

COMPUTER EDUCATION (CLASS-VII) 10

 • In the Properties panel on the right, change the Text property to “0” (this will be
the starting value).

• Change the FontSize to make it bigger, like 30, so it’s easy to see.

2. Add Buttons for the numbers and operations:

• Drag and drop 10 Buttons onto the screen for the numbers 0 through 9.

• Label them with numbers (e.g., 1, 2, 3, etc.).

• Add 4 more Buttons for the basic operations: + (addition), – (subtraction), *

(multiplication), and / (division).

3. Add a Button for the Equals (=) sign to calculate the result.
• This will trigger the action to perform the math.

4. Add a Button for Clear to reset everything.

Step 3: Writing the Code (Blocks)

Now comes the fun part! You’ll code the app using blocks. Don’t worry – it’s not hard. MIT App
Inventor makes coding easy by using colorful blocks that you can drag and drop. Let’s get started:

1. Setting up Variables:

• First, we need a variable to store the current number or operation.

• Go to the Blocks section (at the top of the screen) and click on
the Variables drawer.

• Create two variables: currentValue (to store the number displayed on the screen)
and operation (to store the current operation, like + or -).

2. When a Number Button is Clicked:

• For each number button (1, 2, 3, etc.), we’ll make the app update the Label text to
show the new number when you click it.

• Click on the Button1 (number 1) in the Blocks section, then drag out the When
Button1.Click block.

• Inside that block, use the set Label.Text to block, and change the text to add the
number “1” to the current label.

3. When an Operation Button is Clicked (e.g., +, -, etc.):

COMPUTER EDUCATION (CLASS-VII) 11

 • When you press a button like “+” or “-“, the app should remember the operation.
So, when the user hits =, it will calculate the result using the saved operation.

• Drag the When ButtonAdd.Click block and set the operation variable to “+”.

4. When the Equals Button is Clicked:

• This is where magic happens! When the equals button is pressed, the app will
perform the calculation.

• Inside this block, you’ll use a series of if-else statements to check what operation
was selected and calculate the result accordingly.

• For example:

• If the operation is “+”, add the current value to the saved number.

• If the operation is “-“, subtract, and so on.

5. Clear Button:
• When you press the Clear button, you want to reset everything back to zero. So,
just set the Label.Text to “0” and reset the operation variable.

Step 4: Putting It All Together (The Blocks Code)

Here’s the basic idea of how the blocks will look:

1. When a number button is clicked: When Button1.Click set Label.Text to Label.Text +

"1"

2. When an operation button is clicked: When ButtonAdd.Click set operation to "+"

3. When Equals button is clicked (This checks the operation and calculates the
result): When ButtonEquals.Click if operation = "+" set currentValue to currentValue +
number set Label.Text to currentValue if operation = "-" set currentValue to currentValue -
number set Label.Text to currentValue

4. Clear Button: When ButtonClear.Click set Label.Text to "0" set operation to ""

Step 5: Testing the App

1. Once you’ve added all the blocks, click the Connect button at the top and choose AI2
Companion to test the app on your phone.

COMPUTER EDUCATION (CLASS-VII) 12

 2. Scan the QR code that appears on the screen with the MIT AI2 Companion app on your
phone.

3. Now, try entering numbers and operations, and see how the app performs the calculations!

COMPUTER EDUCATION (CLASS-VII) 13

Wrapping Up

Congrats, you just created your first MIT App Inventor project – a Simple Calculator!

COMPUTER EDUCATION (CLASS-VII) 14

Project 2: To-Do List App in MIT App Inventor

Hey there! Now that you’ve made a Simple Calculator app, let’s move on to another super fun
and eas

y project: a To-Do List App. This is one of the best MIT App Inventor projects for kids, and it’s
perfect for beginners who want to dive into app development projects for kids. The idea is
simple: you’ll be able to add tasks, mark them as done, and even delete them!

Let’s get started!

Step 1: Open MIT App Inventor

1. Go to the MIT App Inventor website: appinventor.mit.edu.

2. Click on “Create Apps!” and sign in with your Google account.

3. Click Start New Project, and name it something fun like “To-Do List”.

Step 2: Designing the Interface

This is where you make your app look cool and user-friendly. We will add a few elements like
buttons, text boxes, and lists.

1. Add a Label for the Title:

• Drag a Label from the “User Interface” section on the left side of the screen.

• Drop it onto the screen.

• Change the Text in the properties to something like “My To-Do List”.

• You can also increase the Font Size to make the title stand out.
2. Add a Text Box for Task Input:

• Drag a TextBox onto the screen. This is where users will type in their tasks.

• Change the Hint property of the TextBox to something like “Enter a task…” to give
users a hint on what to do.

3. Add a Button to Add Tasks:

• Drag a Button to the screen and label it as “Add Task”.

• This button will be used to add the task typed in the TextBox to the list.

COMPUTER EDUCATION (CLASS-VII) 15

 4. Add a ListView to Display Tasks:

• Drag a ListView onto the screen. This is where the tasks will appear once they’re
added.

• You don’t need to set any text for the ListView yet; it will automatically show the
tasks once we add them.

5. Add a Button to Clear Tasks:

• Drag another Button onto the screen and label it “Clear List”.

• This button will be used to clear all tasks from the list.

Step 3: Writing the Code (Blocks)

Now, let’s move on to the fun part: coding the app! In MIT App Inventor, you don’t write traditional
code; instead, you use blocks that snap together like puzzle pieces. Ready? Let’s go!

1. Create a Variable to Store Tasks:

• In the Blocks section, go to the Variables drawer.

• Create a new variable called taskList. This will store all the tasks that the user adds
to the list.

• Set taskList to an empty list at the start, so we can add tasks to it later.

COMPUTER EDUCATION (CLASS-VII) 16

 2. Add a Task:
• When the user clicks the “Add Task” button, you want to add the task they typed
into the TextBox to the taskList.
• Drag the When ButtonAddTask.Click block from the block’s menu.
• Inside this block, we’ll add the following:
• Get the text from the TextBox using the block TextBox1.Text.
• Add that text to the taskList using the add items to list block.
• Set the ListView‘s Elements property to the taskList so the tasks will
appear.
Here’s how the blocks will look: When ButtonAddTask.Click add TextBox1.Text to taskList set
ListView.Elements to taskList set TextBox1.Text to "" // Clear the text box after adding the task
3. Clear All Tasks:
• When the user clicks the “Clear List” button, you want to clear all the tasks from
the taskList.
• Drag the When ButtonClearList.Click block.
• Inside this block, set the taskList to an empty list using the create empty
list block.
• Also, set the ListView.Elements to the empty list to remove all tasks from the list.
Here’s how the blocks will look: When ButtonClearList.Click set taskList to create empty list set
ListView.Elements to taskList

COMPUTER EDUCATION (CLASS-VII) 17

Step 4: Enhancing the App (Optional)
Now that you have the basics down, let’s add some extra features to make the app even cooler!
1. Mark Tasks as Done:
• You could make each task clickable so the user can mark it as “done” or
“completed”.
• To do this, when the user clicks a task in the ListView, you can change its text style

to show it’s done (e.g., change the text to strikethrough or add a “ ” at the
beginning).
2. Delete Tasks:
• You could also add a Delete button next to each task, so users can remove
individual tasks from the list.

Step 5: Testing the App

1. After you’ve added all the blocks and designed the screen, click the Connect button at the
top of MIT App Inventor.
2. Select AI2 Companion and scan the QR code that appears with the MIT AI2 Companion
app on your phone or tablet.
3. Now, you can test the app! Try adding a task by typing in the TextBox and clicking the
“Add Task” button. You should see the task appear in the ListView. You can also click the
“Clear List” button to delete all tasks.

Wrapping Up

Congratulations, you just created a To-Do List app in MIT App Inventor!
Here’s a recap of what you learned:
• How to design a simple user interface with labels, text boxes, buttons, and lists.
• How to create and use variables to store and manage your tasks.
• How to handle button clicks and update the app dynamically.
• How to clear tasks and add new ones.
You can keep improving the app by adding more features like sorting tasks, setting due dates, or
even saving the list so that it stays when you open the app next time

COMPUTER EDUCATION (CLASS-VII) 18

8. Conclusion
App development is a fun and creative process that involves planning, designing, coding, and
testing. By understanding the basics of Android, iOS, types of apps, and the development process,
students can start their journey into the world of app development. Whether you are making a
simple game or a useful tool, the skills learned here will help you create amazing apps in the future.

COMPUTER EDUCATION (CLASS-VII) 19