How to Build a Voice-to-Calendar App Using Lovable (Full Transcript)

[00:00:00] Speaker 1: In this video, you'll learn how to build an app straight from your imagination using Lovable. You just describe what you want in plain English and Lovable builds it for you. We'll start with what makes a good prompt and then move into edits like changing the look, adding new features, signing in real users and fixing security issues. And by the end, you'll have a real app that you can use on your phone. I'm David, I partnered with Lovable for this walkthrough so head to the link in the description below to follow along. When you click that link, you'll land here on the Lovable homepage. Now, to set up your account, click the Get Started button in the top right, sign up with your provider of choice and then come join me when you're done. Now that you're here on the main workspace, let me give you a quick orientation starting with the menu on the left side of the screen. Two things you need to know are number one, the Home button to get you back to this screen and number two, all of your recent chats down below. You can also access your profile settings by clicking on your profile icon. In the center of the right pane, you have your prompt box. That's how you get started writing your first app. And if you're struggling for inspiration, you can scroll down to reach Lovable's template library. These templates solve real industry problems that you can customize to your needs. Once you start building projects, you'll also see a visual representation of them down below. Now, you might have noticed that all of these templates and all of these apps are web apps and that's because Lovable is a web app builder. But we can make apps feel like they were made for the phone without having to deal with the app store. That's what we're gonna do today. So what are we building? Well, you know that feeling when you've got 10 to-do list items bouncing around your head and then you forget half of them before you can write them down? That is what we're fixing. We're building an app where you just ramble your to-do list and it puts those tasks on your Google calendar. So even with this idea, the most intimidating thing is staring at this blank prompt box. How the heck do you tell AI to do this? One thing you could do is go read Lovable's prompting best practices. There are some awesome tips in here to help you out on your Lovable journey. But for the sake of time, I will give you the core components you need for your first prompt. Before you type anything into this window, you need to get clear on two things. Number one is what the app does. This is also known as the goal or the problem that the app is trying to solve. Number two is how the user moves through the app. That's also known as the app flow. My advice is to start with the simplest version of the goal you can and maybe one to two features on top of that. That's enough for most of us because you'll probably spend a bunch of time tweaking how the app looks. And that's a lot easier when you only write one to two features versus 10. The third thing you need to know is to start with plan mode before you set in the prompt. You'll find that setting under the menu here that says build. I'll now paste a prompt which I created earlier. If you want to follow along with me, grab this prompt from the resource guide which you can find in the description. Here are four things that I want to call out. First, we've got the goal of the app. It's simply a web-based mobile app that a person can use to record ideas on the go. Next, we've got a very simple user flow of how this should look. Notice this reads like a narrative. For example, once recorded, you need to do this. Here's a constraint, assume a task is 30 minutes long. Here's the next step, make the user confirm the task. Finally, I'm giving a constraint to hard code the Google account just for simplicity for this demo. Those were the first two things we already covered. Now, number three, which is new, is a comment on the design, look, and feel. Notice I'm just being really buzzwordy. Really clean, slick, minimal. Lovable actually recommends you to use words like this. Now, if you have more specifics like brand colors, definitely put them in here. Now, number four, I love this. We're asking Lovable to ask us questions to clarify what we want. I'll go ahead and get this running and then explain why we do this. Basically, as humans, we are just really bad at explaining what we want, and so we're gonna end up with vague prompts like this. There are probably millions, if not billions, of different combinations of apps that could come from this prompt. So let's give the AI a chance to give us something that we like by asking us for more detail. After a couple of seconds, these questions pop up. Now, you'll probably get different questions and different answer choices than me. That's okay, just answer them the best you can. As I go through these, notice I got questions on visuals, and then I think the rest of these are all on functionality. Once we're done, Lovable goes back to the drawing board and writes up its plan. Now, I just got more questions, and this is good because it means the AI is trying to do right by what I want. This question is more technical. It's asking, do I wanna use a third-party voice transcriber or just use the free version? For this example, let's stick with free. This next one is also a technical question. We will keep things simple and just use the Lovable connector to connect Google Calendar. And this is another functionality question. We'll just leave that as the default answer. Now, it took about 30 more seconds, and it created this plan, and it's broken up into non-technical sections and technical ones. I can't emphasize enough that you need to spend the time to read through this. If you're not technical, at least look through the look and feel, screens and flow, or user flow. It might be called something different, and how it works. If something in this doesn't look right, follow the prompt box and tell Lovable what to do instead. Make any edits you need to, and then approve the plan with me when you're ready. Partway through, you'll be prompted to connect your Google Calendar. Now, I've already connected mine through Lovable. That's why you see David's Google Calendar here. If you haven't yet, click the Connect button, sign in with your Google account, and then link it to the project. And after a few minutes, you'll see your app alive on the right side of the page. So let's see if this actually works. I'll click the Mic button and then share a few tasks. I need to send the TPS report with a new cover sheet to Bill and the rundown of the client list to Charles. I'll click the Stop button here, it thinks for a couple of seconds, and we see some tasks to approve. Now, in this version, it took the exact current time that I spoke those tasks in to set this up. It's not rounded to the nearest 15 minutes or 30 minutes. We'll put a pin in that for later. Now, let's just see if it goes to our calendar or not. It said it added the task successfully, and if we go to my calendar, you'll see both of those tasks. Now, if you did that with me, I bet there was something that bugged you. For me, it was the fact that these tasks had to go from 2.02 to 2.32 p.m. So I'll prompt it to make a change, and you should too. Notice my prompt is very simple. I'm just saying the task should be set to start at the nearest 15-minute increment, not in the past, and not at the current time. Let's see how it does. While that's working, here are a couple quick tips. If you wanna open this screen in a new tab, you can click this arrow button up here. If you wanna preview how this looks in a tablet or a phone view, click this icon here. So the first click shows you a tablet, the second click shows you a phone, the third click takes you back to desktop. Now it's finished, let's try this again. I need to pay my credit card bill. We'll add this one to the calendar and then see what shows up. This is now correct because this last task goes until 3.02, and the next 15-minute slot that I'm open is 3.15. Now, this is correct, but it's not complete. So what do I mean by that? Let's try this. I need to call Kevin tomorrow at 10 a.m. I said 10 a.m., not 3 a.m., so we've gotta fix this. This is the next prompt to copy and paste from the resource guide. When you're done, I'll walk you through it. Okay, here's how this works. We're adding a new feature, allow the user to specify in their voice when the task must be done and how long it takes. Here are some examples of how it should work. So it should recognize words like tomorrow, yesterday, Friday at 3 p.m., and you should give it rules on how to disambiguate between certain terms. So like morning means before 11, afternoon one to four, next Monday is that this upcoming Monday or the one after, and so on. Basically, the more specific you could be with these cases, the more the AI will understand you, the less time you'll waste making more changes later. Let's try something a little more complicated. Email Kevin tomorrow at 10 a.m. about the video brainstorm, pick up dry cleaning Friday afternoon, and block an hour to prep for the client call next Tuesday morning. It got the dates right, but it still didn't get the times right. When this happens, I like to screenshot the problem and then tell AI to fix it. You can paste screenshots directly into the prompt window, and my prompt might look something like this. I basically mentioned this looks like a time zone issue because the times look off by about seven hours. And instead of building this time, I'm gonna go back to plan mode to make sure the AI really understands me. We'll get another plan here, and we can click the review button to explore it. Now, this plan is pretty technical. It does work, but that doesn't help if you don't understand it. In this case, I would ask the AI for help. I would say, I'm non-technical, can you explain this in language that I understand? I'll leave this as an exercise for you to try. Because I know this will work, I'll click approve. After that, and one more fix, this now works as expected. Dates and times now look perfect, and if we add it to the calendar, you'll see those events pop up right here. I hope you'll agree that this app is already pretty powerful, even though it didn't take us that long. The last step is to publish it, so you can access it on your phone. To make sure nobody else has access to your calendar, copy and paste this prompt. This tells Lovable to switch from using your Google Calendar to allowing other people to use their own. You have to do some steps outside of Lovable to set this up, so that's why I've written walk me through what I need to do inside the prompt. I'll take care of this off camera. You can do the same by following these steps. That step gave me a full sign-in experience with Google, and now the only step left is to publish. You'll find that publish button in the top right corner of the screen. Let's walk through it together. You'll get a free URL for the app. You can customize this just a bit, but if you need a fully custom domain, you'll need to get the pro plan. On this next page, we choose how visible it is. We're gonna stick with public because we have authentication in place. On this next page, you can change the title, description, and the social image of your app. I'll stick with the defaults. Feel free to change what you like. Now, before you publish, Lovable does recommend running this in-depth security scan. This is really good, especially for AI-generated code, just to make sure you don't have glaring security problems. One nice thing is that fixing these issues doesn't cost credits, as long as you use this try to fix all button. Now, this app won't last long, so I'll skip the security fixes this time and click publish. When the app goes live, you can view it straight in your browser and it looks like the preview experience. You can also open the app live on your phone and it looks just like the preview, but with this browser URL bar still there, it doesn't quite feel like an app. So there's one prompt we can use to fix that. There's a type of website called a progressive web app that appears as an app icon on your phone. The nice thing about AI is that you don't need to know that. You can just use plain English, like make it so I can install this as an app icon on my phone. Use a teal microphone for the icon. It'll set all this up for you. If you're doing this with me, you'll know it worked because you see references to PWA, that's progressive web app, and you'll get a notice that you can add this to the home screen. Go back to the publish icon and this time click update. Then refresh the page on your phone and tap the share icon. Near the bottom of the screen, you'll see add to home screen. It takes the app icon you just created and then you can add it to your home screen by tapping add in the top right. Here's how that looks on the home screen. Just tap it and it looks like a native app. Congratulations, you just built a real app that runs on your phone and you didn't even need to publish it to the app store. So go build your next app at the link in the description below. I'm David, I'll see you in the next video.