Ligipääsetava e-apteegi ehitamine: React ja Magento 2 käsikäes

31.01.2022 · Tanel Särgava

Avaliku teenuse pakkujana peab Eesti juhtiv apteegikett Apotheka oma digikanalites järgima WCAG ligipääsetavusjuhiseid. Uute ligipääsetavusfunktsioonide lisamine andis ühtlasi võimaluse viia kogu e-poe esirakendus Magentolt üle Reactile.

Ligipääsetava e-apteegi ehitamine: React ja Magento 2 käsikäes
Ligipääsetava e-apteegi ehitamine: React ja Magento 2 käsikäes

Avaliku teenuse pakkujana peab Eesti juhtiv apteegikett Apotheka oma digikanalites järgima WCAG ligipääsetavusjuhiseid. Uute ligipääsetavusfunktsioonide lisamine andis ühtlasi võimaluse viia kogu e-poe esirakendus Magentolt üle Reactile.

E-apteek, mille Opus mõni aasta tagasi Apothekale ehitas, on ketti hästi teeninud. Ajad aga muutuvad ja koos nendega ka see, mida e-poelt oodatakse. Projekti alguseks oli Apotheka otsustanud uuendada oma veebikanalite disaini, täita kõik WCAG 2 AA standardi nõuded ja pakkuda klientidele mitmel turul veelgi rohkem võimalusi.

Nende eesmärkide täitmiseks pöördus Apotheka oma pikaajalise arenduspartneri Opuse poole. Koos Apotheka disainipartneri Trinidad Wisemaniga tuli luua uus WCAG 2 AA nõuetele vastav e-pood, mis täidaks ka kõik disaini ja funktsionaalsusega seotud vajadused.

„Olime hiljuti ühendanud Reacti ja Magento 2 Apple'i Premium Reselleri iDeali jaoks, seega otsustasime ka siin sama lähenemise kasuks,“ selgitas Apotheka arenduse eest vastutav projektijuht Tanel Särgava. „Vana Magento esirakenduse oleks ilmselt saanud päästa, kuid palju mõistlikum oli alustada puhtalt lehelt lähenemisega, mille kohta teadsime, et see töötab pikas plaanis paremini.“

Uue esirakenduse disaini tegi peamiselt Trinidad Wiseman. Nende ülesanne oli leida, kuidas ühendada Apotheka visuaalne identiteet ja vajalikud funktsioonid ligipääsetavuse nõuetega. Kogu lehe ülesehitus pidi olema ekraanilugejatele hõlpsasti loetav ning vaegnägijatele tuli pakkuda erinevaid kontrastiseadeid.

„See tähendab, et enamikul koosolekutel, kus uusi funktsioone arutati, oli põhiküsimus, kuidas teha see WCAG-iga ühilduvaks. Enamasti leiti lahendus, kuid mitmest ideest tuli loobuda, sest nende teostamine nendes raamides poleks olnud eelarve ega aja mõttes realistlik,“ ütles Särgava.

Ligipääsetava e-apteegi ehitamine: React ja Magento 2 käsikäes

Opuse meeskonna ülesanne oli uus disain Magento 2 ja Reacti abil päriselt ellu viia. Projekti olemuse tõttu pidi e-poe tagasüsteem jääma enam-vähem puutumata: Reacti esirakendus tuli ehitada olemasoleva tagasüsteemi baasil ja Magentot ennast võimalikult vähe muuta.

Särgava sõnul läks teostus üsna sujuvalt, sest algse Magento 2 tagasüsteemi oli ehitanud Opus ise ja lahenduse tööle saamiseks tuli teha vaid väikseid muudatusi. „Muidugi, kui oli valida, kas jätta tagasüsteem puutumata ja pakkuda esirakenduses kehvemat kogemust või teha Magentos kiire uuendus ja pakkuda esirakenduses laitmatut kogemust, valisime viimase,“ lisas ta.

Lisaks paljudele ligipääsetavusfunktsioonidele, mille Opuse arendusmeeskond pidi koodiks tegema, pöörati suurt tähelepanu mobiilikogemusele. Magento 2 ja React sobivad küll hästi väga erinevate ekraanisuuruste ja seadmetega, kuid igas olukorras tipptasemel kvaliteedi pakkumiseks oli vaja veidi lihvida. Kõike seda täiendasid tavapärased kasutajakogemuse ja jõudluse parandused ning tulevikku vaatavad lahendused.

Aga miks React?

Magento on tuntud suurepärase universaalse platvormina, mille tagasüsteem on väga võimekas ja esirakendus samuti korralik. Miks siis lisada sellele React? Nagu ikka, on põhjusi mitu.

Särgava selgitas, et Reacti ja Magento 2 koos kasutamine avab tee paljudele tulevastele uuendustele ja täiendustele, mis puhta Magentoga oleksid kulukad ja aeganõudvad. Ühelt poolt areneb React kiiresti ja pakub iga päevaga uusi võimalusi. Teiselt poolt on osavaid Reacti arendajaid lihtsalt rohkem kui Magento arendajaid.

„See tähendab, et kõiki edasisi arendusi saab teha tõhusamalt, sest ressursse on rohkem,“ ütles ta. „Näeme ka, et Reacti ja Magento 2 liit annab suurepärase jõudluse, mis on ülioluline, arvestades, kui palju inimesi Apotheka e-apteeki iga päev külastab.“

React võimaldab ka põhjalikku prototüüpimist: kõik komponendid luuakse Reactiga, klient vaatab need üle ja kinnitab ning seejärel liiguvad need arendusse. Nii saab klient selgema pildi sellest, mida ta tegelikult saab, ning arusaamatuste ja tarbetute korduste vältimine lühendab turuletuleku aega ja vähendab arenduskulusid.

Kõige selle põhjal võib jääda mulje, et peaosas on React, kuid ka Magento 2 ületab ootusi. Apotheka tegutseb kõigis Balti riikides, seega peab e-pood toetama hästi mitut keelt ja mitut poodi, et iga riigi ostjatele saaks pakkuda kohandatud ja hõlpsasti muudetavat kogemust.

Ligipääsetava e-apteegi ehitamine: React ja Magento 2 käsikäes

See võimekus tuli eriti kasuks Leedus, kus Apothekal oli varem vaid informatiivne veebileht, kuid nüüd saab ta e-poe kaudu müüa ka käsimüügiravimeid. „Selleks pidime ehitama spetsiaalse tugeva andmeturbega vestlusfunktsiooni, mis võimaldab patsiendil ja proviisoril reaalajas suhelda,“ selgitas projektijuht. „Teised apteegid on seal eelistanud patsientidega telefoni teel rääkida, kuid Apotheka reaalajas vestluslahendus, mis ei sõltu ühestki välisest serverist, pakub kasutajakogemust, mis on konkurentidest kaugel ees.“

Nüüd kasutusel olev uus lahendus pakub palju paremat kasutajakogemust, suuremat jõudlust ja tipptasemel ligipääsetavust. „Rääkimata sellest, et Opuse meeskond näitas taas, et pole väljakutset, millega ta toime ei tuleks.“

Tahad liituda meie meeskonnaga? Vaata meie vabu ametikohti. Ootame sinu sõnumit!

Kas saame ka sind aidata? Võta meiega ühendust! Räägime hea meelega.

Võta ühendust

Me soovime katta kõik teie veebiarenduse vajadused, et saaksite keskenduda oma ettevõtte ehitamisele ja kasvatamisele.

Margus Eha

Margus Eha

Tegevjuht, äriarendus