Bubble.io Tutorial für Anfänger - Lerne Bubble.io in 2 Stunden [Deutsch]

Dieses Bubble-Tutorial für Anfänger zeigt dir, wie du schnell mit Bubble loslegen kannst. Lerne in 2 Stunden zu programmieren! Wir entwickeln gemeinsam Schritt-für-Schritt eine Chat-App, wie Whatsapp, Facebook Messenger oder Telegram. Schau Dir dieses Tutorial an und lege los!

Video Transkript

Im ersten Teil legen wir nun Layout und die Grundkomponenten von unserem Messenger an. Ihr startet eine neue Seite und achtet darauf, dass das Element nicht fixed ist und wir machen 1200 x 820 Pixel. Nennen das Ganze "Studio Messenger" Jetz legen wir als erstes mal eine Navbar an.

Und wenn ich das Layout mache gerne auch ein bisschen um Gefühl für für die Struktur von der ganzen Seite zu bekommen. Wenn wir nun den Haupt Container machen, besteht der aus drei Komponenten. Y 60, X 0, Breite 320 und das ist jetzt 740. Und der linke Container ist dort, wo wir die Gruppe der Liste der Unterhaltung haben. Dann haben wir genau das gleiche auf der rechten Seite. Das heißt auch dort und das ist die Gruppe Profilinformationen.

Und in der Mitte haben wir auch noch mal eine andere Farbe. Nur das ändert sich natürlich nachher. Und in der Mitte haben wir noch mal eine Gruppe. Die ist nun auf der X 320 ebenfalls 740 und eine Breite von 560.

Wir nennen diese Gruppe "Group Unterhaltungen" Und auch hier Im nächsten Teil stylen wir nun die einzelnen Elemente.

Wir arbeiten uns jetzt schrittweise vor und beginnen mit der Navbar als erstes. Dafür müsst ihr das Plugin installieren, "Material Icons von Google". Ein original Bubble Plugin. Zieeht das Ganze rein. Und wir nehmen hier das Chat Icon. Und machen das Ganze 32x 32 auf der x-Achse 20 und auf der auf der Y-Achse vertikal zentrieren. Schaut, dass das in der Gruppe ist und als color #388DF5 die Navbar stylen wir auch gleich. Diese machen wir weiß und legen auch einen Shadow an. Farben nehmen wir  #728137 und machen 8 % Blur radios 12. Vertical offset 8. Und horizontal 0. Als nächstes jetzt machen wir das Logo fertig. Wir nehmen als Text Roboto. Mit einer Stärke von 500.

Die Farbe können wir lassen. Machen 24. Jetzt kopieren wir den Text. Hier machen wir eine Stärke von 300. Mit 14 sieht's doch besser aus. die Höhe ist 18. Hier schauen wir, dass sie 12 Pixel entfernt sind so Wir machen noch mal. wenn du richtig so und jetzt haben wir hier das Logo. In der Navigationsleiste haben wir auf der anderen Seite. die Gruppe aus dem wenn wir mit nun dem im Profil Wir suchen hierfür aktuell nach einem Demo Profil. Schön.

Machen das ganze 32/32 und eine Roundness von 250. Und vertikalisieren zentrieren das. Center. Also Arrange, "Center vertically" vornamen machen auch hier jetzt Roboto. Etwas längere Namen, deswegen finde ich die halt in Ordnung. Kopieren das auch. und hier Ich nehm jetzt hier ein blaugrau ungefähr und die transparency packen wir auf ca. 20%.

Auch die Schrift nehmen wir eine Roboto. Aber 300. Und die Größe ist 10. Und was dann zusehen besser, wenn wir das so machen. Ich denke, dass wir aber trotzdem auf die Farbe sichtbar ist und auch von der Höhe her, könnte ich jetzt 12 machen. Text zentrieren. Also, wenn hier 32.

Hier haben wir 20 und 18 und hier auch 14. Und so  sind wir auf 32. Dass jetzt die Höhe richtig stimmt. Hier das Ganzee in eine Gruppe packen und die Gruppe zentral vertikalisieren. Auf der gleichen Höhe sein. Zwischen Gruppe Gruppe Profilinfo und Bild sollten 16 Pixel Abstand sein und diese Gruppe nun wiederum sollte eineen Abstand haben von 24. Machen das hier auch. Ich will hier auch 24 machen. Das machen wir nachher gleich dynamisch. Das ist jetzt nur fürs Styling wichtig. Das nächste ist ein Shape, was wir anpacken. 60.0.1 Pixel und wir nehmen eine Color, die wir auch vorhin schon hatten. Bild bis 20 Pixel. Normalerweise nehmen wir 8 Pixel Schritte - aber auch hier immer mit ein bisschen Fingerspitzengefühl. Ich denke das 16 optimal ist.

Optimales packen jetzt im Styling auch gleich diese Glocke rein wieder eben gleiche Farbe. Diesmal mit einer Transparenz auch von 20, weil es nicht so groß ist und wir haben die Größe 24x 24. Den Abstand hierzu nehmen wir aktuell mit 10 Pixel und das heißt das sollten 16 sein und vertikal arrangieren. Nehmen wir hier nochmal den Separator 16 den Seperator.

Wir brauchen jetzt noch eine Message, dass wir hier zwei Nachrichten haben. Das wird dann natürlich auch später dynamisch sein. Roboto 300. Das ist weiß. Und line spacing 1.0. Und hier wie wie kriegen wir das hin? Wir machen einen background style. Nehmen hier die Farbe und müssen das zentrieren. Brauchen eine Roundness 250 Pixel. Und jetzt auch hier zentrieren und noch ein horizontal padding von 2. Und dann schauen wir, dass das hier 14x 14 ist. Und dann kriegen wir genau diese Beell, die wir hier hin packen. Und jetzt fehlt uns final noch der Button mit der neuen Nachricht.

Wir machen hier einen Button. Wenn wir diesen stylen, haben wir eben wieder, dass wir Roboto 500 nehmen. Letter spacing packen wir auf 2. Die Farbe auch dieses Blau. Und die Roundness nehmen wir 6. Center, dann vertikal zentrieren. Auch hier das Ziel wieder 16 Pixel zu haben.

Jetzt kopieren wir wichtigerweise die Sachen. Damit wir eben auch mit Responsive das Ganze leichter kontrollieren können. Auf der einen Seite, wir sehen dann hier auch wenn die Gruppe logo ist fixed und auch hier. Hier kopieren wir die Elements und auch hier fixed-width und wenn wir jetzt auf Preview gehen, dann kriegen wir ja eine schöne Navbar. Die ist noch nicht dynamisch. Das kommt natürlich dann im nächsten Schritt. Bis dahin jetzt die linke Seite. Das erste was wir machen ist, dass wir die Farbe rausnehmen und hier im Hintergrund eine neue Farbe annehmen, dass ein blau das wird dann der Grund sein und bin eben ein Transparent von 70. Das heißt hier, das hat gar keine Farbe in der Mitte in der Unterhaltung, weil wir diese ganz nach vorne packen werden. Bring to front. Hier haben wir keine Farbe, sondern wir haben einen Border auf der linken Seite solid und nehmen auch hier wieder dieses blau blau grau und mit einem Transparenz von ca. 20 und auf der rechten Seite.

Auch mit wiederum einer Transparenz von ca. 20. Muss das jetzt anschauen. noch hier denn jemand wie auch die Farbe raus, kannst das jetzt anschauen haben wir eben diese diesen Aufbau, jetzt gehen wir in die linke Seite rein, so, wenn jetzt ein neues Textelement anlegen und fangen hier an anders zu gestalten im Layout weiß, dass die Übersicht unsere Chats und Unterhaltungen holt 20 und Roboto mit der Stärke 500. Farbe passt Line-spacing ist 1. Vertikal Text zentrieren. Von von der x-Achse und von der y dieser Gruppe sind wir jeweils 24 weg.

Die Höhe sollte 30 sein und die Breite in etwa 60 57 passt. Als nächstes gestalten wir eine repeating group, wo wir die Gesichter der Kollegen drin haben. Repeating Group ist auf der einen Seite 24 der anderen Seite sie aktuell zwar sowohl wie auch zwei 72 Pixel haben. Wir machen ein horizontal scrolling hier müssen wir Type of content "User" machen. Das füllen wir nachher gleich aus. Das ist ja zum Glück drin. In der Höhe sind wir bei 24 sind wir aktuell bei 11 und hier die Höhe der repeating group müssen wir bisschen größer machen. Wir brauchen 5. Wir haben keinen Style. Ich mache gleich jetzt noch mal Separator zum Entwickeln. Als erstes: Wir nehmen hier das Bild. Das Bild packen wir hier rein. Und ändern hier auch die größte circa 40. Wir packen hier den Namen rein. Vorname "Jenny" und sieht wir arbeiten nicht immer mit den gleichen Farben.

Wir brauchen Line-Spacing von 1. Wir brauchen hier 14. Notwendig für die Höhe hier auch die X und hier haben wir 5. Das heißt wir sollten auf die 48 gehen, so dass wir acht Pixelabstand haben. Ihr merkt schon, es sind hier immer ähnliche Abstände und wir können jetzt den Seperator aus der repeating group rausmachen, damit der nicht so auffällt. Soll ich dir nachher alle unsere Nutzer die wir eben anzeigen, ob die aktiv sind oder nicht? Das bauen wir dann zu späterer Zeit. Nach oben habeen wir 24.

Jetzt kommt der nächste wir können eigentlich hier. Dieses Element den probieren wir jetzt das Formatieren und nehmen Textelement jetzt und ihr seht hier nun wenn wir auf Paste formatting gehen, kriegen immer das gleiche Element einzige was wir machen müssen es auch die Höhen bisschen ändern hier reichen uns 24. Und auch hier 2 oben sind jetzt ist es korrekt. Und jetzt brauchen wir hier eine Liste aller unserer Unterhaltungen. Das ist das erste was wir machen das wieder eine repeating group Zahl 272. Type of Content ändern wir später gleich. Jetzt, aber text ich wohl noch links, also auf rechts.

Hier haben wir 16 Abstand. Der Grund ist, weil wir jetzt und dass sie dir sofort, wenn wir jetzt eine normale Gruppe machen, jetzt bauen wir eben dieses Chat Feld als background style ist Flat. Rundung von 6. Wir machen hier 0 und auf der Y: 8, damit wir hier 8 haben und dann darf 16. Das heißt  24. Höhe machen wir 66 nicht perfekt, weil wir eigentlich immer ein Faktor von acht haben und das eben auf 272 jeweils. Nennen dasUnterhaltung Call to action. Denn da  klicken  wir später drauf. Und jetzt nehmen wir wieder dieses Element und ändern, aber die Größe ist bisschen Größe ist 42 jetzt wir gehen auf der X, den wir 16 auf der Y vertikal zentrieren, wir packen jetzt wieder einen Text rein.

Wieder den Vornamen 500 hier 14. Hier sollte es Ich denke, 12 sieht gut aus. 16 finde ich fast ein bisschen zu weit. Der Vorname . Jetzt nehme ich hier das gleiche Element. Und wir brauchen hier eine andere Farbe, also andere Stärke erstmal, die 300 ist gut. Höhe 1200 und das Spiel kennt ihr bereits. 7 packen bisschen Transparenz rein ca. 80% Sieht nicht ganz so stark aus. Schau. Jeden Fall 20 nach dazwischen zwei Pixel, damit wir auch 42 haben das auch wieder 12 und jetzt haben wir noch einen letzten Teil.

Das ist die Uhrzeit, hier war 01:25 PM und  nehmen das gleiche. Einziges was wir ändern ist rechts zentrieren und hier ebenfalls 24 brauchen anderes haben wir hier wären hier 16, also brauche ich auch 16 mit 14 und dann die gleiche Höhe, wenn und so sieht, die wie wir diese Karten haben. Das wird natürlich gleich alles dynamisch. Das erste ist, wir ziehen die Gruppe rein, hier ist der Conversation  Header. Wir nennen das so. Weiß. Roundness machen wir 6 Pixel.

Und Wir wollen quasi 512, damit wir auf jeder Seite zentrieren auch 24 haben und nach oben hin auch 24. Bonn zum Thema wegen diesem ihr seht, wenn wir hier zentrieren  ist es 23 statt 24 bzw. Sind hier, aber hier ist 23. Aber das liegt an dem Bordern, weil wir vorhin in der gruppenunterhaltung die border und die sind einrücken, das heißt es dir ein Pixel weniger.

Das passt aber trotzdem nächsten Schritt gleiche Spiel, wir nehmen wieder das Bild hat uns hier rein diesmal aber mit einer anderen Größe heißt wieder etwas anders die 48 zentrieren es vertikal und packen Sie hier auf die die 16 im Text Element im wieder vorne haben. Diesmal kopieren wir den Style von hier. das hilft uns auch konsistent zu bleiben, Abstand und Nachnamen für diesen Fall größer machen als Namen größeer ist und geben ihr noch den Status rein, dass sie  online ist. 114 von Und 260 könnt ihr beide kopieren und dann werd bald sind ihren mach den Abschnitt 24. Denke, dass 16 erheblich besser ausgeht näher dran ist und in dieser Ecke auch noch mal zwei Dinger, die wir jetzt machen ein natives Icon. Online Videokamera für video calling vertikal zentrieren 80 und Vertical. 16. Und  hier dass das Phone.

Letzte Teil hier: Die Kern Unterhaltung hier findet, natürlich in der conversation statt, das machen wir später, wenn wir ewig die Dynamik einbauen auch hier dann die die einzelne message, was wir jetzt noch machen ist wir wir nehmen das hier und packen das runter auch zentral horizontal brauchen hier eben auch 24 zu unteren Rand. Cool und anstatt, dass wir jetzt hier diese Sachen machen noch mal raus fang an mitnehmen mit einem input viel. Wir zentrieren vertikal. Nachricht schreiben, wir packen wir Roboto regular rein setzen und Designfarben wie oben ein B placeholder grey background color none.

Und hier wichtig auch keinen border das heißt auch bei denen auch bei den anderen Fällen. An der Senden Button zunächst mal eine group. ja, Standard: 20 40/40 und wenn jetzt das anschauen sie dir schon Center vertical.

Wir haben hier 20 Pixel einfach, damit das ganze so fürs Auge sicch besser anfühlt. 20 packen jetzt ein Icon in die Mitte rein mit Ist schon hier mehr 8. Denke sollte sich machen besser anfühlt, aber vielleicht zunächst noch mal auf der Seite ein weiteres Icon für Anhänge und Fotos. Die ist kaum zu erkennen mit ner Transparenz und vierzig das nicht ganz so rein schaut von der Größe, 24 von der Seite her auch 20 auf die X und auf die Y vertikal zentrieren und jetzt sehen wir dass du hier eben überschneiden. Das heißt auch hier sollten wir Abstände haben. Von der Sizee 16. Lust bisschen zu 40 noch mehr 6 will er oder 60 16 mit Chancen 8. Bitte, die drei noch kopieren, die dafür das wir das eben schön zentral haben und schauen uns das mal an Gruppierung ist vor allem wichtig, dass das Ganze responsive bei mir immer wieder verschiedene Bildschirmauflösungen haben, dass das Ganze eben mit geht mir das anschauen, dass das Ganze eben sich schön überschneidet wegen richtig hier wäre mir natürlich auch noch alles ein bisschen optimieren.

Bei wem ich hier eben noch die Texte kopieren dann sind wir auf einer Linie, aber das kommt dann im Bonus teil. So ist mit dem mittleren Teil, das sind die beiden wichtigsten und damit der Messenger jetzt nicht ganz aus der Rolle fällt. Machen wir noch bisschen Profilinformationen auf der rechten Seite, damit das Ganze schön realistisch aussieht, das haben wir eben auch bei den echten Messengern, dass wir hier noch mal Informationen haben und fangen an mit der und jetzt seht wie ich auch ist voll bei Bubble ist.

Wir können sowohl die Größen benutzen als auch die anderen Abstände. Des heißt je nachdem hier gehen wir auch auf 272 und schauen, dass wir auf beiden Seiten 24 haben. Können das auch zentrieren horizontal und nach oben auch die 24. Als erstes, gleiches Spiel. Wir  packen das Profilbild rein. Und diesmal habe ich lieb die Größe 80 80 Pixel horizontal. Wir packens hier auf die 16 Pixel, dann nehmen wir hier den Text packen den rein unter vertikal und so.

Richtig zentrieren auf beiden Seiten mit 19/18 heißt haben 272. Ja, 32-40 müssen 116 auf beiden Seiten sein, sehr gut noch hier. Wie wird das noch mal? bisschen kleiner und Vorständin als  Job. Doch mal einen Abstand runter. Ja ist besser und dann nehmen wir das in die Gruppe packen noch mal rein schon. Dieses mal Abstand von 24. Haben bisschen größer hier können wir jetzt den Text nehmen. wo ich es eben auch hier in die 16 doch gleich wieder 14. Uhr und das kannst du bisschen größer werden und dann fangen wir an mit dem mit dem Wohnort. Wohnort. Denke 8 ist gut. Wir nehmen Deutschland. Und nehmen jetzt aber auch wiederum die #3B3B3B vielleicht bisschen größere Farben ein bisschen stärker und was wir jetzt hier machen müssen es tatsächlich die Größe auch ein bisschen reduzieren und zweimal auch, was war 200 machen. 200 und hier eben ein Icon für die Location. Dezent transparent auf der Seite aus 16.

Und jetzt kopieren wir diese drei zusammen. in den hier zentrieren vertikal und brauchen noch einen Seperator Linie und stretchen die bis zum Rand von beiden Seiten und anstatt, dass wir das machen nehmen wir einen border-style. Die definieren wir einfach und machen background-color und gehen wieder in der transparency of ca. 40. Das gefällt mir nicht, dass das Setting ist jetzt nicht gut. Gruppen bisschen nach unten ziehen zu zu dunkel muss man außen runter. Jetzt packen wir diese Gruppe. So unser letztes Element.

Gegen drüber und merken, dass wir auch hier. Und hier brauchen wir keinen border unten, weil das die letzte ist, hier nehmen wir noch ohne Nummer Nummer Adresse und nicht glauben, wir sehen das hier tatsächlich Abstände bisschen zu gering sind sollten doch auf 16 hoch. 880 Tattoo 666, dass du auch hier 66 und zwar hier 16/16 Und jetzt eben noch unten auch die 16. Ich denke gerade, ob ich doch besser werde 12 gehen. 12 12 doch bisschen besser ausschaut. Sowie schauen wir das Preview an und jetzt haben wir quasi das gesamte Layout unsere chat application einmal einmal ausgelegt und im nächsten Schritt gehen wir jetzt in die in die Funktionalität von dem ganzen. Jetzt wo wir das Layout fertig haben geht's weiter, indem wir die Datenstruktur machen und glaubt dieser Ansatz, dass man erstmal das Design hat und jetzt zum zweiten Schritt sich über die daten überlegt und dann das Ganze zusammen über die Workflows bringt.

Man kann natürlich auch anders Bubble machen auch gerade bei komplexeren Produkten ein bisschen mehr Planung hat hilft das Ganze ungemein. Man kann natürlich auch andersrum anfangen.

Und im ersten Schritt, die die Datenstrukturen die Workflows machen und dann das Design. Ich persönlich habe das Design lieber am Anfang fertig gerade um dann auch ein Gefühl zu haben, welche Elemente will ich eigentlich bauen, also will ich wirklich Videochat oder will ich das nicht haben wir mehr ziehen Daten reingehen, dann lass uns doch als erstes mal den User festlegen, wie wir hier sehen haben wir Vorname Nachname, wenn Wohnort ihrem Telefonnummer E-Mail und natürlich auch ein Bild. Vorname ist ein Text Nachname ebenfalls ein Text E-Mail Feld ist bereits nativ bei Bubble im Login, wir machen Telefonnummer, machen wir auch einen text. Ich zeige euch nachher warum, weil wir das über die random User API festlegen und dann besser dann auch eine numbers zu haben, weil wir das Festlegen ja, ich habe gerade bei bei Telefonnummern aufgrund der Vorwahlen und dem Plus hier den Vorteilen Textfeld und das dann zu Extrakten, wenn man darauf operieren müssen, dann die Stadt den Wohnort noch am Wohnort mir jetzt auch im Text sind keine geographische Adresse und nur noch die Berufsbezeichnung.

Wahrscheinlich manuell eingeben paar Sachen und als letztes im ersten Schritt Profil. Wie willst das ist ein Bild der der nächste der nächste Typ, den wir brauchen wir die Nachricht. Das heißt die einzelne Nachricht zwischen einem User und einem anderen User. Das hat bereits ein Creator Field und Modified und Created Field. D.h. wir haben die Kerninformationen, was wir brauchen ist die den Text der Nachricht, also den Inhalt und weil wir nachher noch ein Bild uploader im Bonus bauen wollen, das Bild.

Wir wir jetzt brauchen als dritten und letzten Datentyp ist die Unterhaltung selbst, dass die Unterhaltung zwischen zwei Leuten die hat einerseits die Teilnehmer, das sind user vom Datentyp und es eine Liste an News, also mehrere Leute mindestens aber einer und eine Liste an nachrichten sollst du nehmen die Nachricht und machen daraus eine Liste, jetzt verknüpfen wir das beide noch mit dem User, weil wir vielleicht nachher Operation machen wollen, wie dass wir durchsuchen wollen, welche User oder ob die schon dabei sind, daher fügen wir das noch mal hin zu Zeit die Unterhaltung einen des Users sind eben an der Unterhaltung eine Liste an Unterhaltungen und die Nachrichten des Users, das ist eine Liste an Nachrichten, das ist unser Basic modell für unseren Chat und im nächsten Schritt erstellen wir jetzt User und dann die einzelnen Workflows, um das alles miteinander zu verbinden, unser Ziel ist ja ein Messenger zu bauen und anstatt jetzt den ganzen Login-Bereich zu machen, in der in der Demoversion möchte ich euch ihr zeigen, wie man im development mit einer tollen API User anlegt, die dann in eurer App benutzt werden können, dafür machen wir als erstes Mal eine neue Seite und wir nennen die user-generated und wir brauchen die auch nicht klonen, sondern machen die frisch.

Hier gerne die gleichen Größen und auch nicht gemacht die Seite user-generated und als erstes was wir brauchen ist ein Plugin und es gibt hier die kostenlose Version random User Generator. von Coaching no code apps. Das wurde bereits 92 000 Mal installiert und was wir hier machen können ist es eben eine Liste an Usern erstellen können ist nichts erstell mir eine repeating group auf unser user-generated sein. der type of content ist generate list of users results und hier data source get data from an external API auch hier wieder, die list of users. Und gender lassen wir komplett raus und die Sprache also die Nationalität die machen wir "de", also deutsch.

Und jetzt nehme ich hier die results heißt wir kriegen 10 results, das heißt, wir können auch hier full list machen größer, damit wir das richtig bekommen und jetzt fühlen wir eben diese Daten heißt wir ziehen dann immer schreien Insel dynamic data dynamic image. Und in ihrem bisschen runter und dann haben wir hier picture large. Passt noch ein wenig an aber das nicht ganz so würdiger nächstes der Name, wir brauchen alle unsere Daten. Das heißt nächste ist der Vorname first name das zweite ist der packt das mal hier rein last name. Dann haben wir noch den Ort und wir seht wir können da immer rein gehen und wir machen Locations city.

Dann machen wir das doch bisschen kleiner machen alles. Hier haben wir noch die E-Mail und als letzten haben wir noch die Telefonnummer.

Und jetzt testen wir es einfach mal mit einem preview. Wo wir sehen jetzt wir kriegen Namen Sergej Beckert. Bitte einen deutschen Telefonnummer in dem Ort, Weinstein oder Frau Bruch Adelbert Schipper Weißenstadt Saskia Reichl bekriegen auch immer Deutsch Telefonnummer und jetzt kommt eigentlich noch der letzte Schritt, wer das jetzt random haben wird es richtig anders sein, dass wir das ja auch in unserer Datenbank speichern wollen, um eben Demodaten von unseren Usern zu haben. Heißt wir stellen ein Button. das Speichern der und jetzt was passiert, wenn wir diesen neuen Nutzer erstellen wollen, wir gehen auf den Button speichern und starten den Workflow. Hier gehen wir auf Account und dann "Create an account for someone else", weil wir sind ja gerade eingeloggt. Die E-Mail ist Current' Cells e-Mail das nächste ist nun weil wir alle unterschiedlichen Dinge haben den Vornamen Current's Cell generate first name den Nachnamen Lasst das Profilbild? in dir das große Image die Telefonnummer ist sehr und der Wohnort ist Location City die Berufsbezeichnung fügen wir nachher gleich Manuel ein Wert auf Video gehen Können wir jetzt durchgehend welche wir mögen und ich denke z.b. Marianne Zehner klingt super Nummer ist gut. Ortes gut und wir speichern. Und wir schauen weiter. Andre Schilling Stadtoldendorf super. Hannes Flick in Hüfingen perfekt Wir refreshen die seite und sind wieder andere Bilder andere Namen Fatima Mohr Marktoberdorf perfekt. Ina Metzger das passt nicht ganz genau von der Location, deswegen haben wir hier immer die Kontrolle, das ist auch eingeben ist Alena Obermeier in Landsberg?

Und wir schauen uns jetzt mal die Daten an, die wir dadurch generiert haben, wenn wir in unsere Datenbank gehen unter AppData sehen wir jetzt die ganzen User und wir sehen eben was wir z.b. Auch Fatima morgen können und werden jetzt die Telefonnummer den Wohnort die E-Mail. Vorname Nachname und Profilbild und jetzt können wir z.b. Noch Grafik-Designerin eingeben. oder bei MEZ Beispiel Alena Obermeier können wir Staatsanwältin als Beruf eingeben insbesondere bei Applikationen EZB? Dating Apps ist das natürlich erheblich vorteilhaft, wenn ihr so einen Test user-generated habt gerade für eure die Mundarten. Steuerberater und Mariana ist noch Architekten.

Und wenn du jetzt natürlich die Applikation laufen lassen. Als Alena Obermaier, das ist dass das tolle, dass wir eben jetzt auch über Ihren Account die Applikation nutzen können, das ist erheblich von Vorteil, wenn wir zehn nächsten Schritten die Workflows machen. Jetzt gesehen, dass wir diese Accounts haben, aber nie können wir die darstellen, wenn wir zurückgehen in die Indexseite, dann nehmen wir doch die Navigationsleiste und machen das dynamisch.

Das heißt anstatt, dass wir es statisch haben, nehmen wir jetzt current Users Vorname. und hier können users Fuß Bezeichnung und hier gehen wir dieses Bild und machen könnt users Profilbild prozessieren, das mit diesem Plugin vom Bubble, um eben direkt zu arbeiten resize to fit dimensions und hier stretchen wir das ganze und machen dann 32x32 und wenn jetzt die Seite Preview neben als User z.b. Alena Obermeier. Dann sehen wir dass wir Alena als Staatsanwältin jetzt haben und umgekehrt, wenn wir Hannes Flick machen. Sehen wir Hannes Vorstand? Dadurch sind unsere Demodaten jetzt absolut verfügbar in unserer Studio messenger Applikation, jetzt liegen wir richtig mit der Funktionalität los. Das heißt wir nehmen uns eine Sache nach der anderen.

Das erste ist die repeating group size hiermit type of content User und wir machen eine "Do a  search" User aktuell modifizieren wir das nicht, das können wir später machen, wir wollen die hier alle Nutzer machen hier, wenn wir später die Aktivität natürlich reinbringen und machen hier noch eine Sache, die wichtig ist. Dass wir meiner Seiten können User machen, wir wollen ja uns nicht selber anzeigen als aktive Nutzer. Ist nämlich hier das Bild packen eben auch Current Cell's User. Profilbild. Prozessieren das "Resize to fit dimension by cropping" sind hier wieder, dass die Größe sich verändert hat recht ist wichtig haben wir das und hier haben wir den anstatt, dass wir einen statischen Namen haben schönste aus users. Vornamen und cut of content of the elements not tall enough und was wir jetzt noch machen ist tatsächlich dieses kleine grüne Lämpchen und nehme hier an Grünton #49BC78 und was wichtig ist, dass wir diesen border machen mit Weiß und zwei natürlich müssen wir auch noch das ganze abrunden, damit das auch echt aussieht da noch 12 mal hoch.

Wohnt jetzt Previewen wir das Ganze schonmal. Sollten jetzt die User haben. D.h. Hier können wir später dann die Aktivität einbauen, aber wir haben schon mal ich dich nutze aus unserer Applikation nächste ist jetzt dass wir diese neue Nachricht an geht. Das erste ist mal hier hier den Farbton und wenn man das ein bisschen heller ist und sollten hier nun ein Popup erstellen. nonstop ab neue Nachricht und vom Design, 24x46 und ja, ja 20-30, das hatten wir auch 600 und bin drin das ganze Ja, ja du vielleicht 600 noch bleiben wir dabei und wir brauchen quasi zwei Felder dafür das eine ist, dass wir den Empfänger auswählen. auch Bin ich mir auch die Farbe aus dem Roboto Höhe auswählen, die ins machen wir aus nicht validd wir brauchen auf jeden Fall hier dynamic choices und das muss ein User sein und die data source list to search for user müssen es nicht constrain and aber wir wollen natürlich nicht an uns selber eine line nachricht schicken sollst meine User und hier die Caption bedeutet, was wird angezeigt und dann nehmen wir den den Vornamen und können das natürlich noch.

Erweitern Vorname und können diese Nachnamen ich kontrolliere  hier mal ganz gerne ob de wirklich das Leerzeichen haben, das ist manchmal eben nicht genau perfekt. Dann sind es auch zwei, aber da  muss man einfach ein bisschen schauen. Default value brauchen wir nicht das input soll ich nicht leer sein und Wir brauchen ein auch gar keine background-color gerade und braucht kein Border und wir sehen das einfach aus und darunter packen wir auch noch ein multi-line Impuls für die Nachricht schicken können doch hier Roboto. Farbe ist die gleiche. Für ein Thema #D3D3D3 und wir brauchen keinen background und brauchen auch keinen wurde heim und auch hier wollen, wir haben ausschließlich, dass der input nicht empty sein soll, dass wir eben eine Nachricht haben und ein bisschen Abstände 24 hier. Ach auch schon ein ausschaut, dass ich auch gerne mache. Ist tatsächlich ein Seperator hier rein.

Es passt, dann passt das ganz gut 1 bis 100 und Farbe 72137 und leicht 20. Jetzt sind nur hier den Abstand oben 24. Ist irgendwie auch haben und dann wollen wir auch diese Nachricht versenden heißt Niemann besten den Button und hier da wir hier schon das Design haben. Hatten den popup rein. Zentrieren diesen vertikal und meinst dann sind auch kleiner und weniger. Fällt leicht, ich überleg gerade, ob nicht doch ein Border interessant wäre. Nehme doch auch das Grau und habe ein bisschen Transparenez weg.

Okay, jetzt haben wir dieses Popup und fang an mit den Workflows. Das heißt, wenn wir auf neue Nachricht klicken Start/edit Workflow, dann passiert erstmal folgendes wir gehen auf Element Action Show und zeigen das Popup. Neue Nachricht, wenn wir dieses Popup haben, dann wollen wir wenn jemand auf senden klickt. Wollen wir eine neue nachricht erstellen? Das heißt es I was wir machen ist Create a new thing. Wir erstellen ein Nachricht. Dies Nachricht haben wir einerseits den Text was heißt multi-input Nachricht schreiben. Value.

Das nächste was wir machen ist, wir erstellen noch mal neu. Sache nämlich eine Unterhaltung und die Unterhaltung hat nächste mal die Teilnehmer bei den Teilnehmern fügen wir hinzu aus dem Dropdown den Empfänger den Value. Das heißt, jetzt haben wir als ersten Teilnehmer der Unterhaltung den Empfänger, dann fügen wir die Nachrichten zu und das ist das Result von Step 1 nämlich diese neue Nachricht in die Unterhaltung und dann fügen wir hinzu den aktuellen Benutzer current user. Als nächstes jetzt haben wir eine Unterhaltung zu meiner nächstes ändern wir bei uns im aktuellen Nutzer fügen wir hinzu bei Unterhaltungen Add das Result aus Step 2, nämlich die aktuelle Unterhaltung. Gleichzeitig fügen wir hinzu bei Nachrichten, das Result aus Step 1. Die neue nachricht und jetzt fügen wir die Unterhaltung zu dem anderen Usern so wie machen wir dass wir gehen auf Data. "Make changes to a thing" und wir wählen hier Dropdown Empfängers auswählen. Value, das ist ja genau der User und jetzt sehen wir die Intelligenz vom Bubble. Er hat erkannt, dass das ein User ist und wir verändern das jetzt was verändern wir naja Unterhaltung add results of step 2 und Nachrichten hätte Result of. Step 1.

Als nächstes müssen wir jetzt noch wenn wir das eingeben haben, die Inputs resetten, dass es generell eine gute Praxis weil dadurch, wenn man wieder drauf geht, die Inhalte aus dem Formular leer sind und schließlich Element actions height, weil wir das Popup verschwinden lassen wollen. Bei mir jetzt den Workflow testen können wir das gleich sehen, wir gehen auf neue nachricht. Wir wählen bei so als Fatima aus. und wir senden wenn wir jetzt in den Workflow in die Daten gehen, sollten wir unter Nachrichten. In den nun das meine erste Nachricht Bild haben wir keins und wenn wir Unterhaltung am mir die erste Unterhaltung die zwei Teilnehmer hat, die ein Created Date hat, die ein Creator hat. Nun möchten wir diesen nun im nächsten Schritt zeigen, wie diese Nachricht auch an nämlich in den Unterhaltungen.

Das heißt, wir können hier sagen, der type-of content diese diese repeating group ist eine Unterhaltung data-sort, wir suchen nach Unterhaltung und wir haben das constraint, dass der Teilnehmer den aktuellen Nutzer beinhaltet, wir sortieren das ganze bei modified Date und möchten es möchten die neueste Nachrichten oben haben. Gleichzeitig möchte ich hier den Test machen, ob wir das auch sehen, das heißt, wenn wir jetzt reingehen müssen wir als erstes parent group thing ändert und daraus eine Unterhaltung machen und das heißt jetzt ist diese Gruppe hier eine Unterhaltung und wie nehmen die data source current source Unterhaltung ist ganz wichtig, weil wenn das nicht weg ist, kommt nichts durch und haben jetzt parent groups Unterhaltung, die wollen Nachrichten und wir machen das last item und neben den Text und cut of content is not tall enough hier machen wir ebenfalls in der Zeit nun ein dynamisches Feld die Parent Groups Groups Unterhaltung Nachrichten Last item und wir nehmen das creation date der Unterhaltung und wir formatieren das ganze nach der Timezone und hier wollen wir den Parent groups Unterhaltung Teilnehmer first item und wir nehmen den Vornamen und hier nehmen wir Parent Groups Unterhaltung Teilnehmer first item nimm das Profilbild hier prozessieren, das ganze 100 in der quality bis weiß und wir stretchen das ganze hier wiederum das gleiche die 320 als Standardgröße, wie muss das wieder anpassen aus 42.

Jetzt schauen wir im Preview und das ganze noch mal an. Haben jetzt die erste Unterhaltung hier und wenn wir nun einen neuen Empfänger auswählen, z.b. Andre. Sehen wir jetzt, dass die neue Unterhaltung oben ist. Somit haben wir die linke Seite mittlerweile sehr gut abgebildet mit den Workflows. Im nächsten Schritt gehen wir in den Workflows auf die rechte Seite, was heißt die einzige Unterhaltung, die wir dynamisch anzeigen wollen. Wir sind bereits sehr weit gekommen. Jetzt ist die Frage, wenn du hier drauf klickst auf eine Message, dass das hier angezeigt wird und auch hier heißt, wie machen wir das erste ist, dass wir diese Gruppe hier und dann sagen, wenn man hier drauf klickt display data wo wenn man sich hier so noch mal reinschauen und diese Gruppe Group Unterhaltung type of content ist eine Unterhaltung und da wollen wir die data source haben.

Das heißt für mich hier draufklicken in der Unterhaltung Gruppe Unterhaltung, wenn wir zwei Hier: data to display Parent's group Unterhaltung Parent group warum wir hier noch mal eine Gruppe haben, du gehst hier kurz diesen Workflow, weil ich sonst manchmal mit dem klickne Probleme habe. Display data Unterhaltung welche diese hier genau und könntest Unterhaltung, wenn das jetzt hier angezeigt wird, dann müssen wir hier sagen type of content auch eine Unterhaltung, der das durch ist, die Parent Group das ganze wichtig nämlich hier ist die Referenz und wenn es wieder in diese Gruppe rein gehen, dann geht das wieder weiter eine Unterhaltung und nochmals wem ist dieses Verschachtelung noch mal Parent's group.

Und wenn wir das Bild nehmen und gehen wir hier wieder diesen typischen. Dass das auch 320, dann nehmen wir dynamic data Parent Groups Unterhaltung Teilnehmer, wer mir den Empfänger als first item und nehmen das Profilbild posieren das mal wieder Zeit und Stretch. Wir haben hier Roundness 250, wenn wir schon dabei sind wir auch hier kurz diese grün Punkte mit was gut aussieht, hier benimmt. Besser aus war schon dabei Sie mit diesem grünen.

Dann hat man hier auch rein. Okay auch hier, wenn man wieder hier in der Gruppe reist auch jemals mehr Unterhaltung machen und auch hier wieder referenzieren und jetzt sehen wir hier Vorname und Nachname, das sind zwei Felder Teilnehmer first item. Vorname Leerzeichen Ist online lassen wir und jetzt schauen wir mal, ob das funktioniert. Erstmal willst du nichts wissen wir gleich jetzt mal den andre hier auf die Fatima klicken haben wir das und weil schon dabei sind. Mach mir doch auch gleich dieses relativ einfach selten. Dieser Bereich hier heißt Profilinformationen, der ist auch eine Unterhaltung und in den Workflow die mehr zweimal haben, machten wir ein copy paste und nehme aber nun nicht die Unterhaltung, sondern die Information.

Und weil wir auch hier die andere Gruppe haben, also die große um bessere Usability zu haben auch hier kopieren, pasten und nimm hier das hier. Wenn wir erst dort sind, das gleiche Spiel wieder, dass dir muss auch eine Unterhaltung sein Parnts Group. Wegen ihr Teilnehmer breitem profilbild. Und auch hier wieder 80 gleiche Spiel. Nachname und auch hier. der. Parent Groups Unterhaltung Teilnehmer first item Berufs bezeichnung und jetzt formatieren wir das ganze noch Uppercase, weil wir das groß geschrieben.

Auch hier in den Profilinformationen gleiche Spiel wieder in die parent group Wohnort möchte jetzt eben deutschlandweit gleich sollen wir nicht Datenbank. Habe jetzt noch mal hier in der Gruppe. Das heißt muss man aber formatierren Unterhaltung auch gleich hire machen. first item Wohnort mit der Telefonnummer das gleiche Teilnehmer item Nummer und und jetzt Preview ist ganz normal. Wenn die Seite geladen wird, haben wir nichts und wenn wir drauf klicken wir das komplette Feld der Leute und toll, dass wir sehr alles drin haben, jetzt geht's rund, wie stellen wir die Nachrichten dar?

Wir erstellen eine repeating group, die hat eine Breite von 512 auf beiden Seiten. 20 ist und ist eine Nachricht und nimmt die parent groups Unterhaltung Nachrichten. D.h.  ist eine Liste an Nachrichten. erstellen wir jetzt wiederum eine Group und setzen, die bisschen links versetzt.

Diese Group ist wiederum eine Nachricht und übernimmt die current cell's nachricht. Wir legen jetzt in styles fest und wählen als Background Farbe das Blau eine Rundung von 6. Höhe 32 breite 400 und legen das mal auf die Null darin jetzt einen Text. Höhe circa 24 im roboto-regular regulär 14 weißer Text bunt rechtsbündig und nebenan beiden Seiten acht weg, das heißt jetzt 84 und zentriren das ganze vertikal. Im Text nehmen wir die parent groups Nachricht Text und Legen daneben das Profilbild mit jeweils 24/24 und nehmen nun aus Parents group nachricht Creator Profilbild prozessieeren mit IMGIX das ganze resize Rage und wichtig ist, weil wir in der Mitte sein wollen nehmeen wir vier und gehen hier komplett an den Rand gehen hier komplett an den Rand.

Und der Abstand zwischen der Gruppe und dem Profilbild machen wir auf ich würde sagen 12 die Logik ist jetzt folgende, wenn und das ist jetzt zunächst mal das ist nicht sichbar this element is not visible on page ist das anstecken und wenn könnte es nachricht creator ist der Current User dann machen wir dieses Element sichtbar und das gleiche gilt für die Gruppe hier für die Nachricht heißt Element nicht sichtbar und page shows und Parent Group nachricht Rede ist der Current User, dann ist dieses Nachricht sichtbar, jetzt kopieren wir die Nachricht.

Mach was ganz linksbündig. nehmen die Farbe Machen wir das Ganze linksbündig. Nehmen die Farbe schwarz von der Gruppe machen wir das ganze Weiß. Und  dann  hier noch kleiner Design Issue. Center vertical bars ganze weiß und schreiben jetzt. Wenn dir das nicht Current User haben ist es sichtbar notwendige und wir nehmen auch hier das Bild. Können das hier anpassen und auf die Null setzen. Und sagen, wenn der Creator nicht der Current User ist, ist es sichtbar. Auch hier haben wir wieder zwölf Pixel Abstand und jetzt Previewen wir das ganze. Kann bei Pageload  nicht sichtbar aktuell und wir haben jetzt den den Text hier und den Scrollbar hier, das müssen wir jetzt noch kurz optimieren, das heißt auf der einen Seite diese Scrollbar haben wir hier das heißt machen die Group ein. Bisschen breiter packen, das auf 518 sollten jetzt diese Scrollbar reduzieren. Sehe gerade auch.

Hier ist die roundness 80. 250 doch auf 524 für den Krug Jetzt wollen wir noch anpassen, die repeating group den Seperator machen wir raus und wir gehen auf 11 einzelne Nachricht, dass wir das sehen, danach wollen wir noch die Nachricht und Antwort schreiben, dafür gehen wir auf type of content Unterhaltung Parent groups Unterhaltung müssen auch aufgrund der Usability hier noch einmal in die Gruppe rein und auch diese eine Unterhaltung machen und Parent  Groups Unterhaltung jetzt auf den Button klicken, dann können wir eine neue Sache erstellen nämlich eine Nachricht und die Nachricht hat den Text aus dem input, danach ändern wir ein neues Sache. Data make changes to a thing und wir ändern die Current cells Unterhaltung und dort fügen wir unter Nachrichten den results of the Step 1 zu dann fügen wir dem curren tuser fügen wir die Nachricht hinzu.

Und dem anderen User make changes to a thing Parent groups Unterhaltung Teilnehmer first item fügen wir ebenfalls die Nachricht hinzu schließlich der letzte. Was insbesondere bei mehreren Nachrichten entscheidend ist ist dass wir unter Element actions repeating group scroll to entry in unserer repeating group Nachrichten zu dem entry aus der ersten Nachricht hinzugehen und das scrolling animieren und jetzt schauen wir uns mal an, wie das Ganze abläuft. Wir haben bei Andre eine Nachricht wir drücken auf den Button und haben jetzt die zweite Nachricht. Gern gesehen ein letzter kleiner.

Den wir noch tun sollten ist nun ihr seht die Nachricht doch da. Das heißt, wenn wir den Workflow haben, der letzte Schritt ist Reset Input Element Reset input. Wir previewen das ganze noch mal. Schick mir André drauf und jetzt haben wir den Input reseted. Hast du jetzt machen ist ein bisschen auch die Button und uns die die kleinen Fehler anschauen, die wir noch machen müssen, als erstes wollen wir mal die Diskussion unter andre und Fatima uns anschauen, also, wie sieht's aus, wenn die eingeloggt sind, dafür geht ihr auf data all users und wir lassen das Ganze einmal laufen als Andre. Wir sehen jetzt schon das Andre.

Wenn er drauf klickt haben wir hier beschreiben eine Antwort. Hi Hannes und wir sind jetzt ein paar Sachen, das eine ist, dass wir hier diese Scrollbar haben und wenn wir noch einen weiteren User hier erstellen werden wir auch hier eine Scrollbar haben zwar nur einmal kurz in user-generated und erstellen noch mal 2-3 User. recht Thomas hier und Malta Und wenn jetzt nämlich laden. Sind wir auch hier diese Scrollbar size als erstes wollen wir die loswerden? Wir gehen dafür jetzt in Plugins. Web plugin Und geben ein "CSS tools" und das ist ein kostenlos plugin müssen hier nichts mehr einstellen gehen zurück auf unsere Seite und ziehen aus visual element CSS Tools rein, wenn wir jetzt in den Workflow Tab gehen General page is loaded sehen wir jetzt unter Element actions dieses CSS und wir machen add custom style to hdss.to. Und ihr seht dann hier diesen Standard, das heißt wir können das Styles weglassen und jetzt ist die Frage welchen CSS-Code brauchen wir um die Scrollbars zu nivellieren, dafür habe ich was vorbereitet. Und wir gehen hier rein und haben webkit-scrollbar und die Breite und Höhe jeweils null Pixel, wenn wir jetzt die seite neu laden.

Dann ziehen wir es gibt keine Scrollbar mehr und auch hier haben wir das nicht mehr darüber hinaus sehen wir jetzt, dass der Name hier zu lang ist und deswegen nicht angezeigt wird, wie können wir das kurz lösen, wenn wir hier rein gehen in die Gruppe sehen wir wir haben das Element komplett remove das Deaktivieren wir und wir machen folgendes wir gehen in den Current cells User Vorname und truncated to to 8, das heißt wir reduzieren aus auf 8 stellen. Und schauen uns mal an, wie das jetzt aussieht. Das immer noch zu lang, das heißt wir machen es auf 6 Zeichen stellen. Und fügen dahinter noch zwei Punkte. Und jetzt haben wir aber bei allen, dass das heißt, wir müssen einen Conditioner Statement machen. Wenn Current Celss User first name. number of characters ist kleiner 7 Text dann was zeigen wir dann an Current Cells User Vorname und jetzt haben wir das perfekt gelöst, das heißt wir sehen Namen werden abgekürzt, wenn sie größer als wenn sie größer gleich 7 sind, ein weiterer Punkt ist dass André sich jetzt selber sieht und nicht Hannes das heißt, wie können wir das jetzt ändern, wir schauen uns einmal die Group an und wir sehen hier ist die aktuelle Unterhaltung und wir sehen first items Profilbild, das ist der Punkt size was wir machen ist, wir machen wieder eine condition parent groups Unterhaltung. Teilnehmer first item ist der current user

Wenn das der Fall ist, ist die image source Parent Groups Unterhaltung Teilnehmer item Nummer 2, also der zweite user Profilbild und wir fügen wieder unsere Komponenten ein. Gleiche gilt jetzt auch für den Namen im aktuell Parent Groups Teilnehmer first items firstname, wenn das Item ist Current User ändern wir den Text auf. max 2 bei der letzten Nachricht lassen wir jetzt aber die letzte Nachricht weiß bringt nichts die letzte Nachricht von sich selber zusehen, das heißt hier ist allgemein die letzte Nachricht, die wir die wir anschauen wollen in dieser Unterhaltung, das heißt das passt haben wir uns doch einmal an im Preview und wir sehen jetzt Hannes auf der linken Seite und müssen das noch kurz adaptieren, die beiden groups heißt auch hier.

Wir gehen rein, wenn Parents Groups Teilnehmer first item. Schauen es uns kurz an Auch das passt und jetzt noch kurz das Informationsfenster seist auch wieder das gleiche Schauspiel wieder rein image-source auf jetzt hier machen können ist wir nehmen. Copy conditional formatting können das hier rein. Paste conditional formatting werden jetzt hier auch das gleiche und auch hier paste conditional formatting und können dann hier. Items Berufsbezeichnung heißt Berufsbezeichnung und formatieren das ganze upper case und auch hier wieder das gleiche Schauspiel paste conditional formatting, wenn hier den Wohnort Deutschland.

Wäre das hier kurz die copy conditional, weil das näher dran ist. hier conditioner Zwei Telefonnummer und auch hier paste Conditional eben die E-Mail, dann schauen wir uns das noch mal im Preview an. Ist dein kurz eine neue Nachricht wählen z.b. Alina aus oder Britta?

Jetzt hier die zweite Nachricht. Und wenn wir uns als sehen unterschiedlich in allen Bereichen und wenn wir jetzt uns einmal als Britta und wenn wir uns jetzt einmal als Britta einloggen. Sollten wir auch hier wiederum sehen, dass Andrea ihr eine Nachricht geschrieben hat. Eine Kleinigkeit, die ich gerade noch sehe ist dass wir die in die roundness bei der Unterhaltung in rein in die repeating group und wir sehen das hier Rundung 250. Perfekt wie eine Sache noch, wenn die Seite geladen wird, dann wir jetzt immer ein leere Seite, das heißt wir wollen wir einen Nachricht anzeigen, wenn page is loaded, ich mache das mal blau oder mit wissen, das war das CSS, aber ich mache jetzt noch mal ein neues, wenn page is loaded. Wollen wir im Endeffekt, wenn wir hier gesehen, wenn wir auf Display data in der Gruppe Current Cell's Unterhaltung D.h. Was zeigen wir an und hier würde ich sagen, wir kopieren das einmal. Und anstatt Current cells Unterhaltung machen wir do a search for the Unterhaltung wichtig und dann sorgt bei Und nimm hier das first item. Wir kopieren das kurz und auch in der Gruppe Information auch das first item jetzt neu laden jetzt neu laden, dann sehen wir jetzt wie die immer neueste Unterhaltung und jetzt sehen wir eben wie wenn wir jetzt noch mal absenden und refreshen sehen wir das immer die neueste Unterhaltung oben ist jetzt möchte ich noch hier in diesem Chat Fenster ein paar Kleinigkeiten ändern, ihr sieht auf der einen Seite, die die Köpfe sind hintereinander, das ist nicht normal bei eigentlich immer nur der letzte Kopf angezeigt wird und auch. Hier drüben eben immer der Letzte, wenn es abwechselnd das müssen wir lösen und das andere ihr seht es ja schon.

Die Abstände sind gerade nicht Standard und wie gehen wir vor das macht jetzt in zwei Schritten als erstes wir nehmen uns mal diese Texte vor hier gibt's kein Plugin, sondern eine Methode von Erde, da habe ich im Forum unten verlinkt und im Content und wir erstellen hierfür drei HTML-Elemente und überschreiben quasi das CSS. Erste was wir machen ist. Wir löschen jeweils diese Textnachrichten zweimal und haben jetzt nur noch die Bilder sollten einen Größe haben von 32/32 auf der X 8 ist auch zu große sollte und was willst machen ist wir packen als erstes ein HTML-Element rein. Das kann jetzt überall sein auf der Seite. Dies HTML überschreibt quasi unseren unsere Elemente, dafür habe ich wieder etwas vorbereitet für euch heißt.

Wir haben hier ein Style Element, was quasi die komplette Größen abdeckt und wir haben zwei Gifs einmal from me, also Nachrichten, die von mir sind und einmal from dem von den anderen und jetzt brauchen wir zwei HTML-Elemente, die wir in die repeating group packen. Schauen, dass wir hier in Abstand haben von den weniger. Und auf der Y sind wir auf der vier bisschen groß. Mir auch die Abstände. Verein geschrieben, das ist 345. Und was wir jetzt hier displaying ist folgendes. This class from them und Current Cells Nachricht Text dynamisch als wir ziehen in das HTML und wir brauchen natürlich einen conditional if current source nachricht greater is not Current  User this element is visible das heißt on page load nicht visible das wichtig und eben parallel zu dem Bild auch bis Nord, jetzt erstellen wir noch mal in HTML Element. den gleichen Dimensionen 345 hier haben wir wieder ein Abstand von 6 und im htmlelement jetzt der andere DIV from me und auch hier müssen wir dynamisch Vorgehen Current Cells Nachricht Text dieses Element. nicht visible on page load und Current Ccells nachricht Creator Current User this element is visible und jetzt schauen wir uns ganz immer an, ob das funktioniert. Wir sehen uns jetzt hier abgeschnitten, das heißt, ich gehe noch mal in die HTML-Elemente rein stretch to fit content auf beiden preview.

Und jetzt haben wir das Ganze perfekt. Jetzt schauen wir uns noch mal diese Köpfe an. Also wir sehen hier brauchen wir noch eine Logik, damit das ganze passt. wir gehen rein und wir sehen ist Current User und wir brauchen hier eine weitere Bedingung zu machen ist durch search for Nachricht und wir machen modified, date Grüße als könn'ses Nachricht Modifieed date Und dann sort by modified Date und descending no, also das ist zweimal umgekehrt, das heißt wir wollen dass die Nachrichten schrittweise kommen, also was es genau die erste, also descending no und jetzt nehmen wir die hier, das first item, also die nachricht, die genau danach kommt und da fragen wir ob der Creator dieser Nachricht nicht der current user ist is not current user das heißt das element is visible, wenn ihr es können User und gleichzeitig ist nicht oder so nennt die Nachricht danach der current user nicht ist, dann ist es mir super das gleiche auch drüben. Ich würde hier fast sagen, wir kopieren die conditioner. So ist not Current User. und is Current User Ja, und jetzt sehen wir eben wie das Ganze dargestellt wird.

Und vor allem auch. die die Profile mitgehen Jetzt geht's noch drum, die ungelesenen nachrichten zu haben, um dann auch ein Benachrichtigungssystem zu entwickeln. Gehen wir doch mal mit dem Punkt wo entsteht überhaupt eine Nachricht. Wenn wir auf's  Popup gehen, Nachricht senden und in den Workflow, dann sehen wir hier, wir stellen eine neue Nachricht hier brauchen ein neues Feld und machen das Boolean yes-no und der default ist yes. Wann erstellen wir noch eine neue Nachricht, wenn wir eben hier auf den Button klicken auch hier um gelesen ist? Ja so bestellen jetzt folgendes rein ist, dass wir sagen wohin die Gruppe gehen. Und sagen Parents Group Nachricht. last item ungelesen ist Yes und Nachricht Last item creator ist No. Current user dann ändern wird in Font auf Roboto 900. Wir machen das Ganze bold So, können wir anzeigen, ob eine Nachricht gelesen wurde oder nicht.

Und wenn wir jetzt draufklicken auf den Workflow wir haben ja Display data in group Parent Groups Unterhaltung, wir machen hier noch Haltung nachrichten Last item und was ändern wir ungelesen auf na, ist jetzt ist es gelesen. Und und jetzt machen wir direkt einen Test.

Wir loggen uns jetzt als Hannes ein. Und wir sehen wie Nachricht fett ist und wenn wir draufklicken. nicht mehr und damit ist die Nachricht gelesen jetzt von mir noch die ungelesenen nachrichten eben Anzeigen mit einem Counter, dass wir gehen oben rein in die Glocke und das Textfeld darüber und wir machen eine Suche nach einer Unterhaltung wichtig ist, dass unser Teilnehmer darin Unterhalt erhalten, dann gehen wir auf Nachrichten und mir fehlt dann diese nun, dass wir nur die Nachrichten sehen, wo wir einerseits sagen ungelesen ist ja und andererseits der Creator nicht in nicht.

Wir können User, dann nehmen wir einen count formatieren diesen als number mit null dezimalen und sagen auch noch dieses Element ist nur sichtbar, also, wenn Kinder muss größer als 0 sein, ansonsten Element nicht sichtbar, weil wir hier sagen this element is not visible on page du willst das ganze testen als ein User zu benehmen mal Marianna erstellen einen neuen Nachricht. Beispiel an Alena dann sehen wir es gibt die neue Nachricht Marianne hat keine notification und wenn wir jetzt das ganze als macht, als Alina laufen lassen sehen wir jetzt eine neue Nachricht und wir sehen auch von dem der mich von Marianna und sobald wir draufklicken ist das Ganze verschwunden und das ist natürlich unser Benachrichtigungssystem in der einfachen Variante war natürlich noch mehr Sachen machen wie ein Dropdown-Menü und eine direkte Verlinkung auf die auf die Nachrichten und kann das natürlich noch optimieren, aber die Grundidee haben wir jetzt in den Benachrichtigungssystem die grünen Punkte um zu zeigen, dass jemand an Dies ist von den Nutzern und darum geht es jetzt im nächsten Schritt beginnen User und wir erstellen ein neues Feld, wo wir fragen, ob jemand letzte Aktivität messen Datum, die gehen jetzt in den Workflow. Do every five seconds und wir machen ein Make changes  to a thing und das ist nämlich Current users letzte Aktivität und das ist current date & time weißt immer, wenn der Nutzer aktiv war.

Wird Date & time aktiviert. Wir gehen jetzt rein in das Design Tab in der shape und sagen es nächste Mal ist nicht visible on page load, wenn herself User letzte Aktivität plus mir sagen jetzt 5 Minuten in Sekunden plus 300 Sekunden und das muss jetzt größer sein. Als current date & time.

Dann ist das Element sichtbar. Umgekehrt, wenn das Kleine ist. Als currentdatetime dann ist das Element nicht sichtbar. Und wir probieren das jetzt einmal aus. zeig mir locken uns ein einmal nice Janin Schipper Wir sollten jetzt niemanden sehen, der aktiv ist. Bin hier keinerlei. Punkte wenn wir uns jetzt einloggen als dritter sollten wir Janin sehen. Wir sehen jetzt das Janin ein eine Aktivität hat. lass uns dieses conditional copy conditional formatting auch bei den anderen shapes reinpacken, das heißt standout, mäßig nicht sichtbar und Heißt conditional formatting, jetzt ziehen wir hier Peer-Groups Unterhaltung, bis wir ändern in parent scope Unterhaltungs Teilnehmer Rest item. letzte Aktivität +300 ist größer current date time und richtig and wir dass dir hier haben. current Parent Groups Unterhaltung Teilnehmer first item is not current User Weil sonst würden wir uns ja selber anzeigen.

Lass uns noch einen zweite Funktion machen, wir kopieren das rein und machen item 2. Im Moment zweiten auch dann ist es sichtbar. Und wir kopieren das Conditional noch einmal rein würdest hier kopieren. Um beide Edge cases zu haben. paste conditional formatting das Passt und auch hier nimm es noch einmal ein paste conditional. Und wir schauen uns jetzt das ganze noch mal als Alena an.

Und sehen jetzt wie Britta durchgängig aktiv ist wohingegen, die anderen ist nicht sind, weil wir eben nicht in letzten 5 Minuten online machen. Gibt jetzt noch eine Möglichkeit, dass sie auch hier sortiert nach Aktivität oder eben nach Name und das könnt ihr jetzt natürlich auch einbauen über die Suche, dass ihr eben sagt, wir sortieren hier nach letzte Aktivität und sagen desceendding No und dadurch, wenn wir das jetzt Preview bekommen wir als erstes die Aktiven und danach die passiven aller User. Jetzt geht's noch drum wie können wir die ganze Zeit mobil freundlicher machen und wir fangen einfach oben an mit der Navbar.

Als erstes packen wir diese beiden Gruppen zusammen. und wenn das die Nachbar Desktop Gruppe kopieren das hier um diese beiden Elemente und kopieren die beiden. Und wollen jetzt das einerseits Richtung Null. 40 haben dann machen wir 667 und haben hier 24 Abstand und machen auch hier 24 Abstand. Nenn diese Gruppe Navbar mobile, wenn wir jetzt ins responsive reingehen und neben als erstes die große Gruppe.

Und machen eine hiding, wenn das kleiner als 667 ist, ist das weg. Und benehmen jetzt die andere positionieren Sie links. Und wir sehen wie das Mitglied hier brauchen wir auch eine Regel nämlich wenn es größer ist, als 667 ist das weg. Brauchen jetzt noch die Funktionalität von diesem Button sollst du nehmen hier den den Workflow. ein Kopieren das Dianas gehen rein nehmt ihr denn so? Jetzt nehmen wir uns gleich das Popup vor? Und ging um 20 Uhr zeigen dir das Popup an. Mache es gleich klein und sagen erstmal, dass das groß sein sollte. Das Tier ist fixed. Der Rest passt soweit reicht das Fenster ein bisschen größer 60. oder 80 Soll ich dir einen guten Durchlauf perfekt? als nächstes Kümmern wir uns um das linke Chatfenster. Wir wollen auf jeden Fall, dass diese Group nicht dargestellt wird. Also, wenn kleiner 667 stellen wird es nicht da auch das stellen wir nicht da, wenn wir kleiner 667 sind.

Weiterhin Brauchen wir diesen Zeiten nicht? auch hier müssen wir noch etwas optimieren, wir nehmen die beiden kopieren diese ja, nun die beiden Chance das noch mal an im Detail, was hier hilft ist, wenn wir kurzfristig sagen, das halten wir für 667 machen das Ganze kleineren ziehen wir jetzt die volle Unterhaltung und sehen, dass die ist links. dass dies rechtsbündig dass dies linksbündig das jetzt schickst aber wir wollen dass das Element 80 % dass das mit geht, jetzt sehen wir dass das Ganze eben kleiner wird, das mitgeht. Perfekt jetzt die diese hiding Wohlleben geh wieder raus, weil wir uns jetzt eben genau um diesen mittleren Bereich auch kümmern müssen. Als allererstes kopieren wir hier die Gruppe.

Bin endlich das hier. Mobile erst nehme die beiden Icons raus. anschließend Reduzieren video roundness auf null. Und ziehen das hier bis ganz hoch. und sowohl links 0 und auch rechts bis zum Rand. 60 60 07 jetzt das wir die Abstände etwas vergrössern müssen. hatten das horizontal das an bündig mit einer 12 Abstand kopieren, dass beide noch mal und neben daneben jetzt dieses Icon, was wir vorhin hatten. den auf die 24 Bin aber auch ein Arrow rechtsbündig ist zentrieren diesen vertikal Jetzt ist Responsive reingehen. Haben wir jetzt zwei Gruppen, das heißt, du müsstest nichts Mal Verordnung schaffen Zeit, wir machen hier ca. Größer, wir verstecken das wenn größer 400 und dass dir verstecken wir wenn kleiner 400 als nächstes machen wir diesen Container vorübergehend verschwinden.

Wir sehen jetzt, dass wir hier muss größer sein. Gehen wir auf die hier wir sehen jetzt wie diese parent group bis zum Rand geht, aber wir müssen noch eine Kleinigkeit machen, wir sind ja hier diese linken Linie, das heißt wir gehen Sie in die Gruppe rein und sagen, weil wir hier den border-style haben, wenn current page with. Kleiner 667, dann ändern wir den border-style rechts auf 1 an. und unten border style left ebenso auf man dadurch kriegen wir diese Linien beide weg und gleichzeitig sollten wir auch hier. eine Topline haben Um eine Abtrennung zu schaffen. Wir müssen uns dann jetzt noch genau anschauen. Ja, mit Fehler wir müssen machen hide wenn Größer 667.

Das packen wir gleich rein das machen wir gleich anders mit den konkreten Design punkten, hier ist noch wichtig. Denkst dass dir ist 990 bisschen weniger 80 das hier ist nicht fix du es 99. Das hier ist linksbündig, dass dir ist rechtsbündig. linksbündig ist auch linksbündig brauchen hinein. Marge, damit wir das gesamte hier rein bekommen. Genau und hier wenn wir das noch hin hier wiederum die andre Group das Lösen jetzt aber anders in dem indem ich sagen diese hier ist. nicht sichtbar on page load, sondern nur sichtbar, wenn current. Page was ist kleiner 667.

Und die andere ist nur sichtbar bis Größe 667. Eine Sache, die wir noch machen sollten ist wenn etwas nicht visible ist collapse die Element hide when hidden collapse die Element hide hidden auch hier collapse.

Die Element height von hidden das ganz wichtig, dass wir das eben nicht drin haben, außer in der Navigationsleiste, wo es in Ordnung ist. Bin jetzt auf preview. Und in die Chrome developer tools. Na, kann man hier eben auswählen, welches die weiß man haben möchte.

Zum Beispiel ein iPhone ein iPad was kann iPhone was wir jetzt sehen ist schon relativ viel manche Sachen passen und andere Sachen sind noch nicht perfekt. Das heißt, wie kriegen wir das jetzt hin.

Der Sache ist hier diese kleine Box. mit dem Pfeil heißt das passt aber diese grob zu groß mach mal auf 85 Jetzt haben wir diese Message Elemente die schon mal sehr gut aussehen. Das nächste ist jetzt noch. was passiert, wo starten wir die Seite und wo nicht, dass das erste ist, dass wir sagen der der gesamt Container hier Dieser ist grundsätzlich erst mal sichtbar, das heißt wie heißen diese nun demgegenüber ist, dieser Container nicht sichtbar am Anfang. nächste sagen wir hier, dass dieser Container am Anfang nicht visible ist. sondern mit dir einen zweiten Workflow starten.

Wenn er bereits hier den Call-to-Action diese machen wir jetzt blau. kopieren in Fügen noch mal ein rot mit wir wissen was der Unterschied zu sagen only when current page with kleiner 667. nur dann Heiden Bier die group Liste Unterhaltungen und gleichzeitig diese Gruppe hier in Enns die Maine Show Gruppe Unterhaltung Main mit folgenden Informationen für mich hier noch den zweiten Button als hier noch den zweiten Button umgeben, das alles zu packen machen auch hier I blau kopieren diesen Workflow pasten.

Und sagen rot only one kleiner 667 auch hier gleiche Spiel Hide an Element Liste Unterhaltungen Und schauen Element. die Hauptgruppe brauchen jetzt noch für diesen Button hier eine Funktion wir machen Heiden Element. wir stecken die Gruppe und zeigen stattdessen die Liste der Unterhaltung.

Wir sehen uns das ganze anmachen, wenn wir auf die Developer Tools gehen und sagen, wir machen iPhone. Dann sehen wir jetzt neue nachricht. Sänger wählen und auf ein Nachricht gehen, dann sehen wir jetzt den Verlauf und sehen wie wir mit der responsive Engine wunderbar auch mobil responsive Seiten im Bubble entwickeln können.