Home / Developer  / Android Developer  / เขียนแอพพลิเคชัน TV Online บน Android

เขียนแอพพลิเคชัน TV Online บน Android

บทเรียนนี้เราจะมาประยุกต์ใช้ Volley.jar ในการเก็บ Cache รูปภาพจากเว็บเซอร์วิสร่วมกับดึงข้อมูลรายการโทรทัศน์ หรือ Online TV ดูสดผ่านแอพพลิเคชันบนระบบปฏิบัติการ Android

สิ่งที่ต้องเรียนรู้ก่อนหน้าคือ

ถ้าหากว่าได้เรียนรู้มาหมดแล้ว และพร้อมแล้วก็มาเริ่มพัฒนาแอพพลิเคชันดูทีวีของเรากันดีกว่า

เริ่มต้นให้สร้าง New Project ขึ้นมาเป็น Basic Activity ตั้งชื่อตามใจชอบว่าเราจะให้แอพพลิเคชันของเราชื่ออะไรก็ตามใจครับ หลังจากนั้นให้เราไปดาวน์โหลด Volley.jar เป็น Library ในการจัดการ Resource จาก  Web Services ตัวเล็กๆ ตัวหนึ่งจากที่นี่ครับ (ผมอัพโหลดไว้ให้)

https://drive.google.com/file/d/0B08PZSOd4UmOTFBLbW1sQUlYVHc/view?usp=sharing

หรือหาตาม Google ก็ได้

เมื่อ Project ของเราบน Android Studio พร้อมแล้วให้เปิดโหมด Project View (ถ้าเป็น version 2.2 ก็จะอยู่ข้างๆ) เอา volley.jar ไปวางในโฟลเดอร์ libs ให้เรียบร้อยถ้าไม่มี ก็ออกไปที่ Windows Explorer เปิดไล่เอาครับ

Tv-Apps1

หลังจากวางตัว volley.jar ลงใน libs ของตัว Android Studio เป็นที่เรียบร้อยแล้วให้ทำการ แก้ไข Gradle ใหม่ โดยเพิ่มส่วนของ libs/volley.jar ลงไปแล้วทำการ Sync

Tv-Apps7

โดยแก้ไขเพิ่มเป็นตามนี้

นั่นคือการเพิ่มส่วนของการเรียกใช้งาน volley.jar เข้าไป

หลังจากทำการ Sync Gradle เป็นที่เรียบร้อยแล้ว ให้ทำการสร้าง Package ขึ้นมาใน Project ของเราครับ โดยสร้าง Package เป็นส่วนที่ทำงานร่วมกับ Directory Structure ของตัว main/java เท่านั้นครับ

Tv-Apps3

Tv-Apps5

Package ที่เราจะสร้างนั้นประกอบไปด้วย adapter, controller, model, util

Tv-Apps2

แล้วทำการสร้าง Java Class File ตามรูปข้างบน นั่นคือ

  • สร้างไฟล์ AppController.java อยู่ใน Package “controller
  • สร้างไฟล์ LruBitmapCache.java ใน Package “util
  • สร้างไฟล์ TvModel.java ใน Package “model
  • สร้างไฟล์ CustomListAdapter.java ใน Package “adapter

เปิดไฟล์ LruBitmapCache.java ทำการ extends LruCache<String, Bitmap> implements ImageLoader.ImageCache ต่อท้ายแล้ว Implement Method ให้เรียบร้อย

ในตัวอย่างนี้ผมจะทำการปรับ CacheSize ไว้เป็นที่เรียบร้อยแล้ว

ทำการเตรียม API ของส่วน JSON สำหรับดูทีวีให้เรียบร้อย ประกอบไปด้วย ชื่อช่อง ไฟล์รูปภาพช่องรายการ และ URL ของ M3u8 ที่เป็น Streaming Video ดูออนไลน์ โดยตัวอย่างนั้นจะประกอบไปด้วย Pattern JSON ตามนี้

แก้ไขไฟล์ TVModel.java ให้มีการเรียก Mapping Key Value ของ JSON ตามนี้

