Real Time Communication with Pusher

Aren’t you confortable with WebSockets and all enviroment behind it? Server configuration, providers, fallbacks and so on? Learning technologies like Signalr or Nodejs? And most of all, needs a fast development without those concerns?

So maybe you just need to know a cool service named Pusher that can bring everything you need to start a RealTime App.

Pusher works taking care of all infrastructure and providing you an Api than can be accessible through technologies like Java, .Net, Rails, Nodejs, PHP and more. In this post i’ll show you how to consume Pusher Api using Asp.net MVC and JavaScript, i hope you enjoy that, let’s go then.

First of All you need register on Pusher.com, this can be done with a Google account easily. Once you done your account you will have a dashboard view like image 01.

accountimage 01.

Just notice the Your apps Section on the left menu, there you will have information about your applications and create new ones, see image 02.

account02image 02.

Now select the App Key menu to find the following informations:

  • app_id: Provides an Id for that especific application
  • key: a personal key
  • secret: a personal secret.

See image 03.

account03image 03

And that is it… All the infrastructure is done, now we can start developing.

In this example i’ll use Visual Studio 2013 but you can use any express version and Asp.Net MVC 4, see image 04 and image 05 below.

vs01image 04

vs02

image 05

Visual Studio just loaded the basic templates for Asp.Net MVC 4 and we can add Pusher libraries using NUGET using the command “Install-Package PusherServer“, image 06.

vs03

image 06

On solution explorer, just add a controller and name it HomeController (Prety basic).

You will need at least these three namespaces.

  • using PusherServer;
  • using System.Web.Mvc;
  • using System.Net;

In the controller, i’ll create 2 actions, Home and HelloWorld. The Home action will load the page that will consume the Pusher service using Javascript and will be listening (subscribe) for a specific channel and for a specific event that you will define in the HelloWorld action as image 07 and image 08 bellow.

vs04

image 07

vs05

image 08

Notice that on document load event i just subscribe to a channel named test_channel and add a listener to my_event event, so everything that triggers through the server will be listened in this html page as image 09 and image 10.

web01

image 09

If you look at the image 07, you will notice that i just retrive from the url the key value and pass that to the trigger event that will be raised throught the listeners and react to that on image 08.

That is all you need to start smart and cool realtime apps, in the follow link you can download this example, but don’t forget to use your own Pusher account to that.

I hope you enjoy that fast and objective post.

Best regards.

Anúncios

Notificações com Pusher no Asp.net MVC 4

Apresentando Pusher no Asp.net MVC4

Se você não é familiarizado com o Websockets do HTML5, não tem um ambiente ou não sabe (talvez nem queira aprender) configurar o node.js ou não tenha um servidor que suporte a tecnologia e tem o mesmo problema com signalr, mas quer aprender ou utilizar a tecnologia de notificações em tempo real em sua aplicação, você pode usar um serviço chamado Pusher, que nada mais é do que um provedor que se responsabiliza pelas notificações e encapsula toda a tecnologia que vai fazer este serviço, retirando assim a responsabilidade do desenvolvedor de prover toda a infra, deixando apenas o desenvolvimento em suas mãos.

Você precisa fazer uma conta no serviço do Pusher, detalhe que a conta tem alguns planos, mas pra este exemplo estou usando o plano free, que vocês podem imaginar ter varias limitações, porém serve para o exemplo… mas eu deixo os detalhes da criação da conta com vocês.

Vamos começar a por a mão na massa, criando um projeto “empty” do template ASP.NET MVC4 no Visual Studio 2013, e adicionar o comando “Install-Package PusherServer -Pre” no seu terminal do NuGet… o que? Você não tem o Nuget!?!? Então instale aqui.

nuget

Feito isto, já podemos criar um controlador chamado Home com um action chamado Index, conforme a seguir.

controlador

Anteriormente, havíamos instalado pelo NuGet os pacotes necessários para realizar as notificações, agora vou acessar a minha conta do Pusher e pegar dados para poder fazer efetivamente a notificação.

pusheraccount

Anotados os dados da app_id, key e secret, vou formular o procedimento das notificações. Para este exemplo vou criar 2 páginas, uma que dará o start da trigger que disparará a notificação, e outra página ouvirá respostas oriundas dos servidores do serviço do Pusher. Ainda observando a sua conta, você pode ver um exemplo com várias tecnologias, além de Asp.Net… Eu particularmente implementei apenas em Asp.net MVC4 e em VisualForce no ambiente da Salesforce, obtendo os mesmos resultados.

Antes de começar vou explicar um detalhe do Pusher, referente a canais e eventos. De fato é algo bastante simples, em um lado o server, que é o cara que dispara o gatilho, esse cara é responsável por iniciar este processo, então precisa das informações da app_id, key e secret,  e também é ele quem define o canal e o evento, para um cliente ouvir estes canais nestes eventos, fazendo subscribe de um canal via JavaScript, e ativando a partir de um evento, bom, vamos montar agora a estrutura, da página que dará o start e da que ouvirá. Vale lembrar que eu criei um layout master, e depois criei as duas views usando esse layout master eeee também estou borrando dados da minha conta no Pusher :).

controladorcompleto

Observem a referencia a biblioteca no “using PusherServer;” . Agora vamos criar as páginas… ou melhor, o código das paginas rsrs. Ná pagina index, eu vou apenas criar o Javascript que ouvirá as notificações, ou seja, a pagina que será notificada.

paginaindex

E na página que iniciará o trigger, crio a estrutura no frontend (botão de submit mais um input[text]  pra mandar uma mensagem).

htmltrigger

Observem, que eu referencio o Form á action Acionar do controlador home, passo meu input com o nome message, pois no controlador, vou pegar esse valor e passar como parâmetro para meu trigger… Um detalhe que não comentei anteriormente, que você pode conferir no Action Acionar, é que a mensagem é passada como json, mas isso vocês devem ter imaginado neh…:)

jsonnewmessage

Agora é só rodar o projeto, deixar a pagina inicial, abrir outra pagina chamando a view Acionar e clicar no botão Acionando, mas antes passando uma mensagem pra ver o efeito neh.

acionar

Você pode fazer download do projeto, clicando aqui.

Aproveite e visite meu site http://aldocosta.com.br.

Testes Unitários com C# – Parte II – Code Coverage


Code Coverage ou (Cobertura de Código), significa cobrir todas as possibilidades que seu código irá passar, todos if’s, case’s ou condições de nosso código, é assumir que nenhum trecho de linha de programação não seja testado.


Ainda utilizando o Visual Studio 2010 Ultimate nesta continuação do post Testes Unitários com C#, configuraremos então o ambiente para realizar a cobertura de código em nossos testes.

Em nosso projeto de testes, no menu vertical na guia Test >> Edit Test Settings >> Local (local.testsettings) configuraremos nossas opções de testes e na opção de Test Settings selecionaremos então Data and Diagnostics conforme abaixo.

Marcaremos a opção Code Coverage e daremos dois cliques para selecionar a dll que iremos cobrir, clicamos em ok na mensagem que se segue e depois em apply e pronto, selecionamos o assembly que iremos cobrir.

Agora então rodaremos novamente todos os testes em nosso projeto CalcularMedia clicando no corpo da classe UnitTest1 com o botão direito do mouse e em Run Tests e vejamos os resultados na guia Test Results logo abaixo da tela.

Escolhemos um dos métodos testados e clicamos com o botão direito do mouse e escolhemos então Code Coverage results.

Navegando entre as opções verificamos informações como Not Covered (Blocks) blocos não cobridos, e Covered(Blocks) blocos cobertos, ali você tem a informação do percentual de código coberto em sua classe, ou seja, todo o código foi testado e todas as possibilidades atingidas ou não, no nosso caso, apenas 85.19% to total foram cobertas conforme abaixo.

Vocês podem perceber que o Método CalcularMedia() foi totalmente testado, enquanto os demais métodos faltaram 20% de se código a ser coberto, vamos verificar o porque?!

Dando dois cliques em um dos métodos podemos então verificar qual trecho de código não foi coberto conforme imagem a seguir.

O que acabamos de constatar é que nossa regra de caso o contador de provas, conforme havíamos definido no escopo do projeto na primeira parte, seria que caso o contador atingisse número superior a quatro, dispararíamos uma exceção, e esta parte não foi testada, o que temos que fazer agora é criar um método que force tal situação, você consegue resolver e ter 100% dos testes???
Boa sorte então \o/, qualquer coisa, chamae…

Aproveite e visite meu site pessoal http://aldocosta.com.br

 

Testes Unitários com C#


Testes unitários visam automatizar os testes para suas classes de maneira integrada onde todos os métodos sejam testados ao mesmo tempo, garantindo assim o funcionamento de todo projeto.


“Utilizaremos Visual Studio 2010 Ultimate em uma aplicação C# do tipo Class Library, mas acredito que outras versões com exceção da Express, podem ser utilizadas. A proposta deste exemplo é testar uma classe de regras de negócio de calculo de media de aluno”

Antes de mais nada, simularemos uma documentação bem simples para nosso projeto que servirá para criarmos nossos testes.

CALCULO DE MÉDIA DE ALUNO

Nome da classe: CalcMedia

Objetivo: Calcular média de um aluno inserindo notas de quatro provas, inserir pontos negativos e positivos. Esta classe deverá conter o nome do aluno, um contador de notas de provas, um contador de pontos, uma variável para pontos decorridos ganhos, uma variável para soma das provas.

Métodos:

InserirNotaProva(decimal nota): retorno vazio

Descrição:

Insere a nota da prova, deverá ter um controle da quantidade de notas que este método irá acrescentar, uma exceção deverá ser lançada caso o contador de provas ultrapasse quatro.

InserirPonto(decimal ponto): retorno vazio

Descrição:

O aluno poderá receber pontos decorridos de atividades extra-prova, num valor máximo de quatro pontos. Caso ultrapasse esse valor, deverá ser lançada um exceção.

CalcularMedia(): retorno decimal

Calcula a média final no aluno somando dividindo por quatro o total da soma das notas da prova;


Baseado nessa simples documentação acima, criaremos nosso projeto do tipo class library no visual studio, chamado CalcularMedia. Neste projeto deverá ser criada uma classe chamada CalcMedia com as assinaturas de métodos conforme documentação acima.

A classe deverá ficar como a seguir

Adicionaremos a solution agora nosso projeto de testes conforme sequencia a seguir.
Clique em File > Add > New Project. Nos templates, clique em Test e adicione um Test Project conforme imagem a seguir.

Adicione o nome desejado ao seu projeto de testes, compile toda solução e depois adicione ao seu projeto de testes uma referência ao projeto CalcularMedia para que possamos acessar o assembly que contém os métodos que desejamos realizar testes.
Clique com o botão direito do mouse na solução no projeto de testes na pasta References > Add Reference e na aba Projects, escolha o seu projeto e clique em ok.

O projeto de testes deverá ficar conforme figura abaixo:

Substituiremos os métodos atuais e criaremos novos para realizar testes nos métodos da classe do projeto CalcularMedia conforme imagem a seguir:


O namespace using Microsoft.VisualStudio.TestTools.UnitTesting é um framework da Microsoft criado especificamente para testes unitários, ali teremos métodos para realizarmos nossos testes.

Agora cabe ao desenvolvedor uma noção da elaboração dos testes, por exemplo: Ao se calcular uma média de quatro notas inseridas, entende-se que deve-se somar as quatro notas e dividir por quatro, então se as notas inseridas forem 5, 7, 8 e 3, teremos então somando os números o valor 23 que dividindo-se por quatro resultará na média 5.75. Então esperamos que nosso método CalcularMedia retorne 5.75, a partir dai utilizaremos métodos do framework de testes que comparará os valores retornados indicando que o método esta correto. Vamos então implementar os métodos!?

O primeiro método a ser implementado será o método InserirNotaProva, entendemos que ao inserir uma nota de prova, a variável interna SomaProvas, terá o valor da primeira nota inserida, a implementação fica como a seguir.

O que fizemos foi passar um valor que sabemos que nosso método da classe CalcTest, internamente irá armazená-lo, então verificamos se este  foi feito corretamente. Clicando no corpo do método de testes podemos utilizar o atalho ctrl+ r + t ou clicar com o botão direito do mouse e Run Test, e o projeto de testes, irá testar nosso método e abaixo no Test Result, teremos o resultado se o teste passou ou não conforme a seguir:

Implementaremos agora os dois métodos seguintes e rodaremos todos os testes ao mesmo tempo.

Implementação

Rodando os testes clicando no corpo da classe e run testes testamos todos os métodos ao mesmo tempo conforme a seguir.

Opa, um dos testes retornou erro? vamos verificar?

O teste retornou erro porque o método da classe CalcMedia não correspondeu a expectativa do método de testes…

Você consegue achar o erro e consertar??? Assim que o fizer, rode novamente.


Viram agora? perceberam o poder de testes unitários? Mas não acabou por ai, esperem a segunda parte dos testes.

 Aproveite e visite meu site pessoal http://aldocosta.com.br

jQuery AutoComplete


Criar uma caixa de pesquisa em sua página com o recurso de AutoComplete ficou bem fácil utilizando Ajax através de jQuery e CSS .


“Neste post utilizaremos Visual Studio Express 2010 em uma aplicação webforms para implementação do recurso Autocomplete em uma caixa de pesquisa com ajuda da biblioteca de JavaScript chamada jQuery e utilização de CSS.”

Algumas imagens podem ser clicadas para melhor visualização.

No final do Post disponibilizarei download do código fonte do projeto.

Iniciaremos uma aplicação no V.S. 2010 Express do tipo empty webforms com o titulo AutoCompleteJquery conforme figura abaixo.

jquery autocomplete aplication

O V.S. irá criar uma aplicação vazia conforme abaixo. jquery autocomplete 02
A primeira coisa que faremos será criar o serviço feito em c# responsável pela pesquisa e consequentemente pelo AutoComplete na caixa de pesquisa.

Com o botão direito do mouse em cima da solution adicione um novo item do tipo AJAX-enabled WCF Service com o nome de AutoComplete .svc conforme abaixo. jquery autocomplete 03

O Visual Studio criará um serviço pronto para ser consumido com a seguinte característica conforme figura abaixo.
jquery autocomplete 04
Iremos editar o serviço a fim de simular uma consulta ao banco de dados conforme figura a seguir. jquery autocomplete 05

Criaremos agora a página que conterá a caixa de pesquisa com AutoComplete.
Com o botão direito do mouse em cima do projeto iremos adicionar uma novo item do tipo webforms conforme figura a seguir jquery autocomplete 06

Desenharemos um simples layout de página conforme imagem a seguir jquery autocomplete 07 e baixaremos o plugin de jquery no link
Jquery Download e adicionaremos o arquivo em nosso projeto.

Programaremos agora a interação Ajax com jQuery e CSS para realizar o efeito de autocomplete ao pesquisar alguma coisa na caixa de texto.

Precisamos referenciar o arquivo jquery.min.js que esta em nosso projeto na tag head de nossa página web arrastando o arquivo da solution para a página em questão.
Após referenciado criaremos uma estrutura JavaScript para realizar as seguintes tarefas.

  1. Executar a chamada Ajax via jQuery.
  2. Via jQuery manipular o DOM do elemento HTML logo abaixo da caixa de pesquisa com os resultados retornados do servidor via Ajax
  3. Via JavaScript ao clicar nos elementos retornados da pesquisa preencher a caixa de pesquisa com o item clicado e retornar ao estado anterior da caixa de pesquisa.

Mas antes alteraremos novamente o layout da página inserindo alguns elementos HTML para manipularmos na interação, conforme imagem a seguir.
jquery autocomplete 08

Neste momento iremos inserir no código CSS que irá formatar elementos da página conforme figura a seguir.
jquery autocomplete 09

