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 ) <o:p>
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.
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: <o:p>
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<o:p>
- Screen showing Green
Certified Businesses: Sorted data
- Screens showing Contact
Info and Green Certified Info for current selection
- Search screen for Green
Businesses in US: fully functional<o:p>
- Radial Search screen:
Unfiltered data. Search is not wired up yet.<o:p>
- Screen that displays Minority Owned Business & Veteran
Owned Business: Sorted data<o:p>
- 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">
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.
(function ($) {
var _credentialsKey = "Ao75sYhQSfLgssT0QkO9n22xt0lgxzntrZ1xpCwLOC-kGhI584OYED3viFXLIWgC";
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];
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.comRadial 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.
public GeoLocation[] BoundingCoordinates(double distance)
{
if (distance < 0d)
throw new Exception("Distance cannot be less than 0");
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
{
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:
worked correctly, while this one >>
https:
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:
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.
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.
<span style="font-size: 14px;"></span>
<span style="font-size: 14px;"></span>
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.
<o:p style="font-size: 14px;"> 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.
<o:p style="font-size: 14px;">
History Version 0.1 - 7/10/2013 –
Created initial draft to explain the concept <o:p>
Version 1.0 – 7/25/2013 – Added
Project Info<o:p>
Version 1.1 – 7/28/2013 – Added
Resources & Challenges and initial code samples<o:p>
Version 1.2 – 7/31/2013 – Added
final code samples and image set
