Développement d'une barre de contribution intégrable

anon88550267 · 1 February 2020 10:58

Et avec cette façon de faire, peut-on insérer l’image sur un forum avec du BBCode ?

kimamila · 1 February 2020 11:47

Tout a fait d’accord !
J’avais en tête que ça pourrait être en JS avec une configuration faites dans https://g1.duniter.fr/api
D’autant que les pod Cesium+ ElasticSearch indexent les mouvements et permettent une recherche rapide. Si ça t’intéresse, c’est accessible sur les URL du type g1.data.duniter.fr/g1/movement/_search?pretty&q=comment:REMU* ou en POST (Pour faire des “aggregation” : sum, avg, etc.)

kimamila · 1 February 2020 12:05

A mon avis, oui si ma mémoire est bonne, @ManUtopiK avait coder le site ggouv.org
@ManUtopiK tu confirmes ?

ManUtopiK · 1 February 2020 14:32

Bonne mémoire, ça fait quelques années maintenant…c’était en PHP.

Oui je suis carrément intéressé ! Y-a-t il une doc sur l’api de césium ou tu as un lien de la lib qui génère l’api ? Faudrait que je regarde plus en détail césium… J’avais fait un tour pour regarder comment c’était fait avec Angular. Mais c’est chaud, je connais plus React et surtout Vue…

Oui j’ai déjà commencé à bidouiller. Ouvre la console de ton navigateur et copie-colle ça :

apiNode = "g1.duniter.fr"
pubkey = '27b1j7BPssdjbXmGNMYU2JJrRotqrZMruu5p5AWowUEy'
startTime = new Date("2019-10-07T18:00:00+00:00").getTime() /1000
now = Math.round(Date.now() /1000)
total = 0
target = 4000
arrayFinal = []
mapDelta = []
donneurs = []

await fetch(`https://${apiNode}/tx/history/${pubkey}/times/${startTime}/${now}`)
.then(response => response.json())
.then(response => {
    const transactions = response.history.received
    let tmpTimestamp = startTime

    transactions.map(tx => {
        const donneur = tx.issuers[0]
        const outputs = tx.outputs

        if (donneur !== pubkey) {
            if (!donneurs.includes(donneur)) donneurs.push(donneur)

            outputs
            .filter(output => output.includes(pubkey))
            .map(output => {
                console.log(output)
                const timestamp = tx.time
                const montantTx = Number(output.match(/^(\d+):/)[1])/100
                if (timestamp !== tmpTimestamp) arrayFinal.push({t: tmpTimestamp, y: total.toFixed(2)})
                const tday = 43200 + timestamp - timestamp%86400
                if (mapDelta[tday]) {
                    mapDelta[tday] += Math.round(montantTx)
                } else {
                    mapDelta[tday] = Math.round(montantTx)
                }
                total += montantTx
                tmpTimestamp = timestamp
            })
        }
    })
    arrayFinal.push({t: tmpTimestamp, y: total.toFixed(2)}, {t: now, y: total.toFixed(2)})
})
.catch(error => console.log("Erreur : " + error))

const dividend = await fetch(`https://${apiNode}/blockchain/with/ud`)
.then(resp => resp.json())
.then(async data => await fetch(`https://${apiNode}/blockchain/block/${[...data.result.blocks].pop()}`)
    .then(resp => resp.json())
    .then(data => data.dividend/100))

console.log({
    pubkey,
    dividend,
    total: total.toFixed(2),
    donneurs,
    arrayFinal,
    mapDelta,
    percentage: Math.round(total/target*100)
})

Tu as toutes les données qu’il te faut dans le console.log

D’ailleurs, j’ai pas trouvé plus court que ça pour avoir le DU :

const dividend = await fetch(`https://${apiNode}/blockchain/with/ud`)
.then(resp => resp.json())
.then(async data => await fetch(`https://${apiNode}/blockchain/block/${[...data.result.blocks].pop()}`)
    .then(resp => resp.json())
    .then(data => data.dividend/100))

Obligé de taper 2 fois sur l’api. Césium ne le fournit pas directement ? @kimamila

Paidge · 1 February 2020 15:17

Oui et encore J’ai fait peu de projets en PHP, si ce n’est des projets persos et qqes custumisations de différents CMS et utilisation de qqes frameworks comme symfony par ex. J’ai fait la wotmap en javascript mais, à mon avis le code est carrément améliorable aussi. Je suis plus un bidouilleur qu’un développeur. Ma spécialité c’est plutôt le front et le webdesign. Tout ça c’est du fait que j’ai repris les études à 30 ans pour bosser dans le numérique Les formations que j’ai suivies, même si je suis arrivé au Master2, n’étaient pas terribles du tout

elois · 1 February 2020 16:04

ManUtopiK:

D’ailleurs, j’ai pas trouvé plus court que ça pour avoir le DU :
const dividend = await fetch(`https://${apiNode}/blockchain/with/ud`)
.then(resp => resp.json())
.then(async data => await fetch(`https://${apiNode}/blockchain/block/${[...data.result.blocks].pop()}`)
    .then(resp => resp.json())
    .then(data => data.dividend/100))
