Na semana passada nós publicamos um artigo que nos mostrou a facilidade de trabalhar com os Helpers do WebMatrix, e ainda criamos dois guias simples, em poucos passos, para integrar o WebMatrix com Facebook e Twitter.

Este artigo pode ser lido novamente neste link.

Neste artigo nós trabalharemos com outros 2 novos exemplos, realizando a integração do WebMatrix com o Foursquare e com o encurtador de URLs Bit.ly

Apenas relembrando, os Helpers são blocos de códigos que podem ser utilizados na sua aplicação WebMatrix como atalhos simplificados para integração com ferramentas como Facebook, Twitter, Bit.ly, Foursquare, PayPal, dentre outros.

Veja como é fácil utilizá-los:

O meio mais fácil de adicionar os helpers no WebMatrix é criar um Site a partir de algum template (Um Starter Site por exemplo) e basta dar um “run” e entrar em: localhost:xxxx/_admin e adicionar uma senha para você.

Pronto! Depois que você criar a senha, o sistema vai pedir para você alterar o nome da pagina _Password.config para Password.config antes de continuar. Você deve fazer isso por questões de segurança, já que apenas alguém com acesso ao servidor pode renomear o arquivo.

Vamos aos exemplos deste artigo. Siga os passos abaixo para integrar rapidamente o seu site ao Foursquare e ao Bit.ly com o WebMatrix.

Integração WebMatrix com o Bit.ly

O URL Shortener Helper faz justamente o que o nome já indica. Transforma as URLs longas em URLs curtas. Creio que todo desenvolvedor ou profissional de internet têm usado algum tipo de encurtador. A premissa básica é ter uma URL mais simples, além de obter diversas estatísticas sobre a mesma.

O download deste Helper pode ser feito neste link do CodePlex.

Como faço para usá-lo?

Como todo helper, é extremamente simples. Existem dois assemblys (conjuntos) que precisam ser copiados para a pasta bin.

1. Microsoft.Samples.WebPages.Helpers.UrlShortener.dll

Esse é o helper. Esse assembly exibe a API e configurações para você interagir com o Bit.ly.

2. Microsoft.Samples.WebPages.Helpers.UrlShortener.Bitly.dll

Este assembly é o que eu gosto de chamar de fornecedor. Haverá um desses para cada prestador de URLShortener que implementarmos

Com os assemblys copiados para a pasta bin, vamos olhar agora para o _appStart.cshtml. AppStart é o lugar onde vamos configurar o helper para usá-lo em todo o nosso site. Neste momento existem somente duas configurações que precisamos realizar: UserName e apiKey.

@{ 
    UrlShortener.Settings.UserName = "YOUR BITLY USER NAME"; 
    UrlShortener.Settings.ApiKey = "YOUR BITLY API KEY"; 
   }

Bastante simples. Agora vamos realmente usá-lo. Na minha default.cshtml eu chamo o helper assim:

@UrlShortener.Shorten(@"http://DeveloperSmackdown.com")

Se eu estivesse em um bloco de código, seria parecido com o seguinte:

@{ var dsShortLink = @UrlShortener.Shorten(@"http://DeveloperSmackdown.com");
}

O resultado de cada uma delas é a seguinte string: http://bit.ly/acRAbT. Se você pegar este código e executá-lo com o seu username e apiKey, certamente irá produzir um resultado diferente.

Bem simples, certo? Agora vamos realizar a integração com o Foursquare.

Integração WebMatrix com o Foursquare

O Foursquare Helper do WebMatrix facilita a integração entre o seu site e o Foursquare. Com poucas linhas de código que você será capaz de mostrar um “Add to My Foursquare” ou mostrar os usuários em seu site.

O download deste Helper pode ser feito neste link do CodePlex.

Como usá-lo?

O helper é formado principalmente pelo arquivo Foursquare.cshtml, que deve ser colocado na pasta App_Code do seu site WebMatrix, juntamente comuma pasta Foursquare com páginas para tratar da autenticação. Para usar o helper siga estes passos:

Nota: Se você só precisará usar o método Foursquare.GetFoursquareButton () , você pode evitar os passos seguintes e chamar o método diretamente em sua página WebMatrix.

1. Anote a URL do site onde o site WebMatrix está sendo executado (clique em Site Workspace > Settings Page).

2. Se você ainda não tem uma conta do Foursquare, cadastre-se! Entrar no site do Foursquare e vá até a página OAuth Consumer Registration.

3. Nesta página, defina a Application Web Site para http://localhost: [porta], substituindo [port] para a porta onde o site está sendo executado.

4. Em seguida, defina a URL de retorno para http://localhost: [port] / Foursquare / RequestToken, substituindo [port] pela porta onde o site está em execução e clique em registrar. Anote a consumer kay e os valores obtidos.

5. Adicione a seguinte linha para a página _AppStart.cshtml (se o arquivo não existir, crie-o na raiz do site), substituindo os espaços reservados para seu username e senha.

@{
     Foursquare.Initialize(consumerKey: "{consumer-key}",
                              consumerSecret: "{consumer-secret}");
 }

Na página Default.cshtml do site, adicione o seguinte código para exibir os badges do Foursquare (substitua o ID pelo seu ID de usuário se você quiser). Observe que você precisa fazer o login com o Foursquare para acessar essa informação.

<body>
     ...
             @if (Session["accessToken"] != null) {
	 	  @Foursquare.GetBadgesWidget(Session["accessToken"].ToString(), userId: 13442)
     } else {
       <div>
             You're not logged in with Foursquare, login by clicking
                      the following @Foursquare.GetLoginLink("link")
       </div>
     }
     ...
 </body>   

Pronto. Temos mais 2 helpers integrados com o WebMatrix. Veja abaixo a página oficial dos 4 helpers abordados até agora:

Página oficial do Twitter Helper: http://twitterhelper.codeplex.com/

Página oficial do Facebook Helper: http://facebookhelper.codeplex.com/

Página oficial do Bit.ly Helper: http://urlshortenerhelper.codeplex.com/

Página oficial do Foursquare Helper: http://foursquarehelper.codeplex.com/

Espero que utilizem bem cada helper. É realmente uma revolução na forma de integrar o site.