📱Course Curriculum

Mobile Apps with App Inventor

App Development· Beginner· Ages 14–17· 36 Hours

Course At a Glance

Program Outcomes

By the end of this course, students will be able to:

1
Design and build functional mobile applications using block-based programming.
2
Apply event-driven logic to create interactive and user-friendly app interfaces.
3
Develop a complete mobile app project demonstrating creativity and foundational app development skills.

Module 1

Introduction to Mobile Apps & App Inventor

Students are introduced to mobile application development and the MIT App Inventor platform. They learn the interface, block-based programming, variables, basic logic, and build their first complete app.

Approx. 9 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Components / Blocks
1.1	What Are Mobile Apps?	Explore mobile apps (native, web, hybrid) and introduce MIT App Inventor's 2-panel workflow (Designer and Blocks).	Exploration: Browse 5 App Inventor gallery apps. Identify UI components and sketch a simple alarm app.	`Designer, Blocks Editor, Components panel, Properties`
1.2	The App Inventor Interface	Navigate the workspace: Palette, Viewer, Components tree, and Properties. Connect the AI Companion app for live preview.	Guided Tour: Drag 5 components, rename them, change properties, and view the live preview using AI Companion.	`Button, Label, Image (visible); Sound, Clock (non-visible)`
1.3	Designing Your First Screen	Design organised app screens using vertical and horizontal layouts. Set background colours and responsive percentage sizing.	Build: Design a 'Welcome Screen' with a title, logo image, tagline, and button, structured with VerticalArrangement.	`VerticalArrangement, HorizontalArrangement, width/height %, Screen.BackgroundColor`
1.4	Introduction to Block Programming	Understand event-driven programming. Navigate the Blocks editor (Control, Logic, Math) and connect event handler blocks.	Build: 'Hello App' — when the button is clicked, change label text to 'Hello, World!'.	`when Button.Click do, set Label.Text to, join`
1.5	Labels, Buttons & Text	Change text, font size, and visibility dynamically using blocks. Use string operations (join, length).	Build: 'Compliment Generator' — buttons update a label with different compliments and the current time using join.	`Label.Text, Button.BackgroundColor, join, Text.length`
1.6	Images & Sounds	Add Image and Sound components. Upload image/audio assets directly to App Inventor and trigger sounds on click.	Build: 'Animal Soundboard' — 4 animal images in a grid that play corresponding sounds when clicked.	`Image.Picture, Sound.Play(), Sound.Pause(), asset upload`
1.7	Variables & Basic Logic	Introduce variables as data containers. Use global variables for tracking scores. Introduce if-then-else decision blocks.	Build: 'Click Counter' — button presses increment a variable counter. When reaching 10, the text turns red.	`initialize global, set/get variable, if-then-else, = block`
1.8	Module 1 Project: Hello App	Combine Module 1 skills: screen design, images, sounds, button interactions, variable-tracked counters, and basic logic.	Project: 'My Hello App' — A personalised welcome app with dynamic greetings, sounds, and a click counter.	`Full Module 1 components and blocks`

Module 2

User Interface Design & Event Handling

Students design interactive, multi-screen app interfaces and master event-driven programming. They build a fully working calculator app and a multi-question quiz app.

