Strona www dla dewelopera z katalogiem mieszkań - case study

W ostatnim czasie mieliśmy okazję pracować przy stronie dla dewelopera - firmy Active z Krakowa, dla której wykonaliśmy serwis z katalogiem mieszkań w nowowym apartamentowcu przy ulicy Mikołowskiej w Katowicach. Jeśli planujesz zrobić stronę z ofertą mieszkań lub lokali do sprzedaży lub wynajmu ten wpis może być dla Ciebie, a serwis możesz zobaczyć pod adresem www.mieszkaniawcentrum.pl.

Serwis był pierwszą realizacją strony z katalogiem mieszkań na nowym systemie Wirtualizer EMS, dlatego byliśmy bardzo pozytywnie nastawieni do projektu.
Poniżej przeczytasz czego się nauczyliśmy przy tej realizacji, może ta wiedza przyda się również Tobie.

1. Interaktywny katalog mieszkań

Oprócz typowych stron informacyjnych ważną częścią serwisu był katalog z ofertą mieszkań. Pewnie zastanawiasz się po co w ogóle katalog mieszkań na stronie tego typu. Przecież można by zrobić normalną stronę informacyjną z opisem inwestycji, z przykładowymi wizualizacjami 3D mieszkań w galerii zdjęć, a szczegółowe informacje o mieszkaniach zawrzeć w pliku lub plikach PDF do pobrania. Oczywiście można. Jeśli jednak zależy Ci na wygodzie użytkownika (UX), która przekłada się na wysoką konwersję (leady sprzedażowe) to katalog może być świetnym rozwiązaniem.

Główne zalety katalogu mieszkań na stronie:

• wygodne filtrowanie katalogu po piętrach, powierzchni, dostępności oraz sortowanie mieszkań po tych samych kryteriach

• wygodne przeglądarnie oferty mieszkań i lokali w dwóch różnych widokach - jako kafelki lub tabelka

• możliwość wygodnego składania zapytań o konkretne mieszkanie lub lokal bezpośrednio w szczegółach

• kompletne informacje o każdym mieszkaniu / lokalu - powierzchnie, udogodnienia, zdjęcia, położenie

• zwiększenie objętości serwisu dzięki dodatkowym podstronom katalogu ważne przy pozycjonowaniu strony

• możliwość udostępnienia / zapisania linku do konkretnego mieszkania / lokalu

• możliwość wykorzystania katalogu w kampaniach remarketingowych Facebook Ads i Google Ads

• możliwość wygodnego składania zapytań na wybrane mieszkanie lub lokal

W realizowanym projekcie nie tylko mieliśmy wdrożyć katalog mieszkań, ale miał on być w pewnym sensie interaktywny. Chodziło o podstrony z widokiem budynku w rzucie 3d oraz podstrony z rzutami poszczególnych pięter przedstawiające rozkład mieszkań w rzucie 2d. Te podstrony miały dostarczać informacji o mieszkaniach po najechaniu odpowiednio na piętro lub konkretne mieszkanie.

W przypadku podstorny z widokiem budynku 3d po najechaniu na dane piętro miało się ono zaznaczać oraz miała się wyświetlać informacja o mieszkaniach - ilość łącznie, w rezerwacji, dostępnych. Na podstronach z widokiem pięter 2d najechanie kursorem na mieszkanie miało powodować jego zapalenie oraz miała się pojawiać informacja o danym mieszkaniu.

Potrzebowaliśmy rozwiązania, które w elastyczny sposób pozwoli nam tworzyć wektory na zdjęciach, czyli zaznaczać dowolne obszary, a następnie je kolorować osobną płaszczyzną, z ewentualną przezroczystością. Szukaliśmy gotowych skryptów, które można by użyć i ewentualnie zaimplementować w naszym systemie CMS. Znaleźliśmy kilka rozwiązań i zaczęliśmy je po kolei testować oraz próbować implementować jako elementy panelu zarządzania.
 

Testowanie dostępnych narzędzi do tworzenia wektorów zabrało nam sporo czasu i energii, nie mówiąc o próbie ich implementacji jako element panelu CMS. Traciliśmy kolejne godziny i dni i wcale nie posuwaliśmy się do przodu. W końcu się poddaliśmy. Przemyśleliśmy sprawę i doszliśmy do wniosku, że tak naprawdę nie ma znaczenia gdzie będziemy tworzyć wektory, ważne aby mieć narzędzie które to umożliwi i będzie proste w użyciu.

I tak trafiliśmy na stronę https://www.image-map.net/ - darmowe narzędzie które pozwala na tworzenie wektorów w banalnie prosty sposób, zwracając potrzebne współrzędne.

Przede wszystkim można nanosić obszary w formie wielokątów oraz nanosić ich dowolną ilość, a nawet edytować istniejące. Problemem okazało się mapowanie punktów blisko siebie, zbyt mała rozdzielczość zdjęć plus mały obszar roboczy sprawiał, że czasami tworzone wektory nie pokrywały idealnie ścian mieszkań. Na szczęście i z tym można sobie poradzić.

Przeglądarki Chrome i Firefox pozwalają włączyć tryb responsywny a nim ustawić dowolną rozdzielczość ekranu. Zwiększenie rozdzielczości do wartości ekstremalnych np. 6000px oraz dodatkowa modyfikacja kodu CSS w inspektorze przeglądarki pozwoliło powiększyć obszar roboczy dzięki czemu możliwe było realizowanie mapowania na zdjęciach w powiększeniu a tym samym bardziej szczegółową manipulację punktami tworzonych poligonów.

