Proximity Photo Sharing แอพ IOS: 6 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:07

ในคำแนะนำนี้ เราจะสร้างแอป iOS ด้วย Swift ที่ให้คุณแชร์รูปภาพกับใครก็ได้ในบริเวณใกล้เคียง โดยไม่จำเป็นต้องจับคู่อุปกรณ์

เราจะใช้ Chirp Connect เพื่อส่งข้อมูลโดยใช้เสียง และ Firebase เพื่อจัดเก็บภาพในคลาวด์

การส่งข้อมูลพร้อมเสียงจะสร้างประสบการณ์ที่ไม่เหมือนใคร ซึ่งข้อมูลสามารถถ่ายทอดให้ใครก็ตามที่อยู่ในระยะการได้ยิน

ขั้นตอนที่ 1: ติดตั้งข้อกำหนด

Xcode

ติดตั้งจาก App Store

CocoaPods

sudo gem ติดตั้ง cocoapods

Chirp Connect iOS SDK

สมัครได้ที่ admin.chirp.io

ขั้นตอนที่ 2: ตั้งค่า Project

1. สร้างโครงการ Xcode

2. ลงชื่อเข้าใช้ Firebase และสร้างโครงการใหม่

เปิดใช้งาน Firestore โดยคลิกที่ส่วนฐานข้อมูลและเลือก Cloud Firestore คลิกเข้าไปที่ Functions เพื่อเปิดใช้งาน Cloud Functions ด้วย

3. เรียกใช้การตั้งค่าแอป iOS ของคุณในหน้าภาพรวมโครงการ

คุณจะต้องใช้ตัวระบุบันเดิลจากแท็บทั่วไปในการตั้งค่าโปรเจ็กต์ Xcode เมื่อสร้าง Podfile แล้ว คุณจะต้องเพิ่มการพึ่งพาต่อไปนี้ ก่อนรันการติดตั้งพ็อด

# Pods สำหรับโครงการ

พ็อด 'Firebase/Core' พ็อด 'Firebase/Firestore' พ็อด 'Firebase/ที่เก็บข้อมูล'

4. ดาวน์โหลด Chirp Connect iOS SDK ล่าสุดจาก admin.chirp.io/downloads

5. ทำตามขั้นตอนที่ developer.chirp.io เพื่อรวม Chirp Connect เข้ากับ Xcode

ไปที่ เริ่มต้นใช้งาน / iOS จากนั้นเลื่อนลงมาและทำตามคำแนะนำในการตั้งค่า Swift ซึ่งจะเกี่ยวข้องกับการนำเข้าเฟรมเวิร์กและการสร้างส่วนหัวของการเชื่อมต่อ

ตอนนี้การตั้งค่าเสร็จสมบูรณ์ เราสามารถเริ่มเขียนโค้ดได้เลย! เป็นความคิดที่ดีที่จะตรวจสอบการสร้างโปรเจ็กต์ของคุณในแต่ละขั้นตอนในการตั้งค่า

ขั้นตอนที่ 3: เขียนรหัส IOS

1. นำเข้า Firebase ลงใน ViewController ของคุณและขยาย NSData เพื่อรวมส่วนขยาย hexString เพื่อให้เราสามารถแปลงข้อมูล Chirp Connect เป็นสตริงเลขฐานสิบหก (Chirp Connect จะสามารถใช้ได้ทั่วโลกด้วยส่วนหัวของการเชื่อมต่อ)

นำเข้า UIKit

นำเข้า Firebase

ข้อมูลส่วนขยาย {

var hexString: สตริง { แผนที่ส่งคืน { สตริง (รูปแบบ: "%02x", UInt8($0)) }.joined () } }

2. เพิ่มผู้รับมอบสิทธิ์ ImagePicker ไปยัง ViewController ของคุณและประกาศตัวแปร ChirpConnect ที่เรียกว่า connect

คลาส ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

