جولة افتراضية في باريس Paris Map Tour

سنقوم من خلال هذا التطبيق ببناء جولة افتراضية إلى معالم مدينة باريس من خلال mit appinventor، بالاعتماد على خرائط جوجل.

حيث يتم اختيار وجهة الجولة من القائمة، ليتم الانتقال إلى هذه الوجهة في عارض الويب، حيث يتم فتح هذه الوجهة في مشهد عرض الشوارع Street View في هذه اللحظة، ويتم استخدام خاصية الزووم في الهاتف للتفاعل مع هذه الوجهة، ويتطلب ذلك معرفة عناوين URL لبعض الوجهات السياحية حول العالم، ويمكن ذلك باستعراض خرائط جوجل.

 

تطبيق جولة افتراضية في باريس Paris Map Tour

الهدف من التطبيق:

• استخدام مكون عارض الويب (WebViewer) لعرض خرائط جوجل داخل التطبيق الخاص.
• استخدام المتغيرات (Variables) لتخزين بعض المعلومات الخاصة بالتطبيق.
• استخدام مكون القائمة (ListPicker) لتمكين المستخدمين من اختيار مكان الجولة من القائمة.

الأدوات المستخدمة في التطبيق:

• الأداة: Image
• الفئة: User Interface
  
• الاسم: Image1
  
• الوظيفة: عرض صورة ثابتة على الشاشة

خطوات التطبيق:

تصميم مكونات التطبيق:

1- قم بإضافة الصورة (metro.jpg) إلى التطبيق.

2- قم بإضافة مكون عنوان (Label) أسفل الصورة، وغير خاصية الاسم له على (Discover Paris with your Android).

3- قم بإضافة عنصر قائمة (ListPicker) أسفل العنوان واعطه الاسم (Choose Paris Destination).

4- قم بإضافة مكون عارض الويب (WebViewer) أسفل مكون بادئ الأنشطة.

تصبح شاشة التطبيق كما بالشكل التالي:

إضافة السلوكيات لمكونات التطبيق:

إنشاء قائمة أماكن الجولة:

1- انتقل إلى شاشة الكتل (Blocks)، وقم متغير تهيئة عام (initialize global to) إلى منطقة الكتل، وقم بتسمية هذا المتغير (Destinations).

2- انقر فئة كتل القوائم (Lists)، ثم اسحب كتلة إنشاء قائمة (make a list) داخل متغير التهيئة العام (initialize global to).

3- انقر زر النجمة الزرقاء داخل كتلة إنشاء القائمة، وقم بإضافة عنصر أخر (item) داخل القائمة.

4- انقر قائمة كتل النصوص (Text) ثم اسحب كتل نص فارغة وضعها في نهاية قائمة إنشاء القائمة (make a list)، واكتب أسماء أماكن الجولات في هذه الفراغات لتكون الكتلة على الشكل التالي:

إيجاد عناوين (URL) للوجهات:

• Tour Eiffel
• 
  
• Musée du Louvre
• 
  
• Cathédrale Notre Dame (street view)

تعريف عناوين (URL) للقائمة:

قمنا في متغير التهيئة العام بإنشاء قائمة الوجهات السياحية، وعلينا الآن ربط هذه الوجهات بعناوين (URL) الخاصة بها، بحيث إذا اختار المستخدم وجهة سياحية فيتم معرفة عنوان (URL)الخاص بها.

ولعمل ذلك نقوم بإنشاء متغير تهيئة عام جديد بالاسم (URLs) ونضيف إليه العناوين بنفس ترتيب الأسماء في متغير التهيئة (Destinations)، ليكون على النحو التالي:

تمكين المستخدم من اختيار وجهة:

تفعيل حدث اختيار الوجهة والذهاب إليها:

تقوم هذه الكتلة باستدعاء عنصر عارض الويب (call WebViewer1) في وضعية الانتقال إلى عنوان (URL) الذي يتم اختياره من متغير التهيئة العام (global URLs)، وفقا للعنصر المختار من القائمة (listPicker1).

تجريب التطبيق:

1- اختر أمر (Al companion) من قائمة (Connect).

2- وجه كاميرا الهاتف إلى الكود الذي سيظهر على الشاشة، واضغط زر (Scan QR) code) ليتم تشغيل التطبيق على الهاتف.

3- اختر وجهة من قائمة العناصر ليتم الانتقال إليها في عارض ويب.

الشكل الكامل لكتل التطبيق:

هذا هو الشكل العامل لكتل التطبيق.