برمجة الويب بالبايثون – Brython كبديل لـ Javascript

برمجة الويب بالبايثون، أحد المجالات التي تدعمها البايثون بقوة. عند بناء تطبیقات الویب، تتوفر عدة أطر قویة بالبايثون مثل Flask و Django و Pyramid. تتركز قوة الأطر السابقة بسهولة استخدام بایثون في برمجة الجانب الخاص بالخادم Back-End، ولكن لابد من تعلم لغات اخرى لبناء الجانب الخاص بالمستخدم Front-End، وهي Html, CSS, JavaScript.

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

برمجة الويب بالبايثون – أدوات برمجة الويب

تعمل Html على بناء الصفحات للمواقع بإدراج عناصرها الخاصة مثل الفقرات والترویسات وغیرها، وتقوم CSS بإضفاء الجانب الجمالي لعناصر Html مثل الألوان والظل والحركة. أما الجانب المنطقي والمیكانیكي فتقوم به JavaScript.

تعد لغة JavaScript  لغة واسعة الانتشار td جمیع المجالات وخصوصا الویب ولا غنى عنها أبدا بإنشاء الصفحات الدینامیكیة ولكنها لیست في نظرنا الخاص بسهولة بایثون، كما أنه یتوجب على مبرمجي البایثون قضاء وقت إضافي لتعلمها وتجربتها.

ماذا لو كان بالإمكان استخدام بایثون في المتصفح داخل ملفات Html ؟ ماذا لو كان بإمكان مطوري تطبیقات Django مثلا أن یستخدموا بایثون بدلا من JavaScript ؟ سیكون الوضع أجمل بكثیر ألیس كذلك ؟ الجواب هو برایثون Brython.

برمجة الويب بالبايثون – إطار Brython

Brython هي إطار خفیف، سهل ومفتوح المصدر لبناء جانب المستخدم Fron-End بحیث تحل محل جافا سكریبت ووظائفها بشكل ممتاز على الرغم من صغر حجمها وصغر المجتمع الداعم لها. تعد Brython جدیدة على الساحة ویعتبرها البعض إنها قد تكون أداة لا بأس بها لبرمجة صفحات الویب عوضا عن JavaScript .

تمكننا Brython  من التعامل مع أجزاء الصفحات والإضافة علیها والتعدیل علیها بشكل سهل كما في بایثون بشكل سهل وسلس. في هذا المقال سنقوم بعمل مشاریع بسیطة توضح العمل باستخدام Brython بحيث نستطيع استیعابها وتجربتها لاحقا إن أردنا في مشاریع وتطبیقات الویب الخاصة بنا.

فهیا بنا لنستكشفها ونبدأ ببرمجة صفحات الویب ببایثون – Brython.

برمجة الويب بالبايثون – الجانب العملي في Brython

للحصول على ملفات البدء وتوثیقات وشروحات Brython یمكننا أن نجدها في موقعها الرسمي: https://brython.info/index.htm

لنقم الآن بالتحري عن عناصر الصفحة والكود المكتوبة بة لنرى ماذا نجد!

لنقم بالضغط بالزر الأیمن للفأرة والمؤشر على الساعة الموجودة أمامنا في الصفحة الرئیسیة للموقع و نختار inspect:

  ثم اضغط على sources كما في الصورة:

إنه كود بایثون في صفحة Html مباشرة . ألیس هذا جمیلا ؟ طبعا و بشدة.

والآن لنقم ببعض التجهیزات البسیطة والتي ستساعدنا في كتابة صفحات ویب كأمثلة نستعرض بها Brython بشكل عملي.

سنستخدم هنا محرر نصوص VS Code المجاني من مایكروسوفت والذي یمكننا أن نجده في موقعه الرسمي : /https://code.visualstudio.com ونقوم بتثبیت بعض الإضافات علیه كما في الصور التالیة:

نُثبت Brython من خلال pip:

[pastacode lang=”bash” manual=”Pip3%20install%20brython” message=”” highlight=”” provider=”manual”/]

الآن أصبحنا جاهزین للعمل.

لنقم الآن بإنشاء مجلد خاص بالمشروع و ننشئ صفحة Html ولنسمیها index.html.

اضافة Brython في Html

الآن یمكننا تثبیت Brython بطریقتین، إما عن طریق تحمیل ملفاتها مباشرة في ملف مصغوط من هنا:
https://github.com/brython-dev/brython/releases/download/3.9.0/Brython-3.9.0.zip

