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, Pivendren Naik shares how he built a component based dashboard configurable by the user, using Azure, .NET Core, ML.NET, SQL and function apps. Check it out here!
Click here to download Pivendren’s presentation slide deck.
Check out the GitHub code repo here.
Transcript of the demo
Pivendren [00:04]
So, originally, I told Ben that I was going to make this a weekend hackathon. And then I started building something. I got to a point, and I think it was Monday evening, I was going through the challenges and I ended up watching the video for the magic mirror thing, and I thought, that is cool and I just started again on a Monday evening. Let me try and build this thing and see what happens. A bit of a risky move but it went well, I think.
Ben [00:42]
I’d love to see that magic mirror in action. I’d love to get one.
Pivendren [00:46]
It is kind of a magic mirror, I guess. My project is a money report/dashboard/mirror. I’m a developer, not a namer of things. As I said, my name is Pivendren Naik. It seemed that I got this complicated name, so like all developers, I came up with an acronym for it, and my project is MRDM now.
Pivendren [01:10]
I wanted to build, basically, a component-based dashboard where potentially you could just build components and the end-vision is that at some point, you wouldn't need to do any code changes to modify the dashboard. You would have a list of coupons on the side you can click on them, drag, and drop. If anyone uses Azure dashboards, it is a very similar concept to that. I watched the video, and that was cool, I got distracted, so I decided to build that. Originally, I was building a chatbot for Facebook Messenger and Slack, and I will finish that project at some point.
Pivendren [02:00]
And just a little bit about me. I'm a software developer in Durban at a company called Derivco. But that's just sort of the day job to pay the bills. If you're in the Microsoft ecosystem at all and you've attended a conference or use a meetup, we've probably crossed paths at some point, for some reason I enjoy speaking at these things. I'm not sure why they still let me on stage every now and then as I am not the best at it, but they let me through.
Pivendren [02:29]
So, my solution is pretty simple. I didn’t really put much thought into this. I just wanted to build something. I already had the Azure function piece of it, so I built the Azure function that goes on the trigger every 10 minutes that’s easily configurable that just hits the open API and gets all transactions and puts it into a database for me. None of this is deployed, and it is going onto a local DB. In the end, it will be hosted in Azure SQL DB.
Pivendren [03:08]
The app I ended up building was using Blazor as the front-end, and I'm using Blazor Assembly this time. I have some experience with Blazor Server, but I thought let me try out Blazor Web Assembly because I didn't really want to be streaming everything or use the streaming model that Blazor Server provides. And then underneath that for connecting to my data store, I’m using Entity Framework Core.
Pivendren [03:39]
Then sort of my last-minute addition that I added yesterday – I was clicking through a few buttons in Visual Studio, and I used the ML .Net builder. I've added some data – it's not the best at the moment because I don't have much data – I’ve only got 130 something transactions that are feeding into this, but it does some regression, and it predicts based on the day (whether it is the 1st, 2nd or whatever) it predicts potentially how much I am going to spend based on previous spending habits.
Pivendren [04:16]
Okay, so let's look at some code. The actual solution is split up into a few things here. I have my function there – that is super simple. I’ll dig into that and some of the hurdles that I ran into building that. And then these two pieces here. My server client is my Blazor application. Most of the logic and endpoints sit here, and the UI bits sit there, and I have a shared one – models and data transfer objects. And then this last one is the actual ML.dot model that I used. And that is what I consume in my server project to do the predictions.
Pivendren [05:16]
And if we start at the function, which is sort of my first integration point, I've got this time tripper here. And I'm not sure what the divide is here – which people use Microsoft stuff as AWS or other cloud providers, but I've been told the comparison is here is AWS lambdas and you can write blocks of serverless infrastructure. For now, I have the setting to run for one minute, it's just my machine set up for tests and stuff. Like I mentioned before, generally, I did not put much thought into stuff.
Pivendren [06:00]
I was going to use Lionel’s client libraries, his .Net client library for this. Then I ran into some dependency injection issues with the latest version of Azure functions – there’s an open GitHub issue that they are working on – so I sort of manually by hand typed everything out. It didn’t take that long, but it’s not the cleanest of implementations. And then here, this piece is a bit interesting as I solved one of the issues which was a bit tricky, not having a unique transaction ID. So this thing runs every minute, and when new transactions come in, I needed to figure out a way to do something different and only add things that exist.
Pivendren [06:48]
Again, not the cleanest as it doesn't scale at all, because if you look at what I'm actually doing in this extension, this link extension that I wrote, I am looking at a DB set. Basically this is my transactions table. And I'm running a query on top of it to see if anything matches that set of things. I chose three different things that are potentially unique, and I will show that to you in a minute. And then, if it doesn’t match that, I add the item in. That is a bit messy because the actual query that I do to determine uniqueness is me seeing if the transaction amount and description don't match, then potentially it’s unique. But I'm sure, in this case, where if you buy the exact same thing – because we don't have time stamps – on the exact same day this will fail. But this was just my quick solution for getting data into my DB.
Pivendren [08:01]
So, this is on the client-side. I didn’t have much experience with this, but when you want to spin up the template project, I had a look at it, and it's very similar to ASP.Net or ASP in general where you have controllers, you have a start-up where you set up your dependency injection, and you just interact with your database, so EF Core, I set up the database context. My design for my DB is pretty simple as now there is no relation, so I have a transactions table and a budget table.
Pivendren [08:52]
And then, for now, I have three very simple controllers. You will see this when I run the project, these supply the data for my graphs or all my individual components. Is there anything else that is interesting here? No, there isn't. And then on my client-side, I wanted to be very reusable in a sense, so I settled on using Blazor components so each one of these is Blazor components and they can be used within each other or anywhere else in this client app.
Pivendren [09:38]
So, I have a budget one for to last 30 days, and I have a weekly one where it compares week-on-week, so this Monday compared with last Monday what my spending habits were. If I were to go into one of these, the front-end stuff is not really my forte, but I attempted it, and surprisingly, Blazor – with the front-end not being my forte and figuring out JavaScript and that ecosystem of libraries and frameworks was going to take forever. So, this stuff is pretty similar and still very C# type stuff.
Pivendren [10:27]
I used a package called Blazorise, which is the material implementation of a bunch of standard components – you get cards, tables, data, grids and that sort of thing. And then Blazor itself you have the regular view stuff there, some C# code stuff here. It has data binding and all that kind of fancy stuff. And then the main page is this dashboard. This is the one that I envisioned would be configurable for users. This is the content of the main page, and you can stack stuff however you want. Blazorise uses FlexBox (I think that is it) for its columns and rows, so I can just determine here, for example 1 to 12, and here I am using 6x6 - so it is equally divided and a 50/50 split. And as I add more components, I will modify it and add things like this here.
Pivendren [11:34]
Lastly, I am going to point out this model. Let me show you how I use that. This controller here is for the budget endpoint and how it works is that I get the current day or the date, for example, the 16th - that is the parameter that I am passing into my model, and then I’m predicting for the 16th day of any month based on previous spending habits. This is how much I am potentially going to spend. It is not very accurate, but the accuracy on that model that I built is actually negative 3. It is usually a range between 0 and 1, so that means that 30% of the time is horribly wrong and not even close to being right. But that will get better as I add more data. And if I had to run this now, it loads.
Pivendren [13:09]
I only have two graphs for now. So this is the last 30 days trend of my spend habits with a predictable spike in spending when the first debit orders is going out. And then there’s the one that I thought would be cool if we could see week-on-week. So, this was last week where I spent R215 on something vs this week I spent R396 on something. As I get more data, this graph will look better over time. The budget stuff is very simple. I have a limit and a start date for a budget. I think I have set it to the 25th, I set a limit of something, and it just does the calculation, and it tells me how much I have left. This last piece here is the one that I was talking, where based on it being the 16th day of this month, based on the previous spend, it estimates I’ll spend R795 today, which I didn’t. But as I add more data to it, hopefully, it gets better.
Pivendren [14:25]
I did notice I am using Edge here – the new version of Edge – the Chrome version of Edge – and I noticed an interesting bug that they brought over from Chrome. For some reason, data binding sometimes breaks here when you’re doing string interpolation. It worked here for some reason, it didn’t work here that is why I have the refresh buttons here for the data binding. It works now, so I am not sure why that is broken.
Pivendren [15:12]
Some of the challenges that I had to overcome –like I mentioned, front-end dev, new-ish tech, which was interesting. A lot of copying and pasting, running samples to see how it will work and to get something working. And then not having a unique transaction ID was tricky and this came up before. It was just interesting trying to work with the data as I was trying to get everything into one central source, so that I could use that going forward as my central data store for everything that I build on top of this. So the chatbot when I am finally finished with it, will still use the same database. As this is Azure specific – there was this thing called Azure Storage Tables, which is Nosql data storage, and it was really cool as it was super cheap and easy to set up. Microsoft has gone and destroyed it because they are punting Cosmos DB now, so they have confused all the packaging and stuff like that. Recently, I spent a couple of hours trying to use that as my back-end data store because it is cheap and fast. Unfortunately, Microsoft wants you to use their shiny new stuff, which is Cosmos.
Pivendren [16:33]
And then I changed the GitHub repo to public a couple of hours ago. You’re welcome to go in there, find all the issues in the code. I’m sure I am not using the dates correctly and using them inconsistently in a few places, or there are calculations somewhere that are incorrect, but you are welcome to do whatever you want to do with this code, I don't have any issues with that. If you want to get in contact with me, all my social details are here – @ErrorNaik on Facebook and Twitter. Luckily, I’m not verified so I didn’t tweet about any Bitcoin things recently.
Pivendren [17:13]
And then next steps. There are lots of bugs. I want to fix those and then next on my list is to get it deployed to Azure. Potentially the app – I might run locally on my machine here as it is easier instead of going out on the internet. There is something that you can do with Azure – you can do a one click deployment in the ReadMe file of the repo. You have this little ‘to-do’ button and you can click deploy to Azure and it can do all the fixes. Essentially, this is a one-click deploy for anyone that wants to use it. You just enter your Investec client ID and secret and any configurable variables that I have in the back-end, and it will deploy, spin up all the resources and get stuff running for you.
Pivendren [18:17]
I kind of started this one and I need to finish it – is having another Azure function where the post-transaction scripts can post out to it and then me figuring out how to do the merge of that. So, the existing transactions and the stuff that is uncleared merged in that data. There’s a bit of data more in there. Then I mentioned a component engine, that will be nice. That will probably be the most difficult piece because I have no idea how to implement it. I just need to research how to make stuff draggable and place them in a grid, and then there are more graph components that I want to build. If anyone has used 22/7 money report, there are a few things from there that I would like to copy, for example, their trend of income vs spend and I want to add a transaction, which will probably also look cool as it will show what I spent the most money on. The item or the description will be there in my face. It will probably stop me from buying games on the Steam sales (hopefully!)
Pivendren Naik is a software developer out of Durban. He got into the industry after attending a hackathon, and has been an active member of the community trying to help others on their journey ever since. His primary stack is Microsoft (.NET and Azure) but he’s always keen to learn something new.
Get involved in the Programmable Banking Community
If you’re not part of our 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.