مولد رموز QR باستخدام TypeScript: مكتبة qrcode واستخداماتها

مولد رموز QR باستخدام TypeScript: مكتبة qrcode واستخداماتها

أصبحت رموز QR جزءًا لا يتجزأ من الويب الحديث وتطبيقات الجوال. تُستخدم لنقل الروابط وبيانات الاتصال والنصوص وكلمات مرور Wi-Fi وغيرها بسرعة. في بيئة TypeScript وJavaScript، توجد مكتبة قوية وسهلة الاستخدام تُسمى qrcode، والتي تتيح توليد رموز QR مباشرة في المتصفح أو على الخادم (Node.js). في هذه المقالة، سنشرح بالتفصيل كيفية تثبيت هذه المكتبة وإعدادها واستخدامها لإنشاء رموز QR باستخدام TypeScript.

ما هي مكتبة qrcode؟

مكتبة qrcode هي حزمة npm شائعة مكتوبة بلغة JavaScript ومتوافقة تمامًا مع TypeScript. تتيح توليد رموز QR بتنسيقات مختلفة: كسلسلة نصية، كـ SVG، كـ Canvas (للمتصفح)، أو كصورة PNG (لـ Node.js). المزايا الرئيسية:

• دعم جميع إصدارات رموز QR (من 1 إلى 40).
• تصحيح أخطاء قابل للتخصيص (L, M, Q, H).
• يعمل في كل من المتصفح وبيئة Node.js.
• دعم كامل لـ TypeScript - الأنواع مضمنة في الحزمة.
• واجهة برمجة تطبيقات بسيطة وبديهية.

التثبيت

للبدء، قم بتثبيت الحزمة عبر npm أو yarn:

npm install qrcode

أو

yarn add qrcode

إذا كنت تستخدم TypeScript، لا حاجة لأنواع إضافية - فهي مضمنة بالفعل في الحزمة.

مثال أساسي: توليد رمز QR كسلسلة نصية

أسهل طريقة للحصول على رمز QR هي توليده كسلسلة نصية تحتوي على البيانات (مثل URL). يتم استخدام طريقة toString لذلك:

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'terminal' }, (err, string) => {  if (err) throw err;  console.log(string);});

في هذا المثال، يتم عرض رمز QR في وحدة التحكم على شكل ASCII art. هذا مفيد لتصحيح الأخطاء أو العرض التوضيحي.

توليد رمز QR كـ SVG (للويب)

لإدراج رمز QR في صفحة ويب، من الأفضل استخدام تنسيق SVG - فهو قابل للتوسع دون فقدان الجودة ويمكن تنسيقه بسهولة عبر CSS.

import QRCode from 'qrcode';

const data = 'https://pythonlib.ru';

QRCode.toString(data, { type: 'svg' }, (err, svgString) => {  if (err) throw err;  // أدخل svgString في DOM، مثلاً عبر innerHTML  document.getElementById('qrcode-container').innerHTML = svgString;});

يمكنك أيضًا استخدام الوعود (Promises) بدلاً من دوال الاسترجاع (callbacks):

import QRCode from 'qrcode';

async function generateQR() {  const svgString = await QRCode.toString('https://pythonlib.ru', { type: 'svg' });  document.getElementById('qrcode-container').innerHTML = svgString;}

generateQR();

توليد رمز QR كـ Canvas (للمتصفح)

إذا كنت بحاجة إلى تضمين رمز QR في عنصر canvas (مثلاً لمزيد من المعالجة أو التنزيل)، استخدم طريقة toCanvas:

import QRCode from 'qrcode';

const canvas = document.getElementById('canvas') as HTMLCanvasElement;

QRCode.toCanvas(canvas, 'https://pythonlib.ru', { width: 400 }, (err) => {  if (err) throw err;  console.log('تم رسم رمز QR بنجاح على canvas');});

المعامل width يحدد عرض canvas (يتم حساب الارتفاع تلقائيًا).

توليد رمز QR كـ PNG (لـ Node.js)

للتوليد من جانب الخادم (مثلاً لحفظ الصورة على القرص)، استخدم toFile:

import QRCode from 'qrcode';

QRCode.toFile('./qrcode.png', 'https://pythonlib.ru', {  color: {    dark: '#000000',    light: '#ffffff'  }}, (err) => {  if (err) throw err;  console.log('تم حفظ رمز QR كـ qrcode.png');});

يمكنك أيضًا تعيين ألوان الوحدات والخلفية والحجم ومستوى