Programmiertest 1: Kreiere eine Slide Show

Entwerfen des Bildschirms

Für diese App möchtet ihr eine Diashow erstellen, in der der Benutzer durch Bilder navigieren kann. Wenn ihr den Bildschirm entwirft, müsst ihr ein Bild sowie „vorheriges Bild“ und „nächstes Bild“- Buttons für den Benutzer einfügen. Dieser Teil wird im Designer-Bildschirm durchgeführt.

  1. Fügt dem Bildschirm ein Bild hinzu.
    • Stellt die Höhe und Breite so ein, dass das Bild auf die Bildschirmgrösse passt.
    • Wir wählen „fill parent” für unser Bild aus. Wenn „fill parent“ ausgewählt wird, wird das Bild automatisch auf die Grösse des Bildschirmes angepasst. Image1 ist innerhalb des Bildschirms, aber die Buttons sind in einer horizontalen Anordnung. Du kannst sehen, welche Dinge in anderen Dingen sind, indem du die Reihenfolge im Components-Menu beachtest.
  2. Füge unterhalb des Bildes ein horizontales Layout hinzu.
  3. Füge zwei Buttons ins horizontale Layout hinzu.
    • Klicke auf die Buttons im Components-Menu
      • Verändere den Text, damit im Button “nächstes Bild“ und „vorheriges Bild“ steht.
      • Du solltest auch die Namen deiner Buttons anpassen, damit du nachher weisst, was diese tun! Wir haben unsere zu „previous“ und „next“ geändert. Klick auf „rename“ unter „Components“.
  4. Lade ein Bild hoch, dass du in der Diashow verwenden möchtest!
  5. Wähle das Bild aus, dass du auf der ersten Seite deiner Diashow verwenden möchtest.
    • Klicke auf „Image1“ im „Components“-Menu, danach auf „Picture“ im „Properties“-Menu. Dann kannst du ein Bild auswählen, das hochgeladen wird.
  6. Füge mindestens zwei weitere Seiten dazu. Für unsere Slideshow haben wir drei Bildschirme verwendet, aber du darfst auch mehr einfügen.
    • FFürs Erste muss mit diesen Seiten nichts gemacht werden, aber nach der „Block“-Programmierung werdet ihr dafür Buttons und Bilder hinzufügen, genauso wie auf der ersten Seite.

designer

Programmierung der „Blocks“

Erklärung: Da du nun deine Seite eingerichtet hast, müssen die Buttons noch eingerichtet werden. Wenn der Benutzer einen Button anklickt, sollte eine andere Seite mit einem anderen Bild geöffnet werden. Dafür benutzen wir den „Button event handler“.

  1. Klicke auf den Button „vorheriges Bild”, um alle Möglichkeiten des Event Handlers zu sehen. Klicke auf „when button.klick“, halte die Maus gedrückt und führe die Maus zum Bildschirm.
  2. Klicke auf „control” und finde den Block „open another screen screenName”.
  3. Öffne eine leere „text box” und ziehe sie in den Block „open another screen screenName”. Gib den Namen der letzten Seite deiner Slide Show ein. In unserem Beispiel ist das Screen3.
  4. Klick auf deinen „next“ Button und ziehe den „when button.click” Event Handler nochmals.
  5. Unter „Control”, hole noch einen Block „open another screen screenName”.
  6. Hole dir einen Block „text“ und gib die nächste Seite ein, welche in deiner Slide Show erscheinen soll (in unserem Beispiel ist dies Screen2).

blocks

Checkpoint!

Bevor wir weitergehen, stellen wir sicher, dass der Code, den wir soeben erstellt haben, funktioniert. Es ist eine gute Angewohnheit, Teile des Codes zu überprüfen, bevor eine komplette App fertiggeschrieben ist, um sicherzustellen, dass es funktioniert. Andernfalls könnte die gesamte App fertig sein, aber mit vielen Befehlen, die nicht funktionieren (und es könnte schwierig sein, herauszufinden, warum sie nicht funktionieren!)!

Öffne die App aus App Inventor auf deinem Telefon, Tablet und dem „Emulator”. Funktionieren die Tasten wie erwartet? Unsere Tasten haben funktioniert: „previous“ hat zum leeren Screen3 geführt, und „next“ zum leeren Screen2. Wenn deine Tasten nicht das tun, was erwartet wird, dann überprüfe deinen Code im Erstellungsmodus.

Tipp: Da Screen2 und Sceen3 noch leer sind, kehren wir zu Screen1 zurück, indem wir auf unseren Computer zurückkehren. App Inventor ermöglicht es, über das angeschlossene Telefon, Tablet oder den Emulgator durch die App zu navigieren. Dies ist ein guter Trick für später.

Beenden der App

Erklärung: Nachdem du erfolgreich einen Bildschirm eingerichtet und programmiert hast, kannst du den Rest der Bildschirme programmieren! Du kannst weitere Bilder hinzufügen, wenn du willst, dass deine Diashow mehr Bilder hat, aber stelle sicher, dass du immer mindestens drei hast. Die Diagramme unten zeigen den Durchfluss.

  1. Wiederhole Schritte 1-12 für jede Seite deiner Slide Show. Der „nächstes Bild“-Button sollte immer zum nächsten Bild führen, und der „vorheriges Bild“-Button zum letzten Bild.


3screen-diagram
4screen-diagram

Letzter Checkpoint!

Stell sicher, dass Ihre App funktioniert! Teste alle „Weiter“ und alle „Zurück“ -Taste. Führt jede Taste zu einem neuen Bildschirm? Wenn nicht, überprüfe deine Arbeit und stell  sicher, dass du die Namen Ihrer Bildschirme korrekt eingegeben hast.

Herzliche Glückwünsche! Du hast gerade deine erste Codierung Test abgeschlossen! Super gemacht! Nicht viele Leute haben jemals eine App codiert!

Steckst du fest? Vergiss nicht, das App-Beispiel vom Google Play Store herunterzuladen, um zu sehen, wie sie funktioniert. Du kannst auch den Quellcode unseres Test herunterladen: Slideshow Quellcode

Hier findest du eine Anleitung zum Herunterladen und zur Verwendung des Quellcodes:  Anleitung Quellcode