1 / 29

MIT App Inventor

MIT App Inventor. Lesson 1 – Getting Started with App Inventor. Agenda. What is App Inventor? Getting Started Designing User Interfaces (Design) Creating Blocks (Code) Emulator (Test) Handling Events Buttons (Action) Components (Behaviour). What is App Inventor?.

bin
Download Presentation

MIT App Inventor

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MIT App Inventor Lesson 1 – Getting Started with App Inventor

  2. Agenda • What is App Inventor? • Getting Started • Designing User Interfaces (Design) • Creating Blocks (Code) • Emulator (Test) • Handling Events • Buttons (Action) • Components (Behaviour)

  3. What is App Inventor? App Inventor is a visual programming environment used to create mobile applications for Android devices (phones/tablets). Facts • Originally created by Google Labs • Now hosted at MIT • Project is open source

  4. Explore – Setup / Tutorials http://appinventor.mit.edu Click on Explore to learn about App Inventor.

  5. Where do I get the Installer? http://appinventor.mit.edu/learn/setup/setupwindows.html http://appinventor.mit.edu/learn/setup/setupmac.html

  6. AI - Projects Click on Invent to create/modify App Inventor Projects.

  7. App Inventor- Tools AI consists of three (3) tools that work together: • Component Designer Define Graphical User Interface (GUI) and Non-GUI components • Blocks Editor Determine the behaviour (algorithms and data structures) of the components • Android phone or emulator Platform for testing/using apps

  8. App Inventor Development Cycle • Paper / Pencil • Component Designer • Blocks Editor • Blocks Editor • Phone/Emulator

  9. What do I need to get started? • GMail enabled account • Browser (anything but IE) • Install the App Inventor Setup program for your platform (Windows, Mac OS X, Linux) • provides Android emulator • Recent version of Java (v6+) • Internet connectivity optional • Android phone/tablet • device driver for Android device for live testing

  10. Classroom environment Development Steps • Open browser (Firefox or Chrome) appinventor.mit.edu • Start emulator from desktop shortcut • Start Blocks Editor Java application • Connect Blocks Editorto emulator for testing Notes: Emulator takes a few minutes to start. Each code change will be reflected in emulator.

  11. Get Developing - Projects • An App Inventor Project is a collection of components and blocks. • Open website • Log in using your GMAIL account • Available Actions • Import existing project into new project • Create new project • Save/Export project

  12. AI – Projects Page

  13. AI Components / Events Event based programming • Components are visible or non-visible "objects" with defined properties and behaviours. • Set the initial properties of components in the Component Designer

  14. AI Component Designer Palette - Available component types Viewer - "rough" visualization of app Components - actual components in project Properties - initial properties for component

  15. Palette • Grouped by type • Action • select component and drag it to the Viewer • Note: Default name given • click RENAME button in Component section to give it a MEANINGFUL NAME • Change default property values (if desired)

  16. Screens • Properties • Defaults – Comp Designer • BackgroundImage • may need to be resized • Icon • Used on devices only (50x50) • ScreenOrientation • can be fixed or flexible • Scrollable • Title – ALWAYS change • exception is Screen1 • VersionCode - new • VersionName – new • Multiple Screens (later)

  17. Designing Apps • typical phone is 300 x 400 pixels • GUI components • default position is top and left, but can be changed • location can be adjusted • Screen Arrangements (later) • Properties (common) • Text • Width – Fill Parent • Height

  18. Best Practices - Naming • Every component has a name • If component will be used in your algorithm • CHANGE ITS NAME • Naming Conventions • btnName – buttons • txtName – textbox (later) Note: "Name" is decided by the programmer

  19. Behaviour • Represents the logic of your application • Programs consist of 3 types of structures • Sequential operations • Conditional operations (decisions) • Repeated operations Use the Blocks Editor to define the app behaviour.

  20. Component : Button • Buttons are GUI components • Typical Use: Input • Take an Action / React to a User Initiated Event • Example: Reset Score button • Actions would be defined in Blocks Editor using Blocks/Code Reset Score

  21. Button actions Event - when click do • This action occurs once for each button click. • Example: Change screen color

  22. Blocks Editor

  23. Blocks Editor: Built-In • Definition • variables, procedures • Text • String library • Lists • List library • Math • Math operators • Logic • relational operators, conditionals • Control • screens, loops • Colors • color library

  24. Blocks Editor: My Blocks Choose your component • Set the default properties for each component

  25. Dynamically Changing Properties Properties are initially set in Component Designer • Blocks can change the properties of any components in your Project Blocks Editor • Locate the component (Screen1) • Locate the set block and provide a valid value for the property (BackgroundColor in this example)

  26. Hello KittyDemo

  27. Lab 1 - ColourMe ObjectiveCreate an interactive app that changes the colour of the screen on the computer. • Components • Buttons • Screen1 • Algorithms • When "red" button is clicked (Event) change the screen colour to red (Event Handler). • Include buttons for "Green", "Blue" • Initially • The app should have a "white" background when it starts and the "Reset" button will reset the screen • Include a "Quit" button to close the application.

  28. Lab 1 - ColourMe App Inventor Skills • Screens • properties • BackGroundColor • Buttons • properties • Text • Events • WhenClicked

  29. Take it with you !! If students have phones. Three ways to get the app on a phone. • Create a QR code • download to a phone (using developer email) • Download to the computer • save a an Android install file (APK) on your development computer • Download to Connected Phone • install the APK directly on the phone

More Related