يوفر هذا الدرس مثالًا على رمز تنفيذ لتطبيق قائم على الطرفية. يمكنك تعديل هذا الرمز لإطار العمل الذي تستخدمه (React أو Vue أو Angular أو غيرها) وتخصيص طريقة إدخال المستخدم حسب احتياجات تطبيقك.
- توليد الصور باستخدام واجهة برمجة التطبيقات DALL-E من OpenAI
- تتبع كل توليد صورة للفواتير
- فرض رسوم على العملاء تلقائيًا بناءً على الاستخدام
- التعامل مع مستويات جودة مختلفة (قياسية مقابل HD)
ما الذي نبنيه
لنبدأ بفهم خدمة PixelGen AI الخاصة بنا:- الخدمة: توليد الصور باستخدام واجهة برمجة التطبيقات DALL-E من OpenAI
- نموذج التسعير: دفع مقابل كل صورة (0.05 دولار لكل صورة)
- الطبقة المجانية: 10 صور مجانية لكل عميل شهريًا
- خيارات الجودة: صور قياسية وHD (نفس السعر للتبسيط)
قبل أن نبدأ، تأكد من أن لديك:
- حساب Dodo Payments
- الوصول إلى واجهة برمجة تطبيقات OpenAI
- دراية أساسية بـ TypeScript/Node.js
الخطوة 1: إنشاء عداد الاستخدام الخاص بك
سنبدأ بإنشاء عداد في لوحة معلومات Dodo Payments الخاصة بك سيتتبع كل صورة تولدها خدمتنا. اعتبر هذا بمثابة “عداد” يتتبع الأحداث القابلة للفوترة.
Open the Meters section
- سجّل الدخول إلى لوحة تحكم Dodo Payments الخاصة بك
- انقر على Meters في الشريط الجانبي الأيسر
- انقر على زر Create Meter
Fill in the basic meter information
سنُدخل الآن التفاصيل المحددة لخدمة PixelGen AI الخاصة بنا:Meter Name: انسخ والصق هذا تمامًا →
Image Generation MeterDescription: انسخ هذا → Tracks each AI image generation request made by customers using our DALL-E powered serviceEvent Name: هذا أمر حاسم - انسخه تمامًا → image.generatedConfigure how we count images
قم بإعداد التجميع (كيفية احتساب العداد لأحداثنا):نوع التجميع: اختر العدد من القائمة المنسدلةMeasurement Unit: اكتب →
imagesنستخدم “Count” لأننا نريد فرض رسوم على كل صورة يتم إنشاؤها، وليس حسب الحجم أو وقت الإنشاء. كل صورة ناجحة = وحدة قابلة للفوترة واحدة.
Add quality filtering

- Enable Event Filtering: فعّل هذا الخيار ON
- Filter Logic: اختر OR (هذا يعني “احسب إذا كان أي من هذه الشروط صحيحًا”)
- Add the first condition:
- Property Key:
quality - Comparator:
equals - Value:
standard
- Property Key:
- Click “Add Condition” للحالة الثانية:
- Property Key:
quality - Comparator:
equals - Value:
hd
- Property Key:
الخطوة 2: إنشاء منتج الفواتير الخاص بك
الآن نحتاج إلى إنشاء منتج يحدد تسعيرنا (0.05 دولار لكل صورة مع 10 صور مجانية). هذا يربط عدادنا بالفواتير الفعلية.Navigate to Products
- في لوحة تحكم Dodo Payments، انقر على Products في الشريط الجانبي الأيسر
- انقر على Create Product
- اختر Usage-Based كنوع المنتج
Enter product details
املأ هذه القيم الدقيقة لخدمة PixelGen AI الخاصة بنا:Product Name: انسخ هذا →
PixelGen AI - Image GenerationDescription: انسخ هذا → AI-powered image generation service with pay-per-use billingصورة المنتج: قم بتحميل صورة واضحة وذات صلة.ستظهر هذه المعلومات في فواتير العملاء، لذا اجعلها واضحة ومهنية.
Connect your meter

0 لضمان أن العملاء يُفرض عليهم الرسوم بناءً على استخدامهم فقط، دون أي رسوم أساسية.الآن، اربط العداد الذي أنشأته للتو:- قم بالتمرير لأسفل إلى قسم العداد المرتبط
- انقر على إضافة عدادات
- من القائمة المنسدلة، اختر “عداد توليد الصور” (الذي أنشأته سابقًا)
- تأكد من أنه يظهر في تكوين منتجك
تم الآن ربط العداد بنجاح بهذا المنتج.
Set your pricing
هنا نُحدد نموذج عملنا:
Price Per Unit: أدخل →

0.05 (هذا 0.05$ لكل صورة)Free Threshold: أدخل → 10 (يحصل العملاء على 10 صور مجانية كل شهر)الخطوة 3: إجراء عملية شراء تجريبية
قبل أن نبدأ في استيعاب أحداث الاستخدام، نحتاج إلى إجراء عملية شراء تجريبية.Get your payment link
- في لوحة تحكم Dodo Payments، اذهب إلى Products
- اعثر على المنتج “PixelGen AI - Image Generation”
- انقر على زر Share بجانب المنتج
- انسخ رابط الدفع الذي يظهر
https://test.checkout.dodopayments.com/buy/pdt_IgPWlRsfpbPd5jQKezzW1?quantity=1Complete a test purchase
- افتح رابط الدفع في علامة تبويب جديدة بالمتصفح
- أدخل بيانات الدفع التجريبية وأكمل عملية الشراء.
بعد إتمام الدفع بنجاح، ستحصل على معرف عميل سنستخدمه في رمز التطبيق الخاص بنا.
Find your customer ID
- عد إلى لوحة تحكم Dodo Payments
- انتقل إلى Customers في الشريط الجانبي الأيسر
- اعثر على العميل الذي أنشأته للتو (بالبريد الإلكتروني التجريبي)
- انسخ معرف العميل - سيبدو مثل
cus_abc123def456
احفظ هذا المعرف - سنقوم بتضمينه بشكل ثابت في رمز التطبيق التجريبي لضمان تتبع الأحداث بشكل صحيح.
الخطوة 4: بناء التطبيق النموذجي
الآن لدينا إعداد الفواتير مكتمل وعميل تجريبي تم إنشاؤه. دعنا نبني تطبيق PixelGen AI النموذجي الذي يولد الصور ويتتبع الاستخدام تلقائيًا للفواتير.
إليك تطبيق PixelGen AI الكامل مع الفواتير المدمجة:
الخطوة 5: اختبار تطبيقك النموذجي
حان الوقت لاختبار خدمة PixelGen AI النموذجية الخاصة بنا ورؤية الفواتير في العمل! دعنا نتأكد من أن كل شيء يعمل من البداية إلى النهاية.Set up your environment
أولًا، تأكد من إعداد كل شيء:
- أنشئ ملف
.envفي مجلدpixelgen-ai - أضف مفاتيح واجهة برمجة التطبيقات الفعلية الخاصة بك:
- قم بتثبيت التبعيات وتشغيل التطبيق:
Generate your first test image
عند تشغيل التطبيق، سترى:جرب هذا الطلب: “روبوت لطيف يرسم منظرًا طبيعيًا”يجب أن ترى مخرجات مثل هذه:
إذا رأيت “Usage event sent successfully”، فإن تكامل الفوترة يعمل!
Generate a few more images
لننشئ 2-3 صور إضافية لاختبار عدة أحداث. جرّب هذه المطالبات:
- “غروب الشمس فوق الجبال مع سحب بنفسجية”
- “آلة قهوة ستيمبانك في مطبخ فيكتوري”
- “تنين ودود يقرأ كتابًا في مكتبة”
Check your Dodo Payments dashboard
لنؤكد الآن أن الأحداث تتلقاها الخدمة:
- افتح لوحة معلومات Dodo Payments الخاصة بك
- انتقل إلى الفواتير القائمة على الاستخدام → *عدادات → عداد توليد الصور
- انقر على علامة التبويب الأحداث
- يجب أن ترى أحداث توليد الصور الخاصة بك مدرجة
- أسماء الأحداث:
image.generated - معرف العميل: معرف العميل التجريبي الخاص بك
يجب أن ترى حدثًا لكل صورة أنشأتها!
Verify billing calculations
لنتحقق مما إذا كان عد الاستخدام يعمل:

- في عدادك، انتقل إلى علامة التبويب العملاء
- ابحث عن عميلك التجريبي
- تحقق من عمود “الوحدات المستهلكة”
Test the billing threshold
لنتجاوز الآن الحد المجاني لنرى الفوترة تعمل:
- قم بتوليد 8 صور أخرى (للوصول إلى 12 إجماليًا)
- تحقق من لوحة عدادك مرة أخرى
- يجب أن ترى الآن:
- الوحدات المستهلكة: 12
- الوحدات القابلة للفوترة: 2 (12 - 10 مجانية)
- مبلغ الفواتير: 0.10 دولار
نجاح! تعمل الفوترة على أساس الاستخدام بشكل مثالي. سيتم فرض رسوم تلقائيًا على العملاء استنادًا إلى الاستخدام الفعلي لإنشاء الصور.
استكشاف الأخطاء وإصلاحها
المشاكل الشائعة وحلولها:Events not appearing in dashboard
Events not appearing in dashboard
الأسباب المحتملة:
- لا يتطابق اسم الحدث مع تكوين العداد تمامًا
- معرف العميل غير موجود في حسابك
- مفتاح واجهة البرمجة غير صالح أو منتهي
- مشاكل في الاتصال بالشبكة
- تحقق من تطابق اسم الحدث مع تكوين العداد تمامًا (حساس لحالة الأحرف)
- تأكد من وجود معرف العميل في Dodo Payments
- اختبر مفتاح واجهة البرمجة باستدعاء بسيط
- تحقق من الاتصال بالشبكة وإعدادات الجدار الناري
تهانينا! لقد أنشأت PixelGen AI
لقد أنشأت بنجاح مقتطفًا لتوليد الصور باستخدام AI مع فواتير قائمة على الاستخدام! إليك ما أنجزته:Usage Meter
تم إنشاء “Image Generation Meter” الذي يتتبع كل حدث إنشاء صورة
Billing Product
تم تكوين الأسعار عند 0.05$ لكل صورة مع 10 صور مجانية شهريًا
AI Application
تم بناء تطبيق TypeScript يعمل ينشئ الصور باستخدام DALL-E من OpenAI
Automated Billing
تم دمج تتبع الأحداث في الوقت الفعلي الذي يفوّتر العملاء تلقائيًا