Tage
Stunden
Minuten
Sekunden
- % Rabatt - nur bis ⏰

Erste App mit Baukasten erstellen: Schritt für Schritt zum Klick Prototyp

Wenn du schon immer deine eigene App haben wolltest, dann ist heute der perfekte Tag zum Starten! Mit einem App-Baukasten kannst du deine erste App erstellen, ohne komplizierte Programmiersprachen zu lernen. Wir zeigen dir Schritt für Schritt, wie du ein cooles Soundboard oder ein spannendes Quiz als Prototyp baust.

Was du für deine erste App erstellen brauchst

Dein Computer und Internet

Du benötigst einen Computer oder Laptop mit Internetverbindung. Ein Tablet funktioniert auch, ist aber etwas schwieriger zu bedienen. Wichtig ist, dass dein Browser aktuell ist - Chrome oder Firefox funktionieren am besten.

MIT App Inventor läuft komplett im Browser. Du musst also nichts herunterladen oder installieren. Das macht es super einfach, direkt loszulegen und deine erste App zu programmieren.

MIT App Inventor öffnen

Gehe auf die MIT App Inventor Website und klicke auf "Create Apps". Du musst dich mit einem Google-Konto anmelden. Falls du keins hast, können deine Eltern dir dabei helfen, eins zu erstellen.

Nach der Anmeldung siehst du eine Übersicht mit deinen Projekten. Am Anfang ist hier noch nichts - das ändern wir gleich! Die Oberfläche ist auf Englisch, aber keine Sorge: wir erklären dir alles auf Deutsch.

Dein erstes App-Projekt starten

Neues Projekt anlegen

Klicke auf "Start new project" und gib deiner App einen Namen. Für unser Soundboard nehmen wir "MeinSoundboard" oder "CooleSounds". Wichtig: Der Name darf keine Leerzeichen enthalten, nutze stattdessen Unterstriche oder schreibe alles zusammen.

Nach dem Klick auf "OK" öffnet sich der App-Baukasten. Du siehst links eine Palette mit verschiedenen Bausteinen, in der Mitte die Handy-Oberfläche und rechts die Eigenschaften. So funktioniert das MIT App Inventor Tutorial – einfach für jeden!

Der Designer und die Blöcke

MIT App Inventor hat zwei wichtige Bereiche: Den Designer und die Blöcke. Im Designer baust du das Aussehen deiner App - hier fügst du Buttons, Texte und Bilder hinzu. Die Blöcke programmieren, was passiert, wenn jemand auf einen Button drückt.

Oben siehst du zwei Reiter: "Designer" und "Blocks". Wir starten im Designer-Bereich. Später wechseln wir zu den Blöcken, um unserer App Leben einzuhauchen.

Soundboard App Schritt für Schritt

Buttons für deine Sounds hinzufügen

In der linken Palette findest du unter "User Interface" den Button-Baustein. Ziehe ihn einfach auf die Handy-Oberfläche in der Mitte. Wiederhole das für jeden Sound, den du haben möchtest - zum Beispiel vier Buttons für verschiedene Tiergeräusche.

Rechts kannst du jeden Button anpassen. Ändere den Text von "Button1" zu "Hund", "Katze", "Kuh" und "Vogel". Du kannst auch die Farbe und Größe verändern. Experimentiere ruhig – so wird das App-Programmieren zum kreativen Erlebnis!

Sounds hochladen und verbinden

Für die Sounds brauchst du den "Sound"-Baustein aus der "Media"-Palette. Ziehe vier Sound-Bausteine auf die Oberfläche - einen für jeden Button. Die Sounds erscheinen als kleine Symbole am unteren Rand.

Jetzt musst du Sounddateien hochladen. Klicke rechts auf "Upload File" und wähle kurze MP3- oder WAV-Dateien aus. Achte darauf, dass die Dateien nicht zu groß sind - maximal 1-2 Megabyte pro Sound. Dann verbinde jeden Sound mit dem passenden Button.

Deine App testen

Wechsle zum "Blocks"-Bereich. Hier programmierst du, was passieren soll. Für jeden Button brauchst du einen "when Button.Click"-Block. Ziehe diese Blöcke aus der Button-Palette heraus.

// Wenn Button geklickt wird, Sound abspielen
when Button_Hund.Click do:
  call Sound_Hund.Play

