Proximity Photo Sharing IOS App: 6 na Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:14

Sa pagtuturo na ito ay lilikha kami ng isang iOS app na may Swift na nagbibigay-daan sa iyo upang ibahagi ang mga larawan sa sinumang malapit, nang walang kinakailangang pagpapares ng aparato.

Gagamitin namin ang Chirp Connect upang magpadala ng data gamit ang tunog, at Firebase upang maiimbak ang mga imahe sa cloud.

Ang pagpapadala ng data na may tunog ay lumilikha ng isang natatanging karanasan kung saan maaaring mai-broadcast ang data sa sinumang nasa saklaw ng pandinig.

Hakbang 1: I-install ang Mga Kinakailangan

Xcode

I-install mula sa App Store.

CocoaPods

sudo gem install cocoapods

Chirp Connect iOS SDK

Mag-sign up sa admin.chirp.io

Hakbang 2: I-setup ang Proyekto

1. Lumikha ng isang proyekto sa Xcode.

2. Mag-sign in sa Firebase at lumikha ng isang bagong proyekto.

Paganahin ang Firestore sa pamamagitan ng pag-click sa seksyong Database at pagpili sa Cloud Firestore. Mag-click sa Mga Pag-andar upang paganahin din ang Mga Pag-andar ng Cloud.

3. Patakbuhin ang I-set up ang iyong iOS app sa pahina ng Pangkalahatang-ideya ng Project

Kakailanganin mo ang Bundle Identifier mula sa Pangkalahatang Tab sa iyong Mga Setting ng Proyekto ng Xcode. Kapag nilikha ang Podfile kakailanganin mong idagdag ang mga sumusunod na dependency, bago patakbuhin ang pag-install ng pod.

# Pods para sa proyekto

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

4. I-download ang pinakabagong Chirp Connect iOS SDK mula sa admin.chirp.io/downloads

5. Sundin ang mga hakbang sa mga developer.chirp.io upang isama ang Chirp Connect sa Xcode.

Pumunta sa Pagsisimula / iOS. Pagkatapos mag-scroll pababa at sundin ang mga tagubilin sa pag-set up ng Swift. Magsasangkot ito ng pag-import ng balangkas at paglikha ng isang bridging header.

Ngayon ang pag-setup ay kumpleto na, maaari nating simulan ang pagsulat ng ilang code! Magandang ideya na suriin ang pagbuo ng iyong proyekto sa bawat yugto sa pag-setup.

Hakbang 3: Sumulat ng IOS Code

1. I-import ang Firebase sa iyong ViewController at palawakin ang NSData upang isama ang isang hexString extension, upang mai-convert namin ang mga Chirp Connect payload sa isang hexadecimal string. (Ang Chirp Connect ay magagamit sa buong mundo salamat sa bridging header).

i-import ang UIKit

i-import ang Firebase

extension ng Data {

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

2. Magdagdag ng mga delegado ng ImagePicker sa iyong ViewController, at ideklara ang isang variable ng ChirpConnect na tinatawag na connect.

klase ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

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

3. Pagkatapos ng super.viewDidLoad, ipasimulan ang Chirp Connect, at i-set up ang natanggap na callback. Sa natanggap na callback ay kukunin namin ang imahe mula sa Firebase gamit ang natanggap na kargamento at i-update ang ImageView. Maaari mong makuha ang iyong APP_KEY at APP_SECRET mula sa admin.chirp.io.

ikonekta = ChirpConnect (appKey: APP_KEY, atSecret: APP_SECRET) kung hayaang kumonekta = kumonekta {connect.getLicenceString {(lisensya: String ?, error: Error?) sa kung error == nil {kung hayaan ang lisensya = lisensya {connect.setLicenceString (lisensya) connect.start () connect.receivedBlock = {(data: Data?) -> () sa kung hayaan ang data = data {print (String (format: "Natanggap na data:% @", data.hexString)) hayaan ang file = Storage.storage (). Sanggunian (). Bata (data.hexString) file.getData (maxSize: 1 * 1024 * 2048) {imageData, error kung hayaan ang error = error {print ("Error:% @", error.localizedDescription)} iba pa {self.imageView.image = UIImage (data: imageData!)}}} iba pa {print ("Nabigo ang pag-decode"); }}}}

4. Ngayon idagdag ang code upang maipadala ang data ng imahe sa sandaling napili ito sa UI.

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

{let imageData = info [UIImagePickerControllerOriginalImage] bilang? Hayaan ang UIImage data: Data = UIImageJPEGRepresentation (imageData !, 0.1)! self.imageView.image = imageData let metadata = StorageMetadata () metadata.contentType = "image / jpeg" kung hayaang kumonekta = kumonekta {let key: Data = connect.randomPayload (withLength: 8) Firestore.firestore (). koleksyon (" uploads "). addDocument (data: [" key ": key.hexString," timestamp ": FieldValue.serverTimestamp ()]) {error in if let error = error {print (error.localizedDescription)}} Storage.storage ().referensi (). bata (key.hexString).putData (data, metadata: metadata) {(metadata, error) kung hayaan ang error = error {print (error.localizedDescription)} iba pa {connect.send (key)}} } self.dismiss (animated: totoo, pagkumpleto: nil)}

Tandaan: Kakailanganin mong magdagdag ng isang Pagkapribado - Paglalarawan ng Paggamit ng Photo Library, Pagkapribado - Paglalarawan ng Paggamit ng Photo Library at Pagkapribado - Mga pahayag sa Paglalarawan ng Paggamit ng Mikropono sa iyong Info.plist upang magbigay ng mga pahintulot na magamit ang Camera, Photo Library at Mikropono.

Hakbang 4: Lumikha ng isang User Interface

Pumunta ngayon sa file ng Main.storyboard upang lumikha ng isang UI.

1. Pag-drag sa isang ImageView at dalawang mga Pindutan sa Storyboard mula sa panel ng Object Library sa kanang sulok sa ibaba.

2. Para sa bawat pindutan magdagdag ng isang hadlang sa taas na tungkol sa 75px sa pamamagitan ng pagpili ng sangkap at pag-click sa pindutan ng Magdagdag ng Mga Bagong Paghihigpit (ang isa na mukhang isang Star Wars tie fighter), at pagkatapos ay ipasok ang taas at pindutin ang Enter.

3. Piliin ang lahat ng tatlong mga bahagi at ilagay ang mga ito sa isang view ng stack sa pamamagitan ng pag-click sa pindutan na I-embed In Stack.

4. Ngayon buksan ang Assistant Editor, at pindutin ang CTRL at i-drag mula sa bawat bahagi sa ViewController code, upang lumikha ng Mga outlet para sa bawat bahagi.

@IBOutlet var imageView: UIImageView!

@IBOutlet var openLibrary Button: UIButton! @IBOutlet var openCamera Button: UIButton!

5. Ngayon CTRL at i-drag mula sa parehong mga pindutan upang lumikha ng isang Aksyon upang buksan ang camera / library UI's.

6. Sa aksyon na Buksan ang Library, idagdag ang sumusunod na code

@IBAction func openLibrary (_ nagpadala: Anumang) {

hayaan ang imagePicker = UIImagePickerController () imagePicker.delegate = sarili; imagePicker.sourceType =.photoLibrary self.present (imagePicker, animated: true, pagkumpleto: nil)}

7. Sa aksyon na Buksan ang Camera

@IBAction func openCamera (_ nagpadala: Anumang) {

hayaan ang imagePicker = UIImagePickerController () imagePicker.delegate = self imagePicker.sourceType =.camera; self.present (imagePicker, animated: totoo, pagkumpleto: nil)}

Hakbang 5: Sumulat ng isang Cloud Function

Dahil ang mga larawan ay hindi kailangang maiimbak sa ulap magpakailanman, maaari kaming magsulat ng isang Cloud Function upang maisagawa ang paglilinis. Maaari itong ma-trigger bilang isang paggana ng HTTP bawat oras sa pamamagitan ng isang serbisyo ng cron tulad ng cron-job.org.

Una sa lahat kailangan naming mag-install ng mga firebase-tool

mag-install ng -g mga firebase-tool

Pagkatapos mula sa pagpapatakbo ng root direktoryo ng proyekto

firebase init

Piliin ang mga pag-andar mula sa linya ng utos upang ipasimuno ang mga pag-andar ng ulap. Maaari mo ring paganahin ang firestore kung nais mo ring i-configure ang Firestore.

Pagkatapos buksan ang mga function / index.js at idagdag ang sumusunod na code. Tandaan na magbago

sa iyong Firebase project id.

const function = nangangailangan ('firebase-functions');

const admin = nangangailangan ('firebase-admin'); admin.initializeApp () exports.cleanup = functions.https.onRequest ((hiling, tugon) => {admin.firestore ().collection ('uploads'). Kung saan ('timestamp', '{snapshot.forEach (doc = > {admin.storage ().bucket ('gs: //.appspot.com').file (doc.data ().key).delete () doc.ref.delete ()}) bumalik tugon.status (200). Ipadala ('OK')}).catch (err => response.status (500). Send (err))});

Ang pag-deploy ng mga pag-andar ng cloud ay kasing simple ng pagpapatakbo ng utos na ito.

pag-deploy ng firebase

Pagkatapos sa cron-job.org lumikha ng isang trabaho upang ma-trigger ang endpoint na ito bawat oras. Ang endpoint ay magiging isang bagay tulad ng

us-central1-project_id.cloudfunctions.net/cleanup

Hakbang 6: Patakbuhin ang App

Patakbuhin ang app sa isang simulator o iOS aparato, at simulang magbahagi ng mga larawan!