Strony WWW z SystemFlow: Wprowadzenie do LC

SystemFlow 1.0+

0:00Sam fakt, że korzystamy z System Flow i jesteśmy wewnątrz flow

0:04sprawia, że możemy w niesamowity sposób zrobić taki żyjący basic system.

0:08Kiedyś trzeba było robić tak, że tworzyliśmy osobny basic system.

0:12Trzeba było aktualizować go, trzeba było

0:14nanosić poprawki zgodnie z tym, co przygotował np.

0:17development. Często to wszystko zjeżdżało się.

0:20Czyli trochę inny był deseń system Fig Mieczy w skeczu trochę inaczej wyglądał na

0:24produkcji, a trochę jeszcze inaczej w wersji testowej.

0:28W związku z tym, że teraz mamy wszystko w jednym miejscu, jest to ogromne

0:31uproszczenie, ale sam fakt, że jest to web flow i w HTML u daje nam ogromne

0:36możliwości, ponieważ same komponenty są też interaktywne.

0:40Stworzenie interaktywności w narzędziu

0:41typu firma czy skecz jest co prawda możliwe, ale jest dużo trudniejsze.

0:46No i ciągle jest to jakiś mock lub jakiś

0:48szkic i musimy przenieść to na development.

0:51Tutaj natomiast mamy do dyspozycji już

0:53komponenty, które działają i mają swoje rozmaite stany.

0:57No i te stany są od takich prostych stanów.

1:00Czyli jeśli wybierzemy sobie np.

1:02kolaps, mamy tutaj za prototypowanie czy

1:04stworzone już gotowe komponenty, które można zwijać, rozwijać i widzimy ich

1:09zachowania, można wprost użycie w naszym aucie.

1:12Jeśli zerkniemy na trochę bardziej złożony

1:15może przykład, to takim przykładem może być modal.

1:18Jeśli wykorzystamy ten przycisk open modal, to otworzy się nam po prostu

1:22okienko modalne, które mamy przygotowane w system Flow.

1:25Dzięki temu możemy podejrzeć jak będą zachowywały się konkretne sekcje naszego

1:30systemu jeszcze przed ich zaimplementowanie czy zmianą.

1:34I to jest bardzo fajna funkcjonalność, ale my dodaliśmy system flow.

1:37Coś jeszcze?

1:38Nie tylko takie proste zachowania, czyli proste hover, proste animacje czy modalne,

1:45ale także całą sekcje tak zwanych life komponentów, czyli komponentów, które

1:50wprowadzają do frameworku jeszcze więcej funkcjonalności.

1:54Out of the Box są dostępne, jak sama nazwa wskazuje jako komponenty, więc możemy użyć

1:59ich bardzo prosto z pomocą menu wyszukiwania czy po prostu klikając na

2:03nazwę, a następnie przenosząc czy wklejając takie coś do naszego projektu.

2:08Więc jeśli np.

2:09zaznaczył bym sobie taki kamper znalazł go, to proszę zwróć uwagę, że on tutaj już

2:14jest wstawiony na scenę i co prawda nie będzie działał w tym

2:18widoku preview, ale jeśli opublikujemy taką stronę testową domeną nawet We Flow,

2:25to będzie on za chwilę odliczał do konkretnego dnia, do konkretnej godziny.

2:30Jeśli przejdziemy do edycji tego elementu i w jego ustawienia, to zobaczysz, że jest

2:34tutaj taki specjalny atrybut Data system Center.

2:37Ja o tym jeszcze dokładnie opowiem, ale będzie odliczał do 2023 r.

2:41Tutaj właśnie można ewentualnie to zmodyfikować.

2:44Większość tych live komponentów właśnie jest modyfikowana.

2:47Dopóki jeszcze nie ma aplikacji, nie możemy jej stworzyć.

2:50Jest modyfikowana przez tą sekcję Custom

2:53atrybut, którą znajdziesz w sekcji Settings.

2:56No i głównie jest ona modyfikowana na

2:58głównym elemencie, czyli w naszym przypadku na I,

3:03ale niektóre elementy w środku też będą miały jakieś swoje atrybuty.

3:09Jak widzisz tutaj też mamy pewne atrybuty,

3:11które pozwalają nam odpowiednio przyporządkować dni, godzinę, minutę itd.

3:16Natomiast to nie jest aż tak istotne.

3:17Ja teraz pokażę Ci jak wygląda ta opublikowana strona i okazuje się, że ten

3:22kantar rzeczywiście działa i poprawnie odlicza.

3:25I to jest taki żyjący komponent.

3:26Żaden z tych żyjących komponentów nie może

3:29być podejrzany ani tutaj w preview, ani na designer, ponieważ korzystają one z

3:34kawałka JavaScriptu, który jest zaczytany do projektu.

3:37Ten kawałek JavaScriptu można znaleźć w Project Settings.

3:40Przechodzi przechodząc do ustawień w sekcji Custom Code.

3:45To tutaj spinamy wszystkie komponenty w

3:48sekcji footer, czyli na samym dole strony są podpięte live komponenty.

3:53Na razie jest to kilka komponentów, ale mamy już przygotowane więcej i w każdej

