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

13,044 views

Published on

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

Published in: Technology
5 Comments
39 Likes
Statistics
Notes
No Downloads
Views
Total views
13,044
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
5
Likes
39
Embeds 0
No embeds

No notes for slide

خدمات الويب (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‬‬

×