Coding 4: Data and Functions

Data and Functions

Coding 4

This lesson will help you earn points in the following judging rubric lines: "App Function", "Code Complexity", and possibly "User Experience and Design" and "Technical Learning".

In this lesson, you will learn...

  • Learn what data is 
  • Learn about different functions that you can use in Thunkable and in App Inventor

Key Terms

  • Data - information that your app can understand and use
  • String - a type of data that uses characters
  • Function - is a block of code that does a specific task
  • Output -  information that comes out of a function
  • Properties -  attributes that describe different components in your app
  • Number - a type data that is a number
  • Boolean - a type of data that is can be one of two values, true or false
  • Input -  information that goes into a function
  • Components - Parts of your app 

Data and Functions

So far you have learned that in order to make your app do things, you need to tell it when it should do things. For mobile apps, you tell your app to do things when an event happens. But how do you know what types of things you can tell your app to do? In order to get a computer to do something, you need to tell it to do it in a way it understands.

At some point in your life, you’ve probably heard the word data. Data can mean a lot of things, but in computer science, data is the information that your app can understand and can use. You should know about three basic types of data you will use in this lesson:

Numbers - this in a type data that is a number.

Strings -  a type of data that uses characters. You can think of strings as being text, such as the words “hello” and “world”.

Booleans - a type of information that is can be one of two values, true or false. True basically means “yes” and false basically means “no”

Functions

You can tell your app  what to do using something called a function. A function is a block of code that does a specific task. Functions take an input an and give you an output. The input is the information that goes into a function and the output is the information that comes out of a function. Let’s take a look at some other functions that you can use in App Inventor and Thunkable.

 

Math functions

Math functions take numbers, do some math on them, and then give you the answer. There are lots of different math functions that you can use. Here are some examples:

Function Input Output Examples
Adding Two or more numbers The sum of those numbers  

Subtracting Two numbers The difference of those numbers
Multiplying Two or more numbers The product of those numbers
Random integer Two numbers A random number that is between those two numbers

Examples of when you might use something like this:

  • Keeping a score in a game
  • Counting
  • Adding money and subtracting the money from someone’s balance in their bank account

Text functions

A string is a type of information that uses characters. You can think of strings as being text, such as the words “hello” and “world”.

There are also lots of functions that use text. Here are some examples.

Function Input Output Examples
Join Two or more strings Two strings put together  

Length One string The number of characters in that string

Examples of when you might use something like this:

  • Displaying words on the screen
  • Checking to see if that someone is how long a password is
  • Checking to make sure someone is using the correct password

Functions of Components  in App Inventor

All user interface components in App Inventor have functions that can be used with them. These functions can change different properties of those components. You can see all the properties of different components if you click on it in the designer view. These properties can also be changed using different functions in the block editor.

App Inventor

Thunkable

 

Properties What it does Function to change it
Height How tall the label is on the screen  

Font Size The font size of the text in the label
Text What text the label displays
Visible Whether or not the label can be seen on the screen

Activity: Using Image Properties

Go back to the  image gallery you made in coding challenge 1. Using the properties of your image, create a way for no image to be displayed when you click a button labeled “none”.

Hint: you will need to use the boolean blocks “true” and “false”.

 

Check out how we solved it!

Need help? Check out out this tutorial that creates a slideshow, but also gives the user the ability to show “no picture” on their screen.

If you didn’t do Coding Challenge 1 go back to do it now!

Reflection

In this lesson you learned about how to write functions and how to use the properties of different components to make your app do different things.

  • What property of your image did you use in the activity?
  • Can you think of anything you learned in this lesson that you want to use in your app?

Additional Resources