Get Adobe Flash player

ionic

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

 

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

     

chat

index.html

app.js

 

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 ไม่เปลี่ยนให้พิมพ์เพิ่ม

 

ionic ถ้า error update หรือ install version ใหม่ไม่ได้

ionic ถ้า error update หรือ install version ใหม่ไม่ได้ ให้พิมพ์ sudo npm cache clean.

April 2021
M T W T F S S
« Jul    
 1234
567891011
12131415161718
19202122232425
2627282930  

Recent Comments