VulCode

WaveHost: strona, panel klienta i panel gier jako jeden system

WaveHost to dostawca hostingu serwerów gier, VPS i serwerów dedykowanych. Zbudowaliśmy mu nową stronę sprzedażową z własnym zapleczem, nowy panel klienta z automatycznym zakładaniem usług i przeprowadzkę kont ze starego panelu klienta.

Zobacz w portfolio
Nowa strona WaveHost: sekcja główna

Cztery części jednej marki

Strona, panel klienta, panel gier i bot zespołu działają osobno i każde ma własne wdrożenie. Klient przechodzi przez nie w jednej marce: od oferty na stronie, przez zamówienie w panelu, po własny serwer gry.

  • Strona sprzedażowa

    Oferta gier, VPS i serwerów dedykowanych z konfiguratorem, ochroną DDoS, opiniami, pytaniami i kontaktem, w ośmiu językach i trzech walutach. Treści i ceny zmienia zespół WaveHost w panelu admina.

  • Panel klienta

    Zamówienia, portfel z fakturami, usługi z konsolą, program partnerski, zgłoszenia i ustawienia konta, w sześciu językach. Każdą zamówioną usługę zakłada sam proces roboczy.

  • Panel gier

    Pterodactyl w barwach WaveHost. Panel klienta zakłada w nim serwery gier przez API, a klient ma ich konsolę, zasilanie i ustawienia także u siebie w panelu klienta.

  • Bot zespołu

    Na Discordzie zespołu pokazuje statystyki strony: odsłony, kliknięcia w ofertę, otwierane pytania i ruch z linków polecających. Codziennie wysyła raport i daje znać, gdy wynik przekroczy kolejny próg.

Strona sprzedażowa WaveHost

Prowadzi od oferty do zamówienia w panelu klienta. Teksty w ośmiu językach, ceny i wszystkie treści zespół WaveHost zmienia sam, w panelu admina strony.

Oferta na stronie WaveHost: karty usług z ceną startową

Oferta

Każdy rodzaj usługi ma kartę z ceną startową: hosting WWW, boty Discord, Minecraft, VPS, GTA i SCP:SL. Karta prowadzi do pakietów, a ceny przeliczają się na euro i dolary po kursie NBP.

Przewijana sekcja zalet na stronie WaveHost

Zalety po kolei

Pięć tematów marki w jednej przewijanej sekcji. Lista po lewej zostaje na miejscu i linią postępu pokazuje, przy którym temacie jest czytelnik.

Pytania i stopka strony WaveHost

Pytania i stopka

Pytania rozwijają się jedno pod drugim, a przycisk pod nimi przenosi rozmowę na Discorda WaveHost. Stopka zbiera ofertę gier, kontakt i dane firmy.

Jedna oferta dla strony i panelu

Ceny, pakiety i konfigurator VPS zespół WaveHost wpisuje raz, w panelu admina strony. Panel klienta bierze je stamtąd, a proces roboczy pilnuje, żeby w sprzedaży był tylko pakiet, który zmieści się na serwerach.

Panel admina strony

  • Oferty i pakiety

    Nazwa, cena, opis, lista cech, wyróżnienie i widoczność każdego pakietu.

    Panel klienta: pakiet staje się ofertą w sklepie panelu
  • Konfigurator VPS

    Kroki, pytania, opcje i dopłaty, z których klient składa własny serwer.

    Panel klienta: ten sam konfigurator z tymi samymi cenami
  • Treści i ruch

    Pytania, opinie, pliki, strona o firmie i teksty w ośmiu językach, a obok analityka, linki polecające i zniżki.

  • Zarządzanie panelem klienta

    Osobny obszar z własnym logowaniem: użytkownicy, serwery klientów, adresy IP, węzły, lokalizacje, wsparcie i maile.

Panel klienta

  • Sklep z ofertą strony

    Kategorie i pakiety przychodzą ze strony. Pakiet usunięty ze strony tylko się chowa, więc działające usługi zachowują swoją ofertę.

  • Ten sam konfigurator

    Panel czyta konfigurator ze strony, więc nowa cena albo opcja działa w nim bez nowego wdrożenia.

  • Parametry techniczne

    Węzeł, grę, rdzenie, pamięć i dysk ustawia zespół, a puste pola panel wypełnia z listy cech pakietu.

  • Węzeł dla zamówienia

    Klient wybiera lokalizację, a panel stawia usługę na najmniej obciążonym węźle z wolnymi adresami IP.

Kontrola zasobów

  • Wolne miejsce na węzłach

    Proces roboczy co kilka minut sprawdza na każdym węźle wolną pamięć i dysk, z zapasem, oraz wolne adresy IP.

  • Pakiet znika i wraca sam

    Pakiet, który już się nie zmieści, wypada ze sprzedaży, a wraca, gdy zasoby się zwolnią.

    Panel klienta: oferta znika ze sklepu albo do niego wraca
  • Tryb ręczny

    Dostępność każdej oferty zespół może przełączyć na ręczną i decydować o niej sam.

  • Węzeł bez odpowiedzi

    Niedostępny węzeł zostawia swoje oferty bez zmian, zamiast przełączać je tam i z powrotem.

Panel klienta krok po kroku

Klient zamawia, płaci i zarządza usługą z jednego konta, w jednym z sześciu języków panelu. Pulpit od razu pokazuje saldo, usługi, najbliższą płatność, ostatnią aktywność, faktury i link polecający.

Pulpit panelu klienta WaveHost

  1. Zamówienie

    VPS w gotowym pakiecie albo złożony w konfiguratorze, serwer gry z wyborem lokalizacji i wersji gry, na przykład Paper albo Vanilla w Minecrafcie.

  2. Płatność z portfela

    Saldo klient doładowuje przez Stripe: BLIK-iem, Przelewami24 albo kartą. Z portfela płaci za zamówienia i przedłużenia, a każda płatność ma fakturę do wydruku.

  3. Zarządzanie usługą

    VPS ma konsolę, zasilanie, statystyki, kopie zapasowe, firewall, reinstalację i podużytkowników. Serwer dedykowany włącza się i pokazuje podzespoły przez IPMI albo Redfish.

  4. Przedłużenie i większy pakiet

    Dłuższy okres przedłużenia wychodzi taniej, a przejście na większy pakiet kosztuje tylko różnicę za dni, które zostały do końca okresu.

Usługa zakłada się sama

Po zapłacie zamówienie trafia do kolejki BullMQ w Redisie, a osobny proces roboczy zakłada usługę bez udziału zespołu. API panelu tylko dodaje zadanie, więc klient od razu widzi usługę w instalacji.

VPS

Maszyna wirtualna przez API Proxmoxa

Węzeł w lokalizacji

Panel wybiera w lokalizacji klienta najmniej obciążony węzeł, który ma wolne adresy IP i szablon wybranego systemu.

Instalacja z szablonu

Proces roboczy zakłada maszynę z szablonu systemu, z adresami IP i z hasłem albo kluczem SSH, który podał klient.

Dane dostępu mailem

Klient dostaje adres, port i użytkownika: SSH i root dla Linuksa albo RDP i Administrator dla Windowsa.

Usługa aktywna

Panel oznacza maszynę jako aktywną i od razu daje konsolę, zasilanie, statystyki i kopie zapasowe.

Serwer gry

Serwer w Pterodactylu przez jego API

Konto w panelu gier

Proces roboczy zakłada klientowi konto w Pterodactylu albo używa tego, które klient już ma.

Miejsce na węźle

Przy wybranej lokalizacji Pterodactyl sam dobiera węzeł, a bez niej panel bierze wolny port na węźle.

Limity z pakietu

Pamięć, dysk i procesor przychodzą z pakietu, a puste hasła gry, na przykład RCON, dostają losową wartość.

Pierwsze uruchomienie

Gdy gra tego wymaga, panel czeka na koniec instalacji, wgrywa pliki startowe, na przykład eula.txt Minecrafta, i dopiero wtedy włącza serwer.

Usługa od instalacji do usunięcia

Stan każdej usługi prowadzi proces roboczy według daty wygaśnięcia, więc zespół WaveHost nie pilnuje terminów ręcznie.

  1. Instalacja

    Proces roboczy

    Zakłada maszynę albo serwer gry. Do końca instalacji panel wstrzymuje akcje, które mogłyby jej przeszkodzić, na przykład przedłużenie.

  2. Aktywna

    Klient

    Zarządza usługą i przedłuża ją z portfela o miesiąc, dwa albo trzy. Każde przedłużenie ma fakturę i wpis w dzienniku aktywności.

  3. Zawieszona

    Proces roboczy

    Po terminie zatrzymuje VPS albo zawiesza serwer gry w Pterodactylu. Dane zostają na miejscu przez siedem dni.

  4. Usunięta

    Proces roboczy

    Po siedmiu dniach bez przedłużenia usuwa maszynę albo serwer gry, więc miejsce na węźle wraca do sprzedaży.

  • Zawieszona

    Przedłużenie po terminie

    Klient

    Zapłata za zawieszoną usługę przywraca ją jako aktywną, z nowym okresem liczonym od dnia zapłaty.

    Aktywna
  • Aktywna

    Reinstalacja systemu

    Klient

    Klient wybiera inny system, maszyna instaluje się od nowa, a nowe dane dostępu przychodzą mailem.

    Instalacja
  • Aktywna

    Większy pakiet

    Klient

    Zmiana pakietu dokłada zasoby do końca opłaconego okresu, a klient płaci tylko różnicę za pozostałe dni.

    Aktywna

Zgłoszenia trafiają na Discorda zespołu

