Sąskaitų ir mokėjimų programa
Local-first Vue 3 sąskaitų ir LT apskaitos programa su pasirenkamu webedge-db sinchronu.
Dev-storyIššūkis
Mažam sąskaitų įrankiui neturėtų reikėti backendo, paskyrų ar paslapčių vien tam, kad paruoštum ir peržiūrėtum sąskaitą.
Ką darėme
Vue 3 programa, pagal nutylėjimą veikianti tik naršyklėje — klientai, produktai, pardavėjo nustatymai ir sąskaitos laikomi „localStorage“ — su pasirenkamu webedge-db režimu, pridedančiu autentifikaciją ir sinchronizaciją, kai reikia daugiau nei vieno įrenginio.
Rezultatas
Gali atidaryti ir iškart išrašyti sąskaitą be jokio paruošimo, o webedge-db backendą įjungti vėliau nekeičiant, kaip naudojama programa.
Dev-story straipsnis
Kaip buvo kuriamas projektas: Sąskaitų ir mokėjimų programa
Dauguma sąskaitų programų verčia registruotis dar prieš pamatant nors vieną ekraną. Ši veikia atvirkščiai: atsidaro kaip vien naršyklėje veikianti programa be jokių paslapčių ir be backend'o, o sąskaitas, klientus, prekes ir pardavėjo nustatymus saugo localStorage rakte 'bills'. Iššūkis buvo išlaikyti tą beslenkstį demo kelią visiškai nepaliestą ir kartu prijungti tikrą autentifikuotą, kelių vartotojų sinchronizavimo režimą per reaktyvųjį backend'ą taip, kad abu režimai nesusipainiotų.
Skyriai
05
Moduliai
05
Stackas
Vue 3 + webedge-db
Kodėl projektas atsirado
Mažam sąskaitų įrankiui neturėtų reikėti backendo, paskyrų ar paslapčių vien tam, kad paruoštum ir peržiūrėtum sąskaitą.
Dauguma sąskaitų programų verčia registruotis dar prieš pamatant nors vieną ekraną. Ši veikia atvirkščiai: atsidaro kaip vien naršyklėje veikianti programa be jokių paslapčių ir be backend'o, o sąskaitas, klientus, prekes ir pardavėjo nustatymus saugo localStorage rakte 'bills'. Iššūkis buvo išlaikyti tą beslenkstį demo kelią visiškai nepaliestą ir kartu prijungti tikrą autentifikuotą, kelių vartotojų sinchronizavimo režimą per reaktyvųjį backend'ą taip, kad abu režimai nesusipainiotų.
Ką sukūrėme
Vue 3 programa, pagal nutylėjimą veikianti tik naršyklėje — klientai, produktai, pardavėjo nustatymai ir sąskaitos laikomi „localStorage“ — su pasirenkamu webedge-db režimu, pridedančiu autentifikaciją ir sinchronizaciją, kai reikia daugiau nei vieno įrenginio.
Vue 3 sąskaitų faktūrų ir Lietuvos apskaitos programa su pilnai į lietuvių kalbą lokalizuota sąsaja ir LT buhalterijai pritaikytais sąskaitų domeno modeliais. Ji veikia dviem atskirais režimais iš to paties kodo: vien naršyklėje veikiantis demo su localStorage, ir sukonfigūruotas režimas, kur prisijungimas, duomenų atskyrimas pagal vartotoją ir sinchronizavimas vyksta per mūsų savoje infrastruktūroje talpinamą reaktyvųjį backend'ą.
Pagrindiniai moduliai ir vartotojo kelias
Du vykdymo režimai iš vienos sąrankos: vien naršyklėje veikiantis demo, kuriam nereikia jokių aplinkos kintamųjų ar paslapčių, ir sukonfigūruotas sinchronizavimo režimas, apsaugotas autentifikacija
localStorage duomenų sluoksnis rakte 'bills', kuris išsaugo sąskaitas, klientus, prekes ir pardavėjo nustatymus tarp perkrovimų be jokio kreipimosi į serverį
Lietuvos apskaitos sąskaitų domeno modeliai bei pilnai lietuviška sąsaja, PDF peržiūra, katalogai ir ataskaitos
Prisijungimas el. paštu ir slaptažodžiu su privalomu el. pašto patvirtinimu, OTP kodas siunčiamas per WebEdge pašto tarnybą, o Google OAuth paliktas kaip pasirenkamas jungiklis per aplinkos kintamuosius
Duomenų atskyrimas pagal vartotoją, įgyvendintas reaktyviajame backend'e, kad sąskaitos, katalogai, nustatymai ir ataskaitos būtų susietos su prisijungusiu vartotoju — ir griežta taisyklė, kad sukonfigūruotas režimas niekada tyliai negrįžta prie localStorage įvykus autentifikacijos ar vykdymo klaidai
Architektūra ir technologiniai sprendimai
Sukurta su Vue 3, webedge-db, Local-first.
Priekinė dalis su Vue 3 ir Vite, savoje infrastruktūroje talpinamas reaktyvusis backend'as (backend ir svetainė atskiruose portuose) su Better Auth sesijoms ir OTP laiškams, įdiegta į Cloudflare Pages, o vien naršyklėje veikiantį demo galima gauti tiesiog pašalinus backend'o aplinkos reikšmes.
Rezultatas ir pamokos
Gali atidaryti ir iškart išrašyti sąskaitą be jokio paruošimo, o webedge-db backendą įjungti vėliau nekeičiant, kaip naudojama programa.
Tas pats kodas aptarnauja ir be registracijos per kelias sekundes išbandomą demo, ir tikrą apskaitos programą su atskirais vartotojais — abu režimai švariai atskirti ir be tylaus persijungimo tarp jų.
Susiję straipsniai
Toliau skaityti
Susijusios projektų istorijos
Šie projektai turi artimų technologinių arba produkto sprendimų, todėl padeda matyti, kaip tas pats principas veikia kitame kontekste.
Dev-storyCMS
Dinaminis CMS ant webedge-db — turinio tipai, medija, rolės ir vieša skaitymo API, maitinanti mūsų svetaines ir straipsnius.
Dev-storyKalendoriaus rezervacijų platforma
Rezervacijos ant Vue 3 — laisvi laikai, užsakymai, laiškai ir Meet vaizdo nuorodos.
Dev-storyFableVita
FableVita — DI fitneso treneris su lygomis, užduotimis ir nuo sukčiavimo apsaugota apdovanojimų ekonomika.
Turite panašią idėją?
Aptarti projektą