التمرين - إنشاء تطبيق Python وصفحة الويب

مكتمل

في هذه الوحدة، سوف تستخدم إطار تطبيق الويب Flask لإنشاء تطبيق Python. كما ستقوم بإنشاء صفحة ويب يمكن لصندوق تطوير برمجيات الويب الخاص بـ Azure Maps استخدامها لعرض تطبيق الخريطة.

إنشاء التطبيق

لبناء التطبيق، أولاً، سنقوم بإنشاء مجلدات المشروع، وتكوين بيئة Python، وتثبيت حزم pip التي نحتاجها.

ثم سنقوم بإنشاء ملف البيئة وملف تطبيق Python.

وأخيراً، سنقوم بإنشاء ملف home.htm لإظهار النتائج.

إنشاء مجلدات لتطبيق Python

  1. على جهاز الكمبيوتر، قم بإنشاء مجلد لتخزين التعليمات البرمجية للتطبيق.

  2. افتح Visual Studio Code ثم افتح المجلد الذي قمت بإنشائه.

  3. في جذر مجلد التعليمات البرمجية للتطبيق الخاص بك، قم بإنشاء ملف تطبيق Python يسمى app.py.

    عند إنشاء ملف Python هذا، يقوم Visual Studio Code بتنشيط ملحق Python، لذا فهو جاهز لإنشاء تطبيق Python. ويمكنك مشاهدة تقدم عملية تنشيط الملحق في شريط المعلومات في الزاوية السفلية اليسرى من Visual Studio Code.

  4. في جذر مجلد التعليمات البرمجية للتطبيق الخاص بك، قم بإنشاء مجلد باسم Templates. سيحتفظ هذا المجلد بقوالب HTML التي سيستخدمها تطبيق Flask.

تكوين بيئة Python

  1. في Visual Studio Code، حدد «Terminal» > «New Terminal» لفتح terminal.

  2. في Terminal، أدخل الأمر التالي لإنشاء بيئة Python افتراضية.

    على Windows:

    python -m venv .venv
    

    على Linux أو macOS:

    python3 -m venv .venv
    

    يقوم هذا الأمر بإنشاء بيئة افتراضية داخل المجلد الحالي. ويتحقق Visual Studio Code من هذا التغيير ثم يطالبك بتحديد البيئة الافتراضية لهذا المجلد. حدد ⁧⁩Yes⁧⁩.

    لقطة شاشة تظهر المطالبة بتنشيط البيئة الافتراضية.

    ملاحظة

    إذا لم تشاهد مربع حوار يسألك ما إذا كنت تريد تحديد البيئة الافتراضية أم لا، فإنه يمكنك تحديد إصدار مترجم Python يدويًا. في شريط الحالة الخاص بـ Visual Studio Code في الزاوية السفلية اليسرى، حدد الإصدار Python. في الجزء العلوي من إطار Visual Studio Code، يتم فتح تحديد مترجم Python. حدد إصدار Python الموجود في المجلد ./.venv/bin/python.

  3. أغلق terminal عن طريق تحديد رمز سلة المهملات.

    زر إيقاف terminal.

  4. حدد «Terminal» > «New Terminal» لإعادة فتح Terminal في البيئة الافتراضية.

    عند تشغيل terminal في بيئة Python افتراضية، لاحظ أن المطالبة تظهر (.venv) كبادئة.

تثبيت حزم pip

يسمى مثبت الحزمة لـ Python pip. ويتطلب التطبيق الذي ستقوم بإنشائه حزم pip التالية:

  • flask: هذه الحزمة هي إطار عمل ويب لـ Python.
  • python-dotenv: تسمح هذه الحزمة بتحميل متغيرات البيئة مثل مفتاح Azure Maps من ملفات البيئة.
  • requests: هذه الحزمة تجعل من السهل تقديم طلبات الويب. سنستخدمها لاحقًا للاستعلام عن بيانات جودة الهواء.

أولاً، ستقوم بإنشاء ملف نصي يسرد حزم النقاط المطلوبة. ثم تقوم بتشغيل أمر يقوم بتثبيت الحزم المسرودة في الملف النصي.

  1. في Visual Studio Code، في جذر مجلد التعليمات البرمجية للتطبيق الخاص بك، قم بإنشاء ملف نصي جديد يسمى requirements.txt. انسخ التعليمات البرمجية التالية في الملف النصي:

    flask
    python-dotenv
    requests
    
  2. احفظ الملف.

    تلميح

    في Visual Studio Code، إذا كنت تريد حفظ الملفات بعد كل تغيير، حدد "File > Auto Save".

  3. في المحطة الطرفية، قم بتشغيل هذا الأمر لتثبيت حزم pip:

    pip install -r requirements.txt
    

    ملاحظة

    يمكنك تجاهل أي رسائل تحذير حول إصدار pip.

إنشاء ملف بيئة

سيحتاج تطبيق Flask الذي ستقوم بإنشائه إلى استخدام مفتاح Azure Maps لتحميل عنصر تحكم الخريطة على صفحة ويب. فيما تعد أفضل الممارسات عبارة عن تخزين بيانات مثل هذه البيانات في متغيرات البيئة بحيث لا يتم إيداع البيانات إلى عنصر التحكم بالتعليمات البرمجية المصدر. ويمكنك تعيين متغير بيئة إلى قيمة معينة عند تطوير التطبيق أو نشره. كما يستخدم Flask حزمة python-dotenv للبحث عن ملف يسمى .env في جذر مجلد التعليمات البرمجية للتطبيق الخاص بك ثم يقوم بتحميل متغيرات البيئة من هذا الملف.

