เติมไฟประจำปีกับงาน Firebase Dev Day 2019

สถานที่จัดงานในปีนี้คือ Academy Bangkok, A Google Space ตั้งอยู่ใน True Digital Park ชั้น 6 อาคาร Pegasus เพื่อซึบซับความเป็น Google ได้อย่างเต็มที่

และหลงได้อย่างเต็มที่ ใช่ค่ะ หลังจากเดินบน skywalk ที่ต่อเชื่อมกับ BTS ปุณณวิถี เข้ามาในตึกแล้ว แย่หล่ะ ไปยังไงดีหว่า ถามยาม อะเคเดินไปฝั่งขวา เราดันขึ้นเลื่อน เอ่ออไม่น่าใช่ อ่ะลงมาชั้นล่างสุดแบบล่กๆ และเดินไปเจอลิฟต์ โชคดีที่เจอ staff งานที่ใส่เสื้อ Firebase เลยรอดไปที

จากนั้นลงทะเบียน และรับกระดาษชื่อเราพร้อมเข็มหมุด Firebase จากนั้นเข้าลิฟต์ตรงพี่สาว รปภ ขึ้นไปชั้น 6 เดินจนสุดเลยจ้า และมารับเสื้อ Firebase สุด minimal สีเทาจ้า

Welcome Remarks — Wittaya Assawasathian , GDG Thailand

• ที่จัดงานวันนี้คือ Google Academy Bangkok เนอะ เป็น Google Space ซึ่งจะต่างจาก Google Thailand คืออันนั้นคือออฟฟิศอะเนอะ ส่วนที่นี่คือเป็น space ไว้จัด event ต่างๆโดยเฉพาะ มีจัด workshop เป็นศูนย์การเรียนรู้
• ป้ายชื่อที่ติดในวันนี้ ทำให้เราสามารถเข้าถึง space ต่างๆได้ ชั้น 5 เป็น WeWork ชั้น 7 มีเซเว่นด้วยหล่ะ
• แนะนำ GDG Thailand มีการเปลี่ยน brand logo ใหม่ และมีเว็บด้วย

GDG Thailand

What’s new in Firebase — Jirawat Karanwittayakorn , GDE Firebase

เป็น session ที่extended มาจาก Firebase Summit และมีของใหม่ในงานวันนี้ด้วย โอ้ววววว

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

ยอดแอพที่ใช้ Firebase มี 2 ล้านแอพที่ monthly active และในไทยก็มีแอพใหม่ๆที่ใช้ด้วย (จากนั้นพี่ในทีมเรามาขิง ว่ามีแอพเขาด้วยนะ ที่เป็น popcorn อะคะ)

โพลในปีนี้ เจ้า Firestore มาเป็นที่หนึ่งเลย แซงเจ้า Realtime Database ขึ้นไปล้าว

ภารกิจของ Firebase ก็คือให้ dev succeed ในการ develop app และมีคนเอาไปใช้ในโปรเจคจบกันด้วย รวมไปถึงงาน hackathon ต่างๆด้วย เพราะมัน make it happen

3 ภารกิจของ Firebase ก็คือ build better app, improve app quality และ grow your business

Build better app

• ML Kit for Firebase เป็น library ที่ add ในแอพของเราเนอะ มีแบบ on-device (offline และฟรี), in the cloud (ต้องการความแม่นยำสูงขึ้น) และ custom models (แยกว่าดอกไม้อันไหนเป็นกุหลาบ อันไหนเป็นทิวลิป) ซึ่งการเอารูปซึ่งเป็น model เข้า TensorFlow มาเป็น TensorFlow Lite มันก็ยากไปเนอะ เลยมีเจ้า AutoML vision edge ช่วยเราเตรียมภาพ model สามารถอัพโหลดขึ้น console ได้ TensorFlow Lite จ้า

• Cloud Firestore : collection group query และมี “in” query มาใหม่เมื่อวานนี้ ส่วนใน array ใส่ได้มากสุด 10 ตัว

• Realtime Database : ขยับ concurrent จาก 100k ไปเป็น 200k และแยกซึ่งกันและกัน
• Hosting เราสามารถทำ web dynamic ด้วยการรวมร่างกันกับ cloud run และ โดเมน *.web.app อันนี้เหมือนเราเห็นตอน Google I/O แล้วมั้งโดเมนนี้ บอกเลยว่าสะดวกสุดๆ พิมพ์น้อยลงไปเยอะ 555
• Firebase Extensions (Beta) เอา task งานที่แสนซํ้าซากน่าเบื่อสำหรับชาว dev เช่น ย่อขนาดรูป ส่งอีเมลล์ ช่วยลดงายและเวลาลง มีอยู่ 9 อย่างเช่นกัน ส่วน source code เป็น cloud function ซึ่งเราสามารถโมโค้ดเองได้ด้วยนะ

Improve app quality

• Firebase Test Lab เราสามารถอัพ apk เพื่อไปทำ robot test โดยโควต้าต่อวันคือ Virtual Device 10 devices และเครื่องจริง 5 devices ต่อวัน มี test sharding เอา test case ที่มีทั้งหมดไปทำ instrument test และทำ auto run test case ทั้งหมดให้เรา
• Crashlytics ตอนนี้มาเต็มตัว 100% แล้วนะ สามารถ customize velocity alert (แอพแคลชเต็มๆแบบ user วุ่นวาย) เพราะ 1% เราไม่เท่ากัน บางแอพคนโหลดเป็นหมื่น บางแอพเป็นแสน บางแอพเป็นล้าน ดังนั้นเราสามารถปรับ % ได้ว่าถึงเท่าไหร่แล้วแจ้งเตือน
• Performance Monitoring : จาก A ไป B ใช้เวลาเท่าไหร่ และตอนนี้มี web support แล้วนะ ตัวใหม่ที่มาเมื่อวานคือ custom url pattern คือ focus path ต่างๆเป็น priority หลักก่อนเข้า case auto ส่วน use case ที่พี่ตี๋เล่าคือ ตอนทำ True Money มี service นึงตาย แต่เนื่องด้วยหน้าบ้าน handle ให้แสดง loading และแอพยังไม่ได้ crash เลยยังไม่มีใครรู้ตัว ดันไปเจอในหน้า console นั่นแหละ ซึ่งข้อดีคือเราเห็นแล้วสามารถแก้ทันเนอะ

