Post
Ask Question

How to Get Device Information Using PhoneGap


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

pg 2.jpg

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:

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

dvc2.jpg

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

out dvc.jpg

After clicking on the Get Info button you will get all information.

out dvc 1.jpg

Here are some related resources


Similar Articles