In (mikro)betelsysteem ûntwerpe en ymplemintearje

Gearfetting

Online betellingen binne no wichtiger as ea, no't bedriuwen te lijen hawwe fan it COVID-19-firus. Dat driuwt myn klanten om nije manieren te sykjen om online jild te fertsjinjen. Ik haw in (mikro)betelsysteem ûntworpen en ymplemintearre. Dit berjocht giet oer ienfâld berikke troch yngewikkelde útdagings op te lossen.

Folsleine tekst

Nije technology begripe

As ik nije technology en apps ûntwikkelje, besykje ik my altyd yn te tinken hoe't it it bêste wurkje soe. De maklikste manier om dat út te finen is it produkt foar dysels te ûntwerpen. Krekt sa't Steve Jobs Apple harren presintaasje-app, Keynote, foar himsels ûntwikkelje liet. It is ien fan syn bekende grappen oer dat hy in ûnderbetelle betatester wie

As do it produkt foar dysels ûntwerpst, tink dan oan wat do echt, echt, wolst. Foar my betsjut dat it allerienfâldichste ynteraksjemodel dat mooglik is: ik wol dat myn software ienfâldich en maklik is.

Gebrûksgefal: keapje my in kofje

Om de technology foar betellingen te ûntwikkeljen betocht ik it gebrûksgefal fan in "keapje my in kofje"-knop op myn website. As it goed wurket, kinne minsken it brûke om har wurdearring foar dizze blog sjen te litten troch in kofje foar my te keapjen. Ik tink dat dit gebrûksgefal in perfekte útdaging is om in (mikro)betelsysteem te ûntwerpen (en te bouwen).

Ideeën útwurkje

Foardat ik ien rigel koade skriuw, ûntwerp ik software faak troch ideeën mei de hân út te tekenjen. Ik fyn it kreative proses fan tekenjen nuttich om ideeën, yndielingen en prosessen te ferkennen. It is ien fan de redenen wêrom't ik sa graach op in tablet wurkje: troch digitaal te tekenjen kin ik fluch ferskate ideeën ferkenne, troch se te kopiearjen en te plakken yn meardere ferzjes.

In prototype bouwe

As do ideeën foar dyn brûkersynterface ferkend hast, is it tiid om in prototype te ûntwikkeljen. As do in prototype bouwst, kinst de brûkersynterface op ferskate apparaten testen en sjen hoe't it derút sjocht en hoe't it oanfielt.

By it prototypen sjoch ik faak nei de ûntwerpskets wylst ik de earste ferzje programmearje. Op iPad kin dat mei split screen, dêr't ik de ûntwerpskets krekt neist myn koade sette, mei VIM yn tmux oer Mosh mei de briljante Blink app foar iPadOS. De kofjekop makke ik mei Picta Graphic for iPad, in prachtige tekenapp dy't nei fektorôfbyldings (SVG) eksportearret.

Frontend-ûntwikkeling

De folgjende stap is in folslein wurkjende brûkersynterface te ûntwikkeljen, mei knoppen dy't wurkje. By de ûntwikkeling moatst faak útfine wat der bart, bugs opspoare en meganismen finetune. Ik brûk de Inspect Browser foar iPadOS om in wurkjende miniatuerferzje fan de touchscreen-ynterface krekt neist myn koade te hawwen. Sa kin ik de wurkjende brûkersynterface fluch testen en perfekt meitsje.

Backend-ûntwikkeling

In oare krúsjale stap is it ûntwikkeljen fan de backend-technology om online betellingen klear te meitsjen en te folgjen. Dit is server-side technology dy't de kommunikaasje ôfhannelet tusken de frontend-brûkersynterface (de website) en de betelprovider (banken, kredytkaarten, Apple Pay, ensfh.).

It ûntwerpen fan de backend-server is meastentiids wat abstrakter as it ûntwerpen fan in (sichtbere) frontend-brûkersynterface. Ik fyn it tekenjen fan UML-sekwinsjediagrammen tige nuttich om út te finen hokker API-oanropen yn hokker folchoarder barre moatte. Sekwinsjediagrammen meitsje programma-ynteraksjes yn tiidsfolchoarder sichtber.

Do sjochst trije kolommen yn it sekwinsjediagram fan it betelproses: frontend, backend en betelprovider. Elke kolom stiet foar in oare kompjûter dy't mei de oaren kommunisearret. De frontend draait op it apparaat fan de brûker, de backend-server draait op in VPS dy't ik sels behear en de betelprovider is in eksterne server. De brûker docht wat op de website troch op de knop "keapje (my in kofje)" te klikken, dat set in keatling fan API-oanropen yn gong dy't fan rjochts nei links streame.

De "backend-server" is ferantwurdlik foar it útrekkenjen fan it bedrach dat de brûker betelje moat. Dat wurdt op de server útrekkene, net yn de client, om te foarkommen dat kweawillige brûkers de priisberekkening manipulearje kinne (want frontend-technology kin fia de webbrowser manipulearre wurde).

In betelsesje wurdt taret troch de betelprovider te ynformearjen dat de brûker in betelling fan in bepaald bedrach dwaan sil. Dit proses brûkt in geheime API-kaai, wêrmei't de betelprovider wit nei hokker bankrekken de betellingen geane moatte. De betelprovider stjoert in betel-URL werom, dy't brûkt wurdt om de brûker troch te stjoeren nei de eigentlike betelside.

De betelprovider dy't ik brûk is Mollie, in Amsterdamsk bedriuw mei in fantastysk betelplatfoarm. Harren API's binne goed dokumintearre en se leverje packages om harren betelsysteem maklik yn dyn backend-server te ymplemintearjen.

Yn oerienstimming mei myn oare backend-servers haw ik derfoar keazen de backend-server yn NodeJS te ymplemintearjen. It draait op praktysk alles (fan in lytse Raspberry PI oant grutte kompjûterwolken). Alternatyf kinst PHP, Ruby, Python of ien fan de oare beskikbere packages brûke. De Mollie API reference jout detaillearre ynformaasje oer de wearden dy't do ferwachtsje kinst.

Asynchrone statusfernijingen fan betellingen

Net folle minsken beseffe dat it opfreegjen fan de betelstatus in asynchroan proses is dat ferskillende statussen hawwe kin. Yn in perfekte wrâld witst do daliks oft in betelling slagget of mislearret. Mar troch de ferdielde aard fan online betellingen, wêrby't backends mei ferskillende servers (banken, kredytkaarten, ensfh.) kommunisearje, witst nea krekt wannear't in betelling klear is.

Tink oan situaasjes dêr't in brûker de betelside slút, syn of har apparaat sûnder tafersjoch lit, of dêr't in bank in steuring hat yn har online bankieren. It bart, en it is dyn taak om de backend-server sa te ûntwerpen dat dy statusfernijingen fan betellingen apart ôfhannelet fan it primêre ynteraksjeproses fan de brûker.

De betelprovider ropt in webhook op by ús backend-server. Dy leveret in berjocht lykas "Sjoch, der is wat feroare oan betelling XYZ". Dit berjocht seit allinnich dat wat feroare is, it seit net wat de nije status is. Dat is om feiligensredenen: oars kinne kweawillige brûkers de oanroppen fan ús webhook nei-apje. Yn it plak dêrfan freget ús backend-server de eigentlike betelstatus op fia in feilich kanaal mei ús geheime API-kaai. De betelprovider stjoert de betelstatus werom, dy't dan troch ús backend-server ôfhannele wurdt. Ôfhinklik fan de betelstatus wurde passende aksjes nommen, lykas it ferstjoeren fan e-mailmeldingen of it begjinnen fan de levering fan guod.

Fullstack: frontend en backend kombinearje

De lêste stap is it ferbinen fan de frontend mei de backend-technology, sadat it hiele proses wurket. Dit is wat minsken "fullstack-ûntwikkeling" neame, want do wurkest oan it hiele systeem. Fullstack-ûntwikkeling is in oar soarte fan keunst dy't mar in pear ûntwikkelders echt behearskje; it freget dat do tagelyk oan meardere einen wurkest (debuggen en ûntwikkelje), faak yn ferskillende programmeartalen tagelyk!

Yn de praktyk betsjut dat datst ferskillende dielen fan it programmearjen yn de gaten hâldst en sjochst oft se goed gearwurkje. Server-logs besjen wylst do besikest in betelling te dwaan mei de nij makke frontend-technology. It is lestich, mar ek hiel beleanjend, want it resultearret yn in wurkjend produkt!

De resultearjende "keapje my in kofje"-knop is in skynber ienfâldich proses fan 3 stappen foar de brûker:

• stap 1: klik op in ienfâldige "keapje my in kofje"-knop, gjin yngewikkeld bestelformulier, gjin ergerlike captcha-koade: gewoan ien knop
• stap 2: de ynterface wreidet him op it plak út, wêrby't de kontekst bewarre bliuwt en de opsje biedt om in berjocht efter te litten of my meardere koppen kofje te keapjen. Dêrneist wurde oare ynterface-eleminten, lykas de sosjale media-knoppen, automatysk ferburgen om de fokus op de kofje-ynterface te fersterkjen
• stap 3: op it skerm fan de betelprovider kin de brûker de betelling dwaan mei elke beskikbere betelmetoade, lykas Apple Pay. As de betelling slagget, is it tiid om kofje te drinken!

Konklúzje

In betelsysteem ûntwerpe en ymplemintearje is net sa dreech as ienris witst wat der dien wurde moat. Dochs binne der in protte stappen nedich om dat begryp te krijen. Hoewol't myn "keapje-my-in-kofje"-knop ienfâldich liket, moasten der in protte ferskillende ûntwerp- en programmearútdagings oplost wurde.

It belang fan ienfâld is amper te oerdriuwen, mar it is faak hiel dreech te berikken, want it freget in begryp fan alle aspekten fan de útdaging. Om Einstein te sitearjen: "De definysje fan geny is it komplekse nimme en it ienfâldich meitsje." Fiel dy no frij om de knop sels út te probearjen: hy stiet krekt hjir ⬇️