แก้ปัญหาจะนำเสนอแอพเดโมผ่านคอม สำหรับชาวดอย ใช้ scrcpy สิ

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

แน่นอนว่าตอนแรก คุณอาจจะเปิด Android Emulator ขึ้นมาเพื่อรันแอพที่เขียนไว้แสดงบนจอคอมที่เชื่อมต่อ projector แต่เมื่อก่อนมันช้ามากๆ ยิ่งทำผ่าน notebook ระบบปฏิบัติการ Windows หน้าตาแทบเล็ด ทำให้การนำเสนอแอพที่ว่าสะดุดลงเพราะรอ Emulator และรันให้ทันเวลา ด้วยความช้าของมัน ทำให้คนมีความเจ็บปวดเกี่ยวกับมัน เลยเลี่ยงที่จะใช้ทั้งในการรันงานและพรีเซนต์

อีกตัวที่เคยใช้คือ vysor ซึ่งใช้งานได้ฟรี และมี chrome extension ด้วย มันจะมีแลคๆอยู่ และบางทีก็มีโฆษณามาขัดจังหวะด้วย ถ้าอยากข้ามข้อจำกัด สามารถ subscription เป็นแบบ pro ได้ หรือใจปํ้าซื้อไปเลยจ้า

ก่อนหน้านี้กล่าวถึง Emulator แน่นอนว่าต่อมาก็มีตัว GenyMotion และทาง GenyMotion tool สำหรับแสดงหน้าจอมือถือแอนดรอยด์ผ่านคอมเช่นกัน เรียกว่า scrcpy นั่นเอง

การติดตั้งก็ไม่ยากเย็น สำหรับ MacOS ติดตั้ง homebrew ให้เรียบร้อยเสียก่อน ผ่าน Terminal

จากนั้น install ลงไปผ่าน `brew install scrcpy`

และ install adb ผ่าน brew ด้วยเช่นกัน `brew cask install android-platform-tools`

เมื่อใช้งานก็พิมพ์ `scrcpy` ลงไป ก็จะแสดงหน้าจอมือถือของเราออกมาแล้วหล่ะ

ใน Terminal ก็จะมี log ให้เราเห็นสดๆแบบ realtime ด้วยหล่ะ

เปิดมาภาพแตกเลย ทำไงดีหล่ะ?

ลองสั่งให้มัน full screen ดู `scrcpy --fullscreen`

เก็ทเลยจ้า จริงๆมันละเอียดสุดๆ จริงๆมันละเอียดแค่ภาพที่ละเอียดมันถูกบีบให้ขนาดเล็กลงไงตอนไม่ full screen อ่ะ

พอมาเทียบดู พบว่าละเอียดเท่าๆกันเลยนะเนี่ยยยยย

ถ้าอยากให้เขาเห็นว่าเรากดจากตรงไหนหล่ะ
พิมพ์คำสั่ง `scrcpy --show-touches`

ถ้าอยากทำสองอย่างพร้อมกันหล่ะ ก็แค่พิมพ์คำสั่ง
`scrcpy --fullscreen --show-touches`

ผลออกมาเราสามารถ demo แอพของเราและทุกคนเห็นว่าเรากดตรงไหนด้วยนะ ดีงามสุดๆ

ของดีและฟรีแบบนี้ ไม่ใช้ ไม่ได้ล้าวนะบอกเลยย

ทำแอปสตรีมมิ่งของตัวเองกันเถอะ ep 2 : streaming ไฟล์จาก firebase storage และเล่นด้วย Exoplayer

หลังจากที่ทำหน้าแอปหน้าแรกที่แสดง list แบบ mock-up กันไปแล้ว
ต่อไปจะลองแสดงผลชื่อไฟล์เพลงจาก firebase storage กัน ก่อนที่จะฟังเพลงแบบสตรีมมิ่ง

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

มาให้แอปเราเชื่อมต่อกับ Firebase Storage กันเถอะ

ในที่นี้เราแค่ streaming file ไม่ได้ download เข้ามาในเครื่องนะ แต่ข้อจำกัดคือ เราต้องรู้ชื่อไฟล์ก่อน ถึงจะดึงมาได้

เราเลยมาลองแบบย่อๆแล้วกันเนอะ เพราะเน้นที่ตัว Exoplayer มากกว่า ขอแค่การันตีว่า มันดึงไฟล์มาสำเร็จและฟังได้ น่าจะพอแล้ว ณ ตอนนี้

ก่อนอื่น อัพไฟล์เพลงเราเข้า Firebase Storage ก่อนนะ แบบนี้

จากนั้นไปเพิ่มที่ build.gradle ของ module app ซึ่งในนี้ไม่ใช่ version ล่าสุดนะ

compile 'com.google.firebase:firebase-storage:11.4.2'

พออัญเชิญมาเรียบร้อยก็ sync gradle ซะ

เรารับชื่อไฟล์จากหน้าแรกของแอป และเริ่มเล่นเพลงอีกหน้านึง

ใน Firebase Storage นั้น จะมี url 2 ชนิด ได้แก่
1. Storage Location : gs://<project_name>.appspot.com/<file>
2. Download Url : https://firebasestorage.googleapis.com/v0/b/<project_name>.appspot.com/o/<file>?alt=media&token=<token> ตัว token นั้น Firebase จะ generate ให้

เราจะเห็นตอนกดไปดู detail ของแต่ละไฟล์ และเราใช้ download url ในการดึงไฟล์เข้ามา
เราเคยลองเขียนโค้ดเรียก url มักจะได้ Storage url มาตลอดเลย และเราสามารถเปิดไฟล์ได้คนเดียว ส่วน download url สามารถใช้ได้หมดเลย เช่น เราเคยอัพไฟล์รูปขึ้นหน้า portfolio website โดยแปะ url ตัวนี้ไป

สรุปจากการทดลอง โค้ดเราจะเป็นดังนี้



เราจะเรียกหาแต่ละชั้นของไฟล์เราก่อน จากนั้นใช้คำสั่ง getDownloadUrl().addOnSuccessListener() เพื่อ get download url ออกมา
ref : https://stackoverflow.com/questions/37374868/firebase-getdownloadurl

เมื่อเรา debug ดู พบว่า เรียกถูก path และ token มีการเปลี่ยนแปลงตลอดเวลาเลย แต่ตัวแอป crash เนื่องจากตัว Exoplayer ของเราเล่นไม่ได้นี่แหละ เข้าใจว่าไม่ใช่ format ที่รองรับนะ

ปัญหาที่เกิดขึ้น มี 2 อย่าง คือ โค้ด Exoplayer ที่ก็อปมา เปิดลิ้งค์ไฟล์เสียงไม่ได้ แล้ว file path เป็น null ระหว่างกดที่ item ไปยัง player ตัว player สร้างไวกว่าได้ url มาซะอีก

คิดว่าถ้าลองเขียน cloud function สักตัว เพื่อทำ realtime database ในการดึงว่ามีกี่ไฟล์ใน storage ก็น่าจะดีไม่น้อย ซึ่งมีคนใจดีเขียนบล็อกในการสร้าง API โดยอัพไฟล์ไปใน Firebase Storage แล้วไปแปะที่ Realtime Database จากนั้นใช้ cloud function สร้าง API ขึ้นมา แล้ว make sure โดยการเรียกใน postman โอ้เย้ ได้แล้ววววว ขอบพระคุณรัวๆเจ้าค่ะ

