iMessage App + Stickers

Piera Marchesini

Follow

Published in

Apple Developer Academy | Mackenzie

5 min readApr 27, 2018

--

Por Ana Carolina, Guilherme Chevis, Michelle Faifer e Piera Marchesini

A Apple disponibilizou um framework na WWDC de 2016 para auxiliar o desenvolvimento de app extensions, permitindo que usuários interajam com seu app diretamente através do iMessage (aplicativo de mensagens nativo do iOS). Usuários agora podem facilmente criar e compartilhar conteúdo, adicionar stickers, fazer pagamentos (com a chegada do Apple Pay no Brasil) sem sair do aplicativo do Message.

É possível desenvolver o que quiser com iMessage, praticamente sem restrições. Há diversos exemplos ótimos como o iMessage app do Airbnb, que permite a você organizar suas viagens em grupos sem a necessidade de utilizar muitos recursos. Além disso, iMessage apps podem ser obtidos pela App Store em uma seção separada ou vir em conjunto com um app normal.

O que é iMessage App?

O iMessage app é uma forma de inserção dentro do Message app disponibilizado pela Apple, podendo ser uma extensão de um aplicativo comum ou puramente um app para o Message. Aplicativos como Google Maps, Spotify, Airbnb utilizam o framework para aumentar a experiência do usuário.

Com o iMessage app é possível enviar as mensagens em três formatos: Stickers, Custom messages e interactive messages.

Diferença entre SMS e iMessage

Toda vez em que é utilizado o Message App da Apple é possível enviar mensagens nos dois tipos de formato: SMS ou iMessage. As mensagens iMessage são mensagens de texto, fotografias ou vídeos enviadas para dispositivos iOS e Mac através de redes Wi-Fi ou de dados móveis. Estas mensagens são sempre cifradas e aparecem em balões de texto azuis. Se não estiver utilizando o iMessage, pode utilizar SMS/MMS. Tratam-se de mensagens de texto e fotografias que pode enviar para outros telemóveis ou dispositivos iOS. As mensagens SMS/MMS não são encriptadas e aparecem em balões de texto verdes no dispositivo.

iMessage — Hands on

Neste artigo, será mostrado como realizar um iMessage app extension inspirado no Etch a Sketch, um brinquedo de desenho mecânico muito famoso desde a década de 60. O projeto completo está disponível no GitHub.

Antes de começar o código, é importante mostrar alguns conceitos crucias ao se desenvolver iMessage apps:

Compact vs Expanded

As views no iMessage app podem ser apresentadas em duas formas diferentes: compactas e expandidas. Há uma propriedade chamada presentationStyle que pode ser alterada pela função requestPresentationStyle. Outros métodos importantes a serem sobrescritos na hora de realizar a transição entre estilos são willTransition e didTransition, mostrados mais a frente na parte da codificação.

Os dois tipos de presentationStyle: compact e expanded

Session vs No Session

Quando você desenvolve um iMessage App, é possível associar as mensagens com uma sessão. Mensagens associadas a uma sessão não deixam histórico na conversa — sempre que uma nova mensagem é enviada, ela substitui a anterior com as novas alterações. Essa funcionalidade é bem útil para apps que precisam de uma interatividade melhor como jogos, quiz e etc.

Diferença entre estados de mensagem quando existe Session

Limitações do iMessage App

O framework do iMessage App nos permite somente acessar informações que foram enviadas do próprio aplicativo em que está sendo desenvolvido. Não é possível acessar mensagens anteriores enviadas fora do iMessage App. Por exemplo, não podemos criar um bot com o iMessage App.

Agora vamos para o código

Para começar, o projeto base está disponível no GitHub. Aqui, não iremos mostrar nada sobre a lógica do jogo, apenas como adaptar o projeto para iMessage app. Ao baixar o projeto, deve-se colocar o Storyboard ID nas respectivas UIViewControllers para poder realizar a transição do presentationStyle.

Importante colocar no Storyboard ID "compact" e "extended"

O código para lidar com a transição de telas e instanciar as UIViewControllers corretas deve ser feito na classe MessagesViewController.swift, é o seguinte:

Agora que já temos a transição entre os diferentes presentationStyle pronta, vamos para a parte de enviar o desenho feito na UIView. Para enviar uma mensagem, é necessário transformar em UIImage, para isso, é só fazer uma extensão de UIImage com o construtor de uma UIView como o código abaixo.

Feito isso, o próximo passo é apenas enviar a imagem criada da classe do jogo para a classe responsável pelas mensagens através de um delegate. Como o código abaixo da classe DrawViewController.swift.

A última parte é implementar o protocolo do delegate na classe MessageViewController para efetivamente fazer o envio da imagem por iMessage e voltar a transição de tela para compact.

O que são Stickers?

Diferentemente dos emojis ou dos stickers do Telegram, os Stickers funcionam exatamente como adesivos e é possível colá-los em qualquer lugar da mensagem e quantas vezes quiser. Não é necessário nenhum código para a criação de sticker pack.

Hands on

O primeiro passo é criar um novo projeto no Xcode, utilizando o template Sticker Pack App.

Este template consiste em apenas uma pasta de assets e não exige nenhum tipo de programação.

É necessário apenas arrastar uma imagem para a pasta de assets que um sticker estático será criado automaticamente.

Clicando com o botão direito no grupo Sticker Pack na opção New Sticker Sequence é possível criar um sticker animado. Diferentemente do sticker estático, é necessário adicionar mais de uma imagem.

Todas as imagens adicionadas serão transformadas em frames desta animação e com o sticker sequence selecionado, algumas configurações poderão ser feitas pelo Inspector como frames por segundo, tamanho e repetição da animação.

É importante notar que as imagens possuem um tamanho limite para que funcione como um sticker. O Xcode apresenta um aviso a respeito deste problema, fique atento ;)