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.

TypeScript

[wp_ad_camp_3]

O TypeScript é uma linguagem criada pela microsoft para ajudar na criação de aplicações JavaScript adicionando recursos poderosos como por exemplo: tipagem e propriedades estáticas. As classes foram introduzidas oficialmente no ecossistema do javascript no ES6 mas por razões de compatibilidade o TypeScript permite que você faça a transpilação para o ES5 para aumentar a compatibilidade do seu código.

O que é transpilação?

Transpilação nada mais é que pegar seu código e converter ele para outro em tempo de compilação ou seja, o programador escreve seu código em uma linguagem e após compilar ele converte esse código para um equivalente em outra linguagem de programação.

Problema?

[wp_ad_camp_2]

Geralmente quando desenvolvemos fazendo o uso do TypeScript seguimos a lógica de modelar todas as nossas informações (o que é sensacional e deve ser feito) e para isso geralmente seguimos nossos conhecimento de orientação a objetos e saímos criando nossas classes de modelos (as models). O problema é que o uso de classes gera um over head muito grande no código transpilado e isso aumenta o tamanho de nossos arquivos JS e com isso o tamanho de nosso aplicativo.

Abaixo deixo uma imagem de uma classe no TypeScript:

O resultado do código acima após ser transpilado seria um código mais ou menos como esse na imagem abaixo:

É muito código para uma definição de uma classe não concordam?

E a solução?

[wp_ad_camp_1]

Em JavaScript a tipagem não existe ou seja o tipo da variável é o que tem dentro dela. O TypeScript ajuda no desenvolvimento implementando controles como esses minimizando erros e melhorando a performance no desenvolvimento. Ao criar uma interface o TypeScript faz o uso dela na compilação e após isso não faz a transpilação para o JavaScript. Já as classes são definições, elas possuem métodos com regras aplicadas e isso precisa ser transpilado.

Mas calma, não se apavorem! Muitas classes realmente precisam e devem ser implementadas dessa forma mas nas classes de modelo não tem essa necessidade, afinal de contas não é comum você implementar métodos em suas models não é mesmo? Para isso podemos simplesmente substituir nossas classes de modelos por “interfaces” assim ao transpilar elas não vão gerar esse código “desnecessário” em nossa aplicação.

Abaixo deixo o exemplo de definição para a mesma classe só que fazendo uso de interface:

O resultado do código transpilado é exatamente como na imagem abaixo:

O resultado da transpilação não gera código JavaScript isso é importante porque diminui o tamanho do build e melhora o tempo de processamento para tarefas como concat e minify.

Conclusão

Uma simples mudança ajuda na diminuição de tamanho do build de nossos sistemas e melhora o seu tempo de compilação. O Angular é um exemplo que usa esse pensamento em suas bibliotecas, eles simplesmente exportam as interfaces para serem utilizadas nos projetos.

Deixo como dica o site http://www.typescriptlang.org/play/ entrem lá coloquem o conteúdo de todas as suas models e façam vocês mesmo os testes.

The post TypeScript: Interface ou Classes? appeared first on Hiago Silva Souza.

Antes de criticarmos ou falar que algo é ruim, é bom entendermos o motivo pelo qual aquilo existe.

Porque o CORS existe?

O CORS (do inglês cross-origin resource sharing) é um mecanismo que permite que os conteúdos de domínios diferentes sejam compartilhados. Ele existe para evitar que o conteúdo de um determinado domínio seja utilizado por outro sem a autorização do mesmo.

Exemplo: supondo que eu queira exibir os conteúdos do youtube em meu site, faço uma análise das requisições HTTP’s feitas pelo youtube, obtendo os parâmetros da chamada criaria uma UI para usar as informações do youtube, tirando assim proveiro dos dados deles. O CORS impediria que essa ação fosse executada na camada do navegador, ou seja é uma segurança para você!

Como funcionar o CORS?

O CORS vai analisar se o recurso que você tenta carregar está sob o mesmo domínio e porta. Com isso mesmo que você tenha sua API rodando no endereço “http://localhost:8080” e sua aplicação ionic/angular rodando em suas respectivas portas (8100/4200) ao chamar a API com toda certeza vai ter sua requisição bloqueada e vai receber a mensagem de CORS.

Quando você não está sob o mesmo domínio você vai notar na parte de redes que uma requisição http gera 2 outras chamadas. A primeira chamada usa o verbo http OPTIONS, ele é utilizado pelo navegador para perguntar ao  seu servidor/aplicação quais os tipos de requisição sua aplicação permite e é no OPTIONS que você deve informar suas configurações do CORS através de Headers.

Opções para o CORS

1. Access-Control-Allow-Origin: Header utilizado para informar quais domínios você permite que use o seu conteúdo.
2. Access-Control-Allow-Methods: Header utilizado para informar quais verbos http você permite a partir dos domínios liberados.
3. Access-Control-Allow-Headers: Header utilizado para informar quais “Headers” os domínios liberados podem enviar para você.
4. Access-Control-Max-Age: Header utilizado para informar quanto tempo é válido essas configurações de CORS.

O que não devo fazer?

[wp_ad_camp_3]

Bom acho que a primeira coisa que você deve se questionar é: Preciso realmente liberar o CORS em seu ambiente? Mesmo em aplicações ionic a liberação não é necessária. O mesmo para Angular, vendo que em produção o domínio será o mesmo (ou não rs).

Mas vamos lá, supondo que você chegou a conclusão que liberar o CORS é realmente necessário, não faça isso “Access-Control-Allow-Origin: *” ao fazer isso você está simplesmente tirando uma camada de segurança que foi criada para você. Caso você esteja rodando uma aplicação ionic (já compilada), não é necessário liberar o CORS mas caso queira liberar é necessário apenas  permitir o endereço http://localhost:8080/ que é o endereço que o ionic utiliza para carregar sua aplicação compilada ou seja a liberação correta (caso deseje fazer) é “Access-Control-Allow-Origin: http://localhost:8080“.

Outra coisa bem importante é o Access-Control-Max-Age geralmente nos tutoriais ninguém comenta sobre ele. Lembra aquela segunda requisição? A do tipo OPTIONS, então ela é feita quando expira o Access-Control-Max-Age então se você não falar para o navegador que essas definições só mudam de X em X tempos todo e qualquer request que você fizer o seu servidor vai receber duas requisições (cada browser tem seu tempo padrão). Em ambiente de desenvolvimento, geralmente desabilitamos os cache’s e com isso o Access-Control-Max-Age não vai fazer efeito. Mas em ambiente de produção é algo muito importante.

Como assim não preciso liberar o CORS para o ionic?

Sim é isso mesmo, não precisa! E já vou explicar o motivo. Quando você desenvolve seu aplicativo, você geralmente testa seu projeto seu navegador e ele implementa o Same-Origin-Policy por isso que você tem problemas com CORS e acaba fazendo tudo quanto é tipo de liberação. Porém quando o seu aplicativo é compilado para APK ou IPA o ionic de forma nativa consegue desabilitar o CORS da WebView (e eles já fazem isso).

Vale lembrar que para o iOS o ionic sempre usou o UIWebView só que agora eles migraram para o MKWebView e no iOS eles não conseguem desabilitar o CORS nessa webview em especifico =/. Então ou você faz um downgrade da webview, ou você libera o CORS para a origem “http://localhost:8080” ai é uma decisão pessoal, basta acessar a documentação com as melhorias propostas pela MKWebView e colocar na balança.

Para fazer o downgrade da WebView basta colocar o conteúdo abaixo em seu config.xml para a plataforma iOS:

<preference name="CordovaWebViewEngine" value="CDVUIWebViewEngine" />

E meu ambiente de desenvolvimento, como faço?

Então para você desabilitar a checagem do CORS em seu ambiente de desenvolvimento você pode fazer uso de uma extensão do google chrome mas eu não recomendo, tive muitos problemas com essa extensão. Ela liberou o CORS mas sempre me trouxe problema com encodings em outros sites que eu acessava.

Não quer usar a extensão?

Então vamos lá, o ionic e o angular tem um recurso bem interessante e muito pouco conhecido que tem exatamente essa função (impedir problemas com CORS) são os proxies.  É algo bem simples, mas eles são apenas para ambientes de desenvolvimento. Então não se esqueça de criar uma configuração para seu endpoint  🙂

O que é um proxy? Como ele funciona?

Um proxy basicamente é um serviço intermediário entre você e seu servidor de aplicação, ele recebe sua requisição e repassa ela para o servidor original.

Vamos criar o seguinte cenário: Tenho a url (http://localhost:8888/) rodando um backend, então vamos criar um mapeamento para informar que tudo que for chamado na uri /api seja passado para o backend.

Vamos supor que você esteja desenvolvendo em uma aplicação ionic, ao digitar o endereço http://localhost:8100/api/criar-usuario ele vai redirecionar internamente no processo do ionic serve a requisição para http://localhost:8888/criar-usuario então sua aplicação vai estar chamando uma URL que está no mesmo domínio e na mesma porta assim a Same-Origin-Policy não vai ser aplicada e você pode seguir seu desenvolvimento sem necessidade de liberar o CORS para desenvolver.

Configurando o proxy no ionic

[wp_ad_camp_2]

Para configurar o proxy no ionic basta abrir o arquivo ionic.config.json e criar uma nova propriedade chamada proxies e nela definir seus paths.

Exemplo:

{
	"name": "app-meuapp",
	"app_id": "",
	"type": "ionic-angular",
	"proxies": [{
		"path": "/api",
		"proxyUrl": "http://localhost:8888/"
	}],
	"integrations": {
		"cordova": {}
	}
}

Configurando o proxy no Angular

Para fazer a configuração de seu proxy no Angular o processo é semelhante. Para isso é necessário criar um arquivo JSON com as configurações os paths desejados. Então vamos criar o arquivo proxy.conf.json e vamos colocar o conteúdo abaixo. Após isso basta você inicializar seu projeto com o comando ng serve –proxy-config proxy.conf.json.

Observação: Recomendo que coloque esse comando na chave start do package.json assim você só vai precisar rodar o comando npm start

Conteúdo para o proxy.conf.json

{
  "/api": {
    "target": "http://localhost:8888",
    "secure": false
  }
}

Conclusão

[wp_ad_camp_1]

O CORS é um recurso de segurança muito importante e precisamos gerenciar ele de acordo com as necessidades do nosso projeto, fazendo o uso das técnicas mencionadas nesse post é possível trabalhar sem dor de cabeça e claro ter um desenvolvimento saudável e seguro.

The post Ionic & Angular: Fazendo o CORS seu amigo appeared first on Hiago Silva Souza.

O que é uma promise?

A promise é uma abstração para representar fluxos de ações em códigos assíncronos. No JavaScript é um objeto e seu resultado representa uma operação assíncrona ela pode ser resolvida ou rejeitada.

A promise possui duas maneiras para retornar a informação, são as funções de callback resolve e reject. As duas chamam métodos retornados junto a promise. Os métodos then e catch, são retornados juntos a promise e eles são responsáveis por receber os métodos de callback para a operação.

Exemplos de uma promise:

// ATENÇÃO: Exemplo em javascript puro.
saldoConta = 100;
function sacar(valor) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            if (saldoConta < valor) {
                reject("Você não possui saldo suficiente");
            } else {
                saldoConta = saldoConta - valor;
                resolve("Saldo retirado com sucesso");
            }
        }, 3000);
    });
}

// agora vamos sacar 90 reais?
sacar(90).then(function(r) {
    alert('sucesso: ' + r);
}).catch(function(e) {
    alert('erro: ' + e);
});

// agora vamos sacar mais 11 reais?
sacar(11).then(function(r) {
    alert('sucesso: ' + r);
}).catch(function(e) {
    alert('erro: ' + e);
});

É simples assim, a promessa resolve ou rejeita sua solicitação.

O que é um Observable?

[wp_ad_camp_3]

Observables fornecem suporte para a transmissão de mensagens entre editores e assinantes em seu aplicativo. Os observables ​​oferecem benefícios significativos em relação a outras técnicas para manipulação de eventos, programação assíncrona e manipulação de vários valores.

Os observables ​​são declarativos – isto é, você define uma função para publicar valores, mas não é executado até que um consumidor assine a ele. O consumidor inscrito recebe notificações até que a função seja concluída ou até que elas sejam canceladas.

Um observable pode fornecer vários valores de qualquer tipo – literais, mensagens ou eventos, dependendo do contexto. A API para receber valores é a mesma, quer os valores sejam entregues de forma síncrona ou assíncrona. Como a lógica de configuração e de desmontagem são tratadas pelo observable, o código do seu aplicativo só precisa se preocupar em se inscrever para consumir valores e, quando terminar, desinscrever. Vou deixar abaixo o exemplo de um Observable para escutar mudança da posição geográfica do usuário usando a API geolocation.

// Cria um Observable que ouve as atualizações de geolocalização
// quando um consumidor se inscreve
const locations = new Observable((observer) => {
	// Obtenha os próximos retornos de chamada e erros. Estes serão passados quando
	// o consumidor assina.
	const {
		next,
		error
	} = observer;
	let watchId;

	// a API geolocation checa valores para publicar.
	if ('geolocation' in navigator) {
		watchId = navigator.geolocation.watchPosition(next, error);
	} else {
		error('Geolocation not available');
	}

	// Quando o consumidor cancelar a assinatura, limpe os dados prontos para a próxima assinatura.
	return {
		unsubscribe() {
			navigator.geolocation.clearWatch(watchId);
		}
	};
});

// Chame o subscribe() para ouvir as atualizações.
const locationsSubscription = locations.subscribe({
	next(position) {
		console.log('Posição Atual: ', position);
	},
	error(msg) {
		console.log('Erro ao recuperar localização: ', msg);
	}
});

// Para de ouvir após 10 segundos
setTimeout(() => {
	locationsSubscription.unsubscribe();
}, 10000);

Requisições HTTP

[wp_ad_camp_2]

Agora que já vimos sobre promises e sobre os observables, vamos imaginar eles aplicados em uma requisição HTTP. Saindo um pouquinho da caixa, requisições HTTP são utilizadas constantemente (obvio né? kkk) elas além de resolver e rejeitar tem uma série de fatores que podem acontecer em seu ambiente externo ou interno que necessitam de tratativas especiais.

Requisições HTTP podem falhar por problemas de conexão, requisições HTTP podem nos informar sobre seu progresso, requisições HTTP podem ser canceladas…

Sua requisição falhou, e agora?

Podemos dizer que é comum termos requisições que não são concluídas, quando isso ocorre geralmente mostramos um erro para o usuário ou então implementamos algum método para tentar novamente. Com o observable podemos tratar isso facilmente com o operador “retry”, com ele podemos especificar quantas vezes nosso observable pode tentar refazer a requisição. Legal né?

O usuário saiu da tela antes da requisição se completar, e agora?

É muito comum o usuário cancelar uma ação, seja por erro dele, ou por demora em obter a resposta, ele pode e com certeza ele vai sair da sua operação para tentar novamente. Como você iria cancelar essa operação caso esteja fazendo uso de uma promise? Para isso você teria que fazer alguma implementação externa ou usar algum framework para facilitar a operação. Já com observable você pode simplesmente chamar o operador “unsubscribe” e pronto, você já não está mais esperando uma resposta.

Conclusão

[wp_ad_camp_1]

