Get Adobe Flash player

Monthly Archives: July 2016

ionic & ngCordova GPS Map

ให้เปิดไฟล์ index.html ในส่วนของ Header ให้ แปะไว้ด้านบนลองลงมาจาก style.css

ให้เปิดไฟล์ app.js แล้วแปะ Controller ลงไป

ส่วนหน้า index.html ในส่วนของ body ให้ใส่ tag ด้านล่างลงไปเพื่อสแดงผล

ให้เปิดไฟล์ style.css ซึ่งจะอยู่ในฟอรเดอร์ www/css/ และกำหนด style ให้กับ element id map

 

ngCordova FlashLight ปลั๊กอินสำหรับส่องแสงไฟฉาย บนมือถือ

 

ปรับปรุงระบบทรานสคริปกิจกรรมนักศึกษา

ปรับปรุงระบบทรานสคริปกิจกรรมนักศึกษา เพิ่มให้ผู้ดูแลระบบสามารถนำเข้าข้อมูลนักศึกษาใหม่ได้จากฐานข้อมูลของระบบทะเบียน และปรับให้ใบรายชื่อที่มีบาร์โค้ดแสดงข้อมูลใหม่ที่นำเข้า สามารถเข้าใช้งานได้ที่ http://activity.rmutp.ac.th/login.aspx

activity1
activity3
activity4

ionic framework การใช้งาน Sqlite และ ngCordova

ionic framework & Sqlite & ngCordova เป็นการใช้งานฐานข้อมูล sqlite ที่เป็นฐานข้อมูลบน smart phone ที่นิยมใช้กันใน ionic สามารถใช้ ngCordova ในการ install plugin Sqlite เพื่อใช้งานได้ทันทีดังนี้

  1. สร้างโปรเจ็คใหม่ด้วย command prompt

  2. ไปที่ folder sqlapp และ open with atom (text editor)
  3. ไปที่ไฟล์ config.xml แก้ไข name กับ widget id
    sqlapp1
  4. ใช้ bower install ngcordova

    หลังจากนั้นให้เปิดไฟล์ index.html และนำ script ng-cordova.js ไปวางไว้ก่อน cordova.js

    หลังจากนั้นให้เปิดไฟล์ app.js และเพิ่ม ngCordova ในส่วนของ angular.module()
  5. ลง plugin Sqlite

     
  6. เปิดไฟล์ app.js กำหนด var db = null;  ไว้ด้านบนสุด
  7. ในส่วนของไฟล์ app.js ในส่วนของ $ionicPlatform.ready จะให้สร้าง db และสร้าง table ขึ้นมา

     
  8. ที่ command prompt สั่ง ionic platform add android
  9. และใช้คำสั่ง ionic run android
  10. พิมพ์คำสั่ง monitor ใน command prompt เพื่อเปิด android monitor
  11. พิมพ์คำสั่ง ionic run android หรือใช้คำสั่ง ionic emulate android
  12. เราสามารถเข้าดู app ของเราใน android monitor ได้จากภาพ และให้เลือก save db ลงมาเพื่อดูว่ามีข้อมูลอะไรบ้าง
    sqlapp2
  13. แก้ไขไฟล์ app.js

     
  14. index.html

     

code ionic ตัวอย่างการทำ chat

index.html

app.js

 

ionic & ngordova

ngCordova คือ plugins เพื่อให้ ionic สามารถสั่งงานไปยัง iOS & Android device ได้ เช่นสามารถสั่งให้ส่งเสียงร้อง สั่งให้ทำงานร่วมกับกล้อง ร่วมกับ location สามารถสั่งให้อุปกรณ์ต่างๆ ทำงาน โดยสามารถเขียนคำสั่งได้จาก AngularJS ในการควบคุมการทำงาน ซึ่งสามารถเข้าใช้ plugins ต่างๆได้ที่ http://ngcordova.com/

ตัวอย่าง ngCordova

ก่อนที่จะใช้งาน plugins จะต้องลง bower เพื่อใช้คำสั่งผ่าน command prompt ก่อนโดยการเปิด command prompt และพิมพ์ดังนี้

หลังจากนั้นจะต้องเปิดไฟล์ index.html ใน project และเพิ่มโค้ดใน html เพื่อเรียกใช้คำสั่ง cordova (ให้ใส่ไว้ด้านบนส่วนของ header)

และเพิ่ม ngCordova ในส่วนของไฟล์ www/js/app.js ตรง angular.module(‘starter’, [‘ionic’,’ngCordova‘])

และในไฟล์ app.js จะต้องเพิ่ม cordovaPlugin.someFunction ใน ionicPlatform.ready เพื่อให้โปรแกรมทำงานเมื่ออุปกรณ์พร้อมใช้งานไม่งั้นโปรแกรมจะ error

 

ionic command

ionic command จะพิมพ์ใน command prompt (cmd) เพื่อทำงาน โดยมีคำสั่งที่สำคัญดังนี้

1) คำสั่งสร้าง apps

ตรง app1 คือชื่อ apps ที่จะสร้าง

2) คำสั่งเปิด run serve เพื่อจำลอง app ผ่าน browser เพื่อง่ายต่อการพัฒนา apps เริ่มต้น

3) คำสั่งปิด serve กรณีที่ทำแล้วอยากจำลองผ่าน emulator หรือ ผ่าน device จริงจะต้องปิด serve โดยพิมพ์

4) ให้ ionic download sources สำหรับใช้งานกับ android device

ให้ ionic download sources สำหรับใช้งานกับ iOS device

  • กรณีที่ error จากการ ใช้คำสั่ง ionic platform add สามารถใช้คำสั่ง remove ได้

5) run app

สำหรับ android device / emulator

สำหรับ iOS device (จะต้องใช้บน Mac OS และถ้าจะลงเครื่องจริงจะต้องทำผ่าน x code)

6) build icon / splash screen

ถ้ารูป icon หรือ splash ไม่เปลี่ยนให้พิมพ์เพิ่ม

 

Atom/Emmet Bug

Open File -> Keymap…