• Firebase App Distribution (Beta) เราสามารถ deploy ผ่าน console, Firebase CLI, fastlane และ gradle ซึ่งสามตัวหลังเราสามารถเอาไปทำ CI/CD ได้ด้วยนะ มี email เด้งเข้ามา และสามารถดูได้ว่ามีใครลงแอพเราไปแล้วบ้าง

Grow your business

• Prediction : use case คือโครงการก้าวละก้าว ถ้ายิงโนติไปทุกคน user อาจจะบ่นเอาได้ ดังนั้นจึงต้องเลือกยิง notification ไปให้ตรงกลุ่มเป้าหมาย ซึ่งในที่นี้เลือกยิง notification ไปยังกลุ่มที่เคยโอนเงินมาแล้ว และมีโอกาสโอนเงินใน 7 วันข้างหน้า และมีการยิง notification แยกข้อความกันด้วย ซึ่งการใช้งานหลักๆที่มัน predict ก็จะมี chrun ลบแอพทิ้ง purchase คนที่จ่ายเงินซื้อของในแอพ และ custom ดังนั้นเราจึงได้ data เพื่อ offer บางอย่างไม่ให้ user กลุ่มนี้หายไป
• Analytics มีการ track event บางอย่างในแอพ สร้าง audience ได้ และตอนนี้ web support แล้วนะจ๊ะ เพื่อให้สะดวกต่อการ retarget คนกลุ่มเดียวกัน
• Cloud Messaging : web support ด้วยเหมือนกันจ้า แก้ไขปัญหาเรื่องการส่งรูปใหญ่ๆสวยๆใน Notification แล้วไม่ทันกับตอนยิงจ้า

• Remote Config ก็ web support เช่นกันจ้า

One More Thing

Firebase Emulator Suite ซึ่ง suite ไม่ได้อ่านว่าสูท อ่านว่า สวีทเน้อ โรงแรมห้อง
สวีทเน้อ ซึ่งรองรับ 4 บริการ คือ Hosting, Cloud Firestore, Cloud Function และ Cloud Storage

ส่วนอันนี้การทำงานจ้า ถ่ายช้าไปนิดเจอตอนเปลี่ยนสไลด์เลย ฮ่าๆ

มาดูเดโม่กันดีกว่า ก่อนอื่นลง Firebase CLI กันก่อน

แอพนี้เป็นการดึงข้อมูลจาก Firestore ขึ้นมาแสดงในแอพแอนดรอยด์ ซึ่งในที่นี้จะใช้ Emulator ของ Firestore โดยพิมพ์คำสั่ง

firebase emulators:start --only firestore

ในแอพแอนดรอยด์นั้น ใส่ FirebaseFirestoreSetting จากนั้น set port และ clear data ทิ้ง และเอาไปเพิ่มกับ setting ของเจ้า Firestore ในแอพของเรา

การทดสอบนั้น เราสามารถทำเจ้า security rule ให้สามารถ test local ได้ด้วยนะ ซึ่งทุกครั้งที่เปลี่ยน rule จะขึ้น rule updated ใน Terminal ด้วยนะ ซึ่งผลการทดสอบ data ที่เพิ่มมาใน emulator นั้น จะไม่มีผลกับ data จริงจ้า

คำเตือน ใครที่ใช้ของใน Fabric รีบย้ายก่อนวันที่ 31 มีนาคม 2020 นะ มิเช่นนั้นข้อมูลที่เคยมีมันจะหายไปหมดเลยจ้า เข้าถึงของเดิมไม่ได้แล้วนะ

Role and Permission : บางทีฝั่ง marketing เขาก็อยากจะดู data แต่เขาใช้ของไม่เป็น อาจจะเผลอลบอะไรได้ ดังนั้นเราสามารถให้ permission เฉพาะบริการได้นะ

สุดท้ายฝากร้านจ้า และมี github มาใหม่ด้วย ดังนั้น code battle ปีนี้ก็จะอยู่ในนั้นด้วย (จำได้ปีก่อนแอบทวงของ iOS จนลืมไปแล้ว 555 ด้วยเหตุผลว่า ทำไมเขย่าทีเดียวเลขขึ้นหลายที)

Firebase loves Web — Thanongkiat Tamtai — Full Stack Developer, Doosoft

มี web support เพิ่มใน Google Analytics for Firebase, Remote Config, Cloud Messaging, Performance Monitoring โดยจะแบ่งทีละตัว

Google Analytics for Firebase

เราสามารถเอาพ่วงบริการอื่นๆต่อได้อีก

• Clone function ทั้งหมดจาก Google Analytics เดิมหมดยกเว้น Real-time Dashboard แต่ถ้าเชื่อมกับ Firebase แล้วก็สามารถดูที่เดิมได้
• Integrate กับตัวอื่นๆได้ด้วย ตัว Google Tag Manager เป็นของฝั่ง marketing และมี cloud function อีกตัว

• Version 7.0 ขึ้นไป migrate จนได้ measurementId

• สามารถ filter ได้ด้วยนะ
• การติดตั้ง เรียก instance ของ Firebase -> logEvent, serUserId ตามตัว user รายบุคคล ดู data ต่อใน BigQuery ได้, setUserProperties ตัวอย่างการใช้คือ track การซื้อของ

• Integrates กับ cloud function ด้วย node.js และสามารถดูได้ด้วยว่ามาจาก platform web ใช่ไหม

Remote Config

จัดการ data store ด้าน structure เช่น เปิดปิด เปลี่ยนสี เลือก audience ได้ เช่น timezone ภาษา

• lifecycle: ดูการตั้งค่าต่างๆเรียงตาม property, set default ที่ server, fetch sync จาก flag ของเรา

• Parameter : มีค่า default ให้อยู่แล้ว และใส่เพิ่ม มีตัวอย่างให้ดู เช่น สร้าง condition เช่นเปลี่ยนสี และมีตัวอย่างโค้ดให้ดูด้วย

Cloud Messaging

• แยก payload เป็น platform / หน้า console เลือกเป็น “แอป” และสามารถเลือก browser และ OS ได้ด้วย

• และเอา data ใน analytics มารวมเพิ่มได้ด้วย
• ยิงแบบ custom แบบโดยเฉพาะเจาะจง ดังนั้นต้องปั้น json ขึ้นมาเอง

• ตรง notification สำคัญ กำหนดรูปแบบเหมือนกันทุก platform ถ้าไม่เหมือนกับ Android we push apns(apple) ใส่ใน scope ตามจำนวน platform สามารถใส่ option ต่างๆได้ และใส่ token ของ user คนนั้นๆได้เลย / topic กำหนดเข้าไป เช่น subscribe คนนี้ไว้ ก็จะยิงเฉพาะ user ที่ subscribe คนนี้ / condition เลือก user property, audience ซึ่งสามารถเลือกได้อย่างเดียว

• Web push json : TTL ตั้งเวลาให้ noti หายไปในเวลาเท่าไหร่, set foreground และ background เช่น เข้าแท็ปอื่น ปิดเว็บนี้ ปิด browser และไปกองที่ service worker ก่อน fcm_option กดแล้วไปไหนต่อ

• การใส่ parameter การยิงไม่มีมาตรฐานแบบเป๊ะๆ แนะนำให้ไปดูของ Mozilla ได้

Notification

Performance Monitoring

ลงไว้เฉยๆก็ยังดีนะ ดู performance เว็บเรา

• การ setup ใส่บรรทัดเดียวจบเลย const perf = Firebase.performance() ที่เหลือมันจะนับให้เองหมด

• Check โดยการเปิด log console Firebase-logging เพื่อดูข้อมูลใน console

• Use case แนะนำ

วัดว่า component ว่า user อยู่ที่หน้านี้นานเท่าไหร่ หรืออยู่นานเท่าไหร่เว็บจึงจะค้าง เช่น แปะใน Angular

เชื่อมต่อ firestore (increamentMetric บวกเพิ่มจากของเก่า, pubMetric)

วัด network request ให้ด้วย วัด 3 อย่าง คือ … ** มากกว่า 1 * แตกต่างตัวเดียว

มีโชว์เดโม่ยิง Cloud Messaing บนเว็บ

FlutterFire: Firebase Plugins for Flutter — Tanitpon Paniwan , GDG Thailand

จากปีก่อนเราก็เพิ่งเคยเห็นการโค้ด Flutter สดๆในงานปีที่แล้ว ปีนี้เขาก็กลับมาพร้อม FlutterFire ที่สมบูรณ์กว่าปีที่แล้วมากขึ้น

Flutter เป็น framework สำหรับทำแอพพลิเคชั่นแบบ cross-platform มีทั้ง mobile, web, desktop และ embedded ซึ่งในที่นี้พูดถึง mobile เนาะ ใช้ภาษา Dart ในการเขียน และมองทุกอย่างเป็น widget และมี hot preload

ส่วนแอพที่ใช้ Flutter บนโลกนี้สามารถไปส่องได้ที่

Showcase

FlutterFire เป็น library ที่รวมทุก service ทุกตัวของ Firebase ในที่เดียวกัน และ document เขาใช้ง่ายมาก สวยงามใน แถมยอด github flutter จะแซง React ด้วยนะเออ

FirebaseExtended/flutterfire

service ที่สามารถใช้ได้มี ML Kit แต่ไม่ได้รองรับทุกตัวนะ, crashlytics, performance monitoring, remote config, in-app message, cloud messaging ต้อง set เพิ่มในส่วนของ iOS และ Android, analytics ซึ่งใส่บรรทัดเดียวจบเหมือน platform อื่นๆ

จากนั้นมีการ live code ทำแอพปักหมุดว่ารูปนี้ถูกถ่ายจากไหนกันนะ

ก่อนที่จะ live code ต้องรู้เรื่องราวเล่านี้ก่อน

• ลง pubspec เพื่อทำการ install

• สร้าง page setup 2 หน้าที่ใช้เอาไว้ก่อน เชื่อมต่อกันเรียบร้อย
• config firebase และ google map ให้เสร็จ
• child สามารถซ้อน widget ต่อกันได้, children อันนี้งงๆและจดไม่ทัน

• stateless เอาของที่มีมาแสดงบนหน้าจอ, stateful เปลี่ยนไปตามของ มี 2 function เชื่อมต่อหากัน

• scaffold คือหน้าตาแอพที่มี app bar ด้านบนแล้วเราสามารถใส่ของตรงด้านในได้

ขั้นตอนการทำ

1. image picker : เลือกรูปมาแสดงจากกล้องหรือ gallery ได้

• ดู log ได้ที่ debug console
• มี await ต้องใส่ async ตามด้วยนะ

2. ML Kit : upload รูปและแยก label ด้วย label detection

• เราต้องการให้ทำงานตอนเข้าหน้าที่สอง เรียก mitState() ซึ่งเป็นหนึ่งใน lifecycler และสร้าง function ใหม่
• จากนั้นอ่านจาก document และ ก้อปมาใส่ เพื่อเก็บ result ไว้ใน state ที่ setState และเอามาแสดง
• เมื่อเราต้องการ wrap code กด cmd + . จากนั้นสร้าง ListView.builder และ set padding ด้วย EdgeInset

3. Cloud Storage : เพื่อทำ image path เป็น url และเก็บ storage path ไว้

4. Cloud Firestore : เอา data ไปเก็บไว้ใน Firestore

• เอา fileUrl gsPath และ labelResource ขึ้นไป และมีของแถม คือมันคำนวณผลว่า vision นี้เป็น landmark ไหม และใส่ให้เราเพิ่มลง Firestore เลย พร้อมใส่ lat และ lng ให้ถ้าอันนั้นเป็น landmark
• เอา data ที่ได้ทั้งหมดมาแสดงผลในหน้าแรก

5. Google Map : landmark detection

• cloud function tricker ว่ามี data ใหม่ไหม

และนี่คือผลลัพธ์

ก่อนจบ session มี github ให้เราเอาไปลองศึกษาดูด้วย แต่เราใส่ key ของ Google Map และ Firebase ของตัวเองนะจ๊ะ ไม่งั้นจะรันไม่ได้ เพราะเขาก็ secure ความปลอดภัยของตัวเองเช่นกัน เราเข้าใจๆ

mikelopster/flutterfire-example

จากนั้นก็ฝาก

• flutter codelab

Google Codelabs

• livebook

Introduction

• group

Thailand Flutter Developer

