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

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

ทำแอพด้วยตัวเอง ใน 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


ทดสอบ service.php

หลังจากเราได้ไฟล์ service.php เรียบร้อยแล้วให้ลองอัพโหลดไฟล์ขึ้นไปบนโฮสและลองรันผ่าน url ดูว่าตัวเซอร์วิสได้แสดงข้อมูล json ออกมาถูกต้องหรือไม่ ตัวอย่างเช่น

และถ้าโค๊ดถูกต้อง ไม่มี error จะแสดงข้อมูล json format เราจะเห็นข้อมูลผ่านเบราว์เซอร์ในลักษณะนี้


สร้างโปรเจคและติดตั้ง 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

กระทู้ใกล้เคียง

ทำแอพด้วย Unity2D Canvas ตอน : List View... ทำแอพด้วย Unity2D Canvas ตอน : List View ดาวน์โหลดโปรเจค Unity3D Listview ListView คือองค์ประกอบพื้นฐานของโมบายแอพพลิเคชั่น แต่เป็นส่วนประ...
ราคาทำแอพ อธิบายเรทราคาทำโมบายแอพพลิเคชั่น... ราคาทำแอพ อธิบายเรทราคาทำโมบายแอพพลิเคชั่น ราคาทำแอพ คำถามสำหรับผู้ประกอบการ ที่อยากส่งเสริมธุรกิจ ด้วยการพัฒนาโมบายแอพพลิเคชั่น ทำไมราคา ค่าพัฒนา...
สอน SQLite ใช้งานฐานข้อมูลแบบออฟไลน์กับ Unity C#... สอน SQLite ใช้งานฐานข้อมูลแบบออฟไลน์กับ Unity C# SQLite เป็นระบบฐานข้อมูลที่ทำงานในลักษณะออฟไลน์หรือเป็นฐานข้อมูลที่ถูกเก็บไว้ในเครื่อง client นิยม...
Unity C# โหลดและแสดง JSON Data ติดฐานข้อมูล PHP &#... Unity C# โหลดและแสดง JSON Data ติดฐานข้อมูล PHP & MySQL 1. ผมเทสโดยออกแบบฐานข้อมูลง่าย ๆ นะครับมีแค่ 2 field คือ id,name ตามรูปครับ 2. ส...