Pro­gram­mie­ren mit dem MIT App In­ven­tor 2

Wenn du dich mit Scratch gut aus­kennst, wirst du auch schnell mit dem MIT App In­ven­tor 2 (AI2) zu­recht kom­men.

Wie du dich an­mel­dest, um den AI2 nut­zen zu kön­nen, er­fährst du von dei­ner Leh­re­rin. Sie zeigt dir auch, wie du dei­nen Pro­gramm­code tes­ten kannst. Da gibt es meh­re­re Mög­lich­kei­ten, je nach­dem, wel­che Vor­aus­set­zun­gen ge­ge­ben sind.

Zu­nächst lernst du die Ober­flä­che des AI2 ken­nen.

Von Scratch kennst du eine Bühne, auf der du die Fi­gu­ren (Ob­jek­te) plat­zie­ren kannst, unter der Bühne be­fin­det sich die Fi­gu­ren­lis­te, in der du sehen kannst, wel­che Fi­gu­ren du auf dei­ner Bühne hast, die Block­pa­let­te, in der du alle Blö­cke fin­dest, die du zum Pro­gram­mie­ren brauchst und schließ­lich den Pro­gram­mier­be­reich, in den du die Blö­cke zie­hen kannst, um ein Pro­gramm zu ent­wer­fen. Du kannst gerne Scratch zum Ver­gleich noch ein­mal öff­nen und nach­schau­en.

Im AI2 sieht es ein biss­chen an­ders aus, aber du wirst dich schnell zu­recht fin­den.

Im De­si­gner siehst du fol­gen­de Ober­flä­che:

Ab­bil­dung aus MIT App In­ven­tor von MIT [CC BY-SA 3.0]

Wie der Name App-In­ven­tor schon sagt, pro­gram­mierst du hier im AI2 ei­ge­ne Apps für Smart­pho­nes. Der Screen zeigt genau des­sen Ober­flä­che. Du kannst dort Kom­po­nen­ten aus der Kom­po­nen­ten­pa­let­te ein­fü­gen.

Jede der ein­ge­füg­ten Kom­po­nen­ten siehst du dann auf­ge­lis­tet in der Kom­po­nen­ten­lis­te. Um die Ei­gen­schaf­ten einer Kom­po­nen­te im Ent­wick­lungs­mo­dus (also beim Pro­gram­mie­ren) zu än­dern, wählst du eine Kom­po­nen­te aus und än­derst die ge­wünsch­ten Dinge unter Ei­gen­schaf­ten ganz rechts auf der Ober­flä­che.

Bevor wir genau das bei ein paar Kom­po­nen­ten aus­pro­bie­ren, schau­en wir uns den Block­be­reich an. Du kannst zwi­schen De­si­gner und Block­be­reich um­schal­ten, wenn du die ent­spre­chen­de Schalt­flä­che drückst:

Ab­bil­dung aus MIT App In­ven­tor von MIT [CC BY-SA 3.0]

Im Block­be­reich siehst du fol­gen­de Ober­flä­che:

Ab­bil­dung aus MIT App In­ven­tor von MIT [CC BY-SA 3.0]

Du kennst das schon so ähn­lich aus Scratch. In der Block­pa­let­te kannst du dir ver­schie­de­ne Blö­cke aus­wäh­len und mit ge­drück­ter Maus­tas­te in den Pro­gram­mier­be­reich zie­hen. Dort kön­nen sie wie ge­wohnt an­ein­an­der ge­hängt wer­den.

Wir wol­len das an einem ein­fa­chen Bei­spiel aus­pro­bie­ren. Gehe zu­rück in den De­si­gner und ziehe aus der Kom­po­nen­ten­pa­let­te aus dem obers­ten Be­reich (User In­ter­face) eine Schalt­flä­che (But­ton) mit ge­drück­ter Maus­tas­te auf den Screen. Er wird au­to­ma­tisch links oben ins Eck ge­setzt.

Ab­bil­dung aus MIT App In­ven­tor von MIT [CC BY-SA 3.0]

Siehst du die Ver­än­de­run­gen im De­si­gner?

In der Kom­po­nen­ten­lis­te wird der But­ton als But­ton1 auf­ge­führt und rechts sind Ei­gen­schaf­ten des But­tons an­ge­zeigt.

Gib dem But­ton zu­nächst einen neuen Namen. Hier ist es wich­tig, dass du fol­gen­de Dinge be­ach­test:

1. Der Name einer Kom­po­nen­te darf keine Um­lau­te, keine Leer- und Son­der­zei­chen ent­hal­ten.

2. Der Name jeder Kom­po­nen­te soll­te zu er­ken­nen geben, um wel­che Art von Kom­po­nen­te es sich han­delt. Der Namen eines But­tons könn­te z.B. mit „bt“ be­gin­nen.

3. Um beim Pro­gram­mie­ren die Über­sicht nicht zu ver­lie­ren, soll der Name jeder Kom­po­nen­te sinn­voll sein. Wenn unser But­ton dafür zu­stän­dig ist, die Hin­ter­grund­far­be des Screens zu än­dern, so könn­te er z.B. „bt­Far­be“ hei­ßen.

Die Na­mens­än­de­rung kannst du ganz unten in der Kom­po­nen­ten­lis­te vor­neh­men. Du fin­dest dort einen But­ton mit Auf­schrift „Re­na­me“. Gib dei­nem But­ton den Namen „bt­Far­be“.

Ab­bil­dung aus MIT App In­ven­tor von MIT [CC BY-SA 3.0]

Än­de­re dann seine Ei­gen­schaft „Text“ von „Text for But­ton1“ zu „Farbe än­dern“. Hier darfst du jetzt Um­lau­te, Leer- und Son­der­zei­chen ver­wen­den.

Ab­bil­dung aus MIT App In­ven­tor von MIT [CC BY-SA 3.0]

Ab­bil­dung aus MIT App In­ven­tor von MIT [CC BY-SA 3.0]

Wenn du jetzt in den Block­be­reich um­schal­test, fin­dest du links in der Block­pa­let­te auch dei­nen But­ton wie­der. Auch für ihn wer­den Blö­cke zur Ver­fü­gung ge­stellt.

Wel­che Blö­cke es gibt, siehst du, wenn du dir in der Block­pa­let­te etwas aus­wählst.

Kli­cke auf „bt­Far­be“. Es öff­net sich eine neue Pa­let­te, in der du alle Blö­cke fin­dest, die es spe­zi­ell für dei­nen But­ton gibt. Im obe­ren Be­reich fin­dest du die Er­eig­nis­se, die bei dei­nem But­ton ein­tre­ten kön­nen (hell­braun – die Far­ben kennst du schon aus Scratch), im un­te­ren fin­dest du zu jeder Ei­gen­schaft zwei Blö­cke: einen, der den Wert der Ei­gen­schaft lie­fert und einen, bei dem du den Wert der Ei­gen­schaft än­dern kannst.

Auf­trä­ge:

1. Pro­gram­mie­re das Er­eig­nis, das ein­tritt, wenn auf den But­ton ge­klickt wird, und lasse die Farbe des But­tons und seine Auf­schrift än­dern. Du kennst si­cher die nö­ti­gen eng­li­schen Be­grif­fe und fin­dest auch Text und Far­ben in der Block­pa­let­te.

2. Er­wei­te­re dein Pro­gramm so, dass man sei­nen Vor­na­men in ein Ein­ga­be­feld (Text­Box) ein­ge­ben kann und beim Klick auf einen zwei­ten But­ton, eine Be­grü­ßung in einem Text­feld (Label) er­scheint.
   Wähle wie­der aus­sa­ge­kräf­ti­ge Namen für deine Kom­po­nen­ten. Als Ab­kür­zung für die Text­Box kannst du „tb“ und für das Label „lb“ wäh­len.Um Zei­chen­ket­ten an­ein­an­der­zu­hän­gen, nutzt man eine „join“-Block (Text).

3. In einer Aus­wahl­lis­te (List­Pi­cker - „lp“) soll eine Obst­sor­te ge­wählt wer­den kön­nen. Nach der Aus­wahl wird das ge­wähl­te Obst in einer Bild­kom­po­nen­te (Image - „im“) an­ge­zeigt.
   Die ge­wünsch­ten Bild­da­tei­en fin­dest du im Tausch­ord­ner und kannst sie unter Media hoch­la­den. Die Ele­men­te, die in der Aus­wahl­lis­te an­ge­zeigt wer­den sol­len, gibst du bei der Ei­gen­schaft „Ele­ments­From­String“ durch Komma ge­trennt ein.

Schaue dir jetzt zu­nächst ein­mal die Lö­sungs­blät­ter zu den ers­ten drei Auf­ga­ben an. Viel­leicht ent­deckst du noch etwas, das du brau­chen kannst.

Mache dann mit Auf­ga­be 4 und 5 wei­ter.

1. Viel­leicht hast du dir schon über­legt, wie man Kom­po­nen­ten an­ders an­ord­nen kann. Dazu brauchst du sog. Lay­outs. Teste aus, wie du Kom­po­nen­ten ne­ben­ein­an­der oder un­ter­ein­an­der an­ord­nen kannst. Spie­le auch mit den Ei­gen­schaf­ten Brei­te (width) und Höhe (height) der Kom­po­nen­ten und des Lay­outs

2. Schaue dich jetzt noch ein biss­chen auf der De­si­gner­ober­flä­che um und pro­bie­re wei­te­re Kom­po­nen­ten aus. Schaue dann, was du auf der Block­ober­flä­che zu den Kom­po­nen­ten fin­dest.
   Schrei­be einen Steck­brief einer Kom­po­nen­te. Be­schrei­be, wofür sie ge­nutzt wer­den kann, stel­le ein paar ihrer Ei­gen­schaf­ten vor und be­schrei­be min­des­tens ein Er­eig­nis. Über­le­ge dir dann einen klei­nen Code und füge ihn als Bei­spiel auf dem Steck­brief ein.
   (Nutze ein Text­ver­ar­bei­tungs­pro­gramm und füge Screen­shots (z.B. mit Snip­ping­Tool) ein.)

Ein­füh­rung in AI2: Her­un­ter­la­den [odt][580 KB]

Ein­füh­rung in AI2: Her­un­ter­la­den [pdf][296 KB]

Wei­ter zu Frosch­hüp­fen