Chat – Xamarin.Forms

Olá, neste post irei demonstrar como você pode construir um chat utilizando Xamarin.Forms.

 

Irei partir do princípio que você acabou de criar um projeto Xamarin.Forms do tipo Portable Class Library (PCL), caso possua alguma dúvida sobre isso, recomendo ler o post Criando um projeto Xamarin.Forms.

Estruturando o projeto

Para este projeto, utilize o padrão MVVM (Model View ViewModel), dessa forma crie uma estrutura de pastas no seu projeto portable, como a demonstrada a seguir.

pcl

Crie também uma pasta CustomCells, que servirá para adicionar algumas ViewCell’s.

ADICIONANDO O NUGET PACKAGE

Para auxiliar na utilização do padrão MVVM, adicione o nuget package MvvmHelpers.

Clique com o botão direito em cima de sua Solution e selecione “Manage NuGet Packages for Solution…”.

manage

 

Digite “Refractored.MvvmHelpers” e selecione o plugin como demonstrado na imagem a seguir.

mvvmHelpers install

 

Selecione todos os projetos e clique no botão “Install”.

mvvmHelpers install

Models

Dentro da pasta Models crie uma classe chamada Message.

models

A classe Message terá todas as propriedades necessárias da mensagem, neste caso suas propriedades serão:

  • Text: O texto da mensagem.
  • MessageDateTime: A data da mensagem.
  • TimeDisplay: Receberá a data da mensagem formatada.
  • IsTextIn: Flag para indicar se a mensagem está sendo recebida (True) ou enviada (False).

Observe que a classe Message herda da classe ObservableObject que encontra-se no MvvmHelpers.

 

ViewModels

Dentro da pasta ViewModels crie uma classe chamada MainPageViewModel.

vm

A classe MainPageViewModel irá conter as seguintes propriedades.

  • ListMessages: Lista contendo todas as mensagens.
  • SendCommand: Comando que será executado quando o usuário clicar no botão enviar.
  • OutText: Texto digitado pelo usuário.

Observe que a classe MainPageViewModel herda de BaseViewModel que encontra-se no MvvmHelpers e as propriedades ListMessages e SendCommand estão sendo instanciadas no método construtor.

 

CustomCells

Dentro da pasta CustomCells, crie uma classe chamada SelectorDataTemplate e duas ViewCell, uma chamada de TextInViewCell e a outra TextOutViewCell.

custom

TextInViewCell

screenshot-1513343960365

A TextInViewCell servira para apresentar a mensagem que chega para o usuário. Ela terá um Frame contendo uma Label com o texto e uma Label para apresentar a Data da mensagem.

TextOutViewCell

screenshot-1513343960365

A TextOutViewCell servira para apresentar a mensagem que é enviada pelo usuário. Ela terá um Frame contendo uma Label com o texto e uma Label para apresentar a Data da mensagem.

 

 

SelectorDataTemplate

A classe SelectorDataTemplate servirá para identificar quando a mensagem está chegando ou sendo enviada, e no método OnSelectTemplate irá determinar qual ViewCell será usada.

Observe que a classe SelectorDataTemplate herda de DataTemplateSelector que encontra-se no Xamarin.Forms.

 

 

Views

Dentro da pasta Views crie uma ContentPage

views

 

Observação: Não se esqueça de alterar o arquivo App, para que a MainPage seja  instanciada corretamente.

app

 

MainPage Xaml

A MainPage deverá conter:

  • SelectorDataTemplate no ResourceDictionary.
  • ListView para apresentar as mensagens.
  • Entry para o usuário escrever um texto.
  • Button/Image para o usuário clicar quando quiser enviar.

 

MainPage Code-Behind

No método construtor instancie uma MainPageViewModel, atribua ao BindingContext e em seguida defina o Scroll para o final da lista no evento CollectionChanged, como demonstrado a seguir.

 

 

Resultado

ezgif.com-gif-maker (3)

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

4 comentários em “Chat – Xamarin.Forms

  1. Bom dia! Tenho uma aplicação que envia e recebe cadastros para um banco de dados em um servidor online. O banco de dados usado é firebird 2.5 e o processo de envio e recepção dos dados é via Json. Gostaria de saber se existe a possibilidade de enviar essas mensagens para ele e baixar dele quando o usuário estiver conectado. Neste caso, não preciso que a conversa seja no stilo realtime, pode até ser, mas para o meu caso, não tem necessidade. Só preciso que quando o usuário se conectar no aplicativo, o server consiga listar as mensagens enviadas por outro usuário chegue pra ele, respeitando a ordem das conversas, no mesmo esquema do exemplo citado acima. Aceito sugestões e idéias.

    Curtir

    1. Olá Eduardo,
      Como você disse que não precisa ser realtime e você já possui uma comunicação com o banco de dados, acredito que fique fácil para você.
      O que você precisa fazer é quando o usuário se conectar com a internet, baixar as mensagens para ele. E no app você adiciona em uma list e ordena pela data. Para ficar mais preciso utilize a Data, hora, minuto e segundo.

      Espero ter ajudado 🙂

      Curtir

  2. Boa tarde, muito bom o post !!
    Uma dúvida…pra uma estrutura de chat mesmo, tipo whatsapp, é recomendavel que criar um serviço com SignalR ou acha que só uma Api + Database serve ? Quando penso sobre, acho que se a aplicação não precisar ser tempo real (bem fidedigno tipo Whatsapp) serve uma Api + Db…mas se precisar ser tempo real, é aconselhavel um SignalR ne…
    Um cliente meu ta interessado em um chat e estou dando uma estudada.

    Curtir

    1. Olá Marcelo, obrigado !!
      Bom… acho que você mesmo acabou respondendo a sua pergunta kkk
      Se esse chat for mais algo como para demonstrar algumas observações, uma Api + DB acredito ser o suficiente. Caso precise de algo mais complexo, acho que só isso não resolva o seu problema.
      Espero ter ajudado.

      Curtir

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s