Este post descreve o trabalho realizado para o desenvolvimento do protótipo alpha do projeto "Mosaiko".
Felizmente, as as funcionalidades principais projetadas na pré-entrega foram implementadas com sucesso, sendo possível até implementar algumas extra, como a gestão de utilizadores (login, registo, edição de perfis e avatares) . A exportação para XML, não sendo um requisisto principal do projeto, foi deixado para a versão beta.
A aplicação para telemóvel foi desenvolvida através de linguagens web, sendo necessário projeta-la com dimensões variáveis (CSS com recurso a percentagens). No telemóvel os utilizadores podem fazer a gestão do seu perfil e selecionar e utilizar as várias ferramentas da aplicação.
A aplicação AS3 foi desenvolvida no Adobe Flash Builder 4.6, com recurso à framework AirKinect 2.1, de modo a culminar numa aplicação AIR. Esta aplicação AS3 recebe comandos do telemóvel, utilizandos para definiar as opções de desenho. É também capaz de se ligar à BD, através de serviços do amfPHP e e pedidos URL a páginas PHP, permitindo gerar um tema da BD ou exportar um PNG e registá-lo.
A ligação entre o telemóvel e o AS3 foi a componente mais dificil de implementar, sendo necessário estabelecer uma ligação entre Javascript, PHP e AS3. A ausência de sockets em Javascript (os Websockets do HTML5 ainda não são compatíveis com muitos browsers) obrigou-nos a fazer pedidos AJAX a um ficheiro PHP que, por sua vez, utiliza os sockets para se ligar a um servidor de sockets (programado em PHP) e que reencaminha as mensagens para a aplicação (também através de sockets).
Para demonstrar a utilização do projeto, estão presentes dois vídeos, o primeiro representativo da utilização típica da plataforma, o segundo com detalhe de algumas funcionalidades do telemóvel.
Utilização normal da plataforma
Utilização do telemóvel
Como anexo, listamos os requisitos implementados e a componente do projeto a que dizem respeito, os requisitos por implementar e os bugs conhecidos até ao momento.
| Tipo | Requisitos implementados | Componente |
| Não funcional | Detectar orientação do telemóvel | Tlm + App |
| Funcional | Selecionar mão | Tlm + App |
| Funcional | Selecionar tamanho do pincel | Tlm + App |
| Funcional | Selecionar cor | Tlm + App |
| Funcional | Desenhar (efeito flag) | Tlm + App |
| Funcional | Apagar (efeito flag) | Tlm + App |
| Funcional | Escolher stencils e tamanho (navegação apenas) | Tlm |
| Funcional | Guardar imagem completa | Tlm + App |
| Funcional | Selecionar avatar | Tlm |
| Funcional | Fazer upload de avatar | Tlm |
| Não funcional | Apagar avatares antigos do utilizador | Tlm |
| Funcional | Login, registo, editar perfil e logout | Tlm |
| Funcional | Ajuda (básica) | Tlm |
| Não funcional | Validação Javascript e PHP dos formulários | Tlm |
| Não funcional | Gerar tema (a partir da BD) | App |
| Não funcional | Gerar contador do tema actual | App |
| Funcional | Apontador da posição do utilizador | App |
| Não funcional | Ler posição através do Kinect | App |
| Não funcional | Ler posição através do rato (útil para debug e desenvolvimento) | App |
| Não funcional | Ligação entre Telemóvel, Aplicação e Base de dados | Tlm + App |
| Não funcional | Limitar área de desenho | App |
| Funcional | Exportar PNG para o servidor local | App |
| Não funcional | Inserir informação do PNG na base de dados | App |
| Não funcional | Apagar desenho completo | App |
| Tipo | Requisitos por implementar | Componente |
| Funcional | Utilização multi-jogador | Tlm + App |
| Funcional | Spray | Tlm + App |
| Funcional | Desenhar/apagar ao pressionar a ferramenta | Tlm |
| Funcional | Navegação através do toque (deslizar o ecrã) | Tlm |
| Funcional | Pré-visualizar stencil na parede | App |
| Funcional | Aplicar stencil na parede | App |
| Não funcional | Autores do desenho na parede | App |
| Não funcional | Autores do desenho na BD | App |
| Não funcional | Aviso ao apagar os avatares antigos | Tlm |
| Não funcional | Full screen | App |
| Não funcional | Sincronização entre servidores | App |
| Funcional | Guardar nome do desenho | App |
| Funcional | Guardar contributo | App |
| Funcional | Guardar imagem na BD (registo por email) | Tlm + App |
| Não funcional | Filtrar o movimento do utilizador no desenho | App |
Lista de bugs conhecidos até ao momento
| Bugs | Descrição |
| Padrão de fundo | É possível observar os limites do padrão de fundo actual. |
| Setas de navegação | As setas de navegação são temporárias. |
| Caixa de aviso de voltar | O texto dos botões da caixa de aviso ao voltar ao menu principal estão desalinhados. |
| Crash da aplicação ao sair da área de utilização | Quando o utilizador sai do ecrã deixa de haver uma "joint" para se ir buscar a posição. |
| Avatar desalinhado (página avatar.php) | Os avatares horizontais transferidos pelos utilizadores ficam colados ao fundo e não centrados na vertical. |
| Preview do avatar | As diferentes resoluções e orientações dos avatares transferidos provocam este bug. Poderá ser resolvido com a criação de thumbnails com as mesmas proporções da área de preview. |
| Utilização das ferramentas através de flags | O comportamento do eventos onmousedown e onmouseup no browser do Android obrigou-nos a adoptar por esta estratégia. No entanto, a utilização de Jquery Mobile poderá permitir a utilização inicialmente prevista. |
| Inserção de texto provoca bug | A abertura do teclado do Android provoca um reajustamento das dimensões da aplicação, provocando overflow de conteúdos. |
. #aula13
. #aula12
. #aula11
. Mosaiko - Lx Factory Open...