3:57kolejnej wersji System Flow będziemy je dodawać, ponieważ na razie jest ich bardzo

4:01mało i w zasadzie są to super lekkie skrypty.

4:04Tak naprawdę są dostępne od razu przy ładowaniu strony.

4:08Zwróć proszę uwagę na to, że one ładują

4:09się na samym końcu w momencie gdy cała Twoja strona jest już w renderowania.

4:13Dopiero do wczytujemy komponenty mają dosłownie po kilka kilobajtów te skrypty,

4:17więc na razie nie przejmowaliśmy się tym, żeby je np.

4:21ukrywać.

4:22Mógłbyś to oczywiście sam zrobić, jeśli nie korzystasz z tych light komponentów.

4:25Jeżeli chcesz, możesz przestawić te dwie linie komentarza Na sam koniec tych

4:30komponentów nic się nie stanie, a one wtedy nie będą w ogóle wczytywane.

4:34Więc można tak zrobić.

4:35Natomiast my to zostawiliśmy.

4:37Wczytują się teraz, ponieważ wtedy jest po prostu mniej klikania z tym, żeby te live

4:41komponenty działały, umieszczając je bezpośrednio w projekcie.

4:45Wystarczy, że znajdziemy taki komponent i

4:47w zasadzie działa praktycznie od ręki po prostej konfiguracji.

4:51W kolejnych lekcjach pokażę Ci jak właśnie skonfigurować poszczególne komponenty.

4:55I proszę, zwróć też uwagę na to, że te lewe komponenty mają skrypty.

5:00Odpowiednio hostowane na GitHubie, a w przyszłości na CDN ach.

5:04W związku z tym są to skrypty ładowane z zewnątrz.

5:07I to też jest ważne, ponieważ w momencie

5:09gdy wykonujemy jakąś poprawkę do takiego skryptu, to wtedy jest on automatycznie.

5:15Nie musisz pobierać nowej wersji, tylko jest to automatycznie aktualizowane i

5:19korzystasz z niego cały czas w tej najnowszej wersji, którą utrzymujemy.

5:23Jeśli chodzi o pozostałe skrypty, które

5:25się tutaj wczytują jest to dynamiczny rok w stopce.

5:27To też ciekawostka.

5:29W footer, który możesz znaleźć tutaj w

5:32sekcji Template mamy wtedy znajduje się taka sekcja kopii site i

5:37tutaj ten rok automatycznie jest zaczytany, więc nie musisz tego zmieniać.

5:41Automatycznie będzie się wczytywać w każdym.

5:43Właśnie dzięki temu, że mamy tutaj taki dynamicznie wczytywane małe lipiec.

5:48Jeśli chodzi o pozostałe

5:50kawałek kodu jest on w zasadzie do obsługi dokumentacji, więc nie będę go tłumaczył.

5:54Nie jest to aż tak istotne.

5:56Podmieniam po prostu po kliknięciu ten

5:58komponent, który pozwala kopiować i wklejać nazwę komponentu do schowka.

6:04I to tyle.

6:04Nie mamy poza tym żadnego dodatkowego kodu, który obciążał by web Flow.

6:08Wracając jeszcze na chwilę do

6:09dokumentacji, to mogę Ci powiedzieć, że nie tylko w tej sekcji z Live Components

6:14znajdują się instrukcje, a także komponenty, które można skopiować.

6:17Ale dbamy także o to, aby znalazły one

6:20swoje odzwierciedlenie w konkretnych komponentach, które projektujemy.

6:23Przykładowo tutaj w Data Display, jeśli

6:25wejdziesz w kartę mamy wiele różnych przykładów kart, z których możesz

6:29skorzystać, a niektóre z nich zawierają właśnie np.

6:33link, komponent Count down.

6:34Czy można skopiować sobie tę kartę i już w

6:36niej od razu jest zawarty ten cooldown, który będzie działał?

6:40Więc jeśli widzimy jakieś ciekawe zastosowania IF komponentów w istniejących

6:45komponentach, dodajemy tam jego alternatywną wersję,

6:48jak również w tej sekcji Live Components staramy się linkować i informować o tym,

6:54gdzie jest konkretny live komponent użyty, żebyś mógł sprawdzić po prostu te

6:59template i zobaczyć jak wykorzystaliśmy ten ich komponent w akcji.

7:03Tutaj mamy w kartach użyte i jeszcze w alert jeśli klikniesz sobie na alert to

7:08tutaj w arcie jest wykorzystany ten Kanban.

7:11W takim kanban banerze można sobie go np.

7:15skopiować i jeśli wstawimy go do naszej strony, to będziemy mogli łatwo

7:19wygenerować taki pasek na górze strony, które właśnie odlicza czas np.

7:24do zakończenia promocji.

7:26Wstawienie tego jest tak proste jak użycie

7:28właśnie tego Kanban bannera i tutaj już Kanban będzie działał.

7:31Oczywiście po skonfigurowaniu czasu.

7:33To jak działają poszczególne komponenty

7:35pokażę Ci już w kolejnych lekcjach, także do usłyszenia.