Workshops App-Entwicklung

Minigolf-App – Schritt 3

Wir brauchen eine Herausforderung!

Was wollen wir erreichen?

          check mark   Wir bauen Hindernisse ein

          check mark   Wir bekommen eine Benachrichtigung, wenn wir eingelocht haben

1.) In der Design-Ansicht

1.

  • Fügt links aus dem Bereich Zeichnen und Animation folgende Elemente in eure App ein:

    • 2x ZeichenAnimation

  • Gibt den ZeichenAnimationen einen anderen Namen

    • Wählt im Bereich Komponenten unten: Umbenennen

    • Schreibt statt ZeichenAnimation1: "Hindernis 1"

    • Schreibt statt ZeichenAnimation2: "Hindernis 2"

Bildschirmfoto 2022-08-14 um 08.53.45.png

2.

  • Ändert rechts die Eigenschaften des ersten Hindernisses

    • Setzt die Höhe auf: "50 pixels"

    • Setzt die Breite auf: "150 pixels"

    • Setzt das Intervall auf: "10"

    • Setzt die Geschwindigkeit auf: "2"

    • Setzt die Koordinaten auf: X = "100", Y = "400"

    • Wählt bei Bild: "Datei hochladen" und wählt das Bild "Hindernis.jpg" aus

    • Entferne den Haken bei Drehen

  • Ändert rechts die Eigenschaften des zweiten Hindernisses

    • Setzt die Höhe auf: "50 pixels"

    • Setzt die Breite auf: "225 pixels"

    • Setzt das Intervall auf: "10"

    • Setzt die Geschwindigkeit auf: "3"

    • Setzt die Koordinaten auf: X = "80", Y = "150"

    • Wählt bei Bild: "Datei hochladen" und wählt das Bild "Hindernis.jpg" aus

    • Entferne den Haken bei Drehen

      Tipp: Ihr könnt die Koordinaten und die Geschwindigkeit anpassen

Bildschirmfoto 2022-08-14 um 12.00.23.png

3. 

  • Fügt links aus dem Bereich Benutzerschnittstelle folgendes Element in eure App ein:

    • 1x Benachrichtigung

  • Gibt der Benachrichtigung einen anderen Namen

    • Wählt im Bereich Komponenten unten: Umbenennen

    • Löscht die "1" hinter "Benachrichtigung"

Bildschirmfoto 2022-08-14 um 11.35.55.png

2.) Wechselt zur Böcke-Ansicht

1.

  • Fügt einen Hindernis_1-Block hinzu: wenn-Hindernis_1-RandErreicht

  • Fügt in den Hindernis_1-Block weitere Blöcke ein: 

    • Fügt aus den Hindernis_1-Blöcken einen aufrufen-Hindernis_1-Abprall-Block hinzu und löscht den roten Block

    • Fügt aus den Variable-Blöcke einen hole-Block dahinter und setzt ihn auf Rand

Bildschirmfoto 2022-08-14 um 11.43.01.png

2.

Macht das gleiche mit Hindernis_2:

  • Tipp: Setzt die Hindernis_1-Blöcke in den Rucksack (oben rechts) und zieht sie wieder raus. Dann habt ihr die Blöcke kopiert und ihr könnt die Felder mit "Hindernis_1" auf "Hindernis_2" setzen

Bildschirmfoto 2022-08-14 um 11.48.50.png

3.

  • Fügt einen Golfball-Block hinzu: Golfball-KollidiertMit

  • Fügt in den Golfball-Block weitere Blöcke hinzu:

    • Nehmt aus den Steuerung-Blöcken einen wenn-dann-sonst-Block und fügt ihn in den Timer-Block ein

    • Nehmt aus Mathematik einen Gleich(=)-Block und setzt ihn hinter "wenn"

    • Nehmt aus Variablen einen hole-Block, setzt ihn in die erste Lücke und wählt: anderer

    • Nehmt aus den Loch-Blöcken einen Loch-Block und setzt ihn in die zweite Lücke

    • Nehmt aus den Golfball-Blöcken einen setze-Golfball-X-Block und setzt ihn hinter "dann"

    • Nehmt aus den Golfball-Blöcken einen setze-Golfball-Y-Block und setzt ihn drunter

    • Nehmt aus den Golfball-Blöcken einen setze-Golfball-Geschwindigkeit-Block und setzt ihn drunter

    • Nehmt aus Mathematik zwei Plus(+)-Blöcke und setzt ihn hinter den Golfball-X und Golfball-Y-Blöcken

    • Nehmt aus den Loch-Blöcken einen Loch-X und einen Loch-Y-Block und setzt ihn in die beiden ersten Lücken

    • Nehmt aus Mathematik zwei Zahlen-Blöcke, setzt sie in die zweiten Lücken und schreibt: "5"

    • Nehmt aus Mathematik einen Zahlen-Block, setzt ihn hinter den Golfball-Geschwindigkeit-Block und stell sicher, dass eine "0" eingetragen ist

    • Nehmt aus den Benachrichtigung-Blöcken einen aufrufen-Benachrichtigung-ZeigeNachrichtsDialog-Block und setzt ihn drunter

      • Nehmt aus Text einen verbinde-Block und setzt ihn hinter "Nachricht"

      • Nehmt aus Text einen "..."-Block, setzt ihn oben hinter "verbinde" und schreibt: "So viele Züge hast du gebraucht: "

      • Nehmt aus den AnzahlZüge-Blöcken einen AnzahlZüge-Text-Block und setzt ihn drunter

      • Nehmt aus Text einen "..."-Block, setzt ihn hinter "Titel" und schreibt: "Geschafft!"

      • Nehmt aus Text einen "..."-Block, setzt ihn hinter "TasteText" und schreibt: "Weiter"

    • Nehmt aus den Golfball-Blöcken einen setze-Golfball-Richtung-Block und setzt ihn hinter "sonst"

    • Nehmt aus Mathematik zwei Mal(x)-Blöcke und setzt ihn hinter den Golfball-Richtung-Block

    • Nehmt aus den Golfball-Blöcken einen Golfball-Richtung-Block und setzt ihn in die erste Lücke

    • Nehmt aus Mathematik einen Zahlen-Block, setzt ihn in die zweite Lücke und schreibt: "-1"

Bildschirmfoto 2022-08-14 um 12.19.25.png

5.

  • So sollte euer Programm aussehen:

Bildschirmfoto 2022-08-14 um 12.20.58.png

Bildschirmfoto 2022-08-14 um 12.21.25.png


3.) Testen

Funktioniert unsere App?

1.

  • Klickt im App Inventor oben auf Verbinden

  • Wählt AI Companion

Bildschirmfoto 2022-03-02 um 14.45.29.png

2.

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

  • Setzt den Haken bei Use Legacy Connection 

  • Wählt scan QR code.

Bildschirmfoto 2022-03-02 um 14.46.55.png

3.

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

Bildschirmfoto 2022-03-02 um 14.48.35.png


Testet die App nun ausführlich!

          check mark   Bewegen sich die Hindernisse?

          check mark   Prallt der Ball von den Hindernissen ab?

          check mark   Können wir den Ball "einlochen"?

          check mark   Erscheint die Benachrichtigung, wenn wir eingelocht haben?


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