Visi projektai

Sąskaitų ir mokėjimų programa

Local-first Vue 3 sąskaitų ir LT apskaitos programa su pasirenkamu webedge-db sinchronu.

Vue 3webedge-dbLocal-first
Sąskaitų ir mokėjimų programos ekrano vaizdasDev-story
01

Iššū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ą.

02

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.

03

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

01

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ų.

02

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'ą.

03

Pagrindiniai moduliai ir vartotojo kelias

M01

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

M02

localStorage duomenų sluoksnis rakte 'bills', kuris išsaugo sąskaitas, klientus, prekes ir pardavėjo nustatymus tarp perkrovimų be jokio kreipimosi į serverį

M03

Lietuvos apskaitos sąskaitų domeno modeliai bei pilnai lietuviška sąsaja, PDF peržiūra, katalogai ir ataskaitos

M04

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

M05

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

04

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.

05

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ų.

Toliau skaityti

Šie projektai turi artimų technologinių arba produkto sprendimų, todėl padeda matyti, kaip tas pats principas veikia kitame kontekste.

Turite panašią idėją?

Aptarti projektą