Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

Utilizando o Blob para substituir o file system

As máquinas virtuais utilizadas no Windows Azure são stateless, ou seja, não mantém o seu estado entre as operações de update (Hardware ou Software) e por isso, se utilizar o armazenamento local de sua máquina virtual você pode perder todos os seus dados.

Para evitar a perda de dados e ainda podermos acessar o os dados em qualquer lugar, vamos utilizar o Windows Azure Storage. Tivemos um artigo no módulo de Introdução do MVA falando somente sobre o Windows Azure Storage, se precisar rever os conteúdo apresentado clique aqui.

A aplicação TailspinSpyworks tem uma página com a função de cadastrar novos produtos. Neste cadastro é necessário incluir uma foto do produto, o arquivo da imagem é salvo dentro de uma pasta da aplicação. Em cenários de alta disponibilidade, não é uma boa prática a aplicação ter referencia para um pasta local. Neste exercício você irá trocar este mecanismo para gravar a imagem no serviço de Blob do Windows Azure.

Passo 1 – Provisionar uma conta de storage no Windows Azure

Neste passo você criará uma nova conta de storage para usar o serviço de Blob do Windows Azure.

1. Acesse pelo Internet Explorer o portal do Windows Azure https://windows.azure.com.  Se necessário, faça login com sua conta do Windows Live;

2. Em Serviços hospedados, Contas de armazenamento e CDN (Hosted Services, Storage Accounts & CDN), no painel do lado esquerdo, clique em Contas de Armazenamento (Storage Accounts), em seguida clique em Nova conta de Armazenamento (New Storage Accout).

3. Preencha a janela Criar uma nova conta de Armazenamento (Create a New Storage Account) com a sua subscrição do Windows Azure, uma URL única para a nova conta de storage, escolha uma região (OBS: utilize a mesma região dos serviços de compute), em seguida clique em OK.

4. Selecione a conta de storage que você acabou de criar e copie a Blob URL do painel de propriedades e cole em um bloco de notas (notepad). Em seguida clique no botão Exibir (View) da Chave de acesso primário (Primary access key).

5. Na janela View Storage Access Keys, clique no botão ao lado do campo Chave de acesso primário (Primary access key) para copiar a chave e cole no bloco de notas. 

 

 

Passo 2 – Alterar o código da aplicação para usar o serviço de Blob do Windows Azure

Esta é a minha parte favorita, fazer alterações de código em algumas páginas do projeto TailspinSpyworks.

1. Execute o Visual Studio como administrador de Start | All Programs | Microsoft Visual Studio clique com o botão direito do mouse no atalho do Microsoft Visual Studio e selecione Run as administrator.

2. Se a janela User Account Control aparecer, clique Yes.

3. Na opção File do menu, escolha Open em seguida Project/Solution.

4. Na janela Open Project, procure o arquivo TailspinSpyworks.sln para abrir a solução.

5. Abra o arquivo ProductAdd.aspx.cs localizado na raiz do projeto TailspinSpyworks.

6. A primeira alteração é incluir as referências.

Clique com o botão direito do mouse sobre o ptojeto TailSpinSpyworks e selecione "Add Reference".

Na aba Browse, vá para a pasta C:\Program Files\Windows Azure SDK\v1.6\ref e selecione os arquivos:

      • Microsoft.WindowsAzure.ServiceRuntime.dll;
      • Microsoft.WindowsAzure.StorageClient.dll.

6.1. Em seguida abra o arquivo ProductAdd.aspx.cs e posicione o cursor na linha 10, e inclua o código abaixo.

using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.ServiceRuntime;
using Microsoft.WindowsAzure.StorageClient;
using Microsoft.WindowsAzure.StorageClient.Protocol;

6.2. Ainda no arquivo ProductAdd.aspx.cs, posicione o cursor na linha 27, e inclua o código abaixo.

try{
       if (!IsPostBack)
       {
           this.EnsureContainerExists();
       }
}
catch (System.Net.WebException we){
   Error.Text = "Network error: " + we.Message;
   if (we.Status == System.Net.WebExceptionStatus.ConnectFailure)
   {
       Error.Text += "<br />Please check if the blob service is running at " +ConfigurationManager.AppSettings["storageEndpoint"];
    }
}catch (StorageException se){
   Console.WriteLine("Storage service error: " + se.Message);
}

6.3. Agora posicione o cursor logo abaixo da função Page_Load e inclua o código abaixo.

 

private CloudBlobContainer GetContainer()
        {
            // Get a handle on account, create a blob service client and get container proxy
            //var account = CloudStorageAccount.FromConfigurationSetting("DataConnectionString");
            CloudStorageAccount account;
            CloudStorageAccount.TryParse("DefaultEndpointsProtocol=https;AccountName=azure20111025a;AccountKey=Rl9ZI3Z88Sf6QHr9gMbdcVz6GFshIpA13Gpfp7++fdLoWXDT7dCor1/op9w78XNTKmpFXKR8+2EM/YCCLeDDvA==", out account);

            var client = account.CreateCloudBlobClient();

            //return client.GetContainerReference(RoleEnvironment.GetConfigurationSettingValue("ContainerName"));
            return client.GetContainerReference("gallery");

        }


        private void EnsureContainerExists()
        {
            var container = GetContainer();
            container.CreateIfNotExist();
            var permissions = container.GetPermissions();
            permissions.PublicAccess = BlobContainerPublicAccessType.Container;
            container.SetPermissions(permissions);
        }

         private void GravarImagemAzureBlob(string id, string name, string description, string tags, string fileName, string contentType, byte[] data)
        {
            // Create a blob in container and upload image bytes to it
            var blob = this.GetContainer().GetBlobReference(name);
            blob.Properties.ContentType = contentType;

            // Create some metadata for this image
            var metadata = new NameValueCollection();
            metadata["Id"] = id;
            metadata["Filename"] = fileName;
            metadata["ImageName"] = String.IsNullOrEmpty(name) ? "unknown" : name;
            metadata["Description"] = String.IsNullOrEmpty(description) ? "unknown" : description;
            metadata["Tags"] = String.IsNullOrEmpty(tags) ? "unknown" : tags;

            // Add and commit metadata to blob
            blob.Metadata.Add(metadata);
            blob.UploadByteArray(data);

        }

        private void GravarThumbAzureBlob(string id, string name, string description, string tags, string fileName, string contentType, Stream data)
        {
            // Create a blob in container and upload image bytes to it
            var blob = this.GetContainer().GetBlobReference(name);
            blob.Properties.ContentType = contentType;

            // Create some metadata for this image
            var metadata = new NameValueCollection();
            metadata["Id"] = id;
            metadata["Filename"] = fileName;
            metadata["ImageName"] = String.IsNullOrEmpty(name) ? "unknown" : name;
            metadata["Description"] = String.IsNullOrEmpty(description) ? "unknown" : description;
            metadata["Tags"] = String.IsNullOrEmpty(tags) ? "unknown" : tags;

            // Add and commit metadata to blob
            blob.Metadata.Add(metadata);
            blob.UploadFromStream(data);
        }

 

6.4. Procure a função ProductAddBtn_Click e dentro do bloco Try, comente as chamadas das funções GravarImagemFileSystem e GravarThumbFileSystem e inclua o código abaixo das funções previamente comentadas. 

GravarImagemAzureBlob(
                        Guid.NewGuid().ToString(),
                        imageName,
                        HttpUtility.HtmlEncode(Description.Text),
                        "",
                        imageName,
                        FileUpload1.PostedFile.ContentType,
                        FileUpload1.FileBytes);

      ////código para gravar imagem thumbnail no File System
                    GravarThumbAzureBlob(
                         Guid.NewGuid().ToString(),
                         imageName,
                         HttpUtility.HtmlEncode(Description.Text),
                         "",
                         imageName,
                         FileUpload1.PostedFile.ContentType,
                         CreateThumbnail(FileUpload1.FileContent));

 7. Analise o código apresentado e em caso de dúvida, inclua um comentário no artigo.

8. Abra o arquivo ProductDetails.aspx e altere o src do objeto Image para acessar as imagens do serviço de Blog que você criou no passo anterior. Faça os seguintes passos, posicione o cursor na linha 12 logo abaixo de.

<td style="vertical-align: top;">

Troque a linha

 

<img src='Catalog/Images/<%# Eval("ProductImage") %>'  border="0" alt='<%# Eval("ModelName") %>' />

Por essa abaixo

 

<img src='https://[suacontadestorage].blob.core.windows.net/gallery/<%# Eval("ProductImage") %>'  border="0" alt='<%# Eval("ModelName") %>' />

9. Por fim, abra o  arquivo ProductsList.aspx e altere o src do objeto Image para acessar as imagens do serviço de Blog, da mesma forma que o passo anterior. Posicione o cursor na linha 16, logo abaixo de.

<a href='ProductDetails.aspx?productID=<%# Eval("ProductID") %>'>
 

Em seguida, troque a linha.

<image src='Catalog/Images/Thumbs/<%# Eval("ProductImage") %>' width="100" height="75" border="0">

Pela seguinte linha.

<image src='https://[suacontadestorage].blob.core.windows.net/gallery/<%# Eval("ProductImage") %>' width="100" height="75" border="0">
 

Obs: troque [suacontadestorage] pelo nome da conta de storage que você criou anteriormente.

10. Neste momento a aplicação já está preparada para usar o serviço de Blob do Windows Azure e armazenar as imagens da aplicação. Para testar basta pressionar <F5> no Visual Studio, acesse a página ProductAdd.aspx e cadastre um novo produto.

Em seguida volte para a lista de produtos e verifique se o novo produto está aparecendo. Para finalizar o teste clique no detalhes do produto e para verificar que a imagem está dentro do serviço de Blob, basta clicar com o botão direito do mouse na imagem e ver as propriedades. Para verificar a URI da imagem.

Faça download do código fonte do projeto alterado, clicando aqui.

Esse artigo foi realizado utilizando o Hands-On-Lab criado por Rogério Cordeiro.

Abraço, 

Vinícius.

Tags:

Follow the Discussion

  • Vinícius,

    No Passo2, item 6 "A primeira alteração é incluir as referências", não seria necessário garantir que as DLLs Microsoft.WindowsAzure.ServiceRuntime.dll e Microsoft.WindowsAzure.StorageClient.dll sejam integradas ao pacote, através da propriedade "Copy Local" setada comoTrue em ambas referências?

    Abraços.

  • Pessoal,

    Seguindo com a discussão do Eliezer, eu tive que setar a propriedade "Copy Local" para algumas DLLs. Ex.: System.Web.Razor e System.WebPages.Razor para que as mesmas fossem para  o pacote quando eu realiza-se o deploy.

    Porem para o pacote TailspinSpyworks  eu não necessitei fazer devida alteração.

    Obs.: Estou usando o VS2012 Ultimate Beta.

  • Precisa mesmo usar o VS como administrador? Não percebi nenhuma operação que não fosse cotidiana na codificação.

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.