aamina12 commented 3 years ago

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

benel commented 3 years ago

@aamina12 N'oubliez pas d'argumenter en quoi cette fonctionnalité serait souhaitable pour le projet @Hypertopic/cite-du-vitrail

aamina12 commented 3 years ago

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.

manacheh commented 3 years ago

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

LSauter68140 commented 3 years ago

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 ;

aamina12 commented 3 years ago

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"

benel commented 3 years ago

Très bonne idée d'avoir mis le scénario complet qui se termine par l'affichage dans Instagram.

benel commented 3 years ago

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 ?

LSauter68140 commented 3 years ago

* 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.

benel commented 3 years ago

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).

LSauter68140 commented 3 years ago

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.

Quentin-UTT commented 3 years ago

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

manacheh commented 3 years ago

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

benel commented 3 years ago

@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 ?

manacheh commented 3 years ago

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.

benel commented 3 years ago

@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.

Quentin-UTT commented 3 years ago

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

manacheh commented 3 years ago

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 :

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

benel commented 3 years ago

@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 ?

Quentin-UTT commented 3 years ago

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

benel commented 3 years ago

@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.

benel commented 3 years ago

@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é ?

manacheh commented 3 years ago

@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.

benel commented 3 years ago

@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) ?

manacheh commented 3 years ago

@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.

benel commented 3 years ago

@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").

manacheh commented 3 years ago

@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 ?

benel commented 3 years ago

@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.

manacheh commented 3 years ago

@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 ?

benel commented 3 years ago

@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).

Quentin-UTT commented 3 years ago

@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

benel commented 3 years ago

@Quentin-UTT @Lan-MU623

Merci pour cette nouvelle version.

Soit "AXN 009" un item ouvert

Êtes-vous sûr que ce soit le meilleur des exemples ? Pour l'instant dans le jeu de test, il n'est associé à aucune catégorie... C'est dommage parce que vous aviez eu l'idée intéressante d'en faire des hashtags sur Instagram...

Vous pouvez certes compléter le jeu de test. Mais ça va vous donner plus de travail. Autant prendre un item un peu plus "fourni".

Quand l'utilisateur prépare le partage d'un item sur Instagram

L'article indéfini est un peu curieux. J'imagine qu'il s'agit de l'item affiché ?

Alors l'item "AXN 009" est téléchargé

Pas l'item lui même... Mais sa ressource principale, sa photographie... Précisez peut-être aussi "sur le terminal de l'utilisateur". Ça rendra peut-être les choses plus claires (d'autant plus qu'en français certains utilisent télécharger pour traduire à la fois download et upload).

Et le presse-papier contient une description textuelle de l'item

L'intérêt d'un scénario est de détailler toutes les données d'un exemple :

qui vous seront nécessaires pour le test,
qui illustrent par l'exemple ce qui devra être implémenté.

N'ayez pas peur :)

manacheh commented 3 years ago

@benel En essayant avec @aamina12 d'implémenter un bouton qui copie les attributs d'un item, nous n'obtenons jamais les vrais valeurs de ces attributs : nous obtenons soit [object Object], [object Object], [object Object], [object Object], soit [object HTMLInputElement]. Lorsqu'un item a 3 attributs, on a bien [object Object], [object Object], [object Object]. Est-ce normal ?

benel commented 3 years ago

@manacheh @aamina12

[object Object]

Entrainez vous de manière interactive à voir comment on passe en JavaScript d'un objet à une chaîne de caractères :

benel commented 3 years ago

@manacheh @aamina12

[object HTMLInputElement].

Ça par contre, c'est bizarre. Vous êtes sûrs que c'est l'état que vous regardez et non les composants ?

manacheh commented 3 years ago

@manacheh @aamina12

[object HTMLInputElement].

Ça par contre, c'est bizarre. Vous êtes sûrs que c'est l'état que vous regardez et non les composants ?

Nous demandons de copier la variable attributes de la page Item.jsx

benel commented 3 years ago

@manacheh @aamina12

en faisant un JSON.stringify(this.attributes) , un message d'erreur me dit que 18 stack frames were collapsed

Comme je vous l'indiquais plus haut : vous ne regardez pas les bonnes variables. En React, les données d'un composant soit dans son état (this.state), qui lui est propre, soit dans les propriétés (props ou this.props) que lui a transmis le composant qui le contient.

manacheh commented 3 years ago

@manacheh @aamina12

[object HTMLInputElement].

Ça par contre, c'est bizarre. Vous êtes sûrs que c'est l'état que vous regardez et non les composants ?

Justement je vous écrivais que je m'étais trompé de variable ^^ Merci tout de même pour votre aide.

Quentin-UTT commented 3 years ago

#language: fr

Fonctionnalité: Partager un item sur Instagram

Scénario: Prépare le partage d'un item sur Instagram

  Soit "SR 005" un item ouvert
  Quand l'utilisateur prépare le partage de l'item "SR 005" sur Instagram
  Alors l'image de l'item "SR 005" est téléchargé sur le terminal de l'utilisateur
  Et le presse-papier contient les topics "Sacrifices d'Abraham", "Isaac", "Abram/Abraham", "J.-P. Florence", "1894"
  Et l'utilisateur publie l'item

@benel voici une nouvelle version des scénarios selon vos conseils. J'ai choisi de prendre l'item SR 005 qui est un peu plus détaillé.

Alors l'image de l'item "SR 005" est téléchargé sur le terminal de l'utilisateur Je ne sais pas si je dois parler d'image ou bien de ressource/vignette car c'est ainsi que le lien de l'image est renseigné dans Porphyry.

Et le presse-papier contient les topics "Sacrifices d'Abraham", "Isaac", "Abram/Abraham", "J.-P. Florence", "1894" Est-ce que cette syntaxe convient pour préciser les topics auxquels appartient l'item ou doit-on préciser

Et le presse-papier contient le topic "Sacrifices d'Abraham"
Et le presse-papier contient le topic "Isaac"
Et le presse-papier contient le topic "Abram/Abraham"...

benel commented 3 years ago

@Quentin-UTT @Lan-MU623

On y est presque :)

Alors l'image de l'item "SR 005" est téléchargé sur le terminal de l'utilisateur

Super.

Attention : téléchargé -> téléchargée

Et le presse-papier contient les topics "Sacrifices d'Abraham", "Isaac", "Abram/Abraham", "J.-P. Florence", "1894"

Super pour les exemples. Par contre, là vous avez un nombre de paramètres fixes, ce n'est pas très réutilisable. Deux solutions :

soit vous mettez toutes les valeurs dans le même paramètre (les mêmes guillemets) avec un séparateur. Mais il faudra programmer une boucle dans vos tests,
soit vous mettez une étape par paramètre (toujours la même étape que vous réutilisez).

Et attention "topics" en français c'est "catégorie".

Et l'utilisateur publie l'item

Pas forcément utile. Et surtout pas trop testable...

Par contre vous avez oublié les attributs... En particulier, on avait dit plus haut que certains étaient indispensables pour le respect des droits d'auteur (du photographe).

Quentin-UTT commented 3 years ago

#language: fr

Fonctionnalité: Partager un item sur Instagram

Scénario: Préparer le partage d'un item sur Instagram

  Soit "SR 005" un item ouvert
  Quand l'utilisateur prépare le partage de l'item "SR 005" sur Instagram
  Alors l'image de l'item "SR 005" est téléchargée sur le terminal de l'utilisateur
  Et le presse-papier contient les catégories "Sacrifices d'Abraham, Isaac, Abram/Abraham, J.-P. Florence, 1894"
  Et le presse-papier contient le créateur "Aurélien Benel"
  Et le presse-papier contient le lieu "Église Saint-Remi, Troyes"
  Et le presse-papier contient la date de création "2015-10-24"

@benel

Effectivement, j'avais oublié les attributs. Est-ce que cela est plus correct ?

benel commented 3 years ago

Merci @Quentin-UTT et bravo ! Oui, c'est tout à fait ça.

Ceci dit, je me demande si ça ne serait plus pertinent d'utiliser la même phrase pour tous les "le presse-papier contient". Cela permettrait :

de simplifier le travail des testeurs,
d'être plus précis dans la spécification du formatage.

Exemples :

Et le presse-papier contient les catégories "Sacrifices d'Abraham, Isaac, Abram/Abraham, J.-P. Florence, 1894"

Pour montrer la génération de "hashtags" :

Et le presse-papier contient "#SacrificeDAbraham"

Et le presse-papier contient le créateur "Aurélien Benel" Et le presse-papier contient la date de création "2015-10-24"

Pour montrer la prise en compte du droit d'auteur :

Et le presse papier contient "© Aurélien Bénel, 2015-10-24"

Quentin-UTT commented 3 years ago

@benel Merci pour votre retour, voici les scénarios avec les modifications que vous m'avez indiqué.

#language: fr

Fonctionnalité: Partager un item sur Instagram

Scénario: Préparer le partage d'un item sur Instagram

  Soit "SR 005" un item ouvert
  Quand l'utilisateur prépare le partage de l'item "SR 005" sur Instagram
  Alors l'image de l'item "SR 005" est téléchargée sur le terminal de l'utilisateur
  Et le presse-papier contient "#Sacrifices d'Abraham, #Isaac, #Abram/Abraham, #J.-P. Florence, #1894"
  Et le presse-papier contient "@Aurélien Benel, 2015-10-24, Église Saint-Remi, Troyes"

benel commented 3 years ago

Merci @Quentin-UTT pour cette nouvelle version.

Et le presse-papier contient "#Sacrifices d'Abraham, #Isaac, #Abram/Abraham, #J.-P. Florence, #1894"

Je n'utilise pas beaucoup les hashtags moi-même, mais je suis certain qu'il ne peut pas y avoir d'espaces au milieu. Pour les apostrophes, barres obliques, tirets, points, il faudrait que vous vérifiez (avec @Lan-MU623 bien entendu).

Et le presse-papier contient "@Aurélien Benel, 2015-10-24, Église Saint-Remi, Troyes"

Cela va créer un lien vers l'utilisateur @Aurélien d'Instagram. Je ne sais qui c'est mais ce n'est pas moi... Dans mon exemple, j'avais mis © (le symbole copyright), qui certes n'a pas de signification précise dans le droit français, mais qui est couramment utilisé pour indiquer l'auteur et la date, notamment par votre partie prenante principale dans ses publications).

manacheh commented 3 years ago

@benel , en me documentant avec @aamina12 sur les moyens de télécharger une image, j'ai découvert un attribut download à placer dans une balise HTML : https://www.w3schools.com/TAGS/att_a_download.asp Pensez-vous que ce moyen est une bonne idée ou est-il préférable d'utiliser une bibliothèque comme énoncé précédemment ?

benel commented 3 years ago

@manacheh @aamina12

en me documentant avec @aamina12 sur les moyens de télécharger une image, j'ai découvert un attribut download à placer dans une balise HTML

Le résultat ne sera pas le même dans l'interface : ici, il s'agit juste d'un comportement particulier quand on clique sur un lien (comportement que l'usager peut d'ailleurs déclencher sur n'importe quel lien en maintenant une touche spéciale pendant le clic).

De ce que j'avais compris des maquettes, scénarios et discussions diverses, vous étiez plutôt partis sur un bouton "Instagram" sur lequel un clic déclenche à la fois :

le téléchargement de l'image sur le terminal de l'utilisateur,
la copie dans le presse-papier d'un texte contenant des indications pour le respect du droit d'auteur de la photographie et des hashtags basés sur la description du vitrail.
un petit message indiquant que le partage sur Instagram est préparé (dans les images du terminal) et dans le presse-papier et invitant (peut-être grâce à un bouton) à aller sur Instragram.

Si c'est bien cela que vous voulez faire, vous devrez bien déclencher le téléchargement par programme (et pas en cliquant sur un lien).

manacheh commented 3 years ago

@benel

@manacheh @aamina12

en me documentant avec @aamina12 sur les moyens de télécharger une image, j'ai découvert un attribut download à placer dans une balise HTML

Le résultat ne sera pas le même dans l'interface : ici, il s'agit juste d'un comportement particulier quand on clique sur un lien (comportement que l'usager peut d'ailleurs déclencher sur n'importe quel lien en maintenant une touche spéciale pendant le clic).

Entendu, j'étais étonné qu'il existe un tel attribut mais nous allons effectivement utiliser une bibliothèque (déjà énoncé dans les stratégies d'implémentation : https://preview.npmjs.com/package/image-downloader .)

Pour ce qui est du copiage des attributs (creator et spatial), nous arrivons bien avec @aamina12 à les copier en les reformatant. Par contre, nous avons plus de mal pour les points de vue : nous arrivons seulement à extraire ceci :

{"56e092d8a6179a788c74b618b29801c0":[{"viewpoint":"56e092d8a6179a788c74b618b29801c0","id":"ff69b3487ba60d4d8e2ea00441bba238"},{"viewpoint":"56e092d8a6179a788c74b618b29801c0","id":"2182a45481bd0a46a58721f2a861d4bf"},{"viewpoint":"56e092d8a6179a788c74b618b29801c0","id":"8e2a5c829fee6845bb5c4b3e4cc482b4"}],"a76306e4f17ed4f79e7e481eb9a1bd06":[{"viewpoint":"a76306e4f17ed4f79e7e481eb9a1bd06","id":"e145c06d9889434596e4f1c67ed941bb"}]}

Nous travaillons sur la variable this.state.topic mais nous nous trompons peut-être de variables.

Quentin-UTT commented 3 years ago

@benel Voici la nouvelle version avec la correction des hashtags et du symbole copyright

#language: fr

Fonctionnalité: Partager un item sur Instagram

Scénario: Préparer le partage d'un item sur Instagram

  Soit "SR 005" un item ouvert
  Quand l'utilisateur prépare le partage de l'item "SR 005" sur Instagram
  Alors l'image de l'item "SR 005" est téléchargée sur le terminal de l'utilisateur
  Et le presse-papier contient "#SacrificeDAbraham, #Isaac, #AbramAbraham, #JPFlorence, #Datation1894"
  Et le presse-papier contient "© Aurélien Benel, 2015-10-24, Église Saint-Remi, Troyes"

Et le presse-papier contient "#SacrificeDAbraham, #Isaac, #AbramAbraham, #JPFlorence, #Datation1894" Pour la datation, j'ai dû rajouter le mot "datation" devant car après quelques recherches, un hashtag ne peut contenir de caractères spéciaux et ne peut pas contenir que des chiffres

benel commented 3 years ago

Super ! Bravo @Quentin-UTT ! 🎉

Votre scénario est prêt à être intégré. Vous pouvez faire une demande d'intégration (pull request).

benel commented 3 years ago

Et le presse-papier contient "#SacrificeDAbraham, #Isaac, #AbramAbraham, #JPFlorence, #Datation1894"

Pour éviter des mauvaises surprises sur l'ordre des hashtags au moment de la génération, je vous recommande @Quentin-UTT de mettre une étape pour chaque hashtag (en plus c'est pas mal parce que chacun correspond à un cas différent).

manacheh commented 3 years ago

@benel

Je me permets de vous relancer concernant mon commentaire précédent :

@benel

@manacheh @aamina12

en me documentant avec @aamina12 sur les moyens de télécharger une image, j'ai découvert un attribut download à placer dans une balise HTML

Le résultat ne sera pas le même dans l'interface : ici, il s'agit juste d'un comportement particulier quand on clique sur un lien (comportement que l'usager peut d'ailleurs déclencher sur n'importe quel lien en maintenant une touche spéciale pendant le clic).

Entendu, j'étais étonné qu'il existe un tel attribut mais nous allons effectivement utiliser une bibliothèque (déjà énoncé dans les stratégies d'implémentation : https://preview.npmjs.com/package/image-downloader .)

Pour ce qui est du copiage des attributs (creator et spatial), nous arrivons bien avec @aamina12 à les copier en les reformatant. Par contre, nous avons plus de mal pour les points de vue : nous arrivons seulement à extraire ceci :

{"56e092d8a6179a788c74b618b29801c0":[{"viewpoint":"56e092d8a6179a788c74b618b29801c0","id":"ff69b3487ba60d4d8e2ea00441bba238"},{"viewpoint":"56e092d8a6179a788c74b618b29801c0","id":"2182a45481bd0a46a58721f2a861d4bf"},{"viewpoint":"56e092d8a6179a788c74b618b29801c0","id":"8e2a5c829fee6845bb5c4b3e4cc482b4"}],"a76306e4f17ed4f79e7e481eb9a1bd06":[{"viewpoint":"a76306e4f17ed4f79e7e481eb9a1bd06","id":"e145c06d9889434596e4f1c67ed941bb"}]}

Nous travaillons sur la variable this.state.item.topic mais nous nous trompons peut-être de variables.

Hypertopic / Porphyry

Share an item on Instagram #373

Description

Phase 1

Phase 2

Phase 3

language: fr

Stratégie d'implémentation

language: fr

language: fr

Stratégie d'implémentation

language: fr

language: fr