Приложение Proximity Photo Sharing для iOS: 6 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:53

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

Мы будем использовать Chirp Connect для отправки данных с использованием звука и Firebase для хранения изображений в облаке.

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

Шаг 1. Установите требования

Xcode

Установить из App Store.

Какао-стручки

sudo gem установить cocoapods

Chirp Connect iOS SDK

Зарегистрируйтесь на admin.chirp.io

Шаг 2: настройка проекта

1. Создайте проект Xcode.

2. Войдите в Firebase и создайте новый проект.

Включите Firestore, щелкнув раздел «База данных» и выбрав Cloud Firestore. Щелкните «Функции», чтобы также включить облачные функции.

3. Выполните настройку приложения для iOS на странице обзора проекта.

Вам понадобится идентификатор пакета из вкладки «Общие» в настройках проекта Xcode. После создания подфайла вам нужно будет добавить следующие зависимости перед запуском установки модуля.

# Подов для проекта

pod 'Firebase / Core' pod 'Firebase / Firestore' pod 'Firebase / Storage'

4. Загрузите последнюю версию Chirp Connect iOS SDK с сайта admin.chirp.io/downloads.

5. Следуйте инструкциям на сайте developers.chirp.io, чтобы интегрировать Chirp Connect в Xcode.

Перейдите в Начало работы / iOS. Затем прокрутите вниз и следуйте инструкциям по настройке Swift. Это будет включать в себя импорт фреймворка и создание связующего заголовка.

Теперь настройка завершена, можно приступить к написанию кода! Рекомендуется проверять сборки вашего проекта на каждом этапе установки.

Шаг 3. Напишите код IOS

1. Импортируйте Firebase в свой ViewController и расширьте NSData, чтобы включить расширение hexString, чтобы мы могли преобразовать полезные данные Chirp Connect в шестнадцатеричную строку. (Chirp Connect будет доступен по всему миру благодаря мостовому заголовку).

импортировать UIKit

импортировать Firebase

extension Data {

var hexString: String {return map {String (format: "% 02x", UInt8 ($ 0))}.joined ()}}

2. Добавьте делегатов ImagePicker в свой ViewController и объявите переменную ChirpConnect с именем connect.

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

var connect: ChirpConnect? переопределить функцию viewDidLoad () {super.viewDidLoad ()…

3. После super.viewDidLoad инициализируйте Chirp Connect и настройте полученный обратный вызов. В полученном обратном вызове мы получим изображение из Firebase, используя полученную полезную нагрузку, и обновим ImageView. Вы можете получить свои APP_KEY и APP_SECRET из admin.chirp.io.

connect = ChirpConnect (appKey: APP_KEY иSecret: APP_SECRET), если let connect = connect {connect.getLicenceString {(license: String ?, error: Error?) в if error == nil {if let license = license {connect.setLicenceString (лицензия) connect.start () connect.receivedBlock = {(data: Data?) -> () in if let data = data {print (String (format: "Полученные данные:% @", data.hexString)) let file = Storage.storage (). Reference (). Child (data.hexString) file.getData (maxSize: 1 * 1024 * 2048) {imageData, ошибка в if let error = error {print ("Error:% @", error.localizedDescription)} else {self.imageView.image = UIImage (data: imageData!)}}} else {print ("Ошибка декодирования"); }}}}

4. Теперь добавьте код для отправки данных изображения после его выбора в пользовательском интерфейсе.

func imagePickerController (_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String: Any])

{let imageData = info [UIImagePickerControllerOriginalImage] как? UIImage let data: Data = UIImageJPEGRepresentation (imageData !, 0.1)! self.imageView.image = imageData let metadata = StorageMetadata () metadata.contentType = "image / jpeg" if let connect = connect {let key: Data = connect.randomPayload (withLength: 8) Firestore.firestore (). collection (" uploads "). addDocument (data: [" key ": key.hexString," timestamp ": FieldValue.serverTimestamp ()]) {ошибка в if let error = error {print (error.localizedDescription)}} Storage.storage ().reference (). child (key.hexString).putData (data, metadata: metadata) {(metadata, error) in if let error = error {print (error.localizedDescription)} else {connect.send (key)}} } self.dismiss (анимированный: true, завершение: nil)}

Примечание. Вам нужно будет добавить в свой Info.plist параметры Конфиденциальность - Описание использования библиотеки фотографий, Конфиденциальность - Описание использования библиотеки фотографий и Конфиденциальность - Описание использования микрофона, чтобы предоставить разрешения на использование камеры, библиотеки фотографий и микрофона.

Шаг 4: Создайте пользовательский интерфейс

Теперь перейдите в файл Main.storyboard, чтобы создать пользовательский интерфейс.

1. Перетащите ImageView и две кнопки на раскадровку с панели «Библиотека объектов» в правом нижнем углу.

2. Для каждой кнопки добавьте ограничение по высоте около 75 пикселей, выбрав компонент и нажав кнопку «Добавить новые ограничения» (та, которая выглядит как истребитель «Звездных войн»), а затем введите высоту и нажмите Enter.

3. Выберите все три компонента и поместите их в стек, нажав кнопку «Вставить в стек».

4. Теперь откройте редактор помощника, нажмите CTRL и перетащите от каждого компонента к коду ViewController, чтобы создать выходы для каждого компонента.

@IBOutlet var imageView: UIImageView!

@IBOutlet var openLibraryButton: UIButton! @IBOutlet var openCameraButton: UIButton!

5. Теперь CTRL и перетащите от обеих кнопок, чтобы создать действие для открытия пользовательского интерфейса камеры / библиотеки.

6. В действии «Открыть библиотеку» добавьте следующий код.

@IBAction func openLibrary (_ отправитель: Любой) {

пусть imagePicker = UIImagePickerController () imagePicker.delegate = self; imagePicker.sourceType =.photoLibrary self.present (imagePicker, animated: true, завершения: nil)}

7. В действии "Открыть камеру"

@IBAction func openCamera (_ отправитель: Любой) {

пусть imagePicker = UIImagePickerController () imagePicker.delegate = self imagePicker.sourceType =.camera; self.present (imagePicker, animated: true, Завершение: nil)}

Шаг 5: напишите облачную функцию

Поскольку фотографии не обязательно хранить в облаке вечно, мы можем написать облачную функцию для выполнения очистки. Это может запускаться как функция HTTP каждый час службой cron, такой как cron-job.org.

Прежде всего нам нужно установить firebase-tools

npm install -g firebase-tools

Затем из корневого каталога проекта запустите

firebase init

Выберите функции из командной строки для инициализации облачных функций. Вы также можете включить firestore, если хотите настроить Firestore.

Затем откройте functions / index.js и добавьте следующий код. Не забудьте изменить

к вашему идентификатору проекта Firebase.

const functions = require ('firebase-functions');

const admin = require ('firebase-admin'); admin.initializeApp () exports.cleanup = functions.https.onRequest ((request, response) => {admin.firestore ().collection ('uploads').where ('timestamp', '{snapshot.forEach (doc = > {admin.storage ().bucket ('gs: //.appspot.com').file (doc.data ().key).delete () doc.ref.delete ()}) вернуть response.status (200).send ('OK')}).catch (err => response.status (500).send (err))});

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

firebase развернуть

Затем на cron-job.org создайте задание, которое будет запускать эту конечную точку каждый час. Конечная точка будет чем-то вроде

us-central1-project_id.cloudfunctions.net/cleanup

Шаг 6. Запустите приложение

Запустите приложение на симуляторе или устройстве iOS и начните делиться фотографиями!