黑色星期五:Craft 终身版立减 40%!

Imagine With Craft

Plant Dashboard

Plant DashboardPlant Dashboard

Manage your plant collection and ensure they stay healthy with a dashboard that tracks watering schedules and care routines.

Build It Yourself

In this example we will use Craft to manage a collection of all of your plants and their needs and Lovable to create a beautiful dashboard that lets us know at a glance which plants needs attention.

Step 1Create Your Doc

Our plants are kept in a Collection in a Craft doc. For each plant we add information about its type, which room it is in, how often it needs to be watered and when it was last watered. Of course you can adjust the collection and add fields for anything you would like to track about your plants.

Use the template to create a new doc with a collection for your plant dashboard:

Step 2Enable API Access

Enable API Access for your doc to get a unique URL that can be used to read from and add to your doc.

Click the “Imagine” tab in the sidebar

Step 1

Open the “Imagine” tab
Click “Add Your First API Connection” button

Step 2

Click “Add Your First API Connection”
Configure API connection settings

Step 3

Configure your API connection with a name.
Click “Add Document” button

Step 4

Click “Add Document” and select your Plant Dashboard document.
API URL displayed at the top

Step 5

The API URL that will be used to interact with your document is now displayed at the top
Click the “Download AI Bundle” button

Step 6

Click the “Download AI Bundle” button. This will download a folder containing the API documentation and the content of your doc.
Keep in mind that anyone who knows the API URL can read from and write to your doc, including anyone with access to your plant dashboard website.

Step 3Build on Lovable

Now lets go on and build the actual website for our dashboard on Lovable. For the example site shown above, we used this prompt:

I want to create dashboard to keep track of my plants.

The information is stored in Craft. Please check the attached file including an example of the current state of my Plant Dashboard Craft doc, as well as information on the API you should use to get and update my plants. Please read the API documentation carefully and follow its instructions.

The dashboard should show me an overview over my plants, with a little illustration for each of them and a progress indicator to check when they need to be watered. I want to be able to set them in their manual order, by room, and by urgency, with urgency being the default.

For each plant there should be a “Watered” button, which updates their last watered date in Craft.

Go to Lovable and paste the prompt into the prompt box. Make sure to attatch the AI Bundle for your document that we just downloaded.

Plant Dashboard 3

Lovable gets to work, analyzing the content of the bundle to understand the doc structure and how to use the API. Then it starts to build the website according to our prompt.

Plant Dashboard 4

Now we have a beautiful site that displays our plants and their health and lets us mark them as watered right from the dashboard!

More Ideas For You To Try

Back to the Gallery