Friday, December 9, 2016

Introdução ao NoSQL

Assistam esse vídeo sobre bancos de dados NoSQL. É uma rápida introdução aos bancos de dados não-relacionais, que estão com utilização em alta nas aplicações web, tendo deslocados os seus irmãos mais velhos relacionais (SQL), graças à sua farta replicação em servidores múltiplos, obtendo segurança na disponibilidade dos dados em qualquer momento e país desejado.

Wednesday, November 23, 2016

Uma introdução aos frameworks CSS.

Um vídeo sobre "CSS frameworks", especialmente úteis para programadores e desenvolvedores que não têm muita vocação para artistas, que não têm muito treinamente para deisgners, apesar de ser útil também para esses últimos.
Depois de uma introdução, mostramos um rápido exemplo do uso do Bootstrap, sem dúvida o mais famoso framework desse tipo. https://youtu.be/tE1QS0DUW54

Monday, November 21, 2016

Mais vídeos no canal "O Programador" no Youtube

Você quer aprender a criar thumbnails, aquelas capinhas que aparecem nos vídeos do canal? Assista esse vídeo como criá-las, usando o software livre (e grátis) Gimp, que se equivale aproximadamente ao Photo$hop.
 


 Esse outro vídeo mostra como criar um ícone no Android (celular ou tablet) para abrir um livro, de forma que a imagem da capa do livro apareça ness ícone.  Isso é feito diretamente no celular ou tablet, usando o File Shortcut ou app similar para criar o link.



Finalmente, esse vídeo conta a história do primeiro bug encontrado nos computadores, uma mariposa (de verdade) que se infiltrou nos contatos de um relay, fazendo que a máquina não funcionasse da forma esperada. Parece piada, mas veja o vídeo para entender.



Finalmente, se você gostou desses vídeos, marque-os com um "like" e não se esqueça de se inscrever no canal, para ser avisado toda vez que um novo vídeo for postado, o que está acontecendo com uma frequência relativamente grande.  Obrigado!

Thursday, November 17, 2016

Dois vídeos para usuários Android

Esses dois vídeo são interessantes para quem tem um celular ou tablet Android.  Eles mostram como é possível adicionar memória extra, na forma de um pendrive, ou outros dispositivos como um teclado e mouse externos. No vídeo do tecaldo, usamos um mini-teclado de baixo custo, que é o companheiro ideal para escrever textos mais longos, sem ser obrigado a utilizar a "touch screen" do celular/tablet, o que reduz a velocidade (para menos para quem não é muito versado em toque rápido). O mouse também tem sua utilidade, para posicionar precisamente, utilizar com programas de desenho (o dedo é muito "gordo") e outras aplicações.
Bom, tenho certeza que vocês encontrarão um monte de utilidades para essa nova descoberta.  Assistam os dois vídeos.

Este é o primeiro. Introduz a conexão do pendrive no celular e mostra o pequeno adaptador que usamos para isso.


Este é o segundo vídeo.  Mostra outra possibilidade do adaptador para interfacear um mini-teclado e mouse. Também mostra outro tipo de adaptador, com cabo flexível.

Tuesday, November 15, 2016

Slides da Palestra na Consoline 2016 (Congresso de Software Livre do Nordeste)

Os slides da minha palestra no Consoline 2016, que foram apresentadas recentemente em Caruarú e teremos nova apresentação em Recife, no próximo dia 26 de novembro, estão disponíveis no Slideashare (link a seguir).  Para mais informações sobre o evento, visite o site do próprio evento em http://www.softwarelivrene.org/.

Slides da palestra: http://pt.slideshare.net/RildoPragana/palestra-caruaru2016

Meu site no Slideshare:  http://pt.slideshare.net/RildoPragana


Friday, July 8, 2016

Free "Programming AngularJS Applications"

Somente amanhã (sábado), meu livro "Programming AngularJS Applications" estará disponível gratuitamente. Aproveitem.
Obs: a versão em portugues não está na promoção, mas ele é bem baratinho.
Only tomorrow (saturday) my book "Programming AngularJS Applications" will be available for free.

Monday, June 20, 2016

Código do livro "Meteor Prático" - code for the book "Practical Meteor"

Está disponível no Github, https://github.com/rpragana/meteor-exemplos  alguns exemplos para acompanhar o livro "Meteor Prático".
Para executar o código, baixe o conteúdo e vá para o diretório onde ele está, executando meteor run. Abra o navegador então em http://localhost:3000 e pronto.

It is available on Github, https://github.com/rpragana/meteor-exemplos some examples to accompany the book "Practical Meteor".
To run the code, download the repostiory and go to the directory where it is, then exec meteor run. Open your browser pointing to http://localhost:3000 and you're done.



Wednesday, June 1, 2016

Como funciona o Meteor


Para resumir o funcionamento de Meteor numa só palavra, esta seria a reatividade.  
Apesar da terminologia ser nova, já tivemos contato com o conceito há bastante tempo, nas planilhas eletrônicas.  Uma planilha pode ter uma célula com uma expressão matemática que envolve valores de outras células.  Ao modificar os valores de uma destas últimas, a célula dependente das outras é recomputada. Essa “mágica” introduzida desde VisiCalc (primeira planilha, em 1979) e utilizada até hoje, faz com que a programação seja mais simples, sem nos preocuparmos em “recalcular” variáveis que dependem de outras, ou seja, a reatividade.
Como é a reatividade em Meteor? Essencialmente, consiste em fazer com que um objeto reativo avise ao sistema que algo no seu interior foi modificado. Esse tipo de objeto (que “avisa”) é classificado como um fonte de dados reativa.  Evidentemente, precisaremos do outro lado, o que irá “ouvir” quando essa mudança ocorrer, sendo esse lado o contexto reativo, ou ainda a computação reativa, parte do código que será executada quando essas mudanças na fonte reativa forem detectadas.
O Meteor tem vários tipos de variáveis que são reativas, como variáveis de sessão (Session), cursores de um banco de dados, variáveis criadas com ReactiveVar, e alguns outros tipos menos comuns. O outro lado, o do contexto reativo é normalmente associado aos templates, parte do mark-up similar a html normal, mas que será preprocessado para se transformar na definição da página. O Meteor usa Spacebars, a parte mais significativa do módulo Blaze, e sua própria versão do Handlebars (http://handlebarsjs.com/) para definir seus templates. Helpers na forma {{variable}} são transformados por subistituição do seu valor pelo resultado retornado por uma função (chamada de helper) associada a esse template onde ele se encontra. Cada template tem um nome e representa uma definição parcial do html que irá formar nossa página web (ou view, como preferimos chamá-la).
Vejamos um exemplo bastante simples. Primeiro o html (com definição dos templates):
<body>
  <h1>Welcome to Meteor!</h1>
  {{> simples}}
</body>
<template name="simples">
<span>{{valor}}</span>
</template>
O template está sendo definido com o nome “simples”, e está sendo incluido no corpo da página pela forma {{> simples}}.
Agora vejamos como fica o nosso javascript para fornecer o conteúdo desse template:
Template.tmpl.helpers({
   
'valor': function(){
       
return "Uma string simples como conteúdo.";
   
}
});

{{valor}} é substituido no template pelo seu conteúdo, que é o valor retornado pela função.
Se esse helper utilizasse uma variável reativa, nosso exemplo seria perfeito, mas este ainda não é o caso.

Há várias maneiras de criarmos uma variável reativa. As mais úteis nos nossos programas são as criadas com o módulo ReactiveVar, ou com o módulo Session, sendo esta última global, portanto, não muito recomendável. O documento de um banco de dados MongoDB (ou minimongo, no cliente) obtido através de um cursor, já é automaticamente uma variável reativa.  Vejamos como definir nossa própria variável reativa com ReactiveVar.
<template name="projeto">
   <textarea id="desc"></textarea>
   <!-- mostra o resultado da variável -->
   <div>{{projDesc}}</div>
</template>
Esse template pode ser incluido na página web acima, com {{> projeto}}, acrescentado no lugar desejado. Ele irá mostrar uma “textarea” para a entrada e uma “div” para display da variável, sincronizadas graças à reatividade da variável projDesc.
Template.projeto.onCreated(function() {
  this.projDesc = new ReactiveVar();
});
Template.projeto.events({
        "keyup #desc": function (event, instance) {
            event.preventDefault();
                var value = $(event.target).val();
            instance.projDesc.set(value);
          }
});
Template.projeto.helpers({
          projDesc: function () {
            return Template.instance().projDesc.get();
          }
});
No diretório do projeto teremos que adicionar inicialmente o pacote reactive-var:
meteor add reactive-var
e então incluir o código acima no nosso javascript. Esse código tem 3 partes:
  • evento “onCreated”, com uma função que será executada na criação do template. Aí definiremos uma nova variável reativa, com o nome “projDesc”.
  • adicionaremos um event handler (manipulador de eventos) para processar o eventokeyup (subida de tecla) no objeto do DOM com o id #desc, que corresponde à nossa textarea, mas que poderia ser também, por exemplo, uma input ou outro tag.
    Evitaremos a propagação desse evento (opcional) e usaremos o seletor jQuery $(event.target) para obter o objeto do evento e então conseguir o valor dele (função val()).  Depois iremos armazenar esse conteúdo na nossa variável reativa, com a função “set”. Essa variável é o “projDesc” da instância corrente do template. Isso porque podem existir múltiplas instâncias desse mesmo template usadas na página.
  • os helpers nesse caso, especificamente o de nome “projDesc” (único presente) é uma função que deve retornar o valor da variável reativa para a view.  Isso se consegue com a função “get()”.

Dica 

O evento acima usa “keyup #desc”, ou seja, inclui o id (em outros casos, uma classe CSS) como seletor.  Os ids e classes do CSS foram originalmente projetados para controlarmos a apresentação dos elementos, não como seletores de eventos.
O artigo https://www.codementor.io/tips/7473712871/a-better-way-to-attach-event-listeners-in-meteor
Mostra uma forma alternativa e elegante, usando um atributo “data-” para isso.

<template name="projeto">
   <textarea data-action=’projTexto’></textarea>
   <div>{{projDesc}}</div>
</template>
E então o evento correspondente ficaria (com o seletor tipo jQuery):

Template.projeto.events({
        "keyup [data-action=projTexto]": function (event, instance) {
            event.preventDefault();
                var value = $(event.target).val();
            instance.projDesc.set(value);
          }
});

Sunday, May 8, 2016

Os sete princípios de Meteor

Princípio #1 - Dados na fiação

Em resumo, “Não envie HTML pela rede. Envie simplesmente os dados e deixe o programa cliente decidir em como tornar visível esses dados”.  A idéia é enviar JSON para o navegador e ele o renderiza como um template handlebars ou spacebars. A propósito, Spacebars é a linguagem de templates do Meteor, inspirada no Handlebars, mas customizada para produzir templates reativos quando compilada.

Princípio #2 - Uma só linguagem: JavaScript

Quem está acostumado a usar Rails, Python ou Java no lado do servidor, geralmente acredita em utilizar o mínimo de javascript possível. Entretanto, faz muito mais sentido usar no lado do servidor a mesma linguagem que já somos obrigados a usar no navegador (browser).  Isso é perfeitamente válido, pois o Nodejs é uma implementação bastante veloz e efetiva para usar no servidor, e é disponibilizada no Meteor.  Alguns nomes de diretórios (pastas) têm significado especial: ‘server’ e ‘client’ contém programas que irão ser executadas somente no servidor ou navegador (cliente) respectivamente. O diretório ‘lib’ por sua vez será executado em ambos. O ‘public’ será considerado a raiz nas urls do servidor.

Princípio #3 - Banco de dados em todos os lugares

A mesma API (interface de programação) funciona tanto no lado do servidor como no lado do cliente. Utilizando MongoDB no servidor e Minimongo (uma mímica do MongoDB), as mesmas Collections podem ser acessadas no código que irá rodar no servidor ou cliente. A replicação dos dados será feita através do protocolo DDP (que falaremos adiante) transparentemente para o programador.

Princípio #4 - Compensação de latência

Uma simulação dos modelos e prefetching dos dados do banco é feita de forma que a conexão com o mongodb no servidor nos dá a impressão de ser local, praticamente sem retardos.

Princípio #5 - Reatividade de todo o stack

O default de todas as operações é “executar em tempo real” (real time). Todas as camadas, desde o banco de dados ao template possuem uma interface event-driven, ou seja, que pode ser controlada via eventos. Ao clicar um botão, ou digitar alguns caracteres, o usuário vê uma resposta imediata.

Princípio #6 - Abraçar o ecosistema

Formado a partir da combinação de muitos pacotes de software livre (e open source), Meteor tenta se integrar perfeitamente com eles, no lugar de substituí-los por outros programas próprios. Ademais, dada sua filosofia e arquitetura, fica bastante simplificado a adoção de outros programas livres disponíveis sem (ou com um mínimo) modificações.  Por exemplo, você pode adotar bibliotecas do Node.js para a maioria das funções que o próprio Meteor não tem prontas.

Princípio #7 - Simplicidade se equipara a produtividade

A melhor maneira de se fazer algo parecer simples é fazendo que esse algo seja simples na realidade. Se atinge esse objetivo através de APIs claras e elegantes.  Na prática, sabemos que nada pode ser tão simples assim, o que não consiste numa razão para rejeitar esse princípio.


Introdução ao Meteor



Existem inúmeras bibliotecas javascript voltadas ao desenvolvimento de aplicações para o navegador.  Ficamos restritos ao uso do javascript, ou então a única alternativa possível é um plugin, instalado separadamente, que possa implementar a outra linguagem, de forma muito inconveniente. Essa idéia  levou à derrocada o Flash e seus derivativos, bem como produziu o fracasso dos applets java no navegador.
Por outro, precisamos de um servidor, que pode ter como linguagens de implementação o java, python, ruby (rails), ou inúmeras outras. Mas também podemos utilizar javascript do lado do servidor, para nossa vantagem, graças à existência de implementações como nodejs. Isso simplifica consideravelmente o desenvolvimento de uma aplicação completa, pois o mesmo programador pode escrever código para os dois lados da conversação na mesma linguagem, javascript.  É assentado sobre essa vantagem que surge o Meteor (meteoro em inglês), compartilhando em muitos casos exatamente o mesmo código dos dois lados, cliente e servidor e até mesmo no banco de dados.  Meteor trata o problema de criar aplicações web de forma completa, desde a definição de código no servidor e cliente, bem como na integração com o banco de dados, este último preferencialmente MongoDB (NoSql), além de fornecer as ferramentas de administração dos programas.

Meteor existe desde 2011, tendo criado a fama de ser a ferramenta ideal para a criação de protótipos de aplicações, mas atualmente está preparado para ser a solução completa de aplicações comerciais.  Ele transforma a aplicação em algo simples de ser compreendida, e permite que o desenvolvedor volte o foco para a funcionalidade da aplicação, no lugar de ficar se preocupando com sincronização de varáveis com a inteface gráfica ou servindo páginas para a aplicação. O core (núcleo) de Meteor é reativo, como veremos mais adiante, o que significa que atualizando as tabelas do banco de dados se reflete imediatamente e automaticamente nas variáveis e visões (views) da aplicação, mesmo que existam mútiplos clientes conectados ao mesmo tempo no servidor. Essa automação se deve em grande parte pela forma com que os módulos da aplicação se comunicam entre si, via um protocolo chamado DDP (Distributed Data Protocol) que governa a transferência de dados entre o servidor e os clientes.