راهنمای کامل گام به گام شما
صنعت بهداشت و تناسب اندام در سالهای اخیر منفجر شده است و برنامه های تلفن همراه در قلب این رشد است. اگر یک توسعه دهنده هستید که به دنبال ورود به این فضا هستید ، یک برنامه ردیاب تغذیه یک پروژه عالی است. با تشکر از Foodie API (https://foodapi.devco.solutions/) ، واکشی و تجزیه و تحلیل اطلاعات تغذیه ای هرگز آسان تر نبوده است.
در این راهنما ، ما چگونه می توانیم با استفاده از API Foodie ، یک برنامه ردیاب تغذیه ای ساده اما آماده تولید را بسازیم. شما در مورد:
- تنظیم محیط خود
- تأیید اعتبار با API
- واکشی داده های تغذیه ای از تصاویر یا توضیحات غذایی
- نمایش نتایج در یک رابط React Clean
بیایید شیرجه بزنیم.
1. تنظیم محیط توسعه خود
ابتدا مطمئن شوید که اصول اولیه را آماده کرده اید:
- node.js نصب شده (v18+ توصیه شده)
- برنامه React.js (می توانید از Vite یا ایجاد برنامه React استفاده کنید)
- tailwindcss (برای UI سریع)
- API Key از Foodie API (ثبت نام در اینجا)
ایجاد یک پروژه جدید:
npm create vite@latest nutrition-tracker --template react
cd nutrition-tracker
npm install
npm install axios
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Tailwind را در tailwind.config.js و index.css خود پیکربندی کنید.
2. کلید API Foodie خود را دریافت کنید
پس از ثبت نام در API Foodie ، یک کلید API دریافت خواهید کرد.
این را با خیال راحت ذخیره کنید – برای احراز هویت به آن احتیاج دارید.
یک فایل .env را در ریشه پروژه خود ایجاد کنید:
VITE_FOODIE_API_KEY=your_real_api_key_here
آن را با استفاده از Import.meta.env.vite_foodie_api_key بارگیری کنید.
3. سرویس API تغذیه را بسازید
بیایید یک بسته بندی ساده Axios را در اطراف API Foodie درست کنیم:
// src/api/foodie.ts
import axios from "axios";
const foodie = axios.create({
baseURL: "https://foodapi.devco.solutions/api",
headers: {
"Authorization": `Bearer ${import.meta.env.VITE_FOODIE_API_KEY}`,
"Content-Type": "application/json",
},
});
export async function analyzeFood(description: string) {
const response = await foodie.post("/nutrition", {
query: description,
});
return response.data;
}
در این حالت ، ما فرض می کنیم API Foodie بارهای پرس و جو (توضیحات یا نام غذایی) را می پذیرد.
4. رابط کاربری را ایجاد کنید
ما یک نمای واقعی ورودی + واقعیت را طراحی خواهیم کرد.
// src/components/NutritionTracker.tsx
import { useState } from "react";
import { analyzeFood } from "../api/foodie";
export default function NutritionTracker() {
const [query, setQuery] = useState("");
const [nutrition, setNutrition] = useState(null);
const [loading, setLoading] = useState(false);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setLoading(true);
try {
const data = await analyzeFood(query);
setNutrition(data);
} catch (error) {
console.error("Failed to fetch nutrition data", error);
} finally {
setLoading(false);
}
}
return (
{nutrition && (
Nutrition Facts
- Calories: {nutrition.calories} kcal
- Protein: {nutrition.protein} g
- Fat: {nutrition.fat} g
- Carbs: {nutrition.carbs} g
{/* extend as needed */}
)}
);
}
آن را در app.tsx خود سوار کنید:
import NutritionTracker from "./components/NutritionTracker";
function App() {
return (
);
}
export default App;
5. آزمایش ردیاب تغذیه خود
سرور توسعه را اجرا کنید:
npm run dev
اکنون باید فرم را ببینید که می توانید هر نام غذایی را وارد کنید (به عنوان مثال ، “نان تست آووکادو”) و یک شکست کامل تغذیه ای که به صورت زنده از API Foodie تهیه شده است ، دریافت کنید.
اگر با مشکلات CORS روبرو شدید ، ممکن است نیاز به پروکسی تماس های API از طریق یک سرور پس زمینه کوچک داشته باشید یا یک پروکسی را برای حالت DEV پیکربندی کنید.
6. گسترش برنامه
پس از کار MVP ، می توانید:
تصاویر غذایی را بارگذاری کرده و نقاط پایانی تشخیص تصویر API Foodie را ادغام کنید
تاریخچه غذاهای جستجو شده را با استفاده از محل محلی یا supabase ذخیره کنید
اهداف کالری را اضافه کنید و ردیابی پیشرفت کنید
وعده های غذایی فیلتر بر اساس نیازهای رژیم غذایی (کتو ، وگان ، بدون گلوتن)
برنامه را با چند کلیک به Vercel یا NetLify مستقر کنید
7. نتیجه گیری
ساختن یک ردیاب تغذیه با API Foodie فوق العاده ساده است. شما بدون نیاز به یک پایگاه داده گسترده مواد غذایی یا مدل های پیچیده هوش مصنوعی خود ، تجزیه و تحلیل تغذیه ای مبتنی بر یادگیری ماشین را دریافت می کنید.
با چند نقطه پایانی و یک قسمت جلویی React Clean ، می توانید ارزش واقعی را به علاقه مندان به تناسب اندام ، رژیم غذایی و کاربران متمرکز بر سلامتی ارائه دهید.
🔵 نکته PRO: اگر قصد دارید به صورت تجاری راه اندازی کنید ، پاسخ های تغذیه ای را برای کاهش هزینه های استفاده از API و بهبود سرعت در نظر بگیرید.
