Od integracji z dane.gov.pl do kompletnego systemu dla deweloperów

Jak działające od roku narzędzie do publikacji cen rozbudowaliśmy w DIGIKROM Deweloper Engine

Nie każdy projekt zaczyna się od pomysłu na wielki system.
Czasem jego początkiem jest bardzo konkretna potrzeba: zebrać dane, przygotować je w odpowiednim formacie i regularnie przekazywać do zewnętrznego systemu.
Tak było w tym przypadku.
Pierwsza wersja wtyczki nie miała być platformą sprzedażową, katalogiem inwestycji ani rozbudowanym systemem prezentacji mieszkań. Jej zadanie było znacznie bardziej techniczne — zarządzać cenami lokali i publikować dane w formacie przyjmowanym przez dane.gov.pl.
Wtyczka wykonywała swoją pracę. Przez około rok generowała dane, portal je pobierał, przetwarzał i prezentował w panelu.
Mieliśmy więc nie prototyp, ale działający, zweryfikowany w praktyce rdzeń.
I właśnie wtedy pojawiło się pytanie:

Skoro system posiada już inwestycje, lokale, ceny, metraże, statusy i historię zmian, dlaczego nie wykorzystać tych samych danych do zbudowania kompletnej strony dewelopera?

Tak rozpoczęła się budowa DIGIKROM Deweloper Engine.

Punkt wyjścia: nie ruszać tego, co działa

Najważniejszą decyzją techniczną było zachowanie istniejącego mechanizmu integracji z dane.gov.pl.
Pierwotna wtyczka obsługiwała między innymi:

• inwestycje deweloperskie,
• pojedyncze lokale,
• ceny brutto,
• cenę za metr kwadratowy,
• powierzchnię lokalu,
• status dostępności,
• dodatkowe koszty,
• pomieszczenia przynależne,
• historię zmian cen,
• cykliczne generowanie danych,
• eksport CSV,
• eksport XML,
• plik kontrolny MD5,
• automatyczne zadania CRON.

To nie była część, którą należało „napisać lepiej” tylko dlatego, że zaczynaliśmy większy projekt.
Jeżeli mechanizm od roku poprawnie współpracował z portalem dane.gov.pl, najbezpieczniejszym rozwiązaniem było jego zachowanie i rozwijanie nowych funkcji obok niego.
Nie przebudowaliśmy więc działającego eksportu.
Zbudowaliśmy wokół niego nową warstwę.

Jedne dane, wiele zastosowań

W klasycznych realizacjach deweloperskich dane często są rozproszone.
Cena znajduje się w tabeli. Metraż w opisie mieszkania. Rzut w bibliotece mediów. Status dostępności w osobnym arkuszu. Na stronie inwestycji wartości bywają wpisywane ręcznie, a w katalogu lokali funkcjonuje druga kopia tych samych informacji.
Taki model szybko prowadzi do rozbieżności.
W DIGIKROM Deweloper Engine lokal jest jednym, centralnym rekordem. Posiada własne dane, które mogą być wykorzystywane jednocześnie przez:

• eksport do dane.gov.pl,
• listę dostępnych mieszkań,
• kartę lokalu,
• pojedynczą stronę mieszkania,
• widżety Elementora,
• historię ceny,
• dokumenty do pobrania,
• automatyczne statystyki inwestycji.

Zmiana ceny w panelu nie wymaga ręcznego poprawiania kilku sekcji strony.
Aktualizowany jest lokal, a system korzysta z jego bieżących danych we wszystkich miejscach.

Rozszerzenie modelu lokalu

Dane wymagane do raportowania nie wystarczają do atrakcyjnej prezentacji mieszkania.
Klient nie wybiera lokalu wyłącznie na podstawie ceny i metrażu. Interesuje go również piętro, liczba pokoi, ekspozycja, balkon, taras, ogród, termin oddania i układ pomieszczeń.
Dlatego do istniejącego modelu dodaliśmy warstwę prezentacyjną.
Lokal może obecnie posiadać między innymi:

• liczbę pokoi,
• piętro,
• oznaczenie budynku lub klatki,
• ekspozycję,
• balkon, taras, loggię lub ogród,
• powierzchnię dodatkową,
• termin oddania,
• krótką informację sprzedażową,
• etykietę promocyjną,
• obraz wyróżniający,
• osobny rzut lokalu,
• kartę lokalu w PDF,
• oznaczenie lokalu wyróżnionego.

Rzut i dokument PDF można wybrać bezpośrednio z biblioteki mediów WordPressa. Nie trzeba kopiować i wklejać technicznych adresów plików.
Co ważne, pola prezentacyjne nie ingerują w dotychczasowy mechanizm eksportu. Rozszerzają system, ale nie zmieniają struktury danych, która już wcześniej była prawidłowo odbierana przez dane.gov.pl.

Od zwykłego wpisu do dedykowanej strony mieszkania

Domyślna prezentacja niestandardowego typu treści w WordPressie bardzo często przypomina wpis blogowy.
Pojawia się autor, data publikacji, awatar, przyciski udostępniania i układ przygotowany do czytania artykułu.
W przypadku mieszkania wygląda to po prostu źle.
Informacja typu:

Posted by Jan Kowalski on 13 July

nie ma żadnej wartości dla osoby analizującej apartament o powierzchni 78 m².
Dlatego lokale otrzymały dedykowaną warstwę prezentacji. Strona może automatycznie pokazywać:

• duże zdjęcie lub wizualizację,
• rzut mieszkania,
• nazwę i status lokalu,
• inwestycję oraz lokalizację,
• cenę brutto,
• cenę za metr kwadratowy,
• metraż,
• pokoje,
• piętro,
• budynek,
• ekspozycję,
• powierzchnie dodatkowe,
• termin oddania,
• historię zmian cen,
• koszty dodatkowe,
• pomieszczenia przynależne,
• dokument PDF,
• przycisk prowadzący do formularza lub dowolnej sekcji strony.

Jednocześnie zachowaliśmy możliwość edycji lokalu w Elementorze.
Jeżeli inwestycja wymaga indywidualnej prezentacji konkretnego apartamentu, administrator nie jest zamknięty w jednym szablonie.

Elementor jako warstwa projektowa

Samo przechowywanie danych nie tworzy jeszcze dobrej strony.
Dlatego kolejnym etapem było przygotowanie dedykowanej linii widżetów dla Elementora.
Nie chodziło o dodanie kilku prostych kart z tytułem i obrazkiem. Celem było stworzenie systemu, z którego da się zbudować kompletną stronę dewelopera bez dokładania przypadkowych dodatków z kilku różnych paczek.
Wtyczka otrzymała widżety takie jak:

Deweloper Hero PRO

Hero dla pojedynczej inwestycji z automatycznie pobieranymi danymi, lokalizacją, statystykami i przyciskami.

Deweloper Hero Slider PRO

Slider przeznaczony na stronę główną dewelopera. Pozwala prezentować wiele inwestycji, ustalać ich kolejność, nadpisywać treść i obrazy, sterować kadrem oraz korzystać z liczników, kropek, strzałek i automatycznych przejść.

Lista Lokali PRO

Rozbudowany katalog mieszkań z filtrami AJAX, sortowaniem, statusem, liczbą pokoi, zakresem cenowym i metrażem.
Lista korzysta z obrazów wyróżniających lokali, natomiast rzuty pozostają osobnym materiałem wykorzystywanym w szczegółach mieszkania.

Karta Lokalu PRO

Samodzielna karta mieszkania do umieszczania w dowolnej części strony. Może wyświetlać obraz, cenę, metraż, pokoje, piętro, status i dodatkowe cechy.

Szczegóły Lokalu PRO

Kompletny panel danych bieżącego mieszkania. Widżet może być wykorzystywany w szablonie pojedynczego lokalu i automatycznie pobierać wszystkie wartości z aktualnie otwartego wpisu.

Pozostałe widżety systemowe

System obejmuje również:

• nagłówki sekcji,
• banery deweloperskie,
• sekcje CTA,
• informacje o inwestycji,
• opis inwestycji,
• atuty inwestycji,
• liczby i statystyki,
• galerię,
• harmonogram,
• lokalizację i otoczenie,
• dokumenty do pobrania,
• prezentację doradcy,
• historię ceny,
• dostępność inwestycji.

Dzięki temu z jednej wtyczki można zbudować stronę główną, prezentację inwestycji, katalog mieszkań i pojedyncze strony lokali.

System, a nie zbiór przypadkowych widgetów

Jednym z największych problemów rozbudowanych stron opartych na dodatkach do Elementora jest brak spójności.
Hero pochodzi z jednej paczki. Galeria z drugiej. Karty z trzeciej. Formularz z motywu. Każdy element ma inną typografię, inne odstępy, inne zaokrąglenia i inny sposób konfiguracji.
DIGIKROM Deweloper Engine został zaprojektowany jako jedna linia wizualna.
Widżety posiadają wspólny kierunek:

• ostre narożniki jako ustawienie domyślne,
• możliwość opcjonalnego włączenia zaokrągleń,
• pełną kontrolę typografii,
• oddzielne kolory etykiet i wartości,
• sterowanie szerokością treści,
• układy pełnoekranowe,
• kontrolę kadru obrazów,
• osobne ustawienia responsywne,
• spójne statusy i akcenty,
• kompatybilne presety.

Pełna kontrola kolorów jest szczególnie istotna. W systemach opartych na motywach nagłówki, pola formularzy czy etykiety często dziedziczą globalne style, co może prowadzić do ciemnego tekstu na ciemnym tle albo białych opcji na białej liście rozwijanej.
Dlatego w wielu miejscach kolor jest przypisywany bezpośrednio do konkretnego elementu, zamiast pozostawiać go przypadkowemu dziedziczeniu z motywu.

Obrazy bez niepotrzebnej utraty jakości

Podczas prezentacji inwestycji obrazy pełnią kluczową rolę.
WordPress automatycznie generuje kilka wersji każdego pliku. Jeżeli mały wariant zostanie rozciągnięty na szerokość dużego monitora, nawet świetna wizualizacja zaczyna wyglądać jak skompresowany podgląd.
Dlatego widżety prezentujące duże obrazy korzystają z pełnych plików i mechanizmu srcset. Przeglądarka może dobrać właściwą wersję grafiki do rozdzielczości i szerokości ekranu.
Dodaliśmy również kontrolę położenia obrazu oraz sposobu kadrowania. Administrator może wskazać, która część wizualizacji ma pozostać widoczna w szerokim lub pionowym układzie.

Inwestycja jako samodzielna część systemu

Pierwotnie inwestycja była przede wszystkim sposobem grupowania lokali.
Po rozbudowie otrzymała własne dane i warstwę prezentacji:

• nazwę,
• lokalizację,
• slogan,
• opis,
• obraz Hero,
• termin realizacji,
• dokumenty,
• galerie,
• atuty,
• statystyki,
• mapę,
• listę dostępnych mieszkań.

System może automatycznie obliczać informacje na podstawie przypisanych lokali, na przykład:

• liczbę dostępnych mieszkań,
• najniższą cenę,
• najmniejszy dostępny metraż,
• zakres powierzchni.

Nie trzeba wpisywać tych wartości ręcznie w kilku miejscach strony.

Co pozostało niezmienione

Najważniejszy element całego procesu to fakt, że rozbudowa nie zniszczyła pierwotnej funkcji wtyczki.
System nadal obsługuje:

• dane wymagane dla jawności cen,
• eksport CSV,
• strukturę XML,
• plik MD5,
• cykliczne zadania CRON,
• historię cen,
• dotychczasowe identyfikatory i metadane,
• pliki umieszczone w stałej lokalizacji.

Nowa warstwa Elementora korzysta z tych samych danych, ale nie przejmuje ani nie przepisuje mechanizmu integracji.
To ważna zasada przy rozwijaniu stabilnego oprogramowania:

Nie trzeba burzyć działającego rdzenia, aby zbudować wokół niego znacznie większy produkt.

Od narzędzia raportowego do cyfrowego centrum inwestycji

DIGIKROM Deweloper Engine nie jest już wyłącznie wtyczką do generowania plików.

Obecnie łączy trzy obszary:

Zarządzanie danymi

Lokale, inwestycje, ceny, statusy, metraże, historia i materiały sprzedażowe.

Publikację i zgodność

Automatyczne przygotowywanie danych dla dane.gov.pl bez rezygnacji z działającej integracji.

Prezentację oferty

Strony inwestycji, katalog mieszkań, szczegóły lokali i pełny system widżetów Elementor.
Wszystkie te elementy pracują na jednym źródle danych.
Dzięki temu administrator nie musi utrzymywać oddzielnie strony internetowej, tabeli lokali i mechanizmu raportowania.

Największa wartość tego projektu

Najbardziej interesująca nie jest sama liczba widżetów ani liczba pól w panelu.
Największą wartością jest sposób, w jaki system powstał.
Nie zaczęliśmy od zaprojektowania efektownego Hero, a później zastanawiania się, skąd pobrać dane.
Zaczęliśmy od stabilnego mechanizmu, który przez rok wykonywał odpowiedzialne zadanie. Następnie stopniowo dokładaliśmy kolejne warstwy, cały czas zachowując kompatybilność z istniejącymi informacjami.
W efekcie powstał system, który nie jest tylko wizualną nakładką.
Ma działający rdzeń danych, historię zmian, automatyzację i konkretną rolę w procesie publikacji oferty.
Projekt rozpoczął się od niewielkiej, wyspecjalizowanej wtyczki do obsługi jawności cen i integracji z dane.gov.pl.
Dziś jest kompletnym rozwiązaniem umożliwiającym:

• zarządzanie inwestycjami,
• zarządzanie lokalami,
• publikację cen i historii zmian,
• automatyczne przygotowanie wymaganych plików,
• prezentację mieszkań,
• budowę stron inwestycji,
• filtrowanie dostępnych ofert,
• udostępnianie rzutów i dokumentów,
• tworzenie rozbudowanych układów w Elementorze.

To przykład projektu, w którym rozbudowa nie polegała na dopisywaniu kolejnych przypadkowych funkcji.
Polegała na przekształceniu sprawdzonego narzędzia w jeden spójny ekosystem.

DIGIKROM Deweloper Engine — od jawności cen do kompletnej cyfrowej prezentacji inwestycji.