Verbinde jeden "when Button.Click"-Block mit einem "call Sound.Play"-Block. Das machst du, indem du die Blöcke wie Puzzleteile zusammensteckst. So einfach ist es, mit einem Baukasten deine erste App zu erstellen!

Quiz App als Alternative

Fragen und Antworten erstellen

Für eine Quiz-App brauchst du andere Bausteine. Ziehe ein "Label" für die Frage und mehrere Buttons für die Antworten auf die Oberfläche. Füge auch ein Label für die Punkte hinzu.

Erstelle deine erste Frage im Label-Text: "Welche Farbe hat die Sonne?" Die Buttons bekommen die Texte "Gelb", "Blau" und "Grün". Ein weiteres Label zeigt die aktuelle Punktzahl an - starte mit "Punkte: 0".

Punkte zählen programmieren

Im Blocks-Bereich erstellst du eine Variable für die Punkte. Ziehe einen "initialize global"-Block heraus und nenne die Variable "punkte". Setze den Startwert auf 0.

// Variable für Punkte
global punkte = 0

// Richtige Antwort geklickt
when Button_Gelb.Click do:
  set global punkte to (get global punkte + 1)
  set Label_Punkte.Text to ("Punkte: " + get global punkte)

Für die richtige Antwort (Gelb) erhöhst du die Punkte um 1. Bei falschen Antworten zeigst du eine Nachricht an oder ziehst Punkte ab. So entsteht nach und nach dein eigenes Quiz!

Häufige Probleme lösen

Wenn Sounds nicht funktionieren

Falls deine Sounds stumm bleiben, prüfe zuerst die Dateigrößen. Sehr große Dateien können Probleme machen. Auch das Dateiformat ist wichtig - MP3 und WAV funktionieren am besten.

Manchmal hilft es, die Sound-Dateien neu hochzuladen. Lösche den alten Sound, lade eine neue Datei hoch und verbinde sie wieder mit dem Button. Achte darauf, dass der Dateiname keine Sonderzeichen enthält.

Buttons reagieren nicht

Wenn Buttons nicht reagieren, fehlen meist die Blöcke im "Blocks"-Bereich. Jeder Button braucht einen "when Button.Click"-Block. Überprüfe auch, ob alle Blöcke richtig zusammengesteckt sind - wie bei einem Puzzle müssen sie perfekt passen.

Manchmal sind die Buttons zu klein oder überlagern sich. Gehe zurück zum Designer und vergrößere die Buttons oder ordne sie neu an. Ein wenig Abstand zwischen den Buttons schadet nie.

Deine App auf dem Handy ausprobieren

MIT App Inventor Companion nutzen

Um deine App auf dem Handy zu testen, lade die "MIT AI2 Companion" App aus dem Google Play Store herunter. Diese App verbindet sich mit deinem Computer und zeigt deine App sofort auf dem Handy an.

In MIT App Inventor klickst du auf "Connect" und dann "AI Companion". Ein QR-Code erscheint, den du mit der Companion App scannst. Sekunden später läuft deine App auf dem Handy - wie Magie!

APK-Datei erstellen

Für eine richtige Installation erstellst du eine APK-Datei. Klicke auf "Build" und dann "App (provide QR code for .apk)". MIT App Inventor erstellt deine App und zeigt einen QR-Code oder Download-Link.

Die APK-Datei kannst du auf Android-Handys installieren. Du musst in den Handy-Einstellungen "Installation aus unbekannten Quellen" erlauben. Deine Eltern können dir dabei helfen.

Nächste Schritte für deine App

Herzlichen Glückwunsch! Du hast deine erste App erstellt. Jetzt kannst du sie erweitern: Füge mehr Sounds hinzu, erstelle schwierigere Quiz-Fragen oder kombiniere beide Ideen zu einer großen App.

In unserem App Tutorial für Kinder findest du noch mehr spannende Projekte und Ideen. Du kannst auch Freunde und Familie bitten, deine App zu testen und Verbesserungsvorschläge zu sammeln.

Experimentiere weiter mit MIT App Inventor. Probiere neue Bausteine aus der Palette aus, ändere Farben und füge Bilder hinzu. Jede App wird dadurch einzigartiger und cooler. Der erste Schritt zum App-Entwickler ist gemacht!

Deine App soll gut aussehen? Lerne alles über App Design für Kinder!

Nach oben scrollen