Começando com Sencha Touch 2: Hello World (iOS e Android)
Neste post vamos aprender como criar uma aplicação base para começarmos a desenvolver com Sencha Touch 2, um framework JavaScript para desenvolvimento de aplicações mobile (iOS, Android e Blackberry) nativas.
Se você não sabe o que é Sencha Touch e ficou curioso, pode assistir a primeira video-aula do curso de Sencha Touch 2, onde faço um overview completo da tecnologia.
Requisitos:
- Sencha Touch 2 SDK
- Sencha SDK Tools
- Browser (Chrome)
- Terminal – console
- Editor de texto
- Emulador mobile – iOS ou Android
Passo a passo desse tutorial:
- Download do SDK
- Criar o projeto
- Fazer build
- Usando o Emulador iOS
- Usando o Emulador Android
- Próximos Passos
1 – Instalando o SDK e ferramentas necessárias
O primeiro passo é fazer o download do SDK do Sencha Touch 2 e do SDK tools. Vamos primeiro instalar o SDK Tools:
1.1 – Vá até http://www.sencha.com/products/sdk-tools/download e faça o download para versão do seu sistema operacional.
1.2 – Instale do SDK Tools – basta seguir o next-next-finish:
1.3 – Vá até http://www.sencha.com/products/touch/download/ e faça download da versão Open Source. Depois que o download terminar, basta unzipar o arquivo em um servidor web (apache, por exemplo). É necessário que seja possível acessar o Sencha Touch através de um endereço local, como por exemplo http://localhost/sencha-touch-2.0.1. Para entender mais sobre isso, você pode assistir a aula 2 do Curso Gratuito de Sencha Touch 2.
2 – Criando o Projeto
Agora que já temos tudo instalado, vamos criar o nosso primeiro projeto. Recebo muitos emails perguntando como crio as minhas aplicações, e vou descrever para vocês agora.
2.1 – Eu fiz o deploy do SDK do Sencha Touch no meu servidor Apache que já vem no Mac. Mas você também pode usar o Mamp, Xampp, .
O diretório que o meu SDK está instalado é: /Users/loiane/Projects/sencha-touch-2.0.1
2.2 – Para criar o projeto precisamos abrir o terminar e navegar até o diretório onde o ST2 está instalado:
2.3 – Agora vamos usar o comando sencha generate app para gerar a base da aplicação. Para usarmos esse comando, precisamos passar mais 2 argumentos, sendo o primeiro o nome do namespace da nossa aplicação e o segundo o diretório onde será criada a aplicação. Vou criar uma aplicação com namespace STHelloWorld no diretório /Users/loiane/Projects/touch2-hello-world. Sendo assim, preciso digitar o comando sencha generate app STHelloWorld ../touch2-hello-world:
2.4 – Como vocês podem ver, o SDK Tools gerou a aplicação completa no diretório:
2.5 – Se abrirmos o diretório da aplicação, veremos que a aplicação gerada contém tudo o que precisamos: a estrutura MVC, todos os arquivos da aplicação e o sdk do touch 2 incluso.
2.6 – Se acessarmos a aplicação no Google Chromes, por exemplo, teremos a seguinte resultado:
Pronto, a aplicação está pronta e você já pode começar a modificar e criar sua aplicação em cima dessa que criamos.
3 – Usando o Emulador iOS
3.1 – Bem até agora testamos apenas no browser. Isso é legal porque não precisamos fazer o build para um emulador toda vez que a gente mudar alguma coisa; podemos testar primeiro no browser e no final, quando estiver da maneira desejada, podemos fazer o build e testar em um emulador, antes de empacotar a nossa app ST2 para uma app iOS ou Android.
Note que na aplicação existe um arquivo chamado packager.json onde vamos editar as configurações para ver a aplicação funcionando em um emulador. A parte mais importante se quisermos executar é a configuração platform. Por padrão, já vem configurado para o iOS Emulator.
Para testarmos a aplicação no iOS Emulator (precisa ter o XCode instalado, se você usa MacOS), basta executar o seguinte comando: sencha app build native:
3.2 – Quando o SDK Tools terminar de construir a aplicação, o iOS Emulator irá abrir e podermos navegar na aplicação:
4 - Usando o Emulador Android
4.1 – Para usar o Android Emulator, precisamos ter o SDK do Android instalado na máquina. Caso você não tenha, vá até http://developer.android.com/sdk/index.html e faça o download e configure no seu sistema operacional.
4.2 – Abra o arquivo packager.json e configure as seguintes opções:
- “platform”:”AndroidEmulator”,
- “sdkPath”:”/Users/loiane/Documents/development/android-sdk-macosx”, (configure o caminho do SDK do Android no seu sistema operacional)
- “androidAPILevel”:”15″,
5 – Próximos Passos
Agora é só deixar a imaginação e criatividade fluir e criar lindas apps com ST2!
- Leia os guides da documentação: http://docs.sencha.com/touch/2-0/
- Veja alguns exemplos: http://docs.sencha.com/touch/2-0/#!/example
- Curso Online Gratuito: http://www.loiane.com/2012/03/curso-de-sencha-touch-2-gratuito/
Até a próxima! 
Loiane, muito bom!
Só uma dúvida, no início do post você diz “aplicação nativa”. Ultimamente tenho me focado em estudar algumas plataformas para desenvolvimento de apps. Fiz testes pelo phonegap usando jQueryMobile, Sencha Touch 2 até decidir usar e investir no Titanium Mobile, porque na época era o único que teve alta performance com código realmente nativo e uma boa documentação e comunidade.
Lí no Sencha blog a pouco mais de um mês que a nova versão compilaria código nativo sem necessidade de usar phonegap. Como ele compila? É nativo mesmo ou roda dentro de uma webview?
Quero experimentar o Sencha para o próximo App, debugar no browser antes de compilar é uma grande vantagem, além dele ser bem veloz, sem aspecto de site mobile como o jQueryMobile é.
Um abraço!
Oi Bruno,
Sim, vc usa um comando e ele gera a aplicação nativa, que vc pode colocar no seu dispositivo mobile.
No curso gratuito do ST2 vou mostrar como faz isso na aula 3, é bem simples e fácil.
[]s
Não consegui criar o emulador do Android, da esse rro no Terminal:
[ERROR] Error: Target id is not valid. Use ‘android list targets’ to get the target ids.
:/
oi Wallace,
O ST2 tem um bug na hora de empacotar para Android, tente empacotar com lvl 7 ou 8 e tenha o SDK do Android instalado nesses versões. Vou escrever um post sobre isso.
Loiane, ja li alguns posts seu sobre carreira. Mas gostaria que , se possível, vc me desse alguma dica de como começar a programar. Às vezes me sinto incapaz, fico super perdida…
Já estudei lógica de programação e algumas linguagens e gosto realmente disso, sou bem iniciante e às vezes acho q n vou conseguir…
Se puder me dar uma orientação, agradeço!
Loiane , mostra como faz no windows , pois não tenho mac : (
Olá Renato, os passos são os mesmos para Windows, exceto que vc não vai ter o XCode, portanto não vai compilar para iOS.
Loiane com o Sencha eu consigo acessar a camera do Aparelho ? (Android ou iOs)
Oi Flavio,
A Sencha está começando a implementar a api para acesso nativo, mas ainda não tem camera. Você pode usar phonegap junto com sencha touch para isso.
[]‘s
Oi Loiane, estou tentando simular no windows e pelo que eu notei os comandos são diferentes. Consegui criar o projeto usando um comando um pouco diferente com a ajuda que o próprio sencha dá no cmd, porém não estou conseguindo realizar o último passo para abrir o AVD. Tens como me ajudar?
Obrigado!
Loiane! Desculpa o incômodo! Fiz mais algumas tentativas e consegui o passo final com o comando “sencha app build native”. PORÉM, o comando não abre automaticamente o simulador AVD. Aguardo um retorno.
Muito obrigado!
Oi Thiago,
Vc precisa deixar o emulador do android aberto antes de executar o comando. Para iOS não precisa.
[]‘s
Oi loiane! estou com algumas dúvidas sobre o ambiente de desenvolvimento. Por exemplo, eu quero fazer duas aplicações que se comunicam pelo banco de dados. Uma aplicação mobile utilizando sencha touch 2 e outra aplicação desktop utilizando sencha ext js. Minha primeira dúvida é: Qual banco usar? Recomenda mySQL? É possível fazer essa integração sencha + SQL + Java ?? E para fazer a comunicação, sugere jsp? Então ficaria jsp + JavaScript + Java. Se puderes me ajudar agradeço muito!!
[]‘s
Loiane esterei começando um projeto mobile, o que você sugere jQuery Mobile ou Sencha Touch 2 ? E por que dessa escolha? Pros e contrar.
abraços.
Oi Andreus,
Depende do que vai ser o projeto, quais os requisitos do projeto, componentes que vai usar; se vai ter empacotamento nativo ou vai ser um site voltado para mobile. Cada um tem suas vantagens e desvantagens, tudo depende do que vc quer fazer. Não existe um que é o melhor, existe aquele que é o melhor para um determinado projeto.
[]‘s
Loiane,
Boa tarde, primeiramente obrigado pelo tutorial, fazem dois dias que estou travado nisso e aparentemente agora estou conseguindo algum avanço.
Segui todos os passos e não deu nenhum erro, porem na hora que executo a ultima linha, ja com o android emulator aberto, nada acontece.
Qual o comando para que eu possa gerar o .apk?
Obrigado e no aguardo
Oi Fernando,
Você precisa gerar a app com o Sencha SDK, que também irá gerar um arquivo chamado packager.json. Nesse arquivo você vai dizer para qual ambiente você quer fazer o packaging – tem que ser o Android Emulator. Aí é só executar o comando do build native com o Sencha SDK. Eu vou falar sobre isso na próxima aula para ver se ajuda!
[]‘s
Loiane,
Boa tarde! Segui todos os passos mas quando vou dar um build para o dispositivo ele fica só na tela de Load azul com as trés bolinhas brancas piscando.
segue meu packager.json
{
/**
* @cfg {String} applicationName
* @required
* This is the name of your application, which is displayed on the device when the app is installed. On IOS, this should match
* the name of your application in the Apple Provisioning Portal.
*/
“applicationName”:”My Application”,
/**
* @cfg {String} applicationId
* This is the name namespace for your application. On IOS, this should match the name of your application in the Apple Provisioning Portal.
*/
“applicationId”:”com.mycompany.myAppID”,
/**
* @cfg {String} versionString
* @required
* This is the version of your application.
*/
“versionString”:”1.0″,
/**
* @cfg {String} iconName
* This is file name of your icon. This should be in the same directory of this configuration file.
*
* For iOS, please refer to their documentation about icon sizes:
* https://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html
*
* For Android, please refer to the Google Launcher icons guide:
* http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html
*/
“iconName”:”resources/icons/Icon~ipad.png”,
/**
* @cfg {String} inputPath
* @required
* This is location of your Sencha Touch 2 application, relative to this configuration file.
*/
“inputPath”:”build/native”,
/**
* @cfg {String} outputPath
* @required
* This is where the built application file with be saved.
*/
“outputPath”:”build/”,
/**
* @cfg {String} configuration
* @required
* This is configuration for your application. `Debug` should always be used unless you are submitting your app to an online
* store – in which case `Release` should be specified.
*/
“configuration”:”Debug”,
/**
* @cfg {String} platform
* @required
* This is the platform where you will be running your application. Available options are:
* – iOSSimulator
* – iOS
* – Android
* – AndroidEmulator
*/
“platform”:”Android”,
/**
* @cfg {String} deviceType
* @required
* This is device type that your application will be running on.
*
* If you are developing for Android, this is not necessary.
*
* Available options are:
* – iPhone
* – iPad
* – Universal
*/
“deviceType”:”Universal”,
/**
* @cfg {String} certificatePath
* This is the location of your certificate.
* This is required when you are developing for Android or you are developing on Windows.
*/
“certificatePath”:”C:/Users/wesley_oliveira/motodevstudio/tools/motodev.keystore”,
/**
* @cfg {String} certificateAlias
* This is the name of your certificate.
*
* IF you do not specify this on OSX, we will try and automatically find the certificate for you using the applicationId.
*
* This can be just a simple matcher. For example, if your certificate name is “iPhone Developer: Robert Dougan (ABCDEFGHIJ)”, you
* can just put “iPhone Developer”.
*
* When using a certificatePath on Windows, you do not need to specify this.
*/
“certificateAlias”:”cipolatti”,
/**
* @cfg {String} sdkPath
* This is the path to the Android SDK, if you are developing an Android application.
*/
“sdkPath”:”C:/extjs/android-sdk-windows”,
/**
* @cfg androidAPILevel
* This is android API level, the version of Android SDK to use, you can read more about it here: http://developer.android.com/guide/appendix/api-levels.html.
* Be sure to install corresponding platform API in android SDK manager (android_sdk/tools/android)
*/
“androidAPILevel”:”8″,
/**
* @cfg orientations
* @required
* This is orientations that this application can run.
*/
“orientations”: [
"portrait",
"landscapeLeft",
"landscapeRight",
"portraitUpsideDown"
]
}
Grato
Oi Wesley,
Verifique o console no Chrome developer tools para ver se não tem nenhum erro de javascript.
[]‘s
O meu exemplo acontece a mesma coisa. Como você resolveu isso ?
ola loiane!
gostaria de saber se vc a publicou a aula 3?
pq estou tentando gerar aplicacao nativa do android com o senhca touch so q n estou conseguindo!!
Oi Guido, ainda não.
A aula já está gravada, vou publicar até o final de agosto.
[]‘s
Será que vc pode me enviar esse video por email, pois estou desenvolvendo uma aplicação aqui na empresa onde trabalho so q parei nessa etapa e n consigo sair dela ja faz dias :S
Desde ja agradeço pela sua atençao Loiane.
abraços ate mais!
Oi Guido,
Infelizmente os vídeos tem mais de 200mb. Você pode fazer download no youtube ou vimeo.
[]‘s
oi loiane!!
valeu!
vo ficar na espera da postagem do video aula 3 senha touch!
brigado
Ola Loiane! agradeço pela atenção,
pelo Chrome ele abre tranquilo mas pelo android fica na tela de load infinito, deixei a noite toda pensando que era lentidão mas nada. será que á a versão do sencha touch? estou usando a versão 2.0.1.1 que é a mais nova.
vou tentar com a versão 2.0 para ver se da certo.
grato
Wesley,
No Chrome vc deve estar abrindo a versão do build de dev. Você precisa acessar o build que foi feito para o empacotamento, dentro da pasta build.
[]‘s
Loiane,
O arquivo sencha-touch.js do build que foi gerado para empacotar o app esta acusando ausência deste arquivo: “http://localhost/extjs_tstes/sencha-touch-2.0.1.1/touch2-hello-world/build/package/sdk/src/log/Logger.js?_dc=1344449535172″,
acho que tenho que mudar o sencha-touch.js da pasta sdk do build; Onde devo fazer esta mudança e da onde devo pegar o arquivo?
desculta esta é minha primeira app com o sencha touch.
Grato
Ola Loiane,
Consegui resolver o problema, no arquivo app.json tem que fazer uma mudança neste trecho
“buildOptions”: {
“product”: “touch”,
“minVersion”: 3,
“debug”: false,
“logger”: false
},
no “logger”: “on”, tem que mudar par “logger”: false, deste jeito o build funcionou.
brigado pela atenção.
só mais uma duvida consigo acessa o sqlite só com o senha touch?
Grato
Olá ! No browser eu consegui abrir normalmente. Porem, no IOSSimulator, o app para no loading, não sai da tela onde aparecem os 3 pontinhos piscando. No stackoverflow tinha uma pessoa com o mesmo problema, infelizmente tambem nao havia resposta pra ele. Voce tem ideia do que possa ser ? (osx 10.7.4 atualizado)
Loiane, no browser eu abri: http://localhost/~vasconcelloslf/touch2-hello-world/build/package/ para investigar algum erro de javascript, e é isso que o console me diz: Uncaught Error: [Ext.Loader] Failed loading ‘http://localhost/~vasconcelloslf/touch2-hello-world/build/package/sdk/src/log/Logger.js’, please verify that the file exists
Coloquei “logger”: false em sencha-touch-2.0.1.1-gpl/command/src/module/generate/App/app.json.tpl , como vi em um forum, mas continuo com o problema
Resolvi. Para futuras referencias, se alguem mais tiver esse erro, abra o arquivo app.js na RAIZ da aplicacao, e altere “logger”: “no” para “logger: false.
Boa tarde,
Tenho uma duvida, como colocar as cores desse CSS (ext-neptune.css) para cor laranja, hoje ele e azul.
Fico no aguardo.
Oi Carlos,
Tem que alterar o sass.
[]‘s
Olá Loiane, fiz todos os passos informado, utilizei as configurações iguais:
“platform”:”AndroidEmulator”,
“sdkPath”:”caminho do SDK do Android no seu sistema”
“androidAPILevel”:”10″, //usei a 10, no SDK Manager, android 2.3.3
Executei o comando sencha app build native com a AVD levantada.
Não aconteceu nada, nem mesmo o arquivo APK foi criado.
Alterei para “platform”:”Android”, o APK foi gerado, porém,não pode ser instalado.”Failed to run packaged application”
Oi Loiane vejo todas as suas video aulas, mas no momento estou com um problema.
Estou tentando conectar Através da Ferramenta Sencha Arctect em uma api de um servidor C# de teste.
Quando coloco Stores>user>MyAjaxProxy, ele lista pra min mas quando coloco no browser ele dá esse erro:
Failed to load resource: the server responded with a status of 405 (Method Not Allowed) http://54.232.120.235/api/user?_dc=1350935491633&page=1&start=0&limit=25
XMLHttpRequest cannot load http://54.232.120.235/api/user?_dc=1350935491633&page=1&start=0&limit=25. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
Você sabe me dizer porque não está listando? se isso é um erro de configuração do servidor c#? ou do Arquitect? se for, o que devo fazer?
Oi Loiane vejo todas as suas video aulas, mas no momento estou com um problema.
Estou tentando conectar Através the Ferramenta Sencha Arctect em uma api de um servidor C# de teste.
Quando coloco Stores>user>MyAjaxProxy, ele lista pra min mas quando coloco no browser ele dá esse erro:
Failed to load resource: the server responded with a status of 405 (Method Not Allowed) http://54.232.120.235/api/user?_dc=1350935491633&page=1&start=0&limit=25.
XMLHttpRequest cannot load http://54.232.120.235/api/user?_dc=1350935491633&page=1&start=0&limit=25. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
Você sabe me dizer porque não está listando? se isso é um erro de configuração do servidor c#? ou do Arquitect? se for, o que devo fazer?
Oi Diego,
Provavelmente vc está usando um ajax proxy para carregar os dados e está tentando executar o código extjs de um servidor localhost. Porém, os seus dados estão em um outro servidor http://54.232.120.235 e por isso vc não consegue usar requisição ajax porque ambos os seus códigos devem estar no mesmo servidor. Nesse seu caso, se for funcionar assim em produção, vc precisa usar um proxy jsonp, que aceita chamada de servidores diferentes.
Dê uma olhada nas aulas do curso de extjs 4 para entender melhor isso; funciona do mesmo jeito para sencha touch.
[]‘s
Loiane, minha aplicação não está carregando o css. Aonde estou errando?
Oi Eduardo, abra o console do browser e veja se está carregando o arquivo corretamente.
[]‘s
Não consegui gerar a app; estou no diretório C:/Webserver/Apache2.2/htdocs/SenchaTouch/ e quando digito o comando para gerar aparece “[ERROR] the current working directory is not a valid SDK directory. Please ‘cd’ into a SDK directory before execution this comand” no terminal.
Estou fazendo o procedimento correto?!
Oi Gervasio,
Instale o Sencha Touch 2.1 e Sencha Command e tente de novo.
O SDK Tools está depreciado.
[]‘s
Loiane, ah que bom, deu certo; muito obrigado.
Perfeito Loiane.. estava tendo o mesmo problema que o Gervasio, mas desinstalei o SDK Tools e instalei o Sencha Command novamente e deu tudo certo!
Seus tutoriais são excelentes. Parabéns pela trabalho.
Você tem uma didática muito boa.
Tenho recebido um erro o utilizar o SDK.
Depois do download e instalação, parece que o caminho fica errado. Recebo este errou ao tentar utilizar o sencha generate:
Cannot find module ‘/Applications/MAMP/htdocs/bib/command/sencha.js’
Oi Calebe,
Tente instalar o Sencha Command que é a versão 3 do Sencha SDK tools.
Instale em algum lugar que ele possa ler lido. Pastas como a htdocs do Xampp e Mamp não ter permissão de escrita, impossibilitando a ferramenta de funcionar.
[]‘s
Olá Loiane!
Percebi que na vídeo aula vc baixou uma versão do sencha touch de 87Mb se não me engano, eu baixei a mesma versão (gpl), porém estava com 45Mb, achei estranho e percebi que a pasta Docs está vazia e não encontrei nenhum lugar no site da sencha para baixar a documentação e ter a mesma offline assim como é mostrado no vídeo, tem alguma dica pra mim?
Desde já, obrigado!
Ahh parabéns por todo conteúdo do site, muito bom mesmo! =D