Bubble.io Tutorial - Login und Sign Up mit Username

In diesem Video erstellen wir einen Sign up und Log in Workflow, um uns nicht nur mit Email und Password zu registrieren, sondern es dem User zu erlauben sich mit einem individuellen Usernamen zu identifizieren.

Video-Transkript:

Hallo, mein Name ist Chris Strobl und ich zeige euch heute, wie wir den Login mit User die im Bubble bauen können. Ich habe schon ein paar Sachen vorbereitet und wir gehen einfach mal durch. Als erstes gehen wir in das Datenbank Modell. Im User Data type haben wir neben den STANDARD Elementen, die bereits nativ mit Bubble kommen, ein neues Feld angelegt und das heißt use it und dass es ein Textfeld. Das speichern wir mit dem Nutzer.

Als nächstes gehen wir ein Design Tab und ich habe hier bereits drei Gruppen angelegt. Grob sein, loggen und Lockout. Als erstes gehen wir ein Zainab. Dieses Element ist visible um Page is loaded. Aber wenn Current users lockt in. Dann ist dieses Element nicht sichtbar. Das Element ist not visible. Darüber hinaus erstellen wir folgenden Workflow, wenn der Nutzer auf Login klickt. Start/edit workflow Dann haben wir hier Hüt Group sein Ab und Show Group Login. Darunter haben wir im Design Tab die Gruppe Login.

Diese ist ebenfalls visible um page load, aber wenn Current users ist lock, den ist diese ebenfalls nicht sichtbar. Wir haben wiederum den Workflow für den Button seiner bereits angelegt. Das heißt Hyde Group Login und Show Groups seiner. Die Gruppe Loggien ist im Bubble unterhalb der Grube Zainab und damit quasi verdeckt. Schließlich haben wir als letztes Element die Grube No Code. Wenn der User eingeloggt ist, haben wir damit die Möglichkeit uns wiederum ausloggen. Dieses Feld sieht hier ist nicht visible um Page is loaded und wenn Current users lockt den. Dann ist dieses Element sichtbar.

Als nächstes legen wir nun jetzt den Workflow fest, um uns mit einer User, die einzuloggen beginnen die Group seiner und ihr seht, neben E-Mail und Passwort haben wir auch die Input Field User id sein ab. Das ist ein ganz normales Textfeld. Wir gehen jetzt auf den Button ab und machen Start/edit workflow.

Wir gehen hier rein Account seien die User E-Mail, Input, E-Mail seiner Balou, Passwort, Import, Snaps Value und Change Field und wir machen hier User ID ist Input User ID Snaps Value. Anschließend machen wir Element actions Reset Inputs und haben dann Reset relevant inputs. Anschließend gehen wir in die Grube Lockout. Diese würde, sobald wir nun Lockdown sind, was automatisch im Bubble passiert, erscheinen. Hier gehen wir auf den Button No Code und machen Start/edit workflow Account lockt die User.

Dies ist vor allem wichtig, weil wir auch den Login mit der User ID erreichen wollen. Schließlich gehen wir in die Group Login und gehen auf den Button Loggen. Ihr seht, wir haben hier nur User, ID und Passwort und gehen jetzt in Start/edit workflow Account lockt die User. Passwort input A's value, Logins Value und hier bei E-Mail Do Search for. User User, ID. Equals Input User produzierte Slogans Value Anschließend nimm dir E-Mail und First Item und wir gehen jetzt einmal in Preview, um uns das Ganze anzusehen.

Wir machen den Sign Up. Wir sind jetzt eingeloggt. Also gut. Gehen auf Log In. Und wir sehen, wir sind jetzt lockt ihn mit dem Nutzernamen. Ich hoffe, ihr konntet sehen, wie einfach und toll es ist, im Bubble sich mit einer User in die einzuloggen und seinen Login und seinen Zainab zu modifizieren.

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