إنشاء تطبيقات باستخدام "منصة خرائط Google" والذكاء الاصطناعي

1. مقدمة

نظرة عامة

من أين تبدأ عملية إنشاء التطبيقات باستخدام الذكاء الاصطناعي اليوم؟ تبدأ العملية بشرارة: فكرة تستحق إنشاء نموذج أولي لها. يساعدك وضع الإنشاء في Google AI Studio على تحويل هذه الأفكار إلى واقع من خلال "البرمجة الوصفية". من خلال الاستفادة من نماذج Gemini، يمكنك تصميم تطبيقات ويب متكاملة واختبارها ونشرها بالكامل من خلال إنشاء رموز برمجية حوارية.

في هذا الدرس التطبيقي حول الترميز، ستنشئ Block Explorer، وهي لعبة تفاعلية للبيانات الجغرافية المكانية تجمع بين بيانات الخرائط الواقعية والذكاء الاصطناعي التوليدي. ستستخدم AI Studio لإنشاء التطبيق ودمجه مع منصة خرائط Google وGemini API. بعد ذلك، ستتعرّف على كيفية نشر التطبيق المكتمل مباشرةً على Cloud Run، ما يتيح للآخرين تجربته.

الإجراءات التي ستنفذّها

  • استخدِم Google AI Studio لإنشاء نموذج أوّلي لتطبيق ويب تفاعلي يعرض خرائط جغرافية مكانية ويتضمّن أسئلة تافهة.
  • تفعيل مفتاح تجريبي لمنصة "خرائط Google" وتوفيره تلقائيًا مباشرةً من داخل مساحة عمل AI Studio
  • يمكنك تنفيذ الترميز الجغرافي الديناميكي للعناوين، واكتشاف الأماكن، وإنشاء اختبارات معلومات عامة من إنشاء الذكاء الاصطناعي باستخدام طلبات بلغة طبيعية.
  • تحسين دقة اختبار المعلومات العامة من خلال دمج Maps Grounding Lite
  • اختبار التطبيق وتكراره في وضع الحماية الخاص بالمعاينة التفاعلية
  • انشر التطبيق على Cloud Run مباشرةً من واجهة مستخدم Google AI Studio.

أهداف الدورة التعليمية

  • كيفية استخدام "وضع الإنشاء" في Google AI Studio لإنشاء نموذج أوّلي سريع لخدمة ذات حزمة كاملة باستخدام اللغة الطبيعية
  • كيفية استخدام واجهات برمجة التطبيقات في "منصّة خرائط Google" لإنشاء تطبيقات تتضمّن بيانات جغرافية مكانية
  • كيفية ربط طلبات النماذج اللغوية الكبيرة بالسياق الجغرافي المكاني الواقعي لإنشاء اختبارات ديناميكية وإحصاءات محلية
  • كيفية نشر تطبيق AI Studio كحاوية بدون خادم على Cloud Run

في ما يلي معاينة لسياسة الخصوصية:

مثال على التطبيق النهائي

2. إعداد مشروعك

قبل إطلاق AI Studio، تحقَّق من حالة حسابك والمتطلبات الأساسية وإمكانية الوصول إلى واجهة برمجة التطبيقات.

معلومات حساب Google ومستوى الاشتراك

  1. إذا لم يكن لديك حساب Google، يمكنك إنشاء حساب Google.
    • ملاحظة: استخدِم حساب Google شخصيًا لهذا المختبر إذا أمكن ذلك. قد تفرض حسابات المجموعات أو الشركات أو المؤسسات التعليمية سياسات تؤدي إلى إيقاف الميزات التجريبية أو عمليات الدمج مع الخدمات السحابية.
  2. راجِع تفاصيل الفوترة الخاصة عمليات النشر:
    • Google Cloud Starter Tier: تتيح نشر ما يصل إلى تطبيقَين كاملَين في منطقة محدّدة بدون أي تكلفة، وبدون إنشاء حساب فوترة كامل على Google Cloud.
    • عملية النشر العادية: يتم الربط بمشروع حالي مدفوع على Google Cloud وتوسيع حدود مساحة التخزين وموارد وحدة المعالجة المركزية وواجهات برمجة التطبيقات.

Google Maps Platform Demo Key

لتبسيط عملية إنشاء النماذج الأولية، يتكامل Google AI Studio مع منصة خرائط Google. توفّر هذه الميزة طريقة سلسة لاختبار واجهات برمجة التطبيقات الأساسية في "منصة خرائط Google" (مثل Maps JavaScript API وGeocoding API وPlaces API وRoutes API) وإنشاء تطبيقات باستخدامها مباشرةً في مشروعك. سينشئ AI Studio تلقائيًا مفتاحًا تجريبيًا لمنصة خرائط Google.

المزايا الرئيسية لمفتاح العرض التوضيحي:

  • لا يلزم توفير بطاقة ائتمان أو إعداد الفوترة: يمكنك إنشاء نماذج أولية وتقييمها على الفور بدون إعداد حساب فوترة على Google Cloud.
  • حصة كبيرة من Prototyping API: تتضمّن ما يصل إلى 100 طلب مجاني في اليوم لكل واجهة برمجة تطبيقات للاختبار والتكرار.
  • تكامل سلس مضمّن: لا تحتاج إلى الانتقال إلى بوابات خارجية أو نسخ بيانات الاعتماد ولصقها. يرصد Google AI Studio تلقائيًا متى يحتاج تطبيقك إلى الدمج مع "منصة خرائط Google" ويضبط الإعدادات نيابةً عنك.

3- إنشاء Application Shell في "وضع الإنشاء" في AI Studio

ستبدأ بإنشاء هيكل التطبيق باستخدام Google AI Studio.

  1. انتقِل إلى لوحة تطبيقات Google AI Studio وانقر على تطبيق جديد (أو اختَر علامة التبويب إنشاء).
  2. في مربّع إدخال الطلب، أدخِل الوصف الأوّلي لتطبيقك الجغرافي المكاني. يمكنك أيضًا النقر على شريحة البحث منصة خرائط Google ضمن اقتراحات الطلبات:
Build a highly polished, responsive, split-screen application. This application should be called "Block Explorer". It is meant to be a geospatial exploration app. It will use Google Maps Platform.

Key Features & Functionality:

