Uma Introdução ao Apple CarPlay – Parte 2

Na primeira parte do artigo sobre o CarPlay da Apple, vimos quais carros e centrais multimídias são compatíveis com...

Dextra

View posts by Dextra
Somos especialistas em desenvolvimento de software sob medida para negócios digitais. Pioneiros na adoção de metodologias de gestão ágil, combinamos processos de design, UX, novas tecnologias e visão de negócio, desenvolvendo soluções que criam oportunidades para nossos clientes. A Dextra faz parte da Mutant, empresa B2B líder no mercado brasileiro e especialista em Customer Experience para plataformas digitais.
Data de publicação: 11/12/2017
Paradigmas

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/

Dextra

View posts by Dextra
Somos especialistas em desenvolvimento de software sob medida para negócios digitais. Pioneiros na adoção de metodologias de gestão ágil, combinamos processos de design, UX, novas tecnologias e visão de negócio, desenvolvendo soluções que criam oportunidades para nossos clientes. A Dextra faz parte da Mutant, empresa B2B líder no mercado brasileiro e especialista em Customer Experience para plataformas digitais.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

nove + três =

Posts relacionados

  1. Sobre a Dextra

    Somos especialistas em desenvolvimento de software sob medida para negócios digitais. Pioneiros na adoção de metodologias de gestão ágil, combinamos processos de design, UX, novas tecnologias e visão de negócio, desenvolvendo soluções que criam oportunidades para nossos clientes.

  2. Categorias

Scroll to top