Ứng dụng iOS Chia sẻ ảnh gần: 6 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:34

Trong hướng dẫn này, chúng tôi sẽ tạo một ứng dụng iOS với Swift cho phép bạn chia sẻ ảnh với bất kỳ ai ở gần mà không cần ghép nối thiết bị.

Chúng tôi sẽ sử dụng Chirp Connect để gửi dữ liệu bằng âm thanh và Firebase để lưu trữ hình ảnh trên đám mây.

Gửi dữ liệu kèm theo âm thanh tạo ra trải nghiệm độc đáo, nơi dữ liệu có thể được truyền cho bất kỳ ai trong phạm vi nghe được.

Bước 1: Cài đặt Yêu cầu

Xcode

Cài đặt từ App Store.

Ca cao

sudo gem cài đặt cocoapods

Chirp Connect iOS SDK

Đăng ký tại admin.chirp.io

Bước 2: Thiết lập dự án

1. Tạo một dự án Xcode.

2. Đăng nhập vào Firebase và tạo một dự án mới.

Bật Firestore bằng cách nhấp vào phần Cơ sở dữ liệu và chọn Cloud Firestore. Nhấp vào Chức năng để bật Chức năng đám mây.

3. Chạy qua Thiết lập ứng dụng iOS của bạn trên trang Tổng quan về dự án

Bạn sẽ cần Mã nhận dạng gói từ Tab Chung trong Cài đặt Dự án Xcode của mình. Sau khi Podfile được tạo, bạn sẽ cần thêm các phần phụ thuộc sau, trước khi chạy cài đặt pod.

# Pods cho dự án

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

4. Tải xuống Chirp Connect iOS SDK mới nhất từ admin.chirp.io/downloads

5. Làm theo các bước tại Develop.chirp.io để tích hợp Chirp Connect vào Xcode.

Đi tới Bắt đầu / iOS. Sau đó, cuộn xuống và làm theo hướng dẫn thiết lập Swift, điều này sẽ liên quan đến việc nhập khung và tạo tiêu đề bắc cầu.

Bây giờ thiết lập đã hoàn tất, chúng ta có thể bắt đầu viết một số mã! Bạn nên kiểm tra các bản dựng dự án của bạn ở từng giai đoạn trong quá trình thiết lập.

Bước 3: Viết mã IOS

1. Nhập Firebase vào ViewController của bạn và mở rộng NSData để bao gồm một phần mở rộng hexString, để chúng tôi có thể chuyển đổi các tải trọng của Chirp Connect thành một chuỗi thập lục phân. (Chirp Connect sẽ có sẵn trên toàn cầu nhờ tiêu đề bắc cầu).

nhập UIKit

nhập Firebase

dữ liệu tiện ích mở rộng {

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

2. Thêm đại biểu ImagePicker vào ViewController của bạn và khai báo một biến ChirpConnect được gọi là connect.

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

var kết nối: ChirpConnect? ghi đè func viewDidLoad () {super.viewDidLoad ()…

3. Sau super.viewDidLoad, khởi chạy Chirp Connect và thiết lập lệnh gọi lại đã nhận. Trong lệnh gọi lại đã nhận, chúng tôi sẽ truy xuất hình ảnh từ Firebase bằng cách sử dụng tải trọng đã nhận và cập nhật ImageView. Bạn có thể tải APP_KEY và APP_SECRET của mình từ admin.chirp.io.

connect = ChirpConnect (appKey: APP_KEY vàSecret: APP_SECRET) if let connect = connect {connect.getLicenceString {(license: String ?, error: Error?) trong if error == nil {if let license = license {connect.setLicenceString (license) connect.start () connect.receiveBlock = {(data: Data?) -> () in if let data = data {print (String (format: "Đã nhận dữ liệu:% @", data.hexString)) let tệp = Storage.storage (). Reference (). Child (data.hexString) file.getData (maxSize: 1 * 1024 * 2048) {imageData, lỗi trong if let error = error {print ("Error:% @", error.localizedDescription)} else {self.imageView.image = UIImage (data: imageData!)}}} else {print ("Giải mã không thành công"); }}}}

4. Bây giờ hãy thêm mã để gửi dữ liệu hình ảnh khi nó đã được chọn trong giao diện người dùng.

func imagePickerController (_ picker: UIImagePickerController, didFinishPickingMediaWithInfo thông tin: [Chuỗi: Bất kỳ])

{let imageData = info [UIImagePickerControllerOriginalImage] là? UIImage let 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 (animation: true, complete: nil)}

Lưu ý: Bạn sẽ cần thêm Quyền riêng tư - Mô tả Sử dụng Thư viện Ảnh, Quyền riêng tư - Mô tả Sử dụng Thư viện Ảnh và Quyền riêng tư - Các tuyên bố Mô tả Sử dụng Micrô vào Info.plist của bạn để cấp quyền sử dụng Máy ảnh, Thư viện Ảnh và Micrô.

Bước 4: Tạo giao diện người dùng

Bây giờ, hãy truy cập tệp Main.storyboard để tạo giao diện người dùng.

1. Kéo qua ImageView và hai Buttons vào Storyboard từ bảng Object Library ở góc dưới cùng bên phải.

2. Đối với mỗi nút, hãy thêm giới hạn chiều cao khoảng 75px bằng cách chọn thành phần và nhấp vào nút Thêm Giới hạn mới (nút trông giống như một máy bay chiến đấu trong Chiến tranh giữa các vì sao), sau đó nhập chiều cao và nhấn Enter.

3. Chọn tất cả ba thành phần và đưa chúng vào dạng xem ngăn xếp bằng cách nhấp vào nút Nhúng Trong Ngăn xếp.

4. Bây giờ mở Assistant Editor, nhấn CTRL và kéo từ mỗi thành phần đến mã ViewController, để tạo Outlet cho từng thành phần.

@IBOutlet var imageView: UIImageView!

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

5. Bây giờ CTRL và kéo từ cả hai nút để tạo Hành động để mở giao diện người dùng của máy ảnh / thư viện.

6. Trong hành động Thư viện Mở, hãy thêm mã sau

@IBAction func openLibrary (_ sender: Any) {

let imagePicker = UIImagePickerController () imagePicker.delegate = self; imagePicker.sourceType =.photoLibrary self.present (imagePicker, động: true, hoàn thành: nil)}

7. Trong hành động Mở Camera

@IBAction func openCamera (_ người gửi: Bất kỳ) {

let imagePicker = UIImagePickerController () imagePicker.delegate = self imagePicker.sourceType =.camera; self.present (imagePicker, động: true, hoàn thành: nil)}

Bước 5: Viết hàm đám mây

Vì ảnh không cần phải được lưu trữ trên đám mây mãi mãi, chúng tôi có thể viết Hàm đám mây để thực hiện dọn dẹp. Điều này có thể được kích hoạt dưới dạng một hàm HTTP mỗi giờ bởi một dịch vụ cron như cron-job.org.

Trước hết, chúng ta cần cài đặt firebase-tools

npm install -g firebase-tools

Sau đó từ thư mục gốc của dự án chạy

firebase init

Chọn các chức năng từ dòng lệnh để khởi tạo các chức năng đám mây. Bạn cũng có thể kích hoạt firestore nếu bạn muốn cũng như muốn cấu hình Firestore.

Sau đó, mở functions / index.js và thêm đoạn mã sau. Nhớ thay đổi

vào id dự án Firebase của bạn.

const functions = request ('firebase-functions');

const admin = request ('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 ()}) return response.status (200).send ('OK')}).catch (err => response.status (500).send (err))});

Việc triển khai các chức năng đám mây cũng đơn giản như chạy lệnh này.

triển khai firebase

Sau đó, tại cron-job.org, hãy tạo một công việc để kích hoạt điểm cuối này mỗi giờ. Điểm cuối sẽ giống như

us-central1-project_id.cloudfunctions.net/cleanup

Bước 6: Chạy ứng dụng

Chạy ứng dụng trên thiết bị mô phỏng hoặc iOS và bắt đầu chia sẻ ảnh!