Tutorial de Bubble.io - Crear un nombre de usuario (único, mayúsculas/minúsculas, sin caracteres especiales)

Video tutorial paso a paso para crear nombres de usuario únicos en Bubble.

Chris Strobl
Chris Strobl

In diesem Video zeige ich euch, wie man unique Usernames in Bubble erstellen kann. Hierbei ist entscheidend, dass die Usernames nicht merhfach verwendet werden können und wir gleichzeitig auch Sonderzeichen und ähnliches validieren.

Hier das Regex Muster:  

([A-Za-z0-9_]+)

Quelle: https://forum.bubble.io/t/ensuring-case-sensitive-unique-usernames-with-only-specific-characters/46541/4 von mebeingken.

Username erstellen mit Einzigartigkeit, Groß/Kleinschreibung, keine Sonderzeichen

Transcripción del vídeo:

Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir Unique User namens ganz einfach im Bubble erstellen können. Hierbei haben wir zwei Dimensionen einmal, dass der User Name nur bestimmte Zeichen haben darf und auf der anderen Seite, dass der Nutzer Name nicht bereits benutzt wird. Wir legen direkt mal los.

Wir installieren ein Plugin, das heißt Instant Text. Dies hilft, den Text sofort zu validieren und nicht erst abzuwarten, ist daher optional, aber steigert erheblich die User Experience. Anschließend gehen wir die Datenbank und dort haben wir beim User zwei Bereiche Einmal User nehmen, dass ein Text fehlt und einmal die User nehmen Lorcas. Diese beiden Datenbank Filz brauchen wir nun, wenn wir auf dem Button registrieren gehen Start/edit workflow und dort machen wir Account, seien die User up Impuls E-Mails, value, input A's value value und wir fügen noch das Feld Username und wir fügen das Feld User dem Lorcas hinzu. Hier machen wir Input User namens Value und bei Usern im Lower Keys machen wir Input User namens Value und formatieren das mit Lorcas.

Das hilft uns dann, wenn Nutzer einmal mit Großschreibung oder Kleinschreibung ihren Usern anlegen, dass dieser natürlich auch nicht belegt ist. Anschließend machen wir in diesem Workflow Refresh the Page und nun ist unser Ziel, das Registrieren nur möglich ist, wenn der Nutzernamen noch verfügbar ist. Dafür nutzen wir das Live Text Element von dem Plugin, ziehen das einmal in unser Feld rein, gehen anschließend in Settings General.

Und wählen aus, wenn es noch nicht ausgewählt ist. Ex Post die Option Adonai die Attribute to html Elemente, um dann in dem Element selbstdie Element id anzugeben, in denen diese User nehmen. Und verknüpfen diese nun mit unserem Import User nehmen und nennen dieses ebenfalls als die Attribute User nehmen. Anschließend gehen wir das Textfeld Benutzername ist verfügbar und fügen eine Conditional hinzu. Do Search for User und sagen User Namen Lover Keys ist gleich. Lauftext As well you. Formatieren Lower Keys und wir sagen Hier muss der Count größer Null sein. Das heißt, wir haben mindestens einen User Name, der identisch ist. Dann ändern wir das Textfeld auf von sind Benutzername wird bereits benutzt und wir ändern auch die von Color. Auf einen No Code tun. Wie kopieren hier einmal die Expression, fügen diese hinzu und machen ist gleich Null. Und. Livesex a value. Ist No Code Mutti, dann ändern wir den Text.

Auf Nutzernamen ist verfügbar mit einem Fond aus dem Icon am Anfang und die von Caller. Auf Grün. Schließlich arbeiten wir noch an der Regex Formatierung für die Nutzernamen. Wir wollen, dass diese nur a bis z Großbuchstaben, a bis Z Kleinbuchstaben und ein lauer Keys Unterstrich haben. Hierfür haben wir wiederum Bedingungen. Wir sagen live text as well you. Extract Regex. Und wir fügen hier ein Regex Pattern hinzu. Dies habe ich euch auch in die Anmerkungen angepasst und wir sagen hier First Item ist No Code. Live Texas verlief. Wenn dies der Fall ist, das quasi das Regex Pattern nicht im Live Text a value entspricht, dann gibt es eine Fehlermeldung. Und wir fügen auch die von Carlo hinzu, die wiederum im Rot entspricht.

Anschließend kopieren wir einmal noch die Expression, fügen diese hinzu und sagen, wenn dies mit dem Live Text Value entspricht und Livesex a value nicht leer ist. Dann ändern wir den Text. Und auch die von Kohler auf Grün. Schließlich wollen wir jetzt dem Nutzer auch signalisieren, dass der Button nur quickbook ist, wenn alle Bedingungen erfüllt sind. Dafür nehmen wir als erstes hier die Expression, kopieren diese rein, gehen in das Conditional vom Button. Fügen dieses hinzu und haben einmal Live Text Value ist No Code live Text Value mit dem Regex Pattern. Was wir hier oben haben. Anschließend sagen wir oder Do Search for User Usern im Lower Keys ist gleich. Live Text a value. Lower Keys.

Und hier ist der Count größer Null. Oder Lauftext as Beaulieu ist mti genau dann. Ist der Button nicht klickt bar und wir wollen das Ganze auch farblich ändern, indem wir die Background Color. Auf grau machen.

Und auch die von Koller anpassen. Wenn diese Bedingung nicht erfüllt ist, geht der Button ganz normal und ist auch ganz normal quickbook. Wir gehen jetzt einmal ins Preview und testen das Ganze. Wir sehen hier, wie beide Bedingungen erfüllt sind und wir dadurch auch den Button registrieren klicken können. Angezeigt haben wir jetzt eine Liste an Usern und jetzt können wir das Ganze auch noch mal testen. Wir nehmen einmal noch Test eins und wir sehen, der Nutzernamen ist bereits benutzt und wir können auch ein Sonderzeichen machen, wo wir dann sehen, Benutzername ist zwar verfügbar, aber die Nutzer dürfen keine Sonderzeichen verwenden. Und der Button registrieren geht nicht.

Wenn wir jetzt aber Test 2 machen, dann sind beide Bedingungen erfüllt und wir können registrieren klicken. Somit konnten wir sehen, wie wir in Bubble mit Nutzernamen arbeiten können, die individuell auf jeden User sind. Dies wiederum kann man dann für Subdomains, Profile oder auch andere Situationen perfekt benutzen.

Wenn euch dieses Video gefallen habt, klickt gerne auf den Like-Button und subscribed Channel bei Fragen, schreibt uns in die Kommentare. Ich wünsche euch weiterhin viel Erfolg mit Bubble und auf bald.

FeaturesAPIs