Erster Einstieg in die App-Programmierung per Drag & Drop mit App Inventor. Dr. Cora Burger

Transkript

1 Erster Einstieg in die App-Programmierung per Drag & Drop mit App Inventor Dr. Cora Burger

2 Tagesplan AppInventor, erste Apps Würfel-, Zahlenraten-Apps Mittagspause Wecker-App Mal-App Objekteigenschaften, Ereignisorientierung Verzweigung (if then), Variable Uhr: Datum + Zeit Zeichenfläche Linien/Kreise Farben Erster Einstieg in die App-Programmierung mit App Inventor 2

3 Ihr Background, Ihre Wünsche Probleme mit dem Display-Entwurf GPS, Quiz Beispiele für Tutorials: Speichern Beispiel für Tutorial zu TinyDB Transaktionen Erster Einstieg in die App-Programmierung mit App Inventor 3

4 Was ist eine App? Beispiele für Bedienelemente: Label (Beschriftung) Button (Schaltknopf) Picker (z. B. Wahl der Weckzeit) Textbox (Eingabefeld) Erster Einstieg in die App-Programmierung mit App Inventor 4

5 App Programmierung allgemein Betriebssystem für Entwicklung Zielplattform (Smartphone, Tablet, TV, Watch) Ausführbarer Code Programmierumgebung Beliebig Android.apk AppInventor mit Bausteinen Android Studio/Eclipse (Java) Android Android.apk Pocket Code mit Bausteinen MAC OS, ios ios z.b. Xcode mit Swift (früher Objective C) Beliebig Windows Mobile Visual Studio mit C# Generell: Apps werden in Form von Projekten entwickelt Erster Einstieg in die App-Programmierung mit App Inventor 5

6 Entwicklungsumgebung AppInventor I In Google Chrome: appinventor.mit.edu Anmeldung mit Google Konto Erster Einstieg in die App-Programmierung mit App Inventor 6

7 Entwicklungsumgebung AppInventor II Projects: Neu, Import/Export (.aia), Save, Delete, Keystore Connect: Testmöglichkeiten Build: Ausführbare App (.apk) erzeugen Help: Hilfestellung, Tutorials, Foren Gallery: Viele Beispiele Guide: Hilfestellung Report an Issue Benutzername: Abmeldung Je Projekt: Designer, Blocks Erster Einstieg in die App-Programmierung mit App Inventor 7

8 Bestandteile des AppInventors Designer: Benutzungsoberfläche (Palette) Blocks: (Re-)Aktionen (Programmierlogik) Testumgebung (3.) (Connect) Ausführbare App (Build) 4. Arduino-Kurs Erster Einstieg in die App-Programmierung mit App Inventor 8

9 Trommelwirbel-App: 1. Designer Erster Einstieg in die App-Programmierung mit App Inventor 9

10 Trommelwirbel-App: 2. Blocks Erster Einstieg in die App-Programmierung mit App Inventor 10

11 Erweiterung zur Orchester -App Umbenennen Erster Einstieg in die App-Programmierung mit App Inventor 11

12 Test/Ausführung appinventor.mit.edu/explore/ai2/setup.html Emulator USB Ausführung PC AI Starter AI Starter, USB-Driver AppInventor Android-Gerät Entwickler-Optionen USB-Debugging Installation aus unbekannter Quelle QR-Code-Scanner oder über USB-Kabel übertragen Installation aus unbekannter Quelle Erster Einstieg in die App-Programmierung mit App Inventor 12

13 Aufgabe (15 Minuten) Wählen Sie ein Projekt, z. B. Keyboard, Farm oder allgemeine Bild-Sound- Kombinationen. Verwenden Sie eine zum jeweiligen Projekt passende Layout-Variante und positionieren darin Buttons mit entsprechenden Bildern. Fügen Sie außerdem geeignete Sound-Komponenten hinzu. Verknüpfen Sie unter Blocks das Anklicken jedes Buttons mit dem zugehörigen Sound. Optional: Fügen Sie einen weiteren Button hinzu, der für das Abspielen einer bestimmten Melodie auf dem Keyboard oder für eine bestimmte Reihenfolge der gestreichelten Tiere sorgt Erster Einstieg in die App-Programmierung mit App Inventor 13

14 Musterlösung Keyboard: Designer Erster Einstieg in die App-Programmierung mit App Inventor 14

15 Musterlösung Keyboard: Blocks Erster Einstieg in die App-Programmierung mit App Inventor 15

16 Musterlösung Farm: Designer Erster Einstieg in die App-Programmierung mit App Inventor 16

17 Musterlösung Farm: Blocks Erster Einstieg in die App-Programmierung mit App Inventor 17

18 Meine Fragen Welche Komponenten kann die Benutzungsoberfläche enthalten? Was sind wesentliche Eigenschaften dieser Komponenten? Wann sollte man die Komponenten umbenennen? Wie kann man die Komponenten auf der Benutzungsoberfläche anordnen? Welche Ereignisse haben Sie bisher kennen gelernt? Wie kann man auf Ereignisse reagieren? Erster Einstieg in die App-Programmierung mit App Inventor 19

19 Würfel-App Zufallszahl Variable if-verzweigung Erster Einstieg in die App-Programmierung mit App Inventor 20

