Desèño i implementá un sistema di pago (mikro)

Komprondé teknologia nobo

Ora mi ta desaroyá teknologia i app nobo, mi ta purba imaginá semper kon e lo funshoná mihor. E manera mas fásil pa deskubrí esei ta desèñá e produkto pa bo mes. Meskos ku Steve Jobs a laga Apple desaroyá nan app di presentashon, Keynote, pa dje mes. Ta un di su bromanan famoso tokante dje ta un beta tester mal pagá

Si bo desèñá e produkto pa bo mes, pensa kiko bo lo ke di berdat, di berdat. Pa mi esei ta nifiká e model di interakshon di usuario mas simpel posibel: mi ke ku mi software ta simpel i fásil.

Kaso di uso: kompra kafé pa mi

Pa desaroyá e teknologia di pago, mi a pensa di e kaso di uso di agregá un boton "kompra kafé pa mi" na mi website. Si e funshoná bon, hende por usa esaki pa mustra apresio pa e blog aki dor di kompra un kafé pa mi. Mi ta pensa ku e kaso di uso aki ta un reto perfekto pa desèñá (i konstruí) un sistema di pago (mikro).

Skèch di idea

Antes di programá un sola liña di kódigo, mi ta desèñá software mayoria di biaha dor di skèch idea ku man. Mi ta haña e proseso kreativo di dibuhá útil pa eksplorá idea, formato di pagina i proseso. Esei ta un di e rasonnan ku mi gusta traha riba tablèt tantu: skèch di idea digital ta laga mi eksplorá varios idea lihé dor di kopia/plak nan den varios iterashon.

Protòtipo

Ora bo a eksplorá idea pa bo interfas di usuario, ta ora pa desaroyá un protòtipo. Ora bo konstruí un protòtipo, bo por prueba e interfas di usuario riba diferente aparato i wak kon e ta mira i kon e ta sinti.

Miéntras mi ta traha riba protòtipo, mi ta wak e skèch di desèño mayoria di biaha miéntras mi ta programá e promé vershon. Riba iPad bo por hasi esei ku split screen, kaminda mi ta pone e skèch di desèño mes banda di mi kódigo, ku VIM den tmux via Mosh ku e app brilante Blink pa iPadOS. Mi a krea e kòp di kafé ku Picta Graphic for iPad, un app di dibuhu bunita ku ta eksportá pa imagen di vektor (SVG).

Desaroyo di frontend

Próksimo paso ta desaroyá un interfas di usuario kompletu ku ta funshoná, ku e botonnan ta traha. Ora bo ta desaroyá bo mester sa hopi bia kiko ta pasa, buska bug i afiná mekanismo. Mi ta usa e Inspect Browser pa iPadOS pa tin un interfas miniatura di touchscreen ku ta funshoná mes banda di mi kódigo. E ta laga mi proba i perfekshoná e interfas di usuario ku ta traha lihé.

Desaroyo di backend

Un otro paso krusial ta desaroyá e teknologia di backend pa prepará i sigi pago online. Esaki ta teknologia di banda di server ku ta kuida e komunikashon entre e interfas di usuario di frontend (e website) i e proveedor di pago (banko, tarheta di kredito, Apple Pay, etc).

Desèñá e server di backend ta mayoria di biaha un tiki mas abstrakto kompará ku desèñá un interfas di usuario di frontend (visibel). Mi ta haña skèch di diagrama di sekuensia UML mashá útil ora mi ta purba figurá kua API call mester pasa den kua orden. Sequence diagrams ta mustra interakshon di programa den sekuensia di tempu.

Bo ta mira tres kolòm den e diagrama di sekuensia di e proseso di pago: frontend, backend i proveedor di pago. Kada kolòm ta representá un kompiuter diferente ku ta komunik ku e otronan. E frontend ta kore riba e aparato di e usuario, e server di backend ta kore riba un VPS ku mi ta manehá i e proveedor di pago ta un server ekstèrno. E usuario ta interaktua ku e website dor di klik riba e boton "kompra (kafé pa mi)", i esei ta aktivá un kadena di API call ku ta flui for di drechi pa robes.

E "server di backend" ta responsabel pa kalkulá e suma ku e usuario mester paga. E ta kalkulá riba server, no den e kliente, pa evitá ku usuarionan malisioso manipulá e kalkulo di preis (pasobra teknologia di frontend por wòrdu manipulá via e browser).

Bo prepará un sesion di pago dor di informá e proveedor di pago ku e usuario lo paga un suma spesífiko. E proseso aki ta usa un yabi API sekreto ku ta laga e proveedor di pago sa na ki kuenta di banko pago mester bai. E proveedor di pago ta duna bek un URL di pago, ku nos ta usa pa manda e usuario pa e pagina di pago real.

E proveedor di pago ku mi ta usa ta Mollie, un kompania ku ta basá na Amsterdam ku un plataforma di pago fantástiko. Nan API ta bon dokumentá i nan ta duna paketenan pa implementá nan sistema di pago den bo server di backend sin difikultat.

Na armonia ku mi otro server di backend, mi a skohe pa implementá e server di backend den NodeJS. E ta kore riba kasi tur kos (for di un Raspberry PI chikí te ku sistema di cloud grandi). Òf bo por usa PHP, Ruby, Python òf kualkier di e otro paketenan disponibel. E Mollie API reference ta duna informashon detaya tokante e balornan ku bo por spera.

Aktualisashon asinkróniko di estado di pago

Poko hende ta realisá ku buska e estado di pago ta un proseso asinkróniko ku por tin diferente estado. Den un mundu perfekto bo ta sa direkt si un pago a bai bon òf a faya. Pero pa motibu di e naturalesa distribuí di pago online, kaminda backend ta komunik ku diferente server (banko, tarheta di kredito, etc.), bo nunka no sa presis ki ora un pago lo kompletá.

Pensa riba situashon manera un usuario ku ta sera e pagina di pago, ku ta laga su aparato sin vigilashon, òf ora un banko tin un interupshon ku nan sistema di banko online. E ta pasa, i ta bo tarea pa desèñá e server di backend pa e manehá aktualisashon di estado di pago separá di e proseso prinsipal di interakshon ku usuario.

E proveedor di pago ta yama un webhook riba nos server di backend. E ta entregá un mensahe manera "Wak, algu a kambia na pago XYZ". E mensahe aki ta bisa so ku algu a kambia, e no ta bisa nos kiko e estado nobo ta. Esaki ta pa motibu di siguridat: si no, usuarionan malisioso por imitá e yamada di nos webhook. Na lugá di esei, nos server di backend ta pidi e estado real di pago via un kanal sigur ku nos yabi API sekreto. E proveedor di pago ta duna e estado di pago bek, i despues nos server di backend ta manehá esaki. Segun e estado di pago, ta tuma akshon apropiá, manera manda notifikashon pa email òf kuminsá entregá e produkto.

Fullstack: kombiná frontend ku backend

E ultimo paso ta konektá e frontend ku e teknologia di backend, pa e proseso entero funshoná. Esaki ta loke hende ta yama "desaroyo fullstack" pasobra bo ta traha riba e sistema entero. Desaroyo fullstack ta un arte diferente ku poko desaroyador di berdat ta domina, e ta rekerí ku bo traha (debug i desaroyá) riba varios parti na mes tempu; muchu bia den diferente lenga di programashon na mes tempu!

Na praktika esaki ta nifiká ku bo lo ta monitoreá diferente parti di e programashon, wak si nan ta traha bon huntu. Wak e log di server miéntras bo ta purba hasi un pago ku e teknologia di frontend ku bo a krea nobo. E ta difísil, pero tambe e ta duna hopi satisfakshon pasobra e ta resultá den un produkto ku ta funshoná!

E boton "kompra un kafé pa mi" ku a resultá ta un proseso di 3 paso ku ta parse mashá simpel pa e usuario:

• paso 1: klik riba un boton simpel "kompra un kafé pa mi", sin formulario di pedido konplikó, sin kódigo captcha iritante: djis un boton so
• paso 2: e interfas ta ekspandé na su lugá mes, ku ta konservá e kontekst i ta ofresé e opshon pa laga un mensahe òf kompra varios kòp di kafé pa mi. Tambe otro elemento di interfas manera e botonnan di medionan sosial ta wòrdu skondé outomátikamente pa duna mas fokus na e interfas di kafé
• paso 3: e pantaya di e proveedor di pago ta laga e usuario hasi e pago ku kualkier método di pago disponibel, manera Apple Pay. Ora e pago ta bai bon, ta ora di bebe kafé!

Konklushon

Desèñá i implementá un sistema di pago no ta tan difísil ora bo sa kiko bo mester hasi. Pero ta tuma hopi paso pa yega na e komprenshon ei. Miéntras mi boton "kompra un kafé pa mi" ta parse simpel, e a rekerí pa resolvé hopi reto diferente di desèño i programashon.

Ta difísil pa eksagerá e importansia di simplisidat, ma tòg ta hopi bia mashá difísil pa logra pasobra e ta rekerí ku bo komprondé tur aspekto di e reto. Pa sitá Einstein: "E definishon di henio ta tuma loke ta konplikó i hasié simpel." Awor, por fabor purba e boton bo mes: e ta aki mes ⬇️