لماذا تقرأ ملفات PDF إذا لم تكن قادراً على الكتابة عليها؟
مرحباً بالجميع! أنا ألبيرت، وأحب جعل الأدوات أكثر ملاءمة وسهولة في الاستخدام.
إذا حاولت يوماً التعلم الذاتي أو دراسة كتب البرمجة أو قراءة وثائق تقنية معقدة من ملفات PDF على الكمبيوتر المحمول أو الجهاز اللوحي، فأنت تعرف هذا الصراع. تفتح كتاباً وتريد تحديد كود برمجي رئيسي، أو رسم سهم توضيحي سريع بجوار الشرح، أو ترك ملاحظة على الهوامش — وتدرك أن قارئات PDF القياسية إما معقدة أو مدفوعة أو أنها تفقد رسوماتك تماماً إذا قمت بتحديث الصفحة بالخطأ.
أردت إصلاح هذا وإنشاء PDF Ink — تطبيق ويب خفيف وسريع لقراءة وتدوين الملاحظات التفاعلية على كتب PDF مباشرة في المتصفح.
الفكرة والمكونات التقنية
الهدف الرئيسي كان بناء أداة:
- تعمل بنقرة واحدة في أي متصفح حديث.
- تتيح لك تحميل أي كتاب PDF محلي.
- تتيح لك الرسم على الصفحات باستخدام الماوس أو القلم أو اللمس، وكتابة ملاحظات نصية.
- والأهم من ذلك: حفظ صفحتك الحالية ومستوى الزوم وقائمة الكتب وجميع الملاحظات المرسومة محلياً بشكل آمن حتى تتمكن من استئناف التعلم في أي لحظة.
للتنفيذ، اخترت المكونات الحديثة: React + TypeScript + Vite + TailwindCSS.
ولمحرك رندرة PDF، قمت بدمج مكتبة موزيلا الموثوقة pdfjs-dist (PDF.js).
بنية الكانفاس المزدوجة
للحفاظ على أداء التطبيق وسرعة استجابته أثناء تفاعل الماوس أو اللمس، قمت بتقسيم مساحة العمل إلى طبقتين مستقلتين:
- طبقة PDF: كانفاس خلفي ثابت يقوم برندرة صورة صفحة PDF مع مراعاة مقياس الزوم النشط.
- طبقة الملاحظات: كانفاس شفاف علوي يلتقط أحداث المؤشر للمستخدم ويقوم برسم خطوط المتجهات وتراكب الملاحظات النصية.
هذا الفصل يجعل الرسم سريعاً جداً: عندما يرسم المستخدم خطاً، يعيد التطبيق طلاء تراكب الملاحظات الخفيف فقط دون لمس كانفاس PDF الثقيل.
تطور قاعدة البيانات: الترقية إلى IndexedDB v2
الإصدار الأول كان يحفظ ملف PDF وجميع الرسومات ككائن واحد في IndexedDB. ومع كبر حجم الكتب واجهتنا مشكلة في الأداء حيث كان حفظ ملف بحجم 20 ميجابايت كل 250 ملي ثانية يؤدي إلى بطء في الواجهة.
قمنا بحل هذا بفصل الملفات عن الملاحظات في قاعدة البيانات:
- مخزن
pdfs: يحفظ الملفات الثنائية ويتم كتابته مرة واحدة فقط عند رفع الملف. - مخزن
pdfs_metadata: يحفظ بيانات الملاحظات والزوم والإحداثيات الخفيفة بتنسيق JSON.
الآن، عند الرسم يتم تحديث مخزن الميتا داتا الخفيف فقط، وهو ما يستغرق جزءاً ضئيلاً من الملي ثانية ويقضي تماماً على أي بطء!
جرب التطبيق!
يمكنك تجربة النسخة الحية من التطبيق هنا:
👉 Practice Book PDF APP Live App
أتمنى لكم تعلماً ممتعاً، واكتبوا دائماً أكواداً تجعل الحياة أبسط!