تطبيق Proximity Photo Sharing IOS: 6 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:40

في هذا الدليل ، سننشئ تطبيق iOS باستخدام Swift يسمح لك بمشاركة الصور مع أي شخص قريب ، دون الحاجة إلى اقتران الجهاز.

سنستخدم Chirp Connect لإرسال البيانات باستخدام الصوت ، و Firebase لتخزين الصور في السحابة.

يخلق إرسال البيانات بالصوت تجربة فريدة حيث يمكن بث البيانات إلى أي شخص داخل نطاق السمع.

الخطوة 1: متطلبات التثبيت

Xcode

التثبيت من متجر التطبيقات.

CocoaPods

sudo جوهرة تثبيت cocoapods

Chirp Connect iOS SDK

قم بالتسجيل في admin.chirp.io

الخطوة 2: إعداد المشروع

1. إنشاء مشروع Xcode.

2. سجّل الدخول إلى Firebase وأنشئ مشروعًا جديدًا.

قم بتمكين Firestore بالنقر فوق قسم قاعدة البيانات وتحديد Cloud Firestore. انقر فوق الوظائف لتمكين وظائف السحابة أيضًا.

3. قم بتشغيل إعداد تطبيق iOS الخاص بك في صفحة نظرة عامة على المشروع

ستحتاج إلى معرف الحزمة من علامة التبويب العامة في إعدادات مشروع Xcode. بمجرد إنشاء Podfile ، ستحتاج إلى إضافة التبعيات التالية ، قبل تشغيل تثبيت pod.

# قرون للمشروع

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

4. قم بتنزيل أحدث إصدار من Chirp Connect iOS SDK من admin.chirp.io/downloads

5. اتبع الخطوات الموجودة على developer.chirp.io لدمج Chirp Connect في Xcode.

انتقل إلى Getting Started / iOS. ثم قم بالتمرير لأسفل واتبع تعليمات إعداد Swift ، وسيتضمن ذلك استيراد إطار العمل وإنشاء رأس تجسير.

الآن اكتمل الإعداد ، يمكننا البدء في كتابة بعض التعليمات البرمجية! من الجيد التحقق من إنشاءات مشروعك في كل مرحلة من مراحل الإعداد.

الخطوة 3: اكتب كود IOS

1. قم باستيراد Firebase إلى ViewController الخاص بك وقم بتوسيع NSData لتشمل امتداد hexString ، حتى نتمكن من تحويل حمولات Chirp Connect إلى سلسلة سداسية عشرية. (سيتوفر Chirp Connect عالميًا بفضل رأس التجسير).

استيراد UIKit

استيراد Firebase

بيانات التمديد {

var hexString: String {return map {String (format: "٪ 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.

connect = ChirpConnect (appKey: APP_KEY، andSecret: APP_SECRET) إذا سمح بالاتصال = connect {connect.getLicenceString {(الترخيص: String ؟، error: Error؟) في حالة الخطأ == لا شيء {if let الترخيص = الترخيص {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 {print ("Error:٪ @"، error.localizedDescription)} else {self.imageView.image = UIImage (data: imageData!)}}} else {print ("Decode failure")؛ }}}}

4. قم الآن بإضافة الكود لإرسال بيانات الصورة بمجرد تحديدها في واجهة المستخدم.

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

{let imageData = info [UIImagePickerControllerOriginalImage] كـ؟ اسمحوا UIImage البيانات: البيانات = UIImageJPEGRepresentation (imageData !، 0.1)! self.imageView.image = imageData let metadata = StorageMetadata () metadata.contentType = "image / jpeg" إذا سمح بالاتصال = connect {let key: Data = connect.randomPayload (withLength: 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 (animated: true، complete: nil)}

ملاحظة: ستحتاج إلى إضافة بيانات الخصوصية - وصف استخدام مكتبة الصور ، والخصوصية - وصف استخدام مكتبة الصور والخصوصية - وصف استخدام الميكروفون إلى Info.plist لمنح أذونات لاستخدام الكاميرا ومكتبة الصور والميكروفون.

الخطوة 4: إنشاء واجهة مستخدم

انتقل الآن إلى ملف Main.storyboard لإنشاء واجهة مستخدم.

1. اسحب عبر ImageView وزرين إلى Storyboard من لوحة Object Library في الركن الأيمن السفلي.

2. لكل زر قم بإضافة قيد ارتفاع يبلغ حوالي 75 بكسل عن طريق تحديد المكون والنقر فوق الزر "إضافة قيود جديدة" (الزر الذي يشبه مقاتلة حرب النجوم) ، ثم أدخل الارتفاع واضغط على Enter.

3. حدد جميع المكونات الثلاثة وضعها في عرض مكدس بالنقر فوق الزر "تضمين في المكدس".

4. افتح محرر المساعد الآن ، واضغط على CTRL واسحب من كل مكون إلى رمز ViewController ، لإنشاء منافذ بيع لكل مكون.

IBOutlet var imageView: UIImageView!

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

5. الآن اضغط على CTRL واسحب من كلا الزرين لإنشاء إجراء لفتح واجهة مستخدم الكاميرا / المكتبة.

6. في إجراء Open Library ، أضف الكود التالي

IBAction func openLibrary (_ المرسل: أي) {

دع imagePicker = UIImagePickerController () imagePicker.delegate = self ؛ imagePicker.sourceType =.photoLibrary self.present (imagePicker، animated: true، complete: nil)}

7. في إجراء فتح الكاميرا

IBAction func openCamera (_ المرسل: أي) {

دع imagePicker = UIImagePickerController () imagePicker.delegate = self imagePicker.sourceType =.camera؛ self.present (imagePicker، animated: true، complete: nil)}

الخطوة 5: اكتب وظيفة السحابة

نظرًا لأنه لا يلزم تخزين الصور في السحابة إلى الأبد ، يمكننا كتابة وظيفة السحابة لإجراء التنظيف. يمكن تشغيل هذا كوظيفة HTTP كل ساعة بواسطة خدمة cron مثل cron-job.org.

بادئ ذي بدء ، نحتاج إلى تثبيت أدوات Firebase

npm install -g firebase-tools

ثم من الدليل الجذر للمشروع تشغيل

الحرف الأول من Firebase

حدد الوظائف من سطر الأوامر لتهيئة وظائف السحابة. يمكنك أيضًا تمكين firestore إذا كنت تريد أيضًا تكوين Firestore.

ثم افتح الوظائف / index.js وأضف الكود التالي. تذكر أن تتغير

إلى معرف مشروع Firebase.

وظائف const = تتطلب ('وظائف Firebase') ؛

const admin = تتطلب ('firebase-admin') ؛ admin.initializeApp () export.cleanup = jobs.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 ('OK')}).catch (err => response.status (500).send (err))}) ؛

يعد نشر وظائف السحابة أمرًا بسيطًا مثل تشغيل هذا الأمر.

نشر Firebase

ثم في cron-job.org ، أنشئ وظيفة لتشغيل نقطة النهاية هذه كل ساعة. ستكون نقطة النهاية مثل

us-central1-project_id.cloudfunctions.net/cleanup

الخطوة 6: قم بتشغيل التطبيق

قم بتشغيل التطبيق على جهاز محاكاة أو جهاز iOS ، وابدأ في مشاركة الصور!