In this lecture we will build a simple app using lovable, and I just want to briefly show you the interface,
which already looks very, very intuitive.
So it is clear that we should provide here the prompt and describe what our app should be all about.
Apart from this, we can also provide here a design you're going to see here the possibility of attaching
an existing image.
And you can use that to guide the generation of your particular application.
In terms of privacy, we have here the option public or private.
In this case private is only available with a Pro account.
So if you're just getting started with a free plan, whatever you create is going to be public.
If we look just below we're going to find here some ideas.
So if you don't know exactly what to get started with, just simply click on any of the suggestions
here and you can already create something decent.
And here further down you're going to find projects that have been created by the community.
Remixes simply means that this was a public project and someone has used it to build something else.
You're going to see here that some projects have been remixed quite a bit of times.
So let's go back to what we wanted to do.
What we actually want to do is build a Kanban board so that we can manage our tasks.
And for that, we're going to simply use this initial prompt.
And I'm also going to attach an image which you're going to find as a resource to this lecture.
There we go.
So this is the image that is going to be used.
So let's go ahead and create this new project.
Now initially what we're going to see here is that loveable is starting to work.
And this may take a few minutes depending on the complexity.
So we're just going to skip ahead of it.
So what we're going to see here on the left hand side is the actual chat.
This is where we are interacting with loveable and can request changes and so on.
And here on the right hand side, this is where ideally we should actually see the preview.
And this is currently broken.
So we will have to go ahead and fix it.
And we can see here the logs.
And we're going to see here something very technical.
But essentially it says fail to import this particular thing.
Okay, not really sure exactly what it is I'm going to ask it to fix so we can exit this view.
And when we're seeing this, we can simply ask for a fix.
So now we have sent another message another prompt.
And this is already created for us.
So from the code present I get the error below.
Please think step by step in order to solve it.
So we're going to see here if this will lead to actually resolving this particular problem.
It looks like a package was missing.
I don't know why this hasn't happened directly from the beginning.
So this has been now refactored.
We should click on this refresh page to actually see the application.
And there we go.
This is my board.
Now I have here the task.
So let's see here adding a new task.
Let's see here.
Hello lovable.
And this task has been added I can move it and it is already pretty decent right.
So let's understand a bit what has happened.
Well the interesting part is actually the code and that is hidden right here.
So we can enable this dev mode devmode and this will show us the entire code of the application, everything
that has been generated so far.
And theoretically we can also make changes here.
But I don't want to scare you right from the start.
I just want to show you where the entire application is in terms of the code.
Perfect.
Now, apart from this, what I also wanted to show you is a way how we can make some changes so we can
simply go ahead and request additional changes here and continue the conversation and start building
this application.
And this is pretty intuitive.
There are a few other things that are maybe not so intuitive.
The first option here is this chat mode.
So there are two modes.
One of them is actually the chat mode and this is now enabled.
It means that we can have a conversation with lovable, but we're not actually making changes to the
project itself.
So if we disable the chat mode, we are going to be in the edit mode.
Meaning whenever we ask for something, these changes are going to be implemented directly.
Apart from this, we have here this history, and we can see here the different things that have been
done.
So it's kind of like a git history.
And we can also go ahead and restore a specific version if we need to.
So lovable is keeping track of everything.
And last but not least, one last thing that is maybe a bit hidden here is this edit functionality.
So we can click here on edit.
And actually what we can do here is make some changes through a visual interface without actually using
the AI.
So this is going to be very interesting because I can simply call this my board.
And when I select a particular element this is going to be a header here.
So I can make the changes.
Also here I can increase the font I can decrease the font if I want to.
So this would be a larger font just to show you a simple example.
So there are other things that can be edited through this interface.
And this will also count here as a change.
You're going to see here visual edit in lovable.
So this change is going to be persisted.
But most importantly this is not using messages.
So if you are short on the number of messages you can make some changes directly to the application
itself.
So I hope this is useful and a good start into using lovable.