Berufsbildende Schulen II Leer

Berufsfachschule Elektrotechnik - Schwerpunkt Informatik -

Einführungskurs App-Programmierung

mit dem MIT App Inventor 2

DirkKruse(OStR)BerufsbildendeSchulenIILeerFachbereichInformationstechnikBlinke3926789LeerTel.:04919275239E-Mail:kruse@bbs2leer.deInternet:www.dkruse.de

2

Inhaltsverzeichnis

1Vorwort.............................................................................................................................4

2InstallationderEntwicklungsumgebung...........................................................................6

2.1Vorbereitung:Google-Account......................................................................................7

2.2ImporteinerBeispiel-AppzuTestzwecken....................................................................7

2.3Installationsvariante1:Windows-PCundeinAndroid-Smartphone(VerbindungüberWLAN).....................................................................................................8

2.4Installationsvariante2:Windows-PCundeinAndroid-Smartphone(VerbindungüberUSB)........................................................................................................9

2.5Installationsvariante3:Windows-PCunddenEmulatornutzen..................................11

3EinBlickhinterdieKulissen:diewichtigstenElementederEntwicklungsumgebung.....13

4BenutzenderEntwicklungsumgebung:dieerstenÄnderungenanderBeispiel-App.....15

4.1ÄnderungenanderApp-Oberfläche............................................................................15

4.2ÄnderungenamProgrammcodeimBlocks-Editor.......................................................16

5DieersteeigeneApp.......................................................................................................18

5.1GestaltungderApp-Oberfläche...................................................................................18

5.2ErstellungdesProgrammcodes....................................................................................21

5.3VerbesserungderApp..................................................................................................22

6DieBedeutungvonOperatorenundVariablen...............................................................23

7Fallunterscheidungen/Verzweigungen............................................................................27

7.1Projekt„Ratespiel“.......................................................................................................27

7.2UmsetzungdesProgrammablaufes.............................................................................28

7.3Verzweigungenmit„when–do“und„if–then“.........................................................30

7.4OptimierungderApp....................................................................................................31

7.5LetzteVerbesserungen.................................................................................................32

8Wiederholungen..............................................................................................................33

8.1Projekt„Lottoziehung“.................................................................................................33

8.2Programmcodezur„Lottozahlen“-App.......................................................................34

PlatzfürNotizen.................................................................................................................38

3

4

1Vorwort ProgrammebestimmenunserLeben.Wasvor50Jahrennichtvorstellbarwar,istheutefürjedeszehnjährigeKindselbstverständlich:DieAntwortaufdieFrage,wiedasWetterwird,liefertdieWetter-Appdes Smartphones.Vor20 JahrengabesnurdenWetterbericht imRadio oder im Fernsehen (analog über Antenne und nicht über das Internet) oder dieVorhersagefürdennächstenTaginderZeitung.HeutehatjederZugriffaufdasRegenradarverschiedenerWetterdienste. Das ist nur ein Beispiel für die Veränderungen in unseremLeben, die durch die Entwicklung der Informationstechnologien immer mehr Bedeutunggewinnen.BereitsdieBenutzungderMikrowellebedeutetheuteinderRegel,dasseinProgrammzurSteuerungdesGerätesgestartetwird.UndnatürlichistjedeSmartphone-AppeinProgramm.„App“ istübrigenseineAbkürzungfürdasenglischeWortapplication,daswiederumeineKurzformdesBegriffes„applicationsoftware“darstellt.Eine„applicationsoftware“ isteinComputerprogramm, das verwendet wird um bestimmte Probleme auf Computern zubearbeiten.ImdeutschenSprachraumbeziehtsichdieAbkürzungAppaufProgramme,dieaufSmartphonesgenutztwerden.ImJahr2014bestandzumBeispieleineAppfürdasiPhonedurchschnittlichaus40.000ZeilenProgrammcode.Das bekannte BetriebssystemWindows7 hatte eine Programmgröße vonetwas40MillionenZeilen.Wennmandarübernachdenkt,waswirallesfürInformationenunseremComputeroderunseremSmartphoneanvertrauen,stelltsichdieFrage,obwirdieSystemenochüberblickenodersogarverstehen?DieAntwortsollteeigentlich„Ja!“lauten.Wennwiraberehrlichsind,müssenwirunseingestehen,dasswiroftnichtwissen,warumetwasfunktioniertoderauchnichtoderwieesüberhauptfunktioniert.DiesesVerständnisistaberwichtig,umdieRisikenundNebenwirkungenderNutzungwenigstensabschätzenzukönnen und Schlussfolgerungen für den Umgang mit den Geräten abzuleiten. Das giltinsbesonderefürMenschen,dieIT-BerufeausübenoderdieseBerufeerlernenwollen.DazueinVergleich:niemandkannsicheinenKfZ-Meistervorstellen,dernichtsvonderTechnikamAutoversteht.Aberwie könnenwir verstehen,wie Programme funktionieren,was sie können undwasnicht?Ganzeinfach:wirmüssenselbstprogrammieren.Programmiert wird in Programmiersprachen. Davon gibt es sehr viele, die hier gar nichtaufgezähltwerdensollen.Vielesindveraltetundwerdennichtmehrgenutzt,anderesindgeradeziemlichaktuellundweitverbreitet(z.B.JavaoderC++)undwiederanderekennenwir noch gar nicht – sie werden erst in der Zukunft neu entwickelt. Das klingt ziemlichaussichtslos,wennmansichmitderProgrammierungbeschäftigenmöchte.Bedeutetdas,dassman eine Programmiersprache heute lernt undmorgen dasWissen darüberwiedervergessen kann, weil die Sprache veraltet ist? Zum Glück nicht! Denn alle Programmebestehen aus den gleichen Grundstrukturen, die sich wohl sobald nicht ändern werden.Jedenfalls solange nicht,wiewirmit Computern arbeiten,wiewir sie heute kennen. BeiQuantencomputernkönntedas inderZukunftmalandersaussehen,aberdas istwirklichZukunftsmusik.

5

InunseremsechswöchigenEinführungskursindieProgrammierungwerdenwirdeshalbmiteinerProgrammiersprachearbeiten,dieeigentlichgarkeineist,sondernmehraneinPuzzle-Spiel erinnert. Siehilft unsaber inhervorragenderWeisedabei, dieGrundstrukturenderProgrammierungzuverstehenundselbstzuprogrammieren.DasBestedabei:esentstehenechteApps, die tatsächlich auf demSmartphone installiert und getestetwerden können.WenndaskeinegutenAussichtensind!Vielleichtentdecktdereinoderanderevoneuchdabei den Spaß an der Programmierung und entwickelt später eigene Apps für andereNutzer.BeidemvorliegendenKursmaterialhandeltessichnichtumeinFachbuch.ImGegenteil,diefachlichenInhaltewerdenaufeinMinimumbegrenzt.ImVordergrundstehtdiePraxis,alsodie das Programmieren. Zum Erstellen der Programme benötigen wir eine sogenannteProgrammierumgebung, auch Entwicklungsumgebung genannt. Wir verwenden dazu dasvon Google entwickelte App Inventor 2. Programmieren werden wir mit einer grafisch-basierten Programmiersprache, die am MIT (Massachusetts Institute of Technology)entstandenistundunterdemProjekt„Scratch“bekanntgewordenundsehrerfolgreichist.ManmusshierkeineBefehle lernen,sondernkann intuitivdasProgrammausgegebenenBausteinenzusammenstellen.DassiehtdannsozumBeispielsoaus,wieinderfolgendenAbbildung:

Abbildung 1: Teil eines App Inventor-Programms

Zum Abschluss dieses Vorwortes noch ein ganz wichtiger Hinweis, man könnte auch„Warnung“ dazu sagen: Ohne Übung Zuhause wird es nichts werden mit derProgrammierung.DieInstallationderProgrammierumgebungunddasProgrammierungauchaußerhalbdesUnterrichtessindunverzichtbarfürdenErfolg inderProgrammierung.Undohne Programmierung kein erfolgreicher Abschluss der Berufsfachschule und damitvermutlichauchkeineKarriereineinemIT-Beruf.Die letzten Bemerkungen sollten dir aber nicht den Spaß und die Freude an derProgrammierungverderben.Dennjetztgeht’slos!LeerimAugust2017

6

2InstallationderEntwicklungsumgebung Die Vorbereitung der Entwicklungsumgebung ist die größte Hürde, bevor manlosprogrammieren kann.Mit einem Android-Smartphone hat es am einfachsten. iPhone-NutzermüssenaufdenEmulatorausweichen.

DieProgrammewerden imBrowser (vorzugsweiseChromeoderFirefox)entwickelt.DazubenötigtmaneinGoogle-Benutzerkonto.GetestetwerdendieProgrammeaufdemAndroid-Smartphone. Eine umfangreiche Installationsanleitung in Englisch findet man auf deroffiziellen AppInventor-Internetseite unter http://appinventor.mit.edu/explore/get-started.html. Dort gibt es Anleitungen für die Installation unter verschiedeneBetriebssystemen (Windows7-10,LinuxundMacOSX)undmitverschiedenenEndgeräten(Android-Smartphone oder Emulator). Außerdem kann das Smartphone auf verschiedenArtenmitderEntwicklungsumgebungverbundenwerden(perUSB-KabeloderperWLAN).DakannmanschnellmaldenÜberblickverlieren.

