تطبيق appinventor أين سيارتي؟

تطبيق Where's My Car

تعرفنا في تطبيق سابق كيفية إنشاء تطبيق خدمي مفيد، وذلك عن طريق منع الرسائل SMS أثناء القيادة، وسنتعرف اليوم على إنشاء تطبيق خدمي آخر يستخدم هذا التطبيق خرائط جوجل Google maps من خلال appinventor للتعرف على مكان وجود السيارة.


appinventor Where's My Car app


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

  • تحديد موقع جهاز الهاتف باستخدام مستشعر الموقع (LocationSensor).
  • تسجيل هذه بيانات المواقع الحالية في قاعدة بيانات باستخدام مكون (TinyDB ).
  • استخدام مكون عارض ويب (Web Viewer) لفتح خرائط جوجل من خلال التطبيق وعرض الاتجاهات من موقع لآخر.

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


تطبيق أين سيارتي



فكرة التطبيق

في أحيان كثيرة ينسى السائقون أماكن ركن سياراتهم، ويكثر ذلك في المدن والأماكن المزدحمة، يساعد هذا التطبيق مستخدميه على تذكر أماكن ركن سياراتهم، حيث يمكن المستخدم من حفظ مكان ركن السيارة في قاعدة بيانات التطبيق، عندما يقوم المستخدم بركن سيارته، وإذا نسي مكانها يضغط زر مخصص في التطبيق ليدله عليها ويساعده في الوصول إليها باستخدام خرائط جوجل (Google Maps).


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

  1. قم بإنشاء تطبيق جديد في آب إنفينتور، واعطه الاسم "Where's My Car?" .
  2. قم بإضافة مكونات التطبيق على الشاشة ليكون على الوضع التالي:
  3. قم بتغيير أسماء العناصر وخاصية الاسم لها كما يظهر في الشاشة السابق، وبالاستعانة بالجدول السابق.

appinventor design app


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

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

  • عرض الموقع الحالي في العناوين المخصصة له.
  • الاستجابة لحدث الضغط على زر (RememberButton) ليتم حفظ إحداثيات الموقع الحالي في قاعدة بيانات.
  • الاستجابة لحدث الضغط على زر (DirectionsButton) لتشغيل خرائط جوجل في عارض ويب للذهاب إلى موقع ركن السيارة.
  • تذكر موقع ركن السيارة وعرضه عند تشغيل التطبيق مرة أخرى.

عرض الموقع الحالي

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

لعمل ذلك نقوم بالانتقال إلى شاشة الكتل (Blocks ) وتحديد مكون مستشعر المكان (Location Sensor)، ثم نسحب مكون تغيير الموقع (Location Sensor.LocationChanged) إلى منطقة الكتل. ونضيف الكتل الموضحة في الشكل التالي إليه.


appinventor Location Sensor bloks


تقوم هذه الكتلة بقراءة العنوان الحالي عن طريق المستشعر، وتقوم بإظهاره في عناصر العنوان المخصص لذلك. وتغير حالة الزر (RememberButton) إلى ممكن (Enabled)، كي يمكن الضغط عليه.


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

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

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

3- شغل خاصية (GPS) على الهاتف، كي يظهر عنوان الموقع الحالي وإحداثياته على الهاتف.


appinventor app preview


حفظ الموقع الحالي

سنقوم فيما يلي بتفعيل ضغط المستخدم على زر (RememberButton) ليقوم بحفظ العنوان الحالي وإحداثياته في قاعدة بيانات التطبيق. ولعمل ذلك سنقوم بسحب كتلة النقر على زر (RememberButton.Click) إلى منطقة الكتل وسنخصصها كما بالشكل التالي:

appinventor Location Sensor bloks



حيث يتم إطهار عنوان وإحداثيات الموقع الحالي إلى عناوين تذكر الموقع الموجودة بعد زر (RememberButton) تمهيدا لتخزينها في قاعدة البيانات.


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

  1. اختر أمر (Al companion) من قائمة (Connect).
  2. وجه كاميرا الهاتف إلى الكود الذي سيظهر على الشاشة، واضغط زر (Scan QR) code) ليتم تشغيل التطبيق mit ai companion على الهاتف.
  3. شغل خاصية (GPS) على الهاتف، كي يظهر عنوان الموقع الحالي وإحداثياته على الهاتف.
  4. اضغط زر (Remember My Current Location) لتظهر العنوان الحالي والإحداثيات في عناوين التذكر التي توجد أسفل الزر.

appinventor app preview

--------------------
ترى ما الذي يمكن أن نطور من خلاله هذا التطبيق؟
أنتظر تعليقاتكم.

تعليقات



حجم الخط
+
16
-
تباعد السطور
+
2
-