Você provavelmente, já precisou inspecionar sua página remotamente para fazer a análise de um problema de seu sistema web em um dispositivo móvel e já deve ter acontecido do problema não acontecer no seu navegador e persistir no dispositivo. Já pensou você inspecionando sua página remotamente? É isso que vou mostra para você no post de hoje

[wp_ad_camp_3]

Há algum tempo atrás uns amigos meus precisaram de resolver um caso assim, então eles vieram me perguntar se havia alguma ferramenta para fazer esse tipo de análise. Na época, eu indiquei para eles o uso do chrome://inspect e ele resolveu, porém tiveram que instalar drivers do android, habilitar depuração, aquela burocracia toda. Agora aconteceu o mesmo só que dessa vez é no Safari, e só no safari do iphone, como não tinha um MAC Book tive que ir a campo procurar alguma ferramenta para me ajudar, então encontrei o Weinre com essa ferramenta o modo de depurar tanto android quanto ios se tornou extremamente simples. E estou escrevendo esse post para mostrar a vocês como usar essa incrível ferramenta.

Oque é Weinre?

[wp_ad_camp_1]

Weinre é uma aplicação command-line escrita em NodeJS, ela cria um console virtual acessado via browser. Assim você pode continuar inspecionando sua página remotamente. Sua integração é muito simples, e seu uso é semelhante as ferramentas para desenvolvedores do firefox.

Como usar?

Primeiro é necessário ter instalado o NodeJS com  o seu gerenciador de pacotes o NPM.

Após ter o NodeJS instalado você precisa abrir seu terminal e digitar os comandos abaixos (para windows, desconsiderar o sudo apenas execute o prompt de comando como administrador):

$ sudo npm install -g weinre

Após instalado, agora você tem o weinre disponível em sua command-line, agora é hora de iniciar ele. Para isso digite o comando abaixo em seu terminal:

weinre --boundHost=0.0.0.0

Após isso o weire vai ficar escultando na porta 8080, e a seguinte mensagem vai aparecer:

2017-06-01T14:03:39.322Z weinre: starting server at http://0.0.0.0:8080

[wp_ad_camp_2]

Agora é só abrir o seu browser no endereço http://localhost:8080/client/#meuprojeto, agora é só acessar uma página padrão do seu projeto e colocar o código abaixo em seu cabeçalho:

<script src="http://SEU_IP_LOCAL:8080/target/target-script-min.js#anonymous"></script>

E pronto é só acessar pelo seu dispositivo e depurar pelo seu computador!

Observação: no script que você vai colocar em seu projeto, lembre-se de colocar o endereço de IP do seu computador e também libere o weinre no firewall quando solicitado.

Obrigado, espero que tenha ajudado!

The post Inspecionando sua página remotamente appeared first on Hiago Silva Souza.

Olá, seja bem vindo a mais um post, Arduíno + Javascript = J5!

Eu sou amante do javascript e acredito que o mesmo não só é o nosso presente como vai ter grande presença no futuro da tecnologia (opinião minha), e para aumentar ainda mais minha paixão pela linguagem aparece o J5.

O que é o J5 (Johnny Five)?

[wp_ad_camp_1]

O J5 (Johnny Five) é uma biblioteca em NodeJS que possibilita a programação de projetos não só em Arduino como em diversas  placas eletrônicas fazendo uso da linguagem JavaScript.

O que é o Arduíno?

O Arduino é uma plataforma para prototipagem de hardware livre (isso mesmo, livre você não precisa pagar royalties ou direitos autorais para usa-lo em seus projetos) ele é projetado com um microcontrolador Atmel AVR que já possui suporte de I/O (Entrada e Saída) embutido. Sua linguagem de programação tem origem do C/C++.

Arduíno + Javascript = J5!

O motivo desse post é trazer uma novidade para você. Antes para começar a fazer o uso do Arduíno ou de outras plataformas, muitas vezes era necessário fazer o estudo de linguagens como C e C++.  A comunidade acabou chegando com o J5 (Johnny Five), para ingressar o javascript no mundo da eletrônica.

Fazendo um Olá Mundo com J5 (Johnny Five)!

[wp_ad_camp_2]

Acabei de fazer meu primeiro experimento e a sensação foi ótima pois não necessitei fazer uso de uma linha de C/C++.

Primeiro é necessário instalar o driver e o IDE do Arduíno que encontra-se disponível em (https://www.arduino.cc), após fazer isso plugue o USB de sua placa em seu computador e abra o IDE do Arduíno. Assim que o IDE do Arduíno estiver aberto vá até o menu: Arquivos > Exemplos > Firmdata >  StandardFirmdataPlus (conforme imagem abaixo):

Após isso o código do StandardFirmdataPlus vai aparecer em seu IDE. Depois basta clicar em Upload e fechar o seu IDE do Arduíno:

Agora vamos para melhor parte o JavaScript né =)!

Com o NodeJS instalado crie uma pasta no meu caso vou estar criando a pasta Arduino-JohnnyFive em C:\.

Com o prompt de comando/terminal, vamos navegar até a nossa pasta do projeto e instalar a dependência do JohnnyFive:

cd C:\Arduino-JohnnyFive
npm install johnny-five --save

Assim que acabar a instalação do J5 crie um arquivo chamado ola-mundo.js com o conteúdo abaixo:

var five = require('johnny-five');
var placa = new five.Board();

placa.on("ready", function() {
        //Assim que a placa for disponível eu mando o pino 12 emitir/omitir energia a cada 500 mile segundos.. em outras palavras fizemos um pisca pisca..
	var led = new five.Led(12);
	led.blink(500);
});

Após finalizar o seu script basta executa-lo usando o nosso NodeJS. Para isso digite a linha abaixo dentro da pasta de seu projeto:

node ola-mundo.js

E pronto seu olá mundo com J5 está pronto! Após executar esse comando, o console do J5 vai ficar disponível para você fazer uso dele =)

Então é isso, espero que tenha gostado do post!
Você pode estar lendo sobre outros métodos do J5 em seu website oficial, ou em futuros posts no meu blog!
Me siga no twitter e fique por dentro das novidades =)

Links:
Johnny Five: http://johnny-five.io/
Arduíno: https://www.arduino.cc/
NodeJS: https://nodejs.org/

The post Novidade: Arduíno + JavaScript = J5 <3 appeared first on Hiago Silva Souza.