Every week, we run a meetup for the Investec Programmable Banking community. Developers demo cool projects they've been working on and everyone has the chance to ask questions. If you've been wondering where programmable banking is at, here's your sneak peek!
In this demo, Rendani Dau shares how he built a personal budgeting app to explore the potential of programmable banking. The tech he used to build this app include Spring Boot, Keycloak, Flutter – the Android app.
Click here to download Rendani’s presentation slide deck.
Check out his code repos here:
Transcript of the demo
Rendani [00:04]
My name is Rendani, and I work for Entelect, and I’m placed at Discovery Vitality. I've been there for the last three or four years. I built a personal budgeting app called Sparabox, which just means a piggy bank, and I built this as I wanted to explore the potentials of programmable banking.
Rendani [00:28]
This is a system diagram. I worked with Spring Boot and Flutter, the Android app, and as I work with Java and Spring at work, I figured that would be the quickest to get it up for me. And then I haven't done any mobile dev before, so I asked around, and people said use Flutter. So, I started with Flutter, and then I added a Key Cloak server for authentication, and everything is run on an Oracle database.
Rendani [01:05]
I built a bunch of endpoints to get data. That's one dashboard endpoint that also integrates with the open API. I used Vince's client for connecting to the open API.
Rendani [01:24]
There was just a bug with the Spring one, but I figured what the problem was, but I think you'll get that from Vince later so I will leave that for him. My dashboard gives you a beautiful balance from Investec and then your total budget, and you're spending so far, which is from the transactions that you got from the programmable banking. It gives you your recent transactions and your top three budgets. For the top three budgets, I want to get it to show it to show you your budget with the highest spend. Currently, it just gets the first three items on the list. So still very basic.
Rendani [02:03]
Then here you can get a list of all the transactions. Before the demo, I sent a transaction through so I can take it and categorise it and when I say debit transactions again a category is assigned to it.
Rendani [02:33]
Let me use a different one.
Rendani [02:45]
Yeah, then you can create a budget from whatever category you have your transactions in. You can give it a random amount there – unfortunately you have to keep copying and and pasting in the auth-key.
Rendani [03:05]
So yeah, and then if I pull ‘get budget’, the budget should come up somewhere here. Here we go – the budget is R1000, and I've spent R123 so far.
Rendani [03:26]
On the mobile app, there's no push notification for the demo transaction that I did before. When you click on it, it just takes you to the app. I would like it to take you to a screen where you can categorise the transaction, but that is still in progress.
Rendani [04:11]
I'm still working on this, but this dashboard feeds this screen. It will just give you a summary with your balance, your budget, how much you spent, and how you are doing on your top three budgets and your user transactions.
Rendani [04:30]
If you click through on details, it'll give you a list of all the budgets that you have, and what percentage you have used up from the budget.
Rendani [04:38]
I'd like to make these buttons work so if you click plus or minus, it either adds to the budget or reduces from it but right now they don't do anything. Then if you click on the recent transaction, it will just give you a list of transactions. This has a bad UI design, but yeah, it's my first time doing mobile app design.
Rendani [05:10]
The challenges that I encountered – the biggest one was the mobile app development. Flutter is cool, and it takes a bit of the learning curve out for specific things, but it was cool though definitely a hill for me to climb.
Rendani [05:25]
Another challenge that I have was how to securely store the Investec API keys as currently, they’re stored in plain text on my DB, and I think that's not very secure.
Rendani [05:36]
And then the next challenge that I had was local hosting. So, every single time I log on to the pro banking API, I had to change to my recent IP so that everything still works.
Rendani [05:46]
But yeah, those were the biggest challenges that I had.
Dan [05:50]
Rendani have you heard of this service called NGROK?
Rendani [05:53]
No.
Dan [05:54]
It might help you with the changing IP as it gives you a tunnel with a static domain name, which you can use. You run it on your local PC, and it gives you a domain that routes to your IP address, and you can use that with external services. I'll send you a link.
Rendani [06:11]
Okay, thank you very much, I haven't really heard of that. I'll check that out. Yeah, if you want to get in touch with me, that's my LinkedIn, email, and the code is on GitHub. I want to clean it up a bit before I put it on the community's source control repo, so just look out for that in the future.
Rendani [06:14]
Then next steps, I'd like to add more functionality to the app, so basically use the back-end [rest views] that I've used and I'd like to also possibly hook into the pre-authorisation to decline transactions when your budget is maxed out already, maybe put a flag on the budget to say, do you want to continue or not and find a way to store my API keys more securely.
Rendani [07:00]
That's me. Any questions?
Dan [07:04]
What did you think of Flutter?
Rendani [07:07]
It's cool. Let me open the Android Studio. Most of the UI elements are templates from some other open-source app that I found. But yeah, it was cool to work with. Thank goodness for StackOverflow though, because I had a lot of questions as I was doing this.
Dan [07:35]
Was the UI quite easy to build?
Rendani [07:39]
Most of my elements are copy-pasted from another open source app, so once you get the hang of how things should look and whatnot it gets a bit easier as you go on.
Dan [07:53]
Was there anything on the Investec API, like a new feature that would help you do more with this?
Rendani [08:04]
I'm not ready right now because I haven't integrated all of it. I'm just for now getting accounts and balances going, so I'm not there right now.
Dan [08:17]
Cool. It looks cool. Thank you.
Ben [08:24]
Rendani, did you see Adam’s demo last week?
Rendani [08:30]
What did Adam demo again I'm trying to remember?
Ben [08:34]
Is Adam around? I think if he explains it, he'll do a better job.
Adam [08:43]
I demoed the bridge that forwards the transactions and handles approvals.
Rendani [08:50]
Yeah, I remember that. I'll check that out. The one thing working with Spring Boot was that there was a lot of boilerplate code that I had to write and from the past demos, that I've seen Firebase can take care of a lot of the things that I had to go through. I'm thinking of checking out what other people have done because I had to write a whole of boilerplate code in Spring for this.
Ben [09:15]
I would love to see some mashups. Adam, can you imagine your bridge being used inside this app or adding any functionality to that app using the bridge?
Adam [09:26]
Absolutely. I mean, the whole point is that you can interact in both directions. So, sending approval updates back and usage updates back to dictate approval that's what it's designed for.
Ben [09:43]
Rendani have you had any thoughts around transaction approval?
Rendani [09:48]
Um, yeah, so the only thing I was thinking of was just declining transactions when you've maxed out your budget, but my worry is the small time-space that you have for pre-auths, which for me was a second or two before you had to pop it into [the Git].
Dan [10:07]
We did test something like that. We queried a Google Sheet to see if there was enough in the budget and the network request time was enough to make a call. I think you would be able to do it. You just want to choose a smart failure state, as you don't want it to decline just because the network request failed.
Rendani [10:24]
Yeah, I will definitely check that.
Ben [10:28]
I'm not really a fan of this declining transaction when you're at the checkout because that can be really horrible, but I really do like this discussion that's starting around authorising a transaction. If I'm going to spend R200, and then force people or myself maybe to be a bit more thoughtful and mindful about what I'm spending – especially if I'm going to a place where I have endless amounts of spending capacity, like the Engen. Or rather, the Woolworths at the Engen – not the petrol station.
Ben [11:17]
What was the most fun thing that you learnt or exciting things that were learnt while doing this?
Rendani [11:26]
My biggest exciting moment was the other day when I figured why Vince's rest client wasn't working. You must give the API a unique user agent. Otherwise, it just keeps giving you a 403 forbidden error. I spent a long time trying to figure out what was happening, I ended up installing Fiddler on my laptop and then comparing the requests that Postman sent to the one that Java would send.
Rendani [11:53]
And the only difference that I could see was on the headers with the user agent that the Postman had sent some extra other things, so I just changed to user c[ustomisation, and it worked]. That was an exciting thing for me, but then I think building a mobile app and getting everything to work. It had animations before, but I broke them somewhere along the way, and the animations are not working now.
Ben [12:05]
Sweet.
Rendani Dau is a software engineer working at Entelect. He is currently placed at Discovery Vitality where he works mostly with Java and Spring. He's a big jazz fan and console gamer. When he's not watching movies and binging TV shows, he's learning new tech – recently, this has been Flutter.
Get involved in the Programmable Banking Community
If you’re not part of our beta community yet, sign up and join the fun. You can also see more of the demos from our meetups on our YouTube channel here.
For those of you in the community, check out our GitLab to see more of the awesome projects members of our community are working on. You can also sign up for challenges, where you can help find solutions for real life problems.
For more information, pop me a mail.