مدرسة هارون الرشيد الثانوية للبنين المهارات العملية / تكنولوجيا المعلومات ( الثاني عشر) إعداد/ أ. خالد الح

املهارات العملية / تكنولوجيا املعلومات )Appinventor )بزنامج :on line من خالل االنترنت مباشرة App inventor خطوات تشعيل برنامج الدخول إلى حساب ج م ل.Gmail ثم رابط الموقع App inventor عبر متصفح االنترنت http://appinventor.mit.edu/explore/ )Create Apps!( تظهر صفحة خاصة بالبرنامج نختار ثم النقر على ) Designer تظهر الشاشة الرئ س ة للبرنامج )واجهة التصم م :off line من بدون االنترنت App inventor خطوات تشعيل برنامج - النقر المزدوج على األ قونة على سطح المكتب فتظهر الشاشة التال ة : - تظهر شاشة المتصفح chrome ننقر على Localhost:8888 - ثم ننقر على 4 تظهر شاشة البرنامج )واجهة التصم م ) لبدأ المشروع. -4 App inventor إنشاء تطبيق )مشروع( جديد في برنامج )Start new project( نختار )Project( من قائمة نكتب اسم المشروع ][ المها ارت العممية )برنامج ) Appinventor

واجهة التصميم )Designer( البرمجة اضافة شاشة القوائم التصميم اسم التطبيق الخصائص األدوات مكونات المشروع قائمة أدوات مجموعة ل User Interface تغيير أو حذف أداة مساحة العمل مجموعات األدوات البرمجة واجهة البرمجة )Blocks( التصميم لبنات عامة الحافظة مجموعة لبنات مبنية بشكل افتراضي غير مرتبطة بأداة معينة منطقة ادراج اللبنات مجموعة لبنات مبنية مرتبطة بأداة معينة سلة المحذوفات خاصة لبنات بأداة معينة ][ المها ارت العممية )برنامج ) Appinventor

معاينة التطبيق يفAppinventor الطريقة األولى : المعاينة عمى جهاز الهاتف الذكي يعمل بنظام أندرويد )Android( مباشرة. يجب أن يكون ىناك اتصال باإلنترنت لكل من الحاسوب والياتف. قم بتثبيت التطبيق MIT AI Companion عمى ىاتفك من المتجر. - من قائمة connect نختار. Al companion - تشغيل التطبيق MIT AI Companion عمى الياتف تظهر - نختار Scan QR code ثم ونوجو كامي ار الياتف عمى الرمز. - يبدأ التطبيق بالمعاينة عمى الياتف. الطريقة الثانية : معاينة التطبيق عمى الحاسوب )المحاكاة Emulator ) بدون انترنت:.Emulator نختار connect من قائمة تظهر شاشة الهاتف االفتراض لعرض التطب ق عل ها حفظ التطبيق يف Appinventor حفظ التطبيق بالصيغة apk عمى الحاسوب: حفظ التطبيق لعرضو وتنفيذه مباشرة دون الحاجة لوجود برنامج Appinventor عمى الياتف وال يمكن التعديل عمى التطبيق. من قائمة Build نختار computer)( )App (save apk to my. يبدأ بالتحميل. - - - يظير الممف في اسفل شريط الميام بعد انتياء عممية التحميل ( ويخزن التطبيق تمقائيا في نافذة التنزيالت( ][ المها ارت العممية )برنامج ) Appinventor

. حفظ التطبيق بالصيغة apk - من قائمة Build عمى الهاتف: حفظ التطبيق عمى الياتف مباشرة نختار.apk( App )Provide QR for رمز الشفرة Barcode تظهر الشاشة تظهر شاشة التحميل بتشغيل التطبيق MIT AI Companion من عمى الياتف. - نقوم تظهر الشاشة نختار - يبدأ نسخ التطبيق عمى الياتف بصيغة apk ونقوم بتثبت التطبيق عمى الياتف. حفظ التطبيق بالصيغة يتم حفظ التطبيق بصيغة : aia aia - بالطرق المختمفة ألجيزة اخرى - تمييدا لتخزينو من البرنامج الى أي موقع آخر في الحاسوب أو حتى نقمو واستي ارده من جياز آخر الى الجياز الحالي. من قائمة )Projects( نختار األمر computer( )Export selected project (.aia) to my يبدأ الممف بالتحميل ويظير في شريط الميام في األسفل حيث يخزن تمقائيا في نافذة التنزيالت )Download(. فتح )استي ارد( التطبيق بصيغة : aia - من قائمة )Projects( نختار األمر computer( )Import project (.aia) from my نحدد مكان الممف من الحاسوب. - يظير الممف في قائمة project( )my داخل البرنامج. ]4[ المها ارت العممية )برنامج ) Appinventor

تغيير اسم االداة أو حذفها من على واجهة التطبيق / تحديد األداة / تغيير اسم األداة / حذف األداة / نختار / نختار إضافة شاشة جديدة / نكتب اسم الشاشة األدوات والخصائص المطلوبة في برنامج - App inventor واجهة التصميم )Designer( )Drawing and Animation( األدوات من مجموعة األداة )Canvas( : لوحة رسم حساسة للمس : االرتفاع العرض خلفية الصورة األداة )Ball( : نقطة سوداء تتفاعل مع اللمس والسحب وتوضع فوق األداة )Canvas( : نصف القطر لون النقطة األداة )ImageSprite( : عرض الصور وه تتفاعل مع اللمس والسحب وتوضع فوق األداة )Canvas( : االرتفاع العرض تحميل صورة ]5[ المها ارت العممية )برنامج ) Appinventor

)UserInterface( األدوات من مجموعة األداة )Label( : صندوق التسمية : Height : االرتفاع لون خلفية االداة Width : العرض محتوى األداة على الشاشة حجم الخط محاذاة النص األداة )Image( : عرض الصورة وه ال تتفاعل مع اللمس والسحب : االرتفاع العرض تحميل صورة : Width العرض األداة )Button( : زر تحكم : Height : االرتفاع :Image تحم ل صورة محتوى الزر الصورة محاذاة النص حجم الخط لون خلفية الزر األداة )TextBox( : صندوق إدخال نص : Height : االرتفاع Width : العرض محتوى النص لون خلفية الصندوق )Sensors( األدوات من مجموعة الحساسات األداة )Clock( : مؤقت زمني األداة غ ر مرئ ة على واجهة التطب ق : : Time interval ضبط الفترة الزمن ة بالمل ثان ة ) مل ثان ة = ثان ة( : Time Enabled تفع ل األداة True( ) False - ]6[ المها ارت العممية )برنامج ) Appinventor