เมื่อ Android Developer อยากมี API แต่ไม่อยากจัดการ Server. Firebase จึงตอบโจทย์

มาทำความรู้จักกันกับ Exoplayer ก่อน

มันคือ player ตัวใหม่ที่ใช้ใน Android จากทาง Google ซึ่งเขาเคลมว่ามันเสถียรกว่าตัวเดิมที่มีอยู่ (หมายถึงเจ้า MediaPlayer นั่นแล) ซึ่งเปิดตัวตอน Google I/O 2017 ที่ผ่านมาเลยนะนี่

Reference

- Developer Guide : https://google.github.io/ExoPlayer/

- Codelab : https://codelabs.developers.google.com/codelabs/exoplayer-intro/index.html

- Github : https://github.com/google/ExoPlayer

- Blog : https://medium.com/google-exoplayer/

ExoPlayer เป็น open source ของ media playback สำหรับ Android ไม่ใช่ Android Framework นะจ๊ะ
ตัวนี้จะช่วยเขียนโค้ดได้ minimal และ flexible มากขึ้นในการสร้างหน้าตาของ media player เหมาะกับการใช้งานแบบ streaming หรือมีการเข้ารหัสข้อมูล รองรับ Android 4.1 หรือ api version 16 ขึ้นไป สามารถ support file ได้เกือบทั้งหมดเลย มีแค่น้อยอันที่ไม่ได้ แต่ไม่ต้องกังวล เพราะส่วนใหญ่ก็รองรับอยู่แล้ว

เช่น แอปเราเปิดวิดีโอเอ็มวีของสินค้า และเราไม่อยากให้ใครสามารถดูดไปได้ ก็จะใช้การ streaming ในการนำวิดีโอมาเปิดในแอป และป้องกันไม่ให้ใครไปดูดวิดีโอมา จึงมีการเข้ารหัสไว้ ถ้าดูดมาได้ก็จะเป็นอะไรสักอย่างที่เข้ารหัสไว้ ประมาณนี้

การใช้งานที่เราเห็นทั่วไป ก็คือ YouTube และ Google Play Movies ในมือถือของเรานั่นเอง

เราลองทำตาม codelab ไปเล่นๆ ตาม https://github.com/googlecodelabs/exoplayer-intro.git

พอให้รู้จักกันคร่าวๆ

ก่อนอื่นทำพิธีการอัญเชิญเข้ามาก่อน

จุดแรก build.gradle ของโปรเจก ใส่ใน repository ใส่ได้สองท่า

ท่าแรก ท่ามาตรฐาน
maven { url "https://maven.google.com" }

ท่าที่สอง ท่าสายย่อ

google()

จุดที่สอง build.gradle ของ module เพิ่มใน dependency

// standard (require)

compile 'com.google.android.exoplayer:exoplayer:2.5.4'
// core function (require)

compile 'com.google.android.exoplayer:exoplayer-core:r2.5.4'

// DASH content
compile 'com.google.android.exoplayer:exoplayer-dash:r2.5.4'

// UI component
compile 'com.google.android.exoplayer:exoplayer-ui:r2.5.4'

แต่เดี๋ยวนี้แอดตัวเดียวเหอะ ตาม version ล่าสุดเลย

// standard (require)

compile 'com.google.android.exoplayer:exoplayer:2.7.1'

อธิบายการทำงานกันแบบคร่าวๆ

เราสร้าง layout หน้าแรกเพื่อแสดงเพลงทั้งหมดที่มี แล้วเวลากดเข้าไปก็จะเล่นเพลงนั้น

ตัว Exoplayer นอกจากจะเล่นไฟล์เดี่ยวๆแบบในตัวอย่างนี้แล้ว สามารถเล่น playlist ได้ด้วย และ repeat เพลงหรือ playlist ได้ด้วยนะ ดังนั้นเราต้องมาเปลี่ยนโค้ดและหน้าตาของมันนิดหน่อย เพื่อให้สามารถเล่นได้ตาม feature ที่เขามีอยู่ ลุยกันเลยจ้าาา

ก่อนอื่นมาดูหน้าตา player ของแอปในท้องตลาดกันเลย มีของ Spotify Fungjai และ JOOX

ตำแหน่งของปุ่มจะวางไว้ในแนวทางเดียวกัน เราก็ต้องเอาที่ user สะดวกนั่นแหละ

ถ้าส่วนแอปฟังเพลงแบบ niche ไปเลย ก็เรื่องของเขา 555 เช่น Nightwave plaza แอปฟังเพลง waporwave ยาวๆไป concept นี่น่าจะ windows 98 อะไรเทือกนี้แน่นอนนน

ดังนั้นเราจะสร้างปุ่มใหม่แบบนี้

และหน้าตา layout จะเป็นดังนี้

เราเองก็แก้อะไรมากมาย ทั้งโปรเจกเลย เช่น เรียกไฟล์จาก API ที่สร้างจาก cloud function ดังนั้นไปโฟกัสส่วน player ว่าแต่ละปุ่มเขียนยังไงก็แล้วกันเนอะ

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

เราเล่าคร่าวๆว่าแต่ละปุ่มทำอะไรเนอะ

Play ปุ่มเล่น ตั้ง logic ที่ชื่อว่า songplay เป็น false ซะ จากนั้นก็จะให้เล่นเพลงเมื่อกดปุ่ม และเปลี่ยนปุ่มเป็น pause ด้วย โดยคำสั่งที่ใช้ในการเล่นเพลง เราสร้างเป็น function เพราะใช้หลายที่

Repeat เป็นตัวที่วนซํ้า มาตอน ExoPlayer version 2.5 ทำได้ทั้งไฟล์เดียวและ playlist จะมีโหมดแบบนี้

- No Repeat : โหมดปกติ ปิดแม่มเลย
player.setRepeatMode(Player.REPEAT_MODE_OFF);

- Repeat one : เล่นเพลงเดียวซํ้าไปซํ้ามา

player.setRepeatMode(Player.REPEAT_MODE_ONE);

- Repeat All : เล่นวนทั้ง playlist ถ้าเพลงสุดท้ายแล้ว ก็วกกลับมาเล่นเพลงแรกเอง คือต้องมี playlist ใน player ก่อนนะ

player.setRepeatMode(Player.REPEAT_MODE_ALL);

โดยเราสร้างปุ่มขึ้นมาเอง เมื่อกดจะเปลี่ยนโหมดตามด้านบน รูปก็เปลี่ยนไปด้วย แบบนี้

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

ซึ่งรายละเอียดเพิ่มเติมอ่านได้ที่นี่
https://medium.com/google-exoplayer/repeat-modes-in-exoplayer-19dd85f036d3

Prev/Next จริงๆมันควรจะผูกกับ playlist แต่เราไม่ได้สร้าง playlist ไว้เลย เลยใช้ logic ในกากดปุ่มแทน ถ้าเพลงถูกเล่นอยู่ ก็ให้เล่นเพลงต่อไปได้เลย

จริงๆลองทำเองยังก็ยากแหละ เพราะปุ่มพวกนี้ อิงจาก playlist ที่มีนั่นเอง