Po naniesieniu wektorów narzędzie generuje kod ze współrzędnymi. Ponieważ wszystkie mieszkania dodawane były niezależnie jako katalog mogliśmy im przypisać te współrzędne, a następnie odczytywać je w serwisie. Oczywiście musieliśmy używać tych samych zdjęć, aby wszystko się pokrywało.

Pokrywało się .. ale nie do końca.

Okazało się, że u osoby odpowiedzialnej za realizację projektu po stronie klienta wektory są przesunięte względem zdjęć. Po analizie okazało się, że korzysta ona z monitora 27 cali z rozdzielczością 2880px a my korzystamy z monitorów full hd o rozdzielczości 1920px. Konieczne było wprowadzenie modyfikacji, generowanie większych obrazków i wprowadzenie odpowiedniego przesunięcia współrzędnych. Finalnie wszystko się udało zgrać tak aby w każdej rozdzielczości wektory pokrywały się z liniami obrazków.

Podsumowując. Czasami lepiej skorzystać z zewnętrznych narzędzi i skupić na realizacji celu niż tracić energię i za wszelką cenę wdrożyć integrację narzędzi, "bo fajnie jakby się udało". Chcieliśmy na siłę zaimplementować moduły do obsługi wektorów jako część naszego systemu, co było zupełnie niepotrzebne. Coś, co na początku wydawało się proste do zrobienia finalnie okazało się tematem nie do przeskoczenia, lub wymagającym ogromnego nakładu pracy i czasu. Na szczęście w porę się opamiętaliśmy i finalnie zmieniliśmy podejście do realizacji dzięki czemu udało się osiągnąć to na czym nam zależało - potrzebny efekt, elastyczność przy użyciu prostych w obsłudze narzędzi.

2. Wprowadzanie treści

W projekcie byliśmy odpowiedzialni również za wprowadzenie treści, czyli parametrów wszystkich mieszkań. Otrzymaliśmy materiały w formie plików Excela w trakcie prac wdrożeniowych. Jeszcze w trakcie wdrożenia przystąpiliśmy do wprowadzenia mieszkań do bazy. Wprowadzenie prawie 200 mieszkań wraz z podpięciem zdjęć to spory nakład pracy. Nie dało się tego zautomatyzować przez co była to mozolna, ręczna praca.

Po wprowadzeniu mieszkań do bazy okazało się, że nastąpi zmiana numeracji. I tu zaczęły się problemy.

Myślimy sobie, pozamieniamy numery i będzie po temacie. Okazało się, że zmiany numeracji to nie wszystko, zmieniają się również parametry mieszkań. Jednym słowem trzeba zmieniać praktycznie wszystko, sprawdzić każde mieszkanie, porównać parametry, wprowadzić zmiany.
 

Do tego doszły jeszcze zmiany w zdjęciach z układem mieszkań, rzutów 3d i 2d. Zmiana dużej ilości zdjęć wymaga sporej ilości klikania.

Na sam koniec wpadliśmy na pomysł, że zamiast podmieniać pliki w rekordach bazy lepszym rozwiązaniem jest podmiana zdjęć. Jednym słowem, najlepiej wprowadzić konkretną nomenklaturę plików np. blok-b-2d-mieszkanie-15.jpg gdzie dla tego rodzaju zdjęć zmieniać się będą tylko numery mieszkań na końcu.

Dlatego najlepszym rozwiązaniem jest przypisanie mieszkaniom konkretnych nazw plików,  a w przypadku pomyłek i konieczności zmiany zdjęć - wymiana plików w odpowiednim katalogu na serwerze. Jest to nieporównywalnie szybsze rozwiązanie niż podpinanie innych plików w rekordach mieszkań.

Podsumowując. Jeśli inwestycja jest wciąż w trakcie realizacji, lepiej wstrzymać się z wprowadzaniem parametrów lokali, gdyż te mogą ulec zmianie.

Rozwój Wirtualizer EMS

Mimo dużo większego nakładu pracy niż zakładaliśmy jesteśmy bardzo zadowoleni z efektów realizacji, dzięki której rozbudowaliśmy nasz system CMS o nowe funkcjonalności, m.in.

• widok wybranych wartości cech na gridzie katalogu

• widok zdjęć wraz ze ścieżkami i nazwami plików na gdzie galerii zdjeć

• możliwość wygodnego dodawania wartości cech przy dużej ilości unikalnych wartości
   

Po stronie użytkownika również rozwinęliśmy system szablonów o możliwość sortowania danych w katalogu dla dowolnej cechy np. przy prezentacji danych w formie tabelki. Temat banalny kiedy sortujemy dane załadowane w przeglądarce - kiedy wszystkie dane są widoczne.

Kiedy mamy dużą ilość danych wtedy powinny one być dzielone na porcje. Sortowanie danych w takim przypadku jest sporo trudniejsze gdyż sortowanie musi odbywać się po stronie serwera a nie w przeglądarce. Udało się zrealizować obydwa sposoby sortowania, choć druga wersja była dużo bardziej czasochłonna.
 

Podsumowanie