บทความนี้เป็นการแนะนำวิธีการประยุกต์ใช้เครื่องมือ AI ฟรี มาสร้างเว็บแอปพลิเคชั่นเพื่อใช้งานจริงในชีวิตประจำวัน โดยที่เราไม่จำเป็นต้องเขียนโปรแกรมเป็นก็สามารถสร้างได้ง่าย โดยจะมีการใช้ Firebase สร้างเป็นฐานข้อมูล และใช้ Canva AI เพื่อสร้างโค้ดหน้าเว็บไซต์
- Firebase คือแพลตฟอร์มบนคลาวด์ของ Google ที่รวบรวมเครื่องมือและบริการต่างๆ เพื่อช่วยให้นักพัฒนาสร้างแอปพลิเคชันบนเว็บและมือถือได้ง่ายและรวดเร็วขึ้น โดยไม่ต้องจัดการระบบหลังบ้านเอง บริการหลักๆ ของ Firebase ครอบคลุมการพัฒนา (เช่น ฐานข้อมูล, การยืนยันตัวตน), การเติบโต (เช่น การวิเคราะห์, ข้อความพุช), การสร้างรายได้ และการวิเคราะห์ข้อมูล
- Canva AI คือชุดเครื่องมือปัญญาประดิษฐ์ (AI) ที่ผสานรวมอยู่ในแพลตฟอร์ม Canva เพื่อช่วยให้การสร้างสรรค์งานออกแบบและเนื้อหาต่างๆ ง่ายและรวดเร็วยิ่งขึ้น โดยผู้ใช้สามารถใช้คำสั่งหรือข้อความเพื่อสร้างผลงาน เช่น สร้างภาพจากข้อความ, สร้างข้อความ (Magic Write), สร้างงานนำเสนอ (Magic Presentation), และแก้ไขรูปภาพ (Magic Edit) ได้อย่างอัตโนมัติ
ตัวอย่างเว็บแอปพลิเคชั่นจัดการรายรับ-รายจ่าย
เริ่มต้นสร้างฐานข้อมูลและแอปพลิเคชั่นใน firebase
โดยฐานข้อมูล (Data based) เราจะใช้บริการที่ firebase.google.com โดยสามารถสมัครเข้าใช้งานได้ดังนี้
1. เข้าไปที่ https://firebase.google.com ลงชื่อเข้าใช้งานด้วยบัญชี gmail ให้เรียบร้อยแล้วคลิกที่ “Go to console”
2. คลิกที่ “Get started by setting up a Firebase project”
3. ตั้งชื่อตรง “Project name” เป็นภาษาอังกฤษแบบไม่มีอักขระพิเศษ ติ๊กเครื่องถูกตรง “I accept the Firebase terms” คลิกปุ่ม “Continue”
4. ติ๊ดเลือก “Enable Google Analytics for this project” ออก แล้วคลิกที่ “Create project” รอสักครู่
5. คลิกที่ปุ่ม “Continue”
6. ที่ด้านซ้ายมือ เลือกเมนู “Build” แล้วเลือก “Realtime Database”
7. ที่หน้า Realtime Database เลือก “Create Database”
8. ที่หน้านี้เป็นการเลือกสถานที่ตั้งของ Server แนะนำให้เลือกประเทศสิงคโปร์เพราะอยู่ใกล้เรามากที่สุด กดที่ปุ่ม “Next”
9. เลือก “Start in test mode” เลือก “Enable”
จบขั้นตอนการสร้างฐานข้อมูล ต่อไปเป็นการสร้างแอปพลิเคชั่นใน firebase
10. เลือกที่ “Project Overview” เลือก “+ Add app”
11. เลือกที่ปุ่ม </>
12. ตั้งชื่อแอปพลิเคชั่นตามต้องการ แล้วกดที่ปุ่ม “Register app”
13. ทำการคัดลอกข้อมูล // Your web app’s Firebase configuration เก็บไว้
จบในส่วนของ firebase
เริ่มต้นสร้างเว็บแอปพลิเคชั่นจัดการรายรับ-รายจ่ายด้วย Canva AI
1. เข้าเว็บไซต์ Canva ลงชื่อเข้าใช้งานให้เรียบร้อย
2. เลือก “Canva AI” แล้วเลือก “Code”
** ของใครที่ไม่มีเมนูนี้ แสดงว่ายังไม่ได้รับการอัปเดตจากทาง Canva
3. คัดลอก prompt ต่อไปนี้ไปใช้ได้เลย โดยสามารถปรับแต่เพิ่ม/ลด ได้ตามต้องการ
สร้างเว็บแอพพลิเคชั่นสำหรับจัดการรายรับรายจ่าย โดยใช้ Firebase Realtime Database
โดยให้มี feature ของแอพดังต่อไปนี้
สามารถบันทึกรายรับรายจ่ายประจำเดือนได้
สามารถเลือกกลุ่มของรายรับและกลุ่มของรายจ่ายได้
มีหน้า config ที่เราสามารถปรับแต่งกลุ่มรายรับรายจ่ายของเราได้
มีกราฟวงกลมแสดงสัดส่วนรายรับรายจ่ายตามกลุ่ม
สามารถเลือกดูข้อมูลในเดือนอื่นๆในอดีตได้
สามารถเลือกดูข้อมูลสรุปรายรับรายจ่ายในแต่ละปีได้
มีปุ่มแก้ไขหรือลบข้อมูลรายรับรายจ่ายได้
สามารถ sync ข้อมูลแบบ realtime กับ firebase
แล้วให้ทำการเชื่อมต่อกับ Firebase Database ด้วย config ดังต่อไปนี้
ส่วนนี้คัดลอกมาจาก firebase ตามขั้นตอนที่ 13
// Your web app's Firebase configuration
const firebaseConfig = {
....
};
ให้ใช้ Firebase JavaScript SDK v11+ with import via CDN (no npm)
ให้ code HTML มีการ setup Firebase และ Javascript ใน file เดียว4. รอให้ระบบสร้างโค้ดให้เราสักครู่
5. เมื่อได้เว็บแอปมาแล้วทดลองใช้งาน ถ้ายังไม่พอใจสามารถพิมพ์คำสั่งเพิ่มเติมเพื่อให้ Canva AI สร้างโค้ดให้เราใหม่ได้ และเมื่อพอใจแล้วกดที่ “Use in a design” เลือก “Website”
6. เลือก “Preview” เพื่อทดสอบเว็บแอปที่เราสร้างขึ้น
7. เมื่อปรับแต่งจนเป็นที่พอใจแล้ว เลือกที่ “Publish Website” ตั้งชื่อ ULR ตามต้องการ แล้วกดที่ “Publish”
8. รอสักครู่แล้วจะได้ URL ของเว็บแอปพลิเคชั่นจัดการรายรับ-รายจ่ายไปใช้งาน
