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

  • 7 دقائق

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

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

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

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

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

إنشاء مجلدات لتطبيق 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 من هذا التغيير ثم يطالبك بتحديد البيئة الافتراضية لهذا المجلد. حدد نعم.

    Screenshot that shows the prompt to activate the virtual environment.

    إشعار

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

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

    The kill terminal button.

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

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

تثبيت حزم pip

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

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

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

  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 لتحميل عنصر تحكم الخريطة على صفحة ويب. فيما تعد أفضل الممارسات عبارة عن تخزين بيانات مثل هذه البيانات في متغيرات البيئة بحيث لا يتم إيداع البيانات إلى عنصر التحكم بالتعليمات البرمجية المصدر. ويمكنك تعيين متغير بيئة إلى قيمة معينة عند تطوير التطبيق أو نشره. كما يستخدم 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.pymap_key ويتم تعيينه إلى المفتاح الأساسي لـ Azure Maps الذي يتم تحميله من ملف .env.

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

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

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