ทำแอพด้วยตัวเอง ใน 1 วัน ด้วย Unity2D และ WordPress Post
ทำแอพด้วยตัวเอง
Wordpress คือเว็บไซต์แบบ CMS ( Content Management System ) ที่ได้รับความนิยมทั่วโลก และมีการพัฒนาอย่างต่อเนื่อง เพราะเป็น CMS แบบ Open Source ทำให้มีนักพัฒนาเว็บไซต์ทั่วโลกนิยมใช้ wordpress นำมาพัฒนาเว็บไซต์อย่างแพร่หลาย อีกทั้งนักพัฒนาเองยังสามารถพัฒนาส่วนเสริม ( Plugin ) เพื่อเพิ่มความสามารถให้กับเว็บไซต์ได้เองอีกด้วย ในส่วนของการพัฒนาต่อยอด เรายังสามารถนำฐานข้อมูลของ worpress ไปพัฒนาให้สามารถแสดงผลเป็นเมนูบทความบนโมบายแอพพลิเคชั่นได้อีกด้วย โดยเฉพาะเว็บไซต์ประเภทเน้นเนื้อหา เขียนบทความ เราสามารถนำข้อมูลจากเว็บไซต์ wordpress ที่มีอยู่แล้ว พัฒนาให้สามารถทำงานเป็นโมบายแอพพลิเคชั่นได้ง่าย ๆ โดยใช้ทรัพยากรที่มีอยู่แล้ว
ทำ Web Service API
Web Service API คือส่วนประกอบสำคัญในโครงสร้างการพัฒนาโมบายแอพพลิเคชั่น จะทำหน้าที่ในการรับคำสั่ง Request และทำการคืนข้อมูล ( Response ) กลับไปให้โมบายแอพพลิเคชั่นทำงานต่อ ก่อนที่เราจะพัฒนาส่วน client หรือโมบายแอพพลิเคชั่น สิ่งที่เราต้องเริ่มทำก่อนคือเตรียมข้อมูลที่จะให้ตัวแอพดึงข้อมูลไปแสดง ในบทความนี้เราจะเขียน web service เล็ก ๆ เพื่อดึงข้อมูล Feature image, title และ content จาก wordpress post ที่เรามีอยู่แล้วจาก codebee labs นี้ โดยให้เราสร้างไฟล์ service.php และเขียนโค๊ด return json ดังนี้
service.php
// ใช้คำสั่ง require ให้สามารถใช้งาน config และ wp function require($_SERVER['DOCUMENT_ROOT'].'/labs/wp-config.php'); require($_SERVER['DOCUMENT_ROOT'].'/labs/wp-blog-header.php'); define('WP_USE_THEMES', false); $respond = array(); $postlist = get_posts('numberposts=5'); // กำหนดจำนวน post ที่เราต้องการให้แสดง foreach ($postlist as $post){ $image = wp_get_attachment_image_src(get_post_thumbnail_id(get_post($post->ID)),'full'); $obj = new stdClass(); $obj->title = strip_tags(get_post($post->ID)->post_title); $obj->url = get_post($post->ID)->guid; $obj->posdate = get_post($post->ID)->post_date; $obj->thumbnail = $image[0]; $contents = preg_split( '/<!--more(.*?)?-->/', $post->post_content ); $obj->pre_content = strip_tags($contents[0]); array_push($respond,$obj); } echo json_encode($respond); // return ข้อมูลแบบ json ไปให้ โมบายแอพพลิเคชั่น
ทดสอบ service.php
หลังจากเราได้ไฟล์ service.php เรียบร้อยแล้วให้ลองอัพโหลดไฟล์ขึ้นไปบนโฮสและลองรันผ่าน url ดูว่าตัวเซอร์วิสได้แสดงข้อมูล json ออกมาถูกต้องหรือไม่ ตัวอย่างเช่น
http://www.your-domain.com/service.php
และถ้าโค๊ดถูกต้อง ไม่มี error จะแสดงข้อมูล json format เราจะเห็นข้อมูลผ่านเบราว์เซอร์ในลักษณะนี้
[{"title":"xxxx","url":"xxxx","posdate":"xxxx","thumbnail":"xxxx","pre_content":"xxxx"}]
สร้างโปรเจคและติดตั้ง Unity Plugin
หลังจากที่เราได้ทำ Web Service API ที่ดึงข้อมูลจาก wordpress post มาเรียบร้อยแล้วขั้นตอนต่อไป ให้เราสร้าง Unity Project และทำการดับเบิ้ลคลิกติดตั้ง WordPressFeed.unitypackage ซึ่งเป็นพลักอินที่เราพัฒนาไว้สำหรับทดสอบโหลดข้อมูลจาก wordpress มาแสดงบนโมบายแอพพลิเคชั่น โดยให้ท่านทำตามลำดับดังต่อไปนี้
- ดาวน์โหลดและติดตั้ง Unity3D
- สร้าง Unity 2D Project
- ติดตั้ง Unity Plugin
- แก้ไข URL ไปที่ service.php
- การแก้ไขหน้าตา Application
ไปที่เว็บไซต์ https://unity3d.com/get-unity/download ดาวน์โหลดโปรแกรม Unity3D Personal
เปิดโปรแกรม Unity และทำการสร้างโปรเจค โดยให้ตั้งชื่อว่า wp_feed และเลือกโปรเจคเป็นแบบ 2D
ดาวน์โหลด WordPressFeed.unitypackage ดับเบิ้ลคลิกและกด import เพื่อติดตั้งตัวพลักอิน
หลังจากติดตั้งเสร็จแล้วให้ท่านดับเบิ้ลคลิกที่ไฟล์ Assets/scene/main.unity จากนั้นในช่อง Hierarchy ให้เลือกไปที่ AppController จะปรากฏช่อง Inspector ขึ้นมาทางขวามือให้ท่านพิมพ์แก้ไข url ในช่อง Base URL ให้ลิงค์ไปที่ service.php ที่เราได้ทำไว้ก่อนหน้านี้
หลังจากติดตั้ง WordPressFeed.unitypackage เรียบร้อยแล้วท่านสามารถแก้ไขข้อมูลทั้งหมดได้ ทั้งหน้าตา ข้อความ สี โดยให้คลิกไปที่ scene main.unity และเลือกแก้ไขที่ object นั้น ๆ
วิธี Export .apk ไปทำงานในโมบาย
- 1. เปิดโปรเจคที่เราทำงานและไปที่ File -> Build & Setting
- 2. เลือกไปที่ Android Platform และกดปุ่ม Add Open Scene
- 3. จากนั้นกดปุ่ม Build รอจนกว่าโปรแกรมจะทำการ Compiler เสร็จเราจะได้ไฟล์ .apk มาตามชื่อโปรเจค
- 4. ทำการติดตั้งในเครื่อง Android และทดสอบการทำงาน
ตัวอย่างบนแอพพลิเคชั่นบน Android
บทความนี้ไม่ได้มุ่งเน้นให้พัฒนาโมบายแอพพลิเคชั่นให้ออกมาใช้งานเร็วที่สุด แต่เป็นวิธีการเพื่อประหยัดเวลาในการพัฒนาโดยรวมของโมบายแอพพลิเคชั่น จะเห็นได้ว่าเราสามารถ นำข้อมูลจาก wp ที่มีระบบหลังบ้านที่ดีอยู่แล้วมาพัฒนาต่อยอดได้ โดยที่เราสามารถประหยัดเวลาในการพัฒนาส่วนต่าง ๆ ออกไปได้ค่อนข้างเยอะ ทั้งระบบ backend การออกแบบฐานข้อมูล การทำ web service API