CODE 1

Introduction to Coding & App Inventor

Learning Objectives

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

Introduction to Coding

Algorithms

An algorithm is a set of instructions, much like a recipe. 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. 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.

If you are a Mac school then we recommend you use XCode. Let us know if you want to use another tool.

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!

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/. Watch this video to learn more about what it will be like to program using App Inventor.

App Inventor is really easy to use! 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.

Once you have a Gmail account, set up an account with App Inventor here. 

Troubleshooting tips:

1. Make sure you downloaded the correct MIT AI2 Companion app onto your phone here: . The logo looks like this: 
2. Make sure your computer and your phone are on the same wifi network
3. Reset your connection if you encountered an error

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: . The logo looks like this: 
2. Make sure your computer and your phone are on the same wifi network
3. Reset your connection if you encountered an error
4. If you’re still stuck here’s a video that may help:  

One you are set up and have everything working, go to the next activity (Talk to me).

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.

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

Videos

1. Here is a video that will help you set up a PC: 
2. Here is a video that will help you set up your phone, note you do not need the extra QR reader app: 
3. After you have everything set up, here is how you connect with a USB cable: 

One you are set up and have everything working, go to the activity (Talk to me).

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.
5. Here is MIT’s help page for the emulator: 
6. Here is a video to help you connect with an 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 & 2

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.

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:

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:

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.
   • Check this out to learn how: App Inventor TextToSpeech Information
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 can 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