WEBVTT 00:01.920 --> 00:08.160 In this lecture we will build a simple app using lovable, and I just want to briefly show you the interface, 00:08.160 --> 00:10.640 which already looks very, very intuitive. 00:10.640 --> 00:17.320 So it is clear that we should provide here the prompt and describe what our app should be all about. 00:17.760 --> 00:22.880 Apart from this, we can also provide here a design you're going to see here the possibility of attaching 00:23.160 --> 00:24.480 an existing image. 00:24.640 --> 00:28.400 And you can use that to guide the generation of your particular application. 00:28.680 --> 00:32.880 In terms of privacy, we have here the option public or private. 00:33.200 --> 00:37.480 In this case private is only available with a Pro account. 00:37.480 --> 00:43.760 So if you're just getting started with a free plan, whatever you create is going to be public. 00:44.560 --> 00:48.320 If we look just below we're going to find here some ideas. 00:48.320 --> 00:52.720 So if you don't know exactly what to get started with, just simply click on any of the suggestions 00:52.720 --> 00:55.800 here and you can already create something decent. 00:56.080 --> 01:01.080 And here further down you're going to find projects that have been created by the community. 01:01.480 --> 01:07.400 Remixes simply means that this was a public project and someone has used it to build something else. 01:07.400 --> 01:11.690 You're going to see here that some projects have been remixed quite a bit of times. 01:12.090 --> 01:14.450 So let's go back to what we wanted to do. 01:14.650 --> 01:20.090 What we actually want to do is build a Kanban board so that we can manage our tasks. 01:20.570 --> 01:24.090 And for that, we're going to simply use this initial prompt. 01:24.090 --> 01:27.930 And I'm also going to attach an image which you're going to find as a resource to this lecture. 01:28.650 --> 01:29.090 There we go. 01:29.090 --> 01:31.090 So this is the image that is going to be used. 01:31.090 --> 01:34.370 So let's go ahead and create this new project. 01:34.930 --> 01:39.250 Now initially what we're going to see here is that loveable is starting to work. 01:39.570 --> 01:43.450 And this may take a few minutes depending on the complexity. 01:43.450 --> 01:45.370 So we're just going to skip ahead of it. 01:49.890 --> 01:53.450 So what we're going to see here on the left hand side is the actual chat. 01:53.450 --> 01:58.370 This is where we are interacting with loveable and can request changes and so on. 01:58.770 --> 02:04.890 And here on the right hand side, this is where ideally we should actually see the preview. 02:05.530 --> 02:07.010 And this is currently broken. 02:07.010 --> 02:09.690 So we will have to go ahead and fix it. 02:09.970 --> 02:12.050 And we can see here the logs. 02:12.290 --> 02:14.610 And we're going to see here something very technical. 02:14.610 --> 02:17.810 But essentially it says fail to import this particular thing. 02:18.300 --> 02:23.620 Okay, not really sure exactly what it is I'm going to ask it to fix so we can exit this view. 02:24.140 --> 02:27.820 And when we're seeing this, we can simply ask for a fix. 02:29.380 --> 02:33.100 So now we have sent another message another prompt. 02:33.340 --> 02:35.700 And this is already created for us. 02:35.700 --> 02:38.460 So from the code present I get the error below. 02:38.460 --> 02:41.340 Please think step by step in order to solve it. 02:41.820 --> 02:48.540 So we're going to see here if this will lead to actually resolving this particular problem. 02:49.740 --> 02:51.540 It looks like a package was missing. 02:51.540 --> 02:55.020 I don't know why this hasn't happened directly from the beginning. 02:55.900 --> 02:57.220 So this has been now refactored. 02:57.220 --> 03:01.140 We should click on this refresh page to actually see the application. 03:01.460 --> 03:02.140 And there we go. 03:02.180 --> 03:03.620 This is my board. 03:03.660 --> 03:05.300 Now I have here the task. 03:05.300 --> 03:07.420 So let's see here adding a new task. 03:07.500 --> 03:08.220 Let's see here. 03:08.220 --> 03:09.220 Hello lovable. 03:10.220 --> 03:17.260 And this task has been added I can move it and it is already pretty decent right. 03:17.660 --> 03:20.180 So let's understand a bit what has happened. 03:20.180 --> 03:25.340 Well the interesting part is actually the code and that is hidden right here. 03:25.340 --> 03:31.240 So we can enable this dev mode devmode and this will show us the entire code of the application, everything 03:31.240 --> 03:32.840 that has been generated so far. 03:33.160 --> 03:35.600 And theoretically we can also make changes here. 03:35.600 --> 03:37.600 But I don't want to scare you right from the start. 03:37.640 --> 03:40.960 I just want to show you where the entire application is in terms of the code. 03:41.440 --> 03:42.240 Perfect. 03:42.280 --> 03:48.720 Now, apart from this, what I also wanted to show you is a way how we can make some changes so we can 03:48.720 --> 03:53.880 simply go ahead and request additional changes here and continue the conversation and start building 03:53.880 --> 03:54.800 this application. 03:55.040 --> 03:56.440 And this is pretty intuitive. 03:56.480 --> 03:59.200 There are a few other things that are maybe not so intuitive. 03:59.520 --> 04:02.600 The first option here is this chat mode. 04:02.600 --> 04:03.760 So there are two modes. 04:04.280 --> 04:09.080 One of them is actually the chat mode and this is now enabled. 04:09.080 --> 04:13.720 It means that we can have a conversation with lovable, but we're not actually making changes to the 04:13.720 --> 04:14.840 project itself. 04:15.480 --> 04:20.640 So if we disable the chat mode, we are going to be in the edit mode. 04:20.640 --> 04:25.920 Meaning whenever we ask for something, these changes are going to be implemented directly. 04:26.400 --> 04:32.400 Apart from this, we have here this history, and we can see here the different things that have been 04:32.400 --> 04:32.720 done. 04:32.720 --> 04:34.720 So it's kind of like a git history. 04:34.920 --> 04:38.690 And we can also go ahead and restore a specific version if we need to. 04:38.970 --> 04:41.450 So lovable is keeping track of everything. 04:41.770 --> 04:47.690 And last but not least, one last thing that is maybe a bit hidden here is this edit functionality. 04:47.690 --> 04:49.410 So we can click here on edit. 04:49.850 --> 04:57.170 And actually what we can do here is make some changes through a visual interface without actually using 04:57.170 --> 04:57.650 the AI. 04:57.930 --> 05:02.010 So this is going to be very interesting because I can simply call this my board. 05:03.370 --> 05:08.370 And when I select a particular element this is going to be a header here. 05:08.370 --> 05:09.650 So I can make the changes. 05:09.650 --> 05:13.450 Also here I can increase the font I can decrease the font if I want to. 05:13.490 --> 05:17.530 So this would be a larger font just to show you a simple example. 05:17.530 --> 05:20.890 So there are other things that can be edited through this interface. 05:20.890 --> 05:23.290 And this will also count here as a change. 05:23.330 --> 05:26.010 You're going to see here visual edit in lovable. 05:26.010 --> 05:28.170 So this change is going to be persisted. 05:28.410 --> 05:31.610 But most importantly this is not using messages. 05:31.610 --> 05:36.650 So if you are short on the number of messages you can make some changes directly to the application 05:36.650 --> 05:37.290 itself. 05:37.850 --> 05:43.050 So I hope this is useful and a good start into using lovable.