---
title: "In (mikro)betelsysteem ûntwerpe en ymplemintearje"
date: 2020-03-25
language: fy
topics: ["Amsterdam", "design", "iPad", "lemmid-store", "money", "payments", "programming", "server", "tablet", "vim", "work"]
source_url: https://willem.com/fy/2020-03-25_in-mikro-betelsysteem-untwerpe-en-ymplemintearje/
---
# In (mikro)betelsysteem ûntwerpe en ymplemintearje

*Myn blog te jild meitsje mei kofje, Apple Pay en Mollie*

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

## 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 (https://www.youtube.com/watch?v=ViWnJDomhsM)

![Steve Jobs kundiget de Keynote-app oan op MacWorld 2003 en makket in grap dat se foar himsels boud is, as in ûnderbetelle betatester](https://willem.com/global/images/0027da9ce9fa.webp)

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.

![Konseptskets fan de ynterface, mei ferskate opsjes om in berjocht efter te litten en meardere koppen kofje te keapjen](https://willem.com/global/images/b5830cd60667.webp)

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

![De ûntwerpskets (links) wurdt oerset yn in prototype (rjochts) op iPad](https://willem.com/global/images/2d289b8f000c.webp)

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 (https://www.vim.org) yn tmux (https://github.com/tmux/tmux/wiki) oer Mosh (https://mosh.org) mei de briljante Blink (https://blink.sh) app_foar_iPadOS (https://apps.apple.com/en/app/blink-shell-mosh-ssh-client/id1156707581). De kofjekop makke ik mei Picta_Graphic_for_iPad (https://apps.apple.com/en/app/graphic-for-ipad/id363317633), in prachtige tekenapp dy't nei fektorôfbyldings (SVG) eksportearret.

![De kofjekop ûntwerpe mei Picta Graphic for iPad](https://willem.com/global/images/e35470bb82d5.webp)

## 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 (https://apps.pdyn.net/inspect/) 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.

![De brûkersynterface ûntwikkelje mei Blink en Inspect Browser op iPad](https://willem.com/global/images/cddef4803d92.webp)

## 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 (https://en.wikipedia.org/wiki/Sequence_diagram) meitsje programma-ynteraksjes yn tiidsfolchoarder sichtber.

![Skets fan it sekwinsjediagram fan it betelproses](https://willem.com/global/images/a24f596e619d.webp)

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.

![Mollie is in betelprovider dy't in soad ferskillende betelmetoaden stipet, wêrûnder kredytkaarten, PayPal, iDEAL, Sofort, Giropay, SEPA, ferskate bankapps en Apple Pay](https://willem.com/global/images/a04e328d248f.webp)

De betelprovider dy't ik brûk is Mollie (https://mollie.com), in Amsterdamsk_bedriuw (https://jobs.mollie.com) mei in fantastysk betelplatfoarm. Harren API's binne goed_dokumintearre (https://docs.mollie.com/) en se leverje packages (https://www.mollie.com/en/developers/packages) om harren betelsysteem maklik yn dyn backend-server te ymplemintearjen.

![Mollie oanroppe fan NodeJS út mei promise-basearre JavaScript](https://willem.com/global/images/d214aa5c60ef.webp)

Yn oerienstimming mei myn oare backend-servers haw ik derfoar keazen de backend-server yn NodeJS (https://nodejs.org/en/) te ymplemintearjen. It draait op praktysk alles (fan in lytse Raspberry PI oant grutte kompjûterwolken). Alternatyf kinst PHP (https://github.com/mollie/mollie-api-php), Ruby (https://github.com/mollie/mollie-api-ruby), Python (https://github.com/mollie/mollie-api-python) of ien fan de oare beskikbere packages (https://www.mollie.com/en/developers/packages) brûke. De Mollie_API_reference (https://docs.mollie.com/reference/v2/payments-api/create-payment) 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.

![Statusfernijingen fan betellingen ôfhannelje](https://willem.com/global/images/79791152064c.webp)

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 frontend mei de backend-technology ferbine, ienfâldich as 1-2-3](https://willem.com/global/images/acc0ecf42914.webp)

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!

![Tiid om kofje te drinken](https://willem.com/global/images/487f0979a7e9.webp)

## 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 ⬇️