So nutzen Sie Bubble: Eine Schritt-für-Schritt-Anleitung (Stand 2025)

Sie möchten eine App entwickeln, denken aber, dass Sie dafür Unmengen an Programmierkenntnissen benötigen?

Das ist ein großes Problem.

Viele Nutzer möchten ihre eigenen Inhalte erstellen, ihre eigenen Seiten gestalten und sogar ihre eigenen Apps veröffentlichen, fühlen sich aber dabei blockiert.

Sie möchten KI-Funktionen nutzen und lernen, wie man Dinge macht, indem sie sich Video-Tutorials ansehen, aber das scheint alles noch in weiter Ferne zu liegen.

Und hier ist die Lösung: Bubble. 

Wir zeigen Ihnen, wie man Bubble benutzt.

Blase

Schluss mit dem Kampf mit komplexen Datenbanken! Mit Bubble verwalten Sie die Daten Ihrer App visuell. Starten Sie noch heute mit der Entwicklung Ihrer datengetriebenen App!

Bubble kostenlos testen Lesen Sie die vollständige Rezension

Einrichten Ihres Bubble-Kontos

So gelangen Sie zur Bubble-Website

Der erste Schritt zum Erstellen Ihrer App besteht darin, die Bubble-Website aufzurufen.

Öffnen Sie Ihren bevorzugten Webbrowser – das ist das Programm, mit dem Sie Webseiten ansehen.

Gängige Browser sind Chrome, Firefox, Safari oder Edge. Geben Sie in der Adressleiste oben „bubble.io“ ein und drücken Sie die Eingabetaste.

Sie gelangen so direkt zur Bubble-Startseite.

Halten Sie Ausschau nach einer Schaltfläche mit einer Aufschrift wie „Registrieren“, „Los geht’s“ oder „Konto erstellen“.

Dies ist Ihre Eintrittskarte, um mit dem Bauen zu beginnen.

Kostenloses Konto erstellen

Durch Klicken auf diese Schaltfläche wird der Anmeldevorgang gestartet.

Genau wie bei der Erstellung eines E-Mail- oder Spielekontos müssen Sie einige Informationen angeben.

Bubble benötigt Ihre E-Mail-Adresse, um Sie kontaktieren zu können, und Sie wählen ein Passwort, um Ihr Konto zu schützen.

Wählen Sie ein sicheres Passwort – am besten eine Mischung aus Buchstaben, Zahlen und Symbolen – und notieren Sie es an einem sicheren Ort, damit Sie es nicht vergessen.

Bubble stellt Ihnen möglicherweise noch ein paar andere Fragen, zum Beispiel, wofür Sie Bubble einsetzen möchten.

Keine Sorge; wählen Sie einfach die Option, die Ihren Wünschen am ehesten entspricht.

Die Bubble-Oberfläche verstehen

Sobald Sie angemeldet sind, sehen Sie die Bubble-Oberfläche.

Dies ist der Hauptbildschirm, auf dem Sie Ihre App erstellen. Er mag auf den ersten Blick etwas unübersichtlich wirken, ist aber in Abschnitte unterteilt.

Die wichtigsten Teile sind:

• Die Registerkarte „Design“: Hier erstellen Sie die Seiten Ihrer App visuell. Sie ziehen Elemente wie Schaltflächen per Drag & Drop an die gewünschte Stelle. Text Kästchen und Bilder in diesem Bereich.
• Die Registerkarte „Workflow“: Hier geben Sie Ihrer App Anweisungen. Sie erstellen sogenannte „Workflows“, die wie Anweisungen für Ihre App funktionieren, wenn jemand auf eine Schaltfläche klickt oder etwas eingibt.
• Die Registerkarte „Daten“: Hier verwalten Sie die Datenbank Ihrer App. Eine Datenbank ist wie ein digitaler Aktenschrank, in dem Sie Informationen speichern.
• Der Elementbaum: Hier werden Ihnen alle Elemente angezeigt, die Sie Ihrer Seite hinzugefügt haben, übersichtlich wie in einer Liste angeordnet.
• Der Immobilienredakteur: Wenn Sie auf ein Element klicken, zeigt Ihnen dieser Bereich alle Möglichkeiten an, wie Sie dessen Aussehen und Verhalten ändern können.

