![\"\"/](\"https://lh6.googleusercontent.com/etoAEgoxnkUXu_H-8j9R9t33e3rIcsiC61DexpyXRxaQrBuGfi1Yo_nPbHk4hba_ThmDv_7rD5Zhnbw4xW6a-94HBjesi9wVaIjzfg04b4m-7q9hdrdPhkZRp91AlhTSSE9yaxL0\")
Co cenią Twoi klienci? Bezpieczeństwo i wygodę zakupów. Czas im to zapewnić.
\n\n\n\nNiewielu konsumentów ma tego świadomość, ale podstawowe zabezpieczenia, które domyślnie występują w wordpressie (czyli klucze wordpressowe), nie są wystarczające. Komunikacja restowa frontendu z API wordpressa (czyli zwykła komunikacja, polegająca na wysyłaniu żądania wraz z odpowiednimi zapytaniami) jest podatna na wycieki danych. Znając ID płatności bądź zamówienia, można próbować przechwycić dane wrażliwe. Może to doprowadzić do sytuacji, gdzie na światło dzienne wychodzą dane klientów. Dlatego zrezygnowaliśmy z wordpressowych kluczy i stworzyliśmy własne rozwiązanie.
\n\n\n\nWpis porusza tematykę mocno programistyczną. Jeśli nie czujesz się w tych tematach zbyt pewnie i nie czujesz potrzeby, aby się w nie zagłębiać, oto uproszczona wersja tego, o czym mówimy w artykule:
\n\n\n\nI przechodzimy do tematów nieco bardziej złożonych. Szybki słowniczek, dla osób nietechnicznych:
\n\n\n\nAPI – interfejs programistyczny, miejsce, z którego jedynie pobieramy dane
\n\n\n\nFront – część aplikacji odpowiadająca za interakcję z użytkownikiem, część „widzialna” aplikacji
\n\n\n\nRest – styl architektury oprogramowania, standard określający zasady projektowania API
\n\n\n\nKomunikacja restowa – w dużym skrócie, jest to komunikacja z API określonymi zapytaniami, np. chcąc uzyskać jakąś informację stosujemy metodę typu GET, chcąc dodać coś nowego stosujemy metodę POST itd. Chodzi o to żeby każda operacja była przypisana do jednego typu – żeby w jednym typie zapytań nie mieć dodania, usunięcia + modyfikacji. Każda metoda ma swoje ograniczenia i możliwości. Np. udostępniamy zasób w postaci listy książek jakie mamy w bibliotece, i określamy dostęp do tego zasobu tylko i wyłącznie jako metoda GET – i wtedy nie ma fizycznej możliwości, żeby ktoś nam coś usunął. Owszem, możemy udostępnić też metodę DELETE – ale wtedy musimy zautoryzować kogoś, na przykład za pomocą kluczy
\n\n\n\nReact – biblioteka języka programowania JavaScript, jest wykorzystywana do tworzenia interfejsów graficznych aplikacji internetowych
\n\n\n\nDzięki temu, że zmodyfikowana wtyczka pozwala nam poprzez komunikację REST API używać jej z innego frontu (Reacta), na którym pracujemy, wszystkie dane – czyli klucze i tokeny, które przechodzą przez API, są odpowiednio zabezpieczone przed wyciekiem. Przechwytujemy je na naszym froncie i tam budujemy na jej podstawie płatność.
\n\n\n\nKlucze i tokeny? To ciągi znaków np. zaszyfrowany ciąg x znaków, który wysyłając w żądaniu możemy uzyskać autoryzację i dostęp do zasobów.
\n\n\n\nKlucze z reguły są stałe, a tokeny są ważne przez określony czas – po czym wygasają i aby zdobyć ponownie dostęp do zasobów musimy go odnowić – czyli wykonać całą operację autoryzacji od nowa. Tokeny są dobrym rozwiązaniem przy takiej autoryzacji. Tokeny są często generowane dynamicznie – chociażby przy logowaniu do banku. Jeśli przez X sekund nie wpiszesz pinu to sesja wygasa. Analogicznie jest z tokenami. Gdy wygasną, trzeba wygenerować nowe.
\n\n\n\nNawet jeśli ktoś przechwyci token – nic z nim nie zrobi, bo
\n\n\n\nW przypadku wordpressowych kluczy nie ma takich domyślnych zabezpieczeń.
\n\n\n\nJak wspomnieliśmy wyżej – dzięki nim udało nam się podwyższyć poziom bezpieczeństwa płatności. To ważny dla nas aspekt plug-inu, ale nie jedyny.
\n\n\n\nNasza modyfikacja dodatku Payu umożliwia opłacanie zakupów. Zazwyczaj ta wtyczka jest używana po stronie frontu wordpressa, gdy strona jest budowana na edytorach i szablonach. W przypadku Localhosta, wordpress jest tylko naszym API (czyli miejscem, z którego pobieramy dane, nie używamy jego frontu). Potrzebowaliśmy więc plug-inu, który pozwoli nam na działanie na zasadach komunikacji REST API z naszego frontu – czyli aplikacji w GatsbyJS.
\n\n\n\nStosujemy modyfikację tej wtyczki w taki sposób, aby można było się z nią komunikować z frontu poprzez REST API. Zamiast możliwości robienia tego tylko z frontu WordPressa w Woocommerce. Woocommerce to tylko backend – a wszystkie tokeny i klucze idą poprzez REST i są zabezpieczone.
\n\n\n\nKolejnym usprawnieniem jest możliwość sprawdzenia, czy płatność będzie odbywać się prawidłowo, czy nie będzie wycieku danych i czy płatność przejdzie z punktu A do punktu B. Można przetestować to na danych sandboxowych. Co to znaczy? Przykładowo, w środowisku developerskim możemy zmienić klucze z produkcyjnych na klucze testowe i tym sposobem uzyskujemy symulację płatności.
\n\n\n\nPodsumowując – modyfikacje wtyczki payu poprawiają bezpieczeństwo danych klientów, umożliwiają także korzystanie z payu na stronach nie będących całkowicie opartych na wordpressie. Wartym uwagi usprawnieniem jest również możliwość przeprowadzenia symulacji płatności.
\n","featuredImage":{"node":{"altText":"","srcSet":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/payu-300x180.png 300w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/payu-1024x614.png 1024w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/payu-768x461.png 768w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/payu.png 1500w","sourceUrl":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/payu.png","sizes":"(max-width: 300px) 100vw, 300px","mediaDetails":{"height":900,"width":1500}}},"language":{"code":"PL"},"categories":{"nodes":[{"slug":"bez-kategorii","id":"dGVybTox","name":"Brak kategorii"}]},"tags":{"nodes":[{"slug":"platnosc","name":"płatność","count":1},{"slug":"wtyczka","name":"wtyczka","count":6}]},"comments":{"nodes":[]},"seo":{"title":"MODYFIKACJE WTYCZKI PAYU - Poznaj nasze wtyczki! - Software house","opengraphTitle":"MODYFIKACJE WTYCZKI PAYU - Poznaj nasze wtyczki! - Software house","metaKeywords":"","metaDesc":"Nasza modyfikacja wtyczki Payu umożliwia opłacanie zakupów. Zazwyczaj ta wtyczka jest używana po stronie frontu wordpressa, gdy strona jest budowana na edytorach i szablonach.","metaRobotsNofollow":"follow","metaRobotsNoindex":"noindex","opengraphDescription":"Nasza modyfikacja wtyczki Payu umożliwia opłacanie zakupów. Zazwyczaj ta wtyczka jest używana po stronie frontu wordpressa, gdy strona jest budowana na edytorach i szablonach.","opengraphImage":{"sourceUrl":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/payu.png"}},"siteMetaData":{"description":"Localhost Group Software House","language":"pl_PL","title":"Software house","url":"https://sh.api.localhost-group.com"}},{"id":"cG9zdDozNA==","slug":"automat-do-zapraszania","title":"AUTOMAT DO ZAPRASZANIA – Poznaj nasze wtyczki!","date":"2021-06-24T14:33:46","databaseId":34,"content":"\nAutomat do zapraszania to kolejna wtyczka naszego autorstwa. Ostatnio mogliście przeczytać o Extractorze i zobaczyć w jaki sposób usprawniamy eksport danych. Dzisiaj – kilka słów o automatyzacji.
\n\n\n\n
Jak w przypadku poprzedniej wtyczki – celem była optymalizacja. Nie chcieliśmy tracić zasobu w postaci cennego czasu naszego teamu. Dlatego postanowiliśmy zadbać o stuprocentową automatyzację procesu zapraszania.
Jest to bardziej skomplikowane niż standardowa sprzedaż produktów internetowych, ponieważ musi być do nich nadany również dostęp per użytkownik – klient wykupuje dostęp do zdalnego repozytorium na Githubie. Zanim stworzyliśmy wtyczkę, przy każdym zakupie trzeba było dawać danemu userowi dostęp ręcznie, aby mógł “oglądać”, a nie edytować repozytorium.
\n\n\n\nWtyczka tworzy w bazie danych tabelę, która zawiera produkty z określonej kategorii. Udostępnia ona interfejs pozwalający przypisać każdemu produktowi w tabeli nazwę repozytorium, do którego będziemy kogoś zapraszać.
\n\n\n\nPodczas zakupu, po sfinalizowaniu płatności, kupujący w formularzu kontaktowym podaje swój nick. Jeżeli wtyczka ma nazwę “repozytorium” w bazie danych, to wykonywane jest zapytanie do githubapi, które dodaje użytkownika do repozytorium.
\n\n\n\nPrzy zakupie kilku produktów, każdy z nich jest mapowany i sprawdzany osobno. W takiej sytuacji, użytkownik dostaje kilka zaproszeń – każde do innego repozytorium. Wtyczka funkcjonuje niezależnie od innych i działa na własnych bazach danych – więc każde modyfikacje w jej obrębie są bezpieczne dla reszty.
\n\n\n\nAutomatyzacja znacznie ułatwia działanie stron i sklepów internetowych, dlatego warto stosować ją jak najczęściej. Automat do zapraszania to jedna z wielu wygodnych wtyczek, z których korzystamy.
\n\n\n\nPodsumowując – w momencie udanego zakupu, na przykład roadmap, kupujący w formularzu kontaktowym podaje swój nick. Zostaje wtedy automatycznie zaproszony do repozytorium na github, do którego wykupił dostęp.
\n\n\n\nAutomatyzuje to proces sprzedaży, ponieważ nikt nie musi tracić czasu na ręczne dodawanie kolejnych osób do repozytorium. Takie działanie zapewnia kupującym natychmiastowy dostęp do materiałów (po zakończeniu płatności).
\n","featuredImage":{"node":{"altText":"","srcSet":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/github-300x150.png 300w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/github-768x384.png 768w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/github.png 807w","sourceUrl":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/github.png","sizes":"(max-width: 300px) 100vw, 300px","mediaDetails":{"height":403,"width":807}}},"language":{"code":"PL"},"categories":{"nodes":[{"slug":"bez-kategorii","id":"dGVybTox","name":"Brak kategorii"}]},"tags":{"nodes":[{"slug":"automatyzacja","name":"automatyzacja","count":3},{"slug":"wtyczka","name":"wtyczka","count":6}]},"comments":{"nodes":[]},"seo":{"title":"AUTOMAT DO ZAPRASZANIA - Poznaj nasze wtyczki! - Software house","opengraphTitle":"AUTOMAT DO ZAPRASZANIA - Poznaj nasze wtyczki! - Software house","metaKeywords":"","metaDesc":"Automatyzacja znacznie ułatwia działanie stron i sklepów internetowych, dlatego warto stosować ją jak najczęściej. Jedną z niewielkich, przydatnych wtyczek, z której korzystamy, jest automat do zapraszania.","metaRobotsNofollow":"follow","metaRobotsNoindex":"noindex","opengraphDescription":"Automatyzacja znacznie ułatwia działanie stron i sklepów internetowych, dlatego warto stosować ją jak najczęściej. Jedną z niewielkich, przydatnych wtyczek, z której korzystamy, jest automat do zapraszania.","opengraphImage":{"sourceUrl":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/github.png"}},"siteMetaData":{"description":"Localhost Group Software House","language":"pl_PL","title":"Software house","url":"https://sh.api.localhost-group.com"}},{"id":"cG9zdDozMg==","slug":"reviews-z-google","title":"GOOGLE REVIEWS DO GRAPHQL – Poznaj nasze wtyczki!","date":"2021-06-24T14:32:28","databaseId":32,"content":"\nKolejny tydzień – kolejna wtyczka. Co tym razem chcieliśmy osiągnąć? Możliwość pobierania recenzji google o danym miejscu i wstawianie ich jako danych w GraphQL.
\n\n\n\nZacznijmy od początku.
\n\n\n\nW dużym skrócie – to język zapytań, który posiada tylko jeden endpoint (czyli adres, o który pytamy). Konstruując odpowiednie zapytania możemy uzyskać tylko te dane, które nas interesują. Standardowy graphql dostarcza tylko to, co w sobie zawiera, więc takie elementy jak recenzje google musimy dodać sami.
\n\n\n\nMogą nasunąć się takie pytania. Przecież można to zrobić restowo i nie przejmować się resztą. Działamy jednak w taki, a nie inny sposób, aby ograniczyć niepotrzebne zapytania i sprowadzić ilość kodu do minimum. W graphql wszystko znajduje się w jednym miejscu. Wystarczy zainstalować wtyczkę, podmienić w jej pliku konfiguracyjnym ID “namierzanego” miejsca – i problem z głowy.
\n\n\n\nStworzyliśmy wtyczkę, która zaciąga recenzje google danego miejsca (zapytanie korzysta z ID miejsca w google) za pomocą REST API, udostępnionego przez google. Następnie buduje się odpowiednia nowa struktura danych w graphql. Dane wyłapane za pomocą REST API są odpowiednio przygotowywane do formatu jaki nas interesuje i zwracane w odpowiednim miejscu w graphql – tam, gdzie to sobie dostosujemy. Po stronie frontendu robimy query i tym sposobem mamy gotowe wszystkie dane do wykorzystania.
\n\n\n\nW jaki sposób to rozwiązanie jest pomocne?
\n\n\n\nOpinie w google to ważny element, który umożliwia lepsze dotarcie do klienta, poprzez przedstawienie mu najwyższej wiarygodności opinii. Warto umieszczać je na stronie internetowej, aby zapewnić do nich maksymalnie prosty dostęp.
\n\n\n\nZ taką modyfikacją jest to niezwykle łatwe – wystarczy, że ściągniemy ‘reviews’ za pomocą REST Api do wtyczki na WordPress, tam przetworzymy ją w odpowiedni format i wystawimy recenzje jako customowe query do graphQL.
\n\n\n\nDzięki temu są widoczne bezpośrednio na naszej stronie i nie trzeba szukać ich w google, aby dowiedzieć się więcej na temat opinii klientów o firmie.
\n","featuredImage":{"node":{"altText":"","srcSet":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/google-reviews-300x145.png 300w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/google-reviews-1024x493.png 1024w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/google-reviews-768x370.png 768w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/google-reviews.png 1121w","sourceUrl":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/google-reviews.png","sizes":"(max-width: 300px) 100vw, 300px","mediaDetails":{"height":540,"width":1121}}},"language":{"code":"PL"},"categories":{"nodes":[{"slug":"bez-kategorii","id":"dGVybTox","name":"Brak kategorii"}]},"tags":{"nodes":[{"slug":"google","name":"google","count":1},{"slug":"wtyczka","name":"wtyczka","count":6}]},"comments":{"nodes":[]},"seo":{"title":"GOOGLE REVIEWS DO GRAPHQL - Poznaj nasze wtyczki! - Software house","opengraphTitle":"GOOGLE REVIEWS DO GRAPHQL - Poznaj nasze wtyczki! - Software house","metaKeywords":"","metaDesc":"Opinie w google to ważny element, który umożliwia lepsze dotarcie do klienta, poprzez przedstawienie mu najwyższej wiarygodności opinii. Warto umieszczać je na stronie internetowej, aby zapewnić do nich prostszy i szybszy dostęp.","metaRobotsNofollow":"follow","metaRobotsNoindex":"noindex","opengraphDescription":"Opinie w google to ważny element, który umożliwia lepsze dotarcie do klienta, poprzez przedstawienie mu najwyższej wiarygodności opinii. Warto umieszczać je na stronie internetowej, aby zapewnić do nich prostszy i szybszy dostęp.","opengraphImage":{"sourceUrl":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/google-reviews.png"}},"siteMetaData":{"description":"Localhost Group Software House","language":"pl_PL","title":"Software house","url":"https://sh.api.localhost-group.com"}},{"id":"cG9zdDozMA==","slug":"modyfikacje-graphql","title":"Modyfikacje graphql","date":"2021-06-24T14:31:33","databaseId":30,"content":"\nModyfikacje graphql to dopasowane query/zapytanie.
\n\n\n\nTo, co jest nam potrzebne, dodajemy sobie do zapytania query w formie pojedynczych wtyczek, a następnie używamy, gdy zajdzie taka konieczność. Zmienia nam to komunikację REST’ową na GraphQL.
\n\n\n\nRóżnica tutaj polega na tym, że komunikacja REST wymaga, aby podczas działania aplikacji uderzać w konkretne punkty i pobierać dane. Jest to bardziej dynamiczne, jednak może spowolnić działanie aplikacji lub spowodować błędy.
\n\n\n\nNatomiast GraphQL na sam start budowania aplikacji pobiera nam wszystkie dane. Następnie możemy nimi w łatwy sposób operować.
\n","featuredImage":{"node":{"altText":"","srcSet":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/2048px-GraphQL_Logo.svg_-1-300x300.png 300w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/2048px-GraphQL_Logo.svg_-1-1024x1024.png 1024w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/2048px-GraphQL_Logo.svg_-1-150x150.png 150w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/2048px-GraphQL_Logo.svg_-1-768x768.png 768w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/2048px-GraphQL_Logo.svg_-1-1536x1536.png 1536w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/2048px-GraphQL_Logo.svg_-1.png 2048w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/2048px-GraphQL_Logo.svg_-1-1568x1568.png 1568w","sourceUrl":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/2048px-GraphQL_Logo.svg_-1.png","sizes":"(max-width: 300px) 100vw, 300px","mediaDetails":{"height":2048,"width":2048}}},"language":{"code":"PL"},"categories":{"nodes":[{"slug":"bez-kategorii","id":"dGVybTox","name":"Brak kategorii"}]},"tags":{"nodes":[{"slug":"wordpress","name":"wordpress","count":3},{"slug":"wtyczka","name":"wtyczka","count":6}]},"comments":{"nodes":[]},"seo":{"title":"Modyfikacje graphql - Software house","opengraphTitle":"Modyfikacje graphql - Software house","metaKeywords":"","metaDesc":"To, co jest nam potrzebne, dodajemy sobie do zapytania query w formie pojedynczych wtyczek, a następnie używamy, gdy zajdzie taka konieczność. Zmienia nam to komunikację REST’ową na GraphQL.","metaRobotsNofollow":"follow","metaRobotsNoindex":"noindex","opengraphDescription":"To, co jest nam potrzebne, dodajemy sobie do zapytania query w formie pojedynczych wtyczek, a następnie używamy, gdy zajdzie taka konieczność. Zmienia nam to komunikację REST’ową na GraphQL.","opengraphImage":{"sourceUrl":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/2048px-GraphQL_Logo.svg_-1.png"}},"siteMetaData":{"description":"Localhost Group Software House","language":"pl_PL","title":"Software house","url":"https://sh.api.localhost-group.com"}},{"id":"cG9zdDoyOA==","slug":"extractor","title":"EXTRACTOR – Poznaj nasze wtyczki!","date":"2021-06-24T14:27:15","databaseId":28,"content":"\nExtractor jest wordpressową wtyczką naszego autorstwa. Dlaczego musieliśmy stworzyć własną wtyczkę?
\n\n\n\nPotrzebowaliśmy rozwiązania, które umożliwiłoby nam wyeksportowanie interesujących nas danych o zamówieniach woocommerce do pliku CSV. Jest kilka tego typu wtyczek na rynku. Niestety są wyjątkowo słabe i niewygodne do użytku, powodują też niezrozumiałe błędy. Dlatego zdecydowaliśmy się napisać własną.
\n\n\n\nDość intuicyjnie. Wybieramy zakres dat OD – DO, z którego chcemy uzyskać dane. Następnie, zaznaczając odpowiednie checkboxy, wybieramy, które konkretnie informacje mają zostać pobrane i wyciągnięte. Dane są pobierane z wordpressa za pomocą odpowiednich funkcji i przygotowywane do obróbki. Za pomocą jednego kliknięcia tworzymy plik który jest gotowy do pobrania.
\n\n\n\nWe wtyczce mamy kategorie w stylu “Dane klienta”, ”Dane produktów” i domyślnie wszystko jest zaznaczone. Po wybraniu przycisku “Wygeneruj raport” pobiera się nam plik .csv, który w łatwy sposób wrzucamy do excela i wszystkie informacje mamy umieszczone w uporządkowanych tabelach.
\n\n\n\nCiekawym elementem jest również zakładka “Codzienny raport”. Jak sama nazwa wskazuje, umożliwia ona otrzymywanie regularnych raportów. Wystarczy, że podamy adres email oraz interesujący nas okres czasu (na przykład jeden dzień, 7 dni, czy też 14). I w takich odstępach czasowych będziemy otrzymywać maile z automatycznie generowanym raportem.
\n\n\n\n![\"\"](\"https://lh6.googleusercontent.com/nmaiGcxU8ljId0KsbImmheAMz3s1M_wDf5CvPR0kCcisjPrWYuZWzQVBp-tJWMEbxMzd9LaIYBXcVCHuzH1xrKsgk7FJ1-DQUF4J8HO_CldYVhaZqKRj5uZ85g3K2vpTNtxEud1F\")
WP_Excel_Order_Info – działa podobnie jak extractor, jednak w jej przypadku dane generowane są do arkusza google online. Każde zamówienie, które jest zrealizowane, pojawia się w arkuszu głównym (arkuszu roboczym). Istnieje także możliwość wygenerowania raportu “od do”, który zapisze się w nowym arkuszu roboczym o nazwie “od do”.
\n\n\n\nTo wygodna opcja w przypadku biznesu online – zamówienia umieszczane są w arkuszu automatycznie. Taka historia zamówień działa sobie w tle – gdy ktoś coś opłaci – informacja o tym zostaje odnotowana w arkuszu roboczym “zamówienia”. W razie potrzeby mamy łatwy dostęp do tych danych.
\n\n\n\nUmożliwia wyciągnięcie interesujących Cię danych ze sklepu z konkretnego okresu oraz automatyzację odnotowywania historii zamówień. Wygodna jest również funkcja szybkiego generowania raportów, jeżeli potrzebujesz przeanalizować dany okres.
\n","featuredImage":{"node":{"altText":"","srcSet":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/7069811-300x204.png 300w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/7069811.png 392w","sourceUrl":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/7069811.png","sizes":"(max-width: 300px) 100vw, 300px","mediaDetails":{"height":266,"width":392}}},"language":{"code":"PL"},"categories":{"nodes":[{"slug":"bez-kategorii","id":"dGVybTox","name":"Brak kategorii"}]},"tags":{"nodes":[{"slug":"automatyzacja","name":"automatyzacja","count":3},{"slug":"wordpress","name":"wordpress","count":3},{"slug":"wtyczka","name":"wtyczka","count":6}]},"comments":{"nodes":[]},"seo":{"title":"EXTRACTOR - Poznaj nasze wtyczki! - Software house","opengraphTitle":"EXTRACTOR - Poznaj nasze wtyczki! - Software house","metaKeywords":"","metaDesc":"Ta wtyczka umożliwia wyciągnięcie interesujących nas danych ze sklepu z konkretnego okresu.","metaRobotsNofollow":"follow","metaRobotsNoindex":"noindex","opengraphDescription":"Ta wtyczka umożliwia wyciągnięcie interesujących nas danych ze sklepu z konkretnego okresu.","opengraphImage":{"sourceUrl":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/7069811.png"}},"siteMetaData":{"description":"Localhost Group Software House","language":"pl_PL","title":"Software house","url":"https://sh.api.localhost-group.com"}},{"id":"cG9zdDoyNg==","slug":"rebuilder","title":"REBUILDER – Poznaj nasze wtyczki!","date":"2021-06-24T13:26:09","databaseId":26,"content":"\nPoddajesz treść Twojej witryny edycji. Standardowy zabieg, wiele informacji trzeba co jakiś czas aktualizować. Brzmi jak prosta sprawa do ogarnięcia. Nie jest to skomplikowany zabieg. Musisz mieć jednak świadomość, że każda tego typu ingerencja wymaga przebudowania strony.
\n\n\n\nBywa to problematyczne. Podczas dodawania nowego contentu w wordpressie, GatsbyJS (którego używamy), nie wykryje żadnych zmian sam z siebie. Nowy content to wszelkie posty, produkty, zdjęcia, kategorie i front-end strony.
\n\n\n\nZ racji tego, że wordpress to nasze API – czyli miejsce z którego pobieramy dane, a GatsbyJS to technologia, która serwuje strony statycznie, tak naprawdę jedyny sposób na dostarczenie nowych rzeczy z WP to przebudowanie/przeładowanie.
\n\n\n\nOwszem, możemy również wrzucić ręcznie zbudowany projekt na serwer przez FTP (protokół transferu plików). Ale zazwyczaj jest to problematyczne, uciążliwe i całkowicie pozbawione sensu – szczególnie przy dużej ilości projektów. Jak zwykle w takiej sytuacji – postanowiliśmy stworzyć własne rozwiązanie, które oszczędzi wszystkim zbędnej manualnej roboty. Tak powstał Rebuilder.
\n\n\n\nKiedy przydaje się rebuilder?
\n\n\n\nDokonywanie drobnych zmian na stronie internetowej jest częstym zabiegiem. Jest to więc szczególnie użyteczna wtyczka, która przyda się w praktycznie każdej witrynie.
\n\n\n\nSytuacje, w których ją wykorzystujemy, to najczęściej:
\n\n\n\nKażda taka zmiana wiążę się z koniecznością przebudowania strony, a rebuilder umożliwia maksymalne usprawnienie tego procesu.
\n\n\n\nRebuilder umożliwia również powiadomienie konkretnych osób o przebudowie strony. Wystarczy w odpowiednim okienku wpisać ich adresy email. Otrzymają wtedy powiadomienie na temat przebudowy strony.
\n\n\n\nIstnieje także opcja przebudowy strony dla programistów. Wykorzystuje się ją tylko wtedy, gdy zostaną wykonane zmiany w kodzie i wrzucone na githuba.
\n\n\n\nRebuilder to wtyczka, która właśnie za pomocą jednego kliknięcia z poziomu wordpressa umożliwia odtworzenie całej operacji “ręcznego wrzucania” zbudowanej paczki (wersji projektu) na serwer.
\n\n\n\nWordPress jest tylko źródłem treści (CMS), które udostępnia swoje dane przez graphql (więcej o nim przeczytacie tu) – a my musimy w jakiś sposób zaktualizować te treści. Najlepiej zrobić to, tak jak już mówiliśmy, poprzez ponowne zbudowanie projektu. Żeby jednak nie robić tego wszystkiego ręcznie, stworzyliśmy rebuildera.
\n\n\n\nRęcznie trzeba by:
\n\n\n\nZ konsoli poleceniem gatsby clean & gatsby build zbudować nowy projekt, wejść ręcznie przez jakiś program do zarządzania FTP na serwer i tam szukać odpowiedniego miejsca czyli domeny i ręcznie kopiować za każdym razem pliki – lepiej mieć to w automacie, prawda? 😉
\n\n\n\nProces w uproszczeniu prezentuje się tak:
\n\n\n\nWarto dodać, że githubactions są tak napisane, aby w przypadku jakiejś nieścisłości w kodzie, lub wordpressie przerwać flow – żeby nie wyrządzić żadnych szkód. O błędach oraz sukcesie przebudowania informowane są odpowiednie osoby, ale o tym więcej przeczytacie dalej.
\n\n\n\nKonfiguracja pluginu odbywa się jedynie na podstawie podmiany kluczy zabezpieczających.
\n\n\n\nPierwszym krokiem jest podzielenie repozytorium na dwie gałęzie:
\n\n\n\nPrzy każdej zmianie, paczka build budowana jest na nowo, więc content z wordpressa jest aktualizowany. Samą aktualizację bez zmian w kodzie wywołujemy tak samo – github actions odpala odpowiedni flow który zaciąga dane z wordpressa i buduje paczkę, w efekcie czego podczas kliknięcia mamy na branchu build w githubie wersję gotową do wrzucenia na serwer. To samo kliknięcie wywołuje umieszczenie zawartości brancha “build” na serwerze.
\n\n\n\nPodsumowując, rebuilder to często wykorzystywana, wordpressowa wtyczka. Służy do łatwego i bezproblemowego przebudowania strony, kiedy poddamy edycji jej treść. Dzięki rebuilderowi, możemy zrobić to za pomocą jednego kliknięcia.
\n","featuredImage":{"node":{"altText":"","srcSet":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/1build-2-300x300.png 300w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/1build-2-150x150.png 150w, https://sh.api.localhost-group.com/wp-content/uploads/2021/06/1build-2.png 400w","sourceUrl":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/1build-2.png","sizes":"(max-width: 300px) 100vw, 300px","mediaDetails":{"height":400,"width":400}}},"language":{"code":"PL"},"categories":{"nodes":[{"slug":"bez-kategorii","id":"dGVybTox","name":"Brak kategorii"}]},"tags":{"nodes":[{"slug":"automatyzacja","name":"automatyzacja","count":3},{"slug":"wordpress","name":"wordpress","count":3},{"slug":"wtyczka","name":"wtyczka","count":6}]},"comments":{"nodes":[]},"seo":{"title":"REBUILDER - Poznaj nasze wtyczki! - Software house","opengraphTitle":"REBUILDER - Poznaj nasze wtyczki! - Software house","metaKeywords":"","metaDesc":"Rebuilder to wordpressowa wtyczka. Służy do łatwego i bezproblemowego przebudowania strony, kiedy poddamy edycji jej treść. Dzięki rebuilderowi, możemy zrobić to za pomocą jednego kliknięcia.","metaRobotsNofollow":"follow","metaRobotsNoindex":"noindex","opengraphDescription":"Rebuilder to wordpressowa wtyczka. Służy do łatwego i bezproblemowego przebudowania strony, kiedy poddamy edycji jej treść. Dzięki rebuilderowi, możemy zrobić to za pomocą jednego kliknięcia.","opengraphImage":{"sourceUrl":"https://sh.api.localhost-group.com/wp-content/uploads/2021/06/1build-2.png"}},"siteMetaData":{"description":"Localhost Group Software House","language":"pl_PL","title":"Software house","url":"https://sh.api.localhost-group.com"}}]}}, "staticQueryHashes": []}