Obligé de taper 2 fois sur l’api. Césium ne le fournit pas directement ?

@ManUtopiK hélas oui avec BMA on ne peut pas obtenir directement le montant du DU
Ce sera possible avec l’api GVA et cours de développement.
Un propotype de l’api GVA de Dunitrust est disponible en libre accès ici : https://dev.g1.dunitrust.org/graphiql
Mais attention c’est une version de dev donc elle peut être souvent down, ne vous en servez que pour du test !

anon88550267 · 3 February 2020 20:23

J’avais besoin d’étendre un peu les fonctionnalités de la barre et j’ai fini par tout refactorer.

Vous pouvez jeter un œil ici :

https://growdfunding.borispaing.fr/

Nouveautés

Nouveaux styles :
- Tipeee
- Kickstarter
- Nuage des clefs publiques des donateurs
- Affichage des commentaires associés au plus gros dons
Encapsulation
Quand la date de fin est dépassée, on affiche « Fini »
Messages d’erreurs plus clairs et plus précis
Résolution du problème du SVG qui n’était pas généré par certains serveurs à cause du <?xml interprété comme <? (tag d’ouverture php)
etc.

@Paidge > Je t’envoie une MR quand j’ai vraiment fini tout ce que je veux faire.

Bon, idéalement il faudrait convertir tout ce qui est iframe en Javascript plutôt qu’en PHP, comme l’a mentionné @ManUtopiK, mais je ne sais pas faire pour l’instant, donc soit j’apprends soit quelqu’un d’autre s’en charge. En tous cas c’est maintenant encapsulé, donc la suite devrait être un poil plus facile.

@Moul > D’accord avec l’histoire du nom de domaine. Pourquoi pas installer ça sur g1crowdfunding.monnaie-libre.org ? @poka ? @scanlegentil ?

Moul · 4 February 2020 22:34

6 messages ont été scindés en un nouveau sujet : DuniterJS ou DuniterTS?

anon88550267 · 3 February 2020 20:56

En fait je crois que j’ai trouvé :

https://g1.data.duniter.fr/user/profile/78ZwwgpgdH5uLZLbThUQH7LKwPgjMunYfLiCfUCySkM8

Qu’intégreras-tu ?

anon88550267 · 3 February 2020 21:32

Héhé, enfin réussi à faire un nuage avec les noms Cesium+.

Ça va rapporter des pépètes ça quand le widget sera affiché sur 2-3 sites et que ce sera la bataille pour savoir qui a la plus grosse (taille de police)

En janvier c’était @PiNguyen. Merci qui ? Merci Pi

PiNguyen · 4 February 2020 03:37

Salut Boris, la taille de la police dépens quoi ?

anon88550267 · 4 February 2020 10:24

Du montant de la contribution.

ManUtopiK · 4 February 2020 10:25

Super tout ça !
@anon88550267 Tu as mis sur le dépôt gitlab ? J’ai pas l’impression qu’il soit à jour…

D’ailleurs, existe-t-il une lib js pour interroger un nœud duniter ? Ce serait bien une lib isomorphique (fonctionne en browser, node.js, es6)…

anon88550267 · 4 February 2020 10:26

Pour l’instant c’est là :

J’ai cru lire que non, et que ça manquait d’ailleurs.

matograine · 5 May 2020 11:39

Je trouve que ce générateur mérite amplement un NDD en growdfunding.monnaie-libre.fr. Ou Ğlule.monnaie-libre.fr ?

Par ailleurs, je viens de trouver un bug. : les images SVG ne présentent pas de QR-Code. Je ne sais pas s’il est propre à la version de @anon88550267 ou si la version de @Paidge l’a également.

anon88550267 · 6 May 2020 07:49

Oui, je pensais essayer de faire ça dans la semaine justement.

Si ma mémoire ne me fait pas défaut, je crois que c’est parce que la bibliothèque qui génère le QR code produit un bitmap.

tuxmain · 11 July 2020 09:29

Quand des nœuds deviennent indisponibles, les barres de progression le deviennent aussi. C’est problématique. On doit changer de nœud souvent.

Je propose d’ajouter 2 choses :

interroger plusieurs nœuds d’une liste, tant qu’on n’a pas de réponse (selon un ordre aléatoire pour répartir la charge) ;
un mode « cache serveur », où c’est le serveur qui fait la requête et qui génère un html statique de temps en temps (permet de moins spammer les nœuds, chargement plus rapide chez le client, occupe moins de bande passante du serveur).

Je fais ça si personne n’a de meilleure idée.

tuxmain · 11 July 2020 15:41

Je vais également rendre l’URL du nœud paramétrable uniquement côté serveur. Laisser le client choisir ça est une faille de sécurité.

tuxmain · 12 July 2020 11:52

@Paidge J’ai fait une MR.

Laisser le client choisir son nœud est une vraie faille de sécurité : il peut utiliser le serveur pour faire du spam, le DoS en faisant des requêtes très longues, et même lire les fichiers du serveur. (c’est une faille réellement exploitée contre WordPress et d’autres sites PHP)

Paidge · 15 July 2020 08:50

ok merci @tuxmain