تلميح

إذا قمت بنشر هذا التطبيق إلى Azure باستخدام خدمة Azure App، يجب إضافة القيم الموجودة في ملف .env إلى ملف إعدادات تطبيق بحيث يتم تعيين القيم تلقائياً كمتغيرات البيئة التي يمكن للتطبيق استخدامها.

لإنشاء ملف البيئة:

  1. في جذر مجلد التعليمات البرمجية للتطبيق الخاص بك، قم بإنشاء ملف بيئة جديد يسمى .env.

  2. انسخ العبارة التالية في ملف البيئة:

    MAP_KEY=<your map key>
    

    استبدل <your map key> بقيمة المفتاح الأساسي الذي قمت باسترداده بعد إنشاء حساب Azure Maps في الوحدة السابقة. لا تقم بتضمين علامات الاقتباس.

  3. احفظ الملف.

إنشاء ملف Python الخاص بالتطبيق

  1. في Visual Studio Code، في مجلد التعليمات البرمجية للتطبيق، افتح الملف app.py.

  2. انسخ التعليمات البرمجية التالية في ملف التطبيق:

    import os, json
    from flask import Flask, render_template, request
    import requests
    
    # Load the Azure Maps key from the .env file.
    MAP_KEY = os.environ["MAP_KEY"]
    
    # Initialize the Flask app.
    app = Flask(__name__)
    
    # Handle requests to the root of the website, returning the home page.
    @app.route("/")
    def home():
        # Create data for the home page to pass the Maps key.
        data = { "map_key" : MAP_KEY }
        # Return the rendered HTML page
        return render_template("home.html", data = data)
    

    تعالج هذه التعليمات البرمجية الطلبات إلى /، وهو جذر موقع الويب. عند تحميل صفحة الويب هذه، يستخدم التطبيق المفتاح من ملف .env لإنشاء البيانات. ويتم استخدام البيانات لعرض home.html كمعلمة مسمّاةdata.

  3. احفظ الملف.

إنشاء ملف home.html

  1. في Visual Studio Code، في مجلد Template قم بإنشاء ملف HTML جديد يسمى home.html.

  2. انسخ التعليمات البرمجية التالية في ملف HTML:

    <!doctype html>
    <html>
    <head>
        <title>Air quality tracker</title>
        <!-- Ensures that Internet Explorer and Microsoft Edge use the latest versions and that they don't emulate earlier versions. -->
        <meta http-equiv="x-ua-compatible" content="IE=Edge">
        <meta charset='utf-8'>
        <!-- Ensures that the webpage looks good on all screen sizes. -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Import the Azure Maps control. -->
        <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
        <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
        <style>
            html,
            body {
                margin: 0;
            }
            #myMap {
                height: 100vh;
                width: 100vw;
            }
        </style>
    </head>
    <body>
        <div id="myMap"></div>
        <script type="text/javascript">
            window.addEventListener("DOMContentLoaded", function () {
                // Pick a predefined location of the Microsoft headquarters.
                map_center = [-122.136866, 47.642472]
    
                // If the user grants permission when prompted, get the user's location.
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function (position) {
                        map_center = [position.coords.longitude, position.coords.latitude]
                    })
                }
    
                // Create an instance of the map control by using the map key from the Flask app.
                var map = new atlas.Map('myMap', {
                    authOptions: {
                        authType: 'subscriptionKey',
                        subscriptionKey: '{{ data.map_key }}'
                    }
                });
    
                // When the map is ready, center the map on the user's location.
                map.events.add('ready', function () {
                    map.setCamera({
                        center: map_center,
                        zoom: 5
                    })
                })
            })
        </script>
    </body>
    </html>
    

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

    ملاحظة

    تستخدم خرائط Azure خطوط الطول والعرض لإحداثيات الخريطة. حيث يقيس خط الطول الأرض من الشرق إلى الغرب عند 0 درجة عند خط الطول الرئيسي (خط يمتد من القطب الشمالي إلى القطب الجنوبي الذي يمر عبر المملكة المتحدة). ويتجه شرقًا إلى 180 درجة على الجانب الآخر من الكرة الأرضية، تقريبًا بين ألاسكا وروسيا، وغربًا إلى نفس المكان عند -180 درجة. ويتجه خط العرض من الشمال إلى الجنوب، مع القطب الشمالي عند 90 درجة، وخط الاستواء عند 0 درجة، والقطب الجنوبي عند -90 درجة.

    ثم يتم تحميل عنصر التحكم بالخريطة في العنصر div. تم يتم تعيين مفتاح Azure Maps إلى {{ data.map_key }}، وهو رمز Flask لعرض البيانات في ملف HTML. وعند إرجاع هذه الصفحة إلى مستعرض ويب الخاص بالمستخدم، يتم استبدال القيمة {{ data.map_key }} بقيمة المجموعة map_key في الكائن data. وقد تم تمرير هذا الكائن إلى الاستدعاء render_template في ملف app.py map_key ويتم تعيينه إلى المفتاح الأساسي لـ Azure Maps الذي يتم تحميله من ملف .env.

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

  3. احفظ الملف.

في هذه الوحدة، استخدمت Flask لإنشاء تطبيق Python. بعد ذلك، قمت بتشغيل التطبيق وعرضه في صفحة الويب الخاصة بك.