Praktisches Beispiel für eine No-Code-App als meine erste Entwicklung

Auf meiner Reise zu No-Code habe ich viel gelernt – Hier noch zu den Artikel zu „Was ist No-Code“ und „No-Code als Helfer für Firmen und Innovation„. Jetzt geht es an die ersten Schritte. Nachdem ich verschiedene No-Code-Plattformen ausprobiert hatte, fiel meine Wahl schließlich auf Bubble. Der erste Eindruck von Bubble war äusserst positiv. Die Plattform begrüßte mich mit einer intuitiven Benutzeroberfläche und klaren Anweisungen. Das Drag-and-Drop-System von Bubble ermöglichte es mir, meine Ideen sofort umzusetzen. Die Entscheidung für Bubble ist natürlich subjektiv, da es viele andere großartige Plattformen gibt. Letztendlich muss man sich jedoch für eine entscheiden.

Für mich spielten bei der Wahl von Bubble die intuitive Benutzeroberfläche, die aktive Community und der Marktplatz für Plugins eine entscheidende Rolle. Außerdem ist Bubble zunächst kostenlos nutzbar, und erst bei der Veröffentlichung einer Anwendung ist ein Abonnement erforderlich.

Erste Schritte

Mein erster Schritt bestand darin, mich mit der Benutzeroberfläche vertraut zu machen. Anschließend schaute ich mir Tutorials auf Bubble und YouTube an – meine aktuelle No-Code-Playlist findet sich hier. Der Vorteil einer Plattform mit vielen Nutzern ist die Fülle an Blogs, Videos und Kursen, die von der Community erstellt werden. Als Nutzer ist man nicht allein auf die Informationen der Plattform angewiesen. Zudem gibt es bereits vordefinierte Bausteine, wie beispielsweise die Registrierungs- und Anmeldefunktion, die direkt implementiert werden können. Dies war für mich hilfreich, um die Funktionsweise besser zu verstehen.

Bubble bietet verschiedene Ebenen an: Auf der Designebene erfolgt die grafische Darstellung (Frontend), auf der Workflow-Ebene (Backend) werden die Funktionen erstellt und verknüpft, und auf der Datenebene befindet sich schließlich die Datenbank. Im Vergleich zur klassischen Programmierung, bei der man den Code auf der Workflow-Ebene schreiben würde, gestaltet sich dies bei No-Code einfacher. Es erforderte dennoch einen kurzen Moment, um mich daran zu gewöhnen. Im Wesentlichen wird ein Element (z.B., ein Button) klickbar gemacht und die entsprechende Funktion hinterlegt. Der Nutzer muss nicht programmieren können, sollte jedoch mit dem logischen Ablauf von Programmen und dem Konzept von If/when/then vertraut sein. Zum Beispiel: Wenn Button Preisliste in der Fussleiste geklickt wird, dann soll der Besucher auf die Unterseite „Preisliste“ weitergeleitet werden.

Konkretes Projekt

Nachdem ich mir einen ersten Überblick verschafft und mich mit den Grundfunktionen vertraut gemacht hatte, entschied ich mich dazu, ein kleines Testprojekt umzusetzen und meine eigene App zu entwickeln – eine Kontaktmanagement-App, die mir schon lange gefehlt hat. Die Idee dahinter war, mich regelmäßiger bei meinen wichtigen Kontakten persönlich zu melden. Diese Idee begleitete mich schon eine Weile, und da die Umsetzung nicht besonders komplex schien, bot sie sich perfekt an, um mich besser mit No-Code vertraut zu machen. Warum eine eigene App? Weil ich fest davon überzeugt bin, dass man durch die praktische Umsetzung schneller und effektiver lernt als durch bloße theoretische Auseinandersetzung mit den Funktionen. Daher empfehle ich jedem, sich ein kleines Übungsprojekt zuzulegen. Falls Sie keine eigene Idee haben, kann auch die Nachprogrammierung einer bestehenden App eine gute Lösung sein.

Umsetzung der eigenen No-Code-Applikation

1. Idee klären und Funktionen definieren

Bevor ich mit der eigentlichen Erstellung meiner App begann, musste ich meine Ideen klären und die Funktionen definieren. Bei der App lag der Fokus auf effizientem Kontaktmanagement. Daher definierte ich wesentliche Funktionen wie Registrierung, Login, Übersicht der Kontakte (nach Interaktion sortiert) und Detailansicht. Daneben erstellte ich Datenfelder für Namen, Kontaktinformationen, Notizen und mehr. Bubble erleichterte diesen Prozess erheblich, indem es mir erlaubte, mein Datenmodell visuell zu gestalten. Außerdem ist es einfach, während der Erstellung weitere Anpassungen und Änderungen vorzunehmen.

2. Funktionalitäten hinzufügen

Bevor ich mich dem Design widmete, erstellte ich die Funktionalitäten. Der eigentliche Spass begann, als ich begann, Funktionalitäten hinzuzufügen. Bubble machte es einfach, die Registrierung und das Login sowie Formulare für neue Kontakte zu erstellen. Schwieriger waren danach die Sortierungsfunktionen, das Anzeigen von Geburtstagen sowie die Einrichtung einer Zahlungsfunktion für eine Premiumversion. Die Möglichkeit einfach Workflows zu erstellen, um bestimmte Aktionen auszulösen, beeindruckte mich und war im Prinzip sehr intuitiv.

3. Testen und Optimieren

Nachdem ich die Grundfunktionalitäten implementiert hatte, war es Zeit für den Testlauf. Bubble ermöglichte es mir, meine App in einem Vorschau-Modus zu überprüfen. Hier stellte ich sicher, dass alles so funktionierte, wie ich es mir vorgestellt hatte. Anschließend nahm ich mir Zeit, um erste Rückmeldungen einzuholen und eventuelle Verbesserungen vorzunehmen.

4. Design und Benutzeroberfläche gestalten

Nun war es an der Zeit, mich um das Design zu kümmern. Leider stellte ich fest, dass dies mehr Zeit in Anspruch nahm als gedacht. Obwohl ich es selbst hätte tun können, holte ich mir aus Zeitgründen externe Hilfe. Bubble ermöglicht das einfache Erstellen von Seiten und das Anpassen des Layouts mit verschiedenen Designelementen. Farben, Schriftarten und andere Elemente lassen sich einfach ändern, und es lassen sich sogar dynamische Inhalte einfügen, um eine ansprechende Benutzeroberfläche zu gestalten. Trotz externer Unterstützung konnte ich bestimmte Anpassungen selbst vornehmen oder ergänzen, was sich als nützlich erwies. Die einfache Handhabung ist vor allem auch für später einen Vorteil, es braucht nicht immer gleich professionelle Hilfe, um ein Textelement oder Bild anzupassen.

Herausforderungen und Lösungen

Während meiner No-Code-Reise mit Bubble stieß ich auf einige Herausforderungen. Das Engagement der Bubble-Community und die umfangreiche Dokumentation halfen mir jedoch, diese Hürden zu überwinden. Auch die Möglichkeit, im Bubble-Forum oder auf YouTube nach Hilfe zu suchen und von anderen No-Coders zu lernen, erwies sich als unschätzbar wertvoll (hier meine aktuelle No-Code-Playlist auf Youtube). Obwohl es beispielsweise ein Stripe Plugin gibt, benötigte ich Hilfe beim korrekten Verknüpfen und der Erstellung von „Kauf Buttons“. Auf YouTube fand ich dazu eine gute Anleitung. Dies zeigt, dass No-Code zwar einfacher als Programmieren ist, jedoch weiterhin ein gewisses technisches Verständnis erfordert und nicht alles mit einem Klick erstellt ist.

Unterstützung von Freelancern

Die Funktionen meiner App hatte ich nun alle erstellt. Anschließend stieß ich auf zwei Probleme: Zum einen hatte ich keine Zeit, selbst ein schönes Design zu erstellen, und zum anderen wollte ich nicht nur eine Web-App, sondern auch eine Native-App für mein iPhone. Gleichzeitig packte mich der Ehrgeiz, meine kleine App effektiv in den App Store zu bringen.

Ist das für eine No-Code-App machbar?

Ja, je nach Plattform ist dies bereits Bestandteil der Plattform, bei Bubble leider nicht.

Aus Zeit- und Komplexitätsgründen holte ich mir Unterstützung von einem Freelancer. Über Freelance-Plattformen lassen sich einfach Experten für Bubble finden. Ich arbeitete mit Monam Khalid zusammen, der mir auch mit der Native-App und dem Einbinden in den Apple- und GooglePlay-Store half. Schlussendlich nutzte ich einen Wrapper für meine Native-App. Im Laufe der Umsetzung kam zudem die Idee auf, die ChatGPT-API für das Einbinden von Catch-Up-Nachrichten zu nutzen, und auch das funktionierte schlussendlich mit Bubble.

Schließlich konnte ich meine App in einer ersten Version als Web-App sowie als Native App live schalten. Ab diesem Zeitpunkt musste ich Bubble natürlich auch kostenpflichtig nutzen. Für alle, die es interessiert, das Ergebnis kann heute unter dem Namen Dunion (web app, iOS or Android) gefunden werden.

Fazit: No-Code und Bubble – Eine Erfolgreiche Kombination

Die Entwicklung meiner Kontaktmanagement-App mit Bubble war nicht nur lehrreich, sondern auch äußerst ermutigend. Die No-Code-Plattform ermöglichte es mir, meine Ideen ohne tiefe Einblicke in den Code umzusetzen. Bubble hat sich dabei als kraftvolles Werkzeug für kreative Köpfe erwiesen, die innovative Anwendungen ohne umfangreiche Programmierkenntnisse schaffen möchten.

Die No-Code-Bewegung hat einen bahnbrechenden Einfluss auf die Art und Weise, wie wir Software erstellen. Die Einfachheit und Zugänglichkeit von Plattformen wie Bubble eröffnen eine Fülle von Möglichkeiten für kreative Köpfe. Meine Reise mit Bubble markiert erst den Anfang, und ich freue mich darauf, weitere No-Code-Plattformen zu erkunden und noch aufregendere Projekte umzusetzen. Ich erkenne besonders das Potenzial in der Erstellung eines Minimal Viable Products (MVP), um einen ersten Marktest mit geringem Budget durchführen zu können, sowie in der Entwicklung interner Hilfstools oder Produktivitätsapplikationen.

Hier geht es zu den ersten drei Teilen der Serie:

1. Was ist No-Code? Einfach Erklärt
2. Warum Hilft No-Code Unternehmen und fördert Innovation?
3. Welche No-Code Plattformen gibt es?

Yves Gogniat

Yves Gogniat ist Experte für Informations- und Technologierecht mit den Schwerpunkten Datenschutz und IT-, Vertrags- und Gesellschaftsrecht. Er verfügt über ein breites Wissen in den Bereichen Blockchain-Technologie, Krypto-Währungen und hat seine Erfahrungen in verschiedenen Kanzleien sowie in der öffentlichen Verwaltung gesammelt.