Aplikacja do udostępniania zdjęć zbliżeniowych na iOS: 6 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:31

W tej instrukcji stworzymy aplikację na iOS z Swift, która pozwoli Ci udostępniać zdjęcia każdemu w pobliżu, bez konieczności parowania urządzeń.

Będziemy używać Chirp Connect do przesyłania danych za pomocą dźwięku oraz Firebase do przechowywania obrazów w chmurze.

Wysyłanie danych z dźwiękiem tworzy wyjątkowe wrażenia, w których dane mogą być przesyłane do każdego, kto znajduje się w zasięgu słuchu.

Krok 1: Zainstaluj wymagania

Xkod

Zainstaluj z App Store.

CocoaPods

sudo gem zainstaluj kakopody

Chirp Connect iOS SDK

Zarejestruj się na admin.chirp.io

Krok 2: Konfiguracja projektu

1. Utwórz projekt Xcode.

2. Zaloguj się do Firebase i utwórz nowy projekt.

Włącz Firestore, klikając sekcję Baza danych i wybierając Cloud Firestore. Kliknij Funkcje, aby również włączyć Cloud Functions.

3. Przejdź przez Skonfiguruj aplikację na iOS na stronie Przegląd projektu

Będziesz potrzebować identyfikatora pakietu z karty Ogólne w ustawieniach projektu Xcode. Po utworzeniu pliku Podfile będziesz musiał dodać następujące zależności przed uruchomieniem instalacji pod.

# Pody do projektu

pod „Firebase/Rdzeń” pod „Firebase/Firestore” pod „Firebase/Magazyn”

4. Pobierz najnowszy pakiet SDK Chirp Connect iOS ze strony admin.chirp.io/downloads

5. Postępuj zgodnie z instrukcjami na developers.chirp.io, aby zintegrować Chirp Connect z Xcode.

Przejdź do Pierwsze kroki / iOS. Następnie przewiń w dół i postępuj zgodnie z instrukcjami konfiguracji Swift. Będzie to wymagać zaimportowania struktury i utworzenia nagłówka pomostowego.

Teraz konfiguracja jest zakończona, możemy zacząć pisać kod! Dobrym pomysłem jest sprawdzanie kompilacji projektu na każdym etapie konfiguracji.

Krok 3: Napisz kod IOS

1. Zaimportuj Firebase do swojego kontrolera ViewController i rozszerz NSData o rozszerzenie hexString, dzięki czemu będziemy mogli przekonwertować ładunki Chirp Connect na ciąg szesnastkowy. (Chirp Connect będzie dostępny na całym świecie dzięki nagłówkowi pomostowemu).

importuj UIKit

importuj Firebase

dane rozszerzenia {

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

2. Dodaj delegatów ImagePicker do kontrolera ViewController i zadeklaruj zmienną ChirpConnect o nazwie connect.

klasa ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

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

3. Po super.viewDidLoad zainicjuj Chirp Connect i skonfiguruj odebrane wywołanie zwrotne. W odebranym wywołaniu zwrotnym pobierzemy obraz z Firebase za pomocą otrzymanego ładunku i zaktualizujemy ImageView. Możesz pobrać APP_KEY i APP_SECRET z admin.chirp.io.

connect = ChirpConnect(appKey: APP_KEY, andSecret: APP_SECRET) if let connect = connect { connect.getLicenceString { (licencja: String?, błąd: Błąd?) in if error == nil { if let license = license { connect.setLicenceString(licencja) connect.start() connect.receivedBlock = { (dane: Dane?) -> () in if let data = data { print(String(format: "Otrzymane dane: %@", data.hexString)) let file = Storage.storage().reference().child(data.hexString) file.getData(maxSize: 1 * 1024 * 2048) { imageData, błąd w if let error = error { print("Błąd: %@", błąd.localizedDescription) } else { self.imageView.image = UIImage(dane: imageData!) } } } else { print("Dekodowanie nie powiodło się"); } } } }

4. Teraz dodaj kod, aby wysłać dane obrazu po ich wybraniu w interfejsie użytkownika.

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

{ let imageData = info[UIImagePickerControllerOriginalImage] jako? UIImage niech dane: 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()]) { błąd w 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(animacja: prawda, zakończenie: zero) }

Uwaga: Do pliku Info.plist należy dodać oświadczenia Prywatność - Opis użytkowania biblioteki zdjęć, Prywatność - Opis użytkowania biblioteki zdjęć oraz Prywatność - Opis użytkowania mikrofonu, aby przyznać uprawnienia do korzystania z aparatu, biblioteki zdjęć i mikrofonu.

Krok 4: Utwórz interfejs użytkownika

Teraz przejdź do pliku Main.storyboard, aby utworzyć interfejs użytkownika.

1. Przeciągnij przez ImageView i dwa przyciski do scenorysu z panelu Object Library w prawym dolnym rogu.

2. Dla każdego przycisku dodaj ograniczenie wysokości około 75px, wybierając komponent i klikając przycisk Dodaj nowe ograniczenia (ten, który wygląda jak krawat z Gwiezdnych Wojen), a następnie wprowadź wysokość i naciśnij Enter.

3. Wybierz wszystkie trzy komponenty i umieść je w widoku stosu, klikając przycisk Osadź w stosie.

4. Teraz otwórz Assistant Editor, naciśnij CTRL i przeciągnij z każdego komponentu do kodu ViewController, aby utworzyć Outlets dla każdego komponentu.

@IBOutlet var imageView: UIImageView!

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

5. Teraz CTRL i przeciągnij z obu przycisków, aby utworzyć akcję, aby otworzyć interfejs użytkownika aparatu/biblioteki.

6. W akcji Otwórz bibliotekę dodaj następujący kod

@IBAction func openLibrary(_ sender: Any) {

let imagePicker = UIImagePickerController() imagePicker.delegate = self; imagePicker.sourceType =.photoLibrary self.present(imagePicker, animacja: prawda, zakończenie: zero) }

7. W akcji Otwórz kamerę

@IBAction func openCamera(_ sender: Any) {

let imagePicker = UIImagePickerController() imagePicker.delegate = self imagePicker.sourceType =.camera; self.present(imagePicker, animowany: prawda, uzupełnianie: zero) }

Krok 5: Napisz funkcję w chmurze

Ponieważ zdjęcia nie muszą być przechowywane w chmurze na zawsze, możemy napisać funkcję chmury, aby wykonać czyszczenie. Może to być uruchamiane co godzinę jako funkcja HTTP przez usługę cron, taką jak cron-job.org.

Przede wszystkim musimy zainstalować narzędzia Firebase

npm install -g firebase-tools

Następnie z katalogu głównego projektu uruchom

inicjowanie bazy ogniowej

Wybierz funkcje z wiersza poleceń, aby zainicjować funkcje chmury. Możesz także włączyć Firestore, jeśli chcesz również skonfigurować Firestore.

Następnie otwórz funkcje/index.js i dodaj następujący kod. Pamiętaj o zmianie

do identyfikatora projektu Firebase.

funkcje const = require('funkcje-firebase');

const admin = require('firebase-admin'); admin.initializeApp() exports.cleanup = functions.https.onRequest((żądanie, odpowiedź) => { admin.firestore().collection('przesyłane').where('znacznik czasu', ' { 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)) });

Wdrażanie funkcji chmury jest tak proste, jak uruchomienie tego polecenia.

wdrożenie bazy ogniowej

Następnie na stronie cron-job.org utwórz zadanie, które będzie uruchamiać ten punkt końcowy co godzinę. Punktem końcowym będzie coś takiego

us-central1-project_id.cloudfunctions.net/cleanup

Krok 6: Uruchom aplikację

Uruchom aplikację na symulatorze lub urządzeniu z systemem iOS i zacznij udostępniać zdjęcia!