อัพเดตเทคบ้านเขียวประจำปี กับงาน LINE Thailand Developer Conference 2024
เดี๋ยวนี้มางานไลน์แล้วเหมือนอัพเดตทั้งปีของไลน์จากงานนี้เลยทีเดียว ห่างหายจากการทำ chatbot บ้านนี้มานานเลย แถมได้ความรู้ใหม่ ๆ นอกสายงานเราด้วย ไม่ว่าจะเป็น AI ที่มีหลาย session แล้วก็ฝั่ง web dev อ่ะเนอะ
ปีนี้เปลี่ยนสถานที่จัดงาน จากไบเทค เป็นโรงละครเคแบงก์สยามพิฆเนศ ที่เดินทางสะดวกใจกลางเมือง และงานเปิดลงทะเบียนตั้งแต่ 9 โมงเช้า เรามาถึงก็จะ 10 โมงล่ะ คนเยอะมาก แล้วเขามีอาหารเช้าเบา ๆ ให้ทานด้วยนะ
มีโซนโหวตด้วยว่าใช้อะไรทำ API ยอดฮิต 2 ตัวนี้ อย่าง LINE Messaging API กับ LINE LIFF
มีบูธด้วยเล็กน้อย
ห้อง workshop อยู่ตรงนี้นะ ชั้น 7
โรงละครจะอยู่ชั้นบน ขึ้นบันไดเลื่อน แล้วจะเจอทางเข้าที่นั่งชั้น 2 ก็เพิ่งรู้ว่าเข้าตรงนี้ แต่สุดท้ายก็ไม่ได้แวะดูวิวชั้นสองอยู่ดี
ตอนเย็นรับเสื้อตรงนี้นะ จริง ๆ มีอีก backdrop ให้ถ่ายนะ
จับจองที่นั่งในฮอลล์ล่ะ พร้อมลองถ่ายด้วยว่าได้ประมาณไหน สรุปภาพนิ่งโอเคอยู่ แต่บางครั้งสีจะเพี้ยนหน่อย ส่วนวิดีโอต้องปรับแสงน้อยที่สุด เพราะจอสว่าง ที่นั่งตรงนี้ถ้าเป็นละครเวทีหรือคอนเสิร์ตก็น่าจะแพงอยู่555
ถึงเวลาเปิดงานแล้ว มีการกล่าวต้อนรับจากคุณบี CM ของ LINE Developer Thailand ปีนี้มีคนลงทะเบียนพันกว่าคน แต่สถานที่รองรับได้ 700 คน ธีมงานในปีนี้คือ Building the Future with LINE API and AI
วันนี้มี 13 session ตลอดทั้งวัน มี 17 speaker และ 2 workshop ในช่วงบ่ายที่ต้องจองก่อน ถ้าหน้างานเหลือยังพอ walk-in ไปได้
Opening & Tech Vision Keynote — Weera Kasetain CPO | LINE
ตอนนี้พี่บอล shift ตัวเองจาก Engineer เป็น Product แล้ว ใน session นี้บอกทิศทาง และเปิดเครื่องมือ ให้ developer ได้เอาไปใช้ทำงาน
Growing Together with Thai Developer
ช่วงโควิดมี developer เพิ่มขึ้นสูง และการมี technology อย่างเดียวไม่พอต่อการสร้าง impact ต้องมีคนเอามาใช้ให้เกิดประโยชน์ แก้ปัญหาให้คน ให้เขามีชีวิตที่ดีขึ้น
LINE Engineering Team's Mission
- มี LINE API Expert ที่คอยช่วยตอบคำถาม ให้คำแนะนำต่าง ๆ ในคอมมู
- มี vision สร้าง tech และ tool อำนวยความสะดวกให้ user และ LINE เองแก้ปัญหาเหล่านี้ให้ดีขึ้น
- developer มีจำกัด เลยมี tool ที่ให้ developer ได้ใช้ และต่อยอดได้ ทดสอบภายในก่อนเปิด Open Platform ให้คนนอกมาใช้งานในการสร้าง solution ได้ง่ายขึ้น
Open Platform
OA Plus Platform เป็น foundation หลัก สร้าง on-top บน OA ได้ และมี integration layer ให้ทุกอย่าง seamless
API First Class Citizen
เปิดกว้างให้คนใช้งานได้มากขึ้น ให้ developer ใช้งานและเรียนรู้ได้ง่าย โดยใช้มาตรฐาน RESTful API ที่เราใช้กันอยู่แล้ว, มี document ที่อ่านง่าย, ออกแบบมาเพื่อ dev และง่ายต่อการนำไปใช้ทำ solution ต่าง ๆ
Open Infrastructure
มีการ provide infrastructure ที่สำคัญ
Introduction Bot Marketplace
หาบอทมาใช้งานได้ยาก ต้องมาหาจากแอพ แต่ตอนนี้เราหาจาก marketplace ได้แล้ว และมี recommend ให้ด้วย
Mini App
ยังไม่ได้เปิดใช้ในวงกว้าง process ที่เราจำได้ คือ ต้องส่งเอกสารมาขอที่ LINE ก่อน ถึงจะได้ใช้ ที่มีอยู่ก็จะเป็นของ Arincare ให้คนเข้ามาใช้งานผ่าน LINE ใช้เวลาในการ dev สั้น ไม่ต้องเรียนรู้ใหม่ สามารถใช้ feature ของ LINE ได้เลย และ LINE มีฐาน user ที่เยอะ
ซึ่งเปิดกว้างให้ dev เข้าถึง และใช้งาน ให้ติดตามข่าวปลายปีนี้ถึงปีหน้า
เป้าหมาย: ให้ทุกคนเข้าถึงได้ง่าย เพื่อพัฒนา solution เพื่อสร้าง impact ให้ตอบโจทย์ user ได้มากขึ้น และให้ชีวิตเขาดีขึ้น
มีช่วงนึงพี่บอลมีถามว่ามีใครไปงานนี้ทุกปีบ้าง งานนี้เริ่มจัดปีแรกปี 2019 และมีแจกเสื้อทุกปีด้วยนะ เราเลยเอาบล็อกงานปีก่อน ๆ มาแปะตรงนี้แล้วกัน
Minseo Chayabanjonglerd
Minseo Chayabanjonglerd
Minseo Chayabanjonglerd
Minseo Chayabanjonglerd
Minseo Chayabanjonglerd
Minseo Chayabanjonglerd
Minseo Chayabanjonglerd
Minseo Chayabanjonglerd
ต่อมาคุณบีมาบรีฟกิจกรรมหลักในวันนี้ คือการเก็บแต้มแลกเสื้อนั่นเอง โดยเรากด scan qr code ท้าย session แล้วทำแบบทดสอบหลังฟังหน่อย แต่ละ session จะมี 3 - 4 ข้อ ตอบถูกครบ 20 ข้อ รับเสื้อหลังจบงาน ซึ่งตอนรับทีมงานจะกรอกโค้ดเพื่อ redeem ให้เรานะ
Building the Future: LINE API Updates in 2024 — Jirawat Karanwittayakarn | Tech Evangelist, LINE; Warit Wanwithu | Developer Relations, LINE
พบกับการอัพเดตของใหม่ประจำบ้านเขียวกันอีกเช่นเคย กับพี่ตี๋พี่แทน มาพร้อมเสียงตบมือที่มาจากคนสามล้านในโรงละคร
ตอนนี้มี developer ครบ 77 จังหวัดแล้ว จำนวน 45000 คน
และการใช้งานในปีนี้ของ Messaging API 540k และ LIFF 260k ซึ่งกราฟก้าวกระโดดมาก ๆ (ถ้าเรามองเป็นกราฟคือ All-time-high เลยนะ)
Messaging API
- Loading Animation: ของออกใหม่ในปีนี้ แก้ pain ประมวลผลช้าแล้ว user รอนานมากกว่าจะตอบ เช่น reward, gen AI จะมี animation เหมือนกำลังพิมพ์ แล้วพอได้ผลกลับมาก็แสดงผลปกติเลย ใส่บรรทัดเดียวก็ใช้ได้เลย และทุกคนใช้ฟรี (ซึ่งหลาย session mention ถึงทั้งวัน 55555)
ไปค้นเพิ่มเติมมาว่า implement เพิ่มยังไง
- New Followerd or Unblocked: มี webhook event มาเพิ่ม
follow.isUnblockedดูว่าคนนี้ unblocked ไหม จะได้ส่งไปหาคนใหม่ที่เพิ่งเพิ่มเพื่อนไป ซึ่ง use case ก็คือ ขึ้น Rich Menu ไม่เหมือนกันล่ะหนึ่ง ดูว่าคนได้ตั๋วมางานไหม ลง workshop อะไรบ้าง ช่วยให้เราแตะ database น้อยลง
- Narrowcast สามารถส่งให้กับคนที่มีอายุ 50 ขึ้นไป แต่น้อยกว่า 70 ปีได้แล้วนะ ว่าแต่ผู้สูงวัยในสไลด์หน้าตาคุ้น ๆ นะฮะ
- Mention
- 2021: mention หาเพื่อน ดูว่าใคร tag หาใครได้บ้าง
- 2023: user สามารถ mention ทุกคนได้แล้วโดย @all และ webhook ได้รับสัญญาณนี้
- 2024: สิ่งที่ทุกคนรอคคอยมาแล้ว เราสามารถแท็กหาบอทได้ เช่นเราเรียกขุนทองก็แท็กเรียกได้เลย ทำให้ chatbot ทำงานตรงที่เรียกได้ เช่น ทวงเงินงี้ ซึ่ง user mention bot ได้ แต่ bot mention ไม่ได้เน้ออ
ในปี 2016 มี Text Message และตอนนี้เปิดตัว Text Message v2 ตัว payload คล้ายกัน แต่ความสามารถเพิ่ม อย่าง substitution ดูว่าเรา tag อะไรได้บ้าง กำหนด object เพื่อ mention user ได้ด้วย userId และนอกจากนี้ยังรองรับ emoji และ tag ทุกคนได้ ตัวนี้เปิดให้ใช้งานแล้ว
มี demo สั้น ๆ เช่น คนเข้ามาใหม่ก็ tag เขาแล้วก็ welcome และแท็กทุกคนได้ว่ามี new joiner มาแล้วนะ
LIFF
ออก SDK v2.24.0
- แก้เรื่องสแกนติดบ้าง ไม่ติดบ้าง ในบาง device
- เดิมมี
liff.getLanguage()แต่ไม่สามารถดึงภาษาที่ set ใน LINE ได้ ตอนนี้สามารถใช้liff.getAppLanguage()เพื่อดึงภาษาในเครื่องได้ - มี error log
การ test local เราต้อง mock user profile ซึ่งมีอายุเพียง 12 ชั่วโมงเท่านั้น เท่ากับเราต้อง set แบบนี้ทุกวันเพื่อ test แต่ตอนนี้มี LIFF CLI ที่สามารถ run ใน local ได้ล่ะ ไม่ต้องไป mock user ทุกวันทำงานอีกต่อไป
Other update
feature roadmap ดูอัพเดตผ่านเว็บนี้ได้เลย
Mini App จะเปิดให้ทุกคนใช้ในเร็ว ๆ นี้ เป็นแบบ unverify ไม่ต้องส่งเอกสารให้ LINE เพื่อ verify approve แล้ว เมื่อเปิดใช้แล้วเราสามารถพัฒนาจากที่บ้านได้เลย ทำให้เห็น use case ใหม่ ๆ ออกมามากขึ้น
ถ้าเราอยาก verify ก็จะเป็น flow แบบนี้ คือเป็น unverify ก่อน จากนั้นส่งเอกสารเพื่อเป็น verify
คอร์สเรียนใหม่ Building LINE Chatbot with ChatGPT and Gemini เรียนฟรีได้เลยที่ borntodev ตอนนี้เรียนไปแล้ว 1300 คน ต้องตำล่ะนะ
สุดท้าย 60% ของ startup fail ใน 3 ปี เนื่องด้วยหลาย ๆ สาเหตุ เลยมีโครงการ LINE Scale Up หา potential startup ให้ fullfil ได้มากขึ้น มี target 5 - 7 startup ในโครงการในรอบนี้
ถ้าได้เข้าโครงการจะได้อะไร? ได้ส่วนการใช้งาน platform เบิ้ม ๆ 4 ล้านบาท, service, consultation, networking, ฐานลูกค้า และ partner รวมถึง funding ด้วย โดยโครงการ launch วันแรกในวันงานเลย
Revolutionizing Telepharmacy with The Power of Gen Al and LINE API — Natthaya Kanchanapawanart | Product Manager, Arincare Chatdanai; Sriprasart | Product Manager, Skooldio
หลาย ๆ คนที่มางาน LINE Dev ปีก่อนน่าจะคุ้น ๆ กับ Arincare กันบ้างแล้ว
Arincare ทำธุรกิจ health card เกี่ยวกับยา และเวชภัณฑ์ จากต้นนํ้าไปปลายนํ้า เจาะจงที่ B2C (business to customer) เป็นหลัก
ถ้าเราป่วยเราทำยังไง? และถ้าเราอยู่คนเดียวล่ะ พิมพ์หาบน Google เจอว่าเป็นโรคร้ายแรง
และถ้าปรึกษาเภสัชกรโดยตรงให้อุ่นใจจะดีกว่าไหม? ของ MedCare มีเภสัชกรคอย stand-by ใช้งานง่ายบน LINE OA มีบริการจัดหายา และจัดส่งยา ให้บริการครอบคลุมทั้งใน กทม. และปริมณฑล
ซึ่งเขาก่อตั้งช่วง COVID กระจายยาไปให้คนที่ต้องการ และเติบโตอย่างต่อเนื่อง มี 85,000 user base มีเคสทั้งหมด 120k และสูงสุดต่อวัน 300 เคส!
ในมุมคนป่วย urgent ต้องมีคนตอบ ถ้าไม่มีคนตอบเขาไปหา option อื่น ทำให้ลูกค้า drof-off แล้วทำยังไงให้ serve ลูกค้าเหล่านี้ได้เร็วขึ้น
ในมุมเภสัชกร เคสเข้ามาพร้อมกันเยอะ แต่ 1 เคสมีหลาย step ก่อนที่จะจ่ายยาได้ ดังนั้นเราลด workload ของเขา ช่วย automate ได้ไหม
และการมาถึงของ AI น่าจะช่วยอะไรได้ เลยมีการ co ด้าน tech กับ Skooldio หลาย ๆ คนอาจจะคุ้นชินว่าที่นี่เป็นโรงเรียนของชาวสายเทคแห่งหนึ่ง แต่จริง ๆ แล้วมีขา tech ในการสร้างนวัตกรรม เพื่อตอบโจทย์และแก้ปัญหา ส่งเสริม empower และลด workload
เรื่องสุขภาพความถูกต้องเป็นเรื่องสำคัญ จึงต้องใช้คนจริงในการ verify ซึ่งหมายถึงให้คนวินัจฉัยไม่ใช่บอทนะ ไม่ใช่คนจริงต้องละลาย 😆
อีกทั้งดู challenge ของ business ก่อน ถ้าคนไข้เนอะ ซึ่ง 80% ของทั้ง flow อยู่ที่การสอบถามอาการ ใช้เวลานานกว่าจะถึงการจ่ายยา ให้ gen AI สอบถามอาหาร แล้วสรุปให้เภสัชกร บอทคุยกับคนได้จนกว่าเภสัชกรเข้ามา
reponse มีความเป็นมนุษย์มากที่สุด หรือมีความ humenize แล้วเราจะ prompting ถามยังไงกับ LLM ซึ่งใช้ Gemini เพราะ Skooldio co กับ Google และพิจารณากับทางเภสัชกร จนได้ model ที่เหมาะสมมา คือ Gemini 1.5 Flash-8B
แต่ bot หรือในที่นี้คือคุณ Pharma ยังอ๊อง ๆ อยู่ ทำงานไม่ได้ดี เลยเอา Agentic Workflow มาใช้ แบ่งงานแบ่งหน้าที่ AI ใส่ใน Medcare Controller มาทำงานร่มกัน ทดสอบบน prod
แต่ดูเป็นคนถามคำตอบคำ เพราะรับทีละข้อความ เลยสร้างระบบการทำงานให้มีประสิทธิภาพมากที่สุด ให้รอคนไข้ก่อนตอบ แต่ต้องรอข้อความ
ลิฟต์แก้ว เกิดมาเพื่อแก้ pain รอลิฟต์งาน สร้าง attraction บางอย่าง เลยใช้ loading animation
ถ้าเภสัชกรอยากกลับมาคุยกับเคสล่ะ เลยมี LINE OA เพิ่มอีกตัว ไม่ให้กระทบกับ UX ที่เจอ
หลังจากเอาบอทขึ้นไป 1 เดือนแล้ว เกิด impact อย่างไร?
- business: ทำให้ลูกค้าอุ่นใจ service smooth ขึ้น drop-off น้อยลง 40% อีกทั้ง cost ลดลง 100k ใช้ทีมเดิมได้เลย ไม่ต้องหาคนเพิ่ม
- เภสัชกร workload ลดลง focus เคสได้มากขึ้น ทำให้ชีวิต happy ไม่ burn-out deliver value เขาได้จริง
- ลูกค้า happy อุ่นใจ ประทับใจ กลับมาใช้บริการบ่อยขึ้น และแนะนำเพื่อนให้มาใช้งาน
Key Takeaway
- AI ไม่ใช้คำตอบสำหรับทุกอย่าง ให้เข้าใจปัญหาก่อนจะแก้
- เลือกใช้ AI ให้ถูกกับงาน
- AI มีข้อผิดพลาด ตอบไม่ถูกต้อง 100% ต้องเอาคนมาอยู่ในสมการ ในส่วนที่เหมาะสม และทำงานไปด้วยกัน
สุดท้ายฝากร้านกันสักนิดนึง เผื่อเพื่อน ๆ อยากใช้บริการ
Seamless Inventory Management with ChatGPT and LINE Shopping API — Phisit Jorphochaudom | Solution Engineer Team lead, LINE
เริ่ม session ด้วย demo สั่งงานด้วยเสียงเพื่อเพิ่ม stock ซึ่งใช้ speech-to-text API และส่งงานด้วย text ได้นะ
แล้วทำอะไรก่อนที่จะได้มา?
- ใช้ AI แปลงข้อความเสียงใน text
- ใช้ AI แกะ response body ใน json
- ให้ AI คิดว่าใช้ API อะไรต่อ
- integrate กับ LINE
- สร้าง rich workflow ด้วย AI
แล้วใช้อะไรบ้าง?
- OpenAI ก็คือเพื่อนของพี่ในทีมเรา ChatGPT นั่นแหละ ใช้ Speech to Text API เหมือนเราแชทผ่าน ChatGPT แต่ผ่าน interface อื่น และ Chat completion API คิดว่าเรียกอะไรต่อ
- LINE API: ใช้ LINE Messaging API สำหรับ webhook และตอบข้อความ และ LINE Shopping สำหรับดึง product และ update stock
เพิ่มความสามารถให้ AI model เชื่อมต่อไป API ข้างนอกได้
Architecture
ส่ง audio ผ่าน LINE โดยส่ง webhook ไปบอก server แล้ว get content จากนั้น download ไฟล์เสียงไว้ที่ server จากนั้นใช้ Speech to Text ในการแกะเสียง แล้วส่งเป็น text กลับไป ต่อมาเรียก Chat Completion เพื่อเข้าใจ context และเลือก function ให้เราได้ ไปเรียก API ที่ LINE Shopping แล้วส่งข้อความกลับไปหา user
ปัญหา shopping ไม่มี update ด้วย product name ต้องใช้ inventory id ให้ AI ดึงสินค้าทั้งหมด หา id แล้ว update stock (content = prompt ใส่ role อยากให้ทำอะไร)
ใช้ AI parse ให้ calling ยังไง แล้วเรียกใน code ของเรา
ในเรื่องของราคาคิดเป็น token ซึ่งมันถูกมาก ๆ แทบจะฟรี เสียงสั้น ๆ ถ้าครบนาทีไม่ถึงบาท
ต่อยอดยังไง?
- ถ้ามีสินค้าเป็น 1000 จะเกิดอะไรขึ้น? ใช้ได้แต่ช้าหน่อย อาจจะใช้ vector embedding
- ใช้ Assistant API เพราะว่าอันนี้ที่ใช้มันเป็น Stateless API มันจำไม่ได้ว่าเคยคุยอะไรกันไว้ ถ้าเปลี่ยนเป็นอันนี้ทำให้ AI จำข้อความเก่า ๆ ได้
- เพิ่งเปิด speech-to-text แบบ real-time
The Future of LINE Retail Chatbot using Gemini Al Session —Punsiri Boonyakiat | Senior Data Engineer, CJ Express
หลาย ๆ คนคงเคยไปซื้อของที่ CJ Mart กันมาแล้ว (ยกเว้นนี่ แหะ ๆ ไม่มีสาขาใกล้) จริง ๆ เขามีทีม CJ Tech ที่เป็นทีมย่อยข้างในนั้น ที่ทำให้ CJ Mart นั้นเป็นมากกว่าร้านสะดวกซื้อทั่วไป มีระบบ CRM สร้างความสัมพันธ์อันดีกับลูกค้า ใช้ LINE เป็น touch point ให้ทุกคนเข้าถึงได้ มีค้นหาสาขา ระบบสมาชิก สะสมแต้ม เก็บคูปองที่ส่งเฉพาะกลุ่มลูกค้า ประกาศข่าวสาร แคมเปญต่าง ๆ
เขาใช้ AI เป็น Shopping Assistance ค้นหาข้อมูลสินค้า ว่าซื้อยังไงได้บ้าง
และมี challenge หลังจาก launch กันภายใน
- AI หลอน ตอบคำตอบที่ผิดอย่างมั่นใจ ลูกค้าก็เชื่อว่าจริง
- ช่วยเหลือลูกค้าในการ shopping แบบไม่คุยเรื่อยเปื่อย คุยไปเรื่อย
- คนไม่อยากคุยกับหุ่นยนต์ อยากคุยกับมนุษย์
- ดึงข้อมูลจากหลาย source หาข้อมูลที่ดีที่สุด เช่น ลูกค้าถามว่าพรุ่งนี้อากาศดีไหม และไป check ดูว่าพรุ่งนี้ฝนตก อาจจะตอบกลับไปพร้อมบอกไม่มีร่มมาซื้อร่มได้นะ
Retrieval Augmented Genration (RAG)
RAG ช่วยให้ตอบคำถามได้ถูกต้องมากขึ้น
- Retrieval ค้นหาข้อมูลฝั่ง Data Store ไม่ว่าจะเป็น document, website, database ต่าง ๆ
- Augmented เอา data มาร่วมด้วย LLM ให้ตอบตรงใจลูกค้า
- Genration: ได้คำตอบจาก AI ออกมา
Tools Building to LLM Chatbot
ใช้ Vertex AI และ Gemini ลงแบบ multi-model หลายตัว
ในส่วนของ Vertex AI
- Vertex AI Agent Builder: สมัยก่อนเขียน intent, conversation flow ช่วยลดเวลาด้วย generation base แค่คลิกสร้าง บวกกับ create data store เขียน playbook ระบุเป้าหมายให้ตอบกลับแบบไหน สุดท้ายได้ agent ไป integrate ผ่านหน้า UI ได้เลย
- Vertex AI Search: มีคลัง Google ใน LINE OA ทำให้ตอบได้หลากหลาย ผ่านหน้า UI เป็น no-code โดย import product list มี Gemini สรุปผล ได้ widget ยิงตามหน้าเว็บ หรือบน LINE LIFF ก็ได้ เรียกผ่าน LINE Messaging API แสดงเป็น Flex Message ได้
- Vertex AI Vector Search: ทำ embedding แปลงรูปเป็น vector สามารถเลือก algorithm ในการทำ embedding ได้เอง
Building Retail Agent Solution
data source ข้อมูลต่าง ๆ ไม่ว่าจะเป็น NDJOSN, website, pdf, product image upload เข้า cloud storage สร้าง agent ออกมา ใช้ Semantic Search, Image Search
LINE Messaging Architecture
มี webhook event เข้า Cloud Functions
Integration LINEMessaging API
ใช้ python กับ cloud function
signature รับ event รูปภาพ ประกาศโค้ดคำนวณ
และแน่นอนมีการใช้ loading animation ด้วย
Semantic Search
การค้นหา โดยการพิมพ์ keyword ในที่นี้ใช้ google-cloud-discoveryengine แล้วปั้นเป็น Flex Message ออกมา
Image Event
solution 1: เป็น Gemini Image Understanding Search ตัว Gemini สรุป keyword หาใน AI search ส่ง multi model จากนั้น one-shot prompt ให้ example แล้ว return หน้าตาแบบนี้เท่านั้น
solution 2: customize vector แปลงรูปเป็น vector หารูปที่ใกล้เคียงกัน ถึง speaker จะปั่นสไลด์ดึกจนถ่ายรูปเบลอ แต่ยังหาเจอได้เน้อ
user journey: รู้พฤติกรรมลูกค้า, จับกลุ่มลูกค้าเพื่อส่งมอบโปรโมชั่น, อาจจะ complain ร้านค้า เอามาเป็น feedback การบริการ และทำแคมเปญ
summary
ที่พูดใน session นี้ยังเป็น demo อยู่ ยังไม่ได้ on prod นะ ก่อนจากฝากร้านหนึ่งกรุบ
ฟังแล้วก็นึกถึง session จากงานนี้ เพื่อน ๆ ไปอ่านกันได้เลย
Minseo Chayabanjonglerd
มื้อเที่ยง ถึงจะมาคนเดียวก็อร่อยได้ (และตอนนั้นอ่านมาม่าเรื่อง$หอมแดงอยู่) คืออาหารรอบนี้อร่อยมาก หยิบมาทุกอย่างยกเว้นของหวาน แล้วชอบเกือบทุกอย่างเลย ก๋วยเตี๋ยวไส้ปลาทูน่าคือเกินคาดมาก หมูสะเต๊ะก็กำลังดี ขนมปังกรอบอันนั้นไม่แน่ใจว่าเรียกว่าอะไรก็อร่อย เบอร์เกอร์หมูก็ดี ชอบผัดไทน้อยสุด อาจจะไม่ใช่รสที่ถนัด แหะ ๆ แล้วสุดท้ายไม่ได้เบรกอดชิมของหวานเลย
แอบทิ้งวาปร้านไว้ เผื่อใครอยากเอาไปใช้ เห็นจากทิชชู่เลย
Natee
ต่อมาเดินบูธ บูธของ Abbon เขามี solution ในการนำ LINE Beacon มาเป็นผู้ช่วยในการทำการตลาด ในการส่งข้อความไปให้ลูกค้าที่อยู่ในรัศมีนั้น ซึ่งงานนี้มีใช้เจ้า Beacon 2 จุด และ ใช่แล้วเอาไปแสดงบนจอที่เราเห็นตอนขึ้นบันไดเลื่อนนั่นแหละ!
จากนั้นทักท้ายพี่ตี๋ แล้วก็ขึ้นไปลุย session ช่วงบ่ายต่อ เสื้อเริ่มเอามาตั้งล่ะนะ
Domain Data Platform for Scalable Data Management — Weera Kasetain CPO | LINE
งานของพี่บอลคือดูแลการสร้าง data product และจัดการ data platform ซึ่ง session นี้เอาไปแชร์ที่ญี่ปุ่นเมื่อปลายปีที่แล้ว และพัฒนาอยู่ในไทย
session นี้เนื้อหาแน่นมาก กับเวลาอันจำกัด ถ้าหลุดตรงไหนขออภัยค้าบ
แล้ว 2 อันนี้เหมือนหรือต่างกันตรงไหนนะ 🤔
แล้วคุณเคยประสบปัญหานี้หรือไม่?
- ทำแอพ อยากเอา data อันนี้ไปใช้งานนอกแผนก นอก service ประเทศอื่น ส่ง data จากจุดนึงไปอีกจุด
- ทีม app ขอ data engineer ว่า inject data เข้า centralize platform ให้หน้อย จะเอาไปใช้งานต่อ
- จัดระเบียบ data ไม่ scale ทุกคนมาใช้ resource ตรงกลาง ทำให้ resource ไม่พอ query data
What-if?
- ไม่ต้องพึ่งพา centrailize ให้เข้าถึงได้โดยตรงจาก context ได้โดยตรง โดยผ่าน central platform ให้น้อยที่สุด
- คนทำแอพเจอ data ก้อนนี้ก่อน ทำไมไม่สิ่งนี้เองล่ะ
- ให้ data engineer สร้าง tool เพื่ออำนวยความสะดวก shift บทบาทไปเป็นคนทำ tool
- เข้าในใช้งานในการทำเรื่องอื่นได้
current stage สำหรับรูปแรกนั้นเป็น pain ที่มาจากข้อมูลที่เปลี่ยนแปลง และการ handle data ให้อยู่ในมาตรฐานที่สูงได้ และมีการเอาทุกอย่างไว้ตรงกลาง
ความเชื่อ: เขาน่าจะ control และ collabration ได้ และใช้ resource น้อยลง
Centralized Data Analytics Platform (CDAP)
CDAP ปัญหาข้อจำกัด
- design apply standard เดียวกันกับทุกที่ในองค์กร
- การบริหารจัดการสูง ซับซ้อนในการออกแบบ
- ทุกคนอยากใช้พร้อมกัน จัด priority ยังไง
- resource ในการ analyse ไม่เพียงพอ
ข้อเสียของ DCAP? เท่าที่เราจดทัน
- tranform data ทุกจุดแล้ว tranform ยังไง
- control quality ของ data ไม่ได้
- ถ้า copy บ่อย หา version data ได้ยากขึ้น เพราะไม่รู้ version ของ data
คิดกระบวนการ data management - คน tech process domain ซึ่งตัว domain เป็น business อย่างหนึ่ง ขับเคลื่อนให้เกิด business model อีกทั้งอยู่หลายที่ มีอิสระ เป็นเจ้าของที่
Data strategy
- focus business model goal และ strategy
- defensive ให้อยู่ภายใต้กฏเดียวกัน และ offensive หา balance
- regulation การใช้ data เช่น PDPA
- อันที่เหมาะสมกับ domain และ core องค์กร
- data ในองค์กร มีส่วน operation ที่เอามาปรับปรุงการบริการ และ analytics ใช้ data support
- curate ให้ใช้งานได้ง่าย
- เอา regulation มา compile กับ data ด้วย
ดังนั้น จึง provide ตัว self-serve data ให้คนในองค์กรใช้งาน data ได้มากที่สุด และอิสระ เข้าถึงง่าย ใช้งานง่าย
Implementation the new Data Strategy
- เรารู้ว่ามี asset อะไร มี permission อะไรบ้าง และอย่าลืมทุกอย่างมี cost
- curate data ให้เข้าใจง่าย และเกิดประโยชน์กับองค์กร เน้น encourge ให้คนใช้ ภาระการสร้าง data ให้คนอื่นน้อยลง
Domain-Data Concept
domain = business อย่างนึง สร้าง tool/service แก้ปัญหาทางธุรกิจ ทำให้มี domain ต่างกัน (เราจะเก็บหรือใช้ data ยังไง)
microservice ลดขนาดปัญหาให้น้อยลง แก้ปัญหาตรงจุดมากขึ้น
Data Mesh Architecture
ไม่ให้คนศูนย์กลางทำทุกอย่าง ให้คนที่เกี่ยวข้องทำ
เรื่องนี้สามารถอ่านเพิ่มได้ที่
อันนี้ท้าย ๆ
- พึ่งพา central data น้อยลง
- hand-on ไปที่ app
- หาเครื่องมือหา metadata: register, discover
- สร้าง data product ให้เข้าถึงแต่ละ domain ได้
Building a Fortune Teller App with OpenAl: From Chatbot to Voice Assistant — Pathai Suwannawiwat | Solution Engineer, LINE
ทุกลมหายใจของเราเห็นคำว่า AI เข้ามาตลอด มี use case แบบ ultimate คือ AI มาอยู่ในสุขภัณฑ์ ถ่ายรูปผลการขับถ่าย ใช้ image processing วิเคราะห์ให้เรา
และใน session นี้ก็มี ultimate use case คือให้ AI ทำนายเลขจากความฝัน
จากนั้นเปิด demo ให้ดู ซึ่งอัดเป็นคลิปไว้ เหมือนเป็นหน้าเว็บเป็นน้องแมว นามว่า Satomeow มาช่วยทำนายตัวเลขจากความฝัน user ก็พูดว่าเมื่อคืนฝันอะไร แล้วเจ้าแมว Satomeow ก็พูดตอบให้
แล้วแอพนี้สร้างยังไง? หลัก ๆ เลยคือ ใช้ API จาก OpenAI Models ร่วมกับ LINE API
ปูพื้นฐานเรื่อง AI กันสักเล็กน้อย
ถ้าใครยังงง ๆ ปูพื้นกันก่อนว่า model คืออะไร? model คือโปรแกรมรับ input เพื่อทำการ generate ออกมาเป็น output ต่าง ๆ จากการเรียนรู้จากข้อมูลมหาศาล เช่น text-to-text รับ input เป็น text และ output เป็น text
ส่วน multi-model เป็นการเพิ่มความสามารถในการรับ input และ output หลาย ๆ type เช่น สามารถรับ text กับ image ได้พร้อมกันได้
OpenAI Model Group
ประเภทของ model ของ OpenAI จะมี 3 กลุ่มหลัก ๆ คือ
- Text Generation
- Image Generation
- Speech Generation
OpenAI Flagship Models
- GPT-4o, GPT-o1 และอื่น ๆ: text-to-text กับ image-to-text
- Whisper: speech-to-text
- TTS: text-to-speech
- DALL-E: text-to-image
OpenAI API
model ก็คือโปรแกรมเนอะ และตัว model จะถูก wrap ให้ติดต่อกันผ่าน OpenAI API ผ่าน HTTP protocol ปกติเลย
มาดู API แต่ละตัวกัน
Text Generation API
- Completion API: text-to-text พวก model GPT ใด ๆ เป็น stateless ไม่สามารถ maintain แชทได้ ต้องส่ง history log เข้าไป
- Assistant API: ถูก improve จาก text-to-text ให้สามารถรับข้อมูลได้หลาย type มากขึ้น และเป็น stateful ไม่ต้องส่ง history log ไป
Speech to Text API
- Audio Transcription API: แปลง audio เป็น text
Text to Speech
- Audio Speech: text-to-audio
Realtime API
- speech-to-speech เหมาะกับ realtime ใช้ model GPT-4o-realtime
Playground: เราสามารถเล่นผ่านหน้านี้ใน OpenAI ได้เลย และอย่าลืมเติมเงินก่อนใช้
LINE x OpenAI
- ถ้าเป็นแบบแชท จะแชทผ่าน LINE OA แล้วเชื่อมต่อ webhook ด้วย Firebase Cloud Function แล้วส่งไที่ AI โดยมี process คือ สามารถตอบคำถาม และส่งกลับไปได้
- ตัว demo ใช้ LIFF เพื่อ access hardware อย่างไมค์ ส่งต่อไปที่ Firebase Cloud Function เช่นเดิม ใช้ API ตัว speech-to-text และ assistance API จนได้คำตอบออกมา จบด้วย text-to-speech ทำให้ use case นี้มีความ flexibility และ complex conversation อย่างนุ่มลึก
- หรือใช้ Realtime API อยู่ข้างหลังเส้นเดียว ซึ่งมี latency ตํ่า แล้ว code อาจจะ sample ขึ้น
ทั้งสองมี benefit แตกต่างกัน อยู่ที่ use case ของเรา
สรุป
Introducing B.A.A.S.: The Al and Automation for SMEs — Pamorn Trivorrarat | LINE API Expert; Chinnawut Wongjino | Head of Engineer, BeTask
LINE OA + AI = SME มีคนใช้มากขึ้น ทำให้รายได้เพิ่มขึ้น
CRM มีมากมาย และมี data เอาไปวิเคราะห์ อุปสรรคคือในส่วนนี้ ต้องมีทักษะ และเวลาด้วย ดังนั้น B.A.A.S. จะช่วยตอบโจทย์ตรงนี้
เริ่มด้วย demo กันก่อนเลย ก็คือร้านค้าจะหาลูกค้าที่มีแนวโน้มมาใช้บริการเราได้ แล้วก็สร้าง campeign แล้วส่งถึงเขาโดยตรงเลย (demo ดูคลิปได้ อยู่ใต้บล็อก อันที่อยู่ในเพจล่ะ)
vector แปลง data object เป็น embedding ออกมาเป็นตัวเลขแบบ dimension ออกมา เช่น แมว กับ หมา ใช้ Gemini ในการทำ ได้ออกมา 768 dimension หาความใกล้เคียงกันของ object ได้ เช่น แมวกับหมาอยู่หมวด pet เหมือนกัน
Flow Overview
query database หารายชื่อลูกค้า และทำการนัดหมาย จากนั้นเตรียมข้อมูลไป embedding ได้ vector ออกมา แล้ว query vector หากลุ่มลูกค้าที่จะกลับมาใช้ แล้วทำแคมเปญยิงไปหาเขา
Inform Shop Owner
inform user ด้วยการ query ผ่าน Messaging API
Embedding to Vector
- Query All Customer: query เสร็จเตรียมไป embedding ได้ vector ไป store จนได้เป็น array object เตรียมข้อมูล ให้ embedded แม่นยำมากขึ้น ตัด string ที่ไม่จำเป็นออก เรียงเป็น text แล้วเตรียมตัวแปร metadata เป็น array string
- Vector Representation: ใช้ Gemini นอกจากจะ embedded ได้ 768 dimension แล้ว ในที่นี้ใช้ text ให้น้อยกว่า 768 ได้ ทำให้ประหยัดกว่า
- Store Vector: Pinecore มี server ให้ใช้ และหา vector ได้อย่างรวดเร็ว และสร้าง database ได้ สุดท้าย render ได้ก้อนลูกค้า
Query Vector
เอาลูกค้าเป็น key เอาไปหา แล้ว query ส่งให้ลูกค้า
การหา vector
- Euclidean distance ระยะทาง
- Cosine similarity หามุม
- Dot product คูณแล้วเอาไปบวก
topK กำหนด output และให้แสดง metadata เก็บ profile LINE เอารูปกับชื่อมาขึ้น Flex Message ส่งกลับไปให้ร้านค้า
Generate Image
ส่ง campeign ไปก็ต้องมีรูปด้วย แล้ว gen รูปยังไง?
ให้ลูกค้าพิมพ์ text campeign แล้วหยิบ text เอาไปสร้างรูปด้วย Vertex AI ภาษาไทยผลไม่ตรงเลย translate เป็นภาษาอังกฤษก่อน แล้วสร้างรูปจาก text นี้
กำหนด aspect ratio จำนวนรูป ได้รูปแล้วส่งให้ร้านค้าเลือก
Narrowcast
ส่งข้อความหาลูกค้าผ่าน Narrowcase และ track การเปิดดูได้ด้วย เริ่มที่สร้าง audience และส่ง message ไปหาเขาเลย
ก่อนจากฝากร้าน
Boosting Development Quality through Continuous Documentation Integration — Chaiyaphong Boonkhlerm | Solution Engineer, LINE
session นี้พูดถึงการเอา document มาใช้ในการพัฒนา software ให้ดีขึ้น
เราเห็นอะไรใน document นี้บ้าง? ใครเป็นคลทัมมม หาชื่อไม่เจอเป็น undefined เพราะคนนี้ออกไปแล้ว
Swagger Generator
ใช้ Go เป็นหลักเลยเลือก Swaggo
แปลง document spec และแสดงผลได้อย่างสวยงาม run command swagger ได้ yaml ไม่ต้องมานั่งจัด format เอง
code → Swaggo → yaml → dev → ทีมอื่น อาจจะไม่สะดวกกับเขา ในความจริงมีหลาย server และ repo ด้วยกัน แล้วจะมีสักที่ไหม ที่มาแสดง API ทุกอันในที่เดียว
Docusaurus มาแก้ปัญหา เขียน website ง่าย ใช้ markdown ที่หลายคนถนัดกันอยู่แล้ว ซึ่งเหมาะสมกับการเขียน document และ support React ในการเขียน component เพิ่มเติมได้ เพราะบางอย่างมันก็เขียน markdown ไม่ได้ อันนี้จะทำได้ตามใจต้องการได้ล่ะ
เอา Redocly มา integrate เป็น Swagger อีก 1 อัน เอา yaml ไปใส่ ทำให้อ่านง่ายขึ้น
Integrate with CI/CD
- เปิด PR มี change Swagger yaml
- ถ้าถูก marge trigger, build code, deploy sever
- document pipeline หยิบ Swagger เป็นเว็บ
- app นึงมีหลาย repo ทำหน้าที่ trigger ตาม API ล่าสุดที่มี
เอามาเก็บ database spec เก็บ index และ query ใด ๆ ช่วยสื่อสารภายในทีมได้
เก็ย Kafka spec ด้วย ดู payload ว่าหน้าตาเป็นไง มาสื่อสารในทีม
support Mermaid เป็น diagram อย่างง่าย โค้ดเป็นภาษาคน อะไรชี้ไปไหน และ support diagram ที่หลากหลาย
draw.io มีหลายเคสที่มี diagram ซับซ้อน หรือมี document ซับซ้อน ให้เข้าใจระบบได้
แล้วช่วยอะไรบ้าง?
- เปิด PR ช่วย review กันได้ อย่าง draw.io เป็น svg ช่วยดูความแตกต่างได้
- API Change แก้ API เปิด PR แก้ Swagger หรือ spec ก่อน เพื่อได้ review หรือตกลงกันก่อนว่าเราจะไปกันท่านี้ไหม แล้วค่อยเริ่มทำตัว code
มี use case คือ markdown ไม่ตอบโจทย์ ใช้ feature React component มาช่วย เช่น มี cron job เยอะ เกิดปัญหาในการค้นหา เช่น ตีสองมีอันไหนที่ run cron job ไหม ซึ่งเดิมไปเปิด code หรือ server ดูเลย จะดีกว่าไหมถ้าเพิ่มหน้า list ของ cron job ขึ้นมาดูได้ และเพิ่ม step ในการ build document นี้โดยเอาจาก repo ต่าง ๆ มาเป็น content ที่หน้านี้ เป็น automate ขึ้นมา
key takeaway
- ทำ document ใน code
- PR แล้ว review ว่าแก้อะไร ทำให้ review ง่ายขึ้น
- ใช้ document ในการสื่อสารกับทีมเยอะ ๆ เกิดการ discuss ให้มีคนรู้เยอะขึ้น และเก็บอยู่ใน git ย้อนกลับมาดูได้
สุดท้าย speaker กล่าวว่า ขอให้ทุกคนสนุกกับการทำ document 😅
Safeguarding LLM from Harmful Content using Guardrails —Chanintorn Asavavichairoj | Lead Technical Specialist, SCB TechX
เป็นอีกหนึ่ง session ที่อยากฟัง เพราะว่าเคยได้ยิน Safeguarding มาคร่าว ๆ ล่ะ ว่ามีไว้เพื่อไม่ให้ตอบสุ่มเสี่ยง
History
- Simsimi เมื่อนานมาแล้ว เป็น keyword mapping ตอบได้ไม่ค่อยดีเท่าของเดี๋ยวนี้
- Intent ที่ลูกค้าตอบกลับมาเป็นประเภทไหน เช่น DialogFlow
- ยุคนี้เป็น Generative AI เนอะ ต่อกับ server เพื่อไปยัง foundation model ครอบคลุมทุกอย่าง
ตัว model จะอยู่ภายใต้ RAG ซึ่งมีความฉลาด และมีความคิดความอ่านมากขึ้น
foundation model เทรนข้อมูลจากทั่วโลก
Responsible AI แต่ละเจ้ามี principal ให้ความสำคัญกับ privacy & security และ control
เราต้องใช้งานอย่างรับผิดชอบ เพราะมันอาจจะมีเรื่องต่าง ๆ ที่เกิดขึ้นได้ อย่างความน่าเชื่อถือของ bot
guardrail rail คือรางรถไฟ ตอบให้อยู่ในรูปในรอย guard ในที่นี้ก็เหมือนราวบันได ไม่ให้คนตกบันได เช่น component สำคัญที่ต้องเอาไป adapt ใช้ในการ build chatbot แล้วคอยมา validate
prompt injection: prompt ที่ดีต้องมี persona (กำหนด role ให้ bot), context, task, output และมี injection ในที่นี้คือไม่ให้ตอบหุ้นหรือคริปโต
ถ้า handle ไม่ดี มันจะคาย system prompt ออกมา
เช่น dealder charolet ใส่ ChatGPT เข้าไปในเว็บ และมีคนถามอะไรที่ไม่ควรถาม เช่น ถามเกี่ยวกับ python หรือคู่แข่งอย่าง Tesla บอทควรที่จะไม่ตอบคำถามเหล่านี้
model ถูก fine tune มาให้แล้ว ไม่ควรตอบ toxic ต่าง ๆ เช่น hate speech ซึ่ง content collabration เป็นสิ่งสำคัญ แยกของจริงของปลอม
Purple Llama
ใน session กล่าวถึง 2 ตัว คือ prompt guard, llama guard ใช้ python
Prompt Guard
- jailbreak score: กัน context ที่ไม่เหมาะสม
- indirect score: สอดไส้อะไรมา
ทั้งสองให้ใช้ควบคู่กันว่าเป็นภัยต่อระบบไหม
Llame Guard
llama เป็นตำรวจ ดู context ของ user ว่าถามอะไร และ classify category ได้
ถ้าเราใช้ OpenAI หรือ Gemini สามารถ setting พวก safety ต่าง ๆ ได้นะ
Safeguarding Output
- Hallucination หรือ AI หลอน
- Relevancy ตอบไม่ตรงคำถาม อย่างถามเรื่องใครคิดเรื่องสินสอด ตอบเรื่องหูกระจง ซึ่งมี solution ในการวัด เช่น ถามเรื่องหมูเด้ง ควรที่จะตอบถึงน้องมะมะมะมะหมูเด้ง ไม่ใช่หมูเด้งที่เป็นอาหาร
ในส่วนของ Solution
Grounded AI: เอามาแก้เรื่อง AI หลอน รองรับภาษาอังกฤษ สามารถใช้ Phi3 model กับ LoRA adapter
Haystack Evaluators: มี Ragas Evaluator, provide input และบอกคำตอบ model รองรับภาษาไทย ใช้ model ของ OpenAI และ Gemini ได้
Framework
- NVIDIA Nemo Guardrails กันไว้ทุกขา ดูว่า valid จุดไหน ใส่เป็น prompt ไว้ เขียน flow และ conversation base ได้
- ตัว Guardrails AI ทาง SCB10X ลงทุนอยู่ มี hub ให้เราเลือกใช้หลากหลาย เอา template เขียน AI เองได้
guardrails-ai- AWS Bedrock Safeguard ภาษาไทยยังไม่รองรับ
ก่อนจากกัน มี technical bonus มาฝาก คือ ลด traffic ในการเรียก model, follow OWASP และ Response AI Principle
Enhancing Productivity in Large-Scale Microservices Project —Chanwit Piromplad | Solution Engineer, LINE
เป็น developer ไฟแรงมาทำงานวันแรก หวังจะได้แสดงฝีมือในการเดฟ แต่เราพัฒนา day1 ไม่ได้ เพราะต้อง setup คอมก่อนเน้อ
การ setup คอมนั้น frontend ง่ายกว่า backend ที่ซับซ้อนกว่า เพราะมีของที่ต้องใช้เยอะกว่า (แล้วถ้าคน fullstack ล่ะ น่าจะนานเหมือนกันใช่ไหมนะ 🤔)
Large-Scale Project & Challenge
Large-Scale Project คือโปรเจกต์ที่มีขนาดใหญ่ เกิดมานาน ยังไปต่อได้
มี developer หลายทีมดูแล มี best practice และ tech stack ที่ต่างกัน เช่นมีทั้งสิ้น 20 domain++ และ 200 services++
Challenge
- มีข้อจำกัดด้าน resource สำหรับ local
- config หลาย stage อันประกอบด้วย alpha, beta, staging
- microservice หนีไม่พ้นเรื่องของ dependency
- แก้แต่ละครั้ง ทำ hotfix ได้ช้า
Solution & Strategies
- Lean local development: รันในสิ่งที่ต้องการจะรันให้ง่าย จบใน 1 command
- Automated environment setup: มี tool ช่วย generate env file
- Port-forwarding dependency services: service ต่าง ๆ ทำผ่าน port-forwarding
- Pipeline optimization for selective builds: optimise pipeline ให้ทำในสิ่งที่จำเป็นต้อง build
Lean local development: ใส่ใน docker-compose ให้ใช้งานได้ง่ายขึ้น ดูด secret key ได้ที่เครื่อง เป็น env file ในเครื่องแล้ว start docker compose ทำให้ start ขึ้นมาได้ทันที
Automated environment setup: tool ช่วยจัดการ secret หรือ credential Kubernetes และอื่น ๆ ดึง secret env จาก cloud และแปลง shell script แล้วมาขึ้นเป็นไฟล์
Port-forwarding dependency services: ไปไหนก็ได้เหมือนผ่านมิติของ Dr.Strange ไม่เปลือง effort มาก ซึ่ง tool ที่มียังไม่ตอบโจทย์ จึงใช้ Cobra CLI มาครอบอีกที ถาม AI เลยเสร็จได้ในวันเดียว service ตายก็ให้มัน restart ได้
Pipeline optimization for selective builds: LINE OA บวกกับหลาย service เลย build ช้า เลย build แค่บาง service จาก 41 นาที เพราะทำ unit test ด้วยเหลือ 1 นาทีกว่า ๆ ในการใช้เพื่อ test ไม่ใช่การแก้ issue
key takeaway
speaker บอกว่า ถ้าทำ tool เสร็จแล้วจะปล่อย public ให้ใช้นะ
ส่องได้ที่นี่เลย
Elevate payment experience by Automate Slip Verification Process through LINE — Thananut Santatiyanon | LINE Certified Coach for API; Supakrit Paoliwat | CTO, SlipOK
หลังจากที่เราได้ฟัง session ที่มีสาระกันหนัก ๆ ไปแล้ว จริง ๆ session นี้ก็มีสาระเข้าใจง่ายนะ
เปิดมาด้วยภาพนี้ ในสลิป 4 อันนี้ มีเพียงหนึ่งเดียวที่เป็นสลิปจริง
ทุก 1000 สลิป มีของปลอม 5 สลิป และมูลค่าที่เสียหายจากสลิปปลอมในปี 2023 ที่ผ่านมาอยู่ที่ 80 ล้านบาท! เป็น pain point ของ user และสร้าง product เพื่อลด pain ตรงนี้ลง
แล้วเราจะตรวจสอบสลิปได้อย่างไร? ตัว SlipOK เป็น solution ที่ช่วยเพื่อน ๆ ในการตรวจสลิป โดยการเพิ่มเพื่อน และส่งรูป หรือจะลากเข้า group chat ก็ได้
Slip Verification Mechanic in Line
สลิปที่ทาง SlipOK รองรับ ก็จะมี 2 อย่าง คือ
- จากธนาคารต่าง ๆ อ่านสลิปจาก QR Code ผ่านระบบ ITMX Standard API เพื่อใช้ตรวจสอบความถูกต้องสลิปโอนเงิน
- ของ TrueMoney ที่ตอนนี้ยังไม่มี QR Code ก่อนอื่น OCR จากรูปก่อน แล้วเรียกใช้ API ในการตรวจสลิป
แล้วผลทั้งหมดที่ได้ ปั้นเป็น Flex Message แล้วส่งออกมา (แต่ถ่ายตอนหลังไม่ทัน)
User journey on LINE
การเอา LIFF มาใช้ ทำให้ UX ไม่เสีย user ไม่ต้องออกแอพแล้วไปเปิด web และไม่ต้องไป login ใหม่ด้วย อีกทั้งมี share target picker ให้แอดมินใช้ระบบร้านของเรา
และแน่นอน ใช้ loading animation เพื่อไม่ต้องให้ user รู้สึกว่ารอนาน ๆ มันอาจจะบั่นทอนหัวใจ บอทตุยเย่หรือยัง ทำไมยังไม่ตอบเราเลย
output ที่เป็น Flex Message นั้นมี 5 แบบที่สื่อสารกับ user ด้วยกัน
- สีเขียว: success
- สีเหลือง: warning อาจจะได้รับ response ช้ากว่าปกติ อาจจะให้เขาลองส่งใหม่ดู
- สีแดง: take action ทันที จะมีโอนผิด ส่ง slip ซํ้า และสลิปปลอม
LINE OA มี SlipOKWebhook เอาไป connect ได้ ส่งในนาม OA นั้น ๆ
use case: webhook ผูก OA ได้อันเดียว จึงมี gateway 1:1 ส่งต่อไปอันอื่น หรือใช้ partner webhook อย่าง Oho หรือ Chatcone ก็ได้
มี API ให้เอาไปใช้งานได้ ส่งเป็นรูป หรือ url ของรูป แล้ว return เป็น json ออกมา
และมี plug-in กับ website ด้วย
Real or Fake?
แล้วสลิปทั้ง 4 อันไหนจริง อันไหนเค้ก? เฉลย อันที่ไม่จริงเป็นสลิปจริงที่ผ่านการตัดแต่งมาแล้ว
แล้วอันของจริงก็โอนจริง และมีการโอนคืนมาแล้วนะ แต่มีแถมด้วยแหะ 🤔
สรุปสุดท้าย UX เป็น key สำคัญ ทำ product ยังไงให้ทุกคนรัก โจ่บบ
สุดท้ายขายของ แต่ทางนี้แอดแล้วเรียบร้อย เผื่อจะได้ลองใช้ดู
และช่วยเขาฝากร้านอีกหนึ่งรอบ
Decoupling Ul components for better reusability and test with Storybook — Sivakorn Pranomsri | Solution Engineer, LINE
ทำให้หน้าเว็ย interact และสวยงามได้ เป็นเรื่องยาก
จึงมี UI Framework ให้เราได้ใช้งาน สร้าง component ตามต้องการ แล้วก็ test
แล้วในหน้า web เราต้องเขียนอะไรบ้าง? กดปุ่มแล้วต้องทำอะไรสักอย่าง เชื่อมต่อกับ API เชื่อมต่อกับข้อมูล
พอมีการยัดของ และมี requirement ที่โตขึ้นแน่นอนว่าโค้ดบวมล่ะ มีปุ่มใหม่มาก็ reuse ไฟล์เดิมยัดเข้าไป ถ้าวันนึงปุ่มนี้กดแล้วแสดงข้อมูลขึ้นมาล่ะ กลายเป็น spaghetti code
Component segmentation for reusability
component ที่ทำให้ reuse ได้ง่าย
เช่น ในที่นี้มี 3 กลุ่มก่อน ก้อนแรกเป็นปุ่ม label icon มีรูปแบบ component ซํ้ากัน การใช้งานซํ้า ๆ คือแสดงผลลัพธ์ ก้อนต่อมาเป็นปุ่มบวกลบ และอีกก้อนเป็น silder
ความจริงแล้วมีมากกว่านั้น
ดังนั้นให้ focus แค่ render ตัดพวกเรียก API และเกี่ยวกับ data ออก เพราะมันจะเพิ่ม dependency ของ component นั้น
container คอยดู event แล้วไป handle ต่อ และมีคนตรงกลางถือ data
Problems we encounter when implementing a new component
test & review ตอบโจทย์ developer แต่ไม่ตอบโจทย์การ test
- ทำ unit test ในแต่ละ component อย่าง snapshot, action, fetch data
- automation test เช่นทำ test scenario
QA ถามว่าเมื่อไหร่จะได้ test แต่ไม่ได้ test สักทีเพราะไม่ได้ merge มา และ dev ก็ทำไม่ทันด้วย แล้ว file changed ขนาดนี้ใครจะรีวิวไหว
The solution that we test a new component by storybook
solution ใช้ storybook เป็น visual test story file ซึ่งสามารถ test ก่อนใช้งานได้
อย่าง catalog สินค้า เราเห็นสินค้าก็อยากทดลอง ก็ไปลองที่ showroom ตัว storybook ก็เช่นกัน (เห็นสไลด์ก็แอบมีเสียงเปเป้ครับเปเป้เหมือนกันแหะ)
ส่วนประกอบหลัก
- Github Actions: flow การใช้งาน พวก pipeline ต่าง ๆ
- Github Pages: static content
- Storybook: ทำ animation ซึ่งตอน review กดดู storybook ได้เลย dev ไม่ต้องสลับ branch มาทำ code review ส่วน QA ก็มีของให้เล่นล่ะ
key takeaway ตอนจบ
Secure your LINE Chatbot with DevSecOps — Jirayut Nimsaeng | CEO, Opsta (Google Developer Expert)
session สุดท้ายของวัน กับเจ้าพ่อ DevSecOps อย่างคุณเดียร์
กับการทำ LINE OA ของบริษัท เช่นข้อมูลเกี่ยวกับบริษัท แล้ว LINE chatbot ที่เราเขียนนั้น ทำงานได้ตามปกติก็จริง แล้วมัน secure จริงไหม และมีช่องโหว่หรือเปล่า
ซึ่งทั้งหมดอยู่บน Github และใช้ Github Action ในการทำ pipeline ด้วย ทุกอย่างใช้ของฟรีหมด
What's DevSecOps?
DevOps flow + component: เรามี workflow ครบแล้วหรือยัง อย่าง VCS หรือ version control, CI/CD, artifacts ไว้เก็บ database, modern infrastructure อย่าง cloud kubernetes, มีระบบ automation & infrastructure as code, support tool อย่าง load testing และ monitoring
ปัญหาคือ security โผล่มาวันท้าย แล้วบอกว่าโค้ดเรามีช่องโหว่ เอาขึ้นไม่ได้ เลยต้อง one night miracle เพื่อเอางานขึ้นในวันที่กำหนดไว้ให้ได้ ทำให้ส่วน ops ช้าเหมือนเดิม
security shift left ให้มาเป็นส่วนหนึ่งใน DevOps เลยกลายเป็น DevSecOps แล้ว sec ทำตรงกลางใช่ไหม ไม่ เขาทำ automation security ซึ่งอยู่ทุกขั้นตอน ทุก step ใน DevOps
Cloud Native Security
ยึดตาม compilement หรือ standard นี้ในการทำ
เอา Cloud Native Technology มาใส่ใน flow
แล้วเราใช้ standard อะไร ให้เอา CNAPPs มายันกับทีม security
Live Demo
เริ่มจากใส่ security ใน 3 จุดที่เล่าไป pre-deploy, deploying, post-deploy อันนี้มีการยิง web ทำ report
- Scanning: pre-deploy มี scan ในจุดไหนบ้าง
- Configuration: deploying มีความปลอดภัยจริงแล้วหรือยัง
- Runtime: post-deploy ทำ continuous scam ไม่ให้โดนเจาะ ซึ่ง scan ตลอดเวลา และมี alert แจ้งเตือน
บางส่วนที่เขา demo ไปเราอัดเป็นคลิปไว้ คร่าว ๆ มีเรื่อง token ที่ไม่ควรใส่ตรง ๆ กับเรื่อง Sonarqube เตือนเรื่องโค้ด แต่มันเป็น fault positive ก็กดผ่านไป
ตัว Github ที่ demo ดูได้ที่นี่เลย
opstaKey Takeaway
- หลีกเลี่ยงการใส่ secret key ใน public Github repo และระวังเรื่องช่องโหว่ของ library
- ครั้งแรกนั้นยากและนานเสมอ
- ทำเถอะคุ้มค่าการลงทุนแน่นอน
- และสามารถเพิ่มค่าตัวของเราได้ ว่าเราสามารถคุยกับ security รู้เรื่องนะ
- สุดท้าย เริ่มต้นวันนี้
จากนั้นก็จบ session สุดท้ายอย่างเป็นทางการ มีฝากร้านเล็กน้อย ตัวสไลด์จะมาเร็ว ๆ นี้ ส่วนย้อนหลังมีตามมาอีกที
แล้วก็ scan QR Code ตอบคำถาม session สุดท้ายเราได้มาทั้งหมด 32/40 คะแนน และแล้วถึงเวลาแลกเสื้อ คิวยาวมาก แต่ flow ไวรอไม่นาน จะมีจังหวะนึงที่อีกแถวที่ขนานกับเราเขามาจากไหนกันนะแบบงง ๆ 555
จากนั้นก็ไปงานฝั่งตรงข้ามมานิดหน่อย แล้วซื้อขนมกลับบ้านแค่นั้น
ส่วนอันนี้เป็นบรรยากาศงานคร่าว ๆ ทั้งหมดก็จะประมาณนี้
.
และสไลด์ทุก session ก็อยู่ในนี้แหละ
ติดตามข่าวสารตามช่องทางต่าง ๆ และทุกช่องทางโดเนทกันไว้ที่นี่เลย แนะนำให้ใช้ tipme เน้อ ผ่าน promptpay ได้เต็มไม่หักจ้า
ติดตามข่าวสารแบบไว ๆ มาที่ Twitter เลย บางอย่างไม่มีในบล็อก และหน้าเพจนะ
สวัสดีจ้า ฝากเนื้อฝากตัวกับชาวทวิตเตอร์ด้วยน้าา
— Minseo | Stocker DAO (@mikkipastel) August 24, 2020
