Application IOS de partage de photos de proximité : 6 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Dans cette instructable, nous allons créer une application iOS avec Swift qui vous permet de partager des photos avec toute personne à proximité, sans qu'aucun appareil ne soit nécessaire.

Nous utiliserons Chirp Connect pour envoyer des données à l'aide du son et Firebase pour stocker les images dans le cloud.

L'envoi de données avec le son crée une expérience unique où les données peuvent être diffusées à toute personne à portée d'audition.

Étape 1: Configuration requise pour l'installation

Xcode

Installez depuis l'App Store.

CocoaPods

sudo gem installer des cocopodes

Kit de développement logiciel (SDK) iOS Chirp Connect

Inscrivez-vous sur admin.chirp.io

Étape 2: Configurer le projet

1. Créez un projet Xcode.

2. Connectez-vous à Firebase et créez un nouveau projet.

Activez Firestore en cliquant dans la section Base de données et en sélectionnant Cloud Firestore. Cliquez sur Functions pour activer également Cloud Functions.

3. Exécutez Configurer votre application iOS sur la page Aperçu du projet

Vous aurez besoin de l'identifiant de l'ensemble de l'onglet Général dans les paramètres de votre projet Xcode. Une fois le fichier Podfile créé, vous devrez ajouter les dépendances suivantes avant d'exécuter l'installation du pod.

# Pods pour le projet

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

4. Téléchargez le dernier SDK Chirp Connect iOS à partir de admin.chirp.io/downloads

5. Suivez les étapes sur developer.chirp.io pour intégrer Chirp Connect dans Xcode.

Accédez à Mise en route / iOS. Faites ensuite défiler vers le bas et suivez les instructions de configuration de Swift. Cela impliquera l'importation du framework et la création d'un en-tête de pontage.

Maintenant que l'installation est terminée, nous pouvons commencer à écrire du code ! C'est une bonne idée de vérifier les builds de votre projet à chaque étape de la configuration.

Étape 3: écrivez le code IOS

1. Importez Firebase dans votre ViewController et étendez NSData pour inclure une extension hexString, afin que nous puissions convertir les charges utiles de Chirp Connect en une chaîne hexadécimale. (Chirp Connect sera disponible dans le monde entier grâce à l'en-tête de pontage).

importer UIKit

importer Firebase

données d'extension {

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

2. Ajoutez des délégués ImagePicker à votre ViewController et déclarez une variable ChirpConnect appelée connect.

classe ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

var connecter: ChirpConnect ? remplacer la fonction viewDidLoad() { super.viewDidLoad() …

3. Après super.viewDidLoad, initialisez Chirp Connect et configurez le rappel reçu. Dans le rappel reçu, nous récupérerons l'image de Firebase à l'aide de la charge utile reçue et mettrons à jour ImageView. Vous pouvez obtenir votre APP_KEY et APP_SECRET sur 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("Décodage échoué"); } } } }

4. Ajoutez maintenant le code pour envoyer les données d'image une fois qu'il a été sélectionné dans l'interface utilisateur.

func imagePickerController (_ sélecteur: UIImagePickerController, didFinishPickingMediaWithInfo info: [String: Any])

{ laissez imageData = info[UIImagePickerControllerOriginalImage] comme ? 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) { (métadonnées, erreur) in if let error = error { print(error.localizedDescription) } else { connect.send(key) } } } self.dismiss(animé: vrai, achèvement: nil) }

Remarque: vous devrez ajouter des déclarations Confidentialité - Description de l'utilisation de la bibliothèque de photos, Confidentialité - Description de l'utilisation de la bibliothèque de photos et Confidentialité - Description de l'utilisation du microphone à votre Info.plist pour accorder les autorisations d'utilisation de l'appareil photo, de la bibliothèque de photos et du microphone.

Étape 4: créer une interface utilisateur

Accédez maintenant au fichier Main.storyboard pour créer une interface utilisateur.

1. Faites glisser sur une vue d'image et deux boutons vers le storyboard à partir du panneau Bibliothèque d'objets dans le coin inférieur droit.

2. Pour chaque bouton, ajoutez une contrainte de hauteur d'environ 75 pixels en sélectionnant le composant et en cliquant sur le bouton Ajouter de nouvelles contraintes (celui qui ressemble à un chasseur de cravate Star Wars), puis entrez la hauteur et appuyez sur Entrée.

3. Sélectionnez les trois composants et placez-les dans une vue de pile en cliquant sur le bouton Intégrer dans la pile.

4. Ouvrez maintenant l'éditeur assistant, appuyez sur CTRL et faites glisser de chaque composant vers le code ViewController, pour créer des prises pour chaque composant.

@IBOutlet var imageView: UIImageView !

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

5. Maintenant, CTRL et faites glisser à partir des deux boutons pour créer une action pour ouvrir l'interface utilisateur de la caméra/de la bibliothèque.

6. Dans l'action Ouvrir la bibliothèque, ajoutez le code suivant

@IBAction func openLibrary(_ sender: Any) {

let imagePicker = UIImagePickerController() imagePicker.delegate = self; imagePicker.sourceType =.photoLibrary self.present(imagePicker, animation: true, achèvement: nil) }

7. Dans l'action Ouvrir la caméra

@IBAction func openCamera(_ sender: Any) {

let imagePicker = UIImagePickerController() imagePicker.delegate = self imagePicker.sourceType =.camera; self.present(imagePicker, animation: vrai, achèvement: nil) }

Étape 5: Écrire une fonction cloud

Comme les photos n'ont pas besoin d'être stockées dans le cloud pour toujours, nous pouvons écrire une fonction cloud pour effectuer le nettoyage. Cela peut être déclenché en tant que fonction HTTP toutes les heures par un service cron tel que cron-job.org.

Tout d'abord, nous devons installer firebase-tools

npm install -g firebase-tools

Ensuite, à partir du répertoire racine du projet, exécutez

initialisation de la base de feu

Sélectionnez des fonctions à partir de la ligne de commande pour initialiser les fonctions cloud. Vous pouvez également activer Firestore si vous souhaitez également configurer Firestore.

Ouvrez ensuite functions/index.js et ajoutez le code suivant. N'oubliez pas de changer

à l'ID de votre projet Firebase.

fonctions const = require('firebase-functions');

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

Le déploiement de fonctions cloud est aussi simple que l'exécution de cette commande.

firebase déployer

Ensuite, sur cron-job.org, créez une tâche pour déclencher ce point de terminaison toutes les heures. Le point final sera quelque chose comme

us-central1-project_id.cloudfunctions.net/cleanup

Étape 6: Exécutez l'application

Exécutez l'application sur un simulateur ou un appareil iOS et commencez à partager des photos !