Android Webservices

Android Webservices بالعربية – JSON Parsing

 

JSON Parsing تعنى معالجة الـ JSON فى التطبيق الخاص بنا حيث يكون لديك مصدر بيانات اون لاين يعرض JSON وعملية معالجتها فى لغة البرمجة تسمى بالـ Parsing  لكن أولا قبل أن نتعلم معالجة الجيسون سنتعلم ما هى الجيسون .
الـ JSON هو اختصار لكلمة Java Script Object Notation

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

لكن ببساطه الـ JSON مجرد اسلوب لتبادل البيانات بين جهتين !

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

كذلك عندما يتحدث ملف php مع تطبيق الأندرويد الخاص بك يمكنه أن يحدثه باستخدام الـطريقه العادية plain text أو يحدثه بطريقة الـ JSON أو  باستخدام الـ XML

وفى الدرس السابق من سلسلة الويب سيرفس   أعطيتكم الواجب الـ task التاليه  :

قم بإنشاء جدول باسم  posts  به اعمدة (id,postcontent,writer)فى قاعدة البيانات وقم بعمل ملف php باسم insertsposts وقم بعمل تطبيق أندرويد جديد  يحتوى على زرين

زر New Post يفتح لك أكتيتفى جديد به 2 Editext واحد لكتابة اسم الكاتب وواحد لكتابة بوست وزر ” Publish ” يقوم بنشر الـ post (ارساله الى قاعدة البياانات)

زر View Posts يفتح اكتيتفى جديد ويتصل بملف php باسم getposts ويقوم بعرض الـ posts على هيئة text  .والتى سنعمل المرة القادمة على عرض الـ posts كـ json واستقبالها فى الأندرويد .

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

لقد قمت بانشاء جدول posts واضافة بعض الموضوعات فيه سواء عن طريق الاندرويد وعمل صفحة addpost فى التطبيق وادخال البيانات للجدول عن طريق عمل ملف insertpost.php واستدعاؤه واعطاؤه البارامترز بطريقة الـ GET او الـ POST كما تم الشرح سابقا  أو اضافة الموضوعات من خلال الـ phpMyAdmin هذا لا يهم الان المهم اننا ادخلنا البيانات

ولعلك لاحظت أن استقبال الـ post على هيئة plain text او نص عادى فعند فتح الصفحة فى المتصفح تكون النتيجة كالتالى

getposts

وعند اجراء اتصال بهذا الملف من تطبيق الاندرويد وعرض النتيجة ستكون كالتالى :

andtoid

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

انه متغير نصى قطعة واحدة لا يوجد اى فاصل بين البوست الاول والبوست الثانى والبوستات الاخرى وبالتالى اذا فكرت فى تحويله الى list او تنسيقه بأى طريقة اخرى فستجد أن ذلك مقعد جدا  لذلك ظهرت لنا طريقه مثل الـ xml  وطريقة مثل الـ json  وهى مجرد طرق تسهل عليك تنظيم البيانات اثناء تبادلها  والـ JSON مجرد اسلوب او نمط لتنظيم البيانات كما سنرى الان .

مثال البياانات السابقة عند تحويلها الى صيغة  JSON

json

نرى الان فى الصورة السابقة ان البيانات تم تنظيمها وتنسيقها وبالتالى عند ارسال البيانات للجافا نستطيع التعامل معها بشكل سهل

مكونات الـ JSON

تتكون الـ JSON من خمس :

[] القوسين  المربعين  ويدلان على مصفوفة الجيسون JsonArray .

{} القوسان المعكوفين او ذوى الحواف المائلة ويدلان على الـ JSON Object  .

,  الفاصلة وتوضع بين المصفوفة والاخرى و بين الاوبجكت والاخر و بين القيم والقيم الاخرى .

“” علامات التنصيص ويوضع بينهم المفتاح والقيمة .

: النقطتين وهى تفصل بين كل مفتاح والقيمة الخاصة به

مثال:

 كائن جيسون ( JSON Object ) بسيط جدا

{"name":"Ahmed"}

تم استخدام { لفتح الاوبجكت واستخدام : للفصل بين المفتاح name والقيمة Ahmed  وتم استخدام } لغلق الاوبجكت

 

مثال  :

 كائن جيسون ( JSON Object ) يحتوى على أكثر من قيمة

{"name":"Ahmed","age":"50"}

تم استخدام {لفتح الاوبجكت واستخدام : للفصل بن المفتاح name  والقيمة Ahmed واستخدام  , للفصل بين القيمة الحالية لـ name و القيمة الاخرى لـ age  ثم الفصل بين المفتاح ageو القيمة 50 بـ : ثم اغلاق الاوبجكت باستخدام   }

 

