Als ich herausfand, dass ich Anwendungen erstellen kann, ohne auch nur eine Zeile Code zu schreiben, dachte ich, dass es sich um einfache Anwendungen ohne viel Tiefgang handelt. Ich dachte, ich könnte die grundlegenden Sachen machen, aber dann würde das Projekt schwieriger werden und ich müsste programmieren lernen, damit alles funktioniert.
Die Wahrheit ist, dass ich trotz meiner mangelnden technischen Fähigkeiten – und meiner Skepsis – ein paar ziemlich coole Anwendungen entwickelt habe ein paar ziemlich coole Anwendungen, und es hat nur ein paar Wochen gedauert, bis ich ein funktionierendes Ergebnis hatte.
Aber wie? No-Code-Tools vereinfachen komplexe Programmierkonzepte, sodass sie leichter zu verstehen und zu verwenden sind. Du musst keinen Code schreiben oder Befehle manuell eingeben, sondern kannst alles über visuelle Oberflächen, Drag-and-Drop-Elemente und Assistenten ganz nach deinen Wünschen einrichten.
In dieser Anleitung zeige ich dir Schritt für Schritt, wie du mit einem No-Code-Tool namens Bubble eine einfache Anwendung erstellen kannst. Bubble. Wenn du fertig bist, verstehst du die Grundlagen des No-Code Anwendung-Bauens und bist auf dem besten Weg, spannende neue Dinge ohne Code zu entwickeln.
Eine kurze Info zu meiner To-Do-Listen-Anwendung
Things To Do ist die To-Do Anwendung, die wir heute nachbauen werden. Das ist eine To-Do-Liste-Anwendung, mit der du:
Schau dir die Aufgaben an, die du heute erledigen musst
Neue Aufgaben zur Liste hinzufügen und löschen
Aufgaben als erledigt markieren
Liste der erledigten Aufgaben anzeigen
Hier ist ein Beispieldesign:
Du kannst die Funktionen ausprobieren, indem du die Website der Anwendung besuchst. Website der Anwendung. Melde dich mit den auf der Seite angegebenen Testzugangsdaten an und teste es. Aber Vorsicht: Andere Leute könnten es gleichzeitig testen, sodass du möglicherweise viele Aufgaben hin und her gehen siehst.
Wenn du diese Anleitung bis zum Ende durcharbeitest, dauert es ungefähr zwei Stunden.
Bevor wir beginnen
Bevor wir mit dem Erstellen unserer eigenen Version von „Things To Do” beginnen, musst du ein kostenloses Konto bei Bubble erstellen.
Wenn du willst, kannst du auch den Crashkurs machen – das sind ein paar „ 10 ”-Lektionen, die die wichtigsten Sachen in einer Reihe von Schritt-für-Schritt-Anleitungen erklären. Aber Sie können diesen Teil vorerst überspringen, da ich Ihnen erklären werde, was wir im Laufe der Zeit tun.
Nachdem du ein Konto erstellt hast, klicke auf die Schaltfläche „Neue Anwendung“, fülle das Dialogfeld aus und wähle „Mit einer leeren Seite beginnen“.
Teil 1: Datenbank einrichten
Die meisten modernen Anwendungen brauchen eine Datenbank, um zu funktionieren. Mit einer Datenbank kannst du Daten speichern, pflegen und abrufen und dabei Verbindungen zwischen verschiedenen Datenelementen herstellen.
Lass uns den Teil von Bubble aufrufen, der sich mit Daten beschäftigt. Klick auf den Reiter „Daten“ in der linken Navigationsleiste auf deinem Bildschirm.
Wenn wir eine Anwendung erstellen, speichern wir die Daten unserer Nutzer in unserer Datenbank. Je nachdem, was wir für die Features der Anwendung brauchen, brauchst du verschiedene Datentypen.
Im Moment gibt's nur den Datentyp „Benutzerdaten“. Das ist standardmäßig so eingestellt und speichert die Anwendung-Nutzer, ihre E-Mail-Adressen, Passwörter, das Erstellungs- oder Änderungsdatum, den Ersteller des Nutzers und den Slug.
Da wir eine To-Do-Liste erstellen, brauchen wir eine Möglichkeit, die Aufgaben zu speichern, die jeder Benutzer erstellt, um seine Liste zu füllen. Gib im Feld „Neuer Typ“ „Aufgabe“ ein und klicke auf „Erstellen“.
Jetzt, wo wir einen Datentyp für Aufgaben haben, müssen wir noch ein paar Infos zu jeder Aufgabe speichern. Wir brauchen eine Aufgabenbeschreibung, damit die Nutzer festhalten können, dass sie den Hund ausführen oder ihr Bett machen müssen. Außerdem müssen wir den Status der Aufgabe speichern können, also ob sie noch erledigt werden muss oder schon fertig ist.
Lassen Sie uns diese Felder jetzt erstellen. Klick auf „Neues Feld erstellen“.
Gib im Feld „Feldname“ die Beschreibung „ "“ ein." Datenfelder brauchen auch einen Typ. Klick auf das Dropdown-Menü „Feldtyp“ und wähl „Text“ aus. Wenn du fertig bist, klick auf „Erstellen“.
Wiederholen wir das Ganze für den Status der Aufgabe. " Klick auf „Neues Feld erstellen“, gib „ "status“ als Feldnamen ein und wähl als Feldtyp „Zahl“ aus.
Warum der Nummerntyp? Wir verwenden ein numerisches System, um den Status unserer Aufgabe zu verfolgen. Aufgaben mit der Nummer „ 0 “ werden als nicht erledigt angesehen, und Aufgaben mit der Nummer „ 5 “ werden als erledigt angesehen. Wir haben uns für 0 und 5 entschieden (und nicht zum Beispiel für 0 und 1), damit wir in Zukunft noch etwas Spielraum haben, um weitere Aufgabenstatus zu erstellen. Schließlich könnten wir vom Backlog bis zur abgeschlossenen Liste auch den Status "geplant" oder "in Bearbeitung" hinzufügen.
Jetzt haben wir die grundlegenden Infos, die wir brauchen, damit der Datentyp „Aufgaben“ nützlich ist. Es gibt nur ein kleines Problem: Wenn die ersten 10 Nutzer die Anwendung nutzen und alle ihre Aufgaben erstellen, wird es schwierig, jede Aufgabe dem richtigen Besitzer zuzuweisen. Das könnte auf Dauer chaotisch werden, also fügen wir ein zusätzliches Datenfeld hinzu, um zu vermerken, wer für welche Aufgabe zuständig ist.
Klick auf „Neues Feld erstellen“. Stell im Dialogfeld den Feldnamen als Eigentümer ein. Für den Feldtyp öffne das Dropdown-Menü und wähle unten „Benutzer“ aus. Klick zum Schluss auf „Erstellen“.
Die Datenfelder für den Datentyp „Aufgabe“ sind alle eingestellt. Ihr Bildschirm sollte wie folgt aussehen:
Wenn du die Anwendung später erstellst, ist es praktisch, jede Aufgabe auch jedem Benutzer in der Datenbank zuzuordnen. Lassen Sie uns das jetzt einrichten. Klick auf den Datentyp „Benutzer “.
Klick auf „Neues Feld erstellen“. Nenn die Aufgabe „ "“, wähl „" “, stell den Feldtyp auf „Aufgabe“ und vergiss nicht, vor dem Klicken auf „Erstellen“ das Kästchen „Dieses Feld ist eine Liste (mehrere Einträge)“ anzukreuzen. So kann jeder in diesem Feld so viele Aufgaben hinzufügen, wie er braucht.
Jetzt können wir weitermachen. (Hinweis: Wenn du deiner Anwendung weitere Features hinzufügen möchtest, musst du später noch mal auf den Reiter „Daten“ gehen.)
Angenommen, Sie möchten für jeden Benutzer eine Möglichkeit hinzufügen, Projekte nachzuverfolgen. Das heißt, du musst einen Projekttyp anlegen und alle Felder hinzufügen, die du brauchst, um den Projektverantwortlichen, die Teilnehmer und die Aufgaben zu erkennen. Das Gleiche gilt, wenn du den Benutzern die Bildung von Teams ermöglichen möchtest.
Denk einfach daran, dass du deine Datenbank erweitern musst, wenn du mehr Datentypen in deiner Anwendung speichern willst. Jetzt machen wir erst mal weiter mit dem Erstellen der Benutzeroberfläche.
Teil 2: Erstellen der Benutzeroberfläche
Die Benutzeroberfläche (UI) ist das, womit deine Nutzer interagieren, um Informationen in die Datenbank zu schreiben und abzurufen sowie die logischen Vorgänge durchzuführen, die deine Anwendung nützlich machen – in diesem Fall die To-Do-Listen-Anwendung.
Zuerst müssen wir eine neue Seite hinzufügen. Eine Anwendungsseite funktioniert ähnlich wie eine Website-Seite: Du kannst sie nutzen, um verschiedene Aktivitäten oder Dashboards voneinander zu trennen. Klick auf das Dropdown-Menü, das die aktuelle Seite oben links auf deinem Bildschirm anzeigt.
Klick auf „Neue Seite hinzufügen“.
Gib als Seitennamen „Liste“ ein und lass das Dropdown-Menü leer. Klick auf „Erstellen“.
Es ist an der Zeit, mit dem Entwerfen zu beginnen. Beachten Sie den UI-Builder im linken Teil des Bildschirms:
In der Elementstruktur wird eine Liste aller Elemente angezeigt, die Sie der Seite bisher hinzugefügt haben. Alles, was sich unter diesem Abschnitt befindet, sind die Elemente, die Sie der Seite hinzufügen können , die in Kategorien unterteilt sind.
Fügen wir eine Gruppe hinzu, in der wir unsere To-do-Liste speichern. Klick im Bereich „Container“ auf „Gruppe“.
Zeichnen Sie nun ein breites Rechteck auf der Leinwand.
Wenn du fertig bist, wird das Bearbeitungsdialogfeld angezeigt. In diesem Dialogfeld kannst du die Details jedes Elements bearbeiten, das du zur Seite hinzufügst. Beginnen wir damit, den Namen des Elements zu ändern, um die Ordnung zu halten. Klick auf die Überschrift dieses Dialogs und nenn ihn „ "-Gruppenlisten”."
Geben wir ihm einen Rahmen. Klick auf „Stil entfernen“, um die Bearbeitung einzelner Stile für diese Gruppe freizuschalten.
Legen Sie nun den Rahmenstil fest - alle Ränder auf Volumenkörper, Rundheit auf 10und Breite auf 2.
Passen wir die Größe und Position dieser Gruppe an, um sicherzustellen, dass sie alles aufnehmen kann, was wir brauchen. Klick im Bearbeitungsfenster auf die Registerkarte „Layout “.
Geben Sie die Breite (B), die Höhe (H), die X-Position (X) und die Y-Position (Y) mit den folgenden Werten ein:
W 731
H 393
X 114
Y 134
Diese Gruppe wird nur als visuelles Element dienen, so dass wir nicht mehr daran herumbasteln werden.
Jetzt ist es an der Zeit, eine sich wiederholende Gruppe hinzuzufügen, um die Liste der Aufgaben anzuzeigen. Eine sich wiederholende Gruppe ist eine spezielle Art von Gruppe, die Daten in einer Reihe von Zeilen und Spalten anzeigt, sodass du viele Daten auf einfache Weise visualisieren kannst.
Klick im linken UI Builder -Menü unter „Containers“ auf „Repeating Group“.
Zeichnen Sie die wiederholte Gruppe in die Gruppenlisten, die wir gerade konfiguriert haben. Stellen Sie sicher, dass es den größten Teil seines inneren Bereichs abdeckt.
Wenn das Bearbeitungsdialogfeld für die sich wiederholende Gruppe angezeigt wird, siehst du, dass wir uns auf der Registerkarte „Layout“ befinden. Geben Sie die folgenden Werte für Breite, Höhe, X und Y ein:
W 671
H 346
X 28
Y 16
Lassen Sie uns die Dinge organisieren. Benenne diese sich wiederholende Gruppe in „RepeatingGroup To-Do-Liste” um, indem du auf die Überschrift des Bearbeitungsdialogs klickst.
Lassen Sie uns das Erscheinungsbild dieser Gruppe etwas weiter bearbeiten. Klick auf die Registerkarte „Darstellung “.
Legen Sie die Anzahl der Zeilen auf 6fest.
Lassen Sie uns auch das Zeilentrennzeichen loswerden. Klick wie vorher auf „Stil entfernen“ , um den Stil dieses Elements separat zu bearbeiten. In den neuen Einstellungen klicke auf das Dropdown-Menü vor „Trennzeichen“ und wähle „Keine“ aus.
Zeit, einige Funktionen einzurichten. Wir müssen Bubble mitteilen, dass diese sich wiederholende Gruppe unsere To-Do-Aufgaben anzeigt. Klick auf das Dropdown-Menü Inhaltstyp und wähl Aufgabe aus.
Aber das reicht noch nicht, um die Aufgaben anzuzeigen – wir müssen auch sagen, wo wir die Aufgaben herholen, die wir anzeigen wollen. In der Datenquelle-E ingabe siehst du ein kleines Rechteck mit der Aufforderung „ "“ ( Datenquelle auswählen). Klicke darauf." Klick da, um ein Dropdown-Menü zu öffnen.
Wähl im Dropdown-Menü die Option „Suche durchführen“ aus.
Klick im neuen Dialogfeld links unter dem Dropdown-Menü „Typ“ auf „Aufgabe“.
Aber wir wollen doch nicht alle Aufgaben anzeigen, oder? Wir wollen nur die Aufgaben anzeigen, die noch nicht erledigt sind, und die Aufgaben, die zum aktuellen Benutzer gehören. Klick auf „Neue Einschränkung hinzufügen”.
Klick auf das kleine Rechteck im Eingabefeld, das auftaucht.
Klick im Dropdown-Menü auf „Status“.
Klick nochmal drauf und wähl =.
Zum Schluss klick nochmal drauf, tipp „ 0 “ (Null) ein und drück die Eingabetaste. Diese Einschränkung filtert die Ergebnisse und zeigt nur die Aufgaben mit dem Status „ 0 “ (nicht abgeschlossen) an.
Klick unten, um eine weitere Einschränkung hinzuzufügen. Dann:
auf das Eingabefeld klicken
Eigentümerwählen
Noch mal Klick, um auszuwählen =
und klick noch mal, um „Aktueller Benutzer“auszuwählen.
Dieser Ausdruck stellt sicher, dass die Ergebnisse nur Aufgaben enthalten, die der aktuelle Benutzer erstellt hat, und keine Aufgaben, die anderen Benutzern in der Anwendung gehören. Das Endergebnis sollte wie folgt aussehen:
Unsere RepeatingGroup-To-Do-Liste holt die Infos richtig aus der Datenbank, aber unsere Nutzer können sie nicht sehen. Du kannst den Bearbeitungsdialog schließen, indem du oben rechts auf das X-Symbol klickst.
Jetzt müssen wir Textelemente in die sich wiederholende Gruppe einfügen und sie so einrichten, dass die richtigen Daten angezeigt werden.
Bevor wir beginnen, erinnern Sie sich, dass die wiederholte Gruppe mehrere Zeilen hat? Das Tolle an diesem Element ist, dass beim Konfigurieren der ersten Zeile alle anderen Zeilen das gleiche Design und die gleiche Funktionalität haben. Damit kannst du Features wie einen Social Media Feed, eine Liste von Produkten in einem Online-Shop oder – du hast es erraten – Aufgaben auf einer To-Do-Liste erstellen.
Ziehen Sie aus dem UI Builder-Menü auf der linken Seite ein Text-Element aus den visuellen Elementen, und legen Sie es in der ersten Zeile der wiederholten Gruppe ab. Wenn unter dem Cursor eine rote Linie angezeigt wird, machen Sie es richtig.
Sehen Sie, wie es in die anderen Zeilen repliziert wird? Dies ist eine Vorschau darauf, wie es am Ende aussehen wird. Klick mit der rechten Maustaste auf das Textelement und dann auf „Bearbeiten“.
Lös im oberen Eingabefeld „ "…edit me…" “ und klick auf den blauen Button „Dynamische Daten einfügen“.
Wähl im Dropdown-Menü „Beschreibung der Aufgabe der aktuellen Zelle“ aus.
Jedes dieser Textelemente holt die Aufgabe der entsprechenden Zelle und zeigt ihre Beschreibung an. Wir könnten das Ganze für andere Datenfelder wiederholen – zum Beispiel, um den Status der Aufgabe oder das Erstellungsdatum anzuzeigen –, aber das ist im Moment nicht nötig.
Eine To-do-Liste braucht auch eine Möglichkeit, um erledigte Aufgaben zu markieren. Ziehen Sie ein Symbolelement aus dem Menü Visuelle Elemente , und legen Sie es in der ersten Zeile der wiederholten Gruppe auf der rechten Seite ab.
Das Standardsymbol ist eine Flagge. Such dir ein Symbol aus, das zu der Aktion passt, die wir zeigen wollen. Wir müssen es auch kleiner machen. Zieh die Begrenzungsgriffe des Symbols, um es zu vergrößern oder verkleinern, oder klick auf die Registerkarte „Layout“ und gib die folgenden Werte ein:
W 30
H 30
X 609
Y 14
Lassen Sie uns weiterhin für Ordnung sorgen. Ändern Sie den Namen des Symbols in "Symbol als fertig markieren".
Wenn jemand beim Hinzufügen von Aufgaben einen Fehler macht, wäre es cool, wenn man die Aufgabe löschen könnte. Wiederhol den Vorgang, um ein Symbol zum Löschen einer Aufgabe hinzuzufügen. Mach das Gleiche, um die Größe des Symbols zu ändern, und vergiss nicht, es „ "-Symbol Löschaufgabe” zu nennen."
Jetzt ist es Zeit, einen Button hinzuzufügen, um Aufgaben zu unserer Liste hinzuzufügen. Wir werden auch ein Symbol zu diesem Zweck verwenden. Leg sie oben rechts in der To-do-Liste ab und nenn sie „ "-Symbol Neue Aufgabe“."
Um neue Aufgaben hinzuzufügen, zeigen wir ein Pop-up mit einem Eingabefeld und einer Schaltfläche an. Klick im UI Builder- Menü links unter „Containers“ auf „Popup“ und dann in die Mitte der Arbeitsfläche, um es zu platzieren.
Benenne das Pop-up-Fenster im Bearbeitungsfenster in „Popup Neue Aufgabe“ um. " Füge dann ein Textelement zum Pop-up hinzu und schreib „ "“ (Neue Aufgabe erstellen) hinein.
Lassen Sie uns den Stil dieses Textes ändern, um ihn wirkungsvoller zu gestalten. Klick auf das Dropdown-Menü „Stil “ und wähl „H2 -Überschrift – Dunkel“.
Benutze die Griffflächen des Elements, um es zu vergrößern, zu verkleinern oder im Pop-up zu verschieben. Zum Zentrieren klickst du mit der rechten Maustaste darauf und wählst „Horizontal zentrieren“. Sie können auch die Pfeiltasten auf Ihrer Tastatur verwenden, um das Element zu verschieben.
Füge ein Eingabefeld unter dem Textelement hinzu (du findest es im UI Builder -Menü unter dem Abschnitt Eingabeformulare ). Bearbeiten Sie den Platzhalterwert so: "Geben Sie hier eine Beschreibung ein... "
Zum Schluss fügen Sie unter diesen beiden Elementen eine Schaltfläche hinzu (Sie finden sie im linken Menü unter „Visuelle Elemente” ) und benennen Sie sie „ "-Aufgabe erstellen”."
Das Pop-up verdeckt den Rest unserer Anwendung. Klicke außerhalb des Feldes, um es auszublenden. Wenn Sie es später wieder sehen möchten, können Sie die Sichtbarkeit im linken Menü unter Elementbaum umschalten. Such dort nach dem Pop-up-Fenster und klick auf das kleine Augensymbol, um es anzuzeigen oder auszublenden.
Die Benutzeroberfläche unserer Anwendung ist fast fertig. Fügen wir eine Liste hinzu, damit unsere Benutzer abgeschlossene Aufgaben sehen können. Wir verwenden eine weitere Wiederholungsgruppe, die Aufgaben nach Status und Besitzer filtert, ähnlich wie die erste, die wir erstellt haben.
Klick mit der rechten Maustaste auf die Wiederholungsgruppe „To-Do-Liste“ und wähl „Bearbeiten“.
Klick auf die Registerkarte „Layout “.
Deaktivieren Sie Dieses Element ist beim Laden der Seite sichtbar. Wir werden diese Eigenschaft später verwenden, um ein Menü zu erstellen, das entweder die To-Do Aufgaben oder die erledigten Aufgaben anzeigt.
Notieren Sie sich die Breite (B), Höhe (H), X-Position (X) und Y-Position (Y) dieses Elements. In diesem Fall ist es W 675, H 347, X 22, Y 19.
Jetzt kannst du das Dialogfeld schließen. Klick mit der rechten Maustaste auf die Wiederholungsgruppe „To-Do-Liste“ und wähl „Kopieren“.
Klick mit der rechten Maustaste oben links in die Gruppenliste und wähl „Einfügen“.
Eine Kopie der sich wiederholenden Gruppe wurde leicht von der ursprünglichen Gruppe eingefügt. Sie werden auch feststellen, dass ein neues Element im Elementbaum im Menü auf der linken Seite angezeigt wurde. Klick auf das kleine Auge, um die Wiederholungsgruppe „To-Do-Liste“ auszublenden.
Klick jetzt auf die Kopie der Wiederholungsgruppe „To-Do-Liste“, um den Bearbeitungsdialog zu öffnen.
Damit alles ordentlich bleibt, nenn diese Gruppe einfach „Wiederholungsgruppe Erledigt“ um (klick dazu auf den Namen oben im Bearbeitungsdialog).
Klick auf die Registerkarte „Layout“ und gib die zuvor kopierten Werte für W, H, X und Y ein (W 675, H 347, X 22, Y 19). Dadurch wird sichergestellt, dass beide Listen die gleichen Abmessungen und die gleiche Position auf der Seite haben.
Es ist Zeit, die Art der Aufgaben zu ändern, die wir in dieser Liste anzeigen. Klick auf die Registerkarte „Darstellung “.
Klick im Feld „Datenquelle “ auf den Ausdruck „Nach Aufgaben suchen“. Ein neuer Dialog wird angezeigt. Ändere bei der Statusbeschränkung „ " “ (Fertig, wenn) zu „0 “ (Fertig, wenn) und „" “ (Fertig, wenn) zu „ " “ (Fertig, wenn) „5 “ (Fertig, wenn) und „" “ (Fertig, wenn) (das ist die Zahl, die wir festgelegt haben, um eine Aufgabe Lassen Sie alle anderen Felder so, wie sie sind.
Wir brauchen kein Symbol zum Löschen für erledigte Aufgaben in der Liste „ "“ unter „Erledigt“ auf". Du kannst mit der rechten Maustaste draufklicken und es löschen.
Das Symbol, das anzeigt, dass die Aufgabe erledigt ist, sollte anders sein als das, mit dem wir die Aufgabe als erledigt markieren. Wählen Sie ein passenderes Symbol aus. Sobald Sie das Richtige gefunden haben:
Ändere die Farbe auf Grün (Klicke mit der rechten Maustaste auf das Symbol, klicke auf „Bearbeiten“, klicke unter „Stil“ auf „Stil entfernen“ und oben wird eine Farbauswahl angezeigt).
Ändern Sie den Namen in "Symbol Fertig".
Jetzt haben wir zwei sich wiederholende Gruppen – eine zeigt die Aufgaben an, die andere ist eine Liste der erledigten Aufgaben. Wir brauchen eine Möglichkeit, zwischen ihnen umzuschalten. Fügen wir oben in der Liste ein einfaches Menü hinzu, um genau das zu machen.
Fügen Sie oben links ein Symbol hinzu, das die Funktionalität des Menüs andeutet. Nennen Sie es "Symbollisten".
Füge eine Schaltfläche mit der Bezeichnung „ "“ (zu erledigen) hinzu, dann „" “ (abgeschlossen) und anschließend „ "“ (abgeschlossen)."
Wir verwenden etwas, das als "benutzerdefinierte Elementzustände" bezeichnet wird, um die Sichtbarkeit jeder Liste umzuschalten. Benutzerdefinierte Elementzustände sind eine agil Möglichkeit, viele Aspekte der Benutzeroberfläche in Bubble zu steuern.
Klick mit der rechten Maustaste auf die Icon-Listen, die wir platziert haben, und wähl „Bearbeiten“.
Klick einfach auf den kleinen i-Button oben im Bearbeitungsdialog (Elementinspektor).
Klick unter „Benutzerdefinierte Zustände“ auf „Neuen benutzerdefinierten Zustand hinzufügen“.
Legen Sie den Namen des Bundesstaates auf "active-list" und den Typ des Bundesstaats auf "number" fest. Klicken Sie abschließend auf Erstellen.
Wir werden diesen Status so verwenden: Immer wenn der Status auf „ 1” gesetzt ist, wird die RepeatingGroup „To-Do-Liste” angezeigt; wenn der Status auf „ 2” gesetzt ist, wird die RepeatingGroup „Erledigt-Liste” angezeigt. Da wir möchten, dass unsere Nutzer die To-Do-Liste jedes Mal sehen, wenn sie die Seite zum ersten Mal öffnen, können wir den Standardwert auf „ 1“ setzen.
Jetzt, da wir diesen benutzerdefinierten Zustand haben, müssen wir unseren sich wiederholenden Gruppen mitteilen, wann sie angezeigt und verschwinden sollen. Klick in der Elementstruktur auf die To-Do-Liste „RepeatingGroup“.
Klicke im BearbeitungsDialog auf die Registerkarte „Bedingt“.
Auf dieser Registerkarte können Sie die Eigenschaften dieses Elements ändern, wenn bestimmte Bedingungen erfüllt sind. Fügen wir eine neue Bedingung hinzu. Klick auf „Weitere Bedingung festlegen“.
Klick auf das Eingabefeld vor „Wann“. Wähle im Dropdown-Menü Folgendes aus:
Scroll runter, bis du die Icon-Listen findest, und klick drauf.
Setzen Sie den Ausdruck fort, indem Sie die aktive Liste von auswählen.
Wählen Sie dann ist aus.
Geben Sie die Zahl 1ein, und drücken Sie die Eingabetaste auf Ihrer Tastatur
Das Ergebnis sollte wie folgt aussehen:
Klick auf das Dropdown-Menü „Eigenschaft auswählen, die geändert werden soll, wenn wahr“.
Wählen Sie Dieses Element ist sichtbar.
Vergessen Sie nicht, das Kästchen anzukreuzen.
Folgendes passiert: Immer wenn der benutzerdefinierte Status der Symbolliste 1ist, wird diese wiederholte Gruppe angezeigt. Wiederholen wir einen ähnlichen Vorgang, um die Erledigt-Liste anzuzeigen. Klick im linken Menü in der Elementstruktur auf die Liste „RepeatingGroup done“.
Der Bearbeitungsdialog sollte schon auf der Registerkarte „Bedingungen“ sein. Klick hier, um den Ausdruck wie vorher einzustellen:
Wählen Sie Symbollisten aus, > die aktive Liste > ist.
Geben Sie dieses Mal die Zahl 2ein, und drücken Sie die Eingabetaste.
Klick auf das Dropdown-Menü „Eigenschaft zum Ändern auswählen“, wähl „Dieses Element ist sichtbar“ und setz ein Häkchen.
Wenn der benutzerdefinierte Status der Symbolliste auf 2festgelegt ist, wird diese wiederholte Gruppe angezeigt. Im folgenden Abschnitt konfigurieren wir die Mittel zum Ändern dieser Zustände (und zum Ändern der Sichtbarkeit dieser Elemente).
Die Benutzeroberfläche ist einsatzbereit. Wir haben jetzt alles, was wir brauchen, um Infos aus der Datenbank zu holen und so anzuzeigen, wie wir es wollen, und wir haben auch alle Buttons und Zustände, die wir für die Funktionen brauchen. Jetzt ist es an der Zeit, alles mit Workflows zu verbinden.
Teil 3: Logik und Workflow
Jetzt kommt der spannende Teil. Jetzt macht die Anwendung endlich das, was wir wollen. Jetzt richten wir alle Buttons und Symbole ein, damit die richtigen Aktionen ausgeführt werden.
Klick mit der rechten Maustaste auf das Symbol, um eine neue Aufgabe hinzuzufügen, und wähl dann „Workflow starten/bearbeiten“.
Wir werden diesen Button verwenden, um ein Pop-up-Fenster anzuzeigen. Klick hier, um eine neue Aktion hinzuzufügen...
Geh mit der Maus über Elementaktionen und klick auf Anzeigen.
Ein neues Dialogfeld wird angezeigt. Klick auf das Dropdown-Menü „Element “ und wähl „Neue Aufgabe öffnen“.
Jetzt wird jedes Mal, wenn der Benutzer auf diese Schaltfläche klickt, das Popup-Fenster „Neue Aufgabe“ angezeigt. Gehen wir zurück zur Registerkarte Design , um das nächste Element zu finden, das wir konfigurieren werden.
Richten wir den Button ein, um Aufgaben zu erstellen, die wir in das Pop-up-Fenster einfügen. Mach das Pop-up sichtbar, indem du auf das kleine Augensymbol im Menü „Elemente“ auf der linken Seite deines Bildschirms klickst.
Klick mit der rechten Maustaste auf die Schaltfläche „Aufgabe erstellen“ und dann auf „Workflow starten/bearbeiten“.
Dieser Workflow wird länger dauern. Klick hier, um eine neue Aktion hinzuzufügen. Geh mit der Maus über „Daten (Dinge)“ und klick auf „Neues Ding erstellen“.
Wir wollen so was wie Aufgabe machen. Wähle es einfach aus dem Dropdown-Menü aus.
Wir wollen einige Datenfelder der Aufgabe ausfüllen. Klick auf „Anderes Feld festlegen“.
Klick einfach auf das Eingabefeld und wähl die Beschreibung aus dem Dropdown-Menü aus.
Klick auf den Bereich vor dem =-Zeichen. Klicke im Dropdown-Menü, das erscheint, auf „Eingabe“ und gib eine Beschreibung ein.
Dadurch weiß Bubble, dass es das Feld „ "“ (Beschreibung des Pop-up-Elements) im Datenfeld „" “ (Pop-up-Element) mit dem Inhalt des Eingabefelds füllen soll, das wir zuvor im Pop-up-Element platziert haben. Beenden Sie den Ausdruck, indem Sie den Wert von auswählen.
Wenn eine Aufgabe erstellt wird, ist sie wahrscheinlich noch nicht fertig. Klick hier, um ein anderes Feld festzulegen. Wähle den Status aus dem Dropdown-Menü aus.
Klick auf den Bereich vor dem =-Zeichen. Wir wählen nichts aus dem Dropdown-Menü aus. Geben Sie einfach die Zahl "0" ein und drücken Sie die Eingabetaste auf Ihrer Tastatur.
Zum Schluss müssen wir noch einen Verantwortlichen für diese Aufgabe festlegen. Wiederholen Sie den Vorgang, um ein anderes Feld festzulegen, und wählen Sie Besitzer als festzulegendes Feld aus. Klick auf den Bereich vor dem Zeichen =. Wähle „Aktueller Benutzer ” aus dem Dropdown-Menü.
Schritt „ 1 “ ist fertig. Jetzt verknüpfen wir diese Aufgabe mit dem Konto des aktuellen Benutzers. Klick hier, um eine neue Aktion hinzuzufügen.
Klick unter Konto auf „Änderungen am aktuellen Benutzer vornehmen“.
Klick auf „Anderes Feld ändern“.
Klick auf das Eingabefeld und wähl Aufgaben aus dem Dropdown-Menü aus.
Klick nochmal drauf und wähl „Hinzufügen“ aus.
Klick nochmal drauf und wähl „Ergebnis von Schritt 1 “ (Neue Aufgabe erstellen…).
Schritt „ 2 “ ist fertig. Jede Aufgabe, die der Benutzer erstellt, wird mit seinem eigenen Konto verknüpft. Das spart Zeit und Ressourcen, wenn die Anwendung die Datenbank durchsucht, um alle Aufgaben eines bestimmten Benutzers anzuzeigen – deshalb ist es wichtig, dass wir diesen Schritt abschließen.
Schritt „ 3 “ (Eingabefeld zurücksetzen) setzt das Eingabefeld zurück und löscht das Beschreibungsfeld. Wenn die Aktion nicht schon von Bubble vorgeschlagen wurde, klick drauf, um eine neue Aktion hinzuzufügen, fahr mit der Maus über „Elementaktionen“ und klick auf „Eingaben zurücksetzen“.
Zum Schluss verstecken wir das Pop-up-Fenster, nachdem die Aufgabe hinzugefügt wurde. Klick drauf, um eine neue Aktion hinzuzufügen, geh mit der Maus über „Elementaktionen” und klick auf „Ausblenden”.
Klick auf das Dropdown-Menü „Element“ und wähl „Neue Aufgabe öffnen“.
Dieser Workflow ist abgeschlossen. Wir werden unser Menü mit benutzerdefinierten Elementzuständen konfigurieren. Klick auf den Reiter „Design“, um die Benutzeroberfläche unserer Anwendung wieder anzuzeigen.
Klick mit der rechten Maustaste auf die Schaltfläche „Zu erledigen“ und dann auf „Workflow starten/bearbeiten“.
Klick hier, um eine neue Aktion hinzuzufügen. Geh mit der Maus über Elementaktionen und klick auf Status festlegen.
Such auf dem Element das Symbol „Icon Lists“ und klick drauf.
Klick auf das Dropdown-Menü „Benutzerdefinierter Status “ und wähl „Aktive Liste“ aus.
Klick auf die Werteingabe, tipp „ 1“ ein und drück die Eingabetaste.
Wir haben Folgendes gemacht: Immer wenn der Benutzer auf die Schaltfläche „To-Do“ klickt, wechselt der in den Icon-Listen gespeicherte benutzerdefinierte Status zu „ 1“, wodurch die RepeatingGroup „To-Do List“ angezeigt und die RepeatingGroup „Done List“ ausgeblendet wird.
Kehren Sie zur Registerkarte Design zurück. Klick mit der rechten Maustaste auf die Schaltfläche „Fertig“ und wähl „Workflow starten/bearbeiten“.
Klick hier, um eine neue Aktion hinzuzufügen. Klick unter Elementaktionen auf Status festlegen.
Wir wiederholen den gleichen Vorgang wie zuvor. Wählen Sie Icon Lists als Element und active-list als benutzerdefinierten Zustand aus, aber legen Sie diesmal den Wert auf 2fest, und drücken Sie die Eingabetaste.
Wenn der Benutzer auf diese Schaltfläche klickt, wird der im Element „Icon Lists“ gespeicherte Status auf „ 2“ gesetzt, wodurch die „RepeatingGroup To-Do List“ ausgeblendet und die „RepeatingGroup Done List“ angezeigt wird.
Kehren wir zur Registerkarte Design zurück. Wir kümmern uns um die Workflow der Symbole in der Wiederholungsgruppe „To-Do-Liste“ mit einem etwas anderen Ansatz. Klick im Elementbaum auf der linken Seite auf das Symbol „+“, um den Inhalt der Wiederholungsgruppe „{to-do}-Liste“ zu zeigen.
Klick auf das Symbol „Aufgabe löschen“. Dadurch wird das Bearbeitungsdialogfeld angezeigt. Klick auf die Registerkarte „Darstellung“, falls sie nicht angezeigt wird, und dann auf die Schaltfläche „Start/Edit Workflow“ (das ist eine weitere Möglichkeit, zur Workflow-Seite zu gelangen).
Klick hier, um eine neue Aktion hinzuzufügen. Klicke unter Daten auf „Ding löschen“.
Wähle im Feld „Eingabe löschen“ die Option „Aufgabe der aktuellen Zelle“ aus.
Weißt du noch, wie wir jede Aufgabe ihrem Verantwortlichen zugeordnet haben? Wir müssen diese Aufgabe auch aus dem Konto des Besitzers löschen. Klick hier, um eine neue Aktion hinzuzufügen. Geh mit der Maus über „Konto“ und klick auf „Änderungen am aktuellen Benutzer vornehmen“.
Klick auf „Anderes Feld ändern“. Dann:
Klick auf das Eingabefeld und wähl Aufgaben aus.
Klick nochmal drauf und wähl „Entfernen“.
Klicke ein drittes Mal und wähle Aufgabe der aktuellen Zelle.
Jetzt können Nutzer Aufgaben löschen. Kehren wir zur Registerkarte Design zurück. Klick im Elementbaum auf das Symbol „Fertig“, um das Bearbeitungsfenster zu öffnen. Klick auf „Workflow starten/bearbeiten“.
Wenn die Benutzer auf dieses Symbol klicken, bedeutet dies, dass die Aufgabe von „unvollständig“ zu „vollständig“ wechselt. Wir haben entschieden, dass unvollständig durch 0 dargestellt wird und vollständig 5ist. Klick hier, um eine neue Aktion hinzuzufügen. Klicke unter Daten (Dinge) auf „Änderungen an einem Ding vornehmen“.
Klicke auf „Aufgabe der aktuellen Zelle“, um die zu ändernde Aufgabe auszuwählen.
Klick auf „Anderes Feld ändern “. Klick auf das Eingabefeld, um den Status auszuwählen, und gib die Nummer ein 5.
Wenn ein Benutzer auf dieses Symbol klickt, ändert sich das Datenfeld des Status der Aufgabe von „ 0“ zu „ 5“, also von „unvollständig“ zu „vollständig“.
Teil 4: Prüfung
Es ist Zeit zu testen, ob alles gut funktioniert. Klick oben rechts auf dem Bildschirm auf die Schaltfläche „Vorschau “.
In deinem Browser wird ein neuer Tab geöffnet, der dir eine Vorschau der fertigen Anwendung zeigt. Probier deine App in diesem Vorschaufenster aus. Funktioniert die Speisekarte gut? Kannst du Aufgaben hinzufügen, löschen und als erledigt markieren? Wenn ja, hast du alle Schritte erfolgreich abgeschlossen. Glückwunsch!
(Suchen Sie nach dem Debugger im unteren Teil des Bildschirms. Du kannst es verwenden, um Probleme in deiner Anwendung zu beheben.)
Was kommt als Nächstes?
Das ist nur die Basis für eine kleine Anwendung zur Produktivität. Von hier aus kannst du so viele neue Features hinzufügen, wie du willst, und dabei das Aussehen und die Bedienung anpassen.
Egal, ob du etwas für dich selbst, dein Unternehmen oder ein ganz neues Produkt oder eine neue Dienstleistung entwickelst – mit Bubble und anderen No-Code-App-Baukästen auf dem Markt hast du die Tools, die du brauchst, um eine leistungsstarke und professionelle Web-Anwendung zu erstellen, ohne auch nur eine Zeile Code schreiben zu müssen.
Möchten Sie mehr erfahren? Entdecke die Bubble-Reihe „So erstellen Sie Anwendungen“ und probier deine Anwendungs-Entwicklungsfähigkeiten aus, indem du beliebte Anwendungen nachbaust.
Verwandte Lektüre:
