البحث في الموقع

سنتعرف في مقال اليوم على تخصص برمجة تطبيقات سطح المكتب بالتفصيل وهو أحد تخصصات البرمجة المطلوبة في سوق العمل والذي يمكنك من تطوير تطبيقات للحاسوب سريعة وعالية الأداء بعد أن تعرفنا في المقال السابق دليلك الشامل إلى برمجة التطبيقات على التطبيقات وأنواعها المختلفة وطرق برمجتها. وسنستكشف أيضًا كافة أنواع تطبيقات سطح المكتب والفرق بين تطبيقات سطح المكتب وتطبيقات الويب ونستعرض في الختام أهم الخطوات التي ينبغي اتباعها لتعلم برمجة هذا النوع من التطبيقات وأهم لغات البرمجة وأطر العمل المستخدمة في تطويرها. ما هي تطبيقات سطح المكتب؟ تطبيقات سطح المكتب هي تطبيقات مستقلة بذاتها مصممة للعمل على أجهزة الحاسوب المكتبية والحواسيب المحمولة التي تعمل عادة بأنظمة تشغيل ويندوز أو لينكس أو ماك. عندما تشتري جهاز الحاسوب لأول مرة ستجد مجموعة من تطبيقات سطح المكتب المثبتة بالفعل على جهازك مثل تطبيق الآلة الحاسبة ومشغل الوسائط، كما يمكنك أيضًا تنزيل تطبيقات سطح مكتب لاستخدامات مختلفة وتثبيتها على نظام التشغيل من خلال تحميل حزم التثبيت الخاصة بالتطبيق إما من شبكة الانترنت أو من الأقراص المضغوطة أو شراؤها من موردي البرامج وتثبيتها على نظام التشغيل كي تتمكن من استخدامها، وأحيانًا سيكون عليك تثبيت تحديثات هذه التطبيقات عند صدورها بنفسك بشكل يدوي فهي لا تتحدث تلقائيًا أو سيثبتها مدير التطبيقات تلقائيًا. يمكن لتطبيقات سطح المكتب أداء مهام متنوعة مثل تحرير الصور أو معالجة النصوص أو تشغيل الوسائط أو اللعب ومن أشهر الأمثلة على تطبيقات سطح المكتب مستكشف ملفات ويندوز وتطبيقات مايكروسوفت أوفيس وتطبيقات تصفح الإنترنت مثل متصفح كروم ومتصفح فايرفوكس وتطبيقات تحرير الصور مثل أدوبي فوتوشوب وتطبيقات تشغيل الوسائط مثل Windows Media Player ومشغل الفيديو والوسائط VLC …إلخ. أهمية تطبيقات سطح المكتب بعد ظهور الإنترنت وشيوع استخدام الهواتف الذكية واللوحية تراجع استخدام أجهزة الحواسيب المكتبية وزادت شعبية برمجة تطبيقات الويب وتطبيقات الهاتف المحمول مقارنة ببرمجة تطبيقات سطح المكتب، لكن هذا لا ينفي أن الحواسيب المكتبية لازالت تستخدم بكثرة على الصعيد التجاري والشخصي وبالتالي لا يزال الطلب على تطبيقات سطح المكتب في سوق العمل قائمًا لاسيما أن هذه التطبيقات تنفرد بجملة من الفوائد قد لا تتوافر في أنواع التطبيقات الأخرى. وهناك العديد من المجالات التي يفضل المستخدمون فيها تطبيقات سطح المكتب المحلية على أنواع التطبيقات الأخرى ومن أهمها: المجالات التي تتطلب عرض رسومات عالية الدقة مثل تصميم الجرافيك وتحرير الفيديو وتطبيقات الهندسة المعمارية فهي تتطلب موارد عالية لتعمل بكفاءة وسرعة، لذا يفضل تطويرها كتطبيقات سطح المكتب لأنها ستكون أسرع بكثير من تطبيقات الويب مثلًا القائمة على المتصفح. الصناعات التي تتطلب وجود اتصال مباشر بين جهاز الحاسوب والأجهزة الإلكترونية لإجراء مراقبة أو ضبط إعدادات معينة لهذه الأجهزة. المجالات التي تتطلب التحكم الكامل في التطبيقات ففي هذه الحالة من الأفضل اللجوء لتطوير تطبيقات سطح المكتب بشكل محلي بدلًا من تشغيلها على خادم بعيد كي تتمكن من التحكم الكامل بالتطبيق وتقوم بتخصيصه وإدارته بالكامل. الأعمال التي تتطلب قدرًا من السرية والخصوصية وحماية المعلومات الشخصية من محاولات الاختراق، فبقاء التطبيق غير متصل بالإنترنت وتخزين كافة البيانات على جهازك يرفع من درجة أمان التطبيق ويحميه من المخترقين والمتطفلين. تعد تطبيقات سطح المكتب أكثر أمانًا وسرية كما أنها تتواصل مع الحاسوب وعتاده مباشرةً دون وسيط أي أنها تتخاطب بالطبع مع نظام التشغيل الذي يُشغِّل عتاد الحاسوب وهذا يمنع أي تأخير في التواصل على عكس تطبيقات الويب مثلًا التي تعمل ضمن المتصفح وهو في الأساس تطبيق سطح مكتب يتواصل بدوره مع نظام التشغيل ثم مع العتاد. وتجدر الإشارة لحاجة تثبيت تطبيقات سطح المكتب من مواقعها أو مصادرها الرسمية فقط لضمان خلوها من أي فيروسات أو برامج ضارة ولا تحتاج إلى اتصال بالإنترنت لكي تعمل وهذه إحدى ميزات الأمان كما أن لبعض التطبيقات درجة أمان أعلى مثلًا لا تعمل إلا بوجود جهاز USB أو لاسكلي موصول بالحاسوب أو قراءة بصمة الإصبع أو العين وغيرها من الطرق. أنواع تطبيقات سطح المكتب كما شرحنا سابقًا فإن تطبيقات سطح المكتب بالأساس هي تطبيقات مستقلة بذاتها ويمكنها العمل على على أجهزة حاسوب محلية تعلم بأنظمة تشغيل معينة، وفي هذه الفقرة سنوضح الفرق بين نوعين من تطبيقات سطح المكتب. تطبيقات سطح المكتب الأصيلة Native Desktop Application تطبيقات سطح المكتب متعددة المنصات Cross-platform Desktop Application وإليك الفرق بين هذين النوعين ومميزاتهما وطريقة برمجة تطبيقات سطح المكتب لكل منهما. 1. تطبيقات سطح المكتب الأصيلة Native Desktop Application تطبيقات سطح المكتب الأصيلة أو ما يعرف بتطبيقات سطح المكتب التقليدية أو الكلاسيكية هي تطبيقات تستخدم على نظام تشغيل أساسي أو جهاز معين مثل ويندوز أو ماك او إس أو لينكس وتتميز هذه التطبيقات بسرعة أدائها وإمكانية تضمينها لطيف واسع من الوظائف والميزات من خلال الاستفادة من قدرات الجهاز الأساسي الذي تعمل عليه. تحدد أنظمة التشغيل كيفية تشغيل هذا النوع من التطبيقات حيث تحتاج بعض البرامج فقط إلى الأذونات الأساسية التي يسمح بها نظام التشغيل ويحتاج بعضها الآخر للحصول على المزيد من التحكم من خلال الامتيازات الإدارية للنظام، فقد لا تعمل التطبيقات التي تحتاج إلى إجراء تغييرات على الملفات الخاصة بنظام التشغيل أو تتطلب الوصول إلى المجلدات الآمنة بالشكل صحيح إذا لم يتم منحها الصلاحيات المطلوبة ولا تعطى بعض تلك الصلاحيات إلا من مدير النظام وليس من أي مستخدم عادي. يمكن أن تتطلب تطبيقات سطح المكتب الأصيلة كذلك توافر خصائص معينة في الجهاز أو وجود إصدارات معينة لأنظمة التشغيل يحددها المطورون عند برمجة تطبيقات سطح المكتب كي تعمل بشكل صحيح. على سبيل المثال تتطلب أحدث نسخة من تطبيق تحرير الفيديو الاحترافي أدوبي بريمر برو احتواء جهاز الحاسوب على ذاكرة وصول عشوائي RAM بسعة 8 جيجابايت على الأقل ووحدة معالجة رسومات GPU بسعة 2 جيجابايت ومعالج جيل سادس والإصدار ويندوز 10 بمعمارية 64 بت. تعتمد برمجة تطبيقات سطح المكتب المحلية بشكل أساسي على لغات برمجة عالية المستوى مثل جافا وبايثون وروبي و C‎++‎ و C#‎ لكن أبرز عيوب تطوير التطبيقات المحلية هو أنك ستحتاج لكتابة شيفرات برمجية منفصلة لتطوير تطبيقات سطح المكتب مخصصة لكل نظام تشغيل. هذا يعني أنك إذا احتجت لبرمجة تطبيق سطح مكتب يعمل على كافة أنظمة التشغيل الرئيسية وهي ويندوز ولينكس وماك ستضطر حينها لإنشاء ثلاث نسخ منفصلة من هذا التطبيق بأدوات وتقنيات مختلفة، ولابد أنك استنتجت بنفسك كم سيكلفك تطوير تطبيق كهذا من وقت وجهد في كتابة النسخ لكل منصة منفصلة تستهدفها فضلًا عن الوقت المستغرق في إجراء عمليات الصيانة والتحديث وإضافة ميزات جديدة لكل تطبيق منها على حدة. 2. تطبيقات سطح المكتب متعددة المنصات Cross-platform Desktop Application تطبيقات سطح المكتب متعددة المنصات أو التطبيقات العابرة للأنظمة هي تطبيقات تُبرمَج مرة واحدة وتعمل على كافة أنظمة التشغيل خلافًا تطبيقات سطح المكتب الأصيلة المبرمجة للعمل على نظام أساسي واحد فقط، ويعمل هذا النوع من التطبيقات بكفاءة على الحواسيب الشخصية والمحمولة والأجهزة اللوحية على حد سواء حيث يُكتب الكود البرمجي لتطبيق سطح المكتب متعدد الأنظمة مرة واحدة فقط ويكون قادرًا على العمل على أنظمة التشغيل المختلفة. وميزة الشيفرة الواحدة التي تعمل على مختلف أنظمة التشغيل تأتي مع قيود تكثر أو تقل بحسب كيفية برمجتها والأدوات المستخدمة في برمجتها وتتصف أحيانًا بأداء أقل من التطبيقات الأصيلة ووصول أقل أو محدود إلى موارد الحاسوب مثل الكاميرا أو ماسح البصمة وقد تكون أقل أمانًا أيضًا لذا لن تجد مثلًا أي لعبة -وهي نوع من أنواع تطبيقات سطح المكتب- تستهلك موارد الحاسوب استهلاكًا كاملًا تُبرمَج بهذه الطريقة ولا التطبيقات ذات الأمان المرتفع مثل تطبيقات البنوك أو التطبيقات الحكومية وهكذا. تستفيد هذه التطبيقات من تقنيات الويب وهي لغة HTML و CSS وجافا سكريبت لتطوير هذا النوع التطبيقات مع أداة تعمل على تحويل الشيفرة لكي تعمل على نظام التشغيل مباشرة أو عبر وسيط مثل متصفح الويب. وتلجأ معظم الشركات اليوم للاستفادة من مميزات هذا النوع من التطبيقات لأنها أقل كلفة في التطوير والصيانة ولا تحتاج أغلبها إلى أداء مرتفع ووصول إلى كامل عتاد الحاسوب ومن أبرز الأمثلة على تطبيقات تم إنشاؤها باستخدام هذه التقنية نذكر تطبيق ووردبريس لسطح المكتب WordPress Desktop app الذي يمكنك من إدارة موقع ووردبريس الخاص بك مثل إضافة المنشورات وتحديث الإضافات والرد على التعليقات من حاسوبك المحلي دون فتح متصفحك، وتطبيق سلاك Slack لسطح المكتب وتطبيق واتساب الشهير لسطح المكتب …إلخ. فإذا كنت على معرفة بتقنيات الويب أو كنت مطور ويب أو تنوي دخول كلا المجالين مجال تطوير الويب ومجال تطوير تطبيقات سطح المكتب فيمكنك الاستفادة من هذا النوع من التطبيقات وبرمجة تطبيقات سطح مكتب لمختلف أنظمة التشغيل إلى جانب تطوير تطبيقات الويب وتطبيقات الجوال أيضًا، فتعلم تطوير هذه التطبيقات سيكون الخيار الأفضل والأسرع بالنسبة لك من تطوير تطبيقات سطح المكتب الأصلية لأنك لن تضطر لكتابة كود برمجي مخصص لكل منصة ويمكنك أن بنفس الكود البرمجي أن تضمن تشغيل تطبيقك على أنظمة ويندوز ولينكس وماك دون أن تتأثر وظائف التطبيق أو جودته. الفرق بين تطبيقات الويب وتطبيقات سطح المكتب كما شرحنا سابقًا فإن تطبيق سطح المكتب هو برنامج يتم تثبيته باستخدام حزمة التثبيت ثم تشغيله على جهاز الحاسوب المحلي الخاص بك ويجب أن تتوافق مواصفات العتاد مثل حجم الذاكرة وسرعة المعالج ونظام التشغيل وإصداره مع المتطلبات الخاصة بالتطبيق كي يُثبت ويعمل بنجاح. بينما تطبيق الويب هو برنامج يتم توفيره على متصفح الويب وهو في الأساس تطبيق سطح مكتب -أو تطبيق جوال- عن طريق الاتصال بالإنترنت وطلب ملفاته من خادم بعيد، ولا يتطلب تشغيل هذا التطبيق توفر أي موارد أو متطلبات في جهازك أو نظام التشغيل الذي تستخدمه فكل ما تحتاجه لتشغيل تطبيق الويب هو مستعرض واتصال بالإنترنت وبكتابة عنوان URL الخاص بالتطبيق ضمن نافذة المتصفح ستتمكن من الولوج له وبدء استخدامه والاستفادة من مميزاته. تعتمد برمجة تطبيقات الويب على تقنيات الويب التي ذكرناها آنفًا في تطوير تطبيقات سطح المكتب متعددة الأنظمة بالإضافة إلى لغات وتقنيات برمجة الويب المختلفة مثل لغة PHP ولغة Ruby وحتى لغة بايثون Python وسنتحدث بمزيد من التفصيل عن تقنيات ولغات برمجة تطبيقات سطح المكتب في الفقرة التالية. تجدر الإشارة لأن لكل من تطبيقات الويب وتطبيقات سطح المكتب ميزاته وعيوبه واختيار نوع التطبيق المناسب يعتمد على احتياجات العمل والجمهور المستهدف والموارد المطلوبة للتطبيق ومستوى الأمان وغيرها من العوامل، لكن يمكننا القول بصفة عامة بأن تطبيقات سطح المكتب هي الأنسب للاستخدام الداخلي في المؤسسات والدوائر الحكومية وفي برمجة الألعاب في حين تعد التطبيقات المستندة إلى الويب في هي الخيار المفضل عندنا تحتاج إلى توسيع نطاق وصول التطبيق وتوفير إمكانية استخدامه من مواقع وأجهزة مختلفة فلا يكاد يخلو أي جهاز أو جوال اليوم من متصفح ويب. تقنيات ولغات برمجة تطبيقات سطح المكتب قد تتساءل ما هي أفضل لغات البرمجة لبرمجة تطبيقات سطح المكتب؟ في هذه الفقرة نوفر لك قائمة بأهم هذه التقنيات ومميزات كل منها. هناك العديد من لغات البرمجة المناسبة لتطوير تطبيقات سطح المكتب المختلفة وهذا بحسب نوع التطبيق ونظام التشغيل المستهدف. لغات برمجة تطبيقات ويندوز فإذا أردت برمجة تطبيقات أصيلة مخصصة للعمل على نظام التشغيل ويندوز فعليك استخدام لغات برمجة مثل C#‎ و C++‎. لغات برمجة تطبيقات ماك macOS وأما لبرمجة تطبيقات خاصة بنظام التشغيل ماك أو إس فعليك استخدام لغة Objective C. لغات برمجة تطبيقات لينكس وأما لتطوير تطبيقات سطح مكتب موجهة لنظام التشغيل لينكس فيمكنك استخدام لغة C أو لغة C++‎ أو لغة Bash. كما أنك تحتاج للاستعانة بأدوات خاصة ومكتبات رسم الواجهات وحزم أدوات تطوير البرمجيات SDKs متوفرة لكل نظام تشغيل على حدة. وأما إن أردت برمجة تطبيقات عابرة للمنصات وتعمل على أنظمة التشغيل الثلاثة السابقة وغيرها فهنا توجه إلى تقنيات الويب ولغاتها التي أشرنا إليها في الأعلى. وعمومًا، يمكنك تطوير تطبيقات سطح المكتب بالاعتماد على إحدى لغات البرمجة سواءً أصيلة أو عابرة للمنصات فقط لكن هذا قد يتطلب منك الكثير من الوقت والجهد لذا يفضل الاعتماد على إطار عمل framework مساعد تقلل التعليمات البرمجية وتوفر عليك الوقت وتساعد في زيادة إنتاجيتك. أدوات وأطر عمل لبرمجة تطبيقات سطح المكتب فيما يلي قائمة بأشهر أدوات وأطر عمل تطوير تطبيقات سطح المكتب: إلكترون Electron js هو إطار عمل برمجي يستخدم في برمجة تطبيقات سطح مكتب عابرة للمنصات تبدو وكأنها تطبيقات أصيلة native-feeling لكنها تعتمد بالأصل على تقنيات الويب الأساسية HTML و CSS وجافا سكريبت وتستخدم متصفح الويب مفتوح المصدر كروميوم Chromium لعرض محتوى التطبيق كما أنها تستخدم بيئة التشغيل Node.js للوصول إلى نظام الملفات المحلي ونظام التشغيل وبهذا يمكن للتطبيقات العمل على أي نظام تشغيل بكل سلاسة. ومن أشهر تطبيقات سطح المكتب المطورة باستخدام إطار عمل إلكترون نذكر تطبيق سلاك Slack وتطبيق واتساب WhatsApp ومحرر الأكواد الشهير فيجوال ستوديو كود Visual Studio Code. إذا كنت مهتمًا بتطوير تطبيقات سطح المكتب باستخدام إطار عمل إلكترون فقد وفرت لك أكاديمية حسوب مسارًا متكاملًا ضمن دورة تطوير التطبيقات باستخدام JavaScript ستتعلم من خلاله إنشاء تطبيق Electron JS لسطح المكتب. كاكاو Cocoa هو إطار عمل مخصص لتطوير تطبيقات سطح المكتب التي تعمل على نظام تشغيل macOS ويمكن استخدامه كذلك لإنشاء تطبيقات مخصصة للأجهزة المحمولة، يوفر هذا الإطار العديد من عناصر واجهة المستخدم التي تتيح لك إنشاء واجهات مستخدم احترافية كالحقول النصية وأشرطة التنقل وأزرار الاختيار كما يساعدك على تحسين أداء تطبيقاتك من خلال توفير ميزات إدارة الذاكرة والتحميل الكسول Lazy loading. إطار العمل WPF هي اختصار لعبارة Windows Presentation Foundation وهو إطار عمل يتيح لك إنشاء واجهة مستخدم لتطبيقات ويندوز باستخدام لغة XAML متوافق مع إطار عمل ‎.NET ويحتوي مكتبات وأدوات لبرمجة الألعاب والويب وتطبيقات الهاتف المحمول ويساعدك في تضمين العديد من الميزات في تطبيقاتك مثل التخطيطات المتجاوبة مع كافة أحجام الشاشات وعناصر التحكم والنماذج وغيرها من الأدوات التي تجعل تجربة برمجة التطبيقات احترافية وسريعة. منصة UWP هي اختصار لعبارة Universal Windows Platform وهي منصة متخصصة في برمجة تطبيقات سطح المكتب متوافقة مع نظام التشغيل ويندوز 10 وويندوز 11 وتتميز التطبيقات المطورة بهذه المنصة بكونها متوافقة مع كافة أحجام الشاشات وقادرة على التحكم بالموارد المختلفة للجهاز كالفأرة ولوحة المفاتيح وكاميرا الويب وأجهزة التحكم في الألعاب وشاشات اللمس. إطار العمل WinForms هو إطار عمل مخصص لبناء واجهات المستخدم لتطبيقات سطح المكتب التي تعمل على نظام التشغيل ويندوز بسهولة من خلال تقنية السحب والإفلات التي تساعد مطوري البرامج على برمجة التطبيقات بسرعة وكفاءة، كما يسمح WinForms للمطورين باسترداد البيانات من واجهة برمجة التطبيقات API أو ملفات JSON أو XML أو غيرها من مصادر البيانات وعرضها ضمن التطبيقات. خطوات تعلم برمجة تطبيقات سطح المكتب إن كنت مهتمًا ببرمجة تطبيقات سطح المكتب ومتحمسًا جدًا لتعلمها لكنك لا تعلم من أين تبدأ، حسنًا دعنا نستعرض مجموعة من الخطوات التي تساعدك في تعلم تطوير تطبيقات سطح المكتب من الصفر للاحتراف. 1. حدد هدفك حدد طبيعة ونوع تطبيقات سطح المكتب التي ترغب بتطويرها، واختر منصة التطوير التي تستهدفها في تطبيقاتك فهناك كما ذكرنا العديد من الخيارات المتاحة مثل ويندوز ولينكس وماك وكل منصة لها مميزاتها وتقنياتها وكي لا تضيع بين هذه الخيارات من الأفضل أن تحدد وجهتك من البداية. 2. حدد لغة البرمجة حدد لغة البرمجة الأنسب التي تمكنك من برمجة تطبيقات سطح المكتب المخصصة للمنصة التي اخترتها وضع خطة لتعلمها والتزم بها قدر المستطاع. 3. حدد الأدوات وأطر العمل تعلم استعمال إطار العمل المناسب للغة البرمجة أو المنصة التي اخترتها فهي تسرع عملك وتمكنك من تطوير تطبيق سطح مكتب عالي الجودة على سبيل المثال يمكنك استخدام إطار عمل إلكترون مع لغة جافاسكربت لبرمجة تطبيقات سطح مكتب عابرة للمنصات، واستخدام إطار عمل Cocoa لإنشاء تطبيقات خاصة بنظام التشغيل macOS. 4. طبق ما تعلمته لن تستفيد مما تعلمته من تقنيات إذا لم تطبق ما تعلمته على مشاريع فعلية، وأول خطوة في التطبيق العملي هي تحديد فكرة وهدف التطبيق والمميزات التي تريد تنفيذها في هذا التطبيق ومحاولة تنفيذها. 5. حضر التصميمات الأولية لواجهة التطبيق قبل البدء بالتنفيذ من المهم تصميم نماذج أولية لواجهات التطبيق فهي تساعدك على توسيع أفكارك وتحديد طريقة عمل التطبيق بشكل أفضل، ويمكنك في هذه المرحلة أن ترسم نماذج تطبيقك بشكل بدائي على الورق أو تعتمد أدوات احترافية مثل Adobe XD أو أو Mockplus أو Moqups وأيًا كانت الطريقة المتبعة في التصميم احرص على أن تراعي تجربة المستخدم وسهولة الاستخدام، وإن كنت تعمل مع فريق، فهذه العملية سيستلمها فريق التصميم عادةً. وللمزيد من التفاصيل، اطلع على مقال تصميم النماذج الأولية للواجهات الرسومية ومقال المرحلة الرابعة في عملية التفكير التصميمي: مرحلة بناء النماذج الأولية. 6. ابدأ عملية البرمجة بعدها ابدأ في برمجة تطبيق سطح المكتب مستعينًا بالأدوات التي تعلمتها، وفي هذه المرحلة ليس عليك تحقيق جميع الميزات في وقت واحد بل نفذها واحدة تلو الأخرى. 7. احترف حل المشكلات ستصادف الكثير من الأخطاء والمشكلات خلال كتابة الكود، لا تقلق فهذا أمر طبيعي ومحاولة اكتشاف سبب وقوع الأخطاء والعمل على تصحيحها جزء مهم في تنمية مهاراتك البرمجية. للاستزادة، ارجع إلى مقال حل المشكلات وأهميتها في احتراف البرمجة. 8. اختبر التطبيق بعد الانتهاء من برمجة التطبيق قم بإطلاق التطبيق للاستخدام بشكل تجريبي واختبر أدائه وخلوه من أي أخطاء بمساعدة أدوات الاختبار الآلي وأدوات تحليل التعليمات البرمجية وأدوات تصحيح الأخطاء كما ينبغي عليك اختبار التطبيق على مختلف الأنظمة والأجهزة للتأكد من أنه يعمل كما هو متوقع. 9. انشر التطبيق بعد التأكد من أن تطبيقك يعمل على ما يرام يمكنك البدء في إصدار ونشر تطبيق سطح المكتب الخاص بك على المستخدمين، وبمجرد أن يصبح جاهزًا للعمل يمكنك إنشاء حساب مطور ورفعه على أحد المتاجر المتخصصة مثل متجر مايكروسوفت لتطبيقات ويندوز Windows ومتجر Apple لمستخدمي ماك أو يمكنك تحميله في GitHub أو في موقع الويب الخاص بك لبناء معرض أعمال خاص بك يساعدك في دخول سوق العمل بسرعة أكبر. لا تنتهي العملية عند نشر التطبيق بل يتوجب عليك كمبرمج العمل بصورة مستمرة على متابعة أداء التطبيق والاهتمام بأي ملاحظات أو مشكلات يواجهها مستخدموا التطبيق بعد نشره والحرص على صيانة التطبيق وحل مشكلاته وتحسينه بشكل دوري لتلبية المتطلبات الجديدة وإصلاح أي أخطاء تظهر لاحقًا لضمان المحافظة على جودته وقابليته للاستخدام. 10. استمر في التعلم أنت كمبرمج لن تتوقف على التعلم لأن هذا مجال تطوير تطبيقات سطح المكتب سريع التطور وشديد التقلب، لذا عليك أن تبقى على اطلاع مستمر على أحدث الاتجاهات والتقنيات وأطر العمل في هذا المجال وتحرص على اتباع قواعد البرمجة وأفضل ممارسات كتابة الكود لتضمن التميز والنجاح في سوق شديد التنافسية. وأنصحك بقراءة مقال كيف تتعلم البرمجة: نصائح وأدوات لرحلتك في عالم البرمجة لبعض النصائح في هذه الرحلة، رحلة تعلم البرمجة وبرمجة تطبيقات سطح المكتب. الخلاصة تعرفنا في مقال اليوم على أحد مجالات تطوير البرمجيات الهامة في سوق العمل وهو برمجة تطبيقات سطح المكتب وتعرفنا على أهم لغات برمجة هذه التطبيقات وأشهر أطر العمل التي تسهل عملية تطويرها، وختمنا المقال بأهم الخطوات والنصائح التي عليك اتباعها لبدء حياتك المهنية في مجال تطوير تطبيقات سطح مكتب احترافية وذات جودة عالية. إذا كان لديك أي تساؤل أو مشكلة تتعلق بموضوع برمجة تطبيقات سطح المكتب لا تتردد في كتابتها في قسم التعليقات أسفل المقال أو يمكنك إضافة استفسارك في قسم الأسئلة البرمجية لتحصل على إجابة بأسرع وقت ممكن وإذا كنت بدأت بالفعل في تطوير تطبيقات سطح المكتب الخاصة بك ولديك نصائح أو توجيهات مساعدة يسرنا أن تشاركها معنا للمزيد من الفائدة. اقرأ أيضًا برمجة تطبيقات الجوال تطوير التطبيقات

سنتعرّف في هذا الدّرس على أداة nw (سابقًا node-webkit) المُخصّصة لتطوير تطبيقات سطح المكتب العابرة للمنصات؛ باستخدام مُتصفّح كروميوم [Chromium [1 و node.js. حيث أصبح بالإمكان استخدام تقنيات الوِب الحديثة لتطوير برمجيات قادرة على الاستفادة من موارد النظام؛ كالتحكّّم بالملفات، استعمال قواعد البيانات وغيرها من الأمور. في هذا الدّرس سنتعلّم كيفية كتابة تطبيق لسطح المكتب باستخدام nw لتشغيل ملفّات الفيديو. لنبدأ. تثبيت node.js إذ كنت تَستخدم نظام التشغيل Windows أو Mac OS عندها استعمل معالج التثبيت الرسمي، أما في حال عملك على نظام لينكس فقم بتثبيتها من خلال مدير الحزم. تثبيت nw بعد تركيب node.js من خلال مدير حزم node.js نحتاج إلى تركيب nw، للقيام بذلك نفّذ ما يلي من خلال الطرفية: npm install nw -g أهلا بالعالم أنشئ مُجلدًا مُخصصًا لمشروعنا الأول باسم helloworld ثم أنشئ بداخله ملفّين: package.json إن سبق لك التطوير باستخدام node.js فستعرف بالتأكيد أن هذا هو الملف الخاص بمعلومات و خصائص التطبيق أو الحزمة، يمكنك إنشاءه بسهولة من خلال سطر الأوامر: npm init سنضيف إلى الملفّ بعض خصائص nw (حجم النافذة و الرابط للملف الرّئيسيّ) ليصبح شكل الملف بالكامل هكذا: { “name”: “helloworld”, “version”: “1.0.0”, “description”: “”, “main”: “index.html”, “window”: { “width”: 600, “height”: 400 }, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1” }, “author”: “hsoubAcademy”, “license”: “MIT” } index.html هو ملف nw الرئّيسيّ الذي قمنا بتحديده من ملف الحزمة (package.json)، سنُنشئ مُستند بسيط لطباعة أهلًا بالعالم. تشغيل التطبيق من خلال سطر الأوامر انتقل إلى ملف المشروع وشغّل nw: cd helloworld nw يجب أن تظهر لك نافذة بحجم 600X400px وبداخلها نص "أهلًا بالعالم". سياق شفرة javascript يوجد بـ nw سياقان لشِفرة javascript: سياق المُتصفّح وسياق node.js، عند استدعائك لملف javascript أو تشغيلك لشيفرة من خلال مستند html فإن هذه الشفرة تُمرر إلى المتصفح ليقرأها، أما عند تشغيلك لملفّ javascript من خلال خاصية node-main في ملفّ الحزمة (package.json) أو استدعائه من خلال الدّالّة require فإنه يُمرر إلى سياق node.js، حيث يوجد بعض الاختلافات الطفيفة بين هذين السياقين في الكتابة: 1. سياق المتصفح في هذا السياق تعمل الشيفرة بالأسلوب الذي تعمل به في المتصفح، المُتغيّر العام هو window مثلًا، هذه الشيفرة ستعمل بشكل صحيح فقط في سياق المُتصفح: myVar = “test”; // تعريف مُتغير بشكل عام alert(window.myVar); // إخراج نافذة بالمتغير ولتمرير المُتغيرات بشكل عام إلى سياق node.js يجب تعريفها كتابع للمُتغير window.global مثال ليعمل مثال: // ملف window.js // هذا الملف يجب أن يعمل من سياق المُتصفح window.global.myVar = “test”; // تعريف مُتغيّر بشكل عام إلى سياق المُتصفح require(“node.js”); // استدعاء ملف node.js بداخل سياق node.js // ملف node.js // هذا الملف يجب أن يعمل من سياق node.js window.alert(myVar); // عرض المُتغير الّذي تم تعريفه بشكل عام من سياق المُتصفح 2. سياق node.js في هذه السياق تعمل الشيفرة بأسلوب عملها باستخدام node.js، المُتغير العام هو global مثال: myVar = “test”; // تعريف مُتغير بشكل عام window.alert(global.myVar); // إخراج نافذة بالمتغير العام الّذي قمنا بتعريفه يُمكن استخدام سياق المتصفح والتمرير إليه من خلال المُتغير window. استدعاء الحزم التي كتبت للمتصفح بداخل سياق node.js عند استدعاء حزم تمت كتابتها للمُتصفح بداخل سياق node.js عن طريق الدّالّة require فقد لا تعمل، حيث تحدثنا سابقًا أن المتغيّر العام في سياق node.js هو global و ليس window مما يسبب مشكلة إن تم استدعاء أحد توابع window، عمومًا فالمثال لن يعمل في سياق node.js: var div = document.createElement(“div”); لجعل هذه الشيفرة تعمل يجب تعريف مُتغير document بشكل عام في سياق node.js: global.document = window.document; بشكل مبدئي سيجعل هذين السطرين أغلب الحزم تعمل: global.document = window.document; global.navigator = window.navigator; إن كنت تبحث عن حل تلقائي لنقل جميع المُتغيرات إلى سياق node.js (قد لا يُنصح بهذا الحل بسبب حذف المُتغيرات المتطابقة في الاسم): var Var; for(Var in window) if(Var != “require”) global[Var] = window[Var]; ملاحظة: لم ننقل مُتغير require لأن التابع window.require يستخدم global.require في استدعاء الحزم. لاحظ أيضًا أنه لا يمكن استدعاء حزمة nw.gui الخاصة بواجهة المستخدم من خلال سياق node.js عن طريق الدّالّة require فكما ذكرنا؛ التابع window.require يختلف عن global.require. هذا هو النص المصدري للتابع: window.require = function (name) { if (name == ‘nw.gui’) return nwDispatcher.requireNwGui(); return global.require(name); } وكما تلاحظ إن كان اسم الحزمة node.js فإنه يستخدم هذه الدّالّة لاستدعائها: nwDispatcher.requireNwGui(); إذًا لاستدعائها من خلال سياق node.js استخدم الدّالّة السابقة أو استخدم window.require. إنشاء تطبيق لتشغيل الفيديو ملفات المشروع هذه قائمة لملفات المشروع: ملف الحزمة (package.json) حجم النافذة الافتراضي هو 800x600px، الملفّ الرّئيسيّ هو index.html، مبدئيًا سيكون الملف بهذا الشكل: { “name”: “nw-video-player”, “version”: “1.0.0”, “description”: “تطبيق بسيط لتشغيل الفيديو”, “main”: “index.html”, “window”: { “width”: 800, “height”: 600 }, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1” }, “author”: “hsoubAcademy”, “license”: “MIT”, “dependencies”: { “videojs”: “^4.12.15” } } الملف الرئيسي index.html سنكتب مستند بسيط يحتوي على زر وعنصر، نضيف المشغّل ضمنه من خلال شيفرة javascript: <!doctype html> <html> <head> <meta charset="utf-8"> <title>تطبيق بسيط لتشغيل الفيديو</title> <!-- ملف شفرة js الرّئيسية للتطبيق --> <script src="src/app.js"></script> </head> <body> <button id="play">فتح</button> <div id="player"></div> </body> </html> نافذة فتح الملفات لا يوجد طريقة مباشرة لفتح الملفات باستخدام نافذة النظام، لكن يُمكننا استخدام مدخل input من نوع file لفتح الملفّات: لكن كخلاف المتصفح للمستخدم يُتاح لنا بعض الأشياء عند التطوير بـ nw كجلب المسار الكامل الحقيقي للملفّ، ويتاح لنا فتحه من خلال javascript: document.querySelector(“input”).click(); من خلال هذا سنكتب دالّة بسيطة لفتح ملفّات الفيديو وإرجاع مسار الملف مع إضافة بروتوكول file لاستخدامه من خلال المُتصفح، الدّالّة: // فتح ملف var openFile = function openFile (callback) { var input = window.document.createElement(“input”); input.setAttribute(“type”, “file”); input.setAttribute(“accept”, “.mp4, .ogg, .ogv, .webm”); input.addEventListener(“change”, function () { // عند إختيار ملف callback(“file://”+this.value); }); input.click() // فتح مُختار الملفات } تجربة استخدام: openFile(alert); مشغل الفيديو سنستخدم video.js لتسهيل تصميم المشغّل من خلال سطر الأوامر، اتجه إلى مجلّد المشروع ثم قم بتنصيب video.js من مدير الحزم الخاص بـnode.js: npm install videojs –save كما تحدثنا في بداية الدرس عن استدعاء الحزم في سياق node.js سنحتاج إلى كتابة هذين السطرين: global.document = window.document; global.navigator = window.navigator; من ثم سيمكننا استدعائها بشكل عادي: var videojs = require(“videojs”); من خلال هذا والدّالّة السابقة لفتح الملفات سنكتب دالّة لإنشاء مشغل فيديو من خلال مسار ملف الفيديو من ثم إضافته إلى عنصر المشغّل في المستند الذي كتبناه من قبل: var playVideo = function playVideo (src) { var videojs = require("videojs"), ext = /[^.]+$/.exec(src)[0], // صيغة الملفّ video = document.createElement("video"), // عنصر الفديو source = document.createElement("source"), // عنصر المصدر للفديو player = document.querySelector("#player"); // عنصر المشغل في وثيقة html ext = (ext == "ogv") ? "ogg" : ext; // ملفات ogg قد تملك صيغة ogv source.type = "video/"+ext.toLowerCase(); // نوع mime للفديو source.src = src; // مسار الفديو video.controls = true; // عناصر التحكّم video.autoplay = true; // تشغيل تلقائي video.classList.add("video-js", "vjs-default-skin"); // الclass الخاصة بvideojs video.appendChild(source); // إضافة عنصر المصدر إلى الفديو player.innerHTML = ""; // إزالة جميع العناصر السّابقة player.appendChild(video); // إضافة الفديو إلى وثيقة html videojs(video) // إستخدام video.js } مشكلة nw مع الصيغ مُغلقة المصدر: بشكل افتراضي سيمكنك تشغيل ملفات ogg و webm فقط لكن بسبب مشكلة مع التراخيص، لا تتضمن nw مشغّل لصيغة mp4 و الصوت mp3 اطلع على طريقة تضمين الملفّات المُشغلة. الآن تبقى فتح الملفّ عند الضغط على الزر: window.addEventListener(“load”, function () { window.document.querySelector(“button#play”).addEventListener(“click”, function () { openFile(playVideo) }); }); ليصبح كامل ملف app.js: "use strict"; global.document = window.document; global.navigator = window.navigator; var nwGui = require("nw.gui"), Window = nwGui.Window.get(); (function(window, nwGui, Window){ var maximized; // فتح ملف var openFile = function openFile (callback) { var input = document.createElement("input"); input.setAttribute("type", "file"); input.setAttribute("accept", ".mp4, .ogg, .ogv, .webm"); input.addEventListener("change", function () { // عند إختيار ملف callback("file://"+this.value); }); input.click() // فتح مُختار الملفات } // تشغيل فديو var playVideo = function playVideo (src) { var videojs = require("videojs"), ext = /[^.]+$/.exec(src)[0], // صيغة الملفّ video = document.createElement("video"), // عنصر الفديو source = document.createElement("source"), // عنصر المصدر للفديو player = document.querySelector("#player"); // عنصر المشغل في وثيقة html ext = (ext == "ogv") ? "ogg" : ext; // ملفات ogg قد تملك صيغة ogv source.type = "video/"+ext.toLowerCase(); // نوع mime للفديو source.src = src; // مسار الفديو video.controls = true; // عناصر التحكّم video.autoplay = true; // تشغيل تلقائي video.classList.add("video-js", "vjs-default-skin"); // الclass الخاصة بvideojs video.appendChild(source); // إضافة عنصر المصدر إلى الفديو player.innerHTML = ""; // إزالة جميع العناصر السّابقة player.appendChild(video); // إضافة الفديو إلى وثيقة html videojs(video) // إستخدام video.js } window.addEventListener("load", function () { // زر فتح فديو window.document.querySelector("button#play").addEventListener("click", function () { openFile(playVideo) }); }); }) (window, nwGui, Window); تصميم التطبيق بداخل مُستند html أضف مسار ملفّ css الافتراضي لـvideo.js الموجود داخل مجلد node_modules: ثم سنلغي شريط الأدوات الخاص بـnw بداخل ملف الحزمة (package.json) وبداخل العنصر window أضف ما يلي: “toolbar”: false من ثم سننشئ ملف تصميم src/style.css: html, body{ width: 100%; height: 100%; background: #ccc; direction: rtl; margin: 0 } /* زر التشغيل */ #play{ height: 25px; background: white; padding: 2px 20px; box-sizing: border-box; border: 1px #ccc solid } #play:hover{ box-shadow: inset 0 0 1px #333 } /* المُشغل */ #player{ background: black; width: 100%; height: calc(100% - 25px) } #player > .video-js{ width: 100% !important; height: 100% !important } إضافته من خلال مُستند html: كان من الأفضل استخدام قائمة النظام لعرض زر تشغيل الفيديو لكن nw لا تدعم الاتجاه من اليمين إلى اليسار بشكل كامل إلى الآن، لذا سنضيف السطر التالي إلى ملف الحزمة كي تظهر من اليمين إلى اليسار: “chromium-args”: “–lang=ar” بدلًا من ذلك سنقوم بإنشاء إطار مُخصص للنافذة لتبدو بشكلٍ أفضل في مختلف الأنظمة. تخصيص إطار النافذة بداخل ملف الحزمة (package.json) وبداخل عنصر window سنلغي الإطار الافتراضي: “frame”: false من ثم بداخل مستند html سنضيف أزرار النافذة في أول عنصر جسم الصفحة (body). سنضيف و نحذف بعض الخصائص من ملف src/style.css ليصبح شكل النافذة شبيه بنافذة نظام OS X: html, body{ width: 100%; height: 100%; background: #ccc; direction: rtl; margin: 0 } /* زر التشغيل */ #play{ -webkit-app-region: no-drag; height: 25px; background: white; padding: 2px 20px; box-sizing: border-box; border: 1px #ccc solid; position: absolute; right: 5px; top: 2px } #play:hover{ box-shadow: inset 0 0 1px #333 } /* المُشغل */ #player{ background: black; width: 100%; height: calc(100% - 25px) } #player > .video-js{ width: 100% !important; height: 100% !important } /* النافذة */ body{ box-sizing: border-box; border: #DDDDDC 5px solid } .window-toolbar{ -webkit-app-region: drag; background: -webkit-linear-gradient(#DDDDDC, #C2C2C2); height: 25px; direction: ltr; padding: 2px 5px; box-sizing: border-box } .window-toolbar > label.title{ position: absolute; left: 50%; transform: translate(-50%, 0) } .window-toolbar-button{ -webkit-app-region: no-drag; width: 12px; height: 12px; border-radius: 100%; display: inline-block; cursor: pointer; margin-right: 2px } .window-toolbar-button.close{ background: #FD4E4E } .window-toolbar-button.maximize{ background: #96D16F } .window-toolbar-button.minimize{ background: #F3BB55 } مُلاحظة: الخاصية webkit-app-region- المسؤولة عن جعل العنصر قابل للسحب والإفلات أيضًا يُمكن التحكّم بموقع النافذة من هذا العنصر لهذا استخدمناه في شريط أدوات النافذة لكن هذا العنصر لن يكون قابل للضغط أو المرور عليه لذلك يجب تعطيلها لعناصر التحكّم بداخله. لنكتب بعض الشيفرات بداخل ملفّ src/app.js لإضافة الحياة لشريط الأدوات. توفّر nw بعض التوابع للتحكم بالنافذة ما سنحتاجه للعمل: require(“nw.gui”).Window.get().close(); // إغلاق النافذة الحالية فقط require(“nw.gui”).App.quit(); // إغلاق التطبيق بجميع النوافذ require(“nw.gui”).Window.get().minimize(); // تصغير النافذة إلى شريط التطبيقات require(“nw.gui”).Window.get().maximize(); // ملء الشاشة بالنافذة require(“nw.gui”).Window.get().unmaximize(); // إرجاع النافذة أولًا زر الإغلاق: var nwGui = require(“nw.gui”); // زر إغلاق التطبيق window.document.querySelector(“.close”).addEventListener(“click”, function () { nwGui.App.quit(); }); ثانيًا زر إخفاء النافذة إلى شريط التطبيقات: var nwGui = require("nw.gui"), Window = nwGui.Window.get(); // زر تصغير النافذة إلى شريط التطبيقات window.document.querySelector(".minimize").addEventListener("click", function() { Window.minimize() }); زر ملء النافذة لكن أولًا سنضيف مراقب للحدثين maximize و unmaximize لمعرفة هل النافذة بكامل الحجم أو لا، حيث لا توفّر nw أيّة API لمعرفة ذلك: var nwGui = require(“nw.gui”), Window = nwGui.Window.get(), maximized = false; // مراقب للحدث maximize Window.on("maximize", function(){ maximized = true; }); // مراقب للحدث unmaximize Window.on("unmaximize", function(){ maximized = false; }); من خلال هذا وعند الضغط على زر الملئ إما أن تذهب النافذة لكامل الحجم أو تعود لحجمها الطبيعي: window.document.querySelector(“.maximize”).addEventListener(“click”, function () { maximized ? Window.unmaximize() : Window.maximize() }); يجب أن يكون كامل ملف src/app.js بهذا الشكل: "use strict"; global.document = window.document; global.navigator = window.navigator; var nwGui = require("nw.gui"), Window = nwGui.Window.get(); (function(window, nwGui, Window){ var maximized; // فتح ملف var openFile = function openFile (callback) { var input = document.createElement("input"); input.setAttribute("type", "file"); input.setAttribute("accept", ".mp4, .ogg, .ogv, .webm"); input.addEventListener("change", function () { // عند إختيار ملف callback("file://"+this.value); }); input.click() // فتح مُختار الملفات } // تشغيل فديو var playVideo = function playVideo (src) { var videojs = require("videojs"), ext = /[^.]+$/.exec(src)[0], // صيغة الملفّ video = document.createElement("video"), // عنصر الفديو source = document.createElement("source"), // عنصر المصدر للفديو player = document.querySelector("#player"); // عنصر المشغل في وثيقة html ext = (ext == "ogv") ? "ogg" : ext; // ملفات ogg قد تملك صيغة ogv source.type = "video/"+ext.toLowerCase(); // نوع mime للفديو source.src = src; // مسار الفديو video.controls = true; // عناصر التحكّم video.autoplay = true; // تشغيل تلقائي video.classList.add("video-js", "vjs-default-skin"); // الclass الخاصة بvideojs video.appendChild(source); // إضافة عنصر المصدر إلى الفديو player.innerHTML = ""; // إزالة جميع العناصر السّابقة player.appendChild(video); // إضافة الفديو إلى وثيقة html videojs(video) // إستخدام video.js } window.addEventListener("load", function () { // زر فتح فديو window.document.querySelector("button#play").addEventListener("click", function () { openFile(playVideo) }); // زر إغلاق التطبيق window.document.querySelector(".close").addEventListener("click", function () { nwGui.App.quit() }); // مراقب للحدث maximize Window.on("maximize", function(){ maximized = true; }); // مراقب للحدث unmaximize Window.on("unmaximize", function(){ maximized = false; }); // زر تصغير النافذة إلى شريط التطبيقات window.document.querySelector(".minimize").addEventListener("click", function() { Window.minimize() }); // زر الملء window.document.querySelector(".maximize").addEventListener("click", function () { maximized ? Window.unmaximize() : Window.maximize() }); }); }) (window, nwGui, Window); صورة للشكل النهائي: إن لم يظهر التطبيق بنفس الشكل فإليك ملفات التطبيق النهائية. بناء الملف التنفيذي لو أردنا إتباع الأسلوب التقليدي فنحن نحتاج إلى أنظمة التشغيل الثلاثة لبناء التطبيق في كل واحد منها على حدى، بدلًا من ذلك سنستخدم nwbuild لبناء التطبيق من خلال نظام تشغيل واحد إلى جميع أنظمة التشغيل. من مدير حزم npm قم بتركيب nwbuild : npm install nwbuild -g أنظمة التشغيل المتوفرة لـnwbuild: win32 # Windows 32bit win64 # Windows 64bit win # Windows 64bit مع 32bit osx32 # Mac OS 32bit osx64 # Mac OS 64bit osx # Mac OS 64bit مع 32bit linux32 # Linux 32bit linux64 # Linux 64bit linux # Linux 64bit مع 32bit ليعمل على أنظمة التشغيل الثلاث سنبنيه لـlinux ، osx64 و win32، اتّجه إلى مجلد التطبيق ونفّذ: nwbuild -p linux,osx64,win32 ./ سيعمل أولًا على تحميل ملفات البناء لأنظمة التشغيل من ثم بناء الملفات التنفيذية، ستلاحظ أن متوسط الحجم 50 ميغابايت للملفّ الواحد بسبب تضمين المتصفحات والملفات التشغيلية. التالي سيكون من الرائع تعلم react لبناء تطبيقات سطح مكتب رائعة باستخدام nw مع react. مصادر nw window nw App nw javascript contexts nw build هوامش 1 - كروميوم (Chromium) هو متصفح ويب مفتوح المصدر، يأخذ متصفح Google كروم الكود المصدري منه. المتصفحان يشتركان في أغلبية الشِفرة البرمجية والميزات، وإن كانت هناك بعض الاختلافات الطفيفة في ملامح كلا منهما وفي تراخيص الأستخدام أيضا. المصدر: ويكيبيديا.