Web social. ASP.NET Web Helpers Library

No que diz respeito à denominada Web Social, o mais rápido, simples e funcional, pode ser obtido com a ajuda dos ASP.NET Web Helpers.

Por Jaime Peña Tresancos - Tradução CRV


Publicado em: 06/2/13
Valorize este artigo:
Ao longo do artigo veremos o suporte, ainda que muito variado quanto ao potencial, nos dá os seguintes âmbitos de acesso a sites, blogs, foros:
  1. Twitter
  2. FaceBook
  3. LinkShare
    • Delicious (del.icio.us)
    • Digg
    • Google Buzz (Google Reader)
    • FaceBook
    • Reddit!
    • Stumble it!
    • Twitter
  4. Bing

Instalação de ASP.NET Web Helpers Library

Iniciamos em WebMatrix um novo projeto baseado em um layout (Template).

Selecionamos um layout do tipo Site vazio e lhe damos um determinado Site Name (optamos no nosso exemplo por WebHelpers). Finalmente clicamos sobre o botão OK.

Já com a vista de Site no ambiente de desenvolvimento de WebMatrix, vemos no painel da direita um link para ASP.NET Web Pages Administration, clicamos sobre ele e isto nos levará a uma janela do explorador de Internet onde poderemos realizar as tarefas administrativas correspondentes.

Entre elas, se encontram a gestão dos denominados Web Helpers, que é o que mais nos interessa imediatamente.

Dado que é a primeira vez que utilizamos os trabalhos de administração neste projeto, nos pedem que criemos uma senha e que a confirmemos. Depois, deveremos clicar sobre o botão Create Password, que já se encontrará ativo.

No passo seguinte informam que devemos realizar imediatamente uma tarefa previa no ambiente de desenvolvimento de WebMatrix e clicar onde se indica no texto (Clic here).

Voltamos temporariamente ao ambiente de WebMatrix.

No ambiente de desenv &nsbp; &nsbp;&nsbp;ollo de WebMatrix, se não estamos já, devemos ir à visão Files, clicando sobre a entrada no painel inferior esquerdo.

No esquema de pastas e arquivos do Site, pressionamos com o botão direito do mouse sobre o título superior (o nome do projeto, WebHelpers no nosso caso) e clicamos sobre Refresh, para nos assegurarmos que se refletem as mudanças do sistema que se deviam ter produzido por último.

Finalmente localizamos o arquivo _Password.config, dentro da nova pasta Admin, dentro de App_Data e o renomeamos Password.config. Note, sem a barra de sublinhado inicial, é fundamental esta leve mudança.


Voltamos ao explorador de Internet e nos dispomos a iniciar sessão no ASP.NET Web Pages Administration.

Digitamos a senha que tínhamos criado e clicamos sobre Login.

Depois de uns instantes nos mostrará uma lista de todos os pacotes instaláveis. Em condições gerais, navegaríamos em busca do desejado ou utilizaríamos a opção Search.

Neste caso concreto o ASP.NET Web Helpers Library, em sua última versão, é o primeiro mostrado.

Clicamos sobre o botão Install que se encontra imediatamente à sua direita.

Nos pedirá confirmação para a instalação. Leia detidamente para ver que realmente é esse o pacote desejado e prossiga clicando no botão Install.

No final já poderemos encerrar a sessão, clicando em Logout, fechar o explorador de Internet se não estava sendo utilizado e voltar ao ambiente de desenvolvimento de WebMatrix.

No ambiente de desenvolvimento de WebMatrix, se não estamos aí já, deveremos ir à visãoFiles, clicando sobre a entrada no painel inferior esquerdo.

No esquema de pastas e arquivos do Site, pressionamos com o botão direito do mouse sobre o título superior (o nome do projeto, WebHelpers no nosso caso) e clicamos sobre Refresh, para nos assegurarmos que se refletem as mudanças do sistema que se deveriam ter produzido por último.

Poderemos observar que foi criada uma nova pasta (packages) na que se encontra outra com os arquivos do pacote recém instalado e que na pasta Admin foi criado um novo arquivo, agora há dois, o de senhas e de configuração dos pacotes.

A partir deste momento estamos em condições de tirar partido de todo o potencial que nos proporcionam os ASP.NET Web Helpers.

Passamos a ver alguns exemplos ilustrativos de sua simplicidade de implementação.

Suporte para Twitter

Com os ASP.NET Web Helpers podemos já dar suporte para:
  • Profile: Lista de Tweets de um usuario
  • Search: Busca de Tweets acerca de um determinado tema
  • List: Lista de Tweets de uma determinada lista de Twitter de um usuario
  • TweetButton: Botão de criar um Tweet da página
  • FollowButton: Botão para seguir o usuario Twitter proprietário da página
Os passos a seguir são muito simples:
  1. Criar um arquivo novo de tipo cshtml, ao que daremos como nome, por exemplo, Twitter.
  2. Substituímos todo o seu código pelo que se mostra na lista que segue.
  3. Clicamos com o botão direito do mouse sobre o nome do arquivo e selecionamos a opção Launch in browser.
Se mostrará no explorador de Internet, no que observaremos entradas parecidas às mostradas nas figuras anexas.

@{
&nsbp; &nsbp;&nsbp;
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        ; <title></title>
    </head>
    <body>
        @Twitter.Profile("jpt219", width: 400, avatars: true, numberOfTweets: 20, scrollBar: true)
        @Twitter.Search("Windows 8", width: 400, avatars: true, scrollBar: true)
        @Twitter.List("jpt219", "abierta")
        @Twitter.TweetButton()
        @Twitter.FollowButton("jpt219")
    </body>
</html>


Suporte para FaceBook

Para FaceBook os ASP.NET Web Helpers oferecem um suporte muito limitado, mas se dispõe em WebMatrix de um muito completo FaceBook Helper, do que falaremos em um artigo posterior.

Simplesmente implementará o LikeButton de FaceBook, para informar que gostamos dessa página , sempre que o usuario que pressione o botão seja ao mesmo tempo usuário de FaceBook -algo bem conhecido por todos-. Os passos a seguir são os mesmos de antes:

  1. Criar um arquivo novo de tipo cshtml, ao que daremos como nome, por exemplo, FaceBook.
  2. Substituímos todo o seu código pelo que se mostra na lista que segue.
  3. Clicamos com o botão direito do mouse sobre o nome do arquivo e selecionamos a opção Launch in browser.
@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        @Facebook.LikeButton()
    </body>
</html>

Clicamos com o botão direito do mouse sobre o nome do arquivo e selecionamos a opção Launch in browser.

Se mostrará no explorador de Internet, no que observaremos uma entrada parecida à mostrada na figura adjunta.

Botoneira LinkShare

Discreto, mas o mais potente helper da coleção ASP.NET Web Helpers, é uma botoneira muito simples que abre nossa página a grande número de sites sociais da rede e isso com -literalmente- uma simples linha de código.

Os pasos a seguir são os descritos:

  1. Criar um arquivo novo de tipo cshtml, ao que daremos como nome, por exemplo, Twitter.
  2. Substituímos todo o seu código pelo que se mostra na lista que segue. Colocamos "LinkShare", porque é o nome de nossa página, não porque seja o nome do Helper. Tenha isso bem em conta .
  3. Clicamos com o botão direito do mouse sobre o nome do arquivo e selecionamos a opção Launch in browser.
@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        @LinkShare.GetHtml("LinkShare")
    </body>
</html>

Clicamos com o botão direito do mouse sobre o nome do arquivo e selecionamos a opção Launch in browser.

Se mostrará no explorador de Internet, no que observaremos uma entrada parecida à mostrada na figura adjunta.

Resumindo, a botoneira de LinkShare consta de botões de link para os seguintes sites:

  • Delicious (del.icio.us)
  • Digg
  • Google Buzz (Google Reader)
  • FaceBook
  • Reddit!
  • Stumble it!
  • Twitter

Buscas com Bing

Os ASP.NET Web Helpers permitem criar uma SearchBox simples do buscador Bing de uma maneira muito rápida e relativamente flexível.

Os passos a seguir são os já citados:

  1. Criar um arquivo novo de tipo cshtml, ao que daremos como nome, por exemplo, Bing.
  2. Substituímos todo o seu código pelo que se mostra no listado que segue.
  3. Clicamos com o botão direito do mouse sobre o nome do arquivo e selecionamos a opção Launch in browser
.@{
    Bing.SiteTitle = "Microsoft Espanha";
    Bing.SiteUrl = "http://www.microsoft.com/es-es";
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        @Bing.SearchBox();
    </body>
</html>

Nota: Atualmente AdvancedSearchBox já não é suportado por Microsoft como parte dos ASP.NET Web Helpers






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato