الرئيسية / برمجة الأندرويد / لعبة الرياضيات: مشروع سهل للتدريب على تطوير تطبيقات الاندرويد للمبتدئين

لعبة الرياضيات: مشروع سهل للتدريب على تطوير تطبيقات الاندرويد للمبتدئين

اندرويد ستوديو

أفضل طريقة للتعلم هي الممارسة

يمكنك القراءة عن تطوير تطبيقات الاندرويد وكيفية الربح منها حتى تمل او يفتر حماسك ، ولكن في نهاية المطاف

يجب عليك إنشاء شيء ما إذا كنت تريد الحصول على فهم حقيقي لكيفية عمل كل شيء وكيفية برمجة
تطبيقات الاندرويد التي لطالما شدت انتباهك.

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

حتى تتمكن من التعامل مع اندرويد ستوديو (برنامج انشاء تطبيقات الاندرويد)وتبدأ في محاولة إنشاء تطبيقك الأول

أفضل طريقة للتعلم هي من خلال الممارسة

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

سأعمل على افتراض أنك قمت بقراءة خلفية بسيطة على جافا و اندرويد، ولكنني سأستمر في استعراض كل شيء قدر الإمكان لإرشادك خلال العملية.

حيث يجب أن يكون المشروع مثاليًا لشخص جديد في تطوير تطبيقات الاندرويد.

سوف نقوم معا بانشاء لعبة الرياضيات. لكن هذا ليس مهمًا حقًا. حيث يمكنك بسهولة عكس هذا المشروع ليكون أي شيء آخر تريد صناعته من خلال ما ستتعلمه!

قم بتحضير قهوتك لأن الرحلة على وشك ان تبدأ

إذا لم يكن لديك نسخة من اندرويد ستوديو ، فاضغط على هذا الرابط وابدأ تحميله الأن لأنه اساس عملنا في هذا المشروع.

بمجرد التثبيت ، قم بتشغيل مشروع جديد ، ولكن تأكد من اختيار “نشاط فارغ” (Empty Activity).

وهذا يعني أن “نموذج” التطبيق سيكون فارغًا وخاليًا من الأزرار والقوائم التي يمكن أن تتعقّد في حالتك كمبتدئ. اترك جميع الخيارات الأخرى كإعداد افتراضي.

يحتوي اندرويد ستوديو على الكثير من النوافذ ، والتي قد تكون مربكة جدًا عند البدء لأول مرة.

لذا ما عليك سوى التركيز على أهم اثنين: النافذة مع الاكواد البرمجية الموجود على اليمين والأخرى مع الدليل على اليسار.

شرح بيئة العمل

النافذة على اليمين هي المكان الذي تقوم فيه بإدخال وتحريرالكود.

النافذة على اليسار هي المكان الذي تختار فيه الملف الذي تريد تحريره. يمكنك أيضًا فتح عدة ملفات في وقت واحد

ثم النقر بينهما باستخدام علامات التبويب الموجودة أعلى النافذة الرئيسية.

الآن ، يجب أن يكون لديك ملفين مفتوحين: activity_main.xml و MainActivity.java. من المرجح أن يتم اختيار الأخير وستتمكن من رؤية الكود الأساسي الذي يحتوي عليه.

هذا الرمز هو ما نسميه “الشفرة المتداولة” (Boilerplate code) – الرمز الافتراضي اندرويد ستوديو يقوم بكتابتها نيابة عنك.

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

هذين الملفين مفتوحين لأنهما أهم الملفات في أي مشروع جديد. النشاط ( Activity ) هو أي شاشة مستقلة في تطبيق ما .

يتكون هذا الملف من ملفين: أحدهما لتحديد ما سيكون عليه التطبيق ، ويسمى ملف XML ، وواحد لتحديد كيفية تصرفه او عمله ، ويسمى ملف java.

يخبر ملف XML اندرويد ستوديو بمكان وضع الأزرار والصور وأي ملفات مهمة أخرى. وفي الوقت نفسه ،

