Workshops App-Entwicklung

Die Würfel-App – Schritt 1

Klicken, Würfeln, Anzeigen

Ziel 1

Beim Tippen auf den Würfel-Button wird eine Zufallszahl zwischen 1 und 6 generiert und diese in einem Textfeld angezeigt. 

1.) In der Design-Ansicht

Fügt neue Elemente hinzu:

1.

Links im Bereich Benutzerschnittstelle findet ihr die Elemente, die ihr braucht.

Bildschirmfoto 2022-01-27 um 11.01.42.png

2.

Ihr wollt, dass ihr auf eine Taste klicken müsst, damit eine Zahl zwischen 1 und 6 angezeigt wird. Deshalb benötigt ihr eine Taste und ein Feld, in dem das Ergebnis stehen kann.

Fügt ein Element des Typs Taste in das Handydisplay hinzu.

Fügt ein Element des Typs Bezeichnung hinzu.

Bildschirmfoto 2022-01-27 um 11.03.50.png

3.

Vergebt einen sinnvollen Namen für die Elemente.

Benennt "Taste1" um und schreibt "WürfelTaste".

Benennt "Bezeichnung1" um und schreibt "ErgebnisTextFeld".



Bildschirmfoto 2022-01-27 um 11.25.16.png

4.

Rechts findet ihr die Eigenschaften eurer Elemente. Hier könnt ihr den angezeigten Text, die Farbe und vieles mehr, ändern.

Ändert den Platzhalter-Text eurer Elemente:

Ändere den Text der "WürfelTaste" von "Text für Taste1" zu "Würfeln!".

Löscht für das "ErgebnisTextFeld" den Text und lasst das Feld leer. Später soll hier das gewürfelte Ergebnis angezeigt werden.

Ihr könnt auch den Screen-Namen ändern wenn ich das wollt.

Bildschirmfoto 2022-01-27 um 11.30.09.png

5.

So sollte euer Screen aussehen:

Bildschirmfoto 2022-01-27 um 11.52.33.png





2.) In der Blöcke-Ansicht

Programmiert mit den Elementen:

1.

Öffnet jetzt oben rechts die Blöcke-Ansicht. Dort sorgt ihr dafür, dass mit eurer WürfelTaste auch etwas passiert. Ihr programmiert nun die Funktionen.

Bildschirmfoto 2022-01-27 um 12.52.24.png

2.

Links seht ihr den Bereich “Blöcke”, dort findet ihr die Bausteine, die ihr benötigt.

Bildschirmfoto 2022-01-27 um 12.58.33.png

3.

Wenn ihr wollt, dass etwas mit eurem Element passiert, müsst ihr das Element im “Blöcke”-Bereich wählen und den passenden Baustein suchen.

Klickt auf den Bereich WürfelTaste. Der Bereich kann anders heißen, wenn ihr die Taste zuvor nicht umbenannt habt.

Zieht ein Klick-Ereignis in die leere Seite.

Bildschirmfoto 2022-01-27 um 13.02.11.png

4.

Ihr wollt, dass eine Zahl in eurem ErgebnisTextFeld erscheint, wenn ihr die WürfelTaste klickt.

Zieht aus dem Bereich ErgebnisTextFeld einen setze-Block mit der Eigenschaft HintergrundFarbe des Ergebnis-Textfelds in das erste Baustein.

Ändert die Eigenschaft HintergrundFarbe mit einem klick in Text. Denn ihr wollt den Text ändern, nicht die Farbe.


Bildschirmfoto 2022-01-27 um 13.04.07.png

5.

Geht in den Bereich “Mathematik”

Berechnet eine zufällige Zahl zwischen 1 und 6.

Bildschirmfoto 2022-01-27 um 13.06.23.png

6.

Verknüpft die Elemente sinnvoll, so dass die gewünschte Funktion ausgeführt wird.

So sollte euer Screen aussehen:

wuerfel1_bloecke.png




3.) Testen

Funktioniert unsere App?

1.

Klickt im App Inventor oben auf Verbinden und wählt AI Companion.

Bildschirmfoto 2022-01-27 um 13.17.31.png

2.

Öffnet die App AI Companion auf eurem Test-Smartphone.

Setzt den Haken bei Use Legacy Connection.

Wählt scan QR code.

Screenshot_20220127-131004.jpg

3.

Scannt den QR-Code auf dem Computerbildschirm – die App wird geladen.

Bildschirmfoto 2022-01-27 um 13.18.59.png


Testet die App nun ausführlich!

  • Erscheint eine Zahl beim Tippen auf die Taste?
  • Wird erneut eine Zahl angezeigt, wenn man erneut auf die Taste tippt?
  • Sind die Zahlen zufällig?
  • Erscheinen nur Zahlen zwischen 1 und 6?


Funktioniert alles? Herzlichen Glückwunsch! Weiter geht es auf der nächsten Seite!