Craft로 식물 대시보드 만들기

이 예시에서는 Craft를 사용해 모든 식물과 관리 필요 사항을 컬렉션으로 관리하고, Lovable을 사용해 어떤 식물에 주의가 필요한지 한눈에 알 수 있는 아름다운 대시보드를 만들 것입니다.

식물은 Craft 문서의 컬렉션에 보관됩니다. 각 식물에 대해 종류, 위치한 방, 물 주기 빈도, 마지막으로 물을 준 날짜 정보를 추가합니다. 물론 컬렉션을 수정하고 식물에 대해 추적하고 싶은 항목에 대한 필드를 추가할 수도 있습니다.

템플릿을 사용해 식물 대시보드용 컬렉션이 포함된 새 문서를 만드세요:

식물 대시보드

문서에 대한 API 액세스를 활성화하면 문서를 읽거나 내용을 추가하는 데 사용할 수 있는 고유한 URL을 받을 수 있습니다.

단계 1

“상상해보기” 탭을 열어보세요

단계 2

“첫 번째 API 추가”를 클릭하세요

단계 3

API 연결에 이름을 설정하세요.

단계 4

“문서 추가”를 클릭한 뒤 Plant Dashboard 문서를 선택하세요.

단계 5

문서와 연결되는 API URL이 이제 상단에 표시됩니다

단계 6

“AI 번들 다운로드” 버튼을 클릭하세요. API 문서와 해당 문서의 내용이 담긴 폴더가 다운로드됩니다.

API URL을 아는 사람은 누구나 문서를 읽고 쓸 수 있다는 점을 기억하세요. 식물 대시보드 웹사이트에 접근할 수 있는 사람도 마찬가지입니다.

이제 Lovable에서 대시보드용 실제 웹사이트를 만들어 보겠습니다. 위에 표시된 예시 사이트에는 다음 프롬프트를 사용했습니다:

식물을 관리할 수 있는 대시보드를 만들고 싶습니다.

정보는 Craft에 저장되어 있습니다. 첨부된 파일에 현재 식물 대시보드 Craft 문서의 예시와 함께 식물 정보를 가져오고 업데이트하는 데 사용할 API 정보가 포함되어 있습니다. API 문서를 꼼꼼히 읽고 안내에 따라 주세요.

대시보드에는 각 식물의 작은 일러스트와 물 주기가 필요한 시점을 확인할 수 있는 진행 표시기가 포함된 식물 전체 목록이 표시되어야 합니다. 수동 정렬, 방별 정렬, 긴급도별 정렬이 가능해야 하며, 기본값은 긴급도순입니다.

각 식물에는 “물 주기 완료” 버튼이 있어야 하며, 이 버튼을 누르면 Craft에서 마지막 물 준 날짜가 업데이트됩니다.

Lovable로 이동해 프롬프트 입력란에 프롬프트를 붙여넣으세요. 방금 다운로드한 문서의 AI 번들을 꼭 첨부하세요.

Lovable이 번들의 내용을 분석해 문서 구조와 API 사용 방법을 파악한 후, 프롬프트에 따라 웹사이트를 구축하기 시작합니다.

이제 식물과 건강 상태를 표시하고 대시보드에서 바로 물 주기 완료를 표시할 수 있는 아름다운 사이트가 완성되었습니다!

식물 대시보드