Quelltext der Seite Zum Einsteig - die Krümelmonsterapp

===Idee===

Zum Einsteig wollen wir mit einer sehr einfachen App beginnen, die in erster Linie die verschiedenen Module des App Inventors erläutern soll. Auf dem Display haben wir zwei Komponenten - ein Bild vom Krümelmonster und einen Button mit der Aufschrift "Kekse". Wird der Button gedrückt, ist das bekannte Krümelmonstermampfen zu hören.

===Eine neue App erstellen===

Um eine neue App zu erstellen, gehen wir auf den Menüpunkt ''Project'' und anschließend auf den Untermenüpunkt ''Start new project...'', wo wir unserem Projekt einen Namen geben, der aus einer einzigen Zeichenkette bestehen muss. Das Projekt ist anschließend in unserem Google-Account gespeichert und kann an jedem beliebigen Rechner aufgerufen werden. Jetzt können wir bereits im Designer mit der Arbeit beginnen.

===Designer===

Mit dem ''Designer'' oder ''Design Editor'' wird das Layout der App gestaltet. Hierfür steht in der Palette eine Auswahl verschiedener Kategorien zur Verfügung, die die Bausteine für die geplante App (Buttons, Labels, Media, Layouts u.v.m.) enthalten. 


<div style="margin-left:100px; margin-top:30px; margin-bottom:30px">
[[Datei:Kruemel1.JPG]]
</div>

====Die Palette====

Die App-Bausteine sind in der Palette in neun verschiedene Kategorien zusammengefasst, die wir im Laufe der Zeit genauer kennen lernen werden. Die einzelnen Bausteine werden per drag&drop in den sogenannten Viewer gezogen und dort angeordnet.

====Der Viewer====

Der Viewer ist sozusagen die Werkbank des App Inventors, wo die einzelnen Komponenten zu dem geplanten Layout zusammengebastelt werden. Dabei erscheinen die sichtbaren Elemente auf der Screen, während nicht-sichtbare Elemente (z.B. Sounds, Datenbanken etc.) unterhalb der Screen abgelegt sind.

====Components====

Rechts neben dem Viewer werden die Komponenten der App in ihrer geplanten Gliederung aufgelistet und können dort mittels des Buttons ''Rename'' umbenannt und mit einem griffigen Namen versehen werden. Dies ist besonders wichtig um anschließend im Block Editor die Übersicht zu behalten.

====Media====

Brauchen wir für unsere App Medien (Bilder, Sounds etc.) können diese im Bereich ''Media'', der sich unterhalb des Bereichs ''Components'' befindet, hochgeladen werden.

====Properties====

Die Attribute der jeweils aktiven Komponente im Bereich ''Components'' werden im Bereich ''Properties'' angezeigt. Ihre Werte können dort verändert werden.

====Das Krümelmonster-Design====

Bevor wir mit dem Design beginnen benötigen wir zwei Mediendateien. Zum einen ein beliebiges Bild des Krümelmonsters (bevorzugt im Hochformat) und eine Sounddatei, die wir [http://www.salamisound.de/monster-sounds hier] finden können. Beide Dateien laden wir mittels ''Upload file ..'' im Bereich ''Media'' hoch.<br/>Zuerst ziehen wir einen Button aus der Palette (Kategorie ''User Interface'') in den Viewer. Bei den Properties setzen wir den '''Text''' auf ''Kekse!!!'', '''text-alignment''' auf ''center'' und '''width''' auf ''Fill parent ...''.<br/> Als nächstes brauchen wir eine ''canvas'' (= Leinwand) aus der Kategorie ''Drawing and Animation''. Ohne diese kann kein Bild eingefügt werden. Das Bild fügen wir ein, indem wir das Attribut '''BackgroundImage''' auf den Wert des Krümelmonsterbildes setzen. Das Attribut '''width''' setzen wir ebenfalls auf ''Fill parent...''.<br/>Nun fehlt nur noch der Sound. Hier müssen wir nur bei '''Source''' den Namen der Sounddatei auswählen. Damit wäre das Design unserer App bereits fertig.

===Block Editor===

Im Blocks Editor wird die Programmierung der im Design Editor selektieren Komponenten vorgenommen. Die einzelnen Komponenten werden dabei zueinander in Beziehung gesetzt und durch Parameter und Kontrollstrukturen einer logischen Ordnung zugeführt. Jede Komponente besitzt eine Auswahl verschiedener Blöcke. Zusätzlich zu den jeweiligen Funktionen der Blöcke stehen Kontrollstrukturen, wie while- und for-Schleifen, sowie logische und mathematische Funktionen als Programmblöcke zur Auswahl.


<div style="margin-left:100px; margin-top:30px; margin-bottom:30px">
[[Datei:Kruemel2.JPG]]
</div>

Wir werden im Wesentlichen mit zwei verschiedenen Blocks arbeiten - den Built-In Blocks und den Blocks, die für die jeweils ausgewählte Komponente zur Verfügung gestellt werden. In den Built-In Blocks begegnen wir vorwiegend Bausteinen, die wir in Java bereits kennengelernt haben. In den Blocks für die Layout-Komponenten finden wir zum einen sogenannte '''Event Handler''' und zum anderen die '''Getter''' und '''Setter''' für die verschiedenen Properties der einzelnen Komponenten.


====Der Krümelmonster-Block====

Der Block, der unserer App Leben einhaucht, ist sehr einfach. Wir brauchen dazu den ''Event Handler''  '''when''' ''Button'''''.click do''' aus dem Kontextmenü des Buttons und die Methode '''call''' ''Sound'''''.play''' aus dem Kontextmenü der Sound-Komponente. Und damit ist die App auch bereits fertig und kann getestet werden. Zu diesem Zweck gehen wir auf den Menüpunkt ''Build'' und dort auf den Unterpunkt ''App(provide QR code for .apk)''. Nach dem Scannen des QR-Codes kann durch Aufruf des Links die App auf dem Smartphone installiert werden.

===Erweiterungsaufgabe===

* Wir können durch Aneinanderreihung mehrerer Sound-Komponenten auf Knopfdruck einen ganzen Zoo lebendig werden lassen. Die Bilder können wir über den Setter für das Hintergrundbild der Canvas bei Bedarf ändern. Für den Namen der entsprechenden Datei verwenden wir einen Textblock (anfangs leer) aus dem Built-In Block ''Text''.