I try to get the device's information in a component but I don't know how to do that. I tried this :
console.log(Device.device.model);
But it return "undifined".
How can I get this information ?
Have you install plugin?
ionic plugin add cordova-plugin-device
import { Device } from 'ionic-native';
console.log('Device: ' + Device);
Read more on http://ionicframework.com/docs/v2/native/device/
Related
My app is under Ionic 4 for android and I have to open/run/launch external app (for exemple com.google.android.youtube or com.sygic.truck) -> for instance, any installed app.
I tested many options without any success :
InAppBrowserModule (using application://my.package.name).
Cordova plugin lampaa (I didn't find any ways to use it under angular/ts app type).
I tried also webIntent using package option and action option calling the main Activity.
For InAppBrowserModule, i'm stuck with the http:// protocole appended before my app url.
For Lampaa, i'm stuck with the undefined startApp (even after following other threads suggestions).
And for webIntent, I don't think that it's relevent for my issue.
Any suggestions ?
Thanks in advance !
[EDIT]
I finally make it works !
You can use one of those 2 lines :
this.iab.create('android-app://com.google.android.youtube',"_system");
window.open('android-app://com.google.android.youtube',"_system");
You can replace com.google.android.youtube by any application package name !
You can check if the user is on Android, have the app installed and later open it as follow:
constructor(
private platform: Platform, // from 'ionic-angular'
private appAvailability: AppAvailability, // from '#ionic-native/app-availability'
private iab: InAppBrowser, // from '#ionic-native/in-app-browser'
) {}
openYoutube() {
const package = "com.google.android.youtube"
if(this.platform.is('android')) {
this.appAvailability.check(package)
.then(()=> {
this.iab.create('android-app://'+package, '_system', 'location=yes')
})
.catch(()=> {
// not installed
)
} else {
// not on Android
}
}
For ionic 4 we can use
ionic cordova plugin add cordova-plugin-app-launcher
npm install #ionic-native/app-launcher
You can use the following cordova plugin to check if other apps are installed and launch them.
ionic cordova plugin add cordova-plugin-app-launcher
npm install #ionic-native/app-launcher
Simple Cordova plugin to see if other apps are installed and launch them.
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.
I am trying to enable my phone bluetooth via ionic app. I am calling something like this:
cordova.plugins.locationManager.enableBluetooth()
But not enabling and making any error also. Following is my app.js code. Please help out.
import {App, Platform} from 'ionic-framework/ionic';
import {TabsPage} from './pages/tabs/tabs';
#App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
export class MyApp {
static get parameters() {
return [[Platform]];
}
constructor(platform) {
this.rootPage = TabsPage;
platform.ready().then(() => {
StatusBar.backgroundColorByName('red');
console.log("App starting.");
cordova.plugins.locationManager.enableBluetooth();
});
}
}
Is there anything I am missing. My phone is One Plus One.
UPDATE:
Is there any particular configuration I have to in device to achieve
this in develop mode
App technical info
Ionic 2 & Angular 2
Plugin : com.unarin.cordova.beacon (Link)
I resolved this myself. Seems to be issue was with petermetz/cordova-plugin-ibeacon, I was using 25days older plugin.
First removed the existing plugin by running by going into project root folder:
sudo cordova plugin rm com.unarin.cordova.beacon
Then again added the plugin (basically I updated my plugin):
sudo cordova plugin add https://github.com/petermetz/cordova-plugin-ibeacon.git
After that everything started working fine.
Thanks.
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" />
I'm having an issue with some android devices when changing the font-size display setting through configuration.
In web browser my app is simple ignoring this. This is true for some other mobiles too.
But with some specific mobiles (like Motorola G or X) changing this config also affects my Phonegap app.
I don't know how to avoid this to make the app look consistent
I've found a solution using this cordova plugin: com.phonegap.plugin.mobile-accessibility
You have to follow installation instructions for the plugin, and then you can use it inside Ionic app. You only have to ensure to call its functions after Cordova 'deviceready' callback (accesed by $ionicPlatform.ready in the example below):
angular.module('app').controller('IndexController', function ($ionicPlatform, $window) {
$ionicPlatform.ready(function(){
if($window.MobileAccessibility){
$window.MobileAccessibility.usePreferredTextZoom(false);
}
});
});
For anyone using Ionic. Documentation is here.
Install
$ ionic cordova plugin add phonegap-plugin-mobile-accessibility
$ npm install --save #ionic-native/mobile-accessibility
Add to module, i.e. app.module.ts
import { MobileAccessibility } from 'ionic-native';
#NgModule({
providers:[MobileAccessibility]
});
In app.component.ts
constructor( mobileAccessibility: MobileAccessibility, platform: Platform) {
platform
.ready()
.then(()=>{
mobileAccessibility.usePreferredTextZoom(false);
});
}