مثال :

مصفوفة جيسون JSON Array تحتوى على 2 اوبجكت

[
    
  {"name":"Ahmed","age":60}  
  
  ,
  
  {"name":"Hager","age":25}
  
]

وتم الفصل بين الاوبجكت والاخر بفاصلة ,

مثال :

أوبجكت يحتوى على أكثر من مصفوفة

{
   "users": [{"name":"Ahmed","age":60} , {"name":"Hager","age":25}]
   ,
   "comments": [
       {"user":"sayyed","comment":"this is comment !"}
       , 
       {"user":"3loomi","comment":"this is comment too :D "}
       ,
       {"user":"hema","comment":"this is comment three :p "}
       ]

}

وتم الفصل بين المصفوفة users والمصفوفة comments  بفاصلة ,

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

 

نعود للملف getposts نريد جعل الملف ينتج لنا الـ posts على هيئة json  وليس بالصيغة العادية

لكن قبل ذلك قم بالذهاب الى ملف connectmysql.php او ايا يكن اسمه عندك الخاص بعمل الاتصال بقاعدة البيانات وامسح السطر  echo الخاص بطباعة كلمة “Connection Sucess” فلم نعد نحتاج اليها واحفظ الملف وارفعه للاستضافة مرة اخرى  .

 

php and JSON 

أغلب اللغات البرمجية تستطيع التعامل مع JSON وستجد  فى اللغات البرمجة Methods و Classes مخصصة للتعامل مع  JSON  سواء  لقراءة الـ JSON من أحد المصادر  أو   لإصدار بيانات بهيئة وتنسيق الـ JSON

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

 

قم بفتح ملف php الذى أنشاته فى task الواجب getposts.php الذى من المفترض ان يجلب محتوى جدول الـ posts  ومن المفترض أنه كالتالى :

php get

 

وكل ما يفعله أنه يجرى اتصال بقاعدة البيانات ويجلب النتائج ويطبعها سطر سطر .

سنقوم بتعديله ليقوم بإنتاج النتائج بصيغة  JSON كالتالى  :

json php

 

شرح السطور السابقة : 

1- وسم فتح وتعريف مستند php <?php

2- تضمين ملف الاتصال connecttomysql.php وهذا الشىء نفعله فى كل ملفات الـ php لتسطييع الاتصال بقاعدة البيانات .

3- قمنا بعمل متغير جديد $getposts  يتم فيه تحديد جميع النتائج من جدول الـ posts  .

4- قم بتنفيذ الـ query الموجود فى السطر الثانى باستخدام الكائن dbconnect الخاص بنا وخزن ناتج الـ query فى متغير جديد اسمه الـ $posts  .

5-  سطر فارغ

6- قم بإنشاء array جديدة فى php اسمها $postsarray  وهنا فى php لا تعرف الـ array مثلما نفعل فى الجافا name [] بل تعرف عن طريق عمل متغير = array() ;

7 – سطر فارغ .

8 – حالة while وهى بينما هناك ناتج لميثود mysql_fecth_array وهى تقوم بجلب النتائج من الـ posts سطر بسطر ويتم تخزين النتيجة كل مرة فى متغير مؤقت به كل بيانات الصف على هيئة مصفوفة  اسمه $row

9،10- سطور فارغة

11:14 – اعمل مصفوفة جديدة مؤقتة اسمها  $temp لنستخرج فيها النتائج من الـ row   و الـ $row تعتبر مصفوفة مؤقتة  ايضا يتم تمرير القيمة الخاصة بالـ id من  row الى temp وكذلك القيمة الخاصة بـ postcontent من الـ row الى الـ temp وهكذا الى ان تنتهى أعمدة الجدول .

15،16- سطور فارغة

17- قم بإضافة  الـ temp بكل ما يحتويه من بيانات قام بسحبها من الـ row  فى المصفوفة $postsarray  باستخدام الميثود او الدالة array_push وهى تشبه عندنا فى جافا list.add()

18- قوس اغلاق ونهاية الـ while

19- سطر فارغ

20- استخدم الدالة json_encode وقم بتنسيق المصفوفة postsarray بهيئة JSON واجعل اسمها posts  والبارامتر الثانى خاص بعرض اللغة العربية بشكل مقروء وليس على هيئة الـ unicode .

 

 

qarmoti

 

الان اصبح ملف php جاهز .

سنقوم برفع الملف للاستضافة  وفتح الملف مرة اخرى من المتصفح

json get post

 

وقبل أن تشعر بالحزن وبان  هناك شىء ما خاطىء لأن الـ ملف ظهر عندك بهذا الشكل

baccc

 

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

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

أما الان حان وقت الـ Parsing بداخل تطبيق الأندرويد فى جافا .

 

Java and JSON

الان لو استخدمنا نفس الاتصال بالطريقة العادية سيجلب لنا المحتوى فى تطبيق الأندرويد كالتالى :

 

view json android

انه String ايضا وتم عرضه فى الـ text view لكن التنسيق الموجود بداخل الـ String يسهل فصل كل شىء عن بعضه وتنظيمه وإعداد List لعرضها فى Recycler أو استخدامها باى طريقة نحب كما سنرى الان

فلنبدأ الان بالعودة للكود الاتصال لنقوم بالتعامل مع الـ String الناتج وتحويله الى List من الـ posts

وسنبدأ بكلاس الـ JSONObject وهى تقوم باخذ الـ String الناتج بصيغة الـ JSON والتعرف عليه والاستعداد للتعامل معه لاحظ أن القوس الـ root للجيسون السابق هو {} لذلك مصفوفة الـ posts موجوده بداخل الاوبجكت فسنقوم بجلب الاوبجكت أولا  .

jsonobject

وستجد أن هناك خط أحمر من الاندرويد وذلك لانه يريد عمل try catch لأ هناك استثناءات يمكن أن تحدث مثلا أن تعطيه أى String عادى ليس منسقا بصيغة الـ JSON وبالتالى لن يتعرف عليه وستحدث مشكلة عندما لا يجد اقواس البداية والنهاية والفواصل و .. الخ الخ .

سنتركه الان ونتابع الان فى ملف php كنا اعطينا الميثود json_encode انها ستسمى مصفوفة الجيسون باسم posts

jsonarray

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

الان لدينا مصفوفة الجيسون الخاصة بالـ posts فى الجافا ونريد أن نقوم بعمل List  من الـ Posts  وان لم تكن تعرف كيفية إنشاء model و list من الـ model  راجع درس  الـ RecyclerView وما وراء الـ Adapters و الـ Models الجزء الأول

سنقوم بعمل for loop لنقوم بالدوران على الـ array الخاصة بالبوستس

وفى كل مرة نقوم بسحب الجيسون اوبجكت الحالى  وسحب الـ id والـ postcontent و الـ postwriter منه

وعمل Post جديد واضافة البيانات له ثم اضافته للـ list

parsing

الان نقوم بعمل try cache على الـكود الذى كتبناه

fd

من المفترض الان لدينا List من الـ Posts كمصدر للبيانات يمكننا أن نعرضها فى RecyclerView بسهولة اذا كنت ذاكرت الـ RecyclerView وما وراء الـ Adapters و الـ Models الجزء الثانى  وفهمته بشكل جيد

فانت الان تستطيع ان تجعل الـ list  من الـ Posts  الحاليه تعرض فى RecyclerView بسهولة كالتالى

list

ونفس الطريقه ستستخدمها لعمل Parsing لأى JSON سواء صادر من ملف php أنشأناه بأنفسنا أو موجود بأى API جاهز حيث معظم الـ APIS  كالفيس وتويتر وغيرها توفرلك الـ API بتنسق الـ JSON  .

تعتبر الـ JSON أسهل وأخف وأسرع بكثير من الـ XML  وقريبا سيكون هناك مقالة عن الـ XML بإذن الله

السابق
الـ RecyclerView وما وراء الـ Adapters و الـ Models الجزء الثانى
التالي
Android Webservices بالعربية – Volley

35 تعليق