اللبنات البرمجية واألحداث في برنامج - App inventor واجهة البرمجة )Blocks( اللبنات الخاصة باألحداث : يتم استدعاء األحداث المطلوبة من قائمة اللبنات الخاصة في األداة نفسها في واجهة البرمجة )Blocks( :)Screnn( األحداث الخاصة باألداة )Blocks( من واجهة البرمجة )Screnn( من قائمة اللبنات الخاصة باألداة )Initialize( استدعاء الحدث.do نفذ الجمل البرمج ة )اللبنات( ما بعد Screnn )Initialize عند تحم ل )بدأ تشغ ل اسم األداة الحدث/تحميل عندما اللبنات البرمجية نفذ جمل برمجية نفذ الجمل البرمج ة )اللبنات( ما بعد.do :)Canvas( األحداث الخاصة باألداة (Canvas( على األداة TouchDown عند اللمس الحدث عند اللمس :)Ball( األحداث الخاصة باألداة عند اللمس على األداة (Ball) نفذ الجمل البرمج ة )اللبنات( ما بعد.do :)ImageSprite( األحداث الخاصة باألداة.do نفذ الجمل البرمج ة )اللبنات( ما بعد )ImageSprite( عند اللمس على األداة حدث عند اللمس مباشرة ينفذ األمر حتى لو ما رفعت اصبعك عن االداة حدث عند لمس األداة ورفع األصبع ينفذ األمر حدث عند لمس األداة ينفذ األمر )سحب على األداة(. (: Button( األحداث الخاصة باألداة عند النقر على األداة (Button) نفذ الجمل البرمج ة )اللبنات( ما بعد.do الحدث عند النقر (: Clock( األحداث الخاصة باألداة ) Clock( على األداة )Timer( عند تطب ق الحدث نفذ الجمل البرمج ة )اللبنات( ما بعد.do الحدث المؤقت الزمني ف الزمن المحدد Interval( )Timer ]7[ المها ارت العممية )برنامج ) Appinventor

اللبنات البرمجية الخاصة باألدوات: يتم استدعاء اللبنة المطلوبة من قائمة اللبنات الخاصة في األداة نفسها في واجهة البرمجة )Blocks( )ImageSprite( اللبنات البرمجية الخاصة باألداة اجعل خاص ة )Visible( لألداة )ImageSprite( ف حالة )False( غ ر ظاهرة. الحالة/النتيجة خاصية اسم األداة اجعل )Blocks( في البرمجة )ImageSprite( )Heading( خاص ة اتجاه حركة الصورة )Speed( خاص ة سرعة حركة الصورة )Height( خاص ة طول الصورة )Width( خاص ة عرض الصورة )X( خاص ة اإلحداث الس ن للصورة )Y( خاص ة اإلحداث الصادي للصورة )Button( اللبنات البرمجية الخاصة باألداة اجعل خاص ة )Text( لألداة )Button( تساوي ق مه. )TextBox( اللبنات البرمجية الخاصة باألداة اجعل خاص ة )Text( لألداة )TextBox( تساوي ق مه. )Label( اللبنات البرمجية الخاصة باألداة اجعل خاص ة )Text( لألداة )Label( تساوي ق مه. )Clock( اللبنات البرمجية الخاصة باألداة اجعل خاص ة )TimerEnabled( لألداة )Clock( ف حالة )False( غ ر مفعلة أو )True( مفعلة. ]8[ المها ارت العممية )برنامج ) Appinventor

اللبنات العامة لألدوات: من مجموعة )Control( لالنتقال إلى شاشة )Screnn( أخرى. اللبنات العامة من مجموعة )Text( إدخال نص..)False( أو غ ر ظاهرة )True( إما ظاهرة )Visible( حالة األداة )Logic( من مجموعة )من إلى ( )Math( من مجموعة تول د رقم عشوائ ب ن رقم ن دخال رقم. عمل ات حساب ة. تجم ع عمل ة حساب ة. مثال: )تول د رقم عشوائ ب ن رقم ن من إلى ) ادخال رقم. ************************************************************************************************************* تطبيق عملي / الشاشة االفتتاحية الشاشة األولى تحتوى عمى أداة صندوق التسمية )Label) يكتب عميو )الشاشة االفتتاحية ). أداة زر تحكم (Button) يكتب عميو )الشاشة الثانية( لالنتقال إلى الشاشة الثانية حجم الخط. أداة لوحة الرسم )Canvas( يوضع عميو صورتين. أداة صورة )ImageSprite( اد ارج صورتين وتغيير اتجاه حركة الصور واالرتفاع والطول والسرعة. أداة المؤقت الزمن )Clock( يعمل حسب المدة الزمنية المحددة. الشاشة الثانية تحتوى عمى: أداة صندوق التسمية )Label يكتب عميو )الشاشة الثانية ). أداة زر تحكم (Button) يكتب عميو )عودة لمشاشة األولى( لالنتقال إلى الشاشة األولى. ]9[ المها ارت العممية )برنامج ) Appinventor

)Designer تصميم نافذة التطبيق )واجهة التصميم األدوات والخصائص للشاشة األولى: أداة Label صندوق التسمية أداة Button زر تحكم Canvas أداة لوحة رسم أداة Clock مؤقت زمني Label Canvas Button 5 4 إدراج األداة ImageSprite ImageSprite ImageSprite ImageSprite تحميل صورة ][ المها ارت العممية )برنامج ) Appinventor

اضافة شاشة جديدة 7 6 ImageSprite اكتب اسم الشاشة ImageSprite األدوات والخصائص للشاشة الثانية: Label Button Label أداة صندوق التسمية أداة Button زر تحكم : )Blocks تجميع اللبنات البرمجية للشاشة األولى من )واجهة البرمجة )Clock( اللبنات الخاصة باألداة 4 6 5 ][ المها ارت العممية )برنامج ) Appinventor

8 7 9 0 4 )Button( اللبنات الخاصة باألداة 4 ][ المها ارت العممية )برنامج ) Appinventor

6 5 8 7 9 : )Blocks اللبنات البرمجية للشاشة الثانية من )واجهة البرمجة )Button( اللبنات الخاصة باألداة 4 **************************************************** تطبيق عملي )انظمة التشغيل للهواتف الذكية( صمم تطبيق عمى برنامج Appinventor يحتوى عمى: الشاشة األولى : عنوان )أنواع المفاصل الرئيسية( وسط الشاشة بحجم 0 خمفية لون أزرق. أز ارر تحكم عدد 0 مكتوب عمى األول )مفصل دو ارني( والثاني )مفصل إنتقالي( بحجم 0 لون بنى. زر تحكم ثالث مكتوب عميه )عدة لمشاشة الثانية ) بحجم 0 لون أزرق. عند النقر عمى الزر األول تظهر صورة. عند النقر عمى الزر الثاني تظهر صورة 0..Apk احفظ التطبيق بصيغة الشاشة األولى : زر تحكم واحد مكتوب عميه )عودة لمشاشة األولى( بحجم 0 لون أحمر. ][ المها ارت العممية )برنامج ) Appinventor

تطبيق عملي / املدن الفلسطينية الشاشة األولى تحتوى عمى: أداة صندوق التسمية )Label) يكتب عميو )الشاشة الرئيسية ). أداة زر تحكم (Button) يكتب عميو )المدن الفمسطينية( لالنتقال إلى الشاشة األولى. الشاشة الثانية تحتوى عمى أداة صندوق التسمية )Label) يكتب عميو )المدن الفمسطينية(. أداة زر تحكم (Button) يكتب عميو )الشاشة الثانية( لالنتقال إلى الشاشة األولى. أداة لوحة الرسم )Canvas( يوضع عميو صورتين. أداة النقطة السوداء )Ball( لوضع نقطتين. أداة صورة )ImageSprite( اد ارج صورتين. )Designer تصميم نافذة التطبيق )واجهة التصميم األدوات والخصائص للشاشة األولى: Label صندوق التسمية Label زر تحكم Button Button األدوات والخصائص للشاشة الثانية: صندوق التسمية Label لوحة رسم Canvas زر تحكم Button نقطة سوداء Ball صورة ImageSprite ]4[ المها ارت العممية )برنامج ) Appinventor

Button Canvas Label 4 Ball Ball ادراج األداة ImageSprite و ImageSprite ]5[ المها ارت العممية )برنامج ) Appinventor

ImageSprite 5 6 ImageSprite 7 ImageSprite ImageSprite :)Blocks تجميع اللبنات البرمجية للشاشة األولى )واجهة البرمجة : )Button( اللبنات الخاصة باألداة 4 ]6[ المها ارت العممية )برنامج ) Appinventor

: )Blocks تجميع اللبنات البرمجية للشاشة الثانية )واجهة البرمجة : )Screen( اللبنات الخاصة باألداة اللبنات الخاصة باألداة )Ball( : اللبنات الخاصة باألداة )Ball( : : )ImageSprite( اللبنات الخاصة باألداة اللبنات الخاصة باألداة )ImageSprite( : : )Button( اللبنات الخاصة باألداة 4 ]7[ المها ارت العممية )برنامج ) Appinventor

تطبيق عملي / تطبيق مجع رقمني صمم تطبيق عمى برنامج Appinventor يقوم بإدخال عددين وحساب مجموعهما واظهار الناتج عند النقر عمى زر اجمع. :)Designer تصميم نافذة التطبيق األدوات والخصائص للشاشة )واجهة التصميم صندوق نص TextBox إدراج األدوات صندوق التسمية Label زر تحكم Button Label خصائص األدوات textbox textbox Button Label ]8[ المها ارت العممية )برنامج ) Appinventor

: )Blocks تجميع اللبنات البرمجية )واجهة البرمجة : )Button( اللبنات الخاصة باألداة 4 6 5 8 7 9 ***************************************************************** تطبيق عملي )انظمة التشغيل للهواتف الذكية( صمم تطبيق عمى برنامج Appinventor يقوم بتصميم شاشة واحدة تحتوي : عنوان )أنظمة التشغيل لمهواتف الذكية( وسط الشاشة بحجم 0 خمفية لون أحمر. أز ارر تحكم عدد 0 مكتوب عمى األول )نظام )Android والثاني )نظام )Ios بحجم 0.. Android عند النقر عمى الزر األول تظهر صورة لشعار.Ios عند النقر عمى الزر الثاني تظهر صورة لشعار.Apk احفظ التطبيق بصيغة تطبيق عملي / ضزب رقمني صمم تطبيق عمى برنامج Appinventor يقوم بإدخال عددين وحساب ضربهما واظهار الناتج عند النقر عمى زر يظهر عميه عالمة ) ( وحفظ التطبيق بصيغة.aia ]9[ المها ارت العممية )برنامج ) Appinventor