Workshops App-Entwicklung

Minigolf-App – Schritt 5

Jetzt wird es wackelig!

Was wollen wir erreichen?

          check mark   Wir bauen ein Golffeld, einen Golfball und ein Loch ein

          check mark   Wir nutzen die Lagesensoren, um den Golfball zu bewegen

1.) In der Design-Ansicht

1.

  • Wechselt oben auf den zweiten Screen

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

    • 1x Taste

  • Fügt links aus dem Bereich Zeichen und Animation folgendes Element ein:

    • 1x Zeichenfläche

  • Fügt links aus dem Bereich Sensoren folgendes Element ein:

    • 1x Beschleunigungssensor

  • Gibt dem Beschleunigungssensor einen anderen Namen

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

  Bildschirmfoto 2022-08-12 um 16.50.16.png

2. 

  • Gibt der Zeichenfläche einen anderen Namen

    • Wählt im Bereich Komponenten unten: Umbenennen

    • Schreibt: "Golffeld"

  • Ändert rechts die Eigenschaften der Zeichenfläche

    • Setzt die Höhe auf: "Fülle alles..."

    • Setzt die Breite auf: "Fülle alles..."

    • Setzt die HintergrundFarbe auf: "grün"

      Tipp: Ihr könnt die Farbe über Custom selbst anpassen

Bildschirmfoto 2022-08-12 um 17.00.49.png

3.

  • Gibt der Taste einen anderen Namen

    • Wählt im Bereich Komponenten unten: Umbenennen

    • Schreibt: "ZurücksetzenTaste"

  • Ändert rechts die Eigenschaften der Taste

    • Ändert den Text und schreibt: "Zurücksetzen"

    • Setzt die Breite auf: "50 percent"

      Tipp: Ihr könnt die Farbe, Form und Schriftart anpassen


Bildschirmfoto 2022-08-13 um 09.50.06.png

4.

  • Fügt folgende Elemente in eure App:

    • 2x Ball

Bildschirmfoto 2022-08-12 um 17.06.22.png

5.

  • Gibt den Bällen einen anderen Namen

    • Wählt im Bereich Komponenten unten: Umbenennen

    • Schreibt für "Ball1": "Loch"

    • Schreibt für "Ball2": "Golfball"

  • Ändert rechts die Eigenschaften der Bälle

    • Setzt den Radius vom Golfball auf: "15"

    • Setzt den Intervall vom Golfball auf: "10"

    • Setzt den Radius vom Loch auf: "20"

    • Ändert die Farben unter ZeichenFarbe

      Tipp: Ihr könnt die Radien selbst anpassen. Das Loch muss aber größer sein.

Bildschirmfoto 2022-08-12 um 17.21.44.png

2.) Wechselt zur Böcke-Ansicht

1.

  • Fügt einen Beschleunigungssensor-Block hinzu: wenn-Beschleunigungssensor-BeschleunigungGeändert

  • Fügt in den Beschleunigungssensor-Block einen Golfball-Block hinzu: aufrufen-Golfball-BewegeZu

Bildschirmfoto 2022-08-18 um 11.14.00.png

2.

  • Fügt jeweils hinter "x" und "y" einen Mathematik-Block hinzu: Plus(+)-Block

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

    • Fügt jeweils in die erste Lücke einen Mathematik-Block: Mal(x)-Block

      • Nehmt aus den Beschleunigungssensor-Blöcken einen hole-Beschleunigungssensor-X-Block und setzt ihn in die obere erste Lücke

      • Nehmt aus den Beschleunigungssensor-Blöcken einen hole-Beschleunigungssensor-Y-Block und setzt ihn in die untere erste Lücke

      • Nehmt aus den Mathematik-Blöcken einen Zahlen-Block, setzt ihn in die obere zweite Lücke und ändert die Zahl auf: "-2"

      • Nehmt aus den Mathematik-Blöcken einen Zahlen-Block, setzt ihn in die untere zweite Lücke und ändert die Zahl auf: "2"

Bildschirmfoto 2022-08-18 um 11.19.12.png

3.

  • Nehmt aus dem Rucksack folgende Blöcke:

    • wenn-ZurücksetzenTaste-Klick-Block

    • wenn-Golfball-KollidiertMit-Block

Bildschirmfoto 2022-08-16 um 14.23.04.png

4.

  • Löscht im wenn-ZurücksetzenTaste-Klick-Block folgende Blöcke:

    • setze-AnzahlZüge-Text und die Zahl dahinter

    • setze-globalZüge und die Zahl dahinter

  • Nehmt den Benachrichtigung-Block im wenn-Golfball-KollidiertMit-Block zur Seite. Löscht ihn aber nicht!

Bildschirmfoto 2022-08-16 um 14.30.35.png

5.

  • Fügt in den ZurücksetzenTaste-Block einen Beschleunigungssensor-Block hinzu: setze-Beschleunigungssensor-Aktiviert

    • Nehmt aus den Logik-Blöcken einen wahr-Block und setzt ihn dahinter

  • Fügt in den Golfball-Block einen Beschleunigungssensor-Block hinzu: setze-Beschleunigungssensor-Aktiviert

    • Nehmt aus den Logik-Blöcken einen falsch-Block und setzt ihn dahinter

Bildschirmfoto 2022-08-18 um 11.22.00.png

6.

So sollte euer Programm aussehen:

Bildschirmfoto 2022-08-18 um 11.22.44.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   Bewegt sich der Golfball, wenn wir das Smartphone kippen?

          check mark   Bewegt sich der Golfball in die richtige Richtung?

          check mark   Wird der Golfball zurückgesetzt, wenn wir auf die Zurücksetzen-Taste drücken?


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