Introdução ao Electron – faça aplicativos desktop com HTML, JS e CSS!!

Fala pessoal, hoje vou falar um pouco sobre o Electron , mas neste caso não é a partícula de carga negativa que fica girando ao redor do núcleo atômico, mas sim de um framework que possibilita criar aplicativos desktop para os três grandes  sistemas operacionais (MacOs, Linux e Windows)  com o uso de HTML, CSS e Javascript, com isso você pode ter uma alternativa ao WPF e Windows Forms do .NET, ao JavaFX e o Swing do mundo Java.

desconectadoUma das maiores vantagens ao meu ver no uso do Electron é poder trabalhar desconetado, ou seja desenvolva seu aplicativo “Offline First” porque sempre temos que levar em conta que seu usuário não está constantemente on-line.

O Electron foi desenvolvido pelo pessoal do GitHub, mas trata-se de um projeto open-source então você pode contribuir para o projeto também.

Ele trabalha com o Chronium que é o projeto em que o Google Chrome se baseia e também usa o NodeJs para dar ao desenvolvedor Apis para o desenvolvimento.

tela13

Leia mais…

No liquidificador: Knockout + Bootstrap + Toastr.js + BootBox + Asp.NET MVC + BootsWatch + WebAPI + MongoDB

Fala pessoal, neste final de semana da páscoa aproveitei o feriado e coloquei no liquidificador várias tecnologias para “misturar” e ver o que “sai” no final.

Desta vez vou criar um sistema com Knockout, Bootstrap, BootsWatch, BootToastr.js, BootBox, Asp.net MVC, Web Api, Swagger e MongoDB.

Vamos explicar um pouco de cada tecnologia principalmente para quem não conhece:

Knockout é uma biblioteca javascript (open source) que simplifica a construção de interfaces gráficas dinâmicas, usando o padrão MVVM (Model-View-View-Model), para saber mais acesse o site oficial.

Bootstrap é um framework front-end que cria sites já com tecnologia mobile (responsivo) sem ter que digitar uma linha de CSS, muito utilizado no mercado, acesse o bootstrap para conhecer melhor.

Toastr.js é um framework javascript para exibir notificações não bloqueadoras na tela, exibe aquelas “janelinhas” verdes, vermelhas, amarelas dependendo da situação ou definição de mensagem ao usuário, mais informações podem ser obtidas no github do projeto.

BootBox é um framework para exibição de caixas de diálogo usando o bootstrap modal, bem simples de usar e bonito, entre no link do projeto para conhecer melhor, possui varios exemplos de uso.

ASP.NET MVC  bom esse é o framework MVC web da Microsoft, já deve ser conhecido de quase todos os desenvolvedores web, vou deixar o link para maiores informações.

BootsWatch trata-se de um site que disponibiliza temas free para o bootstrap, muito bacana, basta acessar o site deles e escolher o tema que você achar mais bonito e subscrever o arquivo bootstrap.min.css.

WebApi segundo a própria definição da Microsoft “é uma estrutura que facilita a criação de serviços HTTP que atingem uma ampla gama de clientes, incluindo navegadores e dispositivos móveis. ASP.NET Web API é uma plataforma ideal para a construção de aplicativos RESTful no .NET Framework.” segue o link para obter mais informações.

Swagger este é um dos meus favoritos, uso o swagger para documentar minhas api´s, ele é um projeto composto por algumas ferramentas que auxiliam o desenvolvimento de APIs Rest e gera uma ótima documentação bem como ambiente completo para os testes de sua API. Veja no link oficial da ferramenta maiores detalhes.

MongoDB bom este dispensa comentários, trata-se de um banco NOSQL que já venho falando sobre aqui no meu site, você pode acompanhar sobre ele nos dois artigos que fiz (parte 1 e parte 2), é importante que o MongoDB já esteja funcionando em sua máquina para o exemplo ok?

Bom agora é colocar tudo no “liquidificador” e ver o que sae!!

Leia mais…

Listar registros com ASP.NET MVC – parte 2

Fala pessoal, continuando a série de artigos sobre listagem de dados com ASP.NET MVC, hoje vamos pegar o exemplo da parte 1 e criar outra página com grid e paginação do Jquery DataTables.

Abaixo o resultado da minha consulta utilizando o DataTables:

img2_list_parte2

O Datatables traz para você de “graça” ordenação, filtro, alteração de quantidade de resultados por página e paginação sem muito ou quase nenhum trabalho de implementação.

Lembrando que as funcionalidades são somente para os resultados que se encontram no client, ou seja quando efetuar um filtro será apenas nos itens já inseridos na grid.

Bom cenário quando você tem uma tabela com poucos registros e pode fazer um “select full” retornando todos os registros de uma vez do banco.

Vamos a implementação, o primeiro passo é entrar no site do Datatables e efetuar o download do pacote, abra o projeto do artigo anterior e faça as referências aos seguintes arquivos:

  • datatables.min.js
  • dataTables.bootstrap.min.js
  • dataTables.bootstrap.min.css

Vamos alterar o controller TodoController e inserir mais dois métodos:

public ActionResult IndexWithDataTables()
{
   return View();
}

O método acima apenas vai retornar uma View nova.
Agora vamos criar um método responsável por efetuar a busca dos dados no repositório:

public ActionResult GetData()
{
    var listVM = ConvertListModelToListViewModel(_repository.Get());
	return Json(new { data = listVM }, JsonRequestBehavior.AllowGet);
}

O método acima será acionado via ajax pelo componente do dataTables, então
assim que carregar a página este método será acionado e irá buscar todas as tarefas no banco de dados.

Na View criada vamos adicionar os seguintes comandos:

<h4 class="text-success">Listando tarefas com o Datatables</h4>
<div style="width:90%;">
<table id="Jdatatable" class="table table-responsive table-bordered">
  <thead>
    <tr>
	<th>Id</th>
	<th>Titulo</th>
	<th>Criado em:</th>
	<th>Descrição</th>
	<th>Fechado ?</th>
	<th>Realizado em:</th>
    </tr>
   </thead>
</table>
</div>

Agora vamos inserir o bloco javascript:

<script type="text/javascript">
$(document).ready(function () {
	$("#Jdatatable").DataTable({
		"ajax": {
		"url": "/Todo/GetData",
		"type": "GET",
		"datatype": "json"
		},
		"columns": [
	        { "data": "Id", "autoWidth": true },
		{ "data": "Title", "autoWidth": true },
		{
		"data": "DataOpen", "autoWidth": true, "type": "date",
		"render": function (value) {
		if (value === null) return "";
			var pattern = /Date\(([^)]+)\)/;
			var results = pattern.exec(value);
          		var dt = new Date(parseFloat(results[1]));
			return dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear();
		}
		},
		{ "data": "Description", "autoWidth": true },
		{ "data": "Closed", "autoWidth": true },
		{
		"data": "DataClosed", "autoWidth": true, "type": "date",
		"render": function (value) {
		if (value === null) return "";
			var pattern = /Date\(([^)]+)\)/;
			var results = pattern.exec(value);
			var dt = new Date(parseFloat(results[1]));
			return dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear();
		}
		}
          ]
	});
});
</script>

Na imagem abaixo explico alguns eventos (clique nela para aumentar):

img_list_parte2

No próximo artigo vou configurar esse mesmo exemplo para trabalhar com paginação, filtros e ordenação via “server side” , veremos como montar uma paginação no Entity Framework e como utilizar no Datatables.

Pretendo subir no meu GitHub a solução final com todos os artigos desta série, aguardem!

Espero que tenha ajudado, principalmente que está iniciando os estudos em desenvolvimento web, e se ajudou comenta para incentivar.

Um abraço.

React.js : uma introdução com o famoso Hello Word com ASP.NET MVC

O ReactJS é uma biblioteca para construção de interfaces de usuários com JavaScript concorrente mais ou menos ao Angular e Knockout, digo mais ou menos porque o ReactJS está no patamar de biblioteca e os outros já estão como frameworks, ainda vou estudar mais a fundo isso.

Foi criado pelo Facebook e liberado pela primeira vez em 2013, hoje é usado também por empresas como Instagram, Yahoo, Github e até o NetFlix. Segundo o que estou lendo na internet o ReactJS é mais eficiente e tem uma biblioteca mais veloz que seus concorrentes.

Esse estudo está na página do pessoal do The Dapper Developer onde eles fazem uma comparação entre ReactJs, Angular e Knockout, bem interessante e vale a pena dar uma olhada.

É interessante dar uma olhada nesse framework, ele é utilizado pelo pessoal do Codecademy, e essas ferramentas que dão certo em cases de sucesso como o Codecademy sempre me chamam a atenção no sentido de estudar e ver como posso utilizar nos meus projetos do dia a dia.

É o mesmo caso do Dapper para acesso a dados que começei a utilizar depois de descobrir que foi criado e utilizado pelo pessoal do StackOverFlow.

A infoQ tem um livro disponivel em pdf para download que explica o cenário de uso do ReactJS no projeto da Codeacademy, muito legal é só baixar e ler o artigo.

Bom vamos ao exemplo básico:

  • Crie um novo projeto no Visual Studio do tipo WebApplication;
  • Instale o ReactJS através do comando Install-Package react.js lá no Package Manager Console;
  • Instale o ReactJS.NET através do comando Install-Package React.Web.Mvc4;
  • Adicione uma pasta nova na pasta de Scripts chamada jsx é nesta pasta que irão ficar os arquivos do reactJs, eles possuem uma extensão .jsx;
  • Crie na pasta um arquivo chamado HelloWord.jsx;
  • Dentro do arquivo escreva o seguinte código:
var HelloWorld = React.createClass({
    render: function(){
        return (
            <div>Hello {this.props.name}</div>
            );
    }
});
React.render( <HelloWorld name="World" />, 
    document.getElementById('container'));
  • Altere o arquivo index.cshtml para o código abaixo:
@{
    ViewBag.Title = "Index";
}
<h2 id="container"></h2>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/react/react.min.js"></script>
<script src="~/Scripts/jsx/HelloWorld.jsx"></script>

Rode a aplicação e veja o resultado, clique com o botão direito do mouse e veja o código fonte da página, se você clicar no arquivo HelloWorld.jsx deve aparecer o arquivo jsx compilado pelo ReactJS.NET:

reactjsImg4

Agora vamos buscar a uma informação do servidor usando JQuery e uma chamada Json.
Altere o código do arquivo HelloWord.jsx para:

var HelloWorld = React.createClass({
 
getInitialState: function() {
    return { name:''};
  },
componentDidMount: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: function(data) {
        this.setState(data);
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, 
        err.toString());
      }.bind(this)
    });
  },
    render : function(){
        return (
        <div> Hello {this.state.name} </div>
        );
    }
});
 
React.render(
    <HelloWorld url="/home/getname" />,
    document.getElementById('container')
);

Ao rodar novamente o código veremos que a mensagem mudou, agora buscando a informação via Ajax em um controle
que devolve o resultado em json, esse retorno pode ser observado na janela do console, na imagem abaixo utilizo o firebug para ver o retorno.

reactjsImg3

No código foi criado um objeto com o React com o nome de HelloWorld, este objeto possui duas funções: getInitialState que é executado apenas uma vez durante o ciclo de vida do componente, e a função componentDidMount que efetivamente efetua a chamada ao método do controler e retorna a informação via json. Esta função é executada toda a vez que o componente é processado.

O comando React.render chama a função HelloWord passando a url do controller e o id do elemento html onde queremos renderizar o resultado.

Este é o primeiro post do meu estudo, vamos voltar a falar sobre o ReactJS com outros exemplos, como disse no começo do post estou começando a estudar e pretendo ir fazendo exemplos mais complexos e dividindo com todos os resultados.

O código fonte se encontra no meu GitHub.

Este artigo foi originalmente escrito em TechBrij

Agradeço a todos..e “Got some give some” quem se beneficia tem que contribuir!!!

Como usar o LocalStorage?

Fala pessoal!! vamos a mais um exemplo, agora procuro demonstrar como utilizar a API LocalStorage, o uso dessa API vem de encontro com o conceito de Offline First ou seja desenvolver pensando primeiramente em tecnologias offline, principalmente no mundo Mobilie.

É muito comum hoje quando você baixa um aplicativo qualquer a primeira coisa que ele te pede é uma conexão com a internet. Pronto se você não tem um pacote de dados bacana, ou não está conectado em nenhuma rede wi-fi, o app não irá funcionar. Este pode ser um bom motivo para que o usuário exclua seu aplicativo.

Basicamente os passos para construir aplicativos off-line first são:

  • A aplicação deve detectar o estado “off-line”;
  • Armazenar dados off-line (ae entra a Web Storage API);
  • Sincronize com um servidor assim que detectar acesso, considere contruir uma solução para organizar pequenos pacotes de dados para o envio.

Também neste exemplo procuro mostrar o uso de componentes Jquery como o Jquery Validation, Jquery Datatables e o Jquery Growl além do Bootstrap usado no layout, tudo muito simples para o perfeito entendimento.

Foi criado um CRUD (create, read, update e delete) para manter um contato, estes contatos serão mantidos em LocalStorage, não fiz nenhum processamento para enviar ao servidor neste caso.

img

Baixe os código fonte no meu GitHub.

Espero que ajude a quem estiver estudando esses conceitos e se ajudou comenta ae!
Abraço!

Mentoria de Javascript

Fala pessoal!! bom hoje foi a última sessão de mentoria sobre Javascript, quero agradecer a todos que participaram deste módulo, hoje os grupos apresentaram o trabalho de final que consistia em criar uma
lista de contatos/telefone usando a feature de localStorage do browser.

Ficou muito bacana, eu também construi minha versão da lista de contatos/telefones e vou criar aqui no meu blog
um post sobre esse exemplo, onde falei bastante sobre Bootstrap, Jquery e plugins jquery como Jquery DataTables, Jquery Validation, JGrowl para mensagens.

IMG_0082

IMG_0081

Agora vamos rumo ao próximo módulo C# com Orientação a objetos!!!

Criar range de datas com Jquery

Fala pessoal, essa dica vai para quem precisa usar em seu sistema um range de datas onde o usuário deve escolher a data inicial e a data final para alguma ação de seu sistema.

A primeira coisa é referenciar as bibliotecas do jQuery e jQuery Ui e jQueryUI CSS.

Crie na sua página html os seguintes campos:

<br/>
From: <input type="text" id="txtFromDate" />
To: <input type="text" id="txtToDate" />

Crie o seguinte script:

(document).ready(function(){
    $("#txtFromDate").datepicker({
        numberOfMonths: 2,
        onSelect: function(selected) {
          $("#txtToDate").datepicker("option","minDate", selected)
        }
    });
    $("#txtToDate").datepicker({ 
        numberOfMonths: 2,
        onSelect: function(selected) {
           $("#txtFromDate").datepicker("option","maxDate", selected)
        }
    });  
});

Se tudo der certo você deverá ver uma tela mais ou menos assim:

rangeDatas

Este exemplo foi retirado da internet, precisei fazer algo parecido em um sistema que estou trabalhando, só estou replicando para ajudar alguém que precise.

O post original se encontra aqui.

Detectar se o caps lock está ativado com Jquery

Fala, pessoal!!
Estou desenvolvendo um projeto onde faço o login pelo Active Directory e ele considera letras maiúsculas e minúsculas na senha e quando o caps lock está ativado temos problemas pois o AD pode não encontrar o usuário com a senha informada se o valor estiver todo em maiúsculo ou todo em minúsculo.
E por exemplo no meu teclado a luz do caps lock fica em uma posição meio escondida, abaixo está uma solução para implementar a visualização em uma tela web.

A ideia é que apareça um aviso ao lado ou embaixo do campo de senha:
login_capslock

Para este efeito crie na sua página um elemento aonde você quer criar o aviso:

<span id="error_capslock">Caps Lock is ON.</span>

Adicione o CSS:

#error_capslock {
	border: 1px solid #FFFF66;
	background-color: #FFFFCC;
	display: inline-block;
	margin-left: 0px;
	padding: 3px;
	display: none;
}

E por fim o javascript:

$(function () {
   var isShiftPressed = false;
   var isCapsOn = null;
   $("#Password").bind("keydown", function (e) {
      var keyCode = e.keyCode ? e.keyCode : e.which;
      if (keyCode == 16) {
      isShiftPressed = true;
   }
   });
   $("#Password").bind("keyup", function (e) {
      var keyCode = e.keyCode ? e.keyCode : e.which;
      if (keyCode == 16) {
         isShiftPressed = false;
      }
      if (keyCode == 20) {
         if (isCapsOn == true) {
             isCapsOn = false;
             $("#error_capslock").hide();
         } else if (isCapsOn == false) {
             isCapsOn = true;
             $("#error_capslock").show();
         }
      }
      });
      $("#Password").bind("keypress", function (e) {
          var keyCode = e.keyCode ? e.keyCode : e.which;
          if (keyCode >= 65 && keyCode <= 90 
&& !isShiftPressed) {
             isCapsOn = true;
             $("#error_capslock").show();
          } else {
         	$("#error_capslock").hide();
         }
         });
   });

Não podemos esquecer de colocar a chamada ao jquery no inicio da página ok? pode ser desta forma:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.8.3/jquery.min.js"></script>

Bem é isso ae!!

Abraços.