20 Aufgabe (20 Minuten) Programmieren Sie ein Zahlenratespiel, bei dem intern und nach außen nicht sichtbar mit Hilfe von Math Random Integer eine Zahl bestimmt wird. App-Benutzer sollen über eine Textbox und einen Button die Möglichkeit erhalten diese Zahl zu erraten. Über Erfolg bzw. Misserfolg wird eine entsprechende Meldung ausgegeben. Um die Trefferquote zu erhöhen, sollten Sie den Bereich der Zufallszahlen relativ klein wählen und z. B. auf 1 10 begrenzen Erster Einstieg in die App-Programmierung mit App Inventor 21

21 Musterlösung Zahlenraten Erster Einstieg in die App-Programmierung mit App Inventor 24

22 Meine Fragen Wozu benötigt man Variable? Wie kann man aus Textfeldern auslesen bzw. vom Programm aus etwas hineinschreiben? Wie sorgt man dafür, dass im Programm mehrere unterschiedliche Möglichkeiten abgehandelt werden können? Erster Einstieg in die App-Programmierung mit App Inventor 27

23 Wecker-App: Designer Resultat Erster Einstieg in die App-Programmierung mit App Inventor 29

24 Wecker-App: Blocks Ereignis: App wird gestartet Ereignis: Uhrticken Formatierte Ausgabe von Datum und Uhrzeit Aktuelle Uhrzeit Erster Einstieg in die App-Programmierung mit App Inventor 30

25 Aufgabe Erweitern Sie den Bereich Blocks der Wecker-App derart, dass bei Erreichen der eingestellten Weckzeit der Sound abgespielt wird. Außerdem soll ein Stoppen möglich sein. Gehen Sie wie folgt vor: Definieren Sie zwei Variable Weckminuten und Weckstunden, die Sie mit sinnvollen Anfangswerten belegen. Wenn über den TimePicker Weckzeit Werte eingestellt wurden, sind diese in die Variablen zu übernehmen. Fragen Sie innerhalb von When Clock1.Timer ab, ob die aktuelle Uhrzeit in Bezug auf Minuten und Stunden den eingestellten Werten für die Weckzeit entspricht. Falls ja, sorgen Sie für das Abspielen des Sounds. Wenn der Button Wecker stoppen gedrückt ist, soll das Abspielen beendet werden Erster Einstieg in die App-Programmierung mit App Inventor 31

26 Musterlösung Wecker Erster Einstieg in die App-Programmierung mit App Inventor 33

27 Meine Fragen Welche zusätzlichen Ereignisse haben Sie kennen gelernt? Wozu dient der TimePicker? Welche Möglichkeiten bietet die Komponente Clock? Erster Einstieg in die App-Programmierung mit App Inventor 36

28 Zeichenfläche: Designer Erster Einstieg in die App-Programmierung mit App Inventor 37

29 Zeichenfläche: Blocks und Resultat Ereignis: Linie auf Zeichenfläche gezogen Koordinaten von Punkten (x, y) Startposition (start) Vorherige Position (previous) Aktuelle Position (current) Erster Einstieg in die App-Programmierung mit App Inventor 38

30 Aufgabe (15 Minuten) Erweitern Sie die Zeichenblock-App um die Möglichkeit mit verschiedenen Farben zu zeichnen. Beschränken Sie dazu zunächst die Höhe auf 80% und fügen ober- oder unterhalb der Zeichenfläche ein horizontales oder Tabellen-Layout ein. Darin positionieren Sie Buttons für die von Ihnen gewünschten Farben. Welche Methode von Zeichenfläche benötigen Sie um die Stiftfarbe zu ändern? Welche Built-In Blocks müssen Sie verwenden um die Farbe zu setzen? Zusätzlich: Bauen Sie weitere Buttons sowie eine TextBox ein um einen Kreis oder den eingegebenen Text zu zeichnen oder die gesamte Zeichenfläche zu löschen Erster Einstieg in die App-Programmierung mit App Inventor 39

31 Musterlösung Zeichenblock: Designer Erster Einstieg in die App-Programmierung mit App Inventor 40

32 Musterlösung Zeichenblock: Blocks I Erster Einstieg in die App-Programmierung mit App Inventor 41

33 Musterlösung Zeichenblock: Blocks II Erster Einstieg in die App-Programmierung mit App Inventor 42

34 Meine Fragen Welches Ereignis ist neu dazu gekommen? Wozu benötigt man Koordinaten? Was ist der Unterschied zwischen startx/y, prevx/y und curx/y? Erster Einstieg in die App-Programmierung mit App Inventor 44

35 Fazit Einige grundlegende Konzepte der objektorientierten Programmierung spielerisch kennen gelernt Fortsetzungsmöglichkeit I: Weiterarbeiten mit AppInventor (Tutorials auf YouTube) Fortsetzungsmöglichkeit II: Richtige Programmierung, z. B. mit Java/Kotlin Einstieg in die App-Entwicklung für Android- Geräte (mit Java) Erster Einstieg in die App-Programmierung mit App Inventor 46

36 Vielen Dank fürs Mitmachen und viel Spaß bei der App-Programmierung! Bildquelle: Erster Einstieg in die App-Programmierung mit App Inventor 47