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

[Paidge]

@Moul

Je galère à chaque fois à trouver à l’URL de ton instance de barre de financement.

Je me suis fait la réflexion ces derniers jours Même moi je ne la connais pas par coeur Je pensais ptet à utiliser un nom de domaine de type financement.duniter.org. Après c’est vrai que mon serveur n’est pas une bête de course. Les instances Diaspora et Peertube qui sont dessus ne sont pas très véloces

[vincentux]

@Moul

J’aimerai déjà retaper les apps YunoHost/Duniter existantes.

[ManUtopiK]

Salut @Paidge et les autres…

J’ai regardé le code et il y a un truc que je ne comprend pas bien. Pourquoi passer par du php pour générer la barre alors que tout peut être fait dans le navigateur ?

En tant que tel, cela oblige à avoir un serveur apache qui va générer la barre avec les fichiers iframe.php et image.php alors que l’on pourrait se passer d’un serveur en faisant directement une requête sur l’api g1.duniter.fr.
Vous pensez peut-être à faire un cache serveur pour décharger g1.duniter.fr ? Ça peut en parti se remplacer par du localstorage sur le navigateur.

Il vaut mieux faire tout ce que l’on peut sur un navigateur et pas sur un serveur non ?

[Moul]

Je pense que paidge est plutôt expérimenté avec PHP.
Voici la raison pour laquelle c’est fait sur le serveur et pas dans le client (moteur JS) en JavaScript.

[vit]

@yyy a commencé une POC en Javascript, mais il n’a pas été au bout du projet. Je suis entièrement d’accord que passer par un serveur est overkill. Mais cette barre PHP est exemplaire et peux servir de base à une migration en full JS !

[anon88550267]

@ManUtopiK

J’ai regardé le code et il y a un truc que je ne comprend pas bien. Pourquoi passer par du php pour générer la barre alors que tout peut être fait dans le navigateur ?

Comment fait-on pour générer une image directement dans le navigateur ?

@ManUtopiK

En tant que tel, cela oblige à avoir un serveur apache qui va générer la barre avec les fichiers iframe.php et image.php alors que l’on pourrait se passer d’un serveur en faisant directement une requête sur l’api g1.duniter.fr.

@vit

@yyy a commencé une POC en Javascript, mais il n’a pas été au bout du projet. Je suis entièrement d’accord que passer par un serveur est overkill. Mais cette barre PHP est exemplaire et peux servir de base à une migration en full JS !

J’avais d’ailleurs demandé sur ce fil si quelqu’un savait faire ça (car le besoin est là, clairement). Serais-tu capable de faire ça @ManUtopiK ?

[vit]

@anon88550267

Comment fait-on pour générer une image directement dans le navigateur ?

Tu peux utiliser le canvas, mais le mieux c’est de créer un svg ! Le svg peut même s’animer en y ajoutant du javascript dedans ! Using Javascript with SVG

[anon88550267]

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

[kimamila]

@ManUtopiK

J’ai regardé le code et il y a un truc que je ne comprend pas bien. Pourquoi passer par du php pour générer la barre alors que tout peut être fait dans le navigateur ?

En tant que tel, cela oblige à avoir un serveur apache qui va générer la barre avec les fichiers iframe.php et image.php alors que l’on pourrait se passer d’un serveur en faisant directement une requête sur l’api g1.duniter.fr.
Vous pensez peut-être à faire un cache serveur pour décharger g1.duniter.fr ? Ça peut en parti se remplacer par du localstorage sur le navigateur.

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]

@anon88550267

Serais-tu capable de faire ça @ManUtopiK ?

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

[ManUtopiK]

@kimamila

si ma mémoire est bonne, @ManUtopiK avait codé le site ggouv.org

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

@kimamila

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

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…

@anon88550267

Serais-tu capable de faire ça @ManUtopiK ?

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]

@Moul

Je pense que paidge est plutôt expérimenté avec PHP.

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]

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

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 ?

[anon88550267]

@anon88550267

• Nuage des clefs publiques des donateurs (@kimamila > y aurait-il quelque part une page de documentation pour que j’apprenne à convertir ça en noms Cesium+ ?)

En fait je crois que j’ai trouvé :

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

@kimamila

Et promis je l’intégrerai ensuite a gchange

Qu’intégreras-tu ?

[anon88550267]

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]

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

[anon88550267]

Du montant de la contribution.

[ManUtopiK]

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

@kimamila

Oui je suis preneur d’un lib en JS

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