درس Youtube Player API

ا هو الـ API ؟

الـ API هو اختصار لـ Application Programming Interface  كما يعرف اغلب المبرمجين 

وأحد اكثر الامثلة وضوحا والتى قرأتها من قبل فى احد ألإجابات عن هذا السؤال  لتبسيط فكرة الـ API كانت بتشبيه الـ API بالنادل الموجود بالمطعم (الجرسون ( Waiter   

حيث أنك كمستهلك أو عميل تذهب الى المطعم وتجلس على الطاولة ولديك قائمة الطعام تختار ما تريد وتخبر النادل انك تريد كذا وكذا يقوم هو بالاستجابة لطلبك وتوصيل هذا الطلب الى المطبخ ثم يجلب لك ما قمت بطلبه ويقوم بتقديمه اليك فعندما نتحدث عن Facebook API نقصد واجهة التطبيق البرمجية التى تعطيك القدرة على الوصول الى قاعدة البيانات الخاصة بموقع فيس بوك وجلب البيانات بشروط معينة وفى نطاق معين وكذلك هو الحال فى معظم الـ APIs فمثلا لدى نظام تسجيل اريد من المستخدم ان يقوم بإدخال الاسم الاول والاسم الاخير والايميل و وبالتالي بدل أن من جعل المستخدم يقوم بإدخال هذه  البيانات يدويا يمكنني بكل بساطه باستخدام الـ Facebook API  بضغطة زر من المستخدم ويتم الحصول على كل البيانات ويدخلها في الحقول تلقائيا وهذا مثال بسيط علي ما يمكن عمله باستخدام الـ API تخيل أنك يمكنك الاستفادة بالعديد من مميزات المواقع الأخرى داخل التطبيقات التي تقوم بعملها هذا باختصار هو الـ API

معلومات عامة عن الـ APIs

توفر العديد من الخدمات والمواقع APIs بعضها مدفوع وبعضها مجانى وبعضها مجانى لكن بحدود وإذا ما تجاوزت هذه الحدود يجب أن تقوم بدفع مقابل فى استخدام الـ API خصوصا عندما يكون تطبيقك كبير الحجم ويستخدمه عدة الاف او ملايين المستخدمين يوميا ولذلك عند رغبتك فى استخدام اى API تقدمه أى خدمة او موقع على الإنترنت تحتاج أولا للتسجيل لديهم وإنشاء تطبيق لديهم أون لاين ليس تطبيق بالمعنى الحرفى ولكن  بمثابة حساب أو عضوية او تصريح لك باستخدام الـ API  الخاص بهم حيث يقومون بإعطائك مفتاح (Key) تستخدمه من خلال التطبيق الخاص بك فى الاندرويد وتدرجه فى اى اتصال تقوم مع الـ API لكى يتعرف الـ API عليك وعلى تطبيقك ويستطيع اصحاب الخدمة حمايتها او ايقاف تطبيقك اذا ما اسىء الاستخدام او استغل بشكل ما لتحقيق اهداف لا تتفق مع شروط الاستخدام الخاصة بهم  .

بعض المواقع والـ APIs توفر مفتاح اخر يطلق عليه Secret بالإضافة للمفتاح العادى ليستخدم فى اغراض التشفير وأمان الاتصال وتبادل البيانات بينك وبين الـ API وبين السيرفرات المختلفة للموقع او الخدمة التى تستخدم الـ API الخاص بها . 

الـ Youtube API

كالعديد من الخدمات الاخرى توفر لنا يوتيوب API للتعامل مع محتوى يوتيوب واعطائنا العديد من المميزات يمكن ان نستخدمها فى تطبيقنا اذا كنا نقوم بشىء له علاقة بالفيديوهات ورفعها وتشغيلها وما إلى ذلك فتوفر لنا أكثر من API منها الـ Youtube Player API الذى يعطينا القدرة على التعامل مع عمليات تشغيل الفيديو من خلال يوتيوب وكذلك Youtube Data API اذا كان تطبيقك به محرك بحث للفيديوهات مثلا فانك تقوم بجلب النتائج للمستخدم من يويتوب ومن باقى مواقع الفيديو الاخرى ففى هذه الحالة ستستخدم الـ YoutubeData API حيث يوفر لك access لمحتوى اليويتوب من بيانات خاصة بالفيديوهات ومعلوماتها وجودتها المتوفرة  وتواريخها و.. و .. الخ   بالاضافة الى ذلك يوجد عدة  APIS اخرى فى يوتيوب لكنها اقل اهمية ويمكنك تصفحها من الموقع الرسمى وستستطيع استخدامها بسهولة بعد فهمك الفكرة الرئيسية من طريقة عمل الـ API

وسنتحدث فى هذه التدوينة عن الـ Youtube Player  API

إضافة الـ Youtube Player API للتطبيق وإعداده

على عكس الكثير من المكتبات والـ APIs الاخرى توفر لنا جوجل التعامل مع هذا الـ API عن طريقة مكتبة تضاف  بالطريقة الكلاسيكية أى مكتبة على هيئة ملف jar يتم اضافتها فى مجلد libs فى التطبيق

يمكننا تحميل الـمكتبة من هذا الرابط 

بعد تحميل الملف نقوم بإضافته لمجلد libs وإن لم يكن موجودا يمكنك إنشاءه تحت مجلد app مباشرة

سنقوم بتغيير هيكلة المشروع من Android إلى Project لنستطيع رؤية المجلد libs ثم نقوم بإضافة المكتبة التى تم تحميلها والتى سنتعامل مع الـ API من خلالها . 

وفى اغلب الاحيان مع اغلب الـ APIs لا نستطيع استخدام API ببساطة بل يجب علينا الحصول على الـ Key من موفر هذا الـ API وفى هذه الحالة جوجل لذلك نذهب للجوجل كونسول من الرابط التالى

https://console.developers.google.com/

بعد الدخول لهذا الرابط قم بإنشاء مشروع جديد أو استخدم مشروع سابق من مشاريع جوجل كونسول ومن حين لاخر قد تغير جوجل شكل الكونسول أو شكل الواجهه لكن السياق او نظام العمل ثابت وما نريد فعله هو الحصول على key لذلك نختار Credentials ثم Create credentials 

يظهر لنا الـ API Key 

 وتظهر لنا علامة التنويه ان هذا ال key غير مقيد ويمكن استخدامه مع اى تطبيق ومن الافضل ان نقوم بتقييده بتطبيق معين عن طريق الباكيج وال sha key وما الى ذلك لكننا لا نهتم الان بهذا الامر نريد فقط ال Key 

نقوم بنسخ هذا الـ Key للتطبيق البعض يضعه كـ String فى كلاس والبعض يضعه كـ String فى ملف Strings المهم ان تحتفظ به وتستطيع الوصول اليه بسهولة وقت الحاجه من اى مكان داخل التطبيق سأضعه فى ملف strings.xml كالتالى 

الان لدينا الـ API Key وجاهزين للانطلاق .

يمكننا استخدام الـ Youtube Player API بأكثر من شكل وبأكثر من طريقة مثلا استخدامه كـ View داخل اكتييتفى او فريجمنت أو استخدام فريجمنت الYoutube Player الجاهز او فتح الفيديو فى أكتييتفى يوتويب مخصص  مباشرة فيما يعرف ب standalone player .

استخدام الـ Youtube Player View

يمكننا أن نستخدم الـ Player على هيئة View  مثل الـ Views العادية ويوضع كأحد مكونات الـ Layout كالتالى

وكأى view نقوم باستخدامه فى الأندرويد بشكل عام سوف نذهب للجافا ونقوم بتعريف هذا المكون كالتالى 

الان عرفنا الـ view وقبل أن نخبر هذا الـ view بعنوان الفيديو الذى سيقوم بتشغيله نحتاج لعمل initialize له واعطاءه الـ API Key الذى جلبناه من جوجل ليسمح لنا بأن نقوم بالتشغيل وذلك باستخدام ميثود تسمى initalize  كالتالى   

وهذه الميثود كما يتضح تأخذ بارميترين الأول هو s وهو هنا ال Key الخاص بجوجل والبارميتر الثانى هو OnInitiaizedListener وهو Listener يتابع عملية الـ initialize ويخبرك اذا ما تمت بنجاح أم لا قد يكون الـ API خاطىء قد تكون جوجل اوقفت حسابك مثلا أو اى سبب أخر يمكن أن لا يجعل الامر يتم بنجاح لذلك نعرف اذا ما تمت العملية بنجاح ام لا ونتخذ قرارات بناءا على ذلك بمساعدة هذا الـ Listener 

وكما ترى يوفر لنا 2 methods الاولى خاصة بحالة النجاح يمكنك كتابة الكود الذى تريد فى حالة نجاح عملية ال initialize والتى غالبا ما تكون تشغيل الفيديو والحالة الاخرى فى حالة الفشل فى التحقق من ال API Key وعملية ال initialize وساعتها ربما تفكر فى اظهار رسالة لطيفة للاعتذار عن الخطأ للمستخدم او تحويله لمشغل اخر او فتح اللينك فى جوجل كروم وتستريح من هذا كله.

الان بداخل الميثود الخاصة بحالة النجاح onInitializationSuccess سنقوم بكتابة كود تحضير  الفيديو كالتالى : 

لقد استخدمنا الميثود cueVideo لتحضير  فيديو للتشغيل  باستخدام هذا الPlayer ولاحظ اننا قمنا باعطائه الفيديو id وليس رابط الفيديو كاملا

وهذا الامر بديهى ففى المتصفح تضع الرابط لتخبر المتصفح أنك تريد يوتيوب لكن هنا انت تتعامل مع اليوتيوب مباشرة فبالتأكيد لا يريد منك سوى الـ id بالاضافة الى ذلك يمكنك استخدام بعض الـ Methods الاخرى مثل cuePlaylist والتى تعطيها id playlist لتقوم بتشغيلها بالكامل يمكنك ايضا استخدام الميثود cueVideo ببارميترين الاول هو id الفيديو والثانى هو الملى ثانية التى تريد ان يبدأ عندها الفيديو على سبيل المثال اريد ان يبدأ الفيديو من الدقيقة 2 وهى عباره عن 120 ثانية نقوم بزيادة 3 اصفار على اليمين وبهذا سيبدأ الفيديو التشغيل من الدقيقة 2 

يمكنك الحصول على id الفيديو يدويا من الرابط الخاص ب youtube من المتصفح

أو برمجيا اذا كنت تستقبل روابط يوتيوب يمكنك استخراج الـ id برمجيا من الرابط كما فى هذا التعليق على stackoverflow 

الان  قاربنا على الانتهاء وتشغيل التطبيق يجب أن نشير الى شىء واحد وهو أن اى أكتيتيفى سيتم تشغيل فيه اليوتيوب أو اى فريجمنت سيتم استخدام المشغل فيه يجب علينا ان نقوم بجعل الاكتيتيفى يرث من YoutubeBaseActivity وإن كان فريجمنت نجعله يرث YouTubePlayerFragment لكى يعمل المشغل بشكل صحيح 

يجب أيضا أن نقوم بإضافة صلاحيات الإنترنت إلى الـ Manifest بالتأكيد لأن المشغل سيستخدم الإنترنت فى تشغيل الفيديو 

يمكننا الان تشغيل التطبيق وسنجد أنه يعرض مشغل الفيديو ويعرض زر تشغيل الفيديو

وعند الضغط على زر تشغيل سيبدأ بالعمل ولاحظ ان المؤشر متوقف عند الدقيقة الثانية نتيجة أننا  أعطيناه فى البارميتر الثانى 120 ثانية تماما .

توجد ميثود اخرى تسمى loadVideo() وهى مثل الميثود السابقة وتأخذ باراميتر id واحد مثلها او 2 باراميترز id الفيديو والثانى الملى ثانية التى يبدأ منها لكن الفرق أن الميثود loadVideo تبدأ تشغيل الفيديو مباشرة  لا تنتظر من المستخدم ان يضغط تشغيل

وسنجد انه بمجرد فتح التطبيق يبدأ الفيديو بالعمل مباشرة 

كما هو الحال بالنسبة للفيديو يوجد ايضا الميثود cuePlayelist و loadPlayList لكن بدلا من الفيديو تستخدم مع البلاى ليست .

إضافة الى مجموعة methods التشغيل توجد بعض الـ methods الاخرى المفيدة للتحكم بالـ player بشكل افضل مثل الميثود setFullScreen التى تجعل الـ player فى وضع ملء الشاشة وتعطيل او تشغيل زر ملىء الشاشة فعلى سبيل المثال الكود القادم

يقوم هذا الكود بجعل الفيديو ملء الشاشة بالإضافة لاخفاء زر fullscreen ولا يستطيع المستخدم تصغير الفيديو من ملىء الشاشة !

بالإضافة لمجموعة اخرى من الـ Listener لمراقبة حالة المشغل عند التشغيل والتوقف onChangeStateListener و setOnFullScreenListener  لاتخاذ اجراء او تنفيذ كود معين فى حالة تكبير الشاشة او تصغيرها بواسطة المستخدم وما الى ذلك من أمور تعطيك القدرة على التحكم بكافة خصائص الـyoutube player بدون حدود يمكنك كتابة youtubePlayer. ثم تجربة كل Method وخصائصها . 

Design Patterns بالعربية – نظرة عامة

نظرة عامة 

عند كتابة كود أحد  البرامج سواء ويب أو ديسكتوب أو موبايل او اى جهاز اخر  فى المرة الأولى يجب الاخذ بعين الاعتبار  انه غالبا هذا التطبيق سيتم تطويره باستمرار وتحديثه واضافة مميزات مستقبلية للتطبيق وربما التعديل على احد المميزات او تغيير سلوكها الى غير ذلك من الامور التى تستدعى التعامل مع الكود باستمرار وحتى يمكن أن تكون عملية التطوير المستمر لأحد التطبيق سلسة وسهله يجب أن يكون الكود نظيفا مكتوب بطريقة احترافية وقابل للتعديل والتطوير بدون مشاكل ولتحقيق ذلك يجب عليك كمبرمج مراعاة العديد من القواعد والشروط وكتابة أكوادك بأفضل طريقة فى كل حالة من الحالات البرمجية ولذلك وفى عام 1994 ظهر كتاب   Design Patterns: Elements of Reusable Object-Oriented Software والذى ألفه اربعة اشخاص ويطلق عليهم عصابة الاربعة او Gang of four وطبعا لم يطلق عليهم عصابة الاربعة لانهم كانوا عصابة فعلية وتخصصوا فى سرقة الاكواد ونهب المبرمجين مثلا لكن هذا مجرد اسم اطلق علهيم كنوع من الدعابة لانهم اربع اشخاص حيث أن هناك  قصة مشهورة عن اربع اشخاص قامو بثورة فى الصين ويقوم هذا الكتاب بشرح بعض المبادىء يطلق عليها “أنماط التصميم ” Design Patterns وهى ببساطه عباره عن مجموعة من الارشادات او الحلول لمشاكل برمجية معينة ثبت أنها الطريقة الافضل لحل هذا النوع من المشاكل حيث هناك مشاكل برمجية معينة تحتاج لحلول معينة لكى تعمل بالطريقة الافضل وبالتالى بدلا من أن تجد نفسك تريد تنفيذ شىء ما فتجلس وحدك تتأمل مثل بوذا لتصل لحل افضل وبدلا من اعادة اختراع العجلة ستقوم باستخدام حلول مجربة من قبل بواسطة الاف المبرمجين وثبت أنها الطريقة الامثل لفعل الشىء الذى تريد فعله وبالتالى توفر على نفسك الوقت والمجهود وتكتب الكلاس بأفضل طريقة فنحن هنا عندما نقول Design Patterns نعنى التصميم الخاص بهيكل الكلاس نفسه وعلاقة الكلاس بالكلاسات الاخرى وكتابة الكلاس بطريقة تجعله يتصرف بطريقة معينة ويسلك سلوك معين وينفذ تعليمات معينة فى حالات معينة وقد تقول بأنك تستطيع فعل كل هذا بدون استخدام الـ Design Patterns سأقول لك طبعا تستطيع الاستغناء عنها وعدم دراستها والتفكير فى فعلها بنفسك لكن نحن هنا لا نتحدث عن مجرد حل المشكلة البرمجية أو تنفيذ ما نريده إننا نتحدث عن تنفيذ ما نريده بالطريقة الافضل التى ستضمن لنا بقاء الكود نظيفا وقابل للتطوير والصيانة بدون مشاكل وقد تصادف انك تقوم بتنفيذ شىء معين وهو فى الحقيقة عباره عن pattern معروف دون أن تدرى .

والـ Design Patterns غير مرتبطة بلغة معينة فيمكن تنفيذها مع أغلب اللغات البرمجية وليس فقط مع لغات الـ OOP كما يعتقد البعض فهى ببساطة حلول قابلة لاعادة الاستخدام والتطوير والتعديل وفقا لحاجتك ومشكلتك البرمجية التى تواجهها وعندما نقول مشكلة برمجية بالطبع لا نقصد مشاكل مثل توقف التطبيق او بناء التطبيق بل مشاكل برمجية عادية اى شىء تحتاج تنفيذه برمجيا يعتبر مشكلة برمجية والكود الذى تكتبه هو عباره عن حل المشكلة .

ببساطة وباختصار الـ Design Patterns هى مجموعة من الحلول لمجموعة من المشاكل البرمجية التى واجهت المبرمجين باستمرار وهذه الحلول مجربة وفعالة مع هذه المشاكل لذلك لا نقوم باستخدام الـ Design Patterns بشكل اعتباطى او بدون داعى بل فى حالات ومشاكل معينة كما سنلقى نظرة لاحقا لانه فى حالة استخدام Desing Pattern فى غير موضعه أو فى حالة لا تستدعى استخدامه قد يسبب مشاكل لك فى الكود بدلا من حل المشكلة .

ومع المميزات التى ذكرناها بكون الـ Design Patterns عباره عن حلول مجربة للعديد من المشاكل البرمجية الشائعة الا انها تعرضت لانتقادات عديدة من قبل العديد من المبرمجين الكبار وعلماء الكمبيوتر حتى فى مؤتمر OOPSLA عام 1999 تم عمل محاكمة صورية لعصابة الاربعة هؤلاء مؤلفى الكتاب وتم ادانتهم بالعديد من الجرائم ضد علوم الكمبيوتر والتى من ضمنها الـ patterns وانهم ضللو معنى الكلمة حيث كانت تستخدم سابقا فى مجال المعمار فقط بالاضافة لأن هذه الـ pattern تجعل المبرمج متوسط الخبرة يشعر أنه محترف ويكتفى بتطبيق العديد من الـ patterns دون التنقيب عن ما خلفها والاعتماد على نفسه بشكل أكبر اضافة الى ذلك قام عالم الكمبيوتر Peter Norvig بنقد الـ Design patterns موضحا انه حوالى 16 باترن من الـ 23 باترن (المذكورين فى كتاب الـ Design Patterns الاساسى بواسطة عصابة الاربعة ) يعتبروا منتهيين او deprecated لان اللغات صارت تدعم هذه الاشياء بشكل رسمى وأن هذه الـ patterns تعوض نقص موجود فى اللغة  وقرأت مرة كومنت لأحد الاشخاص يتحدث عن دورة حياة الـ Pattern كالتالى :

-> يظهر كتاب جديد لأحد المؤلفين يتحدث فيه عن Pattern جديد

-> يصبح هذا الكتاب مشهورا والأكثر قراءة عند العديد من المبرمجين

-> الـ Design Pattern الجديد يتم بدأ استخدامه ضمن العديد من البرامج .

-> الـ Design Pattern يعمل بشكل جيد ويكتسب شهرة أكبر وأكبر.

-> يصبح الـ Design Pattern الجديد شىء اساسى لدى البعض

-> يقوم أحد المؤلفين الاخرين بتأليف كتاب عن أن هذا الباترن ضار ومشاكله كذا وكذا .

-> يتم تصنيف هذا الباترن كـ Anti Pattern (اى باترن غير فعال او يحل المشكلة ويسبب مشكلة اخرى )

-> يقوم المؤلف بتأليف كتاب عن باترن جديد

وهكذاا …

لذلك لن تجد list كاملة لكل الـ Patterns وهناك Patterns كثيرة يتم ابتكارها واخرى يتم التعديل عليها واخرى يتم اعتبارها Anti Pattern الثابت فقط هو بعض الـ Patterns الشائعة والتى سنلقى نظرة سريعة على كل Pattern منها فى هذه السلسلة .

فئات الـ Design Pattern 

يمكن تقسيم او تصنيف الـ Design Patterns ل 3 فئات

الفئة الأولى Creational patterns 

وهى عباره عن الـ Patterns التى يمكن أن نستخدمها لتحقيق امر ما متعلق بإنشاء الكلاس نفسها إو انشاء الأوبجكت من هذه الكلاس مثل الـ Singletone Pattern الذى قمنا بعمله أكثر من مرة لإنشاء اوبجكت واحد فقط من الكلاس  وكذلك الـ Builder الذى تجده كثيرا كما فى الـ AlertDialog او مكتبة الـ Retrofit .

الفئة الثانية Structural patterns 

وهى عباره عن الـ Patterns التى يمكن أن  نستخدمها عند تحديد العلاقات بين الكلاس والاوبجكت والعلاقات بين القيم وبعضها داخل الكلاس وكيف تتألف الكلاس والاوبجكت وكيف ستتم الوراثة مثل الـ Adapter الذى نستخدمه غالبا مع الريسكلر فيو أو الـ list .

الفئة الثالثة Behavioral patterns 

وهى مجموعة من الـ Patterns التى يمكن أن نستخدمها عند تحديد العلاقات بين الأوبجكتس المختلفة وتحديد سلوك الأوبجكت وسلوك الكلاس فى الحالات المختلفة مثل الـ Iterator الذى نستخدمه لعمل شىء مشابه للـ loop احيانا .

كانت هذه نظرة عامة وفى المقالات القادمة سنلقى نظرة أقرب على أشهر الـ Patterns الشائعة وحالات الاستخدام الخاصة بها وكيفية تطبيقها ***************************************

منقـــــــــــــــول من مـــوقع هـــنديويـــر ............ 

تصميم تطبيقات الموبايل

الدرس 1: نظرة عامة 

نتعرف فى هذا الدرس على نظرة عامة على تصميم التطبيقات ونقوم بالتعرف على برنامج Adobe Xd الخاص بتصميم واجهات المستخدم

الدرس 2: اساسيات التصميم والألوان 

نتعمق قليلا فى AdobeXd ونتعلم كيفية استخدام الأدوات فى صناعة UI مع اختيار الألوان المتناسقة

الدرس الثالث : تطبيق عملى

تطبيق عملى وتصميم تطبيق ICU الخاص بالبحث عن السرير الخاص بالعناية المركزة فى المستشفيات

منقول من موقع هنديوير .........

مرتضى منصور يجتمع بفيريرا لحسم التجديد للمدرب

يعقد مرتضى منصور رئيس نادى الزمالك جلسة يوم الخميس المقبل مع البرتغالى فيريرا المدير الفنى للفريق لحسم ملف تجديد عقده، خصوصا وأن عقد الأخير انتهى مع النادى.

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