Um aplicativo que vem na distribui\u00e7\u00e3o 0.8.x do YeAPF \u00e9 o workbench<\/em><\/strong> ou bancada. Este artigo foi escrito na vers\u00e3o 0.8.54 do YeAPF, ent\u00e3o se est\u00e1 com uma difernte, podem haver mudan\u00e7as.<\/p>\n

Workbench<\/strong><\/em> ou\u00a0bancada<\/strong><\/em> permite ao programador construir seu aplicativo como se fossem telas separadas e depois junt\u00e1-las para formar um \u00fanico aplicativo single-page<\/em>.<\/p>\n

Por\u00e9m, ele ainda est\u00e1 nos seus est\u00e1gios mais b\u00e1sicos ent\u00e3o pode resultar complicado de utilizar no inicio. Ent\u00e3o vai l\u00e1 uma receita de bolo para ir conversando.<\/p>\n

\n
\n
Crie uma pasta usando o modelo workbench<\/em><\/li>\n
Dentro dela crie uma pasta chamada production<\/em> com o esqueleto preferido<\/li>\n
Produza suas p\u00e1ginas<\/li>\n
Junte elas<\/li>\n
Publique para sua pasta de entrega<\/li>\n<\/ol>\n<\/div>\n
Caso n\u00e3o saiba como usar o YeAPF na linha de comandos, d\u00ea uma olhada neste outro post: Criando um aplicativo YeAPF usando a linha de comandos<\/a> para ter uma melhor ideia.<\/p>\n
Os seguintes comandos partem do suposto que sua raiz www \u00e9 \/var\/www\/html. No meu caso, coloquei tudo sob uma pasta chamada testes<\/strong><\/em> para que fique mais f\u00e1cil reconhecer o que \u00e9 apenas testes. Modifique conforme for necess\u00e1rio.<\/p>\n
1. Crie uma pasta usando o modelo workbench<\/h4>\ncd \/var\/www\/html\/testes\r\nyapp bancada-meu-aplicativo --create --appType workbench\r\nsudo chgrp -fR www-data bancada-meu-aplicativo\r\n# crie\/modifique seu bancada-meu-aplicativo\/yeapf.db.ini e o bancada-meu-aplicativo\/www\/yeapf.db.ini caso necess\u00e1rio\r\nwget -O \/tmp\/bma.html http:\/\/localhost\/testes\/bancada-meu-aplicativo\/configure.php\r\n<\/pre>\n
2. Dentro dela crie uma pasta chamada productio<\/em>n<\/em> (Uma webApp usando BootStrap3)<\/h4>\ncd \/var\/www\/html\/testes\/bancada-meu-aplicativo\r\nyapp production --create --appType webApp --template bs3\r\nsudo chgrp -fR www-data production\r\nwget -O \/tmp\/bma-p.html http:\/\/localhost\/testes\/bancada-meu-aplicativo\/production\/configure.php<\/pre>\n
3. Produza suas p\u00e1ginas<\/h4>\n
\n
Estamos chamando de “produ\u00e7\u00e3o” ao ato de desenvolver o conte\u00fado da p\u00e1gina ou da tela depende de como seja seu ponto de vista.<\/p>\n
Com seu navegador v\u00e1 at\u00e9 http:\/\/localhost\/testes\/bancada-meu-aplicativo de novo enfatizando que essa \u00e9 apenas a pasta que escolhi para este exemplo.<\/p>\n
Na Figura 1 podemos ver a tela inicial do bancada j\u00e1 configurada e operante.<\/p>\n
$\"workbench-01\"$ <\/a>
Fig.01 – Tela inicial da bancada<\/figcaption><\/figure>\n
As p\u00e1ginas podem ser acrescentadas simplesmente escrevendo o nome da tela\/p\u00e1gina e clicando no bot\u00e3o de adicionar como mostra a Figura 2<\/p>\n
$\"workbench-02\"$ <\/a>
Fig.02 – Acrescentando uma tela\/p\u00e1gina<\/figcaption><\/figure>\n
Uma vez acrescentada, ela aparece na lista de p\u00e1ginas da bancada com os bot\u00f5es correspondentes para eliminar, produzir compactado e produzir estendido como mostra a Figura 3<\/p>\n
$\"workbench-03\"$ <\/a>
Fig.03 – Clicando na tela\/p\u00e1gina para ver na bancada<\/figcaption><\/figure>\n
O aplicativo bancada<\/em><\/strong> produz uma p\u00e1gina padr\u00e3o que o programador deve editar usando o editor da sua preferencia (Notepad++, Geany, Sublime, Pingendo, etc). Esta p\u00e1gina padr\u00e3o \u00e9 mostrada na Figura 4. Elas ficam armazenadas na www<\/strong><\/em> da bancada que voc\u00ea criou no ponto 1 deste artigo.<\/p>\n
$\"workbench-04\"$ <\/a>
Fig.04 – A tela\/p\u00e1gina padr\u00e3o criada pelo bancada<\/figcaption><\/figure>\n<\/div>\n
4. Junte as p\u00e1ginas<\/h4>\n
Com este esquema o programador pode se focar apenas na tela\/p\u00e1gina
\nque lhe interessa. Pode fazer os ajustes necess\u00e1rios tanto no javascript, no css e no php. Pode brincar com apenas esta p\u00e1gina conectada com um banco ao passo que a pasta production<\/strong><\/em> pode estar conectada com outra.\u00a0 Isso facilita bastante as coisas na hora de trabalhar em grupo ou quando \u00e9 necess\u00e1rio encarar apenas um ponto em um aplicativo com muitas p\u00e1ginas.<\/p>\n
Esse ciclo se repete bastantes vezes, mas chega uma hora em que \u00e9 necess\u00e1rio extrair esse trio (css, js e php) e p\u00f4r ele na pasta production<\/strong><\/em>. Isso \u00e9 feito facilmente clicando no bot\u00e3o apropriado como mostra a Figura 5. Todavia, lembre que: O bancada\/www tem prioridade sobre o bancada\/production<\/strong><\/em>. Ou seja, se vc (programador, respons\u00e1vel por aquela tela\/p\u00e1gina) indicar ao bancada que vai exportar a mesma para a pasta production<\/strong><\/em> ele vai fazer exatamente isso, mesmo que esses arquivos tenham sido modificados na production<\/strong><\/em>.<\/span><\/span><\/p>\n
$\"workbench-05\"$ <\/a>
Fig.05 – Acrescentando a tela\/p\u00e1gina \u00e0 produ\u00e7\u00e3o<\/figcaption><\/figure>\n
O resultado da jun\u00e7\u00e3o de esta tela\/pagina com as j\u00e1 presentes na pasta production<\/strong><\/em> \u00e9 facilmente visto usando o bot\u00e3o apropriado como mostra a figura 6.<\/p>\n
$\"workbench-06\"$ <\/a>
Fig.06 – Clicando no bot\u00e3o de produ\u00e7\u00e3o<\/figcaption><\/figure>\n
Com isso seremos conduzidos \u00e0 p\u00e1gina production<\/strong><\/em> onde temos nossa p\u00e1gina. Todavia, lembre que se voc\u00ea est\u00e1 produzindo mais de uma p\u00e1gina, \u00e9 necess\u00e1rio usar o mTabNav()<\/em> para mostrar as diferentes p\u00e1ginas.<\/p>\n
A tela\/p\u00e1gina j\u00e1 engastada, fica com a seguinte apar\u00eancia:<\/p>\n
$\"workbench-09\"$ <\/a>
Fig.07 – A tela\/p\u00e1gina na pasta de produ\u00e7\u00e3o<\/figcaption><\/figure>\n
Sempre \u00e9 poss\u00edvel eliminar uma p\u00e1gina da pasta production<\/strong><\/em> como mostrado na Figura 8<\/p>\n
$\"workbench-07\"$ <\/a>
Fig-08 – Eliminando a tela\/p\u00e1gina da produ\u00e7\u00e3o<\/figcaption><\/figure>\n
5.Publique suas telas\/p\u00e1ginas<\/h4>\n
Chega um momento em que \u00e9 importante utilizar essas telas\/p\u00e1ginas no seu aplicativo.<\/p>\n
Se seu aplicativo \u00e9 um webApp simples do jeito que os esqueletos entregues pelo YeAPF lhe prop\u00f5em, \u00e0s vezes \u00e9 bem interessante usar a pasta production<\/strong><\/em> para entregar seu aplicativo. Pode construir os arquivos que o ydistbuilder<\/a><\/em> precisa e entregar a partir de ai.<\/p>\n
Todavia \u00e0s vezes \u00e9 necess\u00e1rio poder extrair apenas uma tela\/p\u00e1gina e entregar apenas ela para, digamos, um aplicativo\u00a0 Cordova ou Electron ou qualquer outra coisa que esteja construindo com YeAPF.<\/p>\n
Nestes casos, voc\u00ea tem duas op\u00e7\u00f5es: entregar uma op\u00e7\u00e3o minificada ou uma vers\u00e3o aberta. Os dois bot\u00f5es est\u00e3o do lado do bot\u00e3o de eliminar p\u00e1gina no workbench <\/strong><\/em>como mostrado na Figura 9<\/p>\n
$\"workbench-08\"$ <\/a>
Fig.09 – Fazendo download da tela\/p\u00e1gina<\/figcaption><\/figure>\n
<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Um aplicativo que vem na distribui\u00e7\u00e3o 0.8.x do YeAPF \u00e9 o workbench ou bancada. Este artigo foi escrito na vers\u00e3o 0.8.54 do YeAPF, ent\u00e3o se est\u00e1 com uma difernte, podem haver mudan\u00e7as. Workbench ou\u00a0bancada permite ao programador construir seu aplicativo como se fossem telas separadas e depois junt\u00e1-las para formar um \u00fanico aplicativo single-page. Por\u00e9m, […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[8],"tags":[100,99],"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5O6UV-5o","jetpack-related-posts":[{"id":328,"url":"http:\/\/www.yeapf.com\/wp\/?p=328","url_meta":{"origin":334,"position":0},"title":"Criando um aplicativo YeAPF usando a linha de comandos","date":"janeiro 31, 2017","format":false,"excerpt":"Um aplicativo YeAPF pode ser criado de forma simples copiando manualmente o conteudo do esqueleto apropriado dentro da pasta do seu aplicativo. Por\u00e9m, devemos reconhecer que \u00e9 um processo muito artesanal. YeAPF pode ser instalado como um conjunto de ferramentas desde a vers\u00e3o 0.7.x e entre as ferramentas h\u00e1 uma\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":25,"url":"http:\/\/www.yeapf.com\/wp\/?p=25","url_meta":{"origin":334,"position":1},"title":"Primeiros passos com YeAPF","date":"fevereiro 22, 2014","format":false,"excerpt":"Tive oportunidade de ver minha irm\u00e3 mais nova andar sozinha pela primeira vez e nunca mais esqueci da experi\u00eancia. \u00a0Anos depois naceram os filhos e o impacto \u00e9 tremendo. Brinco com quem programa usando YeAPF de que s\u00e3o meus filhos, carinhosamente. Por isso que os primeiros passos s\u00e3o importantissimos para\u2026","rel":"","context":"Em "Yet Another PHP Framework"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":455,"url":"http:\/\/www.yeapf.com\/wp\/?p=455","url_meta":{"origin":334,"position":2},"title":"Como instalar YeAPF?","date":"agosto 3, 2018","format":false,"excerpt":"Voc\u00ea n\u00e3o precisa instalar YeAPF. O que sim \u00e9 bom ter instalado s\u00e3o as ferramentas dele. Mas antes disso, \u00e9 bom deixar claro como funciona ele sem instalar. A todos os efeitos, vamos supor que voc\u00ea fez download da \u00faltima vers\u00e3o do YeAPF e o colocou na pasta ~\/Downloads\/YeAPF\/ e\u2026","rel":"","context":"Em "Yet Another PHP Framework"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":288,"url":"http:\/\/www.yeapf.com\/wp\/?p=288","url_meta":{"origin":334,"position":3},"title":"Um ambiente de desenvolvimento YeAPF usando Windows","date":"mar\u00e7o 28, 2016","format":false,"excerpt":"Quase que todas as vezes que postamos alguma coisa o fazemos tomando como base uma instala\u00e7\u00e3o Linux. Por\u00e9m, na medida em que alguns novos usu\u00e1rios est\u00e3o ainda usando Windows, se torna necess\u00e1rio um pequeno roteiro para facilitar a vida. Escrevemos estas linhas tomando como base uma instala\u00e7\u00e3o sobre XP (Obvio\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":91,"url":"http:\/\/www.yeapf.com\/wp\/?p=91","url_meta":{"origin":334,"position":4},"title":"Aplicativos mono p\u00e1gina","date":"mar\u00e7o 14, 2014","format":false,"excerpt":"Aplicativos que usam s\u00f3 uma p\u00e1gina t\u00eam um lugar assegurado no desenvolvimento de software atual e futuro. Bem feitos s\u00e3o elegantes e f\u00e1ceis de manter. Tamb\u00e9m s\u00e3o uma m\u00e3o na roda na hora de fazer um aplicativo que funcione tanto em desktop como em mobile. Para construirmos um aplicativo com\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":184,"url":"http:\/\/www.yeapf.com\/wp\/?p=184","url_meta":{"origin":334,"position":5},"title":"Exemplo - web01 - OnePage YeAPF Web Application","date":"dezembro 26, 2014","format":false,"excerpt":"Esta \u00e9 uma das continua\u00e7\u00f5es deste artigo. Por que criar aplicativos mono p\u00e1gina? Bom, a grande virtude de um aplicativo mono p\u00e1gina \u00e9 que tudo o que voc\u00ea precisar est\u00e1 pronto assim que o usu\u00e1rio carregou a p\u00e1gina inicial e caso sejam necess\u00e1rias mais p\u00e1ginas, formul\u00e1rios, tabelas elas tamb\u00e9m podem\u2026","rel":"","context":"Em "Desenvolvimento"","img":{"alt_text":"","src":"https:\/\/i2.wp.com\/www.yeapf.com\/wp\/wp-content\/uploads\/2019\/05\/office-932926_1920.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/334"}],"collection":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=334"}],"version-history":[{"count":3,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/334\/revisions"}],"predecessor-version":[{"id":347,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/334\/revisions\/347"}],"wp:attachment":[{"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=334"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.yeapf.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

5.Publique suas telas\/p\u00e1ginas<\/h4>\nChega um momento em que \u00e9 importante utilizar essas telas\/p\u00e1ginas no seu aplicativo.<\/p>\n