Neste tutorial, vamos analisar o novo recurso que a Apple lançou na WWDC 2017, chamado “Safe Area Layout”. Após a análise, vamos criar uma interface de usuário conversacional básica usando o “Safe Area Layout”, adicionando funcionalidades de conversação com o Nexmo In-App Messaging!

Layout da Área Segura para o iOS 11

O que é o layout da área segura? Com o iOS 7, a Apple introduziu o topLayoutGuide e as bottomLayoutGuide como propriedades do UIViewController para permitir flexibilidade em layouts cujas bordas mais externas tocam áreas designadas para barras do UIKit, como a de status, a de navegação e a de abas. A Apple, no entanto, descontinuou essas guias, substituindo-as pelo Guia de Layout da Área Segura, que é detalhado na Sessão 412 da WWDC 2017, “Técnicas de Layout Automático no Interface Builder”. Aqui está uma explicação visual:

Auto Layout Guides

A diferença fundamental está em passar de dois retângulos para um. Considerando que a topLayoutGuide se referia à borda inferior de um retângulo superior ou à bottomLayoutGuide se referia à borda superior de um retângulo inferior, a nova Área Segura é a área circundada por esses retângulos (ou seja, uma redução simplificada). É uma diferença pequena que resulta em uma grande mudança na maneira como o Auto Layout mapeia suas restrições às visualizações. Se qualquer uma das barras do UIKit desaparecesse, o layout da Área Segura se ajustaria de acordo.

Vamos criar agora a interface conversacional básica.

Interface de usuário conversacional básica

Vamos criar um arquivo .xcodeproj com o destino de implantação definido como iOS 11 ou superior. Dentro do .xcodeproj programa, localize o ViewController.Swift.

Nossa interface de usuário básica para conversação será muito básica, então, ViewController.Swift vamos adicionar funcionalidades para duas saídas e uma ação. A ação será para uma UIButton. O restante serão saídas.

Com os controladores configurados, vamos nos concentrar nos elementos da interface do usuário correspondentes, como textView, UITextField, e UIButton.

Mudar de ViewController.Swift para Main.storyboard com Shift + Option + Command + Enter em nosso .xcodeproj. Vamos arrastar e soltar uma instância de textView para a ViewController.Swiftcena do .

Observação: Se você quiser um resumo rápido sobre quais devem ser as restrições no esboço do documento, role a página até o final desta seção.

• Arraste o controle da parte superior da visualização de texto até a parte superior da área segura, mantendo o valor constante em zero. Arraste o controle do espaço final da visualização de texto até o espaço final da área segura, mantendo o valor constante em zero. Arraste o controle do espaço inicial da visualização de texto até o espaço inicial da área segura, mantendo o valor constante em zero.

• Arraste uma instância do UIButton, mantendo a tecla Control pressionada, até o canto inferior direito da vista de conteúdo, abaixo da vista de texto. Arraste, mantendo a tecla Control pressionada, do botão até o espaço final do Layout da Área Segura. Arraste, mantendo a tecla Control pressionada, do botão até a parte inferior do Layout da Área Segura. Defina a constante dessas restrições como 15.

• Arraste uma instância do UITextField, mantendo pressionada a tecla Control, até o canto inferior esquerdo da vista de conteúdo, abaixo da vista de texto. Arraste, mantendo pressionada a tecla Control, do campo de texto até o espaço inicial do layout da área segura. Arraste, mantendo pressionada a tecla Control, do campo de texto até a parte inferior do layout da área segura. Defina a constante dessas restrições como 15.

Observação: Opcionalmente, você pode definir esses dois conjuntos de restrições simultaneamente clicando com a tecla Shift pressionada no esboço do documento, da instância até a visualização.

• Arraste do campo de texto até o botão. Clique em “espaçamento horizontal” e “última linha de base”. Para resolver o aviso grave relacionado a essas duas instâncias que disputam o espaçamento horizontal, selecione uma prioridade de “ajuste ao conteúdo” para o botão que seja maior do que a do campo de texto, por exemplo, 251. Assim, o espaçamento horizontal do campo de texto passará a variar de acordo com o tamanho da tela do dispositivo, sem que o espaço entre o botão e o texto ou o tamanho do botão sejam alterados.

• Por fim, arraste a partir da parte inferior da visualização de texto até a parte superior do campo de texto, selecionando o espaçamento vertical com um valor constante de 15.

Aqui está um breve resumo das restrições que devem constar no esboço do documento:

Safe Layout Guide Constraints

Com nossa interface conversacional básica projetada com o Safe Area Layout, vamos implementar a funcionalidade conversacional usando o Nexmo In-App Messaging.

In-App Messaging da Nexmo

Nexmo In-App Messaging já está disponível na versão de pré-visualização para desenvolvedores e você está convidado a ser um dos primeiros a usar essa tecnologia para criar experiências de chat com a identidade da sua marca em seus aplicativos móveis ou na web.

Amplie seus canais de comunicação com os usuários em ambientes como centrais de atendimento ou marketplaces online. Com o Nexmo In-App Messaging, você pode criar facilmente essas experiências de mensagens — e quaisquer outras que possa imaginar — para oferecer aos seus usuários uma interface de mensagens intuitiva e familiar.

O Nexmo In-App Messaging inclui:

• SDKs multiplataforma: Integre SDKs para iOS, Android e JavaScript para que os usuários possam conversar sem problemas em qualquer dispositivo.

• Bate-papo com diversos recursos: Crie uma experiência que mostre indicadores de digitação e quando as mensagens foram enviadas, entregues e lidas.

• Sincronização offline: Com o cache integrado, as mensagens são salvas quando um dispositivo fica offline e enviadas ou recebidas assim que o dispositivo volta a ficar online.

Inscreva-se

Experimente o Nexmo In-App Messaging criar um Account na Nexmo. Após o cadastro, podemos começar a integrar o SDK do iOS ao nosso .xcodeproj.

Criação de um aplicativo Nexmo, uma conversa, um usuário e adição de um usuário

Informações detalhadas sobre o processo de criação de conversas no Nexmo estão disponíveis no guia de início rápido para iOS aqui. Um resumo rápido é o seguinte:

$ nexmo app:create "Conversation iOS App" http://example.com/answer http://example.com/event --type=rtc --keyfile=private.key

> Application created: aaaaaaaa-bbbb-cccc-dddd-0123456789ab

Anote o ID do aplicativo. Vamos nos referir a ele como YOUR_APP_ID mais tarde.

$ nexmo conversation:create display_name="Nexmo Chat"

> Conversation created: CON-aaaaaaaa-bbbb-cccc-dddd-0123456789ab

Anote o ID da conversa. Vamos nos referir a ele como YOUR_CONVERSATION_ID mais tarde.

$ nexmo user:create name="jamie"

> User created: USR-aaaaaaaa-bbbb-cccc-dddd-0123456789ab

Anote o ID do usuário. Vamos nos referir a ele como YOUR_USER_ID mais tarde.

$ nexmo member:add YOUR_CONVERSATION_ID action=join channel='{"type":"app"}' user_id=YOUR_USER_ID

$ USER_JWT="$(nexmo jwt:generate ./private.key sub=jamie exp=$(($(date +%s)+86400)) acl='{"paths": {"/v1/sessions/**": {}, "/v1/users/**": {}, "/v1/conversations/**": {}}}' application_id=YOUR_APP_ID)"

$ echo USER_JWT

Anote o JWT gerado. Vamos nos referir a ele como USER_JWT mais tarde.

Adicionando o SDK do Nexmo In-App para iOS ao CocoaPods

Navegue até o diretório raiz do projeto no Terminal. Execute: pod init. Abra o arquivo chamado PodFile. Configure suas especificações conforme necessário:

platform :ios, '9.0'

source "https://github.com/Nexmo/PodSpec.git"
source 'git@github.com:CocoaPods/Specs.git'

target 'QuickStartOne' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!
pod "NexmoConversation", :git => "https://github.com/nexmo/conversation-ios-sdk.git"
end

Visualização e Controlador

Com o Cocoapod adicionado, vamos conectar a vista criada anteriormente ao controlador. Certifique-se de criar uma conexão entre a instância do UIButton e a ação, além de conectar as instâncias da vista de texto e do campo de texto aos seus respectivos outlets.

Fazer login de um usuário

Então, ViewController.Swift vamos fazer o login do usuário com a USER_JWT gerado anteriormente.

override func viewDidLoad() {
super.viewDidLoad()
let client: ConversationClient = {

ConversationClient.configuration = Configuration(with: .info)

return ConversationClient.instance
}()

client.login(with: USER_JWT).subscribe()
}

Envio de eventos de texto

Para enviar uma mensagem, basta chamarmos send() nossa instância de conversation; send() que recebe um argumento, uma mensagem do tipo String.

// sendBtn for sending text
@IBAction func sendBtn(_ sender: Any) {

do {
// send method
try conversation?.send(textField.text!)

} catch let error {
print(error)
}

}

Recebimento de eventos de texto

Nesta viewDidLoad() queremos adicionar um manipulador para lidar com novos eventos, como os TextEvents que criamos ao pressionar o botão “Enviar”. Podemos fazer isso da seguinte maneira:

// a handler for updating the textView with TextEvents
conversation?.events.newEventReceived.addHandler { event in
guard let event = event as? TextEvent, event.isCurrentlyBeingSent == false else { return }
guard let text = event.text else { return }

self.textView.insertText(" (text) n")
}

Experimentando

Depois de integrar o SDK do Nexmo In-App Messaging para iOS ao seu projeto, suas instâncias de TextEvent devem aparecer no layout da área segura. Experimente no seu iPhone ou no Simulador do iOS! O resultado final ficará assim:

iPhone X

Conclusão

Neste tutorial, analisamos o novo recurso lançado pela Apple na WWDC 2017, chamado “Safe Area Layout”. Após analisá-lo, criamos uma interface de usuário conversacional básica utilizando o novo “Safe Area Layout”. Com esse layout, adicionamos funcionalidades conversacionais por meio do Nexmo In-App Messaging. Voilà!

Nexmo e Swift

Se você é um desenvolvedor ativo em Swift ou está apenas começando a aprender a linguagem, incentivamos você a participar da Comunidade de Desenvolvedores da Nexmo. Confira os projetos hospedados no GitHub da Nexmo ou siga-nos no Twitter @NexmoDev.

Convidamos você a interagir com nossa equipe de defensores de desenvolvedores, conferir nossos repositórios de código e muito mais. Se quiser ver mais tutoriais sobre como usar o Nexmo In-App Messaging para iOS, confira nossos outros guias de início rápido.

Dúvidas? Entre em contato conosco na Comunidade Nexmo no Slack ou envie-nos um e-mail.