bookreader

โปรแกรมอ่านหนังสือเอกสารทางอินเทอร์เน็ต

Internet Archive BookReader ใช้เพื่อดูหนังสือจาก Internet Archive ออนไลน์ และยังสามารถใช้เพื่อดูหนังสือเล่มอื่นๆ ได้อีกด้วย

ดูตัวอย่างสด:

• ในหน้ารายละเอียด: https://archive.org/details/birdbookillustra00reedrich

• หน้าต่างแบบเต็ม: https://archive.org/details/birdbookillustra00reedrich?view=theater

• URL ที่ฝังไว้สำหรับ iFrames: https://archive.org/embed/birdbookillustra00reedrich

การสาธิต

ดูไดเรกทอรี BookReaderDemo สิ่งเหล่านี้สามารถทดสอบได้โดยการสร้างไฟล์ต้นฉบับ (ตรวจสอบให้แน่ใจว่าติดตั้ง Node.js แล้ว):

 บิลด์การรัน NPM

และการเริ่มต้นเว็บเซิร์ฟเวอร์อย่างง่ายในไดเรกทอรีราก:

npm run serve

จากนั้นเปิด http://localhost:8000/BookReaderDemo/demo-simple.html

การใช้งาน

นี่เป็นตัวอย่างสั้นๆ

 // สร้างตัวเลือก objectvar BookReader = {
  ข้อมูล: [[ { ความกว้าง: 800, สูง: 1200,uri: '//archive.org/download/BookReader/img/page001.jpg' },],[ { ความกว้าง: 800, สูง: 1200,uri: '/ /archive.org/download/BookReader/img/page002.jpg' }, { กว้าง: 800 สูง: 1200,uri: '//archive.org/download/BookReader/img/page003.jpg' },],[ { ความกว้าง: 800, สูง: 1200,uri: '//archive.org/download/BookReader/img/page004.jpg' }, { กว้าง: 800, สูง: 1200, uri: '//archive.org/download/BookReader/img/page005.jpg' },]
  -

  bookTitle: 'การนำเสนอ BookReader อย่างง่าย',

  // ภาพขนาดย่อเป็นทางเลือก แต่ใช้ในกล่องโต้ตอบข้อมูล
  ภาพขนาดย่อ: '//archive.org/download/BookReader/img/page014.jpg',

  // ข้อมูลเมตาเป็นทางเลือก แต่ใช้ในกล่องโต้ตอบข้อมูล
  ข้อมูลเมตา: [{label: 'Title', value: 'Open Library BookReader Presentation'},{label: 'Author', value: 'Internet Archive'},{label: 'Demo Info', value: 'This demo show How เราสามารถใช้ BookReader กับเนื้อหาของตนเองได้'},
  -

  ui: 'full', // embed, full (responsive)};var br = new BookReader(options);// Let's go!br.init();

ภาพรวมสถาปัตยกรรม

เริ่มต้นที่เวอร์ชัน 5 BookReader แนะนำสถาปัตยกรรมไฮบริดที่ผสานโค้ดหลักที่เขียนด้วย jQuery ให้ใกล้เคียงกับวิวัฒนาการในฐานะส่วนประกอบของเว็บ ในขณะที่เราก้าวไปสู่อนาคตของ BookReader ในฐานะส่วนประกอบของเว็บ เรากำลังใช้แนวทางที่ขับเคลื่อนด้วยเหตุการณ์เพื่อเชื่อมโยงทั้งสองเข้าด้วยกัน

เข้าใกล้:

• ขับเคลื่อนด้วยเหตุการณ์

• การเปลี่ยนแปลง UI

• API ส่งคืน

• กิจกรรมหลัก src/BookReader/events.js

• ค้นหา API src/BookReader/events.js

• โค้ดหลักของ BookReader (BR) ปล่อยเหตุการณ์ที่กำหนดเอง โดยรายงานการดำเนินการ:

• BookNavigator ซึ่งเป็นตัวควบคุมส่วนประกอบเว็บของ BR รับฟังและตอบสนองต่อเหตุการณ์เหล่านี้เพื่อเติมข้อมูลในแผงเมนูด้านข้าง

• ควบคุม BR จากภายนอกโดยใช้วิธีสาธารณะ

• ขณะที่เราแยก UI ออกจากการวาด/การคำนวณตรรกะต่อไป วิธีการทางตรรกะเหล่านี้จะมองเห็นได้ง่ายขึ้น เพิ่มเป็นวิธีการสาธารณะ และสร้างการทดสอบหน่วยสำหรับพวกเขา

• เมื่อ BookNavigator ตอบสนองต่อเหตุการณ์ของ BR BookNavigator จะสามารถควบคุมแกน BR ได้โดยตรงโดยใช้ฟังก์ชันสาธารณะ

แผงเมนู: Web Components ผ่าน LitElement

การนำทางด้านข้างของ BookReader ขับเคลื่อนโดยส่วนประกอบเว็บที่ปรุงแต่งด้วย LitElement

แกนหลัก: jQuery

ฟังก์ชันหลักของ BookReader อยู่ใน jQuery ซึ่งรวมถึง:

• การวาดและปรับขนาดหนังสือและโหมดต่างๆ (1 ขึ้นไป, กระจาย 2 หน้า, มุมมองแกลเลอรี)

• การนำทางแนวนอน

• บริการค้นหา API

• ปลั๊กอิน

ดูวิธีใช้/ขยายฟังก์ชันการทำงานหลัก:

• คุณสมบัติ

• สิ่งที่ต้องทำ (ตอนนี้ดู src/BookReader/options.js)

• ปลั๊กอิน

• Plugin.autoplay.js - โหมดเล่นอัตโนมัติ พลิกหน้าตามช่วงเวลาที่กำหนด

• Plugin.chapters.js - เรนเดอร์เครื่องหมายบท

• Plugin.search.js - เพิ่ม UI การค้นหาและการโทรกลับ

• Plugin.tts.js - เพิ่ม UI ของ tts (อ่านออกเสียง) ไลบรารีเสียง และการโทรกลับ

• Plugin.url.js - อัปเดต URL ของเบราว์เซอร์โดยอัตโนมัติ

• Plugin.resume.js - ใช้คุกกี้เพื่อจดจำหน้าปัจจุบัน

• Plugin.vendor-fullscreen.js - แทนที่โหมดเต็มหน้าจอด้วยแบบเต็มหน้าจอดั้งเดิมของผู้ขาย

• ดูไดเรกทอรีปลั๊กอินสำหรับไฟล์ปลั๊กอินปัจจุบัน

• มีการใช้ระบบปลั๊กอินพื้นฐาน ดูตัวอย่างในไดเร็กทอรีปลั๊กอิน แนวคิดทั่วไปคือเป็นมิกซ์อินที่เสริมต้นแบบ BookReader ดูไดเร็กทอรีปลั๊กอินสำหรับปลั๊กอินที่รวมอยู่ทั้งหมด แต่นี่คือตัวอย่างบางส่วน:

การฝัง BookReader ใน iFrame

BookReader สามารถฝังอยู่ภายใน <iframe> ได้ หากคุณใช้ปลั๊กอิน IFrame ภายใน <iframe> ผู้อ่านจะส่งการแจ้งเตือนเกี่ยวกับการเปลี่ยนแปลงสถานะของผู้อ่านผ่านทาง window.postMessage() หน้าต่างหลักสามารถส่งข้อความของตัวเองได้ (เช่นผ่าน window.postMessage() ) และปลั๊กอิน IFrame จะจัดการการอัปเดตผู้อ่านให้ตรงกัน

เหตุการณ์ข้อความ

การเปลี่ยนแปลงชิ้นส่วน

ข้อความ Fragment Change จะถูกส่งไปยังหน้าต่างหลักเมื่อ BookReader ที่ฝังไว้ย้ายไปมาระหว่างหน้า/โหมด เมื่อ <iframe> ได้รับข้อความนี้ ข้อความจะย้ายไปยังหน้า/โหมดที่ระบุ “แฟรกเมนต์” ได้รับการจัดรูปแบบตามข้อกำหนด BookReader URL

 { "type": "bookReaderFragmentChange", "fragment": "page/n1/mode/2up"}

การพัฒนา

(อัพเดท?)

JavaScript ต้นฉบับเขียนด้วยภาษา ES6 (อยู่ในไดเร็กทอรี src/js ) และใน ES5 (อยู่ใน BookReader ) npm run serve-dev เริ่มเซิร์ฟเวอร์ dev ที่โหลดซ้ำอัตโนมัติซึ่งสร้าง js/css ที่ได้รับการแก้ไขที่ localhost:8000

จนกว่าจะถึงเวอร์ชันหลักถัดไป เราต้องจัดเก็บไฟล์บิลด์ไว้ใน repo เพื่อรักษาความเข้ากันได้แบบย้อนหลัง กรุณา อย่า รวมไฟล์เหล่านี้ในการประชาสัมพันธ์ของคุณ สิ่งใดก็ตามในไดเรกทอรี BookReader/ ไม่ควรถูกคอมมิต

การพัฒนาไอคอน

หากต้องการดูการเปลี่ยนแปลงแพ็คเกจไอคอนท้องถิ่นใน bookreader คุณจะต้องติดตั้ง core-js ลงในแพ็คเกจไอคอนและลิงก์ไปยัง bookreader

ลองใช้ icon-share เป็นตัวอย่าง

1. ยืนยันว่าแพ็คเกจไอคอนของคุณทำงานอย่างถูกต้องในการสาธิต iaux-icons

2. นำทางไปยังแพ็คเกจไอคอนของคุณ ( iaux-icons/packages/icon-share ) และเรียกใช้คำสั่ง: npm install core-js

• คุณไม่จำเป็นต้องคอมมิตการเปลี่ยนแปลง core-js เหล่านี้

3. จากภายในคำสั่งรันไดเร็กทอรีแพ็คเกจไอคอนของคุณ: npm link

• คุณสามารถใช้คำสั่ง npm ls -g เพื่อยืนยันว่าแพ็กเกจในเครื่องของคุณปรากฏในรีจิสทรีแล้ว

4. ไปที่ /bookreader แล้วรันคำสั่ง: npm link @internetarchive/icon-share

• คุณสามารถใช้คำสั่ง npm ls |grep icon-share เพื่อยืนยันว่า icon-share เป็นลิงก์ไปยังไดเร็กทอรีในเครื่องของคุณแล้ว

5. ตอนนี้คุณสามารถเริ่มเซิร์ฟเวอร์ท้องถิ่นเพื่อดูการเปลี่ยนแปลงของคุณโดยการรันคำสั่ง: npm run serve-dev

ข่าวประชาสัมพันธ์

หากต้องการเวอร์ชันชน repo และเตรียมการเผยแพร่ ให้รัน npm version major|minor|patch (ตามหลัง semver) จากนั้น (บางอย่างเช่น) git push origin HEAD --tags มันจะอัปเดตหมายเลขเวอร์ชันที่ปรากฏโดยอัตโนมัติ สร้างไฟล์ และขอให้คุณอัปเดต CHANGELOG

เราเผยแพร่ BookReader in-repo ในรูปแบบแท็กและยังเป็นโมดูลโหนด @internetarchive/bookreader

การทดสอบ

เราต้องการได้รับความครอบคลุมการทดสอบ 100% และกำลังติดตามความคืบหน้าของเราในโครงการนี้: BookReader Fidelity

การทดสอบตั้งแต่ต้นจนจบ

นอกจากนี้เรายังมีการทดสอบแบบครบวงจรโดยใช้ Testcafe เราเขียนการทดสอบสำหรับ repo เองและสำหรับการใช้งานของเราบน archive.org คุณสามารถอ่านเกี่ยวกับพวกเขาได้ที่นี่ สิ่งเหล่านี้ทำได้ค่อนข้างง่าย และเป็นวิธีที่ยอดเยี่ยมในการทำความรู้จักกับความมหัศจรรย์ของ BookReader ตรวจสอบบอร์ดโครงการเพื่อหาตั๋วที่เปิดอยู่เพื่อดำเนินการ และหากคุณไม่เห็นการทดสอบสำหรับสิ่งที่คุณพบเห็น อย่าลังเลที่จะสร้างปัญหา

หากต้องการรันการทดสอบตั้งแต่ต้นจนจบภายในเครื่องทั้งหมด ให้รันคำสั่ง: npm run test:e2e

หากต้องการให้เซิร์ฟเวอร์ทดสอบตั้งแต่ต้นจนจบเปิดอยู่ขณะพัฒนา ให้รันคำสั่ง: npm run test:e2e:dev

การทดสอบหน่วย

เรามีการทดสอบหน่วยและใช้ Jest เพื่อรัน สำหรับการเยาะเย้ย เราใช้กลไกการเยาะเย้ยภายในของ Jest และ Sinon เพื่อตั้งสายลับ

หากต้องการรันการทดสอบหน่วยในเครื่องทั้งหมด ให้รันคำสั่ง: npm run test

วิธีการมีส่วนร่วม

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

ข้อมูลเพิ่มเติม

เอกสารสำหรับนักพัฒนา: https://openlibrary.org/dev/docs/bookreader

โฮสต์ซอร์สโค้ด: https://github.com/internetarchive/bookreader

IIIF (http://iiif.io) ดู BookReaderDemo/demo-iiif.html เพื่อดูตัวอย่างวิธีโหลดรายการ IIIF ใน BookReader

อุปกรณ์เป้าหมาย

โปรดทราบว่า BookReader เป็นส่วนสำคัญของภารกิจของ Archive.org ในการเข้าถึงความรู้ทั้งหมดแบบสากล ดังนั้นจึงต้องระมัดระวังในการรองรับเบราว์เซอร์รุ่นเก่า มันควรจะยังใช้งานได้และใช้ได้กับอุปกรณ์เก่า

พื้นที่สำหรับการปรับปรุง

• เปลี่ยนไลบรารีเป็นการพึ่งพา NPM แทนที่จะรวมอยู่ในซอร์สโค้ด

ดู CHANGELOG.md สำหรับประวัติของโครงการ

ใบอนุญาต

ลิขสิทธิ์ซอร์สโค้ดคือ AGPL v3 ตามที่อธิบายไว้ในไฟล์ LICENSE

เครดิตอื่นๆ

ความสามารถในการทดสอบบนอุปกรณ์หลายเครื่องนั้นได้รับความอนุเคราะห์จาก Browser Stack