ionic & ngCordova GPS Map
ให้เปิดไฟล์ index.html ในส่วนของ Header ให้ แปะไว้ด้านบนลองลงมาจาก style.css
1 2 |
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&"> </script> |
ให้เปิดไฟล์ app.js แล้วแปะ Controller ลงไป
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
.controller('MapCon', function($scope, $cordovaGeolocation, $ionicLoading) { var myLocation = new google.maps.LatLng(13.770742, 100.5024268); var RMUTP = new google.maps.LatLng(13.770999, 100.504326); var map = new google.maps.Map(document.getElementById('map'), { mapTypeId: google.maps.MapTypeId.ROADMAP, center: myLocation, zoom: 15 }); console.log(map) $scope.map = map; $ionicLoading.show(); var posOptions = { timeout: 10000, enableHighAccuracy: true }; $cordovaGeolocation .getCurrentPosition(posOptions) .then(function(position) { $ionicLoading.hide(); var lat = position.coords.latitude; var lng = position.coords.longitude; // alert("Got position: " + lat + ", " + lng); var myLocation = new google.maps.LatLng(lat, lng); var map = new google.maps.Map(document.getElementById('map'), { mapTypeId: google.maps.MapTypeId.ROADMAP, center: myLocation, zoom: 12 }); var marker = new google.maps.Marker({ map: map, label: "U", position: myLocation }); var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; var beachMarker = new google.maps.Marker({ position: RMUTP, map: map, icon: image }); }, function(err) { $ionicLoading.hide(); if (error.code == PositionError.PERMISSION_DENIED) { alert("Permission denied. check setting"); } else if (error.code == PositionError.POSITION_UNAVAILABLE) { alert("Cannot get position. May be problem with network or can't get a satellite fix."); } else if (error.code == PositionError.TIMEOUT) { alert("Geolocation is timed out."); } else { alert(error.message); } }); }) |
ส่วนหน้า index.html ในส่วนของ body ให้ใส่ tag ด้านล่างลงไปเพื่อสแดงผล
1 2 3 4 5 6 |
<!-- Google Maps --> <div id="map"></div> <div class="buttons" ng-click="locate()"> <button class="button button-clear icon ion-android-locate"></button> </div> |
ให้เปิดไฟล์ style.css ซึ่งจะอยู่ในฟอรเดอร์ www/css/ และกำหนด style ให้กับ element id map
1 2 3 4 5 6 |
/* Empty. Add your own CSS if you like */ #map { width: 100%; height: 80%; background-color: yellow; } |
ngCordova FlashLight
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="lib/ngCordova/dist/ng-cordova.js"></script> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter"> <ion-pane ng-controller="MyCtrl"> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Blank Starter</h1> </ion-header-bar> <ion-content> <div class="card"> <div class="item item-text-wrap"> <button class="button button-block button-calm" ng-click="LightOn()"> เปิดไฟ </button> <button class="button button-block button-assertive" ng-click="LightOff()"> ปิดไฟ </button> </div> </div> </ion-content> </ion-pane> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
// Ionic Starter App // angular.module is a global place for creating, registering and retrieving Angular modules // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) // the 2nd parameter is an array of 'requires' angular.module('starter', ['ionic','ngCordova']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { if(window.cordova && window.cordova.plugins.Keyboard) { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); // Don't remove this line unless you know what you are doing. It stops the viewport // from snapping when text inputs are focused. Ionic handles this internally for // a much nicer keyboard experience. cordova.plugins.Keyboard.disableScroll(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); }) .controller('MyCtrl', function($scope, $cordovaFlashlight) { $scope.LightOn=function(){ $cordovaFlashlight.switchOn() .then( function (success) { /* success */ }, function (error) { /* error */ }); } $scope.LightOff=function(){ $cordovaFlashlight.switchOff() .then( function (success) { /* success */ }, function (error) { /* error */ }); } }) |
ionic framework & Sqlite & ngCordova
ionic framework & Sqlite & ngCordova เป็นการใช้งานฐานข้อมูล sqlite ที่เป็นฐานข้อมูลบน smart phone ที่นิยมใช้กันใน ionic สามารถใช้ ngCordova ในการ install plugin Sqlite เพื่อใช้งานได้ทันทีดังนี้
- สร้างโปรเจ็คใหม่ด้วย command prompt
1ionic start sqlapp blank
1cd sqlapp - ไปที่ folder sqlapp และ open with atom (text editor)
- ไปที่ไฟล์ config.xml แก้ไข name กับ widget id
- ใช้ bower install ngcordova
1bower install -g ngCordova
หลังจากนั้นให้เปิดไฟล์ index.html และนำ script ng-cordova.js ไปวางไว้ก่อน cordova.js
1<script src="lib/ngCordova/dist/ng-cordova.js"></script><script src="cordova.js"></script>
หลังจากนั้นให้เปิดไฟล์ app.js และเพิ่ม ngCordova ในส่วนของ angular.module()
1angular.module('starter', ['ionic','ngCordova']) - ลง plugin Sqlite
1cordova plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git
- เปิดไฟล์ app.js กำหนด var db = null; ไว้ด้านบนสุด
- ในส่วนของไฟล์ app.js ในส่วนของ $ionicPlatform.ready จะให้สร้าง db และสร้าง table ขึ้นมา
123456789101112131415161718192021222324252627282930313233.run(function($ionicPlatform, $cordovaSQLite) {$ionicPlatform.ready(function() {try {db = $cordovaSQLite.openDB({name: "my.db",location: 'default'});$cordovaSQLite.execute(db,"CREATE TABLE IF NOT EXISTS translog " +"(id integer primary key, action text, " +"amount integer)");} catch (e) {alert(e);} finally {}if (window.cordova && window.cordova.plugins.Keyboard) {// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard// for form inputs)cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);// Don't remove this line unless you know what you are doing. It stops the viewport// from snapping when text inputs are focused. Ionic handles this internally for// a much nicer keyboard experience.cordova.plugins.Keyboard.disableScroll(true);}if (window.StatusBar) {StatusBar.styleDefault();}});})
- ที่ command prompt สั่ง ionic platform add android
- และใช้คำสั่ง ionic run android
- พิมพ์คำสั่ง monitor ใน command prompt เพื่อเปิด android monitor
- พิมพ์คำสั่ง ionic run android หรือใช้คำสั่ง ionic emulate android
- เราสามารถเข้าดู app ของเราใน android monitor ได้จากภาพ และให้เลือก save db ลงมาเพื่อดูว่ามีข้อมูลอะไรบ้าง
- แก้ไขไฟล์ app.js
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151// Ionic Starter App// angular.module is a global place for creating, registering and retrieving Angular modules// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)// the 2nd parameter is an array of 'requires'var db = null;angular.module('starter', ['ionic', 'ngCordova']).run(function($ionicPlatform, $cordovaSQLite) {$ionicPlatform.ready(function() {try {db = $cordovaSQLite.openDB({name: "my.db",location: 'default'});$cordovaSQLite.execute(db,"CREATE TABLE IF NOT EXISTS translog " +"(id integer primary key, action text, " +"amount integer)");} catch (e) {alert(e);} finally {}if (window.cordova && window.cordova.plugins.Keyboard) {// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard// for form inputs)cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);// Don't remove this line unless you know what you are doing. It stops the viewport// from snapping when text inputs are focused. Ionic handles this internally for// a much nicer keyboard experience.cordova.plugins.Keyboard.disableScroll(true);}if (window.StatusBar) {StatusBar.styleDefault();}});})//*****************COUNT DATA****************.controller('MyCon', function($scope, $ionicPlatform, $cordovaSQLite,$interval) {$scope.ShowCount = function() {/* SELECT COMMAND */$cordovaSQLite.execute(db,"SELECT count(*) as totaldata FROM translog").then(function(res) {if (res.rows.length > 0) {alert("have : " + res.rows.item(0).totaldata + " record.");}},function(error) {alert(error);});}//*****************GET ALL DATA****************$scope.ShowAllData = function() {/* SELECT COMMAND */$scope.logs = [];$cordovaSQLite.execute(db,"SELECT * FROM translog ORDER BY id DESC").then(function(res) {if (res.rows.length > 0) {for (var i = 0; i < res.rows.length; i++) {$scope.logs.push({id: res.rows.item(i).id,action: res.rows.item(i).action,amount: res.rows.item(i).amount});}}},function(error) {alert(error);});}//*****************INSERT DATA****************$scope.add = function(action, amount) {try {if (action == 'expense') {amount = amount * -1;} else {amount = amount * 1;}if (amount != 0) {$cordovaSQLite.execute(db,"INSERT INTO translog (action, amount) VALUES(?,?)", [action, amount]);}alert("Inserted.");$scope.ShowAllData();} catch (e) {alert(e);} finally {}//$state.go('summary');};//*****************DELETE DATA****************$scope.delete = function(id) {try {if (id != '') {$cordovaSQLite.execute(db,"DELETE FROM translog WHERE id=?", [id]);}alert("Deleted.");$scope.ShowAllData();} catch (e) {alert(e);} finally {}};//$scope.ShowAllData();$interval($scope.ShowAllData, 2000,1);})
- index.html
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"><title></title><link href="lib/ionic/css/ionic.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"><!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above<link href="css/ionic.app.css" rel="stylesheet">--><!-- ionic/angularjs js --><script src="lib/ionic/js/ionic.bundle.js"></script><!-- cordova script (this will be a 404 during development) --><script src="lib/ngCordova/dist/ng-cordova.js"></script><script src="cordova.js"></script><!-- your app's js --><script src="js/app.js"></script></head><body ng-app="starter"><ion-pane ng-controller="MyCon"><ion-header-bar class="bar-stable"><h1 class="title">Ionic Blank Starter</h1></ion-header-bar><ion-content ><div class="list"><a href="#" class="item item-icon-left" ng-repeat="log in logs"><h2>{{log.amount}}</h2><p>{{log.action}}</p><button ng-click="delete(log.id)" class="button button-block button-assertive">delete</button></a></div><button ng-click="ShowCount()"> Show count</button><button ng-click="ShowAllData()"> Show all data</button><hr/><div class="list"><label class="item item-input"><span class="input-label">Insert Amount</span><input type="number" ng-model="amount"></label></div><div class="row"><div class="col col-50"><button ng-click="add('income', amount)" class="button button-large button-block button-balanced">Income :)</button></div><div class="col col-50"><button ng-click="add('expense', amount)" class="button button-large button-block button-assertive">Expense :(</button></div></div></ion-content></ion-pane></body></html>
chat
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> <body ng-app="starter"> <ion-pane ng-controller="ChatCtrl"> <ion-header-bar class="bar-stable"> <h1 class="title">Chat App :)</h1> </ion-header-bar> <ion-content class="has-footer"> <div class="list list-inset"> <label class="item item-input"> <i class="icon ion-search placeholder-icon"></i> <input type="text" placeholder="Search" ng-model="SearchInput"> </label> </div> <div class="list"> <a ng-repeat="c in chatLogs | filter : SearchInput" class="item item-icon-left" href="#"> <i class="icon {{c.chat_icon}}"></i> <h2>{{c.chat_message}}</h2> <em>{{c.username}} on {{c.chat_date}}</em> </a> </div> </ion-content> <ion-footer-bar class="item-input-inset footer-item-input-insert bar-dark"> <label class="item-input-wrapper"> <input type="text" placeholder="Message" ng-model="newMsg"> </label> <button ng-click="postMsg(newMsg)" class="button button-clear" > Reply </button> </ion-footer-bar> </ion-pane> </body> </html> |
app.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
// Ionic Starter App // angular.module is a global place for creating, registering and retrieving Angular modules // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) // the 2nd parameter is an array of 'requires' angular.module('starter', ['ionic']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { if (window.cordova && window.cordova.plugins.Keyboard) { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); // Don't remove this line unless you know what you are doing. It stops the viewport // from snapping when text inputs are focused. Ionic handles this internally for // a much nicer keyboard experience. cordova.plugins.Keyboard.disableScroll(true); } if (window.StatusBar) { StatusBar.styleDefault(); } }); }) .controller('ChatCtrl', function($scope, $http, $ionicPopup) { var icon = 'ion-printer'; var name = 'Tee'; var reload = function() { $http({ url: 'http://203.158.144.140/demo_ionic_chat/Home/GetChat' }).then(function(res) { $scope.chatLogs = res.data; }); } $scope.postMsg = function(newMsg) { $http.post( 'http://203.158.144.140/demo_ionic_chat/Home/PostChat', { 'username': name, 'chat_message': newMsg, 'chat_icon': icon }, { method: 'POST', headers: {'Content-Type':'application/x-www-form-urlencoded;charset=utf-8;'} } ).then(function(res) { //console.log(res); $scope.newMsg=''; reload(); }); } //init function; reload(); }) |
ionic command
ionic command จะพิมพ์ใน command prompt (cmd) เพื่อทำงาน โดยมีคำสั่งที่สำคัญดังนี้
1) คำสั่งสร้าง apps
1 |
ionic start app1 blank |
ตรง app1 คือชื่อ apps ที่จะสร้าง
2) คำสั่งเปิด run serve เพื่อจำลอง app ผ่าน browser เพื่อง่ายต่อการพัฒนา apps เริ่มต้น
1 |
ionic serve |
3) คำสั่งปิด serve กรณีที่ทำแล้วอยากจำลองผ่าน emulator หรือ ผ่าน device จริงจะต้องปิด serve โดยพิมพ์
1 |
q |
4) ให้ ionic download sources สำหรับใช้งานกับ android device
1 |
ionic platform add android |
ให้ ionic download sources สำหรับใช้งานกับ iOS device
1 |
ionic platform add ios |
- กรณีที่ error จากการ ใช้คำสั่ง ionic platform add สามารถใช้คำสั่ง remove ได้
1 |
ionic platform remove android / ios |
5) run app
สำหรับ android device / emulator
1 |
ionic run android |
สำหรับ iOS device (จะต้องใช้บน Mac OS และถ้าจะลงเครื่องจริงจะต้องทำผ่าน x code)
1 |
ionic build ios |
1 |
ionic emulator ios |
6) build icon / splash screen
1 |
ionic resources |
ถ้ารูป icon หรือ splash ไม่เปลี่ยนให้พิมพ์เพิ่ม
1 2 |
ionic resources --icon ionic resources --splash |
ionic ถ้า error update หรือ install version ใหม่ไม่ได้
ionic ถ้า error update หรือ install version ใหม่ไม่ได้ ให้พิมพ์ sudo npm cache clean.
Recent Comments