How to Get Device Information Using PhoneGap

Deepak Dwij
12y
26.7k
0
0
100
Article

Introduction

In this article we are going to have a very interesting part, that is getting information about the device using a PhoneGap application. PhoneGap provides the device class that can retrieve the following information:

Device Name
Platform
Unique Device ID
Device version

Let's see how can we achieve this using a PhoneGap Application.

Step 1 : Open Visual Studio 2010

Step 2 : Open File menu -select new - Choose Project then.

pg 3.jpg

Step 3 : Select the new phone application and rename it according to your requirement.

dvc 1.jpg

Step 4 : Open the deviceinfo.html file:

Double click on the deviceinfo.html file and go to the source code as shown in the given figure.

Step 5 : After opening the source code, replace the code by the given code.

Scripting for getting info using JavaScript

!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

    <title>PhoneGap WP7</title>
           <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
      <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
     <script type="text/javascript">
         function Button1_onclick() {
              var DeviceName = device.name;
              var Platform = device.platform;
            var UniqueID = device.uuid;
              var Version = device.version;
              navigator.notification.alert('Device Name : ' + DeviceName + '\n Platform : ' + Platform
             + '\n UUID : ' + UniqueID + '\n Version : ' + Version);
          }
      </script>
</head>
<body>
    <h1>Device infomation</h1>
    <p>
<input id="Button1"type="button"value="Get Info"onclick="return Button1_onclick()" />
</p>
</body>
</html>

JavaScript for retrieving the info of device on button click

By using this script, the user will get info about the device name, device platform, device uuid and version on the button click.

function Button1_onclick()
{
    var DeviceName = device.name;
    var Platform = device.platform;
    var UniqueID = device.uuid;
    var Version = device.version;
navigator.notification.alert('Device Name : ' + DeviceName + '\n Platform : ' + Platform
+ '\n UUID : ' + UniqueID + '\n Version : ' + Version);
}

Note : navigator.notification.alert() is used to show a custom alert or dialog box.

Step 6 : Code for Master.css file

body
{
    background:#000 none repeat scroll 0 0;
    color:#ccc;
    font-family:Helvetica, Verdana, Geneva, sans-serif;
    margin:0;
    border-top:1px solid #393939;
}
h1
{
     text-align:center;
     font-size:18px;
     color:#FFC312;
}

Step 7 : The capabilities needed for the proper execution of our application are listed inside the WMAppManifest.xml file available in the Properties directory.

new one.jpg

Capabilities with PhoneGap Application.

<Capabilities>
      <Capability Name="ID_CAP_IDENTITY_DEVICE" />
      <Capability Name="ID_CAP_IDENTITY_USER" />
      <Capability Name="ID_CAP_LOCATION" />
      <Capability Name="ID_CAP_NETWORKING" />
      <Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
</Capabilities>

Step 8 : Output Press F5