كيفية تخزين بيانات المستخدم في الإلكترون

الطرق الثلاث الأكثر شيوعًا لاستمرار بيانات المستخدم بمثال

يمكن العثور على التعليمات البرمجية في هذه المقالة هنا: https://github.com/ccnokes/electron-tutorials

تحتاج معظم تطبيقات Electron إلى طريقة لحفظ بيانات المستخدم. قد يكون هذا هو تفضيلات المستخدم (على سبيل المثال إظهار / عدم إظهار الإشعارات) أو نوعًا من بيانات التطبيق (مثل حجم النافذة الأخيرة وموضعها). إذا كيف يمكننا حفظ إعدادات المستخدم في تطبيق Electron؟ وأين ننقذهم؟

نظرًا لأن لدينا إمكانية الوصول إلى كل من واجهات برمجة التطبيقات للمتصفح و node.js ، لدينا بعض الخيارات لبيانات المستخدم المستمرة. دعنا نذهب إليهم وبعد ذلك سننظر إلى مثال عملي.

واجهات برمجة التطبيقات لتخزين HTML5 (localStorage و IndexedDB)

إذا قمت بالوصول إلى بياناتك بشكل أساسي في عملية العارض ، فهذا هو الحل الأبسط. يمكنك الوصول إلى بيانات تخزين HTML5 من العملية الرئيسية عبر الإلكترون عن بُعد ، والذي يوفر واجهة برمجة تطبيقات غير متزامنة لإطار مستعرض مخفي يمكنه تنفيذ رمز محدد DOM / العارض. قد يكون أحد عيوب هذا هو حقيقة أن واجهة برمجة التطبيقات التي تستخدمها للحصول على / تعيين بيانات المستخدم الخاصة بك في الرئيسي (غير متزامن) ستختلف عن ما هو موجود في العارض (المزامنة). هذا حل جذاب للغاية ، وأنا أخطط للعب معه.

ملف ثابت

إذا كنا نريد الوصول إلى تلك البيانات بسهولة من كل من العارض وال الرئيسي ، باستخدام واجهة برمجة التطبيقات (API) نفسها ، فيمكننا استخدام الوحدة النمطية node.js fs (نظام الملفات) لحفظ البيانات في ملف JSON (أو أي تنسيق نريده). يغطي هذا النهج حالات الاستخدام الأكثر شيوعًا ، لذلك سنغطي كيفية القيام بذلك في مثال في لحظة.

قاعدة البيانات المدمجة

إذا كان لدينا احتياجات أكبر لتخزين البيانات ، فهناك قواعد بيانات "مضمنة" مثل neDB (تنفذ واجهة برمجة تطبيقات Mongo API) أو sqlite التي يمكننا استخدامها. لاحظ أن هذا يمكن أن يقدم بعض التعقيد لأنه في بعض الأحيان تكون قواعد البيانات هذه (مثل sqlite) هي وحدات عقدة أصلية (تستخدم C ++) ، ويمكن أن يشحن الكود الأصلي عبر الأنظمة الأساسية ، حتى من خلال NPM ، بعض المسلاسلات. لا تحتوي معظم التطبيقات التي رأيتها / سمعت عنها على احتياجات التخزين المعقدة ، لكنني متأكد من وجود بعض حالات الاستخدام لذلك.

أين يجب علي تخزين البيانات؟

عادةً ما يتم تخزين البيانات في مجلد "بيانات التطبيق" الخاص بالمستخدم.
حيث يختلف هذا الدليل حسب نظام التشغيل.
Mac OS: ~ / Library / Application Support / <اسم التطبيق الخاص بك (مأخوذ من خاصية الاسم في package.json)>
Windows: C: \ Users \ \ AppData \ Local \ <اسم التطبيق الخاص بك>
Linux: ~ / .config / <اسم التطبيق الخاص بك>

يوفر Electron app.getPath الذي يقوم بإرجاع الدليل الصحيح ، وفقًا للنظام الأساسي الخاص بك.

لماذا لا تخزن بيانات المستخدم بالقرب من جميع ملفات مصدر التطبيق لدينا؟

تُعد تخزين بيانات المستخدم في الموقع المخصص لنظام التشغيل لبيانات التطبيق الخاصة بالمستخدم هي الطريقة الاصطلاحية للتطبيق الأصلي لمواصلة بيانات المستخدم بسبب:

  • عندما نقوم بالتحديث التلقائي للتطبيق ، قد يتم نقل ملفات المصدر أو حذفها
  • سيؤدي تغيير أو إضافة الملفات الداخلية للتطبيق إلى إبطال توقيع الرمز

دعنا نستمر في بعض البيانات (مثال)

أعتقد أن حالات الاستخدام الأكثر شيوعًا يتم تغطيتها عن طريق تخزين بياناتنا كـ JSON في دليل بيانات المستخدم. دعونا نرى كيف يمكننا تطبيق وحدة نمطية في تطبيقنا يمكنها التعامل مع الحفظ / تحميل حجم النافذة. عندما نقوم بتغيير حجم النافذة ، سنقوم بحفظ الحجم الجديد في ملف. عندما يبدأ التطبيق ، سنقوم بتحميل هذا الملف ، وننقل الحجم المحفوظ إلى مثيل BrowserWindow الخاص بنا.

لنقم بتغليف الحصول على البيانات وتحديد المنطق في فصل يسمى المتجر. الأشياء الرئيسية التي يجب على هذه الفئة القيام بها هي القراءة / الكتابة إلى ملف والحصول على / تعيين القيم. سنعمل أيضًا على جعلها تعمل في أي من العارضين أو العملية الرئيسية. عندما يحفظ الملف ، فإنه يحتاج إلى حفظ الملف في دليل بيانات التطبيق للمستخدم. سنجعلها تأخذ صفنا كائن خيارات كوسيطة أولى. سنقوم بإدخال اسم ملف البيانات وبعض الإعدادات الافتراضية في الخيارات.

حسنا هذا هو. بسيط جدا. الآن دعنا ندمجه في تطبيقنا.

كله تمام. الآن لنبدأ تشغيل تطبيقنا ونختبره.

سيؤدي تغيير حجم النافذة إلى كتابة الملف. يجب أن يبدو شيء مثل:

{
  "windowBounds": {
    "العرض": 427 ،
    "الارتفاع": 289
  }
}

تتوافق فئة المتجر فعليًا مع وحدة مجتمع تسمى electron-config (نعم ، لقد طبقنا نفس واجهة برمجة التطبيقات) ، وهي وحدة رائعة تحتوي على مزيد من الميزات وتغطية الاختبار.

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

يوجد لديك!

للحصول على دورة فيديو كاملة حول كيفية إنشاء تطبيق Electron ...

من إنشاء BrowserWindow الأول إلى نشر التطبيق الخاص بك - راجع الدورة التدريبية الخاصة بي على Egghead.io!