ShrimpReel bilan AI asosidagi virusli video SaaS yarating va ishga tushiring

ShrimpReel nima?

ShrimpReel — yuklangan bitta suratni virusli format asosida sun’iy intellekt yaratgan videoga aylantiruvchi veb-saytlar yaratish uchun mo‘ljallangan ochiq kodli SaaS shablonidir. Ko‘zda tutilgan ish jarayoni har bir ommabop kalit so‘z uchun alohida repository yaratish, sayt konfiguratsiyasi va ikki tilli kontentni o‘zgartirish, media fayllarni almashtirish hamda tayyor ilovani Cloudflare’ga joylashtirishdan iborat.

Texnologik stek frontend va server tomonda renderlash uchun TanStack Start, React 19 va Tailwind CSS 4 ni birlashtiradi. Hono API /api/* ostidagi yo‘nalishlar, media yetkazib berish, robots direktivalari, sitemap va IndexNow tekshiruvini boshqaradi. Serverning kirish nuqtasi — src/server.ts.

Ilova Cloudflare Workers, D1, R2, KV, Queues, Rate Limiting va Cron Triggers asosida ishlash uchun ishlab chiqilgan. Inglizcha sahifalar / manzilidan, xitoycha sahifalar esa /zh manzilidan taqdim etiladi.

Loyiha holati: README ma’lumotiga ko‘ra, to‘liq ish jarayoni mahalliy unit testlar va Playwright end-to-end testlaridan muvaffaqiyatli o‘tadi, biroq shablon hali ishlab chiqarish muhitiga joylashtirish sifatida tekshirilmagan. Haqiqiy xizmatlar bilan alohida integratsiyalarga tayanishdan oldin ROADMAP.md faylini ko‘rib chiqing.

Asosiy imkoniyatlar

Hisoblar, to‘lovlar va kreditlar

• Google orqali kirish, jumladan Google One Tap, shuningdek faqat localhost uchun ishlab chiqish kirishi.
• Kredit paketlari va ixtiyoriy oylik yoki yillik obunalar.
• Kreditlar reyestri, foydalanish kodlari, tavsiya havolalari, to‘lovlar tarixi, chop etish mumkin bo‘lgan buyurtma tafsilotlari, hisobni o‘chirish va ma’lumotlarni eksport qilish.
• Standart to‘lov provayderi sifatida Waffo Pancake yoki muqobil sifatida Dodo Payments.
• Kreditlarni avtomatik qaytarib olish bilan qisman va to‘liq refundlar.

Video yaratish

• Standart video provayderi sifatida fal.ai navbat API’si.
• yir.ai orqali ixtiyoriy yo‘naltirish.
• Mahalliy ishlab chiqish va testlar vaqtida shablon videoni nusxalovchi soxta provayder.
• Yaratish navbati, bajarilmagan ishlar navbati va yaratish muvaffaqiyatsiz tugaganda kreditlarni avtomatik qaytarish.
• Foydalanuvchilar har bir video uchun yoqishi mumkin bo‘lgan ommaviy video ulashish sahifalari.

O‘sish, boshqaruv va operatsiyalar

• UTM qiymatlari va reklama bosish identifikatorlari orqali birinchi va oxirgi tegishli manbani aniqlash.
• Tashrifdan videoni yaratishgacha bo‘lgan voronka va rozilik asosida boshqariladigan GA4 hodisalari.
• Foydalanuvchilar, buyurtmalar, yaratishlar, to‘lov hodisalari, olib tashlashlar, shikoyatlar, xatlar, audit yozuvlari, tavsiyalar, ish vaqti sozlamalari va ulanish testlari uchun ma’muriy interfeyslar.
• Provayder xarajatlari va yalpi marja hisobotlari.
• Texnik xizmat rejimi, e’lonlar, kunlik yaratish limitlari, holat ogohlantirishlari, brauzer xatolarini qayd etish va to‘lov bildirishnomalari.
• D1 ma’lumotlarining R2’ga kunlik zaxira nusxalari.

Xavfsizlik, saqlash va SEO

• Yuklamalarni moderatsiya qilish va videolarda sun’iy intellekt yordamida yaratilganligi haqidagi belgi.
• Suratlarni yetti kundan keyin, videolarni esa 30 kundan keyin avtomatik o‘chirish.
• 48 soatlik olib tashlash navbati: bir xil manba suratidan yaratilgan videolarni o‘chiradi va ushbu suratni bloklaydi.
• Aloqa va shikoyat shakllarida Turnstile yordami.
• Kanonik URL’lar, hreflang metama’lumotlari, JSON-LD, sitemap, huquqiy sahifalar, qo‘llanmalar, tegishli maqolalar va kod bo‘laklariga ajratilgan mahalliylashtirilgan matn.
• npm run seo:check orqali mavjud bo‘lgan butun sayt uchun SEO linteri.

Talablar

Node.js va npm 11.19 yoki undan yangiroq versiyasini o‘rnating. Eski npm versiyalari package-lock.json faylini keyinchalik uzluksiz integratsiyada npm ci buyrug‘i ishlamay qoladigan shaklda qayta yozishi mumkin.

Ishlab chiqarish muhitiga joylashtirish uchun Cloudflare hisobi, to‘lov provayderi hisobi, video provayderi API kaliti va Google OAuth ma’lumotlari ham kerak bo‘ladi. FFmpeg faqat biriktirilgan skript yordamida o‘rinbosar media fayllarni qayta yaratishda talab qilinadi.

ShrimpReel’ni mahalliy ishga tushirish

1. Bog‘liqliklarni o‘rnating va mahalliy o‘zgaruvchilarni yarating

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

.dev.vars faylini oching va kamida SESSION_SECRET qiymatini o‘rnating. Ishlab chiqarish va staging muhitlari uchun kamida 32 belgidan iborat kuchli qiymat talab qilinadi. README uni quyidagi buyruq yordamida yaratishni tavsiya qiladi:

openssl rand -hex 32

2. Mahalliy ma’lumotlar bazasi va media xotirasini tayyorlang

npm run seed:local

Ushbu buyruq D1 migratsiyalarini qo‘llaydi va seed/templates/*.mp4 dagi fayllarni mahalliy taqlid qilingan R2 xotirasiga yuklaydi.

3. Ishlab chiqish serverini ishga tushiring

npm run dev -- --host 127.0.0.1

http://127.0.0.1:3000 manzilini oching. Windows’da 127.0.0.1 manzilidan aniq foydalanish test vositalari localhost manzilini IPv6’ga yo‘naltiradigan holatlarning oldini oladi.

Ishlab chiqish serverini 0.0.0.0 manzilida ishga tushirmang yoki uni to‘g‘ridan-to‘g‘ri internetga chiqarmang. Ishlab chiqish uchun kirish, soxta to‘lovlar va /api/dev/* faqat localhost’dan yuboriladigan to‘g‘ridan-to‘g‘ri so‘rovlar uchun mo‘ljallangan.

Asosiy ish jarayonini sinab ko‘ring

Standart mahalliy konfiguratsiyada PAYMENT_PROVIDER=mock, VIDEO_PROVIDER=mock va MODERATION_PROVIDER=mock ishlatiladi. Bu karta uchun to‘lov undirmasdan yoki tashqi video xizmatiga topshiriq yubormasdan mahsulotni sinab ko‘rish imkonini beradi.

1. Kirish sahifasini oching va ishlab chiqarish muhitidan tashqarida ko‘rsatilgan ishlab chiqish kirishidan foydalaning.
2. Kredit paketini tanlang. Soxta checkout hech qanday to‘lov undirmasdan to‘lovni taqlid qiladi.
3. Surat yuklang va yaratishni boshlang.
4. Soxta video provayderi sun’iy intellekt modeliga murojaat qilish o‘rniga tayyorlangan shablon videoni nusxalaydi.
5. Yaratilgan videoni, kreditlar reyestrini, to‘lov yozuvlarini va ulashish sozlamalarini ko‘rish uchun boshqaruv panelini oching.

Yuklash rad etilishini taqlid qilish uchun yuklash shaklini mockOutcome=reject qiymati bilan yuboring. Mahalliy muhitda Turnstile’ni o‘chirib qo‘yish uchun TURNSTILE_SITE_KEY qiymatini bo‘sh qoldiring.

Shuningdek, hozir tizimga kirgan foydalanuvchining media fayllari uchun saqlash muddatini tozalash jarayonini sinab ko‘rishingiz mumkin:

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

{"days": 8}

Mahalliy email yuborish simulyatsiya qilinadi. Outbox'ni quyidagi so'rov yordamida tekshiring:

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

Yangi trend uchun sayt yarating

1. Yuqori darajadagi tarixni saqlagan holda repozitoriy klonini yarating

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

Kelajakdagi shablon yangilanishlarini birlashtirmoqchi bo'lsangiz, GitHub'ning template tugmasidan foydalanmang. Shu tarzda yaratilgan repozitoriy manba repozitoriy bilan umumiy tarixga ega bo'lmaydi. Oddiy klon va upstream remote'i birlashtirish asosini saqlab qoladi.

2. Sayt generatorini ishga tushiring

Avval sinov rejimidan boshlang, taklif qilinayotgan o'zgarishlarni tekshiring, so'ng --write parametrini qo'shing:

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

Generator site.ts faylini, wrangler.jsonc ichidagi Cloudflare resurs nomlarini va paket nomini yangilaydi. U deployment'ga xos identifikatorlarni tiklaydi va shablonning staging konfiguratsiyasini olib tashlaydi. Shundan so'ng qolgan qo'lda bajariladigan ishlar uchun tekshiruv ro'yxatini chiqaradi.

3. Narxlar va generatsiyani sozlang

src/config/site.ts faylini tahrirlang. packages ichidagi kredit paketlarini, subscriptionsEnabled kalitini, obuna planslarini, mavjud durations qiymatlarini va video.falModelni ko'rib chiqing.

Agar sayt faqat bir martalik paketlarni sotishi kerak bo'lsa, subscriptionsEnabledni falsega o'rnating. Paket taqqoslash uchun usti chizilgan narxni ko'rsatish maqsadida anchorPriceCentsdan foydalanishi mumkin, ammo README bu qiymat paket haqiqatan sotilgan narxni ifodalashi kerakligini ogohlantiradi. Yangi saytlar odatda bu qiymatni belgilanmagan holda qoldiradi.

4. Mahalliylashtirilgan kontentni qayta yozing

src/content/en.ts va src/content/zh.ts fayllaridagi trendga xos matnlarni almashtiring. Kamida hero bo'limi, tushuntirish, g'oyalar, FAQ va kiritilgan ikkala maqolani qayta yozing. Ixtiyoriy muammo va taqqoslash bloklari ham qayta yozilishi yoki nullga o'rnatilishi kerak.

Mavjud matn bo'ylab faqat kalit so'zni almashtirishdan saqlaning. Shablonda mexanik ravishda nusxalangan saytlar qidiruv tizimlari tomonidan keng ko'lamli kontentni suiiste'mol qilish deb baholanishi mumkinligi aniq ogohlantirilgan.

Maqola qo'shish uchun avval uning meta-ma'lumot yozuvini site.ts faylining articles bo'limida yarating, so'ng har bir lokalga mos kontent kalitini qo'shing. Maqolalar qo'llanmalar markaziga, sayt xaritasiga va sozlangan tegishli maqola havolalariga avtomatik kiritiladi. Mavjud trend va howTo yozuvlarini saqlang, chunki bosh sahifa ularga havola qiladi.

5. Barcha joylashtirilgan media fayllarni almashtiring

• Manba generatsiya kliplarini seed/templates/ ichiga <template.id>-<seconds>s.mp4 qolipidan foydalanib joylashtiring.
• Bosh sahifadagi videolar va posterlarni public/demo/ ichida almashtiring.
• public/og.png va public/favicon.svg fayllarini almashtiring.
• Faqat original yoki litsenziyalangan demo mediadan foydalaning va uning atribusiyasini site.examples.*.credit ichida qayd eting.

Agar FFmpeg mavjud bo'lsa, loyihaning original placeholder media fayllarini quyidagi buyruq bilan qayta yarating:

node scripts/generate-placeholder-media.mjs

template.idni o'zgartirgandan so'ng, seed/templates/ ichidagi eskirgan shablon fayllarini o'chiring.

Haqiqiy provayderlarni sozlang

Ishlash vaqti o'zgaruvchilari

Maxfiy bo'lmagan ishlab chiqarish o'zgaruvchilarini wrangler.jsonc ichida o'rnating. Muhim qiymatlarga SITE_URL, APP_ENV=production, PAYMENT_PROVIDER, VIDEO_PROVIDER, MODERATION_PROVIDER, TURNSTILE_SITE_KEY, ADMIN_EMAILS, EMAIL_FROM, mahsulot mosliklari va GOOGLE_CLIENT_ID kiradi.

To'lov provayderining mahsulot narxlari asosiy manba hisoblanadi. Saytda ko'rsatiladigan narxlar provayder boshqaruv paneli bilan sinxron saqlanishi kerak. Mahsulot mosliklari har bir sozlangan paket yoki rejani provayder mahsulot identifikatori bilan bog'laydi.

Maxfiy ma'lumotlar

Tanlangan integratsiyalarga qarab, maxfiy ma'lumotlar tarkibiga SESSION_SECRET, GOOGLE_CLIENT_SECRET, Waffo ma'lumotlari, Dodo ma'lumotlari, FAL_KEY, ixtiyoriy YIR_API_KEY, moderatsiya uchun ixtiyoriy OPENAI_API_KEY va TURNSTILE_SECRET_KEY kirishi mumkin.

Alohida maxfiy ma'lumotni quyidagicha o'rnating:

npx wrangler secret put <NAME>

Shuningdek, ishlab chiqarish o'zgaruvchilari faylidan nusxa olib, uni to'ldirishingiz, rejani tekshirishingiz va yetishmayotgan maxfiy ma'lumotlarni qo'llashingiz mumkin:

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

Sinxronlash skripti maxfiy ma'lumotlar qiymatlarini chiqarmaydi. Mavjud masofaviy maxfiy ma'lumotlar --overwrite berilmaguncha saqlanadi.

Cloudflare resurslarini ta'minlang

Har bir kalit so'zli sayt uchun alohida resurslar to'plamini yarating. Nomlar wrangler.jsonc ichidagi binding'lar bilan mos kelishi kerak.

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

Yaratilgan D1 ma'lumotlar bazasi identifikatori va KV namespace identifikatorini wrangler.jsonc ichiga ko'chiring. Har bir saytning rate-limit namespace_id qiymati ham Cloudflare hisobida noyob bo'lishi kerak.

Loyiha tomonidan tavsiflangan R2 lifecycle qoidalarini sozlang, shunda yuklangan fotosuratlar va yaratilgan videolar yetti kunlik va 30 kunlik saqlash muddatlariga rioya qiladi. Tranzaksion elektron pochta ishlashi uchun yuboruvchi domen ham Cloudflare Email Service xizmatiga ulanishi kerak.

Tekshirish va deploy qilish

Mahalliy sifat tekshiruvlarini ishga tushiring

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

Deploy qilishdan oldin konfiguratsiya diagnostikasini ishga tushiring:

npm run doctor

Diagnostika muhit, domen, tanlangan provayderlar, mahsulot mosliklari, Cloudflare resurs bog‘lanishlari, navbatlar, Cron konfiguratsiyasi, talab qilinadigan maxfiy kalit nomlari, qo‘llanilmagan migratsiyalar va hal qilinmagan TODO(site) belgilarini tekshiradi. Masofaviy tekshiruvlar ataylab mavjud bo‘lmaganda --offline dan foydalaning.

Deploy qiling va smoke-test ishga tushiring

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

npm run deploy avval deploydan oldingi tekshiruvlarni ishga tushiradi. Deploydan so‘ng Cloudflare’da maxsus domenni ulang va SITE_URL qiymati site.domain bilan aynan mos kelishiga ishonch hosil qiling. Canonical URL’lar, sitemap va bir xil manbaga tegishli CSRF tekshiruvlari shu moslikka bog‘liq.

Maxsus domen ishlay boshlagach, workers_dev va preview_urls qiymatlarini false ga o‘rnating. Aks holda, production Worker bir xil D1 va R2 resurslaridan foydalangan holda ommaviy Cloudflare development va versiya URL’lari orqali ham foydalanish mumkin bo‘lib qoladi.

SEO ishga tushirish vazifalarini yakunlang

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

IndexNow buyrug‘ini faqat site.seo.indexNowKey sozlangandan keyin ishga tushiring. Domenni Google Search Console va Bing Webmaster Tools’da tasdiqlang, so‘ng https://<domain>/sitemap.xml manzilini yuboring.

Kengaytirilgan maslahatlar

Production muhitida mock’lardan foydalanmang

Tanlangan provayderlari mock holatida qolsa, production va staging checkout, generatsiya va yuklash so‘rovlarini 503 javobi bilan rad etadi. Development login, mock checkout yo‘llari va development API endpoint’lari bu muhitlarda 404 qaytaradi. Buni npm run doctor ni ishga tushirish o‘rnini bosuvchi vosita emas, xavfsizlik mexanizmi sifatida ko‘ring.

Patch’larni nusxalash o‘rniga template yangilanishlarini birlashtiring

Saytga xos ishlarni src/config/site.ts, src/content/*, public/*, seed/, wrangler.jsonc va paket nomida saqlang. Umumiy tuzatishlar template’da amalga oshirilishi va har bir saytga birlashtirilishi kerak.

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

Squash merge, rebase yoki cherry-pick o‘rniga merge commit’lardan foydalaning. Sinxronlash rejasi git merge-base HEAD upstream/main ga tayanadi. Merge’ni qayd etishda commit xabarini Template-sync: <template commit sha> bilan yakunlang.

Deploylar davomida orqaga moslikni saqlang

Agar migratsiyalar ishga tushganidan keyin deploy muvaffaqiyatsiz tugasa, yangi Worker versiyasi orqaga qaytarilishi mumkin, ammo D1 migratsiyalari avtomatik tarzda bekor qilinmaydi. Rollback imkoniyatini saqlash uchun migratsiyalarni avvalgi ilova versiyasiga mos qilib tuzing.

Tegishli holatlarda biriktirilgan Claude Code workflow’laridan foydalaning

Repozitoriy trendga xos saytni scaffolding qilish uchun new-hot-site skill’ini, template o‘zgarishlarini birlashtirish uchun sync-upstream skill’ini va ishga tushirishdan oldingi hamda jonli tekshiruvlar uchun faqat o‘qish huquqiga ega launch-audit skill’ini o‘z ichiga oladi. Bu vositalar qo‘lda tekshirish o‘rnini bosmaydi: yaratilgan matnlar, litsenziyalangan media, domenlar, provayder mahsulotlari, OAuth sozlamalari, elektron pochta onboarding’i va lifecycle siyosatlari baribir tekshirilishi kerak.

Asosiy mantiqni o‘zgartirishdan oldin loyiha hujjatlarini ko‘rib chiqing

Kreditlar, to‘lovlarni bajarish, ikki tilli kontent, migratsiyalar yoki end-to-end testlarini o‘zgartirishdan oldin AGENTS.md fayliga murojaat qiling. Qo‘shimcha ma’lumotlar docs/env.md, docs/payments.md, docs/subscriptions.md, docs/SEO_AUDIT.md va docs/SAAS_VIDEO_FEATURES.md fayllarida mavjud. README ushbu hujjatlar hozirda xitoy tilida yozilganini qayd etadi.

Xulosa

ShrimpReel kalit so‘zlarga yo‘naltirilgan AI video SaaS uchun generatsiya navbatlari, billing, kreditlar, ma’muriyat, saqlash, muvofiqlik workflow’lari, analitika, SEO va Cloudflare operatsiyalarini o‘z ichiga olgan keng qamrovli boshlang‘ich asosni taqdim etadi. Xavfsiz mock workflow’dan boshlang, saytga xos har bir qatlamni moslashtiring, placeholder kontentni litsenziyalangan aktivlar bilan almashtiring, barcha provayder va Cloudflare sozlamalarini tekshiring hamda to‘liq test, diagnostika, SEO va smoke-test ketma-ketligi muvaffaqiyatli o‘tgandan keyingina deploy qiling.