Follow

Getting started using Webforms

Introduction

In the following we will guide you through creating a simple web application with use of Sygic FleetWork cloud engine.
In this example we will develop a simple single page application, where you can select a driver and send him/her a delivery address for a task to be accomplished.
You can execute this example with a simple self-registration through our FleetWork portal gaining a trial period, if you don't have the Sygic FleetWork account yet.

Prepare your working environment

For being able to compile your application you need to have Visual Studio on your computer.

To have an access to the FleetWork API from your web application and quickly see the results of the operations you need to have an account within Sygic FleetWork solution.
You may create it through our FleetWork portal for free. Through the web portal you can Retrieve API key, which is the sufficient condition to use FleetWork API.

If you want to see how the task gets into driver's Android phone you need to install Sygic FleetWork application from Google play.

And if you want to translate the task into the navigation action you need to install Sygic Truck Navigation application from Google play.

Create web app project

Let's start Visual Studio and create the new project MyDispatch through selecting New Project -> Visual C# -> Web -> ASP.NET Empty Web Application.

Next, add a aspx page into the solution through Add -> New Item -> Web Form

Define graphical look

Let us define the visual of the web page comprised of the following UI elements:

  • selection dialog - to select the driver
  • selection dialog - to select the destination among some predefined
  • button - to send the task

The code could look as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MyDispatch.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>My Dispatch</title>
</head>
<body>
    <h2>My Dispatch webapp</h2>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="ddlDrivers" runat="server"></asp:DropDownList>
        <asp:DropDownList ID="ddlDestinations" runat="server"></asp:DropDownList>
        <asp:Button ID="btnSend" runat="server" OnClick="SendJob_Click" Text="Send job" />
    </div>
    </form>
</body>
</html>

Then the web application should have the following appearance.

Code the application

The application will be written solely in Home.aspx.cs Webform class.
As such we need to fill the functions associated with the page loading and the button click to link with the aspx page.

1. Set up the framework

This page load function serves the purpose to define the two dropdown lists through binding data sets to them. Let's define two constant destinations to be bound with the dropdwon destination list (ddlDestinations), and let's read all drivers associated with an account (function GetDrivers) and bind then to the dropdown drivers list (ddlDrivers).
Finally let's define the operation of the button click (function SendJob_Click), which reads a selected driver and a destination and calls the SendJob function.

namespace MyDispatch
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                return;
            }

            ddlDrivers.DataTextField = "Text";
            ddlDrivers.DataValueField = "Value";
            ddlDrivers.DataSource = GetDrivers();
            ddlDrivers.DataBind();

            List destinations = new List();
            destinations.Add(new ListItem("Paris Montparnasse", "48.84239,2.32099,2015-07-10T08:30:00,2015-07-10T09:30:00"));
            destinations.Add(new ListItem("Paris Bastille", "48.85297,2.36899,2015-07-10T08:30:00,2015-07-10T09:30:00"));
            ddlDestinations.DataTextField = "Text";
            ddlDestinations.DataValueField = "Value";
            ddlDestinations.DataSource = destinations;
            ddlDestinations.DataBind();
        }

        protected void SendJob_Click(object sender, EventArgs e)
        {
            string driver = ddlDrivers.SelectedItem.Value;
            string destination = ddlDestinations.SelectedItem.Value;
            string jobname = ddlDestinations.SelectedItem.Text;
            SendJob(jobname, driver, destination);
        }

        protected List<ListItem> GetDrivers()
        {
          ...
        }

        protected void SendJob(string jobname, string driverid, string routedata)
        {
          ...
        }
    }
}

2. Install RestSharp library

In order to facilitate the API call with our Rest API it is convenient to use the RestSharp library. It can be installed through Visual Studio with its Library Package Manager, i.e. go through memu as follows:
Tools -> Library Package Manager -> Manage Nuget Packages for Solution, search for RestSharp and install it.

After installion being done you can gain the access to the library through the use clause:

       using RestSharp;

Subsequenty you can use the following pattern, which is to set up the required MODEL entity object and pass it through AddBody method.
In addition, the RestRequest need to set with the proper service and method.

       var cli = new RestClient("https://api.jobdispatch.sygic.com/api/v1");
       var request = new RestRequest("xxx", Method.yyy);
       request.AddHeader("X-api_key", apikey);
       request.RequestFormat = DataFormat.Json;
       request.AddBody(MODEL);
       var response = (RestResponse)cli.Execute(request);

3. Retrieve drivers' list from FleetWork

To retrieve drivers the Fleetwork API GET method of the users service needs to be used.
The result can be deserialized into a partial User structure (not all fields needs to be parsed out). In our example we will retrieve only id, email and name fields.

        public class User
        {
            public string Id { get; set; }
            public string Email { get; set; }
            public string Name { get; set; }
            public bool ActiveLicense { get; set; }
        }

        protected List<ListItem> GetDrivers()
        {
            List<ListItem> drivers = new List();

            var cli = new RestClient("https://api.jobdispatch.sygic.com/api/v1");
            var request = new RestRequest("users", Method.GET);
            request.AddQueryParameter("excludeDispatchers", "true");
            request.AddHeader("X-api_key", apikey);
            request.RequestFormat = DataFormat.Json;
            try
            {
                var response = (RestResponse)cli.Execute(request);
                var jsonConverter = new RestSharp.Deserializers.JsonDeserializer();
                var users = jsonConverter.Deserialize<List<User>>(response);
                for (int i = 0; i < users.Count; i++)
                {
                    drivers.Add(new ListItem(users[i].Name, users[i].Id));
                }
            }
            catch (Exception e)
            {}

            return drivers;
        }

4. Send Job to FleetWork

For sending a job we need to use the POST method of the jobs service of FleetWork API, where we basically need to fill the driver id and the GPS position of the route/destination.
All the remaining parameters are not mandatory.
We again will use the RestClient call, where it is sufficient to work with the partial Job and Task model entities as shown bellow.
The API call support richer model of Job and Task entities, which can be seen in the Reference manual

        public class Job
        {
            public string CustomData { get; set; }
            public string Name { get; set; }
            public string AssignedUserId { get; set; }
            public string StartDate { get; set; }
            public string EndDate { get; set; }
            public List<Task> Tasks { get; set; }
            public string Details { get; set; }
        }

        public class Task
        {
            public string ContactName { get; set; }
            public string ContactPhone { get; set; }
            public string Name { get; set; }
            public string Address { get; set; }
            public string Longitude { get; set; }
            public string Latitude { get; set; }
            public string StartDate { get; set; }
            public string EndDate { get; set; }
            public string CustomData { get; set; }
        }

        void SendJob(string jobname, string driverid, string routedata)
        {
            string[] data = routedata.Split(',');
            Job job = new Job();
            job.Name = jobname;
            job.AssignedUserId = driverid;
            job.StartDate = data[2];
            job.EndDate = data[3];
            job.Details = "some details ...";
            job.Tasks = new List<Task>();

            Task task = new Task();
            task.Name = "waypoint-1";
            task.Latitude = data[0];
            task.Longitude = data[1];
            task.StartDate = data[2];
            task.EndDate = data[3];
            task.ContactName = "Jean";
            task.ContactPhone = "01 45 62 04 25";

            job.Tasks.Add(task);

            var cli = new RestClient("https://api.jobdispatch.sygic.com/api/v1");
            var request = new RestRequest("jobs", Method.POST);
            request.AddHeader("X-api_key", apikey);
            request.RequestFormat = DataFormat.Json;
            request.AddBody(job);
            try
            {
                var response = (RestResponse)cli.Execute(request);
            }
            catch (Exception e)
            {}

        }

Build, deploy and run the application

Building and deploying the application is simple as clicking the Start button in Visual Studio. When running the application you can select a driver and a route. By clicking on the Send Job button the job is sent to the FleetWork engine for processing.

You can verify the success of the job send through the Sygic FleetWork portal.
When you login and get to the Jobs page you should observe the following.

Clicking on the job you can see the details.

Full sample reference

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using RestSharp;

namespace Demo2
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        const string apikey = "yourapikeyyourapikey";

        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                return;
            }

            ddlDrivers.DataTextField = "Text";
            ddlDrivers.DataValueField = "Value";
            ddlDrivers.DataSource = GetDrivers();
            ddlDrivers.DataBind();

            List<ListItem> destinations = new List<ListItem>();
            destinations.Add(new ListItem("Paris Montparnasse", "48.84239,2.32099,2015-07-10T08:30:00,2015-07-10T09:30:00"));
            destinations.Add(new ListItem("Paris Bastille", "48.85297,2.36899,2015-07-10T08:30:00,2015-07-10T09:30:00"));
            ddlDestinations.DataTextField = "Text";
            ddlDestinations.DataValueField = "Value";
            ddlDestinations.DataSource = destinations;
            ddlDestinations.DataBind();
        }


        protected void SendJob_Click(object sender, EventArgs e)
        {
            string driver = ddlDrivers.SelectedItem.Value;
            string destination = ddlDestinations.SelectedItem.Value;
            string jobname = ddlDestinations.SelectedItem.Text;
            SendJob(jobname, driver, destination);
        }

        public class User
        {
            public string Id { get; set; }
            public string Email { get; set; }
            public string Name { get; set; }
            public bool ActiveLicense { get; set; }
        }

        protected List<ListItem> GetDrivers()
        {
            List<ListItem> drivers = new List();

            var cli = new RestClient("https://api.jobdispatch.sygic.com/api/v1");
            var request = new RestRequest("users", Method.GET);
            request.AddQueryParameter("excludeDispatchers", "true");
            request.AddHeader("X-api_key", apikey);
            request.RequestFormat = DataFormat.Json;
            try
            {
                var response = (RestResponse)cli.Execute(request);
                var jsonConverter = new RestSharp.Deserializers.JsonDeserializer();
                var users = jsonConverter.Deserialize<List<User>>(response);
                for (int i = 0; i < users.Count; i++)
                {
                    drivers.Add(new ListItem(users[i].Name, users[i].Id));
                }
            }
            catch (Exception e)
            {}

            return drivers;
        }

        public class Job
        {
            public string CustomData { get; set; }
            public string Name { get; set; }
            public string AssignedUserId { get; set; }
            public string StartDate { get; set; }
            public string EndDate { get; set; }
            public List<Task> Tasks { get; set; }
            public string Details { get; set; }
        }

        public class Task
        {
            public string ContactName { get; set; }
            public string ContactPhone { get; set; }
            public string Name { get; set; }
            public string Address { get; set; }
            public string Longitude { get; set; }
            public string Latitude { get; set; }
            public string StartDate { get; set; }
            public string EndDate { get; set; }
            public string CustomData { get; set; }
        }

        protected void SendJob(string jobname, string driverid, string routedata)
        {
            string[] data = routedata.Split(',');
            Job job = new Job();
            job.Name = jobname;
            job.AssignedUserId = driverid;
            job.StartDate = data[2];
            job.EndDate = data[3];
            job.Details = "some details ...";
            job.Tasks = new List<Task>();

            Task task = new Task();
            task.Name = "waypoint-1";
            task.Latitude = data[0];
            task.Longitude = data[1];
            task.StartDate = data[2];
            task.EndDate = data[3];
            task.ContactName = "Jean";
            task.ContactPhone = "01 45 62 04 25";

            job.Tasks.Add(task);

            var cli = new RestClient("https://api.jobdispatch.sygic.com/api/v1");
            var request = new RestRequest("jobs", Method.POST);
            request.AddHeader("X-api_key", apikey);
            request.RequestFormat = DataFormat.Json;
            request.AddBody(job);
            try
            {
                var response = (RestResponse)cli.Execute(request);
            }
            catch (Exception e)
            {}
        }

    }
}
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments