chatbots using AI made by kids of all ages

What does
“Artificial Intelligence”
make you think of?
3

Artificial Intelligence (AI)
a program made by people that
makes computers do things that
seem intelligent (or smart) in the
same way that humans are
intelligent
dayofai.org | 6

Toy Pet Self-Driving Car
Examples of AI
7

Key Questions to Determine “AI or Not”?
1. Does it perceive its environment?
2. Can it learn over time?
3. Does it make plans on its own?
4. Does it interact with the environment?
5. Is it intelligent or is it following its programming?
10

AI or Not?
1. Does it perceive its
environment?
3. Does it make plans on its
own?
4. Does it interact with the
environment?
5. Is it intelligent or is it
following its programming?
Toaster
Toaster
11

AI or Not?
environment?
own?
environment?
Robot Dog
Video of robot dog in actio
n
12

AI or Not?
environment?
own?
environment?
Automatic Door
13

AI or Not?
environment?
own?
environment?
Car
14

AI or Not?
environment?
own?
environment?
Face Filter
15

AI or Not?
environment?
own?
environment?
Robot with Remote
16

AI or Not?
environment?
own?
environment?
Virtual Assistant
17

AI or Not?
environment?
own?
environment?
following its programming? Self-Driving Car
18

Lesson 2: How Do
Machines Gain Intelligence?
19

Datasets
A dataset is a collection of
curated data
● Images
● Measurements (time, views,
inches, etc)
● Text
● Video recordings!
21

Quick, Draw!
Quick, Draw! by Google Quick, Draw! The Data
22

Why Learn App Inventor?
●Software is in every walk of life. Programming is becoming part of many jobs.
●Explore mobile computing
●Practical Skills -- web, math, media
● Prep for learning Java, Python, Javascript, etc.
●Creativity, entrepreneurship, idea formulation
●Problem-Solving skills
● YOU CAN CHANGE THE WORLD

This is an App Inventor app. Can you tell what it does?

No Texting While Driving
USF English Major Daniel
Finnegan created the app
in a beginning course.
"Software, after all, affects almost everything we do. Pick any major problem—global
warming, health care, or, in Finnegan’s case, highway safety—and clever software is part of
the solution. Yet only a tiny chunk of people ever consider learning to write code, which
means we’re not tapping the creativity of a big chunk of society."
Clive Thompson, Wired

Could you make the app send a particular response to a
particular number (e.g., your significant other)?
How about an app to vote by text?

Games
Text Processing Apps
Location Aware Apps Web Enabled Apps
Quizzes
Broadcast Hubs
Android, Where's my car?
What can you build with App Inventor?

Android Application Select the Designer view.

Components
Two types of components:
Visible components for creating the application user
interface (the visible look on the device screen),
Non-visible components for using the functions of the
Android devices behind the screen, e.g. phone vibration.
In a new project, a Screen component named Screen1 has
already been added by default to the create the screen of the
user interface.

Adding Component & Button Component
Palette » User Interface lists the user interface components The Screen
component is in this type but is not listed. Adding Screen components (other than
the default Screen1) will not be taught in this workshop.
Drag the Button from Palette » User Interface to anywhere on Screen1 in the
Viewer. The button is automatically positioned on Screen1 (explained later).

Parent - Child Relationship
As an example, since SpeakButton is placed on Screen1,
Screen1 is called the container or parent of SpeakButton.
SpeakButton is called the child of Screen1.
Not every kind of components can be a container.

Component List
The button is named Button1 by default.
The default name is the component type followed by an integer. The
integer increments as more components of this type is added.
Any component, except Screen1, can be renamed or deleted using
the button Rename or Delete in the Components list, respectively.
Rename Button1 to SpeakButton.

Component Property
The characteristics of a component
(e.g. its position on the parent) are
modified using the component’s
properties.
All the visible and non-visible
components could have properties.
Select SpeakButton in the Components
list and then change its Text property to
“Speak it”.

Screen Properties
The documentation of the components:
http://ai2.appinventor.mit.edu/reference/component
s
Read it now to be familiar with the properties of the
Screen component (under the User Interface
component type), and try out the properties if
desired.
For Screen1, change:
● AboutScreen to “Main screen”.
● AppName to “Hello World”.
● Title to “Hello World”.

Button Properties
For SpeakButton, try the different settings
of its Width and Height to see how its size
changes in the Viewer.
The Automatic setting is for automatic
sizing so that the button will just be big
enough to display its text or image
Finally, reset both properties to Automatic.

Label Component
The Label component is used to display text only (no user
editing is possible).
In Palette » User Interface, drag Label to Screen1 but do not
drop it yet Try dragging the label above or below
SpeakButton to see the change of the blue-line hint.
Drop the label just below SpeakButton now.

The components added to the Screen container are
always positioned vertically (one below another).
The Text property of Label1 is the text in display.
Change it to “HellonWorld”: n is a new-line character to
insert a new line.

In the Viewer, the label’s text is still
that single line in the Text property,
but it will be in two lines on the
device screen as expected (you
will see later).
Read the documentation now to be familiar with the
properties of the Label component.

Non-visible TextToSpeech Component
In Palette » Media, drag a TextToSpeech
component to Screen1.
TextToSpeech is a non-visible component,
which is also listed in the bottom of the
Viewer.
TextToSpeech is for using the text-to-speech function of the Android device,
which speaks out the English text given by your application.
Its Country and Language properties change the pronunciation and accent
not the language of the speaking, which is always in English.

Introduction to Code Blocks
Select the Blocks view in the App Inventor.

In case of using multiple Screen components, each one of
them has its own code, which is created in its Viewer and can
use only its contained components.

Four types of the code blocks of a component:

Event Handler
An event handler will execute the codes placed in the do part
(or socket) of its block when a certain event occurs in the
component.
The event is specified in the when part of the handler.
Select the component SpeakButton in the HelloWorld
project now, and then select the handler for the event
SpeakButton.Click (or drag it to the Viewer).

The event SpeakButton.Click occurs when the button
SpeakButton on the device screen is clicked (or tapped).
The events are covered in the documentation:
http://ai2.appinventor.mit.edu/reference/components
Note: all the codes of an event handler are completely executed
before another event handler can be executed. For example, after
clicking a button, during the time of this event’s handler execution,
clicking the button again (or another kind of event occurs) will not
execute the handler of this event until the previous handler
execution finishes.

EVENT HANDLER PARAMETER
An event handler can have zero or more preset values
(referred as parameters) shown on its block. For example,
the following event handler has a single parameter called
choice:

A handler parameter has already been set to a certain value
when the event occurs.
Only the codes in the do socket of the handler can use the
parameter value or reset it to another value by using the
parameter's getter block or setter block.

Code Deletion
To delete a code block in the Viewer,
drag it to the trashcan in the Viewer, or
select it and then press the Delete key
(any blocks attached to its sockets will
also be deleted).
The App Inventor does not have a
command Undo or the like for undoing
your work. Be careful of your deletion!

DEBUGGING
A block has a red triangle icon if it
has an error or a yellow triangle icon
if it has a warning (after clicking the
button “Show Warning”).
Clicking the icon shows the warning
or error message. Debug all the
warnings and errors!

Method Call
A method call calls (or executes) a certain
method of the component. A method does a
certain function of the component.
The method name is specified in the call part of
the code block.
Drag the TextToSpeech1’s call
TextToSpeech1.Speak block to the do socket
of the SpeakButton.Click event handler.

The method call of TextToSpeech1.Speak speaks out
the text (also in code-block format) attached in the
message socket of the call block:
message is called a parameter of the method.
A method can have zero or more parameters.
A call of the method may do its function differently
depending on the values (the attached blocks) of its
parameters, e.g. different calls of the Speak method may
speak different message text.

Property Getter and Setter
A property getter gets the
value of a certain property
of the component.
The property name is
specified after the
component name and a dot
in the code block.
Drag the getter block
Label1.Text to the
message socket of the
TextToSpeech1.Speak
method call.

A property setter sets the value of a
certain property of the component.
The property name is specified after
the component name and a dot in
the code block.
Drag the setter block set
SpeakButton.Text to the do socket
of the event handler but place it just
below the TextToSpeech1.Speak
method call.
PROPERTY SETTER

Built-In Text Code Block
Blocks » Built-in » Text lists the code
blocks for doing operations on text.
Drag the first code block “ ” to the to
socket of the SpeakButton.Text
setter.
This block lets you create text.
Click the part “ ” to place the cursor
inside it, and then enter the text
Speak again.
The documentation of the Built-in code blocks is in
http://appinventor.mit.edu/explore/ai2/support/blocks.html

WAYS OF APPLICATION TESTING
You can test your application in a real Android device or a
phone emulator. The details are in
http://appinventor.mit.edu/explore/ai2/setup.html
The application running in the device or emulator reflects any
application changes immediately while you are editing the
application in the App Inventor.

Using Emulator
EMULATOR STARTUP STEPS
To start the emulator, run the program aiStarter in your
computer's operating system (e.g. in All Programs » MIT App
Inventor Tools in Windows' Start menu). The startup steps
below for Windows are similar to those of other operating
systems.
A command-line window is first opened (enter Ctrl-C to close
it after the emulator is closed later).

Then click the menu command Connect » Emulator in the App Inventor.

EMULATOR UPDATING STEPS
Then, if the emulator (called the Companion App) has a new
version update, the following message or the like may appear
to ask you to update it.
Click the OK button to start the update.
Then, follow the instruction on the next message like the one
below.

Click the Got It button to close the message after reading it.
Click the OK and Install buttons on the following left and right screens of the emulator in order.

chatbots using AI made by kids of all ages

More Related Content

Similar to chatbots using AI made by kids of all ages (20)

More from Rashi Agarwal (7)

Recently uploaded (20)

chatbots using AI made by kids of all ages

Editor's Notes