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?