Proximity Photo Sharing IOS App: 6 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:24

I denne instruksen skal vi lage en iOS -app med Swift som lar deg dele bilder med alle i nærheten, uten at det er nødvendig med sammenkobling av enheter.

Vi bruker Chirp Connect for å sende data med lyd, og Firebase for å lagre bildene i skyen.

Å sende data med lyd skaper en unik opplevelse der data kan sendes til alle innenfor hørselsområdet.

Trinn 1: Installer krav

Xcode

Installer fra App Store.

CocoaPods

sudo gem installer cocoapods

Chirp Connect iOS SDK

Registrer deg på admin.chirp.io

Trinn 2: Oppsettprosjekt

1. Opprett et Xcode -prosjekt.

2. Logg på Firebase og opprett et nytt prosjekt.

Aktiver Firestore ved å klikke på Database -delen og velge Cloud Firestore. Klikk på Functions for også å aktivere Cloud Functions.

3. Gjennomfør Konfigurer iOS -appen din på siden Prosjektoversikt

Du trenger pakkeidentifikatoren fra kategorien Generelt i Xcode -prosjektinnstillingene. Når podfilen er opprettet, må du legge til følgende avhengigheter før du kan installere pod.

# Belger for prosjekt

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

4. Last ned den nyeste Chirp Connect iOS SDK fra admin.chirp.io/downloads

5. Følg trinnene på developers.chirp.io for å integrere Chirp Connect i Xcode.

Gå til Komme i gang / iOS. Bla deretter ned og følg instruksjonene i Swift -oppsettet. Dette vil innebære import av rammeverket og opprettelse av en brooverskrift.

Når oppsettet er fullført, kan vi begynne å skrive noen kode! Det er en god idé å sjekke prosjektets bygg på hvert trinn i oppsettet.

Trinn 3: Skriv IOS -kode

1. Importer Firebase til ViewController og utvid NSData til å inkludere en hexString -utvidelse, slik at vi kan konvertere Chirp Connect nyttelaster til en heksadesimal streng. (Chirp Connect vil være tilgjengelig globalt takket være brooverskriften).

importer UIKit

importer Firebase

utvidelsesdata {

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

2. Legg til ImagePicker -delegater i ViewController, og erklær en ChirpConnect -variabel som heter connect.

klasse ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

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

3. Etter super.viewDidLoad, initialiser Chirp Connect og konfigurer den mottatte tilbakeringingen. I den mottatte tilbakeringingen vil vi hente bildet fra Firebase ved hjelp av mottatt nyttelast og oppdatere ImageView. Du kan få APP_KEY og APP_SECRET fra admin.chirp.io.

connect = ChirpConnect (appKey: APP_KEY, andSecret: APP_SECRET) if let connect = connect {connect.getLicenceString {(licens: String ?, error: Error?) in if error == nul {if let license = license {connect.setLicenceString (lisens) connect.start () connect.receivedBlock = {(data: Data?) -> () i hvis la data = data {print (String (format: "Mottatte data: %@", data.hexString)) la filen = Storage.storage (). Reference (). Child (data.hexString) file.getData (maxSize: 1 * 1024 * 2048) {imageData, feil i hvis la feil = feil {utskrift ("Feil: %@", feil.localizedDescription)} else {self.imageView.image = UIImage (data: imageData!)}}} else {print ("Decode failed"); }}}}

4. Legg til koden for å sende bildedataene når de er valgt i brukergrensesnittet.

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

{la imageData = info [UIImagePickerControllerOriginalImage] som? UIImage la 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 (animert: true, komplett: null)}

Merk: Du må legge til en erklæring om personvern - beskrivelse av bruk av fotobibliotek, personvern - beskrivelse av bruk av fotobibliotek og personvern - Beskrivelse av mikrofonbruk -beskrivelse for Info.plist for å gi tillatelser til å bruke kameraet, fotobiblioteket og mikrofonen.

Trinn 4: Lag et brukergrensesnitt

Gå nå til Main.storyboard -filen for å lage et brukergrensesnitt.

1. Dra over en ImageView og to knapper til Storyboard fra objektbibliotekpanelet nederst til høyre.

2. For hver knapp, legg til en høydebegrensning på omtrent 75 piksler ved å velge komponenten og klikke på knappen Legg til nye begrensninger (den som ser ut som en Star Wars slipsskjemper), og angi deretter høyden og trykk Enter.

3. Velg alle tre komponentene, og sett dem i en stabelvisning ved å klikke på Embed In Stack -knappen.

4. Åpne nå Assistant Editor, og trykk CTRL og dra fra hver komponent til ViewController -koden for å lage Outlets for hver komponent.

@IBOutlet var imageView: UIImageView!

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

5. Nå CTRL og dra fra begge knappene for å opprette en handling for å åpne kameraet/biblioteket.

6. Legg til følgende kode i handlingen Åpent bibliotek

@IBAction func openLibrary (_ sender: Enhver) {

la imagePicker = UIImagePickerController () imagePicker.delegate = self; imagePicker.sourceType =.photoLibrary self.present (imagePicker, animert: true, komplett: null)}

7. I handlingen Åpne kamera

@IBAction func openCamera (_ sender: Enhver) {

la imagePicker = UIImagePickerController () imagePicker.delegate = self imagePicker.sourceType =.camera; self.present (imagePicker, animert: true, komplett: null)}

Trinn 5: Skriv en skyfunksjon

Siden bildene ikke trenger å lagres i skyen for alltid, kan vi skrive en skyfunksjon for å utføre oppryddingen. Dette kan utløses som en HTTP-funksjon hver time av en cron-tjeneste som cron-job.org.

Først av alt må vi installere firebase-verktøy

npm install -g firebase -tools

Deretter kjøres fra prosjektets rotkatalog

firebase init

Velg funksjoner fra kommandolinjen for å initialisere skyfunksjoner. Du kan også aktivere firestore hvis du også vil konfigurere Firestore.

Åpne deretter functions/index.js og legg til følgende kode. Husk å endre

til din Firebase -prosjekt -ID.

const-funksjoner = krever ('firebase-funksjoner');

const admin = require ('firebase-admin'); admin.initializeApp () exports.cleanup = functions.https.onRequest ((forespørsel, svar) => {admin.firestore ().collection ('uploads').where ('timestamp', '{snapshot.forEach (doc = > {admin.storage ().bucket ('gs: //.appspot.com').file (doc.data ().key).delete () doc.ref.delete ()}) returrespons.status (200).send ('OK')}).catch (err => response.status (500).send (err))});

Å distribuere skyfunksjoner er like enkelt som å kjøre denne kommandoen.

brannbase -distribusjon

Deretter kan du på cron-job.org lage en jobb for å utløse dette endepunktet hver time. Sluttpunktet vil være noe sånt

us-central1-project_id.cloudfunctions.net/cleanup

Trinn 6: Kjør appen

Kjør appen på en simulator eller iOS -enhet, og begynn å dele bilder!