Kako je Njuškalo razvilo skalabilnu tehnologiju primjenjivu na više Styrijinih tržišta

Trikoder se suočio s izazovom uvođenja postojeće hrvatske platforme njuskalo.hr na novo tržište sa sjedištem u Sloveniji (bolha.com). Trebalo je razviti podršku za novu valutu, jezik i mogućnosti plaćanja

Trikoder, partner .debuga, developerska je tvrtka koja je zaslužna za tehnološka rješenja koja stoje iza najvećeg domaćeg internetskog oglasnika, Njuškala. Svoju su tehnologiju nedavno prilagodili i za drugo tržište, pa su ovaj proces detaljno opisali za nas i naše čitatelje…

Ukoštac s izazovima

Budući da smo Njuškalo aktivno razvijali više od 10 godina, možete zamisliti kakvo je bilo stanje kodne baze u to vrijeme: sve puno tvrdo kodiranih statičkih tekstova, tvrdo kodirane vrijednosti valuta, značajke za čije isključivanje na jednom tržištu vam treba kristalna kugla itd. Kad smo zasukali rukave, ideja je bila da napravimo jedinstveni repozitorij kodova za oba tržišta i upravljamo razlikama između tržišta poput valute, jezika i promjenjivih značajki putem konfiguracijskih datoteka.

Ovaj bi pristup osigurao lakši razvoj i održavanje za oba tržišta u budućnosti, uključivanje ili isključivanje značajki prema zahtjevima poslovnog odjela i, naposljetku, lakši prijelaz na nova tržišta. Evo nekih izazova s kojima smo se suočili i kako smo ih riješili.

Prijevodi

Morali smo pregledati cijelu svoju postojeću bazu kodova s više od 20.000 izvornih datoteka, skenirati i zamijeniti sve statičke tekstualne sadržaje na hrvatskom jeziku pozivima dinamičke funkcije prijevoda. To je bio ogroman posao na kojem je više od 5 mjeseci radio tim naših mlađih programera.

Ukupno je identificirano 18.000 unosa za prijevod i izdvojeno u .po datoteke. Datoteke GetText Portable Object (PO) industrijski su standard za višejezične web stranice u PHP-u. Te su datoteke napisane u čitljivom formatu, tako da ih mogu lako uređivati programeri i prevoditelji koji su nam morali dostaviti prijevode za slovensko tržište. Symfonyjeva komponenta za prijevod korištena je za prijevod sadržaja u Back-endu.

Podskup tih 18.000 prijevoda trebao je biti dostupan JavaScript-u u kodu Front-enda. Usluga učitavanja podskupina prijevoda implementirana je u Back-endu kako bi se Front-endu pružili samo oni prijevodi koji su bili potrebni za određeni tip stranice. Naš interno razvijeni modul translate-js korišten je za prikazivanje prijevoda u našim Front-end modulima na temelju komponenata Figura i Vue view.

Lokalizacija rute

Morali smo internacionalizirati svoje rute za novo tržište. Budući da smo u to vrijeme bili na Symfonyju 3.4 koji nije pružao ovu značajku, morali smo potražiti alternative. Pronašli smo nekoliko besplatnih snopova, ali kako smo znali da Symfony 4.1 ima podršku za ovu značajku (i znali smo da u budućnosti planiramo nadogradnju na Symfony 4.4), odlučili smo privremeno omogućiti backport podršku za internacionalizaciju sa Symfonyja 4 našem 3.4 projektu (umjesto da u tu svrhu koristimo biblioteku treće strane).

Nakon nadogradnje na Symfony 4.4 ove godine uspješno smo samo izbrisali taj kod i sve je nastavilo raditi. Dio tog napora internacionalizacije ruta bio je i premještanje definicija ruta i generiranje URL-a rute iz našeg internog okvira na Symfony kako bismo imali jedan središnji alat koji bi upravljao rutama (Symfony).

Neke od ovih novih lokaliziranih ruta morali smo pogurati na Front-end, kamo smo usmjeravali klijente Vue ruterom. Željeli smo zadržati definicije ruta i lokalizaciju u jednom tehnološkom stogu – pa je usluga učitavanja podskupa ruta implementirana u Back-endu kako bi opskrbila JavaScript kod Front-enda podskupom lokaliziranih uzoraka rute “na zahtjev”.

Lokalizacija teme i kategorija

Od početka smo znali da će Bolha morati imati drukčiju shemu boja, grafiku i kategorije nego Njuškalo. Stoga smo morali proširiti svoju tehnologiju kako bismo omogućili tu prilagodbu.

Razvili smo teme kako bismo razlikovali instance, vizuale i opći “izgled i dojam” platforme. Svaka instanca CBT-a (Common based tehnologija) ima jednu temu koja je primijenjena konfiguracijom instance. Kad se u kodu Back-enda ili Front-enda referira na asset, on prolazi kroz naš algoritam pretraživanja asseta. Kada se instanca CSS-a generira putem webpacka / SASS, varijable pripadajućih tema i stilova uključuju se u finalne izlazne snopove. Prilagodba tema i rezultata CSS-a tehnički su temelji jednostavnog i moćnog tematskog sustava.

Lokalizacija valute

Prije početka projekta imali smo tvrdo kodiranu hrvatsku valutu (HRK) kao primarnu valutu i euro (EUR) kao sekundarnu valutu u cijeloj kodnoj bazi. I ne samo to, nego smo u bazi kodova imali najmanje pet različitih formatora valuta, koji su svi formatirali valutu na drugi način prije prikazivanja korisniku.

To se očito moralo promijeniti i morali smo se sa svim odjelima unutar organizacije Njuškala dogovoriti o jedinstvenom načinu oblikovanja cijena na platformi, ovisno o tržištu. To nije bio lak podvig jer je financijski odjel želio da se to učini na jedan način, odjel za korisničku podršku na drugi itd. Na kraju smo se odlučili za jedan standard s nekoliko manjih varijacija, ovisno o tome prikazuje li se cijena na javnom dijelu ili administrativnom dijelu web stranice.

Nakon što smo izvršili početnu implementaciju, naš je hosting provider ažurirao našu PHP verziju sa 7.2.15 na 7.2.16, a output formatora cijena se promijenio. Naša je istraga pokazala da je ekstenzija PHP intl sada spojena s mnogo novijom verzijom libICU-a (ažuriranom za gotovo deset glavnih verzija), koja je usto imala u paketu mnogo noviju bazu podataka Unicode CLDR.

Zato smo morali poboljšati našu implementaciju i dati joj mogućnost forsiranja nekih mogućnosti formatiranja (poput razmaka, položaja simbola valute i izgleda simboli valute  – na primjer u intl bump simbolu valute za Hrvatska kuna promijenila se iz “kn” u “HRK”) kako ne bi postala ovisna o verzijama PHP intl / libICU na kojima se aplikacija izvodi.

Promjenjive značajke (zastavice) i konfiguracija instanci

Zajedničkim naporima naših programera Back-enda i Front-enda izgrađen je sustav u kojem su varijable konfiguracije Back-enda transparentno dostupne build pipelineu Front-enda. Podskup parametara konfiguracije instance kompajlira se u Back-endu u JSON datoteku koju čita build proces Front-enda. Izlazni snopovi CSS-a i JavaScripta stoga su prilagođeni i automatski optimizirani za svaku instancu na temelju konfiguracije instance i zastavica značajki. U Back-endu se značajke mogu uključiti ili isključiti u konfiguraciji koja je postignuta korištenjem paketa Flagception.