APP INVENTOR - Boston University

Transcription

APP INVENTORBy Alicia, Vaishnavi, and Yoomin

About AppInventor

What is App Inventor?Website for making simple appsFun, useful, easy to use, and free!Languages: Java, Kawa, SchemeGreat for: teaching understanding, basics,troubleshooting, and persistence of programming Similar to Scratch Can use your own app on an android or emulator Website: https://appinventor.mit.edu/ 3

History of App Inventor 2007 - App Inventor began atGoogle MIT Professor Hal Abelsonworked at Google Labs during aperiod of leave Google Labs closed in 2011,causing App Inventor project tobe moved to MIT Professor Abelson joined twoother professors from anEducation Lab and MIT MediaLab to continue building thesoftwareMIT ProfessorHal Abelson4App InventorLogo

Uses of App InventorYou can Possible types of apps you canmake!- Get introduced to coding- Make cool apps in a shortamount of time without havingto learn code- Test out ideas for apps- Learn about the generalstructure of code- Express your creativity- Choose your own adventuregame- Personality quiz app- Soundboard app- App that provides informationon a specific topic- Name that movie app5

How to useAppInventor

How to use App Inventor (Part 1)How the process worksFirst, you canchoose the layoutand how your applooks in the AppInventor Designer.Second, you canprogram certainfeatures and screensto however you wantthem in the AppInventor Blocks Editor.7The final step is totry out your appon an AndroidEmulator or anAndroid phone.

How to use App Inventor (Part 2)How to navigate the App Inventor website:This is called the“Palette”, where you canThis is called the “Viewer”,choose differentwhere you can add thefeatures to add into yourfeatures from the “Palette”app.to the screen in themiddle.This screen right hereis called the “DesignerScreen.”This is called“Components” whereyou can see whatfeatures you added toyour screen.This is called“Properties”, whereyou can choose thesize, color and more,for a feature.8

How to use App Inventor (Part 3)DesignerBlocks9

Using theDesigner10

Most Used PaletteFeaturesUser Interface- Button- Checkbox- Image- Switch- Textbox Layout- HorizontalArrangement.Media- Video- SoundDrawing andAnimation- Canvas 11MostCommonlyUsedPaletteFeatures

How to Insert Media in your AppFirst, you must download the Media file to App Inventor1)2)3)4)5)In the “Media” column, click “Upload file”Click “Choose File”Locate your desired media file.Click Open.Now you should see the file in the “Media” column.To insert the media file inside the app:1)2)3)4)Unless you want to insert an image into your app’sbackground, choose something under the “Palette”column that can support a media file. Then, drag it ontothe Viewer.Under the column called “Properties”, find the “Image”,“Background Image”, or “Source” option and click on it.Select the media file you want to insert.For images and videos, you can adjust the size by clickingon the “Height” and “Width” option underneath“Properties”.12

At one point inthe video, I amsearchingthrough the fileson my computer.It is located on aseparate window.Since mycomputer doesnot supportscreen recordingtwo windows, youcannot see thefiles windowpopping up on myscreen.13

14

Using theCoding Blocks15

App Inventor BlocksControlTell when or underwhat conditionsparts of the programshould run orperform direct tasksLogicLabel or checkcertain conditions astrue or false (booleanoperators), check ifarguments are equalor program a certainvalue to be returned16MathPerform mathoperations along withabsolute value androunding, comparevalues or performconversions

App Inventor BlocksTextCreate andmanipulate strings(Ex. reverse a string,join strings, comparetwo strings, etc.)ListsCreate and manipulatesets of values, or find aspecific value in a listcreated (choose listitems by naming theirindex or indices)17DictionariesBuild and use datastructures withkey-value pairs, whichcan then be added toor changed

App Inventor BlocksColorsPick colors forcomponents of designor pen colors, makeyour own color byinputting R, G, and Bvalues or split a colorVariablesCreate variables tostore values mentionedbefore (lists, strings,integers) which you canget easily later in yourprogram18ProceduresSimilar to variableblocks, except instead ofstoring values, store asequence of blockswhich can be called laterfor efficiency

“19

BibliographyPatton E.W., Tissenbaum M., Harunani F. (2019) MIT App Inventor: Objectives, Design, andDevelopment. In: Kong SC., Abelson H. (eds) Computational Thinking Education.Springer, Singapore. https://doi.org/10.1007/978-981-13-6528-7 3“About Us.” Appinventor.Mit.Edu, appinventor.mit.edu/about-us.Accessed 29 July 2020.“What Is App Inventor?” ntent/what-app-inventor.html. Accessed 29 July2020.20

“KahootTime!21

Thanks forwatching!22

How to Inser t Media in your App First, you must download the Media file to App Inventor 1) In the "Media" column, click "Upload file" 2) Click "Choose File" 3) Locate your desired media file. 4) Click Open. 5) Now you should see the file in the "Media" column. To inser t the media file inside the app: