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?

 

 

 

 

 

 

8 thoughts on “Seu primeiro aplicativo móvel usando HTML5, CSS3 e Javascript

  1. Roger

    Não consegui instalar .. Dá esse erro “The current working directory is not a recognized Sencha SDK or application folder. Running in backwards com”

    • Roger

      Tentei em vários diretorios, eu uso o EasyPHP, tentei na pasta padrão (C:Program Files (x86)EasyPHP-12.0wwwsencha), tentei em (C:sencha-sdk), ambos tem o mesmo erro, “The current working directory is not a recognized Sencha SDK or application folder. Running in backwards compatible mode”

  2. Não consegui instalar .. Dá esse erro “The current working directory is not a recognized Sencha SDK or application folder. Running in backwards com” estou usando o xampp, ja criei variável LOCAL no windows indicando o caminho assim como a do JAVA_HOME porém não funcionou, o quer fazer?

Comments are closed.