دليل شامل: كيفية إنشاء أكواد QR في تطبيقات Angular 10

تُعد أكواد الاستجابة السريعة (QR Codes) جزءًا لا يتجزأ من حياتنا الرقمية اليومية، حيث تُستخدم لتبسيط الوصول إلى المعلومات، المواقع الإلكترونية، وحتى شبكات الواي فاي. فمن مسح قائمة طعام في مطعم إلى مشاركة تفاصيل الاتصال، أصبحت أكواد QR أداة قوية وفعالة. في هذا الدليل الشامل، سنتعمق في كيفية إنشاء هذه الأكواد الديناميكية ضمن تطبيقات Angular 10، خطوة بخطوة، مع بناء مثال عملي يوضح العملية برمتها.

ما هو كود QR؟

قبل الغوص في الجانب العملي، دعنا نفهم ما هو كود QR وما هي وظيفته الأساسية. وفقًا لـ ويكيبيديا: كود QR (اختصار لـ Quick Response code) هو نوع من الباركود المصفوفي (أو الباركود ثنائي الأبعاد) الذي صُمم لأول مرة عام 1994 لصناعة السيارات في اليابان. الباركود هو تسمية بصرية قابلة للقراءة آليًا تحتوي على معلومات حول العنصر المرفق به. عمليًا، غالبًا ما تحتوي أكواد QR على بيانات لمحدد موقع، معرف، أو متتبع يشير إلى موقع ويب أو تطبيق. يستخدم كود QR أربعة أوضاع تشفير قياسية (رقمي، أبجدي رقمي، بايت/ثنائي، و كانجي) لتخزين البيانات بكفاءة. ببساطة، إنه طريقة مدمجة وفعالة لتخزين البيانات.

المتطلبات الأساسية

للبدء في هذا المشروع، ستحتاج إلى توفير بعض المتطلبات الأساسية لضمان سير العمل بسلاسة:

• المعرفة الأساسية بـ TypeScript

  يجب أن تكون لديك معرفة أساسية بلغة TypeScript، وخاصة الإلمام بمفاهيم البرمجة الكائنية (OOP) مثل الفئات (TypeScript classes) والمُزينات (decorators). هذه المفاهيم ضرورية لفهم بنية تطبيقات Angular.

• بيئة تطوير محلية

  جهاز تطوير محلي مثبت عليه Node.js بإصدار 10 فما فوق، بالإضافة إلى NPM بإصدار 6 فما فوق. يُعد Node.js ضروريًا لـ Angular CLI ومعظم أدوات الواجهة الأمامية الحديثة. يمكنك ببساطة زيارة صفحة التنزيلات على الموقع الرسمي وتنزيل الملفات الثنائية لنظام التشغيل الخاص بك. بدلاً من ذلك، يمكنك الرجوع إلى إرشادات نظامك الخاص حول كيفية تثبيت Node.js باستخدام مدير الحزم. ومع ذلك، فإن الطريقة الموصى بها هي استخدام NVM (Node Version Manager) — وهو نص برمجي متوافق مع POSIX bash لإدارة إصدارات Node.js متعددة ونشطة.

  ملاحظة: إذا كنت لا ترغب في تثبيت بيئة تطوير محلية لـ Angular ولكنك لا تزال ترغب في تجربة الكود في هذا الدليل، يمكنك استخدام Stackblitz، وهو بيئة تطوير متكاملة (IDE) عبر الإنترنت لتطوير الواجهة الأمامية تتيح لك إنشاء مشروع Angular متوافق مع Angular CLI.

الخطوة 1: تثبيت Angular CLI 10

في هذه الخطوة، سنقوم بتثبيت أحدث إصدار من Angular CLI 10 (وقت كتابة هذا الدليل). Angular CLI هي الأداة الرسمية لتهيئة مشاريع Angular والعمل عليها. لتثبيتها، افتح واجهة سطر أوامر جديدة وقم بتشغيل الأمر التالي:

$ npm install -g @angular/cli

وقت كتابة هذا المقال، سيتم تثبيت الإصدار v10 من angular/cli على نظامك.

الخطوة 2: إنشاء تطبيق Angular 10 جديد

الآن دعنا ننشئ مشروعنا. عد إلى واجهة سطر الأوامر وقم بتشغيل الأوامر التالية:

$ cd ~ 
$ ng new angular10qrcode

ستطرح عليك واجهة الأوامر سؤالين:

• Would you like to add Angular routing? اكتب y للموافقة.
• Which stylesheet format would you like to use? اختر CSS.

بعد ذلك، انتقل إلى مجلد مشروعك وقم بتشغيل خادم التطوير المحلي باستخدام الأوامر التالية:

$ cd angular10qrcode
$ ng serve

افتح متصفح الويب الخاص بك وانتقل إلى العنوان http://localhost:4200/ لمشاهدة تطبيقك يعمل.

تثبيت مكتبة ngx-qrcode

