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.


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.

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.

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.
Seotud teenused
Müügile orienteeritud e-poed
E-poe arendus Magento, Adobe Commerce'i, MedusaJS-i või WooCommerce'i platvormil: analüüs, UX disain, liidestused ja hooldus.
Ligipääsetavus
Ligipääsetavuse audit ja parandused WCAG 2.1 AA ning Euroopa ligipääsetavuse akti (EAA) järgi.
Magento arendus
Ehitame, arendame ja hooldame Magento Open Source’i e-poode jae- ja ärimüügiks: integratsioonid, maksed, mitme riigi poed, analüütika ja turvalisus ühe partneri käest.
Võta ühendust
Me soovime katta kõik teie veebiarenduse vajadused, et saaksite keskenduda oma ettevõtte ehitamisele ja kasvatamisele.

Veel postitusi
E-poe reklaami uus loogika: märksõna asemel loeb ostja küsimusKui inimene otsib „voodit“, saab kaupmees talle näidata voodireklaami. Kui ta küsib AI-lt, milline voodi sobib kahele pikale ja kerge unega inimesele, peab reklaam vastama palju täpsemale vajadusele. Opuse tegevjuhi Margus Eha sõnul muudab see e-poe turunduses korraga kolme asja: märksõnade tähtsus väheneb, tooteandmete tähtsus kasvab ning reklaami lõpliku kuju määrab üha enam ostja päring.Loe lisaks
Ekspert selgitab: tänast e-poodi ei muuda enam edukaks see, kui palju kellasid ja vilesid see pakkuda suudabOtsus, mis platvormile oma e-pood ehitada, mõjutab ettevõtet aastaid. Opuse tegevjuhi Margus Eha sõnul ei ole täna määrav enam see, kui palju valmisfunktsionaalsust platvorm pakub, vaid see, kui kiiresti suudab see muutuvate ärivajadustega kaasa liikuda.Loe lisaks
Margus Eha: AI võib teie e-poe nimekirja lisada, aga see üksi on juba eilne päevE-poed on viimastel aastatel tegelenud sellega, et nende tooted oleksid leitavad ka ChatGPT-s ja teistes AI-teenustes. Suurte e-poodide arendaja Opuse tegevjuhi Margus Eha sõnul on nüüd aga alanud juba järgmine faas: e-poed peavad aina enam mõtlema sellele, kuidas anda AI-le infot selle kohta, mis tooted täpselt laos on, millal konkreetne toode kliendini jõuaks ja vajadusel isegi seda, millises riiulis see füüsilises poes asub.Loe lisaks