چگونه میتوان Python و JavaScript را بوسیله ی JSON به هم مرتبط ساخت؟
1396/09/26 16:58 , شایان مسلمی

چگونه میتوان Python و JavaScript را بوسیله ی JSON به هم مرتبط ساخت؟

آیا تابحال به این فکر کرده اید که چگونه میتوان داده ها را بین 2 زبان ارسال کرد؟یا تابحال تلاش کرده اید که یک شئ یا چندین داده را ارسال کنید؟

امروز من به شما نشان خواهم داد که با استفاده از JSON چگونه میتوان داده ها را از جاوااسکریپت به Pyhon ارسال کرد.همینطور کدهای مورد نیاز و نحوه ی راه اندازی یک وب سرور را نیز به شما خواهم گفت.

پیش نیازها

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

شما به pip نیاز خواهید داشت،یک مدیر پکیج برای پایتون.اینpip در نسخه های بالاتر 2.7.9 به صورت پیش فرض نصب شده است.

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

شما به یک سرور نیاز دارید که پیتون را در یک صفحه وب به کار ببرید.گزینه های زیادی برای این کار موجود هستند.اگر سرورتان را راه اندازی کرده اید، میتوانید این مرحله را نادیده بگیرید.

Tornado گزینه ی خوبی است،همینطورTwisted.من برای این پروژه از Flask استفاده میکنم.

بااستفاده از pip،Flask را نصب کنید (از طریق خط دستور):

pip install Flask

همین بود!گزینه های برای راه اندازی موجودند،اما زمانی که متوجه شدید که به درستی نصب شده است،کارتان به اتمام رسیده است.

شما ممکن است به استفاده از Python Virtual Environment یا محیط مجازی پایتون فکر کرده باشید،این کاملاً یک گزینه ی اختیاری است.

راه اندازی پایتون

یک فایل جدید در ویرایشگر متن دلخواهتان یا محیط توسعه ی یکپارچه شده (IDE) ایجاد کنید.من از Sublime Text 3 و PyCharm استفاده میکنم،اما شما برنامه ای را که با آن راحت هستید اجرا کنید.

حالا کمی راه اندازی از Flask را انجام دهید:

from flask import Flask

app = Flask(__name__)

 

این ماژول های مورد نیاز را وارد میکند و اپلیکیشنتان را تنظیم میکند.حالا یک path بسازید:

@app.route("/output")

def output():

       return "Hello World!"

این یک الگو میسازد،که شبیه به یک صفحه از یک وب سایت است.گاهی این الگو به نام های endpoint یا route نیز شناخته میشود.

خط def output() یک عملکرد(function) یا روش(method) را تعریف میکند که output نام دارد،که زمان درخواست این endpoint اجرا خواهد شد.این روش ها  نباید نام مشابه با endpoint داشته باشند.داخل این روش،یک رشته ی  Hello,World! ساده است.در نهایت،اسکریپتتان را راه اندازی کنید تا در زمان درخواست ،اجرا بشود:

if __name__ == "__main__":

       app.run()

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

python json_io.py

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

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

این به شما IP address سروری را نشان میدهد که در حال اجراست،همانند پورت.اینها 127.0.0.1 و 5000 خواهند بود.میتوانید CTRL>C را فشار بدهید تا اجرا را متوقف سازید،اما این کار ارا انجام ندهید.

آدرس را در مرورگرتان وارد کنید و حالا باید Hello,World! را روی صفحه ببینید.حالا شما یک سرور Python را به طور موفقیت آمیز راه اندازی کرده اید و اولین اسکریپتتان را نوشته اید!حالا باید سرورتان را ری استارت کنید(اسکریپت را متوقف کنید و دوباره اجرا کنید)البته اگر بخواهید تغییراتی اعمال کنید.

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

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

دو قسمت در این سطر وجود دارد.اولی به Flesk میگوید که فایل ها را روی IP addredd محلی استفاده کند(مطمئن شوید که این مقدار را به شکل 0.0.0.0 نگه میدارید،حتی اگر IP address شما نباشد).قسمت دوم پورت را مشخص میکند.شما میتوانید در صورت تمایل آن را تغییر بدهید.اسکریپت را دوباره اجرا کنید.

حالا باید بتوانید از طریق یک کامپیوتر دیگر و با همان شبکه به اسکریپت هایتان دسترسی داشته باشید.مطمئن شوید که از پورت وارد شده ی قبلی و IP address تان استفاده میکنید(ifconfig را در خط فرمان اجرا کنید).شاید احتیاج داشه باشید که فایروال خودتان را تنظیم کنید.

این کنسول به شما واکنش HTTP و IP address هر دستگاهی که به سرور شما وصل باشد را نشان میدهد:

توجه داشته باشید که چگونه endpoint /df یک خطای 404 را نمایش میدهد.endpoint یک ست آپ نیست!اگر میخواهید به آن توسط اینترنت دسترسی داشته باشید،به فوروارد پورت فکر کنید.

قالب ها

حالا که سرورتان راه اندازی شده،زمان آن است که کمی قالب یا template بنویسید.شما از JSON برای ارسال داده بین جاوااسکریپت و پیتون استفاده میکنید و قالب ها نیز این کار را تسهیل میکنند.

شما باید از یک زبان قالب استفاده کنید.Jinja 2 همراه با Flask است،بنابراین راه اندازی جداگانه ای نیاز ندارد.

یک زبان قالب در پیوستگی با یک وب سرور کار میکند.این خروجی Pythonscripts شما را نشان میدهد(کد back-end شما)، و خروجی را برای کاربر با استفاده از HTML ساده میکند(front-end). مهم است بدانید که قالب ها نباید برای logic استفاده بشوند!logic را در Python نگه دارید و از قالب ها صرفاً برای نمایش داده ها استفاده کنید.

یک فولدر داخل دایرکتوری پروژه تان به اسم 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 که نیاز دارید گردآوری شده است.این کدها را داخل فایل 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 نمیشود.این ها برای صفحات وب مورد نیاز هستند (این مثال بدون آن ها کار میکند).

کار زیادی نمیتوان با این فایل انجام داد.یک لیست JSON از خودروهای رالی یک ست آپ است.کمی متن و یک دکمه وجود دارد.زمانی که دکمه فشرده بشود،jQuery  برای POST لیست خودروها به سرور استفاده میشوداین به endpoint دریافت کننده (reciever) میرود،که بعداً باید ایجاد کنید.

این کدی است که برای json_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 را تعریف میکند.مورد پیش فرض اول (/)  صفحه ی html قبلی را به کار میبرد.زمانی که دکمه فشرده شود،یک درخواست POST به endpoint  /receiver ایجاد میشود.قسمت دوم از تعریف روت (methods=[‘post’]) مشخص میکند که نحوه ی دسترسی این صفحه چگونه است.از آنجا که POST تنها راه معین شده است، این روت(route) هر درخواست دیگر http را رد میکند(مثل GET).

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

ابزارهای توسعه دهنده ی مرورگرتان را باز کنید (CMD>ALT>I) و به قسمت network بروید.دکمه را بزنید،حالا باید واکنش سرور را ببینید:

JSON ابتدایی را تغییر بدهید و ببینید چه اتفاقی می افتد.بیایید Python را برای انجام یک کار دیگر تغییر بدهیم.این کد دیگری است که برای for loop نیاز دارید:

       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 ساده برای تغییر خروجی استفاده میکند،که بسته به ورودی است.شما میتوانید به راحتی از این برای نوشتن در یک دیتابیس یا اجرای یک کد دیگر تقلید کنید.حالا اینچنین به نظر می رسد:

در اینجا شما باید درک عمیقی از راه اندازی یک سرور پیتون و چگونگی واکنش شما به درخواست های JSON داشته باشید.

آیا شما از Flask با Python استفاده میکنید؟یا ابزار دیگری دارید؟به چه نمونه های برنامه نویسی دیگر علاقه دارید؟ آن ها را با ما به اشتراک بگذارید!

 

 

از آخرین دوره های آموزشی و تخفیف ها مطلع شوید

با تکمیل فرم زیر ، از اخبار و اطلاعات به روز برنامه نویسی و تکنولوژی عقب نمانید

آخرین مطالب

آموزش جامع SQL Server (جلسه ۱۲)
آموزش جامع SQL Server (جلسه ۱۲)

دستور UPDATE در SQL Server برای تغییر داده‌های موجود در یک جدول، از دستور UPDATE به شکل زیر استفاده ...

آموزش جامع SQL Server (جلسه ۱۵)
آموزش جامع SQL Server (جلسه ۱۵)

دستور DROP TABLE در SQL Server گاهی، لازم است یک جدول که دیگر استفاده‌ای ندارد را حذف کنید. برای ...

آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)
آموزش جامع SQL Server (جلسه ۳۵: Window Functionها – بخش ۲)

بخش اول از آخرین مبحث دوره جامع آموزش SQL Server در جلسه قبلی بررسی شد. این مبحث که ...

آخرین دیدگاه ها

دیدگاه خود را درباره این پست بنویسید

فرم ارسال نظرات