Desenvolvendo o app ASP Surf Vote

Você está considerando a idéia de construir uma aplicativo para dispositivos móveis, mas ficou intimidado pela idéia do custo e do tempo que levaria para efetivamente preparar o produto para a variedade de diferentes dispositivos no mercado?

Em nossa experiência aqui na Action Creations, descobrimos que há muitos benefícios no desenvolvimento de um aplicativo móvel com AIR, usando o packager do Adobe Flash CS5. Usando essa abordagem, agora podemos usar a mesma engine em ActionScript 3.0 (mesmo código) e exportar diferentes tipos de arquivo, visando diferentes plataformas móveis (iOS, Android e BlackBerry Tablet OS), em oposição ao desenvolvimento para a linguagem nativa de cada plataforma. Ao fazer isso, somos capazes de economizar muito tempo e dinheiro ao produzir o mesmo resultado final, consistente em todas as plataformas.

Latest Version

Recentemente, fomos contactados pela ASP para criar um aplicativo para o ASP World Tour que iria atingir milhões de pessoas que acompanham o circuito mundial. Isso significa que, sem dúvida, precisávamos desenvolver um produto que poderia estar disponível na maioria das atuais plataformas móveis. Neste artigo, vamos compartilhar com você o processo que seguimos para enfrentar esse desafio junto a nossa experiência com o novo built-in packager disponível no Adobe Flash Professional CS5.

O Cliente

A ASP (Association of Surfing Professionals) é a grande dirigente do circuito mundial de surf profissional. Organizando e gerenciando o circuito mundial por 31 anos, é responsável pelos seguintes grupos: o ASP World Tour (que consiste na elite do ASP World Tour, os eventos ASP PRIME e os eventos ASP Star), Tour Femininio, o ASP World Longboard Tour e ASP World Tour Junior. Com mais de 4 milhões de seguidores, a ASP é dedicada a mostrar os melhores talentos do mundo do surf em uma variedade de formatos progressivos, revolucionando a maneira como o mundo vê o surf, através dos seus webcasts.

 

Nosso Processo

Estratégia – Depois de muita reflexão e consideração cuidadosa, decidimos que seria mais rápido e menos custoso construir a aplicação no Flash Professional (para todos os elementos gráficos, mais para a compilação), em conjunto com o FDT (para escrever todo o código) e, posteriormente, exportar o projeto para as diferentes plataformas móveis. Essa estratégia nos permitiria construir o produto usando uma única linguagem de programação (ActionScript 3.0) e depois exportar diferentes arquivos para serem instalados como aplicações nativas em dispositivos iOS (iPhone/iPad), em smartphones/tablets Android e no novo BlackBerry Playbook.

Planejamento – Quando a ASP veio até nós com a sua idéia para este produto, eles nos avisaram que eles queriam uma aplicação interativa móvel onde os telespectadores poderiam se envolver no World Tour com votos nas ondas e comunicação com os comentaristas. Em seguida, reuniumos toda a informação e detalhes necessários para alcançar a visão que o nosso cliente tinha para o produto. Depois de reuniões e planejamento, estávamos prontos para começar a trabalhar no design do aplicativo, e o primeiro passo foi construir os wireframes.

ASP Surf Vote wireframe
Wireframe do ASP Surf Vote App

Design – Durante a fase de Design, enfrentamos o desafio de fornecer ao usuário uma ampla quantidade de interatividade em uma tela de tamanho restrito, mantendo um ambiente limpo e interface atraente.

Abaixo segue uma lista com as imagens de alguns de nossos designs para ilustrar como o projeto amadureceu durante este processo, e também para mostrar alguns dos excelentes recursos do aplicativo tem a oferecer ao usuário:

Original Version
Primeiro Conceito da Interface
Versão Final
Versão Final
Judges Score
Visão dos detalhes das notas dos juízes
Epic Wave
2 dedos para cima para aquela onda épica!

Quando chegou a hora de desenvolver os ícones, precisamos seguir as especificações necessárias para cada uma das plataformas.

Surf Vote Icons
Ícones do Surf Vote App

 

Desenvolvimento – Nós desenvolvemos o aplicativo em ActionScript 3.0, usando três arquivos Flash e todo o código foi escrito no FDT. Foram utilizados três arquivos separados FLA para que pudessemos atender às diferentes resoluções e configurações do iPhone, Android e Blackberry Playbook. O código criado no FDT é compartilhado por todos os três arquivos FLA. Uma vez que o projeto está pronto para ser exportado, o três arquivos FLA são compilados, e geram arquivos específicos para cada plataforma. Por último, estes arquivos são enviados para os seus mercados (app stores). Para a plataforma de iOS (iPhone/iPad), um arquivo .ipa é gerado. Já para o Android e para o Blackberry Playbook, arquivos .apk e .bar são gerados, respectivamente.

Exportação – Cada FLA, depois de compilado, produz um arquivo diferente para cada plataforma. O processo de exportação é simples, a única exigência é que para cada plataforma, um processo de assinatura (signing) diferente acontece. Por exemplo, para exportar para o iPhone ou para o iPad, um certificado fornecido pela Apple é necessário. Este certificado é acessível apenas para membros do Apple Developer Program, que custa 99 dólares por ano, e é aberto a todos os desenvolvedores. Para a plataforma Android, o processo de exportação é mais simples, você pode utilizar um certificado gerado por você mesmo (self generated). E, finalmente, para o Playbook BlackBerry, você precisa ser aprovado pelo programa AppWorld, que tem o mesmo nível de complexidade presente no processo da Apple. Depois que o certificado está criado, é apenas uma questão de apertar o botão de PUBLISH no Flash Professional. O útlimo passo é submeter o app para todas as diferentes app stores.

Submetendo para as diferentes app stores – Para enviar o app para o Android Market, para ser instalado em qualquer smartphone ou tablet usando o sistema operacional do Google, todo o processo de aprovação é quase instantâneo, levando alguns minutos para estar disponível para todo o público que usa Android. Com a Apple e a BlackBerry o processo é mais penoso e incerto. Depois de seguir todos os passos necessários, você precisa submeter (upload) seu aplicativo e esperar. O período de espera pode ir de 2 dias a 20 dias, e não há garantia de que seu app será aprovado. Felizmente, nosso aplicativo Surf Vote foi aprovado pela Apple em menos de uma semana, e agora qualquer um pode fazer o download.

A partir da nossa experiência ao utilizar o exportador do Flash Professional, faz sentido para o desenvolvimento multi-plataforma de aplicações móveis usando este packager. Se você está planejando para enviar sua aplicação para a lojas de aplicativos diferentes, não há dúvida de que este processo economiza tempo e custo. Desenvolva uma vez, em uma única linguagem e faça pequenos ajustes de visuais para atender diferentes resoluções. O Flash cuida do resto para você.

Teste o App

Para baixar o aplicativo e começar a votar nas ondas do World Tour, visite os links abaixo:

App para iPhone: http://itunes.apple.com/us/app/aspsurfvote/id430819025?mt=8&ls=1
App para Android: https://market.android.com/details?id=air.com.aspworldtour.aspsurfvote&feature=search_result

E porque a tecnologia usada é o AIR, podemos dizer que foi relativamente simples portar a aplicação para funcionar como um desktop app, usando o mesmo código (com pequenas alterações visuais), para funcionar em computadores com Windows, Mac OSX e Linux:
App para o Desktop: http://www.actioncreations.com/asp/surfvote/

7 Responses to “Desenvolvendo o app ASP Surf Vote”

  1. Ygor Hiroshi disse:

    Parabéns! Muito Bom! AIR is everywhere

  2. Josh Grauer disse:

    Thanks for the great write-up.

    Did you experience any limitations porting to iOS? I know it is cross-compiling versus having the AIR runtime like Android/Playbook.

    What was the performance like on Android and iOS?

    • Demian Borba disse:

      Hello Josh, we had to spend some time fine tuning performance, adding the right animations and cleaning unnecessary objects and listeners. But in the end the app performs amazingly well. The most limited platform is iOS, because it works more like an emulator, so if it runs well on iOS, it will fly on Android or on the Playbook. I hope we can push the limits a little more as hardware improves on these devices. But in our case, it performs really well. It’s just a matter of spending time fine-tuning your application.

  3. Randy disse:

    Thanks for sharing your experience.

    What is the font that you used to the score digits? It worked well in all platforms?

    Thanks in advance.

  4. wallace disse:

    Muito bom aplicativo, principalmente para nós, surfistas que acompanham todas as etapas. É bom para passar o tempo enquanto assistimos as baterias.

Leave a Comment