أضف تعليقا

  1. طارق الأبواب قال:

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

    1. Hendiware قال:

      شكرا لك ياطارق نورت المدونة

      1. Ahmed alshrif قال:

        تسلمووو على الشرح

  2. 3llomi قال:

    شرح رااااائع وفي غاية الأهمية بأسلوب سلس وواضح،شكرا لك

    1. Hendiware قال:

      منور علومى ^_^

  3. Ahmed Ali قال:

    مشكورين علي الشرح الجميل
    لكن لما جيت اجرب اعمل validation علي قيمة ال writer مثلا عن طريق if
    if(writer.equals(ahmed)){
    }else if(writer.equals(mohamed)){
    }
    بيعرض نتيجة ahmed ولكن مش بيدخل علي mohamed

    1. Hendiware قال:

      ضع ahmed بين قوسين هكذا “ahmed” وكذلك محمد .

  4. ayyoub قال:

    شرح هائل وبسيط ومرح ايضا
    انت شخص مبدع
    شكراااا

  5. ghadeer قال:

    كيف اخلي التطبيق يستقبل الجيسون في textview بدل الريسايكل فيو ؟

    1. غدير قال:

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

      1. عبدالله قال:

        ممكن تبعت وتقولى ازاى بخلى البوست كله يظهر فى التيكست فيو عشان بيظهر كلمتين مش كل الكلام

  6. slimen قال:

    شرح رااااائع وفي غاية الأهمية بأسلوب سلس وواضح،شكرا لك

  7. Ali Hassan قال:

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

  8. elsayed قال:

    مشاء الله شرح جميل جد اا جدا.
    انا ظهرت ليا مشكله مش عارف في ملف بعد ما عدلت علي task
    دا الخطا الي بيظهرلي عند استدعاء الملف .
    Warning: mysqli_fetch_array() expects parameter 2 to be integer, string given in /home/u142052859/public_html/getposts .php on line 12
    {“posts”:[]}

    دا الكود الي انا كتبه .
    query($query);

    $PostsArray = array();

    while ($row = mysqli_fetch_array($content_query, MYSQL_ASSOC)){

    $temp [‘id’] = $row [‘id’];
    $temp [‘named’] = $row [‘named’];
    $temp [‘writer’] = $row [‘writer’];

    array_push($PostsArray, $temp);
    }
    echo json_encode(array(“posts” =>$PostsArray),JSON_UNESCAPED_UNICODE);
    ?>

    معالش ياريت حل سريع .
    وشكرا
    للفريق هنديوير
     

  9. elsayed قال:

    كيف احل المشكله دي
    دا ظهرت لما بعرض البيانات في list view
    json.JSONException: Value <br of type java.lang.String cannot be converted to JSONObject

  10. android قال:

    السلام عليكم,جزاك الله خير.
    لدي مشكلة وهي ظهور اللغة العربية على شكل ؟؟؟؟؟؟؟ في json ومع استخدام JSON_UNESCAPED_UNICODE ,
    والبيانات في قاعدة البيانات mysql سليمة ومعروضة باللغة العربية.
    اتمنى الاجابة وشكراا.

  11. Ahmed Salah قال:

    شروحات ممتازه … بالتوفيق
    لكن لدي سؤال مالفرق بين هذا الموضوع فى السيرفر فى اندرويد بشكل عام
    وبين موضوع ال Node ?

  12. fafesho قال:

    بس وين الواجب الي عطيته المره السابقه في php

  13. Islam Zazoe قال:

    عليا النعمه من نعمه ربى … موقع يستحق الاحترام بجد .. و شكرا على الشرح الجميل المبسط ده

  14. Kindy ALkindy قال:

    جزاك الله الف خير على الدروس اكثر من رائع في شروحاتك بارك االله فيك

  15. Mohamed Gamal قال:

    شرحك رااااائع جدا
    بس عندى سؤال هل ينفع استخدم حاجه غير ال php ولا لازم استخدام ال php
    وايهما افضل ال php ولا اى حاجه تانيه

  16. Mohamed Gamal قال:

    وياريت لو فى اى حاجه غير ال PHP لو تسمح لو عندك لينك شرح ليها تحطهولى

  17. mohamed mohamed taha قال:

    السلام عليكم انا نفذت الدرس وكل شي تمام بس لما حطيته في الRecycleView جاتلي الصفحة فارغة
    مش عار ف اية السبب

  18. mohamed mohamed taha قال:

    أرجو رفع المشروع حتى نعرف ما الخطأ عندنا

  19. محمد قال:

    شكرا لكم

  20. gamal قال:

    ممكن ترفع الملف ؟

  21. ahmed mahmoud قال:

    result بتعبر عن ايه

  22. Asma قال:

    ياليت حطيت الكود كامل او رابط للمشروع ، الدرس الوحيد اللي ماضبط معاي ، ولا اعرف اين الخطا

  23. محمد قال:

    شكرا جزيلا يا هندي

  24. momen قال:

    ممكن المشروع لو سمحت ﻻن فى اخطاء كتير

  25. mohammad قال:

    السلام عليكم اخي
    مشكور على الشرح الجميل
    ظهر لي هذا الخطاء HostConnection::get() New Host Connection established 0x9c4dc380, tid 8546
    وماذا تقصد ب result
    واذا امكن اريد التحدث معك في مساعدة
    شكرا لك وليجعلها الله في ميزان حسناتك .

  26. باسم قال:

    ياريت لو لسه بتفتح الموقع ترفع الاكواد عشان الدرس ده مش راضي يظبط من اول كود ال php

  27. user قال:

    شرح مفيد جداً ورائع .. يعطيك العافية

  28. معاذ الحوت قال:

    ممكن السورس كود لهذا المثال
    وشكرا

  29. معاذ الحوت قال:

    السلام عليكم
    ممكن تبعثلي السورس كود اللي في هذا المثال
    وشكرا

اترك تعليقاً

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.