primo explore devenv

สภาพแวดล้อมการพัฒนาเวิร์กโฟลว์การปรับแต่ง UI ใหม่ของ Primo

โครงสร้าง

• ไดเร็กทอรี gulp : เก็บสคริปต์บิลด์ต่างๆ สำหรับสภาพแวดล้อมและไฟล์การกำหนดค่า config.js ที่ต้องกำหนดพร็อกซีเซิร์ฟเวอร์เป้าหมายของคุณ

• ไดเร็กทอรี node_modules : เก็บโมดูลของบริษัทอื่นต่างๆ ที่จำเป็นในการรันระบบ โมดูลเหล่านี้ถูกกำหนดไว้ในไฟล์ package.json

• ไดเรกทอรีแพ็คเกจ : เมื่อแพ็คเกจการพัฒนาของคุณพร้อม คุณจะสามารถสร้างมันได้โดยใช้คำสั่ง gulp create-package ซึ่งจะสร้างไฟล์แพ็คเกจซิปที่คุณกำหนดในโฟลเดอร์นี้

• ไดเร็กทอรี primo-explore : ประกอบด้วย 2 ไดเร็กทอรี:

  1. กำหนดเอง : - ตำแหน่งที่คุณจะวางแพ็คเกจการปรับแต่งของคุณ
  2. tmp : เป็นที่สำหรับเก็บไฟล์ชั่วคราวบางส่วนของคุณ

ภาพรวม

แพ็คเกจการพัฒนาช่วยให้คุณกำหนดค่าส่วนประกอบของหน้าต่อไปนี้ (ตามลิงก์เพื่อดูรายละเอียด):

• ซีเอสเอส

• HTML

• รูปภาพ

• จาวาสคริปต์

สำหรับแต่ละประเภทการกำหนดค่าหรือสำหรับ Primo View ที่แตกต่างกันทุกรายการ ควรมีโฟลเดอร์ที่ระบุชื่อตามมุมมอง (ซึ่งยึดตามโครงสร้างไดเร็กทอรีที่สร้างขึ้น) ในโฟลเดอร์แพ็คเกจ primo-explore/custom

โฟลเดอร์ View แบบกำหนดเองนี้สามารถดาวน์โหลดได้จาก Primo Back Office ของคุณ โดยทำตาม Primo Home > Primo Utilities > UI customization Package Manager หรือเริ่มต้นใหม่จากที่เก็บ GitHub ของ primo-explore-package (ประโยชน์ของการใช้พื้นที่เก็บข้อมูลนี้คือในแต่ละโฟลเดอร์ คุณจะพบไฟล์ 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 (ควรติดตั้งโมดูลโหนดทั้งหมดที่จำเป็นสำหรับอึก)

   

8. แก้ไขการตั้ง ค่าพร็อกซีเซิร์ฟเวอร์ ของไฟล์การกำหนดค่า Gulp ซึ่งอยู่ที่ gulp/config.js : var PROXY_SERVER = http://your-server:your-port (ตรวจสอบให้แน่ใจว่าใช้ Sandbox จริงหรือ URL ส่วนหน้าของ Production Primo) โปรดทราบว่าสำหรับ สภาพแวดล้อม SSL (HTTPS) กำหนดเซิร์ฟเวอร์เป็น: var PROXY_SERVER = https://your-server:443

9. ใส่โฟลเดอร์แพ็คเกจ View แบบกำหนดเองของคุณในโฟลเดอร์แพ็คเกจแบบกำหนดเอง ("...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 flag : 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

• คุณสามารถรับผลตอบรับทันทีเกี่ยวกับการเปลี่ยนแปลงโค้ดของคุณโดยการรีเฟรชเบราว์เซอร์

• ดำเนินการเปลี่ยนแปลงตามเอกสาร/ตัวอย่างใน:

  • ซีเอสเอส

  • HTML

  • รูปภาพ

  • จาวาสคริปต์

หมายเหตุ: คุณมีหลายตัวเลือกในการแก้ไขไฟล์ css (custom1.css) และไฟล์ js (custom.js) บางตัวเลือกมีวิธีแยกการพัฒนาของคุณเพื่อแยกไฟล์ เมื่อใช้วิธีการดังกล่าว ไฟล์ custom1.css และ custom.js จะถูกแทนที่โดยไฟล์ต่างๆ เมื่อเรียกใช้อึก วาง css และ js ที่กำหนดเองของคุณลงในไฟล์ที่มีชื่อต่างกัน เช่น custommodule.css หรือ custom.module.js เพื่อให้ผสานเข้ากับไฟล์ css/js ที่กำหนดเอง

การเผยแพร่แพ็คเกจ

เมื่อคุณปรับแต่งแพ็คเกจเสร็จแล้ว คุณสามารถบีบอัดไดเร็กทอรีนั้นและอัปโหลดโดยใช้ Primo BackOffice

1. ในหน้าต่างบรรทัดคำสั่ง ให้นำทางไปยังไดเร็กทอรีฐานโปรเจ็กต์: cd pathtoyourprojectfolderprimo-explore-devenv

2. จากบรรทัดคำสั่ง ให้รันคำสั่ง : gulp create-package คุณจะได้รับแจ้งพร้อมเมนูที่ระบุแพ็คเกจที่เป็นไปได้ทั้งหมดที่คุณสามารถสร้างได้ เช่น :

   

   

3. เข้าสู่ระบบ Primo Back Office และไปที่ส่วนตัว จัดการแพ็คเกจการปรับแต่ง UI : 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