Улучшение пользовательского опыта чат-приложений для iOS с помощью Swift

В нашем предыдущем посте о разработке чат-приложений мы начали с iOS Quickstart для IP Messaging и улучшили пользовательский опыт, используя SlackTextViewController. В результате мы получили хорошо проработанную основу для полнофункционального чат-приложения, которую мы будем развивать в этом посте. Цель серии статей — создать отполированное и завершённое решение чат-приложения для iOS на базе Swift. В этом посте мы добавим улучшения в процесс загрузки и внедрим дополнительные функции, такие как автозаполнение и редактирование сообщений. Вот что мы будем добавлять:

Сначала вам понадобится бесплатный аккаунт Twilio. Зарегистрируйтесь здесь. Затем вам потребуется готовое приложение из статьи «Разработка чат-приложений для iOS с использованием Swift». Вы можете клонировать его с GitHub. Также вам понадобится сервер токенов, описанный здесь. Вы можете пойти по короткому пути и просто запустить всё по этим ссылкам или пройти через оригинальный пост и разобраться, как всё работает. Выбор за вами, но я подожду, пока вы всё настроите.

Отлично, вы вернулись! Теперь, когда у вас всё работает, давайте посмотрим, что вы только что настроили:

— Сервис IP Messaging, настроенный через Twilio

— Бэкенд-приложение для получения токенов

— iOS-приложение на Swift, которое аутентифицирует пользователя в сервисе IP Messaging с помощью случайного имени, присоединяется к каналу чата с названием «general» и отображает чат в SlackTextViewController.

**Примечание:** весь код для этого поста был написан для iOS 9.2 с использованием Xcode 7.2.1.

При загрузке нашего приложения необходимо загрузить все сообщения, отправленные в канал «general». По мере роста истории чата этот процесс будет занимать больше времени. В этом разделе мы будем использовать CocoaPod SwiftOverlays, чтобы добавить оверлей во время загрузки сообщений.

Сначала нужно добавить pod SwiftOverlays. Откройте файл `Podfile`, который находится внутри проекта `Pods`, и добавьте следующую строку:

Затем из папки проекта выполните следующую команду в терминале, чтобы установить pod (можно оставить Xcode запущенным):

Откройте `ViewController.swift` и добавьте этот оператор `import`, чтобы сделать библиотеку SwiftOverlays доступной в нашем `ViewController`:

Добавьте следующую строку в метод `viewDidLoad` в `ViewController`, чтобы показать оверлей и сообщить пользователю, что сообщения загружаются:

Теперь в конце метода `ipMessagingClient:channelHistoryLoaded:` добавьте этот код, чтобы отключить оверлей:

Это всё, что нужно для этой функции. Соберите и запустите приложение, и вы увидите сообщение о загрузке во время загрузки сообщений. Это будет выглядеть так (полный эффект можно увидеть, отправив несколько сообщений и перезапустив приложение):

Одной из моих любимых функций чат-приложений является автозаполнение имён пользователей. Упоминание кого-то в сообщении настолько распространено, что отсутствие автозаполнения в чат-приложении сильно снижает удобство использования. К счастью, SlackTextViewController делает добавление этой функции очень простым, а IP Messaging предоставляет всю необходимую информацию для её реализации. Первое, что нам нужно для этого, — это список пользователей, которые являются участниками канала «general». Начнём с добавления массива строк для хранения имён пользователей и массива результатов поиска в начало `ViewController`, сразу после объявления массива `messages`:

Теперь нам нужно сохранить имена пользователей в массиве `users`. Мы загрузим полный начальный список участников канала «general», когда загрузится история канала. Добавьте следующий выделенный код в метод `ipMessagingClient:channelHistoryLoaded:`:

Нам также нужно добавлять и удалять участников по мере их присоединения и выхода из канала «general». Добавим два метода, которые обрабатывают эти случаи (убедитесь, что вы добавляете их в расширение `TwilioIPMessagingClientDelegate` в конце файла):

Далее нужно настроить представление автозаполнения. Представление автозаполнения — это `UITableView`, который SlackTextViewController использует для отображения подсказок автозаполнения пользователю. Мы используем те же методы настройки, что и для основной таблицы сообщений. Чтобы это работало, сначала нужно зарегистрировать ячейку, которую таблица будет использовать для отображения имён пользователей. Поскольку нам нужно отображать только текст, мы повторно используем ту же `MessageTableViewCell`, которую создали для отображения сообщений. В методе `viewDidLoad` под строкой, где мы регистрируем ячейку для таблицы сообщений, добавьте следующую строку для регистрации класса для ячейки `autoCompletionView`:

Теперь нужно изменить методы UITableView в `ViewController`, чтобы они обрабатывали `autoCompletionView` так же, как и стандартную `tableView`. Начнём с метода `tableView:numberOfRowsInSection`:

Далее нужно настроить и вернуть ячейку для строк автозаполнения. Мы также рефакторим настройку стандартных ячеек таблицы с помощью метода `messageCellForIndexPath`. Обновите метод `tableView:cellForRowAtIndexPath` и добавьте методы `messageCellForIndexPath` и `autocompleteCellForIndexPath`:

