تطبيقات الويب: الغوص في

  • إنشاء تطبيق ويب يعرض الصور ويشغل الأصوات
  • تعلم كيفية عمل رسوم بيانية للبيانات في Python باستخدام دفاتر Jupyter Notebooks
  • إنشاء تطبيق ويب للوحة بيانات باستخدام Streamlit

ستريمليت

يعد إنشاء تطبيق ويب باستخدام Streamlit و Python أمرًا بسيطًا ومباشرًا. مثل منصات البرمجة القائمة على الكتل، تتضمن منصة Streamlit العديد من المكونات والأدوات التي يمكن إضافتها إلى تطبيقك بسطر واحد من التعليمات البرمجية. معظم التعليمات البرمجية مكتوبة بالفعل ومجمّعة لك، لذا يمكنك التركيز على أهداف تطبيقك، بدلاً من التورط في الكثير من التعليمات البرمجية الصعبة. 

للتدرب على استخدام Streamlit، سنأخذ أحد أمثلة تطبيقات الجوال من Thunkable و App Inventor، ونوضح كيف يمكن بناء نفس التطبيق في شكل تطبيق ويب باستخدام Streamlit. 

النشاط 1: تطبيق لوحة الصوت

الوقت المقدر 30 دقيقة

برمجة تطبيق ويب Streamlit

  1. انقر فوق الزر أدناه لتنزيل الأصول (الصور والملفات الصوتية) التي ستكون مطلوبة لإنشاء التطبيق.
  2. اتبع واحد من مقاطع الفيديو هذه لإنشاء تطبيق Soundboard بسيط يقوم بتشغيل الأصوات عند الضغط على زر.
  3. أضف شخصاً رابعاً إلى تطبيقك. ابحث عن صورة وملف صوتي قصير لإضافته إلى التطبيق. إليك رابط لبعض الخطابات الشهيرة.
تنزيل ملفات الأصول

العمل مع البيانات

تعمل لغة بايثون بشكل جيد مع البيانات. تحتوي لغة بايثون على العديد من المكتبات المصممة خصيصًا للسماح للمبرمجين بقراءة البيانات ومعالجتها ورسمها. عند دمجها مع منصة Streamlit، يمكن للمبرمجين بسهولة إنشاء تطبيقات تحلل البيانات وتعرضها للمستخدمين. ويمكنك اتخاذ الخطوة التالية لدمج مجموعات البيانات ونماذج التعلم الآلي في التطبيق.

الرسوم البيانية للبيانات

يعمل معظم المبرمجين وعلماء البيانات مع البيانات في بايثون باستخدام برنامج يسمى دفاتر الملاحظات. واحدة من أكثر واجهات دفتر الملاحظات شيوعًا هي دفتر جوبيتر. وفقًا لنتائج استبيان Kaggle لعام 2022، فإن دفاتر Jupyter Notebook هي بيئة التطوير التفاعلية الأكثر شيوعًا في علم البيانات (IDE)، حيث يستخدمها أكثر من 80% من المشاركين في الاستبيان. 

يعمل Jupyter Notebook في متصفح، على الرغم من وجود واجهات أخرى. على سبيل المثال، يمكن أن يندمج مباشرةً في Visual Studio Code. 

يُطلق على المحرك الموجود خلف دفتر الملاحظات الذي يقوم بتشغيل الشيفرة البرمجية اسم النواة. بالنسبة لبايثون، ستستخدم نواة ipython kernel. 

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

يمكنك أيضًا تنفيذ كود بايثون مباشرةً في دفتر الملاحظات. 

لقطة شاشة دفتر ملاحظات جوبيتر لخلايا التعليمات البرمجية

على غرار دفتر الملاحظات المادي الذي قد تستخدمه في المدرسة، تُعد دفاتر Jupyter Notebooks طريقة رائعة لتدوين الملاحظات وتنظيم أفكارك بمشروع بيانات واستكشاف المعلومات. تسمح لك الميزة المضافة لتنفيذ التعليمات البرمجية بتجربة كود بايثون بطريقة منظمة ومنضبطة. 

تساعدك دفاتر Jupyter Notebooks على تخطيط واختبار جوانب مختلفة من تطبيق الويب الخاص بك قبل الانتقال إلى محرر التعليمات البرمجية المرئية لإنشاء التطبيق الفعلي.

مكتبات بايثون

هناك العديد من المكتبات التي ستحتاج إلى استخدامها في شفرتك لإنشاء تطبيق الويب الخاص بك. A مكتبة هي مجموعة من التعليمات البرمجية المكتوبة مسبقًا والتي تؤدي مهام معينة. تعد مكتبات البرمجة قوية جدًا وتعني أن تطبيقك يمكنه القيام بأشياء قوية ببضعة أسطر من التعليمات البرمجية. 

بالنسبة لبايثون، تتطلب معظم المكتبات أن تقوم بتثبيتها أولًا على حاسوبك، ثم في ملف البرنامج النصي لبايثون الخاص بك، ستقوم باستيراد المكتبات التي تحتاجها. 

مثال على المكتبات التي ستحتاجها لاستخدام البيانات هي numpy و pandas.

بانداس تطبيقك بالعمل بسهولة مع كميات كبيرة من البيانات. يضع البيانات في شيء يسمى إطار البيانات، ويعمل تطبيقك مع إطار البيانات. Numpy العديد من الدوال لإجراء عمليات عددية على البيانات في إطار البيانات.

بالإضافة إلى ذلك، هناك العديد من مكتبات التخطيط والرسوم البيانية التي تسمح للمستخدمين بتصور البيانات. مكتبات التصور الأكثر شيوعًا في بايثون هي matplotlib, plotlyو سيبورن

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

النشاط 2: لوحة البيانات

الوقت المقدر: 90 دقيقة

إنشاء تطبيق ويب Streamlit

بناءً على ما إذا كنت تقوم بالترميز على جهاز الكمبيوتر الخاص بك أو في السحابة، اتبع مجموعة الفيديوهات المناسبة.
  • على جهاز الكمبيوتر الخاص بك:
    1. اتبع هذا الفيديو(الجزء 1) لتثبيت وتشغيل دفتر ملاحظات Jupyter Notebook. انقر على الرابط أدناه لتنزيل ملف دفتر الملاحظات.
    2. تابع هذا الفيديو(الجزء 2) لإنشاء تطبيق لوحة البيانات باستخدام Streamlit.
  • في السحابة
    1. اتبع هذا الفيديو(الجزء 1) لتشغيل دفتر جوبيتر في Github Codespaces.
    2. تابع هذا الفيديو(الجزء 2) لإنشاء تطبيق لوحة معلومات البيانات باستخدام Streamlit.io.
حان دورك: أضف رسمًا بيانيًا آخر إلى لوحة بياناتك. يمكنك الاختيار من بين بعض الرسوم البيانية الأخرى من دفتر ملاحظات Jupyter الدفتري الأصلي، أو إنشاء رسم بياني/رسم بياني جديد في دفتر ملاحظات Jupyter، ثم دمج الكود في Streamlit لإضافته إلى لوحة المعلومات.
تنزيل دفتر الملاحظات

الانعكاس

تهانينا، لقد أنشأت تطبيقي ويب في Streamlit! اسأل نفسك هذه الأسئلة:

الانعكاس
هل واجهت أي مشاكل في تثبيت أو تشغيل Jupyter Notebook أو Streamlit؟
كيف تغلبت على المشكلات التي واجهتك عندما واجهتها؟
كيف يمكنك استخدام الأفكار الواردة في هذا الدرس في مشروعك؟

مراجعة المصطلحات الرئيسية

  • دفتر جوبيتر - بيئة تطوير تفاعلية شهيرة لعلوم البيانات للعمل مع البيانات من خلال ترميز بايثون
  • النواة - عملية تعمل وتعمل كمحرك وراء دفاتر Jupyter Notebooks
  • لغة تخفيض السعر - لغة تسمح لك بتنسيق النص بسهولة حتى يكون أكثر سهولة في القراءة
  • مكتبة - مجموعة من التعليمات البرمجية المكتوبة مسبقًا التي تؤدي مهام معينة

الموارد الإضافية

دفاتر ملاحظات جوبيتر

 

ستريمليت