01. מבוא והיכרות עם פלאסק
שלום לכם שוב סטודנטים יקרים.
בקורס זה אנו נכיר את עולם התכנות שנקרא WEB. יש כאלה שבטעות יקראו למונח גם Fullstack, ויש כאלו שישתמשו במונחים Fronend ו-Backend.
בפועל מתכנת WEB יוצר (או מתחזק) תוכנה X שמחשבים אחרים (אנשים אחרים) יכולים לתקשר איתה. הדוגמה הכי קלאסית זה אתר אינטרנט.
נשמע קל וברור?
טוב, זה די ככה…
כאשר אנו מדברים על “תכנות צד שרת” (Backend), זה תיאור כתיבת הקוד של תוכנה שרצה על מחשב המשמש כ”שרת”. למשל, באתר קופת החולים, המערכת הפנימית שמחפשת תור זמין, היא מערכת שבנה אותה מתכנת “צד שרת”.
כאשר מדברים על “תכנות צד לקוח” (Frontend), מתכוונים לחלק הקוד שמיועד לריצה על המחשבים ש”משתמשים” בתוכנה שרצה. למשל, הגרפיקה של תוצאות החיפוש של תורות זמינים באתר של קופת החולים, המוצגת אצלנו במסך, בוצעה על ידי מתכנת צד לקוח.
אז אם כך, אתר אינטרנט מצוי בנוי באופן כזה שישנו צד שרת – המידע וצורת העבודה שהמחשב הראשי (השרת) מחזיק, וצד הלקוח, זה החלק שמוצג למי שגולש באתר.
כדי ששתי תוכנות/מחשבים יתקשרו ביניהן, מובן ששתיהן צריכות להיות באותה רשת… בעולם שלנו בדר”כ אותה רשת היא רשת האינטרנט. רשת האינטרנט היא פשוט חיבור (פיזי) של מלא מלא מחשבים.
בעולם סטנדרטי, המשתמשים (צד לקוח) מפעילים “דפדפן”, כמו Chrome של גוגל, או FireFox שזו התוכנה שפונה לשרת (דרך כתובת) ומציגה למשתמש מידע שהשרת (בכתובת) מספק לה.
בצד השני – בשרת, ישנה “אפליקצייה”, או “קוד” שרץ.
קוד זה יכול להיות כתוב במגוון שפות (אנו נלמד לבצע קוד זה באמצעות פייתון).
הדפדפן יודע לבצע “בקשות” (למשל, גישה ל-ynet.co.il היא ‘בקשה’ לשרת של Ynet לקבל את דף הבית), והשרת (של Ynet) יודע “להחזיר” לדפדפן שלנו מידע.
הבקשה נעשית בפרוטוקול (שיטה) שנכיר בהמשך, שנקראת HTTP, והמידע המוחזר “עטוף” בתוך קוד HTML.
מה זה קוד HTML? נדבר על זה בנפרד. אבל כרגע מה שחשוב להבין זה שהדפדפן יודע “לקרוא” ולהציג דפי HTML, וזוהי בעצם הצורה שאנו רגילים לראות דפי אינטרנט.
בדרך כלל מתכנתים מתמקצעים בתחום מסוים, למשל ישנם מתכנתים שמתמקדים ב-Frontend, שזה מה שקשור בעיקר ל”נראות” של האתר בצד של הלקוח. זה כולל עבודה מרובה עם שפת HTML, וכן ישנם שפות נוספות שעוזרות לניתוח והצגת המידע בצד של המשתמש, כמו למשל CSS ושפת JS (ג’אווה-סקריפט).
בשיעורים הקרובים אנו נלמד את הבסיס של כל הפעולות הנדרשות להקמת התשתית הזו.
א. להקים אפליקציה שיודעת “להקשיב” לבקשות – הקמת שרת (Flask – פייתון)
ב. להשתמש בדפדפן בשביל “לקרוא” לשרת שהקמנו
ג. להשתמש בקוד כדי לקרוא לשרת (קריאות HTTP, בקשות GET ו-POST)
ד. להשתמש ב-HTML בשביל להציג את המידע בצורה יפה
ה. מידע נוסף תיאורטי שקשור לתקשורת בין מחשבים (כמו API)
אנו אולי לא נלמד לעומק ולפרטי פרטים כל חלק, אבל נבין את עיקרי הדברים, בצורה שתאפשר לנו אח”כ להמשיך את הלמידה באופן עצמאי בכל תחום שנרצה.
אה, וחשוב מאוד, אל תתקדמו לנושא הבא לפני שאתם מרגישים שאתם שולטים בנושא הקודם. אנו הולכים לבנות פה בניין שכל קומה בו מחזיקה את שאר הקומות העליונות יותר…
התחלת עבודה – Flask
בשביל שנוכל ליצור קוד שמאפשר לתוכנות אחרות גישה אליו, אנו נצטרך לקשר את הקוד שלנו לנקודת תקשורת שיש במחשב (פורט). בפייתון ישנה חבילת קוד מיועדת לכך שנקראת Flask.
נוכל לייבא אותה כך:
import flask
אם החבילה לא מותקנת אצלכם, אז תוכלו להתקין אותה מהטרמינל באמצעות הפקודה:
pip install flask
או מתוך הפייצ’ארם:
File -> Settings -> Project_[name] -> Python Interpreter
לאחר מכן לחיצה על ה + ואז נכתוב flask, ולמטה נלחץ על Install Package.
לאחר שייבאנו את Flask, אנו נוכל ליצור אובייקט אפליקציה/שרת באופן הבא:
app = flask.Flask("app_name")
האובייקט ש”מכיל” את האפליקציה נקרא app. ושם האפליקציה הוא app_name (יכולנו לבחור כל שם… וזה לא כ”כ משנה השם)
כרגע יש לנו אובייקט אפליקציה בשם app, שאם נרצה שהוא ירוץ, נוכל לפקוד:
app.run( )
ברגע ששורה זו תתבצע, יהיה על המחשב שלכם שרת פלאסק (Flask) שרץ ומקשיב לפורט (חיבור) מספר 5000.
אם לא למדתם את המדריך על MongoDB, אתם בטח אתם שואלים: מה זה להקשיב? מה זה פורט?
אז בקצרה: במחשב ישנם הרבה פורטים, שאפשר להתייחס אליהם כאל “נקודות חיבור”, כך ששירות מסוים (תוכנה) יכול להתחבר ולהקשיב “על” נקודת חיבור מסוימת. בצורה כזו כל מה שישלח לאותה נקודת חיבור – אותו שירות יקבל אותו.
כברירת מחדל, אפליקציית Flask מקשיבה לפורט מספר 5000. אם נרצה שהיא תתחבר לפורט אחר, נוכל לשלוח זאת כפרמטר בעת יצירת האפליקציה:
app.run(port = 5001)
מכיוון שלא הגדרנו את השרת לבצע פעולות כאלו או אחרות, אין כל כך משמעות לכך שהוא יושב ומקשיב לפורט 5000. כי הוא לא יודע מה לעשות לבקשות שהוא מקשיב להם…
במילים אחרות, אנו רוצים להחליט איך יגיב השרת שהקמנו, בעת שיקבל “בקשה”.
אבל לפני כן, כבר נוכל לראות משהו מגניב.
אם נריץ את התוכנה, מסך הפלט צריך להיראות בערך כך:
יש שם כמה שורות שפחות מעניינות אותנו, אבל בשורה האחרונה כתוב לנו:
“Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)”
שזה אומר לנו:
א. התוכנה/שרת רצה כרגע (בשביל לעצור אותה, נצטרך “להקריס”, לבטל את הריצה הזו)
ב. החלק היותר מעניין בפלט מספר לנו שהתקשורת עם השרת מתבצעת דרך הכתובת: 127.0.0.1:5000
וכעת, תראו איזה יופי, תפתחו דפדפן אצלכם במחשב, ותזינו בשורת הכתובת את הכתובת הנ”ל.
התוצאה בדפדפן תציג לכם שגיאה בסגנון של Not Found.
אבל אם תחזרו למסך הריצה של התוכנית, תוכלו לזהות שמשהו קרה שם, התווספו שורות נוספות בסגנון של:
“GET / HTTP/1.1” 404 –
מה שקרה הוא שבפועל השרת שלנו אכן קיבל “קריאה”, (כי ביצענו קריאה מדפדפן) והוא הקשיב.
רק מכיוון שאת השרת לא הכנו מראש להחזיר תשובה כלשהי כשפונים אליו – לא ראינו כלום בדפדפן.
על הדרך הכרנו גם “מספר שגיאה” שכל מתכנת מכיר – 404, שזו שגיאה שמייצגת סיטואציה לבקשת דף שלא נמצא.
אז הצלחנו להרים שרת, וגם להתחיל לנסות לדבר איתו.
בואו נגדיר עכשיו את השרת בצורה כזו שהוא יידע לתת תשובה כאשר קוראים לו.
רק הערה קטנטנה: זוכרים את השם שהגדרנו ביצירת האפליקציה?
app = flask.Flask("app_name")
בדרך כלל נהוג לבחור לשם האפליקציה את שם הקובץ ממנו היא רצה:
app = flask.Flask(__name__)
אם אתם לא זוכרים מה זה המשתנה __name__, ממליץ לבצע חזרה על שיעור 3 בקורס פייתון למתקדמים.
ניתוב Routing
כאשר נרצה ששרת יחזיר מידע על בקשה, אנו נצטרך ליצור פונקציה שעושה זאת.
בואו ניצור פונקציה שתציג “שלום עולם” לדפדפן.
מכיוון שיש לנו כבר אובייקט בשם app שמחזיק את השרת, נוכל “להוסיף” לאובייקט את פונקציית הניתוב באופן הבא:
@app.route('/')
def index():
return "Hello World"
מה עשינו?
יצרנו פונקציה, קראנו לה איך שנרצה (בדוגמה הזו השם הוא index).
את הפונקציה “עטפנו” בדקורטור על ידי הוספת השורה:
@app.route('/')
וכל מה שהפונקציה עושה זה להחזיר טקסט “שלום עולם”.
ונסביר:
הדקורטור שהוספנו, אומר לאפליקציה app, שכאשר היא מקבלת קלט מהפורט לכתובת “/”, היא צריכה לעשות מה שהפונקציה עושה.
כיוון שהפונקציה מחזירה “שלום עולם”, אם נחזור לדפדפן שלנו, וניגש ל-127.0.0.1:5000
אנו נראה כתוצאה על הדפדפן את המילים “שלום עולם”.
שימו לב לכך שהתו האחרון בכתובת לאחר מספר הפורט, הוא ” / ” שזה מה שהופיע בתוך הדקורטור כפרמטר (תחת מרכאות).
אנו נוכל לבצע ניתוב גם ל “כתובות” אחרות תחת הפורט, למשל, אם ניצור את הפונקציה הנוספת הבאה:
@app.route('/teacher')
def func():
return "Ori Brook"
אם כעת נחזור לדפדפן, וניגש לכתובת:
127.0.0.1:5000/teacher
אנו נראה על המסך את ההדפסה Ori Brook.
נכון מגניב?
יופי, עכשיו תרגיל:
צרו שרת Flask על פורט מספר 5010 שיודע לטפל ב-3 נקודות ניתוב שונות.
א. נקודת האינדקס (‘/’) בה עליו להחזיר את המילים Hello World
ב. ניתוב ל: 5010/my_name שבו עליו להחזיר את השם שלך.
ג. ניתוב ל: 5010/my_address שבו עליו להחזיר מידע על הכתובת מגורים שלך.
לסיום:
א. הריצו את התוכנה.
ב. בצעו קריאות מהדפדפן לוודא שהכל עובד תקין (בצד לקוח).
ג. בין לבין, תתבוננו גם בפלט שמציגה התוכנה (בצד שרת).
הערה: כדי שהשרת יכיר את הפונקציות ניתוב, נרצה שפקודת ה-run של האפליקציה תבוצע בקוד לאחר הגדרת פונקציות הניתוב.
הצלחתם? נהדר.
פתרון בסרטון:
בשיעור הבא נלמד קצת על HTML, ונוכל פתאום לראות את המידע בדפדפן בצורה קצת יותר צבעונית (תרתי משמע).
אך לפני שנסיים, ארצה לחדד לכם משהו בהבנה.
מכיוון שכעת אנו עובדים על מחשב אחד. אז השרת שאנו מקימים באמצעות Flask, הוא על המחשב שלנו, והוא מחובר לפורט במחשב שלנו.
ה”הרשאות” לגישה לפורט הזה קיימות אך ורק למחשב שלנו. ולכן אנו נוכל לבצע “קריאות” לשרת אך ורק מתוך הדפדפן שבמחשב שלנו.
הכתובת שמתחילה ב: http://127.0.0.1
מסמלת לנו שני דברים.
א. הטכנולוגיה (או הפרוטוקול) שאיתו אנו עובדים הוא HTTP (שזה פרוטוקול סטנדרטי לעבודה ברשת, ראשי תיבות של: Hyper Text Transfer Protocol, עוד נרחיב על זה).
ב. ה”מחשב” אליו אנו פונים, זה המחשב המקומי. דהיינו: אותו מחשב שממנו אנו גם מבצעים את הקריאה (איפה שהדפדפן יושב). המונח המקצועי/רשמי של כתובת זו, היא: Local Host. והכתובת בכל מחשב שמציינת את הכתובת המקומית היא 127.0.0.1.
לכן נוכל גם בשורת הכתובת, במקום להקליד את הכתובת המלאה: http://127.0.0.1:5000 נוכל לכתוב בקצרה: http://localhost:5000
אם ננסה לפנות לשרת ממחשב אחר, אנו לא נצליח, כי באותו מחשב שננסה, אין ב-Local Host שבו שרת שרץ ומקשיב לקריאות. (תנסו מהפלאפון…)
כאשר נרצה “לפרסם” את האתר שלנו, אנו נצטרך “לפתוח” את הפורטים במחשב וברשת שלנו כדי שכל העולם יוכל לגשת אליו. את זה לא נעשה בשלב הזה. ישנם דרכים אלגנטיות לעשות זאת, בדר”כ הקוד תוכנה לא ירוץ על המחשב שלנו ממש אלא נעלה אותו על מחשב ב”ענן” שזהו מחשב שאפשר לשכור שעובד ביציבות 24/7.
בכל מקרה, זה לא מונע מאיתנו להמשיך ללמוד איך לפתח את השרת, כאשר סביבת העבודה שלנו תהיה המחשב שלנו האישי.