Метод `messageCellForIndexPath:` содержит тот же код настройки ячейки таблицы, который у нас уже был, а `autocompleteCellForIndexPath:` — новый для нашего представления автозаполнения. Если префикс для автозаполнения — «@», то мы настраиваем ячейку для отображения имени пользователя из соответствующего элемента массива `searchResults`. Мы также устанавливаем `selectionStyle` в `.Default`, так как хотим, чтобы ячейка была выбираемой.

Есть ещё один метод, связанный с `autoCompletionView`, — это `heightForAutoCompletionView`, который определяет размер представления автозаполнения. Добавим его в `ViewController`:

Теперь мы готовы заполнять представление автозаполнения, когда пользователь вводит зарегистрированный символ-префикс. Мы зарегистрируем «@» для начала автозаполнения имён пользователей. Добавьте следующий код в метод `viewDidLoad` класса `ViewController`:

Далее переопределим метод `didChangeAutoCompletionPrefix:andWord:`, который вызывается, когда пользователь вводит зарегистрированный префикс и любые символы после него:

В выделенном разделе мы возвращаем полный список пользователей, если пользователь ввёл только «@», и отфильтрованный список, если он ввёл символы после «@». Всё, что осталось сделать, — это обработать нажатие на строку автозаполнения. Мы сделаем это с помощью метода `tableView:didSelectRowAtIndexPath`. Добавьте этот код в `ViewController`:

Выделенный код вставляет «:», если префикс был введён в начале сообщения, так как это означает, что человек, вероятно, адресует сообщение пользователю, а не просто упоминает его. В противном случае добавляется пробел и возвращается имя пользователя, которое будет добавлено в поле ввода текста. Теперь у нас есть автозаполнение для имён пользователей. Если вы всё сделали правильно, это будет выглядеть так:

Пользователи допускают ошибки при вводе сообщений в чат-приложениях. Хорошее приложение позволит пользователю исправить их. К счастью, Twilio IP Messaging и SlackTextViewController поддерживают редактирование сообщений, так что мы можем легко добавить эту функцию в наше приложение. Начнём с добавления свойства `indexPath` в наш класс `MessageTableViewCell`, чтобы мы могли получить номер строки, соответствующий ячейке, когда пользователь долго нажимает на неё для начала процесса редактирования. Добавьте этот код в начало класса `MessageTableViewCell`:

Вернёмся в `ViewController.swift` и добавим следующий выделенный код в метод `messageCellForIndexPath`, чтобы сохранить `indexPath` в созданной ячейке и зарегистрировать распознаватель долгого нажатия:

Когда пользователь нажимает и удерживает ячейку сообщения, вызывается метод `didLongPressCell:`. Давайте добавим этот метод:

В этом методе многое происходит, так что давайте разберём его по частям. Строки 2–5 создают `UIAlertController`, который будет появляться снизу экрана. Затем мы получаем ячейку, на которую нажали, и находим сообщение для этой ячейки. Выделенный раздел создаёт три действия, которые можно добавить в `UIAlertController`. Действие редактирования вызывает метод `editCellMessage`, который мы напишем через мгновение. Действие копирования позволяет пользователю скопировать текст сообщения, а действие отмены позволяет отменить операцию долгого нажатия. Мы добавляем действие редактирования в `alertController` только в том случае, если пользователь является автором сообщения. Затем мы показываем контроллер оповещения. Теперь нужно позволить пользователю редактировать сообщение, заполнив поле ввода текстом редактируемого сообщения. Сначала мы сохраним копию объекта сообщения, добавив свойство `editingMessage` в класс `ViewController`:

Теперь добавим метод `editCellMessage`, чтобы установить текст поля ввода равным редактируемому сообщению:

Если пользователь нажимает «Сохранить», мы фиксируем редактирование, обновляя тело сообщения и перезагружая таблицу. Это происходит в методе `didCommitTextEditing:`:

Если пользователь отменяет редактирование, мы просто позволяем суперклассу обеспечить стандартное поведение для скрытия клавиатуры в методе `didCancelTextEditing:`:

И это всё — теперь наши пользователи могут исправлять досадные ошибки. Если всё прошло хорошо, процесс редактирования должен выглядеть так:

В этом посте мы добавили несколько функций для повышения удобства использования нашего чат-приложения для iOS. Хотя наше приложение стало намного ближе к полнофункциональному и хорошо спроектированному чат-приложению, нам всё ещё предстоит добавить некоторые функции. Пока вы ждёте следующий пост в этой серии, попробуйте выполнить следующие шаги самостоятельно:

— Создайте список каналов (либо на отдельной странице, либо в выдвигающемся меню, как в Slack)

— Добавьте управление пользователями с помощью страницы входа

— После добавления пользователей добавьте аватары в ячейку таблицы

— Присоединяйтесь к нам на Twilio Signal — нашей конференции по программному обеспечению, которая состоится в мае. У нас впечатляющая программа докладчиков и вечеринка, которую вы не захотите пропустить. Зарегистрируйтесь сегодня, используя промокод **BSCHOOLEY20** для скидки 20% на билет. Нужно убедить начальника? Попробуйте это письмо.

Мне очень интересно увидеть, какие чат-приложения вы создадите с помощью IP Messaging. Дайте знать, что вы разрабатываете. Вы можете связаться со мной по электронной почте (@brentschooley).