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

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

  • ดาวน์โหลดและติดตั้ง Unity3D
  • ไปที่เว็บไซต์ https://unity3d.com/get-unity/download ดาวน์โหลดโปรแกรม Unity3D Personal

  • สร้าง Unity 2D Project
  • เปิดโปรแกรม Unity และทำการสร้างโปรเจค โดยให้ตั้งชื่อว่า wp_feed และเลือกโปรเจคเป็นแบบ 2D


    ทำแอพโหลดข้อมูล wordpress feed

  • ติดตั้ง Unity Plugin
  • ดาวน์โหลด WordPressFeed.unitypackage ดับเบิ้ลคลิกและกด import เพื่อติดตั้งตัวพลักอิน


    ทำแอพโหลดข้อมูล wordpress feed

  • แก้ไข URL ไปที่ service.php
  • หลังจากติดตั้งเสร็จแล้วให้ท่านดับเบิ้ลคลิกที่ไฟล์ Assets/scene/main.unity จากนั้นในช่อง Hierarchy ให้เลือกไปที่ AppController จะปรากฏช่อง Inspector ขึ้นมาทางขวามือให้ท่านพิมพ์แก้ไข url ในช่อง Base URL ให้ลิงค์ไปที่ service.php ที่เราได้ทำไว้ก่อนหน้านี้


    ทำแอพโหลดข้อมูล wordpress feed

  • การแก้ไขหน้าตา Application
  • หลังจากติดตั้ง WordPressFeed.unitypackage เรียบร้อยแล้วท่านสามารถแก้ไขข้อมูลทั้งหมดได้ ทั้งหน้าตา ข้อความ สี โดยให้คลิกไปที่ scene main.unity และเลือกแก้ไขที่ object นั้น ๆ


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

  • 1. เปิดโปรเจคที่เราทำงานและไปที่ File -> Build & Setting
  • 2. เลือกไปที่ Android Platform และกดปุ่ม Add Open Scene
  • 3. จากนั้นกดปุ่ม Build รอจนกว่าโปรแกรมจะทำการ Compiler เสร็จเราจะได้ไฟล์ .apk มาตามชื่อโปรเจค
  • 4. ทำการติดตั้งในเครื่อง Android และทดสอบการทำงาน

ทำแอพโหลดข้อมูล wordpress feed

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

ดาวน์โหลด .APK

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






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