WEBVTT 00:02.000 --> 00:08.320 The design of the user interface in lovable is very inviting in terms of jumping directly into developing 00:08.320 --> 00:13.800 an application, and the fact that even with a simple prompt, we can already get something functional 00:14.080 --> 00:17.040 can give the impression that everything is fast. 00:17.320 --> 00:23.000 Now, actually, just providing a simple prompt is a good idea for a quick test, but if you want to 00:23.000 --> 00:29.000 build a more useful project and do it right, we should provide more detailed instructions. 00:29.000 --> 00:34.280 Remember, in terms of prompt engineering, if you are really investing very little time in your initial 00:34.280 --> 00:38.840 prompt, the output that is coming out is also not going to be very good. 00:38.880 --> 00:42.400 Or you need to go through a lot of iterations to actually get what you want. 00:42.440 --> 00:44.720 And that is also kind of like a waste of time. 00:45.360 --> 00:50.440 Apart from this, you also want to be strategic about the steps we take in terms of building the application. 00:50.440 --> 00:56.720 We don't want to provide a prompt that contains everything that is needed and just a lovable build. 00:56.720 --> 00:57.440 Everything. 00:57.680 --> 01:00.280 So in this lecture we're going to create a few things. 01:00.280 --> 01:05.840 First of all, we're going to use ChatGPT with an initial prompt that will help us create a software 01:05.840 --> 01:11.040 specification or a product requirements document that we will provide loveable. 01:11.520 --> 01:15.360 Based on the specification, we'll also need to create a to do list. 01:15.640 --> 01:20.600 And apart from this, we'll also need this initial prompt because to create a project we cannot create 01:20.600 --> 01:22.040 an empty project in lovable. 01:22.040 --> 01:26.520 We still need to provide an initial prompt, so it's totally up to us if we want to continue this conversation 01:26.560 --> 01:30.720 as it is right now, or if we want to start a new project from scratch. 01:30.720 --> 01:33.080 I'm going to start a new project from scratch. 01:33.320 --> 01:36.680 But first of all, let's focus at creating that PRD document. 01:36.840 --> 01:41.720 So already prepared here a prompt which I'm going to link as a resource to this lecture so that you 01:41.720 --> 01:43.160 can also have access to it. 01:43.560 --> 01:46.520 And in a nutshell this is going a bit more technical. 01:46.520 --> 01:52.520 So if you don't have the technical information in order to create something like this to begin with, 01:52.760 --> 01:58.440 you can have a conversation with ChatGPT in advance to figure out what would be some specific frameworks 01:58.440 --> 02:01.920 or tools or technologies that would make this possible. 02:02.190 --> 02:02.430 now. 02:02.430 --> 02:08.510 In a nutshell, we're asking ChatGPT to write for us a software specification, and we're providing 02:08.510 --> 02:13.910 here a bit of information in terms of what we want to build and a list of features that we consider 02:13.910 --> 02:14.750 important. 02:14.750 --> 02:20.790 And these are relatively simple features, what you can pretty much describe any way, if you're looking 02:20.790 --> 02:23.190 at this board, you can create a task. 02:23.230 --> 02:26.590 You can create a card, you can move that card somewhere else. 02:26.910 --> 02:31.510 And these kind of things in terms of how the application should work. 02:31.790 --> 02:36.990 And we're going to start here with this, because this is something that pretty much everyone should 02:37.030 --> 02:40.270 be able to write, even if it doesn't include the technical language. 02:40.870 --> 02:47.150 But probably the most important thing is this consulting that we're doing first with ChatGPT, just 02:47.150 --> 02:50.790 trying to clarify, is there anything that is missing? 02:50.790 --> 02:55.990 And we're going to get back some follow up questions like user authentication if we need to support 02:55.990 --> 03:00.590 multiple boards, what kind of information do we need in the cards and so on. 03:00.630 --> 03:03.950 So there's a lot of things that need to happen in terms of this. 03:04.230 --> 03:09.230 And these are good questions, and these are relevant questions that we should have in our application. 03:09.230 --> 03:12.150 So this is why it's good to have this conversation here. 03:12.390 --> 03:13.790 So I'm going to answer these questions. 03:13.790 --> 03:17.630 And then I'm going to take a look at what has ChatGPT generated. 03:18.950 --> 03:22.230 So I went ahead through the questions that ChatGPT asked. 03:22.550 --> 03:25.550 And essentially I said I don't need any user authentication. 03:25.550 --> 03:26.950 We don't want to complicate things. 03:26.950 --> 03:29.110 There's only going to be one board. 03:30.030 --> 03:32.270 The cards will only have the title. 03:32.310 --> 03:38.150 There is no need for collaboration in terms of frameworks that we want to use for the UI. 03:38.190 --> 03:40.270 We're just going to use something that's popular. 03:40.310 --> 03:42.110 Doesn't really matter so much. 03:42.390 --> 03:45.310 And we also want to make this mobile optimized. 03:45.510 --> 03:51.870 So this is what we're going to get back in terms of the information that we need for this PRD. 03:52.950 --> 03:59.110 I actually went over this specification and I would say initially I'm happy with what is inside here. 03:59.110 --> 04:00.870 So I'm not going to make any changes. 04:01.070 --> 04:05.230 Instead, I'm going to move on to the second part and that is creating a to do list. 04:05.230 --> 04:07.910 And for that I'm going to use another prompt. 04:08.150 --> 04:12.390 So just assuming that we're happy with this specification, we're going to say, okay, this is the 04:12.390 --> 04:13.790 specification that we want. 04:13.830 --> 04:16.630 And based on this we want to create a to do list. 04:17.030 --> 04:20.630 And we want to build these features in a logical order. 04:20.670 --> 04:24.870 So we want to break down everything that needs to be done into individual steps. 04:24.950 --> 04:30.670 For example I've already given here some ideas like the setup part where we're just setting up the project, 04:30.710 --> 04:33.230 installing project dependencies, creating the layout. 04:33.590 --> 04:39.390 And then we're going to use here a service called Supabase in order to host a database. 04:39.670 --> 04:43.150 And we also need to get into that and do it as a separate step. 04:43.190 --> 04:47.070 And there may be there's some basic functionality and some advanced functionality that needs to be done. 04:47.550 --> 04:52.030 This is just an idea in terms of what needs to be done there. 04:52.390 --> 04:57.870 So just kind of let know ChatGPT break this down into individual parts. 04:57.870 --> 05:01.030 And you're going to see here that's actually going to create more and more parts. 05:01.190 --> 05:02.790 And that's a good thing. 05:02.830 --> 05:07.070 So we're going to say here that we want everything in the markdown format. 05:09.110 --> 05:15.630 Now to simplify things in terms of the to do list, I didn't ask for any acceptance criteria, nor did 05:15.630 --> 05:16.750 I provide any. 05:17.070 --> 05:24.670 And this will make the specification and the to do list less specific and opens the door for more bugs, 05:24.670 --> 05:25.990 in theory at least. 05:26.430 --> 05:32.870 So ideally, each item should also contain a way for the AI to validate if the desired behavior or outcome 05:32.870 --> 05:34.470 has been implemented or not. 05:34.870 --> 05:40.110 If we invest more time into better instructions, also, what we're getting from the AI is going to 05:40.110 --> 05:41.310 be better. 05:42.150 --> 05:44.310 So now we have everything in markdown format. 05:44.710 --> 05:47.790 And this is already very, very nice what we have here. 05:47.950 --> 05:50.350 But there's just one more thing that I need. 05:51.510 --> 05:54.710 And that is the third and final prompt. 05:54.710 --> 05:57.590 We're going to start here with this setup task. 05:58.070 --> 06:03.310 And because we cannot start a project in lovable as an empty project, we always need to provide a prompt. 06:03.950 --> 06:09.260 The idea here is to provide an initial prompt that will help us kick start this project. 06:09.300 --> 06:13.660 Now, lovable is already pretty good at design, so we don't need to get too deep there. 06:13.700 --> 06:19.420 For example, what's coming back here is probably a bit just too detailed, but we're going to see here 06:19.420 --> 06:21.420 in a second if this makes sense or not. 06:21.460 --> 06:25.860 But the main idea is that we need an initial prompt just to create the basic things. 06:25.860 --> 06:32.260 Or we can simply go ahead and provide here the context, and then take the first task that is already 06:32.260 --> 06:34.380 available here in terms of the setup. 06:35.300 --> 06:40.780 This lecture has been a bit more theoretical, and I totally understand that writing the specifications 06:40.780 --> 06:46.900 isn't really the most cool or exciting thing, but what I want you to take from this is that prompt 06:46.900 --> 06:47.700 engineering. 06:47.740 --> 06:54.220 Knowing how to create these specifications is so important and has a tremendous impact on the application 06:54.220 --> 06:55.060 that you're building. 06:55.340 --> 07:00.820 And this is why I'm spending a bit more time on this, just for you to understand how important this 07:00.820 --> 07:02.980 is, to avoid issues later.