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

Transkript

1 TalkToMe: Ihre erste App mit dem App Inventor Dieses Tutorial wird Ihnen dabei helfen, eine sprechende App zu erstellen, die Sätze 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 -1

2 Klicken Sie auf "Continue" um den Splash Screen auszublenden. TalkToMe: Ihre erste App mit dem App Inventor -2

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 -3

4 Sie befinden sich nun im Designer, wo Sie die "Benutzeroberfläche" Ihrer App anlegen. Im Design-Fenster oder einfach nur "Designer" legen Sie die Optik und Haptik Ihrer App sowie die einzelnen Komponenten fest. Sie wählen Bestandteile der Benutzeroberfläche aus, wie etwa Buttons, Bilder und Textfelder sowie Funktionen wie Text-in-Sprache, Sensoren und GPS. Button hinzufügen Unser Projekt benötigt einen Button. Klicken Sie auf das Wort "Button" in der Palette und halten Sie es gedrückt. 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 Gerät TalkToMe: Ihre erste App mit dem App Inventor -4

5 Starten Sie den AICompanion auf Ihrem Gerät Klicken Sie auf das Symbol des MIT AlCompanion auf Ihrem Smartphone oder Tablet, um die App zu starten. HINWEIS: Ihr Telefon und Ihr Computer müssen 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 können, 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, während Sie sie entwickeln, anschauen und testen können, wenn Ihr Gerät 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 -5

6 Holen Sie sich den Connection Code des App Inventor und scannen oder tippen Sie ihn in Ihrer Companion App ein. Wählen Sie "Al Companion" im Menü "Connect" aus. Sie können sich verbinden indem Sie: 1 - den QR Code scannen, indem Sie auf "Scan QR Code" (#1) klicken. Oder 2 - Den Code im nächsten Textfeld eingeben und auf "Connect with Code" (#2) klicken. TalkToMe: Ihre erste App mit dem App Inventor -6

7 App auf dem verbundenen Gerät anzeigen Ob Ihre Verbindung erfolgreich ist, erkennen Sie daran, dass Ihre App auf dem verbundenen Gerät angezeigt wird. Im Moment hat Ihre App lediglich einen Button, also sehen Sie genau das. Wenn Sie dem Projekt weitere Details hinzufügen, werden diese Veränderungen auf Ihrem Smartphone angezeigt. TalkToMe: Ihre erste App mit dem App Inventor -7

8 Text auf dem Button bearbeiten Sie können den Text des Buttons im Fenster "Eigenschaften" bearbeiten. Wählen Sie den Text "Text for Button 1" aus, löschen 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 -8

9 Fügen 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 Benutzeroberfläche der App erscheinen wird. Sie ist eher ein Tool, das in der App verfügbar ist. TalkToMe: Ihre erste App mit dem App Inventor -9

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 erkären wir unserer App, was sie tun soll. Stellen Sie sich den Designer- und den Blöcke-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 -10

11 Der Block Editor Im Block Editor programmieren Sie das Verhalten Ihrer App. Es gibt eingebaute Blöcke, welche Sachen wie etwa Mathe, Logik und Text handhaben. Darunter finden Sie Blöcke, die zu jeder einzelnen Komponente Ihrer App gehören. Um die Blöcke einer bestimmten Komponente im Block Editor anzuzeigen, müssen Sie Ihrer App diese Komponente als erstes mit dem Designer hinzufügen. TalkToMe: Ihre erste App mit dem App Inventor -11

12 Button-Klick-Ereignis erstellen Klicken Sie auf den Button1 Drawer. Klicken Sie auf den Button1.Click do block und halten Sie ihn gedrückt. Ziehen Sie ihn auf die Arbeitsfläche 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 ausgelöst, wenn ein Ereignis vom Benutzer eingeleitet wird (z. B. beim Klicken eines Buttons). TalkToMe: Ihre erste App mit dem App Inventor -12

13 TextToSpeech-Aktion programmieren Klicken Sie auf den TextToSpeech-Drawer. Ziehen Sie den TextToSpeech1.Speak-Block auf die Arbeitsfläche 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, läuft er, wenn der Button in Ihrer App angeklickt wird. Prozesse müssen bei einem Ereignis aufgerufen werden (z. B. beim Button- Klick Ereignis). TalkToMe: Ihre erste App mit dem App Inventor -13

14 Nachrichtenzeile im TextToSpeech.Speak-Block ausfüllen Fast fertig! Sie müssen 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 "Glückwunsch! Sie haben Ihre erste App erstellt" ein. (Sie können auch jeden anderen Satz eingeben, dies ist nur ein Vorschlag.) Probieren Sie es jetzt aus! Gehen Sie zu Ihrem verbundenen Gerät und klicken Sie auf den Button. Gehen Sie sicher, dass die Lautstärke angeschaltet ist. Sie sollten nun hören, wie Ihr Smartphone den Satz laut spricht. TalkToMe: Ihre erste App mit dem App Inventor -14

15 Gehen Sie zurück zum Designer-Tabulator Lassen Sie Ihr Smartphone nun sagen, was immer Sie möchten! Gehen Sie zurück zum Designer-Tabulator, um dies auszuführen. Klicken Sie oben rechts auf "Designer". Fügen Sie Ihrer Benutzeroberfläche ein Textfeld hinzu. Ziehen Sie ein Textfeld aus dem Drawer der Benutzeroberfläche und setzen Sie es über den Button, der sich bereits auf dem Bildschirm befindet. TalkToMe: Ihre erste App mit dem App Inventor -15

16 Holen Sie den Text, der im Textfeld steht. Holen Sie sich die Texteigenschaften der TextBox1. Die hellgrünen Blöcke im TextBox1-Drawer sind die "Holer" und die dunkelgrünen Blöcke sind die "Setzer" für die Komponenten der TextBox1. Das gilt für alle Komponenten im App Inventor. Diese Blöcke werden "Holer" und "Setzer" genannt, da Sie damit den Wert, der für diesen Teil der Komponente, die diese Blöcke verwenden, "holen" oder "setzen" können. 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 -16

17 Legen Sie das Button-Klick-Ereignis so fest, dass der Text, der im Textfeld steht, ausgespochen wird. Ziehen Sie das "Glückwünsch..."-Textfeld heraus und setzen Sie den TextBox1.Text-Block ein. Sie können das rosa Textfeld entfernen, indem Sie es in den Papierkorb rechts unten auf der Arbeitsfläche 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 können wir den Text in einer Variable speichern. Wir können die Variable benennen, indem wir auf den Blockteil "Name" klicken, nachdem sie herausgezogen worden ist. Variablen sollten immer aussagekräftig 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 -17

18 Zunächst benötigt jede Variable einen Wert. Da diese Variable Text speichern wird, beginnen wir mit nichtssagendem Text. Nun, wie verwenden wir die Variable? Die ursprüngliche Zuweisung der Nachricht war wie folgt: Nachricht!TextBox1.Text Da wir nun die Variable texttospeak als Nachricht verwenden werden, müssen 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!textToSpeak Testen Sie Ihre App! Die Funktionalität sollte gleich bleiben. Was passiert, wenn Sie die Reihenfolge der Blöcke "Set" und "Call" vertauschen? Versuchen Sie es und schauen Sie, was passiert! Beschreiben Sie, was passiert und warum. TalkToMe: Ihre erste App mit dem App Inventor -18

19 Speichern Sie alle Sätze, die Sie eingeben. Wie können Sie alle Sätze speichern, die die App sagen soll? Dazu benötigen Sie eine Möglichkeit, den Text, den Sie in das Textfeld eingeben, zu "speichern". Hier sehen Sie eine Liste, wie dies möglich ist. Listen Listen sind genau das, was sie auch sein sollen. Sie behalten den Überblick über bestimmte Gegenstände. Sie möchten beispielsweise die Lebensmittel, die Sie kaufen müssen, in einer Liste festhalten. Wir nennen diese Liste "Lebensmittel". 1. Äpfel 2. Orangen 3. Zitronen Jeder dieser Gegenstände wird "indiziert". Das bedeutet, Sie fragen nach Gegenstand Nr. 1 auf Ihrer Liste und Sie bekommen "Äpfel". Wenn Sie nach Gegenstand Nr. 2 fragen, bekommen Sie "Orangen" usw. Jedes Mal, wenn Sie im App Inventor der Liste einen Gegenstand hinzufügen, "hängen" Sie der Liste etwas an oder Sie fügen am Ende der Liste einen weiteren Gegenstand hinzu. Wollte ich der Liste beispielsweise "Bananen" hinzufügen, würde die endgültige Liste wie folgt aussehen: 1. Äpfel 2. Orangen 3. Zitronen 4. Bananen Das Hinzufügen von Gegenständen zu der Liste erfolgt ohne Unterscheidung. Wenn nämlich ein Gegenstand bereits existiert, können Sie ein Duplikat hinzufügen. Wollte ich der Liste "Orangen" hinzufügen, könnte ich dies tun und würde folgendes erhalten: 1. Äpfel 2. Orangen 3. Zitronen 4. Bananen 5. Orangen Deshalb würde die Frage nach Gegenstand Nr. 2 mit "Orangen" beantwortet werden, die Frage nach Gegenstand Nr. 5 würde jedoch auch mit "Orangen" beantwortet werden. Um dies zu vermeiden, können Sie zuerst überprüfen, ob sich dieser Gegenstand bereits auf der Liste befindet? Dieser Block antwortet mit ja, wenn der Gegenstand bereits existiert und nein, wenn dies nicht der Fall ist. TalkToMe: Ihre erste App mit dem App Inventor -19

20 HINWEIS: Wenn Sie weitere Informationen zu einer Komponente erhalten möchten, können Sie auf das Fragezeichen neben der Komponente in der Palette klicken. Okay! Speichern wir nun alle Sätze in Ihrer App. Erzeugen Sie die nötigen Blöcke, um all Ihre Sätze zu speichern. Testen Sie Ihre App! Hat sich die Funktionalität überhaupt verändert? Können Sie sagen, ob die Werte gespeichert wurden? TalkToMe: Ihre erste App mit dem App Inventor -20

21 Stellen wir sicher, dass das Speichern tatsächlich funktioniert, indem wir ein Ansicht-Feature hinzufügen. Es gibt verschiedene Möglichkeiten um zu sehen, was sich in der Liste befindet: Labels und ListViews. Schauen wir uns nun die ListView-Option an. ListView muss aus dem Designer von der "Benutzeroberfläche"-Palette hinzugefügt werden, da der Benutzer somit in der Lage ist, etwas zu anzusehen. Die Komponente ListView hat die Eigenschaft "Elements". Dadurch speichert die ListView-Komponente eine Liste (wie auf Seite 19 beschrieben) von Gegenständen, die angezeigt werden. Machen wir mit dem Beispiel der Einkaufsliste weiter. Wenn wir ListView1.Elements auf "Lebensmittel" setzen, wird die darunter definierte Liste von dieser Komponente angezeigt werden. Wie unterscheiden sich die TalkToMe-Blöcke für ListView von den anderen? Die Komponente ListView hat außerdem eine Eigenschaft, die sich "Visible" nennt. Setzt man diese Eigenschaft auf "false", wird diese Liste vor dem Benutzer ausgeblendet (auf dem Bildschirm nicht sichtbar). Die ListView- Komponente ist automatisch sichtbar (auf true gesetzt), wenn Sie dies nicht anders bestimmen. Sie haben Ihren Blöcken bereits eine Liste hinzugefügt, die all Ihre Sätze speichert. Wie würden Sie diese mit der ListView-Komponente verwenden, damit Sie sehen, ob all Ihre Sätze richtig gespeichert wurden? TalkToMe: Ihre erste App mit dem App Inventor -21

22 Fügen Sie Ihrer App ein selektives Speicherfeature hinzu. Vielleicht gibt es bestimmte Sätze, von denen Sie möchten, dass das Telefon diese mehrfach wiederholt. Es ist jedoch sehr mühsam, diese Sätze jedes Mal, wenn Sie sie benutzen möchten, erneut einzugeben. Wir haben bereits eine Möglichkeit hinzugefügt, alle Sätze, die hinzugefügt wurden, zu speichern. Was ist jedoch, wenn Sie nur manche speichern möchten? Wie würden Sie solch ein Speicherfeature erstellen? Hier einige Komponenten, die hilfreich sein könnten: Button ListView ListPicker TinyDB Hier einige Blockgruppen, die hilfreich sein könnten: Lists Procedures Logic (true oder false) Beginnen sie damit, zusätzliche Komponenten und Blöcke, die Sie verwenden möchten, aufzulisten. TalkToMe: Ihre erste App mit dem App Inventor -22

23 Skizzieren Sie als nächstes, wie Ihr Bildschirm mit den zusätzlichen Komponenten aussehen wird. TalkToMe: Ihre erste App mit dem App Inventor -23

24 Kodieren und testen Sie dies nun! Wie prüfen Sie nach, dass Sie nur die gewünschten Sätze speichern? Was passiert, wenn Sie nun den gleichen Satz speichern möchten? Wie können Sie dies verhindern? (Hinweis: Schauen Sie in den Blöcken "Lists" und "Control" nach) TalkToMe: Ihre erste App mit dem App Inventor -24

25 Wie benutzerfreundlich ist diese App gerade? Wie können Sie weitere Komponenten im App Inventor verwenden? Versuchen wir nun, die Komponente YandexTranslator hinzuzufügen. Wie würde sich Ihre App verändern, wenn Sie diesen hinzufügten? (Es ist Ihre Entscheidung, Sie sind der Designer!) Zuerst der Prototyp (skizzieren Sie die Bildschirmoberfläche) und denken Sie daran, Sie erhalten weiter Informationen über die Komponente, indem Sie das Fragezeichen neben ihr in der Palette anklicken. TalkToMe: Ihre erste App mit dem App Inventor -25

26 Neu gewonnene Erkenntnisse aus diesem Tutorial. Am Ende dieses Tutorial sollten Sie mit den folgenden Dingen vertraut sein: - Erkunden der Design- und Block-Tabulatoren im App Inventor, um zu erzeugen, was Sie benötigen. - Testen Sie Ihre Features: Es ist großartig, ein Feature zu erschaffen, aber es ist viel wichtiger, dass es auch korrekt funktioniert. Denken Sie immer daran, Ihre Arbeit nachzuprüfen, um gerade festzustellen, dass Sie auch das tun, was Sie denken zu tun. - Schrittweiser Fortschritt: Features werden oft eins nach dem anderen erzeugt. Auf diese Art und Weise finden Sie einfacher heraus, wo das Problem liegt, wenn etwas bei Ihrem Projekt schief geht. TalkToMe: Ihre erste App mit dem App Inventor -26