example storefront
v5.2.1
MailChimp Open Commerce عبارة عن منصة تجارة في واجهة برمجة التطبيقات (API) ، والتي تم تصميمها باستخدام Node.js و React و GraphQL. يلعب بشكل جيد مع NPM و Docker و Kubernetes.
هذا المثال ، واجهة المتجر هي بمثابة مرجع حول كيفية تنفيذ واجهة متجر على الويب باستخدام API GraphQL Commerce Commerce. يمكنك أن تتفوق على هذا المشروع كنقطة قفز أو إنشاء تجربتك المخصصة باستخدام تقنية جانب العميل المفضل لديك. على الرغم من أننا نعتقد أن مثالنا على واجهة المتجر محتملة بشكل كامل بما يكفي لاستخدامه في الإنتاج ، إلا أنه قد يكون مفقودًا الميزات التي يتطلبه متجرك في هذا الوقت.
يأتي MailChimp Open Commerce مع مجموعة قوية من إمكانيات التجارة الأساسية مباشرة خارج الصندوق. ونظرًا لأن أي شيء في قاعدة كودنا يمكن تمديده أو الكتابة فوقه أو تثبيته كحزمة ، يمكنك أيضًا تخصيص أي شيء على النظام الأساسي الخاص بنا.
تم تصميم واجهة المتجر هذا باستخدام عميل Next.js و React و GraphQL و Apollo
اتبع دليل البدء السريع لتثبيت وتشغيل جميع الخدمات اللازمة لتشغيل واجهة المتجر:
| الدليل: الخدمة | عنوان URL |
|---|---|
reaction : GraphQL API | LocalHost: 3000/graphql |
reaction-admin : مسؤول رد الفعل | LocalHost: 4080 |
reaction : mongodb | LocalHost: 27017 |
example-storefront : storefront | LocalHost: 4000 |
ملاحظة : يتم إعادة توجيه واجهة المتجر بحيث إذا فتحت http: // localhost: 4000/graphql ، سيتم إعادة توجيهك إلى ملعب GraphQL.
عند تشغيل واجهة المتجر وردود الفعل لأول مرة ، ستحتاج إلى تكوين خيارات معالجة الدفع والشحن على الشريط لاختبار تدفق الخروج الكامل. بعد الاشتراك في مفتاح API Stripe ، اتبع هذه الخطوات:
STRIPE_PUBLIC_API_KEY ) إلى .env .http://localhost:4080 . تسجيل الدخول كمستخدم مسؤول.اقرأ المستندات لإنشاء شريحة أو متتبع تحليلات مخصص
تقوم منصة التفاعل بتشغيل واجهة المتجر باستخدام Docker ، لذلك سيتعين عليك استخدام أوامر Docker لعرض السجلات وتشغيل الأوامر داخل الحاوية وأكثر من ذلك. لتشغيل الأوامر على وجه التحديد لمواجهة المتجر ، تأكد من تغيير الدلائل إلى الدليل على example-storefront ضمن مستودع reaction-platform :
cd example-storefrontقم بإنشاء رابط رمزي لاستخدام صورة Development Docker:
ln -s docker-compose.dev.yml docker-compose.override.yml
إذا تم تشغيل متغيرات البيئة للمرة الأولى أو البيئة في .env.example ، قم بتغيير تنفيذ الأمر أدناه لتحديث متغيرات البيئة.
./bin/setup
ابدأ واجهة المتجر عن طريق التنفيذ:
docker-compose up -d && docker-compose logs -f تغيير INTERNAL_GRAPHQL_URL في .env إلى عنوان URL API الإنتاج. يجب أن ينتهي عنوان URL في /graphql ، مثل: https://my-website.com/graphql . احفظ ملف .env وأعد تشغيل التطبيق بـ:
docker-compose run --rm --service-ports web yarn startdocker-compose run --rm web [command]قم بتشغيل أي أمر داخل حاوية Docker ثم قم بإزالة الحاوية. استخدم هذا لتشغيل أي عمليات الأدوات. تذكر أن دليل المشروع الخاص بك سيتم تركيبه وسيعمل الأمور عادة. انظر قسم الغزل أدناه لمزيد من الأمثلة.
تشغيل الاختبارات محليا
docker-compose run --rm web yarn testقم بإجراء الاختبارات محليًا بدون ذاكرة التخزين المؤقت (قد يكون هذا مفيدًا إذا لم تظهر التغييرات)
docker-compose run --rm web yarn test --no-cacheلتشغيل اختبارات أمان Snyk (سيؤدي ذلك إلى إجراء اختبارات بنفس طريقة CI)
docker-compose run --rm web sh -c " cp package.json ../ && cp .snyk ../ && cd .. && snyk auth && snyk test "لتشغيل ESLINT
docker-compose run --rm web eslint srcيمكنك استخدام Google Chrome DevTools لتصحيح الرمز الذي يعمل في خادم تطبيق Node.js أثناء تشغيله داخل Docker.
docker-compose run --rm --publish 9229:9229 --publish 4000:4000 -e NODE_ENV=development web node --inspect=0.0.0.0:9229 ./src/server.jschrome://inspect . ابحث عن العملية ضمن الهدف البعيد وانقر فوق فحص .يجب تشغيل Yarn & NPM داخل حاوية Docker. لقد اتخذنا خطوات للتأكد من وضع node_modules في موقع قابل للتخطيط. إذا قمت بتشغيل الغزل محليًا ، فسيتم كتابة Node_Modules مباشرةً إلى دليل المشروع وتأخذ الأسبقية على تلك الموجودة في Build Docker. إضافة الغزل
docker-compose run --rm web yarn add --dev [package]
تثبيت الغزل
docker-compose run --rm web yarn install
docker-compose down --rmi local
docker-compose up -d --build
في بعض الأحيان ، نحتاج إلى اختبار مثال مكونات مكتبة مكونات واجهات المتجر في سياق واجهة المتجر. لسوء الحظ ، لا يوجد من السهل القيام بذلك داخل حاويات Docker ، لذلك نحن بحاجة إلى تشغيل storefront خارج Docker.
cd إلى ريبو reaction-component-library المحلية.cd في مجلد package من هذا الريبو ، وقم بتشغيل yarn install الأوامر متبوعًا yarn buildcd yarn link في مجلد dist الجديد الذي تم إنشاؤه للتو وتشغيله للسماح بتثبيت المكتبة في واجهة المتجر. سيؤدي هذا إلى ربط @reactioncommerce/componentsexample-storefront repo ، أعد تسمية ملف .yarnrc مؤقتًا إلى أي شيء آخر (أي .yarnrc-temp )yarn install ثم yarn link "@reactioncommerce/components" لتعيين الإصدار المحلي كتجاوز لإصدار NPM المنشور.env الخاص بك ، قم بتغيير INTERNAL_GRAPHQL_URL إلى متساوٍ http://localhost:3000/graphql ، مثل EXTERNAL_GRAPHQL_URLexport $(cat .env | xargs) && yarn devlocalhost:4000yarn add كل من هذه الحزم في package/dist . (هذا المجلد محدد على أي حال.)CTRL+Cyarn unlink "@reactioncommerce/components" في مجلد repo على واجهة المتجرcd إلى مجلد package/dist من ريبو reaction-component-library . قم بتشغيل yarn unlink ربط الإصدار المحلي من مكتبة المكون.yarnrc الخاص بك.env الخاص بك توقف ، واحتفظ بالحاويات:
docker-compose stopتوقف ، وإزالة الحاويات:
docker-compose downأوقف ، وإزالة الحاويات ، وحجابات وصور مبنية:
docker-compose down -v --rmi local في بعض الأحيان يكون من المفيد أثناء التطوير إنشاء إنتاج للتطبيق وتشغيله محليًا.
قم بتشغيل هذا الأمر لإنشاء صورة Docker مع بناء إنتاج التطبيق فيه:
docker build --network=host -t reactioncommerce/example-storefront:X.X.X . حيث يشير XXX إلى إصدار العلامة الذي تريد استخدامه ، أي 3.1.0
بعد ذلك ، لبدء التطبيق على جهازك ، تأكد من أن حاوية API رد الفعل تعمل بالفعل وإدخالها:
docker run -it --name storefront -p 4000:4000 --env-file .env.prod --network reaction.localhost reactioncommerce/example-storefront:X.X.X ملاحظة: يمكنك استبدال الرقم قبل القولون في 4000:4000 بمنفذ مضيف محلي مختلف تريد تشغيل التطبيق.
ملاحظة: ليست هذه هي الطريقة لتشغيل التطبيق في نشر الإنتاج الفعلي. هذا فقط لتشغيل بناء الإنتاج محليًا لأغراض التطوير أو التجريبية أو التجريبية.
لإيقاف حاوية Docker بعد بدء تشغيله مع الأمر أعلاه ، استخدم:
docker stop reaction-storefrontابحث عن خطأ أو خطأ مطبعي أو شيء غير موثق جيدًا؟ نود أن تفتح مشكلة تخبرنا بما يمكننا تحسينه! يستخدم هذا المشروع الإفراج الدلالي ، يرجى استخدام تنسيق رسالة الالتزام ..
تريد طلب ميزة؟ استخدم مستودع طلبات ميزة رد الفعل لدينا لتقديم طلب.
نحن نحب طلبات السحب الخاصة بك! تحقق من Good First Issue Help Wanted لقضايا جيدة.
يجب أن تجتاز طلبات السحب جميع الاختبارات الآلية والأناقة والفحوصات الأمنية.
يجب أن يجتاز الرمز الخاص بك جميع اختبارات القبول واختبارات الوحدة. يجري
docker-compose run --rm web yarn test لتشغيل أجنحة الاختبار محليا. إذا كنت تضيف وظيفة إلى رد الفعل ، فيجب عليك إضافة اختبارات للوظائف المضافة. يمكنك تشغيل الاختبارات محليًا دون ذاكرة التخزين المؤقت إذا لزم الأمر عن طريق تمرير علامة --no-cache . قد يكون هذا مفيدًا إذا لم تظهر التغييرات.
docker-compose run --rm web yarn test --no-cacheلتحديث لقطة فاشلة (إذا قمت بإجراء تغييرات على مكون)
docker-compose run --rm web yarn test -uنطلب أن جميع الكود التي ساهمت في رد الفعل تتبع قواعد ESLINT الخاصة بالرد. يمكنك الجري
docker-compose run --rm web eslint src
لتشغيل ESLINT مقابل رمزك محليًا.
نستخدم شهادة المنشأ للمطور (DCO) بدلاً من اتفاقية ترخيص المساهم لجميع المساهمات في مشاريع المصادر المفتوحة في تجارة التفاعل. نطلب من المساهمين موافقة على شروط DCO ويشيرون إلى هذا الاتفاق من خلال توقيع جميع الالتزامات التي تم إجراؤها على مشاريع التجارة في رد الفعل عن طريق إضافة سطر مع اسمك وعنوان بريدك الإلكتروني إلى كل رسالة Commit Commice التي ساهمت:
Signed-off-by: Jane Doe <[email protected]>
يمكنك التوقيع على ارتكابك تلقائيًا باستخدام GIT باستخدام git commit -s إذا كان لديك user.name الخاص بك. name و user.email تعيين كجزء من تكوين GIT الخاص بك.
نطلب منك استخدام اسمك الحقيقي (يرجى عدم وجود مساهمات مجهولة أو أسماء مستعارة). من خلال التوقيع على التزامك ، فإنك تشهد على أن لديك الحق في إرساله بموجب ترخيص مفتوح المصدر الذي يستخدمه مشروع تجارة رد الفعل الخاص هذا. يجب عليك استخدام اسمك الحقيقي (لا يُسمح بأسماء مستعارة أو مساهمات مجهولة.)
نستخدم تطبيق Probot DCO Github للتحقق من تسجيلات DCO لكل الالتزام.
إذا نسيت التوقيع على ارتباطاتك ، فسوف يذكرك Bot DCO ويعطيك تعليمات مفصلة لكيفية تعديل ارتكابك لإضافة توقيع.
حقوق الطبع والنشر 2019 رد فعل التجارة
مرخصة بموجب ترخيص Apache ، الإصدار 2.0 ("الترخيص") ؛ لا يجوز لك استخدام هذا الملف إلا في الامتثال للترخيص. يمكنك الحصول على نسخة من الترخيص على
http://www.apache.org/licenses/LICENSE-2.0
ما لم يكن مطلوبًا بموجب القانون المعمول به أو الموافقة على الكتابة ، يتم توزيع البرامج الموزعة بموجب الترخيص على أساس "كما هي" ، دون ضمانات أو شروط من أي نوع ، إما صريحة أو ضمنية. راجع ترخيص الأذونات والقيود التي تحكم اللغة المحددة بموجب الترخيص.
