Tag: programação

Entendendo Lógica de Programação

Transcrição:

Placa: SE SEU CÃO FIZER COCÔ, COLOQUE-O NO SAQUINHO
— cãozinho do Velho Bit faz cocô
— Velho Bit deixa o cocô perto da placa e sai com o cãozinho dentro de uma sacola

16 de fevereiro de 2021

Como adicionar e remover dinamicamente campos HTML em um Formulário? (Javascript puro)

O Javascript nos permite criar conteúdos dinâmicos e podemos usar isso para adicionar remover e adicionar elementos de acordo com as opções do usuário. Dados como informações sobre dependentes, links de mídias sociais, e-mails adicionais, etc. são curtos e não fazem sentido criarmos um formulário separado apenas para estes. Por isso, é interessante incluirmos a opção de adicionar diretamente esses campos em um subformulário dinâmico.

Obs. Se quiser ir direto para o código final, procure o link do JsFiddle no final do post.

HTML

Para iniciarmos, basta criar um container no HTML onde você quer que os elementos sejam exibidos, além do botão simples de adição e um botão de captura de dados, para que, desta forma, possamos enviar o JSON resultante para o back-end.

A organização dos containers é sempre muito importante quando trabalhamos com Javascript e nos dedicamos ao uso correto da web semântica.

<div class="dependentes">
  <button id="btnAdicionarDependentes">
  📝Adicionar Dependentes
  </button>
  <div class="container" id="dependentesContainer">
  </div>
  <button class="green" id="btnCapturarDados">
  ✅ Capturar Dados
  </button>
</div>
<pre id="containerDados"></pre>

Javascript

Como de praxe, usaremos o Javascript puro para realizar essa tarefa, dessa forma você poderá usar em qualquer lugar o que aprender aqui.

Para poder capturar e devolver os dados, usaremos um objeto JSON, dessa forma fica fácil remontar, tanto no back-end, quando no front-end, os dados nas formatações e/ou elementos que precisamos.

Vamos criar, como exemplo, o JSON abaixo, e vamos declará-lo em uma variável global chamada dependentes, seguindo a ideia de um cadastro de lista de dependentes, então temos:

var dependentes = [{
  identificador: 13,
  nome: "Joana da Silva",
  idade: 12,
}];

Agora vamos nos focar nas funções. A primeira coisa que vamos fazer é criar um método que pegue os dados do JSON e o converta para elementos HTML renderizados na tela. Dessa forma, usaremos um laço para ler o JSON e aplicamos seus dados em uma template string e o adicionamos no container específico:

function carregarDependentes() {
  let dependentes_container = document.querySelector("#dependentesContainer");
  dependentes_container.innerHTML = "";
  dependentes.forEach((el) => {
    let identificador = el.identificador;
    let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    								<input class="nome" placeholder="Digite o nome" type="text" value="${nome}">
                                    <input class="idade" placeholder="Digite a idade" type="number" value="${idade}">
                                    <div class="action">
                                        <a href="#" class="salvar">salvar 💾</a>
                                        <a href="#" class="remover">❌</a>
									</div>
                                </div>`;
    dependentes_container.innerHTML += dependente_container;
  });
}

Agora vem o segredo que facilita o processo e o deixa mais organizado. Ao invés de remover e adicionar os elementos na tela, iremos nos focar em remover e adicionar do JSON e, em seguida, regenerar os elementos a partir desse objeto. Ficando, assim, com um código mais limpo. Outro motivo pelo qual usamos a regeneração dos elementos é para evitar criarmos IDs únicos temporários. Ao regenerar, podemos usar os índices do próprio array como identificador.

Para adicionar um novo item, basta incluirmos um dado vazio no JSON, porém, seguindo nosso modelo, e mandamos gerar novamente os elementos:

function adicionarDependentes() {
  dependentes.push({ identificador: "", nome: "", idade: "" });
  carregarDependentes();
}

Para remover, similar a criação de um novo, vamos usar um laço, porém para adicionar o evento aos botões de excluir. Usaremos então o método splice para remover o array. Depois, obviamente, vamos regenerar os elementos a partir da função carregarDependentes():

function removerDependentes() {
  document
    .querySelectorAll("#dependentesContainer .remover")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        dependentes.splice(i, 1); // O splice vai remover um item do array no JSON
        carregarDependentes(); // E chamamos o método para regenerar os elementos
      });
    });
}

Uma vez que adicionamos uma nova linha em branco precisamos salvar seu preenchimento e aí iremos usar a mesma lógica de remoção, mas usaremos o splice para substituir e não para remover um dado do JSON. Porém, adicionaremos uma pequena validação para evitar entrar dados incompletos:

function salvarDependentes() {
  document
    .querySelectorAll("#dependentesContainer .salvar")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        let identificador = el.parentElement.parentElement.getAttribute(
          "data-id"
        );
        let nome = el.parentElement.parentElement.querySelector(".nome").value;
        let idade = el.parentElement.parentElement.querySelector(".idade")
          .value;

        if (!nome.length || !idade.length) { // Verifica se nome e idade foram preenchidos
          alert("Nome e idade precisam ser preenchidos para salvar.");
          return false;
        }
        dependentes.splice(i, 1, {
          identificador: identificador,
          nome: nome,
          idade: idade,
        }); // Substitui o dado no JSON
        carregarDependentes(); //  E chamamos o método para regenerar os elementos
      });
    });
}

Um outro método que precisamos adicionar é uma forma de bloquear para que um usuário consiga clicar em outros elementos ao redor, sem antes finalizar a edição do item. Para isso, iremos fazer um laço que adiciona uma classe de CSS, que vamos chamar de disabled, em todos os elementos, exceto o que está sendo editado. Essa classe possui um point-events: 0 e um opacity: 0.5. Para demonstrar que está desativado, você pode ainda adicionar outros efeitos, como filtros de baixo contraste ou escala de cinza.

function travarOutros(element) {
  if (element == false) { // Passar false como parâmetro para que todos os elementos fiquem habilitados novamente, ao invés de apenas o elemento que queremos liberar
    document
      .querySelectorAll(".dependentes button, .dependentes .container > div")
      .forEach((el) => {
        el.classList.remove("disabled");
      });
    document.querySelector("#containerDados").innerHTML = "";
    return false;
  }
  document
    .querySelectorAll(".dependentes button, .dependentes .container > div")
    .forEach((el) => {
      if (el != element) {  // Verifica se o elemento no laço é o que está sendo editado
        el.classList.add("disabled");
      }
    });
}

Agora, antes de continuarmos, vamos revisitar as funções acima para chamar, quando necessário, uma função dentro da outra (leia os comentários no código para entender), ficando assim:

function carregarDependentes() {
  let dependentes_container = document.querySelector("#dependentesContainer");
  dependentes_container.innerHTML = "";
  dependentes.forEach((el) => {
    let identificador = el.identificador;
    let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    															<input class="nome" placeholder="Digite o nome" type="text" value="${nome}">
                                  <input class="idade" placeholder="Digite a idade" type="number" value="${idade}">
                                  <div class="action">
                                  	<a href="#" class="salvar">salvar 💾</a>
                                    <a href="#" class="remover">❌</a>
																	</div>
															  </div>`;
    dependentes_container.innerHTML += dependente_container;
  });
  salvarDependentes(); // Adicionamos o método aqui para que o laço seja aplicado nos novos items adicionados
  removerDependentes(); // Adicionamos o método aqui para que o laço seja aplicado nos novos items adicionados
  travarOutros(false); // Adicionamos para destravar tudo
}

function removerDependentes() {
  document
    .querySelectorAll("#dependentesContainer .remover")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        dependentes.splice(i, 1);
        carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
      });
    });
}

function adicionarDependentes() {
  dependentes.push({ identificador: "", nome: "", idade: "" });
  carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
  travarOutros(
    document.querySelector("#dependentesContainer > div:last-child")
  ); // Desabilitar todos os outros elementos, exceto o que acabou de ser adicionado
}

function salvarDependentes() {
  document
    .querySelectorAll("#dependentesContainer .salvar")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        let identificador = el.parentElement.parentElement.getAttribute(
          "data-id"
        );
        let nome = el.parentElement.parentElement.querySelector(".nome").value;
        let idade = el.parentElement.parentElement.querySelector(".idade")
          .value;

        if (!nome.length || !idade.length) {
          alert("Nome e idade precisam ser preenchidos para salvar.");
          return false;
        }
        dependentes.splice(i, 1, {
          identificador: identificador,
          nome: nome,
          idade: idade,
        });
        carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
        travarOutros(false); // Liberar todos os elementos novamente
      });
    });
}

function travarOutros(element) {
  if (element == false) {
    document
      .querySelectorAll(".dependentes button, .dependentes .container > div")
      .forEach((el) => {
        el.classList.remove("disabled");
      });
    document.querySelector("#containerDados").innerHTML = "";
    return false;
  }
  document
    .querySelectorAll(".dependentes button, .dependentes .container > div")
    .forEach((el) => {
      if (el != element) {
        el.classList.add("disabled");
      }
    });
}

Agora, tudo o que precisamos fazer é incluir os comandos de inicialização, onde aplicamos o método de adição ao evento de clique do botão e carregamos os dados iniciais do JSON:

//init
document.querySelector("#btnAdicionarDependentes").addEventListener("click", adicionarDependentes);
carregarDependentes();

Por fim, vamos criar uma função para o botão de capturar dados apenas para extrair e mostrar os dados em JSON. Você pode, eventualmente, usar esses dados e enviar via POST, por AJAX ou via campo oculto, e pegar no back-end para guardar ou processar os dados (como com um json_decoder, do PHP):

//capturarDados
document.querySelector("#btnCapturarDados").addEventListener("click", ()=>{
	document.querySelector("#containerDados").innerHTML = JSON.stringify(dependentes, undefined, 4);
});

CSS

O único CSS que precisaremos usar é para aplicar a classe disabled. Se por acaso você está usando algum framework CSS, recomendo que você use o relativo a esta classe deste. Consulte a documentação, onde geralmente está relacionado aos helpers:

.disabled{
  pointer-events: none;
  opacity: .5;
}

Se você quer usar o CSS mais elaborado que usei aqui, veja abaixo o link do JsFiddle.

Finalizando

Criar formulários dinâmicos auxilia a usabilidade à medida que permite que o usuário adicione dados de forma mais rápida e com respostas visuais imediatas. O uso aqui do Javascript puro visa a facilidade para que você possa implementar em quaisquer projetos, incluindo os com Typescript. Trabalhe um pouco no código para adequá-lo à sua necessidade. E, como sempre, você poderá puxar o código e testar direto do JsFiddle.

Aproveite e entre para nosso grupo de discussão no Telegram.

14 de fevereiro de 2021

PHP no Windows 10 – Esqueça o Xampp e Instale o Apache no Subsistema Linux
Uma das melhores coisas do Windows 10 é a possibilidade de instalar um subsistema Linux nele. Com isso, você pode montar o seu servidor Apache direto nesse subsistema, deixando o ambiente local muito mais similar a onde você vai efetivamente publicar, e com muito mais performance e liberdade do que os AMPs disponíveis para o Windows (Xamp, Wamp, Mamp).

