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
Deprecated: Creation of dynamic property Jetpack_Carousel::$localize_strings is deprecated in /home/inovacao/public_html/yeapf.com/wp/wp-content/plugins/jetpack/modules/carousel/jetpack-carousel.php on line 353
Esta é uma das continuações deste artigo.
Por que criar aplicativos mono página?
Bom, a grande virtude de um aplicativo mono página é que tudo o que você precisar está pronto assim que o usuário carregou a página inicial e caso sejam necessárias mais páginas, formulários, tabelas elas também podem ser carregadas dinamicamente. Já postei algumas outras razões e como fazer no artigo: Aplicativos mono página
Sempre?
Claro que não vai usar aplicativos mono página para tudo. Porém, todo grande aplicativo pode ser dividido em pequenos webapp mono página que são carregados em diferentes iframe por exemplo ou ainda em telas separadas ou como telas substitutivas completas.
Seja como for, o aplicativo mono página permite manter a coerência do desenvolvimento ao pelo menos agrupar uma funcionalidade de um aplicativo maior.
Todavia, com a tendencia reducionista e minimalista que os usuários tão desesperadamente clamam (e com razão) um aplicativo mono página resolve a maior parte do tempo.
Mãos à obra.
Se você é iniciante, vai precisar de um WAMP ou LAMP instalado e funcionando. Consulte esta outra publicação (Primeiros Passos com YeAPF) caso não tenha feito isso ainda.
Vai precisar também da última versão do YeAPF que na hora de produzir este artigo estava na 0.8.40. Exploda ela na sua pasta www. Por exemplo, se estiver usando Red Hat seria: /var/www/html/YeAPF, já no Debian ficaria em /var/www/YeAPF e se estiver no Windows, vai depender de onde você mesmo configurou as pastas. De qualquer forma, se o IP da sua maquina for 192.168.2.1, então se desde o seu navegador acessar http://192.168.2.1/YeAPF/version.inf vai lhe devolver 0.8.40 por exemplo
Pode pegar o exemplo clicando aqui: one-page-01.zip.
Ele tem que ficar ao mesmo nível que o YeAPF se você for iniciante. (Se quiser subir de nivel, é só colocar o YeAPF dentro da pasta do projeto e rodar o configure.php do projeto de novo)
O projeto vai ter uma estrutura mínima (antes de rodar o configure.php) como a que segue:
exemploWeb01
├── cityQuery.php
├── configure.php
├── e_body.xml
├── index.html
├── query.php
├── yeapf.db.ini
├── css
│ ├── html5shiv-printshiv.js
│ ├── light-style.css
│ └── normalize.css
└── js
├── cityQuery.js
├── ycomm-worker.js
└── yloader.js
Porém, uma vez que você chame o configure.php aparecerão novos arquivos. Mas já veremos isso. Os arquivos marcados com negrito são o nosso aplicativo de fato. Os arquivos marcados com itálico são arquivos que vêm do YeAPF e identificam nosso aplicativo como sendo um aplicativo YeAPF. O yeapf.db.ini está em negrito e itálico porque é um arquivo que vem da distribuição YeAPF mas foi modificado para ser usado em nosso aplicativo. Os outros arquivos são os normalizadores de estilo para que ele rode mais ou menos legal em todos os navegadores (menos aquele lá que nem vou mencionar)
1) Crie um banco de dados com o banco de dados world.sql mencionado no artigo inicial. Em Linux ou Cygwin ficaria assim mais ou menos:
$ wget http://downloads.mysql.com/docs/world_innodb.sql.zip
$ mysql -u usuario -psenhaDoUsuario
Welcome to the MySQL monitor.
Commands end with ; or \g.
Your MySQL connection id is 99 Server version: 5.5.40-0ubuntu0.14.04.1 (Ubuntu)
Copyright (c) 2000, 2014, Oracle and/or its affiliates.
All rights reserved. Oracle is a registered trademark of Oracle Corporation and/or its affiliates. Other names may be trademarks of their respective owners.
Type 'help;' or '\h' for help.
Type '\c' to clear the current input statement.
mysql> create database paises;
Query OK, 1 row affected (0.00 sec)
mysql> exit
$ unzip world_innodb.sql.zip
$ mysql -u usuario -psenhaDoUsuario paises < world_innodb.sql
Modifique o yeapf.db.ini para indicar como conectar-se com seu banco de dados. Se seu banco está no IP localhost (ou seja 127.0.0.1 ou seu próprio micro, como quiser) a configuração do yeapf.db.ini (apenas as linhas modificadas) ficaria assim:
dbType=mysqli
dbServer=localhost
dbName=paises
dbUser=usuario
dbPassword=senhaDoUsuario
dbConnect=yes
dbOnline=07:00-20:40, 22:30-23:59
Com isso, indicamos que iremos usar mysqli, sobre o localhost com o banco de dados chamado paises. Obvio que “usuario” e “senhaDoUsuario” são apenas exemplos que você deve modificar.
Repare que indicamos o horário de funcionamento do nosso aplicativo. Fora dos horários estabelecidos, o aplicativo não responde. Isso pode ser útil em especial quando há alguma política de uso do software referente ao tempo na instituição em que o programa será utilizado. Também serve para agendar manutençõFinalmente, indicamos que o YeAPF irá conectar-se com o banco de dados. Isso porque você pode perfeitamente bem realizar um aplicativo sem banco de dados.
2) Chame o configure.php desde seu navegador. Por exemplo, se seu app está na pasta exemploWeb01, e o IP do seu servidor de testes é 192.168.2.1, então chame ele desde seu navegador assim: http://192.168.2.1/exemploWeb01/configure.php. Se tudo der certo, você terá a confirmação da configuração com uma caixa verde. (ou apenas um círculo verde na 0.8.6x)
3) Teste seu aplicativo: http://192.168.2.1/exemploWeb01/index.html
O seu aplicativo deve carregar a lista de cidades e consultará a informação das cidades que satisfaçam a pesquisa com ao menos três caracteres.
Foge ao escopo deste artigo corrigir todos os hipotéticos erros ou dificuldades de instalação. Mas vale lembrar do serviço que estamos implementando: http://answers.yeapf.com/
Depuração
Para depurar o seu aplicativo ou entender melhor como funciona o mecanismo interno do YeAPF, você pode abrir o depurador do seu navegador (F12 ou ctrl-shift-j) e acompanhar as chamadas feitas (Possivelmente terá que ativar “Log XMLHttpRequest” no Chrome)
As duas chamadas realizadas uma e outra vez neste pequeno exemplo são as seguintes: cityQuery.getCityInfo e cityQuery.getList como vemos nos exemplos.
http://192.168.2.1/exemploWeb01/query.php?s=cityQuery&a=getCityInfo&u=&fieldName=(cityName)&fieldValue=(Sao Paulo)
http://192.168.2.1/exemploWeb01/query.php?s=cityQuery&a=getList&u=&fieldName=()&fieldValue=()
Se tudo estiver certo, você verá uma saída XML na sua tela quando fizer qualquer uma das chamadas. Repare a estrutura normalizada do YeAPF agindo. Veja a presença das três pernas do tripé s, a e u na linha de chamada. Repare nos parâmetros auxiliares de chamada como eles são formados dentro dos parêntesis de fieldName e fieldValue mas já veremos isso com maior detenção.
O que é essencial?
Meu foco aqui é mostrar ao iniciante o que é realmente essencial para construir um aplicativo YeAP pois nem sempre isso fica claro para quem está começando.
Neste caso a nossa página é chamada de forma direta, isto é, na URL do aplicativo utilizamos o nome do arquivo: index.html. É nele que fazemos a carga de tudo o que precisamos: yloader.js e o nosso próprio script javascript: cityQuery.js. Já se estivéssemos dentro de um aplicativo (chamado pelo body.php) não precisaríamos preocuparmos com a carga específica do yloader.js mas você é livre para misturar as técnicas.
O yloader.js (o YeAPF do lado cliente) vai utilizar query.php para efetuar a chamada. Por sua vez, o query.php utiliza o e_body.xml como envelope para os dados a serem mandados do servidor ao cliente e a perna s do tripé para procurar pelo script apropriado e a função adequada dentro dele.
Em outras palavras, como o s é cityQuery o query.php procurará por um script chamado cityQuery.php e uma função qcityQuery() dentro dele. Há outros caminhos, mas baste por agora dizer que se esse script estiver na pasta principal, o query.php a achará.
A figura anterior nos mostra de forma esquemática o que acontece quando o index.html invoca o aplicativo. Toda a problemática do acesso ao banco de dados, a formatação e envelopamento de dados assim como a correta condução do caminho que o evento deve seguir do lado do cliente assim como a segurança (que não é mostrada no diagrama) ficam por conta do YeAPF.
Dito de outra forma, o programador só se preocupa com as pontas, o que ficaria no nosso exemplo da seguinte forma:
cityQuery.js
...
that.init = function() {
ycomm.invoke(
'cityQuery', // parâmetro s
'getList', // parâmetro a
null, // outros parâmetros em formato JSON
function(status, error, data) {
ycomm.dom.fillElement('cityList', data);
});
return that;
}
...
citiQuery.php
<?php
function qcityQuery($a){
$ret = '';
switch ($a) {
case 'getList':
$useColNames = true;
$countLimit = -1;
$ret = "select Name
from City
group by Name
order by Name ";
break;
}
xq_produceReturnLines($ret, $useColNames, $countLimit);
}
?>
O que quero lhe mostrar são as duas partes que o programador realmente faz. O resto permanece invisível e é – aos efeitos de quem constrói um aplicativo – desnecessário conhecer os detalhes.
Quem sabe de modelos de desenvolvimento, é obvio que ele é um MVC… mas com bom coração.
Duas peças do quebra-cabeça
Programar usando YeAPF é entrar num mundo onde as coisas ficam bem organizadas e separadas na maior parte do tempo. Isso ajuda na hora da manutenção do código e no desenvolvimento multidisciplinar.
É bem provável que você tenha sido incentivado na faculdade ou nos livros ou na própria internet ou por algum amigo da onça a misturar código. A proposta do YeAPF é separar as camadas para manter a sanidade mental do programador e a integridade do próprio sistema. O HTML, o CSS e o Javascript cuidam da interface do usuário e o PHP cuida unicamente dos dados do lado do servidor. Mas claro, essa divisão não é estrita e nem sempre é de tudo bom mantê-la a qualquer custo. Todavia, sempre que puder repita este mantra: quebro o código antes que ele quebre minha cabeça.
Resumindo: para chamar seu script php e conseguir puxar os dados do servidor de banco de dados, utilize o ycomm.invoke()
Você precisa fazer login para comentar.