Return to Video

Talk To Me (Teil 1), MIT App Inventor Tutorial #1

  • 0:02 - 0:12
    ♩♫♪♬
  • 0:12 - 0:15
    Hi! Wilkommen zu App Inventors Hour of Code!
  • 0:15 - 0:19
    Wir sind hier im Zentrum für mobiles Lernen vom MIT. Ich bin Shay.
  • 0:19 - 0:22
    Und ich bin Emily. Heute werden wir dir zeigen, wie du deine erste Andriodapp programmierst.
  • 0:22 - 0:25
    Die heuige App heißt "Talk To Me", weil sie zu einem spricht.
  • 0:25 - 0:29
    Es ist recht einfach: Du drückst einen Knopf und das Smartphone spricht einen Satz laut aus.
  • 0:30 - 0:31
    >Welcome to App Inventor<
  • 0:32 - 0:33
    Kann man es auch andere Sachen sagen lassen?
  • 0:33 - 0:34
    So ziemlich alles!
  • 0:34 - 0:36
    Das würde mir Spaß machen!
  • 0:36 - 0:38
    Okay, fangen wir an...
  • 0:38 - 0:40
    Teil 1: Ein Neues Projekt Erstellen
  • 0:41 - 0:49
    Um eine neue App zu erstellen, klicke auf den "Create"-Knopf auf der App Inventor Webseite "appinventor.mit.edu".
  • 0:49 - 0:56
    Du brauchst einen Googleaccount zum Einloggen. Das ist ein Gmail- oder ein Schulaccount, wenn deine Schule Google Apps verwendet.
  • 0:57 - 0:59
    Der Splashscreen kann vorerst geschlossen werden.
  • 0:59 - 1:03
    Wenn du dich das erste Mal einloggst, hast du noch keine Projekte.
  • 1:04 - 1:06
    Also klicke "New Project" oben links.
  • 1:08 - 1:09
    Unsere erste App heißt "TalkToMe".
  • 1:09 - 1:15
    Projektnamen dürfen keine Leerzeichen enthalten. Also nur "TalkToMe" eintippen - ohne Leerzeichen.
  • 1:15 - 1:20
    Nun bist du im Designfenster. Dort werden die Komponenten und das Layout aufgebaut.
  • 1:20 - 1:26
    Unsere App braucht einen Knopf. Also klicke auf "Button", ziehe ihn hinüber zur Anzeige und lass ihn fallen.
  • 1:26 - 1:32
    Eines der nettesten Eigenschaften von App Inventor ist, dass du die App benutzen kannst, während du sie baust.
  • 1:32 - 1:37
    Lass uns das Smartphone zu der App verbinden, um sie darauf zu sehen und auszutesten, während du sie baust.
  • 1:37 - 1:42
    Solltest du kein Android-Smartphone oder -Tablet haben, kannst du das Tutorial trotzdem machen.
  • 1:42 - 1:48
    Allerdings musst du kurz das Video pausieren und die Instruktionen lesen, wie man einen Andriod-Emulator auf dem Computer startet.
  • 1:48 - 1:54
    Wie das geht und anderes Hilfreiches findest du unter "Guide".
  • 1:54 - 1:57
    Teil 2: Das Smartphone Verbinden
  • 1:57 - 2:05
    Nun, um das Andriod-Smartphone mit App Inventor zu verbinden, gehe zum "Connect"-Menü und wähle "AI Companion".
  • 2:05 - 2:11
    Du brauchst die "App Inventor Companion"-App auf deinem Smartphone oder Tablet. Das ist einfach gemacht:
  • 2:11 - 2:15
    Klicke auf "Need help finding the companion app?".
  • 2:15 - 2:19
    Das führt dich zum Google Play Store zum Download der App.
  • 2:19 - 2:30
    Am Einfachsten geht der Download mit einem QR-Code-Leser, mit dem du den Code einliest. Du kannst auch selbst den Playstore öffnen und nach "MIT AI2 Companion" suchen.
  • 2:31 - 2:38
    Okay, sobald die "MIT AI2 Companion"-App installiert ist, musst du sie auf dem Smartphone starten.
  • 2:40 - 2:48
    Wenn du das Verbindungsfenster in App Inventor geschlossen hast, klicke nochmal auf das "Connect"-Menü und wähle "AI Companion".
  • 2:48 - 2:52
    Das Verbindungsfenster, das aufpoppt, zeigt dir sechs Zeichen und einen QR-Code.
  • 2:53 - 2:58
    In der Companionapp auf dem Smartphone drücke "scan QR code".
  • 3:03 - 3:10
    Hat dein Smartphone keine Kamera, kannst du einfach die sechs Zeichen eintippen und dann "connect with code" drücken.
  • 3:11 - 3:18
    Großartig! Jetzt ist dein Smartphone in echtzeit mit App Inventor verbunden! Du solltest den Knopf sehen, den du schon zur App hinzugefügt hast.
  • 3:18 - 3:23
    Von jetzt an, wirst du alle Änderungen an der App sofort auch auf dem Smartphone wiederfinden.
  • 3:24 - 3:30
    Sieht aus wie Magie, stimmts? Naja, wenn du die Verbindung zu App Inventor trennst, siehst du auch die App nicht mehr auf dem Smartphone.
  • 3:30 - 3:38
    Damit die App auf dem Smartphone bleibt oder auf dem eines Freundes, musst du sie erst verpacken. Aber dazu kommen wir später.
  • 3:39 - 3:42
    Teil 3: Die App Designen
  • 3:42 - 3:47
    Bemerke, dass der Knopf, den wir hinzugefügt haben, sagt "Text for Button1". Lass und das ändern.
  • 3:48 - 3:54
    Hier drüben, rechts ist der Abschnitt für Eigenschaften. Dort können die Eigenschaften aller Komponenten in deiner App gesetzt werden.
  • 3:55 - 4:01
    Um den Text auf dem Knopf zu verändern, klicke auf "Text" und tippe "Talk To Me".
  • 4:01 - 4:07
    Schau, auf dem verbundenen Smartphone ändert sich auch der Text. Cool, oder?
  • 4:09 - 4:14
    Super. So. Jetzt brauchen wir nur noch eine weitere Komponente bevor wir in die Blöcke gehen und programmieren.
  • 4:14 - 4:23
    Gehe zu "Media" und ziehe eine "TextToSpeech"-Komponente heraus: Klicke darauf, ziehe sie herüber zur Appansicht und lass' sie fallen.
  • 4:23 - 4:29
    Du wirst feststellen, dass sie nach unten fällt, zu den unsichbaren Komponenten. Jetzt haben wir alle Komponenten.
  • 4:29 - 4:35
    Nun, da wir die Komponenten für unsere App gesetzt haben, müssen wir angeben, was die Komponenten tun sollen. Dafür klicken wir auf "Blocks".
  • 4:37 - 4:40
    Teil 4: Programmieren Mit Blöcken
  • 4:40 - 4:42
    Und jetzt sind wir im Blockeditor.
  • 4:42 - 4:47
    Der Blockeditor ist, wo man die Blocke zusammenklickt, um das Verhalten seiner App festzulegen.
  • 4:47 - 4:50
    Wir möchten die App auf einen Knopf-Klick reagieren lassen.
  • 4:51 - 4:55
    So, gehe zu "Button1" und sieh alle Blöcke für Knöpfe.
  • 4:55 - 4:58
    Wähle "Button1.Click" and wirf es auf die Arbeitsfläche.
  • 4:58 - 5:03
    Nun haben wir die Blöcke, um der App zu sagen, was zu tun ist, wenn der Knopf geklickt wird.
  • 5:03 - 5:09
    Gehe zur "TextToSpeech"-Komponente, klicke darauf und sieh die Blöcke für Text-zu-Sprache.
  • 5:09 - 5:16
    Wähle den Aufruf "TextToSpeech1.Speak" und ziehe ihn hinüber zum "when Button1.Click"-Block.
  • 5:16 - 5:21
    Es passt wie angegossen und du hörst einen Klack, wenn die Blöcke verschmelzen. Ich liebe den Klang!
  • 5:21 - 5:25
    Nun müssen wir noch eine Sache hinzufügen bevor wir die App testen.
  • 5:25 - 5:30
    Beachte, dass wir eine leere Buchse hier haben. Wir müssen dem "Speak"-Block sagen, was er sagen soll.
  • 5:30 - 5:41
    Um das zu tun, gehe zur "Text"-Schublade unter den "Built-in"-Blöcken. Nimm einen leeren Textblock und bringe ihn herüber. Klicke es in den "TextToSpeach1.Speak"-Block.
  • 5:41 - 5:44
    Ein neues befriedigendes Klicken.
  • 5:44 - 5:51
    Nun klicke auf den leeren Textblock und tippe "Herzlichen Glückwunsch! Du hast deine erste App erstellt!".
  • 5:52 - 5:54
    Teil 5: Teste Deine App
  • 5:54 - 5:58
    Okay, du kannst die App jetzt testen! Gehe zu deinem Smartphone und drücke auf den Knopf.
  • 5:58 - 6:00
    >Herzlichen Glückwunsch! Du hast deine erste App erstellt!<
  • 6:01 - 6:05
    Wenn du irgendwelche Probleme mit dem Tutorial hattest, kannst du die schriftliche Version auf der App Inventor Seite ansehen.
  • 6:05 - 6:07
    - Das war's?
    - Äh ja...
  • 6:07 - 6:09
    Okay, bis bald!
  • 6:09 - 6:10
    Warte, komm zurück!
  • 6:10 - 6:14
    Schön, ich dachte die App wäre ein bisschen cooler - Ich kann mit mir selbst reden...
  • 6:14 - 6:19
    Geduld, junger Padawan! Nun da wir wissen, wie App Inventor benutzt wird, sind die Möglichkeiten endlos.
  • 6:19 - 6:22
    - Können wir es auf Schütteln reagieren lassen?
    - Ja
  • 6:22 - 6:24
    - Oder den Nutzer seinen eigenen text eingeben lassen?
    - Absolut!
  • 6:24 - 6:27
    Tatsächlich, im unserem nächsten Video, ist das genau was wir tun werden.
  • 6:27 - 6:33
    Wir machen es so, dass, wenn jemand das Smartphone schüttelt, es redet, und Nutzer ihre eigenen Texte eingeben können.
  • 6:33 - 6:34
    Stark! Ich kann es kaum erwarten!
  • 6:34 - 6:44
    ♩♫♪♬
Title:
Talk To Me (Teil 1), MIT App Inventor Tutorial #1
Description:

Das ist das erste einer Serie von Einführungstutorials, die zeigen, wie man Apps mit App Inventor baut. Dieses erste Video zeigt dir, wie du das Smartphone reden lässt, indem du Text-Zu-Sprache verwendest.
more » « less
Video Language:
English
Duration:
06:47

German subtitles

Revisions

Our website uses cookies for analysis purposes.