-   Split-Screen Layout: On desktop, a 1/3-width left-side editorial control panel and a 2/3-width right-side full-height map.
-   Include a search bar where users can type a location such as a city or neighborhood. Submitting should issue a Geocoding request to the Google Geocoding V4 API REST endpoint (https://geocode.googleapis.com/v4/geocode/address/). Then pan the map to the geocoded location.
-   Interactive Google Map: Render the Map inside an interactive container allowing users to pan, drag, and zoom freely. Place customized markers representing the currently selected/geocoded location.
-   Also include five buttons for presets the users can click on: Buenos Aires, Shibuya, Copacabana, Cologne, and Lima. Clicking on this should geocode the location and pan the map there.
-   Make sure to also include a mechanism to clearly show error messages when they occur so users can easily troubleshoot.
  1. انقر على إنشاء لبدء عملية إنشاء التطبيق.

سيبدأ AI Studio في إنشاء الرمز البرمجي للتطبيق. إذا طُلب منك اختيار مظهر تصميم، اختَر أي نمط تفضّله.

تفعيل "منصة خرائط Google" وتوفير مفتاح تجريبي

توفّر "منصة خرائط Google" Geocoding API التي تحوّل طلبات البحث عن العناوين القابلة للقراءة (مثل "شيبويا" أو "بوينس آيرس") إلى إحداثيات جغرافية (خطوط الطول والعرض) لتوسيط الخرائط وعرض العلامات.

عند إرسال طلب يتضمّن نية جغرافية مكانية (مثل طلب "خرائط Google" أو أداة تحديد مواقع المتاجر أو استكشاف الأماكن المحلية)، يرصد AI Studio تلقائيًا متطلبات البيانات الجغرافية المكانية ويساعد في توفير المفاتيح الأساسية:

  1. ستارة التفعيل داخل السياق: تظهر بطاقة مضمّنة بعنوان "إعداد منصة خرائط Google" في دورة المحادثة.
  2. قبول الأحكام والشروط وتفعيل الميزة:
    • راجِع بنود خدمة "المشروع التجريبي لخرائط Google" واقبلها (وبنود الخدمة الإضافية الخاصة بـ Starter Tier إذا طُلب منك ذلك).
    • انقر على تفعيل "خرائط Google".
  3. توفير المفاتيح وحقن الأسرار آليًا: يوفّر AI Studio تلقائيًا مفتاحًا تجريبيًا لمنصة خرائط Google على بنية Google Hosted Project (GHP) الأساسية ويحقنه مباشرةً في أسرار مشروعك تحت الاسم GOOGLE_MAPS_PLATFORM_KEY.
  4. المعاينة المباشرة الفورية: يتم على الفور إعادة تحميل بيئة الاختبار المعزولة لمعاينة التطبيق باستخدام "خريطة Google" تفاعلية مباشرة تعمل بكامل وظائفها.

تفعيل إمكانية الدمج مع منصة خرائط Google

اختبِر التطبيق في بيئة الاختبار المعزولة للمعاينة من خلال إدخال موقع جغرافي جديد أو اختيار أحد أزرار المواقع الجغرافية المحدّدة مسبقًا.

4. إضافة "إحصاءات محلية" باستخدام Gemini API

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

  1. أرسِل الطلب التالي إلى المساعد المستنِد إلى الذكاء الاصطناعي في نافذة المحادثة:
Now, let's bring in the AI using the Gemini API.
1.  Once geocoding successfully identifies the City and State (e.g., "Miami, Florida"), trigger a call to the Gemini API (using the gemini-3.8-flash model).
2.  Use the following prompt template for the AI:
   "You are a local tour guide for [City, State]. Give me exactly 3 short, highly engaging, and unusual or surprising fun facts about this place. Keep each fact under 2 sentences. Format the response as a clean HTML unordered list (<ul>) so I can inject it directly."
3.  Display these fun facts in a beautiful "Local Insights" banner on the bottom portion of the map screen. Add a subtle loading spinner while the AI is thinking.
4.  Make sure to make this handling robust. If an API request fails, display a user-friendly error notification in the UI.
  1. تأكَّد في لوحة المعاينة من أنّ اختيار موقع جغرافي أو البحث عنه يعرض معلومات مرحة ديناميكية من إنشاء Gemini.

من المفترض أن يحدّث AI Studio التطبيق، ما يؤدي إلى إضافة قسم "إحصاءات محلية" في أسفل الشاشة.

تمّت إضافة قسم &quot;الإحصاءات المحلية&quot; إلى أسفل الخريطة

5- إنشاء اختبار المعلومات العامة من إنشاء الذكاء الاصطناعي

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

  1. أرسِل طلب إنشاء الاختبار إلى الوكيل:
Now let's build the actual game! We will have Gemini generate a 3-question quiz based on the real places we just got information about.

After the local insights are generated, show the user a button to "Test their local knowledge". Once clicked, offer them 3 options to choose from:
-   Local cuisine
-   Art and culture
-   Local history

Once selected, generate a 3-question quiz based on the category and the place. The quiz should be multiple choice. Once the user submits the quiz show them their score and the correct answer.
  1. شغِّل الاختبار الذي تم إنشاؤه في نافذة المعاينة لاختبار إدارة الحالة واختيار الإجابات وعرض النتائج.

6. دمج Maps Grounding Lite

تلقائيًا، ينشئ Gemini الحقائق والاختبارات القصيرة باستخدام المعرفة من بيانات التدريب. لتحسين الدقة والاستفادة من البيانات المكانية في الوقت الفعلي، يمكنك دمج Maps Grounding Lite. تربط هذه الخدمة Gemini بالبيانات المباشرة من "منصة خرائط Google".

  1. أرسِل الطلب التالي في AI Studio:
Add a toggle to make the quiz more difficult. Call this "Hyperlocal mode". When enabled, use the Google Maps Grounding Lite service with the Gemini API to fetch more local data, making the quiz more difficult.

Add information for the user so they know that Hyperlocal Mode is more difficult and how it works.
  1. اختبِر زر التبديل الوضع المحلي الفائق في نافذة المعاينة للتأكّد من إنشاء اختبارات مستندة إلى معلومات موثوقة.

يمكن أن تُنتج النماذج اللغوية الكبيرة معلومات غير صحيحة حول ساعات عمل أنشطة تجارية معيّنة أو عمليات افتتاح حديثة أو معرّفات أماكن دقيقة. تستند الإجابات في Maps Grounding Lite إلى كيانات "أماكن" حقيقية من "خرائط Google" وإلى مصادرها، ما يحسّن بشكل كبير من دقة المعلومات في أسئلة المعلومات العامة.

7. النشر على Cloud Run

بعد أن يصبح النموذج الأولي يعمل بكامل طاقته، يمكنك نشره كحاوية عامة بدون خادم على Cloud Run مباشرةً من AI Studio.

  1. في أعلى يسار صفحة Google AI Studio، انقر على الزر نشر لبدء معالج النشر.موقع زر &quot;النشر&quot; في Google AI Studio
  2. انقر على البدء لإعداد مشروعك على Google Cloud.
    • تأكَّد من أنّ القائمة المنسدلة مشروع Google Cloud المستهدَف تتطابق مع مشروع النشر المقصود.
    • ستنشئ أداة AI Studio تلقائيًا معرّف خدمة فريدًا لمثيل Cloud Run.
  3. انقر على نشر التطبيق.
  4. سيتم تنفيذ إنشاء الحاوية وتسجيلها ونشر الخدمة في الخلفية. تكتمل هذه العملية عادةً في غضون 2 إلى 4 دقائق.
  5. عند انتهاء عملية النشر، انسخ عنوان URL داخل التطبيق الذي تم إنشاؤه وانتقِل إلى رابط التطبيق المنشور في علامة تبويب المتصفّح.

8. مراجعة أفضل ممارسات الأمان والإنتاج

عند نقل هذا التطبيق من نموذج أوّلي إلى بيئة تشغيل فعلية، يُرجى مراعاة أسس الأمان التالية:

1. القيود المفروضة على مفتاح Google Maps API

يجب عدم ترك مفاتيح واجهة برمجة التطبيقات الخاصة بـ "خرائط Google" في مرحلة الإنتاج بدون قيود. في Google Cloud Console:

  • قيود واجهة برمجة التطبيقات: يمكنك فرض قيود على المفتاح لكي يتمكّن من طلب بيانات من واجهات برمجة تطبيقات معيّنة فقط (مثل Maps JavaScript API وGeocoding API وPlaces API).
  • قيود التطبيق: يمكنك فرض قيود على المفتاح باستخدام عناوين HTTP المُحيلة (مثل https://yourgame.com/*) لمنع الاستخدام غير المصرّح به على المواقع الإلكترونية التابعة لجهات خارجية.

2. تأمين مفتاح Gemini API

يجب عدم عرض مفتاح Gemini API في JavaScript من جهة العميل.

  • بنية الإنتاج: أنشئ خدمة خلفية خفيفة الوزن (مثل Cloud Run أو Cloud Functions) لتعمل كخادم وكيل. تُرسِل الواجهة الأمامية طلبًا إلى الواجهة الخلفية (/api/get-fun-facts)، وتتواصل الواجهة الخلفية بأمان مع Google AI Studio باستخدام متغيّر بيئة (GEMINI_API_KEY).

9. تنظيف الموارد

لتجنُّب أي رسوم فوترة غير متوقّعة أو لإزالة موارد مساحة العمل، اتّبِع الخطوات التالية:

  1. في Google AI Studio، انتقِل إلى صفحة "التطبيقات".
  2. ابحث عن تطبيقك في الشبكة أو القائمة.
  3. انقر على رمز المهملات لحذف حالة التطبيق وإلغاء نشر الخدمة من Cloud Run.
  4. إذا تم النشر باستخدام مشروع عادي وأردت إيقاف جميع الموارد بالكامل، انتقِل إلى إعدادات المشروع في Google Cloud Console واحذف المشروع الأساسي.

10. الخاتمة

تهانينا! لقد صمّمت وطوّرت ونشرت تطبيق ويب جغرافيًا مكانيًا مستندًا إلى الذكاء الاصطناعي من Google AI Studio. لقد استخدمت بنجاح واجهات برمجة تطبيقات منصة خرائط Google لإنشاء لعبة تفاعلية تستند إلى بيانات من العالم الحقيقي.

انتقِل إلى هذا الرابط للمطالبة بشارة رحلة بناء التطبيقات المكتملة.

لمواصلة رحلتك، انتقِل إلى goo.gle/builders لتجربة المختبر التالي.

مزيد من المعلومات