Inhaltsverzeichnis[Ausblenden][Zeigen]
- Was ist Bubble.io?
- Was ist visuelle Programmierung?
- Welche Arten von Apps können Sie entwickeln?
Erstellen einer App mit Bubble (Tutorial)+-
- 1. Erste Schritte
- 2. Datenbank konfigurieren
- 3. Erstellen von Arbeitsabläufen
- 4. Erstellen einer Nachrichtenstory
- 5. Anzeige dynamischer Inhalte im Feed
- 6. Senden von Daten zwischen Seiten
- 7. Anzeigen dynamischer Inhalte auf der Story-Seite
- 8. Anzeigen des Artikels des Herausgebers
- 9. Verleger folgen
- 10. Zusätzliche Funktionen, die Sie hinzufügen können
- 11. Das Ergebnis
- Vorteile
- Nachteile
- AnzeigenPreise
- Zusammenfassung
In letzter Zeit interessiere ich mich für andere Webentwicklungsansätze als HTML, CSS und JavaScript.
Angesichts der wachsenden No-Code-Landschaft war es nicht überraschend zu entdecken, dass es mehrere Alternativen zu den eher standardmäßigen Ansätzen für die Entwicklung von Webanwendungen gibt.
Sie müssen mit einigen der bekannteren CMS-Plattformen wie WordPress vertraut sein, die ziemlich codefrei sind. Wenn Sie jedoch Web-Apps erstellen möchten, können solche Plattformen restriktiv erscheinen.
Hier stelle ich Ihnen Bubble.io vor, eine leistungsstarke No-Code-Tool mit dem Sie Web-Apps wie nie zuvor erstellen können.
Lassen Sie es uns eingehend untersuchen!
Was ist Blase.io?
Bubble ist eine nicht-technische Plattform, die eine visuelle Programmiersprache und eine Web-Entwicklungs-Framework.
Benutzer können diese Programmierwerkzeuge verwenden, um einzigartige Online-Anwendungen zu erstellen, Datenbanken und Prozesse zu ändern, Seitenkomponenten (Bilder, Text, Eingabeformulare, Karten) hinzuzufügen und ihre Schnittstellen zu gestalten.
Es ist ein Marktplatz, auf dem Sie ideale Vorlagen, Plugins und Dienste entdecken können, die Ihnen beim Erstellen starker Produkte helfen.
Ohne ein typisches Programmier-Framework einrichten zu müssen, können Sie mit Bubble alles von einem Marktplatz über ein soziales Netzwerk bis hin zu einem CRM (Customer Relationship Management) erstellen.
Es gibt Kunden die Möglichkeit, ihre Apps mit einer benutzerfreundlichen Oberfläche und einem Point-and-Click-Editor zu erstellen und zu personalisieren.
Sie können es in Verbindung mit Diensten verwenden, die eine REST-API bereitstellen, wie z. B. Facebook, SQL, Analysen und Zahlungs-Apps. Es ermöglicht Benutzern, Zeit für die Verbesserung der Funktionalität und des Erscheinungsbilds ihrer Anwendungen aufzuwenden, damit sie auf Tablets und Mobilgeräten gut aussehen.
Es ist für alle Unternehmensgrößen geeignet, von klein über mittel bis groß; und zugänglich für Windows, Mac und das Web.
Was ist visuelle Programmierung?
Visuelle Programmierung ist im Wesentlichen das, wonach es sich anhört. Anstatt manuell durch Schreiben von Code zu programmieren, tun Sie dies grafisch, indem Sie Komponenten anklicken und in Seiten ziehen.
Lassen Sie sich von dieser kurzen Beschreibung nicht täuschen.
Es ist nicht wie jede andere Cookie-Cutter-App oder Website-Erstellungstool, auf das Sie online gestoßen sind. Bei den meisten App-Buildern müssen Sie sich auf grundlegende Vorlagen verlassen und haben eine extrem eingeschränkte Funktionalität. Sie erlauben Ihnen nur, bestimmte Arten von Apps zu entwickeln und Ihre Personalisierung einzuschränken.
Obwohl das Konzept der „visuellen Programmierung“ und des „Ziehens und Ablegens“ in Bubble einfach erscheint, ist es enorm leistungsfähig.
Seine visuelle Programmierumgebung ermöglicht es Ihnen nicht nur, Objekte wie Text, Grafiken, Eingaben und mehr auf eine Seite zu ziehen, sondern Sie können auch konfigurieren, was diese Elemente tun.
Was macht Blase?
Das Hauptziel von Bubble ist es, jedem das Erstellen von Web-Apps zu ermöglichen, ohne Code schreiben zu müssen.
Während dies jedoch für eine leicht zu merkende Zielaussage sorgt, lässt es einen wesentlichen Teil der Geschichte aus. Der Weg von der Idee zum Markt ist komplizierter als nur das Erstellen von Codezeilen.
Bei der konventionellen Entwicklung ist ein Team hochqualifizierter Fachleute erforderlich, die an bestimmten Abschnitten der Erstellung, des Wachstums und der Wartung der App arbeiten. Bedenken Sie.
Was braucht jede App?
- Sicherheit, um sicherzustellen, dass niemand unbefugten Zugriff auf Daten hat.
- Eine Datenbank zum Speichern und Abrufen von Informationen wie Artikeln, Artikeln und Social-Media-Updates.
- Skalierbarkeit, um die ungehinderte Entwicklung der Benutzerbasis und des Datenvolumens zu ermöglichen.
- Eine angenehme Benutzeroberfläche, um die App attraktiv und einfach zu bedienen zu machen.
- Integration mit verschiedenen Diensten und Systemen.
Bubble ersetzt weit mehr als einen Programmierer. All diese Dienste werden optisch ansprechend und hochautomatisiert bereitgestellt, so dass es denkbar, wenn nicht sogar einfach ist, alles von einer einzigen Person zu erledigen.
Während frühere No-Code-Plattformen versucht haben, die Codierung auf verschiedene Weise zu ersetzen. Sein Konzept besteht darin, so viele Barrieren wie möglich zu beseitigen, damit eine App den Markt erreicht, und alles von reaktionsschnellem Design und Animationen bis hin zu Hosting, Versionsbereitstellung, Sicherheit und Datenbankoperationen abwickelt.
Verwenden des API-Konnektors, um Bubble mit anderen Diensten zu verbinden
Sein API Connector ist wahrscheinlich das wichtigste Plugin auf dem Markt. Wie der Name schon sagt, können Sie sich mit anderen Apps und Diensten verbinden, um Aktionen und Daten zu teilen.
Anstatt sich mit den technischen Einzelheiten der Funktionsweise zu befassen, betrachten Sie diese Beispiele dafür, was APIs leisten könnten:
- Zugang erhalten zu Maschinelles Lernen Methoden wie Bilderkennung und Übersetzung.
- Holen Sie sich die neuesten Wetterinformationen von überall auf der Erde.
- Wenn ein Ereignis in Bubble ausgelöst wird, werden Informationen systemübergreifend ausgetauscht, wie z. B. die Erstellung eines Leads in Ihrem CRM oder ein Termin in Ihrem Google-Kalender.
- Buchen Sie einen Flug oder einen Hotelaufenthalt überall auf der Welt.
- Rufen Sie die Telefonnummer, den Standort, Fotos, das Logo und Bewertungen für jedes Unternehmen auf Google Maps ab.
Verwendung von Plugins zur Verbesserung nativer Funktionen
Technisch gesehen mischt es JavaScript-Codemodule, CSS und HTML zu einem funktionalen Knoten. Die in JS.JSON geschriebene Anwendung dient als Grundlage für ihre eigene Sprache.
Obwohl Sie diese Terminologie nicht vollständig verstehen müssen, um Apps zu erstellen, weisen sie auf eine wichtige Tatsache hin: Sie hält sich an bekannte und anerkannte Webstandards und ermöglicht es Entwicklern, ihre native Funktionalität erheblich zu verbessern.
Dies ist bereits auf der Plugin-Site zu sehen, wo Hunderte von kostenlosen und kostenpflichtigen Erweiterungen für die Grundfunktionalität verfügbar sind. Es bedeutet auch, dass es viele JavaScript-Experten gibt, die bereit sind, eine maßgeschneiderte Lösung für Sie zu entwickeln, wenn Sie einen Punkt erreichen, an dem die grundlegenden Funktionen nicht mehr ausreichen.
Welche Arten von Apps können Sie entwickeln?
Sie können eine Vielzahl von Anwendungen erstellen, von denen einige unten aufgeführt sind.
- Apps für spezialisierte Märkte mit einer Community.
- Apps für Jobbörsen in verschiedenen Branchen.
- Software für Krankenhauspersonal.
- Point-of-Sale-Software für physische Geschäfte.
- Software für Zahnarztpraxen mit einem White Label.
- Persönliche Geschäftsinventar- und Kundendienstsoftware.
- Makler- und kundenorientierte Immobilienaggregationsanwendungen.
- Apps für Veranstaltungen und Kurse auf dem Markt (und sogar Boote).
- Berufszertifikate erfordern interne Prüfungsanträge.
- Bewerbungen für Ersthelfer.
- Mitarbeiterverwaltungssoftware für den internen Gebrauch.
Um ehrlich zu sein, ist die Plattform nicht darauf ausgelegt, alles zu können. Es ist möglicherweise nicht die ideale Wahl, wenn Sie eine Spiele-App mit komplexer Grafik und Bewegung entwerfen. Außerdem müssen Sie, wenn Sie eine native App (eine für App Stores) erstellen, diese in einen anderen Drittanbieterdienst integrieren.
Hauptfunktionen
Bubble ist vollgepackt mit Funktionen. Wir werden sie hier nicht alle abdecken können, aber wir werden versuchen, die wichtigsten abzudecken.
1 Plugins
Es ermöglicht Ihnen, Funktionen aus zahlreichen Tools im Internet in Ihre zu integrieren Web-Anwendung. Wenn Sie beispielsweise möchten, dass sich Ihre Benutzer mit ihrem Facebook-Konto anmelden, können Sie dazu das Facebook-Plugin verwenden.
2. Entwickeln
Es ermöglicht Ihnen, dynamische Mehrbenutzer-Apps für Desktop- und mobile Webbrowser sowie alle Tools zu erstellen, die zum Erstellen einer Website ähnlich wie Instagram oder Airbnb erforderlich sind.
3. Formular Design
Sie können mobilfreundliche Layouts und dynamische Inhalte erstellen, um einem Produkt den letzten Schliff zu geben, das Sie gerne anderen zeigen werden.
4. Hosting
Sie müssen sich nie wieder um Serverwartung, Infrastruktur oder Betrieb kümmern.
Es kümmert sich auf sichere Weise um die Bereitstellung und das Hosting für Sie. Die Anzahl der Benutzer, das Verkehrsaufkommen und die Datenspeicherung sind unbegrenzt.
Erstellen einer App mit Bubble (Tutorial)
Lassen Sie uns nun in Aktion treten und untersuchen, wie Sie eine Nachrichten-App auf Bubble erstellen können.
1. Erste Schritte
Um zu beginnen, müssen Sie zuerst Registrieren Sie sich für ein kostenloses Konto bei Bubble.
Wir beginnen mit der Verwendung des visuellen Designtools von Bubble, um unsere Plattformen zu gestalten Benutzerschnittstelle. Einige der wichtigsten Seiten, die enthalten sein sollten, sind unten aufgeführt:
- Upload-Seite – Eine Website, auf der Publisher Artikel entwickeln und verbreiten.
- Startseite – Eine Liste der kürzlich veröffentlichten Artikel wird angezeigt.
- Erzählseite – Eine Seite, auf der jede einzigartige Geschichte zu finden ist.
- Verlagsseite – Eine Seite, auf der eine Liste mit Geschichten eines bestimmten Verlags angezeigt wird.
2. Datenbank konfigurieren
Nachdem Sie das Display Ihres Produkts gestaltet haben, können Sie sich darauf konzentrieren, die Datenfelder zu erstellen, die Ihre Anwendung unterstützen. Wir verwenden diese Felder, um die Ihrem Produkt zugrunde liegenden Arbeitsabläufe zu verknüpfen.
Für dieses Beispiel werden wir zwei unterschiedliche Datentypen für jede Nachricht einrichten. Ein Datentyp enthält die grundlegenden Fakten einer Geschichte (z. B. Titel, ausgewähltes Bild und Herausgeber), während der andere Datentyp größere Inhaltsdateien wie die gesamte Erzählung selbst enthält.
Indem wir sie als diskrete Datentypen definieren, können wir nur die erforderlichen Informationen laden, wenn sie erforderlich sind, wodurch die Menge an Material begrenzt wird, die der Bubble-Editor produzieren muss.
Die folgenden Datentypen und Felder werden erstellt:
Datentyp: Mitglied
Felder:
- Name und Vorname
- Die folgenden Herausgeber sind eine Liste von Herausgebern. Wichtiger Hinweis: Wenn Sie ein Feld als Liste basierend auf einem bestimmten Datentyp erstellen, können Sie alle wichtigen Datenfelder mühelos integrieren, ohne zusätzliche Felder erstellen zu müssen.
Datentyp: Geschichte
Felder:
- Titel
- Ausgewähltes Bild
- Schriftsteller
- Kategorie
- Publisher
- Story-Inhalt
Datentyp: Story-Inhalt
Felder:
- Story-Inhalt
Datentyp: Publisher
Felder:
- Name und Vorname
- Logo
- Follower
3. Erstellen von Arbeitsabläufen
Nachdem Sie das Design und die Datenbank Ihrer Anwendung organisiert haben, ist es an der Zeit, alles zusammenzustellen und zum Laufen zu bringen.
Workflows sind die primäre Methode, um dies in Bubble zu erreichen.
Jeder Workflow findet statt, wenn ein Ereignis eintritt (z. B. wenn ein Benutzer auf eine Schaltfläche klickt) und führt dann als Reaktion darauf eine Reihe von „Aktionen“ aus (z. B. „Benutzer anmelden“, „Änderung an der Datenbank vornehmen“ usw.). .
4. Erstellen einer Nachrichtenstory
Das erste Feature, das wir anbieten, ist ein Tool, mit dem Publisher Nachrichten schreiben und auf der Website veröffentlichen können.
Auf der Upload-Seite beginnen wir damit, viele Eingabeelemente aufzunehmen, die für die Eingabe von Daten in unsere Datenbank verwendet werden. Beispiele für diese Felder sind Texteingaben, ein Bild-Uploader und eine Dropdown-Auswahl.
Wir müssen auch das Publisher-Dropdown-Menü anpassen, um eine Liste dynamischer Optionen anzuzeigen. Da jeder neue Artikel der Liste aller Artikel eines Herausgebers hinzugefügt wird, müssen wir einen bestehenden Herausgeber aus unserer Datenbank auswählen.
Beim Einstellen dieses Dropdown-Menüs wählen wir die Art der Optionen aus, um ein Publisher zu sein.
Anschließend scannt unsere Datenquelle unsere Datenbank und gibt eine Liste aller aktuellen Veröffentlichungen zurück. Schließlich ändern wir die Quellenunterschrift so, dass sie den Namen des Herausgebers enthält.
Sobald ein Autor die erforderlichen Informationen in jeden Eintrag auf der Seite eingegeben hat, klickt er auf die Schaltfläche „Veröffentlichen“, um eine neue Geschichte zu erstellen.
Dann erstellen Sie in Ihrer Datenbank ein neues Ding, dessen Datentyp auf „Narrative“ gesetzt ist.
Dann müssen wir damit beginnen, unsere Datenbank mit den erforderlichen Feldern zu füllen. Verbinden Sie jede der On-Page-Eingabekomponenten mit ihren jeweiligen Datenbankspalten.
Zuerst erstellen wir den Story-Inhaltstyp, der schließlich mit der Geschichte selbst verknüpft wird.
Als Nächstes fügen wir diesem Verfahren eine weitere Stufe hinzu und erzeugen etwas anderes – diesmal die Geschichte selbst.
Es ist möglich, diese Daten mühelos in Ihre gesamte Plattform zu integrieren, indem Sie das erste narrative Material integrieren, das wir mit dieser Geschichte entwickelt haben.
Jedes Mal, wenn dieser Vorgang aktiviert wird, wird eine neue Geschichte erstellt.
5. Anzeige dynamischer Inhalte im Feed
Sobald Publisher damit beginnen, Material in Ihre mobile App hochzuladen, müssen wir damit beginnen, die Logik auf Ihrer Homepage zu erstellen, die jeden Artikel als dynamische Liste anzeigt. Dies kann erreicht werden, indem unser sich wiederholendes Gruppenelement verwendet wird.
Wiederholungsgruppen arbeiten mit Ihrer Datenbank, um eine Liste mit dynamischem Material zu präsentieren und zu aktualisieren.
Beim Anwenden einer Wiederholungsgruppe müssen Sie das Element zunächst mit einem Datentyp in Ihrer Datenbank verknüpfen.
In diesem Fall kategorisieren Sie das Material als Geschichten. Sie müssen auch die Datenquelle als Liste aller Tabellen in Ihrer Datenbank angeben.
Wir werden diese wiederkehrende Gruppe auch nach dem Startdatum jeder Geschichte anordnen und die Liste in umgekehrter chronologischer Reihenfolge anzeigen. Sie können jetzt damit beginnen, das dynamische Material zu organisieren, das in jedem Raster erscheint.
Füllen Sie einfach die oberste Zeile mit dem entsprechenden Material aus, das Sie anzeigen möchten, und dieses leistungsstarke Element füllt die verbleibenden Spalten mit Daten aus Ihrer aktuellen Datenbank.
6. Senden von Daten zwischen Seiten
Es ist auch möglich, Ereignisse innerhalb jeder Zeile einer sich wiederholenden Gruppe zu konstruieren. Bei der Entwicklung von Navigationsfunktionen für Ihre Plattform wird sich diese Funktionalität als nützlich erweisen.
Die Homepage unserer Nachrichten-App zeigt lediglich eine Vorschau jeder Geschichte, einschließlich des Herausgebers, eines Beitragsbildes und des Titels der Geschichte.
Es zeigt jedoch nicht den gesamten Inhalt eines Artikels an, bis der Benutzer sich zur Story-Seite durchklickt. Wir verwenden unseren Workflow-Editor, um Daten zwischen Seiten zu übertragen, um dieses Material anzuzeigen.
Erstellen Sie zunächst einen Prozess, der einen Benutzer zur Story-Seite weiterleitet, wenn auf das Bild einer Story geklickt wird.
Verwenden Sie ein Navigationsereignis, um einen Benutzer während der Entwicklung dieses Prozesses auf eine andere Seite weiterzuleiten.
Wählen Sie aus dem Dropdown-Menü als Zielseitentyp die narrative Seite aus. Sie müssen dieser Seite dann weitere Informationen geben, damit der Bubble-Editor versteht, welche einzigartige Geschichte angezeigt werden soll.
Die Informationen, die Sie angeben müssen, stammen aus der aktuellen Zellengeschichte.
7. Anzeigen dynamischer Inhalte auf der Story-Seite
Sie können diese Ereignisdaten einfach abrufen und das relevante Material aus der Erzählung anzeigen, wenn ein Benutzer zu einer bestimmten Story-Seite weitergeleitet wird.
Um diese Funktion zu erstellen, müssen Sie zunächst überprüfen, ob der Zielseitentyp mit der Dateneigenschaft übereinstimmt, die Sie über den Workflow bereitstellen. In diesem Fall müssen Sie die Story-Seite mit einer Story-Eigenschaft verknüpfen.
Es kann einfach geeignete Daten aus vorhandenen Quellen abrufen und bereitstellen, indem die Art des Inhalts auf einer Seite kategorisiert wird.
Sie können jetzt damit beginnen, dynamisches Material in Felder einzufügen, die Informationen aus einer einzelnen Tabelle anzeigen.
8. Anzeigen des Artikels des Herausgebers
Nach dem Lesen eines Nachrichtenartikels kann ein Benutzer wählen, ob er den gesamten Artikelkatalog des Herausgebers untersuchen möchte. Wenn Sie einen Publisher-Datentyp entwickelt haben, ist das Erstellen einer separaten Seite für Publisher so einfach wie das Erstellen unserer ursprünglichen Homepage.
Auf dieser Seite müssen wir zunächst den Seitentyp auf Publisher festlegen.
Kopieren Sie dann die Wiederholungsgruppe von der Startseite und bearbeiten Sie die Einstellungen.
In diesem Fall sucht die Datenquelle unserer Wiederholungsgruppe nach allen vorhandenen Artikeln, deren Herausgeber der aktuelle Seitenherausgeber ist.
9. Verleger folgen
Die dritte grundlegende Funktion, die wir für unseren MVP entwickeln werden, ist die Möglichkeit, einem Publisher auf der Plattform zu folgen. Wir fügen einen Follow-Button auf der Publisher-Seite hinzu. Wenn wir auf dieses Symbol klicken, starten wir einen neuen Prozess, der etwas ändert.
Durch Hinzufügen des Herausgebers der aktuellen Seite zu seiner Liste der folgenden Veröffentlichungen wird der aktuelle Benutzer geändert.
Anschließend müssen wir die Follower-Liste des Herausgebers der aktuellen Seite aktualisieren, indem wir den aktuellen Benutzer hinzufügen.
10. Zusätzliche Funktionen, die Sie hinzufügen können
Jetzt, da Sie mit dem Erstellen benutzerdefinierter Datenfelder und dem Präsentieren dynamischer Informationen vertraut sind, können Sie mit den Erlebnissen, die Sie für Ihr Produkt erstellen, kreativ werden. Sie können auch Folgendes einbeziehen:
- Erstellen Sie eine Funktion, mit der Benutzer Inhalte zum späteren Lesen speichern können.
- Stellen Sie am Ende jedes Artikels eine wiederkehrende Sammlung vorgeschlagener Artikel bereit.
- Erstellen Sie ein Suchtool, mit dem Benutzer neue Inhalte auf der Website finden können.
11. Das Ergebnis
Ihre endgültige App wird in etwa so aussehen.
Vorteile
- Die Fähigkeit, sich mit vielen APIs und Plugins zu verbinden.
- Eine einfach zu bedienende No-Code-Anwendung.
- Davon profitieren auch Menschen ohne Programmiererfahrung.
- Design-Tools, die sowohl vielseitig als auch leistungsstark sind.
- Schnelle Abfrageverarbeitung.
Nachteile
- Erhöhte Zuverlässigkeit.
- Die Datenverarbeitungsgeschwindigkeit ist langsam.
- Die Leistung ist eingeschränkt.
AnzeigenPreise
Mit dem kostenlosen Plan können Sie sich über die Plattform informieren und Ihre Anwendung entwickeln.
Bezahlte Abonnements beinhalten Extras wie White-Labeling, eine benutzerdefinierte Domain, Zugriff auf die Bubble-API und reservierte Serverkapazität, die unten aufgeführt sind.
- Persönlich – 25 $/Monat (jährlich bezahlt) oder 29 $/Monat (monatlich bezahlt).
- Professional – 115 $/Monat (jährlich bezahlt) oder 129 $/Monat (monatlich bezahlt).
- Produktion – 475 $/Monat (jährlich bezahlt) oder 529 $/Monat (monatlich bezahlt).
Beginnen Sie kostenlos mit Bubble
Zusammenfassung
Bubble ist eine ausgezeichnete Alternative zum Erstellen von Webanwendungen, die nur Informationen anzeigen können oder eine minimale Benutzeroberfläche haben.
Es ist recht einfach zu bedienen und die von Bubble bereitgestellten Tutorials sind äußerst hilfreich. Sein visueller Online-Editor, mit dem Sie Web-Apps nach Ihren Vorlieben entwerfen können.
Und das Beste daran ist, dass Sie keinerlei Programmiererfahrung oder Fachwissen benötigen. Bubble ist für jeden geeignet, unabhängig davon, ob Sie wissen, wie man programmiert oder nicht.
Ein vorheriges Verständnis von Frontend-Sprachen kann Ihnen jedoch einen Vorteil verschaffen, da Sie schnell herausfinden können, was es in Bezug auf die Ereignisbehandlung tut.
Also, was denkst du über die Fähigkeiten von Bubble?
Lassen Sie uns in den Kommentaren wissen!
Arbehi
Kann ein Shop erstellt werden, um Produkte mit dem Tool bubble.io zu verkaufen?