Mitmeastmeline tellimisvorm
Tootearendus
Ülevaade
- MVP
- Fokusseeritud esimene versioon
- 3 sammu
- Samm-sammuline tellimisteekond
- Veebirakendus
- Kohanduv tooteliides
- 1 eesmärk
- Esitada korrektne tellimus
Mitmeastmeline tellimisvorm on kohanduv veebirakendus, mis aitab klientidel esitada üksikasjalikke teenusetellimusi veebis. See juhib kolme sammu kaudu: teenuse ja suuruse valik, asukoha ja kuupäevade kinnitamine ning kontaktandmete lisamine enne tellimuse esitamist.
Arendasin rakenduse esimese versiooni (MVP), et keerukaid tellimusi oleks lihtsam täita ning ettevõte saaks tellimuse täitmiseks vajaliku struktureeritud teabe. See keskendub põhilisele tellimisteekonnale ning loob aluse edasiseks valideerimiseks ja tootearenduseks.
Probleem
Ettevõtte omanik tuvastas olemasolevas kontaktivormis kitsaskoha: aadressidest ei selgunud täpselt, kuhu konteiner või big-bag tuleb paigutada. Järelpäringud e-posti teel viivitasid tellimuse täitmist, kõned aga suurendasid töötajate töökoormust ja tekitasid klientidele ebamugavust.
Kliendid pidid teavet kordama ning dispetšerid pidid asukoha üle täpsustama enne selle juhile edastamist. Mahalaadimiskoha täpse asukoha kogumine juba tellimise täitmisel vähendaks lisa koordinatsiooni ja valesse kohta konteineri tarnimise riski.
Parendusvõimalus
Asendada tavaline kontaktivorm juhendatud mitmeastmelise tellimisvooga, kus klient kinnitab täpse mahalaadimiskoha kaardil. Lisada koordinaadid esitatud tellimusele, et dispetšer ja juht saaksid selge asukoha ning järelkõnede vajadus väheneks.
Mahalaadimiskoha kogumine tellimise ajal pakkus jäätmekäitlusettevõttele võimaluse vähendada tellimusjärgset koordineerimist.
Tootekeskne lähenemine
Uus lahendus säilitas senise kolmeastmelise tellimisprotsessi ja e-posti teel toimuva suhtluse, asendades pideva asukoha täpsustamise täpse kaardivalikuga juba tellimuse vormistamisel.
- 01
Muuta asukoht põhifunktsiooniks
Tõsta kaardivaade tellimuse teises sammus esile. Lohistatava markeriga Google Maps salvestab täpsed mahalaadimiskoordinaadid otse kliendi ja administraatori e-kirjadesse, sobitudes sujuvalt senisesse dispetšeri töövoogu.
- 02
Kohanduda olemasoleva töövooga
Pakkuda mobiilisõbralikku vormi (nii eesti kui ka inglise keeles) ning lisada e-kirjadesse klikitavad koordinaadid, et juhid saaksid sihtkoha otse oma nutitelefonis avada.
- 03
Hoida MVP fookust
Luua esmalt kolmeastmeline tellimisvorm ja koordinaatidega e-kirjade süsteem. Hinna automaatne arvutamine jätta esialgsest arendusmahust välja.
Mitmeastmeline tellimisprotsess
Üks täpne asukoht kõigile osapooltele
Aadress viib juhi küll õigele objektile, kuid lohistatava markeriga määratakse täpne mahalaadimiskoht. Süsteem lisab nii kliendi kui ka administraatori tellimuskirjadesse klikitava Google Mapsi lingi, andes dispetšerile täpsed koordinaadid koheseks juhiga jagamiseks.
Tehniline teostus
Põhiline andmevoog on lihtne: klient valib mahalaadimiskoha, süsteem salvestab koordinaadid tellimuse juurde ja saadab e-postiga asukohalingi, mida on mugav otse nutitelefonis avada.
- 01
Kasutajaliides ja asukoha määramine
Kolmeastmelist vormi ja andmete säilitamist sammude vahel juhivad Vue 3, Vite, Vue Router ja Pinia. Mitmekeelsust (eesti ja inglise) toetab Vue-i18n. Google Mapsi aadressiotsing tsentreerib kaardi algsesse asukohta; markeri lohistamine uuendab salvestatavaid koordinaate ning pöördgeokodeerimine (reverse geocoding) tuvastab automaatselt uue aadressi.
- 02
Tellimuste valideerimine ja salvestamine
Node.js ja Express API kasutavad Firebase'i anonüümset autentimist, et siduda tellimused kasutaja sessiooniga. Serveripoolne valideerimine kontrollib kontaktandmeid, koordinaate, teenusevalikut, koguseid, tarnekuupäevi ja kasutustingimustega nõustumist. Kogu info salvestatakse Firestore'i andmebaasi koos serveripoolselt genereeritud unikaalse jooksunumbri ehk viitenumbriga.
- 03
Teavitused ja tarneinfo edastamine
Nodemailer koostab tellimusest eestikeelse kokkuvõtte ning saadab selle nii kliendile kui ka süsteemiadministraatorile. Kiri sisaldab Google Maps Static API genereeritud kaardieelvaadet ja klikitavaid koordinaate, mis avavad seadmes kaardirakenduse. Eraldi automaatset e-kirja juhile ei saadeta – dispetšer edastab täpse asukohalingi juhile ise.
- 04
Tõrkekindel tellimuse esitamine
Kui tellimuse salvestamine andmebaasi õnnestub, aga e-kirja saatmine ebaõnnestub, pakub kasutajaliides võimalust kirja uuesti saata (säilitades algse viitenumbri, vältides uue tellimuse loomist). Süsteem takistab topelt- ja korduvsaatmisi, kui õnnestumine on juba registreeritud. Kui ühendus katkeb ja saatmise lõppolek jääb ebaselgeks, peab operaator enne korduskatset tellimuse seisu käsitsi üle kontrollima.
- 05
Juurutus (CI/CD) ja monitooring
GitHub Actions paigaldab (deploy) kasutajaliidese Firebase Hostingusse ja konteinerdatud taustasüsteemi Google Cloud Runi. Firebase Hosting suunab API-päringud edasi Cloud Runi. Turvalisuse tagavad Firebase'i žetoonide (token) kontroll, päringute piiramine (rate limiting) ning HTML-sisu varjestamine (escaping). Winston edastab isikuandmetest puhastatud (maskeeritud) logid Google Cloud Loggingusse.
- 06
Testimine
Koodibaasi automaattestid katavad andmete valideerimist, kuupäevade loogikat, kaardikoordinaatide ja eelvaadete toimimist, automaattäite (autocomplete) päringute sünkroonimisvigu (race conditions), e-kirjade turvalisust, tingimustega nõustumist ning käivitusaegseid (runtime) turvameetmeid. Firestore'i turvareegleid testitakse Firebase'i emulaatoriga. Need kontrollid täiendavad, kuid ei asenda reaalsetes seadmetes läbiviidavat kasutusmugavuse testimist ega tootmiskeskkonna monitooringut.
Tulemused ja kokkuvõte
Loodud MVP säilitas senise kolmeastmelise tellimisprotsessi, kuid lahendas varasema probleemi, tuues sisse täpse mahalaadimiskoha määramise ja e-kirjades jagatavad asukohalingid. Kahekeelsus, mobiilisõbralik vorm ja klikitavad koordinaadid katsid edukalt kõik olemasoleva töövoo põhinõuded.
Suurim õppetund oli tõdemus, et probleeme tuleb ennetada andmete kogumise hetkel – täpne alginfo hoiab ära hilisema aeganõudva lisasuhtluse ja koordineerimise. Järgmiste sammudena testiksin loodud kasutusvoogu reaalsete klientide ja autojuhtidega ning monitooriksin, kui sageli on asukohta endiselt vaja tagantjärele täpsustada. Neid andmeid kasutaksin toote edasiste arendusotsuste tegemisel.