App Development ICSE Class 8: How Apps Work, Types of Apps and Building a Simple App

What App Development is about

Weightage: CISCE publishes no question paper, marking scheme or chapter weightage for Class VIII Computer Studies: your school sets and marks the exam. App Development sits in the Theme: App Development theme of the CISCE Curriculum for Upper Primary Classes (VI-VIII).Source: CISCE Curriculum for Upper Primary Classes (VI-VIII), RDCD 2016

Key concepts

What an app is, and how it works

Every app has three parts working together:

• User interface (front end): what you see and touch: screens, buttons, text boxes, images.
• Logic (program): the instructions that decide what happens when you tap, type or swipe. Apps are event-driven: they wait for an event (a tap, a message arriving, a timer) and then run the code for it.
• Data: information the app stores or uses, kept on the device (photos, settings) or on a server in the cloud (your messages, your bank balance).

How an online app works (request and response):
1. You tap a button, such as 'Check weather'.
2. The app sends a request over the internet to a server.
3. The server finds the data and sends back a response.
4. The app shows the result on the screen.

Getting an app: mobile apps are installed from an app store (such as Google Play or the Apple App Store). On installation, the app may ask for permissions (camera, location, contacts); give only the permissions an app really needs.

App versus program: every app is a program, but the word 'app' usually means a focused, easy-to-use program for one task.

Worked example

Explain what happens when you search for a train's running status in a travel app.

Try it first, then show the solutionSolution

1. Typing the train number and tapping Search is an event; the app's logic sends a request over the internet to the railway data server.
2. The server sends back the current status (a response), and the app displays it on its user interface.

Answer: Event → request to server → response → display.

Uses of common apps

Kind of app	What it does	Everyday use
Communication	messages, voice and video calls, email	talking to family, class groups
Navigation and maps	uses GPS to show location and routes	finding the way, live traffic
Payments and banking	transfers money, pays bills by UPI or cards	paying at a shop by scanning a QR code
Education	lessons, practice quizzes, dictionaries	revising for tests
Health and fitness	counts steps, reminds about medicines, books doctor visits	tracking daily exercise
Shopping and food delivery	browse, order and track deliveries	ordering groceries
Travel	tickets, hotel and cab booking	booking a train ticket
Entertainment	music, videos, games	relaxing
Utilities	calculator, camera, weather, torch, notes	daily tasks
Government services	documents, records and services on the phone	keeping certificates digitally

Using apps safely:

• Download only from official app stores.
• Check permissions; a torch app does not need your contacts.
• Use strong passwords or PINs, especially for payment apps; never share OTPs.
• Limit screen time.

Worked example

Name the kind of app and one device feature it uses: (i) showing the fastest route to school (ii) paying a shopkeeper by scanning a code.

Try it first, then show the solutionSolution

1. (i) Navigation app; uses GPS (location).
2. (ii) Payment app; uses the camera to scan the QR code.

Answer: (i) Navigation, GPS (ii) Payment, camera

Types of apps: web (online) and mobile

Web (online) apps run inside a web browser and are opened by visiting a website address. Nothing is installed on the device.

• Examples: webmail opened in a browser, online document editors, online maps in a browser.

Mobile apps are installed on a phone or tablet from an app store and run directly on the device.

• Examples: a camera app, a calculator app, a messaging app installed on a phone.

	Web (online) app	Mobile app
Where it runs	in a browser	directly on the device
Installation	not needed	downloaded and installed from an app store
Internet	needed	many work offline (fully or partly)
Device features (camera, GPS, sensors)	limited access	full access (with permission)
Updates	done on the server; users always get the latest version	user downloads updates
Works on	any device with a browser	the platform it was built for (Android or iOS)
Storage used on device	very little	uses device storage

Many services offer both: the same messaging or shopping service has a web app and a mobile app. A hybrid app is built with web technology but installed like a mobile app.

Worked example

A student wants to edit a document on a school computer where she cannot install software. Which type of app should she use, and why?

Try it first, then show the solutionSolution

1. A web app runs in the browser and needs no installation.
2. She can open it with an internet connection and log in.

Answer: A web (online) app, because it needs no installation.

Steps to develop an app

1. Idea and planning: decide what problem the app solves and who will use it. Write the inputs, processing and outputs (like an algorithm).
2. Design the user interface: sketch the screens: which buttons, labels, text boxes and images, and where.
3. Program the logic: write what happens for each event (for example, 'when the Add button is clicked').
4. Test: run the app with different inputs, including wrong ones (blank boxes, letters instead of numbers), and fix errors (debugging).
5. Build and share (publish): create the installable file or share a link; collect feedback and update the app.

These steps match the problem-solving steps you learnt for algorithms: understand, plan, write, test.

Worked example

Put in order: test with wrong inputs; sketch the screen; decide the app's purpose; share the app; write the button's event code.

Try it first, then show the solutionSolution

1. Decide the purpose → sketch the screen → write the button's event code.
2. → test with wrong inputs → share the app.

Answer: Purpose, sketch, code, test, share

Building a simple app in MIT App Inventor

MIT App Inventor is free and runs in a web browser. You build Android apps by arranging components and snapping together blocks of code, like puzzle pieces, so no typing of code is needed.

It has two main parts:

• Designer: where you build the screen. The Palette lists components; drag them into the Viewer; change their Properties (text, colour, size) on the right. Useful components: Button, Label (shows text), TextBox (user types in it), Image, HorizontalArrangement (places items side by side).
• Blocks editor: where you program the logic using event blocks (such as when Button1.Click do) and other blocks for maths, text and setting properties.

Example app: Adder (adds two numbers)

• Designer: TextBox1 (hint 'First number'), TextBox2 (hint 'Second number'), Button1 (text 'Add'), Label1 (for the answer). Set the TextBoxes' NumbersOnly property to true.
• Blocks:

when Button1.Click do
    set Label1.Text to ( TextBox1.Text + TextBox2.Text )

• Test: 12 and 30 → 42; 2.5 and 4.25 → 6.75.

Testing and sharing: connect a phone using the AI2 Companion app (scan the QR code) or use the emulator; later choose Build → Android App (.apk) to make an installable file.

Worked example

In the Adder app, which component (i) the user types numbers into (ii) shows the result (iii) starts the calculation? Which editor holds the 'when Button1.Click' block?

Try it first, then show the solutionSolution

1. (i) TextBox (ii) Label (iii) Button.
2. Event blocks are in the Blocks editor.

Answer: TextBox, Label, Button; Blocks editor

Events, properties and a decision in an app

App logic uses the same ideas as programs:

• Event: something that happens, such as Button1.Click, Screen1.Initialize (when the app opens) or TextBox1.GotFocus.
• Property: a feature of a component that can be read or changed, such as Label1.Text, Button1.BackgroundColor, Image1.Visible.
• Decision: the if-then-else block chooses what to do.

Example: a BMI checker (body mass index = weight in kg ÷ (height in m)²)

when ButtonCheck.Click do
    set global bmi to ( TextWeight.Text / ( TextHeight.Text × TextHeight.Text ) )
    if global bmi < 18.5
        then set LabelResult.Text to "Underweight"
    else if global bmi < 25
        then set LabelResult.Text to "Normal"
    else
        set LabelResult.Text to "Overweight"

Test: weight 45 kg, height 1.5 m → 45 ÷ 2.25 = 20 → Normal.

Good design tips: large, clearly labelled buttons; readable colours; hints in text boxes; a message when input is blank (for example, 'Please enter both numbers').

Worked example

In the BMI app, what is shown for weight 45 kg and height 1.5 m? Name one property being changed.

Try it first, then show the solutionSolution

1. BMI = 45 ÷ (1.5 × 1.5) = 45 ÷ 2.25 = 20; 20 is not below 18.5 but is below 25.
2. Result: Normal. The property changed is LabelResult.Text.

Answer: Normal (BMI 20); LabelResult.Text

App Development in real life

Each concept, met in an everyday situation. Read the situation, answer the question in your own words, then compare with the model answer. The one-line hook is what to remember.

Topics in this chapter

• MIT App Inventor: Components, Events, Properties and Decisions
• What an App Is, Web and Mobile Apps, and Steps to Develop an App

App Development: syntax and key facts

Parts of an app

User interface + logic (event code) + data

Front end, program, storage.

Online app cycle

1. 1.Event
2. 2.request
3. 3.server
4. 4.response
5. 5.display

Needs the internet.

Web versus mobile

Web app: browser, no install; mobile app: installed from app store

Mobile apps can use camera and GPS.

Development steps

1. 1.Plan
2. 2.design screens
3. 3.program events
4. 4.test
5. 5.build and share

Then update from feedback.

App Inventor

Designer (Palette, Viewer, Properties) + Blocks editor (events, logic)

Test with AI2 Companion; Build → .apk.

App Development: diagrams to practise

Practise each one on paper: draw it from the checklist, then tick off every label.

How the school exam asks App Development

The question patterns to expect, and the method that works for each.

Tricks to remember App Development

Short memory aids. Say each one aloud once, then use it on a question the same day.

• UI, Logic, Data

  The face, the brain and the memory of an app.

  Use it when: Parts of an app.

• Web lives in the browser, mobile lives on the phone

  No install for web; install from the store for mobile.

  Use it when: Types of apps.

• PDPTS: Plan, Design, Program, Test, Share

  'Please Draw Pictures Then Share.'

  Use it when: Steps to develop an app.

• Designer dresses, Blocks think

  The Designer sets how the app looks; the Blocks editor decides what it does.

  Use it when: Two parts of App Inventor.

App Development: exam-level solved questions

Ordered from exam level to HOTS. Cover the solution, write your own, then compare step by step.

Case-study practice (Section B style)

Read the situation, then answer every part. In a school exam set on the board pattern this is a 6-mark question split into 2 + 2 + 2 marks.

Where the marks are

How a typical answer is split into step marks. Show every step: a right final answer alone rarely earns full marks.

Where students lose marks in App Development

The slips examiners see most often, and what to write instead.

• ✗Mistake: Saying web apps must be installed

  Web apps run in the browser; only mobile apps are installed from app stores.

  ✓Do this: Web lives in the browser.

  Usually costs: 1 mark.

• ✗Mistake: Mixing up Label and TextBox

  A TextBox takes input from the user; a Label only displays text.

  ✓Do this: Type into a TextBox; read from a Label.

  Usually costs: 1 mark.

• ✗Mistake: Listing app steps without testing

  Testing and fixing errors is an essential step of development.

  ✓Do this: Plan, design, program, test, share.

  Usually costs: 1 mark.

• ✗Mistake: Vague uses of apps

  'Apps are useful' earns nothing; marks need a specific use.

  ✓Do this: Name the area and the task: 'Payment apps let us pay by scanning a QR code.'

  Usually costs: 1 mark per use.

Practice questions on App Development

Write each answer on paper first. Open the hint only if you are stuck, and the answer only when you have finished.

1. Q1 · 1 mark · MCQExam level

   In MIT App Inventor, the logic of an app is created in the:
   (a) Designer
   (b) Palette
   (c) Blocks editor
   (d) Viewer

   Hint

   Snap-together code.

   Answer

   (c)

2. Q2 · 1 mark · Very short answerExam level

   Name two types of apps in the curriculum.

   Hint

   Browser and phone.

   Answer

   Web (online) apps and mobile apps.

3. Q3 · 2 marks · Short answerExam level

   Give two safety tips for using apps.

   Hint

   Store, permissions, passwords.

   Answer

   Any two: download only from official app stores; allow only needed permissions; use strong PINs or passwords; never share OTPs.

4. Q4 · 3 marks · Short answerExam level

   Name three components used in the Designer and say what each does.

   Hint

   Button, Label, TextBox.

   Answer

   Button: the user taps it to start an action; Label: displays text or results; TextBox: lets the user type input (also Image, arrangements).

5. Q5 · 1 mark · Assertion-reasonHarder exam level

   Assertion (A): A mobile navigation app can show your live location.
   Reason (R): Mobile apps can use device features such as GPS, with permission.
   (a) (A) is true and (R) is false.
   (b) (A) is false and (R) is true.
   (c) Both (A) and (R) are true, and (R) is the correct explanation for (A).
   (d) Both (A) and (R) are true, but (R) is not the correct explanation for (A).

   Hint

   Device features.

   Answer

   (c)

6. Q6 · 2 marks · Short answerHarder exam level

   What does 'event-driven' mean for an app? Give two examples of events.

   Hint

   Wait and react.

   Answer

   The app waits for something to happen and then runs the code for it. Examples: a button is clicked; the screen opens (Initialize); a message arrives.

7. Q7 · 3 marks · Short answerHarder exam level

   Write the steps of app development in order and explain the testing step.

   Hint

   Five steps.

   Answer

   Plan the idea, design the screens, program the events, test, build and share. Testing means running the app with many inputs, including wrong or blank ones, finding errors and fixing them (debugging).

8. Q8 · 2 marks · Short answerHarder exam level

   An Adder app is tested with 2.5 and 4.25. What should it show? If it showed 2.54.25, what mistake was made?

   Hint

   Adding versus joining text.

   Answer

   It should show 6.75. Showing 2.54.25 means the two texts were joined (a text 'join' block) instead of added with the maths + block.

9. Q9 · 3 marks · Short answerHarder exam level

   Give two advantages and one limitation of mobile apps compared with web apps.

   Hint

   Offline, device features; storage.

   Answer

   Advantages: many work offline; full use of camera, GPS and other features (also faster). Limitation: they must be installed and use device storage, and users must download updates.

10. Q10 · 2 marks · Short answerHarder exam level

    A 200 MB app is downloaded on a 1.5 GB daily data pack (1 GB = 1024 MB). How much data is left?

    Hint

    Convert first.

    Answer

    1.5 × 1024 = 1536 MB; 1536 − 200 = 1336 MB left.

11. Q11 · 3 marks · Short answerHarder exam level

    In the BMI app, the ladder is: if BMI < 18.5 Underweight, else if BMI < 25 Normal, else Overweight. Give the result for (i) weight 36 kg, height 1.5 m and (ii) weight 90 kg, height 1.8 m, and explain why the conditions are checked in this order.

    Hint

    First true wins.

    Answer

    (i) BMI = 36 ÷ 2.25 = 16 → Underweight. (ii) BMI = 90 ÷ 3.24 ≈ 27.8, which is not below 25 → Overweight. The smallest limit is checked first so each else-if only handles values above the previous limit, just as in a program's if-else-if ladder.

12. Q12 · 3 marks · Short answerHOTS / competency

    Your grandparents find a banking app confusing: tiny buttons, many screens and English-only text. Suggest four design improvements, linking each to the user.

    Hint

    Think about who uses it.

    Answer

    Larger buttons and text for weaker eyesight; fewer steps for common tasks such as checking balance; a choice of language; clear confirmation messages and help or voice guidance (any four reasonable points linked to the user).

13. Q13 · 3 marks · Short answerHOTS / competency

    A free flashlight app asks for permission to read contacts and location. What should you do and why? What does this tell you about how apps work with data?

    Hint

    Does a torch need contacts?

    Answer

    Deny the permissions or choose another app: a torch needs only the flash, so asking for contacts and location suggests the app may collect personal data. Apps can send data to servers, so permissions decide what personal information an app can reach.

Test your recall

Answer in your head or on paper first, then open the card. Pulling an answer out of memory makes it stick far better than re-reading.

1. 1.What is an app short for?Show answer

   Application (software).

2. 2.Three parts of an app?Show answer

   User interface, logic and data.

3. 3.Where does a web app run?Show answer

   In a web browser.

4. 4.Where are mobile apps installed from?Show answer

   An app store.

5. 5.Which App Inventor part is used to place buttons on screen?Show answer

   The Designer.

6. 6.Which component shows a result without letting the user type?Show answer

   Label.

7. 7.Name an event block.Show answer

   when Button1.Click do.

Quick revision checklist

The night before the exam: can you do each of these without looking?

• ☐Can you define an app and give five uses?
• ☐Can you explain request and response?
• ☐Can you give four differences between web and mobile apps?
• ☐Can you list the steps to develop an app?
• ☐Can you name App Inventor's Designer and Blocks parts and common components?
• ☐Can you write an event block and trace its output?

App Development: frequently asked questions