Habilitando e Instalando o Subsistema

Primeiro certifique-se que está usando a versão mais recente do Windows 10. Apesar do susbsistema Linux estar disponível há alguns anos, é interessante manter sempre sua máquina atualizada.

Clique em iniciar e digite Ativar ou Desativar Recursos do Windows, ou acesse a partir do Painel de Controle Clássico.

Ao abrir, desça a barra de rolagem até encontrar a opção Subsistema Linux para Windows. Ative a caixa e pressione em OK.

O Windows pedirá para reiniciar o sistema e fará alguns ajustes, para então permitir que você possa instalar uma distribuição Linux.

Uma vez reiniciado, você já pode fazer a instalação da distribuição. Para isso abra Microsoft Store. Na guia Pesquisar, pesquise por Linux. Uma grande opção contendo várias distribuições será mostrada a você.

Escolha a distribuição que melhor funcionar para você. Nesta demonstração iremos usar o Ubuntu, mas se você preferir uma distribuição baseada em outra distro, fique à vontade. Porém a integração do Ubuntu com o Windows é trabalhada em conjunto entre a Microsoft e a própria Canonical, o que deve garantir, teoricamente, uma integração melhor.

Para você trabalhar com o Subsistema Linux, você pode usar o próprio Prompt de Comando, ou o Power Shell, porém, a Microsoft lançou recentemente um Terminal para o Windows. Esse novo Terminal pode ser baixado diretamente pela Microsoft Store e é altamente recomendável seu uso, pois ele traz muitas melhorias para a usabilidade do WSL (Windows Subsystem Linux).

Para finalizar a instalação, simplesmente abra o Terminal e digite: ubuntu (ou o nome da distribuição que você escolheu) e aguarde a instalação. Ele pedirá para você criar uma conta de administrador e a senha.

Após instalar, se você fechar e abrir o Terminal, notará que apareceu mais uma opção para nova aba. Caso você prefira, você pode editar, em Settings, para que o Ubuntu seja o padrão, simplesmente alterando a configuração em seu json. Porém, se preferir, você também pode abrir o Ubuntu simplesmente digitando pelo OS a partir da barra de pesquisas, mas nesse caso ele abrirá o terminal dentro do console padrão do Windows.

Instalando o PHP e MySQL em seu Ubuntu Linux

A partir daqui não é diferente de instalar em um Ubuntu completo, porém, como a maioria dos usuários de Windows não possui familiaridade com os sistemas baseados em Linux, vamos detalhar passo a passo.

Obs: Se você quiser copiar o código aqui digitado, você pode digitar ctrl+c aqui e, no terminal, apenas clicar com o botão direito (esta ação será equivalente ao ctrl+v).

Antes de tudo, vamos dar um update para preparar o ambiente.
```
sudo apt-get update
```
Instalando o Apache 2

Para instalar o servidor do Apache, e verificar se a instalação está correta, simplesmente use os comandos abaixo, no Terminal:
```
sudo apt-get install apache2
sudo service apache2 start
sudo service apache2 status
```
Ao iniciar o apache, é possível que você receba a seguinte mensagem:

Windows TerminalProtocol not available: AH00076: Failed to enable APR_TCP_DEFER_ACCEPT

Não se preocupe com esse problema. Simplesmente esse protocolo ainda não está nativamente implementado no WSL. Você pode apenas ignorar ou adicionar as seguintes linhas no arquivo /etc/apache2/apache2.conf :
```
AcceptFilter https none
AcceptFilter http none
```
Instalando o PHP

Instalaremos o PHP 7.4 (então versão mais atual na última atualização deste post), mas você pode utilizar qualquer tutorial para Ubuntu para outras versões, ou simplesmente trocar os caminhos aqui associados. Atualizaremos este post conforme forem surgindo novas atualizações. Digite Y (yes) para tudo o que for perguntado.
```
sudo apt-get update
sudo apt-get install php php-cli php-fpm php-json php7.4-pdo php7.4-mysql php-zip php-gd  php-mbstring php-curl php-xml php-pear php-bcmath
php -v
```
Instlamos, assim, o cliente e os pacotes mais utilizados, mas você pode, futuramente, instalar pacotes adicionais para funções específicas. A terceira linha apenas verifica a versão do PHP instalada, para checar se está tudo correto.

Instalando o MySQL

Por último vamos instalar o MySQL. Você pode trabalhar com outros bancos de dados se quiser, basta, como dito anteriormente, usar qualquer tutorial para Ubuntu (ou a distro que você escolheu), pois, relembrando, o WSL é realmente um subsistema Linux instalado e integrado ao Windows. Ele não é uma máquina virtual ou emulação. Lembre-se de pressionar o Y, quando perguntado.
```
sudo apt-get install mysql-server mysql-client libmysqlclient-dev
sudo service mysql start
```
Caso perguntado, você pode ou não definir uma senha para o root do MySQL. Como você está em um ambiente de desenvolvimento, isso não é importante por hora. Mas lembre-se que em ambientes de produção uma senha forte deve ser usada.

Garantindo todos os privilégios para usuário administrador

Para você poder gerenciar todos os bancos e não ter que criar um usuário para cada um, você pode criar um usuário administrador e facilitar seu trabalho. Use o código abaixo para acessar o cliente mysql. Use a senha criada anteriormente.
```
sudo mysql -u root -p
```
Agora, use o código abaixo para criar o usuário administrador e você poder trabalhar de forma universal.
```
CREATE USER 'nome_de_usuario'@'localhost' IDENTIFIED BY 'sua_senha';
GRANT ALL PRIVILEGES ON *.* TO 'nome_de_usuario'@'localhost';
```
Digite \q para sair do cliente.

PHPMyAdmin

Você pode usar algum cliente externo para administrar o MySQL, mas a opção mais comum usada é instalar o PHPMyAdmin. Simplesmente utilize o seguinte comando:
```
sudo apt-get install phpmyadmin
```
Obs. A instalação irá perguntar se deseja instalar apache ou nginx, neste caso marque apache. Para marcar pressione espaço, se não fizer isso ele não instalará corretamente e você precisará rodar a instalação novamente.

Durante a instalação, você será questionado para criar uma senha para o PHPMyAdmin, caso deseje.

Testando

Uma vez que já instalamos e já inicializamos, podemos testar simplesmente acessando http://localhost. Para o PHPMyAdmin, use http://localhost/phpmyadmin

Para entrar no PHPMyAdmin, utilize o usuário e senha criado acima, com os privilégios:

Habilitando as configurações do Apache

Para poder funcionar corretamente certas opções, como o habilitar .htaccess, habilitar ou desabilitar determinados módulos, configurar max_*, etc., é ideal que você configure o Apache Virtual Hosts.
```
sudo bash -c "a2ensite '*.conf' && a2dissite 000-default.conf default-ssl.conf && systemctl restart apache2.service"
```
Feito isso, você pode configurar o VirtualHost para diversos sites, portas, ou simplesmente especificando configurações específicas para cada site / sistema em que você está trabalhando.

O arquivo de configuração gerado, fica em: /etc/apache2/sites-available/000-default.conf

Informações Importantes

Você pode iniciar o apache e o mysql a qualquer momento, simplesmente abrindo o Windows Terminal, no Ubuntu (ou direto pelo app Ubuntu) e colocando:
```
sudo service apache2 start
sudo service mysql start
```
A pasta padrão dos arquivos do Apache é:
/var/www/html

Para você abrir a pasta no Windows Explorer e você ver o os arquivos, digite no Terminal:
```
cd /var/www/html/
explorer.exe .
```
Recomendo que, para você poder operar sem problemas, no Windows, você execute, para dar permissão total:
```
sudo chmod -R 777 /var/www/html/
```
Extra: Criando um SSL autoassinado

Dependendo do que você estiver programando, pode ser necessário você utilizar uma conexão SSL. Isso geralmente é necessário em testes que irão alimentar diversas APIs ou até para utilizar alguns recursos do HTML5.

O Ubuntu já possui o openssl instalado nativamente no sistema. Então, basta você colocar:
```
sudo openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/ssl/private/apache-selfsigned.key -out /etc/ssl/certs/apache-selfsigned.crt
```
Enquanto você estiver criando o certificado, ele irá fazer algumas perguntas de identificação. Como é algo que vai ser usado localmente, essas informações não precisam ser reais ou fidedignas, basta responder. A ordem é:
- Nome de País (em código de 2 dígitos) – Brasil é BR
- Estado
- Cidade
- Nome da Organização
- Unidade da Organização
- Common Name – Digite localhost
- E-mail – Digite webmaster@localhost
Isso vai ser suficiente para criar um certificado auto-assinado, que vai funcionar localmente.

Agora vamos nas configurações do Virtual Hosts do Apache, para SSL.
```
sudo nano /etc/apache2/conf-available/ssl-params.conf
```
Dentro do arquivo, cole o seguinte texto (é uma configuração genérica, mas suficiente para nosso caso):
```
SSLCipherSuite EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH
SSLProtocol All -SSLv2 -SSLv3 -TLSv1 -TLSv1.1
SSLHonorCipherOrder On
# Disable preloading HSTS for now.  You can use the commented out header line that includes
# the "preload" directive if you understand the implications.
# Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
Header always set X-Frame-Options DENY
Header always set X-Content-Type-Options nosniff
# Requires Apache >= 2.4
SSLCompression off
SSLUseStapling on
SSLStaplingCache "shmcb:logs/stapling-cache(150000)"
# Requires Apache >= 2.4.11
SSLSessionTickets Off
```
Obs. Digite CTRL+X, seguido de Y, seguido de ENTER, para fechar o nano, salvando.

Agora vamos editar a configuração do SSL.
```
sudo nano /etc/apache2/sites-available/default-ssl.conf
```
Com o arquivo aberto, você vai substituir os parâmetros abaixo, de acordo com o demonstrado na lista:
```
ServerAdmin webmaster@localhost.com
ServerName localhost

SSLCertificateFile /etc/ssl/certs/apache-selfsigned.crt
SSLCertificateKeyFile /etc/ssl/private/apache-selfsigned.key
```
Por fim, basta colocar no terminal, para ativar o ssl no Apache:
```
sudo a2enmod ssl
sudo a2enmod headers
sudo a2ensite default-ssl
sudo a2enconf ssl-params
sudo apache2ctl configtest
```
Se estiver tudo configurado corretamente, ele vai responder SINTAX OK.

Antes de recarregar o Apache, teremos que liberar a pasta onde salvamos o certificado. Vamos liberar para 777, para facilitar, apenas porque estamos em ambiente de desenvolvimento. JAMAIS FAÇA ISSO EM AMBIENTE DE PRODUÇÃO.
```
sudo chmod -R 777 /etc/ssl/private
service apache2 reload
```
Por fim, precisamos adicionar o SSL como confiável no Windows. Caso contrário, ao entrar em https://localhost, você vai receber aquela clássica tela de certificado não confiável.

Agora vá até a pasta onde você baixou o certificado e abra a pasta no explorer. Procure pelo arquivo do certificado apache-selfsigned.crt. Clique duas vezes nele para instalar no Windows.
```
cd /etc/ssl/certs/ 
explorer.exe .
```
Ao abrir o certificado, clique no botão Instalar Certificado

Simplesmente siga os passos para a instalação do certificado

Na área de Importação, selecione para colocar no repositório de Autoridades de Certificações Confiáveis, como nas imagens abaixo.

Você vai precisar confirmar a instalação do certificado. Marque Sim.

Agora é só acessar o localhost com https e ser feliz!
12 de outubro de 2019
Paul Allen morre aos 65 anos, filantropo e co-fundador da Microsoft

“Allen é mais rico que Deus e Gates é mais rico que Allen”.
Assim Paul Allen é apresentado no documentário da PBS, The Triumph of Nerds.

Morreu na última terça-feira (17/10/2018), Paul Allen, a atual 44ª pessoa mais rica do mundo. Mas, muito mais que isso, Allen será lembrado como um dos ícones da tecnologia da informação e de sua acessibilidade e democracia. Allen foi um dos fundadores da Microsoft, junto com Bill Gates e, posteriormente, Steve Ballmer.

“Um dia, ele veio até mim, insistindo para que eu o acompanhasse até uma banca de revistas. Quando chegamos, ele me mostrou a capa da edição de janeiro de 1975 da Popular Electronics”, disse Gates ao relatar sobre o princípio da Microsoft, sem seu blog, lamentando a morte do amigo.

Paul Allen e Bill Gates foram amigos de escola, de classes diferentes, na Lakeside School, em Seattle. A parceria entre eles, que resultou na fundação da Microsoft, surgiu na faculdade, onde Allen estimulava o amigo a abrirem uma empresa de tecnologia. Ao ver anúncios e matérias sobre o Altair 8080 em revistas especializadas, Paul Allen convenceu Bill Gates a portarem, juntos, um interpretador de BASIC para a máquina de Ed Roberts. Esse foi o primeiro real projeto da Microsoft, fundando em meio a bares e estações de serviços, em Albuquerque, Colorado.

Paul Allen e Steve Wozniak

O interpretador BASIC para o Altair 8080, mostrando uma real funcionalidade do aparelho, também serviu de inspiração para outras máquinas que foram aparecendo no mercado, incluindo o Apple I e II.

Allen ainda esteve dentro da história da Microsoft por anos. Também foi ele quem tinha o contato de Tim Patterson, o criador do Quick and Dirty Operation System (Q-DOS), que deu origem ao MS-DOS, após o acordo com IBM, outrora recusado pela Digital Research.

Paul foi diagnosticado com linfoma de Hodgkin, em 1982. Após curado não voltou mais a trabalhar na Microsoft, até que em 2000 se absteve do conselho de administração.

Durante sua vida, Paul Allen, recebeu diversos prêmios e fez investimentos em diferentes áreas, envolvendo finanças e tecnologias, engenharia aeroespacial, artes e esportes, chegando a ser até proprietário de um time de basquete, o Portland Trail Blazers. Allen ainda investiu muito dinheiro em filantropia, pesquisas com o ebola, exploração, artes e educação.

Paul Allen faleceu no dia 17 de Outubro de 2018, vítima de um linfoma não Hodgkin, aos 65 anos. Doença que ele lutava já há quase 10 anos.

Bill Gates e Paul Allen

Com notícias do CNBC, Express, 12 UP e GateNotes.com

Paul deserved more time in life. He would have made the most of it. I will miss him tremendously. https://t.co/npPAjGCCsc

— Bill Gates (@BillGates) October 16, 2018

We lost a great technology pioneer today – thank you Paul Allen for your immense contributions to the world through your work and your philanthropy. Thoughts are with his family and the entire Microsoft community.

— Sundar Pichai (@sundarpichai) October 15, 2018

Paul was a truly wonderful, bright and inspiring person—- and a great friend. I will miss him https://t.co/HYhtgZGo8C

— Steve Ballmer (@Steven_Ballmer) October 15, 2018

Our industry has lost a pioneer and our world has lost a force for good. We send our deepest condolences to Paul’s friends, the Allen family and everyone at Microsoft.

— Tim Cook (@tim_cook) October 15, 2018

Very sad to hear of Paul Allen’s passing. His passion for invention and pushing forward inspired so many. He was relentless to the end. My heart goes out to Paul’s family and friends.

— Jeff Bezos (@JeffBezos) October 15, 2018

17 de outubro de 2018
Exemplo de App Ionic – Hackathon
Disclaimer: O objetivo deste post é tão simplesmente compartilhar o projeto que possa ser útil para alguém que está precisando ou quer aprender um pouco de Ionic. É um projeto feito em poucas horas, durante um hackathon, então não espere pelas melhores práticas. Para dúvidas mais complexas, entre em nosso grupo de Design e Programação, no Facebook.

Veja o projeto no Github:

Star
No último final de semana (29 e 30 de Setembro de 2018), participei do Hackathon do Shopping Center Recife. Devido a um erro da ~~des~~organização, acabei ficando em um grupo que não haviam outras pessoas que tivessem ao menos noção de programação (enquanto havia grupo composto inteiro por pessoas que sabiam programar), de forma que acabei programando sozinho durante cerca de 20 horas. Por outro lado, o restante do meu time conseguiu me auxiliar fazendo a apresentação e com uma ideia que poderá ser muito valiosa para o projeto de algumas pessoas, que irei explicar abaixo.

Equipe, da esquerda para a direita: Eu, Marcos Lemos, Pedro Affonso, Suellen Sales e Helton Portela

O projeto

Diferente do que foi referido pelo edital do Shopping, que afirmava buscar uma solução de “relacionamento com o cliente”, o objetivo principal era encontrar uma forma de conseguir dados mais assertivos sem a necessidade direta de contatos com o lojista. Esses dados seriam analisados e entregues de forma a ajudar o Shopping a criar novas campanhas. Tudo sem diminuir faturamento.

Para isso, eu pensei que poderia desenvolver uma versão do aplicativo do Shopping, que já existe, e melhorar, otimizar, deixa-lo mais fluido e com mais opções. Inicialmente, pensei em integrar o Google Indoors, mas GPS não funciona corretamente no Shopping e o Indoors não está disponível por um tempo limitado. Algumas equipes até sugeriram algo parecido, na entrega, mas apenas sugestão, pois seria inviável descobrir a localização atual em ambiente tão contido apenas por triangulação. Enfim, pensei em envolver compartilhamento em mídia social também, para engajamento, etc.

No final, o projeto consistiu em uma nova versão do aplicativo, com um chatbot amigável, um clube de vantagens que armazena informações da nota fiscal (pelo QRCode) e a proposta de manipulação desses dados no backoffice, além de campanhas direcionadas pelo mesmo. Alguns dos outros grupos usaram propostas bem similares.

No fim, eu decidi que o principal seria apresentar os dados em um backoffice. Minha ideia inicial era realmente preparar um BI, ou o começo do que poderia ser um, usando os dados do aplicativo reformulado. Porém, os outros integrantes de minha equipe tiveram a ideia de criar um clube de vantagens que pegasse o código do QRCode do cliente, pegando assim dados bem mais específicos sem a necessidade de acordos com o lojista, em trocas de pontos que poderiam ser trocados por serviços do shopping ou de parceiros mais próximos (como o cinema), que admito ser melhor que a minha ideia original.

Se por um lado, eu decidi fazer algo que pudesse se tornar um BI (Business Intelligence), por outro, o tempo não foi favorável. Sendo o único desenvolvedor, eu fui obrigado a dividir meu tempo entre aplicativo, backoffice e banco. Logo, não esperem um código tão bem escrito. Lembre-se que é um projeto desenvolvido do zero em algumas poucas horas.

Tecnologias

Para agilizar o desenvolvimento e ainda poder ser algo demonstrável em tempo real direto no navegador (para exibir no telão), o projeto do app foi feito em Ionic 3, famoso framework Cordova para desenvolvimento de aplicações em vários dispositivos. Graças a isso, ainda conseguia testar em tempo real no Android e no iOS. Fiz o possível para implementar o máximo de funcionalidades possíveis.

Para o backoffice, entretanto, por questão principalmente de tempo, apostei no PHP e MySQL, não pela experiência em si, apesar de conhecer bem a linguagem, mas porque eu poderia simplesmente usar meu servidor de site comum e não ter que configurar um ambiente. Dessa forma, perdi menos tempo. Mesmo assim, só consegui fazer 20% do que eu planejei para essa parte.

Ionic

Usei e abusei da interface padrão, com poucas modificações e atualizações, observando sempre a documentação quanto ao uso dos componentes. Aqui cabe um outro disclaimer: apesar de já trabalhar há cerca de um ano com Phonegap/Cordova e já ter feito algumas brincadeiras nele, estou mexendo no Ionic há apenas duas semanas, então perdoe-me se eu estou usando alguma má prática em seu código (ao menos os nomes das páginas eu já adianto que estão bagunçadas).

Sabrina – A Chatbot

Sabrina foi o nome escolhido para a chatbot. Por quê? Sei lá, veio na cabeça. Basicamente ela usa Watson para poder realizar a conversa. Com algumas poucas diferenças, caso você queira saber mais como funciona essa parte de chatbot, consulte o outro artigo onde eu explico como criar um chatbot simples usando a ferramenta da IBM. Ainda resolvemos dar uma identidade para e os outros membros da equipe a treinaram para responder perguntas de forma a convidar as pessoas que não estão no shopping e ainda sugerir lojas em caso de perguntas menos específicas.

Obs. Abaixo, vai ter uma área de testes. Se você for testar em nosso site, lembre-se que usamos o plano de 30 dias grátis, então dependendo da data que você ler este artigo pode não funcionar. Também só tivemos tempo para responder uma série limitada de perguntas. E não treinamos a conversação mais complexa (apesar de que você vai encontrar no código trechos que mostra que estava sendo desenvolvido).

Clube de Vantagens

A parte do clube de vantagens visava o login fácil pelo Facebook (está implementado em beta no código, mas comentado, pois só funciona compilado). Através disso, pegaria o máximo de informações públicas possíveis, para entender os gostos do cliente. Claro que estou ciente que as novas políticas do Facebook exigem uma aprovação, mas isso não seria problemas para um dos maiores shoppings do Brasil.

Após esse login, entraria a opção de ver suas informações, compartilhar com amigos, através de um código promocional (que dá pontos), e que ainda daria alguns feedbacks gráficos para estimular uma ludificação. Os valores dados seriam sempre grandes, na margem mínima de 100 pontos para compras menores e 500 pontos para compras maiores. Essa quantidade foi pensado do ponto de vista de marketing, pois pontos maiores dão a sensação de que o retorno é maior, mesmo que a exigência para a conversão em um serviço ou produto fique na casa das dezenas dos milhares.

QR Code e NFCe

Por outro lado, havia a necessidade de ler o QRCode e acessar os dados de uma NFCe sem um certificado digital. O maior problema que enfrentamos é: como fazer isso através do servidor, se as Sefaz bloqueiam o cross-origin (ao menos a Sefaz de Pernambuco), retornando o erro “Cross-Origin Read Blocking (CORB) blocked cross-origin response“? Percebi que os outros grupos que envernizaram por esse lado tiveram esse problema e, até onde eu vi os códigos, ninguém realmente resolveu o problema. Então, me atentei que eu simplesmente poderia “enganar” o site da Sefaz para acreditar que eu na verdade sou um usuário direto do navegador. Como? Simplesmente declarando um cabeçalho como Firefox! O trecho fica assim (PHP):
```
$ch = curl_init();
//Selecionando URL
curl_setopt($ch, CURLOPT_URL, $urlMessage);
//O cabeçalho é importante para definir tipo de arquivo enviado
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
'Accept-Encoding: gzip, deflate',
'Accept-Language: en-US,en;q=0.5',
'Connection: keep-alive',
'SomeBull: BeingIgnored',
'User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:16.0) Gecko/20100101 Firefox/16.0'
));
//Habilitar método POST
curl_setopt($ch, CURLOPT_POST, 1);
//Capturar Retorno
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//Executar
$retorno = curl_exec($ch); 

 //Arquivo extrair.php
```
Obs. Eu não testei com NFCe de outros estados.

O resultado foi exatamente a XML da NFCe. E como entender e ler? Bem, para isso basta usar o DOM Document, mas se você quiser entender mais sobre como funciona esse processo de nota fiscal eletrônica, leia o artigo que eu escrevi anteriormente sobre o assunto.

Já o QRCode, o próprio Ionic tem uma solução para isso, e foi implementada, mas me deparei com um problema: Só funcionava corretamente no Android e iOS e eu precisava apresentar tudo no navegador. A solução? Encontrei uma biblioteca de Javascript puro que fazia a leitura do QRCode pela webcam. Então tive que aprender como integrar Javascript puro a um projeto Ionic. Nem foi tão difícil, está compreensível se você olhar a página do QRCode no projeto. O único problema é que a webcam não tem autofoco, então há uma margem curta para que seja lido corretamente o QRCode. Por conta disso, no navegador, pela webcam, eu só consegui ler os QRCodes que estavam sem amassados e bem nítidos. Aliás, testamos uma nota emitida em contingência e, por algum motivo, a URL do QRCode retornava chave inexistente (?).

Após ser lido, o QRCode retorna uma mensagem com o a pontuação que você efetivamente fez, e retorna também o valor da nota. Ainda envia os detalhes da nota para o backoffice.

Backoffice

O backoffice captura os dados e exibe para o usuário. No projeto, os gráficos que estão mostrados no dashboard não são reais, foram colocados manualmente, mas os que mostra as vendas é atualizado em tempo real assim que a pessoa coloca o QRCode. Os nomes dos compradores estão censurados no front, eu sei que deveria ser no back (aliás, já armazenado sem o nome), mas não tive tempo de pensar em segurança e já era 3 da manhã no momento que eu comecei a implementar isso.

Por conta disso, eu não tive como implementar tudo o que eu queria, de forma que tem mais exemplos do que efetivado.

O meu intuito era usar todos os dados capturados, inclusive o retorno da Sabrina (a chatbot) para criar índices de relevância de 0 a 100. Exemplo:
1. João, identificado como usuário J72, perguntou sobre compras de sapato a Sabrina, isso dá 1 ponto na subcategoria calçados para J72, pela intenção de compra.
2. Se J72 efetivamente comprar o sapato, ele receberá 2 pontos na subcategoria calçados, pela compra realizada.
3. O cruzamento entre a intenção e compra realizada dá ainda mais 3 pontos, na subcategoria calçados.
4. Ao todo o processo do usuário J72 resultaria em 5 pontos de relevância para o usuário J72, que seria somado aos seus outros pontos, caso já tivesse.
5. Quando atingir 70 pontos, na subcategoria calçados, esta será considerada como categoria de relevância para o usuário J72.
Com isso, a home, mostrada para o usuário J72 seria organizado de acordo com seus índices personalizados e campanhas direcionadas, direto pelo aplicativo e também por notificações, poderiam ser enviadas para os usuários do aplicativo, de acordo com suas relevâncias. Além de, claro, o resultado do acompanhamento dessa campanha.

Exemplo de como funcionaria a criação de campanha direcionada

Além disso, esses dados deveriam ser cruzados para sugerir a equipe de marketing, as melhores estratégias de acordo com o comportamento do grupo e em quais mídias seriam mais adequadas para investir em propaganda. Infelizmente, essa foi a parte que não deu tempo de desenvolver, pelos motivos supracitados. Mas, essa imagem, desenvolvida por outros membros da equipe, ajuda a ilustrar a lógica que seria aplicada para a criação do algoritmo. Vale lembrar que, as informações do Facebook, vinculados ao comportamento de compra, ajudaria e as conversas com a Sabrina e as bases de dados que o Shopping já possui, ajudariam a definir o comportamento do público.

Finalizando

Disponibilizei todo código desenvolvido, do backoffice e do projeto Ionic no Github, para caso você deseje experimentar ou apenas dar um olhada no código. Mas lembre-se que não vou fazer manutenção de nada, é apenas um exemplo para estudo:

Star

