В этой серии, состоящей из нескольких частей, описывается разработка и реализация коммерчески развертываемого приложения, такого как WhatsApp, с возможностью обмена сообщениями, видео и голосовой связью в реальном времени, которое можно масштабировать до миллиардов пользователей. К концу этой серии статей вы создадите полнофункциональные приложения для Android и iOS, которые даже сможете публиковать в Google и Apple App Store под своим брендом. Приложения, которые мы создадим в этой серии статей, будут иметь следующие ключевые особенности.

  • Безопасный обмен сообщениями один на один и групповой чат
  • Качественная голосовая и видеосвязь
  • Обмен сообщениями (текст, изображение, видео, аудио, другие файлы)
  • Индикаторы состояния сообщения и набора текста
  • Онлайн-статус (присутствие) и обновление профиля в реальном времени
  • Контактная синхронизация
  • Всплывающие уведомления

Как организована эта статья

В этой серии статей мы будем использовать подход сверху вниз - сначала мы создадим приложения для Android и iOS, используя код, который мы загрузили на GitHub, а затем перейдем к деталям.

В P art 1 мы начнем с настройки среды разработки, получения кода из GitHub, создания приложений для Android и iOS и их запуска. В этой части мы разместили для вас серверную часть, чтобы вы могли быстро опробовать созданные вами приложения, не беспокоясь о ней.

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

В частях 3–4 мы более подробно разбираемся в том, как работают различные аспекты приложения и как их настраивать. Например, используйте для входа в систему что-то другое, кроме номера телефона (адрес электронной почты, собственный идентификатор пользователя и т. Д.), Полностью трансформируя экраны чата и вызовов, синхронизацию контактов, push-уведомления и т. Д.

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

Подпишитесь на нас, чтобы получить уведомление, когда выйдет следующая часть этой серии.

Примеры использования технологий

Для этой серии статей мы выбрали популярную платформу обмена сообщениями «WhatsApp» в качестве примера использования, поскольку большинству читателей она легко понятна.

Однако технологии и методы реального времени, описанные в этой серии статей, в равной степени применимы к любой области, где требуется связь в реальном времени, например, поддержка клиентов, командное общение, совместное использование поездок, свидания, телемедицина, поддержка клиентов, социальные приложения, назвать несколько!

Все в порядке! Приступим! Как упоминалось ранее, в этой статье мы будем использовать нисходящий подход. Сначала мы создадим приложение для Android и iOS, чтобы вы могли поиграть и узнать, как оно работает, а затем мы разберемся в деталях.

Основные используемые компоненты и библиотеки

Эти приложения также используют следующие пакеты SDK и службы.

  • Facebook AccountKit для подтверждения по телефону. Account Kit прост, достаточно надежен и предлагает бесплатную проверку телефона до 100 тысяч пользователей.
  • SDK Google Maps и Google Places для интеграции геолокации.
  • API Месибо для общения в реальном времени. Так же, как Account Kit и карты Google, Mesibo является лидером отрасли в области связи в реальном времени и предлагает мощные API-интерфейсы.

В следующей статье этой серии мы обсудим, как настроить ключи API для всех этих сервисов. Теперь давайте начнем с создания нашего приложения для обмена сообщениями для Android. Если вы хотите сначала разработать приложение для iOS, вы можете сразу перейти к разделу iOS ниже.

Создать приложение для обмена сообщениями для Android

В этой части мы загрузим исходный код Android Messenger, соберем и запустим его на реальном устройстве.

Предпосылки

Прежде чем мы погрузимся в создание и запуск полнофункционального мессенджера для Android, убедитесь в следующем.

  • Android Studio установлена ​​и работает
  • Устройство Android для запуска приложения

Загрузите исходный код с GitHub

Мы загрузили исходный код Android-мессенджера на GitHub, чтобы вы могли быстро приступить к работе. Есть несколько способов загрузить код с GitHub.

Клонировать репозиторий (рекомендуется)

Если у вас установлен git, это рекомендуемый подход, так как вы можете быстро синхронизировать и оставаться в курсе последних версий. Это также предпочтительный способ загрузки кода, если вы решите внести свой вклад в проект.

Для загрузки откройте терминал и выполните следующие команды:

$ mkdir Messenger
$ cd Messenger
$ git clone https://github.com/mesibo/messenger-app-android.git

Загрузите код в виде zip-файла

Вы также можете загрузить полный исходный код Android Messenger в виде zip-файла. Хотя это тривиально, обратная сторона этого подхода заключается в том, что вам придется загружать полный исходный код каждый раз, когда он обновляется в репозитории.

"Скачать"

После завершения загрузки разархивируйте в папку.

Какой бы подход вы ни выбрали для загрузки кода, важно быть в курсе последних изменений, новых функций, исправлений и т. Д. Убедитесь, что пометите (*) проект на GitHub, чтобы получить уведомляется всякий раз, когда обновляется исходный код.

Сборка и запуск

В этой части мы создадим код как есть и запустим приложение. В следующем разделе мы узнаем о настройке.

Создать код так же просто, как:

  1. Запустить Android Studio
  2. Откройте проект из папки, в которую вы скачали код, с помощью меню File -> Open
  3. Сборка с помощью меню Build -> Rebuild Project
  4. Создание проекта в первый раз может занять некоторое время.
  5. После завершения сборки запустите на устройстве с помощью меню Run -> Run (app)
  6. Вот и все; вы должны увидеть экран приветствия.

Вы можете войти в систему со своим номером телефона и начать изучение. См. Несколько советов в разделе Запуск и изучение приложений Messenger ниже. В следующем разделе мы создадим приложение для iOS.

Создать приложение для обмена сообщениями для iOS

В этой части мы загрузим исходный код iOS Messenger, соберем и запустим его на реальном устройстве iPhone.

Предпосылки

Прежде чем мы погрузимся в создание и запуск полнофункционального Messenger для iOS, убедитесь в следующем.

  • XCode установлен
  • Устройство iPhone

Скачивание исходного кода

Мы загрузили исходный код мессенджера iOS на GitHub, чтобы вы могли быстро приступить к работе. Есть несколько способов загрузить код с GitHub.

Клонировать репозиторий (рекомендуется)

Если у вас установлен git, это рекомендуемый подход, так как вы можете быстро синхронизировать и оставаться в курсе последних версий. Это также предпочтительный способ загрузки кода, если вы решите внести свой вклад в проект. Перед клонированием репозитория убедитесь, что git lfs установлен.

Для загрузки откройте терминал и выполните следующие команды:

$ mkdir Messenger
$ cd Messenger
$ git lfs install
$ git clone https://github.com/mesibo/messenger-app-ios.git

Загрузите код в виде zip-файла

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

"Скачать"

После завершения загрузки разархивируйте в папку.

ВНИМАНИЕ! zip-файл будет довольно большим из-за включения фреймворков с поддержкой битового кода. git clone - рекомендуемый подход.

Будьте в курсе

Какой бы подход вы ни выбрали для загрузки кода, важно быть в курсе последних изменений, новых функций, исправлений и т. Д. Убедитесь, что пометите (*) проект на GitHub, чтобы получить уведомляется всякий раз, когда обновляется исходный код.

Сборка и запуск

В этой части мы создадим код как есть и запустим приложение. В следующем разделе мы узнаем о настройке.

Создать код так же просто, как:

  1. Запустить Xcode
  2. Откройте проект из папки, в которую вы скачали код, с помощью меню File -> Open
  3. Сборка с помощью меню Product -> Build
  4. Создание проекта в первый раз может занять некоторое время.
  5. После завершения сборки запустите на устройстве, используя меню Product -> Run
  6. Вот и все, вы должны увидеть экран приветствия, как показано ниже.

Войдите, используя свой номер телефона. Вы даже можете начать использовать только что созданное приложение для общения с семьей и друзьями. Разве это не круто?

Запуск и изучение приложения Messenger

Поздравляю! Вы только что создали полнофункциональные приложения для обмена сообщениями для Android и iOS с функциями обмена сообщениями, голосовыми и видеозвонками.

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

Как только вы войдете в приложение, вы увидите пустой экран, поскольку у вас еще нет сообщений. Нажмите кнопку new message в правом верхнем углу, чтобы отправить первое сообщение. Вы можете отправлять обычный текст или мультимедийные сообщения с изображениями, видео, местоположением, файлами и т. Д. Вы также можете совершать видео и голосовые вызовы с экрана сообщений.

Однако, чтобы опробовать все функции приложения, вам потребуется более одного устройства / пользователя, чтобы вы могли отправлять друг другу сообщения в реальном времени, а также совершать голосовые и видеозвонки. Если у вас не более одного устройства, вам нужно пригласить своих друзей и семью, чтобы вы могли тестировать обмен сообщениями и звонки с ними.

И в приложении для Android, и в приложении для iOS есть синхронизация контактов. Следовательно, если в контактах двух пользователей есть друг друга, они будут показаны, когда вы нажмете кнопку new message на главном экране.

Вопросов?

Продолжение следует!

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

Подпишитесь на нас, чтобы получить уведомление, когда выйдет следующая часть этой серии.