Oops... your message was not sent

Your message has been successfully sent

тематические истории, основанные на опыте компании JetRuby
Мобильная разработка

Гибридные мобильные приложения. Часть 4: Камера + использование Parse в качестве хранилища файлов

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

Чтобы получить доступ к камере, нам следует установить плагин для Cordova. Гибридные мобильные приложения, использование Cloud Code, безопасность Parse приложений, Parse приложения. К счастью, с этим проблем не возникло. Приложение располагает набором ключевых плагинов, которые, по всей вероятности, разрабатываются командой Cordova и имеют достаточно стабильный код

Логика работы нашего приложения выглядит так:

  • создаем фото и помещаем его во временный файл;
  • открываем созданный файл;
  • сохраняем его на Parse.

Есть еще один вариант, при котором логику работы приложения можно сократить до двух шагов. В таком случае плагин выдаст результат в base64. Напомним, что Parse умеет принимать данные в этом формате. Итак, нам требуется два плагина — для работы с камерой Camera и локальными файлами File.

Для установки плагина Camera нужно выполнить команду:

Аналогичная манипуляция потребуется для плагина File.

Решив поставленные задачи, мы в обязательном порядке пересоберем платформу:

После этого у нас возникла проблема. Приложение перестало запускаться.

Во-первых, вышеуказанная команда стала падать с ошибкой. Во-вторых, перестал компилировался плагин File. В итоге мы его удалили и попробовали загрузить из хранилища плагинов. Как оказалось, для этого потребовалось использовать другое имя:


Плагины являются самым слабым местом гибридных приложений. Они разрабатываются сообществом и поправить в них что-либо без опыта программирования под мобильные платформы весьма сложно. Точнее сказать почти невозможно.

Здесь хочется сделать несколько рекомендаций для веб девелоперов, которые не обладают необходимым опытом работы с мобильными платформами:

  1. Изучите github issues по плагину. Весьма вероятно, что с вашей проблемой уже кто-то сталкивался.
  2. Ветка master на github может оказаться стабильнее, чем плагин в репозитории, как, впрочем, и любая другая ветка.
  3. Попробуйте найти индивидуальное решение для своей платформы. Цель поиска — понимание того, какой примерно код следует найти в исходниках плагина и что нужно сделать дополнительно. Например, для того чтобы приложение отображало LocalNotification необходимо запросить соответствующие права на их использование. Этот пункт актуален, прежде всего, для iOS.
  4. Если используется сразу несколько плагинов, выполняющих идентичные функции, попробуйте собрать их воедино.

От теории переходим к практике. Вы знаете, что мышцы лица имеют двухстороннюю связь с настроением человека? Мы улыбаемся, когда нам весело. Переворачиваем медаль другой стороной и понимаем, что для поднятия настроения иногда достаточно просто улыбнуться. Мы решили использовать этот принцип при разработке нашего приложения. В результате в него был добавлен такой функционал: делаем фотографию камерой смартфона и загружаем ее в Parse. В свою очередь, на стороне Parse добавляем класс Selfie с полями

Не будем акцентировать внимание на маршрутизации (о ней шла речь в предыдущих статьях) и перейдем к реализации контроллера. Именно там кроется все самое интересное.

Небольшой комментарий к коду контроллера. Начнем с метода this.newSelfie

Нам потребуется два callback: onSuccess и onError. onSuccess отработает только в случае успешного создания временного файла. При возникновении внутренней ошибки или  закрытии камеры отработает onError.

При вызове камеры, помимо callback, мы можем указать дополнительные опции. По умолчанию для нее доступны фото и видеосъемка. Так как нас интересует только фото — указываем это в опциях. Между прочим, плагин умеет открывать локальные файлы (абсолютно любые файлы для Android или изображения для iOS). Кроме описанной опции, используем в примере еще одну — correctOrientation. Она потребуется для исправления ориентации изображения на Android.

В действительности, параметров гораздо больше. Со всем их массивом вы можете ознакомиться, изучив документацию. Старый добрый принцип RTFM (read the fucking manual) работает безупречно.

Отметим следующее — когда мы использовали этот плагин впервые, информации о флаге correctOrientation в документации найти не удалось. Решить проблему помог старый-добрый Google. Поковырявшись в поисковой выдаче, мы выяснили, что должно быть в коде, затем открыли исходники плагина и узнали, что пациент (он же плагин) тоже так умеет.

Вернемся к коду. Итак, мы сделали снимок. Ожидаемый результат — локальный урл на  временный файл. Cordova File плагин предоставляет нам метод, с помощью которого мы сможем его открыть:

Однако на выходе получается не совсем то, что нам нужно. Полученное значение является всего лишь указателем на файл, который мы незамедлительно открываем:

затем сохраняем его в Parse:

Что мы сделали? Сохранили файл на сервер, а затем указали его в качестве атрибута при сохранении нового значения. Далее отображаем полученное изображение в приложении:

Дело сделано. Исходный код учебного приложения по традиции отправляется на GitHub. Следующая статья будет посвящена рефакторингу кода приложения, использованию Parse.Cloud и вопросам безопасности в Parse приложениях.

Не переключайтесь!

department
Статью подготовил
Отдел мобильной разработки
Профессиональная разработка нативных приложений под Android и iOS, а также реализация гибридных кроссплатформенных решений и мобильных сайтов.
New Articles