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.

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.

[wp_ad_camp_3]

O que é a nuvem?

Em computação, computação em nuvem (cloud computing, do inglês) se refere á uma utilização de memória e capacidade de armazenamento e processamento de computadores e servidores interligados pela internet.

E meu produto precisa estar preparado?

Sim! Algo muito bom na nuvem é que você pode “escalar” o uso de seus recursos computacionais. Hoje existe duas maneiras para se fazer a escalabilidade, são elas a escalabilidade vertical, e a horizontal.

[wp_ad_camp_1]

A escalabilidade vertical trata-se de elevar os recursos de seu servidor, um exemplo disso é você possuir um servidor com 4 núcleos de processamento e eles não darem conta de uma grande demanda, então se faz necessário fazer um upgrade aumentando os recursos da máquina, mas vai chegar um dia que nem o mais potente dos computadores vai aguentar essa malha de processamento.

Já a escalabilidade horizontal veio para resolver esse tipo de problema. A sua proposta é de escalar mais servidores para dividir o processamento, ou seja, você pode ter quantos servidores for necessário e eles são adicionados e removidos de acordo com a demanda.

Resumindo: Se você possui um e-commerce hoje e ele não gera muito processamento, pode ser que por algum motivo específicos (uma promoção, uma blackfriday) uma grande malha de acessos pode vir a aparecer e se a sua infra-estrutura não for escalável seu serviço vai ficar indisponível.

Como preparo meu produto?

Existem vários fatores e eles estão na área de desenvolvimento do seu produto. O investimento para desenvolver um produto escalável e preparado para a nuvem pode parecer alto, mas o retorno compensa.

[wp_ad_camp_2]

Mas vamos falar um pouco mais sobre isso em outros posts, enquanto isso deixo aqui algumas dicas:

1. Não guarde os arquivos enviados (upload’s) no seu servidor de aplicação, lembre-se pode haver um servidor hoje, 300 amanhã e 10 depois de amanhã. Essas máquinas servem para processar, não para armazenar! Para isso use servidores de arquivos compartilhados, ou serviços como o Amazon S3.
2. Não guarde sessão localmente, a requisição de um usuário autenticado em sua máquina de aplicação 1 pode cair na maquina de aplicação 2 em algum momento. Procure armazenar as sessões no banco de dados ou em uma solução própria para isso.
3. Lembre-se o cache pode ser seu inimigo na hora de desenvolver, mas é muito importante para redução de custos e para fornecer maior velocidade para o usuário. Então desenvolva seu produto, projetando um modelo de cache.
4. Use soluções de PaaS para seu banco de dados. Você só precisa seguir a instruções do serviço e apontar para os servidores de banco dados.
5. Não execute processos pesados em foreground, crie filas para ele e libere as conexões. O máximo que vai acontecer é demorar para a operação ser concluída, porém isso nunca vai deixar alguém que esteja esperando uma operação mais simples, esperando… Um bom exemplo de empresa que faz isso é o facebook, quando você faz o post de um vídeo.

The post Seu produto está preparado para a nuvem? appeared first on Hiago Silva Souza.