App IOS per la condivisione di foto di prossimità: 6 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:04

In questo tutorial creeremo un'app iOS con Swift che ti consente di condividere foto con chiunque si trovi nelle vicinanze, senza che sia necessario accoppiare il dispositivo.

Utilizzeremo Chirp Connect per inviare dati tramite audio e Firebase per archiviare le immagini nel cloud.

L'invio di dati con l'audio crea un'esperienza unica in cui i dati possono essere trasmessi a chiunque si trovi nel raggio di ascolto.

Passaggio 1: requisiti di installazione

Xcode

Installa dall'App Store.

baccelli di cacao

sudo gem installa cacaopods

Chirp Connect iOS SDK

Iscriviti su admin.chirp.io

Passaggio 2: progetto di installazione

1. Creare un progetto Xcode.

2. Accedi a Firebase e crea un nuovo progetto.

Abilita Firestore facendo clic nella sezione Database e selezionando Cloud Firestore. Fare clic su Funzioni per abilitare anche Funzioni cloud.

3. Esegui attraverso Configura la tua app iOS nella pagina Panoramica del progetto

Avrai bisogno dell'identificatore del pacchetto dalla scheda Generale nelle impostazioni del tuo progetto Xcode. Una volta creato il Podfile dovrai aggiungere le seguenti dipendenze, prima di eseguire l'installazione del pod.

# Baccelli per progetto

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

4. Scarica l'ultimo SDK Chirp Connect iOS da admin.chirp.io/downloads

5. Segui i passaggi su developer.chirp.io per integrare Chirp Connect in Xcode.

Vai a Per iniziare / iOS. Quindi scorrere verso il basso e seguire le istruzioni di configurazione di Swift. Ciò comporterà l'importazione del framework e la creazione di un'intestazione di bridging.

Ora che il setup è completo, possiamo iniziare a scrivere del codice! È una buona idea controllare le build del progetto in ogni fase della configurazione.

Passaggio 3: scrivi il codice IOS

1. Importa Firebase nel tuo ViewController ed estendi NSData per includere un'estensione hexString, in modo da poter convertire i payload Chirp Connect in una stringa esadecimale. (Chirp Connect sarà disponibile a livello globale grazie all'intestazione bridging).

import UIKit

importa Firebase

dati di estensione {

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

2. Aggiungi i delegati di ImagePicker al tuo ViewController e dichiara una variabile ChirpConnect chiamata connect.

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

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

3. Dopo super.viewDidLoad, inizializzare Chirp Connect e impostare la richiamata ricevuta. Nella richiamata ricevuta recupereremo l'immagine da Firebase utilizzando il payload ricevuto e aggiorneremo ImageView. Puoi ottenere la tua APP_KEY e APP_SECRET da admin.chirp.io.

connect = ChirpConnect(appKey: APP_KEY, andSecret: APP_SECRET) if let connect = connect { connect.getLicenceString { (licence: String?, error: Error?) in if error == nil { if let license = license { connect.setLicenceString(licenza) connect.start() connect.receivedBlock = { (data: Data?) -> () in if let data = data { print(String(formato: "Dati ricevuti: %@", data.hexString)) let file = Storage.storage().reference().child(data.hexString) file.getData(maxSize: 1 * 1024 * 2048) { imageData, errore in if let error = error { print("Error: %@", errore.localizedDescription) } else { self.imageView.image = UIImage(data: imageData!) } } } else { print("Decodifica fallita"); } } } }

4. Ora aggiungi il codice per inviare i dati dell'immagine una volta che è stato selezionato nell'interfaccia utente.

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

{ let imageData = info[UIImagePickerControllerOriginalImage] come? 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()]) { errore 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 (animato: vero, completamento: zero) }

Nota: sarà necessario aggiungere le dichiarazioni Privacy - Descrizione utilizzo libreria foto, Privacy - Descrizione utilizzo libreria foto e Privacy - Descrizione utilizzo microfono a Info.plist per concedere le autorizzazioni per l'utilizzo della fotocamera, della libreria foto e del microfono.

Passaggio 4: creare un'interfaccia utente

Ora vai al file Main.storyboard per creare un'interfaccia utente.

1. Trascinare su un ImageView e due pulsanti sullo Storyboard dal pannello Libreria oggetti nell'angolo in basso a destra.

2. Per ogni pulsante aggiungi un vincolo di altezza di circa 75 px selezionando il componente e facendo clic sul pulsante Aggiungi nuovi vincoli (quello che sembra un combattente di Star Wars), quindi inserisci l'altezza e premi Invio.

3. Seleziona tutti e tre i componenti e mettili in una vista pila facendo clic sul pulsante Incorpora in pila.

4. Ora apri l'Assistant Editor, premi CTRL e trascina da ogni componente al codice ViewController, per creare Outlet per ogni componente.

@IBOutlet var imageView: UIImageView!

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

5. Ora CTRL e trascina da entrambi i pulsanti per creare un'azione per aprire l'interfaccia utente della fotocamera/libreria.

6. Nell'azione Apri libreria, aggiungi il seguente codice

@IBAction func openLibrary(_ sender: Any) {

let imagePicker = UIImagePickerController() imagePicker.delegate = self; imagePicker.sourceType =.photoLibrary self.present(imagePicker, animato: true, completamento: nil) }

7. Nell'azione Apri fotocamera

@IBAction func openCamera(_ sender: Any) {

let imagePicker = UIImagePickerController() imagePicker.delegate = self imagePicker.sourceType =.camera; self.present(imagePicker, animato: true, completamento: nil) }

Passaggio 5: scrivere una funzione cloud

Poiché le foto non devono essere archiviate nel cloud per sempre, possiamo scrivere una funzione cloud per eseguire la pulizia. Questo può essere attivato come funzione HTTP ogni ora da un servizio cron come cron-job.org.

Prima di tutto dobbiamo installare firebase-tools

npm install -g firebase-tools

Quindi dalla directory principale del progetto esegui

inizializzazione firebase

Selezionare le funzioni dalla riga di comando per inizializzare le funzioni cloud. Puoi anche abilitare Firestore se vuoi anche configurare Firestore.

Quindi apri functions/index.js e aggiungi il seguente codice. Ricordati di cambiare

al tuo ID progetto 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() }) return response.status(200).send('OK') }).catch(err => response.status(500).send(err)) });

La distribuzione delle funzioni cloud è semplice come eseguire questo comando.

schieramento della base di fuoco

Quindi su cron-job.org crea un lavoro per attivare questo endpoint ogni ora. L'endpoint sarà qualcosa come

us-central1-project_id.cloudfunctions.net/cleanup

Passaggio 6: eseguire l'app

Esegui l'app su un simulatore o su un dispositivo iOS e inizia a condividere le foto!