การเปิด deep link เข้าหน้า android app โดยย่อ และทดสอบอย่างง่ายๆ

android Nov 16, 2017
สมมุติว่าอยากอ่านที่ฟังใจสัมภาษณ์น้องแคนแคนคนคลูแห่ง BNK48 ในแอปฟังใจ จะทำอย่างไรดีน๊าาา ลิ้งค์อยู่นี่นะ https://www.fungjaizine.com/feature/my_ears/cancan-bnk48

สวัสดีทุกท่าน วันนี้มาแบบง่ายๆ เบาๆ ถึงอาหารคลีนมันจะไม่แซ่บ แต่มีประโยชน์นะเออ กับการทำ deep link นั่นเอง (draft ไว้ตั้งแต่ช่วงเพลิงบุญตอนหลังๆ หลังใจเริงตายยกพินัยกรมให้ลูก ก็ไปเขียนบล็อกเรื่องอื่น คนจะเก็ตมุขไหมนี่ เล่นทันไหม)

ในแอปฟังใจนั้น ฟังก์ชั่นการแชร์จะมีหลายอย่าง เช่น แชร์เพลง ศิลปิน เพลย์ลิสต์ รับแจ้ง feedback อีกทั้งสามารถอ่านตัว https://www.fungjaizine.com/ ได้ด้วย ซึ่งก่อนหน้านี้มีอยู่แล้ว แต่เราจะต้อง improve นิดหน่อย ดังนี้

  • ตัว fungjaizine เพิ่งเปลี่ยน url จาก www.fungjai.com/zine ไปเป็น www.fungjaizine.com ดังนั้นต้องเพิ่มใน AndroidManifest ไม่งั้นไปหน้า chrome ทันที เช่น อ่านบทสัมภาษณ์น้องสองป๋องในเว็บฟังใจดูดีกว่า
5 เพลงโปรดของ แคนแคน BNK48 และเหตุผลที่เธออยากเป็นนายกหญิงคนที่สอง!? - Fungjaizine
แคนแคน—นายิกา ศรีเนียน คือเด็กสาวน่ารัก อารมณ์ดี ด้วยภาพจำที่เธอเป็นหนึ่งในสมาชิก BNK48 ไอดอลของมวลชน แต่ในอีกมุมหนึ่งเธอก็มีมิติของความเป็นผู้หญิงน่าค้นหาที่ใครจะรู้ว่า เด็กสาวมากความสามารถทั้งร้องและเต้นคนนี้จะชอบดูหนังไซไฟและ Star Wars ชอบเพลงอินดี้ แถมยังอยากเป็นนายกหญิงคนที่สองของไทยอีกด้วย ไปท…
  • android เพิ่งเปลี่ยน player ใหม่เป็น ExoPlayer แล้วยังไม่ได้ทำตัวเปิด Full Player เมื่อ user กดลิ้งค์ฟังเพลงนั้นๆ เช่น ดีเจบุ๊กบิ๊กเปิดเพลงอะไรนี่ แคปชั่นเศร้าจัง กดฟังดูดีกว่า (ลองกดด้านล่างได้, เลือกเพลงนี้เพราะน้องเพลงมา feat. เห้ย เกี่ยวหรอ)

การที่เขายังไม่ลืมอาจเป็นเหตุผลเดียวกับที่เราไม่ลืม เข้าใจแหละ 🌾 #ฟังใจ #djบุ๊กบิ๊กจอมบูดเบี้ยว

Posted by ฟังใจ - Fungjai on Monday, 13 November 2017
  • ไหนๆทำแล้วลองดูตัว playlist กับ artist พบว่า ไปหน้า Activity ที่ควรไปถูกต้อง หรือไม่ เพราะ path มีส่วนที่ซํ้ากันอยู่
  • ส่วนเรื่องการสมัครสมาชิกใน fungjai จะมีส่วนของการ confirm email และ reset password ที่กดจาก link ใน email แล้วก็ policy ด้วย
ความรัก from Mattnimare on Fungjai
ทำเพลงที่ชอบ ชอบเพลงที่ทำ
Listen Tattoo Colour on Fungjai
Tattoo Color : Variety Pop Band from Smallroom
สังเกตได้ว่าลิ้งค์เพลงและศิลปินจะมี https://www.fungjai.com/artists/<artist_name> ที่เหมือนกันอยู่ แต่เพลงจะมี music/<song_name> ต่อท้าย
Popular Song : Fungjai Awards 2017
รวม 20 เพลงที่เข้าชิงรางวัล Popular Fungjai Award 2017 โดยผู้ชนะจะมาจากทุกเสียงโหวตของคุณทุกคน ร่วมโหวตได้ที่ awards.fungjai.com
นั่งจ๋องคุยกับ พี่จ๋อง ผู้อยู่เบื้องหลัง Cat Expo 4 อีกเทศกาลดนตรีที่คุณไม่ควรพลาด - Fungjaizine
ผ่านมา 17 ปีแล้วตั้งแต่ Fat Radio ออนแอร์จนกลายมาเป็น Cat Radio ที่คอยเปิดเพลงแปลกหูให้เราฟังกันทุกวัน ถ้าคลื่นวิทยุนี้คือวัยรุ่นคนหนึ่ง ก็เหมือนเด็กที่เติบโตขึ้นมาอย่างสมบูรณ์และอยู่ในวัยหัวเลี้ยวหัวต่อที่น่าภาคภูมิใจในตัวเองที่สุด เราก็เป็นอีกคนหนึ่งที่โตมากับการฟังเพลงจากคลื่น Fat Radio ประหนึ่งเ…

ซึ่งตรงนี้เราจะไม่พูดโค้ดอย่างละเอียดนะ (ถ้าอยากได้โค้ดละเอียดมากๆก็ google เอานะ) พูดเป็นแนวทางในการเอาประยุกต์ใช้นะ

มาเริ่มทำกันแบบคร่าวๆกันเลยดีกว่า

เราสร้าง Activity นึงขึ้นมา ชื่อว่า DeepLinkActivity.java และเพิ่มใน AndroidManifest แบบนี้

กลับไปหน้า Activity ของเรา พบว่าตัว link มีรูปแบบที่ต่างๆกันจากด้านบน ในที่นี้จะพูดถึง link 4 ประเภทจากด้านบนเนอะ และโค้ดจะร่างคร่าวๆไว้

หลักการทำงาน มันจะ check ก่อนว่าใช่ path ที่เรากำหนดในแอปใช่ไหม ถ้าใช่ จะมี handling app ขึ้นมาในครั้งแรกที่ user ลงแอปนี้และกด link ที่กำหนดไว้ครั้งแรก (ในกรณีไม่ได้ล้าง setting ในเครื่องนะ)

เมื่อกดเลือกแอปแล้ว มันจะมาที่ DeeplinkActivity.java จากนั้นก็จะรับ intent data มาเป็น uri และแปลงเป็น string เพื่อได้ url ที่เรากด

เราสามารถ get host ของ link ที่เรากดได้แบบนี้

host = uri.getHost();

และ get path segment ของ link ที่เรากดได้ดังนี้

pathPrefix = uri.getPathSegments().get(PATH_SEGMENT_FIRST);

จากนั้นเราสิ่งที่เราได้ มาทำการ check เพื่อเข้า condition ในแต่ละ case เช่น ถ้ากด link fungjaizine ก็กดเข้า WebView ไป

if ("www.fungjaizine.com".equal(host)) {
    openWebView();
}

ถ้ากด link playlist ก็จะเข้าหน้า playlist ในแอป

else if ("playlist".equal(pathPrefix)) {
    openPlaylist();
}

ถ้ากด link เพลง หรือ ศิลปิน จะต้องแยกก่อนว่า เป็น link ของ ศิลปิน หรือ เพลง ถ้าศิลปินก็เข้าหน้าศิลปินในแอป ถ้าเป็นหน้าเพลงให้ไปที่ full player เพื่อเล่นเพลง

else if ("artist".equal(pathPrefix)) {
    String song = uri.getPathSegments().get(PATH_SEGMENT_FOURTH);
    if (song != null) {
        playSong();
    } else {
        openArtist();
    }
}

ถ้าอื่นๆหรือเป็น default case ก็ไปหน้าแรกของแอป

else {
    startLaunchScreen();
}

สำหรับ WebView นั้น เราเคยลอง deeplink กับ chrome custom tab มาแล้ว ปรากฏว่าแอปค้างหรือพังไปเลย ดังนั้นมาใช้ WebView แทน เพราะนอกจากจะ back to basic และ ก็เปิดไม่ช้าด้วยนะ แล้วแต่สัญญาณ internet

ก่อนอื่นสร้าง layout หน้า WebView มาก่อน นามว่า activity_webview.xml

จากนั้นสร้าง Activity ขึ้นมาอีกไฟล์ ชื่อว่า WebviewActivity.java ตัว openWebView() ก็จัดการเรียกตัวนี้มา

เมื่อเรากด link ที่เป็น content ก็สามารถเปิดอ่านในแอปของเราได้อย่างชิวๆเลย :)


ให้คุ๊กกี้ทำนายกัน เอ้ยยย มาทดสอบกันก่อนดีกว่า

ทดสอบกับ facebook ว่าเราโพสลิ้งค์เพลงไปแล้ว กดแล้วจะได้อะไร

อีกอันนึงที่เราคิด นั่นคือ พวกลิงค์จาก facebook (เช่น https://l.facebook.com/l.php?u=https://www.fungjai.com/playlists/staff-pick-biweekly-006), twitter (t.co/), หรือ google (goo.gl/) จะเปิดได้ไหมน๊ออ

ใน Facebook ปกติที่เรากดลิ้งเพลงของฟังใจ มันจะไปหน้า chrome custom tab ตาม default ของแอปในสมัยนี้ แต่ถ้าไป enable “Link open externally” ก็สามารถเปิดลิ้งแบบตรงไปตรงมาที่เราทำได้เลย ไม่ต้องกดที่ตัว chrome custom tab นะ

ถ้า UI เปลี่ยนจากนี้ หนูไม่รู้ด้วยนะ

ดังนั้นใน Facebook มันจะเปิดได้ ลองดูตามคลิปนี้ดีกว่า ซึ่งเราอัดคลิปหน้าจอและเอามาแปะรวมกัน

ส่วนพวก twiter หรือ google shortlink ไม่สามารถทำได้ ลองแล้วติดเยอะมาก (เข้าใจว่า มันต้องไปแปลงเองในแอปเราว่าใช่ไหม ไม่ใช่เด้งออก งี้หรอ เสียเวลาและแรงงานอ่ะ) ซึ่งจริงๆไม่ต้องทำก็ไม่เป็นไร แค่เราอยากรู้เฉยๆ แต่ของทวิตเตอร์เรากดแล้วขึ้นมาเลย เพราะแอดมินใส่ลิ้งค์ต้นฉบับด้วยแหละ หรือไม่ twitter เปลี่ยนมาเป็น 280 ตัวอักษรต่อทวิต เลยดีขึ้น?

กดลิ้งค์นี้ปุ๊ป ขึ้นปั้ปเลยจ้า ใครอยากฟัง กดที่ https://www.fungjai.com/playlists/jelly-rocket-relive-crossplay-b-side เพื่อฟังเสียงใสๆของน้องปั้น Jelly Rocket ได้เลยจ้าาา #พื้นที่โฆษณา #ขายของ

มาถึงช่วงการทดสอบ เราคงไม่อยากจะไปที่ facebook, twitter และอื่นๆ เพื่อมากด link ของฟังใจเนอะ โดยเฉพาะตอนที่เรา debug อะเนอะ เพราะกดไปแอปอื่น ก็ออกนอก runing session ของแอปเราแล้วหล่ะ

หลังจากที่ Google it เพื่ออ่านวิธีการทำ deep link ขั้นต้น เราก็ได้เจอวิธีทดสอบการกด deep link โดยเราใช้ ADB หรือ Android Debug Bridge นั่นเอง ตัวนี้นี่จะช่วยในการเชื่อมต่อ device เพื่อทำสิ่งต่างๆ ซึ่งเราจะพิมพ์คำสั่งบน Terminal ใน Android Studio นั่นเอง อันมี format แบบนี้

adb shell am start -W -a android.intent.action.VIEW -d "<url>" <package_of_your_app>

เรามาลองใส่กันแบบนี้ ในที่นี้ลองกดลิ้งเพลง Ai ของเปอติ๊ด มิสวินเท่อร์ ดูแล้วกัน

adb shell am start -W -a android.intent.action.VIEW -d "https://www.fungjai.com/artists/petite/musics/ai-single" com.fungjai

พอพิมพ์ลง Terminal เรียบร้อย นางจะพาไปหน้า Full Player และเล่นเพลงตามโค้ดที่เราเขียนไว้ ถ้า url ที่เราป้อนไปไม่ตรงกับที่กำหนดใน AndroidManifest ก็อย่าหวังเลยค่ะว่าเขาจะทำให้

ข้อควรระวัง ถึงเราจะ run เครื่องเดียว แต่ถ้าเสียบหลายเครื่อง (ทั้งมือถือ แท็บเล็ทจริงที่เสียบสาย usb, emulator และ genymotion) มันจะไม่ยอมทำให้เน้อ ดังนั้น ต้องเสียบเพียงเครื่องเดียวเท่านั้น

Create Deep Links to App Content | Android Developers
To allow users to enter your app from links, you must add intent filters for the relevant activities in your app manifest. These intent filters allow deep linking to the content in any of your activities…

การทำ deeplink มีข้อดีสำหรับ user ที่ลงแอปเราแล้ว สามารถกดจาก link มาที่แอปเราได้เลย ซึ่งเกือบจะทุกแอปก็จะทำกันอยู่แล้ว เพื่อทำให้ user ทำกิจกรรมในแอปได้นานขึ้น (หรือภาษา UX เขาเรียกว่า convertion ของ user สูงมากขึ้นเปล่า ไม่แน่ใจ) ทำให้ UX ของแอปดีขึ้น และทางทีม developer สามารถเก็บ stat หรือเอาไปเล่นกับโปรโมชั่นต่างๆที่ทำขึ้นก็ได้นะ

บทความเบาๆที่หวังว่าทุกคนคงจะชอบกันเพราะรูป cover เอ้ยยย ได้สาระประโยชน์กันไปนะคะ ถึงจะแอบขายของไปบ้างบางทีก็ตามค่ะ ;)

Tags

Minseo Chayabanjonglerd

Android Developer ผู้เป็นเจ้าของบล็อก MikkiPastel ที่ชอบทำหลายๆอย่างนอกจากเขียนแอพแอนดรอยด์ เช่น เขียนบล็อก เขียนแชทบอท เรียนออนไลน์ อ่านหนังสือ วาดรูปเล่น ดู netfilx สั่งอาหารอร่อยๆกัน เป็นต้น

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.