Mencipta penjejak kalori/pemakanan berasaskan AI timbunan penuh dalam hanya rs menggunakan Supabase & Lovable

TL;DR

Blog ini ialah tutorial/cara-cara ringkas tentang cara anda boleh menggunakan Supabase & Lovable untuk mencipta apl tindanan penuh dalam beberapa jam dan bukannya hari! Saya mencipta apl penjejak kalori/pemakanan berasaskan AI tindanan penuh menggunakan alat ini dalam masa 8 jam sahaja dan saya akan menunjukkan "bagaimana" di sini dalam blog ini.

Idea

Saya telah lama berfikir untuk membina apl penjejak kalori berasaskan AI sejak lama saya menggunakan LLM seperti Claude dan ChatGPT untuk menggunakan bahasa semula jadi untuk menjejaki makanan harian saya, kalori dan makronya. Tetapi sebagai pembangun, saya tahu saya boleh menjadikan keseluruhan proses lebih mudah dan lebih baik dan Munchwise melakukannya dengan tepat.
Munchwise mencipta matlamat yang diperibadikan untuk anda berdasarkan maklumat peribadi anda dan kemudian membolehkan anda menjejaki makanan anda menggunakan bahasa manusia semula jadi bersama-sama dengan analisis harian/mingguan yang lengkap!

Ciri & Tindanan Teknologi

Ciri -

• Buat akaun dan dapatkan matlamat peribadi untuk kalori/pemakanan
• Jejaki makanan dan kalori/makronya menggunakan bahasa semula jadi manusia
• Lihat analitis harian/mingguan khusus

Timbunan teknologi -

• Supabase - Fungsi Pengesahan, Pangkalan Data, Tepi
• Vite & React - Rangka Kerja, Alat Bina
• CSS Tailwind - Menggayakan
• Disayangi - Penjanaan kod

Mencipta Frontend

PS: Sebelum anda bermula, anda harus pergi ke Lovable dan buat akaun baharu!

Untuk bahagian hadapan, saya menggunakan Lovable untuk mencipta UI yang berfungsi minimum dan mendapatkan rangka wayar asas untuk apl yang boleh saya bina dan Lovable tidak mengecewakan saya sama sekali. Reka bentuk awal yang saya dapat daripada Lovable cukup baik untuk mula bekerja pada bahagian belakang dan kemudian saya boleh menambah baik dan menukar UI walau bagaimanapun saya mahu sendiri. Inilah rupanya dalam lelaran pertama -

Selepas ini fokus utama saya ialah membina UI asas untuk semua halaman, dan menggunakan beberapa lagi gesaan seperti ini -

Selepas beberapa gesaan lagi, UI terakhir yang dibuat oleh lovable kelihatan seperti ini -

Seperti yang anda lihat, UI sudah kelihatan cantik tanpa saya menulis sebarang kod! Saya memang mengalih keluar bar sisi dalam lelaran terakhir dan memutuskan untuk menggunakan bar navigasi atas pada semua halaman walaupun.

Mengintegrasikan Supabase

Penyepaduan bahagian belakang/API sentiasa rumit bagi saya sebagai jurutera tindanan penuh kerana saya tidak terlalu merekayasa bahagian hadapan saya. Oleh itu, Lovable dapat melakukan hampir 80% tugas bahagian belakang dengan sendirinya adalah menakjubkan.
Apa yang anda perlu lakukan ialah klik pada butang Supabase di penjuru kanan sebelah atas halaman Lovable dan kemudian anda boleh menyambungkan akaun Supabase anda kepada lovable. Setelah disambungkan, anda perlu menggunakan gesaan sekali lagi untuk mencipta skema Jadual, Pengesahan, dasar RLS dan fungsi Edge seperti yang anda perlukan.
Tetapi pertama-tama anda perlu membuat akaun Supabase jika anda belum memilikinya dengan menuju ke https://supabase.com -

1. Buat akaun menggunakan Github/E-mel di Supabase
2. Setelah di papan pemuka, klik pada Projek baharu dan kemudian buat projek baharu.
3. Setelah anda membuat projek, anda boleh kembali ke Lovable dan kemudian menyambungkan akaun Supabase anda dan memilih projek yang anda buat untuk berhubung dengannya.

Seperti yang anda lihat, Lovable mencipta jadual yang diperlukan bersama-sama dengan skemanya, dan fungsi Edge yang diperlukan dalam projek Supabase saya dan selepas saya meluluskan perubahan, ia menjalankan penghijrahan!

Menambah Kuasa Besar AI

Apl ini bergantung pada penyiapan AI untuk menukar bahasa semula jadi manusia kepada data kalori dan pemakanan makanan. Saya menggunakan API TogetherAI untuk bahagian ini dan Lovable sekali lagi tahu apa yang perlu dilakukan! Saya baru sahaja memintanya untuk menggunakan Together AI untuk bahagian AI dan ia meminta saya untuk kunci API saya dan ia telah selesai!

Anda boleh mendapatkan kunci API Together AI anda sendiri dengan membuat akaun percuma, anda memerlukan kad kredit untuk menambah lebih banyak kredit.

Dan dengan ini, semua fungsi asas apl telah sedia daripada Pengesahan kepada Penyertaan pengguna kepada penjejakan dan analitik Makanan tanpa sebarang kod yang ditulis oleh saya.

Menyelesaikan aplikasi

Sekarang apl itu sudah sedia, satu-satunya perkara yang perlu saya lakukan ialah membetulkan beberapa isu berkaitan UI di sana sini dan beberapa isu bahagian belakang juga (kebanyakannya berkaitan API TogetherAI). Saya bekerja pada apl itu selama beberapa jam lagi menyahpepijat dan membetulkan perkara dan inilah rupa apl itu sekarang -

Cukup kemas kan? Dan saya tidak bergurau apabila saya mengatakan bahawa aplikasi ini dibuat dalam masa 8 jam sahaja, apa yang boleh kita capai menggunakan AI pada hari ini tidak dapat dibayangkan dan jika anda tidak menggunakannya sekarang, anda benar-benar terlepas!

Pautan

Github - https://github.com/asrvd/munchwise
Supabase - https://supabase.com
Disayangi - https://lovable.dev

Terima kasih banyak kerana membaca!

Atas ialah kandungan terperinci Mencipta penjejak kalori/pemakanan berasaskan AI timbunan penuh dalam hanya rs menggunakan Supabase & Lovable. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!