Fabrício Sanchez

17/06/2012

No último dia 07 de Junho a Microsoft anunciou diversos novos recursos para sua plataforma  de computação em nuvem – o Windows Azure. Se você está recebendo esta informação como novidade, recomendo realizar a leitura do post que escrevi aqui mesmo no site sobre as novidades do Windows Azure. Você pode ainda conferir uma série completa sobre o assunto seguindo este link.

Neste e nos posts futuros, apresento as novas possibilidades relacionadas há um dos novos recursos apresentados na nova release – o Windows Azure Web Sites. Especificamente no texto de hoje, falaremos sobre como é possível criar e publicar ASP.NET Web Pages com Razor no Windows Azure utilizando uma das mais completas ferramentas para source control disponíveis no mercado e que é classificada como open source – o Git.

Sobre Windows Azure Web Sites (WAWS)

Em linhas gerais, Windows Azure Web Sites é um novo ambiente disponibilizado dentro da plataforma Azure com características específicas para executar aplicações web de pequeno e médio portes. Ao criar um novo website neste modelo, assim como em uma hospedagem compartilhada tradicional, sua aplicação compartilhará recursos (disco, RAM, processamento, etc.) com outras aplicações em um mesmo servidor (de alta capacidade, é importante que se diga). A ideia é que através do WAWS, seja possível realizar o deploy de aplicações web de forma simplificada e rápida, utilizando por exemplo o controlador de código de sua preferência.

Alguns aspectos importantes a serem considerados em relação ao WAWS são:

1. Git ou TFS deployment: com WAWS é possível utilizar Git e/ou TFS para efetuar a publicação de suas aplicações. Com algunas poucos comandos, é possível habilitar o ambiente para deploy através destas ferramentas.
2. Escolha da publicação ativa: o portal do WAWS armazena cronologicamente às últimas publicações realizadas. Com alguns cliques você pode selecionar qual dentre elas é aquela que deve estar ativa.
3. Gerenciamento de configuração de aplicações: gerenciar os diversos valores e atributos de arquivos de configurações (web.config’s) é sempre uma dor de cabeça a parte. Com WAWS este problema foi reduzido drasticamente através de um mecanismo simples de parametrização.
4. Log’s do site: WAWS armazena log’s dos sites lá armazenados. Você pode monitorar a “saúde” de sua aplicação analisando os mesmos. Este acesso pode ser realizado via client de FTP ou via ferramenta de linha de comando.
5. Bases de dados MySQL: WAWS suporta também bancos de dados MySQL. Você criar uma nova base de dados ou ainda, utilizar uma base já existente para conectar sua aplicação. Para que MySQL pudesse funcionar com performance e seguraça no modelo de cloud, a Microsoft estabeleceu uma parceria com uma empresa especializada, chamada ClearDB.
6. Escalabilidade: Windows Azure Web Sites disponibiliza dois modelos possíveis para conseguir escala: compartilhado e reservado. No modo compartilhado é possível aumentar o número de processos referentes a aplicação web enquanto no reservado, é possível passar a aplicação para máquinas virtuais dedicadas.
7. Segurança: WAWS trabalha em modo full trust. Isto significa dizer que todas as aplicações que “rodam” em ambiente compartilhado encontram-se completamente isoladas umas das outras. Este é um critério importante a ser avaliado no momento de planejar seu website.
8. Linguagens e frameworks: que WAWS suporta nativamente ASP.NET, ASP.NET MVC, PHP, Node.js você já deve ter ouvido falar. Talvez o que você não saiba é que suas aplicações ASP clássicas e 2.0 também são suportadas, logo, seus códigos legados são bem vindos dentro do Windows Azure Web Sites.
9. Web Deploy: outra característica importante agregada ao WAWS é a aceitação de publicação de aplicações via web deploy. Assim, se você utiliza as ferramentas da Microsoft para gerenciamento de código (VS 2o10, VS 2012 ou WebMatrix), poderá publicar diretamente através delas no Windows Azure.
10. NuGet: ao realizar o deploy de sua aplicação no WAWS, não é mais necessário enviar os pacotes de forma agregada. O Windows Azure se encarrega de realizar tal tarefa em tempo de execução no momento da implantação.

Uma pergunta que deve estar perturbando sua cabeça neste instante deve ser: “Se o Windows Azure já possuía as web roles, o que justifica a existência de mais um modelo pra host de aplicações web?“. Acertei?

A resposta é simples: Web roles são ambientes que permitem alto grau de personalização através de startup tasks. O objetivo das web roles é disponibilizar um ambiente para host de aplicações web mais robusto e totalmente personalizável, ao passo que o WAWS apresenta outro viés em termos de demanda: a simplicidade em detrimento da personalização.

O que faremos no exemplo de hoje?

Uma das operações que muitos de nós (profissionais de desenvolvimento para internet) realizamos em muitos de nossos projetos, é a integração de nossa aplicação com alguma rede social. Desta forma, para ilustrar o processo de publicação de aplicações via Git, o que farei é criar uma integração simples para Twitter utilizando apenas ASP.NET Razor e WebMatrix 2 RC.

O que preciso para construir este exemplo?

Para a construção da aplicação apresentada neste texto, você precisará:

1. Uma assinatura ativa do Windows Azure. Se você não possui e deseja testar o serviço, pode optar por criar uma conta de teste, gratuíta por 3 meses. Link: http://www.windowsazure.com/pt-br/pricing/free-trial/. Você pode visualizar um tutorial passo-a-passo apresentando o procedimento de criação de uma conta de testes no Windows Azure seguindo este link.
2. Um editor de código de sua preferência para escrever código Razor (minha sugestão é utilizar WebMatrix 2 RC). Se você deseja saber mais informações sobre WebMatrix, basta seguir este link.
3. Criar uma conta no repositório do GitHub. Esta operação é necessária para interligar repositórios locais com online.
   Link: http://github.com/
   Link: http://www.microsoft.com/web/webmatrix/
4. Client gratuíto do Git para Windows.
   Link: http://windows.github.com

Criando a aplicação de exemplo

Observação: A partir daqui, estou considerando que seu ambiente esteja devidamente confirado e pronto para ser utilizado.

1. Criando o projeto com WebMatrix

Com WebMatrix em execução, selecione a opção “Templates” e em seguida, a guia “ASP.NET”. Na relação de projetos, selecione a opção “Empty Site“. Nomeie o projeto e selecione “Create“. Se tudo correu bem, você devera estar visualizando o ambiente de trabalho da ferramenta. A Figura 1 apresenta o ambiente do WebMatrix em funcionamento.

 Figura 1. O ambiente de trabalho do WebMatrix

2. Criando a integração com o Twitter

O passo seguinte consiste em criar a integração com a rede social de preferência (eu escolhi criar para Twitter). Para isso, alterne para a guia “Files” no menu inferior à esquerda. Lá, adicione um novo arquivo com a extensão “.cshtml” e nomeie-o conforme sua preferência.

Para realizar a intergração, utilizarei um dos principais recursos disponibilizados pelo WebMatrix na tentativa de tornar o processo de desenvolvimento para web mais simples – os Helpers. Adicionarei este helper a meu projeto através da integração do NuGet com WebMatrix. O fluxo de ações para este fim é: Gallery (Nuget no ribbon menu superior) > Na janela que se abre, digite “twitter” no campo de busca > Nos resultados, selecione a opção “Twitter.Helper” > Pressione “Install > Pressione “Install” > Pressione “Accept” para os termos de licença.

A Figura 2 apresenta a busca acontecendo no repositório do NuGet e o helper mencionado anteriormente sendo adicionado ao projeto.

Figura 2. Adicionando o helper ao projeto

 Ao finalizar este processo, o WebMatrix terá adicionado todas as referências necessárias para que a aplicação possa reconhecer o helper como válido em seu contexto. Agora, nos resta criar a página de integração. O código apresentado pela Listagem 1 apresenta a estrutura da página que exibirá os tweets deste que vos escreve.

[html]

Integração com Twitter – Git + Windows Azure Web Sites

[/html]

Listagem 1. O código de integração com o Twitter

Evidentemente que toda lógica de integração encontra-se no arquivo “TwitterGoodies.cshtml”, localizado na pasta “App_Code” do projeto, cujo código pode ser visualizado na Listagem 2. Este é um requerimento do WebMatrix para que os helpers possam ser reconhecidos.

[csharp]
@functions {
public enum DataCount {
Vertical,
Horizontal,
None
}

public enum Languages {
English,
French,
German,
Spanish,
Japanese
}

public static string GetLanguageCode(Languages language) {
switch (language) {
case Languages.French:
return “fr”;
case Languages.German:
return “de”;
case Languages.Spanish:
return “es”;
case Languages.Japanese:
return “ja”;
default:
return “”;
}
}

public enum FollowStyles {
Text,
Bird,
Twitter,
LogoBig,
LogoMedium,
LogoSmall
}

public enum FollowColors {
Blue,
Silver,
Black
}

public static string GetFollowButtonImageUrl(FollowStyles followStyle, FollowColors followColor) {
var fileName = “”;

switch (followStyle) {
case FollowStyles.Text:
fileName = “follow_me-“;
break;
case FollowStyles.Bird:
fileName = “follow_bird-“;
break;
case FollowStyles.Twitter:
fileName = “twitter-“;
break;
case FollowStyles.LogoBig:
fileName = “t_logo-“;
break;
case FollowStyles.LogoMedium:
fileName = “t_small-“;
break;
case FollowStyles.LogoSmall:
fileName = “t_mini-“;
break;
}
switch (followColor) {
case FollowColors.Blue:
fileName += “a”;
break;
case FollowColors.Silver:
fileName += “b”;
break;
case FollowColors.Black:
fileName += “c”;
break;
}

return fileName;
}

public enum WidgetBehaviors {
Default,
All
}
}

@helper TweetButton(
DataCount dataCount = DataCount.Vertical,
string tweetText = “”,
string url = “”,
Languages language = Languages.English,
string username = “”,
string relatedUsername = “”,
string relatedUserDescription = “”) {
var tweetTextAttribute = new HtmlString(!tweetText.IsEmpty() ? string.Format(” data-text=”{0}””, tweetText) : “”);
var urlAttribute = new HtmlString(!url.IsEmpty() ? string.Format(” data-url=”{0}””, url) : “”);
var languageAttribute = new HtmlString(!GetLanguageCode(language).IsEmpty() ? string.Format(” data-lang=”{0}””, GetLanguageCode(language)) : “”);
var usernameAttribute = new HtmlString(!username.IsEmpty() ? string.Format(” data-via=”{0}””, username) : “”);
var relatedAttribute = new HtmlString(!relatedUsername.IsEmpty() ? string.Format(” data-related=”{0}{1}””, relatedUsername, !relatedUserDescription.IsEmpty() ? “:” + relatedUserDescription : “”) : “”);
Tweet} @helper FollowButton( string username, FollowStyles followStyle = FollowStyles.Text, FollowColors followColor = FollowColors.Blue) { } @helper Profile( string username, int width = 250, int height = 300, string backgroundShellColor = “#333333”, string shellColor = “#ffffff”, string tweetsBackgroundColor = “#000000”, string tweetsColor = “#ffffff”, string tweetsLinksColor = “#4aed05”, int numberOfTweets = 4, bool scrollBar = false, bool loop = false, bool live = false, bool hashTags = true, bool timestamp = true, bool avatars = false, WidgetBehaviors behavior = WidgetBehaviors.All, int interval = 6) {

}

@* Advanced queries: http://search.twitter.com/operators *@
@helper Search(
string searchQuery,
int width = 250,
int height = 300,
string title = null,
string caption = null,
string backgroundShellColor = “#8ec1da”,
string shellColor = “#ffffff”,
string tweetsBackgroundColor = “#ffffff”,
string tweetsColor = “#444444”,
string tweetsLinksColor = “#1985b5”,
bool scrollBar = false,
bool loop = true,
bool live = true,
bool hashTags = true,
bool timestamp = true,
bool avatars = true,
bool topTweets = true,
WidgetBehaviors behavior = WidgetBehaviors.All,
int interval = 6) {

}

@helper Faves(
string username,
int width = 250,
int height = 300,
string title = null,
string caption = null,
string backgroundShellColor = “#43c43f”,
string shellColor = “#ffffff”,
string tweetsBackgroundColor = “#ffffff”,
string tweetsColor = “#444444”,
string tweetsLinksColor = “#43c43f”,
int numberOfTweets = 10,
bool scrollBar = true,
bool loop = false,
bool live = true,
bool hashTags = true,
bool timestamp = true,
bool avatars = true,
bool topTweets = true,
WidgetBehaviors behavior = WidgetBehaviors.All,
int interval = 6) {

}

@helper List(
string username,
string list,
int width = 250,
int height = 300,
string title = null,
string caption = null,
string backgroundShellColor = “#ff96e7”,
string shellColor = “#ffffff”,
string tweetsBackgroundColor = “#ffffff”,
string tweetsColor = “#444444”,
string tweetsLinksColor = “#b740c2”,
int numberOfTweets = 30,
bool scrollBar = true,
bool loop = false,
bool live = true,
bool hashTags = true,
bool timestamp = true,
bool avatars = true,
bool topTweets = true,
WidgetBehaviors behavior = WidgetBehaviors.All,
int interval = 6) {

}
[/csharp]

Listagem 2. O código de integração com o Twitter

3. Criando o repositório local

Ótimo! Agora já possuímos o mais importante – nossa aplicação de exemplo. Nos resta agora seguir com os demais passos sendo que o próximo consiste justamente da criação de um repositório local.

Git trabalha com o conceito de repositórios, ou seja, tudo o que se escreve deve estar agrupado em um repositório para que o gerenciamento possa ser realizado, assim, o que faremos a seguir e criar este repositório local e apontar o servidor Git para ele.

Após executar a aplicação do Git e fornecer suas credenciais do GitHub, selecione a opção “github” no menu à esquerda e do lado direito, no menu superior pressione a opção “add”. Ao realizar esta operação, você estará dizendo ao Git que você deseja criar um novo repositório de código. Informe os dados de seu repositório e clique em “Create“. A Figura 3 ilustra este processo.

Figura 3. Criando um novo repositório local no Git

Agora, com um simples “CTRL + C” e “CTRL + V”, adiciono os arquivos do meu projeto da  origem (WebMatrix hospeda os arquivos de projeto por padrão em “C:Users[seu usuário]DocumentsMy Web Sites”) para o repositório recém criado. Após realizar esta operação, meudashboardde administração do Git apresenta a tela apresentada pela Figura 4.

Figura 4. Novos arquivos adicionados ao repositório Git

O repositório está criado e os arquivos necessários para que a aplicação funcione estão adequadamente distribuídos. Nos resta agora partir para a publicação do conteúdo. A seguir, através da Figura 5 disponibilizo os comandos para realizar tal procedimento. Destaque para as linhas marcadas em amarelo.

Figura 5. Realizando o commit dos arquivos no repositório

Vamos aos aspectos principais:

• Duas primeiras linhas em amarelo: adentramos ao diretório dentro do repositório, cujos arquivos da aplicação encontram-se.
• Terceira linha em amarelo: inicializamos o repositório Git. É como se estivessemos informando ao Git que iríamos realizar algumas operações com ele e portanto, precisaríamos de sua atenção.
• Quarta linha: adicionamos todos os elementos do diretório de aplicação para posterior commit.
• Quinta linha: realizamos o commit de todos os arquivos mencionados através de “add”.

O resultado da operação pode ser visualizado nas linhas abaixo dos comandos informados por nós.

4. Criando o Web Site no Windows Azure

Estamos quase finalizando. Nos resta ainda criar e configurar o ambiente de hospedagem no Windows Azure e então, realizar a publicação dos arquivos do site. Com o Git já está tudo certo, agora, é com o Azure. Para tanto, o que farei é me autenticar no painel de administração do Windows Azure, acessarei a área de Web Sites e, em seguinda, criarei uma nova estrutura, conforme apresentarão as Figuras 6 e 7.

Figura 6. Criando um novo Web Site

Figura 7. O novo Web Site em alguns segundos já em execução

Agora, com o ambiente já criado e em execução, resta-nos habilitar o acesso do Git ao ambiente. Para realizar esta operação, basta clicar no nome do site apresentado pela Figura 7 (“razorgitazure”) e adentrar seu dashboard. No canto inferior direito da página de administração é fácil encontrar uma seção de links denominada “quick glance“. Um dos links agregados por ela é “Set up Git publishing“. Ao clicar nesta opção, uma nova janela se abrirá solicitando seus dados para autenticação no Git. Informe-os e aguarde que o Windows Azure lhe apresente a tela demonstrada na Figura 8.

Figura 8. Ambiente pronto para a publicação via Git

Finalmente o ambiente está pronto para a publicação. Resta agora enviar os arquivos do repositório local para um repositório remoto no Windows Azure. Para realizar esta operação, utilizo os comandos apresentados pela Figura 9.

Figura 9. Realizando o push dos arquivos para repositório remoto no Azure

As linhas em amarelo denunciam a operação realizada, isto é, primeiro criamos um repositório remoto no Windows Azure para hospedar os arquivos da aplicação e, na segunda linha, enviamos os arquivos do repositório local para este remoto recém criado.

A página com Azure informando o sucesso do deployment pode ser visualizada pela Figura 10. Já a aplicação em execução pode ser visualizada na Figura 11.

Figura 10. Windows Azure indicando o sucesso do deployment

Figura 11. Aplicação exemplo publicada no Windows Azure

Bom, por hoje é só pessoal. Nos próximos artigos exploraremos alguns outros aspectos relacionados aos Web Sites na prática.

Não esqueça de deixar seus comentários.

Até o próximo!