المحتوى عن 'تحكم'.



مزيد من الخيارات

  • ابحث بالكلمات المفتاحية

    أضف وسومًا وافصل بينها بفواصل ","
  • ابحث باسم الكاتب

نوع المُحتوى


التصنيفات

  • التخطيط وسير العمل
  • التمويل
  • فريق العمل
  • دراسة حالات
  • نصائح وإرشادات
  • التعامل مع العملاء
  • التعهيد الخارجي
  • التجارة الإلكترونية
  • الإدارة والقيادة
  • مقالات ريادة أعمال عامة

التصنيفات

  • PHP
    • Laravel
    • ووردبريس
  • جافاسكريبت
    • Node.js
    • jQuery
    • AngularJS
    • Cordova
  • HTML
    • HTML5
  • CSS
  • SQL
  • سي شارب #C
    • منصة Xamarin
  • بايثون
    • Flask
    • Django
  • لغة روبي
    • Sass
    • إطار عمل Bootstrap
    • إطار العمل Ruby on Rails
  • لغة Go
  • لغة جافا
  • لغة Kotlin
  • برمجة أندرويد
  • لغة Swift
  • لغة R
  • لغة TypeScript
  • ASP.NET
    • ASP.NET Core
  • سير العمل
    • Git
  • صناعة الألعاب
    • Unity3D
  • مقالات برمجة عامة

التصنيفات

  • تجربة المستخدم
  • الرسوميات
    • إنكسكيب
    • أدوبي إليستريتور
    • كوريل درو
  • التصميم الجرافيكي
    • أدوبي فوتوشوب
    • أدوبي إن ديزاين
    • جيمب
  • التصميم ثلاثي الأبعاد
    • 3Ds Max
    • Blender
  • نصائح وإرشادات
  • مقالات تصميم عامة

التصنيفات

  • خواديم
    • الويب HTTP
    • قواعد البيانات
    • البريد الإلكتروني
    • DNS
    • Samba
  • الحوسبة السّحابية
    • Docker
  • إدارة الإعدادات والنّشر
    • Chef
    • Puppet
    • Ansible
  • لينكس
  • FreeBSD
  • حماية
    • الجدران النارية
    • VPN
    • SSH
  • مقالات DevOps عامة

التصنيفات

  • التسويق بالأداء
    • أدوات تحليل الزوار
  • تهيئة محركات البحث SEO
  • الشبكات الاجتماعية
  • التسويق بالبريد الالكتروني
  • التسويق الضمني
  • التسويق بالرسائل النصية القصيرة
  • استسراع النمو
  • المبيعات
  • تجارب ونصائح

التصنيفات

  • إدارة مالية
  • الإنتاجية
  • تجارب
  • مشاريع جانبية
  • التعامل مع العملاء
  • الحفاظ على الصحة
  • التسويق الذاتي
  • مقالات عمل حر عامة

التصنيفات

  • الإنتاجية وسير العمل
    • مايكروسوفت أوفيس
    • ليبر أوفيس
    • جوجل درايف
    • شيربوينت
    • Evernote
    • Trello
  • تطبيقات الويب
    • ووردبريس
    • ماجنتو
  • أندرويد
  • iOS
  • macOS
  • ويندوز

التصنيفات

  • شهادات سيسكو
    • CCNA
  • شهادات مايكروسوفت
  • شهادات Amazon Web Services
  • شهادات ريدهات
    • RHCSA
  • شهادات CompTIA
  • مقالات عامة

أسئلة وأجوبة

  • الأقسام
    • أسئلة ريادة الأعمال
    • أسئلة العمل الحر
    • أسئلة التسويق والمبيعات
    • أسئلة البرمجة
    • أسئلة التصميم
    • أسئلة DevOps
    • أسئلة البرامج والتطبيقات
    • أسئلة الشهادات المتخصصة

التصنيفات

  • ريادة الأعمال
  • العمل الحر
  • التسويق والمبيعات
  • البرمجة
  • التصميم
  • DevOps

تمّ العثور على 3 نتائج

  1. في الدروس السابقة تعرّفنا على OneNote وكيفية استخدامه لحفظ أنواع كثيرة من الملاحظات وكيفية تنظيمها في دفاتر الملاحظات، المقاطع، والصفحات. وبما أنّ الصفحات هي الجزء الأساسي الذي ستضيف ملاحظاتك عليه وترتّبها، تتوفر مجموعة من الأدوات والخصائص للتحكّم في طريقة عرض الصفحات وتغيير إعدادها لتسهيل قراءة المعلومات أو إضافتها. يمكن الوصول إلى جميع الأوامر الخاصة بطريقة عرض الصفحة أو إعدادها من تبويب View. الطريقة الافتراضية لعرض الصفحات هي طريقة العرض العادية Normal View وسنستعرض كيفية تغييرها إلى طرق العرض الأخرى وكيفية استخدام خيارات إعداد الصفحة. Full Page View يعمل هذا الخيار على توسيع أبعاد الصفحة إلى أقصى حدّ ممكن بجعلها تملأ الشاشة (أي وضع ملء الشاشة). ويمكنك استخدامه عندما تصبح الصفحة مزدحمة بالعناصر وترغب في توفير المزيد من المساحة لترتيبها. يتم تشغيل هذا الوضع بالنقر على أمر Full Page View من تبويب View (أو بطريقة مختصرة بواسطة النقر على زر السهمين المتعاكسين في زاوية الصفحة العليا اليمنى): عند تشغيل وضع ملء الشاشة يتم إخفاء كل ما حول حدود الصفحة، كتبويبات الأدوات، تبويبات المقاطع، جزء الصفحات، وغيرها، مع الإبقاء على قائمة منسدلة في الأعلى للتنقّل بين المقاطع ودفاتر الملاحظات: يمكنك إظهار تبويبات الأدوات أثناء تشغيل وضع ملء الشاشة بالنقر على النقاط الثلاثة في الأعلى. أمّا للعودة إلى طريقة العرض العادية فانقر على زر السهمين المتعاكسين من جديد: Dock to Desktop يعمل هذا الخيار على تصغير نافذة OneNote إلى حد معيّن وتثبيته على أحد جوانب سطح المكتب، مما يتيح لك إمكانية فتح برامج أخرى والعمل عليها واستعراض ملاحظاتك في نفس الوقت. وبهذه الطريقة أيضًا يمكنك إضافة محتوى إلى صفحات OneNote عن طريق السحب والإفلات. لتشغيل طريقة العرض هذه انقر على أمر Dock to Desktop من تبويب View: ستلاحظ أنّ نافذةOneNote المصغّرة ستبّقى مثبّتة في نفس المكان على الشاشة وبمستوى فوق جميع النوافذ التي ستفتحها. للعودة إلى طريقة العرض العادية، انقر على السهمين المتعاكسين في الجزء العلوي من نافذة OneNote المصغرة: ملاحظة: بإمكانك إضافة الخيار Dock to Desktop إلى شريط أدوات الوصول السريع بالنقر عليه بزر الفأرة الأيمن واختر Add to Quick Access Toolbar: تعديل إعدادات الصفحة في مجموعة Page Setup تتوفر المزيد من الخيارات للتحكم في تخطيط الصفحة ومظهرها. تغيير اللون اللون الافتراضي لخلفية صفحات OneNote هو الأبيض، لكن إذا كنت تفضّل لونًا ثانيًا، بإمكانك الاختيار من مجموعة الألوان في قائمة Page Color: انقر على اللون المرغوب لتطبيقه، وإذا أردت العودة إلى اللون الافتراضي انقر على No Color. تسطير الصفحة تسطير الصفحة وإظهار خطوط الشبكة من الخيارات المفيدة التي تساعدك على ترتيب العناصر ومحاذاتها في الصفحة. فإذا أردت إضافة سطور للصفحة، انقر على Rule Lines واختر التباعد المرغوب للسطور من مجموعة Rule Lines: أمّا لإظهار خطوط الشبكة فانقر على Rule Lines واختر حجم الشبكة المرغوب من مجموعة Grid Lines، علمًا أنّه لا يمكن تطبيق خياري التسطير وخطوط الشبكة معًا في نفس الوقت: إخفاء عنوان الصفحة إذا كنت تفضّل إزالة عنوان الصفحة وما يرافقه من معلومات الوقت والتاريخ واستغلال المساحة التي يشغلها لإضافة الملاحظات انقر على Hide Page Title: سيظهر لك مربّع حوار لتأكيد رغبتك في إزالة العنوان، انقر على Yes للمواصلة: للتراجع عن إزالة العنوان اضغط على مفتاحي Ctrl+ Z من لوحة المفاتيح، أو انقر مجددًا على أمر Hide Page Title ثم قم بإدخال العنوان. حجم الورقة يتضّمن أمر Paper Size خيارات أخرى للتحكّم في حجم الورقة، اتجاهها (أفقي أو عمودي)، اتجاه الصفحة (من اليمين إلى اليسار أو بالعكس)، الهوامش، وغيرها. ويمكن الوصول إلى هذه الخيارات من جزء Paper Size الذي يظهر عند النقر على أمر Paper Size: تتوفر في قائمة Size أغلب الأحجام القياسية، اختر الحجم المرغوب ثم حدّد اتجاه الورقة من قائمة Orientation. ومن الخيارات في قسم Print Margins يمكنك التحكّم في أبعاد هوامش الصفحة، وهذه تظهر عند الطباعة فقط. أما من قائمة Page body فيمكنك تحديد اتجاه الصفحة من اليمين إلى اليسار أو بالعكس. ملاحظة: عند إجراء أي تغيير على إعدادات الصفحة فإنّه سيُطبّق على الصفحة الحالية فقط. إلى هنا نصل إلى نهاية درسنا. في الدرس القادم سنتعلّم طريقة تصدير، مشاركة وطباعة ملاحظات OneNote.
  2. سنقوم في هذا الدرس بشرح كيفية نقل الملفات من الهاتف المحمول إلى الحاسوب وبالعكس باستخدام برنامج ADB. حيث أن لبرنامج ADB استخدامات عديدة ومتنوعة كتثبيت التطبيقات على نظام الأندرويد وإزالتها وإعادة تشغيل النظام في وضعية الاستعادة وغيرها. ما هو ADB؟ هو برنامج يعمل بإدخال الأوامر البرمجية من خلال برنامج سطر الأوامر في نظام الحاسوب للقيام بمهمات يتم من خلالها التحكم بالهاتف المحمول الذي يعمل بنظام الأندرويد، أو حتى أي أداة موصولة إلى الحاسوب بواسطة USB تعمل بنظام الأندرويد كالحواسب اللوحية. ويعتبر الرمز ADB اختصارًا لعبارة Android Debug Bridge ومعناها جسر تنقيح أندرويد، ويأتي ضمن حزمة تطبيقات تطوير الأندرويد Android Software Development Kit (SDK). وأما هذه الحزمة الأخيرة فيمكن تحميلها بشكل منفرد أو يمكن الحصول عليها كجزء من مجموعة برامج Android Studio لتطوير وبرمجة تطبيقات وألعاب الأندرويد. يمكنك تحميل ما تريده بالتحديد من خلال هذا الموقع الرسمي. ويمكن تنصيبها لتعمل على مختلف أنظمة الحاسوب كنظام ويندوز وماكنتوش وأنظمة لينكس، وسأشرح هنا كيفية تنصيبها لنظام الويندوز بما أن السواد الأعظم من المستخدمين يستخدمون هذا النظام. تنصيب ADB ادخل أولًا إلى صفحة تحميل حزمة برامج Android Studio وستجد في آخر الصفحة خيارات التحميل المتاحة. بالإمكان تحميل الحزمة كاملة وسيتجاوز حجمها 1 جيجابايت أو تحميل حزمة أدوات سطر الأوامر Command Line Tools في الجدول السفلي والتي لن يتجاوز حجمها 200 ميجابايت، ولدى النقر على رابط التحميل ستظهر نافذة تتضمن الشروط والأحكام وبعد موافقتك عليها تستطيع البدء بالتحميل. هناك رابطان للتحميل لنظام الويندوز الأول لتحميل الحزمة جاهزة للتنصيب مباشرة والثانية تتضمن الحزمة مضغوطة بدون ملف التنصيب، لايهم أيهما تختار فكلاهما يتضمنان الملفات ذاتها ولكن المهم هو تحديد أين سيتم تنصيب أو فك ضغط هذه الحزمة لنتمكّن من إيجاد ملف ADB وتشغيله. فإذا حمّلت الحزمة من الرابط الأول فسيظهر لك ملف التنصيب، قم بالنقر المزدوج عليه فتظهر نافذة التنصيب انقر على Next ليقوم بالتحقق من وجود Java Runtime environment أو Java Developing kit على حاسوبك اضغط على Next وصلنا هنا للنقطة المهمة وهي تحديد المسار الذي سيتم فيه التنصيب حيث أننا سنحتاج إلى مسار سهل يمكننا الوصول إليه بسهولة لنتمكن من العمل على ABD فيما بعد، لذلك اختر المسار بنفسك أو احفظ المسار الحالي للتنصيب. اضغط على Next وستبدأ عملية التنصيب بعد الانتهاء من التنصيب سيتم تشغيل برنامج إدارة الحزمة، وذلك مهم جدًّا لمعرفة إذا كان ADB مثبتًّا ضمن الحزمة أم لا. والطريقة الثانية هي بتحميل الحزمة مضغوطة كملف ZIP وبعدها نقوم بفك الضغط في مسار سهل أيضًا. في كلا الحالتين قمت بوضع الحزمة في المسار القرص الصلب C لسهولة إيجاده. والآن سنقوم بتشغيل برنامج إدارة الحزمة ليظهر كما في الصورة. يجب الانتباه إلى خيار Android SDK platform tools الذي يجب أن يكون مثبتًّا حيث يحوي هذا الخيار على برنامج ADB فإذا كان مثبّت فيمكنك إغلاق البرنامج والمتابعة، وإذا كان غير مثبّت فسيتوجب علينا تثبيت هذه الأدوات، ستجد أن هناك مجموعة من الخيارات مفعّلة وجاهزة لعملية التحميل أيضًا، ولكننا في الوقت الراهن لن نحتاج إليها لذلك ألغِ التفعيل عنها واحتفظ فقط بخيار تحميل أداوت Android SDK platform tools ثم انقر على Install لتبدأ عملية التثبيت. وبعد الانتهاء نغلق البرنامج. وبذلك نكون قد انتهينا من تثبيت ADB ضمن الحاسوب وأصبح جاهزًا للاستخدام. ويبقى فقط أن نتأكّد من أن ملفات التعريف الخاصة بالهاتف المحمول مثبّتة ضمن الحاسوب وهي تختلف بحسب الشركة المصنعة للهاتف وستجدها في الموقع الرسمي لكل شركة من هذه الشركات أو في بعض الأحيان ضمن القرص المدمج المرفق مع الهاتف. تجهيز الهاتف المحمول يجب أن يكون الهاتف موصولًا بوصلة USB التي تأتي مع الهاتف غالبًا أو ستضطر لشرائها بشكل منفرد من الأسواق. والمهم هنا أن يتم تفعيل ميزة USB Debugging (تصحيح USB) على الهاتف المحمول من ضمن قائمة Developer (خيارات المطوّر). انقر على أيقونة قائمة تطبيقات الهاتف (أيقونة المربعات). ثم انقر على أيقونة الضبط (الإعدادات). الآن ابحث عن Developer (خيارات المطوّر) وإذا كانت هذه القائمة غير ظاهرة فيمكنك إظهارها من خلال التوجه إلى قائمة (حول الهاتف). ثم النقر على سطر Build (رقم الإصدار) الموجود ضمن تلك القائمة لنحو 10 مرات متتالية. ثم العودة لرؤية قائمة Developer (خيارات المطوّر) وقد ظهرت هذه المرة. وبعد أن ظهرت قائمة Developer (خيارات المطوّر) المخفية سنقوم بتفعيل USB Debugging (تصحيح USB). البدء باستخدام ADB بعد أن نجحنا في تثبيت هذا البرنامج ضمن حزمة Android Software Development Kit (SDK) سنبدأ بالتعرّف على كيفية استخدامه عبر شرح أبسط وأهم الأوامر المستخدمة من خلاله. طبعًا هناك الكثير من الأوامر لهذا البرنامج ولكننا لن نتطرّق لها جميعها لأن هذا سيحتاج إلى عدة دروس لتغطيتها جميعها. وللعمل على البرنامج فسنحتاج إلى تشغيل محرر الأوامر الخاص بالويندوز وهو البرنامج ذو واجهة DOS السوداء التقليدية والذي يعمل من خلال الملف CMD.EXE الموجود في مجلد النظام وحتى نتجنب عملية البحث عن هذا البرنامج وإدخال المسار الخاص بملف ADB في كل مرة فسنقوم بوضع ملف تشغيل سريع لمحرر الأوامر يتضمن المسار الصحيح في كل مرة لنضعه على سطح المكتب. افتح برنامج ‘المفكرة‘ ثم اكتب هذا النص بداخله @ECHO OFF CD /D "C:\android-sdk-windows\platform-tools" CMD وسيكون كما في الصورة ولا تنسَ أن تضع المسار الصحيح الذي يتضمن ملف ADB وكما أسلفتُ سابقًا فأنا اخترت له مسارًا سهلًا على القرص الصلب C ثم اذهب إلى القائمة File > Save As أو بالعربي ملف > حفظ باسم ثم اكتب في خانة اسم الملف الاسم "ADB.bat" وضع خانة نوعية الملف على جميع الملفات "*.*" ثم اضغط حفظ. مع التأكد من أن مسار الحفظ هو سطح المكتب. وستجد الآن الملف موجودًا على سطح المكتب كما في الصورة. وبعد النقر المزدوج عليه لفتح سيفتح محرر الأوامر وعليه مسار ملف ADB جاهزًا كما في الصورة. و سنبدأ بتجربة ADB بداية سنبدأ من خلال الأمر adb devices والذي سيعرض الأجهزة المتصلة بالحاسوب والتي تعمل بنظام الأندرويد، طبعًا يجب أن تكون قد وصّلت الهاتف بالحاسوب عبر وصلة USB واستكملت الشروط الأخرى التي تحدثنا عنها في الأعلى. وبالصورة التالية سترى كيفية تنفيذ هذا الأمر والنتيجة التي ظهرت لنا. كما تشاهد فإنّ الهاتف المحمول الموصول تم عرضه بناء على الأمر الذي كتبناه بدءًا بالأمر adb ولو كان هناك أكثر من جهاز أندرويد موصول فسيتم عرضها جميعًا بالترتيب. بعض أوامر ADB الشهيرة سنتعرف الآن على بعض أشهر الأوامر المستخدمة في ADB. وسنبدأ أولًا بالأمر reboot والذي سيقوم بإعادة تشغيل جهاز الأندرويد الموصول بالحاسوب. ويكتب بهذه الطريقة. adb reboot لن تشاهد أي شيء يحصل في نافذة محرر الأوامر كما في الصورة إلا أن الهاتف سيُعاد تشغيله مباشرة وبسهولة مطلقة بعكس ما يحصل عادة لو حاولت إعادة تشغيله بالطريقة التقليدية وهذا يدل على قوة ADB. الأمر reboot recovery والذي يجعل الهاتف يعيد التشغيل مع الإقلاع بوضعية الاستعادة recovery والتي نحتاجها في بعض الحالات مثل جعل الهاتف في وضعية ROOT وهذا ينطبق على بعض الأنواع. ويكتب بهذه الطريقة. adb reboot recovery وهناك سلسلة أوامر Shell الخاصة والتي تتيح التحكم بالهاتف بشكل أوسع كنقل ونسخ وحذف الملفات والبرامج وعرض محتويات المجلدات والكثير غيرها من الأوامر، وصيغة كتابة أوامر Shell على الشكل التالي. adb shell <command> حيث أن<command> هو الأمر الذي نريد تنفيذه. نقل الملفات بين الحاسوب والهاتف المحمول يمكننا باستخدام ADB نقل الملفات من الحاسوب إلى الهاتف المحمول وبالعكس. يتم ذلك عبر استخدام الأمر PULL لنقل الملفات من الهاتف إلى الحاسوب والأمر PUSH لنقل الملفات من الحاسوب إلى الهاتف المحمول. يتطلب هذا الأمر معرفة اسم الملف مع امتداد الملف (الصيغة) بالإضافة إلى موقع الملف المسحوب من على الهاتف أو الموقع الذي سيتم إرساله إليه إضافة إلى الموقع المطلوب أيضًا على الحاسوب. حيث سنستخدم كما قلنا سابقًا برنامج CMD لكتابة الأوامر المطلوبة من خلاله. سنقوم أولًا بسحب ملف من الهاتف إلى الحاسوب. افتح محرر الأوامر CMD واذهب إلى موقع ملف ADB ثم اكتب الأمر adb pull /sdcard/hsoubaca.jpg هذا الأمر سيقوم بسحب ملف الصورة hsoubaca.jpg من على ذاكرة الهاتف من خلال الموقع المحدد إلى موقع المجلد الذي يحوي برنامج ADB على الحاسوب. الصورة التالية توضح العملية. يمكنك طبعًا استبدال موقع الملف المطلوب سحبه كاملًا بحسب موقع ملفك الخاص. سنقوم الآن بإرسال ملف من الحاسوب إلى الهاتف المحمول. ولنفترض أننا سنقوم بإرسال الملف Zaher.txt إلى مجلد Text على ذاكرة الهاتف المحمول بحيث أن هذا الملف موجود على سطح المكتب لدي، وبذلك سيكون الأمر الواجب إدخاله على الشكل التالي. adb push c:/users/Zaher/desktop/Zaher.txt /sdcard/Text وسيظهر من خلال CMD كما في هذه الصورة. كما تشاهد فقد وضعنا أمر نسخ الملف إلى الهاتف adb push أولًا ثم وضعنا كامل موقع الملف المراد إرساله على الحاسوب مع اسم الملف في النهاية ثم وضعنا بعد فراغ واحد الموقع المطلوب نسخ الملف إليه على الهاتف المحمول. وبإمكاننا نسخ مجلدات كاملة بين الطرفين عبر وضع مسار المجلد بدل مسار الملف. الخاتمة لا زال هناك الكثير من الأوامر المفيدة الخاصة بـ ADB كتثبيت التطبيقات على الهاتف وإزالتها بالإضافة إلى سلسلة أوامر Shell الخاصة والمميزة وقد نتطرّق لها في دروس قادمة بإذن الله. حيث يمكن القيام على سبيل المثال إجراء نسخة احتياطية واستعادتها والقيام بإعادة الإقلاع في وضعيات مختلفة بحسب النمط المطلوب تنفيذه بالإضافة إلى غيرها من الأوامر والعمليات التي من الممكن القيام بها من قبل المطوّرين.
  3. تدير Angular الموارد باستخدام نظام الوحدات، ولهذا السّبب فهي تحتاج أيضًا إلى تقديم طريقةٍ للوصول إلى هذه الموارد المنظّمة ضمن حاويات (container-managed)، حيث تقوم Angular بذلك باستخدام نمطٍ إنشائيّ يُدعى حقن التبعية. إن لم يكن لديك معرفةٌ مسبقةٌ بهذا المفهوم فسأقوم هنا بأفضل ما لديّ لتلخيصه لك: لنفترض أنّك تحتاج إلى الحصول على مَوردٍ (resource) من Angular، المَورد هو الحاوية. للحصول عليه يجب أن تكتب تابعًا يُعرّف وسيطًا له نفس اسم هذا المَورد بالضّبط. تقوم الحاوية باكتشاف التّابع الذي كتبته، وتتعرّف على توافق الوسيط مع المَورد المطلوب، فتقوم بإنشاء نُسخةٍ (instance) من هذا المَورد (أو تقوم بأخذ النُّسخة المنفردة (singleton) من هذا المَورد، إن كان من النّوع المنفرد) ثُمّ تقوم باستدعاء التّابع الخاص بك وجعل هذه النّسخة هي قيمة الوسيط الخاص بالتابع. بما أنّ الحاوية هنا تلعب الدّور الفعّال (على عكس الطلب الذي تقوم به للحصول على نسخة من المَورد)، لذلك يُعتبر حقن التّابعيّة عكسًا للتّحكّم (inversion of control)، ويُقدّم على أنّه تطبيق لمبدأ Hollywood، "لا تكلّمنا، نحن سوف نكلِّمُك". أعتقد بأنّ مخترعي Angular قد اختاروا طريقة حقن التّابعيّة بسبب تاريخ Google الطّويل مع منصّة Java، بيئة برمجة ساكنة يقوم فيها حقنُ التّابعيّة بدورٍ فعّال في عمليّات تغيير الأنواع أثناء وقت التّشغيل. (لقد تخطّت Google الحدود في ذلك إلى درجة أنّها أنشأت إطار عمل Java خاصٍّ بها، Guice، الذي يعتمد على حقن التّابعيّة كُلّيًّا.) أمّا في JavaScript، وهي البيئة المرنة والديناميكيّة، حيث يمكن أن تتغيّر الأنواع أثناء وقت التّشغيل، فقد حظِيَ فيها أسلوب محدّد موضع الخدمة (service locator) البسيط والمباشَر بشعبيّة هائلة عن طريق الواجهة البرمجيّة لـCommonJS، وهي عبارة require المستخدمة في Node.js وbrowserify. والأكثر من ذلك، أنّ الطريقة البدائيّة في القيام بحقن التّابعيّة قد تبيّن أنّ لها نقطة ضعفٍ عند استخدامها في JavaScript من طرف العميل، وذلك بسبب تعديل أسماء الوُسطاء باستخدام المُقصّرات (minifiers). ولنستطيع التّعامل مع هذه المشكلة، من الضّروريّ أن توجد أداة بناءٍ بديلة، أو أن نتعلّم ونستخدم حواشي التّبعيّات، وسنصل إلى ذلك بعد قليل، ولكن لنتعرّف أوّلًا على النّموذج البدائيّ. التبعيات الضمنيةلن نستخدم خارج هذا الفصل للقيام بحقن التّبعيّة غير طريقة التّبعيّات الضّمنيّة لأنّها الأسهل بين جميع الطُّرق. كما ذكرت سابقًا، يمكننا جلب مرجعٍ لأحد الموارد المتاحة عن طريق وضعه كوسيطٍ في تابعنا الإنشائيّ، ولقد قمنا بذلك للمرّة الأولى عندما أضفنا الوسيط scope$ الذي يعطي تابع التّحكّم مرجعًا إلى كائن المجال المنظّمٍ ضمن حاوية (container-managed). يقوم نظام حقن التّبعيّة في Angular بالعثور على نسخةٍ للمَورد المطلوب (أو بإنشاء نسخةٍ لهذا المَورد) وتمريره إلى المتحكّم. لنرى مرّةً أخرى كيف نقوم بذلك على المَورد المدمج في Angular، الخدمة locale$. نحتاج إلى تعريف وحدتنا app لأنّ بعض أمثلة هذا الفصل تستخدم نظام الوحدات. angular.module('app', []);وبعد ذلك سنقوم بتحميل الوحدة عن طريق تمرير اسمها إلى التّوجيه ng-app. (أكرّر التّنبيه إلى أنّ الاسم app ليس إجباريًّا ويمكن استخدام أيّ اسم آخر.) <body ng-app="app"> <!-- الأمثلة توضع هنا --> </body>نحن الآن جاهزون للانطلاق مع مثالنا الأوّل، وبطريقةٍ مماثلةٍ لإضافة الوسيط scope$ سنضيف الوسيط locale$، وستلاحظ Angular هذين الوسيطين وتقوم بحقنهما. تقوم Angular بحقن الموارد داخل التّابع لأنّ هذا التّابع يمثّلُ متحكّمًا. angular.module('app') .controller('LocaleController', function($scope, $locale) { $scope.locale = $locale.id; });داخل جسم المتحكّم قمنا ببساطةٍ بإسناد المتغيّر locale الذي يمكننا تغيير اسمه إلى أيّ اسمٍ آخر، إلى العنصر id من الوسيط locale$ الذي لا يمكننا استخدام اسمٍ آخر له. <p ng-controller="LocaleController"> Your locale is <strong ng-bind="locale"></strong> </p>الناتج: Your locale is en-usيُفترض أن ترى شيئًا مماثلًا لعبارة "Your locale is en-us" في المخرجات. ما الذي سيحدث لو أنّك أضفت الوسيط myResource إلى تابع التّحكّم؟ هل عطّلت عمل المثال؟ هل يمكنك قراءة الخطأ في الـconsole الخاصة بـJavaScript في متصفّحك؟ تعرض أخطاء Angular غالبًا رابطا مفيدا، يمكنك عن طريق هذا الرابط أن تحصل على درسٍ رائع وقصير عن حلّ مشاكل حقن التّبعيّة، انقر على الرّابط السّابق واقرأ الشرح إن أردت. الحواشي (Annotations)تمثّلُ الحاشية في لغة برمجةٍ مثل Java، معلوماتٍ إضافيّة تُضاف إلى الشيفرة المصدريّة ويتجاهلها المترجم. أمّا في سياق الحديث عن حقن التّبعيّة في Angular، فتعني كلمة الحاشية التّصريح عن الموارد التي نريد حقنها بطريقةٍ صريحةٍ تحافظ على أسماء الوسطاء قصيرةً باستخدام أسلوب التّصغير (minification). (استخدام أداة البناء UglifyJS مثالٌ على أسلوب التّصغير.) لنتابع الآن طريقة Angular التي تسمح لنا فيها بإضافة الحواشي إلى التّبعيّات. ng-annotateمن الطرق الملائمة للتخلص من إزعاج مهمّة بناء ما، استخدام مهمّة بناءٍ أخرى. ستقوم أداة البناء ng-annotate بإضافة الحواشي للتّبعيّات، ومن ثمّ ستسمح لنا بمواصلة استخدام طريقة التّبعيّات الضّمنيّة التي شرحناها في الفقرة السّابقة. ستحتاج فقط إلى تشغيل ng-annotate قبل أن تُشغّل المقصّر (minifier) الخاصّ بك. هذه الأداة المركزيّة صُمّمت لتُستخدم عن طريق سطر الأوامر، إلّا أنّه يوجد غلافٌ لها لتفادي التّعامل مع سطر الأوامر، كما يوجد غلافٌ لمعظم أدوات البناء وحزم الأدوات، من ضمنها grunt-ng-annotate وgulp-ng-annotate وbrowserify-ngannotate وng-annotate-webpack-plugin. الحاشية السطريةهناك أسلوبان لكتابة الحواشي، وأكثرهما شُهرةً يُعرف باسم الحاشية السّطريّة (inline annotation)، وهي تتضمّن وضع تابع التّحكّم داخل مصفوفةٍ كما يلي. angular.module('app') .controller('LocaleController', ['$scope', '$locale', function(s, l) { s.locale = l.id; }]);الناتج: Your locale is en-usفي المثال السّابق، قُمت بمحاكاة تأثير التّقصير عن طريق تغيير أسماء الوُسطاء من scope$ و locale$ إلى s وl بالترتيب. بالطّبع لا يمكن لـAngular أن تجد مَوردين لهما الأسماء s وl لو اعتمدنا على أسلوب إضافة الحواشي الضّمنيّ، ولكن هنا، ولأنّ المصفوفة تحوي أسماء الوسطاء الحقيقيّين ستتمكّن من حقنهم بنجاح. إضافة الحاشية بواسطة inject$إن كان قد انتابك شعورٌ بأن طريقة إضافة الحواشي السّطريّة، قبيحة، فالأرجح أنك ستجد الطريقة البديلة هذه أكثر قبحًا. فهي تعتمد على إنشاء عنصرٍ ذا اسمٍ مخصّص، inject$، في التّابع الإنشائيّ، وهذا سبب تسمية الطّريقة بهذا الاسم. var LocaleController = function(s, l) { s.locale = l.id; }; LocaleController['$inject'] = ['$scope', '$locale']; angular.module('app') .controller('LocaleController', LocaleController);الناتج: Your locale is en-usالمهمّ أنّك الآن تعرف الخيارات المتاحة للقيام بإضافة الحواشي. angular.injectorأرجو أن تكون عند هذه النّقطة قد قمت بإضافة ng-annotate إلى بُنيتك، لتتمكّن من استخدام الأسلوب البدائيّ في التّبعيّات الضّمنيّة التي ستراها في هذه السلسلة دون مشاكل. على أيّ حال، إن لم تكن قد قمت بذلك، لديّ اقتراح لك، إلّا أنّه ليس اقتراحًا جادًّا: قم بكتابة تابع require الخاصّ بك، وأفصح عن التّبعيّات الّتي تريد ضمن عمليّة البحث المباشر عن الخدمات، وذلك بدلًا من استخدام أسلوب حقن التّبعيّة. يمكنك القيام بذلك عن طريق استدعاء تابع angular.injector مباشرةً، وعليك تمرير وسيط وحيدٍ إليه هو مصفوفةٌ فيها أسماء الوحدات التي ترغب بالبحث ضمنها، ويجب عليك تمرير اسم الوحدة ng دومًا وجعلها في بداية القائمة. var require = function(name) { return angular.injector(['ng','app']).get(name); }; angular.module('app') .controller('LocaleController', ['$scope', function($scope) { var $locale = require('$locale'); $scope.locale = $locale.id; }]);الناتج: Your locale is en-usلاحظ أنّ المثال لايزال يعتمد على حقن التّبعيّة في تمرير كائن المجال الصّحيح للمتحكّم، سأسعى في الفقرة القادمة لأبيّن لك أحد أهمّ المشاكل العمليّة مع الحواشي في الأنظمة الضّخمة، وذلك خشية أن يتبادر إلى ذهنك بأنّ الاستثناء الّذي واجهناه للتّو يلغي الحاجة إلى تبنّي طريقة محدّد موضع الخدمة. مخاطرالمثال التّالي سيستبق الأحداث، ويأخذنا إلى الفصل القادم، الخدمات. سنستخدم في هذا المثال التّابع factory، ورغم أنّك لم تألف استخدامه من قبل إلّا أنّه بإمكانك تخمين وظيفته، فهو يقوم بإعداد مصنعٍ للمكوّن باستخدام نظام الوحدات. لاحظ أيضًا أنّ الخدمة http$ (التي سنناقشها في فصلٍ لاحق HTTP) ستكون خدمةً نموذجيّةً ومثالًا من الحياة العمليّة لاستخدام حقن التّبعيّة داخل خدماتٍ كهذه. angular.module('app') .factory('fullPrice', ['$http', function($http) { return function() { // Use $http to fetch remote data. return 100; } }]) .factory('discountPrice', ['$http', function($http) { return function() { // Use $http to fetch remote data. return 40; } }]);استلهمتُ المثال التّالي من تطبيق Angular حقيقيّ، حيث استُبدلت التّبعيّات بقائمةً طويلةً من الخدمات المدمجة في Angular، ولكنّ طول القائمة هو نفسه تقريبًا. angular.module('app') .controller('PriceController', ['$scope', '$anchorScroll', '$animate', '$cacheFactory', '$compile', '$controller', '$document', '$exceptionHandler', '$filter', '$http', '$httpBackend', '$interpolate', '$interval', 'fullPrice', 'discountPrice', '$locale', '$location', '$log', '$parse', '$q', '$rootElement', '$rootScope', '$sce', '$sceDelegate', '$templateCache', '$timeout', '$window', function( $scope, $anchorScroll, $animate, $cacheFactory, $compile, $controller, $document, $exceptionHandler, $filter, $http, $httpBackend, $interpolate, $interval, discountPrice, fullPrice, $locale, $location, $log, $parse, $q, $rootElement, $rootScope, $sce, $sceDelegate, $templateCache, $timeout, $window) { $scope.fullPrice = fullPrice(); $scope.discountPrice = discountPrice(); }]);من الواضح أنني اختصرت جسم المتحكّم PriceController وكذلك اختصرت شيفرة العرض التّالية. <table ng-controller="PriceController"> <tr> <td>Full price:</td> <td>{{fullPrice}}</td> </tr> <tr> <td>Discount price:</td> <td>{{discountPrice}}</td> </tr> </table>الناتج: Full price: 40 Discount price: 100لقد تعمّدت القيام بخطأٍ في المثال السابق، فالمفترض أن يكون السعر الكلّي أكبر دومًا من السّعر المخفّض، ولكنّهما انعكسا لسببٍ ما، والمشكلة ليست في شيفرة العرض أو في جسم المتحكّم، هل يمكنك إيجادها؟ ماذا تستنتج من ذلك بخصوص كتابة حاشية التّبعيّات يدويًّا في المشاريع الحقيقيّة؟ خاتمةهذا هو الفصل الثّاني من أصل ثلاثة فصول في هذه السلسلة تغطّي البنية التّحتيّة لـAngular الخاصّة بإدارة شيفرة التّطبيق. الفصل الأوّل، الوحدات، بيّنَ كيف سنقوم بتهيئة خشبة المسرح الّتي سيقف عليها الممثّلون ليقوم كلٌّ منهم بدوره. وفي هذا الفصل شرحنا ببعض التّفصيل الآليّات المتاحة لجعل كلِّ ممثّلٍ يقفُ في مكانه الصّحيح. أمّا الفصل الثّالث ضمن هذا المجال، الخدمات، سيشرح كيفيّة إنشاء الممثّلين أنفسهم. ترجمة وبتصرّف للفصل السابع من كتاب: Angular Basics لصاحبه: Chris Smith.