Introduction To MIT App Inventor: Make No Code Mobile Apps

Explore how MIT App Inventor groups UI, layout, media, drawing and animation, maps, charts, sensors, connectivity, and extension into reusable components to build mobile apps.

Explore MIT App Inventor’s UI components, including screen, button, checkbox, date picker, image, label, and more, and see how the designer and block editor shape their use.

Explore the screen component in MIT App Inventor, configure a top-level screen, set background color and orientation to portrait, and test live with AI companion.

Discover how to use the label to display text, adjust font size, color, and background, and control width, height, and alignment with designer and block methods.

Explore how to create and customize a button in MIT App Inventor, set text, change colors, images, font styles, and bind click and long-press events to update a counter.

Demonstrate using a checkbox in MIT App Inventor to capture a boolean true/false choice, respond to the selection change event, and display dynamic text in a label.

Explore how to use the date picker in MIT App Inventor to display a calendar, select a date, and show the formatted result in a label.

Explore how to use the image component to display and animate images, set size and alignment, load PNG and JPG images, and add click actions, rotation, and alternate text.

Explore the list picker UI in MIT App Inventor by creating a project, populating with brands like Apple and Nokia, and using before/after picking blocks to display the selection.

Discover how to use the list view to display items with main text, detail text, or images, and learn to handle selections with blocks and a selected label.

Explore configuring a list view with main text and detail text in MIT App Inventor. Learn to add the detail field, display detail beneath main text, and switch layouts.

Learn how to build a list view with image and text in MIT App Inventor, including loading images, adding image items, and adjusting spacing and orientation.

Learn to use the notifier component in MIT App Inventor to display dialogs, alerts, and progress, log messages, and respond to user choices or text input.

Explore the password text box in MIT App Inventor, validate user input with a login button, and show correct or wrong password notifications using dialog boxes and a notifier.

Build a no-code MIT App Inventor app with a password text box and login button; enforce three wrong attempts, disable input, and reset the counter on a correct password.

This lecture demonstrates adding a counter to limit wrong password attempts in MIT App Inventor, incrementing on each failure and disabling login after three tries and resets on correct password.

Implement a draggable slider in MIT App Inventor with a 0 to 100 range, and display the current value on a label in real time.

Explore how the spinner shows a dialog of items and updates a label with the selected brand using get selection and a join block prefixed by 'selected brand'.

Explore how to add a switch in MIT App Inventor, bind its on/off state to a label, and customize colors to show Bluetooth is on or off.

Create a new app, drag a text box, and configure hints, multi-line, and styling, then add a lock button to switch the text box to read-only to prevent edits.

Explore the time picker in MIT App Inventor, a visible button that opens a dialog to select hour and minute, and displays the selected time as 'Selected time is HH:MM'.

Learn to implement the web viewer component to load websites, use the go to URL block, and navigate back and forward with buttons in an MIT App Inventor project.

Explore layout components in MIT App Inventor, including horizontal and vertical arrangements, horizontal scroll, vertical scroll, and table arrangement, to structure UI elements in left-to-right or top-to-bottom, table-like layouts.

Learn to use the horizontal arrangement layout component in MIT App Inventor to align components left, center, or right. Add multiple elements in a horizontal layout.

Explore how the horizontal scroll arrangement lets you scroll through multiple components beyond the screen width, by adding buttons, a label, an image, and a slider with adjustable width.

Explore how vertical arrangement groups components in a top-to-bottom order and use vertical scroll arrangement to manage overflow in MIT App Inventor.

Explore vertical scroll arrangement, a scrollable vertical layout that lets you display many components by scrolling, with demonstrations using buttons, labels, sliders, and checkboxes.

Explore the table arrangement layout in MIT App Inventor to display components in rows and columns, create a grid, and adjust widths, colors, and alignment.

Explore media components in MIT App Inventor, including camcorder, camera, image picker for a profile picture, and players for audio and video, plus sound recorder, speech recognizer, text-to-speech, and translator.

Learn to use the non-visible player media component to load an MP3, play, pause, and stop audio, with looping and foreground behavior, on MIT App Inventor.

Learn to use the non-visible sound component in MIT App Inventor to play short sound files, vibrate the phone, and manage playback with play and stop blocks.

Explore MIT App Inventor's speech recognizer, a non-visible component that converts speech to text. Create a project with a speak button and a label, and display the recognized words.

Learn to use the text to speech non-visible component in MIT App Inventor to speak text entered in a text field when you press a speak button.

Learn to use the translator component in MIT App Inventor to convert text between languages via a simple UI, with input text, a translate button, and a result label.

Explore how to add a video player in MIT App Inventor, configure height, width, volume, and source, and implement start, pause, and stop controls for MP4 videos.

Explore sensor components in MIT App Inventor, including accelerometer, barcode scanner, light, location, orientation, proximity, pedometer, thermometer, barometer, clock, and gyroscope, and how to set timed updates.

learn how to use the barcode sensor in MIT App Inventor to scan a QR code with the camera, capture the encoded message, and display it in a label.

Explore the clock sensor in MIT App Inventor, a non-visible component that uses the phone clock to fire a timer at set intervals and update a label.

Learn to use the light sensor, a non-visible MIT App Inventor component, to read lux levels and display room light on or off, guiding an emergency flashlight app.

Explore the parameter sensor in MIT App Inventor, a non-visible pedometer that uses the accelerometer to count steps and display distance and steps.

Explore storage components in MIT App Inventor to persist data across sessions and devices, including text and csv files, tiny db, tiny web db, and Google spreadsheet integration.

Explore TinyDB, a non-visible storage component in MIT App Inventor that stores and retrieves data on-device using tags. Note that its data is device-specific, and the next topic covers TinyWebDB.

Explore the tiny web db component, a non-visible data store that saves and retrieves app data via web services using a tag and value.

Learn how to store data in a Google spreadsheet from MIT App Inventor and retrieve it with a read function using a web block, CSV export, and list processing.

Create a simple no-code mobile app in MIT App Inventor that increments, decrements, and resets a counter using increment, decrement, and reset buttons, starting from zero.

Design a user interface for an increment decrement counter app using MIT App Inventor, featuring a counter label and three buttons (increment, decrement, reset) in a horizontal layout.

Build a no-code counter app in MIT App Inventor using a label and three buttons to increment, decrement, and reset the counter with set text and math blocks.

Build an age calculator app in MIT App Inventor by selecting birth and reference dates to compute age in years and months.

Build the age calculator UI in MIT App Inventor using two date pickers, a spacer label, and a calculate age button to show the date difference.

Integrate date picker functionality into the age calculator by renaming components, binding date selections to display ddmmyyyy, and calculating nonnegative years with start and end dates.

Demonstrate building a no-code app that converts decimal numbers to binary or hex, using a single input field and two buttons for binary and hex results.

Learn to design a number conversion app UI in MIT App Inventor, including a decimal input text box, two buttons for binary and hex, and a green result label.

Integrate binary and hex conversion in MIT App Inventor by converting decimal input from a textbox using blocks and showing results in a label with a 0x prefix.