Камера и фотогалерея в приложении Ionic React с использованием конденсатора

Этот пост для платформы Ionic React, используя конденсатор. В этом посте вы узнаете, как выбирать / использовать изображения с помощью камеры и фотоальбома.

Если вы ищете функциональность камеры в

• Ionic Angular приложение - пожалуйста, проверьте этот блог
• Приложение React Native - пожалуйста, проверьте этот блог
• Приложение Ionic React / приложение Capacitor - Продолжить чтение 😄

Как видно из вышесказанного, в настоящее время существует несколько вариантов разработки гибридных приложений, и между ними легко запутаться. Этот пост сосредоточен наИонные рамкис ReactJS в качестве основы интерфейса, и Конденсатор в качестве среды выполнения и сборки.

Код для этого урока доступен на Github репо ионно-реагировать-камера-демо

Давайте посмотрим краткое введение в каждую из включенных структур

1. ионный
2. Конденсатор
3. Ионные-React

Что такое ионное?

Вы, наверное, уже знаете об Ionic, но я выкладываю его сюда только для начинающих.ионныйпредставляет собой полный SDK с открытым исходным кодом для разработки гибридных мобильных приложений, созданный Макс Линч, Бен Сперри и Адам Брэдли из Drifty Co. в 2013 году.

Ionic предоставляет инструменты и услуги для разработки гибридных мобильных приложений с использованием веб-технологий, таких как CSS, HTML5 и Sass. Приложения могут создаваться с использованием этих веб-технологий, а затем распространяться через собственные магазины приложений для установки на устройствах с использованием Кордова среда.

Важно отметить вклад Кордовы в это. Ionic - это всего лишь оболочка пользовательского интерфейса, состоящая из HTML, CSS и JS. Таким образом, по умолчанию Ionic не может работать как приложение на устройстве iOS или Android. Cordova - это среда сборки, которая контейнирует (вроде) это Ionic веб-приложение и преобразует его в приложение, устанавливаемое на устройстве, наряду с предоставлением этому приложению доступа к собственным API, таким как Camera и т. Д.

Итак, другими словами - если вы создаете собственные приложения в Android, вы создаете код на Java. Если вы создаете собственные приложения в iOS, вы пишете код в Obj-C или Swift. Оба они мощные, но сложные языки.С помощью Cordova (и Ionic) вы можете написать один фрагмент кода для своего приложения, который может работать как на iOS, так и на Android.(и Windows!), это тоже с простотой HTML, CSS и JS.

Что такое конденсатор?

Теперь у вас есть представление о Cordova - Cordova помогает превратить веб-приложение Ionic в приложение, устанавливаемое на устройстве. Но есть некоторые ограничения Cordova, которые Capacitor пытается преодолеть с помощью нового рабочего процесса приложения.

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

Capacitor очень похож на Cordova, но с некоторыми ключевыми отличиями в рабочем процессе приложения

Давайте проверим разницу между Кордовой и Конденсатором

1. Конденсатор считает каждый проект платформыисходный активвместовремя строительства, Это означает, что Capacitor хочет, чтобы вы хранили исходный код платформы в репозитории. С другой стороны, Cordova всегда предполагает, что вы будете генерировать код платформы во время сборки
2. Из-за вышеизложенного, конденсатор не используетconfig.xmlили аналогичная пользовательская конфигурация для настроек платформы. Вместо этого изменения конфигурации вносятся путем редактированияAndroidManifest.xmlдля Android иInfo.plistдля Xcode
3. Конденсатор не «запускается на устройстве» и не эмулируется через командную строку. Вместо этого такие операции выполняются через платформу-IDE. Таким образом, вы не можете запустить приложение Ionic-конденсатора с помощью команды вродеionic run ios, Вам придется запускать приложения для iOS, используя Xcode, и приложения для Android, используя Android studio.
4. Поскольку код платформы не являетсяисходный актив,Вы можете напрямую изменить собственный код, используя Xcode или Android Studio. Это дает большую гибкость разработчикам
5. Capacitor не копирует исходный код плагина в ваше приложение перед сборкой. Вместо этого все плагины создаются в виде Frameworks (на iOS) и библиотек (на Android) и устанавливаются с использованием ведущего инструмента управления зависимостями для каждой платформы (CocoaPods и Gradle / Maven соответственно).

По сути, Capacitor - это свежая, более гибкая версия Corodva.

Плагины

Кордова и Ionic Native Плагины могут быть использованы в среде конденсаторов. Тем не менее, есть определенные плагины Cordova, которые, как известно, несовместим с конденсатором.

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

Почему ионная реакция?

(Внимательно прочитайте)

Начиная с Ionic 4, Ionic стал независимым от фреймворка. Теперь вы можете создавать Ionic-приложения в Angular, React, Vue или даже в простом JS. Это дает Ionic большую гибкость для использования всеми видами разработчиков.

Важно отметить, чтоПриложения Ionic React поддерживаются только средой сборки Capacitor

То же самое не относится к приложениям Ionic Angular- Приложения Ionic Angular поддерживаются средами сборки Cordova и Capacitor.

Следовательно, если вы хотите создавать приложения в Ionic React, вам нужно использовать Capacitor для сборки приложения на устройстве.

Но …

… Для создания функциональности камеры / фотогалереи вы можете выбрать

• Установите плагин Cordova для камеры или
• Используйте функциональные возможности камеры конденсатора

Я знаю, может ли это сбить с толку, поскольку 4 фреймворка пересекают их пути здесь. Итог этого поста - Ionic + React + Capacitor + Camera (используя функциональность ядра конденсатора)

Структура поста

Я пойду шаг за шагом, чтобы каждый мог извлечь выгоду

1. Создайте базовое приложение с ионной реакцией
2. Подключите конденсатор к вашему приложению с ионной реакцией
3. Реализация функциональности конденсаторной камеры
4. Создайте приложение на Android и протестируйте
5. Изучите параметры камеры
6. А как насчет камеры в веб-приложении?

Давайте начнем с приложения Ionic React Camera!

Шаг 1 - Создайте базовое приложение Ionic-React

Для начала вам необходимо убедиться, что у вас установлена ​​последняя версия Ionic CLI. Это гарантирует, что вы используете все самое последнее (Дух!). Убедитесь, что установлена ​​последняя версия Ionic CLI

$ npm install -g ionic@latest

Создание базового приложения Ionic-React не сильно отличается от создания базового приложения Ionic-Angular. Начать базовыйblankиспользование стартера

$ ionic start IonicReactCamera blank --type=react

Вы видите, что только что произошло.--type=reactсказал CLI создатьреагироватьприложение, а неугловатыйприложение !!

Запустите приложение в браузере, используя (да, вы правильно догадались)

$ ionic serve

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

Код для этого макета не очень сложен

Шаг 2 - Подключите конденсатор к вашему приложению Ionic-React

Конденсатор также можно подключить к существующему приложению Ionic. Чтобы подключить Capacitor к существующему приложению Ionic, запустите

$ ionic integrations enable capacitor

Это прикрепит конденсатор к вашему ионному приложению. После этого вы должныinitприложение конденсатора с

$ npx cap init

Он спросит у вас идентификатор приложения, который является идентификатором домена вашего приложения (например:com.example.app)

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

Шаг 3 - Реализация функциональности камеры конденсатора

Подобно плагину Cordova, функция камеры Capacitor также позволяет использовать функции камеры и галереи. Как только вы реализуете функцию камеры с помощью конденсатора, он автоматически запросит у вас опцию «Камера / Галерея».

Импортируйте камеру в ваше приложение / страницу с этим

import { Plugins, CameraResultType } from '@capacitor/core';const { Camera } = Plugins;

Есть несколько плагинов, встроенных вCapacitor/core, Вы можете получить к ним доступ, просто импортировав.

Реализуйте захват камеры или метод выбора галереи, как это

async takePicture() {
  const image = await Camera.getPhoto({
  quality: 90,
  allowEditing: false,
  resultType: CameraResultType.Uri
});var imageUrl = image.webPath;// Can be set to the src of an image now
this.setState({
  photo: imageUrl
})
}

Тогда вы можете позвонитьtakePictureфункция от плавающей кнопки, используя

<IonFabButton color="primary" onClick={() => this.takePicture()}>

Это оно ! Камера интегрирована! Лол, не волнуйся, мы тоже это проверим.

Шаг 4 - Создайте приложение на Android и протестируйте

Перед добавлением платформы в конденсатор, вам необходимостроитьприложение один раз. Создайте приложение, используя

$ ionic build

Теперь добавьте платформу Android (или iOS)

$ npx cap add android

Это должно добавить платформу Android в ваш проект.

Capacitor could not find the web assets directory "/Users/abhijeetrathore/ionic-4-music/www".

Обратите внимание, что вы не можете запустить проект прямо на телефоне, используя CLI в Capacitor. Вам нужно будет открыть проект в Android Studio и запустить его с помощью IDE Android Studio. Откройте проект в Android Studio, используя

$ npx cap open android

Теперь запустите приложение на своем устройстве с помощью Android Studio, и вы получите это! (Образец из моего One Plus 6T, Android P)

Выберите фотографию с камеры

Выберите фотографию из галереи

Выбор изображения из галереи может быть сделан с тем же кодом

🎉🎉🎉 Поздравляю! Вы только что реализовали функцию камеры и галереи с помощью Capacitor в приложении Ionic React!

Шаг 5 - Как насчет камеры в веб-приложении?

Согласно философии разработки Capacitor, она полностью сосредоточена на том, чтобы современные веб-приложения могли легко работать на всех основных платформах. Это также включает в себя веб-приложение. Итак, давайте посмотрим, может ли наше приложение камеры работать в веб-браузере.

Давайте запустим приложение в браузере, используяionic serve, Вероятно, вы увидите такую ​​ошибку

TypeError: cameraModal.componentOnReady is not a function

Некоторые подключаемые модули Capacitor, включая Camera, предоставляют веб-функциональность и интерфейс через Ionic. Библиотека элементов PWA Это отдельная зависимость, поэтому сначала установите его с помощью терминала

$ npm install @ionic/pwa-elements 

Теперь импортируйте пакет на страницу камеры (или в приложение) и инициализируйте после загрузки приложения

import { defineCustomElements } from '@ionic/pwa-elements/loader';

и я инициализирую его в конструкторе

constructor(props: any) {
super(props);
...
defineCustomElements(window);
}

Теперь запустите приложение в браузере, используяionic serveи вы сможете делать снимки с помощью веб-камеры (браузер Chrome)

Шаг 6 - Изучите параметры камеры

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

Вы можете узнать больше об API камеры конденсатора в официальная документация

Вывод

Из этого поста вы узнали, как реализовать функциональность «Камера» и «Фотогалерея» в приложениях Ionic React с использованием Capacitor. Мы также проверили функционал на Android и веб-браузере.

Код для этого урока доступен на Github репо ионно-реагировать-камера-демо

Следующие шаги

Теперь, когда вы узнали о реализации внутриигровых покупок в приложении Ionic React, вы также можете попробовать следующие блоги дляИонные Angular приложения

• Ionic 4 Платежные шлюзы - нашивка | PayPal | Apple Pay | RazorPay
• Ionic 4 Charts с - Google Charts | Highcharts | d3.js | Chart.js
• Ionic 4 Социальные логины - facebook | Google | щебет
• Ionic 4 Аутентификации - По электронной почте | анонимное
• Ionic 4 Особенности - геолокации | Считыватель QR-кодов | Шагомер
• Медиа в Ionic 4 - аудио | видео | Image Picker | Изображение Кроппер
• Ionic 4 Essentials - Собственное хранилище | Переводы | РТЛ
• Ionic 4 Messaging - Firebase Push | Чтение СМС
• Ionic 4 с Firebase - основы | Хостинг и БД | Облачные функции

Ionic Angular Full App для начинающих

Если вам нужна база, чтобы начать следующийIonic 4 Angular приложение, вы можете сделать свое следующее удивительное приложение, используя Ionic 4 Full App

Ionic React Полное приложение для начинающих

Если вам нужна база, чтобы начать следующийПриложение Ionic 4 React, вы можете сделать свое следующее удивительное приложение, используя Ionic React Full App