Proximity Photo Sharing IOS-app: 6 stappen

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:18

In deze instructable zullen we een iOS-app maken met Swift waarmee je foto's kunt delen met iedereen in de buurt, zonder dat je een apparaat hoeft te koppelen.

We gebruiken Chirp Connect om gegevens te verzenden met geluid en Firebase om de afbeeldingen in de cloud op te slaan.

Het verzenden van gegevens met geluid creëert een unieke ervaring waarbij gegevens kunnen worden uitgezonden naar iedereen binnen gehoorbereik.

Stap 1: Installatievereisten

Xcode

Installeer vanuit de App Store.

CacaoPods

sudo gem installeer cacaopods

Chirp Connect iOS SDK

Meld u aan op admin.chirp.io

Stap 2: Project opzetten

1. Maak een Xcode-project aan.

2. Meld u aan bij Firebase en maak een nieuw project.

Schakel Firestore in door in het gedeelte Database te klikken en Cloud Firestore te selecteren. Klik op Functions om ook Cloud Functions in te schakelen.

3. Doorloop Uw iOS-app instellen op de pagina Projectoverzicht

Je hebt de bundel-ID van het tabblad Algemeen in je Xcode-projectinstellingen nodig. Zodra het podbestand is gemaakt, moet je de volgende afhankelijkheden toevoegen voordat je de pod-installatie uitvoert.

# Pods voor project

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

4. Download de nieuwste Chirp Connect iOS SDK van admin.chirp.io/downloads

5. Volg de stappen op developers.chirp.io om Chirp Connect in Xcode te integreren.

Ga naar Aan de slag / iOS. Scroll vervolgens naar beneden en volg de Swift-installatie-instructies. Dit omvat het importeren van het framework en het maken van een overbruggingskop.

Nu de installatie is voltooid, kunnen we beginnen met het schrijven van wat code! Het is een goed idee om de builds van uw project in elke fase van de installatie te controleren.

Stap 3: IOS-code schrijven

1. Importeer Firebase in uw ViewController en breid NSData uit met een hexString-extensie, zodat we Chirp Connect-payloads kunnen converteren naar een hexadecimale string. (Chirp Connect zal wereldwijd beschikbaar zijn dankzij de bridging-header).

import UIKit

Firebase importeren

extensie gegevens {

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

2. Voeg ImagePicker-afgevaardigden toe aan uw ViewController en declareer een ChirpConnect-variabele met de naam connect.

klasse ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

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

3. Na super.viewDidLoad, initialiseer Chirp Connect en stel de ontvangen callback in. In de ontvangen callback halen we de afbeelding op uit Firebase met behulp van de ontvangen payload en werken de ImageView bij. U kunt uw APP_KEY en APP_SECRET verkrijgen via admin.chirp.io.

connect = ChirpConnect (appKey: APP_KEY, andSecret: APP_SECRET) if let connect = connect { connect.getLicenceString { (licentie: String?, error: Error?) in if error == nihil { if let license = license { connect.setLicenceString(licentie) connect.start() connect.receivedBlock = { (data: Data?) -> () in if let data = data { print(String(format: "Ontvangen data: %@", data.hexString)) laat bestand = Storage.storage().reference().child(data.hexString) file.getData(maxSize: 1 * 1024 * 2048) { imageData, error in if let error = error { print("Fout: %@", fout.localizedDescription) } else { self.imageView.image = UIImage (data: imageData!) } } } else { print ("Decoderen mislukt"); } } } }

4. Voeg nu de code toe om de afbeeldingsgegevens te verzenden zodra deze is geselecteerd in de gebruikersinterface.

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

{ laat imageData = info[UIImagePickerControllerOriginalImage] als? UIImage laat gegevens: 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 (geanimeerd: waar, voltooiing: nul) }

Opmerking: u moet de verklaringen Privacy - Gebruiksbeschrijving fotobibliotheek, Privacy - Gebruiksbeschrijving fotobibliotheek en Privacy - Beschrijving microfoongebruik toevoegen aan uw Info.plist om toestemming te verlenen voor het gebruik van de camera, fotobibliotheek en microfoon.

Stap 4: Maak een gebruikersinterface

Ga nu naar het bestand Main.storyboard om een gebruikersinterface te maken.

1. Sleep over een ImageView en twee knoppen naar het storyboard vanuit het deelvenster Objectbibliotheek in de rechterbenedenhoek.

2. Voeg voor elke knop een hoogtebeperking toe van ongeveer 75px door de component te selecteren en op de knop Nieuwe beperkingen toevoegen te klikken (degene die eruitziet als een Star Wars-stropdasjager), voer vervolgens de hoogte in en druk op Enter.

3. Selecteer alle drie de componenten en plaats ze in een stapelweergave door op de knop Invoegen in stapel te klikken.

4. Open nu de Assistent-editor en druk op CTRL en sleep van elk onderdeel naar de ViewController-code om Outlets voor elk onderdeel te maken.

@IBOutlet var imageView: UIImageView!

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

5. CTRL en sleep nu vanaf beide knoppen om een actie te maken om de gebruikersinterface van de camera/bibliotheek te openen.

6. Voeg in de actie Bibliotheek openen de volgende code toe:

@IBAction func openLibrary(_ afzender: Willekeurig) {

laat imagePicker = UIImagePickerController() imagePicker.delegate = zelf; imagePicker.sourceType =.photoLibrary self.present (imagePicker, geanimeerd: waar, voltooiing: nul) }

7. In de actie Camera openen

@IBAction func openCamera(_ afzender: Willekeurig) {

laat imagePicker = UIImagePickerController() imagePicker.delegate = zelf imagePicker.sourceType =.camera; self.present(imagePicker, geanimeerd: waar, voltooiing: nihil)}

Stap 5: Schrijf een cloudfunctie

Omdat de foto's niet voor altijd in de cloud hoeven te worden bewaard, kunnen we een cloudfunctie schrijven om de opschoning uit te voeren. Dit kan elk uur worden geactiveerd als een HTTP-functie door een cron-service zoals cron-job.org.

Allereerst moeten we firebase-tools installeren

npm install -g firebase-tools

Start vervolgens vanuit de hoofdmap van het project

firebase init

Selecteer functies vanaf de opdrachtregel om cloudfuncties te initialiseren. U kunt Firestore ook inschakelen als u Firestore ook wilt configureren.

Open vervolgens functions/index.js en voeg de volgende code toe. Vergeet niet te veranderen

naar uw Firebase-project-ID.

const-functies = vereisen('firebase-functies');

const admin = vereisen('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)) });

Het implementeren van cloudfuncties is net zo eenvoudig als het uitvoeren van deze opdracht.

firebase implementeren

Maak vervolgens op cron-job.org een taak om dit eindpunt elk uur te activeren. Het eindpunt zal zoiets zijn als:

us-central1-project_id.cloudfunctions.net/cleanup

Stap 6: Start de app

Voer de app uit op een simulator of iOS-apparaat en begin met het delen van foto's!