Gerenciando Certificados SSL da Máquina

 Atualmente as conexões https utilizam certificados SSL. Em alguns casos também são utilizadas conexões TLS com dupla validação. Quando o acesso a um site, que necessita de um nível mais alto de segurança, utiliza um certificado para liberar o acesso. Também é comum precisarmos instalar certificados para acessar uma aplicação para desenvolver algum código evitando bloqueios e telas brancas.

Geralmente realizamos um import de um certificado via linha de comando como exemplo abaixo:

keytool -import -trustcacerts -keystore /jdk/jre/lib/security/cacerts -storepass changeit -noprompt -file /Downloads/nomeCertificado.cer -alias nomeDoCertificado

Esse tipo de import leva o certificado importado sempre para o endereço onde está o Java em: /jre/lib/security/cacerts dentro deste arquivo cacerts.

É necessário atenção para quando de usa mais de uma versão de Java na mesma máquina.

Da mesma forma é possível apagar o certificado importado desde que se saiba o alias, neste caso:

keytool -delete -alias <ALIAS_DO_CERTIFICADO_A_SER_REMOVIDO> -keystore <PATH_CACERTS>

Por exemplo:

 keytool -delete -alias nomeDoCertificado -keystore  /jdk/jre/lib/security/cacerts

Utilize sempre a senha: changeit

Agora, para visualizarmos os certificados importados podemos utilizar o Portecle, baixe de uma fonte segura como Sourceforge:

https://sourceforge.net/projects/portecle/

Execute o portecle.jar dentro do sistema de arquivos, deverá abrir uma janela:

Clique na pasta para abrir e selecione o endereço do Cacerts na sua máquina: /jdk/jre/lib/security/cacerts

Utilize a mesma senha já passada.

Deverá abrir a janela abaixo:

Clicando duas vezes no certificado é possível ver os detalhes dele. Dessa forma podemos verificar se um certificado foi importado corretamente ou não.

Preenchimento Automático de Formulários Utilizando Atalho de Favoritos do Navegador

Quando temos um formulário que preenchemos repetidamente com os mesmo dados, é possível criar um atalho na barra de menu do Navegador.

Para isso, vamos adicionar um novo atalho qualquer clicar com o botão direito e editar o atalho:

A tela que deverá abrir será a seguinte:

Vamos editar os campos Nome e URL. Podemos dar um novo nome para o atalho como "Completa Form":

Agora vamos supor um formulário com 3 campos. Precisaremos dos ids, no código fonte, dos 3 campos que nesse caso é possível utilizar o botão direito do mouse e "inspecionar" o campo para ver os id's. No nosso código temos os id's nome, telefone e idade.

Vamos utilizar um comando javascript para cada campo:

document.getElementById('nome').value = 'Marcelo';

document.getElementById('telefone').value = '999999999';

document.getElementById('idade').value = '99';

Agora, para fechar vamos colocar numa chamada Javascript conforme abaixo:

javascript:(function(){..código..})();

Sem espaçamento e em uma única linha o código completo ficará da seguinte forma:

javascript:(function(){document.getElementById('nome').value = 'Marcelo';document.getElementById('telefone').value = '999999999';document.getElementById('idade').value = '99';})();

Copie o código e cole no campo da URL do atalho:

Agora a página com o formulário que deve ser preenchido:

Clique no atalho "Completa Form" e os dados serão preenchidos instantaneamente:

É possível submeter o envio também se for necessário:

document.getElementById("idBotaoEnvio").submit();

Também é possível utilizar JQuery para códigos com JQuery, nesse caso utilizaríamos:

var campo1 = 'valor1';$("#campo1").val(campo1);

E para o envio:

$(#button).click();

Configurando Chave SSH para Git

 Para utilizar o git para subir código através de SSH é necessário sempre ter uma chave configurada previamente. Para configurar a chave é simples. Acesse a pasta do seu usuário na máquina e verifique se existe uma pasta .ssh criada, se a pasta não existir é porque não existe chave configurada. Para configurar utilize o clique do botão direito no desktop mesmo e acesse seu git bash:

Em seguida execute no prompt o comando que deverá criar uma chave na pasta C:/Usuário/<seu_usuario>/.ssh com um arquivo com o conteúdo de uma chave criptografada, conforme abaixo:

ssh-keygen -o -f ~/.ssh/id_rsa





Após a execução, será solicitado uma palavra passe, digite-a e tecle enter. A palavra é solicitada 2 vezes:


Após a execução:


Acesse o arquivo .pub no diretório e abra com o editor de texto. Copie a chave que deve começar com ssh-rsa.

  


Acesse seu repositório git e adicione a nova chave nas configurações de SSH do seu perfil.

No caso do Github em Configuraões>SSH:





No caso do Gitlab em /profile/keys.

Ao baixar o projeto copie a opção de repositório SSH para fazer o clone:





Ao executar o git clone será solicitada a chave SSH que foi configurada. O mesmo para Push e Pull.




Código WebRTC para Captura de Imagem via WebCam

 Segue um código simples para capturar imagem através de WebRTC. O WebRTC (Real Time Comunications) é um protocolo que pode ser utilizado em vários navegadores com exceção do Safari. Também é Web Responsivo para ser utilizado para capturar a imagem da câmera dos celulares e também de notebooks (desktop) além da RaspberiPI. O código roda em HTML5 com Javascript e possui restrições para IOs. A documentação possui uma parte do código mas o código não está completo. Segue o código corrigido e também as referencias da documentação:

Crie um arquivo html com o conteudo abaixo:

<div id="screenshot" style="text-align:center;">

  <video class="videostream" autoplay></video>

  <img id="screenshot-img">

  <p><button class="capture-button">Capture video</button>

  <p><button id="screenshot-button" disabled>Take screenshot</button></p>

</div>

<script>

const constraints = {

  video: true

};

const captureVideoButton =

  document.querySelector('#screenshot .capture-button');

const screenshotButton = document.querySelector('#screenshot-button');

const img = document.querySelector('#screenshot img');

const video = document.querySelector('#screenshot video');

const canvas = document.createElement('canvas');

captureVideoButton.onclick = function() {

  navigator.mediaDevices.getUserMedia(constraints).

    then(handleSuccess).catch(handleError);

};

screenshotButton.onclick = video.onclick = function() {

  canvas.width = video.videoWidth;

  canvas.height = video.videoHeight;

  canvas.getContext('2d').drawImage(video, 0, 0);

  // Other browsers will fall back to image/png

  img.src = canvas.toDataURL('image/jpeg');

 

};

function handleSuccess(stream) {

  screenshotButton.disabled = false;

  video.srcObject = stream;

}

</script>

Referencias:

Documentação da Google https://developers.google.com/web/fundamentals/media/capturing-images?hl=pt-br 

HTML5 Rocks https://www.html5rocks.com/en/tutorials/getusermedia/intro/

Compatibilidade http://iswebrtcreadyyet.com/

Criando um Projeto Angular com PrimeNG

O PrimeNG é uma versão do antigo Primefaces para o Angular. A documentação pode ser acessada em:

https://primefaces.org/primeng/#/

Quando estamos criando um novo projeto executamos alguns passos sequencialmente. A etapa de inicio de um novo projeto muitas vezes consiste em executar tais passos exaustivamente para criar diversos projetos a fim de executar testes isolados. Para facilitar essa tarefa resolvi fazer esse post, para ter os passos sequenciais de criação de projeto descritos, para acessar de forma fácil e não ter que ficar procurando os comando toda vez que se cria um novo projeto, então segue a sequencia abaixo.

Os passos foram executados em uma máquina Windows.

Inicialmente verifique se o Nodejs já está instalado.

Verificar se o node está instalado
> node -v

Instalar a última versão de angular CLI usado para instalação automática de pacotes via linha de comando

Instala o CLI Angular
> npm install -g @angular/cli@latest

Cria um novo projeto Angular
> ng new nomeProjeto

Acessa a pasta do projeto
> cd nomeProjeto

Para levantar o servidor dentro da pasta do projeto
> ng serve

ctrl+c para encerrar o servidor

Instalar o Primeng
> npm install primeng --save

Intalar Prime Icons
> npm install primeicons --save

No arquivo angular.json do projeto criado insere em style o bloco primeng conforme a documentação Get Started.

"styles": [

"src/styles.css",

"node_modules/primeicons/primeicons.css",

"node_modules/primeng/resources/themes/nova-light/theme.css",

"node_modules/primeng/resources/primeng.min.css"

],

Feito isso, temos um projeto Angular com PrimeNG preparado para testes.

Documentação PrimeNG Get Started:

https://primefaces.org/primeng/#/setup

Gerando Script para Habilitar e Desabilitar Constraints de Tabela

Para melhor manusear tabelas de uma base de dados, de forma mais veloz, sem ter que ficar percorrendo as outras tabelas que são referenciadas na primeira, é possivel desabilitar as constraints. Atenção para não gerar dados corrompidos conforme a operação que for realizada depois disso.

Rode o script abaixo preenchendo o nome da tabela e o owner e na saída serão gerados os scripts a serem executados.

1. SELECT 'alter table '||cons.owner||'.'||cons.table_name||' disable constraint '||cons.constraint_name||'; ' -- para habilitar so trocar o desable para enable
2.  
3. FROM dba_constraints      col,
4.  
5.    dba_constraints       cons
6.  
7. WHERE cons.r_owner = col.owner
8.  
9. AND cons.r_constraint_name = col.constraint_name
10.  
11. AND cons.constraint_type = 'R'
12.  
13. AND col.table_name IN( 'TB_CARROS') -- colocar tabelas que vai truncar aqui
14.  
15. AND col.owner = 'NOME_DO_ACESSO'
16.  
17. ORDER BY cons.table_name;

A partir deste script é possível criar um script único para habilitar ou desabilitar todas as constraints da base de dados.

Esse tipo de procedimento é interessante para iniciar uma limpeza geral na base de dados antes da subida em produção quando nem todas as tabelas devem ser limpas.

Limpeza de Cache do Chrome

Por vezes, rodamos uma aplicação e alguns problemas de carregamento de css e Javascript acontecem de forma comum. Segue uma forma de limpar o cache no Chrome. Abra duas abas do Chrome e digite no campo de url:





chrome://net-internals/#dns




Em seguida, basta clicar:



clear host cache







chrome://net-internals/#sockets



Em seguida, basta clicar:



flush socket pulls