Scribd
Upload
620 views29 pages

MIT App Inventor

This document provides an overview and introduction to MIT App Inventor. It discusses what App Inventor is, how to get started using it, and its basic components and functionality. App Inventor allows users to visually create mobile apps for Android devices without coding. It has three main tools - the Component Designer to build the app interface, Blocks Editor to add interactivity and logic, and an emulator to test apps. The document guides users through setting up App Inventor and provides a basic tutorial on creating a simple color changing app as a first project.

Uploaded by

ATHARSH SRIDHAR 19BCE038
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
620 views29 pages

MIT App Inventor

This document provides an overview and introduction to MIT App Inventor. It discusses what App Inventor is, how to get started using it, and its basic components and functionality. App Inventor allows users to visually create mobile apps for Android devices without coding. It has three main tools - the Component Designer to build the app interface, Blocks Editor to add interactivity and logic, and an emulator to test apps. The document guides users through setting up App Inventor and provides a basic tutorial on creating a simple color changing app as a first project.

Uploaded by

ATHARSH SRIDHAR 19BCE038
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

MIT App Inventor

Lesson 1 – Getting Started with App


Inventor
Agenda
• What is App Inventor?
• Getting Started
– Designing User Interfaces (Design)
– Creating Blocks (Code)
– Emulator (Test)

• Handling Events
– Buttons (Action)
– Components (Behaviour)
What is App Inventor?
App Inventor is a visual programming
environment used to create mobile applications
for Android devices (phones/tablets).

Facts
◦ Originally created by Google Labs
◦ Now hosted at MIT
◦ Project is open source
Explore – Setup / Tutorials
http://appinventor.mit.edu

Click on Explore to learn about App Inventor.


Where do I get the Installer?

http://appinventor.mit.edu/learn/setup/setupwindows.html
http://appinventor.mit.edu/learn/setup/setupmac.html
AI - Projects

Click on Invent to create/modify App Inventor Projects.


App Inventor- Tools
AI consists of three (3) tools that work together:

1. Component Designer
Define Graphical User Interface (GUI) and Non-GUI components

2. Blocks Editor
Determine the behaviour (algorithms and data structures) of the
components

3. Android phone or emulator


Platform for testing/using apps
App Inventor Development Cycle

Design / • Paper / Pencil


Redesign

• Component
Create
Test / Designer
User
Debug
Interface

Code • Blocks Editor


• Blocks Editor Blocks
• Phone/Emulator
What do I need to get started?
1. GMail enabled account
2. Browser (anything but IE)
3. Install the App Inventor Setup program for your
platform (Windows, Mac OS X, Linux)
– provides Android emulator
4. Recent version of Java (v6+)
5. Internet connectivity

optional
– Android phone/tablet
– device driver for Android device for live testing
Classroom environment
Development Steps
1. Open browser (Firefox or Chrome)
appinventor.mit.edu
2. Start emulator from desktop shortcut
3. Start Blocks Editor
Java application
4. Connect Blocks Editor
to emulator for testing

Notes:
Emulator takes a few minutes to start.
Each code change will be reflected in emulator.
Get Developing - Projects
An App Inventor Project is a collection of components
and blocks.

Open website
Log in using your GMAIL account

Available Actions
◦ Import existing project into new project
◦ Create new project
◦ Save/Export project
AI – Projects Page
AI Components / Events
Event based programming

Components are visible or non-visible


"objects" with defined properties and
behaviours.

Set the initial properties of components in


the Component Designer
AI Component Designer

A. Palette - Available component types


B. Viewer - "rough" visualization of app
C. Components - actual components in project
D. Properties - initial properties for component
Palette
• Grouped by type
• Action
1. select component and drag
it to the Viewer
• Note: Default name given
2. click RENAME button in
Component section to give
it a MEANINGFUL NAME
3. Change default property
values (if desired)
Screens
Properties
◦ Defaults – Comp Designer
◦ BackgroundImage
 may need to be resized
◦ Icon
 Used on devices only (50x50)
◦ ScreenOrientation
 can be fixed or flexible
◦ Scrollable
◦ Title – ALWAYS change
 exception is Screen1
◦ VersionCode - new
◦ VersionName – new

Multiple Screens (later)


Designing Apps
typical phone is
300 x 400 pixels
GUI components
◦ default position is top and
left, but can be changed
◦ location can be adjusted
 Screen Arrangements (later)
◦ Properties (common)
 Text
 Width – Fill Parent
 Height
Best Practices - Naming
Every component has a name
If component will be used in
your algorithm
◦ CHANGE ITS NAME

Naming Conventions
◦ btnName – buttons
◦ txtName – textbox (later)

Note: "Name" is decided by the


programmer
Behaviour
Represents the logic of your application

Programs consist of 3 types of structures


1. Sequential operations
2. Conditional operations (decisions)
3. Repeated operations

Use the Blocks Editor to define the app behaviour.


Component : Button
• Buttons are GUI components
– Typical Use: Input
• Take an Action / React to a User Initiated Event

• Example: Reset Score button Reset


Score
Text Width Height Alignment

Reset 40 20 center
Score

• Actions would be defined in Blocks Editor


using Blocks/Code
Button actions
Event - when click do

– This action occurs once for each button click.


• Example: Change screen color
Blocks Editor
Blocks Editor: Built-In
Definition
◦ variables, procedures
Text
◦ String library
Lists
◦ List library
Math
◦ Math operators
Logic
◦ relational operators, conditionals
Control
◦ screens, loops
Colors
◦ color library
Blocks Editor: My Blocks
Choose your
component

Set the default


properties for each
component
Dynamically Changing Properties
Properties are initially set in Component Designer
Blocks can change the properties of any
components in your Project

Blocks Editor
◦ Locate the component (Screen1)
◦ Locate the set block and provide a valid value for the
property (BackgroundColor in this example)
HELLO KITTY

DEMO
Lab 1 - ColourMe
Objective
Create an interactive app that changes the colour of the screen on the
computer.

◦ Components
 Buttons
 Screen1
◦ Algorithms
 When "red" button is clicked (Event)
change the screen colour to red (Event Handler).
 Include buttons for "Green", "Blue"
 Initially
 The app should have a "white" background when it starts and the "Reset" button will reset the screen
 Include a "Quit" button to close the application.
Lab 1 - ColourMe
App Inventor Skills
Screens
◦ properties
 BackGroundColor
Buttons
◦ properties
 Text
◦ Events
 WhenClicked
Take it with you !!
If students have phones.

Three ways to get the app on a phone.

1. Create a QR code
◦ download to a phone (using developer
email)

2. Download to the computer


◦ save a an Android install file (APK) on your
development computer

3. Download to Connected Phone


◦ install the APK directly on the phone

You might also like