Abbildung 2: Installationsmöglichkeiten der Entwicklungsumgebung

Es würde den Rahmen dieses Kursmaterials sprengen, wenn alle Konfigurations-möglichkeiten im Einzelnen erklärtwürden.Wir beschränken uns deshalb auf die beidenhäufigstenSzenarien:

a) Auf dem PC ist Windows als Betriebssystem installiert und es wird ein Android-SmartphonezumTestenderAppsverwendet.

o DeinAndroid-SmartphonewirdperWLANmitdemPCverbundenodero DeinSmartphonewirdperUSB-KabelmitdemPCverbunden.

7

b) AufdemPCistWindowsalsBetriebssysteminstalliertundeswirdderEmulatorzumTestenderAppsverwendet.WenndueinSmartphoneoderTabletmitApples iOS-Betriebssystembesitzt,kannstdudieProgrammenichtaufdeinemGerättesten.Indiesem Fall musst du den Emulator nutzen. Den Emulator und auch dieEntwicklungsumgebunggibtesaber–wieschonerwähnt–auchfürApple-undLinux-Computer.

2.1Vorbereitung:Google-Account

Du kannstApp Inventor 2 zur Programmentwicklung verwenden, ohne etwas auf deinenComputerherunterladenzumüssen.DenndieProgrammierungderAppserfolgtonlineimBrowserfenster.DumusstdichallerdingsmiteinemGoogle-Accountanmelden.DadueinAndroid-Smartphone besitzt, müsstest du bereits über einen Google-Account verfügen.Wenn du noch keinen Google-Account hast, registriere dich bei Google unterhttps://accounts.google.com/SignUp?hl=de.UmAppsaufderAppInventor-Websiteentwickelnzukönnen,meldestdudichmitdeinemGoogle-Kontounterai2.appinventor.mit.eduan.2.2ImporteinerBeispiel-AppzuTestzwecken

DamitwirdieVerbindungzwischenderEntwicklungsumgebungimBrowserdesComputersmitdemSmartphoneoderdemEmulatortestenzukönnen,benötigenwireinerstesApp-Projekt. Dieses Projekt kann unter www.dkruse.de/appinventor/beispiel.aiaheruntergeladenwerden.Schrittfolge:1. LadedasvorbereiteteBeispiel-Projektunterwww.dkruse.de/appinventor/beispiel.aia

herunter.2. NachderAnmeldungerscheintdasProjektfenster„MyProjects“,dasnatürlichnoch

keineProjekteenthält.KlickeaufdieSchaltfläche„Projects“undimdannerscheinendenMenüaufdenEintrag„Importproject(.aia)frommycomputer“.

Abbildung 3: ein Projekt importieren

3. KlickeaufdieSchaltfläche„Dateiauswählen“undsucheimDownload-OrdneroderaufdemDesktopdeinesComputersdieimSchritt1heruntergeladeneDatei„beispiel.aia“

4. StartedenImportdurcheinenKlickauf„OK“

8

5. DanachkanndasProjekt„beispiel“angeklicktwerden.DieEntwicklungsumgebungöffnetsich.

2.3Installationsvariante1:Windows-PCundeinAndroid-Smartphone(VerbindungüberWLAN)

DieseVarianteistdieeinfachsteFormderVerbindung,wennPCundSmartphonebereitsdasselbe WLAN nutzen, was Zuhause häufig der Fall ist. Diese Verbindungsmethode wirdaußerdemvomMIT-App-Inventor-Teamempfohlen,weilkeineSicherheitseinschränkungenaufdemSmartphonevorgenommenwerdenmüssen.UmspäterLive-TestsdererstelltenProgrammeaufdeinemAndroid-Gerätdurchführen zu können, musst du die App „MIT AI2 Companion“ aufdeinemAndroid-Handyoder-Tablet installieren. DasProgrammfindestduinGooglesPlay-Store(Link).DukannstdenQR-Coderechtsverwenden,umzurAppimPlay-Storezugelangen.Sobalddie„MITAI2Companion“-Appinstalliertist,kannstduProjekteimAppInventorimBrowseröffnenund dann aufDeinemGerät die App testen. Änderungen amProgrammwerdenunmittelbaraufdasSmartphoneoderTabletübertragen.Achtung:nichtdieähnlichaussehendeApp„AppInventor2“installieren. Schrittfolge:1. „MIT AI2 Companion“-App aus dem Play Store auf dem

Smartphoneinstallieren2. Unter ai2.appinventor.mit.edu/ mit dem Google-Account

anmelden3. PCundSmartphonemüssensichimgleichenWLANbefinden

Abbildung 5: Link zur AI2 Companion App im PlayStore

Abbildung 6: das richtige Programm im Play Store

Abbildung 4: Entwicklungsumgebung mit der Beispiel-App

9

4. UmdieAppaufdasSmartphonezuübertragen,startedieApp„MITAI2Companion“aufdeinemSmartphone.

5. Klicke in der Entwicklungsumgebung auf dem PC auf das Menü

„Connect“. Wähle dort den Menüpunkt „Ai Companion“. Auf demBildschirmerscheinteinQR-Code.

6. TippeaufdeinemSmartphoneinder„MITAI2Companion“-AppaufdenButton„Scan

QR-Code“undhaltedasSmartphonedannmitderKameraaufdenQR-Codebisdiesererkanntwurde.Danach wird die Verbindung hergestellt unddie Beispiel-App auf das Smartphoneübertragen. Auf dem PC-Bildschrim erscheintdabeikurzeinFortschrittsbalken.Alternativ kann auch ohne Kamera und QR-Code eine Verbindung hergestellt werden.Dazu muss die Buchstabenfolge, die nebendemQR-Code unter „Your code is:“ auf demPC-Bildschirmzusehenist, indasEingabefeld„Six Character Code“ der „MIT AI2Companion“-App(companion:dt.Begleiter)indasSmartphoneeingetipptwerden.Überdie Schaltfläche „connect mit code“ wird die Verbindung gestartet. Auch das dauertwiedereinigeSekunden. Wenn alles geklappt hat, erscheint die App auf dem Smartphone und kann genutztwerden. Veränderungen an der App in der Entwicklungsumgebung werden ohneweiteresZutunsofortaufdasSmartphoneübertragen.

2.4Installationsvariante2:Windows-PCundeinAndroid-Smartphone(VerbindungüberUSB)

MancheWLANshabenausSicherheitsgründenBeschränkungenbeiderDatenübertragung.Deshalbkannespassieren,dassdieVerbindungüberdasWLANnichtmöglichist.IndiesemFallkanndieVerbindungzumSmartphoneauchübereinUSB-Kabelangeschlossenwerden.Das Einrichten einer USB-Verbindung kann etwas schwierig sein, weil auf Windows-Rechnern, spezielle Treiber-Software benötigt wird, um eine Verbindung zu Android-Gerätenherzustellen.DasistbeiMacoderLinuxnichtnötig.AbhängigvomHerstellerdeinesSmartphoneswirdeinbestimmterTreiberbenötigt.DeshalbmusstduimWebselbstnachdempassendenTreiberfürdeinSmartphonesuchen.App Inventor stellt ein Testprogramm zur Verfügung, das prüft, ob Ihr USB-verbundenesGerätmitdemComputerkommunizierenkann.DusolltestdiesenTestausführen,bevordumitderProgrammierungunterAppInventor2beginnst.

Abbildung 8: Verbindung über WLAN mit Textcode

Abbildung 7: Verbindung herstellen

10

Schrittfolge:1. FürdieInstallationderWindows-SoftwaremusstduüberAdministratorrechteverfügen.2. LadedasInstallationsprogrammfürdenPCherunter(Link)3. ÖffnedieDateiMIT_Appinventor_Tools_2.3.0.exe(~80MB)imDownload-Ordneroder

aufdeinemDesktop.DerStandortdesDownloadsaufIhremComputerhängtdavonab,wiederBrowserkonfiguriertist.

4. Klick dich durch die Schritte desInstallationsprogramms.ÄnderedenInstallationsortnicht, sondern notiere dir das Installations-verzeichnis, da es vielleicht benötigt wird, um dieTreiber später zu überprüfen. Das VerzeichnisunterscheidetsichjenachderWindows-VersionundobdualsAdministratorangemeldetsindodernicht.

5. DukannstwährendderInstallationgefragtwerden,obdu ein Programm von einem unbekanntenHerstellerzulassenmöchten,umÄnderungenandiesemComputervorzunehmen.KlickeaufJa.

6. „MITAI2Companion“-AppausdemPlayStoreaufdemSmartphoneinstallieren.DenLinkbzw.denQR-CodezurAppfindestduaufSeite6dieserAnleitung.

7. Unterai2.appinventor.mit.edu/mitdemGoogle-Accountanmelden8. JetztmussdasProgramm„aiStarter“aufdemPCgestartetwerden.Eswurde

bei der Installation der MIT_Appinventor_Tools_2.3.0 mitinstalliert. EineVerknüpfung befindet sich normalerweise nach der Installation auf demDesktop deines PC’s. Wenn aiStarter erfolgreich gestartet wurde, ist dasfolgendeFensterderEingabeaufforderung(Konsole)zusehen:

Abbildung 11: Konsolenausgabe beim Start von "aiStarter"

9. Jetzt muss das Smartphone für die Verbindung per USB freigeschaltet werden (USB-Debugging). Auf Smartphones mit Android 4.0 findet man die Einstellung unterEinstellungenàEntwickleroptionen.Hinweis: Ab der Android-Version 4.2 werden die Entwickleroptionen ausSicherheitsgründenstandardmäßigausgeblendet.Umsieverfügbarzumachen,gehezuEinstellungenà Über das Telefon. Tippe siebenmal auf den Menüpunkt „Über dasTelefon“.DannerscheinteineMeldung,dassdieEntwickleroptionenfreigeschaltetsind.KehrenunzumvorherigenBildschirmzurück,umEntwickleroptionenzufindenundtippedarauf.ImfolgendenUntermenükannstDubei"USBDebugging"einenHakensetztenundsodieFunktionfreischalten.

Abbildung 9: Sicherheitsabfrage von Windows

Abbildung 10

11

Eine ausführlich bebilderte Anleitung am Beispiel der Android-Version 5.1 zurFreischaltungdesUSB-Debugging findestDuunterhttps://mobilsicher.de/schritt-fuer-schritt/usb-debugging-aktivieren

10. JetztkannstdudeinAndroid-SmartphonemitdeinemWindows-PCüberdasUSB-Kabelverbinden.Esistmöglich,dassdabeinacheinerAuthentifizierunggefragtwird.Vergewissere dich, dass das Smartphone als "Massenspeichergerät" (nicht"Mediengerät") verbunden ist und dass es nicht als Laufwerk mit deinem Computerverbundenwurde. Fallsdasdochder Fall ist,musstDies kannbedeuten,dassdualleLaufwerke am PC unter „Computer“ oder im Explorer trennen musst, die bei derInstallationdesAndroid-Smartphonesinstalliertwurden.Hinweis:AufAndroid4.2.2undneuer,erscheintnachderVerbindungmitdemUSB-KabeleinBildschirmmitderNachricht„USB-Debuggingzulassen?“BeimerstenMal,wenndudasSmartphonemitdeinemComputerverbindest,drücke„OK".DiesauthentifiziertdenComputerfürdasSmartphone.DanachkannderComputermitihmkommunizieren.

11. Teste zumAbschluss die Verbindung.Gehen dazu zu dieser Verbindungstestseite (sieöffnetsichineinerneuenRegisterkarteimBrowser)undprüfe,obDueineBestätigungerhältst,dassDeinComputerdasSmartphoneerkannthat.DukannstApp Inventor2nichtmitdemUSB-Kabelverwenden,wenndieVerbindungnichthergestelltwerdenkonnte.

Abbildung 12: Online-Testseite für die USB-Verbindung unter http://appinventor.mit.edu/test/

2.5Installationsvariante3:Windows-PCunddenEmulatornutzen

VoraussetzungfürdieNutzungdesEmulators isteinerelativeguteHardware-AusstattungdesComputers.Computer,dienichtälterals3Jahresind,solltensicheigenen.BeiNotebookshängtesvonderProzessorarchitekturundderGrößedesArbeitsspeichersab,obflüssigmitdem Emulator gearbeitet werden kann. Ist die Hardware zu alt, arbeitet der Emulatorquälendlangsam.BiszumPunkt8entsprichtdieAnleitunggenaudervorherigenSchrittfolge„Windows-PCundAndroid-Smartphone(VerbindungüberUSB)“Schrittfolge:

12

1. .........

8. ...

9. UnterWindowsmuss das Programm „aiStarter“ gestartet werden. Es öffnet sich einEingabeaufforderung-Fenster.Wichtig:WennaiStarterneugestartetwerdensoll,mussim Eingabeaufforderung-Fenster von aiStarter [Strg] + [C] gedrückt werden um denaiStarter zu beenden. Das Schließen des Fensters genügt nicht. Dann kannman denaiStartererneutaufrufen.

10. JetztkannstduimBrowserinderAppInventor2-EntwicklungsumgebungunsererstesApp-Projekt„beispiel.aia“öffnen,fallsdasnochnichtgeschehenist.

11. KlickeaufdasConnect-MenüunddannaufdieEmulator-Option.

Abbildung 13: Emulator starten

EserscheinteineMitteilung,dassderEmulatorverbunden(gestartet)wird.DasStartendesEmulatorskanneinpaarMinutendauern.DukannstanhandderUpdate-Bildschirmenachverfolgen,wiederEmulatorstartet:

Abbildung 14: Etappen des Emulator-Starts

Nach dem Start des Emulators (Bild #2 in Abbildung 14) startet auf dem emuliertenAndroid-Smartphone das Programm „MIT App Inventor 2 Companion“ Bild #3 inAbbildung 14). Wenn das Programm dich dazu auffordert, eine Aktualisierungdurchzuführen, muss diese ausgeführt werden. Beachte die Hinweise auf demBildschirm,vorallemdenHinweis,denButton„Done“zudrücken,wenndiesererscheint.

SieheSchrittfolge„Windows-PCundAndroid-Smartphone(verbundenüberUSB)

13

3EinBlickhinterdieKulissen:diewichtigstenElementederEntwicklungsumgebung

DerDesign-Editor:

Abbildung 15: Die Entwicklungsumgebung besteht in der Designer-Ansicht aus sechs Bereichen

Bereich1: DieMenüleisteenthältdieMenübefehlezurNutzungdesMITAppInventor

Bereich2: TitelleistedesProjekteszumAnzeigenderApp-BildschirmeundzuUmschaltenzwischenderDesigner-AnsichtunddesBlock-Editors

Bereich3: PalettemitallenObjekten,dieineinerAppverwendetwerdenkönnen

Bereich4: ImViewerwirddieOberflächederAppdurchdieAnordnungderverwendetenObjekteausdemBereich3gestaltet.

Bereich5: ComponentszeigtalleinderAppvorhandenenObjekte.DurchEinrückenwirdverdeutlicht,welcheObjekteanderenObjektenuntergeordnetsind.ImBereichMediawerdendieverwendetenBild-,Audio-und/oderVideodateienangezeigt.

Bereich6: IndenProperties könnendieEigenschaftenderObjekte zurEntwicklungszeitfestgelegtwerden.1

1 EineÄnderungdieserEigenschaftenkannauchzurLaufzeitderApp(nachdemsieaufdemSmartphonegestartetwurde)vorgenommenwerden.

14

DerBlock-Editor:

Abbildung 16: Die Entwicklungsumgebung besteht im Block-Editor aus fünf Bereichen

Bereich1: DieMenüleisteenthältdieMenübefehlezurNutzungdesMITAppInventor

Bereich2: Titelleiste des Projektes zum Anzeigen Code-Blöcke der einzelnen App-BildschirmeundzuUmschaltenzwischenderDesigner-AnsichtunddesBlock-Editors

Bereich3: Blocks enthält alle Struktur- und Sprachelemente, die zur Entwicklung desProgrammsverwendetwerdenkönnen.WennmanaufeinObjektklickt,wirdeinBereicheingeblendet,deralleverfügbareMethodenundWertzuweisungen,diefürdasangeklickteObjektverfügbarsind.

Bereich4: MediazeigtdieinderAppverwendetenBild-,Audio-undVideodateien.ÜberdieSchaltfläche„UploadFile...“könnenDateienhinzugefügtwerden.

Bereich5: ImViewerwerden die Programmstrukturen undAnweisungen angezeigt, dieausgeführtwerden sollen, wenn die App gestartetwird. Im Viewerwird der„Programmcode“derAppentwickeltundverbessert.

WirwerdenunswährendderProgrammierungunsererAppsnähermitdenElementenderEntwicklungsumgebungbeschäftigen.DabeiwerdenwirunsnurdieBereicheansehen,diewirauchtatsächlichbrauchen.Begründung:DieserKurssolldichnichtzumAppInvendor2-Spazialistenmachen,sondernamBeispielvonAppInventor2dieGrundlagenderProgrammierungvermitteln.NatürlichkannstdudichnachAbschlussdesKursesweitermitAppInventor2beschäftigenundeigeneAppsprogrammierenunddiesevielleichtsogarindenPlayStoreeinstellen.

15

4BenutzenderEntwicklungsumgebung:dieerstenÄnderungenanderBeispiel-App

4.1ÄnderungenanderApp-Oberfläche

SchauenwirunsdieEntwicklungsumgebungnunetwasgenaueran.ImViewerwirdunsdieApp-Oberfläche angezeigt. Unter Components sehen wir alle Objekte, die unsere Appenthält.WennmanaufeinObjektklickt,wirddasObjektimViewerrotmarkiert(umrandet).In der Abbildung 17 wurde das Objekt „Screen1“ angeklickt. Screen1 ist der gesamteBildschirmderbeispiel-App.EntsprechendistdiegesamteApp-Oberflächeroteingerahmt.DasGanzefunktioniertauchandersherum:dukannstimVieweraufeinObjektklickenunddasObjektwirdunterComponentsmarkiert.

Abbildung 17: Zusammenhänge auf der Entwicklungsumgebung

Aufgabe: Klicke auf die anderen Objekte unter Componets und beobachte im Viewer,welchesObjektjeweilseingerahmtwird.ProbiereauchdenumgekehrtenWeg,alsodasAnklickendesObjektesimViewer.

Vielleicht istdir aufgefallen,dass sichbeiKlickenaufeinanderesObjektder InhaltunterProperties verändert wird. Properties zeigt die Eigenschaften des jeweils angeklicktenObjektes an. Wird ein neues Objekt angeklickt, werden auch die Eigenschaften diesesObjektesneuangezeigt.Wirwollendiebeispiel-Appnunan2Stellenändern.InderTitelzeiledesScreen1sollabjetzt„MeineBeispiel-App“stehenundstatt„Hallo“sollimLabel1derText„GutenTag“stehen.

16

Schrittfolge:1. KlickeunterComponentsaufdasObjektScreen12. KlickeimBereichPropertiesindieEingabezeileunterderEigenschaftTitle3. Lösche„Beispiel-App“undgebedafür„MeineBeispiel-App“ein.4. KlickeunterComponentsaufdasObjektLabel25. KlickeimBereichPropertiesindieEingabezeileunterderEigenschaftText6. Lösche„Hallo“undgebedafür„GutenTagein“ein.7. Klicke einmal außerhalb der Text-Eingabezeile und die Änderung wird in den Viewer

übernommen.

Abbildung 18: Textinhalt des Objektes "Label2" ändern

DieÄnderungenmüsstenauchaufdemSmartphoneerscheinen.Wenndasgeklappthat,hastdudenerstenSchrittderApp-Programmierungerfolgreichabgeschlossen.4.2ÄnderungenamProgrammcodeimBlock-Editor

ImnächstenSchrittwollenwirunsdenBlock-Editoretwasgenaueransehen.HierstehtdaseigentlicheProgramm,alsodaswiedieAppreagierensoll,wennz.B.aufeineSchaltflächegetipptwird.Um in den Block-Editor zu wechselngenügt ein Klick in der Titelleiste ganzrechtsaufdieSchaltfläche„Blocks“.Eserscheint der grafisch gestalteteProgrammcode.Wasdortzusehenist,lässtsichwiefolgtlesen:WenndieSchaltfläche„Button1“aufdenSmartphoneangetipptwird,stelledieFarbefürdenTextimObjekt„Label3“aufschwarzein(BeimProgrammstartistdieTextfarbeaufLightGrayeingestellt.)AußerdemwirdderText,derimObjekt„TextBox1“eingetipptwurde,imObjekt„Label3“alsneuerTextangezeigt.DieÜberprüfung,obdieSchaltfläche„Button1“gedrücktwurde,wirdautomatischständigwiederholt,solangedieAppaufdemSmartphoneverwendetwird.

Abbildung 19: Programm der Beispiel-App

17

Wir wollen nun den Text im Objekt „Label1“ auf dieFarberotändernunddenTextausdemLabel1auchimLabel3erscheinenlassen.DazumüssenwirnuraufdieentsprechendenParameterimBlock-Editorklicken.DieAbbildung zeigt eine Zusammenfassung der Auswahldes Labels und der Farbe. Im Editor werden die Pull-down-Menüsnichtgleichzeitigangezeigt.UmdenText„BBS II Leer“ausdemObjekt„Label1“ in„Label3“ zubekommen,mussdasPuzzleteil„TextBox1.Text“perDrag&DropindenMülleimergezogenwerden.

Abbildung 21: Änderung des Programms im Block-Editor

Danach muss das Puzzleteil„Label1.Text“ an das Puzzleteil „set-Label3.Text-to“ angesetzt werden.Manklicktdafür imBereich„Blocks“aufdasObjekt„Label1“.Dannöffnetsich rechts daneben ein Bereich indem alle Methoden undAnweisungen, die für dieses Objektverwendetwerdenkönnen.DawirdenText aus dem Objekt „Label1“ benötigen, ziehen wir das Puzzleteil „Label1.Text“ an diefreigewordenePuzzlestelle.JetztkannmandasProgrammaufdemSmartphonetesten.Umsicherzugehen,dassdieaktuelle Version des Programms auf dem Smartphone vorhanden ist, kann man in derDesigner-Ansicht im Properties-Bereich für ein beliebiges ObjektdieEigenschaft„Visible“deaktivierenundwiederaktivieren.Mansieht dann auf dem Smartphone, dass die App aktualisiert wird.Wichtigist,dieEigenschaftVisiblewiederanzuhaken.

Abbildung 20: Textfarbe ändern

Abbildung 22: Auswahl einer Wertzuweisung für das Objekt "Label1" und die Eigenschaft "Text"

Abbildung 23: Sichtbarkeit deaktivieren und wieder aktivieren

18

DieAppsolltedannsoreagieren: Aufgabe: ÄnderedanachdenCodeblockwiederindieAusgangsversionzurück.

5DieersteeigeneAppWirhabenjetztdienötigenErfahrungenumendlicheineersteeigeneAppzuerstellen.EssolleinminimalistischerTaschenrechnerentwickeltwerden,dernurzweiZahlenaddierenkann.DieseAppenthältaberbereitsdiegrundlegendenBestandteile,diemanpraktischinjedemComputerprogrammfindet:EingabeàVerarbeitungàAusgabe.DieEingabeunddieAusgabehabenwirinderersten„beispiel“-Appbereitskennengelernt.Wir konnten einen Text in die TextBox1 eingeben, die nach dem Tippen auf den Button„Begrüßungaufrufen“imObjektLabel3wiederausgegebenwurde.DerTextwurdejedochdabeinichtverändert,eineVerarbeitungderDatenfehltealso.Das ist bei einem Taschenrechner anders: zwei Zahlen werden durch den Operator„addieren“zueinerneuenZahlverknüpft.EinneuerWertentsteht,dervorhernochnichtdawar.DieEingabewertewerdenzueinemneuenErgebniswertverarbeitet.5.1GestaltungderApp-Oberfläche

Die Oberfläche, die später auch der Benutzer sieht und verwendet, muss zuerst erstelltwerden.MitdemMITAppInventor2istdassehreinfach,dadieObjekteeinfachnuraufdemApp-Screenpositioniertwerdenmüssen. ZurErstellungdieserAppgibteszweiYouTube-Videos.DerersteTeilistunterhttps://youtu.be/CqYlJgt1xtUabrufbar.IndererstenEntwicklungsstufesollunserTaschenrechneraussehen,wieinAbbildung24zusehen.DiesenerstenEntwurfderBenutzeroberflächekannmanz.B.mitBleistiftundPapiererledigen.

NachKlickaufButton

19

Wenn klar ist, wie die Oberfläche aussehen soll, muss manüberlegen, welche Objekte benötigt werden, um dieseOberfläche zu realisieren. In unserem Beispiel sind esmindestens8Objekte:

• derApp-Screen(wirdautomatischerzeugt)• 3Label-Objekte(für„1.Zahl“,„2.Zahl“und„Ergebnis“)• 3TextBox-Objekte(fürdieEingabederbeidenZahlenund

dieAusgabedesErgebnisses)• einButton-ObjektfürdieSchaltfläche„Zahlenaddieren“

Die Objekte werden standardmäßig untereinander im App-Screenangeordnet.InunseremEntwurfsollenaberjeweilseinLabel- und ein TextBox-Objekt nebeneinander angeordnetwerden.DazufügenwirandenentsprechendenStellenausdemBereichPaletteà Layout das Layout „HorizontalArrangemet“ausundziehenesperDrag&DropaufdenScreen1imBereichViewer.Abbildung25 zeigt aufnächsteSeitedenScreen1 nachdemzweiHorizontalArrangementshinzugefügt wurden. Außerdemwurde für den Screen1 unter Properties die Eigenschaft„Title“geändert.Dortwurde„EinfacherTaschenrechner“eingegeben,damitderTitelinderTitelzeilederApperscheint.

Abbildung 25: Hinzufügen von zwei Objekten "HorizontalArrangement" damit darin Objekte nebeneinander angeordnet werden können

Dann werden die Label-Objekte für die 1. und die 2. Zahl in die beiden „HorizontalArrangement“-ObjekteperDrag&Dropgezogenunddortabgelegt.

Abbildung 26: Objekte horizontal anordnen - Schritt 1

Abbildung 24: geplante App-Oberfläche

20

ImnächstenSchrittwerdenbeidenTextBox-Objektefürdie1.und2.ZahlrechtsnebendenLabel-Objekten platziert. Dazu muss man den Mauszeiger am rechten Rand, aber nochinnerhalb des HorizontalArrangements positionieren und dann loslassen. Im BereichComponentskannmananhandderEinrückungenerkennen,welcheObjektevorhandensindundobsiedenHorizontalArrangementsrichtigzugeordnetsind.

Abbildung 27: Objekte horizontal anordnen - 2. Schritt

Jetzt wird der Button1 unter HorizontalArrangement2 angeordnet, danachHorizontaArrangement3unterdenButton1.NunfehlennurnochdieObjekte„Label3“und„Textbox3“,dieim„HorizontalArangement3“platziertwerden.

Abbildung 28: Platzierung der noch fehlenden Objekte

DamitistdieOberflächeersteinmalgrundsätzlichfertig.ZwarhabenwirnochdieStandard-BeschriftungenaufdenLabelsunddemButton,aberdaskönnenwirspäteranpassen.Jetztwollenwirersteinmaldafürsorgen,dassunserTaschenrechnerauchrechnenkann.

21

NatürlichkannmandieAppschonaufdasSmartphoneoderdenEditorübertragen.MankanndannauchschonZahleneingebenundaufdenButtontippen.AllerdingsreagiertdieAppdaraufnicht.DasmüssenwirderApperstnochbeibringen.DazumüssenimBlock-Editorfestlegen,wasgeschehensoll,wennderButton1angetipptwird.5.2ErstellungdesProgrammcodes

Zur Erinnerung: Jedes Programm, also auch eine Smartphone-App arbeitet nach demGrundprinzipEingabeàVerarbeitungàAusgabe. InunsererTaschenrechner-App istdieEingabe imPrinzipfertig„programmiert.DennwirhabenmitdenObjektenTextBox1undTextBox2 dieMöglichkeit geschaffen, dass der App-Benutzer dort seine Zahlen eingebenkann.NunmüssendiebeidenZahlenwerteaddiertwerdenundzwargenaudann,wennderBenutzer denButton1 betätigt. Dieses Ereignismüssenwir im Block-Editor abfragen unddanndafürsorgen,dassdieSummeinderTextBox3angezeigtwird.

NachdemUmschaltenindenBlock-Editorsehenwireinleeres Viewer-Fenster und im Fenster Blocks unsereObjekte.Dawir ein Ereignis für denButton1 auswertenwollen (obdieSchaltflächeangetipptwurde)klickenwirimBlocks-FensteraufButton1.Dannwerdenuns rechtsdaneben alle Ereignisse angezeigt, die wir für Button1erkennen und auswerten können. Die Symbole für dieEreignissebeginnenimmermit„when“(dt.wenn,sobald).DawirdieSummeberechnenwollen,wennderBenutzerdieSchaltflächeButton1angetippt/angeklickthat,wählenwirdenBlock„whenButton1.Clickdo“(sieheAbb.29)undziehenihnaufdasleereViewer-Fenster.

JetztmüssenwirderAppnochmitteilen,wassietunsoll,wennButton1angetippt/angeklicktwurde. Diese Anweisungen werden in die freie Lücke „when Button1.Click do“-Blocksgezogen. Wirkommen hiermit einerAnweisungaus:DerTextinder Textbox3sollsichausderSumme derTexte ausTextBox1 undTextbox2ergeben. DerBegriff „Text“erscheint hier

Abbildung 29: Ereignis für Button1 wählen

Abbildung 30: Zusammensetzung der Anweisung für Button1

22

etwas verwirrend, da wir ja Zahlen und keinen Text addieren. Um dieses Thema derDatentypenundTypumwandlungkümmernwirunsspäter.AndieserStellegenügtes, zuwissen,dassdieAppautomatischerkennt,obZahleneingegebenwurden.IstdasderFall,könnenSieaddiertwerden.Wennnicht,erscheinteineFehlermeldung. Abbildung30aufdervorherigenSeitezeigt,unterwelchenObjektendieeinzelnenBausteinefürdieAnweisungzufindensind.Aufgaben:1.SetzedieAnweisungfürButton1wieinAbbildung30vorgegebeninden„when

Button1.Clickdo“-Blockein.WenndudabeiSchwierigkeitenhast,schauedirdasYouTube-Videounterhttps://youtu.be/CqYlJgt1xtUan.

2.TestedieAppaufdeinemSmartphonebzw.imEmulator.5.3VerbesserungderAppJetztsolldieBenutzeroberflächederAppverbessertwerden.Die Angaben „Text for Label1, -2 und -3“ sowie „Text forButton1“sindjanichtsehraussagekräftig.WohersollderApp-Nutzerwissen,waserdorteintippensoll.Deshalbmüssenwiruns jetzt etwas ausführlicher mit den Eigenschaften(Properties)derObjektebeschäftigen.

EinKlickaufdasObjekt„Label1“öffnetdieEigenschaftendesObjektes rechtsdaneben imProperties-Fenster.Dort findenwiretwasweiteruntendieEigenschaftText.DenInhaltinderEingabezeile darunter ersetzen wir durch 1. Zahl (sieheAbbildung31).DasGleicheführenwirfürdieObjekteLabel2undLabel3durch.

Auch fürdieÄnderungderBeschriftungdesButton1 gibteseine Eigenschaft Text. Entsprechend wird die ÄnderunggenausovorgenommenwiebeidenLabel-Objektenzuvor.

DieVerbesserungderApp-Oberflächewirdausführlichinim2.YouTube-Video zur Taschenrechner-App (Link: https://youtu.be/zYMx5pfz7T8)demonstriert.

Aufgaben: 1. Ergänze die Oberfläche um drei Schaltflächen (Buttons). Sie sollen dieBeschriftungen „subtrahieren“, „multiplizieren“ und „dividieren“bekommen.

2. Ergänze im Block-Editor die Auswertung der Ereignisse, wenn die neuenButtons gedrückt werden. Entsprechend sollen die 1. Und 2. Zahlsubtrahiert,multipliziertbzw.dividiertwerden.

Abbildung 31: Text-Eigenschaft des Objektes Label ändern

23

Tipp: Die Lösung der Aufgaben wird am Ende des 2. Teils des YouTube-Videos zurTaschenrechner-Appgezeigt(https://youtu.be/zYMx5pfz7T8).

6DieBedeutungvonOperatorenundVariablenJeder weiß, dass ein einfacher Taschenrechner in Wirklichkeit andersaussieht,alsderdenwirgeradeprogrammierthaben.EinTaschenrechnerhateineAnzeige,Zifferntaste,TastenfürdiemathematischenOperationenundeineErgebnistaste.

Wir wollen nun einen neuen Taschenrechnerprogrammieren,deramEndeauchmiteinerAnzeigeauskommt und der die Tasten für die Operationenaddieren,subtrahieren,multiplizierenunddividierenenthält.Aufgabe: Lege ein neues Projekt mit dem Namen

„Taschenrechner_2“ an und erstelle dieOberflächederAppimDesignervonAppInventor2.

Tipp: Das YouTube-Video „Taschenrechner - Teil 3“ (Link:https://youtu.be/nwwqlB3RMWU) zeigt, wie dieOberflächeerstelltwirdunddieAdditionunterVerwendungvonVariablenrealisiertwerdenkann.

Stellen wir uns am Beispiel der Berechnung „14 + 5 = 19“ kurz vor, wie ein richtigerTaschenrechnerfunktioniertundimVergleichdazu,wiewiresinder2.Taschenrechner-Apprealisierenwollen.Schritt RichtigerTaschenrechner Taschenrechner2-App

1 Eingabeder14überdieZifferntastatur

Eingabe der 14 über dieeingeblendeteBildschirm-Tastatur

2 DrückenderPlus-Taste.Die14stehtnochinderAnzeige

TippenaufPlus-Button.Die14solltedabei bereits aus der Eingabeboxgelöschtwerden.

3 Eingabeder5.Die14 istnichtmehr in der Anzeige sichtbar,nurdie5.

Eingabe der 5 über dieeingeblendeteBildschirm-Tastatur.

4 DrückenderErgebnis-Taste(=).Die 14 verschwindet, dieSumme19wirdangezeigt.

DrückendesBerechnen-Buttons.DieSumme soll berechnet und in derAusgabe-Boxangezeigtwerden.

Abbildung 32: Benutzeroberfläche eines Taschenrechners

Abbildung 33: So soll unser neuer Taschenrechner am Ende aussehen.

24

SowohlimrichtigenTaschenrechneralsauchinunsererAppistdieserVerlaufnichtmöglich,wennnichtwenigstensdieersteZahlzwischengespeichertwird.DennwirkönnendieWerteder beiden Zahlennicht aus zwei Eingabe-Boxenentnehmen,wie noch in unserer erstenTaschenrechner-App.AndieserStellehelfenunsVariablen.VariablenkönneninnerhalbvonProgrammenWertespeichern, so dass diese später über den Variablennamen abgerufen werden können.VariablenmüssenindenmeistenProgrammiersprachendemComputer(beiunsistesdasSmartphone bzw. der Emulator) bekannt gemacht werden. Man nennt diesen Vorgang„deklarieren der Variablen“. Wenn die Variable nach der Deklarierung auch einenWertzugewiesen bekommt, nenntman diesen Vorganginitialisieren. ImAppInventor2erfolgt die Deklaration und dieInitialisierung einer Variable ineinemSchritt.FürunserBeispielbenötigenwirzweiVariablenfürdie erste und die zweite Zahl.WenndieVariableeinenneuenWert erhalten soll, verwendetman die SET-Methode. ZumAbrufen des Variablenwertesverwendet man die GET-Methode. Abbildung 34 zeigt den Programmcode für denTaschenrechner2indererstenAusbaustufe.Dasheißt,eskannnuraddiertwerdenunddieAusgabeerfolgtnochineinerzusätzlichenErgebnis-TextBox.2.Ausbaustufe:Im zweiten Schritt sollen die weiterenOperationen Subtrahieren, Multiplizieren undDividieren mit den entsprechendenSchaltflächen (Button 3, 4 und 5) verknüpftwerden. Schauenwir uns dazu imBlock-EditorimBereichBlocksàBuilt-inàMathan,welcheOperatoren noch zur Verfügung stehen. Duerkennst schnell, dass die benötigtenmathematischen Operatoren zur Verfügungstehenunddassesdanebennochvieleanderegibt.Überlegen wir jetzt noch einmal, wie die AppvomBenutzerverwendetwird:a) DerBenutzergibtdieersteZahlein.

Abbildung 34: Programmcode für den Taschenrechner 2 - erste Stufe

Abbildung 35: Mathematische Operatoren

25

b) MitdemKlick aufdie „Plus-Taste“wirdderWert inder EingabezeileTextBox1 inderVariablen„zahl1“gespeichert.

c) DerBenutzergibtdiezweiteZahlein.d) DerBenutzertipptaufdieSchaltfläche„Berechne“(Button1).e) DieVariablezahl2erhältdenWertausTextBox1.Jetztwerdenzahl1undzahl2addiert

undinTextBox2ausgegeben.So weit so gut. Wenn wir aber vier verschiedene Operationen haben, können wir dieOperation nicht einfach so mit dem „Berechne“-Button ausführen. Wir müssen dieOperation,diegewähltwurde,speichern.DazubrauchenwireineweitereVariable,diewirOperatornennenundderwirzunächstdenWert0geben.Jenachdem,welcherOperations-ButtonvomAnwenderangetipptwird,erhältdieVariable„operator“einenanderenWertzwischen1und4.Die1fürAddition,die1,fürdieSubtraktiondie2,fürdieMultiplikationdie3undfürdieDivisiondie4.

Abbildung 36: Speichrung der gewählten Rechenoperationin der Variable "operator"

WennjetztderButton1„Berechne“angetipptwird,weißdieAppdurchAbfragederVariabel„operator“welcheRechenoperationderBenutzernutzenmöchte.Wennoperator =1 ist,dannwirdaddiert,wennoperator=2ist,wirdsubtrahiertundsoweiter.MannenntdieseProgrammierstrukturFallunterscheidungoderauchVerzweigung.WirwerdenunsdiesenStrukturennochausführlichwidmen.

26

Abbildung 37: Fallunterscheidung mit IF-THEN, welche Rechenoperation auszuführen ist

Aufgabe: ErgänzedieApp,indemdudieSchaltflächenButton3,Button4undButton5

mitdenOperationenAddieren,MultiplizierenundDividierenverknüpfst.

Tipp: Die komplette Lösung der Aufgabe findest Du im Youtube-Video„Taschenrechner–Teil4“(Link: https://youtu.be/wR_ZnPUcjas).

Zusatzaufgabe1: VeränderedieAppso,dasswiebeieinemrichtigenTaschenrechnernur

eineDisplay-ZeilefürdieEin-undAusgabevorhandenist.

Tipp: Die Lösung der Zusatzaufgabe findest Du im Ergänzungs-Video„Taschenrechner-Ergänzung“(Link:https://youtu.be/-dGrNv3b0yI)

Zusatzaufgabe2: Verändere die App so, dass Reihenberechnungen in der Art

5+4-3+7*2=vorgenommenwerdenkönnen.DabeisolldasjeweiligeZwischenergebnis angezeigt werden, sobald die nächste Operatortastegedrücktwurde.

27

7Fallunterscheidungen/Verzweigungen 7.1Projekt„Ratespiel“UnsernächstesProjektistdieProgrammierungeineskleinenRatespiels.NachdemStartderAppwähltdieseeinezufälligeZahlzwischen1und32.AufgabedesSpielersistes,dieZahlmitmöglichstwenigenVersuchenzuerraten.DieAppgibtnachEingabeeinerZahleinenHinweis, ob die eingegebeneZahl zu groß oder zu klein ist.DurcheineklugeWahlderderZahlen, kann der Spieler dieZahlmitmaximal 5Versuchenerraten.Dazunutztmaneinesder wichtigsten Prinzipe füreffektivesProblemlösen inderInformatik.DieStrategienenntsich„teileundherrsche“undistschon sehr alt. Wer mehrdarüber wissenmöchte, solltesich im Internet dazuinformieren.In der Endversion derRatespiel-App soll die Anzahlder Versuche deshalb aufmaximal 5 begrenzt werden.Die Oberfläche und die dafürverwendetenObjektezeigtdieAbbildung38.Aufgabe: Erstelle ein neues Projekt „Ratespiel“ im MIT AppInventor2 und gestalte die

OberflächeentsprechendderAbbildung.

Tipp: DieLösungderAufgabe findestDu imYouTube-Video„Ratespiel–Teil1“ (Link: https://youtu.be/8AMLDciAFTg).

Überlegenwirunsnun,wasindasProgrammgeschriebenwerdenmussdamitdieAppwieobenbeschriebenfunktioniert.AlseineArt„to-do-Liste“notierenwiruns,was inwelcherReihenfolgeprogrammiertwerdenmuss.Dazu schreibenwir unsdenProgrammablauf inStichpunktenauf.DenAblauffindestduaufdernächstenSeite.

Abbildung 38: Oberfläche der Ratespiel-App

28

Programmablauf:1. BestimmungeinerzufälligenZahlzwischen1und322. Für die Testphase sollte die zufällig ermittelte Zahl in der Textbox1 ausgegeben

werden.(DieseFunktionwirdspäterwiederentfernt.)3. WennderButton1„Tippabgeben“gedrücktwurde,sollfolgendesausgeführtwerden:

a. WenndieinTextbox1eingegebeneZahlgrößeristalsdievonderApperzeugtezufälligeZahl,wirinLabel3derText„DeineZahlistzugroß“ausgegeben.AußerdemwirddieAnzahlderbisherigenVersucheum1erhöhtundderWertinLabel5ausgegeben.

b. WenndieinTextbox1eingegebeneZahlkleineristalsdievonderApperzeugtezufälligeZahl,wirinLabel3derText„DeineZahlistzuklein“ausgegeben.AußerdemwirddieAnzahlderbisherigenVersucheum1erhöhtundderWertinLabel5ausgegeben.

c. WenndieinTextbox1eingegebeneZahldervonderApperzeugtenzufälligenZahlentspricht,wirinLabel3derText„DuhastdieZahlrichtiggeraten.“ausgegeben.AußerdemwirddieAnzahlderbisherigenVersucheum1erhöhtundderWertinLabel5ausgegeben.

4. Wenn der Button2 „Spiel neu starten“ gedrückt wurde, soll folgendes ausgeführtwerden:

a. BestimmungeinerneuenzufälligenZahlzwischen1und32b. FürdieTestphasesolltedieneueZahlinderTextbox1ausgegebenwerden.

(DieseFunktionwirdspäterwiederentfernt.)c. ZurücksetzenderAnzahlderVersucheauf0undAusgabedesWertesinLabel5.

In der Schrittfolge wurden in einem nächsten Schritt die notwendigen Variablen, diebenötigtenProgrammstrukturenunddieObjekte,diezurLaufzeitdesProgrammsbenötigtwerden,farbigmarkiert.DieserleichtertdieUmsetzungdesProgrammcodesimBlock-Editor.7.2UmsetzungdesProgrammablaufes

Manerkenntnunschnell,dassdreiVariablenbenötigtwerden.DieVariablen„eingegebeneZahl“und„AnzahlderbisherigenVersuche“könnenwirdurchAbfragederEigenschaft„Text“derObjekteTextbox1undLabel5ermittelnundggf.ändern.DieVariable„zufälligeZahl“wirdimHintergrund beim Start der App erzeugt und erscheint eigentlich nirgendwo. DeshalbmüssenwirdieseVariablebeimProgrammstartinitialisieren(Abb.siehenächsteSeite).

Abbildung 39: Initialisierung und Wertzuweisung für die Variable "zufallszahl"

UnterBuilt-inàMathgibteseineFunktion„randomintegerfrom...to...“.DieseFunktionnutzenwirumderVariablen„zufallszahl“einenWert Abbildung 40: Ausgabe der "zufallszahl" zu Prüfzwecken

29

zwischen1und32zufälligzuzuweisen.DieAnweisunginAbbildung39erzeugtdieVariable„zufallszahl“undweistihrdenzufälligenWertbeimStartderAppzu.DamitwirinderTestphasewissen,welcheZahlerzeugtwurde,gebenwirdenWertder„zufallszahl“inderTextbox1inderEigenschaft„Hint“(dt.„Hinweis“)aus.WirknüpfendieseAnweisungandieBedingung,dassderScreen1derAppinitialisiertwird.DasgeschiehthierunmittelbarnachdemStartderApp.InWortenbeschriebenbedeutetderAnweisungsblockinAbbildung40:„Wenn „Screen1“ erzeugt wird, mache folgendes: Setze (set) die Eigenschaft „Hint“ des Objektes Textbox1 auf den Wert, den man von der globalen Variablen „zufallszahl“ bekommt (get).“DamitsinddiePunkte1und2desProgrammablaufesbereitsrealisiert.WirspringenjetztzumPunkt4,dadiesermitunserenbisherigenKenntnissensehreinfachzurealisierenist.

Wir belegen zunächst denButton2 „Spiel neustarten“ mit einer Funktion, die eine neuezufällige Zahl erzeugt und wieder (zuTestzwecken)inTextbox1als„Hint“ausgibt.Esist also zu überprüfen, ob Button2 gedrücktwurde. Wenn ja, werden die Anweisungenausgeführt-wennnicht,passiertnichts.DieserProgrammablauf kann grafisch in einemProgrammablaufplan(PAP)dargestelltwerden.Programmablaufpläne dienen als Planungs-und Dokumentationswerkzeug bei derSoftwareentwicklung.

ManerkenntimPAP(Abbildung41),dasssichder Programmablauf verzweigt. Eine Bedingungsüberprüfung bedeutet auch immer eineVerzweigungimProgrammablauf.IstdieBedingungerfüllt,passiertetwasAnderesalswenndie Bedingung nicht erfüllt ist.Verzeigungen stellen eineelementare Struktur von Pro-grammen dar. Der entsprechendeBlock-Code ist in Abbildung 42dargestellt.

Aufgabe: Übernehme die drei Code-Blocke dieses Abschnittes in dein Projekt und testedanndieAppimEmulatoroderaufdeinemSmartphone.

Tipp: DieLösungderAufgabefindestDuimYouTube-Video„Ratespiel–Teil2“(Link: https://youtu.be/8AMLDciAFTg).

Abbildung 41: Programmablaufplan Verzweigung

Abbildung 42: neue Zufallszahl bestimmen, wenn Button2 gedrückt wird

30

7.3Verzweigungenmit„when–do“und„if–then“

EsfehltnochderPunkt3mitdenUnterpunktena.bisc.desProgrammablaufesvonSeite26.EslässtsichmitdenneuenErkenntnissenzuVerzweigungen,dassimPunkt3insgesamtvierVerzweigungen enthalten sind. Das Wort „wenn“ liefert die entscheidenden Hinweise.MachenwirunsnunandieRealisierung.

DieÜberprüfung,obderButton1„Tippabgeben“gedrücktwurde,kann im Block-Editor durch einen Klick unter „Built-in“ auf„Button1“ und die Auswahl der Bedingungsprüfung „whenButton1.Click do“ aufgerufen werden. In die offene Klammermüssen jetzt dieAnweisungena. bis c. eingefügtwerden.DieseAnweisungenbeinhaltenerneut„when“-Anweisungen.Allerdingswirddortnichtüberprüft,obeinButtongedrücktwurde, sondern ob die eingegebene Zahl größer, kleiner oder gleich derZufallszahlist.FürsolcheÜberprüfungengibtesdie„if–then“-Anweisung.ImPrinzip funktioniert siewiedie„when–do“-Anweisung,diewir fürdieAbfragevonButtonsbereitskennen.Dufindestden„if–then“-AnweisungunterBuilt-inàControl.

Hinter„if“mussdieBedingungangegebenwerden,inunseremFallistdaseinVergleich.DenVergleichfindestduunterBuilt-inàMath.IndieoffenenPuzzlelückendesVergleichessinddiebeidenWerte,dieverglichenwerdensolleneinzufügen.WirvergleichendieeingegebeneZahlinTextbox1mitderglobalenVariable„zufallszahl“.DieAnweisungistkomplett,wenndasRelationszeichenvon=auf>geändertwurde.

Abbildung 43: if-Anweisung für Button1 mit Vergleich

Jetztmussder„then“-Teilergänztwerden.Ergibtan,waspassierensoll,wenndieBedingunghinter„if“erfüllt/wahrist.WenndieeingegebeneZahlgrößerist,alsdieZufallszahl,solleinentsprechender Text inLabel3ausgegebenwerden.Wir wollen also dieEigenschaft Text desObjektes Label3 auf „DeineZahl ist zu groß“ setzten.Dazuverwendenwirdie„setLabel3.Text“-Anweisung.UmdenTextfestzulegen,wählenwirunterBuilt-inàTextdenBaustein„ATextString“.

JetztfehltnochdieErhöhungderAnzahlderVersucheinLabel5um1.DerTextinLabel5sollneu gesetzt werden. Wir benötigen also eine set-Anweisung („set Label5.Text to“). AlleBausteine zusammengefügt ergibt sich der Anweisungsblock 3a. des Programmablaufes(sieheAbbildung45aufdernächstenSeite).

Abbildung 44: then-Anweisung hinzugefügt

31

Abbildung 45: Anweisungsblock für den Fall "Zahl zu groß"

Aufgaben:Übernehme die drei Code-Blocke dieses Abschnittes in dein Projekt und testedanndieAppimEmulatoroderaufdeinemSmartphone.

Ergänzedie„if-then“-AnweisungenfürdieFälle„diegerateneZahl istzuklein“unddie„diegerateneZahlistrichtig“undtestedieAppimEmulatoroderaufdemSmartphone.

Tipp: DieLösungderAufgabefindestDuimYouTube-Video„Ratespiel–Teil2“(Link: https://youtu.be/osd4ldyC-jI).

7.4OptimierungderApp

Wer die App im derzeitigen Entwicklungsstand getestet hat, wird vielleicht festgestellthaben,dassbeimNeustartdiezuletztgetippteZahlnochinderTextbox1stehtunddieAnzahlder Versuche nicht auf „0“zurückgesetzt wird. Das kanndurch zwei zusätzliche „set“-Anweisungenkorrigiertwerden.DieAnweisungenmüssenindieBedingungsüberprüfung„whenButton2.Click do“ (Abbildung46).

ImnächstenSchrittsolldasSpielabgebrochenwerden,wenndieAnzahlderVersuchedieFünf übersteigt. Es soll eine entsprechendeMitteilung erscheinen und der Benutzer darfnichtmehrdieMöglichkeithaben,einenTippabzugeben.

ObdieAnzahlderVersuchegrößerals5ist,könnenwirwiedermitderschonbekannten„if–then“-Anweisungüberprüfen.Indenthen-ZweigschreibenwirdieAnweisungen.Zunächstwird in Label3 der Textausgegeben „Mehr als 5 Versuche – das Spiel ist zu Ende!“ Damit der Benutzerkeinen Tipp mehr abgebenkann, deaktivieren wir dieObjekteTextBox1undButton1.Das erreicht man, indem die Eigenschaft „Enabled“ (dt. aktiviert) für beide Objekte auf

Abbildung 46: Korrekturen zu Teil 2 (Abschnitt 7.3)

Abbildung 47: Spielabbruch bei mehr als 5 Versuchen

32

„False“gesetztwird.DerganzeBlock(Abbildung47)wirddannamunterenEndeinnerhalbdes „whenButton1.Clickdo“-Blocks hinter dem „ifTextBox1.Text =get global zufallszahlthen“-Blockeingefügt.

Abschließend muss beim Tippen auf denButton2 „Spiel neu starten“ die Blockadevon TextBox1 und Button1 wiederaufgehoben werden sowie im Label3 sollwieder Ergebnis stehen. Die Ergänzungenmüssen deshalb im Block „whenButton2.Click do“ vorgenommen werden(Abbildung48).DieBezeichnung„Neustartder App“ ist eigentlich nicht korrekt, denndieAppwirdnichtneugestartet,siewirdnursowiederhergestellt,wiesiesichnachdemStartenzeigte.

Aufgabe: ErgänzedeineAppentsprechenddenhiergezeigtenCodebeispielen.

Tipp: DieLösungderAufgabefindestDuimYouTube-Video„Ratespiel–Teil3“(Link:https://youtu.be/2Z0FjRspGig).

7.5LetzteVerbesserungen

Im letzten Teil zum Projekt „Ratespiel“ wird die App endgültig fertiggestellt. Als Erstesentfernen wir die Kontrollausgabe der Zufallszahl, die unter der Eigenschaft „Hint“ inTextBox1angezeigtwurde.Alle„setTextBox1.Hinttogetglobalzufallszahl“-AnweisungenkönnenindenPapierkorbverschobenwerden.Istdieset-AnweisungdieeinzigeAnweisungineinemBlock(z.B.in„whenScreen1.Initializedo“),wirddergesamteBlockgelöscht.

EineweitereVerbesserungderAppwäre,wennmannichtimmerdiezuvoreingetippteZahllöschen müsste, bevor man einen neuen Tipp abgeben kann. Es gibt grundsätzlich dieMöglichkeit,beimKlickaufButton1„Tippabgeben“dieZahl(denText)inderTextBox1zulöschen. Dann weiß der Benutzer aber vielleicht nicht mehr, welchen Tipp er zuletzteingegeben hat. Eine Lösung des Problems könnte durch eine Erweiterung der AusgabeLabel3 um zwei weitere Labels in einem gemeinsamen „HorizontalArrangement“-Layout.DannkönntenachdemPrinzipderAusgabe„Du hast schon ... Versuche gebraucht“daruntereineAusgabenachdemSchema„Deine Zahl ... ist zu groß“(bzw.„zu klein“oder„richtig“)

Aufgabe: VersuchedieBenutzerfreundlichkeitderAppzuverbessern,indembeimTippenauf den Butto1 „Tipp abgeben“ die Zahl in die Ausgabe „Deine Zahl ... ist ...“übernommenwirdunddanndieZahlinderTextBox1gelöschtwird.

Tipp: DieLösungderAufgabefindestDuimYouTube-Video„Ratespiel–Teil4“(Link:https://youtu.be/wePdMKfpDVA).

Abbildung 48: "Neustart" der App

33

8Wiederholungen Als 1979 das erste kommerzielleTabellenkalkulationsprogramm „Visicalc“(fürdenApple II-Computer)aufdenMarktkam, war die Begeisterung groß. DasProgramm konnte immer wiederkehrendeBerechnungenblitzschnellausführen.Wozusonst Tage benötigt wurden, konnte mannun in wenigen Minuten berechnen. DerGrunddafürwarendieComputer,aufdenen„Visicalc“lief.DenneineskönnenComputerbesonders gut: Wenn sie erst einmalprogrammiert sind, können sie diesesProgramm oder einen Programmteilbeliebig oft wiederholen, ohne dass ihnen„langweiligwird“unddiese„Routine“zuFehlernführt,wiedasbeimMenschenoftderFallist.Dazukommt,dassComputer inderRegelauchschnellerundgenauer rechnetalsderMensch.

In diesem Kapitel beschäftigen wir uns deshalb mit einer weiteren wichtigenProgrammstruktur: der Wiederholung. Die Wiederholung wird benötigt, um einComputerprogrammodereinenTeildavonmehrfachauszuführen.

8.1Projekt„Lottoziehung“

Vielleicht haben du oder deine Eltern schon einmal das inDeutschland am bekannteste Lotto „6 aus 49“ gespielt. AusmathematischerSichtistesnichtzuempfehlen,dadieChanceauf sechs richtige Zahlen nur 0,000.000.072 Prozent beträgt.Man sollte also nicht damit rechnen, auch tatsächlich zugewinnen, denn selbst der kleinste Gewinn (zwei Richtige +richtigeSuperzahl)hatnureineGewinnwahrscheinlichkeitvon0,0132Prozent.

WertrotzdemdemGlückeineChancegebenmöchte,solltedieZahlen, die er tippt auf jeden Fall zufällig wählen. DieAuswertung derGewinne seit Beginn der Ziehungen 1955hatergeben, dass Zahlenreihen auf dem Tippschein oft gewähltwerden und deshalb schlechte Quoten (Gewinnsummen)bedeuteten. Bei derWahl von sechs zufälligen Zahlen auf 49möglichenkannunseineselbstprogrammierteApphelfen.

BeginnenwirmitderPlanungderOberfläche.Abbildung50zeigteinmöglichesAussehen.Vielbenötigenwirnicht,wiemansieht.

Abbildung 49: "Visicalc"-Screenshot (Quelle: https://commons.wikimedia.org/wiki/File:Visicalc.png)

Abbildung 50: Benutzeroberfläche der Lotto-App

34

DaAppInventor2beiderGestaltungnichtsofreiinderGestaltungderOberflächeist,mussdieApp-OberflächemitetwasÜberlegungzusammengesetztwerden.DiebeidenZeilendesblauen Textes bestehen aus 2Objekten (Label1 und Label2). Der Abstand zwischen demblauenEinleitungstextunddemButton„Ziehungstarten“kannmanmiteinemLabel-Objekterzeugen,dasseinefesteHöhevon50PixelnundkeinenTextenthält(Abbildung51).

Abbildung 51: Gestaltung der Oberfläche - Erzeugen eines Abstandes mit einem "leeren" Objekt

Aufgabe: Lege ein neues Projektmit dem Namen „Lottozahlen“ im App Inventor 2 an.ErstelledieBenutzeroberflächeentsprechendderVorgabeinAbbildung50.

Tipp: DieLösungderAufgabefindestDuimYouTube-Video„Lottozahlen–Teil1“(Link:https://youtu.be/91d6d_Sf0oU).

8.2Programmcodezur„Lottozahlen“-App

FürdieerstesehreinfacheVersionder„Lottozahlen“-AppüberlegenwirunsdenfolgendenProgrammablauf:

1. DeklariereneinerglobalenVariable„zufallszahl“.2. WennderButton1„Ziehungstarten“gedrücktwird,wirdfolgendesausgeführt:

a. LöschedenInhalt(Eigenschaft„Text“)derTextBox1.b. Wiederhole6mal:

i. BestimmeeineZufallszahlzwischen1und49ii. Gebe in derTextbox1 das aus,was vorher darinstand und ergänze die

AusgabeumzweiLeerzeichenunddieneubestimmteZufallszahl.

35

NeuistderProgrammteilunter2b.DenBausteinfürdieWiederholungistunterBuilt-inàControlà„foreachnumberfrom...to...by...do“zufinden.DieBedeutungdereinzelnenParameterwirdinAbbildung52erläutert.

Abbildung 52: Wiederholungsblock "for each"

BeidieserFormderWiederholungwirddieAnzahlderWiederholungendurchdenStart-undden Endwert sowie die Schrittweite festgelegt. Im Beispiel der Abbildung 52 wird dieWiederholungfünfMalausgeführt.DieZählvariable„number“läufthiervon1über2,3,4bis5.WäredieSchrittweite(hinterby)2,würde„number“dieWerte1,3und5durchlaufenunddieWiederholungdeshalbnurdreiMalausgeführt.

Aufgabe: BestimmedieAnzahlderWiederholungenfürfolgende„foreach“-Parameter:

a) from 0to 11by 1 ergibt.......Wiederholungen

b) from 2to 9by 2 ergibt.......Wiederholungen

c) from 8to 22by 5 ergibt.......Wiederholungen

d) from 1to 15by 5 ergibt.......Wiederholungen

Abbildung 53: Der komplette Block-Code in der ersten Ausbaustufe

36

Aufgaben:1.ÜbernehmedenBlock-CodeindeinLottozahlen-ProjektundtestedieApp.

2. Erfüllt die App alle Anforderungen? Wenn nicht, welche Verbesserungs-vorschlägehastdu?

Tipp: DieLösungderAufgabe1mitErläuterungenzumBlock-CodefindestDuimYouTube-Video„Lottozahlen–Teil2“(Link:https://youtu.be/ttso-3fv33s).

8.3Verbesserungen

Wer die App ausführlich, d. h. mehrere Male getestet hat, dem müssten zwei Dingeaufgefallensein.UnsereApphateinen„Schönheitsfehler“undeinen„echten“Fehler,wasbedeutet,dassdieAppfehlerhaftarbeitet.DasProblemdabei,esfälltunterUmständennichtsofortauf.NureineausführlichePrüfungderAppzeigtdenFehler.

Der„Schönheitsfehler“istnichtsoproblematisch,daerebennurdieoptischeDarstellungbetrifft.Kritischistder„echte“Fehler.Ermussunbedingtbehobenwerden.HoffentlichhastdubeideFehlergefunden.

Fehler1:DieZahlenwerdennichtsortiert(vonkleinnachgroß)ausgegeben.DerGrundistklar. Die Zahlen werden ja zufällig gezogen und der Zufall richtet sich nicht nach derReihenfolge.DieZahlenmüsstenzurBehebungdieses„Schönheitsfehlers“vorderAusgabesortiertwerden.DadieFunktionalitätderAppdadurchnichtbeeinflusstwird,nennenwirdiesenFehler„kosmetisch“oder„Schönheitsfehler“.

Fehler2:BeiLottoistesso,dassjedeZahlnureinmalgezogenwerdenkann.Dasbeachtetunsere App jedoch nicht! In denmeisten Ziehungen wird keine Zahl mehrfach gezogen.DeshalbhabenEinige voneuchdiesenFehler vielleicht auchnicht erkannt.Man sieht andiesemBeispiel,dasseinausführlicherTestsehrwichtigist.SonstbestehtdieGefahr,dassmaneinefehlerhafteAppveröffentlicht.

WirwollenunszuerstumdenkritischenFehlerkümmern.WasmussimProgrammverändertwerden?DazudenkenwirnocheinmalandenProgrammablauf.Eswerdennacheinandersechs Zahlen gezogen und ohne weitere Überprüfung in der TextBox1 hintereinanderausgegeben.Daskannsonichtbleiben.Aberwasistzutun?

InunsereraktuellenApphabenwirgarkeinendirektenZugriffaufallegezogenenZahlen.Denn die alte „global zufallszahl“ wird bei der nächsten Bestimmung mit der Methode„random integer from“ überschrieben. Als erstesmüssenwir also alle gezogenen Zahlenspeichern.DafürfünfweitereglobaleVariablenanzulegenistkeinguterAnsatz.DieeinzelnenVariablenließensichbeiderÜberprüfungnichtguthandhaben.BesseristdieVerwendungeinesneuenDatentypes,denAppInventor2zurVerfügungstellt,dieListe.

37

38

PlatzfürNotizen