الأحد، 11 فبراير 2018

التطبيق الأول في آب إينفنتور (Hallow World)

التطبيق الأول في آب إينفنتور (Hallow World)

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

- البدء في استخدام موقع AppInventor2.
- استخدام الأدوات وتخصيصها في شاشة المصمم Designer.
- التعامل مع الكتل Blocks.

الأدوات المستخدمة:

1- الأداة: Label
  - الفئة: User Interface
  - الوظيفة: تستخدم بصفة عامة لإظهار نصوص على الشاشة.

2- الأداة: Button1
  - الفئة: User Interface
  - الوظيفة: تنفيذ حدث عند الضغط عليه، يستخدم في التطبيق لإظهار عبارة Hallow World في أداة العنوان label1.

الخطوات:

كما بالفيديو التالي:

بلوكات التطبيق:



معاينة التطبيق:

يمكن معاينة التطبيق بعدة طرق:
المعاينة على جهاز الأندرويد:
- نثبت تطبيق  (MIT AI2 Companion) من متجر جوجل بلاي (Google Play) على جهاز الأندرويد، ولابد أن يكون هناك اتصال بالإنترنت لكل من الكمبيوتر والهاتف من خلال نفس الشبكة.
- نفتح قائمة (Connect) على منصة (App Inventor) ونختر أمر   (Al companion).
- نوجه كاميرا الهاتف إلى الكود الذي سيظهر على الشاشة، ونضغط زر  (Scan QR code)  ليتم تشغيل التطبيق على الهاتف.


- ننقر على الزر لتظهر عبارة (Hallow World) في عنصر العنوان.


المعاينة عن طريق توصيل جهاز الحاسب بجهاز الأندرويد:
- نوصل جهاز أندرويد بجهاز الحاسب عن طريق كابل (USB).
- نختر أمر (USB) من قائمة (Connect) ليتم تشغيل البرنامج على الجهاز.
المعاينة بنسخ التطبيق إلى جهاز أندرويد:
- نفتح قائمة (Build)، ثم نختر أمر (Save .apk to my computer) ليتم تنزيل ملف التطبيق بصيغة (Apk) على جهاز الحاسب.
- ننسخ الملف من الكمبيوتر إلى الجهاز عن طريق البريد الإلكتروني أو اتصال بلوتوث، ثم نقوم بتشغيل التطبيق.
المعاينة باستخدام المحاكي (Emulator):
المحاكي عبارة عن واجهة للهاتف الذكي يتم تجريب التطبيق عليها من خلال جهاز الحاسب، ويتم استخدام طريقة المحاكي (Emulator) عندما يتعذر الحصول على هاتف ذكي لتجريب التطبيق.
يجب في البداية تثبيت برنامج المحاكي على جهاز الحاسب، ويتم ذلك للمرة الأولى فقط، ويتم ذلك من خلال الموقع:
http://appinventor.mit.edu/explore/ai2/setup-emulator.html
- نقوم بعد ذلك بتشغيل البرنامج.
- نختر أمر (Emulator) من قائمة (Connect) وانتظر حتى تتم تجهيز واجهة المحاكي ليظهر التطبيق عليها.
- ننقر زر (Click Me) ليتم تطبيق حدث الضغط على الزر ويتغير النص في أداة العنوان ويظهر بها النص (Hallow World).

رابط التطبيق بالمعرض:



السبت، 10 فبراير 2018

آب أنفنتور (App Inventor)

آب أنفنتور (App Inventor)


هو برنامج وموقع ويب من تطوير شركة جوجل Google، توفر من خلالها بيئة لتطوير تطبيقات الأندرويد (Android) سهلة الاستخدام، وهذا البرنامج حاليا تحت إشراف معهد MIT . ويتميز آب انفنتور بسهولة الاستخدام ويعتمد على بيئة رسوميه تعتمد على تركيب متسلسل للوظائف المراد استعمالها في التطبيق دون الحاجة لكتابة جمل برمجيه.
يعتبر موقع أو منصة (Appinventor) من أسهل طرق إنشاء تطبيقات أندرويد (Android) للمبتدئين، يعتمد العمل في هذه المنصة على سحب وإفلات العناصر والأدوات وقطع المكونات التي تحتوي على أكواد برمجية، فيمكن من خلاله تصميم أي فكرة تطبيق في دقائق معدودة دون سابق خبرة بالبرمجة.
العمل على آب إينفنتور (AppInventor):
يمكن العمل مباشرة على منصة آب إينفنتور من خلال متصفح الإنترنت (Chrome)  أو(Firefox)  بشكل مباشر، ويتطلب ذلك تسجيل الدخول بحساب جوجل (Google Account) الخاص بك، على هذا الموقع:  http://ai2.appinventor.mit.edu

يتضمن آب إينفنتور واجهتين رئيسيتين، هما: واجهة المصمم (Designer)، والواجهة الأخرى هي واجهة الكتل (Blocks).

أولا: واجهة المصمم Designer:

تعتبر هي الواجهة الافتراضية التي تظهر عند إنشاء تطبيق جديد، وهي مكونة من أربعة مكونات رئيسية، وهي:
1- اللوح (Palette): ويظهر يسارا، ويستخدم لإضافة العناصر المكونة للتطبيق.
2- المشهد (View): يظهر في الوسط، ويظهر الشاشة الأولى Screen1 ويتم سحب العناصر والأدوات إليها لتكوين التطبيق.
3- المكونات (Components): وتظهر به المكونات والعناصر المضافة للشاشة الحالية (Screen).
4- الخصائص (Properties): يظهر أقصى اليسار ويستخدم لتحديد الخصائص التي يتم تحديدها من لوح المكونات (Components).



ثانيا: واجهة الكتل (Blocks):

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


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


الجمعة، 13 أكتوبر 2017

دروس تعليمية: نصوص حبوب السيريال

دروس تعليمية: نصوص حبوب السيريال Cereal


يتم إنشاء هذا النوع من النصوص باستخدام تقنيات العمل مع القنوات Channels والعمل مع بعض المرشحات مثل مرشح تموجات المحيط Ocean Ripple ومرشح تأثيرات الإضاءة Lighting Effects ومرشح إضافة الضوضاء Add Noise .
1- قم بإنشاء ملف رسم جديد ثم انتقل للوح القنوات وقم بإنشاء قناة جديدة Alpha1 ، اختر بعد ذلك أداة النص Type Tool وانقر على صفحة الرسم وقم بإدخال النص المطلوب .
2- قم بحفظ تحديد النص فى قناة جديدة Alpha2 واحتفظ بالنص محددا على القناة Alpha1 ثم اختر مرشح Ocean Ripple من قائمة Distort المتفرعة من قائمة Filter ليظهر مرشح تموجات المحيط على الشاشة .

اضبط خيار Ripple Size على 1 وخيار Ripple Magnitude على 13 ثم انقر زر الموافقة Ok ليتم تطبيق المرشح على التحديد .
3- اختر مرشح Gaussian Bluer من قائمة Bluer المتفرعة من قائمة Filter ليظهر مرشح جوسيان على الشاشة .
اضبط قيمة Radius على 8.8 بكسل ثم انقر زر الموافقة Ok ليتم تطبيق المرشح على التحديد .

4- قم بإنشاء قناة جديدة Alpha3 فى لوح القنوات واجعلها هى القناة النشطة مع الاحتفاظ بتحديد النص ثم اختر مرشح Mezzotint من قائمة Pixelete المتفرعة من قائمة Filter ليظهر مرشح النقش التظليلى على الشاشة .
اختر Color Dots من قائمة صندوق الحوار ثم انقر زر الموافقة Ok ليتم تطبيق المرشح على التحديد .

5- قم بتنشيط قناة Alpha1 واجعلها هى القناة النشطة ثم قم بتحميل التحديد من القناة Alpha3 ليتم تحديد نقاط صغيرة متفرقة داخل النص .
6- اختر أمر Brightness / Contrast من قائمة Adjust المتفرعة من قائمة Image ليظهر صندوق حوار السطوع والتضاد على الشاشة .
قم بتقليل قيمة السطوع Brightness إلى -35 ثم انقر زر الموافقة Ok ليتم تقليل سطوع النقاط المتفرقة المحددة داخل النص .
7- قم بتحميل التحديد من القناة Alpha2 ثم اختر مرشح Add Noise من قائمة Noise المتفرعة من قائمة Filter .
اضبط القيمة Amount على 4 مع تنشيط زر أمر Gaussian فى خانة التوزيع Distribution وانقر بعد ذلك زر الموافقة Ok لتلاحظ ظهور بقع قاتمة اللون داخل النص .
8- ارجع للقنوات مجمعة بنقر قناة RGB فى لوح الطبقات مع الاحتفاظ بالتحديد نشطا ثم انتقل لطبقة الخلفية Background.

9- اختر مرشح Lighting Effects من قائمة Render المتفرعة من قائمة Filter ليظهر صندوق حوار تأثيرات الإضاءة على الشاشة .
قم باختيار النمط  Omniمن قائمة نمط الإضاءة Light Type ثم اختر اللون الأصفر القاتم (R: 202 , G: 218 , B : 18) من الخانة الموجودة فى هذا الجزء .
اختر القناة Alpha1 من قائمة Texture Channel لتكون هى مصدر البنية التركيبية للتأثير واضبط باقى خيارات صندوق الحوار كما بالشكل التالى .
انقر زر الموافقة Ok ليتم تطبيق المرشح على التحديد ويبدو النص كأنه مكون من حبوب السريال .
10- يمكن إضافة مسحة نهائية على النص باختيار مرشح إضافة الضوضاء Add Noise من قائمة Noise المتفرعة من قائمة Filter وضبط القيمة Amount على 25 مع تنشيط زر أمر Gaussian فى خانة التوزيع Distribution ونقر زر الموافقة Ok ليتم إضافة بعض التشويه على النص ليبدو بشكل واقعى .
يمكن بعد ذلك عمل ظل ساقط لطبقة النص أو نقل هذه الطبقة على طبقة أخرى تمثل صورة اللبن لتبدو الصورة بشكل واقعى .