จากเอกสารของ google(ที่นี่) ที่เสนอแนะวิธีการ embed youtube video ลงบน iOS app โดยใช้ตัวอย่างเป็นภาษา objective-c วันนี้เราจะมาลอง embed youtube video โดยใช้โปรเจค swift กัน
วิธีการนำ library เข้ามาใช้ใน project ของเรามีสองแบบ แบบแรกผ่าน cocoapods แบบที่สอง ให้โหลด source file จาก github แล้วมา import ลงใน project ของเราเอง สำหรับวันนี้เราจะมาใช้วิธีนำ library เข้ามาใช้ผ่าน cocoapods
วิธีการนำ youtube library มาใช้ผ่าน cocoapods
cocoapods คืออะไร cocoapods เป็น dependency manager คือ แหล่งรวมโปรเจค objective-c และ swift ที่มีองค์กร หรือบุคคลทั่วไปนำมาแชร์ แบ่งกันใช้ มีการจัดการโดยรวมไว้ที่เดียวกันและมีมาตรฐานกลางในการแชร์ และการเรียกใช้ ข้อดีอีกอย่างหนึ่งของการลงผ่าน cocoapods ก็คือโปรเจคของเรา กับโปรเจคที่เราติดตั้งเพิ่มเติมจะแยกกันอิสระ หากเราต้องการอัพเดทโปรเจคเวอร์ชันใหม่จาก cocoapods เราสามารถทำได้สะดวกมากขึ้นโดยไม่ต้องทำอะไรกับโปรเจคที่เรากำลังพัฒนาเลย(อ่านเพิ่มเติม) เพื่อให้ง่ายแก่การนำไปใช้งาน youtube ก็ได้ทำโปรเจคขึ้นและทำการแชร์เอาไว้ใน cocoapod เพื่อสะดวกแก่การที่นักพัฒนาจะนำไปติดตั้งใช้งานเช่นกัน เนื่องจาก cocoapod นั้นพัฒนาโดย ruby เวลาติดตั้งเราสามารถติดตั้งจาก ruby ที่ติดมากับ OS X ได้เลย
ติดตั้ง cocoapod
$ sudo gem install cocoapods
เริ่มสร้าง swift project
- create a new Xcode project
- เลือก single view application
- ตั้งชื่อโปรเจคและเลือกภาษาเป็น swift
- เปิดใช้งาน terminal
- ใช้ command line เข้าไปถึง directory ที่ทำการเก็บไฟล์ project ของเรา
- สร้าง podfile (อ่านเพิ่มเติม) โดยคำสั่ง
$pod init
จากนั้นจึงแก้ไขรายละเอียดในไฟล์ดังนี้ เสร็จแล้วจึงบันทึกไฟล์
# Uncomment this line to define a global platform for your proje # platform :ios, '9.0' target 'FirstYoutubeHelper' do # Comment this line if you're not using Swift and don't want to use dynamic f$ use_frameworks! pod 'youtube-ios-player-helper' end
*** ข้อควรระวัง ตามเอกสารอ้างอิงของ youtube ชื่อ pod จะเป็น
pod "YouTube-Player-iOS-Helper", "~> 0.1"
แต่ชื่อนี้ไม่ตรงกับ project ที่อยู่ใน cocoapods จะทำให้เวลา install จะหาไฟล์ไม่เจอ
- install project โดยคำสั่ง
$pod install
และรอจนกว่าจะติดตั้งสมบูรณ์
- กลับไปที่ directory ที่ทำการเก็บโปรเจคแล้ว double click ที่ไฟล์ .xcworkspace (ซึ่งไฟล์นี้จะถูกสร้างขึ้นมาอัตโนมัติหลังจากมีการ install และต้องเปิดใช้งานจากไฟล์นี้แทนไฟล์ project) เพื่อใช้งานโปรเจค
- ตรวจสอบให้แน่ใจว่าโฟลเดอร์ pods อยู่ในโปรเจคเรียบร้อยแล้ว
- เนื่องจากโค้ดที่ทำการเขียนโปรเจค youtube ปัจจุบันนั้นเป็นภาษา objective-c การนำเข้ามาใช้ในโปรเจคที่เป็นภาษา swift เราจึงต้องมีตัวกลางซึ่งเป็นตัวเชื่อมระหว่างภาษา swift และ objective-c (อ่านเพิ่มเติม) ในที่นี้ก็คือสร้าง bridge ไฟล์ที่เป็น header(.h) ขึ้นมา
File->New->File
เลือก header file
ตั้งชื่อไฟล์ ในที่นี้เราตั้งชื่อ bridge ไฟล์นี้ว่า “FirstYoutubeHelper-Bridging-Header.h”
- ตอนนี้เราสร้างไฟล์ bridge header ขึ้นมาแล้ว แต่โปรเจค swift ยังไม่ทราบว่าไฟล์นั้นอยู่ที่ไหนและมีความสัมพันธ์กับโปรเจคอย่างเรา เราจึงต้องทำการตั้งค่า ไปที่ Build Setting->ไปที่ตัวแปร “objective-c bridging header” จากนั้นทำการใส่ชื่อไฟล์ header ที่เราตั้งชื่อไว้ พร้อมระบุ directory ที่เราวางไฟล์ไว้ให้ถูกต้อง
- ต่อมาเรามาทำการแก้ไขในไฟล์ bridge ของเรา FirstYoutubeHelper-bridging-header.h กันต่อ โดยทำการ import library ชื่อ YTPlayerView.h ซึ่งเป็นตัวเล่นวีดีโอ ของ youtube โดยข้างต้นเราได้ดาวน์โหลด library นี้มาติดตั้งเรียบร้อยแล้วจากคำสั่ง pod install ข้างต้น เริ่มเพิ่มโค้ดเข้าไปหนึ่งบรรทัดดังนี้
- จากนั้นเราจะมาวาง layout ให้แอพลิเคชันของเรากัน โดยไปที่ไฟล์ Main.storyboard เลือก object เป็น Uiview แล้วจึงลากมาวางใน storyboard
- ทำการ custom class ของ uiview ให้เป็น YTPlayerView ก็คือออบเจ็คที่ไว้สำหรับดูวิดีโอ ดังนี้
- เปิดโหมด Assistance Editor เพื่อให้ Xcode เปิดมา 2 view คือ view แรกสำหรับ storyboard และอีก view สำหรับ code
- คลิกขวาที่ UIView ใน storyboard เลือก New referencing outlet เพื่อเชื่อมต่อระหว่าง storyboard และ code โดยลากจากเครื่องหมาย + ไปยังโค้ด ตั้งชื่อตัวแปรว่า youtubePlayer แล้วเลือก connect ตามลำดับ ดังนี้
- ถ้าเรียบร้อยสมบูรณ์เราจะได้โค้ดบรรทัดนี้มาอัตโนมัติ
@IBOutlet weak var youtubePlayer: YTPlayerView!
- จากเอกสารของ youtube เวลาเราทำการโหลด video ใน objective-c จะเรียกด้วยคำสั่งนี้
[self.playerView loadWithVideoId:@"M7lc1UVf-VE"];เราก็จัดการนำมาแปลงเป็นภาษา swift ซึ่งใช้กับโค้ดของเราได้ดังนี้youtubePlayer.loadWithVideoId("M7lc1UVf-VE")จากนั้นเราจัดการเอาคำสั่งนี้ไปใส่ไว้ใน viewDidLoad ซึ่งเป็นฟังก์ชันที่ถูกเรียกใช้เมื่อ view นี้โหลดเสร็จเรียบร้อย จะได้ดังนี้
- เสร็จเรียบร้อย เราสามารถทดสอบแอพลิชันของเราได้ผลลัพท์ดังต่อไปนี้
