Phonegap Device API Tutorial

Phonegap / Apache Cordova Device Api tutorials

Phonegap / Apache Cordova Device Api tutorials

In previous tutorials, we had look on phonegap events, from this tutorials we’re going see plugin tutorials.

In this article i’m going to write about step by step tutorials guide for phonegap device api.

What you’ll learn from this tutorial ?

  • What is device api?
  • How to get device information using phonegap device api ?
  • how to create phonegap application for getting device information ?

What is device api ?

Device api is used to gather specific information about device such as cordova version, mobile model , platform information, device unique id (UUID). OS version

What are the properties of phonegap device api?

  • device.cordova     –   returns cordova version
  • device.model        –   returns device model (E.g HTC 132)
  • device.platform   –  platform information (E.g Android)
  • device.uuid           – returns phone unique id (1sd341sdr1)
  • device.version     – App version

How to get device information using phonegap device api ?

  • Create Phonegap / Apache Cordova project
cordova create DeviceInfo com.phongap.deviceinfo DeviceInfo
  • Change working directory
cd DeviceInfo
  • Add Platform
cordova platform add android
  • Now add plugin for device plugin
cordova plugin add org.apache.cordova.device
  • Now Change your index.html code

In this tutorial i’ve integrated Ionic Framework for UI design


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Device Info</title>
<link rel="stylesheet" href="css/ionic.min.css">
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jq.js"></script>
<script>
function onLoad()
{
alert("onload");
document.addEventListener("deviceready",odr,false);
}
function odr()
{
alert("device ready");
var cordovaVersion=device.cordova;
var phoneModel=device.model;
var phonePlatform=device.platform;
var phoneUUID=device.uuid;
var osVersion=device.version;
$("#cordovaVersion").html(cordovaVersion);
$("#phoneModel").html(phoneModel);
$("#phonePlatform").html(phonePlatform);
$("#phoneUUID").html(phoneUUID);
$("#osVersion").html(osVersion);
}
</script>
</head>
<body onload="onLoad()">
<div class="bar bar-header bar-light">
<h1 class="title">Device Information</h1>
</div>
<br/><br/>
<ul class="list list-inset">
<div class="item">
Cordova Version <p id="cordovaVersion" class="item-note"></p>
</div>
<div class="item">
Phone Model <p id="phoneModel" class="item-note"></p>
</div>
<div class="item">
Platform <p id="phonePlatform" class="item-note"></p>
</div>
<div class="item">
UUID <p id="phoneUUID" class="item-note"></p>
</div>
<div class="item">
OS Version <p id="osVersion" class="item-note"></p>
</div>
</div>
</body>
</html>

Screenshot

phonegap device api tutorials

phonegap device api tutorials

Share This

Share this post with your friends!