Test and Share

In dieser Lektion erfährst du abschließend, wie du dein Programm mit “Thunkable Live” auf deinem eigenen Smartphone testest und wie du einen Link erstellst, um deine App mit Freunden zu teilen oder zu einem Hackathon einzureichen. 

In dieser Lektion… 

  • erfährst du, wie du dein Projekt mit der Funktion “Live Test” in der App “Thunkable Live” auf deinem Handy testen kannst. 
  • lernst du, wie du einen Link zu deiner App erstellst, mit dem du die App teilen kannst. 

Bevor du startest noch ein paar Tipps: 

  • Lade dir vorher die App “Thunkable Live” herunter und logge dich in der App mit dem selben Google- oder Apple-Konto ein, mit dem du auch in deinem Browser eingeloggt bist. 
  • Sollte “Thunkable Live” Probleme machen, hilft es manchmal, die App über den App Switcher zu “killen” (iPhone: Doppelklick auf den Homebutten, Android: eigener Button rechts unten => Thunkable Live “wegwischen”) und neu zu starten. 
  • Sollte das Testen mit Thunkable Live nicht funktionieren, kannst du die App auch direkt im Browser über die Funktion “Live Test” mit der Webcam deines PCs/Laptops testen. 

Das kannst du / weißt du nach dieser Lektion: 

Coding

In diesem Modul erfährst du in wenigen einfachen Schritten, wie du deine Image Recognition App programmieren kannst. Du wirst ein Programm erstellen, dass deine Kamera über eine Hardware-Schnittstelle ansteuert und ein Foto an eine KI sendet. Das, was die KI im Foto erkennt, lässt du in der App anzeigen. 

In dieser Lektion 

  •  lernst du die Basics der Programmier-Oberfläche von Thunkable. 
  • … erstellst du ein Programm, das auf einen Button-Klick (Event) reagieren kann. 
  • … fügst du Schnittstellen zu Kamera und KI (Image Recognizer) ein. 
  • … lädst du ein Foto dynamisch in eine Image-Komponente, steuerst die KI an und lädst den Beschreibungstext, den die KI zurücksendet, in ein Label hinein. 

Bevor du startest noch ein paar Tipps: 

  • Mach dir in Ruhe einen Überblick über die Programmierblöcke in Thunkable. 
  • Übe das Einfügen und Löschen von Blöcken in Thunkable. 
  • Schaue dir auch an, wie du Blöcke vergrößern und verkleinern kannst. 
  • Solltest du Zeit haben, kannst du dir auch andere blockbasierte Programmiersprachen ansehen, die bekannteste blockbasierte Programmiersprache ist Scratch (https://scratch.mit.edu/). 

Das kannst du / weißt du nach dieser Lektion: 

  • Du kannst mit Programmierblöcken umgehen und einfache Skripte erstellen. 
  • Du weißt, dass jede Komponente ihre eigenen Blöcke hat. 
  • Du weißt, dass manche Blöcke Input- und Output-Felder haben. 
  • Du kannst Komponenten ansteuern und Inhalte (z.B. Bilder und Texte) dynamisch hineinladen. 

Styling

In dieser Lektion lernst du anhand der Image Recognition App die Grundlagen des Stylings von Komponenten mit den Properties des Design-Oberfläche. 

Du lädst ein Hintergrundbild für deine App hoch, lernst die Preview-Funktion kennen und fügst alle Komponenten hinzu, die du in deiner App benötigst. 

Die drei sichtbaren Komponenten Image, Label und Button stylest du anschließend über die Properties. 

In dieser Lektion lernst du… 

  • … wie du Komponenten mit den Properties stylest. 
  • … wie du ein Hintergrundbild hochladen kannst. 
  • … den Unterschied zwischen Margin & Padding und absoluter & relativer Größe kennen. 
  • … wie du sichtbare und unsichtbare Komponenten zu deiner App hinzufügst. 

Tipps: 

  • Pausiere das Video immer wieder und sieh dir Passagen, die dir zu schnell waren, nochmal an. 
  • Wechsle immer wieder zwischen dem Tab, in dem du dir das Video ansiehst, und dem Tab, in dem du Thunkable geöffnet hast und baue das Layout Schritt für Schritt nach. 
  • Probiere auch eigene Designs aus. Du kannst auch andere Farben, Schriftgrößen etc. verwenden! 
  • Wenn etwas in der Screen-Vorschau nicht richtig aussieht, sieh es dir auch mit der Funktion “Preview” an (mit “Edit” kommst du zurück zur Screen-Vorschau).

Das kannst du / weißt du nach dieser Lektion: 

  • Du weißt, wie du ein Hintergrundbild hochlädst. 
  • Du weißt, dass du bei Bildern auf das Copyright achten musst. 
  • Du kannst sichtbare und unsichtbare Komponenten zu deiner App hinzufügen. 
  • Du kannst Komponenten mit Farben, Höhe, Breite etc. stylen. 
  • Du kannst mit Margin & Padding die richtigen Abstände setzen. 

Intro

In diesem Modul bekommst du eine Vorschau der fertigen Image Recognition App, die du in diesem Kurs programmieren wirst und die legst deine erste App in Thunkable an. 

Außerdem bekommst du einen Überblick über die Bereiche der Design-Oberfläche von ThunkableKomponenten-Hierarchie, Komponenten-Übersicht, Screen-Vorschau & Properties. 

In dieser Lektion 

  • … bekommst du eine Einführung und eine Vorschau der fertigen App. 
  • … erstellst du ein eigenes App-Projekt. 
  • … lernst du die Design-Oberfläche von Thunkable kennen. 

Bevor du startest noch ein paar Tipps: 

  • Registriere dich bei Thunkable mit einem Google- oder Apple-Konto (https://x.thunkable.com/signup) – wenn du weder Google- oder Apple-Konto hast, musst du dir zuerst eines anlegen unter https://accounts.google.com/signup bzw. https://appleid.apple.com/account#!&page=create . 
  • Sobald du bei Thunkable registriert bist, kannst du dich jederzeit unter https://x.thunkable.com/login einloggen. 
  • Schau dir das Video mit der Vollbild-Funktion an, dann siehst du die einzelnen Bedienelement besser! 
  • Öffne Thunkable in einem zweiten Browser-Tab und pausiere das Video immer wieder mal und schau dir die Sachen in Ruhe in Thunkable an. 
  • Maximiere auch deinen Browser, so dass du möglichst viel Platz für Thunkable hast. 

Das kannst du / weißt du nach dieser Lektion: 

  • Du hast einen Überblick über die App bekommen, die du erstellen wirst. 
  • Du kannst dich problemlos in Thunkable einloggen. 
  • Du kannst Projekte erstellen.
  • Du kennst dich grob mit der Design-Oberfläche aus.