أكاديمية علوم المستقبل - للمبتدئين وللمحترفين - للصغار وللكبار - تعلم لغة Scratch

[F.Abdelaziz]

أكاديمية علوم المستقبل - للمبتدئين وللمحترفين - للصغار وللكبار - تعلم البرمجة مع برنامج سكراتش Scratch

مقدمة مرئية للبرمجة مع الألعاب ، والفن ، والعلوم ، والرياضيات
الفصل الأول
البداية

هل رغبت فى أى وقت مضى أن تخلق لعبة كمبيوتر ، قصة رسوم متحركة ، برامج تعليمية،أو محاكاة العلوم ؟
برنامج سكراتش Scratch هو لغة برمجة رسومية والتى تجعل من السهل إنشاء تلك التطبيقات والمزيد .
فى هذا الفصل التمهيدى ، سوف :
• نستكشف بيئة البرمجة سكراتش Scratch .
• التعرف على الأنواع المختلفة من لبنات (كتل) الأوامر command blocks .
• إنشاء اللعبة الأولى الخاصة بك فى برنامج سكراتش .
عندما تقوم بعمل تطبيق سكراتش ، يمكنك حفظه على جهاز الكمبيوتر الخاص بك أو تحميله (رفعه) على موقع سكراتش ، حيث يمكن للآخرين التعليق عليه وإعادة دمجه فى مشاريع جديدة .
هل أنت متحمس ؟
إذا ما رأيك ؟ شارك

إذا دعونا نبدأ !


ما هو شكراتش Scratch :

[fade hbeb]

بارك الله فيك استاذي الكريم
وزادك علم ونور طريقك ووضع اعمالك في ميزان حسناتك
ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــ
اللهم ارحمه واغفر له وتجاوز عن سيئاته وبارك له في حسناته
وادخله الجنة انك على كل شيء قدير

[F.Abdelaziz]

المشاركة الأصلية كتبت بواسطة fade hbeb

بارك الله فيك استاذي الكريم
وزادك علم ونور طريقك ووضع اعمالك في ميزان حسناتك
ــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــ
اللهم ارحمه واغفر له وتجاوز عن سيئاته وبارك له في حسناته

وادخله الجنة انك على كل شيء قدير

أخى الكريم الفاضل شكرا جزيلا لك

بارك الله فيك

مع تمنياتى بدوام التوفيق

[F.Abdelaziz]

ما هو شكراتش Scratch :

برنامج الكمبيوتر ما هو إلا مجموعة من التعليمات التى تخبر الكمبيوتر عما يجب القيام به . لكن عليك أن تكتب هذه التعليمات باستخدام لغة برمجة ، وهنا يأتى دور سكراتش .
معظم لغات البرمجة تبنى على أساس النصوص text ، وهو ما يعنى أن عليك إعطاء أوامر الكمبيوتر بشكل يشبه اللغة الإنجليزية لكنه عنها فى قواعد النحو (بناء الجملة).
على سبيل المثال لعرض كلمة “Hello!” على الشاشة ، فقد تكتب ما يلى :
فى لغة C++ :

std::cout << "Hello!" << std::endl; (in the C++ language)

وفى لغة الجافا Java :

System.out.print("Hello!"); (in the Java language)

تعلم هذه اللغات وفهم قواعد النحو (بناء الجملة) الخاصة بها يمكن أن يكون تحديا للمبتدئين . لكن لغة سكراتش ، خلاف ذلك ، فهى لغة برمجة مرئية . تم تطويرها لجعل البرمجة أسهل وأكثر متعة للتعلم .
ففى لغة سكراتش ، لن تكتب أية أوامر معقدة . بدلا من ذلك سوف تقوم بتوصيل لبنات (كتل) blocks رسومية معا لإنشاء البرامج . لا ترتبك ! انظر إلى البرنامج البسيط بالشكل 1-1 وسوف يتم شرحه .

القط cat الذى تراه فى الشكل 1-1 يسمى كائن (عفريت) Sprite . الكائنات تفهم وتطيع مجموعة التعليمات التى تعطيها لها .
اللبنة (الكتلة) الأرجوانية على اليسار تخبر القط لعرض كلمة مرحبا “Hello!” فى فقاعة الكلام . العديد من التطبيقات التى سوف تقوم بإنشائها فى هذه الدراسة سوف تحتوى على كائنات متعددة ، وسوف تستخدم اللبنات لجعل الكائنات تتحرك ، وتدور , وتقول شىء ما ، وتعزف الموسيقى ، وتقوم بعمل العمليات الرياضية ، وغير ذلك .
يمكنك إنشاء البرنامج فى لغة سكراتش عن طريق التجميع بالعض (النهش) snapping لتلك اللبنات ، الملونة بلون محدد ، معا كما تفعل مع قطع الألغاز puzzle . يطلق على الكومة أو الكدسة stack من اللبنات التى تقوم بإنشائها "البرنامج" أو الاسكريبت script (السيناريو). على سبيل المثال ، الشكل 1-2 يبين سكريبت (برنامج) يقوم بتغيير لون الكائن أربع مرات .

فى هذا البرنامج يتم الانتظار لمدة ثانية واحدة بين تغيير اللون ، والأربع قطط التى تراها هنا تبين الكائن باللون الجديد بعد كل تغيير .

التدريب 1-1 :
على الرغم من أننا لم نناقش اللبنات المبينة فى الشكل 1-2 بعد ، انظر فى أشكالها ، وحاول معرفة الخطوات التى يأخذها البرنامج .

تلميحات :
• اللبنة الإرجوانية الأولى clear graphic effects تقوم بإعادة القط إلى لونه الأصلى .
ما رأيك فيما يحدث إذا أزلنا لبنة الانتظار wait من البرنامج ؟

• هذه الدروس تغطى سكراتش الإصدار Scratch 2 ،والذى صدر فى مايو 2013 . هذا الإصدار يسمح لك بإنشاء المشاريع مباشرة فى متصفح الويب الخاص بك وبالتالى لن تكون مضطرا لتثبيت أى برمجيات على جهاز الكمبيوتر الخاص بك on-line ، ونحن سوف نعتمد على واجهة ويب سكراتش فى المادة الموجودة بهذه الدروس (بطبيعة الحال يمكنك تحميل وتثبيت برنامج سكراتش والعمل بدون إنترنت off-line ).

الآن ، ما عرفته هو القليل عن هذه اللغة ، وحان الوقت لبدء رحلة البرمجة ومعرفة كيفية استخدام هذه اللغة .

المرجع :

http://fathallaabdelaziz.forumarabia.com/

بيئة البرمجة بلغة سكراتش :

[F.Abdelaziz]

بيئة البرمجة بلغة سكراتش :

لبدء سكراتش ، اذهب إلى موقع سكراتش http://scratch.mit.edu/ وقم بالتسجيل ، ثم انقر على الرابط "إنشىء" Create .

هذا ينبغى أن يأخذك إلى واجهة محرر مشروع سكراتش ، على النحو المبين بالشكل
1-3 .

يجب أن تشاهد نافذة واحدة بها على الأقل الأجزاء الثلاثة التالية :
• المنصة Stage ( أعلى اليسار) .
• قائمة الكائنات Sprite List (أسفل اليسار) .
• وتبويب البرامج Scripts tab (جهة اليمين) ، وهذا الجزء يحتوى على لوحات اللبنات ومنطقة البرامج . كما أن الجزء الأيمن يحتوى أيضا على علامتى تبويب إضافية ، وهى الهيئآت Costumes ، والأصوات Sounds ، والتى سيتم مناقشتها لاحقا فى هذا الجزء .
أذا كنت قد سجلت حساب لنفسك للدخول على موقع سكراتش ، يجب أيضا أن ترى الجزء Backpack (أسفل اليمين) ، وبه أزرار تسمح لك بمشاركة المشروع الخاص بك واستخدام الكائنات والبرامج من المشاريع الموجودة بالفعل .
فى حالة الرغبة فى تحميل وتثبيت برنامج سكراتش على الكمبيوتر الخاص بك ، يتم النقر على رابط المساعدة Help ، ومن هناك يمكنك تحميل الأصدار الذى ترغب فيه .
دعونا نلقى نظرة سريعة على كل من هذه الأجزاء الرئيسية الثلاثة .

المنصة Stage :

[F.Abdelaziz]

المنصة Stage :
المنصة هى المكان الذى تتحرك ، وترسم ، وتتفاعل الكائنات الخاصة بك . تتكون المنصة من 480 خطوة فى الاتجاه الأفقى (x = +/- 240) و 360 خطوة فى الاتجاه الرأسى (y = +/- 180) ، كما هو مبين بالشكل
1-4 . مركز المنصة له الإحداثى السينى (الأفقى)x = 0 والإحداثى الصادى (الرأسى) y = 0 .

يمكنك إيجاد إحداثيات (x , y ) أى نقطة على المنصة عن طريق تحريك مؤشر الماوس إلى تلك النقطة ومشاهدة الأرقام فى منطقة عرض احداثيات الماوس ، التى تقع أسفل المنصة مباشرة .
الشريط الصغير الذى يقع فوق المنصة به العديد من الضوابط .
• رمز (أيقونة) وضع تقديم العروض Presentation (1) ، عند اختيارها تخفى جميع البرامج وأدوات البرمجة وتجعل منطقة المنصة تأخذ تقريبا الشاشة بأكملها .
• مربع التحرير (2) يبين اسم المشروع الحالى .
• رمز (أيقونة) العلم الأخضر (3) ورمز (أيقونة) الإيقاف (4) تسمح لك ببدأ وإنهاء البرنامج الخاص بك .

التدريب 1-2 :
حرك الماوس فى أنحاء المنصة وشاهد منطقة عرض إحداثيات مكان مؤشر الماوس .
ماذا يحدث عندما تقوم بتحريك الماوس خارج منطقة المنصة ؟
الآن تحول إلى وضع تقديم العروضPresentation وشاهد كيف يتم تغيير الشاشة .
انقر على الأيقونة الموجودة فى الجزء العلوى الأيسر من الشاشة أو اضغط على المفتاح Esc بلوحة المفاتيح للخروج من وضع تقديم العروض .

قائمة الكائنات Sprite List :

[F.Abdelaziz]

قائمة الكائنات Sprite List :
قائمة الكائنات تعرض أسماء وصور مصغرة لجميع الكائنات فى المشروع . تبدأ المشاريع الجديدة بالمنصة بكائن واحد فى هيئة القط ، كما هو موضح بالشكل 1-5 .

الأزرار الموجودة فوق قائمة الكائنات تسمح لك بإضافة كائنات جديدة إلى المشروع من واحد من أربع أماكن :
• مكتبة كائنات سكراتش (1) .
• محرر الرسم المدمج (2) حيث يمكنك رسم الهيئة الخاصة بك .
• الكاميرا المتصلة بجهاز الكمبيوتر (3) ,.
• أو جهاز الكمبيوتر الخاص بك (4) .
تدريب 1-3 :
قم بإضافة كائنات جديدة إلى مشروعك باستخدام بعض الأزرار الموجودة فوق قائمة الكائنات . قم بإعادة ترتيب الكائنات فى قائمة الكائنات عن طريق سحب الصور المصغرة المقابلة لها .
كل كائن sprite فى مشروعك له البرامج (الاسكربتات ) scripts ، والهيئات costumes ، والأصوات sounds الخاصة به .
يمكنك اختيار أى كائن لرؤية ملحقاته ، وذلك :
• إما (1) بالنقر على الصورة المصغرة بقائمة الكائنات ،
• أو (2) بالنقر المزدوج فوق الكائن نفسه على المنصة .
يتم دائما تمييز (إلقاء الضوء) الصورة المصغرة للكائن المحدد حاليا ، مع تحديد حدوده باللون الأزرق . عند تحديد الكائن ، يمكنك الوصول إلى برامجه ، وهيئاته ، وأصواته من خلال النقر على واحد من علامات التبويب الثلاثة التى تقع فوف منطقة البرامج . سوف نبحث فى محتويات هذه التبويبات فى وقت لاحق .
فى الوقت الراهن ، انقر بالزر الأيمن الصورة المصغرة للقط لرؤية القائمة المنبثقة والمبينة فى الشكل 1-6 .

• خيار التكرار duplicate(1) ينسخ الكائن ويعطى للنسخة اسم مختلف .
• يمكنك إزالة الكائن من المشروع بالخيار delete(2) ،
• ويمكنك تصدير كائن إلى ملف على جهاز الكمبيوتر باستخدام الخيار save to local file(3) . لاستيراد كائن تم تصديره إلى مشروع آخر ، فقط انقر على زر رفع كائن من ملف المبين بالشكل
1-5 .
• الخيار hide/show(4) يسمح لك بالتحويل بين ما إذا كان الكائن على المنصة مرئيا أم لا .
جنبا إلى جنب مع الصورة المصغرة للكائنات الخاصة بك ، فإن قائمة الكائنات تبين أيضا صورة مصغرة للمنصة فى اليسار (انظر الشكل 1-6) . المنصة لها مجموعة البرامج ، والصور ، والأصوات الخاصة بها ، يطلق على صورة الخلفية التى تراها على المنصة اسم الستارة الخلفية backdrop (على اعتبار أن المنصة تمثل خشبة المسرح) . عند بدء مشروع جديد ، يكون الوضع الافتراضى للمنصة هو الوضع العادى ، ستارة خلفية بيضاء ، ولكن يمكنك إضافة صور لستارة خلفية بأى من الأزرار الأربعة الموجودة أسفل الصورة المصغرة للمنصة . انقر على أيقونة المنصة فى قائمة الكائنات لاختيارها وعرض وتحرير البرامج ، وستائر الخلفيات والأصوات المرتبطة بها .

تبويب اللبنات (الكتل) Blocks Tab :

[F.Abdelaziz]

تبويب اللبنات (الكتل) Blocks Tab :
تنقسم اللبنات فى لغة سكراتش إلى 10 فئات (تسمى لوحات palettes) : الحركة Motion ، المظاهر Looks ، ، الصوت Sound , القلم Pen ، البيانات Data ، الأحداث Events ، الضوابط Control ، الأحساس (المغزى) Sensing ، العوامل Operators ، اللبنات الإضافية More Blocks .
اللبنات يكون لها لون مميز لمساعدتك فى العثور على اللبنات المطلوبة بسهولة . برنامج سكراتش 2 به أكثر من 100 لبنة ، مع ذلك فأن بعض اللبنات تظهر فقط فى ظل ظروف معينة . على سبيل المثال ، لبنات لوحة البيانات Data ( سوف تناقش لاحقا) تظهر فقط بعد إنشاء متغير أو قائمة .
دعونا ننظر إلى المكونات المختلفة لتبويب اللبنات فى الشكل 1-7 .

جرب نقر لبنة لترى ما تفعله .
إذا قمت بالنقر فوق اللبنة "تحرك 10 خطوة" move 10 steps على لوحة الحركة Motion ، على سبيل المثال ، فإن الكائن سوف يتحرك 10 خطوات على المنصة . انقر عليه مرة أخرى ، فيتحرك الكائن 10 خطوات أخرى .
انقر على اللبنة "قل Hello! لمدة 2 ثانية" say Hello! for 2 secs (بلوحة المظاهر Looks) لجعل الكائن يعرض كلمة مرحبا “Hello!” فى فقاعة الكلام لمدة 2 ثانية .
يمكنك أيضا الوصول إلى شاشة المساعدة للبنة عن طريق اختيار مساعد اللبنة ( رمز علامة الاستفهام الموجودة أعلى التبويبات) ، يتحول مؤشر الماوس إلى علامة الاستفهام ، ثم انقر به على اللبنة المطلوب الاستعلام عنها .
بعض اللبنات تتطلب واحد أو أكثر من المدخلات ( تسمى أيضا الحجج أو الأدلة arguments) والتى تخبر اللبنة بما يجب القيام به . الرقم 10 فى اللبنة move 10 steps هو مثال للدليل أو الحجة . انظر إلى الشكل 1-8 لمعرفة الطرق المختلفة التى تمكنك اللبنات من تغيير مدخلاتها .

• يمكنك تغيير عدد الخطوات فى اللبنة move 10 steps عن طريق النقر على المنطقة البيضاء حيث ترى الرقم 10 وإدخال الرقم الجديد (1) ، ليكن على سبيل المثال 30 كما فى الشكل 1-8 .
• بعض اللبنات ، مثل اللبنة point in direction 90 ، يكون لها أيضا قوائم منسدلة لمدخلاتها (2) ، يمكنك النقر فوق سهم لأسفل لترى قائمة من الخيارات المتاحة لتختار واحدة منها . هذا الأمر المعين له منطقة قابلة للتحرير بيضاء ، لذلك يمكنك أيضا مجرد كتابة قيمة داخل المربع الأبيض .
• اللبنات الأخرى ، مثل اللبنة point towards (3) ، سوف تجبرك على اختيار قيمة من القائمة المنسدلة .

تدريب 1-4 :
إذهب إلى لوحة المظاهر Looks ، قم بتغيير مدخلات اللبنة ، وانقر على اللبنات لمعرفة ما تفعله . على سبيل المثال ، جرب مع اللبنة set color effect .
جرب أرقام مثل 10,20,30 ، وهلم جرا حتى يعود القط إلى لونه الأصلى .
جرب الخيارات فى القائمة المنسدلة مع أرقام مختلفة . يمكنك النقر فوق اللبنة clear graphic effects
( أيضا فى لوحة المظاهر Looks) لإزالة التغييرات .

منطقة البرامج Scripts Area :