KATHIN ON LINE เส้นทางบุญสายใหม่ บนเวที LINE HACK 2020

ธรรมะ สวัสดีครับ !! ใช่ครับ ธรรมะสวัสดีผู้อ่าน (เดี๋ยวโอ๋ มาเล่าว่า ทำบุญมาขนาดไหนเริ่มด้วย ธรรมะ สวัสดี) จบไปแล้วกับการแข่งขัน LINE Hackathon 2020 โดยแข่งกันทั้งสองวันคือ 7 พฤศจิกายน และ 14 พฤศจิกายน 2563

https://hackth.line.me/

เป็นการแข่งขันที่แปลก ไม่เหมือนปีไหนๆ ตรงที่ Hack กันสองอาทิตย์เลย … 😵หะ !!! สองอาทิตย์บ้าไปแล้ว แน่นอนว่า สำหรับหลายท่านบอกเป็นโอกาสดีเลย เพราะอาจจะมีของที่ตัวเองมีอยู่ มาต่อ -ยอด แล้วขึ้นเวทีชก ได้เพียงแค่ อุ่นเครื่องเฉยๆ และ สำหรับ บางทีมมันคือเวลาที่ต้องปล่อยของทุกๆ นาทีในทุกๆ วัน กำหมัดขึ้นชก 🤜🤛 เพราะต้องเริ่มจาก 0 (แต่ก็ไม่ขนาด 0 จริงๆก็ต้องมีของตัวเองบ้าง อะ ฮาๆ) ครับ มันกลายเป็นเวที กึ่งๆ ปล่อยของ กึ่ง Hack เกริ่น พอก่อนนน

หมายเหตุ: มีเฉลย Stack ที่ใช้ครับ

หมายเหตุ2 : อ่านจบ เข้าใจได้เลยว่าใครก็แข่งได้ครับ ขอแค่ ไอเดียเรา กระแทกกรรมการได้

เริ่มจาก Blog นี้ครับ

LINE HACK 2020; งาน Hackathon เฟ้นหานักพัฒนาทั้งประเภทบุคคลทั่วไปและนักศึกษา เพื่อชิงเงินรางวัลรวม🏆 500,000 บาท!

พออ่านเสร็จ อารมณ์ก็จะเหมือนทุกปี เห้อออออ 😩!! อยากแข่ง อยากหาทีม แต่ไม่ค่อยมีไอเดีย ซึ่งก็พยามชวนเพื่อนๆ แล้ว สุดท้ายก็ยังไม่มีใครอยากลุย T_T

ยิ่งทุกคนที่เป็น LINE Developer ทั่วประเทศ พูดเป็นเสียงเดียวกันว่า เวที LINE Hack คือที่สุดของการปล่อยของที่ Dev Dev Dev กันมาหลายปี เอามาโชว์บนเวที LINE Hackathon นี้ให้ได้ ผมเองก็ ติดตามมาตั้งแต่ LINE Hack 2018

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

โอ๋ไปแข่ง LINE Hack กัน…

เป็นข้อความจาก อาจารย์ตอนเรียน ปริญญาโท ม.รังสิต ผศ.ดร.วุฒิพงษ์ ชินศรี (ตัวละครแรก)

โอ๋ : เอาครับแข่งครับอาจารย์ แล้ววว เราทำอะไรกันดี…

อาจารย์เณร : ผมว่าจะทำเกี่ยวกับงานกฐิน (มุ่งมั่นมาเลยพ่อคู๊นน)

โอ๋ : ครับ หะ อะไรนะครับ!!

อาจารย์เณร : ผมว่าจะทำเกี่ยวกับงานกฐิน ผมว่ามันควรจะมีมานานแล้ว ผมไม่รู้ว่าโอ๋จะอินไหม แต่ผมว่าผมจะทำ โอ๋มีไอเดียมั้ย

โอ๋ : ครับ ผมไม่รู้อะไรเกียวกับกฐินเลย ไม่น่าจะอินเท่าไร แต่ก็ไม่มีไอเดีย

อาจารย์เณร : อะ ไม่เป็นไร ขอเวลา 2–3 วันเอาหัวข้อมาคุยกันใหม่

2–3 วันผ่านไป

โอ๋ : ไอเดียผมยังไม่วิ่งเข้ามาเลย แต่ขอเชิญมหาเทพ UI น้องทีมผมอีกคนนะครับอาจารย์ ถ้าเรา ทำสองคน ไม่มีใครสาย UX UI เราตายแน่ๆครับ ฝีมือด้าน PS หรืออะไรแต่งภาพเข้าขั้นกระจอกมากครับ ฮาๆ (น้องเต้ ตัวละครที่ 2 ครบทีม)

อาจารย์เณร : ผมว่าจะทำเกี่ยวกับงานกฐินแหละ (อ่าา กฐิน ก็กฐิน (-_-) )

อาจารย์เณร : ผมขอไปเขียน proposal ก่อนครับเหลือ ไม่กี่วันเดี่ยวไม่ทัน

อาจารย์ก็เขียนเสร็จเอามาให้อ่านแล้วก็ ตกแต่งเนื้ออหาจนไม่แก้อะไรแล้ว

ในระหว่างที่ตรวจ proposal ก็ยังคงวิเคราะห์ว่า โห… อาจารย์เขียนได้เก่งมาก ถ้าให้ เห็นภาพ เลย เล่าที่มา เหตุผล หลักการ และ จุดที่จะมาแก้ไข ชัดเจน ราวๆ 2 แผ่น A4 !!

สุดท้ายคือผมก็เชื่อว่า เกือบทุกทีม แห่กันส่ง 1–2 วันสุดท้ายเหมือนเรา 5555+

ตอนนี้ผมมีคำถามในใจแล้วว่า……

1. กฐินนเนี้ยยยมัน เหตุการณ์มันต่างกับ ผ้าป่าไหม เคยแต่ใส่ซอง เป็นกรรมการ

2. ในชีวิตเคยตั้งคำถามว่า งานบุญ กับ เทคโนโลยี มันจะทำได้ยังไง มันเป็นไปได้จริงๆหรอ

3. ถ้าได้จริงสัญญาเลยว่าจะ ทำให้ความฝันอาจารย์นี้ เกิด

วันประกาศผลก็มาถึง มีชื่อด้วยยโว้ยยยยยยย นี่มันอภินิหาร กฐินอะร๊ายยย

https://hackth.line.me/

โอ๋ : อาจารย์ครับ คือ เรามีชื่อเข้ารอบแล้วครับเราต้องทำ กฐิน แล้วนะครับ

อาจารย์เณร : เยี่ยมมม เรามาลุยกัน

โอ๋ : ผมจะตั้ง Core ระบบให้ทั้งหมดครับจะรวบรวม Stack และเดี๋ยวนัดประชุมครับ

ก็มาดูว่า เงื่อนไขการแข่งครั้งนี้มีอะไรบ้าง เขาต้องการอะไรบ้างในเวทีนี้มาดูกัน

https://hackth.line.me/

General Public (รุ่นประชาชน)

1. ต้องการการนำเทคโนโลยี LINE มาประยุกต์ให้เข้ากับ Concept ยุค New Normal
2. ประมาณไม่เกิน 5 คน
3. ต้องใช้เทคโนโลยี. LINE ที่ชื่อ Messaging API
4. ต้องใช้เทคโนโลยีของ Google อย่างน้อย 1 ตัว
5. สามารถที่จะเอา Web Mobile หรือ IOT เข้ามาผสมโรงด้วย (แน่นอน LIFF แน่ๆ)
6. คือประมาณว่า ห้ามเปลี่ยนแปลงอะไรเลยนะ
7. ต้องเป็นผลงานใหม่ที่ไม่เคยได้รับรางวัลที่ไหนมาก่อน (แน่นอนว่า อะไรก็ได้ที่ไม่เคยเอาออกสู่โลกภายนอก)

ตั้งแต่วันที่ ประกาศวันที่ 30/10/62 ไปจนถึงวันที่ 7/11/62

miro

เทคโนโลยแรกที่ต้องใช้ เราเลือก miro สำหรับวาด Flow และ Prototype

แน่นอนว่า ออกแบบตามภาษาชาวบ้านที่ไม่มีประสบการณ์ และยิ่งในระหว่าง Hack เราต้องรีบจบเรื่องนี้ให้ไว. และสิ่งที่พร้อมและทำหลังจากนี้ก็ประมาณ …..

1. อาจารย์ต้องทำยังไงก็ได้ให้ทั้งทีมรู้จักและอินกับ กฐิน มากๆ ทุกรูปแบบ
2. ต้องบิ๊บ LINE Tech ทุกตัวในทีมกันเวลาอันสั้น ตั้งแต่ Messaging API จน ถึง LIFF
3. ประชุม วาด จดให้เยอะที่สุดเท่าที่จะทำได้เยอะมากๆ เพราะต้อง สรุป ข้อมูล และ คุยกับ น้องเต้ (UX)
4. รีดไอเดียของ อาจารย์ออกมาให้ Simple มากสุด และต้องแปลออกไปเป็นงานให้น้องเต้ ผู้ในหัวมันออกแบบไม่หยุด พีคสุดคือ! เครียดหาวิธีเบรกยังไงก็ได้อะ

คราวๆ จะได้ภาพในหัวประมาณนี้ เอาไปเสก

จนสุดท้ายเราสรุปเสร็จภายใน 2วันแรก🔥 และผมก็ขอเลือกพวกนายยยย… Stack ทุกอย่างที่จะนำมาใช้สำหรับการ Hack (เหตุผลง่ายมากครับคือ อะไรก็ได้เร็วสุด ใช้อยู่แล้ว ไม่คิดเพิ่ม เอาที่มีให้สุดเลย ยกเว้นบางอย่าง)

รอบนี้พิเศษนั้นก็คือ ..พิเศษใส่ไข่เข้ามา 555+ เราต้องใช้ Google Stack อะไรก็ได้มาอย่างน้อย 1! อย่าง เป็นกติการรอบนี้ เนื่องจากงานนี้ได้รับความร่วมมือกับ Google Developer Group และ Google Developer Expert เราก็ อื้มม เอาวะ จัดดิรอไร แต่มาเรียบเรียงก่อน

LINE Stack

1. Messaging API มาถึงสนามนี้แล้วทุกคนต้องเริ่มจาก เทคโนโลยีนี้ และแน่นอนว่าถ้าใครยังไม่รู้มันคืออะไร LINE Developer Community ทั่วฟ้าเมืองไทยต้องบอกว่าไปอ่านได้ที่ https://medium.com/linedevth/%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87-line-bot-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-messaging-api-%E0%B9%81%E0%B8%A5%E0%B8%B0-cloud-functions-for-firebase-20d284edea1b
   หรือสามารถหาอ่านเพิ่มเติมได้ที่ LINE Developer
2. LINE Login & LIFF เอามาสร้างหน้าระบบของเรานั้นเอง แน่นอนว่าทุกคนต้องทำให้บอทมีมากกว่าการ Chat และผมก็คิดว่าถ้าเป็นระดับ End User มากกว่า 60% (คิดว่านะตัวเลขเดาๆ) friendly user LIFF มากกว่า Chat
3. LINE Notify ตัวนี้บอกเลยว่าพึ่งนึกถึง จะเอามาแจ้งเตือนการสร้างซอง ให้ Admin
4. LINE PAY (Payment Gateway). ใครรรบ้างงงไม่คิดถึง ฮาๆ แต่ ………ถ้า Develop กันจริงๆ เราต้องเลือก Kbank แน่นอนครับ มันดีที่สุดในประเทศแล้ว (จริงงง พี่กระทิงหล่อครับ) เอามาใส่ซองกฐินนั้นเอง
   🔥🔥🔥🔥 ไม่ใช่ราบรื่นนน มันมีปัญหาที่หาคำตอบกันไม่ได้ เดี๋ยวเล่าๆ 🔥🔥🔥
5. Share Target Picker แจกซองรั่วๆ

Firebase 🔥

1. Hosting จะพลาดได้ไง แล้วจะให้เอาอะไรมาทำ LIFF กันเรา
2. Cloud Function จะขาดไม่ได้เล๊ยยย ถ้าต้องทำ Webhook และ สำหรับทำ API ต่างๆ นาเลยละ
3. Realtime Database พ่อพระเอกของฉานนนน พูดได้ว่า ถ้าจะมีข้อมูล เยอะๆ แล้วโหลดเข้ามาเราต้องเลือก (แอบบอกนิดนึงว่า ข้อมูลวัดกว่า 2000 และ ตำบล อำเภอ จังหวัด โหลดเร็วตอนค้นหา มันคือ The Best อิอิ)
4. Cloud Firestore เก็บข้อมูลผู้ใช้งาน และ ซองกฐิน ก่อนจะใช้ ท่า Extension ไป Bigquery
5. Storage เอามาเก็บรูปซองที่ Generate จากระบบ ก่อนส่งออกไปให้ End User ได้ Download

Google Stack

1. Big Query มาช่วยเก็บข้อมูลเลยละกัน อย่างน้อยก็ เอาเรื่องเก็บพวก Transaction ใหญ่ๆ คำถามคือทำไมไม่ใช้ Firestore ไปละ ก็ ตอบตรงๆว่า อยากได้รายงานไปออก Data Studio สวยๆ เฉยๆ ฮาๆ

ลอง Query สัก 1000 ซอง ก็ยังโอเคร (ตอนนี้มันยังฟรีไงเล่า)

2. Cloud Vision AI คือคุยกันว่าซองกฐินมันต้องเชื่อถือที่สุด ต้องเข้ารหัส JWT ต้องยืนยันของแท้ที่มาจากระบบได้ ป้องกันการโกงนั้นเอง อาจารย์เลยจัดตัวนี้มาเพื่อตรวจสอบยังไงล้ะ (เดี๋ยวจะมาเล่าว่า โคตรตัวปัญหาของมันคืออะไร)

Cloud Vision

3. Data Studio เอามาออกรายงานภาพรวมและสามารถ Export ข้อมูลให้วัด หรือ ส่ง สรรพากร ซึ่งทางทีมก็ แน่นอนละ ไปวัดกันจริงๆ และ สัมภาษณ์เจ้าอาวาสท่านเลยว่า ปัญหา ตอนรวมรวบข้อมูล นำส่งข้อมูลลำบากมั้ย (ถ้าวัดใหญ่ไม่มีปัญหาหรอก ถ้าวัดเล็กๆที่นับกันเองละ)

Data Studio

4. Dialogflow ก็นั้นละครับเอามาทำ แชทบอทเป็น Help Chatbot คอยหาซอง คอยบอกว่าต้องพิมพ์อะไรครับ

Other

1. Vue ทำ front-end
2. Node JS , Typescript ทำหลังบ้าน
3. GIT
4. Bitbucket เอามาใช้ทำ Repo ต้องแรกจะไป. Gitlab แต่พอดีทีมมาใช้พอดี
5. Trello คือจุดรวมงานเลยละ ทำ Check To Do List. แนะนำสำหรับมือใหม่นะครับว่า ถ้าเราต้องทำงานเป็นทีม และ จะเริ่มต้นคุย โปรแกรมเล่านี้คือ สิ่งๆที่ควรมีจริงๆ
6. Flex Simulator ออกแบบใบอนุโมทนาบัตร และซอง !!!!!!! ใช่ ใบอนุโมทนาบัตรเป็น Flex ค้าบรวมทั้งซองด้วย

บอกตรงนี้ว่ามันคือสิ่งที่ทุกคนขาดไม่ถึง เอาสะเอววววคอดดดดเล๊ยยย สำหรับคนที่เคยติดตาม LINE Hack อยู่แล้วจะรู้ ส่วน คนที่ไม่เคยติดตาม LINE Hack จะโอดครวนมากเพราะมันคือ Tools ที่ต้องใช้แข่งขันด้วย โดยเฉพาะถ้าคุณเป็นสายด้าน UX UI ขาได้ก้าวไปยังสนามถัดไปแน่นอน (ครับ น้องเต้ของเรานั้นละพ่อยอดขมองอิ่ม 55555+)

เริ่ม!! หลังจากนี้เราก็คือคุยกันทุก 2 — 3–4–5 ทุ่มทุกกกกวัน บางวันนอน เที่ยงคืน ตี 1 คือ เรียกว่า งานการก็หนัก มีไหนจะเวลาครอบครัวและแต่ละคนคือต้องพึ่งสิ่งศักดิ์สิทธิ์ ให้เข้าใจพวกเรา 3 คน

ชี้แจงแบ่งงานก่อนเล๊ย ประมาณนี้

1. อาจารย์ ต้องคอย re-check flow และ support เทคโนโลยีทุกอย่าง ที่จะนำมาใช้ และ Tester
2. เต้ หลังจาก ที่ถ่ายทอดวิชา LIFF ฉบับหลวงปู่เค็ม เดินผ่านกองไฟ แบบตายได้ตั้งแต่ก้าวแรกแล้ว ก็ให้ทำ front-end อย่าได้หันหลังกลับ ขอแค่อยากได้อะไรเพิ่ม ส่งสายตามาพอ
3. โอ๋ ทำตัวน่ารัก ไปเฉยๆ หลอก support back-end และคอย ประกอบร่างให้ และ Tester พร้อมหาของกิน และขนมให้ 5555+
4. แม่โอ๋ คือนั่งอบขนม เค้กกล้วยหอม คุ้กกี้ และ เซิฟ เฟรนฟรายแบบ ไม่เบามือลูกเล๊ย

วันที่ 1–6

1…2…3 ปัง!!! พังกันตั้งแต่วันแรกๆเลย และ … ยังคงเอ๋อๆ จนก่อนแข่ง

LINE Pay Sand Box

โอ๋ : อาจารย์ครับคือ Sanbox มันได้ paymentUrl ไม่ได้บ้างครับ

อาจารย์ : ผมก็ลองแล้วนะเครื่องผม ได้บ้างไม่ได้บ้างสงสัยเขียนผิดเปล่า

โอ๋ : เขียนผิดมันไม่มานานแล๊ววจารย์

*paymentUrl คือ สิ่งที่จะแนบมาตอนทำรายการสำเร็จเป็น link ให้คุณ redirect ไป จ่ายผ่าน LINE PAY

สุดท้ายคือหาเหตุผลกัน ชั่วโมงกว่า จนจะเที่ยงคืนละไม่ไหวละ ผมขอโทรหา เพื่อนที่อยู่ Rabbit LINE Pay

โอ๋ : นาวววววว ช่วยยด้วยยคร้าบบบ อยากรู้เกี่ยวกับตัว Sanbox มีปัญหาเปล่า

มะนาว : อ๋อใช่จ้ะ ไม่รู้มีปัญหาอะไร เพราะต้นทางอยู่เกาหลี แต่ Production ปกตินะไม่มีปัญหา

โอ๋ : หะะะะะะ อะไรนะโถววววววว นาววว เราหากันจนเส้นเลือดวิ่งอะ

หลังจากนั้นอาจารย์ก็ได้ติดต่อผู้ทรงอิทธิพล. พี่ตี๋ ของเรานั้นเอง พี่ตี๋ก็บอกว่า ไป Production เลยครับ เดี๋ยวมันจะคืนเงินเอง ผมก็ Happy 555+

แรกที่เจอปัญหานี้เราก็ไปสืบหามาจนรู้ log error ว่า generate ตัว orderid , id เยอะเกินไป สักนิด สัก 103 ตัวได้มั้ง 555 มือหนักไปหน่อย

แต่ถึงแบบครบสูตร แต่…ดียังไงอยู่เฉยๆเขาก็รัก {} 😭 อ่าๆน้องไม่ดื้อก็ได้ ไป production เขาก็ จัด 0000 ให้น้องเลย

https://pay.line.me/documents/online_v3_en.html#infra-and-tech-support

หลังจากนั้นก็เป็น สวรรคแห่งการ Dev คือ ประชุมทำ ประชุมทำ ใช้ Trello ทำการ์ดสรุป Comment จนได้มา 70% จนถึงวันที่ 7 ก่อนแข่งเราจะได้หน้าตาประมาณนี้ (แค่หน้าตานะ)

ทะด้าาาาา Kathin ON LINE ก็มาแล้วววว อย่างน้อยหลังจากวันที่ 7 ก็สามารถเก็บรายละเอียด ได้แบบไม่ทำให้เป็น หมีแพนด้าได้แล้ว

ปล. กว่าจะรูปนี้มาคือ มหาเทพเต้เราก็ ปรับ จนแบบ เดินมาคุยกับผมบางละ คุยกับ กำแพงบ้างละ เดินมาที่โต๊ะทำงานผม แล้วเดินกลับบ้างละ 5555+

ในระหว่างการพัฒนา ช่วงนี้อะไร เราจะคุยบ่อยๆๆ เพราะภาพกฐินตอนแรกมันไปหลาย version มากละ และภาพนี้ให้ดูเฉยๆแค่จะบอกว่า บ้านผมน่าอยู่ เอ้ย!! ว่าการคุยกันบ่อยๆ ตั้งคำถาม บ่อยๆ และต้องหาข้อสรุป ให้ได้ ทุกครั้งจากการคุย มันทำให้เห็นภาพเร็วมาก

จะมีประมาณ วันที่ 6 มั้ง เราก็ได้รับข้อความประมาณว่าอย่าลืมนะสิ่งที่ทาง LINE แจ้งมาคือ

1. เราจะต้องไปร่วมกิจกรรมที่ตึก เกสร ทาวเวอร์
2. เตรียมคำถามเกี่ยวกับ LINE และ Google Stack ไว้ด้วยว่าเราต้องเจอ Mentor ระดับประเทศ (รู้ใช่มะจะไปถามอะไร 55555+) แล้วอาจารย์ ก็บอกว่ามีอะไรจะถามก็เตรียมได้เลยนะ จะไประบายความในใจ หรือ จับมือ ภายใน 10 นาที ยังไงก็ได้ โดยแบ่งเป็น

• LINE 10 นาที
• Google 10 นาที

1. จะมีกิจจกรรมให้เก็บคะแนน 2 คะแนน (ถ้าใครติดตามงานจะพอเดาได้คืออะไร เดี๋ยวบอกๆ อ่านต่อๆ)
2. ต้องต้องเตรียมจับฉลากเรื่องลำดับการ picth ในวัน demo day

วันที่ 7 มาถึง

ก่อนนอน ที่จะมาวันที่ 7 นี้ก็มีบทสทนา เรื่องเสื้อขึ้นมา. (เขาให้แต่งสุภาพ)

อาจารย์ : แต่งสุภาพกันนะครับ เอาเสื้อแบบไหนดี

โอ๋ : ครับผมใส่สีขาวไปนะครับ จะได้ คอนเซป งานบุญของเรา

อาจารย์ : อ่า โอเคร เดี๋ยวผมไปหาสีขาวครับ

ก็ดูเหมือนจะไม่มีอะไร !! พอ วันที่ 7 ประมาณ 10.30 ขึ้นไปถึงตึกเราจะเจอจุดลงทะเบียนจุดแรก เพื่อรับบัตรประจำทีม

บอกได้เลยว่าไม่ได้มีความรีบ. คือมากลุ่มแรก ฟิตอะไรขนาดนั้น ซึ่งก่อนขึ้นตึก เราก็ได้ยิน พี่ตี๋ทักพี่ป๋อมว่า

โปรแกรมเมอร์ตัวจริงต้องตื่นสายนะพี่

ผมก็…อาจารย์ครับ ผมอยากเป็นตัวจริง ฮาๆๆๆ. เนื่องจาก มาเร็วเราก็จะได้ถ่ายรูปเลย แชะะ สักหน่อย

เสื้อขาว. ขวานี่ นัมดูโทรม นะ ไม่ใช่นัมโดซาน

เต้ : พนมมือครับ อนุโมทนากันสักหน่อย

อาจารย์ : อ่าๆ พยามมือ

และพอเริ่มงานทุกคนจะต้องเข้ามานั่งในจุดรวมพล ซึ่งคนจะเริ่มทยอยๆ มาครับ

หลังจากเริ่มงานพิธีกร พี่บี พิธีกรที่สวยสุดในย่าน LINE ก็กล่าวต้อนรับงาน แต่เอ๊!! เห็นอะไรมั้ยครับ ฮาๆๆๆๆๆๆ. ถ้าไม่นับแถวหน้านะ ที่เหลือเสื้อดำ

อาจารย์ : ฮาๆ เขาดำกันหมดเลยอะโอ๋ เรานี่ขาวเอาโชค

โอ๋ : ฮาๆ ให้มันต่างครับเราสายบุญ

เต้: พี่โอ๋ครับ มีคนมาสายเราครับ. ศรัทธา.online

โอ๋ : เหยนี่มันทีมสาย บัฟแน่ๆอะ เดาว่าเปิดมานี่ คือเพิ่ม Str Agi Int ชัดๆ

เต้ : เขาอาจจะยกบทสวดมาเลยนะครับ เป็น พรีสแน่ๆ

ซึ่งใครจะรู้ ของจริ๊งงงง ทีมนี้ ได้ที่ 1 ด้วย และในขณะพูดก็นั่งข้างหน้าเราด้วยย เขิล
>///<

หลังจากกล่าวตอนรับ จะมี Session ช่วงเช้าอยู่สองอย่างคือ
1. LINE API Update

2. Mission

LINE API Update

1. LINE Messaging API เรื่องของตอน Get Profile เราจะได้ของมาเพิ่มด้วยก็คือเรื่อง ภาษา ซึ่งมันทำให้เราสามารถพัฒนารองรับภาษาได้มากกว่า 1 ของ กฐินเองก็เอามาใช้ตอนทำลงทะเบียน

2. Icon Sender นอกจาก logo ของ LINE แล้วเราสามารถให้ Bot เปลี่ยน Logo เพิ่ม UX ให้กับบอทได้เจ๋งมากๆ ลองอ่านดู พี่กอล์ฟของเราก็เขียนแบบดูง่ายยยม๊วก

3. ส่วนนี้ จะเป็น Event ของ Webhook ที่เพิ่มเข้ามา

• Unsend คือสามารถรับ Event นี้ได้แล้วนะ เพื่อใครอยากเอาไป ต่อยอด พวก ลบข้อความไปแล้ว ทำอะไรต่อ
• Video viewing complete คือประมาณว่าดูจบแล้วถึงจะได้ data กลับมาว่าดูจบคือดูใจสาย Marketing จริงอะ (แอบออกว่า ดูเร็วๆ ข้ามๆ จนจบก็นับได้ ฮาๆ)

4. ส่วนของ Messaging API เขาก็ปล่อยของนะ

1. Get Bot info เรียกว่า ได้ข้อมูลของบทคุณมาเกือบครบเลยแถมไม่ต้องไปหน้า console

1. Get Webhook เราจะได้ Endpoint ที่เราใส่ไป. ฮาๆๆๆ มี GET แล้วนะ
2. SET ​Webhook เชรดดดโด้ เปลี่ยนสาย Webhook ได้ด้วย คือใครมีหลายเส้นอยากสลับก็ส่งไป แต่แน่นอนเรามีสาย Test มาเพิ่มก่อนเปลี่ยน
3. TEST Webhook ตามตัวเลย เพื่อเราจะได้รู้ว่า Call ไปได้ไหมค่อย Set

https://developers.line.biz/en/reference/messaging-api/#get-bot-info

5. LINE Botdesigner มี Update ด้วยนะ มีข้อใหม่ๆเข้ามาแล้ว แต่ผมยังไม่ได้ลองนะ

6. Flex เขาก็ปล่อยนะแถมปล่อยเยอะด้วย เอางี้เพื่อให้เข้าถึงอารมณ์ไปอ่าน

10 ฟีเจอร์ใหม่ใน Flex Message ปี 2020 อิสระที่เหนือกว่าของการออกแบบข้อความใน LINE

ผมชอบส่วนตัว 1 ให้ตายเถอะไม่ต้อง แรปแล้วโว้ย

ผมชอบส่วนตัว 2 ขยาย Bubble เป็น 12 ซึ่ง เลื่อนเมื่อยขึ้น อย่างน้อยร้านค้าก็มีของโชว์ได้มากขึ้น

เต้ผมนี่ร้อง วู้ววววหู้วววววววและ ซึ่งผมเหมือน บังคับให้มันอ่าน มาแล้วด้วย ฮาๆ มันก็งงว่าพี่โอ๋ให้อ่านทำไม วะ

7. LIFF LINE Front-end Framework

ออกเวอร์ชั่น V2.5.0 ทาง LINE เคลมเลยว่าปลอดภัยมากขึ้น และไวมากขึ้น อ่านเพิ่มเติมได้ที่นี่

และยังไม่พอแค่นั้นนะ ส่วนนี้คือ มันมีจังหวะมากขึ้น ปกติเราจ init liff ก่อนใช่มะ ถึงจะเข้า function อื่น แต่นี่คือ function ที่เกิดก่อน init ได้อะ ไม่ต้องรอ ยกตัวอย่างเช่น liff.close อะ ถ้าผม error ออกมา ก็จับใส่ catchให้มัน จบที่รุ่นเราไปเลย 555+

คืองี้ตอนที่เรากด ShareTargetPicket เราก็กดแชร์เฉยๆ ใช่มะ เราไม่ได้รู้ว่ามัน แชร์สำเร็จไหม๊ หรือ ได้ error อะไรถ้าเรากดปิด อย่างน้อยก็ให้เราเก็บข้อมูลได้เลยนะว่า แชร์ไปกี่ครั้ง ซึ่ง กฐินก็เอามาเก็บเช่นกัน อิอิ อ่านเพิ่มเติมเนอะ

8. LIFF SDK in npm Update. แล้ว

9. Dialogflow เล่ายังไงดีนะ

Cloud function ปกติแล้ว Inline Editor run บน Firebase เขาย้ายไป ทำอยู่บน Cloud Run ของ GCP

แต่มันก็มีข้อจำกัดนะคือ

1. ถ้าจะทำทำต้องเปลี่ยนแพลนแล้วเป็น Blaze เท่านั้นนะ อิอิ ไปเปลี่ยนสะ

2. Node ที่รองรับตอนนี้ v10 คือใคร v8 ไม่ได้นะไปเปลี่ยนด้วยยยยยนะ ฮาๆ ซึ่งจริงๆ ถ้าใน cloud function ใครเป็น 8 นี่มันจะขึ้นแจ้งหนักมาก !! เหมือนไปโกรธใครมากจริงๆ

3. ผมใช้ 10 อยู่และไม่ได้ Develop บน Inline เลยไม่ได้ตั้งใจฟังเลยขอโทษค้าบ

และถ้าย้ายไปก็เอาหน่า. พี่ตี๋จัดเรื่อง เปรียบเทียบให้แล้วนะไม่ร้อง รับรองว่าไปสบาย

และสุดท้ายคือสิ่งนี้ เครื่องมือพระเจ้า Firebase Emulator Suite

Firebase Emulator Suite

Firebase Emulator Suite มันพระเจ้ายังไง คือเล่าตรงนี้ก่อนว่า ยอมรับครับ ผมก็เคยพยามใช้แต่ไม่ถนัด แต่มันไม่ใช่ไม่ดีนะ ผม อ่อนแอ

คือเจ้า Firebase Emulator Suite นี่อะมันคือเอา firebase console ทั้งย้วงมาใส่เลยเว้ย คือให้พูดเลย ไม่มีเหตุผลอะไรที่จะไม่ใช้ ไปลองดูวิธีใช้

ทุกอย่างที่ต้องรู้ก่อนใช้ Firebase Local Emulator Suite กับ Cloud Firestore

ที่ผมชอบมากๆเลยนะ ถ้าใครเคย deploy function คุณต้องสั่ง deploy function ใช่มั้ยครับ แล้วมันใช้เวลาเท่าไรละ แน่นอนละ 3 ล้านวิมั้ง หยอกๆ ก็มีไปต้มมาม่ากลับมาได้บ้างอะ

Mission ของวันที่ 7

คือให้ทำ Flex เป็นรูปภาพดังต่อไปนี้ ให้เวลาประมาณ 45 นาที

และแน่นอนมันคือ ต้องทำด้วย Flex Simulator นั้นนเองงงงงงง!!!! และเต้มันก็อ๋ออออ ดีนะพี่โอ๋ให้อ่าน (มันไม่อ่านหรอก เพราะที่ทำงานพี่โอ๋ใช้ให้มันทำอยู่แล้ว) ฮาๆ

อุปสรรค์ที่เจอคือ เราต้องออกแบบให้เป๊ะๆ มากๆ ต้องเท่ากัน และมันมีจุดยาก ง่ายผสมกันไปหมด แต่สำหรับผม ความยากมันมีนะ แต่มันยากขึ้นไปอีกคือ. เต้….อย่าฝืนนนสิโว้ย อารมณ์ว่า ถ้าไม่มีเวลาให้มันจะพยามเถียงกับตัวเองว่า เห้ยทำไมตรงนี้ไม่ได้นะ offset ไม่อยากใช้ ฮาๆ แล้วทีมนี้จะบังเทิงมากขึ้นคือ ต้องรอให้มันพอใจก่อน เดี๋ยวมันก็กลับมาทำ (แอบบ่นมัน ฮาๆ แต่มันมีเวลานะโว้ย)

ซึ่งสุดท้ายเราก็ต้องขอบคุณที่ เต้ของเราคว้า 2 คะแนนมาได้แบบ พระเอกมากกพ่อคุ๊นนน. ภาพนี้คือสภาพตอนทำนะไม่ใช่เสร็จ ถ้าไปดูภาพคนอื่นคือ เขม่งใส่คอมจอแตกได้เลย

และ ครึ่งวันแรกเราก็ได้กินข้าวสักที่

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

เต้นี่มันกล่องที่ 4 แล้วนะ!!!

เต้ก็ตอบง่ายๆ แค่นี้ว่า

ใช่พี่โอ๋ ปกตินะ มันอร่อยดี

ฮาๆกองทัพเดินด้วยท้องพี่เข้าใจ

บ่ายของวันที่ 7

เราต้องจับฉลากกกกกกกกกก นำเสนอในวัน Demo Dayyyyyy ซึ่งตอนนั้น คือโอยยยทำยังไงก็ได้อะ ไม่ขอแรกๆ เพราะยังไม่มั่นใจระบบมากๆๆ แต่แล้ว กฐินเราก็คลั่งจริง

เห็น นิ้วมั้ย!!!! สองงงงง จารย์ สองงงงง ฮาๆๆๆ โถววววววว 55555 + หลังจากนั้น ก็เป็นช่วง แต่ละทีมต้องเจอกับ Metor สองชุด จาก LINE และ Google ซึ่งกติการมีประมาณนี้ว่า ถามอะไรก็ของ ขอคำแนะนำอะไรก็ได้ แต่ต้องใช้เวลา ภายใน 10 นาทีเท่านั้น มาดูว่าผมเจอใคร

LINE Mentor

สิ่งที่เราเตรียมไปคือ เราไม่รู้จะเตรียมไรไปถามดี (อ่าว ฮาๆ) อาจารย์เณรเลยเลือกที่จะเล่าให้ฟังครับ เนื่องจาก ทีม Mentor ทุกท่านจะมีไฟล์ Power Point ของเราและ Proposal ของเราแล้ว เลยเล่าโชว์ งานไปเลย สิ่งที่เราเราได้กลับมาคือแนวคิด แนวทางและ ลำดับของการนำเสนอ

1. เราต้องใช้เวลากับเรื่องนี้ยังไงก็ได้ไม่เกินกี่นาทีและ เดโม่กี่นาที เนื่องจากเรามีเวลา 5 นาที
2. แนะนำว่าสิ่งที่เราเตรียมไปมันอาจจะเยอะแต่ถ้ามันคือจุดอ่อนอย่าพูดให้เสียเวลา ไป Focut Demo ให้มากขึ้น
3. ใส่ชุดขาวขึ้นเวทีมั้ยครับ (พี่แทนถาม) อาจารย์ตอบอย่างมั่นใจว่า เราเตรียมมาแล้วแน่นอน ฮาๆๆๆๆๆๆๆๆๆๆๆๆ

หลังจาก หมดเวลา 10 นาทีเราก็ไป ห้อง Google ต่อ

รอบนี้เหมือนเช่นเคยเล่าปัญหาใส่เลยครับ อาจารย์เราไม่รีรอ และ เราก็ได้คำแนะนำสำคัญและ keyword มาเช่นกัน

1. ทำยังไงก็ได้ให้ ใบอนุมโมทนาบัตรเราน่าเชื่อถือมากสุด (JWT มาแน่ๆ) เพราะมันสำคัญมาก
2. เราต้องมองเรื่องธุรกิจด้วยครับเพราะกรรมการจะมองเรื่อง Model Buisiness มากๆ และคำถามก็เกิดขึ้นกับพวกผมว่า สายบุญเก็บเงินยากเหมือนกันนะ
3. พี่ตี๋บอก ค่า fee ที่เป็นสนับสนุนเราก็ต้องมีด้วยยิ่งดี และ เอาเรื่อง ส่งใบจริงมาบ้านเก็บค่าส่งไปด้วยเลยครับ คือให้เห็นว่าเราทำเงินได้แน่ๆ มันสำคัญ
4. เราต้องเอาไปชนกับคุณกระทิงด้วย เพราะงั้นเราต้องมัดใจให้ได้
5. พี่หนึ่งจะใส่ผ้าเหลืองมาไหม๊ครับ ฮาๆๆ คือ ถ้าdemo เสร็จ นิมนต์หลวงพ่อมาด้วยคือ เอารางวัลไปเลย
6. โวยยยเกือบลืม LINE PAY พี่ครับบบบ LINE PAY Sanbox มีปัญหา พี่ตี๋บอกเดี๋ยวปรึกษาพี่เอก ได้เลยครับ. แต่สุดท้ายคือ ไปท้า production นั้นละ

สรุปวันที่ 7
1. เราได้มา 2 คะแนนละ มันจะเป็นตัวตัดสินให้ไปบวกเพิ่มวัน Demo Day เพราะมันบ่อยมากที่ ทุกทีมเฉือนคะแนนกันและชนะกลับมาด้วย คะแนนของวันที่ 7

2. ควรพกดวงมาด้วยเพราะ เราต้องจับฉลากลำดับการนำเสนอ

3. การทำเวลาเป็นสิ่งสำคัญ เราต้องรีบตัดสินใจใหม่เพราะของเราเยอะมาก และถ้าไม่ทันมันยิ่งทำให้เราแพ้ได้ทันที เพราะ 5นาที ปั๊ป คือจบทันที

4.การหา Keyword ของ Mentor คือ จิกซ่อ ที่ไม่มองข้ามได้เลย เพราะถ้าเรา น้ำเต็มแก้ว และไม่วิเคราะห์ อาจทำให้เราพลาดมากๆ

5. อิ่มมาก อิ่มเกินนนนไปแล้วว โดยเฉพาะ น้องโผ้ม

หลังจากเสร็จเราก็ได้ขอคำปรึกษาและพูดคุย แก้ไขระบบปรับปรุงซองให้สวยยิ่งขึ้น แถมมมมมม วาดโครงสร้างการแชร์ จนสามารถ ส่ง Share ได้และจ่ายเงินได้และ

วันที่ 9–13

ขอเปิดด้วยภาพนี้เลย โต๊ะทำงานผมเองและ ด้วยความที่เราต้องทำงานไปด้วย และ ปั่นกฐืนไปด้วย อารมณ์คือ ผมก็ บอกเต้ว่าถ้ามีอะไรยกมาถามได้เลย คุยเยอะๆเลยนะ

และนี่คือสิ่งที่เขาเลือกแล้ว 555555555555 + มันยกมาจริ๊งงงงง มันยกมาหมดเลย

ถ้าทุกท่านสังเกตุ ใช่แล้ววววว ผมใช้ VUE Bootstrapเป็นหน้าบ้านครับ. ซึ่ง มันง่ายและคล่องมือผมด้วยครับ

และถ้าใครอยากลองเริ่มต้นพัฒนาลองอ่านบทความนี้ก็ได้นะ

สร้าง Vue.js app และทำการ Deploy ด้วย Firebase Hosting

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

แต่ส่วนของ Front end จะมีประมาณนี้

1. ทำยังไงก็ได้ให้ UX UI มันสมูทททททที่สุดดดด ห้ามให้ User เปิดหลายหน้า มันรก คนที่จะใช้อายุก็เจนเราขึ้นไปอะ
2. อย่าเอาทุกอย่างไปไว้บน LIFF การทำ Chatbot ควรเติมเต็มสิ่งที่มันเป็นด้วย
3. ลดเรื่องการนำสายตาอย่าให้ ยึกยีกเยอะ
4. เบรกเต้จากพลังงานของมัน เพราะ ส่วนสำคัญเลยการทำงานเลย ถ้าเราไม่คุมกระแสของงานที่ควรจะเกิดขึ้น มุ่งเน้นไปทาง ความต้องการตัวเองก่อนโดย ไม่มี แพลน มันจะทำให้งานเดินช้า และสุดท้ายนี้คือ คุณต้องรู้จัก Agile

Back end

1. วิเคราะห์การเก็บข้อมูลจากทุกสิ่งที่เกิดขึ้น
2. ทดสอบการทำงานของ API ทุกอย่าง
3. เรื่องการ Generate รูป ที่ต้องม้วนต้วนไปเก็บบน Storage
4. Logic ในการ เอา Verify รูป ที่ต้องใช้ Google Cloud Vision และ สร้างความเชื่อมั่นเรื่องของ JWT (ยุ่งยากจริงๆอะ จนก่อนแข่ง 1 วันยังลุ้นอยู่เลย)

• ทำไมต้องเก็บบน Firebase Storage นั้นก็เพราะ Google บอกว่าต้องมาจากแหล่งที่น่าเชื่อถือ โดยตอนแรกผมเอา Server ผมมาเก็บไฟล์รูป มันไม่ยอม แต่จำ Message ไม่ได้แล้วนะ

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

วัดชินวราราม