Designing and Coding with Scratch

VARIABLES

Before you start coding, let’s learn about variables

There are times you need to keep track of different information inside your Scratch project. That is what variables are for.

You’ll be using variables in the Scratch project you will build in this lesson.

FIRST STEPS

scratch cat

PARTS OF SCRATCH

Click on the arrows on the left and right to learn about the different parts of the Scratch environment.

TIME TO TRY IT!

ACTIVITY 1: CODE THE RECYCLE GAME

Follow the video below to code the Recycle Game, or if you'd rather explore other tutorials, go to the Scratch Ideas page.

Designing and Coding with App Inventor

FIRST STEPS

  • Sketch it on paper first
    • Use your paper prototype
    • Have it next to you
App Inventor bee logo

PARTS OF THE DESIGNER

Click on the arrows on the left and right to learn about the different parts.

TIME TO TRY IT!

ACTIVITY 1: DESIGN AN APP

Follow the video below to learn more about designing the Recycle Game with App Inventor

Now that you have added all the components for the app, you’ll move to the Blocks Editor to start coding the app next!

VARIABLES

Before you start coding, let’s learn about variables. You’ll need to use them when you code the Recycle Game.

If you are making a mobile app, there are times you need to keep track of different information inside your app. That is what variables are for.

THE BLOCKS EDITOR

  • Open your Recycle Game project in App Inventor
  • You’ve added all your components
  • Now switch to the
    Blocks Editor
blocks editor button

PARTS OF THE BLOCKS EDITOR

Click on the arrows on the left and right to learn about the different parts.

ACTIVITY 2: CODE THE RECYCLE GAME

Follow the video below to code the Recycle Game, or if you'd rather try other tutorials, go to the App Inventor tutorial page.

Make a Scratch Project

One option for your Technovation project is to make a Scratch project to solve your problem.
 
Let’s get started by exploring the Scratch world and coding your first project!

ACTIVITY 1: EXPLORE SCRATCH

With the help of your parent or mentor, follow the video below to:
  1. Sign up for a Scratch account
  2. Do the Getting Started tutorial
  3. Try 2 or 3 other tutorials

SAVING YOUR PROJECT

When you make a cool project, you want to make sure and save it!

Give your project a descriptive name so you’ll know what it’s about.

Then Save Now under the File menu.

To see all your projects, click on the Folder next to your username.

If you click on a project, you will see the project page, where you can run the project.

Click See inside to edit the project again.

ACTIVITY 2: TELL A STORY

Choose one of the problems you and your team are thinking about solving. Make a new project and tell a story about the problem with Scratch.

Be creative! How will you tell people about the problem?

GREAT JOB!

Did you have fun coding in Scratch?

Excited to experiment more?

Check out the thousands of public projects on the Explore tab on the Scratch website. 

 

ADDITIONAL RESOURCES

You can also make your project using OctoStudio, a version of Scratch that runs on your phone.

It works a lot like Scratch, but has been designed so you can build and run your project directly on the phone. 

two girls working at a computer

Algorithms

WHAT IS AN ALGORITHM?

An algorithm

  • Is a set of steps to complete a task.
    • The order of the steps is important!
  • Should be easy to understand by the user.
list of 3 steps

In this video, watch as this dad teaches his kids a lesson about why algorithms must be exacteasy to understand, and in the right order.

WHAT DO YOU THINK?

peanut butter and jelly sandwich
  • What was the algorithm the kids were writing?
  • Why did their first attempts fail?
  • How did they improve their algorithms?

ALGORITHMS MUST BE EXACT!

Computers cannot make decisions on their own!
 
Just because you understand what you are saying, does not mean the computer does!

ALGORITHMS IN CODING AND AI

Computers don’t understand human languages.
 
Special programming languages translate human steps so the computer can understand.

ACTIVITY: DRAWING SHAPES WITH ALGORITHMS

Follow the directions in the worksheet

Stop and Discuss

How did the activity go?

  • Did your partner draw the shape correctly?
  • What worked?
  • What didn’t work?
two girls talking

If your partner didn’t get it right, try fixing your algorithm so they can follow the steps!

TIPS TO REMEMBER

  • Be exact!
  • Put things in the right order, called a sequence
  • The computer can only do what you tell it to do!
two girls working on app inventor

Make a Mobile App

One option for your Technovation project is to make a mobile app to solve your problem.
 
It’s never too early to start learning how to code an app, so let’s get started!
 
 

ACTIVITY 1: TALK TO ME APP

Follow along with the video below to learn how to use MIT App Inventor to make a mobile app.

First, set up your computer and device for testing by clicking this button.

What else can you add to the Talk to Me app?

 
Try Part 2 below if you want to try the shake and say anything features!

LET'S THINK ABOUT THE
TALK TO ME APP

screenshot of talk to me app
  • EVENT

    • user presses button

  • ACTION

    • app speaks

EVENTS

Events are when something happens in the app.

Like when a user presses a button:
button click event block

In MIT App Inventor, event blocks are gold colored and  shape.

ACTIONS

Actions are when the app does something.

Like when the app speaks:
In MIT App Inventor, action blocks are purple colored and fit inside the event block.

GREAT WORK!

Was making an app easier than you thought?

Excited to try more?

There are many more tutorials to try on the MIT App Inventor website.


You can also check out our
Technovation student-led tutorials!

girls coding

Web Apps Using AI Models

  • Train a machine learning model using Python libraries in a Jupyter Notebook
  • Incorporate a trained machine learning model into a Streamlit web app

These are the activities for this lesson:

WORKING WITH MACHINE LEARNING MODELS

Another major feature of Jupyter Notebooks, Python, and Streamlit is the ability to train machine learning models and make predictions. 

If you are new to Artificial Intelligence,  you might want to view the AI lessons in this curriculum to learn the basics before jumping into the more advanced coding involved here. You can use a user-friendly machine learning model platform like Teachable Machine to make a model and still incorporate it into a Python web app. 

If you have had some experience with artificial intelligence and working with datasets using Jupyter Notebooks, this is a good next step for you. 

In this lesson, you will learn about some of the Python machine learning libraries, and some of the different machine learning models you can create using Python. 

To review, to create a machine learning model, there are 3 main parts. 

DATASET

FINDS PATTERNS WITH LEARNING ALGORITHM


PREDICTION!

The dataset is your input for the model. It can include text, images, sounds, or poses. We worked with text and numerical data in Unit 2 using Jupyter Notebooks. We will continue to work with text data in this lesson, in the form of a spreadsheet.

Finding Patterns is essentially building the machine learning model using the dataset. Python contains many libraries that will build an AI model from data. In this curriculum, we will use many of the functions from the scikit-learn package. In addition to the libraries it provides, the website contains lots of excellent information about machine learning and the process of building models. It is a great resource to learn more!

Once you have created your model, the model can be used to predict an outcome based on new information. Once again, Python supplies libraries that enable this.

PREPROCESSING DATA

Before your dataset can be sent to the algorithm for building the model, it must be preprocessed, or “cleaned” so that the model building algorithm can work with it and make the most accurate model possible. In fact, the bulk of the work for creating a machine learning model is in the preprocessing. You will need to look carefully at the data to decide what is important, what can be left out, and what needs to be cleaned up.

What does preprocessing involve? With a text-based dataset, here are some things to deal with.

 

Null Values

Sometimes the dataset contains blank or null values, especially if the data is survey data. Sometimes you will eliminate any rows that have null data.

However, if the number of samples is low, you may not want to eliminate them. Another option is to replace a null value with some other value. It could be zero, or it could be the average of all the other values for that field.

Outliers

Sometimes the data contains one or two samples that are very different from the rest of the data. This might skew the model. You don't want the outliers to affect how the model is created, so often outliers are eliminated from the dataset.

For example, you might have a dataset where 95% of the samples are people aged 10-30, but you have a few random samples where the people are over 50. Since the vast majority of samples are in the 10-30 age group, you can consider removing the samples from the older age group.

Standardization

Often the numbers in a large dataset vary, depending on what features are represented. For example, you might have age, that varies from 0 to 70, but then you might have salary, that ranges from 0 to 500,000! The scales are very different, so one feature might count more in the model.

To fix, this, you can standardize the data so it's on a single scale. scikit-learn provides a StandardScaler, which updates each features so the mean is 0 and the standard deviation is 1.

Another thing to consider is a balanced number of samples for each class or label. You want to make sure their are about the same number of each class in your dataset.

Encoding

AI likes numbers, not necessarily words. So it helps to have all of the data converted to numbers. scikit-learn provides Encoder functions, so you can easily convert a range of possible text values to a range of numbers.

An example could be activity levels, with sample values sedentary, light, moderate, high. Those responses could be encoded to be values 0, 1, 2, and 3, which is much easier for the model building algorithm to handle.

SPLITTING DATA

Once you have preprocessed your data, you need to split it into a training set and a testing set. The training set will be used to train and create the model. Then you will test your model using the test set to see how it performs.

There are standard ways to split it (usually 75% for training, and 25% for testing) but you can split it however you want. Again, functions are provided so this is all automated for you. 

CREATING THE MODEL

The next step is creating the model. A big decision to make is, which algorithm do I use? There are many different supervised learning algorithms to choose from, and it is hard to know which one to use. A good process is to try out several different algorithms and then see which one gives you the best accuracy. 

The first step is to decide whether you need a classification algorithm or a regression algorithm. That depends on what you are trying to predict. 

Classification algorithms are used to predict discrete targets or classes. For example, classifying email as spam or not spam would be a classification problem

Regression algorithms are used to predict something that is along a continuous range. One example would be predicting how much salary a person will be paid. The prediction is a range of numbers and the output could be any value along that range. 

Here are just a few of the popular types of model creation algorithms.

neural network

Classification

  • Decision Tree
  • Random Forest 
  • K-Nearest Neighbors
  • Naive Bayes
  • Logistic Regression
  • Support Vector Machine

Regression

  • Linear regression
  • Ridge Regression
  • Lasso Regression
  • Polynomial Regression
  • Bayesian Linear Regression
  • Support Vector Regression

Note that some algorithms fall under both types. For example, there is a Decision Tree Classifier as well as a Decision Tree Regressor. And a Support Vector Machine works for classification, and Support Vector Regression works for regression. 

So, how do you decide which one to use? You should research to see what other data scientists use for different situations to see what might for for your model. You should also try out some different algorithms with your data and then find which one provides the best accuracy. You can also tweak parameters for a particular algorithm to see if it returns a more accurate model. 

scitkit-learn provides functions for all of these algorithms, so it’s straightforward to create the model. 

EVALUATING THE MODEL

You want your model to be the best it can be, so you need to evaluate its performance. Two common variables in evaulating a model are bias and variance. 

Bias is the difference between the model’s predicted value and the correct value. 

Variance is how much the predictions change when different data is used. 

You want to achieve a good balance between bias and variance.

High bias -> underfitting.

Underfitting happens when the model is too simple to account for the noise in training data. This can happen if there is not enough data or not enough features (columns), or too much noise in the data. If a model doesn’t perform well on both the training data and the testing data, it signals underfitting.

High variance -> overfitting.

Overfitting happens if you train a model on one set of data and it performs very well, but if you then present it with new data, it does not perform well at all. This can happen if the model is overly complex and it tries to fit too closely to the training data. The model may predict very well on the training data, but then performs poorly on testing data.

One technique to check the performance of a model is cross-validation.

Cross-validation means training your model several times, using different splits of training/testing data each time. Your dataset is split into several folds, or subsets. Then one fold is held out as the validation or test set, and the remaining folds are used to train it. This is performed several times, so each time the training and test sets change. 

 

sciikit-learn also provides a metrics library so you can easily get performance scores for your models. 

  • accuracy score = correct predictions/total predictions
  • precision = true positives/(true positives + false positives)
  • recall = true positives/(true positives + false negatives)
  • F1 score = (2 x precision x recall)/(precision + recall)
  • specificity = true negative/ (true positives + false negatives)
  • confusion matrix  – shows true positive, true negative, false positive, and false negative counts

By checking metrics from various algorithms, you can choose the best model. 

PREDICTING!

Once you have a model that you are satisfied with, you then want to use it in your app. 

It is common practice to do the preprocessing, creation, and evaluation of your model using Python, in an environment like Jupyter Notebooks. From there, you can export your model as a file.

Then, within your Streamlit app, you can load the model and use it to make predictions. 

In this lesson’s activities, you will go through this entire process using a stroke risk dataset. You will see how to preprocess the data, create models using different algorithms, and then use a model in a simple Streamlit app to predict the risk of stroke, given some input characteristics. 

ACTIVITY 1: TRAIN AN AI MODEL IN JUPYTER NOTEBOOK

Estimated time: 60 minutes

Explore a Stroke Risk Dataset to build an AI model

Follow this video to:
  1. Download a stroke prediction dataset from Kaggle.
  2. Work with the data in a Jupyter Notebook to:
    • Review the data
    • Preprocess the data to prepare it for the model
    • Create some different models
    • Evaluate and choose a model for your app
    • Export the model
Download Notebook

CHALLENGE

Try out a different model than the ones in the Jupyter Notebook. 

  1. Research the scikit-learn website for other classification algorithms, and look at other model-building examples on Kaggle.
  2. Choose one algorithm and add the code to your notebook to create the model.  
  3. Use the scikit-learn metrics to check for accuracy. 

How does your model perform? Is it better than any of other algorithms in the notebook?

ACTIVITY 2: BUILD A PREDICTION APP

Estimated time: 45 minutes

Use your model in a Streamlit App

Follow this video to make a web app that will make a stroke risk prediction based on user input.

CHALLENGE

The Iris dataset is a classic dataset that classifies iris flowers into 3 species (setosa, versicolor, and  virginica) based on the petal and sepal dimensions.

  1. Do some research on the dataset to learn its features and targets. 
  2. You can download the dataset and create your own model or use this model (pickle file) created using K-nearest neighbors. Note that no scaler was needed for this dataset.  The pickle file contains just the model.
  3. Import the model and create a Streamlit app to predict the iris species based on the four dataset features.

TECHNOVATION INSPIRATION

Here are some pretty amazing examples from Technovation participants who used Python and Streamlit to build web apps incorporating machine learning models. 

REFLECTION

You have gone through the entire process of preprocessing a dataset, building several models, and evaluating and choosing one to use in an app.  That is A LOT to learn in one lesson!

reflection
What type of model do you think you will need for your solution - classification or regression?
What parts did you find difficult to understand?
What steps can you take now to learn more so you can build your solution?
Previous slide
Next slide

REVIEW OF KEY TERMS

  • Preprocessing – taking a dataset and making sure the data in it is suitable to train a machine learning model with
  • Classification algorithm – an algorithm used to train a machine learning model that will classify or predict discrete values
  • Regression algorithm – algorithm used to train a machine learning model to predict a value on a continuous range
  • Bias – the difference between the model’s predicted value and the correct value, due to incorrect assumptions that simplify the model
  • Variance – the amount of variability in model predictions, when a model is unable to generalize when faced with new data
  • Overfitting – when the model fits too well to the training data that it cannot predict well on new data, caused by high variance in the model
  • Underfitting – when a model is simplified too much and does not perform well on either training or testing data, caused by high bias or assumptions in the model
  •  

ADDITIONAL RESOURCES

Machine Learning 

Streamlit

girl working at computer

Web Apps: Diving In

  • Make a web app that displays images and plays sounds
  • Learn how to make data graphs in Python using Jupyter Notebooks
  • Make a data dashboard web app with Streamlit

STREAMLIT

Making a web app with Streamlit and Python is straightforward. Like block-based coding platforms, the Streamlit platform includes many components and widgets that can be added to your app with a single line of code. Most of the code is already written and packaged for you, so you can focus on the goals of your app, rather than getting bogged down in lots of difficult code. 

To practice using Streamlit, we will take one of our mobile app examples from Thunkable and App Inventor, and show how the same app can be built in web app form using Streamlit. 

ACTIVITY 1: SOUNDBOARD APP

Estimated time: 30 minutes

Code a Streamlit Web App

  1. Click button below to download assets (images and sound files) that will be needed to make the app.
  2. Follow this video to create a simple Soundboard app that plays sounds when a button is pressed.
    If you haven't already installed Python and Streamlit, complete the Exploring Web App Builders Activity before doing this activity.
  3. Add a fourth person to your app. Find an image and short sound file to add to the app. Here is a link to some famous speeches.
Download asset files

WORKING WITH DATA

The Python language works well with data. Python has many libraries specifically made to allow coders to read, manipulate, and plot data. When combined with the Streamlit platform, coders can easily make apps that analyze and display data for users. And you can take the next step to incorporate datasets and machine learning models into an app.

data graphs

Most programmers and data scientists work with data in Python is by using software called Notebooks. One of the most popular Notebook interfaces is Jupyter Notebook. According to the Kaggle Survey 2022 results, Jupyter Notebooks are the most popular data science interactive development environment (IDE), used by over 80% of respondents. 

Jupyter Notebook runs in a browser, although there are other interfaces. For example, it can integrate directly in Visual Studio Code. 

The engine behind the notebook that runs the code is called a kernel. For Python, you will use the ipython kernel. 

The notebooks allow you to write text as well as Python code. Text is written using a markdown language, with simple commands to format the text. It’s a good way to add headers and explanations of the code included in the notebook.

You can also execute Python code directly in the notebook. 

jupyter notebook screenshot of code cells

Similar to a physical notebook you might use in school, Jupyter Notebooks are a great way to take notes, organize your thoughts with a data project, and explore information. The added feature of executing code allows you to experiment with Python code in a controlled and organized way. 

Jupyter Notebooks help you to plan out and test different aspects of your web app before you jump to the Visual Code Editor to build the actual app.

PYTHON LIBRARIES

There are many libraries that you will need to use in your code to build your web app. A library is a collection of pre-written code that performs particular tasks. Programming libraries are very powerful and mean that your app can do powerful things with just a few lines of code. 

For Python, most libraries require that you first install them on your computer, then in your Python script file, you will import the libraries that you need. 

An example of the libraries you will need for using data are numpy and pandas.

Pandas allows your app to work easily with large amounts of data. It puts the data into something called a dataframe, and your app works with the dataframe. Numpy has many functions for performing numerical operations on the data in the dataframe.

In addition, there are many plotting and graphing libraries, which allow users to visualize the data. The most popular visualization libraries in Python are matplotlib, plotly, and seaborn

The following activity will use all of these libraries. The activity will take a dataset from a music and mental health survey to create a data dashboard app that displays the data in different ways for the user to interact with.

ACTIVITY 2: DATA DASHBOARD

Estimated time: 90 minutes

Build a Streamlit Web App

  1. Follow this video (Part 1) to install and run the Jupyter Notebook. Click link below to download the notebook file.
  2. Follow this video (Part 2) to build the data dashboard app using Streamlit.
  3. Your turn: Add one more graph to your data dashboard. You can choose from some of the other graphs from the original Jupyter Notebook, or make a new plot/graph in the Jupyter Notebook, and then integrate the code to Streamlit to add it to the dashboard.
Download Notebook

REFLECTION

Congratulations, you have made two web apps in Streamlit! Ask yourself these questions:

reflection
Did you run into any issues installing or running Jupyter Notebook or Streamlit?
How did you overcome issues when you ran into them?
How can you use the ideas from this lesson in your project?
Previous slide
Next slide

REVIEW OF KEY TERMS

  • Jupyter Notebook – popular data science interactive development environment to work with data through Python coding
  • Kernel – a process that runs and acts as the engine behind Jupyter Notebooks
  • Markdown language – the size of your problem or solution
  • Library – collection of pre-written code that performs particular tasks

ADDITIONAL RESOURCES

Jupyter Notebooks

 

Streamlit

girl at computer with woman looking over shoulder

Exploring Web App Builders

  • Learn about web apps and how they differ from mobile apps
  • Learn about different options for coding and building web apps
  • Install the necessary software to build a web app

These are the activities for this lesson:

WEB APPS

For your Technovation project, you have the option of building a mobile app or a web app.

Many participants will opt for building a mobile app, with one of our suggested app builders, App Inventor or Thunkable. 

For participants who have participated in Technovation before and are looking for a new challenge, or for new participants that have prior coding experience, you might consider making a web app for your Technovation project.  

Here is a reminder of the difference between mobile apps, web apps, and progressive web apps. 

Mobile App

  • a program that runs natively on the phone
  • downloaded and installed on the device 
  • can access the phone’s features, such as GPS and camera
  • platform-specific (iOS or Android) 
  • coded with particular languages to match the operating system

Web App

  • looks a lot like a mobile app
  • runs in an internet browser
  • not native to a particular device (iOS or Android) 
  • is generally coded with HTML, CSS, Javascript and Python
  • cannot run when offline

Progressive Web App

  • special type of web app that is a hybrid between a mobile app and web app
  • runs in a browser
  • can also be installed on the mobile device like a regular mobile app
  • can run even when user is offline

Note that a web app differs from a website. A website is static, coded using HTML and CSS. Web apps are dynamic and changing, based on user input and other external interactions.  For your Technovation project, a website is not acceptable.

We will explore some beginner options for creating web apps.

One big difference from the app building platforms we cover for mobile apps is that you will create a web app using a text-based programming language instead of a block-based language. 

There are two main languages that are used to create web apps.

JAVASCRIPT

javascript logo

Javascript, or JS, is a scripting language. This means that the code is executed at runtime, instead of being compiled, like a mobile app. It’s like an actor running through her script during a show each time the show runs.

Javascript is often combined with HTML and CSS to make websites. HTML and CSS are used to make static websites, which can present information but do not change. Javascript adds interactivity and the ability for the website to change and update based on external factors. And a dynamic, interactive website is essentially a web app.

PYTHON

python logo

Python is a very popular general-purpose programming language. Python is both a programming language and a scripting language, so it can be compiled to run but also can execute at runtime.

It is seen as a straightforward, versatile language that is accessible for new coders. It is used in many different aspects of software development. One area is web development. Another is machine learning. So, Python is a great option for learning and developing more advanced AI web apps. 

In this curriculum, we will focus on making web apps with Python. To easily build a web app using Python, we’ll use a framework called Streamlit.  Streamlit allows you to build powerful, interactive web apps with little code.  It specializes in apps involving data, and allows you to easily use Python machine learning libraries to incorporate AI in your apps. 

Here are some main features.

  • Good option for people who have lots of blocks-based coding experience and are looking for a new challenge
  • Good for people who have done some text-based coding
  • Very versatile language used widely
  • You will need to install software on your computer
      • Python and associated libraries
      • A code editor
  • Streamlit does have option to run in the browser, using Github
      • We won’t be cover this option in this curriculum
  • You can use AI with it
      • Most popular language for building and using machine learning models
      • We’ll use Jupyter Notebooks in this curriculum for model building

GETTING STARTED

To code web apps for your Technovation project, you will need:

  • a computer or laptop
  • Internet access

ACTIVITY: GET STARTED WITH PYTHON

Estimated time: 45 minutes

INSTALL SOFTWARE & CODE STARTER APP

NOTE: Following the instructions below, you might run into some issues, so be patient and be prepared to troubleshoot as you go!

  1. Step 1: Install Python. Here is a good set of instructions for Window, Mac, or Linux.
  2. Step 2: Install a code editor and Streamlit. This video shows you how to install Visual Studio Code and then install Streamlit to run it from the code editor.
  3. Step 3: Run a very simple Streamlit web app in the VS Code environment by following this video.
  4. Celebrate by taking a screenshot of your first web app and send it with a note to your mentor!

REVIEW OF KEY TERMS

  • Web App –  application that looks like a mobile app but runs in an internet browser and is coded using HTML, CSS, and Javascript or Python

REFLECTION

Congratulations on trying out some text-based coding! Here are some reflection questions for you to consider with your team and with your mentor.

refelction of rocks in water
Did you find any challenges installing and/or working with a text-based language?
How did you overcome the challenges?
Previous slide
Next slide

ADDITIONAL RESOURCES

You’ll need to refer to documentation and support for help working with Python & Streamlit. Below are some good places to start.

girls working at laptop on app inventor

Coding APIs in App Inventor

  • Learn what Application Programming Interfaces (APIs) are 

  • Use an API in an app to get information

These are the activities for this lesson:

API

API stands for application programming interface.

An API is a way you can get information from a website or database.

While cloud storage is usually internal information shared within your app, APIs allow your app to access external information from the internet.

Cloud Storage
www connected to 3 phones
API

Let’s say you are building an app to help people decide what to wear based on the weather. You could spend lots of time uploading data about the weather into a database, but there are many websites that show the weather. 

A better solution would be just to grab data from a weather website and show it to your users through your app, by using an API.

Here is a good video explainer of how APIs work.

To use an API, you have to: 

  1. Find a website that uses APIs. Here is a list of public APIs that are available, listed by topic.
  2. Read their documentation for how to use their APIs. Most sites give examples.
  3. Some sites require you register for an API key before using their APIs. Note, some APIs cost money to use. 
  4. Incorporate the API code into Thunkable. 

CODING EXAMPLES

Below are some simple examples to get you started with using APIs in App Inventor.

Here is a very basic example of using the Google Maps API and the ActivityStarter component to start the Google Maps app from your app, targeting a specific location. Use this starter template to follow along.

This example tutorial uses an API from OpenWeatherMap.

This simple tutorial show you how to use the iTunes API to play a song when you type in an artist’s name.

iTunes logo

Click this link to open the sidebar tutorial in App Inventor and follow along.

ACTIVITY: FRUIT NUTRITION APP

Estimated time: 30 minutes

Display Fruit Information using API

  1. Open the link to the Fruit Information project in the App Inventor Gallery.
  2. Load the app into App Inventor.
  3. Run the app to see how it works.
  4. Check the example JSON string below to understand what it looks like.
  5. Right now, the app displays only Calorie information. Add a second label below CalorieLabel to display one of the other nutritional values returned.
Open Gallery Link

Here is an example JSON string returned by FruityVice for banana.

{ "genus": "Musa", 
"name": "Banana",
"id": 1,
"family": "Musaceae",
"order": "Zingiberales",
"nutritions":
{ "carbohydrates": 22,
"protein": 1,
"fat": 0.2,
"calories": 96,
"sugar": 17.2
}
}

Hopefully you successfully added a second nutritional label with API information!

If you would like to see a possible solution, click this button. 

REFLECTION

Using APIs in your app can be a very powerful tool, but it is not easy to implement!

You must spend time reading the API documention for the site to understand how to get the information you need.

interconnected network
Do you think this is a useful component for your app?
Can you find an online website that provides the information you need?
Previous slide
Next slide

REVIEW OF KEY TERMS

  • Application Programming Interface (API) –  a way you can get information from another website or database to use in your app

ADDITIONAL RESOURCES

several girls working in a classroom

App Examples using Thunkable

  • Experiment with app examples that align with your solution idea

These are the activities for this lesson:

DIVE DEEPER

You are at a point now that you want to start coding your app.

Maybe you already have started!

Or perhaps you’re not quite sure how to combine the components you think you need to make your app work.

We’ve come up with a list of app types or categories that many Technovation projects fall into. The tutorials are examples for you to follow and learn from. They won’t show you exactly how to build your app (that’s no fun!) but they will hopefully give you an idea of how to use particular Thunkable features. It’s then up to you to transfer that knowledge into your project.

It’s not easy, but that’s what learning is all about!

scuba diver looking down

WHERE TO FIND HELP

Search Online

Google (or alternate search engine) "Thunkable" and whatever feature you want. For example, you might Google "Thunkable quiz" if you wanted to make an app that quizzed users on a topic.

Thunkable beaver logo

Thunkable website

Lots of great resources provided by Thunkable. Start with Thunkable docs but check out the rest of the website for great resources.

Forum Help

Community forum for Thunkable users is a friendly place to post a question and get some expert help!

Youtube

Thunkable has their own channel with lots of great tutorials.

ChatGPT

ChatGPT is great at helping with coding questions, even block-based coding platforms like Thunkable. You won't get visual blocks but very good text-based answers

Sign up for a Technovation coach

Technovation Coaches

Did you know you can get personal help from a Technovation coach? Your team can sign up for a one hour session to ask questions and get help with your app.

ACTIVITY: COMPLETE A TUTORIAL

Estimated time: 60 minutes

Follow a tutorial that aligns with your project

  1. Choose one example app below that has some of the features of your solution app.
  2. Complete the tutorial, bearing in mind that the app may not be exactly like your app.
  3. Use the experience to learn more about the components and how they can be used within an app.
solution: list [apples, cherries, kiwis, grapes]

Click on an app to access the corresponding tutorial.

Login App
location app screen
Location App
green tracking app
Tracking App
Info App

Login App

This tutorial shows you one way to add signup/login capability to your app using Firebase, Cloudinary, and Google Sheets. Dave Wolber provides a great starter template (log into Thunkable first) for you. You can then add the critical features to your app that actually solve your problem.

Location App

This app is a good example of using the Map component to provide location-based information to users. In this case, volunteer opportunities. The app also uses Web Viewer to display website information, and a Share component so the user can call volunteer organizations from the app.

Part 1 – add Map, Markers, and basic information

Part 2 – add second screen to display website and make phone calls

Tracking App

This app is an example of storing a user’s personal information on their phone using stored variables so they can track something – in this case, how green they are acting.

Optional: 

Part 2 Add consecutive day tracking 

Part 3 (advanced) – Test by adding a Test button to set variable values behind the scenes.

Information App

This tutorial shows you how to share information from Google Sheets with all users of the app, in this case, Tech Superstars.  There is a full playlist for this tutorial, so keep going to learn how to add an input screen so users can add their own information to the app and have it display to all users.

REFLECTION

The example apps in this lesson provide some features that you may have decided to include in your mobile app. Chances are they are not exactly like your app.

Consider these questions:

Italian bridge reflection
How is the example app similar to your solution?
What is different?
What have you learned in this lesson that you can apply when coding your own app?
Previous slide
Next slide