📁 مقالات متنوعة

تطوير تطبيق الإكسيليفون (Xylophone app) في اب انفنتور

Xylophone app logo

سنتعرف من خلال هذا التطبيق كيفية استخدام الأصوات والتحكم بها.


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


  • استخدام مكون صوت واحد (Sound) لتشغيل ملفات صوت متنوعة.
  • استخدام مكون الساعة (Clock) لقياس التأخير بين الإجراءات وفرضه.
  • إنشاء إجراء (Procedure) يستدعي نفسه.
  • استخدام القوائم بشكل متقدم، بإضافة العناصر، والوصول إليها، ومسحها.


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


الأداة
الفئة
الاسم
الوظيفة
Button
User Interface
Button1
عزف نغمة C
Button
User Interface
Button2
عزف نغمة D
Button
User Interface
Button3
عزف نغمة E
Button
User Interface
Button4
عزف نغمة F
Button
User Interface
Button5
عزف نغمة G
Button
User Interface
Button6
عزف نغمة A
Button
User Interface
Button7
عزف نغمة B
Button
User Interface
Button8
عزف نغمة C
Sound
Media
Sound1
يعزف النغمة المختارة.


فكرة التطبيق


نقوم من خلال هذا التطبيق بعزف ثمان نغمات موسيقية مختلفة عن طريق لمس الأزرار المخصصة لكل منها في التطبيق. وسنقوم كذلك بتخصيص زر العزف (Play) الذي يقوم بإعادة الموسيقى التي تم عزفها مؤخرا، وسنخصص زر آخر (Reset) لمسح النوتة المحفوظة من الذاكرة، وبالتالي يمكن حفظ معزوفة جديدة
خطوات التطبيق:
1- قم بإنشاء تطبيق جديد في آب اينفنتور، واعطه الاسم (Xylophone).
2- قم بتحميل ملفات الصوت التي ستستخدم في التطبيق من المسارات التالية، واحتفظ بها في مجلد جديد مخصص باسم التطبيق.


http://www.appinventor.org/apps2/Xylophone/Media/1.wav

http://www.appinventor.org/apps2/Xylophone/Media/2.wav

http://www.appinventor.org/apps2/Xylophone/Media/3.wav

http://www.appinventor.org/apps2/Xylophone/Media/4.wav

http://www.appinventor.org/apps2/Xylophone/Media/5.wav

http://www.appinventor.org/apps2/Xylophone/Media/6.wav

http://www.appinventor.org/apps2/Xylophone/Media/7.wav

http://www.appinventor.org/apps2/Xylophone/Media/8.wav

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


1- قم بإضافة ثمانية أزرار على شاشة التطبيق أسفل بعضها البعض، وقم بضبط خاصية العرض (width) لكل زر على (Fill Pattern)، وخاصية الطول على (40) بكسل.

2- قم بتغيير أسماء الأزرار لتكون على الترتيب (C, D, E, F, G, A, B, C).
غير خاصية لون الخلفية (Background color) لكل زر ليكون لون كل زر مختلف على الآخر.

3- قم بإضافة مكون ترتيب أفقي (HorizontalArrangement) في آخر الشاشة، وقم بإضافة زرين به بجوار بعضهما البعض، وغير خاصية النص للأول إلى (Play)، وغير اسمه إلى (PlayButton)، واجعل اسم الثاني (ResetButton)، وغير خاصية النص له إلى (Reset).

4- قم بإضافة عنصر صوت (Sound) إلى التطبيق، وقم بضبط خاصية الفاصل الزمني (MinimumInterval) له على (0).

5- قم بإضافة ساعة (Clock) إلى التطبيق، والغ تنشيط خاصية التمكين الخاصة به (TimerEnabled).

6- انقر زر تحميل ملف (Upload File) الموجود أسفل لوح المكونات المضافة للتطبيق، ثم (Components) ثم قم بإضافة ملفات الصوت الثمانية التي قمت سابقا بالحصول عليها، واحدا تلو الآخر لتصبح محملة مع التطبيق.
بعد الانتهاء من إضافة العناصر ستصبح شاشة التطبيق على النحو التالي:





شاشة التطبيق



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


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


تخصيص نغمات العزف للأزرار


1- انتقل إلى شاشة الكتل (Blocks)، ثم قم بإنشاء إجراء جديد بالاسم (PlayNote)، واضف له معامل (paramater) واحد، بالاسم (number).

2- انقر مكون الصوت (Sound1) في لوح الكتل، ثم اسحب إجراء مصدر الصوت (Sound1.Source) داخل الإجراء الجديد.

3- انقر كتلة النصوص (text) ثم اسحب مكون الدمج (join) وضعه في نهاية إجراء مصدر الصوت، ثم ضع مؤشر الماوس على معامل الرقم (number) للإجراء، واسحب متغير الحصول على الرقم (get number) وضعه كعنصر أول في جملة (join)، ثم اسحب كتلة نص فارغة، وضعه في العنصر الثاني واضف النص (.wav) بها.

4- حدد مكون الصوت (sound1) ثم اسحب إجراء عزف الصوت (call Sound1.Play) في نهاية الإجراء. لتصبح الكتلة على الشكل التالي.
 

تخصيص كتل التطبيق


تقوم هذه الكتلة بتخصيص إجراء جديد بالاسم (PlayNote) تقوم باستدعاء الصوت من مكون الصوت (Sound1) الذي كون مصدره أي من الملفات الثمانية المحملة بالتطبيق.


5- حدد الزر الأول (Button1)، اسحب كتلة حدث الضغط على الزر (Button1.click) إلى منطقة الكتل، ثم اسحب الإجراء (call PlayNote) من كتلة الإجراءات، وضعه داخل الزر. ثم أضف كتلة فارغة من كتل الحساب، وادخل بها الرقم (1).



تخصيص كتل التطبيق



وبذلك يتم تخصيص الزر الأول لعزف الملف (1.wav)، لأنه عندما يتم الضغط على هذا الزر يتم استدعاء إجراء (PlayNote) بمعامل الرقم (Number =1) فيتم تعيين مصدر الصوت لمكون الصوت (Sound1.Source) ليكون (1.wav).

6- كرر الإجراء السابق مع الأزرار السابعة الأخرى، بتغيير الرقم المخصص لكل زر على الترتيب لتصبح كتل الأزرار على الشكل التالي.

 
تخصيص كتل التطبيق



تحميل ملفات الصوت في التطبيق:

يتوجب علينا تحميل ملفات الصوت الثمانية عندما يتم تشغيل التطبيق لأنه كما رأينا لم يتم تحديد مصدر لمكون الصوت (Sound1) بشكل افتراضي، وتركناه فارغا عند تصميم التطبيق. ولكي يتم تحميل ملفات الصوت في التطبيق عند تشغيله سنستخدم حدث تهيئة الشاشة (Screen1.Initialize) ونحدد به مصادر عنصر الصوت (Sound1.Source)، ليكون على النحو التالي.

تخصيص كتل التطبيق



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

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



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

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


كتل التطبيق


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


كود التطبيق



Ahmed Shahen | E-learning Expert
Ahmed Shahen | E-learning Expert
تعليقات