تعلم برمجة تطبيقات الاندرويد

img

0

برمجة تطبيق شات الدرس الأول

برمجة تطبيق شات الدرس الأول

 

الدرس التالى >>

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

 

نظرة عامة على تطبيقات الشات

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

 

 

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

إن تطبيقات الشات رائعة لكن الأروع ان تعرف كيف تعمل والأروع اكثر أن تقوم بصناعة تطبيق شات بنفسك وهذا ما سنقوم به فى هذه السلسلة وسنعلمك كيف يعمل الشات بشكل عام والانواع الشائعة له  فستجد أن هناك نوع بسيط من الشات يعتمد على طريقة ارسال وتبادل البيانات العادية حيث ترسل http request بشكل عادى الى السيرفر وتستقبل http response واذا كانت هذه المصطلحات غريبة عليك القى نظرة على تدوينة ما يجب أن يعرفه كل مبرمج عن الـ Http وبمساعدة ال push notification بال fcm او gcm سابقا يصبح لديك شات فورى .

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

يوجد نوع اخر من تطبيقات الشات يعتمد على الـ Sockets يمكنك اجراء بحث قصير فى جوجل والتعرف على الـ Sockets وسنتطرق اليها مستقبلا ان شاء الله  ونشرح طريقة عمل تطبيق شات باستخدام الـ Sockets (ملحوظة الفاير بيز يستخدم الـ Sokets ايضا لكن لم نقم بشرحها مباشرة لانك لن تعلم ما الذى حدث فى جهة الفاير بيز وستكتفى بالتطبيق وكتابة سطور بسيطه جهة الاندرويد فقط  ولن تعرف ما الذى حدث بالضبط لكن نريد ان تعتمد على نفسك وتنشىء شات معتمدا على نفسك بكل تفاصيله من جهة الاندرويد وجهة السيرفر ) لكن الان سنكتفى ب php/mysq لنبقى الامور بسيطة قدر الامكان ستتعلم الاساسيات والمجال مفتوح امامك للابحار والتعمق فى الامر ان اردت وسنشرح باستخدام php/mysql لان المتطلبات متوفرة بسهولة اى استضافة مجانية تدعم php يمكننا تطبيق الشرح عليها بالاضافة لشرح عمل تسجيل وتسجيل دخول اضافة الى عمل Session بالـ realm اى سنتعلم عدة مواضيع وليس مجرد عمل شات فقط نظرا لان عدة اشخاص طلبوا منى شرح realm من قبل وكذلك موضوع تسجيل الدخول وال Session سنقوم باإنشاء تطبيق شات بسيط يدعى Hendienger وهو عباره عن كلمة Hendiبالاضافة للمقطع الاخير من كلمة Messanger ?

 

وسنبدأ اليوم بموضوع تسجيل الدخول .

 

 

التسجيل وتسجيل الدخول

 

 .

 

 

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

وسنبدأ ببرمجة جهة السيرفر او الـ api وساستخدم ال php يمكنك استخدام اى لغة اخرى وانجاز جهة السيرفر بها والمتابعة معنا جزء الاندرويد والان  إننا نريد ان يسجل المستخدمين بياناتهم أولا حتى يستطيعوا الدخول للشات سواء اقوم ببرمجة نظام تسجيل وتسجيل دخول للشات أو لأى شىء اخر فاننى احتاج الى انشاء جدول فى قاعدة البيانات mysql واذا كنت تابعت سلسلة ِAndroid Webservices بالعربية او لديك خبرة مسبقة فى التعامل مع mysql وقواعد البيانات فأنت مستعد للمتابعة اذا كنت لا تعرف ما هى قاعدة البيانات وما هى mysql يمكنك متابعة السلسلة التى شرحنا فيها الويب سيرفس ثم العودة لهذه التدوينة .

جدول المستخدمين users

البيانات التى يريد العضو ان يقوم بادخالها عند التسجيل هى ” الاسم ، الإيميل، الباسورد ”  لذلك سأنشىء جدول الـ users كالتالى :

id
username
email
password

سأستخدم استضافة hostinger المجانية لتطبيق الخطوات حتى تتاح الفرصة للجميع للتجربة والتطبيق يمكنك استخدام اى استضافة مجانية أو سيرفرك الشخصى ن كان لديك سيرفر سنقوم بإنشاء قاعدة بيانات جديدة على الاستضافة او السيرفر ثم انشاء جدول الـ users بالاعمدة السابقة  كالتالى :

 

الان لدينا الجدول users جاهز للاستخدام

 

عملية التسجيل تتلخص فى اننا نأخذ بيانات المستخدم ونخزنها بهذا الجدول

عملية تسجيل الدخول تتلخص فى اننا سنقوم باخذ اسم المستخدم وكلمة المرور من المستخدم لنفحص هل هذا المستخدم مسجل أم لا وإن كان المستخدم مسجل هل الباسورد الذى اعطاه لنا هو نفسه المسجل لدينا إن كان نعم نرد على تطبيق الاندرويد بأن البيانات صحيحه لنعالج الامر من جهة الاندرويد لكن لننهى الامر من جهة ال php اولا وسأستخدم Marei DB وهى مكتبة لتسهيل الـ Queries وقمنا بعمل تدوينة عنها سابقا كلاس Marei DB للتعامل مع قواعد بيانات MySQL بسهولة قم بتحميلها الان من هذا الرابط 

بعد التحميل نقوم بفتح الكلاس بأحد المحررات قم بفتح أى محرر تفضله وعدل الوضع الى production ثم ادخل بيانات قاعدة البيانات حيث توفر الكلاس وضعين وضع التطوير ووضع ال production سنستخدم ال prodcution مباشرة وان حدثت اخطاء نقوم بالتحويل على وضع ال development لنرى ماذا يحدث أدخل بيانات قاعدة البيانات الخاصة بك فى ال production ثم قم بحفظ الملف

 

الان سنقوم بكتابة ملف php كل مهمته أن يستقبل منا بيانات العضوية ويقوم بالتسجيل حيث سنقوم بالاتصال بهذا الملف عن طريق الرابط الخاص به واعطائه البيانات سواء على شكل parameters او حتى كـ body ويقوم هو بالتسجيل ولأن الاغلب يستطيع التعامل مع الباراميترز وارسالها لذلك سنستخدم طريقة ارسال المستخدم كـ body عباره عن json ويتم عمل parse من خلال php وتسجيل العضوية فى mysql والرد بـ json

التسجيل : ملف register-user.php

سنقوم بانشاء هذا الملف ليستقبل منا بيانات المستخدم ويسجل مستخدم جديد فى قاعدة البيانات ويرد علينا بـنتيجة التسجيل على هيئة json  :

شرح السطور :

1- وسم فتح ال php

4- عمل include لـ Marei DB لنستخدمها لاحقا

6- جلب المحتوى المرسل لملف php عند استدعائه اى اننا عندما ننادى ملف php نرسل body مع الريكوست هذا السطر نقوم فيه باستقبال هذا الbody وتخزينه فى المتغير data

7- إنشاء json object من هذا المحتوى حيث أننا سنقوم بارسال JSON من الاندرويد الى ملف ال php كالتالى  {“username”:”ahmed”,”password”:”123456″,”email”:”hendi@mail.com”} ويقوم ملف ال php باستباله وعمل json object منه .

9- إنشاء instance او object من Marei DB لنقوم باستخدامها حيث يجب أن نقوم بانشاء object من الكلاس كالمعتاد لاستخدام الكلاس  وهذا الـ object باسم obj

11- نحدد نوع ال header لكى يتم ارسال نوع ال response بانه json وهو ما سنرد به على الاندرويد من خلال php

13 الى19 – نقوم بفحص القيمة username هل يحتوى عليها ال object ام لا والقيمة email والقيمة password وهى ال keys فى الJSON الذى سنقوم بإرساله وهو {“username”:”ahmed”,”password”:”123456″,”email”:”hendi@mail.com”}

20 الى 22 – نقوم بعمل متغيرات جديدة باسم username و email و password بقيم obj .

24 الى 29 نقوم باستخدام Marei db واستخدام الميثود insert والتى تأخذ باراميترين الأول هو اسم الجدول لذلك اعطيناه اسم الجدول الذى أنشأناه سابقا users والباراميتر الثانى عباره عن array من القيم كل قيمة تحتوى على اسم ال coulm وقيمته فى الجدول .

31- 33 نقوم بفحص اذا ما تم ال qury بنجاح  أم لا وفى حالة تم بنجاح نقوم بطباعة json يحتوى على قيمتين success وهى 1 وmessage وهى رسالة

ويجب أيضا ان نقوم بعمل حالة عدم نجاح الـ query لذلك سأضيفها للملف كالتالى

 

الان انتهينا من جانب php ويتبقى الان ان نقوم بالتجربة لذلك سأقوم برفع الملف الى الاستضافة المجانية الخاصة بى والتجربة وسأستخدم أداة postmanللتجربة

ملحوظة : postman هى اضافة لجوجل كروم تمكنك من تجربة اى api او اجراء اى http calls تريد تجربتها مباشرة .

1- نضع الرابط الخاص بالملف الذى رفعناه

2 ،3، 4 – نحدد ال body ثم نحدد row بالاضافة الى JSON اى اننا سنرسل json ونضع الجيسون الذى نرسله الى ملف  php

5- هو الراجع او ناتج العملية رد ملف php علينا وهو يخبرنا هنا ان الحالة 1 وانه تم تسجيل المستخدم بنجاح .

