Proximity Photo Sharing IOS App: 6 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:46

I den här instruktionsboken kommer vi att skapa en iOS -app med Swift som låter dig dela foton med någon i närheten, utan att någon enhetsparning behövs.

Vi kommer att använda Chirp Connect för att skicka data med ljud och Firebase för att lagra bilderna i molnet.

Att skicka data med ljud skapar en unik upplevelse där data kan sändas till alla inom hörselområdet.

Steg 1: Installera krav

Xcode

Installera från App Store.

CocoaPods

sudo gem installera cocoapods

Chirp Connect iOS SDK

Registrera dig på admin.chirp.io

Steg 2: Installationsprojekt

1. Skapa ett Xcode -projekt.

2. Logga in på Firebase och skapa ett nytt projekt.

Aktivera Firestore genom att klicka in i databasavsnittet och välja Cloud Firestore. Klicka på funktioner för att även aktivera molnfunktioner.

3. Kör igenom Konfigurera din iOS -app på sidan Projektöversikt

Du behöver paketidentifieraren från fliken Allmänt i dina Xcode -projektinställningar. När podfilen har skapats måste du lägga till följande beroenden innan du installerar pod -installationen.

# Böcker för projekt

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

4. Ladda ner den senaste Chirp Connect iOS SDK från admin.chirp.io/downloads

5. Följ stegen på developers.chirp.io för att integrera Chirp Connect i Xcode.

Gå till Komma igång / iOS. Bläddra sedan ner och följ instruktionerna i Swift -konfigurationen. Detta kommer att innebära att du importerar ramverket och skapar en överbryggande rubrik.

Nu är installationen klar, vi kan börja skriva lite kod! Det är en bra idé att kontrollera dina projektbyggen vid varje steg i installationen.

Steg 3: Skriv IOS -kod

1. Importera Firebase till din ViewController och förläng NSData till att inkludera ett hexString -tillägg, så att vi kan konvertera Chirp Connect nyttolaster till en hexadecimal sträng. (Chirp Connect kommer att finnas tillgängligt globalt tack vare överbryggarhuvudet).

importera UIKit

importera Firebase

tilläggsdata {

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

2. Lägg till ImagePicker -ombud till din ViewController och deklarera en ChirpConnect -variabel som heter connect.

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

var connect: ChirpConnect? åsidosätta func viewDidLoad () {super.viewDidLoad () …

3. Efter super.viewDidLoad, initiera Chirp Connect och konfigurera den mottagna återuppringningen. I den mottagna återuppringningen hämtar vi bilden från Firebase med den mottagna nyttolasten och uppdaterar ImageView. Du kan hämta din APP_KEY och APP_SECRET från admin.chirp.io.

connect = ChirpConnect (appKey: APP_KEY, andSecret: APP_SECRET) if let connect = connect {connect.getLicenceString {(licens: String ?, error: Error?) in if error == nil {if let licens = licens {connect.setLicenceString (licens) connect.start () connect.receivedBlock = {(data: Data?) -> () in if let data = data {print (String (format: "Mottagna data: %@", data.hexString)) låt filen = Storage.storage (). Reference (). Child (data.hexString) file.getData (maxSize: 1 * 1024 * 2048) {imageData, fel i om låt error = error {print ("Error: %@", error.localizedDescription)} else {self.imageView.image = UIImage (data: imageData!)}}} else {print ("Decode failed"); }}}}

4. Lägg nu till koden för att skicka bilddata när den väljs i användargränssnittet.

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

{låt imageData = info [UIImagePickerControllerOriginalImage] som? UIImage låt 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 (). barn (key.hexString).putData (data, metadata: metadata) {(metadata, fel) i if let error = error {print (error.localizedDescription)} else {connect.send (key)}} } self.dismiss (animerad: true, komplett: noll)}

Obs! Du måste lägga till en sekretess - beskrivning av användningsområdet för fotobibliotek, sekretess - beskrivning av användning av fotobibliotek och sekretess - Beskrivning av mikrofonanvändning till din Info.plist för att ge behörighet att använda kameran, fotobiblioteket och mikrofonen.

Steg 4: Skapa ett användargränssnitt

Gå nu till Main.storyboard -filen för att skapa ett användargränssnitt.

1. Dra över en ImageView och två knappar till Storyboard från panelen Objektbibliotek i nedre högra hörnet.

2. För varje knapp lägger du till en höjdbegränsning på cirka 75 pixlar genom att välja komponenten och klicka på knappen Lägg till nya begränsningar (den som ser ut som en Star Wars slipsfighter) och ange sedan höjden och tryck på Retur.

3. Välj alla tre komponenterna och lägg dem i en stapelvy genom att klicka på knappen Bädda in i stapel.

4. Öppna nu Assistant Editor och tryck på CTRL och dra från varje komponent till ViewController -koden för att skapa Outlets för varje komponent.

@IBOutlet var imageView: UIImageView!

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

5. Nu CTRL och dra från båda knapparna för att skapa en åtgärd för att öppna kamerans/bibliotekets användargränssnitt.

6. Lägg till följande kod i åtgärden Öppet bibliotek

@IBAction func openLibrary (_ avsändare: valfri) {

låt imagePicker = UIImagePickerController () imagePicker.delegate = self; imagePicker.sourceType =.photoLibrary self.present (imagePicker, animerad: true, komplettering: noll)}

7. I åtgärden Öppna kamera

@IBAction func openCamera (_ avsändare: valfri) {

låt imagePicker = UIImagePickerController () imagePicker.delegate = self imagePicker.sourceType =.camera; self.present (imagePicker, animerad: true, komplettering: noll)}

Steg 5: Skriv en molnfunktion

Eftersom bilderna inte behöver lagras i molnet för alltid kan vi skriva en molnfunktion för att utföra rengöringen. Detta kan utlösas som en HTTP-funktion varje timme av en cron-tjänst som cron-job.org.

Först och främst måste vi installera firebase-verktyg

npm installera -g firebase -verktyg

Kör sedan från projektets rotkatalog

eldbas init

Välj funktioner från kommandoraden för att initiera molnfunktioner. Du kan också aktivera firestore om du också vill konfigurera Firestore.

Öppna sedan funktioner/index.js och lägg till följande kod. Kom ihåg att ändra

till ditt Firebase -projekt -id.

const-funktioner = kräver ('firebase-funktioner');

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

Att distribuera molnfunktioner är lika enkelt som att köra det här kommandot.

brandbaserad distribution

Skapa sedan på cron-job.org ett jobb för att utlösa denna slutpunkt varje timme. Slutpunkten kommer att vara ungefär

us-central1-project_id.cloudfunctions.net/cleanup

Steg 6: Kör appen

Kör appen på en simulator eller iOS -enhet och börja dela foton!