O observable tem mais vantagens que as promises, e você pode definir quando deseja usar cada um dos recursos. Sobre o observable sua grande vantagem está nos “poderes” que ele nos dá com seus operadores. No exemplo acima ao cancelar um request quando o usuário sai da dela, poupou processamento e também conseguimos tratar possíveis problemas de falha, como o retry na perda de conexão. Já com promises é possível cancelar, e fazer os retry mas não usando sua definição e sim usando meios/frameworks alternativos.

Fontes:

1. Entendendo RxJS Observable com Angular
2. Promises em Javascript
3. Angular – Observables

The post Promise ou Observable? Quais as diferenças? 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.

Hoje em dia a internet se atualiza e muda a cada dia, assim surgem novos recursos a todo momento. Esses dias enquanto estava estudando e procurando por recursos diferentes encontrei um Framework javascript que simplesmente me chamou a atenção, seu nome é Annyang!

[wp_ad_camp_3]

O que é Annyang?

Annyang é um framework javascript para implementar comandos de voz em sua aplicação ou website. Com simples parametrizações você consegue fazer praticamente qualquer coisa!

Onde encontrar?

[wp_ad_camp_1]

O Annyang encontra-se disponível no seu website oficial (https://www.talater.com/annyang/), lá você já pode interagir com a página e ver possibilidades que possam ser atingidas.

Como funciona?

Para fazer o uso do Framework é necessário que seu website/aplicação seja disponibilizado através do protocolo HTTPS e após incluir uma linha de código a biblioteca já fica disponível para usar.

Apesar do website oficial dar um exemplo de uso, eles fazem isso em inglês! Então vamos criar uma simples aplicação para você ver esse magnifico Framework agindo!

[wp_ad_camp_2]

Primeiro vamos criar um index.html e um app.js para escrever nossa lógica fonte.

index.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>AnnyAng</title>
	<meta charset="utf-8" />
</head>
<body>

	<b><i>Utilização: </b></i>
 
	* "escreva..." 
	* "acessar www.google.com.br" 
	* "fechar guia" 
	* "limpar" (limpar tela)

	* "Fundo azul"
	* "Fundo amarelo"
	* "Fundo verde"


	
        <div id="texto">
   
	</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>
<script src="app.js"></script>

</body>
</html>

app.js

$(function () {
        var windowJanela;
	// configurando o annyAng
	if( annyang ) {
		// Definicao do primeiro comando. Primeiro texto de chamada e depois a funcao ou texto a escrever
		var commands = {
			'limpar': function() {
				$("#texto").html("");
				$("body").css({"background-color" : "white"});
			},
			'escreva *term': function(term) {
			  $("#texto").html($("#texto").html()+" "+ term);
			},
			'acessar *term': function(term) {
				windowJanela = window.open('http://'+term, 'teste');
			},
			'fechar guia': function(term) {
				 windowJanela.close();
			},
			'fundo *term': function(term) {
				if(term == "vermelho"){
					$("body").css({"background-color" : "darkred"});
				}
				if(term == "verde"){
					$("body").css({"background-color" : "green"});
				}
				if(term == "azul"){
					$("body").css({"background-color" : "blue"});
				}
				if(term == "amarelo"){
					$("body").css({"background-color" : "yellow"});
				}
				if(term == "preto"){
					$("body").css({"background-color" : "black"});
				}
			}
		};

	  //Idioma...
	  annyang.setLanguage("pt-BR");
	  
	  // Adicionar comandos para a API (annyang)
	  annyang.addCommands(commands);

	  // Iniciar escuta. Podera ser chamado aqui ou carregado por um evento ou botao, etc
	  annyang.start();
	}
});

Obs: Caso a aplicação não esteja rodando sobre o protocolo de segurança HTTPS, os browsers vão ficar pedindo constantemente a autorização.

Obrigado pela visita, cliquem aqui para baixar o exemplo

The post Annyang: Processamento de áudio com JavaScript 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.