ArtInside WebApp - Cetuspro

Aplikacja internetowa ArtInside

Marketplace do sprzedaży i zakupu dzieł sztuki

Artinside w skrócie

  • Zakres prac: Front End, Back End, DevOps
  • Rozpoczęcie projektu: 1 luty 2022
  • Zespół: Backend .NET Engineer, Frontend React Engineer
  • Rodzaj projektu: Marketplace
  • Wersja live: https://www.artinside.pl

Kim jest nasz klient?

Naszym klientem jest Galeria Sztuki ArtInside, która zajmuje się sprzedażą obrazów artystów prezentujących sztukę współczesną zarówno w obrazach, rzeźbach, a także sztuce rzeźbionej w drewnie.

Największe wyzwanie

Galeria Artinside miała już własny system stworzony kilka lat wcześniej z udziałem technologii, które obecnie były już przestarzałe. Naszym największym wyzwaniem było zrozumienie działania poprzedniego systemu, którego nie znaliśmy i odtworzenie go zupełnie na nowo wraz z implementacją nowych funkcjonalności. Zdecydowaliśmy się na stworzenie systemu od zera na bazie poprzedniego, ponieważ poprzednio wdrożona technologia nie pozwalała na dalszy rozwój systemu o nowe wymagania. Najważniejszym celem było osiągnięcie wysokiej wydajności działania aplikacji. Klientowi zależało również na tym, aby system działał odpowiednio na urządzeniach mobilnych, czego w poprzednim systemie brakowało. Drugim bardzo ważnym aspektem było wdrożenie funkcjonalności ułatwiających pracę pracownikom galerii, które dostrzegliśmy podczas wykonywania audytu UX/UI.

Przebieg prac

Krok 1

Klient przekazał nam kod źródłowy poprzedniego systemu. Poddaliśmy go pełnej analizie, aby przede wszystkim zapoznać się z systemem i sprawdzić jakie technologie zostały użyte wcześniej oraz aby zastanowić, co można byłoby zmienić, aby całość systemu funkcjonowała lepiej.

Krok 2

W kolejnym kroku zebraliśmy informacje od klienta dotyczące tego, czego oczekuje od nowej wersji systemu, a także na czym mu najbardziej zależy. W ten sposób wspólnie z klientem stworzyliśmy plan działania i ustaliliśmy priorytety.

Warsztaty CetusPro

Krok 3

Następnie przystąpiliśmy do działania i wdrażaliśmy funkcjonalności według zamierzonego planu. Dzięki narzędziu do zarządzania (Jira) klient mógł na bieżąco monitorować status prac, a także aktualne postępy. To bardzo ważne, aby być w stałym kontakcie z klientem. Praca blisko z klientem umożliwiła bieżącą weryfikację prac i pozwoliła zespołowi na bieżąco respektować wszystkie uwagi od klienta.

Krok 4

Następnym krokiem było wdrożenie systemu na serwer i testowanie poszczególnych funkcjonalności, aby upewnić się, że wszystko działa poprawnie oraz spełnia wszystkie wymagania klienta.

Krok 5

Gdy otrzymaliśmy potwierdzenie od klienta, że wszystko działa poprawnie przenieśliśmy nowy system na serwer produkcyjny, gdzie z aplikacji mogli korzystać klienci i pracownicy Artinside.

Wsparcie powdrożeniowe

Wdrażając systemy informatycznie wiemy, że oprócz stworzenia i wdrożenia technologii bardzo ważnym elementem jest wsparcie powdrożeniowe oraz zapewnienie ciągłości działania. Zapewniliśmy klientowi ciągłość działania aplikacji poprzez monitoring 24/7, dzięki czemu jesteśmy w stanie szybko wykryć i reagować na awarię.

Monitoring usług CetusPro

Rezultaty prac

Dzięki zrozumieniu działania wcześniejszej wersji systemu i wdrożeniu nowych technologii uzyskaliśmy bardzo wydajny system.

Najbardziej istotne punkty:

  1. System działa o wiele wydajniej, czyli tak, jak zależało naszemu klientowi
  2. Zdjęcia ładują się kilkanaście razy szybciej - dla porównania: wcześniej zdjęcia obrazów ładowały się około 20 sekund, teraz ładuję się w mniej niż sekundę
  3. Zarządzanie całym systemem łącznie z dodawaniem nowych prac, artystów, a także zarządzanie zamówieniami stało się bardziej intuicyjne
  4. Aplikacja webowa dla klienta po naszych zmianach wygląda bardziej nowocześnie
  5. Panel Back Office pozwala pracownikom galerii na zarządzanie intuicyjniej całym systemem, m.in dodawaniem kolejnych prac artystów na sprzedaż, a także modułem zamówień

Większa wydajność

Dzięki wdrożeniu nowych technologii chmurowych nowa wersja systemu działała znacznie wydajniej od poprzedniej. Obecnie zdjęcia, które wcześniej ładowały się ok. 20 sec, teraz ładują się przez mniej niż sekundę. Efekt uzyskaliśmy, dzięki integracji nowej wersji systemu z chmurą Azure.

Bardziej intuicyjne zarządzanie

Pracownicy korzystający z aplikacji zgłaszali, że panel administratora nie jest intuicyjny. Wdrożyliśmy małe, lecz dające duży efekt zmiany takie jak m.in. dodaliśmy przyciski "Dodaj kolejny obraz", "Dodaj kolejnego artystę" oraz inne zmiany, które wpłynęły na komfort korzystania z aplikacji. Drobne usprawnienia UX/UI mają znaczącą różnicę dla użytkowników korzystających z aplikacji, dzięki intuicyjnemu systemowi użytkownicy mogą szybciej i przyjemniej wykonywać swoją pracę co wpływa na finalny zysk przedsiębiorstwa.

Dodatkowo wdrożyliśmy funkcję "Soft Delete". Dzięki niej usuwane ze strony dane nadal pozostają w bazie danych i nie przepadną całkowicie. Dzięki temu usunięte dane nie są wyświetlane w aplikacji, lecz dzięki temu, że pozostały w bazie danych, w razie potrzeby będą łatwe do odzyskania.

Usprawnienia modułu Newslettera

W pierwszej wersji aplikacji był obecny moduł Newslettera. Wcześniejszy Newsletter umożliwiał tylko i wyłącznie wysyłanie samego tekstu. Dodaliśmy tutaj opcję dodawania również zdjęć i grafik, co znacząco poprawiło odbiór wizualny Newslettera przez zainteresowanych użytkowników. Sam tekst to nie wszystko, ponieważ obrazy są równie ważne w ogólnym odbiorze.

Dodatkowo wprowadziliśmy również szablony wiadomości newsletter. Dzięki specjalnym szablonom wiadomości osoba odpowiadająca za rozsyłanie newslettera ma ułatwione zadanie. Wybieranie gotowego szablonu z listy znacząco usprawnia pracę w obrębie zarządzania zamówieniami.

Artinside zrzuty ekranu widoków newslettera
Artinside zrzuty ekranu widoków newslettera
Artinside zrzuty ekranu widoków newslettera

Obraz i artysta prywatny

Dodając obraz do systemu można nadać mu status prywatny. Inna osoba może go zobaczyć tylko i wyłącznie za pomocą specjalnie wygenerowanego, indywidualnego klucza lub linku, który zostanie jej wysłany. Dzięki takiemu rozwiązaniu obraz prywatny może trafić tylko i wyłącznie do wybranej osoby przez pracowników lub autora, a nie do wszystkich użytkowników systemu.

Dodaliśmy również opcję ukrycia profilu artysty wraz z jego pracami. Umożliwia to artyście zachowanie prywatności i ukrycie swojej działalności na stronie oraz przywrócenie jej w odpowiednim momencie.

Filtracja obrazów

Obrazy można przeszukiwać za pomocą filtrów. W razie dodania nowych pozycji z innymi parametrami administratorzy mogą dodawać bądź zmieniać obecne filtry w zależności od swoich potrzeb.

W aplikacji dostępna jest filtracja w kilku rodzajach:

  • Filtracja po zakresie numerów
  • Filtracja po zdefiniowanych opcjach - pole wielokrotnego wyboru
  • Filtracja po kolorach
