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

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

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

1 Like

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

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 :slight_smile:

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

3 Likes

Oui et encore :stuck_out_tongue: 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 :slight_smile: Les formations que j’ai suivies, même si je suis arrivé au Master2, n’étaient pas terribles du tout :confused:

@ManUtopiK hélas oui avec BMA on ne peut pas obtenir directement le montant du DU :confused:
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 !

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 :
  • 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 ?

6 Likes

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

En fait je crois que j’ai trouvé :

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

Qu’intégreras-tu ?

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) :smirk:

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

8 Likes

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

Du montant de la contribution.

3 Likes

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

Pour l’instant c’est là :

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

2 Likes

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

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.

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.

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.

1 Like

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

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

4 Likes

ok merci @tuxmain

2 Likes