ทำ facebook chatbot ด้วย firebase ในงาน Firebase AppFest Bangkok

สวัสดีทุกท่าน หลังจากที่เราลองเล่น firebase งูๆปลาๆมาพักใหญ่

ในไทยเรานั้นก็ได้มีงาน Firebase AppFest Bangkok งาน hackathon ที่ใช้ firebase เน้น cloud function ในการทำของใหม่ๆกัน ตอนแรกเขารับ 20 ทีมก่อน จากนั้นรับได้อีก 5 ทีม และประกาสผลวันศุกร์ก่อนวันงาน 1 วัน และทีมเราก็เป็น 1 ใน 5 ทีมที่ได้รับเลือกรอบหลังจ้าาา

งานจัดขึ้นวันที่ 30 กันยายน ถึง 1 ตุลาคม ที่ AIS DC หรือ TCDC เก่านั่นแหละ ณ ชั้น 5 ของ emporium ซึ่งเราเคยไปในงานยุพินเมื่อปีก่อนแหละ คุ้นชินในการเดินทางมาก 555

ทุกคนที่ได้เข้าร่วมงาน จะได้ของแน่ๆ คือ
Firebase Hotsauce (ซอสอะไรสักอย่างเผ็ดๆแน่นอน)
Android Collectible (น้องป๋องด๋อย)
Firebase AppFest Tshirt (เย้ ได้เสื้อใส่มาทำงานฟรีอีกแล้วววว)
และสติกเกอร์ Firebase ซึ่งแอบเห็นในเพจ Firebase Thailand มาบ้างแล้ววว



และในงานนี้จะได้พบเทพจาก Firebase ด้วยหล่ะ Import มาจากต่างแดน เลือกมาที่นี่โดยเฉพาะเลย

ทำไมเราถึงมางานนี้ ตอนแรกลังเลว่าเราจะไหวเปล่าว่ะ เพราะเราเป็น Android Developer และยังไม่เคยใช้ cloud function มาก่อนด้วย เราคิดที่จะทำ chatbot บน facebook messager ตอนแรกเลยลังเล พอทางงานเปิดรอบสองที่รับเพิ่ม 5 ทีม เลยสมัครดู ปรากฏว่าได้เข้าร่วมงานจ้าาา ชื่ออยู่สุดท้ายเลย 555

ทำไมเลือกทำเจ้า chatbot เพราะว่าเป็นสิ่งนึงที่อยากทำเองมานาน และมีการผัดผ่อนมานานแล้วด้วย คิดว่าน่าจะทำเสร็จได้ไวประมาณนึงงี้

ในบล็อกนี้เราจะบรรยายถึงการแฮกเป็นหลัก 

ส่วนเรื่องของกิจกรรมในช่วง pitching เรากับเพื่อนไม่ได้อยู่ด้วย เพราะต่างคนต่างมีธุระส่วนตัว เลยกลับมาก่อนค่ะ แหะๆ

และในงานมีช่างภาพมาเก็บรูปบรรยายกาศด้วย และกะว่าจะเขียนเรื่อง chatbot ด้วย cloud function ใน firebase บน facebook mesaager ด้วย อาจจะใช้เวลานานหน่อยแหละ อารมณ์งานจบ คนไม่จบ นั่นแหละ

งั้นมาเริ่มกันเลยดีกว่าเนอะ :)

--------------- --------------- --------------- --------------- --------------- --------------- ---------------

งานเริ่มลงทะเบียนสี่โมงเย็น ผู้คนเริ่มทยอยมากันแล้ว เจอพี่พอร์ชกับพี่ออน AIS the StartUp ตอนลงทะเบียนเลย ซึ่งมีเรื่องที่คาดไม่ถึง คือ เรื่องชื่อทีมของเรา "น้องหมีตัวแตก" เป็นที่น่าสนใจของคนจัดงานมาก 555 พี่ออนยังบอกว่าชื่อทีมน่ารักเลย

เรามากับเพื่อนอีกคน ได้เสื้อใส่ในงาน ซอสเผ็ด สติ๊กเกอร์ Firebase 3 แบบ แล้วก็ป้ายชื่อ

หิวหรอ พิซซ่าไหม มีคนเปิดซอส Firebase ด้วย แต่ยังไม่ได้ลองกับซอสนะ

เวลาห้าโมงกว่าๆ ได้เวลาเปิดงาน โดยพี่โอ๋ วิทยา ผู้ประสานงานในกิจกรรมครั้งนี้ค่ะ

มีทีมมาสมัครประมาณ 30 กว่าทีม คัดมาร่วมงานทั้งหมด 25 ทีม ปีที่แล้วก็มีจัดงาน Firebase Hackathon ด้วยนะ มีทีมที่เข้าร่วม 20 กว่าทีม เนื่องจากโมเดลงานนี้ตอบโจทย์ในการนำ Firebase มาประยุกต์ใช้ ดังนั้นประเทศอื่นๆก็เริ่มนำโมเดลนี้ไปจัดด้วย และงาน Firebase Appfest นี้ เป็นครั้งแรกใน SEA ด้วยนะจ๊ะ ในงานมี workshop พบปะเมนเทอร์ และมีการ pitching กับกรรมการให้เลือก 6+1 ทีมสุดท้าย

จากนั้นพี่ออนแห่ง AIS the StartUp มากล่าวเกี่ยวกับงานนี้สั้นๆค่ะ ตอนที่มีคนติดต่อมา พี่ออนก็ยังงงๆว่า Firebase คืออะไร Appfest คืออะไร พอรู้คร่าวๆว่างานนี้เป็นงานแฮกกาธอน จริงๆพี่ออนอยากตอบตกลงเลย แต่ต้องไปดูความเป็นไปได้ในเรื่องการจัดงานเรื่องสถานที่ ทีมงานก่อน แล้วค่อยตอบตกลง

และแล้วก็ได้เวลาพบกับ special guess ของงานนี้ ท่านแรก คุณ Mike McDonald ค่ะ เป็นการ Overview Firebase ว่ามีอะไรบ้าง

อันนี้คือภาพรวมทั้งหมดว่า Firebase มีบริการอะไรบ้าง

คุณพี่ไมค์แกจะถามตลอดว่ามีใครใช้โน้นนี่บ้าง ซึ่งสร้างความมีส่วนร่วมให้คนฟังประมาณนึง

อันนี้สะดุดตามาก มี Firebase + Fabric ด้วยแหะ น่าจะเกี่ยวกับพวก lifecycle มั้ง

(google it for this news: https://techcrunch.com/2017/05/17/google-firebase-gets-fabric-integration-better-analytics-and-an-alpha-program/)

จากนั้นแกจะเล่า Firebase ที่ทำ backend ได้

- Realtime Database เชื่อมต่อระหว่าง device กับ server และระหว่าง device ด้วยกันเอง

- Authentication สามารถ log-in ด้วย social network account และเบอร์โทรศัพท์ได้ด้วย จะคล้ายๆ Line หน่อยๆ

- Cloud Function ที่เราจะทำกันในงานนี้

- Hosting ตอนนี้รองรับ dynamic content โดยใช้ cloud function 

(เราว่าว่างๆจะลองทำดูงี้ สำหรับบล็อก)

- Cloud Storage รองรับหลายๆ bucket และ region selection

และตัวอื่นๆที่ไม่เกี่ยวกับ backend โดยตรง มีอะไรบ้าง

- Crash Reporting ตอนนี้จับมือกับ crashlytics แล้วนะ ซึ่งน่าจะขยายความ Firebase + Fabric

- Test lab มีแบบเราเขียน test เองแล้วให้มันทำตาม กับแบบ bot ซึ่งตอนนี้น่าจะฉลาดขึ้น

- Performance อันนี้ไม่แน่ใจว่าใช่ analytics ไหมนะ

- Google Analytics for firebase อันนี้แหล่มมากๆ แหล่มยังไง สามารถ tracking ไปยังพฤติกรรมของ user ได้ โดยไปตรงแท็บ streamview สามารถดูได้ว่ามี user ใช้แอปเรา ณ ขณะนี้กี่คน ใช้มือถือ Android OS อะไร อยู่ไหน ซึ่งเป็นการทำงานร่วมกันของ Analytics และ BigQuery นะ และมี debugView ด้วยนะ

ความแหล่มที่แท้ทรู คือ สามารถเห็นว่า user 1 คน มี session อะไรบ้างในแอปเรา

- Cloud Messaging ตอนนี้มี target properties และ token authen เพิ่มเข้ามา

- Remote Config ตัวนี้ใช้ทำ A/B test ซึ่งถูก integrate กับ analytics ด้วย

- Dynamic Link มันก็คือ deep link ของ firebase นั่นแหละ

- Invite อันนี้ตัวใหม่เลย หลักการคือเชิญคนมาใช้แอปเรานั่นแหละ สามารถส่งผ่าน sms, email และ dynamic link ได้

- Adwords

- App Indexing อันนี้จะเกี่ยวกับ Google Search โดยตรงเลย

- Admob

อันที่พิเศษสุด คือ Firebase + Fastlane ตัว fastlane ใช้ในการ deploy ลง play store (และใช้ในการ deploy บน beta ของ fabric ด้วย)

สุดท้าย ของฝากจากเทพ Firebase

คอร์สเรียนฟรีออนไลน์ Firebase จากทวยเทพทั้งหลาย ใน udacity ชื่อว่า Firebase in a Weekend

นอกจากคุณพี่ไมค์แนะนำแล้ว เราก็ขอแนะนำอีกแรง เพราะคอร์สนี้เป็นคอร์สใหม่สุดใน udacity ที่สอน firebase และตัวโค้ดก็ไม่เก่าด้วย ใช้เวลาสองวันในการเรียน ซึ่งเราก็ได้ดูไปคร่าวๆบ้างแล้ว

และ alpha program

และ special guess อีกท่าน คือคุณ Doug Stevenson มา demo ให้เราดู ในส่วนของ cloud function

พี่โอ๋บอกว่าระหว่างฟังก็นั่งทำ workshop ไปด้วยได้ ปรากฏว่าเราทำไปด้วย ติดอะไรด้วย เลยฟังมาไม่หมด โชคดีที่เพื่อนร่วมทีมได้ถ่ายรูปมา

คุณ Doug เขายกตัวอย่างในการใช้ cloud function เช่น เปลี่ยนขนาดรูปหลังจาก upload ซึ่งใช้ Stroage ด้วย

โค้ดส่วนแรกจะหลังจากเรา firebase init function แล้ว จากนั้นจะเริ่มสร้าง service กัน

จากนั้นก็ firebase deploy ให้ดูกันสดๆเลย

เมื่อ deploy ผ่านแล้ว ก็มาในส่วนของการเชื่อมต่อกับ database โดย require stroage เพิ่มไป และสร้าง service ใหม่

คุณพี่ Doug ก็ลองใส่ข้อมูลบน realtime database สดๆเลย ทั้งใน firebase console และบน terminal

ปิดท้ายด้วย code ตัวอย่างใน github สามารถไปศึกษากันได้ ตัวอย่างเยอะมาก

หลังจากได้รับพลังจาก special guess กันไปแล้ว ก็พูดคุยกันในทีม ไม่สิกับเพื่อน เรามากันสองคนนี่เนอะ 555 ว่าต้องทำอะไรในงานนี้บ้าง จนถึงเวลาที่จะได้พบกับเมนเทอร์ เพื่อพูดคุยปรึกษาว่าทำอะไรบ้าง

ภาพจากเพจ AIS the StartUp ค่ะ
https://www.facebook.com/AISTheStartup/posts/1656692421071936

เมนเทอร์ของทีมน้องหมีตัวแตกมี 3 ท่าน คือ คุณพี่ Naki พี่เอก และพี่ปันเจ ค่ะ

ตอนนั้นมีการพูดภาษาอังกฤษบ้าง ซึ่งคุณ Naki เองก็ใจดีนะ ไม่ได้เหมือนบางคนที่เราพูดไม่เป๊ะแล้วเหยียดๆอ่ะ (เช่น ลูกค้าของบริษัทเก่า) แอบดีใจที่ทุกคนจำเราได้ 555 ทุกท่านก็พยายามช่วยว่าควรเพิ่มตรงไหนบ้าง และมีบล็อกนึงที่แนะนำก็คือ บล็อกจาก droidsans นั่นเอง ซึ่งในบล็อกนี้จะพูดอย่างละเอียด ว่าเอาไปใช้แล้วเจออะไรบ้าง

ดังนั้นเนื้อหาต่อไปนี้ พูดเรื่อง มือใหม่หัดทำ chatbot บน facebook messager ด้วย firebase cloud function โดยอ้างอิงจาก medium นั้นว่าต้องทำอย่างไรบ้าง

ก่อนอื่นเลย ลง node.js ในเครื่องของเราก่อนนะ

และลง firebase sdk ผ่าน cmd หรือ terminal ตามแต่ OS ของท่าน ด้วยคำสั่ง

npm install -g firebase-tools

เมื่อลงทุกอย่างเรียบร้อยแล้วก็ไปสร้างโปรเจกใน firebase

พร้อมทั้งโฟลเดอร์ที่เก็บโค้ดบนเครื่องของเรา

จากนั้น log-in firebase ผ่านด้วยคำสั่ง

firebase login

และเข้าไปที่โฟลเดอร์ของโปรเจกเรา พิมพ์คำสั่ง

firebase init

เลือกโปรเจก และประเภท มี hosting/cloud function/realtime database

ในที่นี้เลือก cloud function เนอะ

จากนั้นจะได้ไส้ในสวยๆที่ใช้สำหรับการทำ cloud function โดยเฉพาะ แบบนี้

ก่อนที่จะลงโค้ดกัน ไปสร้างแอปใน Facebook Developer ก่อนนะ

ตั้งชื่อให้เรียบร้อย จากนั้นเลือก Messenger เพราะเราทำ chatbot เนอะ

จากนั้นจะได้พบกับหน้าตาแบบนี้ สิ่งที่ทำตอนแรก คือ Webhooks ดังนั้นเราจะมาสร้าง Webhooks กัน 

Webhooks คืออะไร ตอนแรกเราก็ไม่เข้าใจนะว่าคืออะไร เล่าเป็นภาษาชาวบ้าน คือ url ที่เราจะ ticker ในการรับส่ง response ระหว่างตัวแอป และฝั่ง server

การสร้าง Webhooks บน cloud function บน Firebase งั้นง่ายมาก ไปที่ไฟล์ index.js ลอง uncomment ในบรรทัดที่ export แล้วลอง deploy ดู

เมื่อเรากลับไปดูที่ console เราก็เห็น service 1 ตัว ที่เป็นตัว function นั่นแหละค่ะ Webhooks
ส่วน url ลอกตรง Function URL ไป

จากนั้นใส่โค้ไปเพิ่ม ซึ่งเอามาจาก reference แบบนี้



กลับมาที่แอปแชทบอทเราบน Facebook กด Setup Webhooks จ้า
ใส่ url ที่ได้จาก Function URL ลงไป และใส่ชื่อ token ลงไป
และติ๊ก message, messaging_postback, messaging_optins และ message_deliveries

เมื่อเรียบร้อยแล้ว เลือกเพจจ้าาา เราก็เลือกเพจน้องหมีตัวแตกไป

จากนั้นระบบจะสับตะไคร้ให้เรา ว่า chatbot ของเราใช้กับเพจน้องหมีตัวแตกนะ

เลื่อนบนไปนิดนึง Token Generation เลือกเพจของเรา และก็อป Page Access Token ที่ได้ ไปแปะในโค้ดเรา

จากนั้นลอง deploy อีกรอบ สังเกตที่ตัว logs ถ้าพังจะเห็นชัดเจนเลยว่าตรงไหน

แต่มีอีกจุดนึง Billing account not configured เราจะต้องผูกบัตรก่อนนะ เพราะ Facebook App ถือว่าเราเชื่อมต่อกับ API ภายนอก ดังนั้นบอทเราจึงเล่นไม่ได้ ภารกิจในวันแรกของเราก็จบลงแบบนี้

อย่าลืมใส่หน้านี้ให้ครบนะ ไม่งั้นแอดมินเทสบอทไม่ได้

วันที่สองทีมเราติดต่อทีมงานเพื่อขอเครดิตมาใช้ในงานนี้

เราได้อัพเกรดโปรเจกแบบเสียเงิน(ชั่วคราว)โดยคุณไมค์

ทีนี้ลอง deploy แล้วเข้ามาทักน้องหมี ปรากฏว่า ทำงานได้แล้วจ้าาา

จากนั้นก็แก้โค้ด เพิ่มโน้นนี่ พยายามต่อกับ realtime database แต่ไม่ทัน แต่พอเล่นได้ประมาณนึง

จนถึงเวลาที่ข้าพเจ้ามือสั่น คือ ทำพรีเซนต์เพื่อเสนอคณะกรรมการจ้าา ทีมเราคิวสุดท้ายเลย

แต่เกิดเหตุไม่คาดฝัน คนในทีมเล่นได้ แต่กรรมการเล่นไม่ได้จ้าา

feedback โดยรวม คือกรรมการชอบเล่น demo นะ มีความสนุกสนาน และชอบชื่อทีมน้องหมีตัวแตกกันมากๆ ถึงขั้นกรรมการบางท่านสงสัยว่าทีมไหนว่ะ? เลยทีเดียว แบบอยากรู้ว่าทีมใครงี้

หลังจากพรีเซนต์เสร็จ ก็ไป search google ว่าทำไมคนอื่นเล่นไม่ได้

สิ่งที่ทำให้บอทของเราสามารถทำงานต่อสาธาณะชนได้ ต้องส่ง submission ให้กับทาง facebook ก่อนนะ ซึ่งเคยมีเคสนี้ตอนงานแหกเมืองโดยป้ายุพิน เลยใช้คอมของบรรดาแอดมินให้คนเข้างานเล่นกันไปก่อน

ดังนั้นเราไปที่ App Review เปิด public

จากนั้นไปที่หน้า Messenger ไปที่ App Review for Messenger ไป Edit Note 2 ที่ คือ page_messging ตรงนี้ลิ้งกับเพจ ใส่ว่าถ้าคำนี้มา จะ auto repiles ว่าอะไร และ optional note

และ pages_messaging_subscription เรายืนยันว่าจะไม่ส่งโฆษณาใน chatbot ของเรา

เลือกประเภทของบอท และอัพคลิปที่เราคุยกับ chatbot ส่งไปด้วย

ตัวคลิปเราอัดจากไอแพด ณ iOS 11 สบายเลย

จากนั้นก็รอไปประมาณ 5 วันทำการ

เราส่ง submission ไปวันอาทิตย์ และผ่านเมื่อวันอังคาร ไวมากอยู่นะ ไม่ถึง 5 วันทำการ

แต่โปรเจกเราโดน downgrade package ไปแล้ว คงต้องรอสักพัก ตอนนี้กำลังจัดการอะไรนิดหน่อยให้กลับมาใช้ได้โดยเร็ววัน วิธีแก้ปัญหา คือ หาบัตรมาผูกซะ เราใช้ของ k-cyber นะ ไปสมัครที่ตู้ ATM แล้วขอใช้ตัว K-web Shopping Card

จากนั้นเราผูกบัตรกับบัญชี Firebase ของเรา

แล้วเลือกแพลนสำหรับโปรเจกของเรา เราเลือกขวาสุด จ่ายตามที่ใช้เนอะ 

คิดว่าเดือนละ 25$ คงตายห่านก่อน และคิดว่ายอดคงไม่ถึงแหละ ถ้าถึงก็ย้ายไป

เลือกแพลนปุ๊ป มาแล้ว เรียบโร้ยยยย จากนั้นมีอีเมลล์เด้งมา

สุดท้ายเล่นได้แล้วจ้า เย้!

--------------- --------------- --------------- --------------- --------------- --------------- ---------------

ถึงเราไม่ได้เข้ารอบ เราก็ได้ทำในสิ่งที่อยากทำและคาใจมาเป็นปี อย่าง Facebook Messager ซึ่งจริงๆใช้ cloud function ก็ไม่ได้ยากอะไรเลย ในใจเราหวังว่าแค่ทำเสร็จ ทำได้ ก็พอแล้ว ไม่ได้หวังเรื่องรางวัลอะไรเลย เหมือนมาเจอทวยเทพ มาปลดล็อก มาเอาของที่ระลึกด้วย 555

ขอบคุณที่จัดงานนี้ขึ้นมา และดูแลพวกเราเป็นอย่างดี ขอให้จัดงานดีๆต่อไปนะคะ

ข้อเสียคือ แอร์เย็นมากกกกกก ในห้องที่จัดงาน ฮืออออออ

แอบเสียดายที่กลับก่อน ไม่ค่อยได้คุยกับพี่ๆเท่าไหร่เลย

และยินดีกับทีมที่ชนะด้วย อย่างทีม NYTU ที่พี่พอร์ชจาก AIS the StartUp เล่าให้เราฟังว่าโหดมาก มาคนเดียว ทำแอปแอนดรอยด์กับระบบตรวจจับใบหน้า ในเวลา 24 ชั่วโมงเท่ากันด้วย และสุดท้ายได้รางวัลอีก โค่ดเก่งเลย

--------------- --------------- --------------- --------------- --------------- --------------- ---------------

สุดท้าย ฝากเพจ น้องหมีตัวแตก และลองเล่น นุ้งหมีบอท กันด้วยนะคะ

"ชื่อน้องหมีตัวแตก ตอนแรกคือเราจะทำตัวสุ่มอาหาร ชื่อวันหมีกินอะไรดี ผ่านการทำตัวโลโก้มานาน จนตอนหลังได้ขอความช่วยเหลือจากพี่วี ที่เป็นกราฟฟิคของทีมลุงสุขุม ในการทำน้องหมีขึ้นมา ซึ่งน่ารักมากๆเลย ไปๆมาๆเพื่อนอยากเปิดเพจอาหาร และเพจนี้ก็เป็นเพจที่สร้างมาแล้วว่างๆ คิดชื่อใหม่กันหลายชื่อ เช่น วันๆคิดแต่เรื่องแดก พอมาคู่กับน้องหมีมันก็แรงไป 555 น้องหมีเขาออกจะน่ารัก เลยกลายเป็นน้องหมีตัวแตกนี่แหละ

คอนเซปน้องหมี เกิดจากการที่เห็นน้องหมีกริซลี่ ในสารคดี ที่มีชีวิตน่าอิจฉาสำหรับคน คือ ได้กิน

แซลม่อนนอร์เวย์สดๆ ตอนปลาแซลม่อนว่ายทวนนํ้า ปลาคงไม่ได้ตั้งใจอะไรหรอก แค่ดันซวย กระโดดเข้าปากอิหมีกริซลี่ไปเลย อิหมีคงมีความสุขมากกกก ได้กินแบบสดๆ แล้วก็ไม่ได้ไปจับมาด้วย กระโดดเข้าปากเองเลย"