O que você precisa saber para desenvolver seu primeiro app para Apple Watch
A ideia central deste artigo é clarear alguns conceitos do desenvolvimento de apps para Apple Watch e realizar uma pequena implementação inicial.
Se você é um usuário do tão famoso Watch, você ja está acostumado com o layout e principais características físicas. Caso seja seu primeiro contato, irei explicar um pouco sobre o dispositivo.
Como você pode ver na imagem a cima, temos dois botões principais no Watch, são eles:
Digital Crown: botão lateral em forma de "rodinha"
- Pode ser girada para mover tabelas e listas para cima ou para baixo e também para aumentar ou diminuir o zoom da tela;
- Pode ser pressionada para sair de algum app por exemplo;
- Pode ser pressionada por alguns segundos para ativar a Siri.
Side button
- Pode ser pressionado por alguns segundos para desligar o dispositivo, acessar ficha médica ou emitir alerta de emergência;
- Também pode ser clicado uma vez para visualizar o dock de apps recentemente abertos;
- Com dois cliques seguidos, podemos acessar a Wallet com todos os cartões registrados e realizar um pagamento em segundos.
Atualmente estamos na versão 8.6 do watchOS e em breve chegará a versão 9.0. Assim como os aplicativos para iPhone e iPad, para o Watch também devemos ficar atentos às atualizações para prevenirmos erros que possam surgir em decorrência das atualizações. A nova versão (watchOS 9.0) será compatível com os modelos series 4,5,6 e 7 além do SE.
CONCEITOS IMPORTANTES
No Apple Watch nossos recursos são limitados. Temos um poder computacional reduzido se comparado ao iPhone; uma tela significantemente menor; memória reduzida (até os modelos disponíveis atualmente); e também contamos com atenção reduzida dos usuários, pois uma tarefa no Watch não deve ser trabalhosa e demorada já que visamos o conforto.
A própria Apple recomenda que tarefas necessitem de no máximo 2 segundos para serem efetuadas.
LET’S DO IT
Para começarmos um projeto totalmente do 0, fornecendo suporte tanto para iPhone, iPad e Watch, vamos seguir os seguintes passos.
- Abra o Xcode e clique na opção de criar um novo projeto;
- Em seguida selecione a tab do watchOS;
- Dentro das opções de aplicações selecione a opção "iOS App with Watch App". Aqui estamos dizendo que queremo criar um app para iOS e que irá possuir também o app para Apple Watch;
- Clique em "Next'
Em seguida preencha as informações com o nome do seu app;
selecione a conta da sua equipe de desenvolvimento; e também crie um bundle identifier para seu app.
Ao criar o projeto, perceba que existem agora duas novas pastas relativas ao Watch.
A pasta que contém o nome ".. WatchKit App" diz respeito ao conteúdo visual do nosso aplicativo, ou seja, todas as telas e interfaces estarão presentes aqui. Automaticamente o Xcode nos fornece uma Interface para criarmos nosso layout.
Ja na pasta que possui ".. WatchKit Extension" possuirá todas as nossas classes, modelos e estruturas que ficarão responsáveis pela lógica e regras do app.
PARTICULARIDADES
Ao selecionarmos a classe InterfaceController, podemos reparar que automaticamente está importanto o framework Foundation e o WatchKit.
O Foundation já é um conhecido para quem está familiarizado com o desenvolvimento em Swift. Ele nos fornece toda a base e tipos primitivos do Swift para podermos construir as lógicas do código. Assim como o UIKit, o WatchKit é um framework nativo da Apple que nos permite construirmos layouts e utilizar componentes nativos. Porém, para construirmos o layout no Watch, nao usaremos o UIKIT e sim o WatchKit.
Um curiosidade aqui é que o WatchKit já importa dentro dele o Foundation, logo, não precisamos importar os dois em uma mesma classe 😉.
Clicando no Interface dentro de ".. WatchKit App", conseguiremos ver a tela inicial do nosso app para o Watch, que é uma WKInterfaceController.
Configure a cor da controller para .yellow e rodar o app no seu Watch pessoal ou em um simulador.
obs: Caso esteja utilizando uma máquina com M1, é possível que você não irá conseguir executar o app se o seu Xcode estiver configurado para abrir utilizando o Rosetta. Encerre completamente seu Xcode, desmarque a opção de abrir o Xcode com Rosetta e em seguida abra o projeto novamente.
Para executar o app, selecione o target que contem o nome do seu app + “WatchKit App”, como na imagem abaixo.
Em seguida selecione um modelo de simulador de Apple Watch que deseja compilar o seu app.
UHUU! COMPILOU DE PRIMEIRAA 😎
Existe um componente chamado "Group", que é muito utilizado para criar as telas dos apps para Apple Watch. Um Group é um espaço ou container onde podemos gerenciar e organizar outros componentes que sejam adicionados a ele.
No desenvolvimento para Apple Watch não utiliza-se as famosas constraints para construir layouts, e sim utiliza-se o conceito de proportional layout. Assim, organizamos os componentes dentro de um Group informando qual a porcentagem de largura e altura aquele componente irá possuir em relação ao Group.
Entendido isso, vamos adicionar um Group clicando no botão "+" no canto superior direito do Xcode e arrastando o componente para dentro da controller.
obs: removi aqui a cor .yellow de fundo da controller e adicionei a cor .green para o Group para fins didáticos.
Agora adicionando um componente chamando "Button" (com a cor .blue) dentro do nosso Group, podemos observar que o botão ocupou todo o espaço do Group. Isso ocorreu pois a propriedade que define a largura (width) do botão está configurada como Relative to Container, ou seja, o botão irá possuir a largura do seu container de fora, no caso o Group.
Podemos alterar essa configuração utilizando do proportional layout. Dentro do Attributes Inspector do lado direito do Xcode, encontre a seção Size e insira a proporção de 50% para o botão possuir em sua largura. Você pode informar isso diminuindo o valor default que é 1(100%) para 0,5(50%).
Veja como ficou agora:
Adicionando um novo botão com a cor .red dentro de Group e colocando também a sua proporção de largura para 0,5, podemos observar que o Group consegue ajustar os seus componentes de modo a ficar divididos meio a meio dentro de sua area.
Esse comportamento ocorre para os componentes que precisarmos como Button, Label, TextField, Timer e todos os outros. Também conseguimos trabalhar com a altura dos componentes dentro de um Group de modo proporcional.
Um componente importante que destaco aqui é a "Table", que nos permite construir listas e tabelas para exibir nossos conteúdos.
Para criar um simples exemplo de utilização da Table, adicionei esse componente à controller, e sem seguida adicionei uma Label dentro do Group localizado dentro da Table Row Controller criado automaticamente.
obs: Uma Table Row Controller é o tipo das linhas ou célular que serão exibidas na Table.
Criei também um novo arquivo chamado MediumRow que possui uma class do tipo NSObject, tipo esse que é compatível com a Table Row Controller.
import WatchKit
class MediumRow: NSObject {
}
Selecionando a Table Row Controller no arquivo de interface do app, adicione um identificador para essa célula ou linha. A partir disso, iremos utilizar esse identificador para conseguir carregar as linhas na tabela.
Agora, conetamos a interface com a lógica adicionando um IBOutlet da Table para a classe InterfaceController. Fazemos isso pressionando a tecla control +, clicando no componente Table e arrastando a seta para a classe ao lado. Por fim, nomeamos essa outlet criada.
Logo depois, dentro do método awake que é chamado para carregar todo o layout da controller existente, adicionar a linha de código a seguir:
table.setNumberOfRows(10, withRowType: “mediumRow”)
Estamos dizendo aqui que estamos criando 10 linhas do tipo mediumRow dentro da Table presente na nossa controller.
Compilando o código e executando o app….
Por enquanto é isso tudo!
Espero que tenha conseguido absorver um pouquinho do mundo Watch e fique atento as novas publicações :)) 💙
