Atualizando um aplicativo de Apple Watch para WatchOS 10
Preciso contar uma “inteligência” que desenvolvi no meu Aplicativo para apple watch MegaWatch. A partir da atualização do WatchOS 10, a apple sugeriu uma mudança de paradigma nos apps e a listagem de itens não pode ser mais a tela principal do app. Agora utilizando o componente de swiftUI NavigationSplitView com o parâmetro .automatic no style, você foca na construção da tela de detalhes, e lá no canto superior esquerdo aparece um botão para te levar à listagem de categorias/itens. O interessante que é mencionado no vídeo da apple de documentação é que é bacana você ter alguma maneira de escolher a tela de detalhes mais importante naquele momento e já abrir o aplicativo nela. Para o meu aplicativo eu fiz o uso de uma API que eu mesmo construi que monitora e armazena quantos acessos cada tipo de jogo da loteria está tendo (mega-sena, quina, timemania…). Sendo assim, ao abrir o aplicativo, ele fará uma requisição e descobrirá qual o jogo mais acessado e então navegará automaticamente para ele. Mas aí você deve estar se perguntando: O resultado dessa consulta nunca muda, já que ele abre o jogo mais acessado e já soma o acesso? Não, pois nessa primeira consulta o acesso não é contado. Então, caso o aplicativo vá para a mega sena, mas a maioria dos usuários acesse o resultado da quina, o contador de acessos na quina vai passar o da mega sena e nesse caso os próximos usuários que abrirem o app já vão cair na quina, e assim por diante. Abaixo eu mostro o código e explico um pouco o que acontece e como acontece.
Essa é a primeira View do app agora. Ela contém principalmente uma NavigationSplitView. Para construir a mesma precisamos passar uma view de detalhes, bem como a listagem de itens a ser exibida. O ponto aqui é que devemos utilizar o inicializador de List que aceite uma selection, e é por ela que a navegação automática acontecerá. Construindo os objetos desse jeito, conformando com o protocolo da listagem (identifiable), tudo magicamente funciona. Logo mais abaixo vou mostrar algumas capturas de tela do aplicativo e tudo ficará ainda mais claro. Ao navegar para a listagem, representada pela view do código acima, ela fica como na imagem abaixo.
Porem, a tela principal do app agora é uma das telas de um jogo, que está um pouco diferente. Vou detalhar alguns aspectos das mudanças abaixo.
Perceba que aparece ali no canto superior esquerdo um botão, que automaticamente leva para a listagem. Outra mudança que adicionei nesta tela é um componente chamado de TabView, que funciona como se fosse uma "TabBar vertical". Perceba os três pontos ali no canto superior direito da imagem. Eles se alinham com a coroa digital do relógio. Vamos ver como podemos implementar esse estilo de navegação no código.
Precisamos colocar primeiramente uma NavigationStack, ela vai auxiliar na navegação do app entre a NavigationView. Depois, uma TabView, passando o tabViewStyle como .verticalPage para obter este comportamento. Um pequeno detalhe é que toda e qualquer view dentro da TabView vai virar uma bolinha, então procure agrupar as coisas que façam sentido estar juntas. No meu caso, eu tenho uma scrollView com os textos dos valores e ganhadores dos prêmios e uma VStack com dois botões adicionais de navegação, sem contar a BallsView que contem as bolinhas do resultado. O comportamento padrão é ficar uma navegação utilizando a coroa digital "paginada" como em uma scrollView paginada. A recomendação da documentação inclusive é deixar a scrollView sempre no final da navegação, como um "outros", mas por enquanto não consegui sacar um jeito de agrupar os elementos que faça sentido assim. Um detalhe importante de comentar é que esta API é WatchOS 10+ então, versões antigas não são compatíveis.
