MPC - Musical Practice Companion

Desenvolvimento de uma aplicação de auxílio ao estudo, concebida especificamente para alunos de música, que conjuga uma série de funcionalidades numa só plataforma.

Introdução

Este projeto consistiu no aproveitamento e melhoramento de uma aplicação (web app) – Musical Practice Companion ou MPC, como é conhecida.

MPC é uma aplicação de auxílio ao estudo, concebida especificamente para alunos de música, que conjuga uma série de funcionalidades numa só plataforma. Dessas funcionalidades podemos destacar as seguintes:

Modelos de Estudo;
Metrónomo;
Cronómetro;
Área Social (para os utilizadores que sejam alunos possam partilhar dúvidas com os seus professores);

O que diferencia esta app das restantes é a ferramenta denominada por Modelos de Estudo. Esta ferramenta tem por base uma metodologia que não está presente em nenhuma aplicação, sendo, portanto, única no mercado. A metodologia em questão é o Princípio da Atenção Rotativa, do autor Gerhard Mantel, cujo fundamento defende que uma pessoa no processo de realizar uma tarefa/objetivo cujos requisitos são vários – como é o caso do estudo musical, em que o aluno, consoante o seu caso específico (isto é, se toca, por exemplo. um instrumento de sopro ou de cordas), tem que articular diversas funções, tais como a sua postura corporal, a sua respiração e o seu ritmo, e dedicar a sua atenção a todos estes aspetos – deve fragmentar a sua atenção por cada função a realizar, e só quando tiver otimizado uma das funções é que deve transitar para a próxima, e assim sucessivamente até concretizar a sua tarefa/objetivo, ao invés de tentar aplicar a sua atenção simultaneamente a todas as funções concretizando a tarefa/objetivo através de inúmeras repetições.

Público Alvo

Tendo em conta a premissa deste projeto, determinamos que o público-alvo seria constituído por estudantes de música. Em termos de segmentação etária, concluímos que a faixa entre os 16 e os 60, embora abrangente, será a mais adequada. A nossa aplicação apela a jovens adultos que se sintam confortáveis a utilizar e interagir com novas tecnologias, ao ponto de estarem dispostos a integrá-las nos seus rituais de estudo. Dado que incorpora nas suas funcionalidades conceitos relativamente avançados de teoria musical, ficam excluídos utilizadores que ainda não tenham adquirido tais conhecimentos. Por fim, dado que na aplicação estará incluída uma área social que visará estabelecer e facilitar a comunicação entre utilizadores, que incluem alunos e professores, esta acaba por ser dedicada a estudantes com particular preferência ao nível universitário.

Estado da arte

Numa fase inicial do desenvolvimento de um projeto é imperativo realizar uma pesquisa de mercado e dos produtos concorrentes, para recolhermos informações que nos possam ser úteis para concebermos um produto que se diferencie dos restantes e para o podermos posicionar corretamente no mercado.

Deste modo, recorremos à plataforma Play Store, da Google, para pesquisarmos aplicações semelhantes e recolhermos informações sobre as mesmas, das quais se destacaram as seguintes: My Tractice, Musicians Practice App, Instrumentive e Sessions.

Depois de analisarmos e compararmos as funcionalidades e o design de cada aplicação podemos tirar conclusões que foram essenciais para desenvolvermos a nova identidade da app MPC. Abaixo pode ser vista uma tabela que demonstra as semelhanças e as diferenças de funcionalidades entre as aplicações.

Redesign

Dado que o projeto em questão já contava com uma versão desenvolvida no ano anterior, procedemos à realização de um “redesign” da mesma. Assim, para além da reorganização dos conteúdos da aplicação, dedicamos algum tempo à escolha de diversos elementos ligados à parte gráfica da mesma.

Cores

No decorrer do processo de reinvenção visual da aplicação em apreço, definimos um novo esquema de cores, distinto do original. Estas foram escolhidas tendo em conta o tema do projeto e a imagem que se pretendia transmitir. Procurámos desenvolver uma aplicação apelativa ao nosso público-alvo (maioritariamente composto por jovens), que fosse simples e, ao mesmo tempo, chamativa.

Construímos um esquema cromático composto por quatro cores, sendo a “cor principal” destinada a identificar a marca. A primeira cor de destaque apresentada tem como propósito acentuar determinados elementos quando necessário. Visto que conceptualizamos a criação de dois modos de cor na aplicação- um modo claro e um modo escuro- incluímos no esquema cromático uma cor escura, que seria utilizada como cor de fundo no modo escuro mencionado, e uma cor para destaques que tivesse um bom contraste com esse mesmo fundo.

Logótipo

No seguimento do processo de redesign da marca referente ao projeto em causa, prosseguimos com a idealização e o desenvolvimento de um novo logótipo. Este processo passou por várias fases, nas quais foram criadas diferentes propostas de logótipo. Inicialmente, tomamos como inspiração o produto do ano anterior, sendo que procuramos adotar o conceito de incorporar uma nota musical e um visto – referente às checkboxes presentes na aplicação. Posteriormente, tentámos seguir uma linha de raciocínio diferente, mais focada no minimalismo. Assim, pusemos de parte as simbologias tradicionais da música e focamo-nos no desenvolvimento de formas geométricas combinadas com a sigla mpc. Por fim, partindo do nome da aplicação (Musical Practice Companion) idealizámos uma versão personificada de um símbolo, que representasse um companheiro de estudo. Assim, acabamos por escolher o último logótipo para a identidade do nosso projeto.

Tipografia

Efetuamos ainda alterações nas famílias de fontes que estavam em utilização. Optámos por seguir uma estética mais simples e moderna, afastando-nos da ideia original de uma imagem com influências clássicas e refinadas, normalmente associadas a própria música clássica. Desta forma, selecionamos a fonte Nunito nas suas formas Bold e SemiBold para títulos e elementos de destaque, conjugando-a com a fonte Open Sans, aplicada a parágrafos e elementos de importância secundária.

Testes UX

Após ter sido feito um redesign da aplicação, decidimos prosseguir para a realização dos testes de UX de maneira a recolhermos informação, tanto quantitativa como qualitativa, dos nossos utilizadores. O objetivo é percebermos qual a verdadeira utilidade e pertinência das funcionalidades que já oferecemos, se existem mudanças que devamos e possamos implementar, e, essencialmente, como é que podemos proporcionar a melhor experiência possível aquando a utilização deste produto.

Primeiro, temos que depreender se este produto serve para cumprir as necessidades dos nossos utilizadores. Segundo, tentar perceber, ainda que de forma não muito aprofundada, com que facilidade é que os utilizadores conseguem utilizar a aplicação. Terceiro, procuramos entender se o aspecto visual das interfaces e as interações são agradáveis para o utilizador.

Resultados

De forma geral, a grande maioria dos participantes consideraram que o conceito da aplicação era bastante útil, havendo apenas um participante, em seis, que a considerou moderadamente útil, explicando que atribuiu essa valorização pelo facto da aplicação não contemplar afinador.

Relativamente à facilidade de utilização da aplicação todas as respostas se situam entre os quatro e os cinco valores, sendo que alguns dos participantes referiram as próprias limitações da ferramenta de prototipagem como um fator desestabilizante na sua experiência.

Em suma, praticamente todos os participantes consideraram a aplicação útil e agradável de utilizar. A parte social e o chat foram funcionalidades que consideraram inúteis no que toca ao auxílio ao estudo, porém a maioria achou interessante as potencialidades que estas poderiam ter (o facto de permitir a comunicação entre alunos e professores e membros dentro de uma mesma banda ou orquestra que precisem de trocar impressões). Porém, não deixaram de apontar aspectos que nas suas opiniões melhorariam a sua experiência, sendo que as principais mudanças sugeridas pelos nossos participantes, para tornar a aplicação mais útil e completa e consequentemente proporcionar uma melhor experiência são as seguintes:

Adição da funcionalidade Afinador;
Adição da funcionalidade Gravador de Áudio;
Remoção dos comentários nos posts;
Alteração da interface inicial/principal (passar a ser a interface dos modelos de estudo ao invés da interface do feed social);
Adição da funcionalidade Notas nos Modelos de Estudo para realizar apontamentos relativos ao estudo;
Remoção do feed/timeline;
Adição da funcionalidade Partituras Digitais com a possibilidade de escrever apontamentos nas mesmas;
Alteração do ícone relativo ao feed para um ícone mais adequado e que seja mais facilmente reconhecido pelos utilizadores;
Maior coerência entre o modo claro e o modo escuro;

Quando questionados se utilizariam a nossa aplicação 83,3% dos participantes afirmou que sim.

Viabilidade Tecnológica

Ainda na fase inicial do desenvolvimento do projeto em questão, iniciamos um processo de pesquisa, com o intuito de definir as tecnologias que iríamos adotar para a implementação. Assim, consideramos os pontos positivos e negativos de cada tecnologia começando pelas soluções de Front-End. Tivemos em conta as tecnologias Java, Flutter, Ionic, PWA e React Native.

Considerando todas as vantagens e desvantagens de cada tecnologia decidimos optar por desenvolver o front-end da app em React Native.

React Native é uma biblioteca de Javascript desenvolvida pelo Facebook em 2015 que permite que programadores criem apps nativas para Android e iOS usando os seus conhecimentos de Javascript, o que, no nosso caso, facilitou e tornou mais rápido o processo de desenvolvimento.

Após termos decidido que iríamos usar React Native, tínhamos de decidir que tecnologia back-end usaríamos para guardar e ler dados num servidor e tornarmos a nossa aplicação dinâmica. Para isso, iteramos outra vez o processo de listar as vantagens e desvantagens de cada tecnologia e acabamos por decidir usar a tecnologia Firebase.

Desenvolvimento técnico da app

Estudo da navegação da app

Antes de começarmos a desenvolver a aplicação, foi feito um estudo sobre como seria a melhor maneira de implementar a navegação entre as várias componentes da aplicação. Este estudo consistiu em perceber qual a melhor tecnologia e qual a maneira mais ergonómica de implementar a navegação.

Antes de tudo tentamos perceber o que poderíamos alterar em relação à aplicação do ano anterior para tornar a navegação mais acessível aos utilizadores. Baseando-nos no estudo de Hoober Design for Fingers, Touch and People tentamos aplicar as seguintes heurísticas:

Colocar sempre conteúdo primário e ações no meio da página.
Colocar ações secundárias e tabs nas margens.
Colocar ações terciárias atrás de menus.

Com base nestes estudos decidimos então alterar a localização das tabs principais da aplicação, sendo que na versão anterior da mesma as tabs estavam organizadas num menu em gaveta do lado esquerdo, e, nesta nova versão, as tabs estão organizadas num menu posicionado no fundo do ecrã. Isto permite que as ações principais estejam sempre visíveis durante a utilização, tornando a experiência mais ergonómica e acessível para o utilizador.

Após termos feito as decisões em relação ao design da navegação, começamos a pesquisar qual seria a melhor maneira de a implementarmos. Chegamos à conclusão que a melhor maneira seria usar dois tipos de navegação: navegação em stack e navegação em tab, implementadas através da livraria React Navigation. A navegação em tab seria usada para os utilizadores navegarem entre as cinco funcionalidades principais da aplicação (Feed, Practice, Chat, Notificações e Definições) representada através de um menu com os cinco separadores no fundo da aplicação e a navegação em Stack seria utilizada para fazer a navegação dentro dos vários ecrãs de cada uma dessas funcionalidades.

No entanto, a navegação em stack poderia causar alguns problemas na renderização dos componentes, já que, para uma navegação em stack efetiva, é necessário montar e desmontar os componentes na altura certa para não haver situações de ecrãs que nunca são desmontados e acabam piorando a performance ou até crashar a aplicação. Assim sendo, foi feito um plano pormenorizado de como os ecrãs da navegação teriam de interagir entre si, de modo a facilitar sua implementação mais tarde.

Expo vs React Native CLI

Existem duas maneiras de inicializar o processo de desenvolvimento de uma app em React Native: Expo e a CLI de React Native através do comando react-native-init.

Expo é um conjunto de ferramentas open source construídas à volta de React Native com o objetivo de ajudar os programadores a terem um workflow mais organizado no desenvolvimento de aplicações. Optando por usar este conjunto de ferramentas para inicializar e desenvolver o projeto facilitaria imenso o processo de desenvolvimento já que permitia por exemplo partilhar a app entre os membros da equipa apenas com um simples QR code e não seria necessário dar build na app sempre que os ficheiros fossem alterados. No entanto, usar Expo significaria que não poderíamos usar vários módulos nativos do telemóvel, como por exemplo o módulo de áudio. Por esse motivo tivemos de optar por usar a CLI de React Native para inicializar o projeto abdicando de uma melhor experiência de desenvolvimento.

Android vs iOS

Inicialmente o grupo decidiu que iria desenvolver a app para Android e iOS simultaneamente, já que a plataforma o permitia de maneira bastante cómoda. No entanto, à medida que fomos descobrindo os métodos de testing de aplicações em React Native, apercebemo-nos que, para testar a app para iOS seria necessário um equipamento com esse sistema operativo, o que nenhum membro da equipa possuía. Uma solução seria instalar uma virtual machine com o sistema operativo macOS e correr um emulador de iOS dentro dessa virtual machine, o que iria atrasar imenso o nosso processo de desenvolvimento e teste. Além disso, à medida que fomos instalando packages fomo-nos apercebendo que havia vários problemas de compatibilidade entre dispositivos e que, para desenvolver para as duas plataformas teríamos de ser bastante mais seletivos nos packages que escolhíamos e na maneira que os aplicávamos, o que atrasaria ainda mais o processo. Por esses mesmos motivos, acabamos por decidir desenvolver exclusivamente para Android, sempre com o cuidado de construir a app de maneira a que no futuro, o processo de transitar para outra plataforma seja fácil e claro. Essa transição poderá ser feita através da implementação de Platform Specific Code, que, em React Native, pode ser feito através de condições baseadas no módulo Platform, ou através de extensões de ficheiros específicas, que fará com que a aplicação dê load de apenas determinados ficheiros, baseado na sua extensão e na plataforma em que a aplicação está a ser utilizada.

Manutenção de estado

Sendo que a aplicação foi desenvolvida em React com uma arquitetura modular, para evitar ter que passar props entre componentes de uma maneira exaustiva, decidimos usar o Context API com React Hooks para fazer uma manutenção de estado mais organizada. Esta API permite-nos guardar dados utilizados por um número grande de componentes, como por exemplo o tema (light ou dark) num Context que depois pode ser acessado por qualquer componente sem a necessidade de passar props respeitando a hierarquia.

Conclusão

A criação de uma aplicação dedicada a estudantes e professores do ramo musical foi um desafio interessante que nos colocou fora da nossa zona de conforto, permitindo-nos adquirir novas capacidades e conhecimentos. Mais do que nunca existe uma grande procura de ferramentas que facilitem a interação e partilha de informações entre pessoas de formas não presenciais, especialmente docentes e alunos, pelo que procurámos criar um produto que, para além de oferecer algumas funcionalidades de estudo particulares, pudesse corresponder a esta necessidade. Por sua vez, o facto de este projeto já contar com uma primeira versão tornou-o cativante, de modo que nos motivou a procurar superar as expectativas por forma a criar o melhor produto possível para os futuros utilizadores. Naturalmente, as restrições temporais forçaram uma redução de funcionalidades, sendo que considerámos preferível selecionar algumas às quais dedicarímos os nossos recursos e garantir que estas eram totalmente concluídas, evitando entregar uma aplicação inacabada. Finalmente, tanto o processo de seleção de tecnologias como a aprendizagem de novas frameworks e ferramentas revelou-se bastante gratificante numa perspetiva de crescimento pessoal dos elementos do grupo.

Em suma, Musical Practice Companion é um projeto que despoleta interesse no seu público-alvo e que apresenta um grande potencial de expansão no futuro, visto que existe todo um conjunto de funcionalidades, como, de acordo com os dados recolhidos no decorrer dos testes UX realizados, um afinador ou um bloco de notas, que, embora não tenha sido possível integrar na presente versão da aplicação dadas as limitações previamente mencionadas, poderiam ser adicionadas numa perspetiva de atualização e renovação da mesma como produto. Estas poderiam ser tanto do âmbito funcional, passando por adicionar novas funcionalidades de raíz como partituras digitais ou diferentes modelos de metrónomo, como de teor estético, relacionando-se com o design das interfaces (UI), trabalhando as cores, símbolos e hierarquias dos elementos.