Desenvolvendo para Apple Watch com Xamarin iOS e C#

Estamos vivendo hoje uma novo conceito sobre as coisas que usamos para vestir, iniciamos de fato a era dos Wearables : os Dispositivos vestíveis.

O Xamarin por sua vez tem sua proposta o desenvolvimento crossplatform utilizando todo o poder da linguagem C# e os melhores recursos que a plataforma .Net proporciona usando como base os projetos OpenSource MonoTouch e MonoAndroid.

Xamarin Werable e Xamarin iOS

Mas vamos falar da proposta deste post, que é o desenvolvimento para Wearables, falando um pouco sobre como iniciar o desenvolvimento para Apple Watch com o Watchkit que o Xamarin iOS já tem suporte desde a sua primeira versão Beta.

O Xamarin tem suporte nativo para o dispositivo de cada plataforma, pois assim como o desenvolvimento para smartphones e tablets, ele utiliza também 100% do SDK do Android e do iOS. Cada plataforma possui um dispositivo, arquitetura, recursos diferentes, formas de acessar e sensores diferentes. Toda a sua comunicação é feita pareado a um smartphone utilizando a tecnologia Bluetooth LE.Xamarin, Wearables e Xamarin iOS

O Device e a SDK WatchKit

Mais recentemente lançado o Apple Watch não é totalmente independente do smartphone.Utilizamos o WatchKit instalado junto com o Xcode para fornecer a API necessária para esse desenvolvimento. O Código não é executado direto no device, isto é, somente uma UI fica disponível para interação e o código ou Parent App será executado no iPhone que serve toda para a comunicação e configuração do aplicativo, o qual abordaremos logo mais. Os sensores por sua vez não são acessíveis, sendo assim você não terá um nível de customização como no Android Wear. E por sua vez, não é feito nenhum deploy de App no device, esse Parent App é executado e instalado apenas no iPhone, ficando no Apple Watch somente a UI exibindo informações precisas e notificações.

Watchkit Werable e Xamarin iOS

Em ambos não temos teclado para digitação, temos a função de assistente de voz, ditado, mais refinada para ser utilizada no smartwatch, justamente por ter uma tela pequena, não seria tão agradável para o usuário ter um teclado em uma tela tão reduzida.

Criando nosso projeto com Xamarin iOS

Seguindo os primeiros passos para criar uma aplicação para Apple Watch iremos em : File > New > Solution > iOS >Single View App

criando_singleview Werable e Xamarin iOS

É necessário primeiramente criar uma single view app, pois é ela que será a Full App iOS, ou Parent App, que será base do projeto WatchKit. Após isso precisamos adicionar o tipo de projeto iOS > Extension > WatchKit App, dentro da solution

watchkit_app Werable e Xamarin iOS

Após selecionar o tipo do projeto e avançar, teremos uma tela igual abaixo onde podemos selecionar a parent App, que será o projeto Single View App que criamos anteriormente,  incluir o tipo de tela Glance, que são aquelas telas que no device em espera exibem informações rápidas como horário ou ícones de alertas, e Notifications que é a estrutura para a App Watchkit receber e exibir notificações recebidas.

tipos_Telas Werable e Xamarin iOS

A estrutura do projeto

Conforme a imagem abaixo nós teremos essa estrutura de Solution, após adicionar o projeto WatchKit. O Primeiro projeto da solution é a Parent App, uma app feita em Xamarin iOS que será a base de comunicação do device, pois é no próprio iPhone que ele fica instalado,  com o App do Apple Watch, neste primeiro momento não iremos trabalhar com ele, mas nele pode conter configurações de preferência, tutoriais, entre outros recursos para o App WatchKit.

Logo Abaixo dele temos o projeto de tests padrão criado pelas solutions do Xamarin iOS e em seguida o WachKitApp. O Projeto WatchKitApp é o projeto irá ser instalado no Apple Watch, porém como podem observar temos uma estrutura muito reduzida, pois o device não possui tantos recursos quanto um smartphone. Na pasta resources serão adicionados todas as imagens com baixa resolução e tamanho que serão utilizadas no projeto, é algo que devemos tomar cuidado na hora de criar as imagens que serão usadas. O mais importante desse projeto é o arquivo interface.StoryBoard , onde iremos criar as Views ( Telas ) do nosso App WatchKit. O Quarto e ultimo projeto da nossa solution é Extension, nele vai contar toda a nossa regra de negocio, todo o nosso "codebehind" do das views que criamos no AppWatchKit. Para toda view criada lá, iremos manipular com uma Controller no WathKitExtension.

Estrutura da Solution Werable e Xamarin iOS

Desenvolvendo e Integrando as aplicações

Dando um duplo click no arquivo interface.storyboard, que está dentro do projeto WatchKitApp, iremos abrir e perceber que temos uma view chamada Interface Controller já criada. Nela iremos arrastar dois controles que estão na nossa toolbox do lado esquerdo, chamados Button e Label. De forma muito simples, drag & drop, arrastamos e posicionamos os controles na nossa view conforma o exemplo abaixo.

storyboard3 Werable e Xamarin iOS

Após adicionar teremos a nossa view sendo apresentada desse jeito. Podemos então selecionar um controle de cada vez, o Button e a Label, e acessando as Properties na guia do lado esquerdo do Xamarin onde podemos editar o conteúdo dos controles entre outras propriedades. Neste primeiro momento usaremos a propriedade Name, a primeira da aba Widget, localizada na guia properties para dar um ID para o controle, dessa forma conseguiremos manipular ele na classe InterfaceController.cs , localizada no projeto Extension.

storyboard2 Werable e Xamarin iOS

Neste exemplo apenas modifiquei o texto exibido dentro do Button para "Press" e o texto que está dentro da Label para " 0 Clicks ",  esse texto pois irei criar um código simples para exibir os numero de vezes que o button receber um click, então será exibido na label. Após personalizar nosso componentes, vamos selecionar o Button e ir na aba Events da guia Properties do Button, onde teremos um campo chamado " Action " para adicionar o evento que iremos manipular o evento Click quando o Button for pressionado. Neste campo iremos digitar " OnButtonPress " e apertar enter, para que grave no Button o evento que iremos utilizar.

Werable e Xamarin iOS Events

Após adicionar o evento OnButtonPress no Button, iremos no projeto Extension, abriremos a classe InterfaceController.cs, pois a mesma esta referenciada a View que acabamos de configurar, e adicionaremos o seguinte bloco de código após o método DidDeactivate.

O que o método faz é bastante simples: Criamos um contador com uma variável click do tipo inteira sendo inicializada com o valor 0, dentro do método OnButtonPress que é utilizado para manipular o evento Click do Button, criamos uma variável msg e dentro dela informamos que o valor que receberá será uma string que irá incrementando o valor inteiro da variável click e complementar a string. Então vamos utilizar o valor da variável msg e utilizar a propriedade da label, chamando ela,  através do Name ou ID que criamos na guia properties, SetText() incluindo nela a própria variável, sendo assim estamos indicando que o texto da nossa label irá ser alterado conforme o valor da string também for.

codigo Werable e Xamarin iOS

Feito os passos acima, vamos realizar o debug da APP. Quando o emulador do iOS estiver aberto, selecionamos ele, iremos até a opção HardWare > External Displays e selecionamos uma das duas opções do Apple Watch, para que seja aberto um  display externo simulando o device AppleWatch.

Werable e Xamarin iOS External Displays

Com a aplicação rodando teremos esse resultado. A cada click que foi feito no botão, ele irá incrementar o numero do texto que aparece na label, conforme a imagem abaixo.

Werable e Xamarin iOS Executando

Esse exemplo simples foi para mostrar como podemos iniciar facilmente o desenvolvimento para aplicações usando o sdk do WatchKit e o Xamarin iOS. Nos próximos posts irei mostrar como consumir dados utilizando o SDK do WatchKit e do Android Wear exibindo no device.

Exibições: 183

Comentar

Você precisa ser um membro de DevBrasil para adicionar comentários!

Entrar em DevBrasil

Comentário de alexandre fonseca em 30 agosto 2016 às 1:30

Muito bom e explicativo

Comentário de Pedro Ivo Faria do Amaral em 2 abril 2016 às 9:18

ótima ideia !! Mas você tem que analisar o processo do soft em si !!! 

© 2017   Criado por Ramon Durães.   Ativado por

Badges  |  Relatar um incidente  |  Termos de serviço