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, Barry Michael Doyle shares how he built an OpenAPI JavaScript Wrapper with Typescript definitions, the goal being to get up and running fast so that he could build cool things without reinventing the wheel when it comes to managing access tokens. After all, a low barrier to entry = happy devs! Check it out here.
Click here to download Barry’s presentation slide deck.
Check out his GitHub repo here.
Transcript of the demo
Barry [23:57]
I'm going to quickly demo the JavaScript wrapper that I built for the OpenAPI. I did it on Sunday afternoon. But first, who am I. You guys heard my intro earlier. I'm Barry, I'm a full time React dev at Universal Healthcare. The reason I built this wrapper is because we're probably going to build a lot of front-end apps with this and I didn't want to reinvent the wheel all the time.
Barry [24:22]
And I figured that if it's going to get me up and running faster with different little apps, it will get everybody else up and running faster with different little apps. It also lowers the barrier to entry, hopefully, other devs, like me, will be happy. And the cool thing about it is that it manages the access token, so, I'll fetch the access token, and if your access token is about to expire it will refresh it, that's pretty cool.
Barry [24:52]
Let's hop in quickly to see how it works. As a developer, it is quite easy for you to import a class, and you run a configure function – in there you slap your client ID and your secret. Once that's done, the class is running, and it's got your API key set up, your access token, and then you can easily call functions to fetch data, I'll go through that in the next slide.
Barry [25:17]
And then the wrapper. The nice thing about that class is, it's going to get your access token and keep it up to date. Like, when it's a minute away from expiring, it will fetch a new one. I could probably change that to 30 seconds, but the access token lasts for about 30 minutes. It's not like it's always going to be used but it will solve those dodgy edge cases.
Barry [25:38]
Another cool thing about it, is you don't have to implement something on the front-end to wait for the access token to be received before running the fetching functions because the class will kind of queue up those functions for you after the access token is configured. Even if you reconfigure things, it will wait for the new access token for those new credentials before running functions.
Barry [26:04]
That's all handled by the wrapper, which is great. And usage is very simple. You just import the API from Investec OpenAPI. I've deployed this on the NPM registry. It's an NPM package, so you can get it straight from there. You can import it as something else, it doesn't really matter. I just call it API because it's short.
Barry [26:28]
And there you can see, the API.configure, that takes an object with parameters. It takes the client ID and the secret. The proxy URL is for if you want to get around the CORS issue stuff. It's the easiest way to deal with it. That Heroku app is just something I spun up randomly to work as a proxy server. It just slaps it in front of the API, like a URL.
Barry [26:57]
That way, you can actually call stuff from the browser. Otherwise, your browser is evil and hates you. It's like the horrible doom of front-end devs. But you don't need this if you're using it for React Native or some other JavaScript mobile framework. This will work with all JS frameworks and, I've got the Typescript definitions there as well.
Barry [27:21]
At the moment, it does everything the OpenAPI does. You can get accounts, it will return you the lists of your accounts as the API returns it. Get account balance, you just add an object with the key of account ID, put your string in there. Get account transactions, the same as the balances.
Barry [27:40]
I have actually put in the two date ends from there, I stuck that in yesterday. You can add those parameters to the account transactions API. I'll try to keep this wrapper up to date, according to the docs. At the moment, I'm slightly ahead of the docs, which is cool.
Barry [28:02]
Again, just how it works, as you can see on the left, the configure function method is super straight forward. It just sets all your stuff for the wrapper, and then it calls the get access token function. Then, on the right, you can see there's a get token action function. Firstly, that check configure is making sure that the client ID and secret aren't empty in case where you aren’t using Typescript and Typescript didn't shout at you to be better.
Barry [28:31]
At the end, once it's got the access token, it kind of puts it in a recursive loop. It will set a timeout and then again take the expiry date, well the expiry time stamp, and then 60 seconds before that it reruns this get access to the token.
Barry [28:52]
So, very straightforward. There are ways for you guys to get involved. I've seen Adrian has already got involved, which I really appreciate. I've never used deno, but I do see it being used now. It's a possibility, which is great.
Barry [29:10]
Here are some of the challenges I encountered. The horrible things that happened were that I had CORS errors when I first tried to run this. The only way around this is to slap in a proxy URL. So, I made that an optional parameter on the wrapper. Currently, it's hosted on some free Heroku app. It might be nice to have some dedicated hosts there because I think if you don't use it in a while, as Heroku apps do, they take time to spin up, so the first time you run it, you'll have some loading time.
Barry [29:42]
So, if we had some dedicated thing there or some other solution around these CORS errors, then this would be more useful for production like things. I also suck at writing README files, so, if people want to help me make my README files pretty – all the documentation is there, I just don't format it well. It's like a terrible first impression for a front-end developer.
Barry [30:07]
But that is what it is. As I mentioned, this is a little ahead of the docs, but currently the TS definitions are written to match the example responses of the docs. But obviously the responses are slightly different. I don't think anything is missing, I just think there are extra fields.
Barry [30:31]
It would be nice if people could – if someone wants to – otherwise, I'll do it over the weekend – but if someone wants a first issue kind of vibe they could go and check what the actual responses are, and go update the Typescript definitions to match what the actual output is.
Barry [30:49]
You can get in touch with me – I’m Barry Michael Doyle on Community Slack on OfferZen. Pretty much, get in touch with me there because then I have some context of where you know me from. The repo is there – it's also on the GitLab Community Projects page.
Barry [31:10]
If you guys find any issues that need to be resolved, please let me know. They're very much welcome. You can just create a GitHub issue, this is on GitHub. And, if you want to add to it, pull requests are welcome as well. I’m happy to get in touch with people.
Barry [31:29]
And then the next steps. So, I was thinking of building a Swagger like React app that acts as a DEV Sandbox but Adam's project sounds cooler so I will probably do that instead.
Barry [30:40]
And then, the whole point of that is to just, when you have a nice UI to see all your data and stuff it's easier to kind of work with and get ideas of what other projects are doing. I like to help other people get inspired for ideas. I'd like to try a bunch of things.
Barry [32:00]
But along the way, if I can make lives easier for everyone else in the community that's great too. And again, I'm a React dev so if you guys are building stuff with React and have problems and stuff, ask me I'll try to save you some time.
Barry Michael Doyle is a full time ReactJS engineer at Universal Healthcare. On the side, he enjoys building apps and sharing his front-end knowledge with others. He also enjoys jamming guitar, rock-climbing, running and lots of coffee hangouts.
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.