دليل المدون

2014-10-23

أساسيات تصميم تطبيقات أندرويد ببرنامج App inventor

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

من أسهل طرق إنشاء تطبيق أندرويد للمبتدئين هو إستخدام برنامج أو منصة App inventor الذى يعتمد على سحب وإفلات الأدوات وقطع تحتوى على أكواد برمجية فيمكن من خلاله تصميم أى فكرة تطبيق فى دقائق دون سابق خبرة بالبرمجة.
app inventor icon
تستطيع متابعة شروحات ودروس مفصلة للمبتدئين والمحترفين على الموقع الرسمى للبرنامج MIT App Inventor ولكنى سأعرض فى هذا الموضوع ملخص عن كيفية التعامل معه.

إقرأ أيضًا: 

انشاء تطبيق القرآن الكريم للاندرويد

 أفضل 5 مواقع لإنشاء تطبيق أندرويد اون لاين


كيفية التعامل مع App inventor

1. الإشتراك بموقع برنامج App inventor أو تنصيب البرنامج

يمكن العمل مباشرة على موقع البرنامج أون لاين من خلال متصفح الإنترنت (Chrome or Firefox) أون لاين وذلك يتطلب التسجيل بحساب Gmail على هذا الرابط
أو
تنصيب البرنامج والعمل عليه دون الحاجة للإتصال بالإنترنت ويتم ذلك بتحميل البرنامج من الموقع الرسمى حسب نظام التشغيل الخاص بحاسوبك سواء كان ويندوز ، لينكس أو ماك.
قبل تسطيب البرنامج لابد أن تتأكد أن جهازك مجهز ببيئة  Java و يمكن التأكد من ذلك من خلال Oracle site وإن لم يكن مجهز بهذه البيئة يمكن التعرف على اى اصدار مناسب لنظام التشغيل الخاص بك وتثبيته.

2.بدء إنشاء مشروع جديد

 وذلك بفتح قائمة " project " ثم إختيار "start new project"
بعد ذلك قم بإختيار إسم مناسب للتطبيق باللغة الإنجليزية ثم إضغط ok
 

3.شرح واجهة التصميم Designer

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

app-inventor

4. شرح واجهة البرمجة Blocks

من مميزات هذا البرنامج أنه لا يحتاج إلى كتابة أكواد برمجية إنما يعتمد على  تركيب قطع أو أجزاء "Blocks" مثل البازل لإعطاء أوامر البرمجة لكل جزء من التطبيق.
app-inventor

ولمعرفة وظيفة كل جزء من هذه الأجزاء البرمجية فموقع البرنامج موفر شرح كامل لكل جزء وكيفية التعامل معه من خلال App Inventor Language Block

5.كيفية معاينة التطبيق

يمكن معاينة التطبيق بثلاث طرق:
الطريقة الأولى :المعاينة على جهاز الأندرويد مباشرة إذا كان لديك جهاز يعمل بنظام أندرويد وإنترنت Wifi
قم بتثبيت تطبيق MIT AI2 Companion على الهاتف الأندرويد
لابد أن يكون هناك إتصال بالإنترنت لكل من الكمبيوتر والهاتف
إفتح قائمة connect بالبرنامج وإختر  Al companion
ثم عن طريق كاميرا الهاتف قم بعمل Scan QR code ثم connect with code حتى يعمل التطبيق على الهاتف
app-inventor

الطريقة الثانية: وهى مناسبة لمستخدمى برنامج App inventor بدون إنترنت wifi و لكن يمكن معاينة التطبيق على هاتف الأندرويد من خلال USB
إفتح قائمة connect بالبرنامج وإختر USB

الطريقة الثالثة: إذا لم يكن لديك جهاز أندرويد و كنت تريد معاينة التطبيق على جهاز الكمبيوتر فيمكن ذلك عن طريق Emulator وهو عبارة عن هاتف إفتراضى يعمل بنظام الأندرويد على جهاز الكمبيوتر
إفتح قائمة connect بالبرنامج وإختر Emulator
android

6. حفظ العمل وتحميله

