WebAppTemplate FARM

เทมเพลตเว็บแอปแบบเต็มสแต็ค - FARM Stack

พื้นที่เก็บข้อมูลนี้มีเทมเพลตเว็บแอปพลิเคชันแบบสแต็กเต็มรูปแบบที่ทำงานบนสแต็กโซลูชัน FARM ซึ่งย่อมาจาก:

• F lask ซึ่งเป็นเฟรมเวิร์กเว็บ ของ Python แบ็กเอนด์
• mazon Web Services ซึ่งเป็นบริการคลาวด์ที่สามารถโฮสต์ซอฟต์แวร์ได้
• R eact ซึ่งเป็นเฟรมเวิร์กเว็บ JavaScript ส่วนหน้า
• M ySQL ระบบจัดการฐานข้อมูลเชิงสัมพันธ์

ฟาร์มคืออะไร?

สแต็ค FARM เป็นส่วนเสริมของสแต็ก LAMP ไม่มากก็น้อย โดยมีการเปลี่ยนแปลงที่โดดเด่นเหล่านี้:

• กรอบงานมิดเดิลแวร์มีความชัดเจน (Flask)
• เช่นเดียวกับสแต็ก MEAN มันมีเลเยอร์การนำเสนอแอปพลิเคชัน (React)
• สภาพแวดล้อมที่ซอฟต์แวร์ทำงานอยู่ถูกแทนที่ด้วยบริการคอมพิวเตอร์คลาวด์ PaaS/IaaS (AWS) แทน
• ไม่มีความคิดเห็นว่าจะใช้ระบบปฏิบัติการใด

กระติกน้ำ

Flask ใช้เพื่อเขียน API ของเว็บ / มิดเดิลแวร์ที่สามารถสื่อสารระหว่าง UI ของเว็บและแบ็กเอนด์ / ฐานข้อมูลของเว็บ นี่คือแกนหลักของแอปพลิเคชันทั้งหมดที่ติดชิ้นส่วนของแอปพลิเคชันแบบเต็มสแต็คไว้ด้วยกัน

โปรดทราบว่าเทมเพลตนี้ไม่ได้ใช้ ORM แต่ใช้โมดูล pymysql แทน ซึ่งหมายความว่านักพัฒนาจำเป็นต้องเขียนแบบสอบถาม SQL แต่สามารถเพิ่มความซับซ้อนของการสืบค้นที่จำเป็นในการทำงานบนฐานข้อมูลได้

อเมซอนเว็บเซอร์วิส

AWS คือบริการคลาวด์ที่สามารถโฮสต์แอปพลิเคชันได้ เราสามารถโฮสต์ซอฟต์แวร์ทั้งหมดบนบริการต่อไปนี้:

• AWS Lambda สำหรับการโฮสต์แอปพลิเคชันของเราบนโครงสร้างพื้นฐานแบบไร้เซิร์ฟเวอร์ เรายังสามารถเลือกโฮสต์ Flask API ของเราผ่าน Zappa ได้อีกด้วย ซึ่งทำให้การปรับใช้กับการใช้งานจริงเป็นเรื่องง่ายมาก
• AWS RDS สำหรับการโฮสต์ฐานข้อมูลของเรา
• AWS S3 สำหรับจัดเก็บวัตถุอื่นๆ ทุกประเภท เช่น รูปภาพและไฟล์

ซึ่งหมายความว่านักพัฒนาสามารถเก็บทุกอย่างไว้บนแพลตฟอร์มเดียวและลดการทำงานของ DevOps / IT ให้เหลือน้อยที่สุด

ตอบสนอง

React เป็นเฟรมเวิร์กที่ UI ของเว็บทำงานอยู่ แอปพลิเคชัน React อาจทำงานบน AWS Lambda ด้วย NodeJS

เทมเพลตนี้ใช้ JavaScript / JSX แต่อาจใช้ TypeScript ได้เช่นกัน

MySQL

MySQL เป็นฐานข้อมูลเชิงสัมพันธ์ที่เว็บแบ็กเอนด์ใช้ นอกจากนี้ยังสามารถโฮสต์บน AWS ผ่านบริการ RDS ได้อีกด้วย

วิธีการเรียกใช้ในพื้นที่

หากต้องการเรียกใช้เว็บแอปพลิเคชันนี้ จำเป็นต้องดำเนินการต่อไปนี้:

1. ตั้งค่าอินสแตนซ์ MySQL ภายในโดยใช้สคีมาใน db/
2. ติดตั้งโมดูลสำหรับ API และ UI
3. เรียกใช้ API และ UI ภายในเครื่อง

การตั้งค่าฐานข้อมูล

หากต้องการตั้งค่าอินสแตนซ์ MySQL ให้ทำตามขั้นตอนเหล่านี้:

1. สร้างและเชื่อมต่อกับอินสแตนซ์ฐานข้อมูล MySQL วิธีที่พบบ่อยที่สุดในการทำเช่นนี้คือใช้ MySQL Workbench หรือ mysql บนอินเทอร์เฟซบรรทัดคำสั่งของ Linux
2. เรียกใช้ sample.sql ภายในอินสแตนซ์ มันจะสร้างสคีมาชื่อ SampleInventory จากนั้นเริ่มต้นตารางชื่อ Inventory

การตั้งค่า API

โค้ดเบสสำหรับ Flask API สามารถพบได้ในไดเร็กทอรี api/

การตั้งค่าครั้งแรก (macOS)

1. สร้างสภาพแวดล้อมเสมือน Python ด้วย virtualenv farm-stack หลังจากนำทางไปยังไดเร็กทอรีนั้น
2. เปิดใช้งานด้วย source farm-stack/bin/activate
3. ไปที่ api/ และรัน pip3 install -r requirements.txt เพื่อติดตั้งโมดูล Python ทั้งหมดที่จำเป็นสำหรับ API
4. เปิด dbcreds.py ในไดเร็กทอรี api/ และแก้ไขข้อมูลรับรองฐานข้อมูลตามต้องการ

เรียกใช้ API

1. เปิดใช้งานสภาพแวดล้อมเสมือนจากด้านบน
2. รัน python3 app.py เพื่อรัน API บน http://localhost:8080

การตั้งค่า UI

โค้ดเบสสำหรับ React UI สามารถพบได้ในไดเร็กทอรี ui/ เทมเพลตนี้ใช้ yarn เป็นตัวจัดการแพ็กเกจ เป็นสิ่งสำคัญที่นักพัฒนาจะต้องไม่ผสมตัวจัดการแพ็คเกจอื่นเช่น npm เมื่อเพิ่มโมดูลใหม่

โปรดทราบว่าแพ็คเกจเช่น react-bootstrap หายไปจากเทมเพลตนี้

การตั้งค่าครั้งแรก (macOS)

1. รัน yarn install เพื่อติดตั้งการขึ้นต่อกันทั้งหมดที่จำเป็น

เรียกใช้ UI

1. รัน yarn start ทำงานในโหมดการพัฒนา
2. ไปที่ http://localhost:3000 บนเบราว์เซอร์