15 октября 2013 г. Anastasia Antonova

Как создать iOS приложение с большим количеством визуального контента: Кейс RIDERS (ride.rs)

Недавно мы столкнулись с задачей разработать функциональность, аналогичную Instagram (кроме фильтров) в очень сжатый временной период. Мы решили использовать облачный сервис для загрузки файлов на сайт, чтобы сэкономить ресурсы на разработке собственного аплодера.

ЗАДАЧА

Одной из наших ключевых задач было предоставить возможность пользователям загружать контент (фото и видео) из своих социальных аккаунтов (альбомов в ВКонтакте, Facebook, Instagram) в профили в приложение, которое мы разрабатывали (RIDERS — это мобильное приложение для райдеров bmx, mtb, скейтборда, wake, сноуборда и горных лыж по обучению трюкам). Кроме того, ввиду огромного количества визуального контента, задачей было обеспечить быструю загрузку файлов в приложении и их бэкап.

РЕШЕНИЕ

Времени и ресурсов на разработку собственного аплодера у нас не было и мы решили кастомизировать доступное облачное решение Uploadcare. С помощью виджета UC пользователь может выбирать файл с любого источника, добавлять к нему комментарий и публиковать его в свою ленту в приложении. Uploadcare принимает файлы любого типа из любых источников, в том числе из облачных хранилищ и социальных сетей (Google Drive, Dropbox, Facebook, Instagram, Vkontakte), обрабатывает и хранит их в облаке. Кроме того, сервис интегрирован с CDN, что ускоряет процесс отдачи изображений и файлов пользователям.

Загрузка файлов в приложение RIDERS

Мы опишем процесс интеграции сервиса в приложение и кастомизацию виджета. В контроллере профиля пользователя создается объект класса UPCUploadController через который происходит управление виджетом:

#import

...
UPCUploadController *uploadController = [[UPCUploadController alloc] initWithUploadcarePublicKey:WSCRidersUploadcarePublicKey];

В качестве делегата виджета использует родительский контроллер, в этом случае – контроллер пользовательского профиля:

uploadController.uploadDelegate = self;

В обработчике тапа по кнопке загрузки виджет представляется пользователю:

[controller presentViewController:uploadController animated:YES completion:nil];

Когда загрузка файла закончилась, виджет вызывает делегатский метод, передавая в него идентификатор загруженного файла на сервере Uploadcare. Эти данные передаются серверу приложения.

Бекэнд по взаимодействию с виджетом Uploadcare

Взаимодействие приложения с сервером реализовано на основе REST. Клиент отправляет POST /photo со следующими данными:

{
"comment": "My Barspin Disaster",
"image": "6534d2ea-b330-4281-9140-b30640a1b5a8"
}

Аттрибут image — это UUID файла, полученный от виджета. Сервер, получив UUID, создаёт запись в БД и асинхронно (через celery) отмечает файл как stored: PUT /files/5aa70c3d-463d-4355-a563-c484a24f04b2/storage/.

В ответ ресурс /photo отдаёт URL изображения:

https://ucarecdn.com/5aa70c3d-463d-4355-a563-c484a24f04b2/


Приложение, получив адрес, добавляет к нему операцию масштабирования:

https://ucarecdn.com/5aa70c3d-463d-4355-a563-c484a24f04b2/-/resize/200x/

Таким образом, сервер получает только информацию о сохранённом файле. Разработчикам не нужно заботиться о сохранении изображений, их масштабировании и, что особенно удобно - приложение само определяет необходимое разрешение без участия сервера RIDERS.

Фронтэнд и кастомизация виджета

С точки зрения фронтэнда задачей было за короткое время и малыми усилиями добавить в функционал RIDERS загрузку файлов и интеграцию с социальными сервисами. С одной стороны можно было разработать и свою файловую систему, но эта задача заняла бы огромное количество времени у разработчиков, поэтому было решено воспользоваться готовым виджетом.

Кастомизацию виджета Uploadcare можно сделать в точности так же, как кастомизацию любых других компонентов в iOS - с помощью класса UIAppearance. Создается прокси-объект, которому устанавляваются нужные свойства (цвет, шрифт, и т.д.).



Изначально виджет выглядел вот так:


Для RIDERS сделали следующий дизайн:

РЕЗУЛЬТАТ

В итоге в ходе интеграции виджета Uploadcare в приложение RIDERS были решены следующие задачи:

– загрузка контента от пользователей из социальных сервисов

– обработка загружаемых изображений на лету, подбор необходимого разрешения

– быстрая отдача файлов в приложении

– бэкап файлов

На выполнение задач по работе с контентов ушло не более суток, хотя при написании собственной системы возможно разработка решения заняла бы порядка 2х недель и, в любом случае, это обеспечило бы только малую часть функционала, предоставляемого сервисом Uploadcare.


Виджет был кастомизирован в соответствии с дизайном RIDERS: мы измененили фон, шрифты, добавлили хэдер RIDERS и т.д. Также была адаптирована страница с источниками загрузки: убрали лишние и немного изменили раскладку, чтобы логика была очевиднее. Апдейт с этой интеграцией только что опубликовали в App Store, теперь мы ждём отзывов пользователей.