สรุป ตัวอย่างที่เห็นไม่ใช่ตัวอย่างการทำ ExoPlayer ที่ถูกต้อง อ้าววววว อ้าวเลยหล่ะสิ
อ่านแล้วมันดูยากๆเนอะ

แล้วอะไรคือตัวอย่างที่ถูกต้องหล่ะ

มาพบวิธีที่ถูกต้องในงาน Android Bangkok 2018 ในวันที่ 31 มีนาคมนี้ ซึ่งเราจะมาพูดถึง ExoPlayer ตั้งแต่พื้นฐาน จนสร้างแอปได้ และเสริมส่วน advance เข้าไป ให้เข้าใจมากขึ้น

เข้าไปจับจองบัตรและดูตารางเวลาของแต่ละ session กันได้ที่ https://android.wi.th/bangkok/

เจอกันงาน Android Bangkok 2018 นะคะ <3

25 สิ่งที่ต้องรู้ สำหรับ Android developer

ถ่ายจาก Huji Cam

สวัสดีค่ะทุกท่าน เนื่องจากเราได้เปลี่ยนสายงานมาเป็น Android developer อย่างจริงจังแล้วที่ฟังใจ เราก็ได้เตรียมตัวศึกษาเพิ่มเติม ทั้งในและนอกเวลางาน และได้อ่านของพี่เอกในการเตรียมตัว และคิดว่าน่าจะมีเพิ่มเติมอีก จึงได้ดัดแปลงบทความนี้เป็นในแบบของเราเอง ดังนี้

0. เรียนคอร์สพี่เนย หรือคอร์สออนไลน์อื่นๆ
สำหรับผู้ที่อยากศึกษาขั้นเริ่มต้น คอร์สออนไลน์นี้เหมาะมากๆในการปูพื้นฐานจาก zero to hero เลยทีเดียว ราคาประมาณ 5,000 บาท สามารถซื้อได้ที่ Udemy หรือที่นี่ https://courses.inthecheesefactory.com/android แล้วก็ resource ต่างๆ https://inthecheesefactory.com/a แนะนำให้อ่าน The Android Cheese Sheet นะ ตัวโปรเจกที่ทำ คือ อันนี้ https://github.com/mikkipastel/Live500px

สำหรับบางคน หนูไม่มีบัตรเครดิต ผมไม่มีเงินครับ ไม่ใช่ข้ออ้างในการไม่ศึกษาหาความรู้นะ โอเคไม่เสียเงินซื้อคอร์สไม่เป็นไร คอร์สฟรีมีมากมาย อีกแหล่งนึงที่ฟรี แถมยัง Official คือ Udacity ที่มีหลากหลายคอร์สเลยนะ ทาง Google มาสอนเองเลยนะ ที่เสียเงินก็พวก nanodegree

แนะนำคอร์สกันดีกว่า เราเองก็เรียนไม่จบหมดนะ แหะๆ
- Material Design for Android Developers
- Android Performance
- Firebase in a Weekend: Android
- UX Design for Mobile Developers
มันมีความ advance เลยนะนี่แต่ละอันที่แนะนำ แต่ของ Android มีหลายอันมากๆ ชอบอันไหน กดเรียนฟรีได้เลยยยย เย้

ส่วนใน Udemy คอร์สไหนฟรีจิ้มไว้ก่อน ค่อยว่ากัน 😜

อันนี้เริ่มเข้าสู่โหมดจริงจังหล่ะ ว่า 25 ข้อที่ว่า คืออะไร

1. Lifecycle ทั้งตัว activity และ fragment
ปฎิเสธไม่ได้เลยว่าแอปในระดับ production ของบริษัท startup นั้น มีความซับซ้อน และใช้ fragment ด้วย ดังนั้นการเรียนรู้และเข้าใจ lifecycle จึงเป็นเรื่องสำคัญมากๆ ซึ่งมีรูปที่เข้าใจได้ง่าย แบบนี้

เดี๋ยวนี้มี Architecture Components มาอีก สนุกสนานกันไป

บล็อกเพิ่มเติม : Android Architecture Components คืออะไร แบบม้วนเดียวจบ

2. OOP ต้องแน่น
เพราะปัจจุบันใช้ java เขียน ซึ่งเป็นภาษาแบบ OOP มีการ override เยอะมากๆ แค่ onCreate ก็ตัวนึงแล้วเนอะ ไหนจะ public protected private ไหนจะ final static abstract บลาๆ เอาเป็นว่าใครรู้สึกว่าไม่เก่ง เขียนไปเขียนมาก็เก่งเอง แถมเข้าใจง่ายกว่าอาจารย์สอนอีก เชื่อเรา 555

3. Design Pattern MVC MVP MVVM style ที่ต้องรู้
หลักๆตามท้องตลาด (มันไม่ควรเรียกงี้ป่ะ) จะมี MVC (Model-View-Controller), MVP (Model-View-Presenter) และ MVVM (Model-View-View Model) แต่ละตัวก็ต่างกันไป

ตัวที่เหมือนกัน Model ก็พวก object class ต่างๆ ส่วน View ก็พวก UI
แล้วที่ต่างกันหล่ะ ปกติมักจะเขียน MVC กัน ซึ่ง Controller ก็คือ Activity หรือ Fragment นั่นเอง ซึ่งเหมือนยัดทุกอย่างรวมกัน ทำให้เราไม่อยากทำ Unit Test เพราะมันเยอะ ถ้า MVP ส่วน Presenter จะเป็นตัวกลางคอยประสานงาน ทำให้ test ง่ายขึ้น ส่วน MVVM ง่ายๆก็คือ Architecture Components นั่นแหละ

บล็อกเพิ่มเติม : MVC MVP MVVM คืออะไร และต่างกันอย่างไร ในนี้อธิบายได้ดีทีเดียวเชียว

4. Android studio ต้องใช้ให้คล่อง
เดี๋ยวนี้ไม่ใช้อิคลิปกันแล้วเนาะ เพราะทาง android เลิก support ไปนานแล้ว
ดังนั้นนอกจากจะใช้ android studio ให้เป็นแล้ว ต้องให้คล่องด้วยนะ

ทาง Google Developer ได้สรุป key ลัดที่ใช้ ทั้ง windows และ mac เราสามารถปริ๊นแปะไว้ดูได้
(ความจริงคือไม่มีเวลาสรุป เลยเอามาแปะ นอกจากง่ายแล้ว ยังครบด้วย)
https://developer.android.com/studio/intro/keyboard-shortcuts.html

5. Fragment ใช้เถอะ ชีวิตจะได้ง่ายขึ้น
เนื่องจากการใช้ activity มันรองรับ layout แบบ 1:1 ดังนั้น การใช้ fragment เป็นการแบ่งส่วนต่างๆในหน้านั้นๆ โดยใช้ activity เป็นคนแปะ เช่น การแสดงผล layout หลายๆแบบในหน้าเดียว การมีปุ่มสักอย่างลอยอยู่มุมขวาล่างตลอดเวลาที่เลื่อนจอ เป็นต้น ทำให้จัดต่างส่วนต่างๆได้อย่างมีโฟกัส ไม่มึนงงสับสน

