Хотите знать, как чат LinkedIn работает с этими приятными небольшими предложениями, соответствующими вашим сообщениям и сообщениям ваших коллег? Ну, не удивляйтесь больше. В этой статье мы собираемся построить именно это. В этом руководстве мы будем использовать Flutter, одну из самых известных кроссплатформенных сред разработки мобильных приложений. И это еще не все, так как мы будем изучать такие технологии, как Firebase, Radar, Google ML Kit и другие…
Если вам больше нравятся видеоуроки, я вам помогу. Посмотрите видео ниже, чтобы узнать о полной реализации, и давайте создадим этот проект вместе!
Firebase — флагманский продукт Google для разработки приложений. Технически это серверная часть как услуга (BaaS), что означает, что мы получаем большинство часто используемых внутренних функций из коробки, что обеспечивает более быстрые циклы разработки. В нашем случае мы будем использовать Firebase для аутентификации пользователей — Firebase Auth и для его базы данных NoSQL — Cloud Firestore.
Radar — известный поставщик услуг определения местоположения, который мы будем использовать для его API-интерфейсов обратного геокодирования для получения адреса из местоположения пользователя.
Google ML Kit предоставляет множество часто используемых моделей машинного обучения в виде API-интерфейсов для мобильных приложений, таких как API-интерфейсы Vision (обнаружение объектов, сегментация селфи и т. д.) и API-интерфейсы естественного языка. (перевод, обнаружение письма, умные ответы и т. д.). Нас особенно заинтересует Smart Replies API. Давайте начнем сейчас и посмотрим, как их использовать.
Знаете ли вы, что мы также можем использовать Mapbox для обратного геокодирования и других функций? Это так же хорошо, как Google Maps, только дешевле. Здесь я рассказываю о том, как мы можем использовать его навигационные API для создания Uber-подобного приложения.
Начиная
Для облегчения адаптации у меня есть готовое стартовое приложение, которое вы можете запустить, внеся всего несколько изменений. Приложение имеет базовый пользовательский интерфейс, похожий на LinkedIn, и макет для функции чата, и мы уже внедрили Firebase и Radar. Вы можете найти ссылку на репозиторий GitHub здесь.
Изменения, которые вам потребуются для запуска первоначального приложения, можно найти на этом веб-сайте документации, который мы создали с помощью инструмента документации Facebook с открытым исходным кодом — Docusaurus.
После того, как вы запустите приложение, оно будет выглядеть так:
Создание интерфейса чата
Интерфейс нашего чата будет состоять из 3-х частей (и соответственно 3-х виджетов) -
- Информация о пользователе — имя и заголовок пользователя.
- Окно чата — прокручиваемый список сообщений с информацией о пользователе и отметкой времени отправленных сообщений.
- Ввод чата — поле ввода с использованием
CupertinoTextFieldи анимированной кнопки для отображения дополнительных параметров добавления изображений, GIF-файлов и т. д. Здесь мы будем предлагать предложения с использованиемChipвиджетов.
Информация о пользователе
Для создания этого раздела мы будем использовать управление состоянием всего приложения, которое мы поддерживали с помощью Providers и MobX. Чтобы показать имя пользователя и заголовок, нам просто нужно использовать userStore.name и userStore.headline внутри виджета пользовательского интерфейса UserInfo(). Вот как это будет выглядеть, когда это будет сделано.
Окно чата
Для этого мы используем StreamBuilder и слушаем поток:
FirebaseFirestore.instance.collection(groupChatId).doc(groupChatId).collection().snapshots()
Как только мы извлекаем данные оттуда (также прослушивая изменения), мы используем ListView.builder() для рендеринга данных в порядке убывания времени.
Мы также используем вспомогательную функцию, чтобы знать, когда отображать имя и отметку времени (или заголовки, как я их буду называть), которые отображаются, только если 2 последовательных сообщения от разных пользователей. Вы можете изменить последнюю часть по своему усмотрению, чтобы создать другой UX. Например, вы можете показывать заголовки всякий раз, когда два сообщения отличаются на определенное время, скажем, на 2 часа или больше.
Вход в чат
Для этого мы используем CupertinoTextField, и всякий раз, когда ввод отправляется, мы сохраняем содержимое в Firestore, используя функцию onSendMessage внутри ChatStore, которая выглядит следующим образом.
Мы также добавляем анимированную кнопку. С его помощью и с помощью виджета Visibility мы создаем эту красивую анимацию для переключения просмотра дополнительных опций для добавления изображений, GIF-файлов и т. д.
Вам нравится эта статья? Продолжайте и подпишитесь на меня, а также не забудьте добавить себя в мой список рассылки, чтобы вы получали электронное письмо всякий раз, когда я публикую!
Отображение умных ответов
Теперь перейдем к самой интересной части. Мы будем использовать этот плагин — smart_reply, который использует API Google ML Kit Natural Language для создания интеллектуальных ответов. Самое приятное в этом то, что, поскольку эти модели работают на устройстве, результаты намного быстрее, чем если бы они обычно размещались на сервере. Так выглядит функция генерации предложений.
Обратите внимание, что здесь мы перестраиваем виджет, если старые предложения отличаются от новых предложений (таким образом мы гарантируем, что перестроение будет более эффективным). Предложения генерируются в виде массива строк с максимальным размером 3. Затем мы используем их в качестве содержимого для чипов и вызываем ту же функцию onSendMessage, что и раньше, всякий раз, когда чипы касаются для отправки сообщения. Окончательный результат выглядит примерно так (нажмите на ссылку ниже, чтобы посмотреть видео) —
Заключение
Точно так же мы внедрили LinkedIn, например Chat, который также поддерживает Smart Replies. Хорошая часть этого заключается в том, что мы можем воспроизвести шаги, описанные в этом руководстве, в любом другом проекте, где вы, возможно, захотите использовать функцию чата (и, возможно, функцию умных ответов). Вкратце, вот как выглядит окончательная реализация —
Не стесняйтесь обращаться ко мне с любыми вопросами или предложениями, которые могут у вас возникнуть. Вы можете следить за мной в этих социальных сетях — LinkedIn, YouTube, Twitter, Instagram, чтобы получать больше обновленного контента!
Как всегда! Удачного взлома! 😇
