Home / Developer  / Lab: การสร้าง Hybrid Apps ด้วย ionic framework กับ JSONP

Lab: การสร้าง Hybrid Apps ด้วย ionic framework กับ JSONP

Lab ทดสอบการพัฒนาแอพพลิเคชันด้วย ionic framework ร่วมกับการเรียก jsonp และ ใช้งาน Angularjs เริ่มต้นจากตัวอย่าง Tutorial ของเว็บไซต์ ionic framework

งานหนักไปหน่อยก็เลยหาเวลาว่างๆ มาย่อยตัว Tutorial ของ ionic framework มาให้สายพัฒนา Hybrid ได้เล่นกันดูครับ

อย่างที่บอกว่า ionic framework นั้นก่อนที่เราจะพัฒนาได้เราต้องมีการติดตั้ง NodeJS ก่อนครับ และการพัฒนาจะเป็นรูปแบบของ View, Controller โดยใช้แกนหลักของ Angularjs ในการพัฒนาเป็นหลัก (ซึ่งมี Tutorial มากมายให้ศึกษา แต่ถ้าใครคิดว่าลำบากมากกับการศึกษาก็ไปหาติว หรือคอร์สเพิ่มเติมได้ครับ มีหลายคนที่พยายามตำข้าวสารกรอกหม้อกับการเปิดคอร์สพวกนี้เยอะแยะมาก)

เอาเป็นว่าเรามาเริ่มกันดีกว่าจาก Tutorial ของ ionic framework ครับ

ตัวอย่างนี้จะเป็นการประยุกต์ใช้ JSON Webservice ของ เว็บไซต์ของผมเองก่อน ซึ่งเป็น WordPress ที่ติดตั้ง Plugin ชื่อ “feedjson” ลงไปเรียบร้อย ดังนั้นถ้าต้องการ URL สำหรับ GET JSON จะยิง URL ไปที่

http://www.lovedesigner.net/feed/json

เราจะได้ผลลัพธ์ดังนี้

Screen Shot 2558-04-15 at 8.53.24 PM

 

ต่อมาให้เราไปสร้าง ionic framework กันครับ ซึ่งวิธีการสร้างก็มีแบบง่ายๆที่เว็บไซต์

http://ionicframework.com/getting-started/

หรือทำตามขั้นตอนนี้ เปิด Start ->Run -> cmd หรือถ้าใช้ OSX ของ Mac ก็เปิด Terminal ขึ้นมา ใช้คำสั่ง install ตัว ionic ก่อนครับ

หรือ

ก็ได้ครับรอสักหน่อยจนกว่าจะติดตั้งเสร็จ ก็ทำการสร้าง Project ขึ้นมาครับ โดยมีรูปแบบ 3 รูปแบบ

Screen Shot 2558-04-15 at 10.58.43 AM

แบบปรกติ Blank ก็จะไม่มีอะไรแนบมาให้นอกจาก Core ของมัน

แบบมี Tab Bar Menu

และแบบสุดท้ายแบบ SideMenu หรือเมนูด้านข้าง

ตัวอย่างนี้จะใช้แบบ SideMenu ครับตั้งชื่อ ตามใจชอบครับ

Terminal ก็จะทำการสร้างให้เสร็จสรรพครับ

Screen Shot 2558-04-15 at 8.57.12 PM

เมื่อเสร็จแล้วก็เปิด Google Chrome ขึ้นมาเปิด Mode Inspect Element และทำการแสดงผลแบบ Device Emulate ครับ (ทำตามขั้นตอนนี้: http://www.daydev.com/2014/chrome-inspect-element-web-emulation.html)

เมื่อเปิดดูเราจะเห็นว่าแอพฯ​ของเราทำงานได้แล้วครับ แบบสมบูรณ์ 100% ตาม Template ของ ionic framework ให้มา

Screen Shot 2558-04-15 at 8.57.39 PM

ต่อมาเราจะทำการเรียก Service ไปยัง URL ของ JSON ที่เราเตรียมไว้ข้างต้นครับ

ให้ไปที่ Folder ของ Project ที่ไปที่ Path : www/js/ ครับ สร้างไฟล์ใหม่ขึ้นมาชื่อว่า services.js

เขียน Code ตามนี้ลงไป[1]

เพื่อเป็นการดึง Resource ของ URL ที่เราสร้างเป็น JSON ไว้

ไปที่ Path: www/templates/ สร้างไฟล์ขึ้นมา 2 ไฟล์คือ

  • sessions.html
  • session.html

โดย Code ของไฟล์ sessions.html คือ

ไฟล์ session.html

ถ้าศึกษาส่วนของ Angularjs มานั่นคือการแสดงค่าจาก Controller ที่เราสร้างไว้ให้มาปรากฏใน Template ครับ

ไปที่ Path: www/js/ เปิดไฟล์ controller.js ขึ้นมา

ส่วนของ Modules เราจะเพิ่ม starter ตัว services ของเราเข้าไปจาก

แก้ไขเป็น

แก้ไขส่วนของการเรียก Playlists เดิม หรือให้ลบออกไปเลยครับ

แทนที่ด้วย Code ใหม่ของ Session ที่เราจะสร้างขึ้นมา

เป็นส่วนของ controller ตัว Session มาใหม่ ดังนั้นไฟล์ controller.js จะเป็นดังนี้

เปิดไฟล์ index.html ที่อยู่ Path: www/ ครับ เพิ่มบรรทัดต่อไปนี้

ต่อมาก็ Path: www/js/ เปิดไฟล์ app.js

ให้เราส่วนของ Playlists เดิมออกไปซะ

แทนที่ด้วย

แก้ไขบรรทัดก่อนปิด ฟังก์ชัน จากการเรียก route ที่ของ Playlists ให้ไปเรียก Session ก่อน

เป็นอันเสร็จเรียบร้อยครับ ลองทดสอบกันหน่อย

มี Error และไม่แสดงผลอะไร

นั่นเพราะมันเรียก HTTPRequest แบบ Cross Domain ไม่ได้ครับต้องตั้งค่า Allow-Control-Allow-Origin: * ก่อน วิธีที่ง่ายสุดก็คือ โหลด Add-on ของ Google Chrome ครับชื่อ “Allow-Control-Allow-Origin: *”

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

ติดตั้งเสร็จ จะมีมุมขวา COR สีแดง ให้กด Allow เป็น สีเขียวครับ แอพเราจะทำงานได้สมบูรณ์

Screen Shot 2558-04-15 at 9.15.21 PM

เราจะไม่ได้สนใจส่วนของหน้าข้างในนะครับ เพราะหน้าข้างในเราต้องลง git ของ server port และติดตั้งอีกมากมายตามภาพข้างล่าง

Screen Shot 2558-04-15 at 9.26.16 PM

ดังนั้นผมเลยเน้นแค่ ใช้ HTTP Request เรียก Cross Domain Web Service ตามนี้

อีกทั้งผมใช้ WordPress กับ FeedJSON หน้า Session ข้างในเลยทำงานไม่ได้ ต้องไปแก้ JSON แบบ Custom URL เป็น www.domain.com/{id} แล้วเรียก JSON เฉพาะ id นั้นจะ Work ทันทีครับ ซึ่ง พวกคุณก็ไปทำกันเองแล้วกันไม่ยากหรอกครับ

เราสามาระทดสอบ Lab ตัวแอพพลิเคชันของเราได้ด้วย cmd นี้ครับ ให้ cd ไปที่ Folder ของ Project แล้ว

จะปรากฏหน้าจอ ที่รองรับแพลตฟอร์มสุดฮิตอย่าง ios และ android เลยครับScreen Shot 2558-04-15 at 1.47.13 PM

 

ทดสอบกัน

Screen Shot 2558-04-15 at 9.22.20 PM

Screen Shot 2558-04-15 at 9.22.33 PM

เรียบร้อยครับถ้าไม่จบ โบราณคดี หรือ การแสดงมา ไม่ต้องบ่นว่ายากครับ ให้ลองดูก่อน ค่อยมาบ่น จบครับ Lab พิเศษรอบนี้

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.