MakingyourveryownAndroidApps

forWaternomicsUsingAppInventor2

ByWassimDerguechandBrendanSmith

WhatisWaternomics?

Waternomics is European Project led by NUIG. This project aims to reduce water consumption of municipalities, corporations and domestic users by providing water managers and consumers with timely information about water usage and water availability. The project makes information about the water services system available to stakeholders in real-time in order to stimulate water saving. By employing smart water technology, the project (i) enables the detailed and real-time measurement of water flows and usage, (ii) supports analyses of water consumption patterns and (iii) provides key recommendations on how to increase water efficiency.

WhatisAppInventor2?

App Inventor is a graphic or block-based programming language online tool that enables users to learn coding and to build fully functional apps for Android devices such as tablets or phones. It was developed in collaboration with Google by a team at MIT, the same institute that gave us Scratch, the world’s most popular programming language for young people.

CourseAims

The aim of this course is to: • Help in the process of transforming participants from being digital

users �(consumers) into digital creators. � • Become proficient in a programming language known as Apps Inventor 2 � • Enable participants to build apps using Waternomics data.

Requirements

• Internet-connected computer � • A Gmail account � • An Android mobile telephone or tablet �(or a simulator on the computer) • Installation of a QR Code Scanner on telephone or tablet. �

Yourveryfirstappwilldisplay“HelloWorld!”Step1.Gotoyourwebbrowseronyourcomputer,AccesstheAppInventorbytypinginontheaddressbar:

http://appinventor.mit.edutolearnaboutAppinventor.

http://ai2.appinventor.mit.edutostartAppinventor(thisiswhatweneednow)

TheGoogleaccountspagewillnowappear.Typeinyouraccountdetailsfor(oneof)yourGmailaccount(s).ShouldyounothaveaGoogleaccount,pleasesetuponefromthispage.

ThenextscreenpromptstheusertosetupandconnectanAndroiddeviceoralternativelytosetupandconnectanAndroidemulatorfromyourcomputer.

Selecttherelevantlinkandfollowtheinstallationinstructions.Onceconnectivityhasbeenaccomplished,theuserisbroughttotheProjectsView.

SelectProjectsattheleftsideofthetopbar.SelectStartNewProject(Noteforteachers-ShowstudentsacompletedSampleofthetypeofappthatyouexpectthemtocreate).GiveaNametotheProjectwithoutusinganyspacingbetweenletters.

Thefollowingscreen(homepage)appears:

TheDesignereditorscreenthatnowappearsrelatestothelayoutoftheapp(howitlooks)orwhatisreferredtoastheGraphicalUserInterface(GUI).Itisthisscreenthatwillappearonyourmobileapp.ThedifferentsectionsandtheirfunctionalityontheDesignerscreenareshownbelow:

ClickingonBlocksat locatedattheupperrightsidebringstheusertothesecondscreenofAppInventorwhichistheBlockseditorthatrepresentstheactualprogramming(coding)environment.

ReturntotheDesignerscreen,byclicking ontheupperrighthandsideofthescreen.

Firstwewillgiveabackgroundimagetothescreenwhichwillappearonyourphone.Undercomponents,clickonScreen1

GototheMediatitleunderneathComponentsanduploadanimage

ThengotothePropertiessectionandselectBackgroundimage.Youruploadimageshouldbelisted.Ifso,selectOK.

SelectLayoutofthePaletteontheleftsideofscreenWearenowgoingtoplacefunctionalitycomponentsontothescreen.Firstwedivideupthescreenintodifferentsections.ThisisdoneusingtheLayoutsectionofthePalette.Inthisinstance,selectHorizontalArrangementanddragittothetopofthescreen.Thiscomponentisaformattingelementthatplacesanddisplayscomponentsfromlefttoright.

UnderitsProperties,chooseabackgroundcolour(preferablylightintone).ThengotoWidthandchooseFillParentwhichwillensurethatthiselementgoacrossthefullwidthoftheScreen(i.e.Parent).

NowintothissectionwewillpositionaButtontakenfromUserInterface.Abuttonisacomponentthatcanbecodedtodetectclicksbythephoneuser. IntheButton’sProperties,typeinthetext‘TalktoMe’.

Shouldyouwish,youcanalsochangethetextandbackgroundcolours.

GotheMediadrawerinthePaletteanddrag tothescreenwhere

itwillbeshownasanon-visiblecomponent. isthecomponentthatisusedtospeakamessage.NowweleavetheDesignerandgotoBlocksEditorasitistimetotellourappwhattodobycodinginfunctionality.WewanttomaketheTalktoMebuttontodoexactlythat-talk.

ThefirstsetofblocksshownontheleftareknownastheBuilt-inBlocks.Eachonecontainsaseriesofcodeblocksthatarebasedonthemessuchastext,listingsetcwhichshowontheViewer.ThesecanbedraggedtotheWorkspaceontherightwhichrepresentstheareawhereblocksarejoinedtogethertomakeaprogramme.

SelectButton1fromtheComponentssection.AseriesofgraphicblocksofcodewillappearintheViewsection.

Drag totheworkspace.

Clickon

Drag andplacewithinthe block.

Thisisthecodethatwillmakethephonetalk.Asitsignifiesthiswillhappenwhenthebuttononyourappisclicked.Howeverit

needstobetoldwhattosay.Thisisachievedbygoingtothe selecting

andattachingittoexistingcodeasfollows:

Tospecifyexactlywhattosay,typeinamessageinthe

NowtestitoutbyclickingtheTalktoMebuttononyourphone,tabletoremulator.

Ifyouarenotconnectedtoyourmobiledeviceoremulator,selecttheappropriateoptionontheConnectdrop-downmenu:

Thetextthatyouinputtedintotheblockcodingshouldnowbespokenbyyourdevicetoyourgoodself!

YoursecondappwillspeaktoyouThiscourselessonwillallowparticipantstohavetheirphonesayoutloudthewordsandsentencesthattheytypedin.Firststep.Gotowww.appinventor.mit.eduandclickontheCreateAppoption.

AlternativelylogindirectlytoyourAppInventoraccountbytypinginwww.ai2.appinventor.mit.eduEitherway,AppInventorwillalwaysbringtheuserdirecttothelastprojectthatwasworkedon.Inourcase,itwillbeTalkToMe.

ClickonDesignermode. GotoUserInterface.RemovebuttonlabeledTalkToMefromHorizontalArrangementandpositionitbelowthiscomponent.

Select anddragitintotheViewerpositioningitinHorizontalArrangement.ItwillnowrestabovetheTalkToMebutton.Fromwithinitsproperties,gotoWidthandselectfillparent.Thiscomponentwillfunction,oncecodedinBlockeditor,astheelementthatallowstheusertoentertextonthephone(oremulator). Tomakethishappen,gotoBlocks.

Removethe fromtheblocksofcodeintheViewer,placein

andreplacewith in

istheinstructionthatwillallowyourapptospeakoutwhateveryoutypedintothetextbox.TestitoutbyclickingonAiCompanion(ifyouhaveanAndroidphone)ortheEmulatorifyoudonot.

Aftertypinginasentence,clickonthebutton‘TalkToMe’whichshouldactivatethesmartdevicetospeakthewordsoutloud.Typeinanewsentenceandrepeattheprocess.

YourcalculatorappThislessonwillallowparticipantstocreateanappthatcalculatessimplearithmeticsuchasadditionandsubtraction.Firststep.Gotowww.appinventor.mit.eduandclickontheCreateAppoption.

AlternativelylogindirectlytoyourAppInventoraccountbytypinginwww.ai2.appinventor.mit.eduEitherway,AppInventorwillalwaysbringtheuserdirecttothelastprojectthatwasworkedon.SelectProjectsattheleftsideofthetopbar.SelectStartNewProject.GiveanappropriateNametotheProjectwithoutusinganyspacingbetweenletters.YouwillnowbebroughttoScreen1inDesigner.FromLayoutinPalette,selecttheTableArrangementcomponent;draganddropitintoViewer.Thiscomponentisaformattingelementthatisusedtoplace/displayintabularform. UnderProperties,setColumnsas2andRowsas2.Aswewillbecalculatingtheadditionoftwovariablenumberstorepresentthefunctionalityofthisapp,aLabelcomponentfromUserInterfaceforeachneedstobeplacedwithintheTableArrangement.ForeachofthetwoLabelcomponents,gotoitsPropertiesandtypeinanappropriatenameintheTextboxwherethevariablenumberswillbeinputtedby

theappuser.Forthisexample,wewillusethetitlesEnterX andEnter

Ythusgivingonthescreen: GotoUserInterface,selectTextBox;draganddropittotherightofEnterXintheTableArrangement.RepeattheprocessforEnterYoptiontogive

Thisisfollowedbyathirdtextboxwheretheresult(answer)ofthecalculationbetweenthetwonumberswillbeshownafteraButtonisclicked.SoselectButtonandTextBoxandplacebothintheViewerundertheexistingTableArrangement.

Gotothebutton’sPropertiestochangethedisplaytextfromTexttoButton1toCalculate.Pickasuitablebackgroundcolour(seeabovegraphic).InTextBox3Propertiesinput=(equalsign)inText(seeabovegraphic).Toundertakethecoding,gotoBlockseditor.

IntheBlockssection,clickonButton;draganddrop intoViewer.

GotoTextBox3iconinBlocksandposition in

togive

Theblocksofcoderepresentingmathematicalfunctionsarelocatedin .

representsthesumoftwonumbersandisplacedintheVieweras

follows CompletionoftheprogrammingforthecalculatorappisdonebyplacingcodefromtheTextBox1andTextBox2componentstoallowvariablenumbersforbothEnterXandEnterYtobeenteredintotheircorrespondinglabelboxes.

TesttheoperationofthisfunctiononyourappbyclickingonAiCompanion(ifyouhaveanAndroidphone)ortheEmulatorifyoudonot.

AftertypinginanumberforbothXandY,clickonthebutton‘Calculatewhichshouldresultintheanswerappearinginthethirdbox

YourWaterCalculatorThislessonwillallowparticipantstocreateanappthatcalculatesthewaterfootprintoffoodandproductsthatweeat/use.WewillusedatafromWaternomicsprojectregardingWaterfootprints.FirstofallgetyourselffamiliarwithWaterFlavoursAppavailableathttp://vmwaternomics01.deri.ie:8012Wewillusethemetaphors,andfootprintsavailableinthisapplicationtobuildours.Startbycreatingaheadertoyourapplication:Gotohttp://www.waternomics.euanddownloadtheheaderimage.

Createinyouscreenafirstlayoutandsetitssizetofillparentthenmakethisimageatabackgroundimageforthislayout.

Choose any of the water footprints or metaphors and download its image then insert the required components to your application following this layout:

The following block allows you to create the calculator for water footprint for a cup of coffee:

Please note that the numbers 125 and 132 are taken from the rule : 132Lofwaterisrequiredtoproduce125ml(s)ofcoffee.