[00:00] 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
[00:14] changing the look, adding new features, signing in real users, and fixing security issues. And I'm David. I've partnered with Lovable for this walkthrough, so head to the link in
[00:27] 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 here on the main workspace, let me give you a quick orientation starting with a
[00:43] Two things you need to know are number one, the home button to get you back to the screen, and number two, all of your recent chats down below. You In the center of the right pane, you have your prompt box. That's how you
[00:58] 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 Once you start building projects, you'll also see a visual representation of them down below.
[01:15] 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 So what are we building? Well, you know that feeling when you've got 10 to
[01:32] you can write them down. That is what we're fixing. We're building an app where you just ramble your to So even with this idea, the most intimidating thing is staring at this blank prompt
[01:49] One thing you could do is go read Lovable's prompting best practices. There are some But for the sake of time, I will give you the core components you need
[02:03] 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 Number two is how the user moves through the app that's also known as the
[02:19] My advice is to start with the simplest version of the goal you can and That's enough for most of us because you'll probably spend a bunch of time tweaking And that's a lot easier when you only write one to two features versus 10.
[02:35] send in the prompt. I'll now paste a prompt which I created earlier. If you want to follow along description.
[02:50] of the app. It's simply a web-based mobile app that a person can use to record ideas Next, we've got a very simple user flow of how this should look.
[03:02] 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. Finally, I'm giving a constraint to hard code the Google account just for simplicity for
[03:18] Now, number three, which is new, is a comment on the design look and feel. Really clean, slick, minimal,
[03:30] Now, if you have more specifics like brand colors, definitely put them in here. We're asking lovable to ask us questions to clarify what we want.
[03:43] 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. There are probably millions, if not billions of different combinations of apps that could come
[03:59] So let's give the AI a chance to give us something that we like by After a couple of seconds, these questions pop up. That's okay. Just answer them the best you can.
[04:15] 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. And this is good because it means the AI is trying to do right by
[04:30] It's asking, do I want to use a third party voice transcriber or just use This next one is also a technical question.
[04:43] We will keep things simple and just use the Lovable connector to connect Google Calendar. We'll just leave that as the default answer. Now, it took about 30 more seconds and it created this plan.
[04:56] 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,
[05:08] It might be called something different and how it works. If something in this doesn't look right, follow the prompt box Make any edit you need to and then approve the plan with me when you're
[05:22] Now, I've already connected mine through Lovable. If you haven't yet, click the connect button, sign in with your Google account,
[05:34] And after a few minutes, you'll see your app live on the right side of 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
[05:46] I'll click the stop button here, things for a couple of seconds, Now in this version, it took the exact current time that I spoke those tasks
[05:58] It's not rounded to the nearest 15 minutes or 30 minutes. Now let's just see if it goes to our calendar or not. you'll see both of those tasks.
[06:13] For me, it was the fact that these tasks had to go from 202 to So I'll prompt it to make a change and you should too. I'm just saying the task should be set to start at the nearest 15 minute
[06:28] not in the past and not at the current time. If you want to open this screen in a new tab, you can click this If you want to preview how this looks in a tablet or a phone view,
[06:43] So the first click shows you a tablet. Now it's finished. We'll add this one to the calendar and then see what shows up.
[06:57] This is now correct because this last task goes until 302, Now this is correct, but it's not complete. I need to call Kevin tomorrow at 10 AM.
[07:12] So we've got to fix this. When you're done, I'll walk you through it. We're adding a new feature, allow the user to specify in their voice
[07:26] when the task must be done and how long it takes. So it should recognize words like tomorrow, yesterday, And you should give it rules on how to disambiguate between certain terms.
[07:43] Next Monday is that this upcoming Monday or the one after, and so on. the more the AI will understand you, the less time you'll waste making more changes
[07:59] 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 It got the dates right, but it still didn't get the times right.
[08:15] it. and my prompt might look something like this. because the times look off by about seven hours.
[08:29] to make sure the AI really understands me. Now this plan is pretty technical. In this case, I would ask the AI for help.
[08:45] Can you explain this in language that I understand? because I know this will work. I'll click approve. Dates and times now look perfect, and if we add them to the calendar,
[09:01] I hope you'll agree that this app is already pretty powerful, The last step is to publish it, so you can access it on your phone. copy and paste this prompt.
[09:18] to allowing other people to use their own. so that's why I've written, walk me through what I need to do inside the I'll take care of this off-camera. You can do the same by following these
[09:33] and now the only step left is to publish. Let's walk through it together. You'll get a free URL for the app. You can customize this just a bit,
[09:47] but if you need a fully custom domain, you'll need to get the pro plan. We're going to stick with public because we have authentication in place. and the social image of your app.
[10:01] Now, before you publish, Lovable does recommend running this in-depth security scan. just to make sure you don't have glaring security problems.
[10:14] 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 When the app goes live, you can view it straight in your browser,
[10:27] You can also open the app live on your phone, but with this browser URL bar still there, so there's one prompt we can use to fix that.
[10:41] that appears as an app icon on your phone. The nice thing about AI is that you don't need to know that. an app icon on my phone.
[10:55] It'll set all this up for you. because you see references to PWA, and you'll get a notice that you can add this to the home screen.
[11:08] Then refresh the page on your phone and tap the share icon. It takes the app icon you just created,
[11:20] Here's how that looks on the home screen. Congratulations, you just built a real app that runs on your phone, So go build your next app at the link in the description below.
[11:37] I'm David, I'll see you in the next video.