Proximity Photo Sharing IOS App - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:20

In diesem anweisbaren werden wir eine iOS-App mit Swift erstellen, mit der Sie Fotos mit jedermann in der Nähe teilen können, ohne dass eine Gerätekopplung erforderlich ist.

Wir werden Chirp Connect verwenden, um Daten mit Ton zu senden, und Firebase, um die Bilder in der Cloud zu speichern.

Das Senden von Daten mit Ton schafft ein einzigartiges Erlebnis, bei dem Daten an jeden in Hörweite gesendet werden können.

Schritt 1: Installationsanforderungen

Xcode

Aus dem App Store installieren.

Kakaoschoten

sudo gem installier Cocoapods

Chirp Connect iOS-SDK

Registrieren Sie sich unter admin.chirp.io

Schritt 2: Projekt einrichten

1. Erstellen Sie ein Xcode-Projekt.

2. Melden Sie sich bei Firebase an und erstellen Sie ein neues Projekt.

Aktivieren Sie Firestore, indem Sie in den Abschnitt Datenbank klicken und Cloud Firestore auswählen. Klicken Sie auf Functions, um auch Cloud Functions zu aktivieren.

3. Führen Sie die Einrichtung Ihrer iOS-App auf der Seite Projektübersicht durch

Sie benötigen die Bundle-Kennung aus der Registerkarte Allgemein in Ihren Xcode-Projekteinstellungen. Sobald die Poddatei erstellt wurde, müssen Sie die folgenden Abhängigkeiten hinzufügen, bevor Sie die Pod-Installation ausführen.

# Pods für das Projekt

Pod „Firebase/Core“Pod „Firebase/Firestore“Pod „Firebase/Speicher“

4. Laden Sie das neueste Chirp Connect iOS SDK von admin.chirp.io/downloads herunter

5. Folgen Sie den Schritten unter developer.chirp.io, um Chirp Connect in Xcode zu integrieren.

Gehen Sie zu Erste Schritte / iOS. Scrollen Sie dann nach unten und befolgen Sie die Anweisungen zur Einrichtung von Swift. Dies beinhaltet das Importieren des Frameworks und das Erstellen eines Bridging-Headers.

Jetzt ist die Einrichtung abgeschlossen, wir können mit dem Schreiben von Code beginnen! Es ist eine gute Idee, Ihre Projekt-Builds in jeder Phase des Setups zu überprüfen.

Schritt 3: IOS-Code schreiben

1. Importieren Sie Firebase in Ihren ViewController und erweitern Sie NSData um eine hexString-Erweiterung, damit wir Chirp Connect-Nutzlasten in eine hexadezimale Zeichenfolge konvertieren können. (Chirp Connect wird dank des Bridging-Headers weltweit verfügbar sein).

UIKit importieren

Firebase importieren

Erweiterungsdaten {

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

2. Fügen Sie Ihrem ViewController ImagePicker-Delegaten hinzu und deklarieren Sie eine ChirpConnect-Variable namens connect.

Klasse ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

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

3. Nach super.viewDidLoad initialisieren Sie Chirp Connect und richten den empfangenen Rückruf ein. Im empfangenen Rückruf rufen wir das Bild mit der empfangenen Nutzlast von Firebase ab und aktualisieren die ImageView. Sie erhalten Ihren APP_KEY und APP_SECRET von 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(Lizenz) connect.start() connect.receivedBlock = { (data: Data?) -> () in if let data = data { print(String(Format: "Received data: %@", data.hexString)) let file = Storage.storage().reference().child(data.hexString) file.getData(maxSize: 1 * 1024 * 2048) { imageData, error in if let error = error { print("Error: %@", error.localizedDescription) } else { self.imageView.image = UIImage(data: imageData!) } } } else { print("Dekodierung fehlgeschlagen"); } } } }

4. Fügen Sie nun den Code zum Senden der Bilddaten hinzu, nachdem er in der Benutzeroberfläche ausgewählt wurde.

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

{ let imageData = info[UIImagePickerControllerOriginalImage] as? 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()]) { 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(animiert: true, Vervollständigung: nil) }

Hinweis: Sie müssen Ihrer Info.plist die Anweisungen Datenschutz - Beschreibung der Fotobibliothek, Datenschutz - Beschreibung der Fotobibliothek und Datenschutz - Beschreibung der Mikrofonverwendung hinzufügen, um Berechtigungen zur Verwendung der Kamera, der Fotobibliothek und des Mikrofons zu erteilen.

Schritt 4: Erstellen Sie eine Benutzeroberfläche

Gehen Sie nun zur Datei Main.storyboard, um eine Benutzeroberfläche zu erstellen.

1. Ziehen Sie über eine ImageView und zwei Schaltflächen auf das Storyboard aus dem Objektbibliothek-Bedienfeld in der unteren rechten Ecke.

2. Fügen Sie für jede Schaltfläche eine Höhenbeschränkung von etwa 75px hinzu, indem Sie die Komponente auswählen und auf die Schaltfläche Neue Beschränkungen hinzufügen klicken (die wie ein Star Wars-Tie Fighter aussieht). Geben Sie dann die Höhe ein und drücken Sie die Eingabetaste.

3. Wählen Sie alle drei Komponenten aus und fügen Sie sie in eine Stapelansicht ein, indem Sie auf die Schaltfläche In Stapel einbetten klicken.

4. Öffnen Sie nun den Assistant Editor, drücken Sie STRG und ziehen Sie von jeder Komponente in den ViewController-Code, um Outlets für jede Komponente zu erstellen.

@IBOutlet var imageView: UIImageView!

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

5. Ziehen Sie nun STRG und ziehen Sie von beiden Schaltflächen, um eine Aktion zum Öffnen der Kamera-/Bibliotheks-UIs zu erstellen.

6. Fügen Sie in der Aktion Bibliothek öffnen den folgenden Code hinzu

@IBAction func openLibrary(_ Absender: Beliebig) {

let imagePicker = UIImagePickerController() imagePicker.delegate = self; imagePicker.sourceType =.photoLibrary self.present(imagePicker, animiert: true, Vervollständigung: nil) }

7. In der Aktion Kamera öffnen

@IBAction func openCamera(_ Absender: Beliebig) {

let imagePicker = UIImagePickerController() imagePicker.delegate = self imagePicker.sourceType =.camera; self.present(imagePicker, animiert: true, Vervollständigung: nil) }

Schritt 5: Schreiben Sie eine Cloud-Funktion

Da die Fotos nicht für immer in der Cloud gespeichert werden müssen, können wir eine Cloud-Funktion schreiben, um die Bereinigung durchzuführen. Dies kann als HTTP-Funktion stündlich von einem Cron-Dienst wie cron-job.org ausgelöst werden.

Als erstes müssen wir die Firebase-Tools installieren

npm install -g firebase-tools

Dann aus dem Stammverzeichnis des Projekts ausführen

Firebase-Initialisierung

Wählen Sie Funktionen in der Befehlszeile aus, um Cloud-Funktionen zu initialisieren. Sie können Firestore auch aktivieren, wenn Sie auch Firestore konfigurieren möchten.

Öffnen Sie dann functions/index.js und fügen Sie den folgenden Code hinzu. Denken Sie daran, sich zu ändern

zu Ihrer Firebase-Projekt-ID.

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

const admin = require('firebase-admin'); admin.initializeApp() exports.cleanup = functions.https.onRequest((Anfrage, Antwort) => { 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)) });

Die Bereitstellung von Cloud-Funktionen ist so einfach wie das Ausführen dieses Befehls.

Firebase bereitstellen

Erstellen Sie dann bei cron-job.org einen Job, um diesen Endpunkt stündlich auszulösen. Der Endpunkt wird ungefähr so sein wie

us-central1-project_id.cloudfunctions.net/cleanup

Schritt 6: Starten Sie die App

Führen Sie die App auf einem Simulator oder iOS-Gerät aus und beginnen Sie mit dem Teilen von Fotos!