Tutorial sobre a Ferramenta de Controle de Versão GitHub.
Desenvolvido por Alan Soares, Ronaldo Gomes e Ronnie Alves.
Turma de ADS – 5º A – Centro Universitário UNA-UNATEC
Disciplina: Auditoria e Qualidade de Sistemas
Video Aula GitHub from Allan Soares on Vimeo.
Vimos alguns tutoriais e posts que descreviam o funcionamento do maven, e tabmbém criamos alguns projetos com seus respectivos relatórios. Porém sempre utilizamos uma versão do Maven 2. Atualmente está disponível (não mais como beta) a versão 3 da ferramenta. Mas afinal, o que muda e como que sua aplicação construída utilizando Maven 2 irá se comportar com o Maven 3? Veremos!
A primeira coisa a se notar de diferente é a saída no terminal de comando gerada pelo Maven 3. Veja a saída em um projeto padrão maven criado para o exemplo:
Note que a divisão entre projetos está mais clara e que cada goal está explicitamente descrito com seus respectivos plugins, tornando mais fácil identificar possíveis problemas. Por exemplo vejamos o que forçarmos um erro no build:
Repare que ao executar o plugin maven-compiler-plugin do Maven na fase de compile ocorreu um erro que está descrito logo abaixo. Note também que agora o Maven sugere uma URL da documentação onde você pode encontar ajuda sobre a falha.
Caso mais de um erro tivesse ocorrido, seria descrito em ordem de ocorrência e se fosse possível sugerir ajuda, estariam descritas as URLs de ajuda.
Essa é a primeira mudança mais notável. Uma segunda mudança pode ser percebida também, mas é mais sutil: performance. A Apache diz que o Maven é muito mais performático que suas versões anteriores em muitos aspectos.
Eu trabalho com Maven a um bom tempo já e posso dizer por experência que sim, o Maven 3 é de fato mais rápido mas não o suficiente para impressionar e de fato afetar o dia-a-dia. Está mais rápido identificar alguns problemas que podem acontecer durante o build, isso sim eu acho que afeta mais no dia-a-dia.
Quanto aos downloads de artefatos, está melhor que nas versão anteriores, pois o download em paralelo está melhor implementado e portanto a banda é melhor gerenciado. Essa mudança também afeta no dia-a-dia de uma maneira positiva.
Outra melhoria de performance é com relação aos plugins externos. A Apache diz que a API de uso do Maven para plugins externos está muito melhorada, e que a integração está bem mais otimizada. Aqui na empresa utilizo bastante a integração com o plugin do Flex para o Maven (FlexMojos), e posso dizer que nesse ponto a mudança foi drástica. O build está de fato muito mais rápido que nas versão anteriores do maven e melhorou bastante no dia-a-dia do desenvolvimento.
A validação dos poms do projeto está mais bem estruturada e descrita pela ferramenta. Por exemplo, caso você repita uma dependência em um de seus poms, o build não será afetado, mas o Maven irá lhe alertar dos possíveis problemas:
Repare que é informada exatamente a posição do erro no pom do projeto e o que pode acontecer caso a inconsistência permaneça. Outro ponto para a versão nova da ferramenta. Muitos dos projetos que rodei o Maven 3 e estavam sobre o controle do Maven 2 apresentaram algum tipo de inconsistência que poderia interferir no controle de versões dos artefatos e até mesmo no funcionamento da aplicação.
Outra mudança na organização, é o controle do parent pom. Era comum criar projetos auxiliares aos projetos principais para guardar o pom que serviria de parent para os demais poms da aplicação. Era criado tal projeto para poder importá-lo no Eclipse como se fosse um projeto como qualquer outro. Dessa forma, o pom do projeto que agregava todos os sub-projetos servia apenas como descritor dos módulos presentes sendo que este também herdava do pom parent em um de seus sub-projetos. Temos um erro de consistência nesse caso, pois era necessário realizar o install deste sub-projeto antes de todos os outros, e no build com todos os projetos portanto, a versão do parent pom era sempre uma anterior a que está sendo instalada.
Na versão nova da ferramenta tal organização é ainda tolerada, mas é lançado um aviso de que existe tal inconsistência, e de que possivelmente as próximas versões do Maven não irão mais suportá-la. O único problema com essa organização é não poder importar o projeto no Eclipse de maneira simples, pois o projeto pai trará todos os filhos como sub-pastas do mesmo, mas é de fato melhor em termos de organização e facilita na manutenção do parent pom.
Muitas outras validações são feitas nos poms do projeto que são muito úteis para manutenção e controle das versões das bibliotecas da aplicação.
Reporting no Maven 2 possui sua própria tag no xml do pom do projeto. No Maven 3 tal tag é ignorada e portanto seus projetos devem ser refatorados para que os relatórios ainda funcionem. Isso acontece porque agora o módulo de relatórios do maven está completamente independente da ferramenta, e portanto deve ser executado por um plugin. Portanto a descrição dos relatórios deve ser feita na tag de build do pom na parte de plugins.
A configuração mudou um pouco, pois agora os tipos de relatórios são descritos como configuração do plugin de geração de relatórios do maven, por exemplo um pom compatível com a versão 3 do Maven:
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
? ? … ? ? ? ? ? ? … ? ? ? ? ? ? ? ? ? ? … ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? > ? ? ? ? ? ? ? ? > ? ? ? ? ? ? > ? ? ? ? > ? ? > ? ? … > |
Nesta configuração estou gerando uma série de relatórios de cobertura e análise de código, assim como alguns de documentação também. Repare que é necessário utilizar o maven-project-info-reports-plugin, isso porque o site gerado pelo maven por padrão não gera um index.html que serve de agregador dos demais relatórios, por isso este plugin está presente na configuração.
Em conclusão o Maven 3 é mais um passo bem grande na evolução da ferramente que tem como objetivo tornar mais intuitivo o uso e menos intrusivo no dia-a-dia do desenvolvedor.
A integração com plugins externos está muito melhorada, o que acredit que possibilitará muitas outras integrações com diversas outras tecnologias em um mesmo projeto, facilitando muito o controle de versões e a manutenção dos projetos.
A parte de relatórios fiquei um pouco decepcionado com a mudança, pois a documentação ainda não deixa claro exatamente o que foi alterado e o que deixou de fazer parte da execução padrão, tive que chegar nessa configuração por tentativa e erro e buscando na internet por pessoas que passaram pelos mesmo problemas. O resultado obtido é exatamente o mesmo, exceto por um bug que não gera o site do pom parent linkando todos os seus filhos em uma mesma página. Este sim é um problema que afeta no dia-a-dia, principalmente se você executa o build de maneira contínua, gerando os relatórios para deixá-los disponíveis na empresa.
De resto acredito que o Maven ainda tem muito a oferecer, e existem outras melhorias as quais não abordei aqui no post, mas que assim que passar por elas irei postando aqui no blog.
Por @Gust4v0_H4xx0r
Nova série de screencasts, por hora estou liberando apenas 1, mas serão 6 por post, semana que vem tem mais e esse post será atualizado com imagens e detalhes.
.
Nessa aula eu mostro como criar um novo smartObject a partir de um existente sem que este fique vinculado.
.
.
_________________________________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath
Bom, estamos chegando quase lá, quase no final dessa série de screencasts que mostra a rotina, a forma de pensar de um designer de interface com foco em UX, é um curso diferenciado já que, eu procuro conversar a respeito do processo, mostrar as falhas, aprimorar detalhes, etc.
Eu realmente estou feliz que houve um feedback positivo, o pessoal anda assistindo e gostaram mesmo das aulas.
Agradeço a cada um que postou no Blog, que enviou email, que me adicionou no Twitter etc, este último inclusive é bem útil @eduardohorvath uma vez que eu não fico falando sobre a minha vida pessoal no mesmo, apenas posto sobre assuntos relacionados a User Experience e pode ser bem interessante para aqueles que se interessam pelo tema.
As aulas abaixo mais uma vez abordam refinamento, layers comps, smart object, filters, etc, que são a rotina para quem trabalha com design de interface. Porém, explico mais detalhes a respeito de como perceber o que deve ser melhorado na sua interface e dou detalhes a respeito de outros assuntos coligados.
Obrigado e boa aula.
Abaixo segue layouts atualizados com 20% reduzido seu tamanho do original.
Tela com destaque do menu.
.
São 02:32hs de Screencasts 
.
.
25:13
Nessa aula eu mostro as janelas mais utilizadas pelo designer de interface, um efeito novo para aplicar sobre a foto, e regras de diagramação.
.
.
.
36:08
Detalhes de Produtos, aula que ensino conceitos sobre design e explico como reutilizar componentes (no caso do Photoshop pode ser chamado de objetos).
.
.
.
25:35
Regra do agrupamento de elementos por conta da proximidade de proporção.
.
.
.
12:35
Continuação do término da tela Detalhes de Produtos
.
.
.
29:59
Criação da estrutura do menu.
.
.
.
14:40
Término da subcategoria do menu, nova interação.
.
.
_________________________________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath
Essa é uma aula a tempos pedida pela galera que assiste as aulas de Catalyst. Acontece que não dá para dar aula sobre tudo, vamos aos poucos dando ênfase naquilo que é mais pertinente a essa atividade que se chama Design de Interface, que é o que faço na DClick, juntamente com a parte de User Experience.
Com base nisso, pedi ao nosso Arquiteto de Informação que criasse alguns wireframes de algo bem genérico, optamos por um ShowRoom Virtual feito em Flex, desses que não podemos chamar de mero website, e sim uma aplicação inteligente para mostrar aos clientes alguns produtos, apesar de web, eu não considero como site e sim como uma webapp.
Enviei algumas premissas ao nosso Arquiteto que foram:
Criar um showroom virtual que pode na verdade ser qualquer coisa.
Ele será feito em flex4.
Não quero utilizar combo, quero uma navegação tranquila e mais fácil, porém tudo será dinâmico, ou seja, por um admin poderá ser alterado o menu, o que terá na vitrine etc. Isso na nossa lógica. Nós mesmos iremos até a parte da Skin.
1. Terá uma vitrine com uns 6 produtos em destaque.
2. Cada produto tem suas 3 ou mais fotos, e poderá ter até 1 vídeo.
3. A visualização desses produtos em destaque se dará por pageflip.
4. O menu será horizontal
5. Terá busca.
6. Menu por categoria e subcategoria.
7. Utilizará o tamanho padrão, não pode ter barra de rolagem.
8. Deverá ter o mínimo de coisa no menor espaço possível.
9. Vamos explorar mesmo a navegação do flex como se fosse um iOS (um iPad) etc..
Baseada nessas premissas nosso Arquiteto criou os wireframes, o mesmo ficou de criar alguns screencasts mostrando como funciona esse processo.
.
.
Vamos aprender como criar uma interface completa no Adobe Photoshop CS5, nosso foco é criar uma interface para Flex 4.
.
.
.
Criando o menu Bar com buttons e técnica para visualização do Wireframe diretamente na interface.
.
.
.
Trabalhando com os estados dos botões, up, over, down, técnicas para criar facilmente essa skin.
.
.
.
Aprendendendo a tabalhar com Layer Comps
.
.
.
Finalização da parte mais básica da interface, aplicação das imagens no ambiente com a mask.
.
.
.
Trabalhando bastante com SmartObject
.
.
_________________________________________
Eduardo Horvath é UX Specialist e Designer na DClick.
Formado pela Faculdade Impacta de Tecnologia no curso Design de Mídia Digital ele atua na área de Design a mais de 15 anos.
@eduardohorvath
Salve pessoal
Estou voltando à ativa nesse blog, espero que agora eu encontre tempo para criar os tutoriais.
Inicialmente gostaria de deixar claro que o foco desse blog não é o público que eu chamo de “Hard ActionScript Developer” o meu foco são aqueles desenvolvedores que estão iniciando ou que são intermediários no mundo do Actionscript 3.0, então nem sempre vamos focar no “melhor código” para os exemplos, mesmo porque eu nem teria tempo para fazer isso, na verdade a minha intenção e abordar superficialmente algumas coisas que vejo no meu dia-a-dia e apresentar coisas realmente usuais para todos.
Dito isso, fica claro que não tenho a intenção de criar uma metodologia definitiva para desenvolvimento, então pegue leve nas críticas =)
Hoje vamos falar sobre a utilização do Gaia Framework para desenvolvimento de pequenos projetos (games, hotsites etc…)
O Gaia Framework é um projeto Open-Source para Actionscript 2.0 e 3.0 que visa facilitar sua vida na hora de desenvolver projetos em Flash, ele reduz drasticamente o tempo que você leva desenvolvendo, pois cria automaticamente alguns dos processos comuns a qualquer site em Flash.
Com o Gaia Framework é possível criar sites usuais em flash em pouco tempo com características que você levaria horas para fazer tais como:
1. Navigation
2. Transitions
3. Preloading
4. Asset Management
5. Dynamic Font Loading
6. SEO
7. DeepLinks
Para maiores informações e detalhes sobre o que é o Gaia Framework acesse o site
Acesse o site e faça download do arquivo MXP do Gaia Framework, feito isso clique duas vezes no arquivo para instalar. Abra o Adobe Flash Cs5 e vá na aba Help > Manage Extentions ,certifique-se que o Gaia Framework esteja instalado corretamente como na imagem abaixo:
Pronto, agora o seu Adobe Flash Cs5 já está pronto para trabalhar com o Gaia Framework.
O Gaia Site Creator é um aplicativo AIR que facilita ainda mais o desenvolvimento com Gaia Framework ele irá nos ajudar na hora de criar o arquivo “site.xml” que define as “paginas” que nosso site em Flash vai ter, sobre esse arquivo XML vamos falar nas próximas aulas, por hora apenas acesse o site e instale o Gaia Site Creator.
Com o Adobe Flash Cs5 aberto vá na aba Window > Other Panels > Gaia Framework
Uma janela como essa vai se abrir para você:
1. Criar um novo projeto em Actionscript 3.0
2. Criar um novo projeto em Actionscript 2.0 (sai fora, credo!)
3. Importar um projeto existente
4. Fazer uma doção para o Steven Sacks =)
5. Lista de projetos criados (ainda em branco)
Esse é o painel que você vai trabalhar durante todo o tempo de desenvolvimento com o Gaia Framework aconselho você a deixar ele em um lugar de fácil acesso durante o desenvolvimento.
Agora é a hora de começarmos realmente a desenvolver utilizando o Gaia Framework, com o painel do Gaia Framework aberto clique no botão “Create AS3″ e configure como a imagem abaixo:
1. Nome do projeto que vamos desenvolver
2. Pasta raiz do projeto
3. Versão do Flash Player que esse projeto vai ser compilado
4. Versão do Gaia Framework e do Greensock (motor de animação) utilizado
5. Tamanho do Stage, Framerate e cor
6. Estrutura de pastas criada pelo Gaia Framework aconselho a deixar dessa forma
7. Tipo de projeto utilizado, nesse exemplo vamos usar o FlashDevelop para desenvolver
Com todos esses requisitos preenchidos clique no botão “Create New Project” para criar o projeto do Gaia Framework.
Pronto, o Gaia Framework acabou de criar a estrutura básica para trabalharmos o projeto veja como ficou nossa estrutura:
1. Arquivo de configuração do Gaia Framework
2. Arquivo de projeto do FlashDevelop
3. Pastas com arquivos publicáveis (swf, imagens, XML…)
4. Pasta com os arquivos FLAs
5. Pasta com os arquivos .as
6. Pasta com os templates (não vamos usar mais não delete)
Agora é hora de configurar o arquivo “site.xml” que determina quais “paginas” serão criadas em nosso projeto, lembra do nosso amigo Gaia Site Creator? Então é hora de iniciar ele, com o Gaia Site Creator aberto importe o arquivo “site.xml” que se encontra dentro da pasta “bin>xml” o arquivo deve aparecer como na imagem abaixo:
Essa é a estrutura básica que o Gaia Framework cria para o projeto, porém, não é a estrutura que vamos usar para esse projeto inicial siga os próximos passos para configurar corretamente o arquivo “site.xml”
Clique no item “home” e no item “id:nav” e arraste eles para o campo vermelho chamado “drop here to delete” como mostra a figura abaixo:
O item “id:index” funciona como uma “Main page” ele é o root do nosso aplicativo(existe ainda uma classe chamada “Main.as” mas vamos falar sobre ela depois. Nesse projeto todas as paginas serão filho da pagina “índex.fla”
Para criar um novo “filho” no arquivo “site.xml” você deve clicar na aba “assets” do Gaia Site Creator e arrastar o item “New Page” para dentro do item “id:index” e depois configurar algumas propriedades como mostra na figura abaixo:
1. Nome utilizado posteriormente para acessar essa pagina
2. Nome do arquivo swf que será criado quando o Gaia Framework for compilado
3. Titulo da “pagina” quando esse arquivo for acessado
A descrição para as outras configurações desse arquivo não serão abordadas nesse momento e podem ser encontradas nesse link
Antes que eu esqueça de dizer esse projeto vai ser um portfólio de um Flash Developer como eu e você então a estrutura de paginas vai ser como mostra a imagem abaixo:
1. Pagina de apresentação
2. Perfil do desenvolvedor
3. Portfólio
4. Fotos
5. Vídeos
6. Contato
A minha intenção com esse tutorial é que posteriormente eu mostre como trabalhar com algumas classes que utilizo então podemos explorar integrações com Twitter, Flickr, Youtube etc… Esse projeto vai servir como base para outros tutoriais.
Criada essa estrutura dentro do Gaia Site Creator clique na aba “file > Export > ExportSiteXML” e sobrescreva o arquivo “site.xml” com essa nova configuração, abra esse arquivo dentro do software Flash Develop (imagino que você já esteja utilizando ele para desenvolver seus projetos) a estrutura do arquivo “site.xml” ficou da seguinte forma:
Se você seguiu todos os passos que descrevi acima, abra novamente o Adobe Flash Cs5, com o painel do Gaia Framework aberto vá até a aba “scaffold” e clique em “scaffold project”.
Ele vai criar todos aqueles arquivos que configuramos no “site.xml” dentro da pasta de projeto, aguarde os arquivos serem criados/compilados, ao final desse processo ele vai abrir uma aplicação como na figura abaixo:
Agora no painel do Gaia Framework a aba que ficou marcada é “Publish” clique no botão “save” que fica no canto direito superior para salvar esse projeto. Agora na lista de projetos criados você tem todos os projetos que está trabalhando no Gaia Framework como mostra uma visão dos meus projetos na figura abaixo:
Clique duas vezes sobre o projeto que estamos trabalhando, vá até a aba “publish” clique na pasta “lib” e veja que todos os arquivos configurados no “site.xml” foram criados dentro do projeto como mostra a figura abaixo:
1. Esse botão deve ser usado sempre que você fizer alterações nos arquivos, não adianta apenas dar um CTRL+Enter no arquivo é preciso clicar nesse botão para compilar os arquivos marcados na lista, caso algum arquivo não esteja marcado ele NÃO vai compilar o arquivo
2. Botão abre a pasta raiz do projeto
3. Lista de arquivos do projeto
4. Esse botão sincroniza as modificações feitas no arquivo “site.xml” e vamos tratar disso nos próximos tutoriais
Clique no botão “Test Project” para ver o resultado desse tutorial, lembrando que essa tela preta que aparece é fruto de uma configuração inicial feita pelo Gaia Framework, se você abrir por exemplo a pagina “home.fla” não vai ver nenhum “asset” dentro dela ou da library, não se assuste vamos tratar desses e de outros assuntos no próximo tutorial.
Nesse tutorial não vamos abordar o desenvolvimento do menu do site, então para navegar no projeto feito até aqui utilize o botão direto do mouse e clique no ContextMenu para navegar entre as paginas.
Nesse tutorial eu abordei os aspectos básicos para desenvolver usando o Gaia Framework, veja que não fizemos nenhuma linha de código, mas não se engane existem muitas coisas para aprender ainda.
No próximo tutorial vou falar sobre a estrutura de pastas criadas pelo Gaia Framework e como iniciar nosso projeto com as modificações em Actionscript 3.0 ou seja, prepare-se para programar no próximo tutorial.
Meu perfil no Facebook
Meu Twitter
Uma abraço a todos, divulguem esse tutorial!
O iPhone, lançado por volta de 2007, foi revolucionario em relação a experiencia do usuário e naturalmente criou-se um novo nicho de mercado para desenvolvimento de aplicações. A App Store(loja virtual onde os aplicativos da Apple
são disponibilizados) já pagou mais de 2 bilhões de dolares aos seus desenvolvedores e com a chegada do iPad
, esse número tende a crescer muito. Então se você quer entrar nesse nicho de mercado, precisa saber do que precisa para criar seus aplicativos para rodar no sistema operacional movél da Apple
, o iOS(antes da chegada do iPad
, era simplesmente iPhone
OS), no qual rodam o iPhone
e iPad
, portanto vamos iniciando com Adobe AIR for iOS.
Antes de começar, precisamos de alguns esclarecimentos em relação a como irá funcionar seu aplicativo feito com Adobe AIR rodando no iOS. Você só podera criar aplicativos com Adobe AIR, não é possivel criar aplicativos que rodem no navegador com o Flash Player.
Você só podera criar aplicativos com Adobe AIR, não é possivel criar aplicativos que rodem no navegador com o Flash Player.
Sem Flash Player no iOS =õ(
Com o runtime do Adobe AIR, temos o mesmo problema, não é possivel instalar o runtime do Adobe AIR da maneira que estamos acostumados a fazer no desktop ou no Android.
O que a Adobe fez foi criar uma ferramenta usando o Low Level Virtual Machine (LLVM) que permite que você converta seu aplicativo feito em Adobe AIR para um aplicativo nativo do iOS. A Adobe mudou o modo de compilação completamente para que seu aplicativo pudesse rodar no iOS, do modo JIT (Just in Time) para o AOT (Ahead-of-Time) permitindo que seu aplicativo em Adobe AIR pudesse ser convertido para um aplicativo nativo do iOS.
A Adobe mudou o modo de compilação completamente para que seu aplicativo pudesse rodar no iOS, do modo JIT (Just in Time) para o AOT (Ahead-of-Time) permitindo que seu aplicativo em Adobe AIR pudesse ser convertido para um aplicativo nativo do iOS.
LLVM é um sistema modular, o sistema compilador flexível que é amplamente utilizado em uma variedade de projetos. A principal razão que a Adobe escolheu o LLVM é a sua flexibilidade e aplicabilidade para o desenvolvimento do iOS. LLVM já é utilizado no projeto Alchemy(Alchemy = C/C++ com ActionScript 3.0).
A criação de aplicativos para iOS usando a Flash Platform só é possivel a partir do iOS 3.0 ou superior.
Ferramentas de desenvolvimento
Adobe Flash CS5 Professional – Com a atualização do Packager for iPhone, você pode a partir do Adobe Flash CS5(com o Packager for iPhone instalado), criar seus aplicativos para o iOS(iPhone/iPad), teremos um novo profile chamado “AIR for iOS”, gerando o arquivo ja com o tamanho padrão de 320×480. Por enquanto não existem componentes pré-programados para iOS e não é recomendado usar os já existentes no Flash.
Adobe Flash Builder 4 (burrito) – A Adobe disponilibizou juntamente com o Flash Builder 4 (burrito), o SDK do Flex versão 4.5, com componentes otimizados para dispositivos moveis, no entanto, esses componentes ainda estão sendo otimizados para rodarem no iOS e serão disponibilizados numa futura versão do Flash Builder, mas você pode criar tranquilamente um projeto ActionScript(usando somente ActionScript 3.0 sem o SDK do Flex) e usar o compilador por linha de comando(ADT).
Qualquer editor de texto – Você pode usar qualquer editor de texto salvando na extensão .as ou seu editor ActionScript favorito.
Distribuição
Você pode gerar o instalador do seu aplicativo pelo Flash Builder(próximas versões), Flash CS5(com o Packager for iPhone instalado) ou por linha de comando usando o ADT. É gerado um aplicativo com a extensão .ipa. A distribuição pode ser feita atraves da App Store, para se tornar um publisher da App Store, basta pagar a inscrição de 99 dolares. Acompanhe esse tutorial sobre como publicar seu aplicativo na App Store.
Acompanhe alguns tutoriais:
Developing for iOS using Flash Professional
Optimizing content for Apple iOS devices
Guide for Apple App Store submissions
Saving state in AIR applications for iOS devices
Using screen orientation APIs for smartphone application development
Nos proximos artigos, mostrarei como usar alguns recursos do AIR for iOS 
Este tutorial é o primeiro de uma série de tutoriais sobre o sistema operacional Android. Inicialmente falarei um pouco sobre o que é o android, para que os iniciantes entendam um pouco melhor o que está por trás deste Sistema Operacional que, em tão pouco tempo, conquistou uma fatia tão grande do mercado de mobiles.
É uma plataforma open source criada, como muitos devem saber, pelo Google. Mas não apenas por ele. Do desenvolvimento deste SO participou o grupo Open Handset Alliance, que conta com outros 47 grandes nomes, como: HTC, LG, Samsung, Motorola, Toshiba, Sprint Nextel, T-Mobile, Asus, Intel, e muitos outros (Mais informações sobre a OHA podem ser encontradas em: http://www.openhandsetalliance.com/).
Baseado no kernel 2.6 do Linux, o SO do Android é responsável por gerenciar a memória, os processos, segurança de arquivos e pastas e também redes e drivers. Cada aplicativo dispara um processo no sistema operacional e cada processo possui uma thread dedicada. O sistema operacional tem total controle sobre os processos e pode, se necessário, encerrá-los e reiniciá-los para liberar recursos.
A linguagem utilizada para desenvolvimento de aplicações em Android, como muitos devem saber, é Java. Mas o que poucos sabem é que o SO não possui uma JVM, e sim uma máquina virtual chamada Dalvik, otimizada para mobile.
A seguir está um tutorial passo-a-passo sobre como instalar o SDK do Android no Eclipse para que possamos começar a desenvolver para esta plataforma.
Assumirei que o Eclipse já está instalado e configurado na sua máquina. Desta forma, a primeira coisa que deve-se fazer é o download do SDK do android. Que pode ser obtido no seguinte endereço:
http://developer.android.com/sdk/index.html
Após fazer o download do SDK, extraia-o para alguma pasta do seu sistema, como “D:/Android_SDK”, por exemplo. Utilize o update manager do Eclipse para instalar os plug-ins disponíveis para o Android Development Tools (ADT) pela URL: https://dll-ssl.google.com/android/eclipse
Em seguida deve-se configurar o “caminho” para onde você salvou o SDK na guia “preferences” do seu Eclipse:
O próximo passo é instalar os pacotes do SDK disponíveis através do ADT:
Após selecionar os pacotes desejados, clique em “Install Selected” e confirme as licenças para cada um deles. O passo seguinte é instalar um AVD (Android Virtual Device) para que você possa testar seus aplicativos.
Na mesma janela do ADT, selecione a aba “Virtual Devices” , clique em “New”, configure como desejar e clique em “Create AVD”:
Em seguida teste seu AVD. Selecione-o na lista, clique em “Start…” e em seguida em “Launch”:
Parabéns! Seu Eclipse agora está configurado para que você comece a desenvolver aplicativos para Android.
Agradecimentos ao @eduardohorvath pelo apoio e auxílio na estruturação do post.
Neste tutorial vou criar uma pequena aplicação utilizando o Expression Blend 4, será implementado o básico para quem está começando com o desenvolvimento de projetos para o Windows Phone 7 utilizando o Expression Blend 4.
No artigo anterior, vimos como preparar o ambiente gratuito de desenvolvimento para criar aplicações mobile utilizando o Windows Phone 7, o Expression Blend é instalado junto com o Windows Phone Developer Tools, saiba mais em Introdução ao Windows Phone 7.
Se você ainda não conhece o Expression Blend 4, talvez tenha uma dúvida, quando utilizar o Visual Studio 2010 e quando utilizar o Expression Blend ?
Tudo que é produzido em XAML pelo Expression Blend também pode ser reproduzido no Visual Studio 2010, porém, a criação de aplicativos visualmente ricos com as novas tecnologias trouxe novas possibilidades ao programador, como o suporte a elementos multimídias e animações, a possibilidade de modificar como as informações são apresentadas nos elementos visuais e outros diversos recursos, com isso houve a necessidade de ter uma ferramenta voltada ao designer da aplicação, onde o foco seria a camada visual.
O Expression Blend chegou para suprir essa necessidade, dessa forma o designer da aplicação tem uma ferramenta com recursos mais sofisticados e visuais, com o Blend a maioria das tarefas são executadas de forma visual, sem que seja necessário digitar dezenas de códigos, por exemplo, o Expression Blend tem total suporte a criação de animações, possuindo uma timeline, onde o designer poderá acionar a animação e gravar todos os movimentos que fizer com o mouse na aplicação, quando finalizar, todo o código XAML é gerado automaticamente pelo Blend, esse é somente um exemplo do qual a ferramenta gera produtividade quanto à criação visual da interface.
O Expression Blend é totalmente integrado ao Visual Studio 2010, é possível trabalhar com as duas ferramentas abertas com o mesmo projeto, que as modificações são atualizadas em cada ferramenta.
A aplicação do tutorial vai listar algumas urls em um ListBox, quando o usuário clicar em um item, a aplicação será redirecionada para outra página em XAML, essa página vai conter um browser e receberá o link a ser carregado.
Inicie o Expression Blend e crie uma aplicação do tipo Windows Phone Application, Figura 1, na aba Projects, temos os arquivos iniciais da aplicação gerados pelo Expression Blend, a aplicação tem três arquivos de imagens, e dois arquivos do tipo XAML, o XAML (eXtensible Application Markup Language), é uma marcação similar a marcação XML, é utilizada no Silverlight tanto para aplicações WEB como para o WP7, e também é utilizada para criar aplicações desktop com o WPF para o ambiente Windows.
Com a marcação XAML podemos criar layouts de telas separadas do código da linguagem de programação C#, possibilitando assim, um menor acoplamento entre o design e a programação, dessa forma um designer poderia trabalhar no design das telas utilizando somente o XAML, enquanto o programador faz o modelo da aplicação.
Resumidamente o arquivo App.xaml é usado pela aplicação silverlight para declarar recursos compartilhados no projeto, já o arquivo MainPage.xaml é o arquivo principal da aplicação, sua representação visual é a que aparece no centro da tela, mostrando uma interface com um layout inicial de um aplicativo WP7.
Figura 1 – Windows Phone Application
Na aba Objects and Timeline, temos a hierarquia dos elementos visuais da aplicação, em nosso projeto, inicialmente vemos 3 itens, o PhoneApplicationiPage, que é a pagina principal do layout, onde todos os elementos serão inseridos, o ApplicationBar, é uma área reservada para um barra onde podemos personalizar botões e menus para serem usados na aplicação, em seguida temos o LayoutRoot, este é o nome dado ao Layout Control Grid da aplicação default.
Um Layout Control serve para auxiliar no posicionamento de elementos na tela, existem vários controles de layout disponíveis em Silverlight, cada layout control tem sua utilidade dependendo do objetivo, o layout control Grid é um dos mais flexíveis, semelhante a uma tabela HTML, esse controle permite que seja criado linhas e colunas, além de definir o tamanhos e a altura de cada linha e coluna.
Abaixo segue os tipos de Layouts disponíveis para serem utilizados no Windows Phone 7:
A tela inicial da aplicação contém um layout Grid principal, chamado de LayoutRoot , com um fundo transparente. Em seguida temos a definição de duas linhas dentro do layout. Dentro do layout control Grid chamado LayoutRoot temos outro layout control do tipo StackPanel, note que o StackPanel está definido na linha zero do Layout Control Grid acima, utilizando a propriedade Grid.Row = ”0”. Dentro do Stackpanel temos três elementos, um TextBlock chamado ApplicationTitle, onde na propriedade Text você poderá modificar o nome da aplicação para qualquer nome que desejar , em seguida temos outro TextBlock com nome de PageTitle, onde podemos também na propriedade Text modificar o título da página. O Terceiro elemento é outro Layout Control do tipo Grid com o nome de ContentPanel, é nele que o conteúdo da sua aplicação será criado no projeto.
Listagem 1. XAML do código default
![clip_image002[15]](http://rederia.net/go.php?http://h2sistemas.com.br/alexandretadashi/wp-content/uploads/2011/02/clip_image00215.jpg "clip_image002[15]")
Mas tudo isso não é uma regra, em nossa aplicação de exemplo queremos aproveitar o máximo da tela do Windows Phone 7, vamos remover todo o conteúdo do primeiro layout Grid, o LayoutRoot, em seguida troque o tipo de layout, para isso, selecione com o botão direito do mouse no layout control e em Objects and Timeline, clique em Change Layout Type, Figura 3, e altere para um StackPanel. Adicione um ListBox no StackPanel, o código completo está na Listagem 2.
Vamos também remover a barra do system tray do WP7, onde aparece o nível da bateria, sinal e hora, para isso, selecione o item PhoneApplicationPage na aba Objects and Timeline e nas propriedades, remova o checkbox Show SystenTray, Figura 2, com isso temos todo o espaço disponível da tela para utilizar em uma aplicação.
Figura 2 – Removendo o SystemTray
Figura 3 – Alterando o Layout Control
Listagem 2. XAML da aplicação
Para criar o nosso exemplo seria necessário carregar informações de algum provedor de dados, o designer da aplicação não precisa conhecer como esses dados serão implementados, pois o ideal é que eles sejam ligados de forma menos acopladas possível, ou seja, que cada camada tenha suas responsabilidades bem definidas, para facilitar essa tarefa ao designer, e para auxiliar nos testes de dados em interfaces XAML, o Expression Blend disponibiliza uma forma de criar dados de exemplo, deixando ainda os elementos visuais corretamente ligados as objetos que contém os dados.
Para criar uma coleção de dados de exemplo e ligar ao ListBox , clique na aba Data e no ícone Create Sample Data, digite o nome do DataSource, clique nas propriedades e modifique conforme desejar, depois arraste e solte a coleção para dentro do ListBox e você terá uma ListBox ligada a uma coleção de dados. Como esse passo é 100% visual no Expression Blend, veja neste vídeo rápido o processo passo a passo.
( video wmv) – Create Sample Data
![clip_image002[17]](http://rederia.net/go.php?http://h2sistemas.com.br/alexandretadashi/wp-content/uploads/2011/02/clip_image00217.jpg "clip_image002[17]")
Figura 4 – ListBox com dados de exemplo
Para finalizar o exemplo, vamos inserir um evento SelectionChanged no ListBox, assim quando o usuário selecionar um item no Listbox vai abrir outra página com o link selecionado carregado no browser, para inserir o evento, selecione o ListBox, na aba properties, clique no ícone Events e dê um duplo click no evento SelectionChanged, Figura 5.
![clip_image002[19]](http://rederia.net/go.php?http://h2sistemas.com.br/alexandretadashi/wp-content/uploads/2011/02/clip_image00219.jpg "clip_image002[19]")
Figura 5 – ListBox – Criando um evento SelectionChanged
Dentro do evento SelectionChanged do ListBox, primeiro vamos obter o item selecionado no ListBox através da propriedade SelectedItem, depois através do recurso NavigationService.Navigate, vamos navegar até a outra página, passando como parâmetro a url que será carregado no Browser, Listagem 3. Adicione uma página em seu projeto com o nome de PhonePageBrowser, adicione um elemento WebBrowser e o método onNavigatedTo, esse método será responsável por obter a url e carregar o browser com o link passado, Listagem 4.
Listagem 3. XAML da aplicação
![clip_image004[7]](http://rederia.net/go.php?http://h2sistemas.com.br/alexandretadashi/wp-content/uploads/2011/02/clip_image0047.jpg "clip_image004[7]")
Listagem 4. XAML da aplicação
![clip_image006[7]](http://rederia.net/go.php?http://h2sistemas.com.br/alexandretadashi/wp-content/uploads/2011/02/clip_image0067.jpg "clip_image006[7]")
O Expression Blend é um poderoso aliado para a criação de aplicativos para o Windows Phone 7 com Silverlight, vimos de forma superficial como criar uma aplicação na ferramenta, além de conhecer um pouco sobre os layout controls, sample data e navegação de páginas.
Durante essa semana estive pesquisando mais a fundo sobre a criação de componentes no Flex 4, tirando algumas dúvidas que eu ainda tinha, e principalmente desenvolvendo vários deles para adicionar em minha biblioteca pessoal.
Esse exemplo aí de baixo é um componente Flex 4 para trabalhar com Dashboard. Se houver interesse, na semana que vem eu libero um tutorial explicando alguns conceitos sobre a criação de componentes, skin e também o seu código-fonte.
A utilização do componente na minha application ficou assim:
<components:PodManager id="podManager" left="10" right="10" top="40" bottom="15" skinClass="com.rectius.examples.pod.assets.skins.PodManagerSkin"> ? <components:topElements> <view:ChartExpenses width="100%" height="100%" title="Expenses" /> components:topElements> ? <components:bottomElements> <view:ChartProfit width="100%" height="100%" title="Profit"/> <view:ChartWidget width="100%" height="100%" title="Widget"/> components:bottomElements> ? components:PodManager> |
E o resultado é esse aqui:
Your browser does not support iframes.
Até a próxima pessoal!
