มาหาถ่านเติมไฟกับงาน Firebase Dev Day 2018

และแน่นอนในปีนี้มี session ในตำนานด้วย

Image for post
Image for post

งาน Firebase Dev Day ในครั้งนี้ จัดขึ้นในวันอาทิตย์ที่ 7 ตุลาคม ที่ glowfish ช่องนนทรีจ้า เรียกได้ว่าเดินทางไปสะดวกมาก ไม่โดนฝนเพราะตัวตึกเชื่อมกับ BTS เลย ไม่หลงแน่นอนจ้า

Image for post
Image for post

เราลองทำ Vlog สำหรับงานนี้ด้วยนะ เข้าไปติชมกันด้ายยยยย~~

ปล. ช่วงสองนาทีแรกเป็นการเดินทางไปที่จัดงานเนอะ ตัววิดีโอสั่นๆนิดนึง ข้ามได้ๆ อีกข้อ พอดี drive เราเต็ม ไฟล์เอาลง Youtube ที่ได้มานั้นเลยไม่ชัดเท่าไหร่เลย เดี๋ยวอัพลงเพจอีกทีแบบชัดๆน๊าาาาา

Welcome Remarks: Wittaya Assawasathian- GDG Thailand

Image for post
Image for post
  • ถ้าใครมีเรื่องอยาก sharing ก็เขียนบล็อกแล้วแชร์ลงในกลุ่ม firebase developer group thailand ได้เลยยยย
  • มี GDE คนใหม่ เป็นสายเว็บเนอะ นั่นคือเฮนรี่นั่นเอง ซึ่งเป็น GDE ที่อายุน้อยที่สุดเลย
Image for post
Image for post
  • แล้วเขามี Thai Developer Survey ก็ครอบคลุมทั้ง developer, startup จนไปถึงนักศึกษา เป็น survet audient ว่าใครทำอะไร มีผลงานอะไร สนใจอะไรเป็นพิเศษ แล้วจะมีสัมภาษณ์เดือนละคนด้วย
กรอกผ่านตรงนี้ได้เลยน๊าาาา
  • Google Cloud Submit จัดวันที่ 9 ตุลาคมที่เซนทรัลเวิล์ด แน่นอนว่าเต็มแล้ว และบล็อกก็ยังเขียนไม่เสร็จแน่ๆ
  • Cloud Startup Program กรอกข้อมูลเพื่อรับเครดิตรายปีฟรีจ้า สแกนตามนี้เลย
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
  • Coursera มี course Google Cloud ลดราคาจ้า หมดสิ้นปี้นี้นะ เราไปส่องมาแล้ว
Image for post
Image for post
  • มีงานเยอะแยะมากมายในช่วงเดือน 11 อันได้แก่ Android Dev Submit 7–8 Nov. และ Chrome Dev Summit 12–13 Nov. และช่วงนั้นจะมี GDG Submit ด้วย ให้มาแบบทีเดียวไม่ต้องเสียเที่ยวกัน
  • และวันที่ 9 เดือนนี้ก็มีการเปิดตัว Pixel 3 ที่มีคนลงคลิปรีวิวเฉยเลยงงมาก แล้วพวก Google Home ต่างๆ โดยจะเน้นไปที่ตัว product ที่มันใช้ร่วมกันกับ Google Assistant จริงๆเน้นเจ้านี่นะ ซึ่งมันจะรองรับ voice, typing, tab, google leans และเริ่ม roll-out ลง device ต่างๆแล้ว และแน่นอนจะมีบทบาทมากขึ้น (แต่คิดว่าตอนบล็อกนี้ออกน่าจะได้อ่านข่าวกันไปบ้างแล้ว)
  • และเจ้า Firebase สร้าง action on google ได้นะ
  • วันนี้มีเกมส์ชิงรางวัลด้วยนะ
Image for post
Image for post
  • ขอบคุณ Glowfish เป็น partner สำหรับสถานที่ในวันนี้ และงานต่อๆไปอาจจะได้มาจัดงานที่นี่อีก อันนี้ต้องติดตามตอนต่อไปเนอะ
Image for post
Image for post
  • งาน GDG Dev Fest จัดวันเสาร์ที่ 20 ตุลาคม ที่ CU Innovation ซึ่งงานนี้ทั่วโลกจะจัดพร้อมๆกัน มีพวก sandbox และหลายๆอย่างให้เราได้เล่นกัน คิดว่ารายละเอียดน่าจะก่อนคุณๆได้อ่านบล็อกนี้แน่นอนอ่ะ ส่วนตั๋วจิ้มด้านล่างจ้า
  • สุดท้ายก่อนกลับ เอาสายคล้องคอมาแลกเสื้องานนี้กลับบ้านนะ

What’s New in Firebase: Jirawat Karanwittayakarn- GDE Firebase

Image for post
Image for post
  • ตอนนี้มี 18 products ที่ออกมาให้เราใช้เต็มตัว โดยมี 3 ภารกิจหลัก คือ Build your app, Improve app quality และ Grow your business แน่นอนว่า Firebase รักทุกคนนะ เพราะมีทุก platform ครอบคลุม ไม่น่าจะเป็น iOS Android Web Unity และพวก IoT ก็ใช้งานได้
Image for post
Image for post
  • ตอนงาน Google IO ต้นปีมี 1.2 ล้าน active app ที่ใช้ ตอนนี้เป็น 1.3 ล้านแล้วจ้า ซึ่งจะถูก announce อย่างเป็นทางการในงาน Firebase Submit
Image for post
Image for post
  • ในไทยก็มีใช้เยอะเช่นกัน บางแอปถูกโหลดไปหลักสิบล้านด้วย คนถ่ายรูปกันเต็มเลย
Image for post
Image for post
Image for post
Image for post
  • งานนี้ตอนแรกจะให้กรอกแบบสอบถามเพื่อรับบัตรเนอะ ซึ่งคน 500 คนใช้เจ้า Realtime Database มาเป็นที่หนึ่งเลย รองมาก็ Authenfication และ Cloud Storage ตอนแรกพี่ตี๋คิดว่า Crashlytics มาเป็นอันดับ 1 ซะอีก
Image for post
Image for post

มาเริ่มไล่ทีละตัวจาก 3 ภารกิจหลัก

Build your app

  • Firebase Admin จริงๆมาสักพักแล้ว เป็น sdk สำหรับชาว backend
Image for post
Image for post
  • Cloud Firestore : sorting และ filter ได้, beta limit ขยับจากแสนเป็นล้าน, support multi-tab offline ได้แล้ว โดยใช้จุดศูนย์กลาง offline เดียวกัน ไม่ต้องไปโหลดมาเก็บเพิ่ม, มี auto complete ที่หน้า security rule
Image for post
Image for post
Image for post
Image for post
  • Authenication : passwordless หลังจาก user confirm email เสร็จ สามารถกดเข้าแอปได้เลย ไม่ต้องใช้รหัสผ่าน
  • Cloud Function : v2.0 stable มาแล้วจ้า (2.05 คือ version ปัจจุบัน) สามารถ deploy ลงต่างประเทศได้ แต่เจ้า realtime database ได้แค่ที่เมกานะ, adjust timeout และ memory ผ่าน code ได้, มี tab health ให้เราเข้าไป monitor ได้
Image for post
Image for post
Image for post
Image for post
  • Cloud Messaging : FCM report dashboard, ใครใช้ GCM ย้ายไปใช้ FCM นะ เพราะมันเลิก support เมษาปีหน้า
  • ML Kit : free 1000 requests/month/API, จะมี face contour และ smart reply เข้ามาในอนาคตอันใกล้ในงาน Firebase Summit
Image for post
Image for post
  • Hosting: CLI >= 4.2 (ปัจจุบันคือ 5.0.1), deploy เฉพาะไฟล์ที่เปลี่ยนไป, support multiple sites ในโปรเจกเดียว เย้ ใช้ database หรืออะไรต่างๆด้วยกันได้เลย ไม่ต้องแยกโปรเจกหล่ะ
Image for post
Image for post
Image for post
Image for post

Improve app quality

  • Crashlytics : 3 พันล้าน device บนโลกที่แอปเพิ่มเจ้านี้ในเครื่อง, มีการรวมร่างของ Analytics เข้ามา คราวนี้เราก็จะตามได้ว่า user เจออะไร แอปถึง crash, JIRA + Crashlytics สร้าง issue ตอนแอป crash บน JIRA แต่นี่กดสมัครไม่ทันไง ฮืออออ, สามารถเลือกดูเฉพาะ device และ OS ได้, export data ไป BigQuery ได้ เราเห็นแล้วงงๆเลยยังไม่ได้กด 555
Image for post
Image for post
Image for post
Image for post
  • Test Lab : ช่วยทำ UI Test แล้วอัดวิดีโอให้ และมี plugin for fastlane เพื่อ integrate กับ test lab
Image for post
Image for post
  • Performance : ดู network และ code ที่ทำงานนานๆ, deep drive เพื่อดู opt
Image for post
Image for post

Grow your business

  • Remote Config : เก็บ key value ตอน app launch ไม่ต้อง deploy ใหม่, มี change history บอกว่าใครแก้ค่าอะไรไปบ้าง เก็บค่าแต่ละ version เพื่อย้อนกลับได้ ยังกะ git เลย
Image for post
Image for post
  • Analytics : project label reporting สามารถรวมทั้ง iOS และ Android เพื่อดูรวมกันได้
  • In-app Message : อันนี้น่าจะของใหม่เลยนะ ทำงานตอน app active เท่านั้นนนน สามารถ custom ได้ ใส่ deeplink url ผ่าน console ได้ และ no need coding ทั้งงานสตั้นกันหมดเลย ฮ่าๆ
Image for post
Image for post
Image for post
Image for post

มี 4 ขั้นตอน คือ

  1. ออกแบบหน้าจอ
  2. target user จาก prediction และ analytics
  3. Scheduing ปล่อย campeign ได้ตลอดเวลา บอกให้เห็นแค่ครั้งเดียวหรอเห็นกี่ครั้งก็ได้ ยังกับ Adwords เลย ฮ่าๆ และ ticker ผ่าน Analytics ได้
  4. Conversation Event เมื่อ popup แล้ว user ทำอะไรบ้าง
Image for post
Image for post

Format มันมี 3 ตัว ดังนี้

Image for post
Image for post
  • Firebase Submit มีวันที่ 29 ตุลาคม
Image for post
Image for post
  • โปรแกรม alpha ใครไม่สมัครต้องลองแล้วหล่ะ แต่มีเวลาเล่นไหมอีกเรื่อง 555
Image for post
Image for post
  • ถ้าชาว Android อยากช่วย contribute Firebase SDK Android ก็มาเลยทางนี้ ในเดือนนี้ก็ PR รับเสื้อจาก Hacktoberfest กันไป
Image for post
Image for post
  • ตอนนี้มีช่องทางใหม่ให้ติดตามใน medium และ youtube นะ
  • ก่อน demo มีการทิ้งคำคมไว้ด้วย
Image for post
Image for post
  • มี demo deploy Firebase Hosting ให้ดูด้วย ว่าเร็วขึ้นขนาดไหน และแยก site ในการ deploy ได้ด้วย ซึ่งมีคลิปอัดแยกไว้ ตามดูใน Vlog เอานะ
Image for post
Image for post

และ demo ตัว In-app Message ด้วย

ML Kit for iOS developers: Kajornsak Peerapathananont- Agoda

Image for post
Image for post
  • หลักการทำงานแบบง่ายๆ คือ เอา data ไปให้หุ่นยนต์ คือเจ้า AI คิดแทนคน เรามองว่าสไลด์หน้านี้ดูปุ๊ป เก็ทเลย
Image for post
Image for post
  • ใกล้ๆตัวเราก็จะมี Google Lens ถ้าเราใส่ data ให้มันเยอะขึ้น ทำให้มัน learning ได้มากขึ้น แล้วมันจะฉลาดขึ้น หรือ smart reply ใน gmaill ที่ขึ้นว่าควรตอบอะไรดี ก็ตาม
  • เขาบอกว่า AI ไม่ได้มาแทนคนนะ มาช่วยคนและเราสามารถอยู่ร่วมกันได้ (มันจะมีมนุษย์ป้าบางคนที่เข้าใจว่ามันมาแล้วคนตกงาน อธิบายไปเขาก็เงียบๆไป 555)
  • แบบ on-device คือ สามารถทำงานให้ user ได้ทันที โดยไม่ต้อง online
  • มีคำกล่าวว่า Doable, but hard ทำได้ แต่ยังยากอยู่นะ สำหรับการทำแอป machine learning ในมือถือ
  • ในส่วน library ฝั่ง Android ใช้ C และ C++ ในการ implement ส่วน iOS control GPS ได้ แต่ยาก เลยมีเจ้า TensorFlowLite มาเป็นตัวกลาง แต่ก็ไม่ได้ช่วย mobile developer ให้มีชีวิตง่ายขึ้น จึงมี ML Kit ออกมาเป็น library ให้เอาไปใช้งาน
Image for post
Image for post
  • มี flow ให้ดู ใช้ Objective-C++ จบแบบหัวร้อนกันไป
Image for post
Image for post
Image for post
Image for post
  • ML Kit ในตอนนี้รวม 5 อันยอดนิยมมาให้ใช้กัน เช่น image labeling สามารถทำ auto hashtag ของรูปให้ user จิ้มเลือกได้ ไม่ต้องพิมพ์เอง ซึ่งส่วนใหญ่เป็นรูปทั้งนั้นเลย เป็น VisionImage
Image for post
Image for post
Image for post
Image for post
  • ตัวอย่าง ถ้าเราทำแอป OCR แปลงรูปเป็น text ก่อนแล้วค่อยแปลภาษา และ text ที่ได้ ไม่ใช่ text ธรรมดา แต่เป็น visionText บอกได้ว่า text นี้มันอยู่พิกัดไหนในรูป
Image for post
Image for post
  • อันนี้เป็นตัวอย่างของ Image Labeling ก็จะบอกว่ารูปนั้นมันเห็นเป็นอะไรบ้าง แล้วเราต้อง implement มันอย่างไร
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
  • ในส่วนตัวอย่างจะมีการอธิบายการ implement แบบคร่าวๆ ซึ่งถ้า on-cloud จะมีคำว่า cloud อยู่ข้างหน้า
  • เจ้า face detection จะมีเฉพาะ on-cloud เท่านั้น เนื่องด้วยเรื่อง security ตัวอย่างเลยลองกับรูปที่มีคนเยอะๆ นั่นคือ BNK48 นั่นเองงง (ไปงานไหนเจอพวกแกเกือบทุกงานเลยนะ)
Image for post
Image for post
Image for post
Image for post
  • face contour เดี๋ยวจะปล่อยออกมาแล้ว ประมาณนี้
Image for post
Image for post
  • landmark อันนี้ on-cloud อย่างเดียวนะ สามารถมีหลายที่ได้นะ เช่น ไอเฟลจริง ไอเฟลจำลอง
  • QR Code มีหลายรูปแบบมากๆเลย เช่นแบบ WiFi สแกนเพื่อต่อ WiFi
Image for post
Image for post
  • และเราสามารถ custom model source ได้
  • ตัวเดโม่นั้น ถ้าใครไปงาน Google I/O Bangkok จะเห็นแอปแบบนี้คร่าวๆเนอะ หน้าตาคล้ายกันเลย เป็นเจ้า listview แล้วกดเข้าไปเจอหน้ากล้องทุกอัน แต่ implement ของต่างกัน มีตอนแบบมันเบลอๆนะ มองนํ้าเป็นไวน์และแอลกอฮอลเฉยยย แต่จำนวนคนนี่แม่นอยู่ ส่วนห้องมองเป็นห้องจัดแสดงดนตรี ซึ่งเราว่าไม่แปลก เพราะ fungjai lab เคยจัดที่นี่จ้า
Image for post
Image for post
Image for post
Image for post
  • ในส่วนของบล็อกดูใน Firebase Thailand ได้นะ

คิดว่าตอนสองเดี๋ยวคงใกล้ปล่อยอะไรงี้มั้งนะ…

Adding Firebase to your Flutter app: Tanitpon Paniwan- Apppi

รู้สึกว่า Flutter ก็สนุกดีนะ แถมบางอย่างง่ายกว่า Android เฉยเลยยย เหมือนมันยุ่งกับ UI น้อยกว่า เป็น session ที่สนุกและเปิดโลกมาก

Image for post
Image for post

speaker ได้มีการคาดเดาก่อนว่าคนที่มาเนี่ยเขารู้จัก Flutter ไหมนะ

Image for post
Image for post
  • ตอนนี้เจ้า Flutter จะ stable แล้วนะ หลังจากออก version alpha และ preview ไป
  • ระหว่างนั้นเขาก็ overview ให้เราฟังด้วย เรามาเรียนรู้ Flutter อย่างง่ายๆไปพร้อมกันเถอะ ซึ่งเราน่าจะพอรู้กันอยู่แล้วเนอะว่าใช้ภาษา Dart
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
  • มันจะ render เป็น visual key ออกมา จะต่างกับตัวอื่นๆตรงนี้
Image for post
Image for post
  • flutter มองทุกอย่างเป็น widget มี 2 แบบใหญ่ๆ คือ stateless แบบโชว์หน้า UI ขึ้นมา และ stateful มีการเก็บ state และ มี lifecycler เอ๊ะเหมือน Vue.js เลยนะ
Image for post
Image for post
Image for post
Image for post
  • มีคนรวม library ให้ สำหรับการเอาเจ้า firebase มาใช้ใน flutter
Image for post
Image for post
  • ใน document ของ firebase มี flutter ด้วย แน่นอนค่ะว่ามันมี tab เดียว ติดตามต่อตอนไปได้ที่งาน Firebase Submit ว่าจะ update อะไรมาเพิ่มไหมม
Image for post
Image for post
  • มีการ live code ให้ดู เป็นเว็บแอปตัวนึง ที่ login โดยใช้ Firebase Authentication เป็น stateless และหน้า chat ก็จะเป็นเจ้า FireStore เป็น stateful
  • structure folder หลักๆมี Android, iOS และของ Flutter เอง ทุกอย่างจะสร้างจาก build folder
Image for post
Image for post
  • VS Code มี plug-in ของ Flutter ด้วย เย้
Image for post
Image for post
  • มีการแบ่งหน้าที่การทำงาน และตัวแปรที่มี _ นำหน้าเป็น private มั้ง…
  • ตอน live code ไม่ได้จดนะ มันจะแบ่งเป็น component และไม่แตะหน้า UI อะไรเลย เพราะใช้เจ้า Material เอาเป็นตัวขึ้น UI อย่างการสร้าง appBar ฝั่ง Android ต้องใส่บนใน layout แล้วมา implement ในโค้ด แต่ Flutter นี่เพิ่ม widget เข้ามาแล้วใส่ของ จบ ง่ายมากอ่ะ
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
  • อยากไปดูโค้ดย้อนหลังเข้าไปดูได้ที่นี่เลยจ้าาา
Image for post
Image for post

Lunch Time เป็นของร้าน kuppadeli หยิบมัสมั่นไก่มา อร่อยอ่ะ แต่เสียดายนิดนึง ที่ร้านแถวนั้นปิดหมด และเข้าใจว่าข้างล่างนั้นน่าจะมีร้านเปิด แต่ขี้เกียจลงไปซื้อกาแฟอ่ะ ฮืออออ ตาร์บัคก็ฝั่งตรงข้ามอีก

Image for post
Image for post

ปล. แอบเห็น speaker post รูปให้อเมซอนช่วยแก้ง่วงอยู่ 555

แล้วในงานมีขายเจ้า Android Collectible Series 5 อันเดียวกับงาน Androud Bangkok แต่คิดว่าชุดนี้เราคงจบแค่นี้แล้วแหละ ….. โดนแม่ด่าแย้ววววว แล้วอันที่พีคก็ดันได้เจ้าเต้าหู้ไปแล้ว ที่อยากได้ก็สีส้ม โครม สีทอง สีเงิน อะไรงี้มากกว่าอ่ะ ;_;

Image for post
Image for post
มือถือดี๊ดีเนอะ ละลายหลังเนียนเชียว แต่ข้างหลังเขาทำไรกันอ่ะ 555

กลัวคนจะง่วงหลังทานข้าวเที่ยง เลยมีแจกเสื้อ collection ใหม่ในงาน แค่ตอบให้ถูกว่า โลโก้นี้คือของ product ใน Firebase ตัวไหน

Image for post
Image for post

สุดท้าย ไม่ได้อีกแล้ว ฮืออออออ แถมคนได้ที่สองที่สามเป็น speaker อีก ดังนั้นยกผลประโยชน์ให้กับที่สี่ที่ห้าไป เย้

Image for post
Image for post

ส่วนเสื้อ Firebase สีเหลืองนั้น ตามธรรมเนียมเขาจะให้ speaker ใส่เท่านั้นนะ แล้วใครเป็น speaker ได้บ้างหล่ะ เป็นคนที่ contribute กับ commulity บ่อยๆ เช่น เขียนบล็อกงี้ หรือช่วยตอบคำถามต่างๆก็ได้นะ ถ้ามีหัวข้อที่อยากพูดก็กระซิบบอกพี่ตี๋ได้นะเออ

Bringing Firebase Admin SDK to your sever: Henry Lim- GDE Web Technology

จากปีก่อนที่ได้ยินว่าเขาเป็น Firebase Fan Boy

ตอนนี้เป็น GDE Web แล้วนะ ลองอ่านบล็อกเขาดูได้ ประทับใจมากๆ

Image for post
Image for post

ก่อนอื่นมาการถามก่อนว่าใครเป็น front-end กับ back-end บ้าง เอา gag มาฮาดีนะ get เลย 55555 (เหมือนเราเคยเห็นมาก่อนหรือเปล่านะ ไม่แน่ใจ แต่เห็นทีไรฮาทุกทีแน่นอน)

Image for post
Image for post
  • Firebase Admin เป็น SDK สำหรับชาว backend โดยเฉพาะ
Image for post
Image for post
  • ถามว่ามันสามารถทำอะไรได้บ้าง ตัวอย่างก็เช่นให้ user สับตะไคร้ เอ้ยยย subscriptions แล้วยิง noti ให้ user ตอนมีอะไรออกใหม่ ประมาณนี้
Image for post
Image for post
  • demo นั้น โชคดีที่มาหลังทานข้าวเที่ยงเสร็จแล้ว คือเฮนรี่ชอบกินต้มยำกุ้งมาก เลยอยากรู้ว่าร้านไหนขายต้มยำบ้าง
Image for post
Image for post
  • ก่อนอื่นเลยใช้เจ้า node.js เพิ่มเจ้า sdk ของ Firebase Admin และ Cloud Function ลงไป
Image for post
Image for post
  • แล้ว custom permissions model และ control access with security rule ให้เฉพาะ admin เขียนข้อมูลลงไปได้เท่านั้น
Image for post
Image for post
Image for post
Image for post
  • ตอน demo เปิดหน้าเพิ่ม email ของแอดมินขึ้นมา แต่ยังไม่ได้ทำอะไร เขาโชว์หน้าเพิ่มข้อมูลแล้วลองเพิ่มดู ซึ่งเพิ่มไม่ได้ เพราะไม่ใช่แอดมินเนอะ
Image for post
Image for post

ไปเพิ่ม email แอดมินอีกหน้านึง พอลองเพิ่มใหม่มันสามารถเพิ่มได้ เพราะเป็นแอดมินแล้วนั่นเอง

  • FCM ใช้ในการส่ง message ตาม location topic ต่างๆ เช่น อยู่ที่โตเกียว ก็จะได้ noti ของโตเกียว จะไม่ได้ของที่อื่น เฮนรี่เลยโชว์เพิ่มข้อมูล แล้ว noti จะส่งต่อเมื่อเพิ่มข้อมูลสำเร็จ ซึ่ง noti มันจะขึ้นในเครื่องได้ด้วยนะ แต่เหมือนถ่ายไม่ติดมั้งเลยไม่มีรูปให้ดูจ้า
Image for post
Image for post

ก่อน session ต่อไป มีบุคคลในตำนานได้ come back แปปๆให้พวกเราได้คิดถึงกัน พี่หนูเนยนั่นเองงงงงงง เห็นพี่ตี๋ดันพี่เนยมาหน้าเวทีเลย ฮ่าๆ แน่นอนว่าเซอร์ไพร์สมาก เลยไม่มีวิดีโอในส่วนนี้ 555555

Image for post
Image for post

Secure your Cloud Firestore like a Pro: Thanongkiat Tamtai- 20scoops

จบ session นี้คุณต้องเลือกข้างกันหน่อยหล่ะ ว่า ทีมRTDB หรือ ทีมFirestore (ว่าแต่ทำไม Firestore ไม่มีคำเขียนย่อๆเหมือนฝั่ง realtime เขานะ หงุดหงิดในการจดมาก 55555)

Image for post
Image for post

น้องเขาบอกว่า session นี้ไม่มีสาระเท่าอันอื่นๆ ไม่จริงอ่ะ 555 คือ น้องป้ายยาให้คนไป Firestore ได้เลยอ่ะ ยังไงอ่ะเหรอ

  • ตอนแรกน้องเกริ่นก่อนว่า ทำงานบริษัท startup ทำของเริ่มจาก 0 ทั้งหมด แล้วเจ้า Realtime Database กำลังมา เลยหยิบมาใช้เป็น database หลักของ product เรื่อยมา จนมาเดือนที่ 7 เนี่ย Firebase ออก Firestore มา ซึ่งมันตอบโจทย์ product มากกว่า (ที่เราจำได้ที่เคยเห็นน้องเล่า คือทำเสร็จแล้วเจ้า Firestore มา แบบเหวอเลยอ่ะ ฟิลแบบทำเสร็จแล้วเอ็งเพิ่งมาอ่ะ) ความรู้สึกเหมือนคนหลังหัก (ถ้าให้เราเปรียบแบบเห็นภาพ ประมาณว่า ซื้อ photoset แบบสุ่มแล้วไม่ได้โอชิ แล้วพ่อค้าขาย full comp แล้วราคาถูกกว่าหรือไล่ๆกัน อันนี้สำหรับเมมแบบกลางๆอ่ะ) แต่สุดท้ายก็ migrate ไป Firestore นะ
  • มีการเล่าประวัติด้วย Firebase เคยเป็น startup แถมได้ series A ด้วย แล้วปี 2015 Google ก็มาซื้อไป
  • ส่วน Firebase เป็นลูกของ Realtime Database และ Cloud Datastore ซุ่งมันคล้ายๆกันกับ Mongo DB แต่ไม่มีเจ้า Realtime Database และ SDK เรียกได้ว่ารวมข้อดีของแต่ละคนเข้าด้วยกันนั่นเอง
Image for post
Image for post

ความแตกต่าง

จริงๆควรทำเป็นตารางเลยนะ กลัวคนอ่านงง อีกอย่าง ขี้เกียจเขียนเยอะแยะซับซ้อน

Image for post
Image for post
Image for post
Image for post
ขอทำเป็นตารางแล้วกันนะ

How to Migrate

Image for post
Image for post

1) data structure : เจ้า Realtime เก็บเป็น json tree ให้ออกแบบเป็น flated design ให้สะดวกในการอ่านให้มากที่สุด แต่เจ้า Firestore มันเก็บเป็น collection ทำให้เราเลือก type ที่นำมาใช้งานได้มากขึ้น วิธีย้าย map อันที่ relation กันมาอยู่ด้วยกัน

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

2) Security Rule : ดูชั้นลูก และดักเป็น case เหมือน cloud function

Image for post
Image for post
Image for post
Image for post

3) Move Historical Data : backup ให้วันละครั้ง, เขียน script โดยใช้ Admin SDK, ถ้าในเคสที่ไม่สามารถปิด server เพื่อหยุดบริการได้ ให้ cloud trigger ไปที่ Firestore ได้เลย และลบ code เก่าๆจาก Realtime Database และ recheck ด้วยนะ

Image for post
Image for post
Image for post
Image for post

Building Natural Conversational Chatbot: Jirawat Karanwittayakarn- GDE Firebase

จริงมีในอีกรูปว่ามี session นี้ แต่แน่นอนว่าเราไม่ได้อ่านเลยไม่รู้มาก่อน 555

Image for post
Image for post

ทั้งหมดที่พี่ตี๋พูดไป อันนี้อันแรก

Image for post
Image for post

และอันนี้ใน session

Image for post
Image for post

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

  • เนื่องจากมีบล็อกก่อนหน้านี้ แล้วยังเหลือต่อ Realtime Database กับ Firestore นี่แหละ
Image for post
Image for post
Image for post
Image for post
  • ก่อนอื่นเข้าไปที่ dialogflow เพื่อสร้างเจ้า Agent คือตัวกลางระหว่างเรากับ intent ต่างๆ ตามความเข้าใจของเรานะ ซึ่งเราจะใช้โปรเจกที่มีอยู่แล้วก็ได้นะ
Image for post
Image for post
Image for post
Image for post
  • เปิดมาจะพบเจ้า Fallback Intent คือ คนพูดกับบอทแล้วมันไม่ get เขาเตรียมส่วนนี้มาให้แล้ว ซึ่งอยู่ใน response Welcome Intent อันนี้ต้องสอนมันเนอะ เป็น machine learning ภายใน ไม่ต้องเน้นปริมาณในการใส่ เน้นความหลากหลายนะ
Image for post
Image for post
Image for post
Image for post
  • สร้าง intent ใหม่ เลือก Training Phase ใส่คำที่เราต้องการสอนบอท ว่าพิมพ์อะไรเป็นอันนี้ และใส่ respinse ลงไป จากนั้นอย่าลืม save และรอจน training complete นะ
  • และสร้าง intent ต่อจากเดิม โดยกดปุ่ม add follow-up intent ใส่ค่าลงไป
Image for post
Image for post
Image for post
Image for post

มันแยกได้ด้วยนะว่าเป็น 2 ค่า เราสามารถติ๊กถูกหน้า parameter ค่านั้น เพื่อ require ค่านั้นจาก user ส่วน prompt ใส่เมื่อในกรณีที่ user ไม่ได้ใส่ค่านั้นมาแล้วให้ทำอะไรต่อ

Image for post
Image for post
Image for post
Image for post
  • จากอันนี้ พอ user ใส่ค่าครบตามที่เราต้องการแล้วนั้น ก็ต้องสร้างเจ้า yes no เพิ่ม เพื่อ confirm สิ่งที่ user กรอกไป ซึ่งโดยรวมมันจะเป็นแบบนี้
Image for post
Image for post
  • ถ้า user say yes แล้วเราจะเอาค่าที่ user กรอกมาจากไหนหล่ะ สามารถดึงค่าจาก context ได้เหมือนใน Android เลยจ้าาาา
Image for post
Image for post
  • จากนั้นก็ fulfilment เปิด API ภายนอก ตรง inline editor แล้วเรา init firebase admin ใส่ให้ function ต่างๆของเราเรียบร้อย
Image for post
Image for post
Image for post
Image for post
  • เราสามารถ integrate กับ platform ต่างๆ เช่น LINE

ด้วยความที่เวลามันงวดมากเข้าไปทุกที พี่ตี๋ก็รีบไง แล้วเจ้า VS Code มันขึ้น autocomplete มา แล้วมันไม่มีของ firebase มั้ง กด enter ทีชีวิตเปลี่ยนเลยจ้า ต้องลบพิมพ์ใหม่ แล้วเจ้าหน้า inline editor มันช้ามาก มีมิตรสหายท่านหนึ่งบอกพี่ตี๋ให้ scroll ขึ้นลงๆๆๆๆๆ เพื่อทำให้เร็วขึ้น เลยเห็นพี่ตี๋แอบหัวร้อนเบาๆจากสาเหตุเหล่านี้

Image for post
Image for post

ปล. เหมือนจะมีตอน 3 ของซีรีส์นี้ยังไงไม่รู้แหะ ….

Getting Started with Cloud Functions for Firebase using Kotlin JS: Theerasan Tonthongkam- Eatigo

จริงๆชื่อเล่นเขาชื่อต๊ะ ด้วยความที่คนต่างชาติเรียกยาก เลยเป็นต้าแทนจ้า

Image for post
Image for post

มิน่าทำไมถึงมีบล็อก KotlinJS กับ Firebase ออกมา 555 ความคาดหวังของเราใน session นี้น่าจะเป็นเรื่องความเจ็บปวดของเจ้า KotlinJS แน่ๆ

เท่าที่ฟังนั้นมีอาการตึ๊บๆเล็กน้อย และไม่ได้จดอะไรมากมาย เนื่องจากมันมีความซับซ้อนพอสมควรเลยแหละ

  • แน่นอนว่า cloud function นั้นก็ใช้ของ Firebase ซึ่งเป็น Serverless Architecture
Image for post
Image for post
  • สาเหตุที่เลือกเอา Kotlin มาแปลง เป็นเพราะว่า เป็น Android Developer และเจ้า Kotlin ก็สามารถทำอะไรได้หลายอย่าง แล้วถ้ามาเขียน backend ก็ต้องเรียนรู้ node.js อีก เลยอยากจะลดกำลังภาษาลงมา
Image for post
Image for post
  • เจ้า typescript มันจะ compile แล้วแปลงเป็น js และ kotlin ก็เช่นกัน
  • แล้วเขากล่าวถึงการสร้างโปรเจกใน Intellij ซึ่งเขากล่าวแบบโค่ดไว เอาเป็นว่ากดถูกตั้งแต่อันแรกชีวิตจะดีจ้า เพราะเคยทำมาก่อน อิอิ แล้วมีกล่าวถึงเรื่อง autocomplete ของ VS Code ที่พี่ตี๋เพิ่งหัวร้อนไป session ก่อนหน้านี้ ส่วนเจ้า Intellij ชาว Android Developer จะคุ้นเคยมากกว่าเนอะ
  • เจ้าโปรเจกที่ว่าคือการสร้าง node server ขึ้นมาโดยใช้ kotlin นั่นเอง
Image for post
Image for post
  • สร้าง gradle project โดย entry point เก็บไฟล์ที่ไฟล์ .js แล้วได้เจ้า package.json ออกมา เป็นตัวบอกว่าต้องติดตั้งอะไรลงไปบ้าง
Image for post
Image for post
  • แต่ต้อง install kotlin หลายรอบหน่อย
  • ใช้คำสั่ง serve เพื่อ build บน localhost ก่อน
Image for post
Image for post
  • ต้อง validate data ก่อน 1 ครั้ง
  • ปัญหาที่เจอเยอะมาก แถมยากมาก ใน stackoverflow หรอ ไม่มีหรอกหน่าา
Image for post
Image for post

แล้วเจ้า js และ kotlin มันก็มีอะไรที่ไม่เหมือนกันอีก (เคยลองเล่น front-end ของ kotlin2js ยังไม่เหนื่อยขนาดนี้เลย)

Image for post
Image for post
Image for post
Image for post

ต่อมาเขามี demo ให้ดูด้วยยยนะ

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

และ feature ที่มีในตอนนี้

Image for post
Image for post

เราว่าพี่แกต้องมีปล่อยของรอบสองแน่ๆเลยอ่ะ มางาน Kotlin Meetup 1.2.70 ได้เลยจ้า ว่าจะไปถามอยู่ว่าเจ้า ticker ที่กดเลื่อนสไลด์อ่ะ ทำยังไง เห็นถือจอยสติก
แล้วกดๆอ่ะ

ส่วนตัวหลังจากอ่านบล็อกนั้น และฟัง session นี้ ถ้าเราทำ backend เราไปใช้ node.js อย่างเดิมดีกว่า เพราะยังไงก็ต้องรู้ js ก่อนอยู่ดี แหะๆ

Snack break จากร้าน kuppadeli เช่นเคย แต่เสียดายที่เจ้าพุดดิ้งชานมมันละลายเป็นนํ้าไปแล้ว ฮือออ แต่เจ้าแซนวิซหมูหยองพริกเผารสชาติเข้มข้นมาก แล้วชาไทยก็หอมอร่อยมากๆ

Image for post
Image for post

จู่ๆก็มีเจ้าทีเร็กซ์มาในงานด้วย มารู้ทีหลังว่าเป็นเฮนรี่อยู่ข้างในนั้น น่าจะสนุกเนอะ ฮ่าๆ

Image for post
Image for post

Firebase Code Battle: Warat Wongmaneekit — GDE Web Tech, Somkiat Khitwongwattana — GDE Android, Thanongkiat Tamtai — 20scoops

session ในตำนาน Code Battle

ก่อนเข้ารายการ Code Battle มีเกมส์เขย่า 15 คนที่ได้คะแนนสูงสุดได้ของไป เราอดได้เลย ฮืออออออออออออ เป็น swag ผ้าคาดหัวที่เรายังไม่มีเลยยยย

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

และแน่นอนว่าไม่ได้จดอะไรเลยยยย มีแต่อัดคลิปทำ vlog แล้วมีซีนฮาหลายซีนเว้ยยย

ในงานจะแบ่งสามฝั่งเนอะ web หน้าสุด Android ตรงกลาง และ iOS หลังห้อง นั่งชุมนุมกันเกิน 5 คน ……… พี่ตี๋เป็นผู้ดำเนินรายการ ตัวแอปจะเป็น login แล้วเข้าไป shakes เก็บแต้ม และให้ฝั่งนึงพูดคนละหนึ่งนาที ใครทำช้าสุดวิดพื้นสิบทีงี้

