DZone

My name is Bruno Terkaly and I am a Developer Evangelist in Northern California. Over the past few months I have been presenting a wide variety of demos and slides highlighting the wealth of new features in Visual Studio 2008. Bruno is a DZone MVB and is not an employee of DZone and has posted 31 posts at DZone. You can read more from them at their website. View Full User Profile

How to: Take Photos and Auto Upload them to the Cloud pt. 4-6

09.01.2012
| 1787 views |
  • submit to reddit

We Recommend These Resources

NOSQL for the Enterprise

How To Take Photographs From Windows 8 Applications And Automatically Upload Them To The Cloud -- Part 1http://blogs.msdn.com/b/brunoterkaly/archive/2012/08/25/how-to-take-photographs-from-windows-8-applications-and-automatically-upload-them-to-the-cloud-part-1-of-6.aspx
How To Take Photographs From Windows 8 Applications And Automatically Upload Them To The Cloud -- Part 2http://blogs.msdn.com/b/brunoterkaly/archive/2012/08/26/tet3.aspx
How To Take Photographs From Windows 8 Applications And Automatically Upload Them To The Cloud -- Part 3http://blogs.msdn.com/b/brunoterkaly/archive/2012/08/27/test23.aspx
How To Take Photographs From Windows 8 Applications And Automatically Upload Them To The Cloud -- Part 4http://blogs.msdn.com/b/brunoterkaly/archive/2012/08/28/how-to-take-photographs-from-windows-8-applications-and-automatically-upload-them-to-the-cloud-part-4-of-6.aspx
How To Take Photographs From Windows 8 Applications And Automatically Upload Them To The Cloud -- Part 5http://blogs.msdn.com/b/brunoterkaly/archive/2012/08/29/step-5-of-6.aspx
How To Take Photographs From Windows 8 Applications And Automatically Upload Them To The Cloud -- Part 6http://blogs.msdn.com/b/brunoterkaly/archive/2012/08/29/how-to-take-photographs-from-windows-8-applications-and-automatically-upload-them-to-the-cloud-part-6-of-6.aspx
Testing Everything Locally First 
001
  1. We are now ready to begin some testing.
  2. Now would be a good time to connect your web cam.
  3. The great news is that the Azure SDK and tool and introduces two emulators.
    • The first and later will let us emulate the web service running on our local machine.
    • This means we do not need to deploy it to a data center to test it.
  4. The other emulator is the storage emulator.
    • The storage emulator will allow us to save blobs locally, without requiring us to use a storage account of a data center.
    • The system uses SQL server to emulate blob storage.
    • This is all transparent to you so you do not need to worry about it.
  5. We will first run the web service.
    • After running the web service we can test it with a simple browser.
    • The browser is a great way to test your RESTful Web Service.
  6. The next step would be to test it with the Windows 8 application .
    • The Windows 8 application can also use the storage emulator to upload the photograph as a blob.
      • We can then use the built in tools of Visual Studio to inspect our pictures uploaded as blobs on our local machine
  7. When everything works as we expected, the next step is to try to deploy our web service to the cloud.
    • We will also need to modify the web service to reflect the storage account that we will provision at up the portal.
Because we will be using the storage emulation environment, Our code and Visual Studio (Web service project) We'll need to be adjusted to reflect the local storage and connection parameters. 
002
  1. Later, when we go to the portal to provision our storage account, we will once again modify the code of the web service, to reflect the storage account hosted in a data center. We wish to use the storage emulator and that is what the code above reflects.
  2. This is the crucial line of code that tells the system to use the local development storage account emulation environment :
    • CloudStorageAccount storageAccount = CloudStorageAccount.DevelopmentStorageAccount;
ValuesController.cs 
?
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152// GET api/values/container/blobnamepublic string Get(string container, string blobname){    try    {        // Make sure this line is commented out.        //CloudStorageAccount storageAccount = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("DataConnectionString"));         // This tells our web service to use the storage emulator.If         CloudStorageAccount storageAccount = CloudStorageAccount.DevelopmentStorageAccount;         // Client object provides a client for accessing the Windows Azure Blob service.        CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();         // All blobs are written into a container        CloudBlobContainer blobContainer = blobClient.GetContainerReference(container);         // Create container if does not exist.        blobContainer.CreateIfNotExist();         // Mark the container of the image as public so that can be read by anyone.        BlobContainerPermissions containerPermissions = new BlobContainerPermissions();        containerPermissions.PublicAccess = BlobContainerPublicAccessType.Blob;         // Define a 4 hour window that the Windows 8 client can write to Azure Blob Storage.        containerPermissions.SharedAccessPolicies.Add("mypolicy", new SharedAccessPolicy()        {            Permissions = SharedAccessPermissions.Write, // | SharedAccessPermissions.Read ,            //To be available immediately don't set SharedAccessStartTime =            SharedAccessExpiryTime = DateTime.Now.Add(TimeSpan.FromHours(4))        });         // Set the permissions so that Windows 8 client can write to the container        // for the 4 hours specified above.        blobContainer.SetPermissions(containerPermissions);         // Create the shared access signature that will be added to the URL.        string sas = blobContainer.GetSharedAccessSignature(new SharedAccessPolicy(), "mypolicy");         // Creat the URI to be return to the Windows 8 client that will be used to write        // to blob storage.        return string.Format("{0}/{1}{2}", blobContainer.Uri, blobname, sas);     }    catch (Exception ex)    {        // Return error message to client.        string error = ex.Message;        return error;    } }
Testing the Web service 
003
  1. Recall that there are two projects.
  2. Return to the WebService project. Figure 1 above.
  3. Perform the following:
    • From the Debug menu choose Start Debugging.
  4. You should see figure 2 above.
    • It shows the emulators starting up.
    • Two emulators
      • Storage (Blob)
      • Compute (Web Service)
Figure A represents the Default Start Page. 
004
  1. You are looking at the startup screen for our ASP.NET Web API application.
  2. But the real goal of this section is to call into our custom get method that we just added.
    • This get(string container, string blobname) method will return a shared access signature
    • As you recall this method will return a shared access signature, given a container name and blob name .
  3. We will type the following URL into the address bar of the browser :
    • http://127.0.0.1:81/api/values?container=brunophotos&blobName=brunopicture.jpg
  4. We will save that file. It is called values.json.
    • Next, we will open up the file to view its contents.
    • What we expect to see is a shared access signature that was created and sent by the web service.
    • This is a good way to test our web service with a browser, before actually using the Windows 8 application to do the same thing.
  5. As you saw from the previous section, values.json should contain assured access signature created by the web service as a result of passing in the container and a blob name.
    • The first parameter is container
      • The value passed and was brunophotos
    • The second parameter is blobname
      • The value passed was brunopicture.jpg
  6. This approach is a great way to verify the web service running correctly
  7. Once we verify that the URL works correctly, we are ready to start testing a similar call from a Windows 8 application.
The above figure is the contents of values.json 
005
  1. The URL you see in notepad reflects the contents of a shared access signature that was created by the web service.
  2. Any client with the http capabilities can retrieve a shared access signature as you see above
  3. Any client in posession of a shared access signature has the ability to write and manipulate the picture and container originally passed in.
    • The first parameter is container
      • The value passed and was brunophotos
    • The second parameter is blobname
      • The value passed was brunopicture.jpg
  4. In short, this means the shared access signature above can modify brunopicture.jpg and the containerbrunophotos For the four hour window of time specified in the web service code.
  5. We generated the shared access signature you see above with some simple boilerplate code.
  6. You can reuse the same code in your own applications .
Starting the Windows 8 Project, Taking a Photo, and Uploading it to the Cloud 
006
  1. Notice that the URL and figure a matches the URL we just use with the browser.
  2. Further notice that this URL is working with the Local emulation environment installed with the Azure SDK.
    1. Notice the address of http://127.0.0.1:81/
    2. This is the local emulation environment.
  3. _photoSAS We'll be modified to include a container and a blobname.
  4. The blobname will essentially be the photo that this captured using the camera API
  5. We will once again modify _photoSAS once we have created a true storage account using the windows azure portal.
Your web service should still be running from a previous step in this post. 
007
  1. We are ready to run the Windows 8 Project.
  2. Before running this application let's make sure that it will build correctly.
  3. From the Build menu, select Build Solution. See Figure A
  4. Assuming there are no errors, you are ready to run. From the Debug menu, select Start Debugging or simply hit theF5 key. See figure B.
    • You should see 0 failed.
  5. Once the Windows 8 application starts up, you should see figure C, at which point you should click on the Capture Photo button.
Click anywhere on the Windows 8 application. 
008
  1. Drag the handles to select the actual photo location.
  2. Notice how serious my expression is.
  3. Click OK.
Viewing the locally saved blobname using Visual Studio. 
009
  1. In a future post, once we create a real storage account, We will be able to view the blob from anywhere with an Internet connection.
  2. But for now we're just testing the local environment.
  3. We will be able to test many things:
    • We can verify that the web service will return a shared access signature that permits us from the Windows 8 application to create a container with a viewable picture .
    • We can verify that the Windows 8 application saves the photograph locally and then uploads it as a stream of bytes to the Storage Service using the shared access signature provided by the web service
Viewing the photo in the cloud 
010
  1. The photo has been uploaded to the emulated cloud. It is ready to view.
  2. Because we are running in the local emulation environment, the photo has been loaded on your own computer.
  3. If we had deployed the web service to the cloud and had pointed our Windows 8 application to the cloud, the photo would be in the cloud.
  4. The photo would then be available to anyone connected to the internet.
  5. To view the photo, you can use the built-in tooling in Visual Studio.
    • Return to Visual Studio where we built the Web Service Project.
    • From the View menu, select Server Explorer.
    • Navigate to Windows Azure Storage/(Development)/Blobs/photocontainer
      • You will see your photo in the container. In my case the photo is picture035.jpg.
    • Right mouse click as seen in the figure above.
  6. Notice the url pointing to the blog is http://127.0.0.1:1000/devstoreaccount1/photocontainer/picture035.jpg
    1. The above url is almost the publicly available url that clients will use to view the uploaded photo.
    2. But because we are running locally, this won't be true.
    3. Once we use a REAL storage account, we will be able to show the photo to anyone with an internet connection.
Viewing the photo 
011
  1. In the previous section we noticed that the url is pointing to the blob is:
    • http://127.0.0.1:1000/devstoreaccount1/photocontainer/picture035.jpg
  2. We can now start Internet explorer and browse to that location using the URL above.
Future Posts 
012
  1. Next Steps
    1. Deploying the Web Service to a Microsoft Data Center
    2. Adjusting the Windows 8 Client app to talk to our hosted service
  2. Download the free trial
    • You will need a trial account for Windows Azure
      • Please sign up for it here:
        • http://www.microsoft.com/click/services/Redirect2.ashx?CR_CC=200114759
Thanks..
I appreciate that you took the time to read this post. I look forward to your comments.
Published at DZone with permission of Bruno Terkaly, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

"Starting from scratch" is seductive but disease ridden
-Pithy Advice for Programmers