افضل العاب الاندرويد بدون نت للعام 2024 | 20 لعبة لن تمل من لعبها

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

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

 

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

استخدام خرائط جوجل، تطبيق جولات في باريس (Paris Map Tour).

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

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

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

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

• الأداة: Label1
• الفئة: User Interface
  
• الاسم: Label1
• الوظيفة: يظهر النص " Discover Paris with your Android ".

• الأداة: ListPicker
• الفئة: User Interface
  
• الاسم: ListPicker1
• الوظيفة: يعرض قائمة تتضمن بعض الأماكن السياحية في باريس.

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

1- قم بإنشاء تطبيق جديد في آب اينفنتور، واعطه الاسم "ParisMapTour".

2- قم بتحميل ملف الصورة التالية، وقم بحفظها في مجلد خاص بهذا التطبيق على جهاز الحاسب:

• http://www.appinventor.org/bookFiles/MapTour/metro.jpg

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1- قم بفتح المستعرض على الكمبيوتر، وانتقل إلى العنوان (http://maps.google.com/).

2- ابحث عن العنوان (Eiffel Tower).

3- اعمل (Zoom) حتى تصل إلى وجهتك.

4- اعرض المشهد الذي تريده وليكن مشهد عرض الشارع (Street View).

5- انسخ عنوان (URL) لهذه الوجهة.

6- كرر الخطوات السابقة مع الوجهات الأخرى.

وبذلك نحصل على عناوينها كما كما يلي:

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

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

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

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

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

لكي نجعل عناصر القائمة متاحة للمستخدم في أي وقت فسنقوم باستدعاء متغير التهيئة العام (get global Destinations) داخل كتلة استدعاء عناصر القائمة (ListPicker1.Elements)، وذلك في حدث تهيئة الشاشة (Screen1.Initialize).

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

يعد أن يقوم المستخدم باختيار الوجهة التي تريد استعراضها من القائمة، يفترض أن يقوم عارض الويب بعرض هذه الوجهة داخل التطبيق، ولكي يتم ذلك سنقوم بإضافة كتلة (ListPicker1.AfterPicking) وضبطها كما بالشكل التالي:

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

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

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

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

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

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

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

رابط التطبيق بالمعرض appinventor download

حمل التطبيق من جوجل بلاي

تعديل المقال