primo explore devenv

بيئة تطوير سير عمل تخصيص واجهة المستخدم الجديدة Primo

بناء

• دليل gulp : يحتوي على نصوص البناء المتنوعة للبيئة وملف التكوين config.js الذي يجب تحديد الخادم الوكيل المستهدف فيه.

• دليل Node_modules : يحتوي على وحدات الطرف الثالث المختلفة المطلوبة لتشغيل النظام. يتم تعريف هذه الوحدات في ملف package.json .

• دليل الحزم : بمجرد أن تصبح حزمة التطوير الخاصة بك جاهزة، ستتمكن من إنشائها باستخدام أمر gulp create-package الذي سيقوم بإنشاء ملف الحزمة المضغوط الذي تحدده في هذا المجلد

• دليل primo-explore : يتكون من دليلين:

  1. custom : - حيث ستضع حزم التخصيص الخاصة بك
  2. tmp : مجرد مكان للاحتفاظ ببعض ملفاتك المؤقتة

ملخص

تتيح لك حزمة التطوير تكوين مكونات الصفحة التالية (اتبع الروابط للحصول على التفاصيل):

• CSS

• HTML

• الصور

• جافا سكريبت

لكل نوع تكوين، أو لكل طريقة عرض Primo مختلفة، يجب أن يكون هناك مجلد محدد مسمى باسم العرض (الذي يلتزم ببنية الدليل المنشأة) في مجلد الحزمة primo-explore/custom .

يمكن تنزيل مجلد العرض المخصص هذا من مكتب Primo الخلفي لديك، باتباع Primo Home > Primo Utilities > UI customization Package Manager ، أو البدء حديثًا من مستودع GitHub لحزمة Primo-explore. (تتمثل فائدة استخدام هذا المستودع في أنه ستجد في كل مجلد ملف README.md محددًا يحتوي على وصفات وأمثلة.)

تثبيت

ملاحظة: إذا لم تكن مسؤولاً عن جهازك، فقد تواجه مشاكل في التدفق أدناه، نوصي باستخدام "موجه أوامر Node.js (ابحث عن cmd في جهاز الكمبيوتر الخاص بك لتحديد موقعه) عندما تشير الإرشادات أدناه إلى " سطر الأوامر".

1. قم بتنزيل المشروع من هذا المستودع وضعه على جهاز الكمبيوتر الخاص بك

2. قم بفك ضغط الملف الذي قمت بتنزيله إلى موقع مجلد مشروع التطوير المفضل

3. قم بتنزيل وتثبيت إصدار العقدة 16.17.0

4. أعد تشغيل جهاز الكمبيوتر الخاص بك

5. من سطر الأوامر، قم بتشغيل الأمر: npm install -g gulp

6. في نافذة سطر أوامر جديدة ، انتقل إلى الدليل الأساسي للمشروع ( cd pathtoyourprojectfolderprimo-explore-devenv )

7. من سطر الأوامر، قم بتشغيل الأمر: npm install (يجب أن يؤدي هذا إلى تثبيت جميع وحدات العقدة اللازمة لـ gulp.)

   

8. قم بتحرير إعداد الخادم الوكيل لملف تكوين Gulp، الموجود في gulp/config.js : var PROXY_SERVER = http://your-server:your-port (تأكد من استخدام عنوان URL الحقيقي لـ Sandbox أو Production Primo Front-End.) لاحظ ذلك لـ تحدد بيئات SSL (HTTPS) الخادم على النحو التالي: var PROXY_SERVER = https://your-server:443

9. قم بملء مجلد حزمة العرض المخصص الخاص بك في مجلد الحزمة المخصصة ("...primo-explorecustom")، إما عن طريق تنزيل ملفات كود العرض من مكتب Primo Back Office الخاص بك أو باستخدام مستودع GitHub primo-explore-package) لبدء مجلد الحزمة الجديد. (إذا قمت بالفعل بتحديد حزمة عرض وتحميلها إلى BO - تأكد من تنزيلها وإلا فلن ترى تغييراتك السابقة وقد تقوم بالكتابة فوقها.)

   • إذا كان مجلد حزمة العرض المخصص الخاص بك يسمى "Auto1"، فيجب أن تبدو شجرة دليل بيئة التطوير الخاصة بك مشابهة لما يلي:

   • هام: يجب أن يتطابق اسم مجلد حزمة العرض المخصص مع العرض الموجود على الخادم الوكيل الذي يتم الرجوع إليه وإلا فلن يعمل خادم Gulp بشكل صحيح. للتطوير من البداية، تأكد أولاً من إنشاء (أو نسخ) طريقة عرض باستخدام معالج عرض Primo Back Office؛ ثم يمكنك إنجاز تخصيصاتك محليًا باستخدام هذا المستند.

10. ابدأ تخصيصات التعليمات البرمجية الخاصة بك:

• من سطر الأوامر، قم بتشغيل الأمر: gulp run --view <the VIEW_CODE folder> (سيؤدي هذا إلى تشغيل الخادم المحلي الخاص بك.)

  (على سبيل المثال، تشغيل gulp run --view Auto1 سيبدأ البيئة بأخذ التخصيصات من المجلد Auto1 .)

  

• لعملاء Primo VE، أضف علامة --ve : gulp run --view <the VIEW_CODE folder> --ve

• افتح المتصفح واكتب عنوان URL التالي: localhost:8003/primo-explore/?vid=your-view-code (مثال: http://localhost:8003/primo-explore/search?vid=Auto1)

• لعملاء Primo VE افتح عنوان URL التالي: localhost:8003/discovery/?vid=your-institution-code:your-view-code

• الآن يجب أن تكون قادرًا على إجراء التخصيصات الخاصة بك من خلال عمليات البحث والنتائج الحقيقية، من الخادم الوكيل المحدد مسبقًا. ملاحظة: بمجرد بدء العمل مع هذه البيئة، ستكتشف أن أفضل النتائج يتم تحقيقها من خلال العمل في وضع التصفح المتخفي في متصفحك؛ أو يمكنك مسح ذاكرة التخزين المؤقت للمتصفح الخاص بك قبل بدء تشغيل خادم Gulp.

• يمكنك الحصول على تعليقات فورية بشأن تغييرات التعليمات البرمجية الخاصة بك عن طريق تحديث المتصفح.

• قم بإجراء تغييراتك وفقًا للوثائق/الأمثلة في:

  • CSS

  • HTML

  • الصور

  • جافا سكريبت

ملاحظة: لديك خيارات متعددة لتحرير ملف css (custom1.css) وملف js (custom.js)، بعضها يتضمن طرقًا لتقسيم تطوراتك إلى ملفات منفصلة. عند استخدام مثل هذه الأساليب - سيتم تجاوز ملفات custom1.css وcustom.js بواسطة ملفات مختلفة عند تشغيل gulp. ضع ملفات css وjs المخصصة في ملفات بأسماء مختلفة مثل custommodule.css أو custom.module.js لدمجها في ملفات css/js المخصصة.

حزم النشر

بمجرد الانتهاء من تخصيص الحزمة، يمكنك ضغط هذا الدليل وتحميله باستخدام Primo BackOffice.

1. في نافذة سطر الأوامر، انتقل إلى الدليل الأساسي للمشروع: cd pathtoyourprojectfolderprimo-explore-devenv

2. من سطر الأوامر، قم بتشغيل الأمر: gulp create-package ستتم مطالبتك بقائمة تحدد كافة الحزم الممكنة التي يمكنك إنشاؤها، مثل:

   

   

3. قم بتسجيل الدخول إلى Primo Back Office وانتقل إلى قسم مدير حزم تخصيص واجهة المستخدم : Primo Home > Primo Utilities > UI customization Package Manager

4. استخدم زر استعراض الملف للعثور على ملف الحزمة المضغوطة الجديد وتحميله. (موجود في الدليل "pathtoyourprojectfolderprimo-explore-devenvpackage".)

   

5. لا تنس نشر تغييراتك

نشر إضافات Primo-Studio

بمجرد الانتهاء من تخصيص الحزمة، يمكنك تجهيزها للنشر على Primo-Studio.

1. في نافذة سطر الأوامر، انتقل إلى الدليل الأساسي للمشروع: cd pathtoyourprojectfolderprimo-explore-devenv

2. من سطر الأوامر، قم بتشغيل الأمر: gulp prepare-addon ستتم مطالبتك بقائمة تحدد كافة الحزم الممكنة التي يمكنك إنشاؤها.

3. بمجرد الانتهاء من تشغيل البرنامج النصي، سيتم إنشاء مجلد يحتوي على الوظيفة الإضافية في pathtoyourprojectfolderprimo-explore-devenvaddons .

4. من المجلد أعلاه، يمكنك نشر إضافتك إلى NPM وPrimo-Studio. للحصول على التعليمات، راجع: البرنامج التعليمي للوظيفة الإضافية Primo-Studio