เชื่อมต่อ: ChirpConnect? แทนที่ func viewDidLoad() { super.viewDidLoad() …

3. หลังจาก super.viewDidLoad ให้เริ่มต้น Chirp Connect และตั้งค่าการโทรกลับที่ได้รับ ในการเรียกกลับที่ได้รับ เราจะดึงรูปภาพจาก Firebase โดยใช้เพย์โหลดที่ได้รับและอัปเดต ImageView คุณสามารถรับ APP_KEY และ APP_SECRET ได้จาก admin.chirp.io

เชื่อมต่อ = ChirpConnect (appKey: APP_KEY และความลับ: APP_SECRET) ถ้าให้เชื่อมต่อ = เชื่อมต่อ { connect.getLicenceString { (ใบอนุญาต: สตริง? ข้อผิดพลาด: ข้อผิดพลาด?) ถ้าเกิดข้อผิดพลาด == ไม่มี { ถ้าให้ใบอนุญาต = ใบอนุญาต { connect.setLicenceString (ใบอนุญาต) connect.start() connect.receivedBlock = { (data: Data?) -> () in if let data = data { print(String(format: "Received data: %@", data.hexString)) ให้ไฟล์ = Storage.storage().reference().child(data.hexString) file.getData(maxSize: 1 * 1024 * 2048) { imageData, error in if let error = error { พิมพ์ ("Error: %@", error.localizedDescription) } อื่น ๆ { self.imageView.image = UIImage (ข้อมูล: imageData!) } } } อื่น ๆ { พิมพ์ ("การถอดรหัสล้มเหลว"); } } } }

4. ตอนนี้เพิ่มรหัสเพื่อส่งข้อมูลภาพเมื่อได้รับเลือกใน UI แล้ว

func imagePickerController (_ ตัวเลือก: UIImagePickerController, ข้อมูล didFinishPickingMediaWithInfo: [String: Any])

{ ให้ imageData = info [UIImagePickerControllerOriginalImage] เป็น? UIImage ให้ข้อมูล: Data = UIImageJPEGRepresentation (imageData!, 0.1)! self.imageView.image = imageData ให้ metadata = StorageMetadata () metadata.contentType = "image/jpeg" ถ้าให้เชื่อมต่อ = เชื่อมต่อ { ให้คีย์: Data = connect.randomPayload (ด้วยความยาว: 8) Firestore.firestore ().collection (" อัปโหลด") addDocument (ข้อมูล: ["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(เคลื่อนไหว: จริง สมบูรณ์: ไม่มี) }

หมายเหตุ: คุณจะต้องเพิ่มความเป็นส่วนตัว - คำอธิบายการใช้งานไลบรารีรูปภาพ ความเป็นส่วนตัว - คำอธิบายการใช้ไลบรารีรูปภาพและความเป็นส่วนตัว - คำสั่งคำอธิบายการใช้ไมโครโฟนใน Info.plist ของคุณเพื่ออนุญาตให้ใช้กล้อง ไลบรารีรูปภาพ และไมโครโฟน

ขั้นตอนที่ 4: สร้างอินเทอร์เฟซผู้ใช้

ไปที่ไฟล์ Main.storyboard เพื่อสร้าง UI

1. ลากข้าม ImageView และสองปุ่มไปยัง Storyboard จากแผง Object Library ที่มุมล่างขวา

2. สำหรับแต่ละปุ่ม ให้เพิ่มข้อจำกัดความสูงประมาณ 75px โดยเลือกส่วนประกอบและคลิกปุ่มเพิ่มข้อจำกัดใหม่ (ปุ่มที่ดูเหมือนเครื่องบินขับไล่แบบผูกเน็คไทของ Star Wars) จากนั้นป้อนความสูงแล้วกด Enter

3. เลือกส่วนประกอบทั้งสามและใส่ไว้ในมุมมองสแต็กโดยคลิกปุ่มฝังในสแต็ก

4. ตอนนี้เปิด Assistant Editor แล้วกด CTRL แล้วลากจากแต่ละส่วนประกอบไปยังโค้ด ViewController เพื่อสร้าง Outlets สำหรับแต่ละส่วนประกอบ

@IBOutlet var imageView: UIImageView!

@IBOutlet กับ openLibraryButton: UIButton! @IBOutlet กับ openCameraButton: UIButton!

5. ตอนนี้ CTRL แล้วลากจากทั้งสองปุ่มเพื่อสร้าง Action เพื่อเปิด UI ของกล้อง/ไลบรารี

6. ในการดำเนินการ Open Library ให้เพิ่มโค้ดต่อไปนี้

@IBAction func openLibrary (_ ผู้ส่ง: ใดก็ได้) {

ให้ imagePicker = UIImagePickerController () imagePicker.delegate = ตนเอง; imagePicker.sourceType =.photoLibrary self.present (imagePicker, ภาพเคลื่อนไหว: จริง, เสร็จสิ้น: ไม่มี) }

7. ในการดำเนินการเปิดกล้อง

@IBAction func openCamera (_ ผู้ส่ง: ใดก็ได้) {

ให้ imagePicker = UIImagePickerController () imagePicker.delegate = self imagePicker.sourceType =.camera; self.present(imagePicker, ภาพเคลื่อนไหว: จริง, เสร็จสิ้น: ไม่มี) }

ขั้นตอนที่ 5: เขียน Cloud Function

เนื่องจากรูปภาพไม่จำเป็นต้องเก็บไว้ในคลาวด์ตลอดไป เราจึงสามารถเขียน Cloud Function เพื่อดำเนินการล้างข้อมูลได้ บริการ cron เช่น cron-job.org สามารถทริกเกอร์สิ่งนี้เป็นฟังก์ชัน HTTP ได้ทุกชั่วโมง

ก่อนอื่นเราต้องติดตั้ง firebase-tools

npm install -g firebase-tools

จากนั้นเรียกใช้ไดเรกทอรีรากของโครงการ

ฐานไฟเริ่มต้น

เลือกฟังก์ชันจากบรรทัดคำสั่งเพื่อเริ่มต้นฟังก์ชันระบบคลาวด์ คุณยังสามารถเปิดใช้งาน firestore ได้หากต้องการกำหนดค่า Firestore ด้วย

จากนั้นเปิด functions/index.js และเพิ่มโค้ดต่อไปนี้ อย่าลืมเปลี่ยน

ไปยังรหัสโปรเจ็กต์ Firebase ของคุณ

ฟังก์ชั่น const = ต้องการ ('ฟังก์ชั่น firebase');

const admin = ต้องการ ('firebase-admin'); admin.initializeApp() exports.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() }) ส่งคืน response.status (200).send('ตกลง') }).catch(err => response.status(500).send(err)) });

การปรับใช้ฟังก์ชั่นคลาวด์นั้นง่ายพอๆ กับการรันคำสั่งนี้

firebase ปรับใช้

จากนั้นที่ cron-job.org ให้สร้างงานเพื่อทริกเกอร์จุดปลายนี้ทุกชั่วโมง จุดสิ้นสุดจะเป็นสิ่งที่ชอบ

us-central1-project_id.cloudfunctions.net/cleanup

ขั้นตอนที่ 6: เรียกใช้แอพ

เรียกใช้แอพบนเครื่องจำลองหรืออุปกรณ์ iOS แล้วเริ่มแชร์รูปภาพ!