Back to your course / CR2-S03
Computing and Robotics · 2.º ESO · Learn
Apps that control and help
A useful app makes a task easier and communicates what it knows. You will connect interface, events, validation and memory without confusing a requested command with a confirmed action.
Your mission
Create an accessible mobile control panel in App Inventor with Control and Settings views, level validation from 0 to 100 and local storage of a preference. The device is simulated using Responds/Does not respond. A compatible physical connection is an extension, not a basic requirement.

Read the explanation, study the diagram and try the activity in each section. You can choose another version at any time.
Your tools
Use Google Docs for written explanations and diagrams.net for diagrams. Save the editable file as well as the evidence requested in each task.
3.1. Separate interface from behaviour
Learn · theory and practice
The interface lets a person enter commands and receive information. Logic interprets inputs and decides state changes. In App Inventor, the Designer organises components and properties, while blocks program responses. A label displaying ON does not control a device. It does not prove that a command arrived either. Define audience, task and messages before choosing colours or adding screens that do not address a need.
An accessible panel offers specific names, space between controls, readable text and visible feedback for each action. Essential information is not communicated through colour alone: combine words and signals. Our simulator may declare OFF as the model’s starting state; a real device’s state is not known merely by opening the app. The interface distinguishes the last confirmed value from an unknown current situation. This precision supports correction without trusting an invented confirmation. The usage test observes whether another pair can apply a level and return to settings without initial spoken instructions.
- Usage need
- Visible control
- Response logic
- Understandable information
A panel uses a green circle without text. One person thinks the device is connected; another thinks it has just accepted a command. The same symbol communicates different things. Adding ‘last confirmed level’ and a communication message separates the meanings. Improvement means deciding what each component represents and checking understanding rather than adding colours.
App Inventor 2: Repaso a la Interfaz de Diseño
Watch in short sections. Connect one explanation with the diagram and try the example in this section. The written theory lets you complete the activity without playing the video.
The video keeps its original spoken language. Use the captions available in the player if they help.
- In Google Docs, describe an intended user, their task and the information they need.
- In diagrams.net, draw Control and Settings with messages and navigation.
- In App Inventor‘s Designer, place clearly named controls and a status signal accompanied by text.
What can a label claim, and what evidence would it need for that claim?
3.2. Events and states
Learn · theory and practice
An app responds to occurrences that activate instructions: pressing Apply, initialising a screen or receiving a response are events. Each event has a handler, the group of blocks that specifies how to react. Their visual position in the editor does not establish a continuous execution sequence for the entire app. Actions are connected by the information they leave in shared variables. Understanding behaviour therefore requires knowing which event reads a piece of data and which can change it.
In the panel, entered text, requested level and last confirmed level represent different stages of one request. Validation checks whether the input is acceptable; it does not show that the device executed it. Communication state adds another piece of information: a request may be pending, confirmed or unanswered. In the last case, the last known value is retained without presenting it as a new confirmation. Changing views also provides no evidence about what happened at the device.
A procedure groups a reusable task under a name, such as presenting current data in labels. Calling it from several events avoids maintaining different versions of the same message, although correctness still depends on using the right data. The event-and-variable map traces that relationship. When two events write to the same variable, each one’s responsibility needs checking: navigation or a restart must not turn old information into confirmation of a new action.
- Event
- Handler
- Relevant variable
- Presentation procedure
On returning from Settings, an app displays the text-box level as confirmed. The navigation event uses the wrong data. An arrow diagram shows that Back should present known variables while Apply starts a request. A shared presentation procedure reduces duplication, but it is correct only when its data have well-defined meanings.
App Inventor 3.2: Mi primera App (Bloques)
Watch in short sections. Connect one explanation with the diagram and try the example in this section. The written theory lets you complete the activity without playing the video.
The video keeps its original spoken language. Use the captions available in the player if they help.
- In diagrams.net, connect Initialize, Apply and Back with the variables they read or change.
- In App Inventor, create separate variables for request, confirmation and communication.
- In App Inventor, prepare a presentation procedure and check that navigation does not confirm requests.
Which data should change on requesting and which only after a valid response?
3.3. Validate before using an input
Learn · theory and practice
Validation checks whether input meets the usage contract before changing the system. For a level between 0 and 100, ask separate questions: whether content exists, whether it can be treated as a number and whether it lies in the interval. An empty field does not express zero. Text such as ‘high’ is not a numerical level. A number such as 101 has numerical format but lies outside the range. The message should explain what the person can correct.
The contract also clarifies whether decimals are allowed and how they are entered in the test environment. Do not silently transform ambiguous input into another decision. In App Inventor, combine numerical checks and comparisons, ordering branches so rejected data cannot update confirmed values. Test empty input, letters, -1, 0, 100 and 101, plus your defined decimal case. Check both message and memory after errors: an alert does not prove the variable was protected. Accepted input still needs a simulator response before being considered executed.
- Entered text
- Numerical format
- Allowed interval
- Valid request
The last confirmed level is 25. Someone enters ‘a lot’ and receives an alert. The team also checks variables: if confirmed level becomes zero, validation did not protect the state. The test must observe both message and retained data. A permitted number is then entered to check that the earlier error has not permanently blocked correction.
- In Google Docs, define range, decimal rule and format and interval messages.
- In App Inventor, program validation before changing the request.
- Test the six published cases and the defined decimal case; record message and subsequent confirmed value in Google Docs.
Why must 0 and empty input be tested separately?
3.4. Memory during and after use
Learn · theory and practice
An app’s memory may last for one execution or persist between launches. A variable retains information while the program runs, but receives its initialisation values when the program starts again. TinyDB provides local persistence: it stores a value under a tag and retrieves it during another execution. The text-size preference explores that continuity without storing passwords or personal data. The tag identifies the information to retrieve, rather than the visual component to change.
StoreValue saves the value and GetValue retrieves it; if the tag does not exist, the latter returns the planned default value. The panel uses CR2S03_texto for both saving and retrieving, because both steps must refer to the same information. The preference then needs applying to the intended text components. Saving, retrieving and presenting have different responsibilities: a correct TinyDB retrieval can coexist with a label whose size has not been updated.
That distinction guides checking. Moving from Control to Settings within one execution may retain a variable and does not demonstrate persistence. A first launch without a preference shows the default; saving, closing and reopening checks later retrieval. In AI Companion, different projects can share TinyDB, so other projects’ data must not be erased indiscriminately. This storage neither creates accounts nor synchronises devices. Restoring a preference also differs from knowing a device’s current state: a stored confirmation remains the last known value.
- Preference
- Local tag
- TinyDB
- New execution
- Applied presentation
An app remembers ‘large text’ after closing, but only the button changes size. Data were stored and retrieved correctly; the presentation procedure did not apply them to all intended components. The team checks saving, retrieving and applying separately. This avoids blaming TinyDB for a presentation fault and retains the first-launch case to check the default.
Tutorial App Inventor 2 Base de datos
Watch in short sections. Connect one explanation with the diagram and try the example in this section. The written theory lets you complete the activity without playing the video.
The video keeps its original spoken language. Use the captions available in the player if they help.
- In App Inventor, save a fictional preference using TinyDB.StoreValue and tag CR2S03_texto.
- In Screen1.Initialize, retrieve with GetValue and a default, then apply the preference.
- In Google Docs, record first launch, view change and closing/reopening without erasing other projects’ data.
Which test distinguishes persistence from a variable that remains alive when changing views?
3.6. Test simulated communication
Learn · theory and practice
The Responds/Does not respond selector represents whether confirmation from the simulated device exists. It establishes neither Bluetooth nor WiFi and demonstrates no physical execution. With valid input and an available response, the model’s confirmed value may update. Without a response, show uncertainty and identify the previous value as last known. In the minimum version, the selector introduces no real waiting; it studies request versus confirmation before authentic communication.
A functional test connects input, event, message and subsequent data. Include valid and invalid requests, response and no response, plus persistence. An accessibility test observes whether another pair completes a task without initial help and how messages are interpreted. This does not certify universal accessibility. Record specific difficulties, fix one and repeat the task. Export the .aia project to preserve editable blocks and components: neither an image nor an installed app replaces it. Document the device or emulator and which functions remain simulated in the submission.
- Valid request
- Simulated or absent response
- Confirmed or uncertain
- Understanding test
A pair requests a level while the selector is set to Does not respond. The app retains the last confirmed value and marks it as not updated. Another pair interprets the message as ‘off’. This reveals a user-communication problem even though variables are correct. Changing it to ‘unconfirmed; last known level’ and repeating the task tests an improvement in understanding.
- In App Inventor, test the four request-and-response situations using the selector.
- In Google Docs, record another pair applying a level and checking settings without initial help.
- Correct one difficulty, repeat the task and export the .aia from App Inventor.
What does the selector demonstrate, and what does it not demonstrate about a physical connection?
3.7. Laboratory, project and two assignments
Learn · theory and practice
The laboratory traces a request through input, validation, request, response and presentation. Each layer has a responsibility. A visible fault may come from an incorrect variable, a wrong event or a label that does not reflect data. To investigate, write the prediction and observe one layer at a time. Recording symptom, hypothesis, change and retest explains a repair better than unrelated screenshots.
Anticipate late responses too. With two consecutive requests, the app might confuse which response belongs to which request. The prototype can allow only one pending request to keep that relationship understandable; a more complex connection would need request identifiers. A01 combines screens, events, data, validation, four planned tests and an already executed micro-app. A02 includes verified persistence, navigation, four cases and an accessibility test, with an improvement. The individual explanation traces an event and a personal decision. These practices contribute to the two assignments without adding another graded activity.
- Input
- Validation
- Identifiable request
- Relevant response
- Presentation
An app requests two levels before receiving confirmation for the first. An old response arrives and the screen attributes it to the latest press. This is a correspondence problem rather than a numerical-range problem. In a simplified exercise, temporarily disabling Apply during a pending request provides an unambiguous sequence. Document the decision and its limit before adding more complex communication.
- In diagrams.net, trace a request and mark the data available at each stage.
- In App Inventor, investigate a real or controlled fault in a copy and change only the relevant part.
- In Google Docs, document repair, retest and an individual prediction before finalising A01 or A02.
Why can two valid inputs require control of their response order?
3.8. Explore further at your own pace
Learn · theory and practice
Asynchronous describes a process whose result arrives at another time. With the Web component, starting a request and receiving GotText are separate events; TimedOut reports expiry of the configured waiting time. This documentation explains the separation even though our selector uses no real network. A received response must still be checked for correspondence with the request and valid confirmation: receiving arbitrary text does not prove that a device executed a command.
Physical connection is an extension requiring a compatible interface, message protocol and additional tests. It must describe what is sent, which response is accepted, how long to wait and what is shown on failure. It is unnecessary for completing the simulated panel. Consult official tutorials with a specific question about components, storage or events and record the block resolving it. Optional videos can be paused and replaced by written explanation. Keeping .aia and a short decision record supports adaptation to another need by reviewing data and validation rather than copying messages without checking meaning.
- Request sent
- Waiting
- Reception or timeout
- Response validation
- User information
Documentation shows GotText after Get. The team understands that the instruction requests and the later event receives. For their panel they neither copy someone else’s test address nor claim a connection: they draw where a verified response would fit. This comparison explains why a pending message matters even though the basic simulator represents response through a selector.
- Consult GotText and TimedOut in the App Inventor Web reference.
- In diagrams.net, compare real request and response with the simulator selector.
- In Google Docs, explain a panel adaptation and the validation and tests it would change.
Why is receiving a message insufficient to announce success?
Your project and submissions
A01 · Design the solution
- Create CR2-S03_panel_A01_Apellidos in Google Docs with need and audience.
- In diagrams.net, draw two views, navigation, events, variables and validation algorithm.
- Define range and decimals, last confirmed, pending and unanswered states; plan four functional tests and one accessibility test.
- Run an App Inventor micro-app with validation, TinyDB and explicitly identified simulated external response.
- Add result compared with prediction, sources and individual contributions.
What to submit
- Dossier with sketch and event/data flow.
- Micro-project .aia with validation and saved preference, identifying simulation.
- Four-test and accessibility plan, executed micro-test and individual explanation.
A02 · Accessible mobile control panel
- In App Inventor, program views, validation, dialog and consistent state presentation.
- Complete four functional tests: validation with empty input, letters, -1, 0, 100 and 101; response; no response; persistence after closing and reopening.
- Ask another pair to apply a level and use Settings without initial help; record understanding and difficulty.
- Correct an error, repeat its test and document simulation limits and an improvement.
- Submit CR2-S03_panel with .aia, instructions, test record, sources and individual explanation of an event and a decision.
What to submit
- Editable .aia with two views, navigation, validation and TinyDB.
- Four-case record and accessible-use test, including dialog and default value.
- Repaired issue and compared improvement; individual explanation distinguishing request, response and last confirmation.
Before you submit
- I connect a control to its event and the data it changes.
- I reject invalid inputs without altering the last confirmed value.
- I show uncertainty when no response arrives.
- I retrieve a preference after closing and reopening the app.
- I allow cancellation and return without confirming nonexistent actions.
- I explain an understanding improvement using another pair’s test.
Templates and files
Open the blank A01 or A02 template and make your own copy in Google Docs. Keep the editable file from your project platform as well.
These reusable templates help you organise your work. Follow the specific instructions and evidence list for this unit; remove fields that do not apply. The blank master is read-only. Keep your answers private and share them only as your teacher instructs.
A01 · Design the solution
Make your own copy in Google Docs · View the blank template
- Dossier with sketch and event/data flow.
- Micro-project .aia with validation and saved preference, identifying simulation.
- Four-test and accessibility plan, executed micro-test and individual explanation.
A02 · Accessible mobile control panel
Make your own copy in Google Docs · View the blank template
- Editable .aia with two views, navigation, validation and TinyDB.
- Four-case record and accessible-use test, including dialog and default value.
- Repaired issue and compared improvement; individual explanation distinguishing request, response and last confirmation.
Classroom rubrics
The classroom assessment reference is preserved below in its original Spanish. Use the checklist above to prepare your work and ask your teacher about any descriptor you need to clarify.
Consultar la rúbrica de A01
Diseño y microprueba
CYR.2.2.2 Arquitectura de la app y estado confirmado
Entender el funcionamiento interno de las aplicaciones móviles y cómo se construyen, dando respuesta a las posibles demandas del escenario a resolver.
Evidencia. Boceto, microapp con validación, TinyDB y respuesta externa simulada identificada.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | Confunde texto introducido, solicitud y confirmación y no explica un evento. |
| 3–4,9 | Hay botones, pero anuncia confirmado al pulsar o confunde almacenamiento local con estado del dispositivo. |
| 5–6,9 | Relaciona interfaz, eventos, lógica y TinyDB en una microapp. Distingue solicitud, respuesta simulada y último valor confirmado para la necesidad elegida. |
| 7–8,9 | Prueba respuesta tardía y reapertura y explica qué dato persiste y qué no puede afirmarse actual. |
| 9–10,0 | Propone una organización alternativa de eventos y justifica cómo evitar respuestas fuera de contexto. |
CYR.2.2.3 Adaptar y generalizar soluciones móviles
Conocer y resolver la variedad de problemas posibles desarrollando una aplicación móvil y generalizando las soluciones.
Evidencia. Necesidad del panel, validación ejecutada y cuatro pruebas previstas.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | No relaciona las funciones del panel con el escenario ni identifica entradas admitidas. |
| 3–4,9 | Elige funciones, pero no distingue vacío, no numérico y fuera de intervalo. |
| 5–6,9 | Resuelve una parte de la necesidad con la microapp, define validación y anticipa cuatro pruebas y una comprobación de uso accesible. |
| 7–8,9 | Reutiliza una regla de validación en otro campo y explica sus límites. |
| 9–10,0 | Compara dos soluciones móviles para el escenario y justifica qué patrón puede generalizarse. |
CYR.2.2.1 Algoritmo de control y colaboración
Conocer y resolver la variedad de problemas posibles, desarrollando un programa informático y generalizando las soluciones, tanto de forma individual como trabajando en equipo, colaborando y comunicándose de forma adecuada.
Evidencia. Diagrama de validación, microprueba y explicación de contribuciones.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | No puede seguir el paso de entrada a decisión ni identificar una aportación propia. |
| 3–4,9 | Describe acciones sueltas, pero no ordena validar solicitar y confirmar ni revisa resultados. |
| 5–6,9 | Ordena el algoritmo, ejecuta una microprueba, contrasta una predicción y explica cómo su aportación se coordina con la pareja. |
| 7–8,9 | Revisa una condición tras detectar un caso inválido y expresa un procedimiento reutilizable. |
| 9–10,0 | Argumenta entre dos algoritmos de actualización y prueba el caso que permite distinguirlos. |
Consultar la rúbrica de A02
Producto pruebas y mejora
CYR.2.2.2 Arquitectura de la app y estado confirmado
Entender el funcionamiento interno de las aplicaciones móviles y cómo se construyen, dando respuesta a las posibles demandas del escenario a resolver.
Evidencia. Proyecto editable, validación, persistencia, navegación y estados de comunicación.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | La app no permite completar el control o presenta simulación como comunicación real. |
| 3–4,9 | Funciona con entrada válida, pero confirma sin respuesta o recupera una preferencia como si fuera estado actual. |
| 5–6,9 | Implementa interfaz, lógica y persistencia, distingue pendiente confirmado y sin respuesta y explica sus eventos y la simulación. |
| 7–8,9 | Corrige una actualización prematura o una preferencia no aplicada y verifica recorrido y reapertura. |
| 9–10,0 | Adapta el panel a otra entrada o respuesta y justifica coherencia de estado, navegación y dato persistido. |
CYR.2.2.3 Adaptar y generalizar soluciones móviles
Conocer y resolver la variedad de problemas posibles desarrollando una aplicación móvil y generalizando las soluciones.
Evidencia. Panel probado, cuatro casos, prueba de accesibilidad y adaptación explicada.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | El panel no resuelve la necesidad y no discrimina entradas incompatibles. |
| 3–4,9 | Admite datos, pero bloquea casos no válidos sin orientar o no permite completar el recorrido. |
| 5–6,9 | Resuelve el escenario, valida entradas, ejecuta los cuatro casos y prueba accesibilidad, justificando sus decisiones. |
| 7–8,9 | Adapta la validación o navegación a otro caso y comprueba que conserva la respuesta esperada. |
| 9–10,0 | Resuelve una variante nueva y explica una solución general que se puede reutilizar sin copiar mensajes erróneos. |
CYR.2.2.1 Algoritmo de control y colaboración
Conocer y resolver la variedad de problemas posibles, desarrollando un programa informático y generalizando las soluciones, tanto de forma individual como trabajando en equipo, colaborando y comunicándose de forma adecuada.
Evidencia. Código, pruebas de estado, incidencia y modificación individual.
| Banda | Desempeño observable |
|---|---|
| 1–2,9 | No explica la lógica del panel ni puede realizar una modificación coherente. |
| 3–4,9 | Cambia mensajes sin relacionar el fallo con evento o variable y no puede atribuir decisiones propias. |
| 5–6,9 | Resuelve el control programado, documenta una corrección y explica o modifica individualmente una decisión, colaborando en la revisión. |
| 7–8,9 | Aísla el evento responsable del fallo y transfiere la solución a otro estado del panel. |
| 9–10,0 | Resuelve un caso nuevo de orden de respuestas y comunica una regla general con evidencia y revisión compartida. |
Videos, resources and sources
App inventor: primeros pasos
Watch in short sections. Connect one explanation with the diagram and try the example in this section. The written theory lets you complete the activity without playing the video.
The video keeps its original spoken language. Use the captions available in the player if they help.
Keep learning
- MIT App Inventor: User Interface
- MIT App Inventor: Math Blocks
- MIT App Inventor: Storage, TinyDB
- MIT App Inventor: Connectivity, Web
- W3C WAI: Labeling Controls
Editorial revision: October 2026.
