Tag Archives: Mobile Application

Steps to implement TelemetryApp in Windows Store apps using API:

 

1. Create Telemetry account (telemetryapp.com)
There are two types of telemetry accounts
Telemetry Enterprise Edition – It is a premium account offering by telemetry. For more information Enterprise Edition account page.
Telemetry Community Edition – It is a free account which has very limited features to provide a preview of telemetry for new organizations. For more information please see our Community Edition account page.
telemetry comunity Account

2. After Successful login in to the telemetryapp.com, initially you will be prompted to add a Board.

create board
Board:
A Board (dashboard) is a collection of widgets linked to metrics organized across a user determined layout. Below is an example screenshot how a board looks after adding widgets.

view board

Agents:

After successful creation of board now we need an agent to communicate with the board.

– Go to Agents tab and select Add agent

Add Agent

– Give a name and click on create

Agent Name

– Copy the Agent token to secure place, you will not be able to see it again.

Agent API tocken

Widgets:

Boards contain widgets. A widget may be a chart, a number or simply a box to contain other widgets

Adding a widget to the board:

a. Select Add Widget option right above board properties

Add properties

b. Now select a widget which is suitable for your application.

sample widgets

c. After adding widget the board looks like below

view widget

Flows:

Flows are objects that represent the flow of metrics within Telemetry.

widget properties

Adjusting Board Properties:

Here you can title your Board and adjust the settings, or properties, of your Board.

board properties

Widget Properties:

After adding Flows to your Board, you can select a Flow and edit the properties of the selected Flow.

view widget properties

Layers:

  • All your widgets on a board can be found as a list of layers under the Layers tab.

Boxes:

  • Each widget box can be moved around, resized, and even layered.
  • Select a widget you want to adjust, and on hover you can see options to drag out and resize your box or to move it.
  • You can even have just one or two very large widgets on a board.

Adding a Logo:

  • The best way to personalize and brand your board, is to add a custom logo to your board.
  • From our Image widget, upload an image of your logo directly to your board if you have a paid plan with us.
  • You can then change the background color of the Image widget so your logo looks its best.

Board Backgrounds:

  • Add an image or color background to give your board(s) a custom theme.
  • Adjust your widget background color and opacity so your widgets and background are visible.

Widget Background:

  • Adjust your widget background color and opacity so your widgets and background are visible.

Board Layout:

  • Do you want to create 5 tidy columns on your board but notice you have extra space or one column is smaller or larger than the others? You can adjust the number of rows and columns your widgets snap to under Board Properties.

3. API
a. Accounts:

The account object represents your account. Typically you’ll see this referenced by other objects. This is a read only object.

Account Object

Parameter

Description

Id

A globally unique static string identifying the object.

name

The name of your account.

contact_email

The contact email address.

contact_phone

The contact phone number.

api_soft_limit

API soft limit.

api_hard_limit

API hard limit.

api_use_last_24

API usage of the last 24 hours.

api_limit_use

API usage of the last hour.

user_limit

Users limit.

board_limit

Boards limit.

agent_limit

Agents limit.

viewer_limit

Viewers limit.

api_version

API version.

Plan

The plan of your account.

plan_expires_at

The plan expiry date (if any).

To read Account Details

GET https://api.telemetryapp.com/account

This method will return your current account.

For Account Update

PATCH https://api.telemetryapp.com/account

This method will update your current account.

b. Boards

The boards object represent the boards (dashboards) within your account.

Boards are collections of widgets and their flows contained together for display.

Board Object

Parameter

Description

id

A globally unique static string identifying the object.

name

The name of the board.

theme

The theme for the board.

columns

The number of columns in the board grid.

rows

The number of rows in the board grid.

size

An array representing the native size of the board.

aspect_ratio

A string with the aspect ratio of the board.

display_board_name

Whether to show the board name at the top of the board or not.

channel_tag

The tag for the default channel for the board.

widget_margins

The external margin of a widget, defaults to 3.

widget_padding

The internal padding of a widget, defaults to 8.

font_size

The size of the font to use, can be ‘small’, ‘normal’ or ‘large’.

font_family

The font family to use, defaults to ‘normal’ which uses the theme default.

background_color

The background color of the board.

background_url

The background image URL of the board.

widget_color

The background color of the widgets.

widget_title_color