يحدد ملف جافا كيفية سلوك هذه الأزرار والصور ، مثل ما يحدث عند النقر فوق أحد الأزرار.

ستجد MainActivity.java في: app> java> [اسم الحزمة لتطبيقك]> MainActivity.

لا يمكن أن تحتوي أسماء الملفات على مسافات ، ولا يمكن لملفات الموارد استخدام الاحرف الكبيرة عند تسميتها ، وهذا هو سبب انضمام الكلمتين عبر شرطة سفلية.

البدء بإنشاء واجهات التطبيق (views)

انقر على علامة التبويب في الأعلى التي تشير إلى “activity_main.xml” للانتقال إلى هذا الملف. تأكد من تحديد علامة التبويب” تصميم” في الجزء السفلي من الشاشة بدلاً من علامة التبويب “نص” (التي تعرض رمز XML).

تسمح لك طريقة عرض التصميم هذه بسحب وإفلات العناصر على الشاشة لتعيينها بالطريقة التي تريدها.

تستخدم معظم تطبيقات الاندرويد “طرق العرض” ، وهي جميع العناصر التي ربما تكون معتادًا عليها من استخدام التطبيقات على جهازك ، مثل الأزرار والصور ومربعات النص.

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

تسمح لك طريقة عرض التصميم هذه بسحب وإفلات العناصر على الشاشة لتعيينها بالطريقة التي تريدها.

سحب وإفلات العناصر على الشاشة لتعيينها بالطريقة التي تريدها

لديك “textView” واحد في منتصف الشاشة التي تقول “HelloWorld”. سنقوم بتحويل ذلك إلى عنواننا.

ولكننا نريد أيضًا عرضين نصيين آخرين أسفل ، لإظهار الرقمين اللذين نرغب في تقديمهما للمستخدم ، بالإضافة إلى “editText” التي سيتم استخدامها لهم لإدخال إجاباتهم.

استخدم العنصر في لوحة تسمى “الرقم” وهذا سيحصر الإدخال على الأرقام عبر الإنترنت. وأخيرًا ، أضِف زرًا حتى يتمكن من إرسال رده وعرض نص نهائي لتوضيح ما إذا كان صحيحًا أم لا.

من المرجح أن هذه العناصر يمكن أن تكون عنيدة قليلاً وترفض أحياناً الذهاب إلى المكان الذي تريده. هذا لأننا نستخدم نوعًا من التنسيق يسمى “ConstraintLayout ”

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

بعد الانتهاء من ذلك ، يمكنك عندئذٍ تعديل موضعه بين تلك النقاط الثابتة.

يجب أن ينتهي الأمر بشيء يبدو قليلاً مثل الصورة في الأعلى، ولكن يرجع إليك كيف تريد وضع العناصر الخاصة بك!

تسمية وتخصيص طرق العرض

حدد أيًا من طرق العرض, ويجب أن تخبرك النافذة التي على اليمين باسم “السمات” (attributes ) قليلاً عنها.


كما يمكنك تغيير خصائص مثل اسم العرض أو النص الذي يعرضه. إذا اخترت “Hello World!” ، فيمكنك تغيير هذه الكلمة الى اسم تطبيقك من خلال تعديل الخيار الذي يقول “text”.

دعنا نغير ذلك إلى “لعبة الرياضيات” وبالمثل ، قم بتغيير النص الموجود على “الزر” بحيث يقول “إرسال” وجعل الآخرين فارغين.
اختر الآن النص الفارغ الأول لعرض وتغيير الخيار في أعلى السمات التي تشير إلى “المعرف” إلى “الرقم 1”.

لن يظهر هذا “المعرف” من قبل المستخدم ، ولكنه يستخدم لتحديد وجهات نظرنا من داخل كود جافا.

إذا أردنا كتابة تعليمة برمجية لتغيير سلوك العرض ، فسنحتاج إلى إبلاغ اندرويد ستوديو عن العرض الذي سنقوم بتغييره!

وأخيرًا ، انقر على الزر مرة أخرى وأين تظهر عبارة “onClick” ، واكتب “onSubmitClick”. “onClick” عبارة عن جزء من الكود يتم تنفيذه عند النقر على الزر.

العمل على كود الجافا داخل التطبيق

أصبح تطبيقك الآن جميلاً للغاية ، لكنه لا يفعل الكثير حتى الآن. لعلاج ذلك ، عد إلى ملف “MainActivity.java” عن طريق اختيار علامة التبويب على طول الجزء العلوي عند فتح هذه الصفحة

يمكنك الآن البدء في إضافة رمز يخبر تلك الأزرار والنصوص في كيفية التصرف

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

تذكر أننا ذكرنا أن شفرة ” Boilerplate code ” هو كود تم ملئه من خلال اندرويد ستوديو نيابةً عنك.

يتضمن هذا الأسلوب “onCreate” ، وهو جزء من التعليمة البرمجية يتم تشغيله بمجرد إنشاء أحد الأنشطة. الأساليب

(Methods ) هي ببساطة حزم ملائمة من التعليمات البرمجية ، والتي يتم تضمينها بين الأقواس المتعرجة.

يمكننا أن نرى ذلك في هذا المثال:

setContentView(R.layout.activity_main);

هذا ما يخبر جافا أن activity_main.xml هو المكان الذي يتم فيه تحديد التخطيط. كما يعني أيضًا أنه يمكننا الآن الرجوع إلى وجهات نظرنا من هذا الملف باستخدام المعرّف.

لذا ، إذا أردنا تغيير نص العرض الأول ، فيمكننا القيام بما يلي:

Int value1 = 12;
TextView Number1 = findViewById(R.id.Number1);
Number1.setText(“” + value1);

شرح الكود

إذا شاهدت سطرا باللون الأحمر ، فستحتاج إلى “كلاس” الذي يخبر اندرويد ستوديو بالاضافات التي تريدها ، لذلك انقر فقط على النص الذي تحته خط أحمر ثم انقر على “Alt + Enter” وفقًا للتعليمات للوصول بسرعة إلى هذه الميزة!

ما حدث هنا هو أننا أنشأنا متغيرًا يمثل القيمة ، في هذه الحالة ، التسمية هي القيمة 1 وتمثل العدد الكامل (عدد صحيح) 12. وهي عدد صحيح (integer) يسمى القيمة 1 وهي تساوي العدد 12.

سنقوم بعد ذلك بتحديد موقع TextView بالقول إننا نريد إنشاء TextView ظاهري ، والذي سيمثل TextView بالمعرف “Number1” من ملف التخطيط ( layout ) الخاص بنا. ثم نقوم بتعيين نص TextView بحيث تمثل القيمة 1.

هذا TextView ، يسمى Number1 والمصدر هو R.id.Number1.

اظن ان الأمر يبدو مربكا قليلا مع وجود هذه الأكواد

ثم يمكننا الوصول إلى “ميزة” في TextView لنقل “setText”.

السبب في أننا نقول “” + value1 هو أن TextViews تتوقع سلاسل أحرف (strings of characters, )، وليس أرقام. باستخدام علامات الاقتباس الفارغة هذه ، نقول “لا يوجد نص ، بالإضافة إلى الرقم”.

يمكننا القيام بنفس الشيء لـ Number2 بنفس الطريقة.

كيف نجعل هذه الأكواد تتفاعل مع بعضها البعض لتعمل

قد تتسائل عن معنى ذلك في ما يتعلق بـ OnSubmitClick.لذلك سنضيف بعض أسطر الكود “للاستماع” إلى النقرات على هذا الزر وسنجمعها معًا كطريقة تسمى “onSubmitClick”.

يحدث أي شيء في onCreate عند بدء تشغيل التطبيق وأي شيء في onSubmitClick يحدث عند النقر فوق زر الإرسال (لأننا حددنا الطريقة في عرض التصميم)!

ماذا يحدث عندما ينقر شخص ما على هذا الزر؟

أولاً ، نريد التحقق من الرقم الذي تم ادخاله في نص ‘EditText’. ثم ، إذا كان هذا الرقم يساوي القيمة 1 + القيمة 2 ، فسوف نخبرهم بأنهم قد قاموا بتصحيحه عن طريق تحديث ‘Answer TextView’.

إذا قاموا بذلك بشكل غير صحيح ، فسنقوم بتحديث العرض ليعكس ذلك مع عرض ما كان يجب أن يكون عليه.

وهذا يعني تحويل الأعداد الصحيحة (الأرقام) إلى سلاسل (كلمات) والعودة مرة أخرى ، وكذلك استخدام عبارة “إذا” (if) للتحقق من صحة القيمة المقدمة. يبدو الأمر برمته كالتالي:

public void onSubmitClick (View view){
TextView Answer = findViewById(R.id.Answer);
EditText Attempt = findViewById(R.id.Attempt);
int userAnswer = Integer.parseInt(Attempt.getText().toString());
if(userAnswer == value1+value2) {
Answer.setText(“Correct!”);

} else {
Answer.setText(“Wrong, the correct answer was: ” + (value1+value2));
}

}

تجربة التطبيق

على الرغم من ذلك لن يعمل التطبيق، لأننا لا نستطيع الوصول إلى القيمة 1 أو القيمة 2 – فهي بطريق مختلفة.

لإصلاح هذه المشكلة ، يمكنك نشرها خارج ‘onCreateMethod ‘وستكون متاحة الآن للإشارة إلى أي مكان في الكود .

كما لا يمكننا للأسف فعل الشيء نفسه بالنسبة إلى أزرارنا ومرات عرض النص لأننا لن نتمكن من تجربة عرض التطبيق حتى يتم تنفيذ onCreate.

لقد حصلنا على TextView و EditText كما فعلنا من قبل.

بعد ذلك ، سننشئ عددًا صحيحًا باسم userAnswer يستخدم “getText” لاسترداد النص من المحاولة و parseInt لتحويل هذه الأحرف إلى رقم.

يعمل if مثلما هو الحال في اكسل. طالما كان المنطق داخل الأقواس صحيحًا ، فسيتم تنفيذ الكود الموجود بين الأقواس المتعرجة.

وطالما أن userAnswer هو نفس القيمة 1+ value2 (استخدمنا علامتين متساويتين هنا لأن هذا من اساسيات جافا) ، فسنضع الإجابة على “صحح!”

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

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

يجب أن يظهر الكود البرمجي بأكمله الآن على النحو التالي:

public class MainActivity extends AppCompatActivity {

int value1 = 12;
int value2 = 64;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView Number1 = findViewById(R.id.Number1);
Number1.setText(“”+value1);
TextView Number2 = findViewById(R.id.Number2);
Number2.setText(“”+value2);

}
public void onSubmitClick (View view){
TextView Answer = findViewById(R.id.Answer);
EditText Attempt = findViewById(R.id.Attempt);
int userAnswer = Integer.parseInt(Attempt.getText().toString());
if(userAnswer == value1+value2) {
Answer.setText(“Correct!”);

} else {
Answer.setText(“Wrong, the correct answer was: ” + (value1+value2));
}

}
}

حاول تشغيل التطبيق عن طريق توصيل هاتفك الذكي بجهاز الكمبيوتر الخاص بك و تأكد من تشغيل تصحيح الاخطاء ( USB debugging ) قبل النقر على التشغيل.

يمكنك أيضًا اختباره على برنامج محاكاة إذا قمت بإعداد ذلك من قبل.

اللمسات الأخيرة

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

تجربة التطبيق

يمكنك التدرب على المشاريع التالية وتنشئ من خلالها تطبيقا خاصا بك ..

الى هنا انتهى مشروعنا الأول حول انشاء تطبيقات الاندرويد واسمح لنا بمعرفة رأيك من خلال التعليقات ادناه..

و حظا سعيدا مع التطبيق الخاص بك!

شاهد أيضاً

AppOnboard تستحوذ على منصة Buildbox الرائدة في صناعة الألعاب

منصة AppOnboard تستحوذ على buildbox أعلنت كل من شركتي AppOnboard و Buildbox الرائدتان في صناعة …

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *