 Dzięki. Ten WordPress działa w moim przeglądarce. Tam nie ma serwera, na którym chodzi PHP, nie ma serwera, na którym chodzi bazy danych, nie ma serwera wcale. Jest tylko moja przeglądarka i JavaScript. To się nazywa WordPress Playground i opowiem wam przez kolejną 18 minut po co to komu, jak to działa, jak możecie tego użyć. Aha, i będzie dużo linków. Na ostatnim slajdzie będą wszystkie zasoby dostępne, możecie się zareleksować i oglądać. Więc zacznijmy po co to właściwie komu. WordPress jest generalnie trudny i nie mam to na myśli robienia stron na WordPressie, ale rozpoczęcie swojej przygody z nim. To znaczy, jeśli ja jestem osobą, która usłyszała, że jest taki WordPress, można na nim zrobić stronę, on jest fajny, no to wpiszę w Google jak tego WordPressa zainstalować i dowiem się, że potrzebuję całej masy 3-literowych skrótów, PHP, SQL i tak dalej, których nie rozumiem, albo zapłacić komuś, kto to ogarnął za mnie, w tym przypadku firmie hostingowej, no ale akurat nie mam karty kredytowej pod ręką ani 5 godzin, więc może zajmuję się czymś prostszym. Jestem programistą, ja akurat chciałbym wybrać swoją technologię, w której będę, w której wejdę na rynek pracy, przeglądam się WordPressowi, ale też Next.js, może Shopify i inne tematy, no to znajdę kurs WordPressa i każdy kurs zaczyna się od takiego to setupu, który zajmie mi kilka godzin, może kilka dni. Jest to dosyć trudne dla nowej osoby, żeby się w to wdrożyć. Jeśli jeszcze chciałbym coś z Gutenbergiem porobić, to może muszę wiedzieć, co to jest build step. Terminal jest na przykład trudnych tematów, więc może przejdę do czegoś, co ma łatwiejszą dokumentację, gdzie mogę się zacząć uczyć na stronie od razu. Jeśli z kolei jestem częścią zespołu produktowego i kolega programista wysła mi taki oto plurikłe do przetestowania, no to ja nie mam swojego własnego środowiska testowego, staginga się nie robiliśmy, no to trochę utknąłem, nie mam co z tym zrobić. Jeśli znowu, że jestem firmą, która produkuje wtyczkę i chciałbym, żeby tu wtyczkę ktoś użył, więc jestem skazany nieco na udostępnianie filmów, screenshotów, opowiadanie o tym, że ona jest fajna, ale nie mogę jej w prosty sposób pokazać. Kilka wtyczek ma demo jakieś, ale w większość nie ma żadnego demo, bo trudno je zrobić. Musiałbym dać każdemu dostęp do wypy admina, ludzie będą mi te treści zmieniać, więc jest trochę ryzyko, więc musiałbym każdemu dać swojego WordPressa, ale to jest kosztowne. Raczej tego nie zrobię, więc wtyczki generalnie demo dosyć rzadko posiadają. No więc jest trudno go zainstalować, trudno się go nauczyć, trudno później z nim pracować i na końcu trudno się swoją pracą podzielić, żeby ktoś mógł z niej po prostu skorzystać bez instalowania jej w swoim własnym WordPressie. No to co tam jeszcze jest do robienia z tym WordPressem dużo rzeczy, jest bardzo trudne. Są narzędzia, które tu otwiejają. Jest lokal, jest WPN, przepraszam WPN, jest kilka innych tego typu rozwiązania, ale dalej są z nimi problemy, to znaczy ja muszę ściągnąć, zainstalować, czyli w ogóle muszę mieć komputer, na przykład jeśli mam tylko telefon albo tablet, mam dalej problem no i nie pomogą mi z dystrybucją na przykład. No i tutaj pojawia się WordPress Playground, który rozwiązuje te wszystkie problemy jednym kliknięciem. To znaczy jeśli chcę zainstalować WordPressa to może wyglądać to na przykład w ten sposób, że po prostu klikam guzik i ten WordPress się pojawia. A wygląda to tak, to jest oficjalne demo na developer WordPress.org, znowu że będzie link na końcu do tego wszystkiego. Ja po prostu wszedłem na stronę i tam WordPress już jest, w mojej przeglądarce działający. Mało tego, mogę go sobie skastomizować, jest guzik do tego, klikam ten guzik, mogę wybrać inny motyw, mogę wybrać wtyczki, klikam Start Playground i w tym momencie zaczyna się to wszystko instalować, trwa to jakieś 5 sekund albo jedno, jak mamy szybszy internet niż to na konferencji jest WordPress z motywem, który wybrałem. Jeśli jestem programistą, chcę się zacząć uczyć WordPressa, albo jestem nową osobą, która dopiero wchodzi na rynek pracy i jeszcze programistą nie jest, no to z Playground mogę wejść na kurs WordPressa i po prostu zacząć się go tam uczyć. Na przykład to jest wpis na moim blogu, w którym wykorzystałem część Playgrounda, gdzie uczę nowego API pchłowego, który jest w WordPress 6.2, no tabelę do obrawiania HTML'a, fantastyczne sprawa zobaczcie sobie potem. Ma przykład kodu, który jest napisany w PHP. Zmieniam jego kawałek, fragment, zobaczmy sobie jeszcze raz wcześniej jest husky in the snow, zmieniam wpisuję Hello World Camp. Klikam run, jest nowy wynik. To się nie dzieje na serwerze, to się wszystko dzieje u mnie w przeglądarce, mimo że to jest kod napisany w PHP. Jak ja wyłączę internet, to to dalej działa. Jeśli ja mam tylko telefon albo tablet i mam inną pracę i jeszcze nie jestem programistą, a chcę być, mam przerwę no to w przerwie jestem w stanie sobie na telefonie coś wyklikać i już się zacząć uczyć tych rzeczy. A kiedy już będę gotowy, żeby zrobić coś lokalnie w własnym środowisku, visual studio code, to dalej nie muszę instalować tych wszystkich rzeczy, tylko ściągam sobie plugin WordPress Playground. Mieliśmy okazję z niego skorzystać z kilkoma sobami na Contributor Day i mamy taki oto najprostszy plugin na świecie. On ma nazwę, opis, nic więcej. Jest jeden plik PHP. Odpalam launch WordPress Playground i w tym momencie u mnie na komputerze chodzi WordPress. Nie musiałem instalować PHP, bazy danych, nic. Enter i jest. Jest moja wtyczka w tym nawet. Jeśli chce przetestować zmianę od kolegi programisty przyjrzyjmy się znowu naszemu plurrequestowi taki oto screenshot, nim się znajduje. Po prostu w WP Adminie chcemy zobaczyć sekretną wiadomość. Więc tym razem mamy link do strony WordPress Playground i w tym linku w adresie zaszety numer plurrequesta. Klikamy go oto WordPress z naszym plurrequestem. Nie mam żadnej swojej infrastruktury. To się wszystko dzieje w przeglądarce. Przeglądarka śnioga plurrequest, aplikuje go pokazuje mi zmiany. No dobrze. Ale może one nie działają dobrze pod każdą wersją PHP. No to sprawdźmy to. Mamy guzik, wybieramy zamiast PHP 7.4 PHP 8 i okazuje się, że na PHP 8 jest jakiś problem. Sprawdzenie tego zajęło mi cały 8 sekund. Po prostu wybrałem inną wersję PHP. Nie musiałem robić nic poza tym. Jestem firmą. Mam swoją wtyczkę. W tym przypadku Doło Commerce. Zamiast przekonywać się filmem albo screenshotami, że ona dobra, to na stronie głównej daje jej demo. To jest prawdziwy sklep na WooCommerce. Są w nim produkty. Mogę przewinąć. Mogę wybrać produkt, dodać go do koszyka, przejść do checkoutu, zrobić cokolwiek chce. To jest prawdziwy działający WooCommerce w WordPressie. Na stronie głównej. Jak to działa wszystko? Teraz będzie ta część trochę bardziej nerdowa techniczna. Więc działa to w ten sposób, że playground składa się z dwóch składników. Jest PHP, która działa w przeglądarce. Jest WordPress, który działa bez serwera. Jeśli chodzi o PHP, ona działa dzięki takiej nowej technologii, która się nazywa WebAssembly i ona pozwala uruchamiać programy, które klasycznie chodzą na desktopie albo na serwerze, właśnie w przeglądarce w JavaScriptie. Technicznie rzecz biorąc, to język PHP sam w sobie jest napisany w innym języku programowania, które się nazywa C. Programy w C wyglądają na przykład tak. Tu mamy najprostszy program. On wypisuje na ekran Hello World. Jeśli mogę go uruchomić, to potrzebuję go skompilować. Dostanę plik wykonywalny Hello Out i mogę go wykonać wtedy na ekranie i zobaczę Hello World. Jeśli chodzi o WebAssembly, proces jest bardzo podobny, tylko że mam inny kompilator. Do WebAssembly on się nazywa MScripten. Uruchamiam go, dostaję plik wykonywalny, w tym przypadku dwa pliki tak naprawdę i tam, gdzie mam JavaScript mogę je uruchomić. Na przykład w Node.js albo w przeglądarce dostaję pięknie na ekranie Hello World. Więc Interpreter języka PHP sam jest napisany w języku programowania C to znaczy, że możemy go skompilować do WebAssembly. Czyli bierzemy kod żódłowy, kompilujemy, dostajemy pliki wykonywalne i to powoduje, że możemy wykonać kod PHP w czerwaskrybcie. To jest dużo konceptów nałożonych na siebie. Kompilujemy, wykonujemy itd. Płęta jest taka, że dzięki temu PHP działa w czerwaskrybcie. Tak naprawdę wersji PHP jest dosyć dużo, więc bardziej tak, że dla każdej z nich mam osobny zestaw plików i to demo, które pokazywałem wcześniej, w którym zmieniałem wersję PHP to jest najnudniejsza rzecz na świecie, bo po prostu pobieramy w przeglądarce inny plik z PHP, jakby to jest wszystko, co się tam magicznego dzieje. Dalej mamy WordPress bez serwera i WordPress bez serwera klasycznie, żeby móc pracować z WordPressem, to potrzebujemy go pobrać, potrzebujemy ją zainstalować i włączyć go w przeglądarce i po nim nawigować. Więc żeby go pobrać to sprawa jest prosta. Na WordPress.org jest WordPress do pobrania. My możemy go kliknąć. Playground może uruchomić funkcję żołnierzowe, która też pobiera pliki. Tutaj dużo do powiedzenia nie ma, po prostu trzeba go ściągnąć. Ale żeby go zainstalować to już mamy ciekawszy temat, bo normalnie, żeby zainstalować WordPressa, to on nas będzie w kreatorze pytał o dane do bazy danych. WordPress potrzebuje bazy MySQL, z żadną inną nie pracuje. My w przeglądarce bazy MySQL nie mamy, ale mamy bazę, która się nazywa SQLite żeby z niej skorzystać. Działa to tak, że mamy dodatkowo warstwę, która tłumaczy nam między WordPressem a SQLite zapytania i tłumacze wyniki w drogą stronę. Więc WordPress myśli, że gada sobie z tą bazą, której potrzebuje. My wpinamy tam coś innego, wszystko działa pięknie, dzieje się to przy pomocy oficjalnej wtyczki do integracji bazy danych SQLite. Znowu na ostatnim slajdzie będzie link, ale można z niej skorzystać w dowolnym swoim projekcie WordPressowym. No to jak już mamy WordPressa zainstalowanego to jeszcze chcemy go móc uruchomić i klikać sobie tam w linki różne żeby one się ładowały. Więc klasycznie mamy przeglądarkę internetową na końcu mamy gdzieś za internetem serwer. Na tym serwerze jest uruchomione PHP, jest uruchomiony WordPress przeglądarka mówi daj mi stronę główną ona się tam renderuje, wraca do nas i my ją możemy oglądać. No my nie mamy tego serwera, więc co się dzieje? Tak naprawdę bierzemy ten serwer i wkładamy go w przeglądarkę czyli nasza przeglądarka robi i za urządzenie do wyświetlania strony i za sam ten serwer który tą stronę wyświetla. Ruch nie idzie do internetu tylko używamy czegoś co się nazywa service worker i to powoduje że część ruchu możemy przekierować w to miejsce które chcemy. Na przykład możemy powiedzieć hej jeśli jest prośba o stronę główną WordPressa to wyślimy ją z powrotem do tego serwera który chodzi w środku przeglądarki a nie gdzieś tam do internetu. Bierzemy wynik wyświetlamy, widać WordPressa. Więc mamy żeby WordPressa ściągniętego zainstalowanego, możemy po nim klikać wszystko działa tak jak trzeba. No to co teraz z tym dalej? Jak można użyć tego WordPress Playground? Jest kilka sposobów. Najprostszy to jest zupełnie bez kodu. Czyli po prostu trzeba kliknąć na link tam się załaduje WordPress i można już zacząć działać. Można sobie eksperymentować, poinstallować wtyczki zainportować własną stronę porobić ryzykowne zmiany na przykład poprzesuwać jakieś rzeczy na stronie głównej odważyli i po wszystkim ściągnąć cały wynik naszej pracy zachostować go sobie albo wrzucić do zmiany do tej strony z której zaczęliśmy żaden problem. A także testować rzeczy na innych wersjach PHP na przykład 8, 8.2 tam jest dużo zmian które nie działają kompatybilnie wstecz. Dalej mamy takie api które nie wymaga od nas dużo wysiłku. No to się nazywa Query API i działa w ten sposób, że osadzamy playground w iFrame'ie. Czyli podajemy po prostu adres do strony z playgroundem i ona się wczytuje u nas na stronie. Jeśli chcemy coś w niej zmienić, to możemy podać parametr w adresie URL. Na przykład firm równa się pentant i wtedy playground wie, żeby ten motyw pobredź z katalogu motywów WordPressa go zainstalować i jak widać na załączonym podglądzie on tam faktycznie jest. Możemy też poprosić o inne rodzaje zmian na przykład, żeby tam była jakaś wersja PHP konkretna, którą chcemy, albo jakieś wtyczki, albo żeby nas przekierowało na jakąś stronę, jest dokumentacja, w niej jest tych opcji kilka wypisane, zachęcam zobaczcie sobie. I to demo, które wcześniej pokazywałem w którym wybierałem motyw i wybierałem wtyczki ona właśnie działa na tej zasadzie, że kompoduje tak naprawdę właśnie taki adres w którym są wymienione pluginy i motyw i załącza iFrame to jest wszystko. Jakby to jest dosyć proste technicznie demo to dużo kodu w sobie nie ma. Jeśli chodzi o trzeci sposób on jest jeszcze trochę bardziej techniczny mianowicie możemy napisać plik JSON który nie wymaga od nas pisania żadnego kodu ale zadeklarujemy po prostu w takim formacie danych jak tego naszego WordPressa zbudować. Czyli możemy powiedzieć, żeby wykonały kawałek kodu PHP, który chcemy na przykład ten kawałek tutaj tworzyć nowy post w bazie danych, możemy zainstalować motywy, wtyczki nawet z własnego adresu niekoniecznie z katalogu do wyobrażeniem WordPressa. Możemy też tworzyć różne pliki, które tam są plus tego jest taki, że nie trzeba umieć kodować to nie jest narzędzie, który wymaga od nas w ogóle jakiegokolwiek środowiska lokalnego nie musimy instalować żadnych pakietów nic po prostu piszemy sobie taki format danych i na ten moment można go już wkleić po prostu w adresie przeglądarki i to też zadziała i jest bardzo duża kontrola nad tym co ten playground może robić. Na przykład jest takie demo do tłumaczeń, które pobiera jakby kiedyś żeby klasycznie żeby móc zobaczyć, jeśli chcemy tłumaczyć WordPressa, żeby móc zobaczyć w kontekście nasze tłumaczenia, to potrzebujemy mieć tego WordPressa zainstalowanego, zainstalować wtyczkę pobrać wielki tłumaczeń, poklikać kilka rzeczy, natomiast teraz dzięki temu projektowi, który jest na WordPress Translate WordPress org możemy po prostu wejść w linka, to wszystko się dzieje automatycznie bez naszego udziału i my tylko oglądamy o, fajnie, tutaj jest przetłumaczone, tu nie jest to nie jest do końca w tym kontekście, co chciałem a jak chcemy, jak coś zmienimy to możemy kliknąć guzik i wyeksportować to na Translate WordPress org jako prawdziwa propozycja tłumaczenia, a nawet możemy wpiąć szata gpt w to, bo jest integracja i on będzie tłumaczyć za nas. To właśnie zostało zbudowane przy pomocy tych blueprintów tam jest całe osiemdziesiąt linie Jasona, które zestawia właśnie to, także jest to dosyć potem już na api a na końcu, jeśli już bardzo chcemy używać kodu, to mamy api JavaScriptowe które pozwala nam zainstalować pakiet z npm i on ma te wszystkie same funkcje, które wszystkie te trzy poprzednie apie, których mówiłem napiszemy trochę kodu, mamy pełną kontrolę ale próg wejścia w to jest dosyć jest trochę większy, więc powiedzmy, że to jest taka ostateczność jak wszystkie te poprzednie prostsze środki zawiodą więc co z tego właściwie wszystkiego wynika WordPress Playground to jest WordPress w swojej przyglądarce i on działa bez żadnego backendu, behapowego działa na kliknięcie, to jest oficjalny projekt WordPressa, jest darmowy zawsze będzie, można go używać, można do niego kontrybuować i można go używać w swoich aplikacjach do tego przyszłościowo ale na przykład dokumentacja WordPressa będzie gradualnie przechodzić na takie interaktywne przykłady w katalogu pluginów WordPressa mogą się w czasie bezobietnic czasowych ale jest projekt, żeby pojawiły się podglądy motywów w tyczek na żywo, a być może nawet demo samego WordPressa, albo nawet w wersji beta że przyszłość jest ciekawa pod tym kątem i wszystkie linki są pod tym właśnie adresem, jest kot qr można go zeskanować i jeśli wyszukacie WordPress Playground w Google na GitHubie na Twitterze znajdziecie sporo ciekawych informacji w tym dokumentacie jest też kanał na Slacku WordPress org Meta Playground zachęcam dołącznie do nas, projekt jest otwarty do kontrybucji, można do niego dodać funkcję jeśli wami brakuje, ja bardzo chętnie pomogę, porozmawiam i duża prośba prywatnia do mnie, pomóżcie mi z tym dotrzeć do większej ilości ludzi, bo to jest pikielnie pomocny projekt, on zmieni dużo rzeczy jeśli chodzi o tak robimy kursy, uczymy się dokumentację w tyczki dema wszystko macie kogoś komu to zainteresuje, po prostu wyślijcie mu linka, dajcie jakiś namiarniem odezwijcie się, ja bardzo chętnie pogadam jestem na Twitterze, to jest mój mail lubię kontakt lubię feedback, dajcie znać i to jest wszystko co mamy, dzięki wielkie