แชร์ไฟล์ในมือถือแอนดรอยด์กับ macbook อย่างง่ายๆ โดยใช้ File Transfer

สวัสดีทุกท่าน Android Developer หรือท่านอื่นๆ ใช้ MacBook ในการทำงาน แต่จะมีปัญหาในการ sync file จากมือถือ โดยเสียบสาย usb เข้าไปแล้วไม่เห็นมือถือของเรา เห็นแต่อุปกรณ์ถูกเชื่อมต่อกับ macbook ของเรา สามารถ run application จาก android studio ได้ แล้วจะทำอย่างไรดีหล่ะ ในที่นี้เราจะไม่ถูกถึง cloud อะไรพวกนี้นะ 

เวลาเราเลื่อน notification ลงมา จะเห็นแบบนี้

ถ้าเราเชื่อมต่อแบบ Media device ก็จะมีบอกว่า สำหรับคนใช้ mac ให้ไปดาวน์โหลดที่ www.android.com/filetransfer

เข้ามาหน้าเว็บจะเป็นแบบนี้ กด Download Now เลยจ้า

เปิดไฟล์ที่ได้ นั่นคือ androidfiletransfer.dmg

จะพบกับหน้าต่างแบบนี้ ลากเข้า folder Applications เพื่อลงโปรแกรม

ตัวโปรแกรมแอบเริ่มทำงาน ตอนแรกจะบอกว่าไม่เห็นเครื่องเรานะ และเราก็ทำการ install program โดยรองรับ device ที่เป็น Android 3.0 ขึ้นไป ซึ่งมันก็ใช้ได้ทุกรุ่นในท้องตลาดทั่วโลกอะนะ

เมื่อ install ตามขั้นตอนเรียบร้อย ก็จะเจอ icon ของโปรแกรม อยู่ใน Lanuchpad

Double-click ไปรอบนึง พบว่า ยังไม่เห็นมือถือเราเลย

ลอง restart เครื่องหนึ่งรอบ พอเอามือถือของเราเสียยสาย usb เชื่อมกับ macbook คราวนี้ก็จะเห็นมือถือเรา ตัวโปรแกรมจะเปิดขึ้นมาแบบนี้

ง่ายใช่ไหมหล่ะ!!

บทความนี้จบได้อย่างสั้นๆเลยทีเดียวเชียว เพราะทำตามได้ไม่ยากเลย แถมสะดวกมากๆด้วยหล่ะ :)

[Review] ลองของใหม่ สลีปมาส์ก นํ้ามันม้า ของบีลอฟ ว่าจะช่วยผิวหน้าได้ขนาดไหน

สวัสดีทุกท่าน ก็กลับมาในช่วงรีวิวของกันอีกครั้ง หลังจากที่หายไปแปปนึง เนื่องจากปั่นบล็อก developer เนอะ ก็เข้าเรื่องเลยเนอะ เราเห็น product ตัวนึง บอกว่าเป็นสลีปมาส์ก มาจากนํ้ามันม้า ทำให้ผิวชุ่มชื้น ผิวฉํ่านํ้า ลดริ้วรอย เหยยยย น่าสนใจนะ มันแปลกดี ก็เลยมาลองดูว่าตัวนี้จะสมคำเคลมหรือไม่

ตัวผลิตภัณฑ์นี้มีชื่อว่า ยานชันถาง ฮอร์ส ออย อควา อัลตร้า มอยซ์เจอร์ไรซิ่ง ไวท์เทนนิ่ง มาส์ก 

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

ทำไมต้องเป็นนํ้ามันที่มาจากม้าหล่ะ?

นํ้ามันใต้ผิวหนังบริเวณหางและแพงคอของม้า มีคุณสมบัติใกล้เคียงกันกับผิวหนังของมนุษย์ ดังนั้นสามารถซึมเข้าสู่ผิวได้อย่างดีเยี่ยม ฟื้นฟูผิวแห้งเสียงให้ชุ่มชื้น อิ่มนําแลดูกระจ่างใสขึ้น ทั้งยังบรรเทาการอับเสบ ผดผื่นได้อย่างดีด้วยหล่ะ แล้วยังช่วยลดริ้วรอย ให้ผิวของเรานั้นเรียบเนียน กระชับ อ่อนเยาว์ ด้วยปริมาณสารแอนตี้ออกซิแดนท์สูง

มาแกะกล่องดูกันดีกว่า

ด้านนอกเป็นกล่องสีส้ม น่าจะคล้ายๆสีของส้มบางสายพันธุ์

หน้ากล่องมีรูปม้า และเขียนว่า House Oil Yanchuntang Aqua Ultra Moisturizing whitening mask

หมุนซ้ายจะมีเขียนวันที่ผลิต และวันหมดอายุ อย่างชัดเจน มี QR Code สองจุด คือ ข้างบนเป็น wechat และด้านล่างคือเว็บของ belov สามารถเข้าไปสั่งซื้อเครื่องสำอางอะไรพวกนี้ได้โดยตรง

หมุนขวา บอกคุณสมบัติและสรรพคุณของเจ้าตัวนี้ วิธีใช้ การเก็บรักษา และข้อควรระวัง

ด้านหลัง บอกรหัสสินค้า ประเภท วิธิใช้ ส่วนประกอบ หลักๆก็นํ้า Glycerin, House fat, Aloe Barbadensis extract, Arbutin ประมาณนี้ หลังจากเปิดใช้ผลิตภัณฑ์แล้ว ควรใช้ให้หมดภายใน 12 เดือนนะ

ได้เวลาแกะกล่องจริงจังหล่ะ

ภายในมีกระปุกของตัวสลีปมาส์กนํ้ามันม้า พร้อมช้อนตัก

หมุนขวดออกมา



และดึงฝาครอบด้านบน มีที่จับด้วยนะ

ตัวสลีปมาส์กนั้น จะเป็นสีขาวเหลืองใส มีกลิ่นหอมอ่อนๆ นวลๆ

ตัวช้อนก็ตักสลีปมาส์กมาใช้

เนื้อครีมสีขาวเหลืองนวลใส กลิ่นหอมอ่อนๆ เนื้อสัมผัสจะคล้ายๆเมือกหอยทากแต่ไม่เหนียวเท่า มีความเด้งนิดๆ

และใช้ยังไงหล่ะ? 

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

ก่อนการใช้ก็ทดสอบการแพ้ก่อนนะ ถ้าแพ้ก็หยุดใช้นะ

ระหว่างที่เราหลับนั้น นํ้ามันม้าก็จะทำงานในส่วนของการฟื้นบำรุงผิว ให้ผิวชุ่มชื้น อิ่มนํ้า ลดริ้วรอย ตื่นมาผิวหน้าสดใสเลยงี้

สามารถเก็บครีมไว้ในตู้เย็นได้นะ เพื่อเพิ่มความสดชื่นระหว่างที่เราใช้สลีปมาส์กนํ้ามันม้าตัวนี้

มาทดลองใช้กันดีกว่า
เราลองใช้หลังใช้คลีนซิ่งและล้างหน้า ในช่วงก่อนนอน หลังจากใช้นํ้าตบ 1-2 นาที ลองทาครึ่งหน้าก่อนเพื่อให้เห็นความแตกต่าง ทาแล้วผิวจะดูฉํ่าขึ้นนะ ไม่เหนียวเหนอะหนะอะไรมากมาย

ลองทาทั่วใบหน้าและลำคอ และไปนอนซะ

ตื่นเช้ามาจะพบว่าผิวหน้าของเรานุ่มชุ่มชื้นขึ้นในคืนเดียว

หลังใช้ 1 สัปดาห์ เป็นอย่างไรกันบ้าง
มาเปรียบเทียบก่อนและหลังใช้กันเถอะ

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

Summary กันดีกว่า

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

ข้อเสีย
- มันเก็บช้อนไว้ในกระปุกไม่ได้ เวลาเก็บต้องเก็บช้อนไว้ในกล่องง่ะ กลัวช้อนหาย
- ครีมตักมามีแอบลื่นอ่ะ ไม่สิ เราตักครีมใส่นิ้ว แล้วครีมก็หล่นบนโต๊ะเครื่องแป้งไปเลย ;_;

ให้ 8/10 คะแนน คือมันไม่ว๊าวขนาดน้านง่ะ แต่ก็ดีกว่าไม่มีอะไรทาเนอะ

แล้วราคาหล่ะ เท่าไหร่กัน กระปุก 100 กรัม 339 บาท ตอนนี้มีโปรในหน้าเว็บ ราคา 204 บาท
และในหน้าเว็บบอกว่า สินค้าหมดแล้ว ติดตามกันต่อไปเนอะ

https://www.thebeautylover.com/product_detail.php?cid=2&pid=2255

ช่องทางการติดตามแบรนด์บีลอฟ สามารถเข้าไปจับจ่ายกันได้ทุกช่องทางนะ

- https://www.facebook.com/thebeautylover

- https://www.thebeautylover.com

- Add Line @belov

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

มาทดลองใช้ Genymotion เวอร์ชั่นที่มี google play store กันเถอะ

เรารู้แหละว่าทำไม Android Developer ถึงต้องใช้ macbook pro
เกี่ยวม่ะ?

เกี่ยวตรงที่ว่า Android Studio นั้น ใช้ทรัพยากรของเครื่องประมาณนึง ถ้าเครื่องสเปกไม่ดีนี่ ตายข่าาาา
แล้ว Emulator ที่มากับ Android SDK ก็เหมือนเต่าคลาน ไม่สิเหมือนหอยทากเดินมากกว่า มาทีเครื่องหน่วงยิ่งกว่าเพลงหน่วงของ Room39 แน่นอน ดังนั้นจึงหันมาใช้ Genymotion กัน เพราะว่ามันเร็วกว่า Emulator แล้วไม่หน่วงเครื่องมากเท่าด้วย ถึงจะใช้ macbook pro กันก็เถอะ

เนื่องจาก Genymotion ออก Version 2.10.0 และมี Google Play Service และ Play Store ในตัวด้วยนะ
พวกเราเหล่าชาว dev ก็ดีใจกันใหญ่ แต่ดาวน์โหลดมาใช้ก็ยังงงๆ เปิดตรงไหนอ่ะ วันนี้เรามีมาบอกกันค่ะ

ก่อนอื่น download Genymotion มาก่อนเลยจ้า

จากนั้นสร้าง Visual Device มาเครื่องนึง

แล้วก็เปิดเครื่อง

(ขออนุญาตพูดแบบคร่าวๆสำหรับการ install หรืออะไรพวกนี้ น่าจะทำเองกันได้ไม่ยาก)

สังเกตุที่มุมขวาบนสุด มันคือปุ่มลง google apps นั่นเอง กดเลยจ้าา

มันไม่ได้ถามเราว่าแน่ใจแล้วนะว่าจะลง ถ้าไม่แน่ใจจะลงทำไมเนอะ
ขั้นตอนนี้เป็นขั้นตอนที่คนไม่อ่านกัน ทำอย่างเดียวคือกด Accept ให้ผ่านๆไป

จากนั้นรอโหลดจ้าา

เมื่อโหลดเสร็จ restart your visual device จ้าาา ซึ่งเราอาจจะไม่ต้องทำอะไร 

มันเหมือนตอนที่เราทำ Software Update นั่นแหละ

แต่ของเรามันค้างๆ เลยปิดแล้วเปิดใหม่

พอเครื่อง restart เสร็จแล้ว ก็รอให้ตัว update install จนเสร็จสิ้น

สุดท้าย Play Store มาแล้วจ้าาา และมองไปดู ไปมองมุมขวาบน ก็จะมีเครื่องหมายถูกสีเขียวๆติ๊กไว้

จากนั้นเข้า Play Store เพื่อ log-in ให้เรียบร้อย และเราก็สามารถลง app จาก google play ได้อย่างสบายใจ เป็นอันจบบล็อกตอนนี้จ้าา

ปล. มีเพิ่มเติม ใน Android Studio มี plug-in ของ Genymotion ด้วยนะ ลองโหลดมาใช้กันดู

ทำ 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 น้องหมีเขาออกจะน่ารัก เลยกลายเป็นน้องหมีตัวแตกนี่แหละ

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

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