What is Retool? Low-Code Internal App Builder Review & Tutorial

retool is one of the most powerful low code tools for building internal applications for your team now you might hear low code and think low code no code no code low code it's all the same on this channel a lot of the products that we cover are no code tools because if you're a business owner or a person in operations you have lots of Industry knowledge you have lots of functional knowledge but you probably have a splash of technical knowledge and Technical curiosity and that's what makes tools like air table so popular because you only need to have that splash of technical knowledge to get lot of value from the application retool and low code tools in general are much more technical in nature it's helpful to have some python knowledge some JavaScript knowledge be able to write SQL queries add event handlers and so you might be wondering well what's the value of a low code application if no code applications are so powerful and the reason here is that many people hit a point where their no code application suddenly doesn't let them do exactly what they want to do the layout on the screen starts to feel a little bit constricted you wish something would work a different way maybe the performance of the application isn't optimized for what you're trying to do with no code you're really at the mercy of the vendor to make a lot of these decisions for you with low code it requires additional technical expertise but in exchange you're getting more flexibility for how you build your applications so what we see at automation helpers is many of our clients are perfectly content on no code tools and then some hit kind of this block or barrier after a while and say uh I wish I could do this more Advanced kind of thing and so we're able to help migrate them from a no code solution to a low code solution that takes some technical overhead but again if you're working with a partner or someone with those technical skills you can get a lot of value for what low code offers hi I'm Dan Leman from Automation helpers.com and we help companies like yours get automated with portals apps and [Music] Integrations let's just take a quick look at retools pricing and then we're going to jump into building on retool itself so if we take a look at the pricing they have an awesome free plan you can do everything that we're doing today directly on the free plan itself this is going to give you access to unlimited applications that you can build you've got 500 workflows a month those workflows are going to be like automations or like zaps if you're using something like zapier you've got data storage and there's an internal postgress database where we can actually store our information and you can have up to five users on the platform so when we get into the more advanced plans you can see there's this differentiation of pricing between standard users and end users standard users are going to be the people who are building or editing the applications themselves end users are going to be people who are actually interacting with the applications they're not building the application but they're adding records they're updating it they're performing different actions really that end user pricing is pretty affordable you can see on the business plan you're paying $15 per end user a month that's much more affordable than other no code tools where you're paying like $50 a month for people just to be able to access that application instead on business you're only paying $50 for the users who are actually building the applications and most people are going to be interacting with the applications a couple other pricing differentiators you can see on the business plan you get access to authenticated embedded apps so if you have a product with this Legacy codebase you don't want to be building a dashboard in that tool you want to build it in retool you can embed this directly in your application on the business plan custom react components this is pretty cool if you find that the outof the-box components aren't working for you design your own import them and you can use them in your application for mobile app functionality there's a few different options they've got pwas out of the box you're going to have mobile responsiveness for the apps that you're building and there's also native mobile applications but what that really means is that you're downloading the retool app from the play store or the app store and then you're logging in to get your kind of experience so it's not actually deploying your own app to a given store to be able to [Music] download for workflows I really love the way that this works instead of charging you per task like zapier does or per operation like make does instead a workflow is going to be the entire execution of that workflow so 500 workflow runs a month on the free plan is super super generous for the database retool Provisions you your own postgress database and they don't have any limits to the rows or tables that you can have there's only a storage limit of 5 GB so for those of you who are using a lot of other no code applications that have these really strict limits on number of rows this isn't going to be as much of an issue for you on retool there's really no limit to what you can connect to in terms of other apis and data sources even on the free plan and then you can see there's a number of different security features which you're going to have access to as you go up to those increased plans to get started with retool we want some sort of data that we can put into our database now I've actually started building something in build chip we wouldn't really need build chip with retool but I've already built it here so we're going to use it anyways so for today's use case we're going to work with this idea that I want to analyze data of my competitors on YouTube and I've been storing this information inside of a Google sheet you can see we have 248 records these are all the videos that I have and I want to add another channel to the data so I'm going to come into build ship and we'll test out our call here because we're talking about retool let's go ahead and use rol's own YouTube channel here we'll test this workflow it looks like it ran successfully and if we look at our Google sheet we can scroll down and we can see there's now additional records that have been created around retools own videos when we get logged into retool we can see all the different parts of the retool platform up at the top here so first we have our different apps these are two that I've been working on that we'll be talking about today we've got one for adding our YouTube channels and one for displaying our YouTube videos now the thing that's kind of interesting about these applications are that these are single page applications meaning that if we have different pieces of functionality like managing our channels and managing our videos that these are actually two different applications and we can unite them together with a common navigation but this might be a little bit different of a setup than you're familiar with next up we have resources we've got our database we've got storage that we can use for file storage we've got emails so we can do transactional emails we have a query Library this is where we can build different queries against our data sources that we can use across our different applications we have workflows these are the automations that happen in the background and these workflows feel similar to a make or zappier but they're going to be much more technical in nature there's new form functionality this is going to allow you create external forms for people outside of your applications and last but not least we've got our database which is what we're going to do [Music] next so when you first see your database there's going to be some sample data here here's some sample users and unlike many no code applications where you build a new database for every single project you're doing we really have one main postgress database and we have different tables to store this information because we're not actually having our users interact with this data here they're doing it via the application this is simply storing that data on the back end which means any of the fields that we might add are going to feel much more technical from a database standpoint on the back end so we've got different field types but you can see that this is something that's not quite like an air table where you say oh I'm just going to add a new formula or a rollup all of that functionality is still possible but we're not actually doing that at the database Storage [Music] level so to get started with your own data you can add a table by pressing this plus button we've got a few different ways to create the table we can Define the schema ourselves we can import it from a CSV file which is what we're going to be doing or you can generate the schema with AI now prior to hitting record I had already created the schema here so instead of deleting that I'm just going to import the data that I have but if you have your own CSV file with your own headers it's very easy to import for the first time so let's import CSV into our current table and we'll click and upload our data it's pretty good at being a able to map the different field names as long as we're consistent here and we've got an option where we're saying use the first row as headers and let's import that and there we go we've got our video data imported now I've also added a table for channels and this I didn't even have to do an import for we just put that we have two channels here's the handle for my YouTube channel and then for retool as well and if we take a look at the data again a lot of this is just done as text Fields so I've got title and description which makes sense but then my tags which you might imagine would be a multi select or a tag kind of field again in the backend database it's just stored as text when we get to the front end side of our application that's how we can control how it actually renders so back on our apps page let's go ahead and create our first app and we're actually going to do this from a template now the templates I find more or less useful but this one that we're going to use today is just our basic layout to help us get started now that our app has been created you can see it's pretty simple we've got some navigation items up at the top we've got a table here we've got a container which holds this table and we've got our title from a navigation standpoint in terms of actually using this Builder here we've got our different components you can see there's a ton of different options for components remember you've got that ability to import your own if you've built your own react components you can do it but there's so much to be able to do with the components that exist here next up as we go down the side here we've got our component tree this tells us the different frames and the different components on each page we have our code and this is going to be where we add new resource queries to be able to actually pull information from the database to displayed on the front end and we've got some other items like being able to do a code search and look at our states and check out the history of what we've done right now the data in this table is just dummy data so let's go ahead and connect this to our own YouTube videos to do this we'll click on the code here we'll create a new resource query and then for our resource you can see there's number of different demo resources for us already available but we are going to choose the one from our retool database we're not going to do a whole SQL primer here but you can get started pretty easily and add information as you go along for those of you coming from a no code background you might actually find it easier to switch from SQL mode into a gooey mode because then you can just choose your tables directly and what kinds of actions you want to do this feels a lot more familiar in this case our query is really simple we're just saying select everything from our YouTube videos table let's go ahead and save and run we can see our data showing up down here so that looks good and I'm probably going to rename this to something that makes more sense like list videos then we can collapse this cuz we're not going to use it for now now we can click on our inspector and click on our table and here's where we see all the information about our table we might want to relabel this and now let's connect it to our query we just built so we'll click on demo data here and now we can choose list videos and you can see it automatically match this for us so it's showing the different fields and the different records that we have so let's clean this up a little bit there's some Fields I just don't need like this ID here doesn't add any information for me so let's hide that we also don't really care about the YouTube ID so we'll hide that as well our favorites likes and comments we can hide I don't know what's going on with this channel ID but we can hide that as well okay so now we have some highle information about our videos we can adjust this as we see fit let's make the thumbnail the First Column here so I'll drag that up and the thumbnail itself we don't want to have it just display as a URL so let's go ahead and open that up and instead of being formatted as a link let's have it show as an image now let's adjust the size of our rows so this looks a little bit better we can change the row height from small and we'll make this large cool so already we can format our fields to make this look better on our screen let's do the same for our tags right now it just displays as text we'll open up our tags and we'll change this formatting of string we can search for tag TS in this case it's going to be plural cuz there's more than one tag but that information disappeared from our screen so what do we do well here we have our mapped values and you can see it's kind of recommending or it's got a placeholder for item so let's put that in item in these curly braces now these curly braces you're going to see everywhere because this is where we can manipulate our data and make changes that we need to item is that entire field and we have lots of different tags so in this case we'll say item dot split and we need to put in a comma and maybe a space as well and so you can see we took those values and we split them by the comma so now we can have these different individual tags and we could of course expand this as well so we can see the different tags listed let's retitle our application we'll press save and at any point we can toggle this to see what the experience is going to actually look like for our users and at any point we could click on our columns to be able to sort this different ways so maybe I want to see our longest ago published videos or maybe our most recently published videos or we want to take a look at the view count here's the least popular to the most popular let's go ahead and add a couple more components to our application so first I should probably retitle this instead of users change it to videos let's go into our components and we'll search for statistic let's grab that statistic and drag it onto our screen we'll put it up here so in this case maybe we want to show the number of views that we have so let's change our label to views and we'll call this video views and instead of formatting it as a currency we'll just do standard our values right now this is just static but we want this to be dynamic and then in our value we can use our curly braces again and here's where we're going to reference our data our query list videos and from here we'll pull from our data and from our data we'll use our view count but you'll see that we have this error here the value has to be of type number we provided an array because we're giving it all of those different records instead we want to be able to aggregate that so we need to be able to sum up the number of views well hey we have JavaScript so let's use low Dash use an underscore and a period and we've got sum we'll put that in a parentheses and wrap our parenthesis and now we've got the total number of views well right now we're showing a combination of my videos and retools videos so really that's the total number of views what if we just want to show one channel or the other let's add a new component for a select we'll just choose a single select here and we'll add that in we'll call this channel picker and then we don't want to have to manually list out the channels that would be a huge pain for every new Channel we add then we'd have to be constantly updating this picker so let's go into our code and create a new query we'll create this as a resource query we'll call this list channels and now we'll say select all from channels save and run that you can see we have our two channels that come back and now instead of these manual options we can click on mapped and our data source is going to be from list channels now we actually don't want our value to be item. ID instead we want this to be item. Channel ID but we don't want that label to show that long series of characters so let's have the label be item. handle instead and now when we click on this we can see we have options between Dan Leman and retool I'll change my label here to channel so if I click the channel here and I select retool it's not doing anything right now and there's several different ways to do this we don't have to do it at the query level here we could add our own event handler but we'll modify this so we'll say select from YouTube videos where Channel ID equals and then we can refence refence our Channel picker and the value from that channel picker so now I can click on retool and it's only going to show me the retool videos or I could click on Dan Leman and it'll only show me the Dan Leman videos and because this is all reactive you can see the total number of views that we have so you can see that for Dan Leman or you could see that for retool next let's talk about building our own workflow we'll click on the workflows area and I've created this one already for fetching Channel information so the idea behind this workflow is that I want to be able to copy and paste in a new YouTube channel just paste that channel and then I want to have it automatically come back with a channel ID because later on when we want it to automatically import the YouTube videos that we have we need to know that YouTube channel ID and we need to know their upload playlist so now could I do this with a tool like make or zappier I could however it's going to take some code neither of those Solutions actually have the correct module that we'd be looking for so we'd have to write this as a custom API call anyway and so this is going to be much easier for me to do just as a workflow write a little bit of code get the information I need transform it where I need to so first off I have my start trigger if I edit the trigger here you can see that I can actually create multiple triggers for this workflow that's pretty sweet a lot of other automation applications don't do that it's always you start from this one spot in this case you're basically starting from either a web hook so you're saying here's some action I'm going to pass some information via a web hook or basically a Cron job so if you want to schedule it or you say a certain interval of time midnight every day we're going to run this job in my case I want to have the user actually do this because we're going to have a form that's going to then run this web hook so I'm going to start with a web hook we're going to pass it some Json and that Json in this case this is just some test parameters so I really like this I don't have to constantly be going back to a different app and be triggering this I can test it directly with the data in here with this test Json parameters so in this case I'm using smart SES Channel this is the data I'm going to feed it is just feed in this full YouTube channel and then in this step this is where I'm running some code you can do this either with JavaScript or with python and I'm basically defining the channel handle and I'm saying okay well let's split this at the at symbol because I really just care about this hello smart site I don't care about the previous portion of it so we're going to split that data at the at symbol and then we're going to take the second component and of course with arrays and programming the first element is at the zero index the second one is at the first index so we're taking the second part of that and then we're we're just going to return it and then in the next step I'm getting the channel ID this is where I'm using a rest API and I'm just doing this directly with YouTube so I've set up an account with Google to be able to capture this information I'm not doing any web scraping or anything like that I'm going directly from the API and I'm saying okay well here's the get request I want to make and we're passing in that channel handle that we had in the previous step so we can reference any of the data from our different workflow steps here that's what I'm doing here we're passing in our API key and then that's all the information we need to grab that channel ID and then in our next step we've got some branching logic and I really don't have another condition to really flesh this out I probably should but I'm just checking to make sure that that channel ID is present because what would happen if we pasted in some link that wasn't actually a YouTube channel link well there'd be no YouTube channel present so we're doing a check here to say hey when we actually get that data in the previous step if those items come back and there is no ID for that channel well then we're not going to actually go ahead and progress with the next step you don't have to know too much about this unless you're actually quering YouTube yourself but I have another YouTube API call I'm making here then to actually grab the upload playlist for that particular YouTube channel so that's the next step after we've checked if that channel ID is present and then my last main step I'm doing here is with retools own database so we're using retools database to write into the channels table and we're taking all that information that we captured in the previous steps to be able to write that data and insert a new record in our our Channel's table and then finally here just to show you you can have the web hook actually return data as well so if you want to capture some of that information and display it back to the front end you can do that with a web hook response so to trigger this from the front end we're going to want to copy the URL of our web hook let's create a new app again from template we'll use the same template this time we'll label it channels we'll create a resource query now because we're repeating ourselves here what we should do is actually put this in our query library but just to get the job done we'll create this new query we'll map that data to our table and now you can see we have our list of channels let's add a new component I'll search for a form we'll take that form we'll just add it here we'll call this add Channel we'll click to generate this from a table We'll add a component here add a text input we'll update our label to channel URL we'll put in a placeholder just to help our users let's stretch out our submit button a little bit okay so here is where we could add our Channel but right now it doesn't actually have any functionality to do anything anything so let's go back into our code we'll choose resource query we'll call this something like get channel and instead of our retool database being the resource this time if we scroll down we should be able to see an option for a retool workflow now we'll choose our workflow fetch Channel info and then it's really nice cuz it shows us how to structure our Json it shows that we need that channel parameter but we don't want this to actually be static information we don't want it to always be for smartsuite so let's use our curly braces again and we can reference our form one data and from here we can access that text input now best practice I should always be labeling this correctly instead of using these generic form one and text input one let's go ahead and save this and let's preview our application we'll paste in a different YouTube channel here and press submit and we can see that this ran successfully well why didn't it do anything to our channels here we didn't actually tell it to refresh all we said was hey go ahead and execute this query if I press refresh we can see that we were in fact successful we see that new channel additive softer and that it pulled back that upload playlist ID so this ran through our entire workflow that we had but how do we actually get it to update so that we know that it worked successfully this is where we can go back into our resource query so we can add an event handler here as well and this one will be what happens on success well let's add a new one so instead of controlling our query when this successfully runs our workflow we want to control a component and we can select our component this is going to be our Channel's table and here we're going to choose to refresh that table so now in our application we should be able to add a new channel URL press submit and you can see it automatically ran the query but it also updated the front end to add that new channel run it through the workflow we've got that upload playlist ID and then be able to update what we see on the screen now one more common question I get a lot from people who are used to no code is well how do we create those formulas because remember there's no formula fields in our backend database now there's a couple ways to slice this I'm going to show you how we can do it in our query so let's go to list videos and we've done select all but in this case I want to add my own field so I'm going to add a comma here I'm going to paste this in I'm going to say the current date minus the published at date and this is going to be a date type of field and we're going to label this as days active so what this means is we're able to manipulate our data and then show it to the front end and the front end just looks at this like another field let's save and run our query we'll close this and now if we look at our videos table we could add a column for our Source we should be able to see we now have this days active we'll render this as a number and we'll map the item and now you can see we've got this new field in our table days active doesn't actually exist in the database but we essentially created that same kind of formula that we would in another no code application I hope this has been helpful to see just how powerful a tool like retool can be if you have any questions about your own no code or low code setup don't hesitate to reach out to our website at automation helpers.com where we're offering free 30-minute consultations n [Music]

Channel: Dan Leeman

Views: 4,647

Keywords: retool, retool tutorial, retool demo, retool workflows, retool tutorial for beginners, retool review, retool app, retool dashboard tutorial

Id: NExdgX3pydw

Length: 23min 38sec (1418 seconds)

Published: Mon May 20 2024