สร้างแอพพลิเคชั่นแบบไม่ต้องเขียนโค๊ด ด้วย CanvaAI และ Firebase

โพสนี้ผมจะมาแชร์ prompt ที่ผมใช้ในการแอพพลิเคชั่น รายรับ-รายจ่าย ใน CanvaAI ใน version ที่สามารถต่อกับ database ของ Firebase ได้ด้วยครับ

Screenshot

โดยก่อนที่เราจะมาสร้างแอพพลิเคชั่นกัน เพื่อให้แอพของเราสามารถเก็บข้อมูลได้ รวมถึงสามารถใช้งานได้ทั้งบนมือถือและในคอมพิวเตอร์ ผมแนะนำให้เราไปทำการสร้าง database ที่ firebase.google.com เสียก่อน

โดยเมื่อเราสร้าง project ใน firebase ขึ้นมาแล้วเป็นที่เรียบร้อยก็ให้เราทำการสร้าง Realtime Database โดยการกดที่ เมนู Build -> Realtime Database โดยให้เลือก localtion ของ database เป็น singapore และเลือกเป็น test database
หลังจากนั้นให้เราทำการสร้างแอพริเคชั่นขึ้นมาโดยการกดที่ปุ่ม + Add app และเลือกประเภทเป็น Web
หลังจากนั้นเราจะได้ค่าของ config ของมาในรูปแบบของ

// Your web app's Firebase configuration
const firebaseConfig = {
 .....
};

ให้เราทำการ copy config ด้านบนไว้เพื่อนำไปใส่ใน prompt ใน CanvaAI ในขั้นตอนต่อไป

หลังจากนั้นให้เรามาที่ Canva ให้เลือกหัวข้อด้านบนเป็น Canva AI และเลือกหัวข้อด้านล่างเป็น Code for me

Screenshot

หลังจากนั้นให้เราใส่ prompt ดังต่อไปนี้ไปได้เลย

สร้างเว็บแอพพลิเคชั่นสำหรับจัดการรายรับรายจ่าย โดยใช้ Firebase Realtime Database

โดยให้มี feature ของแอพดังต่อไปนี้

สามารถบันทึกรายรับรายจ่ายประจำเดือนได้
สามารถเลือกกลุ่มของรายรับและกลุ่มของรายจ่ายได้
มีหน้า config ที่เราสามารถปรับแต่งกลุ่มรายรับรายจ่ายของเราได้
มีกราฟวงกลมแสดงสัดส่วนรายรับรายจ่ายตามกลุ่ม
สามารถเลือกดูข้อมูลในเดือนอื่นๆในอดีตได้
สามารถเลือกดูข้อมูลสรุปรายรับรายจ่ายในแต่ละปีได้
มีปุ่มแก้ไขหรือลบข้อมูลรายรับรายจ่ายได้
สามารถ sync ข้อมูลแบบ realtime กับ firebase

แล้วให้ทำการเชื่อมต่อกับ Firebase Database ด้วย config ดังต่อไปนี้

// Your web app's Firebase configuration
const firebaseConfig = {
  ....
};

ให้ใช้ Firebase JavaScript SDK v11+ with import via CDN (no npm)
ให้ code HTML มีการ setup Firebase และ Javascript ใน file เดียว

ซึ่งกรณีที่เราต้องการที่จะสร้างแอพพลิเคชั่นแบบอื่น เราก็สามารถเปลี่ยนหัวข้อที่บรรทัดบนสุดเพื่อบอกน้อง AI ได้ว่าเราอยากที่จะได้แอพพลิเคชั่นแบบใหน
รวมถึง features ต่างๆของแอพเราควรจะมี feature อะไรบ้างก็สามารถกรอกเข้าไปได้เลย
และสุดท้ายให้เรานำเอา config ของ firebase ของเรามาวางใน section ด้านล่างได้เลย

ซึ่งหลังจากที่กด run และได้ผลลัพท์จนน่าพอใจแล้วก็ให้เราทำการกด use in design และให้เราทำการกด publish website และนำเอา link ที่ได้ไปใช้งานเข้าสู่ระบบของเราได้ทันที

แค่นี้เราก็จะได้แอพพลิเคชั่นที่สามารถเชื่อมกับ Firebase database แบบง่ายๆมาใช้งานแบบไม่ต้อง code เลย ลองนำเอาวิธีนี้ไปปรับใช้กับงานอื่นๆในองค์กรของเรากันดูนะครับ