Aplicación IOS para compartir fotos de proximidad: 6 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:43

En este instructivo, crearemos una aplicación de iOS con Swift que le permite compartir fotos con cualquier persona cercana, sin necesidad de emparejar el dispositivo.

Usaremos Chirp Connect para enviar datos usando sonido y Firebase para almacenar las imágenes en la nube.

El envío de datos con sonido crea una experiencia única en la que los datos se pueden transmitir a cualquier persona que se encuentre dentro del alcance auditivo.

Paso 1: Requisitos de instalación

Xcode

Instalar desde la App Store.

CocoaPods

sudo gem instalar cocoapods

SDK de iOS de Chirp Connect

Regístrese en admin.chirp.io

Paso 2: Proyecto de configuración

1. Cree un proyecto de Xcode.

2. Inicie sesión en Firebase y cree un nuevo proyecto.

Habilite Firestore haciendo clic en la sección Base de datos y seleccionando Cloud Firestore. Haga clic en Funciones para habilitar también Cloud Functions.

3. Ejecute Configurar su aplicación iOS en la página Descripción general del proyecto.

Necesitará el identificador de paquete de la pestaña General en la configuración del proyecto de Xcode. Una vez creado el Podfile, deberá agregar las siguientes dependencias antes de ejecutar la instalación del pod.

# Pods para proyecto

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

4. Descargue el SDK de iOS de Chirp Connect más reciente de admin.chirp.io/downloads

5. Siga los pasos en developers.chirp.io para integrar Chirp Connect en Xcode.

Vaya a Introducción / iOS. Luego, desplácese hacia abajo y siga las instrucciones de configuración de Swift. Esto implicará importar el marco y crear un encabezado puente.

Ahora que la configuración está completa, ¡podemos comenzar a escribir código! Es una buena idea verificar las compilaciones de su proyecto en cada etapa de la configuración.

Paso 3: escriba el código IOS

1. Importe Firebase a su ViewController y amplíe NSData para incluir una extensión hexString, de modo que podamos convertir las cargas útiles de Chirp Connect en una cadena hexadecimal. (Chirp Connect estará disponible globalmente gracias al encabezado puente).

importar UIKit

importar Firebase

Datos de extensión {

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

2. Agregue delegados ImagePicker a su ViewController y declare una variable ChirpConnect llamada connect.

clase ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

var connect: ChirpConnect? anular la función viewDidLoad () {super.viewDidLoad ()…

3. Después de super.viewDidLoad, inicialice Chirp Connect y configure la devolución de llamada recibida. En la devolución de llamada recibida, recuperaremos la imagen de Firebase usando la carga útil recibida y actualizaremos ImageView. Puede obtener su APP_KEY y APP_SECRET de admin.chirp.io.

connect = ChirpConnect (appKey: APP_KEY, andSecret: APP_SECRET) if let connect = connect {connect.getLicenceString {(license: String ?, error: Error?) in if error == nil {if let license = license {connect.setLicenceString (licencia) connect.start () connect.receivedBlock = {(data: Data?) -> () in if let data = data {print (String (formato: "Datos recibidos:% @", data.hexString)) let file = Storage.storage (). Reference (). Child (data.hexString) file.getData (maxSize: 1 * 1024 * 2048) {imageData, error en if let error = error {print ("Error:% @", error.localizedDescription)} else {self.imageView.image = UIImage (data: imageData!)}}} else {print ("Falló la decodificación"); }}}}

4. Ahora agregue el código para enviar los datos de la imagen una vez que se haya seleccionado en la interfaz de usuario.

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

{dejar imageData = info [UIImagePickerControllerOriginalImage] como? UIImage deja datos: 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 ()]) {error in 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 (animado: verdadero, finalización: nulo)}

Nota: Deberá agregar declaraciones de Privacidad - Descripción del uso de la biblioteca de fotos, Privacidad - Descripción del uso de la biblioteca de fotos y Privacidad - Descripción del uso del micrófono a su Info.plist para otorgar permisos para usar la cámara, la biblioteca de fotos y el micrófono.

Paso 4: cree una interfaz de usuario

Ahora vaya al archivo Main.storyboard para crear una interfaz de usuario.

1. Arrastre a través de un ImageView y dos botones al Storyboard desde el panel Biblioteca de objetos en la esquina inferior derecha.

2. Para cada botón, agregue una restricción de altura de aproximadamente 75 px seleccionando el componente y haciendo clic en el botón Agregar nuevas restricciones (el que parece un luchador de corbata de Star Wars), y luego ingrese la altura y presione Entrar.

3. Seleccione los tres componentes y colóquelos en una vista de pila haciendo clic en el botón Incrustar en pila.

4. Ahora abra el Editor asistente, presione CTRL y arrastre desde cada componente al código ViewController, para crear salidas para cada componente.

@IBOutlet var imageView: UIImageView!

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

5. Ahora presione CTRL y arrastre desde ambos botones para crear una acción para abrir la interfaz de usuario de la cámara / biblioteca.

6. En la acción Abrir biblioteca, agregue el siguiente código

@IBAction func openLibrary (_ remitente: Cualquiera) {

let imagePicker = UIImagePickerController () imagePicker.delegate = self; imagePicker.sourceType =.photoLibrary self.present (imagePicker, animado: verdadero, finalización: nulo)}

7. En la acción Abrir cámara

@IBAction func openCamera (_ remitente: Cualquiera) {

let imagePicker = UIImagePickerController () imagePicker.delegate = self imagePicker.sourceType =.camera; self.present (imagePicker, animado: verdadero, finalización: nulo)}

Paso 5: escriba una función en la nube

Como las fotos no necesitan almacenarse en la nube para siempre, podemos escribir una función de nube para realizar la limpieza. Esto se puede activar como una función HTTP cada hora mediante un servicio cron como cron-job.org.

Primero que nada necesitamos instalar firebase-tools

npm install -g firebase-tools

Luego, desde el directorio raíz del proyecto, ejecute

firebase init

Seleccione funciones de la línea de comando para inicializar las funciones de la nube. También puede habilitar Firestore si también desea configurar Firestore.

Luego abra functions / index.js y agregue el siguiente código. Recuerda cambiar

a su ID de proyecto de Firebase.

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

const admin = require ('firebase-admin'); admin.initializeApp () export.cleanup = functions.https.onRequest ((solicitud, respuesta) => {admin.firestore ().collection ('uploads').where ('timestamp', '{snapshot.forEach (doc = > {admin.storage ().bucket ('gs: //.appspot.com').file (doc.data ().key).delete () doc.ref.delete ()}) return response.status (200).send ('OK')}).catch (err => response.status (500).send (err))});

Implementar funciones en la nube es tan simple como ejecutar este comando.

despliegue de base de fuego

Luego, en cron-job.org, cree un trabajo para activar este punto final cada hora. El punto final será algo así como

us-central1-project_id.cloudfunctions.net/cleanup

Paso 6: Ejecute la aplicación

Ejecute la aplicación en un simulador o dispositivo iOS y comience a compartir fotos.