Erstellung der ersten Seite Ihrer App

Den visuellen Editor kennenlernen

Im visuellen Editor gestalten Sie das Aussehen Ihrer App.

Es ist wie eine leere Leinwand. Auf der linken Seite des Bildschirms sehen Sie eine Reihe von Werkzeugen, die „Elemente“ genannt werden.

Das sind Elemente, die Sie per Drag & Drop auf Ihre Seite ziehen können. Stellen Sie sie sich wie digitale Bausteine ​​vor.

Sie haben Textfelder für Wörter, Schaltflächen zum Anklicken, Bilder zum Anzeigen von Fotos und vieles mehr.

Hinzufügen von Text und Schaltflächen

Fangen wir mit etwas Einfachem an.

Um Text hinzuzufügen, klicken Sie auf das Element „Text“ und ziehen Sie es in die Mitte Ihrer Seite.

Jetzt können Sie eingeben, was immer Sie wollen. 

Vielleicht so etwas wie „Willkommen in meiner App!“ oder „Klicken Sie auf die Schaltfläche unten.“

Als Nächstes fügen wir einen Button hinzu.

Klicken Sie auf das Element „Schaltfläche“ und ziehen Sie es unter Ihren Text. Sie können den Text der Schaltfläche ändern, indem Sie in das Textfeld innerhalb der Schaltfläche tippen.

Versuchen Sie etwas wie „Start“ oder „Hier klicken“.

Gestaltung des Seitenlayouts

Nun, Sie werden vielleicht feststellen, dass die Dinge ein wenig unordentlich sind.

Keine Sorge, das können wir beheben. Sie können die Elemente per Klick und Drag & Drop verschieben.

Sehen Sie die blauen Linien, die beim Ziehen erscheinen?

Sie helfen Ihnen dabei, die Dinge in Einklang zu bringen. 

Versuchen Sie, Ihren Text und den Button so lange zu verschieben, bis sie gut aussehen.

Sie können die Größe der Elemente auch ändern, indem Sie auf die kleinen Quadrate an den Ecken klicken und sie ziehen. Vergrößern oder verkleinern Sie den Text oder ziehen Sie die Schaltfläche in die Länge.

Hinzufügen grundlegender Funktionen

Arbeitsabläufe verstehen

Okay, wir haben unserer App also ein schönes Aussehen verliehen.

Aber wie schaffen wir das? Tun etwas?

Hier kommen Workflows ins Spiel. Ein Workflow ist wie eine Reihe von Anweisungen.

Es teilt Ihrer App mit, was zu tun ist, wenn jemand auf einen Knopf klickt oder eine andere Aktion ausführt.

Einen Knopf etwas bewirken lassen

Lasst uns unseren Button etwas Einfaches tun lassen.

Klicken Sie auf die von Ihnen erstellte Schaltfläche. Suchen Sie anschließend nach einem Tab mit der Bezeichnung „Workflow“.

Klicken Sie darauf. Nun sehen Sie eine Schaltfläche mit der Aufschrift „Hier klicken, um eine Veranstaltung hinzuzufügen“.

" Ein Ereignis Damit ist der Workflow gestartet. Klicken Sie auf diese Schaltfläche.

Wählen Sie „Elementaktionen“ und klicken Sie dann auf „Klicken“.

Nun müssen wir der App mitteilen, was beim Klicken auf den Button passieren soll.

Lassen Sie uns eine Nachricht anzeigen. Klicken Sie auf „Aktion hinzufügen“.

Sie sehen eine Liste der Funktionen Ihrer App. Klicken Sie auf „Warnung“. Geben Sie im Textfeld die gewünschte Meldung ein. Zum Beispiel: „Sie haben auf die Schaltfläche geklickt!“

Wenn nun jemand auf den Button klickt, erscheint ein kleines Fenster mit Ihrer Nachricht. Das ist Ihr erster Workflow!

Hinzufügen von Eingabefeldern

Eingabefelder sind Bereiche, in denen Benutzer Informationen eingeben können.

Man kann sie sich wie Textfelder vorstellen, in die die Leute ihren Namen, ihre E-Mail-Adresse oder irgendetwas anderes schreiben können.

Um ein Eingabefeld hinzuzufügen, klicken Sie auf das Element „Input“ und ziehen Sie es auf Ihre Seite.

Genau wie bei Text und Schaltflächen kann man es verschieben und seine Größe ändern.

Sie können auch ändern, welche Art von Informationen das Eingabefeld erwartet.

Schauen Sie sich den Eigenschafteneditor an. Sie können auswählen, ob er für Text, Zahlen, E-Mail-Adressen oder Passwörter gilt.

Verknüpfung von Seiten und Navigation

Erstellen mehrerer Seiten

Die meisten Apps haben mehr als eine Seite.

Sie könnten eine Startseite, eine Profilseite oder eine Einstellungsseite haben.

Um eine neue Seite zu erstellen, suchen Sie nach einer Schaltfläche oder einem Link mit der Aufschrift „Neue Seite“ oder etwas Ähnlichem.

Klicken Sie darauf, und Sie erhalten eine neue, leere Seite.

Geben Sie ihm einen Namen, zum Beispiel „Profil“ oder „Einstellungen“.

Verlinkung von Seiten mit Schaltflächen

Jetzt sorgen wir dafür, dass die Nutzer zwischen den Seiten wechseln können.

Das können wir mit Schaltflächen machen. Zurück zur ersten Seite.

Ziehen Sie eine Schaltfläche auf die Seite. Fügen Sie im Workflow der Schaltfläche eine neue Aktion hinzu.

Wählen Sie dieses Mal „Navigation“ und dann „Zur Seite gehen“.

Wählen Sie anschließend die Seite aus, zu der die Schaltfläche die Nutzer weiterleiten soll. 

Wenn nun jemand auf diesen Knopf klickt, wird er auf die andere Seite weitergeleitet.

Erstellen eines Navigationsmenüs

Bei einer großen Seitenzahl kann ein Navigationsmenü hilfreich sein.

Hierbei handelt es sich lediglich um eine Reihe von Schaltflächen am oberen oder unteren Rand Ihrer App, mit denen die Benutzer einfach zwischen den Seiten wechseln können.

Um ein Navigationsmenü zu erstellen, fügen Sie oben auf Ihrer Seite ein „Group“-Element hinzu.

Fügen Sie anschließend einige Schaltflächen innerhalb der Gruppe hinzu.

Verlinken Sie jede Schaltfläche auf eine andere Seite, genau wie zuvor. So können Sie sich ganz einfach in Ihrer App bewegen.

Datenaustausch zwischen Seiten

Manchmal möchte man Informationen von einer Seite auf eine andere übertragen.

Wenn Sie beispielsweise eine Profilseite haben, möchten Sie möglicherweise den Namen des Benutzers von der Startseite an die Profilseite senden.

Dazu müssen Sie sogenannte „Seitenparameter“ verwenden.

Wenn Sie eine Schaltfläche erstellen, die zu einer anderen Seite führt, können Sie der URL einen Parameter hinzufügen. 

Das ist so, als würde man ein kleines Tag hinzufügen, das der Seite mitteilt, welche Informationen angezeigt werden sollen.

Auf der Seite, an die Sie die Daten senden, können Sie den Parameter verwenden, um die Informationen anzuzeigen.

Sie können beispielsweise ein Textelement hinzufügen und es anweisen, den Namen des Benutzers aus dem Parameter anzuzeigen.

Auf der Profilseite wird nun der korrekte Name angezeigt.

Testen und Vorschau Ihrer App

So können Sie Ihre Arbeit in der Vorschau ansehen

Okay, du hast also einige Seiten erstellt und einige Aktionen hinzugefügt. 

Nun möchten Sie sehen, wie Ihre App aussieht und wie sie funktioniert.

Bubble macht es Ihnen leicht. Suchen Sie nach einer Schaltfläche mit der Aufschrift „Vorschau“ oder etwas Ähnlichem.

Es sieht normalerweise aus wie ein Wiedergabeknopf.

Klicken Sie darauf, und Bubble öffnet einen neuen Tab in Ihrem Browser, in dem Ihre App angezeigt wird.

