At a Programmable Banking meet-up, Hennie Spies shared his idea of how you could make Programmable Banking accessible to a wider, non-dev audience. Inspired by his three kids, he demonstrated how easy it is to program a programmable bank card using a visual blocking interface.
Transcript of the demo
Hennie Spies 00:00
Guys can you see my screen? Okay, cool, sweet. So, what I'm going to demo is: I was taken a bit by surprise [by this demo] but this was basically for an idea I had . Obviously I've got – not obviously – but I've got three kids under the age of 10. And they are starting to get into, especially from a school perspective, getting into understanding programming and just playing with Scratch, which is a visual block-coding programming language. They're quite enjoying the freedom and the creativity that this affords them. We've also been, I won't say struggling, but thinking about how do we take programming banking a bit more mainstream, almost out of the developer community or out of the guys that do coding for a living or a hobby, and take it to a bit of a broader audience? So, this started off for me to see if I can Scratchify programmable banking. And, ja, I am by no means a UI expert. And you'll see that later in the demo. So this is very raw, but I think it shows the concept and I think it... Milan always reminds me [inaudible]. And it starts off [with] the younguns, if they can get a passion. Yeah, so for me, it's quite dear to my heart, because well, as I say, I've got three younguns. The first thought is to try and get this into the youth accounts, so that the guys can play with it. The stack that I used is an equivalent to Scratch by Google, called Blockly, that allows you to create these visual blocks. But I think the main [reason] I chose that is because you can customise those blocks quite heavily. It transpiles at this stage into JavaScript, because we allow JavaScript on the programmable banking side of things. And for speed of use this morning, for speed of deployment, I used Azure Static Webb Apps to get it deployed and hosted. Okay. 'Coding is today's language of creativity, all our children deserve a chance to become creators, instead of consumers of computer science.' And I think that's really true. The world around them; there's a lot of tech around them. But it's a lot of consumerism, as opposed to being in the front seat driving the innovation and driving the technology. And I think things like Scratch, etc, are taking at least the programmable, or the programming, developing mindset to the kids at a young age. So how does it work? Let me quickly see if I can gooi the demo. Let me just pop that up. Okay, this is completely front-end; it just pulls a couple of libraries from Google Blockly. It started off with a couple of iterations. I'll get to some of the complications, [I think] it's quite difficult to think as a non-dev when solving these issues, because I've been coding for a couple of years. And, ja, you think like a dev. Trying to not think like a dev is sometimes quite difficult. So basically, what you've got is very similar to Scratch. You've got your toolbox on the left-hand side, and then a workspace. And inside the toolbox, there's basic logic components or logic blocks, very similar to Scratch. And it is a drag-and-drop, in terms of logic, in terms of loops, in terms of some math functions, etc. So that's the normal default, out-of-the-box components that you can start transpiling JavaScript into. What I then wanted to do is say, let's take it back to programmable banking. For those who know programmable banking, it has basically got two main hooks: before the transaction gets executed. And after the transaction fires. Before the transaction executes, you've got the ability to decline the transaction or do some other operations within a two-second window, and everything is done via JavaScript on that event. What I did is, initially, just created those two default logics. So when you enable the programmable card, or the programmable banking card, you'll get these two functions. So basically, if I drag that across, for instance, to the workspace, […] it transpiles into exactly what you need for programmable banking. So that's the default, I can then drag and drop, and modify the stuff, log the transaction, return, etc. Okay, then to take it a bit further. So almost a level up in terms of capability. I think the nice thing […] about using Blockly is you can customise those blocks to the nth degree, and especially the wording, so […] that it makes sense in the context. Now I've got logic to say, before [the transaction], if purchases are […] for instance of an amount less than 1 000 bucks, let's say, do allow the transaction, or else decline the transaction. That all transpiles into JavaScript for programming banking. So basically, there's a couple of logic areas. And then, to take it even further, I think when the kids looked at it, they [said], 'Show me some samples, show me some stuff that I can start filling or taking apart.' So I started creating some less and more complex blocks to say, for instance, now, if I purchase an amount of less than 100 bucks from a computer programming store, allow the transaction, and then let's say we want to log that as well. And then we'll decline the transaction, if it's not. So now they can start dragging the stuff across and basically program that card in a relatively non-devvy way. I think that that was the challenge. How do you create the language so that it is intuitive for kids and also older kids that want to program their card? Cool. Up to now, any questions?
Malan Joubert 08:06
This is super cool, Hennie.
Hennie Spies 08:07
I think the potential is… So, obviously this was a couple of weekends to just understand the tech etc. But I think the applications are endless. And I'll get to that in terms of how the community can contribute; how we could potentially make this thing really go live. For instance, I created a little logic block to just send the transactions to ‘if this then that’. That transpiles and uses the environmental variables with the transactions to send that to ‘if this then that’. We can now create any type of, for instance, Slack, pull from the weather app to see if the weather is, so all those types of building blocks that we could create, and people and young people can just drag and drop.
Community Questions
Nick Benson 08:58
Hennie, where do you see this actually sitting in the whole ecosystem of programmable banking? Will it sit in the portal? Would it be a set thing? Where would it actually sit?
Hennie Spies 09:17
When we discussed this as a team. I think it will sit next to the portal, for the specific application for programmable banking. I think one of the challenges that we've got is how does the community or external parties to Investec start contributing into those building blocks and get it curated and vetted etc. So I think this will evolve in terms of the more traction it gets. And the more it's used. It might never be used. But let's put it out there and see if it gains traction.
Nick Benson 09:52
Cool little toolbox.
Hennie Spies 09:55
Cool. So literally at this stage, my kids can literally just copy and paste that into their cards. […] In terms of tech stack, I'll share all these links and the deck. But, basically, I'm using Blockly, which is a Google product. There are a couple of others. Microsoft has got an equivalent; you could use Scratch. And I think the biggest thing for me there was the customisability of those blocks. It comes out of the box with a couple of transpilers, JavaScript, Python, PHP, Lua and Dart. And you can write your own transpilers for that, as well. And I'll go through that quickly. One of the nice things that I came across: they built a Block Factory, using Blockly. So, on the left-hand side, you'll see, for instance, I wanted to create 'just log this transaction'. So you use input variables, fields and types to create a block, it then transpiles back into the definition and JavaScript, and the code stub is generated. So that was, I thought, quite cool, they're eating their own dog food. So using Blockly, to create blocks. I think this toolbar, or the developer toolbox, or factory helped me a lot in terms of fast-tracking, just creating those things. Also you can export all the blocks that you've created; you can export into the files and then put [them] into your workspace. And then you've got, like I mentioned, the workspace on the left-hand side, you can also customise and create it. So it was visual editors that created the actual workspace. Then, […] for those who are interested, how the code fits together. So those blocks are all in. First of all, you've got literally just an index file with how the blocks are set up. Then the two main major from the assets perspective are how those blocks are configured**.** In terms of those custom blocks, remember, they're on the Block Factory, those definitions are in the block file, and I can just just add and change them here. So everything just runs client side. And then in terms of the real heart of Blockly is the transpiling. So for instance, that ‘if this then that’ statement creates the code based on some parameters and variables that you configure on the UI. And then I think that's almost it. Then, last thing, for those who are interested, I just used Static Web Apps on Azure this morning. It's free for personal use. And it was very easy to just take that code repo, publish it into the post and it worked and it was lekker. And that is it from a demo perspective. And I'm going to try and stop sharing. Questions? Comments?
Malan Joubert 13:50
It's super cool. I really like it. […] It's sort of aha moment to see […] hey, it's like programmable banking in block. Somehow that is different when you see it. It's pretty cool. I guess it's visual.
Nick Benson 14:14
But it's actually pretty cool to see the progression of programmable banking over the last few months. It's gone from this hard code – well not hard code – but these coding sort of structures to become even more easily accessible and more easily accessible to everyone. And that really brings home the point of making programmable banking real; kind of making it accessible; and everyone who is doing their part to make this really cool. It's just nice to see the different ways people are approaching to make programmable banking more accessible. So I think it's just cool from [inaudible]…
Malan Joubert 14:49
Hennie? Question from my side; [it's] not really technical, but I'm just sort of interested. Your kids? How do they think about the idea of banking being programmable? Like, do they even know it shouldn't be? Does it intuitively make sense to them that they can change how it works?
Hennie Spies 15:07
Um. Interesting story, for those probably that have got kids. And it's almost similar. The correlation that I'm drawing is: my kids do not understand why my TV can't swipe with the finger. For them, it almost talks exactly to that story. I think they're going to grow up in a world where that is hygiene. Being able to take full control of my life, including finances is, why doesn't it happen? So, I don't think they've ever asked the question, […] but what's the alternative? Because this for them is, I can control the stuff that I have got. Why shouldn't I?
Malan Joubert 16:05
That makes sort of intuitive sense to me. I guess what I'm wondering now is, so I would guess the block format sort of makes sense for them, they can understand that's what I could do. They might come up with a lot better ideas than us. Because their base assumption isn't that it's static; their base assumption will be that it's modifiable. And I guess we can all imagine … we in theory, understand that it's modifiable, but I guess it's hard to change your … as Yoda would say, unlearn.
Hennie Spies 16:37
They will hack it.
Malan Joubert 16:39
They will. I think Carina's got a question for you.
Carina De Almeida 16:43
Just a comment. My daughter is of a very different generation than I am; I grew up gaming in the 90s, when, before the four-eight-six had been developed, we were gaming on XTs in those days before two-eight-six even. Anyone old enough to remember those days? Which is why my hair is green; I deny the grey. But the point is my daughter's 21. And when I told her I have programmable banking, she said, ‘So what?’ Bear in mind, she has zero interest in IT. She's all about medicine and science. And I keep getting her into IT. Because I'm like that's where the money is, my darling. She says, ‘I care about money.’ [Laughs]. But the point is, to her, it's not fascinating or wonderful. And all of us are like, Oh my God, you can [do] programmable banking. This is so amazing. And she's just like, ‘Duh, of course, I can do this myself.’ And so that , Hennie, just makes it delightful that it's so simple for those that are not interested in the trickier or more technical aspects of IT that [they] have the facility to do that. It really is phenomenal.
Hennie Spies 17:59
Thanks for the feedback.
Nick Benson 18:06
Cool, anything else? You think we can move on to the tech roadmap? Oh, wait, I think Rijnhardt's got some questions in the chat here.
Hennie Spies 18:24
I think it's directed to Carina.
Rijnhardt Kotze 18:30
Do you think that if she were to get […] a Scratch-like interface or a visual programming blocking interface, do you think that she would ever become open to the idea of programmable banking? Or is she just like, it's not my wheelhouse. I never thought about automating my bank account. I'm not even going to.
Carina De Almeida 18:54
Yeah, Rijnhardt, I think she will. However, it would have to be digital, completely digital. It would have to be on her platform, because they don't give a crap, you know. They like accessibility on any platform that they have access to. I find I mean, I'm sure some of you may be 21. Yeah, I can't see all the faces. [Laughs.] Makes me feel a little old. But the point is, as long as it's available on her banking platform, and they make it easy, and someone convinces her to try it. I think there's a lot of resistance. 'Oh, no, I'm not an IT person.' But if you can get the kids on the youth accounts and say, 'Oh, try this', and gamify it, because we all know gamification has some value to add in terms of people exploring things, and I think in that case, she might actually enjoy it. It's just to put that hook out there.
Rijnhardt Kotze 19:58
Maybe for everyone else here? Do you think that if a ‘if this then that’ type of approach to online banking is applicable, would that sort of gain traction? Or is it something like a non-starter for us? Just curious. The thing is, these are the things that I'm thinking about, especially from a business perspective, I can think of when salaries get paid, transfer pay-as-you-earn; when an invoice gets raised, transfer that. These are the things that I think of from a business perspective. I don't know if these, from a Blockly perspective, really add another dimension to this.
Hennie Spies 20:48
I think there's definitely. ‘If this then that’ is very, very low code.** **Because this is almost; it is a bit of code; it's a bit of programming, but it's more visual. So it's not really in essence a no-code-like application. But I think the ‘If this then that’ approach definitely, in my view, has a part to play in programmable banking, as well.
Nick Benson 21:23
There was one question from Brett, or earlier on, to ask, ‘I don't know if Investec has a kid's accounts for youth or youth accounts’.
Hennie Spies 21:36
Yes, we do. […] This was a tongue in cheek from my side, as well. Currently programmable banking is not available on those youth accounts. I'm desperately trying to resolve that. So, ja, so there are definitely some. I'll send a link in terms of the documentation, but it's basically almost like a surety account from the parents. So it's linked to the parents' main account, but they've got their own card, their own separate bank account.
Carina De Almeida 22:12
Yeah, my daughter actually took delivery of her card today. Because, you know, she was like, 'No, I don't know if I want to be with your bank. I like my digital bank Tyme'. And I was like, 'You know, Investec has some offerings.' [Laughs]. She's [says], 'But I like Tyme. It's digital. It's convenient.' But I said, 'So is Investec.' [Laughs] So, she actually took delivery of her card, so you may actually convert her.
Hennie Spies 22:37
I'll make more haste in terms of getting programmable banking on youth accounts.
Get involved in the Programmable Banking Community
If you have questions or just want to say hi to the Programmable Banking Community core team, you can pop us a mail and we will get back to you.
If you want to see more from what the community has been up to, you can:
- Join the Programmable Banking community
- Browse the community’s open-source projects
- Read the dev docs
- See more demos
- Read other programmable banking related blog posts
