AppInventor (für Geräte mit Android) Dr. Cora Burger

Transkript

1 AppInventor (für Geräte mit Android) Dr. Cora Burger

2 Tagesplan 10:00 11:30 Uhr AppInventor, erste Apps 11:30-11:45 Uhr Pause Objekteigenschaften, Ereignisorientierung 11:45 13:15 Uhr Würfel-, Zahlenraten-Apps Verzweigung (if then), Variable 13:15 14:00 Uhr Mittagspause 14:00 15:30 Uhr Wecker-App Uhr: Datum + Zeit 15:30 15:45 Uhr Pause 15:45 17:15 Uhr Mal-App Zeichenfläche + Linien/Kreise + Farben AppInventor 2

3 Ihr Background, Ihre Wünsche AppInventor 3

4 Was ist eine App? Beispiele für Bedienelemente: Label (Beschriftung) Button (Schaltknopf) Picker (z. B. Wahl der Weckzeit) Textbox (Eingabefeld) AppInventor 4

5 App Programmierung allgemein Entwicklungsplattform Zielplattform (Smartphone, Programmierumgebung Tablet, TV, Watch) Beliebig Android AppInventor mit Bausteinen Android Studio/Eclipse mit Java Android Android 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 AppInventor 5

6 Entwicklungsumgebung AppInventor I In Google Chrome: Anmeldung mit Google Konto AppInventor 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 AppInventor 7

8 Bestandteile des AppInventors Designer: Benutzungsoberfläche (Palette) Blocks: (Re-)Aktionen (Programmierlogik) Testumgebung (Connect) Ausführbare App (Build) AppInventor 8

9 Trommelwirbel-App: Designer AppInventor 9

10 Trommelwirbel-App: Blocks AppInventor 10

11 Erweiterung zur Instrumenten-App AppInventor 11

12 Testmöglichkeiten Testumgebung: AICompanion: Smartphone, gleiches WLAN Emulator USB: Smartphone mit AI Companion + Einstellungen, PC: installierter USB-Treiber Ausführung: QR (nur bei drahtloser Verbindung).apk auf Smartphone speichern In beiden Fällen: Installation im Download-Verzeichnis AppInventor 12

13 Smartphone: AI2 Companion Installieren AppInventor 13

14 Einstellungen Einstellungen Modellnummer/Systembuild So oft auf Nummer tippen, bis eine Meldung Sie sind jetzt Entwickler erscheint Einstellungen USB-Debugging einschalten Installation von unbekannter Quelle erlaubt Sicherheitsproblem! Für normalen Gebrauch: USB-Debugging ausschalten Keine Installation von unbekannter Quelle AppInventor 14

15 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 AppInventor 15

16 Musterlösung Keyboard: Designer AppInventor 16

17 Musterlösung Keyboard: Blocks AppInventor 17

18 Musterlösung Farm: Designer AppInventor 18

19 Musterlösung Farm: Blocks AppInventor 19

20 Ihre Fragen AppInventor 20

21 Meine Fragen Welche Komponenten kann die Benutzungsoberfläche enthalten? Was sind wesentliche Eigenschaften dieser Komponenten? Wie kann man die Komponenten auf der Benutzungsoberfläche anordnen? Welche Ereignisse haben Sie bisher kennen gelernt? Wie kann man auf Ereignisse reagieren? AppInventor 21

22 Pause (15 Minuten) AppInventor 22

23 Würfel-App Zufallszahl Variable if-verzweigung AppInventor 23

24 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 AppInventor 24

25 Zusätzliche Aufgabe: BMI I BMI-Berechnung: Realisieren Sie eine App zur Berechnung des Body Mass Index, der sich nach der Formel Körpergewicht dividiert durch Quadrat der Körperlänge (in m) berechnet. Bauen Sie Ihre Benutzungsoberfläche mit Hilfe eines TableArrangement mit 2 Spalten und 3 Zeilen nach dem rechts gezeigten Schema auf. Nach einem Klick auf den Berechnen-Button soll der BMI nach der obigen Formel berechnet und in der dafür vorgesehenen Textbox ausgegebenen werden. Bestimmen Sie außerdem anhand der folgenden Bedingungen (nächste Folie) die Kategorie des BMI und geben sie in der Textbox unter dem entsprechenden Label aus App-Inventor 25

26 Zusätzliche Aufgabe: BMI II Bedingung 1 für BMI Bedingung 2 für BMI Kategorie < 18.5 Untergewicht >= 18.5 < 25 Normalgewicht >= 25 < 30 Übergewicht >= 30 Adipositas Bitte beachten Sie, dass Kommazahlen bei Apps mit einem Punkt anstelle des Kommas einzugeben sind. Testen Sie Ihre App mit den folgenden Kombinationen: Körpergewicht Körperlänge 50 kg 1.70 m 65 kg 1.75 m 90 kg 1.80 m 110 kg 1.85 m App-Inventor 26

27 Musterlösung Zahlenraten AppInventor 27

28 Musterlösung BMI AppInventor 28

29 Ihre Fragen AppInventor 29

30 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? AppInventor 30

31 Mittagspause (45 Minuten) AppInventor 31

32 Wecker-App: Designer Resultat AppInventor 32

33 Wecker-App: Blocks I Ereignis: App wird gestartet Ereignis: Uhrticken Formatierte Ausgabe von Datum und Uhrzeit Aktuelle Uhrzeit AppInventor 33

34 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 AppInventor 34

35 Zusätzliche Aufgabe: Stoppuhr Erstellen Sie eine App für eine Stoppuhr mit folgender Benutzungsoberfläche: Welche Aufrufmöglichkeiten ( call ) von Clock sind besonders gut geeignet um die Funktionalität einer Stoppuhr zu erbringen? AppInventor 35

36 Musterlösung Wecker AppInventor 36

37 Musterlösung Stoppuhr AppInventor 37

38 Ihre Fragen AppInventor 38

39 Meine Fragen Welche zusätzlichen Ereignisse haben Sie kennen gelernt? Wozu dient der TimePicker? Welche Möglichkeiten bietet die Komponente Clock? AppInventor 39

40 Pause (15 Minuten) AppInventor 40

41 Zeichenfläche: Designer AppInventor 41

42 Zeichenfläche: Blocks und Resultat Ereignis: Linie auf Zeichenfläche gezogen Koordinaten von Punkten (x, y) Startposition (start) Vorherige Position (previous) Aktuelle Position (current) AppInventor 42

43 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 AppInventor 43

44 Musterlösung Zeichenblock: Designer + Resultat AppInventor 44

45 Musterlösung Zeichenblock: Blocks I AppInventor 45

46 Musterlösung Zeichenblock: Blocks II AppInventor 46

47 Ihre Fragen AppInventor 47

48 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? AppInventor 48

49 Fazit Einige grundlegende Konzepte der objektorientierten Programmierung spielerisch kennen gelernt Fortsetzungsmöglichkeit I: Weiterarbeiten mit AppInventor Fortsetzungsmöglichkeit II: Richtige Programmierung, z. B. mit Java AppInventor 49

50 Vielen Dank fürs Mitmachen und viel Spaß bei der App-Programmierung! AppInventor 50