Introduction to App Inventor PDF

MOBILE APP DEVELOPMENT LECTURE NOTES ILOILO SCIENCE AND TECHNOLOGY UNIVERSITY – MIAGAO CAMPUS COMPUTER STUDIES DEPARTMENT ARNOLD M. NARTE, MSCS Introduction to App Inventor...

MOBILE APP DEVELOPMENT LECTURE NOTES ILOILO SCIENCE AND TECHNOLOGY UNIVERSITY – MIAGAO CAMPUS COMPUTER STUDIES DEPARTMENT ARNOLD M. NARTE, MSCS Introduction to App Inventor MIT App Inventor is an online development platform that anyone can leverage to solve real-world problems. It provides a web-based “What you see is what you get” (WYSIWYG) editor for building mobile phone applications targeting the Android MIT App Inventor is an intuitive, visual programming environment that allows everyone – even children – to build fully functional apps for Android phones, iPhones, and Android/iOS tablets. App Inventor is an incredible new system from Google that allows Android applications to be designed and programmed with a Web page and Java interface. With very little programming knowledge, you can use App Inventor to create simple applications for yourself and your friends. With continuing experience with App Inventor, you can create very complex and powerful applications with App Inventor. MIT App Inventor is an incredible new system from Google that allows Android applications to be designed and programmed with a Web page and Java interface. It uses a block-based programming language built on Google Blockly (Fraser, 2013) and inspired by languages such as StarLogo TNG (Begel & Klopfer, 2007) and Scratch. A small team of MIT CSAIL staff and students, led by Professor Hal Abelson, forms the nucleus of an international movement of inventors. In addition to leading educational outreach around MIT App Inventor and conducting research on its impacts, this core team maintains the free online app development environment that serves more than 6 million registered users. As of October 2022, App Inventor has 121.1K daily users, 1.1M monthly users, 14.9M all-time users, and 67.8M app were built. App Inventor consists of the Designer and the Blocks Editor. App Inventor application programming consists of two interfaces: The Design view and the Blocks Editor. Programming in App Inventor is done with colorful blocks that are designed to snap together like puzzle pieces. The blocks are like words that, when snapped together, form sentences of instruction to your phone. The Blocks Editor is the interface that allows you to put all those puzzle pieces together. 1|Introduc tion to App Inve ntor  MOBILE APP DEVELOPMENT LECTURE NOTES ILOILO SCIENCE AND TECHNOLOGY UNIVERSITY – MIAGAO CAMPUS COMPUTER STUDIES DEPARTMENT ARNOLD M. NARTE, MSCS The Designer lets you create the app's interface: The Blocks Editor lets you program the app's behavior by putting blocks together: 2|Introduc tion to App Inve ntor  MOBILE APP DEVELOPMENT LECTURE NOTES ILOILO SCIENCE AND TECHNOLOGY UNIVERSITY – MIAGAO CAMPUS COMPUTER STUDIES DEPARTMENT ARNOLD M. NARTE, MSCS Getting Familiar with Design View Putting together a complete App Inventor application requires two major steps. First, you use the Design view to add components to your project. Some of the components you add are visible, such as buttons, labels, and text fields. These visible components make up your user interface. The user interface (or UI) is the part of the application that your user interacts with. The other kind of components you add from the Design view are functional but non-visual components, such as those for database functionality and screen arrangement. In the following sections, I help you explore the interface as you put together your first application. The Design view is laid out in five basic columns from left to right: Palette Media Viewer Properties Components The Palette column The Palette column contains all the components you can add to your project. It is subdivided into groups of related components, much like you would see colors grouped on an artist’s paint palette. The Palette column contains the following parts” 1. User Interface 2. Layout 3. Media 4. Drawing and Animation 5. Maps 6. Charts 7. Sensors 8. Social 9. Storage 10. Connectivity 11. LEGO MINDSTORMS 12. Experimental 13. Extension 3|Introduc tion to App Inve ntor  MOBILE APP DEVELOPMENT LECTURE NOTES ILOILO SCIENCE AND TECHNOLOGY UNIVERSITY – MIAGAO CAMPUS COMPUTER STUDIES DEPARTMENT ARNOLD M. NARTE, MSCS The Viewer column Clicking on any component in the pseudo-phone display in the Viewer column makes it the active component and highlights the component name in the Components column. Making a component the active component also changes the properties that are displayed in the Properties column to the properties or settings you can set for a component. The Components column The Components column is a list of all the components you have added to your project. The components arrange themselves in a branching tree structure, with screen arrangement components being the top level. When you get lots and lots of components, this structure allows you to collapse sections of the list to give freer access to some of the components. 4|Introduc tion to App Inve ntor  MOBILE APP DEVELOPMENT LECTURE NOTES ILOILO SCIENCE AND TECHNOLOGY UNIVERSITY – MIAGAO CAMPUS COMPUTER STUDIES DEPARTMENT ARNOLD M. NARTE, MSCS Media column The Media column is located directly under the Components column. This column lets you manage all media components for your application and add any supported media type. You can upload pictures, clip art, sounds, music, or movies to the Media column. You can also add media directly to the properties of some component that uses the media using the add file drop- down list from the property. Media that is added to your App Inventor project is uploaded from your local computer to the App Inventor server. All media files that you upload to a single App Inventor project cannot total more than 5MB. In the Media column, you can remove or download media from your project by clicking the media name and selecting Download or Delete. Keep the names of your media concise and meaningful because you cannot rename media after you upload it to the App Inventor server. Also, very long filenames can have a weird effect on Design view by causing the Media column to expand and squash the Viewer window. The Properties column Every component that you add to your project has settings to change how the component looks and interacts with other components in your application. Most of the properties for your components can be set in the Properties column or changed with blocks in the Blocks Editor when a given trigger occurs in your application. For instance, when a user presses a certain button, the text content or color can be changed. Each time you place a component that you are unfamiliar with, take a few moments to browse the fields in the Properties column. Some of the components, such as the ActivityStarter, have unique and confusing properties. 5|Introduc tion to App Inve ntor  MOBILE APP DEVELOPMENT LECTURE NOTES ILOILO SCIENCE AND TECHNOLOGY UNIVERSITY – MIAGAO CAMPUS COMPUTER STUDIES DEPARTMENT ARNOLD M. NARTE, MSCS Supported Image formats.JPG.GIF.PNG.BMP Supported Sound Protocols and File Formats Protocol Supported File Formats AAC.3GP, MP4, M4A MP3.MP3 MIDI.MID,.XMF,.MXMF,.RTT.,.RTX,.OTA,.IMY Ogg Vorbis.OGG Wave/PCM.WAV Introducing the Blocks Editor After you have the entire user interface (UI) in place, it’s time to add logic and flow to your application. You have placed all the visible items on the Viewer and changed the properties to make them look the way you want them to. You use the Blocks Editor to tell the application what to do when it starts, when it stops, and when the user performs an action. Programming in App Inventor is done with blocks that are colorful and shaped to snap together like puzzle pieces. The blocks are like words that, when snapped together, form sentences that give instructions to your phone. The text on the blocks say plainly what they are for and what they expect from you. The blocks are stored in drawers. The drawers are accessed or “pulled out” by clicking the corresponding button on the left side of the Blocks Editor. The individual blocks in a drawer can then be clicked and dragged to the Blocks Editor workspace where you snap them together to represent instructions to the Android phone. Previewing Built-in Blocks The Blocks Editor contains two tabs: Built-In and My Blocks. Every time you drop any component onto the Viewer, a new component drawer and new blocks are added to the MyBlocks tab in the Block Editor. The Built-In blocks tab contains all the blocks drawers that have static activities and instructions. These blocks remain for you to 6|Introduc tion to App Inve ntor  MOBILE APP DEVELOPMENT LECTURE NOTES ILOILO SCIENCE AND TECHNOLOGY UNIVERSITY – MIAGAO CAMPUS COMPUTER STUDIES DEPARTMENT ARNOLD M. NARTE, MSCS use no matter what components you add. These blocks contain instructions such as, make a list. Each drawer category contains multiple blocks that you will use throughout this book. The built-in blocks work with your blocks (the ones created when you added components and the ones you create in the Blocks Editor) to create instructions for your application. The following list describes the blocks drawers found on the Built-In tab: Definition drawer: Contains blocks that allow you to define programming constructs and concepts. Text drawer: Contains all of the blocks that you can use to manipulate text by creating text, joining pieces of text together, and pulling pieces of text out of other text. Lists drawer: Contains many powerful blocks that enable you to create storage containers for lists of items; traditional programmers may think of lists as arrays. Math drawer: Contains those math function blocks that you tried to avoid through high school, such as exponent, modulus, and cosine; these functions let you do nearly any mathematical function, including very advanced math. Logic drawer: Contains the blocks that help your program make rational decisions, such as Yes, No, True, False, “Are these two things alike?” and “Are these two things different?” Control drawer: Contains a wonderland of odd and peculiar-looking blocks that allow you to control the fl ow and progression of your application by using program “sentences” that give commands, such as “If the button is pressed, do something, but if it isn’t pressed, do something else.” Colors drawer: Contains blocks that allow you to easily set the color of items in your user interface; all colors for your Android application in App Inventor are represented by numbers, and these blocks make it easy to plug the right numbers for basic colors into your application. These can be found on the My Blocks tab, which contains all the component blocks that you created when you placed components in Design view; each component you placed and named has a button to open that component's drawer: My Definitions drawer: Contains all the blocks that you create or define using the Definitions drawer under the Built-In tab; these blocks are not 7|Introduc tion to App Inve ntor  MOBILE APP DEVELOPMENT LECTURE NOTES ILOILO SCIENCE AND TECHNOLOGY UNIVERSITY – MIAGAO CAMPUS COMPUTER STUDIES DEPARTMENT ARNOLD M. NARTE, MSCS created when you add a component but rather when you drag a block from the Definitions drawer. Your Components Blocks drawer: Beneath the My Definitions drawer are the drawers for the components you have added in Design view; clicking a component name opens the drawer and allows you to drag out blocks that are events, methods, (things that happen to or with the component), or properties. Managing Your Projects App Inventor is a Web-based application. That means that your projects and all of your work stay in Google’s cloud. Cloud computing gives you access to your work via the Internet and remote servers so that you don’t have to install apps or store files on your local computer. After you log into App Inventor, click the My Projects link in the upper-right corner of the browser window. This takes you to the overview of all the projects you have in your App Inventor account. From here, you can control which applications you want to open and work on, download, upload, or delete. From the My Projects view, you can start a new project or manage and delete old projects. This screen offers only a few options, so you can become familiar with them fairly quickly. On the My Projects views, you can: Create a new project Delete an existing project Download project source code to your computer Upload project source code from a colleague into your My Project view Load an existing project into App Inventor Compatibility Issues The Android operating system and App Inventor are both evolving systems with frequent updates. When update we MIT App Inventor, we try to maintain compatibility across Android versions, but this is not always possible. Here are some notes on issues dealing with changes in App Inventor releases: App Inventor apps created before 2013 will not work on devices running Android system 4.1 or newer systems. 8|Introduc tion to App Inve ntor  MOBILE APP DEVELOPMENT LECTURE NOTES ILOILO SCIENCE AND TECHNOLOGY UNIVERSITY – MIAGAO CAMPUS COMPUTER STUDIES DEPARTMENT ARNOLD M. NARTE, MSCS As of August 2015, MIT App Inventor will no longer work on devices running Android OS version 1.5 (cupcake, API level 3) or earlier. The minimum supported version is 1.6 (donut, API level 4) App Inventor Classic was discontinued in July 2015, as announced in App Inventor Classic RIP App Inventor Tips & Tricks Making comments Add a note to blocks in your code to let you and others know what you were doing. Comments can be added by right clicking on a block and selecting the Add a Comment option. Your comment will now be saved and can be accessed by clicking on the question mark at the top right of the block. Condensing blocks Click a button on a group of blocks to condense them and allow you to have more space available on your screen. Condensing can be done by right clicking and selecting the Collapse Blocks option. Typeblocking Typeblocking is a feature of App Inventor that allows users to type directly on the Blocks Editor to pull up the block they want to use. Normally you find which drawer the block you want is in, then you would have to click on the block and drag it on to the screen. Fast deletion Instead of dragging your block or blocks to the trashcan in the lower left corner, just select them by clicking your mouse and hit the delete key. Copy-pasting If there are certain blocks you will need again, just copy and paste the blocks. 9|Introduc tion to App Inve ntor