ตัวอย่างการใช้งานแบบคร่าวๆ ทดลองทำ android application ของเล่นไก่ยาง

6. หัดใช้ RecyclerView
ยุคนี้ไม่ใช้ ListView กันแล้ว เขาใช้ RecyclerView กัน ซึ่งจะสอดคล้องกับข้อที่แล้ว

บล็อกเพิ่มเติม : ทำแอปสตรีมมิ่งของตัวเองกันเถอะ ep 1 : เพราะอะไร ทำไมถึงใช้ RecyclerView แทน ListView (หนึ่งในสาเหตุที่รีบปล่อยอันนี้ เพราะจะได้เข้ากับบล็อกนี้พอดี)

7. การจัด layout และ material design
เนื่องจากหน้าจอแอปหน้าต่างๆที่เราใช้ มีการทำ UI และ UX ผ่านการทดสอบมาว่า compatable กับ user ดังนั้นการจัด layout เป็นเรื่องจำเป็น ซึ่งไม่ได้ยากอะไร ส่วนใหญ่ใช้ LinearLayout RelativeLayout ไม่เกินนี้แน่นอน ส่วนพวก padding และ margin ก็กะๆเอาว่าที่ designer ทำมา ในแอปจริงมันหน้าตาตรงกันไหม

สิ่งสำคัญนอกจากเรื่องการคำนวณขนาดของ Drawable ที่ใช้ในแอปกับหน้าจอต่างๆแล้ว
ยังมีเรื่องของการนำ UI ที่ designer ออกแบบไว้มาใช้ด้วย โดย UI designer จะใช้ Sketch ในการทำ layout และแชร์ผ่าน zappin ให้เรานำ resource ไปใช้ในแอปได้ แถมมีบอกเรื่องขนาดตัวอักษร font ที่ใช้ padding margin สี โอ้ยยย เยอะแยะ

เราหยิบรายละเอียดของ workshop นึงสำหรับสาย Designer มาให้ Developer เข้าใจอย่างคร่าวๆ ว่ากรอบการทำงานเป็นประมาณไหน

ref: https://www.eventpop.me/e/2488

8. dimension ต่างๆ และขนาดหน้าจอพิศวง
คือเราต้องทำแอปให้รองรับกับ tablet ได้ด้วย อาจจะต้องมีการทำ layout ขนาดเพิ่มเติมขึ้นมาโดยเฉพาะ ซึ่งอาจจะทดสอบแต่ละขนาด แล้วแก้กันไป

อันนี้แคปจากคอร์สพี่เนย สำหรับเรื่องของ dimension ต่างๆ ก็ไม่เกินนี้แหละ

9. ใช้ library ตามท้องตลาดที่มีอยู่อย่างเหมาะสม แต่ไม่ควรผูกติดจนเกินไป
เช่น ใช้ retrofit เพื่อรับ json เข้ามา ใช้ gilde เพื่อโหลดรูปภาพมา
แต่ ButterKnite นี่ API version 26 ไม่รองรับแล้วนะ เปลี่ยนทีล้องห้ายหนักมาก

และเราต้องเข้าใจการทำงานพื้นฐานระหว่างมี library กับไม่มี library ด้วยนะ

10. การ get ข้อมูลจาก Json มาแสดง
แอปส่วนใหญ่เลยนั้นไซร์ จะมีการเชี่อมต่อกับ API ดังนั้น เราจะต้องเข้าใจการทำงานของ API นั้นๆว่าทำงานอะไร ได้อะไรกลับมา ใช้อะไรเรียก ส่วนใหญ่จะใช้ retrofit กันเนอะ

11. ใช้ git ในการทำงานเป็นทีม

การทำงานต้องทำเป็นทีม และแต่ละคนก็รับบทบาทหน้าที่ในแอปตัวเดียวกันต่างกันออกไป ดังนั้นการใช้ version control เป็นเรื่องสำคัญมากๆ และตัวที่นิยมใช้คือ git นั่นเอง มีทั้งใน command line และ GUI ที่เราใช้หลักๆก็ใน Android Studio และก็ SourceTree

บล็อกเพิ่มเติม : [Racap] เดี๋ยวนี้ใครๆก็ใช้ Git กันแล้ว น้องๆรู้ก่อนได้เปรียบนะเออ

12. อย่าใช้ magic number
เพราะเวลาแก้ ก็แก้ค่าที่ตัวแปรนั้นๆเลย โดยเฉพาะการใช้หลายที่ด้วย และจะได้ไม่งงว่าค่านี้คืออะไรวะ
การสร้างตัวแปรมาเก็บค่าแล้วใช้หลายที่ ข้อดีคือแก้ค่าที่ตัวแปรได้โดยตรง โค้ดไม่รก ไม่เฉพาะในโค้ดนะ ใน dimen ของ layout ก็ด้วย

13. เขียนโค้ดให้คนอื่นรู้เรื่อง และสะอาดตาที่สุด
ก่อนอื่นทำความเข้าใจ workflow ของสิ่งที่เราจะทำก่อน และเข้าใจ logic ในสิ่งที่ตัวเองเขียน มีสติทุกครั้งในการเขียนโค้ด ใช้หลักการ clean code คือ เขียนทุกอย่างให้สั้นและเข้าใจง่ายที่สุด แม้ไม่มี comment และ Boy Scout ถ้าเราเห็นอะไรรกหูรกตาก็เก็บกวาดให้เรียบร้อย

และอีกอย่าง ถ้าสามารถรวบได้ก็รวบ ให้คนอื่นๆดึงไปใช้งานได้ง่าย

14. ฝึกทำ test ต่างๆ โดยเฉพาะ Unit Test
เพราะ การทำ Unit Test เป็นหน้าที่ของ Android Developer เนอะ

บล็อกเพิ่มเติม : มาทำความรู้จัก Unit Test สำหรับ Android Developer กันเถอะ

15. Firebase ต้องรู้
Developer ไม่ว่าสายไหนๆต้องรู้จัก Firebase แล้วนะ และนางก็ทำได้หลายสิ่ง ทำให้เราลดความยุ่งยากซับซ้อนในการทำ back-end ทำให้เราสามารถเล่นโน้นนี่ได้มากขึ้น เช่น ทำ API เอง, เก็บข้อมูลจาก user ลง cloud, ทำ chatbot

เดี๋ยวนี้นางกินรวบหลาย service เช่น Analytics, Google Cloud Service, Fabric อีก มากมายหลายสิ่งมาก

16. รู้จักลดขนาดแอปให้มีขนาดเหลือน้อยที่สุดเท่าที่ทำได้
ก็เกิดจากข้อ clean code ด้วยส่วนนึง การใช้ resource ก็ส่วนนึง พยายามใช้ภาพที่มีขนาดเล็กแต่ยังชัดเจนอยู่ ใช้ drawable แทนได้ก็จะดี ถ้าเป็นตัวหนังสือพร้อมรูปก็ไม่ต้องแยกสองชิ้น ใช้ชิ้นเดียวจะโหลดแอปได้เร็วกว่า รูปก็ใช้จาก material design ซึ่งก็ใช้วนไป

บล็อกเพิ่มเติม : Android : การลดขนาดไฟล์ APK

17. Kotlin
คือไม่จำเป็นต้องเขียนเป็นเว้ยย คือเมิงต้องรู้นะว่าคืออะไร (อันนี้หยาบนิดนึงเน้อ)
ในเมื่อนางเป็นภาษา Official ที่สองของ Android Developer ก็ควรจะรู้ไว้ติดตัว บางทีเขาก็ใช้กันเลย และก็ migartion ไม่ยากด้วย แถมใช้ร่วมกับโค้ด JAVA เดิมได้อีก ดีงามอยู่นะ

บล็อกเพิ่มเติม : มาเรียนรู้ Kotlin ที่งาน Kotlin Workshop กันเถอะ

ถ่ายจาก Huji cam

18. ภาษาอังกฤษเป็นเรื่องสำคัญ
เพราะวิทยาการและเทคโนโลยีสมัยใหม่ มาจากต่างประเทศทั้งนั้น เช่น Google I/O
เรารู้ก่อน ย่อมได้เปรียบ ถ้าสนใจเรื่องไหน ก็มีแต่ภาษาอังกฤษทั้งนั้น จะรอ Dev ใจดีแปลไทยก็ แล้วแต่ภาระงานอ่ะเนอะ

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

19. Google It!
สกิลที่สำคัญสำหรับ Developer ทุกสายเลยนะ

ขอเล่าอะไรนิดนึง เราเคยไปลงแข่งที่โรงเรียนสมัยมัธยม ในการทำสืบค้นข้อมูลตามหัวข้อที่กำหนด แล้วทำ presentation บน powerpoint เคล็ดลับ ไม่สิ กฏกติกาตามคะแนนเหรียญทอง เงิน ทองแดง ส่วนนึง ก็คือ keyword ที่ใช้ค้นหานั่นเอง ถ้าใช้ keyword ดี จะทำให้เวลาเราสืบค้นน้อยลง ได้ข้อมูลที่ตรงจุดมากขึ้น และวิชาห้องสมุดสมัย ม.1 ก็สอนวิธีการค้นหาข้อมูลทางอินเตอร์เน็ต

ทั้งหมดทั้งมวลเลยเป็นสันดาน เอ้ยยย นิสัยของเรา เวลาเราเขียนโค้ดติดอะไรก็จะไป search Google ก่อน ถ้าไม่ได้จริงๆก็ค่อยถามพี่ๆเอาเนอะ ทั้งในทีม และใน Thailanf Android Developer ด้วย ซึ่งทุกครั้งที่เราหา จะเจอ stakeoverflow ตลอดเลย ในส่วนนี้ทำให้เราเก่งขึ้นหลายๆด้าน เช่น ทั้งภาษาอังกฤษ การเขียนโค้ดเนอะ

20. พัฒนาตัวเองอย่างสมํ่าเสมอ
คนเราต้องไม่หยุดอยู่กับที่ จริงไหม
ถามว่า Android Developer ต้องรู้อะไรเพิ่มเติม อ่านจากข้อ 0 ได้นะ หรือไม่ก็เพจหรือบล็อกต่างๆ หาไม่ยากหรอกเนอะ

21. ตามข่าวสาร android develop เรื่องเทคโนโลยี และเรื่องต่างๆ ตามสนใจ
นอกจากจะตามเรื่อง Google IO แล้ว อาจจะตามเรื่อง mega trend เช่น big data ด้วย เพราะเราต้องตามโลกให้ทัน จะได้คุยกับคนอื่นรู้เรื่อง

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

22. ไปงาน Event ที่เกี่ยวข้องบ่อยๆ
เช่นงาน Hackathon ถ้าหนักไปอาจจะงานประมาณ Workshop หรือประมาณ Google Dev Fest คนจะเห็นเราตัวเป็นๆเนอะ ทำให้เรารู้จักคนอื่นตัวเป็นๆมากขึ้น และคนรู้จักเรามากขึ้นด้วย

23. ฝึก present ให้เป็น
อันนี้รวมๆ เช่น การแนะนำตัวเอง การนำเสนองานให้คนในทีม ให้ลูกค้า ให้คนอื่นๆเข้าใจ
อย่างฟังใจมี town hall session อันนี้หัวข้อแบบ general มากๆกับ give & take ในทีม
สรุปคือ พูดให้คนอื่นเข้าใจในสิ่งที่เราจะพูดก็พอแล้ว

ในทีม product ของฟังใจมีกิจกรรม Give & Take คือจะเวียนกันพูดเรื่องอะไรก็ได้ที่มีประโยชน์กับทีม ไม่ว่าจะด้าน technique หรือด้านอื่นๆ แลกเปลี่ยนความรู้กัน ของเราเอาเรื่อง Kotlin จากการ Workshop มาแบ่งปัน เพราะคนกดบัตรสามคน เราได้ไปคนเดียว (แอบเล่า คนที่ไปก็คละๆบริษัทกัน แต่วงในนี่ได้สองสามคน คือต้องกดท่าไหนวะ...)

ถ้างานพรีเซนต์ใหญ่ๆต้องมั่นใจในสิ่งที่เรานำเสนอ และอย่าตื่นเต้นเนอะ (พูดแล้วทำไม่ได้ตลอด555)

บล็อกแนะนำ : free workshop "Presentation ให้ทะลุถึงหัวใจ" พร้อมการเตรียมตัวอย่าง strong โดย อาจารย์สมบัติ ทรงเตชะเลิศ

24. รู้จักการ give & take และ sharing
เขียนบล็อกดีที่สุด ห๊ะ บางคนเขาก็ไม่ถนัดป่ะว่ะ

เอาเป็นว่าอธิบาย แบ่งปันความรู้ ตอบข้อสงสัยได้ นอกจากเราจะได้เรียนรู้เพิ่ม ยังได้มิตรภาพดีๆด้วยนะเออ ไม่จำเป็นต้องเขียนบล็อก อัดคลิป tutorial บน youtube (ซึ่งใช้สกิลเยอะกว่าเขียนบล็อกอีก เราลองมาแล้ว) แค่แคปรูปโพสก็ได้แล้วมั้ง ฮ่าๆ

ตัวอย่าง เช่น วันนี้เขียนแชทบอทเสร็จไปอีกขั้นแล้ว เดี๋ยวคนสนใจก็มาถาม มาคุยเองแหละ ว่าใช้อะไรทำ ยากไหม ทำยังไง บลาๆ ถือว่าเป็นการ sharing แบบเนียนๆ (เหรอ)

จากการเขียนบล็อกก็มีคนมาแอดเฟรนด์ใน Facebook เนื่องจากเราเขียนเสร็จแล้วไปแปะตามกรุ๊ปที่เกี่ยวข้อง หรือไม่ก็จาก medium ซึ่งบางคนเรารับ บางคนไม่รับ ซึ่งเป็นส่วนใหญ่นะ แหะๆ ขออภัยด้วยแล้วกันเน้อออ
(ในกรณีที่รับแอดคือรู้จักว่าคนนี้คือใคร หรือไม่ก็รุ่นน้องที่ภาค ที่คณะอ่ะ)

25. Business mindset
ไม่จำเป็นต้องมีหัวการค้าขนาดนั้น หมายถึงเข้าใจธุรกิจ ทั้งที่เราทำงาน และอื่นๆ ทำให้เราเข้าใจลูกค้าและ user มากขึ้น สาย dev เพียวๆอาจจะงงๆว่าแล้วจะไปเรียนรู้ที่ไหน ก็แล้วแต่โอกาสเนอะ ในบล็อกนี้ก็มีให้อ่านอยู่ จากการที่เราไปประกวดงานเถ้าแก่น้อยเทคโนโลยี และไป workshop หรือไปนิทรรศการ หรือไปซื้อหนังสืออ่านก็ได้นี่นาาา เอ้อออ ทำไมลืม

แนะนำให้ลองอ่าน 4P, 4M, Business Model Canvas, digital marketing รวมไปถึงพวกทำการ analytics ทั้งหลาย เพราะข้อมูลถือเป็น asset ของกิจการ จะเอาไปทำอะไรก็ได้ เช่น โปรโมชั่น, content ให้เข้าถึงกลุ่มเป้าหมายมากขึ้น

บล็อกแนะนำเผื่อคนขี้เกียจขุด :
- สิ่งที่ได้เรียนรู้ ในเถ้าแก่น้อย รุ่น 4 ตอนที่ 2 : ขายคล่อง ท่องยุทธจักร กับอาจารย์จรีพร

- สิ่งที่ได้เรียนรู้ ในเถ้าแก่น้อย รุ่น 4 ตอนที่ 7 : รู้จักความต้องการของลูกค้า โดยอาจารย์อัครพงศ์

- business model : how what who

เริ่มรู้สึกว่าใช้งานนางค่อนข้างคุ้มประมาณนึงหล่ะ อิอิ

สรุป เราเองก็ปรับตัวได้ประมาณนึงกับการเป็น Android Developer เต็มตัว ที่ทำงานปัจจุบัน
ทำให้เรามีไฟที่จะทำอะไรมากขึ้น

คิดว่าบล็อกนี้น่าจะเป็นประโยชน์แก่คนอ่านผ่านๆมานะคะ :)

ทำแอปสตรีมมิ่งของตัวเองกันเถอะ ep 1 : เพราะอะไร ทำไมถึงใช้ RecyclerView แทน ListView

สวัสดีค่ะทุกท่าน สำหรับคนที่เป็นสาย android dev แรกๆจะทำ custom listview เพื่อการแสดงผลในรูปแบบเดียวกัน แต่ยังมีปัญหาโดยเฉพาะกับสร้าง view ที่ get data มาจาก json เพราะมันต้องมาสร้างใหม่ทุกอัน ในวันนี้มานำเสนอ RecyclerView ซึ่งน่าจะใช้กันแพร่หลาย ว่าต่างกันอย่างไรในเรื่อง implement code เพื่อให้เข้าใจได้มากขึ้น

ในปีที่แล้วมีซีรีส์ทำแอปบล็อกของตัวเอง ซึ่งยังเหลือ push notification นิดหน่อยที่ยังไม่ได้อัพเดต ในปีนี้เป็นแอปฟังเพลงที่เราทำเอง ใช้ RecyclerView ในการแสดงชื่อไฟล์จาก firebase storage และเล่นเพลงโดยใช้ exoplayer นะจ๊ะ

ปล. โค้ดตัวอย่างขอแปะไว้ที่ gist เนื่องจากตัวโปรเจกยังไม่เสร็จ ยังมีส่วนอื่นๆอีกเนอะ

การแสดงผลขั้นต้น มีปกเพลง ซึ่งตัวเพลงยังไม่ใส่ปก เลยเอา drawable ที่มีมาใส่สลับๆกันไป ชื่อไฟล์ และขนาดหรือความยาวของเพลง layout ต่อ item เป็นแบบนี้

การทำ custom listview มีอะไรบ้าง
แน่นอน adapter สิคุณ การทำงานของ listview คือ จะสร้าง item ที่ละอันจนครบจำนวน เราเลยลองจากการ toast มาแล้วหล่ะ ใน adapter ควร check จำนวน item ที่ getCount() ด้วยนะ ถ้า null หรือ size เป็น 0 บอกตรงๆเลยว่าพังแน่นอนนน (และในที่นี้ก็ยังไม่ได้ใส่ พ่ามมมมมๆๆๆ)

ก่อนอื่นอย่าลืมใส่เจ้า library นี้ ใน build.gradle ของ module ด้วยนะ

implementation 'com.android.support:recyclerview-v7:27.0.2'

รวบโค้ดทั้งหมดเป็นดังนี้

หน้าตาออกมาเป็นแบบนี้

การเปลี่ยนมาใช้ RecyclerView ดีอย่างไร
- ทำงานได้ดีขึ้น
- รองรับทั้ง ListView และ GridView โดยใช้แค่ RecyclerView ตัวเดียวนี่แหละ
- แสดงผลได้ตามต้องการ flexible สุดๆ ใส่จำนวนแถว แนวนอน แนวตั้ง ได้ตามใจ

เรามาเปรียบเทียบการทำงานกันดีกว่า ว่าต่างกันอย่างไร

สมมุตินะ สมมุติ ว่าแอปเราดึงของจาก api ตามจำนวนที่มี ซึ่งมี 20 อันแล้วกัน อันนี้จากประสบการณ์การ debug จริง

ถ้าเป็นคุณ ListView คุณเธอจะทำทีละอันจนครบ 20 อัน เริ่มตั้งแต่ getCount, getItem, getId และ getView ถ้ารับจาก json api มาแล้วต้องแสดงผลต่างกัน getView ก็หนักหน่อย จากนั้นคืน View ออกมาทีละอันจนครบ

ส่วนคุณ RecyclerView ก็สร้าง holder จาก OnCreateViewHolder แล้ว set attribute ต่างๆ เช่น ใส่รูป ใส่ตัวหนังสือ และนับจำนวนด้วย getItemCount แต่เขาจะทำแค่ที่ต้องใช่เท่านั้น ในรูปมี 4 อันนิดๆ ก็สร้างเท่าที่พอใช้ พอเราเลื่อนลงไป เช่น อันที่ 2 อยู่ด้านบน ก็จะสร้างอันที่ยังไม่มี คืออันที่ 5 และ 6 เพิ่มขึ้นมา โดยคืนค่าเป็น ViewHolder แล้วโยนให้ system จัดการ แบบสวยๆ ไม่ต้องเหนื่อยมาก

หน้าตาแอปหลังจากเปลี่ยนมาใช้ RecyclerView แล้ว สังเกตว่า ไม่มีเส้นขีดๆที่แบ่งนะ

และมีจุดนึงที่ต่างกันในตอนนี้ คือ ทำไม RecyclerView คลิกไม่ได้อ่ะ ในขณะที่ ListView คลิกได้ แล้วจะทำอย่างไรดีหล่ะ

สร้าง interface ขึ้นมาตัวนึง ชื่อ onClick แล้วกัน ให้รับ view และ position ภาษาชาวบ้านง่ายๆ คือเรากดที่อันไหนนั่นแหละ จากนั้นเอาไปห้อย implements ซะ แล้ว implement function เพิ่มว่าอยากให้ทำอะไร ในที่นี้คือคลิกแล้วไปหน้าถัดไปนั่นเองงง

ลำดับการทำงาน ตัวที่ implement ก็จะทำหลังตามลำดับโค้ดที่เราเขียน (แต่ไม่แน่ใจว่าตรงอยู่ตรงไหนของ lifecycle นะ ขออภัย)
สุดท้ายโค้ดก็จะออกมาเป็นดังนี้



การประยุกต์ใช้ เลิกใช้ listview กับ gridview ไปเลย
เพราะอะไร เพราะการทำงานที่ไหลลื่นกว่า developer เขียน listview ไม่ถูกวิธีเลยโดนบังคับให้ใช้ RecyclerView เลย ถ้าเราแสดงผลมากกว่า 1 อันต่อแถว

เช่น หน้า Mood ของ Browse ในฟังใจ หรือ แสดงรายชื่อเพลงแบบนี้

ก็ใส่ไปแบบนี้

mRecyclerView.setLayoutManager(new GridLayoutManager(getActivity()
    , 2 //จำนวนแถว
    , GridLayoutManager.HORIZONTAL //แนว
    , false));

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

มาทดลองใช้ 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 ด้วยนะ ลองโหลดมาใช้กันดู

ทดลองทำ android application ของเล่นไก่ยาง

หลังจากที่ได้ศึกษา PWA ก็มีแรงบันดาลใจในการทำแอปตัวนึงขึ้นมา คือ แอปน้องไก่โอ๊คนี่เอง ได้แรงบันดาลใจจาก airborne ที่สามารถทำงานแบบ offline ได้ เลยมาลองกับน้องไก่ดู ตัวแอปไม่มีอะไรซับซ้อนมาก เปิดมาเจอน้องไก่ กดเล่นแล้วมีเสียง ทั้งแบบกดทิ้ง และ แบบกดค้าง

มาดูกันดีกว่าว่าต้องเตรียมอะไรบ้าง

น้องไก่

ถ้ารูปก็มีใน google เยอะแยะเลย แต่ใน pixabay ไม่มีเลย ตัวเสียงต้องทำเอง

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

หน้าตาแอป

เอารูปน้องไก่ที่ถ่ายมาตัดฉากหลัง เพื่อเป็น logo และตัวหน้าแอป ใช้ paint.net ตัดเอา ง่ายดี เพราะเป็น free program จริงๆใช้ photoshop ตามปกติได้เลยแหละ ตามแต่สะดวก

เสียง
แปลงไฟล์เสียง m4a ที่อัดเสียงจากมือถือเป็น wav ด้วยโปรแกรม format factory
เอาไฟล์เสียงที่เราทำการตัดต่อและแปลงไฟล์แล้ว ไว้ที่ <project_name>/app/src/main/res/raw

ลองมือทำกันเลย

เริ่มจาก Activity กับ Fragment หน้าแรก จริงๆมันมีอยู่หน้าเดียวนั่นแหละ 

เราเพิ่ม 2 Fragment บน Activity คือ ตัวหน้าน้องไก่ กับหน้า manual 

ดังนั้นเราจะทำกันที่หน้า Fragment นะ เริ่มจากตัวน้องไก่ก่อน ในส่วนของ layout

จากนั้นมาใส่เสียงกัน ใช้ media player ในการเล่น โดยดักจับหูฟัง listener ที่ ImageView รูปไก่นั่นเอง ในที่นี้จับดักฟังสองแบบ คือ แบบกดทิ้ง setOnClickListener และแบบกดค้าง setOnLongClickListener ซึ่งตอนเรา implement จะ return false มาเป็น default ดังนั้นเปลี่ยนเป็น return true ซะ เพื่อที่สามารถรับ listener ตัวนี้ได้นั่นเอง ไม่งั้นทั้งการกดทิ้ง กดค้าง จะเข้า setOnClickListener ทั้งหมด

ดังนั้นการเขียนโค้ดก็ไม่ยากอะไร ดังนี้

// สร้างตัวแปรขึ้นมา และสร้าง MediaPlayer ให้เล่นไฟล์ sound.wav

// เคยทดลองใส่ไฟล์ mp3 ปรากฎว่าเล่นไม่ได้จ้าาา

MediaPlayer mMedia = MediaPlayer.create(getContext(), R.raw.sound);

//เล่นไฟล์เสียง ถ้าหยุดก็จะเป็น stop() อะไรงี้ แต่อันนี้ไฟล์เสียงสั้นมาก ดังนั้นมันจะหยุดเล่นเองเลย

mMedia.start(); 

ลองเล่นดูกันดีกว่า ...

การเขียนโค้ดไม่ยากเลย อาจจะยากตรงใส่ fragment manual ให้โปร่งใส วิธีแก้ง่ายๆ คือ นอกจากตัดพื้นหลังให้เป็นพื้นใสแล้ว สร้าง view อีกอันโดยให้พื้นหลังเป็นสีชา เพื่อให้ replace ตัว view นี้และดัน fragment น้องไก่ไปข้างหลัง เพื่อให้ user สามารถกดหา manual ได้ ซึ่งรวบไปเป็น function เพราะจะขึ้นมาตอนลงแอปครั้งแรกด้วย แบบนี้

getSupportFragmentManager().beginTransaction()

                .replace(R.id.aboutContainer, AboutFragment.newInstance())

                .addToBackStack(null)

                .commit();

จริงๆ ยากตรงเตรียมไฟล์เสียงมากกว่า ไฟล์สั้นแค่ 1-2 วินาทีเอง
ใครมีไอเดียเพิ่มเติมสามารถบอกกันได้ด้านล่างนี้นะ รออ่าน :)

ตัวแอปสามารถดาวน์โหลดได้ที่
https://play.google.com/store/apps/details?id=com.mikkipastel.chicktoys
และตัว source code ทั้งหมดอยู่ที่ https://github.com/mikkipastel/Chicktoys

มาลองทำหน้าแจ้งปัญหา user ด้วย realtime database จาก firebase กัน

หลังจากที่แอบเล่น firebase มาได้สักพักนึง หลังจากที่ใช้กับแอปบล็อกของตัวเองในส่วน notification และลองทำหน้าเว็บเองโดยใช้ hosting ของ firebase ซึ่งสามารถกดได้ที่เมนู About Me ด้านบนได้เลย อาจจะมีการปรับปรุงหน้าตาในอนาคต (และเอาไปใช้ในแอปด้วย สบายจุงง) และเราก็เอามาใช้ในงานแอปรถเมล์ ที่ต่อยอดจากลุงสุขุม ชื่อว่า busline by Sukhum ซึ่งจะมี 2 phase ใหญ่ๆโดยประมาณ (ลุงสุขุม คือ โปรเจกที่ทำในงานแหกของป้ายุพินนั่นแหละ แต่เรื่องมันยาว ถ้าเสร็จแล้วค่อยเล่าแล้วกัน) ดังนั้นเราเลยจะใช้ตัว login authen.. ในการ log-in เข้ามาในหน้าแอป และตัว realtime database ในการเก็บ feedback ของผู้ใช้ (และมีแถมหน้าเว็บลุงสุขุมพอกรุบกริบ) ดังนั้น เรามาเริ่มกันเลยดีกว่าเนอะ

อธิบายเรื่อง realtime database สั้นๆเนอะ อันนี้เป็น NoSQL เก็บข้อมูลเป็น node ซึ่งทาง firebase ห้ามให้เราเอาไปซ้อนกันเกิน 32 ชั้น ไม่งั้นมันจะใช้เวลาในการโหลดข้อมูลนาน เพราะเนื่องจากมันอยู่ใน server เนอะ เหมาะกับการใช้ในการเก็บข้อมูลของ user บน online การดึง data ที่มีการเปลี่ยนแปลงมาแสดง เช่น อัตราแลกเปลี่ยน ตลาดหุ้น ไม่เหมาะกับการหาข้อมูลอันนึงมาแสดงให้ user ดู (เราลองแล้วมันไม่ work เท่ากับการใช้ SQLite นะ)

มาทำหน้าแอปกันก่อน

ก่อนอื่น มาสร้าง project ใน android studio กันก่อน ซึ่งในที่นี่เราจะใช้ version 2.3 กัน

จากนั้นทำ layout ของแอปออกมาว่าเป็นแบบไหน ของเราเป็นแบบนี้

หน้าแรกจะเป็นการรับ feedback ของ user ทั้งประเภท หัวข้อ และรายละเอียด
หน้าที่สอง คือ หลังจากกดส่งข้อมูลแล้ว จะขึ้นว่าลุงได้รับ feedback แล้วนะเออ

สร้าง activity และ fragment

ในที่นี้ เรามี 1 Activity และ 2 Fragment โดยการทำงานจะเป็นในลักษณะนี้

Activity เราแปะ Fragment ลงไป โดย Fragment อันแรกจะเป็นการกรอกของ user และกด submit เพื่อส่งข้อมูลไปที่ realtime database ของเรา และเมื่อกดเสร็จ ตัว Activity จะรับสถานะการกดปุ่มเพื่อแสดง fragment หน้าที่สอง เห็นหน้าลุงกล่าวขอบคุณ

เพิ่ม firebase เข้ามาในโปรเจกของเรา เพื่อส่งข้อมูล user feedback เข้าไปที่ realtime database

ไปที่เมนู tool -> firebase จากนั้นเลือกตัว realtime database และมีมีแถบของ firebase ขึ้นมาด้านข้าง

1. connect กับ firebase account ของเราก่อน

เมื่อเราเชื่อมต่อกับ firebase ของเราเสร็จเรียบร้อยแล้ว เขาจะขึ้นยืนยันว่าเราเชื่อมต่อไปยังโปรเจกของเราแล้วนะ

2. เพิ่มตัว realtime database ลงไป โดยมันจะเพิ่มให้เราหมดทุกอย่างเลย เราไม่ต้องเพิ่มเอง มันสบายตรงนี้นี่แหละ

3. ไป config สิทธิการอ่านเขียนของ realtime database ของเรา หลังจากที่เราเพิ่ม firebase ลงไปในโปรเจกของเราแล้ว

มาดูใน firebase ดีกว่าเนอะ พบว่า ไม่มีอะไรเลยใน database ของเรา เพราะยังไม่ได้สร้างอะไรนี่เอง

ในที่นี้เราแค่ทดสอบการเขียนข้อมูลลง realtime database เฉยๆ ... เพื่อทดสอบการเขียนข้อมูลลงฐานข้อมูล ส่วน write เลยแก้เป็น true ไปก่อน แล้วค่อยแก้คืนทีหลัง เพราะเรายังไม่ได้ทำตัว auth เนอะ

จากนั้นเราจะเริ่มเขียนโค้ดหล่ะนะ

ไฟล์ข้อมูลใดๆ เราจะเริ่มจากการเขียนข้อมูลก่อนเนอะ แล้วค่อยอ่านข้อมูล

ในกรณีนี้ เราจะเขียนข้อมูลลงไปที่ database ของเราอย่างเดียว

ดังนั้นเพิ่มไปตามรูปด้านล่างก่อน
คืแ ประกาศตัวแปร database ซึ่งเป็นตัวแปร FirebaseDatabase จากนั้นเรามาประกาศ reference ก็คือ จุดที่เราจะเขียนข้อมูลลงไป และถ้าจะเขียนข้อมูลลงไป ก็ใช้ setValue เข้าไปเลย

ด้วยเนื่องตัว database นี้เป็น json ดังนั้น เราจะต้องสร้าง model ขึ้นมาตัวนึง เพื่อให้เราเขียนข้อมูลลงไปแล้วส่งไปยัดใน database เป็นก้อนของข้อมูล 

เมื่อสร้างเสร็จแล้วก็ประกาศตัวแปรตามที่อธิบายไปตอนแรก

โดยตัว reference ของเราเป็น root คือให้ไปชี้ตัวนอกก่อน

จากนั้นมาสร้างชั้นลูก ชื่อว่า user_feedback แล้วเราก็ยัดข้อมูลที่จะใส่ลงไปใน model ที่ทำไว้เมื่อกี้

และ push message เข้าไปใน database เป็นอันจบสิ้น

แต่ถ้า offline หล่ะ ใส่ไปบรรทัดเดียว เลย คือ

FirebaseDatabase.getInstance().setPersistenceEnabled(true);

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

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

สุดท้าย อย่าลืมไปใส่ ProGuard นะเออ ไปแก้ใน proguard-rules.pro ตามความเข้าใจ คือใส่เพื่อบอกว่าเราใช้กับแอปของเรานะ เหมือนปรับความเข้าใจกันว่าตัว database นี้ใช้กับแอปเรา เท่านั้น นะ

จากนั้นลอง run และไปส่อง realtime database ของเราดู ให้รูปมันอธิบายเอาแล้วกัน ง่ายๆ

โค้ดทั้งหมด เป็นดังด้านล่างเนอะ เรายัดไว้ใน gist ถ้าดูยากไปบอกได้นะ



เพิ่มเติมสักนิด
ตัว realtime database นั้น เราสามารถ export ออกมาได้
และสามารถ upload database ที่เป็น json ขึ้นบน firebase ได้
เราไม่สามารถไปแก้อะไรในนั้นได้ตรงๆเท่าไหร่

ผลออกมา เป็นไฟล์ json ดังนี้



มาสรุปจบท้ายกันดีกว่า
- ตัว realtime database มีกฏการเขียนอยู่ 4 อย่าง ในที่นี้พูดถึง read กับ write ซึ่งเราสามารถ set permission ในการเข้าถึงข้อมูล และในที่นี้เราพูดถึงการเข้าถึงแบบผ่าน และไม่ผ่าน Authentication
- ดังนั้นการทำ realtime database ต้องมีการทำ Authentication ในกรณีที่ต้องการการยืนยันตัวตนเพื่อเข้าถึงข้อมูลในแอปของเรา

Reference :
- Document Firebase Realtime Database for Android
- รู้จัก Firebase Realtime Database ตั้งแต่ Zero จนเป็น Hero
- สรุปเนื้อหาและสิ่งที่ไม่ได้พูดใน Firebase Android Codelabs จากงาน I/O Extended Bangkok [ตอนที่ 1]
- สรุปเนื้อหาและสิ่งที่ไม่ได้พูดใน Firebase Android Codelabs จากงาน I/O Extended Bangkok [ตอนที่ 2]
- Android Material Design Floating Labels for EditText