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

1. ‫صالح الزٌد‬
‫مهندس برمجٌات‬

2. ‫نقاط المحاضرة‬
‫ما هً خدمات الوٌب و لماذا؟‬ ‫‪‬‬
‫أنواعها و تقنٌاتها‬ ‫‪‬‬
‫كٌف ننشئ خدمة وٌب‬ ‫‪‬‬
‫الحماٌة فً االتصال بخدمات الوٌب‬ ‫‪‬‬
‫استعراض لخدمات وٌب فٌسبوك وتوٌتر‬ ‫‪‬‬

3. ‫مقدمة عن خدمات الوٌب‬

4. ‫ما هً خدمات الوٌب؟‬
‫خدمة أو مجموعة من الخدمات ٌقدمها موقع وٌب‬ ‫‪‬‬
‫ٌستطٌع أي موقع أو تطبٌق أخر االتصال بها و االستفادة منها‬ ‫‪‬‬
‫تعطً نتائج (ملفات) بصٌغ معٌنة مثل ‪ JSON‬و ‪XML‬‬ ‫‪‬‬
‫باالتصال عن طرٌق البروتوكوالت معروفة ومتداولة (‪)HTTP‬‬ ‫‪‬‬
‫خطوة لتحوٌل موقع لتطبٌق وٌب‬ ‫‪‬‬

5. ‫موقع ٌعرض جامعات ومعلومات الطالب فٌها‬
‫‪HTTP‬‬
‫موقع أو تطبٌق‬
‫أسماء الجامعات‬
‫‪JSON, XML‬‬
‫معلومات طالب‬ ‫عدد الطالب فً جامعة‬
‫صفحات الموقع‬
‫مواد الطالب فً فصل دراسً‬ ‫أسماء الطالب فً جامعة‬
‫‪API‬‬

6. ‫لماذا خدمات الوٌب؟‬
‫‪ ‬تسهٌل الوصول للبٌانات‬
‫‪ ‬توفٌر جهد معالجة األوامر ووقت برمجتها‬

7. ‫تقنٌات خدمات الوٌب‬

8. ‫تقنٌات خدمات الوٌب‬
SOAP (Simple Object Access Protocol) 
WSDL (Web Services Description Language) 
UDDI (Universal Description, Discovery and Integration) 
REST (Representative State Transfer) 

9. ‫‪REST‬‬
‫‪ ‬تعتمد على أوامر بروتوكول الـ ‪ HTTP‬االعتٌادٌة وهً:‬
‫‪GET, POST, PUT, DELETE‬‬
‫‪ ‬تقوم باسترجاع صفحة بصٌغة ‪ JSON‬أو ‪XML‬‬

10. REST
 GET
http://site.com/api/1.0/students/list?uni=ksu
GET /api/1.0/students/list?uni=ksu HTTP/1.1
Host: www.site.com
User-Agent: Mozilla/4.0
 POST
http://site.com/api/1.0/students/list
POST /api/1.0/students/list HTTP/1.1
Host: www.site.com
User-Agent: Mozilla/4.0
uni=ksu

11. ‫‪JSON‬‬
‫)‪JSON (JavaScript Object Notation‬‬ ‫‪‬‬
‫صٌغة خاصة بالجافا سكربت لتمثٌل البٌانات و الـ ‪Objects‬‬ ‫‪‬‬
‫لها صٌغة خاصة فً تحوٌل نصوص الـ ‪Unicode‬‬ ‫‪‬‬
‫مثال:‬ ‫‪‬‬
‫كلمة ”الرٌاض“ بالعربٌة ستصبح‬
‫6360‪u0627u0644u0631u064au0627u‬‬

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. JSON
Object ‫ تستطٌع الجافاسكربت قراءة هذه البٌانات مباشرة و تحوٌلها إلى‬
eval ‫عبر الدالة‬
var obj = eval('(' + result + ')');
alert(obj.name);
alert(obj.age);
alert(obj.courses[0].name);

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. ‫‪XML‬‬
‫‪XML (Extensible Markup Language) ‬‬
‫‪ ‬صٌغة عامة لتبادل البٌانات مدعومة فً لغات وبٌئات برمجٌة عدة‬

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. ‫كٌف ننشئ خدمة وٌب؟‬

18. ‫كٌف تنشئها؟‬
‫‪ ‬قم بعمل مجلد خاص تحت عنوان موقعك‬
‫/0.1/‪http://site.com/api‬‬
‫‪ ‬قم بعمل ملف ‪ PHP‬لكل خدمة. نبدأ بواحدة (مثال سرد معلومات الطالب)‬
‫‪list_student_info.php‬‬

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. 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. ‫ مرتب؟‬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. ‫ماذا عن تعدٌل بٌانات عن طرٌق خدمة الوٌب؟‬
‫‪ ‬ما قمنا باستعراضه هو جلب بٌانات فقط. ماذا عن تعدٌل بٌانات؟ (حذف,‬
‫إضافة, تعدٌل)؟‬
‫‪ ‬نفس الفكرة نقوم بعمل صفحات باسم مثال‬
‫‪add_new_student.php‬‬
‫‪update_student_info.php‬‬
‫‪delete_student_info.php‬‬
‫‪ ‬نقوم بإعطاء المعلومات الجدٌدة كنص ‪ JSON‬أو قٌم مباشرة إذا كانت‬
‫المعلومات قلٌلة‬

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. ‫حماٌة المعلومات المتداولة بٌن‬
‫خدمة الوٌب والمتصل‬

25. ‫حماٌة المعلومات المتداولة بٌن الخدمة والمتصل‬
‫‪ ‬ماذا لو تطبيقك يتطلب اسم مستخدم وكلمة مرور؟‬
‫‪ ‬تزوٌد المتصل برقم سري لالتصال لكل متصل (‪)access token‬‬
‫ٌستخدمه بدال عن استخدام اسم المستخدم و كلمة المرور, وٌستطٌع تغٌٌره أي‬
‫وقت.‬
‫90291213=‪http://site.com/api/1.0/students/student_info?id‬‬
‫‪&access_token=b2Aqj1G91k2smMr6KAmB91a‬‬

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. ‫حماٌة المعلومات المتداولة بٌن الخدمة والمتصل‬
‫‪ ‬تظل المعلومات غٌر محمٌة بشكل كافً عبر االنترنت لذا ٌتم استخدام اتصال‬
‫مشفر ‪ HTTPS‬عادة فً خدمات الوٌب ذات البٌانات الحساسة‬

28. ‫استعراض خدمات وٌب‬
‫فٌسبوك وتوٌتر‬

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. 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" },
……
]
}

32. ‫‪ Access Token‬غٌر منتهً؟‬
‫‪ ‬للحصول على ‪ access token‬غٌر منتهً غٌر محدد بفترة زمنٌة ٌجب أن‬
‫تقوم بإنشاء تطبٌق على الفٌسبوك ثم طلب ما ٌسمى بالـ ‪offilne access‬‬

34. <?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);
?>

35. ‫خدمات وٌب توٌتر‬
‫‪ ‬متوفرة على العنوان /‪http://api.twitter.com‬‬
‫‪ٌ ‬تطلب تسجٌل تطبٌق ومعلوماته قبل استخدامها‬
‫‪ ‬للحصول على ‪ٌ Access Token‬تم االتصال على الخدمة‬
‫‪http://api.twitter.com/oauth/request_token‬‬
‫و إعطاءها رقم تطبٌقك السري كمتغٌر ‪POST‬‬

37. ‫مكتبات برمجٌة‬
‫‪ ‬فً الحقٌقة ال حاجة لمعرفة كافة خدمات الوٌب فً موقع معٌن إذا ما قام‬
‫بتقدٌم مكتبات برمجٌة تسهل عملٌة طلب الخدمة وإرسال واسترجاع‬
‫المعلومات.‬
‫‪ ‬مكتبات برمجٌة لخدمات وٌب توٌتر لمعظم اللغات على الرابط‬
‫‪http://dev.twitter.com/pages/libraries‬‬

39. ‫شكرا لكم‬
‫‪‬‬
‫‪Q&A‬‬