Entretanto, se você quiser apenas ver, testar o que foi demonstrado, você pode acessar o backoffice aqui, ou o aplicativo aqui. Caso abra o aplicativo em um desktop ou laptop, recomendo que você use o modo de device toolbar do Google Chome para visualizar corretamente -> Para isso, pressione CTRL+SHIFT+i (substitua ctrl, por command, no Mac) e clique no segundo ícone do canto superior esquerdo do console. Ou simplesmente veja o vídeo abaixo:

Por que não vencemos? Talvez por não ter tanto tempo para explicar o projeto, talvez por não ter encontrado uma boa forma de demonstrar, ou simplesmente porque não é realmente tão interessante. Mas, de qualquer forma, rendeu um post para o blog, para o qual pode ser útil para alguém que esteja aprendendo Ionic ou qualquer outro tema aqui relacionado. Lembre-se de entrar no grupo do Facebook para tirar mais dúvidas.

Obrigado para você que leu até aqui e obrigado a equipe que foi integrante desse projeto. Me siga no Twitter e Instagram e deixe seu like no Facebook.
2 de outubro de 2018
Termos Slave e Master são abolidos do Python

A partir da versão 3.8 do Python, os termos master e slave serão alterados para worker e helper. A decisão se dá após debates da comunidade sobre a terminologia usada, que já duram quase duas décadas.

“Por razões de diversidade, seria legal tentar evitar a terminologia ‘mestre’ e ‘escravo’, que pode ser associada a escravidão”, escreveu Victor Stinner, um dos desenvolvedores no Red Hat, em seu pedido mais recente para troca da terminologia.

O pedido gerou diversas discussões e dentre sugestões, críticas e respostas, um usuário identificado como Steve D’Aprano, comentou “Na verdade, nas subculturas BDSM, ‘mestre/escravo’ pode ter conotações *positivas*. Você quer dar suporte a diversidade, então por que quer discriminar essa subcultura?”.

Sugestões foram feitas, como webmaster/postmaster, master/apprentice, parent/children, etc. Mas no final ficou decidido que passaria a se chamar “workers” e “helpers” (algo como operário e ajudante) e o “master process” passará a se chamar “parent process” (processo pai/mãe).

Apesar da terminologia jé ser muito usado na área de hardware, outras comunidades na área de software já fizeram modificações similares. Em 2014, Drupal e Django trocaram as terminologias para primary/replica e leader/follower, respectivamente.

Com informações do Motheboard.vice.com e bugs.python

17 de setembro de 2018
Commit no projeto do PHP, no Github, sugere fim dos operadores == e != na versão 7.3
Nesta quarta-feira, 13 de Junho, foi realizado um commit no projeto oficial do PHP da Zend. Esse commit, entretanto, tinha algo curioso; comentava sobre a descontinuação dos operadores de comparação == (igual) e != (diferente) a partir da versão 7.3 Alpha 1.

Nas mídias sociais alguns profissionais começaram a se perguntar se poderia ser algum tipo de brincadeira ou uma informação real. Nos comentários do projeto oficial do Github, o tópico foi bloqueado e afirmado que não há planos para realizar essa descontinuação tão cedo. A mudança, apesar de estar no Github oficial, parece ser apenas uma brincadeira dos desenvolvedores.

Curiosidade

Você sabia que dá para comparar duas strings no PHP sem o uso do operador? Para isso, basta usar a função strcmp(). Curiosamente, ela vai retornar 0 quando as Strings forem iguais e 1 quando forem diferentes.
```
<?php

$a = "Mario";
$b = "Luigi";
echo strcmp($a, $b); //retorna 1

?>
```
14 de junho de 2018
MacOS Não Rodará Mais Aplicativos 32 Bits

Desde o lançamento do iOS 11, a Apple exige que os aplicativos enviados para a App Store sejam 64 bits. O mesmo aconteceu com a Mac App Store, que desde o primeiro dia deste ano (2018), passou a não aceitar mais aplicativos 32 bits em sua plataforma.

Na última versão beta do macOS High Sierra 10.13.4, a Apple está notificando os usuários, por meio de alerta, a informação que o aplicativo está em 32 bits e logo perderá o suporte. Essa mensagem acontece ainda em apenas alguns casos.

Nas notas do lançamento do beta, a Apple diz:

“Para preparar para um futuro lançamento do macOS em que 32 bits sem compromisso não mais rodará, começando no macOS High Sierra 10.13.4, um usuário será notificado ao executar um app que depende de software 32-bits. O alerta aparecerá apenas uma vez por app”.

Apesar de parecer estranha, a mensagem que afirma “sem compromisso” é uma referência a afirmação que a Apple fez na WWDC onde afirmou que o High Sierra “será o último macOS lançado com suporte a apps 32 bits sem compromisso”.

Mas antes de concluir que a informação se resuma apenas a Mac App Store, a apple informou esta semana:

“Se você distribui seus apps fora da Mac App Store, nós recomendamos fortemente distribuição em binários 64-bit para ter certeza que seus usuários continuem a rodar suas aplicações em versões futuras de macOS”.

Nos últimos anos a Apple tem feito um esforço para estimular os desenvolvedores a migrar para 64-bit, trazendo novas funcionalidades no XCode que facilitassem a transição.

Os próximos lançamentos após o High Sierra deverão trazer restrições a aplicações 32 bits e alertas mais agressivos, até a extinção total do suporte.

Além dos alertas, a Apple também renomeou o app iBooks para Books, atualizações de privacidade e integração.

Com informações da Apple, ArsTechica e 9To5Mac.

27 de janeiro de 2018