จากนั้นอาหารเที่ยง มีเวลาครึ่งชั่วโมง ยังไม่ทันทำอะไรเลย อะฮืออออออ เลยไม่ได้ถ่ายอาหารเที่ยงมาจ้า

Chatting with Japanese using Firebase Extensions — Warit Warwithu — Developer Relations, LINE Thailand

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

เราเองก็เพิ่งรู้ว่า บริการแรกสุดของ Firebase คือ Real-time Database เอามาทำระบบแชทบนเว็บ แหะๆ

เจ้า Firebase Extensions เอามาช่วยลดงาน dev ที่ทำ task ซํ้าๆกยังซึ่งตอนนี้ยังเป็น beta อยู่ มีทั้งหมด 9 ตัว คือ

• Resize Images ลดขนาดรูป
• Translate Text แปลภาษา
• Sync with Mailchimp ส่ง newsletter ไปหา user
• Trigger Email แจ้งเตือนบางอย่างโดยการส่งอีเมลล์มาหาเรา
• Export Collections to BigQuery export data ไปคำนวณต่อใน BigQuery เราไม่ต้อง export ออกมาและ import เข้า BigQuery อีกต่อไป
• Shorten URLs ย่อลิ้งใช้ bit.ly
• Distributed Counter ปกติเจ้า Firestore 1 วินาทีจะเขียน 1 ครั้ง และถ้าบางแอพใน 1 วินาทีเขียนมากกว่า 1 ครั้งหล่ะ และมีปัญหาเขียนข้อมูลไม่ตรงกันกับความจริงหล่ะ ตัวนี้จึงเกิดมา เป็น work around เขียน sub-collection
• Limit Child Nodes set ขนาดตัวลูกไว้ว่าห้ามเกินเท่าไหร่
• Delete User Data ลบข้อมูล user ที่ไม่อยู่ในระบบของเราแล้ว

ซึ่งเราสามารถเข้าไปส่องโค้ดได้ที่นี่

firebase/extensions

ในอนาคตเราอาจจะสามารถสร้าง plug-in library แล้วให้คนอื่นๆมาเรียกใช้ของเราก็ได้นะ และพี่แทนกับพี่ตี๋พยากรณ์ไว้ว่าตัวต่อๆไปที่จะมาอาจจะเป็น marketplace (เราเข้าใจว่าช่วยในการขายของอ่ะ แบบไม่ต้องทำ service หน้าร้านขายของเองอะไรเง้)

ขั้นตอนคร่าวๆในการลง คือ install จาก Firebase CLI หรือผ่าน console จากนั้นมันจะทำการสร้าง function และเราสามารถ take action ต่างๆ เช่น ส่ง email newsletter ไปให้ user

ใน session นี้จะเดโม่ chatbot แปลภาษา โดยใช้ extensions ตัว translate text จ้า มาเริ่มทำกันเลยจ้า ก่อนอื่นเข้าไปติดตั้งที่หน้า console ก่อนเนอะ

• สุดท้ายเราจะได้ function ชื่อ fstranslate ซึ่งจะทำการแปลภาษาผ่าน function นี้
• config ภาษา เลือก server ที่ใกล้สุดคือ Tokyo ตัวภาษาเขา support 104 ภาษา เท่าที่เรานับจากเว็บอะนะ แหะๆ ซึ่งดูตารางนี้ แล้วเอา ISO-639–1 Code ไปกรอกจ้า

• จากนั้นกด install มันจะสร้าง cloud function มาให้เรา และเมื่อ install เสร็จสิ้นจะมี function นี้ถูกสร้างใน Cloud Firestore ของเรา

• ใน document จะมีเขียนรายละเอียดไว้ และอาจจะมีค่าใช้จ่ายเพิ่มเติมสำหรับ Cloud Translation API, Cloud Firestore และ Cloud Functions

Firebase Extensions | Translate Text

เรื่องค่าใช้จ่ายไม่ต้องกังวลจ้า ในที่นี้เราใช้ Blaze Plan เนอะ ซึ่งจะคิดเงินต่อเมื่อใช้เกินฟรีโควต้าของแต่ละบริการ ในแต่ละเดือนเท่านั้นจ้า ซึ่งเราเองเคยเสียเงินไปไม่ถึงบาทนึงอ่ะ ตอนทำ hosting น้องหมีตัวแตก (เหมือนคนเข้าไปเล่นเยอะในช่วงนั้น เพราะเพิ่งจบงาน Kotlin Meetup ที่เอาเว็บไปโชว์แล้วคนคงอยากลองเข้าเล่นมั้ง) ก็ตัดบัตรไปรอบนั้นรอบเดียวนะที่ใช้มา

• เข้าไปดูเจ้า Firestore สักหน่อย ตอนที่เราทำการ config นั้นเราได้ทำการระบุ collection และ document ในการเก็บข้อมูล ดังนั้นเราจึงสร้าง collection ชื่อว่า translations, document ชื่อว่า inputText และ field มีชื่อว่า input ใส่คำที่เราต้องการลงไป พบกับความมหัศจรรย์ คือ มันแปลให้เราเลยจ้า มันเพิ่ม field translated ซึ่งมีทั้งภาษาไทยและญี่ปุ่น จากเบสิคๆคำว่า สวัสดี ลองใส่คำว่า ลาก่อย ก็ออกมาเป็น ซาโยนาระ ให้เลยจ้า โอ้ววว เก่งฝุดๆ

• จากนั้นเราก็สร้าง LINE chatbot ขึ้นมาตัวนึง ที่สามารถเข้าไลน์กลุ่มได้ ทำหน้าที่แปลภาษาไทยเป็นภาษาญี่ปุ่น และแปลภาษาญี่ปุ่นเป็นภาษาไทย
• หลักการทำงานของเจ้าบอทนี้ ใส่ webhook ลงไป จากนั้น save input ที่ Firestore และส่งไปแปลภาษาและนำคำแปลไปเก็บไว้ใน Firestore เมื่อใส่ data เสร็จไปบอก function เพื่อยิง text ที่ได้กลับไปที่กลุ่มไลน์นี้

• ขั้นตอนการสร้างบอทนี้คร่าวๆจ้า เรามา handle webhook กันต่อจ้า

• สร้าง function LineWebhook เพื่อรับ input ที่เป็น type === “text” เท่านั้น และนำเจ้า input text ที่ได้ไปเก็บไว้ใน Firestore จ้า

