girl typing at laptop

Technical tutorials

Technical Videos Technical tutorials

This lesson provides a place to view all the Technovation video tutorials for coding apps and creating AI models in one place. They are grouped by coding platform and topic. 

CODING PLATFORMS

This video gives an overview of the coding language options for Technovation. It is a little outdated, as Technovation allows any coding language now. However, it gives a good overview of App Inventor and Thunkable and the features from each platform.

SCRATCH TUTORIALS

Scratch tutorials

3 Videos
More info
More info

Simple game with sprites and a timer.

APP INVENTOR TUTORIALS

Open each tab below to see some video tutorials to help you learn different features that could help with developing your app.

These videos give a general overview of the two windows in App Inventor – the Designer and the Blocks Editor. 

Platform Overview

2 Videos
More info
More info

This tutorial is part of a larger playlist to make a game, but shows some of the features of the Designer and designing the UI in App Inventor. If you want to use the starter template, here is the link. 

If you are new to coding, these are some good introductory tutorials to try.

Learn App Inventor

2 Videos
More info
More info

This is a good introduction to using App Inventor. Also known as the Soundboard tutorial, you learn how to make a simple app where the user clicks a button and it plays a speech. You can download the starter project here and import it into App Inventor (Dave shows you how in the video). 

A feature of many apps is the ability for users to log in with a username and password. You can add this feature to any app by following the instructions in the video.

The Recycle game uses many simple concepts but builds on them to build a fairly complex game. You will learn how to use a timer to display images, detect button clicks, and add and subtract from a score. Here is a link to the starter template in App Inventor.

Recycle Game

7 Videos

These videos show you  how to use the Canvas and ImageSprites to create an animated game.

If you want to follow along from the start, you can find the images used in the app here. 

If you want to skip the first video that builds the user interface, you can open the template that has the user interface built out by clicking here.  

Animated Game

4 Videos

These videos step you through making a volunteer app. The tutorials show you how to add a map with informational markers in your app. You will also see how to integrate phone calls with your app and how to display websites using the WebViewer component.

Volunteer App

2 Videos
More info
More info

Good example of using the Map component to provide location-based information to users. In this case, volunteer opportunities. The app also uses WebViewer to display website information, and PhoneCall so the user can call volunteer organizations from the app.

Part 1  of 2 videos – add Map, Markers, and basic information

The first 3 videos cover making a Green Tracker app that lets users track how green they are each day. The data is stored using TinyDB on the user’s mobile device. 

The 4th video is shows how to store list items in TinyDB. 

 

Using TinyDB to store data

4 Videos
More info
More info

Green Tracker Part 1 shows how to store tracking data on your phone with the TinyDB component.

Application Programming Interfaces or APIs are very useful for apps. Learn how to connect your app to external websites or servers to send and receive data. 

APIs

2 Videos

The quick quiz tutorial shows how to connect a Google Sheet to your app to store leaderboard data. Click here to open the project template in App Inventor.

The Chat app tutorial shows how to store chat information using CloudDB.

Cloud Data

2 Videos
More info
More info

The quick quiz tutorial shows how to connect a Google Sheet to your app to store leaderboard data. Click here to open the project template in App Inventor.

THUNKABLE TUTORIALS

Open each tab below to see some video tutorials to help you learn different features that could help with developing your app.

This video give a general overview of the Thunkable platform.

If you are new to coding, these are some good introductory tutorials to try.

Learn Thunkable

2 Videos
More info
More info

This is a good introduction to using Thunkable. Also known as the Soundboard tutorial, you learn how to make a simple app where the user clicks a button and it plays a speech. Click here and follow links for I have a dream to download the assets to make the app.

A feature of many apps is the ability for users to log in with a username and password. You can add this feature to any app by following the instructions in the video.

These videos step you through making a volunteer app. The tutorials show you how to add a map with informational markers in your app. You will also see how to integrate phone calls with your app and how to display websites using the WebViewer component.

Volunteer App

2 Videos
More info
More info

Good example of using the Map component to provide location-based information to users. In this case, volunteer opportunities. The app also uses WebViewer to display website information, and PhoneCall so the user can call volunteer organizations from the app.

Part 1  of 2 videos – add Map, Markers, and basic information

The 3 videos cover making a Green Tracker app that lets users track how green they are each day. The data is stored using stored variables so it gets saved on the user’s mobile device. 

Using TinyDB to store data

3 Videos
More info
More info

Green Tracker Part 1 shows how to store tracking data on your phone with the TinyDB component.

Application Programming Interfaces or APIs are very useful for apps. Learn how to connect your app to external websites or servers to send and receive data. 

APIs

3 Videos

The quick quiz tutorial shows how to connect a Google Sheet to your app to store leaderboard data. Click here to open the project template in Thunkable.

The second video shows you how to make an app that plays videos. The video information is stored in a Google Sheet.

