เนื่องจากว่ามีน้องคนหนึ่งได้ทักเจ้าของบล็อกมาเกี่ยวกับปลั๊กอินตัวนี้ ซึ่งเจ้าของบล็อกลองไปนั่งใช้ดูแล้วพบว่ามันเจ๋งดี น่าสนใจไม่น้อย ก็เลยเอามานั่งเขียนบทความให้อ่านกันเล่นๆอีกครั้ง
Mirror เป็นปลั๊กอินสำหรับ Android Studio ที่ทาง jimu Labs Inc. สร้างขึ้นมาเพื่อให้นักพัฒนาสามารถทดสอบ/ออกแบบหน้าจอบนอุปกรณ์แอนดรอยด์ได้สะดวกขึ้นและไวยิ่งขึ้น
คุณเสียเวลาไปมากเท่าไรในการออกแบบหน้าจอ?
ขั้นตอนการออกแบบหน้าจอแอปพลิเคชันเป็น 1 ในขั้นตอนหลักในการพัฒนาแอปพลิเคชันที่นักพัฒนาส่วนใหญ่เสียเวลาไปกับมันไม่น้อยไปจากขั้นตอนเขียนโค๊ดเลยนั่นก็เพราะว่า
• มันต้องรองรับกับหน้าจอขนาดต่างๆ
• ต้อง Build เป็น APK เพื่อทดสอบบ่อยมาก
• Build Project แต่ละครั้ง Gradle ก็ต้องรอนานจนเผลอหลับได้เลย
• จะทดสอบกับหลายเครื่องก็ต้องมากดติดตั้งทีละเครื่อง
• ง่วง
• ง่วง
• และง่วง
ด้วยปัญหาดังกล่าว (ที่ไม่เกี่ยวกับง่วง) จึงทำให้ขั้นตอนการออกแบบหน้าจอเสียเวลาโดยใช่เหตุ ซึ่งส่วนใหญ่ก็คือ Build APK ลงเครื่องเพื่อทดสอบ
แก้ไข Layout แค่นิดเดียว ทำไมต้อง Build APK ใหม่ให้เสียเวลา?
• จัด Layout เสร็จ• ติดตั้งลงเครื่อง
• ไม่ผ่านก็มาแก้
• แก้เสร็จก็ติดตั้งใหม่
• วนลูปไปเรื่อยๆจนกว่าจะเสร็จ
ด้วยปัญหาวนลูปแบบนี้ที่นักพัฒนาหลายๆคนพบเจอ ส่วนหนึ่งมาจาก Gradle ใช้เวลา Build นาน (อาจจะด้วยสภาพเครื่องคอมที่ใช้ด้วย) ที่ทำให้เสียเวลายิ่งกว่าเดิมอีก ซึ่งนั่นคือหน้าที่ของปลั๊กอิน Mirror ที่จะเข้ามาช่วยแก้ปัญหาให้หมดไป
Mirror เป็นปลั๊กอินที่ทำหน้าที่แสดงผลหน้าจอที่ผู้ที่หลงเข้ามาอ่านออกแบบบน Android Studio ให้มาโผล่บนอุปกรณ์แอนดรอยด์ที่เชื่อมต่ออยู่ได้ทันทีโดยไม่ต้องมานั่ง Build APK เพื่อให้การออกแบบหน้าจอทำได้ไวขึ้นและทดสอบกับอุปกรณ์จริงได้ทันที
อยากรู้เป็นยังไงก็ลองติดตั้งดูเลยดีกว่า
สำหรับปลั๊กอินตัวนี้ทำขึ้นมาเพื่อขายโดยเฉพาะ แต่ก็เปิดให้นักพัฒนาเข้าไปทดลองใช้ (Free Trial) ได้ 30 วัน ถ้าถูกใจก็ค่อยซื้อทีหลัง โดยสามารถเข้าไปดาวน์โหลดทดลองใช้งานได้ที่ Mirror Downloads (Free 30-day trial)ให้กดที่ปุ่ม Download Mirror <version> for Android Studio / IDEA จะได้เป็นไฟล์ .zip
จากนั้นก็เปิดหน้า Plugins Setting ของ Android Studio ขึ้นมาแล้วกดเลือก Install plugin from disk...
แล้วเลือกไฟล์ที่ดาวน์โหลดมาเมื่อครู่เพื่อทำการติดตั้งปลั๊กอิน
เมื่อติดตั้งเสร็จแล้วก็จะเห็นว่ามีปลั๊กอินที่ชื่อว่า jimu Mirror ถือว่าเป็นอันเสร็จ ให้ปิดหน้าต่าง Plugins แล้วรีสตาร์ทโปรแกรมก่อน
เมื่อเปิดโปรแกรม Android Studio ขึ้นมาใหม่อีกครั้ง จะเห็นว่ามีไอคอนของปลั๊กอิน Mirror แสดงอยู่ที่แถบข้างบนของโปรแกรม
ปุ่มวงกลมที่มีรูปแอนดรอยด์และมีรูปลูกศรสีเขียวคือปุ่มสั่งงานให้ปลั๊กอินเริ่มทำงาน เมื่อกดแล้วจะมีหน้าต่างแสดงขึ้นมาเพื่อให้ลงทะเบียนก่อนสำหรับเริ่มทดลองใช้งาน ก็ให้กรอกชื่อและอีเมลล์ให้เรียบร้อย แล้วกดปุ่ม Start trial
จากนั้นก็จะมีหน้าต่าง Mirror แสดงขึ้นมาข้างล่าง (เหมือนแบบ Console กับ Logcat) เพื่อเริ่มทำการค้นหาอุปกรณ์แอนดรอยด์ที่เชื่อมต่ออยู่ แล้วลงแอปพลิเคชันสำหรับ Mirror
พร้อมใช้งานแล้วววววว
วิธีการใช้งาน Mirror
ในการใช้งาน Mirror ควรจะ• เรียกใช้งาน Mirror เพียงแค่โปรเจคเดียว
• เชื่อมต่ออุปกรณ์แอนดรอยด์เข้ากับคอมพิวเตอร์ไว้ให้พร้อมก่อนจะเริ่มใช้งาน
• จะใช้เครื่องจริงหรือ Emulator (API 15 ขึ้นไป) ก็ได้
เวลาที่ผู้ที่หลงเข้ามาอ่านแก้ไขไฟล์เสร็จแล้วกดบันทึก (Ctrl + S ก็ได้ ง่ายดี) เจ้า Mirror ก็จะทำการอัพเดทไฟล์ Layout เพื่อไปแสดงผลบนอุปกรณ์แอนดรอยด์ ซึ่งบนอุปกรณ์แอนดรอยด์ก็จะมีแอปพลิเคชันของ Mirror อยู่แล้ว ซึ่งจะทำหน้าที่เชื่อมต่อกับ Mirror ที่อยู่บน Android Studio เพื่อรับส่งข้อมูล Layout ที่จัดไว้
โดยหน้าจอแอปพลิเคชันจะให้เลือกไฟล์ Layout ที่ต้องการจะ Preview ซึ่งไฟล์จะมาจากที่ผู้ที่หลงเข้ามาสร้างไว้ใน res/layout นั่นเอง
เมื่อเลือกเสร็จแล้วก็จะทำการ Preview ให้ทันที เมื่อผู้ที่หลงเข้ามาอ่านนั่งจัด Layout แล้วกดบันทึกไฟล์หรือสร้างไฟล์ใหม่ขึ้นมา
เจ๋งดีใช่มั้ยล่ะ?
ทำ Data Binding ลงใน Layout เพื่อ Preview ได้ด้วย
มันคงจะไม่น่าสนใจซักเท่าไรถ้ามันทำได้แค่ Preview Layout ที่สร้างขึ้น Android Studio เพราะในความเป็นจริงหลายๆแอปพลิเคชันจะต้องทดสอบด้วยการทำงานจริง เพราะจะต้องดึงข้อมูลจากที่อื่นมาแสดงผลจึงทำให้หน้าต่าง Preview บน Android Studio ช่วยอะไรได้ไม่มากแต่สำหรับ Mirror นั้น ถูกออกแบบมาให้รองรับการทำ Data Binding ลงใน Layout ที่ Preview ด้วย Mirror ด้วย โดย Mirror จะสร้าง Directory ที่ชื่อว่า mirror ไว้ใน Module หลัก
ซึ่งไฟล์ในนี้จะมีไว้สำหรับ Data Bingding เพื่อ Preview บนอุปกรณ์แอนดรอยด์ สามารถดูวิธีเบื้องต้นได้ที่เว็ปของ Mirror เอง ซึ่งจะมีอธิบายไว้ให้พอสมควรแล้ว
• Tutorial [Jimu Labs]
• Sample data specification
และ Directory ที่ชื่อว่า .res มีไว้สำหรับอยากจะลองใส่ Resource ต่างๆเพื่อไปแสดงใน Preview บนอุปกรณ์แอนดรอยด์ ซึ่งจะแยกออกมาจาก src/res อีกทีหนึ่ง ไม่มีส่วนเกี่ยวข้องกัน
ลองทำ Data Binding ดูเล่นๆ
เจ้าของบล็อกลองสร้าง Layout ชื่อว่า activity_my_sample เพื่อทดสอบการทำ Data Binding ดูapp/src/res/layout/activity_my_sample.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_user_profile"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#eeeeee"
android:contentDescription="@null" />
<TextView
android:id="@+id/tv_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:text="..."
android:textSize="30sp" />
</LinearLayout>ก็จะเป็น Linear Layout ธรรมดาๆที่มี Image View และ Text View อยู่ข้างในมีการกำหนด ID เรียบร้อย
ทุกครั้งที่สร้าง Layout ขึ้นมาใหม่ เจ้า Mirror จะสร้างไฟล์สำหรับทำ Data Binding ให้กับ Layout นั้นๆทันที โดยไฟล์จะอยู่ใน mirror
ลองเพิ่มภาพที่จะใช้ Preview ใน Image View ลงใน .res (แยกตาม dpi ด้วยก็ดีนะ)
จากนั้นเปิดไฟล์ของ activity_my_sample ใน mirror ขึ้นมา จะเห็นว่า Mirror ได้ Generate คำสั่งเตรียมไว้ให้แล้ว
โดยแท็กที่อยู่ภายใน <_content> จะเป็น View ID ที่สร้างไว้ใน Layout โดยจะใช้ชื่อ ID นี่แหละเป็นแท็กสำหรับกำหนดข้อมูล
เจ้าของบล็อกก็ลองกำหนดค่าลงไปดังนี้
mirror/main/activity_my_sample.xml
<screen>
<_content layout="@layout/activity_my_sample">
<iv_user_profile src="@drawable/img_avatar" />
<tv_user_name text="Hello World"/>
</_content>
</screen>
พอกดบันทึกไฟล์ Preview ที่แสดงอยู่บนอุปกรณ์แอนดรอยด์ก็จะอัปเดตใหม่ทันทีแล้วแสดงข้อมูลตามที่เจ้าของบล็อกได้กำหนดไว้
แต่ถ้ากำหนดค่าผิด เช่น Resource ID ไม่ถูกต้อง (เพราะใน Android Studio จะไม่มีแจ้งเตือนเวลาหา Resource ของ Mirror ไม่เจอ) ก็จะใช้วิธีแจ้งเตือนผ่านทางอุปกรณ์แอนดรอยด์แทน
และที่เจ้าของบล็อกชอบคือ แม้แต่ List View ก็สามารถ Binding Data ได้เช่นกัน จะ Custom List View ก็ได้ เพราะ Mirror มีคำสั่งพร้อมรับมือแล้ว
ไม่ว่าจะเป็น Fragment, ViewPager, Action Bar, Custom Font หรือ Style Resource ก็รองรับหมด
จึงทำให้ Mirror สามารถตอบโจทย์นักพัฒนาได้ค่อนข้างดี ในเวลาที่จัด Layout เสร็จแล้ว แต่อยากจะลองทดสอบกับข้อมูลจริงๆดู ก็ไม่จำเป็นต้อง Build ลงอุปกรณ์แอนดรอยด์ทุกๆครั้งแล้วนั่งแก้ไขไปเรื่อยๆให้เสียเวลา เพียงแค่ Binding ข้อมูลจำลองลงไปแล้วให้ Mirror แสดง Preview ให้ดูทันทีก็จะช่วยลดเวลาไปได้เยอะเลย
ลดระยะเวลาในการออกแบบหน้าจอให้น้อยลง
นอกจากนี้ Mirror ก็ยังเข้าใจใส่ลูกเล่นให้นักพัฒนารู้สึกว่า Mirror มันทำให้ชีวิตง่ายขึ้นและไวขึ้นดด้วยการใส่ข้อความแสดงบอกในเวลาที่นักพัฒนาใช้ Mirror ว่าประหยัดเวลาไปได้เท่าไร โดยจะมีวิธีคำนวณของ Mirror เอง ซึ่งสามารถไปกดได้
ทดลองฟรี 30 วัน ถ้าชอบก็ค่อยซื้อ
ปลั๊กอินตัวนี้ทดลองใช้งานได้ฟรี 30 วัน ถ้าผู้ที่หลงเข้ามาอ่านคนใดติดใจและอยากจะซื้อ ก็จะมีให้เลือกซื้อสองแบบระหว่าง Personal License กับ Commercial License แต่ราคาก็สูงเอาเรื่องอยู่เหมือนกันนะ
สรุป
ถ้าถามว่าดีมั้ย? ก็ดีนะ แต่ถ้าถามแพงมั้ย? ก็แพงนะ โดยเฉพาะ Personal License แต่ถ้าเจ้าของบล็อกอยู่ในทีมพัฒนาที่มีมากกว่าสองสามคนขึ้นไป และมีอุปกรณ์ให้ทดสอบหลายๆเครื่อง ก็น่าซื้อตัว Commercial License อยู่เหมือนกัน เวลาออกแบบหน้าจอก็ต่ออุปกรณ์แอนดรอยด์เข้ากับคอมพิวเตอร์ให้หมดซะ แล้วใช้ Mirror นี่แหละ Preview พร้อมๆกันไปทุกเครื่องเลย จะประหยัดเวลาในการพัฒนาไปได้เยอะมากๆเลยนะและจากการทดลองใช้งานดูก็พบว่ายังมีปัญหาเล็กๆน้อยๆตอนใช้งานอยู่ อย่างเช่น ลบ Layout บางตัวทิ้ง แล้วบนอุปกรณ์แอนดรอยด์ยังขึ้นรายชื่อให้เลือกอยู่ เป็นต้น แต่ก็ใช้งานหลักๆได้ไม่มีปัญหาอะไร
อยากจะลองใช้หรือสนใจรายละเอียดก็ลองเข้าไปดูในเว็ปของผู้พัฒนาได้เลย Mirror [Jimu Labs]