TalkToMe: Ihre erste App mit dem App Inventor - Technovationt · PDF fileTalkToMe: Ihre erste...

Click here to load reader

  • date post

    07-Feb-2018
  • Category

    Documents

  • view

    213
  • download

    1

Embed Size (px)

Transcript of TalkToMe: Ihre erste App mit dem App Inventor - Technovationt · PDF fileTalkToMe: Ihre erste...

  • TalkToMe: Ihre erste App mit dem App Inventor -1

    TalkToMe: Ihre erste App mit dem App Inventor Dieses Tutorial wird Ihnen dabei helfen, eine sprechende App zu erstellen, die Stze auf Anforderung speichern kann.

    Loggen Sie sich im App Inventor mit einem Gmail- (Google-) Benutzernamen und Passwort ein.

    Gehen Sie direkt auf ai2.appinventor.mit.edu, oder klicken Sie auf den orangefarbenen Button "Create" auf der Webseite des App Inventor.

    Verwenden Sie einen existierenden Gmail-Account oder schulbezogenen Google-Account, um sich unter ai2.appinventor.mit.edu, einzuloggen.

  • TalkToMe: Ihre erste App mit dem App Inventor -2

    Klicken Sie auf "Continue" um den Splash Screen auszublenden.

  • TalkToMe: Ihre erste App mit dem App Inventor -3

    Beginnen Sie ein neues Projekt.

    Nennen Sie das Projekt "TalkToMe" (ohne Leerzeichen!)

    Geben Sie den Projektnamen ein (Unterstriche sind erlaubt, Leerzeichen nicht!) und klicken Sie auf OK.

  • TalkToMe: Ihre erste App mit dem App Inventor -4

    Sie befinden sich nun im Designer, wo Sie die "Benutzeroberflche" Ihrer App anlegen.

    Im Design-Fenster oder einfach nur "Designer" legen Sie die Optik und Haptik Ihrer App sowie die einzelnen Komponenten fest. Sie whlen Bestandteile der Benutzeroberflche aus, wie etwa Buttons, Bilder und Textfelder sowie Funktionen wie Text-in-Sprache, Sensoren und GPS.

    Button hinzufgen Unser Projekt bentigt einen Button. Klicken Sie auf das Wort "Button" in der Palette und halten Sie es gedrckt. Ziehen Sie Ihre Maus auf den Viewer. Lassen Sie den Button los und ein neuer Button erscheint im Viewer.

    Starten Sie den AlCompanion auf Ihrem Gert

  • TalkToMe: Ihre erste App mit dem App Inventor -5

    Starten Sie den AICompanion auf Ihrem Gert

    Klicken Sie auf das Symbol des MIT AlCompanion auf Ihrem Smartphone oder Tablet, um die App zu starten. HINWEIS: Ihr Telefon und Ihr Computer mssen beide mit dem gleichen WLAN-Netzwerk verbunden sein. Gehen Sie sicher, dass die WLAN-Funktion Ihres Telefons angeschaltet ist und Sie mit dem lokalen WLAN-Netzwerk verbunden sind. Wenn Sie sich nicht via WLAN verbinden knnen, besuchen Sie die Setup-Einstellungen auf der Webseite des App Inventor, um zu erfahren, wie Sie sich mit einem USB-Kabel verbinden.

    Verbinden Sie den App Inventor mit Ihrem Smartphone um live zu testen

    Das wohl tollste am App Inventor ist, dass Sie die App, whrend Sie sie entwickeln, anschauen und testen knnen, wenn Ihr Gert verbunden ist. Wenn Sie ein Smartphone oder Tablet mit Android-Betriebssystem haben, befolgen Sie bitte die unten genannten Schritte.

  • TalkToMe: Ihre erste App mit dem App Inventor -6

    Holen Sie sich den Connection Code des App Inventor und scannen oder tippen Sie ihn in Ihrer Companion App ein. Whlen Sie "Al Companion" im Men "Connect" aus. Sie knnen sich verbinden indem Sie: 1 - den QR Code scannen, indem Sie auf "Scan QR Code" (#1) klicken. Oder 2 - Den Code im nchsten Textfeld eingeben und auf "Connect with Code" (#2) klicken.

  • TalkToMe: Ihre erste App mit dem App Inventor -7

    App auf dem verbundenen Gert anzeigen

    Ob Ihre Verbindung erfolgreich ist, erkennen Sie daran, dass Ihre App auf dem verbundenen Gert angezeigt wird. Im Moment hat Ihre App lediglich einen Button, also sehen Sie genau das. Wenn Sie dem Projekt weitere Details hinzufgen, werden diese Vernderungen auf Ihrem Smartphone angezeigt.

  • TalkToMe: Ihre erste App mit dem App Inventor -8

    Text auf dem Button bearbeiten

    Sie knnen den Text des Buttons im Fenster "Eigenschaften" bearbeiten. Whlen Sie den Text "Text for Button 1" aus, lschen Sie diesen und geben Sie "Talk To Me" ein. Sie werden merken, dass sich der Text auf dem Button Ihrer App augenblicklich ndert.

  • TalkToMe: Ihre erste App mit dem App Inventor -9

    Fgen Sie zu Ihrer App die Komponente Text-in-Sprache hinzu

    Gehen Sie auf den Media Drawer und ziehen Sie die TextToSpeech-Komponente heraus. Setzen Sie sie in den Viewer. Sie werden merken, dass sie in der Auswahl "Non-visible components" angezeigt wird, da diese nicht auf der Benutzeroberflche der App erscheinen wird. Sie ist eher ein Tool, das in der App verfgbar ist.

  • TalkToMe: Ihre erste App mit dem App Inventor -10

    Wechseln zum Block Editor

    Es ist nun an der Zeit Ihrer App zu sagen, was sie zu tun hat! Klicken Sie auf "Blocks", um in den Block Editor zu gelangen. Bisher haben wir nur festgelegt, wie die App aussehen soll. Mit dem Block Editor erkren wir unserer App, was sie tun soll. Stellen Sie sich den Designer- und den Blcke-Button wie Tabulatoren vor -- Sie verwenden sie, um sich in den beiden Ebenen des App Inventor hin und her zu bewegen.

  • TalkToMe: Ihre erste App mit dem App Inventor -11

    Der Block Editor

    Im Block Editor programmieren Sie das Verhalten Ihrer App. Es gibt eingebaute Blcke, welche Sachen wie etwa Mathe, Logik und Text handhaben. Darunter finden Sie Blcke, die zu jeder einzelnen Komponente Ihrer App gehren. Um die Blcke einer bestimmten Komponente im Block Editor anzuzeigen, mssen Sie Ihrer App diese Komponente als erstes mit dem Designer hinzufgen.

  • TalkToMe: Ihre erste App mit dem App Inventor -12

    Button-Klick-Ereignis erstellen

    Klicken Sie auf den Button1 Drawer. Klicken Sie auf den Button1.Click do block und halten Sie ihn gedrckt. Ziehen Sie ihn auf die Arbeitsflche und setzen ihn dort ab. Dieser Block erledigt den Vorgang der vor sich geht, wenn dieser Button in Ihrer App angeklickt wird. Er wird "Event Handler" genannt. Alle Event Handler haben im AI2 eine hellbraune/braune Farbe. Event Handler werden ausgelst, wenn ein Ereignis vom Benutzer eingeleitet wird (z. B. beim Klicken eines Buttons).

  • TalkToMe: Ihre erste App mit dem App Inventor -13

    TextToSpeech-Aktion programmieren

    Klicken Sie auf den TextToSpeech-Drawer. Ziehen Sie den TextToSpeech1.Speak-Block auf die Arbeitsflche und setzen Sie ihn dort ab. Dieser lilafarbene Block ruft einen "Prozess" im App Inventor auf. Durch diesen Prozess spricht das Telefon. Da dieser sich im Button.Click befindet, luft er, wenn der Button in Ihrer App angeklickt wird. Prozesse mssen bei einem Ereignis aufgerufen werden (z. B. beim Button-Klick Ereignis).

  • TalkToMe: Ihre erste App mit dem App Inventor -14

    Nachrichtenzeile im TextToSpeech.Speak-Block ausfllen

    Fast fertig! Sie mssen dem TextToSpeech.Speak-Block nun mitteilen, was er sagen soll. Um das zu tun, klicken Sie auf den Text-Drawer, ziehen Sie einen Textblock heraus und setzen Sie ihn in die Zeile "message".

    Klicken Sie auf den Textblock und tippen Sie "Glckwunsch! Sie haben Ihre erste App erstellt" ein. (Sie knnen auch jeden anderen Satz eingeben, dies ist nur ein Vorschlag.)

    Probieren Sie es jetzt aus!

    Gehen Sie zu Ihrem verbundenen Gert und klicken Sie auf den Button. Gehen Sie sicher, dass die Lautstrke angeschaltet ist. Sie sollten nun hren, wie Ihr Smartphone den Satz laut spricht.

  • TalkToMe: Ihre erste App mit dem App Inventor -15

    Gehen Sie zurck zum Designer-Tabulator Lassen Sie Ihr Smartphone nun sagen, was immer Sie mchten! Gehen Sie zurck zum Designer-Tabulator, um dies auszufhren. Klicken Sie oben rechts auf "Designer".

    Fgen Sie Ihrer Benutzeroberflche ein Textfeld hinzu. Ziehen Sie ein Textfeld aus dem Drawer der Benutzeroberflche und setzen Sie es ber den Button, der sich bereits auf dem Bildschirm befindet.

  • TalkToMe: Ihre erste App mit dem App Inventor -16

    Holen Sie den Text, der im Textfeld steht. Holen Sie sich die Texteigenschaften der TextBox1. Die hellgrnen Blcke im TextBox1-Drawer sind die "Holer" und die dunkelgrnen Blcke sind die "Setzer" fr die Komponenten der TextBox1. Das gilt fr alle Komponenten im App Inventor. Diese Blcke werden "Holer" und "Setzer" genannt, da Sie damit den Wert, der fr diesen Teil der Komponente, die diese Blcke verwenden, "holen" oder "setzen" knnen.

    Sie wollen, dass Ihre App das sagt, was sich derzeit im TextBox1.Text-Block befindet (z. B. was im Textfeld steht). Ziehen Sie den TextBox1.Text-Holblock heraus.

  • TalkToMe: Ihre erste App mit dem App Inventor -17

    Legen Sie das Button-Klick-Ereignis so fest, dass der Text, der im Textfeld steht, ausgespochen wird. Ziehen Sie das "Glckwnsch..."-Textfeld heraus und setzen Sie den TextBox1.Text-Block ein. Sie knnen das rosa Textfeld entfernen, indem Sie es in den Papierkorb rechts unten auf der Arbeitsflche ziehen.

    Speichern Sie den Text als Variable. Der Text, den die App sprechen wird, ist nun eine Variable oder ndert sich mit der Verwendung der App. Deshalb knnen wir den Text in einer Variable speichern. Wir knnen die Variable benennen, indem wir auf den Blockteil "Name" klicken, nachdem sie herausgezogen worden ist. Variablen sollten immer aussagekrftig benannt werden, damit Sie, wenn Sie in 3 Monaten diese App erneut aufrufen, wissen, worum es sich bei dieser Variable handelt. Nennen wir diese Variable "textToSpeak".

  • TalkToMe: Ihre erste App mit dem App Inventor -18

    Zunchst bentigt jede Variable einen Wert. Da diese Variable Text speichern wird, beginnen wir mit nichtssagendem Text.

    Nun, wie verwenden wir die Variable? Die ursprngliche Zuweisung der Nachricht war wie folgt:

    Nachricht!TextBox1.Text

    Da wir nun die Variable textToSpeak als Nachricht verwenden werden, mssen wir TextBox.1Text mit der Variable ersetzen und der Variable den Wert TextBox.1Text zuweisen. Jedes Mal, wenn der Button geklickt wird, wird der Wert der Variable aktualisiert und die korrekte Nachricht wird an TextToSpeech weitergeleitet.

    textToSpeak!TextBox1.Text

    Nachricht!textToS