Das ist, als würde man Ihre App live sehen. Sie können Schaltflächen anklicken, in Felder tippen und prüfen, ob alles so funktioniert, wie Sie es geplant haben.

Testen verschiedener Szenarien

Wenn Sie Ihre App in der Vorschau ansehen, klicken Sie nicht einfach wahllos herum.

Überlegen Sie sich verschiedene Möglichkeiten, wie Menschen Ihre App nutzen könnten.

Klicken Sie alle Schaltflächen an. Geben Sie in jedes Feld etwas ein. Beobachten Sie, was passiert, wenn Sie verschiedene Dinge tun.

Wenn Sie beispielsweise eine Anmeldeseite haben, versuchen Sie, ein falsches Passwort einzugeben.

Prüfen Sie, ob Ihre App eine Fehlermeldung anzeigt.

Wenn Sie eine Schaltfläche zum Speichern von Daten haben, überprüfen Sie Ihre Datenbank, um sicherzustellen, dass die Daten korrekt gespeichert werden.

Häufige Probleme beheben

Manchmal läuft es nicht so, wie es soll. Das ist okay.

Das passiert jedem. Wenn man ein Problem findet, nennt man es einen „Bug“. Um einen Bug zu beheben, muss man ihn „debuggen“.

Bubble bietet einige Tools, die Ihnen beim Auffinden von Fehlern helfen können.

Suchen Sie nach einem Tool namens „Debugger“.

Es zeigt Ihnen, was im Hintergrund passiert, wenn Ihre App läuft. Das kann Ihnen helfen herauszufinden, warum etwas nicht funktioniert.

Häufige Probleme sind:

• Die Schaltflächen funktionieren nicht.
• Die Daten werden nicht korrekt gespeichert.
• Seiten werden nicht geladen.
• Fehlermeldungen.

Alternativen zur Blase

Ich suche nach etwas anderem Alternativen zur Blasenbildung im Bereich der No-Code- und Low-Code-App-Entwicklung?

Hier sind einige beliebte Optionen:

• Softr: Diese Plattform eignet sich hervorragend, um Ihre Tabellenkalkulationen und Datenbanken (wie Airtable und Google Sheets) schnell in Webanwendungen und Kundenportale umzuwandeln. Sie ist bekannt für ihre Benutzerfreundlichkeit und die vorgefertigten Vorlagen.
• Buzzy: Eine leistungsstarke No-Code-Plattform, mit der sich komplexe Webanwendungen mit hohem Anpassungsgrad erstellen lassen. Sie verfügt über ein umfangreiches Plugin-Ökosystem, erfordert aber unter Umständen etwas Einarbeitungszeit.
• Gleiten: Dieses Tool setzt auf Einfachheit und ermöglicht die direkte Erstellung mobiler Apps aus Google Sheets. Es eignet sich hervorragend für die schnelle Entwicklung interner Tools und einfacher Anwendungen.
• Softgen: Diese KI-gestützte Plattform zielt darauf ab, die App-Entwicklung zu vereinfachen, indem sie Nutzerbeschreibungen interpretiert und Anwendungen generiert. Sie ist für schnelles Prototyping und iterative Optimierung konzipiert.
• Adalo: Eine No-Code-Plattform mit Fokus auf die Entwicklung nativer mobiler Apps, ausgestattet mit einer benutzerfreundlichen Drag-and-Drop-Oberfläche und einem Marktplatz für vorgefertigte Komponenten.

Abschluss

Du hast es geschafft! Du verstehst jetzt die Grundlagen von Bubble.

Dieser Leitfaden bot Ihnen einen Schnellkurs, aber es gibt noch so viel mehr, was Sie tun können.

Sie benötigen keine einzige Zeile Code.

Wenn Sie direkt mit Ihrem nächsten Projekt loslegen wollen, denken Sie an diese Tipps: Üben Sie ständig.

Scheuen Sie sich nicht zu suchen YouTube oder die Bubble.io-Tutorials für weitere Schritt-für-Schritt-Anleitungen.

Hier finden Sie jede Menge Ressourcen und bewährte Methoden für Anfänger.

Der Bubble-Marktplatz ist ein großartiger Ort, um Hilfe zu finden.

Häufig gestellte Fragen