TableofContents
1.1Aboutthisseries1
1.2Gettingsetup2
1.3Creatingaquestion3
1.4Checkinganswers4
1.5Multiplequestions5
1.6Wrappingup6
I'mlearning:AppInventor
BEGINNERAPPINVENTOR
1
ThesecardsaregoingtointroduceyoutoAppInventor.You'regoingtogetthechanceto:
learntobuildappsforAndroidphonesandtablets
buildaquizthatkeepsscoreastheplayergoesthroughit
useanyquestionsandanswersyoulike,maybeaboutyourfavouriteband,asport
youplay,moviesoratvshowyoulove.I'mgoingtodomineondogs(Ilikedogs).
You'llendupwithsomethingthatlookslikethis(thoughyoucanplayaroundwith
coloursandaddingimagestobrightenitupifyoulike!).
1
Ifyouwanttofollowalongwithme,you'rewelcometo,ifnotthenwhereverIhaveadog
themedquestion,you'llhavetocomeupwithyourownquestion,therightanswer,and
someanswersthatsoundright!Ifyou'regoingtomakeyourownquiz,haveathinkabout
thatnowandmaybebrainstormoutsomeideaswiththeotherNinjasinyourDojoabout
whatkindofquestionsyoushouldhave.
2
AboutthisseriesI'mlearning:AppInventor
BEGINNERAPPINVENTOR
2
Onceyou'velearnedthesetechniques,youcanapplythemtocreatemorethanjusta
quiz!Thesesamecodingtoolscanbeusedtomakeacompleteinteractivestory,orto
buildacalculator,orawholebunchofothercoolapps.
3
AboutthisseriesI'mlearning:AppInventor
BEGINNERAPPINVENTOR
3
Beforeyoucandoanything,you'regoingtoneedanaccountontheAppInventorwebsite.
Gotodojo.soy/appinv-startandthenclickonthe"Createapps!"buttonatthetop-rightof
thescreen.
1
ThewebsitewillaskyoutosigninwithaGoogleaccount.Ifyoudon'thaveone,you'll
needtocreateoneoruseyourparent/guardian'saccount.2
OnceyouhavesignedinwithaGoogleaccount,AppInventorwillshowyouoptionsto
eithersetupanAndroiddevice(aphoneortablet)oranemulator(afake,simulated,
Androiddevice)onyourcomputer.
3
YoumayneedamentoratyourDojotohelpyouwiththisnextstep!Dependingon
whatyouhavepersonally,oravailableatyourDojo,youmayneedtoinstalltheemulator,
setupyourowndeviceoraDojodevice,ordonothingatall(iftheDojoalreadyhas
devicessetup).Ifyouneedtodoeitherkindofsetup,clickontheappropriatelinkand
followtheAppInventorteam'sinstructions.Onceyou'vedonethat,comebacktothe
SushiCards.
4
Right!Nowyou'reallsettogo!TimetocreateyourfirstAndroidapp!5
GobacktoAppInventorinyourbrowserandclickonthe"Startnewproject"button,atthe
topleftofthescreen.6
GettingsetupI'mlearning:AppInventor
BEGINNERAPPINVENTOR
4
Callyourproject"MyQuizApp"andclick"OK"7
You'llseeascreenlikethisone,andyou'rereadytogetcoding!8
YoucanseethattheAppInventorDesignerviewisbrokenintofourkeysections:
Palette—fromwhichyoupickthecomponentsyouwillusetobuildyourapp
Viewer—whereyoucanseetheappyouareworkingon,rearrangeandselect
components
Components—whereyoucanseealistofthecomponentsinyourappandtheir
relationshipstoeachother
Properties—whereyoucanseeandchangethepropertiesofthecomponentyou
haveselectedatthemoment
Thereareotherbuttonsandevenanotherview,butthisisallyou'llbeusingrightnow.
9
GettingsetupI'mlearning:AppInventor
BEGINNERAPPINVENTOR
5
First,dragaLabelcomponentintotheviewertouseforyourquestion1
TomakethisLabelhavethequestionyouwanttoaskinitfirstselectitbyclickingonit,
eitherintheViewerortheComponentssection.Now,inthePropertiessection,lookfor
Text(youmayhavetoscrolldown)
ChangethetextintheTextboxtoyourquestion.I'mgoingtogowith"Whatbreedisthe
world'slargestdog?"butyoucanpickanyquestionyoulike.Maybeaskwhatthefirst
songabandreleasedwas,orthescoreinthelastWorldCupfinal!
2
Ofcourse,whatgoodisaquestioniftheplayerdoesn'thaveachancetoanswer?Now
it'stimeforyoutoaddafew!DragfourButtonsfromthePaletteintotheViewer,then
selecteachofthemandchangetheTextinthePropertiessectionsothatoneofthemis
therightanswerandtheotherthreearewronganswers.Beastricky,orasfunny,asyou
likewiththem!
3
CreatingaquestionI'mlearning:AppInventor
BEGINNERAPPINVENTOR
6
Whatyouendupwithshouldlookalittlelikethis:
It'saGreatDane,bytheway!Checkhimout:dojo.soy/big-dog
4
CreatingaquestionI'mlearning:AppInventor
BEGINNERAPPINVENTOR
7
AndroidappsaremadeofScreens.You'vecreatedyourfirstquestionononeScreenand
you'regoingtowanttoaddmore.You'llputthemonnewscreens,butyouneedawayof
keepingscorebetweenthosescreens.Onthiscard,you'llbeaddingaTinyDBdatabase
tokeepthescorein,andsomecodetomarktherightanswer!
1
First,inthePaletteunderStoragefindtheTinyDBcomponentanddragitontothe
Viewer.Youwon'tseeanythingnewthere,butTinyDB1shouldappearinthe
Componentssection.
2
Nowit'stimetostartputtingtogetherthecodethatwillpoweryourquiz!Inthetoprightof
thescreen,clickontheBlocksbuttontoaccesstheblocksview.3
JustlikethepreviousDesignerscreen,thisBlocksscreenhassections:
Blocks—whereyoupickcodeblocks
Viewer—whereyoudragyourcodeblockstoassemblethem
4
CheckinganswersI'mlearning:AppInventor
BEGINNERAPPINVENTOR
8
Therearelotsofkindsofcodeblocks,butyou'rejustgoingtoneedafewofthemfornow.
IntheBlockssection,clickonwhicheverbuttonmatchestherightanswertoyour
question.Forme,itwasButton1.GrabtheWhenButton1.Clickdoblockanddragitonto
theviewer.
5
NowclickonTinyDB1andchoosethecallTinyDB1.StoreValueblock.Dragitintothe
lastblockandthengototheBuilt-inblocksgrabthepiecesfromMathandTexttomake
itlooklikethis:
6
Finally,updatethetextvalueto"score"andthenumberto1,likethis:
Whatyou'vedoneisstoredthevalue1(asinonepointforarightanswer)underthelabel
"score"intheTinyDBdatabase.Youcanpullitbackoutandchangeitonlaterscreens.
Thisway,youcankeepscorethroughouttheapp,nomatterhowmanyquestionsyou
add!
7
CheckinganswersI'mlearning:AppInventor
BEGINNERAPPINVENTOR
9
Nowyou'vegotyourfirstquestionandyou'regivingtheplayerapointforarightanswer.
Toaddanotherquestion,you'llneedtoswitchbacktoDesignerviewandclickonthe
AddScreen...buttoninthetopmenubar.
1
Nameyournewscreenwhateveryoulike.Idecidedtobeunimaginativeandleaveitas
Screen2fornow!2
Yournewscreenwillbeblank.AddaLabelwithyournextquestionandfourButtonswith
answers,justlikeonthelastscreen.DragaTinyDBontoosoyoucangetthatscore
valueyoustored!I'veaskedwhatdogsaremostcloselyrelatedto(it'swolves!)butyou
pickwhateverworksforthequizyou'rewriting.
3
Inthiscase,myrightanswerwasonButton3butthecodetochangethescorehastobe
alittleclevererhere,sinceyou'vefirstgottogetthevalueofscorebeforeyoucanadd1
toitandstoreit.Also,sincetherewillonlybeavaluethereiftheplayergottheright
answeronthelastscreen,youneedtosetadefaultvalueifthere'snothingthere.Soadd
somecodeintheBlocksviewthatlookslikethis(remembertousetherightButtonfor
yourrightanswer!):
4
MultiplequestionsI'mlearning:AppInventor
BEGINNERAPPINVENTOR
10
Great!ButhowdoplayersgetfromScreen1toScreen2?Youneedtogobackto
Screen1andgivethemaway!ToswitchscreensclickontheScreen2buttonandpick
Screen1fromthedrop-downmenu.
5
Now,fromtheBuilt-inblocks,taketheopenanotherscreenscreenNameControlblock
andaTextblockandaddthembelowthescorecode,likethis(ifyou'vechangedyour
screenname,you'llneedtousethatwhereI'veused"Screen2"):
6
Ofcourse,thatonlyworksifButton1isclicked.Youneedtoaddasimplerblockforallthe
otherbuttons(thewronganswers)likethis:7
Bycreatingmorescreens,andaddingthesesamekindsofblocksthatpointtothenext
screeneachtime,youcancreateanendlessnumberofquestions,andkeepscore
throughout!Gomakeoneortwomorequestionscreensfollowingthestepsonthiscard.
8
MultiplequestionsI'mlearning:AppInventor
BEGINNERAPPINVENTOR
11
Nowthatyou'refinishedaddingquestionsandconnectingscreens,youneedawaytotell
theplayerhowtheydid!1
Createonemorescreencalled"ScoreScreen"withnothingbutaLabelonit.Youalso
needtodragtheTinyDBonsoyoucanaccessthescore.2
NowswitchtotheBlocksviewand,usingblocksfromtheScoreScreen,Label1,Text,
TinyDB1andMathsections,putthistogether:3
YoushouldnowbeabletogototheConnectmenuandchoosetheemulatororother
connectiondeviceyousetupfortestingyourapps(youmightneedamentor'shelphere!)
andseehowyourcodeworksrightnow!
4
WrappingupI'mlearning:AppInventor
BEGINNERAPPINVENTOR
12
That'sit!You'vegotaquizthatwillkeepscoreacrossallitspages,nomatterhowmany
youadd,andwilltelltheplayerhowtheydidattheend.Nicework!Checkoutthenext
cardforafewideasonwhatelseyoucandowithwhatyouknownow!
5
Nowyouknowhowtobuildthisquiz,whatelsecanyoudowiththiscode?Onthiscard,
I'mgoingtogiveyouafewideasbutyoucanalwayscomeupwithsomethingcooler.6
Whataboutaninteractivestory?Youcanusethesameblocksyouusetomovefromone
screentothenexttomovearoundscreensbasedonusers'decisions.Youcancreatea
storywhere,forexample,youcandecidetoturnleftorrightataforkintheroad.Ifyou
mapitoutonpaperfirst,youcancreateacomplexbranchingstorywithloadsofdifferent
characters,secrets,andendings!
7
Youcanbuildanappthatgivesinformationondifferentscreens,connectedwithbuttons,
aboutanythingyou'reinterestedin!YoucantryaddinganImagecomponenttothescreen
anduploadingpicturestoo.Icouldbuildanotherdog-themedapp,withpicturesand
informationaboutdifferentbreeds!
8
WrappingupI'mlearning:AppInventor
BEGINNERAPPINVENTOR
13