Introduction of

Artificial Intelligence
 Review Sprite Lab

 Why do we use sprite lab?

 What is a Sprite?

 Different blocks in Sprite lab

2
Amazon Future Engineer
Introduction of AI
Session 5
(Time limit: 2 hours)
 What is an App?
 Introduction to App
lab
 Design and Code
Interface
 Activity on App Lab

3
4
Purpose Objective

 The Concept of App lab, Dragging and  Students will be able to:

dropping using block-based coding.  Able to learn and understand about

 Types of interfaces like Design and Code the app

Interface.  Able to differentiate between

 mobile app and computer app.

The Learners will explore code.org
 Able to design an app.

5
In Last Module we have learn about Sprite lab
Let's have a Quick Review of Sprite Lab

This is an Interface of sprite lab. Interface mean the

screen which is used to interact with user and system.

Workspace: It is rectangular empty space provided to add the

code block to create App.
Block: It contain list of elements like world , sprite, location
etc. which help to build your app.

Code : In this section you can see the sprite which you have
created.

Run: This button execute your created app.

6
 What is an APP?

 APP is an abbreviated form of

the word "Application". An app
or mobile app is an application,
i.e., computer
software application, typically
one that users download onto
their mobile devices.

7
Let's watch the video

8
 Introduction to App Lab
 App Lab is a programming environment where you can make
simple apps.
 Design an app, code in JavaScript with either blocks or text,
then share your app in seconds.​

 ​

9
Let's watch the video to understand more about App lab.

10
App Lab Elements

11
 Interface
Interface : It is the screen which is used for interaction to happen between user and system.

For Example:

Desktop Mobile Interface Game Interface

Interface
12
Design Interface Elements (Button, Label.....)
In App Lab "Design Mode" lets you drag and drop user Interface elements into the
app.
Let's discuss about some elements in design interface.

13
 Adding/Importing Screens

From the screen's dropdown above the

app area, select "Import Screen/New
Screen" and follow the instructions.

14
 Button and Label
Label: label on the screen displaying the text provided and referenced by the given id
Button: Creates a button on the screen displaying the text provided and referenced by
the given id.

Ld by
the
given

Label

Butto
n

15
 Text Input
Text input:
The text input allows the person using your app to type in anything that
they want such as words, passwords or numbers.

Enter the
values inside
the text
input.

16
 Code Interface
Code interface is an interface where one can explore, learn and use block-based coding
using different elements from toolbox . In block-based coding , one can drag and drop
blocks to the workspace to create applications.
UI Controls: The user interface is the visual elements of a program that a user controls
and interacts with the application. This is often abbreviated as UI

17
 onEvent()
It is an action that make something happens. Whenever something happens, the program
responds and triggers an event. For example: keystrokes, mouse clicks, tabs.

18
 button()
The buttons allow the user to initiate some app action. It display the text provided and referenced by
the given ID.
An event is created for each type of user interaction with the button using OnEvent() and the ID.

19
 playSound()
It plays the MP3 sound file from the specified URL (Uniform Resource Locator).
Two ways to insert URL/link in the element:
1. Copy the link of a sound from the web.
2. Upload your own sound file to App Lab.

20
 setText()
It sets the text for the specified screen element.
Apps will sometimes need to change or clear the words displayed on screen. So setText() can be
used to update the text.

21
 setProperty()
It helps the user to change any property listed in Design mode for a given UI element.

22
 Project using Button and Label
Colour Change Ap Traffic Signal App
p

23
Assignment
Animal Sound App

24
 Let's Summarize

Q1. "App lab" uses the following programming Q4. What is meant by "Clicking a button " in
language to create apps/program. App lab.
a) JavaScript b) Visual Basic c) C++ a) It is away to design the app b) It is an
event
d) Java c) It is a way to create a button

Q2. An "Element' has ________ that can be

used to identify the element property Q5. Backgrounds, buttons, labels etc are called?
a) Property b) Set screen c) ID a) Properties b) Elements c) blocks

Q3.This area contains various blocks needed

for coding your App
a) Toolbox b) block area c) code
area

25
 Answers

Q1. "App lab" uses the following programming Q4. What is meant by "Clicking a button " in
language to create apps/program. App lab.
a) JavaScript b) Visual Basic c) C+ a) It is away to design the app b) It is an
+ event
d) Java c) It is a way to create a button

Q2. An "Element' has ________ that can be

used to identify the element property Q5. Backgrounds, buttons, labels etc are called?
a) Property b) Set screen c) ID a) Properties b) Elements c) blocks

Q3.This area contains various blocks needed

for coding your App
a) Toolbox b) block area c) code
area

26
“Education is the most powerful weapon which
you can use to change the world.”
--Nelson Mandela

THANK YOU

27