] TL; DR

Этот блог является коротким учебником/как вы можете использовать Supabase & Tovable для создания приложений с полным стеком в течение нескольких часов вместо дней! Я создал приложение Calorie/Futrition Calorie/Futrition на основе AI, используя эти инструменты всего за 8 часов, и я буду показывать «как» здесь, в этом блоге.

]

] Идея

я думал о создании приложения Calorie Tracker на основе искусственного интеллекта для себя, так как я много использую LLM, такие как Claude и Chatgpt, чтобы использовать естественный язык для отслеживания моих ежедневных блюд, калорий и их макросов. Но как разработчик, я знал, что смогу сделать весь процесс проще и лучше, и Munchwise делает именно это.
Munchwise создает персонализированные цели для вас, основываясь на вашей личной информации, а затем позволяет отслеживать ваши блюда, используя естественный человеческий язык, а также полная ежедневная/еженедельная аналитика!

] Функции и технический стек

Функции -

]
• создать учетную запись и получить персонализированные цели для калорий/питания
]
• отслеживать блюда и их калории/макросы с использованием естественного человеческого языка
]
• просмотреть выделенную ежедневную/еженедельную аналитику
]

Tech Stack -

]
• ] Supabase - auth, база данных, края функции
]
• ] VITE & React - Framework, Build Tool
]
• ] Tailwind CSS - Styling
• ] Lovable - Code Generation
]

] Создание фронта

PS: Перед началом вы должны отправиться в Tovable и создать новую учетную запись!

для Frontend я использовал Movable, чтобы создать минимальный рабочий пользовательский интерфейс и получить базовый каркас для приложения, на котором я мог бы построить, и привлекательный не разочаровал меня. Первоначальный дизайн, который я получил от привлекательного, был достаточно хорош, чтобы начать работать над бэкэнд, а затем я мог улучшить и изменить пользовательский интерфейс, как бы я ни хотел. Вот как это выглядело в первой итерации -

после этого моим основным направлением было создать базовый пользовательский интерфейс для всех страниц и использование некоторых подобных подсказок -

после еще нескольких подсказок, последний пользовательский интерфейс, сделанный Tovable, выглядел так -

, как вы можете видеть, пользовательский интерфейс уже выглядит довольно красиво, не пишу код! Я удалил боковую панель в последних итерациях и решил пойти с Top Navbar на всех страницах.

] Интеграция Supabase

интеграция Backend/API всегда была сложной для меня, будучи инженером с полным стеком, так как я не переполняю инжинирирование своего фронта. Таким образом, милая способность выполнять почти 80% от бэкэнд -задачи само по себе было просто потрясающим.
] Все, что вам нужно сделать, это нажать кнопку Supabase в правом верхнем углу страницы привлекательной, а затем вы можете подключить свою учетную запись Supabase к привлекательной. После подключения вам необходимо снова использовать подсказку для создания схемы таблицы, AUTH, RLS -политик и краевых функций в соответствии с вами.
] Но сначала вам нужно будет создать учетную запись Supabase, если у вас ее еще нет, отправившись на https://supabase.com -

]
1. создать учетную запись, используя github/email на Supabase
]
2. один раз на панели панели нажмите на новый проект , а затем создайте новый проект.
]
3. , как только вы создали проект, вы можете вернуться к привлекательности, а затем подключить свою учетную запись Supabase и выбрать созданный вами проект, чтобы связаться с ним.
]

Как видите, милые создали требуемые таблицы вместе со своей схемой и требуемые функции края в моем проекте Supabase, а затем, как только я одобрил изменения, запустила миграцию!

] Добавление SuperPowers AI

приложение опирается на завершения ИИ для преобразования естественного человеческого языка в калорийные и питательные данные о приеме пищи. Я использовал API вместе для этой части и еще раз знал, что делать, что делать! Я только что попросил его использовать вместе ИИ для части ИИ, и это попросило меня о моем ключе API, и это было сделано!

вы можете собрать свой собственный ключ AI API, создав бесплатную учетную запись, вам понадобятся кредитные карты, чтобы добавить больше кредитов.

, и с этим все основные функциональные возможности приложения были готовы от аутентификации до адаптации пользователя к отслеживанию и аналитике без какого -либо кода, написанного мной, но.

] Завершение приложения

теперь, когда приложение было готово, единственное, что мне нужно было сделать, это исправить некоторые проблемы, связанные с пользовательским интерфейсом, а также некоторые проблемы с бэкэнд (в основном связанные с API вместе. Я работал над приложением, чтобы несколько часов отладки и исправления вещей, и вот как выглядит приложение сейчас -

довольно аккуратно, верно? И я не шучу, когда говорю, что это приложение было сделано всего за 8 часов, то, чего мы можем достичь, используя ИИ в наши дни, невообразимо, и если вы уже не используете его, вы действительно упускаете!

] Ссылки

github - https://github.com/asrvd/munchise=&&&]] Supabase - https://supabase.com
] Lovable - https://lovable.dev
]

]