بعد أن أتممت عمل التطبيق لا يبقى سوى حفظه وتحميله ليكون جاهز للإستخدام ويكون كالآتى:
حفظ التطبيق:  Project  >> save project
تحميل التطبيق :( Build  >> App ( save.apk to my computer

اندرويد

7.الدروس المتاحة على موقع البرنامج

يوفر موقع البرنامج على هذا الرابط  Tutorials for App Inventor  العديد من الدروس لأمثلة التطبيقات المشروحة بالفيديو أو بالصور التى تناسب المبتدئين والمحترفين وهى أفضل وسيلة للتعرف أكثر على أدوات البرنامج.
يمكن أيضًا مع كل درس تحميل التطبيق وتجربته على الهاتف كما أن الموقع يوفر قالب لكل تطبيق يمكن تحميله على جهازك وإستيراده إلى البرنامج  والتعديل عليه.
 

8.استيراد القوالب الجاهزة

الإستعانة بالقوالب الجاهزة تتيح لك تعرف أكثر على التعامل مع الأدوات و يكون إستيراد القوالب للبرنامج كالآتى:
تطبيقات اندرويد
فى النهاية: هذا ليس كل شئ عن هذا البرنامج الرائع ولكن يمكنكم إكتشافه من خلال تعاملكم معه أو معرفة المزيد من خلال موقعه appinventor
تعرف أيضًا: على كيفية إنشاء تطبيق بسيط مكون من صفحتين

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
تصميم مواقع إلكترونية و تطبيقات بأقل الأسعار

هناك 49 تعليقًا

  1. شكرا لك
    المنصة ممتازة للالعاب
    اكواد كثيرة

    ردحذف
  2. أخي أنت قلت :
    Project >> save project
    تحميل التطبيق :( Build >> App ( save.apk to my computer

    هذه الطريقة غير صحيحة ولم أجدها في الصفحة .

    ردحذف
  3. @ br123r br123r
    شكرا متابعتك

    @ الرجل الذهبي
    توجد كلمة Build فى أعلى الصفحة فى البرنامج أون لاين وسأحاول الأيام القادمة تقديم دروس فيديو لتوضيح أكثر
    شكرا متابعتك

    ردحذف
  4. هل يمكن اضافة اعلانات مثل Admob

    ردحذف
  5. @ Abir Abdullah
    بالتأكيد يمكن إضافة الإعلانات
    شكرا جزيلا لمتابعتك

    ردحذف
  6. كيف ذلك ؟ وجدت اضافة اعلانات من اماكن اخرى ولكن انا اريد Admob

    ردحذف
  7. @ Abir Abdullah
    على هذا الرابط كيفية إضافة إعلانات Admob على تطبيقات App inventor
    http://sourceforge.net/projects/ailivecomplete/

    ردحذف
  8. ممكن اعرف ازاي اجعل لو شخص ضغط علي مثلا الصفحة التابية يحوله ﻷصفحة التالية اي ربط screen 1 ب screen 2 مثلا و كمان لو عايز انزل فيديو او صوت او صورة ايه الامتدادات المناسبة لهم و شكرا ارجو الرد بسرعة ......... ^_^

    ردحذف
  9. @ ATM.EN.BE
    إنشاء تطبيق مكون من صفحتين على هذا الرابط
    http://www.condaianllkhir.com/2015/01/multiscreen-app-inventor.html
    بالنسبة لإمتدادات الصور Jpeg ، الصوت Mp3 ، الفيديو Avi
    وشكرا للمتابعة

    ردحذف
  10. يستحق التجربة
    بارك الله فيك

    ردحذف
  11. السلام عليكم
    أريد اصمم برنامج أولاين
    كيف

    ردحذف
  12. برجاء مساعدتي كيف استفيد من التطبيق بعد ذلك واربح منه وهل يوجد نصيحه عن كيفية ايجاد مبرمج ثقه لعمل تطبيقات وبرامج لا يسرق مني افكار هنا في مصر لاني لاعرف شيئا عن البرمجه واود كثيرا وضع افكار بهذا المجال...... شكرا

    ردحذف
  13. @ Saif. Sad
    يمكن ذلك بإستخدام منصة Appinventor على الإنترنت مباشرة ..شكرا لمتابعتك

    @ Alya Hammouda
    الآن أصبحت برمجة التطبيقات لاتحتاج إلى خبرة بمجال البرمجة خصوصًا بإستخدام منصة Appinventor فيمكن بمتابعة بعض الدروس إنشاء تطبيقك الخاص بسهولة
    يمكن الربح من تطبيقات الأندرويد من خلال الإعلانات مثل Admob أو إنشاء تطبيق مدفوع غير مجانى
    وأتمنى لك التوفيق

    ردحذف
  14. اولا اشكرك علي الشرح الاكثر من رائع
    ولكن انا لا اعلم كيفية اضافة اعلان admob علي التطبيق
    ودخلت علي هذا الرابط
    http://sourceforge.net/projects/ailivecomplete/
    ولكن بكل اسف لم افهم
    اتمني ان توضح اكثر

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

    ردحذف
  16. @ 7azl2om
    سأحاول توضيح ذلك بمقالة قادمة بإذن الله

    @ محمود المحروقي
    يمكن طرح الإستفسارات من خلال التعليقات على الموضوع فقط
    شكرا لمتابعتكم

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

    ردحذف
  18. السلام عليكم
    كيف يمكن اضافة rss الموقع للتطبيق باستخدام app invetor حتى يظهر جديد الموقع للمستخدم
    ارجو الرد ضرورى

    ردحذف
  19. @ Elzaeem Ahmed
    يمكن ذلك بإستخدام أداة web viewer من ادوات App inventor
    يمكن أيضًا الإستعانة بــ مواقع لإنشاء تطبيق أندرويد اون لاين

    ردحذف
  20. انا نزلت الرنامج ولما افتحو بعطيني هاي الرساله
    وهذا رابط الصوره بس ايش هي المشكله وشكراا
    http://imageshack.com/a/img661/7717/rQ3nNS.jpg

    ردحذف
  21. السلام عليكم
    اخي العزيز بعد التحية

    انا اريد ان اشترية لعبة اندرويد هل ممكن ؟؟

    ردحذف
  22. @ osama ateyyat
    إن وجدت مشكلة بتنصيب البرنامج يمكنك العمل على المنصة من خلال المتصفح مباشرة

    ردحذف
  23. ممكن رابط البرنامج محتاجه بشدة

    ردحذف
  24. @ Unknown
    يمكن تحميل البرنامج من خلال الموقع الرسمى أو العمل على المنصة من خلال المتصفح مباشرة وشكرا لمتابعتك

    ردحذف
  25. حياك الله
    من خلال تفحصي للرابط الخاص بالادب موب تبين لي ان اضافة اداة اد موب ليست مجانية وانما جد مكلفة حسب السعر الذي وضعه المبرمج , وعليه تبقى هذه المنصة غير مجدية لنا : التفاصيل https://docs.google.com/document/d/1_dG1GYRhBSgNQV2m-b3ZwC0uZYRTrsJZk78MIP9n9y0/edit#

    شكرا على الشروحات القيمة

    ردحذف
  26. كيف الربط بين الاندرويد وصفحة ويب

    ردحذف
    الردود
    1. يمكن ذلك من خلال منصة Appinventor عن طريق أداة Webviewer الموجودة بالبرنامج
      يمكن ذلك أيضًا بإستخدام أحد منصات التى شرحتها بهذا الموضوع
      مواقع لإنشاء تطبيق أندرويد

      حذف
  27. جزاك الله خيرا وبعد اذنك عندى استفسار ..ازاى ممكن اضيف روابط feed rss من app inventor وكمان لما ينزل موضوع جديد يعطى اشعار صوتى..بس لو ينفع طريقة عمل الكود وشكله

    ردحذف
    الردود
    1. يمكن إضافة رابط التغذية لأداة web viewer بالبرنامج app inventor كما يمكن اضافة اشعارات صوتية للموضوعات الجديدة بإستخدام هذه الخدمة pushcrew.comويمكنك متابعة هذه الموضوعات :
      كيف ترسل إشعارات لزوار موقعك على الموبايل
      فكرة إنشاء تطبيق لموقع أو مكتبة روابط للأندرويد

      حذف
  28. جزاكِ الله خيرا..لكن انا اعرف ان اضافة RSS عن طريق web view لكن مش عارف الطريقة لكتابة الكود لانى جربت وفشلت...ولى سؤأل اخر اذا سمحتِ انا عملت تطبيق وضعت فيه رابط صفحة موقع واشتغلت الحمد لله لكن عاوز احفظ الصفحة ف التطبيق بحيث اقدر مجرد انى اتصفحها بدون انترنت

    ردحذف
    الردود
    1. أعتقد أنه من الصعب تصفح الموقع بدون إنترنت فى الآب إنفنتور إلا إذا حفظته على هيئة PDF أما بالنسبة للكود فيمكن إستبدال رابط الموقع برابط RSS فى Web view

      حذف
  29. شكرا على الشرح
    هل بلمكان صنع لعبة من البرنامج أم لا

    ردحذف
    الردود
    1. ممكن صنع لعبة بسيطة..شكرا لمرورك

      حذف
  30. السلام عليكم
    اريد معرفة كيف يتم تنفيذ برنامج في الموقع ( uppercut ) لمشاهدة النتيجة

    ردحذف
  31. شكراً لكم على البرنامج الرائع

    ردحذف
  32. السلام عليكم
    كيف أضيف صوت ما للتطبيق لأني جربت إضافة الاصوات لكن عند المعاينة لم يظهر الصوت فما هي المشكلة وشكرا لكم

    ردحذف
    الردود
    1. تم شرح مثال لإضافة الصوت مثل هذا المثال
      http://www.condaianllkhir.com/2014/11/app-inventor-mp3-Tutorials.html

      حذف
  33. اخي لازم يكون في كمبيوتر لحتى يشتغل البرنامج

    ردحذف
    الردود
    1. هناك تطبيقات أخرى لا تحتاج للحاسوب ، تابع هذا الموضوع
      برمجة التطبيقات بدون كمبيوتر

      حذف
  34. مساء الخير لو سمحت صممت تطبيق وعن المعاينه على الهاتف طلع ملخبط مو نفس التنسيق الي سويته اتمنى ترد علي

    ردحذف
  35. @ noor tabouk أرجو تحديد المشكلة بالضبط حتى أستطيع حلها

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

    ردحذف
  37. لو سمحت كيف أعمل برنامج تفاعلي أرسل للمستخدمين ويرسلون لي

    ردحذف
  38. عندما اضيف فيديو لايظهر مالسبب

    ردحذف
  39. شكرا انا عملت مثلك تطبيق قران وشغلته بس اريد اخليه في الموبايل مثل اي تطبيق عادي كيف وكمان ايقونة التطبيق كيف خليها ممكن وشكراا

    ردحذف

يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى .
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون