Transcript خدمات الويب (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‬‬
‫مثال‪:‬‬
‫كلمة ”الرياض“ بالعربية ستصبح‬
‫‪\u0627\u0644\u0631\u064a\u0627\u0636‬‬
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) ‬‬
‫‪ ‬صيغة عامة لتبادل البيانات مدعومة في لغات وبيئات برمجية عدة‬
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>
‫كيف ننشئ خدمة ويب؟‬
‫كيف تنشئها؟‬
‫‪ ‬قم بعمل مجلد خاص تحت عنوان موقعك‬
‫‪http://site.com/api/1.0/‬‬
‫‪ ‬قم بعمل ملف ‪ 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;
?>
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"
}
]
}
‫ مرتب؟‬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]
‫ماذا عن تعديل بيانات عن طريق خدمة الويب؟‬
‫‪ ‬ما قمنا باستعراضه هو جلب بيانات فقط‪ .‬ماذا عن تعديل بيانات؟ (حذف‪,‬‬
‫إضافة‪ ,‬تعديل)؟‬
‫‪ ‬نفس الفكرة نقوم بعمل صفحات باسم مثال‬
‫‪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‬‬
‫يستخدمه بدال عن استخدام اسم المستخدم و كلمة المرور‪ ,‬ويستطيع تغييره أي‬
‫وقت‪.‬‬
‫‪http://site.com/api/1.0/students/student_info?id=31219209‬‬
‫‪&access_token=b2Aqj1G91k2smMr6KAmB91a‬‬
‫حماية المعلومات المتداولة بين الخدمة والمتصل‬
‫‪ ‬ماذا لو تطبيقك يسمح أن يقوم مستخدم بالدخول على معلومات مستخدمين آخرين؟‬
‫‪ ‬تزويد المتصل برقم سري لكل مستخدم سمح للمتصل بالدخول لمعلوماته‬
‫(‪)user access token‬‬
‫‪http://site.com/api/1.0/students/delete_student?id=312192‬‬
‫‪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":
{ "name":
{ "name":
{ "name":
{ "name":
{ "name":
……
]
}
"Bander Alnogaithan", "id": "28969" },
"Abdulrahman Tarbzouni", "id": "701168" },
"Yamen S. Al-Hajjar", "id": "902805" },
"Dale D. Murphy", "id": "1408770" },
"Rashaad Balbale", "id": "1907343" },
"Fahad Albutairi", "id": "7918116" },
‫‪ 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: $loginUrl\n";
$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‬‬