Caro amigo,

É sempre bom termos em mente que todo conhecimento adquirido hoje em dia é essencial para a formação de um

bom profissional, principalmente na área de programação. Nossa revista está repleta de novidades de diversas plataformas.

Nosso colunista Hamden Vogel redigiu a segunda parte do artigo “TFileStream – Técnicas Avançadas”, o qual permite que os

desenvolvedores Delphi implemente através de um objeto “TfileStream” o carregamento, leitura e alteração de arquivos de

modo texto de qualquer tamanho. Já nosso colaborador Ricardo Barbosa Crivelli continua escrevendo sobre Ionic, com o artigo

entitulado “Criando uma lista de Contatos com o Ionic“. Nesta segunda parte ele cria uma página detalhes, permitindo que no

ato de selecionar algum nome da lista de contatos, possamos abrir uma outra página. O colunista Thiago C. Montebugnoli

continua abordando temas voltados para a plataforma .Net junto com a linguagem C#. No artigo deste mês ele aborda o

assunto “Captcha”, uma forma de distinguir se uma tarefa está sendo executada por um usuário ou por um robô. Para este

mês, nosso colaborador Ricardo Barbosa Crivelli redigiu o artigo “Isolando seu ambiente Python com o virtualenv”, preparando

dicas para quem trabalha com Python. O “virtualenv”, que conforme o nome sugere, cria ambientes de desenvolvimentos

virtuais, onde é possível ter a sua própria versão do Pyhton e componentes instalados de forma isolada do restante da máquina

possibilitando um desenvolvimento futuro com o “Django”. Desejo uma boa leitura e deixo um grande abraço!

Marcos César Silva

Diretor Técnico

Editorial

Asp.Net - Utilizando CAPTCHAs

Olá amigos,

Neste mês de Outubro irei explorar um assunto muito comum quando nos deparamos em praticamente

qualquer sistema web, o uso dos denominados “CAPTCHAs”. Para quem não sabe e de acordo com inúmeras

referências encontradas na internet, o “CAPTCHA” significa um acrônimo da expressão "Completely Automated Public

Turing test to tell Computers and Humans Apart" traduzindo significa: “Teste de Turing público completamente

automatizado para diferenciação entre computadores e humanos”, simplificando, uma forma de distinguir se uma

tarefa está sendo executada por um usuário ou um robô. Veremos neste artigo mais algumas finalidades deste recurso

aplicando um exemplo prático utilizando o Microsoft Visual Studio 2015 junto com uma aplicação Asp.Net e a

linguagem C#. Utilizarei a biblioteca “Captcha” que poderá ser adquirida e instalada através do “Nuget”.

Finalidade

As finalidades do uso do CAPTCHA são inúmeras, para quem tiver maiores interesses recomendo visitar o link:

http://www.captcha.net/, o qual aborda diversas situações deste recurso. O intuito deste artigo seria implementá-lo a

fim de proteger o cadastro de um usuário em um site ou sistema web. Um exemplo básico seria a criação de um e-

mail na Microsoft. Até poucos anos atrás, a maioria desses serviços sofriam de um tipo específico de ataque: os "bots", os quais

se inscreviam para milhares de contas de e-mails a cada minuto. A solução para este problema foi usar CAPTCHAs

para garantir que somente os seres humanos pudessem obter estas contas, a fim de evitar abusos por scripts

automatizados. Em um sistema web aberto ao público também podemos encontrar problemas como os descritos

anteriormente e por sorte podemos diminuir o risco dos mesmos com o uso dos CAPTCHAs.

Baixando e Instalando o “Captcha” através do Nuget

Abra o Miscrosoft Visual Studio 2015 e crie um website do início clicando em “File/New/Website...”. Para fins

didáticos iremos criar uma aplicação do tipo Asp.net. Localize o menu “Tools/Nuget Package Manager/Manage Nuget

Packages for Solution...”. Pesquise pelo item “Captcha” na caixa de pesquisa, ver Imagem 01.

Figura 01: Biblioteca Captcha.

Após selecionar a biblioteca, localize na região direita a “solution” para instalá-la. Ver Imagem 02.

Figura 02: Instalando o “Captcha”.

Após seguir estas etapas, automaticamente será aberta uma página contendo todas as informações para o uso

desta biblioteca em diversas plataformas, inclusive na Asp.Net. Dentro do próprio Visual Studio também será aberto

um arquivo “txt” também contendo instruções de implementações. Ver Figura 03.

Figura 03: Instruções de uso.

Criando um exemplo Seguindo como base as instruções de uso desta biblioteca, adicione no webform o captcha, um textbox e um

button. Ver Imagem 04.

Figura 04: Layout proposto

Abaixo a codificação referente:

<div>

<table class="auto-style1">

<tr>

<td>

<BotDetect:WebFormsCaptcha ID="ExemploCaptcha" runat="server" Width="290px" />

</td>

</tr>

<tr>

<td>

<asp:TextBox ID="CaptchaCodeTextBox" runat="server" Width="272px" /></td>

</tr>

<tr>

<td>

<asp:Button ID="Button1" runat="server" Text="Testar" Width="205px"

OnClick="Button1_Click1" />

</td>

</tr>

</table>

</div>

Listagem 01.

A Tag “BotDetect” fará todo o trabalho do captcha. No próprio componente teremos os caracteres para

validação, o botão atualizar e embaralhar letras e outro botão para emitir o som das letras (para deficientes visuais).

Usaremos uma quantidade mínima de linhas, no evento “Click” do botão “testar” teremos a seguinte

codificação.

Listagem 02.

protected void Button1_Click1(object sender, EventArgs e)

{

bool validar = ExemploCaptcha.Validate(CaptchaCodeTextBox.Text);

CaptchaCodeTextBox.Text = null;

if (!validar)

{

Response.Write("Erro na validação!");

}

else

{

Response.Write("Validação correta!");

}

}

Listagem 02.

Criaremos uma variável booleana que servirá para validar o texto digitado. Implementaremos o método

“Validate” do componente “ExemploCaptcha” o qual nos retornará “verdadeiro” ou “falso”. Uma ideia para retornar o

resultado seria pelo método “Response.Write” através de uma condição. Ver Figura 05.

Figura 05: Resultado final.

Conclusões O recurso apresentado neste artigo é utilizado em quase na totalidade de sites que existem a necessidade da

utilização de um cadastro por exemplo. É comum também encontrarmos sistemas web que faz o uso deste

mecanismo. O “Captcha” foi inventado com o intuito de diminuir o ataque de robôs, scripts maliciosos, entre outros.

Existem inúmeras bibliotecas no Visual Studio para esta tarefa, procurei explorar a “Capctha”, sendo de fácil aquisição,

instalação e utilização.

Desejo a todos uma ótima leitura. Abraços

Referências

http://www.captcha.net/ https://pt.wikipedia.org/wiki/CAPTCHA

Sobre o Autor Thiago Cavalheiro Montebugnoli , adora aprender novas tecnologias. Formado pela Faculdade de

Tecnologia de Botucatu � SP (FATEC), j� desenvolveu softwares utilizando a plataforma .NET, Delphi junto com Banco de Dados SQL Server e Firebird. Como experi�ncias profissionais mais recentes, possui em seu curr�culo sua

atua��o no Centro de Processamento de Dados da Prefeitura Municipal de Ita�-SP e atualmente comp�e a equipe da Coordenadoria Tecnologia da Informa��o no IFSP � Instituto Federal do Estado de S�o Paulo em Avar�. Al�m disso, � colunista mensal da Revista The Club Megazine e � consultor T�cnico do The Club.

Possui as seguintes certifica��es: MCP - Microsoft Certified Professional, MCTS - Microsoft Certified Technology Specialist, MCAD - Microsoft Certified Application Developer e MCSD - Microsoft Certified Solution Developer.

E-mail: suporte@theclub.com.br

Criando uma Lista de Contatos com o Ionic – Parte 2

Introdução

O Ionic Framework é um framework open source para a criação aplicativos mobile desenvolvidos através de

páginas HTML e códigos JavaScript. O Ionic oferece uma biblioteca de componentes HTML, CSS e JavaScript

otimizados para o mundo mobile e um conjunto de ferramentas que fazem a interação de sua aplicação com o

hardware de forma nativa. É construído com Sass e otimizado para o AngularJS. No artigo anterior nós aprendemos

como criar um projeto e como fazer uma listagem de contatos.

Lista de Contatos

Nosso aplicativo será uma lista de contatos que irá conter o nome, o sobrenome e o telefone das pessoas.

Contará com uma tela para exibição da lista, uma página com os detalhes e uma para adição e remoção dos contatos.

O ideal é que você siga os artigos em sequência, então recomendo que você siga a parte 1 antes de continuar.

A estrada até agora

Antes de iniciarmos a segunda parte vamos dar uma olhada o que já foi feito, para isso abra o terminal e

navegue até a pasta do nosso projeto e execute o comando abaixo para iniciar o simulador:

ionic serve

Após alguns instantes e se o seu código estiver correto uma janela do seu navegador irá executar com a nossa

aplicação (Figura 1). Uma dica importante é que se o Google Chrome não for o seu navegador padrão eu recomendo

copiar o endereço da página aberta e acessá-la via Chrome, pois várias bibliotecas não funcionam corretamente em

outros navegadores como o Mozilla Firefox, por exemplo.

Figura 1. Janela do Chrome com a nossa aplicação

Criando a página de detalhes Se você clicar em algum nome você verá que a nossa lista ainda não abre as informações sobre o contato, mas

acalme-se, esse processo também é muito simples! O primeiro passo será criar nossa página de detalhes e assim como

quase tudo no Ionic ela pode ser criada via terminal através do comando:

ionic generate page detalhes

Se o seu comando não funcionou e o resultado foi algo semelhante à Figura 2 é porque você está rodando o

servidor local para testar a aplicação, portanto você deve fechar o servidor local digitando quit ou somente q.

Figura 2. Erro ao gerar a página de detalhes.

Agora se o resultado foi semelhante à Figura 3 significa que a página foi criada com sucesso e basta editarmos

o arquivo app/theme/app.core.scss e adicionarmos o código abaixo no final do arquivo. Isso fará que com que o

arquivo .scss seja compilado junto com o aplicativo e todo CSS da página de detalhes seja carregado para dentro do

nosso app.

@import "../pages/detalhes/detalhes";

Ao navegar até a pasta app/pages você notará que o gerador criou uma pasta chamada detalhes e dentro

dela três arquivos, um HTML com a tela que será exibida no aplicativo, um arquivo TypeScript (.ts) que contém a

programação da página e o arquivo que será importado através do código acima que terá todas as regras do CSS da

página. Este arquivo está no formato .scss que é a extensão do Sass e caso você ainda não esteja familiarizado com

essa tecnologia recomendo a leitura dos tutoriais do site oficial. O Sass é uma extensão do CSS que facilita muito a

criação de regras e controle do arquivo. O site oficial é o http://sass-lang.com/.

Figura 3. Página de detalhes criada com sucesso.

Alterando a página de detalhes Vamos abrir o arquivo app/pages/detalhes/detalhes.html e criar uma estrutura que exiba as

informações do contato selecionado. A estrutura do arquivo deve ser mais ou menos assim:

<ion-header>

<ion-navbar>

<ion-title>Contato</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<ion-card>

<ion-list inset>

<ion-item>

<ion-label>Nome</ion-label>

<ion-input type="text" [(ngModel)]="contato.nome"></ion-input>

</ion-item>

<ion-item>

<ion-label>Sobrenome</ion-label>

<ion-input type="text" [(ngModel)]="contato.sobrenome"></ion-

input>

</ion-item>

<ion-item>

<ion-label>Telefone</ion-label>

<ion-input type="text" [(ngModel)]="contato.telefone"></ion-

input>

</ion-item>

</ion-list>

</ion-card>

</ion-content>

O arquivo é bem simples e não apresenta nada de novo apenas uma listagem com três campos de texto que

neste momento servem apenas para exibir as informações. Abra agora o app/pages/detalhes/detalhes.ts e deixe-o com uma estrutura semelhante ao código

abaixo, eu irei explica-lo melhor logo em seguida.

import { Component } from '@angular/core';

import { NavController, NavParams } from 'ionic-angular';

@Component({

templateUrl: 'build/pages/detalhes/detalhes.html',

})

export class DetalhesPage {

private contato;

constructor(

private navCtrl: NavController,

private navParams: NavParams

) { }

ionViewLoaded() {

this.contato = this.navParams.get('contato');

}

}

Existem alguns pontos que devem ser observados nesse arquivo, o primeiro é que na linha dois nós

importamos o NavParam, ele é responsável pela transmissão de variáveis entre uma página e outra. Como não basta

somente importar a classe, nós criamos uma variável privada no construtor. O método ionViewLoaded() é chamado sempre depois do construtor é executado e o HTML já está

pronto para ser renderizado. Ele será responsável por resgatar a variável contato que será passado pela página Home

e armazenar na variável contato. Execute novamente o comando ionic serve e verifique se o compilador exibiu alguma mensagem de

erro, caso negativo, ao abrir a janela do navegador clique no nome de algum contato. Não aconteceu nada, não é?

Isso é porque o método responsável por abrir a página de detalhes ainda não foi criado.

Alterando a Home Abra o arquivo app/pages/home/home.html e altere o button para que quando ele seja clicado ele

chame o método showDetalhe().

...

<ion-list>

<button ion-item *ngFor="let contato of

contatos" (click)="showDetalhe(contato)">

{{ contato.nome }} {{ contato.sobrenome }}

</button>

</ion-list>

...

Agora vamos criar o médoto showDetalhe() no arquivo app/pages/home/home.ts (as partes

que foram adicionadas ou editadas estão em negrito).

import { Component } from '@angular/core';

import { NavController, ModalController } from 'ionic-angular';

import { DetalhesPage } from '../detalhes/detalhes';

…

constructor(

public navCtrl: NavController,

private modalCtrl: ModalController

) {

...

}

showDetalhe(contato) {

let modal = this.modalCtrl.create(DetalhesPage, { contato: contato });

modal.present(modal);

}

}

O método showDetalhe() cria um Modal, que é uma página que abre por cima da outra e tem como

propósito exibir informações ou editá-las. Ele é criado através do método create() da classe ModalController

e deve receber sempre como primeiro parâmetro a view que será aberta e como segundo o objeto que será passado

para ela. O contato passado através desse método será capturado pelo ionViewLoaded() da página de detalhes.

Testando

Para testar se está tudo funcionando normalmente execute o comando abaixo no terminal na pasta

raiz do projeto. ionic serve

Quando o navegador abrir, se você clicar em algum contato, você verá que a página de detalhes será exibida

em forma de modal (Figura 4).

Figura 4. Modal com detalhes do contato.

Conclusão

Nesta segunda etapa aprendemos como é simples criar uma nova página e transferir informações entre elas.

No próximo artigo nós iremos aprender como editar esses campos e estilizar a nossa aplicação. Até o próximo mês!

Sobre o Autor Ricardo Barbosa Crivelli , mais conhecido como Rico Crivelli, � formado como

Bacharel em Sistemas de Informa��o e Licenciado em Computa��o pela Universidade

Estadual do Norte do Paran�, atualmente � T�cnico em TI no Instituto Federal de S�o Paulo � C�mpus Avar�. Tem como especialidade a linguagem PHP e o framework Symfony, apesar de adorar trabalhar com front-end e desenvolvimento mobile e possuir as certifica��es

COBiT 4.1 Foundation e Delphi 2006 Developer.

E-mail: rico@capim.art.br

TFileStream – Técnicas Avançadas – Parte II

Olá desenvolvedores Delphi, vamos nesta nossa continuação explicar mais detalhes pra finalizar

nosso maravilhoso projeto de leitura de arquivos de tamanho gigantes com técnicas avançadas de

TFileStream!

O propósito destes dois artigos é implementar através de um objeto de TFileStream o

carregamento, leitura e alteração (escrita) de arquivos de modo texto de qualquer tamanho, realizando

também operações de procura neles. O interessante é que podemos carregar tudo em um objeto

como um descendente de TListView em modo virtual, cujas linhas do arquivo carregado são lidas em

modo de execução (o programa não sabe o que vai ler até que a solicitação da linha seja indicada

como este parâmetro) e que todas estas linhas são armazenadas em um objeto da classe TInt64List,

que é uma classe que implementa um array de Int64, ou seja, armazena todos os offsets (bytes das

posições encontradas – cada posição que encontra o caracter “quebra de linha” #10 – linefeed) que são

todas as linhas encontradas. Resumindo, o programa solicita um número de linha pra ler -> o

programa verifica se esta linha está inserida no objeto da classe TInt64List, se tiver, retorna a posição

do byte em que encontra esta linha (offset) -> uma função do nosso programa irá ler a partir deste

offset até encontrar o próximo caracter “quebra de linha” ou então o caracter de fim de arquivo. Se não

estiver neste objeto de TInt64List, então nada será retornado pois não há a linha cadastrada neste array

pra ser exibido. Meus testes aqui foram realizados com 8GB de memória RAM e processador iCore5. Como era

pra testar, então resolvi carregar um arquivo bem grande pra dentro do nosso programa – um arquivo

de 12 GB. Os testes foram incríveis, em dois minutos e meio ele foi carregado com sucesso pra dentro

do programa. Vamos ver as telas e o quadro comparativo abaixo:

1 – Tela de informação exibindo que o arquivo de 12GB (“c3.log”) foi carregado com sucesso.

2 – Tela principal do aplicativo, com o arquivo carregado de 12 GB em 2 min e 36 seg.

3 - Tela principal do arquivo – exibindo o final do arquivo de 12GB.

4 – Tela de edição do arquivo, editando a última linha do arquivo de 12GB (alterando a string da linha “FIM DO ARQUIVO !!” para “END OF

FI

5 – Linha alterada do arquivo de 12GB pra “END OF FILE”.

6 – Arquivo carregado novamente, depois de ter sido finalizada sua edição, exibindo como última linha a string “END OF FILE” no lugar daquela

“FIM DO ARQUIVO !!” de antes. Quadro comparativo de arquivos, funcionalidades e tempo processado (obs: tempo aproximado).

Tamanho

Leitura Início da

Edição

Finalização da

Edição

Procura

Procura e

Substituição

12 GB

2:36 min 8:02 min

6:09 min

5:56 min 4:19 min

6 GB

1:24 min

5:08 min

3:15 min

4:06 min

4:48 min

2 GB

11 seg

26 seg

33 seg

52 seg

1:15 min

1 GB

8 seg

8 seg

16 seg

42 seg

45 seg

25 MB

404

milesimos seg

44 milesimos

seg

110 milesimos

seg

6 seg

1 seg

Com o quadro acima podemos perceber que quanto maior for o arquivo maior o tempo pra realizar suas

operações.

Mas o tempo gasto não chega a ser entediante nem pesado pra ler e visualizar um arquivo gigantesco de 12 GB, por

exemplo. Hoje em dia muitas aplicações “travam” pra fazer um processamento semelhante pra ler um arquivo com

muito menos tamanho que isso – já presenciei aplicações pra ler tamanho de arquivos de 50 MB quase que

estourando a memória, levando vários e vários minutos pra realizar este processamento – por isso foi a principal

razão de eu querer desenvolver este projeto, pra contribuir principalmente com a comunidade de desenvolvedores

através deste aplicativo com esta eficiência de processamento, pra ler e editar arquivos de tamanho ilimitado – algo

indisponível na internet! Processo de divisão por partes. O processo de edição de arquivos compreende em dividir o arquivo em várias partes. O programa vai dividir

um arquivo em várias partes aproximadas de 24414 MB até totalizar todo o arquivo. Isso será feito no mesmo diretório

onde se reside o arquivo; será criado um subdiretório com o nome deste, e dentro dele estarão todos os seus arquivos

divididos. O programa gerenciará todos estes arquivos divididos temporários dentro de si, exibindo um a um e

podendo ser editados, parte a parte, de dentro do programa. Mais ainda, o programa contará com um suporte de

localização de palavras pra filtrar todas as ocorrências dos arquivos encontrados com elas. Então, pra recapitular, o

nosso programa vai dividir o arquivo original. As partes estimadas de divisão seguirão sempre à mesma fórmula: total

de partes aproximadas de divisão => corresponde ao tamanho do arquivo original (em bytes) / 25000000 bytes

(25000000/1024 => 24414,0625 MB). Um arquivo inferior ao valor de 24 MB sempre resultará em apenas uma parte a ser dividida. Outra questão

são requisitos essenciais pra funcionar, como permissão e espaço no diretório a ser utilizado pelo programa – senão

este processo não irá funcionar, bem como obviamente a memória disponível do computador e a quantidade de

programas executando no momento da execução do programa – tudo isso pode interferir negativamente no nosso

programa. É claro que quanto mais memória tiver e mais rápido o processador for, os resultados tendem a ser

melhores, ou seja, mais rápidos – o tempo de resposta será mais rápido.

Outras telas:

7 – Tela de pesquisa de palavras (observe o painel inferior esquerdo; um objeto de TListBox contendo as palavras pesquisadas com sucesso juntamente com as

linhas onde foram encontradas).

8 – Tela de edição de arquivos, exibindo todas as partes e seus conteúdos associados.

Conclusão

Vimos uma nova estratégia e uma nova abordagem, de como ler arquivos gigantes e também de como editar

estes arquivos gigantes. Os arquivos nunca serão carregados de uma vez no programa, porque pra ler ele usufruímos

de componentes renderizados em modo virtual, onde não são proprietários de seus dados, ficando a cargo de uma

estrutura baseada em vetores em memória pra agilizar esta operação, onde estes vetores armazenam as linhas e

offsets das posições de todos os caracteres de “line feed” (quebra de linha) de todas as linhas, por sua vez apontando

pro arquivo a ser lido este parâmetro da linha a ser pesquisada, retornando finalmente a frase encontrada até chegar

ao próximo caracter de quebra de linha ou ao fim do arquivo. Funcionando assim o processamento de leitura é

significadamente reduzido; arquivos na casa dos

GB serão visualizados bem rapidamente e sem onerar o processamento da sua aplicação!

Pra alterar um arquivo, outra abordagem será feita; o arquivo é subdividido em partes, onde todas as partes

totalizam o arquivo em si, e o usuário poderá escolher a parte que quer alterar, abrindo ela e editando o conteúdo

desejado, abrindo outra parte, etc; e também poderá pesquisar alguma string em todas estas partes, através de uma

rotina multi-thread pra este propósito – tudo isso pra satisfazer a eficiência de uma resposta com qualidade. Portanto, esta foi a última parte da implementação deste projeto, abordando todos os itens de leitura, edição,

procura e procura com alteração de conteúdos, tudo baseado pela classe TFileStream pra empregar estas

funcionalidades.

Bons estudos com este projeto, totalmente free e disponíveis a todos os desenvolvedores Delphi!

Sobre o Autor

Hamden Vogel, Consultor TheClub

E-mail: suporte@theclub.com.br