The third video is another climate-based app showing how to display leaderboard information from a google sheet. Starter project template can be found here.

The fourth video is another example from an alumna using a Google sheet to store app information.  Here is a link to the starter project. 

Cloud Data

4 Videos
More info
More info

The quick quiz tutorial shows how to connect a Google Sheet to your app to store leaderboard data. Click here to open the project template in Thunkable.

ARTIFICIAL INTELLIGENCE TUTORIALS

This series shows how to train a model using Machine Learning for Kids. The output model is then used in a Scratch project.

Note that Scratch projects are only possible for the beginner division.

AI tutorials

3 Videos
More details
More details

Make Me Happy uses Machine Learning for Kids to make a machine learning model to detect happy or sad text. The 3 part tutorial uses the model in a Scratch project.

This example uses a model to detect sounds (snap, clap, or whistle) trained with Teachable Machine to then use in a Scratch project. Here is a link to instructions on making the model. 

Note that Scratch projects are only possible for the beginner division.

This series shows how to take a public dataset of image from the web, train it using the Image Classifier from App Inventor, and then add the model to a mobile app with App Inventor.

Image Dataset & App Inventor

3 Videos

These videos show how to make a simple Rock, Paper, Scissors app that uses AI to determine which play the user is making. You learn to train a machine learning model using images in Teachable Machine. Then, the model is integrated with App Inventor to use in a mobile app.

Playlist

2 Videos

Pratham Goradia shows how to use the Ximilar platform to train a model with images of coral reefs. Then the model is used in a Thunkable app with the help of the Web API component.

These videos (also in the Web App tutorial section below) show how to build a machine learning model using Python in a Jupyter Notebook and then how to use that model in a web app built using Streamlit.

AI in Web App Playlist

2 Videos

WEB APP TUTORIALS

If you are coding a web app, the curriculum offers two options – to install free software and code it locally on your own computer, or to code it using online platforms in a web browser. 

These videos are for the local option, coding on your computer.

Coding with Python & Streamlit

7 Videos
More info
More info

If you haven’t already, you must install Python on your machine. Here are instructions.

If you are coding a web app, the curriculum offers two options – to install free software and code it locally on your own computer, or to code it using online platforms in a web browser. 

These videos are for the online option, coding everything in a web browser.

Playlist

4 Videos
Back to Course
girl at computer with woman looking over shoulder

Debugging your Code

Beginner Division Curriculum Debugging your Code

WHAT IS DEBUGGING?

A bug in your code means a problem or error. To debug means to get rid of the error. 
 
The term debugging came from Admiral Grace Hopper, a pioneer in computing. She was working on the Mark II computer at Harvard University in the 1940s and a moth got stuck in the computer and stopped it from working.
 
Getting rid of the moth, she said they were “debugging” the system. Programmers use the term now to mean “fixing errors in my code”. 
Grace Hopper

It’s not always easy to figure out why your code is not working.

dog looking at computer

The video below gives you some tips for how to help see what might be going on in your App Inventor project, so you can successfully debug your app so it works perfectly!

In the video below, learn some tips to help you debug your Scratch code.

Previous Lesson
Back to Course
Next Lesson
girls using hardware around a laptop

Using your AI Model in an App or Project

Beginner Division Curriculum Using your AI Model in an App or Project

It’s time to put your trained model to work!

Dataset

Model
finds
patterns

Model
makes
predictions

Correct actions or decisions!

Which platform did you choose?

Click on the platform you trained your model with to learn more about how to add code to make your project take action! 

Tip: Choose one path and follow it. Do not do them all!

Teachable Machine just allows you to train an AI Model. There are many platforms that will allow you to use that model to make something.

  • If you are planning on making a Scratch project, we suggest RAISE AI Playground, from MIT, a version of Scratch, because it’s easy to add a Teachable Machine model .
  • If you are planning on making a mobile app, MIT App Inventor has an extension you can use to use the model in your app.

The first video shows how to use a Teachable Machine model for snap, clap, whistle sounds (Unit 5) in a Scratch project.

The next video shows you how to use a Teachable Machine image model to make a rock, paper, scissors game in App Inventor. If you need help making the model in Teachable Machine using images, this video will walk you through it. 

With models made with Machine Learning for Kids, you can make a
  • Scratch project
  • Python project
  • Or a mobile app with App Inventor

In this video, you’ll learn to take the Iris identification AI model from Unit 7, and use it in a Scratch project to display the correct iris picture based on sepal and petal measurements.

Models created with the App Inventor Personal Image Classifier or the Personal Audio Classifier can be integrated into a mobile app using MIT App Inventor. 

In this video, learn how to take your citrus identifier AI model from Unit 7, and add the model to an App Inventor project.

Now code the app so it identifies images of citrus to tell whether it’s healthy or diseased.

ACTIVITY: ADD MODEL TO YOUR PROJECT

  • Plan what actions you want your app or Scratch project to take.
  • Have your AI model ready.
  • Import it into the platform of your choice.
  • Code!
Previous Lesson
Back to Course
Next Lesson
girls at table with multiple laptops

Exploring Different Types of Mobile Apps

Beginner Division Curriculum Exploring Different Types of Mobile Apps

By now you should have a list of features for your mobile app.

And you should have drawn out what you want it to look like with your paper prototype.

Below are some different tutorials for you to follow, depending on the type of app you are building.

ACTIVITY: TRY A TUTORIAL

Look through the tutorials listed below and follow the ones that use some of the same features or components you plan to use in your app. While they might not be exactly like the app you want to make, it will give you an example to get you started.

Don't just watch the tutorial - make the app too! 

If you don’t see a tutorial below that has some of the same features you want to add to your app, there are many other ways to find help!

  1. Google “App Inventor” and whatever feature you want.  For example, you might Google “App Inventor quiz” if you wanted to make an app that tests users on a topic.
  2. Visit http://appinventor.mit.edu/tutorials and look for other tutorials that might be helpful.
  3. Visit https://community.appinventor.mit.edu, the community forum for App Inventor users, and post a question there. Many other App Inventors visit that site and assist others that need help. 
In this tutorial, learn to add a login feature to your app. Users have to enter an username and password to register and use the app!
 
The CloudDB component is used to store the user information.
In this tutorial, learn to make an app that uses a map for users to locate places and find out more information.
 
This app uses the Map component to let users find volunteer opportunities in their area. It also uses the PhoneCall component so the users can call the organization from the app to volunteer, and the WebViewer component to display webpages in the app.
 
Part 1 shows you how to make the map and markers part of the app.

Part 2 shows you how to add a second screen to display the phone number and website, and allows the user to place a phone call to the organization.

In this tutorial, learn how to use CloudDB to create an app where users can message each other. This could be the start of an user forum feature in an app, and show you the basics of sharing information between users of an app.
 
Click on the picture below to go to the tutorial!
chat app screenshot

In these tutorials, learn how to use TinyDB to create an app where users can track their green activities from day to day. Their tracked information is stored on the mobile device so it can be updated each day.

Green Tracker tutorials

3 Videos
Previous Lesson
Back to Course
Next Lesson
girls coding with mentor helping

Coding Conditionals in Scratch

Beginner Division Curriculum Coding Conditionals in Scratch
When you code a Scratch project, you sometimes want the sprites to do different things, depending on what is happening in the project.
 
For example, in the Recycle Game in Unit 5, you used an if-then-else block to add 1 to the score if the user moved the item onto the correct Sprite. Else, the project subtracted 1 from the score.
if else block in scratch
The video below helps to explain the different types of conditional blocks, which are blocks that cause different actions depending on a condition.
 
The girl is using a different coding language than Scratch, so the blocks look a little different and have different colors, but the ideas are the same.

Scratch game apps are really fun and can be a great way to educate users about big problems!

ACTIVITY: OCEAN PLASTIC CLEANUP GAME

Follow the video below to make a game where a diver will race against a fish to pick up plastic in the ocean.
Click to download Sprite images

This is what the game looks like when finished.

GREAT WORK!

You made a Scratch game and learned all about conditional blocks. 

What ways can you improve or add to the Ocean Plastic Cleanup game?

Try adding one new feature. Here are some suggestions:

  • Test if the diver “wins” the game by getting the health of the fish to 10.  
  • Adding more plastic sprites than just the bottle.
  • Have the plastic bottle “float” through the ocean.
  • Let the fish and the diver move in both directions – right and left.

What else can you add?

Previous Lesson
Back to Course
Next Lesson
three girls working at a laptop

Coding Conditionals in App Inventor

Beginner Division Curriculum Coding Conditionals in App Inventor
When you code a mobile app, you sometimes want the app to do different things, depending on what is happening in the app.
 
For example, in the Recycle Game in Unit 5, you used an if-then-else block to add 1 to the score if the user pressed the correct button. Else, the app subtracted 1 from the score.
if else block
The video below helps to explain the different types of conditional blocks, which are blocks that cause different actions depending on a condition.
 
The girl is using a different coding language than App Inventor, so the blocks look a little different and have different colors, but the ideas are the same.

Mobile game apps are really fun and can be a great way to educate users about big problems!

ACTIVITY: OCEAN PLASTIC CLEANUP GAME

Follow the 4 videos below to make a game where a diver will race against a fish to pick up plastic in the ocean.

This is what the game looks like when finished.

Ocean Plastic Cleanup

4 Videos
Extra Information
Extra Information

You will learn a lot about the Canvas and ImageSprite components in the video,  but if you want to skip the video and get right to coding, you can load the template file in App Inventor.

GREAT WORK!

You made a mobile app game and learned all about conditional blocks. You also got practice with making a procedure which is really useful when coding!

What ways can you improve or add to the OceanPlasticCleanup game?

Try adding one new feature – an animated plastic bottle, multiple fishes, sounds…

What else can you add?

Previous Lesson
Back to Course
Next Lesson
girls working at computer

Designing and Coding with Scratch

Beginner Division Curriculum 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 THE DESIGNER

TIME TO TRY IT!

PARTS OF SCRATCH

Click on the orange i to learn about the highlighted parts.  Click on the arrows on the left and right to learn about other parts of the Scratch platform.

scratch blocks palette

The Blocks Palette lists all the blocks you can code with.

Click on the colored circles to open different block types.

The Script Area is where you drag code blocks.

scratch stage area

The Stage is where the project runs.

scratch sprites panel

The Sprites panel is where all your sprites are shown, and where you can add more by clicking this icon.

scratch backdrop panel

The Backdrop Panel is where you can change the stage backdrop.

scratch costumes tab

The Costumes Tab is where you can edit the Sprite's costume.

And add new costumes. 

The Sounds Tab is where you can change any sound (make it faster, slower, louder, etc.)

And add new sounds. 

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.
Previous Lesson
Back to Course
Next Lesson
girl using phone to test app

Designing and Coding with App Inventor

Beginner Division Curriculum Designing and Coding with App Inventor

There are two parts to making an app with App Inventor.  First you design what your app looks like, then you tell the app what to do by coding it.

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 orange i to learn about the highlighted parts.  Click on the arrows on the left and right to learn about other parts of the Designer.

app inventor designer window

The Palette lists ALL the possible components (parts) you can add to your app.

They are grouped by drawers or tabs. You can just click a drawer to open it. 

app inventor designer window

The Viewer shows what the app looks like after you drag components from the Palette.

Non-visible components don't appear on the app screen but are still important parts of the app.

app inventor components panel

The Components Panel lists all the components that have been added to the app.

They have an extra space in front of them if they are contained inside another component.

app inventor designer window

The Properties Panel is where you see or change the different features for each component.

app inventor designer window

The Media Panel is where you upload files like images and sounds to use in your app. You can just drag and drop files onto the Media Panel.

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 orange i to learn about the highlighted parts.  Click on the arrows on the left and right to learn about other parts of the Blocks Editor.

app inventor blocks editor

The Blocks panel lists all the blocks available to be used. 

Built-in blocks are part of every app.

Each component also has its own set of code blocks. 

App inventor blocks editor viewer window

The Viewer is your coding workspace, where you place all your code blocks.

Click on a component, then drag the block you want onto the Viewer. 

app inventor backpack in blocks editor

The Backpack lets you save your code blocks to reuse in other projects.

Drag the blocks you make into the backpack. You can open another project and drag them out to reuse them.

App inventor blocks editor

Check your warnings in yellow and errors in red before running your app.

App inventor blocks editor

You can zoom in and out and reset the Viewer zoom.

You can remove unused blocks by dragging them to the trash can to delete them.

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.

Recycle Game

6 Videos
Previous Lesson
Back to Course
Next Lesson
girl looking intently at laptop

Make a Scratch Project

Beginner Division Curriculum 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. 

Previous Lesson
Back to Course
Next Lesson
two girls working at a computer

Algorithms

Beginner Division Curriculum 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 exact, easy 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?

Best practices: Encourage students to break down the task into small steps. Keep them excited by reminding them that this is the first step to coding. 

Optional activity: Do the Peanut Butter and Jam activity with your students!

More background: European schools experimented with ways to teach computer science to young young kids (4-5 years old) but it’s a really fun activity to do with anyone!

They wanted to illustrate that computers are not smart. They are just very fast (and dumb) machines that do whatever we program to tell them to do. They did this by acting like computers and the kids “programmed” the computers/teacher to make a PB&J. This is quite hilarious if done correctly because the goal is to take the commands as literally as possible. If the students first step is “Spread the peanut butter on the bread” then teachers/computers will not do the obvious things first they will do the literal thing which would probably be to spread peanut butter all over the ENTIRE loaf of bread (since the student didn’t specify just one piece of toast).

There is an example video here with more instructions and information. 

Guiding Questions to ask students: Are there any other games that need an algorithm to play them? Think about any of those Diner games where you have to make people’s orders. First you cook the meat, chop the veggies and then put it all together on a plate! Like Overcooked! Are there any other real life games that use an algorithm? What about a rubik’s cube? You repeat certain patterns until the squares are moved where you want them, that’s an algorithm!

Mentor tips are provided by support from AmeriCorps.

stylized A, AmeriCorps logo in navy

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
Download 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!
Previous Lesson
Back to Course
Next Lesson