I'm an App Developer

I'm an App Developer — page 1 — ask permission from an adult before entering the information to create an account GETTING STARTED On this page we will look at how to get your computer or device ready to create apps Let’s start with how to set up your computer STEP 1 CREATE A GOOGLE ACCOUNT You need to create a Google account to log in to App Inventor and save apps a Search for create google account create google account Search STEP 2 SIGN IN a Sign in to your Google account STEP 3 VISIT THE APP INVENTOR WEBSITE a Type appinventor mit edu into your browser a Click Create apps appinventor mit edu Create apps Sign in IF YOU HAVE AN ANDROID DEVICE FOLLOW THESE STEPS TO CONNECT IT TO APP INVENTOR STEP 1 DOWNLOAD THE COMPANION APP https accounts google com signup hl en a Search for app inventor companion app on your Android device a Tap Install and follow the instructions MIT AI2 Companion INSTALL app inventor companion app Search STEP 2 CONNECT APP INVENTOR a Go back to your computer and make sure you are on the App Inventor site Click Create apps 4 Connect AI Companion Emulator a Click the Connect menu then choose AI Companion a A QR code like this will appear on your computer Scan QR code a Tap the Scan QR code button on your device and hold your device’s camera up to the QR code on the computer screen

I'm an App Developer — page 2 — STEPS IF YOU DON’T HAVE AN ANDROID DEVICE STEP 1 DOWNLOAD THE EMULATOR a Search in Google for download app inventor emulator a Choose Mac or PC then follow the instructions to download the emulator STEP 2 INSTALL THE EMULATOR a Some web browsers will then ask you to run the installation program Choose Run a If this does not happen don’t panic The installer file should have been downloaded to your computer Look in your Downloads folder for it Double-click it to start installing the emulator You should get a big gray box giving you instructions on what to do next Follow these instructions to complete the installation a If you are on a Mac when you try to install the emulator you may get a security message To install the app you will need to click System Preferences click Security and change your settings to allow apps to run from Anywhere Search for install from unknown developer Mac for more help STEP 3 PC ONLY If you are using a Mac you don’t need to do this part a On a PC App Inventor needs a special program called the AI Starter to help it start the emulator After you have installed the emulator it should run the AI Starter The next time you use it go to the Windows Start menu It will be in the MIT App Inventor group or in the Recently Added section STEP 4 CONNECT APP INVENTOR TO THE EMULATOR Recently Added AI Starter MIT App Inventor Tools AI Starter appinventor mit edu Android Emulator a To connect the App Inventor to the emulator go back to the App Inventor website Arrange your screen so the browser fills only part of the screen Click Create apps Connect AI Companion Emulator a Click the Connect menu then choose Emulator Connecting Companion starting Cancel a You should see a message telling you to wait while the emulator starts Be patient this may take a minute or two App Inventor may ask you to select a project at this point If so move on to page 6 and start a project a When the emulator has finished setting up the app you are about to build will be shown onscreen If App Inventor doesn’t connect up to your device after following the steps on page 4 try closing the web browser on your computer On your device tap the recent apps button then find the MIT AI2 Companion App icon and flick it upward to close it Restart the Companion App and restart the computer browser Follow step 2 Connect App Inventor on page 4 to reconnect If App Inventor doesn’t connect up to your emulator try closing the emulator closing the web browser and starting again from step 3 above If you still have problems connecting go to the App Inventor site click Resources then Troubleshooting 5

I'm an App Developer — page 3 — SAYING HELLO The first thing many computer programmers do when they try some new coding software is learn to make the software say Hello With our first app we are going to make a program that says Hello world STEP 1 VISIT THE APP INVENTOR WEBSITE a Open your web browser and visit appinventor mit edu Create apps a Click Create apps STEP 2 SIGN IN STEP 3 START A NEW PROJECT a Sign in to your Google account Sign in STEP 4 DESIGN YOUR APP a Add the objects or components you need for your app Drag in a Button from the User Interface group in the Palette a Add a Label below it Screen1 Text for Button1 Text for Label1 a At the top-left of the screen click the Start new project button create new APP Inventor project hello project name Cancel OK Start new project a Type in hello as the name for your project a Click OK STEP 5 SET PROPERTIES a Change the text shown on the button and label Screen1 Text for Button1 Screen1 Text for Button1 Text for Label1 a Click to select Button1 a The Properties box is on the right side of the screen Near the bottom find the Text property Change it to say Tap me a Click to select Label1 a Find the Text property for the label Change it to say I’m waiting STEP 6 SWITCH TO THE BLOCKS VIEW a We’ve used the Designer view to choose what the app looks like Now we need to make our components work At the the top right of the screen click the Blocks button 6 Designer Blocks

I'm an App Developer — page 4 — STEP 7 START CODING We need to add code to make the button display Hello world when it is clicked or tapped a First click the Button1 icon a Code blocks for the Button1 component will appear hello Blocks Built-In Control Logic Math Viewer when do Button1 Click a Drag the when Button1 Click code block to the Viewer STEP 8 SET THE TEXT Screen1 Button1 Label1 set Label1 Text to when do Button1 Click set Label1 Text to a Click the Label1 icon a Scroll down to find the set Label1 Text to code block a Drag it into the when Button1 Click code block STEP 9 SAY HELLO Math Text Lists a Click the Text group ll ll set Label1 Text to ll ll ll Hello world ll Button1 Click when do a Find the code block at the top with a pair of empty quotation marks a Drag it on to the end of the set Label1 Text to code block a Type Hello world between the quotes STEP 10 TEST YOUR FIRST APP Tap me Hello world Connect AI Companion Emulator a Click the Connect menu then choose the AI Companion if you are using an Android device or Emulator if you have installed it see pages 4 5 If you are using the emulator on a PC make sure you have AI Starter running On a Mac it should start itself Or If you are using an Android device start the MIT AI Companion App then connect it to your computer by using the QR Code option CUSTOMIZE Change the message displayed when you tap the button Experiment with the properties of the button and the label Can you change their color and size 7

3

PAGE 3 OF 29

›

The only kids' eBook subscription service that offers thousands of high-quality books from well known publishers like HarperCollins, National Geographic and others.

JavaScript Required

Whoops! We're sorry but Epic doesn't work properly without JavaScript enabled. Check your web browser's settings to make sure it's enabled.