Strona Międzynarodowego Kongresu Górnictwa i Hutnictwa Miedzi.

Skrót

W treści opisuję proces budowy niektórych rozwiązań na stronę zleconą przez klienta. Projekt realizowałem w pierwszej połowie 2025 roku. Z użytych narzędzi wyróżniłbym na pewno Lovable, Airtable, n8n, mkr.us oraz Windsurf (obecnie Devin) w którym budowałem dedykowany motyw i wtyczki na platformę WordPress.

Wstęp i kontekst

Stowarzyszenie, którego stronę obsługuję zleciło mi stworzenie dedykowanej podstrony w celu obsługi organizowanej co pięć lat konferencji. Strona jak strona, ale kilka wymagań było “podchwytliwych”:

• rejestracja zgłoszeń prelekcji (każde zgłoszenie może mieć wielu autorów, załączniki) + możliwość łatwego przeglądania zgłoszeń przez zespół wybierający prelekcje i układający program,
• rejestracja uczestników (z osobami towarzyszącymi) + wyliczanie kosztu biletu + obsługa płatności za konferencję z różnymi wariantami
• możliwość łatwego zarządzania programem konferencji

Ponieważ czas naglił to z zakresu od razu wypadły (wstępnie przez klienta zapowiadane) płatności online – klient nie chciał “bawić się” w jakieś umowy z operatorami płatności i zdecydował, że wystarczy jak każdy potencjalny uczestnik dostanie na maila instrukcję płatniczą z numerem konta do przelewu.

Projekt strony głównej – Lovable

Jako narzędzie do przygotowania bazowego projektu strony wybrałem Lovable. W tym okresie nie było to najstabilniejsze narzędzie. Czasem generowało coś bardzo ładnego, czasem bardzo słabego.

Tym razem poszło całkiem sprawnie i szybko mogłem pokazać klientowi pierwszy projekt (link będzie działał tak długo, jak będzie dostępny na Lovable).

Nie był może szczególnie wyszukany, nosił też znamiona typowego AI slope’u, ale myślę, że nie wyszedł najgorzej. Klient też nie miał wygórowanych oczekiwań estetycznych, chciał stronę, która spełnia jego potrzeby. Wygląd nie był w top5 jego priorytetów.

Ponieważ terminy nas goniły a kwestia wyglądu była drugorzędna, to klient szybko zaakceptował projekt i czekał na dalsze prace.

Wersja docelowa – WordPress + dedykowany motyw

Jako bazową platformę wybrałem WordPress. Nie ma tu za wiele do opowiadania – po prostu czułem się wtedy najbezpieczniej z tym wyborem. Aby szybko zakodować motyw, wypchnąłem projekt z Lovable do Git, a następnie sklonowałem na swój komputer i zleciłem Windsurf, aby przygotował na podstawie tego typowy wordpressowy motyw. Zajęło jakieś 2-3 godzinki, zanim dogadałem się na tyle ze starym Claude Sonnet, bodajże 3.7, Aby motyw w miarę przypominał to, co zbudował Lovable.

Oczywiście trzeba było trochę popoprawiać treści i rozbudować to wszystko o podstronę, więc razem zajęło to kilka dni.

Formularze – Contact Form 7 i jego świta

Kolejnym wyzwaniem była budowa formularzy zgłoszeniowych i tutaj uznałem, że zobaczę, na ile uda mi się wykorzystać Contact Form 7. Jest to najpopularniejsza darmowa wtyczka do WordPressa pozwalająca budować formularze. Obrosła ona w wiele integracji i rozszerzeń, z których skorzystałem.

Powtarzalne pola i struktury

Prosty formularz kontaktowy nie jest żadnym wyzwaniem. Natomiast formularz, w którym jest struktura tabelaryczna zawierająca imię, nazwisko, tytuł naukowy, adres e-mail itd., zaczyna być problematyczna. Trzeba w jakiś sposób ją zamodelować i sprawić, aby formularz pozwalał tworzyć kolejne wiersze.

Domyślnie Contact Form nie ma tego w standardzie, ale na szczęście dobrzy ludzie przygotowali wtyczkę Contact Form 7 – Repeatable Fields, która rozwiązała większość wyzwań z tym związanych.

Definicja w edytorze CF7:

Wynik na stronie:

Pola warunkowe i zależne

Tutaj również z pomocą przychodzi wtyczka Conditional Fields for Contact Form 7, która dodaje do CF7 możliwość ukrywania pól, czy ustawiania ich wartości w zależności od innych pól. Dzięki temu bez problemu mogłem zrealizować takie proste wymagania, jak pokazanie pól NIP i mail do faktury, tylko jeśli wypełniający takiej faktury potrzebuje.

Zewnętrzny zapis danych – Webhook + N8N

Zdawać by się mogło, że dane, które klienci czy odwiedzający wpisują w formularze, wystarczy wysłać na mail albo zapisać w bazie danych WordPressa. W tym wypadku potrzebowaliśmy czegoś więcej.

Zgłoszenia referatów miały być na późniejszym etapie przeglądane przez Komisję w celu dokonania preselekcji. Dane uczestników miały być podstawą do rozliczeń, a także sprawdzania biletów na wejściu. Potrzebowaliśmy wysyłać dane z WordPressa do jakiegoś miejsca, z którego łatwo będzie później te dane wyciągnąć bądź je obrabiać.

Z pomocą przyszła tu kolejna wtyczka do WordPressa CF7 to Webhook. Pozwala ona wysłać dane z formularza na dowolny webhook. Przygotowałem więc w n8n (instancja zarządzana, uruchomiona na mikr.us) scenariusz, który oczekiwał na wywołanie webhooka i zapisywał przesłane Informacja do odpowiedniej struktury w bazie danych – hostowanej na własnym serwerze instancji Baserow.

Dzięki temu w każdym momencie można było łatwo zrobić raport z tego, ile jest złożonych propozycji prelekcji, kim są autorzy itd. Dane takie można było łatwo wyeksportować do Excela bądź pracować na nich, uzupełniając kolumny typu status bądź uwagi.

Powiadomienia mailowe

Do informowania potencjalnych prelegentów bądź uczestników o tym, czy ich prelekcja została wybrana, jak mają zapłacić, albo czy status ich zgłoszenia został zmieniony. Użyłem kolejnego scenariusza n8n, który na podstawie zmian w bazie danych reagował na różne sytuacje.

Dzięki temu można było wariantowo wysyłać różne treści maili, w zależności od tego, czy ktoś zaznaczył, że chce fakturę, czy też policzyć kwotę do wpłaty, w zależności od tego, jaki bilet został wybrany na formularzu rejestracyjnym.

Zabezpieczenie przed botami i spamem

Tutaj eksperymentowaliśmy z różnymi rozwiązaniami i ostatecznie skończyło się na Cloudflare Turnstile. Nie odsiało to wszystkich botów i spamerów, ale działało znacznie lepiej niż gotowe wtyczki do WordPressa czy reCAPTCHA.

Harmonogram konferencji – dedykowana wtyczka do WordPress z możliwością importu z csv

Kiedy klient miał już gotowy harmonogram konferencji, a przynajmniej jego wstępną wersję, sprawy nabrały tempa. Trzeba było szybko przygotować rozwiązanie, które pozwalałoby wielokrotnie importować plik Excelowy do określonej struktury wyświetlanej potem na stronie.

Dlaczego wielokrotnie? Bo konferencje mają to do siebie, że do ostatniej chwili zmienia się ich program. Zamiany sal, dni, godzin, poprawki w nazwiskach i stopniach naukowych prelegentów itd.

Z pomocą znowu przyszedł Windsurf, z którym przygotowałem wtyczkę robiącą dokładnie to, co było nam potrzebne. Po pierwsze, moduł administracyjny pozwalający importować pliki Excelowe. Po drugie, moduł prezentacyjny wyświetlający listę prelekcji, salę, prelegentów, godziny, dni itd., a także odpowiednie filtry pozwalające szybko wyszukać bądź zawęzić listę referatów.

Pod względem wizualnym nie poraża, ale swoją funkcję spełniło.

Czas pracy

Gdybym dzisiaj wyceniał taki projekt, wiedząc to, co wiem (po projekcie), i dysponując narzędziami, jakimi dysponuję, byłaby to wycena na poziomie około 40-50 godzin pracy. Pod koniec 2024 roku negocjacje zacząłem od poziomu 100-110 godzin. Skąd taka różnica? O tym w podsumowaniu.

Podsumowanie

Z perspektywy czasu myślę, że wiele rzeczy dzisiaj zrobiłbym jeszcze szybciej i jeszcze lepiej. Duże modele językowe poczyniły tak ogromne postępy, że taki projekt zamknąłby się w co najwyżej połowie czasu, jaki poświęciłem rok temu. Wtedy modele bardzo często generowały błędny kod, który trzeba było poprawiać. Zdarzały się też luki logiczne, prowadzące do dziwnych albo śmiesznych efektów. Praca z nimi bardzo często polegała na wielu iteracjach i punktowym pokazywaniu, gdzie może leżeć błąd.

Dzisiaj taki motyw i wtyczki, a także wszelkie formularze pisałbym od razu w jednym projekcie przechowującym konfigurację WordPressa. Motyw. Użyłbym też pewnie Bedrock, ponieważ taki projekt (całe repozytorium, czyli WordPress, motywy, wtyczki i konfiguracja, jest trzymana w git) świetnie się sprawdza w pracy nad takimi wyspowymi rozwiązaniami.

Jeśli podczas lektury nasunęły się Tobie jakieś pytania lub wątpliwości – znajdź mnie na profilach społecznościowych lub napisz tutaj. Chętnie uzupełnię ten artykuł i uwzględnię uwagi w kolejnych.

Jeśli takie materiały są dla Ciebie cenne – nie czekaj. Daj o tym znać w prywatnej wiadomości, udostępnij ten tekst gdzieś w swoich kręgach lub w dowolny sposób mnie wesprzyj – każdy taki sygnał motywuje do dalszej pracy i naprawdę pomaga.