الدرس 2 تعلم صنع تطبيقات الاندرويد بالتفصيل - بنيه التطبيق ومكوناته

[Eng Amr Adel]

اهلا بكم في درسنا الثاني، في دوره تعلم برمجه تطبيقات الاندرويد.

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

** يمكن ان نقسم مكونات البرامج الهواتف الذكيه الى ثلاث اقسام:
1- الواجهات المرئيه وتسمى Graphical User Interface ويرمز لها GUI وهي الازرار ومربعات ادخال النص والقوائم المنسدله وما الي ذلك...

2- الكود البرمجي، وهي طريقه التحكم بهذه الواجهات والعناصر وتطبيق المنطق الذي نرغب به ليؤدي البرنامج غرضه، ممكن ان نقول ان الواجهات هي سياره وان الكود البرمجي هو الشخص الذي يقود السياره ويتحكم بها.

مثلا لو اردنا عمل برنامج يجمع رقمين:سيكون لدينا مربعين نص و زر، هذه هي الواجهه. ثم الكود البرمجي هو الذي سيقوم بالعمل ... يأخذ الرقم الاول ويجمعه للرقم الثاني ويظهر النتيجه للمستخدم. كل هذا يحدث عندما يضغط المستخدم الزر.

3- المصادر الخارجيه او ما يسمى resources وهي اي شيء خارجي تستعمله في برنامجك... مثل الصور، ملفات صوتيه، ملف خط مثلا او ملف مكتبه jar وهذه معروفه بالجافا وهي ما يقابل ملف dll ببرمجيات الويندوز مثلا ال VB فيمكن ان تستعمل ملف jar به وظيفه معينه بدون ان تضطر لاعاده العمل.

الان خطوات عمل البرنامج ليست اجباريه لكن برأيي الشخصي افضل شيء هو تصميم الواجهه GUI ثم كتابه الكود الخاص بها، فأنت لا تشتري اثاث لبيت غير مبني اصلا... فعند تصميم الشاشه تتضح لك اصوره وماذا ستكون الوظائف المطلوبه وتبدأ بالبرمجه.

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

من خلال بيئه العمل ايكليبس وبفضل ال ADT الذي تحدثت عنه، عمليه تصميم ال GUI سهله ان شاء الله، وكذلك كتابه الكود الخاص بها، كما قلت كل هذا يتم من خلال برنامج واحد الايكليبس.

نأتي للقسم الاول: GUI
الواجهات ببرامج الاندرويد يتم تصميمها بملف XML
ولمن لا يعرف الـ XML هو ليس لغه برمجه بل يسمى data structure اي بنيه بيانات وطريقه لتمثيل بيانات معينه بطريقه محكومه وهذا مثال بسيط عليه:

** مثلا نريد تمثيل قائمه من الاشخاص لكل واحد اسم، بريد الكتروني وعمر سيكون ملف ال XML كما يلي

كود PHP:

<?xml version="1.0" encoding="UTF-8"?>
<myList>
<person>
<name>ahmad</name>
<email>[email protected]</email>
<age>25</age>
</person>
<person>
<name>khaled</name>
<email>[email protected]</email>
<age>18</age>
</person>
</myList>

وتستمر القائمه ويستمر بناء الملف ويمكن اضافه اي قدر تريده من الاسماء شرط ان تلتزم بالبنيه
والفكره لل XML هي انه لا يوجد له قواعد او ما يعرف بلغات البرمجه بال syntax اي انه لا يجبرج على اختيار كلمه معينه لكن له قواعد تلتزم بها اثناء بناء الملف.

شرح بسيط:
كود PHP:

<?xml version="1.0" encoding="UTF-8"?>

هي الترويسه او header وهذه لكي تخبر اللغه او النظام الذي سيقوم بقراءه الملف عن معلومات مثل اي اصدار xml نستعمل وما هوالترميز encoding الذي نستعمله لانه قد يحوي كلمات عربيه او صينيه وهكذا

كل اشاره <> تسمى تاغ tag وتسمى باسم اول كلمه بها
مثلا تاغ العمر age tag <age>

<myList> هي العنصر الرئيسي بالملف root node
<person> هي ابن او child لـ mylist
<name> ، <email> ، <age> هي عناصر elements او ابناء لل person
الان لا يوجد قانون او قاعده تجبرني على انتقاء هذه الكلمات مثلا،
ممكن استعمل بدل من <myList> ان استعمل <myFriendsList>

نلاحظ وجود تاغ tag مشابه بالاسم ولكنه يحوي / هذا يسمى close tag او تاغ الاغلاق
وهذا من شروط ال xml يجب عليك ان تغلق كل التاغات التي تفتحها، وان تحافظ على ترتيب الفتح والاغلاق

مثلا
كود PHP:

<person>
<name>ahmad</name>
<email>ahmad@someemail.com</email>
<age>25</age>
</person>

لاحظو معي ترتيب الفتح والاغلاق، فتح person وبداخله:
فتح name وقيمه له ثم اغلاق name
فتح email وقيمه له ثم اغلاق email
فتح age وقيمه له ثم اغلاق age
اغلاق person


لا يجوز مثلا عمل هذا

كود PHP:

<person>
<name>ahmad</person>
</name>

ترتيب الفتح يجب ان يكون مطابق للاغلاق وهذا يسمى nest او nesting
يعني يجب ان يكون ال nesting صحيح.

الان يمكن ان تكون القيم بداخل ما يسمى attribute وليس داخل عناصر elements كما في المثال السابق
فتصبح مثلا:

كود PHP:

<myList>
<person name="ahmad" age="18" email="[email protected]"></person>
<person name="khaled" age="22" email="[email protected]"></person>
</myList>

هذه افضل من ناحيه الحجم وكميه الكتابه، اذا كنت تبني ملف ال xml الخاص بك لك الحريه بالانتقاء اما اذا كنت تبني ملف xml سيتم استعماله من قبل نظام اخر يجب ان تلتزم بقوانين هذا النظام.

شيء اخر ممكن ان يكون تاغ الاغلاق عباره عن / بنهايه التاغ الاول بدون اعاده كتابته، مثال:

كود PHP:

<person name="ahmad" age="18" email="[email protected]"></person>
يصبح
<person name="ahmad" age="18" email="[email protected]" />

لاحظو معي اضافه / فقط والاستغناء عن </person> كامله. هذا جائز ايضا.

الان نحن نصمم شاشاتنا للاندرويد بهذا الشكل كل زر او مربع نص او صوره او اي عنصر نريد استخدامه في برنامجنا سنكتب له تاغ بالملف ليتمكن النظام من بناء واجهتا... لا تقلقو لن نكتب الملف كامل فهناك اداه داخل بيئه العمل تسهل ذلك بشكل بسيط سنراها في المستقبل ان شاء الله.

ويأتي الجزء الثاني وهو البرمجه، ويكون بملف مختلف عن هذا الملف، ويكون بلغه ال Java لهذا نحتاج لربط العناصر الموجوده في ملف التصميم GUI مع الملف الذي يحوي الكود لكي تستطيع التحكم بهذه العناصر، والكتابه بها او اخذ قيمه منها او عرض صوره معينه عليها وهكذا...
هذا الربط يكون بنفس ملف البرمجه من خلال كود معين سنتطرق اليه في وقتها.

في الاندرويد كل شاشه بها عناصر مثل الزر والقوائم الخ، تسمى Activity او نشاط، لكن لا احبذ هذه الترجمه ممكن نستخدم كلمه فعاليه مثل التي بالمهرجانات مثلا، فالمهرجان به عده فعاليات او فقرات، وكذلك برنامج الاندرويد كل برنامج به عده شاشات او فعاليات نبني كل واحده منهم على حدى من ناحيه GUI وكذلك من ناحيه الكود الخاص بها ونربطهم معا حسب المنطق الذي نريده

كل فعاليه تحتاج ملف برمجه وملف GUI، ملف البرمجه يكون بلغه Java وملف ال GUI يكون مكتوب على شكل ملف XML الذي شرحناه الان.



فيما يلي ملف xml بسيط لشاشه (او فعاليه) او activity لبرنامج اندرويد بسيط:

كود PHP:

<?xml version="1.0" encoding="utf-8"?>

<TableLayout
android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1"
xmlns:android="http://schemas.android.com/apk/res/android">

<TableRow>
<TextView
android:text="User Name"
android:padding="3dip" />

<EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/txtLoginUsername">
</EditText>

</TableRow>

</TableLayout>

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

<?xml version="1.0" encoding="utf-8"?> هو الترويسه التي تكلمنا عنها
<TableLayout هو تاغ لشيء يسمى layout وهو معروف بالجافا حيث انه يحدد الطريقه التي سيتم عرض العناصر بها على الشاشه من ناحيه ترتيبها واحتلالها للمساحات... هنا نستعمل واحد نوعه table
وهذا تاغ البدايه له.

android:id="@+id/TableLayout01"
android:layout_width="fill_parent"
هذه عباره عن خصائص او attributes للتاغ السابق... لا تقلقو كلها تأتي جاهزه لن نكتب بها شيء ربما نغير كلمه او اثنتين لكن الملف الرئيسي يتم بنائه بشكل سهل جدا.

سوف اقوم بتجاهل بعض التاغات الان وسأشرحها بوقت لاحق ... لنأخذ هذا الان <TextView
هو تاغ يعني ان هناك شيء اسمه textView سيكون ظاهر على الشاشه وهو عباره عن مربع يمكن الكتابه به وقت البرمجه او من خلال الكود فقط ولا يمكن للمستخدم ان ينقر عليه ويكتب من لوحه المفاتيح، فهو يكون لوضع عنوان لشيء ما ... "مثلا اسم المستخدم" ويكون بجانبه عنصر اخر هو مربع نص لكي ينقره المستخدم ويكت به الاسم، اي انه شيء للتوضيح والدلاله.

التاغ <EditText هو مربع نص يمكن للمستخدم الكتابه بداخله من خلال لوحه المفاتيح، ويكون لاخذ مدخلات من المستخدم لكي نعالجها ببرنامجنا.

لاحظو معي كافه الاغلاقات للتاغات موجوده وبالترتيب واخر شيء اغلاق التاغ
الرئيسي وهو تاغ الـ </TableLayout>
*** هناك قاعده بسيطه لترتيب الفتح والاغلاق وهي: اول تاغ تفتحه هو اخر تاغ تغلقه وهكذا... لاحظو ان اول تاغ تم فتحه هو <TableLayout واخر تاغ تم اغلاقه هو </TableLayout> وبداخلهما كل التاغات الاخرى.

سأقف هنا في هذا الدرس، سيكون الدرس التالي نظره تفصيليه اكثر على ملف GUI ال XML حتى نفهم كل شيء يهمنا به وبعدها ننتقل الى ملف الكود الذي سيشغل البرنامج.

قد اكون تكلمت كثيرا عن ال XML هنا ولكنه شيء مهم برأيي لانك بالمستقبل ستبني واجهات قد تكون معقده قليلا فإذا لم تفهم بشكل جيد البنيه للملف وقواعد الكتابه به، لن تستطيع انجاز عملك بسهوله

والى درس قادم ان شاء الله،