Click here to Skip to main content
Click here to Skip to main content
Go to top

D & B Green Business Finder

, 31 Jul 2013
Rate this:
Please Sign up or sign in to vote.
Mobile, geo-centric app for Business Users, Consumers and Sales/Marketing Professionals

Please note

This article is an entry in our DnB Developer Challenge. Articles in this sub-section are not required to be full articles so care should be taken when voting.

 

Introduction  

Green technology is a great idea, but doesn't make much of an impact unless lots of people or businesses are using it.  It also tends to be very location-centric in nature, because many Green Technologies rely on characteristics of the local geography and climate.     

This project, also known as *Green Business Finder* would provide ability for users to search data sources that target green businesses, resources, materials and geographical information to support their green initiatives. It will provide a way for the user to employ filters and categories provided by the Dun and Bradstreet Developer Sandbox data set -  such as Demographics, Minority-owned, Women-owned, Veteran-owned, etc, as well as be support creation of user-defined filters and search criteria such Recycling and Surplus Material.  

Having this kind of data available could be of value to both sales personnel as well as businesses who want to find other like-minded businesses for networking, collaboration and B2B (Business-To-Business)  activity.  Ideally, it would be fully functional for both mobile and computer-based platforms. 

Background  

 

Primary data source for this app will be from the Dun & Bradstreet Developer Sandbox (free preview available on Windows Azure Marketplace). The full data set contains millions of records, but for this contest, they have made 10,000 records available for us to build our apps.

For this prototype, the application will designed from the ground up to target mobile platforms, although it will also be available for desktop web clients.   Technologies/tools will include Microsoft Visual Studio Preview 2013, LightSwitch HTML5 Client, Jquery, JQuery Mobile, Promise, oData and PhoneGap (to provide access to native mobile functionality such as GPS, Camera, Contacts, etc).  

Background 

Primary data source for this app will be from Dun & Bradstreet's Developer Sandbox (free preview available on Windows Azure Marketplace ). The full data set contains millions of records, but for this contest, they have provided 10000 records for use by developers.

This article documents a prototype design. From the ground up, this app will be designed for use on mobile devices. Technology centers around the Microsoft stack, although design will be modular enough to allow use of other platforms.  

For success in this project, a developer should be well versed in (or willing to learn) LINQ, JQuery, Javascript, OData protocol, Excel, PhoneGap, Azure and LightSwitch ( a new project type in Visual Studio 2011 )   

ODATA protocol supports Atom feeds and JSON, but the data sources I worked with were in Atom format.

 

Requirements and Project Information  

Most of the specs and project information are documented using a Mind Map.  

I’ve been experimenting with mind maps on my last few projects (both personal and work-related) with rather good results. In a nutshell, mind maps provide a way to visualize concepts, designs and information and keep everything in one place – kind of like bookmarks on steroids.    

On this project, I had to perform several hours of online research to find answers, downloads, and product information. All of my notes are contained in this mind map as embedded resources and don't show up in the screenshots.  

To create this map I used the free version of XMind, but there are lots out there. I like XMind because it is open source and has a pretty active end user community. They offer a free version and a couple of upgraded versions for sale. Thus far I have been very happy with it.  What you see here is a screenshot, but at the close of the contest I will add the final version of the source map as a download.  Additionally this mind map is shared with the XMind user community and can be downloaded from here >> http://www.xmind.net/m/s9tE/  (my username is infomaven77 ).  

Most features of this prototype are aimed at Business Owners and Sales/Marketing users, but the information exposed would be of value to Consumers who wish to patronize Green Certified Businesses. Future enhancements will also be made to target the Consumer market, Crowd Sourcing and integrate with location-based social apps.  

Technology Stack   

Technology Stack 

 

 

 Functional Requirements 

Functional Requirements 

 

Nonfunctional Requirements  

 

 

 

Code, Features & Challenges  

And now for the part you've all been waiting for...after all this is a site for "those who code".  

Complete source code for this project will be available for download from github.com at the following link >>

https://github.com/infomaven/DNBGreenMash.git   

By downloading the code, you will obtain the following functionality:

LightSwitch HTML5 Client configured to use  three different data sources - D&B OData , EDR Hazardous Waste OData Service ( both from Windows Azure Marketplace ) and Northwind OData Service. There is also an internal database in place to store data used locally ( Application Data). This is a database built automatically by Visual Studio

  1. Screen showing Green Certified Businesses: Sorted data  
    • Screens showing Contact Info and Green Certified Info for current selection 
  2. Search screen for Green Businesses in US: fully functional 
  3. Radial Search screen: Unfiltered data. Search is not wired up yet. 
  4. Screen that displays  Minority Owned Business & Veteran Owned Business: Sorted data
  5. Screen using the Bing Custom Map control that displays Northwind Customer data: Fully functional
Detail screen for items selected from the map 
6. Screen using the Bing Custom Map control displays D & B Green Business data: Partially functional       
  
 

When unzipped to your local directory, this is what the project will look like in Visual Studio >>

 

The relationships between client screens is hierarchical. In this project, the screen named *BrowseGreenBiz* is programmed to act as the home page. It contains navigational commands that run all the other screens in the application.   


Below is the underlying html client  page that hosts all screens created for the app. However,  LightSwitch Projects also support adding of extra server-side pages and objects (in the .SERVER folder).  

 <span style="font-size: 9pt;"> <!DOCTYPE HTML></span> 
<span style="font-size: 9pt;"><html></span>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>DNB_GreenBusinessFinder.HTMLClient</title>
    <script type="text/javascript">
        // Work around viewport sizing issue in IE 10 on Windows Phone 8
        if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
            document.writeln("<style>@-ms-viewport { width: auto!important; }</style>");
        }
    </script>
    <!-- Change light-theme-2.0.0.css and msls-light-2.0.0.css to dark-theme-2.0.0.css and msls-dark-2.0.0.css respectively to use the 
         dark theme.  Alternatively, you may replace light-theme-2.0.0.css with a custom jQuery Mobile theme. -->
    <link rel="stylesheet" type="text/css" href="Content/light-theme-2.0.0.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-light-2.0.0.css" />
    <link rel="stylesheet" type="text/css" href="Content/jquery.mobile.structure-1.3.1.min.css" />
    <link rel="stylesheet" type="text/css" href="Content/msls-2.0.0.min.css" />
    <!-- Default font, header, and icon styles can be overriden in user-customization.css -->
    <link rel="stylesheet" type="text/css" href="Content/user-customization.css"/>
</head>
<body>
    <div id="msls-id-app-loading" class="ui-body-a msls-layout-ignore">
        <div class="msls-app-loading-img"></div>
        <span class="ui-icon ui-icon-loading"></span>
        <div class="ui-bottom-load">
            <div>DNB_GreenBusinessFinder.HTMLClient</div>
        </div>
    </div>
    <script type="text/javascript" charset="utf8"
            src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
    <script type="text/javascript" src="Scripts/winjs-1.0.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="Scripts/datajs-1.1.0.min.js"></script>
    <script type="text/javascript" src="Scripts/Generated/resources.js"></script>
    <script type="text/javascript" src="Scripts/msls-2.0.0.min.js"></script>
    <script type="text/javascript" src="Scripts/Generated/generatedAssets.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            msls._run()
            .then(null, function failure(error) {
                alert(error);
            });
        });
    </script>
    <script type="text/javascript" charset="utf-8" src="Scripts/lightswitch.bing-maps.js"></script></body>
</html> 


LightSwitch “Gotchas”: Below are a few things to be aware of when working with LightSwitch HTML5 Client. Although  LightSwitch is Project in Visual Studio, it has a few characteristics that make it behave differently from a typical Project.   I have not worked with the Silverlight client, so I cannot comment on whether these things would apply for that situation. 

1) The project “autosaves” all changes made during your session. If you make a mistake while working with the project, you have to back out each change using CNTRL-Z. If you added an object (Screen, Data Source, etc) you must physically Delete it from the project.

    • Note:  The system is supposed to clean up all code, but I’ve found it sometimes misses the webconfig file where Data Sources are concerned…especially if they were added using a wizard. After adding and removing the DnB OData feed 2-3 times, I found webconfig.xml contained 3 different entries that all referenced the same root URL. Not good! Be sure to check here if you remove any data sources. 
<span style="font-size: 14px;"><connectionStrings>
</span><span style="font-size: 14px;">    <add name="_IntrinsicData" connectionString="Data Source=|SqlExpressInstanceName|;AttachDbFilename=|ApplicationDatabasePath|;Integrated Security=True;Connect Timeout=30;MultipleActiveResultSets=True" />
</span><span style="font-size: 14px;">    <add name="0ef66677-8cb8-4b3a-8bf4-0bd4f76da97e" connectionString="Service Url=https://api.datamarket.azure.com/DNB/DeveloperSandbox/v1;Is Windows Authentication=False;User Name=USER_NAME;Password=PASSWORD;Allow Invalid Certificate=False" />
</span><span style="font-size: 14px;">    <add name="dc8b80fd-13f9-4aed-a101-8a2bc0dc9238" connectionString="Service Url=https://api.datamarket.azure.com/EDR/EnvironmentalHazardRank/v1;Is Windows Authentication=False;User Name=USER_NAME;Password=PASSWORD;Allow Invalid Certificate=False" />
</span><span style="font-size: 14px;">    <add name="8c8a7d53-8378-4979-ba1a-a409eea30067" connectionString="Service Url=http://services.odata.org/Northwind/Northwind.svc;Is Windows Authentication=False;Allow Invalid Certificate=False" />
</span><span style="font-size: 14px;">  </connectionStrings></span><span style="font-size: 14px;"> </span>
2) When you update packages using the Visual Studio NuGet add-in wizard, it sometimes misses updating version numbers that were already in the solution. After doing such an update, I found a JS file in my Scripts folder that that still contained old version numbers. You may need to update these  by hand.  Also check the default.htm file to make sure the version #s are correct. One telltale sign that something is out of sync is if you get a run-time  error message like below >> 

             
              

3) Unlike its Silverlight cousin, the HTML5 Client for LightSwitch does not ship with an out-of-the-box search screen. However if the data source’s metadata rules allow a field to be “Queryable”, you can modify a client-side Browsing screen to use a data-bound text box as the search parameter and perform the search on the server.   

4) I found out the hard way that the data Entities created by LightSwitch are not quite the same as regular relational database tables.  I have yet to figure out how to perform the equivalent of a “sql inner join “or “outer join “on this data. This limited some of the functionality I was able to implement in this sample project, but the this project would provide a good jumping off point for further study in this area.  

             

5) The LightSwitch "Designer" is not GUI-based. This kind of flies in the face of the concept of "Visual" Studio, but once you get used to the conecpt, it works well. All controls on the screens are represented in a hierarchy that helps to illustrate how they would appear in the user interface. 

Other challenges 

 
 Mapping of DnB Locations:  This project uses the Bing Maps API with a JavaScript wrapper provided by the LightSwitch team and a custom control written in JQuery. The wrapper worked well for basic display of a list of locations in map format, but I had problems mapping individual locations.   In the prototype, I implemented two screens that use the mapping functionality. One connects to the Northwind OData service and the other connects to the DNB OData set.  For the D & B data, I was able to get the map to render but not the location points. 

             A sample wrapper function for the Custom Control >> 

            (function ($) {
                var _credentialsKey = "Ao75sYhQSfLgssT0QkO9n22xt0lgxzntrZ1xpCwLOC-kGhI584OYED3viFXLIWgC";
                // load the directions module only once per session
                Microsoft.Maps.loadModule('Microsoft.Maps.Directions');
                $.widget("msls.lightswitchBingMapsControl", {
                    options: {
                        mapType: Microsoft.Maps.MapTypeId.road,
                        zoom: 3,
                        showDashboard: false
                    },
                    _create: function () {
                    },
                    _init: function () {
                        this.createMap();
                    },
                    destroy: function () {
                        this._destroyBingMapsControl();
                    },
                    createMap: function () {
                        this.htmlMapElement = this.element[0];
                        // create empty map
                        this.map = new Microsoft.Maps.Map(this.htmlMapElement,
                                            {
                                                credentials: _credentialsKey,
                                                mapTypeId: this.options.mapType,
                                                zoom: this.options.zoom,
                                                showDashboard: this.options.showDashboard
                                            });
                    },

            Once started, the application uses JavaScript callbacks to load the locations asynchronously into the UI >> 

            myapp.Browse_nwCustomers.Customer_render = function (element, contentItem) {
                mapDiv = $('<div />').appendTo($(element));
                $(mapDiv).lightswitchBingMapsControl();
                var visualCollection = contentItem.value;
                if (visualCollection.isLoaded) {
                    showItems(current, step, contentItem.screen);
                } else {
                    visualCollection.addChangeListener("isLoaded", function () {
                        showItems(current, step, contentItem.screen);
                    });
                    visualCollection.load();
                }
            };
            function showItems(start, end, screen) {
                $(mapDiv).lightswitchBingMapsControl("resetMap");
                $.each(screen.Customers.data, function (i, customer) {
                    if (i >= start && i <= end) {
                        $(mapDiv).lightswitchBingMapsControl("addPinAsync", customer.Address,
                            customer.City, customer.Country, i + 1, function () {
                                screen.Customers.selectedItem = customer;
                                screen.showPopup("Customers_selectedItem");
                            });
                    }
                });
            };<span style="font-size: 14px;"> </span> 

Detection of user's location:  Geo-data is critical for this application to work well. Since HTML5 doesn't have ability to tap into a mobile device's GPS functions, tools such as Cordova/  PhoneGap and Red Gate's Nomad are recommended to wrap this functionality. Windows 8 and Windows Phone 8  users will have a much easier time with implementing this functionality because GPS support seems to be included in the OS.  Michael Washington has an excellent introductory article covering this topic on his website 
http://lightswitchhelpwebsite.com

             

Radial Search: The actual problem of searching the data for Green Businesses within a given radius was actually easier than I anticipated.  It can be done using a classic CS algorithm known as "Range Search" with modifications to adapt it for use with a circular boundary region.  I found a well documented solution written in Java at http://janmatuschek.de/LatitudeLongitudeBoundingCoordinates#GeoLocationDemo. This article is especially good because the author explains both the right way and the wrong way to perform this calculation.  After reading through this, I found a C# port of this solution by Anthony Zigenbine on github  that I will adapt for use in this application.  


            There was not time to implement this feature on this Project, but I think this could be incorporated fairly easily as a cloud service.  

              public GeoLocation[] BoundingCoordinates(double distance)
                    {
                        if (distance < 0d)
                            throw new Exception("Distance cannot be less than 0");
                        // angular distance in radians on a great circle
                        double radDist = distance / earthRadius;
                        double minLat = radLat - radDist;
                        double maxLat = radLat + radDist;
                        double minLon, maxLon;
                        if (minLat > MIN_LAT && maxLat < MAX_LAT)
                        {
                            double deltaLon = Math.Asin(Math.Sin(radDist) /
                                Math.Cos(radLat));
                            minLon = radLon - deltaLon;
                            if (minLon < MIN_LON) minLon += 2d * Math.PI;
                            maxLon = radLon + deltaLon;
                            if (maxLon > MAX_LON) maxLon -= 2d * Math.PI;
                        }
                        else
                        {
                            // a pole is within the distance
                            minLat = Math.Max(minLat, MIN_LAT);
                            maxLat = Math.Min(maxLat, MAX_LAT);
                            minLon = MIN_LON;
                            maxLon = MAX_LON;
                        }
                        return new GeoLocation[]
                        {
                            FromRadians(minLat, minLon),
                            FromRadians(maxLat, maxLon)
                        };
                    } 
 Social Integration:  
I was very interested in adding a social API to this application, but never found quite the right one. Some potential candidates I considered were http://foursquare.com, http://www.openstreetmap.org/, or perhaps one of the APIS offered by ESRI on github - http://esri.github.io/.   I believe this will be a very important element to include in application targeted for Business, Government and Consumers.  The city of Columbus Ohio USA has taken a big step in this direction by creating a "Green Map" of their metro area and setting up a website where people can get involved in promoting Green Technology and practices.  URL >> http://www.columbusgreenspot.org/join/

Unfamiliar technology presented a constant challenge in this project.  In addition my development skills being a bit out of date in general, all the key tools selected for this project - OData, Visual Studio Ultimate Preview, WCF Data Services and LightSwitch have undergone breaking changes over the last 3-4 months, and things are still very much in flux. While it was exciting to be on the "bleeding edge" for a change, it was hard to get everything working properly, and when I ran into difficulties, I was never sure if they were the result of user error or a real issue in the software. A brief synopsis of some issues I encountered while using these tools is included below. I would welcome any comments from readers who have had similar experiences.  

General “Gotchas”:  

            1) DnB Data Set – All of us encountered problems with queries that used a Substring query. When used in the Browser, such a query returns http error 400 but the same syntax works great for the Northwind OData Service (freely available through odata.org ). For example, the following query >>  

            http://services.odata.org/Northwind/Northwind.svc/Customers?$filter=substring(CompanyName, 1) eq 'lfreds Futterkiste'  

            worked correctly, while  this one >> 

            https://api.datamarket.azure.com/DNB/DeveloperSandbox/v1/LocationLatLong?$filter=substring(Company, 1) eq 'solu'   

             did not.  In LightSwitch, this problem also came up when I tried to implement a Search function against the DnB Data sources. It seems the metadata definitions for this data don’t support Substring searches. I’ve made a TODO task to find an alternate way to accomplish this task using data manipulations.  

            2) In Visual Studio 2013 Preview, the context menu option to "Add Service Reference" was failing.

             

            In an attempt to work around this, I used the command line tool and  ran the following tool from the command line with admin privileges to generate a proxy class, but never did get it to work as a simple console app.  

            c:\windows\....\framework...\4.0xxxx\DataSvcutil.exe /uri:https://api.datamarket.azure.com/DNB/DeveloperSandbox/v1/ /out:<name>.cs 

 GitHub: This project was my first time using GitHub. I’ve used Visual Source Safe, SVN and Tortoise source control before, but found github a little confusing. I always felt like I was missing something really obvious.  However it seems like a powerful tool, and I would like to dig into this more in the near future. If anyone has suggestions for a good beginning tutorial on how to use github on Windows, I  am all ears.  


Time management has been a big challenge. One of my ways to handle the tasks was to try using Kanban principles to manage my work. In the Mind map below in the area marked "Tasks", you will see the color codes applied to different tasks in the project. Basically my understanding of Kanban is that you categorize each task as one of the following { Ready, Working, Blocked, Done } and you try to limit the number of things in the Working group. There is a lot more, but this is my takeaway for now.  
If any of you have insights or success stories with using Kanban, I would definitely like to hear them.  

            Task Management with Kanban  

             

             

FOOTNOTES 

              

Below is a list of bookmarks of online resources that helped me get started with LightSwitch and also helped inspire me to build this application.
CLOSING THOUGHTS   

As I was working on this project, I realized that the concept of this application has potential to take on a life of its own and become much bigger than a contest entry. Somehow I have a feeling there will be other iterations to come….this is really more of a starting point than a complete application.
  It is my hope that Green Business Finder will inspire you to think of ways new technologies can be leveraged to help improve quality of life in our world and help people connect with each other. I also hope you find this article useful.  Comments and feedback are welcome -  I am always striving to improve.    
Please bookmark and check back at the end of the July 2013 to see the final version and code samples. 

  
History 

            Version 0.1 - 7/10/2013 – Created initial draft to explain the concept 

            Version 1.0 – 7/25/2013 – Added Project Info

            Version 1.1 – 7/28/2013 – Added Resources & Challenges and initial code samples

            Version 1.2 – 7/31/2013 – Added final code samples and image set 



License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

nwhitfield
Tester / Quality Assurance
United States United States
Currently helping to deliver Clinical software to health care facilities across the state of Utah.

Comments and Discussions

 
NewsAlternate Source Code Downlaod Location Pinmembernwhitfield1-Aug-13 15:39 
Questiongood idea PinmemberCIDev10-Jul-13 10:47 
QuestionThanks for your submission! PinstaffKevin Priddle10-Jul-13 8:55 
AnswerRe: Thanks for your submission! PinmemberNadine Whitfield10-Jul-13 13:46 
GeneralRe: Thanks for your submission! PinmemberGingerT10-Jul-13 18:04 
GeneralRe: Thanks for your submission! Pinmembernwhitfield1-Aug-13 15:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 1 Aug 2013
Article Copyright 2013 by nwhitfield
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid