وب‌سرویس، API، Restful و … چیزهایی هستند که هر برنامه‌نویسی اگر نگیم بطور روزمره، حتما بصورت مداوم باهاشون سر و کار داره و از هربار کار کردن با این‌ها هم مفاهیم و تکنیک‌های جدید یاد می‌گیره. دراینجا قصد تعریف این مفاهیم رو نداریم چون علاوه براینکه زیاد به تعاریف نیازی نداریم، ویکی‌پدیا قبلا خیلی بهتر از ما این‌کار رو انجام داده! اینجا فقط قصد ارائه‌ی چند مثال کاربردی بسیار ساده و پایه‌ای حول این مفاهیم و البته توضیح کامل‌شون داریم.
فرض کنید قصد نوشتن امکان لایک کردن مطالب (پست‌ها، ویدیو یا هرچیزی که وب اپلیکیشن‌تون ارائه میده) رو دارید. چه می‌کنیم؟! برای شروع یک html ساده می‌نویسیم تا بتونیم دکمه لایک رو نشون بدیم.
<html> <head> <title>demo like</title> </script> </head> <body> <button >like<span id="count">0</span></button> </body> </html>
و با فرمت html یا php ذخیره‌اش می‌کنیم. توضیح خاصی هم نداره، تو خط ۷ یک دکمه ساختم که کلمه like رو نشون بده و داخلش یک span با آی‌دی count که تعداد لایک‌های پست رو نمایش بده.
بعد یک فایل بنام server.php می‌سازیم و کد زیر رو داخلش اضافه می‌کنیم.
<?php $numLikes = ++$_GET['likes']; echo json_encode(array( 'status' => true, 'num_likes' => $numLikes, ));
درواقع در خط دوم متغییر likes رو با متد GET گرفتیم و بعد از اینکه یک واحد بهش اضافه کردیم در متغییر $numLikes ذخیره‌ش کردیم. در خطوط ۳ تا ۶ هم یک آرایه ساختیم و بعد از تبدیل کردنش به json با echo چاپش کردیم. که تنها خروجی صفحه‌مون هست.
خب حالا بریم html اولیه رو کمی تغییر بدیم تا نوشتن چند خط جاوا اسکریپت بتونیم با ajax دکمه‌ی لایک رو را بندازیم. نسخه‌ی جدید فایل html میشه کد زیر:
<html>
<head>
<title>demo like</title>
<script type="text/javascript">
function like(){
var numLikes = document.getElementById('count').innerHTML;
var http = new XMLHttpRequest();
var url = "server.php?likes=" + numLikes;
http.open("GET", url, true);
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
var response = JSON.parse(http.responseText);
if(response.status){
document.getElementById('count').innerHTML = response.num_likes;
}
}
}
http.send();
}
</script>
</head>
<body>
<button onclick="like()">like <span id="count">0</span></button>
</body>
</html>
در خط ۲۳ بهش گفتیم بعد از کلیک شدن تابع like رو اجرا کن. در تابع لایک هم به این صورت عمل کردیم که:
-خط ۶: تعداد لایک‌های فعلی رو از spanای که آی‌دی count داشت گرفتیم و در numLikes ذخیره‌ش کردیم.
-خط ۷:یک نمونه از کلاس XMLHttpRequest می‌سازیم.
-خط ۸: لیک درخواست‌مون رو برای server.php خودمون تعریف می‌کنیم و با استفاده از GET مقدار likes رو هم براش می‌فرستیم.
-خط ۹ و ۱۰: چیزی شبیه بازکردن کانکشن هست.
-خط ۱۸: درخواست ارسال میشه.
-خط ۱۱: بررسی میشه که پاسخ درخواست بطور کامل دریافت شده باشه و http status code هم برابر ۲۰۰ یعنی ok باشه. (یکی از نمونه‌های معروف http status code ؛ کد ۴۰۴ هست که وقتی صفحه پیدا نمیشه نمایش داده میشه) لیست کامل http status codeها. همچنین در مواردی مثل همین دکمه‌ی لایک یا چیزهایی مثل دکمه‌ی فالو می‌تونیم برای کاهش حجم اطلاعاتی که از سمت سرور میاد بدون اینکه هیچ خروجی (json) نشون بدیم صرفا با تعریف http status code در سمت سرور و بررسی‌شون با javascript در سمت سرور ازشون استفاده کنیم. هرچند به همین شکل هم حجم اطاعات دریافتی خیلی پایین هست.
-خط ۱۲: پاسخ رو بصورت جیسون parse می‌کنیم و در response ذخیره‌اش می‌کنیم.
-خط ۱۳و ۱۴: اگر پاسخ سرور true بود (چیزی که خودمون بعد از بررسی‌های سمت سرور تعیین می‌کنیم؛ مثل اینکه کاربر دوبار لایک نکنه یا بررسی دسترسی و … که اینجا هیچ‌یک رو انجام ندادیم) مقدار count رو هم به مقدار جدید تغییر میدیم.
خب حالا فرض کنیم که فایل server.php یک وب‌سرویس هست که ما فقط لینک‌ش رو داریم و می‌خوایم در برنامه‌ی php مون ازش استفاده کنیم. برای گرفتن وضعیت آب‌وهوا چنین چنین نمونه‌هایی وجود داره و API هایی که برنامه‌های بزرگی مثل Telegram و اینستاگرام ارائه میدن پایه‌ی ساختارشون همین هست.
و یکی از مزایای جالب‌شون این هست که اهمیتی نداره با چه زبان برنامه‌نویسی کار می‌کنید و روی چه پلتفرمی هستید، از همه‌جا می‌تونید ازشون استفاده کنید. مثلا یک سایت هواشناسی بود که API خیلی خوبی برای وضعیت آب‌وهوا ارائه داده بود که حتی شهر‌های کوچیک ایران رو هم داشت و تمام این‌ها رو بصورت رایگان می‌داد. که تو یک پروژه روی اپ اندروید وضعیت آب‌وهوا رو با جزئیات کاملی مثل: رطوبت، جهت وزش باد، دما و… رو نمایش دادم.
در php این کار رو با کتابخونه‌ی curl انجام میدیم که حدودا از نسخه‌ی ۴ به بعد php با خود php ارائه میشه ولی اگر از نسخه‌های قبل استفاده می‌کنید باید بصورت جداگانه نصب‌ش کنید.
پس کد php زیر رو می‌نویسم روی فایل curl.php ذخیره می‌کنیم:
<?php $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, 'http://test.dev/server.php?likes=5'); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); $json = curl_exec($curl); curl_close($curl); $res = json_decode($json); echo 'status = ' . $res->status; echo '<br>'; echo 'likes = ' . $res->num_likes;
-خط ۲: curl رو مقداردهی اولیه یا initialize می‌کنیم.
-خط ۳: به curlمون آپشن url میدیم، که urlای که شما می‌دید باید چیزی که روی لوکال هاست خودتون هست بدید و احتمالا متفاونت با چیزی هست که من نوشتم، ولی به همون فایل server.php مون باشه و مقدار likes رو هم حتما بفرستید.
-خط ۴: آپشن returnTransfer رو برابر true قرار میدیم، چیزی شبیه اینکه اگر صفحه ریدایرکت شد تو هم ریدایرکت شو و مقدار رو هم بصورت string برگردون.
-خط ۵: curl رو اجرا می‌کنیم و خروجی رو در متغییر $json می‌ریزیم.
-خط ۶: curl رو می‌بندیم! توصیه‌ی من این هست که همیشه curl رو ببندید ولی من تابحال با نبستن‌ش مشکلی برام پیش نیومده!
-خط ۷: JSON رو به آرایه تبدیل می‌کنیم و در $res می‌ریزم.
-خط ۸، ۹ و ۱۰: نمایش مقادیر لایک و status.
فایل‌های این پروژه رو می‌تونید از اینجا دانلود کنید.
پ.ن ۱: توجه داشته باشید که این مثال‌ها صرفا آموزشی هستند و در پروژه‌های واقعی ممکنه فایل server.php مون یک mvc با چندهزار خط کد باشه و بعد از کلی بررسی در database و سروکله زدن با modelها بهمون همین خروجی ساده رو بده. و حتی ممکنه خروجی هم به این سادگی نباشه.
پ.ن۲: در پروژه‌های واقعی معمولا از متد POST و یا چیزهای جالب دیگه هم برای ردوبدل کردن اطلاعات استفاده میشه، که اینجا ما فقط با متند GET کار کردیم تا ساده‌تر و مفهوم‌تر باشه. و برای خروجی هم ممکنه xml یا hjson که اخیرا نظرم رو جلب کرده بکار بره.
بسیار عالی ممنون