Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

خدمات الويب (Web Services) و كيف تنشئها

16,950 views

Published on

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

Published in: Technology

خدمات الويب (Web Services) و كيف تنشئها

  1. 1. ‫صالح الزٌد‬‫مهندس برمجٌات‬
  2. 2. ‫نقاط المحاضرة‬ ‫ما هً خدمات الوٌب و لماذا؟‬ ‫‪‬‬ ‫أنواعها و تقنٌاتها‬ ‫‪‬‬ ‫كٌف ننشئ خدمة وٌب‬ ‫‪‬‬ ‫الحماٌة فً االتصال بخدمات الوٌب‬ ‫‪‬‬‫استعراض لخدمات وٌب فٌسبوك وتوٌتر‬ ‫‪‬‬
  3. 3. ‫مقدمة عن خدمات الوٌب‬
  4. 4. ‫ما هً خدمات الوٌب؟‬ ‫خدمة أو مجموعة من الخدمات ٌقدمها موقع وٌب‬ ‫‪‬‬ ‫ٌستطٌع أي موقع أو تطبٌق أخر االتصال بها و االستفادة منها‬ ‫‪‬‬ ‫تعطً نتائج (ملفات) بصٌغ معٌنة مثل ‪ JSON‬و ‪XML‬‬ ‫‪‬‬‫باالتصال عن طرٌق البروتوكوالت معروفة ومتداولة (‪)HTTP‬‬ ‫‪‬‬ ‫خطوة لتحوٌل موقع لتطبٌق وٌب‬ ‫‪‬‬
  5. 5. ‫موقع ٌعرض جامعات ومعلومات الطالب فٌها‬ ‫‪HTTP‬‬ ‫موقع أو تطبٌق‬ ‫أسماء الجامعات‬ ‫‪JSON, XML‬‬ ‫معلومات طالب‬ ‫عدد الطالب فً جامعة‬ ‫صفحات الموقع‬‫مواد الطالب فً فصل دراسً‬ ‫أسماء الطالب فً جامعة‬ ‫‪API‬‬
  6. 6. ‫لماذا خدمات الوٌب؟‬ ‫‪ ‬تسهٌل الوصول للبٌانات‬‫‪ ‬توفٌر جهد معالجة األوامر ووقت برمجتها‬
  7. 7. ‫تقنٌات خدمات الوٌب‬
  8. 8. ‫تقنٌات خدمات الوٌب‬ SOAP (Simple Object Access Protocol)  WSDL (Web Services Description Language) UDDI (Universal Description, Discovery and Integration)  REST (Representative State Transfer) 
  9. 9. ‫‪REST‬‬‫‪ ‬تعتمد على أوامر بروتوكول الـ ‪ HTTP‬االعتٌادٌة وهً:‬ ‫‪GET, POST, PUT, DELETE‬‬ ‫‪ ‬تقوم باسترجاع صفحة بصٌغة ‪ JSON‬أو ‪XML‬‬
  10. 10. REST GET http://site.com/api/1.0/students/list?uni=ksuGET /api/1.0/students/list?uni=ksu HTTP/1.1Host: www.site.comUser-Agent: Mozilla/4.0 POST http://site.com/api/1.0/students/listPOST /api/1.0/students/list HTTP/1.1Host: www.site.comUser-Agent: Mozilla/4.0uni=ksu
  11. 11. ‫‪JSON‬‬ ‫)‪JSON (JavaScript Object Notation‬‬ ‫‪‬‬‫صٌغة خاصة بالجافا سكربت لتمثٌل البٌانات و الـ ‪Objects‬‬ ‫‪‬‬ ‫لها صٌغة خاصة فً تحوٌل نصوص الـ ‪Unicode‬‬ ‫‪‬‬ ‫مثال:‬ ‫‪‬‬ ‫كلمة ”الرٌاض“ بالعربٌة ستصبح‬ ‫6360‪u0627u0644u0631u064au0627u‬‬
  12. 12. http://site.com/api/1.0/students/student_info?id=31219209{ "name": "Ahmed Abdullah", "age": 21, "uni": "King Saud University", "courses": [ { "name": "Mathematical Equations", "code": "MATH101", "insturctor": "Yasir Saud" }, { "name": "Islamic Principles", "code": "SLM101", "insturctor": "Mohammad Khaled" } ]}
  13. 13. JSON Object ‫ تستطٌع الجافاسكربت قراءة هذه البٌانات مباشرة و تحوٌلها إلى‬ eval ‫عبر الدالة‬var obj = eval(( + result + ));alert(obj.name);alert(obj.age);alert(obj.courses[0].name);
  14. 14. JSON json_decode ‫ عبر الدالة‬Object ‫ و تحوٌلها إلى‬PHP ‫ أو فً الـ‬<?php $result = file_get_contents(“http://site.com/api/1.0/students/student_info?id=31219209”); $obj = json_decode($result); echo $obj->name; //should print Ahmed Abdullah?>
  15. 15. ‫‪XML‬‬ ‫‪XML (Extensible Markup Language) ‬‬‫‪ ‬صٌغة عامة لتبادل البٌانات مدعومة فً لغات وبٌئات برمجٌة عدة‬
  16. 16. http://site.com/api/1.0/students/student_info?id=31219209<?xml version="1.0"?><student_info> <name>Ahmed Abdullah</name> <age>21</age> <uni>King Saud University</uni> <courses> <course> <name>Mathematical Equations</name> <code>MATH101</code> <instructor>Yasir Saud</instructor> </course> <course> <name>Islamic Principles</name> <code>SLM101</code> <instructor>Mohammad Khaled</instructor> </course> </courses></student_info>
  17. 17. ‫كٌف ننشئ خدمة وٌب؟‬
  18. 18. ‫كٌف تنشئها؟‬ ‫‪ ‬قم بعمل مجلد خاص تحت عنوان موقعك‬ ‫/0.1/‪http://site.com/api‬‬‫‪ ‬قم بعمل ملف ‪ PHP‬لكل خدمة. نبدأ بواحدة (مثال سرد معلومات الطالب)‬ ‫‪list_student_info.php‬‬
  19. 19. http://site.com/api/1.0/list_student_info.php?id=31219209<?php $student_id = $_GET[“id”]; … … //get required student info from DB //store it in an object or array $student_info $student_info->name = “Ahmed Abdullah”; $student_info->age = 21; … //or as array $student_info[“name”] = “Ahmed Abdullah”; $student_info[“age”] = 25; … //convert $student_info data to json $result = json_encode($student_info); echo $result;?>
  20. 20. http://site.com/api/1.0/list_student_info.php?id=31219209{ "name": "Ahmed Abdullah", "age": 21, "uni": "King Saud University", "courses": [ { "name": "Mathematical Equations", "code": "MATH101", "insturctor": "Yasir Saud" }, { "name": "Islamic Principles", "code": "SLM101", "insturctor": "Mohammad Khaled" } ]}
  21. 21. ‫ مرتب؟‬API ‫كٌف تجعل عنوان الـ‬ ‫ أي بدال من‬ http://site.com/api/1.0/list_student_info.php?id=31219209 ‫إلى‬ http://site.com/api/1.0/students/student_info?id=31219209 Apache Mod-Rewrite (htaccess redirect) ‫ باستخدام الـ‬RewriteRule^api/1.0/students/student_info$ /api/1.0/list_student_info.php [L]
  22. 22. ‫ماذا عن تعدٌل بٌانات عن طرٌق خدمة الوٌب؟‬‫‪ ‬ما قمنا باستعراضه هو جلب بٌانات فقط. ماذا عن تعدٌل بٌانات؟ (حذف,‬ ‫إضافة, تعدٌل)؟‬ ‫‪ ‬نفس الفكرة نقوم بعمل صفحات باسم مثال‬ ‫‪add_new_student.php‬‬ ‫‪update_student_info.php‬‬ ‫‪delete_student_info.php‬‬ ‫‪ ‬نقوم بإعطاء المعلومات الجدٌدة كنص ‪ JSON‬أو قٌم مباشرة إذا كانت‬ ‫المعلومات قلٌلة‬
  23. 23. ‫إضافة معلومات جدٌدة‬ add_new_student.php :‫ مثال‬http://site.com/api/1.0/students/add_new_student?data={"name" : "Yazeed Saleh", "age“: 25, …. } ‫ و تقوم خدمة الوٌب باسترجاع إما نجاح العملٌة أو الرفض‬{"result":"success"}{"result":"fail", "reason":"You don’t have enough privileges"}
  24. 24. ‫حماٌة المعلومات المتداولة بٌن‬ ‫خدمة الوٌب والمتصل‬
  25. 25. ‫حماٌة المعلومات المتداولة بٌن الخدمة والمتصل‬ ‫‪ ‬ماذا لو تطبيقك يتطلب اسم مستخدم وكلمة مرور؟‬ ‫‪ ‬تزوٌد المتصل برقم سري لالتصال لكل متصل (‪)access token‬‬‫ٌستخدمه بدال عن استخدام اسم المستخدم و كلمة المرور, وٌستطٌع تغٌٌره أي‬ ‫وقت.‬‫90291213=‪http://site.com/api/1.0/students/student_info?id‬‬‫‪&access_token=b2Aqj1G91k2smMr6KAmB91a‬‬
  26. 26. ‫حماٌة المعلومات المتداولة بٌن الخدمة والمتصل‬‫‪ ‬ماذا لو تطبيقك يسمح أن يقوم مستخدم بالدخول على معلومات مستخدمين آخرين؟‬ ‫‪ ‬تزوٌد المتصل برقم سري لكل مستخدم سمح للمتصل بالدخول لمعلوماته‬ ‫(‪)user access token‬‬‫291213=‪http://site.com/api/1.0/students/delete_student?id‬‬‫‪09&access_token=b2Aqj1G91k2smMr6KAmB91a&user_a‬‬‫‪ccess_token=u3ErJk8a93Mna1Lq4E‬‬ ‫‪ ‬هذه األسالٌب تعرف بما ٌسمى الـ ‪OAuth‬‬ ‫أو الـ ‪Open Authentication‬‬
  27. 27. ‫حماٌة المعلومات المتداولة بٌن الخدمة والمتصل‬‫‪ ‬تظل المعلومات غٌر محمٌة بشكل كافً عبر االنترنت لذا ٌتم استخدام اتصال‬ ‫مشفر ‪ HTTPS‬عادة فً خدمات الوٌب ذات البٌانات الحساسة‬
  28. 28. ‫استعراض خدمات وٌب‬ ‫فٌسبوك وتوٌتر‬
  29. 29. ‫خدمات وٌب فٌسبوك‬ https://graph.facebook.com ‫ متوفرة على العنوان‬‫ مؤقت لساعتٌن‬access token ‫ فٌها شرح وافً لكل الخدمات المتوفرة مع‬ ‫ مثال: معلومات عامة عن حسابً فً فٌسبوك‬ https://graph.facebook.com/saleh.alzaid{ "id": "635286979", "name": "Saleh Al-Zaid", "first_name": "Saleh", "last_name": "Al-Zaid", "username": "saleh.alzaid", "gender": "male", "locale": "en_US"}
  30. 30. Access Token ‫معلومات األصدقاء؟ تتطلب‬ https://graph.facebook.com/saleh.alzaid/friends?access_ token=2227470867|2.AQCFXJ32tkL5nfOr.3600.131031 3600.0-635286979|pYLUc8sTmom0GsNu4tPs6MYj7IU{ "data": [ { "name": "Bander Alnogaithan", "id": "28969" }, { "name": "Abdulrahman Tarbzouni", "id": "701168" }, { "name": "Yamen S. Al-Hajjar", "id": "902805" }, { "name": "Dale D. Murphy", "id": "1408770" }, { "name": "Rashaad Balbale", "id": "1907343" }, { "name": "Fahad Albutairi", "id": "7918116" }, …… ]}
  31. 31. ‫‪ Access Token‬غٌر منتهً؟‬‫‪ ‬للحصول على ‪ access token‬غٌر منتهً غٌر محدد بفترة زمنٌة ٌجب أن‬ ‫تقوم بإنشاء تطبٌق على الفٌسبوك ثم طلب ما ٌسمى بالـ ‪offilne access‬‬
  32. 32. <?php require("../src/facebook.php"); //facebook PHP API global $facebook; $facebook = new Facebook( array( appId => your_app_id, secret => your_app_secret_code‘ ) ); $par[req_perms] = "offline_access"; $loginUrl = $facebook->getLoginUrl($par); echo "loginUrl: $loginUrln"; $session = $facebook->getSession(); print_r($session);?>
  33. 33. ‫خدمات وٌب توٌتر‬ ‫‪ ‬متوفرة على العنوان /‪http://api.twitter.com‬‬ ‫‪ٌ ‬تطلب تسجٌل تطبٌق ومعلوماته قبل استخدامها‬‫‪ ‬للحصول على ‪ٌ Access Token‬تم االتصال على الخدمة‬ ‫‪http://api.twitter.com/oauth/request_token‬‬ ‫و إعطاءها رقم تطبٌقك السري كمتغٌر ‪POST‬‬
  34. 34. ‫مكتبات برمجٌة‬‫‪ ‬فً الحقٌقة ال حاجة لمعرفة كافة خدمات الوٌب فً موقع معٌن إذا ما قام‬ ‫بتقدٌم مكتبات برمجٌة تسهل عملٌة طلب الخدمة وإرسال واسترجاع‬ ‫المعلومات.‬ ‫‪ ‬مكتبات برمجٌة لخدمات وٌب توٌتر لمعظم اللغات على الرابط‬ ‫‪http://dev.twitter.com/pages/libraries‬‬
  35. 35. ‫شكرا لكم‬ ‫‪‬‬‫‪Q&A‬‬

×