Segunda apresentação do grupo DevRioClaro sobre ExtJS. Detalhando o uso do SenchaCMD e do JSDuck como ferramenta de documentação de código fonte javascript.

1. Jumpstart
Por Daniel da Cunha Bueno / 2014

2. Seja bem vindo(a)!
Somos um grupo voluntário e
independente de desenvolvedores de
software, com o intuito de disseminar
conhecimento e fortalecer a
comunidade local
DevRioClaro devrioclaro@gmail.com

3. Software
não é feito por
máquinas,
mas por
pessoas!

4. Espaço físico
Infra-estrutura dos encontros
www.mappase.com.br

5. www.novatec.com.br

6. 2 e-Books para sorteio no dia do evento!
15% desconto - “DevRioClaro_16AGO ”
(válido até 01/11/2014)
www.casadocodigo.com.br

7. Desconto de 40% livro impresso e 10% eBook - “V00031”
(válido até [while true])
www.lcm.com.br

8. {
nome: ‘Daniel da Cunha Bueno’,
idade: 31,
email: ‘danielcbueno@msn.com’,
entusiastaWebDesktopApps: true,
github: https://github.com/danielcbueno
}

9. » Lembrando a todos que essa é uma
apresentação em continuação a apresentação
feita no dia 19/07/2014.
» Interessados podem ver a apresentação no
slideshare que esta dentro do grupo
DevRioClaro no facebook.
» Se alguém ficar com a dúvida, por favor, me
mande mande e-mail, ou entre em contato pelo
facebook.

10. » É um utilitário de comando de linha que
permite várias operações dentro do ambiente
de desenvolvimento sencha.
» Serve tanto para aplicações desenvolvida em
ExtJS e Sencha Touch.
» Auxilia na organização dos fontes a serem
gerados pela aplicação.
» Gera temas para a sua aplicação.

11. » Pré-requisitos (Ambiente Windows):
˃ Java
˃ Ruby (versão 1.9.2)
˃ Download do ExtJS ou SenchaTouch.
˃ SenchaCmd através do site www.sencha.com
ou procure por “SenchaCmd Download” no
google.

12. » Para rodar o SenchaCmd, basta digitar o
commando “sencha” no prompt do DOS
(Powershell / Terminal) você verá o resultado.

13. » Bem, agora que rodamos e descobrimos que o
SenchaCMD oferece diversas opções de
execução, uma das mais importantes a serem
consideradas é a opção sencha help.
» Exemplos:
˃ sencha help generate
˃ sencha help generate workspace
˃ Sencha help generate app

14. » Como vimos no help, o comando oferece uma
série opções, mas no caso da apresentação
anterior, vamos começar com a geração de um
workspace.

15. » Workspace, como o próprio nome diz é um
espaço de trabalho.
» Auxilia para que o seu fonte não seja
desorganizado.
» Cria todas as estruturas de diretório de acordo
com o padrão de trabalho de aplicações ExtJS.

16. » sencha generate workspace --path
c:DevRioClaroWorkspace
» Ele irá criar o diretório pronto para hospedar as
suas aplicações e seus packages.

17. » Packages são como uma biblioteca que você
pode colocar o seu código isolado da aplicação.
» Podem organizar a regra de negócio de
estrutura de componentes a ser utilizada pelas
aplicações.

18. » Para comandos que funcionam com geração de
packages e ou aplicações, é muito importante
atentar para o diretório do SDK.
» No meu exemplo eu deixarei tudo no diretório
D:ExtJSFrameworks a título de demonstração.
» Porque a geração de uma package ou de aplicação
você vai precisar de um SDK já disponível na sua
máquina.
» Existem duas maneiras de você utilizar o diretório
de SDK, ou você vai até através do prompt ou vou
utiliza o argumento --sdk.

19. » sencha generate package
˃ --name [Nome do Package]
˃ Exemplo:
˃ Sencha generate package –name Calc
˃ Esse comando deverá ser executado na raiz da workspace.

20. » sencha generate app
˃ --name [Nome da application]
˃ --Path
˃ Exemplo:
˃ Sencha generate app –name Demo01
˃ Esse comando deverá ser executado na raiz do SDK ou utilizar o
parâmetro --sdk.

21. » Sencha web
˃ Servidor Web embutido para testar aplicações de maneira rápida.
˃ sencha web --port 1234 [start|stop]
» Sencha generate theme
˃ Gera temas para sua aplicação
» Sencha repositório
˃ sencha repository init --name DevRioClaro --email
danielcbueno@msn.com
» Sencha generate theme
˃ sencha generate theme --name Tema1
˃ No diretório da aplicação.(Ele vai usar o tema da aplicação para gerar
um novo tema.)

22. » Sencha app build
˃ Compila a aplicação.
» Sencha app refresh
˃ Atualiza as referência do projeto.
» Sencha ant clean
˃ Limpa o diretório de build.

23. » Uma ferramenta que auxilia na documentação
de códigos fontes e de aplicação criada pela
sencha labs.
» Gera a documentção similar a própria
documentação do Ext 4.2.1.
» Fácil de usar.
» O seu fonte tem que ser todo salvo em UTF-8
with boom.

26. » http://www.sencha.com
» http://extjs.eu/ext-examples/