ثم  نفك الضغط وندرج ملفي brython.js و brython_stdlib.js بنفس مكان صفحة الویب وهي index.html.

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

لفعل ذلك إذًا. نتجة إلى هنا: ​https://cdnjs.com/libraries/brython ونختار الملفین المشار لهما أعلاه مع ترویسات script كما بالصورة التالیة:

ثم نلصقها الواحدة تلو الأخرى في index.html داخل وسم head كما في الشكل:

[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%20lang%3D%22en%22%3E%0A%3Chead%3E%0A%20%20%20%3Cmeta%20charset%3D%22UTF-8%22%3E%0A%20%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1.0%22%3E%0A%20%20%20%3Ctitle%3EDocument%3C%2Ftitle%3E%0A%0A%20%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fbrython%2F3.9.0%2Fbrython.min.js%22%20integrity%3D%22sha512-6xoV9qvQHPMnIFWzWrRwuq25qpgJ8FiGKekJ%2B7Bstb8%2F4XRC98k2c49IpdUVc5QitMNHKWPcFjFUkDxdIjJ7Nw%3D%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%0A%20%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fbrython%2F3.9.0%2Fbrython_stdlib.min.js%22%20integrity%3D%22sha512-QbMgbJbXnZv0V%2F%2Bjpdd68nkyOrYwP%2FUsJAH%2FTGQmVHgwwrxI7QNKzRn3dKuG3kG%2FlVWHx5hYXBISk7zX86TInw%3D%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A%0A” message=”” highlight=”” provider=”manual”/]

نضيف في ترويسة <body> الأولى دالة onload والتي سنجعلها تشير إلى دالة ()brython عند البدء بتحميل الصفحة من قبل المتصفح:

[pastacode lang=”markup” manual=”%3Cbody%20onload%3D%22brython()%22%3E%0A%20%20%0A%3C%2Fbody%3E%0A” message=”” highlight=”” provider=”manual”/]

و من ثم نضيف ترويسة سكريبت ونعين فيه نص لغة البرمجة التي نريد برمجة الصفحة بها وهي بايثون كما في المكان والشكل التالي:

[pastacode lang=”markup” manual=”%3Cbody%20onload%3D%22brython()%22%3E%0A%20%20%20%3Cscript%20type%3D%22text%2Fpython%22%3E%0A%20%20%0A%20%20%20%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A” message=”” highlight=”” provider=”manual”/]

والآن لنقم بكتابة اسطر Brython بين ترويسات <script> ليكون شكل البرنامج كما يلي:

[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%20lang%3D%22en%22%3E%0A%3Chead%3E%0A%20%20%20%3Cmeta%20charset%3D%22UTF-8%22%3E%0A%20%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1.0%22%3E%0A%20%20%20%3Ctitle%3EDocument%3C%2Ftitle%3E%0A%0A%20%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fbrython%2F3.9.0%2Fbrython.min.js%22%20integrity%3D%22sha512-6xoV9qvQHPMnIFWzWrRwuq25qpgJ8FiGKekJ%2B7Bstb8%2F4XRC98k2c49IpdUVc5QitMNHKWPcFjFUkDxdIjJ7Nw%3D%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%0A%20%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fbrython%2F3.9.0%2Fbrython_stdlib.min.js%22%20integrity%3D%22sha512-QbMgbJbXnZv0V%2F%2Bjpdd68nkyOrYwP%2FUsJAH%2FTGQmVHgwwrxI7QNKzRn3dKuG3kG%2FlVWHx5hYXBISk7zX86TInw%3D%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%20onload%3D%22brython()%22%3E%0A%20%20%20%3Cscript%20type%3D%22text%2Fpython%22%3E%0A%20%20%20from%20browser%20import%20document%0A%20%20%20document%20%3C%3D%20%22Hello%20Pythonat%22%0A%0A%20%20%20%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A” message=”” highlight=”” provider=”manual”/]

لنشرح ما قمنا به هنا:

[pastacode lang=”python” manual=”from%20browser%20import%20document” message=”” highlight=”” provider=”manual”/]

قمنا باستيراد دالة document من مكتبة browser والتي من خلالها سنتمكن من عرض نصوص في شاشة المتصفح:

[pastacode lang=”python” manual=”%20document%20%3C%3D%20%22Hello%20Pythonat%22″ message=”” highlight=”” provider=”manual”/]

و من ثم، قمنا بتغذية الدالة document بالنص “Hello Pythonat” عن طريق => علي الرغم من من أننا سنكتب أكواد بايثون إلا ان عدد من الدوال تم تصميمها بشكل شبيه إلى حد ما لطريقة كتابة الشيفرة البرمجية بـ JavaScript.

نقوم بتفعيل إضافة live server من داخل برنامج vscode لتشغيل خادم خفيف، حتى نستعرض النتائج على المتصفح:

رائع …

إظهار Alert باستخدام Brython

لنقم بعمل شيء آخر، لنعدل على البرنامج كما يلي:

[pastacode lang=”markup” manual=”%3Cbody%20onload%3D%22brython()%22%3E%0A%20%20%20%3Cscript%20type%3D%22text%2Fpython%22%3E%0A%20%20%20from%20browser%20import%20document%2Calert%0A%20%20%20document%20%3C%3D%20%22Hello%20Pythonat%22%0A%0A%20%20%20alert(%22%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%20%D8%A8%D9%83%20%D9%81%D9%8A%20%D8%A8%D8%A7%D9%8A%D8%AB%D9%88%D9%86%D8%A7%D8%AA%22)%0A%0A%20%20%20%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A” message=”” highlight=”” provider=”manual”/]

قمنا باستيراد دالة alert والتي ستقوم بدورها بإظهار تنبيه فيه أي رسالة نختارها للمستخدم:

تعديل عناصر الصفحة

والآن لنقم ببناء دالة بايثون تقوم بالتعديل على احد عناصر الصفحة.  لننشيء صفحة Html جديدة ولنكتب الكود التالي:

[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%20lang%3D%22en%22%3E%0A%3Chead%3E%0A%20%20%20%3Cmeta%20charset%3D%22UTF-8%22%3E%0A%20%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20initial-scale%3D1.0%22%3E%0A%20%20%20%3Ctitle%3EDocument%3C%2Ftitle%3E%0A%0A%20%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fbrython%2F3.9.0%2Fbrython.min.js%22%20integrity%3D%22sha512-6xoV9qvQHPMnIFWzWrRwuq25qpgJ8FiGKekJ%2B7Bstb8%2F4XRC98k2c49IpdUVc5QitMNHKWPcFjFUkDxdIjJ7Nw%3D%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%0A%20%20%20%3Cscript%20src%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fbrython%2F3.9.0%2Fbrython_stdlib.min.js%22%20integrity%3D%22sha512-QbMgbJbXnZv0V%2F%2Bjpdd68nkyOrYwP%2FUsJAH%2FTGQmVHgwwrxI7QNKzRn3dKuG3kG%2FlVWHx5hYXBISk7zX86TInw%3D%3D%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E%0A%3C%2Fhead%3E%0A%3Cbody%20onload%3D%22brython()%22%3E%0A%0A%3Ch1%20id%3D%22ONE%22%3E%3C%2Fh1%3E%0A%3Cbutton%20id%3D%22bt1%22%3EBUTTON%3C%2Fbutton%3E%0A%20%20%20%3Cscript%20type%3D%22text%2Fpython%22%3E%0A%20%20%20from%20browser%20import%20document%2Calert%0A%0A%20%20%20def%20modify(e)%3A%0A%20%20%20%20%20%20%20document%5B%22ONE%22%5D%20%3C%3D%20%22you%20clicked%20me%22%0A%0A%20%20%20document%5B%22bt1%22%5D.bind(%22click%22%2Cmodify)%0A%20%20%20%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A” message=”” highlight=”” provider=”manual”/]

نلاحظ أننا قمنا بكتابة رز ترويسة button واعطيناها “id =”bt1.  قمنا بكتابة دالة modify والتي هي عبارة عن دالة بايثون، وبداخلها تمكنا للوصول للـ id الذي هو ONE، و وظيفتة هذه الدالة هي إضافة النص you clicked me داخل ترويسة h1 كلما تم استدعاؤها.

[pastacode lang=”python” manual=”document%5B%22bt1%22%5D.bind(%22click%22%2Cmodify)” message=”” highlight=”” provider=”manual”/]

في السطر أعلاه،  امكننا تغذية id  بـ document والتي من خلال استدعاء دالة الربط bind بالحدث “النقر” “click” بحيث يقوم بتشغيل و استدعاء الدالة modify، أي اننا كلما ضغطنا على الزر سنضيف  النص الموجود بالداله في ترويسة h1:

[pastacode lang=”python” manual=”def%20modify(e)%3A%0A%20%20%20%20%20%20%20document%5B%22ONE%22%5D%20%3C%3D%20%22you%20clicked%20me%22%0A” message=”” highlight=”” provider=”manual”/]

لاحظ المعامل e  وهو عبارة عن الحدث event  والذي في مثالنا يساوي click. يمكننا أن نعرف المزيد عن هذا الكائن بطباعة ما يحتويه كما يلي بعد استدعاء مكتبة console واستخدام الدالة log لتطبع لنا محتويات الحدث e في تبويبة console في المتصفح:

[pastacode lang=”markup” manual=”%3Cscript%20type%3D%22text%2Fpython%22%3E%0A%20%20%20from%20browser%20import%20document%2Calert%D8%8C%20console%0A%0A%20%20%20def%20modify(e)%3A%0A%20%20%20%20%20%20%20document%5B%22ONE%22%5D%20%3C%3D%20%22you%20clicked%20me%22%0A%20%20%20%20%20%20%20console.log(e)%0A%0A%20%20%20document%5B%22bt1%22%5D.bind(%22click%22%2Cmodify)%0A%20%20%20%3C%2Fscript%3E%0A” message=”” highlight=”” provider=”manual”/]

جميل جدا، والآن قم بتعديل البرنامج ليكون كما يلي :

[pastacode lang=”markup” manual=”%3Ch1%20id%3D%22ONE%22%3E%3C%2Fh1%3E%0A%0A%3Cinput%20type%3D%22text%22%20id%3D%22text-input%22%20placeholder%3D%22type%20anything%22%3E%0A%3Ch3%20id%3D%22THREE%22%3E%3C%2Fh3%3E%0A%0A%3Cbutton%20id%3D%22bt1%22%3EBUTTON%3C%2Fbutton%3E%0A%0A%3C!–%20first%20snippet%20–%3E%0A%20%20%20%3Cscript%20type%3D%22text%2Fpython%22%3E%0A%20%20%20from%20browser%20import%20document%2Calert%2Cconsole%0A%0A%20%20%20def%20modify(e)%3A%0A%20%20%20%20%20%20%20document%5B%22ONE%22%5D%20%3C%3D%20%22you%20clicked%20me%22%0A%20%20%20%20%20%20%20console.log(e)%0A%20%20%20%20%0A%0A%20%20%20document%5B%22bt1%22%5D.bind(%22click%22%2Cmodify)%0A%20%20%20%3C%2Fscript%3E%0A%20%20%0A%20%20%20%3C!–%20second%20snippet%20–%3E%0A%20%20%20%3Cscript%20type%3D%22text%2Fpython%22%20id%3D%22prog2%22%3E%0A%20%20%20%20%20%20%20from%20browser%20import%20document%0A%0A%20%20%20%20%20%20%20def%20text_out(e)%3A%0A%20%20%20%20%20%20%20%20%20%20%20document%5B%22THREE%22%5D.textContent%20%3D%20e.target.value%0A%0A%0A%20%20%20%20%20%20%20document%5B%22text-input%22%5D.bind(%22input%22%2Ctext_out)%0A%20%20%20%20%20%20%20%3C%2Fscript%3E%0A” message=”” highlight=”” provider=”manual”/]

في الدالة text_out قام الكائن document بالوصول للـ id الذي قيمته THREE و بدورنا استدعينا دالة textContent لتحول ما يتم تغذيتها به إلى نص صرف لتعرضه في الترويسة THREE.نلاحظ أيضا أن من خلال الحدث “e”  توصلنا للقيم التي يتم إدخالها من قبل المستخدم في الترويسة input من خلال ما تحتويه فيه e.target.value:

و في الختام نقول أن إطار Brython وإن كان يُعد بسيطا وصغيرا ، إلا أنه ممتع و سهل وقوي ويمكن من خلاله إنجاز مهام عدة تقوم بها جافا سكريبت ولكن بنص بايثون. Brython فعلا تستحق التجربة لبناء و برمجة واجهات لتطبيقات ويب أكثر شمولية وتعقيدا. يمكننا أن نستخدمها في تطبيقات Django مثلا بنجاح لبناء واجهة لمدونة صغيرة به أو قائمة أعمال بسيطة على الويب.

و ما هذه إلا البداية.