Um exemplo disso é a rotina de update com o TypeORM, você quer atualizar somente algumas propriedades e se você definir a sua entidade na assinatura do seu método você acaba tendo que fazer um cast só para o intellisense parar de te perturbar.

Para resolver esse problema com o type do TypeScript, com o código abaixo você cria um tipo de dado que irá estender o tipo de sua entidade e retornar um tipo com as mesmas propriedades como opcionais e tudo isso de forma dinâmica. Assim você conseguirá transformar propriedades requeridas em opcionais

Vamos aos códigos né?

/// entidade-opcional.ts
export type EntidadeOpcional<T> = {
    [P in keyof Required<T>]?: Pick<T, P> extends Required<Pick<T, P>> ? T[P] : (T[P] | undefined);
}

/// minha-entity.ts
export class UsuarioEntity {
    id: number;
    nome: string;
    telefone?: string;
    email: string;
    senha: string;
}

/// service.ts
export class LoginService {
     autenticar(minhaEntity: EntidadeOpcional<MinhaEntity>) {
            //// rotinha de update
     }
}


let service: MeuService = new MeuService();

// chamo o autenticar, informando apenas email e senha e não obtenho erro.
this.autenticar({email: '', senha: ''});

Conclusão

Bom pessoal, apesar de simples o conteúdo desse post ele me ajudou bastante em um projeto com NestJS. O objetivo é compartilhar esse trechinho de código com vocês sem escrever muita coisa =)

Se o isso te ajudou, deixa um comentário ^^

[wp_ad_camp_3]

The post TypeScript: Propriedades requeridas para opcionais appeared first on Hiago Silva Souza.

[wp_ad_camp_3]

Uauuu, tem como?

Sim, com certeza tem! Mas já vou avisando, que esse tutorial não ensina você a configurar seu ambiente de desenvolvimento nem nada do tipo… Então para seguir com o tutorial, você já deve ter instalado o SDK do Android, blz?

Vamos lá? Let’s go?!

[wp_ad_camp_2]

É um processo muito simples, para isso é necessário que o seu smartphone e o seu computador estejam conectados na mesma mesma rede.

Caso você esteja no linux, faça uso do terminal, caso esteja no Windows abra o seu CMD, após isso siga os passos abaixo:

1. Conecte o cabo de seu dispositivo ao computador.
2. Acesse o diretório platform-tools dentro do diretório do seu SDK.
3. Digite o comando adb tcpip 5555 (isso irá iniciar a depuração por rede do android) e aguarde a saída restarting in TCP mode port: 5555
4. Retire o cabo do seu dispositivo.
5. Digite o comando adb connect 192.168.x.x (onde tá 192.168.x.x, substitua pelo ip do celular)
6. Digite o comando adb devices e veja se o seu celular encontra-se listado.

Prontinho, seguindo os passos acima você não precisa do cabo no seu smartphone para testar seus app’s, basta compilar e pronto!

Importante: Caso você desconecte do Wifi é necessário realizar todos os procedimentos novamente, ok?

Seu dispositivo é roteado?

Se seu dispositivo for roteado, o processo fica mais fácil ainda! É só você fazer a instalação do aplicativo WiFi ADB – Debug Over Air e seguir as instruções. Após isso faça o 4º passo da lista acima e já estará tudo pronto =)

Conclusão

[wp_ad_camp_1]

Seguindo os passos acima, agora é possível fazer a depuração do seu aplicativo sem ficar utilizando o cabo USB do seu dispositivo.

The post Android: Depurando sem cabo USB! appeared first on Hiago Silva Souza.

O que é o WebAuthn?

[wp_ad_camp_3]

A API de Autenticação da Web (também conhecida como WebAuthn) é uma especificação escrita pelo W3C e pela FIDO, com a participação de grandes empresas como o Google, Mozilla, Microsoft dentre outros. A API permite que os servidores registrem e autentiquem usuários usando criptografia de chave pública ao invés de uma senha.

Ele permite que os servidores integrem-se aos autenticadores fortes agora integrados em dispositivos, como o Windows Hello ou o Touch ID da Apple. Em vez de uma senha, um par de chaves público-privado (conhecido como credencial) é criado para um site/aplicação web. A chave privada é armazenada com segurança no dispositivo do usuário; uma chave pública e um ID de credencial é gerada aleatoriamente é enviada ao servidor para armazenamento. O servidor pode então usar essa chave pública para provar a identidade do usuário.

A chave pública não é secreta, porque é efetivamente inútil sem a chave privada correspondente. O fato de o servidor não receber segredo tem implicações de longo alcance para a segurança de usuários e organizações. Os bancos de dados não são mais tão atraentes para os hackers, porque as chaves públicas não são úteis para eles.

O WebAuthn faz parte da estrutura FIDO2 , que é um conjunto de tecnologias que permitem a autenticação sem senha entre servidores, navegadores e autenticadores. A partir de janeiro de 2019, o WebAuthn é suportado no Chrome, Firefox e Edge, com suporte futuro no Safari.

Registrando uma credencial do WebAuthn

[wp_ad_camp_2]

Em um fluxo de registro de usuário baseado em senha, um servidor normalmente apresentará um formulário a um usuário solicitando um nome de usuário e senha. A senha seria enviada ao servidor para armazenamento.

No WebAuthn, um servidor deve fornecer dados que vinculem um usuário a uma credencial (um par de chaves público-privado); esses dados incluem identificadores para o usuário e a organização (também conhecidos como “terceira parte confiável”). O site, em seguida, usaria a API de autenticação da Web para solicitar que o usuário crie um novo par de chaves. É importante notar que precisamos de uma string gerada aleatoriamente do servidor como um desafio para evitar ataques de repetição.

Autenticando com uma credencial do WebAuthn

[wp_ad_camp_1]

Após o término do registro, o usuário agora pode ser autenticado. Durante a autenticação, uma declaração é criada, o que prova que o usuário possui a chave privada. Essa declaração contém uma assinatura criada usando a chave privada. O servidor usa a chave pública recuperada durante o registro para verificar essa assinatura.

O que é criptografia de chave pública?

A criptografia de chave pública foi inventada nos anos 70 e foi uma solução para o problema dos segredos compartilhados. É um pilar da segurança moderna da Internet; Por exemplo, toda vez que nos conectamos a um site HTTPS, ocorre uma transação de chave pública.
Criptografia de chave pública usa o conceito de um par de chaves; uma chave privada armazenada com segurança pelo usuário e uma chave pública que pode ser compartilhada com o servidor. Essas “chaves” são números longos e aleatórios que têm um relacionamento matemático entre si.

Olhando para o futuro

Embora a Autenticação da Web seja uma ferramenta importante, é sempre importante lembrar que a segurança não é uma tecnologia única; É uma maneira de pensar que deve ser incorporada em cada etapa de como o software é projetado e desenvolvido. A autenticação da Web pode ser uma parte importante desse processo, forçando 80% dos ataques de hackers a se adaptar ou a morrer.

Fora introdução todo conteúdo desse post é uma tradução do site webauthn.guide e você pode encontrar o texto original clicando aqui.

Nos próximos posts vou estar trazendo aplicações práticas e tutoriais para implementação da funcionalidade com PWA’s e sistemas Web.

The post WebAuthn – Autenticação Biométrica na Internet appeared first on Hiago Silva Souza.

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.

Extensões

[wp_ad_camp_3]

Vamos preparar para que você possa depurar tanto a aplicação no ionic serve (testando em seu browser), como no ionic cordova run android (com a aplicação compilada no Android ou iOS).

Para isso vamos precisar de duas extensões do VSCode para nos ajudar, são elas:

1. Debugger for Chrome (distribuído pela própria Microsoft)
   
2. Cordova Tools
   

Configurando o VSCode

[wp_ad_camp_2]

Após instalar as extensões você pode ir na sessão de debug do vscode (4º ícone da barra lateral esquerda). Lá você clica na engrenagem que fica após o combobox e escolha a opção Cordova.

Logo após isso vai ser criado o arquivo launch.json com diversas opções de debug disponíveis. Porém vamos apagar o conteúdo atual do arquivo e colocar o conteúdo abaixo no lugar.

{
    // 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": [
        {
            "name": "Depurar no Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/www"
        },
        {
            "name": "Depurar no Android",
            "type": "cordova",
            "request": "attach",
            "platform": "android",
            "target": "device",
            "port": 9222,
            "sourceMaps": true,
            "cwd": "${workspaceRoot}"
        },
        {
            "name": "Depurar no iOS",
            "type": "cordova",
            "request": "attach",
            "platform": "ios",
            "target": "device",
            "port": 9220,
            "sourceMaps": true,
            "cwd": "${workspaceRoot}"
        }
    ]
}

Ao colocar esse código e salvar feche e abra o seu Visual Studio Code e na sessão de debug você já terá disponível o “Depurar no Chrome”, “Depurar no Android” e “Depurar no iOS”.

Vamos testar?

[wp_ad_camp_1]

Agora é a hora que todos estavam esperando não é mesmo? Vamos fazer 2 testes, o primeiro é depurando usando o próprio google chrome, e o segundo é fazendo a depuração usando o próprio dispositivo.

• Obs: Na imagem não contém o depurar no iOS pois como não tenho um Mac eu removi a opção, mas na empresa eu testei e vai rolar na maçã 😉

Depurando no Browser

Para fazer o debug tanto na aplicação compilada quando no browser primeiro é necessário rodar o comando do ionic responsável pela plataforma desejada. No browser vamos no terminal e executar o comando “ionic serve –nobrowser“. Assim que finalizar o processo de compilação, vá até a opção de debug selecione a opção “Depurar no Chrome“. Assim que o navegador for aberto e o rodapé do seu VSCode estiver laranja, você já está depurando sua aplicação.

Vai fundo, coloque um breakpoint em uma de suas rotinas e seja feliz!

Depurando no Dispositivo

O processo de depuração no dispositivo é bem semelhante ao do browser. Você precisa executar a usando o comando desejado no meu caso “ionic cordova run android -l“. No meu caso vou colocar o -l para fazer o uso do live reload dentro do dispositivo.

Assim que compilar e o aplicativo estiver aberto em seu dispositivo, basta você selecionar a opção “Depurar no Android” ou “Depurar no iOS” e aguardar a barra ficar laranja. Após isso é a mesmo processo do browser! Coloque seus breakpoints e seja mais produtivo no seu trabalho.

Obrigado e espero que tenha gostado! Caso tenha alguma dúvida ou sugestão, pode deixar um comentário informando seu e-mail (não envio spams rs). Valeu!

The post Depurar uma aplicação ionic no VSCode 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.