Tag: Javascript

Integrando aplicação web com dispositivo local

As aplicações web são cada vez mais comuns no nosso cotidiano, pois elas oferecem diversas vantagens se comparadas com as aplicações desktop, como portabilidade, facilidade de atualização, escalabilidade, etc. Porém, como uma aplicação web roda diretamente no navegador do usuário, ficamos limitados aos recursos que ele nos disponibiliza e também às suas restrições.

Vamos supor que nós desenvolvemos uma aplicação web de vendas para um estabelecimento comercial. Em um determinado momento essa aplicação precisará emitir cupom fiscal para os clientes e, no caso de São Paulo, será necessário um dispositivo SAT para a emissão dessas notas. A comunicação com o dispositivo SAT é feita através de uma DLL (no caso do Windows), porém como fazemos para que nossa aplicação web se comunique com esse dispositivo, visto que ele está instalado localmente no computador do usuário e o navegador não permite acessá-lo diretamente?

Algumas soluções que podemos pensar são:

  • Criar uma aplicação desktop que funcione como um servidor web local na máquina do usuário e então a aplicação web se comunica com essa aplicação desktop utilizando o protocolo HTTP que então se comunica com o dispositivo local;
  • Criar uma extensão para o navegador, assim a aplicação web irá se comunicar com a extensão através do protocolo Messaging, a extensão irá se comunicar com uma aplicação desktop através do protocolo Native Messaging que então se comunica com o dispositivo local;
  • Criar uma aplicação desktop que fique verificando em um intervalo predeterminado se há notas para serem emitidas através de uma API disponibilizada pela aplicação web.

Neste artigo vamos implementar a primeira solução. Para isso, iremos desenvolver uma aplicação web simples e uma aplicação desktop que irá funcionar como um servidor web local que fará a ponte entre a aplicação web e um dispositivo SAT.

Código fonte disponível em: https://github.com/rafaelcouto/integrando-aplicacao-web-com-dispositivo-local.

Chat simples utilizando Websocket, Vue.JS e PHP

O Websocket  é um protocolo que nos permite abrir uma comunicação bidirecional com o servidor utilizando um único soquete TCP (Transmission Control Protocol) através do navegador. Sendo assim, tanto o cliente quanto o servidor podem enviar informações entre si a qualquer momento. Neste artigo, veremos como implementar um simples aplicativo de chat utilizando este protocolo.

No lado cliente utilizaremos o Vue.JS para facilitar a construção da interface do chat, além de manter um código mais organizado.

No lado servidor utilizaremos o Ratchet que é uma biblioteca PHP que nos permite construir um servidor de Websocket de um jeito descomplicado.

Confira o exemplo em funcionamento, clicando aqui.

Menu dinâmico com submenus infinitos utilizando AngularJS e PHP

Neste artigo veremos uma maneira de construir um menu dinâmico, ou seja, no cadastro do menu será definido o menu superior e através de um método recursivo construiremos o menu completo hierarquicamente, permitindo um número “infinito” de submenus.

No lado servidor iremos utilizar PHP para buscar os menus no banco de dados e organizá-los em um vetor de forma hierárquica.

No lado cliente iremos utilizar AngularJS para construir o menu visualmente com base nos dados retornados pelo servidor.

Imagem 1 – Resultado final

Consulta dinâmica com paginação utilizando AngularJS e PHP

Neste artigo pretendo mostrar como fazer uma consulta de registros completamente dinâmica, ou seja, sem a necessidade de recarregar a página para filtrar ou paginar os registros. Utilizaremos como exemplo uma simples consulta de clientes onde o usuário poderá filtrá-los e navegar entre as páginas.

No lado cliente iremos utilizar o AngularJS para facilitar a comunicação com o servidor, além de manter um código mais organizado e reutilizável. Atualmente já temos o Angular 2, porém ainda gosto da simplicidade do AngularJS e acredito que se encaixa melhor no propósito deste artigo.

No lado servidor iremos apenas utilizar uma biblioteca de Query Builder para montarmos nossa query de consulta com o banco de dados. Hoje em dia é muito comum a utilização de um Query Builder em frameworks e no nosso caso vai facilitar muito a paginação dos registros.

Confira o exemplo em funcionamento, clicando aqui.

Redimensionar imagem antes de enviar com Javascript

Normalmente, quando fazemos o upload de uma imagem nós precisamos redimensiona-lá para reduzir seu tamanho. Esse processo normalmente é feito do lado servidor, ou seja, enviamos a imagem na sua forma e tamanho original e então redimensionamos no servidor utilizando PHP, por exemplo.

Porém, em um aplicativo de galeria de fotos, por exemplo, o usuário normalmente baixa as fotos (em alta resolução) de sua câmera e quer em seguida enviar para o aplicativo. Supondo que ele deseja enviar 200 fotos, cada uma com 5 MB, seria necessário fazer o upload de 1 GB de dados para o servidor, para que então possamos reduzi-las em um tamanho viável.

Sendo assim, pretendo apresentar nesse artigo uma solução para este problema. Vamos ver como redimensionar a imagem antes de enviar ao servidor, utilizando Javascript. Para isso faremos um formulário para envio de várias imagens que serão salvas em uma pasta no servidor.

Confira o exemplo em funcionamento, clicando aqui.

Upload dinâmico com PHP/jQuery

Olá pessoal, tudo certo? Várias pessoas me perguntam como fazer upload de arquivos com ajax e hoje pretendo apresentar uma solução para isso. Na verdade, não se trata de um upload com ajax, mas sim um upload dinâmico, porém para um usuário comum isso é indiferente.

A solução é simples e conhecida: fazer um iframe contendo um campo do tipo file, fazemos o envio desse arquivo dentro do iframe e então com a ajuda do jQuery recuperamos as informações desse arquivo e trazemos para a página pai. Nesse artigo irei utilizar anexo de arquivos como exemplo.

Confira o resultado final

Consulta interativa sem refresh com AJAX

Fala pessoal, como o artigo de AJAX vem sendo muito acessado, resolvi fazer outro. Nesse artigo nós iremos aprender como fazer consultas no banco de dados sem a necessidade de refresh na página. Irei utilizar como exemplo, um simples “sistema de noticias”, onde cadastraremos noticias no banco de dados e através de um formulário faremos a busca de uma determinada noticia e exibiremos seu conteudo. Vamos lá!

Validação de campos sem refresh com AJAX

Nesse artigo iremos desenvolver um formulário da qual o usuário deverá preencher com seus dados, e quando ele tirar o foco do campo iremos verificar se o que foi digitado tem relação com o que o campo pede. Tudo isso será feito com a tecnologia AJAX, que nos permite fazer requisições com o servidor sem a necessidade de atualizar a página. Os arquivos utilizados aqui estão disponíveis para download no final do artigo.