Tecnologia

Uma Introdução ao Apple CarPlay – Parte 2

Por: , dezembro 11, 2017

Na primeira parte do artigo sobre o CarPlay da Apple, vimos quais carros e centrais multimídias são compatíveis com o sistema operacional da Apple para carro. Entendemos que o CarPlay foi criado para dar continuidade a experiência do usuário com o iOS e vimos o início de boas práticas. Nesse artigo iremos dar continuidade as boas práticas de desenvolvimento para o CarPlay e também iremos ver aspectos como conexão, como testar sua aplicação e como funciona o sistema de imagens do CarPlay.

Navegação
Como dito anterior na parte 1 do artigo, a navegação de um aplicativo para o CarPlay precisa suportar no máximo 5 níveis, porém a Apple recomenda que para uma melhor experiência de uso, utilize até 3 níveis.

Existem dois tipos de navegações:
Navegação Horizontal ou Plana
Uma navegação em que o usuário alterna entre as informações sem alterar o nível das telas, por exemplo, o uso do abas (Tab Bar). O fluxo é feito horizontalmente, sem o efeito de “entrar” em uma tela durante a troca.
Fonte: Apple
Fonte: Apple

Navegação Hierárquica
Esse tipo de navegação assim como a horizontal é bem comum em aplicações iOS que utilizem o componente Navigation Bar. A transição entre telas é feita através da mudança de níveis, tendo o efeito de que o usuário está “entrando” em outra tela, como um “histórico”. Aplicações como Mensagens da Apple, possui esse tipo de navegação ao escolhermos visualizar alguma mensagem.
Fonte: Apple
Fonte: Apple

Existe a possibilidade de utilizar os dois tipos de navegação: Horizontal e Hierárquica. o aplicativo de Música da Apple para o CarPlay utiliza esses dois tipos:
Fonte: WWDC Session 719
Fonte: WWDC Session 719

Trabalhando com Imagens
Assim como é no desenvolvimento para o iOS, o CarPlay também trabalha com o sistema de coordenadas para as imagens. No início do desenvolvimento do iPhone, tínhamos somente um tipo de imagem, que posteriormente foi inserido o suporte para imagens com alta qualidade – fator de escala de 2 e logo em seguido veio o fator 3 que são referenciadas por @2x e @3x.
Fonte: Apple
Fonte: Apple

Com o desenvolvimento para o CarPlay, trabalhamos somente com imagens de alta resolução: @2x e @3x na aplicação e o sistema automaticamente exibe o que for correto.
Ícones
Assim como foi dito anteriormente em relação ao uso das imagens e a qualidade, com os ícones não poderiam ser diferentes. CarPlay utiliza os ícones de 60pt: @2x e @3x. Quando você cria um projeto no Xcode, ele não se encontra por padrão configurado na sua pasta de assets do xcassets.
Habilitar os ícones para o CarPlay é bem simples, basta você abrir o xcassets do seu projeto e ir em AppIcon, no canto direito você deverá ver a área de atributos, conforme destaque em vermelho da imagem abaixo:
xcode assets

Observe que existe um box (quadrado) com a informação CarPlay que não está marcado. Você só precisar marcar esse box e automaticamente irá surgir dois “campos” em AppIcon para os ícones do CarPlay:
xcode assets carplay icon

O tamanho dos ícones são:

@2x
@3x
120px
180px
Conexão
Existem duas formas de conectar o seu device com o sistema CarPlay, a primera delas é através da conexão com o cabo em seu iPhone e a outra é através de uma rede wireless.
A experiência de uso será a mesma para qualquer tipo de conexão que você escolher. Obviamente que o processo de emparelhamento entre os dispositivos é mais simples com o uso do cabo, mas pode ser feito via wireless, basta seguir o passo a passo que se encontra na tela do carro e no device. A conexão wireless permite que mais de um iPhone encontre-se conectado ao CarPlay ao mesmo tempo.
O protocolo iAP2 (iPod Accessory Protocol) é usado na comunicação com Bluetooth entre aparelhos que utilizem iOS e acessórios wireless como é o caso do CarPlay. Esse tipo de protocolo você pode encontrar mais detalhes na página MFi Program da Apple ou clicando aqui você pode ler a documentação de boas práticas do uso de Bluetooth.
Simulador

Quem já desenvolve aplicações para o watchOS (sistema operacional da Apple que funciona em seus relógios) já está familiarizado com seu ambiente de desenvolvimento e conhece o simulador que funciona integrado com o iPhone.
O CarPlay não é diferente, ele possui essa dependência com o device, mas não se encontra visível por padrão nas opções de External Display em Hardware do simulador.
simulator external displays

Para que ele fique disponível, o desenvolvedor precisa executar as seguintes etapas abaixo:
1. Feche o simulador caso ele se encontre aberto.
2. Abraoterminaleexecuteaseguintelinhadecódigoabaixo:

     defaults write com.apple.iphonesimulator CarPlay -bool YES

3. Abraosimuladoreespereelecarregarporcompleto.
4. Em seguida vá em Hardware > External Display > CarPlay.
Irá surgir uma nova tela que é referente ao CarPlay e a do iPhone fica indicando que está conectado com o CarPlay:
iphoneCarPlay
defaulCarPlay

Conclusão
Essa foi a segunda e última parte da introdução ao Apple CarPlay. Vimos boas práticas em relação aos dados, quais as navegações são suportadas. Também vimos que o sistema de imagens que o CarPlay trabalha é o mesmo usado no desenvolvimento para iOS, assim como o ícone usado deve ser habilitado junto aos ícones da aplicação iOS, no xcassets e descobrimos como fazer para visualizar o simulador do CarPlay, dessa forma conseguimos testar a nossa aplicação sem a necessidade de possuir um hardware como uma central multimídia ou até mesmo um carro.

Referências
https://developer.apple.com/carplay/human-interface-guidelines/overview/introduction/
https://developer.apple.com/carplay/human-interface-guidelines/icons-and-images/image-size-and-resolution/
https://developer.apple.com/carplay/human-interface-guidelines/overview/messaging-and-voip-apps/
https://developer.apple.com/carplay/human-interface-guidelines/architecture/navigation/
https://developer.apple.com/videos/play/wwdc2015/719/
https://developer.apple.com/videos/play/wwdc2017/719/

  • Receba nosso conteúdo em primeira mão.