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

<h3>ทำแอพด้วยตัวเอง ใน 1 วัน ด้วย Unity2D และ WordPress Post<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ทำแอพด้วยตัวเอง<&sol;strong><br &sol;>&NewLine;Wordpress คือเว็บไซต์แบบ CMS &lpar; Content Management System &rpar; ที่ได้รับความนิยมทั่วโลก และมีการพัฒนาอย่างต่อเนื่อง เพราะเป็น CMS แบบ Open Source ทำให้มีนักพัฒนาเว็บไซต์ทั่วโลกนิยมใช้ wordpress นำมาพัฒนาเว็บไซต์อย่างแพร่หลาย อีกทั้งนักพัฒนาเองยังสามารถพัฒนาส่วนเสริม &lpar; Plugin &rpar; เพื่อเพิ่มความสามารถให้กับเว็บไซต์ได้เองอีกด้วย ในส่วนของการพัฒนาต่อยอด เรายังสามารถนำฐานข้อมูลของ worpress ไปพัฒนาให้สามารถแสดงผลเป็น<&excl;--more-->เมนูบทความบนโมบายแอพพลิเคชั่นได้อีกด้วย โดยเฉพาะเว็บไซต์ประเภทเน้นเนื้อหา เขียนบทความ เราสามารถนำข้อมูลจากเว็บไซต์ wordpress ที่มีอยู่แล้ว พัฒนาให้สามารถทำงานเป็นโมบายแอพพลิเคชั่นได้ง่าย ๆ โดยใช้ทรัพยากรที่มีอยู่แล้ว<&sol;p>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ทำ Web Service API <&sol;h4>&NewLine;<p>Web Service API คือส่วนประกอบสำคัญในโครงสร้างการพัฒนาโมบายแอพพลิเคชั่น จะทำหน้าที่ในการรับคำสั่ง Request และทำการคืนข้อมูล &lpar; Response &rpar; กลับไปให้โมบายแอพพลิเคชั่นทำงานต่อ ก่อนที่เราจะพัฒนาส่วน client หรือโมบายแอพพลิเคชั่น สิ่งที่เราต้องเริ่มทำก่อนคือเตรียมข้อมูลที่จะให้ตัวแอพดึงข้อมูลไปแสดง ในบทความนี้เราจะเขียน web service เล็ก ๆ เพื่อดึงข้อมูล Feature image&comma; title และ content จาก wordpress post ที่เรามีอยู่แล้วจาก codebee labs นี้ โดยให้เราสร้างไฟล์ service&period;php และเขียนโค๊ด return json ดังนี้<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>service&period;php<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " > &NewLine;&sol;&sol; ใช้คำสั่ง require ให้สามารถใช้งาน config และ wp function &NewLine;require&lpar;&dollar;&lowbar;SERVER&lbrack;'DOCUMENT&lowbar;ROOT'&rsqb;&period;'&sol;labs&sol;wp-config&period;php'&rpar;&semi; &NewLine;require&lpar;&dollar;&lowbar;SERVER&lbrack;'DOCUMENT&lowbar;ROOT'&rsqb;&period;'&sol;labs&sol;wp-blog-header&period;php'&rpar;&semi; &NewLine;define&lpar;'WP&lowbar;USE&lowbar;THEMES'&comma; false&rpar;&semi; &NewLine; &NewLine;&dollar;respond &equals; array&lpar;&rpar;&semi; &NewLine;&dollar;postlist &equals; get&lowbar;posts&lpar;'numberposts&equals;5'&rpar;&semi; &sol;&sol; กำหนดจำนวน post ที่เราต้องการให้แสดง &NewLine;foreach &lpar;&dollar;postlist as &dollar;post&rpar;&lbrace; &NewLine;&Tab;&dollar;image &equals; wp&lowbar;get&lowbar;attachment&lowbar;image&lowbar;src&lpar;get&lowbar;post&lowbar;thumbnail&lowbar;id&lpar;get&lowbar;post&lpar;&dollar;post-&gt&semi;ID&rpar;&rpar;&comma;'full'&rpar;&semi; &NewLine;&Tab;&dollar;obj &equals; new stdClass&lpar;&rpar;&semi; &NewLine;&Tab;&dollar;obj-&gt&semi;title &equals; strip&lowbar;tags&lpar;get&lowbar;post&lpar;&dollar;post-&gt&semi;ID&rpar;-&gt&semi;post&lowbar;title&rpar;&semi; &NewLine;&Tab;&dollar;obj-&gt&semi;url &equals; get&lowbar;post&lpar;&dollar;post-&gt&semi;ID&rpar;-&gt&semi;guid&semi; &NewLine;&Tab;&dollar;obj-&gt&semi;posdate &equals; get&lowbar;post&lpar;&dollar;post-&gt&semi;ID&rpar;-&gt&semi;post&lowbar;date&semi; &NewLine;&Tab;&Tab; &NewLine;&Tab;&dollar;obj-&gt&semi;thumbnail &equals; &dollar;image&lbrack;0&rsqb;&semi; &NewLine;&Tab;&dollar;contents &equals; preg&lowbar;split&lpar; '&sol;&lt&semi;&excl;--more&lpar;&period;&ast;&quest;&rpar;&quest;--&gt&semi;&sol;'&comma; &dollar;post-&gt&semi;post&lowbar;content &rpar;&semi; &NewLine;&Tab;&dollar;obj-&gt&semi;pre&lowbar;content &equals; strip&lowbar;tags&lpar;&dollar;contents&lbrack;0&rsqb;&rpar;&semi; &NewLine;&Tab;array&lowbar;push&lpar;&dollar;respond&comma;&dollar;obj&rpar;&semi; &NewLine; &rcub; &NewLine;echo json&lowbar;encode&lpar;&dollar;respond&rpar;&semi; &sol;&sol; return ข้อมูลแบบ json ไปให้ โมบายแอพพลิเคชั่น &NewLine;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>ทดสอบ service&period;php <&sol;h4>&NewLine;<p>หลังจากเราได้ไฟล์ service&period;php เรียบร้อยแล้วให้ลองอัพโหลดไฟล์ขึ้นไปบนโฮสและลองรันผ่าน url ดูว่าตัวเซอร์วิสได้แสดงข้อมูล json ออกมาถูกต้องหรือไม่ ตัวอย่างเช่น<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >http&colon;&sol;&sol;www&period;your-domain&period;com&sol;service&period;php<&sol;pre>&NewLine;<p>และถ้าโค๊ดถูกต้อง ไม่มี error จะแสดงข้อมูล json format เราจะเห็นข้อมูลผ่านเบราว์เซอร์ในลักษณะนี้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lbrack;&lbrace;"title"&colon;"xxxx"&comma;"url"&colon;"xxxx"&comma;"posdate"&colon;"xxxx"&comma;"thumbnail"&colon;"xxxx"&comma;"pre&lowbar;content"&colon;"xxxx"&rcub;&rsqb;<&sol;pre>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>สร้างโปรเจคและติดตั้ง Unity Plugin<&sol;h4>&NewLine;<p>หลังจากที่เราได้ทำ Web Service API ที่ดึงข้อมูลจาก wordpress post มาเรียบร้อยแล้วขั้นตอนต่อไป ให้เราสร้าง Unity Project และทำการดับเบิ้ลคลิกติดตั้ง WordPressFeed&period;unitypackage ซึ่งเป็นพลักอินที่เราพัฒนาไว้สำหรับทดสอบโหลดข้อมูลจาก wordpress มาแสดงบนโมบายแอพพลิเคชั่น โดยให้ท่านทำตามลำดับดังต่อไปนี้<&sol;p>&NewLine;<ul>&NewLine;<li><strong>ดาวน์โหลดและติดตั้ง Unity3D<&sol;strong><&sol;li>&NewLine;<p>ไปที่เว็บไซต์ <a href&equals;"https&colon;&sol;&sol;unity3d&period;com&sol;get-unity&sol;download" target&equals;"&lowbar;blank">https&colon;&sol;&sol;unity3d&period;com&sol;get-unity&sol;download<&sol;a> ดาวน์โหลดโปรแกรม Unity3D Personal<&sol;p>&NewLine;<li><strong>สร้าง Unity 2D Project<&sol;strong><&sol;li>&NewLine;<p>เปิดโปรแกรม Unity และทำการสร้างโปรเจค โดยให้ตั้งชื่อว่า wp&lowbar;feed และเลือกโปรเจคเป็นแบบ 2D<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;09&sol;ทำแอพโหลดข้อมูล-wordpress-1&period;png" alt&equals;"ทำแอพโหลดข้อมูล wordpress feed" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<li><strong>ติดตั้ง Unity Plugin<&sol;strong><&sol;li>&NewLine;<p>ดาวน์โหลด <a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;WordpressFeed&period;unitypackage&period;zip" target&equals;"&lowbar;blank">WordPressFeed&period;unitypackage<&sol;a> ดับเบิ้ลคลิกและกด import เพื่อติดตั้งตัวพลักอิน<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;09&sol;ทำแอพโหลดข้อมูล-wordpress-2&period;png" alt&equals;"ทำแอพโหลดข้อมูล wordpress feed" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<li><strong>แก้ไข URL ไปที่ service&period;php<&sol;strong><&sol;li>&NewLine;<p>หลังจากติดตั้งเสร็จแล้วให้ท่านดับเบิ้ลคลิกที่ไฟล์ Assets&sol;scene&sol;main&period;unity จากนั้นในช่อง Hierarchy ให้เลือกไปที่ AppController จะปรากฏช่อง Inspector ขึ้นมาทางขวามือให้ท่านพิมพ์แก้ไข url ในช่อง Base URL ให้ลิงค์ไปที่ service&period;php ที่เราได้ทำไว้ก่อนหน้านี้<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;09&sol;ทำแอพโหลดข้อมูล-wordpress-4&period;png" alt&equals;"ทำแอพโหลดข้อมูล wordpress feed" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<li><strong>การแก้ไขหน้าตา Application<&sol;strong><&sol;li>&NewLine;<p>หลังจากติดตั้ง WordPressFeed&period;unitypackage เรียบร้อยแล้วท่านสามารถแก้ไขข้อมูลทั้งหมดได้ ทั้งหน้าตา ข้อความ สี โดยให้คลิกไปที่ scene main&period;unity และเลือกแก้ไขที่ object นั้น ๆ&NewLine;<&sol;ul>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>วิธี Export &period;apk ไปทำงานในโมบาย<&sol;h4>&NewLine;<ul>&NewLine;<li>1&period; เปิดโปรเจคที่เราทำงานและไปที่ File -> Build &&num;038&semi; Setting<&sol;li>&NewLine;<li>2&period; เลือกไปที่ Android Platform และกดปุ่ม Add Open Scene<&sol;li>&NewLine;<li>3&period; จากนั้นกดปุ่ม Build รอจนกว่าโปรแกรมจะทำการ Compiler เสร็จเราจะได้ไฟล์ &period;apk มาตามชื่อโปรเจค<&sol;li>&NewLine;<li>4&period; ทำการติดตั้งในเครื่อง Android และทดสอบการทำงาน<&sol;li>&NewLine;<&sol;ul>&NewLine;<p><img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;09&sol;ทำแอพโหลดข้อมูล-wordpress-5&period;png" alt&equals;"ทำแอพโหลดข้อมูล wordpress feed" &sol;><br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>ตัวอย่างบนแอพพลิเคชั่นบน Android<&sol;h4>&NewLine;<blockquote><p><a href&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;examples&sol;wp&lowbar;feed&period;apk" target&equals;"&lowbar;blank">ดาวน์โหลด &period;APK<&sol;a><&sol;p><&sol;blockquote>&NewLine;<blockquote><p><a href&equals;"https&colon;&sol;&sol;www&period;youtube&period;com&sol;watch&quest;v&equals;1cgT0MIkqn4" target&equals;"&lowbar;blank">ลิงค์ตัวอย่างบน youtube&period;com<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><br &sol;>&NewLine;<iframe width&equals;"640" height&equals;"360" src&equals;"https&colon;&sol;&sol;www&period;youtube&period;com&sol;embed&sol;1cgT0MIkqn4" frameborder&equals;"0" allowfullscreen><&sol;iframe><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;บทความนี้ไม่ได้มุ่งเน้นให้พัฒนาโมบายแอพพลิเคชั่นให้ออกมาใช้งานเร็วที่สุด แต่เป็นวิธีการเพื่อประหยัดเวลาในการพัฒนาโดยรวมของโมบายแอพพลิเคชั่น จะเห็นได้ว่าเราสามารถ นำข้อมูลจาก wp ที่มีระบบหลังบ้านที่ดีอยู่แล้วมาพัฒนาต่อยอดได้ โดยที่เราสามารถประหยัดเวลาในการพัฒนาส่วนต่าง ๆ ออกไปได้ค่อนข้างเยอะ ทั้งระบบ backend การออกแบบฐานข้อมูล การทำ web service API<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;