الدليل الكامل لنشر التطبيقات في Google AI Studio: تصدير الكود + درس عملي لربط API منخفض التكلفة

ملاحظة المؤلف: شرح مفصل للعملية الكاملة لنشر التطبيقات باستخدام وضع Build في Google AI Studio، يعلمك كيفية تصدير الكود إلى بيئة التطوير المحلية (IDE)، والربط بمحطات وسيطة لـ API بأسعار منخفضة مثل APIYI، مما يقلل تكاليف التطوير بشكل كبير.

يُعد نشر التطبيقات عبر Google AI Studio من المواضيع التي تهم الكثير من المطورين. يتيح وضع Build في AI Studio إنشاء تطبيقات React/Angular بسرعة باستخدام اللغة الطبيعية، ولكن أسعار واجهة البرمجيات (API) الرسمية مرتفعة، لذا أصبح تعلم كيفية خفض التكاليف أمراً بالغ الأهمية.

القيمة الجوهرية: بعد قراءة هذا المقال، ستتقن العملية الكاملة لنشر تطبيقات AI Studio، وستتعلم كيفية تصدير الكود إلى بيئة التطوير المحلية (IDE) الخاصة بك والربط بمحطات API وسيطة بأسعار زهيدة، مما قد يقلل تكاليف التطوير بنسبة تتراوح بين 50% إلى 80%.

النقاط الرئيسية لنشر التطبيقات في AI Studio

لماذا يجب تصدير الكود والاتصال بـ API محطة وسيطة؟

على الرغم من أن التطوير المباشر عبر الإنترنت في Google AI Studio مريح للغاية، إلا أن هناك مشكلة أساسية: وهي استخدامه لـ API بالسعر الرسمي.

أسعار Gemini API الرسمية (يناير 2026):

بالنسبة للتطبيقات التي تتطلب عدداً كبيراً من استدعاءات الـ API، ستتراكم التكاليف بسرعة. ولكن من خلال محطات الـ API الوسيطة (مثل APIYI apiyi.com أو wentuo.ai وغيرها)، يمكنك الحصول على أسعار أكثر تنافسية وتوفيراً.

تكمن المشكلة في: أن محرر AI Studio عبر الإنترنت لا يسمح بتعديل عنوان طلب الـ API مباشرة. والحل يكمن في تصدير الكود إلى بيئة تطوير محلية (مثل Cursor أو VS Code)، وتعديل الإعدادات ثم البدء في عملية النشر.

نشر التطبيقات عبر AI Studio الخطوة الأولى: إنشاء تطبيق باستخدام وضع البناء (Build Mode)

الدخول إلى وضع البناء (Build Mode)

1. قم بزيارة aistudio.google.com
2. انقر على "Build" في القائمة الجانبية اليسرى
3. اختر "Create new app"
4. صف التطبيق الذي تريد إنشاؤه باستخدام لغة طبيعية

مثال على موجه:

قم بإنشاء تطبيق ترجمة بالذكاء الاصطناعي، بحيث يقوم المستخدم بإدخال النص، 
ثم يتم استدعاء Gemini API للترجمة إلى اللغة المحددة. 
يجب أن يدعم التطبيق الترجمة المتبادلة بين أربع لغات: الصينية، الإنجليزية، اليابانية، والكورية. 
واجهة المستخدم يجب أن تكون بسيطة وعصرية مع استخدام المظهر الداكن (Dark Theme).

مميزات وضع البناء (Build Mode)

سيقوم وضع البناء تلقائياً بإنشاء هيكل مشروع كامل، يتضمن:

• geminiService.ts: منطق استدعاء الـ API
• ملفات المكونات: كود واجهة المستخدم (UI)
• ملفات التكوين: إعدادات المشروع والاعتمادات (Dependencies)

تلميح: الكود الناتج من وضع البناء يستخدم GenAI TypeScript SDK لاستدعاء Gemini API، ويمكنك بسهولة تعديله لاستخدام نقاط نهاية (endpoints) أخرى للـ API بعد تصديره.

نشر التطبيقات عبر AI Studio الخطوة الثانية: تصدير الكود إلى جهازك المحلي

لا يدعم المحرر المباشر في AI Studio تعديل عنوان طلب الـ API، وهذا هو السبب الرئيسي وراء حاجتنا لتصدير الكود.

الطريقة الأولى للتصدير: تنزيل ملف ZIP

1. في واجهة وضع البناء، انقر على زر "Download" في الزاوية العلوية اليمنى
2. اختر "Download as ZIP"
3. قم بفك الضغط في مجلد محلي
4. افتح المشروع باستخدام بيئة تطوير (IDE) مثل Cursor أو VS Code

الطريقة الثانية للتصدير: الدفع إلى GitHub

1. انقر على أيقونة GitHub في الزاوية العلوية اليمنى
2. يتطلب الاستخدام الأول تفويض OAuth
3. اختر "Create new repository" أو الدفع إلى مستودع موجود
4. قم بعمل clone للمستودع محلياً لبدء التطوير

الطريقة الثالثة للتصدير: الحصول على قصاصات برمجية

بالنسبة للتطبيقات البسيطة، يمكنك الحصول مباشرة على كود استدعاء الـ API:

1. انقر على زر "Get code"
2. اختر اللغة: Python / JavaScript / REST API
3. انسخ الكود إلى مشروعك

تشغيل المشروع المصدّر محلياً

# ادخل إلى مجلد المشروع بعد فك ضغط ZIP
cd your-ai-studio-app

# تثبيت الاعتمادات
npm install

# تشغيل خادم التطوير
npm run dev

سيعمل المشروع محلياً، وسيظل في هذه المرحلة يستخدِم مفتاح API الأصلي ونقاط النهاية الرسمية.

نشر التطبيق من AI Studio – الخطوة الثالثة: الاتصال بمحطة وسيطة للـ API منخفضة التكلفة

هذه هي الخطوة الأساسية لتقليل التكاليف. سنأخذ الاتصال بـ APIYI (apiyi.com) كمثال.

البحث عن ملف استدعاء الـ API

في المشروع المُصدّر، ابحث عن geminiService.ts أو ملف مشابه لاستدعاء الـ API. هيكل الكود التقليدي يكون كالتالي:

// الكود الأصلي - استخدام الـ API الرسمي
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });

التعديل لاستخدام محطة وسيطة للـ API

عادةً ما تكون المحطات الوسيطة مثل APIYI متوافقة مع تنسيق OpenAI، وطريقة التعديل هي كالتالي:

// بعد التعديل - استخدام محطة APIYI الوسيطة
import OpenAI from "openai";

const client = new OpenAI({
    apiKey: "your-apiyi-key",  // استبدله بمفتاح Key الخاص بـ APIYI
    baseURL: "https://vip.apiyi.com/v1"  // نقطة نهاية APIYI
});

async function generateContent(prompt: string) {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",  // يبقى اسم النموذج كما هو
        messages: [{ role: "user", content: prompt }]
    });
    return response.choices[0].message.content;
}

// geminiService.ts - النسخة المعدلة بالكامل
import OpenAI from "openai";

// تكوين محطة APIYI الوسيطة
const client = new OpenAI({
    apiKey: process.env.APIYI_KEY || "your-apiyi-key",
    baseURL: "https://vip.apiyi.com/v1"
});

// مثال على دالة الترجمة
export async function translateText(
    text: string,
    targetLang: string
): Promise<string> {
    const systemPrompt = `أنت مترجم محترف، قم بترجمة النص إلى ${targetLang}، وأعد نتيجة الترجمة فقط.`;

    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",
        messages: [
            { role: "system", content: systemPrompt },
            { role: "user", content: text }
        ],
        max_tokens: 2000
    });

    return response.choices[0].message.content || "";
}

// دالة محادثة عامة
export async function chat(
    messages: { role: string; content: string }[]
): Promise<string> {
    const response = await client.chat.completions.create({
        model: "gemini-2.0-flash",
        messages: messages as any,
        max_tokens: 4000
    });

    return response.choices[0].message.content || "";
}

تكوين متغيرات البيئة

أنشئ ملف .env لتخزين مفتاح الـ API:

# ملف .env
APIYI_KEY=your-apiyi-api-key

تنبيه أمني: لا تقم أبداً بكتابة مفتاح الـ API مباشرة في الكود أو رفعه إلى مستودع عام. استخدم متغيرات البيئة لإدارة المعلومات الحساسة.

مقارنة حلول الـ API لنشر تطبيقات AI Studio

لماذا تختار محطة وسيطة للـ API؟

1. ميزة التكلفة: لنفس حجم الاستدعاء، يمكن تقليل التكلفة بنسبة 50%-80%.
2. توحيد الواجهات: التوافق مع تنسيق OpenAI يتيح التبديل بين النماذج دون تعديل الكود.
3. استقرار الوصول: اتصال مباشر، دون الحاجة لاستخدام بروكسي أو VPN.
4. دعم نماذج متعددة: مفتاح (Key) واحد يمكنه استدعاء نماذج Gemini وGPT وClaude وغيرها من نماذج اللغة الكبيرة.

نصيحة: قم بالتسجيل عبر APIYI (apiyi.com) للحصول على مفتاح API، حيث توفر المنصة حصة اختبار مجانية وتدعم جميع سلاسل نماذج Gemini.

نشر تطبيق AI Studio الخطوة الرابعة: النشر والتشغيل

بعد الانتهاء من تعديل الكود، تتوفر عدة طرق لنشر التطبيق.

الطريقة الأولى: النشر على Vercel (موصى به)

# تثبيت Vercel CLI
npm install -g vercel

# تسجيل الدخول والنشر
vercel login
vercel

قم بضبط متغير البيئة APIYI_KEY في لوحة تحكم Vercel.

الطريقة الثانية: النشر على Cloud Run

يدعم AI Studio النشر بنقرة واحدة على Google Cloud Run:

1. انقر على زر "Deploy" في الزاوية العلوية اليمنى.
2. اختر مشروع Google Cloud الخاص بك.
3. قم بتهيئة متغيرات البيئة.
4. أكد عملية النشر.

ملاحظة: لا يزال النشر عبر Cloud Run يستخدم مفتاح API الخاص بـ AI Studio. إذا كنت ترغب في استخدام API الخاص بالمحطة الوسيطة (relay API)، فنوصي بتصدير الكود وتعديله أولاً ثم النشر يدويًا.

الطريقة الثالثة: النشر على خادمك الخاص

# بناء نسخة الإنتاج
npm run build

# التشغيل باستخدام أدوات مثل PM2
pm2 start npm --name "ai-app" -- start

الأسئلة الشائعة حول نشر تطبيقات AI Studio

ملخص العملية الكاملة لنشر التطبيقات باستخدام AI Studio

الخلاصة

النقاط الأساسية لنشر التطبيقات عبر Google AI Studio:

1. وضع البناء (Build Mode): إنشاء تطبيقات React/Angular بسرعة باستخدام اللغة الطبيعية.
2. تصدير الكود: تحميل ملف ZIP أو الدفع إلى GitHub للبدء في التطوير المحلي.
3. استبدال API: تعديل baseURL والمفتاح (Key) للربط بمحطة وسيطة.
4. تحسين التكلفة: تقليل التكاليف بنسبة 50%-80% من خلال استخدام محطات وسيطة مثل APIYI.

يُعد AI Studio منصة تطوير قوية عبر الإنترنت، ومن خلال الجمع بين خاصية تصدير الكود والمحطات الوسيطة للـ API، يمكنك تحقيق المزيج المثالي بين بناء النماذج الأولية السريعة والنشر منخفض التكلفة.

نوصي بالحصول على وصول إلى Gemini API عبر APIYI (apiyi.com)، حيث توفر المنصة رصيداً مجانياً للاختبار، وواجهة متوافقة مع OpenAI، وإمكانية استدعاء نماذج متعددة بشكل موحد.

📚 المراجع

1. وثائق وضع البناء (Build Mode) في Google AI Studio: دليل الاستخدام الرسمي لوضع البناء

   • الرابط: ai.google.dev/gemini-api/docs/aistudio-build-mode
   • الوصف: شرح مفصل لميزات وضع البناء وآلية تصدير الكود.

2. صفحة تسعير Gemini API: معلومات الأسعار الرسمية للواجهة البرمجية

   • الرابط: ai.google.dev/gemini-api/docs/pricing
   • الوصف: أحدث تفاصيل التسعير لمختلف النماذج والحدود المجانية المتاحة.

3. برنامج تعليمي لنشر AI Studio على Cloud Run: Google Codelab الرسمي

   • الرابط: codelabs.developers.google.com/deploy-from-aistudio-to-run
   • الوصف: الدليل الكامل للنشر بنقرة واحدة على Google Cloud.

4. دليل تشغيل مشاريع AI Studio محلياً: برنامج تعليمي من المجتمع

   • الرابط: medium.com/lets-code-future/how-to-run-your-google-ai-studio-project-locally
   • الوصف: خطوات تفصيلية للتطوير المحلي بعد عملية تصدير الكود.

الكاتب: الفريق التقني
النقاش التقني: نرحب بمناقشاتكم في قسم التعليقات، ولمزيد من المصادر والمقالات يمكنك زيارة مجتمع APIYI التقني على apiyi.com.