ایجاد ارتباط بین پایتون و جاوا اسکریپت با JSON

آیا تاکنون در مورد شیوه ارسال داده‌ها بین دو زبان مختلف برنامه‌نویسی فکر کرده‌اید؟ آیا تا به حال تلاش کرده‌اید که یک شیء یا قطعه‌های مختلفی از داده را به این روش ارسال نمایید؟

در این نوشته شیوه استفاده از جیسون برای ارسال داده‌ها از جاوا اسکریپت به پایتون را خواهیم آموخت. روش ایجاد وب‌سرور به همراه کدهای مورد نیاز توضیح داده شده است.

پیش‌نیازها

برای آغاز این پروژه به چند چیز نیاز دارید. مثال‌های این نوشته بر روی یک رایانه مک اجرا می‌شوند که پایتون از قبل روی آن نصب شده است. در صورتی که از لینوکس استفاده می‌کنید، احتمالاً مشکلی در پیگیری مثال‌ها نخواهید داشت. اما اگر کاربر ویندوز هستید باید پایتون را دانلود و نصب کنید و احتمالاً مهارت‌هایی در خصوص خط فرمان ویندوز نیز داشته باشید. همچنین به pip که نرم‌افزار مدیریت بسته پایتون است هم نیاز دارید. این نرم‌افزار به صورت پیش‌فرض در نسخه‌های بالاتر از 2.7.9 پایتون نصب شده است.

فیلم آموزش برنامه نویسی پایتون Python – مقدماتی در فرادرس

کلیک کنید

راه‌اندازی سرور

برای ارائه پایتون در صفحه‌های وب به یک سرور هم نیاز دارید. گزینه‌های زیادی بدین منظور وجود دارند. اگر وب‌سروری از قبل پیکربندی کرده‌اید، می‌توانید این بخش را رد کنید. همان‌طور که اشاره کردیم در مورد وب‌سرور برای پایتون گزینه‌های زیادی وجود دارند. tornado انتخاب مناسبی است. twisted هم گزینه مناسبی است؛ اما در این راهنما از Flask استفاده شده است. با استفاده از دستور pip زیر در خط فرمان می‌توان Flask را نصب کرد:

Pip install Flask

به همین سادگی! گزینه‌های نصب اندکی وجود دارند؛ اما اگر مطمئن هستید که به درستی نصب شده است برای شروع کافی است.ممکن است بخواهید از محیط مجازی پایتون نیز استفاده کنید که به طور کامل اختیاری محسوب می‌شود.

نصب پایتون

یک فایل جدید در ویرایشگر متنی منتخب خودتان باز کنید. همچنین می‌توانید از یک محیط توسعه یکپارچه (IDE) استفاده کنید. در این نوشته از سابلایم تکست 3 و PyCharm استفاده شده است؛ اما هر گزینه‌ای که با آن راحت باشید نیز مشکلی ندارد.اینک برخی تنظیمات اولیه Flask را انجام می‌دهیم:

from flask import Flask
app = Flask(__name__)

این دستور ماژول‌های مورد نیاز را ایمپورت کرده و برنامه را پیکربندی می‌کند. اینک مسیر (path) را تعیین می‌کنیم:

@app.route("/output")
def output():
return "Hello World!"

دستور فوق path را تعریف می‌کند که چیزی مانند یک صفحه از وب‌سایت است. این مسیر در برخی موارد endpoint یا route نامیده می‌شود.

خط ()def output یک تابع یا متد تعریف می‌کند که output نامیده می‌شود و در زمان فراخوانی endpoint اجرایی می‌شود. لازم نیست این متدها از همان نام endpoint استفاده کنند و می‌توانید هر نامی که مناسب می‌دانید برای آن‌ها تعیین کنید. درون این متد یک رشته ساده به صورت Hello World! قرار دارد. در نهایت اسکریپت خود را برای اجرای واقعی در زمان تقاضا تنظیم می‌کنیم:

if __name__ == "__main__":
app.run()

این اسکریپت را با نام Jason_io.py در مکان مناسبی ذخیره کنید. به ترمینال بازگشته و به پوشه پروژه مراجعه کنید تا اسکریپت را اجرا نمایید:

python json_io.py

کلمه python برای این استفاده می‌شود که به رایانه بگوید فایل فوق باید به صورت یک اسکریپت پایتون اجرا شود. نام فایل که در ادامه آمده است همان نام فایلی است که می‌خواهید پایتون برای شما اجرا کند. اگر همه چیز به درستی کار کند، باید یک پیام وضعیت به صورت زیر در ترمینال مشاهده کنید:

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

پیام فوق نشانی IP سرور شما و همچنین پورت مربوطه را نشان می‌دهد. این مقادیر به صوت 127.0.0.1 و پورت 5000 هستند. می‌توانید دکمه‌های CTRL>C را فشار دهید تا اجرا متوقف شود، اما فعلاً این کار را نکنید.

آن نشانی که ارائه شده است را در مرورگر وارد کنید تا ببینید که پیام Hello World! بر روی صفحه‌نمایش می‌یابد. اینک توانسته‌اید سرور پایتون را با موفقیت اجرا کرده و نخستین اسکریپت خود را بنویسید. در صورتی که به هرگونه تغییر نیاز داشتید، باید سرور را راه‌اندازی مجدد کنید. یعنی اسکریپت را متوقف کرده و آن را مجدداً اجرا نمایید.

تحت شبکه

اگر می‌خواهید اسکریپت‌های خود را بر روی رایانه متفاوتی در همان شبکه ببینید، مقدار ()app.run را به صورت زیر تغییر دهید:

app.run("0.0.0.0", "5010")

این خط دو بخش دارد. بخش نخست به Flask اعلام می‌کند که فایل‌ها را بر روی نشانی آی‌پی محلی سرو کند. بنابراین حتی اگر آی‌پی شما به صورت 0.0.0.0 نیز نباشد، مطمئن شوید که مقدار آن به همین شکل باقی مانده است. شما می‌توانید در صورت نیاز شماره پورت را تغییر دهید. اسکریپت را مجدداً اجرا کنید. به این منظور باید آن را ذخیره کرده و ری‌استارت نمایید.

اینک می‌توانید به اسکریپت‌هایتان از روی رایانه دیگری بر روی همان شبکه دسترسی داشته باشید. اطمینان حاصل کنید که نشانی آی‌پی و پورت به درستی وارد شده است. به این منظور دستور ifconfig را در خط فرمان وارد نمایید. در صورت استفاده از فایروال ممکن است لازم باشد آن را به این منظور پیکربندی کنید.

این کنسول پاسخ HTTP را به شما نشان می‌دهد. همچنین نشانی آی‌پی هر دستگاهی که به سرور شما متصل شده است را نمایش می‌دهد.

توجه کنید که چگونه endpoint /df خطای 404 بازگشت داده است. endpoint راه‌اندازی نشده است! اگر قصد دارید به این مسیر از روی اینترنت دسترسی داشته باشید، می‌بایست از امکان port forwarding استفاده کنید.

قالب‌ها

اینک که سرور به طور کامل راه‌اندازی شده است زمان آن فرارسیده که برخی قالب‌ها را بنویسید. از جیسون برای ارسال داده‌ها بین پایتون و جاوا اسکریپت استفاده خواهیم کرد و قالب‌ها این کار را تسهیل می‌کنند. قبلاً در نوشته‌های فرادرس در مورد جیسون توضیحاتی ارائه کرده‌ایم، بنابراین اگر در این خصوص هر گونه سؤالی دارید، می‌توانید به آن راهنما مراجعه کنید. در این بخش می‌بایست از یک زبان قالب‌سازی استفاده کنید. Jina2 به همراه Flask ارائه شده است و بنابراین به نصب مورد دیگری نیاز ندارید.

فیلم آموزش میکروفریم ورک فلسک در پایتون – طراحی وب اپلیکیشن با Flask در فرادرس

کلیک کنید

یک زبان قالب‌سازی به همراه وب‌سرور عمل می‌کند. بین ترتیب که خروجی اسکریپت‌های پایتون را در کد بک-اند گرفته و آن را برای خروجی به کاربر در زبان HTML (فرانت‌-اند) آماده می‌کند. می‌بایست توجه داشته باشید که قالب‌ها نباید در بخش منطقی کد استفاده شوند. منطق برنامه به طور کامل باید در پایتون بماند و از قالب‌ها صرفاً برای نمایش داده‌ها استفاده شود. اگر شروع به استفاده از قالب‌ها در موارد پیچیده کنید، همه چیز به هم می‌ریزد.

یک پوشه درون دایرکتوری پروژه به نام templates ایجاد کنید. Flask فایل‌های درون این پوشه را به صورت فایل‌های قالب شناسایی می‌کند. هیچ اسکریپت پایتون را در این پوشه اجرا نکنید، چون اینجا مکانی است که فایل‌های HTML قرار خواهند گرفت. فایلی به نام index.html درون آن ایجاد کنید و کد زیر را در آنجا بنویسید:

{{ name }}

این روش دسترسی به داده‌هایی است که name نام دارند و درون اسکریپت‌های شما قرار خواهند داشت. به اسکریپت json_io.py بازگردید و تابع output را تغییر دهید. به این ترتیب که به جای بازگرداندن رشته Hello world کد زیر را قرار دهید:

return render_template("index.html", name="Joe")

بدین ترتیب فایل index.html که قبلاً ایجاد کردید لود می‌شود و تگ قالب {{ name }} برای رشته Joe جایگزین می‌شود. می‌توان از این متد برای لود هر صفحه‌ای درون پوشه قالب استفاده کرد و هر مقدار داده که نیاز است به آن‌ها ارسال کرد.

فایل ایندکس

اینک که با طرز کار قالب‌ها آشنا شدید، کد کامل HTML مورد نیاز در ادامه ارائه شده است.

فیلم آموزش اچ تی ام ال – طراحی وب با HTML – مقدماتی در فرادرس

کلیک کنید

این کد را درون فایل index.html وارد کنید:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
// setup some JSON to use
var cars = [
{ "make":"Porsche", "model":"911S" },
{ "make":"Mercedes-Benz", "model":"220SE" },
{ "make":"Jaguar","model": "Mark VII" }
];
window.onload = function() {
// setup the button click
document.getElementById("theButton").onclick = function() {
doWork()
};
}
function doWork() {
// ajax the JSON to the server
$.post("receiver", cars, function(){
});
// stop link reloading the page
event.preventDefault();
}
</script>
This will send data using AJAX to Python:<br /><br />
<a href="" id="theButton">Click Me</a>

توجه داشته باشید که این کد شامل CSS یا هیچ گونه هدر HTML نیست. این موارد برای صفحه‌های وب ضروری هستند. گرچه این مثال بدون آن‌ها هم کار می‌کند؛ اما اگر می‌خواهید صفحه وب زیبایی طراحی کنید می‌توانید از این راهنمای فرادرس استفاده نمایید. همچنین، در کدهای بالا از Ajax استفاده شده است. برای یادگیری نحوه استفاده از Ajax در ASP.NET MVC می‌توانید به مطالعه مقاله آموزش Ajax در MVC بپردازید.

این فایل به توضیح بیشتری نیاز ندارد. یک فهرست جیسون از خودروهای رالی تنظیم شده است. یک مقدار متن و یک دکمه وجود دارد. وقتی دکمه کلیک شود JQuery برای Post کردن فهرستی از خودروها به سرور استفاده می‌شود. اگر می‌خواهید در مورد JQuery بیشتر بدانید، مطمئن شوید که راهنمای فرادرس را در این خصوص استفاده کرده‌اید. در ادامه کدی که برای Jason_io.py نیاز دارید ارائه شده است:

#!flask/bin/python
import sys
from flask import Flask, render_template, request, redirect, Response
import random, json
app = Flask(__name__)
@app.route('/')
def output():
# serve index template
return render_template('index.html', name='Joe')
@app.route('/receiver', methods = ['POST'])
def worker():
# read json + reply
data = request.get_json()
result = ''
for item in data:
# loop over every row
result += str(item['make']) + '\n'
return result
if __name__ == '__main__':
# run!
app.run()

این کد دو endpoint تعریف می‌کند. endpoint پیش‌فرض (/) صفحه html قبلی را سرو می‌کند. وقتی دکمه را فشار می‌دهید یک درخواست POST به نقطه انتهایی /receiver ارسال کنید. بخش دوم تعریف مسیر (methods = [‘POST’]) چگونگی دسترسی به صفحه را تعریف می‌کند. از آنجا که POST تنها روش تعیین شده است، هر گونه درخواست دیگر HTTP همچون GET در این مسیر انکار خواهد شد.

نقطه انتهایی receiver/ بر روی همه ردیف‌های JSON می‌چرخد و خودروی مربوطه را به انتهای یک رشته که در نهایت قرار است بازگشت داده شود، الحاق می‌کند. این جیسون در متغیر data ذخیره می‌شود و ()request.get_json مورد استفاده قرار می‌گیرد. پایتون اطلاع دارد که JSON یک شیء است. متغیر item درون for loop را می‌توان همانند یک ردیف از داده تصور کرد. با استفاده از نام مربوطه در براکت (item[‘make’]) می‌توان به هر یک از عناصر مختلف دسترسی داشت.

ابزار توسعه‌دهندگان

بخش developer tools مرورگر را باز کرده و به برگه network بروید. دکمه را کلیک کنید تا ببینید که پاسخ سرور ظاهر می‌شود.

اقدام به تغییر جیسون اولیه بکنید تا ببینید چه تغییری حاصل می‌شود. برای مثال پایتون را چنان تغییر می‌دهیم که بسته به جیسون کار متفاوتی انجام دهد. در ادامه کد جدید مورد نیاز حلقه for ارائه شده است:

for item in data:
# loop over every row
make = str(item['make'])
if(make == 'Porsche'):
result += make + ' -- That is a good manufacturer\n'
else:
result += make + ' -- That is only an average manufacturer\n'

در کد فوق از یک عبارت if ساده برای تغییر خروجی بسته به ورودی استفاده شده است. می‌توانید به سادگی این کد را در یک پایگاه داده بنویسید یا قطعه متفاوتی از کد را اجرا کنید. کد اینک به صورت زیر نمایش می‌یابد:

اگر این راهنما را به دقت مطالعه کرده باشید، درک خوبی از چگونگی راه‌اندازی سرور پایتون به دست آورده‌اید و می‌دانید که چگونه به یک درخواست جیسون پاسخ دهید.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

اگر این نوشته مورد توجه شما قرار گرفته است، پیشنهاد می‌کنیم موارد زیر را نیز ملاحظه نمایید:

• طراحی و برنامه نویسی وب
• چرا باید از طرح هایلایت سایت Schema.org استفاده کنیم؟
• جیسون (JSON) چیست؟ — معرفی این مفهوم برنامه‌نویسی به زبان کاملاً ساده
• JSON برای پایتون — راهنمایی برای مبتدی‌ها
• ابزارها و راهکارهای مدیریت وبسایت‌ها
• جاوا اسکریپت و توسعه وب — راهنمای استفاده از مدل شیء سند (DOM)
• آموزش Ajax در MVC | راهنمای رایگان به کارگیری Ajax در ASP .NET MVC

==