Amarengo

Articles and news

Comment créer une extension de partage iOS dans Swift

Publié à l’origine par Scotty Fister le 30 juillet 2016 24 887 lectures

Remarque : Mise à jour pour Swift 4.

Pour une journée de hack au travail, j’ai décidé de m’essayer à la création d’une extension de partage. J’ai découvert qu’il n’y avait pas de tutoriel complet et, par conséquent, j’ai dû rassembler des informations (une grande partie attribuée, étonnamment, à la documentation Apple).

L’objectif

Pour enregistrer une URL de page Web en tant que contenu riche dans notre application, et permettre la configuration de quelques options. Au départ, je pensais qu’une action d’extension était nécessaire — mais il semble que cela soit mieux adapté pour modifier le contenu (comme supprimer les yeux rouges sur une photo en un clic). Il semble que d’autres, y compris Apple, utilisent l’extension de partage pour créer des éléments à la place.

C’est ce que nous aurons construit à la fin:

L’extension terminée

Comme vous pouvez le voir, j’ai un peu personnalisé le design et ajouté ce que l’on appelle un « élément de configuration » qui sont des cellules au bas de la feuille; couramment utilisé pour sélectionner parmi les comptes ou d’autres options. Il est utilisé ici pour sélectionner parmi les « Decks » existants de l’utilisateur sur lesquels enregistrer. Ce que vous ne pouvez pas voir, c’est qu’il exécute également du code JavaScript pour récupérer l’URL actuelle du navigateur, que nous envoyons au serveur plus tard. Nous couvrirons tout cela à l’avance!

Étapes initiales

Créez un nouveau projet ou ouvrez un projet existant auquel vous souhaitez ajouter l’extension. Appuyez ensuite sur Fichier > Nouvelle cible >. Sous l’onglet iOS, sélectionnez Partager l’extension et appuyez sur Suivant. Donnez-lui un nom; j’ai opté pour le simple « ShareExtension ».

Il vous demandera si vous souhaitez activer le schéma. Cela signifie que lorsque vous exécutez l’application, elle vous permettra de vous ouvrir directement dans Safari ou similaire pour tester l’extension, par opposition à votre application principale. Nous voulons cela — appuyez sur Activer.

Testez ce que vous avez jusqu’à présent en exécutant le projet Cmd + R — comme mentionné, il vous donne des options sur l’application à partir de laquelle tester, sélectionnez Safari et appuyez sur Exécuter.

La boîte de dialogue présentée lors de l’exécution d’une extension.

Lorsque Safari s’ouvre, appuyez sur l’icône Partager et le nom de votre extension avec l’icône d’espace réservé devrait apparaître dans la liste. Sinon, appuyez sur Plus et activez-le. En appuyant sur l’icône, vous présenterez l’implémentation par défaut de SLComposeServiceViewController, qui est assez soignée dès la sortie de la boîte.

Obtenir l’URL

La feuille de partage récupère automatiquement le titre de la page et le définit comme corps de texte, mais en général, vous en voudrez plus — que ce soit l’URL ou une image sur la page. Pour cela, vous pouvez demander à Safari d’exécuter un fichier JavaScript pour analyser le document et récupérer tout ce dont nous avons besoin.

Tout d’abord, faites un clic droit sur votre dossier extensions dans Xcode et sélectionnez Nouveau fichier. Vous trouverez Vide à l’intérieur de l’autre onglet, appuyez sur Suivant et nommez le fichier « getURL.js ».

Vous devrez modifier les informations de vos extensions.plist file et dans « NSExtension » il y a un autre dictionnaire appelé « NSExtensionAttributes » — ajoutez une clé « NSExtensionJavaScriptPreprocessingFile » avec la valeur de notre fichier qui vient d’être créé, « getURL » (notez l’absence d’extension).

Ajoutez également une ligne de dictionnaire « NSExtensionActivationRule » qui doit contenir la clé « NSExtensionActivationSupportsWebURLWithMaxCount » avec le numéro 1:

Comment les informations de votre extension.plist doit être considéré comme une liste de propriétés

NSExtensionJavaScriptPreprocessingFile: cela permet à notre application de connaître un fichier JavaScript qui doit être exécuté lors de l’exécution de l’extension.

NSExtensionActivationRule: utilisez ce dictionnaire pour ajouter des clés d’extension d’action qui aident le système à déterminer les types de contenu pour lesquels activer votre extension.

Collez ce qui suit dans « getURL.js »:

Couplé aux clés que nous avons définies ci-dessus, iOS va maintenant rechercher un objet nommé « ExtensionPreprocessingJS » à exécuter au moment de l’exécution. Ceci est expliqué plus en détail dans la documentation d’Apple.

Afin de récupérer les données grattées avec le fichier javascript ci-dessus, vous devrez exécuter ce bloc de code dans le « ShareViewController.fonction viewDidLoad swift:

Vous aurez également besoin de cette importation pour kUTTypePropertyList:

import MobileCoreServices

L’exécution de l’extension maintenant devrait imprimer avec succès l’URL vers la console!

Note latérale: ajoutez l’extrait suivant si vous souhaitez personnaliser la barre de navigation comme je l’ai fait (en remplaçant par votre propre image ou simplement un titre).

Ajout de cellules de configuration

Le passe-partout fourni avec la création de votre extension de partage aura inclus une méthode pour fournir éventuellement des éléments de configuration (les cellules en bas de la feuille de partage)

override func configurationItems() -> ! {

Insérez l’extrait ci-dessous, qui renvoie un tableau de « SLComposeSheetConfigurationItem »:

Exécutez à nouveau votre application et vous verrez une cellule en bas maintenant.

Un modèle pour l’élément de configuration

Créez un modèle de base appelé « Deck.swift », qui est utilisé à l’avance pour transmettre des données entre les contrôleurs de vue.

La vue de table

Dans le gif au début, vous aurez remarqué en appuyant sur la cellule de configuration qu’elle pousse vers une nouvelle vue avec une vue de table. Créez un nouveau fichier qui hérite de « UIViewController » nommé « ShareSelectViewController ».Swift ». Créez une propriété tableview et ajoutez-la à la vue.

J’ai également défini le titre et la couleur du titre pour cette vue, et je préfère conserver des constantes comme les identifiants de cellule dans une structure 🙂

Créer une propriété pour stocker les Decks transmis depuis le contrôleur de vue d’origine:

var userDecks = ()

Et se conformer aux protocoles requis pour tableview:

dans le « ShareViewController.swift « , créez une propriété pour stocker des données factices et remplissez-les dans viewDidLoad:

Enfin, à l’intérieur du tapHandler pour l’élément de configuration que nous avons créé, créez une instance du ShareSelectViewController et faites-la appuyer dessus, en passant également les ponts:

Exécutez l’application. Appuyer sur la cellule de configuration devrait pousser vers la vue de table avec les données factices.

Cependant, vous remarquerez que la cellule de configuration est toujours codée en dur en « Titre du Deck ». Pour avoir cette mise à jour, créez une propriété pour stocker le deck sélectionné et sélectionnez le premier par défaut :

Et mettez à jour la cellule de configuration dans configurationItems() pour l’utiliser:

deck.value = selectedDeck?.title 

Exécutez à nouveau l’application et vous verrez qu’elle a été mise à jour.

Un protocole pour mettre à jour le Deck sélectionné

Vous aurez besoin d’un moyen de revenir au ShareViewController lorsqu’un nouveau Deck est exploité et de le faire mettre à jour l’interface utilisateur. Un protocole suffira. Ajoutez ce qui suit à votre ShareSelectViewController:

Enfin, conformez le ShareViewController au protocole qui vient d’être créé et assurez-vous que le délégué du ShareSelectViewController est défini sur self :

Le Deck sélectionné est mis à jour et les éléments de configuration sont rechargés pour mettre à jour la valeur. Ensuite, nous sautons pour revenir à l’écran principal.

Exécutez l’application et maintenant vous devriez pouvoir changer de decks qui se mettront à jour pour afficher le deck correctement sélectionné 🙂

Terminer

Il ne reste plus qu’à envoyer les informations collectées à votre serveur ou à votre application pour faire quelque chose, ce que vous pouvez faire dans une autre méthode standard:

override func didSelectPost()

Je n’entrerai pas dans les détails à ce sujet, mais j’ai utilisé une NSURLSession pour poster sur notre serveur. J’ai également remplacé les données factices par de vrais decks en créant un groupe d’applications et en utilisant un NSUserDefaults partagé pour stocker et récupérer des données précédemment récupérées dans l’application iOS principale.

let userDefaults = NSUserDefaults(suiteName: "some.group.name")
let decks = userDefaults?.objectForKey("userDecks") as? NSArray

Enfin, vous remarquerez que mon extension est nommée « Vurb » dans la boîte de dialogue d’action et possède une icône. Vous pouvez définir une icône en suivant ce post SO. Et pour changer le nom, changez simplement « Nom d’affichage » dans les paramètres du projet pour l’extension.

C’est tout, si vous avez trouvé cela utile, aidez les autres à le trouver en le recommandant.

Vous pouvez voir le projet dans son intégralité ici.

Tags

Rejoignez Hacker Noon

Créez votre compte gratuit pour débloquer votre expérience de lecture personnalisée.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.