Workshops App-Entwicklung
Workshops App-Entwicklung

Zeichnen-App – Schritt 6 (Überarbeitete Version)

Hintergrundbild und Export


Ziel 6

Legt ein Hintergrundbild für eure Zeichnung fest, auf dem ihr malen könnt, und teilt euer Werk mit euren Freunden. 


1.) In der Design-Ansicht

Benötigt werden:

1.

Links in den Bereichen Medien, Social Media und Benutzerschnittstelle  findet ihr die Elemente, die ihr braucht.

  • Fügt ein Element des Typs BildAuswahl  hinzu.

  • Fügt ein Element des Typs Teilen  hinzu.

  • Fügt ein Element des Typs Taste  hinzu.

image2022-3-7_11-4-34.png

2.

Vergebt einen sinnvollen Text für die Taste und die BildAuswahl  und sinnvolle Namen für die Elemente.

zeichnen6_designer.png

zeichnen6_designer2.png





2.) In der Blöcke-Ansicht (Programmierung)

Funktion Hintergrundbild

Auslöser: Nach Bild-Auswahl

Zu verändernde Elemente: Zeichenfläche → HintergrundBild

Berechnung: HintergrundBild auf Bild aus BildAuswahl setzen


Funktion Teilen

Auslöser: Klick auf Taste

Zu verändernde Elemente: Teilen-Element → TeileDatei

Berechnung: Zeichenfläche → Speichern


Programmiert mit den Elementen:


1.

Erstellt ein NachAuswahl-Event für das BildAuswahl-Element.

image2022-3-7_11-7-30.png

2.

Setzt das Hintergrundbild der Zeichenfläche  auf das ausgewählte Bild aus der BildAuswahl .

image2022-3-7_10-38-2.png



Für die Teilen-Funktion muss nun die Taste mit dem Teilen-Element verbunden werden: 

1.

Erstellt ein Klick-Event für die Teilen-Taste.

image2022-3-7_10-47-36.png image2022-3-7_10-49-12.png

2.

Erstellt einen TeileDatei-Block für das Teilen-Element.

image2022-3-7_10-51-52.png Bildschirmfoto 2022-03-07 um 10.51.11.png

3.

Geteilt werden soll die Zeichenfläche . Dazu müsst ihr die Zeichenfläche speichern und als Datei der TeileDatei-Funktion übergeben.

image2022-3-7_10-53-10.png

4.

So könnte das dann aussehen.

zeichnen6_bloecke.png



3.) Testen

1.

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

Bildschirmfoto 2022-03-02 um 14.45.29.png

2.

Öffnet die App Al Companion auf eurem Test-Smartphone und wählt scan QR code. 

Vergesst nicht den Haken bei Use Legacy Connection  zu setzen.

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!

  1. Könnt ihr ein Hintergrundbild für euer Bild hinzufügen?

  2. Könnt ihr auf dem Bild malen?

  3. Funktioniert die Teilen-Funktion? Wird das Bild komplett geteilt?


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


<< Zeichnen-App - Schritt 5

Zeichnen-App – Abschluss >>