• สร้าง function LineBotPush ขึ้นมา ทำการ check input ว่า match กับภาษาญี่ปุ่นไหม ถ้าใช่ส่งภาษาไทยมา ถ้าไม่ใช่ส่งภาษาญี่ปุ่นไป

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

เปลี่ยนจากเล่นมุขด้วยการชวนไปทานข้าวดีกว่า ความฉลาดของเจ้า function นี้คือ รู้ว่า “สบายดีไหม” เป็นประโยคคำถามจ้า มี ? ท้ายประโยคด้วย

สรุปเป็นเดโม่ที่น่ารักมากเลยค่ะ >w<

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

สร้าง Chatbot วุ้นแปลภาษาใน LINE ได้ง่ายๆ ด้วย Firebase Extensions ภายใน 3 ขั้นตอน!

ปล. ทางเรานึกไม่ออกว่าจะใช้กับใคร งั้นจะลองใช้ภาษาจีนแล้วแกล้งเพื่อนดูแล้วกัน น่าจะเป็นทางที่ดีที่สุด ฮ่าๆ

Mobile Machine Learning for All Skill Levels — Kajornsak Peerapathananont — Mobile Developer, Agoda

น้องเบนมองว่าวันนี้คนสายเว็บมาเยอะ เลยมาเล่าให้ฟังแบบชิวๆจ้า

ถ้าถามว่า Machine Learning คืออะไร ก็อาจจะถามอากู๋แล้วก็จะเจอคำตอบใน Wikipedia อยู่ แต่ไม่ใช่นิยามที่แท้จริง ถ้ามองการทำงานปกติธรรมดาเลยเนี่ย จะเป็น

input(data) + instruction(rules) = output(answer)

แต่สำหรับ Machine Learning จะสลับกันจ้า เราต้องการหา instruction จ้า

ตอนนี้ขอย่อ Machine Learning ว่า ML นะ แหะๆ

และแอพอะไรที่ใช้ ML บ้างนะ ก็จะมี Google Assistance ในนี้มีเยอะมากกก, Google Lens บอกว่าสิ่งนี้คืออะไร เช่น เจอ figure แปลกๆก็ส่องดู อาจจะรู้ชื่อ ซึ่งอันนี้ตัวอย่างเองนะ55 จะได้นึกออก, Google Maps ข้อมูลการเดินทาง การจราจร ว่าไปเส้นทางไหนดีที่สุด และ Google Photos เราสามารถระบุได้ว่าคนนี้คือใคร และระบุสัตว์เลี้ยงได้ด้วย เช่นรูปนี้มีหมาของเราอยู่ในรูป

workflow การทำ ML นั้นใช้คนเยอะมากกก ซึ่งที่ Agoda คนที่ทำงานในกรอบ workflow นี้มีหลักร้อยคนเลยทีเดียว

ที่สำคัญคือมี hardware และมี resource สูง ซึ่งตัว hardware ไม่ได้ใช้แค่ตัวเดียว แต่พาเพื่อนมาช่วยทำงานกันยังกับห้อง server เลยทีเดียว

แน่นอนว่าใช้ทรัพยากรสูงมาก และเรามีคนเดียว ทำไงดีนะ 🤔

ทำคนเดียวก็ไม่ได้ เนื่องจาก … เราต้องเก่งคณิตศาสตร์ด้วย ดูยากจัง

ML in mobile สิ่งสำคัญก็คือมี business model และ UX ที่ดี เพราะเมื่อ user ใช้แอพเราแล้วไม่ชอบใจ เขาก็จะลบแอพของเราทิ้ง และเขาอาจจะไม่กลับมาโหลดแอพเราใหม่อีกครั้ง เรียกได้ว่าเราจะเสีย user คนนั้นๆไปเลย ช่างน่าเศร้า 😢

ตัวอย่างบนมือถือก็คือ Face ID ที่ scan หน้าเราเพื่อปลดล็อกได้ ซึ่งมีการ predict และ match ได้ว่า อันนี้หน้าเรานะ

การติดต่อกับ server มันจะมี latency สูงและมี resource จำกัด, มีความ real-time ได้ผลลัพธ์ทันทีไม่ต้องต่อ internet, data usage บางที่ที่ internet เข้าไม่ถึงหรือมันช้ามากๆ เราก็ยังสามารถเข้าถึง data ได้, privacy มีความปลอดภัยของข้อมูล, offline

เราสามารถย่อจาก 5 steps ให้เหลือ 3 steps ได้ โดยขั้นตอนตรงกลางจะมีคนช่วยทำ คือ gcp นั่นเอง

ตัวอย่างแอพที่ใช้มี G board สามารถ process on-device และ detect ให้เราได้ทันที, Gmail มี smart reply, translate แปลภาษา ซึ่งเราสามารถเอา ML มาช่วยเราได้

ดังนั้น ML kit ช่วยเราทำ ML application บน mobile ได้ แบ่งตาม input ดังนี้

Vision

• barcode scanning มีแบบเส้นๆและและอื่นๆด้วย
• landmark detection ใช้ได้เฉพาะ on-cloud เท่านั้น เพราะข้อมูลสถานที่ใหม่ๆมีตลอดเวลา
• face detection แยกหน้าคน
• object detection and tracking บอกว่า object นี้อยู่ตรงไหนของรูป
• image labeling ในรูปนี้มีอะไรบ้าง
• text recognition ตัวหนังสือในรูปนี้คืออะไร

ในส่วนนี้ input ก็คือ image ทั้งหมดเลย เราไม่สนใจการทำงานด้านใน มองเป็น black box

Text

• smart reply เราควรพิมพ์หรือตอบอะไรกลับไปดีนะ
• on device translation แบบ offline รองรับภาษาที่เป็นละตินทั้งหมด จะอยู่ในประเทศในโซนยุโรป อเมริกา
• language ID บอกว่าเจ้า text นี้เป็นภาษาอะไร

ทั้งหมดรับเป็น String และคืนค่าออกมาเป็น String

แบบ Custom คือนอกเหนือจาก vision และ text อยากได้แบบละเอียดๆ

• AutoML Vision Edge เราโยนรูปที่มีเข้าไปเป็น model เอง
• TensorFlow Lite เอา TensorFlow แปลงเป็น mobile size ซึ่งเราจะได้ความแม่นยำที่ลดลงด้วยตามขนาด

ข้อดีคือ

• แอพเล็กลง เพราะแอบ load model เก็บไว้ที่หลัง แถมแอพบวมบางที user ก็ไม่ได้สนใจมากว่ามันจะบวมขนาดไหน เช่น Facebook แอพไม่ใหญ่ แต่ลงไปแล้วใช้ไปใช้มาก็บวมได้เป็น GB เดี๋ยวๆ
• update model แทบจะ real-time ไม่ต้องลงแอพ version ใหม่
• สามารถทำ A/B Testing ได้ เพื่อ proof ว่า model ใหม่ที่เราใส่เพิ่มลงไปมันโอเคกับ user ไหม
• แบ่ง model ตาม user ได้

ถ้ามองลองเป็น microservice ML 1 อันจะดีกว่าไหมนะ เพื่อให้ได้บริการใหม่ๆ เช่น

• translation + language ID อันนี้เป็นภาษาอะไร และแปลเป็นภาษาปลายทางของ user เช่น Google Translate Text
• Text Recognition + translation + language ID เอา model ต่างๆมาเชื่อมต่อกัน กลายเป็น Google Translate Image
• Smart Reply + translation + language ID และมาบวกบริการของ firebase คือ Authentication +Cloud Firestore + Cloud messaging กลายเป็นแอพแชท
• แอพซื้อของ การทำงานตามรูปจ้า

การเตรียมของก็แค่โยน model จากนั้น train data เพียง 1 ชั่วโมงก็เพียงพอแล้ว

ส่วน document สามารถอ่านต่อได้ที่นี่ได้เลย

ML Kit | Google Developers

demo app ขายของแบบเปิดกล้องสแกนแล้วเจอชื่อสินค้าพร้อมราคา ใช้ ML kit และ AR Core

และก็ ML Kit + flutter

firebase/mlkit-custom-image-classifier

Distribute Pre-release Apps to your Trusted Testers — Jirawat Karanwittayakam, GDE Firebase

อ้าวเราไม่ได้ถ่ายรูปเปิด session อะแงงงง

ก่อนที่จะ release app ของเราออกสู่ประชาชนชาว user นั้น ก็ต้องผ่านการเทส ซึ่งการเทสด้วย tester, robot test หรืออะไรก็ตามแต่อาจจะยังไม่เพียงพอว่า user จะชอบไหม ดังนั้นจึงต้องปล่อย beta app เพื่อดู feedback ของ user ก่อนที่จะตัดสินใจปล่อยแอพ

ซึ่ง Firebase ก็มี product ที่อยู่ระหว่างกลางระหว่างการ Test กับ Monitor นั่นคือ Firebase App Distribution นั่นเองงงง ซึ่งถ้าคนที่เคยใช้ Beta ใน Fabric ก็จะคุ้นเคยกันดี เพราะมันคือ…ตัวเดียวกันนั่นเองงง คุณสมบัติของเจ้านี่คือ

• easy to manage : อัพขึ้น console และ manage ให้ user มาเทส
• fast and flexible : build app และปล่อยได้เลยผ่าน console และมี 3 ช่องทางเพิ่มเติมคือ Firebase CLI, Fastlane และ Gradle ซึ่งใช้ได้เฉพาะ Android เท่าน้านน

Firebase CIL : install ผ่าน npm กันเป็นส่วนใหญ่ หรือผ่าน binary ก็ได้จ้า ส่องได้ตามนี้

firebase/firebase-tools

Fastlane : ใช้ได้ทั้ง iOS และ Android ซึ่งจะผ่าน binary file ถ้าเรา deploy ไม่ซํ้า มันจะไม่ขึ้นให้จ้า

firebase/firebase-tools

Gradle : ใช้ได้เฉพาะ Android เท่านั้นจ้า การเรียกใช้งานง่ายสุดๆ บรรทัดเดียว

.gradlew assembleRelease appDistributionUploadRelease

ใน console เราสามารถเพิ่ม tester เข้ามาในโปรเจกได้ และสามารถเพิ่ม group ได้ด้วยนะ เมื่อ tester คนนั้นถูกเพิ่มมาในโปรเจกเราแล้ว เขาจะได้ email ตอบรับเป็น tester และให้ download app ถ้าในกรณีที่มีแอพที่ปล่อย beta ในโปรเจกนะ

ถ้าเราไม่รู้ว่าจะมี user คนไหนเป็น tester ให้เราและเขามีอีเมลล์อะไร ก็จะมีเจ้า invie links เพื่อส่ง url ไปให้ download app beta ของเรา สามารถระบุกลุ่ม tester ให้รับ release ล่าสุด และจำกัดวง @company.com เท่านั้น

Gain Insights : เราสามารถดูได้ว่า crash ที่ไฟล์ไหนและบรรทัดไหน

จากนั้นเป็นการเดโม่โดยเริ่มจากหน้า console ก่อนเลย ซึ่งพี่ตี๋แอบมีแซวบล็อกเรานิดนึงตรงที่ก่อนหน้านี้วันนึงเราปล่อยบล็อก scrcpy พอดี เพราะน้องในทีมป้ายยามา พอว่างลองใช้ เห้ยยย มันดีอ่ะ แล้วด้วยของมันดีแล้วฟรี จนน้องในทีมที่เสียเงินกับเจ้า vysor pro ไปแล้วถึงกับรํ่าไห้ ก็เลยนึกถึงพี่ตี๋เลย 55555

หลังจากอัพโหลดแอพขึ้นหน้า console แล้ว เลือก tester โดยเลือกเข้า email ของพี่ตี๋เอง เมื่อเลือกเสร็จแล้วก็จะมีเมลล์เด้งมาให้กด download app ซึ่งเราเองก็ได้ลองใช้ตัวนี้แล้วนะ เอ๊ะ ข่างล่างอีเมลล์ ข้างล่างหน้าเว็บ สีส้มๆ เอ๊ะของใหม่หรือเปล่านะ

ด้านล่างส้มๆคือ Firebase App Tester มีแอพแล้วนะ เหมือนแอพ Beta เลย ที่สำคัญเราสามารถโหลด old versions เหมือนกันด้วยหล่ะ

ส่วนแอพเปิดเข้าไปกดนิดหน่อย อ้าววว crash เลย อันนี้พี่ตี๋ตั้งใจ เพราะเมื่อแอพเรา crash นั้น จะ link ไป crashlytics ทันที

