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

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

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

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

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

‫موقع ٌعرض جامعات ومعلومات الطالب فٌها‬

‫‪HTTP‬‬

‫موقع أو تطبٌق‬
‫أسماء الجامعات‬
‫‪JSON, XML‬‬

‫معلومات طالب‬ ‫عدد الطالب فً جامعة‬

‫صفحات الموقع‬
‫مواد الطالب فً فصل دراسً‬ ‫أسماء الطالب فً جامعة‬

‫‪API‬‬

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

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

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

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

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

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

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"
}
]
}

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

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

?>

‫‪XML‬‬
‫‪XML (Extensible Markup Language) ‬‬
‫‪ ‬صٌغة عامة لتبادل البٌانات مدعومة فً لغات وبٌئات برمجٌة عدة‬


<?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>

‫كٌف ننشئ خدمة وٌب؟‬

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

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;
?>


{
"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"
}
]
}

‫ مرتب؟‬API ‫كٌف تجعل عنوان الـ‬
‫ أي بدال من‬
‫إلى‬
Apache Mod-Rewrite (htaccess redirect) ‫ باستخدام الـ‬

RewriteRule
^api/1.0/students/student_info$ /api/1.0/list_student_info.php [L]

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

‫إضافة معلومات جدٌدة‬
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"}

‫حماٌة المعلومات المتداولة بٌن‬
‫خدمة الوٌب والمتصل‬

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

‫90291213=‪http://site.com/api/1.0/students/student_info?id‬‬
‫‪&access_token=b2Aqj1G91k2smMr6KAmB91a‬‬

‫‪ ‬ماذا لو تطبيقك يسمح أن يقوم مستخدم بالدخول على معلومات مستخدمين آخرين؟‬
‫‪ ‬تزوٌد المتصل برقم سري لكل مستخدم سمح للمتصل بالدخول لمعلوماته‬
‫(‪)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‬‬

‫‪ ‬تظل المعلومات غٌر محمٌة بشكل كافً عبر االنترنت لذا ٌتم استخدام اتصال‬
‫مشفر ‪ HTTPS‬عادة فً خدمات الوٌب ذات البٌانات الحساسة‬

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

‫خدمات وٌب فٌسبوك‬
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"
}

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

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

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

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

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

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

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

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

More Related Content

What's hot (20)

Viewers also liked (20)

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

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