jamstack ecommerce example

نظرًا لأن الصفحات التي يتم الوصول إليها من قبل زوار موقع الويب لا يتم إنشاء ديناميكي عند طلبهم ولكن تم إنشاؤها مسبقًا وتخدم كملفات HTML ثابتة ، فإن عملية طرح الميزات الجديدة والمحتوى تبدو مختلفة قليلاً عن تطبيقات الويب "التقليدية".

1. التنمية المحلية: يمكن إجراء تطوير ميزات جديدة محليًا.

   يأتي nuxt.js مع أدوات فعالة للغاية لدعم تجربة مطور رائعة مثل خادم Dev مع استبدال الوحدة الساخنة وإعادة التحميل المباشر.

   يتم تخزين محتوى المنتجات في مستودع GIT جنبًا إلى جنب مع الكود المصدر ، بحيث يمكن للمطورين الاستفادة من بيانات المنتج الحقيقية أثناء التنفيذ والاختبار.

   يجب أن تكون نقاط نهاية API باستخدام بعض الخادم الوهمي ، مثل Wiremock أو MockServer ، من أجل العمل بشكل مستقل عن الأنظمة الخارجية الحقيقية. لمصادقة Connect OpenID ، فكر في إعداد keycloak محليًا.

   ملاحظة: لا يتضمن هذا المثال أي خادم وهمية.

2. المحتوى المسبق: في كل مرة يجب نشر بيانات المنتج الجديدة أو المحدثة على الموقع الإلكتروني ، يجب تحديث ملفات JSON المحددة مسبقًا في مستودع GIT قبل إنشاء إصدار جديد من ملفات HTML الثابتة.

   سوف يتصل البرنامج النصي الخاص بالمحتوى Node.js بـ Salesforce ويحضر أحدث البيانات عبر API Salesforce Rest. يتم تحديث ملفات المحتوى JSON وفقًا لذلك ويمكن الالتزام بمستودع GIT.

   الأمر متروك لك تمامًا أين ومتى يتم تنفيذ هذا البرنامج النصي. على سبيل المثال ، يمكن تشغيله كإجراء github أو في عملية CI على Travis CI.

   ملاحظة: Salesforce هو مجرد مثال على مصدر بيانات محتمل لاكتساب المحتوى من. يمكن أيضًا إنشاء ملفات المحتوى من أي مصدر بيانات آخر.

3. نشر ملفات HTML الثابتة: يمثل كل التزام في مستودع GIT تطبيقًا معينًا ومحتوى لموقع الويب يمكن نشره.

   تقوم عملية الإنشاء بتحويل الشفرة المصدرية إلى أجزاء محسّنة وتنشئ ملفات HTML الثابتة عن طريق حساب جميع الطرق التي يمكن الوصول إليها لمكونات الصفحة التي تم تنفيذها وملفات المحتوى المسبق مسبقًا.

   أخيرًا ، يمكن نشر جميع ملفات مواقع الويب التي تم إنشاؤها إلى أي خادم ويب أو شبكة تسليم المحتوى ، على سبيل المثال NetLify.

   ملاحظة: يمكن لعملية الإنشاء أيضًا الاستفادة من طلبات API لتحميل المحتوى الذي لا يتم تخزينه في ملفات المحتوى في مستودع GIT.

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

   بمجرد أن تقوم صفحة الويب بتحميل ركلات JavaScript الديناميكية وتعزز الصفحة بميزات ديناميكية. يمكن أن يكون هذا ميزات مثل عربة التسوق أو عرض محتوى مستخدم مخصص.

   يمكن جلب البيانات الديناميكية عن طريق إرسال طلبات API من المتصفح. يمكن للزوار المصادقة باستخدام بروتوكولات قياسية مثل OAUTH 2.0 و OpenID Connect للسماح لموقع الويب بتقديم المحتوى الفردي.

تشغيل المعرض

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

• node.js 12.x أو أعلى
• مدير حزمة الغزل
• منظمة Salesforce ، على سبيل المثال ، طبعة مطور مجانية

إعداد Salesforce

إعداد مستخدم الاختبار والملف الشخصي

لماذا؟ يمكّن تسجيل الدخول مع مستخدم عميل حقيقي في مجتمع Lightning.

1. إعداد Salesforce المفتوح وانتقل إلى "المجتمعات". تأكد من تمكين المجتمعات.
2. في إعداد Salesforce انتقل إلى "ملفات التعريف".
3. استنساخ الملف الشخصي "مستخدم مجتمع العميل" لإنشاء ملف تعريف مخصص خصيصًا لمستخدمي المجتمع الجديد. على سبيل المثال ، اتصل به "مثال مستخدم العميل".
4. افتح سحابة المبيعات لإنشاء حساب واتصال لأغراض الاختبار. في عرض الاتصال ، حدد الإجراء السريع "تمكين مستخدم العميل".
   • اضبط "ترخيص المستخدم" على "مجتمع العميل".
   • تعيين ملف التعريف الذي تم إنشاؤه في الخطوة السابقة.
   • أدخل عنوان البريد الإلكتروني الخاص بك لتلقي رسالة البريد الإلكتروني الترحيب بمجرد إضافة المستخدم كعضو إلى المجتمع.

تثبيت بيانات تعريف Salesforce

مطلوب هذه الخطوة إذا كنت تخطط لاستخدام البرنامج النصي تحديث المحتوى وإذا كنت ترغب في إعداد تسجيل تلقائي في مجتمع Lightning عندما يسجل المستخدمون الخروج في الموقع.

لماذا؟ يضيف الكائن المخصص "فئة المنتج" إلى ORG Salesforce الخاص بك ويقوم بتثبيت حقل مخصص على كائن Product2 للسماح لك بتحديد الفئة التي ينتمي إليها المنتج. يقوم أيضًا بتثبيت مكون ويب Lightning لاستخدامه في صفحة مجتمع تسجيل الخروج الخاصة والتي ستقوم تلقائيًا بتسجيل المستخدم.

1. تنزيل وتثبيت Salesforce CLI.

2. افتح محطة في دليل salesforce .

3. قم بتوصيل Salesforce CLI بألواح Salesforce الخاصة بك.

   sfdx force:auth:web:login -a MyOrg -s

4. نشر مشروع SFDX على ORG Salesforce.

   sfdx force:source:deploy -p force-app

إعداد مستخدم التكامل

لماذا؟ يسمح لخادم API وبرنامج النصي للمحتوى بالاتصال بـ Salesforce مع مستخدم تقني محدد يسمح للتحكم في الوصول الفردي.

1. إعداد Salesforce مفتوح وانتقل إلى "المستخدمين".
2. إنشاء مستخدم جديد.
   • اضبط "ترخيص المستخدم" على "Salesforce"
   • تعيين ملف التعريف "مسؤول النظام".
   • امنح المستخدم بعض الاسم مثل "التكامل".
   • أدخل عنوان البريد الإلكتروني الخاص بك من أجل استلام البريد الإلكتروني للتسجيل.
3. إذا كنت تخطط لاستخدام البرنامج النصي تحديث المحتوى ، فيرجى تعيين مجموعة الإذن "محرر فئة المنتج" إلى مستخدم التكامل.
4. قم بتأكيد البريد الإلكتروني للتحقق وأكمل تسجيل المستخدم عن طريق إدخال كلمة مرور جديدة.
5. تسجيل الدخول إلى Salesforce مع مستخدم التكامل هذا.
6. في قائمة المستخدم بجانب أيقونة الإعداد ، حدد "الإعدادات".
7. انتقل إلى "إعادة تعيين رمز الأمان الخاص بي" وانقر فوق الزر "إعادة تعيين رمز الأمان". يجب أن تتلقى الرمز الجديد عبر البريد الإلكتروني.

إعداد مجتمع البرق

لماذا؟ مطلوب لعرض صفحة تسجيل الدخول أثناء تدفق مصادقة OpenID Connect.

1. إعداد Salesforce مفتوح وانتقل إلى "جميع المجتمعات".
2. انقر فوق الزر "مجتمع جديد" واختر القالب "قم بإنشاء خاص بك". امنحه بعض الاسم التعسفي ويفضل أن يترك عنوان URL فارغًا.
3. افتح "مساحة العمل" للمجتمع الجديد وانتقل إلى "الإدارة".
4. في قسم "الإعدادات" تنشيط المجتمع.
5. انتقل مؤقتًا إلى إعداد Salesforce في "All Communities" وفتح "منشئ" المجتمع الجديد. انقر فوق الزر "نشر".
6. مرة أخرى في "مساحة العمل" للمجتمع ، انتقل إلى قسم "رسائل البريد الإلكتروني" وأدخل عنوان البريد الإلكتروني الخاص بك في تكوين "المرسل". تأكد من تأكيد رسالة البريد الإلكتروني التي يتم إرسالها إليك.
7. قم بتفعيل مربع الاختيار "إرسال بريد إلكتروني مرحبًا به".
8. في قسم "الأعضاء" ، قم بتعيين ملف التعريف الذي تم إنشاؤه مسبقًا لمستخدمي مجتمع العميل (على سبيل المثال "مثال مستخدم العميل"). يجب أن تتلقى رسالة بريد إلكتروني مرحب بها لمستخدم الاختبار الذي تم إنشاؤه من قبل. أكمل تسجيل المستخدم عن طريق إدخال كلمة مرور جديدة.

إذا كنت ترغب في إعداد عمليات تسجيل تلقائية لمستخدمي المجتمع عند تسجيل الخروج على موقع الويب ، قم بتنفيذ هذه الخطوات الإضافية:

1. افتح "مساحة العمل" للمجتمع وانتقل إلى "الإدارة".
2. في قسم "تسجيل الدخول والتسجيل" ، أدخل عنوان URL لموقع الويب الخاص بالموقع في حقل "URL لصفحة الخروج" (على سبيل المثال ، إذا كان تشغيل موقع الويب على http: // localhost: 3000 أدخل عنوان URL http: // localhost: 3000/logout)
3. عاد إلى إعداد Salesforce في "All Communities" وفتح "Builder" للمجتمع.
4. قم بإنشاء صفحة قياسية فارغة مع تخطيط محتوى تعسفي (على سبيل المثال "عمود عرض كامل 1"). امنح الصفحة اسم "تسجيل الدخول" وعنوان URL "تسجيل الخروج".
5. في إعدادات الصفحة ، قم بتعيين "الوصول إلى الصفحة" إلى "يتطلب تسجيل الدخول".
6. اسحب المكون المخصص "JSEC Auto Logout" من لوحة "المكونات" إلى منطقة المحتوى في الصفحة. لا تقم بالارتباك: سيؤدي ذلك على الفور إلى إعادة توجيهك إلى صفحة خطأ في Builder Experience لأن هذا المكون يحاول تسجيل المستخدم عند تقديمه. هذا مجرد مؤشر على أن المكون يعمل كما هو متوقع.
7. نشر التغييرات التي تم إجراؤها على المجتمع.

إعداد التطبيق المتصل

لماذا؟ مطلوب لمصادقة OpenID Connect لزوار موقع الويب ويسمح لخادم API وبرنامج النصي للمحتوى بالاتصال بـ Salesforce بطريقة آمنة.

1. فتح Salesforce Setup وانتقل إلى "مدير التطبيق".
2. انقر فوق الزر "تطبيق متصل جديد" وأدخل البيانات التالية.
   • اسم التطبيق المتصل: (اختر أي شيء تريده ، على سبيل المثال "OIDC المحلي")
   • اسم API: (اختر أي شيء تريده ، على سبيل المثال "local_oidc")
   • البريد الإلكتروني الاتصال: (عنوان بريدك الإلكتروني)
   • تمكين إعداد oauth: المنشط
   • URL رد الاتصال: http: // localhost: 3000/تسجيل الدخول/رد الاتصال
   • تم اختيار Oauth Scoped:
     • الوصول إلى معلوماتك الأساسية (معرف ، ملف تعريف ، بريد إلكتروني ، عنوان ، هاتف)
     • السماح بالوصول إلى معرفك الفريد (OpenId)
     • تنفيذ الطلبات نيابة عنك في أي وقت (refresh_token ، غير متصل))
   • تتطلب سر تدفق خادم الويب: إلغاء تنشيطه
   • تكوين رمز المعرف: تم تنشيطه
   • رمز صالح ل: (بعض عمر الجلسة المعقولة ، على سبيل المثال 240 دقيقة)
   • الجماهير الرمزية للمعرف: (اترك فارغًا ، يعني استخدام مفتاح المستهلك)
   • قم بتضمين المطالبات القياسية: المنشط
3. من عرض التطبيق المتصل ، نسخ "مفتاح المستهلك" و "سر المستهلك" للاستخدام لاحقًا في معلمات التكوين.
4. انقر فوق الزر "إدارة" ثم "سياسات تحرير".
5. قم بتعيين حقل "المستخدمين المسموحين به" على "المستخدمين المعتمدين من المسؤولين معتمدين".
6. في لوحة "ملفات التعريف" ، انقر فوق الزر "إدارة ملفات التعريف" وتعيين كل من الملف الشخصي الذي تم إنشاؤه مسبقًا لمستخدمي مجتمع العميل (على سبيل المثال "مثال مستخدم العميل") وملف تعريف مستخدم التكامل (على سبيل المثال "مسؤول النظام").

تشغيل نص تحديث المحتوى

هذه الخطوة اختيارية لأن مستودع GIT يحتوي بالفعل على بعض المنتجات والفئات للمثال.

يجب أن يكون لديك بعض السجلات لكائن Product2 في Salesforce Org الذي نشط ولديه إدخالات دفتر الأسعار في بعض دفتر الأسعار المستخدمة لتحديث المحتوى.

يمكنك أيضًا إنشاء بعض فئات المنتجات وتعيينها لمنتجاتك.

ملاحظة: يتطلب البرنامج النصي نشر بيانات تعريف Salesforce في Org الخاص بك.

1. افتح محطة في content-scripts الدليل.

2. اضبط متغيرات البيئة التالية.

   اسم	وصف
   Salesforce_instance_url	عنوان URL الأساسي لمثيل Salesforce (نمط https://xx##.salesforce.com )
   salesforce_api_version	إصدار API Salesforce للاستخدام
   salesforce_token_endpoint	Oauth 2.0 نقطة نهاية الرمز المميز لمثيل Salesforce
   salesforce_client_id	مفتاح المستهلك للتطبيق المتصل (تم نسخه من قبل من عرض التطبيق)
   salesforce_client_secret	سر المستهلك للتطبيق المتصل (تم نسخه من قبل من عرض التطبيق)
   salesforce_username	اسم المستخدم لمستخدم التكامل
   Salesforce_password	كلمة مرور مستخدم التكامل + الرمز المميز للأمان (ببساطة تسلسل الاثنين)
   salesforce_price_book_name	خياري. دفتر الأسعار للاستخدام. الافتراضي: "كتاب السعر القياسي"

   مثال:

   SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
   SALESFORCE_API_VERSION=49.0
   SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
   SALESFORCE_CLIENT_ID=3MVG9...ru7XA
   SALESFORCE_CLIENT_SECRET=17DAD...0110F
   [email protected]
   SALESFORCE_PASSWORD=abcde...KiQ9n

   نصيحة: يمكنك وضع هذه المهام المتغيرة في ملف يسمى .env في content-scripts الدليل للتطوير والاختبار.

3. تثبيت التبعيات Node.js.

   yarn install

4. قم بتشغيل البرنامج النصي لتحديث الفئات والمنتجات JSON في content الدليل.

   yarn start

تشغيل خادم API

1. افتح محطة في api الدليل.

2. اضبط متغيرات البيئة التالية.

   اسم	وصف
   ميناء	منفذ الخادم المحلي للاستماع إليه. الافتراضي: 3000
   Salesforce_instance_url	عنوان URL الأساسي لمثيل Salesforce (نمط https://xx##.salesforce.com )
   salesforce_api_version	إصدار API Salesforce للاستخدام
   salesforce_token_endpoint	Oauth 2.0 نقطة نهاية الرمز المميز لمثيل Salesforce (وليس المجتمع)
   salesforce_jwks_endpoint	OpenID Connect JSON Web Key Set نقطة نهاية لمجتمع Salesforce Lightning
   Salesforce_issuer_url	عنوان URL المصدر مدرج في رمز الهوية الصادر عن Salesforce
   salesforce_client_id	مفتاح المستهلك للتطبيق المتصل (تم نسخه من قبل من عرض التطبيق)
   salesforce_client_secret	سر المستهلك للتطبيق المتصل (تم نسخه من قبل من عرض التطبيق)
   salesforce_username	اسم المستخدم لمستخدم التكامل
   Salesforce_password	كلمة مرور مستخدم التكامل + الرمز المميز للأمان (ببساطة تسلسل الاثنين)
   salesforce_price_book_name	خياري. دفتر الأسعار للاستخدام. الافتراضي: "كتاب السعر القياسي"
   Security_cors_origin	عنوان URL الأساسي لتطبيق الويب المسموح به للوصول إلى الخادم.

   مثال:

   PORT=4000
   SALESFORCE_INSTANCE_URL=https://eu25.salesforce.com
   SALESFORCE_API_VERSION=49.0
   SALESFORCE_TOKEN_ENDPOINT=https://login.salesforce.com/services/oauth2/token
   SALESFORCE_JWKS_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/id/keys
   SALESFORCE_ISSUER_URL=https://georgwittberger-developer-edition.eu25.force.com
   SALESFORCE_CLIENT_ID=3MVG9...ru7XA
   SALESFORCE_CLIENT_SECRET=17DAD...0110F
   [email protected]
   SALESFORCE_PASSWORD=abcde...KiQ9n
   SECURITY_CORS_ORIGIN=http://localhost:3000

   نصيحة: يمكنك وضع هذه المهام المتغيرة في ملف يسمى .env في api الدليل للتطوير والاختبار.

3. تثبيت التبعيات Node.js.

   yarn install

4. تشغيل الخادم.

   yarn start

تشغيل تطبيق الويب

1. افتح محطة في دليل جذر المشروع.

2. اضبط متغيرات البيئة التالية.

   اسم	وصف
   api_url	عنوان URL الأساسي لخادم API
   logout_url	خياري. url صفحة تسجيل عنوان URL لمجتمع Salesforce Lightning
   OAuth2_Authorize_endpoint	Oauth 2.0 ترخيص نقطة نهاية مجتمع Salesforce Lightning
   OAUTH2_USERINFO_ENDPOINT	معلومات المستخدم نقطة نهاية خادم API
   OAUTH2_CLIENT_ID	مفتاح المستهلك للتطبيق المتصل (تم نسخه من قبل من عرض التطبيق)
   OAUTH2_SCOPES	Oauth 2.0 نطاقات لطلبها أثناء المصادقة ، مفصل الفاصلة

   مثال:

   API_URL=http://localhost:4000
   LOGOUT_URL=https://georgwittberger-developer-edition.eu25.force.com/s/logout
   OAUTH2_AUTHORIZE_ENDPOINT=https://georgwittberger-developer-edition.eu25.force.com/services/oauth2/authorize
   OAUTH2_USERINFO_ENDPOINT=http://localhost:4000/userinfo
   OAUTH2_CLIENT_ID=3MVG9...ru7XA
   OAUTH2_SCOPES=openid,id

   نصيحة: يمكنك وضع هذه المهام المتغيرة في ملف يسمى .env في دليل جذر المشروع للتطوير والاختبار.

   ملاحظة: إذا لم يتم توفير متغير LOGOUT_URL ، فسيتم إعادة توجيه المستخدمين إلى صفحة تسجيل الدخول على موقع الويب فورًا دون جولة خارجية.

3. تثبيت التبعيات Node.js.

   yarn install

4. إما إطلاق خادم التطوير الذي يقدم إعادة تحميل حي ...

   yarn dev

5. ... أو إنشاء ملفات HTML الثابت أولاً ثم تقدم هذه الملفات من dist Directory.

   yarn generate
   yarn start

6. افتح متصفحك على http: // localhost: 3000

رخصة

رخصة معهد ماساتشوستس للتكنولوجيا