Approx. 9 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Components / Blocks
2.1	Event-Driven Programming	Deepen understanding of event-driven programming (button clicks, text changes, slider moves, Screen.Initialize).	Exercises: Create an app responding to 5 different events (checkbox, slider, text change, etc.) updating a label.	`when Screen1.Initialize, when CheckBox.Changed, when Slider.PositionChanged`
2.2	User Input: TextBox & Spinner	Accept input using TextBox and drop-down Spinners. Validate input before executing logic.	Build: 'Personalised Greeter' — use a TextBox for name, Spinner for language, and generate a translated greeting.	`TextBox.Text, TextBox.Hint, Spinner.Selection, Spinner.Elements`
2.3	Multiple Screens & Navigation	Add multiple screens, navigate between them, pass data using start values, and build consistent back-button structures.	Build: 'Three-Screen App' — a Home screen linking to About and Settings. Pass a user name to the About screen.	`open another screen, get start value, close screen, screenName=`
2.4	Layouts & Responsive UI Design	Master layout systems including TableArrangement. Set widths to 'Fill parent' and percent for responsive sizing.	UI Challenge: Redesign a calculator screen using nested arrangements to ensure it looks correct on phones and tablets.	`TableArrangement, AlignHorizontal, Fill parent, percent width`
2.5	Building a Calculator App	Apply variables, math blocks, and text boxes to build a working calculator with division-by-zero error handling.	Build: 'Four-Function Calculator' — supports basic math operators, with a clear button that resets variables.	`math blocks, +, -, *, /, if = 0 then error, global variables`
2.6	Lists & the List Picker	Create and iterate through lists. Use the ListPicker component to let users select items from a pop-up list.	Build: 'Favourite Things Selector' — user picks items from a ListPicker, appending choices to a Favourites list.	`make a list, select list item, ListPicker.Elements, for each item in list`
2.7	Building a Quiz App	Use parallel lists for questions/answers. Track question index and score. Provide conditional feedback per answer.	Build: 'Knowledge Quiz App' — displays 5 questions sequentially. Correct answers increment a score displayed at the end.	`parallel lists, index variable, select list item[index], score variable`
2.8	Module 2 Project: Quiz or Calculator	Polish either the Calculator or Quiz app into a fully featured, user-tested application with robust UI/UX.	Project Completion: Submit a polished version of the Quiz (categories, Try Again) or Calculator (history). Peer test apps.	`Full Module 2 components and blocks`

Module 3

Working with Data & Device Features

Students learn to persist data using TinyDB and integrate real device features like the camera, sound recording, text-to-speech, clock, accelerometer, and location sensor.

Approx. 9 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Components / Blocks
3.1	TinyDB: Storing Data Locally	Introduce TinyDB for local key-value storage. Use StoreValue to save and GetValue to retrieve data upon app launch.	Build: 'Remember Me App' — saves a user's name to TinyDB and reloads it automatically when the app is restarted.	`TinyDB.StoreValue(tag, value), TinyDB.GetValue(tag, valueIfTagNotThere)`
3.2	To-Do List App	Build a to-do app using TinyDB to persist list variables and a ListView to display tasks. Handle item deletion.	Build: 'My To-Do List' — add tasks to a list, display in ListView, and save the full list to TinyDB for persistence.	`ListView.Elements, add items to list, ListView.Selection, TinyDB (list storage)`
3.3	The Clock & Timers	Use the Clock component for current dates, formatting, and executing timed events via Clock.Timer intervals.	Build: 'Digital Clock & Countdown Timer' — one live clock screen and a second screen counting down seconds to zero.	`Clock.Now, Clock.FormatDateTime, Clock.Timer, TimerInterval, TimerEnabled`
3.4	Camera & Image Picker	Use Camera.TakePicture and ImagePicker. Save image paths to TinyDB to reload photos in a later session.	Build: 'Photo Diary App' — take or pick photos, add text captions, and save both photo paths and text to TinyDB.	`Camera.TakePicture, Camera.AfterPicture, ImagePicker.Open, ImagePicker.AfterPicking`
3.5	Sound, TextToSpeech & Microphone	Convert text to audio with TextToSpeech. Record user audio with SoundRecorder and play it back.	Build: 'Talking Translator' — type phrases, select a language, and have the app speak it. Add voice memo recording.	`TextToSpeech.Speak, TextToSpeech.Language, SoundRecorder.Start/Stop, AfterSoundRecorded`
3.6	Sensors: Accelerometer & Location	Trigger events using AccelerometerSensor.Shaking. Retrieve latitude, longitude, and addresses via LocationSensor.	Build: 'Shake-to-Surprise App' — shaking changes colours/sounds. A 'Where Am I?' screen displays the user's address.	`AccelerometerSensor.Shaking, LocationSensor.CurrentAddress, LocationSensor.LocationChanged`
3.7	Web Viewer & Sharing	Embed a WebViewer to display websites inside the app. Share text or URLs to native phone apps using the Sharing component.	Build: 'Mini Browser App' — navigate to URLs in a WebViewer, with a button to share the URL to WhatsApp or email.	`WebViewer.GoToUrl, WebViewer.GoBack, Sharing.ShareMessage, Sharing.ShareFile`
3.8	Module 3 Project: Featured App	Combine at least two device features (TinyDB, Sensors, Camera, etc.) into a cohesive app with variables and layout design.	Project: Build a 'Memory Photo Journal', 'Shake Game', or 'Voice Memo Recorder'. Peer-test and provide feedback.	`Full Module 3 components and blocks`

Module 4

Final App Project

Students design, wireframe, build, test, and present a complete original mobile application, emphasizing creativity, usability, and data persistence.

Approx. 9 hrs

#	Lesson Title	What Students Learn	Activity / Project	Key Components / Blocks
4.1	Final Project Briefing & Ideation	Design a complete original app using ≥3 components, multiple screens, and TinyDB. Brainstorm and pitch problem-solving apps.	Ideation Session: Pitch 3 app ideas. Class votes. Fill out a Project Idea Form defining target user and core features.	`App concept, user research, feature definition`
4.2	UI Design & Wireframing	Design screens on paper before coding. Create a screen flow diagram. Plan colours, fonts, and component structures.	Design Deliverable: Produce wireframes, a screen flow map, a colour palette, and a component list for teacher sign-off.	`Wireframe, screen flow diagram, component planning`
4.3	Screen & UI Build	Build the planned wireframes in App Inventor using nested arrangements. Set placeholder texts and test navigation logic.	Build Sprint: Complete all UI screens and link them with navigation buttons (no logic blocks yet). Review on emulator.	`Arrangements, component naming convention, navigation structure`
4.4	Core Logic Build	Implement primary app logic: variables, conditionals, math, and lists. Test core features iteratively.	Build Sprint: Program core feature 1 and 2 end-to-end. Handle edge cases (like empty inputs). Teacher checkpoint.	`Event handlers, variables, if-then-else, lists, math blocks`
4.5	Data Persistence & Device Features	Integrate TinyDB for data saves/loads and incorporate device features (e.g., Camera or Clock).	Build Sprint: Verify TinyDB functionality by closing and reopening the app with sample data. Integrate the device component.	`TinyDB.StoreValue/GetValue, Screen.Initialize, device component`
4.6	Polish, UX & Error Handling	Audit the app for User Experience (UX): add input validation, empty states, sound feedback, and clear navigation.	UX Audit: Fix ≥3 usability issues (e.g., dead ends, bad contrast). Add pop-up notifiers for user feedback.	`is empty? block, if-then-else for validation, notifier (pop-up messages)`
4.7	Testing, APK Export & Peer Review	Conduct structured bug testing. Export the final application as an APK file for Android device installation.	Testing & Export: Follow a testing checklist. Export the APK, generate a QR code, install on a partner's device, and review.	`APK export, QR code install, Build > App (.apk)`
4.8	Final Presentation Day	Present the completed app, discussing the target audience, technical challenges, and UI/UX design choices.	Final Demo: 4-minute live app walkthrough on an Android device/emulator + Q&A. Certificates awarded.	`Full course — App Inventor`

Teaching Notes & Tips

Pacing Guidance

Each module contains 8 lessons (~50–60 mins), totalling ~36 hours. Lessons 2.5 (Calculator) and 2.7 (Quiz App) often need an extra session. Module 4 runs as design-and-build sprints with mandatory checkpoints.

Differentiation

Advanced students can explore CloudDB (multi-user sharing), the Web component for fetching APIs, Firebase, or BluetoothClient. Students needing support should focus on core builds; pair programming is highly encouraged.

Assessment Criteria

Final project assessed on: (1) Functionality (no crashes). (2) UI Design (matches wireframe). (3) Block Logic (correct event handlers, lists, conditionals). (4) Data Persistence (TinyDB). (5) Presentation.

Tools & Environment

Required: MIT App Inventor (browser-based). AI Companion app on Android or the emulator (requires Java). APK export needs Android 5.0+. Recommend Chrome browser. Device features require a real Android device.

Final Project App Ideas

Personal Finance Tracker (log income/expenses with TinyDB), Study Flashcard App (shuffle lists and track score), Event Countdown (Clock component), Language App (TextToSpeech), Local Guide App (WebViewer).

Prior Knowledge Expected

Students should be comfortable using a browser, saving files, and using keyboard shortcuts. No prior programming experience is required; block-based logic is designed for beginners.

Enroll Your Child Now