Saturday, 28 May 2011

Combining Silverlight and Google Contact & Client API on Windows Azure


 The scope of this article is to access Google APIs through Silverlight application on Windows Azure.

 Integration
 The documentation consists of the following parts:
     1.  Access Google APIs in Silverlight Application
-       Write a web service to access Google APIs.
-       Consume service in Silverlight application.
     2.      Deploy application on Windows Azure
     3.      Troubleshooting

How I want it to work?
Silverlight does not work directly with the Google API. For this, we need to add a web service that will communicate with the Google API. Access this service from Silverlight.

The inner workings
Create Silverlight Web project. We have to create IList<> of objects that Silverlight can recognize, to bind data dynamically to Silverlight Controls. So now add classes to represent Calendar Events and Contact entries.  For this, right click the Silverlight Web Project and click Add New Item.  Add a class representing the Calendar Event and Contact with the following properties:
Figure 1: Write classes for event and Contact entity that Silverlight can recognize.

Now create Web service to access Google APIs:
1.    For this, right click the Silverlight Web Project and select Add New Item.  Next, select Web Service.  This will generate an asmx file.  Each operation in this method needs to be tagged with a [WebMethod] attribute.  Note that this would also have worked with a WCF service.  Add references to the Google Contact and Calendar APIs (Please refer to the previous article).  Now write methods to retrieve all calendar events &contacts and,to add calendar events.
Figure 2: Write function in Web service to access Google APIs
2.    Build the Web Service Project.
3.    Next, right-click the Silverlight project and click on Add ServiceReference.  Click on the Discover button.  Here you should be able to see the list of methods that were exposed in the service.  Enter a suitable name for the proxy and click the OK button.


Figure 3: Add service reference

4.    Next, in MainPage.xaml.cs, create an instance of the Service Reference as such:
CalendarProxy.GoogleAPIServiceSoapClient proxy = newGoogleAPIServiceSoapClient();
5.    In the click events of the three buttons, call the web methods through the proxy instance.  In the completed event handler of the methods, bind the lists to the datagrids.

Figure 4: Consume web service to get all contacts details

Figure 5: Consume web service to get event

Figure 6: Consume web service to add events

6. Build the solution, hit F5 and check whether the Silverlight application is able to access the Google API

Migrate the Silverlight Application to Azure




Figure 7: Add existing web project

4.    Right click on the solution and again select Add Existing Project.  Browse to the folder where the Silverlight application that was created in step 4.1. 

5.    Now select the Silverlight project and select the csproj for that project.  Click on OK.


Figure 8: Select Silverlight project

6.    Your solution structure should look like the one below:

Figure 9: Azure project Solution structure

7.    Under the Azure Project, right click Roles node and select Add, select Web Role Project in solution.  Select the Web project that was added in the previous step and click OK.

8.    Build the project and hit F5.  The compute emulator should start running and you should be able to see the Silverlight control running on your test page on the devfabric.

Figure 10: Application running in devfabric

Troubleshooting

 

Exception 1: Silverlight on Azure devFabric gives cross domain exception
Exception Message:
An error occurred while trying to make a request to URI 'http://localhost:5311/Service.asmx'. This could be due to attempting to access a service in a cross-domain way without a proper cross-domain policy in place, or a policy that is unsuitable for SOAP services. You may need to contact the owner of the service to publish a cross-domain policy file and to ensure it allows SOAP-related HTTP headers to be sent. This error may also be caused by using internal types in the web service proxy without using the InternalsVisibleToAttribute attribute. Please see the inner exception for more details.

Resolution:
Open ServiceReferences.ClientConfig. You'll notice the endpoint address is something like http://localhost:12345/... Please change it to http://127.0.0.1:81/... Note if port 81 is already occupied, when launching the web role in Development Fabric, port 82 will be used. So please change the port number appropriately.

Posted this on MSDN forum, the reference for which is:
http://social.msdn.microsoft.com/Forums/en-US/windowsazuredevelopment/thread/9fd8432e-ab14-44f6-823a-7e609c3ec655


Exception 2: Silverlight hosted on Azure portal cannot access Web Service

Exception Message:
Service not found.

Resolution:
This exception occurs because the service is hosted on the azure servers, however, the ServiceReference.clientconfig still points to the url of the compute emulator.  The workaround for this is to programmatically configure your service client to read the URL from wherever the application is deployed.  Note that you cannot use relative endpoints in the ServiceReference.clientconfig.  Then, instead of instantiating the proxy class with the default constructor, use the parameterized constructor which takes the endpoint address and the binding type.
 
Following is the code sample:
Replace CalendarProxy.GoogleAPIServiceSoapClient proxy=new GoogleAPIServiceSoapClient();

With

CalendarProxy.GoogleAPIServiceSoapClient proxy=GetServiceClient();
Where GetServiceClient() is defined as


The reference for this is:













No comments:

Post a Comment