Back to homeDigital Culture · High School Year 1 · Change subject
Start for free
Prep 1 · Digital Culture
Digital content creation · Simple creation and programming

Simple Apps for Mobile and Web

Ximena wants an app to calculate the tip at her uncle's taco shop. First she imagined it, then she sketched it on a sheet of paper, then she programmed it, and, before sharing it, she asked her friends to test it. One of them typed "abc" as the bill and the app crashed. What did she forget to check? By the end of the page you will know.

From the idea to the published app

Creating a simple app (a converter, a counter, a quiz) brings together what you already know about algorithms and blocks. You always go through the same stages.

Stages of creating an app illustrated with one icon each: lightbulb (idea), prototype screens (design), flowchart (algorithm), code window (programming), phone with strange data, magnifying glass and bug (testing), and cloud with an upward arrow (publishing). #@9 1 · Idea 2 · Design 3 · Algorithm 4 · Program 5 · Testing 6 · Publishing
  • Idea: what problem it solves and for whom.

  • Design: drawing the screens (prototype) and what each button does.

  • Algorithm: the steps the app will follow, as a list or a flowchart.

  • Programming: turning the algorithm into blocks or code.

  • Testing: using the app with normal data and also strange data, to find bugs.

  • Publishing: making it available to other people, for example in an app store or on the web.

Practice★☆☆Not started
List the stages involved in creating an application, from the idea until it is used by others, and explain what each stage consists of. Reason why it is not advisable to…

List the stages involved in creating an application, from the idea until it is used by others, and explain what each stage consists of. Reason why it is not advisable to skip the testing phase even if the program seems to work.

Solve
Practice★☆☆Not started
Before programming, it is useful to draw the prototype on paper. Describe (or draw in your exercise book) the three screens of a 'water glass counter' app: the main…

Before programming, it is useful to draw the prototype on paper. Describe (or draw in your exercise book) the three screens of a 'water glass counter' app: the main screen with the counter, the button to add a glass, and a history screen, indicating what each button does.

You can do it on paper and send a photo with your answer.

Solve

Input, process, and output in an app

Diagram of a converter app: user input, algorithm process, and result output. km → miles converter 10 km Convert 6.25 miles input: 10 km process: 10 ÷ 1.6 output: 6.25 miles

A five-question quiz app also uses decisions and a repetition. One possible algorithm:

  1. Set the score to 0 and the question number to 1.

  2. Show the current question.

  3. Read the answer. Is it correct? If so, add 1 to the score; if not, show "Incorrect."

  4. Add 1 to the question number.

  5. Have all five been answered? If not, go back to step 2 (repetition).

  6. Show the final score.

To test a check like this, you use cases such as: empty field, letters, a 42, a negative number, and also the valid extremes (0 and 10).

Practice★☆☆Not started
An app calculates the recommended tip at a restaurant based on the bill amount. Identify what data the user inputs (input), what the application does with it (process),…

An app calculates the recommended tip at a restaurant based on the bill amount. Identify what data the user inputs (input), what the application does with it (process), and what it displays at the end (output), following the scheme input → process → output.

Solve
Practice★☆☆Not started
The figure shows the screen design of an app that converts distances from kilometers to miles, knowing that $1\ \text{milla}$ is equivalent to $1.6\ \text{km}$. Write…

The figure shows the screen design of an app that converts distances from kilometers to miles, knowing that $1\ \text{milla}$ is equivalent to $1.6\ \text{km}$.

Converter km → miles kilometers Convert miles: ?

Write the steps that the app must follow when the user presses the button to display the result, and state what should happen if the user presses "Convert" without entering any number.

Solve
Practice★☆☆Not started
A very simple app receives a text and returns it written in capital letters. Analyse its input → process → output scheme and suggest two real uses such an app could have…

A very simple app receives a text and returns it written in capital letters. Analyse its input → process → output scheme and suggest two real uses such an app could have within a larger one.

Solve
Practice★★☆Not started
Describe the algorithm for a quiz app with five questions: how the score is saved, what happens when the user gets a question right or wrong, how to move on to the next…

Describe the algorithm for a quiz app with five questions: how the score is saved, what happens when the user gets a question right or wrong, how to move on to the next question, and what is displayed at the end. Use numbered steps with decisions and a loop.

Solve
Practice★★☆Not started
An app that calculates the mean of grades gives absurd results when a box is left empty or when someone enters a grade of 42. Explain what invalid input data is, propose…

An app that calculates the mean of grades gives absurd results when a box is left empty or when someone enters a grade of 42. Explain what invalid input data is, propose two checks the app should make before calculating, and describe the tests you would carry out to check that it no longer fails.

Solve

Screens, elements, and prototypes

A button can also combine conditions. Try how a decision depends on two inputs:

An app that can be used

A good design thinks about all users. Three accessibility ideas: large, well-spaced buttons (for big fingers or people with limited precision), good contrast between text and background (for people with low vision or who use their phone in bright sunlight), and not relying on color alone: add text or icons (for people with color blindness).

Something similar happens with notifications: they announce news, but too many make the person uninstall the app. It is best to send only useful alerts and let the user choose which ones to receive. Onboarding is the set of screens that explain the app the first time it is opened: there should be few of them, and they should have a "Skip" button.

Practice★☆☆Not started
App screens are built using basic elements: buttons, text labels, input fields, and images. Explain the purpose of each of these four elements and give an example of…

App screens are built using basic elements: buttons, text labels, input fields, and images. Explain the purpose of each of these four elements and give an example of each in an app you use often.

Solve
Practice★★☆Not started
Notifications alert users to updates, but too many notifications make the user uninstall the app. Design the notification policy for the classroom reading app: which…

Notifications alert users to updates, but too many notifications make the user uninstall the app. Design the notification policy for the classroom reading app: which three notifications you would send, which notifications you would not, and what configuration options you would allow the user.

Solve
Practice★★☆Not started
Evaluate the accessibility of this app screen: small buttons very close together, light gray text on a white background, and all information in color only (without…

Evaluate the accessibility of this app screen: small buttons very close together, light gray text on a white background, and all information in color only (without text). Suggest three specific improvements and explain which users each one benefits.

Solve
Practice★★★Not started
Onboarding consists of the screens that guide users through the app the first time it is opened. Design a three-screen onboarding process for the school canteen app:…

Onboarding consists of the screens that guide users through the app the first time it is opened. Design a three-screen onboarding process for the school canteen app: what each screen shows, what the user learns on each one, and why there should be a 'skip' button.

Solve

Connection, storage, and permissions

Three phones compared: a calculator that works without a connection, a weather app that shows data saved in the device's cache, and a maps app that receives live traffic from the internet. no connection calculator partial weather (cache) needs network live maps

If you uninstall an app or change phones without a backup, the data that was only in local storage is lost. That is why many apps offer to save a copy in the cloud.

When an app has no connection, a good message says what is happening ("No connection; showing the last forecast from 8:00") and offers options: try again, keep working with what is saved, or go to the network settings.

Permissions and consumption

A permission is the authorization you give an app to use the microphone, location, contacts, etc. Map apps drain a lot of battery and data because they use location constantly, download maps, and keep the screen on. You can reduce this by downloading maps over Wi-Fi, using location only while the app is open, and lowering the brightness.

Practice★★☆Not started
Some apps work without an internet connection and others cannot do anything without it. Explain the difference between both types and classify these apps, giving reasons…

Some apps work without an internet connection and others cannot do anything without it. Explain the difference between both types and classify these apps, giving reasons for your answer: a calculator, maps with live traffic, an already downloaded quiz, and a messaging app.

Solve
Practice★★☆Not started
A game remembers your level, your coins, and your high score even if you close the app. Explain what local storage of an app is, what data that game saves, and explain…

A game remembers your level, your coins, and your high score even if you close the app. Explain what local storage of an app is, what data that game saves, and explain what will happen to them if you uninstall the app or change phones without a backup.

Solve
Practice★★☆Not started
A weather app works partly offline: it displays the last downloaded forecast, but does not update it. Explain which parts of an app can continue to work without internet…

A weather app works partly offline: it displays the last downloaded forecast, but does not update it. Explain which parts of an app can continue to work without internet and design the 'offline' message the user would see: what it should say and what options it should offer.

Solve
Practice★★★Not started
A torch app requests permission to access contacts, location, and the microphone. Analyse whether these permissions are necessary for its function, what risks granting…

A torch app requests permission to access contacts, location, and the microphone. Analyse whether these permissions are necessary for its function, what risks granting them without thinking entails, and draft a three-question criterion to decide which permissions to accept in any app.

Solve
Practice★★★Not started
A map app drains the phone's battery and cellular data in half a day. Analyze which specific features might be consuming so much (constant location tracking, downloading…

A map app drains the phone's battery and cellular data in half a day. Analyze which specific features might be consuming so much (constant location tracking, downloading maps, screen) and suggest three settings or adjustments, for either the user or the developers, to reduce that consumption.

Solve

Publishing, trusting, and making money with an app

An app can be native (installed from the store, makes better use of the phone, but must be built for each system and updated) or web (opened in the browser, works on any device and updates itself, but depends more on the connection and has access to fewer features of the device).

Updates fix bugs, close security holes, and add improvements. Not updating leaves the app vulnerable. Sometimes they change features you liked because the team decided to redesign or remove them.

Do I trust this app?

What does an app live on?

Three phones showing the ways to make money with an app: free with ads, paid, and with in-app purchases. Ad $49 $19 free with ads paid purchases inside the app

A "free" app with ads lives off your attention and, sometimes, off your data. If minors use it at school, invasive advertising and charges that leave out those who can't pay are ethical problems. One alternative is to fund it with support from the school or the community, publish it under a free license, and maintain it among students and teachers.

Back to the beginning: Ximena's tip app failed because no one tested it with invalid data like "abc." An input check and a test with strange data would have prevented it.

Practice★☆☆Not started
Before installing an app from the store, it is advisable to check several details. Explain what ratings, the number of downloads, the requested permissions, and the…

Before installing an app from the store, it is advisable to check several details. Explain what ratings, the number of downloads, the requested permissions, and the developer's name tell you, and what combination of these details would make you suspicious.

Solve
Practice★☆☆Not started
Apps are updated periodically. Explain two reasons why it is advisable to keep them updated and one risk of failing to do so, and reason why an update sometimes changes…

Apps are updated periodically. Explain two reasons why it is advisable to keep them updated and one risk of failing to do so, and reason why an update sometimes changes features you liked.

Solve
Practice★★☆Not started
Some apps are first downloaded as a 'beta version' for a small group of users. Explain what that label means, what advantages testing this way before the official launch…

Some apps are first downloaded as a 'beta version' for a small group of users. Explain what that label means, what advantages testing this way before the official launch has, and what two things you should expect from a beta (and not get angry when they happen).

Solve
Practice★★★Not started
Design a complete app called 'Reading Challenges' for the class to log the books they read: screens it would have, input and output data for each one, main algorithm,…

Design a complete app called 'Reading Challenges' for the class to log the books they read: screens it would have, input and output data for each one, main algorithm, and three specific tests you would perform before publishing it.

Solve
Practice★★★Not started
The school library wants an app to check its catalog and is undecided between a native mobile app and a web app that works in the browser. Compare both options…

The school library wants an app to check its catalog and is undecided between a native mobile app and a web app that works in the browser. Compare both options (installation, updates, devices, development cost) and conclude with a justified recommendation.

Solve
Practice★★★Not started
Your team has programmed an app to organize recess sports tournaments. A classmate proposes funding it by inserting ads from a commercial network and charging 0.99 pesos…

Your team has programmed an app to organize recess sports tournaments. A classmate proposes funding it by inserting ads from a commercial network and charging 0.99 pesos through in-app purchases to unlock advanced statistics. Justify two legal or ethical issues with this model when applied in a school setting with minors. Then, design an alternative model to sustain and maintain the app without resorting to invasive advertising or payments that discriminate against some of the students.

Solve
Practice★★★Not started
You are going to download an app to calculate grades and you find "SuperNotas". In the app store, you notice the following data: Average rating: 4.9 ★ with 2,500…

You are going to download an app to calculate grades and you find "SuperNotas". In the app store, you notice the following data:

  • Average rating: 4.9 ★ with 2,500 reviews.

  • Dates and text: 90% of the 5 ★ ratings were published over just three consecutive days, with identical text ("Excellent app") and profiles without pictures.

  • Required permissions: Access to contact list, precise location, and microphone.

Interpret this data: explain what fraudulent practice is taking place and what goal it pursues. Next, predict what risks someone assumes by installing it guided only by the average rating, and write two mandatory checks that must always be performed before installing an unfamiliar app.

Solve

From blocks to text

Until now you have programmed by dragging blocks. Writing the program as text is the next step, and the ideas are the same: variables, input and output, conditionals, loops, and functions. For example, the km-to-miles converter in Python:

km = float(input("Kilómetros: "))

millas = km / 1.6

print("Son", millas, "millas")
Practice★★★Not started
Applying the idea of 'privacy by design', define what minimum data a classroom task app would actually require to work, what data it would NOT request even if it 'could…

Applying the idea of 'privacy by design', define what minimum data a classroom task app would actually require to work, what data it would NOT request even if it 'could be useful', and how you would explain those decisions to users on the app store listing page.

Solve

Summary

See all the exercises in this section