iOS

[iOS] การทำให้ UITableView ไม่แสดง Separator สำหรับ Cell ที่ว่าง

ผมคิดว่าคนที่พัฒนาแอพ iOS คงจะเคยเจอปัญหาว่า UITableView จะแสดงเส้นคั่น (separator) สำหรับ cell ที่ว่างกันมาบ้าง ตามรูปนี้ครับ

บล็อกนี้ผมจะเสนอวิธีง่ายๆ ที่จะแก้ปัญหานี้ครับ

สรุปการใช้งาน Cordova (PhoneGap)

Cordova จะทำงานร่วมกับ SDK ของ Mobile แต่ละ Platform ดังนั้นก่อนติดตั้ง Cordova ต้องติดตั้ง SDK ของแต่ละ Platform ก่อน

 

การติดตั้งบน Windows

  1. Java JDK  เวอร์ชั่น 6 ขึ้นไป ทดลองคำสั่ง java -version
  2. Android Studio http://developer.android.com/sdk
  3. ติดตั้ง Node.Js ดาวน์โหลดได้จาก http://nodejs.org
    • เมื่อติดตั้งเสร็จแล้วทดลองด้วยคำสั่ง npm -v ถ้าใช้ไม่ได้ลองรีบูทเครื่อง
  4. ติดตั้ง Git ดาวน์โหลดจาก http://git-scm.com เสร็จแล้วกำหนด PATH ไปที่ไดเรกทอรี่ bin ของ Git ด้วย แล้วทดลองคำสั่ง git –version
  5. ติดตั้ง Apache Ant ดาวน์โหลด zip ได้ที่ http://ant.apache.org/
    • แล้วคลาย zip ไปที่โฟลเดอร์ใดก็ได้
    • เพิ่ม ANT_HOME ให้ชี้ไปที่พาทของ Ant เช่น C:\ant\Apache-ant-x.x.x
    • เพิ่มโฟลเดอร์ bin ของ Ant ไปที่ PATH
    • ทดลองคำสั่ง ant -version
  6. ติดตั้ง Cordova โดยพิมพ์คำสั่ง npm install -g cordova
    • แล้วลองคำสั่ง cordova -v

 

ติดตั้งบน Mac

  1. Java JDK  เวอร์ชั่น 6 ขึ้นไป ทดลองคำสั่ง java -version
  2. Android Studio http://developer.android.com/sdk
  3. ติดตั้ง Node.Js ดาวน์โหลดได้จาก http://nodejs.org
    • เมื่อติดตั้งเสร็จแล้วทดลองด้วยคำสั่ง npm -v
  4. ติดตั้ง Git ดาวน์โหลดจาก http://git-scm.com แล้วทดลองคำสั่ง git –version
  5. ติดตั้ง Apache Ant
    • ใช้คำสั่ง brew install ant ถ้าหากไม่มีคำสั่ง brew ให้ติดตั้ง Homebrew ด้วยคำสั่ง
    • ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”ทดลองคำสั่ง ant -version
  6. ติดตั้ง Cordova โดยพิมพ์คำสั่ง npm install -g cordova
    • แล้วลองคำสั่ง cordova -v
  7. ติดตั้ง Xcode
  8. ติดตั้ง ios-sim ด้วยคำสั่ง sudo npm install ios-sim -g
  9. ติดตั้ง ios-deploy ด้วยคำสั่ง sudo npm install -g ios-deploy
    • ทดลองรัน iOS Simulator โดยเรียก
      • ios-sim –version
      • ios-sim start
      • ios-sim start –retina –tall

 

การสร้าง App เบื้องต้น

  1. สร้างโปรเจคใหม่
    cordova -d create ชื่อโฟลเดอร์แอพ ชื่อแพคเกจ ชื่อแอพ
  2. เพิ่ม platform
    cordova platform add ios
    cordova platform add android
    หรือ
    cordova platform add ios android

    • ถ้าต้องการดู platform ที่เพิ่มเข้ามาแล้ว
      cordova platform ls
    • ถ้าต้องการลบ platform
      cordova platform remove android
  3. การสั่ง Build
    cordova build
    หรือ
    cordova build android
    cordova build ios
  4. การสั่ง Run บน Simulator
    cordova emulate android
    หรือ
    cordova emulate ios
  5. การสั่ง Run บนมือถือจริง (ถ้า Windows ต้องติดตั้ง driver ก่อน, แต่ Mac OS X สามารถเสียบอุปกรณ์ได้เลย)
    cordova run android
    หรือ
    cordova run ios

เรียนรู้การสร้าง Mobile application จาก Facebook

มาลองดูแนวทางการพัฒนา Mobile App จากทีมงานของ facebook กันหน่อย

ที่มา http://www.somkiat.cc/how-facebook-make-mobile-app/

ในงาน @Scale Conference
ทีมพัฒนา Mobile application ของ Facebook ได้มาพูดเกี่ยวกับ
การพัฒนาระบบเพื่อให้สามารถทำงานได้บนมือถือและ network ต่างๆ ทั่วโลกได้

มาดูกันว่าทีมพัฒนาของ Facebook ทำการพัฒนา สร้าง product กันอย่างไร
เพื่อรองรับการใช้งานจากคนทั้งโลกกันอย่างไร

สิ่งที่ทางทีมพัฒนาชี้ประเด็นคือ

เรื่องความเร็ว network ของมือถือ
ซึ่งเป็นปัญหาแรกๆ ที่พบเจอ โดยสรุปได้ว่า

  • ในประเทศสหรัฐอเมริกา นั้นความเร็วของเครื่องข่าย 3G ใช้เวลาในการรับส่งข้อมูลต่อครั้ง 280 milisecond
  • ในประเทศอินเดีย นั้นความเร็วของเครื่องข่าย 3G ใช้เวลาในการรับส่งข้อมูลต่อครั้ง 500 milisecond
  • ในประเทศบราซิล นั้นความเร็วของเครื่องข่าย 3G ใช้เวลาในการรับส่งข้อมูลต่อครั้ง 800 milisecond

โดยทีมพัฒนาที่ทำการวิจัยสามารถสรุปกลุ่มผู้ใช้งาน facebook ไว้ง่ายๆ ว่า

Not everyone is on a fast
Not everyone has a large screen
Not everyone is on a fast network

ดังนั้น สิ่งที่ทางทีมพัฒนาจะเน้นเป็นพิเศษ คือ เรื่องปัญหาของ network

สิ่งที่ต้องจัดการประกอบไปด้วย 3 เรื่องคือ

  1. ขนาดของรูป ที่ต้องทำการ download ผ่าน network
  2. การตรวจสอบคุณภาพของ network ก่อนเลือกวิธีการทำงานให้เหมาะสม
  3. การแอบดึงข้อมูลบางส่วนมาก่อน

1. การลดขนาดของรูป

รูปแบบที่ใช้สำหรับรูปภาพคือ WebP
ซึ่งสร้างด้วยทีมของ Google ในปี 2010

จากข้อมูลของการใช้งาน Facebook for Android นั้นพบว่า 85% คือรูปภาพ
และ Facebook messenger นั้นพบว่า 67% คือรูปภาพ
ดังนั้น ถ้าสามารถลดขนาดของรูปภาพได้
ก็จะทำให้ application ทำงานได้เร็วขึ้น

ดังนั้นสิ่งที่ทีมพัฒนาต้องทำมีดังนี้

สิ่งแรกคือ การส่งข้อมูลที่เหมาะสมมาให้ผู้ใช้งาน
หมายความว่า จะทำการตรวจสอบก่อนว่าผู้ใช้งานนั้นเป็นอย่างไร
เช่นมีความเร็วของ network ความสามารถของมือถือ หรือ tablet และ ขนาดของหน้าจอ เป็นต้น
ทำให้ server สามารถเลือกข้อมูลที่เหมาะสมได้ เช่น ขนาดของภาพ
จะได้ไม่เปลือง bandwidth และ เปลืองเวลาในการรอของผู้ใช้งาน

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

สิ่งต่อมาคือ การเปลี่ยนรูปแบบของรูปภาพมาอยู่ในรูปแบบ WebP
ซึ่งสามารถลดขนาดของภาพ JPEG ลงไปได้ 7% เมื่อต้องการคุณภาพเท่ากัน
แต่ถ้าทำการเปลี่ยนแปลงค่าต่างๆ เช่นคุณภาพ สามารถลดขนาดภาพลงไปมากกว่า 30%
สามารถลดขนาดภาพลงไปมากกว่า 80% ของรูป PNG
เป็นการปรับปรุงที่ได้ผลดีมากมาย

สำหรับใน Android เวอร์ชั่นเก่าๆ ที่ไม่สนับสนุน WebP นั้น
ใช้วิธีการส่งข้อมูลเป็น WebP แต่ในการแสดงผลยังเป็น JPEG อยู่

2. การตรวจสอบคุณภาพของ Network

สิ่งหนึ่งที่ทางทีมพัฒนาได้เรียนรู้ก็คือ อย่าตัดสินเรื่องความเร็วของ Network ต่างๆ
ตาม technology เช่น 2G, 3G, LTE และ WIFI เป็นต้น
เพราะว่า แต่ละประเทศมันมีความเร็วที่แตกต่างกันมากพอสมควร

ดังนั้น สิ่งที่นำมาใช้ในการตัดสินใจก็คือ
การวัดจากความเร็วจากผู้ใช้งานที่เกิดขึ้นจริงๆ ณ ขณะนั้น

โดยจะวัดจากความเร็วของ network ที่ใช้งานตอนนั้น
ซึ่งทุกๆ response ที่ส่งกลับมาจาก server ของ Facebook
จะมี RTT (Round Trip Time) มาให้เสมอ เพื่อใช้ประมาณเวลาการรับส่งข้อมูล
และการตัดสินใจว่าจะส่งข้อมูลมาให้ด้วยคุณภาพสูงหรือต่ำเพียงใด
แบ่งออกเป็น 4 ระดับคือ

  1. Poor มีความเร็วน้อยกว่า 150kbps
  2. Moderate มีความเร็วระหว่าง 150-600kbps
  3. Good มีความเร็วระหว่า 600-2000kbps
  4. Excellent มีความเร็วมากกว่า 2000kbps ขึ้นไป

เมื่อรู้คุณภาพของ network แล้ว สิ่งที่จะต่อไปที่ต้องทำก็คือ

  • การเพิ่มหรือลดคุณภาพของข้อมูล
  • การส่งข้อมูลแบบขนานหรือไม่
  • การเปิดและปิด Auto play ของ VDO
  • การแอบดึงข้อมูลบางอย่างมาก่อน

ในการทดสอบนั้น ทีมพัฒนาได้สร้างระบบภายในที่เรียกว่า  Air Traffic Control ขึ้นมา
เพื่อจำลองรูปแบบต่างๆ ของ network
ทำให้เจอปัญหาที่ไม่คาดคิด บนระบบ network ที่ช้าได้อย่างรวดเร็ว
ซึ่งทำให้แก้ไขได้อย่างรวดเร็ว

3. การดึงข้อมูลบางส่วนมาไว้ก่อน (Prefetch content)

เนื่องจากปัญหาความเร็วของ Network ดังนั้นระบบอาจจะต้องทำการดึงข้อมูลบางอย่าง
ที่ยังไม่ถูกใช้งานมาเก็บไว้ก่อน ซึ่งข้อมูลเหล่านี้จำเป็นต่อการทำงาน

ยิ่งถ้า network ที่ช้าๆ แล้วจะพบว่า จะทำการดึงข้อมูลมาไม่ทัน
เช่นดึงข้อมูลมาไม่ได้ แล้ว ผู้ใช้งานจะพบเจอกับรูปภาพหน้าขาวขึ้นมา (ผมเจอประจำเลย)

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

แต่สิ่งที่ต้องคำนึง คือ การดึงข้อมูลต้องไม่ไปทำให้ผู้ใช้งานสะดุด
หรือ block การใช้งานของผู้ใช้งานโดยเด็ดขาด
นั่นคือต้องแยกการทำงานระหว่าง foreground process และ background process ออกจากกัน
รวมทั้งไม่ดึงข้อมูลที่ผู้ใช้งานไม่จำเป็นมาด้วย

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

ปิดท้าย

ทีมพัฒนานายังบอกด้วยว่า Facebook application for Android นั้นมีไฟล์ APK มากกว่า 20 ไฟล์
ซึ่งแยกตาม API Level, ขนาดของหน้าจอ และ สถาปัตยกรรมของ CPU อีกด้วย
มันไม่ใช่เรื่องที่ง่าย หรือ เล่นๆ เลยนะ

ดังนั้นลองนำแนวคิดเหล่านี้ ไปใช้เพื่อปรับปรุง Mobile application กันได้
น่าจะมีประโยชน์ไม่มากก็น้อยครับ

Reference VDO