Finalmente o código JavaScript que irá fazer todo o trabalho.
jquery autocomplete 10

Pronto agora é só compilar e testar

Resumo
Criamos um serviço que retorna uma lista de strings e consumimos este serviço via Ajax com auxilio de jQuery e com o retorno deste serviço manipularemos o DOM da página usando CSS, jQuery e Javascript puro a fim de provermos uma lista suspensa logo abaixo a caixa de pesquisa com opções sugeridas de acordo com a digitação do usuário criando o desejado efeito autocomplete.

Link para download do projeto.

Aproveite e visite meu site pessoal http://aldocosta.com.br

jQuery Ajax Asp.Net


Realizar chamadas assíncronas ficou mais fácil com o advento da biblioteca JavaScript jQuery. Neste post demonstraremos como consumir métodos C# registrando o serviço via jQuery.


Neste artigo, demonstraremos como realizar chamadas assíncronas em sua página da web usando Ajax, consumindo métodos do servidor criado com C#.

Utilizaremos Asp.Net C# para este artigo.

No final do Post disponibilizarei download do código fonte do projeto.

O Post jQuery Ajax Asp.Net é muito parecido com o post Ajax C#, porém é utilizado com jQuery para realizar chamadas assíncronas a métodos no servidor, tendo algumas vantagens que entre elas vale destacar que o código HTML não fica sujo como acontece quando registramos métodos via ScritpManager, no post Ajax C# podemos conferir o HTML gerado quando rodamos a aplicação Asp.Net com C#. Pra não perder tempo (preguiça mesmo) eu copie a parte inicial, então não estranhem.

Você deve estar se perguntando o porque 2 técnicas parecidas serem postadas sendo que uma é melhor que a outra, a questão é que se você não souber usar jQuery ou usa outro plugin JavaScript terá alternativas. Em minha opinião a técnica do post Ajax C# é interessante para aplicações web do tipo intranet.

Com o V.S. 2010 aberto começaremos um novo projeto do tipo Asp.net Web Application conforme figura 1.0 que chamaremos de Asp.Net Ajax. Após clicar em ok o V.S. 2010 Express criará o projeto conforme a figura 2.0.

Com essa estrutura pronta partiremos para a criação dos métodos C# que serão chamados via JavaScript realizando assim o Ajax em sua página Asp.Net C#.

Clicando com o botão direito do mouse sobre a solução ou o projeto no V.S. 2010 Express conforme figura 03 adicionaremos um novo item do tipo “AJAX-enabled WCF Service” conforme figura 04.

Neste caso você pode renomear o serviço pelo nome que quiser, optamos por deixar o nome default “Service1.svc”, observe que agora construiremos nosso método em C# que será retornado ou “proxyado” para o cliente “Browser” via JavaScript. Alteraremos o método DoWork() para retornar uma string conforme figura 05

Em nossa solution, dentro da pasta Scripts encontramos o arquivo “jquery-1.4.1.js” que é a nossa biblioteca jQuery que utilizaremos para poder realizar Ajax. Adionaremos em nossa MasterPage uma referência a este arquivo conforme a figura 06.. A partir de agora utilizaremos jQuery para chamar métodos do servidor em nosso cliente (browser).

A seguir inseriremos código JavaScript da biblioteca jQuery na nossa MasterPage conforme a figura 07. Note que realizamos o seguinte procedimento:

  1. Criamos um método JavaScript chamado “DoAjax()”.
  2. Instanciamos um objeto da biblioteca jQuery chamado “jq”.
  3. No evento da página “ready” registramos uma chamada ajax.
  4. Em nossa chamada jQuery – Ajax informamos que trabalhararemos com post.
  5. Informamos o serviço que contém o método c#.
  6. Informamos a serialização “json”
  7. Informamos ao CALLBACK sucess:, o método JavaScript que acontecerá quando o evento for disparado em algum lugar chamando o método DoAjax()
  8. Aproveitamos para utilizar jQuery para a manipulação do DOM (Elemento html) na mesma chamada.

Download do projeto :Projeto jQuery – Ajax – Asp.Net

Resumo

Aproveitamos nosso post Ajax C# para montar nosso método do servidor feito com C# para montar a estrutura inicial de nosso projeto, porém a chamada Ajax foi feita utilizando a robusta biblioteca jQuery, a vantagem em relação a registrar métodos no post anterior é que a página com jQuery fica mais rápida e com menos residuos de caracteres na tela quando compilada.

Referências: jQuery Ajax
Asp.Net

Palavras chaves

jQuery – Ajax – Asp.Net C# – JavaScript – Microsoft Framework.Net – Visual Studio – HTML – Assíncrona

Aproveite e visite meu site pessoal http://aldocosta.com.br

Ajax C#

Ajax é a técnica de atualizar pedaços de uma página da Web com algumas vantagens, sendo a mais importante não atualizar a página inteira.

Leia mais sobre ajax no site W3CSchools

O intuito deste artigo é mostrar como realizar chamadas assíncronas (Ajax) na página registrando métodos do servidor para serem chamados via JavaScript sem ter a necessidade de realizar postback na página inteira atualizando apenas uma pequena porção dela.
Os requisitos para este artigo é ter o Microsoft Visual Web Developer 2010 Express instalado na máquina. Vale lembrar que as versões Express não são pagas.

Utilizaremos Asp.Net C# para este artigo.

No final do Post disponibilizarei download do código fonte do projeto.Com o V.S. 2010 aberto começaremos um novo projeto do tipo Asp.net Web Application conforme figura 1.0 que chamaremos de Asp.Net Ajax. Após clicar em ok o V.S. 2010 Express criará o projeto conforme a figura 2.0.

Com essa estrutura pronta partiremos para a criação dos métodos C# que serão chamados via JavaScript realizando assim o Ajax em sua página Asp.Net C#.

Clicando com o botão direito do mouse sobre a solução ou o projeto no V.S. 2010 Express conforme figura 03 adicionaremos um novo item do tipo “AJAX-enabled WCF Service” conforme figura 04.

Neste caso você pode renomear o serviço pelo nome que quiser, optamos por deixar o nome default “Service1.svc”, observe que agora construiremos nosso método em C# que será retornado ou “proxyado” para o cliente “Browser” via JavaScript. Alteraremos o método DoWork() para retornar uma string conforme figura 05

Finalmente registraremos o serviço no cliente (Browser) para podermos consumi-lo via JavaScript em sua página Asp.Net, para tal adicionaremos na página que desejamos realizar as chamadas assíncronas, preferivelmente na MasterPage pois temos algumas vantagens (entre elas replicar o registro do Ajax em todas páginas filhas ao invés de uma por uma), uma tag de ScriptManager conforme a figura 06, atente ao detalhe que a tag esta dentro de uma tag “Form”, agora qualquer JavaScript que inserirmos desde que abaixo da tag ScriptManager poderá chamar ou consumir o serviço criado com C# anteriormente. Para realizarmos este teste alteraremos a estrutura do HTML inserindo um elemento qualquer com ID no caso optamos por inserir um span conforme a figura 07.

Download do projeto :Projeto Asp.Net C# Ajax

Resumo

Criamos com C# um método que retorna a hora atual do servidor no formato de STRING, registramos este método C# com o ScriptManager na MasterPage da aplicação por ser uma página especial que replica suas caracteristicas a todas suas páginas filhas, criamos um método JavaScript chamado “DoAjax()” para realizar o proxy com o método C# atualizando assim um elemento do “DOM” do tipo span chamado “Chave” com o resultado do método C#. Espero que tenham gostado, qualquer dúvidas ou sugestões por favor postem abaixo, este foi meu primeiro post, espero que nos próximos a qualidade deles seja melhor pra vocês.

Abraços Aldo Costa.

Palavras chaves

Ajax – Asp.Net C# – JavaScript – Microsoft Framework.Net – Visual Studio – HTML – Assíncrona

 

Aproveite e visite meu site pessoal http://aldocosta.com.br