tl; dr

이 블로그는 Supabase & Lovable을 사용하여 날이 아닌 몇 시간 내에 풀 스택 앱을 만드는 방법에 대한 짧은 자습서/방법입니다! 이 도구를 사용하여 풀 스택 AI 기반 Calorie/Nutrition Tracker 앱을 8 시간 만에 만들었고이 블로그에서 "어떻게"를 보여줄 것입니다.

아이디어

Claude 및 Chatgpt와 같은 LLM을 일일 식사, 칼로리 및 매크로를 추적하기 위해 자연 언어를 많이 사용하기 때문에 AI 기반 Calorie 트래커 앱을 오랫동안 구축하려고 생각했습니다. 그러나 개발자로서 나는 전체 프로세스를보다 쉽고 더 좋게 만들 수 있으며 munchwise를 정확하게 할 수 있다는 것을 알았습니다.
Munchwise는 귀하의 개인 정보를 기반으로 귀하를 위해 개인화 된 목표를 만들고 완전한 일일/주간 분석과 함께 천연 인간 언어를 사용하여 식사를 추적 할 수 있습니다!

특징 및 기술 스택

특징 -

• Calorie/Nutrition
에 대한 계정을 만들고 개인화 된 목표를 얻으십시오.
• 자연 인간 언어를 사용하여 식사와 칼로리/매크로를 추적합니다
• 전용 일일/주간 분석보기

기술 스택 -

• Supabase- 인증, 데이터베이스, 에지 함수
• Vite & React- 프레임 워크, 빌드 도구
• Tailwind CSS- 스타일링
• 사랑스러운 - 코드 생성

프론트 엔드 생성

ps : 시작하기 전에 사랑에 빠지고 새 계정을 만들어야합니다!

Frontend의 ​​경우 Lovable을 사용하여 최소한의 UI를 만들고 앱에 대한 기본 와이어 프레임을 얻었고 Lovable은 나를 전혀 실망시키지 않았습니다. Lovable에서 얻은 초기 디자인은 백엔드 작업을 시작하기에 충분했고 UI를 개선하고 변경할 수는 있지만 나 자신을 원합니다. 다음은 첫 번째 반복에서 보이는 모습입니다 -

이후이 후 나의 주요 초점은 모든 페이지에 대한 기본 UI를 구축하고 이와 같은 더 많은 프롬프트를 사용하는 것이 었습니다 -

몇 가지 더 많은 프롬프트 후, Lovable의 최종 UI는 이렇게 보였습니다 -

보시다시피, UI는 이미 코드를 쓰지 않고 이미 멋져 보입니다! 나는 최종 반복에서 사이드 바를 제거하고 모든 페이지에서 Top Navbar와 함께 가기로 결정했습니다.

Supabase 통합

백엔드/API 통합은 전면 엔드를 과도하게 엔지니어링하지 않기 때문에 항상 풀 스택 엔지니어가되는 데 복잡했습니다. 따라서, 백엔드 작업의 거의 80%를 그 자체로 할 수있는 사랑스러운 것은 놀랍습니다.
사랑스러운 페이지의 오른쪽 상단에있는 supabase 버튼을 클릭하면 supabase 계정을 Lovable에 연결할 수 있습니다. 연결되면 프롬프트를 다시 사용하여 테이블 스키마, 인증, RLS 정책 및 에지 함수를 작성해야합니다.
그러나 먼저 https://supabase.com-

1. supabase에서 github/email을 사용하여 계정 생성
2. 대시 보드에서 한 번 새로운 프로젝트 를 클릭 한 다음 새 프로젝트를 만듭니다.
3. 프로젝트를 만든 후에는 Lovable로 돌아가서 Supabase 계정을 연결하고 연결하기 위해 만든 프로젝트를 선택할 수 있습니다.

당신이 볼 수 있듯이, Lovable은 스키마와 함께 필요한 테이블을 만들었고, Supabase 프로젝트에서 필요한 에지 기능을 만들고 변경을 승인 한 후에는 마이그레이션을 실행했습니다!

AI Superpowers 추가

앱은 AI 완성에 의존하여 자연 인간 언어를 식사의 열량 및 영양 데이터로 변환합니다. 나는이 부분을 위해 함께 함께 사용했고 사랑스러운 일을 다시 한 번 어떻게 해야하는지 정확히 알았습니다! 방금 AI 부분에 AI를 함께 사용하도록 요청했고 API 키를 요청했고 완료되었습니다!

무료 계정을 만들어 자신만의 AI API 키를 얻을 수 있습니다. 더 많은 크레딧을 추가하려면 신용 카드가 필요합니다.

그리고 이것으로, 모든 앱의 기본 기능은 인증에서 사용자의 온보드, 식사 추적 및 분석에 이르기까지 아직 나에게 작성된 코드가 없지만.

앱을 마무리합니다

이제 앱이 준비되었으므로, 내가해야 할 유일한 일은 여기저기서 UI 관련 문제와 일부 백엔드 문제를 해결하는 것이 었습니다 (대부분 함께 관련된 API). 나는 앱에서 몇 시간 더 디버깅하고 물건을 수정했는데 여기에 앱이 어떻게 생겼는지 -

예쁜 깔끔한가? 그리고 나는이 앱이 8 시간 만에 만들어 졌다고 말할 때 농담이 아니며, 요즘 AI를 사용하여 달성 할 수있는 것은 상상할 수 없으며 지금까지 사용하지 않는다면 정말로 누락되었습니다!

모래밭

github -https://github.com/asrvd/munchwise ]&&] supabase -https://supabase.com
사랑스러운 -https://lovable.dev