Usando a bancada de desenvolvimento para criar páginas com YeAPF

Um aplicativo que vem na distribuição 0.8.x do YeAPF é o workbench ou bancada. Este artigo foi escrito na versão 0.8.54 do YeAPF, então se está com uma difernte, podem haver mudanças.

Workbench ou bancada permite ao programador construir seu aplicativo como se fossem telas separadas e depois juntá-las para formar um único aplicativo single-page.

Porém, ele ainda está nos seus estágios mais básicos então pode resultar complicado de utilizar no inicio. Então vai lá uma receita de bolo para ir conversando.

  1. Crie uma pasta usando o modelo workbench
  2. Dentro dela crie uma pasta chamada production com o esqueleto preferido
  3. Produza suas páginas
  4. Junte elas
  5. Publique para sua pasta de entrega

Caso não saiba como usar o YeAPF na linha de comandos, dê uma olhada neste outro post: Criando um aplicativo YeAPF usando a linha de comandos para ter uma melhor ideia.

Os seguintes comandos partem do suposto que sua raiz www é /var/www/html. No meu caso, coloquei tudo sob uma pasta chamada testes para que fique mais fácil reconhecer o que é apenas testes. Modifique conforme for necessário.

1. Crie uma pasta usando o modelo workbench

cd /var/www/html/testes
yapp bancada-meu-aplicativo --create --appType workbench
sudo chgrp -fR www-data bancada-meu-aplicativo
# crie/modifique seu bancada-meu-aplicativo/yeapf.db.ini e o bancada-meu-aplicativo/www/yeapf.db.ini caso necessário
wget -O /tmp/bma.html http://localhost/testes/bancada-meu-aplicativo/configure.php

2. Dentro dela crie uma pasta chamada production (Uma webApp usando BootStrap3)

cd /var/www/html/testes/bancada-meu-aplicativo
yapp production --create --appType webApp --template bs3
sudo chgrp -fR www-data production
wget -O /tmp/bma-p.html http://localhost/testes/bancada-meu-aplicativo/production/configure.php

3. Produza suas páginas

Estamos chamando de “produção” ao ato de desenvolver o conteúdo da página ou da tela depende de como seja seu ponto de vista.

Com seu navegador vá até http://localhost/testes/bancada-meu-aplicativo de novo enfatizando que essa é apenas a pasta que escolhi para este exemplo.

Na Figura 1 podemos ver a tela inicial do bancada já configurada e operante.

workbench-01
Fig.01 – Tela inicial da bancada

As páginas podem ser acrescentadas simplesmente escrevendo o nome da tela/página e clicando no botão de adicionar como mostra a Figura 2

workbench-02
Fig.02 – Acrescentando uma tela/página

Uma vez acrescentada, ela aparece na lista de páginas da bancada com os botões correspondentes para eliminar, produzir compactado e produzir estendido como mostra a Figura 3

workbench-03
Fig.03 – Clicando na tela/página para ver na bancada

O aplicativo bancada produz uma página padrão que o programador deve editar usando o editor da sua preferencia (Notepad++, Geany, Sublime, Pingendo, etc). Esta página padrão é mostrada na Figura 4. Elas ficam armazenadas na www da bancada que você criou no ponto 1 deste artigo.

workbench-04
Fig.04 – A tela/página padrão criada pelo bancada

4. Junte as páginas

Com este esquema o programador pode se focar apenas na tela/página
que lhe interessa. Pode fazer os ajustes necessários tanto no javascript, no css e no php. Pode brincar com apenas esta página conectada com um banco ao passo que a pasta production pode estar conectada com outra.  Isso facilita bastante as coisas na hora de trabalhar em grupo ou quando é necessário encarar apenas um ponto em um aplicativo com muitas páginas.

Esse ciclo se repete bastantes vezes, mas chega uma hora em que é necessário extrair esse trio (css, js e php) e pôr ele na pasta production. Isso é feito facilmente clicando no botão apropriado como mostra a Figura 5. Todavia, lembre que: O bancada/www tem prioridade sobre o bancada/production. Ou seja, se vc (programador, responsável por aquela tela/página) indicar ao bancada que vai exportar a mesma para a pasta production ele vai fazer exatamente isso, mesmo que esses arquivos tenham sido modificados na production.

workbench-05
Fig.05 – Acrescentando a tela/página à produção

O resultado da junção de esta tela/pagina com as já presentes na pasta production é facilmente visto usando o botão apropriado como mostra a figura 6.

workbench-06
Fig.06 – Clicando no botão de produção

Com isso seremos conduzidos à página production onde temos nossa página. Todavia, lembre que se você está produzindo mais de uma página, é necessário usar o mTabNav() para mostrar as diferentes páginas.

A tela/página já engastada, fica com a seguinte aparência:

workbench-09
Fig.07 – A tela/página na pasta de produção

Sempre é possível eliminar uma página da pasta production como mostrado na Figura 8

workbench-07
Fig-08 – Eliminando a tela/página da produção

5.Publique suas telas/páginas

Chega um momento em que é importante utilizar essas telas/páginas no seu aplicativo.

Se seu aplicativo é um webApp simples do jeito que os esqueletos entregues pelo YeAPF lhe propõem, às vezes é bem interessante usar a pasta production para entregar seu aplicativo. Pode construir os arquivos que o ydistbuilder precisa e entregar a partir de ai.

Todavia às vezes é necessário poder extrair apenas uma tela/página e entregar apenas ela para, digamos, um aplicativo  Cordova ou Electron ou qualquer outra coisa que esteja construindo com YeAPF.

Nestes casos, você tem duas opções: entregar uma opção minificada ou uma versão aberta. Os dois botões estão do lado do botão de eliminar página no workbench como mostrado na Figura 9

workbench-08
Fig.09 – Fazendo download da tela/página