Coding 3: Events Handlers

Event Handlers

Coding 3

This lesson will help you earn points in the technical part of the Demo video in the rubric.

In this lesson, you will...

  • Learn about event driven programming
  • Understand what events are in apps

Key Terms

  • User Interface -  everything in your app that a user can interact with
  • Event - something that happens that should trigger the code to run
  • Event Handler - The code that tells your app what to do when an event happens.
  • Event Driven Programming - Programming that is based around events

Learn

Event Driven Programming

Activity

Beginner Tutorials

Reflection

What did you Learn?

Additional Resources

Advanced Tutorials

Event Driven Programming

Coding for mobile apps is usually called “event driven programming”.  This is because of the three big concepts that are involved in event-driven programming.

User interface

The user interface is everything in your app that a user can interact with. These things can be buttons, navigation bars, text boxes, pictures, etc.

When someone uses your app, they will interact with your user interface, by clicking buttons, entering text etc. It is up to you to decide what your app should do and to program it to do those things.

App Inventor - In App Inventor you will find all of the things you can use in the user interface in the “design” side.
App Inventor - In App Inventor you will find all of the things you can use in the user interface in the “design” side.

Events 

An event is something that happens. You probably have heard the word ‘event’ in terms of a friend’s birthday party or a school play. In coding, an event is when something happens that triggers the code to run.

In mobile apps, the events that happen are usually the results of the user doing something. For example, it could be a user’s click on a button, a change in the orientation of the phone screen, or the user entering text into a text box. When you program your app, the code will be based around these events.

Common Events in App Inventor
Common Events in App Inventor
Common Events in App Inventor

Here are some common events that you can use in App Inventor
Common Events in Thunkable

Event Handling

An event handler is what your code does when an event happens. The way you tell your app what to do when certain events happen is by giving it step by step instructions, or by writing an algorithm!

Thought activity - Can you think of some ways you interact with your phone and what your phone does? Here are a few to get started:

  • When you click "send" for a text message, it sends the message and makes a sound.
  • When you try to purchase an app from an app store, the phone asks for a password.
  • When you click an icon for an app, the app opens.

Activity: Beginner Tutorials

Practice coding in App Inventor or Thunkable with these tutorials.

App Inventor Tutorial

 

Thunkable Tutorial

Source Code for this Tutorial.

Reflection

Now that you've learned about events, take some time to reflect on what types of event you used in the last tutorials.

  • What did you add to your user interface in the I Have a Dream or Ruth Bader Ginsburg app?
  • What types of events happened in the I Have a Dream or Ruth Bader Ginsburg  app?

Additional Resources

 

I Have A Dream Tutorial - Part 2

Do you want to take your "I Have a Dream" app further? Here is part 2 of the tutorial for App Inventor.

Previous Lesson
Curriculum Table of Contents
Next Lesson

Coding 2: Algorithms and Pseudocode

Algorithms and Pseudocode

Coding 2

Completing this lesson helps you to earn points in the Demo Video section of the rubric by...

  • Learning what algorithms are
  • Coding your first app in App Inventor or Thunkable

Key Terms

  • Algorithm  - step by step instructions that explain how to do something
  • Pseudocode -  writing out an algorithm in plain language, instead of in code

Learn

Algorithms and Pseudocode

Activity

Talk to Me Tutorials

Reflection

What did you Learn?

Additional Resources

Advanced Tutorial and Algorithms Video

Algorithms

Most kids who grow up in North America love peanut butter and jelly sandwiches. Making one should be easy, just put peanut butter on one slice of bread and jelly on the other! Watch Johnna and Evan give their father, Josh, instructions to make a sandwich.

It you’re having trouble getting this videos to play, try loading this page in Google Chrome.

Josh is acting like a computer—he won’t do anything unless he is told to in simple step-by-step commands. A person would know that the instruction “spread some jelly on the bread” really means to open the jar of jelly, put your knife in, remove it, and use it to spread some  jelly on the bread. However, a computer would do what Josh did; it would just spread the whole jar of jelly on the bread and get confused!

Unlike humans, computers can’t infer, or make guesses, about anything! They can only do exactly what they are told. Johnna and Evan gave their father an algorithm to making a sandwich. An algorithm is a set of step-by-step instructions. In order to make a computer do something, you need to write an algorithm for it to understand.

In Technovation Girls, you will learn how to write algorithms to make a mobile app!

Mini-Activity: Grab a piece of paper and do this fun activity to mimic the way a computer thinks!

Write an algorithm to do an everyday activity. It could be riding a bike, making a sandwich, playing a game or anything else! When you are done, give your algorithm to a friend and have them do exactly as it says, just like Josh does in the video. Did things go as you expected?

Pseudocode

When you wrote out your instructions in the last activity, you were actually writing something called pseudocode. Pseudocode is writing out an algorithm in plain language, instead of in code. “Pseudo” means “fake”, so you can think of pseudocode as “fake code”. You can use pseudocode to plan out what you want your code to do. Throughout these lessons we will practice writing pseudocode for the activities, so that you can write your own when you code your app.

Activity: Talk to Me

Complete these tutorials. They will help you make your first app in App Inventor or Thunkable and they will help you understand the next section. Remember, this is your very first app so it is okay if you get stuck!

Reflection

Congratulations on making your first app! Here are some reflection questions for you to consider with your team and with your mentor.

  • What are some things from this lesson that you think will be useful in creating your app? Why do you think so?
  • Describe what makes the block language different from the language you are used to using in everyday life. Why must a programming language be created in this way?

Additional Resources

Advanced Talk to Me - Part II

Before moving on, let’s program some more! Can you take your Talk to Me app to the next level? Here are some ideas for you to try out!

  • Change the pitch of the voice in your speech to text component. Click on the ‘speech to text’ in the blocks side and look for the pitch property. You can give your voice a pitch of 0, 1 or 2.
  • Check this out to learn how: App Inventor TextToSpeech Information

More on Algorithms

Watch this video to learn more about what algorithms are.

Previous Lesson
Curriculum Table of Contents
Next Lesson

Coding 1: Exploring Different App Builders

Exploring Different App Builders

Coding 1

In this lesson, you will…

  • Learn about different app builders and programming languages
  • Get set up with the tool you will use to program your App

Key Terms

  • App Builder -  programs that usually have a drag and drop interface that let you build apps without typing code 
  • Programming Language  - a way to talk to a computer, or mobile phone, to tell it to do things

 

Learn

App Builders and Programming Languages

 

 

Activity

App Inventor Set Up

 

 

Activity

Thunkable Set Up

 

 

Reflection

App Builders

 


Additional Resources

Most Popular Platforms

 

App Builders and Programming Languages

For your Technovation project, you can choose to create an AI invention, a mobile app, or both. You can start by learning what it takes to make a mobile app, and see if that is something you want as part of your problem solution.

This lesson will introduce you to app builders and programming languages that are commonly used by Technovation students. Technovation curriculum has example code for both App Inventor and Thunkable, but you can submit in any programming language you choose.  If this is your first time ever coding, the Technovation team recommends you try using App Inventor or Thunkable so you can reference our resources.

Look up any words in this lesson that you don’t recognize. When programmers don’t know what something means, they look it up! As a new programmer, it is good to ask questions and get familiar with some of the words that computer programmers use.

 

App Builders

App Builders usually have a drag and drop interface that allows you to build apps without typing code. Even though the code looks simple in app builders, you will still be learning valuable coding concepts. Here are two app builders that are supported in the Technovation Girls curriculum.

If you are new to programming, we recommend you use either App Inventor or Thunkable for your programming language to learn how to build a mobile app. The table below gives our take on which platform performs best for certain features. Depending on what kind of mobile app you decide to build for your Technovation project, you might base your decision on which platform has better support for the features you want to include in your app.

App Inventor

 Thunkable
Works on both iOS and Android Yes Yes
Open Source* Yes No
Free Yes  Free for public apps that anyone can see or remix, maximum 10 apps
Available in many languages other than English Yes No
Gallery with example projects Yes Yes
Live Testing Emulator or with phone over wifi Built-in preview in browser (easier to test with)
Build app to load on phone or upload to App/Play Store Android only Limited to 2 downloads per month
User interface Basic More options and control
Maps More options and control Basic
Sprites and animations for games Easier to use Works but is more complicated
Storing data on device TinyDB (tag, value pairs) Local_Storage (key, value pairs)
Local_DB (table-like storage)
Storing and sharing data in the cloud CloudDB (tag, value pairs) Airtable, Firebase, Google Sheets, Media DB (many more options)
Artificial Intelligence built-in components Personal Image Classifier, Personal Audio Classifier, Posenet, Face Mesh (many more options) Image Recognizer (pre-built Microsoft image classifier)

* Open source means that all the code used to create the app builder is free and open to use on the web. This may be important to you if you are concerned about losing your work if an app builder stops being supported or goes out of business. It may also be important to you if you want to find a work around to use an app builder offline.

 

Other programming languages you can use for your submission

Programming languages give you a way to talk to a computer to tell it to do things. There are lots of programming languages that you can use to build apps (besides App Inventor and Thunkable). Below, you can learn more about the other languages you can use to prepare your Technovation Girls submission. Below, you can learn more about the other languages past participants have used for their submissions. You are not limited to these languages and can use any programming language you are comfortable with. You will need to provide the source code files with your submission.

Programming Language Used to create apps for You will also need Learning Resources
Java Android Android Studio Android Studio Courses

Android Development for Beginners
Swift iOS XCode Apple Swift Resources

Yuma’s Anyone can Code YouTube Channel

What you need to participate in Technovation Girls:

  • Computer
  • Internet access
  • Gmail account
    • You need a Gmail account to log into App Inventor or Thunkable. To set up a gmail account go here.
  • A mobile device is optional but highly recommended. You can use an Android phone or tablet or an iPhone or iPad

It is time to get everything set up so that you can start coding your own apps! The next two activities have instructions about how to get set up using App Inventor or Thunkable. You only need to do one of these activities, so you should decide if you want to use App Inventor or if you want to use Thunkable. It may help to discuss with your mentor which is better for your team.

If you are not using App Inventor or Thunkable, you should use this time to get set up and familiar with your app builder or programming language.

Learn why these Technovation alumnae chose the platform they used for their mobile app development.

Activity: App Inventor Set Up

Follow along if you are using App Inventor

Part 1: Sign in

  1. Go to http://appinventor.mit.edu/explore/ and click “create apps”.
  2. Log in with your gmail account. If you don’t have one, you should make one now.
  3. Once you are in, take a minute to explore. The next few steps will walk you through setting up your android phone or emulator for live testing.

 

Part 2: Connecting your phone or emulator

You can connect an phone or an emulator to test the app you built in App Inventor in three ways. All three methods allow you to do live testing, which means you can edit your app in App Inventor on your computer, and see those changes appear instantly on your phone or emulator.  

WiFi Method
WiFi Method
  1. This is the easiest way to use App Inventor and is highly recommended by the Technovation Girls team.
  2. Choose this method if you have a phone or tablet and access to WiFi. 
  3. You need to be able to connect your computer and your phone to the same WiFi network in order for this method to work. 

With the WiFi method, you will build apps on your computer and test them on your phone using the App Inventor Companion App, called MIT AI2 Companion. View MIT’s instructions on how to get connected using WiFi.

Wifi Method Troubleshooting Tips:
  1. Make sure your computer and your phone are on the same WiFi network.
  2. Check that you downloaded the correct MIT AI2 Companion app onto your phone here:  AI Companion App (Android) or AI Companion App (Apple iOS)
  3. Reset your connection to App Inventor if you encountered an error.
  4. If you’re still stuck here’s a video that may help:  PhilsComputerLab: Connecting with Wi-Fi.
USB Method
Emulator Method

Activity: Thunkable Set up

Here’s a video to help you get started setting up Thunkable.

First, create an account at  https://thunkable.com/#/. Once you've finished that, let's go over how to set up your device:

Step 1
Step 1

Click on the "Start Building" button.

Step 2
Step 3
Step 4

Reflection

At this point you should have choose your app builder or programming language and have your computer set up so that you can start learning how to code apps!

  • Which App builder or programming language are you using? Why did you choose this one?

Additional Resources: Most Popular App Builder 

Here is more information about what types of app builders and programming languages past Technovation Girls participants have used. Teams are not awarded extra points based on what they use to develop their app. You should choose a language/platform you are comfortable learning and coding with.

Programing Languages Popularity
App Inventor 46%
Thunkable 44%
Java or Android Studio 7%
Swift or XCode 3%

Sneak Peek!

Here are two videos from the MIT App Inventor team that walks through how to choose a problem, brainstorm a design, and code an app - exactly what you'll end up learning in Technovation Girls! Don't worry if you don't understand the whole process yet, this is just a preview of things to come.

Previous Lesson
Curriculum Table of Contents
Next Lesson