Site icon บริษัท โค๊ดบี จำกัด

ทำแอพด้วยตัวเอง ใน 1 วัน ด้วย Unity2D และ WordPress Post

codebee
ทำโมบายแอพด้วย-unity

ทำโมบายแอพด้วย-unity

ทำแอพด้วยตัวเอง ใน 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 มาแสดงบนโมบายแอพพลิเคชั่น โดยให้ท่านทำตามลำดับดังต่อไปนี้

วิธี Export .apk ไปทำงานในโมบาย


ตัวอย่างบนแอพพลิเคชั่นบน Android

ดาวน์โหลด .APK

ลิงค์ตัวอย่างบน youtube.com




บทความนี้ไม่ได้มุ่งเน้นให้พัฒนาโมบายแอพพลิเคชั่นให้ออกมาใช้งานเร็วที่สุด แต่เป็นวิธีการเพื่อประหยัดเวลาในการพัฒนาโดยรวมของโมบายแอพพลิเคชั่น จะเห็นได้ว่าเราสามารถ นำข้อมูลจาก wp ที่มีระบบหลังบ้านที่ดีอยู่แล้วมาพัฒนาต่อยอดได้ โดยที่เราสามารถประหยัดเวลาในการพัฒนาส่วนต่าง ๆ ออกไปได้ค่อนข้างเยอะ ทั้งระบบ backend การออกแบบฐานข้อมูล การทำ web service API

Exit mobile version