เพื่อรับค่า String ทุกตัวใน JSON มาอยู่ในรูปแบบการทำงาน แบบ adapter,  controller และ model ต่อมาให้แก้ไขไฟล์ AppController.java โดยมีการเรียก Extend ตัว Application ทำการ Implement Method ให้เรียบร้อย ทำการเขียนคำสั่งในการ Load ไฟล์ Images ทั้งหมดเก็บใน Cache ผ่าน Class ของ LruBitmapCache

ให้ทำการเพิ่ม Layout ใหม่ขึ้นมาชื่อว่า grid_layout.xml ใส่รูปแบบต่อไปนี้

เป็นการเก็บส่วนของ component widget ภายใน Grid View เพื่อแสดงรูปภาพ และชื่อช่อง ดังนั้นต้องไปแก้ไขไฟล์ content_main.xml อีกทีโดยการเพิ่ม gridView เข้าไป

หมายเหตุ: ในตัวอย่างผมตัดส่วนของ Fab Button ออกจากตัวอย่างไปเป็นที่เรียบร้อยจาก activity_main.xml

แก้ไขไฟล์ CustomListAdapter.java เพิ่มส่วนของการ ดึงข้อมูลจาก TVmodel แต่ละ Key ไปผูกค่ากับ id แต่ละตัวของ grid_layout.xml

เราจะสามารถผูกค่า Key ทั้งหลายที่รับมาจาก JSON มาลงที่ Activity ได้แล้วทีนี้ก็เหลือแค่การดึงข้อมูลจาก URL ของ API ไปปรากฏบน Gridview เปิดไฟล์ MainActivity.java ขึ้นมาเขียนคำสั่งลงไป

ค่าในการรับค่า JSON นั้นอยู่ที่คำสั่ง ปรกติคือ getJSONObject();

ต่อมาให้สร้าง Activity อีกตัวชื่อว่า MainAcctivity2.java ใหม่เพิ่มเข้าไปเพื่อสร้างหน้าดูทีวีออนไลน์

Tv-Apps6

โดยทำการเพิ่มส่วนของ Intent กดเพื่อส่งค่า source และ param อื่นๆ จาก MainActivity.java ไปยัง MainActivity2.java ตามนี้

คำสั่งหน้า MainActivity.java จะเป็นดังนี้

เปิดไฟล์ MainActivity2.java ขึ้นมาเขียนคำสั่งในการรับค่าจาก Intent มาแสดงข้อมูลผ่าน VideoView ดังนั้นต้องไปแก้ไขไฟล์ content_main2.xml ก่อนดังนี้

แล้วแก้ไข MainActivity2.java ดังนี้

ขั้นตอนสุดท้ายแล้วคือเปิด Permission และแก้ไข android:name เล็กน้อย นั่นคือบรรทัดต่อไปนี้ใน AndroidManifest.xml

และ

ไฟล์ AndroidManifest.xml จะเป็นดังนี้ เปิดเทียบดูนะครับ

ตกแต่งความสวยงานของ res/values/color.xml ตามนี้

ทดสอบแอพพลิเคชันของเราหน่อยดีกว่า เสียบ USB เปิด USB Debugging แล้ว Run ตัวแอพพลิเคชันไปเลย

Android Live TV

แนวตั้ง

Screenshot_2016-06-26-13-53-56-34

ลองปรับแนวนอนดู

Screenshot_2016-06-26-13-54-53-67

Screenshot_2016-06-26-13-54-30-62

ก็แปลว่าใช้ได้แล้ว เอาไปประยุคใช้หากินกันต่อไปแล้วกันนะครับ ทุกคน แนะนำว่าอย่าทำ ฟรีทีวีเลยแต่ทำเป็นช่องทีวีของตัวเองก็ยังดีกว่านะครับ ไปลงทุนส่วนของ Server ก็ไม่มีปัญหาแล้ว

Comments

daydevthailand@gmail.com

<p>อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์<br /> ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)</p>

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.

%d bloggers like this: