Code 1: Introduction to Coding & App Inventor

Code 1

Introduction to Coding & App Inventor

Learning Objectives:

In this module, you will...

  • Learn an overview of programming languages and their uses
  • Get a basic understanding of computer logic
  • Start coding with App Inventor

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 Zoe and Pablo try to give their friend Jared instructions to make a sandwich.

Video 1

Video 2

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

Jared 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 jelly on the bread. However, a computer would do what Jared 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. Zoe and Pablo gave Jared 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, you will learn how to write algorithms to make a mobile app!

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 Jared does in the video. Did things go as you expected?

Programming Languages

Computer algorithms are written in programming languages. Programming languages are tools that help you speak to your computer. Coders use different programming languages to do different things. Some languages are better for making apps and some are better for making websites and some are better for running complicated calculations. Just like any other language, you need to learn how to use it to be able to communicate!  

For Technovation you will learn to use App Inventor, which is a programming language that is great for making mobile apps. A ‘mobile app’ is software built to be used on a device such as a phone or a tablet and not on a computer. Here are some names of programming languages and what they are commonly used for.

Javascript is used for creating interactive elements in webpages.

Objective C is used to create Andriod apps.

Swift is used to make iphone apps (iOS app development).

App Inventor is used in Android app development. You'll learn more about this with Technovation!

Look up any words here 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!

Activity

Does your mentor or someone you know have experience in the tech industry? Ask them about their experiences and projects they've worked on! Here are some example questions to ask:

  • What technology-related projects have you worked on, and what did you learn? Your mentor might have helped build the technology, develop the business model, or contributed in another way.
  • If you have personal experience with a computer language, what did you use it for?

If you don’t know anyone in the tech industry, watch these interviews with women engineers at Facebook and Google!

Getting started with App Inventor

You can skip to the next section if you already know how to use App Inventor or if you will be using another programming language to make your app.

App Inventor is a free web application that allows users to create apps for Android phones and tablets. You can access App Inventor using a web browser by going to http://appinventor.mit.edu/.

App Inventor is really easy to start using! You can design and program your app all from your computer and then test your app with an Android phone or an emulator. Your work will be saved on the App Inventor servers, so it will be there each time you log in. To learn more about App Inventor visit this page.

What you will need

In this section you will learn how to use App Inventor to write an algorithm that an Android phone can understand! Here’s what you’ll need to use App Inventor:

  • Computer
  • Internet access
  • Gmail account
    • You need a Gmail account to log into App Inventor. To set up a gmail account go here.
  • Android phone or tablet (optional but highly recommended)
    • If you don’t have an Android phone, here are some reasonably priced options from Amazon that don't require service plans. We recommended Ice Cream Sandwich version 4.0 or newer for the operating system.
    • Motorola Android
    • BLU Android
    • Android Tablet

Once you have a Gmail account, set up an account with App Inventor here. After you setup your App Inventor account and log in come back to this page and go to the next section.

Connecting App Inventor to an Android Phone

You can connect an Android phone or an emulator to test the app you built in App Inventor in three ways. If you have a phone you can connect it over wifi or through a USB port. If you don’t have an Android phone, you can use an emulator, which is software that allows you to have a virtual phone on your computer. When you any these methods, App Inventor allows 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. After you review these sections and set up your devices, you should wait until the activity below to get started building your first app.

Wifi Method

This is the easiest way to use App Inventor and is highly recommended by the Technovation team. Choose this method if you have an Android phone or tablet and access to wifi. 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. Click on the button to view MIT’s instructions on how to get connected using wifi.

Troubleshooting Tips
  1. Make sure you downloaded the correct MIT AI2 Companion app onto your phone here: AI Companion App. The logo looks like this: AppInventorLogo
  2. Make sure your computer and your phone are on the same wifi network
  3. Reset your connection if you encountered an errorresetconnection
  4. If you’re still stuck here’s a video that may help:  PhilsComputerLab: Connecting with Wi-Fi

One you are set up and have everything working, go to the activity.

USB Method

This is the most technically difficult method to use and requires you to install software onto your computer. Choose this method if you have an Android phone or tablet and no wifi.

Using this method you will build apps on your computer using App Inventor and will test them on your phone by connecting it with a USB cord. You will need to download software onto your computer and the companion app onto your phone. If you are using a Windows computer, you may also need to download a USB Driver for your phone. For Macs, you do not need to worry about USB Drivers. Click below to view MIT’s instructions for the USB method. Click the button to view MIT’s instructions for the USB method.

Troubleshooting Tips
  1. Make sure you downloaded the correct MIT AI2 Companion app onto your phone here: AI Companion App. The logo looks like this: AppInventorLogo
  2. Reset your connection if you encountered an errorresetconnection
  3. You may need to enable developer options before they show up in your settings. Here is a good an article to show you enable developer options and USB debugging on most Android phones: howtogeek
  4. You may need to accept the dialog on your phone before it can connect to your computer

Mac

  1. You may need to change your default security preferences to if you get an alert that says “”MITAppInventorSetup.pkg” can’t be opened because it is from an unidentified developer.” To change this open security & privacy in your settings and click “open anyway”  or change your settings to allow apps to be downloaded from anywhere.

macerror

Windows

  1. Make sure aiStarter is running. You may need to search for it and start it up.
  2. You will most likely need to get a driver to have your phone work with your PC. Here’s MIT’s documentation on how to install a driver MIT USB help
    1. You should look up what the correct driver is for your phone. MITs documentation will help you if you have a google phone.
    2. You may need to update the driver your computer is using for your phone even after you have installed a new driver. Here are instructions on how to do that: Update Driver Instructions

One you are set up and have everything working, go to the activity.

Emulator Method

This method can be very tricky to use, especially on Windows, and is not recommended by the Technovation team. You should use this method if you have no Android phone or tablet.

An emulator is software that allows you to run a virtual phone on your computer. With the emulator method you will build apps on your computer and test them on your computer using an emulator. Click the button to see MIT’s instructions for the emulator method.

Troubleshooting Tips
  1. In Windows, make sure aiStarter is running. You may need to search for it and start it up.
  2. The emulator may be slow to startup.
  3. Make sure your phone is not plugged into your computer.
  4. Reset your connection if you encountered an error or if the emulator is not responding.resetconnection
  5. Here is a video to help you connect with an emulator: Using the Emulator

One you are set up and have everything working, go to the activity.

Activity

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

Tutorial 1: Talk to me Part I

Download a PDF copy of this tutorial here

Tutorial 2: Talk to me Part II

Download a PDF copy of this tutorial here

Event Handling

When you made the Talk to Me app you used both the designer and the blocks side of App Inventor. Every time you create a design element in your app you have to tell the computer what the element will do! All of this information will be in your blocks.

This is why App Inventor is called a ‘blocks programming language’. For every element that you put into the designer side of your app, you have to tell your computer what to do with it and when it should do it. This is known as event handling.

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 should trigger the code to run. 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. The way the computer handles the event is whatever you tell it to do when the event happens.

In your Talk to Me app, you told the app what to do when the user clicked a button, so you put an event handler on the button! It looked like this:

screen-shot-2016-08-26-at-1-04-52-pm

The event was the user clicking on the button and the app handled it by calling TextToSpeech to say something. This will be really important for you to keep in mind. When you are coding, you have to think about what you want your app to do and when you want it to do it.  

 

Activity

Can you think some examples of event handling that 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.

Functions

When you enter the blocks screen in App Inventor, did you notice all the different categories of built-in functions? They look like this:

technovation2

Functions are blocks of code that do something. They accept an input and produce an output. An input is information that goes into a function, and an output is information that is returned to you. In the Talk to Me tutorials, you used a Speech to Text function, which takes text, and turns it into speech! The input is the text and the output is the speech! As you continue to learn and program, functions and their inputs and outputs will make more sense.

The build-in functions in App Inventor are the basis of what you will be using to write your app. All programming languages have built-in functions, and good programmers know how to combine these functions in order to get the computer to do what they want. Once you know how to use each of these functions, you can combine them in all different ways to make your app! You will learn how to use these functions in Code 2: Data and Variables and Code 3: Logic, Loops and Conditionals.

Activity

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!

  1. 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.
  2. Use the Speech Recognizer sensor to have make your phone repeat back or print out something you say to it!

At the end of each coding unit, you will complete a coding challenge that you should submit to your mentor for feedback. These tutorials will help you learn key coding concepts and will help you build your final app.

Code 1 Challenge: Make a Slide Show

Challenge: Make an app that allows the user to click through a slideshow of your favorite pictures!

For this app you want to create a slideshow by allowing your user to navigate through images. When you design your screen, you will need to put an image as well as ‘previous’ and ‘next’ buttons for your user to click. This part will be done in the designer screen.

Try to figure out how to complete the code challenge on your own before looking at the instructions. The instructions show just one way of how this challenge can be solved.  You can also download our example app in the Google Play Store. Happy coding!

Reflect

In this lesson, we covered a lot! You learned a lot of keywords to get you started and wrote your very first program! Here are some reflection questions for you to discuss with your mentor or team:

Q1: What was the hardest part of getting started with App Inventor? Did you get “stuck” at any particular spot?

Q2: What are some things from this lesson that you think will be useful in creating your app?

Here are the keywords you learned:

  • Algorithms - Step by step instructions for a computer to follow
  • Programming language - A way to talk to your computer and tell it to do things
  • Event - When the user does something in your app, like click a button, or enter text
  • Event handler - The block of code that tells your app what to do when an event happens
  • Functions - Blocks of code that do something. They take an input, and change it into something else, which is the output.
  • Input - Information that goes into a function
  • Output- Information that comes out of a function