Tools

Bubble Tool Einführung

Bubble Tool Einführung

Die meisten von uns haben großartige Ideen, aber wir haben keine Zeit, sie zu entwickeln. Wir wissen, dass unsere Ideen besser sind als bestehende Lösungen, aber wir finden einfach keinen Weg, sie in echte Produkte umzuwandeln, die die Menschen lieben und kaufen werden. Es gibt einen einfachen Ausweg aus diesem Dilemma: Bubble, die leistungsfähigste No-Code-Plattform für die Erstellung digitaler Produkte. Mit Bubble kannst du bessere und schnellere Produkte erstellen, unabhängig von deinen Programmierkenntnissen.  

Bubble.io, eine der beliebtesten No-Code-Plattformen, hat sich im Bereich der Anwendungserstellung einen Namen gemacht. Bubble wird von über 700.000 Nutzer*innen verwendet, um Anwendungen ohne Programmierkenntnisse zu erstellen. Beobachter*innen gehen davon aus, dass die Nutzer*innenzahlen mit der zunehmenden Verbreitung des No-Code-Ansatzes noch erheblich steigen werden. Fast jeder Nutzer/jede Nutzerin kann mit Bubble eine Anwendung oder eine Website erstellen. Von den vielfältigen Möglichkeiten und Optionen profitieren sowohl Unternehmen und ihre Abteilungen als auch private Nutzer*innen.  

Bubble.io hat eine intuitive Struktur und einige recht komplexe Möglichkeiten, mit denen sich auch große Projekte realisieren lassen. Der Code ist sauber interpretierbar, nachdem die Codierung vom Programm generiert wurde. Das Angebot von Bubble ist grundsätzlich kostenlos. Verschiedene kostenpflichtige Stufen und Pakete bieten ein breiteres Spektrum an Leistungen und Möglichkeiten.  

Was ist Bubble und wofür wird es eingesetzt?

Die Verwendung eines Baukastensystems zur Erstellung von Websites und Anwendungen ist im Grunde genommen kein neues Konzept. Allerdings ist die Funktionalität vieler Tools in diesem Bereich recht eingeschränkt. Bubble fördert die Idee, dass auch Nicht-Programmierer*innen anspruchsvolle Anwendungen erstellen können.  

Aus diesem Grund verfügt Bubble über eine flexible Schnittstelle, deren Verwendung in mehreren Tutorials behandelt wird. Dank einer lebendigen Community erlernen die Benutzer*innen schnell die Grundlagen der Anwendungserstellung mit Bubble. Das macht den Einstieg in die Nutzung der vielen Funktionen einfach.  

Bubble Kundenportal Vorlage

Der Anwendungseditor, auf den über das Internet zugegriffen wird, dient zum Erstellen, Bauen, Warten und Skalieren des Programms. Wenn eine Anwendung in Bubble entwickelt wird, wird sie in der Cloud-Infrastruktur von Bubble gehostet und kann von überall aus angezeigt werden.  

In Bubble ist es einfach, eine Vielzahl von interaktiven Elementen per Drag & Drop auf den Bildschirm zu ziehen. Zu diesen Komponenten gehören Schaltflächen, Bilder, Filme, Karten und Listen. Über das Menü in Bubble.io kann genau gesteuert werden, wie die Webseite oder Anwendung aussehen und funktionieren soll. Man kann sofort sehen, wie das fertige Produkt zum Zeitpunkt der Erstellung aussehen wird. Auf diese Weise kann man festlegen, wie und wann sich ein Element in einem grafischen Editor verhält. Über das Plug-in-Menü kannst du auf die APIs verschiedener Webdienste zugreifen.  

Mit Bubble kannst du dynamische, mehrbenutzer*innenfähige Programme für Desktop- und mobile Webbrowser erstellen. Einige Benutzer*innen haben Bubble-Webseiten erfolgreich als native Anwendungen verpackt und im Apple App Store und Google Play Store eingereicht.  

Was sind die Vorteile von Bubble?  

Der Hauptvorteil von Bubble besteht darin, dass es auch Nicht-Programmierer*innen möglich ist, robuste Websites und Anwendungen zu erstellen. Die Einstiegshürden für die Entwicklung von Anwendungen werden dadurch gesenkt. Ein Vorteil einer No-Code-Plattform wie Bubble ist ihre einfache Architektur. Die anfängliche Entwicklung reduziert die sonst erhebliche Komplexität der Anwendung erheblich. So verringert sich auch die Komplexität der benötigten Unterstützung. Da der Code durch die automatische Kodierung aufgeräumt bleibt, ist die Wahrscheinlichkeit von Fehlern wesentlich geringer.  

Bubble hilft dabei, Dinge schneller zu erledigen. Mit nur wenigen Klicks kann die eigene App auf den Weg gebracht werden - ganz ohne Programmierkenntnisse oder teure Design-Tools. Du kannst schneller starten, schneller iterieren und die Kosten senken, weil Bubble einfach zu bedienen und leistungsstark ist. Mit Bubble kann man interaktive, mehrbenutzerfähige Anwendungen für Desktop- und mobile Webbrowser erstellen. Es enthält alle Funktionen, die für die Erstellung einer Website benötigt werden, wie z. B. Kodierung, Zusammenarbeit, Projektarbeit in Teams usw.  

Die Entwicklung praktisch jeder Art von Website, Anwendung oder App ist dank der breiten Palette an Funktionen und der hohen Flexibilität von Bubble möglich. Bubble kann auch für die Entwicklung von PWAs (Portable Web Applications) und mobilen Anwendungen verwendet werden. Das Hauptaugenmerk von Bubble liegt jedoch auf der Entwicklung von robusten Webanwendungen.  

Das kann man alles mit Bubble bauen:  

  • Benutzerkonten erstellen;  
  • Speichern, Ändern, Löschen und Abrufen von Daten;  
  • Aktualisierungen in Echtzeit;  
  • Verbindung zu jeder Art von externen Diensten, die eine API bereitstellen (einschließlich Zahlungen, Datenquellen, Authentifizierungsanbieter usw.);
  • Erstellung responsiver Anwendungen, die sich an die Breite des Bildschirms anpassen.  
Und vieles mehr!  

Bubble erstellt bisher noch nicht automatisch native Anwendungen für iOS und Android. Einige Benutzer haben jedoch bereits erfolgreich Apps für beide Stores erstellt. Wir empfehlen, zunächst eine Webversion Ihrer Software als einseitige Anwendung zu erstellen und diese dann in eine native App zu konvertieren, wenn du zunächst eine native Software erstellen und Bubble verwenden möchtest. Das Bubble Forum ist der beste Ort, um dies zu tun, da andere Benutzer dies bereits getan haben.  

Außerdem ist die enorme Flexibilität ein Vorteil. Die vielen verschiedenen Teile und Komponenten können im Wesentlichen nach Belieben erstellt werden. So können die Komponenten je nach Bedarf für die Anwendung verändert werden. Auf den ersten Blick mag es einschüchternd wirken, mit einer leeren Seite zu beginnen, aber Bubble.io hat eine sehr praktische und leicht bedienbare Benutzeroberfläche.  

Wie fange ich mit Bubble an?  

Eine der ständigen Herausforderungen für einen einzelnen Unternehmer oder ein kleines Team ist das einfache Problem, dass man eine Software bauen muss, um das Konzept zu validieren, um die nötigen finanziellen Mittel zu sammeln, um eine Software zu produzieren, um sie zu validieren. Die meisten Ideen bleiben ohne einen technischen Mitbegründer oder die Mittel, um Programmierer zu beschäftigen, genau das. Aber mit Bubble ist die Situation eine ganz andere. Mit Bubble kann man selbst schnell und kostengünstig Software entwerfen und sie mit echten Benutzern testen. Sehen wir uns an, wie du mit Bubble arbeiten und eine hervorragende App für dein Unternehmen erstellen kannst.  

Erstelle eine visuelle Struktur  

Obwohl jeder Benutzer, der mit Bubble arbeitet, seine eigenen Gewohnheiten haben wird, besteht die allgemeine Strategie darin, zunächst die visuelle Struktur der Anwendung zu erstellen, bevor die Workflows definiert werden, die sie programmieren. Workflows sind Ereignisse, die eine Reihe von Aktionen auslösen, während die visuelle Struktur die Sammlung von Seiten und Schlüsselkomponenten ist, mit denen die Benutzer interagieren sollen. Der Klick auf eine Schaltfläche ist ein Beispiel für ein Ereignis. Sobald du weißt, welche Schaltflächen und Eingaben auf der Seite erforderlich sind, ist es einfacher, über diese Ereignisse und ihre Reaktionen nachzudenken.  

Mache aus deinen Ideen einen Entwurf  

In der Regel ist es eine gute Idee, das Aussehen und die Funktionalität der Anwendung zunächst auf Papier zu skizzieren. Unserer Erfahrung nach ist es wichtig, zunächst einige wichtige Screens auf dem Papier zu skizzieren und die relevanten Komponenten darauf zu platzieren, um dann die Prozesse Schritt für Schritt zu entwerfen. Auf diese Weise lässt sich die eigentliche Anwendung viel schneller und einfacher entwerfen.  

Beschreibe eine einfache Datenstruktur  

Die Datenstruktur ist die nächste Komponente der Bubble-Konstruktion. Sie und Ihre Benutzer werden auf eine Datenstruktur angewiesen sein, die es ihnen ermöglicht, Daten zu erstellen, zu lesen, zu aktualisieren und zu entfernen, damit Ihre Anwendung funktioniert. In einer Basisversion von Instagram wären Benutzer und Beiträge enthalten. Ihre Beiträge haben vielleicht einen Titel, eine Beschreibung und ein Bild, aber Ihre Benutzer haben vielleicht nur einen Namen, eine Beschreibung und einen Ort.  

Gehe durch, was sonst noch benötigt wird

Schließlich ist es sehr wahrscheinlich, dass Ihre App auf Dienste von Drittanbietern angewiesen ist, um zu funktionieren, wie z. B. Zahlungslösungen, Datenanbieter und so weiter. Dies wird durch Plugins oder die API Ihrer App erreicht. Diese sollten angesprochen werden, wenn Ihre grundlegende visuelle und Datenstruktur offensichtlich ist. Es ist wichtig zu beachten, dass die Entwicklung einer Anwendung ein iterativer Prozess ist.  

Kontinuierlich iterieren  

Sei dir darüber im Klaren, dass der Prozess der Erstellung einer Anwendung progressiv verläuft. Viele Benutzer beginnen mit der Erstellung eines Wireframes der Seite mit den ersten Teilen und einem einfachen Layout, gehen dann zum Abschnitt Workflow über, um das grundlegende Verhalten festzulegen, und kehren zum Abschnitt Design zurück, nachdem sie ein klareres Verständnis der gewünschten Elemente haben. Du wirst das Design, die Abläufe und die Datenstruktur ändern, wenn sich die Anwendung weiterentwickelt und du sie verbesserst, Funktionen hinzufügst usw.  

Bei der Erstellung der Anwendung werden wahrscheinlich einige Fehler gemacht, da Bubble relativ offen ist, ähnlich wie gelegentlich Fehler in einer Excel-Berechnung entstehen. Dies geschieht während der gesamten Programmierphase.  

Lasse deine Anwendung laufen  

Die Leistungsfähigkeit von Bubble beschränkt sich nicht auf die Erstellung. Sobald die erste Version erstellt ist, wird sie mit tatsächlichen Benutzern und tatsächlichen Daten getestet. Du wirst in der Lage sein, die Anwendung zu überwachen, um sicherzustellen, dass alles wie geplant funktioniert, nachdem sie in Produktion gegangen ist oder wenn sie von tatsächlichen Nutzern verwendet wird. Um dir dabei zu helfen, bietet Bubble einige Überwachungswerkzeuge und Protokolle an. Wenn eine App aktiv ist, sprechen wir vom Run-Modus.  

Ein Überblick über Bubble.io-Vorlagen und wie man eine Vorlage verwendet  

Viele Bubble.io-Vorlagen sind sofort nutzbar und können bei Bedarf einfach mit aktuellen Inhalten befüllt werden. Dies führt jedoch häufig zu einer sehr generisch wirkenden Website oder App, die den eigenen Nutzern kaum einen Vorteil bietet. Denn der Wiedererkennungswert einer Web-App oder Website ist ebenso wichtig. Bubble.io-Vorlagen sind daher eine wichtige Grundlage für die Entwicklung einer eigenen App oder Website. Sie dienen somit als Grundlage für die Erstellung der eigentlichen App oder Website. Nicht kostenlose Bubble.io-Vorlagen sind aufgrund ihrer höheren Komplexität und Funktionalität in der Regel ideal für kommerzielle Produkte, da weniger Arbeit in die Website oder App investiert werden muss.

Marktplatz-Template auf Bubble

Viele der Funktionen und Möglichkeiten von nicht kostenlosen Bubble.io-Vorlagen können mit wenigen Änderungen sofort verwendet werden. Bei kostenlosen Bubble.io-Vorlagen ist jedoch häufig ein größerer Aufwand erforderlich, um sie an die eigenen Bedürfnisse und Anforderungen anzupassen. Ob die Form die beste ist, hängt jedoch stark vom jeweiligen Projekt und den gewünschten Funktionen und Möglichkeiten ab. Eine pauschale Bewertung ist daher nicht möglich. Je komplizierter die eigenen Vorgaben sind, desto schwieriger ist es, eine Vorlage zu finden, die diesen Gedanken und Wünschen vollständig entspricht.  

Die große Auswahl an Produkten bei Bubble.io Templates macht es zudem extrem einfach, akzeptable Lösungen für die eigenen Vorstellungen zu finden und sich inspirieren zu lassen. Nur wenn Ihre Ziele so kompliziert sind, dass sie nicht durch Bubble.io-Vorlagen erfüllt werden können, ist es sinnvoll, ein Projekt von Grund auf neu zu erstellen. Daher sind Vorlagen immer dann eine geeignete Alternative, wenn die Konzepte und Kriterien nicht außergewöhnlich einzigartig sind und einen höheren Aufwand rechtfertigen.  

Bubble Benutzeroberfläche  

Die WYSIWYG-Philosophie (What You See Is What You Get) liegt dem Bubble Visual Editor zugrunde. Die Elemente in festen Layouts können pixelgenau dort platziert werden, wo du sie haben willst, und das Programm wird im Ausführungsmodus auch so aussehen. Man kann Container-Layouttypen miteinander kombinieren, um nahezu jedes Layout für responsive Websites zu erstellen, die sich an die veränderte Bildschirmgröße anpassen. Bei der Erstellung einer Benutzeroberfläche sollten die folgenden Grundlagen beachtet werden.  

Alle Elemente in Bubble haben ein übergeordnetes Element, und einige Elemente können Container sein (zu finden im Container-Bereich der Palette Neues Element). Alle Elemente auf der Seite haben die Seite als übergeordnetes Element, da sie das oberste Element ist. Wenn man den Mauszeiger über einen Container bewegt, um ein Element innerhalb des Containers zu zeichnen, werden die Kanten rot hervorgehoben. Wenn ein Element innerhalb eines Containers platziert wird, verhält es sich sowohl im Bearbeitungs- als auch im Ausführungsmodus genauso wie das übergeordnete Element. Wenn du z. B. ein Element im Editor änderst, bleiben die untergeordneten Elemente im Verhältnis zu ihren übergeordneten Elementen an der gleichen Stelle.  

In Bubble wird jedes Element zunächst anhand der Koordinaten (X, Y) absolut im Verhältnis zu seinem übergeordneten Element positioniert. Dann können die Elemente auf der Seite so angeordnet werden, wie du es für richtig hälst. Dies unterscheidet sich von vielen visuellen HTML/CSS-Editoren, die dich dazu zwingen, Komponenten innerhalb bestimmter Felder auf der Seite zu positionieren. Das gibt einem zwar mehr Freiheit, bedeutet aber auch, dass die Website genau so angezeigt wird, wie sie in einem Webbrowser erscheint. Das Layout der Website wird nicht an Änderungen der Bildschirmgröße oder dynamische Inhalte angepasst. Verwende die Layout-Optionen von Bubble, um Seiten zu erstellen, die reaktionsfähiger oder dynamischer sind.

Build UI/ UX in Bubble

Außerdem können Bubble-Seiten vollständig responsive sein. Dein Website-Layout kann sich an die Breite des Bildschirms anpassen, so dass es auf mobilen Geräten fantastisch aussieht, indem Container-Layout-Optionen kombiniert und kontrastiert werden. Zeile, Spalte und an übergeordnetem Element ausrichten sind die drei Container-Layout-Typen. Außerdem enthalten responsive Container-Layouts Ausrichtungs- und Skalierungsparameter für pixelgenaue Layouts sowie Layout-Einstellungen für alle untergeordneten Komponenten, die das responsive Verhalten beeinflussen. In den folgenden Abschnitten gehen wir auf jede dieser Layout-Optionen ein und erklären, wie sie zu verwenden sind.  

Man kann ein neues Element zu einer Seite hinzufügen, indem man es aus dem visuellen Element-Panel auf der linken Seite (der Palette für neue Elemente) auswählt, es auf der Seite zeichnet und dann den Elementtyp auswählt, den man hinzufügen möchte. Sobald ein Element auf der Seite erstellt wurde, kannst du es durch Ziehen verschieben und seine Eigenschaften durch einen Doppelklick ändern. Während Popups modale Container sind, die am oberen Rand der Seite angezeigt werden und immer auf der Seite zentriert sind, können die meisten Komponenten mit wenigen Ausnahmen verschoben und in der Größe verändert werden. Aus diesem Grund können sie nicht verschoben werden. Man kann die Elementfelder im Eigenschaftseditor bearbeiten, wenn man auf ein Element doppelklickt.  

Erstellen von Arbeitsabläufen  

Bubble basiert auf einem Workflow-gesteuerten Programmierrahmen. Wenn ein Workflow ausgelöst wird, führt er eine Reihe von Aktivitäten aus. Wenn ein Benutzer zum Beispiel auf die Schaltfläche "Speichern" (das Ereignis) drückt, sollte etwas passieren (die Reihe von Aktionen).  

Ein Workflow besteht aus einem Ereignis, das den Prozess auslöst, und einer Folge von Aktivitäten, die darauf folgen. Ein Arbeitsablauf wird durch die Interaktion zwischen einem Ereignis und einer Reihe von Aktionen definiert. Ein Prozess könnte etwa so aussehen: "Wenn die Schaltfläche Anmelden gedrückt wird, melde die Person an, sende eine E-Mail und ändere dann die Seite. Workflows sind in der App seitenabhängig und werden auf der Registerkarte Workflow bearbeitet. Wenn eine Aktivität Informationen zurückgibt, finden Sie diese unter "Ergebnis des vorherigen Schritts".  

Wähle zunächst das Ereignis aus, das den neuen Workflow auslösen soll. In den meisten Fällen wird dies das Anklicken einer Schaltfläche sein, und man muss das Element auswählen, für das dieses Ereignis gilt. Man kann dem Workflow Bedingungen hinzufügen, wenn er nur in bestimmten Situationen ausgeführt werden soll.  

Wenn man ein Ereignis erstellt, erscheint das Workflow-Panel, und man kann die verschiedenen Aktionen nacheinander auswählen. Für jede Aktion müssen die wenigen Felder definiert werden, die für die Ausführung erforderlich sind, z. B. wo die E-Mail für die Aktion "Benutzer anmelden" zu finden ist.  

Workflows und Aktionen können kopiert und eingefügt werden, indem mit der rechten Maustaste daraufgeklickt wird und die entsprechende Option ausgewählt wird. Man kann einzelne Aktionen kopieren und einfügen, aber wenn du ein Ereignis kopierst, wird der gesamte Prozess dupliziert. Es ist zu beachten, dass eine Aktion vor der aktuellen Aktion eingefügt wird, wenn sie über einer anderen Aktion eingefügt wird.  

Die Reihenfolge der Schritte ist wichtig. Wenn man auf den Pfeil klickt, wird das Aktionsmenü angezeigt, in dem man eine Aktion vor der aktuellen Aktion einfügen kann.  

Einige Aktionen können nur auf dem Server, nur auf dem Client oder auf beiden durchgeführt werden. Aktionen, die Daten veröffentlichen oder mit externen Diensten verknüpfen, werden im Allgemeinen in beiden Kontexten ausgeführt. Zu den clientseitigen Aktionen gehören das Aufrufen einer Seite, das Umschalten oder Blättern zu Elementen und das Erstellen von benutzerdefinierten Zuständen. Außerdem werden clientseitige Prozesse nicht in den Serverprotokollen Ihrer Anwendung angezeigt.  

Du kannst deinen Workflow auch über eine API mit Zapier und Make erstellen - wenn du Hilfe benötigst, beraten wir gerne.

Lerne von der Bubble Academy  

Je nachdem, wie vertraut man mit der ereignisgesteuerten Herangehensweise an eine Anwendung ist, kann das Erlernen von Bubble zwischen ein paar Stunden und ein paar Tagen dauern. Anstatt sich sofort in die Entwicklung zu stürzen und zu erwarten, dass man kurz nach dem Einstieg eine funktionierende App erstellen kann, raten wir, Bubble mit einer lernenden Einstellung anzugehen. Du wirst feststellen, wie viel und wie schnell du ohne Code arbeiten kannst, sobald du die Grundlagen und das Tool wirklich verstanden hast.  

Wenn du neu auf der Plattform bist, ist die Bubble Academy ein hervorragender Startpunkt für dich. Sie enthält eine Reihe einfacher interaktiver Aufgaben, die dabei helfen sollen, die grundlegenden Ideen der App-Entwicklung zu verstehen, ohne dass man dafür programmieren muss.  

Insgesamt gibt es 12 kurze Lektionen zu bewältigen. Zu den behandelten Themen gehören die Datenspeicherung, der Aufbau eines Anmeldesystems, die Übertragung von Daten auf Seiten sowie eine abschließende Abschlussklasse, wenn der Kurs beendet ist. Jede Sitzung ist darauf ausgerichtet, dass man sich im Umgang mit Bubble sicher fühlen kann. Alle Workshops beinhalten praktische Erfahrungen mit der Plattform, einschließlich der Erstellung von Mini-Apps, wobei der Kurs etwa 51 Minuten dauert. Man kann die Zeit jedoch auch aufteilen, indem man an einzelnen Sitzungen teilnimmt.

Abschließende Überlegungen eines Bubble-Experten und Partners  

Es macht keinen Unterschied, welche Art von Unternehmen du besitzt. Entscheidend ist, wie effektiv man die Dinge handhaben kann, um einen sicheren und reibungslosen Arbeitsablauf in dem Unternehmen zu gewährleisten.  

Bubble ist ein fantastischer visueller Online-Editor, mit dem man individuelle Webanwendungen entwickeln kann. Überraschenderweise sind für die Nutzung von Bubble keine Programmierkenntnisse oder -erfahrungen erforderlich. Bubble ist für alle geeignet, unabhängig davon, ob sie programmieren können oder nicht. Es spart Zeit, indem es alles, was für die Entwicklung von Webanwendungen benötigt wird, an einem Ort zusammenfasst. Anfänger können sich mit Hilfe des Leitfadens an Bubble herantasten. Erfahrene Benutzer hingegen können ihr Wissen einsetzen, um die Möglichkeiten durch verschiedene Bubble-Expertenfunktionen zu erweitern.  

Makeitfuture kann dir dabei helfen, wenn du einen externen Bubble-Entwickler benötigst, der dir hilft, deine einzigartige Anwendung schnell zu erstellen. Sprich noch heute mit uns über dein Projekt, wenn du eine individuelle, produktionsreife Anwendung entwickeln möchten!  

Automatisieren. Verbessern.
Erfolgreich sein.

Wir beraten dich unabhängig und bieten dir gerne unsere Unterstützung an.

Kostenlose Beratung