Как создать Android-чаты с помощью Xamarin и Twilio

Вы были в восторге, когда узнали о поддержке Twilio IP Messaging для iOS в Xamarin, но задавались вопросом: «А что насчёт Android?» Читайте дальше, и всего за 10 минут вы создадите Android-чат с использованием Xamarin и Twilio IP Messaging.

Если вы разрабатываете этот туториал на Mac, убедитесь, что у вас установлены Xamarin Studio и Xamarin.Android. Для этого примера потребуется Android API уровня 21. Разработчикам на Windows понадобятся:

Разработчикам на Windows потребуются:

— Visual Studio 2015

— Xamarin для Windows с Xamarin.Android

— Права администратора на вашем компьютере для разработки.

После установки всех необходимых компонентов мы почти готовы приступить к созданию приложения. Но сначала нужно настроить учётную запись Twilio, чтобы использовать IP Messaging в нашем приложении.

Первое, что нам нужно, — это учётная запись Twilio. Пробные аккаунты бесплатны, поэтому, если у вас её ещё нет, перейдите на сайт Twilio и зарегистрируйтесь. Я подожду здесь, пока вы это сделаете.

Вы вернулись! Отлично. Перейдём ко второму шагу.

Для работы IP Messaging нам нужно создать токен доступа. Токен доступа сообщает Twilio, кто является пользователем чата и что он может или не может делать в рамках сервиса IP Messaging. Токены генерируются на сервере, чтобы защитить секреты вашей учётной записи Twilio.

Вы можете написать генератор токенов на выбранном вами языке программирования или, чтобы быстрее начать общение, скачайте и настройте один из наших быстрых стартов.

Если вы разработчик .NET на Windows, перейдите к этому руководству и следуйте инструкциям, чтобы запустить ASP.NET-версию нашего быстрого старта для IP Messaging. Если вы работаете на Mac или хотите использовать другой язык бэкенда на Windows, перейдите сюда и выберите язык из списка доступных быстрых стартов.

После настройки быстрого старта откройте его в браузере. Вы должны увидеть приложение чата. Ваше приложение сгенерировало токен доступа на сервере и назначило случайное имя пользователя.

Мы будем использовать этот же бэкенд для запроса токена для нашего мобильного приложения. Продолжайте запускать приложение и держите URL под рукой. Позже я буду ссылаться на этот URL как на `YOUR_TOKEN_SERVER_URL`.

Есть ещё один момент, о котором стоит упомянуть, прежде чем мы продолжим, и он касается того, как токен доступен из приложения. Если вы хотите разрабатывать это приложение на своём Android-устройстве, ваш сервер, работающий на localhost, не будет доступен в публичном интернете. У вас есть два варианта. Первый — развернуть проект на веб-сервере (или в Azure, Heroku и т. д.) и использовать этот URL вместо localhost. Альтернативно, вы можете использовать что-то вроде ngrok для создания HTTP-туннеля к вашему локальному серверу. Вы можете прочитать этот пост, чтобы узнать, как и зачем использовать ngrok. Если вы работаете на Windows, убедитесь, что запускаете ngrok следующим образом: `ngrok http [ваш порт] -http-header=»localhost:[ваш порт]»`

Перейдём к коду нашего мобильного приложения.

Хорошо, воин Android, готовы создать приложение чата? Замечательно! Сначала клонируйте этот стартовый проект с GitHub и откройте его в выбранной вами IDE Xamarin.

Этот стартовый проект уже содержит основные объекты пользовательского интерфейса для нашего чата, созданные в `Resources/layout/Main.axml` и `Resources/layout/MessageItemLayout.axml`. В течение следующих нескольких минут мы оживим эти объекты интерфейса с помощью Twilio IP Messaging.

Начните с добавления пакетов NuGet для Twilio IP Messaging. Щёлкните правой кнопкой мыши на узле Packages внутри проекта TwilioMiniHack.Android и выберите Add packages…:

В диалоговом окне Add Packages найдите «Twilio IP Messaging» и отметьте флажки рядом с «Twilio IP Messaging for Xamarin» и «Twilio Common Library for Xamarin», затем нажмите кнопку Add Package в правом нижнем углу:

Теперь, когда у нас есть SDK, давайте создадим код для обработки объектов сообщений, которые мы будем использовать в приложении.

Начните с добавления следующих операторов `using` в начало файла `MainActivity.cs`:

Обновите `MainActivity`, установив атрибут Label в «#general» и реализовав интерфейсы `IPMessagingClientListener`, `IChannelListener` и `ITwilioAccessManagerListener`.

Также добавьте TAG для логирования и объявите переменные экземпляра, которые потребуются приложению:

`IPMessagingClientListener` обрабатывает события, получаемые от сервиса IP Messaging, `IChannelListener` прослушивает события, связанные с каналами, а `ITwilioAccessManagerListener` используется для координации событий аутентификации с сервисом чата. Мы будем добавлять методы для реализации этих интерфейсов по мере продвижения.

Поскольку это приложение чата и мы будем много работать с сообщениями, создадим класс для управления ими в нашем списке. Этот класс будет адаптером списка, который будет хранить наши объекты `Message` и предоставлять списку информацию, необходимую для их отображения.

Создайте новый класс и назовите его `MessagesAdapter`. Замените шаблонный код в этом классе следующим:

Нам нужно иметь возможность добавлять сообщения в список по мере их поступления, поэтому добавьте это в `MessagesAdapter`:

Чтобы завершить адаптер, нам нужны переопределения методов `GetItemId`, `GetView` и `Count`, которые настраивают наш адаптер для отображения сообщений. Добавьте их в MessagesAdapter:

Метод `GetView` использует макет `MessageItemLayout`, который уже предоставлен в стартовом проекте, и настраивает его с помощью информации из `Message`.

Теперь, когда наш `MessagesAdapter` готов, давайте настроим пользовательский интерфейс для приложения чата. Вернитесь в MainActivity.cs и замените метод OnCreate следующим кодом:

Здесь мы устанавливаем подзаголовок `ActionBar`, чтобы указать, что приложение находится на этапе входа в систему. Затем мы находим объекты кнопки отправки, текста сообщения и списка из нашего макета. После этого устанавливаем адаптер списка в созданный ранее `MessagesAdapter`.

Наш интерфейс готов, но он не будет отображать ничего полезного, пока мы не подключимся к Twilio IP Messaging.

Добавьте метод, который будет получать наш токен и идентификатор:

Мы передаём `androidId` в качестве уникального идентификатора, и возвращается токен, включающий наш идентификатор.

Отлично! Теперь вернитесь в `OnCreate` и создайте экземпляр клиента IP Messaging с использованием токена. Добавьте следующий код в `OnCreate`, чтобы инициализировать SDK и вызвать метод `Setup`, который мы добавим на следующем шаге:

Далее добавьте метод Setup:

Метод `Setup` запрашивает токен и идентификатор с помощью `GetIdentity`, а затем использует токен для создания объекта `AccessManager`. Затем `AccessManager` используется для создания объекта клиента IP Messaging.

Далее клиент IP Messaging используется для запроса списка каналов и проверки существования канала с именем `general`. Если канал существует, клиент присоединяется к нему с помощью `JoinGeneralChannel`, а если канал не существует, клиент создаёт его и присоединяется к нему с помощью `CreateAndJoinGeneralChannel`. Давайте добавим эти два метода, а также методы переопределения для обработки событий `AccessManager`:

Вы могли заметить, что метод `CreateAndJoinGeneralChannel` использует класс `CreateChannelListener`. Нам нужно добавить его, так как в SDK IP Messaging он существует только как абстрактный класс. Добавьте этот класс в ваш файл MainActivity.cs:

Теперь нужно добавить код для отправки сообщения при нажатии на кнопку sendButton. В `OnCreate` добавьте следующую строку:

Далее добавьте функцию-обработчик нажатия кнопки:

Эта кнопка позволит нам отправлять сообщения, но что насчёт получения сообщений в канале? Давайте добавим код для их обработки. Когда сообщение отправляется в канал, мы будем использовать метод, обрабатывающий событие `OnMessageAdd`, чтобы загрузить его в адаптер наших сообщений и прокрутить в поле зрения:

И последнее: убедитесь, что щёлкнули правой кнопкой мыши на интерфейсах `IPMessagingClientListener`, `IChannelListener` и `ITwilioAccessManagerListener` и выбрали «Implement interface», чтобы добавить заглушки по умолчанию для каждого из их методов, которые мы ещё не реализовали. По умолчанию заглушки будут выбрасывать исключение. Один из этих методов, `OnChannelAdd`, будет вызываться нашим приложением, поэтому удалите `NotImplementedException` в этом методе перед запуском приложения.

Вот и всё, вы создали приложение чата в Xamarin с использованием Android и Twilio IP Messaging!

В этом посте мы использовали новую поддержку Xamarin для Twilio IP Messaging, чтобы создать простое приложение чата для Android. Теперь, когда у вас есть работающее приложение чата, вы можете многое сделать для его улучшения. Попробуйте реализовать следующие идеи:

— Создать список каналов и разрешить создание каналов

— Добавить возможность редактирования сообщений

— Добавить индикатор набора текста

Что бы вы ни создали дальше, мы будем рады это увидеть. Дайте мне знать об этом в Twitter @brentschooley или напишите мне на brent@twilio.com.