สรุปแบบสั้นๆ การ code battle แบ่งออกเป็น 2 mission คือ ทำส่วน login ด้วย Firebase Authentication แล้วตัวส่ง data ด้วย Firebase Realtime Database ตัว count จะเป็นฝั่ง Firebase Cloud Function อันนี้เป็นฝั่งหลังบ้านจ้า

ฝั่ง Android ลื่นไหลมากๆ ถึงแม้ตอนแรก buid app ไม่ลงก็ kill adb ทิ้งซะ 555 (เป็นคนฝั่ง Android เลยเอาขึ้นก่อน จริงๆเขาเรียง web Android iOS)

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

ฝั่ง web มีอาการคอมค้างแล้ว restart ใหม่ แต่ก็ยังกลับมาได้อย่างสวยงามสูสีกับฝั่ง Android เลยทีเดียว

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

ฝั่ง iOS น่าสงสารสุดเลย XCode เปิดมาจอขาว UI ที่ทำไว้หาย แถมเจอลิมิตห้าม build เกิน 10 แอปใน 7 วัน อิหยังวะ เพิ่งเคยเจอ ด้วยปัญหาต่างๆที่ถาถมใส่ฝั่งนั้น เลยโดนวิดพื้นสองรอบเลย แถมบอกด้วยว่าฝั่ง iOS ไม่มี library เลยต้องเขียนการรับค่าจาก accelerator แล้วมาคำนวณเอง แต่คนในงานก็รู้ว่าหลังจากนี้เริ่มเป็นความน่าหมั่นไส้แทน 555

Image for post
Image for post

บรรยากาศสนุกมาก แน่นอนว่า speaker มีการบลัฟกันเกิดขึ้นในหลายประเด็น 555

จากให้ทั้งสาม platoform shakes กัน พบว่ามีข้อมูลส่งเข้า Realtime Database ขึ้นมามากมาย แต่ตัว count ยังไม่ได้นับบบบ เลยต้องเขียนในส่วนการนับ count ขึ้นมาเพิ่ม และนำไปแสดงผลที่หน้าเว็บ

Image for post
Image for post
Image for post
Image for post

พอพี่ตี๋เขียนส่วนหลังบ้านที่นับ count ของการ shakes เสร็จ ก็มีการแข่งขันกัน 3 platform ว่าใครชนะ และเหตุการณ์ที่คาดไม่ถึงก็เกิดขึ้น จู่ๆฝั่ง iOS แม่งทะยานไปไกลกว่าชาวบ้านเขา คุงเอกเขย่าตั้งนานเลขยังไม่ขึ้นเลย โอโหววววว ดูโกงอ่ะ เรามีคลิปประกอบด้วยนะเออ สุดท้ายก็งี้แหละ

Image for post
Image for post

ทีนี้เปลี่ยนให้เราๆมาร่วมสนุกกัน โดยให้ตัวแทน developer แต่ละ platform มา shakes แน่นอนว่าฝั่ง iOS แค่พลิกมือถือไปมาก็ชนะได้แล้ว ไม่ต้องเขย่าเบอร์แรงขนาดนั้นก็ได้โว้ยยยยย 55555

Image for post
Image for post

สุดท้ายถ่ายรูปรวมและปิดงานจ้า

Image for post
Image for post

เสียดายเวลาไม่พอเนอะ เพราะยังไม่ได้แจกของเพิ่มเลย แต่อย่างว่าเนอะ งานต้องจบภายในหกโมงเย็น

ตอนพักเบรกก่อน code battle เราเข้าห้องนํ้าใช่ป่ะ ห้องนํ้าที่นี่สะอาดดี ออกมาล้างมือ ป้าแม่บ้านแกบ่นว่าถ้าพวกหนูเลิกหกโมง ป้าจะได้เลิกงานทุ่มนึง =_= เอ่ออออ ป้าค่ะ ป้าาาาาา

สนุปงานนี้ได้ fullfill อะไรบางอย่างนะ เช่น Firebase Admin เพราะหลังบ้านเขาก็อยากลองทำแบบยิง notification จากหลังบ้านเข้า FCM แล้วเจ้า Crashlytics มี Analytics ขึ้นมาแล้วแหละ แต่อาจจะเพิ่มอะไรบางอย่างลงไป เช่นทำไมแอป crash 555 แล้วก็ chatbot พี่ตี๋ด้วย ถ้ามีเวลาจะลองทำน้องหมีตัวแตกบนไลน์นะ ☺ แล้วเขียนบล็อกส่งการบ้านงี้

ปล. น้องหมีตัวแตกถือกำเนิดอย่างจริงจังในงาน Firebase App Fest ในปี 2017 จ้า

ส่วน Vlog สารรูป เอ้ยสารภาพว่า ยังไม่ตัดเลยจ้าาา เพราะในงานมีความโบ๊ะบ๊ะพอควร เอาเป็นว่ากด Like หรือ Follow Page กันได้จ้า เพราะ Vlog ลงในเพจนี้แหละจ้า

MikkiPastel

MikkiPastel Studio : IT & LifeStyle Blogger

Minseo Chayabanjonglerd

Written by

Android Developer at Ookbee U and Blogger at MikkiPastel. Interesting food, music, programming, design, startup business, and innovation

MikkiPastel

MikkiPastel Studio : IT & LifeStyle Blogger

Minseo Chayabanjonglerd

Written by

Android Developer at Ookbee U and Blogger at MikkiPastel. Interesting food, music, programming, design, startup business, and innovation

MikkiPastel

MikkiPastel Studio : IT & LifeStyle Blogger

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store