Passo a passo da criação de um aplicativo Sencha Touch – Parte Um

Standard

Como vimos nos artigos anteriores, não é difícil criar a estrutura necessária para o desenvolvimento de aplicativos móveis usando o CSS3, HTML5 e Javascript. Principalmente se usarmos uma biblioteca como a Sencha Touch. Neste artigo vou considerar que você já configurou o ambiente e já gerou o aplicativo padrão o Get Started. Se não, siga o link acima e volte aqui mais tarde.

Vamos criar um aplicativo simples, com uma ou duas views, um ou dois controllers, alguns botões. Mais para você entender todo o processo que para uma funcionalidade específica. Comece criando uma estrutura nova. Chamaremos este aplicativo de Teste. Desculpe, deixei a criatividade na praia. Para isso, usando a linha de comandos, vá a pasta sencha, no diretório de documentos do Apache e digite:

[bash]
sencha generate app -p ../ts -n Teste
[/bash]

Este comando vai criar a estrutura que precisaremos, e modificaremos, para nosso novo aplicativo. Para testar digite: http://localhost/ts na barra de endereços do Chrome (Firefox? Safari?) Você deverá ver os três pontinhos tradicionais e um aplicativo exatamente igual ao que criamos aqui.

Pimba? Funcionou? Se não, você pode começar novamente leia este artigo, depois este, e por fim este aqui. Se seguir todos os passos a coisa deve funcionar. Se não funcionar… ouvi dizer que algumas religiões tem um período de aceitação bem curto. Rezar pode ser uma solução.

A estrutura criada aqui é a mesma que criamos durante a instalação, precisaremos renomear os arquivos principais e criar a estrutura de arquivos que modificaremos. Renomeie. Você pode precisar de algum dos arquivos originais para consulta.

 

No Diretório

Renomeie

Para

ts/

app.js

app_orig.js

ts/app/view

main.js

main_orig.js

 

Se você recarregar a página http://localhost/ts ficará vendo os três pontinhos característicos ad aeternum. Isto acontece porquê o arquivo index.html que existe na raiz, carrega os scripts necessários a execução dos aplicativo mas não encontra a classe representada no arquivo app.js, que neste momento, não existe.

Vamos criar este arquivo. Abra seu editor preferido, crie o arquivo app.js na past ts/ e copie e cole o seguinte código:

[javascript]
Ext.application({
name: "Teste",

launch: function () {
console.log("Este aplicativo está rodando");
}
});
[/javascript]

Observe que o atributo name deve conter o nome do aplicativo que estamos criando. Preste atenção nos caracteres, maiúsculos e minúsculos. Isto é fundamental.

Recarregue a pagina no navegador. Você continuará vendo os três pontinhos. Considerando que está usando o Chrome, clique com o botão direito em qualquer lugar da página, e clique em Inspecionar elemento. Você verá a janela de debug web do Chrome. Clique no botão console e verá a mensagem Este aplicativo está rodando impressa no console.

Observe que no meu caso o acento de está não saiu corretamente impresso. O editor que estou usando adotou o character set padrão do Windows, quando eu criei o arquivo app.js e meu servidor web, o Apache, está usando o padrão UTF-8. Para impedir erros como este, configure seu editor para utilizar o padrão UTF-8.

A mensagem de texto foi escrita no console pelo comando:

console.log(“Este aplicativo está rodando”);

Esta é uma linha de comando que você pode utilizar para um debug manual, de pobre, mas eventualmente muito útil.  No nosso caso, prova que, apesar de ainda estarmos vendo os três pontinhos, nosso aplicativo já rodou.

Vamos criar uma view com uma barra de ferramentas e colocar um botão nesta barra. Para isso crie no diretório view um arquivo chamado ViewUm.js e copie o seguinte código nele:

[javascript]
Ext.define("Teste.view.ViewUm", {
extend: "Ext.Container",
config: {
items: [{
xtype: "toolbar",
docked: "top",
title: "Minha Tela",
items: [{
xtype: "spacer"
}, {
xtype: "button",
text: "Novo",
ui: "action",
id:"novo-btn"
}]
}]
}
});
[/javascript]

Se você recarregar o arquivo http://localhost/tsnão verá nenhuma alteração. Isto por que esta view ainda não foi carregada pelo arquivo app.js mas, antes de carregar vamos dar uma olhada, linha a linha, no código desta ViewUm.js

A primeira linha explicita a variável Ext o singleton responsável por todo namespace dos aplicativos criados com a biblioteca Sencha Tools. O método define recebe os argumentos referentes a definição de uma classe que representará seu aplicativo.

defineString className, Object data, Function createdFn )

No caso, className, um string, tem o formato aplicativo.modulo.classe  para este aplicativo “Teste.view.ViewUm”. Observe que o nome da classe é o mesmo nome do arquivo javascript que criamos. Observe também que o segundo argumento do método define, data, começa na primeira linha com a { e termina na última com }. Ou, caso ainda não tenha percebido, toda a definição da classe está feita no argumento data do método define. Uau!!!

A primeira coisa que fazemos na classe é dizer que ela estende a classe “Ext.Container”. A classe que estamos definindo, “Teste.view.ViewUm”, herdará as características da classe, “Ext.Container”. Esta última, uma classe do namespace Ext que herda as características da classe “Ext.Component”, responsável pela maior parte dos componentes visuais da biblioteca Sencha Touch com a propriedade extra de permitir a colocação de componentes no seu interior. Ou, em outras palavras, a classe que estendemos “Ext.Container” define um componente visual que pode conter outros componentes visuais.

Em seguida instanciamos o objeto config, responsável pela configuração da classe e passamos todos os atributos de configuração. Neste caso apenas o objeto array Items que contém um conjunto de componentes, configurações ou instancias. Como visto a seguir:

[javascript]
items: [{
xtype: "toolbar",
docked: "top",
title: "Minha Tela",
items: [{
xtype: "spacer"
}, {
xtype: "button",
text: "Novo",
ui: "action",
id:"novo-btn"
}]
}]
[/javascript]

Como visto acima, este array items contém um e somente um objeto, do tipo toolbar, definido pelo comando xtype, com os atributos docked, title e items. Por sua vez,  este último objeto array items contém os objetos que serão contidos pelo item “toolbar” que foi inserido na classe “Teste.view.ViewUm” que estende a classe “Ext.Container” que estamos definindo. Ou seja, temos um contêiner contendo uma barra de ferramentas que contém um botão. Uau!!!

Mas, ainda assim, se você recarregar a página no navegador, não verá nada. Temos que incluir esta classe no app.js. Para isso vamos mudar o código do arquivo app.js para incluir a classe, seu novo código deve ser:

[javascript]
Ext.application({
name: "Teste",
views: ["ViewUm"],

launch: function () {
var viewum = Ext.create("Teste.view.ViewUm");
Ext.Viewport.add(viewum);
}
});
[/javascript]

Uma vez que o app.js tenha sido salvo, recarregue a página no navegador e voilà!!! Lá se foi meu francês. Você deverá ver alguma coisa parecida com:

Observe o título desagradavelmente reduzido e com reticências (ou ellipsis em inglês). Este efeito parece ser um defeito, este problema não aparece no Firefox. Se este problema lhe incomodar, você poderá modificar o arquivo app.css que se encontra na pasta ts/resources/css/app.css e remover a propriedade overflow:hidden da classe x-title. Isto resolverá o problema.

O importante, que precisa ser notado, no novo app.js é o atributo views:  um array que contém o nome, string, de todas as classes do módulo view que desejamos inserir no aplicativo e a instância do objeto ViewUm dentro da function launch.

Amanhã, continuamos.

Aplicativos móveis com Ubuntu

Standard

Por incrível que pareça, alguns dos meus alunos no curso de desenvolvimento móvel da Faculdade Spei, em Curitiba, usam linux. Especificamente Ubuntu. Ainda me lembro quando contávamos em uma mão as pessoas que usavam linux e sobrava dedo. Bons tempos…

Como nostalgia não instala software e alguns estão tendo algumas dificuldades, este artigo vai detalhar o processo de instalação das bibliotecas Sencha em uma máquina rodando Ubuntu.

Antes de começarmos, um pequeno esclarecimento: Não uso a interface Unity do Ubuntu. Nem sob tortura. Dito isto, se você ver alguma coisa diferente nas capturas de tela, sinto muito, estou no meio da personalização do meu Ubuntu.

Instalando o Apache

Se você está acompanhando esta série de artigos já sabe que vamos precisar de um servidor web. Usamos o Apache 2.0 no Windows 7 e usaremos este mesmo servidor no Ubuntu. Você não precisa mas, como é fácil e eu tenho sinceras esperanças que você se torne um desenvolvedor web, além de desenvolvedor móvel, vamos instalar também o PHP e o MySql, deixando sua máquina pronta tanto para mobile quanto para web usando o PHP.

Abra uma janela de terminal. Eu uso o Gnome Terminal mas você pode usar qualquer um que deseje ou esteja instalado. E vá ao seu diretório Home. Vamos instalar os aplicativos usando a linha de comando, não que eu goste disso, mas é mais rápido, simples e limpo. Uma vez que o terminal esteja aberto digite:

[bash]
sudo apt-get update
sudo apt-get upgrade
[/bash]

Depois do primeiro vocẽ precisará digitar sua senha. Estes comandos vão atualizar sua máquina. Depois que a atualização terminar digite :

[bash]
sudo apt-get install mysql-server mysql-client apache2 php5 libapache2-mod-php5
[/bash]

Responda s a pergunta que aparecerá no terminal e esta linhazinha discreta e tão simpática vai instalar uns 30 e tantos megabytes de arquivos e quando terminar você terá o Apache, php e mysql rodando na sua máquina. Algumas interações serão necessárias, como mostrado a seguir, você precisará digitar uma senha para administrar o MySql, duas vezes. Algumas coisas, ainda que estúpidas, nunca mudam.

instalação do mysql no ubuntu 12.04

Quando terminar digite:

[bash]
sudo /etc/init.d/apache2 restart
[/bash]

O Apache será reiniciado e emitirá uma mensagem de erro:

[bash]
Could not reliably determine the server’s fully qualified domain name, using 127.0.1.1 for ServerName
[/bash]

Não se preocupe com isso, simplesmente indica que você não configurou um nome para seu servidor. Abra seu navegador (chrome ou firefox) e digite: http://localhost você deverá ver uma página, como mostrado abaixo, indicando que o apache funcionou.
Fim da instalação do Apache 2.0 no Ubuntu 12.04
Se não ver esta página nem a mensagem It Works! talvez seja uma boa hora para fazer uma avaliação sobre as implicações filosóficas do suicídio.

Instalando as bibliotecas Sencha Touch

Para baixar as bibliotecas da Sencha, clique neste link e faça o download da versão GPL no seu diretório Home. São 52 megabytes, demora um tantinho. Vamos dar uma chance para o ambiente gráfico. Quando acabar, abra o Nautilus, navegue até o seu diretório Home, clique com o botão direito e clique em Extrair Aqui. Quando a extração terminar renomeie a pasta criada para sencha. Ninguém merece o nome que os desenvolvedores deram.

Agora você precisa mover esta pasta para o diretório de documentos do Apache. Para tal, vamos voltar ao terminal, no diretório onde você criou a pasta sencha  e digitar:

[bash]
sudo mv sencha /var/www/sencha
[/bash]

Volte ao seu navegador (Chrome?, Firefox?) e digite: http://localhost/sencha . Se você fez tudo certo verá a página de documentação da biblioteca sencha, como pode ser visto na figura a seguir. Se não deu certo? Você pode começar a ler novamente desde “Parece incrível…” Mantenha-se calmo e lembre-se estudar direito, ou medicina, pode ser uma boa opção.

Página de documentação do Sencha Touch no Ubuntu

Instalando o Java

Não é confuso? Ainda precisamos do java mesmo para um ambiente de desenvolvimento em Javascript para HTML e CSS. Deve ser uma forma da natureza fazer a humanidade pagar pelos seus pecados. Em fim, vamos ter que instalar o java para pode usar uma o kit de desenvolvimento da Sencha. Desde de que a Oracle assumiu o controle acionário da Sun a coisa não está tão simples mas, sempre tem um jeito. Digite:

[bash]
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java7-installer
[/bash]

Instalando o Kit de desenvolvimento Sencha

Ainda falta uma coisa. A Sencha fornece um kit de desenvolvimento com ferramentas para facilitar sua vida. Entre outras coisas, com ferramentas para criar a estrutura de um aplicativo e para empacotar seu aplicativo para o dispositivo móvel escolhido. Estas ferramentas estão disponíveis em Download Sencha SDK Tools. clique no link, escolha a versão compatível com o seu sistema operacional e baixe.

Não existe uma rotina de instalação padrão linux para este aplicativo. A Sencha fornece um aplicativo em formato de executável. Eu prefiro rodar este aplicativo a partir da linha de comando. Então, estando no diretório onde fez o download digite:

[bash]
chmod +x SenchaSDKTools-2.0.0-beta3-linux.run
su
./SenchaSDKTools-2.0.0-beta3-linux.run
[/bash]

Agora você está no modo de instalação gráfica deste aplicativo, em linhas gerais, tudo o que precisará fazer é seguir as instruções das janelas de instalação e clicar Next. Ok, você terá que aceitar a licença também. Por fim, seu navegador padrão irá abrir a página contendo o manual destes aplicativos.

Sencha Tools SDK instalado no Ubuntu

Achou que tinha acabado? Ainda não, temos que corrigir o path do Ubuntu, o instalador alterou o bashrc por conta própria, agora você precisa “rodar” este arquivo. Existem várias formas de fazer isso. Você poder fazer um  Logout/login ou fechar/reabrir a janela do terminal.

Uma das duas deve dar certo. Feito isso vá ao diretório /var/www/sencha e digite sencha. Você verá as opções disponíveis para este aplicativo e, agora está acabado.

Para gerar seu primeiro aplicativo, ainda no diretório /var/www/sencha digite:

[bash]

sencha generate app -p ../gs -n ‘start’

[/bash]

E visite http://localhost/gs você deverá ver a tela do aplicativo padrão.

E o seu funcionou? Precisa de ajuda? Grite!!!

Entendendo um aplicativo mobile baseado na Sencha Touch 2.0

Standard

Vimos como instalar a biblioteca Secha Touch 2.0 e suas ferramentas de desenvolvimento. Vimos também como criar seu primeiro aplicativo. Tudo isso em um único artigo que serviu de base para a primeira aula de desenvolvimento do curso de desenvolvimento móvel da Faculdade Spei.

Neste artigo vamos dar uma olhada rápida na arquitetura da biblioteca Sencha Touch 2.0. Antes de começar vamos deixar claro uma coisa: Esta arquitetura, apesar de incrível, não é MVC. Eu sei lá existe um M de model, onde você colocará as classes de modelo, há um C de controller, onde você colocará as classes de controle e lógica e há até um V de view onde ficará sua interface mas, as semelhanças acabam ai. Esta arquitetura é própria e particular e chamá-la de MVC é menosprezar este trabalho.

A imagem ao lado, retirada próprio site da Sencha, mostra a arquitetura do ponto de vista modular e deixa claro que tudo está relacionado ao módulo APP.

interessante desenvolvimento móvel com arquitetura sencha touch 2.0

Todos os módulos são relacionados através do módulo Application e, além do MVC tradicional temos o Profile e o Store.

  • Models: Ou modelos são as classes de abstração de dados;
  • Views: São as classes responsáveis pelo visual e pela interação com o usuário;
  • Controllers: Respondem a comandos do usuário, executam a lógica de negócio;
  • Stores: Classes responsáveis pelo armazenamento de dados usadas por componentes como Components like Lists e DataViews;
  • Profiles: Permitem a criação de visualizações diferentes para dispositivos diferentes de forma simples.

Criando aplicativos móveis com o sencha touch 2.0

Além disso, estes módulos estão organizados em uma estrutura de pastas e arquivos específica, ainda que complexa, e eficiente.

Observe que há uma pasta raiz, GS e abaixo dela as três pastas principais app, resources e sdk. Observe também que todos os aplicativos que você criar com esta biblioteca terá esta estrutura então você só precisará se preocupar com ela uma vez. Não esqueça que você não precisa decorar este treco todo. Como vimos antes, existe um aplicativo só para criar esta estrutura.

Os nomes das pastas são, para lá de autoexplicativos. Você, por acaso, tem alguma dúvida sobre o que deve ficar em uma pasta chamada icons? Ou images?

Há uma pasta que merece atenção: a raiz. No nosso caso, a pasta GS. Existem algums arquivos interessantes lá. O mais importante é o app.js.

Este arquivo define o aplicativo. Define o namespace, as classes que serão incluídas, os recursos que serão utilizados e é o arquivo que será executado para rodar seu aplicativo.

[javascript]

Ext.application({
name: ‘Sencha’,

launch: function() {
var vermelho = {
style: "background-color: #ff1111; color:white;",
title: "Vermelho",
html: "O que eu colocar aqui será impresso na página"
};

Ext.create(‘Ext.Carousel’,{
fullscreen: true,
direction: ‘vertical’,

items:[vermelho]
});
}
});

[/javascript]

Vá lá, abra o seu em algum editor de textos, verá que não tem nenhuma relação com este código acima. Fiz de propósito. Este aqui é mais simples tem a definição do namespace do seu aplicativo (nome:) e a função de inicialização do seu aplicativo (launch: function() {…) estes dois itens serão comuns a todas as aplicações. O resto é pouco, quase nada, só para testar.
Experiemente usar este código substituindo o código gerado automaticamente e ver o que acontece. Já vou adiantando, não é grande coisa e o carrousel não vai funcionar corretamente. Sabe por quê?
Os modelos, controllers, views, profiles e stores são todos itens da classe application. Você faz referência a estes módulos simplesmente colocando seus nomes, em um array, como pode ser visto neste código de exemplo tirado das páginas da Sencha:

[javascript]
Ext.application({
name: ‘MyApp’,
models: [‘User’, ‘Product’, ‘nested.Order’],
views: [‘OrderList’, ‘OrderDetail’, ‘Main’],
controllers: [‘Orders’],

launch: function() {
Ext.create(‘MyApp.view.Main’);
}
});
[/javascript]

E cada um destes módulos deve ter seu próprio arquivo js na pasta correta. Uma última observação. Isto aí é javascript. Cuidados com as letras maiúsculas e minúsculas, com as aspas simples e duplas e, acima de tudo, observe que argumentos e itens são separados por vírgulas e funções por ponto e vírgula. Uau!

Seu primeiro aplicativo móvel usando HTML5, CSS3 e Javascript

Standard

Desenvolver aplicativos móveis está cada vez mais parecido com desenvolver aplicativos para web. As capacidades estendidas do Html5 e do css 3 acrescidas das funcionalidades do javascript e da criatividade dos desenvolvedores tornam esta uma das melhores, senão a melhor, opção para o desenvolvimento.

Neste tutorial vamos ver o passo a passo da instalação de uma grande biblioteca para desenvolvimento móvel, multiplataforma, usando o html5, o css3 e o javascritp. Esta é a sua última chance. Este artigo fala de desenvolvimento móvel, no Android, usando o Sencha Tools, rodando o Apache no Windows 7. Se não é isso que está procurando. Boa viagem!

Antes de qualquer coisa, é bom ter um servidor web instalado. Eu gosto de utilizar o Apache, grátis, de código aberto, leve, estável e com muito suporte disponível na internet. Como minha máquina não é usada apenas para desenvolvimento web sempre instalo o Apache usando o Xampp. Se precisa de um tutorial para instalar o Xampp pode encontrar um neste link.

Vá lá, não tenha pressa. Eu espero!

Instalando as bibliotecas Sencha

Uma vez que seu Apache esteja instalado, podemos começar a festa. Ops! Quase esqueci. Você vai precisar também de um navegador web capaz de rodar Html5 e Css3 use o Chrome ou o Firefox. Existem outros mas, eu só vou poder ajudá-lo com um destes dois. Os outros são excelentes mas eu não os uso com frequência.

Usaremos as bibliotecas da Sencha. Andei pesquisando esta coisa e resolvi adotar este conjunto de bibliotecas por sua simplicidade, facilidade de uso e versatilidade. Vamos adotar esta biblioteca no curso de desenvolvimento móvel que estou lecionando na Faculdade Spei. Então, ao longo deste semestre, vou escrever muito sobre desenvolvimento móvel por aqui. Ossos do ofício.

Primeiro você deve baixar dois arquivos que são indispensáveis. São eles:

Sencha Tools 2.0 SDK

Sencha SDK Tools

O primeiro é o SDK, kit de desenvolvimento contendo as bibliotecas necessárias para o desenvolvimento. Baixe a versão GPL para poder distribuir seu código sob a mesma licença e não ter problemas de licenciamento. Se pretende vender, ou distribuir seu aplicativo sem distribuir o código, terá que baixar a licença comercial. Você pode usar a versão comercial gratuitamente mas, não pode, em hipótese alguma distribuir seu aplicativo ou o código que produzir utilizado a licença comercial gratuita.

O segundo é um instalador do Windows em formato .exe que instalará uma série de aplicativos úteis para a produção na sua máquina.

Vamos começar instalando o Sencha Tools 2.0 SDk. Este é um arquivo Zip. Simplesmente dê um clique duplo sobre o arquivo, abra-o e copie a pasta que ele contém, sencha-touch-2.0.1.1, para o diretório htdocs do seu Apache. Se você seguiu as instruções de instalação ao pé da letra esta diretório deve estar em C:/xampp/htdocs. Uma vez que a pasta tenha sido copiada renomeie esta pasta para algo mais agradável como sencha, por exemplo. sencha-touch-2.0.1.1 ninguém merece. Nem aluno.

Abra o Xampp Control Panel, mostrado a seguir, clique no botão Start ao lado do Apache para iniciar o servidor e digite http://localhost/sencha na barra de endereços do seu navegador.

Se tudo deu certo, o seu navegador abrirá a página de documentação da biblioteca Sencha, como mostrado a seguir:

Preparando seu primeiro aplicativo sencha

Agora dê um clique duplo sobre o arquivo SenchaSDKTools-2.0.0-beta3-windows.exe para instalar as ferramentas de desenvolvimento, empacotamento e distribuição que acompanham a bibilioteca de desenvolvimento.

A primeira coisa que você verá é a janela de segurança do Windows 7. Este aplicativo da Sencha não está registrado na Microsoft. Esta janela, mostrada a seguir é para garantir que você sabe o que está fazendo. Clique em Sim.

A primeira tela é a tela de apresentação da instalação. Clique em Next.

A segunda tela é a tela da licença. Selecione a opção I accept the agreement e depois em Next.

A terceira tela, mostrada a seguir, permite que você escolha onde instalar as ferramentas de desenvolvimento. Se quiser selecione um lugar. Se não precisar fazer isso então clique em Next.

Selecionando onde instalar as ferramentas Sencha

A seguir, clique em Next nas duas janelas que virão para iniciar a instalação. E aguarde alguns segundos.

Quando clicar em Finish, na última tela, você terá a opção de ver a documentação dos programas instalados para suporte ao desenvolvimento e seus comandos. Se entender inglês perca alguns minutos para ler esta página. Este conhecimento fará diferença no futuro.

Seu primeiro aplicativo

Agora vamos criar seu primeiro aplicativo. Observe que os aplicativos baseados na biblioteca Sencha rodam sobre um estilo arquitetônico específico, sobre uma estrutura especial de diretórios. Sabendo disso os desenvolvedores se deram ao trabalho de criar um aplicativo específico para criar esta estrutura.

A primeira coisa que você precisa fazer é testar sua instalação. Faça o seguinte. Sabe a tecla Window, aquela tecla horrível com o logo do Windows? Pressione a dita cuja junto com a tecla R. As duas ao mesmo tempo.  Você verá a janela especial para rodar programas mostrada a seguir. Digite  CMD e tecle entrer.

Executando o CMD na janela do Windows

Nada c0mo voltar a linha de comando. Tela preta, letras brancas, comandos idiotas. Quanta saudade. Até parece o século XX. Em fim, estando aqui, navegue até a pasta onde estão as bibliotecas Sencha no diretório de documentos do Apache ou, se você seguiu minhas instruções, o diretório C:/xampp/htdocs/sencha. Está muito enferrujado? Tente:

cd c:/xampp/htdocs/sencha

e depois:

sencha

Se estiver tudo certo com a sua instalação verá alguma coisa parecida com]:

Rodando o Sencha tools no Windows 7

Se não foi isso que você viu, nem algo parecido com isso, esta é uma boa oportunidade para procurar uma religião. Ou, caso seja uma pessoa sem fé, apagar tudo e começar a ler novamente lá em “Desenvolver aplicativos móveis…” você esqueceu alguma coisa.

Considerando que está em dia com seus deuses e tudo correu bem. Precisamos agora criar a estrutura de um novo aplicativo, copiar todas as bibliotecas da Sencha para lá e criar o esqueleto de um aplicativo com as classes necessárias. O pessoal da Sencha percebeu que as bibliotecas deles são ótimas e que a estrutura dos aplicativos é um horror e resolveu criar um pequeno facilitador.  Um comando para o o aplicativo sencha que tira todo o trabalho das nossas, já tão suadas, costas. Ainda na linha de comando digite:

sencha generate app -p ../GS -n GetStarted 

Eu sei, você digitou o enter no final. Tudo bem.  Vamos só dar uma olhada nesta linha de comando. A palavra sencha é o aplicativo da Sencha (Santa criatividade!) a palavra generate significa gerar, a palavra app significa aplicativo. O -p seguido dos dois pontinhos .. dizem ao aplicativo para ir ao diretório superior, o GS é a abreviação de Get Started e o nome da pasta que você vai criar. O -n GetStarted determina o nome do seu aplicativo.

Para verificar digite http://localhost/GS na barra de endereços do seu navegador preferido. Qualquer um, desde que seja o Chrome ou o Firefox. Você deverá ver uma página web com a seguinte imagem:

Rodando o seu primeiro aplicativo móvel na sua máquina com Sencha

Uau! Você conseguiu rodar seu primeiro aplicativo móvel com uma das mais modernas tecnologias disponíveis, no seu desktop, em menos de duas horas.

Uau!. Gente educada não pergunta o que vai fazer com isso nem faz referência a lugares pouco iluminados do corpo humano. Gente educada espera o próximo artigo para aprender como a coisa funciona e começar a modificar este aplicativo, ou navega no seu próprio aplicativo e descobre onde está o vídeo, em inglês, com praticamente as mesmas instruções que seguiu até agora, no aplicativo que acabou de criar.

A sua instalação funcionou? Não? O que achou? Posso ajudar?

 

 

 

 

 

 

Como usar um Servidor Minecraft gratis por um ano

Standard

A Amazon está com uma promoção interessante. Um ano da instância micro do seu serviço EC2 gratuita para novos clientes. Uma excelente oportunidade para criar um servidor minecraft para meu filho e seus amigos e para testar este serviço de hospedagem nas nuvens.

A instância micro parece ser suficiente para dois ou três usuários simultâneos no Minecraft. Neste tutorial vamos passar o passo a passo da configuração do serviço EC2 para aproveitar esta oportunidade. Algumas premissas importantes:

  • Este passo-a-passo assume que sua máquina está com o Windows 7 instalado;
  • Assume também que você vai instalar uma máquina Ubuntu 12 no EC2;
  • Assume também que você já tem a conta na Amazon.

Se qualquer uma destas premissas não for verdadeira, esta é uma boa hora para você procurar outra página.

Criando a instância EC2 na AWS

Acesse sua conta na Amazon Web Services (Aws). Se navegue até o EC2 Dashboard e clique no botão Launch Instance, como mostrado no fragmento de página a seguir:Começando a instalar um máquina na Amazon AWS

Na página seguinte você deverá escolher o processo de instalação. Assumindo que esta é a sua primeira vez, precisamos ser delicados então escolha Classic Wizard e clique em Continue.

Na página seguinte você precisará escolher a imagem que usará. As máquinas marcadas com uma estrela estão disponíveis para a Micro Instace, precisamos instalar uma máquina virtual que atenda esta condição para ter o serviço gratuito. Eu escolhi o Ubuntu Server 12.04 LTS 64 bits como você pode ver no fragmento a seguir:

Determinando a imagem que você usará como seu servidor minecraft

No próximo passo você deverá selecionar o tamanho do seu servidor. Certifique-se de escolher o tamanho do seu servidor. Não erre aqui. Ainda que a Amazon seja conhecida pela qualidade do seu atendimento ao cliente, a oferta de gratuidade por um ano só é válida para instâncias micro então certifique-se de escolher este tamanho, como mostrado no fragmento de página a seguir:

Selecionando o tamanho da máquina que vai rodar o Minecraft Server

Clique no botão Continue.

Na próxima página estão opções avançadas. Nenhuma delas fará diferença no seu servidor. Então simplesmente clique Continue.

O passo seguinte permite que você crie Tags para identificar sua máquina. Isto é interessante para quando você tiver centenas de máquinas rodando na Amazon. Não é o que você quer agora? Não se preocupe, treine, crie uma tag e atribua um valor, como pode ser visto no fragmento a seguir e clique em Continue.

Estas tags servem apenas para você identificar seu servidor

Neste passo você precisará prestar um pouco de atenção. Aqui você vai criar o par de chaves de segurança que serão utilizadas para administrar seu servidor. Observe o fragmento de página a seguir:

Criando as chaves de segurança para administrar seu servidor minecraft

No primeiro campo você deve digitar o nome que suas chaves terão. Este nome serve para identificar a sua chave no seu servidor. Lembre-se esta é uma chave de segurança. Clique no botão “Create & Download your key pair” e salve esta chave em algum lugar seguro da sua máquina. Mais tarde ela será importante. Sem ela será impossível administrar seu servidor. Uma vez que o download termine, clique em Continue.

Não ache que acabou. Agora teremos que lidar com o firewall da Amazon. As regras de acesso são regras dentro do que a Amazon chama de Security Group. Você precisará ter, no mínimo, duas regras. Uma para acesso SSH e outro para acessar o seu servidor Minecraft. Gente velha e paranoica tem o hábito de não usar a porta 22 para o SSH, se for paranoico, troque. O servidor Minecraft precisará da porta 25565 que também pode ser trocada. Neste caso, você terá que trocar esta porta nas configurações do servidor Minecraft também. Se não for paranoico, você pode repetir as configurações que estão no fragmento a seguir:

Criando as regras de acesso para sua máquina na Amazon

Digite um nome para seu grupo de segurança em Group Name e uma descrição em Group Description. Digite 25565 em Port Range e clique em Add Rule e  depois em Continue.

Na página seguinte você verá um resumo da sua máquina. Eu sei você não aguenta mais então clique em Launch.

O próximo passo é criar e aplicar um endereço ip para a sua máquina. Você usará este ip para acessar seu servidor e jogar Minecraft. Na tela de Dashboad do EC2, aquela primeira, procure a seguinte área:

Determinando o ip que será usado pelo servidor minecraft

Clique em Elastic IP, você está vendo 1 na minha figura mas, a sua deve estar com um 0. Você verá uma tela com um botão Allocate New Address. Clique neste botão para abrir a janela de alocação de ip como visto a seguir:

Alocando o IP do seu servidor Minecraft

Deixe eu dar uma dica: Clique no botão Yes, Allocate. Mas, não fique feliz, existe um passo a mais. Muito importante, você precisa associar o ip que alocou a sua máquina. Clique no ip para abrir a janela de alocação, como mostrado a seguir e clique em Yes, Associate. Viu só? É aqui que você vai errar. Eu esqueci de dizer para selecionar sua instância, na caixa de seleção instance.

Associando o IP ao seu servidor Minecraft

Criou o ip? Associou? Agora anote este número ele será necessário.

Acessando o Servidor

Esta foi a parte fácil. A parte difícil começa agora. Você deverá conectar no servidor Amazon, acessar a linha de comando do Ubuntu via SSH, instalar o Java e rodar o servidor. Acredite rodar o servidor será o mais fácil.

Baixe e instale o Putty. Trata-se de um cliente SSH que abre uma conexão segura com uma máquina. No caso a conexão segura será com a sua máquina Ubuntu EC2 no AWs. A instalação é simples, sem mistério ou segredos. Depois de instalado rode o programa puttygen. A tela a seguir abrirá:

Usando o puttygen para gerar uma chave ssh

Precisamos deste programa porque a chave usada pelo putty não está no mesmo formato que a chave de segurança gerada pela Amazon. Clique em Load. Navegue até o diretório onde salvou a sua chave, abra-a e, depois que o putty a converter salve em um lugar seguro, com um nome que seja simples de localizar. Para salvar clique em Save private key. É claro que você pode alterar os campo Key comment e Key passfrase, depende do seu grau de paranoia. O importante é que salve a chave em um lugar seguro e fácil de achar.

Salvou? Agora rode o Putty. A imagem a seguir mostra a janela do putty:

Congigurando o putty para acessar uma máquina ubuntu na Amazon

Observe que na minha tela já existe uma linha chamada minecraft_server, para criar a sua, digite o ip na caixa Host name (or IP address) o número da porta em port, se não mudou deve ser o 22, o nome da sua sessão em Saved Sessions e clique no botão Save. Espere, isto ainda não basta.

Clique em Data, no lado esquerdo você verá a janela a seguir:

Configurando o putty para acessar o EC2

No campo Auto-login digite a palavra Ubuntu depois clique em Session, no lado esquerdo para voltar a janela principal do Putty e clique no botão Save novamente.

Agora clique em SSH, no lado esquerdo e, logo em seguida em Auth para exibir a seguinte janela:

Configurando a chave ssh que dará acesso ao servidor minecraft

Clique no botão Browse e localize sua chave de segurança. Ainda lembra? Nós usamos o puttygen para converter a chava da Amazon em uma chave que o putty possa usar. Depois de carregar clique novamente em Sessions do lado esquerdo e novamente no botão Save.  Agora sim. Se você fez tudo certo, clique em Open. Uma janela preta, de linha de comando vai aparecer e o processo de login do Ubuntu via SSH será automaticamente executado. Quando ele terminar você terá acesso a linha de comando do Ubuntu, como visto a seguir:

Login Ubuntu do servidor minecraft, ou quase

Uau!!! Se chegou até aqui. Parabéns. Agora vamos a parte final.

Configurando o Ubuntu e instalando o servidor Minecraft

O servidor está configurado de forma que você tenha acesso aos comandos críticos através do comando sudo. Então, não altere esta configuração. Deixe de ser convencido e use o sudo. Como eu não sou convencido, pelo menos não em público, ou por escrito, todos os comandos neste tutorial terão o sudo na frente. Comece atualizando seu servidor. Para isso digite:

sudo apt-get update

Quando terminar teremos que instalar o Java, não é muito fácil, se não for usuário Ubuntu, preste atenção. Primeiro teremos que colocar o repositório WEBUPD8 para baixar os binários originais da Oracle. Digite os seguintes comandos, linha por linha, com um enter no final de cada linha.

sudo add-apt-repository ppa:webupd8team/java

sudo apt-get update

sudo apt-get install oracle-java7-installer

Não demora quase nada. Você verá uma monte de linhas estúpidas em um terminal mais estúpido ainda que, no final, terminará em um cursor piscando. Digite:

java -version

Para ver se o java está corretamente instalado. Se estiver você verá:

java version “1.7.0_06”

Java(TM) SE Runtime Environment (build 1.7.0_06-b24)
Java HotSpot(TM) 64-Bit Server VM (build 23.2-b09, mixed mode)
ubuntu@ip-10-244-137-49:~$ java version “1.7.0_06”

Agora podemos instalar o Minecraft. Para isso digite os seguintes comandos, sempre seguidos de enter:

mkdir minecraft

cd minecraft

wget https://s3.amazonaws.com/MinecraftDownload/launcher/minecraft_server.jar

Agora, tudo o que precisa é rodar o servidor. Use o seguinte comando:

sudo java -Xmx512M -Xms512M -jar minecraft_server.jar nogui

Como será a primeira vez que o servidor irá rodar, ele vai gastar alguns minutos criado as diversas “spawn areas” dá tempo de ir tomar um café. Quando ele terminar. O servidor estará rodando. Use o ip para conectar e bom jogo. Se deixar rodando o servidor estará sempre disponível.

Dúvidas? Críticas? Problemas? Me avise se funcionar.

9 passos para instalar o Apache, o Php e o MySql no Windows 7

Standard

Se você pretende desenvolver para web, desenvolvendo sites ou aplicativos online, ou para mobile usando como base o HTML5, o CSS3 e o Javascript, você precisará criar um ambiente para desenvolvimento na sua máquina. Estamos enfrentando este problema na classe de Desenvolvimento Móvel da Faculdade Spei em Curitiba.

Precisará, principalmente, de um servidor web. Neste artigo, publico o passo-a-passo da instalação de um dos melhores pacotes base para a criação de um ambiente de desenvolvimento web/mobile. O Xampp. Trata-se de um pacote de softwares desenvolvido pela Apache Friends que contém os aplicativos básicos que você precisará.

Neste artigo mostro a instalação em uma máquina rodando o Windows 7.

  1. Antes de qualquer coisa, você precisa fazer o download.  Este link leva diretamente ao site da Apache Friends  e ao pacote de instalação padrão. Clicando neste link você baixará um arquivo .exe, um executável, que deve ser salvo em um diretório de fácil acesso como o Download ou Desktop.  Observe que algumas empresas não permitem o download e arquivos executáveis então, pode ser que precise baixar o arquivo comprimido.
  2. Uma vez que o arquivo tenha baixado, dê dois cliques sobre ele para iniciar a instalação.  A instalação é simples. Praticamente uma instalação padrão.
  3. A primeira tela pede sua permissão para a instalação. Trata-se apenas de uma proteção do Windows 7. A ideia é garantir que você sabe que o programa que está rodando, programa de instalação irá fazer alterações na sua máquina. Pode ser vista na figura a seguir. Para prosseguir clique em Sim.Primeira janela da instalação do Apache, php e MySql
  4. A segunda tela que você verá é um aviso do pessoal da Apache Friends. Pode ser visto logo abaixo. O Windows 7 incorporou uma rotina de segurança extra chamada de UAC que restringe alguns comandos, alguns diretórios e alguns comandos em alguns diretórios. Parece muito com as rotinas usadas desde o milênio passado no mundo Linux.  O resumo da ópera é: Se você não quer ter problemas de segurança ou acesso, não instale o Xampp em um diretório protegido do Windows. Use, por exemplo, a raiz do drive C. Clique em Ok para continuar.É importante que você se certifique de instalar o xampp no diretório certo
  5. Clique em Next na próxima tela, é a tela de abertura do programa de instalação só serve para créditos e aborrecimentos diversos.
  6. Chegamos finalmente a uma tela interessante. Como pode ser visto a seguir. Nesta tela você deverá escolher o diretório onde instalará o Xamp. Observe que a opção C:\xampp\ está pré-selecionada. Se for a sua primeira vez deixe assim. Se não, escolha um diretório seguro ou onde já esteja acostumado a manter arquivos.É importante instalar o xampp em um diretório seguro ou onde você se sinta confortável
  7. A próxima tela contém algumas opções críticas. Então, preste atenção. A primeira parte diz respeito a criação de ícones. Você pode optar por ter ícones no desktop e no menu iniciar. Eu não uso no Desktop mas isso é questão de gosto.A segunda parte desta tela é mais importante. Observe a figura abaixo.  Existem três caixas de seleção que determinarão se os servidores instalados com o Xampp serão instalados como serviço ou não. Certifique-se que nenhuma destas opções esteja selecionada. A exceção a isso é se você estiver instalando um servidor.

    Se alguma destas opções estiver marcada. Sempre que você ligar sua máquina, estes servidores estarão rodando e comendo recursos e memória. Esteja você desenvolvendo ou não.

    Clique em Install para continuar e aguarde.

  8. Você verá uma tela com uma barra de progresso enquanto seus arquivos estão sendo copiados. Aguarde! Verá também uma ou duas janelas de comando do Windows. Aguarde!  Se tudo correr bem, você verá a última tela da instalação. Clique em Finish. E aguarde. Por fim, você verá uma janela de congratulações:Última tela da instalação do apache, php e mysql

    Esta tela pergunta se você deve rodar o Xampp Control Panel. Clique em Sim.

  9. Você verá o Xampp Control Panel, como mostrado a seguir:Você usará este painel para controlar o Apache, MySql e TomCat

    O Xampp Control Panel é o aplicativo que você usará para controlar os servidores na sua máquina. Clique nos botões Start, ao lado dos servidores que desejar. O php já vem pré instalado e configurado então para desenvolver php inicie os servidores  Apache e MySql.  Faça isso para testar sua instalação também.

Para usar o Xampp

Com os servidores rodando, abra o navegador web de sua preferência. Você pode usar qualquer um. Digite http://localhost e clique enter. Se você é uma destas pessoas com sorte verá a página de seleção de idioma. Clique em português e veja a janela de teste do Xampp.  Pronto, seus servidores estão instalados.

O Apache não roda

Este é o erro mais comum. Você clica no botão start do servidor Apache e nada. Ele não roda. Na maioria absoluta das vezes isto ocorre por que você está com o Skype ligado. O Skype, por padrão, usa a porta tcp/ip número 80. A mesma do Apache. Você pode resolver este problema simplesmente configurando o Skype para não usar esta porta.

Para mudar a porta do Skype, abra o aplicativo, clique em ferramentas no menu, depois em opções, depois em avançado e, finalmente, em conexão. Você verá uma janela com as seguintes opções:

Corrija as opções do skype para rodar o Apache

Certifique-se que a opção usar portas 80 e 443… esteja desmarcada e reinicie o Skype.

Publicada a grade do WorldCamp Curitiba

Standard

Para os menos frequentes neste bloguinho de esquina, vale lembrar que neste mês de junho de 2012 dias 15 e 16 na faculdade FESP será realizado o WorldCamp Curitiba. Para aqueles mais desavisados ainda basta explicar que o WorldCamp é o encontro da comunidade WordPress.

Nestes encontros serão discutidos tópicos que vão desde o desenvolvimento de blogs até o funcionamento e otimização de blogs para melhor ranqueamento nos sites de busca.

A minha palestra está marcada para o dia 16 de junho às 14:45: Odeio Penguim, uma relação de amor e ódio com o Google. Vou fazer uma análise do algoritmo de ranqueamento do Google, o último update, o tal de Penguim e mostrar algumas técnicas para melhorar a posição do seu blog nos resultados do Google.

Espero que seja interessante.

Dei uma olhada na grade e vou chegar cedo. Acho que todas as palestras vão valer a pena e quem for vai sair do encontro mais qualificado para o sucesso nessa tal de web

A grade está disponível aqui.

WorldCamp Curitiba – 15 e 16 de Junho de 2012 eu estarei lá! E você?

Standard

Neste mês de junho de 2012, nos dias 15 e 16, acontecerá, na Faculdade Fesp, o WorldCamp Curitiba. Grande evento com grandes palestrantes. Para quem não sabe, o WorldCamp é o encontro de gente inteligente e capacitada que trabalha, desenvolve e divulga o WordPress.

Então, se não tem ideia do que eu estou falando, o WordPress é a plataforma, desenvolvida em php, código aberto, licenciado sob a GPl, onde são desenvolvidos a maior parte dos blogs deste pobre planetinha.

Se o seu negócio é vendas na  web, deve estar no WorldCamp Curitiba. Se seu negócio é desenvolvimento web, deve estar no WorldCamp Curitiba. Se seu negócio são as redes sociais também deve estar no WorldCamp Curitiba.

Se nenhum destes é o seu negócio  vá ao WorldCamp Curitiba só para ver o que está perdendo.

Este ano, entre os grandes palestrantes que se apresentarão está este humilde blogueiro. Muito honrado com a oportunidade de palestrar neste evento e que vai falar sobre SEO e SEM em tempo de Penguin. Espero vocês lá.

Anda! Tá fazendo o que aqui? Clica logo neste link e faz sua inscrição. Quem não for dança!

PHP use o que já está pronto

Standard

Analisando ambientes de desenvolvimento, como parte das minhas funções de consultor, a frase mais comum que ouço é: Resolvemos fazer aqui mesmo para ter controle total do código. Sempre que escuto isso entendo: Temos tempo e dinheiro para gastar e não nos preocupamos com desempenho.

ORM: symfony and propel
 photo credit: Andréia

O PHP é a linguagem de programação mais utilizada no momento. Possui centenas de milhares de bibliotecas e frameworks prontos para uso. Testadas em milhões de sites, todos os dias, por milhões de usuários e milhares de desenvolvedores. Algumas delas são desenvolvidas e mantidas pelas maiores empresas do mundo (Oracle, Microsoft, Yahoo! e Google, entre outras). Só existe uma razão para você fazer novamente. Ter muito dinheiro para jogar fora.

Existe uma forma de saber se você realmente precisa desenvolver algo do zero ou pode usar algo que já existe. Na verdade é muito simples. Faça assim: Sempre que for desenvolver uma nova funcionalidade, substitua o a funcionalidade por Windows e veja se faz sentido. Por exemplo: Suponha que você quer desenvolver uma função para girar uma imagem 180 graus. Você diria: Precisamos desenvolver uma função para rodar imagens para ter total controle do código. Substitua função para rodar imagens por o Windows e veja se faz algum sentido. Se fizer, você descobriu uma razão para desenvolver do zero. Se não fizer está só se enganando e perdendo tempo.

Por regra, se for começar um projeto do zero, não faça isso. Use um framework. Os frameworks são conjuntos de objetos com centenas de funcionalidades já prontas para economizar tempo e dinheiro e resolvem praticamente todos os problemas irritantes do dia-a-dia que não têm relação com as regras de negócio que farão o seu aplicativo importante.

A escolha de um framework não é fácil. Eu sugiro três que merecem sua atenção o Yii, simplesmente por ser o mais fácil para o uso do jQuery, o CodeIgniter, que tem a menor curva de aprendizado e o Zend,  que ainda têm um longo caminho pela frente, mas, é desenvolvido pela Zend.  Não se engane, em qualquer um dos casos, você terá que estudar o framework e aprender a utilizá-lo.

Dicas para aumentar a performance do seu código PHP

Standard

Ontem falamos de integração continuada em PHP. Hoje vamos ver algumas dicas de como tornar seu código mais eficiente e rápido. Não adianta ter o melhor código do mundo se ele não for rápido. Na web, considere 2s como o tempo máximo, em condições extremas, para a carga de qualquer página. Antes que comecem as críticas, sei que a infraestrutura conta que a otimização do DB conta que o clima e a fase da Lua também contam, mas, aqui, vamos falar apenas do quê podemos fazer durante o desenvolvimento.

Phillip : male ballet dancer catches the sun
 photo credit: tibchris

xDebug trata-se de uma biblioteca para correção de erros e avaliação de performance para o PHP. Integra muito bem com o Aptana Studio, Eclipse e outras IDEs. Além de permitir coisas como brake e watch, possui uma função de profile que gera um relatório dos tempos gastos com as funções, loops, ifs e etc… dos seus scripts. Usando o KCacheGrind para o KDE e o WinCacheGrind para o Windows, você pode analisar estes relatórios de desempenho de forma gráfica. É possível também, criar um script com o Phing para analisar o relatório de desempenho e incluir este relatório na saída do processo de integração continuada. Além do xDebug, temos o Benchmark, DBG e Advanced PHP Debugger.

Use a versão estável mais nova do PHP. Todas as versões, sem exceção, incluem correções que melhoram o desempenho do código executado. Então migre seu código para a versão mais nova. Em muitos casos esta migração é indolor. Em alguns pode ser fatal. Caberá a você estudar os problemas e decidir como migrar.

Setters e getters: Eu sei, seu professor ensinou assim. Mas, isso não é desculpa para você continuar a fazer setters e getters que simplesmente armazenam o argumento do método. Então, de hoje em diante, nenhum código seu terá uma coisa assim:

[php]
class cliente {
public $nome = ”;

public function setNome($nome) {
$this->nome = $nome;
}

public function getNome() {
return $this->nome;
}
}[/php]

Variáveis Locais: O PHP possui um conjunto de variáveis que facilitam o trabalho com os argumentos passados por um script para outro, em formato de array, como o $_POST e $_GET, por exemplo. Então, agora que você já é um programador crescidinho, não vai carregar uma variável local só para o código ficar mais bonitinho, combinado?

Use include() e require() em lugar de include_once() e require_once(). Durante a execução, estas duas últimas requerem muito mais tempo de processamento, memória e recursos.

Desenvolva com error_reporting(E_ALL), cada warning emitido significa um incremento possível do desempenho do seu código. Resolva todos os warnings. Acredite, eles não estão ali porque os desenvolvedores do PHP são abusivos.

Não use aspas duplas: Alguns vão discordar, mas, a verdade é que cada string entre aspas duplas deverá ser analisada para verificar se contém variáveis que deverão ser substituídas ou não. Se o programador fizer isto em um loop é caso para eutanásia.

Use as funções do PHP: O PHP tem milhares de funções prontinhas, testadas, otimizadas e corrigidas ao longo dos anos por milhares de desenvolvedores. Eu sei que você é o melhor programador do mundo e pode fazer melhor mas, apenas em consideração ao trabalho deles, use as funções predefinidas.

Use echo em lugar de print: Durante a execução do echo, o PHP não espera nenhum retorno, enquanto no print ele aguarda um. Se seu sistema tem dez usuários por dia não faz diferença, se ele tem dez milhões faz. Então, mesmo que esteja em uma pequena empresa hoje, já faça certo. Amanhã você pode estar trabalhando no Yahoo!

Faça o profiling: Comecei e termino por aqui. Faça o Profile! Não é difícil encontrar queries SQL em loops (passa despercebido) e acabamos chamando o DB dez mil vezes seguidas para montar uma tabela que poderia ser montada com um único query; Ou encontrar variáveis sendo definidas a cada iteração; Ou ainda, strings sendo avaliadas centenas de milhares de vezes só para incluir o valor de uma variável.

Por fim lembre-se, levou mais de 2s para carregar toda a página, não está pronto, nem bom e muito menos razoável. Se o problema não for seu, for do analista do banco de dados, por exemplo, reclame, incomode, aborreça. O desempenho é responsabilidade de todos, mas, são os programadores que devem gritar primeiro.