Aplicació iOS per compartir fotografies de proximitat: 6 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:15

En aquest instructiu, crearem una aplicació per a iOS amb Swift que us permetrà compartir fotos amb qualsevol persona a prop, sense necessitat d’aparellar cap dispositiu.

Utilitzarem Chirp Connect per enviar dades mitjançant so i Firebase per emmagatzemar les imatges al núvol.

L’enviament de dades amb so crea una experiència única on les dades es poden transmetre a qualsevol persona que estigui dins de l’àmbit auditiu.

Pas 1: Instal·leu els requisits

Xcode

Instal·leu-la des de l'App Store.

CocoaPods

sudo gem instal·lar cocoàpodes

SDK iOS de Chirp Connect

Inscriviu-vos a admin.chirp.io

Pas 2: Configuració del projecte

1. Creeu un projecte Xcode.

2. Inicieu la sessió a Firebase i creeu un projecte nou.

Activeu Firestore fent clic a la secció Base de dades i seleccionant Cloud Firestore. Feu clic a Funcions per habilitar també les funcions del núvol.

3. Executeu Configurar l'aplicació iOS a la pàgina Visió general del projecte

Necessitareu l’identificador de paquet a la pestanya General de la configuració del projecte Xcode. Un cop creat el fitxer Pods, haureu d’afegir les dependències següents abans d’executar la instal·lació del pod.

# Pods per al projecte

pod "Firebase / Core" pod "Firebase / Firestore" pod "Firebase / Storage"

4. Descarregueu l'últim SDK de Chirp Connect per a iOS des de admin.chirp.io/downloads

5. Seguiu els passos de desenvolupadors.chirp.io per integrar Chirp Connect a Xcode.

Aneu a Introducció / iOS. A continuació, desplaceu-vos cap avall i seguiu les instruccions de configuració de Swift, que implicaran la importació del marc i la creació d'una capçalera de pont.

Ara la configuració s'ha completat, ja podem començar a escriure algun codi. És una bona idea comprovar les compilacions del vostre projecte en cada etapa de la configuració.

Pas 3: escriviu el codi IOS

1. Importeu Firebase al ViewController i amplieu NSData per incloure una extensió hexString, de manera que puguem convertir les càrregues útils de Chirp Connect a una cadena hexadecimal. (Chirp Connect estarà disponible a tot el món gràcies a la capçalera pont).

importar UIKit

importar Firebase

Dades de l'extensió {

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

2. Afegiu delegats ImagePicker al ViewController i declareu una variable ChirpConnect anomenada connect.

classe ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

var connect: ChirpConnect? sobreescriu func viewDidLoad () {super.viewDidLoad () …

3. Després de super.viewDidLoad, inicialitzeu Chirp Connect i configureu la devolució de trucada rebuda. A la devolució de trucada, recuperarem la imatge de Firebase mitjançant la càrrega útil rebuda i actualitzarem ImageView. Podeu obtenir APP_KEY i APP_SECRET a admin.chirp.io.

connect = ChirpConnect (appKey: APP_KEY, andSecret: APP_SECRET) if let connect = connect {connect.getLicenceString {(license: String ?, error: Error?) in if error == nul {if let license = license {connect.setLicenceString (license) connect.start () connect.receivedBlock = {(data: Data?) -> () in if let data = data {print (String (format: "Dades rebudes:% @", data.hexString)) deixa el fitxer = Storage.storage (). Reference (). Child (data.hexString) file.getData (mida màxima: 1 * 1024 * 2048) {imageData, error en si let error = error {print ("Error:% @", error.localizedDescription)} else {self.imageView.image = UIImage (dades: imageData!)}}} else {print ("Error de descodificació"); }}}}

4. Ara afegiu el codi per enviar les dades de la imatge un cop seleccionades a la IU.

func imagePickerController (_ selector: UIImagePickerController, informació didFinishPickingMediaWithInfo: [Cadena: Qualsevol])

{let imageData = info [UIImagePickerControllerOriginalImage] com? UIImage deixa dades: 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 (dades: [" key ": key.hexString," timestamp ": FieldValue.serverTimestamp ()]) {error in if let error = error {print (error.localizedDescription)}} Storage.storage ().reference (). child (key.hexString).putData (dades, metadades: metadades) {(metadades, error) en si let error = error {print (error.localizedDescription)} else {connect.send (key)}} } self.dismiss (animat: cert, finalització: nul)}

Nota: Haureu d’afegir una declaració de privadesa: descripció d’ús de la fototeca, privadesa: descripció d’ús de la fototeca i privadesa: declaracions de descripció d’ús del micròfon a la vostra llista d’informació per concedir permisos per utilitzar la càmera, la fototeca i el micròfon.

Pas 4: creeu una interfície d'usuari

Ara aneu al fitxer Main.storyboard per crear una interfície d’usuari.

1. Arrossegueu cap a ImageView i dos botons al Storyboard des del tauler de la Biblioteca d'objectes, a l'extrem inferior dret.

2. Per a cada botó, afegiu una restricció d’alçada d’uns 75 px seleccionant el component i fent clic al botó Afegeix restriccions noves (el que sembla un combat d’empat de Star Wars) i, a continuació, introduïu l’alçada i premeu Retorn.

3. Seleccioneu els tres components i poseu-los en una vista de pila fent clic al botó Insereix en pila.

4. Ara obriu l'Assistent Editor i premeu CTRL i arrossegueu de cada component al codi ViewController per crear Outlets per a cada component.

@IBOutlet var imageView: UIImageView!

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

5. Ara CTRL i arrossegueu els dos botons per crear una acció per obrir la interfície d'usuari de la càmera / biblioteca.

6. A l'acció Obre biblioteca, afegiu el codi següent

@IBAction funcions openLibrary (_ remitent: Qualsevol) {

let imagePicker = UIImagePickerController () imagePicker.delegate = auto; imagePicker.sourceType =.photoLibrary self.present (imagePicker, animat: cert, finalització: nul)}

7. A l'acció Obre càmera

@IBAction funcions openCamera (_ remitent: Qualsevol) {

let imagePicker = UIImagePickerController () imagePicker.delegate = auto imagePicker.sourceType =.càmera; self.present (imagePicker, animat: cert, finalització: nul)}

Pas 5: escriviu una funció Cloud

Com que no cal emmagatzemar les fotos al núvol per sempre, podem escriure una funció de núvol per realitzar la neteja. Això pot ser activat com a funció HTTP cada hora per un servei cron com cron-job.org.

Primer de tot, hem d’instal·lar firebase-tools

npm install -g firebase-tools

A continuació, executeu el directori arrel del projecte

firebase init

Seleccioneu funcions de la línia d'ordres per inicialitzar les funcions del núvol. També podeu habilitar firestore si voleu configurar Firestore.

A continuació, obriu functions / index.js i afegiu el codi següent. Recordeu canviar

al vostre identificador de projecte Firebase.

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

const admin = require ('firebase-admin'); admin.initializeApp () exportacions.cleanup = funcions.https.onRequest ((sol·licitud, resposta) => {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))});

El desplegament de funcions al núvol és tan senzill com executar aquesta ordre.

desplegament de firebase

A continuació, a cron-job.org creeu un treball per activar aquest punt final cada hora. El punt final serà una cosa així

us-central1-project_id.cloudfunctions.net/cleanup

Pas 6: executeu l'aplicació

Executeu l'aplicació en un simulador o dispositiu iOS i comenceu a compartir fotos.