O que é Error Tracking?

[wp_ad_camp_3]

Error Tracking é o ato de você rastrear erros. Aplicado na área de software o “Bug Tracking” é um aplicativo de software projetado para ajudar na garantia da qualidade de software. Ter um sistema de rastreamento de bugs é extremamente valioso no desenvolvimento de software, e eles são usados extensivamente por empresas que desenvolvem produtos de software.

Existem sistemas para gerir erros como o MantisBT mas hoje vamos falar de um carinha “diferente”. Apesar do MantisBT ser uma ferramenta muito popular todo o seu processo querendo ou não inicia com a iteração do usuário e nosso objetivo no post é descobrir bugs antes dos clientes reportarem ou pelo menos descobrir o máximo possível.

O que eu ganho com isso?

Podemos começar com tempo? Sim né, tempo é dinheiro! Se você diminui tempo para resolver problemas, automaticamente ganha tempo para criar novas soluções. Após isso acredito que á confiança de seus clientes, já pensou um cliente seu reportar um problema e você talvez já ter a solução? Ou melhor ainda, talvez ele nem precise reportar isso a você! Lindo né? Não podemos deixar de falar da qualidade de seu produto, pois a evolução vai ser constante.

Existem muitos ganhos poderia ficar aqui falando sobre todos eles, mas com os ganhos relatados acima já vale a pena saber mais sobre o assunto né?

Onde eu posso aplicar?

Praticamente em qualquer produto de software, seja aplicativos mobile, api’s, front-end, é escrito usando uma linguagem de programação suportada (acredite o suporte é grande) então você pode rastrear os erros fazendo uso da ferramenta. Eu já apliquei em aplicações escritas em PHP, Java, Ionic, FrontEnd’s HTML + Javascript…

Qual o trabalho para implantar?

[wp_ad_camp_2]

Posso dizer que foi uma das ferramentas mais rápidas que já implantei na vida! Menos de 15 minutos e uau ? estava rastreando tudo. Mas isso vai alem de rastrear os erros, então temos um trabalhinho em reanalisar nosso processo de software, como por exemplo. Você versiona sua ferramenta usando um VCS? Sua aplicação tem uma politica de versionamento como por exemplo o Semantic Versioning? Isso tudo é importante mas vamos deixar esses detalhes para um próximo post.

Qual ferramenta é essa, fala logo Hiago ?!

Apresento a vocês o Sentry ele atende tudo o que mencionei de forma simples, clara e objetiva! O Sentry é uma plataforma de rastreamento de erro de código aberto que fornece lógica completa de aplicativos, contexto profundo e visibilidade em toda a pilha em tempo real. Pela primeira vez, os desenvolvedores podem corrigir erros em todos os estágios do ciclo de vida do produto, bem antes dos usuários encontrarem um problema.

Vamos colocar a mão na massa?

Então vamos ver isso funcionando né pessoal, muito papo e pouca ação ninguém gosta disso. Para o exemplo a seguir eu gostaria de deixar umas coisas claras.

1. O Sentry é gratuito caso você queira baixar o sistema e hospedar ele por conta própria, mas ele oferece serviços em cloud e isso é pago (mas tem uma conta free com algumas limitações). Para mostrar o funcionamento, vou estar fazendo o uso da conta free deles.
2. Capturar informações do usuário sem seu consentimento “mesmo que o produto seja seu” pode causar problemas jurídicos, então deixe bem claro isso em sua política de privacidade e consulte o jurídico de sua empresa.

Agora que já sabemos essas informações, vamos lá fazer um registro no sentry e criar uma conta grátis. Após preencher os dados ele já vai perguntar em qual linguagem seu projeto está escrito, pela popularidade e facilidade vou mostrar o exemplo para rastrear erros no javascript ok? Então podem selecionar o JavaScript colocar um nome para o seu projeto e clicar em “Create Project”.

Ao finalizar esse processo você vai receber as instruções para configurar seu projeto, no nosso caso é só incluir uma tag `script` em nosso index.html e logo após executar a função do sentry para capturar os erros, acho bom lembrar que esses devem ser os primeiros scripts de sua aplicação a serem carregados… E após isso clicar em All Done.

Testando uma captura

[wp_ad_camp_1]

Agora é simples, você pode gerar um problema “proposital” e ver como ele chega no Sentry. Vou deixar o código HTML abaixo para vocês fazerem seus testes, lembrem-se de mudar a linha 6 com suas credenciais.

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>Teste Sentry - Hiago.me</title>
	<script src="https://browser.sentry-cdn.com/4.0.6/bundle.min.js" crossorigin="anonymous"></script>
	<script>Sentry.init({ dsn: 'INSIRA_SEU_DSN' });</script>
	
	<script>
		var gerarErro = function () {
			var teste = null;
			teste.Acao();
		};
	</script>
</head>
<body>
	<h1>Testando erro</h1>
	<button onclick="gerarErro()">Clique para gerar um erro</button>
</body>
</html>

Após clicarem no botão ele vai chamar um método dentro de um variável que é null e isso vai ser capturado e reportado para você ??. Conforme a imagem abaixo.

Conclusão

Com o Sentry é muito simples fazer o seu Error Tracking, ele é uma ferramenta enorme e tem muitas outras funcionalidades que não quis citar aqui no post. Essa foi uma apresentação de uma série de posts que vou fazer sobre o assunto. Espero que tenham gostado e quero que fiquem por dentro de outras dicas por isso curtam minha página no facebook =)

The post Error Tracking: Localizando bugs antes de seus clientes ? appeared first on Hiago Silva Souza.

Gulp

O Gulp é um kit de ferramentas para automatizar tarefas massantes/demoradas no fluxo de trabalho do desenvolvimento, com ele é possível automatizar essas tarefas de maneira simples e confiável.

Preparando o ambiente

[wp_ad_camp_3]

Primeiro você deve instalar em seu projeto ionic as dev-dependencies abaixo:

npm install --save-dev gulp run-sequence shelljs

Criando sua KeyStore

A keystore é única, ela é quem garante que você e somente você consiga fornecer uma atualização segura para seus usuários.

Como a KeyStore é gerada uma única vez, não vejo motivos para automatizar no processo do Gulp. A Keystore é o segundo passo do “Publishing your app“. Entre no diretório de sua aplicação e na mesma pasta de seu package.json, execute o comando abaixo informando os seus dados e criando uma senha que você vai usar depois na nossa tarefa do Gulp. Mantenha a mesma senha, tanto para o keystore quanto para o alias.

keytool -genkey -v -keystore chave-distribuicao.keystore -alias ID_DO_SEU_CONFIG_XML -keyalg RSA -keysize 2048 -validity 10000

Note que no comando acima tem a informação ID_DO_SEU_CONFIG_XML essa informação deve ser substituída pelo id que você colocou no seu config.xml, o padrão para os id do config.xml é br.com.seuappsite.app.

Package.Json

[wp_ad_camp_2]

Agora vamos editar nosso package.json, e vamos adicionar um novo valor dentro dos scripts. Crie uma nova chave com o nome “build:release” com o valor “gulp release“.

Gulpfile

Agora precisamos criar um arquivo chamado gulpfile.js no mesmo diretório do seu package.json ele é quem vai fazer todo o trabalho de executar o “ionic cordova build –prod –release”, e os outros passos para assinar e alinhar o seu aplicativo. E o resultado final vai ser o seu APK pronto para distribuição na pasta dist.

Conteúdo do Gulpfile.js:

const gulp = require('gulp'),
      fs = require('fs'),
      path = require('path'),
      runSequence = require('run-sequence'),
      shelljs = require('shelljs'),
      config = {
           pwd: "SENHA_ESCOLHIDA_NA_CHAVE",
           alias: "ID_DO_SEU_CONFIG_XML",
           keystore: "chave-distribuicao.keystore"
      };

gulp.task('release', function () {

    const apks = fs.readdirSync('./dist');
    for(apk of apks) {
        // verificando apks não assinados
        if(apk.indexOf('.apk') > -1) {
            fs.unlinkSync(`./dist/${apk}`);
        }
    }

    if(config.pwd === 'keystore_password' || config.pwd === '') {
        console.error('Edite o gulpfile.js e informe a senha de sua keystore.');
        return shelljs.exit(1);
    }

    runSequence('compilar-release', 'assinar-apk', 'alinhar-apk', function () {

    });
});

/**
 * Compilo com a flag --prod e --release no ionic
 */
gulp.task('compilar-release', function () {
    const out = shelljs.exec('ionic cordova build android --release --prod --no-interactive', {silent:true}).stdout;
    const buildReturn = out.split('Built the following apk(s):');

    // verifico se o build deu certo
    if(buildReturn.length > 1) {
        const apks = buildReturn[1].replace(/\r/, '').replace(/\t/, '').split('\n'),
              realApks = [];
        for(apk of apks) {
            // recupero os apks releases gerados
            if(apk.indexOf('release-unsigned.apk') > -1) {
                realApks.push(apk);
            }
        }

        // verificando se a pasta dist existe.
        if(!fs.existsSync('./dist')) {
            fs.mkdirSync('./dist');
        }

        // movendo apks para a dist
        for(apk of realApks) {
            let splitter = "/";
            if(apk.indexOf("\\") > -1) {
                splitter = "\\";
            }

            let fileName = apk.split(splitter);
            fileName = fileName[fileName.length - 1];

            fs.copyFileSync(apk, './dist/' + fileName);
            fs.unlinkSync(apk);
        }
    } else {
        // erro no build
        shelljs.exit(1);
    }
});

/**
 * Assina o APK com release
 */
gulp.task('assinar-apk', function () {
    const apks = fs.readdirSync('./dist');
    for(apk of apks) {
        // verificando apks não assinados
        if(apk.indexOf('release-unsigned.apk') > -1) {
            let signCommand = `jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore ${config.keystore} -storepass ${config.pwd} -keypass ${config.pwd} ./dist/${apk} ${config.alias}`;
            const signCommandResult = shelljs.exec(signCommand, {silent:true}).stdout;
            console.log(signCommandResult);
        }
    }
});

/**
 * Assina o APK com release
 */
gulp.task('alinhar-apk', function () {
    let bdtools = process.env.ANDROID_HOME + path.sep + 'build-tools' + path.sep + fs.readdirSync(process.env.ANDROID_HOME + path.sep + 'build-tools')[0] + path.sep;
    console.log(bdtools);
    const apks = fs.readdirSync('./dist');
    for(apk of apks) {
        // verificando apks não assinados
        if(apk.indexOf('release-unsigned.apk') > -1) {
            let alignCommand = `"${bdtools}zipalign" -v 4 ./dist/${apk} ./dist/${apk.replace('-release-unsigned.apk', '')}.apk`;
            const alignCommandResult = shelljs.exec(alignCommand, {silent:true}).stdout;
            fs.unlinkSync(`./dist/${apk}`);
            console.log(alignCommandResult);
        }
    }
});

Testando

[wp_ad_camp_1]

Agora para gerar e assinar seus apks basta você executar o comando abaixo:

npm run build:release

Obrigado pessoal, espero que o conteúdo seja útil para vocês.

[27/11/2018] Edição: Adicionei na linha 32 do Gulpfile.js o parâmetro –no-interactive para corrigir o problema de travar a compilação pelo fato da CLI do ionic perguntar se você deseja fazer a atualização.

The post Gulp + Ionic: Automatizando Release no Android appeared first on Hiago Silva Souza.

Configurando seu VSCode

[wp_ad_camp_3]

1. Primeiro abra seu projeto com o Visual Studio Code após isso vá até o menu de Debug (ctrl + shift + D).
2. Segundo clique sobre a engrenagem ao lado do combobox.
3. Terceiro clique sobre a opção NodeJS

Após concluir o terceiro passo vai ser aberto um arquivo chamado launch.json (caso pergunte alguma outra informação selecione algum modelo do NodeJS) e substitua o conteúdo que tem nele pelo conteúdo abaixo:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Depurar Projeto",
            "protocol": "inspector",
            "args": ["${workspaceRoot}\\src\\main.ts"],
            "cwd": "${workspaceRoot}",
            "runtimeArgs": [
                "-r",
                "ts-node/register"
            ],
            "internalConsoleOptions": "openOnSessionStart"
        }
    ]
}

Agora é só salvar o conteúdo e seu VSCode já vai estar configurado para depurar aplicações NodeJS + TypeScript usando o Framework NestJS.

Depurando a Aplicação

[wp_ad_camp_2]

Agora você já pode colocar seus breakpoints em seu código (clicando no espaço antes do número da linha) pressionar a tecla F5 em seu teclado e ser feliz!

Observação: Caso não funcione a depuração, tente reiniciar o VSCode para ele ler as configuração de Debug feitas por você, comigo não foi necessário, mas pode ser que aconteça.

Conclusão

[wp_ad_camp_1]

Com pequenos passos configuramos o ambiente para facilitar nossa vida no trabalho. Escrevi esse post, pois eu fiquei um bom tempo depurando as aplicações usando o chrome://inspect e o fato de ficar alternando entre as janelas, tanto para fazer alteração de código quanto para analisar uma informação me incomodava bastante.

Obrigado e até mais 😉

The post Depurar sua aplicação NestJS com o VSCode appeared first on Hiago Silva Souza.

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.