Q3 L1: History and Development of Mobile building mobile phone

Applica ons applica ons targe ng the Android and

iOS opera ng systems
What is Mobile Applica on?
- uses a block-based programming
- also referred to as a mobile app or language built on Google Blockly and
simply an app inspired by languages such as StarLogo
- a computer program or so ware TNG and Scratch, empowering anyone
applica on designed to run on a mobile to build a mobile phone app to meet a
device such as a phone, tablet, or watch need
- originally intended for produc vity - To date, 6.8 million people in over 190
assistance such as email, calendar, and countries have used App Inventor to
contact databases, but the public build over 24 million apps.
demand for apps caused rapid - Its interface is offered in more than a
expansion into other areas such dozen languages.
as mobile games, factory automa on, - People around the world use App
GPS and loca on-based services, order- Inventor to provide mobile solu ons to
tracking, and cket purchases real problems in their families,
- generally downloaded from applica on communi es, and the world.
distribu on pla orms which are - It has also been adapted to serve
operated by the owner of the mobile requirements of more specific
opera ng system popula ons, such as building apps for
- some are free, and others have a price, emergency/first responders and
with the profit being split between the robo cs.
applica on's creator and the
Prof. Hal Abelson
distribu on pla orm
- o en stand in contrast to desktop - conceived the idea of App Inventor
applica ons which are designed to run while on sabba cal at Google Labs in
on desktop computers, and web 2007
applica ons which run in mobile web - had previously taught a course at MIT
browsers rather than directly on the on mobile programming, but at that
mobile device me mobile app development required
significant investment on the part of
developers and development
Q3 L1: INTRODUCTION TO APP INVENTOR environments
- publicly announced the Android
Overview, History and Development of App opera ng system in 2007
Inventor - Also in 2007, Abelson and Mark
MIT APP INVENTOR Friedman of Google began developing
an intermediate language between the
- an online development pla orm that blocks language and Java APIs for
anyone can leverage to solve real-world Android, called Yet Another
problems Intermediate Language (YAIL).
- provides a web-based “What you see is
what you get” (WYSIWYG) editor for
Yet Another Intermediate Language (YAIL) By making mistakes, students have the
opportunity to prac ce more of the
- intended to help younger learners
computa onal thinking principles, such as
program for Android
debugging, described by Brennan and Resnick.
- generated from a block-based language
based on OpenBlocks and the design of Technical development at MIT focused on
which was drawn from StarLogo TNG development of new components including:
- its user interface and related
- cloud-oriented data storage (CloudDB),
components embodied Papert’s idea of
- robo cs (LEGO™ EV3),
“powerful ideas in mind-size bites”
- and geographic visualiza on (Map).
- its Google version terminated at the
end of 2011, but the educa onal App Inventor team also developed Internet of
technology was transferred to MIT so Things related extensions so learners could
that development and educa onal interact with physical hardware external to their
aspects could con nue mobile devices, and to leverage the growing
collec on of small computer boards, such as:
Prof. Abelson joined Prof. Eric Klopfer of the
Scheller Teacher Educa on Program lab and - Arduino
Prof. Mitch Resnick of the MIT Media Lab, - BBC micro: bit,
forming a group called the MIT Center for - and Raspberry Pi.
Mobile Learning to carry on the App Inventor
vision. To this day, the team con nues its work of
development, crea ng complementary
educa onal materials in parallel.
In late 2011, Google transferred stewardship of
the App Inventor project to MIT. Much of the
development focused on increasing capabili es Q3 L1: GETTING STARTED WITH APP INVENTOR
to support educa onal goals of the project. The App Inventor Environment
At this me, the team developed addi onal - you can begin programming with App
curricula, making them freely available to Inventor by opening a browser to this
teachers for computer science and site
computa onal thinking educa on. - opens the newest version of App
The MIT team also hosted a number of 1-day Inventor, which was released in
workshops, primarily around the northeast December, 2013. Some people call it
United States, training teachers in the pedagogy App Inventor 2, but it is formally just
of App Inventor. They now focus on guided and named App Inventor, and the previous
open explora on in their materials rather than version is called App Inventor Classic.
presen ng students with step-by-step The App Inventor programming environment
instruc ons in order to encourage self-guided has three key parts:
learning.
1. The Designer Editor
- used to select components for your app
and specify their proper es.
 - its proper es such as color, font, height,
width, etc. can be changed
- found on the le -hand side of the
Designer View This pale e
- contains different drawers such as User
Interface, Layout, Media, Drawing and
Anima on, etc.

2. The Blocks Editor

- used to specify how the components
will behave (e.g., what happens when a
user clicks a bu on).

Two Main Types of Components

Visible Components

- part of the User Interface

3. Emulator or Mobile Device (Android or
- Examples: Bu on, TextBox, Label, etc.
iOS)
- You can actually run and test your app Non-Visible Components
as you are developing it. If you don’t
have an Android/iOS device handy, you - not seen and thus not a part of the UI
can test the apps you build by using the screen but they provide access to built-
Android emulator that comes with the in func ons of the Android device
system. - Examples: Accelerometer, Sound,
Orienta onSensor, etc.

User Interface Components

Q3 L2: ADDING COMPONENTS IN THE
DESIGNER EDITOR  Bu on - detects clicks and many aspects
of its appearance can be changed, as
Components well as whether it is clickable (Enabled)
- the pieces of your app that do ac ons  CheckBox - detects user taps and can
for you change their Boolean state in response
- chosen on the Design screen and  DatePicker - launches a popup dialog to
dragged onto the phone allow the user to select a date on the
Gregorian Calendar
  Image - displays images and basic Media Components
anima ons
 Camcorder - records a video using the
 Label - shows text
device’s camcorder
 ListPicker - displays a list of texts for the
 Camera - uses a camera component to
user to choose among
take a picture on the phone
 ListView - places a list of text elements
 ImagePicker - a special-purpose bu on
in your Screen to display
wherein when the user taps it, the
 No fier - displays alert messages and
device’s image gallery appears, and the
creates Android log entries through an
user can choose an image
assortment of methods
 Player - plays audio and controls phone
 PasswordTextBox - same as the
vibra on
ordinary TextBox component, except
 Sound - plays sound files and op onally
that it does not display the characters
vibrates for the number of milliseconds
typed by the user
specified in the Blocks Editor
 Slider - displays a Slider
 SoundRecorder - records audio
 Spinner - displays a dialog with a list of
 SpeechRecognizer - listen to the user
elements
speaking and convert the spoken sound
 Switch - detects user taps and can
into Text using the device’s speech
change their Boolean state in response
recogni on feature
and iden cal to CheckBox except in
 TextToSpeech - speaks a given text
appearance
aloud
 TextBox - lets the user enters text
 VideoPlayer - plays videos
 TimePicker - opens a dialog to allow the
 Yandex Translate - needs Internet access
user to select a me
to translate words and sentences
 WebViewer - used for viewing Web
between different languages using the
pages
Yandex.Translate service
Layout Components

 HorizontalArrangement - displays a
Proper es
group of components laid out from le
to right - characterized every component
 HorizontalScrollArrangement - places - the a ributes that the component has
components that should be displayed
from le to right
 TableArrangement - places components
that should be displayed in tabular form
 Ver calArrangerment - displays a group
of components laid out from top to
bo om, le -aligned
 Ver calScrollArrangement - places
components that should be displayed
one below another
- Blocks can also be used to get and set Blocks Editor
most component proper es.
 forms the second central work window
of the AI development environment

 where you program the behavior of

your app

 where you will bring the individual

components of your app to life and
Manipula ng Component State: Using assign them specific tasks, which
Ge ers & Se ers together will form the overall
func onality of your app
Se er blocks are commands that change
the value associated with the property. Blocks

- color-coded and you can connect them

like puzzle pieces to create a program

Workspace
Ge er blocks are expressions that get the - where you assemble the blocks into a
current value of the property. program

Backpack

- allows you to carry around blocks

throughout your project repositories,
allowing blocks to be transferred
between projects and between screens

Trash Can

Q3 L3: RECOGNIZING APP INVENTOR 2 - where you place unwanted blocks

AND ADDING FUNCTIONALITY TO Three Categories of Blocks
COMPONENTS USING BLOCKS
 Built-in Blocks are always available and
The next step in developing a mobile handle things like Control, Logic, Math,
applica on is adding the func onali es to Text, Lists, Colors, Variables and
the different components. This gives you Procedures.
the opportunity to establish interac on
between the interface and user. In  Component-Specific Blocks are blocks
manipula ng component behavior, we are that correspond to the components that
going to work with App Inventor Blocks you have chosen for your app.
Editor. It makes use of blocks to form
 Any Component Blocks are special
desired ac ons for the app.
blocks that can be used to prevent
making lots of repe ve codes.
Applying Event Handler Blocks color changed, then height size before
displaying the text “Again?”.
 How the applica on reacts when an
event is triggered is specified by Event Ge er and Se er Blocks
Handler blocks. For example, Bu on1 is
 In App Inventor Designer window, you
clicked, the blocks inside when
specify the ini al state of a component.
Bu on1.Click will be executed. Event
In App Inventor Blocks Editor, there is
Handler blocks are colored Dark
such a way to manipulate the state of a
Orange in Brown tone. These blocks
component. App Inventor can get and
start with the word When.
set most component proper es via
Applying Command and Expression Blocks blocks.

 Once an event handler triggers, it  Ge er Blocks are expressions that

executes a sequence of ac ons in its contain the present value of a
body. A block that specifies an ac on to component property.
be performed is called
 Se er Blocks are commands that alter
a Command block. Usually, command
the value associated with the
blocks in AI2 are either purple or blue
component property.
green in color.

 Expressions are blocks that denote a

value. To iden fy an expression block, Q3 L4: APP INVENTOR – EVENT-DRIVEN
they have le ward poin ng plugs. PROGRAMMING
Usually, they are plugged in as input
values for command blocks. Event-Driven Programming

Plugging in Input Values - A paradigm/model where the flow of

program is determined by events
 There are some command blocks which - What the program DOES depends upon
require one or more input values to the ac ons of the user or the system.
completely specify their ac on. The
need for input values (or parameters or Models of Programming
arguments) is determined by the Sequen al (1840’s – present)
presence of sockets on the right edge of
the command. You can use Expression - Definite beginning point, ending point
blocks as input values. and flow to the code
- Changes to code execu on handled by
About Control Flow branch instruc ons
 The order of command or Control - Pauses (waits) added through the use of
Flow is important when you develop an empty looping structures
applica on. Once the event handler has - Program is Control
been triggered, you need to make sure
which ac on or command should come
first. The sequence of blocks to run are
from top to bo om. In the example
above, Bu on1 is disabled, background
Event-Driven (1960’s – present) The Different Types of Events

- No preset flow to the codes 1. User-Ini ated Event

- Changes to code execu on handles
- occurs when the app is told to do
through event/event handlers
something through such inputs as
- Pauses (waits) handled with Timer
touch, voice commands or bu on clicks
Events
- User is in Control - used to record informa on, change
preferences or navigate around the app
Components Capture Events
2. Automa c Event
Components are what an app uses to capture
- triggered when objects interact with
events and there are two types of components:
each other within the canvass
Visible components component, such as when balls collide
with each other or when an ImageSprite
 we see on the screen like bu ons,
reaches the edge of the canvass
textboxes and images
- most o en used in games and other
 o en trigger events when these are interac ve apps
interacted with on screen, such as when 3. Timer Event
one these is touched or when text is - captures the passage of me
entered in these - uses the clock component to wait for a
specific me or date to happen, such as
Nonvisible components having a sound play at 5 p.m.
 sensors that are built into the device - can also wait for a certain amount of
which do not show up on the screen like me to pass before ac va ng
the Loca onSensor, SoundRecorder and something, such as making a phone
clock snooze every 5 minutes before sounding
another alarm
 can capture events that happen in the - can execute or can be set for regular
background, such as the current me intervals, such as every day or every
and current GPS loca on hour
 can also be used to capture events that - also used to create anima ons, perform
happen outside the screen, like the an ac on on a regular basis and trigger
phone being lted, texts coming in, and alarms
images taken by the camera 4. Sensor Event
- The device running the app has
Events different sensors on it. These sensors
(GPS, Accelerometer, Device Orienta on
 An Event is any interac on that the user
and others) can be checked on certain
of the system has with the applica on.
things like whether the phone is in
 The Event acts as a trigger to make the portrait or landscape orienta on.
app do something.
 5. External Event global variables are accessed throughout the
- happens when the app receives data en re program
from an outside source
- can be incoming calls and text
messages, as well as GPS data from
- o en used to capture data from other
devices, to no fy when websites have
new data, or to automate certain
ac vi es in response to that data

Event Trigger Behaviors

 Apps are event-driven, without events,

an app will do nothing.

 The app waits for the event trigger to

execute and executes code in the Event
Handler which contains the code for an
event that is linked to an object.

 What an app does in response to an

event is called a Behavior which is
configured using blocks in Blocks Editor.

 While App Inventor made capturing

events super simple by using
components, it is up to you to decide
how the app will behave with these
events.

 Behaviors can be as simple as changing

the text on a bu on to something as
complex as syncing databases between
mul ple devices. To create new
behaviors, an event handler is needed.

How does it work?

1. App is executed
2. App listens for events
3. App checks for Event Handler
4. Event Handler code run

NOTE:

Local variables can be accessed only within the

func on or block where it is defined, whereas