كود التفعيل

98143536011731855534972617934112457148475336428348452135458731254559748582068942527458157502139574931324789133841251

اسرار تقنية: حول موقعك الى تطبيق هاتف وبرنامج على دسكتوب بسهولة


جيلنا هذا، الجيل الرقمي، ولدنا مع الطفرة الرقمية الأخيرة وأصبحت التكنولوجيا شيء أساسي بل شيء جذري في حياتنا اليومية. بسبب هذه الطفرة الالكترونية تأثرنا وحصلنا على أحد قدرات الحرباء؛ فكما يتكيف جلد الحرباء بالألوان المحيطة بها، أصبحنا نحن نتكيف مع التكنولوجيا والتقنيات الجديدة ونقوم بإدخال هذه التكنولوجيا في حياتنا اليومية! فصدقوني نحن محظوظين للعيش في هذا الوقت!
بعد هذه المقدمة، سآخذكم الآن الى رحلة صغيرة في هذا المقالة وسنتوجه الى أحد التقنيات الجديدة التي بإمكانها اعطائنا قدرات خارقة في المستقبل، وهي تقنية الـ رياكت (حرفيا تعني تفاعل).
REACT
التعريف النظري رياكت كما مذكور في الموقع الرسمي ان رياكت هى مكتبة جافا سكريبت لبناء واجهات المستخدم، تم تطويرها بواسطة فيس بوك وتم نشرها في ٢٠١٣.
رياكت تسمح لك بإنشاء واجهات المستخدم بسهولة كبيرة وتعطيك خصائص وفوائد تسهل عليك انشاء هذه الواجهات والتعديل عليها بسهولة كبيرة.
“A JavaScript Library for Building User Interfaces”
لا تقلق، ان لم تفهم مفهوم رياكت الآن فأنت على الطريق الصحيح! لأن رياكت تغير طريقة تفكيرنا تماما حول برمجة واجهات المستخدم.
ببساطة، تقنية رياكت لها ثلاثة فوائد أساسية وبسبب هذه الفوائد أحدث الشركات تحول وتعمل الآن على بناء تطبيقات ومشاريع كلها باستخدام رياكت.
فوائد رياكت

الفائدة الاولى: برمجة تعريفية
Declarative

البرمجة التعريفية تعبر عن منطق وهدف البرنامج بمجرد نظرك الى الاكواد؛ فالأكواد والشفرات نفسها تقوم بالتعبير عن هدف البرنامج بشكل بسيط. في البرمجة التعريفية تعبر الشفرات والأكواد التي تكتبها عن هدف البرنامج الذي سيتم إنجازه بصورة واضحة ومفهومة.
على عكس البرمجة التعريفية، فالبرمجة الأمرية على سبيل المثال تتطلب كتابة كل شيء سيتم عمله بالحرف والسطر الواحد، وتتطلب خوارزمية واضحة، مما يجعلها أصعب من البرمجة التعريفية.
أسهل الأمثلة التي يمكن إعطائها على البرمجة التعريفية والبرمجة الأمرية هي جافا سكريبت و أتش تي ام ال. فيمكننا قول ان جافا سكريبت هي لغة برمجة امرية، ولغة الاتش تي ام ال هي لغة تعريفية.
في المثال التالي سنقوم بإضافة صورة الى وسم الـ.Body
ومن ثم نقوم بتحديد ٣ خصائص: الطول، العرض والمصدر (اين تتواجد الصورة).
width = العرض
height = الطول
src = المصدر

JavaScript Imperative programming برمجة امرية

HTML Declarative programming برمجة تعريفية

فكما ترون ان البرمجة التعريفية سهلة للقراءة والفهم وغير ذلك فهي سهلة أيضا في الكتابة، على عكس البرمجة الامرية. لهذا السبب حصلت البرمجة التعريفية على شهرة وشعبية كبيرة خلال السنوات الأخيرة.
الآن بعض الاخوة الذين كانوا يقرأون المقال بتركيز، سيسألونني سؤال مهم: قلت لنا ان جافا سكريبت بشكل عام تعتبر لغة برمجة امرية، و رياكت هو مكتبة في جافا سكريبت، فكيف تقول ان رياكت يمكنك من البرمجة بطريقة تعريفية؟
وهنا هو الشيء الجميل حول رياكت، فباستخدام رياكت يمكنك كتابة رسوم اتش تي ام ال داخل ملفات الجافا سكريبت! نعم لقد سمعتني جيدا، رسوم الاتش تي ام ال يمكن كتابتها داخل ملفات رياكت.
مثال: نقوم بإنشاء مكون او كومبوننت التي تظهر رسالة ترحيبية.
.div ما يهمنا في هذا المثال هو الوسم الذي كتبته وهو

فكما ترون استطيع كتابة وسوم إتش تي ام ال داخل ملفات جافا سكريبت!
ولكن كيف يحدث هذا؟ رياكت تستخدم لغة الاكس ام ال (لغة الترميز القابلة للامتداد) وجافا سكريبت لتقوم بتحقيق هذا الشيء. كل ما علينا فعله هو اضافة ملفات الى مشروعنا ونجعل صيغة هذه الملفات:
jsx.
وستقوم رياكت بتحميل هذه الملفات وعمل كل شيء لنا في المتصفح.

الفائدة الثانية: رياكت مستندة على مكونات
Component-based

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

والشيء الجميل ان رياكت تتعامل مع هذه المكونات على حدى؛ فإن كان هناك شيء يجب تحديثه او تغيير محتواه، فتقوم رياكت بإعادة تحديث محتوى هذا المكون فقط وبدون اعادة تحميل صفحة الويب بشكل كامل.
بسبب هذه الخاصية رياكت تمنح موقعك سرعة خارقة في التحميل والقراءة، وتسهل عليك إضافة وتعديل محتوى الموقع لان كل شيء مقسم على شكل مكونات صغيرة. فحتى ان فكرت في تعديلات كبيرة في المستقبل يمكنك بكل بساطة إضافة المكونات التي تريدها وستقوم رياكت بعمل الباقي.
مثال: ان كنت تعمل في مستندات جوجل فإن كانت مستندات جوجل مبنية بالطريقة القديمة باستخدام بي اتش بي، فكل فعل وشيء تفعله (تغيير الخط، تغيير اللون، كتابة او إضافة كلام، ...) سيجعل الصفحة تعاد تحميلها، مما سيجعل العمل في مستندات جوجل شيء شبه المستحيل! ولكن لأن مستندات جوجل مبنية على تقنية مثل رياكت فكل شيء سيعمل بسلاسة ولن يعاد تحميل الصفحة مع ادنى تغيير تقوم به.

الفائدة الثالثة: تعلم رياكت مرة واحدة، استخدمه في كل مكان
Learn once, use everywhere

بعد هذا الشرح الطويل، جئنا الآن الى الجزء الذي فعلا يهمنا، الجزء الذي نريد تطبيقه واستخدامه في الواقع، الا وهو كيفية عمل موقع ويب ومن ثم تحويل هذا الموقع الى تطبيق ناتف Native على الهاتف وأيضا الى برنامج على سطح المكتب بنفس الاكواد مع إضافات بسيطة! سنبدأ الآن بشرح كيفية تحويل الموقع الى تطبيق، وهذا الشيء يتم بشيء اسمه رياكت ناتف React Native.

من المتصفح الى الهاتف
تحويل الموقع الى تطبيق: رياكت ناتف React Native

رياكت ناتف هو نفس رياكت العادي، كل الخصائص هي نفسها وكل الاكواد هي نفسها ولكن الفرق البسيط ان رياكت ناتف هو للهاتف. فباستخدام رياكت ناتف يمكنك بناء تطبيقات Native وليس مجرد تطبيقات ويب للجوال او تطبيقات هجينة. فكل تطبيق تقوم ببنائه هو تطبيق حقيقي يمكنك استخدام فيه آليات ومكونات الهاتف كأي تطبيق آخر (مثال: كاميرا الهاتف، البوم الصور، جهات الاتصال، الخ) ويمكنك نشره في متجر التطبيقات App store وعمل أيقونة له وكل شيء.
Build mobile apps with React
الشيء الجميل أيضا ان رياكت ناتف منفصل عن رياكت العادي، فإن كنت تريد استخدام رياكت ناتف لعمل تطبيقات فقط وليس تحويل موقعك فيمكنك عمل هذا بسهلة!
على سبيل المثال ان اردت ان تبني تطبيق للآي فون iPhone فبالوضع الطبيعي يمكنك عمل هذا عن طريق لغة برمجة Swift باستخدام برنامج XCode المتواجد في حواسيب أبل. الآن مع رياكت ناتف يمكنك فعل نفس الشيء باستخدام لغات برمجة الويب، ولا يمكنك تمييز الفرق بين التطبيق المبني مع رياكت ناتف والتطبيق المبني بلغة Swift. فتطبيق رياكت ناتف هو حقيقي مئة في المئة وتم بناء المئات من التطبيقات المشهورة باستخدام رياكت ناتف!
من يستخدم React Native؟
بالترتيب من اليسار الى اليمين:
Facebook, Facebook Ads Manager, Instagram, F8, Airbnb, Walmart, Tesla, Tencent QQ

بالترتيب من اليسار الى اليمين:
Baidu Mobile, Bloomberg, Vogue, li.st, Discord, Gyroscope, Townske

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

الآن سنأتي الى الفقرة التي نشرح فيها كيفية تحويل صفحة ويب الى برنامج على سطح المكتب للويندوز، ماك، ولينوكس، وكل هذا يحدث عن طريق شيء اسمه الكترون.
الكترون هو اطار عمل framework لبناء برامج ناتف باستخدام تقنيات الويب ك HTML, CSS, JavaScript جاعلك تركز فقط على هدف ومحتوى البرنامج. فباستخدام الكترون يمكنك ان تقوم ببناء برامج للويندوز، ماك او لينوكس بسهولة جدا! فكل ما عليك فعله هو انشاء البرنامج مرة واحدة وسيقوم الكترون بجعل هذا البرنامج يعمل على هذه الانظمة الثلاثة!

كيف يعمل الكترون؟
دعونا نبدأ بشرح عام: تطبيقات الويب تعتبر سهلة لان اغلب المستخدمين لديهم متصفح، والمتصفحات الحديثة تأتي بأدوات قوية للتصحيح. أيضا تعتمد تطبيقات الويب على لغات عبر منصة عالمية (HTML, CSS, JavaScript) التي مدعمة بمجتمع كبير والذي يوفر لك مكتبات مفيدة تستطيع ان تستغلها ك Bootstrap, React, Angular, JQuery.
ولكن حتى تطبيقات الويب لديها محددات وقيود، فيجب عليك ان تضع في عين الاعتبار الإصدارات المختلفة لكل أنواع المتصفح، فعمل تطبيق ويب لكل هذه الإصدارات يمكن ان يأخذ وقت طويل ويكون مزعج في التنفيذ. أيضا تطبيقات الويب تحد من تفاعلك مع ملفات النظام ويمكن ان تميل الى اتصال انترنت بطيء والذي يبطئ من الاداء بشكل كبير.
ماذا ان كنت تستطيع ان تستغل شهرة وانتشار تكنولوجيا الويب، والتجربة الام لبرامج الديسكتوب، وتنوع عبر منصة المتصفح ودمج كل هذه الايجابيات وتضع كل هذا في حزمة واحدة بدون أي قيود؟ هذا هو الكترون Electron!

يمكنك ان تنظر الى تطبيق الكترون بأنه متصفح مصغر مع القدرة على التعامل مع ملفات النظام بسهولة! فإنشاء تطبيق الكترون يعني انك تقوم بعمل هذا التطبيق مرة واحدة فقط، وسيعمل تطبيقك على ويندوز، ماك ولينوكس!
من يستخدم Electron؟

لرؤية المزيد: https://electron.atom.io/apps/

هل يوجد برنامج من هذه البرامج كنت تقوم باستخدامه ولم تعرف انه منشئ باستخدام الكترون؟ نعم. بالنسبة لي كنت استخدم برنامج الاتوم، ديسكورد وسلاك ولم اعرف انهم منشئين باستخدام الكترون!

البدأ في استخدام رياكت
React

يتطلب استخدام رياكت معرفة جيدة باللغات التالية: HTML, CSS, JavaScript. ستستفيد أيضا ان كنت تبرمج جافا سكريبت بطريقة ES6. لان ES6 لديها إيجابيات وخصائص جيدة وتعمل ES6 مع رياكت بشكل جيد جدا.
React Native and Electron
لكي تقوم باستخدام رياكت ناتف او الكترون يجب عليك ان تبدأ بلغات البرمجة السابقة التي ذكرناها. بعد ذلك يمكنك تعلم Node.JS.
بعد ان تتعلم النود جي اس يمكنك استخدام مكتبة اسمها create-react-native-app والتي تسهل العمل مع رياكت ناتف بشكل كبير!

تجربتي الشخصية مع رياكت ورياكت ناتف

احد مشاريع الجامعة تطلب مني ومن مجموعتي إيجاد حل لمتحف في مدينة Ghent البلجيكية وهو متحف للفنون الجميلة اسمه MSK. مشكلة هذا المتحف كانت بسيطة: وهو ان الأشخاص بين سن ٢٠ الى ٣٥ لا يزورون المتحف بشكل كبير لان لديهم الصورة ان المتحف ممل وكلاسيكي ولا يوجد شيء جميل فيه.
ففكرتنا انا ومجموعتنا ان نستغل أماكن التجمع التي تذهب اليها هذه الفئة العمرية (كافيه، منتزه، ...) ونقوم بنصب ديكور مماثل لأحدى الاعمال الفنية المعروضة في المتحف، أي ان هذا المكان يصبح كأحد الاماكن الموجودة في احد الاعمال الفنية. ومن ثم نقوم بوضع شاشة متفاعلة interactive screen في نفس المكان. والمطلوب من الزائرين ان يقوموا بتقليد هذا العمل الفني بأسلوبهم الشخصي وإنشاء عمل فني جديد مماثل للعمل الفني القديم. فيجب عليهم ان يضغطوا على زر في هذه الشاشة وستبدأ الكاميرا بالعد التنازلي ابتداء من ١٠ ثواني، وبعد التقاط الصورة ستظهر الصورة على الشاشة وسيكون لدى الزوار الخيار بإعادة اخذ الصورة او ارسالها والموافقة عليها. في حيل ارسال الصورة سيتم ارسالها الى الموقع وسيستطيع الزوار إيجاد صورهم وتصفح الصور الأخرى ويمكنهم نشر صورهم على الشبكات الاجتماعية مما يعطيهم الفرصة بربح جوائز في هذا المتحف.
احد متطلبات المشروع ان تقوم بعرض مشروعك وتطبيقه امام لجنة، ولأننا لم نملك شاشة تفاعلية interactive screen فكان يجب علينا ان نعمل مع آي باد iPad.
فكنا نحتاج الى انشاء تطبيق لهذا الآي باد الذي يقوم بأخذ الصور، اظهار معلومات عن العمل الفني، ارسال الصور الى الموقع، وضع timer او مؤقت للعد التنازلي وهكذا. ولأننا قمنا ببناء موقعنا الأصلي باستخدام رياكت، فقمنا أيضا بعمل هذا التطبيق باستخدام رياكت ناتف وكان من السهل ارسال المعلومات والصور بين التطبيق الموجود في هذا الآي باد والموقع المتواجد في السيرفر (اونلاين) وكان الربط بينهم شيء رائع!
كان الموضوع تحدي صراحة لان هذه كانت المرة الاولى التي نستخدم رياكت ناتف ولكن كان المشروع ناجح والحمد لله وكانت تجربة رائعة.
فرأيي الشخصي انني ادعم رياكت وبشدة واعتقد انه مع الوقت سيصبح هو المستقبل والمستخدم وبكثرة. فسهولة استخدامه والتعديل عليه ومرونته تجعله من التكنولوجيا التي ستغير طريقتنا في بناء المشاريع وستسهل على المطورين والمستثمرين انشاء تطبيقات ومواقع وبرامج تتصل وتعمل مع بعض بشكل سلس ومرن.
مصادر Sources

React
https://facebook.github.io/react/
React Native
https://facebook.github.io/react-native/
Electron
Digital Native (Wikipedia)
Declarative programming
Native apps vs Hybrid apps

الموضوع من طرف: El Omar Sami
ضمن مسابقة المحترف لأفضل تدوينة لسنة 2017

إرسال تعليق

اسفل التدوينة

اعلان اعلى تعليقات