دوز مباشرة للمحتوى الرئيسي
دروس فالذكاء الاصطناعي

بني وطلّق SaaS ديال فيديوهات فيروسية بالذكاء الاصطناعي مع ShrimpReel

تعلّم كيفاش تشغّل ShrimpReel محلياً، تخصّصو على حساب ترند ديال فيديوهات فيروسية، تهيّأ الأداء وتوليد الفيديوهات، توفّر موارد Cloudflare، تنشر بأمان، وتخلّي كل موقع مخصّص لكلمة مفتاحية متزامن مع القالب الأصلي.

حوالي 28 دقايق ديال القراية
بني وطلّق SaaS ديال فيديوهات فيروسية بالذكاء الاصطناعي مع ShrimpReel

شنو هو ShrimpReel؟

ShrimpReel هو قالب SaaS مفتوح المصدر لبناء مواقع كتبدّل تصويرة وحدة مرفوعة لفيديو مولّد بالذكاء الاصطناعي، على حساب فورما فيروسية. الطريقة المقصودة هي تدير مستودع مستقل لكل كلمة مفتاحية رائجة، تبدّل إعدادات الموقع والمحتوى الثنائي اللغة، تعوّض الميديا، وتنشر التطبيق واجد على Cloudflare.

الستاك كيجمع بين TanStack Start مع React 19 وTailwind CSS 4 فالواجهة الأمامية والتصيير من جهة الخادم. واجهة Hono API كتعالج المسارات تحت /api/*، وتوصيل الميديا، وتوجيهات robots، والـ sitemap، والتحقق ديال IndexNow. نقطة دخول الخادم هي src/server.ts.

التطبيق مصمم باش يخدم على Cloudflare Workers وD1 وR2 وKV وQueues وRate Limiting وCron Triggers. الصفحات بالإنجليزية كيتقدمو من /، والصفحات بالصينية متوفرة تحت /zh.

حالة المشروع: حسب README، سير العمل الكامل كيدوز اختبارات الوحدات المحلية واختبارات Playwright من البداية للنهاية، ولكن القالب مازال ما تْتحققش منو كنشر فالإنتاج. راجع ROADMAP.md قبل ما تعتمد على التكاملات الفردية مع الخدمات الحقيقية.

الميزات الرئيسية

الحسابات والفوترة والرصيد

  • تسجيل الدخول عبر Google، بما فيه Google One Tap، وزيد عليه تسجيل دخول للتطوير خدام غير فـ localhost.
  • باقات الرصيد واشتراكات شهرية أو سنوية اختيارية.
  • سجل الرصيد، وأكواد الاستبدال، وروابط الإحالة، وتاريخ الفوترة، وتفاصيل الطلب القابلة للطباعة، وحذف الحساب، وتصدير البيانات.
  • Waffo Pancake كمزوّد الدفع الافتراضي أو Dodo Payments كبديل.
  • استرجاعات جزئية وكاملة مع سحب تلقائي للرصيد.

توليد الفيديو

  • واجهة الطوابير ديال fal.ai كمزوّد الفيديو الافتراضي.
  • التوجيه الاختياري عبر yir.ai.
  • مزود وهمي كينسخ فيديو قالب أثناء التطوير والاختبارات المحلية.
  • طابور التوليد، وطابور الرسائل الميتة، وإرجاع تلقائي للرصيد ملي كيفشل التوليد.
  • صفحات عامة لمشاركة الفيديوهات، ويمكن للمستخدمين يفعّلوها لكل فيديو.

النمو والإدارة والعمليات

  • نَسب اللمسة الأولى واللمسة الأخيرة باستعمال قيم UTM ومعرّفات نقرات الإعلانات.
  • مسار من الزيارة حتى التوليد، وأحداث GA4 المتحكمة فيها الموافقة.
  • واجهات إدارية للمستخدمين، والطلبات، والتوليدات، وأحداث الدفع، وطلبات الإزالة، والتقارير، والإيميلات، وسجلات التدقيق، والإحالات، وإعدادات التشغيل، واختبارات الاتصال.
  • تقارير تكلفة المزوّد والهامش الإجمالي.
  • وضع الصيانة، والإعلانات، والحدود اليومية للتوليد، وتنبيهات الحالة، وتقارير أخطاء المتصفح، وإشعارات الدفع.
  • نسخ احتياطية يومية من D1 إلى R2.

السلامة والاحتفاظ والـ SEO

  • مراقبة الصور المرفوعة ووسم الفيديوهات المولدة بالذكاء الاصطناعي.
  • حذف تلقائي للصور من بعد سبعة أيام وللفيديوهات من بعد 30 يوم.
  • طابور إزالة مدته 48 ساعة كيحيد الفيديوهات المصنوعة من نفس الصورة المصدر وكيحظر هاد الصورة.
  • دعم Turnstile فاستمارات التواصل والتبليغ.
  • روابط canonical، وبيانات hreflang، وJSON-LD، وsitemap، وصفحات قانونية، وأدلة، ومقالات ذات صلة، ومحتوى محلي مقسم على مستوى الكود.
  • مدقق SEO شامل للموقع متوفر عبر npm run seo:check.

المتطلبات الأساسية

ثبّت Node.js وnpm بالإصدار 11.19 أو أحدث. الإصدارات القديمة ديال npm تقدر تعاود تكتب package-lock.json بطريقة كتسبب من بعد ففشل npm ci فالتكامل المستمر.

بالنسبة للنشر فالإنتاج، غتحتاج حتى لحساب Cloudflare، وحساب عند مزوّد الدفع، ومفتاح API ديال مزوّد الفيديو، وبيانات اعتماد Google OAuth. FFmpeg مطلوب غير إلا بغيتي تعاود تولّد الميديا المؤقتة باستعمال السكريبت المرفق.

ثبّت وشغّل ShrimpReel محلياً

1. ثبّت التبعيات وصايب المتغيرات المحلية

npm install
cp .dev.vars.example .dev.vars

حل .dev.vars وعيّن على الأقل SESSION_SECRET. بيئة الإنتاج وstaging خاصها قيمة قوية فيها 32 حرف على الأقل. README كينصح تولّد وحدة بهاد الأمر:

openssl rand -hex 32

2. وجد قاعدة البيانات المحلية وتخزين الميديا

npm run seed:local

هاد الأمر كيطبق ترحيلات D1 وكيرفع الملفات من seed/templates/*.mp4 لتخزين R2 المحاكى محلياً.

3. شغّل خادم التطوير

npm run dev -- --host 127.0.0.1

حل http://127.0.0.1:3000. فـ Windows، استعمال 127.0.0.1 بشكل صريح كيتفادى حتى الحالات اللي فيها أدوات الاختبار كتحل localhost على IPv6.

ما تشغّلش خادم التطوير على 0.0.0.0 وما تعرضوش مباشرة للإنترنت. تسجيل الدخول للتطوير، وعمليات الدفع الوهمية، و/api/dev/* مخصصين غير للطلبات المباشرة من localhost.

جرّب سير العمل الأساسي

الإعداد المحلي الافتراضي كيستعمل PAYMENT_PROVIDER=mock وVIDEO_PROVIDER=mock وMODERATION_PROVIDER=mock. هاد الشي كيخليك تجرّب المنتج بلا ما تخلص بطاقة ولا تصيفط مهمة لخدمة فيديو خارجية.

  1. حل صفحة تسجيل الدخول واستعمل تسجيل الدخول للتطوير اللي باين خارج بيئة الإنتاج.
  2. ختار باقة ديال الرصيد. عملية الدفع الوهمية كتحاكي الأداء بلا ما تخصم والو.
  3. رفع تصويرة وبدا التوليد.
  4. مزود الفيديو الوهمي كينسخ فيديو قالب موجد مسبقاً بلا ما يعيط لنموذج ذكاء اصطناعي.
  5. حل لوحة التحكم باش تشوف الفيديو المولّد، وسجل الرصيد، وسجلات الفوترة، وإعدادات المشاركة.

باش تحاكي رفض الرفع، صيفط استمارة الرفع ومعاها mockOutcome=reject. خلّي TURNSTILE_SITE_KEY خاوي إلا بغيتي تعطل Turnstile محلياً.

تقدر حتى تختبر تنظيف الاحتفاظ بالميديا ديال المستخدم اللي داخل حالياً:

POST /api/dev/sweep
Content-Type: application/json

{"days": 8}

إيصال الإيميلات محلياً كيتحاكى. شوف صندوق الإرسال بهاد الأمر:

GET /api/dev/emails?to=user@example.com&ref=<order-or-takedown-id>

صايب موقع لترند جديد

1. كلون المستودع مع الحفاظ على تاريخ upstream

git clone https://github.com/qianshuixia/shrimpreel.git moonhop
cd moonhop
git remote rename origin upstream
git remote add origin git@github.com:<owner>/moonhop.git

ما تستعملش زر القالب ديال GitHub إلا بغيتي تدمج تحديثات القالب من بعد. المستودع اللي كيتصايب بهاد الطريقة ما كيتقاسمش التاريخ مع المستودع المصدر. الكلون العادي مع remote سميتو upstream كيحافظ على نقطة الدمج المشتركة.

2. شغّل مولّد المواقع

بدا بتجربة بلا تغييرات، راجع التعديلات المقترحة، ومن بعد زيد --write:

node scripts/new-site.mjs --keyword "Moon Hop" --domain moonhop.ai --keywords "AI dance video,Moon Hop filter"
node scripts/new-site.mjs --keyword "Moon Hop" --domain moonhop.ai --keywords "AI dance video,Moon Hop filter" --write

مولّد المواقع كيحدّث site.ts، وأسماء موارد Cloudflare فـ wrangler.jsonc، واسم الحزمة. كيرجّع المعرّفات الخاصة بالنشر للحالة الافتراضية وكيحيد إعدادات التجريب ديال القالب. ومن بعد كيطبّع لائحة بالأعمال اليدوية اللي باقية.

3. كوّن الأثمنة والتوليد

عدّل src/config/site.ts. راجع باقات الرصيد فـ packages، ومفتاح subscriptionsEnabled، وplans ديال الاشتراكات، وdurations المتاحة، وvideo.falModel.

حط subscriptionsEnabled فـ false إلا كان الموقع غادي يبيع غير الباقات اللي كتخلص مرة وحدة. الباقة تقدر تستعمل anchorPriceCents باش تبان أثمنة مقارنة مشطوبة، ولكن الـREADME كينبّه بأنها خاصها تمثّل ثمن كانت الباقة كتتباع به فعلاً. فالمواقع الجديدة، غالباً خليه بلا قيمة.

4. عاود كتب المحتوى المترجم

عوّض النصوص الخاصة بالترند فـ src/content/en.ts وsrc/content/zh.ts. على الأقل، عاود كتب القسم الرئيسي، والشرح، والأفكار، والأسئلة الشائعة، والمقالين المضمّنين. حتى كتل المشكل والمقارنة الاختيارية خاصها تعاود تكتبها أو تحطها null.

تجنّب تبدّل غير الكلمة المفتاحية فالنص الموجود. القالب كينبّه بوضوح أن المواقع المنسوخة بشكل آلي تقدر تعتبرها محركات البحث إساءة استعمال المحتوى على نطاق واسع.

باش تزيد مقال، صايب مدخل الميتاداتا ديالو فالقسم articles داخل site.ts، ومن بعد زيد مفتاح المحتوى المطابق فكل لغة. المقالات كيتزادوا تلقائياً لمركز الأدلة، وخريطة الموقع، وروابط المقالات المرتبطة المكوّنة. خَلّي المدخلين الموجودين trend وhowTo حيث الصفحة الرئيسية كترابط عليهم.

5. عوّض جميع الوسائط المؤقتة

  • حط مقاطع التوليد المصدرية فـ seed/templates/ باستعمال النمط <template.id>-<seconds>s.mp4.
  • عوّض فيديوهات الصفحة الرئيسية والملصقات فـ public/demo/.
  • عوّض public/og.png وpublic/favicon.svg.
  • استعمل غير وسائط أصلية أو مرخّصة، وسجّل الإسناد ديالها فـ site.examples.*.credit.

إلا كان FFmpeg متوفر، عاود ولّد الوسائط المؤقتة الأصلية ديال المشروع بهاد الأمر:

node scripts/generate-placeholder-media.mjs

من بعد ما تبدّل template.id، حيد ملفات القوالب القديمة من seed/templates/.

كوّن المزوّدين الحقيقيين

متغيّرات التشغيل

حط متغيّرات الإنتاج اللي ماشي سرّية فـ wrangler.jsonc. من بين القيم المهمة كاينين SITE_URL، وAPP_ENV=production، وPAYMENT_PROVIDER، وVIDEO_PROVIDER، وMODERATION_PROVIDER، وTURNSTILE_SITE_KEY، وADMIN_EMAILS، وEMAIL_FROM، وربط المنتجات، وGOOGLE_CLIENT_ID.

أثمنة المنتجات عند مزوّد الأداء هي المرجع المعتمد. الأثمنة اللي كيبانوا فالموقع خاصها تبقى متزامنة مع لوحة تحكم المزوّد. ربط المنتجات كيربط كل باقة أو خطة مكوّنة بمعرّف المنتج عند المزوّد.

الأسرار

على حساب التكاملات المختارة، الأسرار تقدر تشمل SESSION_SECRET، وGOOGLE_CLIENT_SECRET، وبيانات Waffo، وبيانات Dodo، وFAL_KEY، وYIR_API_KEY الاختياري، وOPENAI_API_KEY الاختياري للمراقبة، وTURNSTILE_SECRET_KEY.

حط سراً واحداً بهاد الأمر:

npx wrangler secret put <NAME>

ولا، نسخ كمّل ملف متغيّرات الإنتاج، راجع الخطة، ومن بعد طبّق الأسرار الناقصة:

cp .dev.vars.example .dev.vars.production
node scripts/sync-secrets.mjs
node scripts/sync-secrets.mjs --apply

سكريبت المزامنة ما كيطبّعش قيم الأسرار. الأسرار الموجودة عن بُعد كيبقاو محفوظين إلا إلا عطيت --overwrite.

وفّر موارد Cloudflare

صايب مجموعة موارد مستقلة لكل موقع ديال كلمة مفتاحية. الأسماء خاصها تطابق الـbindings فـ wrangler.jsonc.

npx wrangler d1 create <name>
npx wrangler r2 bucket create <name>-media
npx wrangler kv namespace create <name>-kv
npx wrangler queues create <name>-jobs
npx wrangler queues create <name>-jobs-dlq
npm run db:migrate:remote
npx wrangler r2 object put <name>-media/templates/<file>.mp4 --file seed/templates/<file>.mp4 --content-type video/mp4 --remote

نسخ معرّف قاعدة بيانات D1 ومعرّف مساحة أسماء KV اللي تولّدو، وحطّهم فـ wrangler.jsonc. وحتى namespace_id ديال تحديد المعدّل فكل موقع خاصو يكون فريد داخل حساب Cloudflare.

ضبّط قواعد دورة حياة R2 الموصوفة فالمشروع باش الصور المرفوعة والفيديوهات المولّدة يتبعو مدد الاحتفاظ ديال سبعة أيام و30 يوم. حتى الدومين ديال الإرسال خاصّو يتسجّل فـ Cloudflare Email Service قبل ما يخدم الإيميل التلقائي.

تحقّق ونشّر

شغّل فحوصات الجودة محلياً

npm run typecheck
npm test
npm run test:e2e
npm run seo:check

قبل النشر، شغّل أداة فحص الإعدادات:

npm run doctor

الأداة كتفحص البيئة، الدومين، المزوّدين المختارين، ربط المنتجات، موارد Cloudflare المرتابطة، الطوابير، إعدادات Cron، أسماء الأسرار المطلوبة، الترحيلات اللي ما تطبّقاتش، وعلامات TODO(site) اللي ما تحلّاتش. استعمل --offline ملي كتكون الفحوصات عن بُعد غير متاحة عن قصد.

نشّر ودير اختباراً سريعاً

npm run deploy
SMOKE_BASE_URL=https://<domain> npm run test:smoke

الأمر npm run deploy كيشغّل فحوصات ما قبل النشر أولاً. من بعد النشر، ربط الدومين المخصّص فـ Cloudflare وتأكد بلي SITE_URL كيطابق بالضبط site.domain. الروابط الأساسية، وsitemap، وفحوصات CSRF من نفس المصدر كيعتمدو على هاد التطابق.

ملي يخدم الدومين المخصّص، عيّن workers_dev وpreview_urls بـ false. إلا ما درتيش هاد الشي، Worker ديال الإنتاج غيبقى متاح عبر روابط Cloudflare العمومية ديال التطوير والإصدارات، وباستعمال نفس موارد D1 وR2.

كمّل مهام إطلاق SEO

npm run seo:check -- --base https://<domain> --production
npm run seo:indexnow -- --submit

شغّل أمر IndexNow غير من بعد ما تهيّأ site.seo.indexNowKey. تحقّق من الدومين فـ Google Search Console وBing Webmaster Tools، ومن بعد صيفط https://<domain>/sitemap.xml.

نصائح متقدمة

خلي الإنتاج بلا mocks

الإنتاج وstaging كيرفضو عمليات الأداء، والتوليد، والرفع بردّ 503 إلا بقاو المزوّدين المختارين ديالهم مضبوطين على mock. تسجيل الدخول فالتطوير، ومسارات الأداء الوهمي، ونقاط API ديال التطوير كيرجعو 404 فهاد البيئات. اعتابر هاد الشي آلية أمان، وماشي بديلاً على تشغيل npm run doctor.

دمج تحديثات القالب عوض نسخ الترقيعات

خلي الخدمة الخاصة بالموقع فـ src/config/site.ts وsrc/content/* وpublic/* وseed/ وwrangler.jsonc واسم الحزمة. الإصلاحات المشتركة خاصها تدار فالقالب وتندمج فكل موقع.

git fetch upstream
git show upstream/main:scripts/sync-plan.mjs > .tmp/sync-plan.mjs
node .tmp/sync-plan.mjs
git merge --no-ff upstream/main
npm install
npm run typecheck
npm test
npm run test:e2e
npm run db:migrate:remote

استعمل merge commits عوض squash merges أو rebases أو cherry-picks. خطة المزامنة كتحتاج git merge-base HEAD upstream/main. ملي كتسجّل الدمج، سالِي رسالة commit بـ Template-sync: <template commit sha>.

حافظ على التوافق مع الإصدارات السابقة أثناء النشر

إلا فشل النشر من بعد ما تطبّقات الترحيلات، ممكن ترجّع إصدار Worker الجديد، ولكن ترحيلات D1 ما كيتراجعوش تلقائياً. خلي الترحيلات متوافقة مع إصدار التطبيق السابق باش يبقى الرجوع ممكناً.

استعمل مسارات Claude Code المرفقة ملي تكون مناسبة

المستودع فيه skill سميتها new-hot-site لإنشاء موقع مرتبط بترند معيّن، وskill سميتها sync-upstream لدمج تغييرات القالب، وskill للقراءة فقط سميتها launch-audit لفحوصات ما قبل الإطلاق والفحوصات المباشرة. هاد الأدوات ما كتعوّضش المراجعة اليدوية: النصوص المولّدة، والوسائط المرخّصة، والدومينات، ومنتجات المزوّدين، وإعدادات OAuth، وتهيئة الإيميل، وسياسات دورة الحياة ما زال خاصها التحقق.

راجع توثيق المشروع قبل تغيير المنطق الأساسي

طّلع على AGENTS.md قبل ما تبدّل الأرصدة، أو إتمام الأداء، أو المحتوى ثنائي اللغة، أو الترحيلات، أو اختبارات end-to-end. كاينة تفاصيل إضافية فـ docs/env.md وdocs/payments.md وdocs/subscriptions.md وdocs/SEO_AUDIT.md وdocs/SAAS_VIDEO_FEATURES.md. README كيشير بلي هاد الوثائق مكتوبة حالياً بالصينية.

الخلاصة

ShrimpReel كيوفّر نقطة انطلاق مهمّة لـ SaaS ديال فيديوهات AI مركّز على الكلمات المفتاحية، بما فيه طوابير التوليد، والفوترة، والأرصدة، والإدارة، والاحتفاظ، ومسارات الامتثال، والتحليلات، وSEO، وعمليات Cloudflare. بدا بالمسار الآمن ديال mock، وخصّص كل طبقة مرتبطة بالموقع، وبدّل المحتوى المؤقت بوسائط مرخّصة، وتحقّق من جميع إعدادات المزوّدين وCloudflare، وما تنشرش حتى يدوز التسلسل الكامل ديال الاختبارات وdoctor وSEO والاختبار السريع.