Building a Currency Conversion Tool in Retool

[Music] hey everyone thank you for joining me i'm a guy called joe this is boot trapping tools let's build where we build applications together to help you scrappy bootstrappers out there overcome some of the hurdles that you're facing or just make yourself more efficient now before we dive into today's topic make sure to check out our youtube channel we've got lots of videos up there to talk about all sorts of low code and no code solutions out there including retool google apps scripts data studio as well as many others if you don't see what you're looking for feel free to shoot an email over to feedback at bootstrapping.tools we'll be happy to take a look at that application and possibly make a video just for you now today's topic we're going to be talking about doing currency exchanges in retool via an api so the api that we're going to be hitting is called exchange rate dot host it's a free application or it's a free api that you can use as open source and the only thing that we ask is just you know donate to them just so that they can keep operating and delivering these uh conversion rates everybody who's using their api but enough talk let's go ahead and dive down into it so up on the screen here what we have is the exchange rate dot host uh api service that is available uh they have a really nice site over here um and you know it's got a lot of documentation and it supports a lot of different types the one that we're going to be using today is the convert currency it's located right over here we click on that you're going to see the documentation for exactly what we need to do which is essentially just hit this api endpoint the api.change rate dot host convert and then pass through parameters for from which is the currency you're converting from and then two which is the currency that you're converting to so in this example is converting from us dollars to the european euro going over to retool i have a brand new app that we just found out recently and we're going to be using our sample sales data from one of the other builds that we did recently so within here we have orders data and within that we have the unit sale the quantity of it discount and gross revenue so you don't need to discount so let's go ahead and just hide that all we really want to do is the sales data and then the gross revenue so that's the amount that we're going to be converting now these numbers right now are in usd so we're going to create a way that you can dive into each one and then convert it to a different currency of your choice so one of the first things that we're going to do is let's go ahead and create a new column in here which will open up a modal so over here on your right hand side tray there's a little custom column button you're going to want to click so once you click on that it's going to create a new one custom column find that in your list over here double click on that and then a little pop-up will appear to give you options on what you can do and we're going to choose the column type we're going to set that to a modal so that we can open up a little overlay when we click on it and then that's where we're going to be doing the conversions so the custom column title we can just call this convert and then the calculation is going to be convert actually let's name the column title can convert currency conversion currency conversion and i'll make a little bit more um specific to each one so the column name isn't the same as the actual value within there we could change the color uh of this just to make it more clear but that's fine we can just leave it as is and when you click out of this and then we click on one of these rows a little pop-up is going to appear and that's where we're going to be putting our information so let's go ahead and do an insert we're going to insert a text field actually let's not enter a text field let's use a statistic that's going to show our numbers a little bit better so in the search components box up here just type in stat and then the statistic over here is the one that we're going to use so click and drag that over to our modal and then in here there's a bunch of options that we can do we don't need the caption so we can actually say usd because that is the amount that we have here currency and then the primary value for this is going to be the selected row of that table because that's the one that we actually want to display so let's go ahead and just say table select the row.data and then we're going to find the sale which is now the unit sales now we also don't need the secondary value so let's go ahead and just clear that out and what we'll get is the unit sale unit price which is 261.98 we exit out of this we should see it over here for this bush somerset collection bookcase it's the right price put back into this see that go ahead and just copy this down and we're going to use this for our gross total so our gross revenue and then within the primary value we're going to set that to gross revenue now we have the exact amount let's make this wider because that's going to be a pretty big number in some cases and what we'll do now is we're going to create a selector that you can select the different types of currency that you want to exchange into so in the insert let's add a little divider just to make it nice and clean so we'll add it right underneath the unit price and the gross revenue of the existing and then we'll add a drop down value over here which is just to select we'll put that right over here so what we need to do now is we're going to have to figure out all the currency symbols that we want so let's say currency code and because we don't actually have all the currency code just yet we can actually get it from the api so going back over to our api documentation right here we are going to use the convert currency as the main thing that we use but there's also this option for supported symbols when you click on that it's going to give you the end point to actually get all the available symbols that this api service supports so copying that let's go back over to our retool app and then down on the bottom over here where it says new let's create a new query it's going to be a resource query and then within the options over here we're going to select an http uh request so scrolling down where is it here we go rest query rest api so once we select that it's going to be a get request we're just going to paste our url endpoint over there and let's preview it make sure that we're getting the right data it's in here we're getting a bunch of information on it let's make this a little bigger for everybody you can see that within each one we're getting symbols and then they also have a little message here that you know if you'd like to back in just donate just donate them like a dollar or i think they're european so maybe like a year or two help them buy a coffee uh besides that symbols so each symbol we can get these are actually the only ones that we want so these are exactly how we're going to pull it out so closing this out over here what we're going to do is we're going to add in a transformer within here and that transformer is how we're actually going to get the information that we want in order to actually pull the currency symbols that we're going to use in that drop down so within the transformer click on the enable and it's going to return a bunch of this stuff we're going to do is we're going to say the symbols are equal to the data dot symbols so before we do this let me just return the data and show you why we're doing data.symbols so within this data set the place where we're getting the symbols is just on the first level so we can just do data.symbols and then within each one we're going to grab those keys so now that we have data.symbols we're going to say return object dot keys symbols all right and what this is going to do here is it's going to iterate through all the available keys within the symbols variable within the response and then give us all those keys back so if we run this we should only see the currency codes just the usd the eur and the etc just like that this displays in a nice little array for us and there's a lot of different codes in here so this is exactly what we want let's go ahead and save this and then let's call this currency symbols okay minimize the tray again and then within our selects our drop down over here click on that and that's going to give us all the options on the side and what we'll do is double curly bracket we're going to do currency symbols.data it's going to give us all the data that we have from that api call so with that saved when we click on this we should see all the different symbols which is exactly what we want so let's go ahead and actually rename this component so that it reads as currency codes and we're going to reference that a little later on so now we're going to add in more statistics so this is going to be the ones that we convert into place that right here make that a little bigger and then we can remove the secondary value we're going to replace that in a bit let's make the label of this convert it sales convert it unit price all right and then the caption now this is where we're going to use that symbol i'm going to say currency codes dot value this is not selected right now so when we select let's say let's select your the euro here so it's going to display dynamically you see over here it's going to display whatever we have selected in this area here so if we select another one cny is going to update let's go back over to the euro because we kind of know what the conversion is going to look like there all right so zoom back out let's copy this and then we make this one for our gross revenue here a little misaligned but no problem and we'll do converted gross rev all right so now this is where we're going to dive into actually converting the the values so in order to do that we're going to have to create a query a resource query for hitting the api for that conversion so we're going to go ahead and click on the new icon and then do resource query and then going back over to the api documentation click on the convert currency and let's go ahead and just take this copy this and then paste it right into the get request and now retail is going to be smart enough to actually notice that there are two parameters one for the from and one for the two it's currently just marked as usd and euro right now we'll we're going to change that later so that as we change the selection it'll just update that but for now let's let's actually just run this so that we have some value back and we'll call this exchange rate api right api and then we can do underscore convert all right so when this is ran there's some values in here and that's how we're going to map it let's bring this back up so within here there is a query which is what we called and then there's a result value the result value is what we actually want to use so we're going to take that and then we're going to apply it to the the statistics components that we have up above where we do that we also need to pass through the amount so this amount is going to be the amount that we want to do and so over here in the documentation it's just optional you can set the amount but we want to do it to the sales unit and also the gross revenue so because we're using two we're going to use an open-ended variable here so we're just going to say amount to convert and that's not going to equal anything right now because we have to actually set it so in one of our uh next uh scripts where we're going to actually call this api endpoint and then pass through the amount to convert as an additional scope to it when we trigger this query so we're going to leave this like that and then let's actually just go ahead and quickly run it actually no it's not running yet let's update this uh we're gonna use select the currency values so that's uh what is it called currency codes within s so it's going to be double curly bracket currency codes dot value and that's currently set to the euro all right so go ahead and save that it's probably going to throw an error because we don't have any amounts but that's okay because it's a no uh it's a whatchamacallit optional so we have a result as null so no errors and now what we're going to do is we're going to start calling the the query uh with the scripts so we're going to create a new one let's say javascript query and then within here this is where the fun begins i'm going to get the amounts and then we're going to set those amounts to the unit price and the gross revenue that is generated so that statistic one is statistic two i'm going to just type in statistic 1 that value and then statistic 2 that value and now this is uh what we're doing as an array so that it makes it easier for us to actually call it without having to call it multiple times we're just going to use one piece of code for this so down here what we're going to do is we're going to say var conversions equals to the amounts that map so what this is going to do it's going to go through all the values that are it's going to map that over so that we can use each one or or make make an action or take an action against each value that's in this array the amounts array i'm going to say amount that arrow function and we're going to say return the exchange rate api convert dot convert i'm going to trigger it and within this trigger we're going to say additional scope and within that we're going to say amount to convert and that's going to be set to the amount just listed up here that's how we're going to reference that and what this is going to do is it's going to say for each value in this array make this or take this action for it all right and now let me see here i think this is actually extra we don't need that it's up here actually bring that down make this a little neater all right now when this runs though this is this is not finished yet because if it runs it's only going to give us back um a certain amount of data but what we want is we want the both values to come back so what we have to do is we we have to do a promise and we have to promise all those conversions and then return a value for each one so over here let's just do a return statement and then we're going to write promise all and that's going to be set to the conversions that we ran and then within that we're going to say then data so data is just generic we're just doing that it's a little easier to do it and then within that we're going to sorry i need the curly brackets over there we're going to do is we're going to return an object and that object is going to be converted sales i'm going to set that to data 1 because that's the first position within the statistics within the amounts that we made then we're going to set the converted gross revenue to the other one so data one position one which is the second place the second position within the array so now that we have this when we run it what we expected to happen is it's going to give us back the converted values of this unit price to 261 and the gross revenue which is 28.39 so let's preview this hopefully we don't get any errors but looks pretty good so we're getting a bunch of uh queries and keys and stuff over here because we actually need to update the exchange rates api.convert to only give us back the result let's go ahead and save this for now and then going back over to our exchange rates api we're going to set up a transformer just like we did for for the currency symbols and then we're going to say return data dot result we don't need all these comments up here either what this is going to do is it's going to provide us back with the result because this is an amount to convert we're not going to see it in the in the output here but that's okay go ahead and save and run this going back over to this let's actually rename this um it's always good and practice to rename this what's called this trigger converter let's go ahead and preview this and now we can see that in the results we're just getting the converted sales as the amount for the euro and then the converted gross revenue in the amount of euro based on the numbers that we have up here so this is looking really good now uh the next step that we want to do is we want to update our statistic numbers over here so that it represents the amounts that we want to show so the converted unit price instead of saying primary value is this default 7552 we're going to say uh exchange rates api wait no no not that one trigger converter dot data and then we're going to say dot converted sales uh wait inverter oh we have to run this run this first and then yeah there we go so now we can get converted sales that's going to display that number and then we'll do the same thing over here for our converted gross revenue so double curly bracket trigger converter dot data dot gross revenue so now that this is displaying this looks pretty good clicks to another one you're going to notice that these upward ones don't change with this one so we want to also create an event handler here so whenever you select a new row that also updates the conversion that we're doing and while we're doing that we might as well also set the value to zero as it actually makes the updates just so the user doesn't get a little confused here so the way that we're going to do that is we're going to create a handler that we're going to use for the actual um data within this modal over here so go ahead and create a new resource query oh sorry not a new resource query ignore that we're going to that we're going to create a new javascript query and then within this we're going to say statistic three which is this guy over here the converted unit price and then statistic four would be the converted gross price gross revenue and we're going to say clear value that's a function so we have to add the little open and close parenthesis in there and this statistic for that clear value that way whenever this runs it's going to clear those values out first and then after that what we're going to do is we're going to say trigger converter dot trigger and then that's just a regular function super easy and we'll call this converter handler all right so we don't need this table anymore this tray so going over to our table clicking on that i'm gonna go down over to where it says event handlers over here and add a new one and then on the event that a row select change occurs so only when you change the selection let's trigger the query convert handler so x out of this as we do this we should see if it turns to zero and then it converts it by hitting the api and it'll display the latest results so try one more time it's going to convert different things and then that's going to change it to 12 and 25. so we're not quite done yet there's one more thing we have to do and that's going to be for this drop down we're going to add another event handler to it and we're going to say on change also trigger that converter handler so now when we have this we wanted to say change uh the currency to i don't know what's a good one how about british pounds so gbp it's going to clear those out update it run the api call and then bring back the results which is 10 59 for 1462 and 21.18 for that if we click on another row it's going to do the same thing clear it out and then refresh that and if we change this back over to arrows it should just update it for us so we select that converts to zero and then makes the conversion via the api call but that's essentially how you're going to get exchange rates uh uh and exchange a currency exchange calculator within your retool app it's going to be using this api which is exchange rate dot host it's free so if you do like what they're doing here and you want to support them just go ahead and donate it really helps people like this who are giving back to the community um keep the operations running without having to charge us for it but by the way this is how you're going to do it if you did run into any issues feel free to drop a comment in the section below we're always happy to help so don't be shy uh and of course if you did like this video make sure to hit that like button it's the best way to support this channel and help ensure that we can continue making content for you it also helps others scrappy bootstrappers out there find videos just like you did and learn how they can improve their business or their operations without having to break their budget or scale their head count also we've got lots of videos coming up so make sure to hit that subscribe button and also the bell so you get notified when we release the next video of course i'm a guy called joe this is boot wrapping tools let's build it's been a pleasure and we're out you

Channel: Bootstrapping Tools

Views: 73

Keywords: Bootstrapping, Business Intelligence, app building, automation, currency calculator, currency exchange, currency exchange calculator, exchange rates, exchange rates calculator, internal apps, low code, low code application development, low code development, low code platform, retool, retool api, retool app, retool demo, retool guide, retool tutorial

Id: 34WL-y58cE8

Length: 24min 30sec (1470 seconds)

Published: Tue Nov 09 2021