Aplikasi iOS Berbagi Foto Jarak Dekat: 6 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:57

Dalam instruksi ini, kami akan membuat aplikasi iOS dengan Swift yang memungkinkan Anda berbagi foto dengan siapa pun di sekitar, tanpa perlu memasangkan perangkat.

Kami akan menggunakan Chirp Connect untuk mengirim data menggunakan suara, dan Firebase untuk menyimpan gambar di cloud.

Mengirim data dengan suara menciptakan pengalaman unik di mana data dapat disiarkan ke siapa saja dalam jangkauan pendengaran.

Langkah 1: Instal Persyaratan

Kode X

Instal dari App Store.

CocoaPods

Sudo gem install cocoapods

Chirp Connect iOS SDK

Daftar di admin.chirp.io

Langkah 2: Siapkan Proyek

1. Buat proyek Xcode.

2. Masuk ke Firebase dan buat proyek baru.

Aktifkan Firestore dengan mengklik bagian Database dan memilih Cloud Firestore. Klik ke Fungsi untuk juga mengaktifkan Cloud Functions.

3. Jalankan melalui Siapkan aplikasi iOS Anda di halaman Ikhtisar Proyek

Anda akan memerlukan Bundle Identifier dari Tab Umum di Pengaturan Proyek Xcode Anda. Setelah Podfile dibuat, Anda perlu menambahkan dependensi berikut, sebelum menjalankan pod install.

# Pod untuk proyek

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

4. Unduh Chirp Connect iOS SDK terbaru dari admin.chirp.io/downloads

5. Ikuti langkah-langkah di developers.chirp.io untuk mengintegrasikan Chirp Connect ke Xcode.

Pergi ke Memulai / iOS. Kemudian gulir ke bawah dan ikuti petunjuk penyiapan Swift. Ini akan melibatkan mengimpor kerangka kerja dan membuat header penghubung.

Sekarang setup selesai, kita bisa mulai menulis beberapa kode! Sebaiknya periksa build proyek Anda di setiap tahap dalam penyiapan.

Langkah 3: Tulis Kode IOS

1. Impor Firebase ke ViewController Anda dan perluas NSData untuk menyertakan ekstensi hexString, sehingga kami dapat mengonversi payload Chirp Connect ke string heksadesimal. (Chirp Connect akan tersedia secara global berkat bridging header).

impor UIKit

impor Firebase

ekstensi Data {

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

2. Tambahkan delegasi ImagePicker ke ViewController Anda, dan nyatakan variabel ChirpConnect yang disebut connect.

kelas ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

var terhubung: ChirpConnect? menimpa fungsi viewDidLoad() { super.viewDidLoad() …

3. Setelah super.viewDidLoad, inisialisasi Chirp Connect, dan atur panggilan balik yang diterima. Dalam panggilan balik yang diterima, kami akan mengambil gambar dari Firebase menggunakan payload yang diterima dan memperbarui ImageView. Anda bisa mendapatkan APP_KEY dan APP_SECRET dari admin.chirp.io.

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

4. Sekarang tambahkan kode untuk mengirim data gambar setelah dipilih di UI.

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

{ biarkan imageData = info[UIImagePickerControllerOriginalImage] sebagai? UIImage biarkan data: Data = UIImageJPEGRepresentation(imageData!, 0.1)! self.imageView.image = imageData let metadata = StorageMetadata() metadata.contentType = "image/jpeg" jika 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(animasi: true, complete: nil) }

Catatan: Anda perlu menambahkan Pernyataan Privasi - Deskripsi Penggunaan Perpustakaan Foto, Privasi - Deskripsi Penggunaan Perpustakaan Foto dan Privasi - Deskripsi Penggunaan Mikrofon ke Info.plist Anda untuk memberikan izin penggunaan Kamera, Perpustakaan Foto, dan Mikrofon.

Langkah 4: Buat Antarmuka Pengguna

Sekarang buka file Main.storyboard untuk membuat UI.

1. Seret melintasi ImageView dan dua Tombol ke Storyboard dari panel Object Library di sudut kanan bawah.

2. Untuk setiap tombol tambahkan batasan ketinggian sekitar 75px dengan memilih komponen dan klik tombol Tambahkan Batasan Baru (yang terlihat seperti petarung dasi Star Wars), lalu masukkan ketinggian dan tekan Enter.

3. Pilih ketiga komponen dan letakkan dalam tampilan tumpukan dengan mengklik tombol Sematkan Dalam Tumpukan.

4. Sekarang buka Asisten Editor, dan tekan CTRL dan seret dari setiap komponen ke kode ViewController, untuk membuat Outlet untuk setiap komponen.

@IBOutlet var imageView: UIImageView!

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

5. Sekarang CTRL dan seret dari kedua tombol untuk membuat Action untuk membuka UI kamera/perpustakaan.

6. Pada action Open Library, tambahkan kode berikut

@IBAction func openLibrary(_ sender: Any) {

biarkan imagePicker = UIImagePickerController() imagePicker.delegate = self; imagePicker.sourceType =.photoLibrary self.present(imagePicker, animasi: true, penyelesaian: nil) }

7. Dalam aksi Buka Kamera

@IBAction func openCamera(_ sender: Any) {

biarkan imagePicker = UIImagePickerController() imagePicker.delegate = self imagePicker.sourceType =.camera; self.present(imagePicker, animasi: true, penyelesaian: nil) }

Langkah 5: Tulis Fungsi Cloud

Karena foto tidak perlu disimpan di cloud selamanya, kita dapat menulis Cloud Function untuk melakukan pembersihan. Ini dapat dipicu sebagai fungsi HTTP setiap jam oleh layanan cron seperti cron-job.org.

Pertama-tama kita perlu menginstal firebase-tools

npm install -g firebase-tools

Kemudian dari direktori root proyek, jalankan

firebase init

Pilih fungsi dari baris perintah untuk menginisialisasi fungsi cloud. Anda juga dapat mengaktifkan firestore jika Anda ingin juga mengonfigurasi Firestore.

Kemudian buka functions/index.js dan tambahkan kode berikut. Ingatlah untuk berubah

ke id proyek Firebase Anda.

const fungsi = membutuhkan('firebase-fungsi');

const admin = membutuhkan('firebase-admin'); admin.initializeApp() export.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() }) mengembalikan response.status(200).send('OK') }).catch(err => respon.status(500).send(err)) });

Menyebarkan fungsi cloud semudah menjalankan perintah ini.

penyebaran firebase

Kemudian di cron-job.org buat pekerjaan untuk memicu titik akhir ini setiap jam. Titik akhir akan menjadi sesuatu seperti

us-central1-project_id.cloudfunctions.net/cleanup

Langkah 6: Jalankan Aplikasi

Jalankan aplikasi di simulator atau perangkat iOS, dan mulailah berbagi foto!