Crie uma interface de usuário no UITableView com o Nexmo In-App Messaging

Crie uma interface de usuário conversacional com o Nexmo Stitch In-App Messaging em uma UITableView

Neste tutorial, vamos ver como integrar o recurso de In-App Messaging no aplicativo do Nexmo Stitch a um UITableView.

1 - Configuração

• Certifique-se de ter dado uma olhada no código-fonte do aplicativo inicial aqui.

• Certifique-se de ter dois dispositivos iOS para realizar este exemplo. Podem ser dois simuladores, um simulador e um dispositivo físico ou dois dispositivos físicos.

2. Atualize o aplicativo para iOS

O aplicativo já está instalado. Agora, basta configurarmos um UITableView para funcionar nele com o Nexmo Stitch! Vamos deixar LoginController.swift de lado. Para esta demonstração, vamos nos concentrar exclusivamente no ChatController.swift.

2.1 Atualização do layout do aplicativo

Vamos adicionar alguns novos elementos ao nosso aplicativo de bate-papo, então vamos atualizar nosso layout para refletir essas mudanças.

2.1.1 UITableView

Vamos começar com uma instância de UITableView cujas células usaremos para exibir mensagens do chat.

Em nosso .xcodeproj navegue até ChatController cena em Main.storyboard. Nosso primeiro passo é excluir o textView.

Para posicionar o UITableView no lugar certo, faça o seguinte:

• arraste uma instância de UITableView para a cena.

• Depois de adicionar os UITableView aos storyboards, restrinja suas guias de espaçamento inicial, final e superior às respectivas Áreas Seguras ao redor. Queremos definir o espaçamento inicial e final para a Área Segura em 16 pontos. Vamos definir a restrição para a guia de layout superior na parte superior do layout da Área Segura em zero pontos.

• Adicione uma célula de protótipo. Arraste e solte a partir da biblioteca de objetos para adicionar uma célula de protótipo na parte superior da nossa instância de UITableView. Para finalizar a adição, nomeie a célula: messageCell pois as células reutilizáveis abrigarão mensagens!

2.2 Adicionando a nova interface do usuário ao ChatController

Nos tutoriais rápidos anteriores, exibimos mensagens adicionando-as a um TextView. Neste exemplo, vamos mostrar como usar o SDK do iOS com uma instância de UITableView.

Para adicionar nossos novos outlets da interface do usuário da vista ao respectivo controlador ChatController, faça o seguinte:

• criar uma conexão a partir da nossa instância de UITableView ao seu controlador em ChatController.swift definimos o delegate ou dataSource referencialmente.

• Com Main.storyboard o programa aberto, mantenha pressionadas simultaneamente as teclas Shift, Option e Command e clique em ChatController.swift para que ele apareça no editor auxiliar.

• Controle o arrasto a partir do corpo do UITableView para ChatController.swift para declarar tableView como uma saída da seguinte forma:

class ChatController: UIViewController {
// tableView for displaying chat
@IBOutlet weak var tableView: UITableView!
}

2.3 Configuração da conexão entre o Delegate e a fonte de dados

Nossa instância de UITableView precisará de um delegate e dataSource. Em viewDidLoad(:) podemos usar isto:

// assignment of delegate to our ChatController
tableView.delegate = self
// assignment of dataSource to our ChatController
tableView.dataSource = self

Designar ChatController como delegado para o UITableView significa que o ChatController concorda em agir em nome do UITableView para cuidar de quaisquer métodos de delegado necessários para nossa instância de UITableView. Da mesma forma, designar ChatController como o dataSource significa que o ChatController concorda em agir em nome do UITableView para lidar com os métodos necessários para canalizar dados para o UITableView. Assim, precisamos agora programar esses métodos. Isso é chamado de “conformidade”.

2.3.1 Programação do Delegado e da fonte de dados

Se você seguiu as etapas descritas na seção 2.3, deverá receber imediatamente um aviso informando que “O tipo ChatController.swift não está em conformidade com o protocolo UITableViewDataSource”. Se isso acontecer, ótimo! Significa que nossa instância de tableView está configurada para seu controlador. Vamos fazer com que ela esteja em conformidade com o protocolo agora!

Para que ele esteja em conformidade com o UITableViewDataSource protocolo, vamos utilizar um dos poderosos recursos do Swift: uma extension. Abaixo do colchete de fechamento da classe, na sua declaração, declare uma extensão para ChatController.

Como essa extensão está em conformidade com UITableViewDelegate, programamos da seguinte forma:

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 0
}

Como o último método necessário para estar em conformidade com o protocolo para UITableViewDataSource é cellForRowAt, vamos adicionar o método da seguinte maneira:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cellWithIdentifier", for: indexPath)
return cell;
}

A implementação desses dois métodos deve corrigir o erro mencionado anteriormente. Ambos os métodos —numberOfRowsInSection e cellForRowAt, no entanto, são código padrão. Na próxima seção, configuraremos esses métodos para interagirem diretamente com nossa instância de ConversationClient para exibir o histórico de bate-papo".

2.4 - Exibir o histórico de uma conversa

Para configurar o código padrão para exibir o histórico do chat com as propriedades da nossa instância do cliente de conversação, precisamos trabalhar no numberOfRowsInSection e cellForRowAt.

2.4.1 numberOfRowsInSection

Vamos começar numberOfRowsInSection. Acessamos a conversations propriedade na conversation pela qual passamos performSegue(withIdentifier:sender) a partir do LoginController.swift. Na events propriedade, que está em conformidade com o CollectionType, há uma propriedade para .count, que retorna o número de mensagens no histórico de um chat. Funciona assim:

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return conversation!.events.count
}

Nossa instância de tableView deveria retornar agora tantas linhas quantos forem os eventos em nossa instância de conversation, enquanto antes não retornava nenhuma. Se isso acontecer, já estamos na metade do caminho! O próximo passo é configurar cellForRowAt para exibir os eventos como mensagens na propriedade textLabel.text . Fazemos isso convertendo um evento por linha em indexPath como TextEvent que é atribuída ao valor de uma constante chamada message. Com message contendo o valor das mensagens de cada linha, atribuímos esse valor a cell.textLabel?.text. Isso ocorre da seguinte forma:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cellWithIdentifier", for: indexPath)

let message = conversation?.events[indexPath.row] as? TextEvent

cell.textLabel?.text = message?.text

return cell;
}

O próximo passo é garantir que nossa instância de tableView seja atualizada; por isso, sendBtn(:) chamemos tableView.reload().

Ao chamar tableView.reload() uma conversa recupera o histórico de eventos. Agora, quando acionarmos uma transição e abrirmos a ChatController.swift, teremos o histórico do bate-papo carregado em nossa instância de UITableView.

Conclusão

Exibir o histórico de um bate-papo é apenas um dos muitos recursos disponíveis no Stitch. Além do histórico de bate-papo, há recursos como indicadores de digitação, ativação/desativação de Voice, métodos práticos para fazer chamadas ou até mesmo a funcionalidade de chamadas IP-PSTN/IP-IP e muito, muito mais!

Nexmo e Swift

Se você é um desenvolvedor ativo em Swift ou está apenas começando a aprender a linguagem, convidamos 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 Stitch In-App Messaging para iOS, confira nossos outros guias de início rápido.

Dúvidas? Entre em contato conosco no Slack da Comunidade Nexmo ou envie-nos um e-mail. Se você tiver alguma dificuldade com o código, pode comparar seu código-fonte com este aqui!