עשרה צעדים פשוטים לאפליקציית Python Flask הראשונה שלך – Finxter

תיאור פרויקט

כַּתָבָה: נניח שאתה עובד במחלקת ה-IT של מתווכים.

הבוס שלך מבקש ממך ליצור אתר פשוט שהמתווכים יכולים לשאול כדי להציג את מכירות הבית הנוכחיות.

הוא רוצה שהאתר הזה ייווצר באמצעות בקבוק מסגרת ב- Python.

במאמר זה, ניצור אפליקציית אתר פשוטה לשאילתת נתונים סטטיסטיים של נדל"ן מ-CSV בשרת שנראה כך:

מה זה Flask?

בקבוק היא מסגרת של אפליקציית אינטרנט שנוצרה מתוך מחשבה על קלות שימוש. ללא הכשרה רבה, אתה יכול בקלות ליצור יישום אינטרנט פשוט. בקבוק עובד עם אתחול, HTML, CSSו ג'ינג'ה (כדי להזכיר כמה) כדי ליצור אתר אינטרנט.

שלב 1: הגדר סביבה וירטואלית

כל הפרויקטים שלך חולקים את אותן ספריות המותקנות ברחבי העולם. אבל חלקם עשויים לדרוש גרסאות שונות או ספריות לא תואמות.

כאן נכנסות לתמונה סביבות וירטואליות.

סביבה וירטואלית משמשת כ"ארגז חול" לתוכנית Python שלך. אתה יכול להתקין שם כל ספרייה או גרסה חיצונית מבלי שתהיה לך השפעה גלובלית.

ה סביבות וירטואליות מבודדות, עצמאיות ונפרדות.

נְקִישָׁה כאן להנחיות לגבי הגדרה והפעלה של סביבה וירטואלית.

שלב 2: התקן ספריות

לפני שהקוד שלנו יתבצע בהצלחה, שתי (2) ספריות חדשות ידרשו התקנה.

• ה פנדות הספרייה מאפשרת גישה אל/מ א DataFrame.
• ה בקבוק הספרייה מאפשרת לנו ליצור ולעבד את האתר שלנו.

כדי להתקין ספריות אלה, נווט אל IDE מָסוֹף. בשורת הפקודה ($), הפעל את הקוד למטה. עבור הטרמינל המשמש בדוגמה זו, שורת הפקודה היא סימן דולר ($). ייתכן שבקשת המסוף שלך תהיה שונה.

$ pip install pandas

לחץ על <Enter> מקש במקלדת כדי להתחיל בתהליך ההתקנה.

$ pip install flask

לחץ על <Enter> מקש במקלדת כדי להתחיל בתהליך ההתקנה.

שלב 3: הגדר את מבנה התיקיות

אנחנו רוצים לקבל את מבנה התיקיות הבא.

לאחר מכן הגדר את app.py קובץ שאחראי על רוב פעולת Flask וצור קובץ תבנית בסיסי שממנו כל קובצי ה-HTML שמגישים האפליקציה שלך יורשו.

עקוב אחר המדריך המעמיק שלנו כיצד להגדיר זאת כאן:

🌍 הדרכה: למד עוד כיצד לבצע שלב זה.

שלב 4: מסלולים ותוכן דינמי

ראשית, הוסף מסלולים לפרויקט האינטרנט שלך, כדי שאנשים יוכלו לנווט לחלקים שונים באתר האינטרנט שלך. אתה יכול לעשות זאת על ידי החלפת app.py קובץ עם הקוד הבא:

app = Flask(__name__)

@app.route('/')             # home
def index():
    return render_template("index.html")

@app.route('/reports')      # reports
def reports():
    return render_template("reports.html")

@app.route('/contact')      # contact
def contact():
    return render_template("contact.html")

שנית, אתה יוצר קובצי HTML ריקים שיורשים מתבנית הבסיס ושיש להחזיר אותם לאחר קריאה לכל אחת מכתובות האתרים הללו 'https://yourwebsite.com/', 'https://yourwebsite.com/reports'ו 'https://yourwebsite.com/contact'.

שלישית, הוסף ג'ינג'ה לקובץ תבנית הבסיס כדי שתוכל להוסיף תוכן שנוצר באופן דינמי לאתר שלך – הוא לא אמור להחזיר את אותו התוכן לכל המשתמשים אחרי הכל!

🌍 הדרכה: למד עוד כיצד לבצע שלב זה.

שלב 5: עיצוב, ניווט והפעלת האפליקציה באופן מקומי

אתחול היא מסגרת פופולרית המכילה קטעי קוד HTML, API ו-JS רבים. קטעים אלה מסייעים למעצבי/מפתחי אתרים בכל מקום ליצור אתר אינטרנט רספונסיבי.

הוסף את Bootstrap לפרויקט שלך וצור סרגל ניווט באמצעות אפשרויות הסגנון המסופקות.

לאחר מכן, אתה יכול להפעיל את האפליקציה שלך עם פקודה פשוטה במעטפת שלך ולהציג אותה בדפדפן שלך:

🌍 הדרכה: למד עוד כיצד לבצע שלב זה.

שלב 6: טפסים לקלט ופלט משתמש

הוסף טופס עם אלמנטים לדף HTML. אז תוסיף ג'ינג'ה לדף הדוחות ועדכן את הקוד ב-app.py כדי להפעיל את טופס ה-HTML.

הפרויקט שלך ייראה כך בשלב זה:

מזל טוב, משתמשים יכולים כעת להזין מספרים בקצה הקדמי וקוד ה-Python שלך יעבד אותם בקצה האחורי!

כדי לראות שינויים כלשהם, יש להפעיל מחדש את Flask. כדי לבצע משימה זו, נווט אל שורת הפקודה והזן CTRL+C (עצור), ולאחר מכן הרץ בבקבוק (הפעל מחדש).

🌍 הדרכה: למד עוד כיצד לבצע שלב זה.

שלב 7: עיבוד נתונים בקצה האחורי

לאחר מכן, קרא ב נדל"ן CSV קובץ ל-DataFrame ולאפשר למשתמשים לשאול את התוצאות על סמך המיקוד שהוזן ולהציג את התוצאות בדף הדוחות.

זה ייראה כך:

🌍 הדרכה: למד עוד כיצד לבצע שלב זה.

שלב 8: ניקוי נתונים

בשלב זה, אתה כותב קוד Python כדי לאמת את המיקוד כדי לוודא שהקלט המשתמש נכון. אתה תנקה את הנתונים ותפרמט מחדש את מחיר המכירה של חפצי הנדל"ן לבהירות המצגת.

🌍 הדרכה: למד עוד כיצד לבצע שלב זה.

שלב 9: גיליונות סגנונות

לאחר מכן, נוסיף גיליון סגנונות, ונוסיף כמה סגנונות ספציפיים לסרגל הניווט ולשאר דפי ה-HTML. סטיילינג צריך לבוא לאחר יישום פונקציונליות הליבה – מה שנעשה בשלב זה! 🙂

לאחר שלב זה, האתר ייראה הרבה יותר נקי ויפה יותר:

🌍 הדרכה: למד עוד כיצד לבצע שלב זה.

שלב 10: צור קשר ואוטומציה של דוא"ל

השלב האחרון מוודא שמשתמשים יוכלו ליצור איתך קשר דרך דף צור קשר. אנו נעצב אותו גם באמצעות CSS וגיליונות סגנונות ונשלח אליך בדוא"ל את ערכי הטופס באמצעות הפונקציונליות של Flask.

🌍 הדרכה: למד עוד כיצד לבצע שלב זה.

סיכום

פוסט זה סיכם את השלבים הדרושים ליצירת אתר פשוט הקשור לנדל"ן עם Flask. אם ביצעת את השלבים המתוארים וקראת את המדריכים המקושרים לאחר כל שלב, כעת אמור להיות לך אתר אב-טיפוס פועל במחשב המקומי שלך.

כדאי גם לדעת את היסודות של יצירת אתר אינטרנט דינמי ואינטראקטיבי ב-Python, מיומנות שמבוקשת על ידי חברות רבות כיום כעצמאי או מועסק. מפתח אתרים מלא!

הדרכות שכדאי לך לבדוק הבא

---

הומור חנון