Deprecated: ltrim(): Passing null to parameter #1 ($string) of type string is deprecated in /home/inovacao/public_html/yeapf.com/wp/wp-includes/wp-db.php on line 3030
Pretendo deixar cada uma das postagens o mais simples possível. Mas, não é possível proceder com este se antes você não instalou e configurou seu ambiente de desenvolvimento e o YeAPF. Este post (http://inovacaosistemas.com.br/wp/?p=25) lhe pode ajudar a fazer isso, caso não o tenha feito ainda.
Introdução
Nos primórdios da web lá em 1989, sir Tim Berners-Lee entendia com profunda clareza e projeção futurística que vincular documentos em formato mais ou menos livre era a melhor forma de espalhar conteúdo pela internet para os simples mortais.
Isso nos levou a um conjunto imenso de páginas estáticas vinculadas com outras que está muito bem para informação que não muda mas que não serve muito na hora de fazer aplicativos em que a dinâmica da coisa é tão importante quanto o seu conteúdo.
O padrão Ajax surge como uma resposta para o problema de ter que trazer a página inteira toda vez que o usuário clicar em algum conteúdo. Agora, em lugar de a página ter que ser requisitada, produzida e renderizada basta só trazer o conteúdo e aplicar esse conteúdo a um esquema ou formulário já pronto para ser visualizada pelo usuário. Isso faz com que a experiência de navegação se torne mais suave e nos libera de uso de preciosos ciclos de relógio do servidor, do cliente e da paciência do usuário.
Simplificando muito as coisas, REST é mais ou menos a mesma coisa só que nos permite direcionar nossa requisição para um outro servidor diferente do que hospeda nosso script/página, por exemplo. Claro, os puristas de plantão vão me esganar se me encontram na rua, mas acho essa simplificação necessária e suficiente para um programador mortal entender do que se trata e os links oferecidos somado à sapiência que repousa dentro da cachola que alguns levam sobre os ombros, lhe permitirão fazer melhor distinção
A coisa prática
Se você já conseguiu por para rodar o YeAPF e fez seu primeiro aplicativo com ele, então podemos nos estender em dois exemplos que mostrarão a simplicidade de desenho do YeAPF e como ele coloca ao alcance do programador o Ajax e o REST de forma simples e segura.
O que faremos a seguir pretende como sempre, ser um roteiro bem básico para chegar ao fim desejado. Neste caso demonstrar o uso das interfaces Ajax e REST. Nessa ordem.
O roteiro será o seguinte: 1) Criar uma pasta para nosso projeto e configurar YeAPF nessa pasta, 2) Criar os três arquivos que nosso projeto precisa. 3) Aprender com o exemplo
1) Criando uma pasta para o projeto
Seguindo a ideia dos primeiros passos, a pasta principal é /var/www e nosso projeto estará sob ela e a chamaremos testeAjax. Então o nome completo é /var/www/testeAjax.
$ cd /var/www $ mkdir -m 0777 testeAjax
Com a pasta pronta, copiamos o que necessitamos do YeAPF para construir nosso aplicativo
$ cd /var/www/testeAjax $ cp /var/www/YeAPF/appSkeleton/configure.php . $ cp /var/www/YeAPF/appSkeleton/query.php . $ cp /var/www/YeAPF/appSkeleton/e_body.xml .
Caso você já tenha o sgug.ini do primeiro aplicativo, copie ele para a pasta também, se não copie o yeapf.db.ini do YeAPF/appSkeleton para a pasta e modifique ele. Depois disso (qualquer um dos dois passos escolhidos) rode o configure.php desde seu navegador como sempre: http://localhost/testeAjax/configure.php
Feito isso, você deve ter o sgug.ini (se não tinha), a pasta lock a pasta logs, a pasta .config e o arquivo yeapf.php Se você não tem isso, ou obteve um erro na hora de rodar o configure.php, revise o post de primeiros passos novamente até chegar num resultado satisfatório.
2) Criar os três arquivos que nosso projeto precisa
Iremos usar três arquivos no nosso projeto: exemploAjax.php que é nosso ponto de entrada, i_exemploAjax.html que é nosso arquivo principal HTML e meuEvento.php para processar o único evento que iremos ter.
Comecemos por exemploAjax.php
<?php
// fazer uso do 'yeapf.php' que o configure.php gerou
require_once "yeapf.php";
// processar o arquivo 'i_exemploAjax.html'
processFile('i_exemploAjax');
?>
Depois i_exemploAjax.html
<style>
tr:nth-child(odd) { background:#DADADA; }
tr:nth-child(even) { background:#B7DDF9; }
</style>
<script src='/YeAPF/yloader.js'></script>
<script src='/YeAPF/ycomm-ajax.js'></script>
<table id=minhaTabela>
</table>
<script>
ycomm.invoke(
'meuEvento',
'listarAutores',
{},
function (status, err, data) {
ycomm.dom.fillElement('minhaTabela',
data);
}
);
</script>
e finalmente meuEvento.php
<?php
function qmeuEvento($a) {
// indico que quero usar nomes nas colunas
// na hora de enviar o resultado para o cliente
$useColNames = true;
// vou usar somente 20 linhas no resultado
// poderia indicar -1 para que o resultado
// completo fosse para o cliente
$countLimit=20;
// converto meus parâmetros de entrada
// em variáveis locais
// (Neste exemplo não estou enviando parâmetros)
extract(xq_extractValuesFromQuery());
// crio um string com o comando SQL
// que me permitirá extrair os resuldados
// do meu banco de dados
$ret="SELECT a.*, u.nome as nomeUF
FROM autores a
left join ufs u
on u.uf=a.ufNascimento
order by nome";
// gero a saída do jeito que o query.php
// precisa receber.
xq_produceReturnLines($ret, $useColNames, $countLimit);
}
?>
Tentamos manter o exemplo o mais simples e funcional possível. Então ele é pouco mais do que uma estrutura de arame em que ficam claras as partes que o compõem. Para maximizar a compreensão, marcamos com sublinhado e negrito as chamadas às funções PHP que são do YeAPF. Isso facilita as coisas na hora de procurar ajuda na internet. Tudo o que não estiver marcado, é PHP e você pode achar informação abundante no próprio site da PHP. O mesmo vale para o javascript.
Como dissemos, o ponto de entrada é no exemploAjax.php, então, chame ele para ver como se comporta: http://localhost/testeAjax/exemploAjax.php
Se tudo deu certo, sua tela vai parecer-se com a da esquerda. Digo parecer-se porque você vai ter umas colunas deslocadas e não vai ter títulos nelas.
3) Aprendendo com o exemplo
Um passo a passo dos acontecimentos seria como segue:
- O usuário abre o endereço do ponto de entrada
- O servidor de http (no caso o apache) repara que se trata de um arquivo .PHP e o repassa ao interprete de dita linguagem.
- O script exemploAjax.php é executado cuja última linha utiliza o YeAPF para processar o arquivo i_exemploAjax.html
- Como este arquivo não tem nada de especial, ele é repassado do jeito que está para o apache que por sua vez o devolve ao cliente que começou a chamada.
- Uma vez do lado do cliente, dois scripts são requisitados ao mesmo servidor de origem: yloader.js e ycomm-ajax.js
- Após isso, o script que está no final é chamado (ycomm.invoke( … )) que por sua vez volta a invocar o servidor, desta vez usando o query.php do YeAPF
- O query faz seu dever de casa e carrega o script meuEvento.php que contêm uma função chamada qmeuEvento() que processa a chamada realizada pelo script no html
- O query.php retoma o controle e gera um arquivo temporário .xml usando o e_body.xml que o devolve ao cliente.
- O cliente (no caso o próprio ycomm) recebe o retorno e preenche a tabela chamada minhaTabela usando a função ycomm.dom.fillElement()
Qualquer iniciado reparará que usamos muitos mais passos que na primeira versão do post anterior. Porém há algumas vantagens em fazer deste jeito.
- A saída do servidor é mais curta o que significa menos tempo de processamento e (principalmente) menos tráfego na rede.
- Esta saída é também mais limpa o que significa que a manutenibilidade do código é maior o que me garante mais tempo de vida útil do mesmo.
- Os dados estão claramente separados da interface o que me ajuda na reusabilidade do código
- A sensação de velocidade do usuário é maior. Isto porque o ycomm faz seu processamento concomitantemente com o carregamento do DOM. Isto não é uma característica única do YeAPF, o Ajax tem duas formas de operação e uma delas é a assincrônica que é a que usamos aqui.
3.a) Melhorando o código
Vamos fazer duas alterações no código do html para ver como isso afeta o nosso aplicativo. As duas alterações são cumulativas. Primeiro colocaremos títulos nas colunas da tabela. Ela ficará assim:
<table id=minhaTabela> <thead> <tr> <th>Nome</th> <th>Estilo</th> <th colspan=3>Nascimento</th> <th>Falecimento</th> </tr> </thead> <tbody></tbody> </table>
Rode e verá como a tabela agora possui títulos. Porém, agora os dados não coincidem com os títulos e continuamos com o problema de algumas colunas vazias. Isso é assim, porque no banco de dados algumas colunas estão de fato vazias e quando são envelopadas, são descartadas.
A forma mais simples de resolver isso é indicar quais são as colunas e em que ordem elas vão. Nosso script então fica da seguinte forma:
<script>
var minhasColunas = [ 'nome', 'estiloPrincipal',
'dataNascimento', 'localNascimento',
'nomeUF', 'dataFalecimento' ];
ycomm.invoke(
'meuEvento',
'listarAutores',
{},
function (status, err, data) {
ycomm.dom.fillElement('minhaTabela',
data,
{ columns: minhasColunas }
);
}
);
</script>
Repare como o vetor minhasColunas é passado como argumento para a função ycomm.dom.fillElement(). Ele nada mais é do que um simples vetor contendo os nomes das colunas. Se tudo der certo, você agora está de posse de uma tela bastante similar à mostrada no inicio.
Estando tudo certo, vamos agora melhorar ainda mais para mostrarmos a coluna de data de nascimento formatada no padrão que usamos em terras tupiniquins ( e charruas, mapuches, ibericas, etc) ou seja dd/mm/yyyy.
Altere o HTML para que minhasColunas fique definido da seguinte maneira:
var minhasColunas = [ 'nome', 'estiloPrincipal', 'calc_dtNasc', 'localNascimento', 'nomeUF', 'dataFalecimento' ];
E o meuEvento.php para que fique assim:
<?php
// função que será chamada em cada linha de dados
// e formatará a data
function calc_dtNasc($dados) {
return dataFormatada($dados['dataNascimento']);
}
function qmeuEvento($a) {
$useColNames = true;
$countLimit=20;
$ret='';
extract(xq_extractValuesFromQuery());
$ret="SELECT a.*, u.nome as nomeUF, null as calc_dtNasc
FROM autores a
left join ufs u
on u.uf=a.ufNascimento
order by nome";
xq_produceReturnLines($ret, $useColNames, $countLimit);
}
?>
Repare que acrescentamos um campo ficticio ‘calc_dtNasc‘ que coincide com a existência de uma função com o mesmo nome. Esta função chama dataFormatada() que é uma anacronismo e não estará presente a partir da 0.9.x mas resolve nosso problema. Ela pega o formato interno (yyyymmdd) ISO 8601 e o transforma para o formato francês dd/mm/yyyy
calc_dtNasc aparece então em três lugares: no vetor que define as colunas da tabela a ser mostrada, como função global e no comando SQL que montará os dados.
3.b) Invocação ao beijo de Ariadna
Ariadna é a musa inspiradora de Mastropiero em um show de Les Luthiers: Mastropiero que nunca e é intraduzível ao português e em alguns casos ao próprio espanhol. Mas tudo bem, o lance é assim: Ariadna é invocada e o cantor recebe um beijo (será?)
Com YeAPF há algumas invocações também. O lado cliente do seu aplicativo invoca o servidor que por sua vez responde com alguns resultados (será?)
O ycomm.invoke() recebe no mínimo dois parâmetros: s e a. O tripé que o paradigma de programação YeAPF propõe está composto de s ou sujeito (subject), a ou ação (action) e u que representa a sessão do usuário (user). E o representamos assim: (s, a, u). No nosso exemplo, o a não está sendo nem usado pois há só uma ação sendo realizada, mas como ele não pode faltar, colocamos ele com a melhor cara possível. Já o s é imprescindível (postagens posteriores mostrarão que não é assim, mas, vamos lá) e define o nome do .php (mais uma barbaridade no futuro) e a função a ser chamada.
Assim sendo, por ser s ‘meuEvento’ tenho então um .PHP chamado meuEvento.php e uma função chamada qmeuEvento(). A letra ‘q’ no inicio (prefixo) denota o ponto de entrada do evento, isto é, ele é chamado pelo query.php. Ou seja, veio de um ycomm.invoke. Os outros prefixos são ‘f’ para preprocessamento, ‘r’ para REST, ‘w’ para WebSocket ( e REST multiplexado ), e ‘g’ para gráficos. Exite também o prefixo ‘c’ mas atende a outro padrão que analisaremos em outro momento.
3.c) Botando nome nas crianças
A regra (que não é rígida) para nomear um s é simples: use ao menos um substantivo como em ‘evento‘. Já para a é de uma simplicidade similar: use ao menos um verbo como em ‘listar‘. Para os que faltaram ao primário, o s representa coisas e o a ações. Agora não só os programadores me esganam mas também os professores de língua portuguesa. Tá, o lance é manter as coisas bem simples. Entendo que o binômio (s,a) é a menor unidade para representar um evento único no seu projeto e ao termos um tripé (oh mudança de ilustração no meio da frase) com s, a e u temos um modelo seguro de eventos. Depois vamos a ver que podemos restringir o acesso a este ou aquele evento segundo os direitos do usuário que está conectado.
A ideia é pensar no próximo sempre. No próximo bug que você precisará exterminar. No próximo programador que pegar seu código. No próximo semestre em que você vai ter que ver seu próprio código novamente. No próximo empregador que vai querer ver seu jeito de codificar (isso existe?). Enfim, brincadeiras à parte os programadores temos a mania de acharmos que nosso código é 3I: Inquebrável, Imperecedouro, Infalível. E a verdade é que erramos mais do que acertamos. Então a ideia por trás do tripé é eliminar a elaboração de uma nova e mais perfeita roda redonda. Enfim: simplifique, 1) identifique seus eventos pensando no próximo 2) utilize sempre que possível um verbo para o a e um substantivo para o s. 3) por mais de que pareça uma camisa de força ela é linda e já já você se acostuma com ela.
Você precisa fazer login para comentar.