افتح صفحة Shopify التي تحتوي على هذا القسم. تُظهر واجهة المُنشئ علامات تبويب على اليسار ومعاينة هاتف على اليمين.

• عنوان التطبيق ≤ 25 حرفًا (على سبيل المثال، Vista Commerce).
• الغرض ≤ 2 سطر.
• نص CTA (على سبيل المثال، Connect store).
• العلامة التجارية سداسية الشكل: #0D384D؛ سداسية الشكل المميزة: تنسيق مكون من ستة أرقام.
• اختياري: إعداد مسبق للمخطط (التجارة / المحتوى / الولاء).

• قم بتسمية علامات التبويب لتناسب منتجك (على سبيل المثال، الصفحة الرئيسية، الكتالوج/المكتبة، الجدول، الرؤى، الإعدادات).
• قم بتمكين الكتل التي تخطط لشحنها في v1 (النصائح، وشبكة المنتج، والمجدول، وبلاطات مؤشرات الأداء الرئيسية، والبطاقة الفارغة).

• الصق معرف العميل من شركاء Shopify (مطلوب).
• حدد نطاقًا واحدًا ≥ (الحد الأدنى: قراءة المنتجات؛ إضافة كتابة المنتجات إذا قمت بالتحور).
• ملاحظة: يتم قفل عنوان URL للتطبيق وعمليات إعادة التوجيه على vistabylara.com.

• الشركة: Vista by Lara.
• البريد الإلكتروني للدعم: support@vistabylara.com.
• رابط الخصوصية: https://vistabylara.com/privacy.
• رابط الدعم: https://vistabylara.com/support.
• قم بالتبديل بين Embedded وGDPR إذا لزم الأمر.

• افتح نافذة المعاينة وراجع كل ملف.
• حدد إنشاء الملفات للتنزيل.
• اختياري: إنشاء ZIP (خادم) لتلقي رابط ZIP.

• إعدادات مسبقة للمخططات التجارية/المحتوى/الولاء.
• التحقق من الصحة: ​​العنوان ≤ 25، الغرض القصير، الدعوة إلى اتخاذ إجراء مطلوبة، الألوان السداسية.
• الملف الشخصي: المبتدئ (الحد الأدنى من Koa) أو الإنتاج (أجزاء جاهزة لـ OAuth).
• معاينة مباشرة لخريطة العنوان/الغرض/CTA/النقاط البارزة/اللوحة.

يقوم المنشئ بإنشاء ملفات من علامات <template> ويستبدل العناصر النائبة استنادًا إلى مدخلاتك.

• [[APP_NAME]] → التصميم → عنوان التطبيق (على سبيل المثال، Vista Commerce)
• [[APP_HANDLE]] → تلقائي من العنوان (كباب) (على سبيل المثال، vista-commerce)
• [[CLIENT_ID]] → Shopify → معرف العميل
• [[APP_URL]] → مقفل → https://vistabylara.com/
• [[النطاقات]] → Shopify → النطاقات (على سبيل المثال، read_products، write_products)
• [[الشركة]] → الإعدادات → الشركة (على سبيل المثال، Vista by Lara)
• [[SUPPORT_EMAIL]] → الإعدادات → بريد الدعم الإلكتروني (على سبيل المثال، support@vistabylara.com)
• [[PRIVACY_URL]] → الإعدادات → عنوان URL للخصوصية (https)
• [[SUPPORT_URL]] → الإعدادات → عنوان URL للدعم (https)
• [[الغرض]] → التصميم → الغرض
• [[أبرز النقاط]] → التصميم → أبرز النقاط
• [[EMBEDDED_BLOCK]] → الإعدادات → مضمن (على سبيل المثال، [embedded]\nenabled = true أو فارغ)
• [[GDPR_BLOCK]] → الإعدادات → GDPR (اشتراكات webhook أو فارغة)
• [[GDPR_ROUTES]] → الإعدادات → GDPR (يضيف مسارات Koa أو فارغًا)

• shopify.app.toml (مع [auth]، وعناوين إعادة التوجيه، ونطاقات الوصول، و[embedded] اختياري، وGDPR اختياري)
• .env.مثال
• package.json (بداية Koa)
• server.js (خط الأساس Koa + CSP + /health + عينة /api/products + مسارات GDPR الاختيارية)
• ملف README-commands.txt (أوامر التطوير + مكان التسجيل في الشركاء)
• الخصوصية .md، الدعم.md ، القائمة.md

إضافي عندما يكون الملف الشخصي = الإنتاج : shopify.js (عناصر نائبة لواجهة برمجة التطبيقات)، وauth.js (عناصر نائبة لمسار OAuth)، وsession.js (عناصر نائبة لمخزن الجلسة).

• العنوان فارغ أو أطول من 25 حرفًا
• معرف العميل فارغ
• قائمة النطاقات فارغة
• العلامة التجارية/اللهجة ليست مكونة من 6 أرقام سداسية (على سبيل المثال، #0D384D)
• بريد الدعم موجود ولكن تنسيقه غير صالح
• عنوان URL للخصوصية/الدعم موجود ولكنه غير متوفر عبر HTTPS

في حال فشل أي منها، سيتم رفضها من خلال المعاينة/الإنشاء/الضغط. أصلحها، ثم أعد المحاولة.

كل تغيير في الإدخال يكتب JSON إلى localStorage تحت مفتاح لهذا القسم.

لإعادة ضبط المصنع، افتح وحدة التحكم وقم بتشغيل:
localStorage.removeItem('vbl-app-builder-<YOUR_SECTION_ID>')
الموقع.إعادة التحميل()

من مجلد التطبيق الخاص بك
npm i
$env:SHOPIFY_FLAG_STORE="your-store.myshopify.com"
npm تشغيل dev

ما يفعله هذا : تثبيت deps من package.json، وبدء server.js (Koa) على المنفذ 3000، والصحة في http://localhost:3000/health

من مجلد التطبيق الخاص بك
npm i
تصدير SHOPIFY_FLAG_STORE="your-store.myshopify.com"
npm تشغيل dev

وظيفة هذا : تثبيت التبعيات، وبدء تشغيل Koa (القيمة الافتراضية 3000). الحالة: http://localhost:3000/health

إنشاء → إنشاء ZIP (الخادم) يرسل POST ويعيد رابط zip في حالة النجاح.

تتضمن الحمولة : app_name، handle، client_id، app_url (https://vistabylara.com/)، عمليات إعادة التوجيه (https://vistabylara.com/auth/callback و https://vistabylara.com/api/auth)، النطاقات (read_products، write_products)، القالب (koa-minimal | koa-prod)، المصدر (vbl-app-builder-pro-ultra).

في حالة عدم استخدام 200، يظهر خطأ واضح في المربع الأزرق؛ تحقق من سجلات الشبكة والخادم.

• التصميم : العنوان ≤ 25، مجموعة CTA، الغرض ≤ 2 سطر، يسلط الضوء على 3-6 عناصر؛ الرمز السداسي صالح؛ معاينة التباين جيدة في الضوء/الظلام.
• IA : علامات التبويب تطابق المنتج؛ يتم تمكين الكتل الضرورية فقط.
• Shopify : معرف العميل موجود؛ النطاقات متعمدة (الحد الأدنى لقراءة المنتجات).
• الإعدادات : بريد إلكتروني للدعم يمكن الوصول إليه؛ عناوين URL للخصوصية/الدعم https؛ حدد Embedded + GDPR.
• إنشاء : تم فحص نموذج المعاينة، وخاصة shopify.app.toml وserver.js.

• "يجب أن يكون عنوان التطبيق ≤ 25 حرفًا." → اختصار.
• "مطلوب معرف العميل." → لصق من الشركاء.
• "حدد نطاقًا واحدًا على الأقل." → اختر read_products على الأقل.
• "يجب أن يكون لون العلامة التجارية/اللون المميز عبارة عن رمز سداسي عشري مكون من 6 أرقام." → استخدم #RRGGBB.
• إنشاء ملف ZIP يظهر 4xx/5xx → فحص الشبكة؛ التحقق من سجلات الخادم.
• لا يتم التنزيل بعد إنشاء → استخدم التنزيل لكل ملف في نافذة المعاينة أو جرب متصفحًا آخر.
• معاينة الهاتف فارغة → تمكين النصائح أو شبكة المنتج في IA.
• مسارات GDPR مفقودة → قم بتبديل GDPR في الإعدادات.

• احتفظ بـ shopify.js وauth.js وsession.js في المستودع.
• قم بتوصيل OAuth في auth.js؛ قم بتخزين الجلسات في session.js.
• استبدل /api/products demo بواجهة برمجة التطبيقات الإدارية الحقيقية باستخدام shopify.js.
• أضف حدًا للسرعة، وتطهير الإدخال؛ وقم بتشديد CSP إذا كنت ترغب في تضمين نصوص مخصصة.

نصائح للمستخدمين المحترفين : الإعدادات المسبقة أيديولوجية؛ مفاتيح الأسهم تتناوب بين علامات التبويب؛ مفاتيح تبديل السمة تعرض معاينة فاتح/داكن.

• النطاقات: قراءة المنتجات فقط (توسيع لاحقًا).
• مُضمن: مُمكّن.
• GDPR: تفعيل القوالب الجاهزة مبكرًا.
• نسخة القائمة: عنوان يتراوح بين 45 و60 حرفًا؛ وصف قصير يتراوح بين 160 حرفًا.
• تأكد من وجود صفحات الدعم والخصوصية المباشرة على vistabylara.com.

• العنوان ≤ 25؛ الغرض/الدعوة إلى اتخاذ إجراء/أبرز النقاط موجودة.
• العلامة التجارية واللهجة صالحة؛ قابلة للقراءة في الضوء/الظلام.
• تم مسح علامات تبويب IA؛ وتم تمكين الكتل الضرورية فقط.
• تم تعيين معرف العميل؛ ≥ تم اختيار نطاق واحد.
• الشركة، بريد إلكتروني للدعم، عناوين URL للخصوصية/الدعم صالحة وhttps.
• تم التحقق من المعاينة؛ TOML & server.js صحيحان.
• يتم فك ضغط ZIP (العميل/الخادم) بشكل نظيف.
• npm i → npm run dev works; /health returns {ok: true}.