The color of the widgets’ titles.

widget_title_size

The size of the widgets’ titles.

Boards Listing

GET https://api.telemetryapp.com/boards

This method will return a list of all boards on your account.

Board Details

GET https://api.telemetryapp.com/boards/:id

This method will return a specific board on your account by id.

Export Board

GET https://api.telemetryapp.com/boards/:id/export

This method will return a specific board on your account by id and also its widgets details.

Create a Board

POST https://api.telemetryapp.com/boards

This method will create a new board.

Import a Board

POST https://api.telemetryapp.com/boards/import

This method will create a new board and widgets based on the json input.

Update a Board

PATCH https://api.telemetryapp.com/boards/:id

This method will update a board object.

Delete a Board

DELETE https://api.telemetryapp.com/boards/:id

This method will delete a board object.

c. Widgets

Widgets are mostly hidden from the Telemetry web interface however they’re

Critical elements to position flows within a board.

Widget Object

Parameter

Description

id

A globally unique static string identifying the object.

board_id

A globally unique static string identifying the board that the widget belongs to.

variant

The variant of the widget: barchart, box, bulletchart, clock, compass, countdown, funnelchart, gauge, graph, grid, icon, iframe, image, log, map, multigauge, multivalue, piechart, scatterplot, servers, status, table, text, tickertape, timeline, timeseries, upstatus, value, video, waterfall, weather.

column

The column of the top left of the widget on a board.

row

The row of the top left of the widget on a board.

width

The width of a widget in columns.

height

The height of a widget in rows.

in_board_index

The layer sorting order of the widget within the board.

background

The background color of the widget. Possible values are:
“default” => The background will be dark/light depends on the selected theme of the board
“none” => Transparent background
Hex code (e.g. #09ab3f) => Hex code of a color.

renderer

An optional parameter that specifies a specific renderer to use. Things like changing a line chart from a spline to an area. See the renderer options below.

List all Widgets

GET https://api.telemetryapp.com/widgets

This method will return a list of all widgets on your account.

Display a Widget

GET https://api.telemetryapp.com/widgets/:id

This method will return a specific widget on your account by id. It also return an array of flows for the default channel of the board. There’s an optional channel_id parameter to return the flows for that channel instead of the default.

Create a Widget

POST https://api.telemetryapp.com/widgets

This method will create a new widget.

Update a Widget

PATCH https://api.telemetryapp.com/widgets/:id

This method will update a widget object.

Delete a Widget

DELETE https://api.telemetryapp.com/widgets/:id

This method will delete a widget object.

Renderer Options

Different Widgets support different renderer options. You can select the renderer using the Telemetry Manager when designing a board. When embedding a specific widget however in order to use something other than the default renderer you must specify it in the embed tag.

The following renderer options are supported for the following flow variants:

Variant

Options

compass

gauge, heading

gauge

circle, combined, vertical, horizontal

linechart

line, spline, area, bar, scatter

number

equal, number, label, icon

sparkline

spline, line, bar, area

timeseries

line, spline, area, bar, scatter

4. Implement telemetry in Windows store or Phone app using API

In this article I am using bar chart to explain how to implement in windows store apps. The procedure is same for all widgets.
Bar Chart:

A bar chart is a stack of horizontal bars, each with a label, value and colour. The value determines the length of the bar. The bars will be sorted from top to bottom in terms of length by default. You can choose to turn off sorting. Send data with a hash of bars containing an array with each bar as a hash. Bar charts can display a maximum of 20 bars. There may be less than 20 shown if your widget box is too small. Resize your widget box if all your data is not being displayed.

Parameters

Parameter

Notes

Type

Description

bars

Required

array of objects

The bars

bars[]color

Required

CSS color

The color of the bar.

bars[]label

Required

string

The text to overlay on top of the bar.

bars[]value

Required

number

A number representing the value of the barchart. This will determine the length of the bar.

max

 

integer

The min possible value of the bar.

min

 

integer

The max possible value of the bar.

sort

 

boolean

Whether to sort the bars by value or not. The default is true.

– Adding a Bar Chart into board.
Log in into telemetryapp.com, go to boards and select edit board.

edit board

– Now click on add widget, under charts select Bar Chart.

add widget bar chart

select bar chart

After adding Bar chart into board, select the bar chart on board, now go to widget tab in properties window and expand general tab.

bar chart properties

Copy the Flow Tag to a note pad.

bar chart flow tag name

Now we have a widget to display the flow data on board.

5. Create a Windows store or Phone app (Phone 8.1 or Windows 8.1) project in visual studio to send flows to bar chart from windows app, in my example I created a Universal Hub App project.

create windows store app

Open HubPage.xaml.cs, under load state method write the following code to send the flow data to recently created Bar Chart.

To use API we need the following information

  • URI
  • API Token (refer step 2 under Agents)
  • Flow Tag (In earlier step we copied flow tag for bar chart)

URI = “https://api.telemetryapp.com/flows/Flow Tag/”;

For Authentication/Authorization we need to pass Agent Token as user name and password as blank in POST method.

Prepare list of bars information:

In this example I am using bar chart 

public class Bar
        {
            public string color { get; set; }
            public string label { get; set; }
            public int value { get; set; }
        }

        public class BarRootObject
        {
            public List<Bar> bars { get; set; }
        }

 

BarRootObject barRootObject = new BarRootObject();
            barRootObject.bars = new List<Bar>();
            var bar = new Bar();
            bar.color = "#66CC00";
            bar.label = "Users";
            bar.value = 4;
            barRootObject.bars.Add(bar);

            bar = new Bar();
            bar.color = "#FF8900";
            bar.label = "Sessions";
            bar.value = 30;
            barRootObject.bars.Add(bar);

            bar = new Bar();
            bar.color = "#FFFF33";
            bar.label = "Crashes";
            bar.value = 26;
            barRootObject.bars.Add(bar);

            bar = new Bar();
            bar.color = "#FF0000";
            bar.label = "Exceptions";
            bar.value = 75;
            barRootObject.bars.Add(bar);

In above code I am passing four bars information which include colour, label and value (If you want to know/pass more properties info please refer Bar charts Flow Object table above).

POST Method:

string URI = "https://api.telemetryapp.com/flows/testtelemetry_piechart_1/&quot;;
            HttpClient httpClient = new HttpClient();
            httpClient.DefaultRequestHeaders.Authorization = CreateBasicHeader("**Replce with Agent Token**", "");
            metrics metric= new metrics();
            metric.values =new int[]{10,70,25,5};
            metric.labels = new string[] { "A", "B", "C", "D" };
            metric.colors = new string[] { "#1F1F33", "#669900", "#7A0000", "#334C4C" };
            string postData = JsonConvert.SerializeObject(metric);
            StringContent c = new StringContent(postData, Encoding.UTF8, "application/json");
            httpClient.MaxResponseContentBufferSize = 100000;
            var result = await httpClient.PostAsync(URI, c);
            var content = await result.Content.ReadAsStringAsync();

 

Method for creating Authentication Header Value:

public static AuthenticationHeaderValue CreateBasicHeader(string username, string password)
        {
            byte[] byteArray = System.Text.Encoding.UTF8.GetBytes(username + ":" + password);
            return new AuthenticationHeaderValue("Basic", Convert.ToBase64String(byteArray));
        }

6. Run the App

Now go to telemetry dashboard and check the bar chart has added four new bars with values.

bar chart with bars info

Advertisements

HTML5, jQuery Mobile and ASP.NET MVC 4–Using ViewModel between the model and controller

You can download from Windows Store at http://apps.microsoft.com/webpdp/en-US/app/emergency-help-me/477b898a-6781-4b75-a439-44dee5904f14

To get started with the development, we have seen the post Introduction to HTML5 Development Using VS 2010, HTML5, jQuery Mobile and ASP.NET MVC 4.

In an enterprise application development scenario, we might need to aggregate some of the models/data sources and present it as a whole to the controller. For simplicity, let us take a case where we need to enter new student Name, Grade and the State as shown in Fig 1.

The Grades are A, B & C. But it might make much sense if we can show these grades as First Class, Second Class, Third Class instead of A,B & C in the UI. So in the UI, we need to show  First Class, Second Class, Third Class but while saving the data we need to save the corresponding values in the DB. Same holds for the state as well. When the user clicks on state dropdown selection icon, the states list pops up and displays all the states. When a state is selected, it is shown in the UI but when saved to the DB, the code names are saved like CA for California as shown in figure 2.

image

Fig 1: Form for entering new student information

image

Fig 2: When clicked on the State drop down list, the above screen pops up.

The Magic of ViewModel: ViewModels allow you to shape multiple entities from one or more data models or sources into a single object, optimized for consumption and rendering by the view. The below figure 3 illustrates the concept of a ViewModel:

image

Fig 3: StudentViewModel aggregating the different models and data sources and supplying the information to the view as a single entity.

The purpose of a ViewModel is for the view to have a single object to render, alleviating the need for UI logic code in the view that would otherwise be necessary. This means the only responsibility, or concern, of the view is to render that single ViewModel object, aiding in a cleaner separation of concerns (SoC). Concerns are distinct aspects of the application that have a particular purpose (i.e., concern), and keeping these aspects apart means your application is more organized, and the code more focused. Putting data manipulation code in its own location away from the view and controller, enforces SoC. Using ViewModels in MVC  leads to more easily maintainable and testable code.

Let us create our data sources. The first one is the grade and the code is as follows. The Grades class is a simple Dictionary object containing two type parameters of type string. The class also contains the definitions for all the members in the Dictionary (i.e., the grades data). The only property in the Grades class is the GradeSelectList, which is an object that Html Helpers use with to render an HTML <select> element that displays a listing of grades. The type Dictionary<string, string> in the GradeSelectList property maps to the grades abbreviation then grade name, respectively.

public class Grades
{
    public static SelectList GradeSelectList
    {
        get
        {
            return new SelectList(GradeDictionary, "Value", "Key");
        }

    }

    public static readonly IDictionary<string, string>
            GradeDictionary = new Dictionary<string, string>
            {
              {"Choose…",""}
            , { "First Class", "A" }
            , { "Second Class", "B" }
            , { "Third Class", "c" }
            };
}

 

The same login for the states. The code for StatesDictionary is as follows.

public class StatesDictionary
{
    public static SelectList StateSelectList
    {
        get { return new SelectList(StateDictionary, "Value", "Key"); }
    }

    public static readonly IDictionary<string, string>
        StateDictionary = new Dictionary<string, string> {
      {"Choose…",""}
    , { "Alabama", "AL" }
    , { "Alaska", "AK" }
    , { "Arizona", "AZ" }
    , { "Arkansas", "AR" }
    , { "California", "CA" }
    , { "Colorado", "CO" }
    , { "Connecticut", "CT" }
    , { "Delaware", "DE" }
    , { "District of Columbia", "DC" }
    , { "Florida", "FL" }
    , { "Georgia", "GA" }
    , { "Hawaii", "HI" }
    , { "Idaho", "ID" }
    , { "Illinois", "IL" }
    , { "Indiana", "IN" }
    , { "Iowa", "IA" }
    , { "Kansas", "KS" }
    , { "Kentucky", "KY" }
    , { "Louisiana", "LA" }
    , { "Maine", "ME" }
    , { "Maryland", "MD" }
    , { "Massachusetts", "MA" }
    , { "Michigan", "MI" }
    , { "Minnesota", "MN" }
    , { "Mississippi", "MS" }
    , { "Missouri", "MO" }
    , { "Montana", "MT" }
    , { "Nebraska", "NE" }
    , { "Nevada", "NV" }
    , { "New Hampshire", "NH" }
    , { "New Jersey", "NJ" }
    , { "New Mexico", "NM" }
    , { "New York", "NY" }
    , { "North Carolina", "NC" }
    , { "North Dakota", "ND" }
    , { "Ohio", "OH" }
    , { "Oklahoma", "OK" }
    , { "Oregon", "OR" }
    , { "Pennsylvania", "PA" }
    , { "Rhode Island", "RI" }
    , { "South Carolina", "SC" }
    , { "South Dakota", "SD" }
    , { "Tennessee", "TN" }
    , { "Texas", "TX" }
    , { "Utah", "UT" }
    , { "Vermont", "VT" }
    , { "Virginia", "VA" }
    , { "Washington", "WA" }
    , { "West Virginia", "WV" }
    , { "Wisconsin", "WI" }
    , { "Wyoming", "WY" }    
    // more states
    };
}

Data that lives in small lists and infrequently changes, like the Grades, StatesDictionary class, exists in all types of applications.

Creating Model:

Now we need a model that collects the student’s name, the grade, and the state he is from as shown in Figure 1.  The StudentModels class definition captures these features in simple data structure. Let us now create a StudentModels class as shown below. Create a file StudentModels.cs under Models folder and add the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace TagStatus.Models
{
    public class StudentModels
    {
        [Display(Name = "Student Name here")]
        [Required()]
        public string StudentName { get; set; }
        public string Grade { get; set; }
        public string State { get; set; }
    }
}

 

Creating ViewModel:

Because of the data coming from different sources that needs to be displayed in the view, coding and maintenance will be easier if you use a ViewModel. ViewModels are a combination of one or more types that together shape data that goes to the view for consumption and rendering. A ViewModel is just a class. To get started, create a new folder named ViewModels and add a new code file StudentViewModel.cs to it. To create the StudentViewModel ViewModel, add the StudentModels, Grades  and StatesDictionary types as properties to form one StudentViewModel class. In the source code below, the StudentViewModel class contains the newly defined properties.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using TagStatus.Models;

namespace TagStatus.ViewModels
{
    public class StudentViewModel
    {
        public StudentModels Student { get; set; }
        public Grades Grades { get; set; }
        public StatesDictionary States { get; set; }

        public StudentViewModel(StudentModels student)
        {
            Student = student;
            Grades = new Grades();
            States = new StatesDictionary();
        }

        public StudentViewModel()
        {
            Student = new StudentModels(); ;
            Grades = new Grades();
            States = new StatesDictionary();
        }
    }
}

 

Creating Controller:

After creating the ViewModel, the next steps are to instantiate it in a controller and return it to the view. I am doing R & D on this new MVC4 and so you will see some messy code.

The following code  creates a Controller Passing the ViewModel to the View and the code of interest for us is public ActionResult StudentInfo() and this gets executed while the application is firing up.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using TagStatus.Models;
using TagStatus.ViewModels;

namespace TagStatus.Controllers
{
    public class StudentController : Controller
    {
        //public string StudentName { get; set; }
        //public int Grade { get; set; }

        //
        // GET: /Student/

        public ActionResult Index()
        {
            StudentModels stdm = new StudentModels();
            StudentViewModel stdvm = new StudentViewModel(stdm);
            return View(stdvm);
        }

        //[AllowAnonymous]
        //public ActionResult StudentInfo()
        //{
        //    return View();
        //}

        [AllowAnonymous]
        [HttpPost]
        public ActionResult StudentInfo(StudentModels model)
        {
            if (ModelState.IsValid)
            {
                model.StudentName = model.State;
            }

            return View(model);
        }

        [AllowAnonymous]
        public ActionResult StudentInfo()
        {
            StudentViewModel model = new StudentViewModel();

                //model.StudentName = model.State;

            return View(model);
        }

    }
}

Creating HTML5 Mobile Forms in ASP.NET MVC 4 Views:

In Visual Studio 2010, Right click on project and  Add New Item command to create StudentInfo.cshtml, the view that will host your HTML5 form. Inside the view, various ASP.NET MVC 4 Html Helpers present components of the StudentViewModel by rendering HTML elements that best fit the data types they map to in the ViewModel. For example, Grade renders as an HTML drop-down list so that the user can easily select an item rather than manually enter it.

The code for StudentInfo.cshtml is as follows.

@model TagStatus.ViewModels.StudentViewModel;
@{
    ViewBag.Title = "Student Info";
}

<h2> New Student </h2>
@using (Html.BeginForm("Results","Home"))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Enter Student Information!</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Student.StudentName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(Model => Model.Student.StudentName)
           @Html.ValidationMessageFor(Model => Model.Student.StudentName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Student.Grade)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(Model => Model.Student.Grade, Grades.GradeSelectList)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Student.State)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(Model => Model.Student.State, StatesDictionary.StateSelectList)
        </div>
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}

 

Download the source code from here and make the following change in the Global.asax file.

routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
               //defaults: new { controller = "Tag", action = "Lookup", id = UrlParameter.Optional }
                defaults: new { controller = "Student", action = "StudentInfo", id = UrlParameter.Optional }
                //defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );

If you don’t go after what you want, you’ll never have it. If you don’t ask, the answer is always no. If you don’t step forward, you’re always in the same place.Nora Roberts