LINE LIFF—รีวิวการทำ Web App x LINE LIFF [โปรแกรมคำนวณค่างวดรถยนต์มือสอง]

หลังจากทาง Skoodio ร่วมมือกับ LINE Thailand ปล่อยคอร์ส เรียนรู้การพัฒนาแอปพลิเคชันด้วย LINE Front-end Framework ออกมาให้เรียนกันแบบฟรีๆ หลังจากเรียนเสร็จ ผมเลยได้ทดลองทำ LINE OA เต้นท์รถมือสอง ซึ่งจะมีไว้ให้ทีมงานได้ใช้ค้นหาข้อมูลเบื้องต้นต่างๆ เช่น ตำแหน่งที่ตั้ง เบอร์ติดต่อ และการคิดค่างวดผ่อนรถเบื้องต้น ซึ่งเป็นคำถามที่จะได้พบเจอบ่อยๆ โดยในส่วนที่จะนำมาพัฒนาให้เป็น Web App x LIFF ก็คงเป็นการคิดเงินค่างวดผ่อนรถเบื้องต้น ซึ่งผมจะพัฒนาให้ใช้งานได้ทั้งบน Desktop และใน LINE OA

ความต้องการเบื้องต้น

  • ในกรณีที่ใช้งานบน Web Browser ใน Desktop หรือ Mobile ก็จะให้แสดงผลการคำนวณในหน้า Web App ได้เลย
  • ในกรณีที่ใช้งานบน LINE จะเป็นการใช้ LINE LIFF แสดงผลลัพธ์ออกมาเป็น Flex message ออกมาในห้อง Chat ได้เลย

ลองมาดูตัวอย่างการใช้งานทั้ง 3 รูปแบบกันก่อนครับ


Part 1 : Web Application

การใช้งานบน Desktop

— ผมเริ่มต้นจากการสร้าง Web Application ด้วย HTML5 , CSS (Materialize CSS Framework) ในการสร้างแบบฟอร์มให้ผู้ใช้กรอกข้อมูล และรูปแบบการแสดงผลคำนวณในรูปแบบตาราง โดยมีโครงสร้างตาม Code ด้านล่างครับ

— ต่อด้วยการเขียน JavaScript ให้คำนวณ และแสดงผลลัพธ์ออกมาในรูปแบบตาราง โดยมี Function การคำนวณและแสดงผลตาม Code นี้เลยครับ โดยผมใช้ autoNumeric.js ในการแสดงผลรูปแบบตัวเลขให้มีเครื่องหมาย , คั่นจำนวนหลักในแบบฟอร์ม เพื่อให้ผู้ใช้งานกรอกได้ง่ายมากขึ้น โดยมีฟังก์ชันหลักๆ ในการทำงาน ดังนี้

  • paymentCalculate(carYear, loan) — ฟังก์ชันเลือกอัตราดอกเบี้ยตามเงื่อนไขข้อมูลปีรถยนต์ และคำนวณค่างวดด้วยฟังก์ชัน interestCalculation(loan, interestRate)
  • interestCalculation(loan, interestRate) — ฟังก์ชันคำนวณค่างวดตามอัตราดอกเบี้ยที่กำหนด
  • reateResultTable(carYear, carPrice, downPayment, loan, resultCalculate) — ฟังก์ชันแสดงผลลัพธ์ตามผลการคำนวณ

Part 2 : LINE LIFF

เปิดใช้งานใน LINE

ส่งผลการคำนวณลงในห้อง chat
เปิดใช้งานใน Mobile

— สำหรับการพัฒนาให้เป็น Web App ก็จบตาม Part 1 แล้วครับ โดยในส่วนของ Part 2 ผมจะพัฒนาให้สามารถใช้งานใน LINE ได้ด้วยการรวม Web App เข้าไปกับ LINE LIFF ครับ และเลือกใช้ความสามารถ LINE LIFF มาใช้เพียงบางส่วนนั่นก็คือ การตรวจสอบว่าผู้ใช้งานเปิด Web App URL ผ่านทาง LINE หรือ External Browser ครับ ถ้าเปิดภายใน LINE ก็จะให้ส่งข้อความแสดงผลการคำนวณเป็น Flex message ลงไปในห้อง Chat ได้เลย แต่ถ้าเปิดด้วย External Browser ก็จะให้แสดงผลผ่านหน้า Web App ตามปกติเหมือนใน Part 1 เลยครับ ลองดูตัวอย่าง Code ด้านล่างนี้ได้เลย


สำหรับใครอ่านมาถึงตรงนี้ก็สามารถไป Clone Project เพื่อนำไปพัฒนาต่อได้เลยที่ https://github.com/ChaiyachetU/liff-used-car-payment


ท้ายสุด จะเห็นได้ว่า LINE LIFF นั้นได้มาช่วยให้พัฒนา Web Application ที่สามารถใช้งานได้ใน LINE อย่างสะดวกมากยิ่งขึ้นเลยครับ แถมยังแทบจะไม่ต้องเปลี่ยน Code หลักๆ ใน Web App เลย ก็หวังว่าบทความรีวิวนี้จะเป็นประโยชน์และแนวทางในการพัฒนาให้กับเพื่อนๆ ทุกคนครับ Happy Coding…Happy Life…🚀🚀🚀


โปรโมชั่น คูปองส่วนลด และดีล ที่ดีที่สุดของร้านค้าออนไลน์กว่า 300 แบรนด์พร้อมรับเงินคืนจาก ShopBack
🔗 https://bit.ly/3c4tlmV

Ruk-Com จดโดเมน-เช่าโฮสต์ ราคาประหยัด พร้อมให้บริการใน 1 นาที
🔗 http://bit.ly/36q8A12