[Android] พัฒนาแอพจากแอพจริง Thai Pilot Pray (5)

ช่วงนี้กำลังอยู่ในระหว่างตกงาน ก็ต้องรีบ update บทความหน่อย ตอนที่มีเวลาพอจะทำได้

ในบทความนี้ ผมจะเริ่มอธิบาย Project Thai Pilot Pray พร้อมทั้งแนะนำการพัฒนา แบบเป็นขั้นตอนไปนะครับ และก็จะเสริมลักษณะการใช้คำสั่ง Java ที่เกี่ยวข้องกับ Code ในส่วนนั้นๆ ด้วย

ใครที่เพิ่งเข้ามาอ่าน แล้วเจอหน้านี้เลย และอยากพัฒนา Android ตามไปทีละขั้น ก็ลอง Download ตัวแอพ และ Source code ได้ตามนี้ครับ

อันนี้แอพครับ

อันนี้ source code ครับ

การอธิบายการพัฒนาในแบบของผม จะไม่ใช้อธิบายแบบ สร้าง Project จากของเดิม แล้วมานั่งบอกว่าบรรทัดนี้คืออะไรแบบนั้นนะครับ แต่ผมจะใช้วิธีให้คุณสร้าง Project ใหม่ขึ้นมา ตั้งชื่อแบบที่คุณต้องการ แล้วค่อยๆ copy โค้ดหลัก มาบางส่วนครับ เพราะฉะนั้นสิ่งที่คุณต้องเตรียมจะมีดังนี้ครับ

1. เตรียม android developer tools ให้พร้อม ดูได้จากที่นี่ครับ
   http://pilotpol.blogspot.com/2013/05/android-thai-pilot-pray-2.html
2. สร้าง Project ใหม่เปล่าๆ เป็นแล้ว โดย ดูได้จากที่นี่ครับ
   http://pilotpol.blogspot.com/2013/05/android-thai-pilot-pray-3.html
3. ลง Project Thai Pilot Pray ในเครื่อง และมีรายชื่อใน Package Explorer แล้ว อันนี้เดี๋ยวจะบอกครับ

เริ่มกันเลย...

เมื่อ Download ตัว Source code ของ Thai Pilot Pray แล้วนะครับ ขั้นต่อไปก็แตก zip ไฟล์ไปไว้ในที่ใดที่หนึ่ง แล้วเปิดโปรแกรม Eclipse (Android Developer Tools) ขึ้นมาครับ

ที่ icon ริมซ้ายสุด กดปุ่มลูกศรลง แล้วเลือก Project...

หรือจะเลือกที่ File > New > Project.. ก็ได้ครับ

จะมี Dialog ขึ้นมา ให้เลือกอันที่ 2 ตามภาพครับ

Android Project from Existing Code แล้ว Next

ก็จะมาหน้า Import Project ครับ เลือกไฟล์ Project ที่ Download มา ตามลำดับในภาพเลยครับ

1. Browse... เพื่อค้นหา Folder ที่แตก zip เรียบร้อยแล้ว

2. ติ๊กเลือกชื่อ Project ที่ Project to Import (ในที่นี้ของผมมี Project นี้อยู่แล้วเลยเลือกไม่ได้ครับ)

3. ติ๊กเลือก ถ้าต้องการให้ Copy Code ทั้งหมดไปไว้ใน workspace (ที่เก็บไฟล์ Project ต่างๆ ที่ Eclipse สร้างขึ้นมาตอนแรกครับ)

4. Finish เลยครับ

รวมกับบทความแรก ตอนนี้ที่ Package Explorer (ต่างแถบหน้าต่างด้านซ้าย ถ้าใครไม่มีกดเปิดได้ที่ Window > Show view > Package Explorer นะครับ) ของทุกท่านควรจะมี 2 Project ที่ต้องใช้งานคือ New Project เปล่าๆ ที่ท่านสร้างขึ้นเอง ชื่อก็ตามแต่จะตั้งครับ และ Thai Pilot Pray Project นะครับ ใครที่ยังไม่มี ก็ลองทำตามวิธีในบทความนี้ และบทความเก่าดูนะครับ

ผมจะอนุมานว่ามีกันหมดแล้ว ต่อไปจะอธิบาย Concept อะไรอีกสักเล็กน้อย ก่อนที่จะเริ่มอธิบาย code กัน

AndroidManifest.xml

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

assets

folder นี้จะใช้เก็บไฟล์ส่วนประกอบทั้งหลายแหล่ ที่จำเป็นต้องใช้ใน แอพฯ เราขณะ run time ครับ สำหรับ project thai pilot pray ก็จะมี folder audio ไว้เก็บเสียงสวดมนต์ , text ไว้เก็บบทสวดมนต์ , และไฟล์ praylist.xml ไว้เก็บรายละเอียดของแต่ละบทสวด เพื่อนำไปใช้ในแอพฯ เป็น database อีกประเภทหนึ่ง คือ แบบเก็บไว้ในไฟล์ ยังไม่ใช้แบบ SQL ครับ

res

folder นี้เก็บไฟล์ที่จะนำมาประกอบกันเป็นแอพฯ ครับ เป็นพวกรูป drawable หรือ layout อย่างที่อธิบายไปเมื่อบทความก่อน ฯลฯ อะไรที่จะนำมาใช้ในการสร้างแอพก็นำมาใส่ไว้ในนี้ครับ ไม่สับสนกับ assets นะครับ อันนั้นคือ folder ที่เก็บไฟล์ที่เราจะใช้ตอนเปิดแอพฯ บนเครื่องแล้ว

ต้องมีเป้าหมาย...

1. เริ่มต้นคิดก่อนว่าเราจะทำแอพอะไร จากตัวอย่างที่เรามี ซึ่งสำหรับแอพ Thai Pilot Pray คุณลักษณะ ก็จะมี ข้อความที่เลื่อนได้, และควบคุมเสียง พร้อมกับมี playlist

 

playlist ของ thai pilot pray

ข้อความเลื่อนได้ ในขณะเดียวกันก็เล่นไฟล์เสียงไปด้วย พร้อมตัวควบคุม และ Seek bar (ด้านบน ฟ้าๆ)

จาก Code ที่มีข้างต้น ผมจะลองทำอีกแอพ แต่พื้นหลังนิ่งๆ จะแสดงภาพ VDO ไปด้วย ส่วนข้อความที่เลื่อนๆ จะทำให้แคบลงหน่อย คล้ายๆ กับ แอพฯ คาราโอเกะ ไรงั้น

สำหรับทุกท่าน มีไอเดียอะไร ก็ลองประยุกต์ดูนะครับ เมื่อพร้อมแล้วก็ขั้นตอนต่อไปครับ ^_^

2. ไอเดียมีแล้ว ต้นแบบมีแล้ว เราก็จะมาแกะ code เก่ากันครับ ว่าจะเอามาประยุกต์กับ project ใหม่ของเรายังไงดี มาดู code กันก่อนดีกว่าครับ ที่ project ใหม่เรา ในแถบหน้าต่าง Package Explorer เข้าไปที่ ชื่อ Project (ของผมเป็น examproj )  > src > com.example.examproj > MainActivity.java ตามรูปครับ

ในนั้นจะมี code อยู่ส่วนหนึ่งที่ generator สร้างขึ้น อธิบายคร่าวๆ นะครับ 

• ส่วนบนที่นำหน้าด้วย package ก็เพื่อบอกว่า ไฟล์นี้อยู่ใน package อะไร (เอาไว้อ้างอิงในไฟล์อื่นๆ project อื่นๆ ครับ)
• import รายการ library ต่างๆ ที่จำเป็นต้องใช้สำหรับไฟล์นี้ครับ อันนี้ใครจำไม่ได้ หรือไม่รู้ว่าจะ import อะไรก็ไม่ต้องกลัวไปครับ เมื่อเราเขียน code เสร็จ เราสามารถกด Ctrl+Shift+O เพื่อให้ Eclipse import หรือเลือกลบตัวที่ไม่เกี่ยวข้องได้แบบ automatic ครับ สะดวกดีเหมือนกัน
• ต่อมาเป็น block ของการประกาศ class ครับ อันนี้ผมจะไม่สอนพวก OOP หรือพื้นฐานการโปรแกรมนะครับ สามารถหาเอาได้ใน internet อันกว้างไกลครับ ^_^

อธิบายนิดหน่อยเกี่ยวกับ Class นี้ครับ 

อย่างที่รู้ครับว่าในระบบ android การกระทำหนึ่งๆ จะเรียกว่า activity เราอาจจะคิดไปได้ว่ามันเป็นหน้าหนึ่งที่ทำงานก็ได้ครับ จากรูปข้างต้น จะหมายถึงตอนนี้มีหน้าที่เรียกว่า MainActivity อยู่ครับ และตอนนี้มันก็ทำงานตาม function ที่มีอยู่ภายใน class นั่นเอง

ส่วนที่ว่าจะรู้ได้อย่างไรว่า activity ไหนเป็นตัวหลัก แล้วไปไหนต่อ เผื่อต้องการไล่การทำงานของโปรแกรม ก็ต้องไปดูใน AndroidManifest.xml ครับ ว่าประกาศ class ไหนเป็นตัวหลักไว้ ดังนี้ครับ

ไปที่ androidmenifest.xml ที่อยู่ใน project ของเราครับ กดตามในรูป คือ ให้แสดงในแบบ xml ไฟล์ แล้วดูที่กรอบเลข 2 ครับ ตรงนี้คือ MainActivity ซึ่งตัว name นั้น เราสามารถเขียนอย่างย่อได้ โดยใส่จุดไว้ตรงหน้าแบบนี้ครับ android:name = ".MainActivity" เป็นการละตัว package ไว้ในฐานที่โปรแกรมเข้าใจ ^_^

ใน node activity จะมีตัว intent-filter อยู่ซึ่งแสดงถึง เจตจำนึงของ activity นั้นๆ ครับว่าต้องการจะทำอะไรบ้าง ในที่นี้มีอยู่ 2 ตัว คือ 

1. action.MAIN บอกให้รู้ว่า activity นี้เป็นตัวหลักของแอพฯ นะ ไม่รับค่าใดๆ ในตอนเริ่มต้น
2. category.LAUNCHER บอกให้ระบบของเครื่องที่ลงแอพฯ รู้ว่า แอพฯ เราจะมีหน้าจอที่จะแสดงขึ้นมา และเมื่อเปิดขึ้นมาแล้ว ให้ขึ้นอยู่บนสุดของระบบในขณะนั้นครับ

สำหรับรายละเอียดเต็มๆ ของ Intent ตามไปที่นี้ได้เลยครับ รายละเอียด Intent

ย้อนกลับมาที่ไฟล์ MainActivity นะครับ ระบบจะสร้าง default ไว้ให้อยู่ 2 Method ( Method ก็คือ function ที่อยู่ใน class ครับ ส่วนพวกตัวแปรเรียกว่า Attribute) คือ onCreate และ onCreateOptionsMenu เราจะมาสนใจที่ onCreate กันก่อนครับ

ตัว class MainActivity ถูกสืบทอดมาจาก class เดิม คือ Activity ซึ่งในนั้นจะมี Method onCreate อยู่ด้วย โดยทั่วไปเราจะทำการ Override มาใช้ใหม่ในรูปแบบของเราครับ ซึ่ง 2 บรรทัดที่มีใน Method นี้ คือ

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

บรรทัดแรก คือการเรียกใช้คำสั่งอะไรก็ตามที่มีใน method เดิมครับ มีอะไรบ้างผมก็ไม่รู้เหมือนกัน แฮะๆ -_-"

บรรทัดที่สอง คือการสร้าง View มารองรับเพื่อแสดงผลออกหน้าจอ ในยามที่แอพฯ ถูกสร้างขึ้นมา ตรงนี้จะใช้ ID เรียกครับ นั่นคือ R.layout.activity_main จะเป็นตัวแปรที่อ้างอิงกับ layout activity_main ใน folder res/layout ของ project

ปัญหาที่พบในส่วนนี้ก็คือ บางที R กลับขึ้นขีดแดง แล้วเรียกใช้ไม่ได้ พอรันก็พบ error ไม่สำเร็จ แจ้งว่า "R cannot be resolved to a variable" มีแนวทางแก้ปัญหาพวกนี้ประมาณนี้ครับ

• ตรวจสอบดูในไฟล์ layout ที่เรียกครับ ว่ามีอะไรที่ผิดพลาด ขึ้นแดงรึเปล่า (ชื่อไฟล์อยู่อันสุดท้ายครับ คั่นด้วยจุด ตรงกลางคือ folder)
• บางทีเป็นเพราะ import android.R; เข้ามาที่ส่วนการ import ด้านบนครับ ต้องเอาออกนะครับ เพราะอันนั้นจะเป็นของ lib ใน android เอง คนละส่วนกับ R ของ project เราครับ
• ตรวจสอบดู ไฟล์ R.java ที่อยู่ใน folder gen > ชื่อ package ครับ ว่ามีหรือเปล่า ถ้าไม่มีก็คือ ระบบสร้างไม่ได้ครับ มี error อะไรสักอย่างอยู่ใน res แน่ๆ ครับ ลองหาดู

เมื่อทำการแก้ไขปัญหาเสร็จแล้ว ก็กด Clean หน่อยนะครับ เป็นวิธี Rebuild Project ใหม่ครับ โดยไปที่ Project > Clean... 

ตอนนี้ทุกท่านสามารถรู้ได้แล้วนะครับ ว่าจะไล่โปรแกรมกันยังไง ในระบบ android จะเริ่มจุดไหน บทความหน้า จะกำหนดสิ่งที่ต้องมีในโปรเจ็คใหม่ และค่อยๆ แกะโปรเจ็ค Thai Pilot Pray เพื่อ Copy เอาบางส่วนที่ต้องใช้งานมาครับ

ขอบคุณที่อ่านครับ...