Introduction to Programming and App Inventor

Introduction What is a computer program? Introducing App Inventor Getting hands on with App Inventor

Create applications or “apps” for android devices App Inventor uses a screen designer to visually create the user interface App Inventor has a Blocks Editor that allows you to: Create actions Visually assemble code blocks

App Inventor provides an Android emulator that runs on your computer. The emulator (Figure 1- 3) is a simulated Android phone.

 Apple Inventor Runs in the Cloud (Web-based)  Part of MIT’s Center for Mobile Learning.  Advantages of the cloud-based approach  You can access App Inventor from any computer connected to the Internet  Your files are maintained and backed up by the host  Develop programs in a Web browser on your personal computer and test them on an Android device  All you need is an Internet connection and a Web browser on the developer computer  Download app to test programs on an android device

 Consider someone trying to complete a task  Brushing their teeth or making a sandwich  What if this individual needed written instructions to complete wither of these tasks?  What if written instructions were still needed evean after performing this task 100 times?  Would you consider this person smart?  All a computer can do is follow the instructions found in a program  It’s actually not “smart” at all

 It’s said the CPU is the “brain” of a computer  But all the CPU does is follow instructions  So the CPU is really not a “brain” as we think of it  The “intelligence” of a computer is in the instructions found in its programming  Those instructions are written by people  So people are actually the “brains” of a computer  This course teaches you how to be the brains of a computer!

A computer program is a set of instructions that a computer follows to perform a task A computer is a device that follows instructions to store, manipulate, and retrieve data When a computer is performing instructions, we say it is running or executing a program A program contains an algorithm… a set of well-defined, logical steps taken to perform a task

 The CPU can only executes instructions represented in machine language  Machine language consists of binary numbers such as for instructions  People find machine language very tedious  So most programming is done in a high-level language that makes the process more English-like  A program called a compiler translates high-level language programs to machine language

 Each high-level language has its own syntax  Syntax is a set of rules for formatting programming statements that must be strictly followed  Programmers call these statements code  Each high-level language has its own syntax  In traditional programming languages you write code by typing the instructions you need  Software called a compiler then translates your high- level language program to machine language  An executable program is a.exe file with machine language instructions the CPU can execute

 App Inventor is not truly a programming language  It’s actually a development environment  You create programs in a point & click environment  Program constructs are represented as puzzle pieces  You fit the pieces together & supply a bit more information  Uses identical logic as any other programming language  Behind the scenes App Inventor creates and runs Java code C++ C# Java  Visual Basic  Pascal  Python

 New programmers make lots of syntax errors  These are errors in how a statement is formatted  Similar to grammatical errors in English  For example “Boy run house” makes no sense  Syntax errors rarely happen In App Inventor since you don’t type programming statements.  Instead of typing, you drag and drop code blocks  Blocks are “snapped” together like puzzle pieces

 The steps to create an app in App Inventor: Go to the App Inventor website in your web browser Create a new project or open an existing project Create the user interface in the Designer Use the Blocks Editor to define the algorithm Also called the behavior or actions of the application Connect an Android device or the Android emulator to your project to test your algorithm  An app consists of components & their behaviors

 Used to set up the user interface  Consists of fundamental components on the screen  Defines how the user will interact with the application  Components can be visible or non-visible  Buttons, text boxes, and labels are visible  These are seen and utilized by the user  Non-visible components aren’t seen by users  But add features such as the LocationSensor  Component properties can be set including height, width, alignment, text to appear, etc.

 Provides different types of components that can be used  Each has different characteristics  A component type can be used in an app by dragging it from the Palette to the Viewer column

 Components you place on the simulated screen in the Viewer may look slightly different on your Android device  Note the shapes of the text boxes and buttons are not identical between the Viewer and device in this example

 Components Column Lists components placed in your app in a hierarchical tree format Lets you specify a meaningful name for a component  The Media Column Allows you to manage the media files (images, videos, and audio files) used in your app

 Component names can contain only letters, numbers, and underscores ( _ )  The 1st character of a component name must be a letter  Component names cannot contain spaces  Always change component names that will be used in the Blocks Editor to a meaningful name

Optional naming conventions used in the text  Pascal casing convention in which the 1st letter of each word is capitalized such as LabelContactName or LabelTotalPoints Optional naming conventions I prefer  I use camel casing in which the 1st letter of each word is capitalized except for the 1st word  I use 3 letter abbreviations for component types such as lblContactName or lblTotalPoints

 Lets you set values that determine how a component appears in the user interface  For example, can set the size, alignment, and text to appear

 An app is driven by events  Pressing a button or rotating your phone are examples of events  Think of an app as a set of event handlers  Behaviors are found in the event handlers  They define how the app responds to events  The key challenge of programming is to provide instructions that define the behaviors  Behaviors are defined in the Blocks Editor

 Most events are initiated by the user  Pressing a button triggers an event  Changing the device orientation triggers an event  Some events are not user-initiated  Events can be triggered by a timer (the clock)  Events can be triggered when two objects collide  An app need not react to every possible event  Programmer decides the events an app will react to by attaching a behavior to the event

 A block looks like a puzzle piece  A block executes some part of a behavior  Blocks become part of a behavior by dragging it from the Blocks column to the Blocks Viewer

 Organized into: Built-In – The basic blocks that may be used in App Inventor Screen1 – Shows blocks related to the components added in the Designer Any component – This is an advanced feature that allows a programmer to work generically with any component in the app

 The figure shows some of the built-in math blocks available in App Inventor  Note we have blocks for:  Addition  Subtraction  Multiplication  Division  Random Numbers and more