يوفر هذا الدليل كود تنفيذ نموذجي لتطبيق قائم على الطرفية. يمكنك تعديل هذا الكود ليتناسب مع إطار العمل الخاص بك (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 الخاصة بك سيتتبع كل صورة تولدها خدمتنا. اعتبر هذا بمثابة “عداد” يتتبع الأحداث القابلة للفوترة.
1
فتح قسم العدادات
- قم بتسجيل الدخول إلى لوحة معلومات Dodo Payments الخاصة بك
- انقر على العدادات في الشريط الجانبي الأيسر
- انقر على زر إنشاء عداد
2
املأ معلومات العداد الأساسية
الآن سنقوم بإدخال التفاصيل المحددة لخدمة PixelGen AI الخاصة بنا:اسم العداد: انسخ والصق هذا بالضبط →
Image Generation Meterالوصف: انسخ هذا → Tracks each AI image generation request made by customers using our DALL-E powered serviceاسم الحدث: هذا أمر حاسم - انسخ بالضبط → image.generated3
تكوين كيفية حساب الصور
قم بإعداد التجميع (كيفية حساب العداد لأحداثنا):نوع التجميع: اختر العدد من القائمة المنسدلةوحدة القياس: اكتب →
imagesنستخدم “العدد” لأننا نريد فرض رسوم مقابل كل صورة تم توليدها، وليس حسب الحجم أو وقت التوليد. كل صورة ناجحة = وحدة قابلة للفوترة واحدة.
4
إضافة تصفية الجودة

- تفعيل تصفية الأحداث: قم بتبديل هذا تشغيل
- منطق التصفية: اختر أو (هذا يعني “احسب إذا كان أي من هذه الشروط صحيحة”)
- أضف الشرط الأول:
- مفتاح الخاصية:
quality - المقارن:
equals - القيمة:
standard
- مفتاح الخاصية:
- انقر على “إضافة شرط” للثاني:
- مفتاح الخاصية:
quality - المقارن:
equals - القيمة:
hd
- مفتاح الخاصية:
5
إنشاء العداد الخاص بك
- تحقق من أن جميع إعداداتك تتطابق مع القيم أعلاه
- انقر على إنشاء عداد
تم إنشاء العداد! عداد “توليد الصور” الخاص بك جاهز الآن لبدء حساب توليد الصور. بعد ذلك، سنقوم بربطه بمنتج فواتير.
الخطوة 2: إنشاء منتج الفواتير الخاص بك
الآن نحتاج إلى إنشاء منتج يحدد تسعيرنا (0.05 دولار لكل صورة مع 10 صور مجانية). هذا يربط عدادنا بالفواتير الفعلية.1
انتقل إلى المنتجات
- في لوحة معلومات Dodo Payments الخاصة بك، انقر على المنتجات في الشريط الجانبي الأيسر
- انقر على إنشاء منتج
- اختر قائم على الاستخدام كنوع المنتج
2
أدخل تفاصيل المنتج
املأ هذه القيم بالضبط لخدمة PixelGen AI الخاصة بنا:اسم المنتج: انسخ هذا →
PixelGen AI - Image Generationالوصف: انسخ هذا → AI-powered image generation service with pay-per-use billingصورة المنتج: قم بتحميل صورة واضحة وذات صلة.ستظهر هذه على فواتير العملاء، لذا اجعلها واضحة واحترافية.
3
ربط العداد الخاص بك

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

0.05 (هذا هو 0.05 دولار لكل صورة)الحد المجاني: أدخل → 10 (يحصل العملاء على 10 صور مجانية شهريًا)5
احفظ منتجك
- راجع جميع إعداداتك:
- الاسم: PixelGen AI - توليد الصور
- العداد: عداد توليد الصور
- السعر: 0.05 دولار لكل صورة
- الطبقة المجانية: 10 صور
- انقر على حفظ التغييرات
تم إنشاء المنتج! تم تكوين الفواتير الخاصة بك الآن. سيتم فرض رسوم على العملاء تلقائيًا بناءً على استخدامهم لتوليد الصور.
الخطوة 3: إجراء عملية شراء تجريبية
قبل أن نبدأ في استيعاب أحداث الاستخدام، نحتاج إلى إجراء عملية شراء تجريبية.1
احصل على رابط الدفع الخاص بك
- في لوحة معلومات Dodo Payments الخاصة بك، انتقل إلى المنتجات
- ابحث عن منتج “PixelGen AI - توليد الصور”
- انقر على زر مشاركة بجوار منتجك
- انسخ رابط الدفع الذي يظهر
https://test.checkout.dodopayments.com/buy/pdt_IgPWlRsfpbPd5jQKezzW1?quantity=12
أكمل عملية شراء تجريبية
- افتح رابط الدفع في علامة تبويب متصفح جديدة
- أدخل تفاصيل الدفع التجريبية وأكمل الشراء.
بعد الدفع الناجح، سيكون لديك معرف عميل سنستخدمه في كود التطبيق الخاص بنا.
3
ابحث عن معرف العميل الخاص بك
- عد إلى لوحة معلومات Dodo Payments الخاصة بك
- انتقل إلى العملاء في الشريط الجانبي الأيسر
- ابحث عن العميل الذي أنشأته للتو (بالبريد الإلكتروني التجريبي)
- انسخ معرف العميل - سيبدو كالتالي
cus_abc123def456
احفظ هذا المعرف للعميل - سنقوم بتشفيره في كود التطبيق النموذجي الخاص بنا لضمان تتبع الأحداث بشكل صحيح.
الخطوة 4: بناء التطبيق النموذجي
الآن لدينا إعداد الفواتير مكتمل وعميل تجريبي تم إنشاؤه. دعنا نبني تطبيق PixelGen AI النموذجي الذي يولد الصور ويتتبع الاستخدام تلقائيًا للفواتير.1
إعداد مشروعك
قم بإنشاء دليل جديد وتهيئة المشروع:
2
تثبيت التبعيات
قم بتثبيت الحزم التي نحتاجها:
3
إنشاء التطبيق الرئيسي
قم بإنشاء ملف يسمى
index.ts وانسخ كود التطبيق الكامل هذا:الخطوة 5: اختبار تطبيقك النموذجي
حان الوقت لاختبار خدمة PixelGen AI النموذجية الخاصة بنا ورؤية الفواتير في العمل! دعنا نتأكد من أن كل شيء يعمل من البداية إلى النهاية.1
إعداد بيئتك
أولاً، تأكد من أن كل شيء تم تكوينه:
- أنشئ ملف
.envفي دليلpixelgen-aiالخاص بك - أضف مفاتيح API الفعلية الخاصة بك:
- قم بتثبيت التبعيات وتشغيل التطبيق:
2
توليد أول صورة اختبار لك
عند بدء التطبيق، سترى:جرب هذا الطلب: “روبوت لطيف يرسم منظرًا طبيعيًا”يجب أن ترى مخرجات مثل هذه:
إذا رأيت “تم إرسال حدث الاستخدام بنجاح”، فإن تكامل الفواتير الخاص بك يعمل!
3
توليد المزيد من الصور
دعنا نقوم بتوليد 2-3 صور أخرى لاختبار أحداث متعددة. جرب هذه الطلبات:
- “غروب الشمس فوق الجبال مع سحب بنفسجية”
- “آلة قهوة ستيمبانك في مطبخ فيكتوري”
- “تنين ودود يقرأ كتابًا في مكتبة”
4
تحقق من لوحة معلومات Dodo Payments الخاصة بك
الآن دعنا نتحقق مما إذا كانت الأحداث تُستقبل:
- افتح لوحة معلومات Dodo Payments الخاصة بك
- انتقل إلى الفواتير القائمة على الاستخدام → *عدادات → عداد توليد الصور
- انقر على علامة التبويب الأحداث
- يجب أن ترى أحداث توليد الصور الخاصة بك مدرجة
- أسماء الأحداث:
image.generated - معرف العميل: معرف العميل التجريبي الخاص بك
يجب أن ترى حدثًا واحدًا لكل صورة قمت بتوليدها!
5
تحقق من حسابات الفواتير
دعنا نتحقق مما إذا كان عد الاستخدام يعمل:

- في عدادك، انتقل إلى علامة التبويب العملاء
- ابحث عن عميلك التجريبي
- تحقق من عمود “الوحدات المستهلكة”
6
اختبار حد الفواتير
دعنا نتجاوز الطبقة المجانية لرؤية الفواتير في العمل:
- قم بتوليد 8 صور أخرى (للوصول إلى 12 إجماليًا)
- تحقق من لوحة عدادك مرة أخرى
- يجب أن ترى الآن:
- الوحدات المستهلكة: 12
- الوحدات القابلة للفوترة: 2 (12 - 10 مجانية)
- مبلغ الفواتير: 0.10 دولار
نجاح! تعمل الفواتير القائمة على الاستخدام بشكل مثالي. سيتم فرض رسوم على العملاء تلقائيًا بناءً على استخدامهم الفعلي لتوليد الصور.
استكشاف الأخطاء وإصلاحها
المشاكل الشائعة وحلولها:الأحداث لا تظهر في لوحة المعلومات
الأحداث لا تظهر في لوحة المعلومات
الأسباب المحتملة:
- اسم الحدث لا يتطابق بالضبط مع تكوين العداد
- معرف العميل غير موجود في حسابك
- مفتاح API غير صالح أو منتهي الصلاحية
- مشاكل في الاتصال بالشبكة
- تحقق من أن اسم الحدث يتطابق بالضبط مع تكوين العداد (حساس لحالة الأحرف)
- تحقق من أن معرف العميل موجود في Dodo Payments
- اختبر مفتاح API مع استدعاء API بسيط
- تحقق من الاتصال بالشبكة وإعدادات جدار الحماية
تهانينا! لقد أنشأت PixelGen AI
لقد أنشأت بنجاح مقتطفًا لتوليد الصور باستخدام AI مع فواتير قائمة على الاستخدام! إليك ما أنجزته:عداد الاستخدام
تم إنشاء “عداد توليد الصور” الذي يتتبع كل حدث توليد صورة
منتج الفواتير
تم تكوين التسعير عند 0.05 دولار لكل صورة مع 10 صور مجانية شهريًا
تطبيق AI
تم بناء تطبيق TypeScript يعمل يولد الصور باستخدام واجهة برمجة التطبيقات DALL-E من OpenAI
الفواتير الآلية
تم دمج تتبع الأحداث في الوقت الفعلي الذي يقوم تلقائيًا بفرض رسوم على العملاء