MVP aplikacji w rekordowym czasie z Bubble: Messenger w aplikacji - data types i design
Logika
17 godz. 49 min · Biznes i Automatyzacje
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Pracy z edytorem Bubble na bardziej zaawansowanym poziomie
- Tego jak wyszukiwać, filtrować i edytować rekordy z bazy danych wbudowanej w Bubble
- Czym są privacy rules - czyli jak zabezpieczyć dostęp do naszych danych przed nieuprawnionym dostępem
- Praktycznej pracy z frontend i backend workflows
- Dodatkowo wdrożymy do naszej aplikacji system płatności Stripe oraz powiadomienia mailowe z wykorzystaniem np. SendGrid i innych
- Pokażę Ci jak łączyć się z zewnętrznymi API poprzez dostępny w Bubble plugin API Connector
- A także jak rozszerzyć funkcjonalność naszej aplikacji poprzez proste automatyzacje z serwisem Make
- Na koniec zajmiemy się również podpięciem naszej customowej domeny oraz publikacją aplikacji
Czy w Twojej głowie pojawił się pomysł na aplikację, która zrewolucjonizuje świat na miarę Facebook'a, Instagrama albo Airbnb? A może zgłosił się do Ciebie klient, który chce przetestować i wdrożyć swój projekt w jak najszybszym czasie?Jeśli tak było to na pewno zadajesz sobie teraz kolejne pytanie - od czego zacząć? Czy muszę posiadać odpowiednią wiedzę programistyczną? Na jaki język programowania się zdecydować lub z jakiego gotowego framework'u skorzystać? A może zatrudnić profesjonalnego designera i software house, który pozwoli mi zrealizować ten projekt?Niezależnie od tego czy czy zdecydujesz się działać sam/a, czy też przekażesz projekt do zewnętrznej agencji i tak staniesz przed kolejnym dylematem jakim jest nauka programowania lub konieczność przepalenia nawet setek tysięcy złoty na coś, co może okazać się niewypałem.Na szczęście szybki rozwój narzędzi no-code sprawia, że możesz wybrać jeszcze trzecie wyjście. Zaprojektować, zbudować i wypuścić w świat swoją wymarzoną aplikację tylko za pomocą własnych sił i to bez konieczności posiadania specjalistycznej wiedzy programistycznej, a nawet posiadając jedynie podstawową znajomość narzędzi do design'u.Pamiętaj również o tym, że projekt ten podzieliłem na dwie części. Ten kurs to druga część, w której zapoznamy się z bardziej zaawansowanymi opcjami, jakie zapewnia nam edytor Bubble. Zdobytą w ten sposób wiedzę teoretyczną wykorzystamy od razu w praktyce dodając do naszego statycznego designu odpowiednią logikę, dzięki czemu nasz finalny projekt będzie już w pełni działającą aplikacją.Jeśli tylko potrafisz w podstawowym zakresie pracować z edytorem Bubble, budować w nim design aplikacji i rozumiesz czym są option sets oraz workflows to posiadanie wiedzy z poprzedniego kursu nie jest koniecznie wymagane. Natomiast szczerze zachęcam Cię przynajmniej do przejrzenia materiałów z pierwszej części, gdzie skupiamy się właśnie na podstawach, ponieważ teraz będziemy efektywnie przechodzić do bardziej zaawansowanych tematów i rozbudowywać naszą aplikację.
Czego nauczysz się w ramach tego Kursu?
W tym kursie „MVP aplikacji w rekordowym czasie z Bubble (Logika)” nauczę Cię jak zamienić statyczny layout na pełnoprawną aplikację. Poruszymy takie tematy jak praca z bazą danych, privacy rules oraz bardziej zaawansowane workflows, które dodamy zarówno na froncie jak i backendzie naszej aplikacji. Dzięki zdobytej wiedzy dodamy logikę wszędzie tam, gdzie tego wymaga nasz projekt, a dodatkowo wzbogacimy go o możliwość płatności poprzez najbardziej popularny na świecie system jakim jest Stripe. To jednak nie koniec ponieważ przygotowałem dla Ciebie również szereg innych ważnych zagadnień, które omówimy i wykorzystamy w praktyce.W ramach nauki skupimy się na jak najbardziej praktycznym podejściu. Zapomnij o długich i nudnych lekcjach pełnych teorii, które zapomnisz zaraz po obejrzeniu. Będziemy budować a nie debatować! W ten sposób nauczysz się pracować z edytorem Bubble na poziomie zaawansowanym. Zrozumiesz jak zabezpieczyć swoje dane przed nieuprawnionym dostępem, w jaki sposób pobierać i dynamicznie filtrować rekordy z bazy danych. A także jak wykorzystać auto-binding by móc je aktualizować bez wykorzystania skomplikowanych workflows.Dodamy do naszej aplikacji prosty komunikator, który pozwoli na wymianę wiadomości pomiędzy użytkownikami. Zadbamy również o możliwość wysyłania powiadomień mailowych poprzez zewnętrzne serwisy by ich wygląd był zgodny z naszym brandem. Nie zabraknie również takich tematów jak SSO z Google czy też proste automatyzacje z wykorzystaniem serwisu Make.
Dla kogo jest ten kurs?
Materiał szkoleniowy został zaprojektowany tak, aby mogło z niego skorzystać jak najszersze grono odbiorców. Nieważne czy jesteś totalnym laikiem, czy też posiadasz już wiedzę z zakresu programowania lub designu, na pewno znajdziesz tu coś dla siebie. A więc kto jeszcze może skorzystać z wiedzy zawartej w tym kursie?
Witam Cię w kolejnej lekcji, w której tym razem rozpoczniemy naszą pracę nad
wdrożeniem Messengera do aplikacji.
Za jego pomocą nasi użytkownicy będą mogli wymieniać wiadomości między sobą,
natomiast ja zaplanowałem to tak, aby nasz Messenger posiadał tutaj
ściśle określone ograniczenia.
Przede wszystkim taką konwersację będzie mogło prowadzić naraz dwóch użytkowników,
czyli nasz gość oraz oczywiście host.
Dodatkowo bardzo ważne jest to, że taką rozmowę będzie można rozpocząć
tak naprawdę tylko od dwóch punktów.
Pierwszym z nich będzie tutaj dashboard gościa albo dashboard hosta
w sekcji Booking.
Czyli ja na przykład będąc tutaj gościem i mając zarezerwowany jakiś właśnie już
tutaj pobyt, czyli jakikolwiek item tutaj na naszej liście bookingu
mogę kliknąć przycisk Send message i oczywiście rozpocząć konwersację
pomiędzy mną a hostem, który właśnie taki listing nam udostępnia.
Jak widzisz, ten listing został już odpowiednio przekazany do pop upu,
a dodatkowo ten czat, który właśnie tutaj rozpoczniemy będzie dotyczył bookingu.
Oczywiście to samo będzie mógł zrobić host będąc w swoim panelu.
Też będzie mógł tutaj rozpocząć właśnie taką konwersację.
Natomiast drugim punktem startowym będzie już sam listing.
Czyli znów tutaj muszę być zalogowany, Muszę dodatkowo posiadać konto typu gość.
I dopiero wtedy mogę zadać postowi jakieś pytanie o jego listing.
Aby to zrobić muszę przejść tutaj niżej.
Mam tutaj znów przycisk Send message.
Niemal identycznie wyglądający pop up.
Znowu przekazujemy sobie tutaj listing.
Natomiast sam czat w tym przypadku będzie dotyczył właśnie listingu, a nie bookingu.
Czyli dodamy tutaj takie proste rozróżnienie,
żeby host po swojej stronie w swoich wiadomościach widział o co pyta właśnie ta
druga osoba, czyli czy pytamy o jakiś zablokowany pobyt, czy po prostu zadajemy
jakieś ogólne pytanie dotyczące danego listingu.
Mam nadzieję, że to jest jasne.
Wydaje mi się to całkiem fajnym ograniczeniem i wprowadzającym nieco
więcej czytelności do naszych konwersacji.
A skoro wiemy już jak wyglądają te punkty startowe, to może przejdźmy do nieco
ważniejszych rzeczy, czyli do tego jak wyglądają nasze typy, Bo w tym
przypadku będziemy musieli wdrożyć dwa.
A więc wracam do edytora i przechodzimy tutaj do Data Types.
Pierwszym z nich jest czat, wewnątrz którego będziemy właśnie
prowadzić taką konwersację, czyli wymieniać się wiadomościami.
Zerknijmy na to, jakie pola ja tutaj dodałem.
Przede wszystkim jest to booking.
Tak jak Ci mówiłem, czat może dotyczyć bookingu, czyli przekazujemy wtedy
odpowiedni booking, opcjonalnie listingu.
Wtedy oczywiście przekażemy właściwe ID.
Kolejne pole to Last Message Send Add.
Dzięki temu polu będziemy mogli sobie sortować nasze czaty.
O tym, gdzie została wysłana ostatnia wiadomość, czyli te najświeższe będą
oczywiście trafiały na samą górę.
Dodatkowo jak widzisz ja dodałem tutaj kilka takich pól,
których mógłbyś się nie dokońca spodziewać wewnątrz czatu, a mianowicie jest to
Listing City, Listing name oraz Receiver full name.
Ja dodałem te trzy pola po to, aby pokazać Ci, że możemy w Babel przeszukiwać
dane rekordy nie tylko po jednym polu.
Do tej pory właśnie tak to robiliśmy np.
za pomocą pola Search Box.
Jak się pokazywałem możemy podać tylko jedno pole, po którym przeszukujemy.
Natomiast teraz zastosujemy specjalny plugin i pokażę Ci, że można
to dużo fajniej rozbudować.
A więc będzie.
Taki czat można przeszukiwać zarówno po mieście danego listingu, oczywiście jak po
jego nazwie, a także oczywiście tutaj po imieniu i nazwisku odbiorcy.
Natomiast żeby ułatwić naszą pracę, ja tutaj do data type user dodałem jak
widzisz nowe pole full name i tam po prostu będziemy
przekazywać pełne imię i nazwisko.
Ja już to zrobiłem dla wszystkich swoich rekordów.
A na stronie jak zawsze przygotowałem również dla
Ciebie button z workflow, które pozwoli właśnie szybko to ustawić.
W ten sposób nie będziemy musieli tego rozbijać na first name
i osobno będziemy mieć tą właśnie wartość zebraną w tym jednym polu.
Natomiast wróćmy jeszcze do samego czatu.
Wiemy już do czego służą te pola.
Wiemy po co mamy Receive Full Name.
Nasz czat będzie mógł mieć dwa statusy.
Mamy tutaj odpowiedni set podpięty i taki czat domyślnie będzie miał status Active.
Czyli po jego utworzeniu od razu będziemy ustawiać to na active.
A użytkownik potem będzie mógł go sobie zarchiwizować.
Nie będziemy ustawiać usuwać tych czatów, niech użytkownicy mają do nich dostęp.
Natomiast oczywiście w przyszłości, jeśli będziesz projektował własną aplikację,
możesz zadbać również o jakąś opcję usunięcia takiego czatu po jakimś czasie.
Dodatkowo mamy tutaj jeszcze dwa bardzo ważne pola Users.
To lista użytkowników, którzy biorą udział w takiej konwersacji,
czyli w takim czacie. Tak jak mówiłem u nas będą to dwie osoby.
Będzie to gość oraz host i dodatkowo mam tutaj jeszcze pole under by user.
Za jego pomocą będziemy mogli określić kto nie odczytał bieżącej informacji.
Jeśli ja napiszę pierwszą wiadomość, to oczywiście pod to pole wskoczy odbiorca
i oczywiście jeżeli on nie odpisze to ja będę tam wyskakiwał.
W ten sposób będziemy mogli sobie oznaczać nasze czaty, tak jak zresztą ma to miejsce
w większości Messengera, gdzie pojawia się jakaś informacja,
że masz nie odczytaną wiadomość.
Mam nadzieję, że rozumiesz jak działa to pole.
Oczywiście zaraz do tego jeszcze przejdziemy i zobaczysz jak to
wykorzystane jest w praktyce.
Natomiast jak widzisz sam czat nie posiada tutaj nigdzie linkowania do wiadomości,
czyli takiego drugiego data type.
A to z tego prostego powodu, że oczywiście w takiej konwersacji możemy mieć setki,
tysiące, dziesiątki tysięcy wiadomości, a tego jak Ci mówiłem
tutaj nie korzystamy właśnie z takiej listy, tylko będziemy
linkować w drugą stronę.
Dodatkowo zerknijmy sobie jeszcze tutaj na Privacy Rules.
Ja dodałem standardowe dwa.
Jest to admin, który ma oczywiście jak zawsze dostęp do
wszystkiego oraz tutaj nasi użytkownicy.
Czyli jeśli użytkownik jest zalogowany i znajduje się właśnie tutaj na tej liście
users w danym czacie, no to oczywiście będzie mógł sobie tutaj
odczytywać wszystko.
Nie potrzebujemy tutaj audio buildingu, więc wystarczą tylko te
trzy standardowe check boxy.
Dodatkowo jeśli dodasz tutaj do I usera to pole full name, to
pamiętaj, żeby je tutaj zaznaczyć, żeby było widoczne dla wszystkich.
Kolejny type, który musimy dodać to oczywiście message, czyli sama wiadomość.
Przejdźmy tutaj do Message i w tym przypadku mamy tutaj cztery pola.
Pole body to po prostu treść danej wiadomości.
Czat to oczywiście czat, do którego będą należały takie wiadomości.
Sender to jak się domyślasz, po prostu użytkownik, który nadał taką wiadomość
i users to powielone pole tutaj z czat.
W tym przypadku znów jest to list of users i to pole dodałem tylko i wyłącznie po to,
żeby Privacy i Rules odpowiednio zadziałały.
Czyli znów będziemy mieć identyczne privacy rules jak w przypadku czatu.
Jak widzisz nie mam admina, ale zapomniałem go sobie po prostu dodać.
Natomiast za pomocą tego pola te wiadomości będą wyświetlane
tylko tym dwóm użytkownikom.
W naszym przypadku, czyli tym, którzy znajdują się na tej liście users.
A skoro wiemy już jak wygladają oba te Data type, to przejdźmy teraz do
widoku tej całej sekcji Messages.
Musisz sobie to odświeżyć i poczekać aż mi się załaduje.
OK, jestem tutaj.
Na koncie gościa jak widzisz mam rozpoczętą rozmowę tutaj już starą.
I nie ma tutaj oczywiście nic trudnego.
Tej tutaj lewej sekcji mamy aktywne czaty.
Dodatkowo będziemy mogli się potem jeszcze przełączać pomiędzy aktywnymi
i zarchiwizowane.
Pojawi się w tym miejscu odpowiednia ikonka.
Natomiast ja ustawiłem to w taki sposób, żeby ona się pojawiała dopiero wtedy,
jeśli będziemy mieć chociaż jeden zarchiwizowane czat.
Zrobiłem to specjalnie w tym celu, żeby nie troszczyć się o to, że nie
mamy tutaj żadnych wiadomości np.
w trybie Archive i żeby mi się to wszystko dużo fajniej prezentowało.
Tu będziemy oczywiście wyświetlać listę aktywnych czatów.
Dodatkowo po załadowaniu się strony taki czat zostanie ustawiony jako aktywny.
Będzie to wyglądało w ten sposób, że jeśli w pasku adresu nie będzie żadnego właśnie
czatu aktywnego, to zostanie ustawiony na pierwszy.
Właśnie z tej repeat ING grupy mogę Ci to pokazać.
Teraz pasku adresu jesteśmy na Dashboard w widoku Guest messages,
a to jest po prostu ID danego czatu.
Jest to jak widzisz trzeci parametr.
To jest pierwszy, to już jest drugi, a to jest trzeci.
Pokażę Ci później w kolejnej lekcji, jak przekazywać coraz więcej
takich parametrów.
Dodatkowo tu oczywiście będą wyskakiwały kolejne czaty.
Tu mamy widok całej naszej konwersacji, czyli wiadomości pomiędzy
mną i w tym przypadku Sarą.
Mogę tutaj oczywiście coś jeszcze napisać.
Jeszcze raz hello, cokolwiek i wysłać wiadomość.
To oczywiście działa i te wiadomości nam tutaj wskakują.
Dodatkowo jak widzisz mamy tutaj jasne rozróżnienie pomiędzy nimi, czyli wiem, że
te są akurat moje, a te Sary, ponieważ pojawia się to po prostu jej avatar.
Dodatkowo, tak jak Ci mówiłem, nasze czaty będą dotyczyć dwóch tematów bookingu.
Jeśli właśnie tu jest booking, to tutaj w tej prawej szpalt wyświetla
się karta takiego bookingu.
Natomiast jeśli będzie tutaj listing, to jak się domyślasz analogicznie w prawej
karcie wyświetlimy kartę listingu, a jeśli przejdę do podglądu właśnie tego
na koncie odbiorcy, to tak to wygląda właśnie tutaj.
Po stronie Sary mamy te wiadomości, które właśnie napisał do nas Johny
i teraz mogę mu oczywiście odpisać.
His send message.
Jeśli się teraz przełączę to jak widzisz ta wiadomość mnie z automatu zaskoczyła.
Natomiast mógłbyś się zastanowić teraz dlaczego ta wiadomość skoczyła nam tutaj z
automatu, skoro jak widzisz ja nic tutaj nie robię.
Po prostu przełączyłem się tylko między widokami.
Jest to właśnie niesamowita zaleta Babel, która polega na tym,
że nie dość, że udostępnia nam on wbudowaną bazę danych, to jeszcze
jest to baza typu real time.
Oznacza to tylko tyle, że jeśli dodamy jakiś item do naszej bazy danych, to Babel
automatycznie wyśle go i pokaże w tym miejscu, gdzie pobieramy sobie
za pomocą repeat id grupy.
Czyli jeśli ja będąc tam na koncie Johnnego napisałem wiadomość, ona została
dodana właśnie do naszego Data Type Messages i z automatu wyświetliła
się również tutaj po stronie Sary.
W ten sposób właśnie możemy tutaj zbudować bardzo prostą, działający komunikator
i nie musimy dbać o to, aby co chwile sprawdzać czy pojawiły się jakieś
nowe wiadomości i je pobierać.
Dlatego też, jeśli np.
słyszałaś o tym, że ludzie bardzo często łączą bubel z KSA, no to od razu właśnie
muszę Ci powiedzieć, że niestety nie jest to tak proste.
Tam jeśli dodasz jakiś item do bazy danych to potem musisz wysłać zapytanie
które takie itemy pobierze.
A tutaj jak widzisz działa to znacznie szybciej i jest dużo dużo wygodniejsza.
A więc skoro wiemy już jak to wszystko tutaj wygląda, jakie mamy data type, to
może przejdźmy jeszcze tutaj do całego tego elementu messages i rozbijemy
go sobie na czynniki pierwsze.
Aby przełączyć Przechodzimy do sekcji Design.
Rozwijamy prawą paletę.
I tak cały ten element Messages Here posiada jeden custom state.
Jest to status odnoszący się oczywiście do naszego Option setu.
Ja sobie tutaj ustawiłem tą wartość domyślnie na Active, ponieważ chcę
oczywiście pokazywać tylko aktywne czaty.
Tutaj dodatkowo oczywiście w tej lewej kolumnie, tak jak mówiłem
będę miał właśnie taką ikonkę.
Po kliknięciu w nią będzie mi się otwierała tutaj group focus,
która wygląda w ten sposób, a w jej środku dostałem po prostu repeat grupę,
która odnosi się do tej pory content od HUD status i wyciąga po
prostu wszystkie te wartości.
U nas są aż dwie, czyli Active oraz Archive.
I oczywiście po kliknięciu będziemy zmieniać Custom State,
a ten custom state będziemy oczywiście zaraz potem pobierać do naszej repeat in
grupy z czasami i robimy to w tym miejscu.
Tutaj ukryjemy tą Group focus.
Całą grupę Group Focus.
O właśnie tutaj mamy mam czuc lepiej.
ING Group wyszukuje czaty dla których mamy następujące terminy
ustawione, czyli przedewszystkim Users contains score and user, a więc znajdujemy
się tam my, czyli jeden z użytkowników takiej konwersacji.
Jak mówiłem tutaj status odnosi się do naszego custom status, a sortowanie
odbywa się właśnie po tym polu.
Last message send add i w tym przypadku mamy tu ustawione death standing.
Czyli jeśli w danym czacie pojawi się jakaś nowa wiadomość, to my aktualizujemy
to pole i w ten sposób taki czat wskoczy nam tutaj na samą górę listy, jak
zresztą większości tego typu rozwiązań.
Natomiast możecie zaciekawić tutaj właśnie to pole, o którym wspominałem już
wcześniej, czyli wyszukiwanie tutaj po użytkowniku, po mieście
i po nazwie listingu.
No i teraz mógłbyś się zastanowić jak ja to rozwiązałem, skoro
tutaj przekazuję te czaty i nigdzie nie odnoszę się do tych wartości.
Dodatkowo mamy tutaj zwykłe pole input.
Do tej pory korzystaliśmy najczęściej z pola Search Box, ale tak jak mówiłem ono
pozwala wyszukiwać tylko po jednym polu i dodatkowo ma też jeszcze
sporo innych ograniczeń.
Aby mi to zadziałało musiałem wykorzystać zewnętrzny plugin.
Nosi on nazwę Fast Search and Auto Complete.
Polecam Ci go.
Jest darmowy, bardzo prosty do ustawienia i daje naprawdę całkiem sporo możliwości.
A ja już Ci pokazuję jak go sobie tutaj zdefiniowałem.
Przede wszystkim tak.
Dodajemy pole input, gdzie użytkownik będzie coś wyszukiwał.
Musimy, tak jak zresztą niemal w wielu pluginów,
nadać tutaj odpowiedni ID atrybut, żeby nasz plugin mógł się
właśnie do tego odnieść.
I teraz dodajemy sobie tutaj właśnie ten element autokorekty.
Ja go mam umieszczonego tutaj.
On się nie będzie pojawiał na stronie, ale musi być oczywiście na nią dodany.
I mamy tutaj następujące ustawienia jak i data jak chcemy przeszukiwać.
Są to oczywiście czaty, jakie czaty?
Dokładnie te same, które mieliśmy tutaj.
W tym miejscu możemy zdefiniować po jakich polach chcemy wyszukiwać.
Tak jak Ci mówiłem, u nas będą to 3 pola, a więc receiver, full name,
listing name oraz oczywiście Listing City.
Jak widzisz, możemy tu dodać jeszcze kolejne dwa pola.
Dlatego właśnie ten plugin jest tak niesamowicie potężny.
Jeśli masz jakiś skomplikowany Data Type i tam jest wiele pól, to możesz ułatwić
życie swojemu użytkownikowi i wprowadzić taką właśnie zaawansowaną wyszukiwarkę.
Jedyne co musimy zrobić to przekazać tutaj id takiego pola input.
Wtedy jeżeli użytkownik zaczyna coś tutaj wpisywać to plugin się uruchamia i
przeszukuje właśnie te wartości w tych trzech polach.
Natomiast jak teraz to co on tutaj znajdzie przekazać do scripting grupy?
Ja z reguły robię to w ten sposób.
Dodaję po prostu nowy condition i mówię, że jeśli wartość pola input nie
jest pusta, czyli użytkownik coś tam zaczyna wpisywać,
to podmieniam data source.
Czyli z tego podstawowego przekazujemy sobie te wyniki właśnie z
tego pluginu i w ten sposób mamy super fajnie działającą wyszukiwarkę.
Może teraz przejdźmy tutaj do tej Hard Sell Group i zerknijmy tutaj.
W ogóle mamy ustawiony.
Mamy oczywiście avatar takiego nadawcę.
Ja to wyciągam sobie w ten sposób tutaj w tym Parent czat Users zawsze mamy
dwóch użytkowników, czyli nas i odbiorcę.
Odejmujemy siebie, czyli ma Item parent user.
To nam daje listę.
W naszym przypadku tam zawsze zostanie tylko jeden item, więc możemy się do tego
odnieść właśnie poprzez First i poprzez Las Item.
Nieważne.
Skoro jest jeden to i tak właśnie zawsze wyciągniemy tylko jego.
I tutaj wyciągam odpowiednie pole, w tym przypadku avatar.
Tutaj jak widzisz full name właśnie dla uproszczenia po to dodałem to
pole, żeby nie rozbijać wartości.
Tu zastosowałem też bardzo fajny trick, który Ci polecam.
Domyślnie zostawiam taki tekst, nic go sobie tutaj nie zmieniałem,
natomiast w Conditions Allah daje odpowiednie warunki.
Mamy tutaj w czacie właśnie to pole Last message Send i ono może służyć również do
tego, żeby sprawdzić kiedy została właśnie wysłana taka wiadomość.
Jeśli od Current Date odejmiemy właśnie to Last message 3 Add
i formatuje to na przykład jako minuty, to będę miał informację ile minut
temu została nadana taka wiadomość.
Ja ustawiłem to w ten sposób, że jeśli ta wartość jest większa niż 5, czyli powyżej
5 minut, to wyświetlam tutaj rzeczywiście ile tych minut było, a jeśli mniej
to wyświetlam po prostu tekst i voila go.
Oczywiście nie jest to w pełni idealne, ponieważ jeśli taka wiadomość
zostanie wysłana np.
dzień lub dwa dni wcześniej, to będziemy mieć tutaj już tysiące minut.
Ale robię to właśnie specjalnie po to, żebyś mógł teraz we własnym zakresie dodać
tutaj odpowiednie conditions, ale przemyśleć, jak one powinny wyglądać.
Oczywiście, tak jak pamiętasz, możemy się tutaj odnosić do sekund,
minut, godzin, dni.
I w ten sposób sobie odpowiednio tutaj to zdefiniować.
Tych conditions może być tutaj naprawdę bardzo dużo i w ten sposób taki Twój
Messenger będzie wyglądał dużo lepiej.
Mam nadzieję, że to jest jasne i że uważasz, że jest to
całkiem ciekawe zadanie.
Moim zdaniem tak.
Nie chcę tutaj po prostu marnować czasu na dodawanie trzydziestu conditions,
ponieważ uważam, że możemy omówić dużo ciekawsze funkcjonalności, a to tak
jak mówiłem, pozostawiam już Tobie.
Tu oczywiście odnoszę się do typu.
Czyli jeśli pole booking w danym czacie nie jest puste
to wybieramy to standard formaty txt i wpisuje tutaj wartość z booking.
I analogicznie jeśli to pole jest puste to w naszym przypadku oznacza to tylko tyle,
że pole listing będzie pełne, a więc ten chat będzie dotyczył listingu.
Tutaj mamy tą grupę z kropką, czyli informacją, że nie czytaliśmy
jakiejś wiadomości w danym czacie.
I tutaj prosty condition.
Jeśli właśnie w tej kolumnie Astrid Buy User jestem ja, to chcę
wyświetlać taką kropkę.
Cała prawa Sparta jest super prosta.
Mam tutaj dwie karty.
Jedna odnosi się do listingu.
Już Ci pokazuję.
Wyciągamy go sobie z tego czatu, który jest przypisany właśnie
do tej Wrapper Group.
Czyli właśnie tutaj.
Mamy tą Wrapper Group.
O właśnie tutaj mamy czat i ten czat wyciągam sobie
z URL a site numer 3, czyli tam przekazuje sobie czat i tu go wyciągam.
Czyli jeśli tu mamy jakiś listing to wyświetlamy kartę listingu.
Analogicznie jeśli mamy booking to kartę bookingu.
Więc tak jak widzisz znów same te condition, ale są super proste.
Przejdźmy teraz może tutaj do tej środkowej sekcji.
Czyli do naszych wiadomości.
Znowu Oczywiście mamy tutaj repeat, id grupę, wyszukujemy wszystkich wiadomości,
które przynależą do właśnie tego wrapper czat, czyli tego głównego czatu.
Tu sortujemy je po dacie utworzenia, czyli najstarsze na górze, najnowsze na dole.
Jak zwykłym messengerze kolejno przekazujemy
oczywiście Message naszym znanym Ci już łańcuszkiem do kolejnej
grupy i jej podgrup.
A tu mamy rozdzielenie właśnie na te dwie grupy.
I znów mega prosty condition.
Jeśli sender is not current user, czyli jeśli to nie ja jestem nadawcą takiej
wiadomości, to wyświetlamy tą grupę.
A to oznacza po prostu, że ta druga osoba wysłała do nas tą wiadomość.
A tutaj odnoszę się do siebie i pokazuję właśnie tą grupę.
Tak jak w ten sposób właśnie uzyskujemy ten fajny wygląd tutaj tego Messengera.
Ostatnim bardzo ważnym elementem tutaj jest oczywiście samo pole, za pomocą
którego będziemy pisać nasze wiadomości.
Ja tu wykorzystałem zwykłe pole input.
Nic trudnego.
Zrobiłem to specjalnie tylko na potrzeby właśnie naszego tutaj kursu.
Domyślnie nie wykorzystywałem pola input.
Jest ono po prostu za proste.
Nie możesz tam nawet pogrubić tekstu, dodać emotikonki, wstawić
linku czy czegokolwiek.
Natomiast jego główną zaletą jest to, że jest po prostu darmowe.
Natomiast gdybym sam tworzył czat i zespół Messengera już sobie tworzyłem, to
wykorzystuję do tego plugin o nazwie nazywa się PDK.
Text Editor PDK. O właśnie ten.
Tylko jak widzisz niestety jest on płatny i kosztuje on jednorazowo 16 dolarów
albo 4 dolary w planie miesięcznym.
Tak więc jeśli chciałbyś z niego skorzystać to oczywiście
zdecydowanie go polecam.
Ma dużo więcej funkcjonalności i jest naprawdę bardzo fajny.
Natomiast ponieważ ja korzystam normalnie podczas pracy nad aplikacjami dla klientów
z planu agencyjnej, to mogę sobie właśnie takie pluginy testować za friko.
To jest jedna z zalet takiego planu.
Dlatego zdecydowanie polecam.
Jeśli masz więcej niż jedną aplikację, wtedy możesz właśnie
włączyć sobie plan agencyjne, trzymać na swoim koncie dowolną ilość aplikacji
i tak długo, aż ich nie opublikujesz.
Korzysta z nich właśnie w ramach takiego jednego planu agencyjnej.
Tam się płaci za jedno stanowisko na takim planie agencyjne.
Jego koszt to obecnie chyba około 90 dolarów.
Natomiast właśnie to jest jedna z zalet.
Nie dość, że masz dostęp do niemal wszystkich funkcji takiego płatnego planu,
to dodatkowo właśnie możesz sobie testować takie pluginy.
Ja wiem, że tych pluginów jest tutaj bardzo dużo i część jest naprawdę świetna,
ale trafiają się niestety bardzo złe, czasami po prostu nie aktualizowane.
Dodatkowo niestety potrafią one kosztować dosyć duże pieniądze.
Stąd też właśnie ten plan agencyjnych jest świetnym wyjściem, ponieważ możesz
dodać sobie taki plugin przetestować.
Jeśli Ci się nie spodoba to go usunąć, dodać następne
i dopiero wtedy, kiedy opublikujesz taką aplikację, te koszty zostaną
tutaj naliczane do Twojego konta.
Mam nadzieję, że teraz rozumiesz jak to działa.
Tak jak mówię, jest to plan całkiem spoko, ale opłacalny tylko wtedy, jeśli
rzeczywiście tworzysz kilka aplikacji naraz i nie chcesz dla każdej z nich
wykupywać osobno jakiegoś płatnego planu.
Wychodzi to po prostu dużo bardziej ekonomicznie, że tak powiem.
To by było na tyle. W tej lekcji.
Wiemy mniej więcej, jak to wszystko ma tutaj wyglądać, jak ma funkcjonować.
A więc w kolejnej lekcji zajmiemy się już dodaniem odpowiedniej logiki.