Artinside zrzuty ekranu filtrów
Artinside zrzuty ekranu filtrów
Artinside zrzuty ekranu filtrów

Generowanie grafiki przedstawiającej skalę obrazu w rzeczywistości

Na podstawie podanych parametrów obrazu, a konkretnie wartości związanych z jego rozmiarami generuje się obraz skalujący wielkość dzieła i porównuje do wzrostu przeciętnego człowieka. Moduł ten pozwala na orientacyjne zapoznanie się z rzeczywistą wielkością obrazu, bądź innego dzieła sztuki.

Artinside realna wielkość obrazu

Szczegóły obrazu

Stworzyliśmy nowy moduł umożliwiający przybliżenie obrazu, aby zobaczyć jego drobniejsze szczegóły bez utraty jakości. Nie było to łatwe zadanie - użyta wcześniej technologia nie była wspierana od kilku lat, a my musieliśmy sprostać oczekiwaniom klienta i wdrożyliśmy funkcjonalność typu "Deep Zoom", która umożliwiała zobaczenie szczegółów dzieła bez utraty jakości z zachowaniem szybkiego ładowania się zdjęcia.

Artinside zrzuty ekranu widoku szczegółów dzieła
Artinside zrzuty ekranu widoku szczegółów dzieła
Artinside zrzuty ekranu widoku szczegółów dzieła
Artinside zrzuty ekranu widoku szczegółów dzieła

Moduł zamówień

Moduł zamówień ArtInside nie jest tradycyjnym system zamówień. Po złożeniu zamówienia wysyłane jest powiadomienie do pracowników artinside.pl, tak aby przed realizacją zamówienia mogli potwierdzić dostępność obrazu u autora. Obrazy nie znajdują się na stanie w galerii, ale u artystów. Może się zdarzyć, że obraz został przykładowo nieco zmieniony lub sprzedany bezpośrednio przez autora - dlatego jest wymagana weryfikacja przed potwierdzeniem zamówienia klientowi. Dopiero po weryfikacji, gdy zaakceptujemy zakup przychodzi e-mail z prośbą o dokonanie płatności przelewem tradycyjnym. Po zaksięgowaniu przelewu obraz jest wysyłany do klienta.

Proces składania zamówień w systemie nie jest bardzo skomplikowany, lecz został on zaprojektowany dokładnie pod procesy biznesowe przebiegające w organizacji naszego klienta.

Podsumowanie

Pomimo braku znajomości wcześniejszego systemu i przestarzałych technologii stworzyliśmy nowy system, który jest o wiele bardziej wydajny, a także dysponuje nowymi funkcjami.

W aplikacji webowej można znaleźć wszystkie potrzebne informacje na temat obrazów, ich parametrów oraz artysty. Cała aplikacja działa wydajnie i umożliwia duże przybliżenie fotografii dzieł, dzięki czemu można dostrzec najdrobniejsze szczegóły prezentowanych obrazów.

Technologie

Jakie technologie wykorzystaliśmy w tym projekcie?
.NET Core
Linux
PostgreSQL
C#
JavaScript
JQuery
HTML5
CSS3
Realizacje

Zobacz pozostałe realizacje

Opinie

Co mówią klienci naszych usługach

Maciej Lipiński
Maciej Lipiński
CEO at BCAST
Polecam współpracę z CetusPRO, usługi zostały zrealizowane z największą starannością. Jesteśmy zadowoleni z efektu końcowego.
Maciej Chrzanowski
Maciej Chrzanowski
CEO at tamt.co
Dzięki CetuPRO udało się wdrożyć MVP a potem finalny produkt. Polecam!
Bartosz Jadam
Bartosz Jadam
Founder & CEO, Winopasja.pl sp z o.o.
Cetus opracował platformę marketplace dostosowaną do rynku wina oraz system do zarządzania naszą winnicą. Zespół CetusPro poprowadził nas od pomysłu do gotowego systemu na środowisku produkcyjnym. Platforma pomoże nam lepiej sprzedawać nasze produkty.
Bartłomiej Baran
Bartłomiej Baran
CEO at sydig.com
Dzięki CetusPRO udało się zbudować MVP, a następnie zrealizować docelowy produkt. Jakość współpracy bardzo dobra.