Klient pisze w panelu, a zespół WaveHost odpowiada tam, gdzie i tak pracuje: na swoim Discordzie. Obie strony rozmowy spina bot wsparcia.

  • Klientw panelu klienta
  • Panel klientaAPI i baza zgłoszeń
  • Bot wsparciana Discordzie WaveHost
  • Zespół WaveHostna kanale zgłoszenia
  1. KlientPanel klienta

    Krok 1 z 5: Nowe zgłoszenie

    Klient podaje temat, priorytet i pierwszą wiadomość w zakładce Wsparcie, bez wychodzenia z panelu.

  2. Panel klientaBot wsparcia

    Krok 2 z 5: Prywatny kanał zgłoszenia (w tle)

    Bot zakłada kanał widoczny tylko dla zespołu i przypina na nim kartę z tematem, priorytetem, pierwszą wiadomością i przyciskiem z danymi klienta.

  3. Zespół WaveHostKlient

    Krok 3 z 5: Odpowiedź z Discorda

    Wiadomość napisana na kanale trafia do wątku w panelu. Bot oznacza ją jako dostarczoną, a gdy klient ją otworzy, jako przeczytaną.

  4. KlientZespół WaveHost

    Krok 4 z 5: Dalsza rozmowa

    Odpowiedzi klienta pojawiają się na kanale pod jego nazwą, a zespół widzi, kiedy klient pisze. Odpisać można też z zakładki Wsparcie w panelu admina.

  5. Zespół WaveHostPanel klienta

    Krok 5 z 5: Zamknięcie

    Zgłoszenie zamyka klient w panelu albo zespół przyciskiem na kanale, po potwierdzeniu. Kanał blokuje się i zostaje w historii jako zamknięty.

Konta przeniósł skrypt migracyjny

Klienci WaveHost mieli konta, saldo i historię płatności w poprzednim panelu. Napisaliśmy skrypt, który przenosi je do nowego panelu: czyta starą bazę zapytaniami SQL i zapisuje dane przez model nowego panelu, z jego walidacją.

scripts/migrate-legacy-panel.tstypescript
const DRY_RUN = process.argv.includes("--dry-run"); const LEGACY_ID_PREFIX = "legacy-panel:"; const migratedId = (legacyId: string) => `${LEGACY_ID_PREFIX}${legacyId}`; async function main() {  await migratePartnerLevels();  await migrateUsers();  await migratePayments();  await migrateOrders();  await migrateEarningsHistory();}

  1. Wszystko, co miał klient

    Poziomy partnerskie, konta z saldem portfela, polecenia, płatności, zamówienia i historia prowizji, w kolejności, w jakiej od siebie zależą.

  2. Uruchomienie próbne

    Z flagą --dry-run skrypt tylko wypisuje, co przeniesie, i niczego nie zapisuje, więc zespół widzi wynik przed zmianą bazy.

  3. Bez duplikatów

    Każdy przeniesiony wiersz niesie identyfikator ze starego panelu, więc ponowne uruchomienie pomija to, co już przeszło.

  4. Bez zgadywania

    Stare kody polecające dostają przedrostek, żeby nie zderzyły się z nowymi, a zamówienie bez odpowiednika w nowym katalogu czeka na ręczne przejrzenie.

Konto, w którym leżą pieniądze i serwery

Panel trzyma saldo klientów i dostęp do ich maszyn, więc ochrona obejmuje logowanie, dostęp do usług i płatności.

  • Dwuetapowe logowanie

    Kody TOTP z aplikacji uwierzytelniającej i klucze dostępu, którymi klient loguje się bez hasła.

  • Potwierdzony adres e-mail

    Konto działa po potwierdzeniu adresu. Konto niepotwierdzone w ciągu doby proces roboczy usuwa.

  • Formularze pod ochroną

    Cloudflare Turnstile na rejestracji, logowaniu i resecie hasła, a w Redisie osobne limity prób dla logowania, płatności, zakupów, reinstalacji i firewalla.

  • Podużytkownicy z uprawnieniami

    Właściciel daje innej osobie dostęp do jednej usługi i wybiera, co jej wolno: zasilanie, konsolę, kopie, firewall albo przedłużenie. Współzarządzający przekaże dalej tylko to, co sam ma.

  • Dziennik i urządzenia

    Logowania, przedłużenia i akcje na usługach zapisują się z czasem, a w ustawieniach klient widzi swoje zalogowane urządzenia i może je wylogować.

  • Płatności z podpisem Stripe

    Saldo rośnie dopiero po zdarzeniu Stripe ze sprawdzonym podpisem, a każda płatność z portfela dostaje fakturę.

Pytania o ten projekt

Czytaj dalej

Pozostałe case studies i usługi, w których korzystamy z tego doświadczenia.

Masz projekt podobny do tego?

Opisz, co chcesz zbudować. Odpiszemy w godzinę z pytaniami i bezpłatną wyceną.

Opinia klienta

Firma Vulcode.com zrealizowała dla nas projekt strony internetowej i jesteśmy bardzo zadowoleni z efektu. Witryna działa płynnie, jest dobrze zoptymalizowana i poprawnie wyświetla się na wszystkich urządzeniach. Cały proces wdrożenia przebiegł bezproblemowo, a kod źródłowy jest czysty i przygotowany pod dalszy rozwój. Doceniamy terminowość i techniczne wsparcie na każdym etapie.

WaveHostSzymonCEO, WaveHostTrustpilot