- Überprüfe verschiedene Komponenten, die du in App Inventor oder Thunkable verwenden kannst
- Finde eine Komponente, die deiner App helfen kann
- Recherchiere ein Tutorial und codiere mindestens eine Komponente in deiner App
Das sind die Aktivitäten für diese Lektion:
SMARTPHONE-KOMPONENTEN
Jetzt ist es an der Zeit, die Komponenten auszuwählen und zu codieren, die deine App verwenden soll. Mit den verschiedenen verfügbaren Komponenten kann deine App viele verschiedene Dinge tun - wähle die für dich passenden aus!
In dieser Lektion lernst du viele Komponenten kennen, die du in deiner App verwenden kannst.
Wahrscheinlich hast du dich schon für eine Plattform entschieden, aber wir werden alle Komponenten für App Inventor und Thunkable auflisten, damit du weißt, welche Komponenten verfügbar sind.
Suche nach den Komponenten, mit denen du die Funktionen, die du für deine App geplant hast, umsetzen kannst.
KOMPONENTENLISTE NACH KATEGORIE
Die folgenden Komponenten gehen über den Standard hinaus Komponenten der Benutzeroberflächedie es dem Nutzer ermöglichen, mit der App zu interagieren.
Diese Liste ist nicht vollständig, deckt aber die meisten der derzeit verfügbaren Komponenten ab. Thunkable und App Inventor fügen laufend weitere Funktionen und Komponenten hinzu.
Die folgenden Informationen sind auch in diesem Dokument enthalten.
| Merkmal Beschreibung | App Inventor | Thunkable |
|---|---|---|
| Ermöglicht es dem Nutzer, Videos aufzunehmen. Du kannst sie für soziale Apps, Videofreigabe-Apps oder für alle anderen Zwecke verwenden, bei denen du möchtest, dass deine Nutzer ein Video aufnehmen. | Camcorder | Kamera |
| Ermöglicht es dem Nutzer, Fotos zu machen. Dies kann für Apps nützlich sein, die es den Nutzern ermöglichen, Profilbilder einzustellen oder Bilder aufzunehmen, die sie teilen oder in einer Galerie speichern können. | Kamera | Kamera |
| Ermöglicht es den Nutzern, ein Bild aus ihrer Fotobibliothek auszuwählen. So können die Nutzer/innen Fotos auswählen, die sie außerhalb deiner App aufgenommen haben. | ImagePicker | Dateien (Fotobibliothek) |
| Ermöglicht es dir, ein Video in die App einzubetten, auf das der Nutzer klicken kann. Das Video muss im Format .wmv, .3gp oder .mp4 vorliegen und darf nicht größer als 1 MB sein. | VideoPlayer | Video |
| Ermöglicht es dir, Text in eine andere Sprache zu übersetzen. Dazu muss deine App einen Internetzugang haben, da sie auf externe Übersetzungsdienste angewiesen ist. | Übersetzer | Rede |
| Ermöglicht die Aufzeichnung eines Tons oder Geräuschs. | SoundRecorder | Ton |
| Diese Audiokomponente spielt einen Ton ab. Sie eignet sich am besten für "lange" Töne, wie Lieder, Reden oder Gedichte. Thunkable hat nur eine Komponente, Sound, für beliebig lange Töne. | Spieler | Ton |
| Sie ist der Komponente Player sehr ähnlich, eignet sich aber am besten für kurze Geräusche, wie z. B. "Dings" für Benachrichtigungen. | Ton | Ton |
| Übersetzt die Sprache des Nutzers in Text. Dies ist besonders nützlich für Apps, die Freisprechfunktionen erfordern. | SpeechRecognizer | Rede |
| Diese Komponente macht das Gegenteil von SpeechRecorder; sie ermöglicht es den Nutzern, Text einzugeben und die App liest ihn laut vor. | TextToSpeech | Rede |
| Du kannst eine JSON-Animation in deiner App abspielen lassen. | Nicht verfügbar | Animation |
| Merkmal Beschreibung | App Inventor | Thunkable |
|---|---|---|
| Zeigt die Kontakte des Nutzers an und ermöglicht es ihm, jemanden aus dieser Liste auszuwählen. | KontaktPicker | Nicht verfügbar |
| Ermöglicht die Eingabe einer E-Mail-Adresse aus der Kontaktliste des Nutzers. | EmailPicker | Nicht verfügbar |
| Ermöglicht es dem Benutzer, eine Telefonnummer aus einer Telefonkontaktliste auszuwählen. | PhoneNumberPicker | Nicht verfügbar |
| Ermöglicht es dir, ein Video in die App einzubetten, auf das der Nutzer klicken kann. Das Video muss im Format .wmv, .3gp oder .mp4 vorliegen und darf nicht größer als 1 MB sein. | VideoPlayer | Video |
| Ermöglicht es dem Nutzer, von deiner App aus einen Anruf zu tätigen. | TelefonAnruf | Teilen |
| Ermöglicht es dem Nutzer, über deine App eine Textnachricht an das Telefon eines anderen Nutzers zu senden. | Texting | Teilen |
| Diese Audiokomponente spielt einen Ton ab. Sie eignet sich am besten für "lange" Töne, wie Lieder, Reden oder Gedichte. Thunkable hat nur eine Komponente, Sound, für beliebig lange Töne. | Spieler | Ton |
| Ermöglicht es den Nutzern, Nachrichten, Bilder oder andere Inhalte in deiner App mit anderen Apps auf dem Telefon zu teilen, z. B. mit E-Mail und Messaging. | Teilen | Teilen |
| Ermöglicht die Kommunikation zwischen deiner App und Twitter. Nutzer können nach Tweets suchen, Nachrichten senden und empfangen, eine Liste der Follower erhalten und vieles mehr. | Nicht verfügbar | |
| Thunkable ermöglicht es dir, Werbung in deine App einzubauen. Alle Apps müssen zuerst von Thunkable genehmigt werden, bevor sie heruntergeladen oder veröffentlicht werden können. | Nicht verfügbar | Anzeigen |
| Merkmal Beschreibung | App Inventor | Thunkable |
|---|---|---|
| Ermöglicht es deiner App, andere Apps zu starten, wie z. B. Kamera oder Google Maps, oder vom Benutzer erstellte Apps, die auf dem Telefon installiert sind. | ActivityStarter | Link öffnen (Kontrollblock) |
| Ermöglicht es dir, eine Karte in deine App einzubinden. App Inventor enthält Komponenten wie Markierungen und Formen, die zu einer Karte hinzugefügt werden können. Diese Funktionen werden im Code von Thunkable hinzugefügt. | Karten | Karten |
| Ermöglicht es Nutzern, Webseiten innerhalb deiner App anzuzeigen. | WebViewer | Web Viewer |
| Ermöglicht deiner App das Senden und Abrufen von Informationen an und von externen Websites. | Web | Web API |
| Ermöglicht es dem Nutzer, von deiner App aus einen Anruf zu tätigen. | TelefonAnruf | Teilen |
| Diese Komponenten ermöglichen es deiner App, sich mit Bluetooth-Geräten zu verbinden. | Bluetooth Client, Bluetooth Server, BlueToothLE (Erweiterung) | Bluetooth Niedrige Energie |
| Diese Audiokomponente spielt einen Ton ab. Sie eignet sich am besten für "lange" Töne, wie Lieder, Reden oder Gedichte. Thunkable hat nur eine Komponente, Sound, für beliebig lange Töne. | Spieler | Ton |
| Dient dazu, Daten aus externen Quellen (Sensoren, Web, Datendateien) zu sammeln und sie in Form von Diagrammen anzuzeigen. | Chart, ChartData2D | Nicht verfügbar |
| Kann für die Verbindung mit seriellen Geräten wie Arduino verwendet werden. | Serial | Nicht verfügbar |
| Ermöglicht es den Nutzern deiner App, sich mit einem Benutzernamen und einem Passwort anzumelden. Dazu musst du zuerst ein Firebase-Konto einrichten. | Nicht verfügbar | Anmeldung |
| Erlaubt es dir, eine PDF-Datei in deine App einzubetten | Nicht verfügbar | PDF-Leser |
| Merkmal Beschreibung | App Inventor | Thunkable |
|---|---|---|
| Kann erkennen, ob das Telefon wackelt und ob es aufrecht oder verkehrt herum gehalten wird. Diese Funktion ist sehr nützlich, wenn du möchtest, dass sich der Bildschirm entsprechend der Art, wie das Telefon gehalten wird, neu ausrichtet, oder wenn du möchtest, dass die App auf Schütteln reagiert. | BeschleunigungsmesserSensor | Beschleunigungsmesser |
| Verwendet den Beschleunigungssensor, um zu messen, wie viele Schritte der/die Nutzer/in mit dem Telefon macht, und kann auch die zurückgelegte Entfernung schätzen. | Schrittzähler | Nicht verfügbar |
| Kann erkennen, ob das Telefon gekippt wird. Er ist genauer als der Beschleunigungssensor und kann messen, wie stark sich die Ausrichtung des Telefons verändert hat. | GyroskopSensor | Gyroskop |
| Wird verwendet, um die magnetische Flussdichte zu messen. Nicht alle Telefone unterstützen diese Funktion. | MagneticFieldSensor | Magnetometer |
| Ermöglicht es deiner App, die aktuelle Zeit abzurufen oder einen Timer zu verwenden. Dies kann nützlich sein, um einen zeitgesteuerten Alarm zu stellen oder einen Timer zu verwenden. | Uhr | Timer |
| Erfasst den Breiten- und Längengrad des Telefonstandorts. Dieser Sensor kann immer dann nützlich sein, wenn du nach Points of Interest in der Nähe des Nutzers suchen musst. | StandortSensor | Standort Sensor |
| Zeigt an, ob sich das Telefon in der Nähe eines Objekts befindet. Sie wird oft verwendet, um festzustellen, ob der Nutzer das Telefon nahe am Ohr hat. Nicht alle Telefone können diese Funktion unterstützen. | ProximitySensor | Nicht verfügbar |
| Ermöglicht es deiner App, einen Barcode zu lesen. | BarcodeScanner | Kamera |
| Misst den Umgebungsluftdruck. | Barometer | Nicht verfügbar |
| Misst die relative Luftfeuchtigkeit der Umgebung. Ungewöhnlich für die meisten mobilen Geräte. | Hygrometer | Nicht verfügbar |
| Misst die Lichtstärke. | LightSensor | Nicht verfügbar |
| Ermöglicht es deiner App, Daten mit anderen mit NFC (Near Field Communication) ausgestatteten Geräten auszutauschen. | NearField | Nicht verfügbar |
| Liefert Informationen über die physische Ausrichtung des Geräts in drei Dimensionen: Roll, Nick und Azimut. | OrientierungsSensor | Nicht verfügbar |
| Misst die Umgebungstemperatur (Außentemperatur). | Thermometer | Nicht verfügbar |
| Merkmal Beschreibung | App Inventor | Thunkable |
|---|---|---|
| Block, mit dem du Informationen innerhalb der App aktualisieren und speichern kannst. Alle Informationen werden gelöscht, wenn die App geschlossen wird. | Variabel | app Variable |
| Ermöglicht deiner App, Informationen lokal auf dem mobilen Gerät zu speichern und zu aktualisieren und sie innerhalb der App zu verwenden. Die Daten können zwischen den einzelnen Durchläufen der App gespeichert und abgerufen werden. In Thunkable können DataViewer und DataViewerGrid mit der Option "Eigene Tabelle erstellen" Daten lokal speichern. | TinyDB | gespeicherte Variable DataViewer Liste Data Viewer Grid |
| Ermöglicht es deiner App, Daten in der Cloud zu speichern, abzurufen und zu aktualisieren, sodass sie von verschiedenen Nutzern der App gemeinsam genutzt werden können. Thunkable bietet Cloud-Variablen mit Firebase. DataViewer und DataViewerGrid können mit Airtable, Google Sheets und Webflow verknüpft werden. App InventorDie Spreadsheet-Komponente verknüpft sich mit Google Sheets. | CloudDB FirebaseDB Tabellenkalkulation | Cloud Variable - (Firebase) DataViewer-Liste DataViewerGrid |
| Merkmal Beschreibung | App Inventor | Thunkable |
|---|---|---|
| Ermöglicht die Kommunikation mit einem KI-Chatbot, dem ChatGPT von OpenAI. | Chatbot | Offene KI-Dienste (Textvervollständigung) |
| Ermöglicht es dir, DALL-E in deine App einzubinden, um Bilder zu erstellen und zu bearbeiten. | Imagebot | Offene KI-Dienste (Bilderzeugung) |
| Ermöglicht es dir, dein eigenes maschinelles Lernmodell (Bild, Ton, Pose) zu erstellen und es in deiner App zu verwenden. | PersonalImageClassifier PersonalAudioClassifier PoseNetExtension TeachableMachine (beachte, dass du für diese alle die Erweiterung hinzufügen musst) | Nicht verfügbar |
| Merkmal Beschreibung | App Inventor | Thunkable |
|---|---|---|
| Fügt einen Bereich auf dem Bildschirm hinzu, in dem Benutzer zeichnen können. Hier kannst du auch Sprites hinzufügen, die du animieren kannst. | Canvas | Canvas |
| Diese Komponenten sind die Elemente, die in einem Spiel oder einer Animation animiert werden können und mit denen interagiert werden kann | ImageSprite Ball |
Sprite |
Du fügst Komponenten im Designer-Fenster von Thunkable hinzu. Du kannst nach einer Komponente suchen, indem du ihren Namen eingibst.
In der neuen Drag-and-Drop-Version von Thunkable werden alle nicht sichtbaren Komponenten auf der Registerkarte "Blöcke" gefunden, nicht im Designer. Wenn du also nach Komponenten suchst und sie nicht findest, versuche, sie auf der Registerkarte "Blöcke" zu suchen.
AKTIVITÄT: EINE NEUE KOMPONENTE LERNEN
Wähle eine Komponente, um mehr darüber zu erfahren
- Wähle mindestens eine Komponente oder einen Sensor aus, den du in deiner App verwenden möchtest.
- Finde die Dokumentation und/oder ein Tutorial, um die Komponente in einer App zu verwenden. Du kannst hier anfangen:
- Programmiere eine App mit dieser neuen Komponente
Mentor Tipp
Beste Praktiken: Die Komponente, die du auswählst, muss nicht perfekt für deine App sein! Solange du etwas über eine neue Komponente lernst, ist das das Wichtigste. Wähle einfach etwas aus, von dem du denkst, dass es funktionieren könnte, und wenn du herausfindest, dass es nicht funktioniert, ist das okay. In der Welt des Programmierens nennen wir diese Recherche "Spike", weil du versuchst, so schnell wie möglich so tief wie möglich zu graben (so wie man eine Eisenbahnspike in den Boden stößt).
Leitfragen an die Schüler: Wenn wir eine App für eine Apple Watch entwickeln würden, welche Komponenten könnten in der Apple Watch enthalten sein? (Herzfrequenzmesser, Gyroskop - für die Schrittmessung, Bluetooth). Wie viele Daten würdest du sammeln? Könntest du diese Daten nutzen, um dein KI-Modell zu trainieren?
Mentorentipps werden durch die Unterstützung von AmeriCorps bereitgestellt.
Eine der besten Fähigkeiten, die du als Programmierer/in lernen kannst, ist es, Ressourcen zu finden, die dir helfen, wenn du nicht weiterkommst oder lernen musst, wie man etwas benutzt.
Diese Aktivität ist eine Übung!
Vielleicht entspricht das nicht genau der App, die du bauen willst, aber das Üben des Programmierens mit Komponenten wird dir helfen, wenn du deine eigene App bauen willst.
REFLEXION
Diese Lektion ist eine Referenz für alle Komponenten, die du zum Erstellen deiner App verwenden kannst. Es ist nicht einfach, ein Tutorial oder eine Dokumentation zu finden, um zu lernen, wie du deine Komponente verwendest!
ÜBERPRÜFUNG DER SCHLÜSSELBEGRIFFE
- Komponenten der Benutzeroberfläche - Standardkomponenten, mit denen ein Benutzer interagieren würde, wie Schaltflächen, Beschriftungen und Textfelder
- Medienkomponenten - Beispiele für Medienkomponenten sind Fotos, Audio und Video.
- Sensoren - verschiedene Arten von Geräten, die in einem Telefon installiert sind und Daten für verschiedene Zwecke sammeln
- Soziale Komponenten - Funktionen, die es den Nutzern ermöglichen, über deine App zu telefonieren, E-Mails zu versenden, SMS zu schreiben und Dinge zu teilen
- Konnektivitätskomponenten - Funktionen, die es deiner App ermöglichen, mit Orten außerhalb deiner App zu interagieren, wie dem Web und anderen Apps
- Speicher-Komponenten - Blöcke und Komponenten, mit denen du Informationen in der App, auf dem Gerät und in der Cloud speichern kannst
- KI-Komponenten - Komponenten, mit denen du maschinelle Lernmodelle oder generative KI-Tools in deiner App nutzen kannst
ZUSÄTZLICHE RESSOURCEN
Andere hilfreiche Tutorialseiten für Thunkable
- draganddropcode.com
- Thunkable Youtube Kanal
- Thunkable Udemy-Kurs von Technovation-Absolventin Meenakshi Nair
Allgemeine Ressourcen
- GirlsCodeIt Technovation-Tutorials
- Vollständige Referenzliste der Komponenten (Google doc zum Ausdrucken)