จากนั้นไปต่อกันที่ fastlane ซึ่งจะต้องดูที่ fastfile และ run ด้วยคำสั่ง sudo fastlane distribute มีบัคนิดนึงสำหรับคนที่อัพ macos เป็น Catalina ต้อง fixed โดยการลบและลง bundle ใหม่ ไม่งั้นจะใช้คำสั่งนี้เพื่ออัพขึ้นไม่ได้จ้า

ส่วน gradle นั้นตอน setting ทำดังนี้

• ใส่ dependency
  classpath ‘com.google.firebase:firebase-appdistribution-gradle:0.2.3’
  ใน build.gradle ของ project
• ใส่ plug-in apply plugin: ‘com.google.firebase.appdistribution’ ที่ build.gradle ของ module app
• ใน build.gradle ของ module app ใส่ firebaseAppDistribution ไว้ใน buildTypes -> debug ซึ่งการใส่เราอยากให้ดูใน document เขาเนอะ แหะๆ

Distribute Android apps to testers using Gradle | Firebase

ตัว invite links เราสามารถเลือกกลุ่ม tester (optional) แล้วได้ url กด link เพื่อเข้าสู่การเป็น tester

ส่วนรายละเอียดเพิ่มเติมอ่านได้ที่บล็อกนี้ของพี่ตี๋ได้เลยจ้า

รู้จัก Firebase App Distribution ตั้งแต่ Zero จนเป็น Hero

ตอนเบรกขึ้นไปหาอะไรกินกับพี่กอฟ iOS Developer ในทีมเรา ที่เซเว่น ชั้น 7 ปรากฏว่า เซเว่นปิดจ้า อะแงงงงงงงงงงงงง

เลยรีบๆซื้อชาเขียวร้อนที่ทรู คอฟฟี่ มากินและเข้าไปฟังใน session ต่อไปแบบรีบๆ

เนี่ยบอกเลย เจอกันหลังเซเว่นปิดของจริงเลยจ้า ในตึกนี้แหละจ้า

Building Dynamic Website by Firebase Hosting x Cloud Run — Siwawes Wongcharoen-Full Stack Developer, Generali Thailand

เป็น session ที่ตั้งใจอยากฟังแต่แรก แต่ฟังแล้วก็แอบงงๆง่า แงงงงงงง

เรายืนกินชาเขียวร้อนพร้อมฟังอยู่นอกห้อง เพราะเขาห้ามเอาอาหารเข้าห้องจ้า

คร่าวๆตอนต้น session คือ Firebase Hosting ข้อดีเยอะมาก แต่ไม่ support dynamic website และถ้าเป็น serverside ต้องทำยังไงได้บ้างนะ ก็เลยมีตัว cloud run มาเป็นส่วนเต็มเติม โดยการเอา container มาหาที่ run

สิ่งที่เราต้องทำคือให้เว็บแอพของเรานั้น เป็น stateless ให้ได้ และมีการ kill container และค่อยกลับมาถือใหม่ (ตรงนี้ทางนี้แอบงงๆนิดนึง เดาว่า lifecycler หรือเปล่า แบบออกจากเว็บก็ destroy ของทิ้งแล้วโหลดใหม่ตอนกลับมา?) และเว็บแอพของเราต้องรับ PORT จาก environment variable และบาง function ต้องรับ HOST ให้ได้ด้วย (ซึ่งทางนี้ก็งงๆก๊งก๋ง)

นำเจ้า Firebase Hosting กับ Cloud Run มารวมกัน เป็นโกโก้ครั้นซ์ เอ้ยยย เป็น dynamic website สามารถสร้าง REST API ได้ และสามารถใช้กับพวก React Vue.js ในการทำเว็บได้ ทำแอพให้เป็น container และรับ port จากระบบได้

จากนั้นก็เดโม่จ้า ด้วยความที่ speaker ใช้ php ดังนั้นจะใช้ docket image php:7.3-apache เพื่อเอามาช่วยเขียน function ต่างๆเหมือนใน node.js (หวังว่าเราจะไม่ได้เขียนมาผิดนะ ฟังแล้วมีมึนๆ ฮือออ ถ้าผิดก็ท้วงได้นะคะ)

อันนี้ตอนทำ docker images ขอแยกไปไว้ตรงนี้

ขั้นตอนการทำ

1. build image ขึ้นไป : set zone ชื่อโปรเจก ชื่ออิมเมจ พอขึ้นเสร็จกด F5 เพื่อ random ข้อมูลเพจต่างๆขึ้นมา แบบนี้

2. push docker : แต่ต้อง config docker เพื่อทำความรู้จักกันก่อน

3. สั่ง deploy image จะได้ *.run.app ซึ่งมาจากใน cloud run และผลก็ต้องได้เหมือนกันใน localhost

4. ผูก service hosting กับ cloud run โดยการสร้าง web ใหม่รอที่ฝั่ง Hosting และใช้ target hosting ให้ cloud run มาแสดงใน hosting

5. deploy hosting ให้ cloud run มาแสดงใน hosting : ที่เห็นคร่าวๆคือสร้าง folder ใหม่พร้อม index.html ก่อนเอาไป deploy มั้ง ตอนแรก deploy แล้วไม่มา ต้องไปเปลี่ยนชื่อ index.html เป็น i-am-not-index.html ถึงจะมาอ่ะ

จริงๆเราเองก็งงๆนิดนึงว่ามันมีอะไรที่มากกว่าที่เราเห็นหรือเปล่านะ เอาเป็นว่าเขามี github ให้เราอ่านและลองทำกันดูจ้า

puuga/firebase-dev-day-2019

Firebase Code Battle — Somkiat Knitwongwattana, GDE Android; Panjamapong Sermsawatari, GDE Web Technologies; Kittisak Phetrungnapha-IOS Developer, Agoda;
Theerasan Tonthongkam-Full Stack Developer, Salutat

ใครพลาด session นี้ถือว่ามาไม่ถึงงานนี้ 555555 เพราะมีประจำทุกปีจ้า

ความเป็นมาคือพี่ตี๋เห็นรูปแบบ session 4 จอที่มี iOS Android Web และเปิด Firebase Console แสดงแบบ real-time เลย adapt มาเป็นอันนี้ ซึ่งปีแรกที่จัดที่ SET ความโชคดีคือเขามี 4 จอพอดีเลย

ปีนี้มี 4 platforms เลยอ่ะ จับเป็นคู่ไประหว่าง iOS และ Android กับ Unity และ Web

และสิ่งที่ทำในวันนี้ คือ แอพถ่ายรูปและเอาขึ้นจอนั่นเองงงงง

คู่แรก iOS และ Android ทำแอพถ่ายรูป ใส่แคปชั่น และนำรูปที่ได้อัพขึ้น Storage และเก็บข้อมูลไว้ที่ Cloud Firestone จากนั้นทำการ resize ด้วย extension เพื่อย่อรูปก่อนที่นำไปแสดงผลบนเว็บ ซึ่งบอกเลยว่าคู่นี้บลัฟเก่งทั้งคู่ แบบคนฟังอย่างเราขำ
ตลอดอ่ะ 55 เพราะบลัฟไปด้วยมุขไปด้วย ถือว่าหาคนมาปะทะฝีปากพี่เอกได้ถูกคนจริงๆ 55555

เรื่องของการ resize รูปนั้นจะมีฝั่งแอพที่ resize เพื่ออัพขึ้นด้วย ตอนที่ซ้อมกันเจอบัคนึงคือฝั่ง iOS ไม่ได้ใส่สกุลของไฟล์รูปไว้ พออัพขึ้นไป เจอ recursive หมุนอยู่อย่างนั้นไม่หยุดทำงานซะที เลยแก้โดย uninstall ตัว resize ใน extension ซะ และบังคับต้องใส่นามสกุลไฟล์รูป

ไม่ทันไรโดนปั่นจิ้งหรีดไปซะแล้ว …

คู่ต่อมาคือ Unity และ Web ซึ่งก็เพิ่งเคยเห็น Unity จริงๆครั้งแรกเลยนะ ฝั่งนี้จะเป็นการแสดงผลนะ ฝั่ง Unity จะยากนิดนึงตรง setup โดยต้อง download sdk ของ Firebase มาใส่ในโปรเจก และ import เข้าไป แถมต้องใส่เจ้า google-service-desktop เข้าไปด้วย ส่วน view ก็ import จากที่เขาทำอยู่ได้เลย และกำหนดตำแหน่งการแสดงผลให้รูปตกลงมาจากบนลงล่าง ส่วนฝั่งเว็บด้วยความที่ทำเสร็จไว เลยแยก component และมี function random รูปให้มาแสดงด้วยนะ จริงๆค่อนข้างเห็นใจฝั่ง Unity อยู่นะ งานยากเลยกว่าจะได้

เมื่อการลงโทษคือการปั่นจิ้งหรีดและเปลี่ยนเป็นวิดพื้น ปรากฏว่าปีนี้โดนหมดเลยยกเว้นฝั่ง iOS อ่ะ ….. แต่เขาวิดพื้นกันง่ายดีจัง ต้องทำยังไงน้าา

ผลลัพธ์ฝั่ง Unity จ้า จริงๆแอบส่งแรงใจและคอยลุ้นอยู่ตลอด เพราะเราเองไม่เคยจับ Unity มาก่อน แฮร่ ผลที่ได้คือรูปที่อัพขึ้นมานั้นจะแสดงจากบนไปล่างโดยมีฉากเกาะทะเลประกอบจ้า

และการที่ฝั่ง web random รูปขึ้นมาเพื่ออะไรหรอกหรอ?

ก็แจกของ lucky draw หล่ะสิ และให้ฝั่ง Android download app beta ไปให้อัพรูปขึ้นไป ด้วยความที่มันรับได้แค่ 100 คน ฝั่ง iOS อดเลย เพราะเดี๋ยวจะเกินจำนวนเอา ในที่นี้ใช้ invited link เน้อ คือใครกดเข้ามาที่ url นี้ก็ download app มาได้เลยพร้อมเป็นเทสเตอร์ของแอพนี้ด้วย

ด้วยความที่ swag น้อง sparky มี 6 ชิ้น และ random ตามจำนวนของที่มี สุดท้าย เราอดจ้า ดวงไม่ถึง อะแง

รูปนั้นแคปชั่นว่า น้อยใจทำไม iOS ไม่มี แล้วมีพี่เอกยืนอยู่ด้านหลัง …

โค้ดใน Code Battle ทั้งหมดอยู่ที่นี่จ้า Unity ก็มีให้เราลองเอาไปเล่นด้วย อิอิ

FirebaseThailand/CodeBattle2019

วันที่ 24 พฤศจิกายน จะมีงาน Chrome Dev Summit Extended Thailand 2019 ที่ Google Space แห่งนี้ ซึ่งเป็น event สุดท้ายของปีนี้จากทาง GDG Thailand เนอะ ใครไปฝากแชร์บรรยากาศด้วยจ้า วันนั้นไม่ว่างพอดี ฮืออออ (แต่คิดว่าคนอ่านบล็อกนี้ผ่านๆน่าจะไปได้แบบไม่หลงใช่ไหมนะ …)

Devcamp Event: Chrome Dev Summit Extended Thailand 2019

จากนั้นปิดงานโดยการชักภาพร่วมกัน เป็นอันจบงานในปีนี้จ้า

ก่อนจากกันแนะนำน้องคนนึงกันก่อน …

เจ้า Firebase มี mascot หล่ะนะ ชื่อว่า Sparky ซึ่งก็มาจาก logo ปัจจุบัน ส่วน logo เดิมก็จะเป็นน้องสัปปะรด น้อนน่ารักทั้งคู่เบย //มีบัตรจับมือกับ 2-shot ไหมนะ 555

https://giphy.com/gifs/GDevs-fire-base-firebase-S3QB5UrHpH4Kq5wsax

ก่อนกลับแอบหาปากกา calligraphy แต่น่าจะไม่มี ไปเจอปากกาแท่งละ 5 บาทลองวาดน้องเล่นๆดูแบบไม่ระบายสีเดี๋ยวจะเละกว่าเดิม 55555 แอบยากตรงรูปร่างน้องนี่แหละ งั้นถือเป็น fanart น้องแล้วกันเนอะ 555

และสไลด์ทุก session อยู่ที่นี่จ้า

Firebase Thailand

สุดท้ายฝากร้านกันสักนิด ฝากเพจด้วยนะจ๊ะ