ตอนที่ 3 ใช้ CustomTabs แทน WebView สั่งเปิดโฮมเพจ
<introduction>
หลังแชร์ App และ .zip ของ Project ทั้ง 12 ตัว ที่ผมได้เปิด new project และ build เป็น APK ตาม Activity ที่ Android Studio มีมาให้ ใน ตอนที่ 1 เพื่อเป็นการเริ่มต้นสร้างความเคยชินในการสร้าง App เชิงสำรวจ IDE Tool ก็ต่อด้วยการสร้าง App ที่ใช้ WebView เพื่อเชื่อมออนไลน์แล้วนำ Homepage ตาม URL มาแสดงใน App
หลังจากนั้นก็พบว่า Oatrice เขียนเรื่อง “ยังใช้ Webview กันอยู่หรือ Chrome custom tabs เร็วกว่า 2 เท่านะ รู้ยัง” พอเข้าไปลองดูก็พบว่าเป็นการสั่งให้ Browser ทำงาน โดยส่ง URL ในแอพ ซึ่ง pasko ได้แชร์ code ของ project ที่สมบูรณ์ไว้ที่ github.com ซึ่งเข้าไปดู code แล้วเห็นว่ามีการใช้งาน CustomTabs ร่วมกับ WebView ได้อย่างลงตัว
ใน Post ตอนนี้้ ผมจะพูดถึงการติดตั้ง CustomTabs ผ่าน Dependencies และการเขียน Code เพื่อเรียกใช้อย่างง่าย ตั้งชื่อว่า Openweb2 ซึ่งต่อมาจาก ตอนที่ 2 นั่นเอง
</introduction>
<process>
กระบวนการในการพัฒนา APP
เพื่อติดตั้ง CustomTabs และเขียน code เรียกใช้งาน
สั่งเปิด Homepage ตาม URL ใน Browser ของ Smartphone
มีขั้นตอน ดังนี้
1. หลังอ่านเรื่อง CustomTabs ไปพักหนึ่ง พบว่า สิ่งที่ไม่ชัดเจน คือ Version เพราะจะติดตั้งก็ต้องรู้เลข Version แต่ละคนเขียนเล่าไว้ในแต่ละช่วงเวลา อ้างเลข Version ไม่ตรงกัน Copy Code ไปติดตั้งใน dependencies ก็จะมี Error ใน Warning แน่เหมือนแช่แป้ง ดังนี้ผมจึงเข้า Support Library Packages – https://developer.android.com เพื่อดูเลขรุ่นล่าสุด ผมใช้วิธีกดปุ่ม Ctrl+F หาคำว่า “customtabs” เมื่อ 2 สิงหาคม 2560
ก็พบครับ ใช้รุ่นนี้เลย
com.android.support:customtabs:26.0.0
2. การติดตั้ง Package ใหม่ ต้องเข้าไปใน Project ที่อยู่ใน IDE
ดังนั้นจึงสร้าง New Project แบบ Empty Activity ให้เรียบร้อย แล้วก็รอให้ project ติดตั้งจน Gradle build finished จนพร้อมในหน้า IDE เป็นขั้นตอนปกติเลยครับ
3. การติดตั้ง CustomTabs ใน Project ของเรา
ต้องเข้าใน Project Explore หรือ Project Windows หรือ Project Tab ที่อยู่มุมบนซ้าย
จะพบ 2 กลุ่มงาน คือ app กับ Gradle Scripts
ให้คลิ๊ก Gradle Script, build.gradle(Module: app)
แล้วพิมพ์คำว่า
compile ‘com.android.support:customtabs:26.+’
ก่อน testCompile ‘junit:junit:4.12’
ผมใส่ 26.0.0 แล้วติด Error พอใช้ 26.+ เหมือน Package ด้านบน ก็ผ่านครับ
4. จากนั้น Clear Project ผ่าน Menu Bar, Build
แล้วนั่งรอระบบแป๊ปนึง รอ Gradle Build Running
ผลการ Build แล้วก็ไม่พบ Message อะไรให้กวนใจ
แล้วเข้าไปดูว่าเรียบร้อยไหม ผ่าน Project Structure, Module, App, Dependencies
ก็จะพบว่า Package ของเรา เข้าไปรอให้ถูกเรียกใช้เรียบร้อยแล้ว
5. เนื่องจาก CustomTabs คือ Package ที่สามารถเรียก Browser มารับ URL ที่ App ส่งไปให้ ผมนำเสนอตัวอย่างใน openweb2 โดยแก้ไขเฉพาะแฟ้ม MainActivity.java โดยไม่ไปแก้ไข Layout ใน activity_main.xml ใน emulator แม้ไม่มี Chrome ก็เรียก Browser ในเครื่องมาแสดงผล แล้วส่งไปให้ Smart Phone ก็จะมีการถามว่าจะใช้ Browser ตัวใดในการเปิด และ Code ที่ใช้มีเพียงไม่กี่บรรทัด ที่เป็นหน้าที่หลักของ CustomTabs หากสนใจเพิ่มเติม ต้องเพิ่มกันเองตามสะดวกล่ะครับ สำหรับ openweb2.apk กับ openweb2.zip ผมแชร์ใน 4shared.com ที่อยู่ด้านล่างแล้ว
https://gist.github.com/thaiall/9551cc6b1f7508663f372f760518b59f
</process>
https://www.4shared.com/folder/AgIkeXaS/android.html
<website_guide>
+ https://developer.android.com/topic/libraries/support-library/packages.html
+ https://guides.codepath.com/android/Chrome-Custom-Tabs#next-steps
+ https://github.com/GoogleChrome/custom-tabs-client/blob/master/Using.md
+ https://developer.chrome.com/multidevice/android/customtabs
+ https://rominirani.com/gradle-tutorial-part-6-android-studio-gradle-c828c5639bb
+ http://www.thaiall.com/android
</website_guide>
หมายเหตุ
ถ้าสนใจติดตามเนื้อหาในบล็อกนี้ สามารถ subscribe ด้วย email ที่อยู่ข้างขวา หรือ click here
