1. خدمات الويب (Web Services) و كيف تنشئها
صالح الزيد مهندس برمجيات

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

3. مقدمة عن خدمات الويب

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

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

6. لماذا خدمات الويب؟ تسهيل الوصول للبيانات
توفير جهد معالجة الأوامر ووقت برمجتها
1 مثال: تويتر و فيسبوك فيهم العديد من البيانات
2 مثال: انتايني

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: User-Agent: Mozilla/4.0
POST
POST /api/1.0/students/list HTTP/1.1 Host: User-Agent: Mozilla/4.0 uni=ksu

11. JSON JSON (JavaScript Object Notation)
صيغة خاصة بالجافا سكربت لتمثيل البيانات و الـ Objects
لها صيغة خاصة في تحويل نصوص الـ Unicode
مثال: كلمة ”الرياض“ بالعربية ستصبح \u0627\u0644\u0631\u064a\u0627\u0636

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 أو في الـ PHP و تحويلها إلى Object عبر الدالة json_decode
$result = file_get_contents( “ $obj = json_decode($result); echo $obj->name; //should print Ahmed Abdullah
?>

15. XML XML (Extensible Markup Language)
صيغة عامة لتبادل البيانات مدعومة في لغات وبيئات برمجية عدة

16.
<?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>
<name>Islamic Principles</name>
<code>SLM101</code>
<instructor>Mohammad Khaled</instructor>
</courses>
</student_info>

17. كيف ننشئ خدمة ويب؟

18. كيف تنشئها؟ قم بعمل مجلد خاص تحت عنوان موقعك http://site.com/api/1.0/
قم بعمل ملف 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 مرتب؟
أي بدلا من إلى
باستخدام الـ 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
و تقوم خدمة الويب باسترجاع إما نجاح العملية أو الرفض
name" : "Yazeed Saleh", "age”: 25, …. }
{"result":"success"}
{"result":"fail",
"reason":"You don’t have enough privileges"}

24. حماية المعلومات المتداولة بين خدمة الويب والمتصل
حماية المعلومات المتداولة بين خدمة الويب والمتصل

25. حماية المعلومات المتداولة بين الخدمة والمتصل
ماذا لو تطبيقك يتطلب اسم مستخدم وكلمة مرور؟
تزويد المتصل برقم سري للاتصال لكل متصل (access token) يستخدمه بدلا عن استخدام اسم المستخدم و كلمة المرور, ويستطيع تغييره أي وقت.

26. حماية المعلومات المتداولة بين الخدمة والمتصل
ماذا لو تطبيقك يسمح أن يقوم مستخدم بالدخول على معلومات مستخدمين آخرين؟
تزويد المتصل برقم سري لكل مستخدم سمح للمتصل بالدخول لمعلوماته (user access token)
هذه الأساليب تعرف بما يسمى الـ OAuth أو الـ Open Authentication

27. حماية المعلومات المتداولة بين الخدمة والمتصل
تظل المعلومات غير محمية بشكل كافي عبر الانترنت لذا يتم استخدام اتصال مشفر HTTPS عادة في خدمات الويب ذات البيانات الحساسة

28. استعراض خدمات ويب فيسبوك وتويتر

29. خدمات ويب فيسبوك متوفرة على العنوان https://graph.facebook.com
فيها شرح وافي لكل الخدمات المتوفرة مع access token مؤقت لساعتين
مثال: معلومات عامة عن حسابي في فيسبوك
{ "id": " ", "name": "Saleh Al-Zaid", "first_name": "Saleh", "last_name": "Al-Zaid", "username": "saleh.alzaid", "gender": "male", "locale": "en_US" }

30. معلومات الأصدقاء؟ تتطلب Access Token {
"data": [
{ "name": "Bander Alnogaithan", "id": "28969" },
{ "name": "Abdulrahman Tarbzouni", "id": "701168" },
{ "name": "Yamen S. Al-Hajjar", "id": "902805" },
{ "name": "Dale D. Murphy", "id": " " }, { "name": "Rashaad Balbale", "id": " " }, { "name": "Fahad Albutairi", "id": " " }, …… ] }

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

34. <. php require(". /src/facebook
<?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: $loginUrl\n"; $session = $facebook->getSession(); print_r($session); ?>

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

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

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