Aplikacje no-code z Bubble: Strony autentykacji

0:00Witam Cię serdecznie w pierwszej lekcji drugiego modułu, w którym skupimy się na

0:04zaprojektowaniu i załadowaniu dynamicznych podstron naszego serwisu,

0:09a naszą pracę rozpoczniemy od najważniejszych ze stron,

0:11czyli oczywiście strony rejestracji, za pomocą której nasz przyszły użytkownik

0:16będzie mógł utworzyć konto w naszym serwisie.

0:19A więc zaprojektujemy i wdrożymy właśnie stronę, którą widzisz teraz na ekranie.

0:23Nie przedłużając i przejdźmy do edytora.

0:26A więc rozpoczynamy od utworzenia nowej strony.

0:29Nazwijmy ją po prostu sign up.

0:33Nie chcę niczego klonować.

0:35Klikam Create.

0:37Natomiast w przypadku strony autentykacji można zastosować dwa podejścia.

0:41Ja bardzo często tworzę jedną stronę, za pomocą której użytkownik może utworzyć

0:46swoje konto, zalogować się oraz przypomnieć hasło.

0:49Jest to opcja bardzo przydatna w przypadku dosyć małych serwisów,

0:53ponieważ upraszcza nam pracę i możemy wszystko umieścić na jednej stronie.

0:57Natomiast w przypadku dość dużych i rozbudowanych serwisów a do takich

1:01serwisów właśnie zaliczam Stay nes, który właśnie teraz budujemy.

1:04Zdecydowanie dużo lepiej jest te strony

1:06podzielić na osobne podstrony, czyli osobną stronę

1:10rejestracji, stronę logowania i stronę przypomnienia hasła.

1:13Dlaczego? Otóż bardzo często w takich serwisach

1:16ścieżka po rejestracji bądź pożegnaniu będzie bardzo, bardzo różna np.

1:22w przypadku rejestracji często dochodzi

1:23jeszcze jakiś dosyć skomplikowany boarding.

1:26Cała masa operacji, którą będziesz chciał wykonać po drodze.

1:29Dlatego dużo łatwiej jest rozbić te podstrony na osobne strony.

1:33W zasadzie w naszym serwisie i wtedy dużo

1:35prościej jest tym wszystkim zarządzać i dużo łatwiej będzie Ci z tym pracować.

1:40Dodatkowo dużo łatwiej jest po prostu pokazywać te strony.

1:42Jeżeli mamy tylko jedną, no to trudno jest tam nadać jakąś sensowną nazwę.

1:46Może to być auth, może to być autentykacji, cokolwiek.

1:50Natomiast tutaj masz proste rozbicie na

1:52stronę sign up, stronę sign in oraz tone reset password czy Recovery password.

1:57Jakkolwiek będziesz chciał sobie nazwać.

1:59A więc nie przedłużają tego wstępu i przystąpimy do działania.

2:03Przede wszystkim ustawiamy sobie tutaj podstawowe parametry dla naszej strony.

2:09Ja w tym przypadku wybiorę tutaj po prostu home.

2:131440 pikseli.

2:15Możemy pozostawić tą minimalną wysokość na 767.

2:18Tutaj nie będziemy mieć zbyt wiele treści,

2:21a więc dodajemy znaną Ci już grupę o nazwie Page Wrapper.

2:31Dla niej również będę chciał ustawić router, pozbyć się minimalnej szerokości.

2:37Pozbyć się minimalnej wysokości.

2:39W ten sposób ta grupa skurczy się w zasadzie do zera

2:42pikseli, ponieważ nie ma nic środku, natomiast ja chcę ją rozciągnąć na całą

2:46dostępną wysokość strony, a więc wybieram tą opcję vertical stretch.

2:52Następnie dodajemy do środka kolejną grupę.

2:56Będzie to Left Group.

2:59Tutaj ustawimy Elaine Parent.

3:03Sterujemy minimalną szerokość,

3:05a w zasadzie ustawiamy ją w tym przypadku na 50%.

3:09Tylko nie w ten sposób.

3:10Wpisuję tu 50 i klikam na piksel i wybieram procenty.

3:14I podobnie jak w poprzednim przypadku również chcę ją rozciągnąć

3:17na całą dostępną wysokość i pozbyć się tutaj minimalnej wysokości.

3:22Kolejno zaznaczam taką grupę i ją powielam.

3:26Tym razem zmieniłem jej nazwę na RAID Group.

3:29Po prostu nie utrudnia.

3:31I tutaj stosujmy jak najprostsze nazewnictwo.

3:35Tutaj również minimalna szerokość 50% rozciągnięcie na całą dostępną wysokość.

3:40Ale tym razem to, co chcę zrobić tutaj.

3:43To nadać tło.

3:45Moje podejście jest takie, że jeżeli grafika bądź zdjęcie ma stanowić jakąś

3:49istotną część Twojej strony Twojego przekazu, np.

3:53może to być to zdjęcie listingu tak jak robiliśmy to na stronie głównej

3:58lub zdjęcie artykułu do blogu lub też grafikę, która w jakiś sposób coś

4:02znaczy to wtedy zawsze korzystam z obrazka.

4:05Natomiast jeżeli ma to być tylko tło na

4:07stronie, to mogę je nadać właśnie tutaj nadając je dla całej grupy.

4:12Wybieramy Background style ustawione na image.

4:16I wgrywamy odpowiedni obrazek.

4:19Przejdźmy tutaj do sekcji Images.

4:23I musimy namierzyć odpowiednio obrazek, czyli Register Web.

4:30To co chcę zrobić jeszcze tutaj, to wycena.

4:33Zrobić ten obrazek i sprawić, żeby był tak szeroki jak element rodzica.

4:39I tutaj zaznaczyć tą opcję

4:41Crop to image, żeby on się dopasował do tego elementu, do całej tej grupy.

4:45Jak widzisz teraz zajmuje całą dostępną przestrzeń i całkiem fajnie wygląda.

4:50A więc prawą stronę mamy z głowy.

4:52Możemy przystąpić do pracy nad lewą stroną.

4:55Dodaję tutaj kolejną grupę.

4:59Nazywam ją po prostu Forum grup.

5:04Typ layoutu ustawiamy tutaj na kolumn.

5:08Centrowanie to grube względem elementu rodzica.

5:10W zasadzie samo się to już zrobiła, więc nie musimy tego zmieniać.

5:14Zaznaczamy minimalną szerokość.

5:17Natomiast ustalić tutaj maksymalną szerokość równą 400 pikseli.

5:22I chwilowo zostawmy tutaj to minimalna wysokość.

5:24Teraz będziemy dodawać elementy do środka.

5:27To co chcę jeszcze zrobić, to ustalić tutaj Deep Space Link na 24 piksele.

5:33Oraz padding z każdej strony na 32 piksele.

5:40Kolejno dodajemy tutaj tekst.

5:45W naszym przypadku będzie to hosting typu trzeciego, a więc szukamy H3.

5:52To co chcę zmienić to tylko kolor na tym przypadku Neutral 800.

5:59Oczywiście poprawić tekst na Create Account.

6:04Pozbywamy się tutaj minimalnej szerokości,

6:07dopasujemy szerokość do contentu i oczywiście zarabiamy minimalną wysokość.

6:13Następnie dodajemy tutaj pole input.

6:20W tym przypadku będę tego pola Input chciał zdefiniować odpowiednie style,

6:23a następnie porozmawiamy sobie tutaj jeszcze o jego dostępnych opcjach.

6:27A więc tak.

6:28Przede wszystkim font pozostaje standardowy.

6:33Rozmiar Fanta zmieniamy na 16 pikseli.

6:39Grubość 500.

6:41Kolor secondary 600.

6:46Place Holder, czyli tekst, który się tutaj pojawia zmieniamy na.

6:51Powiedzmy secondary 600, ale ustawione na 50%.

6:58Page Style ustawiamy na flat color.

7:02Nasz kolor biały tutaj ze zmiennej kolorystycznej.

7:05Następnie.

7:07Dodajemy tutaj border 1 piksel solid

7:11nasz standardowy kolor obramowania czyli Neutral 300.

7:14Zaokrąglenie narożników na 8 pikseli.

7:21Tak nie ustawiamy żadnego shadow style, ale dodajemy tranzycji na border color.

7:28All borders, oczywiście ustawioną na 300.

7:36A wskoczyło nam to już właściwie.

7:39Teraz przechodzimy do sekcji Conditions i ustawiamy tutaj odpowiednie warunki.

7:44Możemy sobie dodać.

7:48Pierwszy, czyli This input is Howard.

7:52Czyli z tego statusu już korzystaliśmy.

7:54Jedyne co chcę tutaj zmienić to border.

8:00Nasz kolor Primary 600.

8:04Teraz przesuniemy sobie ten warunek na samą górę.

8:09I następnie przejdźmy do kolejnego.

8:12Czyli Disk input i Fokus.

8:14Ten status odpali nam się wtedy, kiedy

8:16użytkownik kliknie na takie pole input i zacznie tam powoli coś wpisywać.

8:20Jedyne co chcemy tutaj zmienić.

8:23To bardzo kolor i w tym przypadku będzie to nasz kolor Primary 700.

8:31I mamy jeszcze styl This is invalid.

8:35Czyli kiedy następuje tutaj jakiś błąd i to pole nie jest odpowiednio zwariowane.

8:39Tutaj zostawmy też tylko nasz border color.

8:43Ale kolor zmieńmy sobie na.

8:46Kolor w zasadzie Danger 600.

8:49Ten kolor jest nam tutaj potrzebne.

8:53Przejdźmy jeszcze do zakładki Layout.

8:58I tutaj odznaczamy.

9:01Minimalną szerokość.

9:03Wysokość ustawiamy na stałe na 48 pikseli, a padding zmieniamy na 12 pikseli.

9:09Od góry i od dołu oraz 16 pikseli z lewej i prawej strony.

9:18Nazwijmy to pole email input.

9:24I przejdźmy teraz do ustawień.

9:26Przede wszystkim możemy zmienić place holder, czyli ten tekst, który tu się

9:29pojawia na początku i będzie to po prosto w naszym przypadku email adres.

9:36Kolejno możemy tutaj ustawić jakiś initial content, czyli wartość, która się będzie

9:40pojawiała po załadowaniu się naszej strony.

9:42W naszym przypadku jest to niepotrzebne, nie musimy tutaj nic zmieniać.

9:46Natomiast chcę zmienić Content format, ponieważ chcę ustawić tutaj opcję email.

9:52W ten sposób użytkownik będzie tutaj wpisywał adres emailowy, a Babel zadba o

9:56podstawową walidację, czyli sprawdzi czy to rzeczywiście jest poprawny adres email,

10:00to możemy jeszcze wyłączyć takie pole input, zaznaczyć żeby nie było puste

10:06lub też zablokować klawisz Enter tak aby nie wysyłał nam tego co tutaj wpiszemy.

10:11Pozostawiamy te wszystkie opcje puste.

10:14Mamy tutaj pole input, które jeszcze dodatkowo będę chciał ubrać w grupę.

10:19Typu kolumn.

10:23Będzie to po prostu email group.

10:28Tutaj chcę dodać tylko Cap Space Ink ustawiony na 8 pikseli.

10:34I to w zasadzie na razie tyle.

10:35Rozwijamy to drzewko, żeby sprawdzić jak to wszystko wygląda.

10:39Mamy email group, zaznaczam całą grupę.

10:43Czyli Select first Parent.

10:46I klikam Command, aby ją zduplikowane.

10:50Tym razem będzie to.

10:53Password Group.

10:59Wracamy do Appearance i przejdźmy teraz do ustawień tego pola.

11:03Zmieńmy jego nazwę na Password Input.

11:10Wpiszmy tutaj your password

11:14jako place holder i tym razem content for zmieniamy po prostu na password.

11:18A więc w momencie kiedy użytkownik zacznie tutaj coś wpisywać, pojawią się gwiazdki

11:22zamiast widocznego tekstu, który mógłby ktoś inny podejrzeć.

11:27Style pozostają takie same.

11:28Jedyne co chcę zrobić tutaj, to skopiuję sobie ten tekst.

11:33I wstaw go do grupy Password Group.

11:38Zmieniamy styl na Body XS 12 pikseli.

11:43A wartość tekstu ustawiamy na taką.

11:45Czyli informację o tym, że hasło musi zawierać przynajmniej 8 znaków.

11:51To co możemy jeszcze zrobić, to zgrupować sobie te dwie grupy.

11:57Czyli Email Group oraz Password Group.

11:59Ja zaznaczę na razie tą pierwszą.

12:02Kliknę Edit.

12:04I wybiorę tutaj group element column container.

12:08To będzie input.

12:15I Cap Space Ring ustawiony na 16 pikseli.

12:19I teraz pociągnę sobie tutaj tą grupę Password.

12:24To co mogę zrobić teraz to powielić całą tą grupę Input Group.

12:29Czyli tutaj skopiować i wkleić do grupy forum grupy.

12:37Pozbyć się tej grupy i wstawić tutaj przyciski.

12:42Ale najpierw zmieńmy tą nazwę.

12:44Będzie to po prostu button z grup.

12:48W ten sposób zachowamy sobie tutaj odpowiedni gap space Link.

12:53Wybieram button i wstawiam go do grupy.

12:56Zerknijmy, czy on na wskoczył we właściwe miejsce.

12:58Musimy go wyciągnąć z tej i Mail Group.

13:01Jej możemy się pozbyć.

13:07Będzie to baton.

13:15Eks to po prostu sign up.

13:21Zmieniamy styl na nasz styl Button Primary big.

13:26Wysokość ustawiamy na 48 pikseli.

13:31Pozbywamy się minimalnej szerokości i tym

13:33razem chcesz, by ten button rozciągnął się na całą dostępną szerokość tutaj.

13:37A więc nie wybieram tej opcji Fit content.

13:40To co możemy zrobić teraz tutaj, to stworzyć taki własny button.

13:45Aby to zrobić, ja wybieram po prostu dodanie nowej grupy.

13:50I będzie to grupa o nazwie.

13:53Gugiel btn.

13:59Container typu row.

14:02Pozbywamy się minimalnej szerokości.

14:04Ustawiamy stałą wysokość 48 pikseli.

14:09Centrum mamy elementy w środku.

14:13Przechodzę sobie teraz do Appearance.

14:18I tutaj tak możemy wybrać styl.

14:22Nie chcemy mieć żadnego tła, natomiast

14:24chcę mieć border typu solid jeden piksel na standardowy kolor obramowania.

14:32Dodamy również tutaj transkrypcję do border color.

14:37Równo 300.

14:40Zaokrąglamy narożniki na 8 pikseli

14:44i dodamy jeszcze tryb Condition all, czyli This is Howard.

14:51Chcemy zmienić border color.

14:54Na nasz kolor.

14:56W tym przypadku.

14:58Primary 600.

15:02A w zasadzie nie Primary 600, tylko Secondary 600.

15:07Dokładnie. Teraz kopiujemy sobie ten tekst.

15:10Wklejamy go tutaj.

15:14W centrum mego.

15:16I teraz miejmy tylko odpowiednie style.

15:23W tym przypadku będzie to body MD 700.

15:28Czy mamy taki styl, mamy taki styl.

15:31Ron Neutral 600.

15:36I zmieniamy tekst na.

15:38Continued.

15:40Google.

15:46Chcę tu jeszcze wstawić obrazek.

15:50Nazwijmy go.

15:51Google i AMG.

15:57Znajdziesz go w katalogu Icons.

16:00Jest to po prostu logotyp Google'a.

16:05Ustawiamy mu wymiary na 12 pikseli.

16:08Aspect ratio jeden do jednego.

16:11Chociaż jakoś to małe to powiedzmy 16 pikseli.

16:15Teraz zdecydowanie lepiej to wygląda w centrum.

16:17I jeszcze ten obrazek.

16:20A w zasadzie może dajmy tutaj 24.

16:23Niech to logo Googla będzie dobrze widoczne i dla całej tej grupy.

16:27Dajmy tutaj jeszcze Gap Space Ink równy 16 pixeli.

16:32Trochę za dużo.

16:33Spróbujmy 12.

16:35Nadal za dużo.

16:388 jest ok.

16:39I teraz mamy taki własny przycisk.

16:42Teraz to co możemy zrobić to dodać tutaj jeszcze link.

16:50Czyli do całej tej grupy Buttons Group.

16:54I tutaj ustawmy tekst.

16:57Already even account.

17:05Wybierzmy tutaj link Tekst.

17:08Jedyne co chcę zmienić to na dzień dobry Font Color, zmienić Neutral 600 Arcadia,

17:13pozostawić Neutral 600, ale dać tutaj wartość 50%.

17:21Teraz pozbywamy się minimalnej szerokości,

17:25pozbywamy się minimalnej wysokości, dostosowujemy szerokość do contentu.

17:31Chcemy ten tekst w centrum dać tutaj umieścić go na samym dole.

17:36Sporą część tutaj mamy gotową.

17:39Kolejno dodajemy jeszcze divided.

17:48Czyli standardowo brak minimalnej szerokości.

17:51Wysokość ustawiona na 1.

17:54Ja już tutaj sobie utworzyłem styl

17:56dla naszego DVD i następnie pozostaje nam jeszcze dodanie tekstu.

18:04A w zasadzie możemy nawet sobie skopiować ten tekst.

18:08I wstawić go tutaj.

18:12I chwilowo zostawmy gacie.

18:14W zasadzie możemy sobie skopiować ten tekst stąd, czyli z naszego wzorca.

18:22To co chcę zrobić, to wyceny ować.

18:26I zrobić to również tutaj.

18:31Chyba niemal wszystko mamy gotowe.

18:35Dajmy tutaj jeszcze margines dla tego DVD.

18:37Od góry i od dołu równe 12 pikseli.

18:42I przejdźmy do podglądu.

18:51OK, wygląda na to, że wszystko jest w porządku.

18:53Musimy się jeszcze tylko pozbyć

18:55debuggera, żeby sprawdzić, czy to się wszystko odpowiednio tutaj rozciąga.

19:03OK, mamy obrazek.

19:05Mamy tutaj pole input password.

19:08A więc teraz użytkownik będzie mógł się zarejestrować na naszej stronie.

19:13To co chcemy tutaj jeszcze zrobić, to stworzyć stronę logowania.

19:18A więc przejdźmy sobie.

19:21O właśnie tutaj muszę zamknąć.

19:24To, co chcę zrobić jeszcze, to pokazać sobie.

19:28Tutaj te opcje.

19:30To jest ta nasza nowa strona.

19:32Przesuwam sobie to tutaj tylko po to,

19:34żebyśmy szybko mogli przejść do podglądu naszej strony.

19:38Wracamy do edytora.

19:41I aby teraz utworzyć stronę logowania.

19:44To co muszę zrobić to po prostu powielić

19:46stronę rejestracji i wprowadzić tylko kilka drobnych poprawek.

19:50A więc wybieramy Ada New Page.

19:53Ubiorem Saiyanin.

19:57Planujemy ze strony sign up klikam Create.

20:02I wprowadzamy poprawki.

20:03Przede wszystkim chcę tutaj zmienić ten obrazek.

20:10Czyli klikam w to miejsce i tym razem wybieram.

20:14Login.

20:18Następnie przechodzimy tutaj i zmieniamy nagłówek na Welcome Back.

20:26Pola input będą dokładnie takie same,

20:27ponieważ będziemy wymagać tylko podania adresu e-mail oraz hasła.

20:32Natomiast ten tekst zastąpimy tutaj linkiem.

20:38Pozbywamy się go.

20:42I zerknijmy czy mamy tutaj odpowiednie style.

20:44Zacznijmy od link text, ale tym razem.

20:48Wybieram sobie styl.

20:51Zmieniam kolor na kolor primary.

20:57I Condition All.

21:01Tutaj linki z hover zmieniamy na primary 700.

21:06A kiedy jest wciśnięte na Primary 900 i nazwijmy to.

21:11Link.

21:14Tekst.

21:15Primare.

21:21Tak zmieniamy na.

21:24Forget Password.

21:32Pozbywamy się tutaj minimalnej szerokości, spodziewamy się minimalnej wysokości,

21:38dopasujemy tekst do contentu i chcę ten element wyrównać do prawej strony.

21:46To zmieniamy na sign in button.

21:49I oczywiście odpowiednio tekst.

21:56Ten guzik pozostaje bez zmian.

21:58Tutaj zmieniamy tekst na Don't have no count.

22:13Chwilowo pozostawiamy Divided.

22:14Na razie zostawmy ten tekst.

22:16Potem dostosujemy sobie tutaj ten wygląd i dodamy dwa buttony.

22:21Natomiast to co chcę teraz zrobić, to

22:23włączyć tutaj opcję przełączania się między stronami.

22:26Jak widzisz, pamiętasz, dodaliśmy tutaj link.

22:29I możemy wybrać dokąd ma kierować.

22:32U nas będzie to internal page, czyli wewnętrzna strona serwisu, czyli te, które

22:35mamy tutaj ustawione, a w naszym przypadku będzie to.

22:40Strona. Sign up.

22:41Czyli chcemy po kliknięciu

22:43w ten link przerzucać użytkownika na stronę rejestracji.

22:47To samo możemy teraz zrobić dla strony rejestracji, czyli wróćmy do Sign up.

22:54I tym razem tutaj ten link zmienić nie na indeks tylko na Saiyanin.

23:00I teraz będziemy mogli się przełączać pomiędzy tymi stronami.

23:04To co jeszcze potrzebujemy, to strony przypomnienia hasła.

23:08Znów ułatwiamy sobie życie i po prostu skopiuje całą stronę sylab.

23:15Czyli Adam Page.

23:18To będzie password recovery.

23:26I kopiujemy stronę sign up.

23:32Jak się domyślasz, rozpoczynamy od zmiany obrazka.

23:40Jest to Fargo Password.

23:44To, co chcę tutaj zrobić.

23:47A zaraz przejdźmy do strony wzorcowej.

23:51U nas jest to.

23:53Ta strona odświeży Te guziki dodamy potem na stronie logowania.

23:57O tym właśnie mówiłem.

23:59Na razie potrzebujemy jeszcze tutaj

24:01stworzenia tej strony, czyli strony przypomnienia hasła.

24:07Jak dla nas tutaj mega prosta.

24:09A więc wróćmy.

24:12Do edytora, ale najpierw skopiuje sobie tą wartość.

24:18Mnie ten tekst.

24:21Następnie pozbywamy się tutaj tej grupy Password Group.

24:26Pozbywam się tego przycisku.

24:30Pozbywam się tego tekstu.

24:34Nie potrzebujemy DVD, a nie potrzebujemy tego tekstu.

24:40Jedyne co potrzebuję tutaj to zduplikowane ten tekst.

24:45I zgrupować go razem z tym.

24:51Będzie to kolumn container.

24:55Forma top grup.

25:01Dodajmy tu Gap Space Ink równe powiedzmy 12 pikseli.

25:09Ten tekst to będzie w naszym przypadku body MD 500.

25:17Ustawmy tutaj taką wartość.

25:23Zmieńmy jeszcze.

25:25Wartość dla tego przycisku to będzie.

25:29A może password?

25:32Recovery. P.

25:34N.

25:36I tekstowy reset password.

25:44I teraz wszystkie nasze strony są już w zasadzie gotowe.

25:48Mamy stronę rejestracji.

25:50To co jeszcze musimy zrobić tutaj, o czym

25:52zapomniałem, to dodanie opcji powrotu na stronę logowania.

25:57A więc dodaję tutaj najpierw tekst.

26:00I wklejam go tutaj bezpośrednio do forum grup.

26:04Przesuwam go sobie na samą górę.

26:07Będzie to po prostu tekst.

26:10Bóg.

26:16Czcionkę zmieniam na a w zasadzie cały styl na body M400.

26:21Body SM 14 pikseli 500.

26:25I dodaję tutaj jeszcze ikonkę.

26:29Z konewki.

26:36Taka ikonka alt arrow left linear.

26:40Będzie to buck Icon.

26:45Kolor Neutral 600.

26:48Ustawiony na 50 pikseli.

26:56Wymiary tej ikonki to 20 na 20 pikseli.

27:00I teraz chcę zgrupować ikonkę oraz ten tekst.

27:06Tym razem będzie to Row Container.

27:08Po prostu Buck Group.

27:16Stosujmy te elementy w środku o osiem pikseli.

27:20To stosujmy szerokość do contentu.

27:25I w zasadzie teraz za pomocą tej grupy będziemy mogli wrócić na stronę logowania.

27:29Natomiast aby tak się zadziało, będziemy musieli utworzyć nasze pierwsze workflow.

27:34A o tym porozmawiamy sobie już w lekcji kolejnej.

27:37Ja dziękuję Ci za uwagę.

27:38Mam nadzieję, że bezproblemowo wdrożyłem te strony autentykacji.

27:42Nie było nazbyt trudne.

27:43Jak widzisz wystarczyło tylko sporo

27:44kopiowania i zmieniania treści, a my widzimy się już za moment.