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: [email protected]
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: [email protected]
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: [email protected]