بعد تشغيل التطبيق بنجاح، افتح طرفية جديدة وتأكد من الانتقال إلى مجلد مشروعك وقم بتشغيل الأمر التالي لتثبيت مكتبة ngx-qrcode من npm:

$ npm install @techiediaries/ngx-qrcode

دمج ngx-qrcode في وحدة Angular النمطية

بعد تثبيت المكتبة، افتح ملف src/app/app.module.ts وقم باستيراد NgxQRCodeModule من @techiediaries/ngx-qrcode في الوحدة النمطية (module) الخاصة بك على النحو التالي:

 import { BrowserModule } from '@angular/platform-browser' ;
 import { NgModule } from '@angular/core' ;
 import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode' ;
 import { FormsModule } from '@angular/forms' ;
 import { AppComponent } from './app.component' ;
 
 @NgModule ({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     FormsModule,
     NgxQRCodeModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

بمجرد استيراد المكتبة، يمكنك استخدام مكون ngx-qrcode في تطبيق Angular الخاص بك. يرجى ملاحظة أننا قمنا أيضًا باستيراد FormsModule، وهو ضروري للتعامل مع النماذج في Angular.

تكوين مكون كود QR

بعد ذلك، افتح ملف src/app/app.component.ts وقم بتحديثه على النحو التالي:

 import { Component } from '@angular/core' ;
 import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode' ;
 
 @Component ({
   selector: 'my-app' ,
   templateUrl: './app.component.html' ,
   styleUrls: [ './app.component.css' ]
 })
 export class AppComponent {
   elementType = NgxQrcodeElementTypes.URL;
   correctionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
   value = 'https://www.techiediaries.com/' ;
 }

في هذا الملف، قمنا بتعريف ثلاثة خصائص رئيسية: elementType لتحديد نوع العنصر (هنا URL)، correctionLevel لمستوى تصحيح الأخطاء (اخترنا HIGH لضمان قراءة أفضل)، و value وهو النص أو الرابط الذي سيتم ترميزه في كود QR.

عرض كود QR في القالب

الآن، افتح ملف src/app/app.component.html وأضف الكود التالي لعرض كود QR وإضافة حقل نصي لتعديل قيمته:

 < ngx-qrcode [ elementType ]= "elementType" [ errorCorrectionLevel ]= "correctionLevel" [ value ]= "value" cssClass = "bshadow" >
 </ ngx-qrcode >
 
 < textarea [( ngModel )] = "value" > </ textarea >

نحن نستخدم خصائص مختلفة لتكوين كود QR الخاص بنا مثل: النوع (elementType)، مستوى تصحيح الأخطاء (errorCorrectionLevel)، القيمة (value)، وفئة CSS (cssClass). يمكنك العثور على مزيد من المعلومات حول هذه الخصائص والخصائص الأخرى المدعومة في وثائق ngx-qrcode الرسمية. كما أضفنا حقل textarea لتمكين المستخدم من إدخال القيمة التي يرغب في ترميزها، مع ربطه بمتغير value باستخدام [(ngModel)].

تنسيق كود QR وحقل النص

أخيرًا، افتح ملف src/styles.css وأضف الأنماط التالية لتحسين مظهر كود QR وحقل النص:

 .bshadow {
   display : flex;
   align-items : center;
   justify-content : center;
   filter : drop-shadow ( 5px 5px 5px # 222222 );
   opacity : . 5 ;
 }
 
 textarea {
   margin-top : 15px ;
   display : block;
   margin-left : auto;
   margin-right : auto;
   width : 250px ;
   opacity : . 5 ;
 }

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

لقطة شاشة للتطبيق

هذه لقطة شاشة لتطبيقنا بعد تطبيق الأنماط:

الخاتمة

وهكذا، نكون قد انتهينا من مشروعنا التجريبي في Angular 10 الذي يوضح كيفية إنشاء أكواد QR. يمكنك زيارتنا على Techiediaries للحصول على المزيد من الدروس حول Angular وممارسات تطوير الويب الحديثة. يمكنك أيضًا الاطلاع على التطبيق الذي بنيناه في هذا المقال مباشرة على Stackblitz عبر الرابط التالي: https://stackblitz.com/edit/angular-ngx-qrcode-example?file=src%2Fapp%2Fapp.component.ts.

الخلاصة التقنية

يُظهر هذا الدليل بوضوح مدى سهولة دمج وظائف أكواد QR في تطبيقات Angular باستخدام مكتبات جاهزة مثل ngx-qrcode. إن استخدام هذه المكتبات لا يوفر الوقت والجهد فحسب، بل يضمن أيضًا التوافق مع معايير الصناعة ومستويات تصحيح الأخطاء الموثوقة. تُعد أكواد QR أداة قوية لتحسين تجربة المستخدم وتبسيط التفاعلات الرقمية، سواء كان ذلك لتوجيه المستخدمين إلى روابط معينة، أو مشاركة المعلومات بسرعة. إن فهم كيفية توليدها وتخصيصها يضيف قيمة كبيرة لأي مطور Angular يسعى لبناء تطبيقات حديثة وفعالة.