I have worked on few tutorials and at last found something regarding this in ionic framework.....
They gave some codes that use ionic native and i did the same by embedding the below code:
//Display OS name and version (Start)
import { Device } from 'ionic-native';
console.log('Device OS is: ' + Device.device.platform);
console.log('Device OS Version is: ' + Device.device.version);
//Display OS name and version (End)
While using ionic serve i got this in the console:
'Device OS is: undefined'
'Device OS version is: undefined'
Then i guessed it wont work in browser and i tried building and run in my phone but still the same log comes...
PS: I have just started with ionic
Thank you in advance :)
Please see this link
http://ionicframework.com/docs/api/utility/ionic.Platform/
angular.module('PlatformApp', ['ionic'])
.controller('PlatformCtrl', function($scope) {
ionic.Platform.ready(function(){
// will execute when device is ready, or immediately if the device is already ready.
});
var deviceInformation = ionic.Platform.device();
var isWebView = ionic.Platform.isWebView();
var isIPad = ionic.Platform.isIPad();
var isIOS = ionic.Platform.isIOS();
var isAndroid = ionic.Platform.isAndroid();
var isWindowsPhone = ionic.Platform.isWindowsPhone();
var currentPlatform = ionic.Platform.platform();
var currentPlatformVersion = ionic.Platform.version();
ionic.Platform.exitApp(); // stops the app
});
I used cordova-plugin-device to fetch uuid number and device model name. It fetches all possible information about the device. I believe, It will also serve your purpose. Inside onDeviceReady() function, you just assign the values to your convenient variables, like:
var deviceOS = device.uuid;
var deviceVersion = device.version;
Hope It helps. Please let me know if it works. :)
You can get the device os and version in ionic
import { Device } from '#ionic-native/device';
import { Platform } from 'ionic-angular';
constructor(private device: Device,public platform: Platform) {
console.log('Device UUID is: ' + this.device.uuid);
if (this.platform.is('ios')) {
// This will only print when on iOS
console.log('I am an iOS device!');
}
if (this.platform.is('android')) {
// This will only print when on Android
console.log('I am an android device!');
}
}
In Ionic 3 you can use device this way,
import { Device } from '#ionic-native/device';
private platformType:any;
private versionType:any;
constructor(private device: Device) {
this.platformType = this.device.platform;
this.versionType = this.device.version;
}
Now this can be used in the html file using data-binding ex:
<ion-grid>
<ion-row>
<ion-col>
<h1>Platform Type: {{platformType}}</h1>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<h1>OS Version: {{versionType}}</h1>
</ion-col>
</ion-row>
</ion-grid>
Note: In the browser the variables will log null. The Device plugin function will only work on the native devices. You can test your device with
ionic cordova run (android or ios) --device
If you are using Ionic V1,
ionic.Platform.version();
You can use the above to get the Major version of the Device OS.
eg: if your device is running IOS 14.8.0 the above code will only return 14
This behavior has also been discussed in this github issue.
If you wish to get the minor versions as well, then you would have to use the Cordova device plugin.
Related
I have a problem with Ionic storage in my Ionic App for Windows (UWP app). I already tested and deployed my app for Android without any trouble.
Now I would like to generate an UWP app.
The app I’m developing is a workshop’s dashboard. The indicators change every day and I need to save them from one day to another. To do this I usethe storage module of Ionic.
When launching the command
$ionic serve
the app responds exactly as it should in the web browser (Firefox). From one launch to another my data are still there.
When I use
$ionic cordova run windows
the installation and launch steps of my app work fine. Every function of my app runs fine, but the call to storage (get and set) doesn’t work : when I close, and then reopen it as an autonomous application, I loose all data every time. It is the same when I run the app from Visual Studio.
Moreover, I write some console.log in the result of the promise and none of them is written in the Javascript console. It is like Windows does not recognize the command.
I tried with Visual Studio 2015 Update 3 and Visual Studio 2017, the result is identical. I followed the recommendation of Ionic Doc and add the target platform windows10 in the config.xml.
Does anyone have an idea of what I’m doing wrong ? Is there an incompatibility between Windows and Ionic ?
Thanks for any help.
Config :
Windows 10 64-bits
Ionic CLI: 3.19.1
Cordova CLI : 8.0.0
Node : v6.11.2
Visual Studio Community 2017 (15.5.27130.2036)
Extract of my code maPage.ts :
import { Storage } from '#ionic/storage';
export class maPage {
constructor(public storage: Storage) {
this.downloadData();
}
ionViewWillLeave()
{
this.saveData();
}
TabData = {
id: 0,
label: '',
Tab1: [],
Tab2: [],
attri1 : 0,
attri2: false
}
Param = {
Objet1: {NbObj1: 7},
Objet2: {NbObj2: 5}
}
saveData()
{
var Data: object;
Data =
{
TData: this.TabData,
TParam: this.Param
}
this.storage.set('Data', Data).then(_=> {
console.log('Backup done!');
}, error => {
console.log('erreur : ', JSON.stringify(error))
});
}
downloadData()
{
this.storage.ready().then(()=>{
console.log('storage ready');
this.storage.get('Data').then((val) => {
this.TabData = val.TData;
this.Param = val.TParam;
console.log('Récupération terminée !');
}).catch(erreur => {
console.log('La variable Data est vide ou n\'existe pas!');
console.log('erreur : ', JSON.stringify(erreur));
}).catch(err => {
console.log('storage not ready');
console.log('err : ', JSON.stringify(err));
});
}
}
On Windows platform, console.log is not supported. To do that, you should install cordova-plugin-console, or need to use alert function.
Regarding storage, I am suggesting you could use localstorage or cordova-sqlite-storage.
I have problem with plugin
import { Geolocation } from '#ionic-native/geolocation';
The geolocation does not work ionic 3 - ANDROID but in web browser from my computer its normal for me, this is my code:
export class TestPage {
state: string = "";
constructor(private geolocation: Geolocation,
public platform: Platform) {
this.platform.ready().then(() => {
this.geolocation.getCurrentPosition().then((resp) => {
// resp.coords.latitude
// resp.coords.longitude
this.state+="-"+resp.coords.latitude;
}).catch((error) => {
this.state+="-"+error.message;
});
});
}
}
The result it´s above, I need your help, whats is the wrong??
You need to use below CLI with Android device.It won't work with --livereload.
Reason: Google regards localhost as secure, but others as not.
ionic cordova run android --prod --device
You can read more about this issue here and here.
I am new to Ionic 2 and everything around. I'm tryng to setup my first mobile app: touching a button I would open native navigation (Google Maps for Android, for instance). I've installed launchnavigator plugin:
ionic plugin add uk.co.workingedge.phonegap.plugin.launchnavigator
and inside cremony.ts page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LaunchNavigator, LaunchNavigatorOptions } from 'ionic-native';
#Component({
selector: 'page-ceremony',
templateUrl: 'ceremony.html'
})
export class Ceremony {
constructor(public navCtrl: NavController) {
}
navigate() {
let options: LaunchNavigatorOptions = {
start: ""
};
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
}
}
make a build npm run buildand upload it to IonicView with ionic upload.
I've do everything like suggested in this link but with different luck.
But when I click the button (a simple <button ion-button (click)="navigate()">Navigate</button> in the ceremony.html) in the Ionic View an error say: Error launghing navigator: plugin_not_installed.
I inspected the project, the plugins directory contains uk.co.workingedge.phonegap.plugin.launchnavigatorlooks directory. So I look at package.json and config.xml and I've added the value uk.co.workingedge.phonegap.plugin.launchnavigator in the cordovaPlugins
and tag <plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" spec="~3.2.1" /> in the widget root. npm run build, ionic upload but nothing changed.
Where is my error?
New answer, there is something wrong with your project. Have you modified your index.html file? Is it still including cordova.js? If so what version of Ionic and Cordova are you using?
I made this sample application with your exact code and it works perfectly on both iOS and ANdroid: https://github.com/roblouie/navigator-plugin-test
Did a screen recording on iOS: https://giphy.com/gifs/xTiN0EEQV82aIXWnQI
Just grabbed an image on Android, but it works the same:
Please try the project from github.
Cordova plugins need to be called only once platform is ready.
constructor(public navCtrl: NavController,public platform:Platform) {//inject in constructor
}
In your function navigate()
this.platform.ready().then(()=>{
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
});
The reason for your error is that you are using Ionic View. Your Ionic app is just html, css, and javascript. However, any plugins you use are written in Java for Android and Objective C for iOS. That plugin source code is then compiled into your app for each platform.
With Ionic View, it only uploads your app, the html, css, and javascript. Nothing is compiled. Ionic View is the app itself, and it loads your code. So no plugins you have are included. Ionic View itself does have some plugins installed on it, and you can see that list here: https://docs.ionic.io/tools/view/#supported-plugins
Unfortunately you will not be able to test any plugin not in that list without building and deploying to a device or emulator.
Can anyone please help me out to get deviceid for ios, windows and android devices using cordova plugins in ionic framework for a hybrid application. As i am new to this hybrid application development struggling with this from more than one work. Any help can be appreciable.
Thanks.
Take a look at this link,
Usage:
module.controller('MyCtrl', function($scope, $cordovaDevice) {
document.addEventListener("deviceready", function () {
var device = $cordovaDevice.getDevice();
var cordova = $cordovaDevice.getCordova();
var model = $cordovaDevice.getModel();
var platform = $cordovaDevice.getPlatform();
var uuid = $cordovaDevice.getUUID();
var version = $cordovaDevice.getVersion();
}, false);
})
Use IDFVPlugin :
cordova plugin add https://github.com/jcesarmobile/IDFVPlugin.git
In your controller :
window.IDFVPlugin.getIdentifier(function(result){
alert(result);
},function(error){
alert(error);
});
Sources :
https://github.com/jcesarmobile/IDFVPlugin
http://forum.ionicframework.com/t/how-to-get-iphone-unique-id-udid-in-ionic-framework-script/9575
installed cordova device plugin by :
sudo cordova plugin add org.apache.cordova.device
then downloaded ngCordova and included ng-cordova.min.js in to js folder and also included in index.html
next what i did is injected ngCordova as follows
angular.module('starter', ['ionic', 'starter.controllers','ngCordova'])
then included in controller as follows
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout, $ionicPlatform,$cordovaDevice)
but still getting the following errors
ReferenceError: device is not defined
at Object.getUUID (http://localhost:8100/js/ng-cordova.min.js:1:14929)
at new <anonymous> (http://localhost:8100/js/controllers.js:27:26)
at invoke (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11591:17)
at Object.instantiate (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11602:23)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:14906:28
at updateView (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42986:30)
at eventHook (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42933:17)
at Scope.$broadcast (http://localhost:8100/lib/ionic/js/ionic.bundle.js:20605:28)
at $state.transition.resolved.then.$state.transition (http://localhost:8100/lib/ionic/js/ionic.bundle.js:34122:22)
at wrappedCallback (http://localhost:8100/lib/ionic/js/ionic.bundle.js:19197:81)
Can you now tell me what went wrong?
If is there another way to read the Device UUID show me the direction to it.
Yes, there is another way. You just don't need the ngCordova for this.
When you add the plugin cordova plugin add org.apache.cordova.device it's loaded to your application and therefore the info you want is at window.device.
If you want to get device uuid at anywhere in the code you just need to call window.device.uuid.
If you want as soon as the app starts, then use:
ionic.Platform.ready(function(){
console.log( window.device.uuid );
});
If you are using '> ionic serve', device will be "not defined." Try in an emulator or physical device.
Use ngCordova and cordova Device plugin:
cordova plugin add org.apache.cordova.device
module.controller('MyCtrl', function($scope, $cordovaDevice) {
var uuid = $cordovaDevice.getUUID();
});
Within v2 it works like this:
import { Device } from 'ionic-native';
console.log('Device UUID is: ' + Device.uuid);
Reference: http://ionicframework.com/docs/v2/native/device/
Install:
#ionic-native/core
#ionic-native/device
enter link description here
ionic cordova plugin add cordova-plugin-device
npm install --save #ionic-native/device
Add this plugin to your app's module
// app.module.ts
import { Device } from '#ionic-native/device';
...
#NgModule({
...
providers: [
...
Device
...
]
...
})
export class AppModule { }
Usage
import { Device } from '#ionic-native/device';
constructor(private device: Device) { }
...
console.log('Device Model is: ' + this.device.model+
'\n Device UUID is: ' + this.device.uuid+
'\n Device serial is: ' + this.device.serial+
'\n Device platform is: ' + this.device.platform+
'\n Device version is: ' + this.device.version+
'\n Device manufacturer is: ' + this.device.manufacturer);
If won't run change "import { Device } from '#ionic-native/device';" for "import { Device } from '#ionic-native/device/ngx';"
And "this.device.uuid" for "Investigate"
Use these commands for run in browser
ionic build
ionic cordova platform add browser
cordova run browser
And works ! in these versions
in Browser
in Real Device
You could just use ionic.Platform.device() in your platform.ready function.
$ionicPlatform.ready(function {
console.log(ionic.Platform.device());// returns an object containing device uuid,version, platform, manufacturer ...
});
hope this helps someone :).
Regards.
http://forum.ionicframework.com/t/ionic-cordova-device-uuid/13652
You may only access cordova plugins within the ionic.Platform.ready() callback function:
angular.module('starter.controllers', [])
.controller('DashCtrl', function ($scope, $state, $cordovaDevice) {
var init = function () {
console.log("initializing device");
try {
$scope.uuid = $cordovaDevice.getUUID();
}
catch (err) {
console.log("Error " + err.message);
alert("error " + err.$$failure.message);
}
};
ionic.Platform.ready(function(){
init();
});
})
This is because Cordova plugins take some more time to load then the web application. The ionic.Platform.ready() callback is triggered as soon Cordova has fully loaded or immediately if it is already loaded.
wow found out what wrong i was doing... through this question. http://forum.ionicframework.com/t/problem-to-use-ngcordova-device-is-not-defined/11979
when we test on other device which has other platform than cordova supports this happens.
this was a useful discovery for me.
Have been struggling with this for hours today, install the cordova device plugin with:
cordova plugin add cordova-plugin-device
make sure you also reference the plugin in your config.xml:
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />