Workshops App-Entwicklung

Minigolf-App – Schritt 1

Der Ball rollt!

Was wollen wir erreichen?

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

          check mark   Wir wollen den Ball bewegen

1.) In der Design-Ansicht

1.

  • Benennt erst euren Screen um.

    • Geht rechts auf die Eigenschaften.

    • Sucht nach Titel

    • Schreibt statt "Screen1": "Level 1"

Bildschirmfoto 2022-08-12 um 16.57.23.png

2.

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

    • 1x Taste


  • Öffnet links den Bereich Zeichen und Animation

  • Fügt folgendes Element über die Taste ein:

    • 1x Zeichenfläche

Bildschirmfoto 2022-08-12 um 16.50.16.png

3. 

  • 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

4.

  • 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

5.

  • Fügt folgende Elemente in eure App:

    • 2x Ball

Bildschirmfoto 2022-08-12 um 17.06.22.png

6.

  • 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 Golfball-Block hinzu: Golfball-Geschleudert

Bildschirmfoto 2022-08-12 um 17.44.00.png

2.

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

    • Setzt die Richtung auf: hole-Überschrift

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

    • Setzt die Geschwindigkeit auf: hole-Geschwindigkeit x 3

    • Dafür braucht ihr aus Mathematik einen X-Block und einen Zahlen-Block

Bildschirmfoto 2022-08-12 um 18.01.04.png

3.

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

  • Fügt einen Golfball-Block hinzu: aufrufen Golfball-Abprall

    • Löscht den roten Direction-Block

  • Fügt einen Variable-Block hinzu: hole-Rand

Bildschirmfoto 2022-08-13 um 10.03.23.png

4.

  • Fügt einen Taste-Block hinzu: ZurücksetzenTaste-Klick

  • Fügt drei Golfball-Blöcke hinzu: Golfball-Geschwindigkeit, Golfball-X und Golfball-Y

    • Setzt die Geschwindigkeit auf: 0

    • Setzt den X-Koordinaten auf: 200

    • Setzt den Y-Koordinaten auf: 600

      Tipp: Ihr könnt die Koordinaten des Golfballs auf eine beliebige Stelle setzen

Bildschirmfoto 2022-08-13 um 10.03.46.png

5.

So sollte euer Programm aussehen:

Bildschirmfoto 2022-08-13 um 10.04.19.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 über ihn streichen?

          check mark   Bewegt sich der Golfball in die richtige Richtung?

          check mark   Prallt der Golfball vom Bildschirmrand?

          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!