Build an Internal App Without Learning Mobile App Dev

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone. And welcome to another episode of Learn with Jason! Today on the show we have Kevin Whinnery. Kevin, how are you doing?

KEVIN: I'm doing great, Jason, how are you doing today?

JASON: I am doing fantastic. I got this capybara sweater.

KEVIN: I was gonna comment earlier. That's top-tier. That's a very good sweater.

JASON: There's a little bit of a back story to this because this is the third one of these sweaters that I bought. So, I bought one for myself. And my partner immediately stole it. So, I bought her one that was her size. And then she wouldn't give me back the one that I bought originally. Because it's comfortable. So, this is the one -- I bought this one. And I have to guard this carefully.

KEVIN: So, just stays like a why a drawer. I could see it. I don't blame your partner for sniping both. It's pretty nice.

JASON: It is definitely a great -- it's a great sweater. Probably not what we should spend our time talking about. Let's talk about you. Kevin, before we jump into the show, who are you? What's your deal?

KEVIN: Right on. I work at a company called Retool. I'm head of the developer experience, developer advocacy, developer interfaces, our documentation. All the developer-facing bits of the Retool platform our team is involved in. And I have been doing developer tools for a while now. I have been at Retool for 6 months. But before that, I spent 10 years at a company called Twilio, made APIs for text messages, phone calls, that kind of thing. Kind of doing similar stuff. I was the maintainer and writer of our Node.js helper library for Twilio. Made sort of a dorky little video game called Twilio Quest that helped people learn Twilio.

JASON: You're behind Twilio Quest?

KEVIN: That's my baby.

JASON: That's such a fun thing. I had some of your team, or I guess your former team on the show and we built a bit of a Quest. It was really fun.

KEVIN: Sweet. I can't believe I missed out on that. Yeah, right on. Yeah. So, JavaScript developer, I have been kind of in developer tools for a while. And coming to you live from the Twin Cities of Minneapolis and St. Paul.

JASON: Very cool. I get out to Minneapolis for Front-end Masters. I have one coming up in May, I believe. It's always a good time. I do like that city. It's one of the strangest cities I have ever been to because I feel like it's the only city where somebody says, hey, do you want to walk to this restaurant three blocks away, and you say, sure! And then they start going upstairs.

KEVIN: It's a different vibe. The skyway is necessity for survival. Climate change is making Minneapolis a lot more walkable than it used to be. But the skyway is pretty handy for those instances.

JASON: For those who don't know what we're talking about. All the buildings in downtown Minneapolis are connected by this series of elevated walkways. There's tunnels in the buildings. To go next door, walk upstairs and through the tunnel and into the next building. It's freaking cold and snowy for a lot of the year.

KEVIN: A lot of the year. We're in that 7 month period right now.

JASON: Yeah, how much snow do you have on the ground right now?

KEVIN: Gosh. 3 or 4 feet in most places. We've had a big chunk of big storms in a row.

JASON: That's too many feet.

KEVIN: That's a lot of feet. At the edge of the driveway, it's up to 5 or 6 feet. You can't see over it without getting up on your tip toes. It's no joke.

JASON: Not for me. I grew up in Montana. It was a significant factor in my decision to come to Portland was that there is not a lot of snow here.

KEVIN: Yeah, that is fair.

JASON: Excellent. All right. Cool. So -- so, right as we were starting up, whilelucky asked a great question which is: What is an internal app? I think that is going to be important context for everything else that we talk about for the rest of today. Why don't we just jump right in and start there?

KEVIN: Yes. For sure. An internal app, it can be a lot of different things. But I imagine that if you think about like the company you work at now. Chances are good that there's like software that like just your company uses. Like whether it's to like set up promo codes for your marketing. Or like maybe there's a support dashboard that like the, you know, folks can go in and suspend and un-suspend accounts or apply credits. A lot of companies and a lot of like teams just have like backend software that is like very specific to just the stuff that their business does. And that's kind of what we mean by internal software or internal tools. It's software that is made not for a huge, broad audience, but for a very specific audience of folks that you work with that do a very specific job. That's kind of what we mean by that.

JASON: Yeah, definitely. And that is, I think, one of the -- like it's a common -- at least in every company I've worked in, there is a team of people whose entire job is building these like internal dashboards.

KEVIN: For sure.

JASON: That can range from like I am the person who builds Amplitude dashboards or like Google Analytics reports, using other tooling and kind of building custom views. But, for example, at Netlify we have -- or we had when I was there -- a collection of like specific dashboards for being able to do customer support. For being able to -- if there was an incident, we needed to be able to replay different requests and figure out what had happened. And all that requires just, you know, at the beginning, I think they were using like these very complicated like database commands to go through and figure out what was happening and it was all done in the terminal. You can't onboard anybody that. And it's risky to run terminal commands, if you're copy and pasting a terminal command, a lot of hope this works?

KEVIN: Yeah, that's true. Yeah, I was gonna say there was a lot of YOLOing SQL queries against the production database to figure out which what I think went sideways. Giving people that power, expecting people to have that power in order to do like troubleshooting and customer support is not always a super-smart idea.

JASON: Yeah, exactly, right? It's one of those things, it's perfectly fine until it's not. What a lot of companies have started doing is investing in building internal apps that you get to choose what somebody should or should not be able to do as part of the support team or as part of the SRE team or whatever it is. For example, I might need to access a customer's account. But I should never be able to see a customer's credit card information, right? And if you don't have a sophisticated internal app, then you're just -- like you just have to have a small, very small group of people that you trust and that will take the blame if there's a data breach. And I think a lot of startups start that way. But like as you scale, you just -- it doesn't work. You can't have one person in the company who keeps all the data. So, an internal app becomes really the only solution for any company above a certain size or a certain complexity. Because you just, you know -- you cannot have customer data like leaking -- like floating around your company. It's a legal nightmare. It's a security nightmare. And it's also just not -- that is a high-stress thing to be doing when you're looking at somebody's data that you know you shouldn't be seeing.

KEVIN: Oh, yeah. Yeah, for sure. And like -- and how, you know, data should be exposed to different people in your company is usually like pretty custom to whatever domain you're working in or however your team works together. So, having a software layer that you can have pretty granular control over. This group of humans can kind of do these actions. And you can kind of encode those workflows in software.

JASON: Right.

KEVIN: Definitely makes it safer. And also just like saves a lot of time so you don't have to ask an engineer to run a one-off script or run a report for you or those types of things too.

JASON: Absolutely. Yeah. I think that's a -- that is a kind of -- it's a big deal that is -- it's a lot of like what feels like invisible work, right? And there are a lot of ways that you can solve this. What I've seen a lot of companies do is dedicate entire engineering teams to building custom internal software. But you got to be a pretty big company to be able to afford two or three engineers full-time working on internal tools. So, what, you know, what I've seen a lot of companies start with is they're like, oh, well, you'll build a custom tool and somebody can, you know, they can manage a sprint and they never maintain it again. It gets increasingly jankier and increasingly harder to deal with.

KEVIN: Yep.

JASON: But there is a better way. And so, we're gonna be talking about today about Retool which is where you're working. Retool was also kind enough to sponsor this video, thank you, Retool, for putting up a little extra to make this stuff more accessible to people. And the -- the specific promise of Retool is that it will make it possible for me, who is not a mobile developer, to build an internal app without needing a full-time -- like actually maybe I should let you do this explanation. What is the -- like the value prop of Retool? Because I'm thinking about it in terms of what we're building today. But I don't know if that's the whole scope.

KEVIN: Yeah, for sure. So, I think we are specifically gonna dig in and do some mobile stuff, which will be really fun. But Retool generally lets you build internal apps. Whether they're desktop, web apps, mobile apps like we'll hack around on today. But generally it's an alternative approach to like maybe spinning up a new Next.js application or a Rails app or what have you and kind of building an entire internal app stack yourself. You can actually use Retool to build those types of applications, that type of software. Like inside of a platform that's kind of purpose-built for doing those types of internal tool use cases. So, it handles like, you know, your company SSO. There's a way to configure and set up multiple different data resources. Which is also a pretty common thing in internal tools resources. Most internal tools are just kind of a mashup of five or six different APIs and databases just like with a single pane of glass on top of all of it to orchestrate those things together. You can build, you know, web apps or mobile apps on top that have as well.

JASON: Got it. When you say "Data sources," I can hook into my third-party data, if I want to pull in my analytics from Whatever company I want to pull in. Or my custom database, I stood up postgres to power my company and I want to pull that in to build a dashboard out of?

KEVIN: Yeah, absolutely. All kinds of different databases. There's built-in integrations for a lot of common databases. If you have a postgres database, you can configure your URL and port numbers and authentication information kind of in one spot. And then one thing that's kind of nice too and would have been really nice at Twilio where we had a ton of internal tools for sure, is we have all these internal data sources. And, you know, getting access sort of piecemeal to each one and like configuring each one is a little bit of a -- little bit of a pain. So, you can kind of set up your like universe of data sources that you're talking to. Whether it's analytics, APIs, or databases. And then, you know, build as many apps as you want kind of on top of one or many of those data sources.

JASON: Okay. Let's talk in specifics of what this gives us the ability to do. Because I also think in terms of software because I've worked in tech companies. But that's not the only kind of business that needs an internal app. So, for example, whenever you go to a restaurant, they have a point of sale system. When you go to a library, they are checking books in and out. When you have any kind of small business. You have scheduling software and payroll software. All these things are internal apps, right? Unless you're paying a third-party service to do it. And you know, my experience, at least, was like when I was -- when I was getting -- like when I was in high school and college age, I worked in a lot of restaurants and almost all of them, their internal app was Excel.

KEVIN: Yes, indeed.

JASON: Right? But so we can build -- like it is -- Retool, is it intended to be tech-only? Is it -- or is this something where like if I'm a freelancer, I could use Retool to go build things for my clients that aren't necessarily in tech?

KEVIN: You definitely can. And that is a model that we see is like, you know, folks that maybe do like work with smaller businesses. Will use Retool to kind of set up the software. Like a software layer to handle some of the business processes that otherwise would be like in a spreadsheet somewhere.

JASON: Right.

KEVIN: So, like it -- like one way to kind of think about Retool is it kind of sits somewhere in between full-on custom web app development, which you can actually integrate Retool with a custom web application is definitely a thing you can do. But it sits between that and something like an Airtable or a Zapier. Like some kind of automation system is that maybe doesn't quite give you the ability to write code. But like you can model a lot of like business processes and data in interesting ways there. Where Retool is like the next level up where you can actually define software that encodes like some of these common workflows. So, definitely can be used in like the small business use cases that you're talking about. Or, yeah, just in any internal tool-adjacent work, certainly.

JASON: Got it. Okay. So, let's talk a little bit about the specifics of what we're gonna build today. So, I got a to do list before we started this episode. And it included things like setting up a camera pointing down at my desk so that we can show my phone screen. And I was also asked to get a stack of books.

KEVIN: Yes.

JASON: So, I have this stack of books on my desk. And I have my phone standing by so that I can show things with it. And that's -- that's kind of all I know. So, let's talk a little bit about what we're actually gonna build today.

KEVIN: Yeah. Let's do it. So, what we are gonna try to build today is a application I am lovely calling Read with Jason. It's essentially like a library management application. So, imagine that you are running a little library. Maybe you even have one of those little hutches of books like out on your boulevard. Maybe that's in a Minnesota thing, I don't know.

JASON: It's very common in Portland as well, yeah.

KEVIN: I could see that, I could see that. Maybe you have one of these little hutches of books and you're managing a collection of them through some kind of software system. When you're working with like actual stuff in the physical world, it is sometimes useful to be able to, you know, use mobile applications or mobile software to be able to interact with those things. Like in the case of like managing a library, one thing that would be really handy to do is to like be able to scan, you know, a bar code on the back of a book and, you know, not have to punch in, you know, numbers about every like piece of inventory that you're working with. So, we're actually gonna build a little application to help manage a collection of books.

JASON: See? This is one of those things that I think is such a -- like I would just talk myself out that have, right? Because if I -- if I had to -- if you told me, all right, you're gonna build an app and you have to manage books. I'm going to do like a title search, right? Because I know computers. And I'm used to having a UI, and that's my only interface. So, I, you know, search by ISP, and sure, maybe I'd have that field. But I'm like -- okay, I'm like ISBNs are hard, it's easy to can screw up numbers, I'm going to have somebody search by title. Boy wouldn't it be easier if I could point my phone as a book and it would tell me what book it was. Because I'm usually thinking in a desktop application vibe, the idea that you can use the rest of the tools at our disposal. Like a camera on your phone. Or like the microphones or these, you know, geolocation data, where I am. These pieces of information are available to us. But a lot of times it's way easier to get those pieces of information if you're using a mobile app. But I don't build mobile apps, I build for the web. I kind of just build this little shield of like, well, I guess that's not for me. Today I get to build something that uses my phone camera?

KEVIN: Yeah, for sure. And that's kind of the idea for the mobile product is that there are use cases that would be really nice to do on a mobile device. But even if you use like something like a Cordova or React Native, there's a decent amount of overhead with creating and deploying software in that way. Even when you actually write the code to do it. Mobile specifically within Retool provides kind of a nice shortcut to being able to do all the stuff that mobile apps can do without having to necessarily like figure out how to deploy to the app store. Or, you know, use a cross-platform framework directly and kind of figure out what the idiosyncrasies of the building apps across those different platforms. So, like it's definitely like a tradeoff. Like we'll see when we start building in a minute. It's not like you wouldn't necessarily build the next Instagram inside of, you know, Retool. But for like sort of crud apps and like business applications that are mostly concerned with data, it ends up being a really nice way to be able to put together one of those applications really quickly.

JASON: So, you just said something that I don't understand. And so, I'm gonna dig back into it.

KEVIN: Please.

JASON: You said you can build mobile apps without having to figure out how to publish them on the App Store.

KEVIN: Yes, that's right.

JASON: Okay. How does that work?

KEVIN: So, the model -- and this is one way they can work. You can actually white label a Retool. And if you want to deploy your own application to the App Store, you certainly can. But there's actually like a Retool app in the App Store that you download and you can sign in like with your Retool credentials. And like as you build applications in Retool, you'll kind of see them show up inside this application. It's a little bit like a launch for lots of little applications that you would build within Retool. A common usage pattern for Retool. Say you were a Walmart and you use Retool and you have built hundreds of applications within Retool. You can have people in your company log into Retool and see all these applications that have been built and use them and control access to different applications that way. So, there's a similar thing on mobile that you can just like do then like over the air updates to this mobile application and your users just get all the functionality that you've built like within Retool.

JASON: So, there's a question in the chat. This is like the Expo iOS app.

KEVIN: Yes, very similar.

JASON: From what you just said, yes, and... because it includes some of that access control that Expo would be more like scan this QR code and get your app, and you can send 15 apps and pick them from a list.

KEVIN: Yeah, it has a layer of your end users are actually able to interact with your applications to do this thing. I'm not an expert on Expo. But I think it's more of a development tool. You send your React Native code to this app and then it kind of shows it. But I might be wrong, though. I was under the impression that it was more like app development time that you would use that.

JASON: Yeah, I think I've had Expo on the show and I don't remember exactly what the limitations are. But I believe it will give you the ability to -- to like get into a single app for development. Or for like testing so you can like beta or alpha test. But anyways, let me not guess at Expo features and instead we got a couple questions.

KEVIN: Yeah.

JASON: So, binajmen asks, so every user needs a Retool account? Just to understand the cost for a 50 + person company.

KEVIN: If you want to have folks log in and use Retool apps that way. Then like yes, everybody who wants to access an application does need a Retool account. There are different ways of deployment, though, where you can have sort of public apps as well. And that is just like a URL that anyone can visit. You might even do like some custom authentication on top of that. But the sort of default mode is that like everybody like in your team has a -- has a Retool account.

JASON: Okay. All right. And so, we can -- we can look a little bit at that once we actually get over into the UI.

KEVIN: Yeah.

JASON: And then let's see... cosmos, same question. Jacob is asking, does it download an app in the background? Or is it more of an additional web view within the main app?

KEVIN: Yes, it does kinds of download apps in the background. So, like with the -- at the risk of going too far into the sausage making. So, like the UI editor that we'll see in Retool in a little bit is kind of just like a really fancy JSON editor. Because like the entire like UI that you create is actually serialized to a JSON document that has like all of your event handlers, your UI structure, all of this stuff that is necessary to essentially re-create your application somewhere else. And then Retool has like a runtime component that reads that JSON file and, you know, renders your application. So, there's like a runtime that interprets it. In the case of mobile, like Retool on the web is built using React. And on Mobile, it's built using React Native. We're actually like dynamically creating a React Native application like using those components. So, it's that like JSON app definition that's kind of going across the wire that Retool then uses to sort of generate your applications for you when you -- when you view them on the device.

JASON: Gotcha, gotcha. All right. I think any of the other questions that I'm gonna have are going to be easier shown than talked about. So, why don't I put us over into pair programming mode here.

KEVIN: Let's do it.

JASON: And you can see here that we're gonna start by talking about the live captioning. We've got Amanda from White Coat here today, thank you so much, Amanda, for being here. And that is made possible through the support of sponsors, Netlify welcomes Nx, New Relic, PluralSight, making this show more accessible to more people. Very much appreciate that. And today I'm talking about Retool. And I'm in the wrong window, which is why that didn't do anything. Retool.com. And Retool is sponsoring this episode. So, thank you very much, Retool, for doing that. We're talking today to Kevin who is on the Tweets as Kevin Whinnery.

KEVIN: He is. Yeah.

JASON: Make sure you go and follow. All right. I believe that is everything that I know about what we're doing today. So, I've got my stack of books. I've got my alternate camera angle. Look at this camera angle. We're going to be doing some screen sharing today.

KEVIN: Oh! That's exciting. So, we need phones, we need books.

JASON: Okay. So, we've got phones, right? So, I'm gonna be able to pull my phone up and do something. And then I've got --

KEVIN: Yes.

JASON: This stack of books that we will dig into when it's time.

KEVIN: Yeah. Needing to pick up Engineering Management for the Rest of Us. Looks like a banger.

JASON: It is an absolutely stellar book.

KEVIN: Fantastic. I think, to get started, Jason, I've shared a specific cloud instance, it's the read with Jason.retool.com. We're looking at it. This is a free account. Retool is actually free for like five users. Small teams, like smaller apps can use kind of the whole platform without having to pony up. And there is actually a completed version of the app as well. And it might actually be useful to like just poke at that real quick and just like kind of show the finish line. Like where eventually we would be getting to.

JASON: On the phone?

KEVIN: I think we can do either one. Let's actually do the phone.

JASON: Yeah, let's do the phone. All right. Back to desktop view here. Let me get my mouse out of the way. So, I have -- let's grab one of these books. I told my partner, Marisa, that I was gonna be putting books on screen today. And she went and got her favorite books. So, this is one of her favorite books. She said that I had to show it on stream. And I've got my phone here. And I've downloaded the Retool app. So, let me kind of move my -- so, this is the Retool app. You can see it here. I'm gonna open this up. And oh, wait. I'm in the thing. This is what you see whether you first open it up. This is a standard native app. And this is our library app, which is the same one that we are looking at here.

KEVIN: Yes. So, imagine like you're -- you have a set of team members that are out in the field doing work. Maybe you have like librarians or other folks that want to do this work. They use this app. They load up like one of the internal apps that you have built. And then they can select it. And you just showed like this library app that has like a list of books in it. And then yeah. If you want to throw that in there, you can actually just drill down on any one of them individually. So, if you tap one, it just shows like a cover image and all a little bit of metadata about the book itself. And this is actually being driven like -- or driven off of a postgres database. So, like build into Retool. There's a postgres database that you can use as like your primary application data source if you want to. Or it's just like kind of a convenient way to have like persistent data associated with your apps. And if you were to click the checkout button, that actually deletes the book from the database. It's pretty, you know, pretty rudimentary how the data side of this works. But then what you can do is the second tab on the bottom is like a manage books tab. And if you tap that, that's what kind of allows you to add new books to the app. So, you could manually type in an ISBN number, which is kind of an identifier for books.

JASON: On the back of every book there is an ISBN.

KEVIN: Yep, exactly. What you can do is you can actually tap the second button underneath that to scan ISBN. And then that will bring up like the phone app or, you know, like the camera app.

JASON: I can do this. Coordinating two cameras through a --

KEVIN: This is tricky. There we go.

JASON: Okay.

KEVIN: After it finds it, then it just puts the ISBN into that field, you click find and there it is. And then you can tap that. Oh, look, it even got the right cover. Awesome, awesome.

JASON: That is pretty dang cool.

KEVIN: Yeah. And go there --

JASON: Now, here it is.

KEVIN: And we've got Invention of Nature. Yeah. So, that's kind of like what our app does. And it just is kind of meant to showcase, you know, how you can, you know, do something that would, you know, would have been like prohibitively expensive and like difficult to do. Like if you were just gonna build this app from scratch. But you can actually do it in a reasonable amount of time if you build it through Retool. I think in the next hour or so, like I think we will actually get pretty far towards actually being able to build out this whole thing. Let's do it.

JASON: I'm really excited to give this a shot. Because what you just showed me, like some of it, like the ability to make a list of books. Very confident that I could do that in an hour.

KEVIN: Sure.

JASON: Getting my phone camera to scan a bar code that then looks up a book, I don't think -- give me a day, I'm gonna get that wrong. So, I'm very excited to see how far we can get.

KEVIN: Yeah, for sure. Let alone like deploying it to an app store or anything like that. So, I --

JASON: Yeah.

KEVIN: Well, sweet. Let's do this. Let's create a whole new app. If you go to that, yeah, create new there. There's actually a mobile app option there. And this, by the way, like it is -- mobile app development is free in Retool, but it is in beta. There might be some wet paint kind of lying around that. Just as a word to the wise. And we can call it anything we want. Like we can just say, library app, that would be great. And now we're kind of in the visual Retool editor. And there is some like stuff that's built into the application by default. It kind of has like a two tab layout. But within the editor itself, like on the right-hand side, there's kind of like an inspector view. So, if you use something like an Xcode before, like it's kind of similar. So, like as you select different components, you can kind of futz with different options on it. That component in the middle is a collection view and it kind of binds to different, you know, data sources and kind of shows different thing there is. And I think the second tab by default is empty. We will change that in a little bit. But it actually does on that first tab have sort of a default list detail view. If you click on one of those little rows there, it goes and kind of shows that thing. So, what we'll be doing with like the library app is we'll kind of use this basic setup. But we'll actually swap it out to use some live data.

JASON: Nice. Okay.

KEVIN: And I mentioned before we're gonna use a postgres database for this. So, if you go up into the top left, Jason, and click that Retool logo thing, to the left of where it says that, click on "Resources" once. And this is actually gonna take you to the list of configured data sources that your application can use. We'll use the Retool database, but if you click "Create new" on the top right, we will exit out of it. Create a new resource.

JASON: Oh, okay.

KEVIN: Just real quick, if you were gonna use of kind of database, there's built-in integrations for lots of different databases and APIs and what have you.

JASON: And there's some stuff that I find very exciting in here. Like, look. Here's some Google Maps, some Slack, Twilio, Stripe. So, this isn't just for like data so much. Like I'm assuming if I can hook into Google Maps, I could do something like, I don't know, figure out where I am and then store a geotag in the database. Or I could have the app send a reminder to Slack when something happened. Like, oh, a new book was checked into the library. Or I could have it call me. Right?

KEVIN: Indeed, yeah.

JASON: So, this is some pretty -- like it's cool that this is just here and available to us. And look! We can even do Excel, everyone!

KEVIN: Indeed, yeah. That -- that is one of the more popular ones, as you can imagine.

JASON: I bet, yeah.

KEVIN: The CSVs and these spreadsheets are what the world runs on.

JASON: Absolutely.

KEVIN: Just as kind of an aside, you can use the postgres database, but you have access to this stuff. On the side there, the Retool database, if you click on that, that's gonna take you to sort of a graphical interface on top of what's at the end of the day a plain old postgres database.

JASON: Gotcha.

KEVIN: It is editable through the graphical interface here. You can just go to town and start like messing with your data directly there if that's convenient.

JASON: Sure.

KEVIN: But a lot of the times you'll be building applications and software on top of the database versus editing it directly here.

JASON: Got it.

KEVIN: We could create a new database. But I think it might be convenient for us to just use this database so we don't have to create all the columns and whatnot.

JASON: And the construction in the database would be to -- we would start with an empty postgres database. I would create a table. I would have to define the fields in the table and then load in the data. Is there anything beyond that that we would be doing?

KEVIN: No. And you could even like get a taste of it. There's a little plus icon next to that tab. And that like creates a new table in the database. And you can start it from a CSV. So, if you have some existing data that you want to dump in there.

JASON: Gotcha.

KEVIN: You can do that. But then at that point you would be going through and adding new columns to each table and stuff like that.

JASON: Got it. Probably the most interesting thing to watch me do. Especially when we've already got a database set up here. If we were going to set it up, we would just be re-creating this exactly.

KEVIN: Yep.

JASON: And so, I can use this one?

KEVIN: Yeah. So, let's -- let's go ahead and use that one. And then if we go back to our app, the library app.

JASON: What did I just do?

KEVIN: I think there's like an editing mode and then there's like a preview mode. Yeah. Perfect.

JASON: Got it, got it. All right.

KEVIN: What we can probably do right away is rather than using the default data that's in there, we can write a query against that database and pull in the actual data from the database.

JASON: Okay.

KEVIN: Down on the left-hand side, like the bottom left, there is like a section that's labeled Code because that's kind of where the different queries and like API requests are gonna live for our application. And these are gonna be like the data sources that we'll actually use for binding against the UI.

JASON: Okay.

KEVIN: So, that first query, we can select that. It looks like it's selected already. And it's sometimes convenient. There's a little expanding button thing right next to where it says Run to make it bigger. That might be nice to give us a little bit of room to write some code here. And then there's a resource drop down. And there you can select from all your configured data sources. And it shows you the tables and the fields that are available to you.

JASON: Very nice.

KEVIN: And yeah. Over there on the left you can -- you can write just a SQL query yourself. Or there's like a G UI mode too. But for this, it might be easier to just kind of directly write the SQL. I don't know if you are a SQL query writer person at all.

JASON: In a past life, I wrote a lot of SQL. And it has been a minute. Remind me. A select -- do we want everything?

KEVIN: Yeah, I think we could do select star.

JASON: Okay.

KEVIN: Then we could say from. And then it autocompletes the tables for you. And like --

JASON: Excellent.

KEVIN: Yeah. So, we could, you know, do an order by if we wanted to. It's not strictly necessary per se.

JASON: How would you want that done?

KEVIN: So, yeah. Like order by, I don't know, like title? Title might be a good thing to order by I think is the name of the field? Title and then what? Like ascending, that what we would want? I think like ASC. Yeah, totally. Okay. Cool. So, we got ourselves like a little SQL query here that's gonna pull us all the data. And if you hit that save, there's like a save button, and now you can see, we're pulling some stuff back. Here's the order that's coming in. There's all the data. So, we're making some progress. If you make this query editor thing a little smaller, then we can go back to actually like doing the UI on top of it.

JASON: Okay.

KEVIN: So, yeah. Let's go there. And for that piece, what we want to do is like change the data source that like list view is bound to. So, I think like, yeah. What is it? Query one.

JASON: Oh, let me name this.

KEVIN: Yeah. That might be nicer to give it a useful variable name.

JASON: Go with all... books.

KEVIN: All books.

JASON: Okay. So, now we can go to all books. And then we have the title. Oh, look, and it's already kind of doing this for us, right? So, then if I wanted to get the author...

KEVIN: Yeah.

JASON: We get the author. Max lines is two. Caption, image is already pulled in. Which is excellent. Okay.

KEVIN: Yeah. It looks at the data and kind of tries to guess based on what's in there. Oh, you want to shove a .png string into the field.

JASON: Yeah, pretty clever that just worked. And then here... actually, let me go back and make sure -- are we -- is this everything we need? Do we need more?

KEVIN: I think that's pretty good, actually. Like if you click on one the rows, let's see if we can't figure out how to make that image go on there. That might not be the right one. So, if you click on -- actually, on the far left-hand side of the screen, there's like a components view. So, you can kind of like select which one.

JASON: Uh-huh.

KEVIN: And this might not be exactly what we want. But there is like a reference to like, you know, the name of that collection.selected item. And then I think we might want a different property there. Like a -- I think it's like --

JASON: Cover image.

KEVIN: Yeah, cover_image. That might have been what it was set to by default. And then we can do some like different stuff with the image. Like we can kind of mess with the aspect ratio and whether or not we want it to cover or fill and stuff like that. Yeah. So, like yeah. Contains. That's probably what we -- what we're after. And the other component is a key value thing. It's a way to very quickly show tabular data. As you're kind of messing around with different things, you can give that a nice, human-readable name. You can also show or hide different columns as well. If you hover over one on the list in the far right, there's the little icon --

JASON: You can drop it right on out.

KEVIN: You can change the order, take one out or pop one up a little or what have you. Sweet. Yeah. This is kind of a detailed view that we can customize with whatever else we think can be useful. And I think as we keep adding to it, eventually we will throw a button in the bottom that will check out the book I think is one of the features we will get to. But yeah, kind of already, we're sort of cooking a little bit. We're getting a list of books. We're able to do a detail view. Making some progress little bit at this point.

JASON: Yeah, I mean, it's like, you know, the creation of a database is not something to be kind of sniffed at. So, the fact that was ready for us is definitely something to keep in mind when we talk about how fast this went. But the fact that we went from a SQL query to data on screen this quickly is pretty dang cool.

KEVIN: Yeah, it's pretty sweet. And like it's certainly something that will be the case like in web apps too where, you know, as you're pulling in tables or other types of UI components that are pretty common, doing that kind of data binding piece ends up being not very painful. It's using Redux under the covers to kind of manage the state and let you bind to different, you know, properties and queries and what have you. But yeah. It ends up being pretty nice. And one thing that you just picked up right away is there's also this like double curly brace sort of binding syntax. So, like if you click on the list thing itself, you can see like on the right we have like, you know, item.title and item.author. And the double curly braces let you kind of reference any like object that is currently like within the global scope. So, like that all books query is like a global variable that you can sort of address within the double curly braces there. So --

JASON: Yeah.

KEVIN: That's where a lot of the JavaScripty statements happens.

JASON: So, in the zerocosmos is asking, like are styles customizable beyond kind of what's in the UI here? Because it look like there's some settings, which is great. But if I wanted to -- what was the example? Setting padding. Like if I wanted to make these way taller using padding, could I just jump in here and do something wild like that?

KEVIN: With the mobile product -- like the mobile product is not quite as customizable as like the web side of things as yet. So, there isn't a ton that you can do beyond what is in the -- in the customization options there. But like that's just kind of a thing that usually, you know, sees a fair amount of iteration is like changing padding and stuff like that. On the web app side, which has been around for a couple years longer than the mobile side, you can do like custom CSS classes and kind of go pretty hog wild as you do that stuff.

JASON: All right. Cool. So, we have a -- we've got a list of books. We have the ability to click into one of the books and see its details. I'm pretty happy about all of that. So, there are a couple things that I kind of see immediately like I need to edit this screen. So, we can say, like, "Book inventory." And then like on the screen... to -- this one is the one we have to still build. On this one I want to be able to -- well, where do you want to start? Do you want to start with the checkout functionality? Or do you want to start with adding books?

KEVIN: Let's add a book because that was give us a sea of our crud app that might be nice to go through and do.

JASON: Okay.

KEVIN: That bit up at the top, that is more of a variable name than like a --

JASON: Oh, this is the one that I want.

KEVIN: Human readable. Just as an FYI. But the top thing, yeah, let's you just like specify in camel case and a different sort of variable name for it. Cool. Oh, it kind of zapped you out of it. That's not very cool. But yeah, if you go to is that one... sweet. Now, if we want to start adding some stuff to this UI, like over on the left, there's components. So, yeah, we would click that plus button and there's sort of a palette --

JASON: The nice thing about this, what I'm finding is I'm a half step ahead of you on some of these because I can move my mouse faster than you can get through a sentence. I find that's a good thing to see if something is intuitive, as you're explaining where I am to go next. Components, that's where I need.

KEVIN: Good. I'm glad we're finding it. So, I think the thing we probably want is like a text input field. So, that's kind of how I manage the ISBN previously.

JASON: And ISBN is all numeric. Do I choose a number or text?

KEVIN: I think we want a text because I think there's some oddball cases with random letters thrown in with a few different books. I think that's probably what you want.

JASON: Okay. So, let's go with ISBN input.

KEVIN: Totally. And then we -- yeah, we could do place holder stuff or label, yeah, for ISBN. Sweet. And then I think we also did a button for like actually, you know, firing off an API request to get the data about a book like by ISBN. So, we could probably do that. And here, I'm gonna see if I can't just drop you a link real quick in the chat. Because the API that I use for this is -- is Openlibrary.org. And you could probably very easily find that yourself too. But it's a free and unlike authenticated API that allows you to kind of search for book metadata by like ISBN number or other identifiers. And eventually, we'll kind of need to, you know, use this API to grab some data about the books. Like once -- and I think we're kind of at that point now. Because we have like our text field. Like we have our button that theoretically would, you know, search for the data. So, I think if you scroll down a bit, you're gonna be looking for the -- let's see... the book API is like the one --

JASON: Book or ISBN?

KEVIN: I think we actually want the book API. Because the ISBN one doesn't like give us all of the data we want. Like it doesn't give us like cover images and stuff like that so, that's just kind of a random detail of this API. But yeah. Like if you look at that. Like we're starting to see the different, you know, data that you can get back. So, if we go to -- like I think like where it says, yeah, anything like that. We can look at some of these --

JASON: Okay. Here's the book. The book API is generic and flexible... so, we want to search API/books and then we do keys like that.

KEVIN: Yep. That whole situation is kind of what we want.

JASON: Okay.

KEVIN: And we'll ultimately end up passing a format parameter to that too and ask for JSON instead of the JavaScript thing.

JASON: Is it like full spelled out format?

KEVIN: Yeah, format = JSON. That's right.

JASON: Okay.

KEVIN: And then, yeah, let's kind of start there, yeah, sure. So, that's given us a little bit of stuff.

JASON: Okay.

KEVIN: And I think there's -- yeah. What is -- there's another parameter too here. I'm trying to remember what it was.

JASON: Let's see...

KEVIN: Like there's a -- it's a little bit obtuse. But it's called like JCMD. And that like that parameter, yeah, if we set that equal to, I think it's data? Then that gives us like more stuff.

JASON: JCMD --

KEVIN: JSCMD, I think I left it out there.

JASON: JSCMD.

KEVIN: Yeah.

JASON: Ah!

KEVIN: That is the one we want. Because that kind of has the title --

JASON: We get the title, we get the author. We get -- what else do we need? We have -- where are our cover images?

KEVIN: Yeah, I think like there's like a covers array or something? Like if you really go down there.

JASON: Holy buckets.

KEVIN: Yeah, I think this is Tom Sawyer, right? This has been printed a few times.

JASON: Cover!

KEVIN: We got cover thing. And we kind of got small, medium and large images there.

JASON: Perfect.

KEVIN: The guy we want --

JASON: We can take this, move into here, and if I go into -- where am I? Here. And I have two of these, one of them. And I want my lookup by ISBN to do something.

KEVIN: Yes.

JASON: And the thing I want it to do, event handler, that's where I want to go.

KEVIN: That's where we need to go, but that's going to call a query. And we have that query down in the left. And instead of a SQL query, we're going to do a REST API request. So, if we do plus and do like a resource query.

JASON: Resource query.

KEVIN: And then instead of that, like we'll probably just go, yeah, REST query I think is what it's called. and now we kind verify a Postman-ish kind of interface where you can kind of set up, you know, these different bits. So, yeah, you're already beating me to it. So, you're already like dynamically, you know, popping in the values of those different things.

JASON: This is why I name any fields?

KEVIN: Yep, exactly.

JASON: Came right to me. Okay. Now if I do it this way, we get our field dynamically in, okay.

KEVIN: Yes.

JASON: And we, yeah, that's all the data we want --

KEVIN: And we have all that going on. And it's kind of hiding UI as it is right now. But there's a blue save button that's kind of off-screen.

JASON: I have my screen kind of setup small. And I think I saved that when I tried to make it bigger. Okay.

KEVIN: Yes.

JASON: So, this is here. And when I run this, it's gonna fail because there's no book. Like we don't have an ISBN input value.

KEVIN: Yes. So, we probably want to like grab one of those at some point. So, like --

JASON: Yeah, let me go here. And we'll grab this one and --

KEVIN: Oh, smart, yeah.

JASON: And then...

KEVIN: Can we... is that copyable? Or not copyable?

JASON: Do you want me to copy this?

KEVIN: I don't know if it's selectable in the UI, I popped one in the chat if you want to use that.

JASON: Yeah, that's easier. Here we go. Do one of these, put this in there. And look, look! I think it did it.

KEVIN: Yeah, it kind of did the thing. So, you can see --

JASON: That!

KEVIN: It's kind of coming back. We got the data bam of coming back from the API, which is great.

JASON: Okay.

KEVIN: Now what we can do is we can set up that button. Yeah, you can make that smaller and then you can kind of click on that button that we put in, like the get by ISBN. Definitely renaming queries to helpful things, absolutely a good idea.

JASON: So, we have -- we have a thing to get the book from the library API. And now I want this button to call that.

KEVIN: Do that, yes. That's gonna be a control query.

JASON: For me, which is great.

KEVIN: Yeah, just kind of guessing the last query that you had set up. So, that's cool. And yeah, there's other stuff you can do, you can run a script just kind of lets you do arbitrary JavaScript. And, you know, you can control different queries. There's also like kind of a weirdly-named JavaScript query. So, like down in the bottom left you could create a JavaScript query and that's just gonna be like a chunk of JavaScript code that would run and do whatever it is you want it to do.

JASON: So, like, one example of how I might use that is like if I wanted to generate a slug from a book title, I could have a JavaScript query that would just really quickly do the replacement of like spaces with hyphens, lower case and then that way -- that would be my query. But I don't have to do -- are there other ways that you would do that? Or is that the way that you would do that?

KEVIN: You could do it with a query. There's actually another thing that in there called a Transformer.

JASON: Oh, yeah.

KEVIN: That's a little bit like a computed property in VueJS if that's a thing you've messed around with before.

JASON: You would say that it's more than meets the eye?

KEVIN: I would. I would say that it's more than meets the eye. Perhaps a property in disguise. But the -- yeah. Roberttables is right, we should stop it right now. So, the Transformer that you can use to do that. The other thing I did in my initial implementation. I actually transformed the data that came back from the API. It kind of comes in a weird format. Instead of being an array, like the JSON structure that you get back, it like is keyed by ISBN number. Like in kind of that goofy --

JASON: Right. Right, right.

KEVIN: So, if we want to actually like bind to the, you know, this value, it's kind of -- it might be useful to like transform this value like when we get it back. So, if you close that like thing out that has the JSON in it. Or like make the interface bigger, one of the two. And just kind of scroll down. There's that thing called a Transformer. And if you enable that -- so, you get this like data variable that's in scope for this little chunk of JavaScript code. And there you can actually like do a little bit of munging on the data that comes back from this API request. Kind of like a middleware function that runs before the data gets passed back to your application. So --

JASON: Got it.

KEVIN: The way that I did this was I used object.entries to grab the first sort of property of that data object. So, yeah. I did like object.entries and then passed it that data. And then the way -- yeah. So, the way that that works, is we get the zero width 1, we want the first thing. And the way that data is structured, there is -- that returns like a -- an array with two elements in it. The first element is the key of the object. And the second is the actual value. So, we actually want sub-1 of that, exactly. Yeah. You're doing it. And then that actually gives us what we I think really want. Which is the contents of the actual --

JASON: The book data, yeah.

KEVIN: Yeah. The book data. If we save and run that, now we have an object that has all the stuff that we want.

JASON: Great.

KEVIN: Okay. Sweet. So, we have about -- it's -- it's doing the thing. And now I think we need like a -- like a screen that shows the data like after we get that, you know, after we get that going. So, I think up on the top left we want to do like a new screen. And we could call that like, you know, book details or what have you?

JASON: Okay.

KEVIN: And now we should like maybe build ourselves like a little like detail view for the book. I think.

JASON: Okay. Now, if I wanted to, say, like... here. We already have this. Can I just copy this over?

KEVIN: Maybe? That's a good question. I don't know if I've tried to do that. It could be a thing.

JASON: You know what? Let's learn how to do it the long way. Because I would like to see how all this works. So, I'm just gonna grab this really quick and I grabbed an image because I want to show the book cover.

KEVIN: Yep.

JASON: And to do that, I want the source to not be a random image, but instead of these. And I want my book library cover image. Or I guess it's gonna be image covers.

KEVIN: Yeah, covers, I think?

JASON: And it was -- we can use the large one. Look at that!

KEVIN: Great!

JASON: Okay. And then I want it to be tall. And we want it to fit.

KEVIN: Yeah. Right on. It's definitely --

JASON: Look at me go.

KEVIN: You were doing it.

JASON: you didn't know it today, chat, I didn't know it either, I'm a mobile developer.

KEVIN: You should ask for a raise.

JASON: And the key developer is the one that just let us drop in some data.

KEVIN: Yeah, you could do key value. The other thing you can do, there's a text component that you can just drop random streams of text in. So, you could pull that in and then it has some like basic template text. But you can sort of change that to be, you know, whatever you would like using a combination of, you know, a string literal. And you can double curly brace in data as well. If you want to do the author or something. You can --

JASON: My goodness. So, go...

KEVIN: Yeah. So, we got the data. We got the title.

JASON: Title.

KEVIN: Sweet.

JASON: Okay. Maybe... like does all or nothing on that? Okay. So, I would -- I would need to play with this a little bit to figure out exactly what we're doing. But I'm pretty okay with this. And then I guess we could do something like -- what's that? ISBN. And that would be the data dot...

KEVIN: I think it's like identifiers. There's like an object. And then there's --

JASON: Identifiers.

KEVIN: And this is tricky because like this data can be a little messy. Because like not all books have every kind of identifier. And there's like a few different version of ISBN numbers as well. So, the search is pretty flexible. And it kind of searches all the different identifiers. But displaying it here can sometimes be a little gnarly.

JASON: Okay.

KEVIN: But that works pretty much fine.

JASON: This will be okay for today. Because all the books that I have I believe are ISBN 13. So, that -- well. Find out, I guess.

KEVIN: Yeah.

JASON: But I believe this should work for us. And I feel like I'm happy enough with this.

KEVIN: Sure!

JASON: And then we'll just have this -- we'll just mark it at done when we're done? Or?

KEVIN: Yeah. We could -- we can do that. Like if we -- if we go back to actually that like add a book, like kind of -- we actually want to kind of set this up as like a stack of views. So, like after we get one of these books back, like we would actually --

JASON: Right.

KEVIN: Ideally push into a detail view, I think.

JASON: Okay.

KEVIN: And the way that we would do that -- I guess there's a few ways you could do it. But on that get book like API query thing, there are eventhandlers for success and failure and stuff like that and we probably want to, like, yeah. We might want to like, instead of control a query. We would want to kind of go to -- do a navigation. I think that's what we want. And then navigate to screen. And we could say, you know, book data screen. And then, you know, debounce would prevent us from Spamming it and stuff like that. But that's probably fine as-is. So, now if you hit like save and run... then that kind of like does that thing. So, it will like -- it will do the query and then it kind of pushes and gives us an automatic back button situation.

JASON: You want to throw me another ISBN and I'll try it with a different one too.

KEVIN: Yeah. Let's -- let me give that a shot. Where is another one? Do, do, do... let's go with... this is one of the ones I was testing with earlier. Open library is chugging a little bit. Pardon me. All right. I got one. And we'll pop it into the chat there so you can try it.

JASON: All right. So, pulling in a new book. Okay.

KEVIN: Yes.

JASON: And as soon as we put it in, it runs and gives us the details and we can come on back.

KEVIN: Sweet.

JASON: That's great. So, the thing that we didn't do here, is I don't think we're adding this to a our library yet, right? Right now we're just looking it up and displaying it.

KEVIN: Yes.

JASON: I think what I need is a button that's like "Add to library."

KEVIN: Yep, exactly right.

JASON: Okay. So, I want a button --

KEVIN: We can --

JASON: And I wanted this button say, "Add to library," right?

KEVIN: Yep.

JASON: Do I need to make a query first?

KEVIN: Yep. You are getting the hang of it. So, this time we're gonna do like a SQL query that's gonna do like an insert. So, we'll go up to our like Retool database. And for like the inserts, I find it's actually kind of easier to not do a SQL query directly. So, there's like a SQL mode thing that's up just above that text box. And you can choose it to be like a GUI mode. And this kind of lets you like, you know --

JASON: Oh, nice.

KEVIN: So you don't have to necessarily set up or write the query directly. You certainly can. You can certainly write an insert.

JASON: I'm going to do something called an up cert. Because I want to -- like if I scan the same book twice, I don't want an error. I just want it to re-update the book.

KEVIN: Yeah. I think that would work. I think the way that I set it up in the demo, just in case there's like some -- if folks check it out later. I just added a new one every time to support like multiple copies of the books.

JASON: Oh! So, we can -- we -- it won't -- yeah, we didn't mark ISBN as the ID. So, it doesn't matter. So, then, we're going insert a record and it's gonna give us the -- these will be autogenerated, I'm guessing.

KEVIN: That's right.

JASON: ISBN is going to be the ISBN input value. The title would be... I'm on a new keyboard and I haven't moved the key caps around. So, the key caps say things that they don't do. So, when I look at my hands, I get in trouble. And let's see... so, we have -- the title is gonna be the title.

KEVIN: Yep.

JASON: Remind me what else we need here. Total --

KEVIN: Author.

JASON: Author --

KEVIN: Yes, that's right. I think authors is, yeah. I think that's an array. So, name.

JASON: Okay. Love the autocomplete. Makes that way less complicated for me.

KEVIN: Yes.

JASON: Covers. What we want the large.

KEVIN: I think the large one. Because the large one is still actually pretty small in terms of resolution.

JASON: Yeah.

KEVIN: Sweet. I think that --

JASON: That should do it. Right?

KEVIN: I think that's all the stuff we want, yeah. So, I think, yeah, I think if we save that... and then yeah. I think, yeah, maybe we need that to like, insert book or... what have you.

JASON: Okay.

KEVIN: And then yeah. For our button there, we could set up an event handler, control query, insert the thing, trigger the thing. And that would -- that would add that book to the library. And then if we wanted, we could also like set up a success handler for that insert book query that would kind of push us back to the other screen. So, like we could do a navigation thing. So, like navigate to screen. And then yeah. What do we call it?

JASON: Screen 1 is the -- screen 1 is our book inventory.

KEVIN: We could do that. That could be a thing. Or we could trigger a back to go -- that's another thing that we could do since we're in a state where we're in like a detail view. So, yeah, I think we could go back. I think is --

JASON: That would put us on insert a book, right?

KEVIN: I think it would bring us back to that screen with the ISBN number search thing if we did a back there.

JASON: Okay. All right. I don't think there's really a wrong answer on this. I think that's more of --

KEVIN: We can do whatever we want.

JASON: I think that's the UX team has opinions. But neither one is right or wrong. What's a user gonna want to do? Are they gonna want to add a bunch of books in succession? Or are they gonna add a book and get that one?

KEVIN: Yeah, I think there's possibly multiple right answers for how we want to do that. Yeah. So, I think that's actually doing the thing. I bet if we click that button, it will actually add a book to the library.

JASON: Bring this back. Come back out and...

KEVIN: I think --

JASON: Do I need to --

KEVIN: Yeah, I think what we haven't instrumented yet is the refresh thing. Actually, on the screen, there are events that you can subscribe to as well.

JASON: Okay.

KEVIN: I think where it says like "Screen events," there's a show or something along those lines.

JASON: Oh, here.

KEVIN: Yeah. And onVisible I think would be the one. And then we can do that all books query again and rerun it to get the latest list if we were so inclined.

JASON: Okay. So, then we're -- time checking. We got about 15, 20 minutes left. So, our remaining check box items here are to add the scanner. Which I think we should do that first in case we run out of time.

KEVIN: Yeah.

JASON: And then checking out a book, which would delete it.

KEVIN: Yep. That's right. Let's do the scanner. I agree. I think that would be a fun one to do next. So, for that, that's gonna be --

JASON: For that, I know we need another button at least. So, we can look up --

KEVIN: Yeah. So, to throw a monkey wrench a little bit, the scanner thing actually comes with its own button.

JASON: Oh, interesting. Okay.

KEVIN: So, yeah, you can go ahead and delete that little guy. And then, yeah. If you do like scanner? Yeah. You can search for it too. So, you could do a scanner.

JASON: Okay.

KEVIN: And then -- when that like -- when you hit that, that automatically kind of brings up the camera for you. And it doesn't actually --

JASON: Oh, cool!

KEVIN: Work in the desktop thing. It doesn't actually zap the thing. But it sort of works so you can see what the UI experience is.

JASON: Right.

KEVIN: Yeah so, that will allow you to do the scanner. And then you can -- like there's a data attribute of that scanner button then that is an array of items. Like that is the bar code that you scan. And in our case, like if we scan the back of a book, like it will be an array of ISBN numbers that it gives us back. And the way that I did it, was I actually like I, you know, when the scan was complete, I just like updated the value of that text field with whatever the scanned value was. So, yeah. So add an event handler for capture. And then we can, yeah, either control component I think is one way to do it. There's definitely like a few ways. And we could say like whatever that text is. And set the value equal to -- and that has to be a dynamic thing. So, we're gonna do the curly braces and then we're gonna like grab our scanner thing. Awesome. And then that has a data attribute to it. Which is an array. And it is possible to get multiple bar codes. But like I just kind of, you know, selected the first one so we could do like data sub zero.

JASON: Oh, did that wrong.

KEVIN: Sweet. Which is undefined at the moment. But I mean, theoretically, this looks like it would actually work. So, if you hit the X button on that. Just like scan book.

JASON: Okay.

KEVIN: Cool. This is where we get to see something that's a little neat about the Retool app. This app is ready to use on your phone.

JASON: Wait, it's already on my phone?

KEVIN: It will be like when you load it up.

JASON: Okay. So, let's gets it open. Home.

KEVIN: And then, yeah. Then you just refresh it. Now we have the completed version. Now there's the work in progress version called library app. That's the one that you have been building. And then like that's our --

JASON: Make this easier to see. Okay. So, this is... the book that we have been making. So, then I can go "Add a book."

KEVIN: Yep.

JASON: And let's grab one of these. So, I'm gonna grab -- let me get this out of the way. This is Salt Fat Acid Heat, if you haven't tried it, it is an absolutely stellar cookbook and they also made it into a TV show. So, let's -- I'm going to let's hit the scan ISBN.

KEVIN: Yeah. And if we zap that, that gives us the thing. And then, yeah. There it is.

JASON: There we go. Add to library.

KEVIN: And then if you add that to library.

JASON: And here it is!

KEVIN: Salt acid fat -- yeah. I think we're doing it.

JASON: That is freaking cool that it works that quickly. I am honestly continually impressed by how much we're capable of doing with modern tools like this. It is -- it is just stuff that when I first started working on the web felt so far out of reach. And then folks come on this show and they show me things like this, and I'm continually blown okay. Oh, I can do that. Like I may be just a web developer, but I just built a freaking mobile app that uses the camera to scan a bar code. None of those things fit into my definition of my skill-set, but it just works. There's so many tools and APIs that make this stuff possible. We really can -- you don't have to be an expert in everything. I don't have to know how phone access hardware works, I don't need to know how ISBNs work, there's a tool out there that can plug those things in for me.

KEVIN: Yeah, it's pretty sweet. The bread and butter for Retool is internal tools and business apps like we have been talking about. How I sort of use it is the way to build the little application that I would have never had time to build otherwise. I use it for dumb stuff all the time. I've built my own custom D&D on top of Retool as well. It ends up being really fun for prototyping, putting stuff together. Like in -- and it makes like sort of the ROI so much faster. So, like you can just build like little apps and not have to worry about, oh, this is gonna take me 40 hours to build this little crud app. In Retool, I can do it in 30 minutes or whatever.

JASON: And that's something that's really important. There's a time and a place to go extremely bespoke and really focus on all the details and get it exactly right and on brand and all the things that matter.

KEVIN: Absolutely.

JASON: And there are so many cases where it's not the right choice. Where you need everybody on your team to have the ability to check in or manage inventory or look at a dashboard. And like the branding is nice. But in so many cases, that stuff becomes a distraction. Where you're trying to, you know, get something that isn't visible externally to adhere to external branding guidelines. Instead of building value. You know? And so, getting into these places where you can take something like this little app that we built in, you know, what? We probably spent -- we spent less than an hour on this. And we were able to get the Retool app from the App Store. And we get there list of apps that we've built. We pop in and then let's grab another one. So, this is a cookbook that I love, it's from a restaurant called Ox. Called Around the Fire. So, let's scan in Around the Fire. I'm gonna add a book. Get my arm over my arm here. We're gonna scan the ISBN. And we'll bring this -- oh, wait, I need to go way.

KEVIN: camera reception has been tough.

JASON: This one doesn't have a cover in the library. It does have the book.

KEVIN: Open library doesn't have all the cover images.

JASON: But it found it. Here is Around the Fire with the details. It's a good cookbook. You know what? Why don't we add one more just so I can plug my friend Sarah's book. Engineering Management for the Rest of Us, it is an absolutely fabulous book by Sarah Drasner. Scan, and flip this thing over. And I'm going to get ISBN in the right place. And there it is. It found it.

KEVIN: Wow. It did find it. The cover art is so good. I feel like I should submitted that to the Open Library API.

JASON: But there it is. We've got the book in there. It's -- it's, you know, it's all working.

KEVIN: Yeah.

JASON: That is what we want. So, this is like -- this is some pretty incredible stuff that in the span of, you know, 45 minutes of active Dev time, we just put together a freakin' app that lives on my phone that interacts with the real world. That's not a thing that I would have guessed I was gonna be able to do in 45 minutes. I would have guessed that would take me a couple weeks.

KEVIN: Yeah, for sure. And like I think you started to hit on it. Which is that like if you are building an app for like your library staff or your field folks, like it's okay that like they access it through the Retool app and it's maybe not exactly branded at the precise way that you wanted it. But like speed and utility is actually what you care about when you're like -- in these types of use cases. So, it ends up being really slick in those types of cases.

JASON: Yeah, yeah. Absolutely. There's a question about iPad support. So, if we're doing the mobile -- can I just fire this up on my iPad?

KEVIN: I actually think that the iPad support isn't ready as yet. I think they are working on it. And before it exits beta, it should support the iPad. But I don't think it will actually work -- like I think it will work. But in like kind of a weird compatible mode situation.

JASON: Got it. So, you would be able to use it be, it's just now the going to be as beautiful as you want it to be on an iPad.

KEVIN: Yeah, I think there's some UI work.

JASON: Again, not what we're worried about for an internal app, we're worried about productivity. Again, it's a beta tool. But for a beta tool, I'm kind of continually impressed what this is for us. We have about 5 minutes of active Dev time left. Can we delete books?

KEVIN: I think we can delete books. This one is pretty straightforward. If we click on one of those, that will bring us to our detail screen. And yeah, we can throw a button down. Yeah. Let's say, checkout. Perfect.

JASON: Spaces in there, okay. And our interaction, we have an event handler. I don't have one yet. I need to build it.

KEVIN: You're already a pro. You have your rock and rolling, you got your database. You can go the GUI mode.

JASON: I think I want to just because it's gonna be faster for me. And we want to filter by ID equals...

KEVIN: And then I think in this case we want like that like collection view current item thing. Yeah. So, like that.

JASON: Collection view.

KEVIN: And I think like current item is a pointer at the JavaScript object like that we're... yeah. Well, I think it's...

JASON: What's it have in here? So, it's -- dot data, maybe? Here's the stuff. Where is this live something it's living in data.

KEVIN: Yeah. I don't know if it's data. I could have sworn there was like a current item. Here, let me look myself here. So, if there's not a current item, selected item. I led yous a stray. It's not current item. It's selected item.

JASON: So, it's collection view, selected item.

KEVIN: Yep and then that's like that JavaScript object. Yeah, I think ISBN would work. We could also use like the actual database identifier. So, like if we do have multiple copies.

JASON: Right.

KEVIN: Yeah.

JASON: Okay. So, this --

KEVIN: So, yeah.

JASON: That should do it. And then this should cause me to navigate to the home page?

KEVIN: Yeah. We could directly navigate to it. I think like back also might be what we want. Like because we will have drilled down to one level of navigation. So, I think you can just say like --

JASON: Okay.

KEVIN: Navigation method back. And then that is gonna pop this view off the stack. Cool. So, yeah. If we close that.

JASON: All right. So, then -- I'm gonna do this on the phone because that is freakin' cool.

KEVIN: I think we actually might have one more step too, though.

JASON: Oh, okay.

KEVIN: I think the button was set up to do the all -- I think we didn't connect the button to the query.

JASON: Oh, you're right. You're right. So, we need to checkout event... oh, I didn't rename the query. Okay. So, good. Okay.

KEVIN: We're also like looking at your hand, which is also fine.

JASON: Oh! Right. So, I -- I used click here. And I did a control query on the button.

KEVIN: Control query.

JASON: Went to query 4 because I forgot to rename this query that deletes. Real quick.

KEVIN: No problem.

JASON: Okay. So, we'll delete the book, which means that over here we are... oh, did I just do it?

KEVIN: Maybe.

JASON: And then we delete the book.

KEVIN: Yes, that's right.

JASON: So, then -- that's good? We're good?

KEVIN: Yes, I think so. I think we can go to the thing.

JASON: Let's try the thing. So, we're going into the library app. And I have a book. Let's -- let's do -- get A Wrinkle in Time. And I'm going to --

KEVIN: Yeah, I think that is a thing they're working on too.

JASON: Refresh.

KEVIN: To give you like a refresh function without having to go back out. But there we go.

JASON: Okay. Here is our book. I'm going to check it out. And there it is.

KEVIN: It's gone. Yeah, I think we did it.

JASON: It's gone. So, that is really freakin' cool. Like we were able to do a ton here with a nice intuitive API. It did what I wanted. And like the database that we brought in was one that was kind of set up custom. But this could be my production database that like if I wanted to have a like a super-admin interface or something where I get a list of all my client sites. I could go in and change their status from active to suspended or whatever it was. I could grab those details and build those out, I could have my list of users and change their subscription status. That's the sort of thing that I would look at and I would go, well, we don't have time for that.

KEVIN: Yeah.

JASON: We have to build these features, we don't have time to build this dashboard. Everyone just use the commandline. But it looks like if we can carve out an hour, we can build an internal app that lets us do these sorts of things. I can carve out an hour and make it work.

KEVIN: Yeah, that's definitely the promise of something like Retool. Because it pushes sort of the cost of building like software so low, you can just build way more of it than you could otherwise. Like building a Retool app is about as hard as like arranging a Keynote presentation. So, like --

JASON: Right.

KEVIN: You can build an app for kind of everything. And it's kind of funny. like Retool has taken that to heart. There's hundreds of little Retool apps that we use internally every day that do everything. You might have used a jank spreadsheet workflow before, we build a little bit of software that does the same thing. It is useful for that kind of stuff.

JASON: Yeah, extremely handy. I'm going to call that a great stopping points for us. We were able too build a full featured -- like actually full featured. We have the ability to create and remove books from the inventory app, it was intended to fulfill. But as far as my use case, that is what I want. I want to know what books I have and leave my inventory when I don't have them anymore. This is great.

KEVIN: Yeah.

JASON: For folks who want to learn more, where should they go?

KEVIN: You can definitely sign up for free at Retool.com. So, if you want to build an app like the one that we just -- we just saw. That would be great. Each of these applications that you build in Retool can actually -- I mentioned before, like it can be serialized to JSON. So, like I'll actually be doing that, like I'll Tweet from the Retool account like a link to a gist that actually has the JSON for a completed version of this application. So, if folks want to, you know, follow Retool or follow me on Twitter, I'll actually link out a gist to the completed version of the app. But yeah. It's something that you can try today. Everybody, you know, the mobile product is in public beta today. We would love if you could check it out and give us feedback on it.

JASON: A couple questions came in the chat that I think are good ones. Is this possible to export this to Xcode to continue building the app once you've started it?

KEVIN: I believe that you can export an Xcode project. But I don't think it would be sort of usable, editable like using a standard like Xcode environment. Abuse like under the covers we're actually using React Native. So, React Native is, yeah, the actual thing that is generating the app. That -- that -- the answer to that question may actually change like in the future. But today it's not necessarily possible to do that.

JASON: Okay. And then the second question is, is it possible to take this app and go the rest of the way, publish it on the App Store as a standalone app that's not using Retool?

KEVIN: Yeah, definitely. You can like sort of white label the Retool application and do a bit of customizations. You can have your own icon and kind of create an experience around your app specifically. So, that is definitely a thing you could do.

JASON: Got it. Excellent. Well, Kevin, this was a massive success. I had so much fun. I love any time I fete to do something that I've never done before like scanning, you know, scanning something with my phone. I know that's probably not a big deal to folks who do this stuff all the time. Damn it, that's cool.

KEVIN: It was fun for me. I was in a similar boat. As a web developer, it was cool. You did an excellent job. If we could give it up for Jason, we would be giving it up for Jason over the Internet.

JASON: Let me clap for myself.

KEVIN: Do we have a soundboard? Nice. Lovely.

JASON: Okay. Let me do a quick shoutout to Retool who took the time to sponsor this episode. Thank you very much. To Amanda from White Coat Captioning who has been doing the live captioning all day, thank you very much, Amanda. And that is made possible through the support of our sponsors, Netlify, Nx, New Relic and PluralSight and making this possible. Give us a follow. And while you're checking out the site, we have an absolutely incredible schedule coming up. Really excited for everybody coming through. Don't have time to walk through them. But read this and do subscribe on Twitter, YouTube, all the places. Get my newsletter. Because there's a lot of good stuff coming and I want to make sure you don't miss any of it because it's a lot of fun. Kevin, any parting words before we wrap this thing up?

KEVIN: No, it was super-fun. It never gets old to see someone discover something they didn't know they could do. Thanks for letting me hang out with you to be a part of that moment. Thank you very much.

JASON: It was a blast. Thank you, we're going to find somebody to raid and we will see you next time.