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?