การสร้างเว็บแอปอย่างง่าย
สร้างเว็บแอปพลิเคชันแรกของคุณด้วย Flask
การสร้างเว็บแอปอย่างง่าย เป็นบทเรียน Python Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Python Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Python Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสร้างแอปเว็บอย่างง่าย
การสร้างแอปเว็บอย่างง่าย
ตอนนี้คุณได้เรียนรู้พื้นฐานของ Flask แล้ว ถึงเวลาสร้างแอปพลิเคชันเว็บอย่างง่าย แอปนี้จะมีหลายเส้นทาง แม่แบบ HTML และการโต้ตอบบางส่วน
ในบทเรียนนี้ เราจะสร้างแอปเว็บพื้นฐานทีละขั้นตอน
ขั้นตอนที่ 1: การตั้งค่าโครงการ
ขั้นตอนที่ 1: การตั้งค่าโครงการ
สร้างโฟลเดอร์ใหม่สำหรับโครงการและเริ่มต้นสภาพแวดล้อมเสมือน:
python -m venv venvเปิดใช้งานสภาพแวดล้อมเสมือนและติดตั้ง Flask:
pip install flask# Setting up the project
from flask import Flask
app = Flask(__name__)
print("Project setup complete")ขั้นตอนที่ 2: การสร้างโครงสร้างแอป
ขั้นตอนที่ 2: การสร้างโครงสร้างแอป
สร้างโฟลเดอร์และไฟล์ต่อไปนี้:
- app.py: ไฟล์แอปพลิเคชันหลัก
- templates/: โฟลเดอร์สำหรับแม่แบบ HTML
- static/: โฟลเดอร์สำหรับไฟล์แบบคงที่ เช่น CSS และรูปภาพ
ขั้นตอนที่ 3: การกำหนดเส้นทาง
ขั้นตอนที่ 3: การกำหนดเส้นทาง
ใน app.py ให้กำหนดเส้นทางสำหรับหน้าแรกและหน้าเกี่ยวกับ:
# Defining routes
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return '<h1>Welcome to My Web App</h1>'
@app.route('/about')
def about():
return '<h1>About This App</h1>'
if __name__ == '__main__':
app.run(debug=True)ขั้นตอนที่ 4: การเพิ่มแม่แบบ
ขั้นตอนที่ 4: การเพิ่มแม่แบบ
สร้างไฟล์ HTML ชื่อ home.html ภายในโฟลเดอร์ templates/:
<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
</head>
<body>
<h1>Welcome to My Web App</h1>
<a href="/about">About</a>
</body>
</html>ขั้นตอนที่ 5: การใช้ render_template
ขั้นตอนที่ 5: การใช้ render_template
อัปเดตเส้นทาง home และ about ให้ใช้แม่แบบ:
# Using templates
from flask import render_template
@app.route('/')
def home():
return render_template('home.html')
@app.route('/about')
def about():
return render_template('about.html')ขั้นตอนที่ 6: การเพิ่มไฟล์แบบคงที่
ขั้นตอนที่ 6: การเพิ่มไฟล์แบบคงที่
สร้างไฟล์ style.css ภายในโฟลเดอร์ static/ และเชื่อมโยงไฟล์นี้ใน home.html:
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
}ขั้นตอนที่ 7: การเรียกใช้แอป
ขั้นตอนที่ 7: การเรียกใช้แอป
เรียกใช้แอปพลิเคชัน Flask:
python app.py
เปิดเบราว์เซอร์และไปที่ http://127.0.0.1:5000/ เพื่อดูแอปเว็บของคุณทำงาน
ข้อผิดพลาดที่พบบ่อยเมื่อสร้างแอปเว็บ
ข้อผิดพลาดที่พบบ่อยเมื่อสร้างแอปเว็บ
ข้อผิดพลาดบางประการที่ควรหลีกเลี่ยงมีดังนี้:
- ไม่จัดระเบียบโครงสร้างแอป เช่น ไม่มีโฟลเดอร์ templates/ และ static/
- เขียน URL แบบตายตัวแทนการใช้
url_for() - ไม่ทดสอบแอปในโหมดแก้ไขจุดบกพร่อง
เราได้เรียนรู้อะไรบ้าง
เราได้เรียนรู้อะไรบ้าง
ในบทเรียนนี้ คุณได้เรียนรู้:
- วิธีตั้งค่าโครงสร้างโครงการ Flask
- วิธีกำหนดเส้นทางและใช้แม่แบบ
- วิธีรวมไฟล์แบบคงที่ เช่น CSS ไว้ในแอป
- วิธีเรียกใช้แอปพลิเคชัน Flask และดูแอปในเบราว์เซอร์
ทำได้ดีมาก! ไปต่อที่หัวข้อถัดไปกัน
คำถามที่พบบ่อย
บทเรียน “การสร้างเว็บแอปอย่างง่าย” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสร้างเว็บแอปอย่างง่าย” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Python Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Python Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสร้างเว็บแอปอย่างง่าย”
สร้างเว็บแอปพลิเคชันแรกของคุณด้วย Flask คุณปฏิบัติ Python Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Python Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Python Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การสร้างเว็บแอปอย่างง่าย” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Python Academy นี้ได้ไหม
ได้ บทเรียน Python Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐานเฟรมเวิร์กเว็บ
- บทนำสู่ Flask
- การสร้างเว็บแอปอย่างง่าย
- การเชื่อมต่อ Python กับฐานข้อมูล