بناء المشروع بستخدام Android Studio

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

والصلاة والسلام على رسول الله

أَبْدَأُ بِاسْمِ اللَّهِ مُسْتَعِينَا          رَاضٍ بِهِ مُدَبِّرًا مُعِينَا

بناء المشروع بستخدام Android Studio

افتح برنامج Android Studio ثم اضغط على Start a new Android Studio project كماهو موضح في الصورة التالية:

في خانة Application name اكتب اسم التطبيق المراد انشاؤه (مثال في هذه الدورة اسم التطبيق Share)

ملاحظة:

(يجب أن يبدء اسم التطبيق بحرف كبير)

ثم قم بوضع علامة صح بجانب Include Kotlin support كماهو موضح في الصورة: 

ثم اضغط على Next

قم باختيار SDK

ملاحظة:

(كل ماقل رقم  API level كلما كان التطبيق يعمل على الاجهزة القديمة مثال: API16 كما هو موضح في الصورة يعمل على 99.2% من الأجهزة في العالم لاكن قد لا يدعم بعض المميزات الجديدة في نظام الأندرويد إلا بتغير  API level واستخدام نسخة أحدث مثال API 21

API19 يعمل على 90.1  من الأجهزة

مثال على قائمة API 

في هذه المثال سوف نقوم بختيار API 16 ثم اضغط Next

في هذه الدورة سوف يتم اختيار هذه الواجهة (Basic Activity) ثم اضغط next

ملاحظة: 

يتم اختيار الواجهات بناء على متطلبات التطبيق. في هذا المثال نحتاج صفحة يوجد فيها زر من نوع float button كماهو موضح في الصورة:

الشاشة التالية هي الشاشة الأخيرة لإنشاء التطبيق ويتم فيها تسمية الكلاس الرئيسي او الاكتفى بستخدام الاسم الأفتراضي (MainActivity) كماهو ظاهر في الصورة ثم اضغط finish:

الان يتم إنشاء المشروع

في الشاشة التالية يتم عرض واجهة المشروع الافتراضية 

كما هو موضح في الصورة التالية ملف المشروع يحتوي على عدة ملفات:

مجلد: mainifests (سوف يتم الشرح لاحقاً)

مجلد: java ويوجد بداخلة ثلاث ملفات سوف نتطرق لتوضيح ماهو الملف (com.riyadh.share) وهو الملف الرئيسي للمشروعز

ملاحظة:

لن يتم التطرق لباقي الملفات الموجودة في مجلد java في هذه الدورة.

ايضاَ اسم الملف الرئيسي قد يختلف وذلك بسبب تسمية المبرمج له في هذا المشروع قمت بتسميته (com.riyadh.share)

داخل الملف الرئيسي يتم بناء جميع الكلاسات البرمجية مثال على ذلك:

MainActivity: اسم الكلاس الرئيسي ويحتوي على كود برمجي يقوم بعرض رسالة ترحيبية Hello world  وهي رسالة افتراضية عند بناء أي مشروع جديد.

مجلد res ويحتوي على عدة مجلدات ومن أهمها مجلد الصور drawable  ويتم وضع الصورا بداخلة وبعض التصاميم بستخدام لغة xml

ايضا مجلد layout ويحتوي على جميع واجهات التطبيق. في هذه الحالة يوجد لدينا ملفين بداخل مجلد layout:

activity_main.xml

content_main (هذه الصفحة يتم استدعائها من قبل الصفحة (activity_main) لعرض محتوها وايضاً يمكن حذف هذ الصفحة والعمل مباشرة على صفحة activity_main كما سوف يتم توضيحة لاحقاً).

ملف activity_main.xml هو الملف الرئيسي التابع للكلاس 

ولتبسيط الأمر أكثر ممكن اعتبار ملف activity_main.xml ( يعبر عن واجهة المستخدم ) نوع من أنواع الملابس والكلاس (شخص يرتدي هذا اللباس) لاكن الفرق الوحيد هنا أن بعض الكلاسات التي تظهر عند تشغيل التطبيق للمستخدم يكون لها لباس واحد لا يتغير ابداً إلا في حالة إعادة التصميم (وبعض الكلاسات لايكون لها لباس (واجهة مستخدم) بل تقوم بالعمل في الخلفية)

مثال على الكلاسات التي لاتظهر في واجهة المستخدم وتعمل في الخلفية أو بمى يسمى ب backend):

كلاس الاتصال بالسيرفر:

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

ملخص:

الكلاسات: اما أن تكون لها وجهات للمستخدم أو أن تكون تعمل في الخلفية لإنجاز مهمة معينة.

الصورة التالية توضح كيفية عرض المشروع بعد الإنشاء:

في الوسط تضهر لنا واجهة المستخدم للكلاس MainActivty ويوجد في وسط الصفحة رسالة ترحيبية Hello world:

ايضا في أسفل الصفحة يوحد لدينا خيارين, الخير الأول: Design كماهو موضح في الصورة السابقة ويمكن من خلال هذا الخيار سحب المكونات الرئيسية للواجهات مباشرة ووضعها في التصميم بدلاُ من كتابة أكودا ب xml مثال على ذالك سوف يتم سحب الزر (من الخيارات الموجودة على اليسار) كماهو موضح في الصورة ووضعة داخل واجهة المستخدم:

هنا تم إضافة زر بدون كتابة أي كود. ايضاً يمكن إعادة التسمية وغير حجم الزر. (سوف يتم شرح جميع الأمور المتعلقة بالدورة خلال الدروس القادمة إن شاء الله).

الخيار الثاني هو: Text وتستخدم لكتابة الأكودا بلغة xml لإنشاء مكونات واجهة المستخدم (زر - مربع نص - صورة - نص... إلى اخره)

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

الشرح:


<TextView <---- النوع وهو نص يستخدم للعرض فقط(مثال الرسالة الترحيبية) ب
    android:layout_width="wrap_content" 
تعني استخدام المساخة المظلوبة من عرض شاشة  وتم اختيار الخيار 
wrap_content: وتعني فقط نكتفي بحجم النص
مثال على ذلك:



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

مثال اخر:
فرض لو تم التغير من
wrap_content
 إلى 
match_parent
فسوف يتم استخدام عرض الشاشة بالكامل كمايلي:




هذا في حالة عرض الشاشة.
----------------------------------------------------------------------------------


    android:layout_height="wrap_content"
في حالة الإرتفاع
يتم تحديد الخيار إما احاطة النص مثال:
wrap_content

وفي حاة اختيار  كامل ارتفاع الشاشة مثال:
match_parent


    android:text="Hello World!"
في هذه السطر يتم تحديد النص الذي سوف يظهر للمستخدم
Hello World
سوف يتم تغير النص إلى (
مرحباً بكم في هذه الدورة


android:text="مرحباً بكم في هذه الدورة"



سوف يتم شرح الاسطر التالية في الدروس القادمة  إن شاء الله
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

النهاية