Python حرفه‌ای: توسعه‌ی وب و پایتون!

نکته: در این فصل در رابطه با توسعه وب صحبت خواهیم کرد اما این دوره، دوره آموزشی توسعه وب و ساخت وب سایت نیست. هدف این فصل آشنا کردن شما با مفاهیم اولیه است و وارد جزئیات نخواهیم شد بنابراین برای یادگیری ساخت  وب سایت باید دوره های آن را بگذرانید. با این حال در این فصل کمی با زبان های HTML و CSS و JavaScript کدنویسی خواهیم کرد.

مفاهیم اولیه در توسعه وب

این دوره یک دوره توسعه وب نیست بنابراین این فصل (توسعه وب و پایتون) یک فصل کلی و کوتاه در رابطه با توسعه وب خواهد بود و وارد جزئیات ریز آن نمی شویم. قبل از اینکه بخواهیم در مورد توسعه وب صحبت کنیم باید در مورد کلیت دنیای وب و نحوه کار آن صحبت کنیم.

زمانی که آدرس اینترنتی یک وب سایت را در مرورگر خود وارد کرده و کلید enter را می زنید چه اتفاقی می افتد؟ در ابتدا باید بدانید که شبکه چیست. شبکه به مجموعه ای از کامپیوترهای متصل به هم می گویند. همین حالا اگر دو کامپیوتر یا لپتاپ داشته باشید و با یک سیم LAN آن ها را به هم متصل کنید، می توانید یک شبکه بین دو کامپیوتر خود تشکیل دهید به طوری که فایل های یک کامپیوتر در کامپیوتر دیگر قابل دسترسی هستند! برای یادگیری این کار می توانید آموزش های موجود در اینترنت را مشاهده کنید.

اینترنت یک شبکه بزرگ است!

حالا باید بدانید که اینترنت یک شبکه جهانی است! یعنی تمام کشورها سیستم زیرساختی دارند که به این شبکه متصل است و همانطور که در مثال قبلی خودمان می توانستیم از یک کامپیوتر به فایل های کامپیوتر دیگر دسترسی داشته باشیم، در اینترنت نیز می توانیم به فایل های کامپیوترهای دیگر در این شبکه دسترسی داشته باشیم. به این کامپیوترها سرور می گوییم! بسیاری از افراد تصور می کنند «سرور» معنی خاص و بسیار پیچیده ای دارند اما سرورها تقریبا هیچ تفاوت مهمی با کامپیوتر شخصی شما ندارند. تنها تفاوت آن ها در جزئیات است (نداشتن مانیتور، تهویه هوای بهتر، سیستم قدرتمند تر و الی آخر) و به همین دلیل می توان گفت که سرورها کامپیوترهایی هستند که همیشه روشن می باشند تا هر کس در هر زمان بتواند به فایل هایشان دسترسی داشته باشد. وب سایت ها نیز فایل هایی هستند که روی این سرورها قرار دارند و شما با استفاده از مرورگر خودتان می توانید به آن ها دسترسی داشته باشید.

DNS چیست؟

اگر تا به حال بین دو کامپیوتر خودتان شبکه ای ایجاد کرده باشید، می دانید که این دو سیستم یکدیگر را بر اساس IP می شناسند و برای اتصال از یک کامپیوتر به کامپیوتر دیگر باید به IP آن متصل شویم. از طرفی گفتیم که اینترنت نیز دقیقا مانند همین شبکه است با این تفاوت که ابعادش بسیار بزرگتر می باشد. اگر اینطور است چرا برای اتصال به وب سایت ها از IP استفاده نمی کنیم؟ مگر نگفتیم که سرورها نیز مانند کامپیوتر شخصی ما هستند؟ مگر برای اتصال به یک سیستم در یک شبکه از IP استفاده نمی شود؟ پاسخ اینجاست که از IP استفاده می کنیم! چطور؟ طبیعتا حفظ کردن یک IP برای انسان ها کار سختی است چرا که IP ها اعدادی طولانی و بی معنی هستند بنابراین سرویسی به نام DNS را ایجاد کردیم تا این IP ها را برای ما حفظ کند. یعنی چه؟ دفترچه تلفن یک مثال بسیار عالی از DNS است. ما نمی توانیم شماره تلفن تمام افرادی که با آن ها در تماس هستیم را حفظ کنیم بنابراین آن ها را در دفترچه تلفن می نویسیم یا اینکه در بخش مخاطبین تلفن همراه خود ذخیره می کنیم. مثلا شماره آقای اکبری ۰۹۰۰۰۰۰۰۰۰۰ می باشد بنابراین به جای حفظ کردن این شماره به تلفن همراه خود می گوییم شماره آقای اکبری را بگیرد.

همین مسئله در مورد وب سایت ها نیز ثابت است. ما برای هر وب سایت یک اسم انتخاب می کنیم که به آن دامنه می گویند (مثلا roxo.ir) و این دامنه در یک دفترچه تلفن به نام DNS ثبت شده است که به یک IP خاص اشاره می کند و ما را به آن متصل می نماید. اگر بخواهیم IP وب سایت ها را ببینیم راه های مختلفی وجود دارد. به طور مثال اگر از کاربران لینوکس هستید باید از دستور dig در ترمینال استفاده کنید:

dig google.com

من با این دستور می خواهم آدرس IP وب سایت google.com را پیدا کنم. با اجرای این دستور نتیجه زیر را می گیریم:

; <<>> DiG 9.16.6-Ubuntu <<>> google.com

;; global options: +cmd

;; Got answer:

;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 28029

;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1




;; OPT PSEUDOSECTION:

; EDNS: version: 0, flags:; udp: 512

;; QUESTION SECTION:

;google.com.                                         IN            A




;; ANSWER SECTION:

google.com.                          299         IN            A             172.217.23.110




;; Query time: 192 msec

;; SERVER: 8.8.8.8#53(8.8.8.8)

;; WHEN: Mon Jan 25 23:24:31 +0330 2021

;; MSG SIZE  rcvd: 55

در صورتی که از کاربران ویندوز هستید از دستور tracert در CMD استفاده کنید:

tracert www.google.com

نتیجه اجرای دستور بالا به شکل زیر است:

Tracing route to www.l.google.com [209.85.225.104]

over a maximum of 30 hops:

1 <1 ms <1 ms <1 ms 10.1.0.1

2 35 ms 19 ms 29 ms 98.245.140.1

3 11 ms 27 ms 9 ms te-0-3.dnv.comcast.net [68.85.105.201]

...

13 81 ms 76 ms 75 ms 209.85.241.37

14 84 ms 91 ms 87 ms 209.85.248.102

15 76 ms 112 ms 76 ms iy-f104.1e100.net [209.85.225.104]

Trace complete.

از دو گزارش بالا به راحتی متوجه می شویم که IP گوگل 172.217.23.110 است. حالا اگر عدد 172.217.23.110 را در مرورگر خود وارد کنیم، واقعا وارد این وب سایت می شویم! البته بسیاری از وب سایت ها به دلایلی به شما اجازه نمی دهند که با استفاده از IP به سرورهایشان متصل شوید اما گوگل با این کار مشکلی ندارد و به همین سادگی می توان ثابت کرد که آدرس سایت ها یک روش ساده تر برای حفظ کردن و تایپ کردن آن ها است و در اصل به IP ها متصل می شویم. در ضمن توجه داشته باشید که IP دریافت شده برای شما ممکن است با IP دریافت شده برای من (172.217.23.110) متفاوت باشد. چرا؟ به دلیل اینکه هر IP متعلق به یک سرور است و گوگل سرورهای زیادی را در سراسر دنیا دارد تا بر اساس محل جغرافیایی زندگی شما، به نزدیک ترین سرور متصل شوید و سرعت بیشتری را تجربه کنید. به طور مثال در دو نتیجه بالا (ویندوز و لینوکس) دو IP مختلف را گرفته ایم.

ارسال درخواست به سرور

زمانی که آدرس وب سایتی را در مرورگر خود وارد کرده و سپس enter می زنید، یک درخواست به سرور آن وب سایت ارسال می شود و فایل هایی را از آن می خواهیم. این فایل ها همان محتوای وب سایت هستند (فایل های HTML یا متون سایت و CSS استایل های سایت و JavaScript یا کدهای مربوط به پویایی سایت و تصاویر و غیره) که توسط سرور برایمان ارسال می شوند اما باید روشی برای صحبت کردن بین مرورگر ما و سرور وجود داشته باشد. به طور مثال زمانی که من با شما صحبت می کنم با زبانی به نام زبان فارسی صحبت می کنیم بنابراین باید قاعده مشترکی برای صحبت کردن مرورگر و سرور وجود داشته باشد. در حال حاضر قاعده های مشترک زیادی برای این کار وجود دارد اما معروف ترین آن ها پروتکل های HTTP و HTTPS هستند بنابراین مرورگر ما می تواند با استفاده از یکی از این پروتکل ها با سرور صحبت کرده و فایل ها را دریافت کند.

نقش پایتون در این میان چیست؟ برای پاسخ به این سوال باید به سوال دیگری پاسخ بدهید: ما چطور با کامپیوترها صحبت می کنیم؟ درست است! با استفاده از زبان های برنامه نویسی می توانیم با کامپیوترها ارتباط داشته باشیم و دستورات خود را به آن ها بدهیم. حالا متوجه نقش پایتون شدید؟ نقش پایتون در نوشتن دستورات سرور است. اگر برای سرور مشخص نکنیم که با درخواست ها چه کار کند هیچ اتفاقی رخ نمی دهد. در ضمن برای نوشتن سرور مجبور به استفاده از پایتون نیستیم بلکه می توانیم از هر زبان دیگری مانند جاوا اسکریپت یا PHP یا جاوا و غیره نیز استفاده کنیم. چرا؟ به دلیل اینکه وظیفه سرور ارسال فایل به مرورگر است و برای مرورگر اهمیتی ندارد که سرور با چه زبانی برای خودش کار می کند.

برای درک بهتر این موضوع به یک وب سایت مانند roxo.ir بروید و سپس با فشردن کلید f12 یا کلیدهای Ctrl + Shift + I قسمت developer tools مرورگر خود را باز کنید. در این قسمت سربرگی به نام network وجود دارد که باید روی آن کلیک کنید. حالا همانطور که network باز است یک بار صفحه را refresh کنید. با انجام این کار انواع و اقسام درخواست ها را مشاهده خواهید کرد. فایل های زیادی در این قسمت برایتان ظاهر می شود و در اصل شما این فایل ها را دانلود می کنید تا مرورگر آن ها را نمایش بدهد.

کار عملی با HTML و CSS و JS

ما در این قسمت می خواهیم سروری را با زبان پایتون بنویسیم. برای شروع کار یک پوشه جدید بسازید که درون خود سه فایل با نام های زیر داشته باشد:

• index.html
• style.css
• script.js

ابتدا وارد فایل index.html خود شده و سپس کد زیر را در آن تایپ کنید:

<!DOCTYPE html>

<html>

<head>

  <title></title>

</head>

<body>




</body>

</html>

این یک کد HTML ساده است و همانطور که گفتم قرار نیست در این دوره HTML آموزش بدهیم اما به صورت خلاصه آن را توضیح می دهم. در کد بالا می بینید که ساختارهایی به شکل <x> و <x/> داریم که به ترتیب به تگ های آغازین و پایانی معروف هستند. در بین این تگ ها می توانیم تگ های دیگر یا نوشته های دیگری را قرار بدهیم و هر کدام از آن ها مسئولیت خاصی دارند. به طور مثال تگ <title> مسئولیت تعیین عنوان صفحه را بر عهده دارد. اگر بخواهم عنوان این صفحه Python Development باشد به شکل زیر عمل می کنیم:

<!DOCTYPE html>

<html>

  <head>

    <title>Python Development</title>

  </head>

  <body></body>

</html>

تگ <head> مربوط به اطلاعات جزئی صفحه مانند عنوان است به همین دلیل <title> در آن قرار دارد.  در مرحله بعدی تگ <body> یا بدنه اصلی صفحه را داریم. هر اطلاعاتی که قرار است در صفحه نمایش داده شود در این بخش نوشته می شود. به طور مثال:

<!DOCTYPE html>

<html>

  <head>

    <title>Python Development</title>

  </head>

  <body>

    You can learn development at roxo.ir/plus for free!

  </body>

</html>

حالا اگر فایل index.html را به جای ویرایشگر کد خود، در مرورگر باز کنید می توانید این متن را در این صفحه ببینید. حالا فایل style.css را باز کنید و کد زیر را در آن قرار بدهید:

body {

 background-color: green

}

body مشخص می کند که استایل ما قرار است روی تگ body اعمال شود. چه استایلی؟ ما گفته ایم که background-color (رنگ پس زمینه) باید green (سبز) باشد. در مرحله بعدی باید به فایل index.html برگردیم تا به آن بگوییم که استایل های درون فایل style.css را روی خود اعمال کند. چطور؟ با استفاده از تگ خاصی به نام <link>:

<!DOCTYPE html>

<html>

  <head>

    <title>Python Development</title>

    <link rel="stylesheet" href="style.css" />

  </head>

  <body>

    You can learn development at roxo.ir/plus for free!

  </body>

</html>

من در قسمت href آدرس فایل style.css را داده ام تا فایل HTML بداند استایل های CSS ما در چه فایلی قرار دارند. حالا اگر فایل index.html را در مرورگر باز کنید، پس زمینه را به صورت سبز می بینید. حالا باید به فایل script.js رفته و کد زیر را در آن بنویسیم:

alert('hello from roxo')

سپس به index.html برمی گردیم تا به آن بگوییم که کدهای جاوا اسکریپت ما کجا هستند:

<!DOCTYPE html>

<html>

  <head>

    <title>Python Development</title>

    <link rel="stylesheet" href="style.css" />

    <script src="script.js"></script>

  </head>

  <body>

    You can learn development at roxo.ir/plus for free!

  </body>

</html>

تگ <script> به ما اجازه می دهد که کدهای جاوا اسکریپت را به فایل HTML خود متصل کنیم. حالا اگر فایل index.html را دوباره در مرورگر خود باز کنید پیام hello from roxo برایتان نمایش داده می شود. امیدوارم این تمرین ساده به شما درکی کلی از نحوه تعامل این فایل ها با هم داده باشد.

فریم ورکی به نام Flask

حالا که با نحوه تعامل فایل های HTML و CSS و JS آشنا شده اید باید به سراغ ساخت یک سرور واقعی برویم. احتمالا در ابتدا بپرسید چطور چنین سروری را بسازیم؟ آیا پایتون ماژول خاصی برای این کار دارد؟ پاسخ مثبت است! ماژول HTTP در زبان پایتون برای ساخت یک سرور ساده و تست کردن کدها در آن می باشد. مسئله اینجاست که در ابتدای documentation پایتون برای این ماژول یک هشدار نوشته شده است که می گوید:

Warning http.server is not recommended for production. It only implements basic security checks.

یعنی ماژول http.server فقط برای تست کردن کدها و تمرین کدنویسی است و نباید از آن برای وب سایت های واقعی استفاده شود. از طرفی ساختن سرور یکی از نیازهای رایج بین برنامه نویسان پایتون است و زمانی که در دنیای برنامه نویسی نیازی وجود داشته باشد، قطعا کتابخانه یا فریم ورکی برای آن وجود دارد.

نوشتن سرور و مدیریت وب سایت روی آن، یک فرآیند بسیار زمان بر و پیچیده است تا جایی که امروزه هیچ توسعه دهنده ای، این کار را به صورت دستی انجام نمی دهد. برای نوشتن وب سایت و استفاده از آن فریم ورک های مختلفی در زبان پایتون وجود دارد که یکی از آن ها Flask نام دارد. Flask یک فریم ورک مینیمال و کوچک است که بهترین گزینه برای وب سایت های کوچک و متوسط حساب می شود. البته فریم ورک های دیگری مانند Django نیز وجود دارند اما بسیار بزرگ تر از Flask هستند و برای وب سایت های بسیار بزرگ در نظر گرفته می شوند. اگر بخواهم این مسئله را در قالب یک مثال توضیح بدهم، از مثال پختن کیک استفاده می کنم! فرض کنید از شما می خواهند یک کیک بپزید (وب سایت بسازید). برای پختن این کیک به مواد و لوازم خاصی نیاز دارید (تخم مرغ، آرد، چاقو، اجاق گاز و غیره). زمانی که از پایتون به صورت دستی استفاده می کنید انگار که می روید و تخم مرغ می خرید، آرد می خرید، اجاق گاز را می خرید تا زمانی که آشپزخانه شما تکمیل و آماده کار شود. این در حالی است که استفاده از Flask مانند این است که وارد آشپزخانه ای آماده شده و شروع به پخت کیک کنید! از طرفی اگر قرار است برای یک رستوران غذا درست کنید به یک آشپزخانه بسیار بزرگ و صنعتی نیاز دارید که ابزار خاص خودش را دارد. فریم ورک Django مانند این آشپزخانه صنعتی است و برای کاری که ما انجام می دهیم (ساخت یک وب سایت کوچک و تمرینی) بیش از حد بزرگ است.

نصب Flask

طبیعتا برای استفاده از Flask باید آن را نصب کنیم اما چطور؟ اگر به documentation رسمی Flask بروید قسمتی به نام Installation پیدا خواهید کرد. Flask از ما می خواهد یک Virtual Environment برای پروژه خود بسازیم. Virtual Environment یک محیط ایزوله شده و مستقل است که برای پروژه های پایتون مختلف استفاده می شود (قبلا به صورت مختصر در مورد آن صحبت کرده بودیم). برای انجام این کار ابتدا یک پوشه جدید به نام دلخواه خود بسازید (من نام portfolio را انتخاب می کنم) و ترمینال یا CMD خود را در آن مسیر باز کنید. حالا اگر از کاربران لینوکس هستید، دستور زیر را در ترمینال اجرا کنید:

python3 -m venv venv

اگر از کاربران ویندوز هستید، این دستور را در CMD اجرا کنید:

py -3 -m venv venv

نکته برای کاربران لینوکس: در صورتی که خطایی با مضمون «عدم وجود python3-venv» دریافت کردید، باید دستور زیر را اجرا کنید تا این پکیج را نصب کنیم:

sudo apt install python3-venv

سپس دستور ایجاد  venv را دوباره اجرا کنید. با انجام این کار پوشه ای به نام venv در پوشه portfolio ایجاد شده است. در مرحله بعدی باید این virtual environment را فعال کنیم. کاربران لینوکس باید از دستور زیر برای این کار استفاده کنند:

. venv/bin/activate

کاربران ویندوز نیز از این دستور استفاده کنند:

venv\Scripts\activate

با انجام این کار قسمت prompt از ترمینال یا CMD شما تغییر می کند:

(venv) amir@AmirPC:~/Desktop/Roxo Academy/Python/Portfolio$ 

یعنی یک (venv) به آن اضافه می شود. حالا که در virtual environment هستیم می توانیم FLASK را نصب کنیم:

pip3 install Flask

شاید به جای pip3 باید از pip خالی استفاده کنید (بسته به سیستم شما) اما در هر حال با اجرای این دستور Flask برای ما نصب شده است.

نکته: برای استفاده از Flask الزامی به استفاده از virtual environment ها نیست. این روش فقط یک روش پیشنهاد شده است.

در جلسه بعدی به سراغ کدنویسی پروژه می رویم.