Hypertopic
Share an item on Instagram
Description
We are the team of @Hypertopic/cite-du-vitrail, we want to give the possibility to share an item on Instagram to our user. This feature is available with Facebook and Twitter. We will provide an additional web page for the explanation of how to use this feature.
Phase 1
- [x] Scenarios (Gherkin)
- [x] Mockups
- [x] Implementation strategy
Phase 2
- [ ] Acceptance tests (Capybara)
- [ ] Implementation
Phase 3
- [ ] Screencast
@aamina12 N'oubliez pas d'argumenter en quoi cette fonctionnalité serait souhaitable pour le projet @Hypertopic/cite-du-vitrail
Projet Cité du vitrail (orienté communication) Cette fonctionnalité permettra à l'utilisateur de partager un vitrail qu'il a aimé sur Instagram. Ainsi, il fera découvrir ce vitrail autour de soi, ça va donc attirer d'autres utilisateurs à venir visiter le site et découvrir d'autres vitraux.
Projet Cité du Vitrail (Binôme Aamina/Hugo) : @PSalembier @benel Voici le maquettage réalisé sur Adobe XD de ce ticket.
Maquettage ticket Instagram Aamina-Hugo.zip
Groupe de @YaellePihan et moi même, notre proposition de maquette réalisée sur Adobe XD pour répondre à la problématique soulevée par ce ticket.
maquette_share_item_instagram_Yaëlle_Loïc.zip
@PSalembier @benel
Les 3 images principales ;
Clic sur le bouton "Instagram"
Affichage pop-up pour indiquer que le téléchargement du vitrail est effectué et Clic sur le bouton "Instagram" pour partager
Clic sur le bouton "Ajouter une nouvelle publication"
Très bonne idée d'avoir mis le scénario complet qui se termine par l'affichage dans Instagram.
- Mais du coup, ça prépare juste la publication c'est ça ? Il y a une sorte de zone privée dans Instagram ?
- Est-ce que vous avez un moyen d'envoyer aussi à Instagram un lien ou une partie de la description ?
* Mais du coup, ça prépare juste la publication c'est ça ? Il y a une sorte de zone privée dans Instagram ? * Est-ce que vous avez un moyen d'envoyer aussi à Instagram un lien ou une partie de la description ?
- Cela permet de télécharger l'image sur son smartphone et ensuite on peut la publier manuellement sur son compte Instagram (story ou post). Pour la zone privé il y en a pas vraiment, l’utilisateur a la possibilité de mettre son compte en mode privé (juste ses abonnés peuvent voir ses publications sinon tout le mode y a accès (mode public du compte))
- Pour la partie description c'est aussi à l'utilisateur de la rajouter, par contre on peut rajouter un descriptif pré-fait sur porphyry que l'utilisateur pourra copié-collé sur Instagram.
Cela permet de télécharger l'image sur son smartphone et ensuite on peut la publier manuellement sur son compte Instagram (story ou post). Pour la zone privé il y en a pas vraiment, l’utilisateur a la possibilité de mettre son compte en mode privé (juste ses abonnés peuvent voir ses publications sinon tout le mode y a accès (mode public du compte))
OK, je vois.
Pour la partie description c'est aussi à l'utilisateur de la rajouter, par contre on peut rajouter un descriptif pré-fait sur porphyry que l'utilisateur pourra copié-collé sur Instagram.
Oui, pourquoi pas... Notez que ça pourrait être une manière aussi de référencer la plateforme avec une URI et donc d'avoir aussi un intérêt pour nous avec la venue de contributeurs éventuels (cf. matrice des motivations).
oui bien sur, on avait aussi pensé à inciter l'utilisateur de mettre l'URL du vitrail dans la description du post instagram, et donc d'attirer de nouvelles personnes.
Voici une version des scénarios, réalisée avec @Lan-MU623 , pour partager un item sur instagram @benel :
#language: fr
Fonctionnalité: Partager un item sur Instagram
Scénario: téléchargement de l'image
Soit "AXN 009" un item ouvert Quand l'utilisateur clique sur le bouton instagram Et la pop-up de téléchargement de l'image apparaît Et l'utilisateur clique sur le bouton "télécharger l'item" Alors l'item "AXN 009" est téléchargé
Scénario: Entrer dans Instagram
Soit "AXN 009" un item téléchargé Quand l'utilisateur clique sur l'icône Instagram Alors l'application Instagram s'ouvre
Scénario: Créer une publication sur Instagram
Soit la page Instagram ouverte Quand l'utilisateur clique sur l'icône "publier" Et sélectionne l'item précedémment téléchargé Alors l'item est partagé sur Instagram
Stratégie d'implémentation
Quelle partie du code sera impactée (classes, méthodes) ?
La fonctionnalité “Share an item on Instagram” ne va pas énormément impacter le code. Effectivement, le code actuel ne sera pas modifié. On va uniquement ajouter un bout de code concernant la création d’un bouton permettant de télécharger un item que l’on pourra par la suite partager sur Instagram.
Cette implémentation sera efficace uniquement sur mobile, car on ne peut pas partager de médias sur Instagram via ordinateur.
Voici ci-dessus le code pour créer un bouton :
lien vers le code : https://github.com/Hypertopic/Porphyry/blob/v7/src/components/portfolioPage/Button.jsx
Le bouton devra se situer sous l’image de l’item, vers le plugin Disqus. Le code associé pourra être placé à deux endroits :
-Soit dans la variable Comments, qui retourne le plugin Disqus :
lien vers le code : https://github.com/Hypertopic/Porphyry/blob/v7/src/components/itemPage/Item.jsx
-Soit directement dans la balise div qui contient cette variable Comments :
lien vers le code : https://github.com/Hypertopic/Porphyry/blob/v7/src/components/itemPage/Item.jsx
Y aura-t-il des difficultés d'un point de vue algorithmique ? Avez-vous des pistes pour les résoudre ?
Pour cette fonctionnalité, la principale difficulté que l’on peut rencontrer, d’un point de vue algorithmique, est le fait de trouver un moyen efficace pour pouvoir télécharger une image en React. Pour cela, nous avons trouvé deux manières de le faire. La première méthode utilise un “arrayBuffer” et la deuxième méthode fonctionne sans le “arrayBuffer”.
(source : https://stackoverflow.com/questions/57056741/how-to-download-image-in-reactjs)
Première méthode :
Deuxième méthode :
On a également constaté que l’on peut rencontrer des difficultés pour placer un bouton exactement à l’endroit que l’on veut mais aussi pour travailler sur mobile. Pour cela, nous avons envisagé d’utiliser ce package React “react-mobile-app” qui permet de programmer sur une interface mobile.
Les données dont vous avez besoin sont-elles déjà chargées par la page ? Si oui, quelle est la structure des données et comment allez-vous récupérer précisément celles qui vous intéressent ? Si non, quelle sera la requête la plus efficace et comment allez-vous récupérer dans la structure de données précisément celles qui vous intéressent ?
Les données que nous allons utiliser sont chargées par la page, elles apparaissent avec la structure suivante : this.state.item.resource (source (ligne 71): https://github.com/Hypertopic/Porphyry/blob/v7/src/components/itemPage/Item.jsx). Pour récupérer ces données nous allons utiliser leur “uri”, comme dans le code ci-dessus :
Voici le code source complet : https://github.com/Hypertopic/Porphyry/blob/v7/src/components/itemPage/Resource.jsx
Existe-t-il des bibliothèques qui pourraient simplifier l'implémentation ? Nous avons pu trouver sur npmjs.com, la bibliothèque suivante : image-downloader : permet de télécharger une image, depuis un URL donné, sur le disque local. Les options obligatoires à mentionner sont “url” (l’URL de l’image) et “dest” (la destination de l’image). D’autres options tels que “extractFilename”, “headers” et “timeout” sont à mentionner si besoin. sources : https://www.npmjs.com/package/image-downloader https://www.codegrepper.com/code-examples/javascript/download+image+in+reactjs https://aboutreact.com/download-image-in-react-native/
Comme dans notre séance sur le développement, vous pouvez tester des petits bouts de code indépendants et les associer à votre stratégie (avec éventuellement des exemples de données, voire même des temps d'exécution).
Doit-on intégrer des services extérieurs (ex : cartographie) ? De quelles fonctionnalités en particulier aura-t-on besoin ? Est-ce que le service choisi les propose ou doit-on passer chez un concurrent ? Comment s'utilisent ces fonctionnalités ? avec quels paramètres ? Nous n’avons pas besoin d’intégrer des services extérieurs, l’objectif étant simplement de télécharger l’image d’un item pour ensuite pouvoir le mettre en ligne via Instagram.
Des étapes préalables de développement, testables, sont-elles envisageables afin de diminuer la complexité de la livraison ? Refactoring (livrable à part entière, iso fonctionnel) ? Code développable et testable de manière externe au logiciel ? Étape du scénario (non livrable en tant que tel mais dont l'effet peut être testé) ? Nous ne pouvons pas tellement diminuer la complexité de la livraison, il n’y aura donc pas d’étapes préalables de développement.
@benel
@manacheh Merci pour cette première version de stratégie d'implémentation.
Tout d'abord quelques conseils de forme :
- plutôt que des copies d'écran, n'hésitez pas à intégrer directement du code (cf. documentation à propos de la coloration syntaxique sur GitHub), ça facilitera d'éventuels copiés-collés,
- si vous l'avez fait à deux, n'oubliez pas de mentionner le co-auteur.
Voici ci-dessus le code pour créer un bouton
Diantre... Ce serait bien compliqué si c'était le cas...
Quand vous avez un doute sur la correspondance entre un nom de composant et son apparence, n'hésitez pas à utiliser l'extension React Developper Tools.
Ce que vos camarades ont appelé "Button" (je suis d'accord avec vous que le nom n'était pas très bien choisi) c'est ceci :
Nous avons pu trouver sur npmjs.com, la bibliothèque suivante : image-downloader : permet de télécharger une image, depuis un URL donné, sur le disque local. Les options obligatoires à mentionner sont “url” (l’URL de l’image) et “dest” (la destination de l’image).
OK. Ça semble pertinent.
Et pour faciliter la saisie du texte (copyright à partir des attributs, tags à partir des rubriques), avez-vous des pistes ?
Tout d'abord, merci de votre réponse. Cette stratégie d'implémentation a été effectué avec @aamina12 . Pour le boutton, effectivement, le code de ce dernier ressemblerait plutôt à ça : https://react.school/ui/button Concernant la saisie du texte, il me semble qu'elle n'était pas prévue pour ce ticket.
@manacheh
Concernant la saisie du texte, il me semble qu'elle n'était pas prévue pour ce ticket.
Je me suis mal exprimé... Je parlais de l'intégration dans vos commentaires de code informatique.
Exemple :
let uri = props.href && props.href[0];
L'intéret c'est que l'on peut faire du copier-coller, le chercher dans la page, etc.
Voici une version des scénarios, réalisée avec @Lan-MU623 , pour partager un item sur instagram @benel :
#language: fr
Fonctionnalité: Partager un item sur Instagram
Scénario: téléchargement de l'image
Soit "AXN 009" un item ouvert Quand l'utilisateur clique sur le bouton instagram Et la pop-up de téléchargement de l'image apparaît Et l'utilisateur clique sur le bouton "télécharger l'item" Alors l'item "AXN 009" est téléchargé
Scénario: Entrer dans Instagram
Soit "AXN 009" un item téléchargé Quand l'utilisateur clique sur l'icône Instagram Alors l'application Instagram s'ouvre
Scénario: Créer une publication sur Instagram
Soit la page Instagram ouverte Quand l'utilisateur clique sur l'icône "publier" Et sélectionne l'item précedémment téléchargé Alors l'item est partagé sur Instagram
@benel nous avons modifié nos scénarios selon les conseils que vous avez donné pour les scénarios de Facebook. Voici la nouvelle version :
#language: fr
Fonctionnalité: Partager un item sur Instagram
Scénario: Partager un item sur Instagram
Soit "AXN 009" un item ouvert Quand l'utilisateur partage un item sur Instagram Alors l'item "AXN 009" est téléchargé Et l'application Instagram s'ouvre Et l'utilisateur publie l'item
Voici notre deuxième version de la stratégie d'implémentation, toujours effectuée avec @aamina12 :
Stratégie d'implémentation
Quelle partie du code sera impactée (classes, méthodes) ? La fonctionnalité “Share an item on Instagram” ne va pas énormément impacter le code. Effectivement, le code actuel ne sera pas modifié. On va ajouter un bout de code concernant la création de deux boutons : un bouton permettant de télécharger un item que l’on pourra par la suite partager sur Instagram ainsi qu’un bouton permettant de copier les caractéristiques textuelles de l’item afin de les mettre en description sur Instagram. Cette implémentation sera efficace uniquement sur mobile, car on ne peut pas partager de médias sur Instagram via ordinateur. Voici ci-dessus le code pour créer un bouton : https://react.school/ui/button Les boutons devront se situer sous l’image de l’item, vers le plugin Disqus. Le code associé pourra être placé à deux endroits : -Soit dans la variable Comments, qui retourne le plugin Disqus :
const Comments = React.memo((props) => {
let config = {
identifier: props.item.id,
title: props.item.name
};
lien vers le code : https://github.com/Hypertopic/Porphyry/blob/v7/src/components/itemPage/Item.jsx
-Soit directement dans la balise div qui contient cette variable Comments :
<div className="col-md-8 p-4">
<div className="Subject">
<h2 className="h4 font-weight-bold text-center">{name}</h2>
<Resource href={this.state.item.resource} />
</div>
<Comments appId={this.state.disqus} item={this.state.item} />
</div>
lien vers le code : https://github.com/Hypertopic/Porphyry/blob/v7/src/components/itemPage/Item.jsx
Y aura-t-il des difficultés d'un point de vue algorithmique ? Avez-vous des pistes pour les résoudre ? Pour cette fonctionnalité, la principale difficulté que l’on peut rencontrer, d’un point de vue algorithmique, est le fait de trouver un moyen efficace pour pouvoir télécharger une image en React. Pour cela, nous avons trouvé deux manières de le faire. La première méthode utilise un “arrayBuffer” et la deuxième méthode fonctionne sans le “arrayBuffer”. (source : https://stackoverflow.com/questions/57056741/how-to-download-image-in-reactjs) Première méthode :
function App() {
const download = e => {
console.log(e.target.href);
fetch(e.target.href, {
method: "GET",
headers: {}
})
.then(response => {
response.arrayBuffer().then(function(buffer) {
const url = window.URL.createObjectURL(new Blob([buffer]));
const link = document.createElement("a");
link.href = url;
link.setAttribute("download", "image.png"); //or any other extension
document.body.appendChild(link);
link.click();
});
})
.catch(err => {
console.log(err);
});
};
return (
<div className="App">
<a
href="https://upload.wikimedia.org/wikipedia/en/6/6b/Hello_Web_Series_%28Wordmark%29_Logo.png"
download
onClick={e => download(e)}
>
<i className="fa fa-download" />
download
</a>
</div>
);
}
Deuxième méthode :
function App() {
const download = () => {
var element = document.createElement("a");
var file = new Blob(
[
"https://timesofindia.indiatimes.com/thumb/msid-70238371,imgsize-89579,width-400,resizemode-4/70238371.jpg"
],
{ type: "image/*" }
);
element.href = URL.createObjectURL(file);
element.download = "image.jpg";
element.click();
};
return (
<div className="App">
<a
href="https://timesofindia.indiatimes.com/thumb/msid-70238371,imgsize-89579,width-400,resizemode-4/70238371.jpg"
download
onClick={() => download()}
>
<i className="fa fa-download" />
download
</a>
</div>
);
}
On a également constaté que l’on peut rencontrer des difficultés pour placer un bouton exactement à l’endroit que l’on veut mais aussi pour travailler sur mobile. Pour cela, nous avons envisagé d’utiliser ce package React “react-mobile-app” qui permet de programmer sur une interface mobile. Concernant la saisie du texte (copyright à partir des attributs, tags à partir des rubriques), nous avons pensé à utiliser le copié-collé. Nous allons utiliser un bouton permettant de copier les attributs et de les afficher en tant que hashtag sous l’image téléchargée. Pour cela, nous allons récupérer le nom, les attributs et les points de vue d'un item grâce aux getters afin de créer de nouvelles variables contenant ses getters avec le hashtag. Puis ces variables seront affichées sur Instagram, car elles ont été copiées par le bouton “Copier”, dans la description de l’image.
Les données dont vous avez besoin sont-elles déjà chargées par la page ? Si oui, quelle est la structure des données et comment allez-vous récupérer précisément celles qui vous intéressent ? Si non, quelle sera la requête la plus efficace et comment allez-vous récupérer dans la structure de données précisément celles qui vous intéressent ?
Les données que nous allons utiliser sont chargées par la page, elles apparaissent avec la structure suivante : this.state.item.resource (source (ligne 71): https://github.com/Hypertopic/Porphyry/blob/v7/src/components/itemPage/Item.jsx). Pour récupérer ces données nous allons utiliser leur “uri”, comme dans le code ci-dessus :
let uri = props.href && props.href[0];
if (!uri) return null;
let fileName = uri.match(URI_SEGMENT).slice(-1)[0];
switch (getMediaType(uri)) {
case 'image': return (
<div className="p-3">
<a href={uri} target="_blank" className="cursor-zoom"
rel="noopener noreferrer">
<img src={uri} alt="fileName" />
</a>
</div>
);
default: return (
<div className="p-3">
<a href={uri} className="btn btn-light" > {fileName} </a>
</div>
);
}
Voici le code source complet : https://github.com/Hypertopic/Porphyry/blob/v7/src/components/itemPage/Resource.jsx Concernant les données des caractéristiques de l’item, celles-ci se trouvent dans trois variables :
let name = getString(this.state.item.name);
let attributes = this._getAttributes();
let viewpoints = this._getViewpoints();
Le code : https://github.com/Hypertopic/Porphyry/blob/v7/src/components/itemPage/Item.jsx Nous devrons donc récupérer ces variables et les ‘’formater’’ afin que les caractéristiques soient présentables une fois collées sur Instagram. Pour cela, nous avons pensé utiliser la RegExp : en effet, lorsque l’on regarde plusieurs items, on remarque qu’ils n’ont pas toujours les mêmes attributs. La RegExp permettra donc de trouver plus facilement chaque attribut spécifique pour le mettre en description sur Instagram.
Existe-t-il des bibliothèques qui pourraient simplifier l'implémentation ? Nous avons pu trouver sur npmjs.com, la bibliothèque suivante : image-downloader : permet de télécharger une image, depuis un URL donné, sur le disque local. Les options obligatoires à mentionner sont “url” (l’URL de l’image) et “dest” (la destination de l’image). D’autres options telles que “extractFilename”, “headers” et “timeout” sont à mentionner si besoin. sources :
-
https://www.npmjs.com/package/image-downloader
-
https://www.codegrepper.com/code-examples/javascript/download+image+in+reactjs
-
https://aboutreact.com/download-image-in-react-native/
Comme dans notre séance sur le développement, vous pouvez tester des petits bouts de code indépendants et les associer à votre stratégie (avec éventuellement des exemples de données, voire même des temps d'exécution). Doit-on intégrer des services extérieurs (ex : cartographie) ? De quelles fonctionnalités en particulier aura-t-on besoin ? Est-ce que le service choisi les propose ou doit-on passer chez un concurrent ? Comment s'utilisent ces fonctionnalités ? avec quels paramètres ? Nous n’avons pas besoin d’intégrer des services extérieurs, l’objectif étant simplement de télécharger l’image d’un item pour ensuite pouvoir le mettre en ligne via Instagram.
Des étapes préalables de développement, testables, sont-elles envisageables afin de diminuer la complexité de la livraison ? Refactoring (livrable à part entière, iso fonctionnel) ? Code développable et testable de manière externe au logiciel ? Étape du scénario (non livrable en tant que tel mais dont l'effet peut être testé) ? Nous ne pouvons pas tellement diminuer la complexité de la livraison, il n’y aura donc pas d’étapes préalables de développement.
@benel
@manacheh @aamina12
Nous allons utiliser un bouton permettant de copier les attributs et de les afficher en tant que hashtag sous l’image téléchargée.
Est-ce que vous avez fait des recherches sur la manière d'implémenter un tel bouton (qui copie dans le presse-papier un texte qui n'est pas affiché dans la page mais généré). A priori, comme ça, ça ne me semble pas trivial (notamment pour des raisons de sécurité, de compatibilité entre navigateurs...). Si ?
Voici une version des scénarios, réalisée avec @Lan-MU623 , pour partager un item sur instagram @benel : #language: fr Fonctionnalité: Partager un item sur Instagram Scénario: téléchargement de l'image Soit "AXN 009" un item ouvert Quand l'utilisateur clique sur le bouton instagram Et la pop-up de téléchargement de l'image apparaît Et l'utilisateur clique sur le bouton "télécharger l'item" Alors l'item "AXN 009" est téléchargé Scénario: Entrer dans Instagram Soit "AXN 009" un item téléchargé Quand l'utilisateur clique sur l'icône Instagram Alors l'application Instagram s'ouvre Scénario: Créer une publication sur Instagram Soit la page Instagram ouverte Quand l'utilisateur clique sur l'icône "publier" Et sélectionne l'item précedémment téléchargé Alors l'item est partagé sur Instagram
@benel nous avons modifié nos scénarios selon les conseils que vous avez donné pour les scénarios de Facebook. Voici la nouvelle version :
#language: fr
Fonctionnalité: Partager un item sur Instagram
Scénario: Partager un item sur Instagram
Soit "AXN 009" un item ouvert Quand l'utilisateur partage un item sur Instagram Alors l'item "AXN 009" est téléchargé Et l'application Instagram s'ouvre Et l'utilisateur publie l'item
@benel je ne suis pas sûr que vous ayez vu nos scénarios, je me permets donc de les remettre ci-dessus
@Quentin-UTT @Lan-MU623
Merci pour cette nouvelle version de votre scénario.
Un petit conseil pratique pour commencer : pensez à utiliser la fonctionnalité de GitHub pour inclure du code avec coloration syntaxique. C'est avec trois backquotes suivi du nom du langage. Ça devrait ressembler à ça :
Fonctionnalité: Machiner un truc
Scénario:
Soit "Truc" un truc
Quand on machine "Truc"
Alors "Truc" est machiné
Quand l'utilisateur partage un item sur Instagram
C'est effectivement comme ça que l'on fait normalement : reformuler l'intitulé de la fonctionnalité dans le quand. Ce qui est un peu particulier dans le cas d'Instagram, c'est que vous ne pouvez pas directement partager l'item : vous préparez le partage en téléchargeant l'image et en copiant sa description dans le presse-papier.
Et l'application Instagram s'ouvre Et l'utilisateur publie l'item
Ce qui suit le "Quand" doit vous permettre de tester l'effet du "Quand". Certes l'ouverture éventuelle de la page pourrait être testée, mais ce n'est pas la partie la plus intéressante de la fonctionnalité. Il faudrait vérifier surtout que vous avez bien téléchargé l'image et il faudrait vérifier que le contenu du presse-papier contient bien une description textuelle de l'item.
@manacheh @aamina12
J'ai une remarque supplémentaire à propos de la phrase qui suit :
en effet, lorsque l’on regarde plusieurs items, on remarque qu’ils n’ont pas toujours les mêmes attributs.
Pourriez-vous donner des exemples précis de ce que vous vu dans les données ? Je ne vois pas bien de quoi vous parlez... Peut-être s'agit-il juste de données à "nettoyer" à la main sans requérir un traitement automatisé ?
@benel
@manacheh @aamina12
Nous allons utiliser un bouton permettant de copier les attributs et de les afficher en tant que hashtag sous l’image téléchargée.
Est-ce que vous avez fait des recherches sur la manière d'implémenter un tel bouton (qui copie dans le presse-papier un texte qui n'est pas affiché dans la page mais généré). A priori, comme ça, ça ne me semble pas trivial (notamment pour des raisons de sécurité, de compatibilité entre navigateurs...). Si ?
Nous n'avons pas encore effectué de recherche mais si implémenter un bouton de la sorte est compliqué, nous pouvons également afficher un champ texte qui contiendra les attributs formatés.
@manacheh @aamina12
J'ai une remarque supplémentaire à propos de la phrase qui suit :
en effet, lorsque l’on regarde plusieurs items, on remarque qu’ils n’ont pas toujours les mêmes attributs.
Pourriez-vous donner des exemples précis de ce que vous vu dans les données ? Je ne vois pas bien de quoi vous parlez... Peut-être s'agit-il juste de données à "nettoyer" à la main sans requérir un traitement automatisé ?
Si l'on prend l'item ABT (le premier), ses attributs sont name, spatial, ref et created. Si l'on prend l'item AXN 000 (le premier), ses attributs sont name, creator, spatial et created.
@manacheh @aamina12
Nous n'avons pas encore effectué de recherche mais si implémenter un bouton de la sorte est compliqué, nous pouvons également afficher un champ texte qui contiendra les attributs formatés.
L'intérêt d'utiliser une bibliothèque, c'est justement pour que ce ne soit pas trop compliqué... Cherchez "clipboard" (presse-papier) sur www.npmjs.com. Vous devriez trouver votre bonheur dans la liste.
Si l'on prend l'item ABT (le premier), ses attributs sont name, spatial, ref et created. Si l'on prend l'item AXN 000 (le premier), ses attributs sont name, creator, spatial et created.
Oui, effectivement. Il faut prévoir que certains attributs puissent être non définis (on ne connaît pas toujours le nom du photographe, surtout que dans le cas d'"ABT", c'est une photographie ancienne produite par un service de l'État et non par un particulier).
Parmi ces 5 attributs, quels sont ceux qui vous semblent indispensables à copier-coller dans Instagram (en particulier pour des raisons légales) ?
@benel
@manacheh @aamina12
Nous n'avons pas encore effectué de recherche mais si implémenter un bouton de la sorte est compliqué, nous pouvons également afficher un champ texte qui contiendra les attributs formatés.
L'intérêt d'utiliser une bibliothèque, c'est justement pour que ce ne soit pas trop compliqué... Cherchez "clipboard" (presse-papier) sur www.npmjs.com. Vous devriez trouver votre bonheur dans la liste.
En effet , certaines bibliothèques semblent convenir notamment celle-ci : https://www.npmjs.com/package/react-copy-to-clipboard
Si l'on prend l'item ABT (le premier), ses attributs sont name, spatial, ref et created. Si l'on prend l'item AXN 000 (le premier), ses attributs sont name, creator, spatial et created.
Oui, effectivement. Il faut prévoir que certains attributs puissent être non définis (on ne connaît pas toujours le nom du photographe, surtout que dans le cas d'"ABT", c'est une photographie ancienne produite par un service de l'État et non par un particulier).
Parmi ces 5 attributs, quels sont ceux qui vous semblent indispensables à copier-coller dans Instagram (en particulier pour des raisons légales) ?
Les attributs creator and spatial semblent indispensables, l'attribut created n'est pas indispensable légalement (il me semble) mais peut être néanmoins copier-coller dans Instagram tandis que les deux autres (name, ref) semblent utiles uniquement sur Porphyry.
@manacheh @aamina12
certaines bibliothèques semblent convenir notamment celle-ci : https://www.npmjs.com/package/react-copy-to-clipboard
Vous avez deux options : soit une bibliothèque déjà intégrée à React soit une bibliothèque plus généraliste (pour Node).
Notez que vous voulez faire deux choses simultanément : copier un texte sur mesure dans le presse-papier ET télécharger l'image localement. Pas sûr que les deux options vous le permettent...
Si vous n'arrivez pas à le voir juste avec la documentation, peut-être qu'il faut le tester avec quelques lignes de code (en dehors de Porphyry et avec des données "en dur").
@benel
@manacheh @aamina12
certaines bibliothèques semblent convenir notamment celle-ci : https://www.npmjs.com/package/react-copy-to-clipboard
Vous avez deux options : soit une bibliothèque déjà intégrée à React soit une bibliothèque plus généraliste (pour Node).
Notez que vous voulez faire deux choses simultanément : copier un texte sur mesure dans le presse-papier ET télécharger l'image localement. Pas sûr que les deux options vous le permettent...
Si vous n'arrivez pas à le voir juste avec la documentation, peut-être qu'il faut le tester avec quelques lignes de code (en dehors de Porphyry et avec des données "en dur").
Ne pouvons nous pas prendre une bibliothèque permettant de télécharger l'image et une autre bibliothèque pour copier un texte ?
@manacheh @aamina12
Ne pouvons nous pas prendre une bibliothèque permettant de télécharger l'image et une autre bibliothèque pour copier un texte ?
Si bien-sûr. Ce que je voulais dire c'est que si votre bibliothèque vous donne une bouton "clef en main" vous pourrez difficilement changer son comportement. Si par contre, la bibliothèque fait juste la copie dans le presse-papier, vous pourrez faire vous-même un bouton qui fait les deux.
@benel
@manacheh @aamina12
Ne pouvons nous pas prendre une bibliothèque permettant de télécharger l'image et une autre bibliothèque pour copier un texte ?
Si bien-sûr. Ce que je voulais dire c'est que si votre bibliothèque vous donne une bouton "clef en main" vous pourrez difficilement changer son comportement. Si par contre, la bibliothèque fait juste la copie dans le presse-papier, vous pourrez faire vous-même un bouton qui fait les deux.
Mais l'image ne doit pas aller dans le presse-papier, elle doit être téléchargée sur le mobile de l'utilisateur ?
@manacheh @aamina12
Mais l'image ne doit pas aller dans le presse-papier, elle doit être téléchargée sur le mobile de l'utilisateur ?
Oui, c'est bien ce que j'avais compris de ce que vous aviez écrit dans votre stratégie d'implémentation (le fait que le partage sur Instagram ne soit possible qu'à partir d'images présentes sur le mobile de l'utilisateur).
Du coup, c'est précisément pourquoi votre bouton doit faire deux choses différentes (téléchargement d'image et copie de texte dans le presse-papier).
@benel
Voici une nouvelle version des scénarios :
#language: fr
Fonctionnalité: Partager un item sur Instagram
Scénario: Prépare le partage d'un item sur Instagram
Soit "AXN 009" un item ouvert
Quand l'utilisateur prépare le partage d'un item sur Instagram
Alors l'item "AXN 009" est téléchargé
Et le presse-papier contient une description textuelle de l'item