manacheh
commented
3 years ago @benel
Voici, avec @aamina12, notre troisième version de la stratégie d'implémentation. Celle-ci est bien différente des deux autres car nous avons commencé à tester le code dans notre environnement local :
Stratégie d'implémentation
Quelle partie du code sera impactée (classes, méthodes) ?
La partie du code impactée se situe dans le fichier Item.jsx ( https://github.com/Hypertopic/Porphyry/blob/v7/src/components/itemPage/Item.jsx) : En effet, c’est dans ce fichier que la page d’un item est crée et c’est précisément dans cette page que l’on veut permettre le partage d’un item sur Instagram.
La fonctionnalité “Share an item on Instagram” ne va pas impacter le code déjà présent. Nous allons ajouter un bouton qui, lors du clic, entraînera : -Le copiage dans le presse papier des informations de l’item que l’on veut mettre dans la description lors du partage sur Instagram (le créateur, la localisation et les points de vue). -Le téléchargement de l’image de l’item sur le téléphone de l’utilisateur -L’apparition d’un message indiquant que l’image a bien été téléchargée, que les informations sont bien copiées et que l’utilisateur n’a plus qu’à se rendre sur Instagram pour publier.
Cette implémentation sera efficace uniquement sur mobile, car on ne peut pas partager de médias sur Instagram via ordinateur.
Y aura-t-il des difficultés d'un point de vue algorithmique ? Avez-vous des pistes pour les résoudre ?
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 ?
Nous avons besoin de 3 types de données différentes :
-les attributs de l’item : nous pouvons les trouver dans la variable this.state.item (en effectuant un JSON.stringify()) :
{"name":["AXN 009"],"thumbnail":["https://steatite.utt.fr/thumbnail/dff21da25a2bebd654e81536fc5aaa8a63ab6e4f"],"resource":["https://steatite.utt.fr/picture/dff21da25a2bebd654e81536fc5aaa8a63ab6e4f"],"topic":{"56e092d8a6179a788c74b618b29801c0":[],"a76306e4f17ed4f79e7e481eb9a1bd06":[]},"item":[],"creator":["Aurélien Bénel"],"created":["2017-09-24"],"spatial":["Église Saint-Loup, Auxon"]}
En rajoutant la clé (par exemple this.state.item.creator), nous obtenons directement la valeur de l’attribut désiré (par exemple Aurélien Bénel).
-l’URL de l’image à télécharger : comme vu juste avant, on la retrouve dans la variable this.state.item.resource.
-les points de vue de l’item : nous savons qu’ils se trouvent dans la variable this.state.item.topic mais les résultats apparaissent sous cette forme :
{"56e092d8a6179a788c74b618b29801c0":[{"viewpoint":"56e092d8a6179a788c74b618b29801c0","id":"ff69b3487ba60d4d8e2ea00441bba238"},{"viewpoint":"56e092d8a6179a788c74b618b29801c0","id":"2182a45481bd0a46a58721f2a861d4bf"},{"viewpoint":"56e092d8a6179a788c74b618b29801c0","id":"8e2a5c829fee6845bb5c4b3e4cc482b4"}],"a76306e4f17ed4f79e7e481eb9a1bd06":[{"viewpoint":"a76306e4f17ed4f79e7e481eb9a1bd06","id":"e145c06d9889434596e4f1c67ed941bb"}]}
Nous n’arrivons donc pas encore à extraire les points de vue d’un item.
Existe-t-il des bibliothèques qui pourraient simplifier l'implémentation ?
Nous avons pu trouver sur npmjs.com, les bibliothèques suivantes :
react-copy-to-clipboard : permet de spécifier le texte à copier dans le presse papier, notamment par le biais d’un clic sur un bouton. js-file-downloader : permet de télécharger un fichier sur l’appareil de l’utilisateur.
sources :
- https://www.npmjs.com/package/react-copy-to-clipboard
- https://www.npmjs.com/package/js-file-downloader
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).
Nous avons pu essayer via notre environnement local nos bibliothèques pour débuter l’implémentation : -Avec la bibliothèque react-copy-to-clipboard, nous avons commencé par ajouter un bouton sous l’image de l’item :
<CopyToClipboard text={attributesInstagram}>
<button>Copy to clipboard</button>
</CopyToClipboard>
La position du bouton peut être amenée à changer.
Lorsque l’on clique sur le bouton, on copie la valeur de la variable attributesInstagram: sa valeur dépend si l’auteur et/ou la localisation de l’item existe ou non. Si un item a donc seulement pour attribut un auteur, seul cet attribut sera copié et il en va de même pour la localisation. Si l’auteur et la localisation existent, on copie les deux attributs en ajoutant des espaces et/ou des virgules pour harmoniser l’ensemble. Enfin, si aucun des deux attributs n’existent, on copie une phrase ‘Auteur et localisation inconnus’.
let attributesInstagram;
if (typeof this.state.item.creator == 'undefined') {
if (typeof this.state.item.spatial == 'undefined') {
attributesInstagram = 'Auteur et localisation inconnus';
} else {
attributesInstagram = this.state.item.spatial;
}
} else if (typeof this.state.item.spatial == 'undefined') {
attributesInstagram = this.state.item.creator;
} else {
attributesInstagram = this.state.item.creator + ', ' + this.state.item.spatial;
}Les attributs sélectionnés peuvent être amenés à changer.
Nous avons ensuite utilisé la bibliothèque js-file-downloader pour télécharger l’image de l’item. On crée une variable qui contient l’url de l’image, un booléen qui permet de désactiver le lancement automatique du téléchargement et enfin, le nom du fichier. Rajouter le ‘.jpg’ est important puisqu’il permet de télécharger l'image de l'item en tant qu’image JPEG, ne pas le mettre entraîne le téléchargement de l'image de l'item en tant que type fichier :
const download = new JsFileDownloader({
url: this.state.item.resource,
autoStart: false,
filename: '' + this.state.item.name+ '.jpg'
});Il ne reste qu’à modifier le code du copiage créé précédemment pour qu’il lance le téléchargement lorsque les attributs sont copiés, c’est à dire au clic du bouton :
<CopyToClipboard text={attributesInstagram} onCopy={() => download.start()
.then(function() { // success
})
.catch(function(error) { // handle errors
})
}>
<button>Copy to clipboard</button>
</CopyToClipboard>Ainsi, lorsque l’on clique sur le bouton sous l’item AXN 009 :
Le téléchargement de l’image de l’item se lance et :
Les attributs creator et spatial sont bien copiés dans le presse papier.
Cela fonctionne sur ordinateur avec Firefox mais le plus important est de voir si cela marche sur mobile avec différents navigateurs.
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
Quentin-UTT
LSauter68140
YaellePihan
Une demande de téléchargement de l'image est lancée et un pop-up indiquant la démarche à suivre pour partager sur Instagram s'affiche.
En simultané, les attributs et les points de vue du vitrail sont copiés pour pouvoir être utilisé sur 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
Phase 2
Phase 3