سنقوم بالذهاب لقاعدة البيانات وسنرى أنه تم تسجيل العضو بنجاح

 

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

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

الكود  المشار له باللون الاحمر هو ما تم اضافته وهو سطر نقوم فيه بعمل check على الايميل ان كان موجودا من قبل ام لا ان كان موجودا نقوم بارجاع JSON بان ال status هو 2  والرسالة هى ال Email Already Registerd اما ان كان غير ذلك فتابع كما كتبنا من قبل لذلك

واستخدمنا الميثود table اعطيناها اسم الجدول والميثود where لتحديد الحالة واعطينها اسم العمود والقيمة ثم استخدمنا الميثود get اذا كان هناك نتائج سابقة فعند استدعاء $db->getCount() وهى تعود لنا بعدد الصفوف لاخر استعلام تم من خلال Marei DB فانه ان كان عدد الصفوف او النتائج اكبر من 0 فان الايميل موجود فعلا من قبل هذا هو الامر ببساطه نقوم بحفظ الملف ونرفع للاستضافة .

نقوم بالذهاب الان لل postman للتجربة

رئع سنجرب ايميل اخر لنتأكد انه سيقوم بالتسجيل وسنكتب ali@mail.com بدلا من hendi@mail.com  والنتيجة انه رد علينا بـ status 1 ونذهب لتفحص قاعدة البيانات لنجد

تم التسجيل بايميل ali@mail.com بنجاح ولا تتوقع منا ان نقوم بشرح ارسال verification email ايضا سنتابع الان لتسجيل الدخول واذا اردت تعلم ال email verification يمكنك القاء نظرة على هذا الدرس .

 

تسجيل الدخول – ملف login-user.php

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

سيكون الكود كالتالى :

السطر 22-25 عباره عن استعلام عن الاسم والباسورد والذى تم ارسالهم بواسطة المستخدم من الاندرويد  باستخدام marei db واذا كان هناك نتائج اى ان المستخدم  موجود بالايميل والباسورد هذا فبالتأكيد db getCount ستكون قيمتها اكبر من 0 اما اذا لم يوجد مستخدم بالايميل والباسورد ستعود لنا ب 0 نقوم بطباعة json الناتج .

 

نقوم برفع الملف للاستضافة ونقوم الان بالتجربة بواسطة postman

ولاحظ انى فى الـ JSON المرسل تركت username كما هو رغم اننا لسنا فى حاجه اليه ويمكنك حذفه وارسال الايميل والباسورد فقط لكن تركته لتعلم ان ارسال عناصر اضافية لا يؤثر المهم القيم التى يحتاجها الملف فقط هى ما تتم معالجتها .

سنقوم بتعديل الباسورد وجعله خاطىء ونشاهد النتيجة

 كذلك ان قمنا بجعل الايميل خاطىء او ادخال اى ايميل غير موجود فى قاعدة البيانات فستعود لنا النتيجة status 0

الان ال الجزء الخاص بالتسجيل وتسجيل الدخول من ال api الخاص بنا جاهز وهو كالتالى

 

 

وانتهينا من جزء ال api جهة السيرفر  وتستطيع استخدامه والاتصال به من خلال httpurlconnection او retrofit او volley واستخدامه لتسجيل مستخدم بالاندرويد او حتى IOS باى طريقة تحبها

الان سنقوم بالانتقال لجهة الاندرويد

 

التسجيل وتسجيل الدخول Android

نقوم  بتصميم الصفحات السابقة للتسجيل وتسجيل الدخول بـ xml وتعريف المكونات فى جافا وسنستخدم مكتبة butter knife والتى تحدثنا عنها فى تدوينة سابقة لكن تغيرت صيغتها قليلا فى التحديث الاخير للمكتبة ويمكنك مراجعة ابرز التغيرات والصيغة الحالية للمكتبة من خلال موقع جاك وارتون على جت هاب .

بعد تصميم صفحتى التسجيل وتسجيل الدخول xml ثم تعريف المكونات فى جافا سواء استخدمنا butter knife او الطريقة العادية findViewByID سنقوم الان بتجهيز Retrofit  وهى مكتبة خاصة باجراء الاتصالات بالانترنت من خلال التطبيق وارسال واستقبال البيانات تحدثنا عنها سابقا فى تدوينة Android Webservices بالعربية – Retrofit  سنقوم الان بإضافة اصدار من المكتبة بالاضافة لاخر اصدار من gson converter وهى مكتبة التحويل من الJSON الى Models والعكس

ثم نقوم بالمزامنة

الان سنقوم بإنشاء ملف interface الـ Service او الـ API وهو ملف سيحتوى على كل الـ calls الخاصة بالتطبيق  كالتالى :

 

وسنتركه فارغا الان ثم نتابع لإنشاء الـ Retrofit Singletone وهو عباره عن كلاس سيقوم بانشاء intance واحد فقط من Retrofit لاول مرة ثم فى كل مرة يقوم باستخدام ال instance نفسه لاداء العمل وذلك كالتالى :

 

طبعا Urls باللون الاحمر لانه لا يوجد كلاس بهذا الاسم بعد لكن سنشرح الكلاس سريعا اذا لم يكن مألوفا لك ولم تقم بعمل singletone من قبل وهو عباره عن اننا لدينا كلاس يتم انشاء نسخة واحده منه فقط للاستخدام طوال الوقت وليس كل مرة اوبجكت جديد وفى الكونستراكتور عملنا init للـ Retrofit واعطيناها ال cllient و ال converter وال baseURL وهى الUrl الرئيسية للسيرفر وسوف اقوم الان بإنشاء الكلاس ووضعها

الان نعود لملف API لنقوم بتعريف الـ Calls الخاصة بنا او العمليات التى سنقوم بها لكن قبل ذلك أريد عمل models لما سيتم ارساله واستقباله من الـapi الذى انشأناه

وسنجد ان لدينا فى ال api عند الارسال نقوم بارسال JSON  كالتالى  {“username”:”ahmed”,”password”:”123456″,”email”:”hendi@mail.com”} 

لذلك سنقوم بإنشاء model يمثل هذا الـJSON وسأسمى الmodel باسم User ويوجد اضافة تقوم بإنشاء ال Model تلقائيا بناءا على الجيسون موجودة بقائمة  فى أدوات المطورين اسمها DTO Generator  يمكنك البحث عنها وتثبيتها او انشاء الـ model يدويا

والـ SerializedName هو الاسم الموجود كـ key فى الجيسون لذلك اذا غيرت كلمة username الى userFristName مثلا فيظل الكلاس يعرف ان هذا هو المقصود به username فى الـ JSON

وبالمثل الـ Response الخاص بالـ api يكون كالتالى {“status”: 1,”message”: “Welcome !”} والمهم هو الهيكل نفسه status و message سواء نجح وكانت status ب 1 او فشل وكانت ب0 وكذلك الmessage

لذلك سيكون الmodel كالتالى

 

والان نذهب للملف API ونقوم باضافة الـ calls التى نريدها ونريد الان فقط التسجيل وتسجيل الدخول كالتالى

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

 

سطور الـ FUtils هى جزء من مكتبة Futils التى نقوم بتطويرها حاليا وهى مكتبة بسيطة تضمن اغلب الاشياء التى نقوم بها باستمرار وبشكل روتينى فى معظم التطبيقات لتوفر الوقت والمجهود مثل تفحص الانترنت واظهار progress واظهار صفحةno internet مع زر اعادة التحميل الخ .. وبمجرد من ان تصبح جاهزة سوف نقوم بنشرها وشرحها يمكنك تجربتها الان باضافة هذا السطر للجرادل 

compile ‘com.hendiware.utils:futils:1.6.91’

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

بالنسبة للميثود setLoadingMode و setNormalMode هى خاصة باخفاء واظهار progress التحميل اى لا تعتبر جزء من الكود الخاص بالاتصال  .

قمنا بإنشاء اوبجكت User جديد ونقوم باسناد القيم اليه من الـ Edittexts والتى ادخل المستخدم بها القيم

ثم بعد ذلك استخدمنا ال singletone Websrevice باستدعاء الميثود getInstance يليلها getAPI ثم استخدمنا الميثود registerUser التى كتبناها مسبقا فى ملف API

ثم هناك احتمالين onResponse فى حالة نجح الاتصال بالسيرفر او onFailure فى حالة فشل الاتصال بالسيرفر لسبب مثل تغير ال url او توقف السيرفر او اى امر اخر .

بداخل onResponse لديك response ويمكنك الوصول للاوبجكت MainResponse القادم من السيرفر عن طريق response.body()  ثم نستخدم بعدها .statues مثلا لنجلب ال stause او message التى جعلنا ملف php فى ال api يعود لنا بهم

كما ترى الامر سلس جدا وريتروفيت تقوم بتحويل الـ JSON الى Models والعكس.

ننتقل الان الى كود الدخول سيكون قريب جدا من كود التسجيل وبنفس الطريقة لكن تختلف الميثود الخاصة من ملف API

الان كل شىء جاهز سنقوم بالتجربة

وعند ادخال بيانات تسجيل صحيحه

 

 

الكود الخاص بالتطبيق متاح على Github وسيتم تحديثه مع كل درس

ملفات الphp متاحة ايضا على Github

 

الكاتب mr-mooka

mr-mooka

مواضيع متعلقة

اترك رداً