MVP aplikacji w rekordowym czasie z Bubble: Edycja i archiwizacja profilu
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?
Tej lekcji kontynuujemy naszą pracę od miejsca, w którym zakończyliśmy
ją w lekcji poprzedniej.
Teraz naszym zadaniem będzie umożliwienie użytkownikowi edycji oraz
usunięcia jego profilu.
Zacznijmy może od tego prostszego, czyli tej opcji delete kont.
Oczywiście moglibyśmy dodać workflow od razu po kliknięciu w ten button i w ten
sposób usuwać konto użytkownika, ale jest to bardzo zła praktyka.
Ja często spotykałem się również z takimi działaniami, że może musimy kliknąć jeden
raz button, a potem potwierdzić klikając drugi raz.
Jest to trochę lepsze rozwiązanie, ale często zdarza mi się instynktownie kliknąć
dwa razy i na przykład usunąć jakiś element, którego nie
chciałem wcale usuwać.
Dlatego też w takich przypadkach, jeżeli coś tutaj chcesz usuwać,
a usuwając rekord z bazy danych normalnie oczywiście u nas to archiwizuje, ale
normalnie byś go usuwał, nie ma opcji jego przywrócenia.
Czyli jeżeli wywalisz jakiś rekord z bazy danych, nie będziesz go mógł
w prosty sposób przywrócić.
Dlatego też dużo lepszym rozwiązaniem jest przy takich akcjach dodanie
dodatkowego popup, w którym użytkownik musi rzeczywiście
potwierdzić swoje działanie.
Ja już sobie taki popup przygotowałem.
Wróćmy do edytora.
Jak widzisz mam tutaj odpowiedni popup.
Jest on super prosty.
Wymaga tylko kliknięcia w kolejny button, który rzeczywiście usunie takie konta.
A więc zacznijmy od tego, żeby go najpierw pokazać.
A więc delete a kont.
Ten button dodajmy sobie może od razu nowy folder.
Delete kont.
Kliknięcie w ten przycisk chce tylko pokazywać nasz pop up.
Czyli pop up.
I w zasadzie to wszystko.
Wracamy do designu.
Przechodzimy do naszego etapu.
Pokażmy go teraz.
Tutaj dodamy już prawidłowe workflow, czyli Add Workflow.
To co chcemy zrobić to kolor czerwony, czyli kąt ustawić to jako ten folder.
I teraz samo workflow.
W naszym przypadku nic nie usuwamy, a jedynie zmieniamy rekord bieżącego
użytkownika, czyli makijażystka event user.
Jak pamiętasz mamy tutaj flagę Received, którą zmieniamy na Yes,
a następnie musimy tutaj ukryć nasz popup.
Tag A więc zmieniamy flagę, ukrywamy popup i to cała nasza akcja.
Natomiast chciałbym, aby teraz jako pracę domową, żebyś wykorzystał właśnie tą
flagę i script dorobił nową stronę.
W naszym serwisie jeżeli użytkownik się zaloguje,
a ta flaga będzie aktywna czyli ustawiona na jest, to powinien zostać przekierowany
na taką nową stronę z informacją, że jego konto zostało zarchiwizowane, a na tej
stronie powinny dodatkowo pojawić się dwa buttony jedno, które pozwoli
mu cofnąć taką akcję.
Czyli tak naprawdę w Twoim przypadku zmienimy tą flagę i z Archive na NOW oraz
drugi button, który wylogowuje go z aplikacji.
Ponieważ nie chcemy aby użytkownik, który ma właśnie taką flagę i safari ustawioną
na jest był w stanie działać i cokolwiek robić w naszej aplikacji oprócz oczywiście
opcji odblokowania swojego konta.
Ale to już jest Twoja praca domowa.
Myślę, że bez problemu sobie z nią poradzisz.
Natomiast my teraz wracamy jeszcze tutaj do tego popup i muszę dodać
odpowiednią akcję do zamykania go poprzez kliknięcie w tą ikonkę.
Czyli idziemy to mamy start.
Edit Workflow jest w tym miejscu.
I tutaj będzie tylko ukrywanie naszego pop upów.
I to wszystko.
Dobrze, Wracamy więc teraz do strony designu i zajmijmy się może właśnie
tą opcją edycji naszego profilu. Jak to działa?
Odświeżamy sobie podgląd strony.
Zerknijmy, czy działa nam wyświetlanie tego pop upów.
Nie chcę archiwizować tego konta, więc go zamykam.
Teraz po kliknięciu w tą ikonkę wyświetla nam się popup z edycją profilu.
I teraz to co musimy tutaj zrobić to wyświetlić dane bieżącego użytkownika,
czyli wyświetlić jego fotografię, uzupełnić te pola,
wskazać tutaj jakie języki wybrał.
Na koniec dać mu opcję zmienienia tych wartości.
Jak to zrobić? Znów jest to super proste.
Wracamy do edytora i musimy dla całego tego papu wstawić typ danych.
Jak się domyślasz będzie to user.
A data Source to po prostu current user.
W ten sposób mogę odnieść się do takiego etapu i tutaj wyświetlać sobie odpowiednie
wartości, albo jeżeli wolisz przekierować je właśnie w ten sposób poprzez ten
łańcuszek do poszczególnych grup.
To jak to zrobisz zależy już od Ciebie.
Ja wybiorę sobie tutaj uproszczoną wersję, czyli tutaj odnoszą się do
etapu całego, czyli w naszym przypadku Edit Profil pop up.
I dlaczego nie wskoczył tutaj user?
Bo pewnie typeof content i indziej ustawiłem gdzieś.
Pewnie nie ma tego elementu.
No nic, musiałem gdzieś kliknąć w jakąś grupę, więc jeszcze raz to zróbmy user.
I oczywiście current user.
I teraz mogę sobie skopiować tą nazwę i odnosić się do tego elementu czyli edit
profile pop up i user avatar i analogicznie ustawić te wartości
poprzez wpisanie ich w opcje initial content.
W ten sposób jeżeli jakaś wartość nie zostanie wypełniona,
to to pole pozostanie puste.
Natomiast jeżeli taka wartość rzeczywiście będzie w danej kolumnie dla danego
rekordu, które tutaj wyciągamy, to zostanie to uzupełnione.
Jest to super przydatna rzecz i zaraz zobaczysz jak działa.
Czyli znów odnosimy się do profilu użytkownika i wyciągamy tutaj first name.
Skopiuj tą wartość, wstawimy odpowiednie kolumny, czyli last name.
Tutaj jest to City.
Ja sobie skopiowałem to pole input, tylko nie zmieniłem tutaj place Holdera.
Będzie to oczywiście City.
Tu będzie to oczywiście fan number.
Tutaj About me.
Oczywiście już wkleiłem to w złym miejscu, czyli Copy expression.
Cofnijmy te zmiany.
Oczywiscie tutaj wylecial content.
W tym miejscu chcę wstawić tą wartość.
Teraz mamy tutaj tę sekcję z językami.
No i znów zastanówmy się jak to powinno działać, ponieważ mamy tutaj guzik SAFE.
Nie chciałbym, żeby po kliknięciu w tą grupę z językiem automatycznie
aktualizować rekord danego użytkownika, ponieważ byłoby to dla niego intuicyjne.
Może otworzyć taki popup, zacząć wpisywać jakieś wartości inne niż
miał domyślnie podane.
No i stwierdzi na koniec ale może jednak nie wyjdzie.
A gdybyśmy tutaj od razu aktualizować, to rzeczywiście te zmiany
zostałyby wprowadzone.
Jak więc to zrobić?
Musimy zastosować podobną sztuczkę, jak robiliśmy wcześniej.
Czyli odnosimy się tutaj dla całego tego naszego popup u i
dodajemy tutaj custom state.
I będą to po prostu języki.
Oczywiście odpowiedni option set.
I oczywiście będzie to lista.
I teraz tak.
Sprawdźmy, czy mamy tutaj odpowiednie wartości.
Pokazujemy wszystkie języki.
Tak, to się zgadza.
Natomiast chcemy automatycznie tutaj zaznaczyć te ikonki dla tych języków,
które użytkownik już sobie wybrał, a więc będziemy się odnosić do setu.
Wiem, że trochę to intuicyjne, ale proszę poczekaj, zaraz się to wyjaśni.
A więc wracam sobie na stronę an buildingu.
Klikam sobie na tą ikonkę, kopiuję sobie ten condition.
Wracam tutaj na stronę profilowe. Profilowana.
Tutaj po papu.
I odnoszę się oczywiście do pop up.
Set.
OK, to muszę się tak pop up custom state tak zawiera.
A widzisz, to już nawet fajnie uzupełniła.
Jeżeli ten custom z językami zawiera ten język, to oczywiście zmieniamy tą ikonkę,
czyli bardzo podobnie jak robiliśmy na stronie brandingu.
Teraz musimy oczywiście jeszcze dodać tutaj odpowiednie workflow, które będzie
dodawało i usuwało taki język z tego custom statu.
Czyli znów to co robiliśmy wcześniej jest to powtórzenie tych samych operacji.
Nie ma tutaj nic trudnego.
Dodajmy sobie tutaj odpowiedni folder, Żeby jeszcze fajniej to po rozdzielać.
To będzie zielone, czyli warunek brzmiący, że popup.
Edit Profil popup Custom stat nie zawiera języka przypisanego do tej grupy.
Oczywiście chcemy go tam sobie dodać, czyli stage.
state.
Odpowiedni?
Znowu odnosimy się tak jak to robiliśmy wcześniej do każdego custom state
i będzie to + item.
Czyli ten wybrany język.
Teraz możemy sobie przejść do odpowiedniej grupy, skopiować
to workflow wkleić, zmienić jego kolor na czerwony i tym razem jeżeli zawiera
taki język to oczywiście go tutaj usuwamy, czyli site.
Natomiast w jaki sposób teraz nasz pop up ma wiedzieć jakie
języki wybrał nasz użytkownik?
Oczywiście musimy ten status odpowiednio ustawić na podstawie jego
rekordu z bazy danych.
A więc wracamy sobie do strony designu.
Musimy tutaj zamknąć chwilowo ten popup.
Namierzyć tą ikonkę tutaj, która pozwoli nam edytować, czyli Edit Icon.
I do niej dodajemy odpowiedni workflow.
Co trzeba robić w pierwszej kolejności?
Ma ustawić nam tutaj state w tym profilu, czyli state
nie tyle profilu co w tym popie czyli Edit profile Popup
Custom State taki jest równe current user.
I odpowiednia wartość.
Czyli teraz ustawiamy ten state języka na taką wartość jaką ma tutaj
przypisany user do swojego rekordu, a potem pokazujemy sobie ten popup.
Zerknijmy czy to odpowiednio zadziała.
Przechodzimy, klikamy w ikonkę.
Jak widzisz tutaj te dane zostały pobrane wszystkie.
Ja mogę sobie teraz je tutaj pozmieniać.
Mogę tutaj zaznaczać te języki, pozmieniać na inne.
Natomiast nadal nie ustawiliśmy tutaj workflow dla tego przycisku Save.
Więc jeżeli zamknę ten popup i znowu go pokażę.
Tak, widzisz, znowu zostały przywrócone te wartości, które tam były wcześniej.
Tu się coś nie zadziało tak jak powinno. Nie wiem dlaczego.
Zerknijmy co tu się nie. Jest coś?
Problem.
Babel ma jakiś problem z wyświetlaniem ikonek, mimo że one tam są.
No nic, mam nadzieję, że to tylko bug chwilowej i za chwilę wróci do normy.
Natomiast my teraz musimy właśnie sobie tutaj dostosować
workflow i rzeczywiście edytować rekord naszego użytkownika.
Natomiast chciałbym Ci pokazać jeszcze jeden błąd, o którym wcześniej
wspomniałem, a w zasadzie taki trick, który ja stosuję.
Ponieważ mamy tutaj zwykły Pixela Provider i on działa fajnie, pod warunkiem, że
użytkownik wklei tutaj obrazek, który rzeczywiście będzie w tym
przypadku prostokątny.
Ale jeżeli wybiorę sobie tutaj jakieś inne zdjęcie,
takie bardziej szerokie, to jak widzisz?
No już dużo, dużo gorzej to wygląda i niestety w przypadku pixel loadera nie
jesteśmy w stanie do tego sobie dopasować, żeby on tutaj
rzeczywiście sobie przycinał to zdjęcie i zajmował całą dostępną przestrzeń.
Dlatego ja pokażę Ci jeszcze jeden trik, z którego ja bardzo często korzystam.
A więc wracamy do edytora.
Przechodzimy do naszego etapu dodaje kolejny custom State.
Będzie to avatar.
Po prostu będzie to image.
OK, nie możemy tutaj ustawić default value, ponieważ jest to avatar wyciągany z
rekordu użytkownika, a więc aby go ustawić przechodzimy do Edit icon
do tego pierwszego kroku, gdzie ustawialiśmy języki.
I analogicznie ustawiamy sobie tutaj avatar, czyli to będzie po
prostu klient user avatar.
To jest pierwszy krok.
Czyli ustawiamy właśnie ten custom state.
Teraz wracamy do designu Papu i tutaj zamiast tego Picture,
a w zasadzie Pixara Providera.
Dokładnie będę chciał wyświetlić zwykłe zdjęcie.
Klikam sobie tutaj Image.
Jakie mamy tutaj wymiary?
Mamy tutaj zaokrąglenie 8 pikseli border neutral 300, a więc
postarajmy się to tutaj odzwierciedlić.
Zaokrąglenie. 8 pikseli.
Tak, Solid Neutral 300.
Co mamy tutaj wyświetlać?
Nie wartość bezpośrednio z rekordu użytkownika, ale z naszego custom stats.
Zaraz zobaczysz dlaczego.
Czyli popup.
I po prostu avatar.
Tu już widzisz mogę wybrać opcję Real coil, dzięki czemu ten obrazek
odpowiednio nam się tam wpasuje.
Zostanie przycięty.
Jaka to była?
Wymiary mamy tutaj 96 na 96 pikseli, a więc zastosujmy je tutaj.
I ok, teraz będziemy tutaj wyświetlać obrazek.
Ja chcę zrobić jeszcze kolejny trik.
Tutaj to Picture loader i change button photo.
Ten button chcę ubrać sobie tutaj w grupę i będzie to grupa Align
to parent container.
Obrazek pierwszy, potem ta grupa.
Pozbywamy się tutaj tych wartości.
Chcę, żeby ona się dostosowała tutaj właśnie do tego przycisku.
I teraz chcę tutaj odzwierciedlić wymiary tego przycisku.
Ten przycisk ma tutaj 40 pikseli.
Mamy tutaj jakoś stałą wartość.
Nie mamy, więc może ustawmy tutaj 120 pikseli?
Będzie ok.
Nie, powiedzmy 140.
OK, czyli mamy 140 na 40 pikseli.
Takie same wymiary nadajemy temu piksela liderowi, czyli 140 na 40 pikseli.
Jak widzisz on teraz pokrywa się z naszym betonem.
Usuńmy mu tutaj te style, wywalamy tutaj ten dynamiki.
Image czyli clear expression font ustawiam na 0, żeby mi się tutaj
ten napis w ogóle nie wyświetlał.
Usuwam sobie tutaj flat color, usuwam obramowanie.
On jest w pełni niewidoczny, mimo że tak naprawdę dalej tam właśnie jest.
Jeszcze tylko tą grupę tutaj w środku i to będzie Change Photo Group.
A więc mamy tu przycisk, który tak naprawdę nic nie robi, tylko właśnie tak
ładnie wygląda i wyświetla się nam tutaj i mamy nałożonego na niego
tutaj picture loadera.
I co się stanie właśnie kiedy użytkownik kliknie?
Ja chcę dodać odpowiednie workflow.
Natomiast ponieważ jest to Picture app loader, to żeby wychwycić, że rzeczywiście
coś się stało, czyli wstawić ten trigger, musimy to zrobić w ten sposób.
Dodajmy sobie tutaj nowy folder, nazwijmy go avatar.
I teraz mogę się odnieść do element input values change.
Czyli jeżeli zmieniła się wartość jakiegoś pola input, a w naszym przypadku
będzie to właśnie nasz avatar?
To co chcę zrobić? Chcę ustawić state.
Będzie to State Avatar i będzie to wartość z tego pola.
Czyli użytkownik wgrywa sobie to zdjęcie, czyli klika na ten przycisk,
otwiera mu się okienko, wybierze sobie fotkę, ona tam się wgra i
automatycznie ustawiam ją jako state.
Następnie resetuje sobie całą tą grupę.
Grupę tutaj Avatar.
Tak ją nazwaliśmy.
Widzisz, tak to jest.
A Change Photo Change Photo Group.
I to w zasadzie wszystko.
To jest taki mały trik.
W ten sposób zaraz zobaczysz, jak to fajnie będzie nam działało.
Klikam to już nie mogę kliknąć, muszę kliknąć na Change photo.
Tylko żeby to zrobić muszę sobie ten picture wyciągnąć na przód.
A więc wracam do designu tutaj i wybieram Bring Front tak żeby on był na
przedzie i po prostu przykrywał ten button jest niewidoczny, więc użytkownik będzie
miał wrażenie, że klika w ten button.
Tudzież otwiera się Picture app Loader.
Wybieram właściwe zdjęcia i z automatu ustawia mi się właśnie tutaj
jako zdjęcie z tego właśnie naszego custom statu.
Natomiast zaraz sobie to dopasujemy, żeby się to odpowiednio wyświetlało.
Wybierzmy tutaj w skale, może nie wybierzmy nam tutaj
powinno zadziałać tak jak trzeba.
Zerknijmy.
Change photo Wybieram Jana Łyka. weekend.
Jak widzisz teraz ten obrazek został fajnie przycięty i właśnie w takiej
formie będziemy go potem wyświetlać.
Czyli nie ma takich brzydkich ramek u góry i u dołu.
Ponieważ użytkownik nie grał w kwadratowego zdjęcia,
jest to bardzo fajny trick.
Radzę Ci z niego korzystać.
Jak widzisz jest mega prosty.
Po prostu mamy tutaj czar, którego nie widać nałożony na button i użytkownik
myśli, że klika w przycisk, a tak naprawdę klika, która loadera.
W ten sposób zmieniamy Custom State automatycznie resetuje
całą tą grupę w ten sposób. Właśnie w tym pic trzeba.
Prawda, że obrazek się nie wyświetla?
Jeżeli nie wierzysz to po prostu usuń ten krok zresetowanie grupy i zobaczysz,
że pojawi Ci się taki wgrany plik.
Właśnie w tym Picture Apply uderza.
Jedyne co nam jeszcze tutaj zostaje to oczywiście teraz dopasowanie tylko tego
przycisku save, czyli dodania dla niego odpowiedniego workflow.
Wracamy do edytora.
Klikamy na przycisk Save.
Dodajmy tutaj Edit Profile Group.
OK.
Zmieńmy kolor batona powiedzmy na blue.
I naszym zadaniem, jak się domyślasz znów będzie wybranie opcji make
changes to current user.
Znów zaznaczam sobie tą opcję.
Pozbywam się tych pól, zostawiam tylko te, które są nam potrzebne.
I przekazuję do nich odpowiednie wartości.
czyli odnoszę się do odpowiednich pól z formularza.
Avatar to będzie oczywiście custom state, ponieważ tam przechowujemy aktualną
fotografię jaką wgrał user.
Jeżeli nie wgrał żadnej, to będzie to po prostu dokładnie ta sama, którą miał
wcześniej na profilu, czyli avatar.
Mogę sobie to skopiować i to samo tutaj zrobić na set list.
i wybrać po prostu ten właściwy custom state i tutaj City.
First name.
To samo dla pola Last name.
I oczywiście dla numeru telefonu.
A na koniec chcemy oczywiście ukryć nasz popup, czyli height and element.
I teraz sprawdźmy, czy to zadziała.
Klikamy w ikonkę.
Przekazujemy tutaj Custom state dla obrazka i dla języków.
Zmieńmy sobie to foto.
Przejdźmy tego naszego Johna W.
I nie będzie to Dżesika, tylko teraz Jean Vic.
Zostawiamy resztę tutaj.
Możemy zmienić to na.
Taką skrótowo nazwę i dodajmy mu jeszcze język polski.
Klikamy Save.
Jak widzisz, tutaj się to zmieniło.
Oczywiście muszę tutaj zaraz sobie dopasować, żeby fotka się
odpowiednio wyświetlała.
Natomiast tutaj widzisz wartości się pozmieniały
i teraz jak otwieramy pop up to mamy już te nowe, edytowane i zaktualizowane
dane usera tutaj wyświetlane.
Więc ostatnia poprawka.
Tutaj nie Rise Coil, tylko Zuma.
Z jakiegoś powodu zawsze mi się wydaje, że musi być RISC cala,
ale to jednak powinno być Zuma.
A i teraz wygląda to dużo lepiej.
A jeżeli wrócę do Dashboard?
To oczywiście mamy tutaj też nie poprawione.
Też pewnie zmieniłem na skalę, ale zaraz to poprawię.
Ty też proszę to zrób, jeżeli postępowała byś tak jak ja.
Natomiast pojawia się tutaj John Wick, czyli wszystko zadziałało.
Ja dziękuję Ci za uwagę.
Wiesz teraz jak edytować rekord, jak ustawiać custom
staty, pobierać wartości bezpośrednio z rekordu z bazy danych, a także potem
jak je tutaj zmienić oraz jaka jest procedura w przypadku
jakichś niebezpiecznych akcji, czyli np.
usunięcia konta użytkownika.
Więc jeszcze raz dzięki za uwagę i widzimy się już za moment.